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

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

@@ -0,0 +1,63 @@
+import { Subscription } from "../observable/Subscription.mjs";
+import { Subject } from "../observable/Subject.mjs";
+import { BehaviorSubject } from "../observable/BehaviorSubject.mjs";
+//#region src/components/MediaRecorder/classes/BrowserPermission.ts
+var RecordingPermission = /* @__PURE__ */ function(RecordingPermission) {
+	RecordingPermission["CAM"] = "camera";
+	RecordingPermission["MIC"] = "microphone";
+	return RecordingPermission;
+}({});
+var MEDIA_TO_PERMISSION = {
+	audio: "microphone",
+	video: "camera"
+};
+var BrowserPermission = class {
+	name;
+	state = new BehaviorSubject(void 0);
+	status = new BehaviorSubject(void 0);
+	error = new Subject();
+	changeSubscriptions = [];
+	constructor({ mediaType }) {
+		this.name = MEDIA_TO_PERMISSION[mediaType];
+	}
+	get isWatching() {
+		return this.changeSubscriptions.some((subscription) => !subscription.closed);
+	}
+	async watch() {
+		if (!this.status.value) {
+			await this.check();
+			if (!this.status.value) return;
+		}
+		const status = this.status.value;
+		const handlePermissionChange = (e) => {
+			const { state } = e.target;
+			this.state.next(state);
+		};
+		status.addEventListener("change", handlePermissionChange);
+		this.changeSubscriptions.push(new Subscription(() => {
+			status.removeEventListener("change", handlePermissionChange);
+		}));
+	}
+	unwatch() {
+		this.changeSubscriptions.forEach((subscription) => subscription.unsubscribe());
+	}
+	async check() {
+		if (!this.name) {
+			this.error.next(/* @__PURE__ */ new Error("Unknown media recording permission"));
+			return;
+		}
+		let permissionState;
+		try {
+			const permissionStatus = await navigator.permissions.query({ name: this.name });
+			permissionState = permissionStatus.state;
+			this.status.next(permissionStatus);
+		} catch (e) {
+			permissionState = "granted";
+		}
+		this.state.next(permissionState);
+	}
+};
+//#endregion
+export { BrowserPermission, RecordingPermission };
+
+//# sourceMappingURL=BrowserPermission.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserPermission.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/classes/BrowserPermission.ts"],"sourcesContent":["import type { RecordedMediaType } from '../../ReactFileUtilities';\nimport type { ChangeEvent } from 'react';\nimport { Subscription } from '../observable/Subscription';\nimport { Subject } from '../observable/Subject';\nimport { BehaviorSubject } from '../observable/BehaviorSubject';\n\nexport enum RecordingPermission {\n  CAM = 'camera',\n  MIC = 'microphone',\n}\n\nconst MEDIA_TO_PERMISSION: Record<RecordedMediaType, RecordingPermission> = {\n  audio: RecordingPermission.MIC,\n  video: RecordingPermission.CAM,\n};\n\nexport type BrowserPermissionOptions = {\n  mediaType: RecordedMediaType;\n};\n\nexport class BrowserPermission {\n  name: string;\n  state = new BehaviorSubject<PermissionState | undefined>(undefined);\n  status = new BehaviorSubject<PermissionStatus | undefined>(undefined);\n  error = new Subject<Error | undefined>();\n\n  private changeSubscriptions: Subscription[] = [];\n\n  constructor({ mediaType }: BrowserPermissionOptions) {\n    this.name = MEDIA_TO_PERMISSION[mediaType];\n  }\n\n  get isWatching() {\n    return this.changeSubscriptions.some((subscription) => !subscription.closed);\n  }\n\n  async watch() {\n    if (!this.status.value) {\n      await this.check();\n      if (!this.status.value) return;\n    }\n\n    const status = this.status.value;\n    const handlePermissionChange = (e: Event) => {\n      const { state } = (e as unknown as ChangeEvent<PermissionStatus>).target;\n      this.state.next(state);\n    };\n    status.addEventListener('change', handlePermissionChange);\n\n    this.changeSubscriptions.push(\n      new Subscription(() => {\n        status.removeEventListener('change', handlePermissionChange);\n      }),\n    );\n  }\n\n  unwatch() {\n    this.changeSubscriptions.forEach((subscription) => subscription.unsubscribe());\n  }\n\n  async check() {\n    if (!this.name) {\n      this.error.next(new Error('Unknown media recording permission'));\n      return;\n    }\n\n    let permissionState: PermissionState;\n    try {\n      const permissionStatus = await navigator.permissions.query({\n        name: this.name as unknown as PermissionName,\n      });\n      permissionState = permissionStatus.state;\n      this.status.next(permissionStatus);\n    } catch (e) {\n      // permission does not exist - cannot be queried\n      // an example would be Firefox - camera, neither microphone perms can be queried\n      permissionState = 'granted' as PermissionState;\n    }\n    this.state.next(permissionState);\n  }\n}\n"],"mappings":";;;;AAMA,IAAY,sBAAL,yBAAA,qBAAA;CACL,oBAAA,SAAA;CACA,oBAAA,SAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAM,sBAAsE;CAC1E,OAAA;CACA,OAAA;AACF;AAMA,IAAa,oBAAb,MAA+B;CAC7B;CACA,QAAQ,IAAI,gBAA6C,KAAA,CAAS;CAClE,SAAS,IAAI,gBAA8C,KAAA,CAAS;CACpE,QAAQ,IAAI,QAA2B;CAEvC,sBAA8C,CAAC;CAE/C,YAAY,EAAE,aAAuC;EACnD,KAAK,OAAO,oBAAoB;CAClC;CAEA,IAAI,aAAa;EACf,OAAO,KAAK,oBAAoB,MAAM,iBAAiB,CAAC,aAAa,MAAM;CAC7E;CAEA,MAAM,QAAQ;EACZ,IAAI,CAAC,KAAK,OAAO,OAAO;GACtB,MAAM,KAAK,MAAM;GACjB,IAAI,CAAC,KAAK,OAAO,OAAO;EAC1B;EAEA,MAAM,SAAS,KAAK,OAAO;EAC3B,MAAM,0BAA0B,MAAa;GAC3C,MAAM,EAAE,UAAW,EAA+C;GAClE,KAAK,MAAM,KAAK,KAAK;EACvB;EACA,OAAO,iBAAiB,UAAU,sBAAsB;EAExD,KAAK,oBAAoB,KACvB,IAAI,mBAAmB;GACrB,OAAO,oBAAoB,UAAU,sBAAsB;EAC7D,CAAC,CACH;CACF;CAEA,UAAU;EACR,KAAK,oBAAoB,SAAS,iBAAiB,aAAa,YAAY,CAAC;CAC/E;CAEA,MAAM,QAAQ;EACZ,IAAI,CAAC,KAAK,MAAM;GACd,KAAK,MAAM,qBAAK,IAAI,MAAM,oCAAoC,CAAC;GAC/D;EACF;EAEA,IAAI;EACJ,IAAI;GACF,MAAM,mBAAmB,MAAM,UAAU,YAAY,MAAM,EACzD,MAAM,KAAK,KACb,CAAC;GACD,kBAAkB,iBAAiB;GACnC,KAAK,OAAO,KAAK,gBAAgB;EACnC,SAAS,GAAG;GAGV,kBAAkB;EACpB;EACA,KAAK,MAAM,KAAK,eAAe;CACjC;AACF"}

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

@@ -0,0 +1,251 @@
+import { defaultTranslatorFunction } from "../../../i18n/utils.mjs";
+import { resampleWaveformData } from "../../Attachment/audioSampling.mjs";
+import { createFileFromBlobs, getExtensionFromMimeType, getRecordedMediaTypeFromMimeType } from "../../ReactFileUtilities/utils.mjs";
+import { Subject } from "../observable/Subject.mjs";
+import { BehaviorSubject } from "../observable/BehaviorSubject.mjs";
+import { BrowserPermission } from "./BrowserPermission.mjs";
+import { mergeDeepUndefined } from "../../../utils/mergeDeep.mjs";
+import { AmplitudeRecorder, DEFAULT_AMPLITUDE_RECORDER_CONFIG } from "./AmplitudeRecorder.mjs";
+import { transcode } from "../transcode/index.mjs";
+import { nanoid } from "nanoid";
+import fixWebmDuration from "fix-webm-duration";
+//#region src/components/MediaRecorder/classes/MediaRecorderController.ts
+var RECORDED_MIME_TYPE_BY_BROWSER = { audio: {
+	others: "audio/webm",
+	safari: "audio/mp4;codecs=mp4a.40.2"
+} };
+var DEFAULT_AUDIO_TRANSCODER_CONFIG = { sampleRate: 16e3 };
+var disposeOfMediaStream = (stream) => {
+	if (!stream?.active) return;
+	stream.getTracks().forEach((track) => {
+		track.stop();
+		stream.removeTrack(track);
+	});
+};
+var logError = (e) => e && console.error("[MEDIA RECORDER ERROR]", e);
+var MediaRecordingState = /* @__PURE__ */ function(MediaRecordingState) {
+	MediaRecordingState["PAUSED"] = "paused";
+	MediaRecordingState["RECORDING"] = "recording";
+	MediaRecordingState["STOPPED"] = "stopped";
+	return MediaRecordingState;
+}({});
+var RecordingAttachmentType = /* @__PURE__ */ function(RecordingAttachmentType) {
+	RecordingAttachmentType["VOICE_RECORDING"] = "voiceRecording";
+	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.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,
+				mime_type: blob.type,
+				waveform_data: resampleWaveformData(this.amplitudeRecorder?.amplitudes.value ?? [], this.amplitudeRecorderConfig.sampleCount)
+			},
+			localMetadata: {
+				file,
+				id: nanoid()
+			},
+			title: file.name,
+			type: "voiceRecording"
+		};
+	};
+	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("mediaRecorder.error.start", "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.recordingState.next("recording");
+		} catch (error) {
+			logError(error);
+			this.cancel();
+			this.error.next(error);
+			this.notification.next({
+				text: this.t("mediaRecorder.error.start", "Error starting recording"),
+				type: "error"
+			});
+		}
+	};
+	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 };
+
+//# sourceMappingURL=MediaRecorderController.mjs.map

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

@@ -0,0 +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      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":";;;;;;;;;;;;AAuBA,IAAa,gCAAgC,EAC3C,OAAO;CACL,QAAQ;CACR,QAAQ;AACV,EACF;AAEA,IAAa,kCAAoD,EAC/D,YAAY,KACd;AAEA,IAAM,wBAAwB,WAAyB;CACrD,IAAI,CAAC,QAAQ,QAAQ;CACrB,OAAO,UAAU,CAAC,CAAC,SAAS,UAAU;EACpC,MAAM,KAAK;EACX,OAAO,YAAY,KAAK;CAC1B,CAAC;AACH;AAEA,IAAM,YAAY,MAAc,KAAK,QAAQ,MAAM,0BAA0B,CAAC;AAqB9E,IAAY,sBAAL,yBAAA,qBAAA;CACL,oBAAA,YAAA;CACA,oBAAA,eAAA;CACA,oBAAA,aAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,0BAAL,yBAAA,yBAAA;CACL,wBAAA,qBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAa,0BAAb,MAAqC;CACnC;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA,yBAAmC,CAAC;CACpC,eAAuB,CAAC;CACxB;CACA;CAEA;CAEA,iBAAiB,IAAI,gBAAiD,KAAA,CAAS;CAC/E,YAAY,IAAI,gBAA2D,KAAA,CAAS;CACpF,QAAQ,IAAI,QAA2B;CACvC,eAAe,IAAI,QAAiE;CAEpF;CACA;CAEA,YAAY,EAAE,QAAQ,wBAAwB,MAA4B,CAAC,GAAG;EAC5E,KAAK,IAAI,KAAK;EAEd,KAAK,0BAA0B,mBAC7B,EAAE,GAAG,QAAQ,wBAAwB,GACrC,iCACF;EAEA,KAAK,sBAAsB,mBACzB,EAAE,GAAG,QAAQ,oBAAoB,GACjC,EACE,UAAU,cAAc,gBAAgB,YAAY,IAChD,8BAA8B,MAAM,SACpC,8BAA8B,MAAM,OAC1C,CACF;EAEA,KAAK,mBAAmB,mBACtB,EAAE,GAAG,QAAQ,iBAAiB,GAC9B,+BACF;EAEA,MAAM,YAAY,iCAAiC,KAAK,oBAAoB,QAAQ;EACpF,IAAI,CAAC,WACH,MAAM,IAAI,MACR,8EAA8E,KAAK,oBAAoB,UACzG;EAEF,KAAK,YAAY;EAEjB,KAAK,aAAa,IAAI,kBAAkB,EAAE,UAAU,CAAC;EAErD,KAAK,+BAA+B;CACtC;CAEA,IAAI,aAAa;EACf,OAAO,KAAK,uBAAuB,QAAQ,KAAK,QAAQ,MAAM,KAAK,CAAC;CACtE;CAEA,0BAA0B,aAAqB;EAC7C,IAAI,KAAK,8BACP,OAAO,KAAK,6BAA6B,QAAQ;EAEnD,OAAO,GAAG,KAAK,UAAU,8BAAa,IAAI,KAAK,EAAA,CAAE,YAAY,EAAE,GAAG,yBAChE,QACF;CACF;CAEA,qBAAqB,YAAY;EAC/B,IAAI,KAAK,cAAc,IAAI,gBAAgB,KAAK,YAAY;EAE5D,IAAI,CAAC,KAAK,aAAa,QAAQ;EAC/B,MAAM,EAAE,aAAa,KAAK;EAC1B,IAAI,OAAO,IAAI,KAAK,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;EACzD,IAAI,SAAS,MAAM,YAAY,GAE7B,OAAO,MAAM,gBAAgB,MAAM,KAAK,YAAY,EAClD,cAAc,KAChB,CAAC;EAEH,IAAI,CAAC,SAAS,MAAM,WAAW,GAC7B,OAAO,MAAM,UAAU;GACrB;GACA,GAAG,KAAK;EACV,CAAC;EAGH,IAAI,CAAC,MAAM;EAEX,KAAK,eAAe,IAAI,gBAAgB,IAAI;EAC5C,MAAM,OAAO,oBAAoB;GAC/B,YAAY,CAAC,IAAI;GACjB,UAAU,KAAK,uBAAuB,KAAK,IAAI;GAC/C,UAAU,KAAK;EACjB,CAAC;EAED,OAAO;GACL,WAAW,KAAK;GAChB,QAAQ;IACN,UAAU,KAAK,aAAa;IAC5B,WAAW,KAAK;IAChB,WAAW,KAAK;IAChB,eAAe,qBACb,KAAK,mBAAmB,WAAW,SAAS,CAAC,GAC7C,KAAK,wBAAwB,WAC/B;GACF;GACA,eAAe;IACb;IACA,IAAI,OAAO;GACb;GACA,OAAO,KAAK;GACZ,MAAA;EACF;CACF;CAEA,oBAAoB,MAAa;EAC/B,MAAM,EAAE,UAAU;EAClB,SAAS,KAAK;EACd,KAAK,MAAM,KAAK,KAAK;EACrB,KAAK,aAAa,KAAK;GACrB,MAAM,KAAK,EACT,iCACA,wCACF;GACA,MAAM;EACR,CAAC;CACH;CAEA,2BAA2B,OAAO,MAAiB;EACjD,IAAI,CAAC,EAAE,KAAK,MAAM;EAClB,IAAI,KAAK,cAAc,SAAS;EAChC,IAAI;GACF,KAAK,aAAa,KAAK,EAAE,IAAI;GAC7B,MAAM,YAAY,MAAM,KAAK,mBAAmB;GAChD,IAAI,CAAC,WAAW;GAChB,KAAK,uBAAuB,SAAS;GACrC,KAAK,UAAU,KAAK,SAAS;EAC/B,SAAS,GAAG;GACV,SAAS,CAAU;GACnB,KAAK,MAAM,KAAK,CAAU;GAC1B,KAAK,aAAa,KAAK;IACrB,MAAM,KAAK,EACT,kCACA,uDACF;IACA,MAAM;GACR,CAAC;EACH;CACF;CAEA,4BAA4B;EAC1B,KAAK,eAAe,CAAC;EACrB,KAAK,UAAU,KAAK,KAAA,CAAS;EAC7B,KAAK,eAAe,KAAK,KAAA,CAAS;EAClC,KAAK,yBAAyB,CAAC;EAC/B,KAAK,YAAY,KAAA;CACnB;CAEA,gBAAgB;EACd,KAAK,oBAAoB;EACzB,IAAI,KAAK,cAAc,IAAI,gBAAgB,KAAK,YAAY;EAC5D,KAAK,mBAAmB,MAAM;EAC9B,IAAI,KAAK,eAAe;GACtB,qBAAqB,KAAK,cAAc,MAAM;GAC9C,KAAK,cAAc,oBACjB,iBACA,KAAK,wBACP;GACA,KAAK,cAAc,oBAAoB,SAAS,KAAK,gBAAgB;EACvE;CACF;CAEA,QAAQ,YAAY;EAClB,IACE,CAAA,aAAA,QAA0D,CAAC,CAAC,SAC1D,KAAK,eAAe,KACtB,GACA;GACA,MAAM,wBAAQ,IAAI,MAAM,uDAAuD;GAC/E,SAAS,KAAK;GACd,KAAK,MAAM,KAAK,KAAK;GACrB;EACF;EAGA,IAAI,CAAC,UAAU,cAAc;GAC3B,MAAM,wBAAQ,IAAI,MAAM,kCAAkC;GAC1D,SAAS,KAAK;GACd,KAAK,MAAM,KAAK,KAAK;GACrB,KAAK,aAAa,KAAK;IACrB,MAAM,KAAK,EAAE,6BAA6B,0BAA0B;IACpE,MAAM;GACR,CAAC;GACD;EACF;EAEA,IAAI,KAAK,cAAc,SAAS;GAC9B,MAAM,wBAAQ,IAAI,MAChB,yDAAyD,KAAK,oBAAoB,UACpF;GACA,SAAS,KAAK;GACd,KAAK,MAAM,KAAK,KAAK;GACrB,KAAK,aAAa,KAAK;IACrB,MAAM,KAAK,EAAE,6BAA6B,0BAA0B;IACpE,MAAM;GACR,CAAC;GACD;EACF;EAEA,IAAI,CAAC,KAAK,WAAW,MAAM,OACzB,MAAM,KAAK,WAAW,MAAM;EAG9B,IAAI,KAAK,WAAW,MAAM,UAAU,UAAU;GAC5C,yBAAS,IAAI,MAAM,mBAAmB,CAAC;GACvC;EACF;EAEA,IAAI;GACF,MAAM,SAAS,MAAM,UAAU,aAAa,aAAa,EAAE,OAAO,KAAK,CAAC;GACxE,KAAK,gBAAgB,IAAI,cAAc,QAAQ,KAAK,mBAAmB;GAEvE,KAAK,cAAc,iBAAiB,iBAAiB,KAAK,wBAAwB;GAClF,KAAK,cAAc,iBAAiB,SAAS,KAAK,gBAAgB;GAElE,KAAK,6BAAY,IAAI,KAAK,EAAA,CAAE,QAAQ;GACpC,KAAK,cAAc,MAAM;GAEzB,IAAI,KAAK,cAAc,WAAW,QAAQ;IACxC,KAAK,oBAAoB,IAAI,kBAAkB;KAC7C,QAAQ,KAAK;KACb;IACF,CAAC;IACD,KAAK,kBAAkB,MAAM;GAC/B;GAEA,KAAK,eAAe,KAAA,WAAkC;EACxD,SAAS,OAAO;GACd,SAAS,KAAc;GACvB,KAAK,OAAO;GACZ,KAAK,MAAM,KAAK,KAAc;GAC9B,KAAK,aAAa,KAAK;IACrB,MAAM,KAAK,EAAE,6BAA6B,0BAA0B;IACpE,MAAM;GACR,CAAC;EACH;CACF;CAEA,cAAc;EACZ,IAAI,KAAK,eAAe,UAAA,aAAyC;EAIjE,IAAI,KAAK,eAAe,UAAU,aAAa;EAC/C,IAAI,KAAK,WAAW;GAClB,KAAK,uBAAuB,sBAAK,IAAI,KAAK,EAAA,CAAE,QAAQ,IAAI,KAAK,SAAS;GACtE,KAAK,YAAY,KAAA;EACnB;EACA,KAAK,eAAe,MAAM;EAE1B,KAAK,eAAe,YAAY;EAChC,KAAK,mBAAmB,KAAK;EAC7B,KAAK,eAAe,KAAA,QAA+B;CACrD;CAEA,eAAe;EACb,IAAI,KAAK,eAAe,UAAA,UAAsC;EAG9D,IAAI,KAAK,eAAe,UAAU,UAAU;EAC5C,KAAK,6BAAY,IAAI,KAAK,EAAA,CAAE,QAAQ;EACpC,KAAK,eAAe,OAAO;EAC3B,KAAK,mBAAmB,MAAM;EAC9B,KAAK,eAAe,KAAA,WAAkC;CACxD;CAEA,aAAa;EACX,MAAM,YAAY,KAAK,UAAU;EACjC,IAAI,aAAa,KAAK,eAAe,UAAU,YAC7C,OAAO,QAAQ,QAAQ,SAAS;EAElC,IACE,CAAC,CAAA,UAAA,WAA0D,CAAC,CAAC,SAC1D,KAAK,eAAe,SAAS,EAChC,GAEA,OAAO,QAAQ,QAAQ,KAAA,CAAS;EAElC,IAAI,KAAK,WAAW;GAClB,KAAK,uBAAuB,sBAAK,IAAI,KAAK,EAAA,CAAE,QAAQ,IAAI,KAAK,SAAS;GACtE,KAAK,YAAY,KAAA;EACnB;EACA,MAAM,SAAS,IAAI,SAAwC,QAAQ;GACjE,KAAK,uBAAuB;EAC9B,CAAC;EACD,KAAK,eAAe,KAAK;EACzB,KAAK,mBAAmB,KAAK;EAC7B,KAAK,eAAe,KAAA,SAAgC;EACpD,OAAO;CACT;CAEA,eAAe;EACb,KAAK,KAAK;EACV,KAAK,QAAQ;CACf;AACF"}

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

@@ -0,0 +1,75 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.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, 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 recorder = useMemo(() => enabled ? new MediaRecorderController({
+		config: recordingConfig ?? {},
+		generateRecordingTitle,
+		t
+	}) : void 0, [
+		recordingConfig,
+		enabled,
+		generateRecordingTitle,
+		t
+	]);
+	const completeRecording = useCallback(async () => {
+		if (!recorder) return;
+		const recording = await recorder.stop();
+		if (!recording) return;
+		await messageComposer.attachmentManager.uploadAttachment(recording);
+		if (!asyncMessagesMultiSendEnabled) {
+			await sendMessageFn();
+			announceInteraction("voiceRecording.sent");
+		} else announceInteraction("voiceRecording.attached");
+		recorder.cleanUp();
+	}, [
+		announceInteraction,
+		asyncMessagesMultiSendEnabled,
+		messageComposer,
+		recorder,
+		sendMessageFn
+	]);
+	const previousRecordingStateRef = useRef(recordingState);
+	useEffect(() => {
+		const previous = previousRecordingStateRef.current;
+		previousRecordingStateRef.current = recordingState;
+		if (previous === recordingState) return;
+		if (recordingState === MediaRecordingState.RECORDING) announceInteraction(previous === MediaRecordingState.PAUSED ? "voiceRecording.resumed" : "voiceRecording.started");
+		else if (recordingState === MediaRecordingState.PAUSED) announceInteraction("voiceRecording.paused");
+	}, [announceInteraction, recordingState]);
+	useEffect(() => {
+		if (!recorder) return;
+		recorder.permission.watch();
+		const recordingSubscription = recorder.recording.subscribe(setRecording);
+		const recordingStateSubscription = recorder.recordingState.subscribe(setRecordingState);
+		const permissionStateSubscription = recorder.permission.state.subscribe(setPermissionState);
+		return () => {
+			recorder.cancel();
+			recorder.permission.unwatch();
+			recordingSubscription.unsubscribe();
+			recordingStateSubscription.unsubscribe();
+			permissionStateSubscription.unsubscribe();
+		};
+	}, [recorder]);
+	return {
+		completeRecording,
+		permissionState,
+		recorder,
+		recording,
+		recordingState
+	};
+};
+//#endregion
+export { useMediaRecorder };
+
+//# sourceMappingURL=useMediaRecorder.mjs.map

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

@@ -0,0 +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'\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

@@ -0,0 +1,28 @@
+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;
+	}
+	get value() {
+		const { _value, thrownError } = this;
+		if (thrownError) throw thrownError;
+		return _value;
+	}
+	subscribe(observerOrNext) {
+		const observer = createObserver(observerOrNext);
+		const subscription = super.subscribe(observerOrNext);
+		if (!subscription.closed) observer.next(this._value);
+		return subscription;
+	}
+	next(value) {
+		super.next(this._value = value);
+	}
+};
+//#endregion
+export { BehaviorSubject };
+
+//# sourceMappingURL=BehaviorSubject.mjs.map

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

@@ -0,0 +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;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

@@ -0,0 +1,24 @@
+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) {
+		if (producer) this._producer = producer;
+	}
+	get closed() {
+		return this._closed;
+	}
+	subscribe(observerOrNext) {
+		const observer = createObserver(observerOrNext);
+		if (!this.closed) this._producer?.(observer);
+		return new Subscription(() => {
+			this._closed = true;
+		});
+	}
+};
+//#endregion
+export { Observable };
+
+//# sourceMappingURL=Observable.mjs.map

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

@@ -0,0 +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;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/Observer.mjs

@@ -0,0 +1,8 @@
+//#region src/components/MediaRecorder/observable/Observer.ts
+function createObserver(observerOrNext) {
+	return typeof observerOrNext === "function" ? { next: observerOrNext } : observerOrNext;
+}
+//#endregion
+export { createObserver };
+
+//# sourceMappingURL=Observer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Observer.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Observer.ts"],"sourcesContent":["type Next<T> = (value: T) => void;\nexport type Observer<T> = {\n  next(value: T): void;\n  complete?(): void;\n  error?(error: Error): void;\n};\nexport type ObserverOrNext<T> = Next<T> | Observer<T>;\n\nexport function createObserver<T>(observerOrNext: ObserverOrNext<T>): Observer<T> {\n  return typeof observerOrNext === 'function' ? { next: observerOrNext } : observerOrNext;\n}\n"],"mappings":";AAQA,SAAgB,eAAkB,gBAAgD;CAChF,OAAO,OAAO,mBAAmB,aAAa,EAAE,MAAM,eAAe,IAAI;AAC3E"}

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

@@ -0,0 +1,55 @@
+import { Subscription } from "./Subscription.mjs";
+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();
+	}
+	get observers() {
+		return Array.from(this._observers.values());
+	}
+	next(value) {
+		if (this.closed) return;
+		const observers = this.observers;
+		for (let i = 0; i < observers.length; i++) observers[i].next(value);
+	}
+	error(err) {
+		if (this.closed) return;
+		this.thrownError = err;
+		const { observers } = this;
+		for (let i = 0; i < observers.length; i++) observers[i].error?.(err);
+		this._observers.clear();
+	}
+	complete() {
+		if (this.closed) return;
+		this._closed = true;
+		const { observers } = this;
+		for (let i = 0; i < observers.length; i++) observers[i].complete?.();
+		this._observers.clear();
+	}
+	subscribe(observerOrNext) {
+		const observer = createObserver(observerOrNext);
+		if (this.thrownError || this.closed) {
+			const subscription = new Subscription();
+			subscription.closed = true;
+			return subscription;
+		}
+		const observerId = this._observerCounter++;
+		this._observers.set(observerId, observer);
+		return new Subscription(() => {
+			this._observers.delete(observerId);
+		});
+	}
+	unsubscribe() {
+		this._closed = true;
+		this._observers.clear();
+	}
+};
+//#endregion
+export { Subject };
+
+//# sourceMappingURL=Subject.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Subject.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Subject.ts"],"sourcesContent":["import { Observable } from './Observable';\nimport type { SubscriptionLike } from './Subscription';\nimport { Subscription } from './Subscription';\nimport type { Observer, ObserverOrNext } from './Observer';\nimport { createObserver } from './Observer';\n\nexport class Subject<T> extends Observable<T> implements SubscriptionLike {\n  private _observers: Map<number, Observer<T>> = new Map();\n  private _observerCounter = 0;\n  thrownError: Error | undefined;\n\n  constructor() {\n    super();\n  }\n\n  get observers() {\n    return Array.from(this._observers.values());\n  }\n\n  next(value: T) {\n    if (this.closed) return;\n    const observers = this.observers;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].next(value);\n    }\n  }\n\n  error(err: Error) {\n    if (this.closed) return;\n    this.thrownError = err;\n    const { observers } = this;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].error?.(err);\n    }\n    this._observers.clear();\n  }\n\n  complete() {\n    if (this.closed) return;\n    this._closed = true;\n    const { observers } = this;\n    for (let i = 0; i < observers.length; i++) {\n      observers[i].complete?.();\n    }\n    this._observers.clear();\n  }\n\n  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {\n    const observer = createObserver<T>(observerOrNext);\n    if (this.thrownError || this.closed) {\n      const subscription = new Subscription();\n      subscription.closed = true;\n      return subscription;\n    }\n\n    const observerId = this._observerCounter++;\n    this._observers.set(observerId, observer);\n    return new Subscription(() => {\n      this._observers.delete(observerId);\n    });\n  }\n\n  unsubscribe(): void {\n    this._closed = true;\n    this._observers.clear();\n  }\n}\n"],"mappings":";;;;AAMA,IAAa,UAAb,cAAgC,WAA0C;CACxE,6BAA+C,IAAI,IAAI;CACvD,mBAA2B;CAC3B;CAEA,cAAc;EACZ,MAAM;CACR;CAEA,IAAI,YAAY;EACd,OAAO,MAAM,KAAK,KAAK,WAAW,OAAO,CAAC;CAC5C;CAEA,KAAK,OAAU;EACb,IAAI,KAAK,QAAQ;EACjB,MAAM,YAAY,KAAK;EACvB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,KAAK,KAAK;CAE3B;CAEA,MAAM,KAAY;EAChB,IAAI,KAAK,QAAQ;EACjB,KAAK,cAAc;EACnB,MAAM,EAAE,cAAc;EACtB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,QAAQ,GAAG;EAE1B,KAAK,WAAW,MAAM;CACxB;CAEA,WAAW;EACT,IAAI,KAAK,QAAQ;EACjB,KAAK,UAAU;EACf,MAAM,EAAE,cAAc;EACtB,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KACpC,UAAU,EAAE,CAAC,WAAW;EAE1B,KAAK,WAAW,MAAM;CACxB;CAEA,UAAU,gBAAiD;EACzD,MAAM,WAAW,eAAkB,cAAc;EACjD,IAAI,KAAK,eAAe,KAAK,QAAQ;GACnC,MAAM,eAAe,IAAI,aAAa;GACtC,aAAa,SAAS;GACtB,OAAO;EACT;EAEA,MAAM,aAAa,KAAK;EACxB,KAAK,WAAW,IAAI,YAAY,QAAQ;EACxC,OAAO,IAAI,mBAAmB;GAC5B,KAAK,WAAW,OAAO,UAAU;EACnC,CAAC;CACH;CAEA,cAAoB;EAClB,KAAK,UAAU;EACf,KAAK,WAAW,MAAM;CACxB;AACF"}

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

@@ -0,0 +1,16 @@
+//#region src/components/MediaRecorder/observable/Subscription.ts
+var Subscription = class {
+	closed = false;
+	_unsubscribe;
+	constructor(unsubscribe) {
+		this._unsubscribe = unsubscribe;
+	}
+	unsubscribe() {
+		this.closed = true;
+		this._unsubscribe?.();
+	}
+};
+//#endregion
+export { Subscription };
+
+//# sourceMappingURL=Subscription.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Subscription.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/observable/Subscription.ts"],"sourcesContent":["export interface SubscriptionLike {\n  closed: boolean;\n\n  unsubscribe(): void;\n}\n\nexport class Subscription implements SubscriptionLike {\n  closed = false;\n  private _unsubscribe: (() => void) | undefined;\n\n  constructor(unsubscribe?: () => void) {\n    this._unsubscribe = unsubscribe;\n  }\n\n  unsubscribe() {\n    this.closed = true;\n    this._unsubscribe?.();\n  }\n}\n"],"mappings":";AAMA,IAAa,eAAb,MAAsD;CACpD,SAAS;CACT;CAEA,YAAY,aAA0B;EACpC,KAAK,eAAe;CACtB;CAEA,cAAc;EACZ,KAAK,SAAS;EACd,KAAK,eAAe;CACtB;AACF"}