@micromag/screen-urbania-recommendation 0.3.370 → 0.3.371

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +27 -26
  3. package/lib/index.js +26 -25
  4. package/package.json +13 -13
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-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-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{padding:10px;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.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{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{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:.5s;animation-delay:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:250px;overflow:hidden}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visual{height:auto;max-height:250px;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{left:0;top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);width:20%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{padding:14px 8px 14px 0;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:.5em}.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-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-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}}
1
+ .micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-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-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{padding:10px;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.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{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{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:.5s;animation-delay:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:250px;overflow:hidden;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{left:0;top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);width:20%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{padding:14px 8px 14px 0;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:.5em}.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-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-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 CHANGED
@@ -7,7 +7,7 @@ import React, { useState, useEffect, useCallback } from 'react';
7
7
  import { PropTypes } from '@micromag/core';
8
8
  import { ScreenElement, PlaceholderText, PlaceholderImage, PlaceholderTitle } from '@micromag/core/components';
9
9
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
10
- import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
10
+ import { useTrackScreenEvent } from '@micromag/core/hooks';
11
11
  import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
12
12
  import Background from '@micromag/element-background';
13
13
  import Container from '@micromag/element-container';
@@ -19,7 +19,7 @@ import Scroll from '@micromag/element-scroll';
19
19
  import Text from '@micromag/element-text';
20
20
  import Visual from '@micromag/element-visual';
21
21
 
22
- 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","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visual":"micromag-screen-urbania-recommendation-visual","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
22
+ 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","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
23
23
 
24
24
  var propTypes = {
25
25
  category: PropTypes.headingElement,
@@ -86,13 +86,6 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
86
86
  var _usePlaybackContext = usePlaybackContext(),
87
87
  muted = _usePlaybackContext.muted;
88
88
  var mediaRef = usePlaybackMediaRef(current);
89
- var _useResizeObserver = useResizeObserver(),
90
- cardRef = _useResizeObserver.ref,
91
- _useResizeObserver$en = _useResizeObserver.entry.contentRect,
92
- cardRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
93
- var _ref2 = cardRect || {},
94
- _ref2$width = _ref2.width,
95
- cardWidth = _ref2$width === void 0 ? 0 : _ref2$width;
96
89
  var _useScreenRenderConte = useScreenRenderContext(),
97
90
  isView = _useScreenRenderConte.isView,
98
91
  isPreview = _useScreenRenderConte.isPreview,
@@ -104,12 +97,16 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
104
97
  _useState2 = _slicedToArray(_useState, 2),
105
98
  animationStarted = _useState2[0],
106
99
  setAnimationStarted = _useState2[1];
107
- var _ref3 = visual || {},
108
- _ref3$image = _ref3.image,
109
- image = _ref3$image === void 0 ? null : _ref3$image,
110
- _ref3$visualLayout = _ref3.visualLayout,
111
- visualLayout = _ref3$visualLayout === void 0 ? null : _ref3$visualLayout; // note: image can be a video
100
+ var _ref2 = visual || {},
101
+ _ref2$image = _ref2.image,
102
+ image = _ref2$image === void 0 ? null : _ref2$image,
103
+ _ref2$visualLayout = _ref2.visualLayout,
104
+ visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
105
+ var _ref3 = image || {},
106
+ _ref3$type = _ref3.type,
107
+ type = _ref3$type === void 0 ? null : _ref3$type;
112
108
  var hasVisual = image !== null;
109
+ var isVideo = type === 'video';
113
110
  var hasCategory = isTextFilled(category);
114
111
  var hasTitle = isTextFilled(title);
115
112
  var hasDate = isTextFilled(date);
@@ -173,7 +170,6 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
173
170
  }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
174
171
  key: "spacer-cta-top"
175
172
  }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
176
- ref: cardRef,
177
173
  className: classNames([styles.textCard, (_ref5 = {}, _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref5, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref5, styles.appear, animationStarted), _ref5)])
178
174
  }, /*#__PURE__*/React.createElement("div", {
179
175
  className: styles.visualContainer
@@ -198,26 +194,31 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
198
194
  }),
199
195
  emptyClassName: classNames([styles.empty, styles.emptyVisual]),
200
196
  isEmpty: !hasVisual
201
- }, hasVisual ?
197
+ }, hasVisual && !isVideo ?
202
198
  /*#__PURE__*/
203
199
  // <div className={styles.visualWrapper}>
204
- React.createElement(Visual
205
- // {...visual}
206
- , {
200
+ React.createElement(Visual, {
207
201
  imageClassName: styles.visual,
208
202
  media: image,
209
- muted: true,
210
- width: cardWidth,
211
- height: 250,
212
- objectFit: {
213
- fit: 'cover'
214
- },
203
+ width: "100%",
215
204
  resolution: resolution,
216
205
  active: active,
217
206
  shouldLoad: mediaShouldLoad
218
207
  }) :
219
208
  // </div>
220
- null)), /*#__PURE__*/React.createElement("div", {
209
+ null, hasVisual && isVideo ? /*#__PURE__*/React.createElement(Visual, {
210
+ media: image,
211
+ width: width * 0.9,
212
+ height: 250,
213
+ resolution: resolution,
214
+ objectFit: {
215
+ fit: 'cover'
216
+ },
217
+ shouldLoad: mediaShouldLoad,
218
+ muted: true,
219
+ withoutVideo: isPreview,
220
+ autoPlay: true
221
+ }) : null)), /*#__PURE__*/React.createElement("div", {
221
222
  className: styles.text
222
223
  }, /*#__PURE__*/React.createElement(ScreenElement, {
223
224
  key: "category",
package/lib/index.js CHANGED
@@ -40,7 +40,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
40
40
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
41
41
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
42
42
 
43
- 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","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visual":"micromag-screen-urbania-recommendation-visual","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
43
+ 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","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
44
44
 
45
45
  var propTypes = {
46
46
  category: core.PropTypes.headingElement,
@@ -107,13 +107,6 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
107
107
  var _usePlaybackContext = contexts.usePlaybackContext(),
108
108
  muted = _usePlaybackContext.muted;
109
109
  var mediaRef = contexts.usePlaybackMediaRef(current);
110
- var _useResizeObserver = hooks.useResizeObserver(),
111
- cardRef = _useResizeObserver.ref,
112
- _useResizeObserver$en = _useResizeObserver.entry.contentRect,
113
- cardRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
114
- var _ref2 = cardRect || {},
115
- _ref2$width = _ref2.width,
116
- cardWidth = _ref2$width === void 0 ? 0 : _ref2$width;
117
110
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
118
111
  isView = _useScreenRenderConte.isView,
119
112
  isPreview = _useScreenRenderConte.isPreview,
@@ -125,12 +118,16 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
125
118
  _useState2 = _slicedToArray__default["default"](_useState, 2),
126
119
  animationStarted = _useState2[0],
127
120
  setAnimationStarted = _useState2[1];
128
- var _ref3 = visual || {},
129
- _ref3$image = _ref3.image,
130
- image = _ref3$image === void 0 ? null : _ref3$image,
131
- _ref3$visualLayout = _ref3.visualLayout,
132
- visualLayout = _ref3$visualLayout === void 0 ? null : _ref3$visualLayout; // note: image can be a video
121
+ var _ref2 = visual || {},
122
+ _ref2$image = _ref2.image,
123
+ image = _ref2$image === void 0 ? null : _ref2$image,
124
+ _ref2$visualLayout = _ref2.visualLayout,
125
+ visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
126
+ var _ref3 = image || {},
127
+ _ref3$type = _ref3.type,
128
+ type = _ref3$type === void 0 ? null : _ref3$type;
133
129
  var hasVisual = image !== null;
130
+ var isVideo = type === 'video';
134
131
  var hasCategory = utils.isTextFilled(category);
135
132
  var hasTitle = utils.isTextFilled(title);
136
133
  var hasDate = utils.isTextFilled(date);
@@ -194,7 +191,6 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
194
191
  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
195
192
  key: "spacer-cta-top"
196
193
  }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
197
- ref: cardRef,
198
194
  className: classNames__default["default"]([styles.textCard, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref5, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref5, styles.appear, animationStarted), _ref5)])
199
195
  }, /*#__PURE__*/React__default["default"].createElement("div", {
200
196
  className: styles.visualContainer
@@ -219,26 +215,31 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
219
215
  }),
220
216
  emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
221
217
  isEmpty: !hasVisual
222
- }, hasVisual ?
218
+ }, hasVisual && !isVideo ?
223
219
  /*#__PURE__*/
224
220
  // <div className={styles.visualWrapper}>
225
- React__default["default"].createElement(Visual__default["default"]
226
- // {...visual}
227
- , {
221
+ React__default["default"].createElement(Visual__default["default"], {
228
222
  imageClassName: styles.visual,
229
223
  media: image,
230
- muted: true,
231
- width: cardWidth,
232
- height: 250,
233
- objectFit: {
234
- fit: 'cover'
235
- },
224
+ width: "100%",
236
225
  resolution: resolution,
237
226
  active: active,
238
227
  shouldLoad: mediaShouldLoad
239
228
  }) :
240
229
  // </div>
241
- null)), /*#__PURE__*/React__default["default"].createElement("div", {
230
+ null, hasVisual && isVideo ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
231
+ media: image,
232
+ width: width * 0.9,
233
+ height: 250,
234
+ resolution: resolution,
235
+ objectFit: {
236
+ fit: 'cover'
237
+ },
238
+ shouldLoad: mediaShouldLoad,
239
+ muted: true,
240
+ withoutVideo: isPreview,
241
+ autoPlay: true
242
+ }) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
242
243
  className: styles.text
243
244
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
244
245
  key: "category",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
3
- "version": "0.3.370",
3
+ "version": "0.3.371",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,17 +49,17 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.370",
53
- "@micromag/element-background": "^0.3.370",
54
- "@micromag/element-container": "^0.3.370",
55
- "@micromag/element-footer": "^0.3.370",
56
- "@micromag/element-header": "^0.3.370",
57
- "@micromag/element-heading": "^0.3.370",
58
- "@micromag/element-layout": "^0.3.370",
59
- "@micromag/element-scroll": "^0.3.370",
60
- "@micromag/element-text": "^0.3.370",
61
- "@micromag/element-visual": "^0.3.370",
62
- "@micromag/transforms": "^0.3.370",
52
+ "@micromag/core": "^0.3.371",
53
+ "@micromag/element-background": "^0.3.371",
54
+ "@micromag/element-container": "^0.3.371",
55
+ "@micromag/element-footer": "^0.3.371",
56
+ "@micromag/element-header": "^0.3.371",
57
+ "@micromag/element-heading": "^0.3.371",
58
+ "@micromag/element-layout": "^0.3.371",
59
+ "@micromag/element-scroll": "^0.3.371",
60
+ "@micromag/element-text": "^0.3.371",
61
+ "@micromag/element-visual": "^0.3.371",
62
+ "@micromag/transforms": "^0.3.371",
63
63
  "classnames": "^2.2.6",
64
64
  "lodash": "^4.17.21",
65
65
  "prop-types": "^15.7.2",
@@ -69,5 +69,5 @@
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "69c07e59593e42e3d6f3f4e9deba937a7ea60734"
72
+ "gitHead": "8cf85c6ae97228cf36457a674081bce1d82e7d5d"
73
73
  }