@micromag/screen-slideshow 0.4.71 → 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 +2 -2
  2. package/es/index.js +388 -236
  3. package/package.json +16 -15
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ForwardedRef } from 'react';
3
- import { ImageMedia, ImageElement, BackgroundElement, Header, Footer, Transitions } from '@micromag/core';
3
+ import { ImageMedia, ImageElement, BackgroundElement, Header, Footer, Transitions, MediaElement } from '@micromag/core';
4
4
 
5
5
  interface SlideshowScreenProps {
6
6
  slides?: ImageMedia[] | ImageElement[];
@@ -15,7 +15,7 @@ interface SlideshowScreenProps {
15
15
  active?: boolean;
16
16
  preload?: boolean;
17
17
  transitions?: Transitions | null;
18
- mediaRef?: ForwardedRef<HTMLMediaElement> | null;
18
+ mediaRef?: ForwardedRef<MediaElement> | null;
19
19
  className?: string | null;
20
20
  }
21
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;
package/es/index.js CHANGED
@@ -1,9 +1,7 @@
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';
@@ -18,219 +16,365 @@ 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$mediaRef = _ref.mediaRef,
48
- customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
49
- _ref$className = _ref.className,
50
- className = _ref$className === void 0 ? null : _ref$className;
51
- var _useScreenSize = useScreenSize(),
52
- width = _useScreenSize.width,
53
- height = _useScreenSize.height,
54
- resolution = _useScreenSize.resolution;
55
- var _useViewerContext = useViewerContext(),
56
- viewerTopHeight = _useViewerContext.topHeight,
57
- viewerBottomHeight = _useViewerContext.bottomHeight;
58
- var _useViewerInteraction = useViewerInteraction(),
59
- enableInteraction = _useViewerInteraction.enableInteraction,
60
- disableInteraction = _useViewerInteraction.disableInteraction;
61
- var _useScreenRenderConte = useScreenRenderContext(),
62
- isView = _useScreenRenderConte.isView,
63
- isPreview = _useScreenRenderConte.isPreview,
64
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
65
- isEdit = _useScreenRenderConte.isEdit,
66
- isStatic = _useScreenRenderConte.isStatic,
67
- isCapture = _useScreenRenderConte.isCapture;
68
- var _usePlaybackContext = usePlaybackContext(),
69
- muted = _usePlaybackContext.muted;
70
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
71
- mediaRef = _usePlaybackMediaRef.ref,
72
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
73
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
74
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
75
- var mediaShouldLoad = current || preload;
76
- var finalSpacing = isPlaceholder ? 5 : spacing;
77
- var _useState = useState(0),
78
- _useState2 = _slicedToArray(_useState, 2),
79
- imagesLoaded = _useState2[0],
80
- setImagesLoaded = _useState2[1];
81
- var ready = true;
82
- var transitionPlaying = current && ready;
83
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview;
84
- var onImageLoaded = useCallback(function () {
85
- setImagesLoaded(imagesLoaded + 1);
86
- }, [imagesLoaded, setImagesLoaded]);
87
- var imagesEl = useRef([]);
88
-
89
- // Head and foot
90
- var hasHeader = isHeaderFilled(header);
91
- var hasFooter = isFooterFilled(footer);
92
- var footerProps = getFooterProps(footer, {
93
- isView: isView,
94
- current: current,
95
- isPreview: isPreview,
96
- enableInteraction: enableInteraction,
97
- disableInteraction: disableInteraction
98
- });
99
- var _useDimensionObserver = useDimensionObserver(),
100
- footerRef = _useDimensionObserver.ref,
101
- _useDimensionObserver2 = _useDimensionObserver.height,
102
- footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
103
- var _useDimensionObserver3 = useDimensionObserver(),
104
- headerRef = _useDimensionObserver3.ref;
105
- var items = (slides || []).map(function (item, itemI) {
106
- var _ref2 = item || {},
107
- _ref2$media = _ref2.media,
108
- media = _ref2$media === void 0 ? null : _ref2$media,
109
- _ref2$caption = _ref2.caption,
110
- caption = _ref2$caption === void 0 ? null : _ref2$caption;
111
- var imageSize = {
112
- width: width,
113
- 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);
114
91
  };
115
- var hasImage = media !== null;
116
- var hasCaption = isTextFilled(caption);
117
- var finalTransitionDelay = itemI > 0 ? itemI * (transitionDelay * 1000) : 0;
118
- return /*#__PURE__*/jsxs("div", {
119
- className: styles.gridItem,
120
- children: [/*#__PURE__*/jsx("div", {
121
- className: styles.imageContainer,
122
- ref: function ref(el) {
123
- imagesEl.current[itemI] = el;
124
- },
125
- 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, {
126
210
  transitions: transitions,
127
211
  delay: finalTransitionDelay,
128
212
  playing: transitionPlaying,
129
213
  disabled: transitionDisabled,
130
- fullscreen: true,
131
214
  children: /*#__PURE__*/jsx(ScreenElement, {
132
- placeholder: "image",
133
- placeholderProps: {
134
- className: styles.placeholder,
135
- height: '100%'
136
- },
215
+ placeholder: "line",
137
216
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
138
- id: "ebsPd4",
139
- defaultMessage: [{
140
- "type": 0,
141
- "value": "Image"
142
- }]
217
+ id: "6tIigB",
218
+ defaultMessage: "Caption"
143
219
  }),
144
- emptyClassName: styles.emptyImage,
145
- isEmpty: !hasImage,
146
- children: mediaShouldLoad ? /*#__PURE__*/jsx(Visual, _objectSpread(_objectSpread({
147
- className: styles.image,
148
- media: media,
149
- muted: muted
150
- }, imageSize), {}, {
151
- resolution: resolution,
152
- objectFit: {
153
- fit: 'cover'
154
- },
155
- playing: backgroundPlaying,
156
- active: active,
157
- withoutVideo: isPreview,
158
- onLoaded: onImageLoaded
159
- })) : 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
160
230
  })
161
- })
162
- }), withCaptions ? /*#__PURE__*/jsx(Transitions, {
163
- transitions: transitions,
164
- delay: finalTransitionDelay,
165
- playing: transitionPlaying,
166
- disabled: transitionDisabled,
167
- children: /*#__PURE__*/jsx(ScreenElement, {
168
- placeholder: "line",
169
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
170
- id: "6tIigB",
171
- defaultMessage: [{
172
- "type": 0,
173
- "value": "Caption"
174
- }]
175
- }),
176
- emptyClassName: styles.emptyCaption,
177
- isEmpty: !hasCaption,
178
- children: hasCaption ? /*#__PURE__*/jsx("div", {
179
- className: styles.caption,
180
- children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, caption), {}, {
181
- className: styles.captionText,
182
- lineClamp: captionMaxLines
183
- }))
184
- }) : null
185
- })
186
- }) : null]
187
- }, "item-".concat(itemI));
188
- });
189
- return /*#__PURE__*/jsxs("div", {
190
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
191
- "data-screen-ready": ready,
192
- 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, {
193
363
  width: width,
194
364
  height: height,
195
365
  className: styles.content,
196
- children: /*#__PURE__*/jsxs("div", {
197
- className: styles.inner,
198
- style: {
199
- paddingTop: !isPreview ? viewerTopHeight : null,
200
- paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
201
- },
202
- children: [isPlaceholder ? /*#__PURE__*/jsx(ScreenElement, {
203
- placeholder: "image",
204
- placeholderProps: {
205
- className: styles.placeholder,
206
- height: '100%'
207
- },
208
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
209
- id: "ebsPd4",
210
- defaultMessage: [{
211
- "type": 0,
212
- "value": "Image"
213
- }]
214
- })
215
- }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
216
- className: styles.header,
217
- ref: headerRef,
218
- style: {
219
- padding: finalSpacing,
220
- paddingTop: finalSpacing / 2,
221
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
222
- },
223
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
224
- }) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
225
- className: styles.footer,
226
- ref: footerRef,
227
- style: {
228
- padding: finalSpacing / 2
229
- },
230
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
231
- }) : null]
232
- })
233
- }), !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, {
234
378
  background: background,
235
379
  width: width,
236
380
  height: height,
@@ -241,8 +385,37 @@ function SlideshowScreen(_ref) {
241
385
  shouldLoad: mediaShouldLoad,
242
386
  withoutVideo: isPreview,
243
387
  className: styles.background
244
- }) : null]
245
- });
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;
246
419
  }
247
420
 
248
421
  // import * as transforms from './transforms/index';
@@ -253,19 +426,13 @@ var definition = [{
253
426
  group: {
254
427
  label: defineMessage({
255
428
  id: "6mX2ya",
256
- defaultMessage: [{
257
- "type": 0,
258
- "value": "Images"
259
- }]
429
+ defaultMessage: "Images"
260
430
  }),
261
431
  order: 7
262
432
  },
263
433
  title: defineMessage({
264
434
  id: "MhGUaY",
265
- defaultMessage: [{
266
- "type": 0,
267
- "value": "Slideshow"
268
- }]
435
+ defaultMessage: "Slideshow"
269
436
  }),
270
437
  component: SlideshowScreen,
271
438
  fields: [{
@@ -273,42 +440,30 @@ var definition = [{
273
440
  type: 'visuals-with-caption',
274
441
  label: defineMessage({
275
442
  id: "muYwrB",
276
- defaultMessage: [{
277
- "type": 0,
278
- "value": "Images"
279
- }]
443
+ defaultMessage: "Images"
280
444
  })
281
445
  }, {
282
446
  name: 'transitionDelay',
283
447
  type: 'number',
284
448
  min: 0,
285
- "float": true,
449
+ float: true,
286
450
  label: defineMessage({
287
451
  id: "/6zaOP",
288
- defaultMessage: [{
289
- "type": 0,
290
- "value": "Transition Delay (in seconds)"
291
- }]
452
+ defaultMessage: "Transition Delay (in seconds)"
292
453
  })
293
454
  }, {
294
455
  name: 'background',
295
456
  type: 'background',
296
457
  label: defineMessage({
297
458
  id: "+MPZRu",
298
- defaultMessage: [{
299
- "type": 0,
300
- "value": "Background"
301
- }]
459
+ defaultMessage: "Background"
302
460
  })
303
461
  }, {
304
462
  name: 'header',
305
463
  type: 'header',
306
464
  label: defineMessage({
307
465
  id: "rhuDxI",
308
- defaultMessage: [{
309
- "type": 0,
310
- "value": "Header"
311
- }]
466
+ defaultMessage: "Header"
312
467
  }),
313
468
  theme: {
314
469
  badge: {
@@ -323,10 +478,7 @@ var definition = [{
323
478
  type: 'footer',
324
479
  label: defineMessage({
325
480
  id: "g4nybp",
326
- defaultMessage: [{
327
- "type": 0,
328
- "value": "Footer"
329
- }]
481
+ defaultMessage: "Footer"
330
482
  }),
331
483
  theme: {
332
484
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-slideshow",
3
- "version": "0.4.71",
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.71",
65
- "@micromag/element-background": "^0.4.71",
66
- "@micromag/element-container": "^0.4.71",
67
- "@micromag/element-footer": "^0.4.71",
68
- "@micromag/element-header": "^0.4.71",
69
- "@micromag/element-layout": "^0.4.71",
70
- "@micromag/element-text": "^0.4.71",
71
- "@micromag/element-visual": "^0.4.71",
72
- "@micromag/transforms": "^0.4.71",
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": "9101554bc5761e32b4a002a10d26800608c69773",
83
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
83
84
  "types": "es/index.d.ts"
84
85
  }