mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-14 23:25:25 +03:00
Refactor search hovering to give information
This commit is contained in:
Nicolas Mowen
parent
e016bd6900
commit
7bc4c493d9
302
web/src/components/card/SearchThumbnail.tsx
Normal file
302
web/src/components/card/SearchThumbnail.tsx
Normal file
@ -0,0 +1,302 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useApiHost } from "@/api";
|
||||
import { getIconForLabel } from "@/utils/iconUtil";
|
||||
import TimeAgo from "../dynamic/TimeAgo";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { isIOS, isMobile, isSafari } from "react-device-detect";
|
||||
import Chip from "@/components/indicators/Chip";
|
||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||
import useImageLoaded from "@/hooks/use-image-loaded";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
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;
|
||||
scrollLock?: boolean;
|
||||
findSimilar: () => void;
|
||||
onClick: (searchResult: SearchResult, detail: boolean) => void;
|
||||
};
|
||||
|
||||
export default function SearchThumbnail({
|
||||
searchResult,
|
||||
scrollLock = false,
|
||||
findSimilar,
|
||||
onClick,
|
||||
}: SearchThumbnailProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
|
||||
|
||||
// interaction
|
||||
|
||||
const swipeHandlers = useSwipeable({
|
||||
onSwipedLeft: () => setDetails(false),
|
||||
onSwipedRight: () => setDetails(true),
|
||||
preventScrollOnSwipe: true,
|
||||
});
|
||||
|
||||
useContextMenu(imgRef, () => {
|
||||
onClick(searchResult, true);
|
||||
});
|
||||
|
||||
// Hover Details
|
||||
|
||||
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
|
||||
const [details, setDetails] = useState(false);
|
||||
const [tooltipHovering, setTooltipHovering] = useState(false);
|
||||
const showingMoreDetail = useMemo(
|
||||
() => details && !tooltipHovering,
|
||||
[details, tooltipHovering],
|
||||
);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleOnClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!showingMoreDetail) {
|
||||
onClick(searchResult, e.metaKey);
|
||||
}
|
||||
},
|
||||
[searchResult, showingMoreDetail, onClick],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isHovered && scrollLock) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isHovered && !tooltipHovering) {
|
||||
setHoverTimeout(
|
||||
setTimeout(() => {
|
||||
setDetails(true);
|
||||
setHoverTimeout(null);
|
||||
}, 500),
|
||||
);
|
||||
} else {
|
||||
if (hoverTimeout) {
|
||||
clearTimeout(hoverTimeout);
|
||||
}
|
||||
|
||||
setDetails(false);
|
||||
}
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isHovered, scrollLock, tooltipHovering]);
|
||||
|
||||
// date
|
||||
|
||||
const formattedDate = useFormattedTimestamp(
|
||||
searchResult.start_time,
|
||||
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
open={showingMoreDetail}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setDetails(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<div
|
||||
className="relative size-full cursor-pointer"
|
||||
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
|
||||
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
|
||||
onClick={handleOnClick}
|
||||
{...swipeHandlers}
|
||||
>
|
||||
<ImageLoadingIndicator
|
||||
className="absolute inset-0"
|
||||
imgLoaded={imgLoaded}
|
||||
/>
|
||||
<div className={`${imgLoaded ? "visible" : "invisible"}`}>
|
||||
<img
|
||||
ref={imgRef}
|
||||
className={cn(
|
||||
"size-full select-none opacity-100 transition-opacity",
|
||||
searchResult.search_source == "thumbnail" && "object-contain",
|
||||
)}
|
||||
style={
|
||||
isIOS
|
||||
? {
|
||||
WebkitUserSelect: "none",
|
||||
WebkitTouchCallout: "none",
|
||||
}
|
||||
: 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">
|
||||
<Tooltip>
|
||||
<div
|
||||
className="flex"
|
||||
onMouseEnter={() => setTooltipHovering(true)}
|
||||
onMouseLeave={() => setTooltipHovering(false)}
|
||||
>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="mx-3 pb-1 text-sm text-white">
|
||||
{
|
||||
<>
|
||||
<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`}
|
||||
onClick={() => onClick(searchResult, true)}
|
||||
>
|
||||
{getIconForLabel(
|
||||
searchResult.label,
|
||||
"size-3 text-white",
|
||||
)}
|
||||
</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
|
||||
}
|
||||
draggable={false}
|
||||
src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
|
||||
/>
|
||||
<Button variant="secondary" onClick={findSimilar}>
|
||||
Find Similar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,308 +0,0 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useApiHost } from "@/api";
|
||||
import { isCurrentHour } from "@/utils/dateUtil";
|
||||
import { getIconForLabel } from "@/utils/iconUtil";
|
||||
import TimeAgo from "../dynamic/TimeAgo";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { isIOS, isMobile, isSafari } from "react-device-detect";
|
||||
import Chip from "@/components/indicators/Chip";
|
||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||
import useImageLoaded from "@/hooks/use-image-loaded";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
import { capitalizeFirstLetter } from "@/utils/stringUtil";
|
||||
import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
|
||||
import { Preview } from "@/types/preview";
|
||||
import { SearchResult } from "@/types/search";
|
||||
import useContextMenu from "@/hooks/use-contextmenu";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SearchPlayerProps = {
|
||||
searchResult: SearchResult;
|
||||
allPreviews?: Preview[];
|
||||
scrollLock?: boolean;
|
||||
onClick: (searchResult: SearchResult, detail: boolean) => void;
|
||||
};
|
||||
|
||||
export default function SearchThumbnailPlayer({
|
||||
searchResult,
|
||||
allPreviews,
|
||||
scrollLock = false,
|
||||
onClick,
|
||||
}: SearchPlayerProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
|
||||
|
||||
// interaction
|
||||
|
||||
const [ignoreClick, setIgnoreClick] = useState(false);
|
||||
const handleOnClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!ignoreClick) {
|
||||
onClick(searchResult, e.metaKey);
|
||||
}
|
||||
},
|
||||
[ignoreClick, searchResult, onClick],
|
||||
);
|
||||
|
||||
const swipeHandlers = useSwipeable({
|
||||
onSwipedLeft: () => setPlayback(false),
|
||||
onSwipedRight: () => setPlayback(true),
|
||||
preventScrollOnSwipe: true,
|
||||
});
|
||||
|
||||
useContextMenu(imgRef, () => {
|
||||
onClick(searchResult, true);
|
||||
});
|
||||
|
||||
// playback
|
||||
|
||||
const relevantPreview = useMemo(() => {
|
||||
if (!allPreviews) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
let multiHour = false;
|
||||
const firstIndex = Object.values(allPreviews).findIndex((preview) => {
|
||||
if (
|
||||
preview.camera != searchResult.camera ||
|
||||
preview.end < searchResult.start_time
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ((searchResult.end_time ?? Date.now() / 1000) > preview.end) {
|
||||
multiHour = true;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
if (firstIndex == -1) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (!multiHour) {
|
||||
return allPreviews[firstIndex];
|
||||
}
|
||||
|
||||
const firstPrev = allPreviews[firstIndex];
|
||||
const firstDuration = firstPrev.end - searchResult.start_time;
|
||||
const secondDuration =
|
||||
(searchResult.end_time ?? Date.now() / 1000) - firstPrev.end;
|
||||
|
||||
if (firstDuration > secondDuration) {
|
||||
// the first preview is longer than the second, return the first
|
||||
return firstPrev;
|
||||
} else {
|
||||
// the second preview is longer, return the second if it exists
|
||||
if (firstIndex < allPreviews.length - 1) {
|
||||
return allPreviews.find(
|
||||
(preview, idx) =>
|
||||
idx > firstIndex && preview.camera == searchResult.camera,
|
||||
);
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
}, [allPreviews, searchResult]);
|
||||
|
||||
// Hover Playback
|
||||
|
||||
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
|
||||
const [playback, setPlayback] = useState(false);
|
||||
const [tooltipHovering, setTooltipHovering] = useState(false);
|
||||
const playingBack = useMemo(
|
||||
() => playback && !tooltipHovering,
|
||||
[playback, tooltipHovering],
|
||||
);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isHovered && scrollLock) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isHovered && !tooltipHovering) {
|
||||
setHoverTimeout(
|
||||
setTimeout(() => {
|
||||
setPlayback(true);
|
||||
setHoverTimeout(null);
|
||||
}, 500),
|
||||
);
|
||||
} else {
|
||||
if (hoverTimeout) {
|
||||
clearTimeout(hoverTimeout);
|
||||
}
|
||||
|
||||
setPlayback(false);
|
||||
}
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isHovered, scrollLock, tooltipHovering]);
|
||||
|
||||
// date
|
||||
|
||||
const formattedDate = useFormattedTimestamp(
|
||||
searchResult.start_time,
|
||||
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative size-full cursor-pointer"
|
||||
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
|
||||
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
|
||||
onClick={handleOnClick}
|
||||
{...swipeHandlers}
|
||||
>
|
||||
{playingBack && (
|
||||
<div className="absolute inset-0 animate-in fade-in">
|
||||
<PreviewContent
|
||||
searchResult={searchResult}
|
||||
relevantPreview={relevantPreview}
|
||||
setIgnoreClick={setIgnoreClick}
|
||||
isPlayingBack={setPlayback}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<ImageLoadingIndicator
|
||||
className="absolute inset-0"
|
||||
imgLoaded={imgLoaded}
|
||||
/>
|
||||
<div className={`${imgLoaded ? "visible" : "invisible"}`}>
|
||||
<img
|
||||
ref={imgRef}
|
||||
className={cn(
|
||||
"size-full select-none transition-opacity",
|
||||
playingBack ? "opacity-0" : "opacity-100",
|
||||
searchResult.search_source == "thumbnail" && "object-contain",
|
||||
)}
|
||||
style={
|
||||
isIOS
|
||||
? {
|
||||
WebkitUserSelect: "none",
|
||||
WebkitTouchCallout: "none",
|
||||
}
|
||||
: 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">
|
||||
<Tooltip>
|
||||
<div
|
||||
className="flex"
|
||||
onMouseEnter={() => setTooltipHovering(true)}
|
||||
onMouseLeave={() => setTooltipHovering(false)}
|
||||
>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="mx-3 pb-1 text-sm text-white">
|
||||
{
|
||||
<>
|
||||
<Chip
|
||||
className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} "bg-gray-500 z-0 bg-gradient-to-br from-gray-400 to-gray-500`}
|
||||
onClick={() => onClick(searchResult, true)}
|
||||
>
|
||||
{getIconForLabel(
|
||||
searchResult.label,
|
||||
"size-3 text-white",
|
||||
)}
|
||||
</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>
|
||||
{!playingBack && (
|
||||
<>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
type PreviewContentProps = {
|
||||
searchResult: SearchResult;
|
||||
relevantPreview: Preview | undefined;
|
||||
setIgnoreClick: (ignore: boolean) => void;
|
||||
isPlayingBack: (ended: boolean) => void;
|
||||
onTimeUpdate?: (time: number | undefined) => void;
|
||||
};
|
||||
function PreviewContent({
|
||||
searchResult,
|
||||
relevantPreview,
|
||||
setIgnoreClick,
|
||||
isPlayingBack,
|
||||
onTimeUpdate,
|
||||
}: PreviewContentProps) {
|
||||
// preview
|
||||
const now = useMemo(() => Date.now() / 1000, []);
|
||||
|
||||
if (relevantPreview) {
|
||||
return (
|
||||
<VideoPreview
|
||||
relevantPreview={relevantPreview}
|
||||
startTime={searchResult.start_time}
|
||||
endTime={searchResult.end_time}
|
||||
setIgnoreClick={setIgnoreClick}
|
||||
isPlayingBack={isPlayingBack}
|
||||
onTimeUpdate={onTimeUpdate}
|
||||
windowVisible={true}
|
||||
setReviewed={() => {}}
|
||||
/>
|
||||
);
|
||||
} else if (isCurrentHour(searchResult.start_time)) {
|
||||
return (
|
||||
<InProgressPreview
|
||||
camera={searchResult.camera}
|
||||
startTime={searchResult.start_time}
|
||||
endTime={searchResult.end_time}
|
||||
timeRange={{
|
||||
before: now,
|
||||
after: searchResult.start_time,
|
||||
}}
|
||||
setIgnoreClick={setIgnoreClick}
|
||||
isPlayingBack={isPlayingBack}
|
||||
onTimeUpdate={onTimeUpdate}
|
||||
windowVisible={true}
|
||||
setReviewed={() => {}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
import SearchThumbnail from "@/components/card/SearchThumbnail";
|
||||
import SearchFilterGroup from "@/components/filter/SearchFilterGroup";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import Chip from "@/components/indicators/Chip";
|
||||
import SearchDetailDialog from "@/components/overlay/detail/SearchDetailDialog";
|
||||
import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import {
|
||||
@ -184,10 +184,10 @@ export default function SearchView({
|
||||
"aspect-square size-full overflow-hidden rounded-lg",
|
||||
)}
|
||||
>
|
||||
<SearchThumbnailPlayer
|
||||
<SearchThumbnail
|
||||
searchResult={value}
|
||||
allPreviews={allPreviews}
|
||||
scrollLock={false}
|
||||
findSimilar={() => setSimilaritySearch(value)}
|
||||
onClick={onSelectSearch}
|
||||
/>
|
||||
{(searchTerm || similaritySearch) && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user