From 6fd79c9f27f8227b3b560a2857e33ba3133b0e50 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:01:59 +0000
Subject: [PATCH] Improve video carousel to loop seamlessly and display numbers

Adjust the video carousel to implement a circular scrolling behavior, allowing users to navigate through videos in a continuous loop. Additionally, the change ensures that the "Top 10" category displays the correct ranking numbers for each video.

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 | 89 ++++++++++----------------
 1 file changed, 35 insertions(+), 54 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 0249ae6..d54f443 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -141,13 +141,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const videosToShow = 5; // Show 5 videos at a time
 
   const scroll = (direction: 'left' | 'right') => {
+    const totalVideos = category.videos.length;
+    
     if (direction === 'right') {
-      // Always move forward through the infinite sequence
-      setCurrentIndex(prev => prev + 1);
+      // Move to next video in circle: 1→2→3...→10→1
+      setCurrentIndex(prev => (prev + 1) % totalVideos);
     } else {
-      // For left, also move forward but in reverse visual order
-      // This creates the illusion of going backwards while maintaining forward movement
-      setCurrentIndex(prev => prev + 1);
+      // Move to previous video in circle: 1→10→9...→2→1
+      setCurrentIndex(prev => prev === 0 ? totalVideos - 1 : prev - 1);
     }
   };
 
@@ -163,22 +164,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     }, 800); // Auto scroll every 800ms
   };
 
-  // Initialize in middle section for true infinite scroll
+  // Always start with video 1 at first position
   useEffect(() => {
-    if (category.videos.length > 0) {
-      setCurrentIndex(category.videos.length); // Start in middle section
-    }
+    setCurrentIndex(0);
   }, [category.videos.length]);
 
-  // Handle seamless infinite scroll - only forward movement
-  useEffect(() => {
-    const totalVideos = category.videos.length;
-    if (currentIndex >= totalVideos * 2) {
-      // Seamlessly reset to beginning of sequence for true infinite loop
-      setCurrentIndex(currentIndex - totalVideos);
-    }
-  }, [currentIndex, category.videos.length]);
-
   // Always show both buttons
   useEffect(() => {
     setShowLeftButton(true);
@@ -281,42 +271,33 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           <ChevronRight className="w-5 h-5 text-white" />
         </button>
 
-        {/* Carousel video row - overflow hidden for seamless loop */}
-        <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"
-            style={{
-              transform: `translateX(-${currentIndex * (112 + 8)}px)`, // Mobile: 112px + 8px spacing
-              willChange: 'transform'
-            }}
-          >
-            {/* Triple the videos for seamless infinite scroll */}
-            {Array.from({ length: category.videos.length * 3 }, (_, index) => {
-              const videoIndex = index % category.videos.length;
-              const video = category.videos[videoIndex];
-              return (
-                <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-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
-                         style={{ 
-                           textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
-                           WebkitTextStroke: '2px rgba(0,0,0,0.8)',
-                           transform: 'none',
-                           transition: 'none'
-                         }}>
-                      {videoIndex + 1}
-                    </div>
-                  )}
-                  <VideoCard
-                    video={video}
-                    onClick={onVideoClick}
-                    className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden"
-                  />
-                </div>
-              );
-            })}
-          </div>
+        {/* Simple carousel that shows current videos */}
+        <div className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0">
+          {Array.from({ length: videosToShow }, (_, index) => {
+            const videoIndex = (currentIndex + index) % category.videos.length;
+            const video = category.videos[videoIndex];
+            return (
+              <div key={`${videoIndex}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group transition-all duration-300">
+                {/* Top 10 Number overlay for first category */}
+                {category.title.includes("Top 10") && (
+                  <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
+                       style={{ 
+                         textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                         WebkitTextStroke: '2px rgba(0,0,0,0.8)',
+                         transform: 'none',
+                         transition: 'none'
+                       }}>
+                    {videoIndex + 1}
+                  </div>
+                )}
+                <VideoCard
+                  video={video}
+                  onClick={onVideoClick}
+                  className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden"
+                />
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>