From 7fd7127003398a269f1f765208c8baced728aafb Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 09:40:46 +0000
Subject: [PATCH] Add video preview on hover for a better user browsing
 experience

Implement a hover effect on video cards to show a muted, auto-playing preview of the video after a short delay, using Video.js and HLS.js for adaptive streaming.

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/bdLHpJy
---
 client/src/components/video-card.tsx | 77 ++++++++++++++++++++++++----
 1 file changed, 67 insertions(+), 10 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index a447925..960f9b5 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -1,6 +1,7 @@
 import { Play } from "lucide-react";
 import { type Video } from "@shared/schema";
 import HLSPreviewThumbnail from "./hls-preview-thumbnail";
+import { useState, useRef, useEffect } from "react";
 
 interface VideoCardProps {
   video: Video;
@@ -42,20 +43,47 @@ 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 hoverTimeoutRef = useRef<NodeJS.Timeout>();
+  
+  // Delay preview start to avoid loading on quick mouse passes
+  useEffect(() => {
+    if (isHovered) {
+      hoverTimeoutRef.current = setTimeout(() => {
+        setShowPreview(true);
+      }, 800); // Start preview after 800ms hover
+    } else {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      setShowPreview(false);
+    }
+    
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, [isHovered]);
+
   return (
     <div 
       data-testid={`card-video-${video.id}`}
       className={`video-card transition-transform duration-200 hover:scale-[1.02] p-3 ${className}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      {/* Simple thumbnail with fallback - no HLS loading until needed */}
+      {/* Video preview container */}
       <div 
         className="relative gradient-card rounded-xl overflow-hidden mb-4 aspect-[9/16] md:aspect-[16/9] cursor-pointer group"
         onClick={() => onClick?.(video)}
       >
+        {/* Static thumbnail - always visible */}
         <img
           src={video.thumbnailUrl}
           alt={video.title}
-          className="w-full h-full object-cover transition-all duration-300 group-hover:scale-105"
+          className={`w-full h-full object-cover transition-all duration-300 ${showPreview ? 'opacity-0' : 'opacity-100 group-hover:scale-105'}`}
           style={{ 
             objectPosition: video.faceCenterPosition || 'center center',
             objectFit: 'cover'
@@ -79,19 +107,48 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
           }}
         />
         
+        {/* Video preview - only load when hovering */}
+        {showPreview && (
+          <div className="absolute inset-0">
+            <video
+              className="w-full h-full object-cover"
+              style={{ 
+                objectPosition: video.faceCenterPosition || 'center center',
+                objectFit: 'cover'
+              }}
+              autoPlay
+              muted
+              loop
+              playsInline
+              preload="none"
+              onLoadStart={() => console.log('Preview loading for:', video.title)}
+              onError={(e) => console.log('Preview failed for:', video.title)}
+            >
+              {/* Try MP4 source first for faster loading */}
+              {video.mp4Url && (
+                <source src={video.mp4Url} type="video/mp4" />
+              )}
+              {/* Fallback to HLS if MP4 fails */}
+              {video.hlsUrl && (
+                <source src={video.hlsUrl} type="application/x-mpegURL" />
+              )}
+            </video>
+          </div>
+        )}
+        
         {/* Duration badge */}
-        <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
+        <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded z-10">
           {formatDuration(video.duration)}
         </div>
         
-
-        
-        {/* Play button overlay */}
-        <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
-          <div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center group-hover:bg-white/30 group-hover:scale-110 transition-all duration-300">
-            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
+        {/* Play button overlay - hidden during preview */}
+        {!showPreview && (
+          <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
+            <div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center group-hover:bg-white/30 group-hover:scale-110 transition-all duration-300">
+              <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
+            </div>
           </div>
-        </div>
+        )}
       </div>
       
       <div className="space-y-2">