sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add video preview on hover for a better user browsing experience

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-29 09:40:46 +00:00
parent e8358e8209
commit 7fd7127003
1 changed files with 67 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/src/components/video-card.tsx
View File

@ -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">