feat: use sexier audio waveform (#265)

* use sexier audio waveform

* format

js/desktop/src/features/particles/media-particle-view.tsx

@@ -11,7 +11,7 @@ import { useDownloadUrl } from '@/hooks/use-download-url';
 import { useTranscriptPlayback } from '@/hooks/use-transcript-playback';
 import { TranscriptOverlay } from '@/features/particles/transcript-overlay';
 import { Skeleton } from '@/components/ui/skeleton';
-import { AudioLevelBars } from '@/components/audio/audio-level-bars';
+import { CenteredWaveform } from '@/components/audio/centered-waveform';
 import { useAudioSource } from '@/components/audio/use-audio-source';
 import { useParticleAttachments } from '@/hooks/use-particle-attachments';
 import { ParticleAttachments } from '@/features/particles/particle-attachments';
@@ -89,7 +89,7 @@ export const MediaParticleView = forwardRef<
     currentTime,
   );
 
-  // WORKAROUND: useAudioSource needs an audio element, but audioRef is only set after mount
+  // useAudioSource needs the audio element, but audioRef is only set after mount
   const [audioEl, setAudioEl] = useState<HTMLAudioElement | null>(null);
   const audioSource = useAudioSource(audioEl);
 
@@ -156,7 +156,10 @@ export const MediaParticleView = forwardRef<
 
         {audioSource && (
           <div className="z-10 absolute bottom-20">
-            <AudioLevelBars sourceNode={audioSource.sourceNode} />
+            <CenteredWaveform
+              sourceNode={audioSource.sourceNode}
+              className="text-white"
+            />
           </div>
         )}