@sage-rsc/talking-head-react 1.2.1 → 1.2.3

package/package.json

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

@@ -27,7 +27,10 @@ import { getActiveTTSConfig, ELEVENLABS_CONFIG, DEEPGRAM_CONFIG } from '../confi
  * @param {Function} props.onSpeechEnd - Callback when speech ends
  * @param {string} props.className - Additional CSS classes
  * @param {Object} props.style - Additional inline styles
- * @param {Object} props.animations - Object mapping animation names to FBX file paths
+ * @param {Object} props.animations - Object mapping animation names to FBX file paths, or animation groups
+ *                                    Can be: { "dance": "/animations/dance.fbx" } (single animation)
+ *                                    Or: { "talking": ["/animations/talk1.fbx", "/animations/talk2.fbx"] } (group)
+ * @param {string} props.autoAnimationGroup - Animation group to automatically play when speaking (e.g., "talking")
  * @param {boolean} props.autoSpeak - Whether to automatically speak the text prop when ready
  * @param {Object} ref - Ref to access component methods
  */
@@ -51,6 +54,7 @@ const SimpleTalkingAvatar = forwardRef(({
   className = "",
   style = {},
   animations = {},
+  autoAnimationGroup = null, // e.g., "talking" - will randomly select from this group when speaking
   autoSpeak = false
 }, ref) => {
   const containerRef = useRef(null);
@@ -220,6 +224,44 @@ const SimpleTalkingAvatar = forwardRef(({
     }
   }, []);
 
+  // Helper function to get random animation from a group
+  const getRandomAnimation = useCallback((groupName) => {
+    if (!animations || !animations[groupName]) {
+      return null;
+    }
+    
+    const group = animations[groupName];
+    
+    // If it's an array, randomly select one
+    if (Array.isArray(group) && group.length > 0) {
+      const randomIndex = Math.floor(Math.random() * group.length);
+      return group[randomIndex];
+    }
+    
+    // If it's a string, return it directly
+    if (typeof group === 'string') {
+      return group;
+    }
+    
+    return null;
+  }, [animations]);
+
+  // Helper function to play random animation from a group
+  const playRandomAnimation = useCallback((groupName, disablePositionLock = false) => {
+    const animationPath = getRandomAnimation(groupName);
+    if (animationPath && talkingHeadRef.current) {
+      try {
+        talkingHeadRef.current.playAnimation(animationPath, null, 10, 0, 0.01, disablePositionLock);
+        console.log(`Playing random animation from "${groupName}" group:`, animationPath);
+        return animationPath;
+      } catch (error) {
+        console.warn(`Failed to play random animation from "${groupName}" group:`, error);
+        return null;
+      }
+    }
+    return null;
+  }, [getRandomAnimation]);
+
   // Speak text with proper callback handling
   const speakText = useCallback(async (textToSpeak, options = {}) => {
     if (!talkingHeadRef.current || !isReady) {
@@ -235,6 +277,13 @@ const SimpleTalkingAvatar = forwardRef(({
     // Always resume audio context first (required for user interaction)
     await resumeAudioContext();
 
+    // Play random animation from autoAnimationGroup if specified
+    // Check both autoAnimationGroup prop and options.animationGroup
+    const animationGroup = options.animationGroup || autoAnimationGroup;
+    if (animationGroup && !options.skipAnimation) {
+      playRandomAnimation(animationGroup);
+    }
+
     // Reset speech progress tracking
     speechProgressRef.current = { remainingText: null, originalText: null, options: null };
     originalSentencesRef.current = [];
@@ -279,7 +328,7 @@ const SimpleTalkingAvatar = forwardRef(({
       console.error('Error speaking text:', err);
       setError(err.message || 'Failed to speak text');
     }
-  }, [isReady, onSpeechEnd, resumeAudioContext]);
+  }, [isReady, onSpeechEnd, resumeAudioContext, autoAnimationGroup, playRandomAnimation]);
 
   // Auto-speak text when ready and autoSpeak is true
   useEffect(() => {
@@ -394,6 +443,12 @@ const SimpleTalkingAvatar = forwardRef(({
         talkingHeadRef.current.playAnimation(animationName, null, 10, 0, 0.01, disablePositionLock);
       }
     },
+    playRandomAnimation: (groupName, disablePositionLock = false) => {
+      return playRandomAnimation(groupName, disablePositionLock);
+    },
+    getRandomAnimation: (groupName) => {
+      return getRandomAnimation(groupName);
+    },
     playReaction: (reactionType) => talkingHeadRef.current?.playReaction(reactionType),
     playCelebration: () => talkingHeadRef.current?.playCelebration(),
     setShowFullAvatar: (show) => {

package/src/lib/talkinghead.mjs

@@ -5663,58 +5663,9 @@ class TalkingHead {
             const newTrack = track.clone();
             newTrack.name = newTrackName;
             
-            // Fix rotations for Ready Player Me arm bones (coordinate system correction)
-            // Ready Player Me uses a different coordinate system, so we need to adjust rotations
-            const isArmBone = mappedBoneName.includes('Arm') || mappedBoneName.includes('Hand') || mappedBoneName.includes('Shoulder');
-            const isLeftSide = mappedBoneName.includes('Left');
-            const isRightSide = mappedBoneName.includes('Right');
-            const isForearm = mappedBoneName.includes('ForeArm') || mappedBoneName.includes('Forearm');
-            const isHand = mappedBoneName.includes('Hand') && !mappedBoneName.includes('Index') && 
-                          !mappedBoneName.includes('Thumb') && !mappedBoneName.includes('Middle') &&
-                          !mappedBoneName.includes('Ring') && !mappedBoneName.includes('Pinky');
-            
-            if (isArmBone && (property === 'quaternion' || property === 'rotation')) {
-              if (property === 'quaternion' && newTrack.values && newTrack.values.length >= 4) {
-                // Adjust quaternion rotations for Ready Player Me coordinate system
-                const numKeyframes = newTrack.times.length;
-                for (let i = 0; i < numKeyframes; i++) {
-                  const baseIdx = i * 4;
-                  if (baseIdx + 3 < newTrack.values.length) {
-                    let x = newTrack.values[baseIdx];
-                    let y = newTrack.values[baseIdx + 1];
-                    let z = newTrack.values[baseIdx + 2];
-                    let w = newTrack.values[baseIdx + 3];
-                    
-                    let q = new THREE.Quaternion(x, y, z, w);
-                    
-                    // For Ready Player Me, left side bones may need coordinate system correction
-                    // Try multiple approaches: invert quaternion or rotate around different axes
-                    if (isLeftSide) {
-                      if (isHand) {
-                        // Left hand: Try inverting the quaternion (conjugate) to flip orientation
-                        // This might fix the "folding behind" issue
-                        q.conjugate();
-                        // Then rotate 180 degrees around Y axis
-                        const flipY = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
-                        q = flipY.multiply(q);
-                      } else if (isForearm) {
-                        // Left forearm: Try rotating 180 degrees around Y axis first
-                        const flipY = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
-                        q = flipY.multiply(q);
-                        // Then rotate 90 degrees around X axis
-                        const adjustX = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2);
-                        q = adjustX.multiply(q);
-                      }
-                    }
-                    
-                    newTrack.values[baseIdx] = q.x;
-                    newTrack.values[baseIdx + 1] = q.y;
-                    newTrack.values[baseIdx + 2] = q.z;
-                    newTrack.values[baseIdx + 3] = q.w;
-                  }
-                }
-              }
-            }
+            // Note: Rotation corrections removed - they were causing issues with both arms
+            // If left arm still has issues, it's likely a bone mapping problem, not rotation
+            // Focus on getting bone names mapped correctly first
             
             mappedTracks.push(newTrack);