defer loading to address race condition with event subscriptions #7
Conversation
| ) { | ||
| useEffect(() => { | ||
| if (!wavesurfer) return | ||
| if (!url) return |
There was a problem hiding this comment.
URL can be empty, it should still render a silent waveform.
There was a problem hiding this comment.
Thank you. I'll make the update soon and re-push.
|
The test was expecting I updated the test to not expect I also added a thorough example at examples/peaks, to simplify testing instead of using a separate demo repo. |
| /** | ||
| * Wavesurfer player component | ||
| * @see https://wavesurfer.xyz/docs/modules/wavesurfer | ||
| * @public | ||
| */ | ||
| const WavesurferPlayer = memo((props: WavesurferProps): ReactElement => { | ||
| const containerRef = useRef<HTMLDivElement | null>(null) | ||
| const [options, events] = useWavesurferProps(props) | ||
| const [{ url, peaks, duration, ...options }, events] = useWavesurferProps(props) |
There was a problem hiding this comment.
...options will probably create a new object on every render and should be memoized with useMemo.
|
I've made a PR in the main wavesurfer repo that will most likely fix this: katspaugh/wavesurfer.js#3762 Please let me know if it didn't and we can reopen this PR. Thanks! |
Regarding this issue I opened in the main branch, I've found a fix for the race condition exposed when using React with pre-calculated peaks.
This PR picks out the
{ url, peaks, duration }props from theoptionsobject on initialization, and passes them to a new hook,useWavesurferLoadto trigger loading after the Wavesurfer instance is attached and all events are subscribed.For your convenience, I've set up some tests in this demo project. This PR branch is included as a submodule. To set it up: clone the demo repo, run
git submodule init, then runnpm install && npm start.When running the demo, you can choose between loading with or without peaks. I've added some buttons to toggle between media files and to increase/decrease the barWidth prop, just to show that this fix does not break/regress any previous functionality.