@micromag/element-background 0.2.401 → 0.2.406

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 (3) hide show
  1. package/es/index.js +36 -12
  2. package/lib/index.js +35 -11
  3. package/package.json +4 -4
package/es/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
- import React, { useMemo } from 'react';
4
+ import React, { useRef, useMemo } from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import classNames from 'classnames';
7
7
  import { PropTypes as PropTypes$1 } from '@micromag/core';
8
8
  import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
9
- import Video from '@micromag/element-video';
10
9
  import { getSizeWithinBounds } from '@folklore/size';
10
+ import Video from '@micromag/element-video';
11
11
 
12
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"};
13
13
 
@@ -22,7 +22,9 @@ var propTypes$1 = {
22
22
  media: PropTypes.oneOfType([PropTypes$1.imageMedia, PropTypes$1.videoMedia]),
23
23
  className: PropTypes.string,
24
24
  playing: PropTypes.bool,
25
- children: PropTypes.node
25
+ children: PropTypes.node,
26
+ loadingMode: PropTypes.string,
27
+ shouldLoad: PropTypes.bool
26
28
  };
27
29
  var defaultProps$1 = {
28
30
  width: null,
@@ -35,7 +37,9 @@ var defaultProps$1 = {
35
37
  media: null,
36
38
  className: null,
37
39
  playing: false,
38
- children: null
40
+ children: null,
41
+ loadingMode: 'lazy',
42
+ shouldLoad: true
39
43
  };
40
44
 
41
45
  var Background = function Background(_ref) {
@@ -49,7 +53,9 @@ var Background = function Background(_ref) {
49
53
  media = _ref.media,
50
54
  className = _ref.className,
51
55
  playing = _ref.playing,
52
- children = _ref.children;
56
+ children = _ref.children,
57
+ loadingMode = _ref.loadingMode,
58
+ shouldLoad = _ref.shouldLoad;
53
59
 
54
60
  var _ref2 = media || {},
55
61
  _ref2$type = _ref2.type,
@@ -65,7 +71,16 @@ var Background = function Background(_ref) {
65
71
  mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height;
66
72
 
67
73
  var isVideo = mediaType === 'video';
68
- var isImage = mediaType === 'image'; // color
74
+ var isImage = mediaType === 'image'; // Lazy load
75
+
76
+ var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
77
+ var wasLoadedRef = useRef(newShouldLoad);
78
+
79
+ if (newShouldLoad && !wasLoadedRef.current) {
80
+ wasLoadedRef.current = newShouldLoad;
81
+ }
82
+
83
+ var finalShouldLoad = wasLoadedRef.current; // color
69
84
 
70
85
  var containerStyle = _objectSpread({
71
86
  width: width,
@@ -77,7 +92,7 @@ var Background = function Background(_ref) {
77
92
  var finalUrl = getOptimalImageUrl(isVideo ? {
78
93
  url: mediaThumbnailUrl
79
94
  } : media, width, height);
80
- containerStyle.backgroundImage = finalUrl !== null ? "url(\"".concat(finalUrl, "\")") : null;
95
+ containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
81
96
  containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
82
97
  containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
83
98
 
@@ -121,7 +136,8 @@ var Background = function Background(_ref) {
121
136
  media: media,
122
137
  autoPlay: playing,
123
138
  initialMuted: true,
124
- loop: true
139
+ loop: true,
140
+ preload: finalShouldLoad ? 'auto' : 'metadata'
125
141
  })) : null, /*#__PURE__*/React.createElement("div", {
126
142
  className: styles.content
127
143
  }, children));
@@ -137,7 +153,9 @@ var propTypes = {
137
153
  background: PropTypes.oneOfType([PropTypes$1.backgroundElement, PropTypes.arrayOf(PropTypes$1.backgroundElement)]),
138
154
  playing: PropTypes.bool,
139
155
  children: PropTypes.node,
140
- className: PropTypes.string
156
+ className: PropTypes.string,
157
+ loadingMode: PropTypes.string,
158
+ shouldLoad: PropTypes.bool
141
159
  };
142
160
  var defaultProps = {
143
161
  width: null,
@@ -145,7 +163,9 @@ var defaultProps = {
145
163
  background: [],
146
164
  playing: false,
147
165
  children: null,
148
- className: null
166
+ className: null,
167
+ loadingMode: 'lazy',
168
+ shouldLoad: true
149
169
  };
150
170
 
151
171
  var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -154,7 +174,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
154
174
  background = _ref.background,
155
175
  playing = _ref.playing,
156
176
  children = _ref.children,
157
- className = _ref.className;
177
+ className = _ref.className,
178
+ loadingMode = _ref.loadingMode,
179
+ shouldLoad = _ref.shouldLoad;
158
180
  var hasSize = width > 0 && height > 0;
159
181
  var layers = useMemo(function () {
160
182
  return getLayersFromBackground(background);
@@ -192,7 +214,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
192
214
  className: styles.background,
193
215
  playing: playing,
194
216
  horizontalAlign: horizontalAlign,
195
- verticalAlign: verticalAlign
217
+ verticalAlign: verticalAlign,
218
+ loadingMode: loadingMode,
219
+ shouldLoad: shouldLoad
196
220
  }, layer)));
197
221
  })), /*#__PURE__*/React.createElement("div", {
198
222
  className: styles.content
package/lib/index.js CHANGED
@@ -10,8 +10,8 @@ var PropTypes = require('prop-types');
10
10
  var classNames = require('classnames');
11
11
  var core = require('@micromag/core');
12
12
  var utils = require('@micromag/core/utils');
13
- var Video = require('@micromag/element-video');
14
13
  var size = require('@folklore/size');
14
+ var Video = require('@micromag/element-video');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
@@ -36,7 +36,9 @@ var propTypes$1 = {
36
36
  media: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedia, core.PropTypes.videoMedia]),
37
37
  className: PropTypes__default["default"].string,
38
38
  playing: PropTypes__default["default"].bool,
39
- children: PropTypes__default["default"].node
39
+ children: PropTypes__default["default"].node,
40
+ loadingMode: PropTypes__default["default"].string,
41
+ shouldLoad: PropTypes__default["default"].bool
40
42
  };
41
43
  var defaultProps$1 = {
42
44
  width: null,
@@ -49,7 +51,9 @@ var defaultProps$1 = {
49
51
  media: null,
50
52
  className: null,
51
53
  playing: false,
52
- children: null
54
+ children: null,
55
+ loadingMode: 'lazy',
56
+ shouldLoad: true
53
57
  };
54
58
 
55
59
  var Background = function Background(_ref) {
@@ -63,7 +67,9 @@ var Background = function Background(_ref) {
63
67
  media = _ref.media,
64
68
  className = _ref.className,
65
69
  playing = _ref.playing,
66
- children = _ref.children;
70
+ children = _ref.children,
71
+ loadingMode = _ref.loadingMode,
72
+ shouldLoad = _ref.shouldLoad;
67
73
 
68
74
  var _ref2 = media || {},
69
75
  _ref2$type = _ref2.type,
@@ -79,7 +85,16 @@ var Background = function Background(_ref) {
79
85
  mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height;
80
86
 
81
87
  var isVideo = mediaType === 'video';
82
- var isImage = mediaType === 'image'; // color
88
+ var isImage = mediaType === 'image'; // Lazy load
89
+
90
+ var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
91
+ var wasLoadedRef = React.useRef(newShouldLoad);
92
+
93
+ if (newShouldLoad && !wasLoadedRef.current) {
94
+ wasLoadedRef.current = newShouldLoad;
95
+ }
96
+
97
+ var finalShouldLoad = wasLoadedRef.current; // color
83
98
 
84
99
  var containerStyle = _objectSpread__default["default"]({
85
100
  width: width,
@@ -91,7 +106,7 @@ var Background = function Background(_ref) {
91
106
  var finalUrl = utils.getOptimalImageUrl(isVideo ? {
92
107
  url: mediaThumbnailUrl
93
108
  } : media, width, height);
94
- containerStyle.backgroundImage = finalUrl !== null ? "url(\"".concat(finalUrl, "\")") : null;
109
+ containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
95
110
  containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
96
111
  containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
97
112
 
@@ -135,7 +150,8 @@ var Background = function Background(_ref) {
135
150
  media: media,
136
151
  autoPlay: playing,
137
152
  initialMuted: true,
138
- loop: true
153
+ loop: true,
154
+ preload: finalShouldLoad ? 'auto' : 'metadata'
139
155
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
140
156
  className: styles.content
141
157
  }, children));
@@ -151,7 +167,9 @@ var propTypes = {
151
167
  background: PropTypes__default["default"].oneOfType([core.PropTypes.backgroundElement, PropTypes__default["default"].arrayOf(core.PropTypes.backgroundElement)]),
152
168
  playing: PropTypes__default["default"].bool,
153
169
  children: PropTypes__default["default"].node,
154
- className: PropTypes__default["default"].string
170
+ className: PropTypes__default["default"].string,
171
+ loadingMode: PropTypes__default["default"].string,
172
+ shouldLoad: PropTypes__default["default"].bool
155
173
  };
156
174
  var defaultProps = {
157
175
  width: null,
@@ -159,7 +177,9 @@ var defaultProps = {
159
177
  background: [],
160
178
  playing: false,
161
179
  children: null,
162
- className: null
180
+ className: null,
181
+ loadingMode: 'lazy',
182
+ shouldLoad: true
163
183
  };
164
184
 
165
185
  var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -168,7 +188,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
168
188
  background = _ref.background,
169
189
  playing = _ref.playing,
170
190
  children = _ref.children,
171
- className = _ref.className;
191
+ className = _ref.className,
192
+ loadingMode = _ref.loadingMode,
193
+ shouldLoad = _ref.shouldLoad;
172
194
  var hasSize = width > 0 && height > 0;
173
195
  var layers = React.useMemo(function () {
174
196
  return utils.getLayersFromBackground(background);
@@ -206,7 +228,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
206
228
  className: styles.background,
207
229
  playing: playing,
208
230
  horizontalAlign: horizontalAlign,
209
- verticalAlign: verticalAlign
231
+ verticalAlign: verticalAlign,
232
+ loadingMode: loadingMode,
233
+ shouldLoad: shouldLoad
210
234
  }, layer)));
211
235
  })), /*#__PURE__*/React__default["default"].createElement("div", {
212
236
  className: styles.content
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-background",
3
- "version": "0.2.401",
3
+ "version": "0.2.406",
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.15",
51
- "@micromag/core": "^0.2.401",
52
- "@micromag/element-video": "^0.2.401",
51
+ "@micromag/core": "^0.2.405",
52
+ "@micromag/element-video": "^0.2.405",
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": "fd03ec6d9decc9e18d6088a36e47c7b1e0e72b4c"
62
+ "gitHead": "5e1a6de73674624b0cb3f9701140ea8850e6f35e"
63
63
  }