@gamelearn/arcade-components 1.17.2 → 1.18.0

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

@@ -51,19 +51,24 @@ 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];
@@ -101,13 +106,16 @@ 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;
 
@@ -116,12 +124,13 @@ var ComicComponent = function ComicComponent(_ref) {
       }
     }
   });
+  (0, _react.useEffect)(function () {
+    stopEkho();
+  }, [slideCount, stopEkho]);
   (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)) {
+    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 +140,7 @@ var ComicComponent = function ComicComponent(_ref) {
     return function () {
       stop();
     };
-  }, [automatic, goToNextSlide, slideCount, slides, start, stop]);
+  }, [audioFailed, automatic, goToNextSlide, slideCount, slides, 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,15 +289,16 @@ 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)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
-    voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
+    voice: currentMessage !== null && currentMessage !== void 0 && currentMessage.text ? currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice : null,
     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();
@@ -297,7 +307,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   }); // 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 +317,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];
   }),
@@ -252,6 +257,8 @@ 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') {
@@ -283,6 +290,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);
@@ -442,16 +451,19 @@ 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)({
     audioType: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType,
-    voice: currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice,
+    voice: currentMessage !== null && currentMessage !== void 0 && currentMessage.text ? currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice : null,
     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();
@@ -460,7 +472,7 @@ var DialogComponent = function DialogComponent(_ref) {
   }); // 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 +482,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

@@ -38,6 +38,8 @@ var useEkho = function useEkho(_ref) {
       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 +116,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 +128,22 @@ 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:
+              if (!payload.voiceId) {
+                onError();
+              }
+
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -139,12 +154,17 @@ 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 (audioType === 'voice' && voice !== null && voice !== void 0 && voice.id) {
@@ -153,11 +173,14 @@ var useEkho = function useEkho(_ref) {
           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]);
+  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.0",
   "main": "dist/index.js",
   "files": [
     "dist",