From ecbd67b5febed4c9735de5391978231a113e28cb Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:59:54 +0000
Subject: [PATCH] Improve carousel behavior for smoother video navigation

Refactor carousel logic in `netflix-grid.tsx` to correctly handle infinite scrolling by adjusting position within a three-copy layout, preventing jumps and ensuring a continuous flow.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/QCN70f2
---
 client/src/components/netflix-grid.tsx | 40 +++++++++++++-------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 1a9ceb6..d38f355 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -168,18 +168,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           const newX = prev + speed;
           const totalWidth = category.videos.length * videoWidth;
           
-          // Seamless infinite carousel - no jumps, just continuous flow
-          let adjustedX = newX;
-          
-          // Keep position within bounds using modulo for seamless loop
-          while (adjustedX <= -totalWidth) {
-            adjustedX += totalWidth;
-          }
-          while (adjustedX > 0) {
-            adjustedX -= totalWidth;
+          // Seamless infinite carousel - check if we need to wrap around
+          // We have 3 copies: [copy1][copy2][copy3]
+          // We want to stay in copy2 range: -totalWidth to -totalWidth*2
+          if (newX >= 0) {
+            // Went too far left, wrap to end of copy2
+            return newX - totalWidth;
+          } else if (newX <= -totalWidth * 2) {
+            // Went too far right, wrap to start of copy2  
+            return newX + totalWidth;
           }
           
-          return adjustedX;
+          return newX;
         });
       }, interval);
     }
@@ -202,18 +202,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         const newX = prev + speed;
         const totalWidth = category.videos.length * videoWidth;
         
-        // Seamless infinite carousel - no jumps, just continuous flow
-        let adjustedX = newX;
-        
-        // Keep position within bounds using modulo for seamless loop
-        while (adjustedX <= -totalWidth) {
-          adjustedX += totalWidth;
-        }
-        while (adjustedX > 0) {
-          adjustedX -= totalWidth;
+        // Seamless infinite carousel - check if we need to wrap around
+        // We have 3 copies: [copy1][copy2][copy3]
+        // We want to stay in copy2 range: -totalWidth to -totalWidth*2
+        if (newX >= 0) {
+          // Went too far left, wrap to end of copy2
+          return newX - totalWidth;
+        } else if (newX <= -totalWidth * 2) {
+          // Went too far right, wrap to start of copy2  
+          return newX + totalWidth;
         }
         
-        return adjustedX;
+        return newX;
       });
     }, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation
   };