From 9e185a1dfd04f7e061f48e79f2c1984800b949dc Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:59:33 +0000
Subject: [PATCH] Improve scrolling behavior and initial positioning in video
 grids

Refactor the `CategoryRow` component in `netflix-grid.tsx` to adjust the logic for seamless infinite scrolling. The changes modify how the component wraps around when scrolling left or right past the initial set of videos, ensuring a smoother transition. Additionally, the initial positioning of the carousel has been reset to the beginning of the first set of videos (0 position), improving the starting experience for users.

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/yexZbDm
---
 client/src/components/netflix-grid.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 24e7999..9f623a4 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -150,12 +150,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       const newX = prev + step;
       const singleSetWidth = category.videos.length * 220; // One complete set
       
-      // Seamless infinite scroll - when in middle copy, wrap smoothly
+      // Seamless infinite scroll with smooth wrapping
       if (direction === 'right' && newX <= -singleSetWidth * 2) {
-        // When moved past second copy, jump back to first copy position
+        // When moved past second copy, wrap to start of first copy
         return newX + singleSetWidth;
-      } else if (direction === 'left' && newX >= 0) {
-        // When moved past first copy, jump back to second copy position
+      } else if (direction === 'left' && newX >= singleSetWidth) {
+        // When moved past first copy left boundary, wrap to second copy
         return newX - singleSetWidth;
       }
       
@@ -233,9 +233,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   // Initialize with first video on the left side  
   useEffect(() => {
     if (category.videos.length > 0) {
-      // Start in middle copy for seamless wrapping
-      const singleSetWidth = category.videos.length * 220;
-      setTranslateX(-singleSetWidth);
+      // Start at the beginning of first copy (0 position)
+      setTranslateX(0);
     }
   }, [category.videos.length]);