update timelineplugin

[Ryomi-j]

Hello.
At first, I registered a timelineplugin to wavesurfer.
Additionally, I'd like to replace it with another one when a user zooms waveform.
I updated minPxPerSec with wavesurfer.zoom() method.
But I'm not sure how to update wavesurfer plugin.

I used registerPlugin method. But I realized that it is for add new plugins to wavesurfer not to update it.

Can you recommend a solution for me?

[katspaugh]

If you want to un-register a plugin, you should "destroy" it.

const wavesurfer = Wavesurfer.create({
  // ...
})
const timeline = TimelinePlugin.create({
  // ...
})
// Register the plugin for the first time
wavesurfer.registerPlugin(timeline)

// Afterwards

// Un-register the plugin
timeline.destroy()

// Register a new instance
const newTimeline = TimelinePlugin.create({
  // ...
})
wavesurfer.registerPlugin(newTimeline)

[Ryomi-j]

Thank you for your quick answer.
I did like you wrote above, but I faced another problem.
I could update timeline plugin of wavesurfer with your solution.
But the problem is that when i update zoom value, the timeline disappear.
Could you advice for me?

const rerenderWaveSurfer = (zoom: number) => {
    topTimeline.destroy();
    topTimeline = TimelinePlugin.create({
      ...TimeLineConfig,
      timeInterval: zoom / 100,
      primaryLabelInterval: zoom / 100,
    });

    wavesurfer?.registerPlugin(topTimeline);
  };

[katspaugh]

I think the bigger problem is that you have to do this in the first place. I would suggest making a PR to this project to make the Timeline plugin respond to zoom natively. Then you won't have to destroy/re-create it.

[Ryomi-j]

In that case, I'll try!

[katspaugh]

頑張って 💪

[SectionSoutienAnalytique]

Hi everyone, Did you find the solution ?