From bb57672a6f8b015efa33e9e998cfa10ef71b85b9 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 14:53:28 +0000
Subject: [PATCH] Improve video carousel navigation and display logic

Refactor the `CategoryRow` component to implement a new carousel logic using `useState` for `currentIndex` and `videosToShow`. The infinite scrolling behavior has been replaced with a fixed number of visible videos that cycle through the category's videos. The `getVisibleVideos` function now calculates and returns the subset of videos to display based on the `currentIndex` and `videosToShow`. The `scroll` function is updated to handle index manipulation for navigation. The `useEffect` hook is simplified to ensure both navigation buttons are always visible.

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 | 111 ++++++++++---------------
 1 file changed, 44 insertions(+), 67 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 2472570..27c2ad3 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -137,20 +137,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
   
-  // Create infinite carousel by duplicating videos
-  const infiniteVideos = [...category.videos, ...category.videos, ...category.videos];
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const videosToShow = 5; // Show 5 videos at a time
 
   const scroll = (direction: 'left' | 'right') => {
-    if (!scrollRef.current) return;
-    
-    const container = scrollRef.current;
-    const videoWidth = 224; // approx width of one video card + spacing
-    const scrollAmount = videoWidth * 2; // Show 2 videos at a time
+    const totalVideos = category.videos.length;
     
     if (direction === 'left') {
-      container.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+      setCurrentIndex(prev => prev === 0 ? totalVideos - 1 : prev - 1);
     } else {
-      container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+      setCurrentIndex(prev => prev === totalVideos - 1 ? 0 : prev + 1);
     }
   };
 
@@ -159,38 +155,26 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     scroll(direction);
   };
 
-  const checkScrollPosition = () => {
-    if (!scrollRef.current) return;
+  // Get visible videos based on current index
+  const getVisibleVideos = () => {
+    const totalVideos = category.videos.length;
+    const visible = [];
     
-    const container = scrollRef.current;
-    const currentScroll = container.scrollLeft;
-    const maxScroll = container.scrollWidth - container.clientWidth;
-    const sectionWidth = (container.scrollWidth / 3); // One third (original videos)
-    
-    // Reset to middle section when approaching edges for infinite effect
-    if (currentScroll <= 100) {
-      // Jump to end of first section (start of second section)
-      container.scrollLeft = sectionWidth + currentScroll;
-    } else if (currentScroll >= maxScroll - 100) {
-      // Jump to start of second section
-      container.scrollLeft = sectionWidth + (currentScroll - 2 * sectionWidth);
+    for (let i = 0; i < videosToShow; i++) {
+      const index = (currentIndex + i) % totalVideos;
+      visible.push({
+        ...category.videos[index],
+        displayIndex: i
+      });
     }
-    
-    // Always show both buttons
-    setShowLeftButton(true);
-    setShowRightButton(true);
+    return visible;
   };
 
-  // Initialize position to middle section on mount
+  // Always show both buttons
   useEffect(() => {
-    if (scrollRef.current && category.videos.length > 0) {
-      const container = scrollRef.current;
-      const sectionWidth = container.scrollWidth / 3;
-      container.scrollLeft = sectionWidth; // Start in middle section
-      setShowLeftButton(true);
-      setShowRightButton(true);
-    }
-  }, [category.videos]);
+    setShowLeftButton(true);
+    setShowRightButton(true);
+  }, []);
 
   const stopAutoScroll = () => {
     if (scrollIntervalRef.current) {
@@ -284,37 +268,30 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           <ChevronRight className="w-5 h-5 text-white" />
         </button>
 
-        {/* Scrollable video row - edge to edge */}
-        <div
-          ref={scrollRef}
-          className="flex space-x-2 md:space-x-3 overflow-x-auto scrollbar-hide pb-4 scroll-smooth px-4 md:px-0"
-          onScroll={checkScrollPosition}
-          style={{ 
-            scrollbarWidth: 'none', 
-            msOverflowStyle: 'none',
-            scrollBehavior: 'smooth',
-            WebkitOverflowScrolling: 'touch'
-          }}
-        >
-          {infiniteVideos.map((video, index) => (
-            <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") && index < 10 && (
-                <div className="absolute top-1 left-1 z-20 text-white font-black text-3xl md:text-5xl drop-shadow-2xl"
-                     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)' 
-                     }}>
-                  {index + 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>
-          ))}
+        {/* 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;
+            return (
+              <div key={`${video.id}-${currentIndex}-${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"
+                       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)' 
+                       }}>
+                    {actualIndex + 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>