@micromag/screen-quote 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 +501 -158
  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 { TextElement, BackgroundElement, Header, Footer } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { TextElement, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface QuoteScreenProps {
5
6
  layout?: 'top' | 'middle' | 'bottom' | 'split';
@@ -11,9 +12,10 @@ interface QuoteScreenProps {
11
12
  footer?: Footer | null;
12
13
  current?: boolean;
13
14
  preload?: boolean;
15
+ mediaRef?: ForwardedRef<MediaElement> | null;
14
16
  className?: string | null;
15
17
  }
16
- declare function QuoteScreen({ layout, quote, author, spacing, background, header, footer, current, preload, className, }: QuoteScreenProps): react_jsx_runtime.JSX.Element;
18
+ declare function QuoteScreen({ layout, quote, author, spacing, background, header, footer, current, preload, mediaRef: customMediaRef, className, }: QuoteScreenProps): react_jsx_runtime.JSX.Element;
17
19
 
18
20
  declare const _default: {
19
21
  id: string;
package/es/index.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
+ import { c } from 'react/compiler-runtime';
4
3
  import classNames from 'classnames';
5
4
  import { ScreenElement } from '@micromag/core/components';
6
5
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
7
- import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled } from '@micromag/core/utils';
6
+ import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, mergeRefs } from '@micromag/core/utils';
8
7
  import Background from '@micromag/element-background';
9
8
  import Container from '@micromag/element-container';
10
9
  import Footer from '@micromag/element-footer';
@@ -12,130 +11,468 @@ import Header from '@micromag/element-header';
12
11
  import Layout, { Spacer } from '@micromag/element-layout';
13
12
  import Quote from '@micromag/element-quote';
14
13
  import Text from '@micromag/element-text';
15
- import { jsxs, jsx } from 'react/jsx-runtime';
14
+ import { jsx, jsxs } from 'react/jsx-runtime';
16
15
 
17
16
  var styles = {"container":"micromag-screen-quote-container","background":"micromag-screen-quote-background","content":"micromag-screen-quote-content","emptyQuote":"micromag-screen-quote-emptyQuote","emptyAuthor":"micromag-screen-quote-emptyAuthor","quote":"micromag-screen-quote-quote","withMargin":"micromag-screen-quote-withMargin","isPlaceholder":"micromag-screen-quote-isPlaceholder","layout":"micromag-screen-quote-layout"};
18
17
 
19
- function QuoteScreen(_ref) {
20
- var _ref$layout = _ref.layout,
21
- layout = _ref$layout === void 0 ? 'top' : _ref$layout,
22
- _ref$quote = _ref.quote,
23
- quote = _ref$quote === void 0 ? null : _ref$quote,
24
- _ref$author = _ref.author,
25
- author = _ref$author === void 0 ? null : _ref$author,
26
- _ref$spacing = _ref.spacing,
27
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
28
- _ref$background = _ref.background,
29
- background = _ref$background === void 0 ? null : _ref$background,
30
- _ref$header = _ref.header,
31
- header = _ref$header === void 0 ? null : _ref$header,
32
- _ref$footer = _ref.footer,
33
- footer = _ref$footer === void 0 ? null : _ref$footer,
34
- _ref$current = _ref.current,
35
- current = _ref$current === void 0 ? true : _ref$current,
36
- _ref$preload = _ref.preload,
37
- preload = _ref$preload === void 0 ? true : _ref$preload,
38
- _ref$className = _ref.className,
39
- className = _ref$className === void 0 ? null : _ref$className;
40
- var _useScreenSize = useScreenSize(),
41
- width = _useScreenSize.width,
42
- height = _useScreenSize.height,
43
- resolution = _useScreenSize.resolution;
44
- var _useScreenRenderConte = useScreenRenderContext(),
45
- isView = _useScreenRenderConte.isView,
46
- isPreview = _useScreenRenderConte.isPreview,
47
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
48
- isEdit = _useScreenRenderConte.isEdit;
49
- var _useViewerContext = useViewerContext(),
50
- viewerTopHeight = _useViewerContext.topHeight,
51
- viewerBottomHeight = _useViewerContext.bottomHeight,
52
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
53
- var _useViewerWebView = useViewerWebView(),
54
- openWebView = _useViewerWebView.open;
55
- var _usePlaybackContext = usePlaybackContext(),
56
- muted = _usePlaybackContext.muted;
57
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
58
- mediaRef = _usePlaybackMediaRef.ref,
59
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
60
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
61
- var isSplitted = layout === 'split';
62
- var isTopLayout = layout === 'top';
63
- var isMiddleLayout = layout === 'middle';
64
- var isBottomLayout = layout === 'bottom';
65
- var verticalAlign = isSplitted ? null : layout;
66
- var hasHeader = isHeaderFilled(header);
67
- var hasFooter = isFooterFilled(footer);
68
- var footerProps = getFooterProps(footer, {
69
- isView: isView,
70
- current: current,
71
- openWebView: openWebView,
72
- isPreview: isPreview
73
- });
74
- var hasQuote = isTextFilled(quote);
75
- var hasAuthor = isTextFilled(author);
76
- var quoteWithMargin = hasQuote && hasAuthor && !isSplitted;
77
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
78
- var mediaShouldLoad = current || preload;
79
- return /*#__PURE__*/jsxs("div", {
80
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
81
- "data-screen-ready": true,
82
- children: [/*#__PURE__*/jsx(Container, {
83
- width: width,
84
- height: height,
85
- className: styles.content,
86
- children: /*#__PURE__*/jsxs(Layout, {
87
- className: styles.layout,
88
- fullscreen: true,
89
- verticalAlign: verticalAlign,
90
- style: !isPlaceholder ? {
91
- paddingLeft: spacing,
92
- paddingRight: spacing,
93
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
94
- paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
95
- } : null,
96
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
97
- style: {
98
- paddingBottom: spacing
99
- },
100
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
101
- }) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, /*#__PURE__*/jsx(ScreenElement, {
102
- placeholder: "quote",
103
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
104
- id: "CrzYgw",
105
- defaultMessage: [{
106
- "type": 0,
107
- "value": "Quote"
108
- }]
109
- }),
110
- emptyClassName: styles.emptyQuote,
111
- isEmpty: !hasQuote,
112
- children: hasQuote ? /*#__PURE__*/jsx(Quote, _objectSpread({
113
- className: classNames([styles.quote, _defineProperty({}, styles.withMargin, quoteWithMargin)])
114
- }, quote)) : null
115
- }, "quote"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
116
- placeholder: "subtitle",
117
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
118
- id: "xYqGzM",
119
- defaultMessage: [{
120
- "type": 0,
121
- "value": "Author"
122
- }]
123
- }),
124
- emptyClassName: styles.emptyAuthor,
125
- isEmpty: !hasAuthor,
126
- children: hasAuthor ? /*#__PURE__*/jsx(Text, _objectSpread({
127
- className: styles.author
128
- }, author)) : null
129
- }, "author"), !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
130
- style: {
131
- paddingTop: spacing,
132
- paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
133
- paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
134
- },
135
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
136
- }) : null]
18
+ function QuoteScreen(t0) {
19
+ const $ = c(159);
20
+ const {
21
+ layout: t1,
22
+ quote: t2,
23
+ author: t3,
24
+ spacing: t4,
25
+ background: t5,
26
+ header: t6,
27
+ footer: t7,
28
+ current: t8,
29
+ preload: t9,
30
+ mediaRef: t10,
31
+ className: t11
32
+ } = t0;
33
+ const layout = t1 === undefined ? "top" : t1;
34
+ const quote = t2 === undefined ? null : t2;
35
+ const author = t3 === undefined ? null : t3;
36
+ const spacing = t4 === undefined ? 20 : t4;
37
+ const background = t5 === undefined ? null : t5;
38
+ const header = t6 === undefined ? null : t6;
39
+ const footer = t7 === undefined ? null : t7;
40
+ const current = t8 === undefined ? true : t8;
41
+ const preload = t9 === undefined ? true : t9;
42
+ const customMediaRef = t10 === undefined ? null : t10;
43
+ const className = t11 === undefined ? null : t11;
44
+ const {
45
+ width,
46
+ height,
47
+ resolution
48
+ } = useScreenSize();
49
+ const {
50
+ isView,
51
+ isPreview,
52
+ isPlaceholder,
53
+ isEdit
54
+ } = useScreenRenderContext();
55
+ const {
56
+ topHeight: viewerTopHeight,
57
+ bottomHeight: viewerBottomHeight,
58
+ bottomSidesWidth: viewerBottomSidesWidth
59
+ } = useViewerContext();
60
+ const {
61
+ open: openWebView
62
+ } = useViewerWebView();
63
+ const {
64
+ muted
65
+ } = usePlaybackContext();
66
+ const {
67
+ ref: mediaRef,
68
+ isCurrent: t12
69
+ } = usePlaybackMediaRef(current, true);
70
+ const isCurrentMedia = t12 === undefined ? false : t12;
71
+ const isSplitted = layout === "split";
72
+ const isTopLayout = layout === "top";
73
+ const isMiddleLayout = layout === "middle";
74
+ const isBottomLayout = layout === "bottom";
75
+ const verticalAlign = isSplitted ? null : layout;
76
+ let t13;
77
+ if ($[0] !== header) {
78
+ t13 = isHeaderFilled(header);
79
+ $[0] = header;
80
+ $[1] = t13;
81
+ } else {
82
+ t13 = $[1];
83
+ }
84
+ const hasHeader = t13;
85
+ let t14;
86
+ if ($[2] !== footer) {
87
+ t14 = isFooterFilled(footer);
88
+ $[2] = footer;
89
+ $[3] = t14;
90
+ } else {
91
+ t14 = $[3];
92
+ }
93
+ const hasFooter = t14;
94
+ let t15;
95
+ if ($[4] !== current || $[5] !== footer || $[6] !== isPreview || $[7] !== isView || $[8] !== openWebView) {
96
+ t15 = getFooterProps(footer, {
97
+ isView,
98
+ current,
99
+ openWebView,
100
+ isPreview
101
+ });
102
+ $[4] = current;
103
+ $[5] = footer;
104
+ $[6] = isPreview;
105
+ $[7] = isView;
106
+ $[8] = openWebView;
107
+ $[9] = t15;
108
+ } else {
109
+ t15 = $[9];
110
+ }
111
+ const footerProps = t15;
112
+ let T0;
113
+ let T1;
114
+ let T2;
115
+ let backgroundPlaying;
116
+ let hasAuthor;
117
+ let mediaShouldLoad;
118
+ let t16;
119
+ let t17;
120
+ let t18;
121
+ let t19;
122
+ let t20;
123
+ let t21;
124
+ let t22;
125
+ let t23;
126
+ let t24;
127
+ let t25;
128
+ let t26;
129
+ let t27;
130
+ let t28;
131
+ let t29;
132
+ let t30;
133
+ let t31;
134
+ let t32;
135
+ let t33;
136
+ let t34;
137
+ if ($[10] !== author || $[11] !== className || $[12] !== current || $[13] !== hasFooter || $[14] !== hasHeader || $[15] !== header || $[16] !== height || $[17] !== isBottomLayout || $[18] !== isCurrentMedia || $[19] !== isEdit || $[20] !== isMiddleLayout || $[21] !== isPlaceholder || $[22] !== isPreview || $[23] !== isSplitted || $[24] !== isView || $[25] !== preload || $[26] !== quote || $[27] !== spacing || $[28] !== verticalAlign || $[29] !== viewerBottomHeight || $[30] !== viewerTopHeight || $[31] !== width) {
138
+ const hasQuote = isTextFilled(quote);
139
+ hasAuthor = isTextFilled(author);
140
+ const quoteWithMargin = hasQuote && hasAuthor && !isSplitted;
141
+ backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
142
+ mediaShouldLoad = current || preload;
143
+ if ($[57] !== className || $[58] !== isPlaceholder) {
144
+ t33 = classNames([styles.container, className, {
145
+ [styles.isPlaceholder]: isPlaceholder
146
+ }]);
147
+ $[57] = className;
148
+ $[58] = isPlaceholder;
149
+ $[59] = t33;
150
+ } else {
151
+ t33 = $[59];
152
+ }
153
+ t34 = true;
154
+ T2 = Container;
155
+ t30 = width;
156
+ t31 = height;
157
+ t32 = styles.content;
158
+ T1 = Layout;
159
+ t22 = styles.layout;
160
+ t23 = true;
161
+ t24 = verticalAlign;
162
+ if ($[60] !== hasFooter || $[61] !== hasHeader || $[62] !== isPlaceholder || $[63] !== isPreview || $[64] !== spacing || $[65] !== viewerBottomHeight || $[66] !== viewerTopHeight) {
163
+ t25 = !isPlaceholder ? {
164
+ paddingLeft: spacing,
165
+ paddingRight: spacing,
166
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
167
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
168
+ } : null;
169
+ $[60] = hasFooter;
170
+ $[61] = hasHeader;
171
+ $[62] = isPlaceholder;
172
+ $[63] = isPreview;
173
+ $[64] = spacing;
174
+ $[65] = viewerBottomHeight;
175
+ $[66] = viewerTopHeight;
176
+ $[67] = t25;
177
+ } else {
178
+ t25 = $[67];
179
+ }
180
+ if ($[68] !== hasHeader || $[69] !== header || $[70] !== isPlaceholder || $[71] !== spacing) {
181
+ t26 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
182
+ style: {
183
+ paddingBottom: spacing
184
+ },
185
+ children: /*#__PURE__*/jsx(Header, {
186
+ ...header
187
+ })
188
+ }) : null;
189
+ $[68] = hasHeader;
190
+ $[69] = header;
191
+ $[70] = isPlaceholder;
192
+ $[71] = spacing;
193
+ $[72] = t26;
194
+ } else {
195
+ t26 = $[72];
196
+ }
197
+ if ($[73] !== hasFooter || $[74] !== isMiddleLayout || $[75] !== isPlaceholder) {
198
+ t27 = !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
199
+ $[73] = hasFooter;
200
+ $[74] = isMiddleLayout;
201
+ $[75] = isPlaceholder;
202
+ $[76] = t27;
203
+ } else {
204
+ t27 = $[76];
205
+ }
206
+ if ($[77] !== hasHeader || $[78] !== isBottomLayout || $[79] !== isPlaceholder) {
207
+ t28 = !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
208
+ $[77] = hasHeader;
209
+ $[78] = isBottomLayout;
210
+ $[79] = isPlaceholder;
211
+ $[80] = t28;
212
+ } else {
213
+ t28 = $[80];
214
+ }
215
+ if ($[81] !== hasFooter || $[82] !== hasHeader || $[83] !== isMiddleLayout || $[84] !== isPlaceholder) {
216
+ t29 = !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
217
+ $[81] = hasFooter;
218
+ $[82] = hasHeader;
219
+ $[83] = isMiddleLayout;
220
+ $[84] = isPlaceholder;
221
+ $[85] = t29;
222
+ } else {
223
+ t29 = $[85];
224
+ }
225
+ T0 = ScreenElement;
226
+ t16 = "quote";
227
+ t17 = "quote";
228
+ if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
229
+ t18 = /*#__PURE__*/jsx(FormattedMessage, {
230
+ id: "CrzYgw",
231
+ defaultMessage: "Quote"
232
+ });
233
+ $[86] = t18;
234
+ } else {
235
+ t18 = $[86];
236
+ }
237
+ t19 = styles.emptyQuote;
238
+ t20 = !hasQuote;
239
+ t21 = hasQuote ? /*#__PURE__*/jsx(Quote, {
240
+ className: classNames([styles.quote, {
241
+ [styles.withMargin]: quoteWithMargin
242
+ }]),
243
+ ...quote
244
+ }) : null;
245
+ $[10] = author;
246
+ $[11] = className;
247
+ $[12] = current;
248
+ $[13] = hasFooter;
249
+ $[14] = hasHeader;
250
+ $[15] = header;
251
+ $[16] = height;
252
+ $[17] = isBottomLayout;
253
+ $[18] = isCurrentMedia;
254
+ $[19] = isEdit;
255
+ $[20] = isMiddleLayout;
256
+ $[21] = isPlaceholder;
257
+ $[22] = isPreview;
258
+ $[23] = isSplitted;
259
+ $[24] = isView;
260
+ $[25] = preload;
261
+ $[26] = quote;
262
+ $[27] = spacing;
263
+ $[28] = verticalAlign;
264
+ $[29] = viewerBottomHeight;
265
+ $[30] = viewerTopHeight;
266
+ $[31] = width;
267
+ $[32] = T0;
268
+ $[33] = T1;
269
+ $[34] = T2;
270
+ $[35] = backgroundPlaying;
271
+ $[36] = hasAuthor;
272
+ $[37] = mediaShouldLoad;
273
+ $[38] = t16;
274
+ $[39] = t17;
275
+ $[40] = t18;
276
+ $[41] = t19;
277
+ $[42] = t20;
278
+ $[43] = t21;
279
+ $[44] = t22;
280
+ $[45] = t23;
281
+ $[46] = t24;
282
+ $[47] = t25;
283
+ $[48] = t26;
284
+ $[49] = t27;
285
+ $[50] = t28;
286
+ $[51] = t29;
287
+ $[52] = t30;
288
+ $[53] = t31;
289
+ $[54] = t32;
290
+ $[55] = t33;
291
+ $[56] = t34;
292
+ } else {
293
+ T0 = $[32];
294
+ T1 = $[33];
295
+ T2 = $[34];
296
+ backgroundPlaying = $[35];
297
+ hasAuthor = $[36];
298
+ mediaShouldLoad = $[37];
299
+ t16 = $[38];
300
+ t17 = $[39];
301
+ t18 = $[40];
302
+ t19 = $[41];
303
+ t20 = $[42];
304
+ t21 = $[43];
305
+ t22 = $[44];
306
+ t23 = $[45];
307
+ t24 = $[46];
308
+ t25 = $[47];
309
+ t26 = $[48];
310
+ t27 = $[49];
311
+ t28 = $[50];
312
+ t29 = $[51];
313
+ t30 = $[52];
314
+ t31 = $[53];
315
+ t32 = $[54];
316
+ t33 = $[55];
317
+ t34 = $[56];
318
+ }
319
+ let t35;
320
+ if ($[87] !== T0 || $[88] !== t16 || $[89] !== t17 || $[90] !== t18 || $[91] !== t19 || $[92] !== t20 || $[93] !== t21) {
321
+ t35 = /*#__PURE__*/jsx(T0, {
322
+ placeholder: t17,
323
+ emptyLabel: t18,
324
+ emptyClassName: t19,
325
+ isEmpty: t20,
326
+ children: t21
327
+ }, t16);
328
+ $[87] = T0;
329
+ $[88] = t16;
330
+ $[89] = t17;
331
+ $[90] = t18;
332
+ $[91] = t19;
333
+ $[92] = t20;
334
+ $[93] = t21;
335
+ $[94] = t35;
336
+ } else {
337
+ t35 = $[94];
338
+ }
339
+ let t36;
340
+ if ($[95] !== isSplitted) {
341
+ t36 = isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null;
342
+ $[95] = isSplitted;
343
+ $[96] = t36;
344
+ } else {
345
+ t36 = $[96];
346
+ }
347
+ let t37;
348
+ if ($[97] === Symbol.for("react.memo_cache_sentinel")) {
349
+ t37 = /*#__PURE__*/jsx(FormattedMessage, {
350
+ id: "xYqGzM",
351
+ defaultMessage: "Author"
352
+ });
353
+ $[97] = t37;
354
+ } else {
355
+ t37 = $[97];
356
+ }
357
+ const t38 = !hasAuthor;
358
+ let t39;
359
+ if ($[98] !== author || $[99] !== hasAuthor) {
360
+ t39 = hasAuthor ? /*#__PURE__*/jsx(Text, {
361
+ className: styles.author,
362
+ ...author
363
+ }) : null;
364
+ $[98] = author;
365
+ $[99] = hasAuthor;
366
+ $[100] = t39;
367
+ } else {
368
+ t39 = $[100];
369
+ }
370
+ let t40;
371
+ if ($[101] !== t38 || $[102] !== t39) {
372
+ t40 = /*#__PURE__*/jsx(ScreenElement, {
373
+ placeholder: "subtitle",
374
+ emptyLabel: t37,
375
+ emptyClassName: styles.emptyAuthor,
376
+ isEmpty: t38,
377
+ children: t39
378
+ }, "author");
379
+ $[101] = t38;
380
+ $[102] = t39;
381
+ $[103] = t40;
382
+ } else {
383
+ t40 = $[103];
384
+ }
385
+ let t41;
386
+ if ($[104] !== hasFooter || $[105] !== isMiddleLayout || $[106] !== isPlaceholder || $[107] !== isTopLayout) {
387
+ t41 = !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null;
388
+ $[104] = hasFooter;
389
+ $[105] = isMiddleLayout;
390
+ $[106] = isPlaceholder;
391
+ $[107] = isTopLayout;
392
+ $[108] = t41;
393
+ } else {
394
+ t41 = $[108];
395
+ }
396
+ let t42;
397
+ if ($[109] !== hasFooter || $[110] !== hasHeader || $[111] !== isMiddleLayout || $[112] !== isPlaceholder) {
398
+ t42 = !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null;
399
+ $[109] = hasFooter;
400
+ $[110] = hasHeader;
401
+ $[111] = isMiddleLayout;
402
+ $[112] = isPlaceholder;
403
+ $[113] = t42;
404
+ } else {
405
+ t42 = $[113];
406
+ }
407
+ let t43;
408
+ if ($[114] !== footerProps || $[115] !== hasFooter || $[116] !== isPlaceholder || $[117] !== spacing || $[118] !== viewerBottomSidesWidth) {
409
+ t43 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
410
+ style: {
411
+ paddingTop: spacing,
412
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
413
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
414
+ },
415
+ children: /*#__PURE__*/jsx(Footer, {
416
+ ...footerProps
137
417
  })
138
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
418
+ }) : null;
419
+ $[114] = footerProps;
420
+ $[115] = hasFooter;
421
+ $[116] = isPlaceholder;
422
+ $[117] = spacing;
423
+ $[118] = viewerBottomSidesWidth;
424
+ $[119] = t43;
425
+ } else {
426
+ t43 = $[119];
427
+ }
428
+ let t44;
429
+ if ($[120] !== T1 || $[121] !== t22 || $[122] !== t23 || $[123] !== t24 || $[124] !== t25 || $[125] !== t26 || $[126] !== t27 || $[127] !== t28 || $[128] !== t29 || $[129] !== t35 || $[130] !== t36 || $[131] !== t40 || $[132] !== t41 || $[133] !== t42 || $[134] !== t43) {
430
+ t44 = /*#__PURE__*/jsxs(T1, {
431
+ className: t22,
432
+ fullscreen: t23,
433
+ verticalAlign: t24,
434
+ style: t25,
435
+ children: [t26, t27, t28, t29, t35, t36, t40, t41, t42, t43]
436
+ });
437
+ $[120] = T1;
438
+ $[121] = t22;
439
+ $[122] = t23;
440
+ $[123] = t24;
441
+ $[124] = t25;
442
+ $[125] = t26;
443
+ $[126] = t27;
444
+ $[127] = t28;
445
+ $[128] = t29;
446
+ $[129] = t35;
447
+ $[130] = t36;
448
+ $[131] = t40;
449
+ $[132] = t41;
450
+ $[133] = t42;
451
+ $[134] = t43;
452
+ $[135] = t44;
453
+ } else {
454
+ t44 = $[135];
455
+ }
456
+ let t45;
457
+ if ($[136] !== T2 || $[137] !== t30 || $[138] !== t31 || $[139] !== t32 || $[140] !== t44) {
458
+ t45 = /*#__PURE__*/jsx(T2, {
459
+ width: t30,
460
+ height: t31,
461
+ className: t32,
462
+ children: t44
463
+ });
464
+ $[136] = T2;
465
+ $[137] = t30;
466
+ $[138] = t31;
467
+ $[139] = t32;
468
+ $[140] = t44;
469
+ $[141] = t45;
470
+ } else {
471
+ t45 = $[141];
472
+ }
473
+ let t46;
474
+ if ($[142] !== background || $[143] !== backgroundPlaying || $[144] !== customMediaRef || $[145] !== height || $[146] !== isPlaceholder || $[147] !== isPreview || $[148] !== mediaRef || $[149] !== mediaShouldLoad || $[150] !== muted || $[151] !== resolution || $[152] !== width) {
475
+ t46 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
139
476
  background: background,
140
477
  width: width,
141
478
  height: height,
@@ -143,11 +480,41 @@ function QuoteScreen(_ref) {
143
480
  playing: backgroundPlaying,
144
481
  muted: muted,
145
482
  shouldLoad: mediaShouldLoad,
146
- mediaRef: mediaRef,
483
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
147
484
  withoutVideo: isPreview,
148
485
  className: styles.background
149
- }) : null]
150
- });
486
+ }) : null;
487
+ $[142] = background;
488
+ $[143] = backgroundPlaying;
489
+ $[144] = customMediaRef;
490
+ $[145] = height;
491
+ $[146] = isPlaceholder;
492
+ $[147] = isPreview;
493
+ $[148] = mediaRef;
494
+ $[149] = mediaShouldLoad;
495
+ $[150] = muted;
496
+ $[151] = resolution;
497
+ $[152] = width;
498
+ $[153] = t46;
499
+ } else {
500
+ t46 = $[153];
501
+ }
502
+ let t47;
503
+ if ($[154] !== t33 || $[155] !== t34 || $[156] !== t45 || $[157] !== t46) {
504
+ t47 = /*#__PURE__*/jsxs("div", {
505
+ className: t33,
506
+ "data-screen-ready": t34,
507
+ children: [t45, t46]
508
+ });
509
+ $[154] = t33;
510
+ $[155] = t34;
511
+ $[156] = t45;
512
+ $[157] = t46;
513
+ $[158] = t47;
514
+ } else {
515
+ t47 = $[158];
516
+ }
517
+ return t47;
151
518
  }
152
519
 
153
520
  // import * as transforms from './transforms/index';
@@ -158,19 +525,13 @@ var definition = {
158
525
  group: {
159
526
  label: defineMessage({
160
527
  id: "fIawTr",
161
- defaultMessage: [{
162
- "type": 0,
163
- "value": "Text"
164
- }]
528
+ defaultMessage: "Text"
165
529
  }),
166
530
  order: 2
167
531
  },
168
532
  title: defineMessage({
169
533
  id: "3q9GPv",
170
- defaultMessage: [{
171
- "type": 0,
172
- "value": "Quote"
173
- }]
534
+ defaultMessage: "Quote"
174
535
  }),
175
536
  component: QuoteScreen,
176
537
  layouts: ['top', 'middle', 'bottom', 'split'],
@@ -181,10 +542,7 @@ var definition = {
181
542
  defaultValue: 'top',
182
543
  label: defineMessage({
183
544
  id: "4iBXj2",
184
- defaultMessage: [{
185
- "type": 0,
186
- "value": "Layout"
187
- }]
545
+ defaultMessage: "Layout"
188
546
  })
189
547
  }, {
190
548
  name: 'quote',
@@ -195,10 +553,7 @@ var definition = {
195
553
  },
196
554
  label: defineMessage({
197
555
  id: "88/Ge8",
198
- defaultMessage: [{
199
- "type": 0,
200
- "value": "Quote"
201
- }]
556
+ defaultMessage: "Quote"
202
557
  })
203
558
  }, {
204
559
  name: 'author',
@@ -208,30 +563,21 @@ var definition = {
208
563
  },
209
564
  label: defineMessage({
210
565
  id: "73hxYw",
211
- defaultMessage: [{
212
- "type": 0,
213
- "value": "Author"
214
- }]
566
+ defaultMessage: "Author"
215
567
  })
216
568
  }, {
217
569
  name: 'background',
218
570
  type: 'background',
219
571
  label: defineMessage({
220
572
  id: "+MPZRu",
221
- defaultMessage: [{
222
- "type": 0,
223
- "value": "Background"
224
- }]
573
+ defaultMessage: "Background"
225
574
  })
226
575
  }, {
227
576
  name: 'header',
228
577
  type: 'header',
229
578
  label: defineMessage({
230
579
  id: "rhuDxI",
231
- defaultMessage: [{
232
- "type": 0,
233
- "value": "Header"
234
- }]
580
+ defaultMessage: "Header"
235
581
  }),
236
582
  theme: {
237
583
  badge: {
@@ -246,10 +592,7 @@ var definition = {
246
592
  type: 'footer',
247
593
  label: defineMessage({
248
594
  id: "g4nybp",
249
- defaultMessage: [{
250
- "type": 0,
251
- "value": "Footer"
252
- }]
595
+ defaultMessage: "Footer"
253
596
  }),
254
597
  theme: {
255
598
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quote",
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-quote": "^0.4.69",
71
- "@micromag/element-text": "^0.4.69",
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-quote": "^0.4.74",
72
+ "@micromag/element-text": "^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
  }