[ui] add audio timeline

webui/src/components/display/blobs/AudioViewer.svelte

@@ -7,6 +7,7 @@
   export let detail: boolean;
 
   let containerEl: HTMLDivElement;
+  let timelineEl: HTMLDivElement;
   let loaded = false;
 
   let wavesurfer: WaveSurfer;
@@ -14,6 +15,11 @@
 
   onMount(async () => {
     const WaveSurfer = await import("wavesurfer.js");
+    const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
+    const timelineColor = getComputedStyle(
+      document.documentElement
+    ).getPropertyValue("--foreground");
+
     wavesurfer = WaveSurfer.default.create({
       container: containerEl,
       waveColor: "#dc322f",
@@ -22,6 +28,15 @@
       backend: "MediaElement",
       mediaControls: true,
       xhr: { cache: "force-cache" },
+      plugins: [
+        TimelinePlugin.default.create({
+          container: timelineEl,
+          primaryColor: timelineColor,
+          primaryFontColor: timelineColor,
+          secondaryColor: timelineColor,
+          secondaryFontColor: timelineColor,
+        }),
+      ],
     });
     wavesurfer.on("ready", () => {
       loaded = true;
@@ -34,6 +49,7 @@
   {#if !loaded}
     <Spinner centered />
   {/if}
+  <div class="wavesurfer-timeline" bind:this={timelineEl} />
   <div class="wavesurfer" bind:this={containerEl} />
 </div>