@sage-rsc/talking-head-react 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.4.0",
+  "version": "1.4.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/lib/talkinghead.mjs

@@ -1128,7 +1128,7 @@ class TalkingHead {
         });
       } else {
         if (obj.material.map) obj.material.map.dispose();
-        obj.material.dispose();
+      obj.material.dispose();
       }
     }
   }
@@ -1244,7 +1244,7 @@ class TalkingHead {
     this.lockedPosition = null;
     this.originalPosition = null;
     this.positionWasLocked = false;
-
+    
     // Initialize FBX animation loader
     this.fbxAnimationLoader = null;
 
@@ -1256,7 +1256,7 @@ class TalkingHead {
       this.mixer.removeEventListener('finished', this._mixerHandler);
       this.mixer.stopAllAction();
       this.mixer.uncacheRoot(this.armature);
-      this.mixer = null;
+    this.mixer = null;
       this._mixerHandler = null;
     }
     if ( this.isAvatarOnly ) {
@@ -1512,6 +1512,11 @@ class TalkingHead {
     this.controlsEnd = new THREE.Vector3(x, y, 0);
     this.cameraEnd = new THREE.Vector3(x, y, z).applyEuler( new THREE.Euler( cameraRotateX, cameraRotateY, 0 ) );
 
+    // Guard against null controls (e.g., in avatarOnly mode or before initialization)
+    if ( !this.controls ) {
+      return;
+    }
+
     if ( this.cameraClock === null ) {
       this.controls.target.copy( this.controlsEnd );
       this.camera.position.copy( this.cameraEnd );
@@ -1585,7 +1590,9 @@ class TalkingHead {
       this.camera.aspect = this.nodeAvatar.clientWidth / this.nodeAvatar.clientHeight;
       this.camera.updateProjectionMatrix();
       this.renderer.setSize( this.nodeAvatar.clientWidth, this.nodeAvatar.clientHeight );
+      if ( this.controls ) {
       this.controls.update();
+      }
       this.render();
     }
   }
@@ -2040,6 +2047,11 @@ class TalkingHead {
   */
   setPoseFromTemplate(template, ms=2000) {
 
+    // Guard against disposal: check if required objects exist
+    if (!this.poseFactory || !this.poseTemplates) {
+      return;
+    }
+
     // Special cases
     const isIntermediate = template && this.poseTarget && this.poseTarget.template && ((this.poseTarget.template.standing && template.lying) || (this.poseTarget.template.lying && template.standing));
     const isSameTemplate = template && (template === this.poseCurrentTemplate);
@@ -2053,13 +2065,18 @@ class TalkingHead {
         this.setPoseFromTemplate(template,ms);
       }, duration);
     } else {
-      this.poseCurrentTemplate = template || this.poseCurrentTemplate;
+      this.poseCurrentTemplate = template || this.poseCurrentTemplate;
     }
 
     // Set target
     this.poseTarget = this.poseFactory(this.poseCurrentTemplate, duration);
     this.poseWeightOnLeft = true;
 
+    // Guard: ensure poseTarget was created successfully
+    if (!this.poseTarget || !this.poseTarget.props) {
+      return;
+    }
+
     // Mirror properties, if necessary
     if ( (!isSameTemplate && !isWeightOnLeft) || (isSameTemplate && isWeightOnLeft ) ) {
       this.poseTarget.props = this.mirrorPose(this.poseTarget.props);
@@ -2078,13 +2095,16 @@ class TalkingHead {
     }
 
     // Make sure deltas are included in the target
+    // Guard against disposal: check if poseBase and its props exist
+    if (this.poseBase && this.poseBase.props && this.poseDelta && this.poseDelta.props) {
     Object.keys(this.poseDelta.props).forEach( key => {
-      if ( !this.poseTarget.props.hasOwnProperty(key) ) {
+        if ( !this.poseTarget.props.hasOwnProperty(key) && this.poseBase.props[key] ) {
         this.poseTarget.props[key] = this.poseBase.props[key].clone();
         this.poseTarget.props[key].t = this.animClock;
         this.poseTarget.props[key].d = duration;
       }
     });
+    }
 
   }
 
@@ -2816,7 +2836,7 @@ class TalkingHead {
     } else {
 
       // Camera
-      if ( this.cameraClock !== null && this.cameraClock < 1000 ) {
+      if ( this.controls && this.cameraClock !== null && this.cameraClock < 1000 ) {
         this.cameraClock += dt;
         if ( this.cameraClock > 1000 ) this.cameraClock = 1000;
         let s = new THREE.Spherical().setFromVector3(this.cameraStart);
@@ -2841,7 +2861,7 @@ class TalkingHead {
       }
 
       // Autorotate
-      if ( this.controls.autoRotate ) this.controls.update();
+      if ( this.controls && this.controls.autoRotate ) this.controls.update();
 
       // Statistics end
       if ( this.stats ) {
@@ -2868,17 +2888,24 @@ class TalkingHead {
   }
 
   /**
-  * Get lip-sync processor based on language. Import module dynamically.
+  * Get lip-sync processor based on language. Use statically imported modules.
   * @param {string} lang Language
-  * @param {string} [path="./"] Module path
+  * @param {string} [path="./"] Module path (ignored, using static imports)
   */
   lipsyncGetProcessor(lang, path="./") {
     if ( !this.lipsync.hasOwnProperty(lang) ) {
-      const moduleName = path + 'lipsync-' + lang.toLowerCase() + '.mjs';
+      const langLower = lang.toLowerCase();
+      // Use statically imported modules from LIPSYNC_MODULES
+      if (LIPSYNC_MODULES[langLower]) {
       const className = 'Lipsync' + lang.charAt(0).toUpperCase() + lang.slice(1);
-      import(moduleName).then( module => {
-        this.lipsync[lang] = new module[className];
-      });
+        if (LIPSYNC_MODULES[langLower][className]) {
+          this.lipsync[lang] = new LIPSYNC_MODULES[langLower][className];
+        } else {
+          console.warn(`Lipsync class ${className} not found in module for language ${lang}`);
+        }
+      } else {
+        console.warn(`Lipsync module for language ${lang} not found in static imports`);
+      }
     }
   }
 
@@ -4326,10 +4353,10 @@ class TalkingHead {
   setSlowdownRate(k) {
     this.animSlowdownRate = k;
     if ( this.audioSpeechSource ) {
-      this.audioSpeechSource.playbackRate.value = 1 / this.animSlowdownRate;
+    this.audioSpeechSource.playbackRate.value = 1 / this.animSlowdownRate;
     }
     if ( this.audioBackgroundSource ) {
-      this.audioBackgroundSource.playbackRate.value = 1 / this.animSlowdownRate;
+    this.audioBackgroundSource.playbackRate.value = 1 / this.animSlowdownRate;
     }
   }
 
@@ -4338,7 +4365,7 @@ class TalkingHead {
   * @return {numeric} Autorotate speed.
   */
   getAutoRotateSpeed(k) {
-    return this.controls.autoRotateSpeed;
+    return this.controls ? this.controls.autoRotateSpeed : 0;
   }
 
   /**
@@ -4346,8 +4373,10 @@ class TalkingHead {
   * @param {numeric} speed Autorotate speed, e.g. value 2 = 30 secs per orbit at 60fps.
   */
   setAutoRotateSpeed(speed) {
-    this.controls.autoRotateSpeed = speed;
-    this.controls.autoRotate = (speed > 0);
+    if ( this.controls ) {
+      this.controls.autoRotateSpeed = speed;
+      this.controls.autoRotate = (speed > 0);
+    }
   }
 
   /**
@@ -4737,7 +4766,7 @@ class TalkingHead {
       this.mixer = null;
       this._mixerHandler = null;
     }
-
+    
     // Unlock position if it was locked
     if (this.positionWasLocked) {
       this.unlockAvatarPosition();
@@ -4747,7 +4776,7 @@ class TalkingHead {
     }
 
     // Restart gesture
-    if ( this.gesture ) {
+    if ( this.gesture && this.poseTarget && this.poseTarget.props ) {
       for( let [p,v] of Object.entries(this.gesture) ) {
         v.t = this.animClock;
         v.d = 1000;
@@ -4760,11 +4789,17 @@ class TalkingHead {
     }
 
     // Restart pose animation
+    if ( this.animQueue ) {
     let anim = this.animQueue.find( x => x.template.name === 'pose' );
     if ( anim ) {
       anim.ts[0] = this.animClock;
     }
+    }
+    
+    // Only call setPoseFromTemplate if poseFactory exists (not disposed)
+    if ( this.poseFactory ) {
     this.setPoseFromTemplate( null );
+    }
 
   }
 
@@ -4799,7 +4834,7 @@ class TalkingHead {
         this.mixer.removeEventListener('finished', this._mixerHandler);
         this.mixer.stopAllAction();
         this.mixer.uncacheRoot(this.armature);
-        this.mixer = null;
+      this.mixer = null;
         this._mixerHandler = null;
       }
       let anim = this.animQueue.find( x => x.template.name === 'pose' );
@@ -5514,7 +5549,7 @@ class TalkingHead {
       this.clearThree(this.scene);
       this.resizeobserver.disconnect();
       this.resizeobserver = null;
-
+      
       if ( this.renderer ) {
         this.renderer.dispose();
         const gl = this.renderer.getContext();
@@ -5527,12 +5562,12 @@ class TalkingHead {
       if ( this.controls ) {
         this.controls.dispose();
         this.controls = null;
-      }
+    }
     }
 
     this.clearThree( this.ikMesh );
     this.dynamicbones.dispose();
-    
+
     // Clean up FBX animation loader
     if (this.fbxAnimationLoader) {
       this.fbxAnimationLoader.stopCurrentAnimation();

package/src/lib/talkinghead.mjs.new

@@ -4448,7 +4448,7 @@ class TalkingHead {
 
       // Use existing mixer or create new one if none exists
       if (!this.mixer) {
-        this.mixer = new THREE.AnimationMixer(this.armature);
+      this.mixer = new THREE.AnimationMixer(this.armature);
         console.log('Created new mixer for FBX animation');
       } else {
         console.log('Using existing mixer for FBX animation, preserving morph targets');
@@ -4465,7 +4465,7 @@ class TalkingHead {
       this.currentFBXAction = action;
       
       try {
-        action.fadeIn(0.5).play();
+      action.fadeIn(0.5).play();
         console.log('FBX animation started successfully:', url);
       } catch (error) {
         console.warn('FBX animation failed to start:', error);