Fix: limit resize observer to width

katspaugh · Jan 4, 2024 · 1383759 · 1383759
1 parent 9829f93
commit 1383759
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/renderer.ts b/src/renderer.ts
@@ -24,6 +24,7 @@ class Renderer extends EventEmitter<RendererEvents> {
   private isScrollable = false
   private audioData: AudioBuffer | null = null
   private resizeObserver: ResizeObserver | null = null
+  private lastContainerWidth: number = 0
   private isDragging = false
 
   constructor(options: WaveSurferOptions, audioElement?: HTMLElement) {
@@ -103,11 +104,18 @@ class Renderer extends EventEmitter<RendererEvents> {
     // Re-render the waveform on container resize
     const delay = this.createDelay(100)
     this.resizeObserver = new ResizeObserver(() => {
-      delay(() => this.reRender())
+      delay(() => this.onContainerResize())
     })
     this.resizeObserver.observe(this.scrollContainer)
   }
 
+  private onContainerResize() {
+    const width = this.parent.clientWidth
+    if (width === this.lastContainerWidth && this.options.height !== 'auto') return
+    this.lastContainerWidth = width
+    this.reRender()
+  }
+
   private initDrag() {
     makeDraggable(
       this.wrapper,