@gamelearn/arcade-components 1.26.0 → 1.26.1-hotfix-2-video

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

@@ -0,0 +1,58 @@
+"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 _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
+var _SpeechBubbleComponent = _interopRequireDefault(require("./SpeechBubbleComponent"));
+
+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; }
+
+var cleanStyle = {
+  width: '100vw',
+  height: '100vh',
+  position: 'static'
+};
+
+var BubbleWrapper = function BubbleWrapper(_ref) {
+  var onLoad = _ref.onLoad,
+      position = _ref.position,
+      currentMessage = _ref.currentMessage;
+  var group = (0, _react.useRef)();
+  var bubble = (0, _react.useRef)();
+
+  var onBubbleBuild = function onBubbleBuild() {
+    onLoad(group, bubble);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("group", {
+    ref: group,
+    position: position
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+    zIndexRange: [2, 2],
+    calculatePosition: currentMessage.inScene ? undefined : function () {
+      return [0, 0];
+    },
+    style: currentMessage.inScene ? {
+      position: 'static'
+    } : cleanStyle
+  }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
+    ref: bubble,
+    onLoad: onBubbleBuild,
+    message: currentMessage
+  })));
+};
+
+var _default = BubbleWrapper;
+exports.default = _default;

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

@@ -19,8 +19,6 @@ var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
 var _gsap = _interopRequireDefault(require("gsap"));
 
-var _SpeechBubbleComponent = _interopRequireDefault(require("./SpeechBubbleComponent"));
-
 var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
 
 var _helpers = require("../../../helpers");
@@ -33,6 +31,8 @@ var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
 
 var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
 
+var _BubbleWrapper = _interopRequireDefault(require("./BubbleWrapper"));
+
 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); }
@@ -151,8 +151,6 @@ var DialogComponent = function DialogComponent(_ref) {
       animationRunning = _useState12[0],
       setAnimationRunning = _useState12[1];
 
-  var bubbleRef = (0, _react.useRef)();
-  var groupRef = (0, _react.useRef)();
   var animationTarget = (0, _react.useRef)(new _three.Object3D());
   var currentLine = lines[line];
   var lastLine = lines[line - 1];
@@ -394,13 +392,13 @@ var DialogComponent = function DialogComponent(_ref) {
     target.applyQuaternion(camera.quaternion);
     var distance = camera.position.distanceTo(target.position);
     var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
-    target.translateY(staticDisplay || showArrowTop ? 0 : 2); // Detectar posicion de personaje a izq o derecha de pantalla
+    target.translateY(staticDisplay || showArrowTop ? -1 : 0); // Detectar posicion de personaje a izq o derecha de pantalla
 
     var vector = new _three.Vector3();
     vector.setFromMatrixPosition(head.matrixWorld);
     var p = vector.project(defaultCamera);
-    target.translateX(headSize);
     var isLeft = p.x < 0;
+    target.translateX(-1);
     messagePosition.current = {
       pos: target.position.toArray(),
       child: head,
@@ -571,16 +569,16 @@ var DialogComponent = function DialogComponent(_ref) {
     };
   }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning Bubble Message logic
 
-  var checkBubbleBounds = (0, _react.useCallback)(function () {
-    if (bubbleRef.current && currentLine !== null && currentLine !== void 0 && currentLine.slots) {
+  var checkBubbleBounds = (0, _react.useCallback)(function (group, bubble) {
+    if (currentLine !== null && currentLine !== void 0 && currentLine.slots && currentMessage.show && bubble !== null && bubble !== void 0 && bubble.current) {
       var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
         return slot.talking;
       });
-      var bubbleRect = bubbleRef.current.getBoundingClientRect();
+      var bubbleRect = bubble.current.getBoundingClientRect();
       var x = bubbleRect.x + bubbleRect.width;
       var y = bubbleRect.y - bubbleRect.height;
 
-      if (!messagePosition.current.isLeft || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
+      if (!messagePosition.current.isLeft && zoomInActor || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
         var _messagePosition$curr = messagePosition.current,
             child = _messagePosition$curr.child,
             parent = _messagePosition$curr.parent;
@@ -589,17 +587,17 @@ var DialogComponent = function DialogComponent(_ref) {
           var target = new _three.Object3D();
           child.getWorldPosition(target.position);
           target.applyQuaternion(camera.quaternion);
-          groupRef.current.position.copy(target.position);
-          groupRef.current.updateMatrixWorld();
+          group.current.position.copy(target.position);
+          group.current.updateMatrixWorld();
           moveBubble(parent, target, false);
           var divider = isMobile ? 10 : 6;
           var distanceX = bubbleRect.width + bubbleRect.width / divider;
-          bubbleRef.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height, "px, 0px)");
-          bubbleRect = bubbleRef.current.getBoundingClientRect();
+          bubble.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height, "px, 0px)");
+          bubbleRect = bubble.current.getBoundingClientRect();
           var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width || bubbleRect.x < 10;
 
           if (completeOutside) {
-            bubbleRef.current.parentNode.style.transform = '';
+            bubble.current.parentNode.style.transform = '';
             messagePosition.current.child = null;
             messagePosition.current.parent = null;
           }
@@ -615,13 +613,10 @@ var DialogComponent = function DialogComponent(_ref) {
           });
         }
       } else {
-        bubbleRef.current.parentNode.style.transform = '';
+        bubble.current.parentNode.style.transform = '';
       }
     }
   }, [camera.quaternion, currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots, currentMessage.inScene, getAvatarURL]);
-  (0, _react.useEffect)(function () {
-    checkBubbleBounds();
-  }, [checkBubbleBounds]);
   (0, _react.useEffect)(function () {
     if (animationRunning) {
       var cam = camera;
@@ -638,7 +633,7 @@ var DialogComponent = function DialogComponent(_ref) {
 
         messagePosition.current.pos[0] -= headSpace;
         animationTarget.current.translateX(-10 + headSpace);
-        animationTarget.current.translateY(-5);
+        animationTarget.current.translateY(0);
         animationTarget.current.translateZ(30);
       }
 
@@ -716,21 +711,11 @@ var DialogComponent = function DialogComponent(_ref) {
   } // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
 
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement("group", {
-    ref: groupRef,
-    position: messagePosition.current.pos
-  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
-    zIndexRange: [2, 2],
-    calculatePosition: currentMessage.inScene ? undefined : function () {
-      return [0, 0];
-    },
-    style: currentMessage.inScene ? {
-      position: 'static'
-    } : cleanStyle
-  }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
-    ref: bubbleRef,
-    message: currentMessage
-  }))) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_BubbleWrapper.default, {
+    position: messagePosition.current.pos,
+    currentMessage: currentMessage,
+    onLoad: checkBubbleBounds
+  }) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',
       height: '100vh'

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

@@ -1,16 +1,38 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var message = _ref.message;
+  var message = _ref.message,
+      onLoad = _ref.onLoad;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mounted = _useState2[0],
+      setMounted = _useState2[1];
 
   var getAvatar = function getAvatar() {
     var avatarUrl = message.avatar;
@@ -27,7 +49,13 @@ var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_re
     return avatarUrl;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  (0, _react.useLayoutEffect)(function () {
+    if (!mounted) {
+      onLoad();
+      setMounted(true);
+    }
+  }, [onLoad, mounted]);
+  return /*#__PURE__*/_react.default.createElement("div", {
     dir: "auto",
     ref: ref,
     className: "\n          speech-bubble\n          ".concat(message.left && message.inScene ? 'speech-bubble--arrow-left' : '', "\n          ").concat(!message.left && message.inScene ? 'speech-bubble--arrow-right' : '', "\n          ").concat(message.top && message.inScene ? 'arrow-top' : '', "\n          ").concat(message.thinkful || message.voiceOver ? 'speech-bubble--italic' : '', "\n      ")
@@ -48,7 +76,7 @@ var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_re
     className: "speech-bubble__title"
   }, message.name)), message.text ? /*#__PURE__*/_react.default.createElement("div", {
     className: "speech-bubble__text"
-  }, message.text) : null)));
+  }, message.text) : null));
 });
 
 var _default = SpeechBubbleComponent;

package/dist/components/video-visor/components/VideoVisor.js

@@ -274,9 +274,7 @@ var VideoVisor = function VideoVisor(_ref) {
     onEnded: onEnded,
     onError: onError,
     onPlaying: onPlaying
-  }, videoProps), /*#__PURE__*/_react.default.createElement("track", {
-    kind: "captions"
-  })), loading ? /*#__PURE__*/_react.default.createElement("div", {
+  }, videoProps)), loading ? /*#__PURE__*/_react.default.createElement("div", {
     className: "video-loading-container",
     style: {
       top: 0,

package/dist/helpers/index.js

@@ -158,6 +158,7 @@ var setWeight = function setWeight(action, weight) {
 
 var executeCrossFade = function executeCrossFade(startAction, endAction, duration) {
   if (startAction === endAction) return;
+  if (!startAction || !endAction) return;
   startAction.play();
   startAction.reset();
   endAction.reset();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.26.0",
+  "version": "1.26.1-hotfix-2-video",
   "main": "dist/index.js",
   "files": [
     "dist",