Use thumbnails instead of review images for search (#12381)

blakeblackshear · Jul 24, 2024 · b207251 · b207251
1 parent c4ca05a
commit b207251
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git a/web/src/components/overlay/SearchDetailDialog.tsx b/web/src/components/overlay/SearchDetailDialog.tsx
@@ -126,11 +126,7 @@ export default function SearchDetailDialog({
                       : undefined
                   }
                   draggable={false}
-                  src={
-                    search.thumb_path
-                      ? `${apiHost}${search.thumb_path.replace("/media/frigate/", "")}`
-                      : `${apiHost}api/events/${search.id}/thumbnail.jpg`
-                  }
+                  src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
                 />
                 <Button
                   onClick={() => {

diff --git a/web/src/components/player/SearchThumbnailPlayer.tsx b/web/src/components/player/SearchThumbnailPlayer.tsx
@@ -19,6 +19,7 @@ import { Preview } from "@/types/preview";
 import { SearchResult } from "@/types/search";
 import { LuInfo } from "react-icons/lu";
 import useContextMenu from "@/hooks/use-contextmenu";
+import { cn } from "@/lib/utils";
 
 type SearchPlayerProps = {
   searchResult: SearchResult;
@@ -177,9 +178,11 @@ export default function SearchThumbnailPlayer({
       <div className={`${imgLoaded ? "visible" : "invisible"}`}>
         <img
           ref={imgRef}
-          className={`size-full select-none transition-opacity ${
-            playingBack ? "opacity-0" : "opacity-100"
-          }`}
+          className={cn(
+            "size-full select-none transition-opacity",
+            playingBack ? "opacity-0" : "opacity-100",
+            searchResult.search_source == "thumbnail" && "object-contain",
+          )}
           style={
             isIOS
               ? {
@@ -189,11 +192,7 @@ export default function SearchThumbnailPlayer({
               : undefined
           }
           draggable={false}
-          src={
-            searchResult.thumb_path
-              ? `${apiHost}${searchResult.thumb_path.replace("/media/frigate/", "")}`
-              : `${apiHost}api/events/${searchResult.id}/thumbnail.jpg`
-          }
+          src={`${apiHost}api/events/${searchResult.id}/thumbnail.jpg`}
           loading={isSafari ? "eager" : "lazy"}
           onLoad={() => {
             onImgLoad();

diff --git a/web/src/types/search.ts b/web/src/types/search.ts
@@ -1,3 +1,5 @@
+type SearchSource = "thumbnail" | "description";
+
 export type SearchResult = {
   id: string;
   camera: string;
@@ -9,6 +11,7 @@ export type SearchResult = {
   sub_label?: string;
   thumb_path?: string;
   zones: string[];
+  search_source: SearchSource;
 };
 
 export type SearchFilter = {

diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
@@ -4,6 +4,7 @@ import SearchDetailDialog from "@/components/overlay/SearchDetailDialog";
 import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
+import { cn } from "@/lib/utils";
 import { Preview } from "@/types/preview";
 import { SearchFilter, SearchResult } from "@/types/search";
 import { useCallback, useState } from "react";
@@ -94,7 +95,7 @@ export default function SearchView({
           <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
         )}
 
-        <div className="grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4">
+        <div className="flex w-full flex-wrap gap-2 px-1 md:mx-2 md:gap-4">
           {searchResults &&
             searchResults.map((value) => {
               const selected = false;
@@ -105,7 +106,11 @@ export default function SearchView({
                   data-start={value.start_time}
                   className="review-item relative rounded-lg"
                 >
-                  <div className="aspect-video overflow-hidden rounded-lg">
+                  <div
+                    className={cn(
+                      "aspect-square h-80 overflow-hidden rounded-lg",
+                    )}
+                  >
                     <SearchThumbnailPlayer
                       searchResult={value}
                       allPreviews={allPreviews}