feat: sync audio centrally for async audio recording preview

Author: khushal87

package/native-package/src/optionalDependencies/Audio.ts

@@ -131,6 +131,9 @@ class _Audio {
   resumePlayer = async () => {
     await audioRecorderPlayer.resumePlayer();
   };
+  seekToPlayer = async (positionInMillis: number) => {
+    await audioRecorderPlayer.seekToPlayer(positionInMillis);
+  };
   startPlayer = async (uri, _, onPlaybackStatusUpdate) => {
     try {
       const playback = await audioRecorderPlayer.startPlayer(uri);

package/src/components/MessageInput/MessageInput.tsx

@@ -311,11 +311,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     deleteVoiceRecording,
     micLocked,
-    onVoicePlayerPlayPause,
-    paused,
     permissionsGranted,
-    position,
-    progress,
     recording,
     recordingDuration,
     recordingStatus,
@@ -449,10 +445,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
             />
             {recordingStatus === 'stopped' ? (
               <AudioRecordingPreview
-                onVoicePlayerPlayPause={onVoicePlayerPlayPause}
-                paused={paused}
-                position={position}
-                progress={progress}
+                recordingDuration={recordingDuration}
+                uri={
+                  typeof recording !== 'string'
+                    ? (recording?.getURI() as string)
+                    : (recording as string)
+                }
                 waveformData={waveformData}
               />
             ) : micLocked ? (

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -1,41 +1,63 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useAudioPlayerControl } from '../../../../hooks/useAudioPlayerControl';
+import { useStateStore } from '../../../../hooks/useStateStore';
 import { Pause, Play } from '../../../../icons';
 
+import { NativeHandlers } from '../../../../native';
+import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { WaveProgressBar } from '../../../ProgressControl/WaveProgressBar';
 
+const ONE_SECOND_IN_MILLISECONDS = 1000;
+const ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
+
 export type AudioRecordingPreviewProps = {
-  /**
-   * Boolean used to show the paused state of the player.
-   */
-  paused: boolean;
-  /**
-   * Number used to show the current position of the audio being played.
-   */
-  position: number;
-  /**
-   * Number used to show the percentage of progress of the audio being played. It should be in 0-1 range.
-   */
-  progress: number;
+  recordingDuration: number;
+  uri: string;
   /**
    * The waveform data to be presented to show the audio levels.
    */
   waveformData: number[];
-  /**
-   * Function to play or pause the audio player.
-   */
-  onVoicePlayerPlayPause?: () => Promise<void>;
 };
 
+const audioPlayerSelector = (state: AudioPlayerState) => ({
+  duration: state.duration,
+  isPlaying: state.isPlaying,
+  position: state.position,
+  progress: state.progress,
+});
+
 /**
  * Component displayed when the audio is recorded and can be previewed.
  */
 export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
-  const { onVoicePlayerPlayPause, paused, position, progress, waveformData } = props;
+  const { recordingDuration, uri, waveformData } = props;
+
+  const { audioPlayer, toggleAudio } = useAudioPlayerControl({
+    duration: recordingDuration / ONE_SECOND_IN_MILLISECONDS,
+    mimeType: 'audio/aac',
+    // This is a temporary flag to manage audio player for voice recording in preview as the one in message list uses react-native-video.
+    previewVoiceRecording: !(NativeHandlers.SDK === 'stream-chat-expo'),
+    type: 'voiceRecording',
+    uri,
+  });
+
+  const { duration, isPlaying, position, progress } = useStateStore(
+    audioPlayer.state,
+    audioPlayerSelector,
+  );
+
+  // When a audio attachment in preview is removed, we need to remove the player from the pool
+  useEffect(
+    () => () => {
+      audioPlayer.onRemove();
+    },
+    [audioPlayer],
+  );
 
   const {
     theme: {
@@ -53,19 +75,33 @@ export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
     },
   } = useTheme();
 
+  const handlePlayPause = () => {
+    toggleAudio(audioPlayer.id);
+  };
+
+  const progressDuration = useMemo(
+    () =>
+      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 (
     <View style={[styles.container, container]}>
       <View style={[styles.infoContainer, infoContainer]}>
-        <Pressable onPress={onVoicePlayerPlayPause}>
-          {paused ? (
+        <Pressable onPress={handlePlayPause}>
+          {!isPlaying ? (
             <Play fill={accent_blue} height={32} width={32} {...playIcon} />
           ) : (
             <Pause fill={accent_blue} height={32} width={32} {...pauseIcon} />
           )}
         </Pressable>
         {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
         <Text style={[styles.currentTime, { color: grey_dark }, currentTime]}>
-          {dayjs.duration(position).format('mm:ss')}
+          {progressDuration}
         </Text>
       </View>
       <View style={[styles.progressBar, progressBar]}>

package/src/hooks/useAudioPlayerControl.ts

@@ -33,6 +33,7 @@ export const useAudioPlayerControl = ({
   duration,
   mimeType,
   playbackRates,
+  previewVoiceRecording,
   requester = '',
   type,
   uri,
@@ -47,10 +48,11 @@ export const useAudioPlayerControl = ({
         id,
         mimeType: mimeType ?? '',
         playbackRates,
+        previewVoiceRecording,
         type: type ?? 'audio',
         uri: uri ?? '',
       }),
-    [audioPlayerPool, duration, id, mimeType, playbackRates, type, uri],
+    [audioPlayerPool, duration, id, mimeType, playbackRates, previewVoiceRecording, type, uri],
   );
 
   return {

package/src/native.ts

@@ -227,6 +227,7 @@ export type AudioType = {
   stopRecording: () => Promise<void>;
   pausePlayer?: () => Promise<void>;
   resumePlayer?: () => Promise<void>;
+  seekToPlayer?: (positionInMillis: number) => Promise<void>;
   startPlayer?: (
     uri?: AudioRecordingReturnType,
     initialStatus?: Partial<AVPlaybackStatusToSet>,

package/src/state-store/audio-player.ts

@@ -38,6 +38,7 @@ const INITIAL_STATE: AudioPlayerState = {
 
 export type AudioPlayerOptions = AudioDescriptor & {
   playbackRates?: number[];
+  previewVoiceRecording?: boolean;
 };
 
 export class AudioPlayer {
@@ -46,11 +47,14 @@ export class AudioPlayer {
   private _id: string;
   private type: 'voiceRecording' | 'audio';
   private isExpoCLI: boolean;
+  // This is a temporary flag to manage audio player for voice recording in preview as the one in message list uses react-native-video.
+  private previewVoiceRecording: boolean;
 
   constructor(options: AudioPlayerOptions) {
     this.isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
     this._id = options.id;
     this.type = options.type;
+    this.previewVoiceRecording = options.previewVoiceRecording ?? false;
     const playbackRates = options.playbackRates ?? DEFAULT_PLAYBACK_RATES;
     this.state = new StateStore<AudioPlayerState>({
       ...INITIAL_STATE,
@@ -68,6 +72,19 @@ export class AudioPlayer {
       this.playerRef = playerRef;
       return;
     }
+    if (this.previewVoiceRecording) {
+      if (NativeHandlers.Audio?.startPlayer) {
+        await NativeHandlers.Audio.startPlayer(
+          uri,
+          {},
+          this.onVoiceRecordingPreviewPlaybackStatusUpdate,
+        );
+        if (NativeHandlers.Audio?.pausePlayer) {
+          await NativeHandlers.Audio.pausePlayer();
+        }
+      }
+      return;
+    }
     if (!this.isExpoCLI || !uri) {
       return;
     }
@@ -80,6 +97,15 @@ export class AudioPlayer {
     }
   };
 
+  onVoiceRecordingPreviewPlaybackStatusUpdate = async (playbackStatus: PlaybackStatus) => {
+    const currentProgress = playbackStatus.currentPosition / playbackStatus.duration;
+    if (currentProgress === 1) {
+      await this.stop();
+    } else {
+      this.progress = currentProgress;
+    }
+  };
+
   // This should be a arrow function to avoid binding the function to the instance
   onPlaybackStatusUpdate = async (playbackStatus: PlaybackStatus) => {
     if (!playbackStatus.isLoaded) {
@@ -92,13 +118,13 @@ export class AudioPlayer {
       // Update your UI for the loaded state
       // This is done for Expo CLI where we don't get file duration from file picker
 
-      // The duration given by the expo-av is not same as the one of the voice recording, so we take the actual duration for voice recording.
       if (this.type !== 'voiceRecording') {
         this.duration = durationMillis;
       }
 
       // Update the position of the audio player when it is playing
       if (playbackStatus.isPlaying) {
+        // The duration given by the expo-av is not same as the one of the voice recording, so we take the actual duration for voice recording.
         if (this.type === 'voiceRecording') {
           if (positionMillis <= this.duration) {
             this.position = positionMillis;
@@ -108,12 +134,6 @@ export class AudioPlayer {
             this.position = positionMillis;
           }
         }
-      } else {
-        // Update your UI for the paused state
-      }
-
-      if (playbackStatus.isBuffering) {
-        // Update your UI for the buffering state
       }
 
       // Update the UI when the audio is finished playing
@@ -199,9 +219,24 @@ export class AudioPlayer {
   }
 
   _playInternal() {
-    if (this.isPlaying || !this.playerRef) {
+    if (this.isPlaying) {
       return;
     }
+
+    if (this.previewVoiceRecording) {
+      if (NativeHandlers.Audio?.resumePlayer) {
+        NativeHandlers.Audio.resumePlayer();
+      }
+      this.state.partialNext({
+        isPlaying: true,
+      });
+      return;
+    }
+
+    if (!this.playerRef) {
+      return;
+    }
+
     if (this.isExpoCLI) {
       if (this.playerRef?.playAsync) {
         this.playerRef.playAsync();
@@ -217,9 +252,23 @@ export class AudioPlayer {
   }
 
   _pauseInternal() {
-    if (!this.isPlaying || !this.playerRef) {
+    if (!this.isPlaying) {
       return;
     }
+    if (this.previewVoiceRecording) {
+      if (NativeHandlers.Audio?.pausePlayer) {
+        NativeHandlers.Audio.pausePlayer();
+      }
+      this.state.partialNext({
+        isPlaying: false,
+      });
+      return;
+    }
+
+    if (!this.playerRef) {
+      return;
+    }
+
     if (this.isExpoCLI) {
       if (this.playerRef?.pauseAsync) {
         this.playerRef.pauseAsync();
@@ -243,6 +292,13 @@ export class AudioPlayer {
   }
 
   async seek(positionInSeconds: number) {
+    if (this.previewVoiceRecording) {
+      this.position = positionInSeconds;
+      if (NativeHandlers.Audio?.seekToPlayer) {
+        NativeHandlers.Audio.seekToPlayer(positionInSeconds * 1000);
+      }
+      return;
+    }
     if (!this.playerRef) {
       return;
     }
@@ -272,6 +328,17 @@ export class AudioPlayer {
   }
 
   onRemove() {
+    if (this.previewVoiceRecording) {
+      if (NativeHandlers.Audio?.stopPlayer) {
+        NativeHandlers.Audio.stopPlayer();
+      }
+      this.state.partialNext({
+        ...INITIAL_STATE,
+        currentPlaybackRate: this.playbackRates[0],
+        playbackRates: DEFAULT_PLAYBACK_RATES,
+      });
+      return;
+    }
     if (this.isExpoCLI) {
       if (this.playerRef?.stopAsync && this.playerRef.unloadAsync) {
         this.playerRef.stopAsync();