stream-chat-react 11.14.0 → 11.15.0

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

@@ -0,0 +1,98 @@
+import { __awaiter, __generator } from "tslib";
+import { Subscription } from '../observable/Subscription';
+import { Subject } from '../observable/Subject';
+import { BehaviorSubject } from '../observable/BehaviorSubject';
+export var RecordingPermission;
+(function (RecordingPermission) {
+    RecordingPermission["CAM"] = "camera";
+    RecordingPermission["MIC"] = "microphone";
+})(RecordingPermission || (RecordingPermission = {}));
+var MEDIA_TO_PERMISSION = {
+    audio: RecordingPermission.MIC,
+    video: RecordingPermission.CAM,
+};
+var BrowserPermission = /** @class */ (function () {
+    function BrowserPermission(_a) {
+        var mediaType = _a.mediaType;
+        this.state = new BehaviorSubject(undefined);
+        this.status = new BehaviorSubject(undefined);
+        this.error = new Subject();
+        this.changeSubscriptions = [];
+        this.name = MEDIA_TO_PERMISSION[mediaType];
+    }
+    Object.defineProperty(BrowserPermission.prototype, "isWatching", {
+        get: function () {
+            return this.changeSubscriptions.some(function (subscription) { return !subscription.closed; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BrowserPermission.prototype.watch = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var status, handlePermissionChange;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!!this.status.value) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.check()];
+                    case 1:
+                        _a.sent();
+                        if (!this.status.value)
+                            return [2 /*return*/];
+                        _a.label = 2;
+                    case 2:
+                        status = this.status.value;
+                        handlePermissionChange = function (e) {
+                            var state = e.target.state;
+                            _this.state.next(state);
+                        };
+                        status.addEventListener('change', handlePermissionChange);
+                        this.changeSubscriptions.push(new Subscription(function () {
+                            status.removeEventListener('change', handlePermissionChange);
+                        }));
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    BrowserPermission.prototype.unwatch = function () {
+        this.changeSubscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
+    };
+    BrowserPermission.prototype.check = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var permissionState, permissionStatus, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.name) {
+                            this.error.next(new Error('Unknown media recording permission'));
+                            return [2 /*return*/];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, navigator.permissions.query({
+                                name: this.name,
+                            })];
+                    case 2:
+                        permissionStatus = _a.sent();
+                        permissionState = permissionStatus.state;
+                        this.status.next(permissionStatus);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        // permission does not exist - cannot be queried
+                        // an example would be Firefox - camera, neither microphone perms can be queried
+                        permissionState = 'granted';
+                        return [3 /*break*/, 4];
+                    case 4:
+                        this.state.next(permissionState);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return BrowserPermission;
+}());
+export { BrowserPermission };

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

@@ -0,0 +1,83 @@
+import { AmplitudeRecorder, AmplitudeRecorderConfig } from './AmplitudeRecorder';
+import { BrowserPermission } from './BrowserPermission';
+import { BehaviorSubject, Subject } from '../observable';
+import { RecordedMediaType } from '../../ReactFileUtilities';
+import { TranslationContextValue } from '../../../context';
+import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
+export declare const POSSIBLE_TRANSCODING_MIME_TYPES: readonly ["audio/wav", "audio/mp3"];
+export declare const DEFAULT_MEDIA_RECORDER_CONFIG: MediaRecorderConfig;
+export declare const DEFAULT_AUDIO_TRANSCODER_CONFIG: TranscoderConfig;
+type SupportedTranscodeMimeTypes = typeof POSSIBLE_TRANSCODING_MIME_TYPES[number];
+export type TranscoderConfig = {
+    sampleRate: number;
+    targetMimeType: SupportedTranscodeMimeTypes;
+};
+type MediaRecorderConfig = Omit<MediaRecorderOptions, 'mimeType'> & Required<Pick<MediaRecorderOptions, 'mimeType'>>;
+export type AudioRecorderConfig = {
+    amplitudeRecorderConfig: AmplitudeRecorderConfig;
+    mediaRecorderConfig: MediaRecorderOptions;
+    transcoderConfig: TranscoderConfig;
+};
+export type AudioRecorderOptions = {
+    config?: Partial<AudioRecorderConfig>;
+    generateRecordingTitle?: (mimeType: string) => string;
+    t?: TranslationContextValue['t'];
+};
+export declare enum MediaRecordingState {
+    PAUSED = "paused",
+    RECORDING = "recording",
+    STOPPED = "stopped"
+}
+export declare enum RecordingAttachmentType {
+    VOICE_RECORDING = "voiceRecording"
+}
+export declare class MediaRecorderController {
+    permission: BrowserPermission;
+    mediaRecorder: MediaRecorder | undefined;
+    amplitudeRecorder: AmplitudeRecorder | undefined;
+    amplitudeRecorderConfig: AmplitudeRecorderConfig;
+    mediaRecorderConfig: MediaRecorderConfig;
+    transcoderConfig: TranscoderConfig;
+    startTime: number | undefined;
+    recordedChunkDurations: number[];
+    recordedData: Blob[];
+    recordingUri: string | undefined;
+    mediaType: RecordedMediaType;
+    signalRecordingReady: ((r: LocalVoiceRecordingAttachment) => void) | undefined;
+    recordingState: BehaviorSubject<MediaRecordingState | undefined>;
+    recording: BehaviorSubject<LocalVoiceRecordingAttachment<import("../../..").DefaultStreamChatGenerics> | undefined>;
+    error: Subject<Error | undefined>;
+    notification: Subject<{
+        text: string;
+        type: 'success' | 'error';
+    } | undefined>;
+    customGenerateRecordingTitle: ((mimeType: string) => string) | undefined;
+    t: TranslationContextValue['t'];
+    constructor({ config, generateRecordingTitle, t }?: AudioRecorderOptions);
+    get durationMs(): number;
+    generateRecordingTitle: (mimeType: string) => string;
+    makeVoiceRecording: () => Promise<{
+        $internal: {
+            file: File;
+            id: string;
+        };
+        asset_url: string;
+        duration: number;
+        file_size: number;
+        mime_type: string;
+        title: string;
+        type: RecordingAttachmentType;
+        waveform_data: number[];
+    } | undefined>;
+    handleErrorEvent: (e: Event) => void;
+    handleDataavailableEvent: (e: BlobEvent) => Promise<void>;
+    resetRecordingState: () => void;
+    cleanUp: () => void;
+    start: () => Promise<void>;
+    pause: () => void;
+    resume: () => void;
+    stop: () => Promise<undefined> | Promise<LocalVoiceRecordingAttachment<import("../../..").DefaultStreamChatGenerics>>;
+    cancel: () => void;
+}
+export {};
+//# sourceMappingURL=MediaRecorderController.d.ts.map

package/dist/components/MediaRecorder/classes/MediaRecorderController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaRecorderController.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/classes/MediaRecorderController.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,313 @@
+import { __assign, __awaiter, __generator } from "tslib";
+import fixWebmDuration from 'fix-webm-duration';
+import { nanoid } from 'nanoid';
+import { AmplitudeRecorder, DEFAULT_AMPLITUDE_RECORDER_CONFIG, } from './AmplitudeRecorder';
+import { BrowserPermission } from './BrowserPermission';
+import { BehaviorSubject, Subject } from '../observable';
+import { transcode } from '../transcode';
+import { resampleWaveformData } from '../../Attachment';
+import { createFileFromBlobs, getExtensionFromMimeType, getRecordedMediaTypeFromMimeType, } from '../../ReactFileUtilities';
+import { defaultTranslatorFunction } from '../../../i18n';
+import { isSafari } from '../../../utils/browsers';
+import { mergeDeepUndefined } from '../../../utils/mergeDeep';
+var 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 = {
+    mimeType: isSafari()
+        ? RECORDED_MIME_TYPE_BY_BROWSER.audio.safari
+        : RECORDED_MIME_TYPE_BY_BROWSER.audio.others,
+};
+export var DEFAULT_AUDIO_TRANSCODER_CONFIG = {
+    sampleRate: 16000,
+    targetMimeType: 'audio/mp3',
+};
+var disposeOfMediaStream = function (stream) {
+    if (!(stream === null || stream === void 0 ? void 0 : stream.active))
+        return;
+    stream.getTracks().forEach(function (track) {
+        track.stop();
+        stream.removeTrack(track);
+    });
+};
+var logError = function (e) { return e && console.error('[MEDIA RECORDER ERROR]', e); };
+export var MediaRecordingState;
+(function (MediaRecordingState) {
+    MediaRecordingState["PAUSED"] = "paused";
+    MediaRecordingState["RECORDING"] = "recording";
+    MediaRecordingState["STOPPED"] = "stopped";
+})(MediaRecordingState || (MediaRecordingState = {}));
+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;
+        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);
+            }
+            return "".concat(_this.mediaType, "_recording_").concat(new Date().toISOString(), ".").concat(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*/, {
+                                $internal: {
+                                    file: file,
+                                    id: nanoid(),
+                                },
+                                asset_url: this.recordingUri,
+                                duration: this.durationMs / 1000,
+                                file_size: blob.size,
+                                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.handleErrorEvent = function (e) {
+            var error = e.error;
+            logError(error);
+            _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.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.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.pause = function () {
+            var _a, _b;
+            if (_this.recordingState.value !== MediaRecordingState.RECORDING)
+                return;
+            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.resume = function () {
+            var _a, _b;
+            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.stop = function () {
+            var _a, _b, _c;
+            var 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) || '')))
+                return Promise.resolve(undefined);
+            if (_this.startTime) {
+                _this.recordedChunkDurations.push(new Date().getTime() - _this.startTime);
+                _this.startTime = undefined;
+            }
+            var result = new Promise(function (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);
+            return result;
+        };
+        this.cancel = function () {
+            _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);
+        if (!POSSIBLE_TRANSCODING_MIME_TYPES.includes(this.transcoderConfig.targetMimeType)) {
+            this.transcoderConfig.targetMimeType = DEFAULT_AUDIO_TRANSCODER_CONFIG.targetMimeType;
+        }
+        var mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
+        if (!mediaType) {
+            throw new Error("Unsupported media type (supported audio or video only). Provided mimeType: ".concat(this.mediaRecorderConfig.mimeType));
+        }
+        this.mediaType = mediaType;
+        this.permission = new BrowserPermission({ mediaType: 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 };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/classes/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './BrowserPermission';
+export * from './MediaRecorderController';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/hooks/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,20 @@
+import { MessageInputContextValue } from '../../../context';
+import { AudioRecorderConfig, MediaRecorderController, MediaRecordingState } from '../classes';
+import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type CustomAudioRecordingConfig = Partial<AudioRecorderConfig>;
+export type RecordingController = {
+    completeRecording: () => void;
+    permissionState?: PermissionState;
+    recorder?: MediaRecorderController;
+    recording?: LocalVoiceRecordingAttachment;
+    recordingState?: MediaRecordingState;
+};
+type UseMediaRecorderParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMultiSendEnabled' | 'handleSubmit' | 'uploadAttachment'> & {
+    enabled: boolean;
+    generateRecordingTitle?: (mimeType: string) => string;
+    recordingConfig?: CustomAudioRecordingConfig;
+};
+export declare const useMediaRecorder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, uploadAttachment, }: UseMediaRecorderParams<StreamChatGenerics>) => RecordingController;
+export {};
+//# sourceMappingURL=useMediaRecorder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaRecorder.d.ts","sourceRoot":"","sources":["../../../../src/components/MediaRecorder/hooks/useMediaRecorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAyB,MAAM,kBAAkB,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAE/F,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAEtE,MAAM,MAAM,mBAAmB,GAAG;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,SAAS,CAAC,EAAE,6BAA6B,CAAC;IAC1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACtC,CAAC;AAEF,KAAK,sBAAsB,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CACN,wBAAwB,CAAC,kBAAkB,CAAC,EAC5C,+BAA+B,GAAG,cAAc,GAAG,kBAAkB,CACtE,GAAG;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACtD,eAAe,CAAC,EAAE,0BAA0B,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,0PASmB,mBA6D/C,CAAC"}

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

@@ -0,0 +1,73 @@
+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 () {
+        if (!isScheduledForSubmit)
+            return;
+        handleSubmit();
+        scheduleForSubmit(false);
+    }, [handleSubmit, isScheduledForSubmit]);
+    useEffect(function () {
+        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 () {
+            recorder.cancel();
+            recorder.permission.unwatch();
+            recordingSubscription.unsubscribe();
+            recordingStateSubscription.unsubscribe();
+            permissionStateSubscription.unsubscribe();
+        };
+    }, [recorder]);
+    return {
+        completeRecording: completeRecording,
+        permissionState: permissionState,
+        recorder: recorder,
+        recording: recording,
+        recordingState: recordingState,
+    };
+};

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

@@ -0,0 +1,6 @@
+export * from './RecordingPermissionDeniedNotification';
+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/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MediaRecorder/index.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAC;AACxD,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/components/MediaRecorder/index.js

@@ -0,0 +1,5 @@
+export * from './RecordingPermissionDeniedNotification';
+export * from './AudioRecorder';
+export * from './hooks';
+export { MediaRecordingState } from './classes/MediaRecorderController';
+export { RecordingPermission } from './classes/BrowserPermission';

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

@@ -0,0 +1,11 @@
+import { Subject } from './Subject';
+import { ObserverOrNext } from './Observer';
+import { Subscription } from './Subscription';
+export declare class BehaviorSubject<T> extends Subject<T> {
+    private _value;
+    constructor(_value: T);
+    get value(): T;
+    subscribe(observerOrNext: ObserverOrNext<T>): Subscription;
+    next(value: T): void;
+}
+//# sourceMappingURL=BehaviorSubject.d.ts.map