From 8c2ca53d33f6e16ef8d98bc92308d106ca85342a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 7 Mar 2023 19:42:55 +0100
Subject: [PATCH] fix: resize AudioViewer

---
 webui/src/components/display/blobs/AudioViewer.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/display/blobs/AudioViewer.svelte b/webui/src/components/display/blobs/AudioViewer.svelte
index 559d255..3636121 100644
--- a/webui/src/components/display/blobs/AudioViewer.svelte
+++ b/webui/src/components/display/blobs/AudioViewer.svelte
@@ -27,8 +27,6 @@
   let loaded = false;
 
   let wavesurfer: WaveSurfer;
-  // Trigger re-render by calling `drawBuffer()` on `detail` state change.
-  $: if (wavesurfer) wavesurfer.drawBuffer() && detail;
 
   // Zoom handling
   $: zoom = detail ? 1 : undefined;
@@ -137,6 +135,7 @@
     }
   }
 
+  let rootEl: HTMLElement;
   onMount(async () => {
     const WaveSurfer = await import("wavesurfer.js");
     const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
@@ -258,10 +257,16 @@
         wavesurfer.load(`${API_URL}/raw/${address}`);
       }
     }
+
+    const drawBufferThrottled = throttle(() => wavesurfer.drawBuffer(), 200);
+    const resizeObserver = new ResizeObserver((_entries) => {
+      drawBufferThrottled();
+    });
+    resizeObserver.observe(rootEl);
   });
 </script>
 
-<div class="audio" class:editable>
+<div class="audio" class:editable bind:this={rootEl}>
   {#if !loaded}
     <Spinner centered />
   {/if}