@gamelearn/arcade-components 2.41.0 → 3.0.1

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

@@ -1,779 +0,0 @@
-"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 _arcadeThreeCore = require("@gamelearn/arcade-three-core");
-var _gsap = _interopRequireDefault(require("gsap"));
-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) { 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 = 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;
-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,
-    autoEnd = _ref.autoEnd,
-    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];
-  var _useState3 = (0, _react.useState)(!!autoPlay),
-    _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];
-  var _useState7 = (0, _react.useState)(false),
-    _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;
-  var changedMats = (0, _react.useRef)([]);
-  var defaultCamera = (0, _react.useMemo)(function () {
-    return camera.clone();
-  }, []);
-  var actualCamera = (0, _react.useRef)(camera);
-  var messagePosition = (0, _react.useRef)({
-    pos: [0, 0, 0],
-    child: null
-  });
-  var currentLineData = lines[line];
-  var lastLine = lines[line - 1];
-  var lastSet = (0, _react.useRef)(false);
-  var isBranched = !!edges;
-  var onZoomEnd = (0, _react.useRef)(function () {});
-  var _ref2 = currentLineData || {},
-    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)
-  (0, _fiber.useFrame)(function (_ref3) {
-    var sceneCam = _ref3.camera;
-    actualCamera.current = sceneCam;
-  });
-  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) {
-        var participants = current.slots.filter(function (slot) {
-          return slot.uid;
-        });
-        participants.forEach(function (currentParticipant) {
-          if (!acc.includes(currentParticipant.uid)) acc.push(currentParticipant.uid);
-        });
-      }
-      return acc;
-    }, []);
-  }, [lines]);
-  var translate = (0, _react.useCallback)(function (id) {
-    return emitEvent({
-      type: 'translate',
-      payload: id
-    });
-  }, [emitEvent]);
-  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]);
-  var findLastLineBranched = (0, _react.useCallback)(function () {
-    var lastEdge = edges.find(function (edge) {
-      return edge.fromId === lastNodeId;
-    }) || edges.find(function (edge) {
-      return edge.toId === lastNodeId;
-    });
-    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
-    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]);
-  var getCurrentVisible = (0, _react.useCallback)(function (uid) {
-    if (!uid) return null;
-    var object;
-    scene.traverseVisible(function (node) {
-      if (node.uid === uid && !object) {
-        object = node;
-      }
-    });
-    return object;
-  }, [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]);
-
-  // 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',
-        onStart: function onStart() {
-          zoomStarted.current = true;
-        },
-        onUpdate: function onUpdate() {
-          if (changedMats.current.length) {
-            changedMats.current.forEach(function (o) {
-              var object = o.object;
-              object.material.visible = true;
-            });
-          }
-        },
-        onComplete: function onComplete() {
-          if (onZoomEnd.current) {
-            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
-          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);
-          }
-        }
-      }, animationTarget.position));
-    } else if (zoomStarted.current) {
-      zoomStarted.current = false;
-    }
-  };
-  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) || lastSet.current) return;
-    var emotion = talkingCharacter.emotion,
-      uid = talkingCharacter.uid;
-    var sceneElement = getCurrentVisible(uid);
-    if (sceneElement) {
-      var isSeated = sceneElement.isSeated;
-      var includesSeated = emotion.includes('seated');
-      startAnimation(uid, isSeated && !includesSeated ? "".concat(emotion, "-seated_talking") : "".concat(emotion, "_talking"));
-    }
-  };
-  var resetTalkingAnimation = function resetTalkingAnimation() {
-    if (!(talkingCharacter !== null && talkingCharacter !== void 0 && talkingCharacter.uid) || lastSet.current) return;
-    var emotion = talkingCharacter.emotion,
-      uid = talkingCharacter.uid;
-    var sceneElement = getCurrentVisible(uid);
-    if (sceneElement) {
-      var isSeated = sceneElement.isSeated;
-      var includesSeated = emotion.includes('seated');
-      startAnimation(uid, isSeated && !includesSeated ? "".concat(emotion, "-seated") : emotion);
-    }
-  };
-  var finishConversation = (0, _react.useCallback)(function () {
-    lastSet.current = true;
-    changeLine(0);
-    setCurrentMessage({
-      show: false
-    });
-    resetCameraView();
-    resetActives();
-    if (!zoomInActor) {
-      emitEvent({
-        type: 'success'
-      });
-    }
-  }, [camera, emitEvent, resetCameraView, zoomInActor]);
-
-  // Reset anim after unmount
-  (0, _react.useEffect)(function () {
-    return function () {
-      lastTalking.current = {};
-    };
-  }, []);
-  var handleBranchDirection = (0, _react.useCallback)(function () {
-    var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    var keys = forward ? ['fromId', 'toId'] : ['toId', 'fromId'];
-    var foundEdges = edges.filter(function (edge) {
-      return edge[keys[0]] === currentLineData.id;
-    });
-    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 (!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
-      });
-      changeLine(destination);
-      emitEvent({
-        type: 'notifyProgress',
-        payload: {
-          line: destination
-        }
-      });
-    } else {
-      finishConversation();
-    }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, emitEvent, edges, finishConversation, lines]);
-  var handleDecisionBranch = (0, _react.useCallback)(function (choice, reset) {
-    var currentId = [3, 2, 1][choice.id];
-    var optionsEdges = edges.filter(function (edge) {
-      return edge.fromId === (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id);
-    });
-    var currentEdge = optionsEdges.find(function (edge) {
-      return parseInt(edge.fromPointIndex) === currentId;
-    });
-    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();
-      } else {
-        setCurrentMessage({
-          show: false
-        });
-        changeLine(destinationEdge);
-        emitEvent({
-          type: 'notifyProgress',
-          payload: {
-            line: destinationEdge
-          }
-        });
-      }
-    } else {
-      finishConversation();
-    }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, edges, finishConversation, lines]);
-  var backLine = (0, _react.useCallback)(function () {
-    lastTalking.current = _objectSpread({}, talkingCharacter);
-    setAudioFailed(false);
-    resetTalkingAnimation();
-    if (isBranched) {
-      handleBranchDirection(false);
-    } else if (!previousLineWasDecision()) {
-      var next = line - 1;
-      setCurrentMessage({
-        show: false
-      });
-      changeLine(next);
-      emitEvent({
-        type: 'notifyProgress',
-        payload: {
-          line: next
-        }
-      });
-    }
-  }, [handleBranchDirection, emitEvent, isBranched, lastLine, line, talkingCharacter]);
-  var decisionNotifyProgress = (0, _react.useCallback)(function (choice) {
-    if (isBranched) {
-      if (choice) {
-        var currentId = [3, 2, 1][choice.id];
-        var optionsEdges = edges.filter(function (edge) {
-          return edge.fromId === currentLineData.id;
-        });
-        var currentEdge = optionsEdges.find(function (edge) {
-          return parseInt(edge.fromPointIndex) === currentId;
-        });
-        if (currentEdge) {
-          var destinationEdge = lines.findIndex(function (l) {
-            return l.id === currentEdge.toId;
-          });
-          if (destinationEdge >= 0) {
-            emitEvent({
-              type: 'notifyProgress',
-              payload: {
-                line: destinationEdge
-              }
-            });
-          }
-        } else {
-          emitEvent({
-            type: 'saveNode'
-          });
-        }
-      }
-    } else if (line < lines.length - 1) {
-      var next = line + 1;
-      emitEvent({
-        type: 'notifyProgress',
-        payload: {
-          line: next
-        }
-      });
-    } else {
-      emitEvent({
-        type: 'saveNode'
-      });
-    }
-  }, [edges, line, lines, emitEvent, currentLineData.id, isBranched]);
-  var nextLine = (0, _react.useCallback)(function (choice, reset) {
-    lastTalking.current = _objectSpread({}, talkingCharacter);
-    setEdgesHistory([].concat(_toConsumableArray(edgesHistory), [currentLineData.id]));
-    setAudioFailed(false);
-    resetTalkingAnimation();
-    if (isBranched) {
-      if (choice) {
-        handleDecisionBranch(choice, reset);
-      } else {
-        handleBranchDirection();
-      }
-    } else if (line < lines.length - 1) {
-      var next = line + 1;
-      setCurrentMessage({
-        show: false
-      });
-      changeLine(next);
-      emitEvent({
-        type: 'notifyProgress',
-        payload: {
-          line: next
-        }
-      });
-    } else if (autoEnd) {
-      finishConversation();
-    } else if (currentLineData.decision) {
-      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()) {
-      finishConversation();
-    } else {
-      setAutomatic(false);
-      nextLine();
-    }
-  };
-
-  // 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);
-        }
-      }
-    }
-  }, [edges, isBranched, lines, mounted]);
-  var moveBubble = function moveBubble(element) {
-    if (lastTalking.current.uid === element.uid) return;
-    var target = new _three.Object3D();
-    var head = element.getObjectByName('Head_M');
-    head.updateMatrixWorld();
-    target.applyMatrix4(head.matrixWorld);
-    target.applyQuaternion(camera.quaternion);
-    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
-    var vector = new _three.Vector3();
-    vector.setFromMatrixPosition(head.matrixWorld);
-    var p = vector.project(camera);
-    var isLeft = p.x < 0;
-    messagePosition.current = {
-      pos: target.position.toArray(),
-      child: head,
-      parent: element,
-      isLeft: isLeft
-    };
-  };
-  var setUIContainerToItsDefaultZIndex = function setUIContainerToItsDefaultZIndex(value) {
-    emitEvent({
-      type: 'resetZIndexUIContainer',
-      payload: value
-    });
-  };
-
-  // Position bubble over talking character/and switch emotions
-  (0, _react.useEffect)(function () {
-    if (isVoiceOver) {
-      resetCameraView();
-      setCurrentMessage({
-        text: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.text,
-        name: (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.alias) || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.name) || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
-        inScene: false,
-        voiceOver: true,
-        thinkful: false,
-        top: false,
-        avatar: getAvatarURL(talkingCharacter),
-        show: true
-      });
-    } else if (!lastSet.current && !isDecision) {
-      // Talking element logic
-      if (talkingCharacter) {
-        var slottedCharacters = currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots.filter(function (slot) {
-          return slot.uid && !slot.talking;
-        });
-        var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
-          return slot.uid;
-        }) || []), [talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid]);
-        var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
-          return !currentParticipants.includes(charUid);
-        });
-        notInvolvedParticipants.forEach(function (c) {
-          startAnimation(c, 'idle');
-        });
-
-        // Check not talking elements emotion
-        slottedCharacters.forEach(function (c) {
-          var sceneElement = getCurrentVisible(c.uid);
-          if (sceneElement) {
-            var isSeated = sceneElement.isSeated;
-            var includesSeated = c.emotion.includes('seated');
-            startAnimation(c.uid, isSeated && !includesSeated ? "".concat(c.emotion, "-seated") : c.emotion);
-          }
-        });
-        var element = getCurrentVisible(talkingCharacter.uid);
-        var object = actors.find(function (a) {
-          return a.uid === talkingCharacter.uid;
-        });
-        if (element && !lastSet.current) {
-          setTimeout(function () {
-            if (talkingCharacter.uid === element.uid) {
-              var _userData$active, _userData$active2;
-              moveBubble(element);
-              var isSeated = element.isSeated,
-                userData = element.userData;
-              var emotion = talkingCharacter.emotion;
-              var includesSeated = emotion.includes('seated');
-              if (!((_userData$active = userData.active) !== null && _userData$active !== void 0 && _userData$active.includes('talking')) && !((_userData$active2 = userData.active) !== null && _userData$active2 !== void 0 && _userData$active2.includes(emotion))) {
-                startAnimation(talkingCharacter.uid, isSeated && !includesSeated ? "".concat(emotion, "-seated") : 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();
-              }
-            }
-          }, 150);
-        } else {
-          var _talkingCharacter$cha2;
-          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),
-            left: false,
-            top: talkingCharacter.text.length > maxCharacterToSwitch,
-            inScene: false,
-            thinkful: talkingCharacter.emotion.includes('think'),
-            avatar: getAvatarURL(talkingCharacter),
-            show: true
-          });
-        }
-      } else {
-        resetCameraView();
-        setCurrentMessage({
-          show: true
-        });
-      }
-    }
-  }, [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,
-    voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
-    started: currentMessage.show,
-    text: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text,
-    audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
-    slide: line,
-    soundActions: soundActions,
-    emitEvent: emitEvent,
-    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();
-    },
-    onError: function onError() {
-      setAudioFailed(true);
-    },
-    onFinish: function onFinish() {
-      resetTalkingAnimation();
-      if (autoPlayCond && !pause) {
-        nextLine();
-      }
-    }
-  });
-  (0, _react.useEffect)(function () {
-    stopEkho();
-    return function () {
-      stopEkho();
-    };
-  }, [line, stopEkho]);
-  (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();
-      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 () {
-        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
-  (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 (!isEndNode() || isEndNode() && autoEnd) {
-        start(nextLine, time < minMs ? minMs : time);
-      }
-    }
-    return function () {
-      stop();
-    };
-  }, [currentMessage, nextLine, start, autoEnd, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoPlayCond, audio, voice, audioFailed]);
-  var disableBackButton = (0, _react.useMemo)(function () {
-    var disabled = line === 0 || previousLineWasDecision();
-    return disabled;
-  }, [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), {}, {
-      decisionNumber: lines.filter(function (l) {
-        return l.decision;
-      }).findIndex(function (l) {
-        return l.id === currentLineData.id;
-      }) + 1,
-      inheritProps: {
-        slots: [],
-        disableBackground: true
-      },
-      required: !isBranched,
-      branched: isBranched,
-      onAddPoints: decisionNotifyProgress,
-      onFinish: nextLine,
-      emitEvent: emitEvent,
-      pause: pause,
-      soundActions: soundActions,
-      keyboardControl: keyboardControl,
-      onMount: function onMount() {
-        resetCameraView();
-        setUIContainerToItsDefaultZIndex(true);
-      },
-      onUnMount: function onUnMount() {
-        zoomStarted.current = false;
-        setUIContainerToItsDefaultZIndex(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
-  }) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
-    wrapperClass: "htmlpro-wrap-100-h",
-    style: {
-      width: '100vw',
-      height: '100%',
-      position: 'static'
-    },
-    portal: container ? {
-      current: container
-    } : undefined,
-    zIndexRange: [6, 6],
-    onOcclude: function onOcclude() {},
-    calculatePosition: function calculatePosition() {
-      return [0, 0];
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    dir: (0, _LangIsRtl.default)() ? 'rtl' : 'ltr',
-    className: "dialog-component-controls"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    onClick: manualBackLine,
-    disabled: disableBackButton || !currentMessage.show,
-    className: "gat--btn__round ".concat(disableBackButton || !currentMessage.show ? 'disabled' : ''),
-    "aria-label": (0, _LangIsRtl.default)() ? translate('storylines.misc.forward') : translate('storylines.misc.rewind')
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
-  })), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    onClick: manualNextLine,
-    disabled: !currentMessage.show,
-    className: "gat--btn__round \n              ".concat(!currentMessage.show ? 'disabled' : '', "\n              ").concat(automatic && isEndNode() ? 'glowing-animation' : ''),
-    "aria-label": (0, _LangIsRtl.default)() ? translate('storylines.misc.rewind') : translate('storylines.misc.forward')
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
-  })))));
-};
-var _default = DialogComponent;
-exports.default = _default;