@sendbird/uikit-react/cjs/VoiceRecorder/context.js

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

'use strict';

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

var React = require('react');
var LocalizationContext = require('../chunks/bundle-DPDyqKIJ.js');
var ui_Modal = require('../chunks/bundle-DZlJeh0V.js');
var consts = require('../chunks/bundle-Cfh78Xnm.js');
var utils = require('../chunks/bundle-CkQrhwR6.js');
var useSendbird = require('../chunks/bundle-Bq15P9qk.js');
require('../chunks/bundle-Conb-pOy.js');
require('../chunks/bundle-BbrBawlX.js');
require('../chunks/bundle-Cyl6_qLo.js');
require('react-dom');
require('../chunks/bundle-Fv6PNPGZ.js');
require('../ui/IconButton.js');
require('../ui/Button.js');
require('../chunks/bundle-zgmRG2KL.js');
require('../ui/Icon.js');
require('../chunks/bundle-t8BQsgL5.js');
require('../chunks/bundle-B19RHFpR.js');
require('@sendbird/chat');
require('@sendbird/chat/groupChannel');
require('@sendbird/chat/openChannel');

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

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

var Context = React.createContext({
    start: utils.noop,
    stop: utils.noop,
    isRecordable: false,
});
var VoiceRecorderProvider = function (props) {
    var _a;
    var children = props.children;
    var state = useSendbird.useSendbird().state;
    var config = state.config;
    var logger = config.logger, groupChannel = config.groupChannel;
    var _b = React.useState(null), mediaRecorder = _b[0], setMediaRecorder = _b[1];
    var _c = React.useState(false), isRecordable = _c[0], setIsRecordable = _c[1];
    var _d = React.useState(false), permissionWarning = _d[0], setPermissionWarning = _d[1];
    var stringSet = LocalizationContext.useLocalization().stringSet;
    var isVoiceMessageEnabled = groupChannel.enableVoiceMessage;
    var _e = React.useState(null), webAudioUtils = _e[0], setWebAudioUtils = _e[1];
    var browserSupportMimeType = (_a = consts.BROWSER_SUPPORT_MIME_TYPE_LIST.find(function (mimeType) { return MediaRecorder.isTypeSupported(mimeType); })) !== null && _a !== void 0 ? _a : '';
    if (isVoiceMessageEnabled && !browserSupportMimeType) {
        logger.error('VoiceRecorder: Browser does not support mimeType', { mimmeTypes: consts.BROWSER_SUPPORT_MIME_TYPE_LIST });
    }
    React.useEffect(function () {
        if (isVoiceMessageEnabled && !webAudioUtils) {
            Promise.resolve().then(function () { return require('../chunks/bundle-CvzQ7oQz.js'); }).then(function (module) { return setWebAudioUtils(module); });
        }
    }, [isVoiceMessageEnabled, webAudioUtils]);
    var start = React.useCallback(function (eventHandler) {
        var _a, _b;
        if (isVoiceMessageEnabled && !webAudioUtils) {
            logger.error('VoiceRecorder: Recording audio processor is being loaded.');
            return;
        }
        var checkPermission = function () {
            try {
                // Type '"microphone"' is not assignable to type 'PermissionName'.ts(2322)
                // this is typescript issue
                // https://github.com/microsoft/TypeScript/issues/33923
                // @ts-expect-error
                navigator.permissions.query({ name: 'microphone' }).then(function (result) {
                    if (result.state === 'denied') {
                        logger.warning('VoiceRecorder: Permission denied.');
                        setPermissionWarning(true);
                    }
                });
            }
            catch (error) {
                logger.warning('VoiceRecorder: Failed to check permission.', error);
            }
        };
        logger.info('VoiceRecorder: Start recording.');
        if (mediaRecorder) {
            stop();
            logger.info('VoiceRecorder: Previous mediaRecorder is stopped.');
        }
        checkPermission();
        (_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia) === null || _b === void 0 ? void 0 : _b.call(_a, { audio: true }).then(function (stream) {
            var _a;
            logger.info('VoiceRecorder: Succeeded getting media stream.', stream);
            setIsRecordable(true);
            var mediaRecorder = new MediaRecorder(stream, {
                mimeType: browserSupportMimeType,
                audioBitsPerSecond: consts.VOICE_RECORDER_AUDIO_BIT_RATE,
            });
            // when recording stops
            mediaRecorder.ondataavailable = function (e) {
                logger.info('VoiceRecorder: Succeeded getting an available data.', e.data);
                var audioFile = new File([e.data], consts.VOICE_MESSAGE_FILE_NAME, {
                    lastModified: new Date().getTime(),
                    type: consts.VOICE_MESSAGE_MIME_TYPE,
                });
                webAudioUtils === null || webAudioUtils === void 0 ? void 0 : webAudioUtils.downsampleToWav(audioFile, function (buffer) {
                    var _a;
                    var mp3Buffer = webAudioUtils === null || webAudioUtils === void 0 ? void 0 : webAudioUtils.encodeMp3(buffer);
                    var mp3blob = new Blob(mp3Buffer, { type: consts.VOICE_MESSAGE_MIME_TYPE });
                    var convertedAudioFile = new File([mp3blob], consts.VOICE_MESSAGE_FILE_NAME, {
                        lastModified: new Date().getTime(),
                        type: consts.VOICE_MESSAGE_MIME_TYPE,
                    });
                    (_a = eventHandler === null || eventHandler === void 0 ? void 0 : eventHandler.onRecordingEnded) === null || _a === void 0 ? void 0 : _a.call(eventHandler, convertedAudioFile);
                    logger.info('VoiceRecorder: Succeeded converting audio file.', convertedAudioFile);
                });
                var tracks = stream.getAudioTracks();
                tracks.forEach(function (track) { return track.stop(); });
                setIsRecordable(false);
            };
            mediaRecorder.onstart = (_a = eventHandler === null || eventHandler === void 0 ? void 0 : eventHandler.onRecordingStarted) !== null && _a !== void 0 ? _a : utils.noop;
            mediaRecorder === null || mediaRecorder === void 0 ? void 0 : mediaRecorder.start();
            setMediaRecorder(mediaRecorder);
        }).catch(function (err) {
            logger.error('VoiceRecorder: Failed getting media stream.', err);
            setMediaRecorder(null);
        });
    }, [mediaRecorder, webAudioUtils]);
    var stop = React.useCallback(function () {
        // Stop recording
        mediaRecorder === null || mediaRecorder === void 0 ? void 0 : mediaRecorder.stop();
        setMediaRecorder(null);
        setIsRecordable(false);
        logger.info('VoiceRecorder: Stop recording.');
    }, [mediaRecorder]);
    return (React__default.default.createElement(Context.Provider, { value: { start: start, stop: stop, isRecordable: isRecordable } },
        children,
        permissionWarning && (React__default.default.createElement(ui_Modal.Modal, { hideFooter: true, onClose: function () { return setPermissionWarning(false); } },
            React__default.default.createElement(React__default.default.Fragment, null, stringSet.VOICE_RECORDING_PERMISSION_DENIED)))));
};
var useVoiceRecorderContext = function () { return React.useContext(Context); };
var index = {
    VoiceRecorderProvider: VoiceRecorderProvider,
    useVoiceRecorderContext: useVoiceRecorderContext,
};

exports.VoiceRecorderProvider = VoiceRecorderProvider;
exports.default = index;
exports.useVoiceRecorderContext = useVoiceRecorderContext;
//# sourceMappingURL=context.js.map