@micromag/screen-gallery-feed 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 +353 -246
  3. package/package.json +18 -17
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ImageElementWithCaption, ImageMedia, TextStyle, BackgroundElement, Header, Footer } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { ImageElementWithCaption, ImageMedia, TextStyle, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface GalleryFeedScreenProps {
5
6
  layout?: 'normal' | 'reverse';
@@ -14,9 +15,10 @@ interface GalleryFeedScreenProps {
14
15
  active?: boolean;
15
16
  preload?: boolean;
16
17
  type?: string | null;
18
+ mediaRef?: ForwardedRef<MediaElement> | null;
17
19
  className?: string | null;
18
20
  }
19
- declare function GalleryFeedScreen({ layout, images, withCaptions, imageCaptionStyle, spacing: initialSpacing, background, header, footer, current, active, preload, type, className, }: GalleryFeedScreenProps): react_jsx_runtime.JSX.Element;
21
+ declare function GalleryFeedScreen({ layout, images, withCaptions, imageCaptionStyle, spacing: initialSpacing, background, header, footer, current, active, preload, type, mediaRef: customMediaRef, className, }: GalleryFeedScreenProps): react_jsx_runtime.JSX.Element;
20
22
 
21
23
  declare function GalleryFeedCaptionsScreen({ ...props }: {
22
24
  [x: string]: any;
package/es/index.js CHANGED
@@ -1,14 +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 _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
5
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
2
+ import { c } from 'react/compiler-runtime';
6
3
  import classNames from 'classnames';
7
- import { useState, useCallback } from 'react';
4
+ import { useState } from 'react';
8
5
  import { ScreenElement } from '@micromag/core/components';
9
6
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
10
7
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
11
- import { isImageFilled, isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
8
+ import { isImageFilled, isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
12
9
  import Background from '@micromag/element-background';
13
10
  import Container from '@micromag/element-container';
14
11
  import Footer from '@micromag/element-footer';
@@ -18,111 +15,126 @@ import Scroll from '@micromag/element-scroll';
18
15
  import Text from '@micromag/element-text';
19
16
  import Visual from '@micromag/element-visual';
20
17
  import { jsx, jsxs } from 'react/jsx-runtime';
21
- import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
22
- import _extends from '@babel/runtime/helpers/extends';
23
18
 
24
19
  var styles = {"container":"micromag-screen-gallery-feed-container","background":"micromag-screen-gallery-feed-background","content":"micromag-screen-gallery-feed-content","emptyImage":"micromag-screen-gallery-feed-emptyImage","emptyCaption":"micromag-screen-gallery-feed-emptyCaption","image":"micromag-screen-gallery-feed-image","imageContainer":"micromag-screen-gallery-feed-imageContainer","video":"micromag-screen-gallery-feed-video","footer":"micromag-screen-gallery-feed-footer","disabled":"micromag-screen-gallery-feed-disabled","caption":"micromag-screen-gallery-feed-caption","isPlaceholder":"micromag-screen-gallery-feed-isPlaceholder","layout":"micromag-screen-gallery-feed-layout"};
25
20
 
26
- function GalleryFeedScreen(_ref) {
27
- var _ref$layout = _ref.layout,
28
- layout = _ref$layout === void 0 ? 'normal' : _ref$layout,
29
- _ref$images = _ref.images,
30
- images = _ref$images === void 0 ? null : _ref$images,
31
- _ref$withCaptions = _ref.withCaptions,
32
- withCaptions = _ref$withCaptions === void 0 ? false : _ref$withCaptions,
33
- _ref$imageCaptionStyl = _ref.imageCaptionStyle,
34
- imageCaptionStyle = _ref$imageCaptionStyl === void 0 ? null : _ref$imageCaptionStyl,
35
- _ref$spacing = _ref.spacing,
36
- initialSpacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
37
- _ref$background = _ref.background,
38
- background = _ref$background === void 0 ? null : _ref$background,
39
- _ref$header = _ref.header,
40
- header = _ref$header === void 0 ? null : _ref$header,
41
- _ref$footer = _ref.footer,
42
- footer = _ref$footer === void 0 ? null : _ref$footer,
43
- _ref$current = _ref.current,
44
- current = _ref$current === void 0 ? true : _ref$current,
45
- _ref$active = _ref.active,
46
- active = _ref$active === void 0 ? true : _ref$active,
47
- _ref$preload = _ref.preload,
48
- preload = _ref$preload === void 0 ? true : _ref$preload,
49
- _ref$type = _ref.type,
50
- type = _ref$type === void 0 ? null : _ref$type,
51
- _ref$className = _ref.className,
52
- className = _ref$className === void 0 ? null : _ref$className;
53
- var trackScreenEvent = useTrackScreenEvent(type);
54
- var _useScreenSize = useScreenSize(),
55
- width = _useScreenSize.width,
56
- height = _useScreenSize.height,
57
- resolution = _useScreenSize.resolution;
58
- var _useViewerContext = useViewerContext(),
59
- viewerTopHeight = _useViewerContext.topHeight,
60
- viewerBottomHeight = _useViewerContext.bottomHeight,
61
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
62
- var _useViewerWebView = useViewerWebView(),
63
- openWebView = _useViewerWebView.open;
64
- var _usePlaybackContext = usePlaybackContext(),
65
- muted = _usePlaybackContext.muted;
66
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
67
- mediaRef = _usePlaybackMediaRef.ref,
68
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
69
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
70
- var spacing = initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20;
71
- var _useScreenRenderConte = useScreenRenderContext(),
72
- isView = _useScreenRenderConte.isView,
73
- isPreview = _useScreenRenderConte.isPreview,
74
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
75
- isEdit = _useScreenRenderConte.isEdit,
76
- isStatic = _useScreenRenderConte.isStatic,
77
- isCapture = _useScreenRenderConte.isCapture;
78
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
79
- var mediaShouldLoad = current || preload;
80
- var hasImages = images !== null;
81
- var imagesCount = hasImages ? images.length : 0;
82
- var _useState = useState(0),
83
- _useState2 = _slicedToArray(_useState, 2),
84
- imagesLoaded = _useState2[0],
85
- setImagesLoaded = _useState2[1];
86
- var ready = imagesLoaded >= imagesCount;
87
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
88
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
89
- var onImageLoaded = useCallback(function () {
90
- setImagesLoaded(imagesLoaded + 1);
91
- }, [imagesLoaded, setImagesLoaded]);
92
- var isReversed = layout === 'reverse';
93
- var items = [];
94
- var editImages = isEdit && imagesCount === 0 ? [null] : images;
95
- var finalImages = isPlaceholder ? _toConsumableArray(Array(5)) : editImages;
96
- var _useDimensionObserver = useDimensionObserver(),
97
- firstImageRef = _useDimensionObserver.ref,
98
- firstImageRefWidth = _useDimensionObserver.width;
99
- (finalImages || []).forEach(function (image, index) {
100
- var finalImage = withCaptions ? image : {
21
+ function GalleryFeedScreen(t0) {
22
+ const $ = c(52);
23
+ const {
24
+ layout: t1,
25
+ images: t2,
26
+ withCaptions: t3,
27
+ imageCaptionStyle: t4,
28
+ spacing: t5,
29
+ background: t6,
30
+ header: t7,
31
+ footer: t8,
32
+ current: t9,
33
+ active: t10,
34
+ preload: t11,
35
+ type: t12,
36
+ mediaRef: t13,
37
+ className: t14
38
+ } = t0;
39
+ const layout = t1 === undefined ? "normal" : t1;
40
+ const images = t2 === undefined ? null : t2;
41
+ const withCaptions = t3 === undefined ? false : t3;
42
+ const imageCaptionStyle = t4 === undefined ? null : t4;
43
+ const initialSpacing = t5 === undefined ? 20 : t5;
44
+ const background = t6 === undefined ? null : t6;
45
+ const header = t7 === undefined ? null : t7;
46
+ const footer = t8 === undefined ? null : t8;
47
+ const current = t9 === undefined ? true : t9;
48
+ const active = t10 === undefined ? true : t10;
49
+ const preload = t11 === undefined ? true : t11;
50
+ const type = t12 === undefined ? null : t12;
51
+ const customMediaRef = t13 === undefined ? null : t13;
52
+ const className = t14 === undefined ? null : t14;
53
+ const trackScreenEvent = useTrackScreenEvent(type);
54
+ const {
55
+ width,
56
+ height,
57
+ resolution
58
+ } = useScreenSize();
59
+ const {
60
+ topHeight: viewerTopHeight,
61
+ bottomHeight: viewerBottomHeight,
62
+ bottomSidesWidth: viewerBottomSidesWidth
63
+ } = useViewerContext();
64
+ const {
65
+ open: openWebView
66
+ } = useViewerWebView();
67
+ const {
68
+ muted
69
+ } = usePlaybackContext();
70
+ const {
71
+ ref: mediaRef,
72
+ isCurrent: t15
73
+ } = usePlaybackMediaRef(current, true);
74
+ const isCurrentMedia = t15 === undefined ? false : t15;
75
+ const spacing = initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20;
76
+ const {
77
+ isView,
78
+ isPreview,
79
+ isPlaceholder,
80
+ isEdit,
81
+ isStatic,
82
+ isCapture
83
+ } = useScreenRenderContext();
84
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
85
+ const mediaShouldLoad = current || preload;
86
+ const hasImages = images !== null;
87
+ const imagesCount = hasImages ? images.length : 0;
88
+ const [imagesLoaded, setImagesLoaded] = useState(0);
89
+ const ready = imagesLoaded >= imagesCount;
90
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
91
+ const scrollingDisabled = !isEdit && transitionDisabled || !current;
92
+ let t16;
93
+ if ($[0] !== imagesLoaded) {
94
+ t16 = () => {
95
+ setImagesLoaded(imagesLoaded + 1);
96
+ };
97
+ $[0] = imagesLoaded;
98
+ $[1] = t16;
99
+ } else {
100
+ t16 = $[1];
101
+ }
102
+ const onImageLoaded = t16;
103
+ const isReversed = layout === "reverse";
104
+ const items = [];
105
+ const editImages = isEdit && imagesCount === 0 ? [null] : images;
106
+ const finalImages = isPlaceholder ? [...Array(5)] : editImages;
107
+ const {
108
+ ref: firstImageRef,
109
+ width: firstImageRefWidth
110
+ } = useDimensionObserver();
111
+ (finalImages || []).forEach((image, index) => {
112
+ const finalImage = withCaptions ? image : {
101
113
  media: image
102
114
  };
103
- var _ref2 = finalImage || {},
104
- _ref2$caption = _ref2.caption,
105
- caption = _ref2$caption === void 0 ? null : _ref2$caption;
106
- var hasImage = isImageFilled(finalImage);
107
- var hasCaption = isTextFilled(caption);
108
- var _ref3 = caption || {},
109
- _ref3$textStyle = _ref3.textStyle,
110
- textStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
111
- var imageElement = /*#__PURE__*/jsx(ScreenElement, {
115
+ const {
116
+ caption: t17
117
+ } = finalImage || {};
118
+ const caption = t17 === undefined ? null : t17;
119
+ const hasImage = isImageFilled(finalImage);
120
+ const hasCaption = isTextFilled(caption);
121
+ const {
122
+ textStyle: t18
123
+ } = caption || {};
124
+ const textStyle = t18 === undefined ? null : t18;
125
+ const imageElement = /*#__PURE__*/jsx(ScreenElement, {
112
126
  placeholder: "image",
113
127
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
114
128
  id: "ebsPd4",
115
- defaultMessage: [{
116
- "type": 0,
117
- "value": "Image"
118
- }]
129
+ defaultMessage: "Image"
119
130
  }),
120
131
  emptyClassName: styles.emptyImage,
121
132
  isEmpty: !hasImage,
122
133
  children: /*#__PURE__*/jsx("div", {
123
134
  className: styles.imageContainer,
124
135
  ref: index === 0 ? firstImageRef : null,
125
- children: /*#__PURE__*/jsx(Visual, _objectSpread(_objectSpread({}, finalImage), {}, {
136
+ children: /*#__PURE__*/jsx(Visual, {
137
+ ...finalImage,
126
138
  loadingMode: "lazy",
127
139
  className: styles.image,
128
140
  videoClassName: styles.video,
@@ -133,13 +145,13 @@ function GalleryFeedScreen(_ref) {
133
145
  shouldLoad: mediaShouldLoad,
134
146
  withoutVideo: isPreview,
135
147
  onLoaded: onImageLoaded
136
- }))
148
+ })
137
149
  })
138
- }, "image-".concat(index));
139
- var captionElement = null;
150
+ }, `image-${index}`);
151
+ let captionElement = null;
140
152
  if (withCaptions) {
141
- var marginTop = !isReversed || index > 0 ? spacing / 2 : 0;
142
- var marginBottom = isReversed || index < (finalImages || []).length - 1 ? spacing / 2 : 0;
153
+ const marginTop = !isReversed || index > 0 ? spacing / 2 : 0;
154
+ const marginBottom = isReversed || index < (finalImages || []).length - 1 ? spacing / 2 : 0;
143
155
  captionElement = /*#__PURE__*/jsx(ScreenElement, {
144
156
  placeholder: "text",
145
157
  placeholderProps: {
@@ -147,25 +159,26 @@ function GalleryFeedScreen(_ref) {
147
159
  },
148
160
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
149
161
  id: "6tIigB",
150
- defaultMessage: [{
151
- "type": 0,
152
- "value": "Caption"
153
- }]
162
+ defaultMessage: "Caption"
154
163
  }),
155
164
  emptyClassName: styles.emptyCaption,
156
165
  isEmpty: !hasCaption,
157
166
  children: hasCaption ? /*#__PURE__*/jsx("div", {
158
167
  className: styles.caption,
159
168
  style: {
160
- marginTop: marginTop,
161
- marginBottom: marginBottom
169
+ marginTop,
170
+ marginBottom
162
171
  },
163
- children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, caption), {}, {
164
- textStyle: _objectSpread(_objectSpread({}, imageCaptionStyle || null), textStyle),
172
+ children: /*#__PURE__*/jsx(Text, {
173
+ ...caption,
174
+ textStyle: {
175
+ ...(imageCaptionStyle || null),
176
+ ...textStyle
177
+ },
165
178
  className: styles.captionText
166
- }))
179
+ })
167
180
  }) : null
168
- }, "caption-".concat(index));
181
+ }, `caption-${index}`);
169
182
  }
170
183
  if (isReversed) {
171
184
  if (withCaptions) {
@@ -183,42 +196,194 @@ function GalleryFeedScreen(_ref) {
183
196
  style: {
184
197
  height: spacing
185
198
  }
186
- }, "spacing-".concat(index)));
199
+ }, `spacing-${index}`));
187
200
  }
188
201
  });
189
- var hasHeader = isHeaderFilled(header);
190
- var hasFooter = isFooterFilled(footer);
191
- var footerProps = getFooterProps(footer, {
192
- isView: isView,
193
- current: current,
194
- openWebView: openWebView,
195
- isPreview: isPreview
196
- });
197
- var _useState3 = useState(false),
198
- _useState4 = _slicedToArray(_useState3, 2),
199
- scrolledBottom = _useState4[0],
200
- setScrolledBottom = _useState4[1];
201
- var onScrolledBottom = useCallback(function (_ref4) {
202
- var initial = _ref4.initial;
203
- if (initial) {
204
- trackScreenEvent('scroll', 'Screen');
205
- }
206
- setScrolledBottom(true);
207
- }, [trackScreenEvent]);
208
- var onScrolledNotBottom = useCallback(function () {
209
- setScrolledBottom(false);
210
- }, [setScrolledBottom]);
211
- var onScrolledTrigger = useCallback(function () {
212
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
213
- if (trigger !== null) {
214
- var scrollPercent = Math.round(trigger * 100);
215
- trackScreenEvent('scroll', scrollPercent, {
216
- scrollPercent: scrollPercent
217
- });
218
- }
219
- }, [trackScreenEvent]);
202
+ let t19;
203
+ if ($[2] !== header) {
204
+ t19 = isHeaderFilled(header);
205
+ $[2] = header;
206
+ $[3] = t19;
207
+ } else {
208
+ t19 = $[3];
209
+ }
210
+ const hasHeader = t19;
211
+ let t20;
212
+ if ($[4] !== footer) {
213
+ t20 = isFooterFilled(footer);
214
+ $[4] = footer;
215
+ $[5] = t20;
216
+ } else {
217
+ t20 = $[5];
218
+ }
219
+ const hasFooter = t20;
220
+ let t21;
221
+ if ($[6] !== current || $[7] !== footer || $[8] !== isPreview || $[9] !== isView || $[10] !== openWebView) {
222
+ t21 = getFooterProps(footer, {
223
+ isView,
224
+ current,
225
+ openWebView,
226
+ isPreview
227
+ });
228
+ $[6] = current;
229
+ $[7] = footer;
230
+ $[8] = isPreview;
231
+ $[9] = isView;
232
+ $[10] = openWebView;
233
+ $[11] = t21;
234
+ } else {
235
+ t21 = $[11];
236
+ }
237
+ const footerProps = t21;
238
+ const [scrolledBottom, setScrolledBottom] = useState(false);
239
+ let t22;
240
+ if ($[12] !== trackScreenEvent) {
241
+ t22 = t23 => {
242
+ const {
243
+ initial
244
+ } = t23;
245
+ if (initial) {
246
+ trackScreenEvent("scroll", "Screen");
247
+ }
248
+ setScrolledBottom(true);
249
+ };
250
+ $[12] = trackScreenEvent;
251
+ $[13] = t22;
252
+ } else {
253
+ t22 = $[13];
254
+ }
255
+ const onScrolledBottom = t22;
256
+ let t23;
257
+ if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
258
+ t23 = () => {
259
+ setScrolledBottom(false);
260
+ };
261
+ $[14] = t23;
262
+ } else {
263
+ t23 = $[14];
264
+ }
265
+ const onScrolledNotBottom = t23;
266
+ let t24;
267
+ if ($[15] !== trackScreenEvent) {
268
+ t24 = t25 => {
269
+ const trigger = t25 === undefined ? null : t25;
270
+ if (trigger !== null) {
271
+ const scrollPercent = Math.round(trigger * 100);
272
+ trackScreenEvent("scroll", scrollPercent, {
273
+ scrollPercent
274
+ });
275
+ }
276
+ };
277
+ $[15] = trackScreenEvent;
278
+ $[16] = t24;
279
+ } else {
280
+ t24 = $[16];
281
+ }
282
+ const onScrolledTrigger = t24;
283
+ let t25;
284
+ if ($[17] !== className || $[18] !== isPlaceholder) {
285
+ t25 = classNames([styles.container, className, {
286
+ [styles.isPlaceholder]: isPlaceholder
287
+ }]);
288
+ $[17] = className;
289
+ $[18] = isPlaceholder;
290
+ $[19] = t25;
291
+ } else {
292
+ t25 = $[19];
293
+ }
294
+ let t26;
295
+ if ($[20] !== current || $[21] !== hasHeader || $[22] !== isPlaceholder || $[23] !== isPreview || $[24] !== spacing || $[25] !== viewerBottomHeight || $[26] !== viewerTopHeight) {
296
+ t26 = !isPlaceholder ? {
297
+ paddingLeft: spacing,
298
+ paddingRight: spacing,
299
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
300
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
301
+ } : null;
302
+ $[20] = current;
303
+ $[21] = hasHeader;
304
+ $[22] = isPlaceholder;
305
+ $[23] = isPreview;
306
+ $[24] = spacing;
307
+ $[25] = viewerBottomHeight;
308
+ $[26] = viewerTopHeight;
309
+ $[27] = t26;
310
+ } else {
311
+ t26 = $[27];
312
+ }
313
+ let t27;
314
+ if ($[28] !== hasHeader || $[29] !== header || $[30] !== isPlaceholder || $[31] !== spacing) {
315
+ t27 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
316
+ style: {
317
+ paddingBottom: spacing
318
+ },
319
+ children: /*#__PURE__*/jsx(Header, {
320
+ ...header
321
+ })
322
+ }, "header") : null;
323
+ $[28] = hasHeader;
324
+ $[29] = header;
325
+ $[30] = isPlaceholder;
326
+ $[31] = spacing;
327
+ $[32] = t27;
328
+ } else {
329
+ t27 = $[32];
330
+ }
331
+ let t28;
332
+ if ($[33] !== footerProps || $[34] !== hasFooter || $[35] !== isPlaceholder || $[36] !== scrolledBottom || $[37] !== spacing || $[38] !== viewerBottomSidesWidth) {
333
+ t28 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
334
+ className: classNames([styles.footer, {
335
+ [styles.disabled]: !scrolledBottom
336
+ }]),
337
+ style: {
338
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
339
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
340
+ paddingTop: spacing
341
+ },
342
+ children: /*#__PURE__*/jsx(Footer, {
343
+ ...footerProps
344
+ })
345
+ }) : null;
346
+ $[33] = footerProps;
347
+ $[34] = hasFooter;
348
+ $[35] = isPlaceholder;
349
+ $[36] = scrolledBottom;
350
+ $[37] = spacing;
351
+ $[38] = viewerBottomSidesWidth;
352
+ $[39] = t28;
353
+ } else {
354
+ t28 = $[39];
355
+ }
356
+ let t29;
357
+ if ($[40] !== background || $[41] !== backgroundPlaying || $[42] !== customMediaRef || $[43] !== height || $[44] !== isPlaceholder || $[45] !== isPreview || $[46] !== mediaRef || $[47] !== mediaShouldLoad || $[48] !== muted || $[49] !== resolution || $[50] !== width) {
358
+ t29 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
359
+ background: background,
360
+ width: width,
361
+ height: height,
362
+ resolution: resolution,
363
+ playing: backgroundPlaying,
364
+ muted: muted,
365
+ shouldLoad: mediaShouldLoad,
366
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
367
+ withoutVideo: isPreview,
368
+ className: styles.background
369
+ }) : null;
370
+ $[40] = background;
371
+ $[41] = backgroundPlaying;
372
+ $[42] = customMediaRef;
373
+ $[43] = height;
374
+ $[44] = isPlaceholder;
375
+ $[45] = isPreview;
376
+ $[46] = mediaRef;
377
+ $[47] = mediaShouldLoad;
378
+ $[48] = muted;
379
+ $[49] = resolution;
380
+ $[50] = width;
381
+ $[51] = t29;
382
+ } else {
383
+ t29 = $[51];
384
+ }
220
385
  return /*#__PURE__*/jsxs("div", {
221
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
386
+ className: t25,
222
387
  "data-screen-ready": ready,
223
388
  children: [/*#__PURE__*/jsx(Container, {
224
389
  width: width,
@@ -232,48 +397,38 @@ function GalleryFeedScreen(_ref) {
232
397
  withShadow: true,
233
398
  children: /*#__PURE__*/jsxs(Layout, {
234
399
  className: styles.layout,
235
- style: !isPlaceholder ? {
236
- paddingLeft: spacing,
237
- paddingRight: spacing,
238
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
239
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
240
- } : null,
241
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
242
- style: {
243
- paddingBottom: spacing
244
- },
245
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
246
- }, "header") : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
247
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
248
- style: {
249
- paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
250
- paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
251
- paddingTop: spacing
252
- },
253
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
254
- }) : null]
400
+ style: t26,
401
+ children: [t27, items, t28]
255
402
  })
256
403
  })
257
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
258
- background: background,
259
- width: width,
260
- height: height,
261
- resolution: resolution,
262
- playing: backgroundPlaying,
263
- muted: muted,
264
- shouldLoad: mediaShouldLoad,
265
- mediaRef: mediaRef,
266
- withoutVideo: isPreview,
267
- className: styles.background
268
- }) : null]
404
+ }), t29]
269
405
  });
270
406
  }
271
407
 
272
- function GalleryFeedCaptionsScreen(_ref) {
273
- var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
274
- return /*#__PURE__*/jsx(GalleryFeedScreen, _objectSpread(_objectSpread({}, props), {}, {
275
- withCaptions: true
276
- }));
408
+ function GalleryFeedCaptionsScreen(t0) {
409
+ const $ = c(4);
410
+ let props;
411
+ if ($[0] !== t0) {
412
+ ({
413
+ ...props
414
+ } = t0);
415
+ $[0] = t0;
416
+ $[1] = props;
417
+ } else {
418
+ props = $[1];
419
+ }
420
+ let t1;
421
+ if ($[2] !== props) {
422
+ t1 = /*#__PURE__*/jsx(GalleryFeedScreen, {
423
+ ...props,
424
+ withCaptions: true
425
+ });
426
+ $[2] = props;
427
+ $[3] = t1;
428
+ } else {
429
+ t1 = $[3];
430
+ }
431
+ return t1;
277
432
  }
278
433
 
279
434
  var definition = [{
@@ -282,19 +437,13 @@ var definition = [{
282
437
  group: {
283
438
  label: defineMessage({
284
439
  id: "6mX2ya",
285
- defaultMessage: [{
286
- "type": 0,
287
- "value": "Images"
288
- }]
440
+ defaultMessage: "Images"
289
441
  }),
290
442
  order: 4
291
443
  },
292
444
  title: defineMessage({
293
445
  id: "4bHvRS",
294
- defaultMessage: [{
295
- "type": 0,
296
- "value": "Gallery Feed"
297
- }]
446
+ defaultMessage: "Gallery Feed"
298
447
  }),
299
448
  component: GalleryFeedScreen,
300
449
  layouts: ['normal'],
@@ -304,10 +453,7 @@ var definition = [{
304
453
  type: 'visuals',
305
454
  label: defineMessage({
306
455
  id: "muYwrB",
307
- defaultMessage: [{
308
- "type": 0,
309
- "value": "Images"
310
- }]
456
+ defaultMessage: "Images"
311
457
  })
312
458
  }, {
313
459
  name: 'spacing',
@@ -316,30 +462,21 @@ var definition = [{
316
462
  isHorizontal: true,
317
463
  label: defineMessage({
318
464
  id: "Zpl5bJ",
319
- defaultMessage: [{
320
- "type": 0,
321
- "value": "Spacing"
322
- }]
465
+ defaultMessage: "Spacing"
323
466
  })
324
467
  }, {
325
468
  name: 'background',
326
469
  type: 'background',
327
470
  label: defineMessage({
328
471
  id: "+MPZRu",
329
- defaultMessage: [{
330
- "type": 0,
331
- "value": "Background"
332
- }]
472
+ defaultMessage: "Background"
333
473
  })
334
474
  }, {
335
475
  name: 'header',
336
476
  type: 'header',
337
477
  label: defineMessage({
338
478
  id: "rhuDxI",
339
- defaultMessage: [{
340
- "type": 0,
341
- "value": "Header"
342
- }]
479
+ defaultMessage: "Header"
343
480
  }),
344
481
  theme: {
345
482
  badge: {
@@ -354,10 +491,7 @@ var definition = [{
354
491
  type: 'footer',
355
492
  label: defineMessage({
356
493
  id: "g4nybp",
357
- defaultMessage: [{
358
- "type": 0,
359
- "value": "Footer"
360
- }]
494
+ defaultMessage: "Footer"
361
495
  }),
362
496
  theme: {
363
497
  callToAction: {
@@ -374,19 +508,13 @@ var definition = [{
374
508
  group: {
375
509
  label: defineMessage({
376
510
  id: "6mX2ya",
377
- defaultMessage: [{
378
- "type": 0,
379
- "value": "Images"
380
- }]
511
+ defaultMessage: "Images"
381
512
  }),
382
513
  order: 4
383
514
  },
384
515
  title: defineMessage({
385
516
  id: "XTJGzY",
386
- defaultMessage: [{
387
- "type": 0,
388
- "value": "Gallery feed with captions"
389
- }]
517
+ defaultMessage: "Gallery feed with captions"
390
518
  }),
391
519
  component: GalleryFeedCaptionsScreen,
392
520
  layouts: ['normal', 'reverse'],
@@ -397,10 +525,7 @@ var definition = [{
397
525
  defaultValue: 'normal',
398
526
  label: defineMessage({
399
527
  id: "4iBXj2",
400
- defaultMessage: [{
401
- "type": 0,
402
- "value": "Layout"
403
- }]
528
+ defaultMessage: "Layout"
404
529
  })
405
530
  }, {
406
531
  name: 'images',
@@ -412,10 +537,7 @@ var definition = [{
412
537
  },
413
538
  label: defineMessage({
414
539
  id: "T9NZPQ",
415
- defaultMessage: [{
416
- "type": 0,
417
- "value": "Images"
418
- }]
540
+ defaultMessage: "Images"
419
541
  })
420
542
  }, {
421
543
  name: 'spacing',
@@ -424,40 +546,28 @@ var definition = [{
424
546
  isHorizontal: true,
425
547
  label: defineMessage({
426
548
  id: "Zpl5bJ",
427
- defaultMessage: [{
428
- "type": 0,
429
- "value": "Spacing"
430
- }]
549
+ defaultMessage: "Spacing"
431
550
  })
432
551
  }, {
433
552
  name: 'imageCaptionStyle',
434
553
  type: 'text-style-form',
435
554
  label: defineMessage({
436
555
  id: "Qz7nUz",
437
- defaultMessage: [{
438
- "type": 0,
439
- "value": "Caption style"
440
- }]
556
+ defaultMessage: "Caption style"
441
557
  })
442
558
  }, {
443
559
  name: 'background',
444
560
  type: 'background',
445
561
  label: defineMessage({
446
562
  id: "+MPZRu",
447
- defaultMessage: [{
448
- "type": 0,
449
- "value": "Background"
450
- }]
563
+ defaultMessage: "Background"
451
564
  })
452
565
  }, {
453
566
  name: 'header',
454
567
  type: 'header',
455
568
  label: defineMessage({
456
569
  id: "rhuDxI",
457
- defaultMessage: [{
458
- "type": 0,
459
- "value": "Header"
460
- }]
570
+ defaultMessage: "Header"
461
571
  }),
462
572
  theme: {
463
573
  badge: {
@@ -472,10 +582,7 @@ var definition = [{
472
582
  type: 'footer',
473
583
  label: defineMessage({
474
584
  id: "g4nybp",
475
- defaultMessage: [{
476
- "type": 0,
477
- "value": "Footer"
478
- }]
585
+ defaultMessage: "Footer"
479
586
  }),
480
587
  theme: {
481
588
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-gallery-feed",
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,26 +53,26 @@
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-scroll": "^0.4.69",
71
- "@micromag/element-stack": "^0.4.69",
72
- "@micromag/element-text": "^0.4.69",
73
- "@micromag/element-visual": "^0.4.70",
74
- "@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-scroll": "^0.4.74",
72
+ "@micromag/element-stack": "^0.4.74",
73
+ "@micromag/element-text": "^0.4.74",
74
+ "@micromag/element-visual": "^0.4.74",
75
+ "@micromag/transforms": "^0.4.74",
75
76
  "classnames": "^2.2.6",
76
77
  "lodash": "^4.17.23",
77
78
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +82,6 @@
81
82
  "access": "public",
82
83
  "registry": "https://registry.npmjs.org/"
83
84
  },
84
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
85
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
85
86
  "types": "es/index.d.ts"
86
87
  }