stream-chat-react 13.11.0 → 13.12.0

package/dist/components/AudioPlayback/WithAudioPlayback.js

@@ -0,0 +1,57 @@
+import React, { useContext, useState } from 'react';
+import { useEffect } from 'react';
+import { AudioPlayerPool } from './AudioPlayerPool';
+import { audioPlayerNotificationsPluginFactory } from './plugins/AudioPlayerNotificationsPlugin';
+import { useChatContext, useTranslationContext } from '../../context';
+import { useStateStore } from '../../store';
+const AudioPlayerContext = React.createContext({
+    audioPlayers: null,
+});
+export const WithAudioPlayback = ({ allowConcurrentPlayback, children, }) => {
+    const [audioPlayers] = useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));
+    useEffect(() => () => {
+        audioPlayers.clear();
+    }, [audioPlayers]);
+    return (React.createElement(AudioPlayerContext.Provider, { value: { audioPlayers } }, children));
+};
+const makeAudioPlayerId = ({ requester, src }) => `${requester ?? 'requester-unknown'}:${src}`;
+export const useAudioPlayer = ({ durationSeconds, fileSize, mimeType, playbackRates, plugins, requester = '', src, title, waveformData, }) => {
+    const { client } = useChatContext();
+    const { t } = useTranslationContext();
+    const { audioPlayers } = useContext(AudioPlayerContext);
+    const audioPlayer = src && audioPlayers
+        ? audioPlayers.getOrAdd({
+            durationSeconds,
+            fileSize,
+            id: makeAudioPlayerId({ requester, src }),
+            mimeType,
+            playbackRates,
+            plugins,
+            src,
+            title,
+            waveformData,
+        })
+        : undefined;
+    useEffect(() => {
+        if (!audioPlayer)
+            return;
+        /**
+         * Avoid having to pass client and translation function to AudioPlayer instances
+         * and instead provide plugin that takes care of translated notifications.
+         */
+        const notificationsPlugin = audioPlayerNotificationsPluginFactory({ client, t });
+        audioPlayer.setPlugins((currentPlugins) => [
+            ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),
+            notificationsPlugin,
+        ]);
+    }, [audioPlayer, client, t]);
+    return audioPlayer;
+};
+const activeAudioPlayerSelector = ({ activeAudioPlayer }) => ({
+    activeAudioPlayer,
+});
+export const useActiveAudioPlayer = () => {
+    const { audioPlayers } = useContext(AudioPlayerContext);
+    const { activeAudioPlayer } = useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};
+    return activeAudioPlayer;
+};

package/dist/components/AudioPlayback/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AudioPlayer';
+export * from './plugins';
+export { useActiveAudioPlayer, useAudioPlayer, type UseAudioPlayerProps, type WithAudioPlaybackProps, WithAudioPlayback, } from './WithAudioPlayback';

package/dist/components/AudioPlayback/index.js

@@ -0,0 +1,3 @@
+export * from './AudioPlayer';
+export * from './plugins';
+export { useActiveAudioPlayer, useAudioPlayer, WithAudioPlayback, } from './WithAudioPlayback';

package/dist/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { AudioPlayerPlugin } from './AudioPlayerPlugin';
+import type { StreamChat } from 'stream-chat';
+import type { TFunction } from 'i18next';
+export declare const audioPlayerNotificationsPluginFactory: ({ client, t, }: {
+    client: StreamChat;
+    t: TFunction;
+}) => AudioPlayerPlugin;

package/dist/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.js

@@ -0,0 +1,25 @@
+export const audioPlayerNotificationsPluginFactory = ({ client, t, }) => {
+    const errors = {
+        'failed-to-start': new Error(t('Failed to play the recording')),
+        'not-playable': new Error(t('Recording format is not supported and cannot be reproduced')),
+        'seek-not-supported': new Error(t('Cannot seek in the recording')),
+    };
+    return {
+        id: 'AudioPlayerNotificationsPlugin',
+        onError: ({ errCode, error: e }) => {
+            const error = (errCode && errors[errCode]) ??
+                e ??
+                new Error(t('Error reproducing the recording'));
+            client?.notifications.addError({
+                message: error.message,
+                options: {
+                    originalError: error,
+                    type: 'browser:audio:playback:error',
+                },
+                origin: {
+                    emitter: 'AudioPlayer',
+                },
+            });
+        },
+    };
+};

package/dist/components/AudioPlayback/plugins/AudioPlayerPlugin.d.ts

@@ -0,0 +1,10 @@
+import type { AudioPlayer, RegisterAudioPlayerErrorParams } from '../AudioPlayer';
+export type AudioPlayerPluginContext = {
+    player: AudioPlayer;
+};
+export type AudioPlayerPlugin = {
+    id: string;
+    onInit?(ctx: AudioPlayerPluginContext): void;
+    onError?(ctx: AudioPlayerPluginContext & RegisterAudioPlayerErrorParams): void;
+    onRemove?(ctx: AudioPlayerPluginContext): void;
+};

package/dist/components/AudioPlayback/plugins/AudioPlayerPlugin.js

@@ -0,0 +1 @@
+export {};

package/dist/components/AudioPlayback/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from './AudioPlayerPlugin';

package/dist/components/AudioPlayback/plugins/index.js

@@ -0,0 +1 @@
+export * from './AudioPlayerPlugin';

package/dist/components/Channel/Channel.d.ts

@@ -9,6 +9,8 @@ type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Atta
 export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;
+    /** Allows multiple audio players to play the audio at the same time. Disabled by default. */
+    allowConcurrentAudioPlayback?: boolean;
     /** The connected and active channel */
     channel?: StreamChannel;
     /**

package/dist/components/Channel/Channel.js

@@ -21,6 +21,7 @@ import { useThreadContext } from '../Threads';
 import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
 import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
+import { WithAudioPlayback } from '../AudioPlayback';
 const ChannelContainer = ({ children, className: additionalClassName, ...props }) => {
     const { customClasses, theme } = useChatContext('Channel');
     const { channelClass, chatClass } = useChannelContainerClasses({
@@ -47,7 +48,7 @@ const UnMemoizedChannel = (props) => {
     return React.createElement(ChannelInner, { ...props, channel: channel, key: channel.cid });
 };
 const ChannelInner = (props) => {
-    const { activeUnreadHandler, channel, channelQueryOptions: propChannelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, onMentionsClick, onMentionsHover, skipMessageDataMemoization, } = props;
+    const { activeUnreadHandler, allowConcurrentAudioPlayback, channel, channelQueryOptions: propChannelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, onMentionsClick, onMentionsHover, skipMessageDataMemoization, } = props;
     const channelQueryOptions = useMemo(() => defaultsDeep(propChannelQueryOptions, {
         messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
     }), [propChannelQueryOptions]);
@@ -867,7 +868,8 @@ const ChannelInner = (props) => {
             React.createElement(ChannelActionProvider, { value: channelActionContextValue },
                 React.createElement(WithComponents, { overrides: componentContextValue },
                     React.createElement(TypingProvider, { value: typingContextValue },
-                        React.createElement("div", { className: clsx(chatContainerClass) }, children)))))));
+                        React.createElement(WithAudioPlayback, { allowConcurrentPlayback: allowConcurrentAudioPlayback },
+                            React.createElement("div", { className: clsx(chatContainerClass) }, children))))))));
 };
 /**
  * A wrapper component that provides channel data and renders children.

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.11.0";
+        const version = "13.12.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-export type AudioRecordingPlayerProps = React.ComponentProps<'audio'> & {
+export type AudioRecordingPlayerProps = {
     durationSeconds: number;
     mimeType?: string;
+    src?: string;
     waveformData?: number[];
 };
-export declare const AudioRecordingPreview: ({ durationSeconds, mimeType, waveformData, ...props }: AudioRecordingPlayerProps) => React.JSX.Element;
+export declare const AudioRecordingPreview: ({ durationSeconds, mimeType, src, waveformData, }: AudioRecordingPlayerProps) => React.JSX.Element | undefined;

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.js

@@ -1,19 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PauseIcon, PlayIcon } from '../../MessageInput/icons';
 import { RecordingTimer } from './RecordingTimer';
-import { useAudioController } from '../../Attachment/hooks/useAudioController';
 import { WaveProgressBar } from '../../Attachment';
-export const AudioRecordingPreview = ({ durationSeconds, mimeType, waveformData, ...props }) => {
-    const { audioRef, isPlaying, progress, secondsElapsed, seek, togglePlay } = useAudioController({
+import { useAudioPlayer } from '../../AudioPlayback';
+import { useStateStore } from '../../../store';
+const audioPlayerStateSelector = (state) => ({
+    isPlaying: state.isPlaying,
+    progress: state.progressPercent,
+    secondsElapsed: state.secondsElapsed,
+});
+export const AudioRecordingPreview = ({ durationSeconds, mimeType, src, waveformData, }) => {
+    const audioPlayer = useAudioPlayer({
         durationSeconds,
         mimeType,
+        src,
+        waveformData,
     });
+    const { isPlaying, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
     const displayedDuration = secondsElapsed || durationSeconds;
+    useEffect(() => {
+        audioPlayer?.cancelScheduledRemoval();
+        return () => {
+            audioPlayer?.scheduleRemoval();
+        };
+    }, [audioPlayer]);
+    if (!audioPlayer)
+        return;
     return (React.createElement(React.Fragment, null,
-        React.createElement("audio", { ref: audioRef },
-            React.createElement("source", { src: props.src, type: mimeType })),
-        React.createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: togglePlay }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
+        React.createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: audioPlayer.togglePlay }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
         React.createElement(RecordingTimer, { durationSeconds: displayedDuration }),
         React.createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
-            React.createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveformData || [] }))));
+            React.createElement(WaveProgressBar, { progress: progress, seek: audioPlayer.seek, waveformData: waveformData || [] }))));
 };

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.js

@@ -9,7 +9,7 @@ export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachmen
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type })),
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
-                removeAttachments([attachment.localMetadata?.id]) },
+                removeAttachments([attachment.localMetadata?.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         ['blocked', 'failed'].includes(uploadState) && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => {
                 handleRetry(attachment);

package/dist/components/MessageInput/AttachmentPreviewList/GeolocationPreview.js

@@ -8,7 +8,7 @@ export const GeolocationPreview = ({ location, PreviewImage = GeolocationPreview
     const { t } = useTranslationContext();
     return (React.createElement("div", { className: 'str-chat__location-preview', "data-testid": 'location-preview' },
         React.createElement(PreviewImage, { location: location }),
-        remove && (React.createElement("button", { "aria-label": t('aria/Remove location attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'location-preview-item-delete-button', onClick: remove },
+        remove && (React.createElement("button", { "aria-label": t('aria/Remove location attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'location-preview-item-delete-button', onClick: remove, type: 'button' },
             React.createElement(CloseIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-metadata' }, location.durationMs ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'str-chat__attachment-preview-title', title: t('Shared live location') }, t('Live location')),

package/dist/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.js

@@ -13,7 +13,7 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
     return (React.createElement("div", { className: clsx('str-chat__attachment-preview-image', {
             'str-chat__attachment-preview-image--error': previewError,
         }), "data-testid": 'attachment-preview-image' },
-        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => id && removeAttachments([id]) },
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => id && removeAttachments([id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         ['blocked', 'failed'].includes(uploadState) && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),

package/dist/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.js

@@ -10,7 +10,7 @@ export const UnsupportedAttachmentPreview = ({ attachment, handleRetry, removeAt
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: title, mimeType: attachment.mime_type })),
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
-                removeAttachments([attachment.localMetadata?.id]) },
+                removeAttachments([attachment.localMetadata?.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         isLocalUploadAttachment(attachment) &&
             ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&

package/dist/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import type { LocalVoiceRecordingAttachment } from 'stream-chat';
 import type { UploadAttachmentPreviewProps } from './types';
 export type VoiceRecordingPreviewProps<CustomLocalMetadata = Record<string, unknown>> = UploadAttachmentPreviewProps<LocalVoiceRecordingAttachment<CustomLocalMetadata>>;
-export declare const VoiceRecordingPreview: ({ attachment, handleRetry, removeAttachments, }: VoiceRecordingPreviewProps) => React.JSX.Element;
+export declare const VoiceRecordingPreview: ({ attachment, handleRetry, removeAttachments, }: VoiceRecordingPreviewProps) => React.JSX.Element | null;

package/dist/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.js

@@ -1,20 +1,33 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PlayButton } from '../../Attachment';
 import { RecordingTimer } from '../../MediaRecorder';
 import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { FileIcon } from '../../ReactFileUtilities';
-import { useAudioController } from '../../Attachment/hooks/useAudioController';
 import { useTranslationContext } from '../../../context';
+import { useAudioPlayer } from '../../AudioPlayback';
+import { useStateStore } from '../../../store';
+const audioPlayerStateSelector = (state) => ({
+    isPlaying: state.isPlaying,
+    secondsElapsed: state.secondsElapsed,
+});
 export const VoiceRecordingPreview = ({ attachment, handleRetry, removeAttachments, }) => {
     const { t } = useTranslationContext();
-    const { audioRef, isPlaying, secondsElapsed, togglePlay } = useAudioController({
+    const audioPlayer = useAudioPlayer({
         mimeType: attachment.mime_type,
+        src: attachment.asset_url,
     });
+    const { isPlaying, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
+    useEffect(() => {
+        audioPlayer?.cancelScheduledRemoval();
+        return () => {
+            audioPlayer?.scheduleRemoval();
+        };
+    }, [audioPlayer]);
+    if (!audioPlayer)
+        return null;
     return (React.createElement("div", { className: 'str-chat__attachment-preview-voice-recording', "data-testid": 'attachment-preview-voice-recording' },
-        React.createElement("audio", { ref: audioRef },
-            React.createElement("source", { "data-testid": 'audio-source', src: attachment.asset_url, type: attachment.mime_type })),
-        React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay }),
-        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]) },
+        React.createElement(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
             !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
+export * from './AIStateIndicator';
 export * from './Attachment';
+export * from './AudioPlayback';
 export * from './Avatar';
 export * from './Channel';
 export * from './ChannelHeader';
@@ -33,6 +35,5 @@ export * from './TypingIndicator';
 export * from './Window';
 export * from './Threads';
 export * from './ChatView';
-export * from './AIStateIndicator';
 export { UploadButton } from './ReactFileUtilities';
 export type { UploadButtonProps } from './ReactFileUtilities';

package/dist/components/index.js

@@ -1,4 +1,6 @@
+export * from './AIStateIndicator';
 export * from './Attachment';
+export * from './AudioPlayback';
 export * from './Avatar';
 export * from './Channel';
 export * from './ChannelHeader';
@@ -33,5 +35,4 @@ export * from './TypingIndicator';
 export * from './Window';
 export * from './Threads';
 export * from './ChatView';
-export * from './AIStateIndicator';
 export { UploadButton } from './ReactFileUtilities';

package/dist/i18n/TranslationBuilder/notifications/NotificationTranslationTopic.js

@@ -2,9 +2,11 @@ import { attachmentUploadBlockedNotificationTranslator, attachmentUploadFailedNo
 import { TranslationTopic } from '../../TranslationBuilder';
 import { pollCreationFailedNotificationTranslator } from './pollComposition';
 import { pollVoteCountTrespass } from './pollVoteCountTrespass';
+import { browserAudioPlaybackError } from './browserAudioPlaybackError';
 export const defaultNotificationTranslators = {
     'api:attachment:upload:failed': attachmentUploadFailedNotificationTranslator,
     'api:poll:create:failed': pollCreationFailedNotificationTranslator,
+    'browser:audio:playback:error': browserAudioPlaybackError,
     'validation:attachment:upload:blocked': attachmentUploadBlockedNotificationTranslator,
     'validation:attachment:upload:in-progress': attachmentUploadNotTerminatedTranslator,
     'validation:poll:castVote:limit': pollVoteCountTrespass,

package/dist/i18n/TranslationBuilder/notifications/browserAudioPlaybackError.d.ts

@@ -0,0 +1,3 @@
+import type { Translator } from '../TranslationBuilder';
+import type { NotificationTranslatorOptions } from './types';
+export declare const browserAudioPlaybackError: Translator<NotificationTranslatorOptions>;

package/dist/i18n/TranslationBuilder/notifications/browserAudioPlaybackError.js

@@ -0,0 +1 @@
+export const browserAudioPlaybackError = ({ options, t, }) => options.notification?.message ?? t('Error reproducing the recording');