feat: introduce centralized audio playback

Author: khushal87

package/expo-package/src/optionalDependencies/Sound.ts

@@ -99,6 +99,8 @@ class ExpoAudioSoundAdapter {
 
   // eslint-disable-next-line require-await
   loadAsync = async (initialStatus) => {
+    // We have to subscribe as early as possible so that we know the initial status(durarion, etc.) of the audio.
+    this.subscribeStatusEventListener();
     this.initialShouldCorrectPitch = initialStatus.shouldCorrectPitch;
     this.initialPitchCorrectionQuality = initialStatus.pitchCorrectionQuality;
   };
@@ -136,8 +138,7 @@ class ExpoAudioSoundAdapter {
   };
 
   // eslint-disable-next-line require-await
-  setPositionAsync: SoundReturnType['setPositionAsync'] = async (milliseconds) => {
-    const seconds = milliseconds / 1000;
+  setPositionAsync: SoundReturnType['setPositionAsync'] = async (seconds) => {
     this.player.seekTo(seconds);
   };
 

package/src/components/Attachment/AudioAttachment.tsx

@@ -1,13 +1,18 @@
-import React, { RefObject, useEffect, useMemo, useState } from 'react';
+import React, { RefObject, useEffect, useMemo } from 'react';
 import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import { AudioAttachment as StreamAudioAttachment } from 'stream-chat';
+import {
+  isVoiceRecordingAttachment,
+  AudioAttachment as StreamAudioAttachment,
+  VoiceRecordingAttachment as StreamVoiceRecordingAttachment,
+} from 'stream-chat';
 
 import { useTheme } from '../../contexts';
-import { useAudioPlayer } from '../../hooks/useAudioPlayer';
+import { useStateStore } from '../../hooks';
+import { useAudioPlayerControl } from '../../hooks/useAudioPlayerControl';
 import { Audio, Pause, Play } from '../../icons';
 import {
   NativeHandlers,
@@ -17,125 +22,100 @@ import {
   VideoProgressData,
   VideoSeekResponse,
 } from '../../native';
-import { AudioConfig, FileTypes } from '../../types/types';
+import { AudioPlayerState } from '../../state-store/audio-player';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 import { WaveProgressBar } from '../ProgressControl/WaveProgressBar';
 
 dayjs.extend(duration);
 
-export type AudioAttachmentType = AudioConfig &
-  Pick<StreamAudioAttachment, 'waveform_data' | 'asset_url' | 'title'> & {
-    id: string;
-    type: 'audio' | 'voiceRecording';
-  };
+export type AudioAttachmentType = StreamAudioAttachment | StreamVoiceRecordingAttachment;
 
 export type AudioAttachmentProps = {
   item: AudioAttachmentType;
-  onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, pausedStatus?: boolean) => void;
-  onProgress: (index: string, progress: number) => void;
   titleMaxLength?: number;
   hideProgressBar?: boolean;
   showSpeedSettings?: boolean;
   testID?: string;
 };
 
+const audioPlayerSelector = (state: AudioPlayerState) => ({
+  currentPlaybackRate: state.currentPlaybackRate,
+  duration: state.duration,
+  isPlaying: state.isPlaying,
+  position: state.position,
+  progress: state.progress,
+});
+
 /**
  * AudioAttachment
  * UI Component to preview the audio files
  */
 export const AudioAttachment = (props: AudioAttachmentProps) => {
-  const [currentSpeed, setCurrentSpeed] = useState<number>(1.0);
-  const [audioFinished, setAudioFinished] = useState(false);
   const soundRef = React.useRef<SoundReturnType | null>(null);
+
   const {
     hideProgressBar = false,
     item,
-    onLoad,
-    onPlayPause,
-    onProgress,
     showSpeedSettings = false,
     testID,
     titleMaxLength,
   } = props;
-  const { changeAudioSpeed, pauseAudio, playAudio, seekAudio } = useAudioPlayer({ soundRef });
+
+  const { audioPlayer, toggleAudio, playAudio, pauseAudio } = useAudioPlayerControl({
+    duration: item.duration ?? 0,
+    mimeType: item.mime_type ?? '',
+    playerRef: soundRef,
+    uri: item.asset_url ?? '',
+  });
+  const { duration, isPlaying, position, progress, currentPlaybackRate } = useStateStore(
+    audioPlayer.state,
+    audioPlayerSelector,
+  );
   const isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
-  const isVoiceRecording = item.type === FileTypes.VoiceRecording;
+  const isVoiceRecording = isVoiceRecordingAttachment(item);
 
   /** 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.
     if (isVoiceRecording && item.duration) {
-      onLoad(item.id, item.duration);
+      audioPlayer.duration = item.duration;
     } else {
-      onLoad(item.id, item.duration || payload.duration);
+      audioPlayer.duration = item.duration || payload.duration;
     }
   };
 
   /** This is for Native CLI Apps */
   const handleProgress = (data: VideoProgressData) => {
-    const { currentTime, seekableDuration } = data;
-    // 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.
-    if (isVoiceRecording && item.duration) {
-      if (currentTime < item.duration && !audioFinished) {
-        onProgress(item.id, currentTime / item.duration);
-      } else {
-        setAudioFinished(true);
-      }
-    } else {
-      if (currentTime < seekableDuration && !audioFinished) {
-        onProgress(item.id, currentTime / seekableDuration);
-      } else {
-        setAudioFinished(true);
-      }
-    }
+    const { currentTime } = data;
+    audioPlayer.position = currentTime;
   };
 
   /** This is for Native CLI Apps */
   const onSeek = (seekResponse: VideoSeekResponse) => {
-    setAudioFinished(false);
-    onProgress(item.id, seekResponse.currentTime / (item.duration as number));
+    audioPlayer.position = seekResponse.currentTime;
   };
 
-  const handlePlayPause = async () => {
-    if (item.paused) {
-      if (isExpoCLI) {
-        await playAudio();
-      }
-      onPlayPause(item.id, false);
-    } else {
-      if (isExpoCLI) {
-        await pauseAudio();
-      }
-      onPlayPause(item.id, true);
-    }
+  const handlePlayPause = () => {
+    toggleAudio(audioPlayer.id);
   };
 
   const handleEnd = async () => {
-    setAudioFinished(false);
-    await pauseAudio();
-    onPlayPause(item.id, true);
-    await seekAudio(0);
+    await audioPlayer.stop();
   };
 
-  const dragStart = async () => {
-    if (isExpoCLI) {
-      await pauseAudio();
-    }
-    onPlayPause(item.id, true);
+  const dragStart = () => {
+    pauseAudio(audioPlayer.id);
   };
 
   const dragProgress = (progress: number) => {
-    onProgress(item.id, progress);
+    audioPlayer.progress = progress;
   };
 
   const dragEnd = async (progress: number) => {
-    await seekAudio(progress * (item.duration as number));
-    if (isExpoCLI) {
-      await playAudio();
-    }
-    onPlayPause(item.id, false);
+    const position = isExpoCLI ? (progress * duration) / 1000 : progress * duration;
+    await audioPlayer.seek(position);
+    playAudio(audioPlayer.id);
   };
 
   /** For Expo CLI */
@@ -147,26 +127,28 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
       }
     } else {
       const { durationMillis, positionMillis } = playbackStatus;
+      // Update your UI for the loaded state
       // This is done for Expo CLI where we don't get file duration from file picker
       if (item.duration === 0) {
-        onLoad(item.id, durationMillis / 1000);
+        audioPlayer.duration = durationMillis;
       } else {
         // 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 (isVoiceRecording && item.duration) {
-          onLoad(item.id, item.duration);
+          audioPlayer.duration = item.duration * 1000;
         } else {
-          onLoad(item.id, durationMillis / 1000);
+          audioPlayer.duration = durationMillis;
         }
       }
-      // Update your UI for the loaded state
+
+      // Update the position of the audio player when it is playing
       if (playbackStatus.isPlaying) {
         if (isVoiceRecording && item.duration) {
           if (positionMillis <= item.duration * 1000) {
-            onProgress(item.id, positionMillis / (item.duration * 1000));
+            audioPlayer.position = positionMillis;
           }
         } else {
           if (positionMillis <= durationMillis) {
-            onProgress(item.id, positionMillis / durationMillis);
+            audioPlayer.position = positionMillis;
           }
         }
       } else {
@@ -177,10 +159,8 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
         // Update your UI for the buffering state
       }
 
+      // Update the UI when the audio is finished playing
       if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
-        onProgress(item.id, 1);
-        // The player has just finished playing and will stop. Maybe you want to play something else?
-        // status: opposite of pause,says i am playing
         handleEnd();
       }
     }
@@ -214,41 +194,8 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // This is needed for expo applications where the rerender doesn't occur on time thefore you need to update the state of the sound.
-  useEffect(() => {
-    const initalPlayPause = async () => {
-      if (!isExpoCLI) {
-        return;
-      }
-      try {
-        if (item.paused) {
-          await pauseAudio();
-        } else {
-          await playAudio();
-        }
-      } catch (e) {
-        console.log('An error has occurred while trying to interact with the audio. ', e);
-      }
-    };
-    // For expo CLI
-    if (!NativeHandlers.Sound?.Player) {
-      initalPlayPause();
-    }
-  }, [item.paused, isExpoCLI, pauseAudio, playAudio]);
-
   const onSpeedChangeHandler = async () => {
-    if (currentSpeed === 2.0) {
-      setCurrentSpeed(1.0);
-      await changeAudioSpeed(1.0);
-    } else {
-      if (currentSpeed === 1.0) {
-        setCurrentSpeed(1.5);
-        await changeAudioSpeed(1.5);
-      } else if (currentSpeed === 1.5) {
-        setCurrentSpeed(2.0);
-        await changeAudioSpeed(2.0);
-      }
-    }
+    await audioPlayer.changePlaybackRate();
   };
 
   const {
@@ -270,19 +217,15 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     },
   } = useTheme();
 
-  const progressValueInSeconds = useMemo(
-    () => (item.duration as number) * (item.progress as number),
-    [item.duration, item.progress],
-  );
-
+  const positionInSeconds = isExpoCLI ? position / 1000 : position;
   const progressDuration = useMemo(
     () =>
-      progressValueInSeconds
-        ? progressValueInSeconds / 3600 >= 1
-          ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')
-          : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')
-        : dayjs.duration(item.duration ?? 0, 'second').format('mm:ss'),
-    [progressValueInSeconds, item.duration],
+      positionInSeconds
+        ? positionInSeconds / 3600 >= 1
+          ? dayjs.duration(positionInSeconds, 'second').format('HH:mm:ss')
+          : dayjs.duration(positionInSeconds, 'second').format('mm:ss')
+        : dayjs.duration(isExpoCLI ? duration / 1000 : duration, 'second').format('mm:ss'),
+    [duration, isExpoCLI, positionInSeconds],
   );
 
   return (
@@ -308,7 +251,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             playPauseButton,
           ]}
         >
-          {item.paused ? (
+          {!isPlaying ? (
             <Play fill={static_black} height={32} width={32} />
           ) : (
             <Pause fill={static_black} height={32} width={32} />
@@ -328,7 +271,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             filenameText,
           ]}
         >
-          {item.type === FileTypes.VoiceRecording
+          {isVoiceRecordingAttachment(item)
             ? 'Recording'
             : getTrimmedAttachmentTitle(item.title, titleMaxLength)}
         </Text>
@@ -344,17 +287,17 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
                   onEndDrag={dragEnd}
                   onProgressDrag={dragProgress}
                   onStartDrag={dragStart}
-                  progress={item.progress as number}
+                  progress={progress}
                   waveformData={item.waveform_data}
                 />
               ) : (
                 <ProgressControl
-                  duration={item.duration as number}
+                  duration={duration}
                   filledColor={accent_blue}
                   onEndDrag={dragEnd}
                   onProgressDrag={dragProgress}
                   onStartDrag={dragStart}
-                  progress={item.progress as number}
+                  progress={progress}
                   testID='progress-control'
                 />
               )}
@@ -367,8 +310,8 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             onLoad={handleLoad}
             onProgress={handleProgress}
             onSeek={onSeek}
-            paused={item.paused}
-            rate={currentSpeed}
+            paused={!isPlaying}
+            rate={currentPlaybackRate}
             soundRef={soundRef as RefObject<SoundReturnType>}
             testID='sound-player'
             uri={item.asset_url}
@@ -377,7 +320,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
       </View>
       {showSpeedSettings ? (
         <View style={[styles.rightContainer, rightContainer]}>
-          {item.paused ? (
+          {!isPlaying ? (
             <Audio fill={'#ffffff'} />
           ) : (
             <Pressable
@@ -390,7 +333,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             >
               <Text
                 style={[styles.speedChangeButtonText, speedChangeButtonText]}
-              >{`x${currentSpeed.toFixed(1)}`}</Text>
+              >{`x${currentPlaybackRate.toFixed(1)}`}</Text>
             </Pressable>
           )}
         </View>