Fix: splitChannels height (#3402)

* Fix: splitChannels height

* Add a test

Author: katspaugh

cypress/e2e/options.cy.js

@@ -309,6 +309,30 @@ describe('WaveSurfer options tests', () => {
     })
   })
 
+  it('should split channels with individual channel heights', (done) => {
+    cy.window().then((win) => {
+      const wavesurfer = win.WaveSurfer.create({
+        container: id,
+        url: '../../examples/audio/stereo.mp3',
+        splitChannels: [
+          {
+            waveColor: 'red',
+            height: 60,
+          },
+          {
+            waveColor: 'blue',
+            height: 30,
+          },
+        ],
+      })
+
+      wrapReady(wavesurfer).then(() => {
+        cy.get(id).matchImageSnapshot('split-channels-heights')
+        done()
+      })
+    })
+  })
+
   it('should use plugins with Regions', (done) => {
     cy.window().then((win) => {
       const regions = win.Regions.create()

src/renderer.ts

@@ -122,11 +122,11 @@ class Renderer extends EventEmitter<RendererEvents> {
     )
   }
 
-  private getHeight(): number {
+  private getHeight(optionsHeight?: WaveSurferOptions['height']): number {
     const defaultHeight = 128
-    if (this.options.height == null) return defaultHeight
-    if (!isNaN(Number(this.options.height))) return Number(this.options.height)
-    if (this.options.height === 'auto') return this.parent.clientHeight || defaultHeight
+    if (optionsHeight == null) return defaultHeight
+    if (!isNaN(Number(optionsHeight))) return Number(optionsHeight)
+    if (optionsHeight === 'auto') return this.parent.clientHeight || defaultHeight
     return defaultHeight
   }
 
@@ -164,7 +164,7 @@ class Renderer extends EventEmitter<RendererEvents> {
           z-index: 2;
         }
         :host .canvases {
-          min-height: ${this.getHeight()}px;
+          min-height: ${this.getHeight(this.options.height)}px;
         }
         :host .canvases > div {
           position: relative;
@@ -449,7 +449,7 @@ class Renderer extends EventEmitter<RendererEvents> {
   private renderChannel(channelData: Array<Float32Array | number[]>, options: WaveSurferOptions, width: number) {
     // A container for canvases
     const canvasContainer = document.createElement('div')
-    const height = this.getHeight()
+    const height = this.getHeight(options.height)
     canvasContainer.style.height = `${height}px`
     this.canvasWrapper.style.minHeight = `${height}px`
     this.canvasWrapper.appendChild(canvasContainer)

src/wavesurfer.ts

@@ -62,7 +62,7 @@ export type WaveSurferOptions = {
   /** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */
   sampleRate?: number
   /** Render each audio channel as a separate waveform */
-  splitChannels?: WaveSurferOptions[]
+  splitChannels?: Partial<WaveSurferOptions>[]
   /** Stretch the waveform to the full height */
   normalize?: boolean
   /** The list of plugins to initialize on start */