From 8ee1e0e4f632d1b6121b17a96e836f21e2cb9921 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:02:31 +0000
Subject: [PATCH] Improve carousel behavior for seamless infinite scrolling

Refactor the `CategoryRow` component in `netflix-grid.tsx` to use a pure modulo approach for infinite carousel scrolling, replacing the previous reset logic. The starting position is also adjusted to 0 for simplified calculations.

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 | 43 +++++---------------------
 1 file changed, 8 insertions(+), 35 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index dd1a802..2e403fd 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -168,22 +168,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           const newX = prev + speed;
           const totalWidth = category.videos.length * videoWidth;
           
-          // True seamless infinite carousel - no visible jumps
-          // Keep moving until we're in valid range, then make tiny adjustment
-          let finalX = newX;
-          
-          // If we've moved past the end of middle section, reset seamlessly
-          if (finalX <= -totalWidth * 2) {
-            // We're past the end, bring back to equivalent position in middle
-            finalX = finalX + totalWidth;
-          }
-          // If we've moved past the beginning of middle section, reset seamlessly  
-          else if (finalX >= 0) {
-            // We're past the beginning, bring back to equivalent position in middle
-            finalX = finalX - totalWidth;
-          }
-          
-          return finalX;
+          // Pure modulo approach - no resets, just mathematical wrapping
+          const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth;
+          return -normalizedX;
         });
       }, interval);
     }
@@ -206,22 +193,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         const newX = prev + speed;
         const totalWidth = category.videos.length * videoWidth;
         
-        // True seamless infinite carousel - no visible jumps
-        // Keep moving until we're in valid range, then make tiny adjustment
-        let finalX = newX;
-        
-        // If we've moved past the end of middle section, reset seamlessly
-        if (finalX <= -totalWidth * 2) {
-          // We're past the end, bring back to equivalent position in middle
-          finalX = finalX + totalWidth;
-        }
-        // If we've moved past the beginning of middle section, reset seamlessly  
-        else if (finalX >= 0) {
-          // We're past the beginning, bring back to equivalent position in middle
-          finalX = finalX - totalWidth;
-        }
-        
-        return finalX;
+        // Pure modulo approach - no resets, just mathematical wrapping
+        const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth;
+        return -normalizedX;
       });
     }, 16); // Fixed interval - speed controlled by pixel movement only
   };
@@ -229,9 +203,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   // Initialize with first video on the left side  
   useEffect(() => {
     if (category.videos.length > 0) {
-      // Start in middle copy (segunda copia) so loop works in both directions
-      const totalWidth = category.videos.length * videoWidth;
-      setTranslateX(-totalWidth);
+      // Start at position 0 for simple modulo math
+      setTranslateX(0);
     }
   }, [category.videos.length]);