diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx index 12f87be57..5d35790b3 100644 --- a/web/src/hooks/use-overlay-state.tsx +++ b/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( +export function useOverlayState( key: string, defaultValue: S | undefined = undefined, ): [S | undefined, (value: S, replace?: boolean) => void] { @@ -63,3 +63,25 @@ export function usePersistedOverlayState( setOverlayStateValue, ]; } + +export function useHashState(): [string | undefined, (value: string) => void] { + const location = useLocation(); + const navigate = useNavigate(); + + const setHash = useCallback( + (value: string | 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), [location.hash]); + + return [hash, setHash]; +} diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx index 386ca9073..f34f0c72b 100644 --- a/web/src/pages/Events.tsx +++ b/web/src/pages/Events.tsx @@ -1,7 +1,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator"; import useApiFilter from "@/hooks/use-api-filter"; import { useTimezone } from "@/hooks/use-date-utils"; -import useOverlayState from "@/hooks/use-overlay-state"; +import { useOverlayState } from "@/hooks/use-overlay-state"; import { FrigateConfig } from "@/types/frigateConfig"; import { Preview } from "@/types/preview"; import { diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx index ba64e5680..6787f9143 100644 --- a/web/src/pages/Live.tsx +++ b/web/src/pages/Live.tsx @@ -1,4 +1,5 @@ -import useOverlayState, { +import { + useHashState, usePersistedOverlayState, } from "@/hooks/use-overlay-state"; import { FrigateConfig } from "@/types/frigateConfig"; @@ -10,7 +11,7 @@ import useSWR from "swr"; function Live() { const { data: config } = useSWR("config"); - const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera"); + const [selectedCameraName, setSelectedCameraName] = useHashState(); const [cameraGroup] = usePersistedOverlayState( "cameraGroup", "default" as string,