Persist live view muted/unmuted for session only (#12727)

* Persist live view muted/unmuted for session only

* consistent naming
This commit is contained in:
Josh Hawkins 2024-08-09 07:46:39 -05:00 committed by GitHub
parent 33e04fe61f
commit 6d9590b4ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 2 deletions

View File

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

View File

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