stream-chat-react 13.14.2 → 14.0.0-beta.1

package/dist/components/AudioPlayback/AudioPlayerPool.js

@@ -1,156 +0,0 @@
-import { AudioPlayer } from './AudioPlayer';
-import { StateStore } from 'stream-chat';
-export class AudioPlayerPool {
-    constructor(config) {
-        this.state = new StateStore({
-            activeAudioPlayer: null,
-        });
-        this.pool = new Map();
-        this.audios = new Map();
-        this.sharedAudio = null;
-        this.sharedOwnerId = null;
-        this.getOrAdd = (params) => {
-            const { playbackRates, plugins, ...descriptor } = params;
-            let player = this.pool.get(params.id);
-            if (player) {
-                if (!player.disposed) {
-                    player.setDescriptor(descriptor);
-                    return player;
-                }
-                this.deregister(params.id);
-            }
-            player = new AudioPlayer({
-                playbackRates,
-                plugins,
-                ...descriptor,
-                pool: this,
-            });
-            this.pool.set(params.id, player);
-            return player;
-        };
-        /**
-         * In case of allowConcurrentPlayback enabled, a new Audio is created and assigned to the given audioPlayer owner.
-         * In case of disabled concurrency, the shared audio ownership is transferred to the new owner loading the owner's
-         * source.
-         *
-         * @param ownerId
-         * @param src
-         */
-        this.acquireElement = ({ ownerId, src }) => {
-            if (!this.allowConcurrentPlayback) {
-                // Single shared element mode
-                if (!this.sharedAudio) {
-                    this.sharedAudio = new Audio();
-                }
-                // Handoff from previous owner if different
-                if (this.sharedOwnerId && this.sharedOwnerId !== ownerId) {
-                    const previous = this.pool.get(this.sharedOwnerId);
-                    // Ask previous to pause and drop ref, but keep player in pool
-                    previous?.pause();
-                    previous?.releaseElementForHandoff();
-                }
-                this.sharedOwnerId = ownerId;
-                if (this.sharedAudio.src !== src) {
-                    // setting src starts loading; avoid explicit load() to prevent currentTime reset flicker
-                    this.sharedAudio.src = src;
-                }
-                return this.sharedAudio;
-            }
-            // Concurrent-per-owner mode
-            let audio = this.audios.get(ownerId);
-            if (!audio) {
-                audio = new Audio();
-                this.audios.set(ownerId, audio);
-            }
-            if (audio.src !== src) {
-                // setting src starts loading; avoid explicit load() here as well
-                audio.src = src;
-            }
-            return audio;
-        };
-        /**
-         * Removes the given audio players ownership of the shared audio element (in case of concurrent playback is disabled)
-         * and pauses the reproduction of the audio.
-         * In case of concurrent playback mode (allowConcurrentPlayback enabled), the audio is paused,
-         * its source cleared and removed from the audios pool readied for garbage collection.
-         *
-         * @param ownerId
-         */
-        this.releaseElement = (ownerId) => {
-            if (!this.allowConcurrentPlayback) {
-                if (this.sharedOwnerId !== ownerId)
-                    return;
-                const el = this.sharedAudio;
-                if (el) {
-                    try {
-                        el.pause();
-                    }
-                    catch {
-                        // ignore
-                    }
-                    el.removeAttribute('src');
-                    el.load();
-                }
-                // Keep shared element instance for reuse
-                this.sharedOwnerId = null;
-                return;
-            }
-            const el = this.audios.get(ownerId);
-            if (!el)
-                return;
-            try {
-                el.pause();
-            }
-            catch {
-                // ignore
-            }
-            el.removeAttribute('src');
-            el.load();
-            this.audios.delete(ownerId);
-        };
-        /** Sets active audio player when allowConcurrentPlayback is disabled */
-        this.setActiveAudioPlayer = (activeAudioPlayer) => {
-            if (this.allowConcurrentPlayback)
-                return;
-            this.state.partialNext({ activeAudioPlayer });
-        };
-        /** Performs all the necessary cleanup actions and removes the player from the pool */
-        this.remove = (id) => {
-            const player = this.pool.get(id);
-            if (!player)
-                return;
-            player.requestRemoval();
-        };
-        /** Removes and cleans up all the players from the pool */
-        this.clear = () => {
-            this.players.forEach((player) => {
-                this.remove(player.id);
-            });
-        };
-        this.registerSubscriptions = () => {
-            // Only register subscriptions for players that have an attached element.
-            // Avoid creating elements or cross-wiring listeners on the shared element in single-playback mode.
-            this.players.forEach((p) => {
-                if (p.elementRef) {
-                    p.registerSubscriptions();
-                }
-            });
-        };
-        this.allowConcurrentPlayback = !!config?.allowConcurrentPlayback;
-    }
-    get players() {
-        return Array.from(this.pool.values());
-    }
-    get activeAudioPlayer() {
-        return this.state.getLatestValue().activeAudioPlayer;
-    }
-    /** Removes the AudioPlayer instance from the pool of players */
-    deregister(id) {
-        if (this.pool.has(id)) {
-            this.pool.delete(id);
-        }
-        if (this.activeAudioPlayer?.id === id) {
-            this.setActiveAudioPlayer(null);
-        }
-    }
-}

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import type { AudioPlayerOptions } from './AudioPlayer';
-export type WithAudioPlaybackProps = {
-    children?: React.ReactNode;
-    allowConcurrentPlayback?: boolean;
-};
-export declare const WithAudioPlayback: ({ allowConcurrentPlayback, children, }: WithAudioPlaybackProps) => React.JSX.Element;
-export type UseAudioPlayerProps = {
-    /**
-     * Identifier of the entity that requested the audio playback, e.g. message ID.
-     * Asset to specific audio player is a many-to-many relationship
-     * - one URL can be associated with multiple UI elements,
-     * - one UI element can display multiple audio sources.
-     * Therefore, the AudioPlayer ID is a combination of request:src.
-     *
-     * The requester string can take into consideration whether there are multiple instances of
-     * the same URL requested by the same requester (message has multiple attachments with the same asset URL).
-     * In reality the fact that one message has multiple attachments with the same asset URL
-     * could be considered a bad practice or a bug.
-     */
-    requester?: string;
-} & Partial<Omit<AudioPlayerOptions, 'id' | 'pool'>>;
-export declare const useAudioPlayer: ({ durationSeconds, fileSize, mimeType, playbackRates, plugins, requester, src, title, waveformData, }: UseAudioPlayerProps) => import("./AudioPlayer").AudioPlayer | undefined;
-export declare const useActiveAudioPlayer: () => import("./AudioPlayer").AudioPlayer | null | undefined;

package/dist/components/AudioPlayback/WithAudioPlayback.js

@@ -1,57 +0,0 @@
-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

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

package/dist/components/AudioPlayback/index.js

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

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

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { UserResponse } from 'stream-chat';
-export type AvatarProps = {
-    /** Custom root element class that will be merged with the default class */
-    className?: string;
-    /** Image URL or default is an image of the first initial of the name if there is one  */
-    image?: string | null;
-    /** Name of the image, used for title tag fallback */
-    name?: string;
-    /** click event handler attached to the component root element */
-    onClick?: (event: React.BaseSyntheticEvent) => void;
-    /** mouseOver event handler attached to the component root element */
-    onMouseOver?: (event: React.BaseSyntheticEvent) => void;
-    /** The entire user object for the chat user displayed in the component */
-    user?: UserResponse;
-};
-/**
- * A round avatar image with fallback to username's first letter
- */
-export declare const Avatar: (props: AvatarProps) => React.JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -1,24 +0,0 @@
-import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { Icon } from '../Threads/icons';
-import { getWholeChar } from '../../utils';
-/**
- * A round avatar image with fallback to username's first letter
- */
-export const Avatar = (props) => {
-    const { className, image, name, onClick = () => undefined, onMouseOver = () => undefined, } = props;
-    const [error, setError] = useState(false);
-    useEffect(() => {
-        setError(false);
-    }, [image]);
-    const nameStr = name?.toString() || '';
-    const initials = getWholeChar(nameStr, 0);
-    const showImage = image && !error;
-    return (React.createElement("div", { className: clsx(`str-chat__avatar str-chat__message-sender-avatar`, className, {
-            ['str-chat__avatar--multiple-letters']: initials.length > 1,
-            ['str-chat__avatar--no-letters']: !initials.length,
-            ['str-chat__avatar--one-letter']: initials.length === 1,
-        }), "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, role: 'button', title: name }, showImage ? (React.createElement("img", { alt: initials, className: 'str-chat__avatar-image', "data-testid": 'avatar-img', onError: () => setError(true), src: image })) : (React.createElement(React.Fragment, null,
-        !!initials.length && (React.createElement("div", { className: clsx('str-chat__avatar-fallback'), "data-testid": 'avatar-fallback' }, initials)),
-        !initials.length && React.createElement(Icon.User, null)))));
-};

package/dist/components/Avatar/ChannelAvatar.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { AvatarProps, GroupAvatarProps } from './';
-export type ChannelAvatarProps = Partial<GroupAvatarProps> & AvatarProps;
-export declare const ChannelAvatar: ({ groupChannelDisplayInfo, image, name, user, ...sharedProps }: ChannelAvatarProps) => React.JSX.Element;

package/dist/components/Avatar/ChannelAvatar.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Avatar, GroupAvatar } from './';
-export const ChannelAvatar = ({ groupChannelDisplayInfo, image, name, user, ...sharedProps }) => {
-    if (groupChannelDisplayInfo) {
-        return (React.createElement(GroupAvatar, { groupChannelDisplayInfo: groupChannelDisplayInfo, ...sharedProps }));
-    }
-    return React.createElement(Avatar, { image: image, name: name, user: user, ...sharedProps });
-};

package/dist/components/Avatar/GroupAvatar.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { AvatarProps } from './Avatar';
-import type { GroupChannelDisplayInfo } from '../ChannelPreview';
-export type GroupAvatarProps = Pick<AvatarProps, 'className' | 'onClick' | 'onMouseOver'> & {
-    /** Mapping of image URLs to names which initials will be used as fallbacks in case image assets fail to load. */
-    groupChannelDisplayInfo: GroupChannelDisplayInfo;
-};
-export declare const GroupAvatar: ({ className, groupChannelDisplayInfo, onClick, onMouseOver, }: GroupAvatarProps) => React.JSX.Element;

package/dist/components/Avatar/GroupAvatar.js

@@ -1,6 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import { Avatar } from './Avatar';
-export const GroupAvatar = ({ className, groupChannelDisplayInfo, onClick, onMouseOver, }) => (React.createElement("div", { className: clsx(`str-chat__avatar-group`, { 'str-chat__avatar-group--three-part': groupChannelDisplayInfo.length === 3 }, className), "data-testid": 'group-avatar', onClick: onClick, onMouseOver: onMouseOver, role: 'button' }, groupChannelDisplayInfo.slice(0, 4).map(({ image, name }, i) => (React.createElement(Avatar, { className: clsx({
-        'str-chat__avatar--single': groupChannelDisplayInfo.length === 3 && i === 0,
-    }), image: image, key: `${name}-${image}-${i}`, name: name })))));

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

@@ -1,3 +0,0 @@
-export * from './Avatar';
-export * from './ChannelAvatar';
-export * from './GroupAvatar';

package/dist/components/Avatar/index.js

@@ -1,3 +0,0 @@
-export * from './Avatar';
-export * from './ChannelAvatar';
-export * from './GroupAvatar';

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

@@ -1,67 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-import type { ChannelQueryOptions, DeleteMessageOptions, EventAPIResponse, LocalMessage, Message, MessageResponse, SendMessageOptions, Channel as StreamChannel, StreamChat, UpdateMessageOptions } from 'stream-chat';
-import type { OnMentionAction } from './hooks/useMentionsHandlers';
-import type { LoadingErrorIndicatorProps } from '../Loading';
-import type { ComponentContextValue } from '../../context';
-import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
-type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EditMessageModal' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'ShareLocationDialog' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'Modal' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
-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;
-    /**
-     * Optional configuration parameters used for the initial channel query.
-     * Applied only if the value of channel.initialized is false.
-     * If the channel instance has already been initialized (channel has been queried),
-     * then the channel query will be skipped and channelQueryOptions will not be applied.
-     */
-    channelQueryOptions?: ChannelQueryOptions;
-    /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
-    doDeleteMessageRequest?: (message: LocalMessage, options?: DeleteMessageOptions) => Promise<MessageResponse>;
-    /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
-    doMarkReadRequest?: (channel: StreamChannel, setChannelUnreadUiState?: (state: ChannelUnreadUiState) => void) => Promise<EventAPIResponse> | void;
-    /** Custom action handler to override the default `channel.sendMessage` request function (advanced usage only) */
-    doSendMessageRequest?: (channel: StreamChannel, message: Message, options?: SendMessageOptions) => ReturnType<StreamChannel['sendMessage']> | void;
-    /** Custom action handler to override the default `client.updateMessage` request function (advanced usage only) */
-    doUpdateMessageRequest?: (cid: string, updatedMessage: LocalMessage | MessageResponse, options?: UpdateMessageOptions) => ReturnType<StreamChat['updateMessage']>;
-    /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
-    EmptyPlaceholder?: React.ReactElement;
-    /** The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default */
-    giphyVersion?: GiphyVersions;
-    /** A custom function to provide size configuration for image attachments */
-    imageAttachmentSizeHandler?: ImageAttachmentSizeHandler;
-    /**
-     * Allows to prevent triggering the channel.watch() call when mounting the component.
-     * That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client.
-     * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
-     */
-    initializeOnMount?: boolean;
-    /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
-    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
-    /** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount. */
-    markReadOnMount?: boolean;
-    /** Custom action handler function to run on click of an @mention in a message */
-    onMentionsClick?: OnMentionAction;
-    /** Custom action handler function to run on hover of an @mention in a message */
-    onMentionsHover?: OnMentionAction;
-    /** You can turn on/off thumbnail generation for video attachments */
-    shouldGenerateVideoThumbnail?: boolean;
-    /** If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages) */
-    skipMessageDataMemoization?: boolean;
-    /** A custom function to provide size configuration for video attachments */
-    videoAttachmentSizeHandler?: VideoAttachmentSizeHandler;
-};
-/**
- * A wrapper component that provides channel data and renders children.
- * The Channel component provides the following contexts:
- * - [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/)
- * - [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/)
- * - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
- * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
- */
-export declare const Channel: (props: PropsWithChildren<ChannelProps>) => React.JSX.Element;
-export {};