@gamelearn/arcade-components 1.22.8 → 1.22.10-hotfix-1

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

@@ -120,7 +120,7 @@ var ComicComponent = function ComicComponent(_ref) {
     goToPreviousSlide();
   };
 
-  var stopEkho = (0, _useEkho.default)({
+  (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,
@@ -137,9 +137,6 @@ var ComicComponent = function ComicComponent(_ref) {
       }
     }
   });
-  (0, _react.useEffect)(function () {
-    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;

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

@@ -61,25 +61,30 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       lodSettings = _ref.lodSettings,
       autoPlay = _ref.autoPlay;
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      started = _useState2[0],
-      setStarted = _useState2[1];
+      mounted = _useState2[0],
+      setMounted = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(!!autoPlay),
+  var _useState3 = (0, _react.useState)(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      automatic = _useState4[0],
-      setAutomatic = _useState4[1];
+      started = _useState4[0],
+      setStarted = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(!!autoPlay),
       _useState6 = _slicedToArray(_useState5, 2),
-      audioFailed = _useState6[0],
-      setAudioFailed = _useState6[1];
+      automatic = _useState6[0],
+      setAutomatic = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(0),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      currentLine = _useState8[0],
-      setCurrentLine = _useState8[1];
+      audioFailed = _useState8[0],
+      setAudioFailed = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      currentLine = _useState10[0],
+      setCurrentLine = _useState10[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -95,10 +100,10 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       decision = currentLineData.decision;
   var isBranched = !!edges;
 
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      previousLineWasDecision = _useState10[0],
-      setPreviousLineWasDecision = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      previousLineWasDecision = _useState12[0],
+      setPreviousLineWasDecision = _useState12[1];
 
   var isVoiceOver = voiceOver || currentLineData.type === 'conversationalNarration';
   var isDecision = decision || currentLineData.type === 'conversationalDecision';
@@ -279,7 +284,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     }
 
     setStarted(true);
-  }, [currentLine, currentLineData, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length]);
+  }, [currentLine, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length]);
 
   var handleClickBack = function handleClickBack() {
     setStarted(false);
@@ -308,7 +313,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   var autoplayCond = automatic && !isDecision;
   var disableBackButton = currentLine === 0 || previousLineWasDecision || currentLine > 0 && (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision);
-  var stopEkho = (0, _useEkho.default)({
+  (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
     voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
     started: started,
@@ -324,10 +329,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         handleClickNext();
       }
     }
-  });
-  (0, _react.useEffect)(function () {
-    stopEkho();
-  }, [currentLine, stopEkho]); // Autoplay logic
+  }); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     if (autoplayCond && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
@@ -340,7 +342,27 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     return function () {
       stop();
     };
-  }, [currentMessage, start, stop, handleClickNext, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoplayCond, audioFailed]);
+  }, [currentMessage, start, stop, handleClickNext, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoplayCond, audioFailed, lines]); // Calculate start node
+
+  (0, _react.useEffect)(function () {
+    if (isBranched && !mounted) {
+      var startNodes = lines.filter(function (node) {
+        return !edges.find(function (edge) {
+          return edge.toId === node.id;
+        });
+      });
+
+      if (startNodes.length) {
+        var initialNode = startNodes[0];
+        var newInitiaIndexlNode = lines.indexOf(initialNode);
+
+        if (newInitiaIndexlNode >= 0) {
+          setMounted(true);
+          setCurrentLine(newInitiaIndexlNode);
+        }
+      }
+    }
+  }, [edges, isBranched, lines, mounted]);
 
   var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
     required: !isBranched,

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

@@ -45,6 +45,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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."); }
@@ -102,8 +110,13 @@ var DialogComponent = function DialogComponent(_ref) {
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      audioFailed = _useState8[0],
-      setAudioFailed = _useState8[1];
+      mounted = _useState8[0],
+      setMounted = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      audioFailed = _useState10[0],
+      setAudioFailed = _useState10[1];
 
   var _useThree = (0, _fiber.useThree)(function (state) {
     return [state.camera, state.scene];
@@ -140,6 +153,20 @@ var DialogComponent = function DialogComponent(_ref) {
       voiceOver = _ref2.voiceOver,
       decision = _ref2.decision;
 
+  var charactersInvolved = (0, _react.useMemo)(function () {
+    return lines.reduce(function (acc, current) {
+      if (current.slots) {
+        var participants = current.slots.filter(function (slot) {
+          return slot.uid;
+        });
+        participants.forEach(function (currentParticipant) {
+          if (!acc.includes(currentParticipant.uid)) acc.push(currentParticipant.uid);
+        });
+      }
+
+      return acc;
+    }, []);
+  }, [lines]);
   var translate = (0, _react.useCallback)(function (id) {
     return emitEvent({
       type: 'translate',
@@ -147,10 +174,10 @@ var DialogComponent = function DialogComponent(_ref) {
     });
   }, [emitEvent]);
 
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      previousLineWasDecision = _useState10[0],
-      setPreviousLineWasDecision = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      previousLineWasDecision = _useState12[0],
+      setPreviousLineWasDecision = _useState12[1];
 
   var isVoiceOver = voiceOver || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalNarration';
   var isDecision = decision || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalDecision';
@@ -179,10 +206,10 @@ var DialogComponent = function DialogComponent(_ref) {
     var _slot$character2;
 
     var onLoadAnim = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
-    var animation = (_slot$character2 = slot.character) === null || _slot$character2 === void 0 ? void 0 : _slot$character2.resource.animations[slot.emotion];
+    var animation = (_slot$character2 = slot.character) === null || _slot$character2 === void 0 ? void 0 : _slot$character2.resource.animations[element.isSeated ? "".concat(slot.emotion, "-seated") : slot.emotion];
     var mixer = element.userData.mixer;
 
-    if (animation && animation.url && !element.isSeated) {
+    if (animation && animation.url) {
       loader.load(animation.url, function (anim) {
         var emotionClip = anim.animations[0];
         var defaultClip = element.userData.defaultAnim;
@@ -201,31 +228,31 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [loader]);
 
-  var executeAnimation = function executeAnimation(element) {
-    var mixer = element.userData.mixer;
-    var startAction = mixer.clipAction(element.userData.currentEmotion.getClip(), element);
-    var defaultAction = mixer.clipAction(element.userData.defaultAnim, element);
+  var executeDefaultAnimation = function executeDefaultAnimation(element) {
+    if (element.userData.mixer && element.userData.currentEmotion) {
+      var mixer = element.userData.mixer;
+      var startAction = mixer.clipAction(element.userData.currentEmotion.getClip(), element);
+      var defaultAction = mixer.clipAction(element.userData.defaultAnim, element);
 
-    if (element.userData.currentEmotion !== defaultAction) {
-      setTimeout(function () {
-        mixer.stopAllAction();
-        (0, _helpers.executeCrossFade)(startAction, defaultAction, crossFadeDuration / Math.floor(Math.random() * 3));
+      if (element.userData.currentEmotion !== defaultAction) {
+        setTimeout(function () {
+          mixer.stopAllAction();
+          (0, _helpers.executeCrossFade)(startAction, defaultAction, crossFadeDuration / Math.floor(Math.random() * 3));
 
-        if (element.userData.currentEmotion) {
-          element.userData.lastEmotion = element.userData.currentEmotion;
-        }
+          if (element.userData.currentEmotion) {
+            element.userData.lastEmotion = element.userData.currentEmotion;
+          }
 
-        element.userData.currentEmotion = defaultAction;
-      }, Math.floor(Math.random() * 3) * 500);
+          element.userData.currentEmotion = defaultAction;
+        }, Math.floor(Math.random() * 3) * 500);
+      }
     }
   }; // Reset currentEmotion to defaultAnim
 
 
   var resetAnims = (0, _react.useCallback)(function () {
     scene.traverseVisible(function (node) {
-      if (node.userData.mixer && node.userData.currentEmotion) {
-        executeAnimation(node);
-      }
+      return executeDefaultAnimation(node);
     });
   }, [scene]);
   var resetCameraView = (0, _react.useCallback)(function () {
@@ -327,7 +354,7 @@ var DialogComponent = function DialogComponent(_ref) {
     } else {
       finishConversation();
     }
-  }, [currentLineData.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
+  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
 
   var manualBackLine = function manualBackLine() {
     setAutomatic(false);
@@ -337,9 +364,29 @@ var DialogComponent = function DialogComponent(_ref) {
   var manualNextLine = function manualNextLine() {
     setAutomatic(false);
     nextLine();
-  }; // Position bubble over talking character/and switch emotions
+  }; // Calculate start node
 
 
+  (0, _react.useEffect)(function () {
+    if (isBranched && !mounted) {
+      var startNodes = lines.filter(function (node) {
+        return !edges.find(function (edge) {
+          return edge.toId === node.id;
+        });
+      });
+
+      if (startNodes.length) {
+        var initialNode = startNodes[0];
+        var newInitiaIndexlNode = lines.indexOf(initialNode);
+
+        if (newInitiaIndexlNode >= 0) {
+          setMounted(true);
+          changeLine(newInitiaIndexlNode);
+        }
+      }
+    }
+  }, [edges, isBranched, lines, mounted]); // Position bubble over talking character/and switch emotions
+
   (0, _react.useEffect)(function () {
     if (isDecision) {
       resetCameraView();
@@ -362,6 +409,19 @@ var DialogComponent = function DialogComponent(_ref) {
       });
       var slottedCharacters = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.filter(function (slot) {
         return slot.uid && !slot.talking;
+      });
+      var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
+        return slot.uid;
+      }) || []), [talkingCharacter.uid]);
+      var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
+        return !currentParticipants.includes(charUid);
+      });
+      notInvolvedParticipants.forEach(function (uid) {
+        var element = getCurrentVisible(uid);
+
+        if (element) {
+          executeDefaultAnimation(element);
+        }
       }); // Check not talking elements emotion
 
       slottedCharacters.forEach(function (slot) {
@@ -395,45 +455,45 @@ var DialogComponent = function DialogComponent(_ref) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
             }
-          });
-
-          if (talkingCharacter.uid === element.uid) {
-            var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
-            var head = element.getObjectByName('Head_M');
-            var target = new _three.Object3D();
-            head.getWorldPosition(target.position);
-            target.applyQuaternion(camera.quaternion);
-            target.translateX(1.25);
-            var distance = camera.position.distanceTo(target.position);
-            var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
-            target.translateY(staticDisplay || showArrowTop ? 0 : 3);
-            messagePosition.current = {
-              pos: target.position.toArray(),
-              child: head,
-              parent: element
-            };
-
-            if (zoomInActor) {
-              animationStart.current = true;
-            } // Ugly timeout to wait for zoom in ( maybe use tween (?))
 
-
-            setTimeout(function () {
-              var _talkingCharacter$cha;
-
-              distance = camera.position.distanceTo(target.position);
-              setCurrentMessage({
-                text: talkingCharacter.text,
-                name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
-                left: true,
-                top: showArrowTop || distance > 70,
-                inScene: true,
-                thinkful: talkingCharacter.emotion === 'thinkful',
-                avatar: '',
-                show: true
-              });
-            }, zoomInActor ? 1200 : 0);
-          }
+            if (talkingCharacter.uid === element.uid) {
+              var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
+              var head = element.getObjectByName('Head_M');
+              var target = new _three.Object3D();
+              head.getWorldPosition(target.position);
+              target.applyQuaternion(camera.quaternion);
+              target.translateX(1.25);
+              var distance = camera.position.distanceTo(target.position);
+              var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
+              target.translateY(staticDisplay || showArrowTop ? 0 : 3);
+              messagePosition.current = {
+                pos: target.position.toArray(),
+                child: head,
+                parent: element
+              };
+
+              if (zoomInActor) {
+                animationStart.current = true;
+              } // Ugly timeout to wait for zoom in ( maybe use tween (?))
+
+
+              setTimeout(function () {
+                var _talkingCharacter$cha;
+
+                distance = camera.position.distanceTo(target.position);
+                setCurrentMessage({
+                  text: talkingCharacter.text,
+                  name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
+                  left: true,
+                  top: showArrowTop || distance > 70,
+                  inScene: true,
+                  thinkful: talkingCharacter.emotion === 'thinkful',
+                  avatar: '',
+                  show: true
+                });
+              }, zoomInActor ? 1200 : 0);
+            }
+          });
         } else {
           var _talkingCharacter$cha2;
 
@@ -456,7 +516,7 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
     }
-  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver]);
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]);
   var autoPlayCond = automatic && !(currentLine !== null && currentLine !== void 0 && currentLine.decision);
   var audio = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio) || {}).length;
   var voice = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice) || {}).length; // Sound logic
@@ -480,6 +540,9 @@ var DialogComponent = function DialogComponent(_ref) {
   });
   (0, _react.useEffect)(function () {
     stopEkho();
+    return function () {
+      stopEkho();
+    };
   }, [line, stopEkho]); // Autoplay logic
 
   (0, _react.useEffect)(function () {

package/dist/helpers/useEkho.js

@@ -7,12 +7,6 @@ exports.default = void 0;
 
 var _react = require("react");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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; }
-
 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); }); }; }
@@ -163,9 +157,10 @@ var useEkho = function useEkho(_ref) {
   }(), [emitEvent, onError, setCurrentPlaying]);
   var stopCurrentAudio = (0, _react.useCallback)(function () {
     if (currentPlaying.current.url) {
-      currentPlaying.current = _objectSpread(_objectSpread({}, currentPlaying.current), {}, {
-        url: ''
-      });
+      currentPlaying.current = {
+        url: '',
+        cc: 'tts'
+      };
       stop(currentPlaying.current.cc);
     }
   }, [stop]);
@@ -176,6 +171,8 @@ var useEkho = function useEkho(_ref) {
   }, [noAudio, stopCurrentAudio]);
   (0, _react.useEffect)(function () {
     if (isMounted && started) {
+      stopCurrentAudio();
+
       if (audioType === 'voice' && voice !== null && voice !== void 0 && voice.id) {
         var voiceId = getVoice(voice);
         playSpeech({
@@ -188,7 +185,7 @@ var useEkho = function useEkho(_ref) {
         onError();
       }
     }
-  }, [getVoice, playSpeech, isMounted, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying, onError, started]);
+  }, [getVoice, playSpeech, isMounted, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying, onError, started, stopCurrentAudio]);
   return stopCurrentAudio;
 };
 

package/package.json

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