From 8af8f06fe2e5c8aa4a78d690ab3331239f28df02 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 10:56:11 +0000
Subject: [PATCH] Enable looping functionality for video carousels to enhance
 user experience

Update client/src/components/netflix-grid.tsx to implement infinite scrolling for category rows. When scrolling left and reaching the beginning, the view now jumps to the end, and when scrolling right and reaching the end, it jumps to the beginning, creating a seamless looping effect.

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

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index ec69a34..32ce139 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -143,9 +143,23 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       const currentScroll = scrollRef.current.scrollLeft;
       const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
       
-      const targetScroll = direction === 'left' 
-        ? Math.max(0, currentScroll - scrollAmount)
-        : Math.min(maxScroll, currentScroll + scrollAmount);
+      let targetScroll;
+      
+      if (direction === 'left') {
+        if (currentScroll <= 0) {
+          // Jump to end for infinite loop
+          targetScroll = maxScroll;
+        } else {
+          targetScroll = Math.max(0, currentScroll - scrollAmount);
+        }
+      } else {
+        if (currentScroll >= maxScroll - 10) {
+          // Jump to beginning for infinite loop  
+          targetScroll = 0;
+        } else {
+          targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
+        }
+      }
         
       scrollRef.current.scrollTo({
         left: targetScroll,
@@ -164,17 +178,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
         const scrollAmount = direction === 'left' ? -3 : 3; // Faster scroll
         
-        // Stop at edges, don't loop
         if (direction === 'left' && currentScroll <= 0) {
-          stopAutoScroll();
-          return;
+          // 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;
         }
-        if (direction === 'right' && currentScroll >= maxScroll - 5) {
-          stopAutoScroll();
-          return;
-        }
-        
-        scrollRef.current.scrollLeft += scrollAmount;
       }
     }, 10); // Faster animation
   };