@micromag/screen-video 0.3.219 → 0.3.224

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding: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-bottom{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out}.micromag-screen-video-container .micromag-screen-video-bottom>*{margin-bottom:10px}.micromag-screen-video-container .micromag-screen-video-bottom>:last-child{margin-bottom: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-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-unmuteAndPlayButton{display:inline-block;position:relative;padding: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{z-index:1;overflow:hidden}.micromag-screen-video-container .micromag-screen-video-bottom{z-index:2;position:absolute;bottom:0;left:0;width:100%;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out}.micromag-screen-video-container .micromag-screen-video-bottom>*{margin-bottom:10px}.micromag-screen-video-container .micromag-screen-video-bottom>:last-child{margin-bottom: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-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)}

package/es/index.js

@@ -57,9 +57,8 @@ var VideoScreen = function VideoScreen(_ref) {
       background = _ref.background,
       callToAction = _ref.callToAction,
       current = _ref.current,
-      active = _ref.active;
-      _ref.transitions;
-      var spacing = _ref.spacing,
+      active = _ref.active,
+      spacing = _ref.spacing,
       customMediaRef = _ref.mediaRef,
       className = _ref.className;
   var trackScreenMedia = useTrackScreenMedia('video');
@@ -127,9 +126,7 @@ var VideoScreen = function VideoScreen(_ref) {
       setHasPlayed = _useState2[1];
 
   var backgroundPlaying = current && (isView || isEdit);
-  var videoPlaying = current && (isView || isEdit) && playing; // const shouldDisplayPoster =
-  //     isPreview || isCapture || (isView && active && !current && !hasPlayed);
-
+  var videoPlaying = current && (isView || isEdit) && playing;
   var shouldDisplayPoster = isPreview || isCapture;
   useEffect(function () {
     if (!current) {
@@ -183,7 +180,7 @@ var VideoScreen = function VideoScreen(_ref) {
     } else {
       hideControls();
     }
-  }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
+  }, [activityDetected, showControls, hideControls]);
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -238,7 +235,8 @@ var VideoScreen = function VideoScreen(_ref) {
   var _useState7 = useState(hasVideo),
       _useState8 = _slicedToArray(_useState7, 2),
       ready = _useState8[0],
-      setReady = _useState8[1]; // useState(!hasVideo);
+      setReady = _useState8[1];
+
   var finalVideo = useMemo(function () {
     return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
       autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -285,7 +283,23 @@ var VideoScreen = function VideoScreen(_ref) {
       setPlaying(false);
     }
   }, [current, playing, setPlaying]);
-  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
+    "data-screen-ready": isStatic || isCapture || ready
+  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    shouldLoad: mediaShouldLoad,
+    withoutVideo: isPreview
+  }) : null, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "video",
     placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
       className: styles.placeholder
@@ -342,7 +356,7 @@ var VideoScreen = function VideoScreen(_ref) {
     key: "bottom-content",
     className: styles.bottom,
     style: {
-      transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+      transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
       paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingBottom: spacing / 2,
@@ -357,24 +371,7 @@ var VideoScreen = function VideoScreen(_ref) {
     animationDisabled: isPreview,
     focusable: current && isView,
     openWebView: openWebView
-  })) : null) : null];
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
-    "data-screen-ready": isStatic || isCapture || ready
-  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview
-  }) : null, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, items)));
+  })) : null) : null)));
 };
 
 VideoScreen.propTypes = propTypes;

package/lib/index.js

@@ -77,9 +77,8 @@ var VideoScreen = function VideoScreen(_ref) {
       background = _ref.background,
       callToAction = _ref.callToAction,
       current = _ref.current,
-      active = _ref.active;
-      _ref.transitions;
-      var spacing = _ref.spacing,
+      active = _ref.active,
+      spacing = _ref.spacing,
       customMediaRef = _ref.mediaRef,
       className = _ref.className;
   var trackScreenMedia = hooks.useTrackScreenMedia('video');
@@ -147,9 +146,7 @@ var VideoScreen = function VideoScreen(_ref) {
       setHasPlayed = _useState2[1];
 
   var backgroundPlaying = current && (isView || isEdit);
-  var videoPlaying = current && (isView || isEdit) && playing; // const shouldDisplayPoster =
-  //     isPreview || isCapture || (isView && active && !current && !hasPlayed);
-
+  var videoPlaying = current && (isView || isEdit) && playing;
   var shouldDisplayPoster = isPreview || isCapture;
   React.useEffect(function () {
     if (!current) {
@@ -203,7 +200,7 @@ var VideoScreen = function VideoScreen(_ref) {
     } else {
       hideControls();
     }
-  }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
+  }, [activityDetected, showControls, hideControls]);
 
   var _useState3 = React.useState(null),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
@@ -258,7 +255,8 @@ var VideoScreen = function VideoScreen(_ref) {
   var _useState7 = React.useState(hasVideo),
       _useState8 = _slicedToArray__default["default"](_useState7, 2),
       ready = _useState8[0],
-      setReady = _useState8[1]; // useState(!hasVideo);
+      setReady = _useState8[1];
+
   var finalVideo = React.useMemo(function () {
     return hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
       autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -305,7 +303,23 @@ var VideoScreen = function VideoScreen(_ref) {
       setPlaying(false);
     }
   }, [current, playing, setPlaying]);
-  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
+    "data-screen-ready": isStatic || isCapture || ready
+  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    shouldLoad: mediaShouldLoad,
+    withoutVideo: isPreview
+  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "video",
     placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
       className: styles.placeholder
@@ -362,7 +376,7 @@ var VideoScreen = function VideoScreen(_ref) {
     key: "bottom-content",
     className: styles.bottom,
     style: {
-      transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+      transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
       paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingBottom: spacing / 2,
@@ -377,24 +391,7 @@ var VideoScreen = function VideoScreen(_ref) {
     animationDisabled: isPreview,
     focusable: current && isView,
     openWebView: openWebView
-  })) : null) : null];
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
-    "data-screen-ready": isStatic || isCapture || ready
-  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview
-  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.content
-  }, items)));
+  })) : null) : null)));
 };
 
 VideoScreen.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.3.219",
+    "version": "0.3.224",
     "description": "",
     "keywords": [
         "javascript"
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ab36acb620cd3fba5c4e3c0522a299d1d27ee422"
+    "gitHead": "a4c770e486befc690596003e4ff622a113250549"
 }