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,202 +95,89 @@ export default function SearchThumbnail({
   );
 
   return (
-    <Popover
+    <div
-      open={showingMoreDetail}
+      className="relative size-full cursor-pointer"
-      onOpenChange={(open) => {
+      onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
-        if (!open) {
+      onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
-          setDetails(false);
+      onClick={handleOnClick}
-        }
+      {...swipeHandlers}
-      }}
     >
-      <PopoverTrigger asChild>
+      <ImageLoadingIndicator
-        <div
+        className="absolute inset-0"
-          className="relative size-full cursor-pointer"
+        imgLoaded={imgLoaded}
-          onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
+      />
-          onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
+      <div className={`${imgLoaded ? "visible" : "invisible"}`}>
-          onClick={handleOnClick}
+        <img
-          {...swipeHandlers}
+          ref={imgRef}
-        >
+          className={cn(
-          <ImageLoadingIndicator
+            "size-full select-none opacity-100 transition-opacity",
-            className="absolute inset-0"
+            searchResult.search_source == "thumbnail" && "object-contain",
-            imgLoaded={imgLoaded}
+          )}
-          />
+          style={
-          <div className={`${imgLoaded ? "visible" : "invisible"}`}>
+            isIOS
-            <img
+              ? {
-              ref={imgRef}
+                  WebkitUserSelect: "none",
-              className={cn(
+                  WebkitTouchCallout: "none",
-                "size-full select-none opacity-100 transition-opacity",
+                }
-                searchResult.search_source == "thumbnail" && "object-contain",
+              : undefined
-              )}
+          }
-              style={
+          draggable={false}
-                isIOS
+          src={`${apiHost}api/events/${searchResult.id}/thumbnail.jpg`}
-                  ? {
+          loading={isSafari ? "eager" : "lazy"}
-                      WebkitUserSelect: "none",
+          onLoad={() => {
-                      WebkitTouchCallout: "none",
+            onImgLoad();
-                    }
+          }}
-                  : undefined
+        />
-              }
-              draggable={false}
-              src={`${apiHost}api/events/${searchResult.id}/thumbnail.jpg`}
-              loading={isSafari ? "eager" : "lazy"}
-              onLoad={() => {
-                onImgLoad();
-              }}
-            />
 
-            <div className="absolute left-0 top-2 z-40">
+        <div className="absolute left-0 top-2 z-40">
-              <Tooltip>
+          <Tooltip>
-                <div
+            <div
-                  className="flex"
+              className="flex"
-                  onMouseEnter={() => setTooltipHovering(true)}
+              onMouseEnter={() => setTooltipHovering(true)}
-                  onMouseLeave={() => setTooltipHovering(false)}
+              onMouseLeave={() => setTooltipHovering(false)}
-                >
+            >
-                  <TooltipTrigger asChild>
+              <TooltipTrigger asChild>
-                    <div className="mx-3 pb-1 text-sm text-white">
+                <div className="mx-3 pb-1 text-sm text-white">
-                      {
+                  {
-                        <>
+                    <>
-                          <Chip
+                      <Chip
-                            className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
+                        className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
-                            onClick={() => onClick(searchResult, true)}
+                        onClick={() => onClick(searchResult, true)}
-                          >
+                      >
-                            {getIconForLabel(
+                        {getIconForLabel(
-                              searchResult.label,
+                          searchResult.label,
-                              "size-3 text-white",
+                          "size-3 text-white",
-                            )}
+                        )}
-                          </Chip>
+                      </Chip>
-                        </>
+                    </>
-                      }
-                    </div>
-                  </TooltipTrigger>
-                </div>
-                <TooltipContent className="capitalize">
-                  {[...new Set([searchResult.label])]
-                    .filter(
-                      (item) =>
-                        item !== undefined && !item.includes("-verified"),
-                    )
-                    .map((text) => capitalizeFirstLetter(text))
-                    .sort()
-                    .join(", ")
-                    .replaceAll("-verified", "")}
-                </TooltipContent>
-              </Tooltip>
-            </div>
-            <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
-            <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
-              <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
-                {searchResult.end_time ? (
-                  <TimeAgo time={searchResult.start_time * 1000} dense />
-                ) : (
-                  <div>
-                    <ActivityIndicator size={24} />
-                  </div>
-                )}
-                {formattedDate}
-              </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
+                </div>
-            }
+              </TooltipTrigger>
-            draggable={false}
+            </div>
-            src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
+            <TooltipContent className="capitalize">
-          />
+              {[...new Set([searchResult.label])]
-          <Button variant="secondary" onClick={findSimilar}>
+                .filter(
-            Find Similar
+                  (item) => item !== undefined && !item.includes("-verified"),
-          </Button>
+                )
+                .map((text) => capitalizeFirstLetter(text))
+                .sort()
+                .join(", ")
+                .replaceAll("-verified", "")}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
+        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
+          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
+            {searchResult.end_time ? (
+              <TimeAgo time={searchResult.start_time * 1000} dense />
+            ) : (
+              <div>
+                <ActivityIndicator size={24} />
+              </div>
+            )}
+            {formattedDate}
+          </div>
         </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,105 +230,95 @@ 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
+    <div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
-      open={search != undefined}
+      <div className="flex w-full flex-row">
-      onOpenChange={(open) => {
+        <div className="flex w-full flex-col gap-3">
-        if (!open) {
+          <div className="flex flex-col gap-1.5">
-          setSearch(undefined);
+            <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}
-      <Content
+              {search.sub_label && ` (${search.sub_label})`}
-        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>
           </div>
-        )}
+          <div className="flex flex-col gap-1.5">
-      </Content>
+            <div className="text-sm text-primary/40">Score</div>
-    </Overlay>
+            <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);
+
+  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,57 +69,64 @@ export function FrigatePlusDialog({
     [upload, onClose, onEventUploaded],
   );
 
-  return (
+  const content = (
-    <Dialog
+    <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
-      open={upload != undefined}
+      <DialogHeader>
-      onOpenChange={(open) => (!open ? onClose() : null)}
+        <DialogTitle>Submit To Frigate+</DialogTitle>
-    >
+        <DialogDescription>
-      <DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl">
+          Objects in locations you want to avoid are not false positives.
-        <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
+          Submitting them as false positives will confuse the model.
-          <DialogHeader>
+        </DialogDescription>
-            <DialogTitle>Submit To Frigate+</DialogTitle>
+      </DialogHeader>
-            <DialogDescription>
+      <TransformComponent
-              Objects in locations you want to avoid are not false positives.
+        wrapperStyle={{
-              Submitting them as false positives will confuse the model.
+          width: "100%",
-            </DialogDescription>
+          height: "100%",
-          </DialogHeader>
+        }}
-          <TransformComponent
+        contentStyle={{
-            wrapperStyle={{
+          position: "relative",
-              width: "100%",
+          width: "100%",
-              height: "100%",
+          height: "100%",
-            }}
+        }}
-            contentStyle={{
+      >
-              position: "relative",
+        {upload?.id && (
-              width: "100%",
+          <img
-              height: "100%",
+            className={`w-full ${grow} bg-black`}
-            }}
+            src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
+            alt={`${upload?.label}`}
+          />
+        )}
+      </TransformComponent>
+      {upload?.plus_id == undefined && (
+        <DialogFooter>
+          {dialog && <Button onClick={onClose}>Cancel</Button>}
+          <Button className="bg-success" onClick={() => onSubmitToPlus(false)}>
+            This is a {upload?.label}
+          </Button>
+          <Button
+            className="text-white"
+            variant="destructive"
+            onClick={() => onSubmitToPlus(true)}
           >
-            {upload?.id && (
+            This is not a {upload?.label}
-              <img
+          </Button>
-                className={`w-full ${grow} bg-black`}
+        </DialogFooter>
-                src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
+      )}
-                alt={`${upload?.label}`}
+    </TransformWrapper>
-              />
-            )}
-          </TransformComponent>
-          <DialogFooter>
-            <Button onClick={onClose}>Cancel</Button>
-            <Button
-              className="bg-success"
-              onClick={() => onSubmitToPlus(false)}
-            >
-              This is a {upload?.label}
-            </Button>
-            <Button
-              className="text-white"
-              variant="destructive"
-              onClick={() => onSubmitToPlus(true)}
-            >
-              This is not a {upload?.label}
-            </Button>
-          </DialogFooter>
-        </TransformWrapper>
-      </DialogContent>
-    </Dialog>
   );
+
+  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,73 +169,75 @@ export default function HlsVideoPlayer({
 
   return (
     <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
-      <VideoControls
+      {frigateControls && (
-        className={cn(
+        <VideoControls
-          "absolute left-1/2 z-50 -translate-x-1/2",
+          className={cn(
-          tallCamera ? "bottom-12" : "bottom-5",
+            "absolute left-1/2 z-50 -translate-x-1/2",
-        )}
+            tallCamera ? "bottom-12" : "bottom-5",
-        video={videoRef.current}
+          )}
-        isPlaying={isPlaying}
+          video={videoRef.current}
-        show={visible && (controls || controlsOpen)}
+          isPlaying={isPlaying}
-        muted={muted}
+          show={visible && (controls || controlsOpen)}
-        volume={volume}
+          muted={muted}
-        features={{
+          volume={volume}
-          volume: true,
+          features={{
-          seek: true,
+            volume: true,
-          playbackRate: true,
+            seek: true,
-          plusUpload: config?.plus?.enabled == true,
+            playbackRate: true,
-          fullscreen: supportsFullscreen,
+            plusUpload: config?.plus?.enabled == true,
-        }}
+            fullscreen: supportsFullscreen,
-        setControlsOpen={setControlsOpen}
+          }}
-        setMuted={(muted) => setMuted(muted, true)}
+          setControlsOpen={setControlsOpen}
-        playbackRate={playbackRate ?? 1}
+          setMuted={(muted) => setMuted(muted, true)}
-        hotKeys={hotKeys}
+          playbackRate={playbackRate ?? 1}
-        onPlayPause={(play) => {
+          hotKeys={hotKeys}
-          if (!videoRef.current) {
+          onPlayPause={(play) => {
-            return;
+            if (!videoRef.current) {
-          }
+              return;
-
-          if (play) {
-            videoRef.current.play();
-          } else {
-            videoRef.current.pause();
-          }
-        }}
-        onSeek={(diff) => {
-          const currentTime = videoRef.current?.currentTime;
-
-          if (!videoRef.current || !currentTime) {
-            return;
-          }
-
-          videoRef.current.currentTime = Math.max(0, currentTime + diff);
-        }}
-        onSetPlaybackRate={(rate) => {
-          setPlaybackRate(rate, true);
-
-          if (videoRef.current) {
-            videoRef.current.playbackRate = rate;
-          }
-        }}
-        onUploadFrame={async () => {
-          if (videoRef.current && onUploadFrame) {
-            const resp = await onUploadFrame(videoRef.current.currentTime);
-
-            if (resp && resp.status == 200) {
-              toast.success("Successfully submitted frame to Frigate+", {
-                position: "top-center",
-              });
-            } else {
-              toast.success("Failed to submit frame to Frigate+", {
-                position: "top-center",
-              });
             }
-          }
+
-        }}
+            if (play) {
-        fullscreen={fullscreen}
+              videoRef.current.play();
-        toggleFullscreen={toggleFullscreen}
+            } else {
-        containerRef={containerRef}
+              videoRef.current.pause();
-      />
+            }
+          }}
+          onSeek={(diff) => {
+            const currentTime = videoRef.current?.currentTime;
+
+            if (!videoRef.current || !currentTime) {
+              return;
+            }
+
+            videoRef.current.currentTime = Math.max(0, currentTime + diff);
+          }}
+          onSetPlaybackRate={(rate) => {
+            setPlaybackRate(rate, true);
+
+            if (videoRef.current) {
+              videoRef.current.playbackRate = rate;
+            }
+          }}
+          onUploadFrame={async () => {
+            if (videoRef.current && onUploadFrame) {
+              const resp = await onUploadFrame(videoRef.current.currentTime);
+
+              if (resp && resp.status == 200) {
+                toast.success("Successfully submitted frame to Frigate+", {
+                  position: "top-center",
+                });
+              } else {
+                toast.success("Failed to submit frame to Frigate+", {
+                  position: "top-center",
+                });
+              }
+            }
+          }}
+          fullscreen={fullscreen}
+          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) {
-      if (detail) {
+      setSearchDetail(item);
-        setSearchDetail(item);
+    } else {
-      } else {
+      setSearchDetail(item);
-        onOpenSearch(item);
+    }
-      }
+  }, []);
-    },
-    [onOpenSearch],
-  );
 
   // confidence score - probably needs tweaking