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

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

'use strict';

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

var tslib = require('tslib');
var React = require('react');
var Icon = require('../Icon/Icon.js');
var type = require('../Icon/type.js');
require('../../context/TranslationContext.js');
require('../../context/UIKitContext.js');
require('../../context/ComponentContext.js');
var ChatActionContext = require('../../context/ChatActionContext.js');
require('../../context/MessageInputContext.js');
require('../../context/UIMessageContext.js');
var ChatStateContext = require('../../context/ChatStateContext.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function MessageAudioWithContext(props) {
    props.context; var message = props.message, children = props.children;
    var setAudioSource = ChatActionContext.useChatActionContext('MessageAudioWithContext').setAudioSource;
    var audioSource = ChatStateContext.useChatStateContext().audioSource;
    var _a = React.useState(0), currentTime = _a[0], setCurrentTime = _a[1];
    var audioRef = React.useRef(null);
    var _b = React.useState(false), playClassName = _b[0], setPlayClassName = _b[1];
    var play = React.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();
    };
    React.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["default"].createElement("div", { className: "message-audio" },
        React__default["default"].createElement("div", { className: "message-audio-content message-audio-".concat(message.flow) },
            React__default["default"].createElement(Icon.Icon, { className: "".concat(message === null || message === void 0 ? void 0 : message.flow, " ").concat(playClassName ? 'playing' : ''), type: type.IconTypes.VOICE, width: 16, height: 16, onClick: play }),
            React__default["default"].createElement("span", null, "".concat(currentTime, "s"))),
        React__default["default"].createElement("audio", { src: message.audio.url, ref: audioRef, controls: true, className: "message-audio-none" },
            React__default["default"].createElement("track", { kind: "captions" })),
        children));
}
var MemoizedMessageAudio = React__default["default"].memo(MessageAudioWithContext);
function MessageAudio(props) {
    return (React__default["default"].createElement(MemoizedMessageAudio, tslib.__assign({}, props)));
}

exports.MessageAudio = MessageAudio;
//# sourceMappingURL=MessageAudio.js.map