wavesurfer-react/dist/cjs/hooks/useWavesurfer.cjs

react wrapper for wavesurfer.js

'use strict';

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

var React = require('react');
var createWavesurfer = require('../utils/createWavesurfer.cjs');
var createPlugin = require('../utils/createPlugin.cjs');
var getDifference = require('../utils/getDifference.cjs');

function createPluginsMap(curr, plugins) {
    const result = {};
    const stack = [
        ...plugins
    ];
    while(stack.length >= 1){
        const node = stack.shift();
        const hasThisPluginAlready = !!curr[node.key];
        if (hasThisPluginAlready) {
            result[node.key] = curr[node.key];
        } else {
            result[node.key] = createPlugin.default(node);
        }
    }
    return result;
}
function useWavesurfer({ container, plugins = [], onMount, ...props }) {
    const isInitilizing$ = React.useRef(false);
    const [pluginsMap, setPluginsMap] = React.useState({});
    // is used to keep track of initialized plugins
    const initialized$ = React.useRef([]);
    const [wavesurfer, setWavesurfer] = React.useState(null);
    React.useEffect(()=>{
        if (!container) return;
        // keep track of container
        const prevContainer = container;
        // do not allot to create WaveSurfer instance twice
        if (isInitilizing$.current) return;
        isInitilizing$.current = true;
        const _plugins = createPluginsMap(pluginsMap, plugins);
        initialized$.current = Object.keys(_plugins);
        const ws = createWavesurfer.default({
            container,
            ...props,
            plugins: Object.values(_plugins)
        });
        onMount?.(ws);
        setPluginsMap(_plugins);
        setWavesurfer(ws);
        return ()=>{
            // if container did not changed, but useEffect is still called,
            // prevent destroy if container or all-others hook dependencies are not changed
            if (prevContainer === container) return;
            ws.destroy();
        };
    }, [
        container
    ]);
    React.useEffect(()=>{
        if (wavesurfer) {
            const _plugins = createPluginsMap(pluginsMap, plugins);
            const { disabled, enabled } = getDifference.default(pluginsMap, _plugins);
            // destroy plugin, wavesurfer self removes it from plugin array
            Object.keys(disabled).forEach((plugKey)=>{
                disabled[plugKey].destroy();
            });
            Object.keys(enabled).forEach((pluginKey)=>{
                // do not initialize plugin under the same key twice or more times
                if (initialized$.current.includes(pluginKey)) return;
                console.log('register plugin', pluginKey, enabled[pluginKey]);
                wavesurfer?.registerPlugin(enabled[pluginKey]);
            });
            // register only enabled plugins
            initialized$.current = Object.keys(enabled);
            setPluginsMap(_plugins);
        }
    }, [
        plugins
    ]);
    return [
        wavesurfer,
        pluginsMap,
        Object.values(pluginsMap)
    ];
}

exports.default = useWavesurfer;