From 34effd491bac5dcdbc646167f726f84bf2d1c134 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 14:49:21 +0000
Subject: [PATCH] Create an infinite scrolling carousel for video categories

Implement infinite scrolling logic in the `CategoryRow` component of the Netflix grid. This change modifies the scroll behavior to loop back to the beginning when reaching the end, and vice-versa, creating a continuous carousel effect. The navigation buttons are now always visible to facilitate this continuous scrolling. The CSS classes for the navigation buttons have also been updated to ensure their visibility and hover effects work correctly with the new infinite scroll functionality.

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

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 8dcda35..00e4445 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -149,9 +149,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     let targetScroll;
     
     if (direction === 'left') {
-      targetScroll = Math.max(0, currentScroll - scrollAmount);
+      if (currentScroll <= 10) {
+        // Jump to end for infinite loop
+        targetScroll = maxScroll;
+      } else {
+        targetScroll = currentScroll - scrollAmount;
+      }
     } else {
-      targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
+      if (currentScroll >= maxScroll - 10) {
+        // Jump to beginning for infinite loop
+        targetScroll = 0;
+      } else {
+        targetScroll = currentScroll + scrollAmount;
+      }
     }
     
     container.scrollTo({ 
@@ -166,14 +176,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   };
 
   const checkScrollPosition = () => {
-    if (!scrollRef.current) return;
-    
-    const container = scrollRef.current;
-    const currentScroll = container.scrollLeft;
-    const maxScroll = container.scrollWidth - container.clientWidth;
-    
-    setShowLeftButton(currentScroll > 10); // Show left if not at start
-    setShowRightButton(currentScroll < maxScroll - 10); // Show right if not at end
+    // Always show both buttons for infinite carousel
+    setShowLeftButton(true);
+    setShowRightButton(true);
   };
 
   // Check scroll position on mount and when videos change
@@ -208,7 +213,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           onMouseLeave={(e) => {
             e.stopPropagation();
           }}
-          className={`${showLeftButton ? 'opacity-0 group-hover:opacity-100 hover:!opacity-100' : 'hidden'} flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
+          className="flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100"
           data-testid="button-scroll-left"
         >
           <ChevronLeft className="w-6 h-6 text-white" />
@@ -227,7 +232,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           onMouseLeave={(e) => {
             e.stopPropagation();
           }}
-          className={`${showRightButton ? 'opacity-0 group-hover:opacity-100 hover:!opacity-100' : 'hidden'} flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
+          className="flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100"
           data-testid="button-scroll-right"
         >
           <ChevronRight className="w-6 h-6 text-white" />