@micromag/screen-video 0.4.70 → 0.4.74

package/es/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { VideoElement, Header, Footer, BackgroundElement } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { VideoElement, Header, Footer, BackgroundElement, MediaElement } from '@micromag/core';
 
 interface VideoScreenProps {
     layout?: 'middle' | 'full';
@@ -12,7 +13,7 @@ interface VideoScreenProps {
     active?: boolean;
     preload?: boolean;
     spacing?: number;
-    mediaRef?: ((...args: unknown[]) => void) | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
 declare function VideoScreen({ layout, video, gotoNextScreenOnEnd, header, footer, background, current, active: _active, preload, spacing, mediaRef: customMediaRef, className, }: VideoScreenProps): react_jsx_runtime.JSX.Element;

package/es/index.js

@@ -1,14 +1,12 @@
 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 { c } from 'react/compiler-runtime';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { ScreenElement, Empty, PlaceholderVideo } from '@micromag/core/components';
-import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
-import { useTrackScreenMedia, useActivityDetector, useDebounce, useMediaThumbnail } from '@micromag/core/hooks';
-import { isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
+import { useState, useEffect } from 'react';
+import { PlaceholderVideo, Empty, ScreenElement } from '@micromag/core/components';
+import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
+import { useTrackScreenMedia, useDebounce } from '@micromag/core/hooks';
+import { isHeaderFilled, isFooterFilled, getFooterProps, getMediaThumbnail, mergeRefs } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import ClosedCaptions from '@micromag/element-closed-captions';
 import Container from '@micromag/element-container';
@@ -16,358 +14,554 @@ import Footer from '@micromag/element-footer';
 import Header from '@micromag/element-header';
 import Image from '@micromag/element-image';
 import Video from '@micromag/element-video';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-screen-video-container","content":"micromag-screen-video-content","emptyContainer":"micromag-screen-video-emptyContainer","empty":"micromag-screen-video-empty","inner":"micromag-screen-video-inner","header":"micromag-screen-video-header","bottom":"micromag-screen-video-bottom","placeholder":"micromag-screen-video-placeholder","videoContainer":"micromag-screen-video-videoContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","video":"micromag-screen-video-video"};
 
-function VideoScreen(_ref) {
-  var _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
-    _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$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _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.active;
-    var _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$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 _useViewerNavigation = useViewerNavigation(),
-    gotoNextScreen = _useViewerNavigation.gotoNextScreen;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var mediaShouldLoad = current || preload;
-  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
-  var _ref2 = video || {},
-    _ref2$autoPlay = _ref2.autoPlay,
-    autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
-    _ref2$loop = _ref2.loop,
-    loop = _ref2$loop === void 0 ? false : _ref2$loop,
-    _ref2$media = _ref2.media,
-    videoMedia = _ref2$media === void 0 ? null : _ref2$media,
-    _ref2$thumbnail = _ref2.thumbnail,
-    thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
-    _ref2$captions = _ref2.captions,
-    captions = _ref2$captions === void 0 ? null : _ref2$captions,
-    _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,
-    setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
-    setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setPlaying = _usePlaybackContext.setPlaying,
-    controlsVisible = _usePlaybackContext.controlsVisible,
-    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$;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasPlayed = _useState2[0],
-    setHasPlayed = _useState2[1];
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
-  var shouldDisplayPoster = isPreview || isCapture;
-  useEffect(function () {
+function VideoScreen(t0) {
+  const $ = c(112);
+  const {
+    layout: t1,
+    video: t2,
+    gotoNextScreenOnEnd: t3,
+    header: t4,
+    footer: t5,
+    background: t6,
+    current: t7,
+    active: t8,
+    preload: t9,
+    spacing: t10,
+    mediaRef: t11,
+    className: t12
+  } = t0;
+  const layout = t1 === undefined ? "middle" : t1;
+  const video = t2 === undefined ? null : t2;
+  const gotoNextScreenOnEnd = t3 === undefined ? false : t3;
+  const header = t4 === undefined ? null : t4;
+  const footer = t5 === undefined ? null : t5;
+  const background = t6 === undefined ? null : t6;
+  const current = t7 === undefined ? true : t7;
+  const preload = t9 === undefined ? true : t9;
+  const spacing = t10 === undefined ? 20 : t10;
+  const customMediaRef = t11 === undefined ? null : t11;
+  const className = t12 === undefined ? null : t12;
+  const trackScreenMedia = useTrackScreenMedia("video");
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    gotoNextScreen
+  } = useViewerNavigation();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const mediaShouldLoad = current || preload;
+  const shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
+  const {
+    autoPlay: t13,
+    loop: t14,
+    media: t15,
+    thumbnail: t16,
+    captions: t17,
+    closedCaptions: t18,
+    withSeekBar: t19,
+    withControls: t20,
+    color: t21,
+    progressColor: t22
+  } = video || {};
+  const autoPlay = t13 === undefined ? true : t13;
+  const loop = t14 === undefined ? false : t14;
+  const videoMedia = t15 === undefined ? null : t15;
+  const thumbnail = t16 === undefined ? null : t16;
+  const captions = t17 === undefined ? null : t17;
+  const closedCaptions = t18 === undefined ? null : t18;
+  const withSeekBar = t19 === undefined ? false : t19;
+  const withControls = t20 === undefined ? false : t20;
+  const color = t21 === undefined ? null : t21;
+  const progressColor = t22 === undefined ? null : t22;
+  const {
+    playing,
+    muted,
+    setControls,
+    setControlsSuggestPlay,
+    setControlsTheme,
+    setPlaying,
+    controlsVisible,
+    showControls,
+    hideControls,
+    currentQualityLevel,
+    setCurrentQualityLevel
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: t23
+  } = usePlaybackMediaRef(current);
+  const isCurrentMedia = t23 === undefined ? false : t23;
+  const [hasPlayed, setHasPlayed] = useState(false);
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
+  const shouldDisplayPoster = isPreview || isCapture;
+  useEffect(() => {
     if (!current) {
-      return function () {};
+      return _temp;
     }
     setControlsTheme({
       seekBarOnly: withSeekBar && !withControls,
-      color: color,
-      progressColor: progressColor
+      color,
+      progressColor
     });
     if (withControls || withSeekBar) {
       setControls(true);
     } else {
       setControls(false);
     }
-    return function () {
+    return () => {
       if (withControls || withSeekBar) {
         setControls(false);
       }
     };
   }, [current, withControls, setControls, withSeekBar, color, progressColor]);
-  useEffect(function () {
-    if (customMediaRef !== null) {
-      customMediaRef(mediaRef.current);
-    }
-  }, [mediaRef.current]);
-  useEffect(function () {
+  useEffect(() => {
     if (current && autoPlay) {
       setPlaying(true);
     }
   }, [current, autoPlay]);
-  var viewerContainer = useViewerContainer();
-  var _useActivityDetector = useActivityDetector({
-      element: viewerContainer,
-      disabled: !isView,
-      timeout: 2000
-    }),
-    activityDetected = _useActivityDetector.detected;
-  var toggleControlsVisibility = useCallback(function () {
-    if (activityDetected) {
-      showControls();
-    } else {
-      hideControls();
-    }
-  }, [activityDetected, showControls, hideControls]);
+  const activityDetected = useViewerActivityDetected();
+  let t24;
+  if ($[0] !== activityDetected || $[1] !== hideControls || $[2] !== showControls) {
+    t24 = () => {
+      if (activityDetected) {
+        showControls();
+      } else {
+        hideControls();
+      }
+    };
+    $[0] = activityDetected;
+    $[1] = hideControls;
+    $[2] = showControls;
+    $[3] = t24;
+  } else {
+    t24 = $[3];
+  }
+  const toggleControlsVisibility = t24;
   useDebounce(toggleControlsVisibility, activityDetected, 1000);
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentTime = _useState4[0],
-    setCurrentTime = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    duration = _useState6[0],
-    setDuration = _useState6[1];
-  var onTimeUpdate = useCallback(function () {
-    var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (time !== null && typeof time.currentTarget !== 'undefined') {
-      var _ref3 = time.currentTarget || {},
-        _ref3$currentTime = _ref3.currentTime,
-        targetTime = _ref3$currentTime === void 0 ? 0 : _ref3$currentTime;
-      setCurrentTime(targetTime);
-    } else {
-      setCurrentTime(0);
-    }
-  }, [duration, setCurrentTime]);
-  var onProgressStep = useCallback(function (step, meta) {
-    trackScreenMedia(videoMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
-  }, [trackScreenMedia, videoMedia]);
-  var onDurationChange = useCallback(function (dur) {
-    setDuration(dur);
-  }, [setDuration]);
-  var onPlay = useCallback(function (_ref4) {
-    var initial = _ref4.initial;
+  const [currentTime, setCurrentTime] = useState(null);
+  const [, setDuration] = useState(null);
+  let t25;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t25 = t26 => {
+      const time = t26 === undefined ? null : t26;
+      if (time !== null && typeof time.currentTarget !== "undefined") {
+        const {
+          currentTime: t27
+        } = time.currentTarget || {};
+        const targetTime = t27 === undefined ? 0 : t27;
+        setCurrentTime(targetTime);
+      } else {
+        setCurrentTime(0);
+      }
+    };
+    $[4] = t25;
+  } else {
+    t25 = $[4];
+  }
+  const onTimeUpdate = t25;
+  const onProgressStep = (step, meta) => {
+    trackScreenMedia(videoMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
+  };
+  let t26;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t26 = dur => {
+      setDuration(dur);
+    };
+    $[5] = t26;
+  } else {
+    t26 = $[5];
+  }
+  const onDurationChange = t26;
+  const onPlay = t27 => {
+    const {
+      initial
+    } = t27;
     if (!hasPlayed) {
       setHasPlayed(true);
     }
-    trackScreenMedia(videoMedia, initial ? 'play' : 'resume');
-  }, [trackScreenMedia, videoMedia]);
-  var onPause = useCallback(function (_ref5) {
-    var midway = _ref5.midway;
-    trackScreenMedia(videoMedia, midway ? 'pause' : 'ended');
-  }, [trackScreenMedia, videoMedia]);
-  var onSeeked = useCallback(function (time) {
-    if (time > 0) {
-      trackScreenMedia(videoMedia, 'seek', {
-        currentTime: time
+    trackScreenMedia(videoMedia, initial ? "play" : "resume");
+  };
+  const onPause = t28 => {
+    const {
+      midway
+    } = t28;
+    trackScreenMedia(videoMedia, midway ? "pause" : "ended");
+  };
+  const onSeeked = time_0 => {
+    if (time_0 > 0) {
+      trackScreenMedia(videoMedia, "seek", {
+        currentTime: time_0
       });
     }
-  }, [trackScreenMedia, videoMedia]);
-  var onEnded = useCallback(function () {
+  };
+  const onEnded = () => {
     if (current && !loop) {
       setPlaying(false);
     }
     if (current && shouldGotoNextScreenOnEnd) {
       gotoNextScreen();
     }
-  }, [loop, current, shouldGotoNextScreenOnEnd, gotoNextScreen]);
-  var fullscreen = layout === 'full';
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
+  };
+  const fullscreen = layout === "full";
+  let t29;
+  if ($[6] !== header) {
+    t29 = isHeaderFilled(header);
+    $[6] = header;
+    $[7] = t29;
+  } else {
+    t29 = $[7];
+  }
+  const hasHeader = t29;
+  let t30;
+  if ($[8] !== footer) {
+    t30 = isFooterFilled(footer);
+    $[8] = footer;
+    $[9] = t30;
+  } else {
+    t30 = $[9];
+  }
+  const hasFooter = t30;
+  let t31;
+  if ($[10] !== current || $[11] !== footer || $[12] !== isPreview || $[13] !== isView || $[14] !== openWebView) {
+    t31 = getFooterProps(footer, {
+      isView,
+      current,
+      openWebView,
+      isPreview
+    });
+    $[10] = current;
+    $[11] = footer;
+    $[12] = isPreview;
+    $[13] = isView;
+    $[14] = openWebView;
+    $[15] = t31;
+  } else {
+    t31 = $[15];
+  }
+  const footerProps = t31;
+  const hasVideo = video !== null;
+  const [ready, setReady] = useState(hasVideo);
+  const finalVideo = hasVideo ? {
+    ...video,
+    autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
+  } : null;
+  const {
+    metadata: t32,
+    url: t33
+  } = videoMedia || {};
+  const videoMetadata = t32 === undefined ? null : t32;
+  const videoUrl = t33 === undefined ? null : t33;
+  const finalThumbnail = getMediaThumbnail(videoMedia, thumbnail);
+  const hasVideoUrl = videoUrl !== null;
+  const {
+    width: t34,
+    height: t35
+  } = videoMetadata || {};
+  const videoWidth = t34 === undefined ? 0 : t34;
+  const videoHeight = t35 === undefined ? 0 : t35;
+  const {
+    width: resizedVideoWidth,
+    height: resizedVideoHeight
+  } = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
+    cover: fullscreen
   });
-  var hasVideo = video !== null;
-  var _useState7 = useState(hasVideo),
-    _useState8 = _slicedToArray(_useState7, 2),
-    ready = _useState8[0],
-    setReady = _useState8[1];
-  var finalVideo = useMemo(function () {
-    return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
-      autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
+  const resizedVideoLeft = -(resizedVideoWidth - width) / 2;
+  const resizedVideoTop = -(resizedVideoHeight - height) / 2;
+  let t36;
+  if ($[16] !== fullscreen) {
+    t36 = fullscreen ? {
+      width: "100%",
+      height: "100%"
+    } : {
+      width: "100%"
+    };
+    $[16] = fullscreen;
+    $[17] = t36;
+  } else {
+    t36 = $[17];
+  }
+  const placeholderProps = t36;
+  if (!hasVideoUrl && ready) {
+    setReady(false);
+  }
+  let t37;
+  if ($[18] !== setReady) {
+    t37 = () => {
+      setReady(true);
+    };
+    $[18] = setReady;
+    $[19] = t37;
+  } else {
+    t37 = $[19];
+  }
+  const onVideoReady = t37;
+  let t38;
+  if ($[20] !== autoPlay || $[21] !== current || $[22] !== hasVideoUrl || $[23] !== isView || $[24] !== playing || $[25] !== setControlsSuggestPlay || $[26] !== setPlaying) {
+    t38 = () => {
+      if (isView && playing && current && hasVideoUrl && autoPlay) {
+        setPlaying(false);
+        setControlsSuggestPlay(true);
+      }
+    };
+    $[20] = autoPlay;
+    $[21] = current;
+    $[22] = hasVideoUrl;
+    $[23] = isView;
+    $[24] = playing;
+    $[25] = setControlsSuggestPlay;
+    $[26] = setPlaying;
+    $[27] = t38;
+  } else {
+    t38 = $[27];
+  }
+  const onPlayError = t38;
+  let t39;
+  if ($[28] !== className || $[29] !== fullscreen) {
+    t39 = classNames([styles.container, className, {
+      [styles.fullscreen]: fullscreen
+    }]);
+    $[28] = className;
+    $[29] = fullscreen;
+    $[30] = t39;
+  } else {
+    t39 = $[30];
+  }
+  const t40 = isStatic || isCapture || ready;
+  let t41;
+  if ($[31] !== controlsVisible || $[32] !== current || $[33] !== hasHeader || $[34] !== header || $[35] !== isPlaceholder || $[36] !== isPreview || $[37] !== spacing || $[38] !== viewerTopHeight) {
+    t41 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+      className: styles.header,
+      style: {
+        paddingTop: spacing / 2,
+        paddingLeft: spacing,
+        paddingRight: spacing,
+        transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
+      },
+      children: /*#__PURE__*/jsx(Header, {
+        fade: current && !controlsVisible,
+        ...header
+      })
+    }, "header") : null;
+    $[31] = controlsVisible;
+    $[32] = current;
+    $[33] = hasHeader;
+    $[34] = header;
+    $[35] = isPlaceholder;
+    $[36] = isPreview;
+    $[37] = spacing;
+    $[38] = viewerTopHeight;
+    $[39] = t41;
+  } else {
+    t41 = $[39];
+  }
+  let t42;
+  if ($[40] !== placeholderProps) {
+    t42 = /*#__PURE__*/jsx(PlaceholderVideo, {
+      className: styles.placeholder,
+      ...placeholderProps
+    });
+    $[40] = placeholderProps;
+    $[41] = t42;
+  } else {
+    t42 = $[41];
+  }
+  let t43;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t43 = /*#__PURE__*/jsx("div", {
+      className: styles.emptyContainer,
+      children: /*#__PURE__*/jsx(Empty, {
+        className: styles.empty,
+        children: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "3ext9Q",
+          defaultMessage: "Video"
+        })
+      })
+    });
+    $[42] = t43;
+  } else {
+    t43 = $[42];
+  }
+  const t44 = !hasVideoUrl;
+  let t45;
+  if ($[43] !== current || $[44] !== currentQualityLevel || $[45] !== customMediaRef || $[46] !== finalThumbnail || $[47] !== finalVideo || $[48] !== hasVideoUrl || $[49] !== isView || $[50] !== mediaRef || $[51] !== mediaShouldLoad || $[52] !== muted || $[53] !== onDurationChange || $[54] !== onEnded || $[55] !== onPause || $[56] !== onPlay || $[57] !== onPlayError || $[58] !== onProgressStep || $[59] !== onSeeked || $[60] !== onTimeUpdate || $[61] !== onVideoReady || $[62] !== resizedVideoHeight || $[63] !== resizedVideoLeft || $[64] !== resizedVideoTop || $[65] !== resizedVideoWidth || $[66] !== resolution || $[67] !== setCurrentQualityLevel || $[68] !== shouldDisplayPoster || $[69] !== videoPlaying) {
+    t45 = hasVideoUrl ? /*#__PURE__*/jsx("div", {
+      className: styles.videoContainer,
+      style: {
+        width: resizedVideoWidth,
+        height: resizedVideoHeight,
+        left: resizedVideoLeft,
+        top: resizedVideoTop
+      },
+      children: shouldDisplayPoster ? /*#__PURE__*/jsx(Image, {
+        className: styles.image,
+        media: finalThumbnail,
+        width: resizedVideoWidth,
+        height: resizedVideoHeight,
+        objectFit: {
+          fit: "cover"
+        },
+        resolution: resolution,
+        shouldLoad: mediaShouldLoad
+      }) : /*#__PURE__*/jsx(Video, {
+        ...finalVideo,
+        width: resizedVideoWidth,
+        height: resizedVideoHeight,
+        paused: !videoPlaying,
+        muted: muted,
+        mediaRef: mergeRefs(mediaRef, customMediaRef),
+        className: styles.video,
+        onReady: onVideoReady,
+        onPlay: onPlay,
+        onPause: onPause,
+        onTimeUpdate: onTimeUpdate,
+        onProgressStep: onProgressStep,
+        onDurationChange: onDurationChange,
+        onSeeked: onSeeked,
+        onEnded: onEnded,
+        onPlayError: onPlayError,
+        disablePictureInPicture: true,
+        focusable: current && isView,
+        shouldLoad: mediaShouldLoad,
+        qualityStartLevel: currentQualityLevel,
+        onQualityLevelChange: setCurrentQualityLevel
+      })
     }) : 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;
-  var finalThumbnail = useMediaThumbnail(videoMedia, thumbnail);
-  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 _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
-      cover: fullscreen
-    }),
-    resizedVideoWidth = _getSizeWithinBounds.width,
-    resizedVideoHeight = _getSizeWithinBounds.height;
-  var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
-  var resizedVideoTop = -(resizedVideoHeight - height) / 2;
-  var placeholderProps = fullscreen ? {
-    width: '100%',
-    height: '100%'
-  } : {
-    width: '100%'
-  };
-  useEffect(function () {
-    setReady(!hasVideoUrl);
-  }, [videoUrl, hasVideoUrl, setReady]);
-  var onVideoReady = useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-
-  // const onSuspended = useCallback(() => {
-  //     if (playing && current) {
-  //         setPlaying(false);
-  //     }
-  // }, [current, playing, setPlaying]);
-
-  var onPlayError = useCallback(function () {
-    if (isView && playing && current && hasVideoUrl && autoPlay) {
-      setPlaying(false);
-      setControlsSuggestPlay(true);
-    }
-  }, [isView, current, playing, hasVideoUrl, autoPlay, setPlaying, setControlsSuggestPlay]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)]),
-    "data-screen-ready": isStatic || isCapture || ready,
-    children: [/*#__PURE__*/jsx(Container, {
+    $[43] = current;
+    $[44] = currentQualityLevel;
+    $[45] = customMediaRef;
+    $[46] = finalThumbnail;
+    $[47] = finalVideo;
+    $[48] = hasVideoUrl;
+    $[49] = isView;
+    $[50] = mediaRef;
+    $[51] = mediaShouldLoad;
+    $[52] = muted;
+    $[53] = onDurationChange;
+    $[54] = onEnded;
+    $[55] = onPause;
+    $[56] = onPlay;
+    $[57] = onPlayError;
+    $[58] = onProgressStep;
+    $[59] = onSeeked;
+    $[60] = onTimeUpdate;
+    $[61] = onVideoReady;
+    $[62] = resizedVideoHeight;
+    $[63] = resizedVideoLeft;
+    $[64] = resizedVideoTop;
+    $[65] = resizedVideoWidth;
+    $[66] = resolution;
+    $[67] = setCurrentQualityLevel;
+    $[68] = shouldDisplayPoster;
+    $[69] = videoPlaying;
+    $[70] = t45;
+  } else {
+    t45 = $[70];
+  }
+  let t46;
+  if ($[71] !== t42 || $[72] !== t44 || $[73] !== t45) {
+    t46 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: t42,
+      empty: t43,
+      isEmpty: t44,
+      children: t45
+    }, "video");
+    $[71] = t42;
+    $[72] = t44;
+    $[73] = t45;
+    $[74] = t46;
+  } else {
+    t46 = $[74];
+  }
+  let t47;
+  if ($[75] !== captions || $[76] !== closedCaptions || $[77] !== current || $[78] !== currentTime || $[79] !== footerProps || $[80] !== hasFooter || $[81] !== isCapture || $[82] !== isPlaceholder || $[83] !== isPreview || $[84] !== isStatic || $[85] !== spacing || $[86] !== viewerBottomHeight || $[87] !== viewerBottomSidesWidth) {
+    t47 = !isPlaceholder ? /*#__PURE__*/jsxs("div", {
+      className: styles.bottom,
+      style: {
+        transform: current && !isPreview ? `translate3d(0, -${viewerBottomHeight}px, 0)` : null,
+        paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+        paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+        paddingBottom: spacing / 2,
+        paddingTop: 0
+      },
+      children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, {
+        className: styles.closedCaptions,
+        media: closedCaptions,
+        ...captions,
+        currentTime: currentTime
+      }) : null, hasFooter ? /*#__PURE__*/jsx(Footer, {
+        ...footerProps
+      }) : null]
+    }, "bottom-content") : null;
+    $[75] = captions;
+    $[76] = closedCaptions;
+    $[77] = current;
+    $[78] = currentTime;
+    $[79] = footerProps;
+    $[80] = hasFooter;
+    $[81] = isCapture;
+    $[82] = isPlaceholder;
+    $[83] = isPreview;
+    $[84] = isStatic;
+    $[85] = spacing;
+    $[86] = viewerBottomHeight;
+    $[87] = viewerBottomSidesWidth;
+    $[88] = t47;
+  } else {
+    t47 = $[88];
+  }
+  let t48;
+  if ($[89] !== t41 || $[90] !== t46 || $[91] !== t47) {
+    t48 = /*#__PURE__*/jsxs("div", {
+      className: styles.inner,
+      children: [t41, t46, t47]
+    });
+    $[89] = t41;
+    $[90] = t46;
+    $[91] = t47;
+    $[92] = t48;
+  } else {
+    t48 = $[92];
+  }
+  let t49;
+  if ($[93] !== height || $[94] !== t48 || $[95] !== width) {
+    t49 = /*#__PURE__*/jsx(Container, {
       width: width,
       height: height,
       className: styles.content,
-      children: /*#__PURE__*/jsxs("div", {
-        className: styles.inner,
-        children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
-          className: styles.header,
-          style: {
-            paddingTop: spacing / 2,
-            paddingLeft: spacing,
-            paddingRight: spacing,
-            transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-          },
-          children: /*#__PURE__*/jsx(Header, _objectSpread({
-            fade: current && !controlsVisible
-          }, header))
-        }, "header") : null, /*#__PURE__*/jsx(ScreenElement, {
-          placeholder: /*#__PURE__*/jsx(PlaceholderVideo, _objectSpread({
-            className: styles.placeholder
-          }, 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"
-                }]
-              })
-            })
-          }),
-          isEmpty: !hasVideoUrl,
-          children: hasVideoUrl ? /*#__PURE__*/jsx("div", {
-            className: styles.videoContainer,
-            style: {
-              width: resizedVideoWidth,
-              height: resizedVideoHeight,
-              left: resizedVideoLeft,
-              top: resizedVideoTop
-            },
-            children: shouldDisplayPoster ? /*#__PURE__*/jsx(Image, {
-              className: styles.image,
-              media: finalThumbnail,
-              width: resizedVideoWidth,
-              height: resizedVideoHeight,
-              objectFit: {
-                fit: 'cover'
-              },
-              resolution: resolution,
-              shouldLoad: mediaShouldLoad
-            }) : /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
-              width: resizedVideoWidth,
-              height: resizedVideoHeight,
-              paused: !videoPlaying,
-              muted: muted,
-              mediaRef: mediaRef,
-              className: styles.video,
-              onReady: onVideoReady,
-              onPlay: onPlay,
-              onPause: onPause,
-              onTimeUpdate: onTimeUpdate,
-              onProgressStep: onProgressStep,
-              onDurationChange: onDurationChange,
-              onSeeked: onSeeked,
-              onEnded: onEnded
-              // onSuspended={onSuspended}
-              ,
-              onPlayError: onPlayError,
-              disablePictureInPicture: true,
-              focusable: current && isView,
-              shouldLoad: mediaShouldLoad,
-              qualityStartLevel: currentQualityLevel,
-              onQualityLevelChange: setCurrentQualityLevel
-            }))
-          }) : null
-        }, "video"), !isPlaceholder ? /*#__PURE__*/jsxs("div", {
-          className: styles.bottom,
-          style: {
-            transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
-            paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-            paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-            paddingBottom: spacing / 2,
-            paddingTop: 0
-          },
-          children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, _objectSpread(_objectSpread({
-            className: styles.closedCaptions,
-            media: closedCaptions // BW Compat
-          }, captions), {}, {
-            currentTime: currentTime
-          })) : null, hasFooter ? /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps)) : null]
-        }, "bottom-content") : null]
-      })
-    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      children: t48
+    });
+    $[93] = height;
+    $[94] = t48;
+    $[95] = width;
+    $[96] = t49;
+  } else {
+    t49 = $[96];
+  }
+  let t50;
+  if ($[97] !== background || $[98] !== backgroundPlaying || $[99] !== height || $[100] !== isPlaceholder || $[101] !== isPreview || $[102] !== mediaShouldLoad || $[103] !== muted || $[104] !== resolution || $[105] !== width) {
+    t50 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -376,9 +570,38 @@ function VideoScreen(_ref) {
       muted: muted,
       shouldLoad: mediaShouldLoad,
       withoutVideo: isPreview
-    }) : null]
-  });
+    }) : null;
+    $[97] = background;
+    $[98] = backgroundPlaying;
+    $[99] = height;
+    $[100] = isPlaceholder;
+    $[101] = isPreview;
+    $[102] = mediaShouldLoad;
+    $[103] = muted;
+    $[104] = resolution;
+    $[105] = width;
+    $[106] = t50;
+  } else {
+    t50 = $[106];
+  }
+  let t51;
+  if ($[107] !== t39 || $[108] !== t40 || $[109] !== t49 || $[110] !== t50) {
+    t51 = /*#__PURE__*/jsxs("div", {
+      className: t39,
+      "data-screen-ready": t40,
+      children: [t49, t50]
+    });
+    $[107] = t39;
+    $[108] = t40;
+    $[109] = t49;
+    $[110] = t50;
+    $[111] = t51;
+  } else {
+    t51 = $[111];
+  }
+  return t51;
 }
+function _temp() {}
 
 var definition = {
   id: 'video',
@@ -386,19 +609,13 @@ var definition = {
   group: {
     label: defineMessage({
       id: "+9akmg",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio and Video"
-      }]
+      defaultMessage: "Audio and Video"
     }),
     order: 5
   },
   title: defineMessage({
     id: "UBXIYP",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Video"
-    }]
+    defaultMessage: "Video"
   }),
   component: VideoScreen,
   layouts: ['middle', 'full'],
@@ -409,10 +626,7 @@ var definition = {
     defaultValue: 'middle',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'video',
@@ -425,10 +639,7 @@ var definition = {
     },
     label: defineMessage({
       id: "tvl2Zc",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
+      defaultMessage: "Video"
     })
   }, {
     name: 'gotoNextScreenOnEnd',
@@ -436,30 +647,21 @@ 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"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -474,10 +676,7 @@ var definition = {
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.4.70",
+    "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",
@@ -52,25 +53,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.69",
-        "@micromag/element-background": "^0.4.70",
-        "@micromag/element-closed-captions": "^0.4.69",
-        "@micromag/element-container": "^0.4.69",
-        "@micromag/element-footer": "^0.4.70",
-        "@micromag/element-header": "^0.4.69",
-        "@micromag/element-image": "^0.4.69",
-        "@micromag/element-video": "^0.4.70",
-        "@micromag/transforms": "^0.4.69",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-background": "^0.4.74",
+        "@micromag/element-closed-captions": "^0.4.74",
+        "@micromag/element-container": "^0.4.74",
+        "@micromag/element-footer": "^0.4.74",
+        "@micromag/element-header": "^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",
@@ -80,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }