stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/components/MediaRecorder/classes/MediaRecorderController.js

@@ -1,4 +1,3 @@
-import { __assign, __awaiter, __generator } from "tslib";
 import fixWebmDuration from 'fix-webm-duration';
 import { nanoid } from 'nanoid';
 import { AmplitudeRecorder, DEFAULT_AMPLITUDE_RECORDER_CONFIG, } from './AmplitudeRecorder';
@@ -10,31 +9,31 @@ import { createFileFromBlobs, getExtensionFromMimeType, getRecordedMediaTypeFrom
 import { defaultTranslatorFunction } from '../../../i18n';
 import { isSafari } from '../../../utils/browsers';
 import { mergeDeepUndefined } from '../../../utils/mergeDeep';
-var RECORDED_MIME_TYPE_BY_BROWSER = {
+const RECORDED_MIME_TYPE_BY_BROWSER = {
     audio: {
         others: 'audio/webm',
         safari: 'audio/mp4;codecs=mp4a.40.2',
     },
 };
-export var POSSIBLE_TRANSCODING_MIME_TYPES = ['audio/wav', 'audio/mp3'];
-export var DEFAULT_MEDIA_RECORDER_CONFIG = {
+export const POSSIBLE_TRANSCODING_MIME_TYPES = ['audio/wav', 'audio/mp3'];
+export const DEFAULT_MEDIA_RECORDER_CONFIG = {
     mimeType: isSafari()
         ? RECORDED_MIME_TYPE_BY_BROWSER.audio.safari
         : RECORDED_MIME_TYPE_BY_BROWSER.audio.others,
 };
-export var DEFAULT_AUDIO_TRANSCODER_CONFIG = {
+export const DEFAULT_AUDIO_TRANSCODER_CONFIG = {
     sampleRate: 16000,
     targetMimeType: 'audio/mp3',
 };
-var disposeOfMediaStream = function (stream) {
-    if (!(stream === null || stream === void 0 ? void 0 : stream.active))
+const disposeOfMediaStream = (stream) => {
+    if (!stream?.active)
         return;
-    stream.getTracks().forEach(function (track) {
+    stream.getTracks().forEach((track) => {
         track.stop();
         stream.removeTrack(track);
     });
 };
-var logError = function (e) { return e && console.error('[MEDIA RECORDER ERROR]', e); };
+const logError = (e) => e && console.error('[MEDIA RECORDER ERROR]', e);
 export var MediaRecordingState;
 (function (MediaRecordingState) {
     MediaRecordingState["PAUSED"] = "paused";
@@ -45,269 +44,219 @@ export var RecordingAttachmentType;
 (function (RecordingAttachmentType) {
     RecordingAttachmentType["VOICE_RECORDING"] = "voiceRecording";
 })(RecordingAttachmentType || (RecordingAttachmentType = {}));
-var MediaRecorderController = /** @class */ (function () {
-    function MediaRecorderController(_a) {
-        var _b = _a === void 0 ? {} : _a, config = _b.config, generateRecordingTitle = _b.generateRecordingTitle, t = _b.t;
-        var _this = this;
+export class MediaRecorderController {
+    constructor({ config, generateRecordingTitle, t } = {}) {
         this.recordedChunkDurations = [];
         this.recordedData = [];
         this.recordingState = new BehaviorSubject(undefined);
         this.recording = new BehaviorSubject(undefined);
         this.error = new Subject();
         this.notification = new Subject();
-        this.generateRecordingTitle = function (mimeType) {
-            if (_this.customGenerateRecordingTitle) {
-                return _this.customGenerateRecordingTitle(mimeType);
+        this.generateRecordingTitle = (mimeType) => {
+            if (this.customGenerateRecordingTitle) {
+                return this.customGenerateRecordingTitle(mimeType);
             }
-            return "".concat(_this.mediaType, "_recording_").concat(new Date().toISOString(), ".").concat(getExtensionFromMimeType(mimeType)); // extension needed so that desktop Safari can play the asset
+            return `${this.mediaType}_recording_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`; // extension needed so that desktop Safari can play the asset
         };
-        this.makeVoiceRecording = function () { return __awaiter(_this, void 0, void 0, function () {
-            var mimeType, blob, file;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (this.recordingUri)
-                            URL.revokeObjectURL(this.recordingUri);
-                        if (!this.recordedData.length)
-                            return [2 /*return*/];
-                        mimeType = this.mediaRecorderConfig.mimeType;
-                        blob = new Blob(this.recordedData, { type: mimeType });
-                        if (!mimeType.match('audio/webm')) return [3 /*break*/, 2];
-                        return [4 /*yield*/, fixWebmDuration(blob, this.durationMs, {
-                                logger: function () { return null; }, // prevents polluting the browser console
-                            })];
-                    case 1:
-                        // The browser does not include duration metadata with the recorded blob
-                        blob = _c.sent();
-                        _c.label = 2;
-                    case 2:
-                        if (!!mimeType.match('audio/mp4')) return [3 /*break*/, 4];
-                        return [4 /*yield*/, transcode(__assign({ blob: blob }, this.transcoderConfig))];
-                    case 3:
-                        blob = _c.sent();
-                        _c.label = 4;
-                    case 4:
-                        if (!blob)
-                            return [2 /*return*/];
-                        this.recordingUri = URL.createObjectURL(blob);
-                        file = createFileFromBlobs({
-                            blobsArray: [blob],
-                            fileName: this.generateRecordingTitle(blob.type),
-                            mimeType: blob.type,
-                        });
-                        return [2 /*return*/, {
-                                asset_url: this.recordingUri,
-                                duration: this.durationMs / 1000,
-                                file_size: blob.size,
-                                localMetadata: {
-                                    file: file,
-                                    id: nanoid(),
-                                },
-                                mime_type: blob.type,
-                                title: file.name,
-                                type: RecordingAttachmentType.VOICE_RECORDING,
-                                waveform_data: resampleWaveformData((_b = (_a = this.amplitudeRecorder) === null || _a === void 0 ? void 0 : _a.amplitudes.value) !== null && _b !== void 0 ? _b : [], this.amplitudeRecorderConfig.sampleCount),
-                            }];
-                }
+        this.makeVoiceRecording = async () => {
+            if (this.recordingUri)
+                URL.revokeObjectURL(this.recordingUri);
+            if (!this.recordedData.length)
+                return;
+            const { mimeType } = this.mediaRecorderConfig;
+            let blob = new Blob(this.recordedData, { type: mimeType });
+            if (mimeType.match('audio/webm')) {
+                // The browser does not include duration metadata with the recorded blob
+                blob = await fixWebmDuration(blob, this.durationMs, {
+                    logger: () => null, // prevents polluting the browser console
+                });
+            }
+            if (!mimeType.match('audio/mp4')) {
+                blob = await transcode({
+                    blob,
+                    ...this.transcoderConfig,
+                });
+            }
+            if (!blob)
+                return;
+            this.recordingUri = URL.createObjectURL(blob);
+            const file = createFileFromBlobs({
+                blobsArray: [blob],
+                fileName: this.generateRecordingTitle(blob.type),
+                mimeType: blob.type,
             });
-        }); };
-        this.handleErrorEvent = function (e) {
-            var error = e.error;
+            return {
+                asset_url: this.recordingUri,
+                duration: this.durationMs / 1000,
+                file_size: blob.size,
+                localMetadata: {
+                    file,
+                    id: nanoid(),
+                },
+                mime_type: blob.type,
+                title: file.name,
+                type: RecordingAttachmentType.VOICE_RECORDING,
+                waveform_data: resampleWaveformData(this.amplitudeRecorder?.amplitudes.value ?? [], this.amplitudeRecorderConfig.sampleCount),
+            };
+        };
+        this.handleErrorEvent = (e) => {
+            const { error } = e;
             logError(error);
-            _this.error.next(error);
-            _this.notification.next({
-                text: _this.t('An error has occurred during recording'),
+            this.error.next(error);
+            this.notification.next({
+                text: this.t('An error has occurred during recording'),
                 type: 'error',
             });
         };
-        this.handleDataavailableEvent = function (e) { return __awaiter(_this, void 0, void 0, function () {
-            var recording, e_1;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!e.data.size)
-                            return [2 /*return*/];
-                        if (this.mediaType !== 'audio')
-                            return [2 /*return*/];
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        this.recordedData.push(e.data);
-                        return [4 /*yield*/, this.makeVoiceRecording()];
-                    case 2:
-                        recording = _b.sent();
-                        if (!recording)
-                            return [2 /*return*/];
-                        (_a = this.signalRecordingReady) === null || _a === void 0 ? void 0 : _a.call(this, recording);
-                        this.recording.next(recording);
-                        return [3 /*break*/, 4];
-                    case 3:
-                        e_1 = _b.sent();
-                        logError(e_1);
-                        this.error.next(e_1);
-                        this.notification.next({
-                            text: this.t('An error has occurred during the recording processing'),
-                            type: 'error',
-                        });
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        this.resetRecordingState = function () {
-            _this.recordedData = [];
-            _this.recording.next(undefined);
-            _this.recordingState.next(undefined);
-            _this.recordedChunkDurations = [];
-            _this.startTime = undefined;
+        this.handleDataavailableEvent = async (e) => {
+            if (!e.data.size)
+                return;
+            if (this.mediaType !== 'audio')
+                return;
+            try {
+                this.recordedData.push(e.data);
+                const recording = await this.makeVoiceRecording();
+                if (!recording)
+                    return;
+                this.signalRecordingReady?.(recording);
+                this.recording.next(recording);
+            }
+            catch (e) {
+                logError(e);
+                this.error.next(e);
+                this.notification.next({
+                    text: this.t('An error has occurred during the recording processing'),
+                    type: 'error',
+                });
+            }
+        };
+        this.resetRecordingState = () => {
+            this.recordedData = [];
+            this.recording.next(undefined);
+            this.recordingState.next(undefined);
+            this.recordedChunkDurations = [];
+            this.startTime = undefined;
         };
-        this.cleanUp = function () {
-            var _a;
-            _this.resetRecordingState();
-            if (_this.recordingUri)
-                URL.revokeObjectURL(_this.recordingUri);
-            (_a = _this.amplitudeRecorder) === null || _a === void 0 ? void 0 : _a.close();
-            if (_this.mediaRecorder) {
-                disposeOfMediaStream(_this.mediaRecorder.stream);
-                _this.mediaRecorder.removeEventListener('dataavailable', _this.handleDataavailableEvent);
-                _this.mediaRecorder.removeEventListener('error', _this.handleErrorEvent);
+        this.cleanUp = () => {
+            this.resetRecordingState();
+            if (this.recordingUri)
+                URL.revokeObjectURL(this.recordingUri);
+            this.amplitudeRecorder?.close();
+            if (this.mediaRecorder) {
+                disposeOfMediaStream(this.mediaRecorder.stream);
+                this.mediaRecorder.removeEventListener('dataavailable', this.handleDataavailableEvent);
+                this.mediaRecorder.removeEventListener('error', this.handleErrorEvent);
             }
         };
-        this.start = function () { return __awaiter(_this, void 0, void 0, function () {
-            var error, error, error, stream, error_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if ([MediaRecordingState.RECORDING, MediaRecordingState.PAUSED].includes(this.recordingState.value)) {
-                            error = new Error('Cannot start recording. Recording already in progress');
-                            logError(error);
-                            this.error.next(error);
-                            return [2 /*return*/];
-                        }
-                        // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
-                        if (!navigator.mediaDevices) {
-                            error = new Error('Media recording is not supported');
-                            logError(error);
-                            this.error.next(error);
-                            this.notification.next({ text: this.t('Error starting recording'), type: 'error' });
-                            return [2 /*return*/];
-                        }
-                        if (this.mediaType === 'video') {
-                            error = new Error("Video recording is not supported. Provided MIME type: ".concat(this.mediaRecorderConfig.mimeType));
-                            logError(error);
-                            this.error.next(error);
-                            this.notification.next({ text: this.t('Error starting recording'), type: 'error' });
-                            return [2 /*return*/];
-                        }
-                        if (!!this.permission.state.value) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.permission.check()];
-                    case 1:
-                        _a.sent();
-                        _a.label = 2;
-                    case 2:
-                        if (this.permission.state.value === 'denied') {
-                            logError(new Error('Permission denied'));
-                            return [2 /*return*/];
-                        }
-                        _a.label = 3;
-                    case 3:
-                        _a.trys.push([3, 5, , 6]);
-                        return [4 /*yield*/, navigator.mediaDevices.getUserMedia({ audio: true })];
-                    case 4:
-                        stream = _a.sent();
-                        this.mediaRecorder = new MediaRecorder(stream, this.mediaRecorderConfig);
-                        this.mediaRecorder.addEventListener('dataavailable', this.handleDataavailableEvent);
-                        this.mediaRecorder.addEventListener('error', this.handleErrorEvent);
-                        this.startTime = new Date().getTime();
-                        this.mediaRecorder.start();
-                        if (this.mediaType === 'audio' && stream) {
-                            this.amplitudeRecorder = new AmplitudeRecorder({
-                                config: this.amplitudeRecorderConfig,
-                                stream: stream,
-                            });
-                            this.amplitudeRecorder.start();
-                        }
-                        this.recordingState.next(MediaRecordingState.RECORDING);
-                        return [3 /*break*/, 6];
-                    case 5:
-                        error_1 = _a.sent();
-                        logError(error_1);
-                        this.cancel();
-                        this.error.next(error_1);
-                        this.notification.next({ text: this.t('Error starting recording'), type: 'error' });
-                        return [3 /*break*/, 6];
-                    case 6: return [2 /*return*/];
+        this.start = async () => {
+            if ([MediaRecordingState.RECORDING, MediaRecordingState.PAUSED].includes(this.recordingState.value)) {
+                const error = new Error('Cannot start recording. Recording already in progress');
+                logError(error);
+                this.error.next(error);
+                return;
+            }
+            // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
+            if (!navigator.mediaDevices) {
+                const error = new Error('Media recording is not supported');
+                logError(error);
+                this.error.next(error);
+                this.notification.next({ text: this.t('Error starting recording'), type: 'error' });
+                return;
+            }
+            if (this.mediaType === 'video') {
+                const error = new Error(`Video recording is not supported. Provided MIME type: ${this.mediaRecorderConfig.mimeType}`);
+                logError(error);
+                this.error.next(error);
+                this.notification.next({ text: this.t('Error starting recording'), type: 'error' });
+                return;
+            }
+            if (!this.permission.state.value) {
+                await this.permission.check();
+            }
+            if (this.permission.state.value === 'denied') {
+                logError(new Error('Permission denied'));
+                return;
+            }
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                this.mediaRecorder = new MediaRecorder(stream, this.mediaRecorderConfig);
+                this.mediaRecorder.addEventListener('dataavailable', this.handleDataavailableEvent);
+                this.mediaRecorder.addEventListener('error', this.handleErrorEvent);
+                this.startTime = new Date().getTime();
+                this.mediaRecorder.start();
+                if (this.mediaType === 'audio' && stream) {
+                    this.amplitudeRecorder = new AmplitudeRecorder({
+                        config: this.amplitudeRecorderConfig,
+                        stream,
+                    });
+                    this.amplitudeRecorder.start();
                 }
-            });
-        }); };
-        this.pause = function () {
-            var _a, _b;
-            if (_this.recordingState.value !== MediaRecordingState.RECORDING)
+                this.recordingState.next(MediaRecordingState.RECORDING);
+            }
+            catch (error) {
+                logError(error);
+                this.cancel();
+                this.error.next(error);
+                this.notification.next({ text: this.t('Error starting recording'), type: 'error' });
+            }
+        };
+        this.pause = () => {
+            if (this.recordingState.value !== MediaRecordingState.RECORDING)
                 return;
-            if (_this.startTime) {
-                _this.recordedChunkDurations.push(new Date().getTime() - _this.startTime);
-                _this.startTime = undefined;
+            if (this.startTime) {
+                this.recordedChunkDurations.push(new Date().getTime() - this.startTime);
+                this.startTime = undefined;
             }
-            (_a = _this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.pause();
-            (_b = _this.amplitudeRecorder) === null || _b === void 0 ? void 0 : _b.stop();
-            _this.recordingState.next(MediaRecordingState.PAUSED);
+            this.mediaRecorder?.pause();
+            this.amplitudeRecorder?.stop();
+            this.recordingState.next(MediaRecordingState.PAUSED);
         };
-        this.resume = function () {
-            var _a, _b;
-            if (_this.recordingState.value !== MediaRecordingState.PAUSED)
+        this.resume = () => {
+            if (this.recordingState.value !== MediaRecordingState.PAUSED)
                 return;
-            _this.startTime = new Date().getTime();
-            (_a = _this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.resume();
-            (_b = _this.amplitudeRecorder) === null || _b === void 0 ? void 0 : _b.start();
-            _this.recordingState.next(MediaRecordingState.RECORDING);
+            this.startTime = new Date().getTime();
+            this.mediaRecorder?.resume();
+            this.amplitudeRecorder?.start();
+            this.recordingState.next(MediaRecordingState.RECORDING);
         };
-        this.stop = function () {
-            var _a, _b, _c;
-            var recording = _this.recording.value;
+        this.stop = () => {
+            const recording = this.recording.value;
             if (recording)
                 return Promise.resolve(recording);
-            if (![MediaRecordingState.PAUSED, MediaRecordingState.RECORDING].includes((((_a = _this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) || '')))
+            if (![MediaRecordingState.PAUSED, MediaRecordingState.RECORDING].includes((this.mediaRecorder?.state || '')))
                 return Promise.resolve(undefined);
-            if (_this.startTime) {
-                _this.recordedChunkDurations.push(new Date().getTime() - _this.startTime);
-                _this.startTime = undefined;
+            if (this.startTime) {
+                this.recordedChunkDurations.push(new Date().getTime() - this.startTime);
+                this.startTime = undefined;
             }
-            var result = new Promise(function (res) {
-                _this.signalRecordingReady = res;
+            const result = new Promise((res) => {
+                this.signalRecordingReady = res;
             });
-            (_b = _this.mediaRecorder) === null || _b === void 0 ? void 0 : _b.stop();
-            (_c = _this.amplitudeRecorder) === null || _c === void 0 ? void 0 : _c.stop();
-            _this.recordingState.next(MediaRecordingState.STOPPED);
+            this.mediaRecorder?.stop();
+            this.amplitudeRecorder?.stop();
+            this.recordingState.next(MediaRecordingState.STOPPED);
             return result;
         };
-        this.cancel = function () {
-            _this.stop();
-            _this.cleanUp();
+        this.cancel = () => {
+            this.stop();
+            this.cleanUp();
         };
         this.t = t || defaultTranslatorFunction;
-        this.amplitudeRecorderConfig = mergeDeepUndefined(__assign({}, config === null || config === void 0 ? void 0 : config.amplitudeRecorderConfig), DEFAULT_AMPLITUDE_RECORDER_CONFIG);
-        this.mediaRecorderConfig = mergeDeepUndefined(__assign({}, config === null || config === void 0 ? void 0 : config.mediaRecorderConfig), DEFAULT_MEDIA_RECORDER_CONFIG);
-        this.transcoderConfig = mergeDeepUndefined(__assign({}, config === null || config === void 0 ? void 0 : config.transcoderConfig), DEFAULT_AUDIO_TRANSCODER_CONFIG);
+        this.amplitudeRecorderConfig = mergeDeepUndefined({ ...config?.amplitudeRecorderConfig }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);
+        this.mediaRecorderConfig = mergeDeepUndefined({ ...config?.mediaRecorderConfig }, DEFAULT_MEDIA_RECORDER_CONFIG);
+        this.transcoderConfig = mergeDeepUndefined({ ...config?.transcoderConfig }, DEFAULT_AUDIO_TRANSCODER_CONFIG);
         if (!POSSIBLE_TRANSCODING_MIME_TYPES.includes(this.transcoderConfig.targetMimeType)) {
             this.transcoderConfig.targetMimeType = DEFAULT_AUDIO_TRANSCODER_CONFIG.targetMimeType;
         }
-        var mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
+        const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
         if (!mediaType) {
-            throw new Error("Unsupported media type (supported audio or video only). Provided mimeType: ".concat(this.mediaRecorderConfig.mimeType));
+            throw new Error(`Unsupported media type (supported audio or video only). Provided mimeType: ${this.mediaRecorderConfig.mimeType}`);
         }
         this.mediaType = mediaType;
-        this.permission = new BrowserPermission({ mediaType: mediaType });
+        this.permission = new BrowserPermission({ mediaType });
         this.customGenerateRecordingTitle = generateRecordingTitle;
     }
-    Object.defineProperty(MediaRecorderController.prototype, "durationMs", {
-        get: function () {
-            return this.recordedChunkDurations.reduce(function (acc, val) { return acc + val; }, 0);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return MediaRecorderController;
-}());
-export { MediaRecorderController };
+    get durationMs() {
+        return this.recordedChunkDurations.reduce((acc, val) => acc + val, 0);
+    }
+}

package/dist/components/MediaRecorder/classes/index.d.ts

@@ -1,4 +1,3 @@
 export * from './BrowserPermission';
 export * from './MediaRecorderController';
 export type { AmplitudeRecorderConfig } from './AmplitudeRecorder';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MediaRecorder/hooks/index.d.ts

@@ -1,2 +1 @@
 export type { CustomAudioRecordingConfig, RecordingController } from './useMediaRecorder';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MediaRecorder/hooks/useMediaRecorder.d.ts

@@ -17,4 +17,3 @@ type UseMediaRecorderParams<StreamChatGenerics extends DefaultStreamChatGenerics
 };
 export declare const useMediaRecorder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, uploadAttachment, }: UseMediaRecorderParams<StreamChatGenerics>) => RecordingController<StreamChatGenerics>;
 export {};
-//# sourceMappingURL=useMediaRecorder.d.ts.map

package/dist/components/MediaRecorder/hooks/useMediaRecorder.js

@@ -1,61 +1,46 @@
-import { __awaiter, __generator } from "tslib";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslationContext } from '../../../context';
 import { MediaRecorderController } from '../classes';
-export var useMediaRecorder = function (_a) {
-    var asyncMessagesMultiSendEnabled = _a.asyncMessagesMultiSendEnabled, enabled = _a.enabled, generateRecordingTitle = _a.generateRecordingTitle, handleSubmit = _a.handleSubmit, recordingConfig = _a.recordingConfig, uploadAttachment = _a.uploadAttachment;
-    var t = useTranslationContext('useMediaRecorder').t;
-    var _b = useState(), recording = _b[0], setRecording = _b[1];
-    var _c = useState(), recordingState = _c[0], setRecordingState = _c[1];
-    var _d = useState(), permissionState = _d[0], setPermissionState = _d[1];
-    var _e = useState(false), isScheduledForSubmit = _e[0], scheduleForSubmit = _e[1];
-    var recorder = useMemo(function () {
-        return enabled
-            ? new MediaRecorderController({
-                config: recordingConfig !== null && recordingConfig !== void 0 ? recordingConfig : {},
-                generateRecordingTitle: generateRecordingTitle,
-                t: t,
-            })
-            : undefined;
-    }, [recordingConfig, enabled, generateRecordingTitle, t]);
-    var completeRecording = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var recording;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!recorder)
-                        return [2 /*return*/];
-                    return [4 /*yield*/, recorder.stop()];
-                case 1:
-                    recording = _a.sent();
-                    if (!recording)
-                        return [2 /*return*/];
-                    return [4 /*yield*/, uploadAttachment(recording)];
-                case 2:
-                    _a.sent();
-                    if (!asyncMessagesMultiSendEnabled) {
-                        // FIXME: cannot call handleSubmit() directly as the function has stale reference to attachments
-                        scheduleForSubmit(true);
-                    }
-                    recorder.cleanUp();
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [asyncMessagesMultiSendEnabled, recorder, uploadAttachment]);
-    useEffect(function () {
+export const useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, uploadAttachment, }) => {
+    const { t } = useTranslationContext('useMediaRecorder');
+    const [recording, setRecording] = useState();
+    const [recordingState, setRecordingState] = useState();
+    const [permissionState, setPermissionState] = useState();
+    const [isScheduledForSubmit, scheduleForSubmit] = useState(false);
+    const recorder = useMemo(() => enabled
+        ? new MediaRecorderController({
+            config: recordingConfig ?? {},
+            generateRecordingTitle,
+            t,
+        })
+        : undefined, [recordingConfig, enabled, generateRecordingTitle, t]);
+    const completeRecording = useCallback(async () => {
+        if (!recorder)
+            return;
+        const recording = await recorder.stop();
+        if (!recording)
+            return;
+        await uploadAttachment(recording);
+        if (!asyncMessagesMultiSendEnabled) {
+            // FIXME: cannot call handleSubmit() directly as the function has stale reference to attachments
+            scheduleForSubmit(true);
+        }
+        recorder.cleanUp();
+    }, [asyncMessagesMultiSendEnabled, recorder, uploadAttachment]);
+    useEffect(() => {
         if (!isScheduledForSubmit)
             return;
         handleSubmit();
         scheduleForSubmit(false);
     }, [handleSubmit, isScheduledForSubmit]);
-    useEffect(function () {
+    useEffect(() => {
         if (!recorder)
             return;
         recorder.permission.watch();
-        var recordingSubscription = recorder.recording.subscribe(setRecording);
-        var recordingStateSubscription = recorder.recordingState.subscribe(setRecordingState);
-        var permissionStateSubscription = recorder.permission.state.subscribe(setPermissionState);
-        return function () {
+        const recordingSubscription = recorder.recording.subscribe(setRecording);
+        const recordingStateSubscription = recorder.recordingState.subscribe(setRecordingState);
+        const permissionStateSubscription = recorder.permission.state.subscribe(setPermissionState);
+        return () => {
             recorder.cancel();
             recorder.permission.unwatch();
             recordingSubscription.unsubscribe();
@@ -64,10 +49,10 @@ export var useMediaRecorder = function (_a) {
         };
     }, [recorder]);
     return {
-        completeRecording: completeRecording,
-        permissionState: permissionState,
-        recorder: recorder,
-        recording: recording,
-        recordingState: recordingState,
+        completeRecording,
+        permissionState,
+        recorder,
+        recording,
+        recordingState,
     };
 };

package/dist/components/MediaRecorder/index.d.ts

@@ -3,4 +3,3 @@ export * from './AudioRecorder';
 export * from './hooks';
 export { MediaRecordingState } from './classes/MediaRecorderController';
 export { RecordingPermission } from './classes/BrowserPermission';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MediaRecorder/observable/BehaviorSubject.d.ts

@@ -8,4 +8,3 @@ export declare class BehaviorSubject<T> extends Subject<T> {
     subscribe(observerOrNext: ObserverOrNext<T>): Subscription;
     next(value: T): void;
 }
-//# sourceMappingURL=BehaviorSubject.d.ts.map