@micromag/element-background 0.4.70 → 0.4.74

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.d.ts +6 -10
  2. package/es/index.js +347 -189
  3. package/package.json +8 -6
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import React from 'react';
3
- import { BackgroundElement, Color, ImageMedia, VideoMedia } from '@micromag/core';
2
+ import { ReactNode, ForwardedRef } from 'react';
3
+ import { BackgroundElement, MediaElement, Color, ImageMedia, VideoMedia } from '@micromag/core';
4
4
 
5
5
  interface BackgroundLayersProps {
6
6
  width?: number | null;
@@ -9,14 +9,12 @@ interface BackgroundLayersProps {
9
9
  background?: BackgroundElement | BackgroundElement[] | null;
10
10
  playing?: boolean;
11
11
  muted?: boolean;
12
- children?: React.ReactNode | null;
12
+ children?: ReactNode | null;
13
13
  className?: string | null;
14
14
  layerClassName?: string | null;
15
15
  backgroundClassName?: string | null;
16
16
  loadingMode?: string;
17
- mediaRef?: ((...args: unknown[]) => void | {
18
- current?: unknown;
19
- }) | null;
17
+ mediaRef?: ForwardedRef<MediaElement> | null;
20
18
  shouldLoad?: boolean;
21
19
  withoutVideo?: boolean;
22
20
  onPlayError?: boolean | null;
@@ -36,13 +34,11 @@ interface BackgroundProps {
36
34
  loop?: boolean;
37
35
  color?: Color | null;
38
36
  media?: ImageMedia | VideoMedia | null;
39
- mediaRef?: ((...args: unknown[]) => void | {
40
- current?: unknown;
41
- }) | null;
37
+ mediaRef?: ForwardedRef<MediaElement> | null;
42
38
  className?: string | null;
43
39
  playing?: boolean;
44
40
  muted?: boolean;
45
- children?: React.ReactNode | null;
41
+ children?: ReactNode | null;
46
42
  loadingMode?: string;
47
43
  shouldLoad?: boolean;
48
44
  onPlayError?: ((...args: unknown[]) => void) | null;
package/es/index.js CHANGED
@@ -1,130 +1,165 @@
1
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
- import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
1
+ import { c } from 'react/compiler-runtime';
4
2
  import classNames from 'classnames';
5
- import { useRef, useMemo } from 'react';
6
3
  import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
7
4
  import { getSizeWithinBounds } from '@folklore/size';
5
+ import { useState } from 'react';
8
6
  import { useSetting } from '@micromag/core/contexts';
9
7
  import Video from '@micromag/element-video';
10
8
  import { jsxs, jsx } from 'react/jsx-runtime';
11
9
 
12
10
  var styles = {"container":"micromag-element-background-container","videoContainer":"micromag-element-background-videoContainer","video":"micromag-element-background-video","layers":"micromag-element-background-layers","layer":"micromag-element-background-layer","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
13
11
 
14
- function Background(_ref) {
15
- var _ref$width = _ref.width,
16
- width = _ref$width === void 0 ? null : _ref$width,
17
- _ref$height = _ref.height,
18
- height = _ref$height === void 0 ? null : _ref$height,
19
- _ref$resolution = _ref.resolution,
20
- resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
21
- _ref$fit = _ref.fit,
22
- fit = _ref$fit === void 0 ? null : _ref$fit,
23
- _ref$horizontalAlign = _ref.horizontalAlign,
24
- horizontalAlign = _ref$horizontalAlign === void 0 ? 'center' : _ref$horizontalAlign,
25
- _ref$verticalAlign = _ref.verticalAlign,
26
- verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
27
- _ref$repeat = _ref.repeat,
28
- repeat = _ref$repeat === void 0 ? false : _ref$repeat,
29
- _ref$loop = _ref.loop,
30
- loop = _ref$loop === void 0 ? true : _ref$loop,
31
- _ref$color = _ref.color,
32
- color = _ref$color === void 0 ? null : _ref$color,
33
- _ref$media = _ref.media,
34
- media = _ref$media === void 0 ? null : _ref$media,
35
- _ref$mediaRef = _ref.mediaRef,
36
- mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
37
- _ref$className = _ref.className,
38
- className = _ref$className === void 0 ? null : _ref$className,
39
- _ref$playing = _ref.playing,
40
- playing = _ref$playing === void 0 ? false : _ref$playing,
41
- _ref$muted = _ref.muted,
42
- muted = _ref$muted === void 0 ? false : _ref$muted,
43
- _ref$children = _ref.children,
44
- children = _ref$children === void 0 ? null : _ref$children,
45
- _ref$loadingMode = _ref.loadingMode,
46
- loadingMode = _ref$loadingMode === void 0 ? 'lazy' : _ref$loadingMode,
47
- _ref$shouldLoad = _ref.shouldLoad,
48
- shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
49
- _ref$onPlayError = _ref.onPlayError,
50
- onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError,
51
- _ref$withoutVideo = _ref.withoutVideo,
52
- withoutVideo = _ref$withoutVideo === void 0 ? false : _ref$withoutVideo,
53
- _ref$forceMuted = _ref.forceMuted,
54
- forceMuted = _ref$forceMuted === void 0 ? false : _ref$forceMuted,
55
- _ref$qualityStartLeve = _ref.qualityStartLevel,
56
- qualityStartLevel = _ref$qualityStartLeve === void 0 ? null : _ref$qualityStartLeve,
57
- _ref$onQualityLevelCh = _ref.onQualityLevelChange,
58
- onQualityLevelChange = _ref$onQualityLevelCh === void 0 ? null : _ref$onQualityLevelCh;
59
- var _ref2 = media || {},
60
- _ref2$type = _ref2.type,
61
- mediaType = _ref2$type === void 0 ? null : _ref2$type,
62
- _ref2$metadata = _ref2.metadata,
63
- mediaMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
64
- mediaThumbnailUrl = _ref2.thumbnail_url;
65
- var _ref3 = mediaMetadata || {},
66
- _ref3$width = _ref3.width,
67
- mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
68
- _ref3$height = _ref3.height,
69
- mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height;
70
- var isVideo = mediaType === 'video';
71
- var isImage = mediaType === 'image';
72
-
73
- // Lazy load
74
- var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
75
- var wasLoadedRef = useRef(newShouldLoad);
76
- if (newShouldLoad && !wasLoadedRef.current) {
77
- wasLoadedRef.current = newShouldLoad;
12
+ function Background(t0) {
13
+ const $ = c(9);
14
+ const {
15
+ width: t1,
16
+ height: t2,
17
+ resolution: t3,
18
+ fit: t4,
19
+ horizontalAlign: t5,
20
+ verticalAlign: t6,
21
+ repeat: t7,
22
+ loop: t8,
23
+ color: t9,
24
+ media: t10,
25
+ mediaRef: t11,
26
+ className: t12,
27
+ playing: t13,
28
+ muted: t14,
29
+ children: t15,
30
+ loadingMode: t16,
31
+ shouldLoad: t17,
32
+ onPlayError: t18,
33
+ withoutVideo: t19,
34
+ forceMuted: t20,
35
+ qualityStartLevel: t21,
36
+ onQualityLevelChange: t22
37
+ } = t0;
38
+ const width = t1 === undefined ? null : t1;
39
+ const height = t2 === undefined ? null : t2;
40
+ const resolution = t3 === undefined ? 1 : t3;
41
+ const fit = t4 === undefined ? null : t4;
42
+ const horizontalAlign = t5 === undefined ? "center" : t5;
43
+ const verticalAlign = t6 === undefined ? "center" : t6;
44
+ const repeat = t7 === undefined ? false : t7;
45
+ const loop = t8 === undefined ? true : t8;
46
+ const color = t9 === undefined ? null : t9;
47
+ const media = t10 === undefined ? null : t10;
48
+ const mediaRef = t11 === undefined ? null : t11;
49
+ const className = t12 === undefined ? null : t12;
50
+ const playing = t13 === undefined ? false : t13;
51
+ const muted = t14 === undefined ? false : t14;
52
+ const children = t15 === undefined ? null : t15;
53
+ const loadingMode = t16 === undefined ? "lazy" : t16;
54
+ const shouldLoad = t17 === undefined ? true : t17;
55
+ const onPlayError = t18 === undefined ? null : t18;
56
+ const withoutVideo = t19 === undefined ? false : t19;
57
+ const forceMuted = t20 === undefined ? false : t20;
58
+ const qualityStartLevel = t21 === undefined ? null : t21;
59
+ const onQualityLevelChange = t22 === undefined ? null : t22;
60
+ const {
61
+ type: t23,
62
+ metadata: t24,
63
+ thumbnail_url: mediaThumbnailUrl
64
+ } = media || {};
65
+ const mediaType = t23 === undefined ? null : t23;
66
+ const mediaMetadata = t24 === undefined ? null : t24;
67
+ const {
68
+ width: t25,
69
+ height: t26
70
+ } = mediaMetadata || {};
71
+ const mediaWidth = t25 === undefined ? 0 : t25;
72
+ const mediaHeight = t26 === undefined ? 0 : t26;
73
+ const isVideo = mediaType === "video";
74
+ const isImage = mediaType === "image";
75
+ const newShouldLoad = shouldLoad || loadingMode !== "lazy";
76
+ const [wasLoaded, setWasLoaded] = useState(newShouldLoad);
77
+ if (newShouldLoad && !wasLoaded) {
78
+ setWasLoaded(newShouldLoad);
78
79
  }
79
- var finalShouldLoad = wasLoadedRef.current;
80
-
81
- // color
82
- var containerStyle = _objectSpread({
83
- width: width,
84
- height: height
85
- }, getStyleFromColor(color));
86
- var supportsWebp = useSetting('supportsWebp', false);
87
- var imageResolution = useSetting('imageResolution', resolution);
88
-
89
- // image
80
+ const finalShouldLoad = wasLoaded || shouldLoad;
81
+ let t27;
82
+ if ($[0] !== color) {
83
+ t27 = getStyleFromColor(color);
84
+ $[0] = color;
85
+ $[1] = t27;
86
+ } else {
87
+ t27 = $[1];
88
+ }
89
+ const containerStyle = {
90
+ width,
91
+ height,
92
+ ...t27
93
+ };
94
+ const supportsWebp = useSetting("supportsWebp", false);
95
+ const imageResolution = useSetting("imageResolution", resolution);
90
96
  if (media !== null && (isImage || isVideo && (!shouldLoad || withoutVideo))) {
91
- var finalUrl = getOptimalImageUrl(isVideo ? {
97
+ const finalUrl = getOptimalImageUrl(isVideo ? {
92
98
  url: mediaThumbnailUrl
93
99
  } : media, width, height, {
94
100
  resolution: imageResolution,
95
- supportsWebp: supportsWebp
101
+ supportsWebp
96
102
  });
97
- containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
98
- containerStyle.backgroundRepeat = repeat && !isVideo ? 'repeat' : 'no-repeat';
99
- containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
103
+ containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? `url("${finalUrl}")` : null;
104
+ containerStyle.backgroundRepeat = repeat && !isVideo ? "repeat" : "no-repeat";
105
+ let t28;
106
+ if ($[2] !== horizontalAlign || $[3] !== verticalAlign) {
107
+ t28 = [horizontalAlign, verticalAlign];
108
+ $[2] = horizontalAlign;
109
+ $[3] = verticalAlign;
110
+ $[4] = t28;
111
+ } else {
112
+ t28 = $[4];
113
+ }
114
+ containerStyle.backgroundPosition = t28.join(" ");
100
115
  if (fit !== null) {
101
116
  containerStyle.backgroundSize = fit;
102
- } else if (!repeat || isVideo) {
103
- containerStyle.backgroundSize = 'cover';
117
+ } else {
118
+ if (!repeat || isVideo) {
119
+ containerStyle.backgroundSize = "cover";
120
+ }
104
121
  }
105
122
  }
106
-
107
- // video
108
- var videoContainerStyle = {};
123
+ const videoContainerStyle = {};
109
124
  if (isVideo && shouldLoad) {
110
125
  if (width > 0 && height > 0) {
111
- var _getSizeWithinBounds = getSizeWithinBounds(mediaWidth, mediaHeight, width, height, {
112
- cover: fit === 'cover' || fit === null
113
- }),
114
- _getSizeWithinBounds$ = _getSizeWithinBounds.width,
115
- videoWidth = _getSizeWithinBounds$ === void 0 ? 0 : _getSizeWithinBounds$,
116
- _getSizeWithinBounds$2 = _getSizeWithinBounds.height,
117
- videoHeight = _getSizeWithinBounds$2 === void 0 ? 0 : _getSizeWithinBounds$2;
126
+ const {
127
+ width: t28,
128
+ height: t29
129
+ } = getSizeWithinBounds(mediaWidth, mediaHeight, width, height, {
130
+ cover: fit === "cover" || fit === null
131
+ });
132
+ const videoWidth = t28 === undefined ? 0 : t28;
133
+ const videoHeight = t29 === undefined ? 0 : t29;
118
134
  videoContainerStyle.width = videoWidth;
119
135
  videoContainerStyle.height = videoHeight;
120
136
  videoContainerStyle.left = -(videoWidth - width) / 2;
121
137
  videoContainerStyle.top = -(videoHeight - height) / 2;
122
138
  } else {
123
- videoContainerStyle.objectFit = 'cover';
139
+ videoContainerStyle.objectFit = "cover";
124
140
  }
125
141
  }
142
+ let t28;
143
+ if ($[5] !== className) {
144
+ t28 = classNames([styles.container, className]);
145
+ $[5] = className;
146
+ $[6] = t28;
147
+ } else {
148
+ t28 = $[6];
149
+ }
150
+ let t29;
151
+ if ($[7] !== children) {
152
+ t29 = /*#__PURE__*/jsx("div", {
153
+ className: styles.content,
154
+ children: children
155
+ });
156
+ $[7] = children;
157
+ $[8] = t29;
158
+ } else {
159
+ t29 = $[8];
160
+ }
126
161
  return /*#__PURE__*/jsxs("div", {
127
- className: classNames([styles.container, className]),
162
+ className: t28,
128
163
  style: containerStyle,
129
164
  children: [isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/jsx("div", {
130
165
  className: styles.videoContainer,
@@ -145,103 +180,226 @@ function Background(_ref) {
145
180
  qualityStartLevel: qualityStartLevel,
146
181
  onQualityLevelChange: onQualityLevelChange
147
182
  })
148
- }) : null, /*#__PURE__*/jsx("div", {
149
- className: styles.content,
150
- children: children
151
- })]
183
+ }) : null, t29]
152
184
  });
153
185
  }
154
186
 
155
- var _excluded = ["horizontalAlign", "verticalAlign"];
156
- function BackgroundLayers(_ref) {
157
- var _ref$width = _ref.width,
158
- width = _ref$width === void 0 ? null : _ref$width,
159
- _ref$height = _ref.height,
160
- height = _ref$height === void 0 ? null : _ref$height,
161
- _ref$resolution = _ref.resolution,
162
- resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
163
- _ref$background = _ref.background,
164
- background = _ref$background === void 0 ? null : _ref$background,
165
- _ref$playing = _ref.playing,
166
- playing = _ref$playing === void 0 ? false : _ref$playing,
167
- _ref$muted = _ref.muted,
168
- muted = _ref$muted === void 0 ? false : _ref$muted,
169
- _ref$children = _ref.children,
170
- children = _ref$children === void 0 ? null : _ref$children,
171
- _ref$className = _ref.className,
172
- className = _ref$className === void 0 ? null : _ref$className,
173
- _ref$layerClassName = _ref.layerClassName,
174
- layerClassName = _ref$layerClassName === void 0 ? null : _ref$layerClassName,
175
- _ref$backgroundClassN = _ref.backgroundClassName,
176
- backgroundClassName = _ref$backgroundClassN === void 0 ? null : _ref$backgroundClassN,
177
- _ref$loadingMode = _ref.loadingMode,
178
- loadingMode = _ref$loadingMode === void 0 ? 'lazy' : _ref$loadingMode,
179
- _ref$mediaRef = _ref.mediaRef,
180
- mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
181
- _ref$shouldLoad = _ref.shouldLoad,
182
- shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
183
- _ref$withoutVideo = _ref.withoutVideo,
184
- withoutVideo = _ref$withoutVideo === void 0 ? false : _ref$withoutVideo,
185
- _ref$onPlayError = _ref.onPlayError,
186
- onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError,
187
- _ref$qualityStartLeve = _ref.qualityStartLevel,
188
- qualityStartLevel = _ref$qualityStartLeve === void 0 ? null : _ref$qualityStartLeve,
189
- _ref$onQualityLevelCh = _ref.onQualityLevelChange,
190
- onQualityLevelChange = _ref$onQualityLevelCh === void 0 ? null : _ref$onQualityLevelCh;
191
- var hasSize = width !== null && height !== null && width > 0 && height > 0;
192
- var layers = useMemo(function () {
193
- return getLayersFromBackground(background);
194
- }, [background]);
195
- var maxZIndex = layers.length;
196
- if (layers.length === 0) {
197
- return null;
187
+ function BackgroundLayers(t0) {
188
+ const $ = c(56);
189
+ const {
190
+ width: t1,
191
+ height: t2,
192
+ resolution: t3,
193
+ background: t4,
194
+ playing: t5,
195
+ muted: t6,
196
+ children: t7,
197
+ className: t8,
198
+ layerClassName: t9,
199
+ backgroundClassName: t10,
200
+ loadingMode: t11,
201
+ mediaRef: t12,
202
+ shouldLoad: t13,
203
+ withoutVideo: t14,
204
+ onPlayError: t15,
205
+ qualityStartLevel: t16,
206
+ onQualityLevelChange: t17
207
+ } = t0;
208
+ const width = t1 === undefined ? null : t1;
209
+ const height = t2 === undefined ? null : t2;
210
+ const resolution = t3 === undefined ? 1 : t3;
211
+ const background = t4 === undefined ? null : t4;
212
+ const playing = t5 === undefined ? false : t5;
213
+ const muted = t6 === undefined ? false : t6;
214
+ const children = t7 === undefined ? null : t7;
215
+ const className = t8 === undefined ? null : t8;
216
+ const layerClassName = t9 === undefined ? null : t9;
217
+ const backgroundClassName = t10 === undefined ? null : t10;
218
+ const loadingMode = t11 === undefined ? "lazy" : t11;
219
+ const mediaRef = t12 === undefined ? null : t12;
220
+ const shouldLoad = t13 === undefined ? true : t13;
221
+ const withoutVideo = t14 === undefined ? false : t14;
222
+ const onPlayError = t15 === undefined ? null : t15;
223
+ const qualityStartLevel = t16 === undefined ? null : t16;
224
+ const onQualityLevelChange = t17 === undefined ? null : t17;
225
+ const hasSize = width !== null && height !== null && width > 0 && height > 0;
226
+ let t18;
227
+ let t19;
228
+ let t20;
229
+ let t21;
230
+ let t22;
231
+ if ($[0] !== background || $[1] !== backgroundClassName || $[2] !== className || $[3] !== hasSize || $[4] !== height || $[5] !== layerClassName || $[6] !== loadingMode || $[7] !== mediaRef || $[8] !== muted || $[9] !== onPlayError || $[10] !== onQualityLevelChange || $[11] !== playing || $[12] !== qualityStartLevel || $[13] !== resolution || $[14] !== shouldLoad || $[15] !== width || $[16] !== withoutVideo) {
232
+ t22 = Symbol.for("react.early_return_sentinel");
233
+ bb0: {
234
+ const layers = getLayersFromBackground(background);
235
+ const maxZIndex = layers.length;
236
+ if (layers.length === 0) {
237
+ t22 = null;
238
+ break bb0;
239
+ }
240
+ let t23;
241
+ if ($[22] !== hasSize || $[23] !== height || $[24] !== width) {
242
+ t23 = hasSize ? {
243
+ width,
244
+ height
245
+ } : null;
246
+ $[22] = hasSize;
247
+ $[23] = height;
248
+ $[24] = width;
249
+ $[25] = t23;
250
+ } else {
251
+ t23 = $[25];
252
+ }
253
+ let t24;
254
+ if ($[26] !== t23) {
255
+ t24 = {
256
+ ...t23
257
+ };
258
+ $[26] = t23;
259
+ $[27] = t24;
260
+ } else {
261
+ t24 = $[27];
262
+ }
263
+ const containerStyle = t24;
264
+ if ($[28] !== className) {
265
+ t20 = classNames([styles.container, className]);
266
+ $[28] = className;
267
+ $[29] = t20;
268
+ } else {
269
+ t20 = $[29];
270
+ }
271
+ t21 = containerStyle;
272
+ t18 = styles.layers;
273
+ let t25;
274
+ if ($[30] !== backgroundClassName || $[31] !== height || $[32] !== layerClassName || $[33] !== loadingMode || $[34] !== maxZIndex || $[35] !== mediaRef || $[36] !== muted || $[37] !== onPlayError || $[38] !== onQualityLevelChange || $[39] !== playing || $[40] !== qualityStartLevel || $[41] !== resolution || $[42] !== shouldLoad || $[43] !== width || $[44] !== withoutVideo) {
275
+ t25 = (t26, index) => {
276
+ const {
277
+ horizontalAlign: t27,
278
+ verticalAlign: t28,
279
+ ...layer
280
+ } = t26;
281
+ const horizontalAlign = t27 === undefined ? undefined : t27;
282
+ const verticalAlign = t28 === undefined ? undefined : t28;
283
+ return /*#__PURE__*/jsx("div", {
284
+ className: classNames([styles.layer, layerClassName, {
285
+ [styles.bottom]: verticalAlign === "bottom",
286
+ [styles.right]: horizontalAlign === "right"
287
+ }]),
288
+ style: {
289
+ zIndex: maxZIndex - index
290
+ },
291
+ children: /*#__PURE__*/jsx(Background, {
292
+ width: width,
293
+ height: height,
294
+ resolution: resolution,
295
+ className: classNames([styles.background, backgroundClassName]),
296
+ playing: playing,
297
+ muted: muted,
298
+ horizontalAlign: horizontalAlign,
299
+ verticalAlign: verticalAlign,
300
+ loadingMode: loadingMode,
301
+ shouldLoad: shouldLoad,
302
+ mediaRef: mediaRef,
303
+ withoutVideo: withoutVideo,
304
+ onPlayError: onPlayError,
305
+ qualityStartLevel: qualityStartLevel,
306
+ onQualityLevelChange: onQualityLevelChange,
307
+ ...layer
308
+ })
309
+ }, `background-${index}`);
310
+ };
311
+ $[30] = backgroundClassName;
312
+ $[31] = height;
313
+ $[32] = layerClassName;
314
+ $[33] = loadingMode;
315
+ $[34] = maxZIndex;
316
+ $[35] = mediaRef;
317
+ $[36] = muted;
318
+ $[37] = onPlayError;
319
+ $[38] = onQualityLevelChange;
320
+ $[39] = playing;
321
+ $[40] = qualityStartLevel;
322
+ $[41] = resolution;
323
+ $[42] = shouldLoad;
324
+ $[43] = width;
325
+ $[44] = withoutVideo;
326
+ $[45] = t25;
327
+ } else {
328
+ t25 = $[45];
329
+ }
330
+ t19 = layers.map(t25);
331
+ }
332
+ $[0] = background;
333
+ $[1] = backgroundClassName;
334
+ $[2] = className;
335
+ $[3] = hasSize;
336
+ $[4] = height;
337
+ $[5] = layerClassName;
338
+ $[6] = loadingMode;
339
+ $[7] = mediaRef;
340
+ $[8] = muted;
341
+ $[9] = onPlayError;
342
+ $[10] = onQualityLevelChange;
343
+ $[11] = playing;
344
+ $[12] = qualityStartLevel;
345
+ $[13] = resolution;
346
+ $[14] = shouldLoad;
347
+ $[15] = width;
348
+ $[16] = withoutVideo;
349
+ $[17] = t18;
350
+ $[18] = t19;
351
+ $[19] = t20;
352
+ $[20] = t21;
353
+ $[21] = t22;
354
+ } else {
355
+ t18 = $[17];
356
+ t19 = $[18];
357
+ t20 = $[19];
358
+ t21 = $[20];
359
+ t22 = $[21];
198
360
  }
199
-
200
- // color
201
- var containerStyle = _objectSpread({}, hasSize ? {
202
- width: width,
203
- height: height
204
- } : null);
205
- return /*#__PURE__*/jsxs("div", {
206
- className: classNames([styles.container, className]),
207
- style: containerStyle,
208
- children: [/*#__PURE__*/jsx("div", {
209
- className: styles.layers,
210
- children: layers.map(function (_ref2, index) {
211
- var _ref2$horizontalAlign = _ref2.horizontalAlign,
212
- horizontalAlign = _ref2$horizontalAlign === void 0 ? undefined : _ref2$horizontalAlign,
213
- _ref2$verticalAlign = _ref2.verticalAlign,
214
- verticalAlign = _ref2$verticalAlign === void 0 ? undefined : _ref2$verticalAlign,
215
- layer = _objectWithoutProperties(_ref2, _excluded);
216
- return /*#__PURE__*/jsx("div", {
217
- className: classNames([styles.layer, layerClassName, _defineProperty(_defineProperty({}, styles.bottom, verticalAlign === 'bottom'), styles.right, horizontalAlign === 'right')]),
218
- style: {
219
- zIndex: maxZIndex - index
220
- },
221
- children: /*#__PURE__*/jsx(Background, _objectSpread({
222
- width: width,
223
- height: height,
224
- resolution: resolution,
225
- className: classNames([styles.background, backgroundClassName]),
226
- playing: playing,
227
- muted: muted,
228
- horizontalAlign: horizontalAlign,
229
- verticalAlign: verticalAlign,
230
- loadingMode: loadingMode,
231
- shouldLoad: shouldLoad,
232
- mediaRef: mediaRef,
233
- withoutVideo: withoutVideo,
234
- onPlayError: onPlayError,
235
- qualityStartLevel: qualityStartLevel,
236
- onQualityLevelChange: onQualityLevelChange
237
- }, layer))
238
- }, "background-".concat(index));
239
- })
240
- }), /*#__PURE__*/jsx("div", {
361
+ if (t22 !== Symbol.for("react.early_return_sentinel")) {
362
+ return t22;
363
+ }
364
+ let t23;
365
+ if ($[46] !== t18 || $[47] !== t19) {
366
+ t23 = /*#__PURE__*/jsx("div", {
367
+ className: t18,
368
+ children: t19
369
+ });
370
+ $[46] = t18;
371
+ $[47] = t19;
372
+ $[48] = t23;
373
+ } else {
374
+ t23 = $[48];
375
+ }
376
+ let t24;
377
+ if ($[49] !== children) {
378
+ t24 = /*#__PURE__*/jsx("div", {
241
379
  className: styles.content,
242
380
  children: children
243
- })]
244
- });
381
+ });
382
+ $[49] = children;
383
+ $[50] = t24;
384
+ } else {
385
+ t24 = $[50];
386
+ }
387
+ let t25;
388
+ if ($[51] !== t20 || $[52] !== t21 || $[53] !== t23 || $[54] !== t24) {
389
+ t25 = /*#__PURE__*/jsxs("div", {
390
+ className: t20,
391
+ style: t21,
392
+ children: [t23, t24]
393
+ });
394
+ $[51] = t20;
395
+ $[52] = t21;
396
+ $[53] = t23;
397
+ $[54] = t24;
398
+ $[55] = t25;
399
+ } else {
400
+ t25 = $[55];
401
+ }
402
+ return t25;
245
403
  }
246
404
 
247
405
  export { Background, BackgroundLayers, BackgroundLayers as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-background",
3
- "version": "0.4.70",
3
+ "version": "0.4.74",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -33,9 +33,11 @@
33
33
  "type": "module",
34
34
  "module": "es/index.js",
35
35
  "types": "es/index.d.ts",
36
+ "style": "./assets/css/styles.css",
36
37
  "exports": {
37
38
  ".": {
38
39
  "import": "./es/index.js",
40
+ "style": "./assets/css/styles.css",
39
41
  "types": "./es/index.d.ts"
40
42
  },
41
43
  "./assets/css/styles": "./assets/css/styles.css",
@@ -52,16 +54,16 @@
52
54
  "build": "../../scripts/prepare-package.sh --types"
53
55
  },
54
56
  "devDependencies": {
55
- "react": "^18.3.0 || ^19.0.0"
57
+ "react": "^19.0.0"
56
58
  },
57
59
  "peerDependencies": {
58
- "react": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0"
59
61
  },
60
62
  "dependencies": {
61
63
  "@babel/runtime": "^7.28.6",
62
64
  "@folklore/size": "^0.1.20",
63
- "@micromag/core": "^0.4.69",
64
- "@micromag/element-video": "^0.4.70",
65
+ "@micromag/core": "^0.4.74",
66
+ "@micromag/element-video": "^0.4.74",
65
67
  "classnames": "^2.2.6",
66
68
  "lodash": "^4.17.23",
67
69
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -71,5 +73,5 @@
71
73
  "access": "public",
72
74
  "registry": "https://registry.npmjs.org/"
73
75
  },
74
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6"
76
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1"
75
77
  }