diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx index 690f6b1..a3a5bab 100644 --- a/client/src/components/simple-carousel.tsx +++ b/client/src/components/simple-carousel.tsx @@ -15,15 +15,34 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse const scrollContainerRef = useRef(null); const scrollIntervalRef = useRef(null); const [isScrolling, setIsScrolling] = useState(false); + const [currentDirection, setCurrentDirection] = useState<'left' | 'right' | null>(null); + const [speed, setSpeed] = useState<'normal' | 'fast'>('normal'); const scroll = (direction: 'left' | 'right') => { - if (!scrollContainerRef.current) return; - - const scrollAmount = direction === 'right' ? 300 : -300; - scrollContainerRef.current.scrollBy({ - left: scrollAmount, - behavior: 'smooth' - }); + // If already scrolling in same direction, toggle speed + if (isScrolling && currentDirection === direction) { + const newSpeed = speed === 'normal' ? 'fast' : 'normal'; + setSpeed(newSpeed); + + // Restart with new speed + if (scrollIntervalRef.current) { + clearInterval(scrollIntervalRef.current); + } + + scrollIntervalRef.current = setInterval(() => { + if (!scrollContainerRef.current) return; + + const currentSpeed = newSpeed === 'fast' ? 8 : 3; + const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed; + scrollContainerRef.current.scrollBy({ + left: scrollAmount, + behavior: 'auto' + }); + }, 16); + } else { + // If not scrolling or different direction, start scrolling + startAutoScroll(direction); + } }; const startAutoScroll = (direction: 'left' | 'right') => { @@ -32,12 +51,14 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse } setIsScrolling(true); + setCurrentDirection(direction); + setSpeed('normal'); // Reset to normal speed when starting scrollIntervalRef.current = setInterval(() => { if (!scrollContainerRef.current) return; - const speed = 3; - const scrollAmount = direction === 'right' ? speed : -speed; + const currentSpeed = speed === 'fast' ? 8 : 3; + const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed; scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: 'auto' @@ -51,6 +72,8 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse scrollIntervalRef.current = null; } setIsScrolling(false); + setCurrentDirection(null); + setSpeed('normal'); }; // Initialize scroll position in the middle so we can scroll both ways