mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-14 23:25:25 +03:00
Add video and frigate plus tabs for search item
This commit is contained in:
Nicolas Mowen
parent
7bc4c493d9
commit
8b6105a817
@ -317,7 +317,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,
|
||||
]
|
||||
|
||||
|
||||
@ -16,8 +16,6 @@ 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;
|
||||
@ -44,9 +42,7 @@ export default function SearchThumbnail({
|
||||
preventScrollOnSwipe: true,
|
||||
});
|
||||
|
||||
useContextMenu(imgRef, () => {
|
||||
onClick(searchResult, true);
|
||||
});
|
||||
useContextMenu(imgRef, findSimilar);
|
||||
|
||||
// Hover Details
|
||||
|
||||
@ -99,202 +95,89 @@ export default function SearchThumbnail({
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
open={showingMoreDetail}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setDetails(false);
|
||||
}
|
||||
}}
|
||||
<div
|
||||
className="relative size-full cursor-pointer"
|
||||
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
|
||||
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
|
||||
onClick={handleOnClick}
|
||||
{...swipeHandlers}
|
||||
>
|
||||
<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();
|
||||
}}
|
||||
/>
|
||||
<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",
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
draggable={false}
|
||||
src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
|
||||
/>
|
||||
<Button variant="secondary" onClick={findSimilar}>
|
||||
Find Similar
|
||||
</Button>
|
||||
</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>
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
import { isDesktop, isIOS } from "react-device-detect";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "../../ui/sheet";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
@ -20,10 +13,27 @@ 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";
|
||||
|
||||
const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
|
||||
type SearchTab = (typeof SEARCH_TABS)[number];
|
||||
|
||||
type SearchDetailDialogProps = {
|
||||
search?: SearchResult;
|
||||
@ -39,6 +49,127 @@ 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);
|
||||
setPage("details");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
className={
|
||||
isDesktop
|
||||
? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"
|
||||
: "max-h-[75dvh] overflow-hidden p-2 pb-4"
|
||||
}
|
||||
>
|
||||
<Header className="sr-only">
|
||||
<Title>Tracked Object Details</Title>
|
||||
<Description>Tracked object details</Description>
|
||||
</Header>
|
||||
<ScrollArea className="w-full whitespace-nowrap">
|
||||
<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={() => {}}
|
||||
/>
|
||||
)}
|
||||
{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 +208,6 @@ export default function SearchDetailDialog({
|
||||
}
|
||||
}, [search]);
|
||||
|
||||
// api
|
||||
|
||||
const updateDescription = useCallback(() => {
|
||||
if (!search) {
|
||||
return;
|
||||
@ -101,105 +230,95 @@ 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);
|
||||
|
||||
return (
|
||||
<HlsVideoPlayer
|
||||
videoRef={videoRef}
|
||||
currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${search.end_time ?? 0}/index.m3u8`}
|
||||
hotKeys
|
||||
visible
|
||||
frigateControls={false}
|
||||
fullscreen={false}
|
||||
supportsFullscreen={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -17,11 +17,13 @@ import useSWR from "swr";
|
||||
|
||||
type FrigatePlusDialogProps = {
|
||||
upload?: Event;
|
||||
dialog?: boolean;
|
||||
onClose: () => void;
|
||||
onEventUploaded: () => void;
|
||||
};
|
||||
export function FrigatePlusDialog({
|
||||
upload,
|
||||
dialog = true,
|
||||
onClose,
|
||||
onEventUploaded,
|
||||
}: FrigatePlusDialogProps) {
|
||||
@ -67,57 +69,64 @@ export function FrigatePlusDialog({
|
||||
[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%",
|
||||
}}
|
||||
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>
|
||||
{upload?.plus_id == undefined && (
|
||||
<DialogFooter>
|
||||
{dialog && <Button onClick={onClose}>Cancel</Button>}
|
||||
<Button className="bg-success" onClick={() => onSubmitToPlus(false)}>
|
||||
This is a {upload?.label}
|
||||
</Button>
|
||||
<Button
|
||||
className="text-white"
|
||||
variant="destructive"
|
||||
onClick={() => onSubmitToPlus(true)}
|
||||
>
|
||||
{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>
|
||||
<Button
|
||||
className="bg-success"
|
||||
onClick={() => onSubmitToPlus(false)}
|
||||
>
|
||||
This is a {upload?.label}
|
||||
</Button>
|
||||
<Button
|
||||
className="text-white"
|
||||
variant="destructive"
|
||||
onClick={() => onSubmitToPlus(true)}
|
||||
>
|
||||
This is not a {upload?.label}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</TransformWrapper>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
This is not a {upload?.label}
|
||||
</Button>
|
||||
</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={() =>
|
||||
|
||||
@ -230,7 +230,6 @@ export default function Search() {
|
||||
searchTerm={searchTerm}
|
||||
searchFilter={searchFilter}
|
||||
searchResults={searchResults}
|
||||
allPreviews={allPreviews}
|
||||
isLoading={isLoading}
|
||||
setSearch={setSearch}
|
||||
similaritySearch={similaritySearch}
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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,
|
||||
@ -28,7 +27,6 @@ type SearchViewProps = {
|
||||
searchTerm: string;
|
||||
searchFilter?: SearchFilter;
|
||||
searchResults?: SearchResult[];
|
||||
allPreviews?: Preview[];
|
||||
isLoading: boolean;
|
||||
similaritySearch?: PartialSearchResult;
|
||||
setSearch: (search: string) => void;
|
||||
@ -41,13 +39,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 +64,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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user