feat(video-player): add muted prop to VideoPlayer and handle mute state in playback

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?.());
         });
 

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}