@sage-rsc/talking-head-react 1.0.44 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "description": "A reusable React component for 3D talking avatars with lip-sync and text-to-speech",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/components/TalkingHeadAvatar.jsx

@@ -282,14 +282,51 @@ const TalkingHeadAvatar = forwardRef(({
         if (options.onSpeechEnd && talkingHeadRef.current) {
           const talkingHead = talkingHeadRef.current;
           
-          // Store original onAudioEnd if it exists
-          const originalOnAudioEnd = talkingHead.onAudioEnd;
-          
           // Set up a polling mechanism to detect when speech finishes
-          // This is because onAudioEnd is only for streaming mode
+          // Wait for audio to actually start playing before checking if it's finished
           let checkInterval = null;
           let checkCount = 0;
-          const maxChecks = 600; // 60 seconds max (50ms intervals for faster detection)
+          let audioStarted = false;
+          const maxChecks = 1200; // 60 seconds max (50ms intervals)
+          const maxWaitForAudioStart = 10000; // 10 seconds max to wait for audio to start
+          
+          // First, wait for audio to actually start playing (API call completes and audio is added to playlist)
+          let waitForAudioStartCount = 0;
+          const waitForAudioStart = setInterval(() => {
+            waitForAudioStartCount++;
+            
+            // Check if audio has started playing (audioPlaylist has items OR isAudioPlaying is true)
+            // Also check if isSpeaking is true (indicating API call has started processing)
+            if (talkingHead && talkingHead.isSpeaking && (
+              (talkingHead.audioPlaylist && talkingHead.audioPlaylist.length > 0) ||
+              (talkingHead.isAudioPlaying === true)
+            )) {
+              audioStarted = true;
+              clearInterval(waitForAudioStart);
+              
+              // Now start checking if speech has finished
+              checkInterval = setInterval(checkSpeechFinished, 50);
+            }
+            
+            // Timeout if audio doesn't start within reasonable time
+            if (waitForAudioStartCount * 50 > maxWaitForAudioStart) {
+              clearInterval(waitForAudioStart);
+              // Check if speech has actually started (isSpeaking should be true)
+              // If isSpeaking is false, the speech might have failed or completed very quickly
+              if (talkingHead && talkingHead.isSpeaking) {
+                // Still waiting for API, but assume it will start soon
+                audioStarted = true;
+                checkInterval = setInterval(checkSpeechFinished, 50);
+              } else {
+                // Speech never started or finished immediately, call callback
+                try {
+                  options.onSpeechEnd();
+                } catch (e) {
+                  console.error('Error in onSpeechEnd callback:', e);
+                }
+              }
+            }
+          }, 50);
           
           const checkSpeechFinished = () => {
             checkCount++;
@@ -307,31 +344,36 @@ const TalkingHeadAvatar = forwardRef(({
               return;
             }
             
-            // Check if speech has finished (not speaking and audio playlist is empty)
-            if (talkingHead && (!talkingHead.isSpeaking || talkingHead.isSpeaking === false) && 
-                (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
-                (!talkingHead.isAudioPlaying || talkingHead.isAudioPlaying === false)) {
-              
+            // Only check if audio has started playing
+            if (!audioStarted) {
+              return;
+            }
+            
+            // Check if speech has finished:
+            // 1. Not speaking OR speech queue is empty
+            // 2. Audio playlist is empty (no more audio to play)
+            // 3. Not currently playing audio
+            const isFinished = talkingHead && 
+              (!talkingHead.isSpeaking || talkingHead.isSpeaking === false) && 
+              (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
+              (!talkingHead.isAudioPlaying || talkingHead.isAudioPlaying === false);
+            
+            if (isFinished) {
               if (checkInterval) {
                 clearInterval(checkInterval);
                 checkInterval = null;
               }
               
-              // Small delay to ensure everything is settled - reduced for faster transitions
+              // Small delay to ensure everything is settled
               setTimeout(() => {
                 try {
                   options.onSpeechEnd();
                 } catch (e) {
                   console.error('Error in onSpeechEnd callback:', e);
                 }
-              }, 10);
+              }, 50);
             }
           };
-          
-          // Start checking after a minimal delay (to allow speech to start)
-          setTimeout(() => {
-            checkInterval = setInterval(checkSpeechFinished, 50);
-          }, 100);
         }
         
         if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {