From 87b69c373a755acaba2c21d965640ac21bd3451d Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 9 Aug 2024 07:46:39 -0500
Subject: [PATCH] Persist live view muted/unmuted for session only (#12727)

* Persist live view muted/unmuted for session only

* consistent naming
---
 web/src/hooks/use-session-persistence.ts | 39 ++++++++++++++++++++++++
 web/src/views/live/LiveCameraView.tsx    |  5 +--
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 web/src/hooks/use-session-persistence.ts

diff --git a/web/src/hooks/use-session-persistence.ts b/web/src/hooks/use-session-persistence.ts
new file mode 100644
index 000000000..3662c799c
--- /dev/null
+++ b/web/src/hooks/use-session-persistence.ts
@@ -0,0 +1,39 @@
+import { useCallback, useState } from "react";
+
+type useSessionPersistenceReturn<S> = [
+  value: S | undefined,
+  setValue: (value: S | undefined) => void,
+];
+
+export function useSessionPersistence<S>(
+  key: string,
+  defaultValue: S | undefined = undefined,
+): useSessionPersistenceReturn<S> {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.sessionStorage.getItem(key);
+
+      if (value) {
+        return JSON.parse(value);
+      } else {
+        window.sessionStorage.setItem(key, JSON.stringify(defaultValue));
+        return defaultValue;
+      }
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (newValue: S | undefined) => {
+      try {
+        window.sessionStorage.setItem(key, JSON.stringify(newValue));
+        // eslint-disable-next-line no-empty
+      } catch (err) {}
+      setStoredValue(newValue);
+    },
+    [key],
+  );
+
+  return [storedValue, setValue];
+}
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 033b0d71c..cd7190e86 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -78,6 +78,7 @@ import { useNavigate } from "react-router-dom";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
 import { cn } from "@/lib/utils";
+import { useSessionPersistence } from "@/hooks/use-session-persistence";
 
 type LiveCameraViewProps = {
   config?: FrigateConfig;
@@ -194,7 +195,7 @@ export default function LiveCameraView({
 
   // playback state
 
-  const [audio, setAudio] = useState(false);
+  const [audio, setAudio] = useSessionPersistence("liveAudio", false);
   const [mic, setMic] = useState(false);
   const [webRTC, setWebRTC] = useState(false);
   const [pip, setPip] = useState(false);
@@ -404,7 +405,7 @@ export default function LiveCameraView({
                   className="p-2 md:p-0"
                   variant={fullscreen ? "overlay" : "primary"}
                   Icon={audio ? GiSpeaker : GiSpeakerOff}
-                  isActive={audio}
+                  isActive={audio ?? false}
                   title={`${audio ? "Disable" : "Enable"} Camera Audio`}
                   onClick={() => setAudio(!audio)}
                 />