@micromag/screen-image-360 0.4.48 → 0.4.50

package/es/index.js

@@ -1,9 +1,10 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 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 { useScreenRenderContext, useScreenSize, useViewerNavigation, useViewerWebView, useViewerContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDevicePixelRatio, useAnimationFrame } from '@micromag/core/hooks';
@@ -13,6 +14,7 @@ import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
 import Header from '@micromag/element-header';
 import Image from '@micromag/element-image';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 /**
  * Locale loader
@@ -347,99 +349,108 @@ function Image360Screen(_ref) {
     }
     pointerDown.current = false;
   }, [gotoPreviousScreen, gotoNextScreen, landscape]);
-  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
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: canvasContainerRef,
-    className: styles.videoContainer,
-    style: {
-      width: resizedImageWidth,
-      height: resizedImageHeight,
-      left: resizedImageLeft,
-      top: resizedImageTop
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: styles.header,
-    style: {
-      paddingTop: spacing / 2,
-      paddingLeft: spacing,
-      paddingRight: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo360, {
-      className: styles.placeholder,
-      width: "100%",
-      height: "100%"
-    }),
-    emptyClassName: styles.empty,
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "/YQ+xP",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image 360"
-      }]
-    }),
-    isEmpty: !withSphere
-  }, withSphere ? /*#__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: resizedImageWidth,
-      height: resizedImageHeight,
-      left: resizedImageLeft,
-      top: resizedImageTop
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    className: styles.video,
-    media: {
-      url: thumbnailUrl,
-      metadata: {
-        width: imageWidth,
-        height: imageHeight
-      }
-    },
-    width: resizedImageWidth,
-    height: resizedImageHeight,
-    resolution: resolution,
-    shouldLoad: mediaShouldLoad
-  }))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    className: styles.footer,
-    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
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    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: [/*#__PURE__*/jsx("div", {
+        ref: canvasContainerRef,
+        className: styles.videoContainer,
+        style: {
+          width: resizedImageWidth,
+          height: resizedImageHeight,
+          left: resizedImageLeft,
+          top: resizedImageTop
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: styles.inner,
+        children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+          className: styles.header,
+          style: {
+            paddingTop: spacing / 2,
+            paddingLeft: spacing,
+            paddingRight: spacing
+          },
+          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+        }) : null, /*#__PURE__*/jsx(ScreenElement, {
+          placeholder: /*#__PURE__*/jsx(PlaceholderVideo360, {
+            className: styles.placeholder,
+            width: "100%",
+            height: "100%"
+          }),
+          emptyClassName: styles.empty,
+          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "/YQ+xP",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Image 360"
+            }]
+          }),
+          isEmpty: !withSphere,
+          children: withSphere ? /*#__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: resizedImageWidth,
+              height: resizedImageHeight,
+              left: resizedImageLeft,
+              top: resizedImageTop
+            },
+            children: /*#__PURE__*/jsx(Image, {
+              className: styles.video,
+              media: {
+                url: thumbnailUrl,
+                metadata: {
+                  width: imageWidth,
+                  height: imageHeight
+                }
+              },
+              width: resizedImageWidth,
+              height: resizedImageHeight,
+              resolution: resolution,
+              shouldLoad: mediaShouldLoad
+            })
+          })
+        }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+          className: styles.footer,
+          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: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+        }) : null]
+      })]
+    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: mediaShouldLoad,
+      mediaRef: mediaRef,
+      withoutVideo: isPreview,
+      className: styles.background
+    }) : null]
+  });
 }
 
 // import * as transforms from './transforms/index';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image-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"
 }