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

package/dist/es/components/Location/hooks/useLiveLocationSharingManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveLocationSharingManager.mjs","names":[],"sources":["../../../../../src/components/Location/hooks/useLiveLocationSharingManager.ts"],"sourcesContent":["import { LiveLocationManager } from 'stream-chat';\nimport { useEffect, useMemo } from 'react';\nimport type { LiveLocationManagerConstructorParameters, StreamChat } from 'stream-chat';\n\nconst isMobile = () => /Mobi/i.test(navigator.userAgent);\n/**\n * Checks whether the current browser is Safari.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');\n};\n\n/**\n * Checks whether the current browser is Firefox.\n */\nexport const isFirefox = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Firefox');\n};\n\n/**\n * Checks whether the current browser is Google Chrome.\n */\nexport const isChrome = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Chrome');\n};\n\nconst browser = () => {\n  if (isChrome()) return 'chrome';\n  if (isFirefox()) return 'firefox';\n  if (isSafari()) return 'safari';\n  return 'other';\n};\n\nexport const useLiveLocationSharingManager = ({\n  client,\n  getDeviceId,\n  watchLocation,\n}: Omit<LiveLocationManagerConstructorParameters, 'client' | 'getDeviceId'> & {\n  client?: StreamChat | null;\n  getDeviceId?: () => string;\n}) => {\n  const manager = useMemo(() => {\n    if (!client) return null;\n\n    return new LiveLocationManager({\n      client,\n      getDeviceId:\n        getDeviceId ??\n        (() => `web-${isMobile() ? 'mobile' : 'desktop'}-${browser()}-${client.userID}`),\n      watchLocation,\n    });\n  }, [client, getDeviceId, watchLocation]);\n\n  useEffect(() => {\n    if (!manager) return;\n\n    manager.init();\n\n    return () => {\n      // Two teardowns, because the manager has two lifetimes. `unregisterSubscriptions` is ref-counted\n      // and releases the WS subscriptions; `dispose` releases the configuration subscription, which the\n      // client's configuration registry holds a handle to — without it a manager per memo generation\n      // accumulates for the life of the client.\n      //\n      // Safe to call here even though StrictMode runs cleanup between two mounts of the same instance:\n      // `registerSubscriptions` (via `init`) re-subscribes configuration if it was disposed. That\n      // recovery is a microtask late, because `init` awaits its state fetch first — nothing is lost,\n      // since subscribing applies whatever is registered at that moment.\n      manager.unregisterSubscriptions();\n      manager.dispose();\n    };\n  }, [manager]);\n\n  return manager;\n};\n"],"mappings":";;;AAIA,IAAM,iBAAiB,QAAQ,KAAK,UAAU,SAAS;;;;AAIvD,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,iCAAiC,KAAK,UAAU,aAAa,EAAE;AACxE;;;;AAKA,IAAa,kBAAkB;CAC7B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,SAAS;AAChD;;;;AAKA,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,QAAQ;AAC/C;AAEA,IAAM,gBAAgB;CACpB,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,UAAU,GAAG,OAAO;CACxB,IAAI,SAAS,GAAG,OAAO;CACvB,OAAO;AACT;AAEA,IAAa,iCAAiC,EAC5C,QACA,aACA,oBAII;CACJ,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,QAAQ,OAAO;EAEpB,OAAO,IAAI,oBAAoB;GAC7B;GACA,aACE,sBACO,OAAO,SAAS,IAAI,WAAW,UAAU,GAAG,QAAQ,EAAE,GAAG,OAAO;GACzE;EACF,CAAC;CACH,GAAG;EAAC;EAAQ;EAAa;CAAa,CAAC;CAEvC,gBAAgB;EACd,IAAI,CAAC,SAAS;EAEd,QAAQ,KAAK;EAEb,aAAa;GAUX,QAAQ,wBAAwB;GAChC,QAAQ,QAAQ;EAClB;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}

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

@@ -0,0 +1,32 @@
+import { MediaRecordingState } from "../classes/MediaRecorderController.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { AudioRecordingPlayback } from "./AudioRecordingPlayback.mjs";
+import { AudioRecordingPreview } from "./AudioRecordingPreview.mjs";
+import { isStopped } from "./recordingStateIdentity.mjs";
+import { AudioRecorderRecordingControls } from "./AudioRecorderRecordingControls.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
+var AudioRecorder = () => {
+	const { recordingController: { recorder, recording, recordingState } } = useMessageComposerContext();
+	const state = useMemo(() => ({
+		paused: recordingState === MediaRecordingState.PAUSED,
+		recording: recordingState === MediaRecordingState.RECORDING,
+		stopped: recordingState === MediaRecordingState.STOPPED
+	}), [recordingState]);
+	if (!recorder) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__audio_recorder",
+		"data-testid": "audio-recorder",
+		children: [(isStopped(recordingState) || state.paused) && recording?.asset_url ? /* @__PURE__ */ jsx(AudioRecordingPlayback, {
+			durationSeconds: recording.custom?.duration ?? 0,
+			mimeType: recording.custom?.mime_type,
+			src: recording.asset_url,
+			waveformData: recording.custom?.waveform_data
+		}) : state.recording ? /* @__PURE__ */ jsx(AudioRecordingPreview, {}) : null, /* @__PURE__ */ jsx(AudioRecorderRecordingControls, {})]
+	});
+};
+//#endregion
+export { AudioRecorder };
+
+//# sourceMappingURL=AudioRecorder.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecorder.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AudioRecordingPlayback } from './AudioRecordingPlayback';\nimport { AudioRecordingPreview } from './AudioRecordingPreview';\nimport { MediaRecordingState } from '../classes';\nimport { useMessageComposerContext } from '../../../context/MessageComposerContext';\nimport { AudioRecorderRecordingControls } from './AudioRecorderRecordingControls';\nimport { isStopped } from './recordingStateIdentity';\n\nexport const AudioRecorder = () => {\n  const {\n    recordingController: { recorder, recording, recordingState },\n  } = useMessageComposerContext();\n\n  const state = useMemo(\n    () => ({\n      paused: recordingState === MediaRecordingState.PAUSED,\n      recording: recordingState === MediaRecordingState.RECORDING,\n      stopped: recordingState === MediaRecordingState.STOPPED,\n    }),\n    [recordingState],\n  );\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__audio_recorder' data-testid={'audio-recorder'}>\n      {(isStopped(recordingState) || state.paused) && recording?.asset_url ? (\n        <AudioRecordingPlayback\n          durationSeconds={recording.custom?.duration ?? 0}\n          mimeType={recording.custom?.mime_type}\n          src={recording.asset_url}\n          waveformData={recording.custom?.waveform_data}\n        />\n      ) : state.recording ? (\n        <AudioRecordingPreview />\n      ) : null}\n\n      <AudioRecorderRecordingControls />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,sBAAsB;CACjC,MAAM,EACJ,qBAAqB,EAAE,UAAU,WAAW,qBAC1C,0BAA0B;CAE9B,MAAM,QAAQ,eACL;EACL,QAAQ,mBAAmB,oBAAoB;EAC/C,WAAW,mBAAmB,oBAAoB;EAClD,SAAS,mBAAmB,oBAAoB;CAClD,IACA,CAAC,cAAc,CACjB;CAEA,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;EAA2B,eAAa;YAAvD,EACI,UAAU,cAAc,KAAK,MAAM,WAAW,WAAW,YACzD,oBAAC,wBAAD;GACE,iBAAiB,UAAU,QAAQ,YAAY;GAC/C,UAAU,UAAU,QAAQ;GAC5B,KAAK,UAAU;GACf,cAAc,UAAU,QAAQ;EACjC,CAAA,IACC,MAAM,YACR,oBAAC,uBAAD,CAAwB,CAAA,IACtB,MAEJ,oBAAC,gCAAD,CAAiC,CAAA,CAC9B;;AAET"}

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

@@ -0,0 +1,77 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { CheckSignIcon } from "../../MessageComposer/icons.mjs";
+import { isRecording } from "./recordingStateIdentity.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("mediaRecorder.audioRecorderRecording.pauseRecording.ariaLabel", "Pause recording") : t("mediaRecorder.audioRecorderRecording.resumeRecording.ariaLabel", "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("mediaRecorder.audioRecorderRecording.cancelRecording.ariaLabel", "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("mediaRecorder.audioRecorderRecording.voiceMessageDeleted.text", "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("mediaRecorder.audioRecorderRecording.completeRecording.ariaLabel", "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={\n        recording\n          ? t(\n              'mediaRecorder.audioRecorderRecording.pauseRecording.ariaLabel',\n              'Pause recording',\n            )\n          : t(\n              'mediaRecorder.audioRecorderRecording.resumeRecording.ariaLabel',\n              'Resume recording',\n            )\n      }\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  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(\n            'mediaRecorder.audioRecorderRecording.cancelRecording.ariaLabel',\n            'Cancel recording',\n          )}\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(\n                'mediaRecorder.audioRecorderRecording.voiceMessageDeleted.text',\n                'Voice message deleted',\n              ),\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(\n          'mediaRecorder.audioRecorderRecording.completeRecording.ariaLabel',\n          'Complete recording',\n        )}\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,cACE,YACI,EACE,iEACA,iBACF,IACA,EACE,kEACA,kBACF;EAEN,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;CAChD,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,EACV,kEACA,kBACF;IACA,UAAA;IACA,WAAU;IACV,eAAa;IACb,UAAU;IACV,eAAe;KACb,SAAS,OAAO;KAChB,gBAAgB;MACd,SAAS;MACT,SAAS,EACP,iEACA,uBACF;MACA,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,EACV,oEACA,oBACF;IACA,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 { useDialogOnNearestManager } from "../../Dialog/hooks/useDialog.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 { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.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 { IconVoice } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("mediaRecorder.audioRecordingButton.startRecordingAudio.ariaLabel", "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 { IconVoice } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t(\n        'mediaRecorder.audioRecordingButton.startRecordingAudio.ariaLabel',\n        'Start recording audio',\n      )}\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,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EACV,oEACA,uBACF;EACA,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 { 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 { useComponentContextIcons } from "../../../context/useComponentContextIcons.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("common.pause.ariaLabel", "Pause") : t("common.play.ariaLabel", "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  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={\n          isPlaying\n            ? t('common.pause.ariaLabel', 'Pause')\n            : t('common.play.ariaLabel', 'Play')\n        }\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;CACjE,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,cACE,YACI,EAAE,0BAA0B,OAAO,IACnC,EAAE,yBAAyB,MAAM;IAEvC,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 { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.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  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;CAC/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("mediaRecorder.permissionDenied.camera.body", "To start recording, allow the camera access in your browser"),
+			microphone: t("mediaRecorder.permissionDenied.microphone.body", "To start recording, allow the microphone access in your browser")
+		},
+		heading: {
+			camera: t("mediaRecorder.permissionDenied.camera.heading", "Allow access to camera"),
+			microphone: t("mediaRecorder.permissionDenied.microphone.heading", "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(\n        'mediaRecorder.permissionDenied.camera.body',\n        'To start recording, allow the camera access in your browser',\n      ),\n      microphone: t(\n        'mediaRecorder.permissionDenied.microphone.body',\n        'To start recording, allow the microphone access in your browser',\n      ),\n    },\n    heading: {\n      camera: t(\n        'mediaRecorder.permissionDenied.camera.heading',\n        'Allow access to camera',\n      ),\n      microphone: t(\n        'mediaRecorder.permissionDenied.microphone.heading',\n        'Allow access to microphone',\n      ),\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,EACN,8CACA,6DACF;GACA,YAAY,EACV,kDACA,iEACF;EACF;EACA,SAAS;GACP,QAAQ,EACN,iDACA,wBACF;GACA,YAAY,EACV,qDACA,4BACF;EACF;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,81 @@
+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 {
+	audioContext;
+	analyserNode;
+	microphone;
+	stream;
+	config;
+	amplitudeSamplingInterval;
+	amplitudes = new BehaviorSubject([]);
+	state = new BehaviorSubject(void 0);
+	error = new Subject();
+	constructor({ config, stream }) {
+		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");
+	}
+	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);
+	};
+	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;CACA;CACA;CACA;CAEA;CAEA;CAEA,aAAa,IAAI,gBAA0B,CAAC,CAAC;CAC7C,QAAQ,IAAI,gBAAoD,KAAA,CAAS;CACzE,QAAQ,IAAI,QAA2B;CAEvC,YAAY,EAAE,QAAQ,UAAoC;EACxD,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;CAEA,cAAc;EACZ,IAAI,KAAK,MAAM,UAAA,UAAyC;EACxD,IAAI,CAAC,KAAK,QACR,MAAM,IAAI,MACR,mEACF;EAGF,IAAI,KAAK,MAAM,UAAA,aAA4C,KAAK,KAAK;EAErE,IAAI,CAAC,KAAK,cAAc;GACtB,IAAI,CAAC,KAAK,QAAQ;GAClB,KAAK,KAAK;EACZ;EAEA,KAAK,MAAM,KAAA,WAAqC;EAEhD,KAAK,4BAA4B,kBAAkB;GACjD,IAAI,EAAE,KAAK,gBAAgB,KAAK,MAAM,UAAA,cACpC;GACF,MAAM,gBAAgB,IAAI,WAAW,KAAK,aAAa,iBAAiB;GACxE,IAAI;IACF,KAAK,aAAa,qBAAqB,aAAa;GACtD,SAAS,GAAG;IACV,SAAS,CAAU;IACnB,KAAK,MAAM,KAAK,CAAU;IAC1B;GACF;GACA,MAAM,2BACJ,eAAe,aAAa,IAAI;GAClC,KAAK,WAAW,KAAK,CAAC,GAAG,KAAK,WAAW,OAAO,wBAAwB,CAAC;EAC3E,GAAG,KAAK,OAAO,mBAAmB;CACpC;CAEA,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"}