From 91b03a95bb75ad615d2a4caa88ffb7f1e093b453 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:04:02 +0000
Subject: [PATCH] Improve scrolling behavior in video category rows for
 smoother navigation

Refactors the scrolling logic in `netflix-grid.tsx` by replacing the modulo-based wrapping with a simpler boundary check. This change aims to fix issues where the scrolling might not be functioning as expected and adjusts the initial offset to a middle position for a more seamless looping effect.

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

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 4580a00..60cde6d 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -170,9 +170,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           const newX = prev + speed;
           const totalWidth = category.videos.length * videoWidth;
           
-          // Pure modulo approach - no resets, just mathematical wrapping
-          const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth;
-          return -normalizedX;
+          // Simple boundary check without complex math
+          if (newX <= -totalWidth) {
+            return newX + totalWidth;
+          } else if (newX >= 0) {
+            return newX - totalWidth;
+          }
+          return newX;
         });
       }, interval);
     }
@@ -195,9 +199,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         const newX = prev + speed;
         const totalWidth = category.videos.length * videoWidth;
         
-        // Pure modulo approach - no resets, just mathematical wrapping
-        const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth;
-        return -normalizedX;
+        // Simple boundary check without complex math
+        if (newX <= -totalWidth) {
+          return newX + totalWidth;
+        } else if (newX >= 0) {
+          return newX - totalWidth;
+        }
+        return newX;
       });
     }, 16); // Fixed interval - speed controlled by pixel movement only
   };
@@ -205,8 +213,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   // Initialize with first video on the left side  
   useEffect(() => {
     if (category.videos.length > 0) {
-      // Start at position 0 for simple modulo math
-      setTranslateX(0);
+      // Start at middle position for seamless loop
+      const totalWidth = category.videos.length * videoWidth;
+      setTranslateX(-totalWidth / 2);
     }
   }, [category.videos.length]);