From 64263740832656a312850bc6ceb55b24fe02da8b Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 15:46:18 +0000
Subject: [PATCH] Add subtle animations to indicate video preview functionality

Introduce visual cues, including a "Hover to preview" message and a pulsating play icon, to guide users towards interactive video card features and improve discoverability of the video preview functionality.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
---
 client/src/components/video-card.tsx | 35 +++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 418b7e1..9d5b924 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -47,7 +47,9 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   const [isHovered, setIsHovered] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
   const [isMuted, setIsMuted] = useState(true);
+  const [showHint, setShowHint] = useState(false);
   const hoverTimeoutRef = useRef<NodeJS.Timeout>();
+  const hintTimeoutRef = useRef<NodeJS.Timeout>();
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<Hls | null>(null);
   const [currentTime, setCurrentTime] = useState(0);
@@ -84,18 +86,27 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   // Enable video preview on hover for desktop devices
   useEffect(() => {
     if (isHovered) {
-      // Enable preview for desktop devices after delay
+      // Show hint after short delay
       if (window.innerWidth >= 768) {
+        hintTimeoutRef.current = setTimeout(() => {
+          setShowHint(true);
+        }, 300);
+        
         const delay = 800;
         hoverTimeoutRef.current = setTimeout(() => {
           setShowPreview(true);
+          setShowHint(false); // Hide hint when preview starts
         }, delay);
       }
     } else {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
       }
+      if (hintTimeoutRef.current) {
+        clearTimeout(hintTimeoutRef.current);
+      }
       setShowPreview(false);
+      setShowHint(false);
       // Clean up HLS when not hovering
       if (hlsRef.current) {
         hlsRef.current.destroy();
@@ -107,6 +118,9 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
       }
+      if (hintTimeoutRef.current) {
+        clearTimeout(hintTimeoutRef.current);
+      }
       if (hlsRef.current) {
         hlsRef.current.destroy();
       }
@@ -268,6 +282,18 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
           </div>
         )}
         
+        {/* Preview hint animation */}
+        {showHint && !showPreview && (
+          <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/20 backdrop-blur-sm">
+            <div className="bg-white/10 backdrop-blur-md rounded-full px-4 py-2 border border-white/20 animate-pulse">
+              <div className="flex items-center gap-2 text-white text-sm font-medium">
+                <Play className="w-4 h-4 animate-pulse" />
+                <span>Hover to preview</span>
+              </div>
+            </div>
+          </div>
+        )}
+        
         {/* Modern gradient overlay with title */}
         {!showPreview && !hideOverlay && (
           <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
@@ -279,6 +305,13 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
                 {video.title.split(' - ')[1] || video.title}
               </p>
             </div>
+            
+            {/* Subtle hover indicator in corner */}
+            <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-60 transition-opacity duration-300">
+              <div className="bg-white/10 backdrop-blur-sm rounded-full p-2 animate-pulse">
+                <Play className="w-3 h-3 text-white" />
+              </div>
+            </div>
           </div>
         )}