From 0f55b741e9562f4e4047d4dc7aba9cee78d68873 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:51:12 +0000
Subject: [PATCH] Adjust video scrolling speed for smoother playback

Update scrolling logic in `netflix-grid.tsx` to use refined intervals and base speeds for both normal and fast modes, aiming to resolve reported skipping issues and improve overall animation smoothness.

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

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 6bd474e..64ddb75 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -160,13 +160,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       
       // Start new interval with updated speed immediately
       const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8;
-      const interval = newSpeed === 'fast' ? 8 : 12;
+      const interval = newSpeed === 'fast' ? 10 : 16;
       
       scrollIntervalRef.current = setInterval(() => {
         setTranslateX(prev => {
-          const videosPerStep = 4; // Move 4 videos at once
-          const adjustedSpeed = speedMode === 'fast' ? videosPerStep * videoWidth * 0.03 : videosPerStep * videoWidth * 0.01;
-          const speed = direction === 'right' ? -adjustedSpeed : adjustedSpeed;
+          const speed = direction === 'right' ? -baseSpeed : baseSpeed;
           const newX = prev + speed;
           const totalWidth = category.videos.length * videoWidth;
           
@@ -198,9 +196,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     // Start continuous smooth scrolling with variable speed
     scrollIntervalRef.current = setInterval(() => {
       setTranslateX(prev => {
-        // Speed changes based on mode: move by full videos (4 videos at once)
-        const videosPerStep = 4; // Move 4 videos at once
-        const baseSpeed = speedMode === 'fast' ? videosPerStep * videoWidth * 0.03 : videosPerStep * videoWidth * 0.01;
+        // Speed changes based on mode: normal (0.5px) or fast (1.2px) - smooth video by video
+        const baseSpeed = speedMode === 'fast' ? 1.2 : 0.5;
         const speed = direction === 'right' ? -baseSpeed : baseSpeed;
         const newX = prev + speed;
         const totalWidth = category.videos.length * videoWidth;
@@ -218,7 +215,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         
         return adjustedX;
       });
-    }, speedMode === 'fast' ? 8 : 12); // Faster interval for fast mode
+    }, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation
   };
 
   // Initialize with first video on the left side