stream-chat-react 11.20.0 → 12.0.0-rc.1

package/dist/components/Attachment/Attachment.d.ts

@@ -41,4 +41,3 @@ export type AttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
  */
 export declare const Attachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=Attachment.d.ts.map

package/dist/components/Attachment/Attachment.js

@@ -1,8 +1,7 @@
-import { __assign, __rest, __spreadArray } from "tslib";
 import React, { useMemo } from 'react';
 import { isAudioAttachment, isFileAttachment, isMediaAttachment, isScrapedContent, isUploadedImage, isVoiceRecordingAttachment, } from './utils';
 import { AudioContainer, CardContainer, FileContainer, GalleryContainer, ImageContainer, MediaContainer, UnsupportedAttachmentContainer, VoiceRecordingContainer, } from './AttachmentContainer';
-var CONTAINER_MAP = {
+const CONTAINER_MAP = {
     audio: AudioContainer,
     card: CardContainer,
     file: FileContainer,
@@ -10,7 +9,7 @@ var CONTAINER_MAP = {
     unsupported: UnsupportedAttachmentContainer,
     voiceRecording: VoiceRecordingContainer,
 };
-export var ATTACHMENT_GROUPS_ORDER = [
+export const ATTACHMENT_GROUPS_ORDER = [
     'card',
     'gallery',
     'image',
@@ -23,23 +22,20 @@ export var ATTACHMENT_GROUPS_ORDER = [
 /**
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
  */
-export var Attachment = function (props) {
-    var attachments = props.attachments;
+export const Attachment = (props) => {
+    const { attachments } = props;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var groupedAttachments = useMemo(function () { return renderGroupedAttachments(props); }, [attachments]);
-    return (React.createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce(function (acc, groupName) { return __spreadArray(__spreadArray([], acc, true), groupedAttachments[groupName], true); }, [])));
+    const groupedAttachments = useMemo(() => renderGroupedAttachments(props), [attachments]);
+    return (React.createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce((acc, groupName) => [...acc, ...groupedAttachments[groupName]], [])));
 };
-var renderGroupedAttachments = function (_a) {
-    var attachments = _a.attachments, rest = __rest(_a, ["attachments"]);
-    var uploadedImages = attachments.filter(function (attachment) {
-        return isUploadedImage(attachment);
-    });
-    var containers = attachments
-        .filter(function (attachment) { return !isUploadedImage(attachment); })
-        .reduce(function (typeMap, attachment) {
-        var attachmentType = getAttachmentType(attachment);
-        var Container = CONTAINER_MAP[attachmentType];
-        typeMap[attachmentType].push(React.createElement(Container, __assign({ key: "".concat(attachmentType, "-").concat(typeMap[attachmentType].length) }, rest, { attachment: attachment })));
+const renderGroupedAttachments = ({ attachments, ...rest }) => {
+    const uploadedImages = attachments.filter((attachment) => isUploadedImage(attachment));
+    const containers = attachments
+        .filter((attachment) => !isUploadedImage(attachment))
+        .reduce((typeMap, attachment) => {
+        const attachmentType = getAttachmentType(attachment);
+        const Container = CONTAINER_MAP[attachmentType];
+        typeMap[attachmentType].push(React.createElement(Container, { key: `${attachmentType}-${typeMap[attachmentType].length}`, ...rest, attachment: attachment }));
         return typeMap;
     }, {
         audio: [],
@@ -56,20 +52,20 @@ var renderGroupedAttachments = function (_a) {
     });
     if (uploadedImages.length > 1) {
         containers['gallery'] = [
-            React.createElement(GalleryContainer, __assign({ key: 'gallery-container' }, rest, { attachment: {
+            React.createElement(GalleryContainer, { key: 'gallery-container', ...rest, attachment: {
                     images: uploadedImages,
                     type: 'gallery',
-                } })),
+                } }),
         ];
     }
     else if (uploadedImages.length === 1) {
         containers['image'] = [
-            React.createElement(ImageContainer, __assign({ key: 'image-container' }, rest, { attachment: uploadedImages[0] })),
+            React.createElement(ImageContainer, { key: 'image-container', ...rest, attachment: uploadedImages[0] }),
         ];
     }
     return containers;
 };
-var getAttachmentType = function (attachment) {
+const getAttachmentType = (attachment) => {
     if (isScrapedContent(attachment)) {
         return 'card';
     }

package/dist/components/Attachment/AttachmentActions.d.ts

@@ -16,4 +16,3 @@ export type AttachmentActionsProps<StreamChatGenerics extends DefaultStreamChatG
  * A component for rendering the actions you can take on an attachment.
  */
 export declare const AttachmentActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AttachmentActionsProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=AttachmentActions.d.ts.map

package/dist/components/Attachment/AttachmentActions.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { useTranslationContext } from '../../context';
-var UnMemoizedAttachmentActions = function (props) {
-    var actionHandler = props.actionHandler, actions = props.actions, id = props.id, text = props.text;
-    var t = useTranslationContext('UnMemoizedAttachmentActions').t;
-    var handleActionClick = function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(name, value, event); };
+const UnMemoizedAttachmentActions = (props) => {
+    const { actionHandler, actions, id, text } = props;
+    const { t } = useTranslationContext('UnMemoizedAttachmentActions');
+    const handleActionClick = (event, name, value) => actionHandler?.(name, value, event);
     return (React.createElement("div", { className: 'str-chat__message-attachment-actions' },
         React.createElement("div", { className: 'str-chat__message-attachment-actions-form' },
             React.createElement("span", null, text),
-            actions.map(function (action) { return (React.createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text ? t(action.text) : null)); }))));
+            actions.map((action) => (React.createElement("button", { className: `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`, "data-testid": `${action.name}`, "data-value": action.value, key: `${id}-${action.value}`, onClick: (event) => handleActionClick(event, action.name, action.value) }, action.text ? t(action.text) : null))))));
 };
 /**
  * A component for rendering the actions you can take on an attachment.
  */
-export var AttachmentActions = React.memo(UnMemoizedAttachmentActions);
+export const AttachmentActions = React.memo(UnMemoizedAttachmentActions);

package/dist/components/Attachment/AttachmentContainer.d.ts

@@ -1,7 +1,12 @@
 import React, { PropsWithChildren } from 'react';
-import { AttachmentContainerProps, RenderAttachmentProps, RenderGalleryProps } from './utils';
+import { AttachmentComponentType, GalleryAttachment, RenderAttachmentProps, RenderGalleryProps } from './utils';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const AttachmentWithinContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, children, componentType, }: React.PropsWithChildren<AttachmentContainerProps<StreamChatGenerics>>) => React.JSX.Element;
+import type { Attachment } from 'stream-chat';
+export type AttachmentContainerProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    attachment: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>;
+    componentType: AttachmentComponentType;
+};
+export declare const AttachmentWithinContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, children, componentType, }: PropsWithChildren<AttachmentContainerProps<StreamChatGenerics>>) => React.JSX.Element;
 export declare const AttachmentActionsContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ actionHandler, attachment, AttachmentActions, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element | null;
 export declare const GalleryContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, Gallery, }: RenderGalleryProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const ImageContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
@@ -11,4 +16,3 @@ export declare const AudioContainer: <StreamChatGenerics extends DefaultStreamCh
 export declare const VoiceRecordingContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, VoiceRecording, isQuoted, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const MediaContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const UnsupportedAttachmentContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, UnsupportedAttachment, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=AttachmentContainer.d.ts.map

package/dist/components/Attachment/AttachmentContainer.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 import clsx from 'clsx';
@@ -12,152 +11,140 @@ import { FileAttachment as DefaultFile } from './FileAttachment';
 import { UnsupportedAttachment as DefaultUnsupportedAttachment } from './UnsupportedAttachment';
 import { isGalleryAttachmentType, isSvgAttachment, } from './utils';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-export var AttachmentWithinContainer = function (_a) {
-    var _b;
-    var _c;
-    var attachment = _a.attachment, children = _a.children, componentType = _a.componentType;
-    var isGAT = isGalleryAttachmentType(attachment);
-    var extra = '';
+export const AttachmentWithinContainer = ({ attachment, children, componentType, }) => {
+    const isGAT = isGalleryAttachmentType(attachment);
+    let extra = '';
     if (!isGAT) {
         extra =
-            componentType === 'card' && !(attachment === null || attachment === void 0 ? void 0 : attachment.image_url) && !(attachment === null || attachment === void 0 ? void 0 : attachment.thumb_url)
+            componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url
                 ? 'no-image'
-                : ((_c = attachment === null || attachment === void 0 ? void 0 : attachment.actions) === null || _c === void 0 ? void 0 : _c.length)
+                : attachment?.actions?.length
                     ? 'actions'
                     : '';
     }
-    var classNames = clsx('str-chat__message-attachment str-chat__message-attachment-dynamic-size', (_b = {},
-        _b["str-chat__message-attachment--".concat(componentType)] = componentType,
-        _b["str-chat__message-attachment--".concat(attachment === null || attachment === void 0 ? void 0 : attachment.type)] = attachment === null || attachment === void 0 ? void 0 : attachment.type,
-        _b["str-chat__message-attachment--".concat(componentType, "--").concat(extra)] = componentType && extra,
-        _b['str-chat__message-attachment--svg-image'] = isSvgAttachment(attachment),
-        _b['str-chat__message-attachment-with-actions'] = extra === 'actions',
-        _b));
+    const classNames = clsx('str-chat__message-attachment str-chat__message-attachment-dynamic-size', {
+        [`str-chat__message-attachment--${componentType}`]: componentType,
+        [`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
+        [`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
+        'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),
+        'str-chat__message-attachment-with-actions': extra === 'actions',
+    });
     return React.createElement("div", { className: classNames }, children);
 };
-export var AttachmentActionsContainer = function (_a) {
-    var _b;
-    var actionHandler = _a.actionHandler, attachment = _a.attachment, _c = _a.AttachmentActions, AttachmentActions = _c === void 0 ? DefaultAttachmentActions : _c;
-    if (!((_b = attachment.actions) === null || _b === void 0 ? void 0 : _b.length))
+export const AttachmentActionsContainer = ({ actionHandler, attachment, AttachmentActions = DefaultAttachmentActions, }) => {
+    if (!attachment.actions?.length)
         return null;
-    return (React.createElement(AttachmentActions, __assign({}, attachment, { actionHandler: actionHandler, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' })));
+    return (React.createElement(AttachmentActions, { ...attachment, actionHandler: actionHandler, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' }));
 };
 function getCssDimensionsVariables(url) {
-    var cssVars = {
+    const cssVars = {
         '--original-height': 1000000,
         '--original-width': 1000000,
     };
     if (linkify.test(url, 'url')) {
-        var urlParams = new URL(url).searchParams;
-        var oh = Number(urlParams.get('oh'));
-        var ow = Number(urlParams.get('ow'));
-        var originalHeight = oh > 1 ? oh : 1000000;
-        var originalWidth = ow > 1 ? ow : 1000000;
+        const urlParams = new URL(url).searchParams;
+        const oh = Number(urlParams.get('oh'));
+        const ow = Number(urlParams.get('ow'));
+        const originalHeight = oh > 1 ? oh : 1000000;
+        const originalWidth = ow > 1 ? ow : 1000000;
         cssVars['--original-width'] = originalWidth;
         cssVars['--original-height'] = originalHeight;
     }
     return cssVars;
 }
-export var GalleryContainer = function (_a) {
-    var attachment = _a.attachment, _b = _a.Gallery, Gallery = _b === void 0 ? DefaultGallery : _b;
-    var imageElements = useRef([]);
-    var imageAttachmentSizeHandler = useChannelStateContext().imageAttachmentSizeHandler;
-    var _c = useState([]), attachmentConfigurations = _c[0], setAttachmentConfigurations = _c[1];
-    useLayoutEffect(function () {
+export const GalleryContainer = ({ attachment, Gallery = DefaultGallery, }) => {
+    const imageElements = useRef([]);
+    const { imageAttachmentSizeHandler } = useChannelStateContext();
+    const [attachmentConfigurations, setAttachmentConfigurations] = useState([]);
+    useLayoutEffect(() => {
         if (imageElements.current &&
-            imageElements.current.every(function (element) { return !!element; }) &&
+            imageElements.current.every((element) => !!element) &&
             imageAttachmentSizeHandler) {
-            var newConfigurations_1 = [];
-            imageElements.current.forEach(function (element, i) {
-                var config = imageAttachmentSizeHandler(attachment.images[i], element);
-                newConfigurations_1.push(config);
+            const newConfigurations = [];
+            imageElements.current.forEach((element, i) => {
+                const config = imageAttachmentSizeHandler(attachment.images[i], element);
+                newConfigurations.push(config);
             });
-            setAttachmentConfigurations(newConfigurations_1);
+            setAttachmentConfigurations(newConfigurations);
         }
     }, [imageElements, imageAttachmentSizeHandler, attachment]);
-    var images = attachment.images.map(function (image, i) {
-        var _a, _b, _c;
-        return (__assign(__assign({}, image), { previewUrl: ((_a = attachmentConfigurations[i]) === null || _a === void 0 ? void 0 : _a.url) || 'about:blank', style: getCssDimensionsVariables(((_b = attachment.images[i]) === null || _b === void 0 ? void 0 : _b.image_url) || ((_c = attachment.images[i]) === null || _c === void 0 ? void 0 : _c.thumb_url) || '') }));
-    });
+    const images = attachment.images.map((image, i) => ({
+        ...image,
+        previewUrl: attachmentConfigurations[i]?.url || 'about:blank',
+        style: getCssDimensionsVariables(attachment.images[i]?.image_url || attachment.images[i]?.thumb_url || ''),
+    }));
     return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'gallery' },
         React.createElement(Gallery, { images: images || [], innerRefs: imageElements, key: 'gallery' })));
 };
-export var ImageContainer = function (props) {
-    var attachment = props.attachment, _a = props.Image, Image = _a === void 0 ? DefaultImage : _a;
-    var componentType = 'image';
-    var imageElement = useRef(null);
-    var imageAttachmentSizeHandler = useChannelStateContext().imageAttachmentSizeHandler;
-    var _b = useState(undefined), attachmentConfiguration = _b[0], setAttachmentConfiguration = _b[1];
-    useLayoutEffect(function () {
+export const ImageContainer = (props) => {
+    const { attachment, Image = DefaultImage } = props;
+    const componentType = 'image';
+    const imageElement = useRef(null);
+    const { imageAttachmentSizeHandler } = useChannelStateContext();
+    const [attachmentConfiguration, setAttachmentConfiguration] = useState(undefined);
+    useLayoutEffect(() => {
         if (imageElement.current && imageAttachmentSizeHandler) {
-            var config = imageAttachmentSizeHandler(attachment, imageElement.current);
+            const config = imageAttachmentSizeHandler(attachment, imageElement.current);
             setAttachmentConfiguration(config);
         }
     }, [imageElement, imageAttachmentSizeHandler, attachment]);
-    var imageConfig = __assign(__assign({}, attachment), { previewUrl: (attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.url) || 'about:blank', style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || '') });
+    const imageConfig = {
+        ...attachment,
+        previewUrl: attachmentConfiguration?.url || 'about:blank',
+        style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || ''),
+    };
     if (attachment.actions && attachment.actions.length) {
         return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
             React.createElement("div", { className: 'str-chat__attachment' },
-                React.createElement(Image, __assign({}, imageConfig, { innerRef: imageElement })),
-                React.createElement(AttachmentActionsContainer, __assign({}, props)))));
+                React.createElement(Image, { ...imageConfig, innerRef: imageElement }),
+                React.createElement(AttachmentActionsContainer, { ...props }))));
     }
     return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React.createElement(Image, __assign({}, imageConfig, { innerRef: imageElement }))));
+        React.createElement(Image, { ...imageConfig, innerRef: imageElement })));
 };
-export var CardContainer = function (props) {
-    var attachment = props.attachment, _a = props.Card, Card = _a === void 0 ? DefaultCard : _a;
-    var componentType = 'card';
+export const CardContainer = (props) => {
+    const { attachment, Card = DefaultCard } = props;
+    const componentType = 'card';
     if (attachment.actions && attachment.actions.length) {
         return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
             React.createElement("div", { className: 'str-chat__attachment' },
-                React.createElement(Card, __assign({}, attachment)),
-                React.createElement(AttachmentActionsContainer, __assign({}, props)))));
+                React.createElement(Card, { ...attachment }),
+                React.createElement(AttachmentActionsContainer, { ...props }))));
     }
     return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React.createElement(Card, __assign({}, attachment))));
+        React.createElement(Card, { ...attachment })));
 };
-export var FileContainer = function (_a) {
-    var attachment = _a.attachment, _b = _a.File, File = _b === void 0 ? DefaultFile : _b;
+export const FileContainer = ({ attachment, File = DefaultFile, }) => {
     if (!attachment.asset_url)
         return null;
     return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'file' },
         React.createElement(File, { attachment: attachment })));
 };
-export var AudioContainer = function (_a) {
-    var attachment = _a.attachment, _b = _a.Audio, Audio = _b === void 0 ? DefaultAudio : _b;
-    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'audio' },
-        React.createElement("div", { className: 'str-chat__attachment' },
-            React.createElement(Audio, { og: attachment }))));
-};
-export var VoiceRecordingContainer = function (_a) {
-    var attachment = _a.attachment, _b = _a.VoiceRecording, VoiceRecording = _b === void 0 ? DefaultVoiceRecording : _b, isQuoted = _a.isQuoted;
-    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'voiceRecording' },
-        React.createElement("div", { className: 'str-chat__attachment' },
-            React.createElement(VoiceRecording, { attachment: attachment, isQuoted: isQuoted }))));
-};
-export var MediaContainer = function (props) {
-    var _a;
-    var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer : _b;
-    var componentType = 'media';
-    var _c = useChannelStateContext(), shouldGenerateVideoThumbnail = _c.shouldGenerateVideoThumbnail, videoAttachmentSizeHandler = _c.videoAttachmentSizeHandler;
-    var videoElement = useRef(null);
-    var _d = useState(), attachmentConfiguration = _d[0], setAttachmentConfiguration = _d[1];
-    useLayoutEffect(function () {
+export const AudioContainer = ({ attachment, Audio = DefaultAudio, }) => (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'audio' },
+    React.createElement("div", { className: 'str-chat__attachment' },
+        React.createElement(Audio, { og: attachment }))));
+export const VoiceRecordingContainer = ({ attachment, VoiceRecording = DefaultVoiceRecording, isQuoted, }) => (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'voiceRecording' },
+    React.createElement("div", { className: 'str-chat__attachment' },
+        React.createElement(VoiceRecording, { attachment: attachment, isQuoted: isQuoted }))));
+export const MediaContainer = (props) => {
+    const { attachment, Media = ReactPlayer } = props;
+    const componentType = 'media';
+    const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
+    const videoElement = useRef(null);
+    const [attachmentConfiguration, setAttachmentConfiguration,] = useState();
+    useLayoutEffect(() => {
         if (videoElement.current && videoAttachmentSizeHandler) {
-            var config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);
+            const config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);
             setAttachmentConfiguration(config);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [videoElement, videoAttachmentSizeHandler, attachment]);
-    var content = (React.createElement("div", { className: 'str-chat__player-wrapper', "data-testid": 'video-wrapper', ref: videoElement, style: getCssDimensionsVariables(attachment.thumb_url || '') },
-        React.createElement(Media, { className: 'react-player', config: { file: { attributes: { poster: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.thumbUrl } } }, controls: true, height: '100%', url: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.url, width: '100%' })));
-    return ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React.createElement("div", { className: 'str-chat__attachment str-chat__attachment-media' },
+    const content = (React.createElement("div", { className: 'str-chat__player-wrapper', "data-testid": 'video-wrapper', ref: videoElement, style: getCssDimensionsVariables(attachment.thumb_url || '') },
+        React.createElement(Media, { className: 'react-player', config: { file: { attributes: { poster: attachmentConfiguration?.thumbUrl } } }, controls: true, height: '100%', url: attachmentConfiguration?.url, width: '100%' })));
+    return attachment.actions?.length ? (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+        React.createElement("div", { className: 'str-chat__attachment' },
             content,
-            React.createElement(AttachmentActionsContainer, __assign({}, props))))) : (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
-};
-export var UnsupportedAttachmentContainer = function (_a) {
-    var attachment = _a.attachment, _b = _a.UnsupportedAttachment, UnsupportedAttachment = _b === void 0 ? DefaultUnsupportedAttachment : _b;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(UnsupportedAttachment, { attachment: attachment })));
+            React.createElement(AttachmentActionsContainer, { ...props })))) : (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
 };
+export const UnsupportedAttachmentContainer = ({ attachment, UnsupportedAttachment = DefaultUnsupportedAttachment, }) => (React.createElement(React.Fragment, null,
+    React.createElement(UnsupportedAttachment, { attachment: attachment })));

package/dist/components/Attachment/Audio.d.ts

@@ -7,5 +7,4 @@ export type AudioProps<StreamChatGenerics extends DefaultStreamChatGenerics = De
 /**
  * Audio attachment with play/pause button and progress bar
  */
-export declare const Audio: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AudioProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=Audio.d.ts.map
+export declare const Audio: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AudioProps<StreamChatGenerics>) => React.JSX.Element | null;

package/dist/components/Attachment/Audio.js

@@ -1,41 +1,15 @@
-import { __assign } from "tslib";
 import React from 'react';
 import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
 import { useAudioController } from './hooks/useAudioController';
-import { useChatContext } from '../../context/ChatContext';
-var AudioV1 = function (_a) {
-    var og = _a.og;
-    // fixme: pass mimeType if available
-    var asset_url = og.asset_url, description = og.description, image_url = og.image_url, mime_type = og.mime_type, text = og.text, title = og.title;
-    var _b = useAudioController({ mimeType: mime_type }), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, togglePlay = _b.togglePlay;
-    return (React.createElement("div", { className: 'str-chat__audio' },
-        React.createElement("div", { className: 'str-chat__audio__wrapper' },
-            React.createElement("audio", { ref: audioRef },
-                React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
-            React.createElement("div", { className: 'str-chat__audio__image' },
-                React.createElement("div", { className: 'str-chat__audio__image--overlay' }, !isPlaying ? (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'play-audio', onClick: togglePlay },
-                    React.createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
-                        React.createElement("path", { d: 'M32 58c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26zm0 6C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm13.237-28.412L26.135 45.625a3.27 3.27 0 0 1-4.426-1.4 3.319 3.319 0 0 1-.372-1.47L21 23.36c-.032-1.823 1.41-3.327 3.222-3.358a3.263 3.263 0 0 1 1.473.322l19.438 9.36a3.311 3.311 0 0 1 .103 5.905z', fillRule: 'nonzero' })))) : (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'pause-audio', onClick: togglePlay },
-                    React.createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
-                        React.createElement("path", { d: 'M32 58.215c14.478 0 26.215-11.737 26.215-26.215S46.478 5.785 32 5.785 5.785 17.522 5.785 32 17.522 58.215 32 58.215zM32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm-7.412-45.56h2.892a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.892a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17zm12.293 0h2.893a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.893a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17z', fillRule: 'nonzero' }))))),
-                image_url && React.createElement("img", { alt: "".concat(description), src: image_url })),
-            React.createElement("div", { className: 'str-chat__audio__content' },
-                React.createElement("span", { className: 'str-chat__audio__content--title' },
-                    React.createElement("strong", null, title)),
-                React.createElement("span", { className: 'str-chat__audio__content--subtitle' }, text),
-                React.createElement("div", { className: 'str-chat__audio__content--progress' },
-                    React.createElement("div", { "data-progress": progress, "data-testid": 'audio-progress', role: 'progressbar', style: { width: "".concat(progress, "%") } }))))));
-};
-var AudioV2 = function (_a) {
-    var og = _a.og;
-    var asset_url = og.asset_url, file_size = og.file_size, mime_type = og.mime_type, title = og.title;
-    var _b = useAudioController({
+const UnMemoizedAudio = (props) => {
+    const { og: { asset_url, file_size, mime_type, title }, } = props;
+    const { audioRef, isPlaying, progress, seek, togglePlay } = useAudioController({
         mimeType: mime_type,
-    }), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, seek = _b.seek, togglePlay = _b.togglePlay;
+    });
     if (!asset_url)
         return null;
-    var dataTestId = 'audio-widget';
-    var rootClassName = 'str-chat__message-attachment-audio-widget';
+    const dataTestId = 'audio-widget';
+    const rootClassName = 'str-chat__message-attachment-audio-widget';
     return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
         React.createElement("audio", { ref: audioRef },
             React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
@@ -49,11 +23,7 @@ var AudioV2 = function (_a) {
                 React.createElement(FileSizeIndicator, { fileSize: file_size }),
                 React.createElement(ProgressBar, { onClick: seek, progress: progress })))));
 };
-var UnMemoizedAudio = function (props) {
-    var themeVersion = useChatContext('Audio').themeVersion;
-    return themeVersion === '1' ? React.createElement(AudioV1, __assign({}, props)) : React.createElement(AudioV2, __assign({}, props));
-};
 /**
  * Audio attachment with play/pause button and progress bar
  */
-export var Audio = React.memo(UnMemoizedAudio);
+export const Audio = React.memo(UnMemoizedAudio);

package/dist/components/Attachment/Card.d.ts

@@ -7,4 +7,3 @@ export type CardProps = RenderAttachmentProps['attachment'];
  * Simple Card Layout for displaying links
  */
 export declare const Card: (props: CardProps) => React.JSX.Element;
-//# sourceMappingURL=Card.d.ts.map