Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-26 19:06:11 +01:00
Code Issues Projects Releases Wiki Activity

Revert all cameras switches behavior (#14015)

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-27 09:13:15 -05:00 committed by GitHub
parent 05fe7f8a48
commit bd57ea0110
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
web/src/components/filter/CamerasFilterButton.tsx
View File

@ -29,10 +29,7 @@ export function CamerasFilterButton({
}: CameraFilterButtonProps) { }: CameraFilterButtonProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [currentCameras, setCurrentCameras] = useState<string[] | undefined>( const [currentCameras, setCurrentCameras] = useState<string[] | undefined>(
selectedCameras === undefined ? [...allCameras] : selectedCameras, selectedCameras,
);
const [allCamerasSelected, setAllCamerasSelected] = useState(
selectedCameras === undefined,
); );
const buttonText = useMemo(() => { const buttonText = useMemo(() => {
@ -40,26 +37,17 @@ export function CamerasFilterButton({
return "Cameras"; return "Cameras";
} }
if (allCamerasSelected) { if (!selectedCameras || selectedCameras.length == 0) {
return "All Cameras"; return "All Cameras";
} }
if (!currentCameras || currentCameras.length === 0) { return `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`;
return "No cameras"; }, [selectedCameras]);
}
return `${currentCameras.includes("birdseye") ? currentCameras.length - 1 : currentCameras.length} Camera${
currentCameras.length !== 1 ? "s" : ""
}`;
}, [allCamerasSelected, currentCameras]);
// ui // ui
useEffect(() => { useEffect(() => {
setCurrentCameras( setCurrentCameras(selectedCameras);
selectedCameras === undefined ? [...allCameras] : selectedCameras,
);
setAllCamerasSelected(selectedCameras === undefined);
// only refresh when state changes // only refresh when state changes
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedCameras]); }, [selectedCameras]);
@ -92,15 +80,11 @@ export function CamerasFilterButton({
)} )}
<div className="scrollbar-container flex h-auto max-h-[80dvh] flex-col gap-2 overflow-y-auto overflow-x-hidden p-4"> <div className="scrollbar-container flex h-auto max-h-[80dvh] flex-col gap-2 overflow-y-auto overflow-x-hidden p-4">
<FilterSwitch <FilterSwitch
isChecked={allCamerasSelected} isChecked={currentCameras == undefined}
label="All Cameras" label="All Cameras"
onCheckedChange={(isChecked) => { onCheckedChange={(isChecked) => {
setAllCamerasSelected(isChecked);
if (isChecked) { if (isChecked) {
setCurrentCameras([...allCameras]); setCurrentCameras(undefined);
} else {
setCurrentCameras([]);
} }
}} }}
/> />
@ -113,7 +97,6 @@ export function CamerasFilterButton({
key={name} key={name}
className="w-full cursor-pointer rounded-lg px-2 py-0.5 text-sm capitalize text-primary hover:bg-muted" className="w-full cursor-pointer rounded-lg px-2 py-0.5 text-sm capitalize text-primary hover:bg-muted"
onClick={() => { onClick={() => {
setAllCamerasSelected(false);
setCurrentCameras([...conf.cameras]); setCurrentCameras([...conf.cameras]);
}} }}
> >
@ -137,24 +120,15 @@ export function CamerasFilterButton({
: []; : [];
updatedCameras.push(item); updatedCameras.push(item);
setCurrentCameras(updatedCameras); setCurrentCameras(updatedCameras);
// Check if all cameras are now selected
setAllCamerasSelected(
updatedCameras.length === allCameras.length,
);
} else { } else {
const updatedCameras = currentCameras const updatedCameras = currentCameras
? [...currentCameras] ? [...currentCameras]
: []; : [];
const index = updatedCameras.indexOf(item); // can not deselect the last item
if (updatedCameras.length > 1) {
if (index > -1) { updatedCameras.splice(updatedCameras.indexOf(item), 1);
updatedCameras.splice(index, 1);
setCurrentCameras(updatedCameras); setCurrentCameras(updatedCameras);
} }
// Deselecting one camera should disable the "All Cameras" switch
setAllCamerasSelected(false);
} }
}} }}
/> />
@ -167,7 +141,7 @@ export function CamerasFilterButton({
variant="select" variant="select"
disabled={currentCameras?.length === 0} disabled={currentCameras?.length === 0}
onClick={() => { onClick={() => {
updateCameraFilter(allCamerasSelected ? undefined : currentCameras); updateCameraFilter(currentCameras);
setOpen(false); setOpen(false);
}} }}
> >
@ -175,8 +149,7 @@ export function CamerasFilterButton({
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
setCurrentCameras([...allCameras]); setCurrentCameras(undefined);
setAllCamerasSelected(true);
updateCameraFilter(undefined); updateCameraFilter(undefined);
}} }}
> >
@ -192,8 +165,7 @@ export function CamerasFilterButton({
open={open} open={open}
onOpenChange={(open) => { onOpenChange={(open) => {
if (!open) { if (!open) {
setCurrentCameras(selectedCameras ?? allCameras); setCurrentCameras(selectedCameras);
setAllCamerasSelected(selectedCameras === undefined);
} }
setOpen(open); setOpen(open);
@ -213,8 +185,7 @@ export function CamerasFilterButton({
open={open} open={open}
onOpenChange={(open) => { onOpenChange={(open) => {
if (!open) { if (!open) {
setCurrentCameras(selectedCameras ?? allCameras); setCurrentCameras(selectedCameras);
setAllCamerasSelected(selectedCameras === undefined);
} }
setOpen(open); setOpen(open);
}} }}