Single Region update option problems

[Schwankenson]

Bug description

I`m loading new audiodata in my wavesurfer with loadBlob function. I want the regions to stay there for performance reason: I then do a time update for them with something like:

region.setOptions({
          start,
          end,
        });

This time update is not shown correctly. Regions are a bit time shifted. I do not want to clear and reset all regions because of performance. I have a lot of regions in my wavesurfer instance.

So I checked the code and found out, that the totalDuration is set in the SingleRegion constructor and is not updated on wavesurfer audiodata reload.

UPDATE: When setting start and end the same value, and making the region a marker with this, the update does not work as well. Styles are initialized in initElement function. And most of them not updated later.

Suggested solution

In the region plugin constructor there could be something like this:

this.wavesurfer.on("ready", () => {
      for (const wsRegion of this.wavesurfer.getRegions()) {
        this.totalDuration = this.wavesurfer.getDuration();
        this.numberOfChannels = this.wavesurfer.getDecodedData().numberOfChannels;
      }
    });

And the initElement should be split in a initElement and updateElementStyles. The updateElementStyles should then be called after region option update.

My monkeypatch:

export function monkeypatchRegionAfterBlobOrOptionChange(
  wsRegion: Region,
  wavesurfer: WaveSurfer
) {
  // Set total duration and number of channels
  wsRegion.totalDuration = wavesurfer.getDuration();
  wsRegion.numberOfChannels = wavesurfer.getDecodedData()?.numberOfChannels;

  // Update styles
  const isMarker = wsRegion.start === wsRegion.end;

  let elementTop = 0;
  let elementHeight = 100;

  if (
    wsRegion.channelIdx >= 0 &&
    wsRegion.channelIdx < wsRegion.numberOfChannels
  ) {
    elementHeight = 100 / wsRegion.numberOfChannels;
    elementTop = elementHeight * wsRegion.channelIdx;
  }

  wsRegion.element.style.top = `${elementTop}%`;
  wsRegion.element.style.height = `${elementHeight}%`;
  wsRegion.element.style.backgroundColor = isMarker ? "none" : wsRegion.color;
  wsRegion.element.style.borderLeft = isMarker
    ? "2px solid " + wsRegion.color
    : "none";

  // Add / remove resize handles
  if (
    !isMarker &&
    (wsRegion.resize || wsRegion.resizeStart || wsRegion.resizeEnd)
  ) {
    wsRegion.removeResizeHandles(wsRegion.element);
    wsRegion.addResizeHandles(wsRegion.element);
  } else {
    wsRegion.removeResizeHandles(wsRegion.element);
  }
}

Why do you not make a pull request

Oops—my brain’s currently locked in project-mode and refuses to RSVP to any side quests. Pull request? Not today, silly rabbit! 🐰 I’ll hop back to it once this sprint is in the bag.

[katspaugh]

So I checked the code and found out, that the totalDuration is set in the SingleRegion constructor and is not updated on wavesurfer audiodata reload.

That's a bug, good catch! I'll create an issue for it.

[Schwankenson]

Hey @katspaugh, thank you!

DId you see that there is more missing region update stuff (see my monkeypatch function, it contains everything)

• When settings region with setOptions to start==end or back to start!=end, the style is not updated correctly from marker style and back (background-color and resize handles)
• When changings resizeStart or resizeEnd the resizebars and not updated correctly

All things which are done on region create and then not updated on setOptions. Maybe there is more. Region updates did not seem to be in focus when region plugin was developed.