Feat: width option (#3259)

* Feat: width option

* Snapshots

cypress/e2e/options.cy.js

@@ -546,4 +546,42 @@ describe('WaveSurfer options tests', () => {
       })
     })
   })
+
+  it('should accept a numeric width option', () => {
+    cy.window().then((win) => {
+      return new Promise((resolve, reject) => {
+        win.wavesurfer = win.WaveSurfer.create({
+          container: id,
+          url: '../../examples/audio/demo.wav',
+          width: 100,
+        })
+
+        win.wavesurfer.once('ready', () => {
+          cy.get(id).matchImageSnapshot('width-100')
+          win.wavesurfer.setOptions({ width: 300 })
+          cy.get(id).matchImageSnapshot('width-300')
+          resolve()
+        })
+      })
+    })
+  })
+
+  it('should accept a CSS value for the width option', () => {
+    cy.window().then((win) => {
+      return new Promise((resolve, reject) => {
+        win.wavesurfer = win.WaveSurfer.create({
+          container: id,
+          url: '../../examples/audio/demo.wav',
+          width: '10rem',
+        })
+
+        win.wavesurfer.once('ready', () => {
+          cy.get(id).matchImageSnapshot('width-10rem')
+          win.wavesurfer.setOptions({ width: '200px' })
+          cy.get(id).matchImageSnapshot('width-200px')
+          resolve()
+        })
+      })
+    })
+  })
 })

examples/all-options.js

@@ -7,6 +7,8 @@ const options = {
   container: 'body',
   /** The height of the waveform in pixels */
   height: 128,
+  /** The width of the waveform in pixels or any CSS value; defaults to 100% */
+  width: 300,
   /** Render each audio channel as a separate waveform */
   splitChannels: false,
   /** Stretch the waveform to the full height */
@@ -69,6 +71,12 @@ const schema = {
     max: 512,
     step: 1,
   },
+  width: {
+    value: 300,
+    min: 10,
+    max: 2000,
+    step: 1,
+  },
   cursorWidth: {
     value: 1,
     min: 0,

src/renderer.ts

@@ -138,6 +138,7 @@ class Renderer extends EventEmitter<RendererEvents> {
       <style>
         :host {
           user-select: none;
+          min-width: 1px;
         }
         :host audio {
           display: block;
@@ -524,6 +525,12 @@ class Renderer extends EventEmitter<RendererEvents> {
     this.progressWrapper.innerHTML = ''
     this.wrapper.style.width = ''
 
+    // Width
+    if (this.options.width != null) {
+      this.scrollContainer.style.width =
+        typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width
+    }
+
     // Determine the width of the waveform
     const pixelRatio = window.devicePixelRatio || 1
     const parentWidth = this.scrollContainer.clientWidth

src/wavesurfer.ts

@@ -6,10 +6,12 @@ import Renderer from './renderer.js'
 import Timer from './timer.js'
 
 export type WaveSurferOptions = {
-  /** Required: an HTML element or selector where the waveform will be rendered. */
+  /** Required: an HTML element or selector where the waveform will be rendered */
   container: HTMLElement | string
   /** The height of the waveform in pixels, or "auto" to fill the container height */
   height?: number | 'auto'
+  /** The width of the waveform in pixels or any CSS value; defaults to 100% */
+  width?: number | string
   /** The color of the waveform */
   waveColor?: string | string[] | CanvasGradient
   /** The color of the progress mask */