[ui] hide audio controls behind detail mode

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

@@ -15,7 +15,7 @@
   let wavesurfer: WaveSurfer;
   $: if (wavesurfer) wavesurfer.drawBuffer() && detail;
 
-  let zoom: number = 1;
+  $: zoom = detail ? 1 : undefined;
   const setZoom = throttle((level: number) => {
     wavesurfer.zoom(level);
   }, 250);
@@ -59,14 +59,20 @@
   {/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>
+      {#if zoom}
+        <div class="zoom">
+          <Icon name="zoom-out" />
+          <input type="range" min="1" max="50" bind:value={zoom} />
+          <Icon name="zoom-in" />
+        </div>
+      {/if}
     </header>
   {/if}
-  <div class="wavesurfer-timeline" bind:this={timelineEl} />
+  <div
+    class="wavesurfer-timeline"
+    bind:this={timelineEl}
+    class:hidden={!detail}
+  />
   <div class="wavesurfer" bind:this={containerEl} />
 </div>
 
@@ -78,7 +84,6 @@
   header {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: 1em;
     & > * {
       flex-basis: 50%;
     }
@@ -87,8 +92,12 @@
       align-items: center;
       input {
         flex-grow: 1;
-        margin: 0 .5em;
+        margin: 0 0.5em 1em 0.5em;
       }
     }
   }
+
+  .hidden {
+    display: none;
+  }
 </style>