wavesurfer-react
Version:
react wrapper for wavesurfer.js
54 lines • 2.33 kB
JavaScript
import { useEffect, useRef, useState } from "react";
import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";
import useRegionEvent from "../hooks/useRegionEvent";
import useWavesurferContext from "../hooks/useWavesurferContext";
import { UpdatableRegionProps } from "../constants/updatableRegionProps";
import useRegionPluginEvent from "../hooks/useRegionPluginEvent";
export const Region = ({ onOver, onLeave, onClick, onDoubleClick, onIn, onOut, onRemove, onUpdate, onUpdateEnd, ...props }) => {
const [waveSurfer, , plugins] = useWavesurferContext();
const regionPlug = plugins.find(p => p instanceof RegionsPlugin);
const isRenderedCache = useRef(false);
const [regionRef, setRegionRef] = useState(null);
useEffect(() => {
return () => {
regionRef?.remove();
};
}, [regionRef]);
useEffect(() => {
// If there is a regionRef, then process update on any props update
regionRef?.setOptions(UpdatableRegionProps.reduce((result, prop) => {
if (regionRef[prop] !== props[prop]) {
return {
...result,
[prop]: props[prop],
};
}
return result;
}, { id: props.id }));
}, UpdatableRegionProps.map((prop) => props[prop]));
useEffect(() => {
if (!isRenderedCache.current && waveSurfer) {
isRenderedCache.current = true;
let region = regionPlug?.getRegions().find(r => r.id === props.id);
if (!region) {
region = regionPlug?.addRegion(props);
}
if (!region)
return;
setRegionRef(region);
}
// eslint-disable-next-line
}, [waveSurfer, regionPlug]);
useRegionEvent(regionRef, "click", onClick);
useRegionEvent(regionRef, "over", onOver);
useRegionEvent(regionRef, "leave", onLeave);
useRegionEvent(regionRef, "dblclick", onDoubleClick);
useRegionPluginEvent(regionPlug, "region-in", onIn);
useRegionPluginEvent(regionPlug, "region-out", onOut);
useRegionEvent(regionRef, "remove", onRemove);
useRegionEvent(regionRef, "update", onUpdate);
useRegionEvent(regionRef, "update-end", onUpdateEnd);
return null;
};
export default Region;
//# sourceMappingURL=Region.js.map