Camera group url fixes (#20295)

* Fix group url param where a camera group was not always loaded

Need to use the loading state from the usePersistence hook because values are loaded from indexed db asynchronously

* ensure group icon changes when using url param

* clean up
This commit is contained in:
Josh Hawkins 2025-09-30 17:53:48 -05:00 committed by GitHub
parent 1b6c246a44
commit 16c88fa8ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 4 deletions

View File

@ -109,7 +109,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
// groups // groups
const [group, setGroup, deleteGroup] = usePersistedOverlayState( const [group, setGroup, , deleteGroup] = usePersistedOverlayState(
"cameraGroup", "cameraGroup",
"default" as string, "default" as string,
); );

View File

@ -40,6 +40,7 @@ export function usePersistedOverlayState<S extends string>(
): [ ): [
S | undefined, S | undefined,
(value: S | undefined, replace?: boolean) => void, (value: S | undefined, replace?: boolean) => void,
boolean,
() => void, () => void,
] { ] {
const location = useLocation(); const location = useLocation();
@ -55,7 +56,7 @@ export function usePersistedOverlayState<S extends string>(
// saved value from previous session // saved value from previous session
const [persistedValue, setPersistedValue, , deletePersistedValue] = const [persistedValue, setPersistedValue, loaded, deletePersistedValue] =
usePersistence<S>(key, overlayStateValue); usePersistence<S>(key, overlayStateValue);
const setOverlayStateValue = useCallback( const setOverlayStateValue = useCallback(
@ -73,6 +74,7 @@ export function usePersistedOverlayState<S extends string>(
return [ return [
overlayStateValue ?? persistedValue ?? defaultValue, overlayStateValue ?? persistedValue ?? defaultValue,
setOverlayStateValue, setOverlayStateValue,
loaded,
deletePersistedValue, deletePersistedValue,
]; ];
} }

View File

@ -24,17 +24,21 @@ function Live() {
// selection // selection
const [selectedCameraName, setSelectedCameraName] = useHashState(); const [selectedCameraName, setSelectedCameraName] = useHashState();
const [cameraGroup, setCameraGroup] = usePersistedOverlayState( const [cameraGroup, setCameraGroup, loaded, ,] = usePersistedOverlayState(
"cameraGroup", "cameraGroup",
"default" as string, "default" as string,
); );
useSearchEffect("group", (cameraGroup) => { useSearchEffect("group", (cameraGroup) => {
if (config && cameraGroup) { if (config && cameraGroup && loaded) {
const group = config.camera_groups[cameraGroup]; const group = config.camera_groups[cameraGroup];
if (group) { if (group) {
setCameraGroup(cameraGroup); setCameraGroup(cameraGroup);
// return false so that url cleanup doesn't occur here.
// will be cleaned up by usePersistedOverlayState in the
// camera group selector so that the icon switches correctly
return false;
} }
return true; return true;