@micromag/screen-video 0.4.48 → 0.4.50

package/es/index.js

@@ -4,7 +4,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+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';
@@ -16,6 +16,7 @@ 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';
 
 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"};
 
@@ -268,109 +269,115 @@ function VideoScreen(_ref) {
       setControlsSuggestPlay(true);
     }
   }, [isView, current, playing, hasVideoUrl, autoPlay, setPlaying, setControlsSuggestPlay]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)]),
-    "data-screen-ready": isStatic || isCapture || ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    key: "header",
-    className: styles.header,
-    style: {
-      paddingTop: spacing / 2,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    }
-  }, /*#__PURE__*/React.createElement(Header, Object.assign({
-    fade: current && !controlsVisible
-  }, header))) : null, /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "video",
-    placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
-      className: styles.placeholder
-    }, placeholderProps)),
-    empty: /*#__PURE__*/React.createElement("div", {
-      className: styles.emptyContainer
-    }, /*#__PURE__*/React.createElement(Empty, {
-      className: styles.empty
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "3ext9Q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
-    }))),
-    isEmpty: !hasVideoUrl
-  }, hasVideoUrl ? /*#__PURE__*/React.createElement("div", {
-    className: styles.videoContainer,
-    style: {
-      width: resizedVideoWidth,
-      height: resizedVideoHeight,
-      left: resizedVideoLeft,
-      top: resizedVideoTop
-    }
-  }, shouldDisplayPoster ? /*#__PURE__*/React.createElement(Image, {
-    className: styles.image,
-    media: finalThumbnail,
-    width: resizedVideoWidth,
-    height: resizedVideoHeight,
-    objectFit: {
-      fit: 'cover'
-    },
-    resolution: resolution,
-    shouldLoad: mediaShouldLoad
-  }) : /*#__PURE__*/React.createElement(Video, Object.assign({}, 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), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    key: "bottom-content",
-    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
-    }
-  }, (closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, Object.assign({
-    className: styles.closedCaptions,
-    media: closedCaptions // BW Compat
-  }, captions, {
-    currentTime: currentTime
-  })) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, footerProps) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview
-  }) : null);
+    "data-screen-ready": isStatic || isCapture || ready,
+    children: [/*#__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, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: mediaShouldLoad,
+      withoutVideo: isPreview
+    }) : null]
+  });
 }
 
 var definition = {

package/package.json

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