Tracked Object Details pane tweaks (#20830)

* add prev/next buttons on desktop * buttons should work with summary and grid view * i18n * small tweaks * don't change dialog size * remove heading and count * remove icons * spacing * two column detail view * add actions to dots menu * move actions menu to its own component * set modal to false on face library dropdown to guard against improper closures https://github.com/shadcn-ui/ui/discussions/6908 * frigate plus layout * remove face training * clean up unused * refactor to remove duplication between mobile and desktop * turn annotation settings into a popover * fix popover * improve annotation offset popver * change icon and popover text in detail stream for annotation settings * clean up * use drawer on mobile * fix setter function * use dialog ref for popover portal * don't portal popover * tweaks * add button type * lower xl max width * fixes * justify
2026-08-02 17:12:16 +03:00 · 2025-11-06 09:22:52 -07:00
parent 32f1d85a6f
commit 945317b44e
11 changed files with 1013 additions and 877 deletions
@@ -0,0 +1,118 @@
+import { useMemo, useState } from "react";
+import { Event } from "@/types/event";
+import { baseUrl } from "@/api/baseUrl";
+import { ReviewSegment, REVIEW_PADDING } from "@/types/review";
+import useSWR from "swr";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from "@/components/ui/dropdown-menu";
+import { HiDotsHorizontal } from "react-icons/hi";
+import { SearchResult } from "@/types/search";
+import { FrigateConfig } from "@/types/frigateConfig";
+
+type Props = {
+  search: SearchResult | Event;
+  config?: FrigateConfig;
+  setSearch?: (s: SearchResult | undefined) => void;
+  setSimilarity?: () => void;
+  faceNames?: string[];
+  onTrainFace?: (name: string) => void;
+  hasFace?: boolean;
+};
+
+export default function DetailActionsMenu({
+  search,
+  config,
+  setSearch,
+  setSimilarity,
+}: Props) {
+  const { t } = useTranslation(["views/explore", "views/faceLibrary"]);
+  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const clipTimeRange = useMemo(() => {
+    const startTime = (search.start_time ?? 0) - REVIEW_PADDING;
+    const endTime = (search.end_time ?? Date.now() / 1000) + REVIEW_PADDING;
+    return `start/${startTime}/end/${endTime}`;
+  }, [search]);
+
+  const { data: reviewItem } = useSWR<ReviewSegment>([
+    `review/event/${search.id}`,
+  ]);
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger>
+        <div className="rounded" role="button">
+          <HiDotsHorizontal className="size-4 text-muted-foreground" />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>
+            <a
+              className="w-full"
+              href={`${baseUrl}api/events/${search.id}/snapshot.jpg?bbox=1`}
+              download={`${search.camera}_${search.label}.jpg`}
+            >
+              <div className="flex cursor-pointer items-center gap-2">
+                <span>{t("itemMenu.downloadSnapshot.label")}</span>
+              </div>
+            </a>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem>
+            <a
+              className="w-full"
+              href={`${baseUrl}api/${search.camera}/${clipTimeRange}/clip.mp4`}
+              download
+            >
+              <div className="flex cursor-pointer items-center gap-2">
+                <span>{t("itemMenu.downloadVideo.label")}</span>
+              </div>
+            </a>
+          </DropdownMenuItem>
+
+          {config?.semantic_search.enabled &&
+            setSimilarity != undefined &&
+            search.data?.type == "object" && (
+              <DropdownMenuItem
+                onClick={() => {
+                  setIsOpen(false);
+                  setTimeout(() => {
+                    setSearch?.(undefined);
+                    setSimilarity?.();
+                  }, 0);
+                }}
+              >
+                <div className="flex cursor-pointer items-center gap-2">
+                  <span>{t("itemMenu.findSimilar.label")}</span>
+                </div>
+              </DropdownMenuItem>
+            )}
+
+          {reviewItem && reviewItem.id && (
+            <DropdownMenuItem
+              onClick={() => {
+                setIsOpen(false);
+                setTimeout(() => {
+                  navigate(`/review?id=${reviewItem.id}`);
+                }, 0);
+              }}
+            >
+              <div className="flex cursor-pointer items-center gap-2">
+                <span>{t("itemMenu.viewInHistory.label")}</span>
+              </div>
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}