administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Use hash location insteaad of state for live camera view

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-15 11:57:37 -06:00
parent 56c4b97321
commit a66b96345b
3 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/hooks/use-overlay-state.tsx
View File

@ -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,25 @@ export function usePersistedOverlayState<S extends string>(
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];
}

2
web/src/pages/Events.tsx
View File

@ -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 {

5
web/src/pages/Live.tsx
View File

@ -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<FrigateConfig>("config");
const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
const [selectedCameraName, setSelectedCameraName] = useHashState();
const [cameraGroup] = usePersistedOverlayState(
"cameraGroup",
"default" as string,