Using bars with ZoomPlugin causes terrible zoom performance in non-chrome browsers

[jaredgei]

Bug description

I have barWidth set to 2 and barGap set to 1. When I use this setup with the ZoomPlugin, I get terrible zooming performance in Safari on my mac. I'm just zooming using the default mousewheel input using the trackpad on my mac, I don't have any additional slider created. When I remove barWidth and barGap, zoom performance is perfect. The more bars are onscreen, the worse this gets. Perhaps zoom could have a debounce option or use requestAnimationFrame so it re-renders less often? I'm using @wavesurfer/react if that makes a difference.

Environment

• Browser: Safari

Minimal code snippet

        <WavesurferPlayer
          url={audio}
          backend='WebAudio'
          waveColor='#0853aa'
          progressColor='#0853aa'
          cursorColor='#111111'
          cursorWidth={2}
          barWidth={2}
          barGap={1}
          height={200}
          onReady={(wavesurfer: any) => setWavesurfer(wavesurfer)}
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)} />

I'm registering ZoomPlugin like this, not sure if there's a better way to do it:

    if (!zoomPlugin.current) {
      zoomPlugin.current = ZoomPlugin.create();
      wavesurfer.registerPlugin(zoomPlugin.current);
    }

[jaredgei]

Small update but I tried this without @wavesurfer/react and I'm getting the same behavior, so it's definitely not a react specific issue. Here's my code.

  useEffect(() => {
    regionsPlugin.current = RegionsPlugin.create();
    zoomPlugin.current = ZoomPlugin.create();

    wavesurfer.current = Wavesurfer.create({
      container: annotationPlayer.current,
      url: audio,
      backend: 'WebAudio',
      waveColor: '#0853aa',
      progressColor: '#0853aa',
      cursorColor: '#111111',
      cursorWidth: 2,
      barWidth: 2,
      barGap: 1,
      height: 200,
      plugins: [zoomPlugin.current, regionsPlugin.current]
    });

    wavesurfer.current.on('ready', () => setLoading(false));
    wavesurfer.current.on('play', () => setPlaying(true));
    wavesurfer.current.on('pause', () => setPlaying(false));

    regionsPlugin.current.enableDragSelection({ color: 'rgba(8, 83, 170, 0.1)' });
    regionsPlugin.current.on('region-updated', onRegionsChanged);
    regionsPlugin.current.on('region-created', onRegionsChanged);
    regionsPlugin.current.on('region-removed', onRegionsChanged);

    return () => {
      regionsPlugin.current.un('region-updated', onRegionsChanged);
      regionsPlugin.current.un('region-created', onRegionsChanged);
      regionsPlugin.current.un('region-removed', onRegionsChanged);
      wavesurfer.current.un('play', () => setPlaying(true));
      wavesurfer.current.un('pause', () => setPlaying(false));
      wavesurfer.current.destroy();
    };
  }, []);