Add video and frigate plus tabs for search item

frigate/api/event.py

@@ -317,7 +317,10 @@ def events_search():
         Event.zones,
         Event.start_time,
         Event.end_time,
+        Event.has_clip,
+        Event.has_snapshot,
         Event.data,
+        Event.plus_id,
         ReviewSegment.thumb_path,
     ]
 

web/src/components/card/SearchThumbnail.tsx

@@ -16,8 +16,6 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import useContextMenu from "@/hooks/use-contextmenu";
 import { cn } from "@/lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Button } from "../ui/button";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -44,9 +42,7 @@ export default function SearchThumbnail({
     preventScrollOnSwipe: true,
   });
 
-  useContextMenu(imgRef, () => {
+  useContextMenu(imgRef, findSimilar);
-    onClick(searchResult, true);
-  });
 
   // Hover Details
 
@@ -99,15 +95,6 @@ export default function SearchThumbnail({
   );
 
   return (
-    <Popover
-      open={showingMoreDetail}
-      onOpenChange={(open) => {
-        if (!open) {
-          setDetails(false);
-        }
-      }}
-    >
-      <PopoverTrigger asChild>
     <div
       className="relative size-full cursor-pointer"
       onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
@@ -170,8 +157,7 @@ export default function SearchThumbnail({
             <TooltipContent className="capitalize">
               {[...new Set([searchResult.label])]
                 .filter(
-                      (item) =>
+                  (item) => item !== undefined && !item.includes("-verified"),
-                        item !== undefined && !item.includes("-verified"),
                 )
                 .map((text) => capitalizeFirstLetter(text))
                 .sort()
@@ -194,109 +180,6 @@ export default function SearchThumbnail({
           </div>
         </div>
       </div>
-          <PopoverContent>
-            <SearchDetails search={searchResult} findSimilar={findSimilar} />
-          </PopoverContent>
-        </div>
-      </PopoverTrigger>
-    </Popover>
-  );
-}
-
-type SearchDetailProps = {
-  search?: SearchResult;
-  findSimilar: () => void;
-};
-function SearchDetails({ search, findSimilar }: SearchDetailProps) {
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
-  const apiHost = useApiHost();
-
-  // data
-
-  const formattedDate = useFormattedTimestamp(
-    search?.start_time ?? 0,
-    config?.ui.time_format == "24hour"
-      ? "%b %-d %Y, %H:%M"
-      : "%b %-d %Y, %I:%M %p",
-  );
-
-  const score = useMemo(() => {
-    if (!search) {
-      return 0;
-    }
-
-    const value = search.score ?? search.data.top_score;
-
-    return Math.round(value * 100);
-  }, [search]);
-
-  const subLabelScore = useMemo(() => {
-    if (!search) {
-      return undefined;
-    }
-
-    if (search.sub_label) {
-      return Math.round((search.data?.top_score ?? 0) * 100);
-    } else {
-      return undefined;
-    }
-  }, [search]);
-
-  if (!search) {
-    return;
-  }
-
-  return (
-    <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 variant="secondary" onClick={findSimilar}>
-            Find Similar
-          </Button>
-        </div>
-      </div>
     </div>
   );
 }

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 {
   Drawer,
   DrawerContent,
@@ -20,10 +13,27 @@ 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";
+
+const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
+type SearchTab = (typeof SEARCH_TABS)[number];
 
 type SearchDetailDialogProps = {
   search?: SearchResult;
@@ -39,6 +49,127 @@ 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);
+          setPage("details");
+        }
+      }}
+    >
+      <Content
+        className={
+          isDesktop
+            ? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"
+            : "max-h-[75dvh] overflow-hidden p-2 pb-4"
+        }
+      >
+        <Header className="sr-only">
+          <Title>Tracked Object Details</Title>
+          <Description>Tracked object details</Description>
+        </Header>
+        <ScrollArea className="w-full whitespace-nowrap">
+          <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={() => {}}
+          />
+        )}
+        {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 +208,6 @@ export default function SearchDetailDialog({
     }
   }, [search]);
 
-  // api
-
   const updateDescription = useCallback(() => {
     if (!search) {
       return;
@@ -101,33 +230,7 @@ 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">
@@ -198,8 +301,24 @@ export default function SearchDetailDialog({
         </div>
       </div>
     </div>
-        )}
+  );
-      </Content>
+}
-    </Overlay>
+
+type VideoTabProps = {
+  search: SearchResult;
+};
+function VideoTab({ search }: VideoTabProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  return (
+    <HlsVideoPlayer
+      videoRef={videoRef}
+      currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${search.end_time ?? 0}/index.m3u8`}
+      hotKeys
+      visible
+      frigateControls={false}
+      fullscreen={false}
+      supportsFullscreen={false}
+    />
   );
 }

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

@@ -17,11 +17,13 @@ import useSWR from "swr";
 
 type FrigatePlusDialogProps = {
   upload?: Event;
+  dialog?: boolean;
   onClose: () => void;
   onEventUploaded: () => void;
 };
 export function FrigatePlusDialog({
   upload,
+  dialog = true,
   onClose,
   onEventUploaded,
 }: FrigatePlusDialogProps) {
@@ -67,12 +69,7 @@ export function FrigatePlusDialog({
     [upload, onClose, onEventUploaded],
   );
 
-  return (
+  const content = (
-    <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>
@@ -100,12 +97,10 @@ export function FrigatePlusDialog({
           />
         )}
       </TransformComponent>
+      {upload?.plus_id == undefined && (
         <DialogFooter>
-            <Button onClick={onClose}>Cancel</Button>
+          {dialog && <Button onClick={onClose}>Cancel</Button>}
-            <Button
+          <Button className="bg-success" onClick={() => onSubmitToPlus(false)}>
-              className="bg-success"
-              onClick={() => onSubmitToPlus(false)}
-            >
             This is a {upload?.label}
           </Button>
           <Button
@@ -116,8 +111,22 @@ export function FrigatePlusDialog({
             This is not a {upload?.label}
           </Button>
         </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;
+}

web/src/components/player/HlsVideoPlayer.tsx

@@ -35,6 +35,7 @@ type HlsVideoPlayerProps = {
   hotKeys: boolean;
   supportsFullscreen: boolean;
   fullscreen: boolean;
+  frigateControls?: boolean;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
@@ -52,6 +53,7 @@ export default function HlsVideoPlayer({
   hotKeys,
   supportsFullscreen,
   fullscreen,
+  frigateControls = true,
   onClipEnded,
   onPlayerLoaded,
   onTimeUpdate,
@@ -167,6 +169,7 @@ export default function HlsVideoPlayer({
 
   return (
     <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
+      {frigateControls && (
         <VideoControls
           className={cn(
             "absolute left-1/2 z-50 -translate-x-1/2",
@@ -234,6 +237,7 @@ export default function HlsVideoPlayer({
           toggleFullscreen={toggleFullscreen}
           containerRef={containerRef}
         />
+      )}
       <TransformComponent
         wrapperStyle={{
           display: visible ? undefined : "none",
@@ -253,7 +257,7 @@ export default function HlsVideoPlayer({
           className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
           preload="auto"
           autoPlay
-          controls={false}
+          controls={!frigateControls}
           playsInline
           muted={muted}
           onVolumeChange={() =>

web/src/pages/Search.tsx

@@ -230,7 +230,6 @@ export default function Search() {
         searchTerm={searchTerm}
         searchFilter={searchFilter}
         searchResults={searchResults}
-        allPreviews={allPreviews}
         isLoading={isLoading}
         setSearch={setSearch}
         similaritySearch={similaritySearch}

web/src/types/search.ts

@@ -10,6 +10,9 @@ export type SearchResult = {
   label: string;
   sub_label?: string;
   thumb_path?: string;
+  plus_id?: string;
+  has_snapshot: boolean;
+  has_clip: boolean;
   zones: string[];
   search_source: SearchSource;
   search_distance: number;
@@ -25,7 +28,6 @@ export type SearchResult = {
   };
 };
 
-
 export type PartialSearchResult = Partial<SearchResult> & { id: string };
 
 export type SearchFilter = {

web/src/views/search/SearchView.tsx

@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { Preview } from "@/types/preview";
 import {
   PartialSearchResult,
   SearchFilter,
@@ -28,7 +27,6 @@ type SearchViewProps = {
   searchTerm: string;
   searchFilter?: SearchFilter;
   searchResults?: SearchResult[];
-  allPreviews?: Preview[];
   isLoading: boolean;
   similaritySearch?: PartialSearchResult;
   setSearch: (search: string) => void;
@@ -41,13 +39,11 @@ export default function SearchView({
   searchTerm,
   searchFilter,
   searchResults,
-  allPreviews,
   isLoading,
   similaritySearch,
   setSearch,
   setSimilaritySearch,
   onUpdateFilter,
-  onOpenSearch,
 }: SearchViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
@@ -68,16 +64,13 @@ export default function SearchView({
 
   // search interaction
 
-  const onSelectSearch = useCallback(
+  const onSelectSearch = useCallback((item: SearchResult, detail: boolean) => {
-    (item: SearchResult, detail: boolean) => {
     if (detail) {
       setSearchDetail(item);
     } else {
-        onOpenSearch(item);
+      setSearchDetail(item);
     }
-    },
+  }, []);
-    [onOpenSearch],
-  );
 
   // confidence score - probably needs tweaking