mirror of
				https://github.com/blakeblackshear/frigate.git
				synced 2025-10-27 10:52:11 +01:00 
			
		
		
		
	Persist live view muted/unmuted for session only (#12727)
* Persist live view muted/unmuted for session only * consistent naming
This commit is contained in:
		
							parent
							
								
									33e04fe61f
								
							
						
					
					
						commit
						6d9590b4ec
					
				
							
								
								
									
										39
									
								
								web/src/hooks/use-session-persistence.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										39
									
								
								web/src/hooks/use-session-persistence.ts
									
									
									
									
									
										Normal 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];
 | 
			
		||||
}
 | 
			
		||||
@ -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)}
 | 
			
		||||
                />
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user