stream-chat-react 13.11.0 → 13.13.0

package/dist/components/Attachment/Audio.js

@@ -1,27 +1,50 @@
 import React from 'react';
 import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
-import { useAudioController } from './hooks/useAudioController';
-const UnMemoizedAudio = (props) => {
-    const { og: { asset_url, file_size, mime_type, title }, } = props;
-    const { audioRef, isPlaying, progress, seek, togglePlay } = useAudioController({
-        mimeType: mime_type,
-    });
-    if (!asset_url)
-        return null;
+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("audio", { ref: audioRef },
-            React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
         React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--play-controls' },
-            React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay })),
+            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' }, title),
-                React.createElement(DownloadButton, { assetUrl: asset_url })),
+                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: file_size }),
-                React.createElement(ProgressBar, { onClick: seek, progress: progress })))));
+                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

package/dist/components/Attachment/Card.js

@@ -4,9 +4,11 @@ import ReactPlayer from 'react-player';
 import { ImageComponent } from '../Gallery';
 import { SafeAnchor } from '../SafeAnchor';
 import { PlayButton, ProgressBar } from './components';
-import { useAudioController } from './hooks/useAudioController';
 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('/');
@@ -43,21 +45,41 @@ const CardContent = (props) => {
         title && (React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title)),
         text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text)))));
 };
-export const CardAudio = ({ og: { asset_url, author_name, mime_type, og_scrape_url, text, title, title_link }, }) => {
-    const { audioRef, isPlaying, progress, seek, togglePlay } = useAudioController({
-        mimeType: mime_type,
+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(React.Fragment, null,
-            React.createElement("audio", { ref: audioRef },
-                React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
-            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: togglePlay })),
-                React.createElement(ProgressBar, { onClick: seek, progress: progress })))),
+        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)),

package/dist/components/Attachment/Geolocation.js

@@ -19,7 +19,7 @@ export const Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolo
     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) }, t('Stop sharing')),
+            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' },

package/dist/components/Attachment/VoiceRecording.js

@@ -1,33 +1,58 @@
 import React from 'react';
 import { FileSizeIndicator, PlaybackRateButton, PlayButton, WaveProgressBar, } from './components';
-import { useAudioController } from './hooks/useAudioController';
 import { displayDuration } from './utils';
 import { FileIcon } from '../ReactFileUtilities';
-import { useTranslationContext } from '../../context';
+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('VoiceRecordingPlayer');
-    const { asset_url, duration = 0, mime_type, title = t('Voice message'), waveform_data, } = attachment;
-    const { audioRef, increasePlaybackRate, isPlaying, playbackRate, progress, secondsElapsed, seek, togglePlay, } = useAudioController({
+    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,
     });
-    if (!asset_url)
-        return null;
-    const displayedDuration = secondsElapsed || duration;
-    return (React.createElement("div", { className: rootClassName, "data-testid": 'voice-recording-widget' },
-        React.createElement("audio", { ref: audioRef },
-            React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: mime_type })),
-        React.createElement(PlayButton, { isPlaying: isPlaying, onClick: 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: 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(displayedDuration)) : (React.createElement(FileSizeIndicator, { fileSize: attachment.file_size, maximumFractionDigits: 0 }))),
-                React.createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveform_data || [] }))),
-        React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__right-section' }, isPlaying ? (React.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate },
-            playbackRate.toFixed(1),
-            "x")) : (React.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40 })))));
+    return audioPlayer ? React.createElement(VoiceRecordingPlayerUI, { audioPlayer: audioPlayer }) : null;
 };
 export const QuotedVoiceRecording = ({ attachment }) => {
     const { t } = useTranslationContext();

package/dist/components/Attachment/components/PlayButton.js

@@ -1,3 +1,3 @@
 import React from 'react';
 import { PauseIcon, PlayTriangleIcon } from '../icons';
-export const PlayButton = ({ isPlaying, onClick }) => (React.createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayTriangleIcon, null)));
+export const PlayButton = ({ isPlaying, onClick }) => (React.createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick, type: 'button' }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayTriangleIcon, null)));

package/dist/components/Attachment/components/PlaybackRateButton.js

@@ -1,2 +1,2 @@
 import React from 'react';
-export const PlaybackRateButton = ({ children, onClick }) => (React.createElement("button", { className: 'str-chat__message_attachment__playback-rate-button', "data-testid": 'playback-rate-button', onClick: onClick }, children));
+export const PlaybackRateButton = ({ children, onClick }) => (React.createElement("button", { className: 'str-chat__message_attachment__playback-rate-button', "data-testid": 'playback-rate-button', onClick: onClick, type: 'button' }, children));

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

@@ -12,6 +12,7 @@ type AudioControllerParams = {
     /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
     playbackRates?: number[];
 };
+/** @deprecated use useAudioPlayer instead */
 export declare const useAudioController: ({ durationSeconds, mimeType, playbackRates, }?: AudioControllerParams) => {
     audioRef: import("react").RefObject<HTMLAudioElement | null>;
     canPlayRecord: boolean;

package/dist/components/Attachment/hooks/useAudioController.js

@@ -5,6 +5,7 @@ const isSeekable = (audioElement) => !(audioElement.duration === Infinity || isN
 export const elementIsPlaying = (audioElement) => audioElement && !(audioElement.paused || audioElement.ended);
 const logError = (e) => console.error('[AUDIO PLAYER]', e);
 const DEFAULT_PLAYBACK_RATES = [1.0, 1.5, 2.0];
+/** @deprecated use useAudioPlayer instead */
 export const useAudioController = ({ durationSeconds, mimeType, playbackRates = DEFAULT_PLAYBACK_RATES, } = {}) => {
     const { addNotification } = useChannelActionContext('useAudioController');
     const { t } = useTranslationContext('useAudioController');

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

@@ -9,5 +9,6 @@ export * from './FileAttachment';
 export * from './Geolocation';
 export * from './UnsupportedAttachment';
 export * from './utils';
+export * from './VoiceRecording';
 export { useAudioController } from './hooks/useAudioController';
 export * from '../Location/hooks/useLiveLocationSharingManager';

package/dist/components/Attachment/index.js

@@ -9,5 +9,6 @@ export * from './FileAttachment';
 export * from './Geolocation';
 export * from './UnsupportedAttachment';
 export * from './utils';
+export * from './VoiceRecording';
 export { useAudioController } from './hooks/useAudioController';
 export * from '../Location/hooks/useLiveLocationSharingManager';

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

@@ -0,0 +1,116 @@
+/// <reference types="lodash" />
+import { StateStore } from 'stream-chat';
+import type { AudioPlayerPlugin } from './plugins';
+import type { AudioPlayerPool } from './AudioPlayerPool';
+export type AudioPlayerErrorCode = 'failed-to-start' | 'not-playable' | 'seek-not-supported' | (string & {});
+export type RegisterAudioPlayerErrorParams = {
+    error?: Error;
+    errCode?: AudioPlayerErrorCode;
+};
+export type AudioPlayerDescriptor = {
+    id: string;
+    src: string;
+    /** Audio duration in seconds. */
+    durationSeconds?: number;
+    fileSize?: number | string;
+    mimeType?: string;
+    title?: string;
+    waveformData?: number[];
+};
+export type AudioPlayerPlayAudioParams = {
+    currentPlaybackRate?: number;
+    playbackRates?: number[];
+};
+export type AudioPlayerState = {
+    /** Signals whether the browser can play the record. */
+    canPlayRecord: boolean;
+    /** Current playback speed. Initiated with the first item of the playbackRates array. */
+    currentPlaybackRate: number;
+    /** The audio element ref */
+    elementRef: HTMLAudioElement | null;
+    /** Signals whether the playback is in progress. */
+    isPlaying: boolean;
+    /** Keeps the latest playback error reference. */
+    playbackError: Error | null;
+    /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
+    playbackRates: number[];
+    /** Playback progress expressed in percent. */
+    progressPercent: number;
+    /** Playback progress expressed in seconds. */
+    secondsElapsed: number;
+};
+export type AudioPlayerOptions = AudioPlayerDescriptor & {
+    /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
+    playbackRates?: number[];
+    plugins?: AudioPlayerPlugin[];
+    pool: AudioPlayerPool;
+};
+export declare const defaultRegisterAudioPlayerError: ({ error, }?: RegisterAudioPlayerErrorParams) => void;
+export declare const elementIsPlaying: (audioElement: HTMLAudioElement | null) => boolean | null;
+export type SeekFn = (params: {
+    clientX: number;
+    currentTarget: HTMLDivElement;
+}) => Promise<void>;
+export declare class AudioPlayer {
+    state: StateStore<AudioPlayerState>;
+    /** The audio MIME type that is checked before the audio is played. If the type is not supported the controller registers error in playbackError. */
+    private _data;
+    private _plugins;
+    private playTimeout;
+    private unsubscribeEventListeners;
+    private _pool;
+    private _disposed;
+    private _pendingLoadedMeta?;
+    private _elementIsReadyPromise?;
+    private _restoringPosition;
+    private _removalTimeout;
+    constructor({ durationSeconds, fileSize, id, mimeType, playbackRates: customPlaybackRates, plugins, pool, src, title, waveformData, }: AudioPlayerOptions);
+    private get plugins();
+    get canPlayRecord(): boolean;
+    get elementRef(): HTMLAudioElement | null;
+    get isPlaying(): boolean;
+    get currentPlaybackRate(): number;
+    get playbackRates(): number[];
+    get durationSeconds(): number | undefined;
+    get fileSize(): string | number | undefined;
+    get id(): string;
+    get src(): string;
+    get mimeType(): string | undefined;
+    get title(): string | undefined;
+    get waveformData(): number[] | undefined;
+    get secondsElapsed(): number;
+    get progressPercent(): number;
+    get disposed(): boolean;
+    private ensureElementRef;
+    private setPlaybackStartSafetyTimeout;
+    private clearPlaybackStartSafetyTimeout;
+    private clearPendingLoadedMeta;
+    private restoreSavedPosition;
+    setDescriptor(descriptor: AudioPlayerDescriptor): void;
+    private releaseElement;
+    private elementIsReady;
+    private setRef;
+    setSecondsElapsed: (secondsElapsed: number) => void;
+    setPlugins(setter: (currentPlugins: AudioPlayerPlugin[]) => AudioPlayerPlugin[]): void;
+    canPlayMimeType: (mimeType: string) => boolean;
+    play: (params?: AudioPlayerPlayAudioParams) => Promise<void>;
+    pause: () => void;
+    stop: () => void;
+    togglePlay: () => Promise<void>;
+    increasePlaybackRate: () => void;
+    seek: import("lodash").DebouncedFunc<SeekFn>;
+    registerError: (params: RegisterAudioPlayerErrorParams) => void;
+    /**
+     * Removes the audio element reference, event listeners and audio player from the player pool.
+     * Helpful when only a single AudioPlayer instance is to be removed from the AudioPlayerPool.
+     */
+    requestRemoval: () => void;
+    cancelScheduledRemoval: () => void;
+    scheduleRemoval: (ms?: number) => void;
+    /**
+     * Releases only the underlying element back to the pool without disposing the player instance.
+     * Used by the pool to hand off the shared element in single-playback mode.
+     */
+    releaseElementForHandoff: () => void;
+    registerSubscriptions: () => void;
+}