fix: make api better

Author: khushal87

package/src/components/Attachment/AudioAttachment.tsx

@@ -99,7 +99,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   } = props;
   const isVoiceRecording = isVoiceRecordingAttachment(item);
 
-  const { audioPlayer, toggleAudio, playAudio, pauseAudio } = useAudioPlayerControl({
+  const audioPlayer = useAudioPlayerControl({
     duration: item.duration ?? 0,
     mimeType: item.mime_type ?? '',
     requester: isPreview
@@ -151,15 +151,15 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   };
 
   const handlePlayPause = () => {
-    toggleAudio(audioPlayer.id);
+    audioPlayer.togglePlayPause();
   };
 
   const handleEnd = async () => {
     await audioPlayer.stop();
   };
 
   const dragStart = () => {
-    pauseAudio(audioPlayer.id);
+    audioPlayer.pause();
   };
 
   const dragProgress = (currentProgress: number) => {
@@ -169,7 +169,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   const dragEnd = async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    playAudio(audioPlayer.id);
+    audioPlayer.play();
   };
 
   const onSpeedChangeHandler = async () => {

package/src/components/Channel/Channel.tsx

@@ -495,7 +495,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      * If true, multiple audio players will be allowed to play simultaneously
      * @default true
      */
-    playMultipleAudio?: boolean;
+    allowConcurrentAudioPlayback?: boolean;
     stateUpdateThrottleInterval?: number;
     /**
      * Tells if channel is rendering a thread list
@@ -515,6 +515,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     additionalKeyboardAvoidingViewProps,
     additionalPressableProps,
     additionalTextInputProps,
+    allowConcurrentAudioPlayback = false,
     allowThreadMessagesInChannel = true,
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
@@ -691,7 +692,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     openPollCreationDialog,
     overrideOwnCapabilities,
     PollContent,
-    playMultipleAudio = true,
     ReactionListBottom = ReactionListBottomDefault,
     reactionListPosition = 'top',
     ReactionListTop = ReactionListTopDefault,
@@ -1669,9 +1669,9 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const audioPlayerPoolProviderProps = useMemo<AudioPlayerPoolContextProps>(
     () => ({
-      playMultipleAudio,
+      allowConcurrentAudioPlayback,
     }),
-    [playMultipleAudio],
+    [allowConcurrentAudioPlayback],
   );
 
   const attachmentPickerProps = useMemo(
@@ -2008,20 +2008,20 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
           <TypingProvider value={typingContext}>
             <PaginatedMessageListProvider value={messageListContext}>
               <MessagesProvider value={messagesContext}>
-                <AudioPlayerPoolProvider props={audioPlayerPoolProviderProps}>
-                  <ThreadProvider value={threadContext}>
-                    <AttachmentPickerProvider value={attachmentPickerContext}>
-                      <MessageComposerProvider value={messageComposerContext}>
-                        <MessageInputProvider value={inputMessageInputContext}>
+                <ThreadProvider value={threadContext}>
+                  <AttachmentPickerProvider value={attachmentPickerContext}>
+                    <MessageComposerProvider value={messageComposerContext}>
+                      <MessageInputProvider value={inputMessageInputContext}>
+                        <AudioPlayerPoolProvider props={audioPlayerPoolProviderProps}>
                           <View style={{ height: '100%' }}>{children}</View>
                           {!disableAttachmentPicker && (
                             <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
                           )}
-                        </MessageInputProvider>
-                      </MessageComposerProvider>
-                    </AttachmentPickerProvider>
-                  </ThreadProvider>
-                </AudioPlayerPoolProvider>
+                        </AudioPlayerPoolProvider>
+                      </MessageInputProvider>
+                    </MessageComposerProvider>
+                  </AttachmentPickerProvider>
+                </ThreadProvider>
               </MessagesProvider>
             </PaginatedMessageListProvider>
           </TypingProvider>

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

@@ -65,7 +65,7 @@ const audioPlayerSelector = (state: AudioPlayerState) => ({
 export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
   const { recordingDuration, uri, waveformData } = props;
 
-  const { audioPlayer, toggleAudio } = useAudioPlayerControl({
+  const audioPlayer = 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.
@@ -104,7 +104,7 @@ export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
   } = useTheme();
 
   const handlePlayPause = () => {
-    toggleAudio(audioPlayer.id);
+    audioPlayer.togglePlayPause();
   };
 
   const progressDuration = useMemo(

package/src/contexts/audioPlayerPoolContext/AudioPlayerPoolContext.tsx

@@ -4,7 +4,7 @@ import { AudioPlayerPool } from '../../state-store/audio-player-pool';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 export type AudioPlayerPoolContextProps = {
-  playMultipleAudio: boolean;
+  allowConcurrentAudioPlayback: boolean;
 };
 
 export type AudioPlayerPoolContextValue = {
@@ -16,12 +16,12 @@ export const AudioPlayerPoolContext = createContext<AudioPlayerPoolContextValue>
 );
 
 export const AudioPlayerPoolProvider = ({
-  props,
+  props: { allowConcurrentAudioPlayback },
   children,
 }: PropsWithChildren<{ props: AudioPlayerPoolContextProps }>) => {
   const audioPlayerPool = useMemo(
-    () => new AudioPlayerPool({ multipleAudioPlayers: props.playMultipleAudio }),
-    [props.playMultipleAudio],
+    () => new AudioPlayerPool({ allowConcurrentAudioPlayback }),
+    [allowConcurrentAudioPlayback],
   );
   const audioPlayerPoolContextValue = useMemo(() => ({ audioPlayerPool }), [audioPlayerPool]);
 

package/src/hooks/useAudioPlayerControl.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { useAudioPlayerPoolContext } from '../contexts/audioPlayerPoolContext/AudioPlayerPoolContext';
 import { AudioPlayerOptions } from '../state-store/audio-player';
@@ -55,10 +55,5 @@ export const useAudioPlayerControl = ({
     [audioPlayerPool, duration, id, mimeType, playbackRates, previewVoiceRecording, type, uri],
   );
 
-  return {
-    audioPlayer,
-    pauseAudio: useCallback((id: string) => audioPlayerPool?.pause(id), [audioPlayerPool]),
-    playAudio: useCallback((id: string) => audioPlayerPool?.play(id), [audioPlayerPool]),
-    toggleAudio: useCallback((id: string) => audioPlayerPool?.toggle(id), [audioPlayerPool]),
-  };
+  return audioPlayer;
 };

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

@@ -1,75 +1,75 @@
 import { AudioPlayer, AudioPlayerOptions } from './audio-player';
 
 export type AudioPlayerPoolOptions = {
-  multipleAudioPlayers: boolean;
+  allowConcurrentAudioPlayback: boolean;
 };
 
 export class AudioPlayerPool {
-  audioPlayers: Map<string, AudioPlayer>;
-  multipleAudioPlayers: boolean;
-  constructor({ multipleAudioPlayers }: AudioPlayerPoolOptions) {
-    this.audioPlayers = new Map<string, AudioPlayer>();
-    this.multipleAudioPlayers = multipleAudioPlayers ?? false;
+  pool: Map<string, AudioPlayer>;
+  allowConcurrentAudioPlayback: boolean;
+  private currentlyPlayingId: string | null = null;
+
+  constructor({ allowConcurrentAudioPlayback }: AudioPlayerPoolOptions) {
+    this.pool = new Map<string, AudioPlayer>();
+    this.allowConcurrentAudioPlayback = allowConcurrentAudioPlayback ?? false;
   }
 
-  getPlayers() {
-    return Array.from(this.audioPlayers.values());
+  get players() {
+    return Array.from(this.pool.values());
   }
 
   getOrAddPlayer(params: AudioPlayerOptions) {
-    const player = this.audioPlayers.get(params.id);
+    const player = this.pool.get(params.id);
     if (player) {
       return player;
     }
     const newPlayer = new AudioPlayer(params);
+    newPlayer.pool = this;
 
-    this.audioPlayers.set(params.id, newPlayer);
+    this.pool.set(params.id, newPlayer);
     return newPlayer;
   }
 
   removePlayer(id: string) {
-    const player = this.audioPlayers.get(id);
+    const player = this.pool.get(id);
     if (!player) return;
     player.onRemove();
-    this.audioPlayers.delete(id);
+    this.pool.delete(id);
+
+    // Clear tracking if this was the currently playing player
+    if (!this.allowConcurrentAudioPlayback && this.currentlyPlayingId === id) {
+      this.currentlyPlayingId = null;
+    }
+  }
+
+  deregister(id: string) {
+    if (this.pool.has(id)) {
+      this.pool.delete(id);
+    }
   }
 
   clear() {
-    for (const player of this.audioPlayers.values()) {
+    for (const player of this.pool.values()) {
       this.removePlayer(player.id);
     }
+    this.currentlyPlayingId = null;
   }
 
-  play(id: string) {
-    const targetPlayer = this.audioPlayers.get(id);
-    if (!targetPlayer) return;
+  requestPlay(id: string) {
+    if (this.allowConcurrentAudioPlayback) return;
 
-    if (!this.multipleAudioPlayers) {
-      for (const [playerId, player] of this.audioPlayers) {
-        if (playerId !== id && player.isPlaying) {
-          // eslint-disable-next-line no-underscore-dangle
-          player._pauseInternal();
-        }
+    if (this.currentlyPlayingId && this.currentlyPlayingId !== id) {
+      const currentPlayer = this.pool.get(this.currentlyPlayingId);
+      if (currentPlayer && currentPlayer.isPlaying) {
+        currentPlayer.pause();
       }
     }
-    // eslint-disable-next-line no-underscore-dangle
-    targetPlayer._playInternal();
-  }
-
-  pause(id: string) {
-    const targetPlayer = this.audioPlayers.get(id);
-    if (!targetPlayer) return;
-    // eslint-disable-next-line no-underscore-dangle
-    targetPlayer._pauseInternal();
+    this.currentlyPlayingId = id;
   }
 
-  toggle(id: string) {
-    const targetPlayer = this.audioPlayers.get(id);
-    if (!targetPlayer) return;
-    if (targetPlayer.isPlaying) {
-      this.pause(id);
-    } else {
-      this.play(id);
+  notifyPaused(id: string) {
+    if (this.currentlyPlayingId === id) {
+      this.currentlyPlayingId = null;
     }
   }
 }

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

@@ -1,5 +1,7 @@
 import { StateStore } from 'stream-chat';
 
+import { AudioPlayerPool } from './audio-player-pool';
+
 import { AVPlaybackStatusToSet, NativeHandlers, PlaybackStatus, SoundReturnType } from '../native';
 
 export type AudioDescriptor = {
@@ -47,6 +49,8 @@ export class AudioPlayer {
   private _id: string;
   private type: 'voiceRecording' | 'audio';
   private isExpoCLI: boolean;
+  private _pool: AudioPlayerPool | null = null;
+
   /**
    * This is a temporary flag to manage audio player for voice recording in preview as the one in message list uses react-native-video.
    * We can get rid of this when we migrate to the react-native-nitro-sound everywhere.
@@ -171,6 +175,10 @@ export class AudioPlayer {
   }
 
   // Setters
+  set pool(pool: AudioPlayerPool) {
+    this._pool = pool;
+  }
+
   set duration(duration: number) {
     this.state.partialNext({
       duration,
@@ -219,11 +227,15 @@ export class AudioPlayer {
     }
   }
 
-  _playInternal() {
+  play() {
     if (this.isPlaying) {
       return;
     }
 
+    if (this._pool) {
+      this._pool.requestPlay(this.id);
+    }
+
     if (this.previewVoiceRecording) {
       if (NativeHandlers.Audio?.resumePlayer) {
         NativeHandlers.Audio.resumePlayer();
@@ -252,7 +264,7 @@ export class AudioPlayer {
     });
   }
 
-  _pauseInternal() {
+  pause() {
     if (!this.isPlaying) {
       return;
     }
@@ -282,13 +294,17 @@ export class AudioPlayer {
     this.state.partialNext({
       isPlaying: false,
     });
+
+    if (this._pool) {
+      this._pool.notifyPaused(this.id);
+    }
   }
 
   togglePlayPause() {
     if (this.isPlaying) {
-      this._pauseInternal();
+      this.pause();
     } else {
-      this._playInternal();
+      this.play();
     }
   }
 
@@ -325,7 +341,7 @@ export class AudioPlayer {
   async stop() {
     // First seek to 0 to stop the audio and then pause it
     await this.seek(0);
-    this._pauseInternal();
+    this.pause();
   }
 
   onRemove() {