diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 5b07475..33c0665 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -149,9 +149,36 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { setTranslateX(prev => prev + step); }; - const toggleSpeed = () => { - // Toggle speed mode without moving - setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal'); + const toggleSpeed = (direction: 'left' | 'right') => { + // Toggle speed mode and restart animation with new speed + const newSpeed = speedMode === 'normal' ? 'fast' : 'normal'; + setSpeedMode(newSpeed); + + // Restart the animation with new speed + if (isScrolling && scrollIntervalRef.current) { + clearInterval(scrollIntervalRef.current); + + // Start new interval with updated speed immediately + const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8; + const interval = newSpeed === 'fast' ? 8 : 12; + + scrollIntervalRef.current = setInterval(() => { + setTranslateX(prev => { + const speed = direction === 'right' ? -baseSpeed : baseSpeed; + const newX = prev + speed; + const totalWidth = category.videos.length * videoWidth; + + // Infinite loop - seamless reset + if (direction === 'right' && newX <= -totalWidth * 2) { + return -totalWidth; + } else if (direction === 'left' && newX >= 0) { + return -totalWidth; + } + + return newX; + }); + }, interval); + } }; const startAutoScroll = (direction: 'left' | 'right') => { @@ -219,7 +246,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { e.stopPropagation(); // If already scrolling, just toggle speed, otherwise do single scroll if (isScrolling) { - toggleSpeed(); + toggleSpeed('left'); } else { scroll('left'); } @@ -245,7 +272,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { e.stopPropagation(); // If already scrolling, just toggle speed, otherwise do single scroll if (isScrolling) { - toggleSpeed(); + toggleSpeed('right'); } else { scroll('right'); }