Camera groups

frigate/config.py

@@ -1003,6 +1003,16 @@ class LoggerConfig(FrigateBaseModel):
     )
 
 
+class CameraGroupConfig(FrigateBaseModel):
+    """Represents a group of cameras."""
+
+    cameras: list[str] = Field(
+        default_factory=list, title="List of cameras in this group."
+    )
+    icon: str = Field(default="generic", title="Icon that represents camera group.")
+    order: int = Field(default=0, title="Sort order for group.")
+
+
 def verify_config_roles(camera_config: CameraConfig) -> None:
     """Verify that roles are setup in the config correctly."""
     assigned_roles = list(
@@ -1157,6 +1167,9 @@ class FrigateConfig(FrigateBaseModel):
         default_factory=DetectConfig, title="Global object tracking configuration."
     )
     cameras: Dict[str, CameraConfig] = Field(title="Camera configuration.")
+    camera_groups: Dict[str, CameraGroupConfig] = Field(
+        default_factory=CameraGroupConfig, title="Camera group configuration"
+    )
     timestamp_style: TimestampStyleConfig = Field(
         default_factory=TimestampStyleConfig,
         title="Global timestamp style configuration.",

web/src/components/filter/CameraGroupSelector.tsx

@@ -0,0 +1,102 @@
+import { FrigateConfig } from "@/types/frigateConfig";
+import { isDesktop } from "react-device-detect";
+import useSWR from "swr";
+import { MdHome } from "react-icons/md";
+import useOverlayState from "@/hooks/use-overlay-state";
+import { Button } from "../ui/button";
+import { useNavigate } from "react-router-dom";
+import { useCallback, useMemo, useState } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { getIconForGroup } from "@/utils/iconUtil";
+
+type CameraGroupSelectorProps = {
+  className?: string;
+};
+export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const navigate = useNavigate();
+
+  // tooltip
+
+  const [tooltip, setTooltip] = useState<string>();
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+  const showTooltip = useCallback(
+    (newTooltip: string | undefined) => {
+      if (!newTooltip) {
+        setTooltip(newTooltip);
+
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      } else {
+        setTimeoutId(setTimeout(() => setTooltip(newTooltip), 500));
+      }
+    },
+    [timeoutId],
+  );
+
+  // groups
+
+  const [group, setGroup] = useOverlayState("cameraGroup");
+
+  const groups = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    return Object.entries(config.camera_groups).sort(
+      (a, b) => a[1].order - b[1].order,
+    );
+  }, [config]);
+
+  return (
+    <div
+      className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : ""}`}
+    >
+      <Tooltip open={tooltip == "home"}>
+        <TooltipTrigger asChild>
+          <Button
+            className={
+              group == undefined
+                ? "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={() => navigate(-1)}
+            onMouseEnter={() => (isDesktop ? showTooltip("home") : null)}
+            onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
+          >
+            <MdHome className="size-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent className="capitalize" side="right">
+          Home
+        </TooltipContent>
+      </Tooltip>
+      {groups.map(([name, config]) => {
+        return (
+          <Tooltip key={name} open={tooltip == name}>
+            <TooltipTrigger asChild>
+              <Button
+                className={
+                  group == name
+                    ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                    : "text-muted-foreground bg-secondary"
+                }
+                size="xs"
+                onClick={() => setGroup(name, group != undefined)}
+                onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
+                onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
+              >
+                {getIconForGroup(config.icon)}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent className="capitalize" side="right">
+              {name}
+            </TooltipContent>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

web/src/components/filter/ReviewFilterGroup.tsx

@@ -2,7 +2,7 @@ import { LuCheck, LuVideo } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
-import { FrigateConfig } from "@/types/frigateConfig";
+import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useMemo, useState } from "react";
 import {
   DropdownMenu,
@@ -16,6 +16,8 @@ import { ReviewFilter } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
+import { getIconTypeForGroup } from "@/utils/iconUtil";
+import { IconType } from "react-icons";
 
 const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 
@@ -57,6 +59,16 @@ export default function ReviewFilterGroup({
     [config, allLabels],
   );
 
+  const groups = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    return Object.entries(config.camera_groups).sort(
+      (a, b) => a[1].order - b[1].order,
+    );
+  }, [config]);
+
   // handle updating filters
 
   const onUpdateSelectedDay = useCallback(
@@ -74,6 +86,7 @@ export default function ReviewFilterGroup({
     <div>
       <CamerasFilterButton
         allCameras={filterValues.cameras}
+        groups={groups}
         selectedCameras={filter?.cameras}
         updateCameraFilter={(newCameras) => {
           onUpdateFilter({ ...filter, cameras: newCameras });
@@ -102,11 +115,13 @@ export default function ReviewFilterGroup({
 
 type CameraFilterButtonProps = {
   allCameras: string[];
+  groups: [string, CameraGroupConfig][];
   selectedCameras: string[] | undefined;
   updateCameraFilter: (cameras: string[] | undefined) => void;
 };
 function CamerasFilterButton({
   allCameras,
+  groups,
   selectedCameras,
   updateCameraFilter,
 }: CameraFilterButtonProps) {
@@ -144,6 +159,24 @@ function CamerasFilterButton({
             }
           }}
         />
+        {groups.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            {groups.map(([name, conf]) => {
+              return (
+                <FilterCheckBox
+                  key={name}
+                  label={name}
+                  CheckIcon={getIconTypeForGroup(conf.icon)}
+                  isChecked
+                  onCheckedChange={() => {
+                    setCurrentCameras([...conf.cameras]);
+                  }}
+                />
+              );
+            })}
+          </>
+        )}
         <DropdownMenuSeparator />
         {allCameras.map((item) => (
           <FilterCheckBox
@@ -350,12 +383,14 @@ function LabelsFilterButton({
 
 type FilterCheckBoxProps = {
   label: string;
+  CheckIcon?: IconType;
   isChecked: boolean;
   onCheckedChange: (isChecked: boolean) => void;
 };
 
 function FilterCheckBox({
   label,
+  CheckIcon = LuCheck,
   isChecked,
   onCheckedChange,
 }: FilterCheckBoxProps) {
@@ -366,7 +401,7 @@ function FilterCheckBox({
       onClick={() => onCheckedChange(!isChecked)}
     >
       {isChecked ? (
-        <LuCheck className="w-6 h-6" />
+        <CheckIcon className="w-6 h-6" />
       ) : (
         <div className="w-6 h-6" />
       )}

web/src/components/navigation/NavItem.tsx

@@ -6,9 +6,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { CameraGroupSelector } from "../filter/CameraGroupSelector";
 
 const variants = {
   primary: {
@@ -43,24 +44,50 @@ export default function NavItem({
   const shouldRender = dev ? ENV !== "production" : true;
 
   const [showTooltip, setShowTooltip] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+  const showTooltipTimer = useCallback(
+    (showTooltip: boolean) => {
+      if (!showTooltip) {
+        setShowTooltip(showTooltip);
+
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      } else {
+        setTimeoutId(setTimeout(() => setShowTooltip(showTooltip), 500));
+      }
+    },
+    [timeoutId],
+  );
 
   return (
     shouldRender && (
       <Tooltip open={isDesktop && showTooltip}>
         <NavLink
           to={url}
           onClick={onClick}
-          className={({ isActive }) =>
-            `${className} flex flex-col justify-center items-center rounded-lg ${
-              variants[variant][isActive ? "active" : "inactive"]
-            }`
-          }
-          onMouseEnter={() => (isDesktop ? setShowTooltip(true) : null)}
-          onMouseLeave={() => (isDesktop ? setShowTooltip(false) : null)}
+          className={`${className} flex flex-col justify-center items-center rounded-lg`}
         >
-          <TooltipTrigger>
-            <Icon className="size-5 md:m-[6px]" />
-          </TooltipTrigger>
+          {({ isActive }) => (
+            <>
+              <TooltipTrigger
+                className={`rounded-lg ${variants[variant][isActive ? "active" : "inactive"]}`}
+              >
+                <Icon
+                  className="size-5 md:m-[6px]"
+                  onMouseEnter={() =>
+                    isDesktop ? showTooltipTimer(true) : null
+                  }
+                  onMouseLeave={() =>
+                    isDesktop ? showTooltipTimer(false) : null
+                  }
+                />
+              </TooltipTrigger>
+              {isDesktop && title == "Live" && isActive && (
+                <CameraGroupSelector className="mt-2" />
+              )}
+            </>
+          )}
         </NavLink>
         <TooltipPortal>
           <TooltipContent side="right">

web/src/components/navigation/Sidebar.tsx

@@ -11,7 +11,7 @@ function Sidebar() {
         <Logo className="w-8 h-8 mb-6" />
         {navbarLinks.map((item) => (
           <NavItem
-            className="mx-[10px] mb-6"
+            className="mx-[10px] mb-4"
             key={item.id}
             Icon={item.icon}
             title={item.title}

web/src/components/ui/button.tsx

@@ -22,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
-        xs: "h-6 rounded-md",
+        xs: "size-6 rounded-md",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",

web/src/hooks/use-overlay-state.tsx

@@ -1,22 +1,28 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
-export default function useOverlayState(key: string) {
+export default function useOverlayState(
+  key: string,
+): [string | undefined, (value: string, replace?: boolean) => void] {
   const location = useLocation();
   const navigate = useNavigate();
   const currentLocationState = location.state;
 
   const setOverlayStateValue = useCallback(
-    (value: string) => {
+    (value: string, replace: boolean = false) => {
       const newLocationState = { ...currentLocationState };
       newLocationState[key] = value;
-      navigate(location.pathname, { state: newLocationState });
+      navigate(location.pathname, { state: newLocationState, replace });
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [key, navigate],
   );
 
-  const overlayStateValue = location.state && location.state[key];
+  const overlayStateValue = useMemo<string | undefined>(
+    () => location.state && location.state[key],
+    [location, key],
+  );
+
   return [overlayStateValue, setOverlayStateValue];
 }

web/src/pages/Live.tsx

@@ -7,17 +7,26 @@ import useSWR from "swr";
 
 function Live() {
   const { data: config } = useSWR<FrigateConfig>("config");
+
   const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
+  const [cameraGroup] = useOverlayState("cameraGroup");
 
   const cameras = useMemo(() => {
     if (!config) {
       return [];
     }
 
+    if (cameraGroup) {
+      const group = config.camera_groups[cameraGroup];
+      return Object.values(config.cameras)
+        .filter((conf) => conf.enabled && group.cameras.includes(conf.name))
+        .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
+    }
+
     return Object.values(config.cameras)
       .filter((conf) => conf.ui.dashboard && conf.enabled)
       .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
-  }, [config]);
+  }, [config, cameraGroup]);
 
   const selectedCamera = useMemo(
     () => cameras.find((cam) => cam.name == selectedCameraName),