From cf560a4003b1136c68cd5cd797b57522c4ac9a2b Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 14:56:19 +0000
Subject: [PATCH] Improve video carousel behavior for a smoother viewing
 experience

Refactors the `CategoryRow` component in `netflix-grid.tsx` to implement infinite scrolling for the video carousel. This includes replacing the `getVisibleVideos` function with a `useEffect` hook to handle resetting the `currentIndex` when it exceeds the total number of videos, and updating the JSX to render a duplicated array of videos with a dynamic `translateX` transform for seamless looping.

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 | 33 +++++++++++++-------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index bda81db..bda5228 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -157,20 +157,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     scroll(direction);
   };
 
-  // Get visible videos based on current index
-  const getVisibleVideos = () => {
+  // Handle infinite scroll reset
+  useEffect(() => {
     const totalVideos = category.videos.length;
-    const visible = [];
-    
-    for (let i = 0; i < videosToShow; i++) {
-      const index = (currentIndex + i) % totalVideos;
-      visible.push({
-        ...category.videos[index],
-        displayIndex: i
-      });
+    if (currentIndex >= totalVideos) {
+      // Reset to beginning for infinite loop
+      setTimeout(() => {
+        setCurrentIndex(0);
+      }, 500); // After animation completes
     }
-    return visible;
-  };
+  }, [currentIndex, category.videos.length]);
 
   // Always show both buttons
   useEffect(() => {
@@ -271,11 +267,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         </button>
 
         {/* Carousel video row */}
-        <div className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out">
-          {getVisibleVideos().map((video, index) => {
-            const actualIndex = (currentIndex + index) % category.videos.length;
+        <div 
+          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(-${currentIndex * (224 + 12)}px)` // 224px video width + 12px spacing
+          }}
+        >
+          {[...category.videos, ...category.videos].map((video, index) => {
+            const actualIndex = index % category.videos.length;
             return (
-              <div key={`${video.id}-${currentIndex}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group">
+              <div key={`${video.id}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group">
                 {/* Top 10 Number overlay for first category */}
                 {category.title.includes("Top 10") && (
                   <div className="absolute top-1 left-1 z-20 text-white font-black text-3xl md:text-5xl drop-shadow-2xl"