fix: make the audio player pool class simpler

Author: khushal87

package/src/contexts/audioPlayerContext/AudioPlayerContext.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';
 
-import { AudioPlayerPool } from '../../state-store/audio-player-pool';
+import { useStateStore } from '../../hooks/useStateStore';
+import { AudioPlayerPool, AudioPlayerPoolState } from '../../state-store/audio-player-pool';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 export type AudioPlayerContextProps = {
@@ -40,3 +41,14 @@ export const WithAudioPlayback = ({
 };
 
 export const useAudioPlayerContext = () => useContext(AudioPlayerContext);
+
+const activeAudioPlayerSelector = ({ activeAudioPlayer }: AudioPlayerPoolState) => ({
+  activeAudioPlayer,
+});
+
+export const useActiveAudioPlayer = () => {
+  const { audioPlayerPool } = useContext(AudioPlayerContext);
+  const { activeAudioPlayer } =
+    useStateStore(audioPlayerPool.state, activeAudioPlayerSelector) ?? {};
+  return activeAudioPlayer;
+};

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

@@ -1,13 +1,21 @@
+import { StateStore } from 'stream-chat';
+
 import { AudioPlayer, AudioPlayerOptions } from './audio-player';
 
 export type AudioPlayerPoolOptions = {
   allowConcurrentAudioPlayback: boolean;
 };
 
+export type AudioPlayerPoolState = {
+  activeAudioPlayer: AudioPlayer | null;
+};
+
 export class AudioPlayerPool {
   pool: Map<string, AudioPlayer>;
   allowConcurrentAudioPlayback: boolean;
-  private currentlyPlayingId: string | null = null;
+  state: StateStore<AudioPlayerPoolState> = new StateStore<AudioPlayerPoolState>({
+    activeAudioPlayer: null,
+  });
 
   constructor({ allowConcurrentAudioPlayback }: AudioPlayerPoolOptions) {
     this.pool = new Map<string, AudioPlayer>();
@@ -30,15 +38,24 @@ export class AudioPlayerPool {
     return newPlayer;
   }
 
+  setActivePlayer(activeAudioPlayer: AudioPlayer | null) {
+    this.state.partialNext({
+      activeAudioPlayer,
+    });
+  }
+
+  getActivePlayer() {
+    return this.state.getLatestValue().activeAudioPlayer;
+  }
+
   removePlayer(id: string) {
     const player = this.pool.get(id);
     if (!player) return;
     player.onRemove();
     this.pool.delete(id);
 
-    // Clear tracking if this was the currently playing player
-    if (!this.allowConcurrentAudioPlayback && this.currentlyPlayingId === id) {
-      this.currentlyPlayingId = null;
+    if (this.getActivePlayer()?.id === id) {
+      this.setActivePlayer(null);
     }
   }
 
@@ -52,24 +69,26 @@ export class AudioPlayerPool {
     for (const player of this.pool.values()) {
       this.removePlayer(player.id);
     }
-    this.currentlyPlayingId = null;
+    this.setActivePlayer(null);
   }
 
   requestPlay(id: string) {
     if (this.allowConcurrentAudioPlayback) return;
 
-    if (this.currentlyPlayingId && this.currentlyPlayingId !== id) {
-      const currentPlayer = this.pool.get(this.currentlyPlayingId);
+    if (this.getActivePlayer()?.id !== id) {
+      const currentPlayer = this.getActivePlayer();
       if (currentPlayer && currentPlayer.isPlaying) {
         currentPlayer.pause();
       }
     }
-    this.currentlyPlayingId = id;
-  }
 
-  notifyPaused(id: string) {
-    if (this.currentlyPlayingId === id) {
-      this.currentlyPlayingId = null;
+    const activePlayer = this.pool.get(id);
+    if (activePlayer) {
+      this.setActivePlayer(activePlayer);
     }
   }
+
+  notifyPaused() {
+    this.setActivePlayer(null);
+  }
 }

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

@@ -296,7 +296,7 @@ export class AudioPlayer {
     });
 
     if (this._pool) {
-      this._pool.notifyPaused(this.id);
+      this._pool.notifyPaused();
     }
   }