@sage-rsc/talking-head-react 1.8.0 → 1.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "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/SimpleTalkingAvatar.jsx

@@ -398,7 +398,8 @@ const SimpleTalkingAvatar = forwardRef(({
     }
   }, []);
 
-  // Helper function to get all animations from a group (with gender support)
+  // Helper function to get all animations from a group (with unified gender support)
+  // This ensures both male and female avatars use the same fallback logic
   const getAllAnimationsFromGroup = useCallback((groupName) => {
     if (!loadedAnimations) {
       return [];
@@ -406,33 +407,47 @@ const SimpleTalkingAvatar = forwardRef(({
     
     let group = null;
     
-    // Check if gender-specific animations are available
+    // Unified fallback logic for both genders:
+    // 1. Try gender-specific animations (male/talking or female/talking)
+    // 2. Try shared gender-specific animations (shared/talking)
+    // 3. Try root-level animations (talking)
+    // This ensures both genders get the same treatment
+    
     if (loadedAnimations._genderSpecific) {
       const genderKey = getGenderKey(avatarBody);
       
+      // Try gender-specific first (e.g., male/talking or female/talking)
       const genderGroups = loadedAnimations._genderSpecific[genderKey];
-      
-      // Try gender-specific first
-      if (genderGroups && genderGroups[groupName]) {
+      if (genderGroups && genderGroups[groupName] && Array.isArray(genderGroups[groupName]) && genderGroups[groupName].length > 0) {
         group = genderGroups[groupName];
-      } 
-      // Fallback to shared gender-specific animations
-      else if (loadedAnimations._genderSpecific.shared && loadedAnimations._genderSpecific.shared[groupName]) {
-        group = loadedAnimations._genderSpecific.shared[groupName];
+      }
+      
+      // Fallback to shared gender-specific animations (shared/talking)
+      if (!group && loadedAnimations._genderSpecific.shared && loadedAnimations._genderSpecific.shared[groupName]) {
+        const sharedGroup = loadedAnimations._genderSpecific.shared[groupName];
+        if (Array.isArray(sharedGroup) && sharedGroup.length > 0) {
+          group = sharedGroup;
+        }
       }
     }
     
     // Fallback to root-level animations if gender-specific not found
+    // This ensures both genders can use root-level animations
     if (!group && loadedAnimations[groupName]) {
-      group = loadedAnimations[groupName];
+      const rootGroup = loadedAnimations[groupName];
+      if (Array.isArray(rootGroup) && rootGroup.length > 0) {
+        group = rootGroup;
+      } else if (typeof rootGroup === 'string') {
+        group = [rootGroup];
+      }
     }
     
-    if (!group) {
+    if (!group || (Array.isArray(group) && group.length === 0)) {
       // Only log warning if animations were actually configured (not just empty object)
       const hasAnyAnimations = Object.keys(loadedAnimations).length > 0 || 
                                (loadedAnimations._genderSpecific && Object.keys(loadedAnimations._genderSpecific).length > 0);
       if (hasAnyAnimations) {
-        console.warn(`⚠️ No animations found for group "${groupName}". Make sure animations are configured correctly.`);
+        console.warn(`⚠️ No animations found for group "${groupName}" (gender: ${getGenderKey(avatarBody)}). Make sure animations are configured correctly.`);
       }
       return [];
     }
@@ -1004,6 +1019,10 @@ const SimpleTalkingAvatar = forwardRef(({
         // IMPORTANT: Ensure isSpeaking is false to prevent startSpeaking() from continuing
         talkingHeadRef.current.isSpeaking = false;
         
+        // CRITICAL: Stop animations when pausing
+        isSpeakingRef.current = false;
+        currentAnimationGroupRef.current = null;
+        
         // If we have trimmed buffer, store speech queue to restore on resume
         // This way speech won't continue automatically, only when resumed
         if (pausedAudioData && pausedAudioData.audio && savedSpeechQueue) {

package/src/lib/talkinghead.mjs

@@ -3171,6 +3171,27 @@ class TalkingHead {
     this.updatePoseBase(this.animClock);
     if ( this.mixer ) {
       this.mixer.update(dt / 1000 * this.mixer.timeScale);
+      
+      // Manually check if current FBX animation has finished (backup to mixer 'finished' event)
+      // This ensures the callback fires reliably even if the mixer event doesn't
+      if (this.currentFBXActionForCallback && this.currentFBXActionForCallback.isRunning() && this.currentFBXActionClipDuration) {
+        const actionTime = this.currentFBXActionForCallback.time;
+        const clipDuration = this.currentFBXActionClipDuration;
+        
+        // For LoopOnce, action.time goes from 0 to clipDuration
+        // Check if animation has reached the end (with small tolerance for timing)
+        // Also check if action is paused (time doesn't advance when paused)
+        if (actionTime >= clipDuration - 0.05 || (actionTime > 0 && !this.currentFBXActionForCallback.paused && actionTime >= clipDuration - 0.1)) {
+          // Animation finished - call callback manually
+          if (this.currentFBXActionCallback) {
+            this.currentFBXActionCallback();
+            this.currentFBXActionCallback = null;
+          }
+          this.currentFBXActionForCallback = null;
+          this.currentFBXActionStartTime = null;
+          this.currentFBXActionClipDuration = null;
+        }
+      }
     }
     this.updatePoseDelta();
     
@@ -5556,8 +5577,6 @@ class TalkingHead {
         this.stopAnimation();
       };
       
-      this.mixer.addEventListener( 'finished', finishedHandler, { once: true });
-
       // Play action with error handling
       // If dur is 0 or negative, play animation once (use clip's natural duration)
       const action = this.mixer.clipAction(item.clip);
@@ -5571,12 +5590,29 @@ class TalkingHead {
       }
       action.clampWhenFinished = true;
       
+      // Set up callback to check when animation finishes
+      // Use both mixer 'finished' event and manual time checking for reliability
+      this.mixer.addEventListener( 'finished', finishedHandler, { once: true });
+      
+      // Also track the action and check manually in animate loop for reliability
+      // Store action reference for manual checking
+      this.currentFBXActionForCallback = action;
+      this.currentFBXActionCallback = finishedHandler;
+      this.currentFBXActionClipDuration = item.clip.duration;
+      this.currentFBXActionStartTime = null; // Will be set when action starts playing
+      
       // Fade out previous action smoothly if one exists and is running
       if (this.currentFBXAction && this.currentFBXAction.isRunning()) {
         this.currentFBXAction.fadeOut(0.3);
         // Small delay for smooth transition
         setTimeout(() => {
           this.currentFBXAction = action;
+          // IMPORTANT: Update callback tracking variables inside setTimeout
+          // This ensures manual checking works correctly for fade transitions
+          this.currentFBXActionForCallback = action;
+          this.currentFBXActionCallback = finishedHandler;
+          this.currentFBXActionClipDuration = item.clip.duration;
+          this.currentFBXActionStartTime = this.mixer.time; // Track when animation starts
           try {
             action.fadeIn(0.5).play();
             console.log('FBX animation started successfully (with fade transition):', url);
@@ -5590,6 +5626,7 @@ class TalkingHead {
       
       // Store the current FBX action for proper cleanup
       this.currentFBXAction = action;
+      this.currentFBXActionStartTime = this.mixer.time; // Track when animation starts
       
       try {
         action.fadeIn(0.5).play();
@@ -5973,6 +6010,12 @@ class TalkingHead {
       this.currentFBXAction = null;
     }
     
+    // Clear callback tracking
+    this.currentFBXActionForCallback = null;
+    this.currentFBXActionCallback = null;
+    this.currentFBXActionStartTime = null;
+    this.currentFBXActionClipDuration = null;
+    
     // Only destroy mixer if no other animations are running
     // This allows morph target animations (lip-sync) to continue
     if (this.mixer && this.mixer._actions.length === 0) {