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

Improve video preview by delaying on mobile devices

Browse Source 
Update VideoCard component to prevent video previews from playing on mobile devices or when quickly hovering.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:13:30 +00:00
parent eaea04e219
commit f65b176868
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/IMG_0571_1756462340289.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 MiB

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

@ -52,8 +52,11 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
const hlsRef = useRef<any>(null);
// Delay preview start to avoid loading on quick mouse passes
// Only enable previews on desktop devices with mouse
useEffect(() => {
if (isHovered) {
const isMobile = window.innerWidth < 768 || 'ontouchstart' in window;
if (isHovered && !isMobile) {
hoverTimeoutRef.current = setTimeout(() => {
setShowPreview(true);
}, 800); // Start preview after 800ms hover