From 67a10a16d4b1be150a3bd70e9272c069a61bcdf1 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:28:41 +0000
Subject: [PATCH] Improve video grid scrolling with seamless infinite loop
 functionality

Implement true infinite scrolling for video categories, allowing seamless wrap-around when navigating left or right.

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/oSbWwS4
---
 client/src/components/netflix-grid.tsx | 43 +++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 88d4687..d45ee18 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -102,24 +102,17 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
   }
 
   const categories = getCategories();
-  
-  // Debug logging
-  console.log('Videos count:', videos.length);
-  console.log('Categories:', categories.map(c => ({ title: c.title, videoCount: c.videos.length })));
 
   return (
     <>
       <div className="space-y-12 relative z-10">
-        {categories.map((category, categoryIndex) => {
-          console.log(`Rendering category ${categoryIndex}: ${category.title} with ${category.videos.length} videos`);
-          return (
-            <CategoryRow
-              key={categoryIndex}
-              category={category}
-              onVideoClick={handleVideoClick}
-            />
-          );
-        })}
+        {categories.map((category, categoryIndex) => (
+          <CategoryRow
+            key={categoryIndex}
+            category={category}
+            onVideoClick={handleVideoClick}
+          />
+        ))}
       </div>
 
       <BunnyVideoModal
@@ -177,8 +170,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           const newX = prev + speed;
           const totalWidth = category.videos.length * videoWidth;
           
-          // Pure continuous flow - NO RESETS AT ALL
-          // Let it move freely, browser will handle infinite scroll
+          // TRUE INFINITE SCROLL - wrap around seamlessly
+          if (direction === 'right' && newX <= -totalWidth) {
+            // When moved one full cycle to the right, wrap back to start
+            return newX + totalWidth;
+          } else if (direction === 'left' && newX >= totalWidth) {
+            // When moved one full cycle to the left, wrap back to end
+            return newX - totalWidth;
+          }
+          
           return newX;
         });
       }, interval);
@@ -202,8 +202,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         const newX = prev + speed;
         const totalWidth = category.videos.length * videoWidth;
         
-        // Pure continuous flow - NO RESETS AT ALL
-        // Let it move freely, browser will handle infinite scroll
+        // TRUE INFINITE SCROLL - wrap around seamlessly
+        if (direction === 'right' && newX <= -totalWidth) {
+          // When moved one full cycle to the right, wrap back to start
+          return newX + totalWidth;
+        } else if (direction === 'left' && newX >= totalWidth) {
+          // When moved one full cycle to the left, wrap back to end
+          return newX - totalWidth;
+        }
+        
         return newX;
       });
     }, 16); // Fixed interval - speed controlled by pixel movement only