administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-14 15:15:22 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add video and frigate plus tabs for search item

Browse Source
This commit is contained in:
Nicolas Mowen 2024-09-10 15:35:40 -06:00
parent 7bc4c493d9
commit 8b6105a817
8 changed files with 451 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frigate/api/event.py
View File

@ -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,
]

121
web/src/components/card/SearchThumbnail.tsx
View File

@ -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,15 +95,6 @@ export default function SearchThumbnail({
);
return (
<Popover
open={showingMoreDetail}
onOpenChange={(open) => {
if (!open) {
setDetails(false);
}
}}
>
<PopoverTrigger asChild>
<div
className="relative size-full cursor-pointer"
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
@ -170,8 +157,7 @@ export default function SearchThumbnail({
<TooltipContent className="capitalize">
{[...new Set([searchResult.label])]
.filter(
(item) =>
item !== undefined && !item.includes("-verified"),
(item) => item !== undefined && !item.includes("-verified"),
)
.map((text) => capitalizeFirstLetter(text))
.sort()
@ -194,109 +180,6 @@ export default function SearchThumbnail({
</div>
</div>
</div>
<PopoverContent>
<SearchDetails search={searchResult} findSimilar={findSimilar} />
</PopoverContent>
</div>
</PopoverTrigger>
</Popover>
);
}
type SearchDetailProps = {
search?: SearchResult;
findSimilar: () => void;
};
function SearchDetails({ search, findSimilar }: SearchDetailProps) {
const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
const apiHost = useApiHost();
// data
const formattedDate = useFormattedTimestamp(
search?.start_time ?? 0,
config?.ui.time_format == "24hour"
? "%b %-d %Y, %H:%M"
: "%b %-d %Y, %I:%M %p",
);
const score = useMemo(() => {
if (!search) {
return 0;
}
const value = search.score ?? search.data.top_score;
return Math.round(value * 100);
}, [search]);
const subLabelScore = useMemo(() => {
if (!search) {
return undefined;
}
if (search.sub_label) {
return Math.round((search.data?.top_score ?? 0) * 100);
} else {
return undefined;
}
}, [search]);
if (!search) {
return;
}
return (
<div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
<div className="flex w-full flex-row">
<div className="flex w-full flex-col gap-3">
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Label</div>
<div className="flex flex-row items-center gap-2 text-sm capitalize">
{getIconForLabel(search.label, "size-4 text-primary")}
{search.label}
{search.sub_label && ` (${search.sub_label})`}
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Score</div>
<div className="text-sm">
{score}%{subLabelScore && ` (${subLabelScore}%)`}
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Camera</div>
<div className="text-sm capitalize">
{search.camera.replaceAll("_", " ")}
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Timestamp</div>
<div className="text-sm">{formattedDate}</div>
</div>
</div>
<div className="flex w-full flex-col gap-2 px-6">
<img
className="aspect-video select-none rounded-lg object-contain transition-opacity"
style={
isIOS
? {
WebkitUserSelect: "none",
WebkitTouchCallout: "none",
}
: undefined
}
draggable={false}
src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
/>
<Button variant="secondary" onClick={findSimilar}>
Find Similar
</Button>
</div>
</div>
</div>
);
}

197
web/src/components/overlay/detail/SearchDetailDialog.tsx
View File

@ -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,33 +230,7 @@ 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">
@ -198,8 +301,24 @@ export default function SearchDetailDialog({
</div>
</div>
</div>
)}
</Content>
</Overlay>
);
}
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}
/>
);
}

31
web/src/components/overlay/dialog/FrigatePlusDialog.tsx
View File

@ -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,12 +69,7 @@ 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">
const content = (
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
<DialogHeader>
<DialogTitle>Submit To Frigate+</DialogTitle>
@ -100,12 +97,10 @@ export function FrigatePlusDialog({
/>
)}
</TransformComponent>
{upload?.plus_id == undefined && (
<DialogFooter>
<Button onClick={onClose}>Cancel</Button>
<Button
className="bg-success"
onClick={() => onSubmitToPlus(false)}
>
{dialog && <Button onClick={onClose}>Cancel</Button>}
<Button className="bg-success" onClick={() => onSubmitToPlus(false)}>
This is a {upload?.label}
</Button>
<Button
@ -116,8 +111,22 @@ export function FrigatePlusDialog({
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;
}

6
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -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,6 +169,7 @@ export default function HlsVideoPlayer({
return (
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
{frigateControls && (
<VideoControls
className={cn(
"absolute left-1/2 z-50 -translate-x-1/2",
@ -234,6 +237,7 @@ export default function HlsVideoPlayer({
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
web/src/pages/Search.tsx
View File

@ -230,7 +230,6 @@ export default function Search() {
searchTerm={searchTerm}
searchFilter={searchFilter}
searchResults={searchResults}
allPreviews={allPreviews}
isLoading={isLoading}
setSearch={setSearch}
similaritySearch={similaritySearch}

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

@ -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 = {

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

@ -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) => {
const onSelectSearch = useCallback((item: SearchResult, detail: boolean) => {
if (detail) {
setSearchDetail(item);
} else {
onOpenSearch(item);
setSearchDetail(item);
}
},
[onOpenSearch],
);
}, []);
// confidence score - probably needs tweaking