From b9a80de31137de229b402d2ac401db0023471690 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 17:21:08 +0000
Subject: [PATCH] Improve carousel scrolling behavior with adjustable speed

Update carousel component to allow users to control scroll speed by clicking navigation arrows. Implements toggling between normal and fast scrolling speeds, restarting the interval with the new speed. Adds state for current direction and speed.

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/yexZbDm
---
 client/src/components/simple-carousel.tsx | 41 ++++++++++++++++++-----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index 690f6b1..a3a5bab 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -15,15 +15,34 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const [isScrolling, setIsScrolling] = useState(false);
+  const [currentDirection, setCurrentDirection] = useState<'left' | 'right' | null>(null);
+  const [speed, setSpeed] = useState<'normal' | 'fast'>('normal');
 
   const scroll = (direction: 'left' | 'right') => {
-    if (!scrollContainerRef.current) return;
-    
-    const scrollAmount = direction === 'right' ? 300 : -300;
-    scrollContainerRef.current.scrollBy({
-      left: scrollAmount,
-      behavior: 'smooth'
-    });
+    // If already scrolling in same direction, toggle speed
+    if (isScrolling && currentDirection === direction) {
+      const newSpeed = speed === 'normal' ? 'fast' : 'normal';
+      setSpeed(newSpeed);
+      
+      // Restart with new speed
+      if (scrollIntervalRef.current) {
+        clearInterval(scrollIntervalRef.current);
+      }
+      
+      scrollIntervalRef.current = setInterval(() => {
+        if (!scrollContainerRef.current) return;
+        
+        const currentSpeed = newSpeed === 'fast' ? 8 : 3;
+        const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed;
+        scrollContainerRef.current.scrollBy({
+          left: scrollAmount,
+          behavior: 'auto'
+        });
+      }, 16);
+    } else {
+      // If not scrolling or different direction, start scrolling
+      startAutoScroll(direction);
+    }
   };
 
   const startAutoScroll = (direction: 'left' | 'right') => {
@@ -32,12 +51,14 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
     }
     
     setIsScrolling(true);
+    setCurrentDirection(direction);
+    setSpeed('normal'); // Reset to normal speed when starting
     
     scrollIntervalRef.current = setInterval(() => {
       if (!scrollContainerRef.current) return;
       
-      const speed = 3;
-      const scrollAmount = direction === 'right' ? speed : -speed;
+      const currentSpeed = speed === 'fast' ? 8 : 3;
+      const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed;
       scrollContainerRef.current.scrollBy({
         left: scrollAmount,
         behavior: 'auto'
@@ -51,6 +72,8 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
       scrollIntervalRef.current = null;
     }
     setIsScrolling(false);
+    setCurrentDirection(null);
+    setSpeed('normal');
   };
 
   // Initialize scroll position in the middle so we can scroll both ways