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

@@ -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];
+}

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)}
  />