stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/AudioPlayback/WithAudioPlayback.mjs

@@ -0,0 +1,72 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { AudioPlayerPool } from "./AudioPlayerPool.mjs";
+import { audioPlayerNotificationsPluginFactory } from "./plugins/AudioPlayerNotificationsPlugin.mjs";
+import { useAudioPlaybackChangeAnnouncements } from "../Accessibility/hooks/useAudioPlaybackChangeAnnouncements.mjs";
+import { useNotificationTarget } from "../Notifications/hooks/useNotificationTarget.mjs";
+import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
+import React, { useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AudioPlayback/WithAudioPlayback.tsx
+var AudioPlayerContext = React.createContext({ audioPlayers: null });
+var WithAudioPlayback = ({ allowConcurrentPlayback, children }) => {
+	const [audioPlayers] = useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));
+	useEffect(() => () => {
+		audioPlayers.clear();
+	}, [audioPlayers]);
+	return /* @__PURE__ */ jsx(AudioPlayerContext.Provider, {
+		value: { audioPlayers },
+		children
+	});
+};
+var makeAudioPlayerId = ({ requester, src }) => `${requester ?? "requester-unknown"}:${src}`;
+var useAudioPlayer = ({ durationSeconds, fileSize, mimeType, playbackRates, plugins, requester = "", src, title, waveformData }) => {
+	const { addNotification } = useNotificationApi();
+	const panel = useNotificationTarget();
+	const { t } = useTranslationContext();
+	const { audioPlayers } = useContext(AudioPlayerContext);
+	const audioPlayer = src && audioPlayers ? audioPlayers.getOrAdd({
+		durationSeconds,
+		fileSize,
+		id: makeAudioPlayerId({
+			requester,
+			src
+		}),
+		mimeType,
+		playbackRates,
+		plugins,
+		src,
+		title,
+		waveformData
+	}) : void 0;
+	useAudioPlaybackChangeAnnouncements(audioPlayer);
+	useEffect(() => {
+		if (!audioPlayer) return;
+		/**
+		* Avoid having to pass client and translation function to AudioPlayer instances
+		* and instead provide plugin that takes care of translated notifications.
+		*/
+		const notificationsPlugin = audioPlayerNotificationsPluginFactory({
+			addNotification,
+			panel,
+			t
+		});
+		audioPlayer.setPlugins((currentPlugins) => [...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id), notificationsPlugin]);
+	}, [
+		addNotification,
+		audioPlayer,
+		panel,
+		t
+	]);
+	return audioPlayer;
+};
+var activeAudioPlayerSelector = ({ activeAudioPlayer }) => ({ activeAudioPlayer });
+var useActiveAudioPlayer = () => {
+	const { audioPlayers } = useContext(AudioPlayerContext);
+	const { activeAudioPlayer } = useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};
+	return activeAudioPlayer;
+};
+//#endregion
+export { WithAudioPlayback, useActiveAudioPlayer, useAudioPlayer };
+
+//# sourceMappingURL=WithAudioPlayback.mjs.map

package/dist/es/components/AudioPlayback/WithAudioPlayback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithAudioPlayback.mjs","names":[],"sources":["../../../../src/components/AudioPlayback/WithAudioPlayback.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport type { AudioPlayerOptions } from './AudioPlayer';\nimport type { AudioPlayerPoolState } from './AudioPlayerPool';\nimport { AudioPlayerPool } from './AudioPlayerPool';\nimport { audioPlayerNotificationsPluginFactory } from './plugins/AudioPlayerNotificationsPlugin';\nimport { useNotificationApi, useNotificationTarget } from '../Notifications';\nimport { useTranslationContext } from '../../context';\nimport { useStateStore } from '../../store';\nimport { useAudioPlaybackChangeAnnouncements } from '../Accessibility/hooks/useAudioPlaybackChangeAnnouncements';\n\nexport type WithAudioPlaybackProps = {\n  children?: React.ReactNode;\n  allowConcurrentPlayback?: boolean;\n};\n\nconst AudioPlayerContext = React.createContext<{ audioPlayers: AudioPlayerPool | null }>({\n  audioPlayers: null,\n});\n\nexport const WithAudioPlayback = ({\n  allowConcurrentPlayback,\n  children,\n}: WithAudioPlaybackProps) => {\n  const [audioPlayers] = useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));\n\n  useEffect(\n    () => () => {\n      audioPlayers.clear();\n    },\n    [audioPlayers],\n  );\n\n  return (\n    <AudioPlayerContext.Provider value={{ audioPlayers }}>\n      {children}\n    </AudioPlayerContext.Provider>\n  );\n};\n\nexport type UseAudioPlayerProps = {\n  /**\n   * Identifier of the entity that requested the audio playback, e.g. message ID.\n   * Asset to specific audio player is a many-to-many relationship\n   * - one URL can be associated with multiple UI elements,\n   * - one UI element can display multiple audio sources.\n   * Therefore, the AudioPlayer ID is a combination of request:src.\n   *\n   * The requester string can take into consideration whether there are multiple instances of\n   * the same URL requested by the same requester (message has multiple attachments with the same asset URL).\n   * In reality the fact that one message has multiple attachments with the same asset URL\n   * could be considered a bad practice or a bug.\n   */\n  requester?: string;\n} & Partial<Omit<AudioPlayerOptions, 'id' | 'pool'>>;\n\nconst makeAudioPlayerId = ({ requester, src }: { src: string; requester?: string }) =>\n  `${requester ?? 'requester-unknown'}:${src}`;\n\nexport const useAudioPlayer = ({\n  durationSeconds,\n  fileSize,\n  mimeType,\n  playbackRates,\n  plugins,\n  requester = '',\n  src,\n  title,\n  waveformData,\n}: UseAudioPlayerProps) => {\n  const { addNotification } = useNotificationApi();\n  const panel = useNotificationTarget();\n  const { t } = useTranslationContext();\n  const { audioPlayers } = useContext(AudioPlayerContext);\n\n  const audioPlayer =\n    src && audioPlayers\n      ? audioPlayers.getOrAdd({\n          durationSeconds,\n          fileSize,\n          id: makeAudioPlayerId({ requester, src }),\n          mimeType,\n          playbackRates,\n          plugins,\n          src,\n          title,\n          waveformData,\n        })\n      : undefined;\n\n  useAudioPlaybackChangeAnnouncements(audioPlayer);\n\n  useEffect(() => {\n    if (!audioPlayer) return;\n    /**\n     * Avoid having to pass client and translation function to AudioPlayer instances\n     * and instead provide plugin that takes care of translated notifications.\n     */\n    const notificationsPlugin = audioPlayerNotificationsPluginFactory({\n      addNotification,\n      panel,\n      t,\n    });\n    audioPlayer.setPlugins((currentPlugins) => [\n      ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),\n      notificationsPlugin,\n    ]);\n  }, [addNotification, audioPlayer, panel, t]);\n\n  return audioPlayer;\n};\n\nconst activeAudioPlayerSelector = ({ activeAudioPlayer }: AudioPlayerPoolState) => ({\n  activeAudioPlayer,\n});\n\nexport const useActiveAudioPlayer = () => {\n  const { audioPlayers } = useContext(AudioPlayerContext);\n  const { activeAudioPlayer } =\n    useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};\n  return activeAudioPlayer;\n};\n"],"mappings":";;;;;;;;;;AAeA,IAAM,qBAAqB,MAAM,cAAwD,EACvF,cAAc,KAChB,CAAC;AAED,IAAa,qBAAqB,EAChC,yBACA,eAC4B;CAC5B,MAAM,CAAC,gBAAgB,eAAe,IAAI,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;CAEtF,sBACc;EACV,aAAa,MAAM;CACrB,GACA,CAAC,YAAY,CACf;CAEA,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO,EAAE,aAAa;EAChD;CAC0B,CAAA;AAEjC;AAkBA,IAAM,qBAAqB,EAAE,WAAW,UACtC,GAAG,aAAa,oBAAoB,GAAG;AAEzC,IAAa,kBAAkB,EAC7B,iBACA,UACA,UACA,eACA,SACA,YAAY,IACZ,KACA,OACA,mBACyB;CACzB,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,QAAQ,sBAAsB;CACpC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,iBAAiB,WAAW,kBAAkB;CAEtD,MAAM,cACJ,OAAO,eACH,aAAa,SAAS;EACpB;EACA;EACA,IAAI,kBAAkB;GAAE;GAAW;EAAI,CAAC;EACxC;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,IACD,KAAA;CAEN,oCAAoC,WAAW;CAE/C,gBAAgB;EACd,IAAI,CAAC,aAAa;;;;;EAKlB,MAAM,sBAAsB,sCAAsC;GAChE;GACA;GACA;EACF,CAAC;EACD,YAAY,YAAY,mBAAmB,CACzC,GAAG,eAAe,QAAQ,WAAW,OAAO,OAAO,oBAAoB,EAAE,GACzE,mBACF,CAAC;CACH,GAAG;EAAC;EAAiB;EAAa;EAAO;CAAC,CAAC;CAE3C,OAAO;AACT;AAEA,IAAM,6BAA6B,EAAE,yBAA+C,EAClF,kBACF;AAEA,IAAa,6BAA6B;CACxC,MAAM,EAAE,iBAAiB,WAAW,kBAAkB;CACtD,MAAM,EAAE,sBACN,cAAc,cAAc,OAAO,yBAAyB,KAAK,CAAC;CACpE,OAAO;AACT"}

package/dist/es/components/AudioPlayback/components/DurationDisplay.mjs

@@ -0,0 +1,33 @@
+import { formatTime } from "./formatTime.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/AudioPlayback/components/DurationDisplay.tsx
+function DurationDisplay({ className, duration, isPlaying, secondsElapsed, showRemaining = false }) {
+	const remainingSeconds = duration != null && secondsElapsed != null ? Math.max(0, duration - secondsElapsed) : void 0;
+	const formattedDuration = formatTime(duration);
+	const formattedSecondsElapsed = formatTime(secondsElapsed);
+	const formattedRemaining = formatTime(remainingSeconds);
+	const shouldShowElapsed = !!secondsElapsed && secondsElapsed > 0 && secondsElapsed < (duration || 0);
+	const canShowRemaining = showRemaining && duration != null && secondsElapsed != null;
+	const primaryValue = showRemaining ? formattedRemaining : formattedSecondsElapsed;
+	const showPrimary = (canShowRemaining || shouldShowElapsed) && !!primaryValue;
+	const showDuration = !showPrimary && !!formattedDuration;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__duration-display", {
+			"str-chat__duration-display--hasProgress": !!secondsElapsed,
+			"str-chat__duration-display--isPlaying": isPlaying
+		}, className),
+		children: [showPrimary && /* @__PURE__ */ jsx("span", {
+			className: "str-chat__duration-display__time-elapsed",
+			children: primaryValue
+		}), showDuration && /* @__PURE__ */ jsx("span", {
+			className: "str-chat__duration-display__duration",
+			children: formattedDuration
+		})]
+	});
+}
+//#endregion
+export { DurationDisplay };
+
+//# sourceMappingURL=DurationDisplay.mjs.map

package/dist/es/components/AudioPlayback/components/DurationDisplay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurationDisplay.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/DurationDisplay.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { formatTime } from './formatTime';\n\ntype DurationDisplayProps = {\n  /** Whether audio is currently playing */\n  isPlaying: boolean;\n  /** Optional className for styling */\n  className?: string;\n  /** Total duration in seconds */\n  duration?: number;\n  /** Elapsed time in seconds */\n  secondsElapsed?: number;\n  /** Show remaining time instead of elapsed when possible */\n  showRemaining?: boolean;\n};\n\nexport function DurationDisplay({\n  className,\n  duration,\n  isPlaying,\n  secondsElapsed,\n  showRemaining = false,\n}: DurationDisplayProps) {\n  const remainingSeconds =\n    duration != null && secondsElapsed != null\n      ? Math.max(0, duration - secondsElapsed)\n      : undefined;\n  const formattedDuration = formatTime(duration);\n  const formattedSecondsElapsed = formatTime(secondsElapsed);\n  const formattedRemaining = formatTime(remainingSeconds);\n\n  const shouldShowElapsed =\n    !!secondsElapsed && secondsElapsed > 0 && secondsElapsed < (duration || 0);\n  const canShowRemaining = showRemaining && duration != null && secondsElapsed != null;\n  const primaryValue = showRemaining ? formattedRemaining : formattedSecondsElapsed;\n  const showPrimary = (canShowRemaining || shouldShowElapsed) && !!primaryValue;\n  const showDuration = !showPrimary && !!formattedDuration;\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__duration-display',\n        {\n          'str-chat__duration-display--hasProgress': !!secondsElapsed,\n          'str-chat__duration-display--isPlaying': isPlaying,\n        },\n        className,\n      )}\n    >\n      {showPrimary && (\n        <span className='str-chat__duration-display__time-elapsed'>{primaryValue}</span>\n      )}\n      {showDuration && (\n        <span className='str-chat__duration-display__duration'>{formattedDuration}</span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,gBAAgB,EAC9B,WACA,UACA,WACA,gBACA,gBAAgB,SACO;CACvB,MAAM,mBACJ,YAAY,QAAQ,kBAAkB,OAClC,KAAK,IAAI,GAAG,WAAW,cAAc,IACrC,KAAA;CACN,MAAM,oBAAoB,WAAW,QAAQ;CAC7C,MAAM,0BAA0B,WAAW,cAAc;CACzD,MAAM,qBAAqB,WAAW,gBAAgB;CAEtD,MAAM,oBACJ,CAAC,CAAC,kBAAkB,iBAAiB,KAAK,kBAAkB,YAAY;CAC1E,MAAM,mBAAmB,iBAAiB,YAAY,QAAQ,kBAAkB;CAChF,MAAM,eAAe,gBAAgB,qBAAqB;CAC1D,MAAM,eAAe,oBAAoB,sBAAsB,CAAC,CAAC;CACjE,MAAM,eAAe,CAAC,eAAe,CAAC,CAAC;CAEvC,OACE,qBAAC,OAAD;EACE,WAAW,KACT,8BACA;GACE,2CAA2C,CAAC,CAAC;GAC7C,yCAAyC;EAC3C,GACA,SACF;YARF,CAUG,eACC,oBAAC,QAAD;GAAM,WAAU;aAA4C;EAAmB,CAAA,GAEhF,gBACC,oBAAC,QAAD;GAAM,WAAU;aAAwC;EAAwB,CAAA,CAE/E;;AAET"}

package/dist/es/components/AudioPlayback/components/PlaybackRateButton.mjs

@@ -0,0 +1,15 @@
+import { Button } from "../../Button/Button.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/AudioPlayback/components/PlaybackRateButton.tsx
+var PlaybackRateButton = ({ children, className, ...rest }) => /* @__PURE__ */ jsx(Button, {
+	"data-testid": "playback-rate-button",
+	...rest,
+	className: clsx("str-chat__playback-rate-button", className),
+	children
+});
+//#endregion
+export { PlaybackRateButton };
+
+//# sourceMappingURL=PlaybackRateButton.mjs.map

package/dist/es/components/AudioPlayback/components/PlaybackRateButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaybackRateButton.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/PlaybackRateButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '../../Button';\nimport clsx from 'clsx';\n\nexport type PlaybackRateButtonProps = React.ComponentProps<'button'>;\n\nexport const PlaybackRateButton = ({\n  children,\n  className,\n  ...rest\n}: PlaybackRateButtonProps) => (\n  <Button\n    data-testid='playback-rate-button'\n    {...rest}\n    className={clsx('str-chat__playback-rate-button', className)}\n  >\n    {children}\n  </Button>\n);\n"],"mappings":";;;;;AAMA,IAAa,sBAAsB,EACjC,UACA,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,eAAY;CACZ,GAAI;CACJ,WAAW,KAAK,kCAAkC,SAAS;CAE1D;AACK,CAAA"}

package/dist/es/components/AudioPlayback/components/ProgressBar.mjs

@@ -0,0 +1,56 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { handleProgressBarKeyboardSeek } from "./keyboardSeek.mjs";
+import { getAudioTrackSliderAriaValueText } from "./progressBarA11y.mjs";
+import { useInteractiveProgressBar } from "./useInteractiveProgressBar.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/AudioPlayback/components/ProgressBar.tsx
+var ProgressBar = ({ className, durationSeconds, progress, secondsElapsed, seek }) => {
+	const { t } = useTranslationContext("ProgressBar");
+	const { handleDrag, handleDragStart, handleDragStop, indicatorLeft, setProgressIndicator, setRoot } = useInteractiveProgressBar({
+		progress,
+		seek
+	});
+	const normalizedProgress = Math.max(0, Math.min(100, progress));
+	const ariaValueText = getAudioTrackSliderAriaValueText({
+		durationSeconds,
+		progress: normalizedProgress,
+		secondsElapsed,
+		t
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": t("aria/Seek audio position"),
+		"aria-orientation": "horizontal",
+		"aria-valuemax": 100,
+		"aria-valuemin": 0,
+		"aria-valuenow": Math.round(normalizedProgress),
+		"aria-valuetext": ariaValueText,
+		className: clsx("str-chat__message-attachment-audio-widget--progress-track", className),
+		"data-progress": normalizedProgress,
+		"data-testid": "audio-progress",
+		onClick: seek,
+		onKeyDown: (event) => handleProgressBarKeyboardSeek({
+			event,
+			progress: normalizedProgress,
+			seek
+		}),
+		onPointerDown: handleDragStart,
+		onPointerMove: handleDrag,
+		onPointerUp: handleDragStop,
+		ref: setRoot,
+		role: "slider",
+		style: { "--str-chat__message-attachment-audio-widget-progress": normalizedProgress + "%" },
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "str-chat__message-attachment-audio-widget--progress-indicator",
+			ref: setProgressIndicator,
+			style: { insetInlineStart: `${indicatorLeft}px` }
+		})
+	});
+};
+//#endregion
+export { ProgressBar };
+
+//# sourceMappingURL=ProgressBar.mjs.map

package/dist/es/components/AudioPlayback/components/ProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/ProgressBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { handleProgressBarKeyboardSeek } from './keyboardSeek';\nimport { getAudioTrackSliderAriaValueText } from './progressBarA11y';\nimport { useInteractiveProgressBar } from './useInteractiveProgressBar';\nimport type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';\nimport { useTranslationContext } from '../../../context';\n\ntype SeekParams = Parameters<AudioPlayerSeekFn>[0];\n\nexport type ProgressBarProps = {\n  /** Progress expressed in fractional number value btw 0 and 100. */\n  progress: number;\n  /** Total track duration in seconds. */\n  durationSeconds?: number;\n  /** Current elapsed position in seconds. */\n  secondsElapsed?: number;\n  seek: (params: SeekParams) => void;\n} & Pick<React.ComponentProps<'div'>, 'className'>;\n\nexport const ProgressBar = ({\n  className,\n  durationSeconds,\n  progress,\n  secondsElapsed,\n  seek,\n}: ProgressBarProps) => {\n  const { t } = useTranslationContext('ProgressBar');\n  const {\n    handleDrag,\n    handleDragStart,\n    handleDragStop,\n    indicatorLeft,\n    setProgressIndicator,\n    setRoot,\n  } = useInteractiveProgressBar({ progress, seek });\n  const normalizedProgress = Math.max(0, Math.min(100, progress));\n  const ariaValueText = getAudioTrackSliderAriaValueText({\n    durationSeconds,\n    progress: normalizedProgress,\n    secondsElapsed,\n    t,\n  });\n\n  return (\n    <div\n      aria-label={t('aria/Seek audio position')}\n      aria-orientation='horizontal'\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={Math.round(normalizedProgress)}\n      aria-valuetext={ariaValueText}\n      className={clsx(\n        'str-chat__message-attachment-audio-widget--progress-track',\n        className,\n      )}\n      data-progress={normalizedProgress}\n      data-testid='audio-progress'\n      onClick={seek}\n      onKeyDown={(event) =>\n        handleProgressBarKeyboardSeek({ event, progress: normalizedProgress, seek })\n      }\n      onPointerDown={handleDragStart}\n      onPointerMove={handleDrag}\n      onPointerUp={handleDragStop}\n      ref={setRoot}\n      role='slider'\n      style={\n        {\n          '--str-chat__message-attachment-audio-widget-progress':\n            normalizedProgress + '%',\n        } as React.CSSProperties\n      }\n      tabIndex={0}\n    >\n      <div\n        aria-hidden='true'\n        className='str-chat__message-attachment-audio-widget--progress-indicator'\n        ref={setProgressIndicator}\n        style={{ insetInlineStart: `${indicatorLeft}px` }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAoBA,IAAa,eAAe,EAC1B,WACA,iBACA,UACA,gBACA,WACsB;CACtB,MAAM,EAAE,MAAM,sBAAsB,aAAa;CACjD,MAAM,EACJ,YACA,iBACA,gBACA,eACA,sBACA,YACE,0BAA0B;EAAE;EAAU;CAAK,CAAC;CAChD,MAAM,qBAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,QAAQ,CAAC;CAC9D,MAAM,gBAAgB,iCAAiC;EACrD;EACA,UAAU;EACV;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EACE,cAAY,EAAE,0BAA0B;EACxC,oBAAiB;EACjB,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,MAAM,kBAAkB;EAC5C,kBAAgB;EAChB,WAAW,KACT,6DACA,SACF;EACA,iBAAe;EACf,eAAY;EACZ,SAAS;EACT,YAAY,UACV,8BAA8B;GAAE;GAAO,UAAU;GAAoB;EAAK,CAAC;EAE7E,eAAe;EACf,eAAe;EACf,aAAa;EACb,KAAK;EACL,MAAK;EACL,OACE,EACE,wDACE,qBAAqB,IACzB;EAEF,UAAU;YAEV,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,KAAK;GACL,OAAO,EAAE,kBAAkB,GAAG,cAAc,IAAI;EACjD,CAAA;CACE,CAAA;AAET"}

package/dist/es/components/AudioPlayback/components/WaveProgressBar.mjs

@@ -0,0 +1,107 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { handleProgressBarKeyboardSeek } from "./keyboardSeek.mjs";
+import { getAudioTrackSliderAriaValueText } from "./progressBarA11y.mjs";
+import { useInteractiveProgressBar } from "./useInteractiveProgressBar.mjs";
+import { resampleWaveformData } from "../../Attachment/audioSampling.mjs";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import throttle from "lodash.throttle";
+//#region src/components/AudioPlayback/components/WaveProgressBar.tsx
+var WaveProgressBar = ({ amplitudeBarGapWidthPx, durationSeconds, progress = 0, relativeAmplitudeBarWidth = 2, relativeAmplitudeGap = 1, secondsElapsed, seek, waveformData }) => {
+	const { t } = useTranslationContext("WaveProgressBar");
+	const [trackAxisX, setTrackAxisX] = useState();
+	const lastAvailableTrackWidth = useRef(0);
+	const minAmplitudeBarWidthRef = useRef(null);
+	const lastMinAmplitudeBarWidthUsed = useRef(null);
+	const { availableTrackWidth, handleDrag, handleDragStart, handleDragStop, indicatorLeft, root, setProgressIndicator, setRoot } = useInteractiveProgressBar({
+		progress,
+		seek
+	});
+	const normalizedProgress = Math.max(0, Math.min(100, progress));
+	const getTrackAxisX = useMemo(() => throttle((availableWidth) => {
+		const minAmplitudeBarWidth = minAmplitudeBarWidthRef.current;
+		const hasMinWidthChanged = minAmplitudeBarWidth !== lastMinAmplitudeBarWidthUsed.current;
+		if (availableWidth === lastAvailableTrackWidth.current && !hasMinWidthChanged) return;
+		lastAvailableTrackWidth.current = availableWidth;
+		lastMinAmplitudeBarWidthUsed.current = minAmplitudeBarWidth;
+		const possibleAmpCount = Math.floor(availableWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth));
+		const amplitudeBarWidthToGapRatio = relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);
+		const maxCountByMinWidth = typeof minAmplitudeBarWidth === "number" && minAmplitudeBarWidth > 0 ? Math.floor(availableWidth * amplitudeBarWidthToGapRatio / minAmplitudeBarWidth) : possibleAmpCount;
+		const barCount = Math.max(0, Math.min(possibleAmpCount, maxCountByMinWidth));
+		const barWidth = barCount && availableWidth / barCount * amplitudeBarWidthToGapRatio;
+		setTrackAxisX({
+			barCount,
+			barWidth,
+			gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth)
+		});
+	}, 1), [relativeAmplitudeBarWidth, relativeAmplitudeGap]);
+	const resampledWaveformData = useMemo(() => trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : [], [trackAxisX, waveformData]);
+	useLayoutEffect(() => {
+		if (availableTrackWidth > 0) getTrackAxisX(availableTrackWidth);
+	}, [availableTrackWidth, getTrackAxisX]);
+	useLayoutEffect(() => {
+		if (!root || typeof window === "undefined") return;
+		const amplitudeBar = root.querySelector(".str-chat__wave-progress-bar__amplitude-bar");
+		if (!amplitudeBar) return;
+		const computedStyle = window.getComputedStyle(amplitudeBar);
+		const parsedMinWidth = parseFloat(computedStyle.minWidth);
+		if (!Number.isNaN(parsedMinWidth) && parsedMinWidth > 0) minAmplitudeBarWidthRef.current = parsedMinWidth;
+		if (availableTrackWidth > 0) getTrackAxisX(availableTrackWidth);
+	}, [
+		availableTrackWidth,
+		getTrackAxisX,
+		root,
+		trackAxisX?.barCount
+	]);
+	if (!waveformData.length || trackAxisX?.barCount === 0) return null;
+	const amplitudeGapWidth = amplitudeBarGapWidthPx ?? trackAxisX?.gap;
+	const ariaValueText = getAudioTrackSliderAriaValueText({
+		durationSeconds,
+		progress: normalizedProgress,
+		secondsElapsed,
+		t
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": t("aria/Seek audio position"),
+		"aria-orientation": "horizontal",
+		"aria-valuemax": 100,
+		"aria-valuemin": 0,
+		"aria-valuenow": Math.round(normalizedProgress),
+		"aria-valuetext": ariaValueText,
+		className: clsx("str-chat__wave-progress-bar__track", { "str-chat__wave-progress-bar__track--playback-initiated": normalizedProgress > 0 }),
+		"data-testid": "wave-progress-bar-track",
+		onClick: seek,
+		onKeyDown: (event) => handleProgressBarKeyboardSeek({
+			event,
+			progress: normalizedProgress,
+			seek
+		}),
+		onPointerDown: handleDragStart,
+		onPointerMove: handleDrag,
+		onPointerUp: handleDragStop,
+		ref: setRoot,
+		role: "slider",
+		style: { "--str-chat__voice-recording-amplitude-bar-gap-width": typeof amplitudeGapWidth === "number" ? `${amplitudeGapWidth}px` : void 0 },
+		tabIndex: 0,
+		children: [resampledWaveformData.map((amplitude, i) => /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: clsx("str-chat__wave-progress-bar__amplitude-bar", { ["str-chat__wave-progress-bar__amplitude-bar--active"]: normalizedProgress > i / resampledWaveformData.length * 100 }),
+			"data-testid": "amplitude-bar",
+			style: {
+				"--str-chat__voice-recording-amplitude-bar-width": trackAxisX?.barWidth + "px",
+				"--str-chat__wave-progress-bar__amplitude-bar-height": amplitude ? amplitude * 100 + "%" : "0%"
+			}
+		}, `amplitude-${i}`)), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "str-chat__wave-progress-bar__progress-indicator",
+			"data-testid": "wave-progress-bar-progress-indicator",
+			ref: setProgressIndicator,
+			style: { insetInlineStart: `${indicatorLeft}px` }
+		})]
+	});
+};
+//#endregion
+export { WaveProgressBar };
+
+//# sourceMappingURL=WaveProgressBar.mjs.map

package/dist/es/components/AudioPlayback/components/WaveProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaveProgressBar.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/WaveProgressBar.tsx"],"sourcesContent":["import throttle from 'lodash.throttle';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { resampleWaveformData } from '../../Attachment/audioSampling';\nimport type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';\nimport { handleProgressBarKeyboardSeek } from './keyboardSeek';\nimport { getAudioTrackSliderAriaValueText } from './progressBarA11y';\nimport { useInteractiveProgressBar } from './useInteractiveProgressBar';\nimport { useTranslationContext } from '../../../context';\n\ntype SeekParams = Parameters<AudioPlayerSeekFn>[0];\n\ntype WaveProgressBarProps = {\n  /** Function that allows to change the track progress */\n  seek: (params: SeekParams) => void;\n  /** The array of fractional number values between 0 and 1 representing the height of amplitudes */\n  waveformData: number[];\n  /** Progress expressed in fractional number value btw 0 and 100. */\n  progress?: number;\n  /** Total track duration in seconds. */\n  durationSeconds?: number;\n  /** Current elapsed position in seconds. */\n  secondsElapsed?: number;\n  /** Absolute gap width between bars in px (overrides computed gap var). */\n  amplitudeBarGapWidthPx?: number;\n  relativeAmplitudeBarWidth?: number;\n  relativeAmplitudeGap?: number;\n};\n\nexport const WaveProgressBar = ({\n  amplitudeBarGapWidthPx,\n  durationSeconds,\n  progress = 0,\n  relativeAmplitudeBarWidth = 2,\n  relativeAmplitudeGap = 1,\n  secondsElapsed,\n  seek,\n  waveformData,\n}: WaveProgressBarProps) => {\n  const { t } = useTranslationContext('WaveProgressBar');\n  const [trackAxisX, setTrackAxisX] = useState<{\n    barCount: number;\n    barWidth: number;\n    gap: number;\n  }>();\n  const lastAvailableTrackWidth = useRef<number>(0);\n  const minAmplitudeBarWidthRef = useRef<number | null>(null);\n  const lastMinAmplitudeBarWidthUsed = useRef<number | null>(null);\n  const {\n    availableTrackWidth,\n    handleDrag,\n    handleDragStart,\n    handleDragStop,\n    indicatorLeft,\n    root,\n    setProgressIndicator,\n    setRoot,\n  } = useInteractiveProgressBar({ progress, seek });\n  const normalizedProgress = Math.max(0, Math.min(100, progress));\n\n  const getTrackAxisX = useMemo(\n    () =>\n      throttle((availableWidth: number) => {\n        const minAmplitudeBarWidth = minAmplitudeBarWidthRef.current;\n        const hasMinWidthChanged =\n          minAmplitudeBarWidth !== lastMinAmplitudeBarWidthUsed.current;\n        if (availableWidth === lastAvailableTrackWidth.current && !hasMinWidthChanged) {\n          return;\n        }\n        lastAvailableTrackWidth.current = availableWidth;\n        lastMinAmplitudeBarWidthUsed.current = minAmplitudeBarWidth;\n        const possibleAmpCount = Math.floor(\n          availableWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth),\n        );\n        const amplitudeBarWidthToGapRatio =\n          relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);\n        const maxCountByMinWidth =\n          typeof minAmplitudeBarWidth === 'number' && minAmplitudeBarWidth > 0\n            ? Math.floor(\n                (availableWidth * amplitudeBarWidthToGapRatio) / minAmplitudeBarWidth,\n              )\n            : possibleAmpCount;\n        const barCount = Math.max(0, Math.min(possibleAmpCount, maxCountByMinWidth));\n        const barWidth =\n          barCount && (availableWidth / barCount) * amplitudeBarWidthToGapRatio;\n\n        setTrackAxisX({\n          barCount,\n          barWidth,\n          gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth),\n        });\n      }, 1),\n    [relativeAmplitudeBarWidth, relativeAmplitudeGap],\n  );\n\n  const resampledWaveformData = useMemo(\n    () => (trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : []),\n    [trackAxisX, waveformData],\n  );\n\n  useLayoutEffect(() => {\n    if (availableTrackWidth > 0) {\n      getTrackAxisX(availableTrackWidth);\n    }\n  }, [availableTrackWidth, getTrackAxisX]);\n\n  useLayoutEffect(() => {\n    if (!root || typeof window === 'undefined') return;\n    const amplitudeBar = root.querySelector<HTMLElement>(\n      '.str-chat__wave-progress-bar__amplitude-bar',\n    );\n    if (!amplitudeBar) return;\n    const computedStyle = window.getComputedStyle(amplitudeBar);\n    const parsedMinWidth = parseFloat(computedStyle.minWidth);\n    if (!Number.isNaN(parsedMinWidth) && parsedMinWidth > 0) {\n      minAmplitudeBarWidthRef.current = parsedMinWidth;\n    }\n    if (availableTrackWidth > 0) {\n      getTrackAxisX(availableTrackWidth);\n    }\n  }, [availableTrackWidth, getTrackAxisX, root, trackAxisX?.barCount]);\n\n  if (!waveformData.length || trackAxisX?.barCount === 0) return null;\n\n  const amplitudeGapWidth = amplitudeBarGapWidthPx ?? trackAxisX?.gap;\n  const ariaValueText = getAudioTrackSliderAriaValueText({\n    durationSeconds,\n    progress: normalizedProgress,\n    secondsElapsed,\n    t,\n  });\n\n  return (\n    <div\n      aria-label={t('aria/Seek audio position')}\n      aria-orientation='horizontal'\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={Math.round(normalizedProgress)}\n      aria-valuetext={ariaValueText}\n      className={clsx('str-chat__wave-progress-bar__track', {\n        'str-chat__wave-progress-bar__track--playback-initiated': normalizedProgress > 0,\n      })}\n      data-testid='wave-progress-bar-track'\n      onClick={seek}\n      onKeyDown={(event) =>\n        handleProgressBarKeyboardSeek({ event, progress: normalizedProgress, seek })\n      }\n      onPointerDown={handleDragStart}\n      onPointerMove={handleDrag}\n      onPointerUp={handleDragStop}\n      ref={setRoot}\n      role='slider'\n      style={\n        {\n          '--str-chat__voice-recording-amplitude-bar-gap-width':\n            typeof amplitudeGapWidth === 'number' ? `${amplitudeGapWidth}px` : undefined,\n        } as React.CSSProperties\n      }\n      tabIndex={0}\n    >\n      {resampledWaveformData.map((amplitude, i) => (\n        <div\n          aria-hidden='true'\n          className={clsx('str-chat__wave-progress-bar__amplitude-bar', {\n            ['str-chat__wave-progress-bar__amplitude-bar--active']:\n              normalizedProgress > (i / resampledWaveformData.length) * 100,\n          })}\n          data-testid='amplitude-bar'\n          key={`amplitude-${i}`}\n          style={\n            {\n              '--str-chat__voice-recording-amplitude-bar-width':\n                trackAxisX?.barWidth + 'px',\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        aria-hidden='true'\n        className='str-chat__wave-progress-bar__progress-indicator'\n        data-testid='wave-progress-bar-progress-indicator'\n        ref={setProgressIndicator}\n        style={{\n          insetInlineStart: `${indicatorLeft}px`,\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AA6BA,IAAa,mBAAmB,EAC9B,wBACA,iBACA,WAAW,GACX,4BAA4B,GAC5B,uBAAuB,GACvB,gBACA,MACA,mBAC0B;CAC1B,MAAM,EAAE,MAAM,sBAAsB,iBAAiB;CACrD,MAAM,CAAC,YAAY,iBAAiB,SAIjC;CACH,MAAM,0BAA0B,OAAe,CAAC;CAChD,MAAM,0BAA0B,OAAsB,IAAI;CAC1D,MAAM,+BAA+B,OAAsB,IAAI;CAC/D,MAAM,EACJ,qBACA,YACA,iBACA,gBACA,eACA,MACA,sBACA,YACE,0BAA0B;EAAE;EAAU;CAAK,CAAC;CAChD,MAAM,qBAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,QAAQ,CAAC;CAE9D,MAAM,gBAAgB,cAElB,UAAU,mBAA2B;EACnC,MAAM,uBAAuB,wBAAwB;EACrD,MAAM,qBACJ,yBAAyB,6BAA6B;EACxD,IAAI,mBAAmB,wBAAwB,WAAW,CAAC,oBACzD;EAEF,wBAAwB,UAAU;EAClC,6BAA6B,UAAU;EACvC,MAAM,mBAAmB,KAAK,MAC5B,kBAAkB,uBAAuB,0BAC3C;EACA,MAAM,8BACJ,6BAA6B,4BAA4B;EAC3D,MAAM,qBACJ,OAAO,yBAAyB,YAAY,uBAAuB,IAC/D,KAAK,MACF,iBAAiB,8BAA+B,oBACnD,IACA;EACN,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,kBAAkB,kBAAkB,CAAC;EAC3E,MAAM,WACJ,YAAa,iBAAiB,WAAY;EAE5C,cAAc;GACZ;GACA;GACA,KAAK,YAAY,uBAAuB;EAC1C,CAAC;CACH,GAAG,CAAC,GACN,CAAC,2BAA2B,oBAAoB,CAClD;CAEA,MAAM,wBAAwB,cACrB,aAAa,qBAAqB,cAAc,WAAW,QAAQ,IAAI,CAAC,GAC/E,CAAC,YAAY,YAAY,CAC3B;CAEA,sBAAsB;EACpB,IAAI,sBAAsB,GACxB,cAAc,mBAAmB;CAErC,GAAG,CAAC,qBAAqB,aAAa,CAAC;CAEvC,sBAAsB;EACpB,IAAI,CAAC,QAAQ,OAAO,WAAW,aAAa;EAC5C,MAAM,eAAe,KAAK,cACxB,6CACF;EACA,IAAI,CAAC,cAAc;EACnB,MAAM,gBAAgB,OAAO,iBAAiB,YAAY;EAC1D,MAAM,iBAAiB,WAAW,cAAc,QAAQ;EACxD,IAAI,CAAC,OAAO,MAAM,cAAc,KAAK,iBAAiB,GACpD,wBAAwB,UAAU;EAEpC,IAAI,sBAAsB,GACxB,cAAc,mBAAmB;CAErC,GAAG;EAAC;EAAqB;EAAe;EAAM,YAAY;CAAQ,CAAC;CAEnE,IAAI,CAAC,aAAa,UAAU,YAAY,aAAa,GAAG,OAAO;CAE/D,MAAM,oBAAoB,0BAA0B,YAAY;CAChE,MAAM,gBAAgB,iCAAiC;EACrD;EACA,UAAU;EACV;EACA;CACF,CAAC;CAED,OACE,qBAAC,OAAD;EACE,cAAY,EAAE,0BAA0B;EACxC,oBAAiB;EACjB,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,MAAM,kBAAkB;EAC5C,kBAAgB;EAChB,WAAW,KAAK,sCAAsC,EACpD,0DAA0D,qBAAqB,EACjF,CAAC;EACD,eAAY;EACZ,SAAS;EACT,YAAY,UACV,8BAA8B;GAAE;GAAO,UAAU;GAAoB;EAAK,CAAC;EAE7E,eAAe;EACf,eAAe;EACf,aAAa;EACb,KAAK;EACL,MAAK;EACL,OACE,EACE,uDACE,OAAO,sBAAsB,WAAW,GAAG,kBAAkB,MAAM,KAAA,EACvE;EAEF,UAAU;YA1BZ,CA4BG,sBAAsB,KAAK,WAAW,MACrC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAW,KAAK,8CAA8C,GAC3D,uDACC,qBAAsB,IAAI,sBAAsB,SAAU,IAC9D,CAAC;GACD,eAAY;GAEZ,OACE;IACE,mDACE,YAAY,WAAW;IACzB,uDAAuD,YACnD,YAAY,MAAM,MAClB;GACN;EAEH,GAVM,aAAa,GAUnB,CACF,GACD,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,eAAY;GACZ,KAAK;GACL,OAAO,EACL,kBAAkB,GAAG,cAAc,IACrC;EACD,CAAA,CACE;;AAET"}

package/dist/es/components/AudioPlayback/components/formatTime.mjs

@@ -0,0 +1,14 @@
+//#region src/components/AudioPlayback/components/formatTime.ts
+var formatTime = (totalSeconds, rounding = "ceil") => {
+	if (totalSeconds == null || Number.isNaN(totalSeconds) || totalSeconds < 0) return null;
+	const roundedSeconds = rounding === "floor" ? Math.floor(totalSeconds) : Math.ceil(totalSeconds);
+	const hours = Math.floor(roundedSeconds / 3600);
+	const minutes = Math.floor(roundedSeconds % 3600 / 60);
+	const seconds = roundedSeconds % 60;
+	const minSec = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+	return hours ? `${String(hours).padStart(2, "0")}:${minSec}` : minSec;
+};
+//#endregion
+export { formatTime };
+
+//# sourceMappingURL=formatTime.mjs.map

package/dist/es/components/AudioPlayback/components/formatTime.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatTime.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/formatTime.ts"],"sourcesContent":["export const formatTime = (\n  totalSeconds?: number,\n  rounding: 'ceil' | 'floor' = 'ceil',\n) => {\n  if (totalSeconds == null || Number.isNaN(totalSeconds) || totalSeconds < 0) {\n    return null;\n  }\n\n  const roundedSeconds =\n    rounding === 'floor' ? Math.floor(totalSeconds) : Math.ceil(totalSeconds);\n  const hours = Math.floor(roundedSeconds / 3600);\n  const minutes = Math.floor((roundedSeconds % 3600) / 60);\n  const seconds = roundedSeconds % 60;\n  const minSec = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(\n    2,\n    '0',\n  )}`;\n\n  return hours ? `${String(hours).padStart(2, '0')}:${minSec}` : minSec;\n};\n"],"mappings":";AAAA,IAAa,cACX,cACA,WAA6B,WAC1B;CACH,IAAI,gBAAgB,QAAQ,OAAO,MAAM,YAAY,KAAK,eAAe,GACvE,OAAO;CAGT,MAAM,iBACJ,aAAa,UAAU,KAAK,MAAM,YAAY,IAAI,KAAK,KAAK,YAAY;CAC1E,MAAM,QAAQ,KAAK,MAAM,iBAAiB,IAAI;CAC9C,MAAM,UAAU,KAAK,MAAO,iBAAiB,OAAQ,EAAE;CACvD,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,GAAG,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,OAAO,CAAC,CAAC,SACpE,GACA,GACF;CAEA,OAAO,QAAQ,GAAG,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,WAAW;AACjE"}

package/dist/es/components/AudioPlayback/components/keyboardSeek.mjs

@@ -0,0 +1,36 @@
+//#region src/components/AudioPlayback/components/keyboardSeek.ts
+var DEFAULT_KEYBOARD_PROGRESS_STEP = 5;
+var DEFAULT_KEYBOARD_PROGRESS_LARGE_STEP = 10;
+var getNextProgressByKey = ({ key, largeStep, progress, step }) => {
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowUp": return Math.min(100, progress + step);
+		case "ArrowLeft":
+		case "ArrowDown": return Math.max(0, progress - step);
+		case "PageUp": return Math.min(100, progress + largeStep);
+		case "PageDown": return Math.max(0, progress - largeStep);
+		case "Home": return 0;
+		case "End": return 100;
+		default: return null;
+	}
+};
+var handleProgressBarKeyboardSeek = ({ event, largeStep = DEFAULT_KEYBOARD_PROGRESS_LARGE_STEP, progress, seek, step = DEFAULT_KEYBOARD_PROGRESS_STEP }) => {
+	const nextProgress = getNextProgressByKey({
+		key: event.key,
+		largeStep,
+		progress,
+		step
+	});
+	if (nextProgress === null) return;
+	event.preventDefault();
+	const currentTarget = event.currentTarget;
+	const { width, x } = currentTarget.getBoundingClientRect();
+	seek({
+		clientX: x + width * nextProgress / 100,
+		currentTarget
+	});
+};
+//#endregion
+export { handleProgressBarKeyboardSeek };
+
+//# sourceMappingURL=keyboardSeek.mjs.map

package/dist/es/components/AudioPlayback/components/keyboardSeek.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardSeek.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/keyboardSeek.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\nimport type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';\n\ntype SeekParams = Parameters<AudioPlayerSeekFn>[0];\n\nconst DEFAULT_KEYBOARD_PROGRESS_STEP = 5;\nconst DEFAULT_KEYBOARD_PROGRESS_LARGE_STEP = 10;\n\nconst getNextProgressByKey = ({\n  key,\n  largeStep,\n  progress,\n  step,\n}: {\n  key: string;\n  largeStep: number;\n  progress: number;\n  step: number;\n}) => {\n  switch (key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      return Math.min(100, progress + step);\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      return Math.max(0, progress - step);\n    case 'PageUp':\n      return Math.min(100, progress + largeStep);\n    case 'PageDown':\n      return Math.max(0, progress - largeStep);\n    case 'Home':\n      return 0;\n    case 'End':\n      return 100;\n    default:\n      return null;\n  }\n};\n\nexport const handleProgressBarKeyboardSeek = ({\n  event,\n  largeStep = DEFAULT_KEYBOARD_PROGRESS_LARGE_STEP,\n  progress,\n  seek,\n  step = DEFAULT_KEYBOARD_PROGRESS_STEP,\n}: {\n  event: KeyboardEvent<HTMLDivElement>;\n  largeStep?: number;\n  progress: number;\n  seek: (params: SeekParams) => void;\n  step?: number;\n}) => {\n  const nextProgress = getNextProgressByKey({\n    key: event.key,\n    largeStep,\n    progress,\n    step,\n  });\n\n  if (nextProgress === null) return;\n\n  event.preventDefault();\n  const currentTarget = event.currentTarget;\n  const { width, x } = currentTarget.getBoundingClientRect();\n\n  seek({\n    clientX: x + (width * nextProgress) / 100,\n    currentTarget,\n  });\n};\n"],"mappings":";AAKA,IAAM,iCAAiC;AACvC,IAAM,uCAAuC;AAE7C,IAAM,wBAAwB,EAC5B,KACA,WACA,UACA,WAMI;CACJ,QAAQ,KAAR;EACE,KAAK;EACL,KAAK,WACH,OAAO,KAAK,IAAI,KAAK,WAAW,IAAI;EACtC,KAAK;EACL,KAAK,aACH,OAAO,KAAK,IAAI,GAAG,WAAW,IAAI;EACpC,KAAK,UACH,OAAO,KAAK,IAAI,KAAK,WAAW,SAAS;EAC3C,KAAK,YACH,OAAO,KAAK,IAAI,GAAG,WAAW,SAAS;EACzC,KAAK,QACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,IAAa,iCAAiC,EAC5C,OACA,YAAY,sCACZ,UACA,MACA,OAAO,qCAOH;CACJ,MAAM,eAAe,qBAAqB;EACxC,KAAK,MAAM;EACX;EACA;EACA;CACF,CAAC;CAED,IAAI,iBAAiB,MAAM;CAE3B,MAAM,eAAe;CACrB,MAAM,gBAAgB,MAAM;CAC5B,MAAM,EAAE,OAAO,MAAM,cAAc,sBAAsB;CAEzD,KAAK;EACH,SAAS,IAAK,QAAQ,eAAgB;EACtC;CACF,CAAC;AACH"}

package/dist/es/components/AudioPlayback/components/progressBarA11y.mjs

@@ -0,0 +1,19 @@
+import { formatTime } from "./formatTime.mjs";
+//#region src/components/AudioPlayback/components/progressBarA11y.ts
+var getAudioTrackSliderAriaValueText = ({ durationSeconds, progress, secondsElapsed, t }) => {
+	const normalizedProgress = Math.max(0, Math.min(100, progress));
+	if (typeof durationSeconds === "number" && Number.isFinite(durationSeconds)) {
+		const normalizedDuration = Math.max(0, durationSeconds);
+		const formattedElapsed = formatTime(typeof secondsElapsed === "number" && Number.isFinite(secondsElapsed) ? Math.max(0, Math.min(secondsElapsed, normalizedDuration)) : normalizedDuration * normalizedProgress / 100, "floor");
+		const formattedDuration = formatTime(normalizedDuration, "floor");
+		if (formattedElapsed && formattedDuration) return t("aria/Audio position {{ elapsed }} of {{ duration }}", {
+			duration: formattedDuration,
+			elapsed: formattedElapsed
+		});
+	}
+	return t("aria/Audio position {{ progress }} percent", { progress: Math.round(normalizedProgress) });
+};
+//#endregion
+export { getAudioTrackSliderAriaValueText };
+
+//# sourceMappingURL=progressBarA11y.mjs.map

package/dist/es/components/AudioPlayback/components/progressBarA11y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressBarA11y.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/progressBarA11y.ts"],"sourcesContent":["import type { TFunction } from 'i18next';\nimport { formatTime } from './formatTime';\n\ntype GetAudioTrackSliderAriaValueTextParams = {\n  durationSeconds?: number;\n  progress: number;\n  secondsElapsed?: number;\n  t: TFunction;\n};\n\nexport const getAudioTrackSliderAriaValueText = ({\n  durationSeconds,\n  progress,\n  secondsElapsed,\n  t,\n}: GetAudioTrackSliderAriaValueTextParams) => {\n  const normalizedProgress = Math.max(0, Math.min(100, progress));\n\n  if (typeof durationSeconds === 'number' && Number.isFinite(durationSeconds)) {\n    const normalizedDuration = Math.max(0, durationSeconds);\n    const elapsed =\n      typeof secondsElapsed === 'number' && Number.isFinite(secondsElapsed)\n        ? Math.max(0, Math.min(secondsElapsed, normalizedDuration))\n        : (normalizedDuration * normalizedProgress) / 100;\n    const formattedElapsed = formatTime(elapsed, 'floor');\n    const formattedDuration = formatTime(normalizedDuration, 'floor');\n\n    if (formattedElapsed && formattedDuration) {\n      return t('aria/Audio position {{ elapsed }} of {{ duration }}', {\n        duration: formattedDuration,\n        elapsed: formattedElapsed,\n      });\n    }\n  }\n\n  return t('aria/Audio position {{ progress }} percent', {\n    progress: Math.round(normalizedProgress),\n  });\n};\n"],"mappings":";;AAUA,IAAa,oCAAoC,EAC/C,iBACA,UACA,gBACA,QAC4C;CAC5C,MAAM,qBAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,QAAQ,CAAC;CAE9D,IAAI,OAAO,oBAAoB,YAAY,OAAO,SAAS,eAAe,GAAG;EAC3E,MAAM,qBAAqB,KAAK,IAAI,GAAG,eAAe;EAKtD,MAAM,mBAAmB,WAHvB,OAAO,mBAAmB,YAAY,OAAO,SAAS,cAAc,IAChE,KAAK,IAAI,GAAG,KAAK,IAAI,gBAAgB,kBAAkB,CAAC,IACvD,qBAAqB,qBAAsB,KACL,OAAO;EACpD,MAAM,oBAAoB,WAAW,oBAAoB,OAAO;EAEhE,IAAI,oBAAoB,mBACtB,OAAO,EAAE,uDAAuD;GAC9D,UAAU;GACV,SAAS;EACX,CAAC;CAEL;CAEA,OAAO,EAAE,8CAA8C,EACrD,UAAU,KAAK,MAAM,kBAAkB,EACzC,CAAC;AACH"}

package/dist/es/components/AudioPlayback/components/useInteractiveProgressBar.mjs

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/AudioPlayback/components/useInteractiveProgressBar.ts
+var getAvailableTrackWidth = (trackRoot) => {
+	if (!trackRoot) return 0;
+	const parent = trackRoot.parentElement;
+	if (!parent) return trackRoot.getBoundingClientRect().width;
+	const parentWidth = parent.getBoundingClientRect().width;
+	const computedStyle = window.getComputedStyle(parent);
+	const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+	const rawColumnGap = computedStyle.columnGap || computedStyle.gap;
+	const parsedColumnGap = parseFloat(rawColumnGap);
+	const totalGapsWidth = (Number.isNaN(parsedColumnGap) ? 0 : parsedColumnGap) * Math.max(0, parent.children.length - 1);
+	const siblingsWidth = Array.from(parent.children).reduce((total, child) => {
+		if (child === trackRoot) return total;
+		return total + child.getBoundingClientRect().width;
+	}, 0);
+	return Math.max(0, parentWidth - paddingLeft - paddingRight - totalGapsWidth - siblingsWidth);
+};
+var useInteractiveProgressBar = ({ progress = 0, seek }) => {
+	const isDragging = useRef(false);
+	const [availableTrackWidth, setAvailableTrackWidth] = useState(0);
+	const [root, setRoot] = useState(null);
+	const [progressIndicator, setProgressIndicator] = useState(null);
+	const lastIndicatorWidth = useRef(0);
+	const handleDragStart = (e) => {
+		e.preventDefault();
+		if (!progressIndicator) return;
+		isDragging.current = true;
+		progressIndicator.style.cursor = "grabbing";
+		root?.classList.add("str-chat__wave-progress-bar__track--dragging");
+	};
+	const handleDrag = (e) => {
+		if (!isDragging.current) return;
+		seek({ ...e });
+	};
+	const handleDragStop = useCallback(() => {
+		if (!progressIndicator) return;
+		isDragging.current = false;
+		progressIndicator.style.removeProperty("cursor");
+		root?.classList.remove("str-chat__wave-progress-bar__track--dragging");
+	}, [progressIndicator, root]);
+	useEffect(() => {
+		document.addEventListener("pointerup", handleDragStop);
+		return () => {
+			document.removeEventListener("pointerup", handleDragStop);
+		};
+	}, [handleDragStop]);
+	useEffect(() => {
+		if (!root || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => {
+			setAvailableTrackWidth(getAvailableTrackWidth(entry.target) || entry.contentRect.width);
+		});
+		observer.observe(root);
+		return () => {
+			observer.disconnect();
+		};
+	}, [root]);
+	useLayoutEffect(() => {
+		if (root) setAvailableTrackWidth(getAvailableTrackWidth(root));
+		if (progressIndicator) lastIndicatorWidth.current = progressIndicator.getBoundingClientRect().width;
+	}, [progressIndicator, root]);
+	return {
+		availableTrackWidth,
+		handleDrag,
+		handleDragStart,
+		handleDragStop,
+		indicatorLeft: progress === 0 || !progressIndicator ? 0 : Math.max(0, availableTrackWidth - lastIndicatorWidth.current) * (progress / 100) + 1,
+		root,
+		setProgressIndicator,
+		setRoot
+	};
+};
+//#endregion
+export { useInteractiveProgressBar };
+
+//# sourceMappingURL=useInteractiveProgressBar.mjs.map

package/dist/es/components/AudioPlayback/components/useInteractiveProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractiveProgressBar.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/components/useInteractiveProgressBar.ts"],"sourcesContent":["import type { PointerEventHandler } from 'react';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';\n\ntype SeekParams = Parameters<AudioPlayerSeekFn>[0];\n\ntype UseInteractiveProgressBarParams = {\n  progress?: number;\n  seek: (params: SeekParams) => void;\n};\n\nconst getAvailableTrackWidth = (trackRoot: HTMLDivElement | null) => {\n  if (!trackRoot) return 0;\n\n  const parent = trackRoot.parentElement;\n  if (!parent) return trackRoot.getBoundingClientRect().width;\n\n  const parentWidth = parent.getBoundingClientRect().width;\n  const computedStyle = window.getComputedStyle(parent);\n  const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n  const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n  const rawColumnGap = computedStyle.columnGap || computedStyle.gap;\n  const parsedColumnGap = parseFloat(rawColumnGap);\n  const columnGap = Number.isNaN(parsedColumnGap) ? 0 : parsedColumnGap;\n  const gapCount = Math.max(0, parent.children.length - 1);\n  const totalGapsWidth = columnGap * gapCount;\n  const siblingsWidth = Array.from(parent.children).reduce((total, child) => {\n    if (child === trackRoot) return total;\n    return total + child.getBoundingClientRect().width;\n  }, 0);\n\n  return Math.max(\n    0,\n    parentWidth - paddingLeft - paddingRight - totalGapsWidth - siblingsWidth,\n  );\n};\n\nexport const useInteractiveProgressBar = ({\n  progress = 0,\n  seek,\n}: UseInteractiveProgressBarParams) => {\n  const isDragging = useRef(false);\n  const [availableTrackWidth, setAvailableTrackWidth] = useState(0);\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  const [progressIndicator, setProgressIndicator] = useState<HTMLDivElement | null>(null);\n  const lastIndicatorWidth = useRef(0);\n\n  const handleDragStart: PointerEventHandler<HTMLDivElement> = (e) => {\n    e.preventDefault();\n    if (!progressIndicator) return;\n\n    isDragging.current = true;\n    progressIndicator.style.cursor = 'grabbing';\n    root?.classList.add('str-chat__wave-progress-bar__track--dragging');\n  };\n\n  const handleDrag: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!isDragging.current) return;\n    // Snapshot the event because seek is throttled.\n    seek({ ...e });\n  };\n\n  const handleDragStop = useCallback(() => {\n    if (!progressIndicator) return;\n\n    isDragging.current = false;\n    progressIndicator.style.removeProperty('cursor');\n    root?.classList.remove('str-chat__wave-progress-bar__track--dragging');\n  }, [progressIndicator, root]);\n\n  useEffect(() => {\n    document.addEventListener('pointerup', handleDragStop);\n\n    return () => {\n      document.removeEventListener('pointerup', handleDragStop);\n    };\n  }, [handleDragStop]);\n\n  useEffect(() => {\n    if (!root || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(([entry]) => {\n      const nextAvailableWidth = getAvailableTrackWidth(entry.target as HTMLDivElement);\n      setAvailableTrackWidth(nextAvailableWidth || entry.contentRect.width);\n    });\n\n    observer.observe(root);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [root]);\n\n  useLayoutEffect(() => {\n    if (root) {\n      setAvailableTrackWidth(getAvailableTrackWidth(root));\n    }\n\n    if (progressIndicator) {\n      lastIndicatorWidth.current = progressIndicator.getBoundingClientRect().width;\n    }\n  }, [progressIndicator, root]);\n\n  const indicatorLeft =\n    progress === 0 || !progressIndicator\n      ? 0\n      : Math.max(0, availableTrackWidth - lastIndicatorWidth.current) * (progress / 100) +\n        1;\n\n  return {\n    availableTrackWidth,\n    handleDrag,\n    handleDragStart,\n    handleDragStop,\n    indicatorLeft,\n    root,\n    setProgressIndicator,\n    setRoot,\n  };\n};\n"],"mappings":";;AAWA,IAAM,0BAA0B,cAAqC;CACnE,IAAI,CAAC,WAAW,OAAO;CAEvB,MAAM,SAAS,UAAU;CACzB,IAAI,CAAC,QAAQ,OAAO,UAAU,sBAAsB,CAAC,CAAC;CAEtD,MAAM,cAAc,OAAO,sBAAsB,CAAC,CAAC;CACnD,MAAM,gBAAgB,OAAO,iBAAiB,MAAM;CACpD,MAAM,cAAc,WAAW,cAAc,WAAW,KAAK;CAC7D,MAAM,eAAe,WAAW,cAAc,YAAY,KAAK;CAC/D,MAAM,eAAe,cAAc,aAAa,cAAc;CAC9D,MAAM,kBAAkB,WAAW,YAAY;CAG/C,MAAM,kBAFY,OAAO,MAAM,eAAe,IAAI,IAAI,mBACrC,KAAK,IAAI,GAAG,OAAO,SAAS,SAAS,CACnB;CACnC,MAAM,gBAAgB,MAAM,KAAK,OAAO,QAAQ,CAAC,CAAC,QAAQ,OAAO,UAAU;EACzE,IAAI,UAAU,WAAW,OAAO;EAChC,OAAO,QAAQ,MAAM,sBAAsB,CAAC,CAAC;CAC/C,GAAG,CAAC;CAEJ,OAAO,KAAK,IACV,GACA,cAAc,cAAc,eAAe,iBAAiB,aAC9D;AACF;AAEA,IAAa,6BAA6B,EACxC,WAAW,GACX,WACqC;CACrC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,CAAC;CAChE,MAAM,CAAC,MAAM,WAAW,SAAgC,IAAI;CAC5D,MAAM,CAAC,mBAAmB,wBAAwB,SAAgC,IAAI;CACtF,MAAM,qBAAqB,OAAO,CAAC;CAEnC,MAAM,mBAAwD,MAAM;EAClE,EAAE,eAAe;EACjB,IAAI,CAAC,mBAAmB;EAExB,WAAW,UAAU;EACrB,kBAAkB,MAAM,SAAS;EACjC,MAAM,UAAU,IAAI,8CAA8C;CACpE;CAEA,MAAM,cAAmD,MAAM;EAC7D,IAAI,CAAC,WAAW,SAAS;EAEzB,KAAK,EAAE,GAAG,EAAE,CAAC;CACf;CAEA,MAAM,iBAAiB,kBAAkB;EACvC,IAAI,CAAC,mBAAmB;EAExB,WAAW,UAAU;EACrB,kBAAkB,MAAM,eAAe,QAAQ;EAC/C,MAAM,UAAU,OAAO,8CAA8C;CACvE,GAAG,CAAC,mBAAmB,IAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,iBAAiB,aAAa,cAAc;EAErD,aAAa;GACX,SAAS,oBAAoB,aAAa,cAAc;EAC1D;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,gBAAgB;EACd,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EAEpD,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAE/C,uBAD2B,uBAAuB,MAAM,MACjC,KAAsB,MAAM,YAAY,KAAK;EACtE,CAAC;EAED,SAAS,QAAQ,IAAI;EAErB,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,IAAI,CAAC;CAET,sBAAsB;EACpB,IAAI,MACF,uBAAuB,uBAAuB,IAAI,CAAC;EAGrD,IAAI,mBACF,mBAAmB,UAAU,kBAAkB,sBAAsB,CAAC,CAAC;CAE3E,GAAG,CAAC,mBAAmB,IAAI,CAAC;CAQ5B,OAAO;EACL;EACA;EACA;EACA;EACA,eAVA,aAAa,KAAK,CAAC,oBACf,IACA,KAAK,IAAI,GAAG,sBAAsB,mBAAmB,OAAO,KAAK,WAAW,OAC5E;EAQJ;EACA;EACA;CACF;AACF"}

package/dist/es/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.mjs

@@ -0,0 +1,33 @@
+//#region src/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.ts
+var SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS = 1e3;
+var audioPlayerNotificationsPluginFactory = ({ addNotification, panel = "channel", t }) => {
+	const errors = {
+		"failed-to-start": new Error(t("Failed to play the recording")),
+		"not-playable": new Error(t("Recording format is not supported and cannot be reproduced")),
+		"seek-not-supported": new Error(t("Cannot seek in the recording"))
+	};
+	let lastSeekNotSupportedNotificationAt;
+	return {
+		id: "AudioPlayerNotificationsPlugin",
+		onError: ({ errCode, error: e }) => {
+			if (errCode === "seek-not-supported") {
+				const now = Date.now();
+				if (typeof lastSeekNotSupportedNotificationAt === "number" && now - lastSeekNotSupportedNotificationAt < SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS) return;
+				lastSeekNotSupportedNotificationAt = now;
+			}
+			const error = (errCode && errors[errCode]) ?? e ?? new Error(t("Error reproducing the recording"));
+			addNotification({
+				emitter: "AudioPlayer",
+				error,
+				message: error.message,
+				severity: "error",
+				targetPanels: [panel],
+				type: "browser:audio:playback:error"
+			});
+		}
+	};
+};
+//#endregion
+export { audioPlayerNotificationsPluginFactory };
+
+//# sourceMappingURL=AudioPlayerNotificationsPlugin.mjs.map

package/dist/es/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayerNotificationsPlugin.mjs","names":[],"sources":["../../../../../src/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.ts"],"sourcesContent":["import type { AudioPlayerPlugin } from './AudioPlayerPlugin';\nimport { type AudioPlayerErrorCode } from '../AudioPlayer';\nimport type { TFunction } from 'i18next';\nimport type { AddNotification } from '../../Notifications/hooks/useNotificationApi';\nimport type { NotificationTargetPanel } from '../../Notifications/notificationTarget';\n\nconst SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS = 1000;\n\nexport const audioPlayerNotificationsPluginFactory = ({\n  addNotification,\n  panel = 'channel',\n  t,\n}: {\n  addNotification: AddNotification;\n  panel?: NotificationTargetPanel;\n  t: TFunction;\n}): AudioPlayerPlugin => {\n  const errors: Record<AudioPlayerErrorCode, Error> = {\n    'failed-to-start': new Error(t('Failed to play the recording')),\n    'not-playable': new Error(\n      t('Recording format is not supported and cannot be reproduced'),\n    ),\n    'seek-not-supported': new Error(t('Cannot seek in the recording')),\n  };\n  let lastSeekNotSupportedNotificationAt: number | undefined;\n\n  return {\n    id: 'AudioPlayerNotificationsPlugin',\n    onError: ({ errCode, error: e }) => {\n      if (errCode === 'seek-not-supported') {\n        const now = Date.now();\n\n        if (\n          typeof lastSeekNotSupportedNotificationAt === 'number' &&\n          now - lastSeekNotSupportedNotificationAt <\n            SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS\n        ) {\n          return;\n        }\n\n        lastSeekNotSupportedNotificationAt = now;\n      }\n\n      const error =\n        (errCode && errors[errCode]) ??\n        e ??\n        new Error(t('Error reproducing the recording'));\n\n      addNotification({\n        emitter: 'AudioPlayer',\n        error,\n        message: error.message,\n        severity: 'error',\n        targetPanels: [panel],\n        type: 'browser:audio:playback:error',\n      });\n    },\n  };\n};\n"],"mappings":";AAMA,IAAM,uDAAuD;AAE7D,IAAa,yCAAyC,EACpD,iBACA,QAAQ,WACR,QAKuB;CACvB,MAAM,SAA8C;EAClD,mBAAmB,IAAI,MAAM,EAAE,8BAA8B,CAAC;EAC9D,gBAAgB,IAAI,MAClB,EAAE,4DAA4D,CAChE;EACA,sBAAsB,IAAI,MAAM,EAAE,8BAA8B,CAAC;CACnE;CACA,IAAI;CAEJ,OAAO;EACL,IAAI;EACJ,UAAU,EAAE,SAAS,OAAO,QAAQ;GAClC,IAAI,YAAY,sBAAsB;IACpC,MAAM,MAAM,KAAK,IAAI;IAErB,IACE,OAAO,uCAAuC,YAC9C,MAAM,qCACJ,sDAEF;IAGF,qCAAqC;GACvC;GAEA,MAAM,SACH,WAAW,OAAO,aACnB,KACA,IAAI,MAAM,EAAE,iCAAiC,CAAC;GAEhD,gBAAgB;IACd,SAAS;IACT;IACA,SAAS,MAAM;IACf,UAAU;IACV,cAAc,CAAC,KAAK;IACpB,MAAM;GACR,CAAC;EACH;CACF;AACF"}