@gamelearn/arcade-components 1.32.4 → 1.34.0

package/dist/components/conversational-pro-component/components/ConversationalProComponent.js

@@ -27,6 +27,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -86,6 +88,11 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       currentLine = _useState10[0],
       setCurrentLine = _useState10[1];
 
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      ttsStarted = _useState12[0],
+      setTTsStart = _useState12[1];
+
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
@@ -100,10 +107,10 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       decision = currentLineData.decision;
   var isBranched = !!edges;
 
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      previousLineWasDecision = _useState12[0],
-      setPreviousLineWasDecision = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      previousLineWasDecision = _useState14[0],
+      setPreviousLineWasDecision = _useState14[1];
 
   var isVoiceOver = voiceOver || currentLineData.type === 'conversationalNarration';
   var isDecision = decision || currentLineData.type === 'conversationalDecision';
@@ -263,6 +270,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   }, [currentLineData.id, edges, finishConversation, lines]);
   var handleClickNext = (0, _react.useCallback)(function (choice, reset) {
     var isLast = false;
+    setTTsStart(false);
     setPreviousLineWasDecision(currentLineData.decision);
     setStarted(false);
     setAudioFailed(false);
@@ -292,6 +300,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   var handleClickBack = function handleClickBack() {
     setStarted(false);
+    setTTsStart(false);
     setAudioFailed(false);
 
     if (isBranched) {
@@ -326,10 +335,16 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
+    onStart: function onStart() {
+      if (currentMessage.emotion.includes('think')) return;
+      setTTsStart(true);
+    },
     onError: function onError() {
       setAudioFailed(true);
     },
     onFinish: function onFinish() {
+      setTTsStart(false);
+
       if (autoplayCond) {
         handleClickNext();
       }
@@ -394,7 +409,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     style: backgroundImage ? {
       backgroundImage: "url(\"".concat(backgroundImage, "\")")
     } : null
-  }, /*#__PURE__*/_react.default.createElement(_SlotList.default, listProps), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_SlotList.default, _extends({}, listProps, {
+    ttsStarted: ttsStarted
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "conversation--body",
     dir: "auto"
   }, currentMessage ? /*#__PURE__*/_react.default.createElement(_Message.default, {

package/dist/components/conversational-pro-component/components/SlotList.js

@@ -25,6 +25,7 @@ var SlotList = function SlotList(_ref) {
   var characters = _ref.characters,
       actors = _ref.actors,
       lodSettings = _ref.lodSettings,
+      ttsStarted = _ref.ttsStarted,
       currentMessage = _ref.currentMessage,
       flex = _ref.flex,
       slots = _ref.slots,
@@ -142,7 +143,8 @@ var SlotList = function SlotList(_ref) {
     slots: slots,
     flex: flex,
     currentMessage: currentMessage,
-    lodSettings: lodSettings
+    lodSettings: lodSettings,
+    ttsStarted: ttsStarted
   }), children || /*#__PURE__*/_react.default.createElement(Slots, null));
 };
 

package/dist/components/conversational-pro-component/components/scene/Panel.js

@@ -23,6 +23,8 @@ var _LightSet = _interopRequireDefault(require("../../../../helpers/LightSet"));
 
 var _deviceDetection = require("../../../../helpers/deviceDetection");
 
+var _useMouthMixer = _interopRequireDefault(require("../../../../helpers/useMouthMixer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,13 +35,16 @@ var isMobile = (0, _deviceDetection.DeviceDetection)();
 var defaultCamPos = [0, 14.63, 16];
 
 function Panel(_ref) {
-  var _character$resource4, _character$resource5;
+  var _character$resource4, _character$resource5, _character$resource5$, _character$resource5$2, _character$resource6;
 
   var character = _ref.character,
+      ttsStarted = _ref.ttsStarted,
       active = _ref.active;
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
+  var model = (0, _react.useRef)();
+  var defaultClip = (0, _react.useRef)();
   var emotion = (0, _react.useMemo)(function () {
     if (isCharacter) {
       var _character$resource, _character$resource$a, _character$resource$a2, _character$resource3, _character$resource3$;
@@ -55,19 +60,26 @@ function Panel(_ref) {
 
     return {};
   }, [character.emotion, character === null || character === void 0 ? void 0 : (_character$resource4 = character.resource) === null || _character$resource4 === void 0 ? void 0 : _character$resource4.animations, isCharacter]);
-  var onLoadElement = (0, _react.useCallback)(function (model) {
+  var startMouthMixer = (0, _useMouthMixer.default)(model.current, character === null || character === void 0 ? void 0 : (_character$resource5 = character.resource) === null || _character$resource5 === void 0 ? void 0 : (_character$resource5$ = _character$resource5.animations) === null || _character$resource5$ === void 0 ? void 0 : (_character$resource5$2 = _character$resource5$.talking) === null || _character$resource5$2 === void 0 ? void 0 : _character$resource5$2.url, active);
+  (0, _react.useEffect)(function () {
+    startMouthMixer(ttsStarted);
+  }, [ttsStarted, startMouthMixer]);
+  var onLoadElement = (0, _react.useCallback)(function (object) {
     if (cameraRef.current) {
       var boundingBox = new _three.Box3();
-      boundingBox.setFromObject(model);
+      boundingBox.setFromObject(object);
       var size = boundingBox.getSize(new _three.Vector3());
       cameraRef.current.position.fromArray(defaultCamPos);
       cameraRef.current.rotation.set(0, 0, 0);
       cameraRef.current.updateProjectionMatrix();
 
       if (character.type === 'character') {
+        var defaultAnim = object.userData.defaultAnim;
+        model.current = object;
+        defaultClip.current = defaultAnim.clone();
         cameraRef.current.position.setY(size.y - 1.5 * 1.3); // Retro compatible with resources without eye bone
 
-        model.traverse(function (obj) {
+        object.traverse(function (obj) {
           if (obj.type === 'Bone' && (obj.name.toLowerCase() === 'l_eye' || obj.name.toLowerCase() === 'eye_l')) {
             var leftEyeVector = new _three.Vector3().setFromMatrixPosition(obj.matrixWorld);
             cameraRef.current.position.setY(leftEyeVector.y - 0.5);
@@ -75,13 +87,13 @@ function Panel(_ref) {
         });
         cameraRef.current.zoom = 1.85;
       } else if (character.type === 'object') {
-        (0, _helpers.cameraFitAnyObject)(model, cameraRef.current);
+        (0, _helpers.cameraFitAnyObject)(object, cameraRef.current);
         cameraRef.current.zoom = 1;
       }
 
       cameraRef.current.updateProjectionMatrix();
     }
-  }, [character]);
+  }, [character.type]);
   (0, _fiber.useFrame)(function (_ref2) {
     var gl = _ref2.gl;
 
@@ -111,9 +123,8 @@ function Panel(_ref) {
   }, 100);
   return character.type === 'image' ? null : /*#__PURE__*/_react.default.createElement("scene", {
     ref: sceneRef
-  }, (_character$resource5 = character.resource) !== null && _character$resource5 !== void 0 && _character$resource5.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
-    progressive: true,
-    individualProgress: true
+  }, (_character$resource6 = character.resource) !== null && _character$resource6 !== void 0 && _character$resource6.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+    progressive: true
   }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.TriggerWrapper, {
     name: "char_".concat(character.uid),
     url: character.resource.url,

package/dist/components/conversational-pro-component/components/scene/Panels.js

@@ -20,6 +20,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Panels = function Panels(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
+      ttsStarted = _ref.ttsStarted,
       activeIndex = _ref.activeIndex,
       flex = _ref.flex,
       lodSettings = _ref.lodSettings;
@@ -37,7 +38,8 @@ var Panels = function Panels(_ref) {
         key: "".concat("".concat(currentCharacter.uid, "_").concat(slotPosition), "_", characterPos),
         character: currentCharacter,
         active: activeIndex === currentPosition,
-        lodSettings: lodSettings
+        lodSettings: lodSettings,
+        ttsStarted: ttsStarted
       });
     }
 

package/dist/components/conversational-pro-component/components/scene/index.js

@@ -36,6 +36,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PanelsWrapper = function PanelsWrapper(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
+      ttsStarted = _ref.ttsStarted,
       slotRefs = _ref.slotRefs,
       flex = _ref.flex,
       currentMessage = _ref.currentMessage;
@@ -56,6 +57,7 @@ var PanelsWrapper = function PanelsWrapper(_ref) {
     finishBuild(true);
   }, []);
   return built ? /*#__PURE__*/_react.default.createElement(_Panels.default, {
+    ttsStarted: ttsStarted,
     characters: characters,
     slots: slots,
     slotRefs: slotRefs,

package/dist/components/dialog-component/components/DialogComponent.js

@@ -33,6 +33,8 @@ var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
 
 var _BubbleWrapper = _interopRequireDefault(require("./BubbleWrapper"));
 
+var _useMouthMixer = _interopRequireDefault(require("../../../helpers/useMouthMixer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -69,7 +71,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 // Global
 var isMobile = (0, _deviceDetection.DeviceDetection)();
-var crossFadeDuration = 0.5;
+var crossFadeDuration = 0.2;
 var characterMs = 75;
 var minMs = 1400;
 var headSize = 2; // Mobile always zoom in?
@@ -79,6 +81,8 @@ var maxCharacterToSwitch = 70;
 raycast.firstHitOnly = true;
 
 var DialogComponent = function DialogComponent(_ref) {
+  var _talkingCharacter$cha, _talkingCharacter$cha2, _talkingCharacter$cha3, _talkingCharacter$cha4;
+
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
@@ -163,6 +167,9 @@ var DialogComponent = function DialogComponent(_ref) {
       voiceOver = _ref2.voiceOver,
       decision = _ref2.decision;
 
+  var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
+    return slot.talking;
+  });
   var charactersInvolved = (0, _react.useMemo)(function () {
     return lines.reduce(function (acc, current) {
       if (current.slots) {
@@ -240,14 +247,17 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [loader]); // Force default animation without transition
 
   var executeDefaultAnimation = function executeDefaultAnimation(element) {
+    if (element.uid === talkingCharacter.uid) return;
+
     if (element.userData.mixer && element.userData.defaultAnim) {
       var mixer = element.userData.mixer;
       var defaultAction = mixer.clipAction(element.userData.defaultAnim, element);
       mixer.stopAllAction();
       defaultAction.play();
     }
-  }; // Reset currentEmotion to defaultAnim
+  };
 
+  var startMixer = (0, _useMouthMixer.default)(getCurrentVisible(talkingCharacter.uid), talkingCharacter === null || talkingCharacter === void 0 ? void 0 : (_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : (_talkingCharacter$cha2 = _talkingCharacter$cha.resource) === null || _talkingCharacter$cha2 === void 0 ? void 0 : (_talkingCharacter$cha3 = _talkingCharacter$cha2.animations) === null || _talkingCharacter$cha3 === void 0 ? void 0 : (_talkingCharacter$cha4 = _talkingCharacter$cha3.talking) === null || _talkingCharacter$cha4 === void 0 ? void 0 : _talkingCharacter$cha4.url, true); // Reset currentEmotion to defaultAnim
 
   var resetAnims = (0, _react.useCallback)(function () {
     scene.traverseVisible(function (node) {
@@ -322,6 +332,7 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
   var backLine = (0, _react.useCallback)(function () {
+    startMixer(false);
     setAudioFailed(false);
 
     if (isBranched) {
@@ -334,6 +345,7 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [handleBranchDirection, isBranched, lastLine, line]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
+    startMixer(false);
     setPreviousLineWasDecision(currentLine.decision);
     setAudioFailed(false);
 
@@ -432,9 +444,6 @@ var DialogComponent = function DialogComponent(_ref) {
         show: true
       });
     } else if (!lastSet.current) {
-      var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
-        return slot.talking;
-      });
       var slottedCharacters = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.filter(function (slot) {
         return slot.uid && !slot.talking;
       });
@@ -476,6 +485,7 @@ var DialogComponent = function DialogComponent(_ref) {
             if (startAction && action && startAction !== action) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
+              element.userData.defaultAnim = action.getClip();
             }
 
             if (talkingCharacter.uid === element.uid) {
@@ -487,14 +497,14 @@ var DialogComponent = function DialogComponent(_ref) {
               }
 
               setTimeout(function () {
-                var _talkingCharacter$cha;
+                var _talkingCharacter$cha5;
 
                 var _moveBubble = moveBubble(element, showArrowTop),
                     distance = _moveBubble.distance;
 
                 setCurrentMessage({
                   text: talkingCharacter.text,
-                  name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
+                  name: talkingCharacter.alias || ((_talkingCharacter$cha5 = talkingCharacter.character) === null || _talkingCharacter$cha5 === void 0 ? void 0 : _talkingCharacter$cha5.name),
                   left: true,
                   top: showArrowTop || distance > 70,
                   inScene: true,
@@ -506,12 +516,12 @@ var DialogComponent = function DialogComponent(_ref) {
             }
           });
         } else {
-          var _talkingCharacter$cha2;
+          var _talkingCharacter$cha6;
 
           resetCameraView();
           setCurrentMessage({
             text: talkingCharacter.text,
-            name: talkingCharacter.alias || ((_talkingCharacter$cha2 = talkingCharacter.character) === null || _talkingCharacter$cha2 === void 0 ? void 0 : _talkingCharacter$cha2.name) || (object === null || object === void 0 ? void 0 : object.name),
+            name: talkingCharacter.alias || ((_talkingCharacter$cha6 = talkingCharacter.character) === null || _talkingCharacter$cha6 === void 0 ? void 0 : _talkingCharacter$cha6.name) || (object === null || object === void 0 ? void 0 : object.name),
             left: false,
             top: talkingCharacter.text.length > maxCharacterToSwitch,
             inScene: false,
@@ -541,10 +551,16 @@ var DialogComponent = function DialogComponent(_ref) {
     audio: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
+    onStart: function onStart() {
+      if (talkingCharacter.emotion.includes('think')) return;
+      startMixer(true);
+    },
     onError: function onError() {
       setAudioFailed(true);
     },
     onFinish: function onFinish() {
+      startMixer(false);
+
       if (autoPlayCond) {
         nextLine();
       }
@@ -575,9 +591,6 @@ var DialogComponent = function DialogComponent(_ref) {
     bubbleRef.current = bubble === null || bubble === void 0 ? void 0 : bubble.current;
 
     if (currentLine !== null && currentLine !== void 0 && currentLine.slots && currentMessage.show && bubble !== null && bubble !== void 0 && bubble.current) {
-      var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
-        return slot.talking;
-      });
       var bubbleRect = bubble.current.getBoundingClientRect();
       var x = bubbleRect.x + bubbleRect.width;
       var y = bubbleRect.y - bubbleRect.height;

package/dist/helpers/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.zAxis = exports.yAxis = exports.xAxis = exports.vectorTranslateZ = exports.vectorTranslateY = exports.vectorTranslateX = exports.vectorTranslateOnAxis = exports.vectorToScreen = exports.usePrevious = exports.screenToVector = exports.roundFloat = exports.getObjectPosition = exports.formatMessage = exports.executeCrossFade = exports.cameraFitAnyObject = void 0;
+exports.zAxis = exports.yAxis = exports.xAxis = exports.vectorTranslateZ = exports.vectorTranslateY = exports.vectorTranslateX = exports.vectorTranslateOnAxis = exports.vectorToScreen = exports.usePrevious = exports.screenToVector = exports.roundFloat = exports.getRandomIndex = exports.getObjectPosition = exports.formatMessage = exports.executeCrossFade = exports.cameraFitAnyObject = void 0;
 
 var _react = require("react");
 
@@ -27,6 +27,12 @@ var formatMessage = function formatMessage(text) {
 
 exports.formatMessage = formatMessage;
 
+var getRandomIndex = function getRandomIndex(length) {
+  return Math.floor(Math.random() * length);
+};
+
+exports.getRandomIndex = getRandomIndex;
+
 var usePrevious = function usePrevious(value) {
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {

package/dist/helpers/useMouthMixer.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _three = require("three");
+
+var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
+
+var _ = require(".");
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var crossFadeDuration = 0.2;
+var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
+
+var useMouthMixer = function useMouthMixer(target, talkingURL) {
+  var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      started = _useState2[0],
+      start = _useState2[1];
+
+  var loader = (0, _react.useMemo)(function () {
+    return new _GLTFLoader.GLTFLoader();
+  }, []);
+  var tracks = (0, _react.useRef)([]);
+  (0, _react.useEffect)(function () {
+    if (target && isActive) {
+      var _target$userData = target.userData,
+          mixer = _target$userData.mixer,
+          defaultAnim = _target$userData.defaultAnim,
+          emotionClip = _target$userData.emotionClip;
+
+      if (!started && emotionClip) {
+        var emotionAction = mixer.clipAction(emotionClip, target);
+        var defaultAction = mixer.clipAction(defaultAnim, target);
+        mixer.stopAllAction();
+        (0, _.executeCrossFade)(emotionAction, defaultAction, crossFadeDuration);
+      } else if (started && talkingURL) {
+        var cloned = defaultAnim.clone();
+
+        var onLoad = function onLoad(anim) {
+          var _cloned$tracks;
+
+          if (anim) {
+            var _tracks$current;
+
+            (_tracks$current = tracks.current).push.apply(_tracks$current, _toConsumableArray(anim.animations[0].tracks.filter(function (track) {
+              return bones.find(function (bone) {
+                return track.name.includes(bone);
+              });
+            })));
+          }
+
+          cloned.tracks = defaultAnim.tracks.filter(function (track) {
+            return !bones.find(function (bone) {
+              return track.name.includes(bone);
+            });
+          });
+
+          (_cloned$tracks = cloned.tracks).push.apply(_cloned$tracks, _toConsumableArray(tracks.current));
+
+          target.userData.emotionClip = cloned;
+          var defaultAction = mixer.clipAction(defaultAnim, target);
+          var emotionAction = mixer.clipAction(cloned, target);
+          emotionAction.loop = _three.LoopPingPong;
+          mixer.stopAllAction();
+          (0, _.executeCrossFade)(defaultAction, emotionAction, crossFadeDuration);
+        };
+
+        if (!tracks.current.length) {
+          loader.load(talkingURL, function (anim) {
+            onLoad(anim);
+          });
+        } else {
+          onLoad();
+        }
+      }
+    }
+  }, [isActive, talkingURL, loader, started, target]);
+  return start;
+};
+
+var _default = useMouthMixer;
+exports.default = _default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.32.4",
+  "version": "1.34.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -13,8 +13,9 @@
     "url": "https://github.com/gamelearn/arcade-components"
   },
   "dependencies": {
+    "@babel/runtime": "^7.18.6",
     "@gamelearn/arcade-styles": "0.15.7",
-    "@gamelearn/arcade-three-core": "1.14.5",
+    "@gamelearn/arcade-three-core": "1.17.1",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",
     "@testing-library/jest-dom": "^5.16.4",