Fix: load was called twice

package.json

@@ -72,10 +72,10 @@
     "@typescript-eslint/parser": "^7.8.0",
     "cypress": "^13.9.0",
     "cypress-image-snapshot": "^4.0.1",
-    "eslint": "^9.2.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
+    "eslint": "^8",
+    "eslint-config-prettier": "^8",
+    "eslint-plugin-prettier": "^4",
+    "prettier": "^2",
     "rollup": "^4.17.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^5.4.5"

src/renderer.ts

@@ -15,7 +15,7 @@ type RendererEvents = {
 
 class Renderer extends EventEmitter<RendererEvents> {
   private static MAX_CANVAS_WIDTH = 4000
-  private static MAX_NODES = 100
+  private static MAX_NODES = 10
   private options: WaveSurferOptions
   private parent: HTMLElement
   private container: HTMLElement
@@ -518,7 +518,7 @@ class Renderer extends EventEmitter<RendererEvents> {
     }
 
     const totalWidth = width / pixelRatio
-    let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth)
+    let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth * 2, totalWidth)
     let drawnIndexes: Record<number, boolean> = {}
 
     // Adjust width to avoid gaps between canvases when using bars
@@ -563,16 +563,15 @@ class Renderer extends EventEmitter<RendererEvents> {
 
     // Draw the canvases in the viewport first
     draw(startCanvas)
-    draw(startCanvas + 1)
 
     // Subscribe to the scroll event to draw additional canvases
-    if (numCanvases > 2) {
-      this.unsubscribeOnScroll = this.on('scroll', (startX) => {
-        const canvasIndex = Math.floor(startX * numCanvases)
+    if (numCanvases > 1) {
+      this.unsubscribeOnScroll = this.on('scroll', () => {
+        const { scrollLeft } = this.scrollContainer
+        const canvasIndex = Math.ceil((scrollLeft / totalWidth) * numCanvases)
         clearCanvases()
         draw(canvasIndex - 1)
         draw(canvasIndex)
-        draw(canvasIndex + 1)
       })
     }
   }

src/wavesurfer.ts

@@ -182,17 +182,20 @@ class WaveSurfer extends Player<WaveSurferEvents> {
     this.initTimerEvents()
     this.initPlugins()
 
+    // Read the initial URL before load has been called
+    const initialUrl = this.options.url || this.getSrc() || ''
+
     // Init and load async to allow external events to be registered
     Promise.resolve().then(() => {
       this.emit('init')
 
       // Load audio if URL or an external media with an src is passed,
       // of render w/o audio if pre-decoded peaks and duration are provided
-      const url = this.options.url || this.getSrc() || ''
-      if (url || (this.options.peaks && this.options.duration)) {
+      const { peaks, duration } = this.options
+      if (initialUrl || (peaks && duration)) {
         // Swallow async errors because they cannot be caught from a constructor call.
         // Subscribe to the wavesurfer's error event to handle them.
-        this.load(url, this.options.peaks, this.options.duration).catch(() => null)
+        this.load(initialUrl, peaks, duration).catch(() => null)
       }
     })
   }