@gamelearn/arcade-components 2.0.2 → 2.1.0

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

@@ -59,7 +59,7 @@ var characterMs = 75;
 var minMs = 1400;
 
 var ConversationProViewer = function ConversationProViewer(_ref) {
-  var _background$img, _currentLineData$slot;
+  var _background$img, _currentLineData$slot3, _currentMessage$text;
 
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
@@ -110,12 +110,12 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   var backgroundImage = (background === null || background === void 0 ? void 0 : (_background$img = background.img) === null || _background$img === void 0 ? void 0 : _background$img.url) || null;
   var currentLineData = lines[currentLine];
+  var voiceOver = currentLineData.voiceOver,
+      decision = currentLineData.decision;
   var voiceOverSlots = [];
   var isBranched = !!edges;
   var isVoiceOver = voiceOver || currentLineData.type === 'conversationalNarration';
   var isDecision = decision || currentLineData.type === 'conversationalDecision';
-  var voiceOver = currentLineData.voiceOver,
-      decision = currentLineData.decision;
   var isFlex = currentLineData.flex;
 
   var _useState13 = (0, _react.useState)([]),
@@ -154,11 +154,13 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     });
   }, [emitEvent]);
   var getCurrentMessage = (0, _react.useCallback)(function () {
+    var _currentLineData$slot, _currentLineData$slot2;
+
     if (isVoiceOver) {
       return currentLineData;
     }
 
-    var currentMessage = currentLineData.slots.find(function (slot) {
+    var currentMessage = currentLineData === null || currentLineData === void 0 ? void 0 : (_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.find(function (slot) {
       return slot.uid && slot.talking;
     });
 
@@ -167,7 +169,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     } // Old conversational schema
 
 
-    return currentLineData.slots.find(function (slot) {
+    return currentLineData === null || currentLineData === void 0 ? void 0 : (_currentLineData$slot2 = currentLineData.slots) === null || _currentLineData$slot2 === void 0 ? void 0 : _currentLineData$slot2.find(function (slot) {
       return slot.uid && slot.text;
     });
   }, [currentLineData, isVoiceOver]);
@@ -186,9 +188,10 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   var leftWithSlots = lines.slice(0, currentLine + 1).reverse().find(function (line) {
     return line.slots;
   });
-  var hasCharacters = !isDecision && ((_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.filter(function (slot) {
+  var hasCharacters = !isDecision && ((_currentLineData$slot3 = currentLineData.slots) === null || _currentLineData$slot3 === void 0 ? void 0 : _currentLineData$slot3.filter(function (slot) {
     return slot.uid;
   }).length);
+  var autoPlayTime = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
   var currentSlots = [];
 
   if (currentLineData.slots) {
@@ -410,26 +413,32 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   (0, _react.useEffect)(function () {
     var _currentMessage$emoti2;
 
-    if ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' && !(currentMessage !== null && currentMessage !== void 0 && (_currentMessage$emoti2 = currentMessage.emotion) !== null && _currentMessage$emoti2 !== void 0 && _currentMessage$emoti2.includes('think'))) {
+    var timeout;
+
+    if (((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && !(currentMessage !== null && currentMessage !== void 0 && (_currentMessage$emoti2 = currentMessage.emotion) !== null && _currentMessage$emoti2 !== void 0 && _currentMessage$emoti2.includes('think'))) {
       setTTsStart(true);
+      timeout = setTimeout(function () {
+        setTTsStart(false);
+      }, autoPlayTime < minMs ? minMs : autoPlayTime);
     }
-  }, [currentLineData, currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.emotion]); // Autoplay logic
+
+    return function () {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [audioFailed, currentLineData, currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.emotion, autoPlayTime]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     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); // if it's not last node
-
+      // if it's not last node
       if (!isEndNode()) {
-        start(handleClickNext, time < minMs ? minMs : time);
+        start(handleClickNext, autoPlayTime < minMs ? minMs : autoPlayTime);
       }
     }
 
     return function () {
       stop();
     };
-  }, [currentMessage, start, stop, handleClickNext, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoplayCond, audioFailed, lines, isEndNode]); // Calculate start node
+  }, [currentMessage, start, stop, handleClickNext, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoplayCond, audioFailed, lines, isEndNode, autoPlayTime]); // Calculate start node
 
   (0, _react.useEffect)(function () {
     if (isBranched && !mounted) {

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

@@ -212,23 +212,22 @@ var DialogComponent = function DialogComponent(_ref) {
     var lastEdge = edges.find(function (edge) {
       return edge.fromId === lastNodeId;
     });
-    var lastLine = lines.find(function (line) {
-      return line.id === lastEdge.fromId;
+    var lastL = lines.find(function (l) {
+      return l.id === lastEdge.fromId;
     });
-    return lastLine;
+    return lastL;
   }, [edges, lines, lastNodeId]);
   var previousLineWasDecision = (0, _react.useCallback)(function () {
     if (isBranched) {
       // if we have edges, we need to check if the previous line was a decision
-      var _lastLine = findLastLineBranched();
+      var _lastL = findLastLineBranched();
 
-      return _lastLine === null || _lastLine === void 0 ? void 0 : _lastLine.decision;
-    } else {
-      // if there is no branching, the previous line is the previous one
-      var _lastLine2 = lines[currentLineData - 1] ? lines[currentLineData - 1] : {};
+      return _lastL === null || _lastL === void 0 ? void 0 : _lastL.decision;
+    } // if there is no branching, the previous line is the previous one
 
-      return currentLineData > 0 && (_lastLine2 === null || _lastLine2 === void 0 ? void 0 : _lastLine2.decision);
-    }
+
+    var lastL = lines[currentLineData - 1] ? lines[currentLineData - 1] : {};
+    return currentLineData > 0 && (lastL === null || lastL === void 0 ? void 0 : lastL.decision);
   }, [currentLineData, isBranched, lines, lastNodeId, edges]);
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
     if (!uid) return null;
@@ -304,7 +303,12 @@ var DialogComponent = function DialogComponent(_ref) {
 
   var restTalkingAnimation = function restTalkingAnimation() {
     var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
-    if (!element) return;
+
+    if (!element) {
+      startTalking(false);
+      return;
+    }
+
     var _element$userData = element.userData,
         mixer = _element$userData.mixer,
         defaultAnim = _element$userData.defaultAnim,
@@ -575,10 +579,6 @@ var DialogComponent = function DialogComponent(_ref) {
               element.userData.defaultAnim = action.getClip();
             }
 
-            if ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' && talkingCharacter.emotion !== 'thinkful') {
-              startTalking(true);
-            }
-
             if (talkingCharacter.uid === element.uid) {
               var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
               moveBubble(element, showArrowTop);
@@ -661,13 +661,24 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stopEkho();
     };
-  }, [line, stopEkho]); // Autoplay logic
+  }, [line, stopEkho]);
+  (0, _react.useEffect)(function () {
+    if (((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && currentMessage !== null && currentMessage !== void 0 && currentMessage.show && (talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.emotion) !== 'thinkful') {
+      var _currentMessage$text;
+
+      startTalking(true);
+      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);
+      setTimeout(function () {
+        startTalking(false);
+      }, time < minMs ? minMs : time);
+    }
+  }, [audioFailed, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.emotion, currentMessage]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     if (autoPlayCond && currentMessage.show && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
-      var _currentMessage$text;
+      var _currentMessage$text2;
 
-      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); // if it's not last node
+      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text2 = currentMessage.text) === null || _currentMessage$text2 === void 0 ? void 0 : _currentMessage$text2.length) || 0); // if it's not last node
 
       if (!isEndNode()) {
         start(nextLine, time < minMs ? minMs : time);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.0.3",
+    "@gamelearn/arcade-styles": "2.1.0",
     "@gamelearn/arcade-three-core": "1.17.1",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",