feat: use sexier audio waveform (#265)

* use sexier audio waveform

* format

js/desktop/src/features/compose/recording-overlay.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Paperclip } from 'lucide-react';
-import type { RecordingMode } from '@/hooks/use-recording-mode';
-import { AudioLevelBars } from '@/components/audio/audio-level-bars';
+import type { RecordingMode } from '@/stores/media-settings-store';
+import { CenteredWaveform } from '@/components/audio/centered-waveform';
 import { useAudioSource } from '@/components/audio/use-audio-source';
 import { useObjectUrl } from '@/hooks/use-object-url';
 import { AttachmentStrip } from '@/features/compose/attachment-strip';
@@ -67,7 +67,6 @@ function ReviewPlayback({
   objectFit?: 'cover' | 'contain';
 }) {
   const objectUrl = useObjectUrl(blob);
-  const audioElRef = useRef<HTMLAudioElement | null>(null);
   const [audioEl, setAudioEl] = useState<HTMLAudioElement | null>(null);
   const audioSource = useAudioSource(isVideo ? null : audioEl);
 
@@ -87,17 +86,12 @@ function ReviewPlayback({
 
   return (
     <div className="flex flex-col items-center gap-3">
-      <audio
-        ref={(el) => {
-          audioElRef.current = el;
-          setAudioEl(el);
-        }}
-        src={objectUrl}
-        autoPlay
-        loop
-      />
+      <audio ref={setAudioEl} src={objectUrl} autoPlay loop />
       {audioSource ? (
-        <AudioLevelBars sourceNode={audioSource.sourceNode} />
+        <CenteredWaveform
+          sourceNode={audioSource.sourceNode}
+          className="text-white"
+        />
       ) : (
         <span className="text-sm text-white/60">Playing back audio...</span>
       )}
@@ -198,10 +192,13 @@ export function RecordingOverlay({
         ) : null}
       </div>
 
-      {/* Bottom center: audio level bars (recording with active stream) */}
+      {/* Bottom center: live waveform (recording with active stream) */}
       {isRecording && recordingAudioSource && (
         <div className="z-10 absolute bottom-15">
-          <AudioLevelBars sourceNode={recordingAudioSource.sourceNode} />
+          <CenteredWaveform
+            sourceNode={recordingAudioSource.sourceNode}
+            className="text-white"
+          />
         </div>
       )}
 

js/desktop/src/features/compose/use-recorder.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-import type { RecordingMode } from '@/hooks/use-recording-mode';
+import type { RecordingMode } from '@/stores/media-settings-store';
 
 const VIDEO_PREFERRED_MIME = 'video/webm;codecs=vp9,opus';
 const VIDEO_FALLBACK_MIME = 'video/webm';