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

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

@@ -1,13 +1,13 @@
 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 { 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";
@@ -37,11 +37,11 @@ var AudioRecordingButtonWithNotification = () => {
 	})] });
 };
 var DefaultStartRecordingAudioButton = forwardRef(function StartRecordingAudioButton(props, ref) {
-	const { t } = useTranslationContext();
 	const { IconVoice } = useComponentContextIcons();
+	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx(Button, {
 		appearance: "ghost",
-		"aria-label": t("aria/Start recording audio"),
+		"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",

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

@@ -1 +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"}
+{"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

@@ -1,10 +1,10 @@
-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 { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -37,7 +37,7 @@ var AudioRecordingPlayback = ({ durationSeconds, mimeType, src, waveformData })
 		children: [
 			/* @__PURE__ */ jsx(Button, {
 				appearance: "ghost",
-				"aria-label": isPlaying ? t("aria/Pause") : t("aria/Play"),
+				"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",

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

@@ -1 +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"}
+{"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

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 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";

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

@@ -1 +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"}
+{"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/RecordingPermissionDeniedNotification.mjs

@@ -6,12 +6,12 @@ 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")
+			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("Allow access to camera"),
-			microphone: t("Allow access to microphone")
+			camera: t("mediaRecorder.permissionDenied.camera.heading", "Allow access to camera"),
+			microphone: t("mediaRecorder.permissionDenied.microphone.heading", "Allow access to microphone")
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {

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

@@ -1 +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"}
+{"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

@@ -15,33 +15,16 @@ var DEFAULT_AMPLITUDE_RECORDER_CONFIG = {
 	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.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;
 	}
@@ -60,6 +43,29 @@ var AmplitudeRecorder = class {
 		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");

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

@@ -1 +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"}
+{"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"}

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

@@ -12,11 +12,12 @@ var MEDIA_TO_PERMISSION = {
 	video: "camera"
 };
 var BrowserPermission = class {
+	name;
+	state = new BehaviorSubject(void 0);
+	status = new BehaviorSubject(void 0);
+	error = new Subject();
+	changeSubscriptions = [];
 	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() {

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

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