stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/Attachment/VideoAttachment.mjs

@@ -0,0 +1,56 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { getAttachmentPreviewUrl, hasPendingUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { getCssDimensionsVariables } from "./utils.mjs";
+import { VideoPlayer } from "../VideoPlayer/VideoPlayer.mjs";
+import { VideoThumbnail } from "../VideoPlayer/VideoThumbnail.mjs";
+import { useLocalVideoDimensions } from "./hooks/useLocalVideoDimensions.mjs";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/VideoAttachment.tsx
+var VideoAttachment = ({ attachment, VideoPlayer: VideoPlayer$1 = VideoPlayer }) => {
+	const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
+	const videoElement = useRef(null);
+	const [attachmentConfiguration, setAttachmentConfiguration] = useState();
+	const [showVideo, setShowVideo] = React.useState(() => !shouldGenerateVideoThumbnail || hasPendingUploadState(attachment));
+	const [playbackRequested, setPlaybackRequested] = React.useState(false);
+	const isUploading = hasPendingUploadState(attachment);
+	useLayoutEffect(() => {
+		if (videoElement.current && videoAttachmentSizeHandler) setAttachmentConfiguration(videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail));
+	}, [
+		videoElement,
+		videoAttachmentSizeHandler,
+		attachment,
+		shouldGenerateVideoThumbnail
+	]);
+	const renderThumbnailFirst = Boolean(attachment.thumb_url && shouldGenerateVideoThumbnail);
+	const localDimensions = useLocalVideoDimensions(isUploading ? getAttachmentPreviewUrl(attachment) : void 0);
+	const dimensionVariables = localDimensions ? {
+		"--original-height": localDimensions.height,
+		"--original-width": localDimensions.width
+	} : getCssDimensionsVariables(attachment.thumb_url || "");
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__player-wrapper", { "str-chat__player-wrapper--uploading": isUploading && !localDimensions }),
+		"data-testid": "video-wrapper",
+		ref: videoElement,
+		style: dimensionVariables,
+		children: renderThumbnailFirst && !showVideo ? /* @__PURE__ */ jsx(VideoThumbnail, {
+			alt: attachment.title,
+			"data-testid": "image-test",
+			onPlay: () => {
+				setPlaybackRequested(true);
+				setShowVideo(true);
+			},
+			src: attachment.thumb_url,
+			title: attachment.title
+		}) : /* @__PURE__ */ jsx(VideoPlayer$1, {
+			isPlaying: playbackRequested,
+			thumbnailUrl: attachmentConfiguration?.thumbUrl,
+			videoUrl: getAttachmentPreviewUrl(attachment, attachmentConfiguration?.url)
+		})
+	});
+};
+//#endregion
+export { VideoAttachment };
+
+//# sourceMappingURL=VideoAttachment.mjs.map

package/dist/es/components/Attachment/VideoAttachment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/VideoAttachment.tsx"],"sourcesContent":["import type { VideoAttachment as VideoAttachmentType } from 'stream-chat';\nimport { useChannelStateContext } from '../../context';\nimport React, { type ComponentType, useLayoutEffect, useRef, useState } from 'react';\nimport type { VideoAttachmentConfiguration } from '../../types/types';\nimport { getCssDimensionsVariables } from './utils';\nimport type { VideoPlayerProps } from '../VideoPlayer';\nimport { VideoPlayer as DefaultVideoPlayer } from '../VideoPlayer';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\nimport clsx from 'clsx';\nimport {\n  getAttachmentPreviewUrl,\n  hasPendingUploadState,\n} from './hooks/useAttachmentUploadState';\nimport { useLocalVideoDimensions } from './hooks/useLocalVideoDimensions';\n\nexport type VideoAttachmentProps = {\n  attachment: VideoAttachmentType;\n  VideoPlayer?: ComponentType<VideoPlayerProps>;\n};\n\nexport const VideoAttachment = ({\n  attachment,\n  VideoPlayer = DefaultVideoPlayer,\n}: VideoAttachmentProps) => {\n  const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } =\n    useChannelStateContext();\n  const videoElement = useRef<HTMLDivElement>(null);\n  const [attachmentConfiguration, setAttachmentConfiguration] =\n    useState<VideoAttachmentConfiguration>();\n  // A video that mounted while uploading has been showing its player all along, so it stays on\n  // the player once the upload lands. Falling back to the thumbnail would swap the rendered\n  // element twice — once when `thumb_url` arrives, once when the user clicks play — and each swap\n  // resizes the bubble, because the bubble is `fit-content` and the three renderings (local\n  // `<video>`, CDN thumbnail `<img>`, CDN `<video>`) contribute different intrinsic widths.\n  const [showVideo, setShowVideo] = React.useState(\n    () => !shouldGenerateVideoThumbnail || hasPendingUploadState(attachment),\n  );\n  // Only a click on the thumbnail's play button asks for playback. Kept separate from\n  // `showVideo`, which is also true for a video that never had a thumbnail to click.\n  const [playbackRequested, setPlaybackRequested] = React.useState(false);\n  // Structural: the bytes are not on the CDN, so there is nothing to play — independent of\n  // whether a request happens to be running this instant.\n  const isUploading = hasPendingUploadState(attachment);\n\n  useLayoutEffect(() => {\n    if (videoElement.current && videoAttachmentSizeHandler) {\n      const config = videoAttachmentSizeHandler(\n        attachment,\n        videoElement.current,\n        shouldGenerateVideoThumbnail,\n      );\n      setAttachmentConfiguration(config);\n    }\n  }, [\n    videoElement,\n    videoAttachmentSizeHandler,\n    attachment,\n    shouldGenerateVideoThumbnail,\n  ]);\n\n  const renderThumbnailFirst = Boolean(\n    attachment.thumb_url && shouldGenerateVideoThumbnail,\n  );\n\n  // While the upload is in flight there is no CDN `thumb_url` to read `oh`/`ow` from, so the box\n  // would lay out from the 1000000x1000000 fallback and then resize once the real dimensions\n  // arrive. The local file knows them already.\n  const localDimensions = useLocalVideoDimensions(\n    isUploading ? getAttachmentPreviewUrl(attachment) : undefined,\n  );\n  const dimensionVariables = localDimensions\n    ? {\n        '--original-height': localDimensions.height,\n        '--original-width': localDimensions.width,\n      }\n    : getCssDimensionsVariables(attachment.thumb_url || '');\n\n  // todo: handle failed thumbnail loading\n  return (\n    <div\n      className={clsx('str-chat__player-wrapper', {\n        // Only until the dimensions are known — the class lets the element lay out at its own\n        // aspect ratio instead of the square the fallback would produce.\n        'str-chat__player-wrapper--uploading': isUploading && !localDimensions,\n      })}\n      data-testid='video-wrapper'\n      ref={videoElement}\n      style={dimensionVariables}\n    >\n      {renderThumbnailFirst && !showVideo ? (\n        <VideoThumbnail\n          alt={attachment.title}\n          data-testid='image-test'\n          onPlay={() => {\n            setPlaybackRequested(true);\n            setShowVideo(true);\n          }}\n          src={attachment.thumb_url}\n          title={attachment.title}\n        />\n      ) : (\n        <VideoPlayer\n          // Playback stays available while the upload runs: the local blob plays, and every\n          // message-list widget behaves this way (audio too), as does stream-chat-react-native.\n          // The progress overlay is positioned clear of the transport controls.\n          //\n          // Autoplay only when the user asked for it by clicking the thumbnail. This used to be\n          // `renderThumbnailFirst`, which stands for \"a thumbnail exists\" — so a video watched\n          // from its local blob started playing again by itself the moment the upload finished\n          // and `thumb_url` arrived.\n          isPlaying={playbackRequested}\n          thumbnailUrl={attachmentConfiguration?.thumbUrl}\n          // Falls back to the local blob preview while the upload is still in flight.\n          videoUrl={getAttachmentPreviewUrl(attachment, attachmentConfiguration?.url)}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,mBAAmB,EAC9B,YACA,aAAA,gBAAc,kBACY;CAC1B,MAAM,EAAE,8BAA8B,+BACpC,uBAAuB;CACzB,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,yBAAyB,8BAC9B,SAAuC;CAMzC,MAAM,CAAC,WAAW,gBAAgB,MAAM,eAChC,CAAC,gCAAgC,sBAAsB,UAAU,CACzE;CAGA,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAS,KAAK;CAGtE,MAAM,cAAc,sBAAsB,UAAU;CAEpD,sBAAsB;EACpB,IAAI,aAAa,WAAW,4BAM1B,2BALe,2BACb,YACA,aAAa,SACb,4BAEyB,CAAM;CAErC,GAAG;EACD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,uBAAuB,QAC3B,WAAW,aAAa,4BAC1B;CAKA,MAAM,kBAAkB,wBACtB,cAAc,wBAAwB,UAAU,IAAI,KAAA,CACtD;CACA,MAAM,qBAAqB,kBACvB;EACE,qBAAqB,gBAAgB;EACrC,oBAAoB,gBAAgB;CACtC,IACA,0BAA0B,WAAW,aAAa,EAAE;CAGxD,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,4BAA4B,EAG1C,uCAAuC,eAAe,CAAC,gBACzD,CAAC;EACD,eAAY;EACZ,KAAK;EACL,OAAO;YAEN,wBAAwB,CAAC,YACxB,oBAAC,gBAAD;GACE,KAAK,WAAW;GAChB,eAAY;GACZ,cAAc;IACZ,qBAAqB,IAAI;IACzB,aAAa,IAAI;GACnB;GACA,KAAK,WAAW;GAChB,OAAO,WAAW;EACnB,CAAA,IAED,oBAAC,eAAD;GASE,WAAW;GACX,cAAc,yBAAyB;GAEvC,UAAU,wBAAwB,YAAY,yBAAyB,GAAG;EAC3E,CAAA;CAEA,CAAA;AAET"}

package/dist/es/components/Attachment/VisibilityDisclaimer.mjs

@@ -0,0 +1,17 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/VisibilityDisclaimer.tsx
+var VisibilityDisclaimer = () => {
+	const { IconEyeFill } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__visibility-disclaimer",
+		children: [/* @__PURE__ */ jsx(IconEyeFill, {}), t("Only visible to you")]
+	});
+};
+//#endregion
+export { VisibilityDisclaimer };
+
+//# sourceMappingURL=VisibilityDisclaimer.mjs.map

package/dist/es/components/Attachment/VisibilityDisclaimer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisibilityDisclaimer.mjs","names":[],"sources":["../../../../src/components/Attachment/VisibilityDisclaimer.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport const VisibilityDisclaimer = () => {\n  const { IconEyeFill } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__visibility-disclaimer'>\n      <IconEyeFill />\n      {t('Only visible to you')}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAGA,IAAa,6BAA6B;CACxC,MAAM,EAAE,gBAAgB,yBAAyB;CAEjD,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,aAAD,CAAc,CAAA,GACb,EAAE,qBAAqB,CACrB;;AAET"}

package/dist/es/components/Attachment/VoiceRecording.mjs

@@ -0,0 +1,134 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { PlayButton } from "../Button/PlayButton.mjs";
+import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
+import { getAttachmentPreviewUrl, useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
+import { useAudioPlayer } from "../AudioPlayback/WithAudioPlayback.mjs";
+import { FileIcon } from "../FileIcon/FileIcon.mjs";
+import { DurationDisplay } from "../AudioPlayback/components/DurationDisplay.mjs";
+import { PlaybackRateButton } from "../AudioPlayback/components/PlaybackRateButton.mjs";
+import { WaveProgressBar } from "../AudioPlayback/components/WaveProgressBar.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/VoiceRecording.tsx
+var rootClassName = "str-chat__message-attachment__voice-recording-widget";
+var audioPlayerStateSelector = (state) => ({
+	canPlayRecord: state.canPlayRecord,
+	durationSeconds: state.durationSeconds,
+	isPlaying: state.isPlaying,
+	playbackRate: state.currentPlaybackRate,
+	progress: state.progressPercent,
+	secondsElapsed: state.secondsElapsed
+});
+var VoiceRecordingPlayerUI = ({ attachment, audioPlayer }) => {
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$1 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$1 = FileSizeIndicator } = useComponentContext();
+	const { isUploading } = useAttachmentUploadState(attachment);
+	const { t } = useTranslationContext();
+	const { canPlayRecord, durationSeconds, isPlaying, playbackRate, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		"data-testid": "voice-recording-widget",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment__voice-recording-widget__play-button-container",
+				children: /* @__PURE__ */ jsx(PlayButton, {
+					isPlaying: !!isPlaying,
+					onClick: audioPlayer.togglePlay
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment__voice-recording-widget__metadata",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__message-attachment__voice-recording-widget__audio-state",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "str-chat__message-attachment__voice-recording-widget__timer",
+						children: isUploading ? /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$1, { attachment }) : durationSeconds ? /* @__PURE__ */ jsx(DurationDisplay, {
+							duration: durationSeconds,
+							isPlaying: !!isPlaying,
+							secondsElapsed,
+							showRemaining: true
+						}) : /* @__PURE__ */ jsx(FileSizeIndicator$1, {
+							fileSize: audioPlayer.fileSize,
+							maximumFractionDigits: 0
+						})
+					}), /* @__PURE__ */ jsx(WaveProgressBar, {
+						durationSeconds,
+						progress,
+						secondsElapsed,
+						seek: audioPlayer.seek,
+						waveformData: audioPlayer.waveformData || []
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment__voice-recording-widget__right-section",
+				children: /* @__PURE__ */ jsxs(PlaybackRateButton, {
+					"aria-label": t("Playback speed {{ rate }}x", { rate: playbackRate?.toString() ?? "1" }),
+					disabled: !canPlayRecord,
+					onClick: audioPlayer.increasePlaybackRate,
+					children: ["x", playbackRate?.toString()]
+				})
+			})
+		]
+	});
+};
+var VoiceRecordingPlayer = ({ attachment, playbackRates }) => {
+	const { t } = useTranslationContext();
+	const { asset_url, duration = 0, file_size, mime_type, title = t("Voice message"), waveform_data } = attachment;
+	/**
+	* Introducing message context. This could be breaking change, therefore the fallback to {} is provided.
+	* If this component is used outside the message context, then there will be no audio player namespacing
+	* => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.
+	*
+	* Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen
+	* with the default SDK components, but can be done with custom API calls.In this case all the Audio
+	* widgets will share the state.
+	*/
+	const { message, threadList } = useMessageContext() ?? {};
+	const audioPlayer = useAudioPlayer({
+		durationSeconds: duration ?? 0,
+		fileSize: file_size,
+		mimeType: mime_type,
+		playbackRates,
+		requester: message?.id && `${threadList ? message.parent_id ?? message.id : ""}${message.id}`,
+		src: getAttachmentPreviewUrl(attachment, asset_url),
+		title,
+		waveformData: waveform_data
+	});
+	return audioPlayer ? /* @__PURE__ */ jsx(VoiceRecordingPlayerUI, {
+		attachment,
+		audioPlayer
+	}) : null;
+};
+var QuotedVoiceRecording = ({ attachment }) => {
+	const { FileSizeIndicator: FileSizeIndicator$2 = FileSizeIndicator } = useComponentContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		"data-testid": "quoted-voice-recording-widget",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__message-attachment__voice-recording-widget__metadata",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment__voice-recording-widget__audio-state",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment__voice-recording-widget__timer",
+					children: attachment.duration ? /* @__PURE__ */ jsx(DurationDisplay, {
+						duration: attachment.duration,
+						isPlaying: false,
+						secondsElapsed: void 0
+					}) : /* @__PURE__ */ jsx(FileSizeIndicator$2, {
+						fileSize: attachment.file_size,
+						maximumFractionDigits: 0
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx(FileIcon, { mimeType: attachment.mime_type })]
+	});
+};
+var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ jsx(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ jsx(VoiceRecordingPlayer, { attachment });
+//#endregion
+export { QuotedVoiceRecording, VoiceRecording, VoiceRecordingPlayer };
+
+//# sourceMappingURL=VoiceRecording.mjs.map

package/dist/es/components/Attachment/VoiceRecording.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceRecording.mjs","names":[],"sources":["../../../../src/components/Attachment/VoiceRecording.tsx"],"sourcesContent":["import React from 'react';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n} from './components';\nimport {\n  getAttachmentPreviewUrl,\n  useAttachmentUploadState,\n} from './hooks/useAttachmentUploadState';\nimport { FileIcon } from '../FileIcon';\nimport {\n  useComponentContext,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport {\n  type AudioPlayer,\n  type AudioPlayerState,\n  DurationDisplay,\n  PlaybackRateButton,\n  WaveProgressBar,\n} from '../AudioPlayback';\nimport { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../store';\nimport { PlayButton } from '../Button';\n\nconst rootClassName = 'str-chat__message-attachment__voice-recording-widget';\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n  canPlayRecord: state.canPlayRecord,\n  durationSeconds: state.durationSeconds,\n  isPlaying: state.isPlaying,\n  playbackRate: state.currentPlaybackRate,\n  progress: state.progressPercent,\n  secondsElapsed: state.secondsElapsed,\n});\n\ntype VoiceRecordingPlayerUIProps = {\n  audioPlayer: AudioPlayer;\n  attachment?: Attachment;\n};\n\n// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI\nconst VoiceRecordingPlayerUI = ({\n  attachment,\n  audioPlayer,\n}: VoiceRecordingPlayerUIProps) => {\n  const {\n    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n    FileSizeIndicator = DefaultFileSizeIndicator,\n  } = useComponentContext();\n  const { isUploading } = useAttachmentUploadState(attachment);\n  const { t } = useTranslationContext();\n  const {\n    canPlayRecord,\n    durationSeconds,\n    isPlaying,\n    playbackRate,\n    progress,\n    secondsElapsed,\n  } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n  return (\n    <div className={rootClassName} data-testid='voice-recording-widget'>\n      <div className='str-chat__message-attachment__voice-recording-widget__play-button-container'>\n        <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />\n      </div>\n      <div className='str-chat__message-attachment__voice-recording-widget__metadata'>\n        <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>\n          <div className='str-chat__message-attachment__voice-recording-widget__timer'>\n            {/*\n              While uploading, the upload progress takes this slot. It has to outrank the\n              duration: `MediaRecorderController` stamps `duration` on every recording before it\n              is ever uploaded, so checking the duration first meant an uploading voice message\n              showed no upload indication at all.\n            */}\n            {isUploading ? (\n              <AttachmentUploadProgressIndicator attachment={attachment} />\n            ) : durationSeconds ? (\n              <DurationDisplay\n                duration={durationSeconds}\n                isPlaying={!!isPlaying}\n                secondsElapsed={secondsElapsed}\n                showRemaining\n              />\n            ) : (\n              <FileSizeIndicator\n                fileSize={audioPlayer.fileSize}\n                maximumFractionDigits={0}\n              />\n            )}\n          </div>\n          <WaveProgressBar\n            durationSeconds={durationSeconds}\n            progress={progress}\n            secondsElapsed={secondsElapsed}\n            seek={audioPlayer.seek}\n            waveformData={audioPlayer.waveformData || []}\n          />\n        </div>\n      </div>\n      <div className='str-chat__message-attachment__voice-recording-widget__right-section'>\n        <PlaybackRateButton\n          aria-label={t('Playback speed {{ rate }}x', {\n            rate: playbackRate?.toString() ?? '1',\n          })}\n          disabled={!canPlayRecord}\n          onClick={audioPlayer.increasePlaybackRate}\n        >\n          x{playbackRate?.toString()}\n        </PlaybackRateButton>\n      </div>\n    </div>\n  );\n};\n\nexport type VoiceRecordingPlayerProps = Pick<VoiceRecordingProps, 'attachment'> & {\n  /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */\n  playbackRates?: number[];\n};\n\nexport const VoiceRecordingPlayer = ({\n  attachment,\n  playbackRates,\n}: VoiceRecordingPlayerProps) => {\n  const { t } = useTranslationContext();\n  const {\n    asset_url,\n    duration = 0,\n    file_size,\n    mime_type,\n    title = t('Voice message'),\n    waveform_data,\n  } = attachment;\n\n  /**\n   * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n   * If this component is used outside the message context, then there will be no audio player namespacing\n   * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n   *\n   * Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n   * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n   * widgets will share the state.\n   */\n  const { message, threadList } = useMessageContext() ?? {};\n\n  const audioPlayer = useAudioPlayer({\n    durationSeconds: duration ?? 0,\n    fileSize: file_size,\n    mimeType: mime_type,\n    playbackRates,\n    requester:\n      message?.id &&\n      `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,\n    // Falls back to the local blob preview while the upload is still in flight.\n    src: getAttachmentPreviewUrl(attachment, asset_url),\n    title,\n    waveformData: waveform_data,\n  });\n\n  return audioPlayer ? (\n    <VoiceRecordingPlayerUI attachment={attachment} audioPlayer={audioPlayer} />\n  ) : null;\n};\n\nexport type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;\n\nexport const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {\n  const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();\n  return (\n    <div className={rootClassName} data-testid='quoted-voice-recording-widget'>\n      <div className='str-chat__message-attachment__voice-recording-widget__metadata'>\n        <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>\n          <div className='str-chat__message-attachment__voice-recording-widget__timer'>\n            {attachment.duration ? (\n              <DurationDisplay\n                duration={attachment.duration}\n                isPlaying={false}\n                secondsElapsed={undefined}\n              />\n            ) : (\n              <FileSizeIndicator\n                fileSize={attachment.file_size}\n                maximumFractionDigits={0}\n              />\n            )}\n          </div>\n        </div>\n      </div>\n      <FileIcon mimeType={attachment.mime_type} />\n    </div>\n  );\n};\n\nexport type VoiceRecordingProps = {\n  /** The attachment object from the message's attachment list. */\n  attachment: Attachment;\n  /** A boolean flag to signal whether the attachment will be rendered inside the quoted reply. */\n  isQuoted?: boolean;\n};\n\nexport const VoiceRecording = ({ attachment, isQuoted }: VoiceRecordingProps) =>\n  isQuoted ? (\n    <QuotedVoiceRecording attachment={attachment} />\n  ) : (\n    <VoiceRecordingPlayer attachment={attachment} />\n  );\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,IAAM,gBAAgB;AAEtB,IAAM,4BAA4B,WAA6B;CAC7D,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACvB,WAAW,MAAM;CACjB,cAAc,MAAM;CACpB,UAAU,MAAM;CAChB,gBAAgB,MAAM;AACxB;AAQA,IAAM,0BAA0B,EAC9B,YACA,kBACiC;CACjC,MAAM,EACJ,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAC3D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,eACA,iBACA,WACA,cACA,UACA,mBACE,cAAc,aAAa,OAAO,wBAAwB,KAAK,CAAC;CAEpE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,eAAY;YAA3C;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,YAAD;KAAY,WAAW,CAAC,CAAC;KAAW,SAAS,YAAY;IAAa,CAAA;GACnE,CAAA;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAOZ,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAC1D,kBACF,oBAAC,iBAAD;OACE,UAAU;OACV,WAAW,CAAC,CAAC;OACG;OAChB,eAAA;MACD,CAAA,IAED,oBAAC,qBAAD;OACE,UAAU,YAAY;OACtB,uBAAuB;MACxB,CAAA;KAEA,CAAA,GACL,oBAAC,iBAAD;MACmB;MACP;MACM;MAChB,MAAM,YAAY;MAClB,cAAc,YAAY,gBAAgB,CAAC;KAC5C,CAAA,CACE;;GACF,CAAA;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,oBAAD;KACE,cAAY,EAAE,8BAA8B,EAC1C,MAAM,cAAc,SAAS,KAAK,IACpC,CAAC;KACD,UAAU,CAAC;KACX,SAAS,YAAY;eALvB,CAMC,KACG,cAAc,SAAS,CACP;;GACjB,CAAA;EACF;;AAET;AAOA,IAAa,wBAAwB,EACnC,YACA,oBAC+B;CAC/B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,WACA,WAAW,GACX,WACA,WACA,QAAQ,EAAE,eAAe,GACzB,kBACE;;;;;;;;;;CAWJ,MAAM,EAAE,SAAS,eAAe,kBAAkB,KAAK,CAAC;CAExD,MAAM,cAAc,eAAe;EACjC,iBAAiB,YAAY;EAC7B,UAAU;EACV,UAAU;EACV;EACA,WACE,SAAS,MACT,GAAG,aAAc,QAAQ,aAAa,QAAQ,KAAM,KAAK,QAAQ;EAEnE,KAAK,wBAAwB,YAAY,SAAS;EAClD;EACA,cAAc;CAChB,CAAC;CAED,OAAO,cACL,oBAAC,wBAAD;EAAoC;EAAyB;CAAc,CAAA,IACzE;AACN;AAIA,IAAa,wBAAwB,EAAE,iBAA4C;CACjF,MAAM,EAAE,mBAAA,sBAAoB,sBAA6B,oBAAoB;CAC7E,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,eAAY;YAA3C,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACZ,WAAW,WACV,oBAAC,iBAAD;MACE,UAAU,WAAW;MACrB,WAAW;MACX,gBAAgB,KAAA;KACjB,CAAA,IAED,oBAAC,qBAAD;MACE,UAAU,WAAW;MACrB,uBAAuB;KACxB,CAAA;IAEA,CAAA;GACF,CAAA;EACF,CAAA,GACL,oBAAC,UAAD,EAAU,UAAU,WAAW,UAAY,CAAA,CACxC;;AAET;AASA,IAAa,kBAAkB,EAAE,YAAY,eAC3C,WACE,oBAAC,sBAAD,EAAkC,WAAa,CAAA,IAE/C,oBAAC,sBAAD,EAAkC,WAAa,CAAA"}

package/dist/es/components/Attachment/attachment-sizing.mjs

@@ -0,0 +1,73 @@
+import * as linkify from "linkifyjs";
+//#region src/components/Attachment/attachment-sizing.tsx
+var getImageAttachmentConfiguration = (attachment, element) => {
+	let newUrl = void 0;
+	const urlToTest = attachment.image_url || attachment.thumb_url || "";
+	if (linkify.test(urlToTest, "url")) {
+		const url = new URL(urlToTest);
+		const resizeDimensions = getSizingRestrictions(url, element);
+		if (resizeDimensions) {
+			resizeDimensions.height *= 2;
+			resizeDimensions.width *= 2;
+			addResizingParamsToUrl(resizeDimensions, url);
+		}
+		newUrl = url.href;
+	}
+	return { url: newUrl || "" };
+};
+var getVideoAttachmentConfiguration = (attachment, element, shouldGenerateVideoThumbnail) => {
+	let thumbUrl = void 0;
+	if (attachment.thumb_url && shouldGenerateVideoThumbnail && linkify.test(attachment.thumb_url, "url")) {
+		const url = new URL(attachment.thumb_url);
+		const resizeDimensions = getSizingRestrictions(url, element);
+		if (resizeDimensions) {
+			resizeDimensions.height *= 2;
+			resizeDimensions.width *= 2;
+			addResizingParamsToUrl(resizeDimensions, url);
+		}
+		thumbUrl = url.href;
+	}
+	return {
+		thumbUrl,
+		url: attachment.asset_url || ""
+	};
+};
+var getSizingRestrictions = (url, htmlElement) => {
+	const urlParams = url.searchParams;
+	const originalHeight = Number(urlParams.get("oh")) || 1;
+	const originalWidth = Number(urlParams.get("ow")) || 1;
+	const cssSizeRestriction = getCSSSizeRestrictions(htmlElement);
+	let resizeDimensions;
+	if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) && cssSizeRestriction.maxWidth) resizeDimensions = getResizeDimensions(originalHeight, originalWidth, cssSizeRestriction.maxHeight || cssSizeRestriction.height, cssSizeRestriction.maxWidth);
+	else resizeDimensions = void 0;
+	return resizeDimensions;
+};
+var getResizeDimensions = (originalHeight, originalWidth, maxHeight, maxWidth) => ({
+	height: Math.round(Math.max(maxHeight, maxWidth / originalWidth * originalHeight)),
+	width: Math.round(Math.max(maxHeight, maxWidth / originalHeight * originalWidth))
+});
+var getCSSSizeRestrictions = (htmlElement) => {
+	const computedStylesheet = getComputedStyle(htmlElement);
+	const height = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue("height"));
+	const maxHeight = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue("max-height"));
+	const maxWidth = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue("max-width"));
+	if (!((height || maxHeight) && maxWidth)) console.warn(`Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing`);
+	return {
+		height,
+		maxHeight,
+		maxWidth
+	};
+};
+var getValueRepresentationOfCSSProperty = (property) => {
+	if (!property.endsWith("px")) return;
+	const number = parseFloat(property);
+	return isNaN(number) ? void 0 : number;
+};
+var addResizingParamsToUrl = (resizeDimensions, url) => {
+	url.searchParams.set("h", resizeDimensions.height.toString());
+	url.searchParams.set("w", resizeDimensions.width.toString());
+};
+//#endregion
+export { getImageAttachmentConfiguration, getVideoAttachmentConfiguration };
+
+//# sourceMappingURL=attachment-sizing.mjs.map

package/dist/es/components/Attachment/attachment-sizing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-sizing.mjs","names":[],"sources":["../../../../src/components/Attachment/attachment-sizing.tsx"],"sourcesContent":["import type { Attachment } from 'stream-chat';\nimport * as linkify from 'linkifyjs';\n\nexport const getImageAttachmentConfiguration = (\n  attachment: Attachment,\n  element: HTMLElement,\n) => {\n  let newUrl = undefined;\n\n  const urlToTest = attachment.image_url || attachment.thumb_url || '';\n\n  if (linkify.test(urlToTest, 'url')) {\n    const url = new URL(urlToTest);\n    const resizeDimensions = getSizingRestrictions(url, element);\n\n    if (resizeDimensions) {\n      // Apply 2x for retina displays\n      resizeDimensions.height *= 2;\n      resizeDimensions.width *= 2;\n      addResizingParamsToUrl(resizeDimensions, url);\n    }\n    newUrl = url.href;\n  }\n\n  return {\n    url: newUrl || '',\n  };\n};\n\nexport const getVideoAttachmentConfiguration = (\n  attachment: Attachment,\n  element: HTMLElement,\n  shouldGenerateVideoThumbnail: boolean,\n) => {\n  let thumbUrl = undefined;\n  if (\n    attachment.thumb_url &&\n    shouldGenerateVideoThumbnail &&\n    linkify.test(attachment.thumb_url, 'url')\n  ) {\n    const url = new URL(attachment.thumb_url);\n    const resizeDimensions = getSizingRestrictions(url, element);\n\n    if (resizeDimensions) {\n      // Apply 2x for retina displays\n      resizeDimensions.height *= 2;\n      resizeDimensions.width *= 2;\n      addResizingParamsToUrl(resizeDimensions, url);\n    }\n    thumbUrl = url.href;\n  }\n\n  return {\n    thumbUrl,\n    url: attachment.asset_url || '',\n  };\n};\n\nconst getSizingRestrictions = (url: URL, htmlElement: HTMLElement) => {\n  const urlParams = url.searchParams;\n  const originalHeight = Number(urlParams.get('oh')) || 1;\n  const originalWidth = Number(urlParams.get('ow')) || 1;\n  const cssSizeRestriction = getCSSSizeRestrictions(htmlElement);\n  let resizeDimensions: { height: number; width: number } | undefined;\n\n  if (\n    (cssSizeRestriction.maxHeight || cssSizeRestriction.height) &&\n    cssSizeRestriction.maxWidth\n  ) {\n    resizeDimensions = getResizeDimensions(\n      originalHeight,\n      originalWidth,\n      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */\n      cssSizeRestriction.maxHeight || cssSizeRestriction.height!,\n      cssSizeRestriction.maxWidth,\n    );\n  } else {\n    resizeDimensions = undefined;\n  }\n\n  return resizeDimensions;\n};\n\nconst getResizeDimensions = (\n  originalHeight: number,\n  originalWidth: number,\n  maxHeight: number,\n  maxWidth: number,\n) => ({\n  height: Math.round(Math.max(maxHeight, (maxWidth / originalWidth) * originalHeight)),\n  width: Math.round(Math.max(maxHeight, (maxWidth / originalHeight) * originalWidth)),\n});\n\nconst getCSSSizeRestrictions = (htmlElement: HTMLElement) => {\n  const computedStylesheet = getComputedStyle(htmlElement);\n  const height = getValueRepresentationOfCSSProperty(\n    computedStylesheet.getPropertyValue('height'),\n  );\n  const maxHeight = getValueRepresentationOfCSSProperty(\n    computedStylesheet.getPropertyValue('max-height'),\n  );\n  const maxWidth = getValueRepresentationOfCSSProperty(\n    computedStylesheet.getPropertyValue('max-width'),\n  );\n\n  if (!((height || maxHeight) && maxWidth)) {\n    console.warn(\n      `Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing`,\n    );\n  }\n\n  return { height, maxHeight, maxWidth };\n};\n\nconst getValueRepresentationOfCSSProperty = (property: string) => {\n  if (!property.endsWith('px')) {\n    return undefined;\n  }\n  const number = parseFloat(property);\n  return isNaN(number) ? undefined : number;\n};\n\nconst addResizingParamsToUrl = (\n  resizeDimensions: { height: number; width: number },\n  url: URL,\n) => {\n  url.searchParams.set('h', resizeDimensions.height.toString());\n  url.searchParams.set('w', resizeDimensions.width.toString());\n};\n"],"mappings":";;AAGA,IAAa,mCACX,YACA,YACG;CACH,IAAI,SAAS,KAAA;CAEb,MAAM,YAAY,WAAW,aAAa,WAAW,aAAa;CAElE,IAAI,QAAQ,KAAK,WAAW,KAAK,GAAG;EAClC,MAAM,MAAM,IAAI,IAAI,SAAS;EAC7B,MAAM,mBAAmB,sBAAsB,KAAK,OAAO;EAE3D,IAAI,kBAAkB;GAEpB,iBAAiB,UAAU;GAC3B,iBAAiB,SAAS;GAC1B,uBAAuB,kBAAkB,GAAG;EAC9C;EACA,SAAS,IAAI;CACf;CAEA,OAAO,EACL,KAAK,UAAU,GACjB;AACF;AAEA,IAAa,mCACX,YACA,SACA,iCACG;CACH,IAAI,WAAW,KAAA;CACf,IACE,WAAW,aACX,gCACA,QAAQ,KAAK,WAAW,WAAW,KAAK,GACxC;EACA,MAAM,MAAM,IAAI,IAAI,WAAW,SAAS;EACxC,MAAM,mBAAmB,sBAAsB,KAAK,OAAO;EAE3D,IAAI,kBAAkB;GAEpB,iBAAiB,UAAU;GAC3B,iBAAiB,SAAS;GAC1B,uBAAuB,kBAAkB,GAAG;EAC9C;EACA,WAAW,IAAI;CACjB;CAEA,OAAO;EACL;EACA,KAAK,WAAW,aAAa;CAC/B;AACF;AAEA,IAAM,yBAAyB,KAAU,gBAA6B;CACpE,MAAM,YAAY,IAAI;CACtB,MAAM,iBAAiB,OAAO,UAAU,IAAI,IAAI,CAAC,KAAK;CACtD,MAAM,gBAAgB,OAAO,UAAU,IAAI,IAAI,CAAC,KAAK;CACrD,MAAM,qBAAqB,uBAAuB,WAAW;CAC7D,IAAI;CAEJ,KACG,mBAAmB,aAAa,mBAAmB,WACpD,mBAAmB,UAEnB,mBAAmB,oBACjB,gBACA,eAEA,mBAAmB,aAAa,mBAAmB,QACnD,mBAAmB,QACrB;MAEA,mBAAmB,KAAA;CAGrB,OAAO;AACT;AAEA,IAAM,uBACJ,gBACA,eACA,WACA,cACI;CACJ,QAAQ,KAAK,MAAM,KAAK,IAAI,WAAY,WAAW,gBAAiB,cAAc,CAAC;CACnF,OAAO,KAAK,MAAM,KAAK,IAAI,WAAY,WAAW,iBAAkB,aAAa,CAAC;AACpF;AAEA,IAAM,0BAA0B,gBAA6B;CAC3D,MAAM,qBAAqB,iBAAiB,WAAW;CACvD,MAAM,SAAS,oCACb,mBAAmB,iBAAiB,QAAQ,CAC9C;CACA,MAAM,YAAY,oCAChB,mBAAmB,iBAAiB,YAAY,CAClD;CACA,MAAM,WAAW,oCACf,mBAAmB,iBAAiB,WAAW,CACjD;CAEA,IAAI,GAAG,UAAU,cAAc,WAC7B,QAAQ,KACN,8OACF;CAGF,OAAO;EAAE;EAAQ;EAAW;CAAS;AACvC;AAEA,IAAM,uCAAuC,aAAqB;CAChE,IAAI,CAAC,SAAS,SAAS,IAAI,GACzB;CAEF,MAAM,SAAS,WAAW,QAAQ;CAClC,OAAO,MAAM,MAAM,IAAI,KAAA,IAAY;AACrC;AAEA,IAAM,0BACJ,kBACA,QACG;CACH,IAAI,aAAa,IAAI,KAAK,iBAAiB,OAAO,SAAS,CAAC;CAC5D,IAAI,aAAa,IAAI,KAAK,iBAAiB,MAAM,SAAS,CAAC;AAC7D"}

package/dist/es/components/Attachment/audioSampling.mjs

@@ -0,0 +1,74 @@
+import { divMod } from "./utils.mjs";
+//#region src/components/Attachment/audioSampling.ts
+var resampleWaveformData = (waveformData, amplitudesCount) => waveformData.length === amplitudesCount ? waveformData : waveformData.length > amplitudesCount ? downSample(waveformData, amplitudesCount) : upSample(waveformData, amplitudesCount);
+/**
+* The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+* See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+* @param data
+* @param targetOutputSize
+*/
+function downSample(data, targetOutputSize) {
+	if (data.length <= targetOutputSize || targetOutputSize === 0) return data;
+	if (targetOutputSize === 1) return [mean(data)];
+	const result = [];
+	const bucketSize = (data.length - 2) / (targetOutputSize - 2);
+	let lastSelectedPointIndex = 0;
+	result.push(data[lastSelectedPointIndex]);
+	let maxAreaPoint, maxArea, triangleArea;
+	for (let bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
+		const previousBucketRefPoint = data[lastSelectedPointIndex];
+		const nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
+		const currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+		const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+		const countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+		maxArea = triangleArea = -1;
+		for (let currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
+			const countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+			const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+			const currentPointValue = data[currentPointIndex];
+			triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
+			if (triangleArea > maxArea) {
+				maxArea = triangleArea;
+				maxAreaPoint = data[currentPointIndex];
+				lastSelectedPointIndex = currentPointIndex;
+			}
+		}
+		if (typeof maxAreaPoint !== "undefined") result.push(maxAreaPoint);
+	}
+	result.push(data[data.length - 1]);
+	return result;
+}
+var triangleAreaHeron = (a, b, c) => {
+	const s = (a + b + c) / 2;
+	return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+};
+var triangleBase = (a, b) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+var mean = (values) => values.reduce((acc, value) => acc + value, 0) / values.length;
+var getNextBucketMean = (data, currentBucketIndex, bucketSize) => {
+	const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+	let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+	nextNextBucketStartIndex = nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
+	return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+};
+var upSample = (values, targetSize) => {
+	if (!values.length) {
+		console.warn("Cannot extend empty array of amplitudes.");
+		return values;
+	}
+	if (values.length > targetSize) {
+		console.warn("Requested to extend the waveformData that is longer than the target list size");
+		return values;
+	}
+	if (targetSize === values.length) return values;
+	let [bucketSize, remainder] = divMod(targetSize, values.length);
+	const result = [];
+	for (let i = 0; i < values.length; i++) {
+		const extra = remainder && remainder-- ? 1 : 0;
+		result.push(...Array(bucketSize + extra).fill(values[i]));
+	}
+	return result;
+};
+//#endregion
+export { downSample, resampleWaveformData, upSample };
+
+//# sourceMappingURL=audioSampling.mjs.map

package/dist/es/components/Attachment/audioSampling.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioSampling.mjs","names":[],"sources":["../../../../src/components/Attachment/audioSampling.ts"],"sourcesContent":["import { divMod } from './utils';\n\nexport const resampleWaveformData = (waveformData: number[], amplitudesCount: number) =>\n  waveformData.length === amplitudesCount\n    ? waveformData\n    : waveformData.length > amplitudesCount\n      ? downSample(waveformData, amplitudesCount)\n      : upSample(waveformData, amplitudesCount);\n\n/**\n * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.\n * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)\n * @param data\n * @param targetOutputSize\n */\nexport function downSample(data: number[], targetOutputSize: number): number[] {\n  if (data.length <= targetOutputSize || targetOutputSize === 0) {\n    return data;\n  }\n\n  if (targetOutputSize === 1) return [mean(data)];\n\n  const result: number[] = [];\n  // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output\n  const bucketSize = (data.length - 2) / (targetOutputSize - 2);\n  let lastSelectedPointIndex = 0;\n  result.push(data[lastSelectedPointIndex]); // Always add the first point\n  let maxAreaPoint, maxArea, triangleArea;\n\n  for (let bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {\n    const previousBucketRefPoint = data[lastSelectedPointIndex];\n    const nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);\n\n    const currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;\n    const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;\n    const countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;\n\n    maxArea = triangleArea = -1;\n\n    for (\n      let currentPointIndex = currentBucketStartIndex;\n      currentPointIndex < nextBucketStartIndex;\n      currentPointIndex++\n    ) {\n      const countUnitsBetweenAtoB =\n        Math.abs(currentPointIndex - currentBucketStartIndex) + 1;\n      const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;\n      const currentPointValue = data[currentPointIndex];\n\n      triangleArea = triangleAreaHeron(\n        triangleBase(\n          Math.abs(previousBucketRefPoint - currentPointValue),\n          countUnitsBetweenAtoB,\n        ),\n        triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC),\n        triangleBase(\n          Math.abs(previousBucketRefPoint - nextBucketMean),\n          countUnitsBetweenAtoC,\n        ),\n      );\n\n      if (triangleArea > maxArea) {\n        maxArea = triangleArea;\n        maxAreaPoint = data[currentPointIndex];\n        lastSelectedPointIndex = currentPointIndex;\n      }\n    }\n\n    if (typeof maxAreaPoint !== 'undefined') result.push(maxAreaPoint);\n  }\n\n  result.push(data[data.length - 1]); // Always add the last point\n\n  return result;\n}\n\nconst triangleAreaHeron = (a: number, b: number, c: number) => {\n  const s = (a + b + c) / 2;\n  return Math.sqrt(s * (s - a) * (s - b) * (s - c));\n};\nconst triangleBase = (a: number, b: number) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));\nconst mean = (values: number[]) =>\n  values.reduce((acc, value) => acc + value, 0) / values.length;\nconst getNextBucketMean = (\n  data: number[],\n  currentBucketIndex: number,\n  bucketSize: number,\n) => {\n  const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;\n  let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;\n  nextNextBucketStartIndex =\n    nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;\n\n  return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));\n};\nexport const upSample = (values: number[], targetSize: number) => {\n  if (!values.length) {\n    console.warn('Cannot extend empty array of amplitudes.');\n    return values;\n  }\n\n  if (values.length > targetSize) {\n    console.warn(\n      'Requested to extend the waveformData that is longer than the target list size',\n    );\n    return values;\n  }\n\n  if (targetSize === values.length) return values;\n\n  // eslint-disable-next-line prefer-const\n  let [bucketSize, remainder] = divMod(targetSize, values.length);\n  const result: number[] = [];\n\n  for (let i = 0; i < values.length; i++) {\n    const extra = remainder && remainder-- ? 1 : 0;\n    result.push(...Array(bucketSize + extra).fill(values[i]));\n  }\n  return result;\n};\n"],"mappings":";;AAEA,IAAa,wBAAwB,cAAwB,oBAC3D,aAAa,WAAW,kBACpB,eACA,aAAa,SAAS,kBACpB,WAAW,cAAc,eAAe,IACxC,SAAS,cAAc,eAAe;;;;;;;AAQ9C,SAAgB,WAAW,MAAgB,kBAAoC;CAC7E,IAAI,KAAK,UAAU,oBAAoB,qBAAqB,GAC1D,OAAO;CAGT,IAAI,qBAAqB,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;CAE9C,MAAM,SAAmB,CAAC;CAE1B,MAAM,cAAc,KAAK,SAAS,MAAM,mBAAmB;CAC3D,IAAI,yBAAyB;CAC7B,OAAO,KAAK,KAAK,uBAAuB;CACxC,IAAI,cAAc,SAAS;CAE3B,KAAK,IAAI,cAAc,GAAG,cAAc,mBAAmB,GAAG,eAAe;EAC3E,MAAM,yBAAyB,KAAK;EACpC,MAAM,iBAAiB,kBAAkB,MAAM,aAAa,UAAU;EAEtE,MAAM,0BAA0B,KAAK,OAAO,cAAc,KAAK,UAAU,IAAI;EAC7E,MAAM,uBAAuB,KAAK,MAAM,cAAc,UAAU,IAAI;EACpE,MAAM,wBAAwB,IAAI,uBAAuB;EAEzD,UAAU,eAAe;EAEzB,KACE,IAAI,oBAAoB,yBACxB,oBAAoB,sBACpB,qBACA;GACA,MAAM,wBACJ,KAAK,IAAI,oBAAoB,uBAAuB,IAAI;GAC1D,MAAM,wBAAwB,wBAAwB;GACtD,MAAM,oBAAoB,KAAK;GAE/B,eAAe,kBACb,aACE,KAAK,IAAI,yBAAyB,iBAAiB,GACnD,qBACF,GACA,aAAa,KAAK,IAAI,oBAAoB,cAAc,GAAG,qBAAqB,GAChF,aACE,KAAK,IAAI,yBAAyB,cAAc,GAChD,qBACF,CACF;GAEA,IAAI,eAAe,SAAS;IAC1B,UAAU;IACV,eAAe,KAAK;IACpB,yBAAyB;GAC3B;EACF;EAEA,IAAI,OAAO,iBAAiB,aAAa,OAAO,KAAK,YAAY;CACnE;CAEA,OAAO,KAAK,KAAK,KAAK,SAAS,EAAE;CAEjC,OAAO;AACT;AAEA,IAAM,qBAAqB,GAAW,GAAW,MAAc;CAC7D,MAAM,KAAK,IAAI,IAAI,KAAK;CACxB,OAAO,KAAK,KAAK,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI,EAAE;AAClD;AACA,IAAM,gBAAgB,GAAW,MAAc,KAAK,KAAK,KAAK,IAAI,GAAG,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AACxF,IAAM,QAAQ,WACZ,OAAO,QAAQ,KAAK,UAAU,MAAM,OAAO,CAAC,IAAI,OAAO;AACzD,IAAM,qBACJ,MACA,oBACA,eACG;CACH,MAAM,uBAAuB,KAAK,MAAM,qBAAqB,UAAU,IAAI;CAC3E,IAAI,2BAA2B,KAAK,OAAO,qBAAqB,KAAK,UAAU,IAAI;CACnF,2BACE,2BAA2B,KAAK,SAAS,2BAA2B,KAAK;CAE3E,OAAO,KAAK,KAAK,MAAM,sBAAsB,wBAAwB,CAAC;AACxE;AACA,IAAa,YAAY,QAAkB,eAAuB;CAChE,IAAI,CAAC,OAAO,QAAQ;EAClB,QAAQ,KAAK,0CAA0C;EACvD,OAAO;CACT;CAEA,IAAI,OAAO,SAAS,YAAY;EAC9B,QAAQ,KACN,+EACF;EACA,OAAO;CACT;CAEA,IAAI,eAAe,OAAO,QAAQ,OAAO;CAGzC,IAAI,CAAC,YAAY,aAAa,OAAO,YAAY,OAAO,MAAM;CAC9D,MAAM,SAAmB,CAAC;CAE1B,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;EACtC,MAAM,QAAQ,aAAa,cAAc,IAAI;EAC7C,OAAO,KAAK,GAAG,MAAM,aAAa,KAAK,CAAC,CAAC,KAAK,OAAO,EAAE,CAAC;CAC1D;CACA,OAAO;AACT"}

package/dist/es/components/Attachment/components/AttachmentUploadProgressIndicator.mjs

@@ -0,0 +1,38 @@
+import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
+import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { useAttachmentsUploadState } from "../hooks/useAttachmentUploadState.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/components/AttachmentUploadProgressIndicator.tsx
+/**
+* Upload progress for an attachment carried by a message whose send is already under way.
+*
+* Renders exactly what the composer's attachment previews render — the shared
+* {@link UploadProgressIndicator} (a progress ring, or a spinner when the transfer length is
+* not computable) followed by {@link AttachmentUploadedSizeIndicator}'s uploaded/total bytes —
+* so an attachment looks the same either side of pressing send.
+*
+* Renders `null` for any attachment that is not mid-upload, which is every attachment that came
+* back from the API. Placing it in the default widgets therefore changes nothing for messages
+* that are already sent.
+*/
+var AttachmentUploadProgressIndicator = ({ attachment, attachments, className, variant = "inline" }) => {
+	const { isUploading, progress, uploadConfirmationPending } = useAttachmentsUploadState(useMemo(() => attachment ? [attachment] : attachments ?? [], [attachment, attachments]));
+	if (!isUploading) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__attachment-upload-progress", `str-chat__attachment-upload-progress--${variant}`, className),
+		"data-testid": "attachment-upload-progress",
+		children: [/* @__PURE__ */ jsx(UploadProgressIndicator, {
+			uploadConfirmationPending,
+			uploadProgress: progress
+		}), attachment && /* @__PURE__ */ jsx(AttachmentUploadedSizeIndicator, {
+			attachment,
+			uploadProgress: progress
+		})]
+	});
+};
+//#endregion
+export { AttachmentUploadProgressIndicator };
+
+//# sourceMappingURL=AttachmentUploadProgressIndicator.mjs.map

package/dist/es/components/Attachment/components/AttachmentUploadProgressIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentUploadProgressIndicator.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/AttachmentUploadProgressIndicator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport clsx from 'clsx';\nimport type { Attachment, LocalAttachment } from 'stream-chat';\n\nimport { useAttachmentsUploadState } from '../hooks/useAttachmentUploadState';\nimport { AttachmentUploadedSizeIndicator } from '../../Loading/AttachmentUploadedSizeIndicator';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\n\nexport type AttachmentUploadProgressIndicatorProps = {\n  /** The attachment being uploaded. Nothing renders unless its upload is still in flight. */\n  attachment?: Attachment | LocalAttachment;\n  /**\n   * Several attachments sharing one indicator, used by galleries. Their progress is averaged\n   * and the uploaded/total size is omitted. Ignored when `attachment` is given.\n   */\n  attachments?: (Attachment | LocalAttachment)[];\n  className?: string;\n  /**\n   * `inline` sits in the row that normally holds the file size (file, audio, voice recording).\n   * `overlay` is absolutely positioned over the media itself (image, video, gallery), inset\n   * from the bottom edge.\n   * @default 'inline'\n   */\n  variant?: 'inline' | 'overlay';\n};\n\n/**\n * Upload progress for an attachment carried by a message whose send is already under way.\n *\n * Renders exactly what the composer's attachment previews render — the shared\n * {@link UploadProgressIndicator} (a progress ring, or a spinner when the transfer length is\n * not computable) followed by {@link AttachmentUploadedSizeIndicator}'s uploaded/total bytes —\n * so an attachment looks the same either side of pressing send.\n *\n * Renders `null` for any attachment that is not mid-upload, which is every attachment that came\n * back from the API. Placing it in the default widgets therefore changes nothing for messages\n * that are already sent.\n */\nexport const AttachmentUploadProgressIndicator = ({\n  attachment,\n  attachments,\n  className,\n  variant = 'inline',\n}: AttachmentUploadProgressIndicatorProps) => {\n  const resolvedAttachments = useMemo(\n    () => (attachment ? [attachment] : (attachments ?? [])),\n    [attachment, attachments],\n  );\n  const { isUploading, progress, uploadConfirmationPending } =\n    useAttachmentsUploadState(resolvedAttachments);\n\n  if (!isUploading) return null;\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__attachment-upload-progress',\n        `str-chat__attachment-upload-progress--${variant}`,\n        className,\n      )}\n      data-testid='attachment-upload-progress'\n    >\n      <UploadProgressIndicator\n        uploadConfirmationPending={uploadConfirmationPending}\n        uploadProgress={progress}\n      />\n      {/*\n        The byte readout keeps the real value, so it settles on \"4.3 MB / 4.3 MB\" rather than\n        vanishing while the spinner runs — all the bytes genuinely have been sent.\n        Byte counts only make sense for a single attachment; a gallery shows just the ring.\n      */}\n      {attachment && (\n        <AttachmentUploadedSizeIndicator\n          attachment={attachment}\n          uploadProgress={progress}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,qCAAqC,EAChD,YACA,aACA,WACA,UAAU,eACkC;CAK5C,MAAM,EAAE,aAAa,UAAU,8BAC7B,0BAL0B,cACnB,aAAa,CAAC,UAAU,IAAK,eAAe,CAAC,GACpD,CAAC,YAAY,WAAW,CAGE,CAAmB;CAE/C,IAAI,CAAC,aAAa,OAAO;CAEzB,OACE,qBAAC,OAAD;EACE,WAAW,KACT,wCACA,yCAAyC,WACzC,SACF;EACA,eAAY;YANd,CAQE,oBAAC,yBAAD;GAC6B;GAC3B,gBAAgB;EACjB,CAAA,GAMA,cACC,oBAAC,iCAAD;GACc;GACZ,gBAAgB;EACjB,CAAA,CAEA;;AAET"}

package/dist/es/components/Attachment/components/DownloadButton.mjs

@@ -0,0 +1,35 @@
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { sanitizeUrl } from "@braintree/sanitize-url";
+//#region src/components/Attachment/components/DownloadButton.tsx
+/**
+* Icon download control for {@link Audio} and {@link FileAttachment} rows.
+* (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)
+*/
+var DownloadButton = ({ assetUrl, className, suggestedFileName, tooltipTitle }) => {
+	const { IconDownload } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	if (!assetUrl) return null;
+	const href = sanitizeUrl(assetUrl);
+	if (!href) return null;
+	return /* @__PURE__ */ jsx("a", {
+		"aria-label": t("aria/Download attachment"),
+		className: clsx("str-chat__button", "str-chat__button--secondary", "str-chat__button--outline", "str-chat__button--circular", "str-chat__button--size-sm", "str-chat__audio-attachment-download-button", className),
+		download: suggestedFileName ?? "",
+		href,
+		rel: "noopener noreferrer",
+		target: "_blank",
+		title: tooltipTitle ?? t("Download Attachment"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__button__content",
+			children: /* @__PURE__ */ jsx(IconDownload, { className: "str-chat__icon str-chat__audio-attachment-download-button__icon" })
+		})
+	});
+};
+//#endregion
+export { DownloadButton };
+
+//# sourceMappingURL=DownloadButton.mjs.map

package/dist/es/components/Attachment/components/DownloadButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/DownloadButton.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\n\nexport type DownloadButtonProps = {\n  /** Attachment asset URL (e.g. `asset_url`). */\n  assetUrl?: string;\n  className?: string;\n  /** Suggested filename for the `download` attribute (not the HTML `title` tooltip). */\n  suggestedFileName?: string;\n  /** Native browser tooltip; defaults to translated “Download Attachment”. */\n  tooltipTitle?: string;\n};\n\n/**\n * Icon download control for {@link Audio} and {@link FileAttachment} rows.\n * (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)\n */\nexport const DownloadButton = ({\n  assetUrl,\n  className,\n  suggestedFileName,\n  tooltipTitle,\n}: DownloadButtonProps) => {\n  const { IconDownload } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  if (!assetUrl) return null;\n  const href = sanitizeUrl(assetUrl);\n  if (!href) return null;\n\n  return (\n    <a\n      aria-label={t('aria/Download attachment')}\n      className={clsx(\n        'str-chat__button',\n        'str-chat__button--secondary',\n        'str-chat__button--outline',\n        'str-chat__button--circular',\n        'str-chat__button--size-sm',\n        'str-chat__audio-attachment-download-button',\n        className,\n      )}\n      download={suggestedFileName ?? ''}\n      href={href}\n      rel='noopener noreferrer'\n      target='_blank'\n      title={tooltipTitle ?? t('Download Attachment')}\n    >\n      <div className='str-chat__button__content'>\n        <IconDownload className='str-chat__icon str-chat__audio-attachment-download-button__icon' />\n      </div>\n    </a>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,kBAAkB,EAC7B,UACA,WACA,mBACA,mBACyB;CACzB,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,MAAM,EAAE,MAAM,sBAAsB;CACpC,IAAI,CAAC,UAAU,OAAO;CACtB,MAAM,OAAO,YAAY,QAAQ;CACjC,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,KAAD;EACE,cAAY,EAAE,0BAA0B;EACxC,WAAW,KACT,oBACA,+BACA,6BACA,8BACA,6BACA,8CACA,SACF;EACA,UAAU,qBAAqB;EACzB;EACN,KAAI;EACJ,QAAO;EACP,OAAO,gBAAgB,EAAE,qBAAqB;YAE9C,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,cAAD,EAAc,WAAU,kEAAmE,CAAA;EACxF,CAAA;CACJ,CAAA;AAEP"}

package/dist/es/components/Attachment/components/FileSizeIndicator.mjs

@@ -0,0 +1,17 @@
+import { prettifyFileSize } from "../../MessageComposer/hooks/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Attachment/components/FileSizeIndicator.tsx
+var FileSizeIndicator = ({ fileSize, maximumFractionDigits }) => {
+	const actualFileSize = typeof fileSize === "string" ? parseFloat(fileSize) : fileSize;
+	if (typeof actualFileSize === "undefined" || !Number.isFinite(Number(actualFileSize))) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "str-chat__message-attachment-file--item-size",
+		"data-testid": "file-size-indicator",
+		children: prettifyFileSize(actualFileSize, maximumFractionDigits)
+	});
+};
+//#endregion
+export { FileSizeIndicator };
+
+//# sourceMappingURL=FileSizeIndicator.mjs.map

package/dist/es/components/Attachment/components/FileSizeIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSizeIndicator.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/FileSizeIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { prettifyFileSize } from '../../MessageComposer/hooks/utils';\n\nexport type FileSizeIndicatorProps = {\n  /** file size in byte */\n  fileSize?: number | string;\n  /**\n   The maximum number of fraction digits to display. If not set, the default behavior is to round to 3 significant digits.\n   @default undefined\n   */\n  maximumFractionDigits?: number;\n};\n\nexport const FileSizeIndicator = ({\n  fileSize,\n  maximumFractionDigits,\n}: FileSizeIndicatorProps) => {\n  const actualFileSize = typeof fileSize === 'string' ? parseFloat(fileSize) : fileSize;\n\n  if (typeof actualFileSize === 'undefined' || !Number.isFinite(Number(actualFileSize))) {\n    return null;\n  }\n\n  return (\n    <span\n      className='str-chat__message-attachment-file--item-size'\n      data-testid='file-size-indicator'\n    >\n      {prettifyFileSize(actualFileSize, maximumFractionDigits)}\n    </span>\n  );\n};\n"],"mappings":";;;;AAaA,IAAa,qBAAqB,EAChC,UACA,4BAC4B;CAC5B,MAAM,iBAAiB,OAAO,aAAa,WAAW,WAAW,QAAQ,IAAI;CAE7E,IAAI,OAAO,mBAAmB,eAAe,CAAC,OAAO,SAAS,OAAO,cAAc,CAAC,GAClF,OAAO;CAGT,OACE,oBAAC,QAAD;EACE,WAAU;EACV,eAAY;YAEX,iBAAiB,gBAAgB,qBAAqB;CACnD,CAAA;AAEV"}

package/dist/es/components/Attachment/giphyAccessibility.mjs

@@ -0,0 +1,15 @@
+//#region src/components/Attachment/giphyAccessibility.ts
+/** True when a string looks like a media URL (so it must NOT be used as an accessible name). */
+var looksLikeUrl = (value) => !!value && /^(https?:|\/\/)/i.test(value);
+/**
+* Resolve a human, non-URL giphy title for accessible naming/announcements, or `undefined`.
+* Giphy payloads rarely carry a real title (they often fall back to a media URL), so callers
+* should provide a generic label when this returns `undefined`. Shared by `Giphy` (the image's
+* accessible name) and `AttachmentActions` (the shuffle announcement) so the
+* two stay in sync.
+*/
+var getGiphyDescriptiveTitle = (title) => looksLikeUrl(title) ? void 0 : title ?? void 0;
+//#endregion
+export { getGiphyDescriptiveTitle, looksLikeUrl };
+
+//# sourceMappingURL=giphyAccessibility.mjs.map

package/dist/es/components/Attachment/giphyAccessibility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"giphyAccessibility.mjs","names":[],"sources":["../../../../src/components/Attachment/giphyAccessibility.ts"],"sourcesContent":["/** True when a string looks like a media URL (so it must NOT be used as an accessible name). */\nexport const looksLikeUrl = (value?: string | null): boolean =>\n  !!value && /^(https?:|\\/\\/)/i.test(value);\n\n/**\n * Resolve a human, non-URL giphy title for accessible naming/announcements, or `undefined`.\n * Giphy payloads rarely carry a real title (they often fall back to a media URL), so callers\n * should provide a generic label when this returns `undefined`. Shared by `Giphy` (the image's\n * accessible name) and `AttachmentActions` (the shuffle announcement) so the\n * two stay in sync.\n */\nexport const getGiphyDescriptiveTitle = (title?: string | null): string | undefined =>\n  looksLikeUrl(title) ? undefined : (title ?? undefined);\n"],"mappings":";;AACA,IAAa,gBAAgB,UAC3B,CAAC,CAAC,SAAS,mBAAmB,KAAK,KAAK;;;;;;;;AAS1C,IAAa,4BAA4B,UACvC,aAAa,KAAK,IAAI,KAAA,IAAa,SAAS,KAAA"}