@micromag/element-background 0.3.150 → 0.3.156

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 +27 -5
  2. package/lib/index.js +27 -5
  3. package/package.json +4 -4
package/es/index.js CHANGED
@@ -21,8 +21,13 @@ var propTypes$1 = {
21
21
  repeat: PropTypes.bool,
22
22
  color: PropTypes$1.color,
23
23
  media: PropTypes.oneOfType([PropTypes$1.imageMedia, PropTypes$1.videoMedia]),
24
+ mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
25
+ // eslint-disable-next-line react/forbid-prop-types
26
+ current: PropTypes.any
27
+ })]),
24
28
  className: PropTypes.string,
25
29
  playing: PropTypes.bool,
30
+ muted: PropTypes.bool,
26
31
  children: PropTypes.node,
27
32
  loadingMode: PropTypes.string,
28
33
  shouldLoad: PropTypes.bool
@@ -37,8 +42,10 @@ var defaultProps$1 = {
37
42
  repeat: false,
38
43
  color: null,
39
44
  media: null,
45
+ mediaRef: null,
40
46
  className: null,
41
47
  playing: false,
48
+ muted: false,
42
49
  children: null,
43
50
  loadingMode: 'lazy',
44
51
  shouldLoad: true
@@ -54,8 +61,10 @@ var Background = function Background(_ref) {
54
61
  repeat = _ref.repeat,
55
62
  color = _ref.color,
56
63
  media = _ref.media,
64
+ mediaRef = _ref.mediaRef,
57
65
  className = _ref.className,
58
66
  playing = _ref.playing,
67
+ muted = _ref.muted,
59
68
  children = _ref.children,
60
69
  loadingMode = _ref.loadingMode,
61
70
  shouldLoad = _ref.shouldLoad;
@@ -139,10 +148,12 @@ var Background = function Background(_ref) {
139
148
  }, /*#__PURE__*/React.createElement(Video, {
140
149
  className: styles.video,
141
150
  media: media,
142
- autoPlay: playing,
143
- initialMuted: true,
144
- loop: true,
145
- shouldLoad: shouldLoad
151
+ mediaRef: mediaRef,
152
+ paused: !playing,
153
+ muted: muted,
154
+ shouldLoad: shouldLoad,
155
+ autoPlay: true,
156
+ loop: true
146
157
  })) : null, /*#__PURE__*/React.createElement("div", {
147
158
  className: styles.content
148
159
  }, children));
@@ -158,11 +169,16 @@ var propTypes = {
158
169
  resolution: PropTypes.number,
159
170
  background: PropTypes.oneOfType([PropTypes$1.backgroundElement, PropTypes.arrayOf(PropTypes$1.backgroundElement)]),
160
171
  playing: PropTypes.bool,
172
+ muted: PropTypes.bool,
161
173
  children: PropTypes.node,
162
174
  className: PropTypes.string,
163
175
  layerClassName: PropTypes.string,
164
176
  backgroundClassName: PropTypes.string,
165
177
  loadingMode: PropTypes.string,
178
+ mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
179
+ // eslint-disable-next-line react/forbid-prop-types
180
+ current: PropTypes.any
181
+ })]),
166
182
  shouldLoad: PropTypes.bool
167
183
  };
168
184
  var defaultProps = {
@@ -171,11 +187,13 @@ var defaultProps = {
171
187
  resolution: 1,
172
188
  background: [],
173
189
  playing: false,
190
+ muted: false,
174
191
  children: null,
175
192
  className: null,
176
193
  layerClassName: null,
177
194
  backgroundClassName: null,
178
195
  loadingMode: 'lazy',
196
+ mediaRef: null,
179
197
  shouldLoad: true
180
198
  };
181
199
 
@@ -185,11 +203,13 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
185
203
  resolution = _ref.resolution,
186
204
  background = _ref.background,
187
205
  playing = _ref.playing,
206
+ muted = _ref.muted,
188
207
  children = _ref.children,
189
208
  className = _ref.className,
190
209
  layerClassName = _ref.layerClassName,
191
210
  backgroundClassName = _ref.backgroundClassName,
192
211
  loadingMode = _ref.loadingMode,
212
+ mediaRef = _ref.mediaRef,
193
213
  shouldLoad = _ref.shouldLoad;
194
214
  var hasSize = width > 0 && height > 0;
195
215
  var layers = useMemo(function () {
@@ -228,10 +248,12 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
228
248
  resolution: resolution,
229
249
  className: classNames([styles.background, _defineProperty({}, backgroundClassName, backgroundClassName !== null)]),
230
250
  playing: playing,
251
+ muted: muted,
231
252
  horizontalAlign: horizontalAlign,
232
253
  verticalAlign: verticalAlign,
233
254
  loadingMode: loadingMode,
234
- shouldLoad: shouldLoad
255
+ shouldLoad: shouldLoad,
256
+ mediaRef: mediaRef
235
257
  }, layer)));
236
258
  })), /*#__PURE__*/React.createElement("div", {
237
259
  className: styles.content
package/lib/index.js CHANGED
@@ -35,8 +35,13 @@ var propTypes$1 = {
35
35
  repeat: PropTypes__default["default"].bool,
36
36
  color: core.PropTypes.color,
37
37
  media: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedia, core.PropTypes.videoMedia]),
38
+ mediaRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
39
+ // eslint-disable-next-line react/forbid-prop-types
40
+ current: PropTypes__default["default"].any
41
+ })]),
38
42
  className: PropTypes__default["default"].string,
39
43
  playing: PropTypes__default["default"].bool,
44
+ muted: PropTypes__default["default"].bool,
40
45
  children: PropTypes__default["default"].node,
41
46
  loadingMode: PropTypes__default["default"].string,
42
47
  shouldLoad: PropTypes__default["default"].bool
@@ -51,8 +56,10 @@ var defaultProps$1 = {
51
56
  repeat: false,
52
57
  color: null,
53
58
  media: null,
59
+ mediaRef: null,
54
60
  className: null,
55
61
  playing: false,
62
+ muted: false,
56
63
  children: null,
57
64
  loadingMode: 'lazy',
58
65
  shouldLoad: true
@@ -68,8 +75,10 @@ var Background = function Background(_ref) {
68
75
  repeat = _ref.repeat,
69
76
  color = _ref.color,
70
77
  media = _ref.media,
78
+ mediaRef = _ref.mediaRef,
71
79
  className = _ref.className,
72
80
  playing = _ref.playing,
81
+ muted = _ref.muted,
73
82
  children = _ref.children,
74
83
  loadingMode = _ref.loadingMode,
75
84
  shouldLoad = _ref.shouldLoad;
@@ -153,10 +162,12 @@ var Background = function Background(_ref) {
153
162
  }, /*#__PURE__*/React__default["default"].createElement(Video__default["default"], {
154
163
  className: styles.video,
155
164
  media: media,
156
- autoPlay: playing,
157
- initialMuted: true,
158
- loop: true,
159
- shouldLoad: shouldLoad
165
+ mediaRef: mediaRef,
166
+ paused: !playing,
167
+ muted: muted,
168
+ shouldLoad: shouldLoad,
169
+ autoPlay: true,
170
+ loop: true
160
171
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
161
172
  className: styles.content
162
173
  }, children));
@@ -172,11 +183,16 @@ var propTypes = {
172
183
  resolution: PropTypes__default["default"].number,
173
184
  background: PropTypes__default["default"].oneOfType([core.PropTypes.backgroundElement, PropTypes__default["default"].arrayOf(core.PropTypes.backgroundElement)]),
174
185
  playing: PropTypes__default["default"].bool,
186
+ muted: PropTypes__default["default"].bool,
175
187
  children: PropTypes__default["default"].node,
176
188
  className: PropTypes__default["default"].string,
177
189
  layerClassName: PropTypes__default["default"].string,
178
190
  backgroundClassName: PropTypes__default["default"].string,
179
191
  loadingMode: PropTypes__default["default"].string,
192
+ mediaRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
193
+ // eslint-disable-next-line react/forbid-prop-types
194
+ current: PropTypes__default["default"].any
195
+ })]),
180
196
  shouldLoad: PropTypes__default["default"].bool
181
197
  };
182
198
  var defaultProps = {
@@ -185,11 +201,13 @@ var defaultProps = {
185
201
  resolution: 1,
186
202
  background: [],
187
203
  playing: false,
204
+ muted: false,
188
205
  children: null,
189
206
  className: null,
190
207
  layerClassName: null,
191
208
  backgroundClassName: null,
192
209
  loadingMode: 'lazy',
210
+ mediaRef: null,
193
211
  shouldLoad: true
194
212
  };
195
213
 
@@ -199,11 +217,13 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
199
217
  resolution = _ref.resolution,
200
218
  background = _ref.background,
201
219
  playing = _ref.playing,
220
+ muted = _ref.muted,
202
221
  children = _ref.children,
203
222
  className = _ref.className,
204
223
  layerClassName = _ref.layerClassName,
205
224
  backgroundClassName = _ref.backgroundClassName,
206
225
  loadingMode = _ref.loadingMode,
226
+ mediaRef = _ref.mediaRef,
207
227
  shouldLoad = _ref.shouldLoad;
208
228
  var hasSize = width > 0 && height > 0;
209
229
  var layers = React.useMemo(function () {
@@ -242,10 +262,12 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
242
262
  resolution: resolution,
243
263
  className: classNames__default["default"]([styles.background, _defineProperty__default["default"]({}, backgroundClassName, backgroundClassName !== null)]),
244
264
  playing: playing,
265
+ muted: muted,
245
266
  horizontalAlign: horizontalAlign,
246
267
  verticalAlign: verticalAlign,
247
268
  loadingMode: loadingMode,
248
- shouldLoad: shouldLoad
269
+ shouldLoad: shouldLoad,
270
+ mediaRef: mediaRef
249
271
  }, layer)));
250
272
  })), /*#__PURE__*/React__default["default"].createElement("div", {
251
273
  className: styles.content
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-background",
3
- "version": "0.3.150",
3
+ "version": "0.3.156",
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.150",
52
- "@micromag/element-video": "^0.3.150",
51
+ "@micromag/core": "^0.3.156",
52
+ "@micromag/element-video": "^0.3.156",
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": "c9441be7a115a52416883e404feeca422af4f2da"
62
+ "gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
63
63
  }