diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 1382316..8906297 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -147,18 +147,20 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { let targetScroll; if (direction === 'left') { - targetScroll = currentScroll - scrollAmount; - if (targetScroll <= 0) { - // Jump to end for infinite loop - targetScroll = maxScroll; - console.log('Kroženje LEVO: skok na konec', { currentScroll, maxScroll, targetScroll }); + if (currentScroll <= scrollAmount) { + // Jump to end for infinite loop - instant + scrollRef.current.scrollLeft = maxScroll; + return; + } else { + targetScroll = currentScroll - scrollAmount; } } else { - targetScroll = currentScroll + scrollAmount; - if (targetScroll >= maxScroll) { - // Jump to beginning for infinite loop - targetScroll = 0; - console.log('Kroženje DESNO: skok na začetek', { currentScroll, maxScroll, targetScroll }); + if (currentScroll >= maxScroll - scrollAmount) { + // Jump to beginning for infinite loop - instant + scrollRef.current.scrollLeft = 0; + return; + } else { + targetScroll = currentScroll + scrollAmount; } } @@ -186,11 +188,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { if (direction === 'left' && newScroll <= 0) { // Jump to end for infinite loop newScroll = maxScroll; - console.log('Auto-scroll LEVO: skok na konec', { currentScroll, maxScroll, newScroll }); } else if (direction === 'right' && newScroll >= maxScroll) { // Jump to beginning for infinite loop newScroll = 0; - console.log('Auto-scroll DESNO: skok na začetek', { currentScroll, maxScroll, newScroll }); } scrollRef.current.scrollLeft = newScroll; @@ -222,10 +222,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { setIsFastScrolling(false); stopAutoScroll(); }} - onClick={() => { - setIsFastScrolling(!isFastScrolling); - scroll('left'); - }} + 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" >
@@ -243,10 +240,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { setIsFastScrolling(false); stopAutoScroll(); }} - onClick={() => { - setIsFastScrolling(!isFastScrolling); - scroll('right'); - }} + 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" >
@@ -257,18 +251,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { {/* Mobile touch areas for left/right navigation */}
{ - setIsFastScrolling(!isFastScrolling); - scroll('left'); - }} + onClick={() => scroll('left')} style={{ touchAction: 'manipulation' }} />
{ - setIsFastScrolling(!isFastScrolling); - scroll('right'); - }} + onClick={() => scroll('right')} style={{ touchAction: 'manipulation' }} />