@gamelearn/arcade-components 2.27.0 → 2.29.2

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

@@ -1,69 +1,39 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _fiber = require("@react-three/fiber");
-
 var _three = require("three");
-
-var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
-
 var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
-
 var _gsap = _interopRequireDefault(require("gsap"));
-
-var _helpers = require("../../../helpers");
-
 var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
-
 var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
-
 var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
-
 var _BubbleWrapper = _interopRequireDefault(require("./BubbleWrapper"));
-
 var _DialogDecision = _interopRequireDefault(require("./DialogDecision"));
-
+var _useStateMachine2 = _interopRequireDefault(require("../../../helpers/useStateMachine"));
 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); }
-
 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 _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 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; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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.1;
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable react-hooks/exhaustive-deps */
 var characterMs = 75;
 var minMs = 1400;
 var headSize = 2;
@@ -71,62 +41,45 @@ var raycast = new _three.Raycaster();
 var animationTarget = new _three.Object3D();
 var maxCharacterToSwitch = 70;
 raycast.firstHitOnly = true;
-
 var DialogComponent = function DialogComponent(_ref) {
   var _currentLineData$slot;
-
   var keyboardControl = _ref.keyboardControl,
-      emitEvent = _ref.emitEvent,
-      lines = _ref.lines,
-      actors = _ref.actors,
-      edges = _ref.edges,
-      soundActions = _ref.soundActions,
-      zoomInActor = _ref.zoomInActor,
-      autoPlay = _ref.autoPlay,
-      pause = _ref.pause,
-      progress = _ref.progress;
+    emitEvent = _ref.emitEvent,
+    lines = _ref.lines,
+    actors = _ref.actors,
+    edges = _ref.edges,
+    soundActions = _ref.soundActions,
+    zoomInActor = _ref.zoomInActor,
+    autoPlay = _ref.autoPlay,
+    pause = _ref.pause,
+    progress = _ref.progress;
   var defaultLine = (progress === null || progress === void 0 ? void 0 : progress.line) || 0;
-
   var _useState = (0, _react.useState)(defaultLine),
-      _useState2 = _slicedToArray(_useState, 2),
-      line = _useState2[0],
-      changeLine = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    line = _useState2[0],
+    changeLine = _useState2[1];
   var _useState3 = (0, _react.useState)(!!autoPlay),
-      _useState4 = _slicedToArray(_useState3, 2),
-      automatic = _useState4[0],
-      setAutomatic = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    automatic = _useState4[0],
+    setAutomatic = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      mounted = _useState6[0],
-      setMounted = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    mounted = _useState6[0],
+    setMounted = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      talking = _useState8[0],
-      startTalking = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      audioFailed = _useState10[0],
-      setAudioFailed = _useState10[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    audioFailed = _useState8[0],
+    setAudioFailed = _useState8[1];
   var scene = (0, _fiber.useThree)(function (state) {
     return state.scene;
   });
   var camera = (0, _fiber.useThree)(function (state) {
     return state.camera;
   });
-
   var _useTimeout = (0, _useTimeout2.default)(),
-      start = _useTimeout.start,
-      stop = _useTimeout.stop;
-
+    start = _useTimeout.start,
+    stop = _useTimeout.stop;
   var changedMats = (0, _react.useRef)([]);
-  var loader = (0, _react.useMemo)(function () {
-    return new _GLTFLoader.GLTFLoader();
-  }, []);
   var defaultCamera = (0, _react.useMemo)(function () {
     return camera.clone();
   }, []);
@@ -140,40 +93,40 @@ var DialogComponent = function DialogComponent(_ref) {
   var lastSet = (0, _react.useRef)(false);
   var isBranched = !!edges;
   var onZoomEnd = (0, _react.useRef)(function () {});
-
   var _ref2 = currentLineData || {},
-      voiceOver = _ref2.voiceOver,
-      decision = _ref2.decision;
-
+    voiceOver = _ref2.voiceOver,
+    decision = _ref2.decision;
   var lastTalking = (0, _react.useRef)({});
   var talkingCharacter = currentLineData === null || currentLineData === void 0 ? void 0 : (_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.find(function (slot) {
     return slot.talking;
   });
   var zoomStarted = (0, _react.useRef)(false);
+  var _useStateMachine = (0, _useStateMachine2.default)(lines),
+    startAnimation = _useStateMachine.startAnimation,
+    resetActives = _useStateMachine.resetActives;
   var autoPlayCond = automatic && !(currentLineData !== null && currentLineData !== void 0 && currentLineData.decision);
   var audio = Object.keys((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio) || {}).length;
   var voice = Object.keys((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice) || {}).length;
   var isVoiceOver = voiceOver || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalNarration';
-  var isDecision = decision || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalDecision'; // Force camera update (r3f selector not updating)
+  var isDecision = decision || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalDecision';
 
+  // Force camera update (r3f selector not updating)
   (0, _fiber.useFrame)(function (_ref3) {
     var sceneCam = _ref3.camera;
     actualCamera.current = sceneCam;
   });
-
-  var _useState11 = (0, _react.useState)({
-    text: '',
-    name: '',
-    inScene: false,
-    thinkful: false,
-    voiceOver: false,
-    avatar: '',
-    show: false
-  }),
-      _useState12 = _slicedToArray(_useState11, 2),
-      currentMessage = _useState12[0],
-      setCurrentMessage = _useState12[1];
-
+  var _useState9 = (0, _react.useState)({
+      text: '',
+      name: '',
+      inScene: false,
+      thinkful: false,
+      voiceOver: false,
+      avatar: '',
+      show: false
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    currentMessage = _useState10[0],
+    setCurrentMessage = _useState10[1];
   var charactersInvolved = (0, _react.useMemo)(function () {
     return lines.reduce(function (acc, current) {
       if (current.slots) {
@@ -184,7 +137,6 @@ var DialogComponent = function DialogComponent(_ref) {
           if (!acc.includes(currentParticipant.uid)) acc.push(currentParticipant.uid);
         });
       }
-
       return acc;
     }, []);
   }, [lines]);
@@ -194,12 +146,10 @@ var DialogComponent = function DialogComponent(_ref) {
       payload: id
     });
   }, [emitEvent]);
-
-  var _useState13 = (0, _react.useState)([]),
-      _useState14 = _slicedToArray(_useState13, 2),
-      edgesHistory = _useState14[0],
-      setEdgesHistory = _useState14[1];
-
+  var _useState11 = (0, _react.useState)([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    edgesHistory = _useState12[0],
+    setEdgesHistory = _useState12[1];
   var lastNodeId = (0, _react.useMemo)(function () {
     return edgesHistory[edgesHistory.length - 1];
   }, [edgesHistory]);
@@ -212,24 +162,21 @@ var DialogComponent = function DialogComponent(_ref) {
     var lastL = lines.find(function (l) {
       return l.id === (lastEdge === null || lastEdge === void 0 ? void 0 : lastEdge.fromId);
     });
-
     if (!lastNodeId && (progress === null || progress === void 0 ? void 0 : progress.line) >= 0) {
       return {
         decision: true
       };
     }
-
     return lastL;
   }, [edges, lines, lastNodeId]);
   var previousLineWasDecision = (0, _react.useCallback)(function () {
     if (isBranched) {
       // if we have edges, we need to check if the previous line was a decision
       var _lastL = findLastLineBranched();
-
       return _lastL === null || _lastL === void 0 ? void 0 : _lastL.decision;
-    } // if there is no branching, the previous line is the previous one
-
+    }
 
+    // if there is no branching, the previous line is the previous one
     var lastL = lines[line - 1] ? lines[line - 1] : {};
     return line > 0 && (lastL === null || lastL === void 0 ? void 0 : lastL.decision);
   }, [currentLineData, isBranched, lines, lastNodeId, edges]);
@@ -245,90 +192,31 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [scene]);
   var getAvatarURL = (0, _react.useCallback)(function (slot) {
     var _slot$character, _slot$character$resou;
-
     var object = actors.find(function (element) {
       if ((element === null || element === void 0 ? void 0 : element.uid) === (slot === null || slot === void 0 ? void 0 : slot.uid)) {
         return element;
       }
-
       return '';
     });
     return (slot === null || slot === void 0 ? void 0 : (_slot$character = slot.character) === null || _slot$character === void 0 ? void 0 : (_slot$character$resou = _slot$character.resource) === null || _slot$character$resou === void 0 ? void 0 : _slot$character$resou.url) || (object === null || object === void 0 ? void 0 : object.completeUrl) || '';
   }, [actors]);
-  var loadEmotion = (0, _react.useCallback)(function (slot, element) {
-    var _slot$animation;
-
-    var onLoadAnim = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
-    var animation;
-    var emotion = element.isSeated && !slot.emotion.includes('seated') ? "".concat(slot.emotion, "-seated") : slot.emotion;
-
-    if (slot !== null && slot !== void 0 && slot.animationId && slot !== null && slot !== void 0 && (_slot$animation = slot.animation) !== null && _slot$animation !== void 0 && _slot$animation.url) {
-      // force camera transition seated -> not seated
-      if (lastTalking.current && lastTalking.current.uid === element.uid) {
-        var currentIsSeated = slot.emotion.includes('seated');
-        var lastIsSeated = lastTalking.current.emotion.includes('seated');
-        if (currentIsSeated && !lastIsSeated) lastTalking.current = {};
-        if (!currentIsSeated && lastIsSeated) lastTalking.current = {};
-      }
-
-      animation = slot.animation;
-    } else {
-      var _slot$character2;
-
-      animation = (_slot$character2 = slot.character) === null || _slot$character2 === void 0 ? void 0 : _slot$character2.resource.animations[emotion];
-    }
-
-    var mixer = element.userData.mixer;
-
-    if (animation && animation.url) {
-      loader.load(animation.url, function (anim) {
-        var emotionClip = anim.animations[0];
-        var defaultClip = element.userData.defaultAnim;
-        var emotionAction = mixer.clipAction(emotionClip, element);
-        var defaultAction = mixer.clipAction(defaultClip, element);
-
-        if (element.userData.currentEmotion) {
-          element.userData.lastEmotion = element.userData.currentEmotion;
-        }
-
-        element.userData.currentEmotion = emotionAction;
-        onLoadAnim(mixer, emotionAction, defaultAction);
-      });
-    } else {
-      onLoadAnim(mixer);
-    }
-  }, [loader]); // Force default animation without transition
-
-  var executeDefaultAnimation = function executeDefaultAnimation(element) {
-    if (!talkingCharacter || 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();
-    }
-  }; // Starts camera transition
-
 
+  // Starts camera transition
   var animateCameraTransition = function animateCameraTransition() {
     if (!zoomStarted.current) {
       var cam = actualCamera.current;
       var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.position.toArray();
       animationTarget.position.fromArray(targetPosition);
-
       if (messagePosition.current.parent) {
         if (!animationTarget.quaternion.equals(cam.quaternion)) {
           animationTarget.applyQuaternion(cam.quaternion);
         }
-
         var mult = messagePosition.current.isLeft ? -1 : 1;
         var headSpace = headSize * mult;
         animationTarget.translateX(-10 * mult + headSpace);
         animationTarget.translateY(-2);
         animationTarget.translateZ(30);
       }
-
       _gsap.default.to(cam.position, _objectSpread({
         duration: 0.9,
         ease: 'power3.easeInOut',
@@ -348,28 +236,25 @@ var DialogComponent = function DialogComponent(_ref) {
             onZoomEnd.current();
             onZoomEnd.current = null;
           }
-
           raycast.set(cam.getWorldPosition(new _three.Vector3(0, 0, 0)), cam.getWorldDirection(new _three.Vector3()));
           var objects = raycast.intersectObjects(scene.children, true);
           changedMats.current = objects.filter(function (o) {
             return o.distance < 10;
-          }); // Make objects invisible in front of the camera
+          });
 
+          // Make objects invisible in front of the camera
           if (changedMats.current.length) {
             changedMats.current.forEach(function (o) {
               var object = o.object;
               object.material.side = 0;
             });
           }
-
           zoomStarted.current = false;
-
           if (lastSet.current) {
             emitEvent({
               type: 'success'
             });
           }
-
           if (!messagePosition.current.child) {
             cam.copy(defaultCamera);
           }
@@ -378,87 +263,43 @@ var DialogComponent = function DialogComponent(_ref) {
     } else if (zoomStarted.current) {
       zoomStarted.current = false;
     }
-  }; // Reset currentEmotion to defaultAnim
-
-
-  var resetAnims = (0, _react.useCallback)(function () {
-    scene.traverseVisible(function (node) {
-      if (charactersInvolved.includes(node.elementUid)) {
-        executeDefaultAnimation(node);
-      }
-    });
-  }, [scene, charactersInvolved]);
+  };
   var resetCameraView = (0, _react.useCallback)(function () {
     messagePosition.current.child = null;
     messagePosition.current.parent = null;
-
     if (zoomInActor) {
       animateCameraTransition();
     }
   }, [zoomInActor]);
-
+  var startTalking = function startTalking() {
+    if (!(talkingCharacter !== null && talkingCharacter !== void 0 && talkingCharacter.emotion)) return;
+    var emotion = talkingCharacter.emotion;
+    startAnimation(talkingCharacter.uid, "".concat(emotion, "_talking"));
+  };
   var resetTalkingAnimation = function resetTalkingAnimation() {
-    var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
-
-    if (!element) {
-      startTalking(false);
-      return;
-    }
-
-    if (!element.isTalking) {
-      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);
-      element.isTalking = false;
-    }
-
-    startTalking(false);
-  }; // Execute talking animation
-
-
-  (0, _react.useEffect)(function () {
-    var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
-
-    if (element && currentMessage.show) {
-      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 {
-        resetTalkingAnimation();
-      }
-    }
-  }, [talkingCharacter, talking, currentMessage.show]);
+    if (!(talkingCharacter !== null && talkingCharacter !== void 0 && talkingCharacter.uid)) return;
+    var emotion = talkingCharacter.emotion;
+    startAnimation(talkingCharacter.uid, emotion);
+  };
   var finishConversation = (0, _react.useCallback)(function () {
     lastSet.current = true;
     changeLine(0);
+    resetActives();
     setCurrentMessage({
       show: false
     });
     resetCameraView();
-    resetAnims();
-
     if (!zoomInActor) {
       emitEvent({
         type: 'success'
       });
     }
-  }, [camera, emitEvent, resetAnims, resetCameraView, zoomInActor]); // Reset anim after unmount
+  }, [camera, emitEvent, resetCameraView, zoomInActor]);
 
+  // Reset anim after unmount
   (0, _react.useEffect)(function () {
     return function () {
       lastTalking.current = {};
-      resetAnims();
     };
   }, []);
   var handleBranchDirection = (0, _react.useCallback)(function () {
@@ -470,20 +311,16 @@ var DialogComponent = function DialogComponent(_ref) {
     var foundEdge = foundEdges.length === 1 ? foundEdges[0] : foundEdges.find(function (edge) {
       return edge[keys[1]] === lastNodeId;
     });
-
     if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
       return;
-    } // if going backwards remove last edge from history
-
-
+    }
+    // if going backwards remove last edge from history
     if (!forward) {
       setEdgesHistory(edgesHistory.slice(0, edgesHistory.length - 1));
     }
-
     var destination = lines.findIndex(function (l) {
       return l.id === foundEdge[keys[1]];
     });
-
     if (destination >= 0) {
       setCurrentMessage({
         show: false
@@ -510,7 +347,6 @@ var DialogComponent = function DialogComponent(_ref) {
     var destinationEdge = lines.findIndex(function (l) {
       return l.id === (currentEdge === null || currentEdge === void 0 ? void 0 : currentEdge.toId);
     });
-
     if (destinationEdge >= 0) {
       if ((currentEdge === null || currentEdge === void 0 ? void 0 : currentEdge.fromId) === (currentEdge === null || currentEdge === void 0 ? void 0 : currentEdge.toId)) {
         reset();
@@ -532,9 +368,7 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, edges, finishConversation, lines]);
   var backLine = (0, _react.useCallback)(function () {
     lastTalking.current = _objectSpread({}, talkingCharacter);
-    resetTalkingAnimation();
     setAudioFailed(false);
-
     if (isBranched) {
       handleBranchDirection(false);
     } else if (!previousLineWasDecision()) {
@@ -553,10 +387,8 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [handleBranchDirection, emitEvent, isBranched, lastLine, line, talkingCharacter]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
     lastTalking.current = _objectSpread({}, talkingCharacter);
-    resetTalkingAnimation();
     setEdgesHistory([].concat(_toConsumableArray(edgesHistory), [currentLineData.id]));
     setAudioFailed(false);
-
     if (isBranched) {
       if (choice) {
         handleDecisionBranch(choice, reset);
@@ -579,53 +411,44 @@ var DialogComponent = function DialogComponent(_ref) {
       finishConversation();
     }
   }, [emitEvent, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation, talkingCharacter]);
-
   var manualBackLine = function manualBackLine() {
     setAutomatic(false);
     backLine();
   };
-
   var isEndNode = function isEndNode() {
     if (isBranched) {
       return currentLineData && currentLineData.type !== 'conversationalDecision' && !edges.find(function (edge) {
         return edge.fromId === currentLineData.id;
       });
     }
-
     return line === lines.length - 1;
   };
-
   var manualNextLine = function manualNextLine() {
     if (isEndNode()) {
-      startTalking(false);
       finishConversation();
     } else {
       setAutomatic(false);
       nextLine();
     }
-  }; // Calculate start node
-
+  };
 
+  // Calculate start node
   (0, _react.useEffect)(function () {
     if (isBranched && !mounted) {
       var defaultBranch = progress === null || progress === void 0 ? void 0 : progress.line;
-
       if (defaultBranch >= 0) {
         setMounted(true);
         changeLine(defaultBranch);
         return;
       }
-
       var startNodes = lines.filter(function (node) {
         return !edges.find(function (edge) {
           return edge.toId === node.id;
         });
       });
-
       if (startNodes.length) {
         var initialNode = startNodes[0];
         var newInitiaIndexlNode = lines.indexOf(initialNode);
-
         if (newInitiaIndexlNode >= 0) {
           setMounted(true);
           changeLine(newInitiaIndexlNode);
@@ -633,7 +456,6 @@ var DialogComponent = function DialogComponent(_ref) {
       }
     }
   }, [edges, isBranched, lines, mounted]);
-
   var moveBubble = function moveBubble(element) {
     if (lastTalking.current.uid === element.uid) return;
     var target = new _three.Object3D();
@@ -644,8 +466,9 @@ var DialogComponent = function DialogComponent(_ref) {
     var yDistance = zoomInActor ? 2.5 : 2;
     var xDistance = zoomInActor ? 1.2 : 1.5;
     target.translateY(yDistance);
-    target.translateX(xDistance); // Check if character is left or right in the screen
+    target.translateX(xDistance);
 
+    // Check if character is left or right in the screen
     var vector = new _three.Vector3();
     vector.setFromMatrixPosition(head.matrixWorld);
     var p = vector.project(camera);
@@ -656,9 +479,9 @@ var DialogComponent = function DialogComponent(_ref) {
       parent: element,
       isLeft: isLeft
     };
-  }; // Position bubble over talking character/and switch emotions
-
+  };
 
+  // Position bubble over talking character/and switch emotions
   (0, _react.useEffect)(function () {
     if (isVoiceOver) {
       resetCameraView();
@@ -684,84 +507,48 @@ var DialogComponent = function DialogComponent(_ref) {
         var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
           return !currentParticipants.includes(charUid);
         });
-        notInvolvedParticipants.forEach(function (uid) {
-          var element = getCurrentVisible(uid);
-
-          if (element) {
-            executeDefaultAnimation(element);
-          }
-        }); // Check not talking elements emotion
-
-        slottedCharacters.forEach(function (slot) {
-          var element = getCurrentVisible(slot.uid);
-
-          if (element) {
-            loadEmotion(slot, element, function (mixer, action, defaultAction) {
-              var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
-
-              if (startAction !== action && action) {
-                var clip = action.getClip();
-                var actionS = mixer.existingAction(clip, element);
+        notInvolvedParticipants.forEach(function (c) {
+          startAnimation(c, 'idle');
+        });
 
-                if (!actionS.isRunning()) {
-                  (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-                }
-              }
-            });
-          }
+        // Check not talking elements emotion
+        slottedCharacters.forEach(function (c) {
+          startAnimation(c.uid, c.emotion);
         });
         var element = getCurrentVisible(talkingCharacter.uid);
         var object = actors.find(function (a) {
           return a.uid === talkingCharacter.uid;
         });
-
         if (element && !lastSet.current) {
-          loadEmotion(talkingCharacter, element, function (mixer, action, defaultAction) {
-            var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
-
-            if (startAction && action && startAction !== action) {
-              var clip = action.getClip();
-              var actionS = mixer.existingAction(clip, element);
-
-              if (!actionS.isRunning()) {
-                (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-                element.userData.defaultAnim = action.getClip();
+          setTimeout(function () {
+            if (talkingCharacter.uid === element.uid) {
+              moveBubble(element);
+              startAnimation(talkingCharacter.uid, talkingCharacter.emotion);
+              var setMessage = function setMessage() {
+                var _talkingCharacter$cha;
+                setCurrentMessage({
+                  text: talkingCharacter.text,
+                  name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
+                  inScene: true,
+                  thinkful: talkingCharacter.emotion.includes('think'),
+                  avatar: getAvatarURL(talkingCharacter),
+                  show: true
+                });
+              };
+              if (zoomInActor) {
+                onZoomEnd.current = setMessage;
+                animateCameraTransition();
+              } else {
+                setMessage();
               }
             }
-
-            setTimeout(function () {
-              if (talkingCharacter.uid === element.uid) {
-                moveBubble(element);
-
-                var setMessage = function setMessage() {
-                  var _talkingCharacter$cha5;
-
-                  setCurrentMessage({
-                    text: talkingCharacter.text,
-                    name: talkingCharacter.alias || ((_talkingCharacter$cha5 = talkingCharacter.character) === null || _talkingCharacter$cha5 === void 0 ? void 0 : _talkingCharacter$cha5.name),
-                    inScene: true,
-                    thinkful: talkingCharacter.emotion.includes('think'),
-                    avatar: getAvatarURL(talkingCharacter),
-                    show: true
-                  });
-                };
-
-                if (zoomInActor) {
-                  onZoomEnd.current = setMessage;
-                  animateCameraTransition();
-                } else {
-                  setMessage();
-                }
-              }
-            }, 150);
-          });
+          }, 150);
         } else {
-          var _talkingCharacter$cha6;
-
+          var _talkingCharacter$cha2;
           resetCameraView();
           setCurrentMessage({
             text: talkingCharacter.text,
-            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),
+            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),
             left: false,
             top: talkingCharacter.text.length > maxCharacterToSwitch,
             inScene: false,
@@ -777,8 +564,9 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
     }
-  }, [actors, currentLineData, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]); // Sound logic
+  }, [actors, currentLineData, zoomInActor, getCurrentVisible, translate, getAvatarURL, resetCameraView, isDecision, isVoiceOver, charactersInvolved]);
 
+  // Sound logic
   var stopEkho = (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
     volume: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioVolume,
@@ -792,16 +580,14 @@ var DialogComponent = function DialogComponent(_ref) {
     pauseTTS: pause,
     onStart: function onStart() {
       var _talkingCharacter$emo;
-
       if (talkingCharacter !== null && talkingCharacter !== void 0 && (_talkingCharacter$emo = talkingCharacter.emotion) !== null && _talkingCharacter$emo !== void 0 && _talkingCharacter$emo.includes('think')) return;
-      startTalking(true);
+      startTalking();
     },
     onError: function onError() {
       setAudioFailed(true);
     },
     onFinish: function onFinish() {
-      startTalking(false);
-
+      resetTalkingAnimation();
       if (autoPlayCond && !pause) {
         nextLine();
       }
@@ -816,26 +602,24 @@ var DialogComponent = function DialogComponent(_ref) {
   (0, _react.useEffect)(function () {
     if (((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && currentMessage !== null && currentMessage !== void 0 && currentMessage.show && !(talkingCharacter !== null && talkingCharacter !== void 0 && talkingCharacter.emotion.includes('think'))) {
       var _currentMessage$text;
-
-      startTalking(true);
+      startTalking();
       var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
       setTimeout(function () {
-        startTalking(false);
+        resetTalkingAnimation();
       }, time < minMs ? minMs : time);
     }
-  }, [audioFailed, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.emotion, currentMessage]); // Autoplay logic
+  }, [audioFailed, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.emotion, currentMessage]);
 
+  // Autoplay logic
   (0, _react.useEffect)(function () {
     if (autoPlayCond && currentMessage.show && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && !pause) {
       var _currentMessage$text2;
-
-      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text2 = currentMessage.text) === null || _currentMessage$text2 === void 0 ? void 0 : _currentMessage$text2.length) || 0); // if it's not last node
-
+      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text2 = currentMessage.text) === null || _currentMessage$text2 === void 0 ? void 0 : _currentMessage$text2.length) || 0);
+      // if it's not last node
       if (!isEndNode()) {
         start(nextLine, time < minMs ? minMs : time);
       }
     }
-
     return function () {
       stop();
     };
@@ -846,7 +630,6 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [line, previousLineWasDecision]);
   keyboardControl(isDecision || disableBackButton || !currentMessage.show ? null : manualBackLine, isDecision || !currentMessage.show ? null : manualNextLine);
   var container = document.querySelector('.screens--container');
-
   if (isDecision) {
     var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
       inheritProps: {
@@ -867,10 +650,8 @@ var DialogComponent = function DialogComponent(_ref) {
         zoomStarted.current = false;
       }
     });
-
     return /*#__PURE__*/_react.default.createElement(_DialogDecision.default, decisionPayload);
   }
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_BubbleWrapper.default, {
     translate: translate,
     currentMessage: currentMessage
@@ -909,6 +690,5 @@ var DialogComponent = function DialogComponent(_ref) {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
   })))));
 };
-
 var _default = DialogComponent;
 exports.default = _default;