Ensure compatability between TimelinePlugin and RegionsPlugin

[alexgdiaz98]

A few sensible changes to ensure safe interaction between the TimelinePlugin and RegionsPlugin in the DOM.

Short description

Resolves #3293

Implementation details

TimelinePlugin wrapper element has pointer-events: none; to ensure mouse interaction with other elements above or below the timeline. The RegionsPlugin targets the canvases div in this.wavesurfer.getWrapper() as the draggable target to avoid unexpectedly targeting an incorrect div.

How to test it

const wavesurfer = WaveSurfer.create({
  container: '#wavesurfer-container',
})
const timeline = TimelinePlugin.create({
  container: wavesurfer.getWrapper(),
  insertPosition: 'beforebegin'
})
wavesurfer.registerPlugin(timeline)
const regions = RegionsPlugin.create()
wavesurfer.registerPlugin(regions)
regions.enableDragSelection()

Dragging anywhere on the canvas, including over the timeline, should create a region.

Screenshots

Checklist

• This PR is covered by e2e tests
• It introduces no breaking API changes

[katspaugh]

Thanks!