-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for review information side panel (#13063)
- Loading branch information
Showing
7 changed files
with
205 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
154 changes: 154 additions & 0 deletions
154
web/src/components/overlay/detail/ReviewDetailDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| import { isDesktop, isIOS } from "react-device-detect"; | ||
| import { Sheet, SheetContent } from "../../ui/sheet"; | ||
| import { Drawer, DrawerContent } from "../../ui/drawer"; | ||
| import useSWR from "swr"; | ||
| import { FrigateConfig } from "@/types/frigateConfig"; | ||
| import { useFormattedTimestamp } from "@/hooks/use-date-utils"; | ||
| import { getIconForLabel } from "@/utils/iconUtil"; | ||
| import { useApiHost } from "@/api"; | ||
| import { ReviewSegment } from "@/types/review"; | ||
| import { Event } from "@/types/event"; | ||
| import { useMemo } from "react"; | ||
|
|
||
| type ReviewDetailDialogProps = { | ||
| review?: ReviewSegment; | ||
| setReview: (review: ReviewSegment | undefined) => void; | ||
| }; | ||
| export default function ReviewDetailDialog({ | ||
| review, | ||
| setReview, | ||
| }: ReviewDetailDialogProps) { | ||
| const { data: config } = useSWR<FrigateConfig>("config", { | ||
| revalidateOnFocus: false, | ||
| }); | ||
|
|
||
| const apiHost = useApiHost(); | ||
|
|
||
| // data | ||
|
|
||
| const { data: events } = useSWR<Event[]>( | ||
| review ? ["event_ids", { ids: review.data.detections.join(",") }] : null, | ||
| ); | ||
|
|
||
| const hasMismatch = useMemo(() => { | ||
| if (!review || !events) { | ||
| return false; | ||
| } | ||
|
|
||
| return events.length != review?.data.detections.length; | ||
| }, [review, events]); | ||
|
|
||
| const formattedDate = useFormattedTimestamp( | ||
| review?.start_time ?? 0, | ||
| config?.ui.time_format == "24hour" | ||
| ? "%b %-d %Y, %H:%M" | ||
| : "%b %-d %Y, %I:%M %p", | ||
| ); | ||
|
|
||
| // content | ||
|
|
||
| const Overlay = isDesktop ? Sheet : Drawer; | ||
| const Content = isDesktop ? SheetContent : DrawerContent; | ||
|
|
||
| return ( | ||
| <Overlay | ||
| open={review != undefined} | ||
| onOpenChange={(open) => { | ||
| if (!open) { | ||
| setReview(undefined); | ||
| } | ||
| }} | ||
| > | ||
| <Content | ||
| className={ | ||
| isDesktop ? "sm:max-w-xl" : "max-h-[75dvh] overflow-hidden p-2 pb-4" | ||
| } | ||
| > | ||
| {review && ( | ||
| <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">Camera</div> | ||
| <div className="text-sm capitalize"> | ||
| {review.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"> | ||
| <div className="flex flex-col gap-1.5"> | ||
| <div className="text-sm text-primary/40">Objects</div> | ||
| <div className="flex flex-col items-start gap-2 text-sm capitalize"> | ||
| {events?.map((event) => { | ||
| return ( | ||
| <div | ||
| key={event.id} | ||
| className="flex flex-row items-center gap-2 text-sm capitalize" | ||
| > | ||
| {getIconForLabel(event.label, "size-3 text-white")} | ||
| {event.sub_label ?? event.label} ( | ||
| {Math.round(event.data.top_score * 100)}%) | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| {review.data.zones.length > 0 && ( | ||
| <div className="flex flex-col gap-1.5"> | ||
| <div className="text-sm text-primary/40">Zones</div> | ||
| <div className="flex flex-col items-start gap-2 text-sm capitalize"> | ||
| {review.data.zones.map((zone) => { | ||
| return ( | ||
| <div | ||
| key={zone} | ||
| className="flex flex-row items-center gap-2 text-sm capitalize" | ||
| > | ||
| {zone.replaceAll("_", " ")} | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| {hasMismatch && ( | ||
| <div className="p-4 text-center text-sm"> | ||
| Some objects that were detected are not included in this list | ||
| because the object does not have a snapshot | ||
| </div> | ||
| )} | ||
| <div className="scrollbar-container flex w-full flex-col gap-2 overflow-y-auto px-6"> | ||
| {events?.map((event) => { | ||
| return ( | ||
| <img | ||
| key={event.id} | ||
| className="aspect-video select-none rounded-lg object-contain transition-opacity" | ||
| style={ | ||
| isIOS | ||
| ? { | ||
| WebkitUserSelect: "none", | ||
| WebkitTouchCallout: "none", | ||
| } | ||
| : undefined | ||
| } | ||
| draggable={false} | ||
| src={ | ||
| event.has_snapshot | ||
| ? `${apiHost}api/events/${event.id}/snapshot.jpg` | ||
| : `${apiHost}api/events/${event.id}/thumbnail.jpg` | ||
| } | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </Content> | ||
| </Overlay> | ||
| ); | ||
| } |
8 changes: 4 additions & 4 deletions
8
...components/overlay/SearchDetailDialog.tsx → ...nts/overlay/detail/SearchDetailDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters