From 685729c258ea6603613a3167c5cdefca0a8803d0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:06:03 +0000
Subject: [PATCH] Improve video carousel functionality with smooth transitions
 and auto-scrolling

Refactors the video carousel component to use `currentIndex` state for smoother transitions and implements `setInterval` for auto-scrolling. Changes `NodeJS.Timeout` to `number` for `scrollIntervalRef`.

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 | 69 +++++++++++---------------
 1 file changed, 28 insertions(+), 41 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 7df2b4d..c57730d 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -133,18 +133,19 @@ interface CategoryRowProps {
 
 function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollIntervalRef = useRef<number | null>(null);
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
   
-  const [translateX, setTranslateX] = useState(0);
-  const [isScrolling, setIsScrolling] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
   const videosToShow = 5; // Show 5 videos at a time
-  const videoWidth = 120; // Width + spacing
 
   const scroll = (direction: 'left' | 'right') => {
-    const speed = direction === 'right' ? videoWidth : -videoWidth;
-    setTranslateX(prev => prev - speed);
+    if (direction === 'right') {
+      setCurrentIndex(prev => prev + 1);
+    } else {
+      setCurrentIndex(prev => prev - 1);
+    }
   };
 
   const startAutoScroll = (direction: 'left' | 'right') => {
@@ -153,41 +154,29 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       clearInterval(scrollIntervalRef.current);
     }
     
-    setIsScrolling(true);
-    
-    // Continuous smooth flowing animation
-    const speed = direction === 'right' ? 2 : -2; // pixels per frame
-    
-    const animate = () => {
-      setTranslateX(prev => {
-        const newValue = prev - speed;
-        const totalWidth = category.videos.length * videoWidth;
-        
-        // Reset position for infinite loop
-        if (direction === 'right' && newValue <= -totalWidth) {
-          return 0;
-        } else if (direction === 'left' && newValue >= 0) {
-          return -totalWidth + videoWidth;
-        }
-        
-        return newValue;
-      });
-      
-      if (isScrolling) {
-        scrollIntervalRef.current = requestAnimationFrame(animate);
-      }
-    };
-    
-    animate();
+    // Start continuous scrolling
+    scrollIntervalRef.current = setInterval(() => {
+      scroll(direction);
+    }, 800); // Auto scroll every 800ms
   };
 
-  // Initialize starting position
+  // Always start with video 1 visible at first position
   useEffect(() => {
     if (category.videos.length > 0) {
-      setTranslateX(-category.videos.length * videoWidth); // Start in middle section
+      setCurrentIndex(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);
@@ -195,9 +184,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   }, []);
 
   const stopAutoScroll = () => {
-    setIsScrolling(false);
     if (scrollIntervalRef.current) {
-      cancelAnimationFrame(scrollIntervalRef.current);
+      clearInterval(scrollIntervalRef.current);
       scrollIntervalRef.current = null;
     }
   };
@@ -291,14 +279,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           <ChevronRight className="w-5 h-5 text-white" />
         </button>
 
-        {/* Continuously flowing carousel - videos flow like water */}
+        {/* Working carousel with smooth transitions */}
         <div className="overflow-hidden">
           <div 
-            className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0"
+            className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"
             style={{
-              transform: `translateX(${translateX}px)`,
-              willChange: 'transform',
-              transition: isScrolling ? 'none' : 'transform 0.3s ease-out'
+              transform: `translateX(-${currentIndex * (112 + 8)}px)`,
+              willChange: 'transform'
             }}
           >
             {/* Create infinite loop by tripling the videos */}