Add a function to initialise Regions & Markers

[juliancheal]

I'm new to using Wavesurfer so this may not be a good idea 🙈

In my app I am saving regions (and markers) so that they are persistent. Then when the user loads the page the regions are still there. To do that I am creating new regions which I load from the database in the wavesurfer.on('decode') function. This is all seems to be working well, except:

When creating new regions we're emitting region-created events in the saveRegion function.
I tried unsubscribing from these events while I initalise the page using the un function. But some region-created events were still getting through.
In my backend code I have checks to make sure we don't create duplicate events, but the main issue is it's creating unnecessary network requests and db lookups.

My thought was to add another function to the Regions class to initialise a set of regions and that function wouldn't emit any events, or at least create a way to pass a parameter to addRegion to suppress the region-created event.

Before I attempted to create a PR, I thought I'd see if this is a wanted feature. Or maybe I've just not quite got the hang of wavesurfer and there is a better way to do what I wanted. Happy for feedback, comments, etc. :)

[katspaugh]

Have you considered creating those initial regions before subscribing to the region-created event?

[juliancheal]

Hi @katspaugh thanks for your reply. I thought that's what I was doing already.

Bellow is an except of my code. I load the regions from the db, and call regions.addRegion on each one. Then do some other setup stuff before calling regions.on('regions-created').

this.wavesurfer.on('decode', () => {
  this.loadRegions()
})

// More code here

this.regions.on('region-created', (region) => {
  this.saveRegions(region.start, region.end, region.id)
})

[katspaugh]

To be sequential, it should be

this.wavesurfer.on('decode', () => {
  this.loadRegions()

  this.regions.on('region-created', (region) => {
    this.saveRegions(region.start, region.end, region.id)
  })
})

And if your loadRegions function is asynchronous (loading from a JSON/DB?), then it should also wait for that using Promises. E.g.

loadRegions().then(() => {
  // Listen to region-created
})

[juliancheal]

Ah cool thank you very much.