@gamelearn/arcade-components 1.34.0 → 1.35.1

package/dist/components/comic-component/components/ComicComponent.js

@@ -93,10 +93,8 @@ var ComicComponent = function ComicComponent(_ref) {
       setTransition('slide-animation');
       setCount(slideCount + 1);
       setStarted(true);
-    } else {
-      close();
     }
-  }, [close, slideCount, slides === null || slides === void 0 ? void 0 : slides.length]);
+  }, [slideCount, slides === null || slides === void 0 ? void 0 : slides.length]);
   var goToPreviousSlide = (0, _react.useCallback)(function () {
     setStarted(false);
     setAudioFailed(false);

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

@@ -255,17 +255,17 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     });
 
     if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
-      finishConversation();
-    } else {
-      var destination = lines.findIndex(function (line) {
-        return line.id === foundEdge[keys[1]];
-      });
+      return;
+    }
 
-      if (destination >= 0) {
-        setCurrentLine(destination);
-      } else {
-        finishConversation();
-      }
+    var destination = lines.findIndex(function (line) {
+      return line.id === foundEdge[keys[1]];
+    });
+
+    if (destination >= 0) {
+      setCurrentLine(destination);
+    } else {
+      finishConversation();
     }
   }, [currentLineData.id, edges, finishConversation, lines]);
   var handleClickNext = (0, _react.useCallback)(function (choice, reset) {
@@ -287,16 +287,17 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
       if (line + 1 <= maxLine) {
         setCurrentLine(line + 1);
+      } else if (currentLineData.decision) {
+        finishConversation();
       } else {
         isLast = true;
-        finishConversation();
       }
     }
 
     if (!isLast) {
       setStarted(true);
     }
-  }, [currentLine, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length]);
+  }, [currentLine, currentLineData.decision, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length]);
 
   var handleClickBack = function handleClickBack() {
     setStarted(false);
@@ -314,8 +315,13 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   var manualClickNext = function manualClickNext() {
     playSound('click-ui');
-    setAutomatic(false);
-    handleClickNext();
+
+    if (currentLine === lines.length - 1) {
+      finishConversation();
+    } else {
+      setAutomatic(false);
+      handleClickNext();
+    }
   };
 
   var manualClickBack = function manualClickBack() {
@@ -349,7 +355,12 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         handleClickNext();
       }
     }
-  }); // Autoplay logic
+  });
+  (0, _react.useEffect)(function () {
+    if ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' && !currentMessage.emotion.includes('think')) {
+      setTTsStart(true);
+    }
+  }, [currentLineData, currentMessage.emotion]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     if (autoplayCond && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
@@ -427,7 +438,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
   })), /*#__PURE__*/_react.default.createElement("button", {
-    className: "gat--btn__round",
+    className: "gat--btn__round ".concat(automatic && currentLine === lines.length - 1 ? 'glowing-animation' : ''),
     type: "button",
     onClick: manualClickNext
   }, /*#__PURE__*/_react.default.createElement("span", {

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

@@ -23,8 +23,6 @@ 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); }
@@ -35,7 +33,7 @@ var isMobile = (0, _deviceDetection.DeviceDetection)();
 var defaultCamPos = [0, 14.63, 16];
 
 function Panel(_ref) {
-  var _character$resource4, _character$resource5, _character$resource5$, _character$resource5$2, _character$resource6;
+  var _character$resource4, _character$resource6, _character$resource6$, _character$resource6$2, _character$resource7;
 
   var character = _ref.character,
       ttsStarted = _ref.ttsStarted,
@@ -60,10 +58,27 @@ 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 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]);
+    if (model.current && active) {
+      if (ttsStarted) {
+        var _character$resource5, _character$resource5$, _character$resource5$2;
+
+        (0, _helpers.executeTalkingAnimation)(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);
+      } else {
+        var _model$current$userDa = model.current.userData,
+            mixer = _model$current$userDa.mixer,
+            defaultAnim = _model$current$userDa.defaultAnim,
+            emotionClip = _model$current$userDa.emotionClip;
+
+        if (defaultAnim && emotionClip) {
+          var emotionAction = mixer.clipAction(emotionClip, model.current);
+          var defaultAction = mixer.clipAction(defaultAnim, model.current);
+          mixer.stopAllAction();
+          (0, _helpers.executeCrossFade)(emotionAction, defaultAction);
+        }
+      }
+    }
+  }, [character === null || character === void 0 ? void 0 : (_character$resource6 = character.resource) === null || _character$resource6 === void 0 ? void 0 : (_character$resource6$ = _character$resource6.animations) === null || _character$resource6$ === void 0 ? void 0 : (_character$resource6$2 = _character$resource6$.talking) === null || _character$resource6$2 === void 0 ? void 0 : _character$resource6$2.url, ttsStarted, active]);
   var onLoadElement = (0, _react.useCallback)(function (object) {
     if (cameraRef.current) {
       var boundingBox = new _three.Box3();
@@ -123,7 +138,7 @@ function Panel(_ref) {
   }, 100);
   return character.type === 'image' ? null : /*#__PURE__*/_react.default.createElement("scene", {
     ref: sceneRef
-  }, (_character$resource6 = character.resource) !== null && _character$resource6 !== void 0 && _character$resource6.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+  }, (_character$resource7 = character.resource) !== null && _character$resource7 !== void 0 && _character$resource7.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
     progressive: true
   }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.TriggerWrapper, {
     name: "char_".concat(character.uid),

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

@@ -33,8 +33,6 @@ 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); }
@@ -81,7 +79,7 @@ var maxCharacterToSwitch = 70;
 raycast.firstHitOnly = true;
 
 var DialogComponent = function DialogComponent(_ref) {
-  var _talkingCharacter$cha, _talkingCharacter$cha2, _talkingCharacter$cha3, _talkingCharacter$cha4;
+  var _currentLine$slots;
 
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
@@ -101,25 +99,15 @@ var DialogComponent = function DialogComponent(_ref) {
       automatic = _useState4[0],
       setAutomatic = _useState4[1];
 
-  var _useState5 = (0, _react.useState)({
-    text: '',
-    name: '',
-    left: false,
-    top: false,
-    inScene: false,
-    thinkful: false,
-    voiceOver: false,
-    avatar: '',
-    show: false
-  }),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      currentMessage = _useState6[0],
-      setCurrentMessage = _useState6[1];
+      mounted = _useState6[0],
+      setMounted = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      mounted = _useState8[0],
-      setMounted = _useState8[1];
+      talking = _useState8[0],
+      startTalking = _useState8[1];
 
   var _useState9 = (0, _react.useState)(false),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -167,9 +155,30 @@ 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) {
+  var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$slots = currentLine.slots) === null || _currentLine$slots === void 0 ? void 0 : _currentLine$slots.find(function (slot) {
     return slot.talking;
   });
+  var autoPlayCond = automatic && !(currentLine !== null && currentLine !== void 0 && currentLine.decision);
+  var audio = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio) || {}).length;
+  var voice = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice) || {}).length;
+  var isVoiceOver = voiceOver || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalNarration';
+  var isDecision = decision || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalDecision';
+
+  var _useState13 = (0, _react.useState)({
+    text: '',
+    name: '',
+    left: false,
+    top: false,
+    inScene: false,
+    thinkful: false,
+    voiceOver: false,
+    avatar: '',
+    show: false
+  }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      currentMessage = _useState14[0],
+      setCurrentMessage = _useState14[1];
+
   var charactersInvolved = (0, _react.useMemo)(function () {
     return lines.reduce(function (acc, current) {
       if (current.slots) {
@@ -191,14 +200,13 @@ var DialogComponent = function DialogComponent(_ref) {
     });
   }, [emitEvent]);
 
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = _slicedToArray(_useState13, 2),
-      previousLineWasDecision = _useState14[0],
-      setPreviousLineWasDecision = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      previousLineWasDecision = _useState16[0],
+      setPreviousLineWasDecision = _useState16[1];
 
-  var isVoiceOver = voiceOver || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalNarration';
-  var isDecision = decision || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalDecision';
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
+    if (!uid) return null;
     var object;
     scene.traverseVisible(function (node) {
       if (node.uid === uid && !object) {
@@ -255,9 +263,8 @@ var DialogComponent = function DialogComponent(_ref) {
       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) {
@@ -269,6 +276,38 @@ var DialogComponent = function DialogComponent(_ref) {
     messagePosition.current.parent = null;
     if (zoomInActor) setAnimationRunning(true);
   }, [zoomInActor]);
+
+  var restTalkingAnimation = function restTalkingAnimation() {
+    var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
+    if (!element) return;
+    var _element$userData = element.userData,
+        mixer = _element$userData.mixer,
+        defaultAnim = _element$userData.defaultAnim,
+        emotionClip = _element$userData.emotionClip;
+
+    if (defaultAnim && emotionClip) {
+      var emotionAction = mixer.clipAction(emotionClip, element);
+      var defaultAction = mixer.clipAction(defaultAnim, element);
+      mixer.stopAllAction();
+      (0, _helpers.executeCrossFade)(emotionAction, defaultAction, crossFadeDuration);
+    }
+
+    startTalking(false);
+  };
+
+  (0, _react.useEffect)(function () {
+    var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
+
+    if (element) {
+      if (talking) {
+        var _talkingCharacter$cha, _talkingCharacter$cha2, _talkingCharacter$cha3, _talkingCharacter$cha4;
+
+        (0, _helpers.executeTalkingAnimation)(element, 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);
+      } else {
+        restTalkingAnimation();
+      }
+    }
+  }, [talkingCharacter, talking]);
   var finishConversation = (0, _react.useCallback)(function () {
     lastSet.current = true;
     changeLine(0);
@@ -290,20 +329,20 @@ var DialogComponent = function DialogComponent(_ref) {
     });
 
     if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
-      finishConversation();
-    } else {
-      var destination = lines.findIndex(function (l) {
-        return l.id === foundEdge[keys[1]];
-      });
+      return;
+    }
 
-      if (destination >= 0) {
-        setCurrentMessage({
-          show: false
-        });
-        changeLine(destination);
-      } else {
-        finishConversation();
-      }
+    var destination = lines.findIndex(function (l) {
+      return l.id === foundEdge[keys[1]];
+    });
+
+    if (destination >= 0) {
+      setCurrentMessage({
+        show: false
+      });
+      changeLine(destination);
+    } else {
+      finishConversation();
     }
   }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
   var handleDecisionBranch = (0, _react.useCallback)(function (choice, reset) {
@@ -332,7 +371,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);
+    restTalkingAnimation();
     setAudioFailed(false);
 
     if (isBranched) {
@@ -345,7 +384,7 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [handleBranchDirection, isBranched, lastLine, line]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
-    startMixer(false);
+    restTalkingAnimation();
     setPreviousLineWasDecision(currentLine.decision);
     setAudioFailed(false);
 
@@ -360,7 +399,7 @@ var DialogComponent = function DialogComponent(_ref) {
         show: false
       });
       changeLine(line + 1);
-    } else {
+    } else if (currentLine.decision) {
       finishConversation();
     }
   }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
@@ -371,8 +410,12 @@ var DialogComponent = function DialogComponent(_ref) {
   };
 
   var manualNextLine = function manualNextLine() {
-    setAutomatic(false);
-    nextLine();
+    if (line === lines.length - 1) {
+      finishConversation();
+    } else {
+      setAutomatic(false);
+      nextLine();
+    }
   }; // Calculate start node
 
 
@@ -488,6 +531,10 @@ var DialogComponent = function DialogComponent(_ref) {
               element.userData.defaultAnim = action.getClip();
             }
 
+            if ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'none' && talkingCharacter.emotion !== 'thinkful') {
+              startTalking(true);
+            }
+
             if (talkingCharacter.uid === element.uid) {
               var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
               moveBubble(element, showArrowTop);
@@ -537,10 +584,7 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
     }
-  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]);
-  var autoPlayCond = automatic && !(currentLine !== null && currentLine !== void 0 && currentLine.decision);
-  var audio = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio) || {}).length;
-  var voice = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice) || {}).length; // Sound logic
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]); // Sound logic
 
   var stopEkho = (0, _useEkho.default)({
     audioType: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType,
@@ -553,13 +597,13 @@ var DialogComponent = function DialogComponent(_ref) {
     emitEvent: emitEvent,
     onStart: function onStart() {
       if (talkingCharacter.emotion.includes('think')) return;
-      startMixer(true);
+      startTalking(true);
     },
     onError: function onError() {
       setAudioFailed(true);
     },
     onFinish: function onFinish() {
-      startMixer(false);
+      startTalking(false);
 
       if (autoPlayCond) {
         nextLine();
@@ -762,7 +806,7 @@ var DialogComponent = function DialogComponent(_ref) {
     type: "button",
     onClick: manualNextLine,
     disabled: animationRunning,
-    className: "gat--btn__round ".concat(animationRunning ? 'disabled' : '')
+    className: "gat--btn__round \n              ".concat(animationRunning ? 'disabled' : '', "\n              ").concat(automatic && line === lines.length - 1 ? 'glowing-animation' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
   })))));

package/dist/helpers/index.js

@@ -3,18 +3,35 @@
 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.getRandomIndex = 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.executeTalkingAnimation = exports.executeCrossFade = exports.cameraFitAnyObject = void 0;
 
 var _react = require("react");
 
 var _three = require("three");
 
+var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
+
+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 _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 _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 _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; }
+
 var xAxis = new _three.Vector3(1, 0, 0);
 exports.xAxis = xAxis;
 var yAxis = new _three.Vector3(0, 1, 0);
 exports.yAxis = yAxis;
 var zAxis = new _three.Vector3(0, 0, 1);
 exports.zAxis = zAxis;
+var crossFadeDuration = 0.2;
+var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
+var loader = new _GLTFLoader.GLTFLoader();
 
 var formatMessage = function formatMessage(text) {
   var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -162,7 +179,7 @@ var setWeight = function setWeight(action, weight) {
   action.setEffectiveWeight(weight);
 };
 
-var executeCrossFade = function executeCrossFade(startAction, endAction, duration) {
+var executeCrossFade = function executeCrossFade(startAction, endAction) {
   if (startAction === endAction) return;
   if (!startAction || !endAction) return;
   startAction.play();
@@ -170,8 +187,51 @@ var executeCrossFade = function executeCrossFade(startAction, endAction, duratio
   endAction.reset();
   endAction.time = 0;
   setWeight(endAction, 1);
-  endAction.crossFadeFrom(startAction, duration, true);
+  endAction.crossFadeFrom(startAction, crossFadeDuration, true);
   endAction.play();
 };
 
-exports.executeCrossFade = executeCrossFade;
+exports.executeCrossFade = executeCrossFade;
+
+var executeTalkingAnimation = function executeTalkingAnimation(target, talkingURL) {
+  if (target) {
+    var tracks = [];
+    var _target$userData = target.userData,
+        mixer = _target$userData.mixer,
+        defaultAnim = _target$userData.defaultAnim;
+    var cloned = defaultAnim.clone();
+
+    var onLoad = function onLoad(anim) {
+      var _cloned$tracks;
+
+      if (anim) {
+        tracks.push.apply(tracks, _toConsumableArray(anim.animations[0].tracks.filter(function (track) {
+          return bones.find(function (bone) {
+            return track.name.includes(bone);
+          });
+        })));
+      }
+
+      cloned.tracks = cloned.tracks.filter(function (track) {
+        return !bones.find(function (bone) {
+          return track.name.includes(bone);
+        });
+      });
+
+      (_cloned$tracks = cloned.tracks).push.apply(_cloned$tracks, tracks);
+
+      target.userData.emotionClip = cloned;
+      var defaultAction = mixer.clipAction(defaultAnim, target);
+      var emotionAction = mixer.clipAction(cloned, target);
+      emotionAction.loop = _three.LoopPingPong;
+      mixer.stopAllAction();
+      executeCrossFade(defaultAction, emotionAction, crossFadeDuration);
+    };
+
+    loader.load(talkingURL, function (anim) {
+      onLoad(anim);
+    });
+  }
+};
+
+exports.executeTalkingAnimation = executeTalkingAnimation;

package/dist/helpers/useEkho.js

@@ -99,11 +99,7 @@ var useEkho = function useEkho(_ref) {
       url: url,
       cc: cc
     };
-    onStart({
-      url: url,
-      cc: cc
-    });
-    playSound(url, cc, loop, volume, onFinish);
+    playSound(url, cc, loop, volume, onFinish, onStart);
   }, [onStart, playSound, loop, onFinish, volume]);
   var playSpeech = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(payload) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.34.0",
+  "version": "1.35.1",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "0.15.7",
+    "@gamelearn/arcade-styles": "0.15.8",
     "@gamelearn/arcade-three-core": "1.17.1",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",

package/dist/helpers/useMouthMixer.js

@@ -1,109 +0,0 @@
-"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;