From f2fcea005b713abef7ce22b5bfd09c668c203c65 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:42:07 +0000
Subject: [PATCH] Improve video scrolling behavior by separating navigation and
 speed toggling

Refactors the `CategoryRow` component in `netflix-grid.tsx` to decouple horizontal scrolling from speed toggling. A new `toggleSpeed` function is introduced, and the `scroll` function now only handles single-step movement. Click handlers are updated to call `toggleSpeed` if the row is already scrolling, otherwise they perform a single scroll step.

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/QCN70f2
---
 client/src/components/netflix-grid.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 2a61c20..5b07475 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -144,13 +144,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const videoWidth = 120; // Width including spacing
 
   const scroll = (direction: 'left' | 'right') => {
-    // Toggle speed mode on click
-    setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal');
-    
+    // Only move one step when clicked (no speed change here)
     const step = direction === 'right' ? -videoWidth : videoWidth;
     setTranslateX(prev => prev + step);
   };
 
+  const toggleSpeed = () => {
+    // Toggle speed mode without moving
+    setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal');
+  };
+
   const startAutoScroll = (direction: 'left' | 'right') => {
     // Clear any existing interval
     if (scrollIntervalRef.current) {
@@ -214,7 +217,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            scroll('left');
+            // If already scrolling, just toggle speed, otherwise do single scroll
+            if (isScrolling) {
+              toggleSpeed();
+            } else {
+              scroll('left');
+            }
           }}
           onMouseEnter={(e) => {
             e.stopPropagation();
@@ -235,7 +243,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            scroll('right');
+            // If already scrolling, just toggle speed, otherwise do single scroll
+            if (isScrolling) {
+              toggleSpeed();
+            } else {
+              scroll('right');
+            }
           }}
           onMouseEnter={(e) => {
             e.stopPropagation();