From 953366ed63f635280799a0951aa0c0504eafaf92 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sat, 14 Mar 2026 02:31:40 +0100
Subject: [PATCH] feat(video-player): add muted prop to VideoPlayer and handle
 mute state in playback

---
 k-tv-frontend/app/(main)/tv/components/video-player.tsx | 9 +++++++++
 k-tv-frontend/app/(main)/tv/page.tsx                    | 1 +
 2 files changed, 10 insertions(+)

diff --git a/k-tv-frontend/app/(main)/tv/components/video-player.tsx b/k-tv-frontend/app/(main)/tv/components/video-player.tsx
index 6e68dd3..43f93f1 100644
--- a/k-tv-frontend/app/(main)/tv/components/video-player.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/video-player.tsx
@@ -16,6 +16,7 @@ interface VideoPlayerProps {
   initialOffset?: number;
   /** Active subtitle track index, or -1 to disable. */
   subtitleTrack?: number;
+  muted?: boolean;
   onStreamError?: () => void;
   onSubtitleTracksChange?: (tracks: SubtitleTrack[]) => void;
   /** Called when the browser blocks autoplay and user interaction is required. */
@@ -32,6 +33,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       className,
       initialOffset = 0,
       subtitleTrack = -1,
+      muted = false,
       onStreamError,
       onSubtitleTracksChange,
       onNeedsInteraction,
@@ -44,6 +46,12 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
     const [isBuffering, setIsBuffering] = useState(true);
     const onEndedRef = useRef(onEnded);
     onEndedRef.current = onEnded;
+    const mutedRef = useRef(muted);
+    mutedRef.current = muted;
+
+    useEffect(() => {
+      if (internalRef.current) internalRef.current.muted = muted;
+    }, [muted]);
 
     const setRef = (el: HTMLVideoElement | null) => {
       internalRef.current = el;
@@ -77,6 +85,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
         hlsRef.current = hls;
 
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.muted = mutedRef.current;
           video.play().catch(() => onNeedsInteraction?.());
         });
 
diff --git a/k-tv-frontend/app/(main)/tv/page.tsx b/k-tv-frontend/app/(main)/tv/page.tsx
index 3cd49bd..3086b35 100644
--- a/k-tv-frontend/app/(main)/tv/page.tsx
+++ b/k-tv-frontend/app/(main)/tv/page.tsx
@@ -482,6 +482,7 @@ function TvPageContent() {
           className="absolute inset-0 h-full w-full"
           initialOffset={broadcast ? calcOffsetSecs(broadcast.slot.start_at) : 0}
           subtitleTrack={activeSubtitleTrack}
+          muted={isMuted}
           onSubtitleTracksChange={setSubtitleTracks}
           onStreamError={handleStreamError}
           onEnded={handleVideoEnded}