Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nicolas Mowen 2024-07-10 16:01:31 -06:00
parent dd7fd16b69
commit feb2c9fc62
4 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/overlay/SearchDetailDialog.tsx
View File

@ -126,11 +126,7 @@ export default function SearchDetailDialog({
: undefined : undefined
} }
draggable={false} draggable={false}
src={ src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
search.thumb_path
? `${apiHost}${search.thumb_path.replace("/media/frigate/", "")}`
: `${apiHost}api/events/${search.id}/thumbnail.jpg`
}
/> />
<Button <Button
onClick={() => { onClick={() => {

15
web/src/components/player/SearchThumbnailPlayer.tsx
View File

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

3
web/src/types/search.ts
View File

@ -1,3 +1,5 @@
type SearchSource = "thumbnail" | "description";
export type SearchResult = { export type SearchResult = {
id: string; id: string;
camera: string; camera: string;
@ -9,6 +11,7 @@ export type SearchResult = {
sub_label?: string; sub_label?: string;
thumb_path?: string; thumb_path?: string;
zones: string[]; zones: string[];
search_source: SearchSource;
}; };
export type SearchFilter = { export type SearchFilter = {

9
web/src/views/search/SearchView.tsx
View File

@ -4,6 +4,7 @@ import SearchDetailDialog from "@/components/overlay/SearchDetailDialog";
import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer"; import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { cn } from "@/lib/utils";
import { Preview } from "@/types/preview"; import { Preview } from "@/types/preview";
import { SearchFilter, SearchResult } from "@/types/search"; import { SearchFilter, SearchResult } from "@/types/search";
import { useCallback, useState } from "react"; 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" /> <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 &&
searchResults.map((value) => { searchResults.map((value) => {
const selected = false; const selected = false;
@ -105,7 +106,11 @@ export default function SearchView({
data-start={value.start_time} data-start={value.start_time}
className="review-item relative rounded-lg" 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 <SearchThumbnailPlayer
searchResult={value} searchResult={value}
allPreviews={allPreviews} allPreviews={allPreviews}