From c54259ecc6d94a44e56c32f5749a2adda3d6065c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 11 Feb 2025 07:56:15 -0600
Subject: [PATCH] use persistence for hls player muting (#16481)

---
 web/src/components/player/HlsVideoPlayer.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 0661fb0c9..6c04bb6dd 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -144,7 +144,7 @@ export default function HlsVideoPlayer({
 
   const [tallCamera, setTallCamera] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
-  const [muted, setMuted] = useOverlayState("playerMuted", true);
+  const [muted, setMuted] = usePersistence("hlsPlayerMuted", true);
   const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
   const [defaultPlaybackRate] = usePersistence("playbackRate", 1);
   const [playbackRate, setPlaybackRate] = useOverlayState(
@@ -211,7 +211,7 @@ export default function HlsVideoPlayer({
             fullscreen: supportsFullscreen,
           }}
           setControlsOpen={setControlsOpen}
-          setMuted={(muted) => setMuted(muted, true)}
+          setMuted={(muted) => setMuted(muted)}
           playbackRate={playbackRate ?? 1}
           hotKeys={hotKeys}
           onPlayPause={onPlayPause}
@@ -280,9 +280,12 @@ export default function HlsVideoPlayer({
                 }
               : undefined
           }
-          onVolumeChange={() =>
-            setVolume(videoRef.current?.volume ?? 1.0, true)
-          }
+          onVolumeChange={() => {
+            setVolume(videoRef.current?.volume ?? 1.0, true);
+            if (!frigateControls) {
+              setMuted(videoRef.current?.muted);
+            }
+          }}
           onPlay={() => {
             setIsPlaying(true);