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

Enable videos to autoplay with sound on the platform

Browse Source 
Modify the video player to automatically play videos with sound when they are loaded, and adjust the video card component to disable hover previews on mobile devices.

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:47:39 +00:00
parent 5d783fc250
commit b2a4cfd8d4
2 changed files with 9 additions and 9 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,11 +55,13 @@ 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 - shorter delay for mobile // Only enable preview on desktop, disable on mobile
const delay = window.innerWidth < 768 ? 300 : 800; if (window.innerWidth >= 768) {
hoverTimeoutRef.current = setTimeout(() => { const delay = 800;
setShowPreview(true); hoverTimeoutRef.current = setTimeout(() => {
}, delay); setShowPreview(true);
}, delay);
}
} else { } else {
if (hoverTimeoutRef.current) { if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current); clearTimeout(hoverTimeoutRef.current);
@ -124,8 +126,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

4
client/src/pages/VideoPage.tsx
View File

@ -433,11 +433,11 @@ export default function VideoPage() {
)} )}
{currentVideo.videoUrlIframe ? ( {currentVideo.videoUrlIframe ? (
<iframe <iframe
src={currentVideo.videoUrlIframe} src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1&muted=0`}
className="absolute inset-0 w-full h-full" className="absolute inset-0 w-full h-full"
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
onLoad={handleVideoPlay} onLoad={handleVideoPlay}
title={currentVideo.title} title={currentVideo.title}
/> />