stream-chat-react 13.14.3 → 14.0.0-beta.2

package/dist/components/Attachment/AttachmentContainer.js

@@ -1,158 +0,0 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import ReactPlayer from 'react-player';
-import clsx from 'clsx';
-import * as linkify from 'linkifyjs';
-import { isSharedLocationResponse } from 'stream-chat';
-import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
-import { Audio as DefaultAudio } from './Audio';
-import { VoiceRecording as DefaultVoiceRecording } from './VoiceRecording';
-import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Gallery';
-import { Card as DefaultCard } from './Card';
-import { FileAttachment as DefaultFile } from './FileAttachment';
-import { Geolocation as DefaultGeolocation } from './Geolocation';
-import { UnsupportedAttachment as DefaultUnsupportedAttachment } from './UnsupportedAttachment';
-import { isGalleryAttachmentType, isSvgAttachment } from './utils';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
-export const AttachmentWithinContainer = ({ attachment, children, componentType, }) => {
-    const isGAT = isGalleryAttachmentType(attachment);
-    let extra = '';
-    if (!isGAT && !isSharedLocationResponse(attachment)) {
-        extra =
-            componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url
-                ? 'no-image'
-                : attachment?.actions?.length
-                    ? 'actions'
-                    : '';
-    }
-    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 const AttachmentActionsContainer = ({ actionHandler, attachment, AttachmentActions = DefaultAttachmentActions, }) => {
-    if (!attachment.actions?.length)
-        return null;
-    return (React.createElement(AttachmentActions, { ...attachment, actionHandler: actionHandler, actions: attachment.actions, id: attachment.localMetadata?.id || '', text: attachment.text || '' }));
-};
-function getCssDimensionsVariables(url) {
-    const cssVars = {
-        '--original-height': 1000000,
-        '--original-width': 1000000,
-    };
-    if (linkify.test(url, 'url')) {
-        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 const GalleryContainer = ({ attachment, Gallery = DefaultGallery, }) => {
-    const imageElements = useRef([]);
-    const { imageAttachmentSizeHandler } = useChannelStateContext();
-    const [attachmentConfigurations, setAttachmentConfigurations] = useState([]);
-    useLayoutEffect(() => {
-        if (!imageElements.current || !imageAttachmentSizeHandler)
-            return;
-        const newConfigurations = [];
-        const nonNullImageElements = imageElements.current.filter((e) => !!e);
-        if (nonNullImageElements.length < imageElements.current.length) {
-            imageElements.current = nonNullImageElements;
-        }
-        imageElements.current.forEach((element, i) => {
-            if (!element)
-                return;
-            const config = imageAttachmentSizeHandler(attachment.images[i], element);
-            newConfigurations.push(config);
-        });
-        setAttachmentConfigurations(newConfigurations);
-    }, [imageAttachmentSizeHandler, attachment]);
-    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 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) {
-            const config = imageAttachmentSizeHandler(attachment, imageElement.current);
-            setAttachmentConfiguration(config);
-        }
-    }, [imageElement, imageAttachmentSizeHandler, attachment]);
-    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, { ...imageConfig, innerRef: imageElement }),
-                React.createElement(AttachmentActionsContainer, { ...props }))));
-    }
-    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React.createElement(Image, { ...imageConfig, innerRef: imageElement })));
-};
-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, { ...attachment }),
-                React.createElement(AttachmentActionsContainer, { ...props }))));
-    }
-    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React.createElement(Card, { ...attachment })));
-};
-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 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, isQuoted, VoiceRecording = DefaultVoiceRecording, }) => (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) {
-            const config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);
-            setAttachmentConfiguration(config);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [videoElement, videoAttachmentSizeHandler, attachment]);
-    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, { ...props })))) : (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
-};
-export const GeolocationContainer = ({ Geolocation = DefaultGeolocation, location, }) => (React.createElement(AttachmentWithinContainer, { attachment: location, componentType: 'geolocation' },
-    React.createElement(Geolocation, { location: location })));
-export const UnsupportedAttachmentContainer = ({ attachment, UnsupportedAttachment = DefaultUnsupportedAttachment, }) => (React.createElement(React.Fragment, null,
-    React.createElement(UnsupportedAttachment, { attachment: attachment })));

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { Attachment } from 'stream-chat';
-export type AudioProps = {
-    og: Attachment;
-};
-/**
- * Audio attachment with play/pause button and progress bar
- */
-export declare const Audio: (props: AudioProps) => React.JSX.Element | null;

package/dist/components/Attachment/Audio.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
-import { useAudioPlayer } from '../AudioPlayback';
-import { useStateStore } from '../../store';
-import { useMessageContext } from '../../context';
-// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI
-const AudioAttachmentUI = ({ audioPlayer }) => {
-    const dataTestId = 'audio-widget';
-    const rootClassName = 'str-chat__message-attachment-audio-widget';
-    const { isPlaying, progress } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
-    return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
-        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--play-controls' },
-            React.createElement(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay })),
-        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text' },
-            React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text-first-row' },
-                React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, audioPlayer.title),
-                React.createElement(DownloadButton, { assetUrl: audioPlayer.src })),
-            React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text-second-row' },
-                React.createElement(FileSizeIndicator, { fileSize: audioPlayer.fileSize }),
-                React.createElement(ProgressBar, { onClick: audioPlayer.seek, progress: progress ?? 0 })))));
-};
-const audioPlayerStateSelector = (state) => ({
-    isPlaying: state.isPlaying,
-    progress: state.progressPercent,
-});
-const UnMemoizedAudio = (props) => {
-    const { og: { asset_url, file_size, mime_type, title }, } = props;
-    /**
-     * 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({
-        fileSize: file_size,
-        mimeType: mime_type,
-        requester: message?.id &&
-            `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,
-        src: asset_url,
-        title,
-        waveformData: props.og.waveform_data,
-    });
-    return audioPlayer ? React.createElement(AudioAttachmentUI, { audioPlayer: audioPlayer }) : null;
-};
-/**
- * Audio attachment with play/pause button and progress bar
- */
-export const Audio = React.memo(UnMemoizedAudio);

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { AudioProps } from './Audio';
-import type { RenderAttachmentProps } from './utils';
-export declare const CardAudio: ({ og: { asset_url, author_name, mime_type, og_scrape_url, text, title, title_link }, }: AudioProps) => React.JSX.Element;
-export type CardProps = RenderAttachmentProps['attachment'];
-/**
- * Simple Card Layout for displaying links
- */
-export declare const Card: (props: CardProps) => React.JSX.Element;

package/dist/components/Attachment/Card.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import ReactPlayer from 'react-player';
-import { ImageComponent } from '../Gallery';
-import { SafeAnchor } from '../SafeAnchor';
-import { PlayButton, ProgressBar } from './components';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { useAudioPlayer } from '../AudioPlayback';
-import { useStateStore } from '../../store';
-import { useMessageContext } from '../../context';
-const getHostFromURL = (url) => {
-    if (url !== undefined && url !== null) {
-        const [trimmedUrl] = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/');
-        return trimmedUrl;
-    }
-    return null;
-};
-const UnableToRenderCard = ({ type }) => {
-    const { t } = useTranslationContext('Card');
-    return (React.createElement("div", { className: clsx('str-chat__message-attachment-card', {
-            [`str-chat__message-attachment-card--${type}`]: type,
-        }) },
-        React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
-            React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, t('this content could not be displayed')))));
-};
-const SourceLink = ({ author_name, url, }) => (React.createElement("div", { className: 'str-chat__message-attachment-card--source-link', "data-testid": 'card-source-link' },
-    React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: url, rel: 'noopener noreferrer', target: '_blank' }, author_name || getHostFromURL(url))));
-const CardHeader = (props) => {
-    const { asset_url, dimensions, image, image_url, thumb_url, title, type } = props;
-    let visual = null;
-    if (asset_url && type === 'video') {
-        visual = (React.createElement(ReactPlayer, { className: 'react-player', controls: true, height: '100%', url: asset_url, width: '100%' }));
-    }
-    else if (image) {
-        visual = (React.createElement(ImageComponent, { dimensions: dimensions, fallback: title || image, image_url: image_url, thumb_url: thumb_url }));
-    }
-    return visual ? (React.createElement("div", { className: 'str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header', "data-testid": 'card-header' }, visual)) : null;
-};
-const CardContent = (props) => {
-    const { author_name, og_scrape_url, text, title, title_link, type } = props;
-    const url = title_link || og_scrape_url;
-    return (React.createElement("div", { className: 'str-chat__message-attachment-card--content' }, type === 'audio' ? (React.createElement(CardAudio, { og: props })) : (React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
-        url && React.createElement(SourceLink, { author_name: author_name, url: url }),
-        title && (React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title)),
-        text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text)))));
-};
-const audioPlayerStateSelector = (state) => ({
-    isPlaying: state.isPlaying,
-    progress: state.progressPercent,
-});
-const AudioWidget = ({ mimeType, src }) => {
-    /**
-     * 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({
-        mimeType,
-        requester: message?.id &&
-            `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,
-        src,
-    });
-    const { isPlaying, progress } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
-    if (!audioPlayer)
-        return;
-    return (React.createElement("div", { className: 'str-chat__message-attachment-card-audio-widget--first-row' },
-        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--play-controls' },
-            React.createElement(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay })),
-        React.createElement(ProgressBar, { onClick: audioPlayer.seek, progress: progress ?? 0 })));
-};
-export const CardAudio = ({ og: { asset_url, author_name, mime_type, og_scrape_url, text, title, title_link }, }) => {
-    const url = title_link || og_scrape_url;
-    const dataTestId = 'card-audio-widget';
-    const rootClassName = 'str-chat__message-attachment-card-audio-widget';
-    return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
-        asset_url && React.createElement(AudioWidget, { mimeType: mime_type, src: asset_url }),
-        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--second-row' },
-            url && React.createElement(SourceLink, { author_name: author_name, url: url }),
-            title && (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title)),
-            text && (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--description' }, text)))));
-};
-const UnMemoizedCard = (props) => {
-    const { asset_url, giphy, image_url, thumb_url, title, title_link, type } = props;
-    const { giphyVersion: giphyVersionName } = useChannelStateContext('CardHeader');
-    let image = thumb_url || image_url;
-    const dimensions = {};
-    if (type === 'giphy' && typeof giphy !== 'undefined') {
-        const giphyVersion = giphy[giphyVersionName];
-        image = giphyVersion.url;
-        dimensions.height = giphyVersion.height;
-        dimensions.width = giphyVersion.width;
-    }
-    if (!title && !title_link && !asset_url && !image) {
-        return React.createElement(UnableToRenderCard, null);
-    }
-    return (React.createElement("div", { className: `str-chat__message-attachment-card str-chat__message-attachment-card--${type}` },
-        React.createElement(CardHeader, { ...props, dimensions: dimensions, image: image }),
-        React.createElement(CardContent, { ...props })));
-};
-/**
- * Simple Card Layout for displaying links
- */
-export const Card = React.memo(UnMemoizedCard);

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Attachment } from 'stream-chat';
-export type FileAttachmentProps = {
-    attachment: Attachment;
-};
-export declare const FileAttachment: ({ attachment }: FileAttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/FileAttachment.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { FileIcon } from '../ReactFileUtilities';
-import { DownloadButton, FileSizeIndicator } from './components';
-const UnMemoizedFileAttachment = ({ attachment }) => (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
-    React.createElement(FileIcon, { className: 'str-chat__file-icon', mimeType: attachment.mime_type }),
-    React.createElement("div", { className: 'str-chat__message-attachment-file--item-text' },
-        React.createElement("div", { className: 'str-chat__message-attachment-file--item-first-row' },
-            React.createElement("div", { className: 'str-chat__message-attachment-file--item-name', "data-testid": 'file-title' }, attachment.title),
-            React.createElement(DownloadButton, { assetUrl: attachment.asset_url })),
-        React.createElement(FileSizeIndicator, { fileSize: attachment.file_size }))));
-export const FileAttachment = React.memo(UnMemoizedFileAttachment);

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

@@ -1,13 +0,0 @@
-import type { ComponentType } from 'react';
-import React from 'react';
-import type { Coords, SharedLocationResponse } from 'stream-chat';
-export type GeolocationMapProps = Coords;
-export type GeolocationProps = {
-    location: SharedLocationResponse;
-    GeolocationAttachmentMapPlaceholder?: ComponentType<GeolocationAttachmentMapPlaceholderProps>;
-    GeolocationMap?: ComponentType<GeolocationMapProps>;
-};
-export declare const Geolocation: ({ GeolocationAttachmentMapPlaceholder, GeolocationMap, location, }: GeolocationProps) => React.JSX.Element;
-export type GeolocationAttachmentMapPlaceholderProps = {
-    location: SharedLocationResponse;
-};

package/dist/components/Attachment/Geolocation.js

@@ -1,34 +0,0 @@
-import { useEffect } from 'react';
-import { useRef, useState } from 'react';
-import React from 'react';
-import { useChatContext, useTranslationContext } from '../../context';
-import { ExternalLinkIcon, GeolocationIcon } from './icons';
-export const Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder, GeolocationMap, location, }) => {
-    const { channel, client } = useChatContext();
-    const { t } = useTranslationContext();
-    const [stoppedSharing, setStoppedSharing] = useState(!!location.end_at && new Date(location.end_at).getTime() < new Date().getTime());
-    const timeoutRef = useRef(undefined);
-    const isMyLocation = location.user_id === client.userID;
-    const isLiveLocation = !!location.end_at;
-    useEffect(() => {
-        if (!location.end_at)
-            return;
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => setStoppedSharing(true), new Date(location.end_at).getTime() - Date.now());
-    }, [location.end_at]);
-    return (React.createElement("div", { className: 'str-chat__message-attachment-geolocation', "data-testid": 'attachment-geolocation' },
-        React.createElement("div", { className: 'str-chat__message-attachment-geolocation__location-preview' }, GeolocationMap ? (React.createElement(GeolocationMap, { latitude: location.latitude, longitude: location.longitude })) : (React.createElement(GeolocationAttachmentMapPlaceholder, { location: location }))),
-        React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status' }, isLiveLocation ? (stoppedSharing ? (t('Location sharing ended')) : isMyLocation ? (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active' },
-            React.createElement("button", { className: 'str-chat__message-attachment-geolocation__stop-sharing-button', onClick: () => channel?.stopLiveLocationSharing(location), type: 'button' }, t('Stop sharing')),
-            React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-until' }, t('Live until {{ timestamp }}', {
-                timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),
-            })))) : (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active' },
-            React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-status' }, t('Live location')),
-            React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-until' }, t('Live until {{ timestamp }}', {
-                timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),
-            }))))) : (t('Current location')))));
-};
-const DefaultGeolocationAttachmentMapPlaceholder = ({ location, }) => (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__placeholder', "data-testid": 'geolocation-attachment-map-placeholder' },
-    React.createElement(GeolocationIcon, null),
-    React.createElement("a", { className: 'str-chat__message-attachment-geolocation__placeholder-link', href: `https://maps.google.com?q=${[location.latitude, location.longitude].join()}`, rel: 'noreferrer', target: '_blank' },
-        React.createElement(ExternalLinkIcon, null))));

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Attachment } from 'stream-chat';
-export type UnsupportedAttachmentProps = {
-    attachment: Attachment;
-};
-export declare const UnsupportedAttachment: ({ attachment }: UnsupportedAttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/UnsupportedAttachment.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { FileIcon } from '../ReactFileUtilities';
-import { useTranslationContext } from '../../context';
-export const UnsupportedAttachment = ({ attachment }) => {
-    const { t } = useTranslationContext('UnsupportedAttachment');
-    return (React.createElement("div", { className: 'str-chat__message-attachment-unsupported', "data-testid": 'attachment-unsupported' },
-        React.createElement(FileIcon, { className: 'str-chat__file-icon' }),
-        React.createElement("div", { className: 'str-chat__message-attachment-unsupported__metadata' },
-            React.createElement("div", { className: 'str-chat__message-attachment-unsupported__title', "data-testid": 'unsupported-attachment-title' }, attachment.title || t('Unsupported attachment')))));
-};

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { Attachment } from 'stream-chat';
-export type VoiceRecordingPlayerProps = Pick<VoiceRecordingProps, 'attachment'> & {
-    /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
-    playbackRates?: number[];
-};
-export declare const VoiceRecordingPlayer: ({ attachment, playbackRates, }: VoiceRecordingPlayerProps) => React.JSX.Element | null;
-export type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;
-export declare const QuotedVoiceRecording: ({ attachment }: QuotedVoiceRecordingProps) => React.JSX.Element;
-export type VoiceRecordingProps = {
-    /** The attachment object from the message's attachment list. */
-    attachment: Attachment;
-    /** A boolean flag to signal whether the attachment will be rendered inside the quoted reply. */
-    isQuoted?: boolean;
-};
-export declare const VoiceRecording: ({ attachment, isQuoted }: VoiceRecordingProps) => React.JSX.Element;

package/dist/components/Attachment/VoiceRecording.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { FileSizeIndicator, PlaybackRateButton, PlayButton, WaveProgressBar, } from './components';
-import { displayDuration } from './utils';
-import { FileIcon } from '../ReactFileUtilities';
-import { useMessageContext, useTranslationContext } from '../../context';
-import { useAudioPlayer } from '../AudioPlayback/';
-import { useStateStore } from '../../store';
-const rootClassName = 'str-chat__message-attachment__voice-recording-widget';
-const audioPlayerStateSelector = (state) => ({
-    canPlayRecord: state.canPlayRecord,
-    isPlaying: state.isPlaying,
-    playbackRate: state.currentPlaybackRate,
-    progress: state.progressPercent,
-    secondsElapsed: state.secondsElapsed,
-});
-// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI
-const VoiceRecordingPlayerUI = ({ audioPlayer }) => {
-    const { canPlayRecord, isPlaying, playbackRate, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
-    const displayedDuration = secondsElapsed || audioPlayer.durationSeconds;
-    return (React.createElement("div", { className: rootClassName, "data-testid": 'voice-recording-widget' },
-        React.createElement(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
-        React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__metadata' },
-            React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__title', "data-testid": 'voice-recording-title', title: audioPlayer.title }, audioPlayer.title),
-            React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__audio-state' },
-                React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__timer' }, audioPlayer.durationSeconds ? (displayDuration(displayedDuration)) : (React.createElement(FileSizeIndicator, { fileSize: audioPlayer.fileSize, maximumFractionDigits: 0 }))),
-                React.createElement(WaveProgressBar, { progress: progress, seek: audioPlayer.seek, waveformData: audioPlayer.waveformData || [] }))),
-        React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__right-section' }, isPlaying ? (React.createElement(PlaybackRateButton, { disabled: !canPlayRecord, onClick: audioPlayer.increasePlaybackRate },
-            playbackRate?.toFixed(1),
-            "x")) : (React.createElement(FileIcon, { big: true, mimeType: audioPlayer.mimeType, size: 40 })))));
-};
-export const 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: asset_url,
-        title,
-        waveformData: waveform_data,
-    });
-    return audioPlayer ? React.createElement(VoiceRecordingPlayerUI, { audioPlayer: audioPlayer }) : null;
-};
-export const QuotedVoiceRecording = ({ attachment }) => {
-    const { t } = useTranslationContext();
-    const title = attachment.title || t('Voice message');
-    return (React.createElement("div", { className: rootClassName, "data-testid": 'quoted-voice-recording-widget' },
-        React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__metadata' },
-            title && (React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__title', "data-testid": 'voice-recording-title', title: title }, title)),
-            React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__audio-state' },
-                React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__timer' }, attachment.duration ? (displayDuration(attachment.duration)) : (React.createElement(FileSizeIndicator, { fileSize: attachment.file_size, maximumFractionDigits: 0 }))))),
-        React.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 })));
-};
-export const VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? (React.createElement(QuotedVoiceRecording, { attachment: attachment })) : (React.createElement(VoiceRecordingPlayer, { attachment: attachment }));

package/dist/components/Attachment/attachment-sizing.d.ts

@@ -1,8 +0,0 @@
-import type { Attachment } from 'stream-chat';
-export declare const getImageAttachmentConfiguration: (attachment: Attachment, element: HTMLElement) => {
-    url: string;
-};
-export declare const getVideoAttachmentConfiguration: (attachment: Attachment, element: HTMLElement, shouldGenerateVideoThumbnail: boolean) => {
-    thumbUrl: string | undefined;
-    url: string;
-};

package/dist/components/Attachment/attachment-sizing.js

@@ -1,81 +0,0 @@
-import * as linkify from 'linkifyjs';
-export const getImageAttachmentConfiguration = (attachment, element) => {
-    let newUrl = undefined;
-    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) {
-            // Apply 2x for retina displays
-            resizeDimensions.height *= 2;
-            resizeDimensions.width *= 2;
-            addResizingParamsToUrl(resizeDimensions, url);
-        }
-        newUrl = url.href;
-    }
-    return {
-        url: newUrl || '',
-    };
-};
-export const getVideoAttachmentConfiguration = (attachment, element, shouldGenerateVideoThumbnail) => {
-    let thumbUrl = undefined;
-    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) {
-            // Apply 2x for retina displays
-            resizeDimensions.height *= 2;
-            resizeDimensions.width *= 2;
-            addResizingParamsToUrl(resizeDimensions, url);
-        }
-        thumbUrl = url.href;
-    }
-    return {
-        thumbUrl,
-        url: attachment.asset_url || '',
-    };
-};
-const 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, 
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        cssSizeRestriction.maxHeight || cssSizeRestriction.height, cssSizeRestriction.maxWidth);
-    }
-    else {
-        resizeDimensions = undefined;
-    }
-    return resizeDimensions;
-};
-const getResizeDimensions = (originalHeight, originalWidth, maxHeight, maxWidth) => ({
-    height: Math.round(Math.max(maxHeight, (maxWidth / originalWidth) * originalHeight)),
-    width: Math.round(Math.max(maxHeight, (maxWidth / originalHeight) * originalWidth)),
-});
-const 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 };
-};
-const getValueRepresentationOfCSSProperty = (property) => {
-    if (!property.endsWith('px')) {
-        return undefined;
-    }
-    const number = parseFloat(property);
-    return isNaN(number) ? undefined : number;
-};
-const addResizingParamsToUrl = (resizeDimensions, url) => {
-    url.searchParams.set('h', resizeDimensions.height.toString());
-    url.searchParams.set('w', resizeDimensions.width.toString());
-};

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

@@ -1,9 +0,0 @@
-export declare const resampleWaveformData: (waveformData: number[], amplitudesCount: number) => number[];
-/**
- * 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
- */
-export declare function downSample(data: number[], targetOutputSize: number): number[];
-export declare const upSample: (values: number[], targetSize: number) => number[];