@micromag/screen-video 0.3.144 → 0.3.147

package/es/index.js

@@ -288,25 +288,31 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [videoUrl, hasVideoUrl, setReady]);
   var onVideoReady = useCallback(function () {
     setReady(true);
-  }, [setReady]); // @todo trying to see if it's a better strategy than using `onSuspended`
-
-  var AUTOPLAY_CHECK_DELAY = 1000; // @todo check if a timeout is needed?
+  }, [setReady]);
+  /**
+   * if video can play, but:
+   * - it's the current screen
+   * - the video doesn't provide visual controls
+   * - the video is set to play automatically
+   * - and it's **not** playing
+   * -> then set up a button that catches a click and plays the video
+   */
 
   var onCanPlay = useCallback(function () {
-    var autoplayCheckTimeout = setTimeout(function () {
-      if (current && autoPlay && !playing) {
-        setAllowManualPlayOnTap(true);
-      }
-    }, AUTOPLAY_CHECK_DELAY);
-    return function () {
-      return clearTimeout(autoplayCheckTimeout);
-    };
-  }, [current, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
+    if (current && !withControls && autoPlay && !playing) {
+      setAllowManualPlayOnTap(true);
+    }
+  }, [current, withControls, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
+  var onForcePlay = useCallback(function (e) {
+    e.stopPropagation();
+    setAllowManualPlayOnTap(false);
+    play();
+  }, [setAllowManualPlayOnTap, play]);
   var visibleControls = !autoPlay && !playing || muted || showMediaControls;
   var items = [allowManualPlayOnTap ? /*#__PURE__*/React.createElement("button", {
     key: "tap-catcher-button",
     type: "button",
-    onTouchStart: play,
+    onClick: onForcePlay,
     className: styles.unmuteAndPlayButton
   }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "video",

package/lib/index.js

@@ -309,25 +309,31 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [videoUrl, hasVideoUrl, setReady]);
   var onVideoReady = React.useCallback(function () {
     setReady(true);
-  }, [setReady]); // @todo trying to see if it's a better strategy than using `onSuspended`
-
-  var AUTOPLAY_CHECK_DELAY = 1000; // @todo check if a timeout is needed?
+  }, [setReady]);
+  /**
+   * if video can play, but:
+   * - it's the current screen
+   * - the video doesn't provide visual controls
+   * - the video is set to play automatically
+   * - and it's **not** playing
+   * -> then set up a button that catches a click and plays the video
+   */
 
   var onCanPlay = React.useCallback(function () {
-    var autoplayCheckTimeout = setTimeout(function () {
-      if (current && autoPlay && !playing) {
-        setAllowManualPlayOnTap(true);
-      }
-    }, AUTOPLAY_CHECK_DELAY);
-    return function () {
-      return clearTimeout(autoplayCheckTimeout);
-    };
-  }, [current, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
+    if (current && !withControls && autoPlay && !playing) {
+      setAllowManualPlayOnTap(true);
+    }
+  }, [current, withControls, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
+  var onForcePlay = React.useCallback(function (e) {
+    e.stopPropagation();
+    setAllowManualPlayOnTap(false);
+    play();
+  }, [setAllowManualPlayOnTap, play]);
   var visibleControls = !autoPlay && !playing || muted || showMediaControls;
   var items = [allowManualPlayOnTap ? /*#__PURE__*/React__default["default"].createElement("button", {
     key: "tap-catcher-button",
     type: "button",
-    onTouchStart: play,
+    onClick: onForcePlay,
     className: styles.unmuteAndPlayButton
   }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "video",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.3.144",
+    "version": "0.3.147",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.144",
-        "@micromag/element-background": "^0.3.144",
-        "@micromag/element-call-to-action": "^0.3.144",
-        "@micromag/element-closed-captions": "^0.3.144",
-        "@micromag/element-container": "^0.3.144",
-        "@micromag/element-image": "^0.3.144",
-        "@micromag/element-media-controls": "^0.3.144",
-        "@micromag/element-video": "^0.3.144",
-        "@micromag/transforms": "^0.3.144",
+        "@micromag/core": "^0.3.147",
+        "@micromag/element-background": "^0.3.147",
+        "@micromag/element-call-to-action": "^0.3.147",
+        "@micromag/element-closed-captions": "^0.3.147",
+        "@micromag/element-container": "^0.3.147",
+        "@micromag/element-image": "^0.3.147",
+        "@micromag/element-media-controls": "^0.3.147",
+        "@micromag/element-video": "^0.3.147",
+        "@micromag/transforms": "^0.3.147",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d0f88b972312c6f728601a828b7ab98fd396dfee"
+    "gitHead": "695a66acc54f4863dc44a98f0471e8233ca10aee"
 }