From 8fea0f2c764d832fb1ea6c263d85ed935769b33d Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 10:27:30 +0000
Subject: [PATCH] Enable automatic scrolling of video rows on hover

Implement automatic left and right scrolling for video rows when the mouse hovers over designated areas, replacing the previous click-based navigation buttons with a more intuitive hover-activated system.

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/P3O2FU7
---
 client/src/components/netflix-grid.tsx | 58 ++++++++++++++++++--------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index a4744a7..c33c3f7 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -133,6 +133,7 @@ interface CategoryRowProps {
 
 function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
@@ -153,39 +154,62 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     }
   };
 
+  const startAutoScroll = (direction: 'left' | 'right') => {
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+    }
+    scrollIntervalRef.current = setInterval(() => {
+      if (scrollRef.current) {
+        const scrollAmount = direction === 'left' ? -3 : 3;
+        scrollRef.current.scrollLeft += scrollAmount;
+      }
+    }, 16); // ~60fps
+  };
+
+  const stopAutoScroll = () => {
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  };
+
   return (
     <div className="relative group mb-8">
       <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
         {category.title}
       </h2>
       
-      <div className="relative px-0 md:px-16">
-        {/* Left scroll button - only on desktop */}
-        <Button
-          onClick={() => scroll('left')}
-          className="hidden md:flex absolute -left-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 items-center justify-center shadow-xl"
-          size="sm"
+      <div className="relative">
+        {/* Left scroll area with transparent background - only on desktop */}
+        <div
+          onMouseEnter={() => startAutoScroll('left')}
+          onMouseLeave={stopAutoScroll}
+          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"
         >
-          <ChevronLeft className="w-5 h-5" />
-        </Button>
+          <div className="flex items-center justify-center h-full">
+            <ChevronLeft className="w-8 h-8 text-white drop-shadow-lg" />
+          </div>
+        </div>
 
-        {/* Right scroll button - only on desktop */}
-        <Button
-          onClick={() => scroll('right')}
-          className="hidden md:flex absolute -right-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 items-center justify-center shadow-xl"
-          size="sm"
+        {/* Right scroll area with transparent background - only on desktop */}
+        <div
+          onMouseEnter={() => startAutoScroll('right')}
+          onMouseLeave={stopAutoScroll}
+          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"
         >
-          <ChevronRight className="w-5 h-5" />
-        </Button>
+          <div className="flex items-center justify-center h-full">
+            <ChevronRight className="w-8 h-8 text-white drop-shadow-lg" />
+          </div>
+        </div>
 
         {/* Mobile touch areas for left/right navigation */}
         <div className="md:hidden absolute left-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('left')} />
         <div className="md:hidden absolute right-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('right')} />
 
-        {/* Scrollable video row */}
+        {/* Scrollable video row - edge to edge */}
         <div
           ref={scrollRef}
-          className="flex space-x-2 md:space-x-3 overflow-x-auto scrollbar-hide pb-4 scroll-smooth"
+          className="flex space-x-2 md:space-x-3 overflow-x-auto scrollbar-hide pb-4 scroll-smooth px-4 md:px-0"
           style={{ 
             scrollbarWidth: 'none', 
             msOverflowStyle: 'none',