diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 600418c..83025c8 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -151,8 +151,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { }; const startAutoScroll = (direction: 'left' | 'right') => { - // Just do single scroll on hover start - scroll(direction); + // Clear any existing interval + if (scrollIntervalRef.current) { + clearInterval(scrollIntervalRef.current); + } + + // Start continuous scrolling + scrollIntervalRef.current = setInterval(() => { + scroll(direction); + }, 800); // Auto scroll every 800ms }; // Initialize in middle section for true infinite scroll @@ -203,9 +210,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { }} onMouseEnter={(e) => { e.stopPropagation(); + startAutoScroll('left'); }} onMouseLeave={(e) => { e.stopPropagation(); + stopAutoScroll(); }} className="flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100" data-testid="button-scroll-left" @@ -222,9 +231,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { }} onMouseEnter={(e) => { e.stopPropagation(); + startAutoScroll('right'); }} onMouseLeave={(e) => { e.stopPropagation(); + stopAutoScroll(); }} className="flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100" data-testid="button-scroll-right"