@gamelearn/arcade-components 1.17.2 → 1.18.1

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

@@ -51,29 +51,37 @@ var ComicComponent = function ComicComponent(_ref) {
       automatic = _useState2[0],
       setAutomatic = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      audioFailed = _useState4[0],
+      setAudioFailed = _useState4[1];
+
   var _useTimeout = (0, _useTimeout2.default)(),
       start = _useTimeout.start,
       stop = _useTimeout.stop;
 
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      slideCount = _useState4[0],
-      setCount = _useState4[1];
-
-  var _useState5 = (0, _react.useState)('slide-animation'),
+  var _useState5 = (0, _react.useState)(0),
       _useState6 = _slicedToArray(_useState5, 2),
-      slideTransition = _useState6[0],
-      setTransition = _useState6[1];
+      slideCount = _useState6[0],
+      setCount = _useState6[1];
+
+  var _useState7 = (0, _react.useState)('slide-animation'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      slideTransition = _useState8[0],
+      setTransition = _useState8[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       play = _soundActions[0];
 
+  var slide = slides === null || slides === void 0 ? void 0 : slides[slideCount];
   var close = (0, _react.useCallback)(function () {
     emitEvent({
       type: 'success'
     });
   }, [emitEvent]);
   var goToNextSlide = (0, _react.useCallback)(function () {
+    setAudioFailed(false);
+
     if (slideCount + 1 < slides.length) {
       setTransition('slide-animation');
       setCount(slideCount + 1);
@@ -82,6 +90,8 @@ var ComicComponent = function ComicComponent(_ref) {
     }
   }, [close, slideCount, slides === null || slides === void 0 ? void 0 : slides.length]);
   var goToPreviousSlide = (0, _react.useCallback)(function () {
+    setAudioFailed(false);
+
     if (slideCount - 1 >= 0) {
       setTransition('slide-animation');
       setCount(slideCount - 1);
@@ -101,27 +111,27 @@ var ComicComponent = function ComicComponent(_ref) {
     goToPreviousSlide();
   };
 
-  (0, _useEkho.default)({
+  var stopEkho = (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,
     audio: slides === null || slides === void 0 ? void 0 : (_slides$slideCount4 = slides[slideCount]) === null || _slides$slideCount4 === void 0 ? void 0 : _slides$slideCount4.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
+    onError: function onError() {
+      setAudioFailed(true);
+    },
     onFinish: function onFinish() {
-      var _slides$slideCount5;
-
-      if (automatic && (slides === null || slides === void 0 ? void 0 : (_slides$slideCount5 = slides[slideCount]) === null || _slides$slideCount5 === void 0 ? void 0 : _slides$slideCount5.audioType) !== 'none') {
+      if (automatic) {
         goToNextSlide();
       }
     }
   });
   (0, _react.useEffect)(function () {
-    var slide = slides === null || slides === void 0 ? void 0 : slides[slideCount];
-    var audio = (slide === null || slide === void 0 ? void 0 : slide.audioType) === 'file' && Object.keys(slide.audio || {}).length;
-    var voice = (slide === null || slide === void 0 ? void 0 : slide.audioType) === 'voice' && Object.keys(slide.voice || {}).length;
-
-    if (automatic && ((slide === null || slide === void 0 ? void 0 : slide.audioType) === 'none' || !audio || !voice)) {
+    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;
 
       var time = characterMs * ((slide === null || slide === void 0 ? void 0 : (_slide$vignettes$ = slide.vignettes[0]) === null || _slide$vignettes$ === void 0 ? void 0 : (_slide$vignettes$$tex = _slide$vignettes$.textData) === null || _slide$vignettes$$tex === void 0 ? void 0 : _slide$vignettes$$tex.text.length) || 0);
@@ -131,7 +141,7 @@ var ComicComponent = function ComicComponent(_ref) {
     return function () {
       stop();
     };
-  }, [automatic, goToNextSlide, slideCount, slides, start, stop]);
+  }, [audioFailed, automatic, goToNextSlide, slide === null || slide === void 0 ? void 0 : slide.audioType, slide === null || slide === void 0 ? void 0 : slide.vignettes, start, stop]);
   if (!(slides !== null && slides !== void 0 && slides.length)) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     dir: (0, _LangIsRtl.default)() ? 'rtl' : 'auto',

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

@@ -66,10 +66,15 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       automatic = _useState2[0],
       setAutomatic = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      currentLine = _useState4[0],
-      setCurrentLine = _useState4[1];
+      audioFailed = _useState4[0],
+      setAudioFailed = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentLine = _useState6[0],
+      setCurrentLine = _useState6[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -241,6 +246,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     }
   }, [currentLineData.id, edges, finishConversation, lines]);
   var handleClickNext = (0, _react.useCallback)(function (choice, reset) {
+    setAudioFailed(false);
+
     if (isBranched) {
       if (choice) {
         handleDecisionBranch(choice, reset);
@@ -260,6 +267,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   }, [currentLine, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length]);
 
   var handleClickBack = function handleClickBack() {
+    setAudioFailed(false);
+
     if (isBranched) {
       handleBranchDirection(false);
     } else if (currentLine > 0) {
@@ -280,24 +289,28 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   };
 
   var autoplayCond = automatic && !isDecision;
-  var audio = (currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'file' && Object.keys(currentLine.audio || {}).length;
-  var voice = (currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'voice' && Object.keys(currentLine.voice || {}).length;
-  (0, _useEkho.default)({
+  var stopEkho = (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
     voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
     text: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text,
     audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
+    onError: function onError() {
+      setAudioFailed(true);
+    },
     onFinish: function onFinish() {
       if (autoplayCond && (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) !== 'none') {
         handleClickNext();
       }
     }
-  }); // Autoplay logic
+  });
+  (0, _react.useEffect)(function () {
+    stopEkho();
+  }, [currentLine, stopEkho]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
-    if (autoplayCond && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || !audio || !voice)) {
+    if (autoplayCond && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
       var _currentMessage$text;
 
       var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
@@ -307,7 +320,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     return function () {
       stop();
     };
-  }, [currentMessage, start, stop, handleClickNext, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoplayCond, audio, voice]);
+  }, [currentMessage, start, stop, handleClickNext, currentLineData.audioType, autoplayCond, audioFailed]);
 
   var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
     required: !isBranched,

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

@@ -100,6 +100,11 @@ var DialogComponent = function DialogComponent(_ref) {
       currentMessage = _useState6[0],
       setCurrentMessage = _useState6[1];
 
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      audioFailed = _useState8[0],
+      setAudioFailed = _useState8[1];
+
   var _useThree = (0, _fiber.useThree)(function (state) {
     return [state.camera, state.scene];
   }),
@@ -219,7 +224,9 @@ var DialogComponent = function DialogComponent(_ref) {
   var finishConversation = (0, _react.useCallback)(function () {
     resetAnims();
     lastSet.current = true;
-    setCurrentMessage({});
+    setCurrentMessage({
+      show: false
+    });
     resetCameraView();
     setTimeout(function () {
       changeLine(0);
@@ -244,7 +251,9 @@ var DialogComponent = function DialogComponent(_ref) {
       });
 
       if (destination >= 0) {
-        setCurrentMessage({});
+        setCurrentMessage({
+          show: false
+        });
         changeLine(destination);
       } else {
         finishConversation();
@@ -252,10 +261,14 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [currentLine.id, edges, finishConversation, lines]);
   var backLine = (0, _react.useCallback)(function () {
+    setAudioFailed(false);
+
     if (isBranched) {
       handleBranchDirection(false);
     } else if (lastLine && !(lastLine !== null && lastLine !== void 0 && lastLine.decision) || lastLine.type && !lastLine.type !== 'conversationalDecision') {
-      setCurrentMessage({});
+      setCurrentMessage({
+        show: false
+      });
       changeLine(line - 1);
     }
   }, [handleBranchDirection, isBranched, lastLine, line]);
@@ -275,7 +288,9 @@ var DialogComponent = function DialogComponent(_ref) {
       if ((currentEdge === null || currentEdge === void 0 ? void 0 : currentEdge.fromId) === (currentEdge === null || currentEdge === void 0 ? void 0 : currentEdge.toId)) {
         reset();
       } else {
-        setCurrentMessage({});
+        setCurrentMessage({
+          show: false
+        });
         changeLine(destinationEdge);
       }
     } else {
@@ -283,6 +298,8 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [currentLine.id, edges, finishConversation, lines]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
+    setAudioFailed(false);
+
     if (isBranched) {
       if (choice) {
         handleDecisionBranch(choice, reset);
@@ -290,7 +307,9 @@ var DialogComponent = function DialogComponent(_ref) {
         handleBranchDirection();
       }
     } else if (line < lines.length - 1) {
-      setCurrentMessage({});
+      setCurrentMessage({
+        show: false
+      });
       changeLine(line + 1);
     } else {
       finishConversation();
@@ -442,25 +461,32 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver]);
   var autoPlayCond = automatic && !currentLine.decision;
-  var audio = (currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'file' && Object.keys(currentLine.audio || {}).length;
-  var voice = (currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'voice' && Object.keys(currentLine.voice || {}).length; // Sound logic
+  var audio = Object.keys(currentLine.audio || {}).length;
+  var voice = Object.keys(currentLine.voice || {}).length; // Sound logic
 
-  (0, _useEkho.default)({
+  var stopEkho = (0, _useEkho.default)({
     audioType: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType,
     voice: currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice,
+    started: currentMessage.show,
     text: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text,
     audio: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
+    onError: function onError() {
+      setAudioFailed(true);
+    },
     onFinish: function onFinish() {
       if (autoPlayCond) {
         nextLine();
       }
     }
-  }); // Autoplay logic
+  });
+  (0, _react.useEffect)(function () {
+    stopEkho();
+  }, [line, stopEkho]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
-    if (autoPlayCond && currentMessage.show && ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'none' || !audio || !voice)) {
+    if (autoPlayCond && currentMessage.show && ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'none' || audioFailed)) {
       var _currentMessage$text;
 
       var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
@@ -470,7 +496,7 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stop();
     };
-  }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice]); // Positioning logic
+  }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning logic
 
   var checkBubblePosition = (0, _react.useCallback)(function () {
     if (bubbleRef.current && currentLine.slots) {

package/dist/helpers/useEkho.js

@@ -33,11 +33,15 @@ var useEkho = function useEkho(_ref) {
       audioType = _ref.audioType,
       _ref$loop = _ref.loop,
       loop = _ref$loop === void 0 ? false : _ref$loop,
+      _ref$started = _ref.started,
+      started = _ref$started === void 0 ? true : _ref$started,
       audio = _ref.audio,
       soundActions = _ref.soundActions,
       emitEvent = _ref.emitEvent,
       _ref$onFinish = _ref.onFinish,
       onFinish = _ref$onFinish === void 0 ? noop : _ref$onFinish,
+      _ref$onError = _ref.onError,
+      onError = _ref$onError === void 0 ? noop : _ref$onError,
       _ref$onStart = _ref.onStart,
       onStart = _ref$onStart === void 0 ? noop : _ref$onStart;
 
@@ -114,7 +118,7 @@ var useEkho = function useEkho(_ref) {
           switch (_context.prev = _context.next) {
             case 0:
               if (!(payload.voiceId && payload.text)) {
-                _context.next = 5;
+                _context.next = 7;
                 break;
               }
 
@@ -126,9 +130,20 @@ var useEkho = function useEkho(_ref) {
 
             case 3:
               url = _context.sent;
-              setCurrentPlaying(url);
 
-            case 5:
+              if (!url) {
+                onError();
+              } else {
+                setCurrentPlaying(url);
+              }
+
+              _context.next = 8;
+              break;
+
+            case 7:
+              onError();
+
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -139,25 +154,33 @@ var useEkho = function useEkho(_ref) {
     return function (_x) {
       return _ref3.apply(this, arguments);
     };
-  }(), [emitEvent, setCurrentPlaying]);
-  (0, _react.useEffect)(function () {
-    if (currentPlaying.current.url && noAudio) {
+  }(), [emitEvent, onError, setCurrentPlaying]);
+  var stopCurrentAudio = (0, _react.useCallback)(function () {
+    if (currentPlaying.current.url) {
       stop(currentPlaying.current.cc);
     }
-  }, [noAudio, stop]);
+  }, [stop]);
+  (0, _react.useEffect)(function () {
+    if (noAudio) {
+      stopCurrentAudio();
+    }
+  }, [noAudio, stopCurrentAudio]);
   (0, _react.useEffect)(function () {
-    if (isMounted) {
+    if (isMounted && started) {
       if (audioType === 'voice' && voice !== null && voice !== void 0 && voice.id) {
         var voiceId = getVoice(voice);
         playSpeech({
           voiceId: voiceId,
           text: text
         });
-      } else if (audioType === 'file' || !audioType && audio) {
+      } else if ((audioType === 'file' || !audioType) && audio) {
         setCurrentPlaying(audio === null || audio === void 0 ? void 0 : audio.url);
+      } else {
+        onError();
       }
     }
-  }, [getVoice, playSpeech, isMounted, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying]);
+  }, [getVoice, playSpeech, isMounted, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying, onError, started]);
+  return stopCurrentAudio;
 };
 
 var _default = useEkho;

package/package.json

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