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 (
<>
- {categories.map((category, categoryIndex) => {
- console.log(`Rendering category ${categoryIndex}: ${category.title} with ${category.videos.length} videos`);
- return (
-
- );
- })}
+ {categories.map((category, categoryIndex) => (
+
+ ))}
= 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