diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 8906297..5cf1cf3 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -134,7 +134,6 @@ interface CategoryRowProps { function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const scrollRef = useRef(null); const scrollIntervalRef = useRef(null); - const [isFastScrolling, setIsFastScrolling] = useState(false); const scroll = (direction: 'left' | 'right') => { if (scrollRef.current) { @@ -147,20 +146,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { let targetScroll; if (direction === 'left') { - if (currentScroll <= scrollAmount) { - // Jump to end for infinite loop - instant - scrollRef.current.scrollLeft = maxScroll; - return; - } else { - targetScroll = currentScroll - scrollAmount; + targetScroll = currentScroll - scrollAmount; + if (targetScroll <= 0) { + // Jump to end for infinite loop + targetScroll = maxScroll; } } else { - if (currentScroll >= maxScroll - scrollAmount) { - // Jump to beginning for infinite loop - instant - scrollRef.current.scrollLeft = 0; - return; - } else { - targetScroll = currentScroll + scrollAmount; + targetScroll = currentScroll + scrollAmount; + if (targetScroll >= maxScroll) { + // Jump to beginning for infinite loop + targetScroll = 0; } } @@ -175,13 +170,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { if (scrollIntervalRef.current) { clearInterval(scrollIntervalRef.current); } + + // Force fast scrolling when hovering + const isHovering = true; + scrollIntervalRef.current = setInterval(() => { if (scrollRef.current) { const currentScroll = scrollRef.current.scrollLeft; const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth; - const scrollAmount = direction === 'left' ? - (isFastScrolling ? -8 : -3) : - (isFastScrolling ? 8 : 3); + const scrollAmount = direction === 'left' ? -10 : 10; // Much faster scroll let newScroll = currentScroll + scrollAmount; @@ -195,7 +192,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { scrollRef.current.scrollLeft = newScroll; } - }, isFastScrolling ? 5 : 12); // Variable speed + }, 8); // Fast interval }; const stopAutoScroll = () => { @@ -214,14 +211,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Left scroll area with transparent background - only on desktop */}
{ - setIsFastScrolling(true); - startAutoScroll('left'); - }} - onMouseLeave={() => { - setIsFastScrolling(false); - stopAutoScroll(); - }} + onMouseEnter={() => startAutoScroll('left')} + onMouseLeave={stopAutoScroll} onClick={() => scroll('left')} className="hidden md:block absolute left-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer" > @@ -232,14 +223,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { {/* Right scroll area with transparent background - only on desktop */}
{ - setIsFastScrolling(true); - startAutoScroll('right'); - }} - onMouseLeave={() => { - setIsFastScrolling(false); - stopAutoScroll(); - }} + onMouseEnter={() => startAutoScroll('right')} + onMouseLeave={stopAutoScroll} onClick={() => scroll('right')} className="hidden md:block absolute right-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer" >