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