Refactor search details into Explore Page (#13665)

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" />

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}
+    />
   );
 }

web/src/components/overlay/dialog/FrigatePlusDialog.tsx

@@ -1,4 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -11,17 +12,21 @@ import {
 import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
 
+type SubmissionState = "reviewing" | "uploading" | "submitted";
+
 type FrigatePlusDialogProps = {
   upload?: Event;
+  dialog?: boolean;
   onClose: () => void;
   onEventUploaded: () => void;
 };
 export function FrigatePlusDialog({
   upload,
+  dialog = true,
   onClose,
   onEventUploaded,
 }: FrigatePlusDialogProps) {
@@ -49,6 +54,10 @@ export function FrigatePlusDialog({
 
   // upload
 
+  const [state, setState] = useState<SubmissionState>(
+    upload?.plus_id ? "submitted" : "reviewing",
+  );
+
   const onSubmitToPlus = useCallback(
     async (falsePositive: boolean) => {
       if (!upload) {
@@ -61,63 +70,84 @@ export function FrigatePlusDialog({
             include_annotation: 1,
           });
 
+      setState("submitted");
       onEventUploaded();
       onClose();
     },
     [upload, onClose, onEventUploaded],
   );
 
-  return (
-    <Dialog
-      open={upload != undefined}
-      onOpenChange={(open) => (!open ? onClose() : null)}
-    >
-      <DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl">
-        <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
-          <DialogHeader>
-            <DialogTitle>Submit To Frigate+</DialogTitle>
-            <DialogDescription>
-              Objects in locations you want to avoid are not false positives.
-              Submitting them as false positives will confuse the model.
-            </DialogDescription>
-          </DialogHeader>
-          <TransformComponent
-            wrapperStyle={{
-              width: "100%",
-              height: "100%",
-            }}
-            contentStyle={{
-              position: "relative",
-              width: "100%",
-              height: "100%",
-            }}
-          >
-            {upload?.id && (
-              <img
-                className={`w-full ${grow} bg-black`}
-                src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
-                alt={`${upload?.label}`}
-              />
-            )}
-          </TransformComponent>
-          <DialogFooter>
-            <Button onClick={onClose}>Cancel</Button>
+  const content = (
+    <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
+      <DialogHeader>
+        <DialogTitle>Submit To Frigate+</DialogTitle>
+        <DialogDescription>
+          Objects in locations you want to avoid are not false positives.
+          Submitting them as false positives will confuse the model.
+        </DialogDescription>
+      </DialogHeader>
+      <TransformComponent
+        wrapperStyle={{
+          width: "100%",
+          height: "100%",
+        }}
+        contentStyle={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        {upload?.id && (
+          <img
+            className={`w-full ${grow} bg-black`}
+            src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
+            alt={`${upload?.label}`}
+          />
+        )}
+      </TransformComponent>
+
+      <DialogFooter>
+        {state == "reviewing" && (
+          <>
+            {dialog && <Button onClick={onClose}>Cancel</Button>}
             <Button
               className="bg-success"
-              onClick={() => onSubmitToPlus(false)}
+              onClick={() => {
+                setState("uploading");
+                onSubmitToPlus(false);
+              }}
             >
               This is a {upload?.label}
             </Button>
             <Button
               className="text-white"
               variant="destructive"
-              onClick={() => onSubmitToPlus(true)}
+              onClick={() => {
+                setState("uploading");
+                onSubmitToPlus(true);
+              }}
             >
               This is not a {upload?.label}
             </Button>
-          </DialogFooter>
-        </TransformWrapper>
-      </DialogContent>
-    </Dialog>
+          </>
+        )}
+        {state == "uploading" && <ActivityIndicator />}
+      </DialogFooter>
+    </TransformWrapper>
   );
+
+  if (dialog) {
+    return (
+      <Dialog
+        open={upload != undefined}
+        onOpenChange={(open) => (!open ? onClose() : null)}
+      >
+        <DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl">
+          {content}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return content;
 }