@micromag/screen-video 0.3.143 → 0.3.146

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-video-container .micromag-screen-video-showControlsButton,.micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-callToAction{padding-bottom:5px}.micromag-screen-video-container .micromag-screen-video-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-video-container .micromag-screen-video-bottom.micromag-screen-video-withGradient{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-video-container .micromag-screen-video-controls{position:relative}.micromag-screen-video-container .micromag-screen-video-mediaControls{position:relative;z-index:1;padding:10px 20px 20px;-webkit-transition:z-index .15s linear,opacity .15s linear;-o-transition:z-index .15s linear,opacity .15s linear;transition:z-index .15s linear,opacity .15s linear;opacity:0}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{z-index:3;opacity:1}.micromag-screen-video-container .micromag-screen-video-showControlsButton{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;right:0;bottom:0;left:0;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-bottomSeekBar{-webkit-transition:-webkit-transform .5s ease-out .5s;transition:-webkit-transform .5s ease-out .5s;-o-transition:transform .5s ease-out .5s;transition:transform .5s ease-out .5s;transition:transform .5s ease-out .5s, -webkit-transform .5s ease-out .5s}.micromag-screen-video-bottomSeekBar.micromag-screen-video-isHidden{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}
+.micromag-screen-video-container .micromag-screen-video-showControlsButton,.micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-callToAction{padding-bottom:5px}.micromag-screen-video-container .micromag-screen-video-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-video-container .micromag-screen-video-bottom.micromag-screen-video-withGradient{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-video-container .micromag-screen-video-controls{position:relative}.micromag-screen-video-container .micromag-screen-video-mediaControls{position:relative;z-index:1;padding:10px 20px 20px;-webkit-transition:z-index .15s linear,opacity .15s linear;-o-transition:z-index .15s linear,opacity .15s linear;transition:z-index .15s linear,opacity .15s linear;opacity:0}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{z-index:3;opacity:1}.micromag-screen-video-container .micromag-screen-video-showControlsButton{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;right:0;bottom:0;left:0;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-bottomSeekBar{-webkit-transition:-webkit-transform .5s ease-out .5s;transition:-webkit-transform .5s ease-out .5s;-o-transition:transform .5s ease-out .5s;transition:transform .5s ease-out .5s;transition:transform .5s ease-out .5s, -webkit-transform .5s ease-out .5s}.micromag-screen-video-bottomSeekBar.micromag-screen-video-isHidden{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}

package/es/index.js

@@ -117,7 +117,6 @@ 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;
 
@@ -154,6 +153,11 @@ var VideoScreen = function VideoScreen(_ref) {
       muted = _useState10[0],
       setMuted = _useState10[1];
 
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      allowManualPlayOnTap = _useState12[0],
+      setAllowManualPlayOnTap = _useState12[1];
+
   var onTimeUpdate = useCallback(function (time) {
     setCurrentTime(time);
   }, [duration, setCurrentTime]);
@@ -236,10 +240,10 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState11 = useState(hasVideo),
-      _useState12 = _slicedToArray(_useState11, 2),
-      ready = _useState12[0],
-      setReady = _useState12[1]; // useState(!hasVideo);
+  var _useState13 = useState(hasVideo),
+      _useState14 = _slicedToArray(_useState13, 2),
+      ready = _useState14[0],
+      setReady = _useState14[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -285,11 +289,30 @@ var VideoScreen = function VideoScreen(_ref) {
   var onVideoReady = useCallback(function () {
     setReady(true);
   }, [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 () {
+    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 = [autoPlay && suspended && !playing && !withControls ? /*#__PURE__*/React.createElement("button", {
+  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",
@@ -334,6 +357,7 @@ var VideoScreen = function VideoScreen(_ref) {
     className: styles.video,
     onReady: onVideoReady,
     onPlay: onPlay,
+    onCanPlay: onCanPlay,
     onPause: onPause,
     onTimeUpdate: onTimeUpdate,
     onProgressStep: onProgressStep,

package/lib/index.js

@@ -138,7 +138,6 @@ 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;
 
@@ -175,6 +174,11 @@ var VideoScreen = function VideoScreen(_ref) {
       muted = _useState10[0],
       setMuted = _useState10[1];
 
+  var _useState11 = React.useState(false),
+      _useState12 = _slicedToArray__default["default"](_useState11, 2),
+      allowManualPlayOnTap = _useState12[0],
+      setAllowManualPlayOnTap = _useState12[1];
+
   var onTimeUpdate = React.useCallback(function (time) {
     setCurrentTime(time);
   }, [duration, setCurrentTime]);
@@ -257,10 +261,10 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState11 = React.useState(hasVideo),
-      _useState12 = _slicedToArray__default["default"](_useState11, 2),
-      ready = _useState12[0],
-      setReady = _useState12[1]; // useState(!hasVideo);
+  var _useState13 = React.useState(hasVideo),
+      _useState14 = _slicedToArray__default["default"](_useState13, 2),
+      ready = _useState14[0],
+      setReady = _useState14[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -306,11 +310,30 @@ var VideoScreen = function VideoScreen(_ref) {
   var onVideoReady = React.useCallback(function () {
     setReady(true);
   }, [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 () {
+    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 = [autoPlay && suspended && !playing && !withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
+  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",
@@ -355,6 +378,7 @@ var VideoScreen = function VideoScreen(_ref) {
     className: styles.video,
     onReady: onVideoReady,
     onPlay: onPlay,
+    onCanPlay: onCanPlay,
     onPause: onPause,
     onTimeUpdate: onTimeUpdate,
     onProgressStep: onProgressStep,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.3.143",
+    "version": "0.3.146",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.143",
-        "@micromag/element-background": "^0.3.143",
-        "@micromag/element-call-to-action": "^0.3.143",
-        "@micromag/element-closed-captions": "^0.3.143",
-        "@micromag/element-container": "^0.3.143",
-        "@micromag/element-image": "^0.3.143",
-        "@micromag/element-media-controls": "^0.3.143",
-        "@micromag/element-video": "^0.3.143",
-        "@micromag/transforms": "^0.3.143",
+        "@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",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7a57394e3bda6a87466f32f6eb45df34486a98ad"
+    "gitHead": "161a49be3e6b699576c4e95d5f0b6c7eb276582a"
 }