From f7a8caaa2349459b5706f70c6d0bae9daee86da0 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 18 Oct 2025 06:49:34 -0500
Subject: [PATCH] show audio events in detail stream

---
 web/src/components/timeline/DetailStream.tsx | 35 ++++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

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<Event[]>(
-    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<string>();
@@ -310,10 +315,10 @@ function ReviewGroup({
 
       {isActive && (
         <div className="mt-2 space-y-2">
-          {!fetchedEvents ? (
+          {shouldFetchEvents && !fetchedEvents ? (
             <ActivityIndicator />
           ) : (
-            fetchedEvents.map((event) => {
+            (fetchedEvents || []).map((event) => {
               return (
                 <EventCollapsible
                   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>