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

Adjusted the logic for wrapping around video categories in the carousel to prevent jarring jumps and ensure a more fluid user experience. The carousel now initializes in a centered position to facilitate seamless looping.

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 | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 9f623a4..194ae7c 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -154,8 +154,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       if (direction === 'right' && newX <= -singleSetWidth * 2) {
         // When moved past second copy, wrap to start of first copy
         return newX + singleSetWidth;
-      } else if (direction === 'left' && newX >= singleSetWidth) {
-        // When moved past first copy left boundary, wrap to second copy
+      } else if (direction === 'left' && newX > 0) {
+        // When moving left past start, wrap to end of second copy
         return newX - singleSetWidth;
       }
       
@@ -233,8 +233,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   // Initialize with first video on the left side  
   useEffect(() => {
     if (category.videos.length > 0) {
-      // Start at the beginning of first copy (0 position)
-      setTranslateX(0);
+      // Start positioned to show middle copy for seamless wrapping
+      const singleSetWidth = category.videos.length * 220;
+      setTranslateX(-singleSetWidth);
     }
   }, [category.videos.length]);