search

bbc / peaks.js

JavaScript UI component for interacting with audio waveforms
https://waveform.prototyping.bbc.co.uk
GNU Lesser General Public License v3.0
3.2k stars 279 forks source link

Custom segment markers are not interactable when using build tools (Webpack, Pacel) #368

Closed dutzi closed 2 years ago

dutzi commented 3 years ago

I'm trying to implement customized segment markers, but it seems that many popular build tools (Webpack, when using Create React App and Parcel) are breaking them, making them non-interact-able.

I've forked @chrisn's React Example, and made this.

I then created a createSegmentMarker function that instantiates the DefaultSegmentMarker I took straight from Peaks.js' code.

When running my fork you can create a segment (by clicking on Create Segment), and it will work, but that segment is not intractable. I.e., you cannot drag its handles to resize it.

dutzi commented 3 years ago

It seems like an issue related to how Konva is packaged.

When calling window.Konva (instead of importing) everything works.

chrisn commented 3 years ago

Thank you for reporting this. I wonder if changing Peaks.js to use Webpack or Parcel would help?

dutzi commented 3 years ago

Happy to help. I'll give it a shot, I think Rollup is more oriented towards third party libraries, like Peaks.js.

chrisn commented 3 years ago

Related: https://github.com/bbc/peaks.js/issues/310#issuecomment-855465401

chrisn commented 2 years ago

This is now fixed in v0.27.0, and I've updated the React example.

You can either use the Peaks.js ES bundle with Webpack or Rollup etc, or there is the peaks.ext.js / peaks.ext.min.js UMD build that does not include Konva.