Progress color breaking with 7.4.1

[solher]

Hey, first of all, thanks a lot for your work on the lib 🙏

I was using a somewhat old version of Wavesurfer.js (in the 7.x) and I upgraded to 7.7.5. When I did that, I realized that I had lost the display of the progress. The cursor was still there but not the progress color anymore.

I downgraded until I found the culprit and I realized that is stopped working between 7.4.0 and 7.4.1. I looked at the changelog and indeed, it looked like something was touched related to progress in 7.4.1.

7.4.0:

7.4.1:

Any idea of what could be the problem? If it can be of any help, I'm using Wavesurfer.js with:

• An already existing Hls.js video element that I'm binding using the media field of the configuration.
• Precalculated peaks that I'm loading using the peaks field of the configuration.

Thanks!

[katspaugh]

It would be helpful to see your initialization options

[solher]

Ah yes sorry, here is the init useEffect:

  useEffect(() => {
    if (!waveform.current || !s.nowPlayingBeat) return

    const cfg = {
      backend: 'MediaElement',
      container: waveform.current,
      height: 50,
      barWidth: 2,
      barRadius: 1,
      cursorWidth: 2,
      waveColor: '#ffffff80',
      progressColor: '#ffffff',
      cursorColor: '#ffffff',
    } as WaveSurferOptions

    const hls = new Hls()
    if (s.nowPlayingBeat.files.stream) {
      hls.loadSource(s.nowPlayingBeat.files.stream.url)
      if (video.current) {
        hls.attachMedia(video.current)
        cfg.media = video.current
        cfg.peaks = [s.nowPlayingBeat.files.stream.peaks]
      }
    }

    const newWavesurfer = WaveSurfer.create(cfg)
    wavesurfer.current = newWavesurfer

    newWavesurfer.on('ready', async () => {
      if (!s.isPlaying) return
      newWavesurfer.getMediaElement().play()
    })
    newWavesurfer.on('play', async () => s.play())
    newWavesurfer.on('pause', async () => s.pause())

    return () => {
      wavesurfer.current?.destroy()
      wavesurfer.current = null
      hls.destroy()
    }
  }, [s.nowPlayingBeat])

[katspaugh]

I see, it looks like clipping doesn't work with semi-transparent colors. As a workaround, you could set the waveColor to #91959B.

[solher]

Ah you're right, perfect, thank you!

[theDanielJLewis]

Any word on if this will be fixed?

I'm running into a situation where I cannot predict the background color, so I need waveColor to be transparent and progressColor at full opacity, thus, I cannot make a "fake" transparency as it might clash with a different background color.