From d0aefc21215b7e5077ca259c3d756ee1390c4a02 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:19:31 -0500
Subject: [PATCH 01/56] Camera group dialog changes and fixes (#11117)

* camera group dialog changes and fixes

* use drawer on mobile

* spacing
---
 .../components/filter/CameraGroupSelector.tsx | 757 ++++++++++++------
 web/src/components/settings/ZoneEditPane.tsx  |   8 -
 web/src/pages/Live.tsx                        |  15 +-
 web/src/views/live/LiveDashboardView.tsx      |   4 +-
 4 files changed, 550 insertions(+), 234 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index c147ab638..f410e8e8a 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -3,7 +3,7 @@ import {
   FrigateConfig,
   GROUP_ICONS,
 } from "@/types/frigateConfig";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import useSWR from "swr";
 import { MdHome } from "react-icons/md";
 import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
@@ -11,19 +11,54 @@ import { Button } from "../ui/button";
 import { useCallback, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { getIconForGroup } from "@/utils/iconUtil";
-import { LuPencil, LuPlus, LuTrash } from "react-icons/lu";
+import { LuPencil, LuPlus } from "react-icons/lu";
 import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
+import { Drawer, DrawerContent } from "../ui/drawer";
 import { Input } from "../ui/input";
+import { Separator } from "../ui/separator";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
 import axios from "axios";
 import FilterSwitch from "./FilterSwitch";
+import { HiOutlineDotsVertical, HiTrash } from "react-icons/hi";
+import IconWrapper from "../ui/icon-wrapper";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Toaster } from "@/components/ui/sonner";
+import { toast } from "sonner";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -71,70 +106,79 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
 
   const [addGroup, setAddGroup] = useState(false);
 
+  const Scroller = isMobile ? ScrollArea : "div";
+
   return (
-    <div
-      className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : ""}`}
-    >
+    <>
       <NewGroupDialog
         open={addGroup}
         setOpen={setAddGroup}
         currentGroups={groups}
+        activeGroup={group}
+        setGroup={setGroup}
       />
-
-      <Tooltip open={tooltip == "default"}>
-        <TooltipTrigger asChild>
-          <Button
-            className={
-              group == "default"
-                ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                : "text-secondary-foreground bg-secondary focus:text-secondary-foreground focus:bg-secondary"
-            }
-            size="xs"
-            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">
-          All Cameras
-        </TooltipContent>
-      </Tooltip>
-      {groups.map(([name, config]) => {
-        return (
-          <Tooltip key={name} open={tooltip == name}>
+      <Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
+        <div
+          className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : "whitespace-nowrap"}`}
+        >
+          <Tooltip open={tooltip == "default"}>
             <TooltipTrigger asChild>
               <Button
                 className={
-                  group == name
+                  group == "default"
                     ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                    : "text-secondary-foreground bg-secondary"
+                    : "text-secondary-foreground bg-secondary focus:text-secondary-foreground focus:bg-secondary"
                 }
                 size="xs"
-                onClick={() => setGroup(name, group != "default")}
-                onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
+                onClick={() => (group ? setGroup("default", true) : null)}
+                onMouseEnter={() => (isDesktop ? showTooltip("default") : null)}
                 onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
               >
-                {getIconForGroup(config.icon)}
+                <MdHome className="size-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent className="capitalize" side="right">
-              {name}
+              All Cameras
             </TooltipContent>
           </Tooltip>
-        );
-      })}
-      {isDesktop && (
-        <Button
-          className="text-muted-foreground bg-secondary"
-          size="xs"
-          onClick={() => setAddGroup(true)}
-        >
-          <LuPlus className="size-4 text-primary" />
-        </Button>
-      )}
-    </div>
+          {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-secondary-foreground bg-secondary"
+                    }
+                    size="xs"
+                    onClick={() => setGroup(name, group != "default")}
+                    onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
+                    onMouseLeave={() =>
+                      isDesktop ? showTooltip(undefined) : null
+                    }
+                  >
+                    {getIconForGroup(config.icon)}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="capitalize" side="right">
+                  {name}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+
+          <Button
+            className="text-muted-foreground bg-secondary"
+            size="xs"
+            onClick={() => setAddGroup(true)}
+          >
+            <LuPlus className="size-4 text-primary" />
+          </Button>
+          {isMobile && <ScrollBar orientation="horizontal" className="h-0" />}
+        </div>
+      </Scroller>
+    </>
   );
 }
 
@@ -142,195 +186,462 @@ type NewGroupDialogProps = {
   open: boolean;
   setOpen: (open: boolean) => void;
   currentGroups: [string, CameraGroupConfig][];
+  activeGroup?: string;
+  setGroup: (value: string | undefined, replace?: boolean | undefined) => void;
 };
-function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
+function NewGroupDialog({
+  open,
+  setOpen,
+  currentGroups,
+  activeGroup,
+  setGroup,
+}: NewGroupDialogProps) {
+  const { mutate: updateConfig } = useSWR<FrigateConfig>("config");
+
+  // editing group and state
+
+  const [editingGroupName, setEditingGroupName] = useState("");
+
+  const editingGroup = useMemo(() => {
+    if (currentGroups && editingGroupName !== undefined) {
+      return currentGroups.find(
+        ([groupName]) => groupName === editingGroupName,
+      );
+    } else {
+      return undefined;
+    }
+  }, [currentGroups, editingGroupName]);
+
+  const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // callbacks
+
+  const onDeleteGroup = useCallback(
+    async (name: string) => {
+      // TODO: reset order on groups when deleting
+
+      await axios
+        .put(`config/set?camera_groups.${name}`, { requires_restart: 0 })
+        .then((res) => {
+          if (res.status === 200) {
+            if (activeGroup == name) {
+              // deleting current group
+              setGroup("default");
+            }
+            updateConfig();
+          } else {
+            setOpen(false);
+            setEditState("none");
+            toast.error(`Failed to save config changes: ${res.statusText}`, {
+              position: "top-center",
+            });
+          }
+        })
+        .catch((error) => {
+          setOpen(false);
+          setEditState("none");
+          toast.error(
+            `Failed to save config changes: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    },
+    [updateConfig, activeGroup, setGroup, setOpen],
+  );
+
+  const onSave = () => {
+    setOpen(false);
+    setEditState("none");
+  };
+
+  const onCancel = () => {
+    setEditingGroupName("");
+    setEditState("none");
+  };
+
+  const onEditGroup = useCallback((group: [string, CameraGroupConfig]) => {
+    setEditingGroupName(group[0]);
+    setEditState("edit");
+  }, []);
+
+  const Overlay = isDesktop ? Dialog : Drawer;
+  const Content = isDesktop ? DialogContent : DrawerContent;
+
+  return (
+    <>
+      <Toaster className="toaster group z-[100]" position="top-center" />
+      <Overlay
+        open={open}
+        onOpenChange={(open) => {
+          setEditState("none");
+          setOpen(open);
+        }}
+      >
+        <Content
+          className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-auto"}`}
+        >
+          <div className="flex flex-col my-4 overflow-y-auto">
+            {editState === "none" && (
+              <>
+                <div className="flex flex-row justify-between items-center py-2">
+                  <DialogTitle>Camera Groups</DialogTitle>
+                  <Button
+                    variant="secondary"
+                    className="size-6 p-1 rounded-md text-background bg-secondary-foreground"
+                    onClick={() => {
+                      setEditState("add");
+                    }}
+                  >
+                    <LuPlus />
+                  </Button>
+                </div>
+                {currentGroups.map((group) => (
+                  <CameraGroupRow
+                    key={group[0]}
+                    group={group}
+                    onDeleteGroup={() => onDeleteGroup(group[0])}
+                    onEditGroup={() => onEditGroup(group)}
+                  />
+                ))}
+              </>
+            )}
+
+            {editState != "none" && (
+              <>
+                <div className="flex flex-row justify-between items-center mb-3">
+                  <DialogTitle>
+                    {editState == "add" ? "Add" : "Edit"} Camera Group
+                  </DialogTitle>
+                </div>
+                <CameraGroupEdit
+                  currentGroups={currentGroups}
+                  editingGroup={editingGroup}
+                  isLoading={isLoading}
+                  setIsLoading={setIsLoading}
+                  onSave={onSave}
+                  onCancel={onCancel}
+                />
+              </>
+            )}
+          </div>
+        </Content>
+      </Overlay>
+    </>
+  );
+}
+
+type CameraGroupRowProps = {
+  group: [string, CameraGroupConfig];
+  onDeleteGroup: () => void;
+  onEditGroup: () => void;
+};
+
+export function CameraGroupRow({
+  group,
+  onDeleteGroup,
+  onEditGroup,
+}: CameraGroupRowProps) {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  if (!group) {
+    return;
+  }
+
+  return (
+    <>
+      <div
+        key={group[0]}
+        className="flex md:p-1 rounded-lg flex-row items-center justify-between md:mx-2 my-1.5 transition-background duration-100"
+      >
+        <div className={`flex items-center`}>
+          <p className="cursor-default">{group[0]}</p>
+        </div>
+        <AlertDialog
+          open={deleteDialogOpen}
+          onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogDescription>
+              Are you sure you want to delete the camera group{" "}
+              <em>{group[0]}</em>?
+            </AlertDialogDescription>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={onDeleteGroup}>
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {isMobile && (
+          <>
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <HiOutlineDotsVertical className="size-5" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem onClick={onEditGroup}>Edit</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        )}
+        {!isMobile && (
+          <div className="flex flex-row gap-2 items-center">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <IconWrapper
+                  icon={LuPencil}
+                  className={`size-[15px] cursor-pointer`}
+                  onClick={onEditGroup}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Edit</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <IconWrapper
+                  icon={HiTrash}
+                  className={`size-[15px] cursor-pointer`}
+                  onClick={() => setDeleteDialogOpen(true)}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Delete</TooltipContent>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+type CameraGroupEditProps = {
+  currentGroups: [string, CameraGroupConfig][];
+  editingGroup?: [string, CameraGroupConfig];
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  onSave?: () => void;
+  onCancel?: () => void;
+};
+
+export function CameraGroupEdit({
+  currentGroups,
+  editingGroup,
+  isLoading,
+  setIsLoading,
+  onSave,
+  onCancel,
+}: CameraGroupEditProps) {
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
 
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
-  // add fields
+  const formSchema = z.object({
+    name: z
+      .string()
+      .min(2, {
+        message: "Camera group name must be at least 2 characters.",
+      })
+      .transform((val: string) => val.trim().replace(/\s+/g, "_"))
+      .refine(
+        (value: string) => {
+          return (
+            editingGroup !== undefined ||
+            !currentGroups.map((group) => group[0]).includes(value)
+          );
+        },
+        {
+          message: "Camera group name already exists.",
+        },
+      ),
+    cameras: z.array(z.string()).min(2, {
+      message: "You must select at least two cameras.",
+    }),
+    icon: z.string(),
+  });
 
-  const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
-  const [newTitle, setNewTitle] = useState("");
-  const [icon, setIcon] = useState("");
-  const [cameras, setCameras] = useState<string[]>([]);
-
-  // validation
-
-  const [error, setError] = useState("");
-
-  const onCreateGroup = useCallback(async () => {
-    if (!newTitle) {
-      setError("A title must be selected");
-      return;
-    }
-
-    if (!icon) {
-      setError("An icon must be selected");
-      return;
-    }
-
-    if (!cameras || cameras.length < 2) {
-      setError("At least 2 cameras must be selected");
-      return;
-    }
-
-    setError("");
-    const orderQuery = `camera_groups.${newTitle}.order=${currentGroups.length}`;
-    const iconQuery = `camera_groups.${newTitle}.icon=${icon}`;
-    const cameraQueries = cameras
-      .map((cam) => `&camera_groups.${newTitle}.cameras=${cam}`)
-      .join("");
-
-    const req = axios.put(
-      `config/set?${orderQuery}&${iconQuery}${cameraQueries}`,
-      { requires_restart: 0 },
-    );
-
-    setOpen(false);
-
-    if ((await req).status == 200) {
-      setNewTitle("");
-      setIcon("");
-      setCameras([]);
-      updateConfig();
-    }
-  }, [currentGroups, cameras, newTitle, icon, setOpen, updateConfig]);
-
-  const onDeleteGroup = useCallback(
-    async (name: string) => {
-      const req = axios.put(`config/set?camera_groups.${name}`, {
-        requires_restart: 0,
-      });
-
-      if ((await req).status == 200) {
-        updateConfig();
+  const onSubmit = useCallback(
+    async (values: z.infer<typeof formSchema>) => {
+      if (!values) {
+        return;
       }
+
+      setIsLoading(true);
+
+      const order =
+        editingGroup === undefined
+          ? currentGroups.length + 1
+          : editingGroup[1].order;
+
+      const orderQuery = `camera_groups.${values.name}.order=${order}`;
+      const iconQuery = `camera_groups.${values.name}.icon=${values.icon}`;
+      const cameraQueries = values.cameras
+        .map((cam) => `&camera_groups.${values.name}.cameras=${cam}`)
+        .join("");
+
+      axios
+        .put(`config/set?${orderQuery}&${iconQuery}${cameraQueries}`, {
+          requires_restart: 0,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            toast.success(`Camera group (${values.name}) has been saved.`, {
+              position: "top-center",
+            });
+            updateConfig();
+            if (onSave) {
+              onSave();
+            }
+          } else {
+            toast.error(`Failed to save config changes: ${res.statusText}`, {
+              position: "top-center",
+            });
+          }
+        })
+        .catch((error) => {
+          toast.error(
+            `Failed to save config changes: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
     },
-    [updateConfig],
+    [currentGroups, setIsLoading, onSave, updateConfig, editingGroup],
   );
 
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+    defaultValues: {
+      name: (editingGroup && editingGroup[0]) ?? "",
+      icon: editingGroup && editingGroup[1].icon,
+      cameras: editingGroup && editingGroup[1].cameras,
+    },
+  });
+
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(open) => {
-        setEditState("none");
-        setNewTitle("");
-        setIcon("");
-        setCameras([]);
-        setOpen(open);
-      }}
-    >
-      <DialogContent className="min-w-0 w-96">
-        <DialogTitle>Camera Groups</DialogTitle>
-        {currentGroups.map((group) => (
-          <div key={group[0]} className="flex justify-between items-center">
-            {group[0]}
-            <div className="flex justify-center gap-1">
-              <Button
-                className="bg-transparent"
-                size="icon"
-                onClick={() => {
-                  setNewTitle(group[0]);
-                  setIcon(group[1].icon);
-                  setCameras(group[1].cameras);
-                  setEditState("edit");
-                }}
-              >
-                <LuPencil />
-              </Button>
-              <Button
-                className="text-destructive bg-transparent"
-                size="icon"
-                onClick={() => onDeleteGroup(group[0])}
-              >
-                <LuTrash />
-              </Button>
-            </div>
-          </div>
-        ))}
-        {currentGroups.length > 0 && <DropdownMenuSeparator />}
-        {editState == "none" && (
-          <Button
-            className="text-primary justify-start"
-            variant="ghost"
-            onClick={() => setEditState("add")}
-          >
-            <LuPlus className="size-4 mr-1" />
-            Create new group
-          </Button>
-        )}
-        {editState != "none" && (
-          <>
-            <Input
-              type="text"
-              placeholder="Name"
-              disabled={editState == "edit"}
-              value={newTitle}
-              onChange={(e) => setNewTitle(e.target.value)}
-            />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <div className="flex justify-start gap-2 items-center cursor-pointer">
-                  {icon.length == 0 ? "Select Icon" : "Icon: "}
-                  {icon ? getIconForGroup(icon) : <div className="size-4" />}
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuRadioGroup value={icon} onValueChange={setIcon}>
-                  {GROUP_ICONS.map((gIcon) => (
-                    <DropdownMenuRadioItem
-                      key={gIcon}
-                      className="w-full flex justify-start items-center gap-2 cursor-pointer hover:bg-secondary"
-                      value={gIcon}
-                    >
-                      {getIconForGroup(gIcon)}
-                      {gIcon}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <div className="flex justify-start gap-2 items-center cursor-pointer">
-                  {cameras.length == 0
-                    ? "Select Cameras"
-                    : `${cameras.length} Cameras`}
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                {[
-                  ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
-                  ...Object.keys(config?.cameras ?? {}),
-                ].map((camera) => (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="mt-2 space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input
+                  className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                  placeholder="Enter a name..."
+                  disabled={editingGroup !== undefined}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Separator className="flex my-2 bg-secondary" />
+        <FormField
+          control={form.control}
+          name="cameras"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Cameras</FormLabel>
+              <FormDescription>Select cameras for this group.</FormDescription>
+              {[
+                ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
+                ...Object.keys(config?.cameras ?? {}),
+              ].map((camera) => (
+                <FormControl key={camera}>
                   <FilterSwitch
-                    key={camera}
-                    isChecked={cameras.includes(camera)}
+                    isChecked={field.value && field.value.includes(camera)}
                     label={camera.replaceAll("_", " ")}
                     onCheckedChange={(checked) => {
-                      if (checked) {
-                        setCameras([...cameras, camera]);
-                      } else {
-                        const index = cameras.indexOf(camera);
-                        setCameras([
-                          ...cameras.slice(0, index),
-                          ...cameras.slice(index + 1),
-                        ]);
-                      }
+                      const updatedCameras = checked
+                        ? [...(field.value || []), camera]
+                        : (field.value || []).filter((c) => c !== camera);
+                      form.setValue("cameras", updatedCameras);
                     }}
                   />
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-            {error && <div className="text-danger">{error}</div>}
-            <Button variant="select" onClick={onCreateGroup}>
-              Submit
-            </Button>
-          </>
-        )}
-      </DialogContent>
-    </Dialog>
+                </FormControl>
+              ))}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Separator className="flex my-2 bg-secondary" />
+        <FormField
+          control={form.control}
+          name="icon"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel>Icon</FormLabel>
+              <FormControl>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select an icon" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {GROUP_ICONS.map((gIcon) => (
+                      <SelectItem key={gIcon} value={gIcon}>
+                        <div className="flex flex-row justify-start items-center gap-2">
+                          <div className="size-4">{getIconForGroup(gIcon)}</div>
+                          {gIcon}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Separator className="flex my-2 bg-secondary" />
+
+        <div className="flex flex-row gap-2 pt-5">
+          <Button className="flex flex-1" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            variant="select"
+            disabled={isLoading}
+            className="flex flex-1"
+            type="submit"
+          >
+            {isLoading ? (
+              <div className="flex flex-row items-center gap-2">
+                <ActivityIndicator />
+                <span>Saving...</span>
+              </div>
+            ) : (
+              "Save"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 }
diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx
index 803d172d8..f72cc3907 100644
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@@ -551,14 +551,6 @@ export function ZoneObjectSelector({
 
     const labels = new Set<string>();
 
-    // Object.values(config.cameras).forEach((camera) => {
-    //   camera.objects.track.forEach((label) => {
-    //     if (!ATTRIBUTE_LABELS.includes(label)) {
-    //       labels.add(label);
-    //     }
-    //   });
-    // });
-
     cameraConfig.objects.track.forEach((label) => {
       if (!ATTRIBUTE_LABELS.includes(label)) {
         labels.add(label);
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 4be6b2c16..387aa3856 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -38,7 +38,13 @@ function Live() {
   // settings
 
   const includesBirdseye = useMemo(() => {
-    if (config && cameraGroup && cameraGroup != "default") {
+    if (
+      config &&
+      Object.keys(config.camera_groups).length &&
+      cameraGroup &&
+      config.camera_groups[cameraGroup] &&
+      cameraGroup != "default"
+    ) {
       return config.camera_groups[cameraGroup].cameras.includes("birdseye");
     } else {
       return false;
@@ -50,7 +56,12 @@ function Live() {
       return [];
     }
 
-    if (cameraGroup && cameraGroup != "default") {
+    if (
+      Object.keys(config.camera_groups).length &&
+      cameraGroup &&
+      config.camera_groups[cameraGroup] &&
+      cameraGroup != "default"
+    ) {
       const group = config.camera_groups[cameraGroup];
       return Object.values(config.cameras)
         .filter((conf) => conf.enabled && group.cameras.includes(conf.name))
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 3c186656a..31be2dce1 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -144,7 +144,9 @@ export default function LiveDashboardView({
       {isMobile && (
         <div className="h-11 relative flex items-center justify-between">
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
-          <CameraGroupSelector />
+          <div className="max-w-[45%]">
+            <CameraGroupSelector />
+          </div>
           <div className="flex items-center gap-1">
             <Button
               className={`p-1 ${

From ab032aa0045468a43841cd2c1b67dbc717b8f501 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 26 Apr 2024 15:30:57 -0500
Subject: [PATCH 02/56] sane colors for themes (#11126)

---
 web/themes/theme-blue.css    |  39 ++++++++----
 web/themes/theme-default.css |   2 -
 web/themes/theme-gold.css    | 116 +++++++++++++++++------------------
 web/themes/theme-green.css   |  43 ++++++++-----
 web/themes/theme-nature.css  | 116 +++++++++++++++++------------------
 web/themes/theme-netflix.css | 116 +++++++++++++++++------------------
 web/themes/theme-nord.css    | 116 +++++++++++++++++------------------
 web/themes/theme-orange.css  |  49 +++++++++------
 web/themes/theme-red.css     |  19 +++++-
 9 files changed, 329 insertions(+), 287 deletions(-)

diff --git a/web/themes/theme-blue.css b/web/themes/theme-blue.css
index e07ac2c30..0a18600c7 100644
--- a/web/themes/theme-blue.css
+++ b/web/themes/theme-blue.css
@@ -1,46 +1,59 @@
 @layer base {
   .theme-blue.light {
-    --background: 0 0% 100%;
+    --background: 222.2 50% 98%;
+    --background-alt: 210 30% 96%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
+    --popover: 222 50% 97%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
+    --primary: 221.2 33.2% 53.3%;
+    --primary-variant: 221.2 83.2% 43.3%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 90.1%;
+    --secondary-foreground: 222.2 47.4% 61.2%;
+    --secondary-highlight: 210 40% 94%;
     --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --muted-foreground: 215.4 46.3% 46.9%;
+    --accent: 210 40% 80.1%;
+    --accent-foreground: 222.2 47.4% 57.2%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
+    --warning: 32 100% 50%;
+    --warning-foreground: 0 0% 0%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
-    --radius: 0.5rem;
+    --selected: 217.2 61.2% 59.8%;
+    --selected-foreground: 221 50% 100%;
   }
 
   .theme-blue.dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222.2 84% 8.9%;
+    --background-alt: 221.2 63.2% 13.3%;
     --foreground: 210 40% 98%;
     --card: 217.2 32.6% 17.5%;
     --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
+    --popover: 222.2 54% 18.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
+    --primary: 217.2 91.2% 79.8%;
+    --primary-variant: 217.2 91.2% 49.8%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary-foreground: 210 60% 78%;
+    --secondary-highlight: 217.2 32.6% 25.5%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
+    --warning: 32 100% 50%;
+    --warning-foreground: 0 0% 0%;
     --border: 217.2 36.6% 12.5%;
     --input: 217.2 38.6% 29.5%;
     --ring: 224.3 76.3% 48%;
+    --selected: 217.2 62.6% 59.8%;
+    --selected-foreground: 222.2 47.4% 11.2%;
   }
 }
diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
index 3d2619c72..804b2f9f2 100644
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@@ -78,8 +78,6 @@
     --selected-foreground: hsl(0 0% 100%);
     --selected-foreground: 0 0% 100%;
 
-    --radius: 0.5rem;
-
     --severity_alert: var(--red-800);
     --severity_alert_dimmed: var(--red-500);
 
diff --git a/web/themes/theme-gold.css b/web/themes/theme-gold.css
index 4b9ddaaf4..a4a0b33ba 100644
--- a/web/themes/theme-gold.css
+++ b/web/themes/theme-gold.css
@@ -1,61 +1,59 @@
-.theme-gold.light {
-  --background: 38, 77%, 88%;
-  --foreground: 16, 43%, 34%;
+@layer base {
+  .theme-gold.light {
+    --background: 38 77% 88%;
+    --background-alt: 39 100% 85%;
+    --foreground: 16 43% 34%;
+    --muted: 28 46% 56%;
+    --muted-foreground: 16 43% 34%;
+    --popover: 38 77% 88%;
+    --popover-foreground: 16 43% 34%;
+    --border: 28 46% 56%;
+    --input: 28 46% 56%;
+    --card: 38 77% 88%;
+    --card-foreground: 16 43% 34%;
+    --primary: 28 46% 56%;
+    --primary-variant: 28 46% 46%;
+    --primary-foreground: 60 70% 90%;
+    --secondary: 39 100% 73%;
+    --secondary-foreground: 16 43% 34%;
+    --secondary-highlight: 39 100% 80%;
+    --accent: 39 100% 73%;
+    --accent-foreground: 16 43% 34%;
+    --destructive: 16 43% 34%;
+    --destructive-foreground: 38 77% 88%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 16 43% 34%;
+    --ring: 28 46% 56%;
+    --selected: 39 100% 73%;
+    --selected-foreground: 16 43% 34%;
+  }
 
-  --muted: 28, 46%, 56%;
-  --muted-foreground: 16, 43%, 34%;
-
-  --popover: 38, 77%, 88%;
-  --popover-foreground: 16, 43%, 34%;
-
-  --border: 28, 46%, 56%;
-  --input: 28, 46%, 56%;
-
-  --card: 38, 77%, 88%;
-  --card-foreground: 16, 43%, 34%;
-
-  --primary: 28, 46%, 56%;
-  --primary-foreground: 60, 70%, 90%;
-
-  --secondary: 39, 100%, 73%;
-  --secondary-foreground: 16, 43%, 34%;
-
-  --accent: 39, 100%, 73%;
-  --accent-foreground: 16, 43%, 34%;
-
-  --destructive: 16, 43%, 34%;
-  --destructive-foreground: 38, 77%, 88%;
-
-  --ring: 28, 46%, 56%;
-}
-
-.theme-gold.dark {
-  --background: 16, 43%, 34%;
-  --foreground: 38, 77%, 88%;
-
-  --muted: 28, 46%, 56%;
-  --muted-foreground: 38, 77%, 88%;
-
-  --popover: 16, 43%, 34%;
-  --popover-foreground: 38, 77%, 88%;
-
-  --border: 28, 46%, 56%;
-  --input: 28, 46%, 56%;
-
-  --card: 16, 43%, 34%;
-  --card-foreground: 38, 77%, 88%;
-
-  --primary: 28, 46%, 56%;
-  --primary-foreground: 60, 70%, 90%;
-
-  --secondary: 39, 100%, 73%;
-  --secondary-foreground: 16, 43%, 34%;
-
-  --accent: 39, 100%, 52%;
-  --accent-foreground: 16, 43%, 34%;
-
-  --destructive: 38, 77%, 88%;
-  --destructive-foreground: 16, 43%, 34%;
-
-  --ring: 28, 46%, 56%;
+  .theme-gold.dark {
+    --background: 28 46% 28%;
+    --background-alt: 28 46% 34%;
+    --foreground: 38 77% 88%;
+    --muted: 28 46% 56%;
+    --muted-foreground: 38 77% 88%;
+    --popover: 25 45% 34%;
+    --popover-foreground: 38 77% 88%;
+    --border: 28 46% 56%;
+    --input: 28 46% 56%;
+    --card: 16 43% 34%;
+    --card-foreground: 38 77% 88%;
+    --primary: 28 46% 50%;
+    --primary-variant: 28 46% 46%;
+    --primary-foreground: 60 70% 90%;
+    --secondary: 39 60% 63%;
+    --secondary-foreground: 28 50% 44%;
+    --secondary-highlight: 39 100% 65%;
+    --accent: 39 100% 52%;
+    --accent-foreground: 16 43% 34%;
+    --destructive: 38 77% 88%;
+    --destructive-foreground: 16 43% 34%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 16 43% 34%;
+    --ring: 28 46% 56%;
+    --selected: 39 100% 52%;
+    --selected-foreground: 16 43% 34%;
+  }
 }
diff --git a/web/themes/theme-green.css b/web/themes/theme-green.css
index 9919c00ca..f2816d953 100644
--- a/web/themes/theme-green.css
+++ b/web/themes/theme-green.css
@@ -1,46 +1,59 @@
 @layer base {
   .theme-green.light {
-    --background: 0 0% 100%;
+    --background: 145 70% 98%;
+    --background-alt: 145 70% 96%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
+    --popover: 145 20% 95%;
     --popover-foreground: 240 10% 3.9%;
     --primary: 142.1 76.2% 36.3%;
+    --primary-variant: 142.1 76.2% 26.3%;
     --primary-foreground: 355.7 100% 97.3%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
+    --secondary: 145 34.8% 85.9%;
+    --secondary-foreground: 145 35.9% 50%;
+    --secondary-highlight: 145 70% 92%;
+    --muted: 145 14.8% 75.9%;
     --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --accent: 145 34.8% 85.9%;
+    --accent-foreground: 145 15.9% 50%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 240 10% 3.9%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 142.1 76.2% 36.3%;
-    --radius: 0.5rem;
+    --selected: 142.1 76.2% 36.3%;
+    --selected-foreground: 0 0% 100%;
   }
 
   .theme-green.dark {
-    --background: 20 14.3% 4.1%;
+    --background: 145 34.3% 9.1%;
+    --background-alt: 145 30% 11%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;
     --card-foreground: 0 0% 95%;
-    --popover: 0 0% 9%;
+    --popover: 145 24% 9%;
     --popover-foreground: 0 0% 95%;
-    --primary: 142.1 70.6% 45.3%;
+    --primary: 142.1 70.6% 38.3%;
+    --primary-variant: 142.1 70.6% 35.3%;
     --primary-foreground: 144.9 80.4% 10%;
-    --secondary: 240 3.7% 15.9%;
+    --secondary: 145 13.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 12 6.5% 15.1%;
+    --secondary-highlight: 145 30% 20%;
+    --muted: 145 20% 15%;
+    --muted-foreground: 145 25% 64.9%;
+    --accent: 145 16.5% 25.1%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 0 0% 95%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 142.4 71.8% 29.2%;
+    --selected: 142.1 70.6% 45.3%;
+    --selected-foreground: 144.9 80.4% 10%;
   }
 }
diff --git a/web/themes/theme-nature.css b/web/themes/theme-nature.css
index 6fcd1be03..f7e29c512 100644
--- a/web/themes/theme-nature.css
+++ b/web/themes/theme-nature.css
@@ -1,61 +1,59 @@
-.theme-nature.light {
-  --background: 58, 65%, 83%;
-  --foreground: 187, 33%, 43%;
+@layer base {
+  .theme-nature.light {
+    --background: 70 30% 92%;
+    --background-alt: 58 45% 89%;
+    --foreground: 187 33% 43%;
+    --muted: 70 20% 68%;
+    --muted-foreground: 187 33% 43%;
+    --popover: 58 45% 83%;
+    --popover-foreground: 187 33% 43%;
+    --border: 93 28% 56%;
+    --input: 93 28% 56%;
+    --card: 58 65% 83%;
+    --card-foreground: 187 33% 43%;
+    --primary: 93 28% 56%;
+    --primary-variant: 93 28% 46%;
+    --primary-foreground: 58 65% 83%;
+    --secondary: 70 20% 78%;
+    --secondary-foreground: 187 33% 43%;
+    --secondary-highlight: 70 30% 75%;
+    --accent: 70 20% 68%;
+    --accent-foreground: 187 33% 43%;
+    --destructive: 187 33% 43%;
+    --destructive-foreground: 58 65% 83%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 187 33% 43%;
+    --ring: 93 28% 56%;
+    --selected: 70 20% 68%;
+    --selected-foreground: 187 33% 43%;
+  }
 
-  --muted: 70, 20%, 68%;
-  --muted-foreground: 187, 33%, 43%;
-
-  --popover: 58, 65%, 83%;
-  --popover-foreground: 187, 33%, 43%;
-
-  --border: 93, 28%, 56%;
-  --input: 93, 28%, 56%;
-
-  --card: 58, 65%, 83%;
-  --card-foreground: 187, 33%, 43%;
-
-  --primary: 93, 28%, 56%;
-  --primary-foreground: 58, 65%, 83%;
-
-  --secondary: 70, 20%, 68%;
-  --secondary-foreground: 187, 33%, 43%;
-
-  --accent: 70, 20%, 68%;
-  --accent-foreground: 187, 33%, 43%;
-
-  --destructive: 187, 33%, 43%;
-  --destructive-foreground: 58, 65%, 83%;
-
-  --ring: 93, 28%, 56%;
-}
-
-.theme-nature.dark {
-  --background: 187, 33%, 43%;
-  --foreground: 58, 65%, 83%;
-
-  --muted: 70, 20%, 68%;
-  --muted-foreground: 58, 65%, 83%;
-
-  --popover: 187, 33%, 43%;
-  --popover-foreground: 58, 65%, 83%;
-
-  --border: 93, 28%, 56%;
-  --input: 93, 28%, 56%;
-
-  --card: 187, 33%, 43%;
-  --card-foreground: 58, 65%, 83%;
-
-  --primary: 93, 28%, 56%;
-  --primary-foreground: 187, 33%, 43%;
-
-  --secondary: 70, 20%, 68%;
-  --secondary-foreground: 58, 65%, 83%;
-
-  --accent: 70, 20%, 68%;
-  --accent-foreground: 58, 65%, 83%;
-
-  --destructive: 58, 65%, 83%;
-  --destructive-foreground: 187, 33%, 43%;
-
-  --ring: 93, 28%, 56%;
+  .theme-nature.dark {
+    --background: 187 33% 43%;
+    --background-alt: 187 33% 33%;
+    --foreground: 58 65% 83%;
+    --muted: 70 20% 68%;
+    --muted-foreground: 58 65% 83%;
+    --popover: 187 33% 43%;
+    --popover-foreground: 58 65% 83%;
+    --border: 93 28% 56%;
+    --input: 93 28% 56%;
+    --card: 187 33% 43%;
+    --card-foreground: 58 65% 83%;
+    --primary: 93 38% 36%;
+    --primary-variant: 93 28% 46%;
+    --primary-foreground: 187 33% 43%;
+    --secondary: 70 20% 58%;
+    --secondary-foreground: 58 65% 83%;
+    --secondary-highlight: 70 30% 60%;
+    --accent: 70 20% 68%;
+    --accent-foreground: 58 65% 83%;
+    --destructive: 58 65% 83%;
+    --destructive-foreground: 187 33% 43%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 187 33% 43%;
+    --ring: 93 28% 56%;
+    --selected: 70 20% 68%;
+    --selected-foreground: 58 65% 83%;
+  }
 }
diff --git a/web/themes/theme-netflix.css b/web/themes/theme-netflix.css
index 93f8770a0..641884b45 100644
--- a/web/themes/theme-netflix.css
+++ b/web/themes/theme-netflix.css
@@ -1,61 +1,59 @@
-.theme-netflix.light {
-  --background: 0, 0%, 100%;
-  --foreground: 0, 0%, 0%;
+@layer base {
+  .theme-netflix.light {
+    --background: 0 0% 100%;
+    --background-alt: 0 0% 96%;
+    --foreground: 0 0% 0%;
+    --muted: 0 0% 68%;
+    --muted-foreground: 0 0% 0%;
+    --popover: 0 0% 95%;
+    --popover-foreground: 0 0% 0%;
+    --border: 0 68% 39%;
+    --input: 0 68% 39%;
+    --card: 0 0% 95%;
+    --card-foreground: 0 0% 0%;
+    --primary: 0 100% 44%;
+    --primary-variant: 0 100% 34%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 80%;
+    --secondary-foreground: 0 0% 100%;
+    --secondary-highlight: 0 0% 10%;
+    --accent: 0 100% 50%;
+    --accent-foreground: 0 0% 0%;
+    --destructive: 0 68% 39%;
+    --destructive-foreground: 0 0% 100%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 0 0% 0%;
+    --ring: 0 100% 44%;
+    --selected: 0 100% 44%;
+    --selected-foreground: 0 0% 100%;
+  }
 
-  --muted: 0, 0%, 68%;
-  --muted-foreground: 0, 0%, 0%;
-
-  --popover: 0, 0%, 95%;
-  --popover-foreground: 0, 0%, 0%;
-
-  --border: 0, 68%, 39%;
-  --input: 0, 68%, 39%;
-
-  --card: 0, 0%, 95%;
-  --card-foreground: 0, 0%, 0%;
-
-  --primary: 0, 100%, 44%;
-  --primary-foreground: 0, 0%, 100%;
-
-  --secondary: 0, 0%, 0%;
-  --secondary-foreground: 0, 0%, 100%;
-
-  --accent: 0, 100%, 50%;
-  --accent-foreground: 0, 0%, 0%;
-
-  --destructive: 0, 68%, 39%;
-  --destructive-foreground: 0, 0%, 100%;
-
-  --ring: 0, 100%, 44%;
-}
-
-.theme-netflix.dark {
-  --background: 0, 0%, 0%;
-  --foreground: 0, 0%, 100%;
-
-  --muted: 0, 0%, 50%;
-  --muted-foreground: 0, 0%, 100%;
-
-  --popover: 0, 0%, 5%;
-  --popover-foreground: 0, 0%, 100%;
-
-  --border: 0, 68%, 39%;
-  --input: 0, 68%, 39%;
-
-  --card: 0, 0%, 5%;
-  --card-foreground: 0, 0%, 100%;
-
-  --primary: 0, 100%, 44%;
-  --primary-foreground: 0, 0%, 0%;
-
-  --secondary: 0, 0%, 100%;
-  --secondary-foreground: 0, 0%, 0%;
-
-  --accent: 0, 100%, 50%;
-  --accent-foreground: 0, 0%, 100%;
-
-  --destructive: 0, 68%, 39%;
-  --destructive-foreground: 0, 0%, 100%;
-
-  --ring: 0, 100%, 44%;
+  .theme-netflix.dark {
+    --background: 0 0% 0%;
+    --background-alt: 0 0% 5%;
+    --foreground: 0 0% 100%;
+    --muted: 0 0% 50%;
+    --muted-foreground: 0 0% 100%;
+    --popover: 0 0% 5%;
+    --popover-foreground: 0 0% 100%;
+    --border: 0 68% 39%;
+    --input: 0 68% 39%;
+    --card: 0 0% 5%;
+    --card-foreground: 0 0% 100%;
+    --primary: 0 70% 44%;
+    --primary-variant: 0 100% 34%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 20%;
+    --secondary-foreground: 0 0% 40%;
+    --secondary-highlight: 0 0% 90%;
+    --accent: 0 100% 50%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 68% 39%;
+    --destructive-foreground: 0 0% 100%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 0 0% 0%;
+    --ring: 0 100% 44%;
+    --selected: 0 100% 44%;
+    --selected-foreground: 0 0% 0%;
+  }
 }
diff --git a/web/themes/theme-nord.css b/web/themes/theme-nord.css
index 5a5f95daf..ab8ead0e4 100644
--- a/web/themes/theme-nord.css
+++ b/web/themes/theme-nord.css
@@ -1,61 +1,59 @@
-.theme-nord.light {
-  --background: 220, 16%, 96%;
-  --foreground: 222, 20%, 16%;
+@layer base {
+  .theme-nord.light {
+    --background: 220 16% 96%;
+    --background-alt: 215 14% 92%;
+    --foreground: 222 20% 16%;
+    --muted: 215 14% 80%;
+    --muted-foreground: 222 20% 16%;
+    --popover: 220 16% 96%;
+    --popover-foreground: 222 20% 16%;
+    --border: 222 20% 70%;
+    --input: 222 20% 70%;
+    --card: 220 16% 96%;
+    --card-foreground: 222 20% 16%;
+    --primary: 222 20% 35%;
+    --primary-variant: 222 20% 60%;
+    --primary-foreground: 220 16% 96%;
+    --secondary: 215 14% 80%;
+    --secondary-foreground: 222 20% 16%;
+    --secondary-highlight: 215 14% 88%;
+    --accent: 215 14% 80%;
+    --accent-foreground: 222 20% 16%;
+    --destructive: 0 80% 50%;
+    --destructive-foreground: 222 20% 16%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 222 20% 16%;
+    --ring: 222 20% 70%;
+    --selected: 222 20% 70%;
+    --selected-foreground: 220 16% 96%;
+  }
 
-  --muted: 215, 14%, 80%;
-  --muted-foreground: 222, 20%, 16%;
-
-  --popover: 220, 16%, 96%;
-  --popover-foreground: 222, 20%, 16%;
-
-  --border: 222, 20%, 70%;
-  --input: 222, 20%, 70%;
-
-  --card: 220, 16%, 96%;
-  --card-foreground: 222, 20%, 16%;
-
-  --primary: 222, 20%, 70%;
-  --primary-foreground: 220, 16%, 96%;
-
-  --secondary: 215, 14%, 80%;
-  --secondary-foreground: 222, 20%, 16%;
-
-  --accent: 215, 14%, 80%;
-  --accent-foreground: 222, 20%, 16%;
-
-  --destructive: 0, 80%, 50%;
-  --destructive-foreground: 222, 20%, 16%;
-
-  --ring: 222, 20%, 70%;
-}
-
-.theme-nord.dark {
-  --background: 220, 16%, 16%;
-  --foreground: 222, 20%, 96%;
-
-  --muted: 215, 14%, 25%;
-  --muted-foreground: 222, 20%, 96%;
-
-  --popover: 220, 16%, 16%;
-  --popover-foreground: 222, 20%, 96%;
-
-  --border: 222, 20%, 40%;
-  --input: 222, 20%, 40%;
-
-  --card: 220, 16%, 16%;
-  --card-foreground: 222, 20%, 96%;
-
-  --primary: 222, 20%, 65%;
-  --primary-foreground: 220, 16%, 16%;
-
-  --secondary: 215, 14%, 25%;
-  --secondary-foreground: 222, 20%, 96%;
-
-  --accent: 215, 14%, 25%;
-  --accent-foreground: 222, 20%, 96%;
-
-  --destructive: 0, 80%, 50%;
-  --destructive-foreground: 222, 20%, 96%;
-
-  --ring: 222, 20%, 40%;
+  .theme-nord.dark {
+    --background: 220 16% 16%;
+    --background-alt: 215 14% 12%;
+    --foreground: 222 20% 96%;
+    --muted: 215 14% 25%;
+    --muted-foreground: 222 20% 66%;
+    --popover: 220 16% 16%;
+    --popover-foreground: 222 20% 66%;
+    --border: 222 20% 40%;
+    --input: 222 20% 40%;
+    --card: 220 16% 16%;
+    --card-foreground: 222 20% 96%;
+    --primary: 222 20% 75%;
+    --primary-variant: 222 20% 55%;
+    --primary-foreground: 220 16% 16%;
+    --secondary: 215 14% 25%;
+    --secondary-foreground: 222 20% 86%;
+    --secondary-highlight: 215 14% 35%;
+    --accent: 215 14% 25%;
+    --accent-foreground: 222 20% 96%;
+    --destructive: 0 80% 50%;
+    --destructive-foreground: 222 20% 96%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 222 20% 96%;
+    --ring: 222 20% 40%;
+    --selected: 222 20% 55%;
+    --selected-foreground: 220 16% 16%;
+  }
 }
diff --git a/web/themes/theme-orange.css b/web/themes/theme-orange.css
index 57a26182c..5e428c33a 100644
--- a/web/themes/theme-orange.css
+++ b/web/themes/theme-orange.css
@@ -1,46 +1,59 @@
 @layer base {
   .theme-orange.light {
-    --background: 0 0% 100%;
+    --background: 24 50% 98.3%;
+    --background-alt: 30 50% 96%;
     --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
     --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
+    --popover: 24 30% 95%;
+    --popover-foreground: 24 24.3% 14.1%;
+    --primary: 24.6 55% 53.1%;
+    --primary-variant: 24.6 55% 43.1%;
     --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+    --secondary: 24 54.8% 95.9%;
+    --secondary-foreground: 24 79.8% 60%;
+    --secondary-highlight: 30 50% 92%;
+    --muted: 24 4.8% 75.9%;
+    --muted-foreground: 25 25.3% 44.7%;
+    --accent: 24 14.8% 95.9%;
+    --accent-foreground: 24 14.8% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 60 9.1% 97.8%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 20 14.3% 4.1%;
     --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
+    --input: 24 25.9% 90%;
     --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
+    --selected: 24.6 85% 53.1%;
+    --selected-foreground: 60 9.1% 97.8%;
   }
 
   .theme-orange.dark {
     --background: 20 14.3% 4.1%;
+    --background-alt: 20 14.3% 9.1%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;
     --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
+    --primary: 20.5 90.2% 68.2%;
+    --primary-variant: 20.5 90.2% 58.2%;
     --primary-foreground: 60 9.1% 97.8%;
     --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
+    --secondary-foreground: 20 49.1% 57.8%;
+    --secondary-highlight: 12 6.5% 25.1%;
+    --muted: 20.5 26.5% 15.1%;
+    --muted-foreground: 20 25.4% 53.9%;
+    --accent: 20 16.5% 15.1%;
+    --accent-foreground: 20 19.1% 79.8%;
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 60 9.1% 97.8%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 60 9.1% 97.8%;
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
     --ring: 20.5 90.2% 48.2%;
+    --selected: 20.5 90.2% 38.2%;
+    --selected-foreground: 60 9.1% 97.8%;
   }
 }
diff --git a/web/themes/theme-red.css b/web/themes/theme-red.css
index d52fd4e07..f522d74b7 100644
--- a/web/themes/theme-red.css
+++ b/web/themes/theme-red.css
@@ -1,46 +1,59 @@
 @layer base {
   .theme-red.light {
     --background: 0 0% 100%;
+    --background-alt: 0 0% 98%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
     --primary: 346.8 77.2% 49.8%;
+    --primary-variant: 346.8 77.2% 39.8%;
     --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+    --secondary-foreground: 0 35.9% 50%;
+    --secondary-highlight: 0 0% 92%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 240 10% 3.9%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 346.8 77.2% 49.8%;
-    --radius: 0.5rem;
+    --selected: 346.8 77.2% 49.8%;
+    --selected-foreground: 355.7 100% 97.3%;
   }
 
   .theme-red.dark {
     --background: 20 14.3% 4.1%;
+    --background-alt: 0 0% 9%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;
     --card-foreground: 0 0% 95%;
     --popover: 0 0% 9%;
     --popover-foreground: 0 0% 95%;
-    --primary: 346.8 77.2% 49.8%;
+    --primary: 0 37.2% 90.8%;
+    --primary-variant: 346.8 77.2% 39.8%;
     --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
+    --secondary-highlight: 0 0% 25.9%;
     --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 12 6.5% 15.1%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 0 0% 95%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 346.8 77.2% 49.8%;
+    --selected: 346.8 77.2% 39.8%;
+    --selected-foreground: 355.7 100% 97.3%;
   }
 }

From f36e86feb6fd8aef103f6727fe70e4c9f0d3b223 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 27 Apr 2024 10:26:51 -0600
Subject: [PATCH 03/56] Cleanup error gpu (#11130)

---
 frigate/stats/util.py                   | 14 +++++++-------
 web/src/views/system/GeneralMetrics.tsx | 22 ++++++++++++++++++++--
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/frigate/stats/util.py b/frigate/stats/util.py
index 8eb59e464..09710b358 100644
--- a/frigate/stats/util.py
+++ b/frigate/stats/util.py
@@ -162,7 +162,7 @@ async def set_gpu_stats(
     for args in hwaccel_args:
         if args in hwaccel_errors:
             # known erroring args should automatically return as error
-            stats["error-gpu"] = {"gpu": -1, "mem": -1}
+            stats["error-gpu"] = {"gpu": "", "mem": ""}
         elif "cuvid" in args or "nvidia" in args:
             # nvidia GPU
             nvidia_usage = get_nvidia_gpu_stats()
@@ -177,7 +177,7 @@ async def set_gpu_stats(
                     }
 
             else:
-                stats["nvidia-gpu"] = {"gpu": -1, "mem": -1}
+                stats["nvidia-gpu"] = {"gpu": "", "mem": ""}
                 hwaccel_errors.append(args)
         elif "nvmpi" in args or "jetson" in args:
             # nvidia Jetson
@@ -186,7 +186,7 @@ async def set_gpu_stats(
             if jetson_usage:
                 stats["jetson-gpu"] = jetson_usage
             else:
-                stats["jetson-gpu"] = {"gpu": -1, "mem": -1}
+                stats["jetson-gpu"] = {"gpu": "", "mem": ""}
                 hwaccel_errors.append(args)
         elif "qsv" in args:
             if not config.telemetry.stats.intel_gpu_stats:
@@ -198,7 +198,7 @@ async def set_gpu_stats(
             if intel_usage:
                 stats["intel-qsv"] = intel_usage
             else:
-                stats["intel-qsv"] = {"gpu": -1, "mem": -1}
+                stats["intel-qsv"] = {"gpu": "", "mem": ""}
                 hwaccel_errors.append(args)
         elif "vaapi" in args:
             if is_vaapi_amd_driver():
@@ -211,7 +211,7 @@ async def set_gpu_stats(
                 if amd_usage:
                     stats["amd-vaapi"] = amd_usage
                 else:
-                    stats["amd-vaapi"] = {"gpu": -1, "mem": -1}
+                    stats["amd-vaapi"] = {"gpu": "", "mem": ""}
                     hwaccel_errors.append(args)
             else:
                 if not config.telemetry.stats.intel_gpu_stats:
@@ -223,11 +223,11 @@ async def set_gpu_stats(
                 if intel_usage:
                     stats["intel-vaapi"] = intel_usage
                 else:
-                    stats["intel-vaapi"] = {"gpu": -1, "mem": -1}
+                    stats["intel-vaapi"] = {"gpu": "", "mem": ""}
                     hwaccel_errors.append(args)
         elif "v4l2m2m" in args or "rpi" in args:
             # RPi v4l2m2m is currently not able to get usage stats
-            stats["rpi-v4l2m2m"] = {"gpu": -1, "mem": -1}
+            stats["rpi-v4l2m2m"] = {"gpu": "", "mem": ""}
 
     if stats:
         all_stats["gpu_usages"] = stats
diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx
index c62924732..55c0337c0 100644
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/web/src/views/system/GeneralMetrics.tsx
@@ -210,6 +210,7 @@ export default function GeneralMetrics({
     const series: {
       [key: string]: { name: string; data: { x: number; y: string }[] };
     } = {};
+    let hasValidGpu = false;
 
     statsHistory.forEach((stats, statsIdx) => {
       if (!stats) {
@@ -221,9 +222,17 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({ x: statsIdx + 1, y: stats.gpu.slice(0, -1) });
+        if (stats.gpu) {
+          hasValidGpu = true;
+          series[key].data.push({ x: statsIdx + 1, y: stats.gpu.slice(0, -1) });
+        }
       });
     });
+
+    if (!hasValidGpu) {
+      return [];
+    }
+
     return Object.keys(series).length > 0 ? Object.values(series) : [];
   }, [statsHistory]);
 
@@ -243,6 +252,7 @@ export default function GeneralMetrics({
     const series: {
       [key: string]: { name: string; data: { x: number; y: string }[] };
     } = {};
+    let hasValidGpu = false;
 
     statsHistory.forEach((stats, statsIdx) => {
       if (!stats) {
@@ -254,9 +264,17 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({ x: statsIdx + 1, y: stats.mem.slice(0, -1) });
+        if (stats.mem) {
+          hasValidGpu = true;
+          series[key].data.push({ x: statsIdx + 1, y: stats.mem.slice(0, -1) });
+        }
       });
     });
+
+    if (!hasValidGpu) {
+      return [];
+    }
+
     return Object.values(series);
   }, [statsHistory]);
 

From cc851555e4029647986dccc8b8ecf54afee31442 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 27 Apr 2024 10:27:23 -0600
Subject: [PATCH 04/56] Security improvement: ensure user provided file names
 don't exceed max length (#11129)

* Security fixes

* formatting
---
 frigate/api/media.py | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/frigate/api/media.py b/frigate/api/media.py
index 519467643..be4ea08d8 100644
--- a/frigate/api/media.py
+++ b/frigate/api/media.py
@@ -392,7 +392,17 @@ def recording_clip(camera_name, start_ts, end_ts):
         if clip.end_time > end_ts:
             playlist_lines.append(f"outpoint {int(end_ts - clip.start_time)}")
 
-    file_name = secure_filename(f"clip_{camera_name}_{start_ts}-{end_ts}.mp4")
+    file_name = f"clip_{camera_name}_{start_ts}-{end_ts}.mp4"
+
+    if len(file_name) > 1000:
+        return make_response(
+            jsonify(
+                {"success": False, "message": "Filename exceeded max length of 1000"}
+            ),
+            403,
+        )
+
+    file_name = secure_filename(file_name)
     path = os.path.join(CACHE_DIR, file_name)
 
     if not os.path.exists(path):
@@ -1167,7 +1177,20 @@ def preview_gif(camera_name: str, start_ts, end_ts, max_cache_age=2592000):
 @MediaBp.route("/<camera_name>/start/<int:start_ts>/end/<int:end_ts>/preview.mp4")
 @MediaBp.route("/<camera_name>/start/<float:start_ts>/end/<float:end_ts>/preview.mp4")
 def preview_mp4(camera_name: str, start_ts, end_ts):
-    file_name = secure_filename(f"clip_{camera_name}_{start_ts}-{end_ts}.mp4")
+    file_name = f"clip_{camera_name}_{start_ts}-{end_ts}.mp4"
+
+    if len(file_name) > 1000:
+        return make_response(
+            jsonify(
+                {
+                    "success": False,
+                    "message": "Filename exceeded max length of 1000 characters.",
+                }
+            ),
+            403,
+        )
+
+    file_name = secure_filename(file_name)
     path = os.path.join(CACHE_DIR, file_name)
 
     if datetime.fromtimestamp(start_ts) < datetime.now().replace(minute=0, second=0):
@@ -1337,6 +1360,14 @@ def review_preview(id: str):
 @MediaBp.route("/preview/<file_name>/thumbnail.webp")
 def preview_thumbnail(file_name: str):
     """Get a thumbnail from the cached preview frames."""
+    if len(file_name) > 1000:
+        return make_response(
+            jsonify(
+                {"success": False, "message": "Filename exceeded max length of 1000"}
+            ),
+            403,
+        )
+
     safe_file_name_current = secure_filename(file_name)
     preview_dir = os.path.join(CACHE_DIR, "preview_frames")
 

From 3348af1e6d28299f1f29740627389395c91df28e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 27 Apr 2024 12:02:01 -0500
Subject: [PATCH 05/56] add page titles for settings views (#11132)

---
 web/src/components/settings/General.tsx            | 5 +++++
 web/src/components/settings/MasksAndZones.tsx      | 5 +++++
 web/src/components/settings/MotionMaskEditPane.tsx | 6 +++++-
 web/src/components/settings/MotionTuner.tsx        | 4 ++++
 web/src/components/settings/ObjectMaskEditPane.tsx | 6 +++++-
 web/src/components/settings/ObjectSettings.tsx     | 6 +++++-
 web/src/components/settings/ZoneEditPane.tsx       | 4 ++++
 web/src/pages/Settings.tsx                         | 4 ++++
 8 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/web/src/components/settings/General.tsx b/web/src/components/settings/General.tsx
index 4d8465299..d82731300 100644
--- a/web/src/components/settings/General.tsx
+++ b/web/src/components/settings/General.tsx
@@ -10,8 +10,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { useEffect } from "react";
 
 export default function General() {
+  useEffect(() => {
+    document.title = "General Settings - Frigate";
+  }, []);
+
   return (
     <>
       <Heading as="h2">Settings</Heading>
diff --git a/web/src/components/settings/MasksAndZones.tsx b/web/src/components/settings/MasksAndZones.tsx
index 84999da8f..5e17a534f 100644
--- a/web/src/components/settings/MasksAndZones.tsx
+++ b/web/src/components/settings/MasksAndZones.tsx
@@ -171,6 +171,7 @@ export default function MasksAndZones({
     setActivePolygonIndex(undefined);
     setHoveredPolygonIndex(null);
     setUnsavedChanges(false);
+    document.title = "Mask and Zone Editor - Frigate";
   }, [allPolygons, setUnsavedChanges]);
 
   const handleSave = useCallback(() => {
@@ -353,6 +354,10 @@ export default function MasksAndZones({
     }
   }, [selectedCamera]);
 
+  useEffect(() => {
+    document.title = "Mask and Zone Editor - Frigate";
+  }, []);
+
   if (!cameraConfig && !selectedCamera) {
     return <ActivityIndicator />;
   }
diff --git a/web/src/components/settings/MotionMaskEditPane.tsx b/web/src/components/settings/MotionMaskEditPane.tsx
index 5b54a1122..1797c2d99 100644
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@@ -2,7 +2,7 @@ import Heading from "../ui/heading";
 import { Separator } from "../ui/separator";
 import { Button } from "@/components/ui/button";
 import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -173,6 +173,10 @@ export default function MotionMaskEditPane({
     }
   }
 
+  useEffect(() => {
+    document.title = "Edit Motion Mask - Frigate";
+  }, []);
+
   if (!polygon) {
     return;
   }
diff --git a/web/src/components/settings/MotionTuner.tsx b/web/src/components/settings/MotionTuner.tsx
index 02350b070..badaa75a4 100644
--- a/web/src/components/settings/MotionTuner.tsx
+++ b/web/src/components/settings/MotionTuner.tsx
@@ -159,6 +159,10 @@ export default function MotionTuner({
     }
   }, [changedValue, addMessage, clearMessages]);
 
+  useEffect(() => {
+    document.title = "Motion Tuner - Frigate";
+  }, []);
+
   if (!cameraConfig && !selectedCamera) {
     return <ActivityIndicator />;
   }
diff --git a/web/src/components/settings/ObjectMaskEditPane.tsx b/web/src/components/settings/ObjectMaskEditPane.tsx
index ae755c48f..c95b17bae 100644
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@@ -19,7 +19,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -235,6 +235,10 @@ export default function ObjectMaskEditPane({
     }
   }
 
+  useEffect(() => {
+    document.title = "Edit Object Mask - Frigate";
+  }, []);
+
   if (!polygon) {
     return;
   }
diff --git a/web/src/components/settings/ObjectSettings.tsx b/web/src/components/settings/ObjectSettings.tsx
index 4b45c1fa4..92dac2d7d 100644
--- a/web/src/components/settings/ObjectSettings.tsx
+++ b/web/src/components/settings/ObjectSettings.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import DebugCameraImage from "../camera/DebugCameraImage";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
@@ -19,6 +19,10 @@ export default function ObjectSettings({
     }
   }, [config, selectedCamera]);
 
+  useEffect(() => {
+    document.title = "Object Settings - Frigate";
+  }, []);
+
   if (!cameraConfig) {
     return <ActivityIndicator />;
   }
diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx
index f72cc3907..dd213b6cc 100644
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@@ -308,6 +308,10 @@ export default function ZoneEditPane({
     }
   }
 
+  useEffect(() => {
+    document.title = "Edit Zone - Frigate";
+  }, []);
+
   if (!polygon) {
     return;
   }
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 9d22e534d..d0bd80102 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -100,6 +100,10 @@ export default function Settings() {
     }
   }, [tabsRef, pageToggle]);
 
+  useEffect(() => {
+    document.title = "Settings - Frigate";
+  }, []);
+
   return (
     <div className="size-full p-2 flex flex-col">
       <div className="w-full h-11 relative flex justify-between items-center">

From 8c610bea492c4d4e7bbad79e99557f272252b427 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 28 Apr 2024 08:35:50 -0600
Subject: [PATCH 06/56] Remove dev env var requirement and update docs for
 latest config (#10483)

* Update docs for alerts and event review

* Add docs for camera groups

* Update reference config with new config values

* Remove env variable requirement

* Add to sidebar

* Update snapshot docs

* add zones example to detection docs too

* Generalize the zone docs
---
 docs/docs/configuration/cameras.md   | 20 ++++++++++++
 docs/docs/configuration/reference.md | 15 +++++++++
 docs/docs/configuration/review.md    | 47 ++++++++++++++++++++++++++++
 docs/docs/configuration/snapshots.md |  4 ++-
 docs/docs/configuration/zones.md     | 38 +++++++++++++++++++---
 docs/sidebars.js                     |  1 +
 frigate/app.py                       | 18 -----------
 7 files changed, 120 insertions(+), 23 deletions(-)
 create mode 100644 docs/docs/configuration/review.md

diff --git a/docs/docs/configuration/cameras.md b/docs/docs/configuration/cameras.md
index 47cc61cde..394cf935a 100644
--- a/docs/docs/configuration/cameras.md
+++ b/docs/docs/configuration/cameras.md
@@ -94,3 +94,23 @@ This list of working and non-working PTZ cameras is based on user feedback.
 | Tapo C210                |      ❌      |      ❌      | Incomplete ONVIF support                                                                                                                        |
 | Uniview IPC672LR-AX4DUPK |      ✅      |      ❌      | Firmware says FOV relative movement is supported, but camera doesn't actually move when sending ONVIF commands                                  |
 | Vikylin PTZ-2804X-I2     |      ❌      |      ❌      | Incomplete ONVIF support                                                                                                                        |
+
+## Setting up camera groups
+
+:::tip
+
+It is recommended to set up camera groups using the UI.
+
+:::
+
+Cameras can be grouped together and assigned a name and icon, this allows them to be reviewed and filtered together. There will always be the default group for all cameras.
+
+```yaml
+camera_groups:
+  front:
+    cameras:
+      - driveway_cam
+      - garage_cam
+    icon: car
+    order: 0
+```
\ No newline at end of file
diff --git a/docs/docs/configuration/reference.md b/docs/docs/configuration/reference.md
index 5f89eddb7..829bae690 100644
--- a/docs/docs/configuration/reference.md
+++ b/docs/docs/configuration/reference.md
@@ -653,4 +653,19 @@ telemetry:
   # Optional: Enable the latest version outbound check (default: shown below)
   # NOTE: If you use the HomeAssistant integration, disabling this will prevent it from reporting new versions
   version_check: True
+
+# Optional: Camera groups (default: no groups are setup)
+# NOTE: It is recommended to use the UI to setup camera groups
+camera_groups:
+  # Required: Name of camera group
+  front:
+    # Required: list of cameras in the group
+    cameras:
+      - front_cam
+      - side_cam
+      - front_doorbell_cam
+    # Required: icon used for group
+    icon: car
+    # Required: index of this group
+    order: 0
 ```
diff --git a/docs/docs/configuration/review.md b/docs/docs/configuration/review.md
new file mode 100644
index 000000000..667401d0c
--- /dev/null
+++ b/docs/docs/configuration/review.md
@@ -0,0 +1,47 @@
+---
+id: review
+title: Review
+---
+
+Review items are saved as periods of time where frigate detected events. After watching the preview of a review item it is marked as reviewed.
+
+## Restricting alerts to specific labels
+
+By default a review item will only be marked as an alert if a person or car is detected. This can be configured to include any object or audio label using the following config:
+
+```yaml
+# can be overridden at the camera level
+review:
+  alerts:
+    labels:
+      - car
+      - cat
+      - dog
+      - person
+      - speech
+```
+
+## Restricting detections to specific labels
+
+By default all detections that do not qualify as an alert qualify as a detection. However, detections can further be filtered to only include certain labels or certain zones.
+
+By default a review item will only be marked as an alert if a person or car is detected. This can be configured to include any object or audio label using the following config:
+
+```yaml
+# can be overridden at the camera level
+review:
+  detections:
+    labels:
+      - bark
+      - dog
+```
+
+## Restricting review items to specific zones
+
+By default a review item will be created if any `review -> alerts -> labels` and `review -> detections -> labels` are detected anywhere in the camera frame. You will likely want to configure review items to only be created when the object enters an area of interest, [see the zone docs for more information](./zones.md#restricting-alerts-and-detections-to-specific-zones)
+
+:::info
+
+Because zones don't apply to audio, audio labels will always be marked as an alert.
+
+:::
diff --git a/docs/docs/configuration/snapshots.md b/docs/docs/configuration/snapshots.md
index 6145812db..dce689a67 100644
--- a/docs/docs/configuration/snapshots.md
+++ b/docs/docs/configuration/snapshots.md
@@ -3,6 +3,8 @@ id: snapshots
 title: Snapshots
 ---
 
-Frigate can save a snapshot image to `/media/frigate/clips` for each event named as `<camera>-<id>.jpg`.
+Frigate can save a snapshot image to `/media/frigate/clips` for each object that is detected named as `<camera>-<id>.jpg`. They are also accessible [via the api](../integrations/api.md#get-apieventsidsnapshotjpg)
+
+To only save snapshots for objects that enter a specific zone, [see the zone docs](./zones.md#restricting-snapshots-to-specific-zones)
 
 Snapshots sent via MQTT are configured in the [config file](https://docs.frigate.video/configuration/) under  `cameras -> your_camera -> mqtt`
diff --git a/docs/docs/configuration/zones.md b/docs/docs/configuration/zones.md
index 177c47075..23fcea986 100644
--- a/docs/docs/configuration/zones.md
+++ b/docs/docs/configuration/zones.md
@@ -14,17 +14,47 @@ During testing, enable the Zones option for the debug feed so you can adjust as
 
 To create a zone, follow [the steps for a "Motion mask"](masks.md), but use the section of the web UI for creating a zone instead.
 
-### Restricting events to specific zones
+### Restricting alerts and detections to specific zones
 
-Often you will only want events to be created when an object enters areas of interest. This is done using zones along with setting required_zones. Let's say you only want to be notified when an object enters your entire_yard zone, the config would be:
+Often you will only want alerts to be created when an object enters areas of interest. This is done using zones along with setting required_zones. Let's say you only want to have an alert created when an object enters your entire_yard zone, the config would be:
 
 ```yaml
 cameras:
   name_of_your_camera:
-    record:
-      events:
+    review:
+      alerts:
         required_zones:
           - entire_yard
+    zones:
+      entire_yard:
+        coordinates: ...
+```
+
+You may also want to filter detections to only be created when an object enters a secondary area of interest. This is done using zones along with setting required_zones. Let's say you want alerts when an object enters the inner area of the yard but detections when an object enters the edge of the yard, the config would be
+
+```yaml
+cameras:
+  name_of_your_camera:
+    review:
+      alerts:
+        required_zones:
+          - inner_yard
+      detections:
+        required_zones:
+          - edge_yard
+    zones:
+      edge_yard:
+        coordinates: ...
+      inner_yard:
+        coordinates: ...
+
+```
+
+### Restricting snapshots to specific zones
+
+```yaml
+cameras:
+  name_of_your_camera:
     snapshots:
       required_zones:
         - entire_yard
diff --git a/docs/sidebars.js b/docs/sidebars.js
index d4a3d9daf..eff51212c 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -32,6 +32,7 @@ module.exports = {
       ],
       Cameras: [
         "configuration/cameras",
+        "configuration/review",
         "configuration/record",
         "configuration/snapshots",
         "configuration/motion_detection",
diff --git a/frigate/app.py b/frigate/app.py
index 94ec8c6c6..1306ee97d 100644
--- a/frigate/app.py
+++ b/frigate/app.py
@@ -597,24 +597,6 @@ class FrigateApp:
         self.init_logger()
         logger.info(f"Starting Frigate ({VERSION})")
 
-        if not os.environ.get("I_PROMISE_I_WONT_MAKE_AN_ISSUE_ON_GITHUB"):
-            print(
-                "**********************************************************************************"
-            )
-            print(
-                "**********************************************************************************"
-            )
-            print("Frigate 0.14 UNSTABLE")
-            print("This build is not for public use. Please use Frigate stable.")
-            print("Unstable/experimental builds are not enabled, Frigate is exiting.")
-            print(
-                "**********************************************************************************"
-            )
-            print(
-                "**********************************************************************************"
-            )
-            sys.exit(1)
-
         try:
             self.ensure_dirs()
             try:

From c2c611329901ec0c6c8222ec95d1a5c9fcb7c97f Mon Sep 17 00:00:00 2001
From: leccelecce <24962424+leccelecce@users.noreply.github.com>
Date: Sun, 28 Apr 2024 23:28:19 +0100
Subject: [PATCH 07/56] Live view not loading for MSE/JSMpeg if overriding live
 stream (#11141)

---
 web/src/components/player/LivePlayer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index a93eb0e18..16a66a67c 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -110,7 +110,7 @@ export default function LivePlayer({
       player = (
         <MSEPlayer
           className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
-          camera={cameraConfig.name}
+          camera={cameraConfig.live.stream_name}
           playbackEnabled={cameraActive}
           audioEnabled={playAudio}
           onPlaying={() => setLiveReady(true)}
@@ -129,7 +129,7 @@ export default function LivePlayer({
     player = (
       <JSMpegPlayer
         className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
-        camera={cameraConfig.name}
+        camera={cameraConfig.live.stream_name}
         width={cameraConfig.detect.width}
         height={cameraConfig.detect.height}
       />

From acf37f9920d2860df6147c1595aef60e08f86aab Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 28 Apr 2024 16:59:03 -0600
Subject: [PATCH 08/56] Link to relevant page from status bar warnings / errors
 (#11140)

* Use hash state for system pages

* Add links to items

* Add stats to other types

* Link on mobile as well

* Use link

* Cleanup using util
---
 web/src/components/Statusbar.tsx            | 36 +++++++++++++++------
 web/src/components/menu/GeneralSettings.tsx |  2 +-
 web/src/components/navigation/Bottombar.tsx | 33 +++++++++++++------
 web/src/context/statusbar-provider.tsx      | 12 +++++--
 web/src/hooks/use-stats.ts                  |  5 +++
 web/src/pages/System.tsx                    | 14 ++++++--
 web/src/types/stats.ts                      |  1 +
 7 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 88d00d3b7..1ea609d74 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -9,6 +9,7 @@ import { useContext, useEffect, useMemo } from "react";
 import { FaCheck } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { MdCircle } from "react-icons/md";
+import { Link } from "react-router-dom";
 import useSWR from "swr";
 
 export default function Statusbar() {
@@ -43,7 +44,13 @@ export default function Statusbar() {
   useEffect(() => {
     clearMessages("stats");
     potentialProblems.forEach((problem) => {
-      addMessage("stats", problem.text, problem.color);
+      addMessage(
+        "stats",
+        problem.text,
+        problem.color,
+        undefined,
+        problem.relevantLink,
+      );
     });
   }, [potentialProblems, addMessage, clearMessages]);
 
@@ -110,14 +117,25 @@ export default function Statusbar() {
         ) : (
           Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="h-full flex items-center gap-2">
-              {messageArray.map(({ id, text, color }: StatusMessage) => (
-                <div key={id} className="flex items-center text-sm gap-2">
-                  <IoIosWarning
-                    className={`size-5 ${color || "text-danger"}`}
-                  />
-                  {text}
-                </div>
-              ))}
+              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
+                const message = (
+                  <div
+                    key={id}
+                    className={`flex items-center text-sm gap-2 ${link ? "hover:underline cursor-pointer" : ""}`}
+                  >
+                    <IoIosWarning
+                      className={`size-5 ${color || "text-danger"}`}
+                    />
+                    {text}
+                  </div>
+                );
+
+                if (link) {
+                  return <Link to={link}>{message}</Link>;
+                } else {
+                  return message;
+                }
+              })}
             </div>
           ))
         )}
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index aed5f2173..637a13193 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -139,7 +139,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
               <DropdownMenuLabel>System</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
-                <Link to="/system">
+                <Link to="/system#general">
                   <MenuItem
                     className={
                       isDesktop
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 38086892e..4b646dc5f 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -13,6 +13,7 @@ import {
   StatusBarMessagesContext,
   StatusMessage,
 } from "@/context/statusbar-provider";
+import { Link } from "react-router-dom";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -51,7 +52,13 @@ function StatusAlertNav() {
   useEffect(() => {
     clearMessages("stats");
     potentialProblems.forEach((problem) => {
-      addMessage("stats", problem.text, problem.color);
+      addMessage(
+        "stats",
+        problem.text,
+        problem.color,
+        undefined,
+        problem.relevantLink,
+      );
     });
   }, [potentialProblems, addMessage, clearMessages]);
 
@@ -68,14 +75,22 @@ function StatusAlertNav() {
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="w-full flex items-center gap-2">
-              {messageArray.map(({ id, text, color }: StatusMessage) => (
-                <div key={id} className="flex items-center text-xs gap-2">
-                  <IoIosWarning
-                    className={`size-5 ${color || "text-danger"}`}
-                  />
-                  {text}
-                </div>
-              ))}
+              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
+                const message = (
+                  <div key={id} className="flex items-center text-xs gap-2">
+                    <IoIosWarning
+                      className={`size-5 ${color || "text-danger"}`}
+                    />
+                    {text}
+                  </div>
+                );
+
+                if (link) {
+                  return <Link to={link}>{message}</Link>;
+                } else {
+                  return message;
+                }
+              })}
             </div>
           ))}
         </div>
diff --git a/web/src/context/statusbar-provider.tsx b/web/src/context/statusbar-provider.tsx
index 6d17fa4de..60954f7be 100644
--- a/web/src/context/statusbar-provider.tsx
+++ b/web/src/context/statusbar-provider.tsx
@@ -10,6 +10,7 @@ export type StatusMessage = {
   id: string;
   text: string;
   color?: string;
+  link?: string;
 };
 
 export type StatusMessagesState = {
@@ -27,6 +28,7 @@ type StatusBarMessagesContextValue = {
     message: string,
     color?: string,
     messageId?: string,
+    link?: string,
   ) => string;
   removeMessage: (key: string, messageId: string) => void;
   clearMessages: (key: string) => void;
@@ -43,14 +45,20 @@ export function StatusBarMessagesProvider({
   const messages = useMemo(() => messagesState, [messagesState]);
 
   const addMessage = useCallback(
-    (key: string, message: string, color?: string, messageId?: string) => {
+    (
+      key: string,
+      message: string,
+      color?: string,
+      messageId?: string,
+      link?: string,
+    ) => {
       const id = messageId || Date.now().toString();
       const msgColor = color || "text-danger";
       setMessagesState((prevMessages) => ({
         ...prevMessages,
         [key]: [
           ...(prevMessages[key] || []),
-          { id, text: message, color: msgColor },
+          { id, text: message, color: msgColor, link },
         ],
       }));
       return id;
diff --git a/web/src/hooks/use-stats.ts b/web/src/hooks/use-stats.ts
index 1cb30dbb7..bafc9e538 100644
--- a/web/src/hooks/use-stats.ts
+++ b/web/src/hooks/use-stats.ts
@@ -34,11 +34,13 @@ export default function useStats(stats: FrigateStats | undefined) {
         problems.push({
           text: `${capitalizeFirstLetter(key)} is very slow (${det["inference_speed"]} ms)`,
           color: "text-danger",
+          relevantLink: "/system#general",
         });
       } else if (det["inference_speed"] > InferenceThreshold.warning) {
         problems.push({
           text: `${capitalizeFirstLetter(key)} is slow (${det["inference_speed"]} ms)`,
           color: "text-orange-400",
+          relevantLink: "/system#general",
         });
       }
     });
@@ -53,6 +55,7 @@ export default function useStats(stats: FrigateStats | undefined) {
         problems.push({
           text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`,
           color: "text-danger",
+          relevantLink: "logs",
         });
       }
     });
@@ -70,6 +73,7 @@ export default function useStats(stats: FrigateStats | undefined) {
         problems.push({
           text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} has high FFMPEG CPU usage (${ffmpegAvg}%)`,
           color: "text-danger",
+          relevantLink: "/system#cameras",
         });
       }
 
@@ -77,6 +81,7 @@ export default function useStats(stats: FrigateStats | undefined) {
         problems.push({
           text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} has high detect CPU usage (${detectAvg}%)`,
           color: "text-danger",
+          relevantLink: "/system#cameras",
         });
       }
     });
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index 5d296f053..8d30c82ed 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -11,6 +11,8 @@ import { FaVideo } from "react-icons/fa";
 import Logo from "@/components/Logo";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import CameraMetrics from "@/views/system/CameraMetrics";
+import { useHashState } from "@/hooks/use-overlay-state";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -18,12 +20,18 @@ type SystemMetric = (typeof metrics)[number];
 function System() {
   // stats page
 
-  const [page, setPage] = useState<SystemMetric>("general");
-  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
+  const [page, setPage] = useHashState<SystemMetric>();
+  const [pageToggle, setPageToggle] = useOptimisticState(
+    page ?? "general",
+    setPage,
+    100,
+  );
   const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
 
   useEffect(() => {
-    document.title = `${pageToggle[0].toUpperCase()}${pageToggle.substring(1)} Stats - Frigate`;
+    if (pageToggle) {
+      document.title = `${capitalizeFirstLetter(pageToggle)} Stats - Frigate`;
+    }
   }, [pageToggle]);
 
   // stats collection
diff --git a/web/src/types/stats.ts b/web/src/types/stats.ts
index 59fb6f69d..2cf277f3d 100644
--- a/web/src/types/stats.ts
+++ b/web/src/types/stats.ts
@@ -62,6 +62,7 @@ export type StorageStats = {
 export type PotentialProblem = {
   text: string;
   color: string;
+  relevantLink?: string;
 };
 
 export type Vainfo = {

From 1c90f62ea51bd9efb8d57434b9b8abbe6eaeaa91 Mon Sep 17 00:00:00 2001
From: Sean Kelly <xconverge@users.noreply.github.com>
Date: Sun, 28 Apr 2024 21:00:57 -0700
Subject: [PATCH 09/56] Fix rounding (#11147)

---
 web/src/components/graph/SystemGraph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index e96ce8235..fe1204b29 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -150,7 +150,7 @@ export function ThresholdBarGraph({
 
 const getUnitSize = (MB: number) => {
   if (isNaN(MB) || MB < 0) return "Invalid number";
-  if (MB < 1024) return `${MB} MiB`;
+  if (MB < 1024) return `${MB.toFixed(2)} MiB`;
   if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
 
   return `${(MB / 1048576).toFixed(2)} TiB`;

From 90468c8bf53522f18c571ff82ebf7520c57667ce Mon Sep 17 00:00:00 2001
From: Sean Kelly <xconverge@users.noreply.github.com>
Date: Sun, 28 Apr 2024 21:55:43 -0700
Subject: [PATCH 10/56] Force X axis labels to be rotated correctly (#11148)

* Adjust number of ticks to have consistent X axes

* Revert "Adjust number of ticks to have consistent X axes"

This reverts commit 941e29675043d271d4b40278354c22556483484e.

* set rotate instead
---
 web/src/components/graph/SystemGraph.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index fe1204b29..81db46e7b 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -110,6 +110,7 @@ export function ThresholdBarGraph({
         tickAmount: isMobileOnly ? 3 : 4,
         tickPlacement: "on",
         labels: {
+          rotate: 0,
           offsetX: -18,
           formatter: formatTime,
         },
@@ -352,6 +353,7 @@ export function CameraLineGraph({
         tickAmount: isMobileOnly ? 3 : 4,
         tickPlacement: "on",
         labels: {
+          rotate: 0,
           offsetX: isMobileOnly ? -18 : 0,
           formatter: formatTime,
         },

From 5858eee1fe01bfa6e149b7df9eb3b60295341b6b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 05:23:08 -0600
Subject: [PATCH 11/56] Explicitly set pandas dtype to reduce memory usage and
 fix warning (#11145)

* Explicitly set dtype to reduce memory usage and fix warning

* remove extra line
---
 frigate/api/review.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frigate/api/review.py b/frigate/api/review.py
index fa1dee73c..855122989 100644
--- a/frigate/api/review.py
+++ b/frigate/api/review.py
@@ -440,6 +440,7 @@ def motion_activity():
 
     # resample data using pandas to get activity on scaled basis
     df = pd.DataFrame(data, columns=["start_time", "motion", "camera"])
+    df = df.astype(dtype={"motion": "float16"})
 
     # set date as datetime index
     df["start_time"] = pd.to_datetime(df["start_time"], unit="s")
@@ -517,6 +518,7 @@ def audio_activity():
 
     # resample data using pandas to get activity on scaled basis
     df = pd.DataFrame(data, columns=["start_time", "audio"])
+    df = df.astype(dtype={"audio": "float16"})
 
     # set date as datetime index
     df["start_time"] = pd.to_datetime(df["start_time"], unit="s")

From 5bc9f9a3880ee46a5b9b7c7d5e077e26a3405dcf Mon Sep 17 00:00:00 2001
From: Sean Kelly <xconverge@users.noreply.github.com>
Date: Mon, 29 Apr 2024 07:52:32 -0700
Subject: [PATCH 12/56] [stats] Fix tooltip showing as undefined for first tick
 (#11150)

* Fix tooltip showing as undefined for first tick

* Rearrange to simplify diff

* Remove offset for mobile
---
 web/src/components/graph/SystemGraph.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 81db46e7b..834f6e6b4 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -37,10 +37,6 @@ export function ThresholdBarGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
-      if (val == 1) {
-        return;
-      }
-
       const date = new Date(updateTimes[Math.round(val as number) - 1] * 1000);
       return date.toLocaleTimeString([], {
         hour12: config?.ui.time_format != "24hour",
@@ -111,7 +107,6 @@ export function ThresholdBarGraph({
         tickPlacement: "on",
         labels: {
           rotate: 0,
-          offsetX: -18,
           formatter: formatTime,
         },
         axisBorder: {
@@ -302,10 +297,6 @@ export function CameraLineGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
-      if (val == 1) {
-        return;
-      }
-
       const date = new Date(updateTimes[Math.round(val as number)] * 1000);
       return date.toLocaleTimeString([], {
         hour12: config?.ui.time_format != "24hour",
@@ -354,7 +345,6 @@ export function CameraLineGraph({
         tickPlacement: "on",
         labels: {
           rotate: 0,
-          offsetX: isMobileOnly ? -18 : 0,
           formatter: formatTime,
         },
         axisBorder: {

From 0c8e155afa618a7290474c34ad95b5e34e6fb67a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 09:58:53 -0600
Subject: [PATCH 13/56] Fix handling mixed masks (#11157)

---
 frigate/util/config.py | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/frigate/util/config.py b/frigate/util/config.py
index d720df067..e882f0bfd 100644
--- a/frigate/util/config.py
+++ b/frigate/util/config.py
@@ -155,14 +155,18 @@ def get_relative_coordinates(
             relative_masks = []
             for m in mask:
                 points = m.split(",")
-                relative_masks.append(
-                    ",".join(
-                        [
-                            f"{round(int(points[i]) / frame_shape[1], 3)},{round(int(points[i + 1]) / frame_shape[0], 3)}"
-                            for i in range(0, len(points), 2)
-                        ]
+
+                if any(x > "1.0" for x in points):
+                    relative_masks.append(
+                        ",".join(
+                            [
+                                f"{round(int(points[i]) / frame_shape[1], 3)},{round(int(points[i + 1]) / frame_shape[0], 3)}"
+                                for i in range(0, len(points), 2)
+                            ]
+                        )
                     )
-                )
+                else:
+                    relative_masks.append(m)
 
             mask = relative_masks
         elif isinstance(mask, str) and any(x > "1.0" for x in mask.split(",")):

From 9117043adc23aa53979e83b43a548e7f8e9011aa Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 09:59:27 -0600
Subject: [PATCH 14/56] UI tweaks for screen sizes (#11155)

* Make bottom bar items easier to tap

* Set max height on list of cameras and labels

* remove incorrect character

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
---
 web/src/components/filter/ReviewFilterGroup.tsx |  4 ++--
 web/src/components/menu/AccountSettings.tsx     |  7 +++++--
 web/src/components/menu/GeneralSettings.tsx     |  4 ++--
 web/src/components/navigation/Bottombar.tsx     | 17 +++++++++++------
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 2248835a2..0b0283a91 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -248,7 +248,7 @@ export function CamerasFilterButton({
           <DropdownMenuSeparator />
         </>
       )}
-      <div className="h-auto p-4 overflow-y-auto overflow-x-hidden">
+      <div className="h-auto max-h-[80dvh] p-4 overflow-y-auto overflow-x-hidden">
         <FilterSwitch
           isChecked={currentCameras == undefined}
           label="All Cameras"
@@ -571,7 +571,7 @@ export function GeneralFilterContent({
 }: GeneralFilterContentProps) {
   return (
     <>
-      <div className="h-auto overflow-y-auto overflow-x-hidden">
+      <div className="h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
         <div className="flex justify-between items-center my-2.5">
           <Label
             className="mx-2 text-primary cursor-pointer"
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index afa63ae4c..72d05e81f 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -6,12 +6,15 @@ import {
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
 
-export default function AccountSettings() {
+type AccountSettingsProps = {
+  className?: string;
+};
+export default function AccountSettings({ className }: AccountSettingsProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
+          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"} ${className ?? ""}`}
         >
           <VscAccount className="size-5 md:m-[6px]" />
         </div>
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index 637a13193..f868eddb5 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -66,10 +66,10 @@ import {
   DialogTrigger,
 } from "../ui/dialog";
 
-type GeneralSettings = {
+type GeneralSettingsProps = {
   className?: string;
 };
-export default function GeneralSettings({ className }: GeneralSettings) {
+export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
   const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 4b646dc5f..d0059ffcf 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -21,16 +21,19 @@ function Bottombar() {
   return (
     <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
       {navItems.map((item) => (
-        <NavItem key={item.id} item={item} Icon={item.icon} />
+        <NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
       ))}
-      <GeneralSettings />
-      <AccountSettings />
-      <StatusAlertNav />
+      <GeneralSettings className="p-2" />
+      <AccountSettings className="p-2" />
+      <StatusAlertNav className="p-2" />
     </div>
   );
 }
 
-function StatusAlertNav() {
+type StatusAlertNavProps = {
+  className?: string;
+};
+function StatusAlertNav({ className }: StatusAlertNavProps) {
   const { data: initialStats } = useSWR<FrigateStats>("stats", {
     revalidateOnFocus: false,
   });
@@ -71,7 +74,9 @@ function StatusAlertNav() {
       <DrawerTrigger>
         <IoIosWarning className="size-5 text-danger" />
       </DrawerTrigger>
-      <DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden">
+      <DrawerContent
+        className={`max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden ${className ?? ""}`}
+      >
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="w-full flex items-center gap-2">

From c9246bd4ab3653af7904215a5f24d2428d0f7ca0 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 10:12:57 -0600
Subject: [PATCH 15/56] Open to recordings with pre-buffer (#11143)

* Open to recordings with pre-buffer

* Reduce buffer

* Use variable for preview FPS
---
 web/src/components/player/PreviewThumbnailPlayer.tsx | 6 +++---
 web/src/types/preview.ts                             | 5 +++++
 web/src/types/review.ts                              | 2 ++
 web/src/views/events/EventView.tsx                   | 3 ++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 0767933b2..c36a2e129 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -23,6 +23,7 @@ import useContextMenu from "@/hooks/use-contextmenu";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { TimeRange } from "@/types/timeline";
 import { NoThumbSlider } from "../ui/slider";
+import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -337,7 +338,6 @@ function PreviewContent({
   }
 }
 
-const PREVIEW_PADDING = 16;
 type VideoPreviewProps = {
   relevantPreview: Preview;
   startTime: number;
@@ -398,7 +398,7 @@ export function VideoPreview({
       setManualPlayback(true);
     } else {
       playerRef.current.currentTime = playerStartTime;
-      playerRef.current.playbackRate = 8;
+      playerRef.current.playbackRate = PREVIEW_FPS;
     }
 
     // we know that these deps are correct
@@ -470,7 +470,7 @@ export function VideoPreview({
         playerRef.current.currentTime = playerStartTime + counter;
         counter += 1;
       }
-    }, 125);
+    }, 1000 / PREVIEW_FPS);
     return () => clearInterval(intervalId);
 
     // we know that these deps are correct
diff --git a/web/src/types/preview.ts b/web/src/types/preview.ts
index e9bd12185..a9f958f7f 100644
--- a/web/src/types/preview.ts
+++ b/web/src/types/preview.ts
@@ -1,3 +1,5 @@
+import { REVIEW_PADDING } from "./review";
+
 export type Preview = {
   camera: string;
   src: string;
@@ -5,3 +7,6 @@ export type Preview = {
   start: number;
   end: number;
 };
+
+export const PREVIEW_FPS = 8;
+export const PREVIEW_PADDING = REVIEW_PADDING * PREVIEW_FPS;
diff --git a/web/src/types/review.ts b/web/src/types/review.ts
index b8e5254d9..bbefaf5d3 100644
--- a/web/src/types/review.ts
+++ b/web/src/types/review.ts
@@ -48,3 +48,5 @@ export type MotionData = {
   audio?: number;
   camera: string;
 };
+
+export const REVIEW_PADDING = 2;
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index be6e2d8fe..caeaef5b4 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -12,6 +12,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import {
   MotionData,
+  REVIEW_PADDING,
   ReviewFilter,
   ReviewSegment,
   ReviewSeverity,
@@ -175,7 +176,7 @@ export default function EventView({
       } else {
         onOpenRecording({
           camera: review.camera,
-          startTime: review.start_time,
+          startTime: review.start_time - REVIEW_PADDING,
           severity: review.severity,
         });
 

From f946cf55befb8d1988b44f4314762063add9cd7d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 13:20:50 -0600
Subject: [PATCH 16/56] Use pre buffer for other links (#11160)

---
 web/src/components/card/AnimatedEventCard.tsx | 4 ++--
 web/src/views/events/RecordingView.tsx        | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index dddbcdb77..0ce535518 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -3,7 +3,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { useCallback, useMemo } from "react";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { ReviewSegment } from "@/types/review";
+import { REVIEW_PADDING, ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import { RecordingStartingPoint } from "@/types/record";
 import axios from "axios";
@@ -39,7 +39,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
         severity: event.severity,
         recording: {
           camera: event.camera,
-          startTime: event.start_time,
+          startTime: event.start_time - REVIEW_PADDING,
           severity: event.severity,
         } as RecordingStartingPoint,
       },
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 83bcc19ef..d7e4569fa 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -15,6 +15,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import {
   MotionData,
+  REVIEW_PADDING,
   ReviewFilter,
   ReviewSegment,
   ReviewSummary,
@@ -558,7 +559,7 @@ function Timeline({
                 currentTime={currentTime}
                 onClick={() => {
                   setScrubbing(true);
-                  setCurrentTime(review.start_time);
+                  setCurrentTime(review.start_time - REVIEW_PADDING);
                   setScrubbing(false);
                 }}
               />

From 7745313cdcbea3ac455886826b051eae469f1455 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 29 Apr 2024 16:23:14 -0500
Subject: [PATCH 17/56] add chips for active objects on live dashboard (#11162)

---
 web/src/components/player/LivePlayer.tsx | 53 +++++++++++++++++++++++-
 web/src/hooks/use-camera-activity.ts     | 28 +++++++++----
 2 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 16a66a67c..d42ecb3a0 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -6,9 +6,14 @@ import { useEffect, useMemo, useState } from "react";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
 import { LivePlayerMode } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
+import { getIconForLabel } from "@/utils/iconUtil";
+import Chip from "../indicators/Chip";
+import { isMobile } from "react-device-detect";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -37,9 +42,12 @@ export default function LivePlayer({
   pip,
   onClick,
 }: LivePlayerProps) {
+  const [cameraHovered, setCameraHovered] = useState(false);
+
   // camera activity
 
-  const { activeMotion, activeTracking } = useCameraActivity(cameraConfig);
+  const { activeMotion, activeTracking, activeObjects } =
+    useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
     () =>
@@ -148,11 +156,54 @@ export default function LivePlayer({
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
       onClick={onClick}
+      onMouseEnter={() => setCameraHovered(true)}
+      onMouseLeave={() => setCameraHovered(false)}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       {player}
 
+      {activeObjects.length > 0 && (
+        <div className="absolute left-0 top-2 z-40">
+          <Tooltip>
+            <div className="flex">
+              <TooltipTrigger asChild>
+                <div className="mx-3 pb-1 text-white text-sm">
+                  <Chip
+                    className={`flex items-start justify-between space-x-1 ${cameraHovered || isMobile ? "" : "hidden"} bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
+                  >
+                    {[
+                      ...new Set([
+                        ...(activeObjects || []).map(({ label }) => label),
+                      ]),
+                    ]
+                      .map((label) => {
+                        return getIconForLabel(label, "size-3 text-white");
+                      })
+                      .sort()}
+                  </Chip>
+                </div>
+              </TooltipTrigger>
+            </div>
+            <TooltipContent className="capitalize">
+              {[
+                ...new Set([
+                  ...(activeObjects || []).map(({ label }) => label),
+                ]),
+              ]
+                .filter(
+                  (label) =>
+                    label !== undefined && !label.includes("-verified"),
+                )
+                .map((label) => capitalizeFirstLetter(label))
+                .sort()
+                .join(", ")
+                .replaceAll("-verified", "")}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+
       <div
         className={`absolute inset-0 w-full ${
           showStillWithoutActivity && !liveReady ? "visible" : "invisible"
diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts
index 99b8702b5..61a4f6299 100644
--- a/web/src/hooks/use-camera-activity.ts
+++ b/web/src/hooks/use-camera-activity.ts
@@ -4,17 +4,24 @@ import { MotionData, ReviewSegment } from "@/types/review";
 import { useEffect, useMemo, useState } from "react";
 import { useTimelineUtils } from "./use-timeline-utils";
 
+type ActiveObjectType = {
+  id: string;
+  label: string;
+  stationary: boolean;
+};
+
 type useCameraActivityReturn = {
   activeTracking: boolean;
   activeMotion: boolean;
+  activeObjects: ActiveObjectType[];
 };
 
 export function useCameraActivity(
   camera: CameraConfig,
 ): useCameraActivityReturn {
-  const [activeObjects, setActiveObjects] = useState<string[]>([]);
+  const [activeObjects, setActiveObjects] = useState<ActiveObjectType[]>([]);
   const hasActiveObjects = useMemo(
-    () => activeObjects.length > 0,
+    () => activeObjects.filter((obj) => !obj.stationary).length > 0,
     [activeObjects],
   );
 
@@ -30,7 +37,9 @@ export function useCameraActivity(
       return;
     }
 
-    const eventIndex = activeObjects.indexOf(event.after.id);
+    const eventIndex = activeObjects.findIndex(
+      (obj) => obj.id === event.after.id,
+    );
 
     if (event.type == "end") {
       if (eventIndex != -1) {
@@ -42,14 +51,14 @@ export function useCameraActivity(
       if (eventIndex == -1) {
         // add unknown event to list if not stationary
         if (!event.after.stationary) {
-          const newActiveObjects = [...activeObjects, event.after.id];
+          const newActiveObject: ActiveObjectType = {
+            id: event.after.id,
+            label: event.after.label,
+            stationary: event.after.stationary,
+          };
+          const newActiveObjects = [...activeObjects, newActiveObject];
           setActiveObjects(newActiveObjects);
         }
-      } else {
-        // remove known event from list if it has become stationary
-        if (event.after.stationary) {
-          activeObjects.splice(eventIndex, 1);
-        }
       }
     }
   }, [camera, event, activeObjects]);
@@ -57,6 +66,7 @@ export function useCameraActivity(
   return {
     activeTracking: hasActiveObjects,
     activeMotion: detectingMotion == "ON",
+    activeObjects,
   };
 }
 

From 1c9626ecff38885e22dcb016621baedd822d63be Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 15:23:24 -0600
Subject: [PATCH 18/56] UI fixes (#11161)

* Don't save animated webp

* Fix bad export state

* Contain scroll for camera group

* Use dvh
---
 frigate/record/export.py                      |  2 +
 .../components/filter/CameraGroupSelector.tsx | 67 ++++++++++---------
 .../overlay/MobileReviewSettingsDrawer.tsx    |  5 +-
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/frigate/record/export.py b/frigate/record/export.py
index 89980c663..efc155838 100644
--- a/frigate/record/export.py
+++ b/frigate/record/export.py
@@ -110,6 +110,8 @@ class RecordingExporter(threading.Thread):
                 f"00:{minutes}:{seconds}",
                 "-i",
                 preview.path,
+                "-frames",
+                "1",
                 "-c:v",
                 "libwebp",
                 thumb_path,
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index f410e8e8a..651a4ca5a 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -282,7 +282,7 @@ function NewGroupDialog({
         }}
       >
         <Content
-          className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-auto"}`}
+          className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-hidden"}`}
         >
           <div className="flex flex-col my-4 overflow-y-auto">
             {editState === "none" && (
@@ -535,7 +535,10 @@ export function CameraGroupEdit({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="mt-2 space-y-6">
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="mt-2 space-y-6 overflow-y-hidden"
+      >
         <FormField
           control={form.control}
           name="name"
@@ -556,34 +559,38 @@ export function CameraGroupEdit({
         />
 
         <Separator className="flex my-2 bg-secondary" />
-        <FormField
-          control={form.control}
-          name="cameras"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Cameras</FormLabel>
-              <FormDescription>Select cameras for this group.</FormDescription>
-              {[
-                ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
-                ...Object.keys(config?.cameras ?? {}),
-              ].map((camera) => (
-                <FormControl key={camera}>
-                  <FilterSwitch
-                    isChecked={field.value && field.value.includes(camera)}
-                    label={camera.replaceAll("_", " ")}
-                    onCheckedChange={(checked) => {
-                      const updatedCameras = checked
-                        ? [...(field.value || []), camera]
-                        : (field.value || []).filter((c) => c !== camera);
-                      form.setValue("cameras", updatedCameras);
-                    }}
-                  />
-                </FormControl>
-              ))}
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <div className="max-h-[40dvh] overflow-y-auto">
+          <FormField
+            control={form.control}
+            name="cameras"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Cameras</FormLabel>
+                <FormDescription>
+                  Select cameras for this group.
+                </FormDescription>
+                {[
+                  ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
+                  ...Object.keys(config?.cameras ?? {}),
+                ].map((camera) => (
+                  <FormControl key={camera}>
+                    <FilterSwitch
+                      isChecked={field.value && field.value.includes(camera)}
+                      label={camera.replaceAll("_", " ")}
+                      onCheckedChange={(checked) => {
+                        const updatedCameras = checked
+                          ? [...(field.value || []), camera]
+                          : (field.value || []).filter((c) => c !== camera);
+                        form.setValue("cameras", updatedCameras);
+                      }}
+                    />
+                  </FormControl>
+                ))}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
         <Separator className="flex my-2 bg-secondary" />
         <FormField
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index a7c8069c1..4825a8984 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -138,7 +138,10 @@ export default function MobileReviewSettingsDrawer({
         {features.includes("export") && (
           <Button
             className="w-full flex justify-center items-center gap-2"
-            onClick={() => setDrawerMode("export")}
+            onClick={() => {
+              setDrawerMode("export");
+              setMode("select");
+            }}
           >
             <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
             Export

From 11ff7cb2b70243b545e869c16558d1c33633abbd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 30 Apr 2024 07:52:56 -0500
Subject: [PATCH 19/56] Use full resolution aspect ratio when available
 (#11173)

* base recordings and live views off of actual video resolution

* don't set for jsmpeg

* reset when changing main cam

* rename

* Only use resolution for main camera

* fix lint

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
---
 web/src/components/player/HlsVideoPlayer.tsx  | 25 +++++++++++++++--
 web/src/components/player/LivePlayer.tsx      |  5 +++-
 web/src/components/player/MsePlayer.tsx       | 22 ++++++++++++++-
 .../player/dynamic/DynamicVideoPlayer.tsx     |  4 +++
 web/src/types/live.ts                         |  4 +++
 web/src/types/record.ts                       |  3 ++
 web/src/views/events/RecordingView.tsx        | 22 +++++++++++++--
 web/src/views/live/LiveCameraView.tsx         | 28 +++++++++++++++----
 8 files changed, 100 insertions(+), 13 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 54bc8c8c9..5f96a017d 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -1,8 +1,15 @@
-import { MutableRefObject, useEffect, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import Hls from "hls.js";
 import { isAndroid, isDesktop, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
+import { VideoResolutionType } from "@/types/live";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -21,6 +28,7 @@ type HlsVideoPlayerProps = {
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
   onPlaying?: () => void;
+  setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
 };
 export default function HlsVideoPlayer({
   videoRef,
@@ -31,6 +39,7 @@ export default function HlsVideoPlayer({
   onPlayerLoaded,
   onTimeUpdate,
   onPlaying,
+  setFullResolution,
 }: HlsVideoPlayerProps) {
   // playback
 
@@ -38,6 +47,18 @@ export default function HlsVideoPlayer({
   const [useHlsCompat, setUseHlsCompat] = useState(false);
   const [loadedMetadata, setLoadedMetadata] = useState(false);
 
+  const handleLoadedMetadata = useCallback(() => {
+    setLoadedMetadata(true);
+    if (videoRef.current) {
+      if (setFullResolution) {
+        setFullResolution({
+          width: videoRef.current.videoWidth,
+          height: videoRef.current.videoHeight,
+        });
+      }
+    }
+  }, [videoRef, setFullResolution]);
+
   useEffect(() => {
     if (!videoRef.current) {
       return;
@@ -193,7 +214,7 @@ export default function HlsVideoPlayer({
               : undefined
           }
           onLoadedData={onPlayerLoaded}
-          onLoadedMetadata={() => setLoadedMetadata(true)}
+          onLoadedMetadata={handleLoadedMetadata}
           onEnded={onClipEnded}
           onError={(e) => {
             if (
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index d42ecb3a0..9fd1f6ace 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -8,7 +8,7 @@ import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
-import { LivePlayerMode } from "@/types/live";
+import { LivePlayerMode, VideoResolutionType } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { getIconForLabel } from "@/utils/iconUtil";
 import Chip from "../indicators/Chip";
@@ -27,6 +27,7 @@ type LivePlayerProps = {
   iOSCompatFullScreen?: boolean;
   pip?: boolean;
   onClick?: () => void;
+  setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
 };
 
 export default function LivePlayer({
@@ -41,6 +42,7 @@ export default function LivePlayer({
   iOSCompatFullScreen = false,
   pip,
   onClick,
+  setFullResolution,
 }: LivePlayerProps) {
   const [cameraHovered, setCameraHovered] = useState(false);
 
@@ -123,6 +125,7 @@ export default function LivePlayer({
           audioEnabled={playAudio}
           onPlaying={() => setLiveReady(true)}
           pip={pip}
+          setFullResolution={setFullResolution}
         />
       );
     } else {
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index f25557d16..222f2ebcd 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -1,5 +1,13 @@
 import { baseUrl } from "@/api/baseUrl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { VideoResolutionType } from "@/types/live";
+import {
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 type MSEPlayerProps = {
   camera: string;
@@ -8,6 +16,7 @@ type MSEPlayerProps = {
   audioEnabled?: boolean;
   pip?: boolean;
   onPlaying?: () => void;
+  setFullResolution?: React.Dispatch<SetStateAction<VideoResolutionType>>;
 };
 
 function MSEPlayer({
@@ -17,6 +26,7 @@ function MSEPlayer({
   audioEnabled = false,
   pip = false,
   onPlaying,
+  setFullResolution,
 }: MSEPlayerProps) {
   let connectTS: number = 0;
 
@@ -50,6 +60,15 @@ function MSEPlayer({
     return `${baseUrl.replace(/^http/, "ws")}live/mse/api/ws?src=${camera}`;
   }, [camera]);
 
+  const handleLoadedMetadata = useCallback(() => {
+    if (videoRef.current && setFullResolution) {
+      setFullResolution({
+        width: videoRef.current.videoWidth,
+        height: videoRef.current.videoHeight,
+      });
+    }
+  }, [setFullResolution]);
+
   const play = () => {
     const currentVideo = videoRef.current;
 
@@ -286,6 +305,7 @@ function MSEPlayer({
       playsInline
       preload="auto"
       onLoadedData={onPlaying}
+      onLoadedMetadata={handleLoadedMetadata}
       muted={!audioEnabled}
     />
   );
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 15216b749..3f144e04b 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -9,6 +9,7 @@ import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
 import { TimeRange } from "@/types/timeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { VideoResolutionType } from "@/types/live";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -24,6 +25,7 @@ type DynamicVideoPlayerProps = {
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
+  setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
 };
 export default function DynamicVideoPlayer({
   className,
@@ -36,6 +38,7 @@ export default function DynamicVideoPlayer({
   onControllerReady,
   onTimestampUpdate,
   onClipEnded,
+  setFullResolution,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -182,6 +185,7 @@ export default function DynamicVideoPlayer({
           setIsLoading(false);
           setNoRecording(false);
         }}
+        setFullResolution={setFullResolution}
       />
       <PreviewPlayer
         className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
diff --git a/web/src/types/live.ts b/web/src/types/live.ts
index 7e413894f..34d6b17f6 100644
--- a/web/src/types/live.ts
+++ b/web/src/types/live.ts
@@ -1 +1,5 @@
 export type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";
+export type VideoResolutionType = {
+  width: number;
+  height: number;
+};
diff --git a/web/src/types/record.ts b/web/src/types/record.ts
index 1efa8565f..d3fcfce94 100644
--- a/web/src/types/record.ts
+++ b/web/src/types/record.ts
@@ -38,3 +38,6 @@ export type RecordingStartingPoint = {
   startTime: number;
   severity: ReviewSeverity;
 };
+
+export const ASPECT_VERTICAL_LAYOUT = 1.5;
+export const ASPECT_WIDE_LAYOUT = 2;
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index d7e4569fa..4e90937df 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -41,6 +41,8 @@ import MobileReviewSettingsDrawer from "@/components/overlay/MobileReviewSetting
 import Logo from "@/components/Logo";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FaVideo } from "react-icons/fa";
+import { VideoResolutionType } from "@/types/live";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 
 const SEGMENT_DURATION = 30;
 
@@ -189,9 +191,18 @@ export function RecordingView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTime, scrubbing]);
 
+  const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
+    width: 0,
+    height: 0,
+  });
+
   const onSelectCamera = useCallback(
     (newCam: string) => {
       setMainCamera(newCam);
+      setFullResolution({
+        width: 0,
+        height: 0,
+      });
       setPlaybackStart(currentTime);
     },
     [currentTime],
@@ -205,6 +216,10 @@ export function RecordingView({
         return undefined;
       }
 
+      if (cam == mainCamera && fullResolution.width && fullResolution.height) {
+        return fullResolution.width / fullResolution.height;
+      }
+
       const camera = config.cameras[cam];
 
       if (!camera) {
@@ -213,7 +228,7 @@ export function RecordingView({
 
       return camera.detect.width / camera.detect.height;
     },
-    [config],
+    [config, fullResolution, mainCamera],
   );
 
   const mainCameraAspect = useMemo(() => {
@@ -221,9 +236,9 @@ export function RecordingView({
 
     if (!aspectRatio) {
       return "normal";
-    } else if (aspectRatio > 2) {
+    } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
       return "wide";
-    } else if (aspectRatio < 16 / 9) {
+    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
       return "tall";
     } else {
       return "normal";
@@ -397,6 +412,7 @@ export function RecordingView({
                   mainControllerRef.current = controller;
                 }}
                 isScrubbing={scrubbing || exportMode == "timeline"}
+                setFullResolution={setFullResolution}
               />
             </div>
             {isDesktop && (
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index eaf2a63bd..ca8bc968f 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -20,6 +20,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { CameraConfig } from "@/types/frigateConfig";
+import { VideoResolutionType } from "@/types/live";
 import { CameraPtzInfo } from "@/types/ptz";
 import { RecordingStartingPoint } from "@/types/record";
 import React, {
@@ -149,14 +150,24 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   const [fullscreen, setFullscreen] = useState(false);
   const [pip, setPip] = useState(false);
 
+  const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
+    width: 0,
+    height: 0,
+  });
+
   const growClassName = useMemo(() => {
-    const aspect = camera.detect.width / camera.detect.height;
+    let aspect;
+    if (fullResolution.width && fullResolution.height) {
+      aspect = fullResolution.width / fullResolution.height;
+    } else {
+      aspect = camera.detect.width / camera.detect.height;
+    }
 
     if (isMobile) {
       if (isPortrait) {
         return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
       } else {
-        if (aspect > 16 / 9) {
+        if (aspect > 1.5) {
           return "p-2 absolute left-0 top-[50%] -translate-y-[50%]";
         } else {
           return "p-2 absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
@@ -165,7 +176,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     }
 
     if (fullscreen) {
-      if (aspect > 16 / 9) {
+      if (aspect > 1.5) {
         return "absolute inset-x-2 top-[50%] -translate-y-[50%]";
       } else {
         return "absolute inset-y-2 left-[50%] -translate-x-[50%]";
@@ -173,7 +184,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     } else {
       return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
     }
-  }, [camera, fullscreen, isPortrait]);
+  }, [camera, fullscreen, isPortrait, fullResolution]);
 
   const preferredLiveMode = useMemo(() => {
     if (isSafari || mic) {
@@ -188,8 +199,12 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   }, [windowWidth, windowHeight]);
 
   const cameraAspectRatio = useMemo(() => {
-    return camera.detect.width / camera.detect.height;
-  }, [camera]);
+    if (fullResolution.width && fullResolution.height) {
+      return fullResolution.width / fullResolution.height;
+    } else {
+      return camera.detect.width / camera.detect.height;
+    }
+  }, [camera, fullResolution]);
 
   const aspectRatio = useMemo<number>(() => {
     if (isMobile || fullscreen) {
@@ -347,6 +362,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
               iOSCompatFullScreen={isIOS}
               preferredLiveMode={preferredLiveMode}
               pip={pip}
+              setFullResolution={setFullResolution}
             />
           </div>
           {camera.onvif.host != "" && (

From 0080c28c4d4161bdbd63e82687d896df2f674f00 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 30 Apr 2024 07:59:45 -0500
Subject: [PATCH 20/56] fix crash for when group includes birdseye (#11175)

---
 web/src/components/overlay/MobileReviewSettingsDrawer.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 4825a8984..4cf251cb3 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -109,6 +109,9 @@ export default function MobileReviewSettingsDrawer({
     const cameras = filter?.cameras || Object.keys(config.cameras);
 
     cameras.forEach((camera) => {
+      if (camera == "birdseye") {
+        return;
+      }
       const cameraConfig = config.cameras[camera];
       cameraConfig.objects.track.forEach((label) => {
         labels.add(label);

From 461442b399b89c8faa467bb695ae4623731834e2 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 30 Apr 2024 07:09:50 -0600
Subject: [PATCH 21/56] Save initial camera state to update when websocket
 connects (#11174)

* Send camera state to dispatcher

* Fix logic

* Cleanup

* Send camera activitiy in on connect

* Support reading initial camera state

* Fix key

* Formatting

* Sorting
---
 frigate/comms/dispatcher.py              |  8 +++
 frigate/comms/ws.py                      |  4 ++
 frigate/const.py                         |  1 +
 frigate/object_processing.py             | 42 ++++++++++-
 web/src/api/ws.tsx                       | 17 ++++-
 web/src/components/Statusbar.tsx         |  6 +-
 web/src/components/player/LivePlayer.tsx | 12 ++--
 web/src/hooks/use-camera-activity.ts     | 89 +++++++++++++++---------
 web/src/types/ws.ts                      | 11 +++
 9 files changed, 147 insertions(+), 43 deletions(-)

diff --git a/frigate/comms/dispatcher.py b/frigate/comms/dispatcher.py
index 6fc3885e0..db6c44c11 100644
--- a/frigate/comms/dispatcher.py
+++ b/frigate/comms/dispatcher.py
@@ -1,6 +1,7 @@
 """Handle communication between Frigate and other applications."""
 
 import datetime
+import json
 import logging
 from abc import ABC, abstractmethod
 from typing import Any, Callable, Optional
@@ -12,6 +13,7 @@ from frigate.const import (
     INSERT_MANY_RECORDINGS,
     INSERT_PREVIEW,
     REQUEST_REGION_GRID,
+    UPDATE_CAMERA_ACTIVITY,
     UPSERT_REVIEW_SEGMENT,
 )
 from frigate.models import Previews, Recordings, ReviewSegment
@@ -76,6 +78,8 @@ class Dispatcher:
         for comm in self.comms:
             comm.subscribe(self._receive)
 
+        self.camera_activity = {}
+
     def _receive(self, topic: str, payload: str) -> Optional[Any]:
         """Handle receiving of payload from communicators."""
         if topic.endswith("set"):
@@ -122,6 +126,10 @@ class Dispatcher:
             ReviewSegment.update(end_time=datetime.datetime.now().timestamp()).where(
                 ReviewSegment.end_time == None
             ).execute()
+        elif topic == UPDATE_CAMERA_ACTIVITY:
+            self.camera_activity = payload
+        elif topic == "onConnect":
+            self.publish("camera_activity", json.dumps(self.camera_activity))
         else:
             self.publish(topic, payload, retain=False)
 
diff --git a/frigate/comms/ws.py b/frigate/comms/ws.py
index fccd8db5c..65b2e8b1a 100644
--- a/frigate/comms/ws.py
+++ b/frigate/comms/ws.py
@@ -50,6 +50,10 @@ class WebSocketClient(Communicator):  # type: ignore[misc]
         class _WebSocketHandler(WebSocket):  # type: ignore[misc]
             receiver = self._dispatcher
 
+            def opened(self) -> None:
+                """A new websocket is opened, we need to send an update message"""
+                threading.Timer(1.0, self.receiver, ("onConnect", "")).start()
+
             def received_message(self, message: WebSocket.received_message) -> None:
                 try:
                     json_message = json.loads(message.data.decode("utf-8"))
diff --git a/frigate/const.py b/frigate/const.py
index 168d880fb..030d507ed 100644
--- a/frigate/const.py
+++ b/frigate/const.py
@@ -80,6 +80,7 @@ INSERT_PREVIEW = "insert_preview"
 REQUEST_REGION_GRID = "request_region_grid"
 UPSERT_REVIEW_SEGMENT = "upsert_review_segment"
 CLEAR_ONGOING_REVIEW_SEGMENTS = "clear_ongoing_review_segments"
+UPDATE_CAMERA_ACTIVITY = "update_camera_activity"
 
 # Autotracking
 
diff --git a/frigate/object_processing.py b/frigate/object_processing.py
index 9da0e2b25..9fc21a28b 100644
--- a/frigate/object_processing.py
+++ b/frigate/object_processing.py
@@ -16,6 +16,7 @@ import numpy as np
 from frigate.comms.detections_updater import DetectionPublisher, DetectionTypeEnum
 from frigate.comms.dispatcher import Dispatcher
 from frigate.comms.events_updater import EventEndSubscriber, EventUpdatePublisher
+from frigate.comms.inter_process import InterProcessRequestor
 from frigate.config import (
     CameraConfig,
     FrigateConfig,
@@ -24,7 +25,7 @@ from frigate.config import (
     SnapshotsConfig,
     ZoomingModeEnum,
 )
-from frigate.const import CLIPS_DIR
+from frigate.const import ALL_ATTRIBUTE_LABELS, CLIPS_DIR, UPDATE_CAMERA_ACTIVITY
 from frigate.events.types import EventStateEnum, EventTypeEnum
 from frigate.ptz.autotrack import PtzAutoTrackerThread
 from frigate.util.image import (
@@ -724,8 +725,31 @@ class CameraState:
 
         # TODO: can i switch to looking this up and only changing when an event ends?
         # maintain best objects
+        camera_activity: dict[str, list[any]] = {
+            "motion": len(motion_boxes) > 0,
+            "objects": [],
+        }
+
         for obj in tracked_objects.values():
             object_type = obj.obj_data["label"]
+            active = (
+                obj.obj_data["motionless_count"]
+                < self.camera_config.detect.stationary.threshold
+            )
+
+            if not obj.false_positive:
+                label = object_type
+
+                if (
+                    obj.obj_data.get("sub_label")
+                    and obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS
+                ):
+                    label = obj.obj_data["sub_label"]
+
+                camera_activity["objects"].append(
+                    {"id": obj.obj_data["id"], "label": label, "stationary": not active}
+                )
+
             # if the object's thumbnail is not from the current frame
             if obj.false_positive or obj.thumbnail_data["frame_time"] != frame_time:
                 continue
@@ -752,6 +776,9 @@ class CameraState:
                 for c in self.callbacks["snapshot"]:
                     c(self.name, self.best_objects[object_type], frame_time)
 
+        for c in self.callbacks["camera_activity"]:
+            c(self.name, camera_activity)
+
         # update overall camera state for each object type
         obj_counter = Counter(
             obj.obj_data["label"]
@@ -841,10 +868,14 @@ class TrackedObjectProcessor(threading.Thread):
         self.frame_manager = SharedMemoryFrameManager()
         self.last_motion_detected: dict[str, float] = {}
         self.ptz_autotracker_thread = ptz_autotracker_thread
+
+        self.requestor = InterProcessRequestor()
         self.detection_publisher = DetectionPublisher(DetectionTypeEnum.video)
         self.event_sender = EventUpdatePublisher()
         self.event_end_subscriber = EventEndSubscriber()
 
+        self.camera_activity: dict[str, dict[str, any]] = {}
+
         def start(camera, obj: TrackedObject, current_frame_time):
             self.event_sender.publish(
                 (
@@ -962,6 +993,13 @@ class TrackedObjectProcessor(threading.Thread):
         def object_status(camera, object_name, status):
             self.dispatcher.publish(f"{camera}/{object_name}", status, retain=False)
 
+        def camera_activity(camera, activity):
+            last_activity = self.camera_activity.get(camera)
+
+            if not last_activity or activity != last_activity:
+                self.camera_activity[camera] = activity
+                self.requestor.send_data(UPDATE_CAMERA_ACTIVITY, self.camera_activity)
+
         for camera in self.config.cameras.keys():
             camera_state = CameraState(
                 camera, self.config, self.frame_manager, self.ptz_autotracker_thread
@@ -972,6 +1010,7 @@ class TrackedObjectProcessor(threading.Thread):
             camera_state.on("end", end)
             camera_state.on("snapshot", snapshot)
             camera_state.on("object_status", object_status)
+            camera_state.on("camera_activity", camera_activity)
             self.camera_states[camera] = camera_state
 
         # {
@@ -1228,6 +1267,7 @@ class TrackedObjectProcessor(threading.Thread):
                 event_id, camera = update
                 self.camera_states[camera].finished(event_id)
 
+        self.requestor.stop()
         self.detection_publisher.stop()
         self.event_sender.stop()
         self.event_end_subscriber.stop()
diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index 2439dbb33..abe5c14b2 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -2,7 +2,12 @@ import { baseUrl } from "./baseUrl";
 import { useCallback, useEffect, useState } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { FrigateEvent, FrigateReview, ToggleableSetting } from "@/types/ws";
+import {
+  FrigateCameraState,
+  FrigateEvent,
+  FrigateReview,
+  ToggleableSetting,
+} from "@/types/ws";
 import { FrigateStats } from "@/types/stats";
 import useSWR from "swr";
 import { createContainer } from "react-tracked";
@@ -193,6 +198,16 @@ export function useFrigateStats(): { payload: FrigateStats } {
   return { payload: JSON.parse(payload as string) };
 }
 
+export function useInitialCameraState(camera: string): {
+  payload: FrigateCameraState;
+} {
+  const {
+    value: { payload },
+  } = useWs("camera_activity", "");
+  const data = JSON.parse(payload as string);
+  return { payload: data ? data[camera] : undefined };
+}
+
 export function useMotionActivity(camera: string): { payload: string } {
   const {
     value: { payload },
diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 1ea609d74..00374ad71 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -131,7 +131,11 @@ export default function Statusbar() {
                 );
 
                 if (link) {
-                  return <Link to={link}>{message}</Link>;
+                  return (
+                    <Link key={id} to={link}>
+                      {message}
+                    </Link>
+                  );
                 } else {
                   return message;
                 }
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 9fd1f6ace..49f6f7891 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -48,7 +48,7 @@ export default function LivePlayer({
 
   // camera activity
 
-  const { activeMotion, activeTracking, activeObjects } =
+  const { activeMotion, activeTracking, objects } =
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
@@ -166,7 +166,7 @@ export default function LivePlayer({
       <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       {player}
 
-      {activeObjects.length > 0 && (
+      {objects.length > 0 && (
         <div className="absolute left-0 top-2 z-40">
           <Tooltip>
             <div className="flex">
@@ -177,7 +177,7 @@ export default function LivePlayer({
                   >
                     {[
                       ...new Set([
-                        ...(activeObjects || []).map(({ label }) => label),
+                        ...(objects || []).map(({ label }) => label),
                       ]),
                     ]
                       .map((label) => {
@@ -189,11 +189,7 @@ export default function LivePlayer({
               </TooltipTrigger>
             </div>
             <TooltipContent className="capitalize">
-              {[
-                ...new Set([
-                  ...(activeObjects || []).map(({ label }) => label),
-                ]),
-              ]
+              {[...new Set([...(objects || []).map(({ label }) => label)])]
                 .filter(
                   (label) =>
                     label !== undefined && !label.includes("-verified"),
diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts
index 61a4f6299..ef065dd81 100644
--- a/web/src/hooks/use-camera-activity.ts
+++ b/web/src/hooks/use-camera-activity.ts
@@ -1,72 +1,97 @@
-import { useFrigateEvents, useMotionActivity } from "@/api/ws";
+import {
+  useFrigateEvents,
+  useInitialCameraState,
+  useMotionActivity,
+} from "@/api/ws";
 import { CameraConfig } from "@/types/frigateConfig";
 import { MotionData, ReviewSegment } from "@/types/review";
 import { useEffect, useMemo, useState } from "react";
 import { useTimelineUtils } from "./use-timeline-utils";
-
-type ActiveObjectType = {
-  id: string;
-  label: string;
-  stationary: boolean;
-};
+import { ObjectType } from "@/types/ws";
+import useDeepMemo from "./use-deep-memo";
 
 type useCameraActivityReturn = {
   activeTracking: boolean;
   activeMotion: boolean;
-  activeObjects: ActiveObjectType[];
+  objects: ObjectType[];
 };
 
 export function useCameraActivity(
   camera: CameraConfig,
 ): useCameraActivityReturn {
-  const [activeObjects, setActiveObjects] = useState<ActiveObjectType[]>([]);
+  const [objects, setObjects] = useState<ObjectType[]>([]);
+
+  // init camera activity
+
+  const { payload: initialCameraState } = useInitialCameraState(camera.name);
+
+  const updatedCameraState = useDeepMemo(initialCameraState);
+
+  useEffect(() => {
+    if (updatedCameraState) {
+      setObjects(updatedCameraState.objects);
+    }
+  }, [updatedCameraState]);
+
+  // handle camera activity
+
   const hasActiveObjects = useMemo(
-    () => activeObjects.filter((obj) => !obj.stationary).length > 0,
-    [activeObjects],
+    () => objects.filter((obj) => !obj.stationary).length > 0,
+    [objects],
   );
 
   const { payload: detectingMotion } = useMotionActivity(camera.name);
   const { payload: event } = useFrigateEvents();
+  const updatedEvent = useDeepMemo(event);
 
   useEffect(() => {
-    if (!event) {
+    if (!updatedEvent) {
       return;
     }
 
-    if (event.after.camera != camera.name) {
+    if (updatedEvent.after.camera != camera.name) {
       return;
     }
 
-    const eventIndex = activeObjects.findIndex(
-      (obj) => obj.id === event.after.id,
+    const updatedEventIndex = objects.findIndex(
+      (obj) => obj.id === updatedEvent.after.id,
     );
 
-    if (event.type == "end") {
-      if (eventIndex != -1) {
-        const newActiveObjects = [...activeObjects];
-        newActiveObjects.splice(eventIndex, 1);
-        setActiveObjects(newActiveObjects);
+    if (updatedEvent.type == "end") {
+      if (updatedEventIndex != -1) {
+        const newActiveObjects = [...objects];
+        newActiveObjects.splice(updatedEventIndex, 1);
+        setObjects(newActiveObjects);
       }
     } else {
-      if (eventIndex == -1) {
-        // add unknown event to list if not stationary
-        if (!event.after.stationary) {
-          const newActiveObject: ActiveObjectType = {
-            id: event.after.id,
-            label: event.after.label,
-            stationary: event.after.stationary,
+      if (updatedEventIndex == -1) {
+        // add unknown updatedEvent to list if not stationary
+        if (!updatedEvent.after.stationary) {
+          const newActiveObject: ObjectType = {
+            id: updatedEvent.after.id,
+            label: updatedEvent.after.label,
+            stationary: updatedEvent.after.stationary,
           };
-          const newActiveObjects = [...activeObjects, newActiveObject];
-          setActiveObjects(newActiveObjects);
+          const newActiveObjects = [...objects, newActiveObject];
+          setObjects(newActiveObjects);
         }
+      } else {
+        const newObjects = [...objects];
+        newObjects[updatedEventIndex].label =
+          updatedEvent.after.sub_label ?? updatedEvent.after.label;
+        newObjects[updatedEventIndex].stationary =
+          updatedEvent.after.stationary;
+        setObjects(newObjects);
       }
     }
-  }, [camera, event, activeObjects]);
+  }, [camera, updatedEvent, objects]);
 
   return {
     activeTracking: hasActiveObjects,
-    activeMotion: detectingMotion == "ON",
-    activeObjects,
+    activeMotion: detectingMotion
+      ? detectingMotion == "ON"
+      : initialCameraState?.motion == true,
+    objects,
   };
 }
 
diff --git a/web/src/types/ws.ts b/web/src/types/ws.ts
index 177d3600a..fb7a963c4 100644
--- a/web/src/types/ws.ts
+++ b/web/src/types/ws.ts
@@ -41,4 +41,15 @@ export interface FrigateEvent {
   after: FrigateObjectState;
 }
 
+export type ObjectType = {
+  id: string;
+  label: string;
+  stationary: boolean;
+};
+
+export interface FrigateCameraState {
+  motion: boolean;
+  objects: ObjectType[];
+}
+
 export type ToggleableSetting = "ON" | "OFF";

From 90bdb0746398a92615e982fac45cdbe69d2eef26 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 30 Apr 2024 07:27:39 -0600
Subject: [PATCH 22/56] Simplify on connect (#11176)

---
 frigate/comms/ws.py | 4 ----
 web/src/api/ws.tsx  | 8 +++++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frigate/comms/ws.py b/frigate/comms/ws.py
index 65b2e8b1a..fccd8db5c 100644
--- a/frigate/comms/ws.py
+++ b/frigate/comms/ws.py
@@ -50,10 +50,6 @@ class WebSocketClient(Communicator):  # type: ignore[misc]
         class _WebSocketHandler(WebSocket):  # type: ignore[misc]
             receiver = self._dispatcher
 
-            def opened(self) -> None:
-                """A new websocket is opened, we need to send an update message"""
-                threading.Timer(1.0, self.receiver, ("onConnect", "")).start()
-
             def received_message(self, message: WebSocket.received_message) -> None:
                 try:
                     json_message = json.loads(message.data.decode("utf-8"))
diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index abe5c14b2..34fe4b2f0 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -65,7 +65,13 @@ function useValue(): useValueReturn {
         setWsState({ ...wsState, [data.topic]: data.payload });
       }
     },
-    onOpen: () => {},
+    onOpen: () => {
+      sendJsonMessage({
+        topic: "onConnect",
+        message: "",
+        retain: false,
+      });
+    },
     shouldReconnect: () => true,
   });
 

From 297444375c0d829d9f56959a9a268dc7e41d0196 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 30 Apr 2024 18:35:23 -0600
Subject: [PATCH 23/56] UI Fixes (#11179)

* Better scaling for frigate+ dialog and thumbnails

* Always show live objects chip

* Handle sub labels

* Send sub label correctly

* Formatting

* Undo vite

* Update web/src/utils/iconUtil.tsx
---
 frigate/object_processing.py                  | 10 +++++-----
 web/src/components/card/AnimatedEventCard.tsx |  2 +-
 web/src/components/player/LivePlayer.tsx      |  7 +------
 web/src/hooks/use-camera-activity.ts          | 19 ++++++++++++++++---
 web/src/pages/SubmitPlus.tsx                  |  2 +-
 web/tailwind.config.js                        |  3 ++-
 6 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/frigate/object_processing.py b/frigate/object_processing.py
index 9fc21a28b..6dd70781e 100644
--- a/frigate/object_processing.py
+++ b/frigate/object_processing.py
@@ -740,11 +740,11 @@ class CameraState:
             if not obj.false_positive:
                 label = object_type
 
-                if (
-                    obj.obj_data.get("sub_label")
-                    and obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS
-                ):
-                    label = obj.obj_data["sub_label"]
+                if obj.obj_data.get("sub_label"):
+                    if obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS:
+                        label = obj.obj_data["sub_label"][0]
+                    else:
+                        label = f"{object_type}-verified"
 
                 camera_activity["objects"].append(
                     {"id": obj.obj_data["id"], "label": label, "stationary": not active}
diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 0ce535518..126dd4511 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -62,7 +62,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className="h-24 relative"
+          className="h-24 4k:h-32 relative"
           style={{
             aspectRatio: aspectRatio,
           }}
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 49f6f7891..dcdd6423d 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -12,7 +12,6 @@ import { LivePlayerMode, VideoResolutionType } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { getIconForLabel } from "@/utils/iconUtil";
 import Chip from "../indicators/Chip";
-import { isMobile } from "react-device-detect";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type LivePlayerProps = {
@@ -44,8 +43,6 @@ export default function LivePlayer({
   onClick,
   setFullResolution,
 }: LivePlayerProps) {
-  const [cameraHovered, setCameraHovered] = useState(false);
-
   // camera activity
 
   const { activeMotion, activeTracking, objects } =
@@ -159,8 +156,6 @@ export default function LivePlayer({
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
       onClick={onClick}
-      onMouseEnter={() => setCameraHovered(true)}
-      onMouseLeave={() => setCameraHovered(false)}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
@@ -173,7 +168,7 @@ export default function LivePlayer({
               <TooltipTrigger asChild>
                 <div className="mx-3 pb-1 text-white text-sm">
                   <Chip
-                    className={`flex items-start justify-between space-x-1 ${cameraHovered || isMobile ? "" : "hidden"} bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
+                    className={`flex items-start justify-between space-x-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
                   >
                     {[
                       ...new Set([
diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts
index ef065dd81..4e3b8b4be 100644
--- a/web/src/hooks/use-camera-activity.ts
+++ b/web/src/hooks/use-camera-activity.ts
@@ -3,7 +3,7 @@ import {
   useInitialCameraState,
   useMotionActivity,
 } from "@/api/ws";
-import { CameraConfig } from "@/types/frigateConfig";
+import { ATTRIBUTE_LABELS, CameraConfig } from "@/types/frigateConfig";
 import { MotionData, ReviewSegment } from "@/types/review";
 import { useEffect, useMemo, useState } from "react";
 import { useTimelineUtils } from "./use-timeline-utils";
@@ -29,6 +29,7 @@ export function useCameraActivity(
 
   useEffect(() => {
     if (updatedCameraState) {
+      console.log(`the initial objects are ${JSON.stringify(updatedCameraState.objects)}`)
       setObjects(updatedCameraState.objects);
     }
   }, [updatedCameraState]);
@@ -77,8 +78,20 @@ export function useCameraActivity(
         }
       } else {
         const newObjects = [...objects];
-        newObjects[updatedEventIndex].label =
-          updatedEvent.after.sub_label ?? updatedEvent.after.label;
+
+        let label = updatedEvent.after.label;
+
+        if (updatedEvent.after.sub_label) {
+          const sub_label = updatedEvent.after.sub_label[0];
+
+          if (ATTRIBUTE_LABELS.includes(sub_label)) {
+            label = sub_label;
+          } else {
+            label = `${label}-verified`;
+          }
+        }
+
+        newObjects[updatedEventIndex].label = label;
         newObjects[updatedEventIndex].stationary =
           updatedEvent.after.stationary;
         setObjects(newObjects);
diff --git a/web/src/pages/SubmitPlus.tsx b/web/src/pages/SubmitPlus.tsx
index 8cfd74c90..f51ad514d 100644
--- a/web/src/pages/SubmitPlus.tsx
+++ b/web/src/pages/SubmitPlus.tsx
@@ -141,7 +141,7 @@ export default function SubmitPlus() {
             open={upload != undefined}
             onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
           >
-            <DialogContent className="md:max-w-4xl">
+            <DialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
               <DialogHeader>
                 <DialogTitle>Submit To Frigate+</DialogTitle>
                 <DialogDescription>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 93faa87ca..924a7327e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -139,7 +139,8 @@ module.exports = {
         xs: "480px",
         "2xl": "1440px",
         "3xl": "1920px",
-        "4xl": "2560px",
+        "2k": "2560px",
+        "4k": "3180px",
       },
     },
   },

From bb335638a4a79bc54c565dabc8e4b5d64453843e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 30 Apr 2024 19:38:22 -0500
Subject: [PATCH 24/56] use alert/detection colors as background for motion
 segments (#11182)

---
 web/src/components/timeline/MotionSegment.tsx | 56 ++++---------------
 1 file changed, 12 insertions(+), 44 deletions(-)

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 438842e23..aa39e8abd 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -38,12 +38,8 @@ export function MotionSegment({
   dense,
 }: MotionSegmentProps) {
   const severityType = "all";
-  const {
-    getSeverity,
-    getReviewed,
-    displaySeverityType,
-    shouldShowRoundedCorners,
-  } = useEventSegmentUtils(segmentDuration, events, severityType);
+  const { getSeverity, getReviewed, displaySeverityType } =
+    useEventSegmentUtils(segmentDuration, events, severityType);
 
   const { interpolateMotionAudioData } = useMotionSegmentUtils(
     segmentDuration,
@@ -68,11 +64,6 @@ export function MotionSegment({
     [getReviewed, segmentTime],
   );
 
-  const { roundTopSecondary, roundBottomSecondary } = useMemo(
-    () => shouldShowRoundedCorners(segmentTime),
-    [shouldShowRoundedCorners, segmentTime],
-  );
-
   const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
   const segmentKey = useMemo(() => segmentTime, [segmentTime]);
 
@@ -152,16 +143,16 @@ export function MotionSegment({
   const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 0 ? "hidden" : ""}
     zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
 
-  const severityColors: { [key: number]: string } = {
+  const severityColorsBg: { [key: number]: string } = {
     1: reviewed
-      ? "from-severity_significant_motion-dimmed/50 to-severity_significant_motion/50"
-      : "from-severity_significant_motion-dimmed to-severity_significant_motion",
+      ? "from-severity_significant_motion-dimmed/10 to-severity_significant_motion/10"
+      : "from-severity_significant_motion-dimmed/20 to-severity_significant_motion/20",
     2: reviewed
-      ? "from-severity_detection-dimmed/50 to-severity_detection/50"
-      : "from-severity_detection-dimmed to-severity_detection",
+      ? "from-severity_detection-dimmed/10 to-severity_detection/10"
+      : "from-severity_detection-dimmed/20 to-severity_detection/20",
     3: reviewed
-      ? "from-severity_alert-dimmed/50 to-severity_alert/50"
-      : "from-severity_alert-dimmed to-severity_alert",
+      ? "from-severity_alert-dimmed/10 to-severity_alert/10"
+      : "from-severity_alert-dimmed/20 to-severity_alert/20",
   };
 
   const segmentClick = useCallback(() => {
@@ -179,7 +170,7 @@ export function MotionSegment({
         <div
           key={segmentKey}
           data-segment-id={segmentKey}
-          className={`segment ${firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0 ? "has-data" : ""} ${segmentClasses}`}
+          className={`segment ${firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0 ? "has-data" : ""} ${segmentClasses}  bg-gradient-to-r ${severityColorsBg[severity[0]]}`}
           onClick={segmentClick}
           onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
         >
@@ -219,7 +210,7 @@ export function MotionSegment({
                 <div
                   key={`${segmentKey}_motion_data_1`}
                   data-motion-value={secondHalfSegmentWidth}
-                  className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
+                  className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full bg-motion_review`}
                   style={{
                     width: secondHalfSegmentWidth || 1,
                   }}
@@ -232,7 +223,7 @@ export function MotionSegment({
                 <div
                   key={`${segmentKey}_motion_data_2`}
                   data-motion-value={firstHalfSegmentWidth}
-                  className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
+                  className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full bg-motion_review`}
                   style={{
                     width: firstHalfSegmentWidth || 1,
                   }}
@@ -240,29 +231,6 @@ export function MotionSegment({
               </div>
             </div>
           </div>
-
-          {!motionOnly &&
-            severity.map((severityValue: number, index: number) => {
-              if (severityValue > 0) {
-                return (
-                  <React.Fragment key={index}>
-                    <div className="absolute right-0 h-[8px] z-10">
-                      <div
-                        key={`${segmentKey}_${index}_secondary_data`}
-                        className={`
-                          w-1 h-[8px] bg-gradient-to-r
-                          ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
-                          ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
-                          ${severityColors[severityValue]}
-                        `}
-                      ></div>
-                    </div>
-                  </React.Fragment>
-                );
-              } else {
-                return null;
-              }
-            })}
         </div>
       )}
     </>

From 6d2457ebad91e7fdece141659b1bf9c8097aec81 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 1 May 2024 09:07:56 -0500
Subject: [PATCH 25/56] Revamp object debug view (#11186)

* revamp object debug view

* fix vite

* remove console log

* don't display empty fields

* clarify masks as motion masks

* add descriptions

* color and spacing

* add sub_label to camera activity

* add sub_label to type

* rename to debug
---
 frigate/api/app.py                            |   1 +
 frigate/object_processing.py                  |  12 +-
 .../components/settings/ObjectSettings.tsx    | 258 +++++++++++++++++-
 web/src/hooks/use-camera-activity.ts          |  45 +--
 web/src/pages/Settings.tsx                    |   8 +-
 web/src/types/frigateConfig.ts                |   1 +
 web/src/types/ws.ts                           |   4 +
 7 files changed, 301 insertions(+), 28 deletions(-)

diff --git a/frigate/api/app.py b/frigate/api/app.py
index 5d0bce78b..67ad072a7 100644
--- a/frigate/api/app.py
+++ b/frigate/api/app.py
@@ -164,6 +164,7 @@ def config():
             camera_dict["zones"][zone_name]["color"] = zone.color
 
     config["plus"] = {"enabled": current_app.plus_api.is_active()}
+    config["model"]["colormap"] = config_obj.model.colormap
 
     for detector_config in config["detectors"].values():
         detector_config["model"]["labelmap"] = (
diff --git a/frigate/object_processing.py b/frigate/object_processing.py
index 6dd70781e..676c175ec 100644
--- a/frigate/object_processing.py
+++ b/frigate/object_processing.py
@@ -739,15 +739,25 @@ class CameraState:
 
             if not obj.false_positive:
                 label = object_type
+                sub_label = None
 
                 if obj.obj_data.get("sub_label"):
                     if obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS:
                         label = obj.obj_data["sub_label"][0]
                     else:
                         label = f"{object_type}-verified"
+                        sub_label = obj.obj_data["sub_label"][0]
 
                 camera_activity["objects"].append(
-                    {"id": obj.obj_data["id"], "label": label, "stationary": not active}
+                    {
+                        "id": obj.obj_data["id"],
+                        "label": label,
+                        "stationary": not active,
+                        "area": obj.obj_data["area"],
+                        "ratio": obj.obj_data["ratio"],
+                        "score": obj.obj_data["score"],
+                        "sub_label": sub_label,
+                    }
                 )
 
             # if the object's thumbnail is not from the current frame
diff --git a/web/src/components/settings/ObjectSettings.tsx b/web/src/components/settings/ObjectSettings.tsx
index 92dac2d7d..15d51aa54 100644
--- a/web/src/components/settings/ObjectSettings.tsx
+++ b/web/src/components/settings/ObjectSettings.tsx
@@ -1,24 +1,104 @@
-import { useEffect, useMemo } from "react";
-import DebugCameraImage from "../camera/DebugCameraImage";
-import { FrigateConfig } from "@/types/frigateConfig";
+import { useCallback, useEffect, useMemo } from "react";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import AutoUpdatingCameraImage from "@/components/camera/AutoUpdatingCameraImage";
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import { Toaster } from "@/components/ui/sonner";
+import { Label } from "@/components/ui/label";
 import useSWR from "swr";
-import ActivityIndicator from "../indicators/activity-indicator";
+import Heading from "../ui/heading";
+import { Switch } from "../ui/switch";
+import { usePersistence } from "@/hooks/use-persistence";
+import { Skeleton } from "../ui/skeleton";
+import { useCameraActivity } from "@/hooks/use-camera-activity";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { ObjectType } from "@/types/ws";
+import useDeepMemo from "@/hooks/use-deep-memo";
+import { Card } from "../ui/card";
+import { getIconForLabel } from "@/utils/iconUtil";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type ObjectSettingsProps = {
   selectedCamera?: string;
 };
 
+type Options = { [key: string]: boolean };
+
+const emptyObject = Object.freeze({});
+
 export default function ObjectSettings({
   selectedCamera,
 }: ObjectSettingsProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  const DEBUG_OPTIONS = [
+    {
+      param: "bbox",
+      title: "Bounding boxes",
+      description: "Show bounding boxes around detected objects",
+    },
+    {
+      param: "timestamp",
+      title: "Timestamp",
+      description: "Overlay a timestamp on the image",
+    },
+    {
+      param: "zones",
+      title: "Zones",
+      description: "Show an outline of any defined zones",
+    },
+    {
+      param: "mask",
+      title: "Motion masks",
+      description: "Show motion mask polygons",
+    },
+    {
+      param: "motion",
+      title: "Motion boxes",
+      description: "Show boxes around areas where motion is detected",
+    },
+    {
+      param: "regions",
+      title: "Regions",
+      description:
+        "Show a box of the region of interest sent to the object detector",
+    },
+  ];
+
+  const [options, setOptions] = usePersistence<Options>(
+    `${selectedCamera}-feed`,
+    emptyObject,
+  );
+
+  const handleSetOption = useCallback(
+    (id: string, value: boolean) => {
+      const newOptions = { ...options, [id]: value };
+      setOptions(newOptions);
+    },
+    [options, setOptions],
+  );
+
   const cameraConfig = useMemo(() => {
     if (config && selectedCamera) {
       return config.cameras[selectedCamera];
     }
   }, [config, selectedCamera]);
 
+  const { objects } = useCameraActivity(cameraConfig ?? ({} as CameraConfig));
+
+  const memoizedObjects = useDeepMemo(objects);
+
+  const searchParams = useMemo(
+    () =>
+      new URLSearchParams(
+        Object.keys(options || {}).reduce((memo, key) => {
+          //@ts-expect-error we know this is correct
+          memo.push([key, options[key] === true ? "1" : "0"]);
+          return memo;
+        }, []),
+      ),
+    [options],
+  );
+
   useEffect(() => {
     document.title = "Object Settings - Frigate";
   }, []);
@@ -28,8 +108,174 @@ export default function ObjectSettings({
   }
 
   return (
-    <div className="flex flex-col h-50">
-      <DebugCameraImage cameraConfig={cameraConfig} className="size-full" />
+    <div className="flex flex-col md:flex-row size-full">
+      <Toaster position="top-center" />
+      <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
+        <Heading as="h3" className="my-2">
+          Debug
+        </Heading>
+        <div className="text-sm text-muted-foreground mb-5 space-y-3">
+          <p>
+            Frigate uses your detectors{" "}
+            {config
+              ? "(" +
+                Object.keys(config?.detectors)
+                  .map((detector) => capitalizeFirstLetter(detector))
+                  .join(",") +
+                ")"
+              : ""}{" "}
+            to detect objects in your camera's video stream.
+          </p>
+          <p>
+            Debugging view shows a real-time view of detected objects and their
+            statistics. The object list shows a time-delayed summary of detected
+            objects.
+          </p>
+        </div>
+
+        <Tabs defaultValue="debug" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="debug">Debugging</TabsTrigger>
+            <TabsTrigger value="objectlist">Object List</TabsTrigger>
+          </TabsList>
+          <TabsContent value="debug">
+            <div className="flex flex-col w-full space-y-6">
+              <div className="mt-2 space-y-6">
+                <div className="my-2.5 flex flex-col gap-2.5">
+                  {DEBUG_OPTIONS.map(({ param, title, description }) => (
+                    <div
+                      key={param}
+                      className="flex flex-row w-full justify-between items-center"
+                    >
+                      <div className="flex flex-col mb-2">
+                        <Label
+                          className="w-full text-primary capitalize cursor-pointer mb-2"
+                          htmlFor={param}
+                        >
+                          {title}
+                        </Label>
+                        <div className="text-xs text-muted-foreground">
+                          {description}
+                        </div>
+                      </div>
+                      <Switch
+                        key={param}
+                        className="ml-1"
+                        id={param}
+                        checked={options && options[param]}
+                        onCheckedChange={(isChecked) => {
+                          handleSetOption(param, isChecked);
+                        }}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+          <TabsContent value="objectlist">
+            {ObjectList(memoizedObjects)}
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {cameraConfig ? (
+        <div className="flex md:w-7/12 md:grow md:h-dvh md:max-h-full">
+          <div className="size-full min-h-10">
+            <AutoUpdatingCameraImage
+              camera={cameraConfig.name}
+              searchParams={searchParams}
+              showFps={false}
+              className="size-full"
+              cameraClasses="relative w-full h-full flex flex-col justify-start"
+            />
+          </div>
+        </div>
+      ) : (
+        <Skeleton className="size-full rounded-lg md:rounded-2xl" />
+      )}
+    </div>
+  );
+}
+
+function ObjectList(objects?: ObjectType[]) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const colormap = useMemo(() => {
+    if (!config) {
+      return;
+    }
+
+    return config.model?.colormap;
+  }, [config]);
+
+  const getColorForObjectName = useCallback(
+    (objectName: string) => {
+      return colormap && colormap[objectName]
+        ? `rgb(${colormap[objectName][2]}, ${colormap[objectName][1]}, ${colormap[objectName][0]})`
+        : "rgb(128, 128, 128)";
+    },
+    [colormap],
+  );
+
+  return (
+    <div className="flex flex-col w-full overflow-y-auto">
+      {objects && objects.length > 0 ? (
+        objects.map((obj) => {
+          return (
+            <Card className="text-sm p-2 mb-1" key={obj.id}>
+              <div className="flex flex-row items-center gap-3 pb-1">
+                <div className="flex flex-row flex-1 items-center justify-start p-3 pl-1">
+                  <div
+                    className="p-2 rounded-lg"
+                    style={{
+                      backgroundColor: obj.stationary
+                        ? "rgb(110,110,110)"
+                        : getColorForObjectName(obj.label),
+                    }}
+                  >
+                    {getIconForLabel(obj.label, "size-5 text-white")}
+                  </div>
+                  <div className="ml-3 text-lg">
+                    {capitalizeFirstLetter(obj.label)}
+                  </div>
+                </div>
+                <div className="flex flex-row w-8/12 items-end justify-end">
+                  <div className="mr-2 text-md w-1/3">
+                    <div className="flex flex-col items-end justify-end">
+                      <p className="text-sm mb-1.5 text-primary-variant">
+                        Score
+                      </p>
+                      {obj.score
+                        ? (obj.score * 100).toFixed(1).toString()
+                        : "-"}
+                      %
+                    </div>
+                  </div>
+                  <div className="mr-2 text-md w-1/3">
+                    <div className="flex flex-col items-end justify-end">
+                      <p className="text-sm mb-1.5 text-primary-variant">
+                        Ratio
+                      </p>
+                      {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
+                    </div>
+                  </div>
+                  <div className="mr-2 text-md w-1/3">
+                    <div className="flex flex-col items-end justify-end">
+                      <p className="text-sm mb-1.5 text-primary-variant">
+                        Area
+                      </p>
+                      {obj.area ? obj.area.toString() : "-"}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          );
+        })
+      ) : (
+        <div className="p-3 text-center">No objects</div>
+      )}
     </div>
   );
 }
diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts
index 4e3b8b4be..074c2be52 100644
--- a/web/src/hooks/use-camera-activity.ts
+++ b/web/src/hooks/use-camera-activity.ts
@@ -5,10 +5,11 @@ import {
 } from "@/api/ws";
 import { ATTRIBUTE_LABELS, CameraConfig } from "@/types/frigateConfig";
 import { MotionData, ReviewSegment } from "@/types/review";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTimelineUtils } from "./use-timeline-utils";
 import { ObjectType } from "@/types/ws";
 import useDeepMemo from "./use-deep-memo";
+import { isEqual } from "lodash";
 
 type useCameraActivityReturn = {
   activeTracking: boolean;
@@ -29,10 +30,9 @@ export function useCameraActivity(
 
   useEffect(() => {
     if (updatedCameraState) {
-      console.log(`the initial objects are ${JSON.stringify(updatedCameraState.objects)}`)
       setObjects(updatedCameraState.objects);
     }
-  }, [updatedCameraState]);
+  }, [updatedCameraState, camera]);
 
   // handle camera activity
 
@@ -45,12 +45,21 @@ export function useCameraActivity(
   const { payload: event } = useFrigateEvents();
   const updatedEvent = useDeepMemo(event);
 
+  const handleSetObjects = useCallback(
+    (newObjects: ObjectType[]) => {
+      if (!isEqual(objects, newObjects)) {
+        setObjects(newObjects);
+      }
+    },
+    [objects],
+  );
+
   useEffect(() => {
     if (!updatedEvent) {
       return;
     }
 
-    if (updatedEvent.after.camera != camera.name) {
+    if (updatedEvent.after.camera !== camera.name) {
       return;
     }
 
@@ -58,23 +67,26 @@ export function useCameraActivity(
       (obj) => obj.id === updatedEvent.after.id,
     );
 
-    if (updatedEvent.type == "end") {
-      if (updatedEventIndex != -1) {
-        const newActiveObjects = [...objects];
-        newActiveObjects.splice(updatedEventIndex, 1);
-        setObjects(newActiveObjects);
+    let newObjects: ObjectType[] = [...objects];
+
+    if (updatedEvent.type === "end") {
+      if (updatedEventIndex !== -1) {
+        newObjects.splice(updatedEventIndex, 1);
       }
     } else {
-      if (updatedEventIndex == -1) {
+      if (updatedEventIndex === -1) {
         // add unknown updatedEvent to list if not stationary
         if (!updatedEvent.after.stationary) {
           const newActiveObject: ObjectType = {
             id: updatedEvent.after.id,
             label: updatedEvent.after.label,
             stationary: updatedEvent.after.stationary,
+            area: updatedEvent.after.area,
+            ratio: updatedEvent.after.ratio,
+            score: updatedEvent.after.score,
+            sub_label: updatedEvent.after.sub_label?.[0] ?? "",
           };
-          const newActiveObjects = [...objects, newActiveObject];
-          setObjects(newActiveObjects);
+          newObjects = [...objects, newActiveObject];
         }
       } else {
         const newObjects = [...objects];
@@ -94,16 +106,17 @@ export function useCameraActivity(
         newObjects[updatedEventIndex].label = label;
         newObjects[updatedEventIndex].stationary =
           updatedEvent.after.stationary;
-        setObjects(newObjects);
       }
     }
-  }, [camera, updatedEvent, objects]);
+
+    handleSetObjects(newObjects);
+  }, [camera, updatedEvent, objects, handleSetObjects]);
 
   return {
     activeTracking: hasActiveObjects,
     activeMotion: detectingMotion
-      ? detectingMotion == "ON"
-      : initialCameraState?.motion == true,
+      ? detectingMotion === "ON"
+      : initialCameraState?.motion === true,
     objects,
   };
 }
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index d0bd80102..96f48f6d9 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -37,9 +37,9 @@ import scrollIntoView from "scroll-into-view-if-needed";
 export default function Settings() {
   const settingsViews = [
     "general",
-    "objects",
     "masks / zones",
     "motion tuner",
+    "debug",
   ] as const;
 
   type SettingsType = (typeof settingsViews)[number];
@@ -135,7 +135,7 @@ export default function Settings() {
             <ScrollBar orientation="horizontal" className="h-0" />
           </div>
         </ScrollArea>
-        {(page == "objects" ||
+        {(page == "debug" ||
           page == "masks / zones" ||
           page == "motion tuner") && (
           <div className="flex items-center gap-2 ml-2 flex-shrink-0">
@@ -155,9 +155,7 @@ export default function Settings() {
       </div>
       <div className="mt-2 flex flex-col items-start w-full h-full md:h-dvh md:pb-24">
         {page == "general" && <General />}
-        {page == "objects" && (
-          <ObjectSettings selectedCamera={selectedCamera} />
-        )}
+        {page == "debug" && <ObjectSettings selectedCamera={selectedCamera} />}
         {page == "masks / zones" && (
           <MasksAndZones
             selectedCamera={selectedCamera}
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index b5c89f5db..517a00761 100644
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -324,6 +324,7 @@ export interface FrigateConfig {
     model_type: string;
     path: string | null;
     width: number;
+    colormap: { [key: string]: [number, number, number] };
   };
 
   motion: Record<string, unknown> | null;
diff --git a/web/src/types/ws.ts b/web/src/types/ws.ts
index fb7a963c4..0fae44b07 100644
--- a/web/src/types/ws.ts
+++ b/web/src/types/ws.ts
@@ -45,6 +45,10 @@ export type ObjectType = {
   id: string;
   label: string;
   stationary: boolean;
+  area: number;
+  ratio: number;
+  score: number;
+  sub_label: string;
 };
 
 export interface FrigateCameraState {

From 499f70cfd3135254c4c233bed5239507aaaff743 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 1 May 2024 09:08:10 -0500
Subject: [PATCH 26/56] config validation fixes (#11191)

---
 frigate/config.py                                 | 6 +++---
 web/src/components/filter/CameraGroupSelector.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frigate/config.py b/frigate/config.py
index d7ee147f3..0d5c9fb47 100644
--- a/frigate/config.py
+++ b/frigate/config.py
@@ -518,7 +518,7 @@ class ZoneConfig(BaseModel):
         ge=0,
         title="Number of seconds that an object must loiter to be considered in the zone.",
     )
-    objects: List[str] = Field(
+    objects: Union[str, List[str]] = Field(
         default_factory=list,
         title="List of objects that can trigger the zone.",
     )
@@ -616,7 +616,7 @@ class AlertsConfig(FrigateBaseModel):
     labels: List[str] = Field(
         default=DEFAULT_ALERT_OBJECTS, title="Labels to create alerts for."
     )
-    required_zones: List[str] = Field(
+    required_zones: Union[str, List[str]] = Field(
         default_factory=list,
         title="List of required zones to be entered in order to save the event as an alert.",
     )
@@ -636,7 +636,7 @@ class DetectionsConfig(FrigateBaseModel):
     labels: Optional[List[str]] = Field(
         default=None, title="Labels to create detections for."
     )
-    required_zones: List[str] = Field(
+    required_zones: Union[str, List[str]] = Field(
         default_factory=list,
         title="List of required zones to be entered in order to save the event as a detection.",
     )
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 651a4ca5a..3b9b3e20f 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -485,7 +485,7 @@ export function CameraGroupEdit({
           ? currentGroups.length + 1
           : editingGroup[1].order;
 
-      const orderQuery = `camera_groups.${values.name}.order=${order}`;
+      const orderQuery = `camera_groups.${values.name}.order=${+order}`;
       const iconQuery = `camera_groups.${values.name}.icon=${values.icon}`;
       const cameraQueries = values.cameras
         .map((cam) => `&camera_groups.${values.name}.cameras=${cam}`)

From b5b819c86649139594cc9f39cc80913250569f6a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 1 May 2024 08:11:16 -0600
Subject: [PATCH 27/56] Add severity filter (#11190)

* Allow viewing all types on single screen

* Implement for mobile as well

* fix import

* Show all is optional
---
 web/src/components/filter/FilterSwitch.tsx    |  5 +-
 .../components/filter/ReviewFilterGroup.tsx   | 48 +++++++++++++++++--
 .../overlay/MobileReviewSettingsDrawer.tsx    |  9 +++-
 web/src/types/review.ts                       |  1 +
 web/src/views/events/EventView.tsx            |  9 +++-
 5 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/web/src/components/filter/FilterSwitch.tsx b/web/src/components/filter/FilterSwitch.tsx
index 8af6d6ce3..288e3f64a 100644
--- a/web/src/components/filter/FilterSwitch.tsx
+++ b/web/src/components/filter/FilterSwitch.tsx
@@ -3,24 +3,27 @@ import { Label } from "../ui/label";
 
 type FilterSwitchProps = {
   label: string;
+  disabled?: boolean;
   isChecked: boolean;
   onCheckedChange: (checked: boolean) => void;
 };
 export default function FilterSwitch({
   label,
+  disabled = false,
   isChecked,
   onCheckedChange,
 }: FilterSwitchProps) {
   return (
     <div className="flex justify-between items-center gap-1">
       <Label
-        className="w-full mx-2 text-primary capitalize cursor-pointer"
+        className={`w-full mx-2 text-primary capitalize cursor-pointer ${disabled ? "text-secondary-foreground" : ""}`}
         htmlFor={label}
       >
         {label}
       </Label>
       <Switch
         id={label}
+        disabled={disabled}
         checked={isChecked}
         onCheckedChange={onCheckedChange}
       />
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 0b0283a91..ab597c85a 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -10,7 +10,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { ReviewFilter, ReviewSummary } from "@/types/review";
+import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import {
@@ -49,19 +49,21 @@ const DEFAULT_REVIEW_FILTERS: ReviewFilters[] = [
 
 type ReviewFilterGroupProps = {
   filters?: ReviewFilters[];
+  currentSeverity?: ReviewSeverity;
   reviewSummary?: ReviewSummary;
   filter?: ReviewFilter;
-  onUpdateFilter: (filter: ReviewFilter) => void;
   motionOnly: boolean;
+  onUpdateFilter: (filter: ReviewFilter) => void;
   setMotionOnly: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export default function ReviewFilterGroup({
   filters = DEFAULT_REVIEW_FILTERS,
+  currentSeverity,
   reviewSummary,
   filter,
-  onUpdateFilter,
   motionOnly,
+  onUpdateFilter,
   setMotionOnly,
 }: ReviewFilterGroupProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -179,6 +181,11 @@ export default function ReviewFilterGroup({
         <GeneralFilterButton
           allLabels={filterValues.labels}
           selectedLabels={filter?.labels}
+          currentSeverity={currentSeverity}
+          showAll={filter?.showAll == true}
+          setShowAll={(showAll) => {
+            onUpdateFilter({ ...filter, showAll });
+          }}
           updateLabelFilter={(newLabels) => {
             onUpdateFilter({ ...filter, labels: newLabels });
           }}
@@ -188,6 +195,7 @@ export default function ReviewFilterGroup({
         <MobileReviewSettingsDrawer
           features={mobileSettingsFeatures}
           filter={filter}
+          currentSeverity={currentSeverity}
           reviewSummary={reviewSummary}
           onUpdateFilter={onUpdateFilter}
           // not applicable as exports are not used
@@ -477,11 +485,17 @@ function CalendarFilterButton({
 type GeneralFilterButtonProps = {
   allLabels: string[];
   selectedLabels: string[] | undefined;
+  currentSeverity?: ReviewSeverity;
+  showAll: boolean;
+  setShowAll: (showAll: boolean) => void;
   updateLabelFilter: (labels: string[] | undefined) => void;
 };
 function GeneralFilterButton({
   allLabels,
   selectedLabels,
+  currentSeverity,
+  showAll,
+  setShowAll,
   updateLabelFilter,
 }: GeneralFilterButtonProps) {
   const [open, setOpen] = useState(false);
@@ -510,6 +524,9 @@ function GeneralFilterButton({
       allLabels={allLabels}
       selectedLabels={selectedLabels}
       currentLabels={currentLabels}
+      currentSeverity={currentSeverity}
+      showAll={showAll}
+      setShowAll={setShowAll}
       updateLabelFilter={updateLabelFilter}
       setCurrentLabels={setCurrentLabels}
       onClose={() => setOpen(false)}
@@ -557,6 +574,9 @@ type GeneralFilterContentProps = {
   allLabels: string[];
   selectedLabels: string[] | undefined;
   currentLabels: string[] | undefined;
+  currentSeverity?: ReviewSeverity;
+  showAll?: boolean;
+  setShowAll?: (showAll: boolean) => void;
   updateLabelFilter: (labels: string[] | undefined) => void;
   setCurrentLabels: (labels: string[] | undefined) => void;
   onClose: () => void;
@@ -565,6 +585,9 @@ export function GeneralFilterContent({
   allLabels,
   selectedLabels,
   currentLabels,
+  currentSeverity,
+  showAll,
+  setShowAll,
   updateLabelFilter,
   setCurrentLabels,
   onClose,
@@ -572,6 +595,25 @@ export function GeneralFilterContent({
   return (
     <>
       <div className="h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
+        {currentSeverity && setShowAll && (
+          <div className="my-2.5 flex flex-col gap-2.5">
+            <FilterSwitch
+              label="Alerts"
+              disabled={currentSeverity == "alert"}
+              isChecked={currentSeverity == "alert" ? true : showAll == true}
+              onCheckedChange={setShowAll}
+            />
+            <FilterSwitch
+              label="Detections"
+              disabled={currentSeverity == "detection"}
+              isChecked={
+                currentSeverity == "detection" ? true : showAll == true
+              }
+              onCheckedChange={setShowAll}
+            />
+            <DropdownMenuSeparator />
+          </div>
+        )}
         <div className="flex justify-between items-center my-2.5">
           <Label
             className="mx-2 text-primary cursor-pointer"
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 4cf251cb3..7bd92807a 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -7,7 +7,7 @@ import { ExportContent } from "./ExportDialog";
 import { ExportMode } from "@/types/filter";
 import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
-import { ReviewFilter, ReviewSummary } from "@/types/review";
+import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
 import useSWR from "swr";
@@ -31,6 +31,7 @@ type MobileReviewSettingsDrawerProps = {
   features?: DrawerFeatures[];
   camera: string;
   filter?: ReviewFilter;
+  currentSeverity?: ReviewSeverity;
   latestTime: number;
   currentTime: number;
   range?: TimeRange;
@@ -44,6 +45,7 @@ export default function MobileReviewSettingsDrawer({
   features = DEFAULT_DRAWER_FEATURES,
   camera,
   filter,
+  currentSeverity,
   latestTime,
   currentTime,
   range,
@@ -263,6 +265,11 @@ export default function MobileReviewSettingsDrawer({
           allLabels={allLabels}
           selectedLabels={filter?.labels}
           currentLabels={currentLabels}
+          currentSeverity={currentSeverity}
+          showAll={filter?.showAll == true}
+          setShowAll={(showAll) => {
+            onUpdateFilter({ ...filter, showAll });
+          }}
           setCurrentLabels={setCurrentLabels}
           updateLabelFilter={(newLabels) =>
             onUpdateFilter({ ...filter, labels: newLabels })
diff --git a/web/src/types/review.ts b/web/src/types/review.ts
index bbefaf5d3..989499175 100644
--- a/web/src/types/review.ts
+++ b/web/src/types/review.ts
@@ -26,6 +26,7 @@ export type ReviewFilter = {
   before?: number;
   after?: number;
   showReviewed?: 0 | 1;
+  showAll?: boolean;
 };
 
 type ReviewSummaryDay = {
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index caeaef5b4..0f9407451 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -270,6 +270,7 @@ export default function EventView({
                 ? ["cameras", "date", "motionOnly"]
                 : ["cameras", "reviewed", "date", "general"]
             }
+            currentSeverity={severityToggle}
             reviewSummary={reviewSummary}
             filter={filter}
             onUpdateFilter={updateFilter}
@@ -370,7 +371,13 @@ function DetectionReview({
       return null;
     }
 
-    const current = reviewItems[severity];
+    let current;
+
+    if (filter?.showAll) {
+      current = reviewItems.all;
+    } else {
+      current = reviewItems[severity];
+    }
 
     if (!current || current.length == 0) {
       return [];

From 2e639415987ca3eb546aed842f06eef691636d8e Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 1 May 2024 08:24:19 -0600
Subject: [PATCH 28/56] Fix scroll back (#11192)

---
 web/src/views/events/EventView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 0f9407451..7c33648f0 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -520,7 +520,7 @@ function DetectionReview({
     }
 
     const element = contentRef.current?.querySelector(
-      `[data-start="${startTime}"]`,
+      `[data-start="${startTime + REVIEW_PADDING}"]`,
     );
     if (element) {
       scrollIntoView(element, {

From 28dd871d44fe089c9bb7973d540e0d0cf5b12217 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 1 May 2024 20:23:03 -0600
Subject: [PATCH 29/56] Show motion playback on page initially (#11196)

* motion video controls handle current time better

* Make sure state is updated
---
 web/src/hooks/use-overlay-state.tsx | 10 +++--
 web/src/views/events/EventView.tsx  | 61 +++++++++++++++--------------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
index 656b61bda..391712c6a 100644
--- a/web/src/hooks/use-overlay-state.tsx
+++ b/web/src/hooks/use-overlay-state.tsx
@@ -8,7 +8,8 @@ export function useOverlayState<S>(
 ): [S | undefined, (value: S, replace?: boolean) => void] {
   const location = useLocation();
   const navigate = useNavigate();
-  const currentLocationState = location.state;
+
+  const currentLocationState = useMemo(() => location.state, [location]);
 
   const setOverlayStateValue = useCallback(
     (value: S, replace: boolean = false) => {
@@ -18,7 +19,7 @@ export function useOverlayState<S>(
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [key, navigate],
+    [key, currentLocationState, navigate],
   );
 
   const overlayStateValue = useMemo<S | undefined>(
@@ -39,7 +40,8 @@ export function usePersistedOverlayState<S extends string>(
   );
   const location = useLocation();
   const navigate = useNavigate();
-  const currentLocationState = location.state;
+
+  const currentLocationState = useMemo(() => location.state, [location]);
 
   const setOverlayStateValue = useCallback(
     (value: S | undefined, replace: boolean = false) => {
@@ -50,7 +52,7 @@ export function usePersistedOverlayState<S extends string>(
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [key, navigate],
+    [key, currentLocationState, navigate],
   );
 
   const overlayStateValue = useMemo<S | undefined>(
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 7c33648f0..18f7731dd 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -805,6 +805,11 @@ function MotionReview({
         return;
       }
 
+      if (nextTimestamp >= timeRange.before - 4) {
+        setPlaying(false);
+        return;
+      }
+
       const handleTimeout = () => {
         setCurrentTime(nextTimestamp);
         timeoutIdRef.current = setTimeout(handleTimeout, 500 / playbackRate);
@@ -818,7 +823,7 @@ function MotionReview({
         }
       };
     }
-  }, [playing, playbackRate, nextTimestamp]);
+  }, [playing, playbackRate, nextTimestamp, setPlaying, timeRange]);
 
   const { alignStartDateToTimeline } = useTimelineUtils({
     segmentDuration,
@@ -962,37 +967,35 @@ function MotionReview({
         )}
       </div>
 
-      {!scrubbing && (
-        <VideoControls
-          className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
-          features={{
-            volume: false,
-            seek: true,
-            playbackRate: true,
-          }}
-          isPlaying={playing}
-          playbackRates={[4, 8, 12, 16]}
-          playbackRate={playbackRate}
-          controlsOpen={controlsOpen}
-          setControlsOpen={setControlsOpen}
-          onPlayPause={setPlaying}
-          onSeek={(diff) => {
-            const wasPlaying = playing;
+      <VideoControls
+        className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
+        features={{
+          volume: false,
+          seek: true,
+          playbackRate: true,
+        }}
+        isPlaying={playing}
+        show={!scrubbing}
+        playbackRates={[4, 8, 12, 16]}
+        playbackRate={playbackRate}
+        controlsOpen={controlsOpen}
+        setControlsOpen={setControlsOpen}
+        onPlayPause={setPlaying}
+        onSeek={(diff) => {
+          const wasPlaying = playing;
 
-            if (wasPlaying) {
-              setPlaying(false);
-            }
+          if (wasPlaying) {
+            setPlaying(false);
+          }
 
-            setCurrentTime(currentTime + diff);
+          setCurrentTime(currentTime + diff);
 
-            if (wasPlaying) {
-              setTimeout(() => setPlaying(true), 100);
-            }
-          }}
-          onSetPlaybackRate={setPlaybackRate}
-          show={currentTime < timeRange.before - 4}
-        />
-      )}
+          if (wasPlaying) {
+            setTimeout(() => setPlaying(true), 100);
+          }
+        }}
+        onSetPlaybackRate={setPlaybackRate}
+      />
     </>
   );
 }

From a3267f7d44bd67fb19034e6b6a77ef4fcd1f8b13 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 2 May 2024 06:52:44 -0600
Subject: [PATCH 30/56] Add more icons (#11204)

---
 web/src/utils/iconUtil.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/web/src/utils/iconUtil.tsx b/web/src/utils/iconUtil.tsx
index bc9f74a8b..d2ba08715 100644
--- a/web/src/utils/iconUtil.tsx
+++ b/web/src/utils/iconUtil.tsx
@@ -1,6 +1,8 @@
 import { BsPersonWalking } from "react-icons/bs";
 import {
   FaAmazon,
+  FaBicycle,
+  FaBus,
   FaCarSide,
   FaCat,
   FaCheckCircle,
@@ -11,6 +13,7 @@ import {
   FaLeaf,
   FaUps,
 } from "react-icons/fa";
+import { GiHummingbird } from "react-icons/gi";
 import { LuBox, LuLassoSelect } from "react-icons/lu";
 import { MdRecordVoiceOver } from "react-icons/md";
 
@@ -40,10 +43,18 @@ export function getIconForLabel(label: string, className?: string) {
   }
 
   switch (label) {
+    case "bicycle":
+      return <FaBicycle key={label} className={className} />;
+    case "bird":
+      return <GiHummingbird key={label} className={className} />;
+    case "bus":
+      return <FaBus key={label} className={className} />;
     case "car":
+    case "vehicle":
       return <FaCarSide key={label} className={className} />;
     case "cat":
       return <FaCat key={label} className={className} />;
+    case "animal":
     case "bark":
     case "dog":
       return <FaDog key={label} className={className} />;

From 7a5df6045acc045337f6f8da4acc91933f240202 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 2 May 2024 14:06:32 -0500
Subject: [PATCH 31/56] make circle radius larger on mobile only (#11210)

---
 web/src/components/settings/PolygonDrawer.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/settings/PolygonDrawer.tsx b/web/src/components/settings/PolygonDrawer.tsx
index 99d05888e..a2209d35e 100644
--- a/web/src/components/settings/PolygonDrawer.tsx
+++ b/web/src/components/settings/PolygonDrawer.tsx
@@ -9,6 +9,7 @@ import {
 import type { KonvaEventObject } from "konva/lib/Node";
 import Konva from "konva";
 import { Vector2d } from "konva/lib/types";
+import { isMobileOnly } from "react-device-detect";
 
 type PolygonDrawerProps = {
   points: number[][];
@@ -45,7 +46,7 @@ export default function PolygonDrawer({
   handleMouseOverAnyPoint,
   handleMouseOutAnyPoint,
 }: PolygonDrawerProps) {
-  const vertexRadius = 6;
+  const vertexRadius = isMobileOnly ? 12 : 6;
   const flattenedPoints = useMemo(() => flattenPoints(points), [points]);
   const [stage, setStage] = useState<Konva.Stage>();
   const [minMaxX, setMinMaxX] = useState([0, 0]);

From b69c1828cbd6129700e47cdcaf287f75a7aefe2e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 2 May 2024 15:05:20 -0500
Subject: [PATCH 32/56] Fix overflowing portrait images in debug and motion
 tuner views (#11209)

* fix overflowing camera image and remove mse console debug

* move calc into onLoad

* check container aspect
---
 web/src/components/camera/CameraImage.tsx | 14 +++++++++++++-
 web/src/components/player/MsePlayer.tsx   |  6 ++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index ab0bfdf08..b4fb707bc 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -2,6 +2,7 @@ import { useApiHost } from "@/api";
 import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import ActivityIndicator from "../indicators/activity-indicator";
+import { useResizeObserver } from "@/hooks/resize-observer";
 
 type CameraImageProps = {
   className?: string;
@@ -24,6 +25,7 @@ export default function CameraImage({
 
   const { name } = config ? config.cameras[camera] : "";
   const enabled = config ? config.cameras[camera].enabled : "True";
+  const [isPortraitImage, setIsPortraitImage] = useState(false);
 
   useEffect(() => {
     if (!config || !imgRef.current) {
@@ -35,15 +37,25 @@ export default function CameraImage({
     }`;
   }, [apiHost, name, imgRef, searchParams, config]);
 
+  const [{ width: containerWidth, height: containerHeight }] =
+    useResizeObserver(containerRef);
+
   return (
     <div className={className} ref={containerRef}>
       {enabled ? (
         <img
           ref={imgRef}
-          className="object-contain rounded-lg md:rounded-2xl"
+          className={`object-contain ${isPortraitImage ? "h-full w-auto" : "w-full h-auto"} rounded-lg md:rounded-2xl`}
           onLoad={() => {
             setHasLoaded(true);
 
+            if (imgRef.current) {
+              const { naturalHeight, naturalWidth } = imgRef.current;
+              setIsPortraitImage(
+                naturalWidth / naturalHeight < containerWidth / containerHeight,
+              );
+            }
+
             if (onload) {
               onload();
             }
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 222f2ebcd..63f78006f 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -215,8 +215,7 @@ function MSEPlayer({
             }
           }
         } catch (e) {
-          // eslint-disable-next-line no-console
-          console.debug(e);
+          // no-op
         }
       });
 
@@ -233,8 +232,7 @@ function MSEPlayer({
           try {
             sb?.appendBuffer(data);
           } catch (e) {
-            // eslint-disable-next-line no-console
-            console.debug(e);
+            // no-op
           }
         }
       };

From e7950abec344e15a00511ac409ff651a70184e2f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 3 May 2024 08:00:19 -0600
Subject: [PATCH 33/56] Add ability to submit frames from recordings (#11212)

* add ability to parse and upload image from recording to frigate+

* Show dialog with current frame to be uploaded

* Implement uploading image in frontend

* Cleanup

* Update title
---
 frigate/api/media.py                          | 100 ++++++++++++++----
 frigate/util/image.py                         |  35 ++++++
 web/src/components/icons/FrigatePlusIcon.tsx  |  21 ++++
 web/src/components/player/HlsVideoPlayer.tsx  |  32 +++++-
 web/src/components/player/VideoControls.tsx   |  98 ++++++++++++++++-
 .../player/dynamic/DynamicVideoController.ts  |   2 +-
 .../player/dynamic/DynamicVideoPlayer.tsx     |  14 +++
 web/src/views/events/EventView.tsx            |   3 +-
 8 files changed, 274 insertions(+), 31 deletions(-)
 create mode 100644 web/src/components/icons/FrigatePlusIcon.tsx

diff --git a/frigate/api/media.py b/frigate/api/media.py
index be4ea08d8..d493b6fa9 100644
--- a/frigate/api/media.py
+++ b/frigate/api/media.py
@@ -26,6 +26,7 @@ from frigate.const import (
 )
 from frigate.models import Event, Previews, Recordings, Regions, ReviewSegment
 from frigate.util.builtin import get_tz_modifiers
+from frigate.util.image import get_image_from_recording
 
 logger = logging.getLogger(__name__)
 
@@ -205,30 +206,20 @@ def get_snapshot_from_recording(camera_name: str, frame_time: str):
     try:
         recording: Recordings = recording_query.get()
         time_in_segment = frame_time - recording.start_time
+        image_data = get_image_from_recording(recording.path, time_in_segment)
 
-        ffmpeg_cmd = [
-            "ffmpeg",
-            "-hide_banner",
-            "-loglevel",
-            "warning",
-            "-ss",
-            f"00:00:{time_in_segment}",
-            "-i",
-            recording.path,
-            "-frames:v",
-            "1",
-            "-c:v",
-            "png",
-            "-f",
-            "image2pipe",
-            "-",
-        ]
+        if not image_data:
+            return make_response(
+                jsonify(
+                    {
+                        "success": False,
+                        "message": f"Unable to parse frame at time {frame_time}",
+                    }
+                ),
+                404,
+            )
 
-        process = sp.run(
-            ffmpeg_cmd,
-            capture_output=True,
-        )
-        response = make_response(process.stdout)
+        response = make_response(image_data)
         response.headers["Content-Type"] = "image/png"
         return response
     except DoesNotExist:
@@ -243,6 +234,71 @@ def get_snapshot_from_recording(camera_name: str, frame_time: str):
         )
 
 
+@MediaBp.route("/<camera_name>/plus/<frame_time>", methods=("POST",))
+def submit_recording_snapshot_to_plus(camera_name: str, frame_time: str):
+    if camera_name not in current_app.frigate_config.cameras:
+        return make_response(
+            jsonify({"success": False, "message": "Camera not found"}),
+            404,
+        )
+
+    frame_time = float(frame_time)
+    recording_query = (
+        Recordings.select(
+            Recordings.path,
+            Recordings.start_time,
+        )
+        .where(
+            (
+                (frame_time >= Recordings.start_time)
+                & (frame_time <= Recordings.end_time)
+            )
+        )
+        .where(Recordings.camera == camera_name)
+        .order_by(Recordings.start_time.desc())
+        .limit(1)
+    )
+
+    try:
+        recording: Recordings = recording_query.get()
+        time_in_segment = frame_time - recording.start_time
+        image_data = get_image_from_recording(recording.path, time_in_segment)
+
+        if not image_data:
+            return make_response(
+                jsonify(
+                    {
+                        "success": False,
+                        "message": f"Unable to parse frame at time {frame_time}",
+                    }
+                ),
+                404,
+            )
+
+        nd = cv2.imdecode(np.frombuffer(image_data, dtype=np.int8), cv2.IMREAD_COLOR)
+        current_app.plus_api.upload_image(nd, camera_name)
+
+        return make_response(
+            jsonify(
+                {
+                    "success": True,
+                    "message": "Successfully submitted image.",
+                }
+            ),
+            200,
+        )
+    except DoesNotExist:
+        return make_response(
+            jsonify(
+                {
+                    "success": False,
+                    "message": "Recording not found at {}".format(frame_time),
+                }
+            ),
+            404,
+        )
+
+
 @MediaBp.route("/recordings/storage", methods=["GET"])
 def get_recordings_storage_usage():
     recording_stats = current_app.stats_emitter.get_latest_stats()["service"][
diff --git a/frigate/util/image.py b/frigate/util/image.py
index 67f8b5c22..3962d9600 100644
--- a/frigate/util/image.py
+++ b/frigate/util/image.py
@@ -2,6 +2,7 @@
 
 import datetime
 import logging
+import subprocess as sp
 from abc import ABC, abstractmethod
 from multiprocessing import shared_memory
 from string import printable
@@ -746,3 +747,37 @@ def add_mask(mask: str, mask_img: np.ndarray):
         ]
     )
     cv2.fillPoly(mask_img, pts=[contour], color=(0))
+
+
+def get_image_from_recording(
+    file_path: str, relative_frame_time: float
+) -> Optional[any]:
+    """retrieve a frame from given time in recording file."""
+
+    ffmpeg_cmd = [
+        "ffmpeg",
+        "-hide_banner",
+        "-loglevel",
+        "warning",
+        "-ss",
+        f"00:00:{relative_frame_time}",
+        "-i",
+        file_path,
+        "-frames:v",
+        "1",
+        "-c:v",
+        "png",
+        "-f",
+        "image2pipe",
+        "-",
+    ]
+
+    process = sp.run(
+        ffmpeg_cmd,
+        capture_output=True,
+    )
+
+    if process.returncode == 0:
+        return process.stdout
+    else:
+        return None
diff --git a/web/src/components/icons/FrigatePlusIcon.tsx b/web/src/components/icons/FrigatePlusIcon.tsx
new file mode 100644
index 000000000..1a9ff2e05
--- /dev/null
+++ b/web/src/components/icons/FrigatePlusIcon.tsx
@@ -0,0 +1,21 @@
+import { LuPlus } from "react-icons/lu";
+import Logo from "../Logo";
+
+type FrigatePlusIconProps = {
+  className?: string;
+  onClick?: () => void;
+};
+export default function FrigatePlusIcon({
+  className,
+  onClick,
+}: FrigatePlusIconProps) {
+  return (
+    <div
+      className={`relative flex items-center ${className ?? ""}`}
+      onClick={onClick}
+    >
+      <Logo className="size-full" />
+      <LuPlus className="absolute size-2 translate-x-3 translate-y-3/4" />
+    </div>
+  );
+}
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 5f96a017d..879506936 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -10,6 +10,10 @@ import { isAndroid, isDesktop, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
 import { VideoResolutionType } from "@/types/live";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { AxiosResponse } from "axios";
+import { toast } from "sonner";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -29,6 +33,7 @@ type HlsVideoPlayerProps = {
   onTimeUpdate?: (time: number) => void;
   onPlaying?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
+  onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
 };
 export default function HlsVideoPlayer({
   videoRef,
@@ -40,7 +45,10 @@ export default function HlsVideoPlayer({
   onTimeUpdate,
   onPlaying,
   setFullResolution,
+  onUploadFrame,
 }: HlsVideoPlayerProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
   // playback
 
   const hlsRef = useRef<Hls>();
@@ -137,10 +145,15 @@ export default function HlsVideoPlayer({
         className="absolute bottom-5 left-1/2 -translate-x-1/2 z-50"
         video={videoRef.current}
         isPlaying={isPlaying}
-        show={visible && controls}
+        show={visible && (controls || controlsOpen)}
         muted={muted}
         volume={volume}
-        controlsOpen={controlsOpen}
+        features={{
+          volume: true,
+          seek: true,
+          playbackRate: true,
+          plusUpload: config?.plus?.enabled == true,
+        }}
         setControlsOpen={setControlsOpen}
         setMuted={setMuted}
         playbackRate={videoRef.current?.playbackRate ?? 1}
@@ -168,6 +181,21 @@ export default function HlsVideoPlayer({
         onSetPlaybackRate={(rate) =>
           videoRef.current ? (videoRef.current.playbackRate = rate) : null
         }
+        onUploadFrame={async () => {
+          if (videoRef.current && onUploadFrame) {
+            const resp = await onUploadFrame(videoRef.current.currentTime);
+
+            if (resp && resp.status == 200) {
+              toast.success("Successfully submitted frame to Frigate Plus", {
+                position: "top-center",
+              });
+            } else {
+              toast.success("Failed to submit frame to Frigate Plus", {
+                position: "top-center",
+              });
+            }
+          }
+        }}
       />
       <TransformComponent
         wrapperStyle={{
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 872289aa0..135f664ed 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
@@ -18,17 +18,30 @@ import {
 } from "react-icons/md";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { VolumeSlider } from "../ui/slider";
+import FrigatePlusIcon from "../icons/FrigatePlusIcon";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
 
 type VideoControls = {
   volume?: boolean;
   seek?: boolean;
   playbackRate?: boolean;
+  plusUpload?: boolean;
 };
 
 const CONTROLS_DEFAULT: VideoControls = {
   volume: true,
   seek: true,
   playbackRate: true,
+  plusUpload: false,
 };
 const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
 
@@ -40,7 +53,6 @@ type VideoControlsProps = {
   show: boolean;
   muted?: boolean;
   volume?: number;
-  controlsOpen?: boolean;
   playbackRates?: number[];
   playbackRate: number;
   hotKeys?: boolean;
@@ -49,6 +61,7 @@ type VideoControlsProps = {
   onPlayPause: (play: boolean) => void;
   onSeek: (diff: number) => void;
   onSetPlaybackRate: (rate: number) => void;
+  onUploadFrame?: () => void;
 };
 export default function VideoControls({
   className,
@@ -58,7 +71,6 @@ export default function VideoControls({
   show,
   muted,
   volume,
-  controlsOpen,
   playbackRates = PLAYBACK_RATE_DEFAULT,
   playbackRate,
   hotKeys = true,
@@ -67,6 +79,7 @@ export default function VideoControls({
   onPlayPause,
   onSeek,
   onSetPlaybackRate,
+  onUploadFrame,
 }: VideoControlsProps) {
   const onReplay = useCallback(
     (e: React.MouseEvent<SVGElement>) => {
@@ -189,7 +202,6 @@ export default function VideoControls({
       )}
       {features.playbackRate && (
         <DropdownMenu
-          open={controlsOpen == true}
           onOpenChange={(open) => {
             if (setControlsOpen) {
               setControlsOpen(open);
@@ -214,6 +226,84 @@ export default function VideoControls({
           </DropdownMenuContent>
         </DropdownMenu>
       )}
+      {features.plusUpload && onUploadFrame && (
+        <FrigatePlusUploadButton
+          video={video}
+          onClose={() => {
+            if (setControlsOpen) {
+              setControlsOpen(false);
+            }
+          }}
+          onOpen={() => {
+            onPlayPause(false);
+
+            if (setControlsOpen) {
+              setControlsOpen(true);
+            }
+          }}
+          onUploadFrame={onUploadFrame}
+        />
+      )}
     </div>
   );
 }
+
+type FrigatePlusUploadButtonProps = {
+  video?: HTMLVideoElement | null;
+  onOpen: () => void;
+  onClose: () => void;
+  onUploadFrame: () => void;
+};
+function FrigatePlusUploadButton({
+  video,
+  onOpen,
+  onClose,
+  onUploadFrame,
+}: FrigatePlusUploadButtonProps) {
+  const [videoImg, setVideoImg] = useState<string>();
+
+  return (
+    <AlertDialog
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <AlertDialogTrigger asChild>
+        <FrigatePlusIcon
+          className="size-5 cursor-pointer"
+          onClick={() => {
+            onOpen();
+
+            if (video) {
+              const videoSize = [video.clientWidth, video.clientHeight];
+              const canvas = document.createElement("canvas");
+              canvas.width = videoSize[0];
+              canvas.height = videoSize[1];
+
+              const context = canvas?.getContext("2d");
+
+              if (context) {
+                context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
+                setVideoImg(canvas.toDataURL("image/webp"));
+              }
+            }
+          }}
+        />
+      </AlertDialogTrigger>
+      <AlertDialogContent className="md:max-w-[80%]">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Submit this frame to Frigate+?</AlertDialogTitle>
+        </AlertDialogHeader>
+        <img className="w-full object-contain" src={videoImg} />
+        <AlertDialogFooter>
+          <AlertDialogAction className="bg-selected" onClick={onUploadFrame}>
+            Submit
+          </AlertDialogAction>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/web/src/components/player/dynamic/DynamicVideoController.ts b/web/src/components/player/dynamic/DynamicVideoController.ts
index e8772c49e..9ccc06c23 100644
--- a/web/src/components/player/dynamic/DynamicVideoController.ts
+++ b/web/src/components/player/dynamic/DynamicVideoController.ts
@@ -101,7 +101,7 @@ export class DynamicVideoController {
         this.playerController.pause();
       }
     } else {
-      console.log(`seek time is 0`);
+      // no op
     }
   }
 
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 3f144e04b..0c095de97 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -10,6 +10,7 @@ import HlsVideoPlayer from "../HlsVideoPlayer";
 import { TimeRange } from "@/types/timeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { VideoResolutionType } from "@/types/live";
+import axios from "axios";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -127,6 +128,18 @@ export default function DynamicVideoPlayer({
     [controller, onTimestampUpdate, isScrubbing, isLoading],
   );
 
+  const onUploadFrameToPlus = useCallback(
+    (playTime: number) => {
+      if (!controller) {
+        return;
+      }
+
+      const time = controller.getProgress(playTime);
+      return axios.post(`/${camera}/plus/${time}`);
+    },
+    [camera, controller],
+  );
+
   // state of playback player
 
   const recordingParams = useMemo(() => {
@@ -186,6 +199,7 @@ export default function DynamicVideoPlayer({
           setNoRecording(false);
         }}
         setFullResolution={setFullResolution}
+        onUploadFrame={onUploadFrameToPlus}
       />
       <PreviewPlayer
         className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 18f7731dd..63f05766e 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -975,10 +975,9 @@ function MotionReview({
           playbackRate: true,
         }}
         isPlaying={playing}
-        show={!scrubbing}
+        show={!scrubbing || controlsOpen}
         playbackRates={[4, 8, 12, 16]}
         playbackRate={playbackRate}
-        controlsOpen={controlsOpen}
         setControlsOpen={setControlsOpen}
         onPlayPause={setPlaying}
         onSeek={(diff) => {

From 216e44bc34564b5d825ae070af689ad5c624bfbb Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 3 May 2024 08:03:41 -0600
Subject: [PATCH 34/56] Event cleanup (#11225)

* remove duplicate event purging

* Slightly increase stationary object sensitivity

* Add toast for export starting

* Increase stationary threshold as well

* Update message

* Make text consistent

* Update message
---
 frigate/events/cleanup.py                    | 38 --------------------
 frigate/track/norfair_tracker.py             |  4 +--
 web/src/components/player/HlsVideoPlayer.tsx |  4 +--
 web/src/views/events/EventView.tsx           | 32 ++++++++++++++---
 4 files changed, 32 insertions(+), 46 deletions(-)

diff --git a/frigate/events/cleanup.py b/frigate/events/cleanup.py
index 29ea54ed7..88b4f0de6 100644
--- a/frigate/events/cleanup.py
+++ b/frigate/events/cleanup.py
@@ -184,43 +184,6 @@ class EventCleanup(threading.Thread):
         Event.update(update_params).where(Event.id << events_to_update).execute()
         return events_to_update
 
-    def purge_duplicates(self) -> None:
-        duplicate_query = """with grouped_events as (
-          select id,
-            label,
-            camera,
-            has_snapshot,
-            has_clip,
-            end_time,
-            row_number() over (
-              partition by label, camera, round(start_time/5,0)*5
-              order by end_time-start_time desc
-            ) as copy_number
-          from event
-        )
-
-        select distinct id, camera, has_snapshot, has_clip from grouped_events
-        where copy_number > 1 and end_time not null;"""
-
-        duplicate_events: list[Event] = Event.raw(duplicate_query)
-        for event in duplicate_events:
-            logger.debug(f"Removing duplicate: {event.id}")
-
-            try:
-                media_name = f"{event.camera}-{event.id}"
-                media_path = Path(f"{os.path.join(CLIPS_DIR, media_name)}.jpg")
-                media_path.unlink(missing_ok=True)
-                media_path = Path(f"{os.path.join(CLIPS_DIR, media_name)}-clean.png")
-                media_path.unlink(missing_ok=True)
-            except OSError as e:
-                logger.warning(f"Unable to delete event images: {e}")
-
-        (
-            Event.delete()
-            .where(Event.id << [event.id for event in duplicate_events])
-            .execute()
-        )
-
     def run(self) -> None:
         # only expire events every 5 minutes
         while not self.stop_event.wait(300):
@@ -232,7 +195,6 @@ class EventCleanup(threading.Thread):
             ).execute()
 
             self.expire(EventCleanupType.snapshots)
-            self.purge_duplicates()
 
             # drop events from db where has_clip and has_snapshot are false
             delete_query = Event.delete().where(
diff --git a/frigate/track/norfair_tracker.py b/frigate/track/norfair_tracker.py
index 53cdaad6f..2bbb01531 100644
--- a/frigate/track/norfair_tracker.py
+++ b/frigate/track/norfair_tracker.py
@@ -22,8 +22,8 @@ from frigate.util.object import average_boxes, median_of_boxes
 logger = logging.getLogger(__name__)
 
 
-THRESHOLD_ACTIVE_IOU = 0.2
-THRESHOLD_STATIONARY_IOU = 0.6
+THRESHOLD_ACTIVE_IOU = 0.35
+THRESHOLD_STATIONARY_IOU = 0.7
 MAX_STATIONARY_HISTORY = 10
 
 
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 879506936..0ea37fda5 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -186,11 +186,11 @@ export default function HlsVideoPlayer({
             const resp = await onUploadFrame(videoRef.current.currentTime);
 
             if (resp && resp.status == 200) {
-              toast.success("Successfully submitted frame to Frigate Plus", {
+              toast.success("Successfully submitted frame to Frigate+", {
                 position: "top-center",
               });
             } else {
-              toast.success("Failed to submit frame to Frigate Plus", {
+              toast.success("Failed to submit frame to Frigate+", {
                 position: "top-center",
               });
             }
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 63f05766e..4d5b5b75b 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -45,6 +45,8 @@ import { useCameraMotionNextTimestamp } from "@/hooks/use-camera-activity";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import { Skeleton } from "@/components/ui/skeleton";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { Toaster } from "@/components/ui/sonner";
+import { toast } from "sonner";
 
 type EventViewProps = {
   reviews?: ReviewSegment[];
@@ -194,10 +196,31 @@ export default function EventView({
         return;
       }
 
-      axios.post(
-        `export/${review.camera}/start/${review.start_time}/end/${review.end_time}`,
-        { playback: "realtime" },
-      );
+      axios
+        .post(
+          `export/${review.camera}/start/${review.start_time}/end/${review.end_time}`,
+          { playback: "realtime" },
+        )
+        .then((response) => {
+          if (response.status == 200) {
+            toast.success(
+              "Successfully started export. View the file in the /exports folder.",
+              { position: "top-center" },
+            );
+          }
+        })
+        .catch((error) => {
+          if (error.response?.data?.message) {
+            toast.error(
+              `Failed to start export: ${error.response.data.message}`,
+              { position: "top-center" },
+            );
+          } else {
+            toast.error(`Failed to start export: ${error.message}`, {
+              position: "top-center",
+            });
+          }
+        });
     },
     [reviewItems],
   );
@@ -215,6 +238,7 @@ export default function EventView({
 
   return (
     <div className="py-2 flex flex-col size-full">
+      <Toaster />
       <div className="h-11 mb-2 pl-3 pr-2 relative flex justify-between items-center">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />

From f0054ceba455c068bc37c5f9ac78ac8ba32731b8 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 3 May 2024 16:28:06 -0600
Subject: [PATCH 35/56] Adjust stationary reqs depending on state (#11226)

---
 frigate/track/norfair_tracker.py | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/frigate/track/norfair_tracker.py b/frigate/track/norfair_tracker.py
index 2bbb01531..f3e5a0ac0 100644
--- a/frigate/track/norfair_tracker.py
+++ b/frigate/track/norfair_tracker.py
@@ -22,8 +22,9 @@ from frigate.util.object import average_boxes, median_of_boxes
 logger = logging.getLogger(__name__)
 
 
-THRESHOLD_ACTIVE_IOU = 0.35
-THRESHOLD_STATIONARY_IOU = 0.7
+THRESHOLD_KNOWN_ACTIVE_IOU = 0.2
+THRESHOLD_STATIONARY_CHECK_IOU = 0.6
+THRESHOLD_ACTIVE_CHECK_IOU = 0.9
 MAX_STATIONARY_HISTORY = 10
 
 
@@ -146,7 +147,7 @@ class NorfairTracker(ObjectTracker):
 
     # tracks the current position of the object based on the last N bounding boxes
     # returns False if the object has moved outside its previous position
-    def update_position(self, id: str, box: list[int, int, int, int]):
+    def update_position(self, id: str, box: list[int, int, int, int], stationary: bool):
         xmin, ymin, xmax, ymax = box
         position = self.positions[id]
         self.stationary_box_history[id].append(box)
@@ -162,7 +163,7 @@ class NorfairTracker(ObjectTracker):
 
         # object has minimal or zero iou
         # assume object is active
-        if avg_iou < THRESHOLD_ACTIVE_IOU:
+        if avg_iou < THRESHOLD_KNOWN_ACTIVE_IOU:
             self.positions[id] = {
                 "xmins": [xmin],
                 "ymins": [ymin],
@@ -175,8 +176,12 @@ class NorfairTracker(ObjectTracker):
             }
             return False
 
+        threshold = (
+            THRESHOLD_STATIONARY_CHECK_IOU if stationary else THRESHOLD_ACTIVE_CHECK_IOU
+        )
+
         # object has iou below threshold, check median to reduce outliers
-        if avg_iou < THRESHOLD_STATIONARY_IOU:
+        if avg_iou < threshold:
             median_iou = intersection_over_union(
                 (
                     position["xmin"],
@@ -189,7 +194,7 @@ class NorfairTracker(ObjectTracker):
 
             # if the median iou drops below the threshold
             # assume object is no longer stationary
-            if median_iou < THRESHOLD_STATIONARY_IOU:
+            if median_iou < threshold:
                 self.positions[id] = {
                     "xmins": [xmin],
                     "ymins": [ymin],
@@ -240,8 +245,12 @@ class NorfairTracker(ObjectTracker):
     def update(self, track_id, obj):
         id = self.track_id_map[track_id]
         self.disappeared[id] = 0
+        stationary = (
+            self.tracked_objects[id]["motionless_count"]
+            >= self.detect_config.stationary.threshold
+        )
         # update the motionless count if the object has not moved to a new position
-        if self.update_position(id, obj["box"]):
+        if self.update_position(id, obj["box"], stationary):
             self.tracked_objects[id]["motionless_count"] += 1
             if self.is_expired(id):
                 self.deregister(id, track_id)

From 51dcdd6f4bbcc318b07160ab554d4d0851d8386c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 4 May 2024 09:37:35 -0500
Subject: [PATCH 36/56] Zone/mask editor improvements (#11236)

* add points to completed polygons in zone/mask editor

* change line order so edges are more easily clickable
---
 web/src/components/settings/MasksAndZones.tsx |   1 +
 web/src/components/settings/PolygonCanvas.tsx | 138 +++---------------
 web/src/components/settings/PolygonDrawer.tsx | 129 +++++++++-------
 .../settings/PolygonEditControls.tsx          |   2 +-
 4 files changed, 95 insertions(+), 175 deletions(-)

diff --git a/web/src/components/settings/MasksAndZones.tsx b/web/src/components/settings/MasksAndZones.tsx
index 5e17a534f..2679cf5ca 100644
--- a/web/src/components/settings/MasksAndZones.tsx
+++ b/web/src/components/settings/MasksAndZones.tsx
@@ -629,6 +629,7 @@ export default function MasksAndZones({
               scaledHeight &&
               editingPolygons ? (
                 <PolygonCanvas
+                  containerRef={containerRef}
                   camera={cameraConfig.name}
                   width={scaledWidth}
                   height={scaledHeight}
diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx
index d21ef01bf..bea79ed2c 100644
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/web/src/components/settings/PolygonCanvas.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState, useEffect } from "react";
+import React, { useMemo, useRef, useState, useEffect, RefObject } from "react";
 import PolygonDrawer from "./PolygonDrawer";
 import { Stage, Layer, Image } from "react-konva";
 import Konva from "konva";
@@ -7,6 +7,7 @@ import { Polygon, PolygonType } from "@/types/canvas";
 import { useApiHost } from "@/api";
 
 type PolygonCanvasProps = {
+  containerRef: RefObject<HTMLDivElement>;
   camera: string;
   width: number;
   height: number;
@@ -18,6 +19,7 @@ type PolygonCanvasProps = {
 };
 
 export function PolygonCanvas({
+  containerRef,
   camera,
   width,
   height,
@@ -55,10 +57,6 @@ export function PolygonCanvas({
     };
   }, [videoElement]);
 
-  const getMousePos = (stage: Konva.Stage) => {
-    return [stage.getPointerPosition()!.x, stage.getPointerPosition()!.y];
-  };
-
   const addPointToPolygon = (polygon: Polygon, newPoint: number[]) => {
     const points = polygon.points;
     const pointsOrder = polygon.pointsOrder;
@@ -99,37 +97,6 @@ export function PolygonCanvas({
     return { updatedPoints, updatedPointsOrder };
   };
 
-  const isMouseOverFirstPoint = (polygon: Polygon, mousePos: number[]) => {
-    if (!polygon || !polygon.points || polygon.points.length < 1) {
-      return false;
-    }
-    const [firstPoint] = polygon.points;
-    const distance = Math.hypot(
-      mousePos[0] - firstPoint[0],
-      mousePos[1] - firstPoint[1],
-    );
-    return distance < 10;
-  };
-
-  const isMouseOverAnyPoint = (polygon: Polygon, mousePos: number[]) => {
-    if (!polygon || !polygon.points || polygon.points.length === 0) {
-      return false;
-    }
-
-    for (let i = 1; i < polygon.points.length; i++) {
-      const point = polygon.points[i];
-      const distance = Math.hypot(
-        mousePos[0] - point[0],
-        mousePos[1] - point[1],
-      );
-      if (distance < 10) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-
   const handleMouseDown = (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
     if (activePolygonIndex === undefined || !polygons) {
       return;
@@ -138,11 +105,13 @@ export function PolygonCanvas({
     const updatedPolygons = [...polygons];
     const activePolygon = updatedPolygons[activePolygonIndex];
     const stage = e.target.getStage()!;
-    const mousePos = getMousePos(stage);
+    const mousePos = stage.getPointerPosition() ?? { x: 0, y: 0 };
+    const intersection = stage.getIntersection(mousePos);
 
     if (
       activePolygon.points.length >= 3 &&
-      isMouseOverFirstPoint(activePolygon, mousePos)
+      intersection?.getClassName() == "Circle" &&
+      intersection?.name() == "point-0"
     ) {
       // Close the polygon
       updatedPolygons[activePolygonIndex] = {
@@ -152,12 +121,13 @@ export function PolygonCanvas({
       setPolygons(updatedPolygons);
     } else {
       if (
-        !activePolygon.isFinished &&
-        !isMouseOverAnyPoint(activePolygon, mousePos)
+        (!activePolygon.isFinished &&
+          intersection?.getClassName() !== "Circle") ||
+        (activePolygon.isFinished && intersection?.name() == "unfilled-line")
       ) {
         const { updatedPoints, updatedPointsOrder } = addPointToPolygon(
           activePolygon,
-          mousePos,
+          [mousePos.x, mousePos.y],
         );
 
         updatedPolygons[activePolygonIndex] = {
@@ -168,62 +138,6 @@ export function PolygonCanvas({
         setPolygons(updatedPolygons);
       }
     }
-    // }
-  };
-
-  const handleMouseOverStartPoint = (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => {
-    if (activePolygonIndex === undefined || !polygons) {
-      return;
-    }
-
-    const activePolygon = polygons[activePolygonIndex];
-    if (!activePolygon.isFinished && activePolygon.points.length >= 3) {
-      e.target.getStage()!.container().style.cursor = "default";
-      e.currentTarget.scale({ x: 2, y: 2 });
-    }
-  };
-
-  const handleMouseOutStartPoint = (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => {
-    e.currentTarget.scale({ x: 1, y: 1 });
-
-    if (activePolygonIndex === undefined || !polygons) {
-      return;
-    }
-
-    const activePolygon = polygons[activePolygonIndex];
-    if (
-      (!activePolygon.isFinished && activePolygon.points.length >= 3) ||
-      activePolygon.isFinished
-    ) {
-      e.currentTarget.scale({ x: 1, y: 1 });
-    }
-  };
-
-  const handleMouseOverAnyPoint = (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => {
-    if (!polygons) {
-      return;
-    }
-    e.target.getStage()!.container().style.cursor = "move";
-  };
-
-  const handleMouseOutAnyPoint = (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => {
-    if (activePolygonIndex === undefined || !polygons) {
-      return;
-    }
-    const activePolygon = polygons[activePolygonIndex];
-    if (activePolygon.isFinished) {
-      e.target.getStage()!.container().style.cursor = "default";
-    } else {
-      e.target.getStage()!.container().style.cursor = "crosshair";
-    }
   };
 
   const handlePointDragMove = (
@@ -237,7 +151,8 @@ export function PolygonCanvas({
     const activePolygon = updatedPolygons[activePolygonIndex];
     const stage = e.target.getStage();
     if (stage) {
-      const index = e.target.index - 1;
+      // we add an unfilled line for adding points when finished
+      const index = e.target.index - (activePolygon.isFinished ? 2 : 1);
       const pos = [e.target._lastPos!.x, e.target._lastPos!.y];
       if (pos[0] < 0) pos[0] = 0;
       if (pos[1] < 0) pos[1] = 0;
@@ -272,26 +187,17 @@ export function PolygonCanvas({
     }
   };
 
-  const handleStageMouseOver = (
-    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => {
+  const handleStageMouseOver = () => {
     if (activePolygonIndex === undefined || !polygons) {
       return;
     }
 
     const updatedPolygons = [...polygons];
     const activePolygon = updatedPolygons[activePolygonIndex];
-    const stage = e.target.getStage()!;
-    const mousePos = getMousePos(stage);
 
-    if (
-      activePolygon.isFinished ||
-      isMouseOverAnyPoint(activePolygon, mousePos) ||
-      isMouseOverFirstPoint(activePolygon, mousePos)
-    )
-      return;
-
-    e.target.getStage()!.container().style.cursor = "crosshair";
+    if (containerRef.current && !activePolygon.isFinished) {
+      containerRef.current.style.cursor = "crosshair";
+    }
   };
 
   useEffect(() => {
@@ -336,6 +242,7 @@ export function PolygonCanvas({
               selectedZoneMask.includes(polygon.type)) &&
             index !== activePolygonIndex && (
               <PolygonDrawer
+                stageRef={stageRef}
                 key={index}
                 points={polygon.points}
                 isActive={index === activePolygonIndex}
@@ -344,10 +251,6 @@ export function PolygonCanvas({
                 color={polygon.color}
                 handlePointDragMove={handlePointDragMove}
                 handleGroupDragEnd={handleGroupDragEnd}
-                handleMouseOverStartPoint={handleMouseOverStartPoint}
-                handleMouseOutStartPoint={handleMouseOutStartPoint}
-                handleMouseOverAnyPoint={handleMouseOverAnyPoint}
-                handleMouseOutAnyPoint={handleMouseOutAnyPoint}
               />
             ),
         )}
@@ -356,6 +259,7 @@ export function PolygonCanvas({
           (selectedZoneMask === undefined ||
             selectedZoneMask.includes(polygons[activePolygonIndex].type)) && (
             <PolygonDrawer
+              stageRef={stageRef}
               key={activePolygonIndex}
               points={polygons[activePolygonIndex].points}
               isActive={true}
@@ -364,10 +268,6 @@ export function PolygonCanvas({
               color={polygons[activePolygonIndex].color}
               handlePointDragMove={handlePointDragMove}
               handleGroupDragEnd={handleGroupDragEnd}
-              handleMouseOverStartPoint={handleMouseOverStartPoint}
-              handleMouseOutStartPoint={handleMouseOutStartPoint}
-              handleMouseOverAnyPoint={handleMouseOverAnyPoint}
-              handleMouseOutAnyPoint={handleMouseOutAnyPoint}
             />
           )}
       </Layer>
diff --git a/web/src/components/settings/PolygonDrawer.tsx b/web/src/components/settings/PolygonDrawer.tsx
index a2209d35e..706cbea9d 100644
--- a/web/src/components/settings/PolygonDrawer.tsx
+++ b/web/src/components/settings/PolygonDrawer.tsx
@@ -1,4 +1,11 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Line, Circle, Group } from "react-konva";
 import {
   minMax,
@@ -9,9 +16,9 @@ import {
 import type { KonvaEventObject } from "konva/lib/Node";
 import Konva from "konva";
 import { Vector2d } from "konva/lib/types";
-import { isMobileOnly } from "react-device-detect";
 
 type PolygonDrawerProps = {
+  stageRef: RefObject<Konva.Stage>;
   points: number[][];
   isActive: boolean;
   isHovered: boolean;
@@ -19,21 +26,10 @@ type PolygonDrawerProps = {
   color: number[];
   handlePointDragMove: (e: KonvaEventObject<MouseEvent | TouchEvent>) => void;
   handleGroupDragEnd: (e: KonvaEventObject<MouseEvent | TouchEvent>) => void;
-  handleMouseOverStartPoint: (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => void;
-  handleMouseOutStartPoint: (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => void;
-  handleMouseOverAnyPoint: (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => void;
-  handleMouseOutAnyPoint: (
-    e: KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => void;
 };
 
 export default function PolygonDrawer({
+  stageRef,
   points,
   isActive,
   isHovered,
@@ -41,31 +37,41 @@ export default function PolygonDrawer({
   color,
   handlePointDragMove,
   handleGroupDragEnd,
-  handleMouseOverStartPoint,
-  handleMouseOutStartPoint,
-  handleMouseOverAnyPoint,
-  handleMouseOutAnyPoint,
 }: PolygonDrawerProps) {
-  const vertexRadius = isMobileOnly ? 12 : 6;
+  const vertexRadius = 6;
   const flattenedPoints = useMemo(() => flattenPoints(points), [points]);
-  const [stage, setStage] = useState<Konva.Stage>();
   const [minMaxX, setMinMaxX] = useState([0, 0]);
   const [minMaxY, setMinMaxY] = useState([0, 0]);
   const groupRef = useRef<Konva.Group>(null);
+  const [cursor, setCursor] = useState("default");
 
-  const handleGroupMouseOver = (
-    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
+  const handleMouseOverPoint = (
+    e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
-    if (!isFinished) return;
-    e.target.getStage()!.container().style.cursor = "move";
-    setStage(e.target.getStage()!);
+    if (!e.target) return;
+
+    if (!isFinished && points.length >= 3 && e.target.name() === "point-0") {
+      e.target.scale({ x: 2, y: 2 });
+      setCursor("crosshair");
+    } else {
+      setCursor("move");
+    }
   };
 
-  const handleGroupMouseOut = (
-    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
+  const handleMouseOutPoint = (
+    e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
-    if (!e.target || !isFinished) return;
-    e.target.getStage()!.container().style.cursor = "default";
+    if (!e.target) return;
+
+    if (isFinished) {
+      setCursor("default");
+    } else {
+      setCursor("crosshair");
+    }
+
+    if (e.target.name() === "point-0") {
+      e.target.scale({ x: 1, y: 1 });
+    }
   };
 
   const handleGroupDragStart = () => {
@@ -76,13 +82,13 @@ export default function PolygonDrawer({
   };
 
   const groupDragBound = (pos: Vector2d) => {
-    if (!stage) {
+    if (!stageRef.current) {
       return pos;
     }
 
     let { x, y } = pos;
-    const sw = stage.width();
-    const sh = stage.height();
+    const sw = stageRef.current.width();
+    const sh = stageRef.current.height();
 
     if (minMaxY[0] + y < 0) y = -1 * minMaxY[0];
     if (minMaxX[0] + x < 0) x = -1 * minMaxX[0];
@@ -99,6 +105,14 @@ export default function PolygonDrawer({
     [color],
   );
 
+  useEffect(() => {
+    if (!stageRef.current) {
+      return;
+    }
+
+    stageRef.current.container().style.cursor = cursor;
+  }, [stageRef, cursor]);
+
   return (
     <Group
       name="polygon"
@@ -107,55 +121,62 @@ export default function PolygonDrawer({
       onDragStart={isActive ? handleGroupDragStart : undefined}
       onDragEnd={isActive ? handleGroupDragEnd : undefined}
       dragBoundFunc={isActive ? groupDragBound : undefined}
-      onMouseOver={isActive ? handleGroupMouseOver : undefined}
-      onTouchStart={isActive ? handleGroupMouseOver : undefined}
-      onMouseOut={isActive ? handleGroupMouseOut : undefined}
     >
       <Line
+        name="filled-line"
         points={flattenedPoints}
         stroke={colorString(true)}
         strokeWidth={3}
+        hitStrokeWidth={12}
         closed={isFinished}
         fill={colorString(isActive || isHovered ? true : false)}
+        onMouseOver={() =>
+          isFinished ? setCursor("move") : setCursor("crosshair")
+        }
+        onMouseOut={() =>
+          isFinished ? setCursor("default") : setCursor("crosshair")
+        }
       />
+      {isFinished && isActive && (
+        <Line
+          name="unfilled-line"
+          points={flattenedPoints}
+          hitStrokeWidth={12}
+          closed={isFinished}
+          fillEnabled={false}
+          onMouseOver={() => setCursor("crosshair")}
+          onMouseOut={() =>
+            isFinished ? setCursor("default") : setCursor("crosshair")
+          }
+        />
+      )}
       {points.map((point, index) => {
         if (!isActive) {
           return;
         }
         const x = point[0];
         const y = point[1];
-        const startPointAttr =
-          index === 0
-            ? {
-                hitStrokeWidth: 12,
-                onMouseOver: handleMouseOverStartPoint,
-                onMouseOut: handleMouseOutStartPoint,
-              }
-            : null;
-        const otherPointsAttr =
-          index !== 0
-            ? {
-                onMouseOver: handleMouseOverAnyPoint,
-                onMouseOut: handleMouseOutAnyPoint,
-              }
-            : null;
 
         return (
           <Circle
             key={index}
+            name={`point-${index}`}
             x={x}
             y={y}
             radius={vertexRadius}
             stroke={colorString(true)}
             fill="#ffffff"
             strokeWidth={3}
+            hitStrokeWidth={index === 0 ? 12 : 9}
+            onMouseOver={handleMouseOverPoint}
+            onMouseOut={handleMouseOutPoint}
             draggable={isActive}
             onDragMove={isActive ? handlePointDragMove : undefined}
             dragBoundFunc={(pos) => {
-              if (stage) {
+              if (stageRef.current) {
                 return dragBoundFunc(
-                  stage.width(),
-                  stage.height(),
+                  stageRef.current.width(),
+                  stageRef.current.height(),
                   vertexRadius,
                   pos,
                 );
@@ -163,8 +184,6 @@ export default function PolygonDrawer({
                 return pos;
               }
             }}
-            {...startPointAttr}
-            {...otherPointsAttr}
           />
         );
       })}
diff --git a/web/src/components/settings/PolygonEditControls.tsx b/web/src/components/settings/PolygonEditControls.tsx
index 5aa4323b2..37a4cc695 100644
--- a/web/src/components/settings/PolygonEditControls.tsx
+++ b/web/src/components/settings/PolygonEditControls.tsx
@@ -41,7 +41,7 @@ export default function PolygonEditControls({
           ...activePolygon.pointsOrder.slice(0, lastPointOrderIndex),
           ...activePolygon.pointsOrder.slice(lastPointOrderIndex + 1),
         ],
-        isFinished: false,
+        isFinished: activePolygon.isFinished && activePolygon.points.length > 3,
       };
 
       setPolygons(updatedPolygons);

From 2dd5b893a07b47eaaac1fb9da5dea6973a12c644 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 4 May 2024 09:15:03 -0600
Subject: [PATCH 37/56] Cleanup config validation (#11235)

* Fix reading model config dict

* Fix irrelevant warnings

* Fix tests
---
 frigate/config.py           | 27 ++++++++++++---------------
 frigate/test/test_config.py |  7 +------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/frigate/config.py b/frigate/config.py
index 0d5c9fb47..602f03f1f 100644
--- a/frigate/config.py
+++ b/frigate/config.py
@@ -1505,29 +1505,26 @@ class FrigateConfig(FrigateBaseModel):
         for key, detector in config.detectors.items():
             adapter = TypeAdapter(DetectorConfig)
             model_dict = (
-                detector if isinstance(detector, dict) else detector.model_dump()
+                detector
+                if isinstance(detector, dict)
+                else detector.model_dump(warnings="none")
             )
             detector_config: DetectorConfig = adapter.validate_python(model_dict)
             if detector_config.model is None:
-                detector_config.model = config.model
+                detector_config.model = config.model.model_copy()
             else:
-                model = detector_config.model
-                schema = ModelConfig.model_json_schema()["properties"]
-                if (
-                    model.width != schema["width"]["default"]
-                    or model.height != schema["height"]["default"]
-                    or model.labelmap_path is not None
-                    or model.labelmap
-                    or model.input_tensor != schema["input_tensor"]["default"]
-                    or model.input_pixel_format
-                    != schema["input_pixel_format"]["default"]
-                ):
+                path = detector_config.model.path
+                detector_config.model = config.model.model_copy()
+                detector_config.model.path = path
+
+                if "path" not in model_dict or len(model_dict.keys()) > 1:
                     logger.warning(
                         "Customizing more than a detector model path is unsupported."
                     )
+
             merged_model = deep_merge(
-                detector_config.model.model_dump(exclude_unset=True),
-                config.model.model_dump(exclude_unset=True),
+                detector_config.model.model_dump(exclude_unset=True, warnings="none"),
+                config.model.model_dump(exclude_unset=True, warnings="none"),
             )
 
             if "path" not in merged_model:
diff --git a/frigate/test/test_config.py b/frigate/test/test_config.py
index be935d431..697edfe91 100644
--- a/frigate/test/test_config.py
+++ b/frigate/test/test_config.py
@@ -82,7 +82,7 @@ class TestConfig(unittest.TestCase):
                 },
                 "edgetpu": {
                     "type": "edgetpu",
-                    "model": {"path": "/edgetpu_model.tflite", "width": 160},
+                    "model": {"path": "/edgetpu_model.tflite"},
                 },
                 "openvino": {
                     "type": "openvino",
@@ -112,11 +112,6 @@ class TestConfig(unittest.TestCase):
         assert runtime_config.detectors["edgetpu"].model.path == "/edgetpu_model.tflite"
         assert runtime_config.detectors["openvino"].model.path == "/etc/hosts"
 
-        assert runtime_config.model.width == 512
-        assert runtime_config.detectors["cpu"].model.width == 320
-        assert runtime_config.detectors["edgetpu"].model.width == 160
-        assert runtime_config.detectors["openvino"].model.width == 512
-
     def test_invalid_mqtt_config(self):
         config = {
             "mqtt": {"host": "mqtt", "user": "test"},

From ad87f5786e9f86baf806dd2c58a2b5f74850c3b0 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 4 May 2024 14:54:50 -0500
Subject: [PATCH 38/56] Misc UI fixes (#11237)

* add close button to all toasters

* check if persistent options are loaded

* add id to prevent message duplication in bottom bar
---
 .../components/filter/CameraGroupSelector.tsx |  6 +++-
 web/src/components/settings/MasksAndZones.tsx |  9 ++++--
 .../settings/MotionMaskEditPane.tsx           |  2 +-
 web/src/components/settings/MotionTuner.tsx   |  9 ++++--
 .../settings/ObjectMaskEditPane.tsx           |  2 +-
 .../components/settings/ObjectSettings.tsx    | 29 ++++++++++---------
 web/src/components/settings/PolygonItem.tsx   |  2 +-
 web/src/components/settings/ZoneEditPane.tsx  |  2 +-
 web/src/components/ui/sonner.tsx              |  2 ++
 web/src/pages/ConfigEditor.tsx                |  2 +-
 web/src/pages/Logs.tsx                        |  2 +-
 web/src/views/events/EventView.tsx            |  2 +-
 web/src/views/events/RecordingView.tsx        |  2 +-
 13 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 3b9b3e20f..d67fea65a 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -273,7 +273,11 @@ function NewGroupDialog({
 
   return (
     <>
-      <Toaster className="toaster group z-[100]" position="top-center" />
+      <Toaster
+        className="toaster group z-[100]"
+        position="top-center"
+        closeButton={true}
+      />
       <Overlay
         open={open}
         onOpenChange={(open) => {
diff --git a/web/src/components/settings/MasksAndZones.tsx b/web/src/components/settings/MasksAndZones.tsx
index 2679cf5ca..66eb33952 100644
--- a/web/src/components/settings/MasksAndZones.tsx
+++ b/web/src/components/settings/MasksAndZones.tsx
@@ -178,7 +178,12 @@ export default function MasksAndZones({
     setAllPolygons([...(editingPolygons ?? [])]);
     setHoveredPolygonIndex(null);
     setUnsavedChanges(false);
-    addMessage("masks_zones", "Restart required (masks/zones changed)");
+    addMessage(
+      "masks_zones",
+      "Restart required (masks/zones changed)",
+      undefined,
+      "masks_zones",
+    );
   }, [editingPolygons, setUnsavedChanges, addMessage]);
 
   useEffect(() => {
@@ -366,7 +371,7 @@ export default function MasksAndZones({
     <>
       {cameraConfig && editingPolygons && (
         <div className="flex flex-col md:flex-row size-full">
-          <Toaster position="top-center" />
+          <Toaster position="top-center" closeButton={true} />
           <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
             {editPane == "zone" && (
               <ZoneEditPane
diff --git a/web/src/components/settings/MotionMaskEditPane.tsx b/web/src/components/settings/MotionMaskEditPane.tsx
index 1797c2d99..df1a42508 100644
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@@ -183,7 +183,7 @@ export default function MotionMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Motion Mask
       </Heading>
diff --git a/web/src/components/settings/MotionTuner.tsx b/web/src/components/settings/MotionTuner.tsx
index badaa75a4..b837e7ab6 100644
--- a/web/src/components/settings/MotionTuner.tsx
+++ b/web/src/components/settings/MotionTuner.tsx
@@ -153,7 +153,12 @@ export default function MotionTuner({
 
   useEffect(() => {
     if (changedValue) {
-      addMessage("motion_tuner", "Unsaved motion tuner changes");
+      addMessage(
+        "motion_tuner",
+        "Unsaved motion tuner changes",
+        undefined,
+        "motion_tuner",
+      );
     } else {
       clearMessages("motion_tuner");
     }
@@ -169,7 +174,7 @@ export default function MotionTuner({
 
   return (
     <div className="flex flex-col md:flex-row size-full">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
         <Heading as="h3" className="my-2">
           Motion Detection Tuner
diff --git a/web/src/components/settings/ObjectMaskEditPane.tsx b/web/src/components/settings/ObjectMaskEditPane.tsx
index c95b17bae..d97297b98 100644
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@@ -245,7 +245,7 @@ export default function ObjectMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Object Mask
       </Heading>
diff --git a/web/src/components/settings/ObjectSettings.tsx b/web/src/components/settings/ObjectSettings.tsx
index 15d51aa54..c3ced115b 100644
--- a/web/src/components/settings/ObjectSettings.tsx
+++ b/web/src/components/settings/ObjectSettings.tsx
@@ -64,7 +64,7 @@ export default function ObjectSettings({
     },
   ];
 
-  const [options, setOptions] = usePersistence<Options>(
+  const [options, setOptions, optionsLoaded] = usePersistence<Options>(
     `${selectedCamera}-feed`,
     emptyObject,
   );
@@ -87,17 +87,20 @@ export default function ObjectSettings({
 
   const memoizedObjects = useDeepMemo(objects);
 
-  const searchParams = useMemo(
-    () =>
-      new URLSearchParams(
-        Object.keys(options || {}).reduce((memo, key) => {
-          //@ts-expect-error we know this is correct
-          memo.push([key, options[key] === true ? "1" : "0"]);
-          return memo;
-        }, []),
-      ),
-    [options],
-  );
+  const searchParams = useMemo(() => {
+    if (!optionsLoaded) {
+      return new URLSearchParams();
+    }
+
+    const params = new URLSearchParams(
+      Object.keys(options || {}).reduce((memo, key) => {
+        //@ts-expect-error we know this is correct
+        memo.push([key, options[key] === true ? "1" : "0"]);
+        return memo;
+      }, []),
+    );
+    return params;
+  }, [options, optionsLoaded]);
 
   useEffect(() => {
     document.title = "Object Settings - Frigate";
@@ -109,7 +112,7 @@ export default function ObjectSettings({
 
   return (
     <div className="flex flex-col md:flex-row size-full">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
         <Heading as="h3" className="my-2">
           Debug
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index 9d8972341..bfd73725d 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -202,7 +202,7 @@ export default function PolygonItem({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
 
       <div
         key={index}
diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx
index dd213b6cc..90cff5f10 100644
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@@ -318,7 +318,7 @@ export default function ZoneEditPane({
 
   return (
     <>
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length ? "Edit" : "New"} Zone
       </Heading>
diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
index 15690ddc7..21da14e4e 100644
--- a/web/src/components/ui/sonner.tsx
+++ b/web/src/components/ui/sonner.tsx
@@ -18,6 +18,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
           actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary",
           cancelButton:
             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          closeButton:
+            "group-[.toast]:bg-secondary border-primary border-[1px]",
           success:
             "group toast group-[.toaster]:bg-success group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           error:
diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 126d6c66a..7c30b5447 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -158,7 +158,7 @@ function ConfigEditor() {
       )}
 
       <div ref={configRef} className="h-full mt-2" />
-      <Toaster />
+      <Toaster closeButton={true} />
     </div>
   );
 }
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index c166968ab..e6cf07be5 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -332,7 +332,7 @@ function Logs() {
 
   return (
     <div className="size-full p-2 flex flex-col">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
       <LogInfoDialog logLine={selectedLog} setLogLine={setSelectedLog} />
 
       <div className="flex justify-between items-center">
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 4d5b5b75b..90ca54531 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -238,7 +238,7 @@ export default function EventView({
 
   return (
     <div className="py-2 flex flex-col size-full">
-      <Toaster />
+      <Toaster closeButton={true} />
       <div className="h-11 mb-2 pl-3 pr-2 relative flex justify-between items-center">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 4e90937df..5494b6e87 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -261,7 +261,7 @@ export function RecordingView({
 
   return (
     <div ref={contentRef} className="size-full pt-2 flex flex-col">
-      <Toaster />
+      <Toaster closeButton={true} />
       <div
         className={`w-full h-11 mb-2 px-2 relative flex items-center justify-between`}
       >

From ca8ef7009629ae8039b31e853f83fbe26cf43250 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 4 May 2024 22:00:33 -0500
Subject: [PATCH 39/56] Support desktop touchscreens for timelines (#11241)

* support desktop touchscreens

* remove placeholder select

* add max height to settings cameras dropdown
---
 web/src/components/settings/General.tsx       | 25 -------------------
 .../components/timeline/SummaryTimeline.tsx   |  7 +++---
 web/src/hooks/use-draggable-element.ts        |  5 ++--
 web/src/pages/Settings.tsx                    |  2 +-
 web/src/views/live/LiveCameraView.tsx         |  2 +-
 5 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/web/src/components/settings/General.tsx b/web/src/components/settings/General.tsx
index d82731300..70f6203b2 100644
--- a/web/src/components/settings/General.tsx
+++ b/web/src/components/settings/General.tsx
@@ -1,14 +1,5 @@
 import Heading from "@/components/ui/heading";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { useEffect } from "react";
 
@@ -24,22 +15,6 @@ export default function General() {
         <Switch id="lowdata" checked={false} onCheckedChange={() => {}} />
         <Label htmlFor="lowdata">Low Data Mode (this device only)</Label>
       </div>
-
-      <div className="flex items-center space-x-2 mt-5">
-        <Select>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Another General Option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Live Mode</SelectLabel>
-              <SelectItem value="jsmpeg">JSMpeg</SelectItem>
-              <SelectItem value="mse">MSE</SelectItem>
-              <SelectItem value="webrtc">WebRTC</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </div>
     </>
   );
 }
diff --git a/web/src/components/timeline/SummaryTimeline.tsx b/web/src/components/timeline/SummaryTimeline.tsx
index 40684543c..54573c4f4 100644
--- a/web/src/components/timeline/SummaryTimeline.tsx
+++ b/web/src/components/timeline/SummaryTimeline.tsx
@@ -9,7 +9,6 @@ import {
 import { SummarySegment } from "./SummarySegment";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
-import { isMobile } from "react-device-detect";
 
 export type SummaryTimelineProps = {
   reviewTimelineRef: RefObject<HTMLDivElement>;
@@ -188,7 +187,7 @@ export function SummaryTimeline({
       e.stopPropagation();
 
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
@@ -239,7 +238,7 @@ export function SummaryTimeline({
       setIsDragging(true);
 
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
@@ -277,7 +276,7 @@ export function SummaryTimeline({
         }
         e.stopPropagation();
         let clientY;
-        if (isMobile && e instanceof TouchEvent) {
+        if (e instanceof TouchEvent) {
           clientY = e.touches[0].clientY;
         } else if (e instanceof MouseEvent) {
           clientY = e.clientY;
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index 75f733aeb..f18cae152 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@@ -1,5 +1,4 @@
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { isMobile } from "react-device-detect";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { useTimelineUtils } from "./use-timeline-utils";
 
@@ -88,7 +87,7 @@ function useDraggableElement({
   const getClientYPosition = useCallback(
     (e: MouseEvent | TouchEvent) => {
       let clientY;
-      if (isMobile && e instanceof TouchEvent) {
+      if (e instanceof TouchEvent) {
         clientY = e.touches[0].clientY;
       } else if (e instanceof MouseEvent) {
         clientY = e.clientY;
@@ -114,7 +113,7 @@ function useDraggableElement({
       setIsDragging(true);
 
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 96f48f6d9..278fecac9 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -237,7 +237,7 @@ function CameraSelectButton({
           <DropdownMenuSeparator />
         </>
       )}
-      <div className="h-auto p-4 mb-5 md:mb-1 overflow-y-auto overflow-x-hidden">
+      <div className="h-auto max-h-[80dvh] p-4 mb-5 md:mb-1 overflow-y-auto overflow-x-hidden">
         <div className="flex flex-col gap-2.5">
           {allCameras.map((item) => (
             <FilterSwitch
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index ca8bc968f..bc27234bb 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -98,7 +98,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
 
       let clientX;
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientX = e.nativeEvent.touches[0].clientX;
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {

From 306c11d73029304903241529f3b8c886194f38ee Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 6 May 2024 12:18:28 -0500
Subject: [PATCH 40/56] use portal on all sidebar tooltips (#11267)

---
 .../components/filter/CameraGroupSelector.tsx   | 17 +++++++++++------
 web/src/components/menu/AccountSettings.tsx     |  9 ++++++---
 web/src/components/menu/GeneralSettings.tsx     |  9 ++++++---
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index d67fea65a..0b38bb713 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -59,6 +59,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { ScrollArea, ScrollBar } from "../ui/scroll-area";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -137,9 +138,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                 <MdHome className="size-4" />
               </Button>
             </TooltipTrigger>
-            <TooltipContent className="capitalize" side="right">
-              All Cameras
-            </TooltipContent>
+            <TooltipPortal>
+              <TooltipContent className="capitalize" side="right">
+                All Cameras
+              </TooltipContent>
+            </TooltipPortal>
           </Tooltip>
           {groups.map(([name, config]) => {
             return (
@@ -161,9 +164,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                     {getIconForGroup(config.icon)}
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent className="capitalize" side="right">
-                  {name}
-                </TooltipContent>
+                <TooltipPortal>
+                  <TooltipContent className="capitalize" side="right">
+                    {name}
+                  </TooltipContent>
+                </TooltipPortal>
               </Tooltip>
             );
           })}
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index 72d05e81f..a5068c753 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -3,6 +3,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
 
@@ -19,9 +20,11 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
           <VscAccount className="size-5 md:m-[6px]" />
         </div>
       </TooltipTrigger>
-      <TooltipContent side="right">
-        <p>Account</p>
-      </TooltipContent>
+      <TooltipPortal>
+        <TooltipContent side="right">
+          <p>Account</p>
+        </TooltipContent>
+      </TooltipPortal>
     </Tooltip>
   );
 }
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index f868eddb5..6974c8075 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -65,6 +65,7 @@ import {
   DialogPortal,
   DialogTrigger,
 } from "../ui/dialog";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type GeneralSettingsProps = {
   className?: string;
@@ -124,9 +125,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                     <LuSettings className="size-5 md:m-[6px]" />
                   </div>
                 </TooltipTrigger>
-                <TooltipContent side="right">
-                  <p>Settings</p>
-                </TooltipContent>
+                <TooltipPortal>
+                  <TooltipContent side="right">
+                    <p>Settings</p>
+                  </TooltipContent>
+                </TooltipPortal>
               </Tooltip>
             </a>
           </Trigger>

From c0073db859c4e4e5767bc10b959ce7d618c64dcd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 6 May 2024 13:35:18 -0500
Subject: [PATCH 41/56] fix touch events (#11265)

---
 web/src/components/timeline/SummaryTimeline.tsx | 6 +++---
 web/src/hooks/use-draggable-element.ts          | 4 ++--
 web/src/views/live/LiveCameraView.tsx           | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/timeline/SummaryTimeline.tsx b/web/src/components/timeline/SummaryTimeline.tsx
index 54573c4f4..db1200546 100644
--- a/web/src/components/timeline/SummaryTimeline.tsx
+++ b/web/src/components/timeline/SummaryTimeline.tsx
@@ -187,7 +187,7 @@ export function SummaryTimeline({
       e.stopPropagation();
 
       let clientY;
-      if (e.nativeEvent instanceof TouchEvent) {
+      if ("TouchEvent" in window && e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
@@ -238,7 +238,7 @@ export function SummaryTimeline({
       setIsDragging(true);
 
       let clientY;
-      if (e.nativeEvent instanceof TouchEvent) {
+      if ("TouchEvent" in window && e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
@@ -276,7 +276,7 @@ export function SummaryTimeline({
         }
         e.stopPropagation();
         let clientY;
-        if (e instanceof TouchEvent) {
+        if ("TouchEvent" in window && e instanceof TouchEvent) {
           clientY = e.touches[0].clientY;
         } else if (e instanceof MouseEvent) {
           clientY = e.clientY;
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index f18cae152..8cc61d451 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@@ -87,7 +87,7 @@ function useDraggableElement({
   const getClientYPosition = useCallback(
     (e: MouseEvent | TouchEvent) => {
       let clientY;
-      if (e instanceof TouchEvent) {
+      if ("TouchEvent" in window && e instanceof TouchEvent) {
         clientY = e.touches[0].clientY;
       } else if (e instanceof MouseEvent) {
         clientY = e.clientY;
@@ -113,7 +113,7 @@ function useDraggableElement({
       setIsDragging(true);
 
       let clientY;
-      if (e.nativeEvent instanceof TouchEvent) {
+      if ("TouchEvent" in window && e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index bc27234bb..aef3453e7 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -98,7 +98,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
 
       let clientX;
       let clientY;
-      if (e.nativeEvent instanceof TouchEvent) {
+      if ("TouchEvent" in window && e.nativeEvent instanceof TouchEvent) {
         clientX = e.nativeEvent.touches[0].clientX;
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {

From e5e18a50268255fda93bdc62df00a9a5a40d0af9 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 6 May 2024 15:18:13 -0600
Subject: [PATCH 42/56] UI Tweaks (#11263)

* Add icons for frigate+ items

* Fix bug where export didn't start

* Fix mobile overflow

* Capitalize first letter function
---
 .../components/filter/CameraGroupSelector.tsx |  2 +-
 web/src/components/overlay/ExportDialog.tsx   |  8 ++++
 .../player/PreviewThumbnailPlayer.tsx         |  3 +-
 web/src/pages/SubmitPlus.tsx                  | 37 ++++++++++++++++++-
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 0b38bb713..2f3628088 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -568,7 +568,7 @@ export function CameraGroupEdit({
         />
 
         <Separator className="flex my-2 bg-secondary" />
-        <div className="max-h-[40dvh] overflow-y-auto">
+        <div className="max-h-[25dvh] md:max-h-[40dvh] overflow-y-auto">
           <FormField
             control={form.control}
             name="cameras"
diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index 60de90468..ac53825b5 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -121,6 +121,14 @@ export default function ExportDialog({
             className="flex items-center gap-2"
             size="sm"
             onClick={() => {
+              const now = new Date(latestTime * 1000);
+              let start = 0;
+              now.setHours(now.getHours() - 1);
+              start = now.getTime() / 1000;
+              setRange({
+                before: latestTime,
+                after: start,
+              });
               setMode("select");
             }}
           >
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index c36a2e129..97e96713c 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -24,6 +24,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { TimeRange } from "@/types/timeline";
 import { NoThumbSlider } from "../ui/slider";
 import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -263,7 +264,7 @@ export default function PreviewThumbnailPlayer({
                 .filter(
                   (item) => item !== undefined && !item.includes("-verified"),
                 )
-                .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
+                .map((text) => capitalizeFirstLetter(text))
                 .sort()
                 .join(", ")
                 .replaceAll("-verified", "")}
diff --git a/web/src/pages/SubmitPlus.tsx b/web/src/pages/SubmitPlus.tsx
index f51ad514d..e2863760a 100644
--- a/web/src/pages/SubmitPlus.tsx
+++ b/web/src/pages/SubmitPlus.tsx
@@ -3,6 +3,7 @@ import {
   CamerasFilterButton,
   GeneralFilterContent,
 } from "@/components/filter/ReviewFilterGroup";
+import Chip from "@/components/indicators/Chip";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -23,8 +24,15 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { DualThumbSlider } from "@/components/ui/slider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { Event } from "@/types/event";
 import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
+import { getIconForLabel } from "@/utils/iconUtil";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
@@ -182,9 +190,36 @@ export default function SubmitPlus() {
             return (
               <div
                 key={event.id}
-                className="w-full rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
+                className="w-full relative rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
                 onClick={() => setUpload(event)}
               >
+                <div className="absolute left-0 top-2 z-40">
+                  <Tooltip>
+                    <div className="flex">
+                      <TooltipTrigger asChild>
+                        <div className="mx-3 pb-1 text-white text-sm">
+                          <Chip
+                            className={`flex items-start justify-between space-x-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
+                          >
+                            {[event.label].map((object) => {
+                              return getIconForLabel(
+                                object,
+                                "size-3 text-white",
+                              );
+                            })}
+                          </Chip>
+                        </div>
+                      </TooltipTrigger>
+                    </div>
+                    <TooltipContent className="capitalize">
+                      {[event.label]
+                        .map((text) => capitalizeFirstLetter(text))
+                        .sort()
+                        .join(", ")
+                        .replaceAll("-verified", "")}
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
                 <img
                   className="aspect-video h-full object-contain rounded-lg md:rounded-2xl"
                   src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}

From fc0f6d60957ba26fceea3bf8c9ffb62d5b46a940 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 6 May 2024 17:00:21 -0600
Subject: [PATCH 43/56] Implement infinite scrolling for frigate+ view (#11273)

* Implement infinite scrolling for frigate+ view

* Also fixes safari preview glitch

* Show sub label name in hover
---
 web/src/components/player/LivePlayer.tsx      |   8 +-
 .../player/PreviewThumbnailPlayer.tsx         |   5 +
 web/src/pages/SubmitPlus.tsx                  | 132 +++++++++++++++---
 3 files changed, 127 insertions(+), 18 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index dcdd6423d..840b6413c 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -184,7 +184,13 @@ export default function LivePlayer({
               </TooltipTrigger>
             </div>
             <TooltipContent className="capitalize">
-              {[...new Set([...(objects || []).map(({ label }) => label)])]
+              {[
+                ...new Set([
+                  ...(objects || []).map(({ label, sub_label }) =>
+                    label.endsWith("verified") ? sub_label : label,
+                  ),
+                ]),
+              ]
                 .filter(
                   (label) =>
                     label !== undefined && !label.includes("-verified"),
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 97e96713c..59c8d73c9 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -431,6 +431,11 @@ export function VideoPreview({
       setReviewed();
 
       if (loop && playerRef.current) {
+        if (manualPlayback) {
+          setManualPlayback(false);
+          setTimeout(() => setManualPlayback(true), 100);
+        }
+
         playerRef.current.currentTime = playerStartTime;
         return;
       }
diff --git a/web/src/pages/SubmitPlus.tsx b/web/src/pages/SubmitPlus.tsx
index e2863760a..0799597aa 100644
--- a/web/src/pages/SubmitPlus.tsx
+++ b/web/src/pages/SubmitPlus.tsx
@@ -4,6 +4,7 @@ import {
   GeneralFilterContent,
 } from "@/components/filter/ReviewFilterGroup";
 import Chip from "@/components/indicators/Chip";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -34,7 +35,7 @@ import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import axios from "axios";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isMobile } from "react-device-detect";
 import {
   FaList,
@@ -44,6 +45,9 @@ import {
 } from "react-icons/fa";
 import { PiSlidersHorizontalFill } from "react-icons/pi";
 import useSWR from "swr";
+import useSWRInfinite from "swr/infinite";
+
+const API_LIMIT = 100;
 
 export default function SubmitPlus() {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -64,21 +68,93 @@ export default function SubmitPlus() {
 
   // data
 
-  const { data: events, mutate: refresh } = useSWR<Event[]>([
-    "events",
-    {
-      limit: 100,
-      in_progress: 0,
-      is_submitted: 0,
-      cameras: selectedCameras ? selectedCameras.join(",") : null,
-      labels: selectedLabels ? selectedLabels.join(",") : null,
-      min_score: scoreRange ? scoreRange[0] : null,
-      max_score: scoreRange ? scoreRange[1] : null,
-      sort: sort ? sort : null,
+  const eventFetcher = useCallback((key: string) => {
+    const [path, params] = Array.isArray(key) ? key : [key, undefined];
+    return axios.get(path, { params }).then((res) => res.data);
+  }, []);
+
+  const getKey = useCallback(
+    (index: number, prevData: Event[]) => {
+      if (index > 0) {
+        const lastDate = prevData[prevData.length - 1].start_time;
+        return [
+          "events",
+          {
+            limit: API_LIMIT,
+            in_progress: 0,
+            is_submitted: 0,
+            cameras: selectedCameras ? selectedCameras.join(",") : null,
+            labels: selectedLabels ? selectedLabels.join(",") : null,
+            min_score: scoreRange ? scoreRange[0] : null,
+            max_score: scoreRange ? scoreRange[1] : null,
+            sort: sort ? sort : null,
+            before: lastDate,
+          },
+        ];
+      }
+
+      return [
+        "events",
+        {
+          limit: 100,
+          in_progress: 0,
+          is_submitted: 0,
+          cameras: selectedCameras ? selectedCameras.join(",") : null,
+          labels: selectedLabels ? selectedLabels.join(",") : null,
+          min_score: scoreRange ? scoreRange[0] : null,
+          max_score: scoreRange ? scoreRange[1] : null,
+          sort: sort ? sort : null,
+        },
+      ];
     },
-  ]);
+    [scoreRange, selectedCameras, selectedLabels, sort],
+  );
+
+  const {
+    data: eventPages,
+    mutate: refresh,
+    size,
+    setSize,
+    isValidating,
+  } = useSWRInfinite<Event[]>(getKey, eventFetcher, {
+    revalidateOnFocus: false,
+  });
+
+  const events = useMemo(
+    () => (eventPages ? eventPages.flat() : []),
+    [eventPages],
+  );
+
   const [upload, setUpload] = useState<Event>();
 
+  // paging
+
+  const isDone = useMemo(
+    () => (eventPages?.at(-1)?.length ?? 0) < API_LIMIT,
+    [eventPages],
+  );
+
+  const pagingObserver = useRef<IntersectionObserver | null>();
+  const lastEventRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (isValidating) return;
+      if (pagingObserver.current) pagingObserver.current.disconnect();
+      try {
+        pagingObserver.current = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting && !isDone) {
+            setSize(size + 1);
+          }
+        });
+        if (node) pagingObserver.current.observe(node);
+      } catch (e) {
+        // no op
+      }
+    },
+    [isValidating, isDone, size, setSize],
+  );
+
+  // layout
+
   const grow = useMemo(() => {
     if (!config || !upload) {
       return "";
@@ -110,18 +186,35 @@ export default function SubmitPlus() {
           });
 
       refresh(
-        (data: Event[] | undefined) => {
+        (data: Event[][] | undefined) => {
           if (!data) {
             return data;
           }
 
-          const index = data.findIndex((e) => e.id == upload.id);
+          let pageIndex = -1;
+          let index = -1;
+
+          data.forEach((page, pIdx) => {
+            const search = page.findIndex((e) => e.id == upload.id);
+
+            if (search != -1) {
+              pageIndex = pIdx;
+              index = search;
+            }
+          });
 
           if (index == -1) {
             return data;
           }
 
-          return [...data.slice(0, index), ...data.slice(index + 1)];
+          return [
+            ...data.slice(0, pageIndex),
+            [
+              ...data[pageIndex].slice(0, index),
+              ...data[pageIndex].slice(index + 1),
+            ],
+            ...data.slice(pageIndex + 1),
+          ];
         },
         { revalidate: false, populateCache: true },
       );
@@ -182,14 +275,17 @@ export default function SubmitPlus() {
             </DialogContent>
           </Dialog>
 
-          {events?.map((event) => {
+          {events?.map((event, eIdx) => {
             if (event.data.type != "object") {
               return;
             }
 
+            const lastRow = eIdx == events.length - 1;
+
             return (
               <div
                 key={event.id}
+                ref={lastRow ? lastEventRef : null}
                 className="w-full relative rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
                 onClick={() => setUpload(event)}
               >
@@ -228,6 +324,8 @@ export default function SubmitPlus() {
               </div>
             );
           })}
+
+          {isValidating && <ActivityIndicator />}
         </div>
       </div>
     </div>

From a0da5018bfd113885abb1047a64cb2ffdd2732b6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 7 May 2024 07:27:20 -0500
Subject: [PATCH 44/56] add scrollbar on ptz presets dropdown (#11276)

---
 web/src/views/live/LiveCameraView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index aef3453e7..20e7df8fa 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -545,7 +545,7 @@ function PtzControlPanel({
               <BsThreeDotsVertical />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent className="max-h-[40dvh] overflow-y-auto">
             {ptz?.presets.map((preset) => {
               return (
                 <DropdownMenuItem

From 08e5c791c8d6d7273f2531f08450282505c20c5e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 7 May 2024 09:00:25 -0500
Subject: [PATCH 45/56] Use cn() for class names throughout (#11278)

* add scrollbar on ptz presets dropdown

* use cn function for class names throughout

* Revert "add scrollbar on ptz presets dropdown"

This reverts commit 2cee93dc3ecf0f77c78b8ef5bcd3c7135227ecd3.
---
 web/src/components/Logo.tsx                         |  4 +++-
 web/src/components/camera/ResizingCameraImage.tsx   |  3 ++-
 web/src/components/card/ExportCard.tsx              |  6 +++++-
 web/src/components/dynamic/CameraFeatureToggle.tsx  |  9 ++++++---
 web/src/components/filter/CameraGroupSelector.tsx   |  7 ++++++-
 web/src/components/icons/FrigatePlusIcon.tsx        |  3 ++-
 web/src/components/indicators/Chip.tsx              |  6 +++++-
 .../components/indicators/ImageLoadingIndicator.tsx |  5 +++--
 .../components/indicators/activity-indicator.tsx    |  3 ++-
 web/src/components/menu/AccountSettings.tsx         |  9 ++++++++-
 web/src/components/navigation/Bottombar.tsx         |  6 +++++-
 web/src/components/navigation/NavItem.tsx           |  9 ++++++---
 web/src/components/player/BirdseyeLivePlayer.tsx    |  6 +++++-
 web/src/components/player/LivePlayer.tsx            | 12 +++++++++---
 web/src/components/player/PreviewPlayer.tsx         | 13 +++++++++++--
 web/src/components/player/VideoControls.tsx         |  6 +++++-
 .../player/dynamic/DynamicVideoPlayer.tsx           |  6 +++++-
 web/src/pages/Logs.tsx                              |  7 ++++++-
 18 files changed, 94 insertions(+), 26 deletions(-)

diff --git a/web/src/components/Logo.tsx b/web/src/components/Logo.tsx
index 32cd52eda..ca2897ac4 100644
--- a/web/src/components/Logo.tsx
+++ b/web/src/components/Logo.tsx
@@ -1,9 +1,11 @@
+import { cn } from "@/lib/utils";
+
 type LogoProps = {
   className?: string;
 };
 export default function Logo({ className }: LogoProps) {
   return (
-    <svg viewBox="0 0 512 512" className={`fill-current ${className}`}>
+    <svg viewBox="0 0 512 512" className={cn("fill-current", className)}>
       <path d="M130 446.5C131.6 459.3 145 468 137 470C129 472 94 406.5 86 378.5C78 350.5 73.5 319 75.5 301C77.4999 283 181 255 181 247.5C181 240 147.5 247 146 241C144.5 235 171.3 238.6 178.5 229C189.75 214 204 216.5 213 208.5C222 200.5 233 170 235 157C237 144 215 129 209 119C203 109 222 102 268 83C314 64 460 22 462 27C464 32 414 53 379 66C344 79 287 104 287 111C287 118 290 123.5 288 139.5C286 155.5 285.76 162.971 282 173.5C279.5 180.5 277 197 282 212C286 224 299 233 305 235C310 235.333 323.8 235.8 339 235C358 234 385 236 385 241C385 246 344 243 344 250C344 257 386 249 385 256C384 263 350 260 332 260C317.6 260 296.333 259.333 287 256L285 263C281.667 263 274.7 265 267.5 265C258.5 265 258 268 241.5 268C225 268 230 267 215 266C200 265 144 308 134 322C124 336 130 370 130 385.5C130 399.428 128 430.5 130 446.5Z" />
     </svg>
   );
diff --git a/web/src/components/camera/ResizingCameraImage.tsx b/web/src/components/camera/ResizingCameraImage.tsx
index f19c40ff3..47b25124e 100644
--- a/web/src/components/camera/ResizingCameraImage.tsx
+++ b/web/src/components/camera/ResizingCameraImage.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useResizeObserver } from "@/hooks/resize-observer";
+import { cn } from "@/lib/utils";
 
 type CameraImageProps = {
   className?: string;
@@ -95,7 +96,7 @@ export default function CameraImage({
 
   return (
     <div
-      className={`relative w-full h-full flex justify-center ${className}`}
+      className={cn("relative w-full h-full flex justify-center", className)}
       ref={containerRef}
     >
       {enabled ? (
diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index f7dd7f588..2ce048562 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -18,6 +18,7 @@ import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { DeleteClipType, Export } from "@/types/export";
 import { MdEditSquare } from "react-icons/md";
 import { baseUrl } from "@/api/baseUrl";
+import { cn } from "@/lib/utils";
 
 type ExportProps = {
   className: string;
@@ -104,7 +105,10 @@ export default function ExportCard({
       </Dialog>
 
       <div
-        className={`relative aspect-video bg-black rounded-lg md:rounded-2xl flex justify-center items-center ${className}`}
+        className={cn(
+          "relative aspect-video bg-black rounded-lg md:rounded-2xl flex justify-center items-center",
+          className,
+        )}
         onMouseEnter={
           isDesktop && !exportedRecording.in_progress
             ? () => setHovered(true)
diff --git a/web/src/components/dynamic/CameraFeatureToggle.tsx b/web/src/components/dynamic/CameraFeatureToggle.tsx
index b0418c556..a31bafb9d 100644
--- a/web/src/components/dynamic/CameraFeatureToggle.tsx
+++ b/web/src/components/dynamic/CameraFeatureToggle.tsx
@@ -5,6 +5,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isDesktop } from "react-device-detect";
+import { cn } from "@/lib/utils";
 
 const variants = {
   primary: {
@@ -38,9 +39,11 @@ export default function CameraFeatureToggle({
   const content = (
     <div
       onClick={onClick}
-      className={`${className} flex flex-col justify-center items-center ${
-        variants[variant][isActive ? "active" : "inactive"]
-      }`}
+      className={cn(
+        className,
+        "flex flex-col justify-center items-center",
+        variants[variant][isActive ? "active" : "inactive"],
+      )}
     >
       <Icon
         className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-secondary-foreground"}`}
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 2f3628088..128645ce2 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -60,6 +60,7 @@ import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -120,7 +121,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
       />
       <Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
         <div
-          className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : "whitespace-nowrap"}`}
+          className={cn(
+            "flex items-center justify-start gap-2",
+            className,
+            isDesktop ? "flex-col" : "whitespace-nowrap",
+          )}
         >
           <Tooltip open={tooltip == "default"}>
             <TooltipTrigger asChild>
diff --git a/web/src/components/icons/FrigatePlusIcon.tsx b/web/src/components/icons/FrigatePlusIcon.tsx
index 1a9ff2e05..24ee06eb5 100644
--- a/web/src/components/icons/FrigatePlusIcon.tsx
+++ b/web/src/components/icons/FrigatePlusIcon.tsx
@@ -1,5 +1,6 @@
 import { LuPlus } from "react-icons/lu";
 import Logo from "../Logo";
+import { cn } from "@/lib/utils";
 
 type FrigatePlusIconProps = {
   className?: string;
@@ -11,7 +12,7 @@ export default function FrigatePlusIcon({
 }: FrigatePlusIconProps) {
   return (
     <div
-      className={`relative flex items-center ${className ?? ""}`}
+      className={cn("relative flex items-center", className)}
       onClick={onClick}
     >
       <Logo className="size-full" />
diff --git a/web/src/components/indicators/Chip.tsx b/web/src/components/indicators/Chip.tsx
index 7a2c4f5b5..e9abcf5e6 100644
--- a/web/src/components/indicators/Chip.tsx
+++ b/web/src/components/indicators/Chip.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { LogSeverity } from "@/types/log";
 import { ReactNode, useMemo, useRef } from "react";
 import { CSSTransition } from "react-transition-group";
@@ -32,7 +33,10 @@ export default function Chip({
     >
       <div
         ref={nodeRef}
-        className={`flex px-2 py-1.5 rounded-2xl items-center z-10 ${className}`}
+        className={cn(
+          "flex px-2 py-1.5 rounded-2xl items-center z-10",
+          className,
+        )}
         onClick={onClick}
       >
         {children}
diff --git a/web/src/components/indicators/ImageLoadingIndicator.tsx b/web/src/components/indicators/ImageLoadingIndicator.tsx
index 32531ea2b..dc3054181 100644
--- a/web/src/components/indicators/ImageLoadingIndicator.tsx
+++ b/web/src/components/indicators/ImageLoadingIndicator.tsx
@@ -1,5 +1,6 @@
 import { isSafari } from "react-device-detect";
 import { Skeleton } from "../ui/skeleton";
+import { cn } from "@/lib/utils";
 
 export default function ImageLoadingIndicator({
   className,
@@ -13,8 +14,8 @@ export default function ImageLoadingIndicator({
   }
 
   return isSafari ? (
-    <div className={`bg-gray-300 pointer-events-none ${className ?? ""}`} />
+    <div className={cn("bg-gray-300 pointer-events-none", className)} />
   ) : (
-    <Skeleton className={`pointer-events-none ${className ?? ""}`} />
+    <Skeleton className={cn("pointer-events-none", className)} />
   );
 }
diff --git a/web/src/components/indicators/activity-indicator.tsx b/web/src/components/indicators/activity-indicator.tsx
index edabf1f1b..5591c9b7d 100644
--- a/web/src/components/indicators/activity-indicator.tsx
+++ b/web/src/components/indicators/activity-indicator.tsx
@@ -1,9 +1,10 @@
+import { cn } from "@/lib/utils";
 import { LuLoader2 } from "react-icons/lu";
 
 export default function ActivityIndicator({ className = "w-full", size = 30 }) {
   return (
     <div
-      className={`flex items-center justify-center ${className}`}
+      className={cn("flex items-center justify-center", className)}
       aria-label="Loading…"
     >
       <LuLoader2 className="animate-spin" size={size} />
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index a5068c753..f6afa1d99 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -3,6 +3,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
@@ -15,7 +16,13 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"} ${className ?? ""}`}
+          className={cn(
+            "flex flex-col justify-center items-center",
+            isDesktop
+              ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer"
+              : "text-secondary-foreground",
+            className,
+          )}
         >
           <VscAccount className="size-5 md:m-[6px]" />
         </div>
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index d0059ffcf..d71dfba12 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -14,6 +14,7 @@ import {
   StatusMessage,
 } from "@/context/statusbar-provider";
 import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -75,7 +76,10 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
         <IoIosWarning className="size-5 text-danger" />
       </DrawerTrigger>
       <DrawerContent
-        className={`max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden ${className ?? ""}`}
+        className={cn(
+          "max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden",
+          className,
+        )}
       >
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {Object.entries(messages).map(([key, messageArray]) => (
diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index acda54ebe..41f5aeff4 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -8,6 +8,7 @@ import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { NavData } from "@/types/navigation";
 import { IconType } from "react-icons";
+import { cn } from "@/lib/utils";
 
 const variants = {
   primary: {
@@ -42,9 +43,11 @@ export default function NavItem({
       to={item.url}
       onClick={onClick}
       className={({ isActive }) =>
-        `flex flex-col justify-center items-center rounded-lg ${className ?? ""} ${
-          variants[item.variant ?? "primary"][isActive ? "active" : "inactive"]
-        }`
+        cn(
+          "flex flex-col justify-center items-center rounded-lg",
+          className,
+          variants[item.variant ?? "primary"][isActive ? "active" : "inactive"],
+        )
       }
     >
       <Icon className="size-5 md:m-[6px]" />
diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index a14756039..b9c64379b 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -4,6 +4,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import JSMpegPlayer from "./JSMpegPlayer";
 import MSEPlayer from "./MsePlayer";
 import { LivePlayerMode } from "@/types/live";
+import { cn } from "@/lib/utils";
 
 type LivePlayerProps = {
   className?: string;
@@ -57,7 +58,10 @@ export default function BirdseyeLivePlayer({
 
   return (
     <div
-      className={`relative flex justify-center w-full cursor-pointer ${className ?? ""}`}
+      className={cn(
+        "relative flex justify-center w-full cursor-pointer",
+        className,
+      )}
       onClick={onClick}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 840b6413c..3e1503d28 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -13,6 +13,7 @@ import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { getIconForLabel } from "@/utils/iconUtil";
 import Chip from "../indicators/Chip";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
+import { cn } from "@/lib/utils";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -150,11 +151,16 @@ export default function LivePlayer({
     <div
       ref={cameraRef}
       data-camera={cameraConfig.name}
-      className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
+      className={cn(
+        "relative flex justify-center",
+        liveMode === "jsmpeg" ? "size-full" : "w-full",
+        "outline cursor-pointer",
         activeTracking
           ? "outline-severity_alert outline-3 rounded-lg md:rounded-2xl shadow-severity_alert"
-          : "outline-0 outline-background"
-      } transition-all duration-500 ${className}`}
+          : "outline-0 outline-background",
+        "transition-all duration-500",
+        className,
+      )}
       onClick={onClick}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 8554c0669..03a6c47d2 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -15,6 +15,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { isAndroid, isChrome, isMobile } from "react-device-detect";
 import { TimeRange } from "@/types/timeline";
 import { Skeleton } from "../ui/skeleton";
+import { cn } from "@/lib/utils";
 
 type PreviewPlayerProps = {
   className?: string;
@@ -238,7 +239,11 @@ function PreviewVideoPlayer({
 
   return (
     <div
-      className={`relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
+      className={cn(
+        "relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden",
+        onClick && "cursor-pointer",
+        className,
+      )}
       onClick={onClick}
     >
       <img
@@ -476,7 +481,11 @@ function PreviewFramesPlayer({
 
   return (
     <div
-      className={`relative w-full flex justify-center ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
+      className={cn(
+        "relative w-full flex justify-center",
+        className,
+        onClick && "cursor-pointer",
+      )}
       onClick={onClick}
     >
       <img
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 135f664ed..0b1125678 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -29,6 +29,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "../ui/alert-dialog";
+import { cn } from "@/lib/utils";
 
 type VideoControls = {
   volume?: boolean;
@@ -161,7 +162,10 @@ export default function VideoControls({
 
   return (
     <div
-      className={`px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-background/60 rounded-lg ${className ?? ""}`}
+      className={cn(
+        "px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-background/60 rounded-lg",
+        className,
+      )}
     >
       {video && features.volume && (
         <div className="flex justify-normal items-center gap-2 cursor-pointer">
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 0c095de97..7d1c7e4d9 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -11,6 +11,7 @@ import { TimeRange } from "@/types/timeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { VideoResolutionType } from "@/types/live";
 import axios from "axios";
+import { cn } from "@/lib/utils";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -202,7 +203,10 @@ export default function DynamicVideoPlayer({
         onUploadFrame={onUploadFrameToPlus}
       />
       <PreviewPlayer
-        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
+        className={cn(
+          isScrubbing || isLoading ? "visible" : "hidden",
+          className,
+        )}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index e6cf07be5..d1a8a7435 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -12,6 +12,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { isDesktop } from "react-device-detect";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { cn } from "@/lib/utils";
 
 const logTypes = ["frigate", "go2rtc", "nginx"] as const;
 type LogType = (typeof logTypes)[number];
@@ -472,7 +473,11 @@ function LogLineData({
   return (
     <div
       ref={startRef}
-      className={`w-full py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted ${className} *:text-sm`}
+      className={cn(
+        "w-full py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted",
+        className,
+        "*:text-sm",
+      )}
       onClick={onSelect}
     >
       <div className="h-full p-1 flex items-center gap-2">

From ff2948a76b8f864ff927564faec83f5ba8a51112 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 7 May 2024 09:28:10 -0500
Subject: [PATCH 46/56] Drag to reorder/resize cameras in camera groups
 (#11279)

* draggable/resizable cameras in camera groups on desktop/tablets

* fix edit button location on tablets

* assume 1rem is 16px
---
 web/package-lock.json                         |  71 +++
 web/package.json                              |   2 +
 .../components/filter/CameraGroupSelector.tsx |  28 +-
 web/src/components/settings/General.tsx       |  82 +++-
 web/src/hooks/use-overlay-state.tsx           |  14 +-
 web/src/hooks/use-persistence.ts              |  10 +-
 web/src/pages/Live.tsx                        |   1 +
 web/src/views/live/DraggableGridLayout.tsx    | 461 ++++++++++++++++++
 web/src/views/live/LiveDashboardView.tsx      | 104 ++--
 9 files changed, 714 insertions(+), 59 deletions(-)
 create mode 100644 web/src/views/live/DraggableGridLayout.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index 122c26570..1df2344a4 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -48,6 +48,7 @@
         "react-day-picker": "^8.10.1",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
+        "react-grid-layout": "^1.4.4",
         "react-hook-form": "^7.51.3",
         "react-icons": "^5.1.0",
         "react-konva": "^18.2.10",
@@ -76,6 +77,7 @@
         "@types/node": "^20.12.7",
         "@types/react": "^18.2.79",
         "@types/react-dom": "^18.2.25",
+        "@types/react-grid-layout": "^1.3.5",
         "@types/react-icons": "^3.0.0",
         "@types/react-transition-group": "^4.4.10",
         "@types/strftime": "^0.9.8",
@@ -2572,6 +2574,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-grid-layout": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-grid-layout/-/react-grid-layout-1.3.5.tgz",
+      "integrity": "sha512-WH/po1gcEcoR6y857yAnPGug+ZhkF4PaTUxgAbwfeSH/QOgVSakKHBXoPGad/sEznmkiaK3pqHk+etdWisoeBQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-icons": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/react-icons/-/react-icons-3.0.0.tgz",
@@ -4392,6 +4403,11 @@
       "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
       "dev": true
     },
+    "node_modules/fast-equals": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
+      "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -6329,6 +6345,44 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-draggable/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react-grid-layout": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.4.4.tgz",
+      "integrity": "sha512-7+Lg8E8O8HfOH5FrY80GCIR1SHTn2QnAYKh27/5spoz+OHhMmEhU/14gIkRzJOtympDPaXcVRX/nT1FjmeOUmQ==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "fast-equals": "^4.0.3",
+        "prop-types": "^15.8.1",
+        "react-draggable": "^4.4.5",
+        "react-resizable": "^3.0.5",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.51.3",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.3.tgz",
@@ -6448,6 +6502,18 @@
         }
       }
     },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.22.3",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
@@ -6639,6 +6705,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
diff --git a/web/package.json b/web/package.json
index 3e8fc2907..980223748 100644
--- a/web/package.json
+++ b/web/package.json
@@ -53,6 +53,7 @@
     "react-day-picker": "^8.10.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-grid-layout": "^1.4.4",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.1.0",
     "react-konva": "^18.2.10",
@@ -81,6 +82,7 @@
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
+    "@types/react-grid-layout": "^1.3.5",
     "@types/react-icons": "^3.0.0",
     "@types/react-transition-group": "^4.4.10",
     "@types/strftime": "^0.9.8",
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 128645ce2..84d1a36b5 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -59,6 +59,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { ScrollArea, ScrollBar } from "../ui/scroll-area";
+import { usePersistence } from "@/hooks/use-persistence";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 
@@ -89,7 +90,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
 
   // groups
 
-  const [group, setGroup] = usePersistedOverlayState(
+  const [group, setGroup, deleteGroup] = usePersistedOverlayState(
     "cameraGroup",
     "default" as string,
   );
@@ -118,6 +119,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
         currentGroups={groups}
         activeGroup={group}
         setGroup={setGroup}
+        deleteGroup={deleteGroup}
       />
       <Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
         <div
@@ -198,6 +200,7 @@ type NewGroupDialogProps = {
   currentGroups: [string, CameraGroupConfig][];
   activeGroup?: string;
   setGroup: (value: string | undefined, replace?: boolean | undefined) => void;
+  deleteGroup: () => void;
 };
 function NewGroupDialog({
   open,
@@ -205,6 +208,7 @@ function NewGroupDialog({
   currentGroups,
   activeGroup,
   setGroup,
+  deleteGroup,
 }: NewGroupDialogProps) {
   const { mutate: updateConfig } = useSWR<FrigateConfig>("config");
 
@@ -225,11 +229,16 @@ function NewGroupDialog({
   const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
   const [isLoading, setIsLoading] = useState(false);
 
+  const [, , , deleteGridLayout] = usePersistence(
+    `${activeGroup}-draggable-layout`,
+  );
+
   // callbacks
 
   const onDeleteGroup = useCallback(
     async (name: string) => {
-      // TODO: reset order on groups when deleting
+      deleteGridLayout();
+      deleteGroup();
 
       await axios
         .put(`config/set?camera_groups.${name}`, { requires_restart: 0 })
@@ -260,7 +269,14 @@ function NewGroupDialog({
           setIsLoading(false);
         });
     },
-    [updateConfig, activeGroup, setGroup, setOpen],
+    [
+      updateConfig,
+      activeGroup,
+      setGroup,
+      setOpen,
+      deleteGroup,
+      deleteGridLayout,
+    ],
   );
 
   const onSave = () => {
@@ -479,7 +495,11 @@ export function CameraGroupEdit({
         {
           message: "Camera group name already exists.",
         },
-      ),
+      )
+      .refine((value: string) => value.toLowerCase() !== "default", {
+        message: "Invalid camera group name.",
+      }),
+
     cameras: z.array(z.string()).min(2, {
       message: "You must select at least two cameras.",
     }),
diff --git a/web/src/components/settings/General.tsx b/web/src/components/settings/General.tsx
index 70f6203b2..bdd30fdb7 100644
--- a/web/src/components/settings/General.tsx
+++ b/web/src/components/settings/General.tsx
@@ -1,19 +1,91 @@
 import Heading from "@/components/ui/heading";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
+import { Toaster } from "sonner";
+import { toast } from "sonner";
+import { Separator } from "../ui/separator";
+import { Button } from "../ui/button";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { del as delData } from "idb-keyval";
 
 export default function General() {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const clearStoredLayouts = useCallback(() => {
+    if (!config) {
+      return [];
+    }
+
+    Object.entries(config.camera_groups).forEach(async (value) => {
+      await delData(`${value[0]}-draggable-layout`)
+        .then(() => {
+          toast.success(`Cleared stored layout for ${value[0]}`, {
+            position: "top-center",
+          });
+        })
+        .catch((error) => {
+          toast.error(
+            `Failed to clear stored layout: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        });
+    });
+  }, [config]);
+
   useEffect(() => {
     document.title = "General Settings - Frigate";
   }, []);
 
   return (
     <>
-      <Heading as="h2">Settings</Heading>
-      <div className="flex items-center space-x-2 mt-5">
-        <Switch id="lowdata" checked={false} onCheckedChange={() => {}} />
-        <Label htmlFor="lowdata">Low Data Mode (this device only)</Label>
+      <div className="flex flex-col md:flex-row size-full">
+        <Toaster position="top-center" closeButton={true} />
+        <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
+          <Heading as="h3" className="my-2">
+            General Settings
+          </Heading>
+
+          <div className="flex flex-col w-full space-y-6">
+            <div className="mt-2 space-y-6">
+              <div className="space-y-0.5">
+                <div className="text-md">Stored Layouts</div>
+                <div className="text-sm text-muted-foreground my-2">
+                  <p>
+                    The layout of cameras in a camera group can be
+                    dragged/resized. The positions are stored in your browser's
+                    local storage.
+                  </p>
+                </div>
+              </div>
+              <div className="flex flex-row justify-start items-center gap-2">
+                <Button onClick={clearStoredLayouts}>Clear All Layouts</Button>
+              </div>
+            </div>
+            <Separator className="flex my-2 bg-secondary" />
+            <div className="mt-2 space-y-6">
+              <div className="space-y-0.5">
+                <div className="text-md">Low Data Mode</div>
+                <div className="text-sm text-muted-foreground my-2">
+                  <p>
+                    Not yet implemented. <em>Default: disabled</em>
+                  </p>
+                </div>
+              </div>
+              <div className="flex flex-row justify-start items-center gap-2">
+                <Switch
+                  id="lowdata"
+                  checked={false}
+                  onCheckedChange={() => {}}
+                />
+                <Label htmlFor="lowdata">
+                  Low Data Mode (this device only)
+                </Label>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
index 391712c6a..f39717288 100644
--- a/web/src/hooks/use-overlay-state.tsx
+++ b/web/src/hooks/use-overlay-state.tsx
@@ -33,14 +33,15 @@ export function useOverlayState<S>(
 export function usePersistedOverlayState<S extends string>(
   key: string,
   defaultValue: S | undefined = undefined,
-): [S | undefined, (value: S | undefined, replace?: boolean) => void] {
-  const [persistedValue, setPersistedValue] = usePersistence<S>(
-    key,
-    defaultValue,
-  );
+): [
+  S | undefined,
+  (value: S | undefined, replace?: boolean) => void,
+  () => void,
+] {
+  const [persistedValue, setPersistedValue, , deletePersistedValue] =
+    usePersistence<S>(key, defaultValue);
   const location = useLocation();
   const navigate = useNavigate();
-
   const currentLocationState = useMemo(() => location.state, [location]);
 
   const setOverlayStateValue = useCallback(
@@ -63,6 +64,7 @@ export function usePersistedOverlayState<S extends string>(
   return [
     overlayStateValue ?? persistedValue ?? defaultValue,
     setOverlayStateValue,
+    deletePersistedValue,
   ];
 }
 
diff --git a/web/src/hooks/use-persistence.ts b/web/src/hooks/use-persistence.ts
index 1b2f2a4d4..8762c1970 100644
--- a/web/src/hooks/use-persistence.ts
+++ b/web/src/hooks/use-persistence.ts
@@ -1,10 +1,11 @@
 import { useEffect, useState, useCallback } from "react";
-import { get as getData, set as setData } from "idb-keyval";
+import { get as getData, set as setData, del as delData } from "idb-keyval";
 
 type usePersistenceReturn<S> = [
   value: S | undefined,
   setValue: (value: S | undefined) => void,
   loaded: boolean,
+  deleteValue: () => void,
 ];
 
 export function usePersistence<S>(
@@ -26,6 +27,11 @@ export function usePersistence<S>(
     [key],
   );
 
+  const deleteValue = useCallback(async () => {
+    await delData(key);
+    setInternalValue(defaultValue);
+  }, [key, defaultValue]);
+
   useEffect(() => {
     setLoaded(false);
     setInternalValue(defaultValue);
@@ -41,5 +47,5 @@ export function usePersistence<S>(
     load();
   }, [key, defaultValue, setValue]);
 
-  return [value, setValue, loaded];
+  return [value, setValue, loaded, deleteValue];
 }
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 387aa3856..bae56b6bb 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -89,6 +89,7 @@ function Live() {
   return (
     <LiveDashboardView
       cameras={cameras}
+      cameraGroup={cameraGroup}
       includeBirdseye={includesBirdseye}
       onSelectCamera={setSelectedCameraName}
     />
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
new file mode 100644
index 000000000..f0a64b92a
--- /dev/null
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -0,0 +1,461 @@
+import { usePersistence } from "@/hooks/use-persistence";
+import {
+  BirdseyeConfig,
+  CameraConfig,
+  FrigateConfig,
+} from "@/types/frigateConfig";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Layout, Responsive, WidthProvider } from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
+import { LivePlayerMode } from "@/types/live";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useResizeObserver } from "@/hooks/resize-observer";
+import { isEqual } from "lodash";
+import useSWR from "swr";
+import { isSafari } from "react-device-detect";
+import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
+import LivePlayer from "@/components/player/LivePlayer";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { IoClose } from "react-icons/io5";
+import { LuMoveDiagonal2 } from "react-icons/lu";
+
+type DraggableGridLayoutProps = {
+  cameras: CameraConfig[];
+  cameraGroup: string;
+  cameraRef: (node: HTMLElement | null) => void;
+  includeBirdseye: boolean;
+  onSelectCamera: (camera: string) => void;
+  windowVisible: boolean;
+  visibleCameras: string[];
+};
+export default function DraggableGridLayout({
+  cameras,
+  cameraGroup,
+  cameraRef,
+  includeBirdseye,
+  onSelectCamera,
+  windowVisible,
+  visibleCameras,
+}: DraggableGridLayoutProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
+
+  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);
+
+  const [gridLayout, setGridLayout, isGridLayoutLoaded] = usePersistence<
+    Layout[]
+  >(`${cameraGroup}-draggable-layout`);
+
+  const [currentCameras, setCurrentCameras] = useState<CameraConfig[]>();
+  const [currentIncludeBirdseye, setCurrentIncludeBirdseye] =
+    useState<boolean>();
+  const [currentGridLayout, setCurrentGridLayout] = useState<
+    Layout[] | undefined
+  >();
+
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+
+  const handleLayoutChange = useCallback(
+    (currentLayout: Layout[]) => {
+      if (!isGridLayoutLoaded || !isEqual(gridLayout, currentGridLayout)) {
+        return;
+      }
+      // save layout to idb
+      setGridLayout(currentLayout);
+    },
+    [setGridLayout, isGridLayoutLoaded, gridLayout, currentGridLayout],
+  );
+
+  const generateLayout = useCallback(() => {
+    if (!isGridLayoutLoaded) {
+      return;
+    }
+
+    const cameraNames =
+      includeBirdseye && birdseyeConfig?.enabled
+        ? ["birdseye", ...cameras.map((camera) => camera?.name || "")]
+        : cameras.map((camera) => camera?.name || "");
+
+    const optionsMap: Layout[] = currentGridLayout
+      ? currentGridLayout.filter((layout) => cameraNames?.includes(layout.i))
+      : [];
+
+    cameraNames.forEach((cameraName, index) => {
+      const existingLayout = optionsMap.find(
+        (layout) => layout.i === cameraName,
+      );
+
+      // Skip if the camera already exists in the layout
+      if (existingLayout) {
+        return;
+      }
+
+      let aspectRatio;
+      let col;
+
+      // Handle "birdseye" camera as a special case
+      if (cameraName === "birdseye") {
+        aspectRatio =
+          (birdseyeConfig?.width || 1) / (birdseyeConfig?.height || 1);
+        col = 0; // Set birdseye camera in the first column
+      } else {
+        const camera = cameras.find((cam) => cam.name === cameraName);
+        aspectRatio =
+          (camera && camera?.detect.width / camera?.detect.height) || 16 / 9;
+        col = index % 3; // Regular cameras distributed across columns
+      }
+
+      // Calculate layout options based on aspect ratio
+      const columnsPerPlayer = 4;
+      let height;
+      let width;
+
+      if (aspectRatio < 1) {
+        // Portrait
+        height = 2 * columnsPerPlayer;
+        width = columnsPerPlayer;
+      } else if (aspectRatio > 2) {
+        // Wide
+        height = 1 * columnsPerPlayer;
+        width = 2 * columnsPerPlayer;
+      } else {
+        // Landscape
+        height = 1 * columnsPerPlayer;
+        width = columnsPerPlayer;
+      }
+
+      const options = {
+        i: cameraName,
+        x: col * width,
+        y: 0, // don't set y, grid does automatically
+        w: width,
+        h: height,
+        isDraggable: isEditMode,
+        isResizable: isEditMode,
+      };
+
+      optionsMap.push(options);
+    });
+
+    return optionsMap;
+  }, [
+    cameras,
+    isEditMode,
+    isGridLayoutLoaded,
+    currentGridLayout,
+    includeBirdseye,
+    birdseyeConfig,
+  ]);
+
+  const toggleEditMode = useCallback(() => {
+    if (currentGridLayout) {
+      const updatedGridLayout = currentGridLayout.map((layout) => ({
+        ...layout,
+        isDraggable: !isEditMode,
+        isResizable: !isEditMode,
+      }));
+      if (isEditMode) {
+        setGridLayout(updatedGridLayout);
+        setCurrentGridLayout(updatedGridLayout);
+      } else {
+        setGridLayout(updatedGridLayout);
+      }
+      setIsEditMode((prevIsEditMode) => !prevIsEditMode);
+    }
+  }, [currentGridLayout, isEditMode, setGridLayout]);
+
+  useEffect(() => {
+    if (isGridLayoutLoaded) {
+      if (gridLayout) {
+        // set current grid layout from loaded
+        setCurrentGridLayout(gridLayout);
+      } else {
+        // idb is empty, set it with an initial layout
+        setGridLayout(generateLayout());
+      }
+    }
+  }, [
+    isEditMode,
+    gridLayout,
+    currentGridLayout,
+    setGridLayout,
+    isGridLayoutLoaded,
+    generateLayout,
+  ]);
+
+  useEffect(() => {
+    if (
+      !isEqual(cameras, currentCameras) ||
+      includeBirdseye !== currentIncludeBirdseye
+    ) {
+      setCurrentCameras(cameras);
+      setCurrentIncludeBirdseye(includeBirdseye);
+
+      // set new grid layout in idb
+      setGridLayout(generateLayout());
+    }
+  }, [
+    cameras,
+    includeBirdseye,
+    currentCameras,
+    currentIncludeBirdseye,
+    setCurrentGridLayout,
+    generateLayout,
+    setGridLayout,
+    isGridLayoutLoaded,
+  ]);
+
+  const gridContainerRef = useRef<HTMLDivElement>(null);
+
+  const [{ width: containerWidth }] = useResizeObserver(gridContainerRef);
+
+  const cellHeight = useMemo(() => {
+    const aspectRatio = 16 / 9;
+    const totalMarginWidth = 11 * 13; // 11 margins with 13px each
+    const rowHeight =
+      ((containerWidth ?? window.innerWidth) - totalMarginWidth) /
+      (13 * aspectRatio);
+    return rowHeight;
+  }, [containerWidth]);
+
+  return (
+    <>
+      {!isGridLayoutLoaded || !currentGridLayout ? (
+        <div className="mt-2 px-2 grid grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4">
+          {includeBirdseye && birdseyeConfig?.enabled && (
+            <Skeleton className="size-full rounded-2xl" />
+          )}
+          {cameras.map((camera) => {
+            return (
+              <Skeleton
+                key={camera.name}
+                className="aspect-video size-full rounded-2xl"
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <div
+          className="my-2 px-2 pb-8 no-scrollbar overflow-x-hidden"
+          ref={gridContainerRef}
+        >
+          <ResponsiveGridLayout
+            className="grid-layout"
+            layouts={{
+              lg: currentGridLayout,
+              md: currentGridLayout,
+              sm: currentGridLayout,
+              xs: currentGridLayout,
+              xxs: currentGridLayout,
+            }}
+            rowHeight={cellHeight}
+            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+            cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }}
+            margin={[16, 16]}
+            containerPadding={[8, 8]}
+            resizeHandles={["sw", "nw", "se", "ne"]}
+            onDragStop={handleLayoutChange}
+            onResizeStop={handleLayoutChange}
+          >
+            {includeBirdseye && birdseyeConfig?.enabled && (
+              <BirdseyeLivePlayerGridItem
+                key="birdseye"
+                className={`${isEditMode ? "outline outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing" : ""}`}
+                birdseyeConfig={birdseyeConfig}
+                liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
+                onClick={() => onSelectCamera("birdseye")}
+              >
+                {isEditMode && (
+                  <>
+                    <div className="absolute top-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                    <div className="absolute top-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                    <div className="absolute bottom-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                    <div className="absolute bottom-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                  </>
+                )}
+              </BirdseyeLivePlayerGridItem>
+            )}
+            {cameras.map((camera) => {
+              let grow;
+              const aspectRatio = camera.detect.width / camera.detect.height;
+              if (aspectRatio > ASPECT_WIDE_LAYOUT) {
+                grow = `aspect-wide`;
+              } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+                grow = `aspect-tall`;
+              } else {
+                grow = "aspect-video";
+              }
+              return (
+                <LivePlayerGridItem
+                  key={camera.name}
+                  cameraRef={cameraRef}
+                  className={`${grow} size-full rounded-lg md:rounded-2xl bg-black ${isEditMode ? "outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing" : ""}`}
+                  windowVisible={
+                    windowVisible && visibleCameras.includes(camera.name)
+                  }
+                  cameraConfig={camera}
+                  preferredLiveMode={isSafari ? "webrtc" : "mse"}
+                  onClick={() => {
+                    !isEditMode && onSelectCamera(camera.name);
+                  }}
+                >
+                  {isEditMode && (
+                    <>
+                      <div className="absolute top-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                      <div className="absolute top-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                      <div className="absolute bottom-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                      <div className="absolute bottom-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+                    </>
+                  )}
+                </LivePlayerGridItem>
+              );
+            })}
+          </ResponsiveGridLayout>
+          <div className="flex flex-row gap-2 items-center text-primary">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="default"
+                  className="fixed bottom-12 lg:bottom-9 right-5 z-50 h-12 w-12 p-0 rounded-full opacity-30 hover:opacity-100 transition-all duration-300"
+                  onClick={toggleEditMode}
+                >
+                  {isEditMode ? (
+                    <IoClose className="size-5" />
+                  ) : (
+                    <LuMoveDiagonal2 className="size-5" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                {isEditMode ? "Exit Editing" : "Edit Layout"}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+type BirdseyeLivePlayerGridItemProps = {
+  style?: React.CSSProperties;
+  className?: string;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
+  children?: React.ReactNode;
+  birdseyeConfig: BirdseyeConfig;
+  liveMode: LivePlayerMode;
+  onClick: () => void;
+};
+
+const BirdseyeLivePlayerGridItem = React.forwardRef<
+  HTMLDivElement,
+  BirdseyeLivePlayerGridItemProps
+>(
+  (
+    {
+      style,
+      className,
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd,
+      children,
+      birdseyeConfig,
+      liveMode,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        style={{ ...style }}
+        ref={ref}
+        onMouseDown={onMouseDown}
+        onMouseUp={onMouseUp}
+        onTouchEnd={onTouchEnd}
+        {...props}
+      >
+        <BirdseyeLivePlayer
+          className={className}
+          birdseyeConfig={birdseyeConfig}
+          liveMode={liveMode}
+          onClick={onClick}
+        />
+        {children}
+      </div>
+    );
+  },
+);
+
+type LivePlayerGridItemProps = {
+  style?: React.CSSProperties;
+  className: string;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
+  children?: React.ReactNode;
+  cameraRef: (node: HTMLElement | null) => void;
+  windowVisible: boolean;
+  cameraConfig: CameraConfig;
+  preferredLiveMode: LivePlayerMode;
+  onClick: () => void;
+};
+
+const LivePlayerGridItem = React.forwardRef<
+  HTMLDivElement,
+  LivePlayerGridItemProps
+>(
+  (
+    {
+      style,
+      className,
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd,
+      children,
+      cameraRef,
+      windowVisible,
+      cameraConfig,
+      preferredLiveMode,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        style={{ ...style }}
+        ref={ref}
+        onMouseDown={onMouseDown}
+        onMouseUp={onMouseUp}
+        onTouchEnd={onTouchEnd}
+        {...props}
+      >
+        <LivePlayer
+          cameraRef={cameraRef}
+          className={className}
+          windowVisible={windowVisible}
+          cameraConfig={cameraConfig}
+          preferredLiveMode={preferredLiveMode}
+          onClick={onClick}
+        />
+        {children}
+      </div>
+    );
+  },
+);
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 31be2dce1..1c7d2d3e0 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -12,16 +12,24 @@ import { usePersistence } from "@/hooks/use-persistence";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isDesktop, isMobile, isSafari } from "react-device-detect";
+import {
+  isDesktop,
+  isMobile,
+  isMobileOnly,
+  isSafari,
+} from "react-device-detect";
 import useSWR from "swr";
+import DraggableGridLayout from "./DraggableGridLayout";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
+  cameraGroup?: string;
   includeBirdseye: boolean;
   onSelectCamera: (camera: string) => void;
 };
 export default function LiveDashboardView({
   cameras,
+  cameraGroup,
   includeBirdseye,
   onSelectCamera,
 }: LiveDashboardViewProps) {
@@ -29,7 +37,7 @@ export default function LiveDashboardView({
 
   // layout
 
-  const [layout, setLayout] = usePersistence<"grid" | "list">(
+  const [mobileLayout, setMobileLayout] = usePersistence<"grid" | "list">(
     "live-layout",
     isDesktop ? "grid" : "list",
   );
@@ -150,25 +158,25 @@ export default function LiveDashboardView({
           <div className="flex items-center gap-1">
             <Button
               className={`p-1 ${
-                layout == "grid"
+                mobileLayout == "grid"
                   ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
                   : "bg-secondary"
               }`}
               size="xs"
-              onClick={() => setLayout("grid")}
+              onClick={() => setMobileLayout("grid")}
             >
-              <LiveGridIcon layout={layout} />
+              <LiveGridIcon layout={mobileLayout} />
             </Button>
             <Button
               className={`p-1 ${
-                layout == "list"
+                mobileLayout == "list"
                   ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
                   : "bg-secondary"
               }`}
               size="xs"
-              onClick={() => setLayout("list")}
+              onClick={() => setMobileLayout("list")}
             >
-              <LiveListIcon layout={layout} />
+              <LiveListIcon layout={mobileLayout} />
             </Button>
           </div>
         </div>
@@ -187,41 +195,53 @@ export default function LiveDashboardView({
         </ScrollArea>
       )}
 
-      <div
-        className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
-      >
-        {includeBirdseye && birdseyeConfig?.enabled && (
-          <BirdseyeLivePlayer
-            birdseyeConfig={birdseyeConfig}
-            liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
-            onClick={() => onSelectCamera("birdseye")}
-          />
-        )}
-        {cameras.map((camera) => {
-          let grow;
-          const aspectRatio = camera.detect.width / camera.detect.height;
-          if (aspectRatio > 2) {
-            grow = `${layout == "grid" ? "col-span-2" : ""} aspect-wide`;
-          } else if (aspectRatio < 1) {
-            grow = `${layout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
-          } else {
-            grow = "aspect-video";
-          }
-          return (
-            <LivePlayer
-              cameraRef={cameraRef}
-              key={camera.name}
-              className={`${grow} rounded-lg md:rounded-2xl bg-black`}
-              windowVisible={
-                windowVisible && visibleCameras.includes(camera.name)
-              }
-              cameraConfig={camera}
-              preferredLiveMode={isSafari ? "webrtc" : "mse"}
-              onClick={() => onSelectCamera(camera.name)}
+      {!cameraGroup || cameraGroup == "default" || isMobileOnly ? (
+        <div
+          className={`mt-2 px-2 grid ${mobileLayout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
+        >
+          {includeBirdseye && birdseyeConfig?.enabled && (
+            <BirdseyeLivePlayer
+              birdseyeConfig={birdseyeConfig}
+              liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
+              onClick={() => onSelectCamera("birdseye")}
             />
-          );
-        })}
-      </div>
+          )}
+          {cameras.map((camera) => {
+            let grow;
+            const aspectRatio = camera.detect.width / camera.detect.height;
+            if (aspectRatio > 2) {
+              grow = `${mobileLayout == "grid" ? "col-span-2" : ""} aspect-wide`;
+            } else if (aspectRatio < 1) {
+              grow = `${mobileLayout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
+            } else {
+              grow = "aspect-video";
+            }
+            return (
+              <LivePlayer
+                cameraRef={cameraRef}
+                key={camera.name}
+                className={`${grow} rounded-lg md:rounded-2xl bg-black`}
+                windowVisible={
+                  windowVisible && visibleCameras.includes(camera.name)
+                }
+                cameraConfig={camera}
+                preferredLiveMode={isSafari ? "webrtc" : "mse"}
+                onClick={() => onSelectCamera(camera.name)}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <DraggableGridLayout
+          cameras={cameras}
+          cameraGroup={cameraGroup}
+          cameraRef={cameraRef}
+          includeBirdseye={includeBirdseye}
+          onSelectCamera={onSelectCamera}
+          windowVisible={windowVisible}
+          visibleCameras={visibleCameras}
+        />
+      )}
     </div>
   );
 }

From e7ba55691996f55ce0a0f18effd1f2df73558607 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 8 May 2024 06:34:22 -0600
Subject: [PATCH 47/56] Fix setting manual event update time (#11290)

---
 frigate/review/maintainer.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frigate/review/maintainer.py b/frigate/review/maintainer.py
index 295641656..8963c555c 100644
--- a/frigate/review/maintainer.py
+++ b/frigate/review/maintainer.py
@@ -511,7 +511,7 @@ class ReviewSegmentMaintainer(threading.Thread):
                             manual_info["label"]
                         )
                         # temporarily make it so this event can not end
-                        self.active_review_segments[camera] = sys.maxsize
+                        self.active_review_segments[camera].last_update = sys.maxsize
                     elif manual_info["state"] == ManualEventState.complete:
                         self.active_review_segments[camera].last_update = manual_info[
                             "end_time"

From db8c820677bbecb73fd5fd7c06248f1abe86be47 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 8 May 2024 07:53:22 -0500
Subject: [PATCH 48/56] Draggable camera grid tweaks (#11291)

* better math and other tweaks

* change icon
---
 web/src/views/live/DraggableGridLayout.tsx | 189 ++++++++++++++-------
 web/src/views/live/LiveDashboardView.tsx   |  74 +++++---
 2 files changed, 177 insertions(+), 86 deletions(-)

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index f0a64b92a..44f7e0b53 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -7,6 +7,7 @@ import {
 import React, {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -20,7 +21,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { isEqual } from "lodash";
 import useSWR from "swr";
-import { isSafari } from "react-device-detect";
+import { isDesktop, isMobile, isSafari } from "react-device-detect";
 import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 import LivePlayer from "@/components/player/LivePlayer";
 import { Button } from "@/components/ui/button";
@@ -30,25 +31,32 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { IoClose } from "react-icons/io5";
-import { LuMoveDiagonal2 } from "react-icons/lu";
+import { LuMove } from "react-icons/lu";
+import { cn } from "@/lib/utils";
 
 type DraggableGridLayoutProps = {
   cameras: CameraConfig[];
   cameraGroup: string;
   cameraRef: (node: HTMLElement | null) => void;
+  containerRef: React.RefObject<HTMLDivElement>;
   includeBirdseye: boolean;
   onSelectCamera: (camera: string) => void;
   windowVisible: boolean;
   visibleCameras: string[];
+  isEditMode: boolean;
+  setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export default function DraggableGridLayout({
   cameras,
   cameraGroup,
+  containerRef,
   cameraRef,
   includeBirdseye,
   onSelectCamera,
   windowVisible,
   visibleCameras,
+  isEditMode,
+  setIsEditMode,
 }: DraggableGridLayoutProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
@@ -66,8 +74,6 @@ export default function DraggableGridLayout({
     Layout[] | undefined
   >();
 
-  const [isEditMode, setIsEditMode] = useState<boolean>(false);
-
   const handleLayoutChange = useCallback(
     (currentLayout: Layout[]) => {
       if (!isGridLayoutLoaded || !isEqual(gridLayout, currentGridLayout)) {
@@ -160,12 +166,12 @@ export default function DraggableGridLayout({
     birdseyeConfig,
   ]);
 
-  const toggleEditMode = useCallback(() => {
+  useEffect(() => {
     if (currentGridLayout) {
       const updatedGridLayout = currentGridLayout.map((layout) => ({
         ...layout,
-        isDraggable: !isEditMode,
-        isResizable: !isEditMode,
+        isDraggable: isEditMode,
+        isResizable: isEditMode,
       }));
       if (isEditMode) {
         setGridLayout(updatedGridLayout);
@@ -173,9 +179,10 @@ export default function DraggableGridLayout({
       } else {
         setGridLayout(updatedGridLayout);
       }
-      setIsEditMode((prevIsEditMode) => !prevIsEditMode);
     }
-  }, [currentGridLayout, isEditMode, setGridLayout]);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEditMode, setGridLayout]);
 
   useEffect(() => {
     if (isGridLayoutLoaded) {
@@ -218,31 +225,58 @@ export default function DraggableGridLayout({
     isGridLayoutLoaded,
   ]);
 
+  const [marginValue, setMarginValue] = useState(16);
+
+  // calculate margin value for browsers that don't have default font size of 16px
+  useLayoutEffect(() => {
+    const calculateRemValue = () => {
+      const htmlElement = document.documentElement;
+      const fontSize = window.getComputedStyle(htmlElement).fontSize;
+      setMarginValue(parseFloat(fontSize));
+    };
+
+    calculateRemValue();
+  }, []);
+
   const gridContainerRef = useRef<HTMLDivElement>(null);
 
-  const [{ width: containerWidth }] = useResizeObserver(gridContainerRef);
+  const [{ width: containerWidth, height: containerHeight }] =
+    useResizeObserver(gridContainerRef);
+
+  const hasScrollbar = useMemo(() => {
+    return (
+      containerHeight &&
+      containerRef.current &&
+      containerRef.current.offsetHeight <
+        (gridContainerRef.current?.scrollHeight ?? 0)
+    );
+  }, [containerRef, gridContainerRef, containerHeight]);
 
   const cellHeight = useMemo(() => {
     const aspectRatio = 16 / 9;
-    const totalMarginWidth = 11 * 13; // 11 margins with 13px each
-    const rowHeight =
-      ((containerWidth ?? window.innerWidth) - totalMarginWidth) /
-      (13 * aspectRatio);
-    return rowHeight;
-  }, [containerWidth]);
+    // subtract container margin, 1 camera takes up at least 4 rows
+    // account for additional margin on bottom of each row
+    return (
+      ((containerWidth ?? window.innerWidth) - 2 * marginValue) /
+        12 /
+        aspectRatio -
+      marginValue +
+      marginValue / 4
+    );
+  }, [containerWidth, marginValue]);
 
   return (
     <>
       {!isGridLayoutLoaded || !currentGridLayout ? (
         <div className="mt-2 px-2 grid grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4">
           {includeBirdseye && birdseyeConfig?.enabled && (
-            <Skeleton className="size-full rounded-2xl" />
+            <Skeleton className="size-full rounded-lg md:rounded-2xl" />
           )}
           {cameras.map((camera) => {
             return (
               <Skeleton
                 key={camera.name}
-                className="aspect-video size-full rounded-2xl"
+                className="aspect-video size-full rounded-lg md:rounded-2xl"
               />
             );
           })}
@@ -264,37 +298,33 @@ export default function DraggableGridLayout({
             rowHeight={cellHeight}
             breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
             cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }}
-            margin={[16, 16]}
-            containerPadding={[8, 8]}
-            resizeHandles={["sw", "nw", "se", "ne"]}
+            margin={[marginValue, marginValue]}
+            containerPadding={[0, isEditMode ? 6 : 3]}
+            resizeHandles={isEditMode ? ["sw", "nw", "se", "ne"] : []}
             onDragStop={handleLayoutChange}
             onResizeStop={handleLayoutChange}
           >
             {includeBirdseye && birdseyeConfig?.enabled && (
               <BirdseyeLivePlayerGridItem
                 key="birdseye"
-                className={`${isEditMode ? "outline outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing" : ""}`}
+                className={cn(
+                  isEditMode &&
+                    "outline outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing",
+                )}
                 birdseyeConfig={birdseyeConfig}
                 liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
                 onClick={() => onSelectCamera("birdseye")}
               >
-                {isEditMode && (
-                  <>
-                    <div className="absolute top-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                    <div className="absolute top-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                    <div className="absolute bottom-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                    <div className="absolute bottom-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                  </>
-                )}
+                {isEditMode && <CornerCircles />}
               </BirdseyeLivePlayerGridItem>
             )}
             {cameras.map((camera) => {
               let grow;
               const aspectRatio = camera.detect.width / camera.detect.height;
               if (aspectRatio > ASPECT_WIDE_LAYOUT) {
-                grow = `aspect-wide`;
+                grow = `aspect-wide w-full`;
               } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
-                grow = `aspect-tall`;
+                grow = `aspect-tall h-full`;
               } else {
                 grow = "aspect-video";
               }
@@ -302,7 +332,12 @@ export default function DraggableGridLayout({
                 <LivePlayerGridItem
                   key={camera.name}
                   cameraRef={cameraRef}
-                  className={`${grow} size-full rounded-lg md:rounded-2xl bg-black ${isEditMode ? "outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing" : ""}`}
+                  className={cn(
+                    "rounded-lg md:rounded-2xl bg-black",
+                    grow,
+                    isEditMode &&
+                      "outline-2 hover:outline-4 outline-muted-foreground hover:cursor-grab active:cursor-grabbing",
+                  )}
                   windowVisible={
                     windowVisible && visibleCameras.includes(camera.name)
                   }
@@ -312,44 +347,76 @@ export default function DraggableGridLayout({
                     !isEditMode && onSelectCamera(camera.name);
                   }}
                 >
-                  {isEditMode && (
-                    <>
-                      <div className="absolute top-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                      <div className="absolute top-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                      <div className="absolute bottom-[-6px] right-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                      <div className="absolute bottom-[-6px] left-[-6px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
-                    </>
-                  )}
+                  {isEditMode && <CornerCircles />}
                 </LivePlayerGridItem>
               );
             })}
           </ResponsiveGridLayout>
-          <div className="flex flex-row gap-2 items-center text-primary">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="default"
-                  className="fixed bottom-12 lg:bottom-9 right-5 z-50 h-12 w-12 p-0 rounded-full opacity-30 hover:opacity-100 transition-all duration-300"
-                  onClick={toggleEditMode}
-                >
-                  {isEditMode ? (
-                    <IoClose className="size-5" />
-                  ) : (
-                    <LuMoveDiagonal2 className="size-5" />
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                {isEditMode ? "Exit Editing" : "Edit Layout"}
-              </TooltipContent>
-            </Tooltip>
-          </div>
+          {isDesktop && (
+            <DesktopEditLayoutButton
+              isEditMode={isEditMode}
+              setIsEditMode={setIsEditMode}
+              hasScrollbar={hasScrollbar}
+            />
+          )}
         </div>
       )}
     </>
   );
 }
 
+type DesktopEditLayoutButtonProps = {
+  isEditMode?: boolean;
+  setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
+  hasScrollbar?: boolean | 0 | null;
+};
+
+function DesktopEditLayoutButton({
+  isEditMode,
+  setIsEditMode,
+  hasScrollbar,
+}: DesktopEditLayoutButtonProps) {
+  return (
+    <div className="flex flex-row gap-2 items-center text-primary">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="default"
+            className={cn(
+              "fixed",
+              isDesktop && "bottom-12 lg:bottom-9",
+              isMobile && "bottom-12 lg:bottom-16",
+              hasScrollbar && isDesktop ? "right-6" : "right-1",
+              "z-50 h-8 w-8 p-0 rounded-full opacity-30 hover:opacity-100 transition-all duration-300",
+            )}
+            onClick={() => setIsEditMode((prevIsEditMode) => !prevIsEditMode)}
+          >
+            {isEditMode ? (
+              <IoClose className="size-5" />
+            ) : (
+              <LuMove className="size-5" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="left">
+          {isEditMode ? "Exit Editing" : "Edit Layout"}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
+function CornerCircles() {
+  return (
+    <>
+      <div className="absolute top-[-4px] left-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+      <div className="absolute top-[-4px] right-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+      <div className="absolute bottom-[-4px] right-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+      <div className="absolute bottom-[-4px] left-[-4px] z-50 size-3 p-2 rounded-full bg-primary-variant outline-2 outline-muted text-background pointer-events-none" />
+    </>
+  );
+}
+
 type BirdseyeLivePlayerGridItemProps = {
   style?: React.CSSProperties;
   className?: string;
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 1c7d2d3e0..3a9616195 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -17,9 +17,12 @@ import {
   isMobile,
   isMobileOnly,
   isSafari,
+  isTablet,
 } from "react-device-detect";
 import useSWR from "swr";
 import DraggableGridLayout from "./DraggableGridLayout";
+import { IoClose } from "react-icons/io5";
+import { LuMove } from "react-icons/lu";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -42,6 +45,9 @@ export default function LiveDashboardView({
     isDesktop ? "grid" : "list",
   );
 
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   // recent events
   const { payload: eventUpdate } = useFrigateReviews();
   const { data: allEvents, mutate: updateEvents } = useSWR<ReviewSegment[]>([
@@ -148,37 +154,52 @@ export default function LiveDashboardView({
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
   return (
-    <div className="size-full p-2 overflow-y-auto">
+    <div className="size-full p-2 overflow-y-auto" ref={containerRef}>
       {isMobile && (
         <div className="h-11 relative flex items-center justify-between">
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
           <div className="max-w-[45%]">
             <CameraGroupSelector />
           </div>
-          <div className="flex items-center gap-1">
-            <Button
-              className={`p-1 ${
-                mobileLayout == "grid"
-                  ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "bg-secondary"
-              }`}
-              size="xs"
-              onClick={() => setMobileLayout("grid")}
-            >
-              <LiveGridIcon layout={mobileLayout} />
-            </Button>
-            <Button
-              className={`p-1 ${
-                mobileLayout == "list"
-                  ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "bg-secondary"
-              }`}
-              size="xs"
-              onClick={() => setMobileLayout("list")}
-            >
-              <LiveListIcon layout={mobileLayout} />
-            </Button>
-          </div>
+          {(!cameraGroup || cameraGroup == "default" || isMobileOnly) && (
+            <div className="flex items-center gap-1">
+              <Button
+                className={`p-1 ${
+                  mobileLayout == "grid"
+                    ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                    : "bg-secondary"
+                }`}
+                size="xs"
+                onClick={() => setMobileLayout("grid")}
+              >
+                <LiveGridIcon layout={mobileLayout} />
+              </Button>
+              <Button
+                className={`p-1 ${
+                  mobileLayout == "list"
+                    ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                    : "bg-secondary"
+                }`}
+                size="xs"
+                onClick={() => setMobileLayout("list")}
+              >
+                <LiveListIcon layout={mobileLayout} />
+              </Button>
+            </div>
+          )}
+          {cameraGroup && cameraGroup !== "default" && isTablet && (
+            <div className="flex items-center gap-1">
+              <Button
+                className="p-1"
+                size="xs"
+                onClick={() =>
+                  setIsEditMode((prevIsEditMode) => !prevIsEditMode)
+                }
+              >
+                {isEditMode ? <IoClose /> : <LuMove />}
+              </Button>
+            </div>
+          )}
         </div>
       )}
 
@@ -235,11 +256,14 @@ export default function LiveDashboardView({
         <DraggableGridLayout
           cameras={cameras}
           cameraGroup={cameraGroup}
+          containerRef={containerRef}
           cameraRef={cameraRef}
           includeBirdseye={includeBirdseye}
           onSelectCamera={onSelectCamera}
           windowVisible={windowVisible}
           visibleCameras={visibleCameras}
+          isEditMode={isEditMode}
+          setIsEditMode={setIsEditMode}
         />
       )}
     </div>

From 3ed89ec04215cc640c275b10e1e6fd49300e4098 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 8 May 2024 08:46:10 -0600
Subject: [PATCH 49/56] Simplify preview refreshing with custom hook (#11293)

---
 web/src/components/card/AnimatedEventCard.tsx | 15 +++--
 web/src/hooks/use-camera-previews.ts          | 57 +++++++++++++++++++
 web/src/pages/Events.tsx                      | 53 ++++-------------
 3 files changed, 79 insertions(+), 46 deletions(-)
 create mode 100644 web/src/hooks/use-camera-previews.ts

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 126dd4511..125b6dada 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -7,12 +7,12 @@ import { REVIEW_PADDING, ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import { RecordingStartingPoint } from "@/types/record";
 import axios from "axios";
-import { Preview } from "@/types/preview";
 import {
   InProgressPreview,
   VideoPreview,
 } from "../player/PreviewThumbnailPlayer";
 import { isCurrentHour } from "@/utils/dateUtil";
+import { useCameraPreviews } from "@/hooks/use-camera-previews";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
@@ -24,10 +24,15 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
 
   // preview
 
-  const { data: previews } = useSWR<Preview[]>(
-    currentHour
-      ? null
-      : `/preview/${event.camera}/start/${Math.round(event.start_time)}/end/${Math.round(event.end_time || event.start_time + 20)}`,
+  const previews = useCameraPreviews(
+    {
+      after: Math.round(event.start_time),
+      before: Math.round(event.end_time || event.start_time + 20),
+    },
+    {
+      camera: event.camera,
+      fetchPreviews: !currentHour,
+    },
   );
 
   // interaction
diff --git a/web/src/hooks/use-camera-previews.ts b/web/src/hooks/use-camera-previews.ts
new file mode 100644
index 000000000..c01fd263a
--- /dev/null
+++ b/web/src/hooks/use-camera-previews.ts
@@ -0,0 +1,57 @@
+import { Preview } from "@/types/preview";
+import { TimeRange } from "@/types/timeline";
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+
+type OptionalCameraPreviewProps = {
+  camera?: string;
+  autoRefresh?: boolean;
+  fetchPreviews?: boolean;
+};
+
+export function useCameraPreviews(
+  initialTimeRange: TimeRange,
+  {
+    camera = "all",
+    autoRefresh = true,
+    fetchPreviews = true,
+  }: OptionalCameraPreviewProps,
+) {
+  const [timeRange, setTimeRange] = useState(initialTimeRange);
+
+  useEffect(() => {
+    setTimeRange(initialTimeRange);
+  }, [initialTimeRange]);
+
+  const { data: allPreviews } = useSWR<Preview[]>(
+    fetchPreviews
+      ? `preview/${camera}/start/${timeRange.after}/end/${timeRange.before}`
+      : null,
+    { revalidateOnFocus: false, revalidateOnReconnect: false },
+  );
+
+  // Set a timeout to update previews on the hour
+  useEffect(() => {
+    if (!autoRefresh || !fetchPreviews || !allPreviews) {
+      return;
+    }
+
+    const callback = () => {
+      const nextPreviewStart = new Date(
+        allPreviews[allPreviews.length - 1].end * 1000,
+      );
+      nextPreviewStart.setHours(nextPreviewStart.getHours() + 1);
+
+      if (Date.now() > nextPreviewStart.getTime()) {
+        setTimeRange({ after: timeRange.after, before: Date.now() / 1000 });
+      }
+    };
+    document.addEventListener("focusin", callback);
+
+    return () => {
+      document.removeEventListener("focusin", callback);
+    };
+  }, [allPreviews, autoRefresh, fetchPreviews, timeRange]);
+
+  return allPreviews;
+}
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index 0cc3cd6b5..bf325f064 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -1,9 +1,9 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import useApiFilter from "@/hooks/use-api-filter";
+import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { Preview } from "@/types/preview";
 import { RecordingStartingPoint } from "@/types/record";
 import {
   ReviewFilter,
@@ -161,7 +161,6 @@ export default function Events() {
   }, [updateSummary]);
 
   // preview videos
-  const [previewKey, setPreviewKey] = useState(0);
   const previewTimes = useMemo(() => {
     if (!reviews || reviews.length == 0) {
       return undefined;
@@ -170,50 +169,22 @@ export default function Events() {
     const startDate = new Date();
     startDate.setMinutes(0, 0, 0);
 
-    let endDate;
-    if (previewKey == 0) {
-      endDate = new Date(reviews.at(-1)?.end_time || 0);
-      endDate.setHours(0, 0, 0, 0);
-    } else {
-      endDate = new Date();
-      endDate.setMilliseconds(0);
-    }
+    const endDate = new Date(reviews.at(-1)?.end_time || 0);
+    endDate.setHours(0, 0, 0, 0);
 
     return {
-      start: startDate.getTime() / 1000,
-      end: endDate.getTime() / 1000,
+      after: startDate.getTime() / 1000,
+      before: endDate.getTime() / 1000,
     };
-  }, [reviews, previewKey]);
-  const { data: allPreviews } = useSWR<Preview[]>(
-    previewTimes
-      ? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
-      : null,
-    { revalidateOnFocus: false, revalidateOnReconnect: false },
+  }, [reviews]);
+
+  const allPreviews = useCameraPreviews(
+    previewTimes ?? { after: 0, before: 0 },
+    {
+      fetchPreviews: previewTimes != undefined,
+    },
   );
 
-  // Set a timeout to update previews on the hour
-  useEffect(() => {
-    if (!allPreviews || allPreviews.length == 0) {
-      return;
-    }
-
-    const callback = () => {
-      const nextPreviewStart = new Date(
-        allPreviews[allPreviews.length - 1].end * 1000,
-      );
-      nextPreviewStart.setHours(nextPreviewStart.getHours() + 1);
-
-      if (Date.now() > nextPreviewStart.getTime()) {
-        setPreviewKey(10 * Math.random());
-      }
-    };
-    document.addEventListener("focusin", callback);
-
-    return () => {
-      document.removeEventListener("focusin", callback);
-    };
-  }, [allPreviews]);
-
   // review status
 
   const markAllItemsAsReviewed = useCallback(

From 2be15b6c017f50097d32c3cb9f575a0501f50843 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 8 May 2024 09:46:31 -0500
Subject: [PATCH 50/56] Improve config validation error messages (#11292)

---
 frigate/app.py    | 10 ++++++--
 frigate/config.py | 62 +++++++++++++++++++++++++++--------------------
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/frigate/app.py b/frigate/app.py
index 1306ee97d..c2a489b75 100644
--- a/frigate/app.py
+++ b/frigate/app.py
@@ -16,6 +16,7 @@ import psutil
 from peewee_migrate import Router
 from playhouse.sqlite_ext import SqliteExtDatabase
 from playhouse.sqliteq import SqliteQueueDatabase
+from pydantic import ValidationError
 
 from frigate.api.app import create_app
 from frigate.comms.config_updater import ConfigPublisher
@@ -611,8 +612,13 @@ class FrigateApp:
                 print("*************************************************************")
                 print("***    Config Validation Errors                           ***")
                 print("*************************************************************")
-                print(e)
-                print(traceback.format_exc())
+                if isinstance(e, ValidationError):
+                    for error in e.errors():
+                        location = ".".join(str(item) for item in error["loc"])
+                        print(f"{location}: {error['msg']}")
+                else:
+                    print(e)
+                    print(traceback.format_exc())
                 print("*************************************************************")
                 print("***    End Config Validation Errors                       ***")
                 print("*************************************************************")
diff --git a/frigate/config.py b/frigate/config.py
index 602f03f1f..008176956 100644
--- a/frigate/config.py
+++ b/frigate/config.py
@@ -555,19 +555,24 @@ class ZoneConfig(BaseModel):
         # old native resolution coordinates
         if isinstance(coordinates, list):
             explicit = any(p.split(",")[0] > "1.0" for p in coordinates)
-            self._contour = np.array(
-                [
-                    (
-                        [int(p.split(",")[0]), int(p.split(",")[1])]
-                        if explicit
-                        else [
-                            int(float(p.split(",")[0]) * frame_shape[1]),
-                            int(float(p.split(",")[1]) * frame_shape[0]),
-                        ]
-                    )
-                    for p in coordinates
-                ]
-            )
+            try:
+                self._contour = np.array(
+                    [
+                        (
+                            [int(p.split(",")[0]), int(p.split(",")[1])]
+                            if explicit
+                            else [
+                                int(float(p.split(",")[0]) * frame_shape[1]),
+                                int(float(p.split(",")[1]) * frame_shape[0]),
+                            ]
+                        )
+                        for p in coordinates
+                    ]
+                )
+            except ValueError:
+                raise ValueError(
+                    f"Invalid coordinates found in configuration file. Coordinates must be relative (between 0-1): {coordinates}"
+                )
 
             if explicit:
                 self.coordinates = ",".join(
@@ -579,19 +584,24 @@ class ZoneConfig(BaseModel):
         elif isinstance(coordinates, str):
             points = coordinates.split(",")
             explicit = any(p > "1.0" for p in points)
-            self._contour = np.array(
-                [
-                    (
-                        [int(points[i]), int(points[i + 1])]
-                        if explicit
-                        else [
-                            int(float(points[i]) * frame_shape[1]),
-                            int(float(points[i + 1]) * frame_shape[0]),
-                        ]
-                    )
-                    for i in range(0, len(points), 2)
-                ]
-            )
+            try:
+                self._contour = np.array(
+                    [
+                        (
+                            [int(points[i]), int(points[i + 1])]
+                            if explicit
+                            else [
+                                int(float(points[i]) * frame_shape[1]),
+                                int(float(points[i + 1]) * frame_shape[0]),
+                            ]
+                        )
+                        for i in range(0, len(points), 2)
+                    ]
+                )
+            except ValueError:
+                raise ValueError(
+                    f"Invalid coordinates found in configuration file. Coordinates must be relative (between 0-1): {coordinates}"
+                )
 
             if explicit:
                 self.coordinates = ",".join(

From e1cbefb692ceb9315315eba54eb042717afd1212 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 9 May 2024 07:19:41 -0600
Subject: [PATCH 51/56] Add link to system stats from status bar (#11303)

---
 web/src/components/Statusbar.tsx | 56 ++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 00374ad71..c2e81cf90 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -58,18 +58,20 @@ export default function Statusbar() {
     <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-background_alt z-10 dark:text-secondary-foreground border-t border-secondary-highlight">
       <div className="h-full flex items-center gap-2">
         {cpuPercent && (
-          <div className="flex items-center text-sm gap-2">
-            <MdCircle
-              className={`size-2 ${
-                cpuPercent < 50
-                  ? "text-success"
-                  : cpuPercent < 80
-                    ? "text-orange-400"
-                    : "text-danger"
-              }`}
-            />
-            CPU {cpuPercent}%
-          </div>
+          <Link to="/system#general">
+            <div className="flex items-center text-sm gap-2 cursor-pointer hover:underline">
+              <MdCircle
+                className={`size-2 ${
+                  cpuPercent < 50
+                    ? "text-success"
+                    : cpuPercent < 80
+                      ? "text-orange-400"
+                      : "text-danger"
+                }`}
+              />
+              CPU {cpuPercent}%
+            </div>
+          </Link>
         )}
         {Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => {
           if (name == "error-gpu") {
@@ -93,18 +95,24 @@ export default function Statusbar() {
           const gpu = parseInt(stats.gpu);
 
           return (
-            <div key={gpuTitle} className="flex items-center text-sm gap-2">
-              <MdCircle
-                className={`size-2 ${
-                  gpu < 50
-                    ? "text-success"
-                    : gpu < 80
-                      ? "text-orange-400"
-                      : "text-danger"
-                }`}
-              />
-              {gpuTitle} {gpu}%
-            </div>
+            <Link key={gpuTitle} to="/system#general">
+              {" "}
+              <div
+                key={gpuTitle}
+                className="flex items-center text-sm gap-2 cursor-pointer hover:underline"
+              >
+                <MdCircle
+                  className={`size-2 ${
+                    gpu < 50
+                      ? "text-success"
+                      : gpu < 80
+                        ? "text-orange-400"
+                        : "text-danger"
+                  }`}
+                />
+                {gpuTitle} {gpu}%
+              </div>
+            </Link>
           );
         })}
       </div>

From 4bcbf7435af7df2387dc997372ffcbccfa2123c3 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 9 May 2024 07:20:07 -0600
Subject: [PATCH 52/56] Web Deps (#11304)

* Update easy web deps

* Update react

* Update final
---
 web/package-lock.json | 311 ++++++++++++++++++------------------------
 web/package.json      |  40 +++---
 2 files changed, 152 insertions(+), 199 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 1df2344a4..1a680777a 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -29,32 +29,32 @@
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
-        "apexcharts": "^3.48.0",
+        "apexcharts": "^3.49.0",
         "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
-        "clsx": "^2.1.0",
+        "clsx": "^2.1.1",
         "copy-to-clipboard": "^3.3.3",
         "date-fns": "^3.6.0",
         "hls.js": "^1.5.8",
         "idb-keyval": "^6.2.1",
-        "immer": "^10.0.4",
+        "immer": "^10.1.1",
         "konva": "^9.3.6",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.372.0",
+        "lucide-react": "^0.378.0",
         "monaco-yaml": "^5.1.1",
         "next-themes": "^0.3.0",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
         "react-apexcharts": "^1.4.1",
         "react-day-picker": "^8.10.1",
         "react-device-detect": "^2.2.3",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-grid-layout": "^1.4.4",
-        "react-hook-form": "^7.51.3",
-        "react-icons": "^5.1.0",
+        "react-hook-form": "^7.51.4",
+        "react-icons": "^5.2.1",
         "react-konva": "^18.2.10",
-        "react-router-dom": "^6.22.3",
+        "react-router-dom": "^6.23.0",
         "react-swipeable": "^7.0.1",
-        "react-tracked": "^1.7.14",
+        "react-tracked": "^2.0.0",
         "react-transition-group": "^4.4.5",
         "react-use-websocket": "^4.8.1",
         "react-zoom-pan-pinch": "^3.4.4",
@@ -66,17 +66,17 @@
         "swr": "^2.2.5",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
-        "vaul": "^0.9.0",
+        "vaul": "^0.9.1",
         "vite-plugin-monaco-editor": "^1.1.0",
-        "zod": "^3.22.5"
+        "zod": "^3.23.7"
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
         "@testing-library/jest-dom": "^6.1.5",
-        "@types/lodash": "^4.17.0",
-        "@types/node": "^20.12.7",
-        "@types/react": "^18.2.79",
-        "@types/react-dom": "^18.2.25",
+        "@types/lodash": "^4.17.1",
+        "@types/node": "^20.12.11",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.0",
         "@types/react-grid-layout": "^1.3.5",
         "@types/react-icons": "^3.0.0",
         "@types/react-transition-group": "^4.4.10",
@@ -84,7 +84,7 @@
         "@typescript-eslint/eslint-plugin": "^7.5.0",
         "@typescript-eslint/parser": "^7.5.0",
         "@vitejs/plugin-react-swc": "^3.6.0",
-        "@vitest/coverage-v8": "^1.4.0",
+        "@vitest/coverage-v8": "^1.6.0",
         "autoprefixer": "^10.4.19",
         "eslint": "^8.55.0",
         "eslint-config-prettier": "^9.1.0",
@@ -101,8 +101,8 @@
         "prettier": "^3.2.5",
         "tailwindcss": "^3.4.3",
         "typescript": "^5.4.5",
-        "vite": "^5.2.9",
-        "vitest": "^1.4.0"
+        "vite": "^5.2.11",
+        "vitest": "^1.6.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2031,9 +2031,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -2516,21 +2516,15 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
-    "node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
-      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
-      "dev": true
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
-      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.1.tgz",
+      "integrity": "sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==",
       "dev": true
     },
     "node_modules/@types/mute-stream": {
@@ -2543,9 +2537,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.12.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
-      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
+      "version": "20.12.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.11.tgz",
+      "integrity": "sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -2557,18 +2551,18 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.79",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
-      "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.25",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.25.tgz",
-      "integrity": "sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
@@ -2867,9 +2861,9 @@
       }
     },
     "node_modules/@vitest/coverage-v8": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-1.4.0.tgz",
-      "integrity": "sha512-4hDGyH1SvKpgZnIByr9LhGgCEuF9DKM34IBLCC/fVfy24Z3+PZ+Ii9hsVBsHvY1umM1aGPEjceRkzxCfcQ10wg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-1.6.0.tgz",
+      "integrity": "sha512-KvapcbMY/8GYIG0rlwwOKCVNRc0OL20rrhFkg/CHNzncV03TE2XWvO5w9uZYoxNiMEBacAJt3unSOiZ7svePew==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.1",
@@ -2884,24 +2878,23 @@
         "picocolors": "^1.0.0",
         "std-env": "^3.5.0",
         "strip-literal": "^2.0.0",
-        "test-exclude": "^6.0.0",
-        "v8-to-istanbul": "^9.2.0"
+        "test-exclude": "^6.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "1.4.0"
+        "vitest": "1.6.0"
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.4.0.tgz",
-      "integrity": "sha512-Jths0sWCJZ8BxjKe+p+eKsoqev1/T8lYcrjavEaz8auEJ4jAVY0GwW3JKmdVU4mmNPLPHixh4GNXP7GFtAiDHA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
+      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "1.4.0",
-        "@vitest/utils": "1.4.0",
+        "@vitest/spy": "1.6.0",
+        "@vitest/utils": "1.6.0",
         "chai": "^4.3.10"
       },
       "funding": {
@@ -2909,12 +2902,12 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.4.0.tgz",
-      "integrity": "sha512-EDYVSmesqlQ4RD2VvWo3hQgTJ7ZrFQ2VSJdfiJiArkCerDAGeyF1i6dHkmySqk573jLp6d/cfqCN+7wUB5tLgg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
+      "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "1.4.0",
+        "@vitest/utils": "1.6.0",
         "p-limit": "^5.0.0",
         "pathe": "^1.1.1"
       },
@@ -2950,9 +2943,9 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.4.0.tgz",
-      "integrity": "sha512-saAFnt5pPIA5qDGxOHxJ/XxhMFKkUSBJmVt5VgDsAqPTX6JP326r5C/c9UuCMPoXNzuudTPsYDZCoJ5ilpqG2A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
+      "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
       "dev": true,
       "dependencies": {
         "magic-string": "^0.30.5",
@@ -2964,9 +2957,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.4.0.tgz",
-      "integrity": "sha512-Ywau/Qs1DzM/8Uc+yA77CwSegizMlcgTJuYGAi0jujOteJOUf1ujunHThYo243KG9nAyWT3L9ifPYZ5+As/+6Q==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
+      "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
       "dev": true,
       "dependencies": {
         "tinyspy": "^2.2.0"
@@ -2976,9 +2969,9 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.4.0.tgz",
-      "integrity": "sha512-mx3Yd1/6e2Vt/PUC98DcqTirtfxUyAZ32uK82r8rZzbtBeBo+nqgnjx/LvqQdWsrvNtm14VmurNgcf4nqY5gJg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
+      "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
       "dev": true,
       "dependencies": {
         "diff-sequences": "^29.6.3",
@@ -3122,9 +3115,9 @@
       }
     },
     "node_modules/apexcharts": {
-      "version": "3.48.0",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.48.0.tgz",
-      "integrity": "sha512-Lhpj1Ij6lKlrUke8gf+P+SE6uGUn+Pe1TnCJ+zqrY0YMvbqM3LMb1lY+eybbTczUyk0RmMZomlTa2NgX2EUs4Q==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.49.0.tgz",
+      "integrity": "sha512-2T9HnbQFLCuYRPndQLmh+bEQFoz0meUbvASaGgiSKDuYhWcLBodJtIpKql2aOtMx4B/sHrWW0dm90HsW4+h2PQ==",
       "dependencies": {
         "@yr/monotone-cubic-spline": "^1.0.3",
         "svg.draggable.js": "^2.2.2",
@@ -3543,9 +3536,9 @@
       }
     },
     "node_modules/clsx": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
-      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "engines": {
         "node": ">=6"
       }
@@ -3597,12 +3590,6 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
     "node_modules/cookie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -4831,9 +4818,9 @@
       }
     },
     "node_modules/immer": {
-      "version": "10.0.4",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.4.tgz",
-      "integrity": "sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -5364,9 +5351,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.372.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.372.0.tgz",
-      "integrity": "sha512-0cKdqmilHXWUwWAWnf6CrrjHD8YaqPMtLrmEHXolZusNTr9epULCsiJwIOHk2q1yFxdEwd96D4zShlAj67UJdA==",
+      "version": "0.378.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.378.0.tgz",
+      "integrity": "sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
@@ -6236,9 +6223,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/proxy-compare": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.6.0.tgz",
-      "integrity": "sha512-8xuCeM3l8yqdmbPoYeLbrAXCBWu19XEYc5/F28f5qOaoAIMyfmBUkl5axiK+x9olUvRlcekvnm98AP9RDngOIw=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.0.tgz",
+      "integrity": "sha512-y44MCkgtZUCT9tZGuE278fB7PWVf7fRYy0vbRXAts2o5F0EfC4fIQrvQQGBJo1WJbFcVLXzApOscyJuZqHQc1w=="
     },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
@@ -6286,9 +6273,9 @@
       ]
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -6334,15 +6321,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-draggable": {
@@ -6384,9 +6371,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.51.3",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.3.tgz",
-      "integrity": "sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==",
+      "version": "7.51.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.4.tgz",
+      "integrity": "sha512-V14i8SEkh+V1gs6YtD0hdHYnoL4tp/HX/A45wWQN15CYr9bFRmmRdYStSO5L65lCCZRF+kYiSKhm9alqbcdiVA==",
       "engines": {
         "node": ">=12.22.0"
       },
@@ -6399,9 +6386,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
-      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
       "peerDependencies": {
         "react": "*"
       }
@@ -6515,11 +6502,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.16.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6529,12 +6516,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6575,26 +6562,16 @@
       }
     },
     "node_modules/react-tracked": {
-      "version": "1.7.14",
-      "resolved": "https://registry.npmjs.org/react-tracked/-/react-tracked-1.7.14.tgz",
-      "integrity": "sha512-6UMlgQeRAGA+uyYzuQGm7kZB6ZQYFhc7sntgP7Oxwwd6M0Ud/POyb4K3QWT1eXvoifSa80nrAWnXWFGpOvbwkw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-tracked/-/react-tracked-2.0.0.tgz",
+      "integrity": "sha512-Px8Ms9zhQKzAj3gnwQm6L+sJwzB0uPa8/BgHKOhB8bIuQEgB2iJfryM7GVja9oviiGAa7vtgEBtM+poT1E7V2w==",
       "dependencies": {
-        "proxy-compare": "2.6.0",
-        "use-context-selector": "1.4.4"
+        "proxy-compare": "^3.0.0",
+        "use-context-selector": "^2.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": "*",
-        "react-native": "*",
+        "react": ">=18.0.0",
         "scheduler": ">=0.19.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
       }
     },
     "node_modules/react-transition-group": {
@@ -6969,9 +6946,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -7740,22 +7717,12 @@
       }
     },
     "node_modules/use-context-selector": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.4.4.tgz",
-      "integrity": "sha512-pS790zwGxxe59GoBha3QYOwk8AFGp4DN6DOtH+eoqVmgBBRXVx4IlPDhJmmMiNQAgUaLlP+58aqRC3A4rdaSjg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0.tgz",
+      "integrity": "sha512-owfuSmUNd3eNp3J9CdDl0kMgfidV+MkDvHPpvthN5ThqM+ibMccNE0k+Iq7TWC6JPFvGZqanqiGCuQx6DyV24g==",
       "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": "*",
-        "react-native": "*",
+        "react": ">=18.0.0",
         "scheduler": ">=0.19.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
       }
     },
     "node_modules/use-sidecar": {
@@ -7792,24 +7759,10 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
-    "node_modules/v8-to-istanbul": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",
-      "integrity": "sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.12",
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.12.0"
-      }
-    },
     "node_modules/vaul": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.0.tgz",
-      "integrity": "sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.1.tgz",
+      "integrity": "sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.0.4"
       },
@@ -7819,9 +7772,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.2.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz",
-      "integrity": "sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==",
+      "version": "5.2.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
+      "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
@@ -7874,9 +7827,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.4.0.tgz",
-      "integrity": "sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
+      "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
@@ -7904,16 +7857,16 @@
       }
     },
     "node_modules/vitest": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.4.0.tgz",
-      "integrity": "sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
+      "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
       "dev": true,
       "dependencies": {
-        "@vitest/expect": "1.4.0",
-        "@vitest/runner": "1.4.0",
-        "@vitest/snapshot": "1.4.0",
-        "@vitest/spy": "1.4.0",
-        "@vitest/utils": "1.4.0",
+        "@vitest/expect": "1.6.0",
+        "@vitest/runner": "1.6.0",
+        "@vitest/snapshot": "1.6.0",
+        "@vitest/spy": "1.6.0",
+        "@vitest/utils": "1.6.0",
         "acorn-walk": "^8.3.2",
         "chai": "^4.3.10",
         "debug": "^4.3.4",
@@ -7925,9 +7878,9 @@
         "std-env": "^3.5.0",
         "strip-literal": "^2.0.0",
         "tinybench": "^2.5.1",
-        "tinypool": "^0.8.2",
+        "tinypool": "^0.8.3",
         "vite": "^5.0.0",
-        "vite-node": "1.4.0",
+        "vite-node": "1.6.0",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
@@ -7942,8 +7895,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "1.4.0",
-        "@vitest/ui": "1.4.0",
+        "@vitest/browser": "1.6.0",
+        "@vitest/ui": "1.6.0",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -8216,9 +8169,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.5.tgz",
-      "integrity": "sha512-HqnGsCdVZ2xc0qWPLdO25WnseXThh0kEYKIdV5F/hTHO75hNZFp8thxSeHhiPrHZKrFTo1SOgkAj9po5bexZlw==",
+      "version": "3.23.7",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.7.tgz",
+      "integrity": "sha512-NBeIoqbtOiUMomACV/y+V3Qfs9+Okr18vR5c/5pHClPpufWOrsx8TENboDPe265lFdfewX2yBtNTLPvnmCxwog==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/web/package.json b/web/package.json
index 980223748..4638572a6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -34,32 +34,32 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "apexcharts": "^3.48.0",
+    "apexcharts": "^3.49.0",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^3.6.0",
     "hls.js": "^1.5.8",
     "idb-keyval": "^6.2.1",
-    "immer": "^10.0.4",
+    "immer": "^10.1.1",
     "konva": "^9.3.6",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.372.0",
+    "lucide-react": "^0.378.0",
     "monaco-yaml": "^5.1.1",
     "next-themes": "^0.3.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-day-picker": "^8.10.1",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-grid-layout": "^1.4.4",
-    "react-hook-form": "^7.51.3",
-    "react-icons": "^5.1.0",
+    "react-hook-form": "^7.51.4",
+    "react-icons": "^5.2.1",
     "react-konva": "^18.2.10",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.23.0",
     "react-swipeable": "^7.0.1",
-    "react-tracked": "^1.7.14",
+    "react-tracked": "^2.0.0",
     "react-transition-group": "^4.4.5",
     "react-use-websocket": "^4.8.1",
     "react-zoom-pan-pinch": "^3.4.4",
@@ -71,17 +71,17 @@
     "swr": "^2.2.5",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^0.9.0",
+    "vaul": "^0.9.1",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "zod": "^3.22.5"
+    "zod": "^3.23.7"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.1.5",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-grid-layout": "^1.3.5",
     "@types/react-icons": "^3.0.0",
     "@types/react-transition-group": "^4.4.10",
@@ -89,7 +89,7 @@
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
@@ -101,12 +101,12 @@
     "fake-indexeddb": "^5.0.2",
     "jest-websocket-mock": "^2.5.0",
     "jsdom": "^24.0.0",
-    "msw": "^2.2.14",
+    "msw": "^2.3.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vitest": "^1.4.0"
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0"
   }
 }

From 4216d080998ce20b6fa299df3fbd3649a102a31d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 9 May 2024 07:20:33 -0600
Subject: [PATCH 53/56] Backend and webui fixes (#11309)

* Ensure that items without end times are set to not have a snapshot

* Save full frame if no frame is currently saved

* Webui fixes

* Cleanup
---
 frigate/app.py                                |  6 ++--
 frigate/review/maintainer.py                  | 34 +++++++++++++++++++
 .../player/dynamic/DynamicVideoPlayer.tsx     |  2 +-
 web/src/hooks/use-camera-previews.ts          |  2 +-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/frigate/app.py b/frigate/app.py
index c2a489b75..1fce7c1ac 100644
--- a/frigate/app.py
+++ b/frigate/app.py
@@ -683,9 +683,9 @@ class FrigateApp:
         self.stop_event.set()
 
         # set an end_time on entries without an end_time before exiting
-        Event.update(end_time=datetime.datetime.now().timestamp()).where(
-            Event.end_time == None
-        ).execute()
+        Event.update(
+            end_time=datetime.datetime.now().timestamp(), has_snapshot=False
+        ).where(Event.end_time == None).execute()
         ReviewSegment.update(end_time=datetime.datetime.now().timestamp()).where(
             ReviewSegment.end_time == None
         ).execute()
diff --git a/frigate/review/maintainer.py b/frigate/review/maintainer.py
index 8963c555c..77d3d2a6b 100644
--- a/frigate/review/maintainer.py
+++ b/frigate/review/maintainer.py
@@ -110,6 +110,18 @@ class PendingReviewSegment:
                 self.frame_path, self.frame, [int(cv2.IMWRITE_WEBP_QUALITY), 60]
             )
 
+    def save_full_frame(self, camera_config: CameraConfig, frame):
+        color_frame = cv2.cvtColor(frame, cv2.COLOR_YUV2BGR_I420)
+        width = int(THUMB_HEIGHT * color_frame.shape[1] / color_frame.shape[0])
+        self.frame = cv2.resize(
+            color_frame, dsize=(width, THUMB_HEIGHT), interpolation=cv2.INTER_AREA
+        )
+
+        if self.frame is not None:
+            cv2.imwrite(
+                self.frame_path, self.frame, [int(cv2.IMWRITE_WEBP_QUALITY), 60]
+            )
+
     def get_data(self, ended: bool) -> dict:
         return {
             ReviewSegment.id: self.id,
@@ -273,8 +285,30 @@ class ReviewSegmentMaintainer(threading.Thread):
             if segment.severity == SeverityEnum.alert and frame_time > (
                 segment.last_update + THRESHOLD_ALERT_ACTIVITY
             ):
+                if segment.frame is None:
+                    try:
+                        frame_id = f"{camera_config.name}{frame_time}"
+                        yuv_frame = self.frame_manager.get(
+                            frame_id, camera_config.frame_shape_yuv
+                        )
+                        segment.save_full_frame(camera_config, yuv_frame)
+                        self.frame_manager.close(frame_id)
+                    except FileNotFoundError:
+                        return
+
                 self.end_segment(segment)
             elif frame_time > (segment.last_update + THRESHOLD_DETECTION_ACTIVITY):
+                if segment.frame is None:
+                    try:
+                        frame_id = f"{camera_config.name}{frame_time}"
+                        yuv_frame = self.frame_manager.get(
+                            frame_id, camera_config.frame_shape_yuv
+                        )
+                        segment.save_full_frame(camera_config, yuv_frame)
+                        self.frame_manager.close(frame_id)
+                    except FileNotFoundError:
+                        return
+
                 self.end_segment(segment)
 
     def check_if_new_segment(
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 7d1c7e4d9..e3e677530 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -204,8 +204,8 @@ export default function DynamicVideoPlayer({
       />
       <PreviewPlayer
         className={cn(
-          isScrubbing || isLoading ? "visible" : "hidden",
           className,
+          isScrubbing || isLoading ? "visible" : "hidden",
         )}
         camera={camera}
         timeRange={timeRange}
diff --git a/web/src/hooks/use-camera-previews.ts b/web/src/hooks/use-camera-previews.ts
index c01fd263a..db2ff33f8 100644
--- a/web/src/hooks/use-camera-previews.ts
+++ b/web/src/hooks/use-camera-previews.ts
@@ -25,7 +25,7 @@ export function useCameraPreviews(
 
   const { data: allPreviews } = useSWR<Preview[]>(
     fetchPreviews
-      ? `preview/${camera}/start/${timeRange.after}/end/${timeRange.before}`
+      ? `preview/${camera}/start/${Math.round(timeRange.after)}/end/${Math.round(timeRange.before)}`
       : null,
     { revalidateOnFocus: false, revalidateOnReconnect: false },
   );

From 50ee447e527d8136ae38a97716984749d3b2aada Mon Sep 17 00:00:00 2001
From: Marc Altmann <40744649+MarcA711@users.noreply.github.com>
Date: Thu, 9 May 2024 15:22:34 +0200
Subject: [PATCH 54/56] Fix aarch64 build (#11289)

* fix aarch64 build

* change order of packages
---
 docker/main/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker/main/Dockerfile b/docker/main/Dockerfile
index 3354a21cc..de823bf1c 100644
--- a/docker/main/Dockerfile
+++ b/docker/main/Dockerfile
@@ -51,7 +51,7 @@ ARG DEBIAN_FRONTEND
 # Install OpenVino Runtime and Dev library
 COPY docker/main/requirements-ov.txt /requirements-ov.txt
 RUN apt-get -qq update \
-    && apt-get -qq install -y wget python3 python3-distutils \
+    && apt-get -qq install -y wget python3 python3-dev python3-distutils gcc pkg-config libhdf5-dev \
     && wget -q https://bootstrap.pypa.io/get-pip.py -O get-pip.py \
     && python3 get-pip.py "pip" \
     && pip install -r /requirements-ov.txt

From f8523d9ddf4127c8baa3232ad00fc15f5bcd62aa Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 9 May 2024 08:22:48 -0500
Subject: [PATCH 55/56] Icon picker component (#11310)

* icon picker component

* keep box the same size when filtering icons
---
 .../components/filter/CameraGroupSelector.tsx |  72 ++++----
 web/src/components/icons/IconPicker.tsx       | 154 ++++++++++++++++++
 web/src/components/ui/popover.tsx             |  51 +++---
 web/src/pages/UIPlayground.tsx                |  12 ++
 web/src/types/frigateConfig.ts                |   5 +-
 web/src/utils/iconUtil.tsx                    |  24 +--
 6 files changed, 233 insertions(+), 85 deletions(-)
 create mode 100644 web/src/components/icons/IconPicker.tsx

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 84d1a36b5..38a246c00 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -1,8 +1,4 @@
-import {
-  CameraGroupConfig,
-  FrigateConfig,
-  GROUP_ICONS,
-} from "@/types/frigateConfig";
+import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
 import { isDesktop, isMobile } from "react-device-detect";
 import useSWR from "swr";
 import { MdHome } from "react-icons/md";
@@ -10,7 +6,6 @@ import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
 import { Button } from "../ui/button";
 import { useCallback, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import { getIconForGroup } from "@/utils/iconUtil";
 import { LuPencil, LuPlus } from "react-icons/lu";
 import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
 import { Drawer, DrawerContent } from "../ui/drawer";
@@ -31,13 +26,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -62,6 +50,9 @@ import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 import { usePersistence } from "@/hooks/use-persistence";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
+import * as LuIcons from "react-icons/lu";
+import IconPicker, { IconName, IconRenderer } from "../icons/IconPicker";
+import { isValidIconName } from "@/utils/iconUtil";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -168,7 +159,12 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                       isDesktop ? showTooltip(undefined) : null
                     }
                   >
-                    {getIconForGroup(config.icon)}
+                    {config && config.icon && isValidIconName(config.icon) && (
+                      <IconRenderer
+                        icon={LuIcons[config.icon]}
+                        className="size-4"
+                      />
+                    )}
                   </Button>
                 </TooltipTrigger>
                 <TooltipPortal>
@@ -503,7 +499,12 @@ export function CameraGroupEdit({
     cameras: z.array(z.string()).min(2, {
       message: "You must select at least two cameras.",
     }),
-    icon: z.string(),
+    icon: z
+      .string()
+      .min(1, { message: "You must select an icon." })
+      .refine((value) => Object.keys(LuIcons).includes(value), {
+        message: "Invalid icon",
+      }),
   });
 
   const onSubmit = useCallback(
@@ -559,10 +560,10 @@ export function CameraGroupEdit({
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    mode: "onChange",
+    mode: "onSubmit",
     defaultValues: {
       name: (editingGroup && editingGroup[0]) ?? "",
-      icon: editingGroup && editingGroup[1].icon,
+      icon: editingGroup && (editingGroup[1].icon as IconName),
       cameras: editingGroup && editingGroup[1].cameras,
     },
   });
@@ -571,7 +572,7 @@ export function CameraGroupEdit({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="mt-2 space-y-6 overflow-y-hidden"
+        className="mt-2 space-y-6 overflow-y-auto"
       >
         <FormField
           control={form.control}
@@ -631,29 +632,20 @@ export function CameraGroupEdit({
           control={form.control}
           name="icon"
           render={({ field }) => (
-            <FormItem className="space-y-3">
+            <FormItem className="flex flex-col space-y-2">
               <FormLabel>Icon</FormLabel>
               <FormControl>
-                <Select
-                  onValueChange={field.onChange}
-                  defaultValue={field.value}
-                >
-                  <FormControl>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select an icon" />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    {GROUP_ICONS.map((gIcon) => (
-                      <SelectItem key={gIcon} value={gIcon}>
-                        <div className="flex flex-row justify-start items-center gap-2">
-                          <div className="size-4">{getIconForGroup(gIcon)}</div>
-                          {gIcon}
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <IconPicker
+                  selectedIcon={{
+                    name: field.value,
+                    Icon: field.value
+                      ? LuIcons[field.value as IconName]
+                      : undefined,
+                  }}
+                  setSelectedIcon={(newIcon) => {
+                    field.onChange(newIcon?.name ?? undefined);
+                  }}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -662,7 +654,7 @@ export function CameraGroupEdit({
 
         <Separator className="flex my-2 bg-secondary" />
 
-        <div className="flex flex-row gap-2 pt-5">
+        <div className="flex flex-row gap-2 py-5 md:pb-0">
           <Button className="flex flex-1" onClick={onCancel}>
             Cancel
           </Button>
diff --git a/web/src/components/icons/IconPicker.tsx b/web/src/components/icons/IconPicker.tsx
new file mode 100644
index 000000000..21883ccdc
--- /dev/null
+++ b/web/src/components/icons/IconPicker.tsx
@@ -0,0 +1,154 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { IconType } from "react-icons";
+import * as LuIcons from "react-icons/lu";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { IoClose } from "react-icons/io5";
+import Heading from "../ui/heading";
+import { cn } from "@/lib/utils";
+import { Button } from "../ui/button";
+
+export type IconName = keyof typeof LuIcons;
+
+export type IconElement = {
+  name?: string;
+  Icon?: IconType;
+};
+
+type IconPickerProps = {
+  selectedIcon?: IconElement;
+  setSelectedIcon?: React.Dispatch<
+    React.SetStateAction<IconElement | undefined>
+  >;
+};
+
+export default function IconPicker({
+  selectedIcon,
+  setSelectedIcon,
+}: IconPickerProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const iconSets = useMemo(() => [...Object.entries(LuIcons)], []);
+
+  const icons = useMemo(
+    () =>
+      iconSets.filter(
+        ([name]) =>
+          name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          searchTerm === "",
+      ),
+    [iconSets, searchTerm],
+  );
+
+  const handleIconSelect = useCallback(
+    ({ name, Icon }: IconElement) => {
+      if (setSelectedIcon) {
+        setSelectedIcon({ name, Icon });
+      }
+      setSearchTerm("");
+    },
+    [setSelectedIcon],
+  );
+
+  return (
+    <div ref={containerRef}>
+      <Popover
+        open={open}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+      >
+        <PopoverTrigger asChild>
+          {!selectedIcon?.name || !selectedIcon?.Icon ? (
+            <Button className="text-muted-foreground w-full mt-2">
+              Select an icon
+            </Button>
+          ) : (
+            <div className="hover:cursor-pointer">
+              <div className="flex flex-row w-full justify-between items-center gap-2 my-3">
+                <div className="flex flex-row items-center gap-2">
+                  <selectedIcon.Icon size={15} />
+                  <div className="text-sm">
+                    {selectedIcon.name
+                      .replace(/^Lu/, "")
+                      .replace(/([A-Z])/g, " $1")}
+                  </div>
+                </div>
+
+                <IoClose
+                  className="mx-2 hover:cursor-pointer"
+                  onClick={() => {
+                    handleIconSelect({ name: undefined, Icon: undefined });
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          side="top"
+          container={containerRef.current}
+          className="max-h-[50dvh]"
+        >
+          <div className="flex flex-row justify-between items-center mb-3">
+            <Heading as="h4">Select an icon</Heading>
+            <IoClose
+              size={15}
+              className="hover:cursor-pointer"
+              onClick={() => {
+                setOpen(false);
+              }}
+            />
+          </div>
+          <Input
+            type="text"
+            placeholder="Search for an icon..."
+            className="mb-3"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <div className="flex flex-col flex-1 h-[20dvh]">
+            <div className="grid grid-cols-6 my-2 gap-2 max-h-[20dvh] overflow-y-auto pr-1">
+              {icons.map(([name, Icon]) => (
+                <div
+                  key={name}
+                  className={cn(
+                    "flex flex-row justify-center items-start hover:cursor-pointer p-1 rounded-lg",
+                    selectedIcon?.name === name
+                      ? "bg-selected text-white"
+                      : "hover:bg-secondary-foreground",
+                  )}
+                >
+                  <Icon
+                    size={20}
+                    onClick={() => {
+                      handleIconSelect({ name, Icon });
+                      setOpen(false);
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+type IconRendererProps = {
+  icon: IconType;
+  size?: number;
+  className?: string;
+};
+
+export function IconRenderer({ icon, size, className }: IconRendererProps) {
+  return <>{React.createElement(icon, { size, className })}</>;
+}
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
index bbba7e0eb..bba83f977 100644
--- a/web/src/components/ui/popover.tsx
+++ b/web/src/components/ui/popover.tsx
@@ -1,29 +1,36 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    container?: HTMLElement | null;
+  }
+>(
+  (
+    { className, container, align = "center", sideOffset = 4, ...props },
+    ref,
+  ) => (
+    <PopoverPrimitive.Portal container={container}>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 3cad4696b..67602a858 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -28,6 +28,7 @@ import { Label } from "@/components/ui/label";
 import { useNavigate } from "react-router-dom";
 import SummaryTimeline from "@/components/timeline/SummaryTimeline";
 import { isMobile } from "react-device-detect";
+import IconPicker, { IconElement } from "@/components/icons/IconPicker";
 
 // Color data
 const colors = [
@@ -207,6 +208,8 @@ function UIPlayground() {
   const [isEventsReviewTimeline, setIsEventsReviewTimeline] = useState(true);
   const birdseyeConfig = config?.birdseye;
 
+  const [selectedIcon, setSelectedIcon] = useState<IconElement>();
+
   return (
     <>
       <div className="w-full h-full">
@@ -214,6 +217,15 @@ function UIPlayground() {
           <div className="flex-1 content-start gap-2 overflow-y-auto no-scrollbar mt-4 mr-5">
             <Heading as="h2">UI Playground</Heading>
 
+            <IconPicker
+              selectedIcon={selectedIcon}
+              setSelectedIcon={setSelectedIcon}
+            />
+
+            {selectedIcon?.name && (
+              <p>Selected icon name: {selectedIcon.name}</p>
+            )}
+
             <Heading as="h4" className="my-5">
               Scrubber
             </Heading>
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index 517a00761..b24841151 100644
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -1,3 +1,4 @@
+import { IconName } from "@/components/icons/IconPicker";
 import { LivePlayerMode } from "./live";
 
 export interface UiConfig {
@@ -222,11 +223,9 @@ export interface CameraConfig {
   };
 }
 
-export const GROUP_ICONS = ["car", "cat", "dog", "leaf"] as const;
-
 export type CameraGroupConfig = {
   cameras: string[];
-  icon: (typeof GROUP_ICONS)[number];
+  icon: IconName;
   order: number;
 };
 
diff --git a/web/src/utils/iconUtil.tsx b/web/src/utils/iconUtil.tsx
index d2ba08715..3e8b8cca0 100644
--- a/web/src/utils/iconUtil.tsx
+++ b/web/src/utils/iconUtil.tsx
@@ -1,3 +1,4 @@
+import { IconName } from "@/components/icons/IconPicker";
 import { BsPersonWalking } from "react-icons/bs";
 import {
   FaAmazon,
@@ -6,35 +7,18 @@ import {
   FaCarSide,
   FaCat,
   FaCheckCircle,
-  FaCircle,
   FaDog,
   FaFedex,
   FaFire,
-  FaLeaf,
   FaUps,
 } from "react-icons/fa";
 import { GiHummingbird } from "react-icons/gi";
 import { LuBox, LuLassoSelect } from "react-icons/lu";
+import * as LuIcons from "react-icons/lu";
 import { MdRecordVoiceOver } from "react-icons/md";
 
-export function getIconTypeForGroup(icon: string) {
-  switch (icon) {
-    case "car":
-      return FaCarSide;
-    case "cat":
-      return FaCat;
-    case "dog":
-      return FaDog;
-    case "leaf":
-      return FaLeaf;
-    default:
-      return FaCircle;
-  }
-}
-
-export function getIconForGroup(icon: string, className: string = "size-4") {
-  const GroupIcon = getIconTypeForGroup(icon);
-  return <GroupIcon className={className} />;
+export function isValidIconName(value: string): value is IconName {
+  return Object.keys(LuIcons).includes(value as IconName);
 }
 
 export function getIconForLabel(label: string, className?: string) {

From 021ffb2437a58ad2e9478a709c8a64e54d3fe91e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 9 May 2024 08:55:19 -0500
Subject: [PATCH 56/56] fix nan check in system graphs (#11312)

---
 web/src/components/graph/SystemGraph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 834f6e6b4..fbaacc729 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -145,7 +145,7 @@ export function ThresholdBarGraph({
 }
 
 const getUnitSize = (MB: number) => {
-  if (isNaN(MB) || MB < 0) return "Invalid number";
+  if (MB === null || isNaN(MB) || MB < 0) return "Invalid number";
   if (MB < 1024) return `${MB.toFixed(2)} MiB`;
   if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;