administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-12 10:07:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

show audio events in detail stream

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-18 06:49:34 -05:00
parent a8bcc109a9
commit f7a8caaa23
1 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/components/timeline/DetailStream.tsx
View File

@ -232,15 +232,20 @@ function ReviewGroup({
date_style: "medium", date_style: "medium",
}); });
const shouldFetchEvents = review?.data?.detections?.length > 0;
const { data: fetchedEvents } = useSWR<Event[]>( const { data: fetchedEvents } = useSWR<Event[]>(
review?.data?.detections?.length shouldFetchEvents
? ["event_ids", { ids: review.data.detections.join(",") }] ? ["event_ids", { ids: review.data.detections.join(",") }]
: null, : null,
); );
const rawIconLabels: string[] = fetchedEvents const rawIconLabels: string[] = [
? fetchedEvents.map((e) => e.label) ...(fetchedEvents
: (review.data?.objects ?? []); ? fetchedEvents.map((e) => e.label)
: (review.data?.objects ?? [])),
...(review.data?.audio ?? []),
];
// limit to 5 icons // limit to 5 icons
const seen = new Set<string>(); const seen = new Set<string>();
@ -310,10 +315,10 @@ function ReviewGroup({
{isActive && ( {isActive && (
<div className="mt-2 space-y-2"> <div className="mt-2 space-y-2">
{!fetchedEvents ? ( {shouldFetchEvents && !fetchedEvents ? (
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
fetchedEvents.map((event) => { (fetchedEvents || []).map((event) => {
return ( return (
<EventCollapsible <EventCollapsible
key={event.id} key={event.id}
@ -325,6 +330,24 @@ function ReviewGroup({
); );
}) })
)} )}
{review.data.audio && review.data.audio.length > 0 && (
<div className="space-y-1">
{review.data.audio.map((audioLabel) => (
<div
key={audioLabel}
className="rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px] outline-transparent duration-500"
>
<div className="flex items-center gap-2 text-sm font-medium">
{getIconForLabel(
audioLabel,
"size-4 text-primary dark:text-white",
)}
<span>{getTranslatedLabel(audioLabel)}</span>
</div>
</div>
))}
</div>
)}
</div> </div>
)} )}
</div> </div>