@sage-rsc/talking-head-react 1.5.9 → 1.5.11

package/package.json

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

@@ -75,6 +75,8 @@ const SimpleTalkingAvatar = forwardRef(({
   const [isPaused, setIsPaused] = useState(false);
   const [loadedAnimations, setLoadedAnimations] = useState(animations);
   const idleAnimationIntervalRef = useRef(null);
+  const isSpeakingRef = useRef(false);
+  const currentAnimationGroupRef = useRef(null);
   
   // Keep ref in sync with state
   useEffect(() => {
@@ -321,8 +323,8 @@ const SimpleTalkingAvatar = forwardRef(({
     return null;
   }, [loadedAnimations, avatarBody]);
 
-  // Helper function to play random animation from a group
-  const playRandomAnimation = useCallback((groupName, disablePositionLock = false) => {
+  // Helper function to play random animation from a group with smooth transitions
+  const playRandomAnimation = useCallback((groupName, disablePositionLock = false, onFinished = null) => {
     if (!talkingHeadRef.current) {
       console.warn('TalkingHead not initialized yet');
       return null;
@@ -331,8 +333,23 @@ const SimpleTalkingAvatar = forwardRef(({
     const animationPath = getRandomAnimation(groupName);
     if (animationPath) {
       try {
-        talkingHeadRef.current.playAnimation(animationPath, null, 10, 0, 0.01, disablePositionLock);
+        // Create callback that will play next animation if still speaking
+        const animationFinishedCallback = () => {
+          // If still speaking and same group, play next random animation
+          if (isSpeakingRef.current && currentAnimationGroupRef.current === groupName) {
+            // Small delay for smooth transition
+            setTimeout(() => {
+              playRandomAnimation(groupName, disablePositionLock, onFinished);
+            }, 100);
+          } else if (onFinished) {
+            onFinished();
+          }
+        };
+        
+        // Play animation with callback - fade transitions are handled in playAnimation
+        talkingHeadRef.current.playAnimation(animationPath, null, 10, 0, 0.01, disablePositionLock, animationFinishedCallback);
         console.log(`✅ Playing random animation from "${groupName}" group:`, animationPath);
+        
         return animationPath;
       } catch (error) {
         console.error(`❌ Failed to play random animation from "${groupName}" group:`, error);
@@ -365,6 +382,11 @@ const SimpleTalkingAvatar = forwardRef(({
     if (animationGroup && !options.skipAnimation) {
       console.log(`🎬 Attempting to play animation from group: "${animationGroup}"`);
       console.log(`📊 Current avatarBody: "${avatarBody}", loadedAnimations:`, loadedAnimations);
+      
+      // Mark as speaking and track animation group for continuous playback
+      isSpeakingRef.current = true;
+      currentAnimationGroupRef.current = animationGroup;
+      
       playRandomAnimation(animationGroup);
     } else {
       console.log(`⏭️ Skipping animation (group: ${animationGroup}, skipAnimation: ${options.skipAnimation})`);
@@ -400,6 +422,10 @@ const SimpleTalkingAvatar = forwardRef(({
           speechEndIntervalRef.current = null;
         }
 
+        // Stop continuous animation playback
+        isSpeakingRef.current = false;
+        currentAnimationGroupRef.current = null;
+
         // Call user's onSpeechEnd callback
         if (options.onSpeechEnd) {
           options.onSpeechEnd();
@@ -538,6 +564,11 @@ const SimpleTalkingAvatar = forwardRef(({
         clearInterval(speechEndIntervalRef.current);
         speechEndIntervalRef.current = null;
       }
+      
+      // Stop continuous animation playback
+      isSpeakingRef.current = false;
+      currentAnimationGroupRef.current = null;
+      
       setIsPaused(false);
       isPausedRef.current = false;
     }

package/src/lib/talkinghead.mjs

@@ -1609,8 +1609,8 @@ class TalkingHead {
       }
     }
     
-    // Apply shoulder adjustment to lower shoulders
-    this.applyShoulderAdjustment();
+    // TEMPORARILY DISABLED - No shoulder adjustments
+    // this.applyShoulderAdjustment();
   }
   
   /**
@@ -1618,6 +1618,9 @@ class TalkingHead {
    * This is called from updatePoseBase for pose-based animations
    */
   applyShoulderAdjustment() {
+    // TEMPORARILY DISABLED - No arm/shoulder adjustments
+    return;
+    
     const tempEuler = new THREE.Euler();
     const targetX = 0.6; // Target X rotation for relaxed shoulders - lowered significantly
     const maxX = 0.7; // Maximum X rotation - lowered significantly
@@ -5464,7 +5467,7 @@ class TalkingHead {
   * @param {number} [scale=0.01] Position scale factor
   */
 
-  async playAnimation(url, onprogress=null, dur=10, ndx=0, scale=0.01, disablePositionLock=false) {
+  async playAnimation(url, onprogress=null, dur=10, ndx=0, scale=0.01, disablePositionLock=false, onFinished=null) {
     if ( !this.armature ) return;
 
     // Track whether position was locked for this animation
@@ -5502,7 +5505,20 @@ class TalkingHead {
       } else {
         console.log('Using existing mixer for FBX animation, preserving morph targets');
       }
-      this.mixer.addEventListener( 'finished', this.stopAnimation.bind(this), { once: true });
+      
+      // Store callback for when animation finishes
+      this.animationFinishedCallback = onFinished;
+      
+      // Create handler that calls callback before stopping
+      const finishedHandler = () => {
+        if (this.animationFinishedCallback) {
+          this.animationFinishedCallback();
+          this.animationFinishedCallback = null;
+        }
+        this.stopAnimation();
+      };
+      
+      this.mixer.addEventListener( 'finished', finishedHandler, { once: true });
 
       // Play action with error handling
       const repeat = Math.ceil(dur / item.clip.duration);
@@ -5510,6 +5526,23 @@ class TalkingHead {
       action.setLoop( THREE.LoopRepeat, repeat );
       action.clampWhenFinished = true;
       
+      // 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;
+          try {
+            action.fadeIn(0.5).play();
+            console.log('FBX animation started successfully (with fade transition):', url);
+          } catch (error) {
+            console.warn('FBX animation failed to start:', error);
+            this.stopAnimation();
+          }
+        }, 300);
+        return;
+      }
+      
       // Store the current FBX action for proper cleanup
       this.currentFBXAction = action;