@micromag/screen-article 0.3.407 → 0.3.410

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-visualContainer{left:0;position:absolute;top:0;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text{margin-top:2.5em}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
+.micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text{margin-top:2.5em}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}

package/es/index.js

@@ -61,7 +61,7 @@ var defaultProps = {
   className: null
 };
 var ArticleScreen = function ArticleScreen(_ref) {
-  var _ref3;
+  var _ref5;
   var image = _ref.image,
     title = _ref.title,
     surtitle = _ref.surtitle,
@@ -114,13 +114,26 @@ var ArticleScreen = function ArticleScreen(_ref) {
   var hasAuthor = isTextFilled(author);
   var hasImage = isImageFilled(image);
   var hasDate = isTextFilled(date);
-  // const hasDate = date !== null && date.length > 0;
   var footerProps = getFooterProps(footer, {
     isView: isView,
     current: current,
     openWebView: openWebView,
     isPreview: isPreview
   });
+  var mediaHeight = useMemo(function () {
+    if (!hasImage) {
+      return 0;
+    }
+    var _ref2 = image || {},
+      _ref2$metadata = _ref2.metadata,
+      metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
+    var _ref3 = metadata || {},
+      _ref3$width = _ref3.width,
+      initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
+      _ref3$height = _ref3.height,
+      initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+    return width * initialHeight / initialWidth;
+  }, [image]);
   var partialDate = hasDate ? date.body || null : null;
   var finalDate = useMemo(function () {
     return partialDate !== null ? intl.formatDate(dayjs(partialDate).toDate(), {
@@ -148,9 +161,11 @@ var ArticleScreen = function ArticleScreen(_ref) {
     // width={width - spacing * 2} // in layout flow
     ,
     width: width
-    // height="auto"
+    // width="100%"
+    ,
+    height: mediaHeight
+    // height="100%"
     ,
-    height: "100%",
     resolution: resolution,
     className: styles.visual
   }) : null));
@@ -234,8 +249,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     scrolledBottom = _useState2[0],
     setScrolledBottom = _useState2[1];
-  var onScrolledBottom = useCallback(function (_ref2) {
-    var initial = _ref2.initial;
+  var onScrolledBottom = useCallback(function (_ref4) {
+    var initial = _ref4.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -245,7 +260,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
+    className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,

package/lib/index.js

@@ -85,7 +85,7 @@ var defaultProps = {
   className: null
 };
 var ArticleScreen = function ArticleScreen(_ref) {
-  var _ref3;
+  var _ref5;
   var image = _ref.image,
     title = _ref.title,
     surtitle = _ref.surtitle,
@@ -138,13 +138,26 @@ var ArticleScreen = function ArticleScreen(_ref) {
   var hasAuthor = utils.isTextFilled(author);
   var hasImage = utils.isImageFilled(image);
   var hasDate = utils.isTextFilled(date);
-  // const hasDate = date !== null && date.length > 0;
   var footerProps = utils.getFooterProps(footer, {
     isView: isView,
     current: current,
     openWebView: openWebView,
     isPreview: isPreview
   });
+  var mediaHeight = React.useMemo(function () {
+    if (!hasImage) {
+      return 0;
+    }
+    var _ref2 = image || {},
+      _ref2$metadata = _ref2.metadata,
+      metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
+    var _ref3 = metadata || {},
+      _ref3$width = _ref3.width,
+      initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
+      _ref3$height = _ref3.height,
+      initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+    return width * initialHeight / initialWidth;
+  }, [image]);
   var partialDate = hasDate ? date.body || null : null;
   var finalDate = React.useMemo(function () {
     return partialDate !== null ? intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
@@ -172,9 +185,11 @@ var ArticleScreen = function ArticleScreen(_ref) {
     // width={width - spacing * 2} // in layout flow
     ,
     width: width
-    // height="auto"
+    // width="100%"
+    ,
+    height: mediaHeight
+    // height="100%"
     ,
-    height: "100%",
     resolution: resolution,
     className: styles.visual
   }) : null));
@@ -258,8 +273,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     scrolledBottom = _useState2[0],
     setScrolledBottom = _useState2[1];
-  var onScrolledBottom = React.useCallback(function (_ref2) {
-    var initial = _ref2.initial;
+  var onScrolledBottom = React.useCallback(function (_ref4) {
+    var initial = _ref4.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -269,7 +284,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
+    className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-article",
-    "version": "0.3.407",
+    "version": "0.3.410",
     "private": false,
     "description": "",
     "keywords": [
@@ -46,18 +46,18 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.407",
-        "@micromag/element-background": "^0.3.407",
-        "@micromag/element-container": "^0.3.407",
-        "@micromag/element-footer": "^0.3.407",
-        "@micromag/element-header": "^0.3.407",
-        "@micromag/element-heading": "^0.3.407",
-        "@micromag/element-layout": "^0.3.407",
-        "@micromag/element-scroll": "^0.3.407",
-        "@micromag/element-stack": "^0.3.407",
-        "@micromag/element-text": "^0.3.407",
-        "@micromag/element-visual": "^0.3.407",
-        "@micromag/transforms": "^0.3.407",
+        "@micromag/core": "^0.3.410",
+        "@micromag/element-background": "^0.3.410",
+        "@micromag/element-container": "^0.3.410",
+        "@micromag/element-footer": "^0.3.410",
+        "@micromag/element-header": "^0.3.410",
+        "@micromag/element-heading": "^0.3.410",
+        "@micromag/element-layout": "^0.3.410",
+        "@micromag/element-scroll": "^0.3.410",
+        "@micromag/element-stack": "^0.3.410",
+        "@micromag/element-text": "^0.3.410",
+        "@micromag/element-visual": "^0.3.410",
+        "@micromag/transforms": "^0.3.410",
         "classnames": "^2.2.6",
         "dayjs": "^1.11.10",
         "lodash": "^4.17.21",
@@ -69,5 +69,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e9b7c1c9e2ff7a79081ba37c828f58e9f7dffa3e"
+    "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
 }