From e2c6d9bee8c0e136a8754564d077fbff6692ad7f Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Thu, 4 Sep 2025 12:33:57 +0000 Subject: [PATCH] Ensure video playback respects mute settings on various devices Update VideoCard component to correctly apply the muted state for HLS and native HLS playback, resolving issues where audio was intermittently muted or unmuted. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/JlONw6J --- client/src/components/video-card.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index e952be7..7d6c217 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -141,6 +141,9 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay if (showPreview && videoRef.current && video.videoUrl.includes('.m3u8')) { const videoElement = videoRef.current; + // Ensure video element respects current mute state + videoElement.muted = isMuted; + if (Hls.isSupported()) { const hls = new Hls({ startLevel: 0, // Start with lowest quality @@ -153,24 +156,33 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay hlsRef.current = hls; hls.on(Hls.Events.MANIFEST_PARSED, () => { + // Set muted state before playing + videoElement.muted = isMuted; videoElement.play().catch(e => console.log('Preview autoplay failed:', e)); }); hls.on(Hls.Events.MEDIA_ATTACHED, () => { + // Set muted state after media is attached + videoElement.muted = isMuted; videoElement.addEventListener('loadedmetadata', () => { setDuration(videoElement.duration); + // Ensure muted state is preserved after metadata loads + videoElement.muted = isMuted; }); }); } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) { // Safari native HLS support videoElement.src = video.videoUrl; + videoElement.muted = isMuted; videoElement.addEventListener('loadedmetadata', () => { setDuration(videoElement.duration); + // Ensure muted state is preserved after metadata loads + videoElement.muted = isMuted; }); videoElement.play().catch(e => console.log('Preview autoplay failed:', e)); } } - }, [showPreview, video.videoUrl]); + }, [showPreview, video.videoUrl, isMuted]); return (