feat: integrate react-native-track-player for audio playback and enhance voice chat functionality

Author: Gabry848

index.tsx

@@ -2,6 +2,8 @@ import "./gesture-handler";
 import "@expo/metro-runtime";
 import { registerRootComponent } from "expo";
 import "fast-text-encoding";
+import TrackPlayer from "react-native-track-player";
+import { PlaybackService } from "./src/services/PlaybackService";
 
 // Importa Insights
 import * as Insights from 'expo-insights';
@@ -15,4 +17,7 @@ import App from "./src/navigation";
 //   // Configurazione extra se necessaria in futuro
 // }
 
-registerRootComponent(App);
+registerRootComponent(App);
+
+// Registra il playback service per react-native-track-player
+TrackPlayer.registerPlaybackService(() => PlaybackService);

package-lock.json

@@ -81,6 +81,7 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
     "react-native-svg": "15.11.2",
+    "react-native-track-player": "^4.1.2",
     "react-native-vector-icons": "^10.2.0",
     "react-native-web": "^0.20.0",
     "react-native-webview": "13.13.5"

package.json

@@ -244,12 +244,14 @@ export function useVoiceChat() {
           break;
 
         case 'audio_end':
-          // Server ha finito di inviare chunk audio per questo segmento
+          // Server ha finito di inviare chunk audio per questo segmento.
+          // Con TrackPlayer la riproduzione è già in corso in streaming.
+          // Segnaliamo che non arriveranno altri chunk per gestire il completamento.
           if (audioPlayerRef.current && audioPlayerRef.current.getChunksCount() > 0) {
             setState('speaking');
-            console.log(`[useVoiceChat] Avvio riproduzione audio (${audioPlayerRef.current.getChunksCount()} chunk) - mantengo auto-mute`);
-            audioPlayerRef.current.playPcm16Chunks(() => {
-              console.log('[useVoiceChat] Riproduzione completata');
+            console.log(`[useVoiceChat] audio_end ricevuto (${audioPlayerRef.current.getChunksCount()} chunk) - riproduzione streaming in corso`);
+            audioPlayerRef.current.signalAllChunksReceived(() => {
+              console.log('[useVoiceChat] Riproduzione streaming completata');
               // Riattiva il microfono SOLO se l'agent ha finito completamente
               if (agentEndedRef.current) {
                 console.log('[useVoiceChat] Agent finito, auto-unmute e riavvio registrazione');
@@ -322,8 +324,14 @@ export function useVoiceChat() {
 
     onAudioChunk: (audioData: string, chunkIndex: number) => {
       if (audioPlayerRef.current) {
-        audioPlayerRef.current.addChunk(audioData, chunkIndex);
+        // Aggiunge il chunk alla queue di TrackPlayer e avvia riproduzione streaming
+        audioPlayerRef.current.addChunk(audioData, chunkIndex).catch(err => {
+          console.error('[useVoiceChat] Errore aggiunta chunk a TrackPlayer:', err);
+        });
         setChunksReceived(prev => prev + 1);
+
+        // Transiziona a 'speaking' al primo chunk ricevuto
+        setState(prev => prev !== 'speaking' ? 'speaking' : prev);
       }
     },
 

src/hooks/useVoiceChat.ts

@@ -0,0 +1,11 @@
+import TrackPlayer, { Event } from 'react-native-track-player';
+
+/**
+ * Playback service per react-native-track-player.
+ * Gestisce gli eventi remoti (notifiche, lockscreen, bluetooth).
+ */
+export const PlaybackService = async function () {
+  TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());
+  TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());
+  TrackPlayer.addEventListener(Event.RemoteStop, () => TrackPlayer.stop());
+};