Improve video carousel for smoother scrolling and continuous playback

Refactors the `CategoryRow` component to use `requestAnimationFrame` for smooth, continuous auto-scrolling of videos, replacing the previous interval-based approach. This ensures a seamless, non-jumping playback experience with an infinite loop effect.

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

@@ -137,46 +137,57 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
   
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [translateX, setTranslateX] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
   const videosToShow = 5; // Show 5 videos at a time
+  const videoWidth = 120; // Width including spacing
 
   const scroll = (direction: 'left' | 'right') => {
-    if (direction === 'right') {
-      setCurrentIndex(prev => prev + 1);
-    } else {
-      setCurrentIndex(prev => prev - 1);
-    }
+    const step = direction === 'right' ? -videoWidth : videoWidth;
+    setTranslateX(prev => prev + step);
   };
 
   const startAutoScroll = (direction: 'left' | 'right') => {
-    // Clear any existing interval
+    // Clear any existing animation
     if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
+      cancelAnimationFrame(scrollIntervalRef.current);
     }
     
-    // Start continuous scrolling
-    scrollIntervalRef.current = setInterval(() => {
-      scroll(direction);
-    }, 800); // Auto scroll every 800ms
+    setIsAnimating(true);
+    
+    // Continuous smooth animation - no jumping
+    const speed = direction === 'right' ? -1 : 1; // Pixels per frame
+    
+    const animate = () => {
+      setTranslateX(prev => {
+        const newX = prev + speed;
+        const totalWidth = category.videos.length * videoWidth;
+        
+        // Infinite loop - reset seamlessly
+        if (direction === 'right' && newX <= -totalWidth) {
+          return 0; // Reset to start for infinite loop
+        } else if (direction === 'left' && newX >= 0) {
+          return -totalWidth + videoWidth; // Reset for reverse
+        }
+        
+        return newX;
+      });
+      
+      if (isAnimating) {
+        scrollIntervalRef.current = requestAnimationFrame(animate);
+      }
+    };
+    
+    animate();
   };
 
   // Always start with video 1 visible at first position
   useEffect(() => {
     if (category.videos.length > 0) {
-      setCurrentIndex(0); // Start with video 1 at first position
+      setTranslateX(0); // Start with video 1 at first position
     }
   }, [category.videos.length]);
 
-  // Handle seamless infinite scroll
-  useEffect(() => {
-    const totalVideos = category.videos.length;
-    if (currentIndex >= totalVideos * 2) {
-      setCurrentIndex(totalVideos);
-    } else if (currentIndex < 0) {
-      setCurrentIndex(totalVideos - 1);
-    }
-  }, [currentIndex, category.videos.length]);
-
   // Always show both buttons
   useEffect(() => {
     setShowLeftButton(true);
@@ -184,8 +195,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   }, []);
 
   const stopAutoScroll = () => {
+    setIsAnimating(false);
     if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
+      cancelAnimationFrame(scrollIntervalRef.current);
       scrollIntervalRef.current = null;
     }
   };
@@ -279,13 +291,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           <ChevronRight className="w-5 h-5 text-white" />
         </button>
 
-        {/* Working carousel with smooth transitions */}
+        {/* Continuously flowing carousel */}
         <div className="overflow-hidden">
           <div 
-            className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"
+            className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0"
             style={{
-              transform: `translateX(-${currentIndex * (112 + 8)}px)`,
-              willChange: 'transform'
+              transform: `translateX(${translateX}px)`,
+              willChange: 'transform',
+              transition: isAnimating ? 'none' : 'transform 0.3s ease'
             }}
           >
             {/* Create infinite loop by tripling the videos */}