diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index eda86e8..1ca3000 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -226,15 +226,20 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { onClick={(e) => { e.preventDefault(); e.stopPropagation(); - scroll('left'); + // If already scrolling, toggle speed, otherwise start scrolling + if (isScrolling) { + toggleSpeed('left'); + } else { + startAutoScroll('left'); + } }} onMouseEnter={(e) => { e.stopPropagation(); - // startAutoScroll('left'); + startAutoScroll('left'); }} onMouseLeave={(e) => { e.stopPropagation(); - // stopAutoScroll(); + 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-80 hover:!opacity-100" data-testid="button-scroll-left" @@ -247,15 +252,20 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { onClick={(e) => { e.preventDefault(); e.stopPropagation(); - scroll('right'); + // If already scrolling, toggle speed, otherwise start scrolling + if (isScrolling) { + toggleSpeed('right'); + } else { + startAutoScroll('right'); + } }} onMouseEnter={(e) => { e.stopPropagation(); - // startAutoScroll('right'); + startAutoScroll('right'); }} onMouseLeave={(e) => { e.stopPropagation(); - // stopAutoScroll(); + 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-80 hover:!opacity-100" data-testid="button-scroll-right"