stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/MediaRecorder/classes/MediaRecorderController.mjs

@@ -34,202 +34,216 @@ var RecordingAttachmentType = /* @__PURE__ */ function(RecordingAttachmentType)
 	return RecordingAttachmentType;
 }({});
 var MediaRecorderController = class {
+	permission;
+	mediaRecorder;
+	amplitudeRecorder;
+	amplitudeRecorderConfig;
+	mediaRecorderConfig;
+	transcoderConfig;
+	startTime;
+	recordedChunkDurations = [];
+	recordedData = [];
+	recordingUri;
+	mediaType;
+	signalRecordingReady;
+	recordingState = new BehaviorSubject(void 0);
+	recording = new BehaviorSubject(void 0);
+	error = new Subject();
+	notification = new Subject();
+	customGenerateRecordingTitle;
+	t;
 	constructor({ config, generateRecordingTitle, t } = {}) {
-		this.recordedChunkDurations = [];
-		this.recordedData = [];
-		this.recordingState = new BehaviorSubject(void 0);
-		this.recording = new BehaviorSubject(void 0);
-		this.error = new Subject();
-		this.notification = new Subject();
-		this.generateRecordingTitle = (mimeType) => {
-			if (this.customGenerateRecordingTitle) return this.customGenerateRecordingTitle(mimeType);
-			return `${this.mediaType}_recording_${(/* @__PURE__ */ new Date()).toISOString()}.${getExtensionFromMimeType(mimeType)}`;
-		};
-		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")) blob = await fixWebmDuration(blob, this.durationMs, { logger: () => null });
-			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
-			});
-			return {
-				asset_url: this.recordingUri,
+		this.t = t || defaultTranslatorFunction;
+		this.amplitudeRecorderConfig = mergeDeepUndefined({ ...config?.amplitudeRecorderConfig }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);
+		this.mediaRecorderConfig = mergeDeepUndefined({ ...config?.mediaRecorderConfig }, { mimeType: MediaRecorder.isTypeSupported("audio/webm") ? RECORDED_MIME_TYPE_BY_BROWSER.audio.others : RECORDED_MIME_TYPE_BY_BROWSER.audio.safari });
+		this.transcoderConfig = mergeDeepUndefined({ ...config?.transcoderConfig }, DEFAULT_AUDIO_TRANSCODER_CONFIG);
+		const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
+		if (!mediaType) throw new Error(`Unsupported media type (supported audio or video only). Provided mimeType: ${this.mediaRecorderConfig.mimeType}`);
+		this.mediaType = mediaType;
+		this.permission = new BrowserPermission({ mediaType });
+		this.customGenerateRecordingTitle = generateRecordingTitle;
+	}
+	get durationMs() {
+		return this.recordedChunkDurations.reduce((acc, val) => acc + val, 0);
+	}
+	generateRecordingTitle = (mimeType) => {
+		if (this.customGenerateRecordingTitle) return this.customGenerateRecordingTitle(mimeType);
+		return `${this.mediaType}_recording_${(/* @__PURE__ */ new Date()).toISOString()}.${getExtensionFromMimeType(mimeType)}`;
+	};
+	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")) blob = await fixWebmDuration(blob, this.durationMs, { logger: () => null });
+		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
+		});
+		return {
+			asset_url: this.recordingUri,
+			custom: {
 				duration: this.durationMs / 1e3,
 				file_size: blob.size,
-				localMetadata: {
-					file,
-					id: nanoid()
-				},
 				mime_type: blob.type,
-				title: file.name,
-				type: "voiceRecording",
 				waveform_data: resampleWaveformData(this.amplitudeRecorder?.amplitudes.value ?? [], this.amplitudeRecorderConfig.sampleCount)
-			};
+			},
+			localMetadata: {
+				file,
+				id: nanoid()
+			},
+			title: file.name,
+			type: "voiceRecording"
 		};
-		this.handleErrorEvent = (e) => {
-			const { error } = e;
+	};
+	handleErrorEvent = (e) => {
+		const { error } = e;
+		logError(error);
+		this.error.next(error);
+		this.notification.next({
+			text: this.t("mediaRecorder.error.recording", "An error has occurred during recording"),
+			type: "error"
+		});
+	};
+	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("mediaRecorder.error.processing", "An error has occurred during the recording processing"),
+				type: "error"
+			});
+		}
+	};
+	resetRecordingState = () => {
+		this.recordedData = [];
+		this.recording.next(void 0);
+		this.recordingState.next(void 0);
+		this.recordedChunkDurations = [];
+		this.startTime = void 0;
+	};
+	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);
+		}
+	};
+	start = async () => {
+		if (["recording", "paused"].includes(this.recordingState.value)) {
+			const error = /* @__PURE__ */ new Error("Cannot start recording. Recording already in progress");
+			logError(error);
+			this.error.next(error);
+			return;
+		}
+		if (!navigator.mediaDevices) {
+			const error = /* @__PURE__ */ new Error("Media recording is not supported");
 			logError(error);
 			this.error.next(error);
 			this.notification.next({
-				text: this.t("An error has occurred during recording"),
+				text: this.t("mediaRecorder.error.start", "Error starting recording"),
 				type: "error"
 			});
-		};
-		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(void 0);
-			this.recordingState.next(void 0);
-			this.recordedChunkDurations = [];
-			this.startTime = void 0;
-		};
-		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 = async () => {
-			if (["recording", "paused"].includes(this.recordingState.value)) {
-				const error = /* @__PURE__ */ new Error("Cannot start recording. Recording already in progress");
-				logError(error);
-				this.error.next(error);
-				return;
-			}
-			if (!navigator.mediaDevices) {
-				const error = /* @__PURE__ */ 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 = /* @__PURE__ */ 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(/* @__PURE__ */ 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 = (/* @__PURE__ */ new Date()).getTime();
-				this.mediaRecorder.start();
-				if (this.mediaType === "audio" && stream) {
-					this.amplitudeRecorder = new AmplitudeRecorder({
-						config: this.amplitudeRecorderConfig,
-						stream
-					});
-					this.amplitudeRecorder.start();
-				}
-				this.recordingState.next("recording");
-			} catch (error) {
-				logError(error);
-				this.cancel();
-				this.error.next(error);
-				this.notification.next({
-					text: this.t("Error starting recording"),
-					type: "error"
+			return;
+		}
+		if (this.mediaType === "video") {
+			const error = /* @__PURE__ */ 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("mediaRecorder.error.start", "Error starting recording"),
+				type: "error"
+			});
+			return;
+		}
+		if (!this.permission.state.value) await this.permission.check();
+		if (this.permission.state.value === "denied") {
+			logError(/* @__PURE__ */ 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 = (/* @__PURE__ */ new Date()).getTime();
+			this.mediaRecorder.start();
+			if (this.mediaType === "audio" && stream) {
+				this.amplitudeRecorder = new AmplitudeRecorder({
+					config: this.amplitudeRecorderConfig,
+					stream
 				});
+				this.amplitudeRecorder.start();
 			}
-		};
-		this.pause = () => {
-			if (this.recordingState.value !== "recording") return;
-			if (this.mediaRecorder?.state !== "recording") return;
-			if (this.startTime) {
-				this.recordedChunkDurations.push((/* @__PURE__ */ new Date()).getTime() - this.startTime);
-				this.startTime = void 0;
-			}
-			this.mediaRecorder?.pause();
-			this.mediaRecorder?.requestData();
-			this.amplitudeRecorder?.stop();
-			this.recordingState.next("paused");
-		};
-		this.resume = () => {
-			if (this.recordingState.value !== "paused") return;
-			if (this.mediaRecorder?.state !== "paused") return;
-			this.startTime = (/* @__PURE__ */ new Date()).getTime();
-			this.mediaRecorder?.resume();
-			this.amplitudeRecorder?.start();
 			this.recordingState.next("recording");
-		};
-		this.stop = () => {
-			const recording = this.recording.value;
-			if (recording && this.mediaRecorder?.state === "inactive") return Promise.resolve(recording);
-			if (!["paused", "recording"].includes(this.mediaRecorder?.state || "")) return Promise.resolve(void 0);
-			if (this.startTime) {
-				this.recordedChunkDurations.push((/* @__PURE__ */ new Date()).getTime() - this.startTime);
-				this.startTime = void 0;
-			}
-			const result = new Promise((res) => {
-				this.signalRecordingReady = res;
+		} catch (error) {
+			logError(error);
+			this.cancel();
+			this.error.next(error);
+			this.notification.next({
+				text: this.t("mediaRecorder.error.start", "Error starting recording"),
+				type: "error"
 			});
-			this.mediaRecorder?.stop();
-			this.amplitudeRecorder?.stop();
-			this.recordingState.next("stopped");
-			return result;
-		};
-		this.cancel = () => {
-			this.stop();
-			this.cleanUp();
-		};
-		this.t = t || defaultTranslatorFunction;
-		this.amplitudeRecorderConfig = mergeDeepUndefined({ ...config?.amplitudeRecorderConfig }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);
-		this.mediaRecorderConfig = mergeDeepUndefined({ ...config?.mediaRecorderConfig }, { mimeType: MediaRecorder.isTypeSupported("audio/webm") ? RECORDED_MIME_TYPE_BY_BROWSER.audio.others : RECORDED_MIME_TYPE_BY_BROWSER.audio.safari });
-		this.transcoderConfig = mergeDeepUndefined({ ...config?.transcoderConfig }, DEFAULT_AUDIO_TRANSCODER_CONFIG);
-		const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);
-		if (!mediaType) throw new Error(`Unsupported media type (supported audio or video only). Provided mimeType: ${this.mediaRecorderConfig.mimeType}`);
-		this.mediaType = mediaType;
-		this.permission = new BrowserPermission({ mediaType });
-		this.customGenerateRecordingTitle = generateRecordingTitle;
-	}
-	get durationMs() {
-		return this.recordedChunkDurations.reduce((acc, val) => acc + val, 0);
-	}
+		}
+	};
+	pause = () => {
+		if (this.recordingState.value !== "recording") return;
+		if (this.mediaRecorder?.state !== "recording") return;
+		if (this.startTime) {
+			this.recordedChunkDurations.push((/* @__PURE__ */ new Date()).getTime() - this.startTime);
+			this.startTime = void 0;
+		}
+		this.mediaRecorder?.pause();
+		this.mediaRecorder?.requestData();
+		this.amplitudeRecorder?.stop();
+		this.recordingState.next("paused");
+	};
+	resume = () => {
+		if (this.recordingState.value !== "paused") return;
+		if (this.mediaRecorder?.state !== "paused") return;
+		this.startTime = (/* @__PURE__ */ new Date()).getTime();
+		this.mediaRecorder?.resume();
+		this.amplitudeRecorder?.start();
+		this.recordingState.next("recording");
+	};
+	stop = () => {
+		const recording = this.recording.value;
+		if (recording && this.mediaRecorder?.state === "inactive") return Promise.resolve(recording);
+		if (!["paused", "recording"].includes(this.mediaRecorder?.state || "")) return Promise.resolve(void 0);
+		if (this.startTime) {
+			this.recordedChunkDurations.push((/* @__PURE__ */ new Date()).getTime() - this.startTime);
+			this.startTime = void 0;
+		}
+		const result = new Promise((res) => {
+			this.signalRecordingReady = res;
+		});
+		this.mediaRecorder?.stop();
+		this.amplitudeRecorder?.stop();
+		this.recordingState.next("stopped");
+		return result;
+	};
+	cancel = () => {
+		this.stop();
+		this.cleanUp();
+	};
 };
 //#endregion
 export { DEFAULT_AUDIO_TRANSCODER_CONFIG, MediaRecorderController, MediaRecordingState, RECORDED_MIME_TYPE_BY_BROWSER, RecordingAttachmentType };

package/dist/es/components/MediaRecorder/classes/MediaRecorderController.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MediaRecorderController.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/classes/MediaRecorderController.ts"],"sourcesContent":["import fixWebmDuration from 'fix-webm-duration';\nimport { nanoid } from 'nanoid';\nimport {\n  AmplitudeRecorder,\n  DEFAULT_AMPLITUDE_RECORDER_CONFIG,\n} from './AmplitudeRecorder';\nimport { BrowserPermission } from './BrowserPermission';\nimport { BehaviorSubject, Subject } from '../observable';\nimport type { TranscoderConfig } from '../transcode';\nimport { transcode } from '../transcode';\nimport { resampleWaveformData } from '../../Attachment';\nimport type { RecordedMediaType } from '../../ReactFileUtilities';\nimport {\n  createFileFromBlobs,\n  getExtensionFromMimeType,\n  getRecordedMediaTypeFromMimeType,\n} from '../../ReactFileUtilities';\nimport { defaultTranslatorFunction } from '../../../i18n';\nimport { mergeDeepUndefined } from '../../../utils/mergeDeep';\nimport type { LocalVoiceRecordingAttachment } from 'stream-chat';\nimport type { AmplitudeRecorderConfig } from './AmplitudeRecorder';\nimport type { TranslationContextValue } from '../../../context';\n\nexport const RECORDED_MIME_TYPE_BY_BROWSER = {\n  audio: {\n    others: 'audio/webm',\n    safari: 'audio/mp4;codecs=mp4a.40.2',\n  },\n} as const;\n\nexport const DEFAULT_AUDIO_TRANSCODER_CONFIG: TranscoderConfig = {\n  sampleRate: 16000,\n} as const;\n\nconst disposeOfMediaStream = (stream?: MediaStream) => {\n  if (!stream?.active) return;\n  stream.getTracks().forEach((track) => {\n    track.stop();\n    stream.removeTrack(track);\n  });\n};\n\nconst logError = (e?: Error) => e && console.error('[MEDIA RECORDER ERROR]', e);\n\ntype MediaRecorderConfig = Omit<MediaRecorderOptions, 'mimeType'> &\n  Required<Pick<MediaRecorderOptions, 'mimeType'>>;\n\nexport type AudioRecorderConfig = {\n  amplitudeRecorderConfig: AmplitudeRecorderConfig;\n  mediaRecorderConfig: MediaRecorderOptions;\n  transcoderConfig: TranscoderConfig;\n};\n\ntype PartialValues<T> = { [P in keyof T]?: Partial<T[P]> };\n\nexport type CustomAudioRecordingConfig = PartialValues<AudioRecorderConfig>;\n\nexport type AudioRecorderOptions = {\n  config?: CustomAudioRecordingConfig;\n  generateRecordingTitle?: (mimeType: string) => string;\n  t?: TranslationContextValue['t'];\n};\n\nexport enum MediaRecordingState {\n  PAUSED = 'paused',\n  RECORDING = 'recording',\n  STOPPED = 'stopped',\n}\n\nexport enum RecordingAttachmentType {\n  VOICE_RECORDING = 'voiceRecording',\n}\n\nexport class MediaRecorderController {\n  permission: BrowserPermission;\n  mediaRecorder: MediaRecorder | undefined;\n  amplitudeRecorder: AmplitudeRecorder | undefined;\n\n  amplitudeRecorderConfig: AmplitudeRecorderConfig;\n  mediaRecorderConfig: MediaRecorderConfig;\n  transcoderConfig: TranscoderConfig;\n\n  startTime: number | undefined;\n  recordedChunkDurations: number[] = [];\n  recordedData: Blob[] = [];\n  recordingUri: string | undefined;\n  mediaType: RecordedMediaType;\n\n  signalRecordingReady: ((r: LocalVoiceRecordingAttachment) => void) | undefined;\n\n  recordingState = new BehaviorSubject<MediaRecordingState | undefined>(undefined);\n  recording = new BehaviorSubject<LocalVoiceRecordingAttachment | undefined>(undefined);\n  error = new Subject<Error | undefined>();\n  notification = new Subject<{ text: string; type: 'success' | 'error' } | undefined>();\n\n  customGenerateRecordingTitle: ((mimeType: string) => string) | undefined;\n  t: TranslationContextValue['t'];\n\n  constructor({ config, generateRecordingTitle, t }: AudioRecorderOptions = {}) {\n    this.t = t || defaultTranslatorFunction;\n\n    this.amplitudeRecorderConfig = mergeDeepUndefined(\n      { ...config?.amplitudeRecorderConfig },\n      DEFAULT_AMPLITUDE_RECORDER_CONFIG,\n    );\n\n    this.mediaRecorderConfig = mergeDeepUndefined(\n      { ...config?.mediaRecorderConfig },\n      {\n        mimeType: MediaRecorder.isTypeSupported('audio/webm')\n          ? RECORDED_MIME_TYPE_BY_BROWSER.audio.others\n          : RECORDED_MIME_TYPE_BY_BROWSER.audio.safari,\n      },\n    );\n\n    this.transcoderConfig = mergeDeepUndefined(\n      { ...config?.transcoderConfig },\n      DEFAULT_AUDIO_TRANSCODER_CONFIG,\n    );\n\n    const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);\n    if (!mediaType) {\n      throw new Error(\n        `Unsupported media type (supported audio or video only). Provided mimeType: ${this.mediaRecorderConfig.mimeType}`,\n      );\n    }\n    this.mediaType = mediaType;\n\n    this.permission = new BrowserPermission({ mediaType });\n\n    this.customGenerateRecordingTitle = generateRecordingTitle;\n  }\n\n  get durationMs() {\n    return this.recordedChunkDurations.reduce((acc, val) => acc + val, 0);\n  }\n\n  generateRecordingTitle = (mimeType: string) => {\n    if (this.customGenerateRecordingTitle) {\n      return this.customGenerateRecordingTitle(mimeType);\n    }\n    return `${this.mediaType}_recording_${new Date().toISOString()}.${getExtensionFromMimeType(\n      mimeType,\n    )}`; // extension needed so that desktop Safari can play the asset\n  };\n\n  makeVoiceRecording = async () => {\n    if (this.recordingUri) URL.revokeObjectURL(this.recordingUri);\n\n    if (!this.recordedData.length) return;\n    const { mimeType } = this.mediaRecorderConfig;\n    let blob = new Blob(this.recordedData, { type: mimeType });\n    if (mimeType.match('audio/webm')) {\n      // The browser does not include duration metadata with the recorded blob\n      blob = await fixWebmDuration(blob, this.durationMs, {\n        logger: () => null, // prevents polluting the browser console\n      });\n    }\n    if (!mimeType.match('audio/mp4')) {\n      blob = await transcode({\n        blob,\n        ...this.transcoderConfig,\n      });\n    }\n\n    if (!blob) return;\n\n    this.recordingUri = URL.createObjectURL(blob);\n    const file = createFileFromBlobs({\n      blobsArray: [blob],\n      fileName: this.generateRecordingTitle(blob.type),\n      mimeType: blob.type,\n    });\n\n    return {\n      asset_url: this.recordingUri,\n      duration: this.durationMs / 1000,\n      file_size: blob.size,\n      localMetadata: {\n        file,\n        id: nanoid(),\n      },\n      mime_type: blob.type,\n      title: file.name,\n      type: RecordingAttachmentType.VOICE_RECORDING,\n      waveform_data: resampleWaveformData(\n        this.amplitudeRecorder?.amplitudes.value ?? [],\n        this.amplitudeRecorderConfig.sampleCount,\n      ),\n    } as LocalVoiceRecordingAttachment;\n  };\n\n  handleErrorEvent = (e: Event) => {\n    const { error } = e as ErrorEvent;\n    logError(error);\n    this.error.next(error);\n    this.notification.next({\n      text: this.t('An error has occurred during recording'),\n      type: 'error',\n    });\n  };\n\n  handleDataavailableEvent = async (e: BlobEvent) => {\n    if (!e.data.size) return;\n    if (this.mediaType !== 'audio') return;\n    try {\n      this.recordedData.push(e.data);\n      const recording = await this.makeVoiceRecording();\n      if (!recording) return;\n      this.signalRecordingReady?.(recording);\n      this.recording.next(recording);\n    } catch (e) {\n      logError(e as Error);\n      this.error.next(e as Error);\n      this.notification.next({\n        text: this.t('An error has occurred during the recording processing'),\n        type: 'error',\n      });\n    }\n  };\n\n  resetRecordingState = () => {\n    this.recordedData = [];\n    this.recording.next(undefined);\n    this.recordingState.next(undefined);\n    this.recordedChunkDurations = [];\n    this.startTime = undefined;\n  };\n\n  cleanUp = () => {\n    this.resetRecordingState();\n    if (this.recordingUri) URL.revokeObjectURL(this.recordingUri);\n    this.amplitudeRecorder?.close();\n    if (this.mediaRecorder) {\n      disposeOfMediaStream(this.mediaRecorder.stream);\n      this.mediaRecorder.removeEventListener(\n        'dataavailable',\n        this.handleDataavailableEvent,\n      );\n      this.mediaRecorder.removeEventListener('error', this.handleErrorEvent);\n    }\n  };\n\n  start = async () => {\n    if (\n      [MediaRecordingState.RECORDING, MediaRecordingState.PAUSED].includes(\n        this.recordingState.value as MediaRecordingState,\n      )\n    ) {\n      const error = new Error('Cannot start recording. Recording already in progress');\n      logError(error);\n      this.error.next(error);\n      return;\n    }\n\n    // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303\n    if (!navigator.mediaDevices) {\n      const error = new Error('Media recording is not supported');\n      logError(error);\n      this.error.next(error);\n      this.notification.next({ text: this.t('Error starting recording'), type: 'error' });\n      return;\n    }\n\n    if (this.mediaType === 'video') {\n      const error = new Error(\n        `Video recording is not supported. Provided MIME type: ${this.mediaRecorderConfig.mimeType}`,\n      );\n      logError(error);\n      this.error.next(error);\n      this.notification.next({ text: this.t('Error starting recording'), type: 'error' });\n      return;\n    }\n\n    if (!this.permission.state.value) {\n      await this.permission.check();\n    }\n\n    if (this.permission.state.value === 'denied') {\n      logError(new Error('Permission denied'));\n      return;\n    }\n\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n      this.mediaRecorder = new MediaRecorder(stream, this.mediaRecorderConfig);\n\n      this.mediaRecorder.addEventListener('dataavailable', this.handleDataavailableEvent);\n      this.mediaRecorder.addEventListener('error', this.handleErrorEvent);\n\n      this.startTime = new Date().getTime();\n      this.mediaRecorder.start();\n\n      if (this.mediaType === 'audio' && stream) {\n        this.amplitudeRecorder = new AmplitudeRecorder({\n          config: this.amplitudeRecorderConfig,\n          stream,\n        });\n        this.amplitudeRecorder.start();\n      }\n\n      this.recordingState.next(MediaRecordingState.RECORDING);\n    } catch (error) {\n      logError(error as Error);\n      this.cancel();\n      this.error.next(error as Error);\n      this.notification.next({ text: this.t('Error starting recording'), type: 'error' });\n    }\n  };\n\n  pause = () => {\n    if (this.recordingState.value !== MediaRecordingState.RECORDING) return;\n    // The native recorder can transition to 'inactive' on its own (e.g. iOS Safari\n    // interruptions or a preceding stop) while recordingState still reads RECORDING.\n    // Calling pause() on a non-recording recorder throws InvalidStateError.\n    if (this.mediaRecorder?.state !== 'recording') return;\n    if (this.startTime) {\n      this.recordedChunkDurations.push(new Date().getTime() - this.startTime);\n      this.startTime = undefined;\n    }\n    this.mediaRecorder?.pause();\n    // Flush current chunk so preview is available while paused.\n    this.mediaRecorder?.requestData();\n    this.amplitudeRecorder?.stop();\n    this.recordingState.next(MediaRecordingState.PAUSED);\n  };\n\n  resume = () => {\n    if (this.recordingState.value !== MediaRecordingState.PAUSED) return;\n    // resume() is only valid on a 'paused' recorder; the native recorder may have gone\n    // inactive while recordingState still reads PAUSED, which would throw InvalidStateError.\n    if (this.mediaRecorder?.state !== 'paused') return;\n    this.startTime = new Date().getTime();\n    this.mediaRecorder?.resume();\n    this.amplitudeRecorder?.start();\n    this.recordingState.next(MediaRecordingState.RECORDING);\n  };\n\n  stop = () => {\n    const recording = this.recording.value;\n    if (recording && this.mediaRecorder?.state === 'inactive')\n      return Promise.resolve(recording);\n\n    if (\n      ![MediaRecordingState.PAUSED, MediaRecordingState.RECORDING].includes(\n        (this.mediaRecorder?.state || '') as MediaRecordingState,\n      )\n    )\n      return Promise.resolve(undefined);\n\n    if (this.startTime) {\n      this.recordedChunkDurations.push(new Date().getTime() - this.startTime);\n      this.startTime = undefined;\n    }\n    const result = new Promise<LocalVoiceRecordingAttachment>((res) => {\n      this.signalRecordingReady = res;\n    });\n    this.mediaRecorder?.stop();\n    this.amplitudeRecorder?.stop();\n    this.recordingState.next(MediaRecordingState.STOPPED);\n    return result;\n  };\n\n  cancel = () => {\n    this.stop();\n    this.cleanUp();\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"MediaRecorderController.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/classes/MediaRecorderController.ts"],"sourcesContent":["import fixWebmDuration from 'fix-webm-duration';\nimport { nanoid } from 'nanoid';\nimport {\n  AmplitudeRecorder,\n  DEFAULT_AMPLITUDE_RECORDER_CONFIG,\n} from './AmplitudeRecorder';\nimport { BrowserPermission } from './BrowserPermission';\nimport { BehaviorSubject, Subject } from '../observable';\nimport type { TranscoderConfig } from '../transcode';\nimport { transcode } from '../transcode';\nimport { resampleWaveformData } from '../../Attachment';\nimport type { RecordedMediaType } from '../../ReactFileUtilities';\nimport {\n  createFileFromBlobs,\n  getExtensionFromMimeType,\n  getRecordedMediaTypeFromMimeType,\n} from '../../ReactFileUtilities';\nimport { defaultTranslatorFunction } from '../../../i18n';\nimport { mergeDeepUndefined } from '../../../utils/mergeDeep';\nimport type { LocalVoiceRecordingAttachment } from 'stream-chat';\nimport type { AmplitudeRecorderConfig } from './AmplitudeRecorder';\nimport type { TranslationContextValue } from '../../../context';\n\nexport const RECORDED_MIME_TYPE_BY_BROWSER = {\n  audio: {\n    others: 'audio/webm',\n    safari: 'audio/mp4;codecs=mp4a.40.2',\n  },\n} as const;\n\nexport const DEFAULT_AUDIO_TRANSCODER_CONFIG: TranscoderConfig = {\n  sampleRate: 16000,\n} as const;\n\nconst disposeOfMediaStream = (stream?: MediaStream) => {\n  if (!stream?.active) return;\n  stream.getTracks().forEach((track) => {\n    track.stop();\n    stream.removeTrack(track);\n  });\n};\n\nconst logError = (e?: Error) => e && console.error('[MEDIA RECORDER ERROR]', e);\n\ntype MediaRecorderConfig = Omit<MediaRecorderOptions, 'mimeType'> &\n  Required<Pick<MediaRecorderOptions, 'mimeType'>>;\n\nexport type AudioRecorderConfig = {\n  amplitudeRecorderConfig: AmplitudeRecorderConfig;\n  mediaRecorderConfig: MediaRecorderOptions;\n  transcoderConfig: TranscoderConfig;\n};\n\ntype PartialValues<T> = { [P in keyof T]?: Partial<T[P]> };\n\nexport type CustomAudioRecordingConfig = PartialValues<AudioRecorderConfig>;\n\nexport type AudioRecorderOptions = {\n  config?: CustomAudioRecordingConfig;\n  generateRecordingTitle?: (mimeType: string) => string;\n  t?: TranslationContextValue['t'];\n};\n\nexport enum MediaRecordingState {\n  PAUSED = 'paused',\n  RECORDING = 'recording',\n  STOPPED = 'stopped',\n}\n\nexport enum RecordingAttachmentType {\n  VOICE_RECORDING = 'voiceRecording',\n}\n\nexport class MediaRecorderController {\n  permission: BrowserPermission;\n  mediaRecorder: MediaRecorder | undefined;\n  amplitudeRecorder: AmplitudeRecorder | undefined;\n\n  amplitudeRecorderConfig: AmplitudeRecorderConfig;\n  mediaRecorderConfig: MediaRecorderConfig;\n  transcoderConfig: TranscoderConfig;\n\n  startTime: number | undefined;\n  recordedChunkDurations: number[] = [];\n  recordedData: Blob[] = [];\n  recordingUri: string | undefined;\n  mediaType: RecordedMediaType;\n\n  signalRecordingReady: ((r: LocalVoiceRecordingAttachment) => void) | undefined;\n\n  recordingState = new BehaviorSubject<MediaRecordingState | undefined>(undefined);\n  recording = new BehaviorSubject<LocalVoiceRecordingAttachment | undefined>(undefined);\n  error = new Subject<Error | undefined>();\n  notification = new Subject<{ text: string; type: 'success' | 'error' } | undefined>();\n\n  customGenerateRecordingTitle: ((mimeType: string) => string) | undefined;\n  t: TranslationContextValue['t'];\n\n  constructor({ config, generateRecordingTitle, t }: AudioRecorderOptions = {}) {\n    this.t = t || defaultTranslatorFunction;\n\n    this.amplitudeRecorderConfig = mergeDeepUndefined(\n      { ...config?.amplitudeRecorderConfig },\n      DEFAULT_AMPLITUDE_RECORDER_CONFIG,\n    );\n\n    this.mediaRecorderConfig = mergeDeepUndefined(\n      { ...config?.mediaRecorderConfig },\n      {\n        mimeType: MediaRecorder.isTypeSupported('audio/webm')\n          ? RECORDED_MIME_TYPE_BY_BROWSER.audio.others\n          : RECORDED_MIME_TYPE_BY_BROWSER.audio.safari,\n      },\n    );\n\n    this.transcoderConfig = mergeDeepUndefined(\n      { ...config?.transcoderConfig },\n      DEFAULT_AUDIO_TRANSCODER_CONFIG,\n    );\n\n    const mediaType = getRecordedMediaTypeFromMimeType(this.mediaRecorderConfig.mimeType);\n    if (!mediaType) {\n      throw new Error(\n        `Unsupported media type (supported audio or video only). Provided mimeType: ${this.mediaRecorderConfig.mimeType}`,\n      );\n    }\n    this.mediaType = mediaType;\n\n    this.permission = new BrowserPermission({ mediaType });\n\n    this.customGenerateRecordingTitle = generateRecordingTitle;\n  }\n\n  get durationMs() {\n    return this.recordedChunkDurations.reduce((acc, val) => acc + val, 0);\n  }\n\n  generateRecordingTitle = (mimeType: string) => {\n    if (this.customGenerateRecordingTitle) {\n      return this.customGenerateRecordingTitle(mimeType);\n    }\n    return `${this.mediaType}_recording_${new Date().toISOString()}.${getExtensionFromMimeType(\n      mimeType,\n    )}`; // extension needed so that desktop Safari can play the asset\n  };\n\n  makeVoiceRecording = async () => {\n    if (this.recordingUri) URL.revokeObjectURL(this.recordingUri);\n\n    if (!this.recordedData.length) return;\n    const { mimeType } = this.mediaRecorderConfig;\n    let blob = new Blob(this.recordedData, { type: mimeType });\n    if (mimeType.match('audio/webm')) {\n      // The browser does not include duration metadata with the recorded blob\n      blob = await fixWebmDuration(blob, this.durationMs, {\n        logger: () => null, // prevents polluting the browser console\n      });\n    }\n    if (!mimeType.match('audio/mp4')) {\n      blob = await transcode({\n        blob,\n        ...this.transcoderConfig,\n      });\n    }\n\n    if (!blob) return;\n\n    this.recordingUri = URL.createObjectURL(blob);\n    const file = createFileFromBlobs({\n      blobsArray: [blob],\n      fileName: this.generateRecordingTitle(blob.type),\n      mimeType: blob.type,\n    });\n\n    return {\n      asset_url: this.recordingUri,\n      custom: {\n        duration: this.durationMs / 1000,\n        file_size: blob.size,\n        mime_type: blob.type,\n        waveform_data: resampleWaveformData(\n          this.amplitudeRecorder?.amplitudes.value ?? [],\n          this.amplitudeRecorderConfig.sampleCount,\n        ),\n      },\n      localMetadata: {\n        file,\n        id: nanoid(),\n      },\n      title: file.name,\n      type: RecordingAttachmentType.VOICE_RECORDING,\n    } as LocalVoiceRecordingAttachment;\n  };\n\n  handleErrorEvent = (e: Event) => {\n    const { error } = e as ErrorEvent;\n    logError(error);\n    this.error.next(error);\n    this.notification.next({\n      text: this.t(\n        'mediaRecorder.error.recording',\n        'An error has occurred during recording',\n      ),\n      type: 'error',\n    });\n  };\n\n  handleDataavailableEvent = async (e: BlobEvent) => {\n    if (!e.data.size) return;\n    if (this.mediaType !== 'audio') return;\n    try {\n      this.recordedData.push(e.data);\n      const recording = await this.makeVoiceRecording();\n      if (!recording) return;\n      this.signalRecordingReady?.(recording);\n      this.recording.next(recording);\n    } catch (e) {\n      logError(e as Error);\n      this.error.next(e as Error);\n      this.notification.next({\n        text: this.t(\n          'mediaRecorder.error.processing',\n          'An error has occurred during the recording processing',\n        ),\n        type: 'error',\n      });\n    }\n  };\n\n  resetRecordingState = () => {\n    this.recordedData = [];\n    this.recording.next(undefined);\n    this.recordingState.next(undefined);\n    this.recordedChunkDurations = [];\n    this.startTime = undefined;\n  };\n\n  cleanUp = () => {\n    this.resetRecordingState();\n    if (this.recordingUri) URL.revokeObjectURL(this.recordingUri);\n    this.amplitudeRecorder?.close();\n    if (this.mediaRecorder) {\n      disposeOfMediaStream(this.mediaRecorder.stream);\n      this.mediaRecorder.removeEventListener(\n        'dataavailable',\n        this.handleDataavailableEvent,\n      );\n      this.mediaRecorder.removeEventListener('error', this.handleErrorEvent);\n    }\n  };\n\n  start = async () => {\n    if (\n      [MediaRecordingState.RECORDING, MediaRecordingState.PAUSED].includes(\n        this.recordingState.value as MediaRecordingState,\n      )\n    ) {\n      const error = new Error('Cannot start recording. Recording already in progress');\n      logError(error);\n      this.error.next(error);\n      return;\n    }\n\n    // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303\n    if (!navigator.mediaDevices) {\n      const error = new Error('Media recording is not supported');\n      logError(error);\n      this.error.next(error);\n      this.notification.next({\n        text: this.t('mediaRecorder.error.start', 'Error starting recording'),\n        type: 'error',\n      });\n      return;\n    }\n\n    if (this.mediaType === 'video') {\n      const error = new Error(\n        `Video recording is not supported. Provided MIME type: ${this.mediaRecorderConfig.mimeType}`,\n      );\n      logError(error);\n      this.error.next(error);\n      this.notification.next({\n        text: this.t('mediaRecorder.error.start', 'Error starting recording'),\n        type: 'error',\n      });\n      return;\n    }\n\n    if (!this.permission.state.value) {\n      await this.permission.check();\n    }\n\n    if (this.permission.state.value === 'denied') {\n      logError(new Error('Permission denied'));\n      return;\n    }\n\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n      this.mediaRecorder = new MediaRecorder(stream, this.mediaRecorderConfig);\n\n      this.mediaRecorder.addEventListener('dataavailable', this.handleDataavailableEvent);\n      this.mediaRecorder.addEventListener('error', this.handleErrorEvent);\n\n      this.startTime = new Date().getTime();\n      this.mediaRecorder.start();\n\n      if (this.mediaType === 'audio' && stream) {\n        this.amplitudeRecorder = new AmplitudeRecorder({\n          config: this.amplitudeRecorderConfig,\n          stream,\n        });\n        this.amplitudeRecorder.start();\n      }\n\n      this.recordingState.next(MediaRecordingState.RECORDING);\n    } catch (error) {\n      logError(error as Error);\n      this.cancel();\n      this.error.next(error as Error);\n      this.notification.next({\n        text: this.t('mediaRecorder.error.start', 'Error starting recording'),\n        type: 'error',\n      });\n    }\n  };\n\n  pause = () => {\n    if (this.recordingState.value !== MediaRecordingState.RECORDING) return;\n    // The native recorder can transition to 'inactive' on its own (e.g. iOS Safari\n    // interruptions or a preceding stop) while recordingState still reads RECORDING.\n    // Calling pause() on a non-recording recorder throws InvalidStateError.\n    if (this.mediaRecorder?.state !== 'recording') return;\n    if (this.startTime) {\n      this.recordedChunkDurations.push(new Date().getTime() - this.startTime);\n      this.startTime = undefined;\n    }\n    this.mediaRecorder?.pause();\n    // Flush current chunk so preview is available while paused.\n    this.mediaRecorder?.requestData();\n    this.amplitudeRecorder?.stop();\n    this.recordingState.next(MediaRecordingState.PAUSED);\n  };\n\n  resume = () => {\n    if (this.recordingState.value !== MediaRecordingState.PAUSED) return;\n    // resume() is only valid on a 'paused' recorder; the native recorder may have gone\n    // inactive while recordingState still reads PAUSED, which would throw InvalidStateError.\n    if (this.mediaRecorder?.state !== 'paused') return;\n    this.startTime = new Date().getTime();\n    this.mediaRecorder?.resume();\n    this.amplitudeRecorder?.start();\n    this.recordingState.next(MediaRecordingState.RECORDING);\n  };\n\n  stop = () => {\n    const recording = this.recording.value;\n    if (recording && this.mediaRecorder?.state === 'inactive')\n      return Promise.resolve(recording);\n\n    if (\n      ![MediaRecordingState.PAUSED, MediaRecordingState.RECORDING].includes(\n        (this.mediaRecorder?.state || '') as MediaRecordingState,\n      )\n    )\n      return Promise.resolve(undefined);\n\n    if (this.startTime) {\n      this.recordedChunkDurations.push(new Date().getTime() - this.startTime);\n      this.startTime = undefined;\n    }\n    const result = new Promise<LocalVoiceRecordingAttachment>((res) => {\n      this.signalRecordingReady = res;\n    });\n    this.mediaRecorder?.stop();\n    this.amplitudeRecorder?.stop();\n    this.recordingState.next(MediaRecordingState.STOPPED);\n    return result;\n  };\n\n  cancel = () => {\n    this.stop();\n    this.cleanUp();\n  };\n}\n"],"mappings":"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"}

package/dist/es/components/MediaRecorder/hooks/useMediaRecorder.mjs

@@ -1,17 +1,17 @@
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
-import { MediaRecorderController, MediaRecordingState } from "../classes/MediaRecorderController.mjs";
 import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { MediaRecorderController, MediaRecordingState } from "../classes/MediaRecorderController.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/MediaRecorder/hooks/useMediaRecorder.ts
-var useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig }) => {
-	const { t } = useTranslationContext("useMediaRecorder");
+var useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, recordingConfig }) => {
+	const { t } = useTranslationContext();
 	const { announceInteraction } = useInteractionAnnouncements();
 	const messageComposer = useMessageComposerController();
+	const sendMessageFn = messageComposer.send;
 	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,
@@ -28,7 +28,7 @@ var useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecord
 		if (!recording) return;
 		await messageComposer.attachmentManager.uploadAttachment(recording);
 		if (!asyncMessagesMultiSendEnabled) {
-			scheduleForSubmit(true);
+			await sendMessageFn();
 			announceInteraction("voiceRecording.sent");
 		} else announceInteraction("voiceRecording.attached");
 		recorder.cleanUp();
@@ -36,7 +36,8 @@ var useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecord
 		announceInteraction,
 		asyncMessagesMultiSendEnabled,
 		messageComposer,
-		recorder
+		recorder,
+		sendMessageFn
 	]);
 	const previousRecordingStateRef = useRef(recordingState);
 	useEffect(() => {
@@ -46,11 +47,6 @@ var useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecord
 		if (recordingState === MediaRecordingState.RECORDING) announceInteraction(previous === MediaRecordingState.PAUSED ? "voiceRecording.resumed" : "voiceRecording.started");
 		else if (recordingState === MediaRecordingState.PAUSED) announceInteraction("voiceRecording.paused");
 	}, [announceInteraction, recordingState]);
-	useEffect(() => {
-		if (!isScheduledForSubmit) return;
-		handleSubmit();
-		scheduleForSubmit(false);
-	}, [handleSubmit, isScheduledForSubmit]);
 	useEffect(() => {
 		if (!recorder) return;
 		recorder.permission.watch();

package/dist/es/components/MediaRecorder/hooks/useMediaRecorder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaRecorder.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/hooks/useMediaRecorder.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { MediaRecorderController, MediaRecordingState } from '../classes';\nimport { useTranslationContext } from '../../../context';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useInteractionAnnouncements } from '../../Accessibility';\n\nimport type { LocalVoiceRecordingAttachment } from 'stream-chat';\nimport type { CustomAudioRecordingConfig } from '../classes';\nimport type { MessageComposerContextValue } from '../../../context';\n\nexport type RecordingController = {\n  completeRecording: () => void;\n  permissionState?: PermissionState;\n  recorder?: MediaRecorderController;\n  recording?: LocalVoiceRecordingAttachment;\n  recordingState?: MediaRecordingState;\n};\n\ntype UseMediaRecorderParams = Pick<\n  MessageComposerContextValue,\n  'asyncMessagesMultiSendEnabled' | 'handleSubmit'\n> & {\n  enabled: boolean;\n  generateRecordingTitle?: (mimeType: string) => string;\n  recordingConfig?: CustomAudioRecordingConfig;\n};\n\nexport const useMediaRecorder = ({\n  asyncMessagesMultiSendEnabled,\n  enabled,\n  generateRecordingTitle,\n  handleSubmit,\n  recordingConfig,\n}: UseMediaRecorderParams): RecordingController => {\n  const { t } = useTranslationContext('useMediaRecorder');\n  const { announceInteraction } = useInteractionAnnouncements();\n  const messageComposer = useMessageComposerController();\n  const [recording, setRecording] = useState<LocalVoiceRecordingAttachment>();\n  const [recordingState, setRecordingState] = useState<MediaRecordingState>();\n  const [permissionState, setPermissionState] = useState<PermissionState>();\n  const [isScheduledForSubmit, scheduleForSubmit] = useState(false);\n\n  const recorder = useMemo(\n    () =>\n      enabled\n        ? new MediaRecorderController({\n            config: recordingConfig ?? {},\n            generateRecordingTitle,\n            t,\n          })\n        : undefined,\n    [recordingConfig, enabled, generateRecordingTitle, t],\n  );\n\n  const completeRecording = useCallback(async () => {\n    if (!recorder) return;\n    const recording = await recorder.stop();\n    if (!recording) return;\n    await messageComposer.attachmentManager.uploadAttachment(recording);\n    if (!asyncMessagesMultiSendEnabled) {\n      // FIXME: cannot call handleSubmit() directly as the function has stale reference to attachments\n      scheduleForSubmit(true);\n      announceInteraction('voiceRecording.sent');\n    } else {\n      announceInteraction('voiceRecording.attached');\n    }\n    recorder.cleanUp();\n  }, [announceInteraction, asyncMessagesMultiSendEnabled, messageComposer, recorder]);\n\n  const previousRecordingStateRef = useRef(recordingState);\n  useEffect(() => {\n    const previous = previousRecordingStateRef.current;\n    previousRecordingStateRef.current = recordingState;\n    if (previous === recordingState) return;\n    if (recordingState === MediaRecordingState.RECORDING) {\n      announceInteraction(\n        previous === MediaRecordingState.PAUSED\n          ? 'voiceRecording.resumed'\n          : 'voiceRecording.started',\n      );\n    } else if (recordingState === MediaRecordingState.PAUSED) {\n      announceInteraction('voiceRecording.paused');\n    }\n  }, [announceInteraction, recordingState]);\n\n  useEffect(() => {\n    if (!isScheduledForSubmit) return;\n    handleSubmit();\n    scheduleForSubmit(false);\n  }, [handleSubmit, isScheduledForSubmit]);\n\n  useEffect(() => {\n    if (!recorder) return;\n    recorder.permission.watch();\n    const recordingSubscription = recorder.recording.subscribe(setRecording);\n    const recordingStateSubscription =\n      recorder.recordingState.subscribe(setRecordingState);\n    const permissionStateSubscription =\n      recorder.permission.state.subscribe(setPermissionState);\n\n    return () => {\n      recorder.cancel();\n      recorder.permission.unwatch();\n      recordingSubscription.unsubscribe();\n      recordingStateSubscription.unsubscribe();\n      permissionStateSubscription.unsubscribe();\n    };\n  }, [recorder]);\n\n  return {\n    completeRecording,\n    permissionState,\n    recorder,\n    recording,\n    recordingState,\n  };\n};\n"],"mappings":";;;;;;AA2BA,IAAa,oBAAoB,EAC/B,+BACA,SACA,wBACA,cACA,sBACiD;CACjD,MAAM,EAAE,MAAM,sBAAsB,kBAAkB;CACtD,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAC1E,MAAM,CAAC,gBAAgB,qBAAqB,SAA8B;CAC1E,MAAM,CAAC,iBAAiB,sBAAsB,SAA0B;CACxE,MAAM,CAAC,sBAAsB,qBAAqB,SAAS,KAAK;CAEhE,MAAM,WAAW,cAEb,UACI,IAAI,wBAAwB;EAC1B,QAAQ,mBAAmB,CAAC;EAC5B;EACA;CACF,CAAC,IACD,KAAA,GACN;EAAC;EAAiB;EAAS;EAAwB;CAAC,CACtD;CAEA,MAAM,oBAAoB,YAAY,YAAY;EAChD,IAAI,CAAC,UAAU;EACf,MAAM,YAAY,MAAM,SAAS,KAAK;EACtC,IAAI,CAAC,WAAW;EAChB,MAAM,gBAAgB,kBAAkB,iBAAiB,SAAS;EAClE,IAAI,CAAC,+BAA+B;GAElC,kBAAkB,IAAI;GACtB,oBAAoB,qBAAqB;EAC3C,OACE,oBAAoB,yBAAyB;EAE/C,SAAS,QAAQ;CACnB,GAAG;EAAC;EAAqB;EAA+B;EAAiB;CAAQ,CAAC;CAElF,MAAM,4BAA4B,OAAO,cAAc;CACvD,gBAAgB;EACd,MAAM,WAAW,0BAA0B;EAC3C,0BAA0B,UAAU;EACpC,IAAI,aAAa,gBAAgB;EACjC,IAAI,mBAAmB,oBAAoB,WACzC,oBACE,aAAa,oBAAoB,SAC7B,2BACA,wBACN;OACK,IAAI,mBAAmB,oBAAoB,QAChD,oBAAoB,uBAAuB;CAE/C,GAAG,CAAC,qBAAqB,cAAc,CAAC;CAExC,gBAAgB;EACd,IAAI,CAAC,sBAAsB;EAC3B,aAAa;EACb,kBAAkB,KAAK;CACzB,GAAG,CAAC,cAAc,oBAAoB,CAAC;CAEvC,gBAAgB;EACd,IAAI,CAAC,UAAU;EACf,SAAS,WAAW,MAAM;EAC1B,MAAM,wBAAwB,SAAS,UAAU,UAAU,YAAY;EACvE,MAAM,6BACJ,SAAS,eAAe,UAAU,iBAAiB;EACrD,MAAM,8BACJ,SAAS,WAAW,MAAM,UAAU,kBAAkB;EAExD,aAAa;GACX,SAAS,OAAO;GAChB,SAAS,WAAW,QAAQ;GAC5B,sBAAsB,YAAY;GAClC,2BAA2B,YAAY;GACvC,4BAA4B,YAAY;EAC1C;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useMediaRecorder.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/hooks/useMediaRecorder.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { MediaRecorderController, MediaRecordingState } from '../classes';\nimport { useTranslationContext } from '../../../context';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useInteractionAnnouncements } from '../../Accessibility';\n\nimport type { LocalVoiceRecordingAttachment } from 'stream-chat';\nimport type { CustomAudioRecordingConfig } from '../classes';\nimport type { MessageComposerContextValue } from '../../../context';\n\nexport type RecordingController = {\n  completeRecording: () => void;\n  permissionState?: PermissionState;\n  recorder?: MediaRecorderController;\n  recording?: LocalVoiceRecordingAttachment;\n  recordingState?: MediaRecordingState;\n};\n\ntype UseMediaRecorderParams = Pick<\n  MessageComposerContextValue,\n  'asyncMessagesMultiSendEnabled'\n> & {\n  enabled: boolean;\n  generateRecordingTitle?: (mimeType: string) => string;\n  recordingConfig?: CustomAudioRecordingConfig;\n};\n\nexport const useMediaRecorder = ({\n  asyncMessagesMultiSendEnabled,\n  enabled,\n  generateRecordingTitle,\n  recordingConfig,\n}: UseMediaRecorderParams): RecordingController => {\n  const { t } = useTranslationContext();\n  const { announceInteraction } = useInteractionAnnouncements();\n  const messageComposer = useMessageComposerController();\n  const sendMessageFn = messageComposer.send;\n  const [recording, setRecording] = useState<LocalVoiceRecordingAttachment>();\n  const [recordingState, setRecordingState] = useState<MediaRecordingState>();\n  const [permissionState, setPermissionState] = useState<PermissionState>();\n\n  const recorder = useMemo(\n    () =>\n      enabled\n        ? new MediaRecorderController({\n            config: recordingConfig ?? {},\n            generateRecordingTitle,\n            t,\n          })\n        : undefined,\n    [recordingConfig, enabled, generateRecordingTitle, t],\n  );\n\n  const completeRecording = useCallback(async () => {\n    if (!recorder) return;\n    const recording = await recorder.stop();\n    if (!recording) return;\n    await messageComposer.attachmentManager.uploadAttachment(recording);\n    if (!asyncMessagesMultiSendEnabled) {\n      await sendMessageFn();\n      announceInteraction('voiceRecording.sent');\n    } else {\n      announceInteraction('voiceRecording.attached');\n    }\n    recorder.cleanUp();\n  }, [\n    announceInteraction,\n    asyncMessagesMultiSendEnabled,\n    messageComposer,\n    recorder,\n    sendMessageFn,\n  ]);\n\n  const previousRecordingStateRef = useRef(recordingState);\n  useEffect(() => {\n    const previous = previousRecordingStateRef.current;\n    previousRecordingStateRef.current = recordingState;\n    if (previous === recordingState) return;\n    if (recordingState === MediaRecordingState.RECORDING) {\n      announceInteraction(\n        previous === MediaRecordingState.PAUSED\n          ? 'voiceRecording.resumed'\n          : 'voiceRecording.started',\n      );\n    } else if (recordingState === MediaRecordingState.PAUSED) {\n      announceInteraction('voiceRecording.paused');\n    }\n  }, [announceInteraction, recordingState]);\n\n  useEffect(() => {\n    if (!recorder) return;\n    recorder.permission.watch();\n    const recordingSubscription = recorder.recording.subscribe(setRecording);\n    const recordingStateSubscription =\n      recorder.recordingState.subscribe(setRecordingState);\n    const permissionStateSubscription =\n      recorder.permission.state.subscribe(setPermissionState);\n\n    return () => {\n      recorder.cancel();\n      recorder.permission.unwatch();\n      recordingSubscription.unsubscribe();\n      recordingStateSubscription.unsubscribe();\n      permissionStateSubscription.unsubscribe();\n    };\n  }, [recorder]);\n\n  return {\n    completeRecording,\n    permissionState,\n    recorder,\n    recording,\n    recordingState,\n  };\n};\n"],"mappings":";;;;;;AA2BA,IAAa,oBAAoB,EAC/B,+BACA,SACA,wBACA,sBACiD;CACjD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,gBAAgB,gBAAgB;CACtC,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAC1E,MAAM,CAAC,gBAAgB,qBAAqB,SAA8B;CAC1E,MAAM,CAAC,iBAAiB,sBAAsB,SAA0B;CAExE,MAAM,WAAW,cAEb,UACI,IAAI,wBAAwB;EAC1B,QAAQ,mBAAmB,CAAC;EAC5B;EACA;CACF,CAAC,IACD,KAAA,GACN;EAAC;EAAiB;EAAS;EAAwB;CAAC,CACtD;CAEA,MAAM,oBAAoB,YAAY,YAAY;EAChD,IAAI,CAAC,UAAU;EACf,MAAM,YAAY,MAAM,SAAS,KAAK;EACtC,IAAI,CAAC,WAAW;EAChB,MAAM,gBAAgB,kBAAkB,iBAAiB,SAAS;EAClE,IAAI,CAAC,+BAA+B;GAClC,MAAM,cAAc;GACpB,oBAAoB,qBAAqB;EAC3C,OACE,oBAAoB,yBAAyB;EAE/C,SAAS,QAAQ;CACnB,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,4BAA4B,OAAO,cAAc;CACvD,gBAAgB;EACd,MAAM,WAAW,0BAA0B;EAC3C,0BAA0B,UAAU;EACpC,IAAI,aAAa,gBAAgB;EACjC,IAAI,mBAAmB,oBAAoB,WACzC,oBACE,aAAa,oBAAoB,SAC7B,2BACA,wBACN;OACK,IAAI,mBAAmB,oBAAoB,QAChD,oBAAoB,uBAAuB;CAE/C,GAAG,CAAC,qBAAqB,cAAc,CAAC;CAExC,gBAAgB;EACd,IAAI,CAAC,UAAU;EACf,SAAS,WAAW,MAAM;EAC1B,MAAM,wBAAwB,SAAS,UAAU,UAAU,YAAY;EACvE,MAAM,6BACJ,SAAS,eAAe,UAAU,iBAAiB;EACrD,MAAM,8BACJ,SAAS,WAAW,MAAM,UAAU,kBAAkB;EAExD,aAAa;GACX,SAAS,OAAO;GAChB,SAAS,WAAW,QAAQ;GAC5B,sBAAsB,YAAY;GAClC,2BAA2B,YAAY;GACvC,4BAA4B,YAAY;EAC1C;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/es/components/MediaRecorder/observable/BehaviorSubject.mjs

@@ -2,6 +2,7 @@ import { createObserver } from "./Observer.mjs";
 import { Subject } from "./Subject.mjs";
 //#region src/components/MediaRecorder/observable/BehaviorSubject.ts
 var BehaviorSubject = class extends Subject {
+	_value;
 	constructor(_value) {
 		super();
 		this._value = _value;

package/dist/es/components/MediaRecorder/observable/BehaviorSubject.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BehaviorSubject.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/BehaviorSubject.ts"],"sourcesContent":["import { Subject } from './Subject';\nimport type { ObserverOrNext } from './Observer';\nimport { createObserver } from './Observer';\nimport type { Subscription } from './Subscription';\n\nexport class BehaviorSubject<T> extends Subject<T> {\n  constructor(private _value: T) {\n    super();\n  }\n\n  get value(): T {\n    const { _value, thrownError } = this;\n    if (thrownError) {\n      throw thrownError;\n    }\n    return _value;\n  }\n\n  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {\n    const observer = createObserver<T>(observerOrNext);\n    const subscription = super.subscribe(observerOrNext);\n    if (!subscription.closed) observer.next(this._value);\n    return subscription;\n  }\n\n  next(value: T): void {\n    super.next((this._value = value));\n  }\n}\n"],"mappings":";;;AAKA,IAAa,kBAAb,cAAwC,QAAW;CACjD,YAAY,QAAmB;EAC7B,MAAM;EADY,KAAA,SAAA;CAEpB;CAEA,IAAI,QAAW;EACb,MAAM,EAAE,QAAQ,gBAAgB;EAChC,IAAI,aACF,MAAM;EAER,OAAO;CACT;CAEA,UAAU,gBAAiD;EACzD,MAAM,WAAW,eAAkB,cAAc;EACjD,MAAM,eAAe,MAAM,UAAU,cAAc;EACnD,IAAI,CAAC,aAAa,QAAQ,SAAS,KAAK,KAAK,MAAM;EACnD,OAAO;CACT;CAEA,KAAK,OAAgB;EACnB,MAAM,KAAM,KAAK,SAAS,KAAM;CAClC;AACF"}
+{"version":3,"file":"BehaviorSubject.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/BehaviorSubject.ts"],"sourcesContent":["import { Subject } from './Subject';\nimport type { ObserverOrNext } from './Observer';\nimport { createObserver } from './Observer';\nimport type { Subscription } from './Subscription';\n\nexport class BehaviorSubject<T> extends Subject<T> {\n  constructor(private _value: T) {\n    super();\n  }\n\n  get value(): T {\n    const { _value, thrownError } = this;\n    if (thrownError) {\n      throw thrownError;\n    }\n    return _value;\n  }\n\n  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {\n    const observer = createObserver<T>(observerOrNext);\n    const subscription = super.subscribe(observerOrNext);\n    if (!subscription.closed) observer.next(this._value);\n    return subscription;\n  }\n\n  next(value: T): void {\n    super.next((this._value = value));\n  }\n}\n"],"mappings":";;;AAKA,IAAa,kBAAb,cAAwC,QAAW;CAC7B;CAApB,YAAY,QAAmB;EAC7B,MAAM;EADY,KAAA,SAAA;CAEpB;CAEA,IAAI,QAAW;EACb,MAAM,EAAE,QAAQ,gBAAgB;EAChC,IAAI,aACF,MAAM;EAER,OAAO;CACT;CAEA,UAAU,gBAAiD;EACzD,MAAM,WAAW,eAAkB,cAAc;EACjD,MAAM,eAAe,MAAM,UAAU,cAAc;EACnD,IAAI,CAAC,aAAa,QAAQ,SAAS,KAAK,KAAK,MAAM;EACnD,OAAO;CACT;CAEA,KAAK,OAAgB;EACnB,MAAM,KAAM,KAAK,SAAS,KAAM;CAClC;AACF"}

package/dist/es/components/MediaRecorder/observable/Observable.mjs

@@ -2,8 +2,9 @@ import { Subscription } from "./Subscription.mjs";
 import { createObserver } from "./Observer.mjs";
 //#region src/components/MediaRecorder/observable/Observable.ts
 var Observable = class {
+	_closed = false;
+	_producer;
 	constructor(producer) {
-		this._closed = false;
 		if (producer) this._producer = producer;
 	}
 	get closed() {

package/dist/es/components/MediaRecorder/observable/Observable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Observable.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Observable.ts"],"sourcesContent":["import type { ObserverOrNext } from './Observer';\nimport { createObserver } from './Observer';\nimport { Subscription } from './Subscription';\n\nexport interface Unsubscribable {\n  unsubscribe(): void;\n}\n\ntype Producer<T> = (observer: ObserverOrNext<T>) => Subscription;\n\nexport interface Subscribable<T> {\n  subscribe(observerOrNext: ObserverOrNext<T>): Unsubscribable;\n}\n\nexport class Observable<T> implements Subscribable<T> {\n  protected _closed = false;\n  private _producer: Producer<T> | undefined;\n\n  constructor(producer?: Producer<T>) {\n    if (producer) this._producer = producer;\n  }\n\n  get closed() {\n    return this._closed;\n  }\n\n  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {\n    const observer = createObserver<T>(observerOrNext);\n    if (!this.closed) {\n      this._producer?.(observer);\n    }\n    return new Subscription(() => {\n      this._closed = true;\n    });\n  }\n}\n"],"mappings":";;;AAcA,IAAa,aAAb,MAAsD;CAIpD,YAAY,UAAwB;iBAHhB;EAIlB,IAAI,UAAU,KAAK,YAAY;CACjC;CAEA,IAAI,SAAS;EACX,OAAO,KAAK;CACd;CAEA,UAAU,gBAAiD;EACzD,MAAM,WAAW,eAAkB,cAAc;EACjD,IAAI,CAAC,KAAK,QACR,KAAK,YAAY,QAAQ;EAE3B,OAAO,IAAI,mBAAmB;GAC5B,KAAK,UAAU;EACjB,CAAC;CACH;AACF"}
+{"version":3,"file":"Observable.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Observable.ts"],"sourcesContent":["import type { ObserverOrNext } from './Observer';\nimport { createObserver } from './Observer';\nimport { Subscription } from './Subscription';\n\nexport interface Unsubscribable {\n  unsubscribe(): void;\n}\n\ntype Producer<T> = (observer: ObserverOrNext<T>) => Subscription;\n\nexport interface Subscribable<T> {\n  subscribe(observerOrNext: ObserverOrNext<T>): Unsubscribable;\n}\n\nexport class Observable<T> implements Subscribable<T> {\n  protected _closed = false;\n  private _producer: Producer<T> | undefined;\n\n  constructor(producer?: Producer<T>) {\n    if (producer) this._producer = producer;\n  }\n\n  get closed() {\n    return this._closed;\n  }\n\n  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {\n    const observer = createObserver<T>(observerOrNext);\n    if (!this.closed) {\n      this._producer?.(observer);\n    }\n    return new Subscription(() => {\n      this._closed = true;\n    });\n  }\n}\n"],"mappings":";;;AAcA,IAAa,aAAb,MAAsD;CACpD,UAAoB;CACpB;CAEA,YAAY,UAAwB;EAClC,IAAI,UAAU,KAAK,YAAY;CACjC;CAEA,IAAI,SAAS;EACX,OAAO,KAAK;CACd;CAEA,UAAU,gBAAiD;EACzD,MAAM,WAAW,eAAkB,cAAc;EACjD,IAAI,CAAC,KAAK,QACR,KAAK,YAAY,QAAQ;EAE3B,OAAO,IAAI,mBAAmB;GAC5B,KAAK,UAAU;EACjB,CAAC;CACH;AACF"}

package/dist/es/components/MediaRecorder/observable/Subject.mjs

@@ -3,10 +3,11 @@ import { createObserver } from "./Observer.mjs";
 import { Observable } from "./Observable.mjs";
 //#region src/components/MediaRecorder/observable/Subject.ts
 var Subject = class extends Observable {
+	_observers = /* @__PURE__ */ new Map();
+	_observerCounter = 0;
+	thrownError;
 	constructor() {
 		super();
-		this._observers = /* @__PURE__ */ new Map();
-		this._observerCounter = 0;
 	}
 	get observers() {
 		return Array.from(this._observers.values());