Use persistence for live layout (#10114)

* Use persistence for live layout

* Fix typing

* Fix persistence typing

* remove type

* More type fixing

web/src/hooks/use-camera-live-mode.ts

@@ -7,7 +7,7 @@ import { LivePlayerMode } from "@/types/live";
 export default function useCameraLiveMode(
   cameraConfig: CameraConfig,
   preferredMode?: string
-): LivePlayerMode {
+): LivePlayerMode | undefined {
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const restreamEnabled = useMemo(() => {
@@ -22,10 +22,10 @@ export default function useCameraLiveMode(
       )
     );
   }, [config, cameraConfig]);
-  const defaultLiveMode = useMemo(() => {
+  const defaultLiveMode = useMemo<LivePlayerMode | undefined>(() => {
     if (config && cameraConfig) {
       if (restreamEnabled) {
-        return cameraConfig.ui.live_mode || config?.ui.live_mode;
+        return cameraConfig.ui.live_mode || config.ui.live_mode;
       }
 
       return "jsmpeg";
@@ -33,7 +33,7 @@ export default function useCameraLiveMode(
 
     return undefined;
   }, [cameraConfig, restreamEnabled]);
-  const [viewSource] = usePersistence(
+  const [viewSource] = usePersistence<LivePlayerMode>(
     `${cameraConfig.name}-source`,
     defaultLiveMode
   );

web/src/hooks/use-persistence.ts

@@ -1,21 +1,21 @@
 import { useEffect, useState, useCallback } from "react";
 import { get as getData, set as setData } from "idb-keyval";
 
-type usePersistenceReturn = [
-  value: any | undefined,
-  setValue: (value: string | boolean) => void,
+type usePersistenceReturn<S> = [
+  value: S | undefined,
+  setValue: (value: S) => void,
   loaded: boolean,
 ];
 
-export function usePersistence(
+export function usePersistence<S>(
   key: string,
-  defaultValue: any | undefined = undefined
-): usePersistenceReturn {
-  const [value, setInternalValue] = useState<any | undefined>(defaultValue);
+  defaultValue: S | undefined = undefined
+): usePersistenceReturn<S> {
+  const [value, setInternalValue] = useState<S | undefined>(defaultValue);
   const [loaded, setLoaded] = useState<boolean>(false);
 
   const setValue = useCallback(
-    (value: string | boolean) => {
+    (value: S) => {
       setInternalValue(value);
       async function update() {
         await setData(key, value);