From 26bd63a2f43d0708f381d05e52fb99f33e280df0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 10:53:37 +0000
Subject: [PATCH] Enable infinite scrolling for video categories in the grid
 view

Modify the `CategoryRow` component in `netflix-grid.tsx` to implement infinite scrolling for video categories. Adjust the scroll logic to loop back to the beginning or end when the boundary is reached, providing a seamless carousel experience. Also, update the auto-scroll interval for smoother animations.

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/P3O2FU7
---
 client/src/components/netflix-grid.tsx | 41 +++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index baeac8e..aabf204 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -137,15 +137,29 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Responsive scroll amount - extra small cards for Netflix style
       const isMobile = window.innerWidth < 768;
       const containerWidth = scrollRef.current.clientWidth;
-      // More responsive scroll amounts for better mobile experience
       const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75;
       const currentScroll = scrollRef.current.scrollLeft;
-      const targetScroll = direction === 'left' 
-        ? Math.max(0, currentScroll - scrollAmount)
-        : currentScroll + scrollAmount;
+      const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
+      
+      let targetScroll;
+      
+      if (direction === 'left') {
+        if (currentScroll <= 0) {
+          // If at the beginning, jump to the end (infinite loop)
+          targetScroll = maxScroll;
+        } else {
+          targetScroll = Math.max(0, currentScroll - scrollAmount);
+        }
+      } else {
+        if (currentScroll >= maxScroll - 10) {
+          // If at the end, jump to the beginning (infinite loop)  
+          targetScroll = 0;
+        } else {
+          targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
+        }
+      }
         
       scrollRef.current.scrollTo({
         left: targetScroll,
@@ -160,10 +174,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     }
     scrollIntervalRef.current = setInterval(() => {
       if (scrollRef.current) {
-        const scrollAmount = direction === 'left' ? -1.5 : 1.5;
-        scrollRef.current.scrollLeft += scrollAmount;
+        const currentScroll = scrollRef.current.scrollLeft;
+        const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
+        const scrollAmount = direction === 'left' ? -2 : 2;
+        
+        if (direction === 'left' && currentScroll <= 0) {
+          // Jump to end for infinite loop
+          scrollRef.current.scrollLeft = maxScroll;
+        } else if (direction === 'right' && currentScroll >= maxScroll - 5) {
+          // Jump to beginning for infinite loop
+          scrollRef.current.scrollLeft = 0;
+        } else {
+          scrollRef.current.scrollLeft += scrollAmount;
+        }
       }
-    }, 8); // ~120fps for smoother animation
+    }, 12); // Smooth 60fps animation
   };
 
   const stopAutoScroll = () => {