Fix: very wide container canvas width

cypress/e2e/options.cy.js

@@ -598,7 +598,7 @@ describe('WaveSurfer options tests', () => {
     })
   })
 
-  it('should load a blob', () => {
+  it('should load a blob', (done) => {
     cy.window().then((win) => {
       const wavesurfer = win.WaveSurfer.create({
         container: id,
@@ -616,7 +616,30 @@ describe('WaveSurfer options tests', () => {
         10,
       )
 
-      cy.get(id).matchImageSnapshot('loadBlob')
+      wrapReady(wavesurfer).then(() => {
+        cy.get(id).matchImageSnapshot('loadBlob')
+        done()
+      })
+    })
+  })
+
+  it('should render in a very wide container', (done) => {
+    cy.window().then((win) => {
+      const container = win.document.querySelector(id)
+      container.style.width = '21000px'
+
+      const wavesurfer = win.WaveSurfer.create({
+        container,
+        url: '../../examples/audio/demo.wav',
+        peaks: new Array(512).fill(0.5).map((v, i) => v * Math.sin(i / 16)),
+      })
+
+      cy.get(id).matchImageSnapshot('very-wide-container')
+
+      wrapReady(wavesurfer).then(() => {
+        container.style.width = ''
+        done()
+      })
     })
   })
 })

src/renderer.ts

@@ -520,14 +520,8 @@ class Renderer extends EventEmitter<RendererEvents> {
   ) {
     const pixelRatio = this.getPixelRatio()
     const { clientWidth } = this.scrollContainer
-
-    // Render a single canvas if it fits in the viewport
-    if (clientWidth * pixelRatio >= width) {
-      this.renderSingleCanvas(channelData, options, clientWidth, height, 0, canvasContainer, progressContainer)
-      return
-    }
-
     const totalWidth = width / pixelRatio
+
     let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth)
     let drawnIndexes: Record<number, boolean> = {}
 
@@ -568,6 +562,16 @@ class Renderer extends EventEmitter<RendererEvents> {
 
     // Calculate how many canvases to render
     const numCanvases = Math.ceil(totalWidth / singleCanvasWidth)
+
+    // Render all canvases if the waveform doesn't scroll
+    if (!this.isScrollable) {
+      for (let i = 0; i < numCanvases; i++) {
+        draw(i)
+      }
+      return
+    }
+
+    // Lazy rendering
     const viewPosition = this.scrollContainer.scrollLeft / totalWidth
     const startCanvas = Math.floor(viewPosition * numCanvases)