From 8d5dd20cf396200987c80bed5cd91079a5983154 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 12:59:37 +0000
Subject: [PATCH] Improve video selection highlighting and display on hover

Update the `CategoryRow` component in `netflix-grid.tsx` to manage the `clickedVideoId` state. This state is used to conditionally render the "Top 10" number overlay on videos. When a video is clicked, its ID is stored in `clickedVideoId`. The overlay is now hidden if the `clickedVideoId` matches the current video's ID. Additionally, hovering over a video category row resets `clickedVideoId` to `null` to ensure the number reappears when the mouse leaves the video. The `onClick` handler for `VideoCard` is modified to update this state and then call the original `onVideoClick` prop.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/7j5FE92
---
 client/src/components/netflix-grid.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 4b77ce5..af200d5 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -135,6 +135,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isScrolling, setIsScrolling] = useState(false);
   const scrollIntervalRef = useRef<NodeJS.Timeout>();
+  const [clickedVideoId, setClickedVideoId] = useState<string | null>(null);
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
@@ -220,10 +221,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
-            <div key={video.id} className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] relative group">
+            <div 
+              key={video.id} 
+              className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] relative group"
+              onMouseEnter={() => setClickedVideoId(null)}
+            >
               {/* Top 10 Number overlay for first category */}
-              {category.title.includes("Top 10") && index < 10 && (
-                <div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"
+              {category.title.includes("Top 10") && index < 10 && clickedVideoId !== video.id && (
+                <div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
                      style={{ 
                        textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
                        WebkitTextStroke: '2px rgba(0,0,0,0.8)' 
@@ -233,7 +238,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
               )}
               <VideoCard
                 video={video}
-                onClick={onVideoClick}
+                onClick={(video) => {
+                  setClickedVideoId(video.id);
+                  onVideoClick(video);
+                }}
                 className="w-full hover:scale-105 md:hover:scale-110 hover:z-10 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
               />
             </div>