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 };