@micromag/element-background 0.3.251 → 0.3.252

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 -10
  3. package/lib/index.js +17 -10
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-background-container,.micromag-element-background-layer,.micromag-element-background-layers,.micromag-element-background-video,.micromag-element-background-videoContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-background-container{z-index:0;overflow:hidden}.micromag-element-background-layer,.micromag-element-background-layers{z-index:0}.micromag-element-background-right .micromag-element-background-background{right:0;left:auto}.micromag-element-background-bottom .micromag-element-background-background{top:auto;bottom:0}
1
+ .micromag-element-background-layer,.micromag-element-background-layers,.micromag-element-background-video,.micromag-element-background-videoContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-background-container{position:relative;overflow:hidden}.micromag-element-background-layer,.micromag-element-background-layers{z-index:0}.micromag-element-background-right .micromag-element-background-background{right:0;left:auto}.micromag-element-background-bottom .micromag-element-background-background{top:auto;bottom:0}
package/es/index.js CHANGED
@@ -9,7 +9,7 @@ import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '
9
9
  import { getSizeWithinBounds } from '@folklore/size';
10
10
  import Video from '@micromag/element-video';
11
11
 
12
- var styles = {"container":"micromag-element-background-container","layer":"micromag-element-background-layer","layers":"micromag-element-background-layers","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
12
+ var styles = {"layer":"micromag-element-background-layer","layers":"micromag-element-background-layers","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer","container":"micromag-element-background-container","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
13
13
 
14
14
  var propTypes$1 = {
15
15
  width: PropTypes.number,
@@ -30,7 +30,8 @@ var propTypes$1 = {
30
30
  muted: PropTypes.bool,
31
31
  children: PropTypes.node,
32
32
  loadingMode: PropTypes.string,
33
- shouldLoad: PropTypes.bool
33
+ shouldLoad: PropTypes.bool,
34
+ withoutVideo: PropTypes.bool
34
35
  };
35
36
  var defaultProps$1 = {
36
37
  width: null,
@@ -48,7 +49,8 @@ var defaultProps$1 = {
48
49
  muted: false,
49
50
  children: null,
50
51
  loadingMode: 'lazy',
51
- shouldLoad: true
52
+ shouldLoad: true,
53
+ withoutVideo: false
52
54
  };
53
55
 
54
56
  var Background = function Background(_ref) {
@@ -67,7 +69,8 @@ var Background = function Background(_ref) {
67
69
  muted = _ref.muted,
68
70
  children = _ref.children,
69
71
  loadingMode = _ref.loadingMode,
70
- shouldLoad = _ref.shouldLoad;
72
+ shouldLoad = _ref.shouldLoad,
73
+ withoutVideo = _ref.withoutVideo;
71
74
 
72
75
  var _ref2 = media || {},
73
76
  _ref2$type = _ref2.type,
@@ -100,7 +103,7 @@ var Background = function Background(_ref) {
100
103
  }, getStyleFromColor(color)); // image
101
104
 
102
105
 
103
- if (media !== null && (isImage || isVideo && !shouldLoad)) {
106
+ if (media !== null && (isImage || isVideo && (!shouldLoad || withoutVideo))) {
104
107
  var finalUrl = getOptimalImageUrl(isVideo ? {
105
108
  url: mediaThumbnailUrl
106
109
  } : media, width, height, {
@@ -142,7 +145,7 @@ var Background = function Background(_ref) {
142
145
  return /*#__PURE__*/React.createElement("div", {
143
146
  className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
144
147
  style: containerStyle
145
- }, isVideo && shouldLoad ? /*#__PURE__*/React.createElement("div", {
148
+ }, isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/React.createElement("div", {
146
149
  className: styles.videoContainer,
147
150
  style: videoContainerStyle
148
151
  }, /*#__PURE__*/React.createElement(Video, {
@@ -180,7 +183,8 @@ var propTypes = {
180
183
  // eslint-disable-next-line react/forbid-prop-types
181
184
  current: PropTypes.any
182
185
  })]),
183
- shouldLoad: PropTypes.bool
186
+ shouldLoad: PropTypes.bool,
187
+ withoutVideo: PropTypes.bool
184
188
  };
185
189
  var defaultProps = {
186
190
  width: null,
@@ -195,7 +199,8 @@ var defaultProps = {
195
199
  backgroundClassName: null,
196
200
  loadingMode: 'lazy',
197
201
  mediaRef: null,
198
- shouldLoad: true
202
+ shouldLoad: true,
203
+ withoutVideo: false
199
204
  };
200
205
 
201
206
  var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -211,7 +216,8 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
211
216
  backgroundClassName = _ref.backgroundClassName,
212
217
  loadingMode = _ref.loadingMode,
213
218
  mediaRef = _ref.mediaRef,
214
- shouldLoad = _ref.shouldLoad;
219
+ shouldLoad = _ref.shouldLoad,
220
+ withoutVideo = _ref.withoutVideo;
215
221
  var hasSize = width > 0 && height > 0;
216
222
  var layers = useMemo(function () {
217
223
  return getLayersFromBackground(background);
@@ -254,7 +260,8 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
254
260
  verticalAlign: verticalAlign,
255
261
  loadingMode: loadingMode,
256
262
  shouldLoad: shouldLoad,
257
- mediaRef: mediaRef
263
+ mediaRef: mediaRef,
264
+ withoutVideo: withoutVideo
258
265
  }, layer)));
259
266
  })), /*#__PURE__*/React.createElement("div", {
260
267
  className: styles.content
package/lib/index.js CHANGED
@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
23
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
24
  var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
25
25
 
26
- var styles = {"container":"micromag-element-background-container","layer":"micromag-element-background-layer","layers":"micromag-element-background-layers","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
26
+ var styles = {"layer":"micromag-element-background-layer","layers":"micromag-element-background-layers","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer","container":"micromag-element-background-container","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
27
27
 
28
28
  var propTypes$1 = {
29
29
  width: PropTypes__default["default"].number,
@@ -44,7 +44,8 @@ var propTypes$1 = {
44
44
  muted: PropTypes__default["default"].bool,
45
45
  children: PropTypes__default["default"].node,
46
46
  loadingMode: PropTypes__default["default"].string,
47
- shouldLoad: PropTypes__default["default"].bool
47
+ shouldLoad: PropTypes__default["default"].bool,
48
+ withoutVideo: PropTypes__default["default"].bool
48
49
  };
49
50
  var defaultProps$1 = {
50
51
  width: null,
@@ -62,7 +63,8 @@ var defaultProps$1 = {
62
63
  muted: false,
63
64
  children: null,
64
65
  loadingMode: 'lazy',
65
- shouldLoad: true
66
+ shouldLoad: true,
67
+ withoutVideo: false
66
68
  };
67
69
 
68
70
  var Background = function Background(_ref) {
@@ -81,7 +83,8 @@ var Background = function Background(_ref) {
81
83
  muted = _ref.muted,
82
84
  children = _ref.children,
83
85
  loadingMode = _ref.loadingMode,
84
- shouldLoad = _ref.shouldLoad;
86
+ shouldLoad = _ref.shouldLoad,
87
+ withoutVideo = _ref.withoutVideo;
85
88
 
86
89
  var _ref2 = media || {},
87
90
  _ref2$type = _ref2.type,
@@ -114,7 +117,7 @@ var Background = function Background(_ref) {
114
117
  }, utils.getStyleFromColor(color)); // image
115
118
 
116
119
 
117
- if (media !== null && (isImage || isVideo && !shouldLoad)) {
120
+ if (media !== null && (isImage || isVideo && (!shouldLoad || withoutVideo))) {
118
121
  var finalUrl = utils.getOptimalImageUrl(isVideo ? {
119
122
  url: mediaThumbnailUrl
120
123
  } : media, width, height, {
@@ -156,7 +159,7 @@ var Background = function Background(_ref) {
156
159
  return /*#__PURE__*/React__default["default"].createElement("div", {
157
160
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
158
161
  style: containerStyle
159
- }, isVideo && shouldLoad ? /*#__PURE__*/React__default["default"].createElement("div", {
162
+ }, isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/React__default["default"].createElement("div", {
160
163
  className: styles.videoContainer,
161
164
  style: videoContainerStyle
162
165
  }, /*#__PURE__*/React__default["default"].createElement(Video__default["default"], {
@@ -194,7 +197,8 @@ var propTypes = {
194
197
  // eslint-disable-next-line react/forbid-prop-types
195
198
  current: PropTypes__default["default"].any
196
199
  })]),
197
- shouldLoad: PropTypes__default["default"].bool
200
+ shouldLoad: PropTypes__default["default"].bool,
201
+ withoutVideo: PropTypes__default["default"].bool
198
202
  };
199
203
  var defaultProps = {
200
204
  width: null,
@@ -209,7 +213,8 @@ var defaultProps = {
209
213
  backgroundClassName: null,
210
214
  loadingMode: 'lazy',
211
215
  mediaRef: null,
212
- shouldLoad: true
216
+ shouldLoad: true,
217
+ withoutVideo: false
213
218
  };
214
219
 
215
220
  var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -225,7 +230,8 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
225
230
  backgroundClassName = _ref.backgroundClassName,
226
231
  loadingMode = _ref.loadingMode,
227
232
  mediaRef = _ref.mediaRef,
228
- shouldLoad = _ref.shouldLoad;
233
+ shouldLoad = _ref.shouldLoad,
234
+ withoutVideo = _ref.withoutVideo;
229
235
  var hasSize = width > 0 && height > 0;
230
236
  var layers = React.useMemo(function () {
231
237
  return utils.getLayersFromBackground(background);
@@ -268,7 +274,8 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
268
274
  verticalAlign: verticalAlign,
269
275
  loadingMode: loadingMode,
270
276
  shouldLoad: shouldLoad,
271
- mediaRef: mediaRef
277
+ mediaRef: mediaRef,
278
+ withoutVideo: withoutVideo
272
279
  }, layer)));
273
280
  })), /*#__PURE__*/React__default["default"].createElement("div", {
274
281
  className: styles.content
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-background",
3
- "version": "0.3.251",
3
+ "version": "0.3.252",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -48,8 +48,8 @@
48
48
  "dependencies": {
49
49
  "@babel/runtime": "^7.13.10",
50
50
  "@folklore/size": "^0.1.20",
51
- "@micromag/core": "^0.3.251",
52
- "@micromag/element-video": "^0.3.251",
51
+ "@micromag/core": "^0.3.252",
52
+ "@micromag/element-video": "^0.3.252",
53
53
  "classnames": "^2.2.6",
54
54
  "lodash": "^4.17.21",
55
55
  "prop-types": "^15.7.2",
@@ -59,5 +59,5 @@
59
59
  "publishConfig": {
60
60
  "access": "public"
61
61
  },
62
- "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
62
+ "gitHead": "67a8b8144a40086a6dfd98c9eb8c4b6b8ebb05b0"
63
63
  }