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

Refactor `CategoryRow` to use `setInterval` for smoother auto-scrolling of videos, replacing `requestAnimationFrame`. Adjusts scroll speed and interval for better 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 | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index de681a6..ca7de78 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -133,7 +133,7 @@ interface CategoryRowProps {
 
 function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollIntervalRef = useRef<number | null>(null);
+  const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
   
@@ -148,18 +148,17 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   };
 
   const startAutoScroll = (direction: 'left' | 'right') => {
-    // Clear any existing animation
+    // Clear any existing interval
     if (scrollIntervalRef.current) {
-      cancelAnimationFrame(scrollIntervalRef.current);
+      clearInterval(scrollIntervalRef.current);
     }
     
     setIsScrolling(true);
     
-    // Continuous smooth flow - videos flow like a stream
-    const speed = direction === 'right' ? -2 : 2; // Pixels per frame
-    
-    const animate = () => {
+    // Start continuous smooth scrolling with interval
+    scrollIntervalRef.current = setInterval(() => {
       setTranslateX(prev => {
+        const speed = direction === 'right' ? -3 : 3; // Pixels per step
         const newX = prev + speed;
         const totalWidth = category.videos.length * videoWidth;
         
@@ -172,13 +171,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         
         return newX;
       });
-      
-      if (isScrolling) {
-        scrollIntervalRef.current = requestAnimationFrame(animate);
-      }
-    };
-    
-    animate();
+    }, 30); // Update every 30ms for smooth flow
   };
 
   // Initialize in middle section for infinite scroll
@@ -197,7 +190,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const stopAutoScroll = () => {
     setIsScrolling(false);
     if (scrollIntervalRef.current) {
-      cancelAnimationFrame(scrollIntervalRef.current);
+      clearInterval(scrollIntervalRef.current);
       scrollIntervalRef.current = null;
     }
   };