@micromag/screen-video-360 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, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { ScreenElement, PlaceholderVideo360 } from '@micromag/core/components';
 import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext, useViewerContainer } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useTrackScreenMedia, useDevicePixelRatio, useActivityDetector, useDebounce, useAnimationFrame } 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, Fragment } from 'react/jsx-runtime';
 
 /**
  * Locale loader
@@ -503,129 +504,136 @@ function Video360Screen(_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.showVideo, isPreview || isStatic || isCapture)]),
-    "data-screen-ready": (isStatic || isCapture) && posterReady || ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, withVideoSphere ? /*#__PURE__*/React.createElement("div", {
-    ref: videoContainerRef,
-    className: styles.videoContainer,
-    style: {
-      width: resizedVideoWidth,
-      height: resizedVideoHeight,
-      left: resizedVideoLeft,
-      top: resizedVideoTop
-    }
-  }, /*#__PURE__*/React.createElement(Video, Object.assign({}, finalVideo, {
-    mediaRef: mediaRef,
-    className: styles.video,
-    paused: !current || !playing,
-    muted: muted,
-    withoutCors: true,
-    onReady: onVideoReady,
-    onPlay: onPlay,
-    onPause: onPause,
-    onTimeUpdate: onTimeUpdate,
-    onProgressStep: onProgressStep,
-    onDurationChange: onDurationChange,
-    onSeeked: onSeeked,
-    onEnded: onEnded,
-    onPosterLoaded: onPosterLoaded,
-    onPlayError: onPlayError,
-    setPlaying: setPlaying,
-    focusable: current && isView,
-    shouldLoad: mediaShouldLoad,
-    qualityStartLevel: currentQualityLevel,
-    onQualityLevelChange: setCurrentQualityLevel
-  }))) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
-  }, /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "video",
-    placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo360, {
-      className: styles.placeholder,
-      width: "100%",
-      height: "100%"
-    }),
-    emptyClassName: styles.empty,
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "oLtEu6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video 360"
-      }]
-    }),
-    isEmpty: !withVideoSphere
-  }, !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, header)) : null, withVideoSphere ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasRef,
-    className: styles.canvas
-  }), /*#__PURE__*/React.createElement("button", {
-    className: styles.canvasButton,
-    type: "button",
-    "aria-label": "canvas-interaction",
-    onPointerDown: onPointerDown,
-    onPointerMove: onPointerMove,
-    onPointerUp: onPointerUp,
-    tabIndex: current && isView ? null : '-1'
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: styles.videoContainer,
-    style: {
-      width: resizedVideoWidth,
-      height: resizedVideoHeight,
-      left: resizedVideoLeft,
-      top: resizedVideoTop
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    className: styles.video,
-    media: {
-      url: thumbnailUrl,
-      metadata: {
-        width: videoWidth,
-        height: videoHeight
-      }
-    },
-    width: resizedVideoWidth,
-    height: resizedVideoHeight,
-    resolution: resolution
-  }))), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    key: "bottom-content",
-    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
-    }
-  }, (closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, Object.assign({
-    className: styles.closedCaptions,
-    media: closedCaptions
-  }, captions, {
-    currentTime: currentTime
-  })) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, Object.assign({}, footerProps, {
-    className: styles.callToAction
-  })) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
+    "data-screen-ready": (isStatic || isCapture) && posterReady || ready,
+    children: [/*#__PURE__*/jsxs(Container, {
+      width: width,
+      height: height,
+      className: styles.content,
+      children: [withVideoSphere ? /*#__PURE__*/jsx("div", {
+        ref: videoContainerRef,
+        className: styles.videoContainer,
+        style: {
+          width: resizedVideoWidth,
+          height: resizedVideoHeight,
+          left: resizedVideoLeft,
+          top: resizedVideoTop
+        },
+        children: /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
+          mediaRef: mediaRef,
+          className: styles.video,
+          paused: !current || !playing,
+          muted: muted,
+          withoutCors: true,
+          onReady: onVideoReady,
+          onPlay: onPlay,
+          onPause: onPause,
+          onTimeUpdate: onTimeUpdate,
+          onProgressStep: onProgressStep,
+          onDurationChange: onDurationChange,
+          onSeeked: onSeeked,
+          onEnded: onEnded,
+          onPosterLoaded: onPosterLoaded,
+          onPlayError: onPlayError,
+          setPlaying: setPlaying,
+          focusable: current && isView,
+          shouldLoad: mediaShouldLoad,
+          qualityStartLevel: currentQualityLevel,
+          onQualityLevelChange: setCurrentQualityLevel
+        }))
+      }) : null, /*#__PURE__*/jsxs("div", {
+        className: styles.inner,
+        children: [/*#__PURE__*/jsxs(ScreenElement, {
+          placeholder: /*#__PURE__*/jsx(PlaceholderVideo360, {
+            className: styles.placeholder,
+            width: "100%",
+            height: "100%"
+          }),
+          emptyClassName: styles.empty,
+          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "oLtEu6",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Video 360"
+            }]
+          }),
+          isEmpty: !withVideoSphere,
+          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({}, header))
+          }, "header") : null, withVideoSphere ? /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx("canvas", {
+              ref: canvasRef,
+              className: styles.canvas
+            }), /*#__PURE__*/jsx("button", {
+              className: styles.canvasButton,
+              type: "button",
+              "aria-label": "canvas-interaction",
+              onPointerDown: onPointerDown,
+              onPointerMove: onPointerMove,
+              onPointerUp: onPointerUp,
+              tabIndex: current && isView ? null : '-1'
+            })]
+          }) : /*#__PURE__*/jsx("div", {
+            className: styles.videoContainer,
+            style: {
+              width: resizedVideoWidth,
+              height: resizedVideoHeight,
+              left: resizedVideoLeft,
+              top: resizedVideoTop
+            },
+            children: /*#__PURE__*/jsx(Image, {
+              className: styles.video,
+              media: {
+                url: thumbnailUrl,
+                metadata: {
+                  width: videoWidth,
+                  height: videoHeight
+                }
+              },
+              width: resizedVideoWidth,
+              height: resizedVideoHeight,
+              resolution: resolution
+            })
+          })]
+        }, "video"), !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: [(closedCaptions !== null || captions !== null) && !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-content") : null]
+      })]
+    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: mediaShouldLoad,
+      withoutVideo: isPreview,
+      className: styles.background
+    }) : null]
+  });
 }
 
 // import * as transforms from './transforms/index';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video-360",
-    "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",
@@ -81,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "d6772865be1ee3f2d19288ebfbf4b9b6860f4cd7",
+    "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
     "types": "es/index.d.ts"
 }