Fix switching camera group bug (#10478)

* give default group a name

* use "default" as default value

* optional param

* fix string

* clean up
This commit is contained in:
Josh Hawkins 2024-03-15 09:59:41 -05:00 committed by GitHub
parent df0291db5c
commit c93b186eda
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 10 deletions

View File

@ -52,7 +52,10 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
// groups // groups
const [group, setGroup] = usePersistedOverlayState("cameraGroup"); const [group, setGroup] = usePersistedOverlayState(
"cameraGroup",
"default" as string,
);
const groups = useMemo(() => { const groups = useMemo(() => {
if (!config) { if (!config) {
@ -78,24 +81,24 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
currentGroups={groups} currentGroups={groups}
/> />
<Tooltip open={tooltip == "home"}> <Tooltip open={tooltip == "default"}>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
className={ className={
group == undefined group == "default"
? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60" ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
: "text-muted-foreground bg-secondary focus:text-muted-foreground focus:bg-secondary" : "text-muted-foreground bg-secondary focus:text-muted-foreground focus:bg-secondary"
} }
size="xs" size="xs"
onClick={() => (group ? setGroup(undefined, true) : null)} onClick={() => (group ? setGroup("default", true) : null)}
onMouseEnter={() => (isDesktop ? showTooltip("home") : null)} onMouseEnter={() => (isDesktop ? showTooltip("default") : null)}
onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)} onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
> >
<MdHome className="size-4" /> <MdHome className="size-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="capitalize" side="right"> <TooltipContent className="capitalize" side="right">
Home All Cameras
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
{groups.map(([name, config]) => { {groups.map(([name, config]) => {
@ -109,7 +112,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
: "text-muted-foreground bg-secondary" : "text-muted-foreground bg-secondary"
} }
size="xs" size="xs"
onClick={() => setGroup(name, group != undefined)} onClick={() => setGroup(name, group != "default")}
onMouseEnter={() => (isDesktop ? showTooltip(name) : null)} onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)} onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
> >

View File

@ -11,10 +11,13 @@ function Live() {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera"); const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
const [cameraGroup] = usePersistedOverlayState("cameraGroup"); const [cameraGroup] = usePersistedOverlayState(
"cameraGroup",
"default" as string,
);
const includesBirdseye = useMemo(() => { const includesBirdseye = useMemo(() => {
if (config && cameraGroup) { if (config && cameraGroup && cameraGroup != "default") {
return config.camera_groups[cameraGroup].cameras.includes("birdseye"); return config.camera_groups[cameraGroup].cameras.includes("birdseye");
} else { } else {
return false; return false;
@ -26,7 +29,7 @@ function Live() {
return []; return [];
} }
if (cameraGroup) { if (cameraGroup && cameraGroup != "default") {
const group = config.camera_groups[cameraGroup]; const group = config.camera_groups[cameraGroup];
return Object.values(config.cameras) return Object.values(config.cameras)
.filter((conf) => conf.enabled && group.cameras.includes(conf.name)) .filter((conf) => conf.enabled && group.cameras.includes(conf.name))