stopping propagation on click event for a Region to WaveForm

[BRIDGE-AI]

This is basic structure, as I know.

  <WaveForm>
      {regions.map((regionProps) => (
          <Region
              onUpdateEnd={handleRegionUpdate}
              onClick={(region) => {
                  region.play();
              }}
              key={regionProps.id}
              {...regionProps}
          />
      ))}
  </WaveForm>

And I have a listener implementation for whole Wavesurfer instance like this.

        wavesurferRef.current.on("click", (progress) => {
            play(); // play the waveform from clicked time and to the end
        });

In this case, these 2 callbacks(onClick for region and the on("click") for the wavesurferRef) are all called. The region event called first, and then wavesurfer click event called next.

I want to play all audio from clicked time when I clicked outside of all regions. And I want to play only the region area when I clicked a region of all.

1. Is this code correct to catch on click for regions? You have 'region-removed' event handler for region-removed on the example code below.

https://github.com/ShiiRochi/wavesurfer-react/blob/157f414a96dd9b6e2b66a4825849e96ebc8d21d8/demo/src/App.js#L167-L169

So, I thought 'region-click event could be possible. The Wavesurfer is listing 'region-click' event in the reference. - https://wavesurfer.xyz/plugins/regions But it's not working now.

        wavesurferRef.current.on("region-clicked", (region) => {
            console.log("region-click --> ", region);
        });

2. How can I modify this code when I want to stop propagating the event after called onClick() of regions and make on("click") has not called?

3. It seems that region.play() is playing all the audio from the time I clicked. It is same to wavesurferRef.current.play(). Is this intended or a bug?

[BRIDGE-AI]

Is anyone there?

[ShiiRochi]

When you place on click on region you use special region event listener, wavesurfer listens for the whole waveform, thus you should decide on your own how to structure your application and how to use existing wavesurfer.js API.

If events are called in the same order, i.e. if region is called first and waveform's level listener is called next, then you can use some temporal variable to disable waveform's listener after region's is called.

[BRIDGE-AI]

Thank you @ShiiRochi. Okay for the event listener.

One more, how can I catch the time and stop the player when the region ends.

[ShiiRochi]

Thank you @ShiiRochi. Okay for the event listener.

One more, how can I catch the time and stop the player when the region ends.

Region has start and end...if wavesurfer does not stop playing on region end, then you can try to listen to "progress" event and when progress reaches the regions end, i.e. progress === region.end, then you can call pause method of wavesurfer or similar to stop playing but keeping cursor position.

Whatever you decide, try to reach wavesurfer.js documentation and check what ways you have because as far as I remember, previously wavesurfer played regions fine, however currently I don't have enough time to track all its changes.

[BRIDGE-AI]

Thank you @ShiiRochi. Okay for the event listener. One more, how can I catch the time and stop the player when the region ends.

Region has start and end...if wavesurfer does not stop playing on region end, then you can try to listen to "progress" event and when progress reaches the regions end, i.e. progress === region.end, then you can call pause method of wavesurfer or similar to stop playing but keeping cursor position.

Whatever you decide, try to reach wavesurfer.js documentation and check what ways you have because as far as I remember, previously wavesurfer played regions fine, however currently I don't have enough time to track all its changes.

thank you for your answer.