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

Adapt video previews for a better mobile experience

Browse Source 
Adjust video preview delay and controls for mobile devices, and set preload to metadata for MP4 sources.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
sebastjanartic 2025-08-30 12:43:09 +00:00
parent 83a9abad01
commit e7d66d289d
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,9 +50,13 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
// Delay preview start to avoid loading on quick mouse passes
useEffect(() => {
if (isHovered) {
// Shorter delay on mobile for better touch experience
const isMobile = window.innerWidth < 768;
const delay = isMobile ? 500 : 800; // 500ms on mobile, 800ms on desktop
hoverTimeoutRef.current = setTimeout(() => {
setShowPreview(true);
}, 800); // Start preview after 800ms hover
}, delay);
} else {
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
@ -73,6 +77,8 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
className={`video-card transition-transform duration-200 hover:scale-[1.02] p-3 ${className}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onTouchStart={() => setIsHovered(true)}
onTouchEnd={() => setIsHovered(false)}
>
{/* Video preview container */}
<div
@ -120,11 +126,16 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
muted
loop
playsInline
preload="none"
preload="metadata"
controls={false}
disablePictureInPicture
webkit-playsinline="true"
x5-playsinline="true"
onLoadStart={() => console.log('Preview loading for:', video.title)}
onError={(e) => console.log('Preview failed for:', video.title)}
onCanPlay={() => console.log('Preview ready for:', video.title)}
>
{/* Try MP4 source first for faster loading */}
{/* Try MP4 source first for faster loading on mobile */}
{video.mp4Url && (
<source src={video.mp4Url} type="video/mp4" />
)}