[ui] add zoom to audioviewer

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { throttle } from "lodash";
   import { onMount } from "svelte";
   import type WaveSurfer from "wavesurfer.js";
+  import Icon from "../../utils/Icon.svelte";
   import Spinner from "../../utils/Spinner.svelte";
 
   export let address: string;
@@ -13,6 +15,12 @@
   let wavesurfer: WaveSurfer;
   $: if (wavesurfer) wavesurfer.drawBuffer() && detail;
 
+  let zoom: number = 1;
+  const setZoom = throttle((level: number) => {
+    wavesurfer.zoom(level);
+  }, 250);
+  $: if (zoom && wavesurfer) setZoom(zoom);
+
   onMount(async () => {
     const WaveSurfer = await import("wavesurfer.js");
     const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
@@ -49,6 +57,15 @@
   {#if !loaded}
     <Spinner centered />
   {/if}
+  {#if loaded}
+    <header>
+      <div class="zoom">
+        <Icon name="zoom-out" />
+        <input type="range" min="1" max="50" bind:value={zoom} />
+        <Icon name="zoom-in" />
+      </div>
+    </header>
+  {/if}
   <div class="wavesurfer-timeline" bind:this={timelineEl} />
   <div class="wavesurfer" bind:this={containerEl} />
 </div>
@@ -57,4 +74,21 @@
   .audio {
     width: 100%;
   }
+
+  header {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 1em;
+    & > * {
+      flex-basis: 50%;
+    }
+    .zoom {
+      display: flex;
+      align-items: center;
+      input {
+        flex-grow: 1;
+        margin: 0 .5em;
+      }
+    }
+  }
 </style>