@micromag/screen-image 0.3.251 → 0.3.262

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 +17 -13
  3. package/lib/index.js +17 -13
  4. package/package.json +11 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-image-container .micromag-screen-image-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{position:relative;padding:6px}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-image-container .micromag-screen-image-content{position:relative;height:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{width:100%;margin:10px auto}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-callToAction{position:absolute;bottom:0;width:100%;margin-top:0}
1
+ .micromag-screen-image-container .micromag-screen-image-background,.micromag-screen-image-container .micromag-screen-image-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{position:relative;padding:6px}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-image-container .micromag-screen-image-background{z-index:0}.micromag-screen-image-container .micromag-screen-image-content{position:relative;z-index:1;height:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{width:100%;margin:10px auto}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-callToAction{position:absolute;bottom:0;width:100%;margin-top:0}
package/es/index.js CHANGED
@@ -21,7 +21,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
21
21
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
22
22
  import { Image, Heading1, Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
23
23
 
24
- var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
24
+ var styles = {"container":"micromag-screen-image-container","background":"micromag-screen-image-background","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
25
25
 
26
26
  var propTypes = {
27
27
  layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -182,6 +182,7 @@ var ImageScreen = function ImageScreen(_ref) {
182
182
  muted: muted,
183
183
  active: active,
184
184
  shouldLoad: mediaShouldLoad,
185
+ withoutVideo: isPreview,
185
186
  onLoaded: onImageLoaded
186
187
  })) : null)), withTitle && /*#__PURE__*/React.createElement(ScreenElement, {
187
188
  key: "title",
@@ -279,7 +280,7 @@ var ImageScreen = function ImageScreen(_ref) {
279
280
  }
280
281
 
281
282
  var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
282
- var paddingTop = (current && !isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
283
+ var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
283
284
 
284
285
  if (isCard || isFullscreen) {
285
286
  paddingTop = 0;
@@ -294,18 +295,10 @@ var ImageScreen = function ImageScreen(_ref) {
294
295
  return /*#__PURE__*/React.createElement("div", {
295
296
  className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles.isReversed, isReversed), _defineProperty(_ref2, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref2, styles.isCard, isCard), _defineProperty(_ref2, styles.isCardReverse, isCardReverse), _defineProperty(_ref2, styles.isFullscreen, isFullscreen), _ref2)]),
296
297
  "data-screen-ready": ready
297
- }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
298
- background: background,
298
+ }, /*#__PURE__*/React.createElement(Container, {
299
299
  width: width,
300
300
  height: height,
301
- resolution: resolution,
302
- playing: backgroundPlaying,
303
- muted: muted,
304
- shouldLoad: mediaShouldLoad,
305
- mediaRef: mediaRef
306
- }) : null, /*#__PURE__*/React.createElement(Container, {
307
- width: width,
308
- height: height
301
+ className: styles.content
309
302
  }, /*#__PURE__*/React.createElement(Layout, {
310
303
  className: styles.layout,
311
304
  fullscreen: true,
@@ -314,7 +307,18 @@ var ImageScreen = function ImageScreen(_ref) {
314
307
  paddingTop: paddingTop,
315
308
  paddingBottom: paddingBottom
316
309
  } : null
317
- }, items)));
310
+ }, items)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
311
+ background: background,
312
+ width: width,
313
+ height: height,
314
+ resolution: resolution,
315
+ playing: backgroundPlaying,
316
+ muted: muted,
317
+ shouldLoad: mediaShouldLoad,
318
+ mediaRef: mediaRef,
319
+ withoutVideo: isPreview,
320
+ className: styles.background
321
+ }) : null);
318
322
  };
319
323
 
320
324
  ImageScreen.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -43,7 +43,7 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
43
43
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
44
44
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
45
45
 
46
- var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
46
+ var styles = {"container":"micromag-screen-image-container","background":"micromag-screen-image-background","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
47
47
 
48
48
  var propTypes = {
49
49
  layout: PropTypes__default["default"].oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -204,6 +204,7 @@ var ImageScreen = function ImageScreen(_ref) {
204
204
  muted: muted,
205
205
  active: active,
206
206
  shouldLoad: mediaShouldLoad,
207
+ withoutVideo: isPreview,
207
208
  onLoaded: onImageLoaded
208
209
  })) : null)), withTitle && /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
209
210
  key: "title",
@@ -301,7 +302,7 @@ var ImageScreen = function ImageScreen(_ref) {
301
302
  }
302
303
 
303
304
  var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
304
- var paddingTop = (current && !isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
305
+ var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
305
306
 
306
307
  if (isCard || isFullscreen) {
307
308
  paddingTop = 0;
@@ -316,18 +317,10 @@ var ImageScreen = function ImageScreen(_ref) {
316
317
  return /*#__PURE__*/React__default["default"].createElement("div", {
317
318
  className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles.isReversed, isReversed), _defineProperty__default["default"](_ref2, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref2, styles.isCard, isCard), _defineProperty__default["default"](_ref2, styles.isCardReverse, isCardReverse), _defineProperty__default["default"](_ref2, styles.isFullscreen, isFullscreen), _ref2)]),
318
319
  "data-screen-ready": ready
319
- }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
320
- background: background,
320
+ }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
321
321
  width: width,
322
322
  height: height,
323
- resolution: resolution,
324
- playing: backgroundPlaying,
325
- muted: muted,
326
- shouldLoad: mediaShouldLoad,
327
- mediaRef: mediaRef
328
- }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
329
- width: width,
330
- height: height
323
+ className: styles.content
331
324
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
332
325
  className: styles.layout,
333
326
  fullscreen: true,
@@ -336,7 +329,18 @@ var ImageScreen = function ImageScreen(_ref) {
336
329
  paddingTop: paddingTop,
337
330
  paddingBottom: paddingBottom
338
331
  } : null
339
- }, items)));
332
+ }, items)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
333
+ background: background,
334
+ width: width,
335
+ height: height,
336
+ resolution: resolution,
337
+ playing: backgroundPlaying,
338
+ muted: muted,
339
+ shouldLoad: mediaShouldLoad,
340
+ mediaRef: mediaRef,
341
+ withoutVideo: isPreview,
342
+ className: styles.background
343
+ }) : null);
340
344
  };
341
345
 
342
346
  ImageScreen.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-image",
3
- "version": "0.3.251",
3
+ "version": "0.3.262",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,15 +49,15 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.251",
53
- "@micromag/element-background": "^0.3.251",
54
- "@micromag/element-call-to-action": "^0.3.251",
55
- "@micromag/element-container": "^0.3.251",
56
- "@micromag/element-heading": "^0.3.251",
57
- "@micromag/element-layout": "^0.3.251",
58
- "@micromag/element-text": "^0.3.251",
59
- "@micromag/element-visual": "^0.3.251",
60
- "@micromag/transforms": "^0.3.251",
52
+ "@micromag/core": "^0.3.262",
53
+ "@micromag/element-background": "^0.3.262",
54
+ "@micromag/element-call-to-action": "^0.3.262",
55
+ "@micromag/element-container": "^0.3.262",
56
+ "@micromag/element-heading": "^0.3.262",
57
+ "@micromag/element-layout": "^0.3.262",
58
+ "@micromag/element-text": "^0.3.262",
59
+ "@micromag/element-visual": "^0.3.262",
60
+ "@micromag/transforms": "^0.3.262",
61
61
  "classnames": "^2.2.6",
62
62
  "lodash": "^4.17.21",
63
63
  "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
70
+ "gitHead": "2299eaeb150cfdd14b4da321bf9089ab1e6383c2"
71
71
  }