From c93b186eda76d272d2813b8a06c7b026ac0b0721 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 15 Mar 2024 09:59:41 -0500
Subject: [PATCH] Fix switching camera group bug (#10478)

* give default group a name

* use "default" as default value

* optional param

* fix string

* clean up
---
 .../components/filter/CameraGroupSelector.tsx   | 17 ++++++++++-------
 web/src/pages/Live.tsx                          |  9 ++++++---
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 7875cc3e0..b8ed05b7b 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -52,7 +52,10 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
 
   // groups
 
-  const [group, setGroup] = usePersistedOverlayState("cameraGroup");
+  const [group, setGroup] = usePersistedOverlayState(
+    "cameraGroup",
+    "default" as string,
+  );
 
   const groups = useMemo(() => {
     if (!config) {
@@ -78,24 +81,24 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
         currentGroups={groups}
       />
 
-      <Tooltip open={tooltip == "home"}>
+      <Tooltip open={tooltip == "default"}>
         <TooltipTrigger asChild>
           <Button
             className={
-              group == undefined
+              group == "default"
                 ? "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"
             }
             size="xs"
-            onClick={() => (group ? setGroup(undefined, true) : null)}
-            onMouseEnter={() => (isDesktop ? showTooltip("home") : null)}
+            onClick={() => (group ? setGroup("default", true) : null)}
+            onMouseEnter={() => (isDesktop ? showTooltip("default") : null)}
             onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
           >
             <MdHome className="size-4" />
           </Button>
         </TooltipTrigger>
         <TooltipContent className="capitalize" side="right">
-          Home
+          All Cameras
         </TooltipContent>
       </Tooltip>
       {groups.map(([name, config]) => {
@@ -109,7 +112,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                     : "text-muted-foreground bg-secondary"
                 }
                 size="xs"
-                onClick={() => setGroup(name, group != undefined)}
+                onClick={() => setGroup(name, group != "default")}
                 onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
                 onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
               >
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 4d7b58780..ba64e5680 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -11,10 +11,13 @@ function Live() {
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
-  const [cameraGroup] = usePersistedOverlayState("cameraGroup");
+  const [cameraGroup] = usePersistedOverlayState(
+    "cameraGroup",
+    "default" as string,
+  );
 
   const includesBirdseye = useMemo(() => {
-    if (config && cameraGroup) {
+    if (config && cameraGroup && cameraGroup != "default") {
       return config.camera_groups[cameraGroup].cameras.includes("birdseye");
     } else {
       return false;
@@ -26,7 +29,7 @@ function Live() {
       return [];
     }
 
-    if (cameraGroup) {
+    if (cameraGroup && cameraGroup != "default") {
       const group = config.camera_groups[cameraGroup];
       return Object.values(config.cameras)
         .filter((conf) => conf.enabled && group.cameras.includes(conf.name))