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

Improve video preview loading and interaction on mobile devices

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 22:42:11 +00:00
parent 8a2d5403ad
commit 0b35c4fed2
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,8 +55,8 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
// Delay preview start to avoid loading on quick mouse passes // Delay preview start to avoid loading on quick mouse passes
useEffect(() => { useEffect(() => {
if (isHovered) { if (isHovered) {
// Enable preview on both mobile and desktop // Enable preview on both mobile and desktop - shorter delay for mobile
const delay = 800; const delay = window.innerWidth < 768 ? 300 : 800;
hoverTimeoutRef.current = setTimeout(() => { hoverTimeoutRef.current = setTimeout(() => {
setShowPreview(true); setShowPreview(true);
}, delay); }, 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}`} className={`video-card transition-transform duration-200 hover:scale-[1.02] ${className}`}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
onTouchStart={() => setIsHovered(true)}
onTouchEnd={() => setIsHovered(false)}
> >
{/* Video preview container */} {/* Video preview container */}
<div <div