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 SearchFilterGroup from "@/components/filter/SearchFilterGroup";
|
||||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||||
import Chip from "@/components/indicators/Chip";
|
import Chip from "@/components/indicators/Chip";
|
||||||
import SearchDetailDialog from "@/components/overlay/detail/SearchDetailDialog";
|
import SearchDetailDialog from "@/components/overlay/detail/SearchDetailDialog";
|
||||||
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 {
|
import {
|
||||||
@ -184,10 +184,10 @@ export default function SearchView({
|
|||||||
"aspect-square size-full overflow-hidden rounded-lg",
|
"aspect-square size-full overflow-hidden rounded-lg",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<SearchThumbnailPlayer
|
<SearchThumbnail
|
||||||
searchResult={value}
|
searchResult={value}
|
||||||
allPreviews={allPreviews}
|
|
||||||
scrollLock={false}
|
scrollLock={false}
|
||||||
|
findSimilar={() => setSimilaritySearch(value)}
|
||||||
onClick={onSelectSearch}
|
onClick={onSelectSearch}
|
||||||
/>
|
/>
|
||||||
{(searchTerm || similaritySearch) && (
|
{(searchTerm || similaritySearch) && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user