Is there any option to disable clip path ?

[CenkErdonmez]

Hey ,

We are trying to create a app using wavesurfer.js , everything going great but we also want people to select regions from a video they upload . We managed to create frames set regions bla bla .. The problem we are having at the moment is that whenever we play the video because of the renderProgress function in node modules background of the canvas changes so we lose the frames. What we need is to disable clip path option that comes with the renderProgress function.

Hope someone can help.

[katspaugh]

There's no such option but we could refactor the code to not use clip-path. It was added here: #3285

[CenkErdonmez]

Thanks for the replay. We find a work around. Not the best way to fix it but we manage to manipulate the dom(you can see the code we used at the end) (sometimes it looks a little laggy though) . If there is any chance to add this as an option so we can pass it through when we need to draw frames to canvas it would be superb if no than no need to waste your time on it 😄

const canvases = document.querySelector(#waveform-${mediaId} > div).shadowRoot.querySelector('div > div > div.canvases');
canvases.style.clipPath = 'none';

[katspaugh]

Could you post a screenshot of how it looks with the clip-path still in place? And also a screenshot of the Dom tree with your video inserted. Just trying to understand how the progress div overlaps with it.

[CenkErdonmez]

Sorry for the late response gonna share few screenshots about it, ignore my drawing skills 😄 .

On screenshots you can see with clip path on and off. Also posted the elements without clip path.

[katspaugh]

Gotcha, thanks! I'll see if we can make it optional, or remove altogether.

By the way, does it still clip if progressColor: 'transparent' is set?

[CenkErdonmez]

Just tried with it still clip path removes frames.