[Question] Suppress click in waveform

[rowild]

Clicking into a waveform moves the playhead to the click position. Is there a way to suppress this functionality?

Background: The app consists of 2 steps:

• the first step must not allow to click into the waveform and change the playhead
• the 2nd step should allow it again.

Thank you!

UPDATE: I should add that it must still be possible to set markers via key strokes. Also, I currently assign a css class to the waveform container with "pointer-event: null". That works fine. However, I would love to know if there is a JS- or peaks-way. :-)

[chrisn]

Do you only want to disable the click to change playhead, or also disable click+drag to scroll the view?

[rowild]

Also click&drag should be disabled. (The user should not be allowed to interact at all with the waveform)

[chrisn]

Can you explain more about assigning CSS classes, I'm not sure I fully understand your question?

[rowild]

All I do is wrap a div around each view and add a respective css class:

<div class="[ zoomview-wrapper ]">
  <div id="zoomview" class="pointer-events-none"></div>
</div>

pointer-events-none is a tailwindcss class:

.pointer-events-none {
  pointer-events: none;
}

With JS I simply check the classList of a div:

// Either the waveform container directly:
const zoomview = document.getElementById('zoomview')
// or the wrapper element
const zoomview = document.querySelector('.zoomview-wrapper')
zoomview.classList.toggle('pointer-events-none')

I saw you added functions. Haven't checked them yet, but - THANK YOU!

[chrisn]

I just merged PR #424, happy to take any feedback. Maybe we don't need those functions, as setting the pointer-events in CSS also works!?

[chrisn]

I'll close this, given your feedback on #424. Thanks @rowild!