2.0 Minimap: canvas click does nothing; Initial load does not display waveform

[PureSqncMedia]

Having trouble with minimap plugin on version 2

Wavesurfer.js version(s):

2.0 beta 2

Browser version(s):

Chrome Version 62.0.3202.94 (Official Build) (64-bit)

Code needed to reproduce the issue:

• Angular 1x.
• wavesurfer.js and Minimap plugin built into vendor.js file via gulp
• directive loads wavesurfer and minimap.
• controller inits minimap later

(1) Canvas click issue:

Clicking on minimap canvas scrolled the audio on 1x, now nothing happens. Only main WS container canvas can be intereacted with. Hopefully I am missing some minimap config detail

(2) Minimap waveform does not display on first initialization?

Minimap will not show waveform on first load.
** Soution found: Found that the sequence of loading the minimap cleared the problem.
Im not sure about the operations around promises but toggling the minimap before 'ready' seems to clear for me. code snippet:

vm.wavesurfer.load(activeUrl || null); vm.wavesurfer.once('ready', function () { // do stuff }); _toggleMinimap();

[PureSqncMedia]

Found that changing the backend to 'mediaelement' seems to clear the minimap render issue, but creates other problems. I think I need to add a timeout or something before loading minimap. does not seem to solve canvas interaction though

[thijstriemstra]

@PureSqncMedia can you try with 2.0.1?

[thijstriemstra]

related to f08cfbd perhaps.

[thijstriemstra]

Soution found: Found that the sequence of loading the minimap cleared the problem.

And can you make a pull request so we can take a look at the fix?

[PureSqncMedia]

@thijstriemstra I tried with 2.0.1 and still no interaction on the minimap canvas. I might try with 'mediaelement' backend, or is that not recommended?

The code fix I found for minimap canvas render is just loading sequence for wavesurfer. I dont believe valuable for a pr. I did not have the rendering or canvas interaction issues on 1.x versions though, same UI process

vm.player.wavesurfer.once('ready', function () {
      .. do stuff on ready, like play
      // loading minimap in here results in first track played not rendering minimap.
       // a subsequential load and load minimap seems to display correctly
        // so moved the add plugin part outside of ready block
});

//works first load
vm.wavesurfer.addPlugin(MiniMapPlugin.create(detail_minimap_wave_options)).initPlugin('minimap');

[roboswank]

@thijstriemstra @PureSqncMedia

This could be semi related to #1311

minimap.js line 113 (v2.0.3 of wavesurfer)

this.renderEvent =
            ws.params.backend === 'MediaElement' ? 'waveform-ready' : 'ready';

If I change that to this.renderEvent = 'ready';, minimap functions as it did before and can be passed in the plugins array just the same.

I only say it could be related to #1311 because it appears in both cases something was expecting there to be peak data available but there is not.
Right before waveform-ready is fired, this.backend.setPeaks(null) is called, and I do not see anything in there that would set the peaks before firing it.

I do not necessarily know what the desired behavior here is. Like what potential negatives would come from listening to the ready event instead.

Edit: I have a solution for the click issue. Will open PR and see what you think.

[elliottb303]

@thijstriemstra @roboswank Just updated and happy to see that minimap canvas works now! Thanks