fix: audio progress and waveform progress bar

Author: khushal87

package/src/components/Attachment/AudioAttachment.tsx

@@ -6,6 +6,7 @@ import duration from 'dayjs/plugin/duration';
 
 import {
   isVoiceRecordingAttachment,
+  LocalMessage,
   AudioAttachment as StreamAudioAttachment,
   VoiceRecordingAttachment as StreamVoiceRecordingAttachment,
 } from 'stream-chat';
@@ -26,16 +27,21 @@ import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 import { WaveProgressBar } from '../ProgressControl/WaveProgressBar';
 
+const ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
+const ONE_SECOND_IN_MILLISECONDS = 1000;
+
 dayjs.extend(duration);
 
 export type AudioAttachmentType = StreamAudioAttachment | StreamVoiceRecordingAttachment;
 
 export type AudioAttachmentProps = {
   item: AudioAttachmentType;
+  message?: LocalMessage;
   titleMaxLength?: number;
   hideProgressBar?: boolean;
   showSpeedSettings?: boolean;
   testID?: string;
+  isPreview?: boolean;
 };
 
 const audioPlayerSelector = (state: AudioPlayerState) => ({
@@ -56,15 +62,20 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   const {
     hideProgressBar = false,
     item,
+    message,
     showSpeedSettings = false,
     testID,
     titleMaxLength,
+    isPreview = false,
   } = props;
   const isVoiceRecording = isVoiceRecordingAttachment(item);
 
   const { audioPlayer, toggleAudio, playAudio, pauseAudio } = useAudioPlayerControl({
     duration: item.duration ?? 0,
     mimeType: item.mime_type ?? '',
+    requester: isPreview
+      ? 'preview'
+      : message?.id && `${message?.parent_id ?? message?.id}${message?.id}`,
     type: isVoiceRecording ? 'voiceRecording' : 'audio',
     uri: item.asset_url ?? '',
   });
@@ -80,21 +91,34 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     }
   }, [audioPlayer]);
 
+  // When a audio attachment in preview is removed, we need to remove the player from the pool
+  useEffect(
+    () => () => {
+      if (isPreview) {
+        audioPlayer.onRemove();
+      }
+    },
+    [audioPlayer, isPreview],
+  );
+
   /** This is for Native CLI Apps */
   const handleLoad = (payload: VideoPayloadData) => {
-    // The duration given by the rn-video is not same as the one of the voice recording, so we take the actual duration for voice recording.
-    audioPlayer.duration = payload.duration * 1000;
+    // If the attachment is a voice recording, we rely on the duration from the attachment as the one from the react-native-video is incorrect.
+    if (isVoiceRecording) {
+      return;
+    }
+    audioPlayer.duration = payload.duration * ONE_SECOND_IN_MILLISECONDS;
   };
 
   /** This is for Native CLI Apps */
   const handleProgress = (data: VideoProgressData) => {
     const { currentTime } = data;
-    audioPlayer.position = currentTime * 1000;
+    audioPlayer.position = currentTime * ONE_SECOND_IN_MILLISECONDS;
   };
 
   /** This is for Native CLI Apps */
   const onSeek = (seekResponse: VideoSeekResponse) => {
-    audioPlayer.position = seekResponse.currentTime * 1000;
+    audioPlayer.position = seekResponse.currentTime * ONE_SECOND_IN_MILLISECONDS;
   };
 
   const handlePlayPause = () => {
@@ -109,13 +133,13 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     pauseAudio(audioPlayer.id);
   };
 
-  const dragProgress = (progress: number) => {
-    audioPlayer.progress = progress;
+  const dragProgress = (currentProgress: number) => {
+    audioPlayer.progress = currentProgress;
   };
 
-  const dragEnd = async (progress: number) => {
-    const position = (progress * duration) / 1000;
-    await audioPlayer.seek(position);
+  const dragEnd = async (currentProgress: number) => {
+    const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
+    await audioPlayer.seek(positionInSeconds);
     playAudio(audioPlayer.id);
   };
 
@@ -142,15 +166,14 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     },
   } = useTheme();
 
-  const positionInSeconds = position / 1000;
   const progressDuration = useMemo(
     () =>
-      positionInSeconds
-        ? positionInSeconds / 3600 >= 1
-          ? dayjs.duration(positionInSeconds, 'second').format('HH:mm:ss')
-          : dayjs.duration(positionInSeconds, 'second').format('mm:ss')
-        : dayjs.duration(duration / 1000, 'second').format('mm:ss'),
-    [duration, positionInSeconds],
+      position
+        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
+          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
+          : dayjs.duration(position, 'milliseconds').format('mm:ss')
+        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
+    [duration, position],
   );
 
   return (

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -17,9 +17,10 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { isSoundPackageAvailable } from '../../native';
 
-export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files'> &
+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;
@@ -30,7 +31,7 @@ export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'fil
   };
 
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
-  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;
+  const { Attachment, AudioAttachment, files, message, styles: stylesProp = {} } = props;
 
   const {
     theme: {
@@ -44,7 +45,7 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
     <View style={[styles.container, container, stylesProp.container]}>
       {files.map((file, index) => (
         <View
-          key={`file-by-attachment-group-${messageId}-${index}`}
+          key={`file-by-attachment-group-${message.id}-${index}`}
           style={[
             { paddingBottom: index !== files.length - 1 ? 4 : 0 },
             stylesProp.attachmentContainer,
@@ -53,7 +54,7 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
         >
           {(isAudioAttachment(file) || isVoiceRecordingAttachment(file)) &&
           isSoundPackageAvailable() ? (
-            <AudioAttachment item={file} showSpeedSettings={true} />
+            <AudioAttachment item={file} message={message} showSpeedSettings={true} />
           ) : (
             <Attachment attachment={file} />
           )}
@@ -67,8 +68,13 @@ const areEqual = (
   prevProps: FileAttachmentGroupPropsWithContext,
   nextProps: FileAttachmentGroupPropsWithContext,
 ) => {
-  const { files: prevFiles } = prevProps;
-  const { files: nextFiles } = nextProps;
+  const { files: prevFiles, message: prevMessage } = prevProps;
+  const { files: nextFiles, message: nextMessage } = nextProps;
+
+  const messageEqual = prevMessage?.id === nextMessage?.id;
+  if (!messageEqual) {
+    return false;
+  }
 
   return prevFiles.length === nextFiles.length;
 };
@@ -86,7 +92,7 @@ export type FileAttachmentGroupProps = Partial<
 export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
   const { files: propFiles, messageId } = props;
 
-  const { files: contextFiles } = useMessageContext();
+  const { files: contextFiles, message } = useMessageContext();
 
   const { Attachment = AttachmentDefault, AudioAttachment } = useMessagesContext();
 
@@ -102,6 +108,7 @@ export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
         Attachment,
         AudioAttachment,
         files,
+        message,
         messageId,
       }}
     />

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

@@ -10,6 +10,7 @@ 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 { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../../../utils/utils';
 
@@ -28,14 +29,22 @@ export const AudioAttachmentUploadPreview = ({
     attachment.localMetadata.uploadState,
     enableOfflineSupport,
   );
+  const messageComposer = useMessageComposer();
+  const isDraft = messageComposer.draftId;
+  const isEditing = messageComposer.editedMessage;
+  const assetUrl =
+    (isDraft || isEditing
+      ? attachment.asset_url
+      : (attachment.localMetadata.file as FileReference).uri) ??
+    (attachment.localMetadata.file as FileReference).uri;
 
   const finalAttachment = useMemo(
     () => ({
       ...attachment,
-      asset_url: attachment.asset_url ?? (attachment.localMetadata.file as FileReference).uri,
+      asset_url: assetUrl,
       id: attachment.localMetadata.id,
     }),
-    [attachment],
+    [attachment, assetUrl],
   );
 
   const onRetryHandler = useCallback(() => {
@@ -55,6 +64,7 @@ export const AudioAttachmentUploadPreview = ({
       >
         <AudioAttachment
           hideProgressBar={true}
+          isPreview={true}
           item={finalAttachment}
           showSpeedSettings={false}
           titleMaxLength={12}

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,12 +1,18 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 export type ProgressControlProps = {
   /**
+   * @deprecated unused prop.
    * The duration of the audio in seconds
    */
   duration: number;
@@ -33,6 +39,7 @@ export type ProgressControlProps = {
   onPlayPause?: (status?: boolean) => void;
   /**
    * The function to be called when the user is dragging the progress bar
+   * @deprecated This is not used anymore and is handled locally
    */
   onProgressDrag?: (progress: number) => void;
   /**
@@ -67,51 +74,43 @@ const ProgressControlThumb = () => {
 
 export const ProgressControl = (props: ProgressControlProps) => {
   const [widthInNumbers, setWidthInNumbers] = useState(0);
-  const {
-    filledColor: filledColorFromProp,
-    onEndDrag,
-    onPlayPause,
-    onProgressDrag,
-    onStartDrag,
-    progress,
-    testID,
-  } = props;
+  const { filledColor: filledColorFromProp, onEndDrag, onStartDrag, progress, testID } = props;
 
-  const progressValue = useSharedValue(progress);
+  const state = useSharedValue(progress);
+  const isSliding = useRef(false);
   const {
     theme: {
       colors: { grey_dark },
       progressControl: { container, filledColor: filledColorFromTheme, filledStyles, thumb },
     },
   } = useTheme();
 
+  useAnimatedReaction(
+    () => progress,
+    (newProgress) => {
+      if (!isSliding.current) {
+        state.value = newProgress;
+      }
+    },
+    [progress, isSliding.current],
+  );
+
   const pan = Gesture.Pan()
     .maxPointers(1)
-    .onStart((event) => {
-      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
-      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
+    .onStart(() => {
+      isSliding.current = true;
       if (onStartDrag) {
-        runOnJS(onStartDrag)(progressValue.value);
-      }
-      if (onPlayPause) {
-        runOnJS(onPlayPause)(true);
+        runOnJS(onStartDrag)(state.value);
       }
     })
     .onUpdate((event) => {
-      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
-      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
-      if (onProgressDrag) {
-        runOnJS(onProgressDrag)(progressValue.value);
-      }
+      const newProgress = Math.max(0, Math.min(event.x / widthInNumbers, 1));
+      state.value = newProgress;
     })
-    .onEnd((event) => {
-      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
-      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
+    .onEnd(() => {
+      isSliding.current = false;
       if (onEndDrag) {
-        runOnJS(onEndDrag)(progressValue.value);
-      }
-      if (onPlayPause) {
-        runOnJS(onPlayPause)(false);
+        runOnJS(onEndDrag)(state.value);
       }
     })
     .withTestId(testID);
@@ -120,16 +119,16 @@ export const ProgressControl = (props: ProgressControlProps) => {
 
   const thumbStyles = useAnimatedStyle(
     () => ({
-      transform: [{ translateX: progress * widthInNumbers - THUMB_WIDTH / 2 }],
+      transform: [{ translateX: state.value * widthInNumbers - THUMB_WIDTH / 2 }],
     }),
-    [progress],
+    [widthInNumbers],
   );
 
   const animatedFilledStyles = useAnimatedStyle(
     () => ({
-      width: progress * widthInNumbers,
+      width: state.value * widthInNumbers,
     }),
-    [progress],
+    [widthInNumbers],
   );
 
   return (
@@ -151,7 +150,7 @@ export const ProgressControl = (props: ProgressControlProps) => {
           ]}
         />
         <Animated.View style={[thumbStyles, thumb]}>
-          {onEndDrag || onProgressDrag ? <ProgressControlThumb /> : null}
+          {onEndDrag ? <ProgressControlThumb /> : null}
         </Animated.View>
       </View>
     </GestureDetector>