@micromag/screen-urbania-trivia 0.4.71 → 0.4.74

package/es/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HeadingElement, VideoElement, BackgroundElement } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { HeadingElement, VideoElement, BackgroundElement, MediaElement } from '@micromag/core';
 
 interface UrbaniaTriviaProps {
     layout?: 'middle' | 'full';
@@ -11,7 +12,7 @@ interface UrbaniaTriviaProps {
     preload?: boolean;
     spacing?: number;
     padding?: number;
-    mediaRef?: ForwardedRef<HTMLMediaElement> | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
 declare function UrbaniaTrivia({ layout, title, video, gotoNextScreenOnEnd, background, current, preload, spacing, padding, mediaRef: customMediaRef, className, }: UrbaniaTriviaProps): react_jsx_runtime.JSX.Element;

package/es/index.js

@@ -1,14 +1,11 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
 import isArray from 'lodash/isArray';
 import { useEffect, useState, useCallback, useMemo } from 'react';
 import { ScreenElement, Empty, PlaceholderTitle, PlaceholderVideo } from '@micromag/core/components';
-import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerNavigation, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
-import { useTrackScreenMedia, useActivityDetector, useDimensionObserver } from '@micromag/core/hooks';
+import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerNavigation, usePlaybackContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
+import { useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
 import { isTextFilled } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import ClosedCaptions from '@micromag/element-closed-captions';
@@ -18,13 +15,13 @@ import Image from '@micromag/element-image';
 import Video from '@micromag/element-video';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var styles = {"container":"micromag-screen-urbania-trivia-container","background":"micromag-screen-urbania-trivia-background","content":"micromag-screen-urbania-trivia-content","emptyContainer":"micromag-screen-urbania-trivia-emptyContainer","empty":"micromag-screen-urbania-trivia-empty","itemsContainer":"micromag-screen-urbania-trivia-itemsContainer","videoContainer":"micromag-screen-urbania-trivia-videoContainer","video":"micromag-screen-urbania-trivia-video","isCustomBackground":"micromag-screen-urbania-trivia-isCustomBackground","isAnimated":"micromag-screen-urbania-trivia-isAnimated","heading":"micromag-screen-urbania-trivia-heading","placeholder":"micromag-screen-urbania-trivia-placeholder","videoPlaceholder":"micromag-screen-urbania-trivia-videoPlaceholder","bottomContent":"micromag-screen-urbania-trivia-bottomContent","fullscreen":"micromag-screen-urbania-trivia-fullscreen","image":"micromag-screen-urbania-trivia-image"};
+
 var AnimeLinesGrey = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201083.95%201920%22%3E%20%20%20%20%3Cg%20id%3D%22a%22%2F%3E%20%20%20%20%3Cg%20id%3D%22b%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22c%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1083.95%2C0h-103.4l-438.55%2C959.95L1083.95%2C109.31V0Zm0%2C295L542.02%2C959.96l541.93-498.87v-166.08Zm0%2C274.99l-541.92%2C389.98%2C541.92-279.64v-110.34Zm0%2C190.53l-541.92%2C199.46%2C541.92-110.89v-88.57Zm0%2C158.17l-541.92%2C41.31%2C541.92%2C41.31v-82.61Zm0%2C152.21l-541.92-110.89%2C541.92%2C199.46v-88.58Zm0%2C168.77l-541.92-279.64%2C541.92%2C389.98v-110.34Zm0%2C219.25l-541.93-498.87%2C541.93%2C664.95v-166.08Zm0%2C351.77L542%2C960.05l438.55%2C959.95h103.4v-109.31ZM854.8%2C0h-138.91l-173.9%2C959.94L854.8%2C0Zm0%2C1920l-312.81-959.94%2C173.9%2C959.94h138.91ZM606.75%2C0h-129.56l64.78%2C959.94L606.75%2C0Zm0%2C1920l-64.78-959.94-64.78%2C959.94h129.56Zm-64.79-960.06L368.06%2C0H229.15l312.81%2C959.94Zm0%2C.12L229.15%2C1920h138.91l173.9-959.94Zm-.01-.11L103.4%2C0H0V109.31L541.94%2C959.95Zm0%2C.11L0%2C1810.69v109.31H103.4l438.55-959.95Zm-.01-.1L0%2C295.01v166.08l541.93%2C498.87Zm0%2C.09L0%2C1458.91v166.08L541.93%2C960.04Zm-.01-.07L0%2C570v110.34l541.92%2C279.63Zm0%2C.02L0%2C760.52v88.57l541.92%2C110.89Zm0%2C.02L0%2C918.69v82.61l541.92-41.31Zm0%2C.02L0%2C1070.9v88.57l541.92-199.46Zm0%2C.02L0%2C1239.66v110.34l541.92-389.97Z%22%20fill%3D%22hsla%280%2C0%25%2C100%25%2C.6%29%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
 
 var AnimeLines = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201083.95%201920%22%3E%20%20%20%20%3Cg%20id%3D%22a%22%2F%3E%20%20%20%20%3Cg%20id%3D%22b%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22c%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1083.95%2C0h-103.4l-438.55%2C959.95L1083.95%2C109.31V0Zm0%2C295L542.02%2C959.96l541.93-498.87v-166.08Zm0%2C274.99l-541.92%2C389.98%2C541.92-279.64v-110.34Zm0%2C190.53l-541.92%2C199.46%2C541.92-110.89v-88.57Zm0%2C158.17l-541.92%2C41.31%2C541.92%2C41.31v-82.61Zm0%2C152.21l-541.92-110.89%2C541.92%2C199.46v-88.58Zm0%2C168.77l-541.92-279.64%2C541.92%2C389.98v-110.34Zm0%2C219.25l-541.93-498.87%2C541.93%2C664.95v-166.08Zm0%2C351.77L542%2C960.05l438.55%2C959.95h103.4v-109.31ZM854.8%2C0h-138.91l-173.9%2C959.94L854.8%2C0Zm0%2C1920l-312.81-959.94%2C173.9%2C959.94h138.91ZM606.75%2C0h-129.56l64.78%2C959.94L606.75%2C0Zm0%2C1920l-64.78-959.94-64.78%2C959.94h129.56Zm-64.79-960.06L368.06%2C0H229.15l312.81%2C959.94Zm0%2C.12L229.15%2C1920h138.91l173.9-959.94Zm-.01-.11L103.4%2C0H0V109.31L541.94%2C959.95Zm0%2C.11L0%2C1810.69v109.31H103.4l438.55-959.95Zm-.01-.1L0%2C295.01v166.08l541.93%2C498.87Zm0%2C.09L0%2C1458.91v166.08L541.93%2C960.04Zm-.01-.07L0%2C570v110.34l541.92%2C279.63Zm0%2C.02L0%2C760.52v88.57l541.92%2C110.89Zm0%2C.02L0%2C918.69v82.61l541.92-41.31Zm0%2C.02L0%2C1070.9v88.57l541.92-199.46Zm0%2C.02L0%2C1239.66v110.34l541.92-389.97Z%22%20fill%3D%22%2312bbd7%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
 
-var styles = {"container":"micromag-screen-urbania-trivia-container","background":"micromag-screen-urbania-trivia-background","content":"micromag-screen-urbania-trivia-content","emptyContainer":"micromag-screen-urbania-trivia-emptyContainer","empty":"micromag-screen-urbania-trivia-empty","itemsContainer":"micromag-screen-urbania-trivia-itemsContainer","videoContainer":"micromag-screen-urbania-trivia-videoContainer","video":"micromag-screen-urbania-trivia-video","isCustomBackground":"micromag-screen-urbania-trivia-isCustomBackground","isAnimated":"micromag-screen-urbania-trivia-isAnimated","heading":"micromag-screen-urbania-trivia-heading","placeholder":"micromag-screen-urbania-trivia-placeholder","videoPlaceholder":"micromag-screen-urbania-trivia-videoPlaceholder","bottomContent":"micromag-screen-urbania-trivia-bottomContent","fullscreen":"micromag-screen-urbania-trivia-fullscreen","image":"micromag-screen-urbania-trivia-image"};
-
-var defaultBackground = {
+const defaultBackground = {
   image: {
     type: 'image',
     url: AnimeLines,
@@ -33,7 +30,7 @@ var defaultBackground = {
   },
   color: '#00cbff'
 };
-var placeholderBackground = {
+const placeholderBackground = {
   image: {
     type: 'image',
     url: AnimeLinesGrey,
@@ -42,83 +39,72 @@ var placeholderBackground = {
   },
   color: null
 };
-function UrbaniaTrivia(_ref) {
-  var _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'full' : _ref$layout,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$video = _ref.video,
-    video = _ref$video === void 0 ? null : _ref$video,
-    _ref$gotoNextScreenOn = _ref.gotoNextScreenOnEnd,
-    gotoNextScreenOnEnd = _ref$gotoNextScreenOn === void 0 ? false : _ref$gotoNextScreenOn,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 20 : _ref$padding,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var trackScreenMedia = useTrackScreenMedia('video');
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useViewerContext = useViewerContext(),
-    viewerBottomHeight = _useViewerContext.bottomHeight;
-  var _useViewerNavigation = useViewerNavigation(),
-    gotoNextScreen = _useViewerNavigation.gotoNextScreen;
-  var hasTitle = isTextFilled(title);
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || preload;
-  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
+function UrbaniaTrivia({
+  layout = 'full',
+  title = null,
+  video = null,
+  gotoNextScreenOnEnd = false,
+  background = null,
+  current = true,
+  preload = true,
+  spacing = 20,
+  padding = 20,
+  mediaRef: customMediaRef = null,
+  className = null
+}) {
+  const trackScreenMedia = useTrackScreenMedia('video');
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    bottomHeight: viewerBottomHeight
+  } = useViewerContext();
+  const {
+    gotoNextScreen
+  } = useViewerNavigation();
+  const hasTitle = isTextFilled(title);
+  const backgroundPlaying = current && (isView || isEdit);
+  const mediaShouldLoad = current || preload;
+  const shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
 
   // get resized video style props
-  var _ref2 = video || {},
-    _ref2$autoPlay = _ref2.autoPlay,
-    autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
-    _ref2$media = _ref2.media,
-    videoMedia = _ref2$media === void 0 ? null : _ref2$media,
-    _ref2$closedCaptions = _ref2.closedCaptions,
-    closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
-    _ref2$withSeekBar = _ref2.withSeekBar,
-    withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
-    _ref2$withControls = _ref2.withControls,
-    withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? null : _ref2$color,
-    _ref2$progressColor = _ref2.progressColor,
-    progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
-  var _usePlaybackContext = usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    muted = _usePlaybackContext.muted,
-    setControls = _usePlaybackContext.setControls,
-    setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setPlaying = _usePlaybackContext.setPlaying,
-    showControls = _usePlaybackContext.showControls,
-    hideControls = _usePlaybackContext.hideControls,
-    currentQualityLevel = _usePlaybackContext.currentQualityLevel,
-    setCurrentQualityLevel = _usePlaybackContext.setCurrentQualityLevel;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  useEffect(function () {
+  const {
+    autoPlay = true,
+    media: videoMedia = null,
+    closedCaptions = null,
+    withSeekBar = false,
+    withControls = false,
+    color = null,
+    progressColor = null
+  } = video || {};
+  const {
+    playing,
+    muted,
+    setControls,
+    setControlsTheme,
+    setPlaying,
+    showControls,
+    hideControls,
+    currentQualityLevel,
+    setCurrentQualityLevel
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: isCurrentMedia = false
+  } = usePlaybackMediaRef(current);
+  useEffect(() => {
     if (!current) {
-      return function () {};
+      return () => {};
     }
     if (withControls || withSeekBar) {
       setControls(true);
@@ -128,55 +114,51 @@ function UrbaniaTrivia(_ref) {
     } else {
       setControls(false);
     }
-    return function () {
+    return () => {
       if (withControls || withSeekBar) {
         setControls(false);
       }
     };
   }, [current, withControls, setControls, withSeekBar, color, progressColor]);
-  useEffect(function () {
+  useEffect(() => {
     if (customMediaRef !== null) {
       customMediaRef(mediaRef.current);
     }
   }, [mediaRef.current]);
 
   // Get api state updates from callback
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentTime = _useState2[0],
-    setCurrentTime = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    duration = _useState4[0],
-    setDuration = _useState4[1];
-  useEffect(function () {
+  const [currentTime, setCurrentTime] = useState(null);
+  const [duration, setDuration] = useState(null);
+  useEffect(() => {
     if (current && autoPlay && !playing) {
       setPlaying(true);
     }
   }, [current, autoPlay]);
-  var onTimeUpdate = useCallback(function (time) {
+  const onTimeUpdate = useCallback(time => {
     setCurrentTime(time);
   }, [setDuration, duration]);
-  var onProgressStep = useCallback(function (step, meta) {
-    trackScreenMedia(videoMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
+  const onProgressStep = useCallback((step, meta) => {
+    trackScreenMedia(videoMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
   }, [trackScreenMedia, videoMedia]);
-  var onDurationChange = useCallback(function (dur) {
+  const onDurationChange = useCallback(dur => {
     setDuration(dur);
   }, [setDuration]);
-  var onPlay = useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  const onPlay = useCallback(({
+    initial
+  }) => {
     trackScreenMedia(videoMedia, initial ? 'play' : 'resume');
   }, [trackScreenMedia, videoMedia]);
-  var onPause = useCallback(function (_ref4) {
-    var midway = _ref4.midway;
+  const onPause = useCallback(({
+    midway
+  }) => {
     trackScreenMedia(videoMedia, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, videoMedia]);
-  var onSeeked = useCallback(function (time) {
-    if (time > 0) {
+  const onSeeked = useCallback(time_0 => {
+    if (time_0 > 0) {
       trackScreenMedia(videoMedia, 'seek');
     }
   }, [trackScreenMedia, videoMedia]);
-  var onEnded = useCallback(function () {
+  const onEnded = useCallback(() => {
     if (current && shouldGotoNextScreenOnEnd) {
       gotoNextScreen();
     }
@@ -184,14 +166,8 @@ function UrbaniaTrivia(_ref) {
       setPlaying(false);
     }
   }, [current, shouldGotoNextScreenOnEnd, gotoNextScreen, setPlaying]);
-  var viewerContainer = useViewerContainer();
-  var _useActivityDetector = useActivityDetector({
-      element: viewerContainer,
-      disabled: !current || !isView,
-      timeout: 2000
-    }),
-    activityDetected = _useActivityDetector.detected;
-  useEffect(function () {
+  const activityDetected = useViewerActivityDetected();
+  useEffect(() => {
     if (!current) {
       return;
     }
@@ -201,83 +177,82 @@ function UrbaniaTrivia(_ref) {
       hideControls();
     }
   }, [activityDetected, showControls, hideControls]);
-  var fullscreen = layout === 'full';
-  var _ref5 = background || {},
-    _ref5$image = _ref5.image,
-    backgroundImage = _ref5$image === void 0 ? null : _ref5$image,
-    _ref5$video = _ref5.video,
-    backgroundVideo = _ref5$video === void 0 ? null : _ref5$video;
-  var isCustomBackground = background === null || backgroundImage === null && backgroundVideo === null;
-  var isAnimatedBackground = !isStatic && !isPreview && isCustomBackground;
-  var hasVideo = video !== null;
-  var _useState5 = useState(hasVideo),
-    _useState6 = _slicedToArray(_useState5, 2),
-    ready = _useState6[0],
-    setReady = _useState6[1];
-  var finalVideo = useMemo(function () {
-    return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
-      autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
-    }) : null;
-  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
-  var _ref6 = videoMedia || {},
-    _ref6$metadata = _ref6.metadata,
-    videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
-    _ref6$url = _ref6.url,
-    videoUrl = _ref6$url === void 0 ? null : _ref6$url,
-    _ref6$thumbnail_url = _ref6.thumbnail_url,
-    thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
-  var hasVideoUrl = videoUrl !== null;
-  var _ref7 = videoMetadata || {},
-    _ref7$width = _ref7.width,
-    videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
-    _ref7$height = _ref7.height,
-    videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
-  var _useDimensionObserver = useDimensionObserver(),
-    titleRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    titleHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var videoMaxHeight = height - titleHeight - (padding ? padding * 2 : 40);
-  var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, videoMaxHeight, {
-      cover: fullscreen
-    }),
-    resizedVideoWidth = _getSizeWithinBounds.width,
-    resizedVideoHeight = _getSizeWithinBounds.height;
-  var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
+  const fullscreen = layout === 'full';
+  const {
+    image: backgroundImage = null,
+    video: backgroundVideo = null
+  } = background || {};
+  const isCustomBackground = background === null || backgroundImage === null && backgroundVideo === null;
+  const isAnimatedBackground = !isStatic && !isPreview && isCustomBackground;
+  const hasVideo = video !== null;
+  const [ready, setReady] = useState(hasVideo);
+  const finalVideo = useMemo(() => hasVideo ? {
+    ...video,
+    autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
+  } : null, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
+  const {
+    metadata: videoMetadata = null,
+    url: videoUrl = null,
+    thumbnail_url: thumbnailUrl = null
+  } = videoMedia || {};
+  const hasVideoUrl = videoUrl !== null;
+  const {
+    width: videoWidth = 0,
+    height: videoHeight = 0
+  } = videoMetadata || {};
+  const {
+    ref: titleRef,
+    height: titleHeight = 0
+  } = useDimensionObserver();
+  const videoMaxHeight = height - titleHeight - (padding ? padding * 2 : 40);
+  const {
+    width: resizedVideoWidth,
+    height: resizedVideoHeight
+  } = getSizeWithinBounds(videoWidth, videoHeight, width, videoMaxHeight, {
+    cover: fullscreen
+  });
+  const resizedVideoLeft = -(resizedVideoWidth - width) / 2;
   // const resizedVideoTop = -(resizedVideoHeight - videoMaxHeight) / 2;
 
-  var verticalVideo = resizedVideoHeight > resizedVideoWidth;
-  var finalBackground = useMemo(function () {
+  const verticalVideo = resizedVideoHeight > resizedVideoWidth;
+  const finalBackground = useMemo(() => {
     if (isArray(background) && background.length > 0) {
       return background;
     }
-    var _ref8 = background || {},
-      _ref8$image = _ref8.image,
-      bgImage = _ref8$image === void 0 ? null : _ref8$image,
-      _ref8$video = _ref8.video,
-      bgVideo = _ref8$video === void 0 ? null : _ref8$video,
-      _ref8$color = _ref8.color,
-      bgColor = _ref8$color === void 0 ? null : _ref8$color;
+    const {
+      image: bgImage = null,
+      video: bgVideo = null,
+      color: bgColor = null
+    } = background || {};
     if (bgImage !== null || bgVideo !== null) {
-      return _objectSpread(_objectSpread({}, defaultBackground), background);
+      return {
+        ...defaultBackground,
+        ...background
+      };
     }
-    return _objectSpread(_objectSpread({}, defaultBackground), bgColor !== null ? {
-      color: bgColor
-    } : null);
+    return {
+      ...defaultBackground,
+      ...(bgColor !== null ? {
+        color: bgColor
+      } : null)
+    };
   }, [background]);
-  var placeholderProps = fullscreen ? {
+  const placeholderProps = fullscreen ? {
     width: '100%',
     height: '100%'
   } : {
     width: '100%'
   };
-  useEffect(function () {
+  useEffect(() => {
     setReady(!hasVideoUrl);
   }, [videoUrl, hasVideoUrl, setReady]);
-  var onVideoReady = useCallback(function () {
+  const onVideoReady = useCallback(() => {
     setReady(true);
   }, [setReady]);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)]),
+    className: classNames([styles.container, className, {
+      [styles.fullscreen]: fullscreen
+    }]),
     "data-screen-ready": isStatic || isCapture || ready,
     children: [/*#__PURE__*/jsx(Container, {
       width: width,
@@ -296,45 +271,43 @@ function UrbaniaTrivia(_ref) {
           },
           children: [/*#__PURE__*/jsx(ScreenElement, {
             className: styles.headingScreenElement,
-            placeholder: /*#__PURE__*/jsx(PlaceholderTitle, _objectSpread({
-              className: styles.placeholder
-            }, placeholderProps)),
+            placeholder: /*#__PURE__*/jsx(PlaceholderTitle, {
+              className: styles.placeholder,
+              ...placeholderProps
+            }),
             empty: /*#__PURE__*/jsx("div", {
               className: styles.emptyContainer,
               children: /*#__PURE__*/jsx(Empty, {
                 className: styles.empty,
                 children: /*#__PURE__*/jsx(FormattedMessage, {
                   id: "oAtOlP",
-                  defaultMessage: [{
-                    "type": 0,
-                    "value": "Heading"
-                  }]
+                  defaultMessage: "Heading"
                 })
               })
             }),
             isEmpty: !hasTitle,
             children: hasTitle ? /*#__PURE__*/jsx("div", {
               ref: titleRef,
-              children: /*#__PURE__*/jsx(Heading, _objectSpread({
+              children: /*#__PURE__*/jsx(Heading, {
                 className: styles.heading
                 // body={body}
-              }, title))
+                ,
+                ...title
+              })
             }) : null
           }, "heading"), /*#__PURE__*/jsx(ScreenElement, {
             className: styles.videoScreenElement,
-            placeholder: /*#__PURE__*/jsx(PlaceholderVideo, _objectSpread({
-              className: styles.videoPlaceholder
-            }, placeholderProps)),
+            placeholder: /*#__PURE__*/jsx(PlaceholderVideo, {
+              className: styles.videoPlaceholder,
+              ...placeholderProps
+            }),
             empty: /*#__PURE__*/jsx("div", {
               className: styles.emptyContainer,
               children: /*#__PURE__*/jsx(Empty, {
                 className: styles.empty,
                 children: /*#__PURE__*/jsx(FormattedMessage, {
                   id: "3ext9Q",
-                  defaultMessage: [{
-                    "type": 0,
-                    "value": "Video"
-                  }]
+                  defaultMessage: "Video"
                 })
               })
             }),
@@ -359,7 +332,8 @@ function UrbaniaTrivia(_ref) {
                 width: Math.min(width, resizedVideoWidth),
                 height: resizedVideoHeight,
                 resolution: resolution
-              }) : /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
+              }) : /*#__PURE__*/jsx(Video, {
+                ...finalVideo,
                 mediaRef: mediaRef,
                 paused: !current || !playing || !isCurrentMedia && isView,
                 muted: muted,
@@ -378,10 +352,10 @@ function UrbaniaTrivia(_ref) {
                 shouldLoad: mediaShouldLoad,
                 qualityStartLevel: currentQualityLevel,
                 onQualityLevelChange: setCurrentQualityLevel
-              })), current && !isPlaceholder ? /*#__PURE__*/jsx("div", {
+              }), current && !isPlaceholder ? /*#__PURE__*/jsx("div", {
                 className: styles.bottomContent,
                 style: {
-                  transform: "translate(0, -".concat(viewerBottomHeight, "px)")
+                  transform: `translate(0, -${viewerBottomHeight}px)`
                 },
                 children: closedCaptions !== null && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, {
                   className: styles.closedCaptions,
@@ -395,7 +369,10 @@ function UrbaniaTrivia(_ref) {
       })
     }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: finalBackground,
-      className: classNames([styles.background, className, _defineProperty(_defineProperty({}, styles.isCustomBackground, isCustomBackground), styles.isAnimated, isAnimatedBackground)]),
+      className: classNames([styles.background, className, {
+        [styles.isCustomBackground]: isCustomBackground,
+        [styles.isAnimated]: isAnimatedBackground
+      }]),
       width: width,
       height: height,
       resolution: resolution,
@@ -420,19 +397,13 @@ var definition = {
   group: {
     label: defineMessage({
       id: "oPjl8f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Urbania"
-      }]
+      defaultMessage: "Urbania"
     }),
     order: 10
   },
   title: defineMessage({
     id: "zDdDqI",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Urbania trivia"
-    }]
+    defaultMessage: "Urbania trivia"
   }),
   component: UrbaniaTrivia,
   fields: [{
@@ -440,10 +411,7 @@ var definition = {
     type: 'heading-element',
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'video',
@@ -453,10 +421,7 @@ var definition = {
     },
     label: defineMessage({
       id: "tvl2Zc",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
+      defaultMessage: "Video"
     })
   }, {
     name: 'gotoNextScreenOnEnd',
@@ -464,20 +429,14 @@ var definition = {
     defaultValue: false,
     label: defineMessage({
       id: "n8zmLY",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen on end"
-      }]
+      defaultMessage: "Go to next screen on end"
     })
   }, {
     name: 'background',
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-trivia",
-    "version": "0.4.71",
+    "version": "0.4.74",
     "private": false,
     "description": "",
     "keywords": [
@@ -36,6 +36,7 @@
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -53,25 +54,25 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-background": "^0.4.71",
-        "@micromag/element-call-to-action": "^0.4.71",
-        "@micromag/element-closed-captions": "^0.4.71",
-        "@micromag/element-container": "^0.4.71",
-        "@micromag/element-heading": "^0.4.71",
-        "@micromag/element-image": "^0.4.71",
-        "@micromag/element-video": "^0.4.71",
-        "@micromag/transforms": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-background": "^0.4.74",
+        "@micromag/element-call-to-action": "^0.4.74",
+        "@micromag/element-closed-captions": "^0.4.74",
+        "@micromag/element-container": "^0.4.74",
+        "@micromag/element-heading": "^0.4.74",
+        "@micromag/element-image": "^0.4.74",
+        "@micromag/element-video": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +82,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }