add player queue length to react sdk (#260)

Author: zachkrall

packages/react/src/lib/VoiceProvider.tsx

@@ -80,6 +80,7 @@ export type VoiceContextType = {
   callDurationTimestamp: string | null;
   toolStatusStore: ReturnType<typeof useToolStatus>['store'];
   chatMetadata: Hume.empathicVoice.ChatMetadata | null;
+  playerQueueLength: number;
 };
 
 const VoiceContext = createContext<VoiceContextType | null>(null);
@@ -396,6 +397,7 @@ export const VoiceProvider: FC<VoiceProviderProps> = ({
         callDurationTimestamp,
         toolStatusStore: toolStatus.store,
         chatMetadata: messageStore.chatMetadata,
+        playerQueueLength: player.queueLength,
       }) satisfies VoiceContextType,
     [
       connect,
@@ -405,6 +407,7 @@ export const VoiceProvider: FC<VoiceProviderProps> = ({
       player.isAudioMuted,
       player.muteAudio,
       player.unmuteAudio,
+      player.queueLength,
       mic.fft,
       mic.isMuted,
       mic.mute,

packages/react/src/lib/useSoundPlayer.ts

@@ -23,6 +23,8 @@ export const useSoundPlayer = (props: {
       buffer: AudioBuffer;
     }>
   >([]);
+  const [queueLength, setQueueLength] = useState(0);
+
   const isProcessing = useRef(false);
   const currentlyPlayingAudioBuffer = useRef<AudioBufferSourceNode | null>(
     null,
@@ -36,6 +38,8 @@ export const useSoundPlayer = (props: {
   onError.current = props.onError;
 
   const playNextClip = useCallback(() => {
+    setQueueLength(clipQueue.current.length);
+
     if (analyserNode.current === null || audioContext.current === null) {
       onError.current('Audio environment is not initialized');
       return;
@@ -227,5 +231,6 @@ export const useSoundPlayer = (props: {
     unmuteAudio,
     stopAll,
     clearQueue,
+    queueLength,
   };
 };