feat: use sexier audio waveform (#265)

* use sexier audio waveform

* format

js/desktop/src/features/settings/audio-video-settings-page.tsx

@@ -12,7 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { AudioLevelBars } from '@/components/audio/audio-level-bars';
+import { CenteredWaveform } from '@/components/audio/centered-waveform';
 import { useAudioSource } from '@/components/audio/use-audio-source';
 import { useMediaDevices } from '@/hooks/use-media-devices';
 import {
@@ -105,20 +105,17 @@ function FieldLabel({ children }: { children: React.ReactNode }) {
 function InlineLevelMeter({ stream }: { stream: MediaStream | null }) {
   const audioSource = useAudioSource(stream);
   if (!audioSource) {
-    return (
-      <div className="flex h-3 items-end gap-1">
-        {[0, 1, 2].map((i) => (
-          <div key={i} className="bg-muted h-1 w-1 rounded-full" />
-        ))}
-      </div>
-    );
+    return <div className="bg-muted h-3 w-20 rounded-sm opacity-50" />;
   }
   return (
-    <div className="flex h-3 items-end">
-      <div className="scale-[0.55] origin-right">
-        <AudioLevelBars sourceNode={audioSource.sourceNode} />
-      </div>
-    </div>
+    <CenteredWaveform
+      sourceNode={audioSource.sourceNode}
+      width={80}
+      height={12}
+      barWidth={2}
+      gap={3}
+      className="text-primary"
+    />
   );
 }