@micromag/screen-audio 0.4.71 → 0.4.74

package/es/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ForwardedRef } from 'react';
-import { AudioElement, BackgroundElement, Header, Footer } from '@micromag/core';
+import { AudioElement, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
 
 interface AudioScreenProps {
     layout?: 'middle';
@@ -11,7 +11,7 @@ interface AudioScreenProps {
     footer?: Footer | null;
     current?: boolean;
     preload?: boolean;
-    mediaRef?: ForwardedRef<HTMLMediaElement> | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     showWave?: boolean;
     className?: string | null;
 }

package/es/index.js

@@ -1,9 +1,7 @@
 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 classNames from 'classnames';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useTrackScreenMedia } from '@micromag/core/hooks';
@@ -15,254 +13,591 @@ import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
 import Header from '@micromag/element-header';
 import Layout, { Spacer } from '@micromag/element-layout';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-screen-audio-container","background":"micromag-screen-audio-background","content":"micromag-screen-audio-content","audio":"micromag-screen-audio-audio","bottom":"micromag-screen-audio-bottom","empty":"micromag-screen-audio-empty","isPreview":"micromag-screen-audio-isPreview"};
 
-function AudioScreen(_ref) {
-  _ref.layout;
-    var _ref$audio = _ref.audio,
-    audio = _ref$audio === void 0 ? null : _ref$audio,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _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$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$showWave = _ref.showWave,
-    showWave = _ref$showWave === void 0 ? true : _ref$showWave,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isPreview = _useScreenRenderConte.isPreview,
-    isView = _useScreenRenderConte.isView,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var trackScreenMedia = useTrackScreenMedia('audio');
-  var _useState = useState(isStatic || isPlaceholder),
-    _useState2 = _slicedToArray(_useState, 2),
-    ready = _useState2[0],
-    setReady = _useState2[1];
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || preload;
-  // const transitionPlaying = current && ready;
-  // const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var hasAudio = audio !== null;
-  var _ref2 = audio || {},
-    _ref2$media = _ref2.media,
-    audioMedia = _ref2$media === void 0 ? null : _ref2$media,
-    _ref2$autoPlay = _ref2.autoPlay,
-    autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
-    _ref2$closedCaptions = _ref2.closedCaptions,
-    closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
-    _ref2$captions = _ref2.captions,
-    captions = _ref2$captions === void 0 ? null : _ref2$captions,
-    _ref2$withWave = _ref2.withWave,
-    withWave = _ref2$withWave === void 0 ? false : _ref2$withWave,
-    _ref2$withControls = _ref2.withControls,
-    withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
-    _ref2$withSeekBar = _ref2.withSeekBar,
-    withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
-    _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 _ref3 = audioMedia || {},
-    _ref3$url = _ref3.url,
-    audioUrl = _ref3$url === void 0 ? null : _ref3$url;
-  var hasAudioUrl = audioUrl !== null;
-  var finalAudio = hasAudio ? _objectSpread(_objectSpread({}, audio), {}, {
-    autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
-  }) : null;
-  var hasClosedCaptions = closedCaptions !== null || captions !== null;
-  var _usePlaybackContext = usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    muted = _usePlaybackContext.muted,
-    setControls = _usePlaybackContext.setControls,
-    setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
-    setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setPlaying = _usePlaybackContext.setPlaying;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var paused = !current || !playing || !isCurrentMedia && isView;
-  useEffect(function () {
-    if (!current) {
-      return function () {};
-    }
-    if (withControls || withSeekBar) {
-      setControls(true);
-      setControlsTheme({
-        seekBarOnly: withSeekBar,
-        color: color,
-        progressColor: progressColor
-      });
-    } else {
-      setControls(false);
-    }
-    return function () {
+function AudioScreen(t0) {
+  const $ = c(150);
+  const {
+    layout: t1,
+    audio: t2,
+    spacing: t3,
+    background: t4,
+    header: t5,
+    footer: t6,
+    current: t7,
+    preload: t8,
+    mediaRef: t9,
+    showWave: t10,
+    className: t11
+  } = t0;
+  const audio = t2 === undefined ? null : t2;
+  const spacing = t3 === undefined ? 20 : t3;
+  const background = t4 === undefined ? null : t4;
+  const header = t5 === undefined ? null : t5;
+  const footer = t6 === undefined ? null : t6;
+  const current = t7 === undefined ? true : t7;
+  const preload = t8 === undefined ? true : t8;
+  const customMediaRef = t9 === undefined ? null : t9;
+  const showWave = t10 === undefined ? true : t10;
+  const className = t11 === undefined ? null : t11;
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    isPlaceholder,
+    isPreview,
+    isView,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const trackScreenMedia = useTrackScreenMedia("audio");
+  const [ready, setReady] = useState(isStatic || isPlaceholder);
+  const backgroundPlaying = current && (isView || isEdit);
+  const mediaShouldLoad = current || preload;
+  let t12;
+  if ($[0] !== header) {
+    t12 = isHeaderFilled(header);
+    $[0] = header;
+    $[1] = t12;
+  } else {
+    t12 = $[1];
+  }
+  const hasHeader = t12;
+  let t13;
+  if ($[2] !== footer) {
+    t13 = isFooterFilled(footer);
+    $[2] = footer;
+    $[3] = t13;
+  } else {
+    t13 = $[3];
+  }
+  const hasFooter = t13;
+  let t14;
+  if ($[4] !== current || $[5] !== footer || $[6] !== isPreview || $[7] !== isView || $[8] !== openWebView) {
+    t14 = getFooterProps(footer, {
+      isView,
+      current,
+      openWebView,
+      isPreview
+    });
+    $[4] = current;
+    $[5] = footer;
+    $[6] = isPreview;
+    $[7] = isView;
+    $[8] = openWebView;
+    $[9] = t14;
+  } else {
+    t14 = $[9];
+  }
+  const footerProps = t14;
+  const hasAudio = audio !== null;
+  let t15;
+  if ($[10] !== audio) {
+    t15 = audio || {};
+    $[10] = audio;
+    $[11] = t15;
+  } else {
+    t15 = $[11];
+  }
+  const {
+    media: t16,
+    autoPlay: t17,
+    closedCaptions: t18,
+    captions: t19,
+    withWave: t20,
+    withControls: t21,
+    withSeekBar: t22,
+    color: t23,
+    progressColor: t24
+  } = t15;
+  const audioMedia = t16 === undefined ? null : t16;
+  const autoPlay = t17 === undefined ? true : t17;
+  const closedCaptions = t18 === undefined ? null : t18;
+  const captions = t19 === undefined ? null : t19;
+  const withWave = t20 === undefined ? false : t20;
+  const withControls = t21 === undefined ? false : t21;
+  const withSeekBar = t22 === undefined ? false : t22;
+  const color = t23 === undefined ? null : t23;
+  const progressColor = t24 === undefined ? null : t24;
+  let t25;
+  if ($[12] !== audioMedia) {
+    t25 = audioMedia || {};
+    $[12] = audioMedia;
+    $[13] = t25;
+  } else {
+    t25 = $[13];
+  }
+  const {
+    url: t26
+  } = t25;
+  const audioUrl = t26 === undefined ? null : t26;
+  const hasAudioUrl = audioUrl !== null;
+  let t27;
+  if ($[14] !== audio || $[15] !== autoPlay || $[16] !== current || $[17] !== hasAudio || $[18] !== isCapture || $[19] !== isPreview || $[20] !== isStatic) {
+    t27 = hasAudio ? {
+      ...audio,
+      autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
+    } : null;
+    $[14] = audio;
+    $[15] = autoPlay;
+    $[16] = current;
+    $[17] = hasAudio;
+    $[18] = isCapture;
+    $[19] = isPreview;
+    $[20] = isStatic;
+    $[21] = t27;
+  } else {
+    t27 = $[21];
+  }
+  const finalAudio = t27;
+  const hasClosedCaptions = closedCaptions !== null || captions !== null;
+  const {
+    playing,
+    muted,
+    setControls,
+    setControlsSuggestPlay,
+    setControlsTheme,
+    setPlaying
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: t28
+  } = usePlaybackMediaRef(current);
+  const isCurrentMedia = t28 === undefined ? false : t28;
+  const paused = !current || !playing || !isCurrentMedia && isView;
+  let t29;
+  if ($[22] !== color || $[23] !== current || $[24] !== progressColor || $[25] !== setControls || $[26] !== setControlsTheme || $[27] !== withControls || $[28] !== withSeekBar) {
+    t29 = () => {
+      if (!current) {
+        return _temp;
+      }
       if (withControls || withSeekBar) {
+        setControls(true);
+        setControlsTheme({
+          seekBarOnly: withSeekBar,
+          color,
+          progressColor
+        });
+      } else {
         setControls(false);
       }
+      return () => {
+        if (withControls || withSeekBar) {
+          setControls(false);
+        }
+      };
     };
-  }, [current, withControls, withSeekBar, setControls, color, progressColor]);
-  var onAudioReady = useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-  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 isIOS = useMemo(function () {
-    return isIos();
-  }, [isIos]);
-  useEffect(function () {
-    if (current && autoPlay && !playing) {
-      setPlaying(true);
-    }
-  }, [current, autoPlay]);
-  var onTimeUpdate = useCallback(function (_ref4) {
-    var _ref4$timeStamp = _ref4.timeStamp,
-      timeStamp = _ref4$timeStamp === void 0 ? 0 : _ref4$timeStamp;
-    setCurrentTime(timeStamp);
-  }, [setCurrentTime, setDuration, duration]);
-  var onProgressStep = useCallback(function (step, meta) {
-    trackScreenMedia(audioMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
-  }, [trackScreenMedia, audioMedia]);
-  var onDurationChange = useCallback(function (dur) {
-    setDuration(dur);
-  }, [setDuration]);
-  var onPlay = useCallback(function (_ref5) {
-    var initial = _ref5.initial;
-    trackScreenMedia(audioMedia, initial ? 'play' : 'resume');
-  }, [trackScreenMedia, audioMedia]);
-  var onPause = useCallback(function (_ref6) {
-    var midway = _ref6.midway;
-    trackScreenMedia(audioMedia, midway ? 'pause' : 'ended');
-  }, [trackScreenMedia, audioMedia]);
-  var onEnded = useCallback(function () {
-    if (current) {
-      setPlaying(false);
-    }
-  }, [current, setPlaying]);
-  var onSeeked = useCallback(function (time) {
-    if (time > 0) {
-      trackScreenMedia(audioMedia, 'seek');
-    }
-  }, [trackScreenMedia, audioMedia]);
-  var onPlayError = useCallback(function () {
-    if (isView && playing && current && hasAudio && autoPlay) {
-      setPlaying(false);
-      setControlsSuggestPlay(true);
-    }
-  }, [isView, current, playing, hasAudio, autoPlay, setPlaying, setControlsSuggestPlay]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.placeholder, isPlaceholder), styles.isPreview, isPreview)]),
-    "data-screen-ready": ready,
-    children: [/*#__PURE__*/jsx(Container, {
+    $[22] = color;
+    $[23] = current;
+    $[24] = progressColor;
+    $[25] = setControls;
+    $[26] = setControlsTheme;
+    $[27] = withControls;
+    $[28] = withSeekBar;
+    $[29] = t29;
+  } else {
+    t29 = $[29];
+  }
+  let t30;
+  if ($[30] !== color || $[31] !== current || $[32] !== progressColor || $[33] !== setControls || $[34] !== withControls || $[35] !== withSeekBar) {
+    t30 = [current, withControls, withSeekBar, setControls, color, progressColor];
+    $[30] = color;
+    $[31] = current;
+    $[32] = progressColor;
+    $[33] = setControls;
+    $[34] = withControls;
+    $[35] = withSeekBar;
+    $[36] = t30;
+  } else {
+    t30 = $[36];
+  }
+  useEffect(t29, t30);
+  let t31;
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t31 = () => {
+      setReady(true);
+    };
+    $[37] = t31;
+  } else {
+    t31 = $[37];
+  }
+  const onAudioReady = t31;
+  const [currentTime, setCurrentTime] = useState(null);
+  const [duration, setDuration] = useState(null);
+  let t32;
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = isIos();
+    $[38] = t32;
+  } else {
+    t32 = $[38];
+  }
+  const isIOS = t32;
+  let t33;
+  if ($[39] !== autoPlay || $[40] !== current || $[41] !== playing || $[42] !== setPlaying) {
+    t33 = () => {
+      if (current && autoPlay && !playing) {
+        setPlaying(true);
+      }
+    };
+    $[39] = autoPlay;
+    $[40] = current;
+    $[41] = playing;
+    $[42] = setPlaying;
+    $[43] = t33;
+  } else {
+    t33 = $[43];
+  }
+  let t34;
+  if ($[44] !== autoPlay || $[45] !== current) {
+    t34 = [current, autoPlay];
+    $[44] = autoPlay;
+    $[45] = current;
+    $[46] = t34;
+  } else {
+    t34 = $[46];
+  }
+  useEffect(t33, t34);
+  let t35;
+  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+    t35 = t36 => {
+      const {
+        timeStamp: t37
+      } = t36;
+      const timeStamp = t37 === undefined ? 0 : t37;
+      setCurrentTime(timeStamp);
+    };
+    $[47] = t35;
+  } else {
+    t35 = $[47];
+  }
+  const onTimeUpdate = t35;
+  let t36;
+  if ($[48] !== audioMedia || $[49] !== trackScreenMedia) {
+    t36 = (step, meta) => {
+      trackScreenMedia(audioMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
+    };
+    $[48] = audioMedia;
+    $[49] = trackScreenMedia;
+    $[50] = t36;
+  } else {
+    t36 = $[50];
+  }
+  const onProgressStep = t36;
+  let t37;
+  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+    t37 = dur => {
+      setDuration(dur);
+    };
+    $[51] = t37;
+  } else {
+    t37 = $[51];
+  }
+  const onDurationChange = t37;
+  let t38;
+  if ($[52] !== audioMedia || $[53] !== trackScreenMedia) {
+    t38 = t39 => {
+      const {
+        initial
+      } = t39;
+      trackScreenMedia(audioMedia, initial ? "play" : "resume");
+    };
+    $[52] = audioMedia;
+    $[53] = trackScreenMedia;
+    $[54] = t38;
+  } else {
+    t38 = $[54];
+  }
+  const onPlay = t38;
+  let t39;
+  if ($[55] !== audioMedia || $[56] !== trackScreenMedia) {
+    t39 = t40 => {
+      const {
+        midway
+      } = t40;
+      trackScreenMedia(audioMedia, midway ? "pause" : "ended");
+    };
+    $[55] = audioMedia;
+    $[56] = trackScreenMedia;
+    $[57] = t39;
+  } else {
+    t39 = $[57];
+  }
+  const onPause = t39;
+  let t40;
+  if ($[58] !== current || $[59] !== setPlaying) {
+    t40 = () => {
+      if (current) {
+        setPlaying(false);
+      }
+    };
+    $[58] = current;
+    $[59] = setPlaying;
+    $[60] = t40;
+  } else {
+    t40 = $[60];
+  }
+  const onEnded = t40;
+  let t41;
+  if ($[61] !== audioMedia || $[62] !== trackScreenMedia) {
+    t41 = time => {
+      if (time > 0) {
+        trackScreenMedia(audioMedia, "seek");
+      }
+    };
+    $[61] = audioMedia;
+    $[62] = trackScreenMedia;
+    $[63] = t41;
+  } else {
+    t41 = $[63];
+  }
+  const onSeeked = t41;
+  let t42;
+  if ($[64] !== autoPlay || $[65] !== current || $[66] !== hasAudio || $[67] !== isView || $[68] !== playing || $[69] !== setControlsSuggestPlay || $[70] !== setPlaying) {
+    t42 = () => {
+      if (isView && playing && current && hasAudio && autoPlay) {
+        setPlaying(false);
+        setControlsSuggestPlay(true);
+      }
+    };
+    $[64] = autoPlay;
+    $[65] = current;
+    $[66] = hasAudio;
+    $[67] = isView;
+    $[68] = playing;
+    $[69] = setControlsSuggestPlay;
+    $[70] = setPlaying;
+    $[71] = t42;
+  } else {
+    t42 = $[71];
+  }
+  const onPlayError = t42;
+  let t43;
+  if ($[72] !== className || $[73] !== isPlaceholder || $[74] !== isPreview) {
+    t43 = classNames([styles.container, className, {
+      [styles.placeholder]: isPlaceholder,
+      [styles.isPreview]: isPreview
+    }]);
+    $[72] = className;
+    $[73] = isPlaceholder;
+    $[74] = isPreview;
+    $[75] = t43;
+  } else {
+    t43 = $[75];
+  }
+  let t44;
+  if ($[76] !== hasHeader || $[77] !== isPlaceholder || $[78] !== isPreview || $[79] !== spacing || $[80] !== viewerTopHeight) {
+    t44 = !isPlaceholder ? {
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      paddingBottom: spacing,
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing)
+    } : null;
+    $[76] = hasHeader;
+    $[77] = isPlaceholder;
+    $[78] = isPreview;
+    $[79] = spacing;
+    $[80] = viewerTopHeight;
+    $[81] = t44;
+  } else {
+    t44 = $[81];
+  }
+  let t45;
+  if ($[82] !== hasHeader || $[83] !== header) {
+    t45 = hasHeader ? /*#__PURE__*/jsx(Header, {
+      ...header
+    }) : /*#__PURE__*/jsx(Spacer, {}, "spacer-top");
+    $[82] = hasHeader;
+    $[83] = header;
+    $[84] = t45;
+  } else {
+    t45 = $[84];
+  }
+  let t46;
+  if ($[85] === Symbol.for("react.memo_cache_sentinel")) {
+    t46 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "MYZwSA",
+      defaultMessage: "Audio"
+    });
+    $[85] = t46;
+  } else {
+    t46 = $[85];
+  }
+  const t47 = !hasAudioUrl;
+  let t48;
+  if ($[86] !== customMediaRef || $[87] !== mediaRef) {
+    t48 = mergeRefs(mediaRef, customMediaRef);
+    $[86] = customMediaRef;
+    $[87] = mediaRef;
+    $[88] = t48;
+  } else {
+    t48 = $[88];
+  }
+  const t49 = isIOS || isPreview;
+  let t50;
+  if ($[89] !== color || $[90] !== isPreview || $[91] !== progressColor) {
+    t50 = isPreview ? {
+      sampleWidth: 10,
+      sampleMargin: 5,
+      minSampleHeight: 5,
+      backgroundColor: color,
+      progressColor
+    } : {
+      backgroundColor: color,
+      progressColor
+    };
+    $[89] = color;
+    $[90] = isPreview;
+    $[91] = progressColor;
+    $[92] = t50;
+  } else {
+    t50 = $[92];
+  }
+  const t51 = showWave && withWave;
+  let t52;
+  if ($[93] !== finalAudio || $[94] !== muted || $[95] !== onEnded || $[96] !== onPause || $[97] !== onPlay || $[98] !== onPlayError || $[99] !== onProgressStep || $[100] !== onSeeked || $[101] !== paused || $[102] !== t48 || $[103] !== t49 || $[104] !== t50 || $[105] !== t51) {
+    t52 = /*#__PURE__*/jsx(Audio, {
+      ...finalAudio,
+      mediaRef: t48,
+      waveFake: t49,
+      waveProps: t50,
+      paused: paused,
+      muted: muted,
+      className: styles.audio,
+      onReady: onAudioReady,
+      onPlay: onPlay,
+      onPause: onPause,
+      onTimeUpdate: onTimeUpdate,
+      onProgressStep: onProgressStep,
+      onDurationChange: onDurationChange,
+      onSeeked: onSeeked,
+      onEnded: onEnded,
+      onPlayError: onPlayError,
+      withWave: t51
+    });
+    $[93] = finalAudio;
+    $[94] = muted;
+    $[95] = onEnded;
+    $[96] = onPause;
+    $[97] = onPlay;
+    $[98] = onPlayError;
+    $[99] = onProgressStep;
+    $[100] = onSeeked;
+    $[101] = paused;
+    $[102] = t48;
+    $[103] = t49;
+    $[104] = t50;
+    $[105] = t51;
+    $[106] = t52;
+  } else {
+    t52 = $[106];
+  }
+  let t53;
+  if ($[107] !== t47 || $[108] !== t52) {
+    t53 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "audio",
+      emptyLabel: t46,
+      emptyClassName: styles.empty,
+      isEmpty: t47,
+      children: t52
+    }, "audio");
+    $[107] = t47;
+    $[108] = t52;
+    $[109] = t53;
+  } else {
+    t53 = $[109];
+  }
+  let t54;
+  if ($[110] === Symbol.for("react.memo_cache_sentinel")) {
+    t54 = /*#__PURE__*/jsx(Spacer, {}, "spacer-middle");
+    $[110] = t54;
+  } else {
+    t54 = $[110];
+  }
+  let t55;
+  if ($[111] !== captions || $[112] !== closedCaptions || $[113] !== current || $[114] !== currentTime || $[115] !== footerProps || $[116] !== hasClosedCaptions || $[117] !== hasFooter || $[118] !== isCapture || $[119] !== isPlaceholder || $[120] !== isPreview || $[121] !== isStatic || $[122] !== spacing || $[123] !== viewerBottomHeight || $[124] !== viewerBottomSidesWidth) {
+    t55 = !isPlaceholder ? /*#__PURE__*/jsxs("div", {
+      className: styles.bottom,
+      style: {
+        transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
+        paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+        paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+        paddingBottom: spacing / 2,
+        paddingTop: 0
+      },
+      children: [hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, {
+        className: styles.closedCaptions,
+        media: closedCaptions,
+        ...captions,
+        currentTime: currentTime
+      }) : null, hasFooter ? /*#__PURE__*/jsx(Footer, {
+        ...footerProps,
+        className: styles.callToAction
+      }) : null]
+    }, "bottom") : null;
+    $[111] = captions;
+    $[112] = closedCaptions;
+    $[113] = current;
+    $[114] = currentTime;
+    $[115] = footerProps;
+    $[116] = hasClosedCaptions;
+    $[117] = hasFooter;
+    $[118] = isCapture;
+    $[119] = isPlaceholder;
+    $[120] = isPreview;
+    $[121] = isStatic;
+    $[122] = spacing;
+    $[123] = viewerBottomHeight;
+    $[124] = viewerBottomSidesWidth;
+    $[125] = t55;
+  } else {
+    t55 = $[125];
+  }
+  let t56;
+  if ($[126] !== t44 || $[127] !== t45 || $[128] !== t53 || $[129] !== t55) {
+    t56 = /*#__PURE__*/jsxs(Layout, {
+      fullscreen: true,
+      style: t44,
+      children: [t45, t53, t54, t55]
+    });
+    $[126] = t44;
+    $[127] = t45;
+    $[128] = t53;
+    $[129] = t55;
+    $[130] = t56;
+  } else {
+    t56 = $[130];
+  }
+  let t57;
+  if ($[131] !== height || $[132] !== t56 || $[133] !== width) {
+    t57 = /*#__PURE__*/jsx(Container, {
       width: width,
       height: height,
       className: styles.content,
-      children: /*#__PURE__*/jsxs(Layout, {
-        fullscreen: true,
-        style: !isPlaceholder ? {
-          paddingLeft: spacing,
-          paddingRight: spacing,
-          paddingBottom: spacing,
-          paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing)
-        } : null,
-        children: [hasHeader ? /*#__PURE__*/jsx(Header, _objectSpread({}, header)) : /*#__PURE__*/jsx(Spacer, {}, "spacer-top"), /*#__PURE__*/jsx(ScreenElement, {
-          placeholder: "audio",
-          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-            id: "MYZwSA",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Audio"
-            }]
-          }),
-          emptyClassName: styles.empty,
-          isEmpty: !hasAudioUrl,
-          children: /*#__PURE__*/jsx(Audio, _objectSpread(_objectSpread({}, finalAudio), {}, {
-            mediaRef: mergeRefs(mediaRef, customMediaRef),
-            waveFake: isIOS || isPreview,
-            waveProps: isPreview ? {
-              sampleWidth: 10,
-              sampleMargin: 5,
-              minSampleHeight: 5,
-              backgroundColor: color,
-              progressColor: progressColor
-            } : {
-              backgroundColor: color,
-              progressColor: progressColor
-            },
-            paused: paused,
-            muted: muted,
-            className: styles.audio,
-            onReady: onAudioReady,
-            onPlay: onPlay,
-            onPause: onPause,
-            onTimeUpdate: onTimeUpdate,
-            onProgressStep: onProgressStep,
-            onDurationChange: onDurationChange,
-            onSeeked: onSeeked,
-            onEnded: onEnded,
-            onPlayError: onPlayError,
-            withWave: showWave && withWave
-          }))
-        }, "audio"), /*#__PURE__*/jsx(Spacer, {}, "spacer-middle"), !isPlaceholder ? /*#__PURE__*/jsxs("div", {
-          className: styles.bottom,
-          style: {
-            transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
-            paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-            paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-            paddingBottom: spacing / 2,
-            paddingTop: 0
-          },
-          children: [hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, _objectSpread(_objectSpread({
-            className: styles.closedCaptions,
-            media: closedCaptions
-          }, captions), {}, {
-            currentTime: currentTime
-          })) : null, hasFooter ? /*#__PURE__*/jsx(Footer, _objectSpread(_objectSpread({}, footerProps), {}, {
-            className: styles.callToAction
-          })) : null]
-        }, "bottom") : null]
-      })
-    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      children: t56
+    });
+    $[131] = height;
+    $[132] = t56;
+    $[133] = width;
+    $[134] = t57;
+  } else {
+    t57 = $[134];
+  }
+  let t58;
+  if ($[135] !== background || $[136] !== backgroundPlaying || $[137] !== height || $[138] !== isPlaceholder || $[139] !== isPreview || $[140] !== mediaShouldLoad || $[141] !== muted || $[142] !== resolution || $[143] !== width) {
+    t58 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -272,9 +607,38 @@ function AudioScreen(_ref) {
       shouldLoad: mediaShouldLoad,
       withoutVideo: isPreview,
       className: styles.background
-    }) : null]
-  });
+    }) : null;
+    $[135] = background;
+    $[136] = backgroundPlaying;
+    $[137] = height;
+    $[138] = isPlaceholder;
+    $[139] = isPreview;
+    $[140] = mediaShouldLoad;
+    $[141] = muted;
+    $[142] = resolution;
+    $[143] = width;
+    $[144] = t58;
+  } else {
+    t58 = $[144];
+  }
+  let t59;
+  if ($[145] !== ready || $[146] !== t43 || $[147] !== t57 || $[148] !== t58) {
+    t59 = /*#__PURE__*/jsxs("div", {
+      className: t43,
+      "data-screen-ready": ready,
+      children: [t57, t58]
+    });
+    $[145] = ready;
+    $[146] = t43;
+    $[147] = t57;
+    $[148] = t58;
+    $[149] = t59;
+  } else {
+    t59 = $[149];
+  }
+  return t59;
 }
+function _temp() {}
 
 // import * as transforms from './transforms/index';
 
@@ -284,19 +648,13 @@ var definition = {
   group: {
     label: defineMessage({
       id: "+9akmg",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio and Video"
-      }]
+      defaultMessage: "Audio and Video"
     }),
     order: 5
   },
   title: defineMessage({
     id: "bhEaUt",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Audio"
-    }]
+    defaultMessage: "Audio"
   }),
   component: AudioScreen,
   layouts: ['middle'],
@@ -312,30 +670,21 @@ var definition = {
     },
     label: defineMessage({
       id: "169xnt",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio"
-      }]
+      defaultMessage: "Audio"
     })
   }, {
     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: {
@@ -350,10 +699,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-audio",
-    "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",
@@ -52,24 +53,24 @@
         "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",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-audio": "^0.4.71",
-        "@micromag/element-background": "^0.4.71",
-        "@micromag/element-closed-captions": "^0.4.71",
-        "@micromag/element-container": "^0.4.71",
-        "@micromag/element-footer": "^0.4.71",
-        "@micromag/element-header": "^0.4.71",
-        "@micromag/element-layout": "^0.4.71",
-        "@micromag/transforms": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-audio": "^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-layout": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -79,6 +80,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }