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

Add subtle animations to indicate video preview functionality

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-02 15:46:18 +00:00
parent 8c596f8326
commit 6426374083
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
)}