@gamelearn/arcade-components 1.7.9 → 1.8.1

package/README.md

@@ -81,6 +81,12 @@ yarn compile
 yalc publish o yarn yalc publish
 ```
 
+Si queremos escuchar los cambios y que se vayan publicando en el store de yalc se puede hacer directamente con:
+
+```bash
+yarn watch
+```
+
 Después, en el repositorio de `arcade` tendremos que linkar el paquete generado de la siguiente forma:
 
 ```bash

package/dist/components/cartel-component/components/CartelComponent.js

@@ -9,6 +9,10 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
+
+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; }
@@ -29,6 +33,8 @@ var CartelComponent = function CartelComponent(_ref) {
   var img = _ref.img,
       text = _ref.text,
       audio = _ref.audio,
+      audioType = _ref.audioType,
+      voice = _ref.voice,
       emitEvent = _ref.emitEvent,
       soundActions = _ref.soundActions;
   var textBox = (0, _react.useRef)();
@@ -37,6 +43,15 @@ var CartelComponent = function CartelComponent(_ref) {
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
+  (0, _useEkho.default)({
+    audioType: audioType,
+    voice: voice,
+    text: text,
+    audio: audio,
+    soundActions: soundActions,
+    emitEvent: emitEvent
+  });
+
   var close = function close() {
     playSound('click-ui');
     emitEvent({
@@ -84,11 +99,6 @@ var CartelComponent = function CartelComponent(_ref) {
       resizeObserver.observe(picture.current);
     }
   });
-  (0, _react.useEffect)(function () {
-    if (audio) {
-      playSound(audio.url);
-    }
-  }, [playSound, audio]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "cartel"
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -80,7 +80,8 @@ var ComicComponent = function ComicComponent(_ref) {
     key: "comic page ".concat(slides[slideCount].slideOrder),
     slide: slides[slideCount],
     transition: slideTransition,
-    soundActions: soundActions
+    soundActions: soundActions,
+    emitEvent: emitEvent
   }), slideCount > 0 && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "comic-control comic-control--left gat--btn__round",

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

@@ -1,63 +1,34 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _Vignette = _interopRequireDefault(require("./Vignette"));
 
-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 _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; }
+var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Slide = function Slide(_ref) {
+  var _slide$vignettes$0$te;
+
   var slide = _ref.slide,
       transition = _ref.transition,
-      soundActions = _ref.soundActions;
+      soundActions = _ref.soundActions,
+      emitEvent = _ref.emitEvent;
   var slideTransition = slide.transitionEffects || transition;
-
-  var _soundActions = _slicedToArray(soundActions, 2),
-      playSound = _soundActions[0],
-      stop = _soundActions[1];
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMounted = _useState2[0],
-      setisMounted = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    setisMounted(true);
-    return function () {
-      setisMounted(false);
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    var _slide$audio;
-
-    if (isMounted) playSound(slide === null || slide === void 0 ? void 0 : (_slide$audio = slide.audio) === null || _slide$audio === void 0 ? void 0 : _slide$audio.url);
-    return function () {
-      stop();
-    };
-  }, [playSound, stop, slide, isMounted]);
+  (0, _useEkho.default)({
+    audioType: slide === null || slide === void 0 ? void 0 : slide.audioType,
+    voice: slide === null || slide === void 0 ? void 0 : slide.voice,
+    text: slide === null || slide === void 0 ? void 0 : (_slide$vignettes$0$te = slide.vignettes[0].textData) === null || _slide$vignettes$0$te === void 0 ? void 0 : _slide$vignettes$0$te.text,
+    audio: slide === null || slide === void 0 ? void 0 : slide.audio,
+    soundActions: soundActions,
+    emitEvent: emitEvent
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "comic--slide__item ".concat(slideTransition)
   }, slide.vignettes.map(function (vignette) {

package/dist/components/comic-component/mocks/mockForStory.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.comicProps = void 0;
+exports.comicWithTTS = exports.comicProps = void 0;
 
 var _mocker = require("helpers/mocker");
 
@@ -38,6 +38,7 @@ var comicProps = {
   }, {
     slideOrder: 2,
     transitionEffects: null,
+    audioType: 'file',
     audio: {
       url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/audio/5f646497f6d21e001139b0ed/coin.wav'
     },
@@ -57,10 +58,93 @@ var comicProps = {
         text_labelId: 'text_1_0_E1Xynyri'
       },
       imgId_labelId: 'imgId_1_0_E1Xynq2k'
+    }, {
+      alias: 'alias_1_4GML5nt5',
+      alias_labelId: 'alias_1_4GML5nt5',
+      audioId: '',
+      audioId_labelId: 'audioId_1_3obtyOdQ',
+      audioType: 'voice',
+      slideOrder: 2,
+      transitionEffects: null,
+      vignettes: [{
+        imgId: 'imgId_1_0_3obtxgTc',
+        imgId_labelId: 'imgId_1_0_3obtxgTc',
+        imgName: 'perro_grande.jpg',
+        sytle: null,
+        textData: {
+          style: null,
+          text: 'text_1_0_3obtxuj4',
+          text_labelId: 'text_1_0_3obtxuj4'
+        },
+        transitionEffects: null,
+        vignetteOrder: 1
+      }],
+      voice: {
+        id: 'URoAYO',
+        type: 'character'
+      }
     }],
     audioId_labelId: 'audioId_1_E1XynHal'
   }]
 };
 exports.comicProps = comicProps;
-var _default = comicProps;
-exports.default = _default;
+var comicWithTTS = {
+  emitEvent: _mocker.emitEvent,
+  soundActions: _mocker.soundActions,
+  slides: [{
+    slideOrder: 1,
+    transitionEffects: null,
+    audio: {
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/documents/Cat-sound.mp3'
+    },
+    vignettes: [{
+      vignetteOrder: 1,
+      img: {
+        url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg',
+        imgName: 'prueba6.png',
+        resourceId: '6007f80eac41ad001120f135'
+      },
+      imgName: 'prueba6.png',
+      sytle: null,
+      transitionEffects: null,
+      textData: {
+        text: 'hola soy el hombre barbudo',
+        style: null,
+        text_labelId: 'text_0_0_E1XylCXz'
+      },
+      imgId_labelId: 'imgId_0_0_E1XymubP'
+    }],
+    audioId_labelId: 'audioId_0_E1XymRPE'
+  }, {
+    alias: 'alias_1_4GML5nt5',
+    alias_labelId: 'alias_1_4GML5nt5',
+    audioId: '',
+    audioId_labelId: 'audioId_1_3obtyOdQ',
+    audioType: 'voice',
+    slideOrder: 2,
+    transitionEffects: null,
+    vignettes: [{
+      img: {
+        url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg',
+        imgName: 'prueba6.png',
+        resourceId: '6007f80eac41ad001120f135'
+      },
+      imgId: 'imgId_1_0_3obtxgTc',
+      imgId_labelId: 'imgId_1_0_3obtxgTc',
+      imgName: 'perro_grande.jpg',
+      sytle: null,
+      textData: {
+        style: null,
+        text: 'text_1_0_3obtxuj4',
+        text_labelId: 'text_1_0_3obtxuj4'
+      },
+      transitionEffects: null,
+      vignetteOrder: 1
+    }],
+    voice: {
+      id: 'URoAYO',
+      type: 'character'
+    }
+  }]
+};
+exports.comicWithTTS = comicWithTTS;

package/dist/helpers/mocker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.translate = exports.soundActions = exports.setShowPoints = exports.onFinish = exports.noopSoundActions = exports.functionOnClose = exports.emitEvent = void 0;
+exports.translate = exports.soundActions = exports.setShowPoints = exports.onFinish = exports.noopSoundActions = exports.getSpeech = exports.functionOnClose = exports.emitEvent = void 0;
 
 /* eslint-disable no-console */
 
@@ -105,6 +105,12 @@ var setShowPoints = function setShowPoints() {
 
 exports.setShowPoints = setShowPoints;
 
+var getSpeech = function getSpeech(payload) {
+  console.log('getSpeech', payload);
+};
+
+exports.getSpeech = getSpeech;
+
 var translate = function translate(payload) {
   return payload;
 };

package/dist/helpers/useEkho.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+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); }); }; }
+
+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; }
+
+/** Custom hook for use TTS and audio in the components */
+var useEkho = function useEkho(_ref) {
+  var voice = _ref.voice,
+      text = _ref.text,
+      audioType = _ref.audioType,
+      audio = _ref.audio,
+      soundActions = _ref.soundActions,
+      emitEvent = _ref.emitEvent;
+
+  var _soundActions = _slicedToArray(soundActions, 2),
+      playSound = _soundActions[0],
+      stop = _soundActions[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMounted = _useState2[0],
+      setIsMounted = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isPlayed = _useState4[0],
+      setIsPlayed = _useState4[1];
+
+  var translate = (0, _react.useCallback)(function (id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  }, [emitEvent]); // Setted when is mounted
+
+  (0, _react.useEffect)(function () {
+    setIsMounted(true);
+    return function () {
+      setIsMounted(false);
+    };
+  }, []); // Get translated voices, todo: translate this in arcade translateProps i18n.helper.js
+
+  var getVoice = (0, _react.useCallback)(function (_ref2) {
+    var id = _ref2.id,
+        _ref2$type = _ref2.type,
+        type = _ref2$type === void 0 ? 'base' : _ref2$type;
+    var usedVoices = translate('usedVoices');
+    var gameChars = translate('gameCharacters');
+
+    if (type === 'base') {
+      return usedVoices === null || usedVoices === void 0 ? void 0 : usedVoices[id];
+    }
+
+    if (type === 'character') {
+      var _gameChars$id;
+
+      return gameChars === null || gameChars === void 0 ? void 0 : (_gameChars$id = gameChars[id]) === null || _gameChars$id === void 0 ? void 0 : _gameChars$id.voiceId;
+    }
+
+    return null;
+  }, [translate]);
+  var playSpeech = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(payload) {
+      var url;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(payload.voiceId && payload.text)) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 3;
+              return emitEvent({
+                type: 'getSpeech',
+                payload: payload
+              });
+
+            case 3:
+              url = _context.sent;
+              playSound(url, 'tts');
+              setIsPlayed(true);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [emitEvent, playSound]);
+  (0, _react.useEffect)(function () {
+    if (isMounted && !isPlayed) {
+      if (audioType === 'voice' && voice !== null && voice !== void 0 && voice.id) {
+        var voiceId = getVoice(voice);
+        playSpeech({
+          voiceId: voiceId,
+          text: text
+        });
+      } else if (audioType === 'file') {
+        playSound(audio === null || audio === void 0 ? void 0 : audio.url);
+      }
+    }
+
+    return function () {
+      stop();
+    };
+  }, [getVoice, playSpeech, isMounted, playSound, stop, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, isPlayed]);
+};
+
+var _default = useEkho;
+exports.default = _default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.7.9",
+  "version": "1.8.1",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@gamelearn/arcade-styles": "0.7.2",
-    "@gamelearn/arcade-three-core": "1.0.1",
+    "@gamelearn/arcade-three-core": "1.1.10",
     "@react-three/drei": "^7.20.0",
     "@react-three/fiber": "^7.0.17",
     "@testing-library/jest-dom": "5.11.4",