diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 223dae3..24e7999 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -144,17 +144,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const videoWidth = 120; // Width including spacing const scroll = (direction: 'left' | 'right') => { - // Simple step movement with wrap-around logic + // Smooth movement with seamless wrapping const step = direction === 'right' ? -200 : 200; setTranslateX(prev => { const newX = prev + step; - const maxWidth = category.videos.length * 220; // Approximate video width + const singleSetWidth = category.videos.length * 220; // One complete set - // Wrap around logic for infinite scroll - if (direction === 'right' && newX < -maxWidth) { - return 0; // Reset to start when going too far right - } else if (direction === 'left' && newX > 0) { - return -maxWidth + 800; // Jump to end when going too far left + // Seamless infinite scroll - when in middle copy, wrap smoothly + if (direction === 'right' && newX <= -singleSetWidth * 2) { + // When moved past second copy, jump back to first copy position + return newX + singleSetWidth; + } else if (direction === 'left' && newX >= 0) { + // When moved past first copy, jump back to second copy position + return newX - singleSetWidth; } return newX; @@ -231,8 +233,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Initialize with first video on the left side useEffect(() => { if (category.videos.length > 0) { - // Start with video 1 visible on the left side - setTranslateX(0); + // Start in middle copy for seamless wrapping + const singleSetWidth = category.videos.length * 220; + setTranslateX(-singleSetWidth); } }, [category.videos.length]); @@ -348,32 +351,36 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { willChange: 'transform' }} > - {/* Simple list to test movement */} - {category.videos.map((video, index) => ( -