@gamelearn/arcade-components 1.22.15 → 1.23.0

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

@@ -120,7 +120,7 @@ var ComicComponent = function ComicComponent(_ref) {
     goToPreviousSlide();
   };
 
-  var stopEkho = (0, _useEkho.default)({
+  (0, _useEkho.default)({
     audioType: slides === null || slides === void 0 ? void 0 : (_slides$slideCount = slides[slideCount]) === null || _slides$slideCount === void 0 ? void 0 : _slides$slideCount.audioType,
     voice: slides === null || slides === void 0 ? void 0 : (_slides$slideCount2 = slides[slideCount]) === null || _slides$slideCount2 === void 0 ? void 0 : _slides$slideCount2.voice,
     text: slides === null || slides === void 0 ? void 0 : (_slides$slideCount3 = slides[slideCount]) === null || _slides$slideCount3 === void 0 ? void 0 : (_slides$slideCount3$v = _slides$slideCount3.vignettes[0].textData) === null || _slides$slideCount3$v === void 0 ? void 0 : _slides$slideCount3$v.text,
@@ -137,9 +137,6 @@ var ComicComponent = function ComicComponent(_ref) {
       }
     }
   });
-  (0, _react.useEffect)(function () {
-    stopEkho();
-  }, [slideCount, stopEkho]);
   (0, _react.useEffect)(function () {
     if (automatic && ((slide === null || slide === void 0 ? void 0 : slide.audioType) === 'none' || audioFailed)) {
       var _slide$vignettes$, _slide$vignettes$$tex;

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

@@ -86,8 +86,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       currentLine = _useState10[0],
       setCurrentLine = _useState10[1];
 
-  var _soundActions = _slicedToArray(soundActions, 1),
-      playSound = _soundActions[0];
+  var _soundActions = _slicedToArray(soundActions, 2),
+      playSound = _soundActions[0],
+      stopSound = _soundActions[1];
 
   var _useTimeout = (0, _useTimeout2.default)(),
       start = _useTimeout.start,
@@ -313,7 +314,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   var autoplayCond = automatic && !isDecision;
   var disableBackButton = currentLine === 0 || previousLineWasDecision || currentLine > 0 && (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision);
-  var stopEkho = (0, _useEkho.default)({
+  (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
     voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
     started: started,
@@ -329,10 +330,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         handleClickNext();
       }
     }
-  });
-  (0, _react.useEffect)(function () {
-    stopEkho();
-  }, [currentLine, stopEkho]); // Autoplay logic
+  }); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     if (autoplayCond && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {

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

@@ -466,48 +466,52 @@ var DialogComponent = function DialogComponent(_ref) {
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
             }
 
-            if (talkingCharacter.uid === element.uid) {
-              var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
-              var head = element.getObjectByName('Head_M');
-              var target = new _three.Object3D();
-              head.getWorldPosition(target.position);
-              target.applyQuaternion(camera.quaternion);
-              var distance = camera.position.distanceTo(target.position);
-              var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
-              target.translateY(staticDisplay || showArrowTop ? 0 : 3); // Detectar posicion de personaje a izq o derecha de pantalla
-
-              var vector = new _three.Vector3();
-              vector.setFromMatrixPosition(head.matrixWorld);
-              var p = vector.project(defaultCamera);
-              var isLeft = p.x < 0;
-              messagePosition.current = {
-                pos: target.position.toArray(),
-                child: head,
-                parent: element,
-                isLeft: isLeft
-              };
-
-              if (zoomInActor) {
-                setAnimationRunning(true);
-              } // Ugly timeout to wait for zoom in ( maybe use tween (?))
-
-
-              setTimeout(function () {
-                var _talkingCharacter$cha;
-
-                distance = camera.position.distanceTo(target.position);
-                setCurrentMessage({
-                  text: talkingCharacter.text,
-                  name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
-                  left: true,
-                  top: showArrowTop || distance > 70,
-                  inScene: true,
-                  thinkful: talkingCharacter.emotion === 'thinkful',
-                  avatar: '',
-                  show: true
-                });
-              }, zoomInActor ? 1000 : 0);
-            }
+            setTimeout(function () {
+              if (talkingCharacter.uid === element.uid) {
+                var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
+                var head = element.getObjectByName('Head_M');
+                var target = new _three.Object3D();
+                head.updateMatrix();
+                head.updateMatrixWorld();
+                head.getWorldPosition(target.position);
+                target.applyQuaternion(camera.quaternion);
+                var distance = camera.position.distanceTo(target.position);
+                var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
+                target.translateY(staticDisplay || showArrowTop ? 0 : 3); // Detectar posicion de personaje a izq o derecha de pantalla
+
+                var vector = new _three.Vector3();
+                vector.setFromMatrixPosition(head.matrixWorld);
+                var p = vector.project(defaultCamera);
+                var isLeft = p.x < 0;
+                messagePosition.current = {
+                  pos: target.position.toArray(),
+                  child: head,
+                  parent: element,
+                  isLeft: isLeft
+                };
+
+                if (zoomInActor) {
+                  setAnimationRunning(true);
+                } // Ugly timeout to wait for zoom in ( maybe use tween (?))
+
+
+                setTimeout(function () {
+                  var _talkingCharacter$cha;
+
+                  distance = camera.position.distanceTo(target.position);
+                  setCurrentMessage({
+                    text: talkingCharacter.text,
+                    name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
+                    left: true,
+                    top: showArrowTop || distance > 70,
+                    inScene: true,
+                    thinkful: talkingCharacter.emotion === 'thinkful',
+                    avatar: '',
+                    show: true
+                  });
+                }, zoomInActor ? 1200 : 0);
+              }
+            }, crossFadeDuration * 100);
           });
         } else {
           var _talkingCharacter$cha2;
@@ -555,6 +559,9 @@ var DialogComponent = function DialogComponent(_ref) {
   });
   (0, _react.useEffect)(function () {
     stopEkho();
+    return function () {
+      stopEkho();
+    };
   }, [line, stopEkho]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
@@ -630,9 +637,9 @@ var DialogComponent = function DialogComponent(_ref) {
         }
 
         var mult = messagePosition.current.isLeft ? -1 : 1;
-        var headSpace = 2.25 * mult; // move bubble
+        var headSpace = 2 * mult; // move bubble
 
-        messagePosition.current.pos[0] -= 1.25;
+        messagePosition.current.pos[0] -= headSpace;
         animationTarget.current.translateX(-10 * mult - headSpace);
         animationTarget.current.translateY(-5);
         animationTarget.current.translateZ(30);

package/dist/components/video-visor/components/VideoControllers/BufferBar.js

@@ -31,7 +31,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var BufferBar = function BufferBar(_ref) {
   var time = _ref.time,
-      setTimePoint = _ref.setTimePoint;
+      setTimePoint = _ref.setTimePoint,
+      mandatory = _ref.mandatory,
+      mandatoryHasBeenViewed = _ref.mandatoryHasBeenViewed,
+      viewed = _ref.viewed;
   var barPercentage = Math.trunc(time.current * 1000 / time.duration) / 10;
 
   var barRef = /*#__PURE__*/_react.default.createRef();
@@ -76,10 +79,12 @@ var BufferBar = function BufferBar(_ref) {
   };
 
   var _onMouseDown = function onMouseDown(event, buffer) {
-    event.preventDefault();
-    setTimePoint(event.clientX, buffer.offsetWidth, buffer.offsetLeft);
-    windowMove(buffer);
-    move(true);
+    if (!mandatory || mandatory && mandatoryHasBeenViewed || viewed) {
+      event.preventDefault();
+      setTimePoint(event.clientX, buffer.offsetWidth, buffer.offsetLeft);
+      windowMove(buffer);
+      move(true);
+    }
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/video-visor/components/VideoControllers/SkipButton.js

@@ -13,8 +13,9 @@ var skipButton = function skipButton(_ref) {
   var viewed = _ref.viewed,
       mandatory = _ref.mandatory,
       finished = _ref.finished,
-      skip = _ref.skip;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mandatory && viewed || !mandatory || finished ? /*#__PURE__*/_react.default.createElement("div", {
+      skip = _ref.skip,
+      mandatoryHasBeenViewed = _ref.mandatoryHasBeenViewed;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mandatory && viewed || !mandatory || finished || mandatoryHasBeenViewed ? /*#__PURE__*/_react.default.createElement("div", {
     className: "position--absolute right top z-index1"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "gat--btn__round",

package/dist/components/video-visor/components/VideoControllers/index.js

@@ -40,7 +40,8 @@ var VideoControllers = function VideoControllers(_ref) {
       mute = _ref.mute,
       setVolume = _ref.setVolume,
       setTimePoint = _ref.setTimePoint,
-      audioAnimation = _ref.audioAnimation;
+      audioAnimation = _ref.audioAnimation,
+      mandatoryHasBeenViewed = _ref.mandatoryHasBeenViewed;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, audioAnimation ? null : /*#__PURE__*/_react.default.createElement(_PlayInitButton.default, {
     play: pause,
     paused: paused,
@@ -53,12 +54,17 @@ var VideoControllers = function VideoControllers(_ref) {
     finished: finished,
     viewed: viewed,
     skip: skip,
-    rewind: rewind
+    rewind: rewind,
+    mandatoryHasBeenViewed: mandatoryHasBeenViewed
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "video--controls"
   }, /*#__PURE__*/_react.default.createElement(_BufferBar.default, {
+    mandatory: mandatory,
+    mandatoryHasBeenViewed: mandatoryHasBeenViewed,
     time: time,
-    setTimePoint: setTimePoint
+    setTimePoint: setTimePoint,
+    finished: finished,
+    viewed: viewed
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "video--controls__actions"
   }, /*#__PURE__*/_react.default.createElement(_Timer.default, {

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

@@ -44,48 +44,53 @@ var VideoVisor = function VideoVisor(_ref) {
       soundActions = _ref.soundActions,
       endVideo = _ref.endVideo;
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mandatoryHasBeenViewed = _useState2[0],
+      setmandatoryHasBeenViewed = _useState2[1];
+
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
-  var _useState = (0, _react.useState)(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      duration = _useState2[0],
-      setDuration = _useState2[1];
-
   var _useState3 = (0, _react.useState)(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      loadedPercentage = _useState4[0],
-      setLoadedPercentage = _useState4[1];
+      duration = _useState4[0],
+      setDuration = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(0),
       _useState6 = _slicedToArray(_useState5, 2),
-      loading = _useState6[0],
-      setLoading = _useState6[1];
+      loadedPercentage = _useState6[0],
+      setLoadedPercentage = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(true),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      paused = _useState8[0],
-      setPaused = _useState8[1];
+      loading = _useState8[0],
+      setLoading = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)(true),
       _useState10 = _slicedToArray(_useState9, 2),
-      isFinish = _useState10[0],
-      setIsFinish = _useState10[1];
+      paused = _useState10[0],
+      setPaused = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(),
+  var _useState11 = (0, _react.useState)(false),
       _useState12 = _slicedToArray(_useState11, 2),
-      videoPlayer = _useState12[0],
-      setVideo = _useState12[1];
+      isFinish = _useState12[0],
+      setIsFinish = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(0),
+  var _useState13 = (0, _react.useState)(),
       _useState14 = _slicedToArray(_useState13, 2),
-      volume = _useState14[0],
-      setVolume = _useState14[1];
+      videoPlayer = _useState14[0],
+      setVideo = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(false),
+  var _useState15 = (0, _react.useState)(0),
       _useState16 = _slicedToArray(_useState15, 2),
-      hiddenControls = _useState16[0],
-      hideControls = _useState16[1];
+      volume = _useState16[0],
+      setVolume = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      hiddenControls = _useState18[0],
+      hideControls = _useState18[1];
 
   var isHls = url && url.match(/\.m3u8(\?.+=.+)*$/i) && _hls.default.isSupported();
 
@@ -103,6 +108,10 @@ var VideoVisor = function VideoVisor(_ref) {
   };
 
   var onEnded = function onEnded() {
+    if (required) {
+      setmandatoryHasBeenViewed(true);
+    }
+
     setLoading(false);
     videoPlayer.pause();
     setPaused(true);
@@ -230,9 +239,10 @@ var VideoVisor = function VideoVisor(_ref) {
     backgroundPosition: 'center center'
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "video",
+    className: "video ".concat(required && !mandatoryHasBeenViewed && !viewed ? 'forward-disabled' : ''),
     style: isAudio ? configForAudio : null
   }, !isEmbeddedVideo ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hiddenControls && /*#__PURE__*/_react.default.createElement(_VideoControllers.default, {
+    mandatoryHasBeenViewed: mandatoryHasBeenViewed,
     audioAnimation: !!isAudio,
     skip: endVideo,
     mandatory: required,

package/dist/components/video-visor/mocks/mockForStory.js

@@ -33,6 +33,10 @@ var mockProps = [{
   imgId: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/60224b7a901f3e0012350158/vista-vertical-torre-eiffel-paris-francia_1258-3169.jpg',
   soundActions: _mocker.soundActions,
   url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/documents/Cat-sound.mp3'
+}, {
+  url: "".concat(path, "/triskelion-statics/videos/ada_hack.mp4"),
+  soundActions: _mocker.soundActions,
+  required: true
 }];
 exports.mockProps = mockProps;
 var _default = mockProps;

package/dist/helpers/useEkho.js

@@ -7,12 +7,6 @@ exports.default = void 0;
 
 var _react = require("react");
 
-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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -163,9 +157,10 @@ var useEkho = function useEkho(_ref) {
   }(), [emitEvent, onError, setCurrentPlaying]);
   var stopCurrentAudio = (0, _react.useCallback)(function () {
     if (currentPlaying.current.url) {
-      currentPlaying.current = _objectSpread(_objectSpread({}, currentPlaying.current), {}, {
-        url: ''
-      });
+      currentPlaying.current = {
+        url: '',
+        cc: 'tts'
+      };
       stop(currentPlaying.current.cc);
     }
   }, [stop]);
@@ -176,6 +171,8 @@ var useEkho = function useEkho(_ref) {
   }, [noAudio, stopCurrentAudio]);
   (0, _react.useEffect)(function () {
     if (isMounted && started) {
+      stopCurrentAudio();
+
       if (audioType === 'voice' && voice !== null && voice !== void 0 && voice.id) {
         var voiceId = getVoice(voice);
         playSpeech({
@@ -188,7 +185,7 @@ var useEkho = function useEkho(_ref) {
         onError();
       }
     }
-  }, [getVoice, playSpeech, isMounted, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying, onError, started]);
+  }, [getVoice, playSpeech, isMounted, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying, onError, started, stopCurrentAudio]);
   return stopCurrentAudio;
 };
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.22.15",
+  "version": "1.23.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -13,7 +13,7 @@
     "url": "https://github.com/gamelearn/arcade-components"
   },
   "dependencies": {
-    "@gamelearn/arcade-styles": "0.11.8",
+    "@gamelearn/arcade-styles": "0.11.10",
     "@gamelearn/arcade-three-core": "1.1.15",
     "@react-three/drei": "8.8.1",
     "@react-three/fiber": "7.0.25",