@micromag/screen-slideshow 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 +4 -2
  2. package/es/index.js +390 -236
  3. package/package.json +16 -15
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ImageMedia, ImageElement, BackgroundElement, Header, Footer, Transitions } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { ImageMedia, ImageElement, BackgroundElement, Header, Footer, Transitions, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface SlideshowScreenProps {
5
6
  slides?: ImageMedia[] | ImageElement[];
@@ -14,9 +15,10 @@ interface SlideshowScreenProps {
14
15
  active?: boolean;
15
16
  preload?: boolean;
16
17
  transitions?: Transitions | null;
18
+ mediaRef?: ForwardedRef<MediaElement> | null;
17
19
  className?: string | null;
18
20
  }
19
- declare function SlideshowScreen({ slides, withCaptions, background, header, footer, current, active, preload, spacing, transitionDelay, captionMaxLines, transitions, className, }: SlideshowScreenProps): react_jsx_runtime.JSX.Element;
21
+ declare function SlideshowScreen({ slides, withCaptions, background, header, footer, current, active, preload, spacing, transitionDelay, captionMaxLines, transitions, mediaRef: customMediaRef, className, }: SlideshowScreenProps): react_jsx_runtime.JSX.Element;
20
22
 
21
23
  declare const _default: {
22
24
  id: string;
package/es/index.js CHANGED
@@ -1,13 +1,11 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
2
+ import { c } from 'react/compiler-runtime';
5
3
  import classNames from 'classnames';
6
- import { useState, useCallback, useRef } from 'react';
4
+ import { useState, useRef } from 'react';
7
5
  import { Transitions, ScreenElement } from '@micromag/core/components';
8
6
  import { useScreenSize, useViewerContext, useViewerInteraction, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
9
7
  import { useDimensionObserver } from '@micromag/core/hooks';
10
- import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled } from '@micromag/core/utils';
8
+ import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, mergeRefs } from '@micromag/core/utils';
11
9
  import Background from '@micromag/element-background';
12
10
  import Container from '@micromag/element-container';
13
11
  import Footer from '@micromag/element-footer';
@@ -18,229 +16,406 @@ import { jsxs, jsx } from 'react/jsx-runtime';
18
16
 
19
17
  var styles = {"container":"micromag-screen-slideshow-container","background":"micromag-screen-slideshow-background","content":"micromag-screen-slideshow-content","inner":"micromag-screen-slideshow-inner","placeholder":"micromag-screen-slideshow-placeholder","caption":"micromag-screen-slideshow-caption","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
20
18
 
21
- var emptyArray = [];
22
- function SlideshowScreen(_ref) {
23
- var _ref$slides = _ref.slides,
24
- slides = _ref$slides === void 0 ? emptyArray : _ref$slides,
25
- _ref$withCaptions = _ref.withCaptions,
26
- withCaptions = _ref$withCaptions === void 0 ? false : _ref$withCaptions,
27
- _ref$background = _ref.background,
28
- background = _ref$background === void 0 ? null : _ref$background,
29
- _ref$header = _ref.header,
30
- header = _ref$header === void 0 ? null : _ref$header,
31
- _ref$footer = _ref.footer,
32
- footer = _ref$footer === void 0 ? null : _ref$footer,
33
- _ref$current = _ref.current,
34
- current = _ref$current === void 0 ? true : _ref$current,
35
- _ref$active = _ref.active,
36
- active = _ref$active === void 0 ? true : _ref$active,
37
- _ref$preload = _ref.preload,
38
- preload = _ref$preload === void 0 ? true : _ref$preload,
39
- _ref$spacing = _ref.spacing,
40
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
41
- _ref$transitionDelay = _ref.transitionDelay,
42
- transitionDelay = _ref$transitionDelay === void 0 ? 1 : _ref$transitionDelay,
43
- _ref$captionMaxLines = _ref.captionMaxLines,
44
- captionMaxLines = _ref$captionMaxLines === void 0 ? 2 : _ref$captionMaxLines,
45
- _ref$transitions = _ref.transitions,
46
- transitions = _ref$transitions === void 0 ? null : _ref$transitions,
47
- _ref$className = _ref.className,
48
- className = _ref$className === void 0 ? null : _ref$className;
49
- var _useScreenSize = useScreenSize(),
50
- width = _useScreenSize.width,
51
- height = _useScreenSize.height,
52
- resolution = _useScreenSize.resolution;
53
- var _useViewerContext = useViewerContext(),
54
- viewerTopHeight = _useViewerContext.topHeight,
55
- viewerBottomHeight = _useViewerContext.bottomHeight;
56
- var _useViewerInteraction = useViewerInteraction(),
57
- enableInteraction = _useViewerInteraction.enableInteraction,
58
- disableInteraction = _useViewerInteraction.disableInteraction;
59
- var _useScreenRenderConte = useScreenRenderContext(),
60
- isView = _useScreenRenderConte.isView,
61
- isPreview = _useScreenRenderConte.isPreview,
62
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
63
- isEdit = _useScreenRenderConte.isEdit,
64
- isStatic = _useScreenRenderConte.isStatic,
65
- isCapture = _useScreenRenderConte.isCapture;
66
- var _usePlaybackContext = usePlaybackContext(),
67
- muted = _usePlaybackContext.muted;
68
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
69
- mediaRef = _usePlaybackMediaRef.ref,
70
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
71
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
72
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
73
- var mediaShouldLoad = current || preload;
74
- var finalSpacing = isPlaceholder ? 5 : spacing;
75
- var _useState = useState(0),
76
- _useState2 = _slicedToArray(_useState, 2),
77
- imagesLoaded = _useState2[0],
78
- setImagesLoaded = _useState2[1];
79
- var ready = true;
80
- var transitionPlaying = current && ready;
81
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview;
82
- var onImageLoaded = useCallback(function () {
83
- setImagesLoaded(imagesLoaded + 1);
84
- }, [imagesLoaded, setImagesLoaded]);
85
- var imagesEl = useRef([]);
86
-
87
- // Head and foot
88
- var hasHeader = isHeaderFilled(header);
89
- var hasFooter = isFooterFilled(footer);
90
- var footerProps = getFooterProps(footer, {
91
- isView: isView,
92
- current: current,
93
- isPreview: isPreview,
94
- enableInteraction: enableInteraction,
95
- disableInteraction: disableInteraction
96
- });
97
- var _useDimensionObserver = useDimensionObserver(),
98
- footerRef = _useDimensionObserver.ref,
99
- _useDimensionObserver2 = _useDimensionObserver.height,
100
- footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
101
- var _useDimensionObserver3 = useDimensionObserver(),
102
- headerRef = _useDimensionObserver3.ref;
103
- var items = (slides || []).map(function (item, itemI) {
104
- var _ref2 = item || {},
105
- _ref2$media = _ref2.media,
106
- media = _ref2$media === void 0 ? null : _ref2$media,
107
- _ref2$caption = _ref2.caption,
108
- caption = _ref2$caption === void 0 ? null : _ref2$caption;
109
- var imageSize = {
110
- width: width,
111
- height: height
19
+ const emptyArray = [];
20
+ function SlideshowScreen(t0) {
21
+ const $ = c(79);
22
+ const {
23
+ slides: t1,
24
+ withCaptions: t2,
25
+ background: t3,
26
+ header: t4,
27
+ footer: t5,
28
+ current: t6,
29
+ active: t7,
30
+ preload: t8,
31
+ spacing: t9,
32
+ transitionDelay: t10,
33
+ captionMaxLines: t11,
34
+ transitions: t12,
35
+ mediaRef: t13,
36
+ className: t14
37
+ } = t0;
38
+ const slides = t1 === undefined ? emptyArray : t1;
39
+ const withCaptions = t2 === undefined ? false : t2;
40
+ const background = t3 === undefined ? null : t3;
41
+ const header = t4 === undefined ? null : t4;
42
+ const footer = t5 === undefined ? null : t5;
43
+ const current = t6 === undefined ? true : t6;
44
+ const active = t7 === undefined ? true : t7;
45
+ const preload = t8 === undefined ? true : t8;
46
+ const spacing = t9 === undefined ? 20 : t9;
47
+ const transitionDelay = t10 === undefined ? 1 : t10;
48
+ const captionMaxLines = t11 === undefined ? 2 : t11;
49
+ const transitions = t12 === undefined ? null : t12;
50
+ const customMediaRef = t13 === undefined ? null : t13;
51
+ const className = t14 === undefined ? null : t14;
52
+ const {
53
+ width,
54
+ height,
55
+ resolution
56
+ } = useScreenSize();
57
+ const {
58
+ topHeight: viewerTopHeight,
59
+ bottomHeight: viewerBottomHeight
60
+ } = useViewerContext();
61
+ const {
62
+ enableInteraction,
63
+ disableInteraction
64
+ } = useViewerInteraction();
65
+ const {
66
+ isView,
67
+ isPreview,
68
+ isPlaceholder,
69
+ isEdit,
70
+ isStatic,
71
+ isCapture
72
+ } = useScreenRenderContext();
73
+ const {
74
+ muted
75
+ } = usePlaybackContext();
76
+ const {
77
+ ref: mediaRef,
78
+ isCurrent: t15
79
+ } = usePlaybackMediaRef(current, true);
80
+ const isCurrentMedia = t15 === undefined ? false : t15;
81
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
82
+ const mediaShouldLoad = current || preload;
83
+ const finalSpacing = isPlaceholder ? 5 : spacing;
84
+ const [imagesLoaded, setImagesLoaded] = useState(0);
85
+ const transitionPlaying = current && true;
86
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview;
87
+ let t16;
88
+ if ($[0] !== imagesLoaded) {
89
+ t16 = () => {
90
+ setImagesLoaded(imagesLoaded + 1);
112
91
  };
113
- var hasImage = media !== null;
114
- var hasCaption = isTextFilled(caption);
115
- var finalTransitionDelay = itemI > 0 ? itemI * (transitionDelay * 1000) : 0;
116
- return /*#__PURE__*/jsxs("div", {
117
- className: styles.gridItem,
118
- children: [/*#__PURE__*/jsx("div", {
119
- className: styles.imageContainer,
120
- ref: function ref(el) {
121
- imagesEl.current[itemI] = el;
122
- },
123
- children: /*#__PURE__*/jsx(Transitions, {
92
+ $[0] = imagesLoaded;
93
+ $[1] = t16;
94
+ } else {
95
+ t16 = $[1];
96
+ }
97
+ const onImageLoaded = t16;
98
+ let t17;
99
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
100
+ t17 = [];
101
+ $[2] = t17;
102
+ } else {
103
+ t17 = $[2];
104
+ }
105
+ const imagesEl = useRef(t17);
106
+ let t18;
107
+ if ($[3] !== header) {
108
+ t18 = isHeaderFilled(header);
109
+ $[3] = header;
110
+ $[4] = t18;
111
+ } else {
112
+ t18 = $[4];
113
+ }
114
+ const hasHeader = t18;
115
+ let t19;
116
+ if ($[5] !== footer) {
117
+ t19 = isFooterFilled(footer);
118
+ $[5] = footer;
119
+ $[6] = t19;
120
+ } else {
121
+ t19 = $[6];
122
+ }
123
+ const hasFooter = t19;
124
+ let t20;
125
+ if ($[7] !== current || $[8] !== disableInteraction || $[9] !== enableInteraction || $[10] !== footer || $[11] !== isPreview || $[12] !== isView) {
126
+ t20 = getFooterProps(footer, {
127
+ isView,
128
+ current,
129
+ isPreview,
130
+ enableInteraction,
131
+ disableInteraction
132
+ });
133
+ $[7] = current;
134
+ $[8] = disableInteraction;
135
+ $[9] = enableInteraction;
136
+ $[10] = footer;
137
+ $[11] = isPreview;
138
+ $[12] = isView;
139
+ $[13] = t20;
140
+ } else {
141
+ t20 = $[13];
142
+ }
143
+ const footerProps = t20;
144
+ const {
145
+ ref: footerRef,
146
+ height: t21
147
+ } = useDimensionObserver();
148
+ const footerHeight = t21 === undefined ? 0 : t21;
149
+ const {
150
+ ref: headerRef
151
+ } = useDimensionObserver();
152
+ let t22;
153
+ if ($[14] !== active || $[15] !== backgroundPlaying || $[16] !== captionMaxLines || $[17] !== height || $[18] !== isPreview || $[19] !== mediaShouldLoad || $[20] !== muted || $[21] !== onImageLoaded || $[22] !== resolution || $[23] !== slides || $[24] !== transitionDelay || $[25] !== transitionDisabled || $[26] !== transitionPlaying || $[27] !== transitions || $[28] !== width || $[29] !== withCaptions) {
154
+ t22 = (slides || []).map((item, itemI) => {
155
+ const {
156
+ media: t23,
157
+ caption: t24
158
+ } = item || {};
159
+ const media = t23 === undefined ? null : t23;
160
+ const caption = t24 === undefined ? null : t24;
161
+ const imageSize = {
162
+ width,
163
+ height
164
+ };
165
+ const hasImage = media !== null;
166
+ const hasCaption = isTextFilled(caption);
167
+ const finalTransitionDelay = itemI > 0 ? itemI * (transitionDelay * 1000) : 0;
168
+ return /*#__PURE__*/jsxs("div", {
169
+ className: styles.gridItem,
170
+ children: [/*#__PURE__*/jsx("div", {
171
+ className: styles.imageContainer,
172
+ ref: el => {
173
+ imagesEl.current[itemI] = el;
174
+ },
175
+ children: /*#__PURE__*/jsx(Transitions, {
176
+ transitions: transitions,
177
+ delay: finalTransitionDelay,
178
+ playing: transitionPlaying,
179
+ disabled: transitionDisabled,
180
+ fullscreen: true,
181
+ children: /*#__PURE__*/jsx(ScreenElement, {
182
+ placeholder: "image",
183
+ placeholderProps: {
184
+ className: styles.placeholder,
185
+ height: "100%"
186
+ },
187
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
188
+ id: "ebsPd4",
189
+ defaultMessage: "Image"
190
+ }),
191
+ emptyClassName: styles.emptyImage,
192
+ isEmpty: !hasImage,
193
+ children: mediaShouldLoad ? /*#__PURE__*/jsx(Visual, {
194
+ className: styles.image,
195
+ media: media,
196
+ muted: muted,
197
+ ...imageSize,
198
+ resolution: resolution,
199
+ objectFit: {
200
+ fit: "cover"
201
+ },
202
+ playing: backgroundPlaying,
203
+ active: active,
204
+ withoutVideo: isPreview,
205
+ onLoaded: onImageLoaded
206
+ }) : null
207
+ })
208
+ })
209
+ }), withCaptions ? /*#__PURE__*/jsx(Transitions, {
124
210
  transitions: transitions,
125
211
  delay: finalTransitionDelay,
126
212
  playing: transitionPlaying,
127
213
  disabled: transitionDisabled,
128
- fullscreen: true,
129
214
  children: /*#__PURE__*/jsx(ScreenElement, {
130
- placeholder: "image",
131
- placeholderProps: {
132
- className: styles.placeholder,
133
- height: '100%'
134
- },
215
+ placeholder: "line",
135
216
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
136
- id: "ebsPd4",
137
- defaultMessage: [{
138
- "type": 0,
139
- "value": "Image"
140
- }]
217
+ id: "6tIigB",
218
+ defaultMessage: "Caption"
141
219
  }),
142
- emptyClassName: styles.emptyImage,
143
- isEmpty: !hasImage,
144
- children: mediaShouldLoad ? /*#__PURE__*/jsx(Visual, _objectSpread(_objectSpread({
145
- className: styles.image,
146
- media: media,
147
- muted: muted
148
- }, imageSize), {}, {
149
- resolution: resolution,
150
- objectFit: {
151
- fit: 'cover'
152
- },
153
- playing: backgroundPlaying,
154
- active: active,
155
- withoutVideo: isPreview,
156
- onLoaded: onImageLoaded
157
- })) : null
220
+ emptyClassName: styles.emptyCaption,
221
+ isEmpty: !hasCaption,
222
+ children: hasCaption ? /*#__PURE__*/jsx("div", {
223
+ className: styles.caption,
224
+ children: /*#__PURE__*/jsx(Text, {
225
+ ...caption,
226
+ className: styles.captionText,
227
+ lineClamp: captionMaxLines
228
+ })
229
+ }) : null
158
230
  })
159
- })
160
- }), withCaptions ? /*#__PURE__*/jsx(Transitions, {
161
- transitions: transitions,
162
- delay: finalTransitionDelay,
163
- playing: transitionPlaying,
164
- disabled: transitionDisabled,
165
- children: /*#__PURE__*/jsx(ScreenElement, {
166
- placeholder: "line",
167
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
168
- id: "6tIigB",
169
- defaultMessage: [{
170
- "type": 0,
171
- "value": "Caption"
172
- }]
173
- }),
174
- emptyClassName: styles.emptyCaption,
175
- isEmpty: !hasCaption,
176
- children: hasCaption ? /*#__PURE__*/jsx("div", {
177
- className: styles.caption,
178
- children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, caption), {}, {
179
- className: styles.captionText,
180
- lineClamp: captionMaxLines
181
- }))
182
- }) : null
183
- })
184
- }) : null]
185
- }, "item-".concat(itemI));
186
- });
187
- return /*#__PURE__*/jsxs("div", {
188
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
189
- "data-screen-ready": ready,
190
- children: [/*#__PURE__*/jsx(Container, {
231
+ }) : null]
232
+ }, `item-${itemI}`);
233
+ });
234
+ $[14] = active;
235
+ $[15] = backgroundPlaying;
236
+ $[16] = captionMaxLines;
237
+ $[17] = height;
238
+ $[18] = isPreview;
239
+ $[19] = mediaShouldLoad;
240
+ $[20] = muted;
241
+ $[21] = onImageLoaded;
242
+ $[22] = resolution;
243
+ $[23] = slides;
244
+ $[24] = transitionDelay;
245
+ $[25] = transitionDisabled;
246
+ $[26] = transitionPlaying;
247
+ $[27] = transitions;
248
+ $[28] = width;
249
+ $[29] = withCaptions;
250
+ $[30] = t22;
251
+ } else {
252
+ t22 = $[30];
253
+ }
254
+ const items = t22;
255
+ let t23;
256
+ if ($[31] !== className || $[32] !== isPlaceholder) {
257
+ t23 = classNames([styles.container, className, {
258
+ [styles.isPlaceholder]: isPlaceholder
259
+ }]);
260
+ $[31] = className;
261
+ $[32] = isPlaceholder;
262
+ $[33] = t23;
263
+ } else {
264
+ t23 = $[33];
265
+ }
266
+ const t24 = !isPreview ? viewerTopHeight : null;
267
+ const t25 = (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0);
268
+ let t26;
269
+ if ($[34] !== t24 || $[35] !== t25) {
270
+ t26 = {
271
+ paddingTop: t24,
272
+ paddingBottom: t25
273
+ };
274
+ $[34] = t24;
275
+ $[35] = t25;
276
+ $[36] = t26;
277
+ } else {
278
+ t26 = $[36];
279
+ }
280
+ let t27;
281
+ if ($[37] !== isPlaceholder) {
282
+ t27 = isPlaceholder ? /*#__PURE__*/jsx(ScreenElement, {
283
+ placeholder: "image",
284
+ placeholderProps: {
285
+ className: styles.placeholder,
286
+ height: "100%"
287
+ },
288
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
289
+ id: "ebsPd4",
290
+ defaultMessage: "Image"
291
+ })
292
+ }) : null;
293
+ $[37] = isPlaceholder;
294
+ $[38] = t27;
295
+ } else {
296
+ t27 = $[38];
297
+ }
298
+ let t28;
299
+ if ($[39] !== finalSpacing || $[40] !== hasHeader || $[41] !== header || $[42] !== headerRef || $[43] !== isPlaceholder || $[44] !== isPreview || $[45] !== viewerTopHeight) {
300
+ t28 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
301
+ className: styles.header,
302
+ ref: headerRef,
303
+ style: {
304
+ padding: finalSpacing,
305
+ paddingTop: finalSpacing / 2,
306
+ transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
307
+ },
308
+ children: /*#__PURE__*/jsx(Header, {
309
+ ...header
310
+ })
311
+ }) : null;
312
+ $[39] = finalSpacing;
313
+ $[40] = hasHeader;
314
+ $[41] = header;
315
+ $[42] = headerRef;
316
+ $[43] = isPlaceholder;
317
+ $[44] = isPreview;
318
+ $[45] = viewerTopHeight;
319
+ $[46] = t28;
320
+ } else {
321
+ t28 = $[46];
322
+ }
323
+ let t29;
324
+ if ($[47] !== finalSpacing || $[48] !== footerProps || $[49] !== footerRef || $[50] !== hasFooter || $[51] !== isPlaceholder) {
325
+ t29 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
326
+ className: styles.footer,
327
+ ref: footerRef,
328
+ style: {
329
+ padding: finalSpacing / 2
330
+ },
331
+ children: /*#__PURE__*/jsx(Footer, {
332
+ ...footerProps
333
+ })
334
+ }) : null;
335
+ $[47] = finalSpacing;
336
+ $[48] = footerProps;
337
+ $[49] = footerRef;
338
+ $[50] = hasFooter;
339
+ $[51] = isPlaceholder;
340
+ $[52] = t29;
341
+ } else {
342
+ t29 = $[52];
343
+ }
344
+ let t30;
345
+ if ($[53] !== items || $[54] !== t26 || $[55] !== t27 || $[56] !== t28 || $[57] !== t29) {
346
+ t30 = /*#__PURE__*/jsxs("div", {
347
+ className: styles.inner,
348
+ style: t26,
349
+ children: [t27, t28, items, t29]
350
+ });
351
+ $[53] = items;
352
+ $[54] = t26;
353
+ $[55] = t27;
354
+ $[56] = t28;
355
+ $[57] = t29;
356
+ $[58] = t30;
357
+ } else {
358
+ t30 = $[58];
359
+ }
360
+ let t31;
361
+ if ($[59] !== height || $[60] !== t30 || $[61] !== width) {
362
+ t31 = /*#__PURE__*/jsx(Container, {
191
363
  width: width,
192
364
  height: height,
193
365
  className: styles.content,
194
- children: /*#__PURE__*/jsxs("div", {
195
- className: styles.inner,
196
- style: {
197
- paddingTop: !isPreview ? viewerTopHeight : null,
198
- paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
199
- },
200
- children: [isPlaceholder ? /*#__PURE__*/jsx(ScreenElement, {
201
- placeholder: "image",
202
- placeholderProps: {
203
- className: styles.placeholder,
204
- height: '100%'
205
- },
206
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
207
- id: "ebsPd4",
208
- defaultMessage: [{
209
- "type": 0,
210
- "value": "Image"
211
- }]
212
- })
213
- }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
214
- className: styles.header,
215
- ref: headerRef,
216
- style: {
217
- padding: finalSpacing,
218
- paddingTop: finalSpacing / 2,
219
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
220
- },
221
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
222
- }) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
223
- className: styles.footer,
224
- ref: footerRef,
225
- style: {
226
- padding: finalSpacing / 2
227
- },
228
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
229
- }) : null]
230
- })
231
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
366
+ children: t30
367
+ });
368
+ $[59] = height;
369
+ $[60] = t30;
370
+ $[61] = width;
371
+ $[62] = t31;
372
+ } else {
373
+ t31 = $[62];
374
+ }
375
+ let t32;
376
+ if ($[63] !== background || $[64] !== backgroundPlaying || $[65] !== customMediaRef || $[66] !== height || $[67] !== isPlaceholder || $[68] !== isPreview || $[69] !== mediaRef || $[70] !== mediaShouldLoad || $[71] !== muted || $[72] !== resolution || $[73] !== width) {
377
+ t32 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
232
378
  background: background,
233
379
  width: width,
234
380
  height: height,
235
381
  resolution: resolution,
236
382
  muted: muted,
237
- mediaRef: mediaRef,
383
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
238
384
  playing: backgroundPlaying,
239
385
  shouldLoad: mediaShouldLoad,
240
386
  withoutVideo: isPreview,
241
387
  className: styles.background
242
- }) : null]
243
- });
388
+ }) : null;
389
+ $[63] = background;
390
+ $[64] = backgroundPlaying;
391
+ $[65] = customMediaRef;
392
+ $[66] = height;
393
+ $[67] = isPlaceholder;
394
+ $[68] = isPreview;
395
+ $[69] = mediaRef;
396
+ $[70] = mediaShouldLoad;
397
+ $[71] = muted;
398
+ $[72] = resolution;
399
+ $[73] = width;
400
+ $[74] = t32;
401
+ } else {
402
+ t32 = $[74];
403
+ }
404
+ let t33;
405
+ if ($[75] !== t23 || $[76] !== t31 || $[77] !== t32) {
406
+ t33 = /*#__PURE__*/jsxs("div", {
407
+ className: t23,
408
+ "data-screen-ready": true,
409
+ children: [t31, t32]
410
+ });
411
+ $[75] = t23;
412
+ $[76] = t31;
413
+ $[77] = t32;
414
+ $[78] = t33;
415
+ } else {
416
+ t33 = $[78];
417
+ }
418
+ return t33;
244
419
  }
245
420
 
246
421
  // import * as transforms from './transforms/index';
@@ -251,19 +426,13 @@ var definition = [{
251
426
  group: {
252
427
  label: defineMessage({
253
428
  id: "6mX2ya",
254
- defaultMessage: [{
255
- "type": 0,
256
- "value": "Images"
257
- }]
429
+ defaultMessage: "Images"
258
430
  }),
259
431
  order: 7
260
432
  },
261
433
  title: defineMessage({
262
434
  id: "MhGUaY",
263
- defaultMessage: [{
264
- "type": 0,
265
- "value": "Slideshow"
266
- }]
435
+ defaultMessage: "Slideshow"
267
436
  }),
268
437
  component: SlideshowScreen,
269
438
  fields: [{
@@ -271,42 +440,30 @@ var definition = [{
271
440
  type: 'visuals-with-caption',
272
441
  label: defineMessage({
273
442
  id: "muYwrB",
274
- defaultMessage: [{
275
- "type": 0,
276
- "value": "Images"
277
- }]
443
+ defaultMessage: "Images"
278
444
  })
279
445
  }, {
280
446
  name: 'transitionDelay',
281
447
  type: 'number',
282
448
  min: 0,
283
- "float": true,
449
+ float: true,
284
450
  label: defineMessage({
285
451
  id: "/6zaOP",
286
- defaultMessage: [{
287
- "type": 0,
288
- "value": "Transition Delay (in seconds)"
289
- }]
452
+ defaultMessage: "Transition Delay (in seconds)"
290
453
  })
291
454
  }, {
292
455
  name: 'background',
293
456
  type: 'background',
294
457
  label: defineMessage({
295
458
  id: "+MPZRu",
296
- defaultMessage: [{
297
- "type": 0,
298
- "value": "Background"
299
- }]
459
+ defaultMessage: "Background"
300
460
  })
301
461
  }, {
302
462
  name: 'header',
303
463
  type: 'header',
304
464
  label: defineMessage({
305
465
  id: "rhuDxI",
306
- defaultMessage: [{
307
- "type": 0,
308
- "value": "Header"
309
- }]
466
+ defaultMessage: "Header"
310
467
  }),
311
468
  theme: {
312
469
  badge: {
@@ -321,10 +478,7 @@ var definition = [{
321
478
  type: 'footer',
322
479
  label: defineMessage({
323
480
  id: "g4nybp",
324
- defaultMessage: [{
325
- "type": 0,
326
- "value": "Footer"
327
- }]
481
+ defaultMessage: "Footer"
328
482
  }),
329
483
  theme: {
330
484
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-slideshow",
3
- "version": "0.4.70",
3
+ "version": "0.4.74",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -36,6 +36,7 @@
36
36
  "exports": {
37
37
  ".": {
38
38
  "types": "./es/index.d.ts",
39
+ "style": "./assets/css/styles.css",
39
40
  "import": "./es/index.js"
40
41
  },
41
42
  "./assets/css/styles": "./assets/css/styles.css",
@@ -52,24 +53,24 @@
52
53
  "build": "../../scripts/prepare-package.sh --types"
53
54
  },
54
55
  "devDependencies": {
55
- "react": "^18.3.0 || ^19.0.0",
56
- "react-dom": "^18.3.0 || ^19.0.0"
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0"
57
58
  },
58
59
  "peerDependencies": {
59
- "react": "^18.3.0 || ^19.0.0",
60
- "react-dom": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0"
61
62
  },
62
63
  "dependencies": {
63
64
  "@babel/runtime": "^7.28.6",
64
- "@micromag/core": "^0.4.69",
65
- "@micromag/element-background": "^0.4.70",
66
- "@micromag/element-container": "^0.4.69",
67
- "@micromag/element-footer": "^0.4.70",
68
- "@micromag/element-header": "^0.4.69",
69
- "@micromag/element-layout": "^0.4.69",
70
- "@micromag/element-text": "^0.4.69",
71
- "@micromag/element-visual": "^0.4.70",
72
- "@micromag/transforms": "^0.4.69",
65
+ "@micromag/core": "^0.4.74",
66
+ "@micromag/element-background": "^0.4.74",
67
+ "@micromag/element-container": "^0.4.74",
68
+ "@micromag/element-footer": "^0.4.74",
69
+ "@micromag/element-header": "^0.4.74",
70
+ "@micromag/element-layout": "^0.4.74",
71
+ "@micromag/element-text": "^0.4.74",
72
+ "@micromag/element-visual": "^0.4.74",
73
+ "@micromag/transforms": "^0.4.74",
73
74
  "classnames": "^2.2.6",
74
75
  "lodash": "^4.17.23",
75
76
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -79,6 +80,6 @@
79
80
  "access": "public",
80
81
  "registry": "https://registry.npmjs.org/"
81
82
  },
82
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
83
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
83
84
  "types": "es/index.d.ts"
84
85
  }