stream-chat-react/dist/components/AudioPlayback/WithAudioPlayback.js

React components to create chat conversations or livestream style chat

import React, { useContext, useState } from 'react';
import { useEffect } from 'react';
import { AudioPlayerPool } from './AudioPlayerPool';
import { audioPlayerNotificationsPluginFactory } from './plugins/AudioPlayerNotificationsPlugin';
import { useChatContext, useTranslationContext } from '../../context';
import { useStateStore } from '../../store';
const AudioPlayerContext = React.createContext({
    audioPlayers: null,
});
export const WithAudioPlayback = ({ allowConcurrentPlayback, children, }) => {
    const [audioPlayers] = useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));
    useEffect(() => () => {
        audioPlayers.clear();
    }, [audioPlayers]);
    return (React.createElement(AudioPlayerContext.Provider, { value: { audioPlayers } }, children));
};
const makeAudioPlayerId = ({ requester, src }) => `${requester ?? 'requester-unknown'}:${src}`;
export const useAudioPlayer = ({ durationSeconds, fileSize, mimeType, playbackRates, plugins, requester = '', src, title, waveformData, }) => {
    const { client } = useChatContext();
    const { t } = useTranslationContext();
    const { audioPlayers } = useContext(AudioPlayerContext);
    const audioPlayer = src && audioPlayers
        ? audioPlayers.getOrAdd({
            durationSeconds,
            fileSize,
            id: makeAudioPlayerId({ requester, src }),
            mimeType,
            playbackRates,
            plugins,
            src,
            title,
            waveformData,
        })
        : undefined;
    useEffect(() => {
        if (!audioPlayer)
            return;
        /**
         * Avoid having to pass client and translation function to AudioPlayer instances
         * and instead provide plugin that takes care of translated notifications.
         */
        const notificationsPlugin = audioPlayerNotificationsPluginFactory({ client, t });
        audioPlayer.setPlugins((currentPlugins) => [
            ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),
            notificationsPlugin,
        ]);
    }, [audioPlayer, client, t]);
    return audioPlayer;
};
const activeAudioPlayerSelector = ({ activeAudioPlayer }) => ({
    activeAudioPlayer,
});
export const useActiveAudioPlayer = () => {
    const { audioPlayers } = useContext(AudioPlayerContext);
    const { activeAudioPlayer } = useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};
    return activeAudioPlayer;
};