@micromag/screen-video 0.3.134 → 0.3.138

package/es/index.js

@@ -117,6 +117,7 @@ var VideoScreen = function VideoScreen(_ref) {
       seek = _ref3.seek,
       play = _ref3.play,
       pause = _ref3.pause,
+      suspended = _ref3.suspended,
       _ref3$mediaRef = _ref3.mediaRef,
       apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
 
@@ -287,19 +288,26 @@ var VideoScreen = function VideoScreen(_ref) {
     setReady(!hasVideoUrl);
   }, [videoUrl, hasVideoUrl, setReady]);
   var onVideoReady = useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-  useEffect(function () {
-    var checkPlayStatus = setTimeout(function () {
-      if (current && ready && autoPlay && !playing && apiMediaRef) {
-        setShouldCatchFirstTapToPlay(true);
-      }
-    }, 200); // @todo?
+    setReady(true); // @todo the battery-saving play button issue
 
-    return clearTimeout(checkPlayStatus);
-  }, [current, ready, autoPlay, playing, setShouldCatchFirstTapToPlay]);
+    if (autoPlay && suspended) {
+      setShouldCatchFirstTapToPlay(true);
+    }
+  }, [setReady, autoPlay, suspended, setShouldCatchFirstTapToPlay]);
+  var onSuspended = useCallback(function () {
+    if (autoPlay && suspended) {
+      setShouldCatchFirstTapToPlay(true);
+    }
+  }, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
   var visibleControls = !autoPlay && !playing || muted || showMediaControls;
-  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
+  var items = [shouldCatchFirstTapToPlay && suspended ? /*#__PURE__*/React.createElement("button", {
+    key: "tap-catcher-button",
+    type: "button",
+    onTouchStart: function onTouchStart() {
+      return play();
+    },
+    className: styles.unmuteAndPlayButton
+  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "video",
     placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
       className: styles.placeholder
@@ -348,15 +356,11 @@ var VideoScreen = function VideoScreen(_ref) {
     onDurationChanged: onDurationChanged,
     onSeeked: onSeeked,
     onEnded: onEnded,
+    onSuspended: onSuspended,
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView,
     shouldLoad: mediaShouldLoad
-  }))) : null), shouldCatchFirstTapToPlay ? /*#__PURE__*/React.createElement("button", {
-    key: "tap-catcher-button",
-    type: "button",
-    onTouchStart: play,
-    className: styles.unmuteAndPlayButton
-  }) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
+  }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
   }, /*#__PURE__*/React.createElement(Transitions, {

package/lib/index.js

@@ -138,6 +138,7 @@ var VideoScreen = function VideoScreen(_ref) {
       seek = _ref3.seek,
       play = _ref3.play,
       pause = _ref3.pause,
+      suspended = _ref3.suspended,
       _ref3$mediaRef = _ref3.mediaRef,
       apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
 
@@ -308,19 +309,26 @@ var VideoScreen = function VideoScreen(_ref) {
     setReady(!hasVideoUrl);
   }, [videoUrl, hasVideoUrl, setReady]);
   var onVideoReady = React.useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-  React.useEffect(function () {
-    var checkPlayStatus = setTimeout(function () {
-      if (current && ready && autoPlay && !playing && apiMediaRef) {
-        setShouldCatchFirstTapToPlay(true);
-      }
-    }, 200); // @todo?
+    setReady(true); // @todo the battery-saving play button issue
 
-    return clearTimeout(checkPlayStatus);
-  }, [current, ready, autoPlay, playing, setShouldCatchFirstTapToPlay]);
+    if (autoPlay && suspended) {
+      setShouldCatchFirstTapToPlay(true);
+    }
+  }, [setReady, autoPlay, suspended, setShouldCatchFirstTapToPlay]);
+  var onSuspended = React.useCallback(function () {
+    if (autoPlay && suspended) {
+      setShouldCatchFirstTapToPlay(true);
+    }
+  }, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
   var visibleControls = !autoPlay && !playing || muted || showMediaControls;
-  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  var items = [shouldCatchFirstTapToPlay && suspended ? /*#__PURE__*/React__default["default"].createElement("button", {
+    key: "tap-catcher-button",
+    type: "button",
+    onTouchStart: function onTouchStart() {
+      return play();
+    },
+    className: styles.unmuteAndPlayButton
+  }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "video",
     placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
       className: styles.placeholder
@@ -369,15 +377,11 @@ var VideoScreen = function VideoScreen(_ref) {
     onDurationChanged: onDurationChanged,
     onSeeked: onSeeked,
     onEnded: onEnded,
+    onSuspended: onSuspended,
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView,
     shouldLoad: mediaShouldLoad
-  }))) : null), shouldCatchFirstTapToPlay ? /*#__PURE__*/React__default["default"].createElement("button", {
-    key: "tap-catcher-button",
-    type: "button",
-    onTouchStart: play,
-    className: styles.unmuteAndPlayButton
-  }) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
   }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {

package/package.json

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