From 84c2c98df550736255d3d98d6a69ad82a165ab80 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:44:28 +0000
Subject: [PATCH] Improve video scrolling speed control and responsiveness

Update the video grid component to allow toggling between normal and fast scrolling speeds, with immediate animation restarts and seamless looping for an enhanced user experience.

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

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 5b07475..33c0665 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -149,9 +149,36 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     setTranslateX(prev => prev + step);
   };
 
-  const toggleSpeed = () => {
-    // Toggle speed mode without moving
-    setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal');
+  const toggleSpeed = (direction: 'left' | 'right') => {
+    // Toggle speed mode and restart animation with new speed
+    const newSpeed = speedMode === 'normal' ? 'fast' : 'normal';
+    setSpeedMode(newSpeed);
+    
+    // Restart the animation with new speed
+    if (isScrolling && scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      
+      // Start new interval with updated speed immediately
+      const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8;
+      const interval = newSpeed === 'fast' ? 8 : 12;
+      
+      scrollIntervalRef.current = setInterval(() => {
+        setTranslateX(prev => {
+          const speed = direction === 'right' ? -baseSpeed : baseSpeed;
+          const newX = prev + speed;
+          const totalWidth = category.videos.length * videoWidth;
+          
+          // Infinite loop - seamless reset
+          if (direction === 'right' && newX <= -totalWidth * 2) {
+            return -totalWidth;
+          } else if (direction === 'left' && newX >= 0) {
+            return -totalWidth;
+          }
+          
+          return newX;
+        });
+      }, interval);
+    }
   };
 
   const startAutoScroll = (direction: 'left' | 'right') => {
@@ -219,7 +246,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             e.stopPropagation();
             // If already scrolling, just toggle speed, otherwise do single scroll
             if (isScrolling) {
-              toggleSpeed();
+              toggleSpeed('left');
             } else {
               scroll('left');
             }
@@ -245,7 +272,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             e.stopPropagation();
             // If already scrolling, just toggle speed, otherwise do single scroll
             if (isScrolling) {
-              toggleSpeed();
+              toggleSpeed('right');
             } else {
               scroll('right');
             }