feat: remove deprecated APIs and props for the central audio player change

Author: khushal87

package/src/components/Attachment/AudioAttachment.tsx

@@ -13,7 +13,7 @@ import {
 
 import { useTheme } from '../../contexts';
 import { useStateStore } from '../../hooks';
-import { useAudioPlayerControl } from '../../hooks/useAudioPlayerControl';
+import { useAudioPlayer } from '../../hooks/useAudioPlayer';
 import { Audio, Pause, Play } from '../../icons';
 import {
   NativeHandlers,
@@ -56,21 +56,6 @@ export type AudioAttachmentProps = {
    * 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) => ({
@@ -99,7 +84,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   } = props;
   const isVoiceRecording = isVoiceRecordingAttachment(item);
 
-  const audioPlayer = useAudioPlayerControl({
+  const audioPlayer = useAudioPlayer({
     duration: item.duration ?? 0,
     mimeType: item.mime_type ?? '',
     requester: isPreview
@@ -269,10 +254,8 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
                 />
               ) : (
                 <ProgressControl
-                  duration={duration}
                   filledColor={accent_blue}
                   onEndDrag={dragEnd}
-                  onProgressDrag={dragProgress}
                   onStartDrag={dragStart}
                   progress={progress}
                   testID='progress-control'

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -19,11 +19,6 @@ import { isSoundPackageAvailable } from '../../native';
 
 export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files' | 'message'> &
   Pick<MessagesContextValue, 'Attachment' | 'AudioAttachment'> & {
-    /**
-     * @deprecated Use message instead
-     * The unique id for the message with file attachments
-     */
-    messageId: string;
     styles?: Partial<{
       attachmentContainer: StyleProp<ViewStyle>;
       container: StyleProp<ViewStyle>;
@@ -49,68 +44,6 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
     );
   }, [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: {
@@ -135,9 +68,6 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
             <AudioAttachment
               item={{ ...file, id: index.toString(), type: file.type }}
               message={message}
-              onLoad={onLoad}
-              onPlayPause={onPlayPause}
-              onProgress={onProgress}
               showSpeedSettings={true}
             />
           ) : (
@@ -169,13 +99,10 @@ const MemoizedFileAttachmentGroup = React.memo(
   areEqual,
 ) as typeof FileAttachmentGroupWithContext;
 
-export type FileAttachmentGroupProps = Partial<
-  Omit<FileAttachmentGroupPropsWithContext, 'messageId'>
-> &
-  Pick<FileAttachmentGroupPropsWithContext, 'messageId'>;
+export type FileAttachmentGroupProps = Partial<FileAttachmentGroupPropsWithContext>;
 
 export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
-  const { files: propFiles, messageId } = props;
+  const { files: propFiles } = props;
 
   const { files: contextFiles, message } = useMessageContext();
 
@@ -194,7 +121,6 @@ export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
         AudioAttachment,
         files,
         message,
-        messageId,
       }}
     />
   );

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -94,7 +94,6 @@ export const ImageGalleryVideoControl = React.memo(
         </Text>
         <View style={styles.progressContainer}>
           <ProgressControl
-            duration={duration}
             filledColor={accent_blue}
             progress={progress}
             testID={'progress-control'}

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -322,10 +322,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
                 ));
               case 'files':
                 return (
-                  <FileAttachmentGroup
-                    key={`file_attachment_group_${messageContentOrderIndex}`}
-                    messageId={message.id}
-                  />
+                  <FileAttachmentGroup key={`file_attachment_group_${messageContentOrderIndex}`} />
                 );
               case 'gallery':
                 return <Gallery key={`gallery_${messageContentOrderIndex}`} />;

package/src/components/MessageInput/AttachmentUploadPreviewList.tsx

@@ -11,8 +11,6 @@ import {
   LocalImageAttachment,
 } from 'stream-chat';
 
-import { useAudioPreviewManager } from './hooks/useAudioPreviewManager';
-
 import { useMessageComposer } from '../../contexts';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import {
@@ -64,15 +62,6 @@ 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 }) => {
@@ -100,11 +89,7 @@ const UnMemoizedAttachmentUploadListPreview = (
         return (
           <AudioAttachmentUploadPreview
             attachment={item}
-            audioAttachmentConfig={audioAttachmentsStateMap[item.localMetadata.id]}
             handleRetry={attachmentManager.uploadAttachment}
-            onLoad={onLoad}
-            onPlayPause={onPlayPause}
-            onProgress={onProgress}
             removeAttachments={attachmentManager.removeAttachments}
           />
         );
@@ -113,11 +98,7 @@ const UnMemoizedAttachmentUploadListPreview = (
           return (
             <AudioAttachmentUploadPreview
               attachment={item}
-              audioAttachmentConfig={audioAttachmentsStateMap[item.localMetadata.id]}
               handleRetry={attachmentManager.uploadAttachment}
-              onLoad={onLoad}
-              onPlayPause={onPlayPause}
-              onProgress={onProgress}
               removeAttachments={attachmentManager.removeAttachments}
             />
           );
@@ -157,11 +138,7 @@ const UnMemoizedAttachmentUploadListPreview = (
       VideoAttachmentUploadPreview,
       attachmentManager.removeAttachments,
       attachmentManager.uploadAttachment,
-      audioAttachmentsStateMap,
       flatListWidth,
-      onLoad,
-      onPlayPause,
-      onProgress,
     ],
   );
 

package/src/components/MessageInput/MessageInput.tsx

@@ -18,7 +18,7 @@ import Animated, {
 
 import { type MessageComposerState, type TextComposerState, type UserResponse } from 'stream-chat';
 
-import { useAudioController } from './hooks/useAudioController';
+import { useAudioRecorder } from './hooks/useAudioRecorder';
 import { useCountdown } from './hooks/useCountdown';
 
 import { ChatContextValue, useChatContext, useOwnCapabilitiesContext } from '../../contexts';
@@ -311,11 +311,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     deleteVoiceRecording,
     micLocked,
-    onVoicePlayerPlayPause,
-    paused,
     permissionsGranted,
-    position,
-    progress,
     recording,
     recordingDuration,
     recordingStatus,
@@ -324,7 +320,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     stopVoiceRecording,
     uploadVoiceRecording,
     waveformData,
-  } = useAudioController();
+  } = useAudioRecorder();
 
   const asyncAudioEnabled = audioRecordingEnabled && isAudioRecorderAvailable();
   const showSendingButton = hasText || attachments.length || command;
@@ -449,10 +445,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
             />
             {recordingStatus === 'stopped' ? (
               <AudioRecordingPreview
-                onVoicePlayerPlayPause={onVoicePlayerPlayPause}
-                paused={paused}
-                position={position}
-                progress={progress}
                 recordingDuration={recordingDuration}
                 uri={
                   typeof recording !== 'string'

package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx

@@ -11,44 +11,18 @@ import { DismissAttachmentUpload } from './DismissAttachmentUpload';
 import { AudioAttachment } from '../../../../components/Attachment/AudioAttachment';
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
-import { AudioConfig, UploadAttachmentPreviewProps } from '../../../../types/types';
+import { 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(
@@ -69,9 +43,8 @@ export const AudioAttachmentUploadPreview = ({
       ...attachment,
       asset_url: assetUrl,
       id: attachment.localMetadata.id,
-      ...audioAttachmentConfig,
     }),
-    [attachment, assetUrl, audioAttachmentConfig],
+    [attachment, assetUrl],
   );
 
   const onRetryHandler = useCallback(() => {
@@ -93,9 +66,6 @@ export const AudioAttachmentUploadPreview = ({
           hideProgressBar={true}
           isPreview={true}
           item={finalAttachment}
-          onLoad={onLoad}
-          onPlayPause={onPlayPause}
-          onProgress={onProgress}
           showSpeedSettings={false}
           titleMaxLength={12}
         />