fix: resize AudioViewer
This commit is contained in:
parent
08595fda5a
commit
8c2ca53d33
1 changed files with 8 additions and 3 deletions
|
@ -27,8 +27,6 @@
|
||||||
let loaded = false;
|
let loaded = false;
|
||||||
|
|
||||||
let wavesurfer: WaveSurfer;
|
let wavesurfer: WaveSurfer;
|
||||||
// Trigger re-render by calling `drawBuffer()` on `detail` state change.
|
|
||||||
$: if (wavesurfer) wavesurfer.drawBuffer() && detail;
|
|
||||||
|
|
||||||
// Zoom handling
|
// Zoom handling
|
||||||
$: zoom = detail ? 1 : undefined;
|
$: zoom = detail ? 1 : undefined;
|
||||||
|
@ -137,6 +135,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let rootEl: HTMLElement;
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const WaveSurfer = await import("wavesurfer.js");
|
const WaveSurfer = await import("wavesurfer.js");
|
||||||
const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
|
const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
|
||||||
|
@ -258,10 +257,16 @@
|
||||||
wavesurfer.load(`${API_URL}/raw/${address}`);
|
wavesurfer.load(`${API_URL}/raw/${address}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const drawBufferThrottled = throttle(() => wavesurfer.drawBuffer(), 200);
|
||||||
|
const resizeObserver = new ResizeObserver((_entries) => {
|
||||||
|
drawBufferThrottled();
|
||||||
|
});
|
||||||
|
resizeObserver.observe(rootEl);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="audio" class:editable>
|
<div class="audio" class:editable bind:this={rootEl}>
|
||||||
{#if !loaded}
|
{#if !loaded}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
Loading…
Reference in a new issue