fix: mitigate breaking changes

khushal87 · khushal87 · commit cccdd3862e03 · 2025-11-13T13:29:45.000+05:30
diff --git a/package/src/components/Attachment/AudioAttachment.tsx b/package/src/components/Attachment/AudioAttachment.tsx
@@ -23,6 +23,7 @@ import {
   VideoSeekResponse,
 } from '../../native';
 import { AudioPlayerState } from '../../state-store/audio-player';
+import { AudioConfig } from '../../types/types';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 import { WaveProgressBar } from '../ProgressControl/WaveProgressBar';
@@ -32,16 +33,44 @@ const ONE_SECOND_IN_MILLISECONDS = 1000;
 
 dayjs.extend(duration);
 
-export type AudioAttachmentType = StreamAudioAttachment | StreamVoiceRecordingAttachment;
+export type AudioAttachmentType = AudioConfig &
+  Pick<
+    StreamAudioAttachment | StreamVoiceRecordingAttachment,
+    'waveform_data' | 'asset_url' | 'title' | 'mime_type'
+  > & {
+    id: string;
+    type: 'audio' | 'voiceRecording';
+  };
 
 export type AudioAttachmentProps = {
   item: AudioAttachmentType;
   message?: LocalMessage;
   titleMaxLength?: number;
   hideProgressBar?: boolean;
+  /**
+   * If true, the speed settings button will be shown.
+   */
   showSpeedSettings?: boolean;
   testID?: string;
+  /**
+   * If true, the audio attachment is in preview mode in the message input.
+   */
   isPreview?: boolean;
+  /**
+   * Callback to be called when the audio is loaded
+   * @deprecated This is deprecated and will be removed in the future.
+   */
+  onLoad?: (index: string, duration: number) => void;
+  /**
+   * Callback to be called when the audio is played or paused
+   * @deprecated This is deprecated and will be removed in the future.
+   */
+  onPlayPause?: (index: string, pausedStatus?: boolean) => void;
+  /**
+   * Callback to be called when the audio progresses
+   * @deprecated This is deprecated and will be removed in the future.
+   */
+  onProgress?: (index: string, progress: number) => void;
 };
 
 const audioPlayerSelector = (state: AudioPlayerState) => ({
diff --git a/package/src/components/Attachment/FileAttachmentGroup.tsx b/package/src/components/Attachment/FileAttachmentGroup.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { isAudioAttachment, isVoiceRecordingAttachment } from 'stream-chat';
+import { Attachment, isAudioAttachment, isVoiceRecordingAttachment } from 'stream-chat';
 
 import { Attachment as AttachmentDefault } from './Attachment';
 
@@ -30,9 +30,87 @@ export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'fil
     }>;
   };
 
+type FilesToDisplayType = Attachment & {
+  duration: number;
+  paused: boolean;
+  progress: number;
+};
+
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
   const { Attachment, AudioAttachment, files, message, styles: stylesProp = {} } = props;
 
+  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>(() =>
+    files.map((file) => ({ ...file, duration: file.duration || 0, paused: true, progress: 0 })),
+  );
+
+  useEffect(() => {
+    setFilesToDisplay(
+      files.map((file) => ({ ...file, duration: file.duration || 0, paused: true, progress: 0 })),
+    );
+  }, [files]);
+
+  /**
+   * Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
+   * @param index - The index of the audio
+   * @param duration - The duration of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
+  const onLoad = (index: string, duration: number) => {
+    setFilesToDisplay((prevFilesToDisplay) =>
+      prevFilesToDisplay.map((fileToDisplay, id) => ({
+        ...fileToDisplay,
+        duration: id.toString() === index ? duration : fileToDisplay.duration,
+      })),
+    );
+  };
+
+  /**
+   * Handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
+   * @param index - The index of the audio
+   * @param progress - The progress of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
+  const onProgress = (index: string, progress: number) => {
+    setFilesToDisplay((prevFilesToDisplay) =>
+      prevFilesToDisplay.map((filesToDisplay, id) => ({
+        ...filesToDisplay,
+        progress: id.toString() === index ? progress : filesToDisplay.progress,
+      })),
+    );
+  };
+
+  /**
+   * Handler which controls or sets the paused/played state of the audio.
+   * @param index - The index of the audio
+   * @param pausedStatus - The paused status of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
+  const onPlayPause = (index: string, pausedStatus?: boolean) => {
+    if (pausedStatus === false) {
+      // If the status is false we set the audio with the index as playing and the others as paused.
+      setFilesToDisplay((prevFilesToDisplay) =>
+        prevFilesToDisplay.map((fileToDisplay, id) => ({
+          ...fileToDisplay,
+          paused: id.toString() !== index,
+        })),
+      );
+    } else {
+      // If the status is true we simply set all the audio's paused state as true.
+      setFilesToDisplay((prevFilesToDisplay) =>
+        prevFilesToDisplay.map((fileToDisplay) => ({
+          ...fileToDisplay,
+          paused: true,
+        })),
+      );
+    }
+  };
+
   const {
     theme: {
       messageSimple: {
@@ -43,7 +121,7 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
 
   return (
     <View style={[styles.container, container, stylesProp.container]}>
-      {files.map((file, index) => (
+      {filesToDisplay.map((file, index) => (
         <View
           key={`file-by-attachment-group-${message.id}-${index}`}
           style={[
@@ -54,7 +132,14 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
         >
           {(isAudioAttachment(file) || isVoiceRecordingAttachment(file)) &&
           isSoundPackageAvailable() ? (
-            <AudioAttachment item={file} message={message} showSpeedSettings={true} />
+            <AudioAttachment
+              item={{ ...file, id: index.toString(), type: file.type }}
+              message={message}
+              onLoad={onLoad}
+              onPlayPause={onPlayPause}
+              onProgress={onProgress}
+              showSpeedSettings={true}
+            />
           ) : (
             <Attachment attachment={file} />
           )}
diff --git a/package/src/components/MessageInput/AttachmentUploadPreviewList.tsx b/package/src/components/MessageInput/AttachmentUploadPreviewList.tsx
@@ -11,6 +11,8 @@ import {
   LocalImageAttachment,
 } from 'stream-chat';
 
+import { useAudioPreviewManager } from './hooks/useAudioPreviewManager';
+
 import { useMessageComposer } from '../../contexts';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import {
@@ -62,6 +64,15 @@ const UnMemoizedAttachmentUploadListPreview = (
   const fileUploads = useMemo(() => {
     return attachments.filter((attachment) => !isLocalImageAttachment(attachment));
   }, [attachments]);
+  const audioUploads = useMemo(() => {
+    return fileUploads.filter(
+      (attachment) =>
+        isLocalAudioAttachment(attachment) || isLocalVoiceRecordingAttachment(attachment),
+    );
+  }, [fileUploads]);
+
+  const { audioAttachmentsStateMap, onLoad, onProgress, onPlayPause } =
+    useAudioPreviewManager(audioUploads);
 
   const renderImageItem = useCallback(
     ({ item }: { item: LocalImageAttachment }) => {
@@ -89,7 +100,11 @@ const UnMemoizedAttachmentUploadListPreview = (
         return (
           <AudioAttachmentUploadPreview
             attachment={item}
+            audioAttachmentConfig={audioAttachmentsStateMap[item.localMetadata.id]}
             handleRetry={attachmentManager.uploadAttachment}
+            onLoad={onLoad}
+            onPlayPause={onPlayPause}
+            onProgress={onProgress}
             removeAttachments={attachmentManager.removeAttachments}
           />
         );
@@ -98,7 +113,11 @@ const UnMemoizedAttachmentUploadListPreview = (
           return (
             <AudioAttachmentUploadPreview
               attachment={item}
+              audioAttachmentConfig={audioAttachmentsStateMap[item.localMetadata.id]}
               handleRetry={attachmentManager.uploadAttachment}
+              onLoad={onLoad}
+              onPlayPause={onPlayPause}
+              onProgress={onProgress}
               removeAttachments={attachmentManager.removeAttachments}
             />
           );
@@ -138,7 +157,11 @@ const UnMemoizedAttachmentUploadListPreview = (
       VideoAttachmentUploadPreview,
       attachmentManager.removeAttachments,
       attachmentManager.uploadAttachment,
+      audioAttachmentsStateMap,
       flatListWidth,
+      onLoad,
+      onPlayPause,
+      onProgress,
     ],
   );
 
diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx
@@ -311,7 +311,11 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     deleteVoiceRecording,
     micLocked,
+    onVoicePlayerPlayPause,
+    paused,
     permissionsGranted,
+    position,
+    progress,
     recording,
     recordingDuration,
     recordingStatus,
@@ -445,6 +449,10 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
             />
             {recordingStatus === 'stopped' ? (
               <AudioRecordingPreview
+                onVoicePlayerPlayPause={onVoicePlayerPlayPause}
+                paused={paused}
+                position={position}
+                progress={progress}
                 recordingDuration={recordingDuration}
                 uri={
                   typeof recording !== 'string'
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx
@@ -11,18 +11,44 @@ import { DismissAttachmentUpload } from './DismissAttachmentUpload';
 import { AudioAttachment } from '../../../../components/Attachment/AudioAttachment';
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
-import { UploadAttachmentPreviewProps } from '../../../../types/types';
+import { AudioConfig, UploadAttachmentPreviewProps } from '../../../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../../../utils/utils';
 
 export type AudioAttachmentUploadPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
   UploadAttachmentPreviewProps<
     LocalAudioAttachment<CustomLocalMetadata> | LocalVoiceRecordingAttachment<CustomLocalMetadata>
-  >;
+  > & {
+    /**
+     * The audio attachment config
+     *
+     * @deprecated This is deprecated and will be removed in the future.
+     */
+    audioAttachmentConfig: AudioConfig;
+    /**
+     * Callback to be called when the audio is loaded
+     * @deprecated This is deprecated and will be removed in the future.
+     */
+    onLoad: (index: string, duration: number) => void;
+    /**
+     * Callback to be called when the audio is played or paused
+     * @deprecated This is deprecated and will be removed in the future.
+     */
+    onPlayPause: (index: string, pausedStatus?: boolean) => void;
+    /**
+     * Callback to be called when the audio progresses
+     * @deprecated This is deprecated and will be removed in the future.
+     */
+    onProgress: (index: string, progress: number) => void;
+  };
 
 export const AudioAttachmentUploadPreview = ({
   attachment,
+  audioAttachmentConfig,
   handleRetry,
   removeAttachments,
+  onLoad,
+  onPlayPause,
+  onProgress,
 }: AudioAttachmentUploadPreviewProps) => {
   const { enableOfflineSupport } = useChatContext();
   const indicatorType = getIndicatorTypeForFileState(
@@ -43,8 +69,9 @@ export const AudioAttachmentUploadPreview = ({
       ...attachment,
       asset_url: assetUrl,
       id: attachment.localMetadata.id,
+      ...audioAttachmentConfig,
     }),
-    [attachment, assetUrl],
+    [attachment, assetUrl, audioAttachmentConfig],
   );
 
   const onRetryHandler = useCallback(() => {
@@ -66,6 +93,9 @@ export const AudioAttachmentUploadPreview = ({
           hideProgressBar={true}
           isPreview={true}
           item={finalAttachment}
+          onLoad={onLoad}
+          onPlayPause={onPlayPause}
+          onProgress={onProgress}
           showSpeedSettings={false}
           titleMaxLength={12}
         />
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
@@ -22,6 +22,34 @@ export type AudioRecordingPreviewProps = {
    * The waveform data to be presented to show the audio levels.
    */
   waveformData: number[];
+  /**
+   * Boolean used to show the paused state of the player.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
+  paused: boolean;
+  /**
+   * Number used to show the current position of the audio being played.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
+  position: number;
+  /**
+   * Number used to show the percentage of progress of the audio being played. It should be in 0-1 range.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
+  progress: number;
+  /**
+   * Function to play or pause the audio player.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
+  onVoicePlayerPlayPause?: () => Promise<void>;
 };
 
 const audioPlayerSelector = (state: AudioPlayerState) => ({
diff --git a/package/src/components/MessageInput/hooks/useAudioController.tsx b/package/src/components/MessageInput/hooks/useAudioController.tsx
diff --git a/package/src/components/MessageInput/hooks/useAudioPreviewManager.tsx b/package/src/components/MessageInput/hooks/useAudioPreviewManager.tsx
diff --git a/package/src/state-store/audio-player.ts b/package/src/state-store/audio-player.ts
