@micromag/screen-urbania-recommendation 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 +399 -458
  3. package/package.json +19 -18
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { HeadingElement, VisualElement, TextElement, Header, Footer, BackgroundElement, BoxStyle, Color } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { HeadingElement, VisualElement, TextElement, Header, Footer, BackgroundElement, BoxStyle, Color, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface UrbaniaRecommendationProps {
5
6
  layout?: string | null;
@@ -22,9 +23,10 @@ interface UrbaniaRecommendationProps {
22
23
  current?: boolean;
23
24
  active?: boolean;
24
25
  preload?: boolean;
26
+ mediaRef?: ForwardedRef<MediaElement> | null;
25
27
  className?: string | null;
26
28
  }
27
- declare function UrbaniaRecommendation({ layout, category, visual, title, date, location, description, sponsor, spacing, header, footer, background, cardBoxStyle, lineColor, withoutZoom, current, active, preload, className, }: UrbaniaRecommendationProps): react_jsx_runtime.JSX.Element;
29
+ declare function UrbaniaRecommendation({ layout, category, visual, title, date, location, description, sponsor, spacing, header, footer, background, cardBoxStyle, lineColor, withoutZoom, current, active, preload, mediaRef: customMediaRef, className, }: UrbaniaRecommendationProps): react_jsx_runtime.JSX.Element;
28
30
 
29
31
  declare const _default: {
30
32
  id: string;
package/es/index.js CHANGED
@@ -1,13 +1,10 @@
1
1
  import { useIntl, 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';
5
2
  import classNames from 'classnames';
6
3
  import { useState, useMemo, useEffect, useCallback } from 'react';
7
4
  import { Close, ScreenElement, MuteIcon, FullscreenIcon, PlaceholderImage, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
8
5
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
9
6
  import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
10
- import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getColorAsString, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
7
+ import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getColorAsString, getStyleFromBox, mergeRefs, getStyleFromText } from '@micromag/core/utils';
11
8
  import Background from '@micromag/element-background';
12
9
  import Button from '@micromag/element-button';
13
10
  import Container from '@micromag/element-container';
@@ -22,185 +19,156 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
22
19
 
23
20
  var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","hidden":"micromag-screen-urbania-recommendation-hidden","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","content":"micromag-screen-urbania-recommendation-content","scroll":"micromag-screen-urbania-recommendation-scroll","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","footer":"micromag-screen-urbania-recommendation-footer","disabled":"micromag-screen-urbania-recommendation-disabled","close":"micromag-screen-urbania-recommendation-close","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","visualButton":"micromag-screen-urbania-recommendation-visualButton","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","withoutCategory":"micromag-screen-urbania-recommendation-withoutCategory","title":"micromag-screen-urbania-recommendation-title","description":"micromag-screen-urbania-recommendation-description","location":"micromag-screen-urbania-recommendation-location","date":"micromag-screen-urbania-recommendation-date","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","border":"micromag-screen-urbania-recommendation-border","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
24
21
 
25
- function UrbaniaRecommendation(_ref) {
26
- var _ref$layout = _ref.layout,
27
- layout = _ref$layout === void 0 ? null : _ref$layout,
28
- _ref$category = _ref.category,
29
- category = _ref$category === void 0 ? null : _ref$category,
30
- _ref$visual = _ref.visual,
31
- visual = _ref$visual === void 0 ? null : _ref$visual,
32
- _ref$title = _ref.title,
33
- title = _ref$title === void 0 ? null : _ref$title,
34
- _ref$date = _ref.date,
35
- date = _ref$date === void 0 ? null : _ref$date,
36
- _ref$location = _ref.location,
37
- location = _ref$location === void 0 ? null : _ref$location,
38
- _ref$description = _ref.description,
39
- description = _ref$description === void 0 ? null : _ref$description,
40
- _ref$sponsor = _ref.sponsor,
41
- sponsor = _ref$sponsor === void 0 ? null : _ref$sponsor,
42
- _ref$spacing = _ref.spacing,
43
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
44
- _ref$header = _ref.header,
45
- header = _ref$header === void 0 ? null : _ref$header,
46
- _ref$footer = _ref.footer,
47
- footer = _ref$footer === void 0 ? null : _ref$footer,
48
- _ref$background = _ref.background,
49
- background = _ref$background === void 0 ? null : _ref$background,
50
- _ref$cardBoxStyle = _ref.cardBoxStyle,
51
- cardBoxStyle = _ref$cardBoxStyle === void 0 ? null : _ref$cardBoxStyle,
52
- _ref$lineColor = _ref.lineColor,
53
- lineColor = _ref$lineColor === void 0 ? null : _ref$lineColor,
54
- _ref$withoutZoom = _ref.withoutZoom,
55
- withoutZoom = _ref$withoutZoom === void 0 ? false : _ref$withoutZoom,
56
- _ref$current = _ref.current,
57
- current = _ref$current === void 0 ? true : _ref$current,
58
- _ref$active = _ref.active,
59
- active = _ref$active === void 0 ? true : _ref$active,
60
- _ref$preload = _ref.preload,
61
- preload = _ref$preload === void 0 ? true : _ref$preload,
62
- _ref$className = _ref.className,
63
- className = _ref$className === void 0 ? null : _ref$className;
64
- var intl = useIntl();
65
- var trackScreenEvent = useTrackScreenEvent();
66
- var _useScreenSize = useScreenSize(),
67
- width = _useScreenSize.width,
68
- height = _useScreenSize.height,
69
- resolution = _useScreenSize.resolution;
70
- var _useViewerContext = useViewerContext(),
71
- viewerTopHeight = _useViewerContext.topHeight,
72
- viewerBottomHeight = _useViewerContext.bottomHeight,
73
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
74
- var _useViewerWebView = useViewerWebView(),
75
- openWebView = _useViewerWebView.open;
76
- var _usePlaybackContext = usePlaybackContext(),
77
- playing = _usePlaybackContext.playing,
78
- setPlaying = _usePlaybackContext.setPlaying,
79
- muted = _usePlaybackContext.muted,
80
- setMuted = _usePlaybackContext.setMuted;
81
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
82
- mediaRef = _usePlaybackMediaRef.ref,
83
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
84
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
85
- var _useViewerInteraction = useViewerInteraction(),
86
- enableInteraction = _useViewerInteraction.enableInteraction,
87
- disableInteraction = _useViewerInteraction.disableInteraction;
88
- var _useScreenRenderConte = useScreenRenderContext(),
89
- isView = _useScreenRenderConte.isView,
90
- isPreview = _useScreenRenderConte.isPreview,
91
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
92
- isEdit = _useScreenRenderConte.isEdit,
93
- isStatic = _useScreenRenderConte.isStatic;
94
- var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
95
- var _useState = useState(animateBackground),
96
- _useState2 = _slicedToArray(_useState, 2),
97
- backgroundAnimationStarted = _useState2[0],
98
- setBackgroundAnimationStarted = _useState2[1];
99
- var _useState3 = useState(false),
100
- _useState4 = _slicedToArray(_useState3, 2),
101
- didAnimate = _useState4[0],
102
- setDidAnimate = _useState4[1];
103
- var _ref2 = visual || {},
104
- _ref2$image = _ref2.image,
105
- image = _ref2$image === void 0 ? null : _ref2$image; // note: image can be a video
106
- var _ref3 = image || {},
107
- _ref3$type = _ref3.type,
108
- type = _ref3$type === void 0 ? null : _ref3$type,
109
- _ref3$metadata = _ref3.metadata,
110
- videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
111
- var _ref4 = videoMetadata || {},
112
- _ref4$width = _ref4.width,
113
- videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
114
- _ref4$height = _ref4.height,
115
- videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
116
- var hasVisual = image !== null;
117
- var isVideo = type === 'video';
118
- var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
119
- var hasCategory = isTextFilled(category);
120
- var hasTitle = isTextFilled(title);
121
- var hasDate = isTextFilled(date);
122
- var hasLocation = isTextFilled(location);
123
- var hasDescription = isTextFilled(description);
124
- var hasSponsor = isTextFilled(sponsor);
125
- var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
126
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
127
- var videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
128
- var mediaShouldLoad = current || preload;
129
- var scrollingDisabled = !isView && !isEdit || !current;
130
- var hasHeader = isHeaderFilled(header);
131
- var hasFooter = isFooterFilled(footer);
132
- var footerProps = getFooterProps(footer, {
133
- isView: isView,
134
- current: current,
135
- openWebView: openWebView,
136
- isPreview: isPreview
22
+ function UrbaniaRecommendation({
23
+ layout = null,
24
+ category = null,
25
+ visual = null,
26
+ title = null,
27
+ date = null,
28
+ location = null,
29
+ description = null,
30
+ sponsor = null,
31
+ spacing = 20,
32
+ header = null,
33
+ footer = null,
34
+ background = null,
35
+ cardBoxStyle = null,
36
+ lineColor = null,
37
+ withoutZoom = false,
38
+ current = true,
39
+ active = true,
40
+ preload = true,
41
+ mediaRef: customMediaRef = null,
42
+ className = null
43
+ }) {
44
+ const intl = useIntl();
45
+ const trackScreenEvent = useTrackScreenEvent();
46
+ const {
47
+ width,
48
+ height,
49
+ resolution
50
+ } = useScreenSize();
51
+ const {
52
+ topHeight: viewerTopHeight,
53
+ bottomHeight: viewerBottomHeight,
54
+ bottomSidesWidth: viewerBottomSidesWidth
55
+ } = useViewerContext();
56
+ const {
57
+ open: openWebView
58
+ } = useViewerWebView();
59
+ const {
60
+ playing,
61
+ setPlaying,
62
+ muted,
63
+ setMuted
64
+ } = usePlaybackContext();
65
+ const {
66
+ ref: mediaRef,
67
+ isCurrent: isCurrentMedia = false
68
+ } = usePlaybackMediaRef(current, true);
69
+ const {
70
+ enableInteraction,
71
+ disableInteraction
72
+ } = useViewerInteraction();
73
+ const {
74
+ isView,
75
+ isPreview,
76
+ isPlaceholder,
77
+ isEdit,
78
+ isStatic
79
+ } = useScreenRenderContext();
80
+ const animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
81
+ const [backgroundAnimationStarted, setBackgroundAnimationStarted] = useState(animateBackground);
82
+ const [didAnimate, setDidAnimate] = useState(false);
83
+ const {
84
+ image = null
85
+ } = visual || {}; // note: image can be a video
86
+ const {
87
+ type = null,
88
+ metadata: videoMetadata = null
89
+ } = image || {};
90
+ const {
91
+ width: videoWidth = 0,
92
+ height: videoHeight = 0
93
+ } = videoMetadata || {};
94
+ const hasVisual = image !== null;
95
+ const isVideo = type === 'video';
96
+ const isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
97
+ const hasCategory = isTextFilled(category);
98
+ const hasTitle = isTextFilled(title);
99
+ const hasDate = isTextFilled(date);
100
+ const hasLocation = isTextFilled(location);
101
+ const hasDescription = isTextFilled(description);
102
+ const hasSponsor = isTextFilled(sponsor);
103
+ const hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
104
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
105
+ const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
106
+ const mediaShouldLoad = current || preload;
107
+ const scrollingDisabled = !isView && !isEdit || !current;
108
+ const hasHeader = isHeaderFilled(header);
109
+ const hasFooter = isFooterFilled(footer);
110
+ const footerProps = getFooterProps(footer, {
111
+ isView,
112
+ current,
113
+ openWebView,
114
+ isPreview
137
115
  });
138
- var _useState5 = useState(false),
139
- _useState6 = _slicedToArray(_useState5, 2),
140
- scrolledBottom = _useState6[0],
141
- setScrolledBottom = _useState6[1];
142
- var _useResizeObserver = useResizeObserver(),
143
- textContainerRef = _useResizeObserver.ref,
144
- _useResizeObserver$en = _useResizeObserver.entry.contentRect,
145
- textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
146
- var _ref5 = textContainerRect || {},
147
- _ref5$width = _ref5.width,
148
- textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
149
- _ref5$height = _ref5.height,
150
- textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
151
- var _useState7 = useState(false),
152
- _useState8 = _slicedToArray(_useState7, 2),
153
- visualModalTransitioning = _useState8[0],
154
- setVisualModalTransitioning = _useState8[1];
155
- var _useState9 = useState(false),
156
- _useState0 = _slicedToArray(_useState9, 2),
157
- visualModalOpened = _useState0[0],
158
- setVisualModalOpened = _useState0[1];
159
- var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
160
- var _ref6 = background || {},
161
- _ref6$text = _ref6.text,
162
- backgroundText = _ref6$text === void 0 ? null : _ref6$text;
163
- var _ref7 = backgroundText || {},
164
- _ref7$body = _ref7.body,
165
- backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
166
- backgroundTextStyle = _ref7.textStyle;
167
- var finalBackgroundText = useMemo(function () {
116
+ const [scrolledBottom, setScrolledBottom] = useState(false);
117
+ const {
118
+ ref: textContainerRef,
119
+ entry: {
120
+ contentRect: textContainerRect = null
121
+ }
122
+ } = useResizeObserver();
123
+ const {
124
+ width: textContainerWidth = 0,
125
+ height: textContainerHeight = 0
126
+ } = textContainerRect || {};
127
+ const [visualModalTransitioning, setVisualModalTransitioning] = useState(false);
128
+ const [visualModalOpened, setVisualModalOpened] = useState(false);
129
+ const visualModalClosed = !visualModalTransitioning && !visualModalOpened;
130
+ const {
131
+ text: backgroundText = null
132
+ } = background || {};
133
+ const {
134
+ body: backgroundTextBody = null,
135
+ textStyle: backgroundTextStyle
136
+ } = backgroundText || {};
137
+ const finalBackgroundText = useMemo(() => {
168
138
  function distributeTextEqually(text) {
169
- var words = text !== null ? text.split(' ') : [];
170
- var numRows = 4;
139
+ const words = text !== null ? text.split(' ') : [];
140
+ const numRows = 4;
171
141
  if (words.length < numRows / 2) {
172
142
  return Array(numRows).fill(text);
173
143
  }
174
- var halfNumWords = Math.ceil(words.length / 2);
175
- var firstHalf = words.slice(0, halfNumWords).join(' ');
176
- var secondHalf = words.slice(halfNumWords).join(' ');
144
+ const halfNumWords = Math.ceil(words.length / 2);
145
+ const firstHalf = words.slice(0, halfNumWords).join(' ');
146
+ const secondHalf = words.slice(halfNumWords).join(' ');
177
147
  return [firstHalf, secondHalf, firstHalf, secondHalf];
178
148
  }
179
- var textArray = distributeTextEqually(backgroundTextBody);
149
+ const textArray = distributeTextEqually(backgroundTextBody);
180
150
 
181
151
  // @TODO: move container div here to avoid double map
182
- var textElements = (textArray || []).map(function (line) {
183
- return /*#__PURE__*/jsx("span", {
184
- children: line
185
- });
186
- });
152
+ const textElements = (textArray || []).map(line => /*#__PURE__*/jsx("span", {
153
+ children: line
154
+ }));
187
155
  return textElements;
188
156
  }, [backgroundTextBody]);
189
157
 
190
158
  // intro animation
191
- useEffect(function () {
192
- var id = null;
159
+ useEffect(() => {
160
+ let id = null;
193
161
  if (backgroundAnimationStarted) {
194
- id = setTimeout(function () {
162
+ id = setTimeout(() => {
195
163
  setBackgroundAnimationStarted(false);
196
164
  setDidAnimate(true);
197
165
  }, 1600);
198
166
  }
199
- return function () {
167
+ return () => {
200
168
  clearTimeout(id);
201
169
  };
202
170
  }, [backgroundAnimationStarted, animateBackground, setDidAnimate, setBackgroundAnimationStarted]);
203
- useEffect(function () {
171
+ useEffect(() => {
204
172
  if (isView && !isStatic && current) {
205
173
  setBackgroundAnimationStarted(true);
206
174
  } else {
@@ -209,31 +177,31 @@ function UrbaniaRecommendation(_ref) {
209
177
  }, [isView, current, setBackgroundAnimationStarted]);
210
178
 
211
179
  // scroll events
212
- var onScrolledBottom = useCallback(function (_ref8) {
213
- var initial = _ref8.initial;
180
+ const onScrolledBottom = useCallback(({
181
+ initial
182
+ }) => {
214
183
  if (initial) {
215
184
  trackScreenEvent('scroll', 'Screen');
216
185
  }
217
186
  setScrolledBottom(true);
218
187
  }, [trackScreenEvent]);
219
- var onScrolledNotBottom = useCallback(function () {
188
+ const onScrolledNotBottom = useCallback(() => {
220
189
  setScrolledBottom(false);
221
190
  }, [setScrolledBottom]);
222
- var onScrolledTrigger = useCallback(function () {
223
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
191
+ const onScrolledTrigger = useCallback((trigger = null) => {
224
192
  if (trigger !== null) {
225
- var scrollPercent = Math.round(trigger * 100);
193
+ const scrollPercent = Math.round(trigger * 100);
226
194
  trackScreenEvent('scroll', scrollPercent, {
227
- scrollPercent: scrollPercent
195
+ scrollPercent
228
196
  });
229
197
  }
230
198
  }, [trackScreenEvent]);
231
199
 
232
200
  // modal
233
- useEffect(function () {
234
- var id = null;
201
+ useEffect(() => {
202
+ let id_0 = null;
235
203
  if (visualModalTransitioning) {
236
- id = setTimeout(function () {
204
+ id_0 = setTimeout(() => {
237
205
  setVisualModalTransitioning(false);
238
206
  setVisualModalOpened(true);
239
207
  }, 400);
@@ -241,11 +209,11 @@ function UrbaniaRecommendation(_ref) {
241
209
  if (!current) {
242
210
  setVisualModalOpened(false);
243
211
  }
244
- return function () {
245
- clearTimeout(id);
212
+ return () => {
213
+ clearTimeout(id_0);
246
214
  };
247
215
  }, [visualModalTransitioning, setVisualModalTransitioning, current]);
248
- var onClickVisual = useCallback(function () {
216
+ const onClickVisual = useCallback(() => {
249
217
  if (!visualModalOpened) {
250
218
  setVisualModalTransitioning(true);
251
219
  }
@@ -253,21 +221,21 @@ function UrbaniaRecommendation(_ref) {
253
221
  setMuted(false);
254
222
  }
255
223
  }, [setVisualModalOpened]);
256
- var onCloseModal = useCallback(function () {
224
+ const onCloseModal = useCallback(() => {
257
225
  if (visualModalTransitioning) {
258
226
  setVisualModalTransitioning(false);
259
227
  }
260
228
  setVisualModalOpened(false);
261
229
  }, [setVisualModalOpened]);
262
- useEffect(function () {
230
+ useEffect(() => {
263
231
  if (visualModalOpened) {
264
232
  disableInteraction();
265
233
  } else {
266
234
  enableInteraction();
267
235
  }
268
236
  }, [current, visualModalOpened]);
269
- useEffect(function () {
270
- var keyup = function keyup(e) {
237
+ useEffect(() => {
238
+ const keyup = e => {
271
239
  if (e.key === 'Escape') {
272
240
  if (visualModalOpened) {
273
241
  onCloseModal();
@@ -275,143 +243,143 @@ function UrbaniaRecommendation(_ref) {
275
243
  }
276
244
  };
277
245
  document.addEventListener('keyup', keyup);
278
- return function () {
246
+ return () => {
279
247
  document.removeEventListener('keyup', keyup);
280
248
  };
281
249
  }, [visualModalOpened, onCloseModal]);
282
250
 
283
251
  // Modal video
284
252
 
285
- useEffect(function () {
253
+ useEffect(() => {
286
254
  if (current && !backgroundAnimationStarted) {
287
255
  setPlaying(true);
288
256
  }
289
257
  }, [current, backgroundAnimationStarted]);
290
258
 
291
259
  // Default font weights ++ for urbania styles
292
- var _useMemo = useMemo(function () {
293
- var _ref9 = title || {},
294
- _ref9$textStyle = _ref9.textStyle,
295
- finalTitleTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
296
- var _ref0 = finalTitleTextStyle || {},
297
- _ref0$color = _ref0.color,
298
- titleStyleColor = _ref0$color === void 0 ? null : _ref0$color,
299
- _ref0$fontFamily = _ref0.fontFamily,
300
- titleFontFamily = _ref0$fontFamily === void 0 ? null : _ref0$fontFamily,
301
- _ref0$fontStyle = _ref0.fontStyle,
302
- titleFontStyles = _ref0$fontStyle === void 0 ? null : _ref0$fontStyle;
303
- var finalTitleColor = getColorAsString(titleStyleColor);
304
- var finalTitleFontWeight = titleFontFamily === null ? 700 : null;
305
- var finalTextTransform = titleFontFamily === null ? 'uppercase' : null;
306
- var finalTitleFontStyle = titleFontFamily === null ? _objectSpread(_objectSpread({}, titleFontStyles), {}, {
307
- transform: 'uppercase'
308
- }) : titleFontStyles;
309
- var _ref1 = category || {},
310
- _ref1$textStyle = _ref1.textStyle,
311
- finalCategoryTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
312
- var _ref10 = finalCategoryTextStyle || {},
313
- _ref10$fontFamily = _ref10.fontFamily,
314
- categoryFontFamily = _ref10$fontFamily === void 0 ? null : _ref10$fontFamily,
315
- _ref10$fontStyle = _ref10.fontStyle,
316
- categoryFontStyles = _ref10$fontStyle === void 0 ? null : _ref10$fontStyle;
317
- var finalCategoryFontWeight = categoryFontFamily === null ? 900 : null;
318
- var finalCategoryFontStyle = categoryFontFamily === null ? _objectSpread(_objectSpread({}, categoryFontStyles), {}, {
319
- transform: 'uppercase'
320
- }) : categoryFontStyles;
321
- var _ref11 = description || {},
322
- _ref11$textStyle = _ref11.textStyle,
323
- finalDescriptionTextStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
324
- var _ref12 = finalDescriptionTextStyle || {},
325
- _ref12$fontFamily = _ref12.fontFamily,
326
- descriptionFontFamily = _ref12$fontFamily === void 0 ? null : _ref12$fontFamily;
327
- var finalDescriptionFontWeight = descriptionFontFamily === null ? 300 : null;
328
- var _ref13 = date || {},
329
- _ref13$textStyle = _ref13.textStyle,
330
- finalDateTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle;
331
- var _ref14 = finalDateTextStyle || {},
332
- _ref14$fontFamily = _ref14.fontFamily,
333
- dateFontFamily = _ref14$fontFamily === void 0 ? null : _ref14$fontFamily,
334
- _ref14$fontStyle = _ref14.fontStyle,
335
- dateFontStyles = _ref14$fontStyle === void 0 ? null : _ref14$fontStyle;
336
- var finalDateFontStyle = dateFontFamily === null ? _objectSpread(_objectSpread({}, dateFontStyles), {}, {
337
- transform: 'uppercase'
338
- }) : dateFontStyles;
339
- var _ref15 = location || {},
340
- _ref15$textStyle = _ref15.textStyle,
341
- finalLocationTextStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle;
342
- var _ref16 = finalLocationTextStyle || {},
343
- _ref16$fontFamily = _ref16.fontFamily,
344
- locationFontFamily = _ref16$fontFamily === void 0 ? null : _ref16$fontFamily,
345
- _ref16$fontStyle = _ref16.fontStyle,
346
- locationFontStyles = _ref16$fontStyle === void 0 ? null : _ref16$fontStyle;
347
- var finalLocationFontStyle = locationFontFamily === null ? _objectSpread(_objectSpread({}, locationFontStyles), {}, {
348
- transform: 'uppercase'
349
- }) : locationFontStyles;
350
- var _ref17 = sponsor || {},
351
- _ref17$textStyle = _ref17.textStyle,
352
- finalSponsorTextStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
353
- var _ref18 = finalSponsorTextStyle || {},
354
- _ref18$fontFamily = _ref18.fontFamily,
355
- sponsorFontFamily = _ref18$fontFamily === void 0 ? null : _ref18$fontFamily,
356
- _ref18$fontStyle = _ref18.fontStyle,
357
- sponsorFontStyles = _ref18$fontStyle === void 0 ? null : _ref18$fontStyle;
358
- var finalSponsorFontStyle = sponsorFontFamily === null ? _objectSpread(_objectSpread({}, sponsorFontStyles), {}, {
359
- transform: 'uppercase'
360
- }) : sponsorFontStyles;
361
- var _ref19 = backgroundTextStyle || {},
362
- _ref19$fontFamily = _ref19.fontFamily,
363
- backgroundFontFamily = _ref19$fontFamily === void 0 ? null : _ref19$fontFamily,
364
- _ref19$fontStyle = _ref19.fontStyle,
365
- backgroundFontStyles = _ref19$fontStyle === void 0 ? null : _ref19$fontStyle;
366
- var finalBackgroundFontStyle = backgroundFontFamily === null ? _objectSpread(_objectSpread({}, backgroundFontStyles), {}, {
367
- transform: 'uppercase'
368
- }) : backgroundFontStyles;
369
- return {
370
- defaultTextTransform: finalTextTransform,
371
- titleColor: finalTitleColor,
372
- titleTextStyle: finalTitleTextStyle,
373
- titleFontWeight: finalTitleFontWeight,
374
- titleFontStyle: finalTitleFontStyle,
375
- categoryTextStyle: finalCategoryTextStyle,
376
- categoryFontWeight: finalCategoryFontWeight,
377
- categoryFontStyle: finalCategoryFontStyle,
378
- descriptionTextStyle: finalDescriptionTextStyle,
379
- descriptionFontWeight: finalDescriptionFontWeight,
380
- dateTextStyle: finalDateTextStyle,
381
- dateFontStyle: finalDateFontStyle,
382
- locationTextStyle: finalLocationTextStyle,
383
- locationFontStyle: finalLocationFontStyle,
384
- sponsorTextStyle: finalSponsorTextStyle,
385
- sponsorFontStyle: finalSponsorFontStyle,
386
- backgroundFontStyle: finalBackgroundFontStyle
387
- };
388
- }, [title, category, description, date, location, sponsor, backgroundTextStyle]),
389
- titleTextStyle = _useMemo.titleTextStyle,
390
- titleColor = _useMemo.titleColor,
391
- titleFontWeight = _useMemo.titleFontWeight,
392
- titleFontStyle = _useMemo.titleFontStyle,
393
- categoryTextStyle = _useMemo.categoryTextStyle,
394
- categoryFontWeight = _useMemo.categoryFontWeight,
395
- categoryFontStyle = _useMemo.categoryFontStyle,
396
- descriptionTextStyle = _useMemo.descriptionTextStyle,
397
- descriptionFontWeight = _useMemo.descriptionFontWeight,
398
- dateTextStyle = _useMemo.dateTextStyle,
399
- dateFontStyle = _useMemo.dateFontStyle,
400
- locationTextStyle = _useMemo.locationTextStyle,
401
- locationFontStyle = _useMemo.locationFontStyle,
402
- sponsorTextStyle = _useMemo.sponsorTextStyle,
403
- sponsorFontStyle = _useMemo.sponsorFontStyle,
404
- backgroundFontStyle = _useMemo.backgroundFontStyle;
405
- var layoutStyle = !isPlaceholder ? getStyleFromBox(cardBoxStyle) : null;
406
- var _ref20 = layoutStyle || {},
407
- _ref20$borderRadius = _ref20.borderRadius,
408
- layoutBorderRadius = _ref20$borderRadius === void 0 ? null : _ref20$borderRadius;
409
- var withoutCorners = layoutBorderRadius === 0;
410
- var finalBorderColor = useMemo(function () {
411
- return lineColor !== null ? getColorAsString(lineColor) : titleColor;
412
- }, [lineColor, titleColor]);
260
+ const {
261
+ titleTextStyle,
262
+ titleColor,
263
+ titleFontWeight,
264
+ titleFontStyle,
265
+ categoryTextStyle,
266
+ categoryFontWeight,
267
+ categoryFontStyle,
268
+ descriptionTextStyle,
269
+ descriptionFontWeight,
270
+ dateTextStyle,
271
+ dateFontStyle,
272
+ locationTextStyle,
273
+ locationFontStyle,
274
+ sponsorTextStyle,
275
+ sponsorFontStyle,
276
+ backgroundFontStyle
277
+ } = useMemo(() => {
278
+ const {
279
+ textStyle: finalTitleTextStyle = null
280
+ } = title || {};
281
+ const {
282
+ color: titleStyleColor = null,
283
+ fontFamily: titleFontFamily = null,
284
+ fontStyle: titleFontStyles = null
285
+ } = finalTitleTextStyle || {};
286
+ const finalTitleColor = getColorAsString(titleStyleColor);
287
+ const finalTitleFontWeight = titleFontFamily === null ? 700 : null;
288
+ const finalTextTransform = titleFontFamily === null ? 'uppercase' : null;
289
+ const finalTitleFontStyle = titleFontFamily === null ? {
290
+ ...titleFontStyles,
291
+ transform: 'uppercase'
292
+ } : titleFontStyles;
293
+ const {
294
+ textStyle: finalCategoryTextStyle = null
295
+ } = category || {};
296
+ const {
297
+ fontFamily: categoryFontFamily = null,
298
+ fontStyle: categoryFontStyles = null
299
+ } = finalCategoryTextStyle || {};
300
+ const finalCategoryFontWeight = categoryFontFamily === null ? 900 : null;
301
+ const finalCategoryFontStyle = categoryFontFamily === null ? {
302
+ ...categoryFontStyles,
303
+ transform: 'uppercase'
304
+ } : categoryFontStyles;
305
+ const {
306
+ textStyle: finalDescriptionTextStyle = null
307
+ } = description || {};
308
+ const {
309
+ fontFamily: descriptionFontFamily = null
310
+ } = finalDescriptionTextStyle || {};
311
+ const finalDescriptionFontWeight = descriptionFontFamily === null ? 300 : null;
312
+ const {
313
+ textStyle: finalDateTextStyle = null
314
+ } = date || {};
315
+ const {
316
+ fontFamily: dateFontFamily = null,
317
+ fontStyle: dateFontStyles = null
318
+ } = finalDateTextStyle || {};
319
+ const finalDateFontStyle = dateFontFamily === null ? {
320
+ ...dateFontStyles,
321
+ transform: 'uppercase'
322
+ } : dateFontStyles;
323
+ const {
324
+ textStyle: finalLocationTextStyle = null
325
+ } = location || {};
326
+ const {
327
+ fontFamily: locationFontFamily = null,
328
+ fontStyle: locationFontStyles = null
329
+ } = finalLocationTextStyle || {};
330
+ const finalLocationFontStyle = locationFontFamily === null ? {
331
+ ...locationFontStyles,
332
+ transform: 'uppercase'
333
+ } : locationFontStyles;
334
+ const {
335
+ textStyle: finalSponsorTextStyle = null
336
+ } = sponsor || {};
337
+ const {
338
+ fontFamily: sponsorFontFamily = null,
339
+ fontStyle: sponsorFontStyles = null
340
+ } = finalSponsorTextStyle || {};
341
+ const finalSponsorFontStyle = sponsorFontFamily === null ? {
342
+ ...sponsorFontStyles,
343
+ transform: 'uppercase'
344
+ } : sponsorFontStyles;
345
+ const {
346
+ fontFamily: backgroundFontFamily = null,
347
+ fontStyle: backgroundFontStyles = null
348
+ } = backgroundTextStyle || {};
349
+ const finalBackgroundFontStyle = backgroundFontFamily === null ? {
350
+ ...backgroundFontStyles,
351
+ transform: 'uppercase'
352
+ } : backgroundFontStyles;
353
+ return {
354
+ defaultTextTransform: finalTextTransform,
355
+ titleColor: finalTitleColor,
356
+ titleTextStyle: finalTitleTextStyle,
357
+ titleFontWeight: finalTitleFontWeight,
358
+ titleFontStyle: finalTitleFontStyle,
359
+ categoryTextStyle: finalCategoryTextStyle,
360
+ categoryFontWeight: finalCategoryFontWeight,
361
+ categoryFontStyle: finalCategoryFontStyle,
362
+ descriptionTextStyle: finalDescriptionTextStyle,
363
+ descriptionFontWeight: finalDescriptionFontWeight,
364
+ dateTextStyle: finalDateTextStyle,
365
+ dateFontStyle: finalDateFontStyle,
366
+ locationTextStyle: finalLocationTextStyle,
367
+ locationFontStyle: finalLocationFontStyle,
368
+ sponsorTextStyle: finalSponsorTextStyle,
369
+ sponsorFontStyle: finalSponsorFontStyle,
370
+ backgroundFontStyle: finalBackgroundFontStyle
371
+ };
372
+ }, [title, category, description, date, location, sponsor, backgroundTextStyle]);
373
+ const layoutStyle = !isPlaceholder ? getStyleFromBox(cardBoxStyle) : null;
374
+ const {
375
+ borderRadius: layoutBorderRadius = null
376
+ } = layoutStyle || {};
377
+ const withoutCorners = layoutBorderRadius === 0;
378
+ const finalBorderColor = useMemo(() => lineColor !== null ? getColorAsString(lineColor) : titleColor, [lineColor, titleColor]);
413
379
  return /*#__PURE__*/jsxs("div", {
414
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
380
+ className: classNames([styles.container, className, {
381
+ [styles.isPlaceholder]: isPlaceholder
382
+ }]),
415
383
  "data-screen-ready": true,
416
384
  children: [/*#__PURE__*/jsx(Container, {
417
385
  width: width,
@@ -443,7 +411,9 @@ function UrbaniaRecommendation(_ref) {
443
411
  paddingBottom: spacing
444
412
  },
445
413
  className: classNames([styles.headerContainer]),
446
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
414
+ children: /*#__PURE__*/jsx(Header, {
415
+ ...header
416
+ })
447
417
  }, "header") : null, !isPlaceholder ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, visualModalOpened ? /*#__PURE__*/jsx(Button, {
448
418
  className: styles.close,
449
419
  onClick: onCloseModal,
@@ -451,12 +421,23 @@ function UrbaniaRecommendation(_ref) {
451
421
  className: styles.closeIcon
452
422
  })
453
423
  }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/jsxs(Container, {
454
- className: classNames([styles.textCard, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.visualBottom, layout === 'bottom'), styles.appear, backgroundAnimationStarted), styles.modalOpened, visualModalTransitioning || visualModalOpened), styles.hidden, !current && isView && !isPreview)]),
455
- style: _objectSpread(_objectSpread({}, layoutStyle), withoutCorners ? {
456
- borderRadius: 0
457
- } : null),
424
+ className: classNames([styles.textCard, {
425
+ [styles.isPlaceholder]: isPlaceholder,
426
+ [styles.visualBottom]: layout === 'bottom',
427
+ [styles.appear]: backgroundAnimationStarted,
428
+ [styles.modalOpened]: visualModalTransitioning || visualModalOpened,
429
+ [styles.hidden]: !current && isView && !isPreview
430
+ }]),
431
+ style: {
432
+ ...layoutStyle,
433
+ ...(withoutCorners ? {
434
+ borderRadius: 0
435
+ } : null)
436
+ },
458
437
  children: [/*#__PURE__*/jsxs("div", {
459
- className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
438
+ className: classNames([styles.visualContainer, {
439
+ [styles.modalOpened]: visualModalTransitioning || visualModalOpened
440
+ }]),
460
441
  style: layoutBorderRadius !== null ? layout === 'bottom' ? {
461
442
  borderBottomLeftRadius: layoutBorderRadius,
462
443
  borderBottomRightRadius: layoutBorderRadius
@@ -470,41 +451,40 @@ function UrbaniaRecommendation(_ref) {
470
451
  }),
471
452
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
472
453
  id: "JzSBzL",
473
- defaultMessage: [{
474
- "type": 0,
475
- "value": "Visual"
476
- }]
454
+ defaultMessage: "Visual"
477
455
  }),
478
456
  emptyClassName: classNames([styles.empty, styles.emptyVisual]),
479
457
  isEmpty: !hasVisual,
480
458
  children: hasVisual ? /*#__PURE__*/jsx("div", {
481
- className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
459
+ className: classNames([styles.visualWrapper, {
460
+ [styles.modalOpened]: visualModalTransitioning || visualModalOpened
461
+ }]),
482
462
  style: visualModalTransitioning || visualModalOpened ? {
483
- width: width,
484
- height: height
463
+ width,
464
+ height
485
465
  } : {
486
466
  width: textContainerWidth,
487
467
  height: 'auto'
488
468
  },
489
469
  children: /*#__PURE__*/jsxs(Button, {
490
- className: classNames([styles.visualButton, _defineProperty(_defineProperty({}, styles.transitioning, visualModalTransitioning), styles.disabled, withoutZoom)]),
470
+ className: classNames([styles.visualButton, {
471
+ [styles.transitioning]: visualModalTransitioning,
472
+ [styles.disabled]: withoutZoom
473
+ }]),
491
474
  onClick: onClickVisual,
492
475
  disabled: isPreview || backgroundAnimationStarted || visualModalOpened || withoutZoom,
493
476
  focusable: current && !isPreview && !visualModalOpened,
494
477
  "aria-label": intl.formatMessage({
495
478
  id: "XHO5Ua",
496
- defaultMessage: [{
497
- "type": 0,
498
- "value": "Expand visual"
499
- }]
479
+ defaultMessage: "Expand visual"
500
480
  }),
501
481
  "aria-pressed": visualModalOpened,
502
482
  style: {
503
- transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
483
+ transform: visualModalTransitioning ? `scale(${width / textContainerWidth})` : null
504
484
  },
505
485
  children: [isVideo ? /*#__PURE__*/jsx(Visual, {
506
486
  media: image,
507
- mediaRef: mediaRef,
487
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
508
488
  width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
509
489
  ,
510
490
  height: visualModalTransitioning || visualModalOpened ? height : 250,
@@ -523,7 +503,10 @@ function UrbaniaRecommendation(_ref) {
523
503
  active: active,
524
504
  shouldLoad: mediaShouldLoad
525
505
  }), visualModalClosed ? /*#__PURE__*/jsx("div", {
526
- className: classNames([styles.iconContainer, _defineProperty(_defineProperty({}, styles.visualBottom, layout === 'bottom'), styles.hidden, withoutZoom)]),
506
+ className: classNames([styles.iconContainer, {
507
+ [styles.visualBottom]: layout === 'bottom',
508
+ [styles.hidden]: withoutZoom
509
+ }]),
527
510
  children: isVideo ? /*#__PURE__*/jsx(MuteIcon, {
528
511
  color: "#000",
529
512
  className: styles.icon
@@ -538,13 +521,16 @@ function UrbaniaRecommendation(_ref) {
538
521
  placeholder: /*#__PURE__*/jsx(PlaceholderText, {
539
522
  className: styles.sponsorPlaceholder
540
523
  }),
541
- children: hasSponsor ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
542
- className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
543
- }, sponsor), {}, {
544
- textStyle: _objectSpread(_objectSpread({}, sponsorTextStyle), {}, {
524
+ children: hasSponsor ? /*#__PURE__*/jsx(Text, {
525
+ className: classNames([styles.sponsor, {
526
+ [styles.hasVisual]: hasVisual
527
+ }]),
528
+ ...sponsor,
529
+ textStyle: {
530
+ ...sponsorTextStyle,
545
531
  fontStyle: sponsorFontStyle
546
- })
547
- })) : null
532
+ }
533
+ }) : null
548
534
  }, "sponsor")]
549
535
  }), /*#__PURE__*/jsxs("div", {
550
536
  ref: textContainerRef,
@@ -555,10 +541,7 @@ function UrbaniaRecommendation(_ref) {
555
541
  }),
556
542
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
557
543
  id: "I5+AHN",
558
- defaultMessage: [{
559
- "type": 0,
560
- "value": "Category"
561
- }]
544
+ defaultMessage: "Category"
562
545
  }),
563
546
  emptyClassName: styles.emptyCategory,
564
547
  isEmpty: !hasCategory,
@@ -567,38 +550,40 @@ function UrbaniaRecommendation(_ref) {
567
550
  style: {
568
551
  width: textContainerHeight
569
552
  },
570
- children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
571
- className: styles.category
572
- }, category), {}, {
573
- textStyle: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
553
+ children: /*#__PURE__*/jsx(Heading, {
554
+ className: styles.category,
555
+ ...category,
556
+ textStyle: {
557
+ ...categoryTextStyle,
574
558
  fontWeight: categoryFontWeight,
575
559
  fontStyle: categoryFontStyle
576
- })
577
- }))
560
+ }
561
+ })
578
562
  }) : null
579
563
  }, "category"), /*#__PURE__*/jsxs("div", {
580
- className: classNames([styles.textContent, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withoutCategory, !hasCategory)]),
564
+ className: classNames([styles.textContent, {
565
+ [styles.isPlaceholder]: isPlaceholder,
566
+ [styles.withoutCategory]: !hasCategory
567
+ }]),
581
568
  children: [/*#__PURE__*/jsx(ScreenElement, {
582
569
  placeholder: "title",
583
570
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
584
571
  id: "2c1WFV",
585
- defaultMessage: [{
586
- "type": 0,
587
- "value": "Title"
588
- }]
572
+ defaultMessage: "Title"
589
573
  }),
590
574
  emptyClassName: styles.emptyText,
591
575
  isEmpty: !hasTitle,
592
576
  children: hasTitle ? /*#__PURE__*/jsxs("div", {
593
577
  className: styles.titleContainer,
594
- children: [/*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
595
- className: styles.title
596
- }, title), {}, {
597
- textStyle: _objectSpread(_objectSpread({}, titleTextStyle), {}, {
578
+ children: [/*#__PURE__*/jsx(Heading, {
579
+ className: styles.title,
580
+ ...title,
581
+ textStyle: {
582
+ ...titleTextStyle,
598
583
  fontWeight: titleFontWeight,
599
584
  fontStyle: titleFontStyle
600
- })
601
- })), /*#__PURE__*/jsx("hr", {
585
+ }
586
+ }), /*#__PURE__*/jsx("hr", {
602
587
  className: styles.border,
603
588
  style: {
604
589
  borderColor: finalBorderColor
@@ -610,13 +595,14 @@ function UrbaniaRecommendation(_ref) {
610
595
  className: styles.datePlaceholder
611
596
  }),
612
597
  children: hasDate ? /*#__PURE__*/jsxs(Fragment, {
613
- children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
614
- className: styles.date
615
- }, date), {}, {
616
- textStyle: _objectSpread(_objectSpread({}, dateTextStyle), {}, {
598
+ children: [/*#__PURE__*/jsx(Text, {
599
+ className: styles.date,
600
+ ...date,
601
+ textStyle: {
602
+ ...dateTextStyle,
617
603
  fontStyle: dateFontStyle
618
- })
619
- })), /*#__PURE__*/jsx("hr", {
604
+ }
605
+ }), /*#__PURE__*/jsx("hr", {
620
606
  className: styles.border,
621
607
  style: {
622
608
  borderColor: finalBorderColor
@@ -628,13 +614,14 @@ function UrbaniaRecommendation(_ref) {
628
614
  className: styles.locationPlaceholder
629
615
  }),
630
616
  children: hasLocation ? /*#__PURE__*/jsxs(Fragment, {
631
- children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
632
- className: styles.location
633
- }, location), {}, {
634
- textStyle: _objectSpread(_objectSpread({}, locationTextStyle), {}, {
617
+ children: [/*#__PURE__*/jsx(Text, {
618
+ className: styles.location,
619
+ ...location,
620
+ textStyle: {
621
+ ...locationTextStyle,
635
622
  fontStyle: locationFontStyle
636
- })
637
- })), /*#__PURE__*/jsx("hr", {
623
+ }
624
+ }), /*#__PURE__*/jsx("hr", {
638
625
  className: styles.border,
639
626
  style: {
640
627
  borderColor: finalBorderColor
@@ -647,31 +634,33 @@ function UrbaniaRecommendation(_ref) {
647
634
  }),
648
635
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
649
636
  id: "EQdIAR",
650
- defaultMessage: [{
651
- "type": 0,
652
- "value": "Description"
653
- }]
637
+ defaultMessage: "Description"
654
638
  }),
655
639
  emptyClassName: styles.emptyText,
656
640
  isEmpty: !hasDescription,
657
- children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
658
- className: styles.description
659
- }, description), {}, {
660
- textStyle: _objectSpread(_objectSpread({}, descriptionTextStyle), {}, {
641
+ children: hasDescription ? /*#__PURE__*/jsx(Text, {
642
+ className: styles.description,
643
+ ...description,
644
+ textStyle: {
645
+ ...descriptionTextStyle,
661
646
  fontWeight: descriptionFontWeight
662
- })
663
- })) : null
647
+ }
648
+ }) : null
664
649
  }, "description")]
665
650
  })]
666
651
  })]
667
652
  }) : null, !isPlaceholder ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
668
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
653
+ className: classNames([styles.footer, {
654
+ [styles.disabled]: !scrolledBottom && !visualModalOpened
655
+ }]),
669
656
  style: {
670
657
  paddingTop: spacing,
671
658
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
672
659
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
673
660
  },
674
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
661
+ children: /*#__PURE__*/jsx(Footer, {
662
+ ...footerProps
663
+ })
675
664
  }, "footer") : null]
676
665
  })
677
666
  })
@@ -684,24 +673,30 @@ function UrbaniaRecommendation(_ref) {
684
673
  playing: backgroundPlaying && !visualModalOpened,
685
674
  muted: muted || visualModalOpened,
686
675
  shouldLoad: mediaShouldLoad,
687
- mediaRef: mediaRef,
676
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
688
677
  withoutVideo: isPreview,
689
678
  className: styles.background
690
679
  }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/jsx(Container, {
691
680
  width: width,
692
681
  height: height,
693
682
  className: styles.backgroundTextContainer,
694
- children: (finalBackgroundText || []).map(function (line, i) {
695
- return /*#__PURE__*/jsx("div", {
696
- className: classNames([styles.backgroundText], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.hidden, !current && isView && !isPreview), styles.didAnimate, didAnimate), styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0)),
697
- style: _objectSpread({
698
- animationDelay: "".concat(i * 100, "ms")
699
- }, getStyleFromText(_objectSpread(_objectSpread({}, backgroundTextStyle), {}, {
683
+ children: (finalBackgroundText || []).map((line_0, i) => /*#__PURE__*/jsx("div", {
684
+ className: classNames([styles.backgroundText], {
685
+ [styles.hidden]: !current && isView && !isPreview,
686
+ [styles.didAnimate]: didAnimate,
687
+ // @TODO: optimise —> use animation-fill-mode?
688
+ [styles.animateFromBottom]: backgroundAnimationStarted && i % 2 !== 0,
689
+ [styles.animateFromTop]: backgroundAnimationStarted && i % 2 === 0
690
+ }),
691
+ style: {
692
+ animationDelay: `${i * 100}ms`,
693
+ ...getStyleFromText({
694
+ ...backgroundTextStyle,
700
695
  fontStyle: backgroundFontStyle
701
- }))),
702
- children: line
703
- }, "reco-background-text-".concat(i + 1));
704
- })
696
+ })
697
+ },
698
+ children: line_0
699
+ }, `reco-background-text-${i + 1}`))
705
700
  }) : null]
706
701
  }) : null]
707
702
  });
@@ -714,19 +709,13 @@ var definition = [{
714
709
  group: {
715
710
  label: defineMessage({
716
711
  id: "oPjl8f",
717
- defaultMessage: [{
718
- "type": 0,
719
- "value": "Urbania"
720
- }]
712
+ defaultMessage: "Urbania"
721
713
  }),
722
714
  order: 10
723
715
  },
724
716
  title: defineMessage({
725
717
  id: "sUP5BO",
726
- defaultMessage: [{
727
- "type": 0,
728
- "value": "Urbania recommendation"
729
- }]
718
+ defaultMessage: "Urbania recommendation"
730
719
  }),
731
720
  component: UrbaniaRecommendation,
732
721
  layouts: ['top', 'bottom'],
@@ -735,20 +724,14 @@ var definition = [{
735
724
  type: 'screen-layout',
736
725
  label: defineMessage({
737
726
  id: "4iBXj2",
738
- defaultMessage: [{
739
- "type": 0,
740
- "value": "Layout"
741
- }]
727
+ defaultMessage: "Layout"
742
728
  })
743
729
  }, {
744
730
  name: 'sponsor',
745
731
  type: 'text-element',
746
732
  label: defineMessage({
747
733
  id: "WY14Zu",
748
- defaultMessage: [{
749
- "type": 0,
750
- "value": "Sponsor"
751
- }]
734
+ defaultMessage: "Sponsor"
752
735
  })
753
736
  }, {
754
737
  name: 'visual',
@@ -756,20 +739,14 @@ var definition = [{
756
739
  isList: true,
757
740
  label: defineMessage({
758
741
  id: "HwqzVR",
759
- defaultMessage: [{
760
- "type": 0,
761
- "value": "Visual"
762
- }]
742
+ defaultMessage: "Visual"
763
743
  }),
764
744
  fields: [{
765
745
  name: 'image',
766
746
  type: 'visual',
767
747
  label: defineMessage({
768
748
  id: "xT/onn",
769
- defaultMessage: [{
770
- "type": 0,
771
- "value": "Image"
772
- }]
749
+ defaultMessage: "Image"
773
750
  })
774
751
  }]
775
752
  }, {
@@ -777,60 +754,42 @@ var definition = [{
777
754
  type: 'heading-element',
778
755
  label: defineMessage({
779
756
  id: "4grcMU",
780
- defaultMessage: [{
781
- "type": 0,
782
- "value": "Category"
783
- }]
757
+ defaultMessage: "Category"
784
758
  })
785
759
  }, {
786
760
  name: 'title',
787
761
  type: 'heading-element',
788
762
  label: defineMessage({
789
763
  id: "N25iDO",
790
- defaultMessage: [{
791
- "type": 0,
792
- "value": "Title"
793
- }]
764
+ defaultMessage: "Title"
794
765
  })
795
766
  }, {
796
767
  name: 'date',
797
768
  type: 'text-element',
798
769
  label: defineMessage({
799
770
  id: "yEG9zh",
800
- defaultMessage: [{
801
- "type": 0,
802
- "value": "Date"
803
- }]
771
+ defaultMessage: "Date"
804
772
  })
805
773
  }, {
806
774
  name: 'location',
807
775
  type: 'text-element',
808
776
  label: defineMessage({
809
777
  id: "zLxBdl",
810
- defaultMessage: [{
811
- "type": 0,
812
- "value": "Location"
813
- }]
778
+ defaultMessage: "Location"
814
779
  })
815
780
  }, {
816
781
  name: 'description',
817
782
  type: 'text-element',
818
783
  label: defineMessage({
819
784
  id: "Y7bs1v",
820
- defaultMessage: [{
821
- "type": 0,
822
- "value": "Description"
823
- }]
785
+ defaultMessage: "Description"
824
786
  })
825
787
  }, {
826
788
  name: 'background',
827
789
  type: 'background-recommendation',
828
790
  label: defineMessage({
829
791
  id: "+MPZRu",
830
- defaultMessage: [{
831
- "type": 0,
832
- "value": "Background"
833
- }]
792
+ defaultMessage: "Background"
834
793
  })
835
794
  }, {
836
795
  id: 'recommendation',
@@ -838,30 +797,21 @@ var definition = [{
838
797
  isList: true,
839
798
  label: defineMessage({
840
799
  id: "hPXJzA",
841
- defaultMessage: [{
842
- "type": 0,
843
- "value": "Box params"
844
- }]
800
+ defaultMessage: "Box params"
845
801
  }),
846
802
  fields: [{
847
803
  name: 'cardBoxStyle',
848
804
  type: 'box-style-form',
849
805
  label: defineMessage({
850
806
  id: "1yNxAl",
851
- defaultMessage: [{
852
- "type": 0,
853
- "value": "Card box style"
854
- }]
807
+ defaultMessage: "Card box style"
855
808
  })
856
809
  }, {
857
810
  name: 'lineColor',
858
811
  type: 'color',
859
812
  label: defineMessage({
860
813
  id: "Jti6I6",
861
- defaultMessage: [{
862
- "type": 0,
863
- "value": "Lines color"
864
- }]
814
+ defaultMessage: "Lines color"
865
815
  })
866
816
  }, {
867
817
  name: 'withoutZoom',
@@ -869,10 +819,7 @@ var definition = [{
869
819
  defaultValue: false,
870
820
  label: defineMessage({
871
821
  id: "ehuj8A",
872
- defaultMessage: [{
873
- "type": 0,
874
- "value": "Without image zoom"
875
- }]
822
+ defaultMessage: "Without image zoom"
876
823
  })
877
824
  }]
878
825
  }, {
@@ -880,10 +827,7 @@ var definition = [{
880
827
  type: 'header',
881
828
  label: defineMessage({
882
829
  id: "rhuDxI",
883
- defaultMessage: [{
884
- "type": 0,
885
- "value": "Header"
886
- }]
830
+ defaultMessage: "Header"
887
831
  }),
888
832
  theme: {
889
833
  badge: {
@@ -898,10 +842,7 @@ var definition = [{
898
842
  type: 'footer',
899
843
  label: defineMessage({
900
844
  id: "g4nybp",
901
- defaultMessage: [{
902
- "type": 0,
903
- "value": "Footer"
904
- }]
845
+ defaultMessage: "Footer"
905
846
  }),
906
847
  theme: {
907
848
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
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,27 +53,27 @@
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-button": "^0.4.70",
67
- "@micromag/element-container": "^0.4.69",
68
- "@micromag/element-footer": "^0.4.70",
69
- "@micromag/element-header": "^0.4.69",
70
- "@micromag/element-heading": "^0.4.69",
71
- "@micromag/element-layout": "^0.4.69",
72
- "@micromag/element-scroll": "^0.4.69",
73
- "@micromag/element-text": "^0.4.69",
74
- "@micromag/element-visual": "^0.4.70",
75
- "@micromag/transforms": "^0.4.69",
65
+ "@micromag/core": "^0.4.74",
66
+ "@micromag/element-background": "^0.4.74",
67
+ "@micromag/element-button": "^0.4.74",
68
+ "@micromag/element-container": "^0.4.74",
69
+ "@micromag/element-footer": "^0.4.74",
70
+ "@micromag/element-header": "^0.4.74",
71
+ "@micromag/element-heading": "^0.4.74",
72
+ "@micromag/element-layout": "^0.4.74",
73
+ "@micromag/element-scroll": "^0.4.74",
74
+ "@micromag/element-text": "^0.4.74",
75
+ "@micromag/element-visual": "^0.4.74",
76
+ "@micromag/transforms": "^0.4.74",
76
77
  "classnames": "^2.2.6",
77
78
  "lodash": "^4.17.23",
78
79
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -82,6 +83,6 @@
82
83
  "access": "public",
83
84
  "registry": "https://registry.npmjs.org/"
84
85
  },
85
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
86
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
86
87
  "types": "es/index.d.ts"
87
88
  }