From 0e790f59328e158b4e1ca0c3ac9730a9555ef2f8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 10:44:28 +0000
Subject: [PATCH] Remove netflix-style popup overlay from video cards

Remove the experimental Netflix-style popup overlay and associated state management from the VideoCard component, simplifying the UI and improving performance.

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/video-card.tsx | 54 +---------------------------
 1 file changed, 1 insertion(+), 53 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 1f53281..5a79f4f 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -47,9 +47,7 @@ function formatDate(date: Date | string): string {
 export default function VideoCard({ video, onClick, className = "" }: VideoCardProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
-  const [showPopup, setShowPopup] = useState(false);
   const hoverTimeoutRef = useRef<NodeJS.Timeout>();
-  const popupTimeoutRef = useRef<NodeJS.Timeout>();
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<any>(null);
   
@@ -89,29 +87,17 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
       hoverTimeoutRef.current = setTimeout(() => {
         setShowPreview(true);
       }, 800); // Start preview after 800ms hover
-      
-      // Show popup after additional delay
-      popupTimeoutRef.current = setTimeout(() => {
-        setShowPopup(true);
-      }, 1200); // Show popup after 1.2s hover
     } else {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
       }
-      if (popupTimeoutRef.current) {
-        clearTimeout(popupTimeoutRef.current);
-      }
       setShowPreview(false);
-      setShowPopup(false);
     }
     
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
       }
-      if (popupTimeoutRef.current) {
-        clearTimeout(popupTimeoutRef.current);
-      }
     };
   }, [isHovered]);
 
@@ -173,7 +159,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
   return (
     <div 
       data-testid={`card-video-${video.id}`}
-      className={`video-card transition-all duration-300 p-1 md:p-2 ${className} ${showPopup ? 'z-50' : ''}`}
+      className={`video-card transition-all duration-300 p-1 md:p-2 ${className}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -247,44 +233,6 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         </h3>
       </div>
       
-      {/* Netflix-style popup overlay - stays within card */}
-      {showPopup && (
-        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/80 to-transparent rounded-b-lg p-3">
-          {/* Action buttons */}
-          <div className="flex items-center gap-1.5 mb-2">
-            <button 
-              onClick={() => onClick?.(video)}
-              className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center hover:bg-gray-200 transition-colors"
-            >
-              <Play className="w-3 h-3 ml-0.5" fill="currentColor" />
-            </button>
-            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
-              <Plus className="w-3 h-3" />
-            </button>
-            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
-              <ThumbsUp className="w-3 h-3" />
-            </button>
-            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors ml-auto">
-              <ChevronDown className="w-3 h-3" />
-            </button>
-          </div>
-          
-          {/* Video info */}
-          <div className="text-white">
-            <h4 className="font-bold text-xs mb-1 line-clamp-1">{video.title}</h4>
-            <div className="flex items-center gap-2 text-xs text-gray-300">
-              <span className="border border-gray-500 px-1 rounded text-xs">HD</span>
-              <span>{formatDuration(video.duration)}</span>
-              {video.category && (
-                <>
-                  <span>•</span>
-                  <span>{video.category}</span>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }