diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx index 66d47d822..24c86e6c8 100644 --- a/web/src/components/timeline/DetailStream.tsx +++ b/web/src/components/timeline/DetailStream.tsx @@ -232,15 +232,20 @@ function ReviewGroup({ date_style: "medium", }); + const shouldFetchEvents = review?.data?.detections?.length > 0; + const { data: fetchedEvents } = useSWR( - review?.data?.detections?.length + shouldFetchEvents ? ["event_ids", { ids: review.data.detections.join(",") }] : null, ); - const rawIconLabels: string[] = fetchedEvents - ? fetchedEvents.map((e) => e.label) - : (review.data?.objects ?? []); + const rawIconLabels: string[] = [ + ...(fetchedEvents + ? fetchedEvents.map((e) => e.label) + : (review.data?.objects ?? [])), + ...(review.data?.audio ?? []), + ]; // limit to 5 icons const seen = new Set(); @@ -310,10 +315,10 @@ function ReviewGroup({ {isActive && (
- {!fetchedEvents ? ( + {shouldFetchEvents && !fetchedEvents ? ( ) : ( - fetchedEvents.map((event) => { + (fetchedEvents || []).map((event) => { return ( 0 && ( +
+ {review.data.audio.map((audioLabel) => ( +
+
+ {getIconForLabel( + audioLabel, + "size-4 text-primary dark:text-white", + )} + {getTranslatedLabel(audioLabel)} +
+
+ ))} +
+ )}
)}