diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 84175a1..60df29c 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -134,34 +134,29 @@ 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) { const isMobile = window.innerWidth < 768; const containerWidth = scrollRef.current.clientWidth; - const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0; // Faster scroll + const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0; const currentScroll = scrollRef.current.scrollLeft; const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth; let targetScroll; - console.log('Scroll debug:', { direction, currentScroll, maxScroll, scrollAmount }); - if (direction === 'left') { - if (currentScroll <= 5) { + targetScroll = currentScroll - scrollAmount; + if (targetScroll <= 0) { // Jump to end for infinite loop targetScroll = maxScroll; - console.log('Jumping to end:', targetScroll); - } else { - targetScroll = Math.max(0, currentScroll - scrollAmount); } } else { - if (currentScroll >= maxScroll - 50) { + targetScroll = currentScroll + scrollAmount; + if (targetScroll >= maxScroll) { // Jump to beginning for infinite loop targetScroll = 0; - console.log('Jumping to beginning:', targetScroll); - } else { - targetScroll = Math.min(maxScroll, currentScroll + scrollAmount); } } @@ -180,19 +175,23 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { if (scrollRef.current) { const currentScroll = scrollRef.current.scrollLeft; const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth; - const scrollAmount = direction === 'left' ? -3 : 3; // Faster scroll + const scrollAmount = direction === 'left' ? + (isFastScrolling ? -8 : -3) : + (isFastScrolling ? 8 : 3); - if (direction === 'left' && currentScroll <= 5) { + let newScroll = currentScroll + scrollAmount; + + if (direction === 'left' && newScroll <= 0) { // Jump to end for infinite loop - scrollRef.current.scrollLeft = maxScroll; - } else if (direction === 'right' && currentScroll >= maxScroll - 50) { + newScroll = maxScroll; + } else if (direction === 'right' && newScroll >= maxScroll) { // Jump to beginning for infinite loop - scrollRef.current.scrollLeft = 0; - } else { - scrollRef.current.scrollLeft += scrollAmount; + newScroll = 0; } + + scrollRef.current.scrollLeft = newScroll; } - }, 10); // Faster animation + }, isFastScrolling ? 5 : 12); // Variable speed }; const stopAutoScroll = () => { @@ -213,6 +212,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
startAutoScroll('left')} onMouseLeave={stopAutoScroll} + onClick={() => { + setIsFastScrolling(!isFastScrolling); + 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" >
@@ -224,6 +227,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
startAutoScroll('right')} onMouseLeave={stopAutoScroll} + onClick={() => { + setIsFastScrolling(!isFastScrolling); + 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" >
@@ -234,12 +241,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { {/* Mobile touch areas for left/right navigation */}
scroll('left')} + onClick={() => { + setIsFastScrolling(!isFastScrolling); + scroll('left'); + }} style={{ touchAction: 'manipulation' }} />
scroll('right')} + onClick={() => { + setIsFastScrolling(!isFastScrolling); + scroll('right'); + }} style={{ touchAction: 'manipulation' }} />