feat: show audio bars during audio clip playback

js/src/features/playback/media-particle-view.tsx

@@ -2,6 +2,8 @@ import { useEffect, useRef, useState } from "react";
 import type { Particle } from "@/api/types";
 import { useDownloadUrl } from "@/hooks/use-download-url";
 import { Skeleton } from "@/components/ui/skeleton";
+import { AudioLevelBars } from "@/components/audio/audio-level-bars";
+import { useAudioSource } from "@/components/audio/use-audio-source";
 
 type MediaParticle = Extract<Particle, { type: "media" }>;
 
@@ -43,9 +45,12 @@ export function MediaParticleView({
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
+  const isAudio = particle.properties.mime_type?.startsWith("audio/");
   const [currentTimeMs, setCurrentTimeMs] = useState(0);
 
-  const isAudio = particle.properties.mime_type?.startsWith("audio/");
+  // WORKAROUND: useAudioSource needs an audio element, but audioRef is only set after mount
+  const [audioEl, setAudioEl] = useState<HTMLAudioElement | null>(null);
+  const audioSource = useAudioSource(audioEl);
 
   useEffect(() => {
     const el = isAudio ? audioRef.current : videoRef.current;
@@ -76,7 +81,10 @@ export function MediaParticleView({
     return (
       <div className="relative flex h-full w-full items-center justify-center bg-black/90">
         <audio
-          ref={audioRef}
+          ref={(el) => {
+            audioRef.current = el;
+            setAudioEl(el);
+          }}
           crossOrigin="anonymous"
           src={url}
           autoPlay
@@ -86,6 +94,12 @@ export function MediaParticleView({
           }}
         />
 
+        {audioSource && (
+          <div className="z-10 absolute bottom-15">
+            <AudioLevelBars sourceNode={audioSource.sourceNode} />
+          </div>
+        )}
+
         <DurationPill
           currentTimeMs={currentTimeMs}
           totalDurationMs={particle.properties.duration_ms}