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

blakeblackshear · Jul 24, 2024 · 9974aba · 9974aba
1 parent db0553b
commit 9974aba
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}