Add Detail stream in History view (#20525)

* new type * activity stream panel * use context provider for activity stream * new activity stream panel in history view * overlay for object tracking details in history view * use overlay in video player * don't refetch timeline * fix activity stream group from being highlighted prematurely * use annotation offset * fix scrolling and use custom hook for interaction * memoize to prevent unnecessary renders * i18n and timestamp formatting * add annotation offset slider * bg color * add collapsible component * refactor * rename activity to detail * fix merge conflicts * i18n * more i18n
2026-07-31 08:09:02 +03:00 · 2025-10-16 07:24:14 -06:00
parent 2e7a2fd780
commit b52044aecc
16 changed files with 1818 additions and 326 deletions
@@ -0,0 +1,87 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+} from "@/components/ui/dropdown-menu";
+import { HiDotsHorizontal } from "react-icons/hi";
+import { useApiHost } from "@/api";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import type { Event } from "@/types/event";
+import type { FrigateConfig } from "@/types/frigateConfig";
+
+type EventMenuProps = {
+  event: Event;
+  config?: FrigateConfig;
+  onOpenUpload?: (e: Event) => void;
+  onOpenSimilarity?: (e: Event) => void;
+};
+
+export default function EventMenu({
+  event,
+  config,
+  onOpenUpload,
+  onOpenSimilarity,
+}: EventMenuProps) {
+  const apiHost = useApiHost();
+  const navigate = useNavigate();
+  const { t } = useTranslation("views/explore");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <button
+          className="mr-2 rounded p-1"
+          aria-label={t("itemMenu.openMenu", { ns: "common" })}
+        >
+          <HiDotsHorizontal className="size-4 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuItem asChild>
+            <a
+              download
+              href={
+                event.has_snapshot
+                  ? `${apiHost}api/events/${event.id}/snapshot.jpg`
+                  : `${apiHost}api/events/${event.id}/thumbnail.webp`
+              }
+            >
+              {t("itemMenu.downloadSnapshot.label")}
+            </a>
+          </DropdownMenuItem>
+
+          {event.has_snapshot &&
+            event.plus_id == undefined &&
+            event.data.type == "object" &&
+            config?.plus?.enabled && (
+              <DropdownMenuItem
+                onSelect={() => {
+                  onOpenUpload?.(event);
+                }}
+              >
+                {t("itemMenu.submitToPlus.label")}
+              </DropdownMenuItem>
+            )}
+
+          {event.has_snapshot && config?.semantic_search?.enabled && (
+            <DropdownMenuItem
+              onSelect={() => {
+                if (onOpenSimilarity) onOpenSimilarity(event);
+                else
+                  navigate(
+                    `/explore?search_type=similarity&event_id=${event.id}`,
+                  );
+              }}
+            >
+              {t("itemMenu.findSimilar.label")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}