Camera groups (#10223)

* Add camera group config * Add saving of camera group selection * Implement camera groups in config and live view * Fix warnings * Add tooltips to camera group items on desktop * Add camera groups to the filters for events * Fix tooltips and group selection * Cleanup
2024-03-04 16:18:30 -07:00
parent 38e76666e7
commit b4b2162ada
11 changed files with 247 additions and 40 deletions
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/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>
+  );
+}
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/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" />
      )}
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -6,7 +6,6 @@ import {
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";

@@ -42,32 +41,36 @@ export default function NavItem({
 }: NavItemProps) {
  const shouldRender = dev ? ENV !== "production" : true;

-  const [showTooltip, setShowTooltip] = useState(false);
+  if (!shouldRender) {
+    return;
+  }

-  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)}
-        >
-          <TooltipTrigger>
-            <Icon className="size-5 md:m-[6px]" />
-          </TooltipTrigger>
-        </NavLink>
+  const content = (
+    <NavLink
+      to={url}
+      onClick={onClick}
+      className={({ isActive }) =>
+        `${className} flex flex-col justify-center items-center rounded-lg ${
+          variants[variant][isActive ? "active" : "inactive"]
+        }`
+      }
+    >
+      <Icon className="size-5 md:m-[6px]" />
+    </NavLink>
+  );
+
+  if (isDesktop) {
+    return (
+      <Tooltip>
+        <TooltipTrigger>{content}</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent side="right">
            <p>{title}</p>
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
-    )
-  );
+    );
+  }
+
+  return content;
 }
--- a/web/src/components/navigation/Sidebar.tsx
+++ b/web/src/components/navigation/Sidebar.tsx
@@ -2,22 +2,30 @@ import Logo from "../Logo";
 import { navbarLinks } from "@/pages/site-navigation";
 import SettingsNavItems from "../settings/SettingsNavItems";
 import NavItem from "./NavItem";
+import { CameraGroupSelector } from "../filter/CameraGroupSelector";
+import { useLocation } from "react-router-dom";

 function Sidebar() {
+  const location = useLocation();
+
  return (
    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary border-r border-secondary-highlight">
      <span tabIndex={0} className="sr-only" />
      <div className="w-full flex flex-col gap-0 items-center">
        <Logo className="w-8 h-8 mb-6" />
        {navbarLinks.map((item) => (
-          <NavItem
-            className="mx-[10px] mb-6"
-            key={item.id}
-            Icon={item.icon}
-            title={item.title}
-            url={item.url}
-            dev={item.dev}
-          />
+          <div key={item.id}>
+            <NavItem
+              className={`mx-[10px] ${item.id == 1 ? "mb-2" : "mb-4"}`}
+              Icon={item.icon}
+              title={item.title}
+              url={item.url}
+              dev={item.dev}
+            />
+            {item.id == 1 && item.url == location.pathname && (
+              <CameraGroupSelector className="mb-4" />
+            )}
+          </div>
        ))}
      </div>
      <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />
--- a/web/src/components/ui/button.tsx
+++ b/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",