From 544b79d274b30bde43ce33c504972dc5926a3bc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 17 Feb 2022 17:14:56 +0100
Subject: [PATCH] [ui] add audio timeline

---
 .../components/display/blobs/AudioViewer.svelte  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/webui/src/components/display/blobs/AudioViewer.svelte b/webui/src/components/display/blobs/AudioViewer.svelte
index 0b6bd32..9b3f7c7 100644
--- a/webui/src/components/display/blobs/AudioViewer.svelte
+++ b/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>