Refactor search details into Explore Page (#13665)

2024-09-11 08:41:16 -06:00
parent e016bd6900
commit 3972642ba0
18 changed files with 1075 additions and 713 deletions
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -338,12 +338,7 @@ function EventItem({
                    <Chip
                      className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
                      onClick={() => {
-                        const similaritySearchParams = new URLSearchParams({
-                          search_type: "similarity",
-                          event_id: event.id,
-                        }).toString();
-
-                        navigate(`/search?${similaritySearchParams}`);
+                        navigate(`/explore?similarity_search_id=${event.id}`);
                      }}
                    >
                      <FaImages className="size-4 text-white" />
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -1,11 +1,4 @@
-import { isDesktop, isIOS } from "react-device-detect";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "../../ui/sheet";
+import { isDesktop, isIOS, isMobile } from "react-device-detect";
 import {
  Drawer,
  DrawerContent,
@@ -20,10 +13,28 @@ import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { Button } from "../../ui/button";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import axios from "axios";
 import { toast } from "sonner";
 import { Textarea } from "../../ui/textarea";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import useOptimisticState from "@/hooks/use-optimistic-state";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
+import { Event } from "@/types/event";
+import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
+import { baseUrl } from "@/api/baseUrl";
+import { cn } from "@/lib/utils";
+
+const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
+type SearchTab = (typeof SEARCH_TABS)[number];

 type SearchDetailDialogProps = {
  search?: SearchResult;
@@ -39,6 +50,130 @@ export default function SearchDetailDialog({
    revalidateOnFocus: false,
  });

+  // tabs
+
+  const [page, setPage] = useState<SearchTab>("details");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
+
+  const searchTabs = useMemo(() => {
+    if (!config || !search) {
+      return [];
+    }
+
+    const views = [...SEARCH_TABS];
+
+    if (!config.plus.enabled || !search.has_snapshot) {
+      const index = views.indexOf("Frigate+");
+      views.splice(index, 1);
+    }
+
+    // TODO implement
+    //if (!config.semantic_search.enabled) {
+    //  const index = views.indexOf("similar-calendar");
+    //  views.splice(index, 1);
+    // }
+
+    return views;
+  }, [config, search]);
+
+  if (!search) {
+    return;
+  }
+
+  // content
+
+  const Overlay = isDesktop ? Dialog : Drawer;
+  const Content = isDesktop ? DialogContent : DrawerContent;
+  const Header = isDesktop ? DialogHeader : DrawerHeader;
+  const Title = isDesktop ? DialogTitle : DrawerTitle;
+  const Description = isDesktop ? DialogDescription : DrawerDescription;
+
+  return (
+    <Overlay
+      open={search != undefined}
+      onOpenChange={(open) => {
+        if (!open) {
+          setSearch(undefined);
+        }
+      }}
+    >
+      <Content
+        className={
+          isDesktop
+            ? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"
+            : "max-h-[75dvh] overflow-hidden px-2 pb-4"
+        }
+      >
+        <Header className="sr-only">
+          <Title>Tracked Object Details</Title>
+          <Description>Tracked object details</Description>
+        </Header>
+        <ScrollArea
+          className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
+        >
+          <div className="flex flex-row">
+            <ToggleGroup
+              className="*:rounded-md *:px-3 *:py-4"
+              type="single"
+              size="sm"
+              value={pageToggle}
+              onValueChange={(value: SearchTab) => {
+                if (value) {
+                  setPageToggle(value);
+                }
+              }}
+            >
+              {Object.values(searchTabs).map((item) => (
+                <ToggleGroupItem
+                  key={item}
+                  className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "details" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                  value={item}
+                  data-nav-item={item}
+                  aria-label={`Select ${item}`}
+                >
+                  <div className="capitalize">{item}</div>
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+            <ScrollBar orientation="horizontal" className="h-0" />
+          </div>
+        </ScrollArea>
+        {page == "details" && (
+          <ObjectDetailsTab
+            search={search}
+            config={config}
+            setSearch={setSearch}
+            setSimilarity={setSimilarity}
+          />
+        )}
+        {page == "Frigate+" && (
+          <FrigatePlusDialog
+            upload={search as unknown as Event}
+            dialog={false}
+            onClose={() => {}}
+            onEventUploaded={() => {
+              search.plus_id = "new_upload";
+            }}
+          />
+        )}
+        {page == "video" && <VideoTab search={search} />}
+      </Content>
+    </Overlay>
+  );
+}
+
+type ObjectDetailsTabProps = {
+  search: SearchResult;
+  config?: FrigateConfig;
+  setSearch: (search: SearchResult | undefined) => void;
+  setSimilarity?: () => void;
+};
+function ObjectDetailsTab({
+  search,
+  config,
+  setSearch,
+  setSimilarity,
+}: ObjectDetailsTabProps) {
  const apiHost = useApiHost();

  // data
@@ -77,8 +212,6 @@ export default function SearchDetailDialog({
    }
  }, [search]);

-  // api
-
  const updateDescription = useCallback(() => {
    if (!search) {
      return;
@@ -101,105 +234,97 @@ export default function SearchDetailDialog({
      });
  }, [desc, search]);

-  // content
-
-  const Overlay = isDesktop ? Sheet : Drawer;
-  const Content = isDesktop ? SheetContent : DrawerContent;
-  const Header = isDesktop ? SheetHeader : DrawerHeader;
-  const Title = isDesktop ? SheetTitle : DrawerTitle;
-  const Description = isDesktop ? SheetDescription : DrawerDescription;
-
  return (
-    <Overlay
-      open={search != undefined}
-      onOpenChange={(open) => {
-        if (!open) {
-          setSearch(undefined);
-        }
-      }}
-    >
-      <Content
-        className={
-          isDesktop ? "sm:max-w-xl" : "max-h-[75dvh] overflow-hidden p-2 pb-4"
-        }
-      >
-        <Header className="sr-only">
-          <Title>Tracked Object Details</Title>
-          <Description>Tracked object details</Description>
-        </Header>
-        {search && (
-          <div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
-            <div className="flex w-full flex-row">
-              <div className="flex w-full flex-col gap-3">
-                <div className="flex flex-col gap-1.5">
-                  <div className="text-sm text-primary/40">Label</div>
-                  <div className="flex flex-row items-center gap-2 text-sm capitalize">
-                    {getIconForLabel(search.label, "size-4 text-primary")}
-                    {search.label}
-                    {search.sub_label && ` (${search.sub_label})`}
-                  </div>
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <div className="text-sm text-primary/40">Score</div>
-                  <div className="text-sm">
-                    {score}%{subLabelScore && ` (${subLabelScore}%)`}
-                  </div>
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <div className="text-sm text-primary/40">Camera</div>
-                  <div className="text-sm capitalize">
-                    {search.camera.replaceAll("_", " ")}
-                  </div>
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <div className="text-sm text-primary/40">Timestamp</div>
-                  <div className="text-sm">{formattedDate}</div>
-                </div>
-              </div>
-              <div className="flex w-full flex-col gap-2 px-6">
-                <img
-                  className="aspect-video select-none rounded-lg object-contain transition-opacity"
-                  style={
-                    isIOS
-                      ? {
-                          WebkitUserSelect: "none",
-                          WebkitTouchCallout: "none",
-                        }
-                      : undefined
-                  }
-                  draggable={false}
-                  src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
-                />
-                <Button
-                  onClick={() => {
-                    setSearch(undefined);
-
-                    if (setSimilarity) {
-                      setSimilarity();
-                    }
-                  }}
-                >
-                  Find Similar
-                </Button>
-              </div>
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary/40">Description</div>
-              <Textarea
-                className="md:h-64"
-                placeholder="Description of the event"
-                value={desc}
-                onChange={(e) => setDesc(e.target.value)}
-              />
-              <div className="flex w-full flex-row justify-end">
-                <Button variant="select" onClick={updateDescription}>
-                  Save
-                </Button>
-              </div>
+    <div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
+      <div className="flex w-full flex-row">
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Label</div>
+            <div className="flex flex-row items-center gap-2 text-sm capitalize">
+              {getIconForLabel(search.label, "size-4 text-primary")}
+              {search.label}
+              {search.sub_label && ` (${search.sub_label})`}
            </div>
          </div>
-        )}
-      </Content>
-    </Overlay>
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Score</div>
+            <div className="text-sm">
+              {score}%{subLabelScore && ` (${subLabelScore}%)`}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Camera</div>
+            <div className="text-sm capitalize">
+              {search.camera.replaceAll("_", " ")}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Timestamp</div>
+            <div className="text-sm">{formattedDate}</div>
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-2 px-6">
+          <img
+            className="aspect-video select-none rounded-lg object-contain transition-opacity"
+            style={
+              isIOS
+                ? {
+                    WebkitUserSelect: "none",
+                    WebkitTouchCallout: "none",
+                  }
+                : undefined
+            }
+            draggable={false}
+            src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
+          />
+          <Button
+            onClick={() => {
+              setSearch(undefined);
+
+              if (setSimilarity) {
+                setSimilarity();
+              }
+            }}
+          >
+            Find Similar
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <div className="text-sm text-primary/40">Description</div>
+        <Textarea
+          className="md:h-64"
+          placeholder="Description of the event"
+          value={desc}
+          onChange={(e) => setDesc(e.target.value)}
+        />
+        <div className="flex w-full flex-row justify-end">
+          <Button variant="select" onClick={updateDescription}>
+            Save
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type VideoTabProps = {
+  search: SearchResult;
+};
+function VideoTab({ search }: VideoTabProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
+
+  return (
+    <HlsVideoPlayer
+      videoRef={videoRef}
+      currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
+      hotKeys
+      visible
+      frigateControls={false}
+      fullscreen={false}
+      supportsFullscreen={false}
+    />
  );
 }