From 0b35c4fed22ddff2d155557c5c05d9e9ed213cb4 Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Sat, 30 Aug 2025 22:42:11 +0000 Subject: [PATCH] Improve video preview loading and interaction on mobile devices Shorten video preview delay on smaller screens and add touch event listeners to VideoCard component for better mobile responsiveness. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc --- client/src/components/video-card.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index 3bc5f89..f22060b 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -55,8 +55,8 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay // Delay preview start to avoid loading on quick mouse passes useEffect(() => { if (isHovered) { - // Enable preview on both mobile and desktop - const delay = 800; + // Enable preview on both mobile and desktop - shorter delay for mobile + const delay = window.innerWidth < 768 ? 300 : 800; hoverTimeoutRef.current = setTimeout(() => { setShowPreview(true); }, delay); @@ -124,6 +124,8 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay className={`video-card transition-transform duration-200 hover:scale-[1.02] ${className}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} + onTouchStart={() => setIsHovered(true)} + onTouchEnd={() => setIsHovered(false)} > {/* Video preview container */}