@micromag/screen-image-360 0.3.423 → 0.3.430

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-image-360-container .micromag-screen-image-360-background,.micromag-screen-image-360-container .micromag-screen-image-360-canvas,.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton,.micromag-screen-image-360-container .micromag-screen-image-360-inner,.micromag-screen-image-360-container .micromag-screen-image-360-placeholder,.micromag-screen-image-360-container .micromag-screen-image-360-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-image-360-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-image-360-disabled.micromag-screen-image-360-container{overflow:hidden;pointer-events:none}.micromag-screen-image-360-hidden.micromag-screen-image-360-container{display:none;visibility:hidden}.micromag-screen-image-360-placeholder.micromag-screen-image-360-container .micromag-screen-image-360-content{padding:6px;position:relative}.micromag-screen-image-360-container .micromag-screen-image-360-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-image-360-container .micromag-screen-image-360-background{z-index:0}.micromag-screen-image-360-container .micromag-screen-image-360-content{z-index:1}.micromag-screen-image-360-container .micromag-screen-image-360-empty{height:100%;margin:0}.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-image-360-container .micromag-screen-image-360-videoContainer{position:absolute}.micromag-screen-image-360-container .micromag-screen-image-360-video{visibility:hidden}.micromag-screen-image-360-container .micromag-screen-image-360-video video{height:100%}.micromag-screen-image-360-container .micromag-screen-image-360-mediaControls{padding:10px 20px 20px}.micromag-screen-image-360-container .micromag-screen-image-360-placeholder{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center}.micromag-screen-image-360-container .micromag-screen-image-360-header{left:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-image-360-container .micromag-screen-image-360-footer{bottom:0;left:0;position:absolute;width:100%;z-index:1}.micromag-screen-image-360-container.micromag-screen-image-360-showVideo .micromag-screen-image-360-video{visibility:visible}
+.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-image-360-container .micromag-screen-image-360-background,.micromag-screen-image-360-container .micromag-screen-image-360-canvas,.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton,.micromag-screen-image-360-container .micromag-screen-image-360-inner,.micromag-screen-image-360-container .micromag-screen-image-360-placeholder,.micromag-screen-image-360-container .micromag-screen-image-360-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-image-360-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-image-360-disabled.micromag-screen-image-360-container{overflow:hidden;pointer-events:none}.micromag-screen-image-360-hidden.micromag-screen-image-360-container{display:none;visibility:hidden}.micromag-screen-image-360-placeholder.micromag-screen-image-360-container .micromag-screen-image-360-content{padding:6px;position:relative}.micromag-screen-image-360-container .micromag-screen-image-360-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-image-360-container .micromag-screen-image-360-background{z-index:0}.micromag-screen-image-360-container .micromag-screen-image-360-content{z-index:1}.micromag-screen-image-360-container .micromag-screen-image-360-empty{height:100%;margin:0}.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-image-360-container .micromag-screen-image-360-videoContainer{position:absolute}.micromag-screen-image-360-container .micromag-screen-image-360-video{visibility:hidden}.micromag-screen-image-360-container .micromag-screen-image-360-video video{height:100%}.micromag-screen-image-360-container .micromag-screen-image-360-mediaControls{padding:10px 20px 20px}.micromag-screen-image-360-container .micromag-screen-image-360-placeholder{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center}.micromag-screen-image-360-container .micromag-screen-image-360-header{left:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-image-360-container .micromag-screen-image-360-footer{bottom:0;left:0;position:absolute;width:100%;z-index:1}.micromag-screen-image-360-container.micromag-screen-image-360-showVideo .micromag-screen-image-360-video{visibility:visible}

package/es/index.js

@@ -102,7 +102,6 @@ var defaultProps = {
   className: null
 };
 var Image360Screen = function Image360Screen(_ref) {
-  var _ref6;
   _ref.layout;
     var image = _ref.image,
     background = _ref.background,
@@ -371,7 +370,7 @@ var Image360Screen = function Image360Screen(_ref) {
     pointerDown.current = false;
   }, [gotoPreviousScreen, gotoNextScreen, landscape]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.showVideo, isPreview || isStatic || isCapture)]),
     "data-screen-ready": (isStatic || isCapture) && posterReady || ready
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,

package/lib/index.js

@@ -24,39 +24,6 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var appleNews = require('@micromag/transforms/apple-news');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
-var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
-var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
-var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
-var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-
 /**
  * Locale loader
  */
@@ -66,7 +33,7 @@ var useThree = function useThree() {
   var _useState = React.useState({
       "package": packageCache
     }),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     loadedPackage = _useState2[0]["package"],
     setLoadedPackage = _useState2[1];
   React.useEffect(function () {
@@ -76,7 +43,7 @@ var useThree = function useThree() {
         canceled = true;
       };
     }
-    Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('three')); }).then(function (_ref) {
+    import('three').then(function (_ref) {
       var Scene = _ref.Scene,
         PerspectiveCamera = _ref.PerspectiveCamera,
         SphereBufferGeometry = _ref.SphereBufferGeometry,
@@ -113,17 +80,17 @@ var useThree = function useThree() {
 var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","placeholder":"micromag-screen-image-360-placeholder","inner":"micromag-screen-image-360-inner","canvas":"micromag-screen-image-360-canvas","video":"micromag-screen-image-360-video","background":"micromag-screen-image-360-background","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","content":"micromag-screen-image-360-content","empty":"micromag-screen-image-360-empty","videoContainer":"micromag-screen-image-360-videoContainer","mediaControls":"micromag-screen-image-360-mediaControls","header":"micromag-screen-image-360-header","footer":"micromag-screen-image-360-footer","showVideo":"micromag-screen-image-360-showVideo"};
 
 var propTypes = {
-  layout: PropTypes__default["default"].oneOf(['full']),
+  layout: PropTypes.oneOf(['full']),
   image: core.PropTypes.imageMedia,
   background: core.PropTypes.backgroundElement,
   header: core.PropTypes.header,
   footer: core.PropTypes.footer,
-  current: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
   transitions: core.PropTypes.transitions,
-  type: PropTypes__default["default"].string,
-  spacing: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string
+  type: PropTypes.string,
+  spacing: PropTypes.number,
+  className: PropTypes.string
 };
 var defaultProps = {
   layout: 'full',
@@ -139,7 +106,6 @@ var defaultProps = {
   className: null
 };
 var Image360Screen = function Image360Screen(_ref) {
-  var _ref6;
   _ref.layout;
     var image = _ref.image,
     background = _ref.background,
@@ -192,7 +158,7 @@ var Image360Screen = function Image360Screen(_ref) {
     isPreview: isPreview
   });
   var _useState = React.useState(!hasMedia),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     ready = _useState2[0],
     setReady = _useState2[1];
   var transitionPlaying = current && ready;
@@ -212,7 +178,7 @@ var Image360Screen = function Image360Screen(_ref) {
     imageHeight = _ref3$height === void 0 ? 0 : _ref3$height;
   var hasThumbnail = thumbnailUrl !== null;
   var _useState3 = React.useState(!hasThumbnail),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     posterReady = _useState4[0],
     setPosterReady = _useState4[1];
   var withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
@@ -407,14 +373,14 @@ var Image360Screen = function Image360Screen(_ref) {
     }
     pointerDown.current = false;
   }, [gotoPreviousScreen, gotoNextScreen, landscape]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.showVideo, isPreview || isStatic || isCapture)]),
     "data-screen-ready": (isStatic || isCapture) && posterReady || ready
-  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+  }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
     className: styles.content
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: canvasContainerRef,
     className: styles.videoContainer,
     style: {
@@ -423,23 +389,23 @@ var Image360Screen = function Image360Screen(_ref) {
       left: resizedImageLeft,
       top: resizedImageTop
     }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles.inner
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
     className: styles.header,
     style: {
       paddingTop: spacing / 2,
       paddingLeft: spacing,
       paddingRight: spacing
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
-    placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo360, {
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
+    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderVideo360, {
       className: styles.placeholder,
       width: "100%",
       height: "100%"
     }),
     emptyClassName: styles.empty,
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "/YQ+xP",
       defaultMessage: [{
         "type": 0,
@@ -447,15 +413,15 @@ var Image360Screen = function Image360Screen(_ref) {
       }]
     }),
     isEmpty: !withSphere
-  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
+  }, /*#__PURE__*/React.createElement(components.Transitions, {
     playing: transitionPlaying,
     transitions: transitions,
     disabled: transitionDisabled,
     fullscreen: true
-  }, withSphere ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("canvas", {
+  }, withSphere ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
     ref: canvasRef,
     className: styles.canvas
-  }), /*#__PURE__*/React__default["default"].createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     className: styles.canvasButton,
     type: "button",
     "aria-label": "canvas-interaction",
@@ -463,7 +429,7 @@ var Image360Screen = function Image360Screen(_ref) {
     onPointerMove: onPointerMove,
     onPointerUp: onPointerUp,
     tabIndex: current && isView ? null : '-1'
-  })) : /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : /*#__PURE__*/React.createElement("div", {
     className: styles.videoContainer,
     style: {
       width: resizedImageWidth,
@@ -471,7 +437,7 @@ var Image360Screen = function Image360Screen(_ref) {
       left: resizedImageLeft,
       top: resizedImageTop
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Image__default["default"], {
+  }, /*#__PURE__*/React.createElement(Image, {
     className: styles.video,
     media: {
       url: thumbnailUrl,
@@ -484,7 +450,7 @@ var Image360Screen = function Image360Screen(_ref) {
     height: resizedImageHeight,
     resolution: resolution,
     shouldLoad: mediaShouldLoad
-  })))), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     className: styles.footer,
     style: {
       transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
@@ -493,7 +459,7 @@ var Image360Screen = function Image360Screen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: 0
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,
@@ -508,7 +474,7 @@ var Image360Screen = function Image360Screen(_ref) {
 };
 Image360Screen.propTypes = propTypes;
 Image360Screen.defaultProps = defaultProps;
-var Image360Screen$1 = /*#__PURE__*/React__default["default"].memo(Image360Screen);
+var Image360Screen$1 = /*#__PURE__*/React.memo(Image360Screen);
 
 var transform = function transform(newStory, _ref) {
   var video = _ref.video;
@@ -518,11 +484,11 @@ var transform = function transform(newStory, _ref) {
   var _Video = appleNews.Video(newStory, media),
     titleStory = _Video.story,
     titleComponent = _Video.component;
-  var _Container = appleNews.Container(titleStory, _toConsumableArray__default["default"](titleComponent ? [titleComponent] : [])),
+  var _Container = appleNews.Container(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
     containerStory = _Container.story,
     containerComponent = _Container.component;
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
-    components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
+  return _objectSpread(_objectSpread({}, containerStory), {}, {
+    components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
   });
 };
 
@@ -622,4 +588,4 @@ var definition = {
 };
 
 exports.Image360Screen = Image360Screen$1;
-exports["default"] = definition;
+exports.default = definition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image-360",
-    "version": "0.3.423",
+    "version": "0.3.430",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,6 +32,14 @@
     "license": "ISC",
     "main": "lib/index.js",
     "module": "es/index.js",
+    "style": "assets/css/styles.css",
+    "exports": {
+        ".": {
+            "require": "./lib/index.js",
+            "import": "./es/index.js"
+        },
+        "./assets/css/*.css": "./assets/css/*.css"
+    },
     "files": [
         "lib",
         "es",
@@ -51,15 +59,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.423",
-        "@micromag/element-background": "^0.3.423",
-        "@micromag/element-closed-captions": "^0.3.423",
-        "@micromag/element-container": "^0.3.423",
-        "@micromag/element-footer": "^0.3.423",
-        "@micromag/element-header": "^0.3.423",
-        "@micromag/element-image": "^0.3.423",
-        "@micromag/element-video": "^0.3.423",
-        "@micromag/transforms": "^0.3.423",
+        "@micromag/core": "^0.3.430",
+        "@micromag/element-background": "^0.3.430",
+        "@micromag/element-closed-captions": "^0.3.430",
+        "@micromag/element-container": "^0.3.430",
+        "@micromag/element-footer": "^0.3.430",
+        "@micromag/element-header": "^0.3.430",
+        "@micromag/element-image": "^0.3.430",
+        "@micromag/element-video": "^0.3.430",
+        "@micromag/transforms": "^0.3.430",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -72,5 +80,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "c02e69c23fd099d5684bc0b69e02f19825cecfd2"
+    "gitHead": "da790d76dba9d8e308d9f9c4e51d93a4a0e012a9"
 }