Improve scrolling responsiveness in the video grid component

Adjust the scrolling logic in `netflix-grid.tsx` to allow for faster, more responsive scrolling with variable animation speeds based on a new `isFastScrolling` state, improving user interaction experience.

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

@@ -134,34 +134,29 @@ interface CategoryRowProps {
 function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const [isFastScrolling, setIsFastScrolling] = useState(false);
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
       const isMobile = window.innerWidth < 768;
       const containerWidth = scrollRef.current.clientWidth;
-      const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0; // Faster scroll
+      const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0;
       const currentScroll = scrollRef.current.scrollLeft;
       const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
       
       let targetScroll;
       
-      console.log('Scroll debug:', { direction, currentScroll, maxScroll, scrollAmount });
-      
       if (direction === 'left') {
-        if (currentScroll <= 5) {
+        targetScroll = currentScroll - scrollAmount;
+        if (targetScroll <= 0) {
           // Jump to end for infinite loop
           targetScroll = maxScroll;
-          console.log('Jumping to end:', targetScroll);
-        } else {
-          targetScroll = Math.max(0, currentScroll - scrollAmount);
         }
       } else {
-        if (currentScroll >= maxScroll - 50) {
+        targetScroll = currentScroll + scrollAmount;
+        if (targetScroll >= maxScroll) {
           // Jump to beginning for infinite loop  
           targetScroll = 0;
-          console.log('Jumping to beginning:', targetScroll);
-        } else {
-          targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
         }
       }
         
@@ -180,19 +175,23 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       if (scrollRef.current) {
         const currentScroll = scrollRef.current.scrollLeft;
         const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
-        const scrollAmount = direction === 'left' ? -3 : 3; // Faster scroll
+        const scrollAmount = direction === 'left' ? 
+          (isFastScrolling ? -8 : -3) : 
+          (isFastScrolling ? 8 : 3);
         
-        if (direction === 'left' && currentScroll <= 5) {
+        let newScroll = currentScroll + scrollAmount;
+        
+        if (direction === 'left' && newScroll <= 0) {
           // Jump to end for infinite loop
-          scrollRef.current.scrollLeft = maxScroll;
+          newScroll = maxScroll;
-        } else if (direction === 'right' && currentScroll >= maxScroll - 50) {
+        } else if (direction === 'right' && newScroll >= maxScroll) {
           // Jump to beginning for infinite loop
-          scrollRef.current.scrollLeft = 0;
+          newScroll = 0;
-        } else {
-          scrollRef.current.scrollLeft += scrollAmount;
         }
+        
+        scrollRef.current.scrollLeft = newScroll;
       }
-    }, 10); // Faster animation
+    }, isFastScrolling ? 5 : 12); // Variable speed
   };
 
   const stopAutoScroll = () => {
@@ -213,6 +212,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         <div
           onMouseEnter={() => startAutoScroll('left')}
           onMouseLeave={stopAutoScroll}
+          onClick={() => {
+            setIsFastScrolling(!isFastScrolling);
+            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">
@@ -224,6 +227,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         <div
           onMouseEnter={() => startAutoScroll('right')}
           onMouseLeave={stopAutoScroll}
+          onClick={() => {
+            setIsFastScrolling(!isFastScrolling);
+            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">
@@ -234,12 +241,18 @@ 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={() => scroll('left')}
+          onClick={() => {
+            setIsFastScrolling(!isFastScrolling);
+            scroll('left');
+          }}
           style={{ touchAction: 'manipulation' }}
         />
         <div 
           className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent" 
-          onClick={() => scroll('right')}
+          onClick={() => {
+            setIsFastScrolling(!isFastScrolling);
+            scroll('right');
+          }}
           style={{ touchAction: 'manipulation' }}
         />