@micromag/screen-conversation 0.3.390 → 0.3.396

package/es/index.js

@@ -176,6 +176,7 @@ var propTypes = {
   // layout: PropTypes.oneOf(['normal']),
   title: PropTypes.headingElement,
   timing: PropTypes$1.oneOf(['instant', 'sequence']),
+  readingSpeed: PropTypes$1.number,
   spacing: PropTypes$1.number,
   background: PropTypes.backgroundElement,
   header: PropTypes.header,
@@ -191,6 +192,7 @@ var defaultProps = {
   // layout: 'normal',
   title: null,
   timing: 'sequence',
+  readingSpeed: 255,
   spacing: 20,
   background: null,
   header: null,
@@ -206,6 +208,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
   var _ref6;
   var title = _ref.title,
     timingMode = _ref.timing,
+    readingSpeed = _ref.readingSpeed,
     spacing = _ref.spacing,
     background = _ref.background,
     header = _ref.header,
@@ -283,25 +286,37 @@ var ConversationScreen = function ConversationScreen(_ref) {
   }, [conversationState, setConversationState]);
 
   // sequence timings
-  var defaultTimingFactor = 40;
   var defaultHesitationDelay = 1000;
+  var imageReadDelay = 5000; // 5 seconds
+  var millisecondsPerWord = 60 * 1000 / readingSpeed;
   var filteredMessages = (messages || []).filter(function (m) {
     return m !== null;
   });
   var timings = filteredMessages.map(function (messageParams, messageI) {
     var _ref3 = messageParams || {},
       _ref3$timing = _ref3.timing,
-      timing = _ref3$timing === void 0 ? null : _ref3$timing,
-      _ref3$message = _ref3.message,
-      message = _ref3$message === void 0 ? null : _ref3$message;
+      timing = _ref3$timing === void 0 ? null : _ref3$timing;
+      _ref3.message;
     if (timing !== null) {
       return timing;
     }
     if (messageI === 0) {
       return 0;
     }
-    var finalTime = defaultTimingFactor * ((message || '').length || 10);
-    return finalTime < 2000 ? finalTime : 2000;
+
+    // the trick here is to estimate "how long it take to read the previous message"
+    // instead of "how long does it take to write this message".
+    var previous = filteredMessages[messageI - 1];
+
+    // counting words: only keep whitespaces and alphanumeric characters, then split of whitespaces
+    var wordCount = previous.message.replace(/[^\w\d\s]/g, '').trim().split(/\s/g).length;
+    var finalTimeMs = wordCount * millisecondsPerWord;
+
+    // if the message includes an image, add some more time to "read" it
+    if (previous.image) {
+      finalTimeMs += imageReadDelay;
+    }
+    return Math.max(finalTimeMs, 2000);
   });
   var hesitationTimings = filteredMessages.map(function () {
     var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -509,6 +524,17 @@ var definition = {
         "value": "Conversation"
       }]
     })
+  }, {
+    name: 'readingSpeed',
+    type: 'number',
+    defaultValue: 255,
+    label: defineMessage({
+      id: "QjbLZ9",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Reading speed (in Words Per Minute)"
+      }]
+    })
   }, {
     name: 'background',
     type: 'background',

package/lib/index.js

@@ -199,6 +199,7 @@ var propTypes = {
   // layout: PropTypes.oneOf(['normal']),
   title: core.PropTypes.headingElement,
   timing: PropTypes__default["default"].oneOf(['instant', 'sequence']),
+  readingSpeed: PropTypes__default["default"].number,
   spacing: PropTypes__default["default"].number,
   background: core.PropTypes.backgroundElement,
   header: core.PropTypes.header,
@@ -214,6 +215,7 @@ var defaultProps = {
   // layout: 'normal',
   title: null,
   timing: 'sequence',
+  readingSpeed: 255,
   spacing: 20,
   background: null,
   header: null,
@@ -229,6 +231,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
   var _ref6;
   var title = _ref.title,
     timingMode = _ref.timing,
+    readingSpeed = _ref.readingSpeed,
     spacing = _ref.spacing,
     background = _ref.background,
     header = _ref.header,
@@ -306,25 +309,37 @@ var ConversationScreen = function ConversationScreen(_ref) {
   }, [conversationState, setConversationState]);
 
   // sequence timings
-  var defaultTimingFactor = 40;
   var defaultHesitationDelay = 1000;
+  var imageReadDelay = 5000; // 5 seconds
+  var millisecondsPerWord = 60 * 1000 / readingSpeed;
   var filteredMessages = (messages || []).filter(function (m) {
     return m !== null;
   });
   var timings = filteredMessages.map(function (messageParams, messageI) {
     var _ref3 = messageParams || {},
       _ref3$timing = _ref3.timing,
-      timing = _ref3$timing === void 0 ? null : _ref3$timing,
-      _ref3$message = _ref3.message,
-      message = _ref3$message === void 0 ? null : _ref3$message;
+      timing = _ref3$timing === void 0 ? null : _ref3$timing;
+      _ref3.message;
     if (timing !== null) {
       return timing;
     }
     if (messageI === 0) {
       return 0;
     }
-    var finalTime = defaultTimingFactor * ((message || '').length || 10);
-    return finalTime < 2000 ? finalTime : 2000;
+
+    // the trick here is to estimate "how long it take to read the previous message"
+    // instead of "how long does it take to write this message".
+    var previous = filteredMessages[messageI - 1];
+
+    // counting words: only keep whitespaces and alphanumeric characters, then split of whitespaces
+    var wordCount = previous.message.replace(/[^\w\d\s]/g, '').trim().split(/\s/g).length;
+    var finalTimeMs = wordCount * millisecondsPerWord;
+
+    // if the message includes an image, add some more time to "read" it
+    if (previous.image) {
+      finalTimeMs += imageReadDelay;
+    }
+    return Math.max(finalTimeMs, 2000);
   });
   var hesitationTimings = filteredMessages.map(function () {
     var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -532,6 +547,17 @@ var definition = {
         "value": "Conversation"
       }]
     })
+  }, {
+    name: 'readingSpeed',
+    type: 'number',
+    defaultValue: 255,
+    label: reactIntl.defineMessage({
+      id: "QjbLZ9",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Reading speed (in Words Per Minute)"
+      }]
+    })
   }, {
     name: 'background',
     type: 'background',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-conversation",
-    "version": "0.3.390",
+    "version": "0.3.396",
     "private": false,
     "description": "",
     "keywords": [
@@ -50,17 +50,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.390",
-        "@micromag/element-background": "^0.3.390",
-        "@micromag/element-container": "^0.3.390",
-        "@micromag/element-footer": "^0.3.390",
-        "@micromag/element-header": "^0.3.390",
-        "@micromag/element-heading": "^0.3.390",
-        "@micromag/element-layout": "^0.3.390",
-        "@micromag/element-scroll": "^0.3.390",
-        "@micromag/element-text": "^0.3.390",
-        "@micromag/element-visual": "^0.3.390",
-        "@micromag/transforms": "^0.3.390",
+        "@micromag/core": "^0.3.396",
+        "@micromag/element-background": "^0.3.396",
+        "@micromag/element-container": "^0.3.396",
+        "@micromag/element-footer": "^0.3.396",
+        "@micromag/element-header": "^0.3.396",
+        "@micromag/element-heading": "^0.3.396",
+        "@micromag/element-layout": "^0.3.396",
+        "@micromag/element-scroll": "^0.3.396",
+        "@micromag/element-text": "^0.3.396",
+        "@micromag/element-visual": "^0.3.396",
+        "@micromag/transforms": "^0.3.396",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -71,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "d310ff6071a34b84d9311f0e02a6862fb836abef"
+    "gitHead": "6f09831a86f03a570096ccc769aa2ecb3bcba693"
 }