@sage-rsc/talking-head-react 1.0.60 → 1.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "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

@@ -51,11 +51,18 @@ const TalkingHeadAvatar = forwardRef(({
   const talkingHeadRef = useRef(null);
   const showFullAvatarRef = useRef(showFullAvatar);
   const pausedSpeechRef = useRef(null); // Track paused speech for resume
+  const speechEndIntervalRef = useRef(null); // Track onSpeechEnd polling interval
+  const isPausedRef = useRef(false); // Track pause state for interval checks
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isReady, setIsReady] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   
+  // Keep ref in sync with state
+  useEffect(() => {
+    isPausedRef.current = isPaused;
+  }, [isPaused]);
+  
   // Update ref when prop changes
   useEffect(() => {
     showFullAvatarRef.current = showFullAvatar;
@@ -277,7 +284,13 @@ const TalkingHeadAvatar = forwardRef(({
   const speakText = useCallback(async (textToSpeak, options = {}) => {
     if (talkingHeadRef.current && isReady) {
       try {
-        // Clear paused speech when starting new speech
+        // Stop any existing speech end polling
+        if (speechEndIntervalRef.current) {
+          clearInterval(speechEndIntervalRef.current);
+          speechEndIntervalRef.current = null;
+        }
+        
+        // Store speech for potential pause/resume
         pausedSpeechRef.current = { text: textToSpeak, options };
         setIsPaused(false);
         
@@ -304,13 +317,19 @@ const TalkingHeadAvatar = forwardRef(({
           checkInterval = setInterval(() => {
             checkCount++;
             
+            // Don't fire callback if paused (check ref for current value)
+            if (isPausedRef.current) {
+              return;
+            }
+            
             // Safety timeout - call callback anyway after max time
             if (checkCount > maxChecks) {
               if (checkInterval) {
                 clearInterval(checkInterval);
                 checkInterval = null;
+                speechEndIntervalRef.current = null;
               }
-              if (!callbackFired) {
+              if (!callbackFired && !isPausedRef.current) {
                 callbackFired = true;
                 try {
                   options.onSpeechEnd();
@@ -335,21 +354,23 @@ const TalkingHeadAvatar = forwardRef(({
               audioPlaylistEmpty &&
               talkingHead.isAudioPlaying === false;
             
-            if (isFinished && !callbackFired) {
+            if (isFinished && !callbackFired && !isPausedRef.current) {
               // Double-check after a small delay to ensure it's really finished
               setTimeout(() => {
-                // Re-check one more time to be sure
+                // Re-check one more time to be sure, and make sure we're still not paused
                 const finalCheck = talkingHead && 
+                  !isPausedRef.current &&
                   talkingHead.isSpeaking === false && 
                   (!talkingHead.speechQueue || talkingHead.speechQueue.length === 0) &&
                   (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
                   talkingHead.isAudioPlaying === false;
                 
-                if (finalCheck && !callbackFired) {
+                if (finalCheck && !callbackFired && !isPausedRef.current) {
                   callbackFired = true;
                   if (checkInterval) {
                     clearInterval(checkInterval);
                     checkInterval = null;
+                    speechEndIntervalRef.current = null;
                   }
                   try {
                     options.onSpeechEnd();
@@ -360,6 +381,9 @@ const TalkingHeadAvatar = forwardRef(({
               }, 100);
             }
           }, 100); // Check every 100ms for better reliability
+          
+          // Store interval ref so we can clear it on pause
+          speechEndIntervalRef.current = checkInterval;
         }
         
         if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {
@@ -405,48 +429,55 @@ const TalkingHeadAvatar = forwardRef(({
                                    (talkingHead.audioPlaylist && talkingHead.audioPlaylist.length > 0) ||
                                    (talkingHead.speechQueue && talkingHead.speechQueue.length > 0);
       
-      // Only pause if avatar is actually speaking
-      if (isCurrentlySpeaking && pausedSpeechRef.current && pausedSpeechRef.current.text) {
-        talkingHeadRef.current.pauseSpeaking();
-        setIsPaused(true);
-      } else if (isCurrentlySpeaking) {
-        // If speaking but no paused speech stored, try to pause anyway
-        // This handles cases where speech started before we could track it
+      if (isCurrentlySpeaking) {
+        // Stop any onSpeechEnd polling to prevent callbacks from firing
+        if (speechEndIntervalRef.current) {
+          clearInterval(speechEndIntervalRef.current);
+          speechEndIntervalRef.current = null;
+        }
+        
+        // Clear speech queue to prevent next statements from playing
+        if (talkingHead.speechQueue) {
+          talkingHead.speechQueue.length = 0;
+        }
+        
+        // Pause the speaking
         talkingHeadRef.current.pauseSpeaking();
+        isPausedRef.current = true;
         setIsPaused(true);
       }
     }
   }, []);
 
   const resumeSpeaking = useCallback(async () => {
-    if (talkingHeadRef.current && isPaused) {
+    if (talkingHeadRef.current && isPaused && pausedSpeechRef.current && pausedSpeechRef.current.text) {
+      const pausedSpeech = pausedSpeechRef.current;
+      const pausedOptions = pausedSpeech.options || {};
+      
+      // Clear pause state first
       setIsPaused(false);
       
       // Resume audio context
       await resumeAudioContext();
       
-      // Re-speak the paused text if we have it stored
-      if (pausedSpeechRef.current && pausedSpeechRef.current.text) {
-        const pausedSpeech = pausedSpeechRef.current;
-        pausedSpeechRef.current = null; // Clear after getting the text
-        
-        const speakOptions = {
-          ...pausedSpeech.options,
-          lipsyncLang: pausedSpeech.options.lipsyncLang || defaultAvatarConfig.lipsyncLang || 'en'
-        };
-        
-        if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {
-          if (talkingHeadRef.current.setSlowdownRate) {
-            talkingHeadRef.current.setSlowdownRate(1.05);
-          }
-          talkingHeadRef.current.speakText(pausedSpeech.text, speakOptions);
+      // Re-speak the paused text with original options (including onSpeechEnd callback)
+      const speakOptions = {
+        ...pausedOptions,
+        lipsyncLang: pausedOptions.lipsyncLang || defaultAvatarConfig.lipsyncLang || 'en'
+      };
+      
+      // Use speakText method which will set up the onSpeechEnd callback again
+      if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {
+        if (talkingHeadRef.current.setSlowdownRate) {
+          talkingHeadRef.current.setSlowdownRate(1.05);
         }
-      } else {
-        // If no paused speech stored, just clear the pause state
-        pausedSpeechRef.current = null;
+        // Call speakText which will handle everything including onSpeechEnd
+        await speakText(pausedSpeech.text, speakOptions);
       }
+      
+      // Don't clear pausedSpeechRef here - speakText will handle it
     }
-  }, [resumeAudioContext, isPaused]);
+  }, [resumeAudioContext, isPaused, speakText]);
 
   const setMood = useCallback((mood) => {
     if (talkingHeadRef.current) {