@uimkit/uikit-react/dist/esm/components/UIMessage/MessageAudio.js

<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>

import { __assign } from 'tslib';
import React__default, { useState, useRef, useCallback, useEffect } from 'react';
import { Icon } from '../Icon/Icon.js';
import { IconTypes } from '../Icon/type.js';
import '../../context/TranslationContext.js';
import '../../context/UIKitContext.js';
import '../../context/ComponentContext.js';
import { useChatActionContext } from '../../context/ChatActionContext.js';
import '../../context/MessageInputContext.js';
import '../../context/UIMessageContext.js';
import { useChatStateContext } from '../../context/ChatStateContext.js';

function MessageAudioWithContext(props) {
    props.context; var message = props.message, children = props.children;
    var setAudioSource = useChatActionContext('MessageAudioWithContext').setAudioSource;
    var audioSource = useChatStateContext().audioSource;
    var _a = useState(0), currentTime = _a[0], setCurrentTime = _a[1];
    var audioRef = useRef(null);
    var _b = useState(false), playClassName = _b[0], setPlayClassName = _b[1];
    var play = useCallback(function () {
        if (audioSource && audioSource !== (audioRef === null || audioRef === void 0 ? void 0 : audioRef.current)) {
            audioSource.pause();
            audioSource.currentTime = 0;
            setAudioSource(null);
        }
        if (audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) {
            if (!audioRef.current.paused) {
                audioRef.current.pause();
                endFunction();
            }
            else {
                audioRef.current.play();
                setPlayClassName(true);
                setAudioSource(audioRef.current);
            }
        }
    }, [audioRef, audioSource]);
    var pauseFunction = function () {
        setPlayClassName(false);
    };
    var endFunction = function () {
        setAudioSource(null);
        audioRef.current.currentTime = 0;
        pauseFunction();
    };
    useEffect(function () {
        if (audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) {
            audioRef.current.addEventListener('pause', pauseFunction);
            audioRef.current.addEventListener('ended', endFunction);
            audioRef.current.addEventListener('canplay', function () {
                var _a, _b;
                setCurrentTime(parseInt("".concat((_b = (_a = audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0), 10));
            });
        }
        return function () {
            if (audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) {
                audioRef.current.removeEventListener('pause', pauseFunction);
                audioRef.current.removeEventListener('ended', endFunction);
            }
        };
    }, [audioRef]);
    return (React__default.createElement("div", { className: "message-audio" },
        React__default.createElement("div", { className: "message-audio-content message-audio-".concat(message.flow) },
            React__default.createElement(Icon, { className: "".concat(message === null || message === void 0 ? void 0 : message.flow, " ").concat(playClassName ? 'playing' : ''), type: IconTypes.VOICE, width: 16, height: 16, onClick: play }),
            React__default.createElement("span", null, "".concat(currentTime, "s"))),
        React__default.createElement("audio", { src: message.audio.url, ref: audioRef, controls: true, className: "message-audio-none" },
            React__default.createElement("track", { kind: "captions" })),
        children));
}
var MemoizedMessageAudio = React__default.memo(MessageAudioWithContext);
function MessageAudio(props) {
    return (React__default.createElement(MemoizedMessageAudio, __assign({}, props)));
}

export { MessageAudio };
//# sourceMappingURL=MessageAudio.js.map