From 887c15f11116f18fd0b4cdddf8a4470fbc945244 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 11:03:23 +0000
Subject: [PATCH] Improve video row scrolling functionality for faster
 navigation

Add fast scrolling capability to video category rows and implement infinite looping for seamless horizontal navigation.

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 | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 60df29c..1382316 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -151,12 +151,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         if (targetScroll <= 0) {
           // Jump to end for infinite loop
           targetScroll = maxScroll;
+          console.log('Kroženje LEVO: skok na konec', { currentScroll, maxScroll, targetScroll });
         }
       } 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 });
         }
       }
         
@@ -184,9 +186,11 @@ 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;
@@ -210,8 +214,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       <div className="relative">
         {/* Left scroll area with transparent background - only on desktop */}
         <div
-          onMouseEnter={() => startAutoScroll('left')}
-          onMouseLeave={stopAutoScroll}
+          onMouseEnter={() => {
+            setIsFastScrolling(true);
+            startAutoScroll('left');
+          }}
+          onMouseLeave={() => {
+            setIsFastScrolling(false);
+            stopAutoScroll();
+          }}
           onClick={() => {
             setIsFastScrolling(!isFastScrolling);
             scroll('left');
@@ -225,8 +235,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
         {/* Right scroll area with transparent background - only on desktop */}
         <div
-          onMouseEnter={() => startAutoScroll('right')}
-          onMouseLeave={stopAutoScroll}
+          onMouseEnter={() => {
+            setIsFastScrolling(true);
+            startAutoScroll('right');
+          }}
+          onMouseLeave={() => {
+            setIsFastScrolling(false);
+            stopAutoScroll();
+          }}
           onClick={() => {
             setIsFastScrolling(!isFastScrolling);
             scroll('right');