From fa5014cbf3233d2355f4d29945be78e518534e7d Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 11:04:50 +0000
Subject: [PATCH] Improve carousel scrolling behavior for a smoother user
 experience

Refactor the `CategoryRow` component in `netflix-grid.tsx` to improve the carousel scrolling logic. The changes include implementing instant jumps to the beginning or end of the carousel when reaching the boundaries during scrolling, and simplifying the click handlers for navigation buttons and touch areas to directly call the `scroll` function. This addresses the issue where scrolling functionality was not working correctly.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/mZpi7Z1
---
 client/src/components/netflix-grid.tsx | 44 ++++++++++----------------
 1 file changed, 16 insertions(+), 28 deletions(-)

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"
         >
           <div className="flex items-center justify-center h-full">
@@ -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"
         >
           <div className="flex items-center justify-center h-full">
@@ -257,18 +251,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         {/* Mobile touch areas for left/right navigation */}
         <div 
           className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent" 
-          onClick={() => {
-            setIsFastScrolling(!isFastScrolling);
-            scroll('left');
-          }}
+          onClick={() => scroll('left')}
           style={{ touchAction: 'manipulation' }}
         />
         <div 
           className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent" 
-          onClick={() => {
-            setIsFastScrolling(!isFastScrolling);
-            scroll('right');
-          }}
+          onClick={() => scroll('right')}
           style={{ touchAction: 'manipulation' }}
         />