stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.mjs

@@ -0,0 +1,77 @@
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { CheckSignIcon } from "../../MessageComposer/icons.mjs";
+import { isRecording } from "./recordingStateIdentity.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
+var ToggleRecordingButton = () => {
+	const { IconPauseFill, IconVoice } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { recordingController: { recorder, recordingState } } = useMessageComposerContext();
+	const recording = isRecording(recordingState);
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "outline",
+		"aria-label": recording ? t("aria/Pause recording") : t("aria/Resume recording"),
+		circular: true,
+		className: "str-chat__audio_recorder__toggle-recording-button",
+		onClick: () => recording ? recorder?.pause() : recorder?.resume(),
+		size: "sm",
+		variant: "secondary",
+		children: recording ? /* @__PURE__ */ jsx(IconPauseFill, {}) : /* @__PURE__ */ jsx(IconVoice, {})
+	});
+};
+var AudioRecorderRecordingControls = () => {
+	const { IconDelete } = useComponentContextIcons();
+	const { addNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const { recordingController: { completeRecording, recorder, recording, recordingState } } = useMessageComposerContext();
+	const isUploadingFile = recording?.localMetadata?.uploadState === "uploading";
+	const uploadProgress = recording?.localMetadata?.uploadProgress;
+	if (!recorder) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__audio_recorder__recording-controls",
+		children: [
+			!isRecording(recordingState) && /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-label": t("aria/Cancel recording"),
+				circular: true,
+				className: "str-chat__audio_recorder__cancel-button",
+				"data-testid": "cancel-recording-audio-button",
+				disabled: isUploadingFile,
+				onClick: () => {
+					recorder.cancel();
+					addNotification({
+						emitter: "AudioRecorder",
+						message: t("Voice message deleted"),
+						severity: "info",
+						type: "audioRecording:cancel:success"
+					});
+				},
+				size: "sm",
+				variant: "secondary",
+				children: /* @__PURE__ */ jsx(IconDelete, {})
+			}),
+			/* @__PURE__ */ jsx(ToggleRecordingButton, {}),
+			/* @__PURE__ */ jsx(Button, {
+				appearance: "solid",
+				"aria-label": t("aria/Complete recording"),
+				circular: true,
+				className: "str-chat__audio_recorder__stop-button",
+				"data-testid": "audio-recorder-stop-button",
+				onClick: completeRecording,
+				size: "sm",
+				variant: "primary",
+				children: isUploadingFile ? /* @__PURE__ */ jsx(UploadProgressIndicator, { uploadProgress }) : /* @__PURE__ */ jsx(CheckSignIcon, {})
+			})
+		]
+	});
+};
+//#endregion
+export { AudioRecorderRecordingControls };
+
+//# sourceMappingURL=AudioRecorderRecordingControls.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecorderRecordingControls.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx"],"sourcesContent":["import { CheckSignIcon } from '../../MessageComposer/icons';\nimport React from 'react';\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../../context';\nimport { isRecording } from './recordingStateIdentity';\nimport { Button } from '../../Button';\nimport { useNotificationApi } from '../../Notifications';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\n\nconst ToggleRecordingButton = () => {\n  const { IconPauseFill, IconVoice } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const {\n    recordingController: { recorder, recordingState },\n  } = useMessageComposerContext();\n\n  const recording = isRecording(recordingState);\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={recording ? t('aria/Pause recording') : t('aria/Resume recording')}\n      circular\n      className='str-chat__audio_recorder__toggle-recording-button'\n      onClick={() => (recording ? recorder?.pause() : recorder?.resume())}\n      size='sm'\n      variant='secondary'\n    >\n      {recording ? <IconPauseFill /> : <IconVoice />}\n    </Button>\n  );\n};\n\nexport const AudioRecorderRecordingControls = () => {\n  const { IconDelete } = useComponentContextIcons();\n\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const {\n    recordingController: { completeRecording, recorder, recording, recordingState },\n  } = useMessageComposerContext();\n  const isUploadingFile = recording?.localMetadata?.uploadState === 'uploading';\n  const uploadProgress = recording?.localMetadata?.uploadProgress;\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__audio_recorder__recording-controls'>\n      {!isRecording(recordingState) && (\n        <Button\n          appearance='ghost'\n          aria-label={t('aria/Cancel recording')}\n          circular\n          className='str-chat__audio_recorder__cancel-button'\n          data-testid={'cancel-recording-audio-button'}\n          disabled={isUploadingFile}\n          onClick={() => {\n            recorder.cancel();\n            addNotification({\n              emitter: 'AudioRecorder',\n              message: t('Voice message deleted'),\n              severity: 'info',\n              type: 'audioRecording:cancel:success',\n            });\n          }}\n          size='sm'\n          variant='secondary'\n        >\n          <IconDelete />\n        </Button>\n      )}\n      <ToggleRecordingButton />\n      <Button\n        appearance='solid'\n        aria-label={t('aria/Complete recording')}\n        circular\n        className='str-chat__audio_recorder__stop-button'\n        data-testid='audio-recorder-stop-button'\n        onClick={completeRecording}\n        size='sm'\n        variant='primary'\n      >\n        {isUploadingFile ? (\n          <UploadProgressIndicator uploadProgress={uploadProgress} />\n        ) : (\n          <CheckSignIcon />\n        )}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,8BAA8B;CAClC,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qBAAqB,EAAE,UAAU,qBAC/B,0BAA0B;CAE9B,MAAM,YAAY,YAAY,cAAc;CAE5C,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,YAAY,EAAE,sBAAsB,IAAI,EAAE,uBAAuB;EAC7E,UAAA;EACA,WAAU;EACV,eAAgB,YAAY,UAAU,MAAM,IAAI,UAAU,OAAO;EACjE,MAAK;EACL,SAAQ;YAEP,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA;CACvC,CAAA;AAEZ;AAEA,IAAa,uCAAuC;CAClD,MAAM,EAAE,eAAe,yBAAyB;CAEhD,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qBAAqB,EAAE,mBAAmB,UAAU,WAAW,qBAC7D,0BAA0B;CAC9B,MAAM,kBAAkB,WAAW,eAAe,gBAAgB;CAClE,MAAM,iBAAiB,WAAW,eAAe;CAEjD,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,CAAC,YAAY,cAAc,KAC1B,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EAAE,uBAAuB;IACrC,UAAA;IACA,WAAU;IACV,eAAa;IACb,UAAU;IACV,eAAe;KACb,SAAS,OAAO;KAChB,gBAAgB;MACd,SAAS;MACT,SAAS,EAAE,uBAAuB;MAClC,UAAU;MACV,MAAM;KACR,CAAC;IACH;IACA,MAAK;IACL,SAAQ;cAER,oBAAC,YAAD,CAAa,CAAA;GACP,CAAA;GAEV,oBAAC,uBAAD,CAAwB,CAAA;GACxB,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EAAE,yBAAyB;IACvC,UAAA;IACA,WAAU;IACV,eAAY;IACZ,SAAS;IACT,MAAK;IACL,SAAQ;cAEP,kBACC,oBAAC,yBAAD,EAAyC,eAAiB,CAAA,IAE1D,oBAAC,eAAD,CAAgB,CAAA;GAEZ,CAAA;EACL;;AAET"}

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.mjs

@@ -0,0 +1,58 @@
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useDialogOnNearestManager } from "../../Dialog/hooks/useDialog.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { Callout } from "../../Dialog/components/Callout.mjs";
+import { useAttachmentManagerState } from "../../MessageComposer/hooks/useAttachmentManagerState.mjs";
+import { RecordingPermission } from "../classes/BrowserPermission.mjs";
+import { RecordingAttachmentType } from "../classes/MediaRecorderController.mjs";
+import { RecordingPermissionDeniedNotification } from "../RecordingPermissionDeniedNotification.mjs";
+import { forwardRef, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
+var dialogId = "recording-permission-denied-notification";
+var AudioRecordingButtonWithNotification = () => {
+	const { RecordingPermissionDeniedNotification: RecordingPermissionDeniedNotification$1 = RecordingPermissionDeniedNotification, StartRecordingAudioButton = DefaultStartRecordingAudioButton } = useComponentContext();
+	const { asyncMessagesMultiSendEnabled, recordingController } = useMessageComposerContext();
+	const { attachments } = useAttachmentManagerState();
+	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+	const audioRecordingBtnRef = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StartRecordingAudioButton, {
+		disabled: !!recordingController.recordingState || !asyncMessagesMultiSendEnabled && attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING),
+		onClick: () => {
+			recordingController.recorder?.start();
+			if (!!(recordingController.recorder && navigator.mediaDevices) && recordingController.permissionState === "denied") dialog.open();
+		},
+		ref: audioRecordingBtnRef
+	}), /* @__PURE__ */ jsx(Callout, {
+		className: "str-chat__recording-permission-denied-notification",
+		dialogManagerId: dialogManager?.id,
+		id: dialogId,
+		onClose: dialog.close,
+		placement: "top-start",
+		referenceElement: audioRecordingBtnRef.current,
+		children: /* @__PURE__ */ jsx(RecordingPermissionDeniedNotification$1, { permissionName: RecordingPermission.MIC })
+	})] });
+};
+var DefaultStartRecordingAudioButton = forwardRef(function StartRecordingAudioButton(props, ref) {
+	const { t } = useTranslationContext();
+	const { IconVoice } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("aria/Start recording audio"),
+		circular: true,
+		className: "str-chat__start-recording-audio-button",
+		"data-testid": "start-recording-audio-button",
+		size: "sm",
+		variant: "secondary",
+		...props,
+		ref,
+		children: /* @__PURE__ */ jsx(IconVoice, {})
+	});
+});
+//#endregion
+export { AudioRecordingButtonWithNotification, DefaultStartRecordingAudioButton };
+
+//# sourceMappingURL=AudioRecordingButtonWithNotification.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecordingButtonWithNotification.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx"],"sourcesContent":["import { RecordingAttachmentType, RecordingPermission } from '../classes';\nimport { RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification } from '../RecordingPermissionDeniedNotification';\nimport React, { forwardRef, useRef } from 'react';\nimport { useAttachmentManagerState } from '../../MessageComposer/hooks/useAttachmentManagerState';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../../context';\nimport { Callout, useDialogOnNearestManager } from '../../Dialog';\nimport { Button } from '../../Button';\n\nconst dialogId = 'recording-permission-denied-notification';\n\nexport const AudioRecordingButtonWithNotification = () => {\n  const {\n    RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification,\n    StartRecordingAudioButton = DefaultStartRecordingAudioButton,\n  } = useComponentContext();\n  const { asyncMessagesMultiSendEnabled, recordingController } =\n    useMessageComposerContext();\n  const { attachments } = useAttachmentManagerState();\n\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n\n  const audioRecordingBtnRef = useRef<HTMLButtonElement | null>(null);\n  const isRecording = !!recordingController.recordingState;\n\n  return (\n    <>\n      <StartRecordingAudioButton\n        disabled={\n          isRecording ||\n          (!asyncMessagesMultiSendEnabled &&\n            attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING))\n        }\n        onClick={() => {\n          recordingController.recorder?.start();\n\n          const recordingEnabled = !!(\n            recordingController.recorder && navigator.mediaDevices\n          );\n\n          const shouldShowNotification =\n            recordingEnabled && recordingController.permissionState === 'denied';\n          if (shouldShowNotification) dialog.open();\n        }}\n        ref={audioRecordingBtnRef}\n      />\n      <Callout\n        className='str-chat__recording-permission-denied-notification'\n        dialogManagerId={dialogManager?.id}\n        id={dialogId}\n        onClose={dialog.close}\n        placement={'top-start'}\n        referenceElement={audioRecordingBtnRef.current}\n      >\n        <RecordingPermissionDeniedNotification permissionName={RecordingPermission.MIC} />\n      </Callout>\n    </>\n  );\n};\n\nexport type StartRecordingAudioButtonProps = React.ComponentProps<'button'>;\n\nexport const DefaultStartRecordingAudioButton = forwardRef<\n  HTMLButtonElement,\n  StartRecordingAudioButtonProps\n>(function StartRecordingAudioButton(props, ref) {\n  const { t } = useTranslationContext();\n  const { IconVoice } = useComponentContextIcons();\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t('aria/Start recording audio')}\n      circular\n      className='str-chat__start-recording-audio-button'\n      data-testid='start-recording-audio-button'\n      size='sm'\n      variant='secondary'\n      {...props}\n      ref={ref}\n    >\n      <IconVoice />\n    </Button>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAaA,IAAM,WAAW;AAEjB,IAAa,6CAA6C;CACxD,MAAM,EACJ,uCAAA,0CAAwC,uCACxC,4BAA4B,qCAC1B,oBAAoB;CACxB,MAAM,EAAE,+BAA+B,wBACrC,0BAA0B;CAC5B,MAAM,EAAE,gBAAgB,0BAA0B;CAElD,MAAM,EAAE,QAAQ,kBAAkB,0BAA0B,EAAE,IAAI,SAAS,CAAC;CAE5E,MAAM,uBAAuB,OAAiC,IAAI;CAGlE,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,2BAAD;EACE,UACE,CANa,CAAC,oBAAoB,kBAOjC,CAAC,iCACA,YAAY,MAAM,MAAM,EAAE,SAAS,wBAAwB,eAAe;EAE9E,eAAe;GACb,oBAAoB,UAAU,MAAM;GAQpC,IADE,CALwB,EACxB,oBAAoB,YAAY,UAAU,iBAItB,oBAAoB,oBAAoB,UAClC,OAAO,KAAK;EAC1C;EACA,KAAK;CACN,CAAA,GACD,oBAAC,SAAD;EACE,WAAU;EACV,iBAAiB,eAAe;EAChC,IAAI;EACJ,SAAS,OAAO;EAChB,WAAW;EACX,kBAAkB,qBAAqB;YAEvC,oBAAC,yCAAD,EAAuC,gBAAgB,oBAAoB,IAAM,CAAA;CAC1E,CAAA,CACT,EAAA,CAAA;AAEN;AAIA,IAAa,mCAAmC,WAG9C,SAAS,0BAA0B,OAAO,KAAK;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,4BAA4B;EAC1C,UAAA;EACA,WAAU;EACV,eAAY;EACZ,MAAK;EACL,SAAQ;EACR,GAAI;EACC;YAEL,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ,CAAC"}

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.mjs

@@ -0,0 +1,71 @@
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { useAudioPlayer } from "../../AudioPlayback/WithAudioPlayback.mjs";
+import { DurationDisplay } from "../../AudioPlayback/components/DurationDisplay.mjs";
+import { WaveProgressBar } from "../../AudioPlayback/components/WaveProgressBar.mjs";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
+var audioPlayerStateSelector = (state) => ({
+	isPlaying: state.isPlaying,
+	progress: state.progressPercent,
+	secondsElapsed: state.secondsElapsed
+});
+var AudioRecordingPlayback = ({ durationSeconds, mimeType, src, waveformData }) => {
+	const { IconPauseFill, IconPlayFill } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const audioPlayer = useAudioPlayer({
+		durationSeconds,
+		mimeType,
+		src,
+		waveformData
+	});
+	const { isPlaying, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
+	const displayedDuration = secondsElapsed || durationSeconds;
+	useEffect(() => {
+		audioPlayer?.cancelScheduledRemoval();
+		return () => {
+			audioPlayer?.scheduleRemoval();
+		};
+	}, [audioPlayer]);
+	if (!audioPlayer) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__audio-recorder__recording-playback", { "str-chat__audio-recorder__recording-playback--isPlaying": isPlaying }),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-label": isPlaying ? t("aria/Pause") : t("aria/Play"),
+				circular: true,
+				className: "str-chat__audio_recorder__toggle-playback-button",
+				"data-testid": "audio-recording-preview-toggle-play-btn",
+				onClick: audioPlayer.togglePlay,
+				size: "sm",
+				variant: "secondary",
+				children: isPlaying ? /* @__PURE__ */ jsx(IconPauseFill, {}) : /* @__PURE__ */ jsx(IconPlayFill, {})
+			}),
+			/* @__PURE__ */ jsx(DurationDisplay, {
+				className: clsx("str-chat__recording-timer", { "str-chat__recording-timer--hours": displayedDuration >= 3600 }),
+				duration: durationSeconds,
+				isPlaying: !!isPlaying,
+				secondsElapsed
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__wave-progress-bar__track-container",
+				children: /* @__PURE__ */ jsx(WaveProgressBar, {
+					durationSeconds,
+					progress,
+					secondsElapsed,
+					seek: audioPlayer.seek,
+					waveformData: waveformData || []
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { AudioRecordingPlayback };
+
+//# sourceMappingURL=AudioRecordingPlayback.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecordingPlayback.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { DurationDisplay, WaveProgressBar } from '../../AudioPlayback';\nimport type { AudioPlayerState } from '../../AudioPlayback/AudioPlayer';\nimport { useAudioPlayer } from '../../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../../store';\nimport { Button } from '../../Button';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport clsx from 'clsx';\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n  isPlaying: state.isPlaying,\n  progress: state.progressPercent,\n  secondsElapsed: state.secondsElapsed,\n});\n\nexport type AudioRecordingPlayerProps = {\n  durationSeconds: number;\n  mimeType?: string;\n  src?: string;\n  waveformData?: number[];\n};\n\nexport const AudioRecordingPlayback = ({\n  durationSeconds,\n  mimeType,\n  src,\n  waveformData,\n}: AudioRecordingPlayerProps) => {\n  const { IconPauseFill, IconPlayFill } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const audioPlayer = useAudioPlayer({\n    durationSeconds,\n    mimeType,\n    src,\n    waveformData,\n  });\n\n  const { isPlaying, progress, secondsElapsed } =\n    useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n  const displayedDuration = secondsElapsed || durationSeconds;\n\n  useEffect(() => {\n    audioPlayer?.cancelScheduledRemoval();\n    return () => {\n      audioPlayer?.scheduleRemoval();\n    };\n  }, [audioPlayer]);\n\n  if (!audioPlayer) return null;\n\n  return (\n    <div\n      className={clsx('str-chat__audio-recorder__recording-playback', {\n        'str-chat__audio-recorder__recording-playback--isPlaying': isPlaying,\n      })}\n    >\n      <Button\n        appearance='ghost'\n        aria-label={isPlaying ? t('aria/Pause') : t('aria/Play')}\n        circular\n        className='str-chat__audio_recorder__toggle-playback-button'\n        data-testid='audio-recording-preview-toggle-play-btn'\n        onClick={audioPlayer.togglePlay}\n        size='sm'\n        variant='secondary'\n      >\n        {isPlaying ? <IconPauseFill /> : <IconPlayFill />}\n      </Button>\n      <DurationDisplay\n        className={clsx('str-chat__recording-timer', {\n          'str-chat__recording-timer--hours': displayedDuration >= 3600,\n        })}\n        duration={durationSeconds}\n        isPlaying={!!isPlaying}\n        secondsElapsed={secondsElapsed}\n      />\n      <div className='str-chat__wave-progress-bar__track-container'>\n        <WaveProgressBar\n          durationSeconds={durationSeconds}\n          progress={progress}\n          secondsElapsed={secondsElapsed}\n          seek={audioPlayer.seek}\n          waveformData={waveformData || []}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,IAAM,4BAA4B,WAA6B;CAC7D,WAAW,MAAM;CACjB,UAAU,MAAM;CAChB,gBAAgB,MAAM;AACxB;AASA,IAAa,0BAA0B,EACrC,iBACA,UACA,KACA,mBAC+B;CAC/B,MAAM,EAAE,eAAe,iBAAiB,yBAAyB;CAEjE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,cAAc,eAAe;EACjC;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,UAAU,mBAC3B,cAAc,aAAa,OAAO,wBAAwB,KAAK,CAAC;CAElE,MAAM,oBAAoB,kBAAkB;CAE5C,gBAAgB;EACd,aAAa,uBAAuB;EACpC,aAAa;GACX,aAAa,gBAAgB;EAC/B;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,IAAI,CAAC,aAAa,OAAO;CAEzB,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,gDAAgD,EAC9D,2DAA2D,UAC7D,CAAC;YAHH;GAKE,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,YAAY,EAAE,YAAY,IAAI,EAAE,WAAW;IACvD,UAAA;IACA,WAAU;IACV,eAAY;IACZ,SAAS,YAAY;IACrB,MAAK;IACL,SAAQ;cAEP,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,cAAD,CAAe,CAAA;GAC1C,CAAA;GACR,oBAAC,iBAAD;IACE,WAAW,KAAK,6BAA6B,EAC3C,oCAAoC,qBAAqB,KAC3D,CAAC;IACD,UAAU;IACV,WAAW,CAAC,CAAC;IACG;GACjB,CAAA;GACD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,iBAAD;KACmB;KACP;KACM;KAChB,MAAM,YAAY;KAClB,cAAc,gBAAgB,CAAC;IAChC,CAAA;GACE,CAAA;EACF;;AAET"}

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.mjs

@@ -0,0 +1,65 @@
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useTimeElapsed } from "./hooks/useTimeElapsed.mjs";
+import { RecordingTimer } from "./RecordingTimer.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
+var AudioRecordingWaveform = ({ maxDataPointsDrawn = 200 }) => {
+	const { recordingController: { recorder } } = useMessageComposerContext();
+	const [amplitudes, setAmplitudes] = useState([]);
+	useEffect(() => {
+		if (!recorder?.amplitudeRecorder) return;
+		const amplitudesSubscription = recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
+		return () => {
+			amplitudesSubscription.unsubscribe();
+		};
+	}, [recorder]);
+	if (!recorder) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__waveform-box-container",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__wave-progress-bar__track",
+			children: amplitudes.slice(-maxDataPointsDrawn).map((amplitude, i) => /* @__PURE__ */ jsx("div", {
+				className: "str-chat__wave-progress-bar__amplitude-bar",
+				style: { "--str-chat__wave-progress-bar__amplitude-bar-height": amplitude ? amplitude * 100 + "%" : "0%" }
+			}, `amplitude-${i}-voice-recording`))
+		})
+	});
+};
+var AudioRecordingPreview = () => {
+	const { IconVoice } = useComponentContextIcons();
+	const { recordingController: { recorder } } = useMessageComposerContext();
+	const { secondsElapsed, startCounter, stopCounter } = useTimeElapsed({ initialSeconds: recorder?.durationMs ? recorder.durationMs / 1e3 : 0 });
+	useEffect(() => {
+		if (!recorder?.mediaRecorder) return;
+		const { mediaRecorder } = recorder;
+		if (mediaRecorder.state === "recording") startCounter();
+		mediaRecorder.addEventListener("start", startCounter);
+		mediaRecorder.addEventListener("resume", startCounter);
+		mediaRecorder.addEventListener("stop", stopCounter);
+		mediaRecorder.addEventListener("pause", stopCounter);
+		return () => {
+			mediaRecorder.removeEventListener("start", startCounter);
+			mediaRecorder.removeEventListener("resume", startCounter);
+			mediaRecorder.removeEventListener("stop", stopCounter);
+			mediaRecorder.removeEventListener("pause", stopCounter);
+		};
+	}, [
+		recorder,
+		startCounter,
+		stopCounter
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__audio-recorder__recording-preview",
+		children: [
+			/* @__PURE__ */ jsx(IconVoice, {}),
+			/* @__PURE__ */ jsx(RecordingTimer, { durationSeconds: secondsElapsed }),
+			/* @__PURE__ */ jsx(AudioRecordingWaveform, {})
+		]
+	});
+};
+//#endregion
+export { AudioRecordingPreview };
+
+//# sourceMappingURL=AudioRecordingPreview.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecordingPreview.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useTimeElapsed } from './hooks/useTimeElapsed';\nimport { useComponentContextIcons, useMessageComposerContext } from '../../../context';\nimport { RecordingTimer } from './RecordingTimer';\n\ntype WaveformProps = {\n  maxDataPointsDrawn?: number;\n};\n\nconst AudioRecordingWaveform = ({ maxDataPointsDrawn = 200 }: WaveformProps) => {\n  const {\n    recordingController: { recorder },\n  } = useMessageComposerContext();\n\n  const [amplitudes, setAmplitudes] = useState<number[]>([]);\n\n  useEffect(() => {\n    if (!recorder?.amplitudeRecorder) return;\n    const amplitudesSubscription =\n      recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);\n    return () => {\n      amplitudesSubscription.unsubscribe();\n    };\n  }, [recorder]);\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__waveform-box-container'>\n      <div className='str-chat__wave-progress-bar__track'>\n        {amplitudes.slice(-maxDataPointsDrawn).map((amplitude, i) => (\n          <div\n            className='str-chat__wave-progress-bar__amplitude-bar'\n            key={`amplitude-${i}-voice-recording`}\n            style={\n              {\n                '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude\n                  ? amplitude * 100 + '%'\n                  : '0%',\n              } as React.CSSProperties\n            }\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\nexport const AudioRecordingPreview = () => {\n  const { IconVoice } = useComponentContextIcons();\n\n  const {\n    recordingController: { recorder },\n  } = useMessageComposerContext();\n\n  const initialSeconds = recorder?.durationMs ? recorder.durationMs / 1000 : 0;\n  const { secondsElapsed, startCounter, stopCounter } = useTimeElapsed({\n    initialSeconds,\n  });\n\n  useEffect(() => {\n    if (!recorder?.mediaRecorder) return;\n    const { mediaRecorder } = recorder;\n\n    if (mediaRecorder.state === 'recording') {\n      startCounter();\n    }\n\n    mediaRecorder.addEventListener('start', startCounter);\n    mediaRecorder.addEventListener('resume', startCounter);\n    mediaRecorder.addEventListener('stop', stopCounter);\n    mediaRecorder.addEventListener('pause', stopCounter);\n\n    return () => {\n      mediaRecorder.removeEventListener('start', startCounter);\n      mediaRecorder.removeEventListener('resume', startCounter);\n      mediaRecorder.removeEventListener('stop', stopCounter);\n      mediaRecorder.removeEventListener('pause', stopCounter);\n    };\n  }, [recorder, startCounter, stopCounter]);\n\n  return (\n    <div className='str-chat__audio-recorder__recording-preview'>\n      <IconVoice />\n      <RecordingTimer durationSeconds={secondsElapsed} />\n      <AudioRecordingWaveform />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAM,0BAA0B,EAAE,qBAAqB,UAAyB;CAC9E,MAAM,EACJ,qBAAqB,EAAE,eACrB,0BAA0B;CAE9B,MAAM,CAAC,YAAY,iBAAiB,SAAmB,CAAC,CAAC;CAEzD,gBAAgB;EACd,IAAI,CAAC,UAAU,mBAAmB;EAClC,MAAM,yBACJ,SAAS,kBAAkB,WAAW,UAAU,aAAa;EAC/D,aAAa;GACX,uBAAuB,YAAY;EACrC;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACZ,WAAW,MAAM,CAAC,kBAAkB,CAAC,CAAC,KAAK,WAAW,MACrD,oBAAC,OAAD;IACE,WAAU;IAEV,OACE,EACE,uDAAuD,YACnD,YAAY,MAAM,MAClB,KACN;GAEH,GARM,aAAa,EAAE,iBAQrB,CACF;EACE,CAAA;CACF,CAAA;AAET;AACA,IAAa,8BAA8B;CACzC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,EACJ,qBAAqB,EAAE,eACrB,0BAA0B;CAG9B,MAAM,EAAE,gBAAgB,cAAc,gBAAgB,eAAe,EACnE,gBAFqB,UAAU,aAAa,SAAS,aAAa,MAAO,EAG3E,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,UAAU,eAAe;EAC9B,MAAM,EAAE,kBAAkB;EAE1B,IAAI,cAAc,UAAU,aAC1B,aAAa;EAGf,cAAc,iBAAiB,SAAS,YAAY;EACpD,cAAc,iBAAiB,UAAU,YAAY;EACrD,cAAc,iBAAiB,QAAQ,WAAW;EAClD,cAAc,iBAAiB,SAAS,WAAW;EAEnD,aAAa;GACX,cAAc,oBAAoB,SAAS,YAAY;GACvD,cAAc,oBAAoB,UAAU,YAAY;GACxD,cAAc,oBAAoB,QAAQ,WAAW;GACrD,cAAc,oBAAoB,SAAS,WAAW;EACxD;CACF,GAAG;EAAC;EAAU;EAAc;CAAW,CAAC;CAExC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,WAAD,CAAY,CAAA;GACZ,oBAAC,gBAAD,EAAgB,iBAAiB,eAAiB,CAAA;GAClD,oBAAC,wBAAD,CAAyB,CAAA;EACtB;;AAET"}

package/dist/es/components/MediaRecorder/AudioRecorder/RecordingTimer.mjs

@@ -0,0 +1,13 @@
+import { displayDuration } from "../../Attachment/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MediaRecorder/AudioRecorder/RecordingTimer.tsx
+var RecordingTimer = ({ durationSeconds }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__recording-timer", { "str-chat__recording-timer--hours": durationSeconds >= 3600 }),
+	children: displayDuration(durationSeconds)
+});
+//#endregion
+export { RecordingTimer };
+
+//# sourceMappingURL=RecordingTimer.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/RecordingTimer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordingTimer.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/RecordingTimer.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { displayDuration } from '../../Attachment';\nimport React from 'react';\n\nexport type RecordingTimerProps = {\n  durationSeconds: number;\n};\n\nexport const RecordingTimer = ({ durationSeconds }: RecordingTimerProps) => (\n  <div\n    className={clsx('str-chat__recording-timer', {\n      'str-chat__recording-timer--hours': durationSeconds >= 3600,\n    })}\n  >\n    {displayDuration(durationSeconds)}\n  </div>\n);\n"],"mappings":";;;;;AAQA,IAAa,kBAAkB,EAAE,sBAC/B,oBAAC,OAAD;CACE,WAAW,KAAK,6BAA6B,EAC3C,oCAAoC,mBAAmB,KACzD,CAAC;WAEA,gBAAgB,eAAe;AAC7B,CAAA"}

package/dist/es/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.mjs

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts
+var useTimeElapsed = ({ initialSeconds = 0, startOnMount } = {}) => {
+	const [secondsElapsed, setSecondsElapsed] = useState(initialSeconds);
+	const updateInterval = useRef(void 0);
+	const startCounter = useCallback(() => {
+		if (updateInterval.current) return;
+		updateInterval.current = setInterval(() => {
+			setSecondsElapsed((prev) => prev + 1);
+		}, 1e3);
+	}, []);
+	const stopCounter = useCallback(() => {
+		clearInterval(updateInterval.current);
+		updateInterval.current = void 0;
+	}, []);
+	useEffect(() => {
+		if (updateInterval.current) return;
+		setSecondsElapsed(initialSeconds);
+	}, [initialSeconds]);
+	useEffect(() => {
+		if (!startOnMount) return;
+		startCounter();
+		return () => {
+			stopCounter();
+		};
+	}, [
+		startCounter,
+		startOnMount,
+		stopCounter
+	]);
+	return {
+		secondsElapsed,
+		startCounter,
+		stopCounter
+	};
+};
+//#endregion
+export { useTimeElapsed };
+
+//# sourceMappingURL=useTimeElapsed.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeElapsed.mjs","names":[],"sources":["../../../../../../src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseTimeElapsedParams = {\n  initialSeconds?: number;\n  startOnMount?: boolean;\n};\n\n// todo: provide start timestamp\nexport const useTimeElapsed = ({\n  initialSeconds = 0,\n  startOnMount,\n}: UseTimeElapsedParams = {}) => {\n  const [secondsElapsed, setSecondsElapsed] = useState<number>(initialSeconds);\n  const updateInterval = useRef<ReturnType<typeof setInterval>>(undefined);\n\n  const startCounter = useCallback(() => {\n    if (updateInterval.current) return;\n    updateInterval.current = setInterval(() => {\n      setSecondsElapsed((prev) => prev + 1);\n    }, 1000);\n  }, []);\n\n  const stopCounter = useCallback(() => {\n    clearInterval(updateInterval.current);\n    updateInterval.current = undefined;\n  }, []);\n\n  useEffect(() => {\n    if (updateInterval.current) return;\n    setSecondsElapsed(initialSeconds);\n  }, [initialSeconds]);\n\n  useEffect(() => {\n    if (!startOnMount) return;\n    startCounter();\n    return () => {\n      stopCounter();\n    };\n  }, [startCounter, startOnMount, stopCounter]);\n\n  return {\n    secondsElapsed,\n    startCounter,\n    stopCounter,\n  };\n};\n"],"mappings":";;AAQA,IAAa,kBAAkB,EAC7B,iBAAiB,GACjB,iBACwB,CAAC,MAAM;CAC/B,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB,cAAc;CAC3E,MAAM,iBAAiB,OAAuC,KAAA,CAAS;CAEvE,MAAM,eAAe,kBAAkB;EACrC,IAAI,eAAe,SAAS;EAC5B,eAAe,UAAU,kBAAkB;GACzC,mBAAmB,SAAS,OAAO,CAAC;EACtC,GAAG,GAAI;CACT,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACpC,cAAc,eAAe,OAAO;EACpC,eAAe,UAAU,KAAA;CAC3B,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,IAAI,eAAe,SAAS;EAC5B,kBAAkB,cAAc;CAClC,GAAG,CAAC,cAAc,CAAC;CAEnB,gBAAgB;EACd,IAAI,CAAC,cAAc;EACnB,aAAa;EACb,aAAa;GACX,YAAY;EACd;CACF,GAAG;EAAC;EAAc;EAAc;CAAW,CAAC;CAE5C,OAAO;EACL;EACA;EACA;CACF;AACF"}

package/dist/es/components/MediaRecorder/AudioRecorder/recordingStateIdentity.mjs

@@ -0,0 +1,8 @@
+import { MediaRecordingState } from "../classes/MediaRecorderController.mjs";
+//#region src/components/MediaRecorder/AudioRecorder/recordingStateIdentity.ts
+var isStopped = (recordingState) => recordingState === MediaRecordingState.STOPPED;
+var isRecording = (recordingState) => recordingState === MediaRecordingState.RECORDING;
+//#endregion
+export { isRecording, isStopped };
+
+//# sourceMappingURL=recordingStateIdentity.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/recordingStateIdentity.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordingStateIdentity.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/recordingStateIdentity.ts"],"sourcesContent":["import { MediaRecordingState } from '../classes';\n\nexport const isPaused = (recordingState?: MediaRecordingState) =>\n  recordingState === MediaRecordingState.PAUSED;\nexport const isStopped = (recordingState?: MediaRecordingState) =>\n  recordingState === MediaRecordingState.STOPPED;\nexport const isRecording = (recordingState?: MediaRecordingState) =>\n  recordingState === MediaRecordingState.RECORDING;\n"],"mappings":";;AAIA,IAAa,aAAa,mBACxB,mBAAmB,oBAAoB;AACzC,IAAa,eAAe,mBAC1B,mBAAmB,oBAAoB"}

package/dist/es/components/MediaRecorder/RecordingPermissionDeniedNotification.mjs

@@ -0,0 +1,31 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx
+var RecordingPermissionDeniedNotification = ({ permissionName }) => {
+	const { t } = useTranslationContext();
+	const permissionTranslations = {
+		body: {
+			camera: t("To start recording, allow the camera access in your browser"),
+			microphone: t("To start recording, allow the microphone access in your browser")
+		},
+		heading: {
+			camera: t("Allow access to camera"),
+			microphone: t("Allow access to microphone")
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__recording-permission-denied-notification",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__recording-permission-denied-notification__heading",
+			children: permissionTranslations.heading[permissionName]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "str-chat__recording-permission-denied-notification__message",
+			children: permissionTranslations.body[permissionName]
+		})]
+	});
+};
+//#endregion
+export { RecordingPermissionDeniedNotification };
+
+//# sourceMappingURL=RecordingPermissionDeniedNotification.mjs.map

package/dist/es/components/MediaRecorder/RecordingPermissionDeniedNotification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordingPermissionDeniedNotification.mjs","names":[],"sources":["../../../../src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../context';\nimport type { RecordingPermission } from './classes/BrowserPermission';\n\nexport type RecordingPermissionDeniedNotificationProps = {\n  permissionName: RecordingPermission;\n};\n\nexport const RecordingPermissionDeniedNotification = ({\n  permissionName,\n}: RecordingPermissionDeniedNotificationProps) => {\n  const { t } = useTranslationContext();\n  const permissionTranslations = {\n    body: {\n      camera: t('To start recording, allow the camera access in your browser'),\n      microphone: t('To start recording, allow the microphone access in your browser'),\n    },\n    heading: {\n      camera: t('Allow access to camera'),\n      microphone: t('Allow access to microphone'),\n    },\n  };\n\n  return (\n    <div className='str-chat__recording-permission-denied-notification'>\n      <div className='str-chat__recording-permission-denied-notification__heading'>\n        {permissionTranslations.heading[permissionName]}\n      </div>\n      <p className='str-chat__recording-permission-denied-notification__message'>\n        {permissionTranslations.body[permissionName]}\n      </p>\n    </div>\n  );\n};\n"],"mappings":";;;;AAQA,IAAa,yCAAyC,EACpD,qBACgD;CAChD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,yBAAyB;EAC7B,MAAM;GACJ,QAAQ,EAAE,6DAA6D;GACvE,YAAY,EAAE,iEAAiE;EACjF;EACA,SAAS;GACP,QAAQ,EAAE,wBAAwB;GAClC,YAAY,EAAE,4BAA4B;EAC5C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,uBAAuB,QAAQ;EAC7B,CAAA,GACL,oBAAC,KAAD;GAAG,WAAU;aACV,uBAAuB,KAAK;EAC5B,CAAA,CACA;;AAET"}

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

@@ -0,0 +1,75 @@
+import { Subject } from "../observable/Subject.mjs";
+import { BehaviorSubject } from "../observable/BehaviorSubject.mjs";
+import { mergeDeepUndefined } from "../../../utils/mergeDeep.mjs";
+//#region src/components/MediaRecorder/classes/AmplitudeRecorder.ts
+var MAX_FREQUENCY_AMPLITUDE = 255;
+var logError = (e) => e && console.error("[AMPLITUDE RECORDER ERROR]", e);
+var rootMeanSquare = (values) => Math.sqrt(values.reduce((acc, val) => acc + Math.pow(val, 2), 0) / values.length);
+var DEFAULT_AMPLITUDE_RECORDER_CONFIG = {
+	analyserConfig: {
+		fftSize: 32,
+		maxDecibels: 0,
+		minDecibels: -100
+	},
+	sampleCount: 100,
+	samplingFrequencyMs: 60
+};
+var AmplitudeRecorder = class {
+	constructor({ config, stream }) {
+		this.amplitudes = new BehaviorSubject([]);
+		this.state = new BehaviorSubject(void 0);
+		this.error = new Subject();
+		this.start = () => {
+			if (this.state.value === "closed") return;
+			if (!this.stream) throw new Error("Missing MediaStream instance. Cannot to start amplitude recording");
+			if (this.state.value === "recording") this.stop();
+			if (!this.analyserNode) {
+				if (!this.stream) return;
+				this.init();
+			}
+			this.state.next("recording");
+			this.amplitudeSamplingInterval = setInterval(() => {
+				if (!(this.analyserNode && this.state.value === "recording")) return;
+				const frequencyBins = new Uint8Array(this.analyserNode.frequencyBinCount);
+				try {
+					this.analyserNode.getByteFrequencyData(frequencyBins);
+				} catch (e) {
+					logError(e);
+					this.error.next(e);
+					return;
+				}
+				const normalizedSignalStrength = rootMeanSquare(frequencyBins) / MAX_FREQUENCY_AMPLITUDE;
+				this.amplitudes.next([...this.amplitudes.value, normalizedSignalStrength]);
+			}, this.config.samplingFrequencyMs);
+		};
+		this.config = mergeDeepUndefined({ ...config }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);
+		this.stream = stream;
+	}
+	init() {
+		this.audioContext = new AudioContext();
+		this.analyserNode = this.audioContext.createAnalyser();
+		const { analyserConfig } = this.config;
+		this.analyserNode.fftSize = analyserConfig.fftSize;
+		this.analyserNode.maxDecibels = analyserConfig.maxDecibels;
+		this.analyserNode.minDecibels = analyserConfig.minDecibels;
+		this.microphone = this.audioContext.createMediaStreamSource(this.stream);
+		this.microphone.connect(this.analyserNode);
+	}
+	stop() {
+		clearInterval(this.amplitudeSamplingInterval);
+		this.amplitudeSamplingInterval = void 0;
+		this.state.next("stopped");
+	}
+	close() {
+		if (this.state.value !== "stopped") this.stop();
+		this.state.next("closed");
+		this.amplitudes.next([]);
+		this.microphone?.disconnect();
+		this.analyserNode?.disconnect();
+		if (this.audioContext?.state !== "closed") this.audioContext?.close();
+	}
+};
+//#endregion
+export { AmplitudeRecorder, DEFAULT_AMPLITUDE_RECORDER_CONFIG };
+
+//# sourceMappingURL=AmplitudeRecorder.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmplitudeRecorder.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/classes/AmplitudeRecorder.ts"],"sourcesContent":["import { BehaviorSubject } from '../observable/BehaviorSubject';\nimport { Subject } from '../observable/Subject';\nimport { mergeDeepUndefined } from '../../../utils/mergeDeep';\n\nconst MAX_FREQUENCY_AMPLITUDE = 255 as const;\n\nconst logError = (e?: Error) => e && console.error('[AMPLITUDE RECORDER ERROR]', e);\n\nconst rootMeanSquare = (values: Uint8Array) =>\n  Math.sqrt(values.reduce((acc, val) => acc + Math.pow(val, 2), 0) / values.length);\n\n/**\n * fftSize\n * An unsigned integer, representing the window size of the FFT, given in number of samples.\n * A higher value will result in more details in the frequency domain but fewer details\n * in the amplitude domain.\n *\n * Must be a power of 2 between 2^5 and 2^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768.\n * Defaults to 32.\n *\n * maxDecibels\n * A double, representing the maximum decibel value for scaling the FFT analysis data,\n * where 0 dB is the loudest possible sound, -10 dB is a 10th of that, etc.\n * The default value is -30 dB.\n *\n * minDecibels\n * A double, representing the minimum decibel value for scaling the FFT analysis data,\n * where 0 dB is the loudest possible sound, -10 dB is a 10th of that, etc.\n * The default value is -100 dB.\n */\nexport type AmplitudeAnalyserConfig = Pick<\n  AnalyserNode,\n  'fftSize' | 'maxDecibels' | 'minDecibels'\n>;\nexport type AmplitudeRecorderConfig = {\n  analyserConfig: AmplitudeAnalyserConfig;\n  sampleCount: number;\n  samplingFrequencyMs: number;\n};\n\nexport const DEFAULT_AMPLITUDE_RECORDER_CONFIG: AmplitudeRecorderConfig = {\n  analyserConfig: {\n    fftSize: 32,\n    maxDecibels: 0,\n    minDecibels: -100,\n  } as AmplitudeAnalyserConfig,\n  sampleCount: 100,\n  samplingFrequencyMs: 60,\n};\n\ntype AmplitudeAnalyserOptions = {\n  stream: MediaStream;\n  config?: AmplitudeRecorderConfig;\n};\n\nexport enum AmplitudeRecorderState {\n  CLOSED = 'closed',\n  RECORDING = 'recording',\n  STOPPED = 'stopped',\n}\n\nexport class AmplitudeRecorder {\n  audioContext: AudioContext | undefined;\n  analyserNode: AnalyserNode | undefined;\n  microphone: MediaStreamAudioSourceNode | undefined;\n  stream: MediaStream;\n\n  config: AmplitudeRecorderConfig;\n\n  amplitudeSamplingInterval: ReturnType<typeof setInterval> | undefined;\n\n  amplitudes = new BehaviorSubject<number[]>([]);\n  state = new BehaviorSubject<AmplitudeRecorderState | undefined>(undefined);\n  error = new Subject<Error | undefined>();\n\n  constructor({ config, stream }: AmplitudeAnalyserOptions) {\n    this.config = mergeDeepUndefined({ ...config }, DEFAULT_AMPLITUDE_RECORDER_CONFIG);\n    this.stream = stream;\n  }\n\n  init() {\n    this.audioContext = new AudioContext();\n    this.analyserNode = this.audioContext.createAnalyser();\n    const { analyserConfig } = this.config;\n    this.analyserNode.fftSize = analyserConfig.fftSize;\n    this.analyserNode.maxDecibels = analyserConfig.maxDecibels;\n    this.analyserNode.minDecibels = analyserConfig.minDecibels;\n\n    this.microphone = this.audioContext.createMediaStreamSource(this.stream);\n    this.microphone.connect(this.analyserNode);\n  }\n\n  stop() {\n    clearInterval(this.amplitudeSamplingInterval);\n    this.amplitudeSamplingInterval = undefined;\n    this.state.next(AmplitudeRecorderState.STOPPED);\n  }\n\n  start = () => {\n    if (this.state.value === AmplitudeRecorderState.CLOSED) return;\n    if (!this.stream) {\n      throw new Error(\n        'Missing MediaStream instance. Cannot to start amplitude recording',\n      );\n    }\n\n    if (this.state.value === AmplitudeRecorderState.RECORDING) this.stop();\n\n    if (!this.analyserNode) {\n      if (!this.stream) return;\n      this.init();\n    }\n\n    this.state.next(AmplitudeRecorderState.RECORDING);\n\n    this.amplitudeSamplingInterval = setInterval(() => {\n      if (!(this.analyserNode && this.state.value === AmplitudeRecorderState.RECORDING))\n        return;\n      const frequencyBins = new Uint8Array(this.analyserNode.frequencyBinCount);\n      try {\n        this.analyserNode.getByteFrequencyData(frequencyBins);\n      } catch (e) {\n        logError(e as Error);\n        this.error.next(e as Error);\n        return;\n      }\n      const normalizedSignalStrength =\n        rootMeanSquare(frequencyBins) / MAX_FREQUENCY_AMPLITUDE;\n      this.amplitudes.next([...this.amplitudes.value, normalizedSignalStrength]);\n    }, this.config.samplingFrequencyMs);\n  };\n\n  close() {\n    if (this.state.value !== AmplitudeRecorderState.STOPPED) this.stop();\n    this.state.next(AmplitudeRecorderState.CLOSED);\n    this.amplitudes.next([]);\n    this.microphone?.disconnect();\n    this.analyserNode?.disconnect();\n    if (this.audioContext?.state !== 'closed') this.audioContext?.close();\n  }\n}\n"],"mappings":";;;;AAIA,IAAM,0BAA0B;AAEhC,IAAM,YAAY,MAAc,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AAElF,IAAM,kBAAkB,WACtB,KAAK,KAAK,OAAO,QAAQ,KAAK,QAAQ,MAAM,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,OAAO,MAAM;AA+BlF,IAAa,oCAA6D;CACxE,gBAAgB;EACd,SAAS;EACT,aAAa;EACb,aAAa;CACf;CACA,aAAa;CACb,qBAAqB;AACvB;AAaA,IAAa,oBAAb,MAA+B;CAc7B,YAAY,EAAE,QAAQ,UAAoC;oBAJ7C,IAAI,gBAA0B,CAAC,CAAC;eACrC,IAAI,gBAAoD,KAAA,CAAS;eACjE,IAAI,QAA2B;qBAyBzB;GACZ,IAAI,KAAK,MAAM,UAAA,UAAyC;GACxD,IAAI,CAAC,KAAK,QACR,MAAM,IAAI,MACR,mEACF;GAGF,IAAI,KAAK,MAAM,UAAA,aAA4C,KAAK,KAAK;GAErE,IAAI,CAAC,KAAK,cAAc;IACtB,IAAI,CAAC,KAAK,QAAQ;IAClB,KAAK,KAAK;GACZ;GAEA,KAAK,MAAM,KAAA,WAAqC;GAEhD,KAAK,4BAA4B,kBAAkB;IACjD,IAAI,EAAE,KAAK,gBAAgB,KAAK,MAAM,UAAA,cACpC;IACF,MAAM,gBAAgB,IAAI,WAAW,KAAK,aAAa,iBAAiB;IACxE,IAAI;KACF,KAAK,aAAa,qBAAqB,aAAa;IACtD,SAAS,GAAG;KACV,SAAS,CAAU;KACnB,KAAK,MAAM,KAAK,CAAU;KAC1B;IACF;IACA,MAAM,2BACJ,eAAe,aAAa,IAAI;IAClC,KAAK,WAAW,KAAK,CAAC,GAAG,KAAK,WAAW,OAAO,wBAAwB,CAAC;GAC3E,GAAG,KAAK,OAAO,mBAAmB;EACpC;EAtDE,KAAK,SAAS,mBAAmB,EAAE,GAAG,OAAO,GAAG,iCAAiC;EACjF,KAAK,SAAS;CAChB;CAEA,OAAO;EACL,KAAK,eAAe,IAAI,aAAa;EACrC,KAAK,eAAe,KAAK,aAAa,eAAe;EACrD,MAAM,EAAE,mBAAmB,KAAK;EAChC,KAAK,aAAa,UAAU,eAAe;EAC3C,KAAK,aAAa,cAAc,eAAe;EAC/C,KAAK,aAAa,cAAc,eAAe;EAE/C,KAAK,aAAa,KAAK,aAAa,wBAAwB,KAAK,MAAM;EACvE,KAAK,WAAW,QAAQ,KAAK,YAAY;CAC3C;CAEA,OAAO;EACL,cAAc,KAAK,yBAAyB;EAC5C,KAAK,4BAA4B,KAAA;EACjC,KAAK,MAAM,KAAA,SAAmC;CAChD;CAoCA,QAAQ;EACN,IAAI,KAAK,MAAM,UAAA,WAA0C,KAAK,KAAK;EACnE,KAAK,MAAM,KAAA,QAAkC;EAC7C,KAAK,WAAW,KAAK,CAAC,CAAC;EACvB,KAAK,YAAY,WAAW;EAC5B,KAAK,cAAc,WAAW;EAC9B,IAAI,KAAK,cAAc,UAAU,UAAU,KAAK,cAAc,MAAM;CACtE;AACF"}

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

@@ -0,0 +1,62 @@
+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 {
+	constructor({ mediaType }) {
+		this.state = new BehaviorSubject(void 0);
+		this.status = new BehaviorSubject(void 0);
+		this.error = new Subject();
+		this.changeSubscriptions = [];
+		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;CAQ7B,YAAY,EAAE,aAAuC;eAN7C,IAAI,gBAA6C,KAAA,CAAS;gBACzD,IAAI,gBAA8C,KAAA,CAAS;eAC5D,IAAI,QAA2B;6BAEO,CAAC;EAG7C,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"}