wavesurfer-react/dist/cjs/components/Region.cjs

react wrapper for wavesurfer.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var useRegionEvent = require('../hooks/useRegionEvent.cjs');
var useWavesurferContext = require('../hooks/useWavesurferContext.cjs');
var updatableRegionProps = require('../constants/updatableRegionProps.cjs');
var useRegionPluginEvent = require('../hooks/useRegionPluginEvent.cjs');
var isRegionsPlugin = require('../utils/isRegionsPlugin.cjs');

const Region = ({ onOver, onLeave, onClick, onDoubleClick, onIn, onOut, onRemove, onUpdate, onUpdateEnd, ...props })=>{
    const [waveSurfer, , plugins] = useWavesurferContext.default();
    const regPlugin = plugins.find((plugin)=>isRegionsPlugin.isRegionsPlugin(plugin));
    const regionPlugin = React.useMemo(()=>regPlugin, [
        plugins
    ]);
    const isRenderedCache = React.useRef(false);
    const [regionRef, setRegionRef] = React.useState(null);
    React.useEffect(()=>{
        return ()=>{
            regionRef?.remove();
        };
    }, [
        regionRef
    ]);
    React.useEffect(()=>{
        // If there is a regionRef, then process update on any props update
        regionRef?.setOptions(updatableRegionProps.UpdatableRegionProps.reduce((result, prop)=>{
            if (regionRef[prop] !== props[prop]) {
                return {
                    ...result,
                    [prop]: props[prop]
                };
            }
            return result;
        }, {
            id: props.id
        }));
    }, updatableRegionProps.UpdatableRegionProps.map((prop)=>props[prop]));
    React.useEffect(()=>{
        if (!isRenderedCache.current && waveSurfer) {
            isRenderedCache.current = true;
            let region = regionPlugin?.getRegions().find((r)=>r.id === props.id);
            if (!region) {
                region = regionPlugin?.addRegion(props);
            }
            if (!region) return;
            setRegionRef(region);
        }
    // eslint-disable-next-line
    }, [
        waveSurfer,
        regionPlugin
    ]);
    useRegionEvent.default(regionRef, "click", onClick);
    useRegionEvent.default(regionRef, "over", onOver);
    useRegionEvent.default(regionRef, "leave", onLeave);
    useRegionEvent.default(regionRef, "dblclick", onDoubleClick);
    useRegionPluginEvent.default(regionPlugin, "region-in", onIn);
    useRegionPluginEvent.default(regionPlugin, "region-out", onOut);
    useRegionEvent.default(regionRef, "remove", onRemove);
    useRegionEvent.default(regionRef, "update", onUpdate);
    useRegionEvent.default(regionRef, "update-end", onUpdateEnd);
    return null;
};

exports.Region = Region;
exports.default = Region;