diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index aabf204..ec69a34 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -139,27 +139,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { if (scrollRef.current) { const isMobile = window.innerWidth < 768; const containerWidth = scrollRef.current.clientWidth; - const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75; + const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0; // Faster scroll const currentScroll = scrollRef.current.scrollLeft; const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth; - let targetScroll; - - if (direction === 'left') { - if (currentScroll <= 0) { - // If at the beginning, jump to the end (infinite loop) - targetScroll = maxScroll; - } else { - targetScroll = Math.max(0, currentScroll - scrollAmount); - } - } else { - if (currentScroll >= maxScroll - 10) { - // If at the end, jump to the beginning (infinite loop) - targetScroll = 0; - } else { - targetScroll = Math.min(maxScroll, currentScroll + scrollAmount); - } - } + const targetScroll = direction === 'left' + ? Math.max(0, currentScroll - scrollAmount) + : Math.min(maxScroll, currentScroll + scrollAmount); scrollRef.current.scrollTo({ left: targetScroll, @@ -176,19 +162,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { if (scrollRef.current) { const currentScroll = scrollRef.current.scrollLeft; const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth; - const scrollAmount = direction === 'left' ? -2 : 2; + const scrollAmount = direction === 'left' ? -3 : 3; // Faster scroll + // Stop at edges, don't loop if (direction === 'left' && currentScroll <= 0) { - // 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; + stopAutoScroll(); + return; } + if (direction === 'right' && currentScroll >= maxScroll - 5) { + stopAutoScroll(); + return; + } + + scrollRef.current.scrollLeft += scrollAmount; } - }, 12); // Smooth 60fps animation + }, 10); // Faster animation }; const stopAutoScroll = () => {