WebUI Fixes (#10481)

* Update previews on the hour

* Allow tap to toggle controls so zooming still works

* Use hash location insteaad of state for live camera view

* Add typing

web/src/hooks/use-overlay-state.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { usePersistence } from "./use-persistence";
 
-export default function useOverlayState<S extends string>(
+export function useOverlayState<S extends string>(
   key: string,
   defaultValue: S | undefined = undefined,
 ): [S | undefined, (value: S, replace?: boolean) => void] {
@@ -63,3 +63,31 @@ export function usePersistedOverlayState<S extends string>(
     setOverlayStateValue,
   ];
 }
+
+export function useHashState<S extends string>(): [
+  S | undefined,
+  (value: S) => void,
+] {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const setHash = useCallback(
+    (value: S | undefined) => {
+      if (!value) {
+        navigate(location.pathname);
+      } else {
+        navigate(`${location.pathname}#${value}`);
+      }
+    },
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [location, navigate],
+  );
+
+  const hash = useMemo(
+    () => location.hash.substring(1) as unknown as S,
+    [location.hash],
+  );
+
+  return [hash, setHash];
+}