markers drag handlers not initialized with empty markers array in initial config

[winthers]

Wavesurfer.js version(s):

the current version of the markers plugin as copy and pasted from the repo on (12/15/2021 11:18 am)

Browser and operating system version(s):

n/a

Code needed to reproduce the issue:

  var wavesurfer = WaveSurfer.create({
      container: '#wavesurfer',
      backend: 'MediaElement',
      waveColor: 'violet',
      progressColor: 'purple',
      plugins: [
          MarkersPlugin.create({
              markers: [ ]
          })
      ]
  });
 wavesurfer.load(`/audio/foobar.mp3`);
 wavesurfer.on('ready',  () => {
     wavesurfer.addMarker({ draggable: true, time: 0, label: 'test', color: 'red' })
});

Use behaviour needed to reproduce the issue:

code from markers.plugin.js

         this._onBackendCreated = () => {
             this.wrapper = this.wavesurfer.drawer.wrapper;
             if (this.params.markers) {
                 this.params.markers.forEach(marker => this.add(marker));
             }
             window.addEventListener('resize', this._onResize, true);
             window.addEventListener('orientationchange', this._onResize, true);
             this.wavesurfer.on('zoom', this._onResize);
 
// This check will prevent any markers added after the fact from have the draggable functionality.
            //  if (!this.markers.find(marker => marker.draggable)){
            //      return;
            //  }
 
             this.onMouseMove = (e) => this._onMouseMove(e);
             window.addEventListener('mousemove', this.onMouseMove);
 
             this.onMouseUp = (e) => this._onMouseUp(e);
             window.addEventListener("mouseup", this.onMouseUp);
         };
 

[thijstriemstra]

thanks for the report @winthers Can you make a pull request that removes that statement? Why is that check there in the first place?

[remarcable]

@winthers A workaround I found is to initialize the MarkersPlugin with a marker and a draggable: true property. It seems like the marker can be empty, and if it is shown you could call .clear() after initialization to hide it again:

var wavesurfer = WaveSurfer.create({
    container: '#wavesurfer',
    backend: 'MediaElement',
    waveColor: 'violet',
    progressColor: 'purple',
    plugins: [
        MarkersPlugin.create({
            markers: [{
                draggable: true
            }]
        })
    ]
});