mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-05-30 01:16:42 +02:00
Refactor search details into Explore Page (#13665)
This commit is contained in:
Nicolas Mowen
GitHub
parent
e016bd6900
commit
3972642ba0
@ -251,6 +251,61 @@ def events():
|
||||
return jsonify(list(events))
|
||||
|
||||
|
||||
@EventBp.route("/events/explore")
|
||||
def events_explore():
|
||||
limit = request.args.get("limit", 10, type=int)
|
||||
|
||||
subquery = Event.select(
|
||||
Event.id,
|
||||
Event.camera,
|
||||
Event.label,
|
||||
Event.zones,
|
||||
Event.start_time,
|
||||
Event.end_time,
|
||||
Event.has_clip,
|
||||
Event.has_snapshot,
|
||||
Event.plus_id,
|
||||
Event.retain_indefinitely,
|
||||
Event.sub_label,
|
||||
Event.top_score,
|
||||
Event.false_positive,
|
||||
Event.box,
|
||||
Event.data,
|
||||
fn.rank()
|
||||
.over(partition_by=[Event.label], order_by=[Event.start_time.desc()])
|
||||
.alias("rank"),
|
||||
fn.COUNT(Event.id).over(partition_by=[Event.label]).alias("event_count"),
|
||||
).alias("subquery")
|
||||
|
||||
query = (
|
||||
Event.select(
|
||||
subquery.c.id,
|
||||
subquery.c.camera,
|
||||
subquery.c.label,
|
||||
subquery.c.zones,
|
||||
subquery.c.start_time,
|
||||
subquery.c.end_time,
|
||||
subquery.c.has_clip,
|
||||
subquery.c.has_snapshot,
|
||||
subquery.c.plus_id,
|
||||
subquery.c.retain_indefinitely,
|
||||
subquery.c.sub_label,
|
||||
subquery.c.top_score,
|
||||
subquery.c.false_positive,
|
||||
subquery.c.box,
|
||||
subquery.c.data,
|
||||
subquery.c.event_count,
|
||||
)
|
||||
.from_(subquery)
|
||||
.where(subquery.c.rank <= limit)
|
||||
.order_by(subquery.c.event_count.desc(), subquery.c.start_time.desc())
|
||||
.dicts()
|
||||
)
|
||||
|
||||
events = query.iterator()
|
||||
return jsonify(list(events))
|
||||
|
||||
|
||||
@EventBp.route("/event_ids")
|
||||
def event_ids():
|
||||
idString = request.args.get("ids")
|
||||
@ -317,7 +372,10 @@ def events_search():
|
||||
Event.zones,
|
||||
Event.start_time,
|
||||
Event.end_time,
|
||||
Event.has_clip,
|
||||
Event.has_snapshot,
|
||||
Event.data,
|
||||
Event.plus_id,
|
||||
ReviewSegment.thumb_path,
|
||||
]
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ import { isPWA } from "./utils/isPWA";
|
||||
|
||||
const Live = lazy(() => import("@/pages/Live"));
|
||||
const Events = lazy(() => import("@/pages/Events"));
|
||||
const Search = lazy(() => import("@/pages/Search"));
|
||||
const Explore = lazy(() => import("@/pages/Explore"));
|
||||
const Exports = lazy(() => import("@/pages/Exports"));
|
||||
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
|
||||
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
|
||||
@ -45,7 +45,7 @@ function App() {
|
||||
<Route index element={<Live />} />
|
||||
<Route path="/events" element={<Redirect to="/review" />} />
|
||||
<Route path="/review" element={<Events />} />
|
||||
<Route path="/search" element={<Search />} />
|
||||
<Route path="/explore" element={<Explore />} />
|
||||
<Route path="/export" element={<Exports />} />
|
||||
<Route path="/plus" element={<SubmitPlus />} />
|
||||
<Route path="/system" element={<System />} />
|
||||
|
||||
185
web/src/components/card/SearchThumbnail.tsx
Normal file
185
web/src/components/card/SearchThumbnail.tsx
Normal file
@ -0,0 +1,185 @@
|
||||
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";
|
||||
|
||||
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, findSimilar);
|
||||
|
||||
// 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 (
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -110,7 +110,7 @@ export function CalendarRangeFilterButton({
|
||||
className={`${range == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${range == undefined ? "text-primary" : "text-selected-foreground"}`}
|
||||
className={`${range == undefined ? "text-primary" : "text-selected-foreground"}`}
|
||||
>
|
||||
{range == undefined ? defaultText : selectedDate}
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Button } from "../ui/button";
|
||||
import { CameraGroupConfig } from "@/types/frigateConfig";
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@ -17,12 +17,14 @@ type CameraFilterButtonProps = {
|
||||
allCameras: string[];
|
||||
groups: [string, CameraGroupConfig][];
|
||||
selectedCameras: string[] | undefined;
|
||||
hideText?: boolean;
|
||||
updateCameraFilter: (cameras: string[] | undefined) => void;
|
||||
};
|
||||
export function CamerasFilterButton({
|
||||
allCameras,
|
||||
groups,
|
||||
selectedCameras,
|
||||
hideText = isMobile,
|
||||
updateCameraFilter,
|
||||
}: CameraFilterButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
@ -30,6 +32,18 @@ export function CamerasFilterButton({
|
||||
selectedCameras,
|
||||
);
|
||||
|
||||
const buttonText = useMemo(() => {
|
||||
if (isMobile) {
|
||||
return "Cameras";
|
||||
}
|
||||
|
||||
if (!selectedCameras || selectedCameras.length == 0) {
|
||||
return "All Cameras";
|
||||
}
|
||||
|
||||
return `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`;
|
||||
}, [selectedCameras]);
|
||||
|
||||
const trigger = (
|
||||
<Button
|
||||
className="flex items-center gap-2 capitalize"
|
||||
@ -40,11 +54,9 @@ export function CamerasFilterButton({
|
||||
className={`${(selectedCameras?.length ?? 0) >= 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
className={`${hideText ? "hidden" : ""} ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
>
|
||||
{selectedCameras == undefined
|
||||
? "All Cameras"
|
||||
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
|
||||
{buttonText}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
|
||||
@ -5,7 +5,6 @@ import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { DropdownMenuSeparator } from "../ui/dropdown-menu";
|
||||
import { getEndOfDayTimestamp } from "@/utils/dateUtil";
|
||||
import { FaFilter } from "react-icons/fa";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
|
||||
import { Switch } from "../ui/switch";
|
||||
@ -19,6 +18,8 @@ import { DateRange } from "react-day-picker";
|
||||
import { cn } from "@/lib/utils";
|
||||
import SubFilterIcon from "../icons/SubFilterIcon";
|
||||
import { FaLocationDot } from "react-icons/fa6";
|
||||
import { MdLabel } from "react-icons/md";
|
||||
import SearchSourceIcon from "../icons/SearchSourceIcon";
|
||||
|
||||
const SEARCH_FILTERS = [
|
||||
"cameras",
|
||||
@ -154,12 +155,18 @@ export default function SearchFilterGroup({
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cn("flex justify-center gap-2", className)}>
|
||||
<div
|
||||
className={cn(
|
||||
"scrollbar-container flex justify-center gap-2 overflow-x-auto",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{filters.includes("cameras") && (
|
||||
<CamerasFilterButton
|
||||
allCameras={filterValues.cameras}
|
||||
groups={groups}
|
||||
selectedCameras={filter?.cameras}
|
||||
hideText={false}
|
||||
updateCameraFilter={(newCameras) => {
|
||||
onUpdateFilter({ ...filter, cameras: newCameras });
|
||||
}}
|
||||
@ -175,19 +182,10 @@ export default function SearchFilterGroup({
|
||||
to: new Date(filter.before * 1000),
|
||||
}
|
||||
}
|
||||
defaultText="All Dates"
|
||||
defaultText={isMobile ? "Dates" : "All Dates"}
|
||||
updateSelectedRange={onUpdateSelectedRange}
|
||||
/>
|
||||
)}
|
||||
{filters.includes("general") && (
|
||||
<GeneralFilterButton
|
||||
allLabels={filterValues.labels}
|
||||
selectedLabels={filter?.labels}
|
||||
updateLabelFilter={(newLabels) => {
|
||||
onUpdateFilter({ ...filter, labels: newLabels });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{filters.includes("zone") && allZones.length > 0 && (
|
||||
<ZoneFilterButton
|
||||
allZones={filterValues.zones}
|
||||
@ -197,6 +195,15 @@ export default function SearchFilterGroup({
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{filters.includes("general") && (
|
||||
<GeneralFilterButton
|
||||
allLabels={filterValues.labels}
|
||||
selectedLabels={filter?.labels}
|
||||
updateLabelFilter={(newLabels) => {
|
||||
onUpdateFilter({ ...filter, labels: newLabels });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{filters.includes("sub") && (
|
||||
<SubFilterButton
|
||||
allSubLabels={allSubLabels}
|
||||
@ -235,19 +242,35 @@ function GeneralFilterButton({
|
||||
selectedLabels,
|
||||
);
|
||||
|
||||
const buttonText = useMemo(() => {
|
||||
if (isMobile) {
|
||||
return "Labels";
|
||||
}
|
||||
|
||||
if (!selectedLabels || selectedLabels.length == 0) {
|
||||
return "All Labels";
|
||||
}
|
||||
|
||||
if (selectedLabels.length == 1) {
|
||||
return selectedLabels[0];
|
||||
}
|
||||
|
||||
return `${selectedLabels.length} Labels`;
|
||||
}, [selectedLabels]);
|
||||
|
||||
const trigger = (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={selectedLabels?.length ? "select" : "default"}
|
||||
className="flex items-center gap-2 capitalize"
|
||||
>
|
||||
<FaFilter
|
||||
<MdLabel
|
||||
className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
className={`${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
>
|
||||
Filter
|
||||
{buttonText}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
@ -405,6 +428,22 @@ function ZoneFilterButton({
|
||||
selectedZones,
|
||||
);
|
||||
|
||||
const buttonText = useMemo(() => {
|
||||
if (isMobile) {
|
||||
return "Zones";
|
||||
}
|
||||
|
||||
if (!selectedZones || selectedZones.length == 0) {
|
||||
return "All Zones";
|
||||
}
|
||||
|
||||
if (selectedZones.length == 1) {
|
||||
return selectedZones[0];
|
||||
}
|
||||
|
||||
return `${selectedZones.length} Zones`;
|
||||
}, [selectedZones]);
|
||||
|
||||
const trigger = (
|
||||
<Button
|
||||
size="sm"
|
||||
@ -415,11 +454,9 @@ function ZoneFilterButton({
|
||||
className={`${selectedZones?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${selectedZones?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
className={`${selectedZones?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
>
|
||||
{selectedZones?.length
|
||||
? `${selectedZones.length} Zone${selectedZones.length > 1 ? "s" : ""}`
|
||||
: "All Zones"}
|
||||
{buttonText}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
@ -585,6 +622,22 @@ function SubFilterButton({
|
||||
string[] | undefined
|
||||
>(selectedSubLabels);
|
||||
|
||||
const buttonText = useMemo(() => {
|
||||
if (isMobile) {
|
||||
return "Sub Labels";
|
||||
}
|
||||
|
||||
if (!selectedSubLabels || selectedSubLabels.length == 0) {
|
||||
return "All Sub Labels";
|
||||
}
|
||||
|
||||
if (selectedSubLabels.length == 1) {
|
||||
return selectedSubLabels[0];
|
||||
}
|
||||
|
||||
return `${selectedSubLabels.length} Sub Labels`;
|
||||
}, [selectedSubLabels]);
|
||||
|
||||
const trigger = (
|
||||
<Button
|
||||
size="sm"
|
||||
@ -595,11 +648,9 @@ function SubFilterButton({
|
||||
className={`${selectedSubLabels?.length || selectedSubLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${selectedSubLabels?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
className={`${selectedSubLabels?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
>
|
||||
{selectedSubLabels?.length
|
||||
? `${selectedSubLabels.length} Sub Labels`
|
||||
: "All Sub Labels"}
|
||||
{buttonText}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
@ -745,17 +796,34 @@ export function SubFilterContent({
|
||||
}
|
||||
|
||||
type SearchTypeButtonProps = {
|
||||
selectedSearchSources: SearchSource[];
|
||||
updateSearchSourceFilter: (sources: SearchSource[]) => void;
|
||||
selectedSearchSources: SearchSource[] | undefined;
|
||||
updateSearchSourceFilter: (sources: SearchSource[] | undefined) => void;
|
||||
};
|
||||
function SearchTypeButton({
|
||||
selectedSearchSources,
|
||||
updateSearchSourceFilter,
|
||||
}: SearchTypeButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [currentSearchSources, setCurrentSearchSources] = useState<
|
||||
SearchSource[]
|
||||
>(selectedSearchSources);
|
||||
|
||||
const buttonText = useMemo(() => {
|
||||
if (isMobile) {
|
||||
return "Sources";
|
||||
}
|
||||
|
||||
if (
|
||||
!selectedSearchSources ||
|
||||
selectedSearchSources.length == 0 ||
|
||||
selectedSearchSources.length == 2
|
||||
) {
|
||||
return "All Search Sources";
|
||||
}
|
||||
|
||||
if (selectedSearchSources.length == 1) {
|
||||
return selectedSearchSources[0];
|
||||
}
|
||||
|
||||
return `${selectedSearchSources.length} Search Sources`;
|
||||
}, [selectedSearchSources]);
|
||||
|
||||
const trigger = (
|
||||
<Button
|
||||
@ -763,23 +831,19 @@ function SearchTypeButton({
|
||||
variant={selectedSearchSources?.length != 2 ? "select" : "default"}
|
||||
className="flex items-center gap-2 capitalize"
|
||||
>
|
||||
<FaFilter
|
||||
<SearchSourceIcon
|
||||
className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-primary"}`}
|
||||
className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-primary"}`}
|
||||
>
|
||||
{selectedSearchSources?.length != 2
|
||||
? `${selectedSearchSources[0]}`
|
||||
: "All Search Sources"}
|
||||
{buttonText}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
const content = (
|
||||
<SearchTypeContent
|
||||
selectedSearchSources={selectedSearchSources}
|
||||
currentSearchSources={currentSearchSources}
|
||||
setCurrentSearchSources={setCurrentSearchSources}
|
||||
updateSearchSourceFilter={updateSearchSourceFilter}
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
@ -790,10 +854,6 @@ function SearchTypeButton({
|
||||
<Drawer
|
||||
open={open}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setCurrentSearchSources(selectedSearchSources);
|
||||
}
|
||||
|
||||
setOpen(open);
|
||||
}}
|
||||
>
|
||||
@ -809,10 +869,6 @@ function SearchTypeButton({
|
||||
<Popover
|
||||
open={open}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setCurrentSearchSources(selectedSearchSources);
|
||||
}
|
||||
|
||||
setOpen(open);
|
||||
}}
|
||||
>
|
||||
@ -823,26 +879,26 @@ function SearchTypeButton({
|
||||
}
|
||||
|
||||
type SearchTypeContentProps = {
|
||||
selectedSearchSources: SearchSource[];
|
||||
currentSearchSources: SearchSource[];
|
||||
setCurrentSearchSources: (sources: SearchSource[]) => void;
|
||||
updateSearchSourceFilter: (sources: SearchSource[]) => void;
|
||||
selectedSearchSources: SearchSource[] | undefined;
|
||||
updateSearchSourceFilter: (sources: SearchSource[] | undefined) => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
export function SearchTypeContent({
|
||||
selectedSearchSources,
|
||||
currentSearchSources,
|
||||
setCurrentSearchSources,
|
||||
updateSearchSourceFilter,
|
||||
onClose,
|
||||
}: SearchTypeContentProps) {
|
||||
const [currentSearchSources, setCurrentSearchSources] = useState<
|
||||
SearchSource[] | undefined
|
||||
>(selectedSearchSources);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
|
||||
<div className="my-2.5 flex flex-col gap-2.5">
|
||||
<FilterSwitch
|
||||
label="Thumbnail Image"
|
||||
isChecked={currentSearchSources?.includes("thumbnail") ?? false}
|
||||
isChecked={selectedSearchSources?.includes("thumbnail") ?? false}
|
||||
onCheckedChange={(isChecked) => {
|
||||
const updatedSources = currentSearchSources
|
||||
? [...currentSearchSources]
|
||||
@ -897,10 +953,8 @@ export function SearchTypeContent({
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCurrentSearchSources([
|
||||
"thumbnail",
|
||||
"description",
|
||||
] as SearchSource[]);
|
||||
updateSearchSourceFilter(undefined);
|
||||
setCurrentSearchSources(["thumbnail", "description"]);
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
|
||||
26
web/src/components/icons/SearchSourceIcon.tsx
Normal file
26
web/src/components/icons/SearchSourceIcon.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { forwardRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { FaImage } from "react-icons/fa";
|
||||
import { LuText } from "react-icons/lu";
|
||||
|
||||
type SearchSourceIconProps = {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const SearchSourceIcon = forwardRef<HTMLDivElement, SearchSourceIconProps>(
|
||||
({ className, onClick }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("relative flex items-center", className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<LuText className="absolute size-3 translate-x-3 translate-y-3/4" />
|
||||
<FaImage className="size-5" />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default SearchSourceIcon;
|
||||
@ -1,6 +1,7 @@
|
||||
import { forwardRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { FaCog, FaFilter } from "react-icons/fa";
|
||||
import { FaCog } from "react-icons/fa";
|
||||
import { MdLabelOutline } from "react-icons/md";
|
||||
|
||||
type SubFilterIconProps = {
|
||||
className?: string;
|
||||
@ -15,8 +16,8 @@ const SubFilterIcon = forwardRef<HTMLDivElement, SubFilterIconProps>(
|
||||
className={cn("relative flex items-center", className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<FaFilter className="size-full" />
|
||||
<FaCog className="absolute size-3 translate-x-3 translate-y-3/4" />
|
||||
<FaCog className="absolute size-3 translate-x-3 translate-y-[62%]" />
|
||||
<MdLabelOutline className="size-5" />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -338,12 +338,7 @@ function EventItem({
|
||||
<Chip
|
||||
className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
|
||||
onClick={() => {
|
||||
const similaritySearchParams = new URLSearchParams({
|
||||
search_type: "similarity",
|
||||
event_id: event.id,
|
||||
}).toString();
|
||||
|
||||
navigate(`/search?${similaritySearchParams}`);
|
||||
navigate(`/explore?similarity_search_id=${event.id}`);
|
||||
}}
|
||||
>
|
||||
<FaImages className="size-4 text-white" />
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
import { isDesktop, isIOS } from "react-device-detect";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "../../ui/sheet";
|
||||
import { isDesktop, isIOS, isMobile } from "react-device-detect";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
@ -20,10 +13,28 @@ import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||
import { getIconForLabel } from "@/utils/iconUtil";
|
||||
import { useApiHost } from "@/api";
|
||||
import { Button } from "../../ui/button";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { Textarea } from "../../ui/textarea";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import useOptimisticState from "@/hooks/use-optimistic-state";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
|
||||
import { Event } from "@/types/event";
|
||||
import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
|
||||
import { baseUrl } from "@/api/baseUrl";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
|
||||
type SearchTab = (typeof SEARCH_TABS)[number];
|
||||
|
||||
type SearchDetailDialogProps = {
|
||||
search?: SearchResult;
|
||||
@ -39,6 +50,130 @@ export default function SearchDetailDialog({
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
|
||||
// tabs
|
||||
|
||||
const [page, setPage] = useState<SearchTab>("details");
|
||||
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
|
||||
|
||||
const searchTabs = useMemo(() => {
|
||||
if (!config || !search) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const views = [...SEARCH_TABS];
|
||||
|
||||
if (!config.plus.enabled || !search.has_snapshot) {
|
||||
const index = views.indexOf("Frigate+");
|
||||
views.splice(index, 1);
|
||||
}
|
||||
|
||||
// TODO implement
|
||||
//if (!config.semantic_search.enabled) {
|
||||
// const index = views.indexOf("similar-calendar");
|
||||
// views.splice(index, 1);
|
||||
// }
|
||||
|
||||
return views;
|
||||
}, [config, search]);
|
||||
|
||||
if (!search) {
|
||||
return;
|
||||
}
|
||||
|
||||
// content
|
||||
|
||||
const Overlay = isDesktop ? Dialog : Drawer;
|
||||
const Content = isDesktop ? DialogContent : DrawerContent;
|
||||
const Header = isDesktop ? DialogHeader : DrawerHeader;
|
||||
const Title = isDesktop ? DialogTitle : DrawerTitle;
|
||||
const Description = isDesktop ? DialogDescription : DrawerDescription;
|
||||
|
||||
return (
|
||||
<Overlay
|
||||
open={search != undefined}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setSearch(undefined);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
className={
|
||||
isDesktop
|
||||
? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"
|
||||
: "max-h-[75dvh] overflow-hidden px-2 pb-4"
|
||||
}
|
||||
>
|
||||
<Header className="sr-only">
|
||||
<Title>Tracked Object Details</Title>
|
||||
<Description>Tracked object details</Description>
|
||||
</Header>
|
||||
<ScrollArea
|
||||
className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<ToggleGroup
|
||||
className="*:rounded-md *:px-3 *:py-4"
|
||||
type="single"
|
||||
size="sm"
|
||||
value={pageToggle}
|
||||
onValueChange={(value: SearchTab) => {
|
||||
if (value) {
|
||||
setPageToggle(value);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{Object.values(searchTabs).map((item) => (
|
||||
<ToggleGroupItem
|
||||
key={item}
|
||||
className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "details" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
|
||||
value={item}
|
||||
data-nav-item={item}
|
||||
aria-label={`Select ${item}`}
|
||||
>
|
||||
<div className="capitalize">{item}</div>
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
</ToggleGroup>
|
||||
<ScrollBar orientation="horizontal" className="h-0" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{page == "details" && (
|
||||
<ObjectDetailsTab
|
||||
search={search}
|
||||
config={config}
|
||||
setSearch={setSearch}
|
||||
setSimilarity={setSimilarity}
|
||||
/>
|
||||
)}
|
||||
{page == "Frigate+" && (
|
||||
<FrigatePlusDialog
|
||||
upload={search as unknown as Event}
|
||||
dialog={false}
|
||||
onClose={() => {}}
|
||||
onEventUploaded={() => {
|
||||
search.plus_id = "new_upload";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{page == "video" && <VideoTab search={search} />}
|
||||
</Content>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
|
||||
type ObjectDetailsTabProps = {
|
||||
search: SearchResult;
|
||||
config?: FrigateConfig;
|
||||
setSearch: (search: SearchResult | undefined) => void;
|
||||
setSimilarity?: () => void;
|
||||
};
|
||||
function ObjectDetailsTab({
|
||||
search,
|
||||
config,
|
||||
setSearch,
|
||||
setSimilarity,
|
||||
}: ObjectDetailsTabProps) {
|
||||
const apiHost = useApiHost();
|
||||
|
||||
// data
|
||||
@ -77,8 +212,6 @@ export default function SearchDetailDialog({
|
||||
}
|
||||
}, [search]);
|
||||
|
||||
// api
|
||||
|
||||
const updateDescription = useCallback(() => {
|
||||
if (!search) {
|
||||
return;
|
||||
@ -101,105 +234,97 @@ export default function SearchDetailDialog({
|
||||
});
|
||||
}, [desc, search]);
|
||||
|
||||
// content
|
||||
|
||||
const Overlay = isDesktop ? Sheet : Drawer;
|
||||
const Content = isDesktop ? SheetContent : DrawerContent;
|
||||
const Header = isDesktop ? SheetHeader : DrawerHeader;
|
||||
const Title = isDesktop ? SheetTitle : DrawerTitle;
|
||||
const Description = isDesktop ? SheetDescription : DrawerDescription;
|
||||
|
||||
return (
|
||||
<Overlay
|
||||
open={search != undefined}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setSearch(undefined);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
className={
|
||||
isDesktop ? "sm:max-w-xl" : "max-h-[75dvh] overflow-hidden p-2 pb-4"
|
||||
}
|
||||
>
|
||||
<Header className="sr-only">
|
||||
<Title>Tracked Object Details</Title>
|
||||
<Description>Tracked object details</Description>
|
||||
</Header>
|
||||
{search && (
|
||||
<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
|
||||
onClick={() => {
|
||||
setSearch(undefined);
|
||||
|
||||
if (setSimilarity) {
|
||||
setSimilarity();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Find Similar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-sm text-primary/40">Description</div>
|
||||
<Textarea
|
||||
className="md:h-64"
|
||||
placeholder="Description of the event"
|
||||
value={desc}
|
||||
onChange={(e) => setDesc(e.target.value)}
|
||||
/>
|
||||
<div className="flex w-full flex-row justify-end">
|
||||
<Button variant="select" onClick={updateDescription}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
<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>
|
||||
)}
|
||||
</Content>
|
||||
</Overlay>
|
||||
<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
|
||||
onClick={() => {
|
||||
setSearch(undefined);
|
||||
|
||||
if (setSimilarity) {
|
||||
setSimilarity();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Find Similar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-sm text-primary/40">Description</div>
|
||||
<Textarea
|
||||
className="md:h-64"
|
||||
placeholder="Description of the event"
|
||||
value={desc}
|
||||
onChange={(e) => setDesc(e.target.value)}
|
||||
/>
|
||||
<div className="flex w-full flex-row justify-end">
|
||||
<Button variant="select" onClick={updateDescription}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type VideoTabProps = {
|
||||
search: SearchResult;
|
||||
};
|
||||
function VideoTab({ search }: VideoTabProps) {
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||
|
||||
const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
|
||||
|
||||
return (
|
||||
<HlsVideoPlayer
|
||||
videoRef={videoRef}
|
||||
currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
|
||||
hotKeys
|
||||
visible
|
||||
frigateControls={false}
|
||||
fullscreen={false}
|
||||
supportsFullscreen={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { baseUrl } from "@/api/baseUrl";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@ -11,17 +12,21 @@ import {
|
||||
import { Event } from "@/types/event";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import axios from "axios";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
|
||||
import useSWR from "swr";
|
||||
|
||||
type SubmissionState = "reviewing" | "uploading" | "submitted";
|
||||
|
||||
type FrigatePlusDialogProps = {
|
||||
upload?: Event;
|
||||
dialog?: boolean;
|
||||
onClose: () => void;
|
||||
onEventUploaded: () => void;
|
||||
};
|
||||
export function FrigatePlusDialog({
|
||||
upload,
|
||||
dialog = true,
|
||||
onClose,
|
||||
onEventUploaded,
|
||||
}: FrigatePlusDialogProps) {
|
||||
@ -49,6 +54,10 @@ export function FrigatePlusDialog({
|
||||
|
||||
// upload
|
||||
|
||||
const [state, setState] = useState<SubmissionState>(
|
||||
upload?.plus_id ? "submitted" : "reviewing",
|
||||
);
|
||||
|
||||
const onSubmitToPlus = useCallback(
|
||||
async (falsePositive: boolean) => {
|
||||
if (!upload) {
|
||||
@ -61,63 +70,84 @@ export function FrigatePlusDialog({
|
||||
include_annotation: 1,
|
||||
});
|
||||
|
||||
setState("submitted");
|
||||
onEventUploaded();
|
||||
onClose();
|
||||
},
|
||||
[upload, onClose, onEventUploaded],
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={upload != undefined}
|
||||
onOpenChange={(open) => (!open ? onClose() : null)}
|
||||
>
|
||||
<DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl">
|
||||
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Submit To Frigate+</DialogTitle>
|
||||
<DialogDescription>
|
||||
Objects in locations you want to avoid are not false positives.
|
||||
Submitting them as false positives will confuse the model.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<TransformComponent
|
||||
wrapperStyle={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
contentStyle={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{upload?.id && (
|
||||
<img
|
||||
className={`w-full ${grow} bg-black`}
|
||||
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
|
||||
alt={`${upload?.label}`}
|
||||
/>
|
||||
)}
|
||||
</TransformComponent>
|
||||
<DialogFooter>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
const content = (
|
||||
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Submit To Frigate+</DialogTitle>
|
||||
<DialogDescription>
|
||||
Objects in locations you want to avoid are not false positives.
|
||||
Submitting them as false positives will confuse the model.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<TransformComponent
|
||||
wrapperStyle={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
contentStyle={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{upload?.id && (
|
||||
<img
|
||||
className={`w-full ${grow} bg-black`}
|
||||
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
|
||||
alt={`${upload?.label}`}
|
||||
/>
|
||||
)}
|
||||
</TransformComponent>
|
||||
|
||||
<DialogFooter>
|
||||
{state == "reviewing" && (
|
||||
<>
|
||||
{dialog && <Button onClick={onClose}>Cancel</Button>}
|
||||
<Button
|
||||
className="bg-success"
|
||||
onClick={() => onSubmitToPlus(false)}
|
||||
onClick={() => {
|
||||
setState("uploading");
|
||||
onSubmitToPlus(false);
|
||||
}}
|
||||
>
|
||||
This is a {upload?.label}
|
||||
</Button>
|
||||
<Button
|
||||
className="text-white"
|
||||
variant="destructive"
|
||||
onClick={() => onSubmitToPlus(true)}
|
||||
onClick={() => {
|
||||
setState("uploading");
|
||||
onSubmitToPlus(true);
|
||||
}}
|
||||
>
|
||||
This is not a {upload?.label}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</TransformWrapper>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)}
|
||||
{state == "uploading" && <ActivityIndicator />}
|
||||
</DialogFooter>
|
||||
</TransformWrapper>
|
||||
);
|
||||
|
||||
if (dialog) {
|
||||
return (
|
||||
<Dialog
|
||||
open={upload != undefined}
|
||||
onOpenChange={(open) => (!open ? onClose() : null)}
|
||||
>
|
||||
<DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl">
|
||||
{content}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
@ -35,6 +35,7 @@ type HlsVideoPlayerProps = {
|
||||
hotKeys: boolean;
|
||||
supportsFullscreen: boolean;
|
||||
fullscreen: boolean;
|
||||
frigateControls?: boolean;
|
||||
onClipEnded?: () => void;
|
||||
onPlayerLoaded?: () => void;
|
||||
onTimeUpdate?: (time: number) => void;
|
||||
@ -52,6 +53,7 @@ export default function HlsVideoPlayer({
|
||||
hotKeys,
|
||||
supportsFullscreen,
|
||||
fullscreen,
|
||||
frigateControls = true,
|
||||
onClipEnded,
|
||||
onPlayerLoaded,
|
||||
onTimeUpdate,
|
||||
@ -167,73 +169,75 @@ export default function HlsVideoPlayer({
|
||||
|
||||
return (
|
||||
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
|
||||
<VideoControls
|
||||
className={cn(
|
||||
"absolute left-1/2 z-50 -translate-x-1/2",
|
||||
tallCamera ? "bottom-12" : "bottom-5",
|
||||
)}
|
||||
video={videoRef.current}
|
||||
isPlaying={isPlaying}
|
||||
show={visible && (controls || controlsOpen)}
|
||||
muted={muted}
|
||||
volume={volume}
|
||||
features={{
|
||||
volume: true,
|
||||
seek: true,
|
||||
playbackRate: true,
|
||||
plusUpload: config?.plus?.enabled == true,
|
||||
fullscreen: supportsFullscreen,
|
||||
}}
|
||||
setControlsOpen={setControlsOpen}
|
||||
setMuted={(muted) => setMuted(muted, true)}
|
||||
playbackRate={playbackRate ?? 1}
|
||||
hotKeys={hotKeys}
|
||||
onPlayPause={(play) => {
|
||||
if (!videoRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (play) {
|
||||
videoRef.current.play();
|
||||
} else {
|
||||
videoRef.current.pause();
|
||||
}
|
||||
}}
|
||||
onSeek={(diff) => {
|
||||
const currentTime = videoRef.current?.currentTime;
|
||||
|
||||
if (!videoRef.current || !currentTime) {
|
||||
return;
|
||||
}
|
||||
|
||||
videoRef.current.currentTime = Math.max(0, currentTime + diff);
|
||||
}}
|
||||
onSetPlaybackRate={(rate) => {
|
||||
setPlaybackRate(rate, true);
|
||||
|
||||
if (videoRef.current) {
|
||||
videoRef.current.playbackRate = rate;
|
||||
}
|
||||
}}
|
||||
onUploadFrame={async () => {
|
||||
if (videoRef.current && onUploadFrame) {
|
||||
const resp = await onUploadFrame(videoRef.current.currentTime);
|
||||
|
||||
if (resp && resp.status == 200) {
|
||||
toast.success("Successfully submitted frame to Frigate+", {
|
||||
position: "top-center",
|
||||
});
|
||||
} else {
|
||||
toast.success("Failed to submit frame to Frigate+", {
|
||||
position: "top-center",
|
||||
});
|
||||
{frigateControls && (
|
||||
<VideoControls
|
||||
className={cn(
|
||||
"absolute left-1/2 z-50 -translate-x-1/2",
|
||||
tallCamera ? "bottom-12" : "bottom-5",
|
||||
)}
|
||||
video={videoRef.current}
|
||||
isPlaying={isPlaying}
|
||||
show={visible && (controls || controlsOpen)}
|
||||
muted={muted}
|
||||
volume={volume}
|
||||
features={{
|
||||
volume: true,
|
||||
seek: true,
|
||||
playbackRate: true,
|
||||
plusUpload: config?.plus?.enabled == true,
|
||||
fullscreen: supportsFullscreen,
|
||||
}}
|
||||
setControlsOpen={setControlsOpen}
|
||||
setMuted={(muted) => setMuted(muted, true)}
|
||||
playbackRate={playbackRate ?? 1}
|
||||
hotKeys={hotKeys}
|
||||
onPlayPause={(play) => {
|
||||
if (!videoRef.current) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}}
|
||||
fullscreen={fullscreen}
|
||||
toggleFullscreen={toggleFullscreen}
|
||||
containerRef={containerRef}
|
||||
/>
|
||||
|
||||
if (play) {
|
||||
videoRef.current.play();
|
||||
} else {
|
||||
videoRef.current.pause();
|
||||
}
|
||||
}}
|
||||
onSeek={(diff) => {
|
||||
const currentTime = videoRef.current?.currentTime;
|
||||
|
||||
if (!videoRef.current || !currentTime) {
|
||||
return;
|
||||
}
|
||||
|
||||
videoRef.current.currentTime = Math.max(0, currentTime + diff);
|
||||
}}
|
||||
onSetPlaybackRate={(rate) => {
|
||||
setPlaybackRate(rate, true);
|
||||
|
||||
if (videoRef.current) {
|
||||
videoRef.current.playbackRate = rate;
|
||||
}
|
||||
}}
|
||||
onUploadFrame={async () => {
|
||||
if (videoRef.current && onUploadFrame) {
|
||||
const resp = await onUploadFrame(videoRef.current.currentTime);
|
||||
|
||||
if (resp && resp.status == 200) {
|
||||
toast.success("Successfully submitted frame to Frigate+", {
|
||||
position: "top-center",
|
||||
});
|
||||
} else {
|
||||
toast.success("Failed to submit frame to Frigate+", {
|
||||
position: "top-center",
|
||||
});
|
||||
}
|
||||
}
|
||||
}}
|
||||
fullscreen={fullscreen}
|
||||
toggleFullscreen={toggleFullscreen}
|
||||
containerRef={containerRef}
|
||||
/>
|
||||
)}
|
||||
<TransformComponent
|
||||
wrapperStyle={{
|
||||
display: visible ? undefined : "none",
|
||||
@ -253,7 +257,7 @@ export default function HlsVideoPlayer({
|
||||
className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
|
||||
preload="auto"
|
||||
autoPlay
|
||||
controls={false}
|
||||
controls={!frigateControls}
|
||||
playsInline
|
||||
muted={muted}
|
||||
onVolumeChange={() =>
|
||||
|
||||
@ -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={() => {}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -11,7 +11,7 @@ import useSWR from "swr";
|
||||
|
||||
export const ID_LIVE = 1;
|
||||
export const ID_REVIEW = 2;
|
||||
export const ID_SEARCH = 3;
|
||||
export const ID_EXPLORE = 3;
|
||||
export const ID_EXPORT = 4;
|
||||
export const ID_PLUS = 5;
|
||||
export const ID_PLAYGROUND = 6;
|
||||
@ -41,11 +41,11 @@ export default function useNavigation(
|
||||
url: "/review",
|
||||
},
|
||||
{
|
||||
id: ID_SEARCH,
|
||||
id: ID_EXPLORE,
|
||||
variant,
|
||||
icon: IoSearch,
|
||||
title: "Search",
|
||||
url: "/search",
|
||||
title: "Explore",
|
||||
url: "/explore",
|
||||
},
|
||||
{
|
||||
id: ID_EXPORT,
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import { useApiFilterArgs } from "@/hooks/use-api-filter";
|
||||
import { useCameraPreviews } from "@/hooks/use-camera-previews";
|
||||
import { useOverlayState } from "@/hooks/use-overlay-state";
|
||||
import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { RecordingStartingPoint } from "@/types/record";
|
||||
import {
|
||||
PartialSearchResult,
|
||||
SearchFilter,
|
||||
SearchResult,
|
||||
SearchSource,
|
||||
} from "@/types/search";
|
||||
import { TimeRange } from "@/types/timeline";
|
||||
import { RecordingView } from "@/views/recording/RecordingView";
|
||||
@ -14,7 +15,7 @@ import SearchView from "@/views/search/SearchView";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
export default function Search() {
|
||||
export default function Explore() {
|
||||
const { data: config } = useSWR<FrigateConfig>("config", {
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
@ -30,39 +31,56 @@ export default function Search() {
|
||||
|
||||
// search filter
|
||||
|
||||
const [similaritySearch, setSimilaritySearch] =
|
||||
useState<PartialSearchResult>();
|
||||
|
||||
const [searchFilter, setSearchFilter, searchSearchParams] =
|
||||
useApiFilterArgs<SearchFilter>();
|
||||
|
||||
const onUpdateFilter = useCallback(
|
||||
(newFilter: SearchFilter) => {
|
||||
setSearchFilter(newFilter);
|
||||
|
||||
if (similaritySearch && !newFilter.search_type?.includes("similarity")) {
|
||||
setSimilaritySearch(undefined);
|
||||
}
|
||||
},
|
||||
[setSearchFilter],
|
||||
[similaritySearch, setSearchFilter],
|
||||
);
|
||||
|
||||
// search api
|
||||
|
||||
const [similaritySearch, setSimilaritySearch] =
|
||||
useState<PartialSearchResult>();
|
||||
const updateFilterWithSimilarity = useCallback(
|
||||
(similaritySearch: PartialSearchResult) => {
|
||||
let newFilter = searchFilter;
|
||||
setSimilaritySearch(similaritySearch);
|
||||
if (similaritySearch) {
|
||||
newFilter = {
|
||||
...searchFilter,
|
||||
// @ts-expect-error we want to set this
|
||||
similarity_search_id: undefined,
|
||||
search_type: ["similarity"] as SearchSource[],
|
||||
};
|
||||
} else {
|
||||
if (searchFilter?.search_type?.includes("similarity" as SearchSource)) {
|
||||
newFilter = {
|
||||
...searchFilter,
|
||||
// @ts-expect-error we want to set this
|
||||
similarity_search_id: undefined,
|
||||
search_type: undefined,
|
||||
};
|
||||
}
|
||||
}
|
||||
if (newFilter) {
|
||||
setSearchFilter(newFilter);
|
||||
}
|
||||
},
|
||||
[searchFilter, setSearchFilter],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
config?.semantic_search.enabled &&
|
||||
searchSearchParams["search_type"] == "similarity" &&
|
||||
searchSearchParams["event_id"]?.length != 0 &&
|
||||
searchFilter
|
||||
) {
|
||||
setSimilaritySearch({
|
||||
id: searchSearchParams["event_id"],
|
||||
});
|
||||
|
||||
// remove event id from url params
|
||||
const { event_id: _event_id, ...newFilter } = searchFilter;
|
||||
setSearchFilter(newFilter);
|
||||
}
|
||||
// only run similarity search with event_id in the url when coming from review
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
useSearchEffect("similarity_search_id", (similarityId) => {
|
||||
updateFilterWithSimilarity({ id: similarityId });
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (similaritySearch) {
|
||||
@ -118,21 +136,25 @@ export default function Search() {
|
||||
];
|
||||
}
|
||||
|
||||
return [
|
||||
"events",
|
||||
{
|
||||
cameras: searchSearchParams["cameras"],
|
||||
labels: searchSearchParams["labels"],
|
||||
sub_labels: searchSearchParams["subLabels"],
|
||||
zones: searchSearchParams["zones"],
|
||||
before: searchSearchParams["before"],
|
||||
after: searchSearchParams["after"],
|
||||
search_type: searchSearchParams["search_type"],
|
||||
limit: Object.keys(searchSearchParams).length == 0 ? 20 : null,
|
||||
in_progress: 0,
|
||||
include_thumbnails: 0,
|
||||
},
|
||||
];
|
||||
if (searchSearchParams && Object.keys(searchSearchParams).length !== 0) {
|
||||
return [
|
||||
"events",
|
||||
{
|
||||
cameras: searchSearchParams["cameras"],
|
||||
labels: searchSearchParams["labels"],
|
||||
sub_labels: searchSearchParams["subLabels"],
|
||||
zones: searchSearchParams["zones"],
|
||||
before: searchSearchParams["before"],
|
||||
after: searchSearchParams["after"],
|
||||
search_type: searchSearchParams["search_type"],
|
||||
limit: Object.keys(searchSearchParams).length == 0 ? 20 : null,
|
||||
in_progress: 0,
|
||||
include_thumbnails: 0,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [searchTerm, searchSearchParams, similaritySearch]);
|
||||
|
||||
const { data: searchResults, isLoading } =
|
||||
@ -230,11 +252,10 @@ export default function Search() {
|
||||
searchTerm={searchTerm}
|
||||
searchFilter={searchFilter}
|
||||
searchResults={searchResults}
|
||||
allPreviews={allPreviews}
|
||||
isLoading={isLoading}
|
||||
setSearch={setSearch}
|
||||
similaritySearch={similaritySearch}
|
||||
setSimilaritySearch={setSimilaritySearch}
|
||||
setSimilaritySearch={updateFilterWithSimilarity}
|
||||
onUpdateFilter={onUpdateFilter}
|
||||
onOpenSearch={onOpenSearch}
|
||||
/>
|
||||
@ -10,6 +10,9 @@ export type SearchResult = {
|
||||
label: string;
|
||||
sub_label?: string;
|
||||
thumb_path?: string;
|
||||
plus_id?: string;
|
||||
has_snapshot: boolean;
|
||||
has_clip: boolean;
|
||||
zones: string[];
|
||||
search_source: SearchSource;
|
||||
search_distance: number;
|
||||
@ -25,7 +28,6 @@ export type SearchResult = {
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export type PartialSearchResult = Partial<SearchResult> & { id: string };
|
||||
|
||||
export type SearchFilter = {
|
||||
|
||||
158
web/src/views/explore/ExploreView.tsx
Normal file
158
web/src/views/explore/ExploreView.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { isIOS, isMobileOnly } from "react-device-detect";
|
||||
import useSWR from "swr";
|
||||
import { useApiHost } from "@/api";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { LuArrowRightCircle } from "react-icons/lu";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { TooltipPortal } from "@radix-ui/react-tooltip";
|
||||
import { SearchResult } from "@/types/search";
|
||||
|
||||
type ExploreViewProps = {
|
||||
onSelectSearch: (searchResult: SearchResult, detail: boolean) => void;
|
||||
};
|
||||
|
||||
export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
|
||||
// title
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Explore - Frigate";
|
||||
}, []);
|
||||
|
||||
// data
|
||||
|
||||
const { data: events } = useSWR<SearchResult[]>(
|
||||
[
|
||||
"events/explore",
|
||||
{
|
||||
limit: isMobileOnly ? 5 : 10,
|
||||
},
|
||||
],
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
},
|
||||
);
|
||||
|
||||
const eventsByLabel = useMemo(() => {
|
||||
if (!events) return {};
|
||||
return events.reduce<Record<string, SearchResult[]>>((acc, event) => {
|
||||
const label = event.label || "Unknown";
|
||||
if (!acc[label]) {
|
||||
acc[label] = [];
|
||||
}
|
||||
acc[label].push(event);
|
||||
return acc;
|
||||
}, {});
|
||||
}, [events]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 overflow-x-hidden p-2">
|
||||
{Object.entries(eventsByLabel).map(([label, filteredEvents]) => (
|
||||
<ThumbnailRow
|
||||
key={label}
|
||||
searchResults={filteredEvents}
|
||||
objectType={label}
|
||||
onSelectSearch={onSelectSearch}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type ThumbnailRowType = {
|
||||
objectType: string;
|
||||
searchResults?: SearchResult[];
|
||||
onSelectSearch: (searchResult: SearchResult, detail: boolean) => void;
|
||||
};
|
||||
|
||||
function ThumbnailRow({
|
||||
objectType,
|
||||
searchResults,
|
||||
onSelectSearch,
|
||||
}: ThumbnailRowType) {
|
||||
const apiHost = useApiHost();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSearch = (label: string) => {
|
||||
const similaritySearchParams = new URLSearchParams({
|
||||
labels: label,
|
||||
}).toString();
|
||||
navigate(`/explore?${similaritySearchParams}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rounded-lg bg-background_alt p-2 md:p-4">
|
||||
<div className="text-lg capitalize">
|
||||
{objectType.replaceAll("_", " ")}
|
||||
{searchResults && (
|
||||
<span className="ml-3 text-sm text-secondary-foreground">
|
||||
(
|
||||
{
|
||||
// @ts-expect-error we know this is correct
|
||||
searchResults[0].event_count
|
||||
}{" "}
|
||||
detected objects){" "}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row items-center space-x-2 py-2">
|
||||
{searchResults?.map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="relative aspect-square h-auto max-w-[20%] flex-grow md:max-w-[10%]"
|
||||
>
|
||||
<img
|
||||
className={cn(
|
||||
"absolute h-full w-full cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out md:rounded-2xl",
|
||||
)}
|
||||
style={
|
||||
isIOS
|
||||
? {
|
||||
WebkitUserSelect: "none",
|
||||
WebkitTouchCallout: "none",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
draggable={false}
|
||||
src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
|
||||
alt={`${objectType} snapshot`}
|
||||
onClick={() => onSelectSearch(event, true)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
className="flex cursor-pointer items-center justify-center"
|
||||
onClick={() => handleSearch(objectType)}
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<LuArrowRightCircle
|
||||
className="ml-2 text-secondary-foreground transition-all duration-300 hover:text-primary"
|
||||
size={24}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipPortal>
|
||||
<TooltipContent className="capitalize">
|
||||
<ExploreMoreLink objectType={objectType} />
|
||||
</TooltipContent>
|
||||
</TooltipPortal>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ExploreMoreLink({ objectType }: { objectType: string }) {
|
||||
const formattedType = objectType.replaceAll("_", " ");
|
||||
const label = formattedType.endsWith("s")
|
||||
? `${formattedType}es`
|
||||
: `${formattedType}s`;
|
||||
|
||||
return <div>Explore More {label}</div>;
|
||||
}
|
||||
@ -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 {
|
||||
@ -12,7 +12,6 @@ import {
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { Preview } from "@/types/preview";
|
||||
import {
|
||||
PartialSearchResult,
|
||||
SearchFilter,
|
||||
@ -22,13 +21,13 @@ import { useCallback, useMemo, useState } from "react";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import { LuImage, LuSearchX, LuText, LuXCircle } from "react-icons/lu";
|
||||
import useSWR from "swr";
|
||||
import ExploreView from "../explore/ExploreView";
|
||||
|
||||
type SearchViewProps = {
|
||||
search: string;
|
||||
searchTerm: string;
|
||||
searchFilter?: SearchFilter;
|
||||
searchResults?: SearchResult[];
|
||||
allPreviews?: Preview[];
|
||||
isLoading: boolean;
|
||||
similaritySearch?: PartialSearchResult;
|
||||
setSearch: (search: string) => void;
|
||||
@ -41,13 +40,11 @@ export default function SearchView({
|
||||
searchTerm,
|
||||
searchFilter,
|
||||
searchResults,
|
||||
allPreviews,
|
||||
isLoading,
|
||||
similaritySearch,
|
||||
setSearch,
|
||||
setSimilaritySearch,
|
||||
onUpdateFilter,
|
||||
onOpenSearch,
|
||||
}: SearchViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config", {
|
||||
revalidateOnFocus: false,
|
||||
@ -68,16 +65,13 @@ export default function SearchView({
|
||||
|
||||
// search interaction
|
||||
|
||||
const onSelectSearch = useCallback(
|
||||
(item: SearchResult, detail: boolean) => {
|
||||
if (detail) {
|
||||
setSearchDetail(item);
|
||||
} else {
|
||||
onOpenSearch(item);
|
||||
}
|
||||
},
|
||||
[onOpenSearch],
|
||||
);
|
||||
const onSelectSearch = useCallback((item: SearchResult, detail: boolean) => {
|
||||
if (detail) {
|
||||
setSearchDetail(item);
|
||||
} else {
|
||||
setSearchDetail(item);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// confidence score - probably needs tweaking
|
||||
|
||||
@ -116,25 +110,23 @@ export default function SearchView({
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"relative mb-2 flex h-11 items-center pl-2 pr-2 md:pl-3",
|
||||
"flex h-11 items-center pl-2 pr-2 md:pl-3",
|
||||
config?.semantic_search?.enabled
|
||||
? "justify-between"
|
||||
: "justify-center",
|
||||
isMobileOnly && "h-[88px] flex-wrap gap-2",
|
||||
isMobileOnly && "mb-3 h-auto flex-wrap gap-2",
|
||||
)}
|
||||
>
|
||||
{config?.semantic_search?.enabled && (
|
||||
<div
|
||||
className={cn(
|
||||
"relative w-full",
|
||||
hasExistingSearch ? "mr-3 md:w-1/3" : "md:ml-[25%] md:w-1/2",
|
||||
hasExistingSearch ? "md:mr-3 md:w-1/3" : "md:ml-[25%] md:w-1/2",
|
||||
)}
|
||||
>
|
||||
<Input
|
||||
className="text-md w-full bg-muted pr-10"
|
||||
placeholder={
|
||||
isMobileOnly ? "Search" : "Search for a detected object..."
|
||||
}
|
||||
placeholder={"Search for a detected object..."}
|
||||
value={similaritySearch ? "" : search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
@ -168,66 +160,73 @@ 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-4 md:gap-4 3xl:grid-cols-6">
|
||||
{uniqueResults &&
|
||||
uniqueResults.map((value) => {
|
||||
const selected = false;
|
||||
{uniqueResults && (
|
||||
<div className="mt-2 grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-4 md:gap-4 3xl:grid-cols-6">
|
||||
{uniqueResults &&
|
||||
uniqueResults.map((value) => {
|
||||
const selected = false;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={value.id}
|
||||
data-start={value.start_time}
|
||||
className="review-item relative rounded-lg"
|
||||
>
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"aspect-square size-full overflow-hidden rounded-lg",
|
||||
)}
|
||||
key={value.id}
|
||||
data-start={value.start_time}
|
||||
className="review-item relative rounded-lg"
|
||||
>
|
||||
<SearchThumbnailPlayer
|
||||
searchResult={value}
|
||||
allPreviews={allPreviews}
|
||||
scrollLock={false}
|
||||
onClick={onSelectSearch}
|
||||
/>
|
||||
{(searchTerm || similaritySearch) && (
|
||||
<div className={cn("absolute right-2 top-2 z-40")}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Chip
|
||||
className={`flex select-none items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs capitalize text-white`}
|
||||
>
|
||||
{value.search_source == "thumbnail" ? (
|
||||
<LuImage className="mr-1 size-3" />
|
||||
) : (
|
||||
<LuText className="mr-1 size-3" />
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"aspect-square size-full overflow-hidden rounded-lg",
|
||||
)}
|
||||
>
|
||||
<SearchThumbnail
|
||||
searchResult={value}
|
||||
scrollLock={false}
|
||||
findSimilar={() => setSimilaritySearch(value)}
|
||||
onClick={onSelectSearch}
|
||||
/>
|
||||
{(searchTerm || similaritySearch) && (
|
||||
<div className={cn("absolute right-2 top-2 z-40")}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Chip
|
||||
className={`flex select-none items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs capitalize text-white`}
|
||||
>
|
||||
{value.search_source == "thumbnail" ? (
|
||||
<LuImage className="mr-1 size-3" />
|
||||
) : (
|
||||
<LuText className="mr-1 size-3" />
|
||||
)}
|
||||
{zScoreToConfidence(
|
||||
value.search_distance,
|
||||
value.search_source,
|
||||
)}
|
||||
%
|
||||
</Chip>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Matched {value.search_source} at{" "}
|
||||
{zScoreToConfidence(
|
||||
value.search_distance,
|
||||
value.search_source,
|
||||
)}
|
||||
%
|
||||
</Chip>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Matched {value.search_source} at{" "}
|
||||
{zScoreToConfidence(
|
||||
value.search_distance,
|
||||
value.search_source,
|
||||
)}
|
||||
%
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-severity_alert outline-severity_alert` : "outline-transparent duration-500"}`}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-severity_alert outline-severity_alert` : "outline-transparent duration-500"}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{!uniqueResults && !isLoading && (
|
||||
<div className="flex size-full flex-col">
|
||||
<ExploreView onSelectSearch={onSelectSearch} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user