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

Prevent videos from automatically playing on mobile touch interactions

Browse Source 
Remove auto-play functionality for video cards on mobile devices by disabling the hover effect initiation via touch events in `video-card.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/Sy6XHzr
This commit is contained in:
sebastjanartic 2025-08-30 19:44:47 +00:00
parent e6ed9a81df
commit 5572b7df36
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,13 +55,15 @@ 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) {
// Shorter delay on mobile for better touch experience // Disable preview on mobile devices
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
const delay = isMobile ? 500 : 800; // 500ms on mobile, 800ms on desktop
hoverTimeoutRef.current = setTimeout(() => { if (!isMobile) {
setShowPreview(true); const delay = 800; // Only on desktop
}, delay); hoverTimeoutRef.current = setTimeout(() => {
setShowPreview(true);
}, delay);
}
} else { } else {
if (hoverTimeoutRef.current) { if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current); clearTimeout(hoverTimeoutRef.current);
@ -126,8 +128,6 @@ 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