wavesurfer-react/dist/esm/hooks/useWavesurfer.js

react wrapper for wavesurfer.js

import { useRef, useState, useEffect } from 'react';
import createWavesurfer from '../utils/createWavesurfer.js';
import createPlugin from '../utils/createPlugin.js';
import getDifference from '../utils/getDifference.js';

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(node);
        }
    }
    return result;
}
function useWavesurfer({ container, plugins = [], onMount, ...props }) {
    const isInitilizing$ = useRef(false);
    const [pluginsMap, setPluginsMap] = useState({});
    // is used to keep track of initialized plugins
    const initialized$ = useRef([]);
    const [wavesurfer, setWavesurfer] = useState(null);
    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({
            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
    ]);
    useEffect(()=>{
        if (wavesurfer) {
            const _plugins = createPluginsMap(pluginsMap, plugins);
            const { disabled, enabled } = getDifference(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)
    ];
}

export { useWavesurfer as default };