Height 'auto' unexpected height when splitChannel is defined

[htc36]

Hi there,

Love the libary by the way. I'm using height: 'auto' so the waveform fills its parent container (height: 250px). This work fantastically until I want to toggle split channel. Both canvases have height : auto and it caluculates height the same way. Where in theory it should do this.parent.clientHeight / 2 so it still fits nicely in the parent container.

What its doing when height is set to auto:

Screen.Recording.2024-05-08.at.11.46.08.mov

What I want it to do: ( i acheived this by hard coding the heights and divide by 2 if its dual channel)

Screen.Recording.2024-05-08.at.11.50.30.mov

Do you have any suggestions for what i could do? Obvs i could hard code the height instead of using auto. But I'd really rather define the height in a parent component so I don't have to go into wavesurfer config object to adjust it.

I've isolated it down to the getHeight() function

Would it be feasable to also take in audioData.numberOfChannels into the calculation. I was thinking a bit of logic:

if (optionsHeight === 'auto') {
 // Insert logic to check overlay is not true on any of splitArray parameter
 if (this.parent.clientHeight && optionsSplitChannel) return this.parent.clientHeight / (audioData.numberOfChannels || 1)

 return this.parent.clientHeight || defaultHeight
}

Let me know your thoughts

[katspaugh]

Hey, good catch! Dividing by numberOfChannels sounds good to me, happy to accept a PR.

[htc36]

Created PR: #3705