-
-
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)
* Stash * Add support for review information side panel
- Loading branch information
Showing
7 changed files
with
203 additions
and
13 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
152 changes: 152 additions & 0 deletions
152
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,152 @@ | ||
| 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> | ||
| <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="flex w-full flex-col gap-2 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}/thumbnail.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