@micromag/screen-video 0.4.89 → 0.4.90-alpha.1

package/es/index.js

@@ -3,7 +3,7 @@ import { c } from 'react/compiler-runtime';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
 import { useState, useEffect } from 'react';
-import { PlaceholderVideo, Empty, ScreenElement } from '@micromag/core/components';
+import { 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';
@@ -16,10 +16,10 @@ import Image from '@micromag/element-image';
 import Video from '@micromag/element-video';
 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"};
+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","videoContainer":"micromag-screen-video-videoContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","video":"micromag-screen-video-video"};
 
 function VideoScreen(t0) {
-  const $ = c(112);
+  const $ = c(111);
   const {
     layout: t1,
     video: t2,
@@ -289,69 +289,55 @@ function VideoScreen(t0) {
   });
   const resizedVideoLeft = -(resizedVideoWidth - width) / 2;
   const resizedVideoTop = -(resizedVideoHeight - height) / 2;
+  if (!hasVideoUrl && ready) {
+    setReady(false);
+  }
   let t36;
-  if ($[16] !== fullscreen) {
-    t36 = fullscreen ? {
-      width: "100%",
-      height: "100%"
-    } : {
-      width: "100%"
+  if ($[16] !== setReady) {
+    t36 = () => {
+      setReady(true);
     };
-    $[16] = fullscreen;
+    $[16] = setReady;
     $[17] = t36;
   } else {
     t36 = $[17];
   }
-  const placeholderProps = t36;
-  if (!hasVideoUrl && ready) {
-    setReady(false);
-  }
+  const onVideoReady = t36;
   let t37;
-  if ($[18] !== setReady) {
+  if ($[18] !== autoPlay || $[19] !== current || $[20] !== hasVideoUrl || $[21] !== isView || $[22] !== playing || $[23] !== setControlsSuggestPlay || $[24] !== setPlaying) {
     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;
+    $[18] = autoPlay;
+    $[19] = current;
+    $[20] = hasVideoUrl;
+    $[21] = isView;
+    $[22] = playing;
+    $[23] = setControlsSuggestPlay;
+    $[24] = setPlaying;
+    $[25] = t37;
   } else {
-    t38 = $[27];
+    t37 = $[25];
   }
-  const onPlayError = t38;
-  let t39;
-  if ($[28] !== className || $[29] !== fullscreen) {
-    t39 = classNames([styles.container, className, {
+  const onPlayError = t37;
+  let t38;
+  if ($[26] !== className || $[27] !== fullscreen) {
+    t38 = classNames([styles.container, className, {
       [styles.fullscreen]: fullscreen
     }]);
-    $[28] = className;
-    $[29] = fullscreen;
-    $[30] = t39;
+    $[26] = className;
+    $[27] = fullscreen;
+    $[28] = t38;
   } else {
-    t39 = $[30];
+    t38 = $[28];
   }
-  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", {
+  const t39 = isStatic || isCapture || ready;
+  let t40;
+  if ($[29] !== controlsVisible || $[30] !== current || $[31] !== hasHeader || $[32] !== header || $[33] !== isPlaceholder || $[34] !== isPreview || $[35] !== spacing || $[36] !== viewerTopHeight) {
+    t40 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
       className: styles.header,
       style: {
         paddingTop: spacing / 2,
@@ -364,32 +350,35 @@ function VideoScreen(t0) {
         ...header
       })
     }, "header") : null;
-    $[31] = controlsVisible;
-    $[32] = current;
-    $[33] = hasHeader;
-    $[34] = header;
-    $[35] = isPlaceholder;
-    $[36] = isPreview;
-    $[37] = spacing;
-    $[38] = viewerTopHeight;
-    $[39] = t41;
+    $[29] = controlsVisible;
+    $[30] = current;
+    $[31] = hasHeader;
+    $[32] = header;
+    $[33] = isPlaceholder;
+    $[34] = isPreview;
+    $[35] = spacing;
+    $[36] = viewerTopHeight;
+    $[37] = t40;
   } else {
-    t41 = $[39];
+    t40 = $[37];
   }
-  let t42;
-  if ($[40] !== placeholderProps) {
-    t42 = /*#__PURE__*/jsx(PlaceholderVideo, {
-      className: styles.placeholder,
-      ...placeholderProps
-    });
-    $[40] = placeholderProps;
-    $[41] = t42;
+  const t41 = fullscreen ? "100%" : "50%";
+  const t42 = fullscreen ? "100%" : "50%";
+  let t43;
+  if ($[38] !== t41 || $[39] !== t42) {
+    t43 = {
+      width: t41,
+      height: t42
+    };
+    $[38] = t41;
+    $[39] = t42;
+    $[40] = t43;
   } else {
-    t42 = $[41];
+    t43 = $[40];
   }
-  let t43;
-  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-    t43 = /*#__PURE__*/jsx("div", {
+  let t44;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t44 = /*#__PURE__*/jsx("div", {
       className: styles.emptyContainer,
       children: /*#__PURE__*/jsx(Empty, {
         className: styles.empty,
@@ -399,14 +388,14 @@ function VideoScreen(t0) {
         })
       })
     });
-    $[42] = t43;
+    $[41] = t44;
   } else {
-    t43 = $[42];
+    t44 = $[41];
   }
-  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", {
+  const t45 = !hasVideoUrl;
+  let t46;
+  if ($[42] !== current || $[43] !== currentQualityLevel || $[44] !== customMediaRef || $[45] !== finalThumbnail || $[46] !== finalVideo || $[47] !== hasVideoUrl || $[48] !== isView || $[49] !== mediaRef || $[50] !== mediaShouldLoad || $[51] !== muted || $[52] !== onDurationChange || $[53] !== onEnded || $[54] !== onPause || $[55] !== onPlay || $[56] !== onPlayError || $[57] !== onProgressStep || $[58] !== onSeeked || $[59] !== onTimeUpdate || $[60] !== onVideoReady || $[61] !== resizedVideoHeight || $[62] !== resizedVideoLeft || $[63] !== resizedVideoTop || $[64] !== resizedVideoWidth || $[65] !== resolution || $[66] !== setCurrentQualityLevel || $[67] !== shouldDisplayPoster || $[68] !== videoPlaying) {
+    t46 = hasVideoUrl ? /*#__PURE__*/jsx("div", {
       className: styles.videoContainer,
       style: {
         width: resizedVideoWidth,
@@ -448,55 +437,57 @@ function VideoScreen(t0) {
         onQualityLevelChange: setCurrentQualityLevel
       })
     }) : null;
-    $[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;
+    $[42] = current;
+    $[43] = currentQualityLevel;
+    $[44] = customMediaRef;
+    $[45] = finalThumbnail;
+    $[46] = finalVideo;
+    $[47] = hasVideoUrl;
+    $[48] = isView;
+    $[49] = mediaRef;
+    $[50] = mediaShouldLoad;
+    $[51] = muted;
+    $[52] = onDurationChange;
+    $[53] = onEnded;
+    $[54] = onPause;
+    $[55] = onPlay;
+    $[56] = onPlayError;
+    $[57] = onProgressStep;
+    $[58] = onSeeked;
+    $[59] = onTimeUpdate;
+    $[60] = onVideoReady;
+    $[61] = resizedVideoHeight;
+    $[62] = resizedVideoLeft;
+    $[63] = resizedVideoTop;
+    $[64] = resizedVideoWidth;
+    $[65] = resolution;
+    $[66] = setCurrentQualityLevel;
+    $[67] = shouldDisplayPoster;
+    $[68] = videoPlaying;
+    $[69] = t46;
   } else {
-    t45 = $[70];
+    t46 = $[69];
   }
-  let t46;
-  if ($[71] !== t42 || $[72] !== t44 || $[73] !== t45) {
-    t46 = /*#__PURE__*/jsx(ScreenElement, {
-      placeholder: t42,
-      empty: t43,
-      isEmpty: t44,
-      children: t45
+  let t47;
+  if ($[70] !== t43 || $[71] !== t45 || $[72] !== t46) {
+    t47 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "video",
+      placeholderProps: t43,
+      placeholderClassName: "position-absolute top-50 start-50 translate-middle w-100",
+      empty: t44,
+      isEmpty: t45,
+      children: t46
     }, "video");
-    $[71] = t42;
-    $[72] = t44;
-    $[73] = t45;
-    $[74] = t46;
+    $[70] = t43;
+    $[71] = t45;
+    $[72] = t46;
+    $[73] = t47;
   } else {
-    t46 = $[74];
+    t47 = $[73];
   }
-  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", {
+  let t48;
+  if ($[74] !== captions || $[75] !== closedCaptions || $[76] !== current || $[77] !== currentTime || $[78] !== footerProps || $[79] !== hasFooter || $[80] !== isCapture || $[81] !== isPlaceholder || $[82] !== isPreview || $[83] !== isStatic || $[84] !== spacing || $[85] !== viewerBottomHeight || $[86] !== viewerBottomSidesWidth) {
+    t48 = !isPlaceholder ? /*#__PURE__*/jsxs("div", {
       className: styles.bottom,
       style: {
         transform: current && !isPreview ? `translate3d(0, -${viewerBottomHeight}px, 0)` : null,
@@ -514,54 +505,54 @@ function VideoScreen(t0) {
         ...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;
+    $[74] = captions;
+    $[75] = closedCaptions;
+    $[76] = current;
+    $[77] = currentTime;
+    $[78] = footerProps;
+    $[79] = hasFooter;
+    $[80] = isCapture;
+    $[81] = isPlaceholder;
+    $[82] = isPreview;
+    $[83] = isStatic;
+    $[84] = spacing;
+    $[85] = viewerBottomHeight;
+    $[86] = viewerBottomSidesWidth;
+    $[87] = t48;
   } else {
-    t47 = $[88];
+    t48 = $[87];
   }
-  let t48;
-  if ($[89] !== t41 || $[90] !== t46 || $[91] !== t47) {
-    t48 = /*#__PURE__*/jsxs("div", {
+  let t49;
+  if ($[88] !== t40 || $[89] !== t47 || $[90] !== t48) {
+    t49 = /*#__PURE__*/jsxs("div", {
       className: styles.inner,
-      children: [t41, t46, t47]
+      children: [t40, t47, t48]
     });
-    $[89] = t41;
-    $[90] = t46;
-    $[91] = t47;
-    $[92] = t48;
+    $[88] = t40;
+    $[89] = t47;
+    $[90] = t48;
+    $[91] = t49;
   } else {
-    t48 = $[92];
+    t49 = $[91];
   }
-  let t49;
-  if ($[93] !== height || $[94] !== t48 || $[95] !== width) {
-    t49 = /*#__PURE__*/jsx(Container, {
+  let t50;
+  if ($[92] !== height || $[93] !== t49 || $[94] !== width) {
+    t50 = /*#__PURE__*/jsx(Container, {
       width: width,
       height: height,
       className: styles.content,
-      children: t48
+      children: t49
     });
-    $[93] = height;
-    $[94] = t48;
-    $[95] = width;
-    $[96] = t49;
+    $[92] = height;
+    $[93] = t49;
+    $[94] = width;
+    $[95] = t50;
   } else {
-    t49 = $[96];
+    t50 = $[95];
   }
-  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, {
+  let t51;
+  if ($[96] !== background || $[97] !== backgroundPlaying || $[98] !== height || $[99] !== isPlaceholder || $[100] !== isPreview || $[101] !== mediaShouldLoad || $[102] !== muted || $[103] !== resolution || $[104] !== width) {
+    t51 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -571,35 +562,35 @@ function VideoScreen(t0) {
       shouldLoad: mediaShouldLoad,
       withoutVideo: isPreview
     }) : null;
-    $[97] = background;
-    $[98] = backgroundPlaying;
-    $[99] = height;
-    $[100] = isPlaceholder;
-    $[101] = isPreview;
-    $[102] = mediaShouldLoad;
-    $[103] = muted;
-    $[104] = resolution;
-    $[105] = width;
-    $[106] = t50;
+    $[96] = background;
+    $[97] = backgroundPlaying;
+    $[98] = height;
+    $[99] = isPlaceholder;
+    $[100] = isPreview;
+    $[101] = mediaShouldLoad;
+    $[102] = muted;
+    $[103] = resolution;
+    $[104] = width;
+    $[105] = t51;
   } else {
-    t50 = $[106];
+    t51 = $[105];
   }
-  let t51;
-  if ($[107] !== t39 || $[108] !== t40 || $[109] !== t49 || $[110] !== t50) {
-    t51 = /*#__PURE__*/jsxs("div", {
-      className: t39,
-      "data-screen-ready": t40,
-      children: [t49, t50]
+  let t52;
+  if ($[106] !== t38 || $[107] !== t39 || $[108] !== t50 || $[109] !== t51) {
+    t52 = /*#__PURE__*/jsxs("div", {
+      className: t38,
+      "data-screen-ready": t39,
+      children: [t50, t51]
     });
+    $[106] = t38;
     $[107] = t39;
-    $[108] = t40;
-    $[109] = t49;
-    $[110] = t50;
-    $[111] = t51;
+    $[108] = t50;
+    $[109] = t51;
+    $[110] = t52;
   } else {
-    t51 = $[111];
+    t52 = $[110];
   }
-  return t51;
+  return t52;
 }
 function _temp() {}
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.4.89",
+    "version": "0.4.90-alpha.1",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,15 +63,15 @@
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.4.88",
-        "@micromag/element-background": "^0.4.88",
-        "@micromag/element-closed-captions": "^0.4.88",
-        "@micromag/element-container": "^0.4.88",
-        "@micromag/element-footer": "^0.4.89",
-        "@micromag/element-header": "^0.4.88",
-        "@micromag/element-image": "^0.4.89",
-        "@micromag/element-video": "^0.4.88",
-        "@micromag/transforms": "^0.4.88",
+        "@micromag/core": "^0.4.90-alpha.1",
+        "@micromag/element-background": "^0.4.90-alpha.1",
+        "@micromag/element-closed-captions": "^0.4.90-alpha.1",
+        "@micromag/element-container": "^0.4.90-alpha.1",
+        "@micromag/element-footer": "^0.4.90-alpha.1",
+        "@micromag/element-header": "^0.4.90-alpha.1",
+        "@micromag/element-image": "^0.4.90-alpha.1",
+        "@micromag/element-video": "^0.4.90-alpha.1",
+        "@micromag/transforms": "^0.4.90-alpha.1",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b22ccb83a7c0679970a453b09e2be779ed68f839",
+    "gitHead": "a13dd2242ee733dc3b3663354783f0b4395f9926",
     "types": "es/index.d.ts"
 }