@micromag/screen-urbania-recommendation 0.3.251 → 0.3.262

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-urbania-recommendation-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{position:relative;padding:6px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-recommendation-container{-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{height:100px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:2px solid #000;border-radius:17px;-webkit-box-shadow:0 3px 34px rgba(0,0,0,.43);box-shadow:0 3px 34px rgba(0,0,0,.43);color:#000;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{height:200px;background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;-webkit-animation-delay:.9s;animation-delay:.9s;opacity:0;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{padding:12px 10px 6px;border-bottom:2px solid #000;background-color:#ff4f46;color:#fff;font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category.micromag-screen-urbania-recommendation-noBottomBorder{border-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;background-color:#fff}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-isPlaceholder{margin-left:2px;padding:10px;background-color:#e9e9e9}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:30%;max-width:50%;height:inherit;padding:15px 10px;text-align:center;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer.micromag-screen-urbania-recommendation-rightBorder{border-right:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer strong{white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{color:#ff4f46;font-family:Agrandir,sans-serif;font-size:12px;line-height:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date.micromag-screen-urbania-recommendation-centerDate{text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{min-width:50%;max-width:70%;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer.micromag-screen-urbania-recommendation-leftBorder{margin-right:-2px;margin-left:-2px;border-left:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{padding:15px 20px 11px;font-family:Agrandir Narrow,sans-serif;font-size:20px;font-weight:700;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{line-height:1;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{padding:5px 10px 3px;background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-top:0;margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{padding:10px;background-color:#fff;font-family:Roboto,sans-serif;font-size:12px;text-align:left}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:1em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{-webkit-animation:micromag-screen-urbania-recommendation-roll .9s ease-out;animation:micromag-screen-urbania-recommendation-roll .9s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:-50vh}to{background-position-y:0}}@keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:-50vh}to{background-position-y:0}}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}
+.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-recommendation-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{position:relative;padding:6px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-recommendation-container{-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{height:100px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:2px solid #000;border-radius:17px;-webkit-box-shadow:0 3px 34px rgba(0,0,0,.43);box-shadow:0 3px 34px rgba(0,0,0,.43);color:#000;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{height:200px;background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;-webkit-animation-delay:.9s;animation-delay:.9s;opacity:0;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{padding:12px 10px 6px;border-bottom:2px solid #000;background-color:#ff4f46;color:#fff;font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category.micromag-screen-urbania-recommendation-noBottomBorder{border-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;background-color:#fff}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-isPlaceholder{margin-left:2px;padding:10px;background-color:#e9e9e9}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:30%;max-width:50%;height:inherit;padding:15px 10px;text-align:center;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer.micromag-screen-urbania-recommendation-rightBorder{border-right:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer strong{white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{color:#ff4f46;font-family:Agrandir,sans-serif;font-size:12px;line-height:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date.micromag-screen-urbania-recommendation-centerDate{text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{min-width:50%;max-width:70%;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer.micromag-screen-urbania-recommendation-leftBorder{margin-right:-2px;margin-left:-2px;border-left:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{padding:15px 20px 11px;font-family:Agrandir Narrow,sans-serif;font-size:20px;font-weight:700;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{line-height:1;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{padding:5px 10px 3px;background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-top:0;margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{padding:10px;background-color:#fff;font-family:Roboto,sans-serif;font-size:12px;text-align:left}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:1em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{-webkit-animation:micromag-screen-urbania-recommendation-roll .9s ease-out;animation:micromag-screen-urbania-recommendation-roll .9s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:-50vh}to{background-position-y:0}}@keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:-50vh}to{background-position-y:0}}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}

package/es/index.js

@@ -18,7 +18,7 @@ import Layout, { Spacer } from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 
-var styles = {"container":"micromag-screen-urbania-recommendation-container","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","category":"micromag-screen-urbania-recommendation-category","noBottomBorder":"micromag-screen-urbania-recommendation-noBottomBorder","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","dateTitleRow":"micromag-screen-urbania-recommendation-dateTitleRow","bottomBorder":"micromag-screen-urbania-recommendation-bottomBorder","dateContainer":"micromag-screen-urbania-recommendation-dateContainer","rightBorder":"micromag-screen-urbania-recommendation-rightBorder","date":"micromag-screen-urbania-recommendation-date","centerDate":"micromag-screen-urbania-recommendation-centerDate","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","leftBorder":"micromag-screen-urbania-recommendation-leftBorder","title":"micromag-screen-urbania-recommendation-title","sponsor":"micromag-screen-urbania-recommendation-sponsor","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","background":"micromag-screen-urbania-recommendation-background","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
+var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","category":"micromag-screen-urbania-recommendation-category","noBottomBorder":"micromag-screen-urbania-recommendation-noBottomBorder","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","dateTitleRow":"micromag-screen-urbania-recommendation-dateTitleRow","bottomBorder":"micromag-screen-urbania-recommendation-bottomBorder","dateContainer":"micromag-screen-urbania-recommendation-dateContainer","rightBorder":"micromag-screen-urbania-recommendation-rightBorder","date":"micromag-screen-urbania-recommendation-date","centerDate":"micromag-screen-urbania-recommendation-centerDate","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","leftBorder":"micromag-screen-urbania-recommendation-leftBorder","title":"micromag-screen-urbania-recommendation-title","sponsor":"micromag-screen-urbania-recommendation-sponsor","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
 
 var propTypes = {
   category: PropTypes.headingElement,
@@ -274,19 +274,10 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.isPlaceholder, isPlaceholder), _ref12)]),
     "data-screen-ready": true
-  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: finalBackground,
+  }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    backgroundClassName: finalAnimateBackground ? styles.background : null,
-    mediaRef: mediaRef
-  }) : null, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height
+    className: styles.content
   }, /*#__PURE__*/React.createElement(Scroll, {
     disabled: animationStarted || scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
@@ -296,7 +287,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     className: styles.layout,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, /*#__PURE__*/React.createElement(TransitionsStagger, {
@@ -304,7 +295,19 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     stagger: transitionStagger,
     disabled: transitionDisabled,
     playing: transitionPlaying
-  }, items)))));
+  }, items)))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: finalBackground,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    backgroundClassName: finalAnimateBackground ? styles.background : null,
+    mediaRef: mediaRef,
+    withoutVideo: isPreview,
+    className: styles.background
+  }) : null);
 };
 
 UrbaniaRecommendation.propTypes = propTypes;

package/lib/index.js

@@ -38,7 +38,7 @@ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
 var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 
-var styles = {"container":"micromag-screen-urbania-recommendation-container","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","category":"micromag-screen-urbania-recommendation-category","noBottomBorder":"micromag-screen-urbania-recommendation-noBottomBorder","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","dateTitleRow":"micromag-screen-urbania-recommendation-dateTitleRow","bottomBorder":"micromag-screen-urbania-recommendation-bottomBorder","dateContainer":"micromag-screen-urbania-recommendation-dateContainer","rightBorder":"micromag-screen-urbania-recommendation-rightBorder","date":"micromag-screen-urbania-recommendation-date","centerDate":"micromag-screen-urbania-recommendation-centerDate","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","leftBorder":"micromag-screen-urbania-recommendation-leftBorder","title":"micromag-screen-urbania-recommendation-title","sponsor":"micromag-screen-urbania-recommendation-sponsor","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","background":"micromag-screen-urbania-recommendation-background","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
+var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","category":"micromag-screen-urbania-recommendation-category","noBottomBorder":"micromag-screen-urbania-recommendation-noBottomBorder","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","dateTitleRow":"micromag-screen-urbania-recommendation-dateTitleRow","bottomBorder":"micromag-screen-urbania-recommendation-bottomBorder","dateContainer":"micromag-screen-urbania-recommendation-dateContainer","rightBorder":"micromag-screen-urbania-recommendation-rightBorder","date":"micromag-screen-urbania-recommendation-date","centerDate":"micromag-screen-urbania-recommendation-centerDate","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","leftBorder":"micromag-screen-urbania-recommendation-leftBorder","title":"micromag-screen-urbania-recommendation-title","sponsor":"micromag-screen-urbania-recommendation-sponsor","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
 
 var propTypes = {
   category: core.PropTypes.headingElement,
@@ -294,19 +294,10 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, className, className !== null), _defineProperty__default["default"](_ref12, styles.isPlaceholder, isPlaceholder), _ref12)]),
     "data-screen-ready": true
-  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
-    background: finalBackground,
+  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
     height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    backgroundClassName: finalAnimateBackground ? styles.background : null,
-    mediaRef: mediaRef
-  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
-    width: width,
-    height: height
+    className: styles.content
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
     disabled: animationStarted || scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
@@ -316,7 +307,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     className: styles.layout,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
@@ -324,7 +315,19 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     stagger: transitionStagger,
     disabled: transitionDisabled,
     playing: transitionPlaying
-  }, items)))));
+  }, items)))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+    background: finalBackground,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    backgroundClassName: finalAnimateBackground ? styles.background : null,
+    mediaRef: mediaRef,
+    withoutVideo: isPreview,
+    className: styles.background
+  }) : null);
 };
 
 UrbaniaRecommendation.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-recommendation",
-    "version": "0.3.251",
+    "version": "0.3.262",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.251",
-        "@micromag/element-background": "^0.3.251",
-        "@micromag/element-call-to-action": "^0.3.251",
-        "@micromag/element-container": "^0.3.251",
-        "@micromag/element-heading": "^0.3.251",
-        "@micromag/element-layout": "^0.3.251",
-        "@micromag/element-scroll": "^0.3.251",
-        "@micromag/element-text": "^0.3.251",
-        "@micromag/transforms": "^0.3.251",
+        "@micromag/core": "^0.3.262",
+        "@micromag/element-background": "^0.3.262",
+        "@micromag/element-call-to-action": "^0.3.262",
+        "@micromag/element-container": "^0.3.262",
+        "@micromag/element-heading": "^0.3.262",
+        "@micromag/element-layout": "^0.3.262",
+        "@micromag/element-scroll": "^0.3.262",
+        "@micromag/element-text": "^0.3.262",
+        "@micromag/transforms": "^0.3.262",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
+    "gitHead": "2299eaeb150cfdd14b4da321bf9089ab1e6383c2"
 }