@micromag/screen-urbania-article 0.3.148 → 0.3.153

package/es/index.js

@@ -10,8 +10,8 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderSubtitle, Empty, PlaceholderTitle, Transitions, PlaceholderImage } from '@micromag/core/components';
-import { useScreenSize, useScreenRenderContext } from '@micromag/core/contexts';
-import { useResizeObserver } from '@micromag/core/hooks';
+import { useScreenSize, useScreenRenderContext, useViewerWebView, useViewerContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
+import { useDimensionObserver } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
 import Container from '@micromag/element-container';
@@ -116,8 +116,6 @@ var propTypes$1 = {
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
   spacing: PropTypes.number,
-  enableInteraction: PropTypes.func,
-  disableInteraction: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$1 = {
@@ -138,8 +136,6 @@ var defaultProps$1 = {
   active: true,
   transitions: null,
   spacing: 20,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
@@ -163,8 +159,6 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
       active = _ref.active,
       transitions = _ref.transitions,
       spacing = _ref.spacing,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = useScreenSize(),
@@ -172,16 +166,35 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
       height = _useScreenSize.height,
       resolution = _useScreenSize.resolution;
 
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
   var _ref2 = background || {},
       _ref2$color = _ref2.color,
       backgroundColor = _ref2$color === void 0 ? null : _ref2$color;
 
-  var _useResizeObserver = useResizeObserver(),
-      contentRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
+  var _useViewerContext = useViewerContext(),
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _usePlaybackContext = usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = usePlaybackMediaRef(current);
+
+  var _useDimensionObserver = useDimensionObserver(),
+      contentRef = _useDimensionObserver.ref,
+      contentRect = _useDimensionObserver.entry.contentRect,
+      contentHeight = _useDimensionObserver.height;
 
   var _ref3 = contentRect || {},
-      contentHeight = _ref3.height,
       contentTop = _ref3.top;
 
   var _useMemo = useMemo(function () {
@@ -204,14 +217,6 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
       _useMemo$imageHeight = _useMemo.imageHeight,
       imageHeight = _useMemo$imageHeight === void 0 ? null : _useMemo$imageHeight;
 
-  var _useScreenRenderConte = useScreenRenderContext(),
-      isView = _useScreenRenderConte.isView,
-      isPreview = _useScreenRenderConte.isPreview,
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isStatic = _useScreenRenderConte.isStatic,
-      isCapture = _useScreenRenderConte.isCapture;
-
   var isVideo = type === 'video';
   var hasOverTitle = isTextFilled(overTitle);
   var hasTitle = isTextFilled(title);
@@ -342,7 +347,9 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef
   }), /*#__PURE__*/React.createElement(Container, {
     className: styles.inner,
     width: width,
@@ -400,26 +407,25 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     shouldLoad: mediaShouldLoad,
     playing: backgroundPlaying
   }) : null), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: spacing,
+      paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
+      paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
+    },
     key: "call-to-action"
-  }, /*#__PURE__*/React.createElement(CallToAction, {
+  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
     className: styles.callToAction,
     buttonClassName: styles.button,
     labelClassName: styles.label,
     arrowClassName: styles.arrow,
-    callToAction: callToAction,
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
     arrow: /*#__PURE__*/React.createElement(Arrow, null),
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction,
     icon: type === 'video' ? /*#__PURE__*/React.createElement(WatchIcon, {
       className: styles.icon
-    }) : null
-  })) : null))));
+    }) : null,
+    openWebView: openWebView
+  }))) : null))));
 };
 
 UrbaniaArticle.propTypes = propTypes$1;

package/lib/index.js

@@ -137,8 +137,6 @@ var propTypes$1 = {
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
   spacing: PropTypes__default["default"].number,
-  enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps$1 = {
@@ -159,8 +157,6 @@ var defaultProps$1 = {
   active: true,
   transitions: null,
   spacing: 20,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
@@ -184,8 +180,6 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
       active = _ref.active,
       transitions = _ref.transitions,
       spacing = _ref.spacing,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = contexts.useScreenSize(),
@@ -193,16 +187,35 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
       height = _useScreenSize.height,
       resolution = _useScreenSize.resolution;
 
+  var _useScreenRenderConte = contexts.useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
   var _ref2 = background || {},
       _ref2$color = _ref2.color,
       backgroundColor = _ref2$color === void 0 ? null : _ref2$color;
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      contentRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
+  var _useViewerWebView = contexts.useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
+  var _useViewerContext = contexts.useViewerContext(),
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _usePlaybackContext = contexts.usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = contexts.usePlaybackMediaRef(current);
+
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      contentRef = _useDimensionObserver.ref,
+      contentRect = _useDimensionObserver.entry.contentRect,
+      contentHeight = _useDimensionObserver.height;
 
   var _ref3 = contentRect || {},
-      contentHeight = _ref3.height,
       contentTop = _ref3.top;
 
   var _useMemo = React.useMemo(function () {
@@ -225,14 +238,6 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
       _useMemo$imageHeight = _useMemo.imageHeight,
       imageHeight = _useMemo$imageHeight === void 0 ? null : _useMemo$imageHeight;
 
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-      isView = _useScreenRenderConte.isView,
-      isPreview = _useScreenRenderConte.isPreview,
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isStatic = _useScreenRenderConte.isStatic,
-      isCapture = _useScreenRenderConte.isCapture;
-
   var isVideo = type === 'video';
   var hasOverTitle = utils.isTextFilled(overTitle);
   var hasTitle = utils.isTextFilled(title);
@@ -363,7 +368,9 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef
   }), /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     className: styles.inner,
     width: width,
@@ -421,26 +428,25 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     shouldLoad: mediaShouldLoad,
     playing: backgroundPlaying
   }) : null), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      paddingTop: spacing,
+      paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
+      paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
+    },
     key: "call-to-action"
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
+  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
     className: styles.callToAction,
     buttonClassName: styles.button,
     labelClassName: styles.label,
     arrowClassName: styles.arrow,
-    callToAction: callToAction,
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
     arrow: /*#__PURE__*/React__default["default"].createElement(Arrow, null),
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction,
     icon: type === 'video' ? /*#__PURE__*/React__default["default"].createElement(WatchIcon, {
       className: styles.icon
-    }) : null
-  })) : null))));
+    }) : null,
+    openWebView: openWebView
+  }))) : null))));
 };
 
 UrbaniaArticle.propTypes = propTypes$1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-article",
-    "version": "0.3.148",
+    "version": "0.3.153",
     "description": "",
     "keywords": [
         "javascript"
@@ -51,19 +51,19 @@
         "@babel/runtime": "^7.13.10",
         "@folklore/fetch": "^0.1.15",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.148",
-        "@micromag/element-background": "^0.3.148",
-        "@micromag/element-call-to-action": "^0.3.148",
-        "@micromag/element-closed-captions": "^0.3.148",
-        "@micromag/element-container": "^0.3.148",
-        "@micromag/element-heading": "^0.3.148",
-        "@micromag/element-image": "^0.3.148",
-        "@micromag/element-media-controls": "^0.3.148",
-        "@micromag/element-text": "^0.3.148",
-        "@micromag/element-urbania-author": "^0.3.148",
-        "@micromag/element-video": "^0.3.148",
-        "@micromag/element-visual": "^0.3.148",
-        "@micromag/transforms": "^0.3.148",
+        "@micromag/core": "^0.3.153",
+        "@micromag/element-background": "^0.3.153",
+        "@micromag/element-call-to-action": "^0.3.153",
+        "@micromag/element-closed-captions": "^0.3.153",
+        "@micromag/element-container": "^0.3.153",
+        "@micromag/element-heading": "^0.3.153",
+        "@micromag/element-image": "^0.3.153",
+        "@micromag/element-media-controls": "^0.3.153",
+        "@micromag/element-text": "^0.3.153",
+        "@micromag/element-urbania-author": "^0.3.153",
+        "@micromag/element-video": "^0.3.153",
+        "@micromag/element-visual": "^0.3.153",
+        "@micromag/transforms": "^0.3.153",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
+    "gitHead": "3832de24bc306639b162f9778b3250ce1d05b2aa"
 }