@gamelearn/arcade-components 1.10.0 → 1.10.1-hotfix-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +106 -106
  2. package/dist/components/conversational-pro-component/components/ConversationalProComponent.js +13 -91
  3. package/dist/components/dialog-component/components/DialogComponent.js +14 -95
  4. package/dist/components/image-click-wrapper-component/components/ImageClickWrapperComponent.js +9 -5
  5. package/dist/helpers/useEkho.js +31 -17
  6. package/package.json +111 -111
package/README.md CHANGED
@@ -1,106 +1,106 @@
1
- # Arcade Components
2
- > librería de componentes para Arcade (aka engine 2.0)
3
-
4
- [![NPM](https://img.shields.io/npm/v/arcade-components.svg)](https://www.npmjs.com/package/arcade-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
5
-
6
- ## Install
7
-
8
- ```bash
9
- yarn add @gamelearn/arcade-components
10
- ```
11
-
12
- ## Usage
13
-
14
- ```jsx
15
- import React, { Component } from 'react';
16
-
17
- import { Button } from 'arcade-components';
18
-
19
- export default class App extends Component {
20
- render() {
21
- return (
22
- <div>
23
- <Button>Enjoy</Button>
24
- </div>
25
- );
26
- }
27
- }
28
-
29
- ```
30
-
31
- ## Generar version hotfix para arcade/master-stg
32
-
33
- Para generar una version hotfix nos vamos al commit que desplego la version que utiliza actualmente arcade/master-stg y creamos una rama sobre ella.
34
-
35
- Generamos los cambios o hacemos cherrypick de ellos si ya estan creados y una vez terminemos con los cambios tendremos que cambiar la version del package.json a una tal que asi :
36
-
37
- `"version": "1.3.5-fix-1",`
38
-
39
- Habiendo cambiado ya la version para publicarla ejecutamos:
40
- * `yarn publish-hotfix`
41
-
42
- Una vez publicada en npm ir a la versión master de arcade y sustituir la versión de arcade-components.
43
-
44
- ## Available Scripts
45
-
46
- Para ver Storybook en local
47
-
48
- ### `yarn start`
49
-
50
- Para compilar la librería a dist
51
-
52
- ### `yarn compile`
53
-
54
- Para dejar a babel observando cambios y ejecuntando auto-compilación puedes pasarle --watch
55
-
56
- `yarn compile --watch`
57
-
58
- ### `yarn generate <componentName>`
59
-
60
- Para añadir un componente nuevo se recomienda usar el generador automático que hara el scaffolding básico de dicho componente, coge el nombre como primer parámetro y si lo llamas sin parámetro te lo preguntará por el prompt.
61
-
62
- `yarn generate`
63
-
64
- ## How to link arcade-components in other repos (WIP)
65
-
66
- Para trabajar con arcade-components en local si necesidad de subir a git ni a npm no podemos trabajar con `yarn link` ya que da un error con los hooks de react.
67
-
68
- Cómo solución alternativa podemos instalar `yalc` que permite publicar el paquete en local e importarlo desde `arcade`.
69
-
70
- ```bash
71
- yarn global add yalc
72
- ```
73
- Si teneis problemas instalándolo en global :
74
- yarn global add yalc --prefix /usr/local
75
-
76
- Para generar el paquete en el store local:
77
-
78
- ```bash
79
- yarn
80
- yarn compile
81
- yalc publish o yarn yalc publish
82
- ```
83
-
84
- Si queremos escuchar los cambios y que se vayan publicando en el store de yalc se puede hacer directamente con:
85
-
86
- ```bash
87
- yarn watch
88
- ```
89
-
90
- Después, en el repositorio de `arcade` tendremos que linkar el paquete generado de la siguiente forma:
91
-
92
- ```bash
93
- yalc link @gamelearn/arcade-components
94
- ```
95
-
96
- Y voilá, ya podremos trabajar con arcade y arcade-components en local sin publicar nada.
97
-
98
- Una vez terminemos de trabajar con el paquete linkado en `arcade`, no nos olvidemos de borrar el link:
99
-
100
- ```bash
101
- yalc remove --all
102
- ```
103
-
104
- ## License
105
-
106
- UNLICENSED © [gamelearn](https://github.com/gamelearn)
1
+ # Arcade Components
2
+ > librería de componentes para Arcade (aka engine 2.0)
3
+
4
+ [![NPM](https://img.shields.io/npm/v/arcade-components.svg)](https://www.npmjs.com/package/arcade-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
5
+
6
+ ## Install
7
+
8
+ ```bash
9
+ yarn add @gamelearn/arcade-components
10
+ ```
11
+
12
+ ## Usage
13
+
14
+ ```jsx
15
+ import React, { Component } from 'react';
16
+
17
+ import { Button } from 'arcade-components';
18
+
19
+ export default class App extends Component {
20
+ render() {
21
+ return (
22
+ <div>
23
+ <Button>Enjoy</Button>
24
+ </div>
25
+ );
26
+ }
27
+ }
28
+
29
+ ```
30
+
31
+ ## Generar version hotfix para arcade/master-stg
32
+
33
+ Para generar una version hotfix nos vamos al commit que desplego la version que utiliza actualmente arcade/master-stg y creamos una rama sobre ella.
34
+
35
+ Generamos los cambios o hacemos cherrypick de ellos si ya estan creados y una vez terminemos con los cambios tendremos que cambiar la version del package.json a una tal que asi :
36
+
37
+ `"version": "1.3.5-fix-1",`
38
+
39
+ Habiendo cambiado ya la version para publicarla ejecutamos:
40
+ * `yarn publish-hotfix`
41
+
42
+ Una vez publicada en npm ir a la versión master de arcade y sustituir la versión de arcade-components.
43
+
44
+ ## Available Scripts
45
+
46
+ Para ver Storybook en local
47
+
48
+ ### `yarn start`
49
+
50
+ Para compilar la librería a dist
51
+
52
+ ### `yarn compile`
53
+
54
+ Para dejar a babel observando cambios y ejecuntando auto-compilación puedes pasarle --watch
55
+
56
+ `yarn compile --watch`
57
+
58
+ ### `yarn generate <componentName>`
59
+
60
+ Para añadir un componente nuevo se recomienda usar el generador automático que hara el scaffolding básico de dicho componente, coge el nombre como primer parámetro y si lo llamas sin parámetro te lo preguntará por el prompt.
61
+
62
+ `yarn generate`
63
+
64
+ ## How to link arcade-components in other repos (WIP)
65
+
66
+ Para trabajar con arcade-components en local si necesidad de subir a git ni a npm no podemos trabajar con `yarn link` ya que da un error con los hooks de react.
67
+
68
+ Cómo solución alternativa podemos instalar `yalc` que permite publicar el paquete en local e importarlo desde `arcade`.
69
+
70
+ ```bash
71
+ yarn global add yalc
72
+ ```
73
+ Si teneis problemas instalándolo en global :
74
+ yarn global add yalc --prefix /usr/local
75
+
76
+ Para generar el paquete en el store local:
77
+
78
+ ```bash
79
+ yarn
80
+ yarn compile
81
+ yalc publish o yarn yalc publish
82
+ ```
83
+
84
+ Si queremos escuchar los cambios y que se vayan publicando en el store de yalc se puede hacer directamente con:
85
+
86
+ ```bash
87
+ yarn watch
88
+ ```
89
+
90
+ Después, en el repositorio de `arcade` tendremos que linkar el paquete generado de la siguiente forma:
91
+
92
+ ```bash
93
+ yalc link @gamelearn/arcade-components
94
+ ```
95
+
96
+ Y voilá, ya podremos trabajar con arcade y arcade-components en local sin publicar nada.
97
+
98
+ Una vez terminemos de trabajar con el paquete linkado en `arcade`, no nos olvidemos de borrar el link:
99
+
100
+ ```bash
101
+ yalc remove --all
102
+ ```
103
+
104
+ ## License
105
+
106
+ UNLICENSED © [gamelearn](https://github.com/gamelearn)
package/dist/components/conversational-pro-component/components/ConversationalProComponent.js CHANGED
@@ -15,6 +15,8 @@ var _Message = _interopRequireDefault(require("./Message"));
15
15
 
16
16
  var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
17
17
 
18
+ var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
19
+
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
20
22
  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); }
@@ -27,10 +29,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
27
29
 
28
30
  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; }
29
31
 
30
- 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); } }
31
-
32
- 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); }); }; }
33
-
34
32
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
35
33
 
36
34
  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."); }
@@ -60,14 +58,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
60
58
  currentLine = _useState2[0],
61
59
  setCurrentLine = _useState2[1];
62
60
 
63
- var _soundActions = _slicedToArray(soundActions, 2),
64
- playSound = _soundActions[0],
65
- stop = _soundActions[1];
66
-
67
- var _useState3 = (0, _react.useState)(false),
68
- _useState4 = _slicedToArray(_useState3, 2),
69
- finished = _useState4[0],
70
- setFinished = _useState4[1];
61
+ var _soundActions = _slicedToArray(soundActions, 1),
62
+ playSound = _soundActions[0];
71
63
 
72
64
  var backgroundImage = (background === null || background === void 0 ? void 0 : (_background$img = background.img) === null || _background$img === void 0 ? void 0 : _background$img.url) || null;
73
65
  var currentLineData = lines[currentLine];
@@ -102,66 +94,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
102
94
  return slot.uid && slot.text;
103
95
  });
104
96
  }, [currentLineData, isVoiceOver]);
105
- var getVoice = (0, _react.useCallback)(function (_ref2) {
106
- var id = _ref2.id,
107
- _ref2$type = _ref2.type,
108
- type = _ref2$type === void 0 ? 'base' : _ref2$type;
109
- var usedVoices = translate('usedVoices');
110
- var gameChars = translate('gameCharacters');
111
-
112
- if (type === 'base') {
113
- return usedVoices === null || usedVoices === void 0 ? void 0 : usedVoices[id];
114
- }
115
-
116
- if (type === 'character') {
117
- var _gameChars$id;
118
-
119
- return gameChars === null || gameChars === void 0 ? void 0 : (_gameChars$id = gameChars[id]) === null || _gameChars$id === void 0 ? void 0 : _gameChars$id.voiceId;
120
- }
121
-
122
- return null;
123
- }, [translate]);
124
97
  var currentMessage = (0, _react.useMemo)(function () {
125
98
  return !isDecision ? getCurrentMessage() : {};
126
- }, [getCurrentMessage, isDecision]);
127
- var playSpeech = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
128
- var payload, url;
129
- return regeneratorRuntime.wrap(function _callee$(_context) {
130
- while (1) {
131
- switch (_context.prev = _context.next) {
132
- case 0:
133
- if (!(currentLineData.voice.id && currentMessage)) {
134
- _context.next = 7;
135
- break;
136
- }
137
-
138
- payload = {
139
- voiceId: getVoice(currentLineData.voice),
140
- text: currentMessage.text
141
- };
142
-
143
- if (!(payload.voiceId && payload.text)) {
144
- _context.next = 7;
145
- break;
146
- }
147
-
148
- _context.next = 5;
149
- return emitEvent({
150
- type: 'getSpeech',
151
- payload: payload
152
- });
153
-
154
- case 5:
155
- url = _context.sent;
156
- playSound(url, 'tts');
157
-
158
- case 7:
159
- case "end":
160
- return _context.stop();
161
- }
162
- }
163
- }, _callee);
164
- })), [currentLineData.voice, currentMessage, emitEvent, getVoice, playSound]); // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
99
+ }, [getCurrentMessage, isDecision]); // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
165
100
 
166
101
  var leftWithSlots = lines.slice(0, currentLine + 1).reverse().find(function (line) {
167
102
  return line.slots;
@@ -238,7 +173,6 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
238
173
  flex: isFlex
239
174
  };
240
175
  var finishConversation = (0, _react.useCallback)(function () {
241
- setFinished(true);
242
176
  emitEvent({
243
177
  type: 'success'
244
178
  });
@@ -322,26 +256,14 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
322
256
  }
323
257
  };
324
258
 
325
- (0, _react.useEffect)(function () {
326
- var _currentLineData$audi;
327
-
328
- if ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'voice' && !finished) {
329
- playSpeech();
330
- } else if (currentLineData !== null && currentLineData !== void 0 && (_currentLineData$audi = currentLineData.audio) !== null && _currentLineData$audi !== void 0 && _currentLineData$audi.url) {
331
- var _currentLineData$audi2;
332
-
333
- playSound(currentLineData === null || currentLineData === void 0 ? void 0 : (_currentLineData$audi2 = currentLineData.audio) === null || _currentLineData$audi2 === void 0 ? void 0 : _currentLineData$audi2.url, 'tts');
334
- }
335
-
336
- return function () {
337
- stop('tts');
338
- };
339
- }, [currentLineData, currentMessage, finished, lines, playSound, playSpeech, stop]);
340
- (0, _react.useEffect)(function () {
341
- return function () {
342
- stop('tts');
343
- };
344
- }, [stop]);
259
+ (0, _useEkho.default)({
260
+ audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
261
+ voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
262
+ text: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text,
263
+ audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
264
+ soundActions: soundActions,
265
+ emitEvent: emitEvent
266
+ });
345
267
 
346
268
  var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
347
269
  required: !isBranched,
package/dist/components/dialog-component/components/DialogComponent.js CHANGED
@@ -25,6 +25,8 @@ var _helpers = require("../../../helpers");
25
25
 
26
26
  var _deviceDetection = require("../../../helpers/deviceDetection");
27
27
 
28
+ var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
29
+
28
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
31
 
30
32
  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); }
@@ -39,10 +41,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
39
41
 
40
42
  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; }
41
43
 
42
- 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); } }
43
-
44
- 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); }); }; }
45
-
46
44
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
47
45
 
48
46
  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."); }
@@ -63,7 +61,7 @@ var maxCharacterToSwitch = 70;
63
61
  raycast.firstHitOnly = true;
64
62
 
65
63
  var DialogComponent = function DialogComponent(_ref) {
66
- var _currentLine$audio3, _currentLine$audio4;
64
+ var _currentLine$audio;
67
65
 
68
66
  var emitEvent = _ref.emitEvent,
69
67
  lines = _ref.lines,
@@ -110,11 +108,6 @@ var DialogComponent = function DialogComponent(_ref) {
110
108
  return new _GLTFLoader.GLTFLoader();
111
109
  }, []);
112
110
  var defaultCamera = (0, _react.useRef)(camera.clone());
113
-
114
- var _soundActions = _slicedToArray(soundActions, 2),
115
- playSound = _soundActions[0],
116
- stop = _soundActions[1];
117
-
118
111
  var messagePosition = (0, _react.useRef)({
119
112
  pos: [0, 0, 0],
120
113
  child: null
@@ -137,68 +130,6 @@ var DialogComponent = function DialogComponent(_ref) {
137
130
  }, [emitEvent]);
138
131
  var isVoiceOver = voiceOver || currentLine.type === 'conversationalNarration';
139
132
  var isDecision = decision || currentLine.type === 'conversationalDecision';
140
- var getVoice = (0, _react.useCallback)(function (_ref2) {
141
- var id = _ref2.id,
142
- _ref2$type = _ref2.type,
143
- type = _ref2$type === void 0 ? 'base' : _ref2$type;
144
- var usedVoices = translate('usedVoices');
145
- var gameChars = translate('gameCharacters');
146
-
147
- if (type === 'base') {
148
- return usedVoices === null || usedVoices === void 0 ? void 0 : usedVoices[id];
149
- }
150
-
151
- if (type === 'character') {
152
- var _gameChars$id;
153
-
154
- return gameChars === null || gameChars === void 0 ? void 0 : (_gameChars$id = gameChars[id]) === null || _gameChars$id === void 0 ? void 0 : _gameChars$id.voiceId;
155
- }
156
-
157
- return null;
158
- }, [translate]);
159
- var playSpeech = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
160
- var payload, url;
161
- return regeneratorRuntime.wrap(function _callee$(_context) {
162
- while (1) {
163
- switch (_context.prev = _context.next) {
164
- case 0:
165
- if (!currentLine.voice.id) {
166
- _context.next = 7;
167
- break;
168
- }
169
-
170
- payload = {
171
- voiceId: getVoice(currentLine.voice),
172
- text: currentMessage.text
173
- };
174
-
175
- if (!(payload.voiceId && payload.text)) {
176
- _context.next = 7;
177
- break;
178
- }
179
-
180
- _context.next = 5;
181
- return emitEvent({
182
- type: 'getSpeech',
183
- payload: payload
184
- });
185
-
186
- case 5:
187
- url = _context.sent;
188
- playSound(url, 'tts');
189
-
190
- case 7:
191
- return _context.abrupt("return", function () {
192
- stop('tts');
193
- });
194
-
195
- case 8:
196
- case "end":
197
- return _context.stop();
198
- }
199
- }
200
- }, _callee);
201
- })), [currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice, getVoice, currentMessage.text, playSound, emitEvent, stop]);
202
133
  var getCurrentVisible = (0, _react.useCallback)(function (uid) {
203
134
  var object;
204
135
  scene.traverseVisible(function (node) {
@@ -490,26 +421,14 @@ var DialogComponent = function DialogComponent(_ref) {
490
421
  }
491
422
  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver]); // Sound logic
492
423
 
493
- (0, _react.useEffect)(function () {
494
- var _currentLine$audio;
495
-
496
- if ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'voice' && !lastSet.current) {
497
- playSpeech();
498
- } else if (currentLine !== null && currentLine !== void 0 && (_currentLine$audio = currentLine.audio) !== null && _currentLine$audio !== void 0 && _currentLine$audio.url) {
499
- var _currentLine$audio2;
500
-
501
- playSound(currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio2 = currentLine.audio) === null || _currentLine$audio2 === void 0 ? void 0 : _currentLine$audio2.url, 'tts');
502
- }
503
-
504
- return function () {
505
- stop('tts');
506
- };
507
- }, [currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio3 = currentLine.audio) === null || _currentLine$audio3 === void 0 ? void 0 : _currentLine$audio3.url, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentMessage, lines, playSound, playSpeech, stop]);
508
- (0, _react.useEffect)(function () {
509
- return function () {
510
- stop('tts');
511
- };
512
- }, [stop]); // Autoplay logic
424
+ (0, _useEkho.default)({
425
+ audioType: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType,
426
+ voice: currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice,
427
+ text: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text,
428
+ audio: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio,
429
+ soundActions: soundActions,
430
+ emitEvent: emitEvent
431
+ }); // Autoplay logic
513
432
 
514
433
  (0, _react.useEffect)(function () {
515
434
  var timeout;
@@ -533,7 +452,7 @@ var DialogComponent = function DialogComponent(_ref) {
533
452
  return function () {
534
453
  if (timeout) clearTimeout(timeout);
535
454
  };
536
- }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio4 = currentLine.audio) === null || _currentLine$audio4 === void 0 ? void 0 : _currentLine$audio4.url]); // Positioning logic
455
+ }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio = currentLine.audio) === null || _currentLine$audio === void 0 ? void 0 : _currentLine$audio.url]); // Positioning logic
537
456
 
538
457
  var checkBubblePosition = (0, _react.useCallback)(function () {
539
458
  if (bubbleRef.current && currentLine.slots) {
@@ -584,8 +503,8 @@ var DialogComponent = function DialogComponent(_ref) {
584
503
  checkBubblePosition();
585
504
  }, [checkBubblePosition]); // Animate Camera
586
505
 
587
- (0, _fiber.useFrame)(function (_ref4, delta) {
588
- var cam = _ref4.camera;
506
+ (0, _fiber.useFrame)(function (_ref2, delta) {
507
+ var cam = _ref2.camera;
589
508
 
590
509
  if (animationStart.current) {
591
510
  var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.current.position.toArray();
package/dist/components/image-click-wrapper-component/components/ImageClickWrapperComponent.js CHANGED
@@ -59,6 +59,8 @@ var ImageReview = function ImageReview() {
59
59
  };
60
60
 
61
61
  var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
62
+ var _info$timerFeedback3, _info$timerFeedback4;
63
+
62
64
  // Common config
63
65
  var soundActions = props.soundActions,
64
66
  emitEvent = props.emitEvent,
@@ -374,18 +376,20 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
374
376
 
375
377
  if (actualDate.current > finalDate.current) {
376
378
  setFeedbackData(function () {
379
+ var _info$timerFeedback, _info$timerFeedback2;
380
+
377
381
  return {
378
382
  show: true,
379
383
  success: false,
380
- text: info.timerFeedback.desc ? info.timerFeedback.desc : '',
381
- rewards: info.timerFeedback.rewards
384
+ text: info !== null && info !== void 0 && (_info$timerFeedback = info.timerFeedback) !== null && _info$timerFeedback !== void 0 && _info$timerFeedback.desc ? info.timerFeedback.desc : '',
385
+ rewards: info === null || info === void 0 ? void 0 : (_info$timerFeedback2 = info.timerFeedback) === null || _info$timerFeedback2 === void 0 ? void 0 : _info$timerFeedback2.rewards
382
386
  };
383
387
  });
384
388
  setTimeExpired(true);
385
389
  clearListenerForActualDate();
386
390
  }
387
391
  }, 0);
388
- }, [clearListenerForActualDate, info.timerFeedback.desc, info.timerFeedback.rewards]);
392
+ }, [clearListenerForActualDate, info === null || info === void 0 ? void 0 : (_info$timerFeedback3 = info.timerFeedback) === null || _info$timerFeedback3 === void 0 ? void 0 : _info$timerFeedback3.desc, info === null || info === void 0 ? void 0 : (_info$timerFeedback4 = info.timerFeedback) === null || _info$timerFeedback4 === void 0 ? void 0 : _info$timerFeedback4.rewards]);
389
393
  var createStartAndEndDate = (0, _react.useCallback)(function () {
390
394
  setDialogForTimer(false);
391
395
  startDate.current = Date.now();
@@ -394,14 +398,14 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
394
398
  }, [listenerForActualDate, timer]);
395
399
  (0, _react.useEffect)(function () {
396
400
  // start automatically the time
397
- if (slideNumber > 0) {
401
+ if (timer && slideNumber > 0) {
398
402
  if (puzzlesAutoCompleted[slideNumber - 1]) {
399
403
  setDialogForTimer(true);
400
404
  } else {
401
405
  createStartAndEndDate();
402
406
  }
403
407
  }
404
- }, [createStartAndEndDate, puzzlesAutoCompleted, slideNumber]);
408
+ }, [createStartAndEndDate, puzzlesAutoCompleted, slideNumber, timer]);
405
409
  return /*#__PURE__*/_react.default.createElement("div", {
406
410
  className: className
407
411
  }, feedbackData.show ? /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
package/dist/helpers/useEkho.js CHANGED
@@ -41,11 +41,10 @@ var useEkho = function useEkho(_ref) {
41
41
  isMounted = _useState2[0],
42
42
  setIsMounted = _useState2[1];
43
43
 
44
- var _useState3 = (0, _react.useState)(false),
45
- _useState4 = _slicedToArray(_useState3, 2),
46
- isPlayed = _useState4[0],
47
- setIsPlayed = _useState4[1];
48
-
44
+ var currentPlaying = (0, _react.useRef)({
45
+ url: '',
46
+ cc: 'tts'
47
+ });
49
48
  var translate = (0, _react.useCallback)(function (id) {
50
49
  return emitEvent({
51
50
  type: 'translate',
@@ -79,6 +78,19 @@ var useEkho = function useEkho(_ref) {
79
78
 
80
79
  return null;
81
80
  }, [translate]);
81
+ var setCurrentPlaying = (0, _react.useCallback)(function (url) {
82
+ var cc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'tts';
83
+
84
+ if (currentPlaying.current.url === url) {
85
+ return;
86
+ }
87
+
88
+ currentPlaying.current = {
89
+ url: url,
90
+ cc: cc
91
+ };
92
+ playSound(url, cc);
93
+ }, [playSound]);
82
94
  var playSpeech = (0, _react.useCallback)( /*#__PURE__*/function () {
83
95
  var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(payload) {
84
96
  var url;
@@ -87,7 +99,7 @@ var useEkho = function useEkho(_ref) {
87
99
  switch (_context.prev = _context.next) {
88
100
  case 0:
89
101
  if (!(payload.voiceId && payload.text)) {
90
- _context.next = 6;
102
+ _context.next = 5;
91
103
  break;
92
104
  }
93
105
 
@@ -99,10 +111,9 @@ var useEkho = function useEkho(_ref) {
99
111
 
100
112
  case 3:
101
113
  url = _context.sent;
102
- playSound(url, 'tts');
103
- setIsPlayed(true);
114
+ setCurrentPlaying(url, 'tts');
104
115
 
105
- case 6:
116
+ case 5:
106
117
  case "end":
107
118
  return _context.stop();
108
119
  }
@@ -113,9 +124,16 @@ var useEkho = function useEkho(_ref) {
113
124
  return function (_x) {
114
125
  return _ref3.apply(this, arguments);
115
126
  };
116
- }(), [emitEvent, playSound]);
127
+ }(), [emitEvent, setCurrentPlaying]);
117
128
  (0, _react.useEffect)(function () {
118
- if (isMounted && !isPlayed) {
129
+ var noAudio = !audio && !voice;
130
+
131
+ if (currentPlaying.current.url && noAudio) {
132
+ stop(currentPlaying.current.cc);
133
+ }
134
+ }, [stop, audio, voice]);
135
+ (0, _react.useEffect)(function () {
136
+ if (isMounted) {
119
137
  if (audioType === 'voice' && voice !== null && voice !== void 0 && voice.id) {
120
138
  var voiceId = getVoice(voice);
121
139
  playSpeech({
@@ -123,14 +141,10 @@ var useEkho = function useEkho(_ref) {
123
141
  text: text
124
142
  });
125
143
  } else if (audioType === 'file' || !audioType && audio) {
126
- playSound(audio === null || audio === void 0 ? void 0 : audio.url);
144
+ setCurrentPlaying(audio === null || audio === void 0 ? void 0 : audio.url);
127
145
  }
128
146
  }
129
-
130
- return function () {
131
- stop();
132
- };
133
- }, [getVoice, playSpeech, isMounted, playSound, stop, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, isPlayed]);
147
+ }, [getVoice, playSpeech, isMounted, playSound, stop, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying]);
134
148
  };
135
149
 
136
150
  var _default = useEkho;
package/package.json CHANGED
@@ -1,111 +1,111 @@
1
- {
2
- "name": "@gamelearn/arcade-components",
3
- "author": "Gamelearn",
4
- "license": "unlicense",
5
- "version": "1.10.0",
6
- "main": "dist/index.js",
7
- "files": [
8
- "dist",
9
- "README.md"
10
- ],
11
- "repository": {
12
- "type": "git",
13
- "url": "https://github.com/gamelearn/arcade-components"
14
- },
15
- "dependencies": {
16
- "@gamelearn/arcade-styles": "0.10.0",
17
- "@gamelearn/arcade-three-core": "1.1.10",
18
- "@react-three/drei": "^7.20.0",
19
- "@react-three/fiber": "^7.0.17",
20
- "@testing-library/jest-dom": "5.11.4",
21
- "@testing-library/react": "11.1.0",
22
- "@testing-library/user-event": "13.5.0",
23
- "global": "^4.4.0",
24
- "hls.js": "0.12.4",
25
- "html-react-parser": "^1.4.0",
26
- "interactjs": "^1.10.11",
27
- "konva": "^7.2.5",
28
- "prop-types": "15.7.2",
29
- "react-konva": "^17.0.2-0",
30
- "react-konva-utils": "^0.2.0",
31
- "react-pdf": "5.2.0",
32
- "react-promise-suspense": "0.3.3",
33
- "react-typist": "^2.0.5",
34
- "three": "0.132.2",
35
- "web-vitals": "0.2.4"
36
- },
37
- "scripts": {
38
- "start": "npm run storybook",
39
- "clean": "rimraf dist",
40
- "watch": "npx nodemon -e js --ignore dist --exec \"yarn compile && yalc push --changed\"",
41
- "compile": "npm run clean && cross-env NODE_ENV=production babel src -d dist --ignore src/**/*.stories.js,src/**/*.test.js,src/setupTests.js",
42
- "test": "react-scripts test",
43
- "eject": "react-scripts eject",
44
- "storybook": "start-storybook -p 6006 -s public",
45
- "build-storybook": "build-storybook -o build",
46
- "generate": "plop",
47
- "lint": "npx eslint src --ext js,json",
48
- "lint:fix": "npx eslint src --ext js,json --fix",
49
- "lint:quiet": "npx eslint src --ext js,json --quiet",
50
- "publish-hotfix": "yarn compile && npm publish && npm run version-tag",
51
- "version-tag": "P_VER=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$P_VER && git push origin v$P_VER"
52
- },
53
- "browserslist": {
54
- "production": [
55
- ">0.2%",
56
- "not dead",
57
- "not op_mini all"
58
- ],
59
- "development": [
60
- "last 1 chrome version",
61
- "last 1 firefox version",
62
- "last 1 safari version"
63
- ]
64
- },
65
- "devDependencies": {
66
- "@babel/cli": "7.12.10",
67
- "@babel/eslint-parser": "^7.15.8",
68
- "@babel/preset-env": "7.12.11",
69
- "@babel/preset-react": "7.12.10",
70
- "@gamelearn/version": "^1.3.1",
71
- "@react-three/test-renderer": "6.0.6",
72
- "@storybook/addon-actions": "6.1.11",
73
- "@storybook/addon-essentials": "6.1.11",
74
- "@storybook/addon-links": "6.1.11",
75
- "@storybook/addons": "^6.3.8",
76
- "@storybook/node-logger": "6.1.11",
77
- "@storybook/preset-create-react-app": "3.1.5",
78
- "@storybook/react": "6.1.11",
79
- "@storybook/theming": "^6.3.8",
80
- "babel-loader": "8.2.2",
81
- "cross-env": "7.0.3",
82
- "eslint-config-airbnb": "^18.2.1",
83
- "eslint-config-prettier": "^8.3.0",
84
- "eslint-plugin-json-format": "^2.0.1",
85
- "eslint-plugin-prettier": "^4.0.0",
86
- "husky": "4.3.0",
87
- "nodemon": "^2.0.13",
88
- "plop": "^2.7.4",
89
- "prettier": "^2.5.0",
90
- "react": "0.0.0-experimental-27659559e",
91
- "react-dom": "0.0.0-experimental-27659559e",
92
- "react-scripts": "4.0.1",
93
- "rimraf": "3.0.2"
94
- },
95
- "jest": {
96
- "transformIgnorePatterns": [
97
- "node_modules/(?!(three)/)"
98
- ],
99
- "moduleNameMapper": {
100
- "^react-pdf$": "react-pdf/dist/umd/entry.jest",
101
- "^react-konva-utils$": "react-pdf/dist/umd/entry.jest"
102
- }
103
- },
104
- "husky": {
105
- "hooks": {
106
- "prepare-commit-msg": "bash node_modules/@gamelearn/version/scripts/update_version.sh -p hooks.config ${HUSKY_GIT_PARAMS}",
107
- "post-commit": "bash node_modules/@gamelearn/version/scripts/after_version_update.sh -p hooks.config",
108
- "post-merge": "bash node_modules/@gamelearn/version/scripts/after_version_update.sh -p hooks.config"
109
- }
110
- }
111
- }
1
+ {
2
+ "name": "@gamelearn/arcade-components",
3
+ "author": "Gamelearn",
4
+ "license": "unlicense",
5
+ "version": "1.10.1-hotfix-1",
6
+ "main": "dist/index.js",
7
+ "files": [
8
+ "dist",
9
+ "README.md"
10
+ ],
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "https://github.com/gamelearn/arcade-components"
14
+ },
15
+ "dependencies": {
16
+ "@gamelearn/arcade-styles": "0.10.0",
17
+ "@gamelearn/arcade-three-core": "1.1.10",
18
+ "@react-three/drei": "^7.20.0",
19
+ "@react-three/fiber": "^7.0.17",
20
+ "@testing-library/jest-dom": "5.11.4",
21
+ "@testing-library/react": "11.1.0",
22
+ "@testing-library/user-event": "13.5.0",
23
+ "global": "^4.4.0",
24
+ "hls.js": "0.12.4",
25
+ "html-react-parser": "^1.4.0",
26
+ "interactjs": "^1.10.11",
27
+ "konva": "^7.2.5",
28
+ "prop-types": "15.7.2",
29
+ "react-konva": "^17.0.2-0",
30
+ "react-konva-utils": "^0.2.0",
31
+ "react-pdf": "5.2.0",
32
+ "react-promise-suspense": "0.3.3",
33
+ "react-typist": "^2.0.5",
34
+ "three": "0.132.2",
35
+ "web-vitals": "0.2.4"
36
+ },
37
+ "scripts": {
38
+ "start": "npm run storybook",
39
+ "clean": "rimraf dist",
40
+ "watch": "npx nodemon -e js --ignore dist --exec \"yarn compile && yalc push --changed\"",
41
+ "compile": "npm run clean && cross-env NODE_ENV=production babel src -d dist --ignore src/**/*.stories.js,src/**/*.test.js,src/setupTests.js",
42
+ "test": "react-scripts test",
43
+ "eject": "react-scripts eject",
44
+ "storybook": "start-storybook -p 6006 -s public",
45
+ "build-storybook": "build-storybook -o build",
46
+ "generate": "plop",
47
+ "lint": "npx eslint src --ext js,json",
48
+ "lint:fix": "npx eslint src --ext js,json --fix",
49
+ "lint:quiet": "npx eslint src --ext js,json --quiet",
50
+ "publish-hotfix": "yarn compile && npm publish && npm run version-tag",
51
+ "version-tag": "P_VER=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$P_VER && git push origin v$P_VER"
52
+ },
53
+ "browserslist": {
54
+ "production": [
55
+ ">0.2%",
56
+ "not dead",
57
+ "not op_mini all"
58
+ ],
59
+ "development": [
60
+ "last 1 chrome version",
61
+ "last 1 firefox version",
62
+ "last 1 safari version"
63
+ ]
64
+ },
65
+ "devDependencies": {
66
+ "@babel/cli": "7.12.10",
67
+ "@babel/eslint-parser": "^7.15.8",
68
+ "@babel/preset-env": "7.12.11",
69
+ "@babel/preset-react": "7.12.10",
70
+ "@gamelearn/version": "^1.3.1",
71
+ "@react-three/test-renderer": "6.0.6",
72
+ "@storybook/addon-actions": "6.1.11",
73
+ "@storybook/addon-essentials": "6.1.11",
74
+ "@storybook/addon-links": "6.1.11",
75
+ "@storybook/addons": "^6.3.8",
76
+ "@storybook/node-logger": "6.1.11",
77
+ "@storybook/preset-create-react-app": "3.1.5",
78
+ "@storybook/react": "6.1.11",
79
+ "@storybook/theming": "^6.3.8",
80
+ "babel-loader": "8.2.2",
81
+ "cross-env": "7.0.3",
82
+ "eslint-config-airbnb": "^18.2.1",
83
+ "eslint-config-prettier": "^8.3.0",
84
+ "eslint-plugin-json-format": "^2.0.1",
85
+ "eslint-plugin-prettier": "^4.0.0",
86
+ "husky": "4.3.0",
87
+ "nodemon": "^2.0.13",
88
+ "plop": "^2.7.4",
89
+ "prettier": "^2.5.0",
90
+ "react": "0.0.0-experimental-27659559e",
91
+ "react-dom": "0.0.0-experimental-27659559e",
92
+ "react-scripts": "4.0.1",
93
+ "rimraf": "3.0.2"
94
+ },
95
+ "jest": {
96
+ "transformIgnorePatterns": [
97
+ "node_modules/(?!(three)/)"
98
+ ],
99
+ "moduleNameMapper": {
100
+ "^react-pdf$": "react-pdf/dist/umd/entry.jest",
101
+ "^react-konva-utils$": "react-pdf/dist/umd/entry.jest"
102
+ }
103
+ },
104
+ "husky": {
105
+ "hooks": {
106
+ "prepare-commit-msg": "bash node_modules/@gamelearn/version/scripts/update_version.sh -p hooks.config ${HUSKY_GIT_PARAMS}",
107
+ "post-commit": "bash node_modules/@gamelearn/version/scripts/after_version_update.sh -p hooks.config",
108
+ "post-merge": "bash node_modules/@gamelearn/version/scripts/after_version_update.sh -p hooks.config"
109
+ }
110
+ }
111
+ }