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

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

@@ -0,0 +1,178 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
+import { GlobalModal } from "../Modal/GlobalModal.mjs";
+import { BaseImage } from "../BaseImage/BaseImage.mjs";
+import { VideoThumbnail } from "../VideoPlayer/VideoThumbnail.mjs";
+import { GalleryUI } from "../Gallery/GalleryUI.mjs";
+import { Gallery } from "../Gallery/Gallery.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { convertTimestampToDate } from "stream-chat";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/ModalGallery.tsx
+var MAX_VISIBLE_THUMBNAILS = 4;
+var BASE_IMAGE_PROP_KEYS = [
+	"className",
+	"crossOrigin",
+	"decoding",
+	"draggable",
+	"fetchPriority",
+	"height",
+	"loading",
+	"onError",
+	"onLoad",
+	"ref",
+	"showDownloadButtonOnError",
+	"sizes",
+	"srcSet",
+	"style",
+	"title",
+	"useMap",
+	"width"
+];
+var ModalGallery = ({ className, closeOnBackgroundClick = true, items, modalClassName }) => {
+	const { BaseImage: BaseImage$1 = BaseImage, Gallery: Gallery$1 = Gallery, Modal = GlobalModal } = useComponentContext();
+	const { message } = useContext(MessageContext) ?? {};
+	const [modalOpen, setModalOpen] = useState(false);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const itemsWithSender = useMemo(() => items.map((item) => ({
+		...item,
+		createdAt: item.createdAt ?? convertTimestampToDate(message?.created_at),
+		user: item.user ?? message?.user ?? void 0
+	})), [
+		items,
+		message?.created_at,
+		message?.user
+	]);
+	const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+	const closeModal = useCallback(() => {
+		setModalOpen(false);
+	}, []);
+	const preventOverlayClose = useCallback((source) => source !== "overlay", []);
+	const handleThumbnailClick = useCallback((index) => {
+		setSelectedIndex(index);
+		setModalOpen(true);
+	}, []);
+	const itemCount = items.length;
+	const visibleItems = items.slice(0, MAX_VISIBLE_THUMBNAILS);
+	const overflowCount = itemCount - MAX_VISIBLE_THUMBNAILS;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__modal-gallery", className, {
+			"str-chat__modal-gallery--three-images": itemCount === 3,
+			"str-chat__modal-gallery--two-images": itemCount === 2
+		}),
+		children: visibleItems.map((item, index) => {
+			return /* @__PURE__ */ jsx(ThumbnailButton, {
+				BaseImage: BaseImage$1,
+				baseImageUsesDefaultBehavior: usesDefaultBaseImage,
+				index,
+				item,
+				itemCount,
+				onClick: () => handleThumbnailClick(index),
+				overflowCount,
+				showOverlay: index === MAX_VISIBLE_THUMBNAILS - 1 && overflowCount > 0
+			}, index);
+		})
+	}), /* @__PURE__ */ jsx(Modal, {
+		className: clsx("str-chat__gallery-modal", modalClassName),
+		onClose: closeModal,
+		onCloseAttempt: preventOverlayClose,
+		open: modalOpen,
+		children: /* @__PURE__ */ jsx(Gallery$1, {
+			closeOnBackgroundClick,
+			GalleryUI,
+			initialIndex: selectedIndex,
+			items: itemsWithSender,
+			onRequestClose: closeModal
+		})
+	})] });
+};
+var ThumbnailButton = ({ BaseImage, baseImageUsesDefaultBehavior, index, item, itemCount, onClick, overflowCount, showOverlay }) => {
+	const { IconRetry } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const imageUrl = item.imageUrl;
+	const [isLoadFailed, setIsLoadFailed] = useState(false);
+	const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));
+	const [retrySuffix, setRetrySuffix] = useState("");
+	const { onError: itemOnError, onLoad: itemOnLoad, ...baseImageProps } = getBaseImageProps(item);
+	const showRetryIndicator = isLoadFailed && !showOverlay;
+	const showLoadingIndicator = isImageLoading && !showRetryIndicator && !showOverlay;
+	const handleButtonClick = () => {
+		if (showRetryIndicator) {
+			setIsLoadFailed(false);
+			setIsImageLoading(true);
+			setRetrySuffix(`&retry=${Date.now()}`);
+			return;
+		}
+		onClick();
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-label": showRetryIndicator ? t("common.retryUpload.ariaLabel", "Retry upload") : itemCountAwareLabel({
+			imageIndex: index + 1,
+			itemCount,
+			t
+		}),
+		className: clsx("str-chat__modal-gallery__image", {
+			"str-chat__modal-gallery__image--load-failed": showRetryIndicator,
+			"str-chat__modal-gallery__image--loading": showLoadingIndicator
+		}),
+		onClick: handleButtonClick,
+		type: "button",
+		children: [
+			item.videoThumbnailUrl ? /* @__PURE__ */ jsx(VideoThumbnail, {
+				alt: t("common.userUploadedContent.label", "User uploaded content"),
+				src: item.videoThumbnailUrl
+			}) : /* @__PURE__ */ jsx(BaseImage, {
+				...baseImageProps,
+				alt: item.alt ?? t("common.userUploadedContent.label", "User uploaded content"),
+				onError: (event) => {
+					setIsImageLoading(false);
+					setIsLoadFailed(true);
+					itemOnError?.(event);
+				},
+				onLoad: (event) => {
+					setIsImageLoading(false);
+					setIsLoadFailed(false);
+					itemOnLoad?.(event);
+				},
+				src: imageUrl ? `${imageUrl}${retrySuffix}` : imageUrl,
+				...baseImageUsesDefaultBehavior ? { showDownloadButtonOnError: false } : {}
+			}),
+			showLoadingIndicator && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "str-chat__modal-gallery__image-loading-overlay",
+				"data-testid": "str-chat__modal-gallery__image-loading-overlay",
+				children: /* @__PURE__ */ jsx(LoadingIndicator, {})
+			}),
+			showRetryIndicator && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "str-chat__modal-gallery__image-load-failed-overlay",
+				"data-testid": "str-chat__modal-gallery__image-load-failed-overlay",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "str-chat__modal-gallery__image-retry-indicator",
+					children: /* @__PURE__ */ jsx(IconRetry, {})
+				})
+			}),
+			showOverlay && /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__modal-gallery__placeholder",
+				children: ["+", overflowCount]
+			})
+		]
+	});
+};
+var itemCountAwareLabel = ({ imageIndex, itemCount, t }) => itemCount === 1 ? t("attachment.modalGallery.openImageGallery.label", "Open image in gallery") : t("attachment.modalGallery.openGalleryImage.label", "Open gallery at image {{ index }}", { index: imageIndex });
+var getBaseImageProps = (item) => {
+	const baseImageProps = {};
+	for (const key of BASE_IMAGE_PROP_KEYS) {
+		const value = item[key];
+		if (value !== void 0) baseImageProps[key] = value;
+	}
+	return baseImageProps;
+};
+//#endregion
+export { ModalGallery };
+
+//# sourceMappingURL=ModalGallery.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalGallery.mjs","names":[],"sources":["../../../../src/components/Attachment/ModalGallery.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport type { BaseImageProps } from '../BaseImage';\nimport type { GalleryItem } from '../Gallery/GalleryContext';\nimport { BaseImage as DefaultBaseImage } from '../BaseImage';\nimport { Gallery as DefaultGallery, GalleryUI } from '../Gallery';\nimport { LoadingIndicator } from '../Loading';\nimport { GlobalModal, type ModalCloseSource } from '../Modal';\nimport {\n  MessageContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\n\nconst MAX_VISIBLE_THUMBNAILS = 4;\nconst BASE_IMAGE_PROP_KEYS = [\n  'className',\n  'crossOrigin',\n  'decoding',\n  'draggable',\n  'fetchPriority',\n  'height',\n  'loading',\n  'onError',\n  'onLoad',\n  'ref',\n  'showDownloadButtonOnError',\n  'sizes',\n  'srcSet',\n  'style',\n  'title',\n  'useMap',\n  'width',\n] as const satisfies ReadonlyArray<keyof Omit<BaseImageProps, 'src'>>;\ntype BaseImagePropsWithoutSrc = Omit<BaseImageProps, 'src'>;\ntype PartialBaseImagePropMap = Partial<\n  Record<(typeof BASE_IMAGE_PROP_KEYS)[number], unknown>\n>;\n\nexport type ModalGalleryProps = {\n  /** Array of media attachments to display */\n  items: GalleryItem[];\n  className?: string;\n  /** Whether clicking the empty gallery background should close the modal (default: true) */\n  closeOnBackgroundClick?: boolean;\n  modalClassName?: string;\n};\n\nexport const ModalGallery = ({\n  className,\n  closeOnBackgroundClick = true,\n  items,\n  modalClassName,\n}: ModalGalleryProps) => {\n  const {\n    BaseImage = DefaultBaseImage,\n    Gallery = DefaultGallery,\n    Modal = GlobalModal,\n  } = useComponentContext();\n  // ModalGallery is also usable standalone, outside a message\n  const { message } = useContext(MessageContext) ?? {};\n  const [modalOpen, setModalOpen] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  // the gallery header renders outside this provider, so sender and timestamp travel on the items\n  const itemsWithSender = useMemo(\n    () =>\n      items.map((item) => ({\n        ...item,\n        createdAt: item.createdAt ?? convertTimestampToDate(message?.created_at),\n        user: item.user ?? message?.user ?? undefined,\n      })),\n    [items, message?.created_at, message?.user],\n  );\n  const usesDefaultBaseImage = BaseImage === DefaultBaseImage;\n\n  const closeModal = useCallback(() => {\n    setModalOpen(false);\n  }, []);\n  const preventOverlayClose = useCallback(\n    (source: ModalCloseSource) => source !== 'overlay',\n    [],\n  );\n\n  const handleThumbnailClick = useCallback((index: number) => {\n    setSelectedIndex(index);\n    setModalOpen(true);\n  }, []);\n\n  const itemCount = items.length;\n  const visibleItems = items.slice(0, MAX_VISIBLE_THUMBNAILS);\n  const overflowCount = itemCount - MAX_VISIBLE_THUMBNAILS;\n\n  return (\n    <>\n      <div\n        className={clsx('str-chat__modal-gallery', className, {\n          'str-chat__modal-gallery--three-images': itemCount === 3,\n          'str-chat__modal-gallery--two-images': itemCount === 2,\n        })}\n      >\n        {visibleItems.map((item, index) => {\n          const isLastVisible = index === MAX_VISIBLE_THUMBNAILS - 1;\n          const showOverlay = isLastVisible && overflowCount > 0;\n\n          return (\n            <ThumbnailButton\n              BaseImage={BaseImage}\n              baseImageUsesDefaultBehavior={usesDefaultBaseImage}\n              index={index}\n              item={item}\n              itemCount={itemCount}\n              key={index}\n              onClick={() => handleThumbnailClick(index)}\n              overflowCount={overflowCount}\n              showOverlay={showOverlay}\n            />\n          );\n        })}\n      </div>\n      <Modal\n        className={clsx('str-chat__gallery-modal', modalClassName)}\n        onClose={closeModal}\n        onCloseAttempt={preventOverlayClose}\n        open={modalOpen}\n      >\n        <Gallery\n          closeOnBackgroundClick={closeOnBackgroundClick}\n          GalleryUI={GalleryUI}\n          initialIndex={selectedIndex}\n          items={itemsWithSender}\n          onRequestClose={closeModal}\n        />\n      </Modal>\n    </>\n  );\n};\n\ntype ThumbnailButtonProps = {\n  BaseImage: React.ComponentType<BaseImageProps>;\n  baseImageUsesDefaultBehavior: boolean;\n  index: number;\n  item: GalleryItem;\n  itemCount: number;\n  onClick: () => void;\n  overflowCount: number;\n  showOverlay: boolean;\n};\n\nconst ThumbnailButton = ({\n  BaseImage,\n  baseImageUsesDefaultBehavior,\n  index,\n  item,\n  itemCount,\n  onClick,\n  overflowCount,\n  showOverlay,\n}: ThumbnailButtonProps) => {\n  const { IconRetry } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const imageUrl = item.imageUrl;\n  const [isLoadFailed, setIsLoadFailed] = useState(false);\n  const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));\n  // Cache-busting suffix appended to image src on retry. Using a suffix instead of\n  // a React key remount keeps the component (and its placeholder) mounted, preventing\n  // layout shifts and height collapse during the reload attempt.\n  const [retrySuffix, setRetrySuffix] = useState('');\n\n  const {\n    onError: itemOnError,\n    onLoad: itemOnLoad,\n    ...baseImageProps\n  } = getBaseImageProps(item);\n  const showRetryIndicator = isLoadFailed && !showOverlay;\n  const showLoadingIndicator = isImageLoading && !showRetryIndicator && !showOverlay;\n\n  const handleButtonClick = () => {\n    if (showRetryIndicator) {\n      setIsLoadFailed(false);\n      setIsImageLoading(true);\n      setRetrySuffix(`&retry=${Date.now()}`);\n      return;\n    }\n\n    onClick();\n  };\n\n  const buttonLabel = showRetryIndicator\n    ? t('common.retryUpload.ariaLabel', 'Retry upload')\n    : itemCountAwareLabel({ imageIndex: index + 1, itemCount, t });\n\n  return (\n    <button\n      aria-label={buttonLabel}\n      className={clsx('str-chat__modal-gallery__image', {\n        'str-chat__modal-gallery__image--load-failed': showRetryIndicator,\n        'str-chat__modal-gallery__image--loading': showLoadingIndicator,\n      })}\n      onClick={handleButtonClick}\n      type='button'\n    >\n      {item.videoThumbnailUrl ? (\n        <VideoThumbnail\n          alt={t('common.userUploadedContent.label', 'User uploaded content')}\n          src={item.videoThumbnailUrl}\n        />\n      ) : (\n        <BaseImage\n          {...baseImageProps}\n          alt={item.alt ?? t('common.userUploadedContent.label', 'User uploaded content')}\n          onError={(event) => {\n            setIsImageLoading(false);\n            setIsLoadFailed(true);\n            itemOnError?.(event);\n          }}\n          onLoad={(event) => {\n            setIsImageLoading(false);\n            setIsLoadFailed(false);\n            itemOnLoad?.(event);\n          }}\n          src={imageUrl ? `${imageUrl}${retrySuffix}` : imageUrl}\n          {...(baseImageUsesDefaultBehavior ? { showDownloadButtonOnError: false } : {})}\n        />\n      )}\n      {showLoadingIndicator && (\n        <div\n          aria-hidden='true'\n          className='str-chat__modal-gallery__image-loading-overlay'\n          data-testid='str-chat__modal-gallery__image-loading-overlay'\n        >\n          <LoadingIndicator />\n        </div>\n      )}\n      {showRetryIndicator && (\n        <div\n          aria-hidden='true'\n          className='str-chat__modal-gallery__image-load-failed-overlay'\n          data-testid='str-chat__modal-gallery__image-load-failed-overlay'\n        >\n          <div className='str-chat__modal-gallery__image-retry-indicator'>\n            <IconRetry />\n          </div>\n        </div>\n      )}\n      {showOverlay && (\n        <div className='str-chat__modal-gallery__placeholder'>+{overflowCount}</div>\n      )}\n    </button>\n  );\n};\n\nconst itemCountAwareLabel = ({\n  imageIndex,\n  itemCount,\n  t,\n}: {\n  imageIndex: number;\n  itemCount: number;\n  t: ReturnType<typeof useTranslationContext>['t'];\n}) =>\n  itemCount === 1\n    ? t('attachment.modalGallery.openImageGallery.label', 'Open image in gallery')\n    : t(\n        'attachment.modalGallery.openGalleryImage.label',\n        'Open gallery at image {{ index }}',\n        {\n          index: imageIndex,\n        },\n      );\n\nconst getBaseImageProps = (item: GalleryItem): BaseImagePropsWithoutSrc => {\n  const baseImageProps: PartialBaseImagePropMap = {};\n  for (const key of BASE_IMAGE_PROP_KEYS) {\n    const value = item[key];\n    if (value !== undefined) {\n      baseImageProps[key] = value;\n    }\n  }\n\n  return baseImageProps as BaseImagePropsWithoutSrc;\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/UnsupportedAttachment.tsx
+var UnsupportedAttachment = () => {
+	const { IconUnsupportedAttachment } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-attachment-unsupported",
+		"data-testid": "attachment-unsupported",
+		children: [/* @__PURE__ */ jsx(IconUnsupportedAttachment, {}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__message-attachment-unsupported__metadata",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment-unsupported__title",
+				"data-testid": "unsupported-attachment-title",
+				children: t("common.unsupportedAttachment.text", "Unsupported attachment")
+			})
+		})]
+	});
+};
+//#endregion
+export { UnsupportedAttachment };
+
+//# sourceMappingURL=UnsupportedAttachment.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnsupportedAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/UnsupportedAttachment.tsx"],"sourcesContent":["import React from 'react';\nimport type { Attachment } from 'stream-chat';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type UnsupportedAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const UnsupportedAttachment = () => {\n  const { IconUnsupportedAttachment } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  return (\n    <div\n      className='str-chat__message-attachment-unsupported'\n      data-testid='attachment-unsupported'\n    >\n      <IconUnsupportedAttachment />\n      <div className='str-chat__message-attachment-unsupported__metadata'>\n        <div\n          className='str-chat__message-attachment-unsupported__title'\n          data-testid='unsupported-attachment-title'\n        >\n          {t('common.unsupportedAttachment.text', 'Unsupported attachment')}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAQA,IAAa,8BAA8B;CACzC,MAAM,EAAE,8BAA8B,yBAAyB;CAC/D,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,2BAAD,CAA4B,CAAA,GAC5B,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IACE,WAAU;IACV,eAAY;cAEX,EAAE,qCAAqC,wBAAwB;GAC7D,CAAA;EACF,CAAA,CACF;;AAET"}

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

@@ -0,0 +1,56 @@
+import { useAttachmentContext } from "../../context/AttachmentContext.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 { getAttachmentPreviewUrl, isPendingUpload } from "stream-chat";
+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 } = useAttachmentContext();
+	const videoElement = useRef(null);
+	const [attachmentConfiguration, setAttachmentConfiguration] = useState();
+	const [showVideo, setShowVideo] = React.useState(() => !shouldGenerateVideoThumbnail || isPendingUpload(attachment));
+	const [playbackRequested, setPlaybackRequested] = React.useState(false);
+	const isUploading = isPendingUpload(attachment);
+	const localDimensions = useLocalVideoDimensions(isUploading ? getAttachmentPreviewUrl(attachment) : void 0);
+	const dimensionVariables = localDimensions ? {
+		"--original-height": localDimensions.height,
+		"--original-width": localDimensions.width
+	} : getCssDimensionsVariables(attachment.thumb_url || "");
+	useLayoutEffect(() => {
+		if (videoElement.current && videoAttachmentSizeHandler) setAttachmentConfiguration(videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail));
+	}, [
+		videoElement,
+		videoAttachmentSizeHandler,
+		attachment,
+		shouldGenerateVideoThumbnail
+	]);
+	const renderThumbnailFirst = Boolean(attachment.thumb_url && shouldGenerateVideoThumbnail);
+	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 React, { type ComponentType, useLayoutEffect, useRef, useState } from 'react';\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 { useLocalVideoDimensions } from './hooks/useLocalVideoDimensions';\nimport { getAttachmentPreviewUrl, isPendingUpload } from 'stream-chat';\nimport {\n  useAttachmentContext,\n  type VideoAttachmentConfiguration,\n} from '../../context/AttachmentContext';\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    useAttachmentContext();\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 || isPendingUpload(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 = isPendingUpload(attachment);\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  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  // 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":";;;;;;;;;;AAmBA,IAAa,mBAAmB,EAC9B,YACA,aAAA,gBAAc,kBACY;CAC1B,MAAM,EAAE,8BAA8B,+BACpC,qBAAqB;CACvB,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,yBAAyB,8BAC9B,SAAuC;CAMzC,MAAM,CAAC,WAAW,gBAAgB,MAAM,eAChC,CAAC,gCAAgC,gBAAgB,UAAU,CACnE;CAGA,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAS,KAAK;CAGtE,MAAM,cAAc,gBAAgB,UAAU;CAI9C,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;CAExD,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;CAGA,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 { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.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("attachment.visibilityDisclaimer.onlyVisible.text", "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  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__visibility-disclaimer'>\n      <IconEyeFill />\n      {t('attachment.visibilityDisclaimer.onlyVisible.text', 'Only visible to you')}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAGA,IAAa,6BAA6B;CACxC,MAAM,EAAE,gBAAgB,yBAAyB;CACjD,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,aAAD,CAAc,CAAA,GACb,EAAE,oDAAoD,qBAAqB,CACzE;;AAET"}

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

@@ -0,0 +1,139 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { PlayButton } from "../Button/PlayButton.mjs";
+import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
+import { 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 { useContext } from "react";
+import { getAttachmentPreviewUrl } from "stream-chat";
+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("common.playbackSpeedX.label", "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, title = t("common.voiceMessage.label", "Voice message") } = attachment;
+	const { duration = 0, file_size, mime_type, waveform_data } = attachment.custom ?? {};
+	/**
+	* 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 } = useContext(MessageContext) ?? {};
+	const threadInstance = useThreadContext();
+	const audioPlayer = useAudioPlayer({
+		durationSeconds: duration ?? 0,
+		fileSize: file_size,
+		mimeType: mime_type,
+		playbackRates,
+		requester: message?.id && `${threadInstance ? 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();
+	const { duration, file_size, mime_type } = attachment.custom ?? {};
+	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: duration ? /* @__PURE__ */ jsx(DurationDisplay, {
+						duration,
+						isPlaying: false,
+						secondsElapsed: void 0
+					}) : /* @__PURE__ */ jsx(FileSizeIndicator$2, {
+						fileSize: file_size,
+						maximumFractionDigits: 0
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx(FileIcon, { mimeType: 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, { useContext } from 'react';\nimport type { Attachment, VoiceRecordingAttachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n} from './components';\nimport { FileIcon } from '../FileIcon';\nimport {\n  MessageContext,\n  useComponentContext,\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';\nimport { useThreadContext } from '../Threads';\nimport { getAttachmentPreviewUrl } from 'stream-chat';\nimport { useAttachmentUploadState } from './hooks/useAttachmentUploadState';\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  attachment?: Attachment;\n  audioPlayer: AudioPlayer;\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('common.playbackSpeedX.label', '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 { asset_url, title = t('common.voiceMessage.label', 'Voice message') } =\n    attachment;\n  const {\n    duration = 0,\n    file_size,\n    mime_type,\n    waveform_data,\n  } = (attachment as VoiceRecordingAttachment).custom ?? {};\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  // also rendered from composer previews, where there is no message\n  const { message } = useContext(MessageContext) ?? {};\n  const threadInstance = useThreadContext();\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      `${threadInstance ? (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  const { duration, file_size, mime_type } =\n    (attachment as VoiceRecordingAttachment).custom ?? {};\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            {duration ? (\n              <DurationDisplay\n                duration={duration}\n                isPlaying={false}\n                secondsElapsed={undefined}\n              />\n            ) : (\n              <FileSizeIndicator fileSize={file_size} maximumFractionDigits={0} />\n            )}\n          </div>\n        </div>\n      </div>\n      <FileIcon mimeType={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":"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"}

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"}