From a069bca552f6adedd93a864dc24ab4c926aa1bee Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:55:32 +0000
Subject: [PATCH] Improve scrolling behavior in video category rows with
 wrap-around

Update the `CategoryRow` component to implement wrap-around scrolling logic for video navigation. This change modifies the `scroll` function to handle transitions when reaching the beginning or end of the video list, ensuring a smoother user experience by preventing abrupt stops and allowing continuous scrolling. The `willChange: 'transform'` CSS property is also added for performance optimization during scrolling animations.

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 | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 037c5f4..223dae3 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -144,9 +144,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const videoWidth = 120; // Width including spacing
 
   const scroll = (direction: 'left' | 'right') => {
-    // Simple step movement
+    // Simple step movement with wrap-around logic
     const step = direction === 'right' ? -200 : 200;
-    setTranslateX(prev => prev + step);
+    setTranslateX(prev => {
+      const newX = prev + step;
+      const maxWidth = category.videos.length * 220; // Approximate video width
+      
+      // Wrap around logic for infinite scroll
+      if (direction === 'right' && newX < -maxWidth) {
+        return 0; // Reset to start when going too far right
+      } else if (direction === 'left' && newX > 0) {
+        return -maxWidth + 800; // Jump to end when going too far left  
+      }
+      
+      return newX;
+    });
   };
 
   const toggleSpeed = (direction: 'left' | 'right') => {
@@ -333,7 +345,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             className="flex space-x-4 pb-4"
             style={{
               transform: `translateX(${translateX}px)`,
-              transition: 'transform 0.3s ease'
+              willChange: 'transform'
             }}
           >
             {/* Simple list to test movement */}