@micromag/screen-image-360 0.3.541 → 0.3.569

package/es/index.js

@@ -456,7 +456,6 @@ var Image360Screen = function Image360Screen(_ref) {
 };
 Image360Screen.propTypes = propTypes;
 Image360Screen.defaultProps = defaultProps;
-var Image360Screen$1 = Image360Screen;
 
 // import * as transforms from './transforms/index';
 
@@ -480,7 +479,7 @@ var definition = {
       "value": "360 Video"
     }]
   }),
-  component: Image360Screen$1,
+  component: Image360Screen,
   layouts: ['full'],
   // transforms,
   fields: [{
@@ -548,4 +547,4 @@ var definition = {
   }]
 };
 
-export { Image360Screen$1 as Image360Screen, definition as default };
+export { Image360Screen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image-360",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,12 +30,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -62,15 +61,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-closed-captions": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-image": "^0.3.541",
-        "@micromag/element-video": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.569",
+        "@micromag/element-background": "^0.3.569",
+        "@micromag/element-closed-captions": "^0.3.569",
+        "@micromag/element-container": "^0.3.569",
+        "@micromag/element-footer": "^0.3.569",
+        "@micromag/element-header": "^0.3.569",
+        "@micromag/element-image": "^0.3.569",
+        "@micromag/element-video": "^0.3.569",
+        "@micromag/transforms": "^0.3.569",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -82,5 +81,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,556 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var size = require('@folklore/size');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var Background = require('@micromag/element-background');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Image = require('@micromag/element-image');
-
-/**
- * Locale loader
- */
-var packageCache = null;
-var useThree = function useThree() {
-  // transport
-  var _useState = React.useState({
-      "package": packageCache
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    loadedPackage = _useState2[0]["package"],
-    setLoadedPackage = _useState2[1];
-  React.useEffect(function () {
-    var canceled = false;
-    if (loadedPackage !== null) {
-      return function () {
-        canceled = true;
-      };
-    }
-    import('three').then(function (_ref) {
-      var Scene = _ref.Scene,
-        PerspectiveCamera = _ref.PerspectiveCamera,
-        SphereBufferGeometry = _ref.SphereBufferGeometry,
-        VideoTexture = _ref.VideoTexture,
-        TextureLoader = _ref.TextureLoader,
-        MeshBasicMaterial = _ref.MeshBasicMaterial,
-        Mesh = _ref.Mesh,
-        WebGLRenderer = _ref.WebGLRenderer,
-        MathUtils = _ref.MathUtils;
-      packageCache = {
-        Scene: Scene,
-        PerspectiveCamera: PerspectiveCamera,
-        SphereBufferGeometry: SphereBufferGeometry,
-        VideoTexture: VideoTexture,
-        TextureLoader: TextureLoader,
-        MeshBasicMaterial: MeshBasicMaterial,
-        Mesh: Mesh,
-        WebGLRenderer: WebGLRenderer,
-        MathUtils: MathUtils
-      };
-      if (!canceled) {
-        setLoadedPackage({
-          "package": packageCache
-        });
-      }
-    });
-    return function () {
-      canceled = true;
-    };
-  }, [loadedPackage, setLoadedPackage]);
-  return loadedPackage;
-};
-
-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.oneOf(['full']),
-  image: core.PropTypes.imageMedia,
-  background: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  type: PropTypes.string,
-  spacing: PropTypes.number,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'full',
-  image: null,
-  background: null,
-  header: null,
-  footer: null,
-  current: true,
-  active: true,
-  type: null,
-  spacing: 20,
-  className: null
-};
-var Image360Screen = function Image360Screen(_ref) {
-  _ref.layout;
-    var image = _ref.image,
-    background = _ref.background,
-    header = _ref.header,
-    footer = _ref.footer,
-    current = _ref.current,
-    active = _ref.active,
-    type = _ref.type,
-    spacing = _ref.spacing,
-    className = _ref.className;
-  var THREE = useThree();
-  var trackScreenEvent = hooks.useTrackScreenEvent(type);
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    landscape = _useScreenSize.landscape,
-    resolution = _useScreenSize.resolution;
-  var _useViewerNavigation = contexts.useViewerNavigation(),
-    gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
-    gotoNextScreen = _useViewerNavigation.gotoNextScreen;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  var canvasContainerRef = React.useRef();
-
-  // ------------------------------------
-
-  var hasMedia = image !== null;
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var _useState = React.useState(!hasMedia),
-    _useState2 = _slicedToArray(_useState, 2),
-    ready = _useState2[0],
-    setReady = _useState2[1];
-  var _ref2 = image || {},
-    _ref2$metadata = _ref2.metadata,
-    imageMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
-    _ref2$url = _ref2.url,
-    imageUrl = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$thumbnail_url = _ref2.thumbnail_url,
-    thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
-  var hasMediaUrl = imageUrl !== null;
-  var _ref3 = imageMetadata || {},
-    _ref3$width = _ref3.width,
-    imageWidth = _ref3$width === void 0 ? 0 : _ref3$width,
-    _ref3$height = _ref3.height,
-    imageHeight = _ref3$height === void 0 ? 0 : _ref3$height;
-  var hasThumbnail = thumbnailUrl !== null;
-  var _useState3 = React.useState(!hasThumbnail),
-    _useState4 = _slicedToArray(_useState3, 2),
-    posterReady = _useState4[0],
-    setPosterReady = _useState4[1];
-  var withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
-  var _getSizeWithinBounds = size.getSizeWithinBounds(imageWidth, imageHeight, width, height, {
-      cover: true
-    }),
-    resizedImageWidth = _getSizeWithinBounds.width,
-    resizedImageHeight = _getSizeWithinBounds.height;
-  var resizedImageLeft = -(resizedImageWidth - width) / 2;
-  var resizedImageTop = -(resizedImageHeight - height) / 2;
-  React.useEffect(function () {
-    setReady(!hasMediaUrl);
-  }, [imageUrl, hasMediaUrl, setReady]);
-  React.useEffect(function () {
-    setPosterReady(!hasThumbnail);
-  }, [thumbnailUrl, hasThumbnail, setPosterReady]);
-
-  // 3D layer  --------------------------
-
-  var canvasRef = React.useRef(null);
-  var camera = React.useRef(null);
-  var scene = React.useRef(null);
-  var renderer = React.useRef(null);
-  var lon = React.useRef(0);
-  var lat = React.useRef(0);
-  var phi = React.useRef(0);
-  var theta = React.useRef(0);
-  // const distance = useRef(50);
-  var pointerDown = React.useRef(false);
-  var pointerDownX = React.useRef(0);
-  var pointerDownY = React.useRef(0);
-  var pointerLon = React.useRef(0);
-  var pointerLat = React.useRef(0);
-
-  // render 3D frame
-
-  var render3D = React.useCallback(function () {
-    if (THREE === null) {
-      return;
-    }
-
-    // const { MathUtils } = THREE;
-    // lat.current = Math.max(-85, Math.min(85, lat.current));
-    // phi.current = MathUtils.degToRad(90 - lat.current);
-    // theta.current = MathUtils.degToRad(lon.current);
-
-    // camera.current.position.x =
-    //     distance.current * Math.sin(phi.current) * Math.cos(theta.current);
-    // camera.current.position.y = distance.current * Math.cos(phi.current);
-    // camera.current.position.z =
-    //     distance.current * Math.sin(phi.current) * Math.sin(theta.current);
-
-    // camera.current.lookAt(0, 0, 0);
-
-    lat.current = Math.max(-85, Math.min(85, lat.current));
-    phi.current = THREE.MathUtils.degToRad(90 - lat.current);
-    theta.current = THREE.MathUtils.degToRad(lon.current);
-    var x = 500 * Math.sin(phi.current) * Math.cos(theta.current);
-    var y = 500 * Math.cos(phi.current);
-    var z = 500 * Math.sin(phi.current) * Math.sin(theta.current);
-    camera.current.lookAt(x, y, z);
-    renderer.current.render(scene.current, camera.current);
-  }, [THREE]);
-
-  // Init 3D layer
-
-  React.useEffect(function () {
-    if (THREE !== null && hasMediaUrl && withSphere) {
-      var Scene = THREE.Scene,
-        PerspectiveCamera = THREE.PerspectiveCamera,
-        SphereBufferGeometry = THREE.SphereBufferGeometry,
-        MeshBasicMaterial = THREE.MeshBasicMaterial,
-        Mesh = THREE.Mesh,
-        WebGLRenderer = THREE.WebGLRenderer,
-        TextureLoader = THREE.TextureLoader;
-      var _canvasRef$current = canvasRef.current,
-        canvasWidth = _canvasRef$current.offsetWidth,
-        canvasHeight = _canvasRef$current.offsetHeight;
-      camera.current = new PerspectiveCamera(50, canvasWidth / canvasHeight, 1, 1100);
-      scene.current = new Scene();
-      var geometry = new SphereBufferGeometry(500, 60, 40, 0, Math.PI * 2, Math.PI / 3, Math.PI / 3);
-      geometry.scale(-1, 1, 1);
-      var texture = new TextureLoader().load(imageUrl);
-      var material = new MeshBasicMaterial({
-        map: texture
-      });
-      var mesh = new Mesh(geometry, material);
-      scene.current.add(mesh);
-      renderer.current = new WebGLRenderer({
-        canvas: canvasRef.current
-      });
-      renderer.current.setPixelRatio(typeof window !== 'undefined' ? window.devicePixelRatio : 1);
-      renderer.current.setSize(canvasWidth, canvasHeight);
-      render3D();
-    }
-    return function () {
-      if (withSphere) {
-        camera.current = null;
-        scene.current = null;
-        renderer.current = null;
-      }
-    };
-  }, [hasMediaUrl, withSphere, render3D, THREE]);
-  hooks.useAnimationFrame(render3D, {
-    disabled: !withSphere || THREE === null
-  });
-
-  // Resize 3D layer
-
-  React.useEffect(function () {
-    if (camera.current !== null && renderer.current !== null) {
-      camera.current.aspect = width / height;
-      camera.current.updateProjectionMatrix();
-      renderer.current.setSize(width, height);
-    }
-  }, [width, height]);
-
-  // Pointer interaction
-  var togglePlayTimeout = React.useRef(null);
-  var onPointerDown = React.useCallback(function (e) {
-    pointerDown.current = true;
-    pointerDownX.current = e.clientX;
-    pointerDownY.current = e.clientY;
-    pointerLon.current = lon.current;
-    pointerLat.current = lat.current;
-  }, []);
-  var pixelsMoved = React.useRef(0);
-  var lastPointerClient = React.useRef(null);
-  var pixelsMovedTracked = React.useRef(false);
-  var onPointerMove = React.useCallback(function (e) {
-    if (pointerDown.current) {
-      var _ref4 = e || {},
-        _ref4$clientX = _ref4.clientX,
-        clientX = _ref4$clientX === void 0 ? null : _ref4$clientX,
-        _ref4$clientY = _ref4.clientY,
-        clientY = _ref4$clientY === void 0 ? null : _ref4$clientY;
-      var downDeltaX = pointerDownX.current - clientX;
-      var downDeltaY = pointerDownY.current - clientY;
-      lon.current = downDeltaX * 0.2 + pointerLon.current;
-      lat.current = downDeltaY * 0.2 + pointerLat.current;
-      var _ref5 = lastPointerClient.current || {},
-        _ref5$x = _ref5.x,
-        lastX = _ref5$x === void 0 ? clientX : _ref5$x,
-        _ref5$y = _ref5.y,
-        lastY = _ref5$y === void 0 ? clientY : _ref5$y;
-      var deltaX = Math.abs(lastX - clientX) || 0;
-      var deltaY = Math.abs(lastY - clientY) || 0;
-      pixelsMoved.current += deltaX + deltaY;
-      if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
-        trackScreenEvent('drag_sphere');
-        pixelsMovedTracked.current = true;
-      }
-      lastPointerClient.current = {
-        x: clientX,
-        y: clientY
-      };
-      if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
-        if (togglePlayTimeout.current !== null) {
-          clearTimeout(togglePlayTimeout.current);
-          togglePlayTimeout.current = null;
-        }
-      }
-    }
-  }, [width, height, trackScreenEvent]);
-  var onPointerUp = React.useCallback(function (e) {
-    var canvasContainer = canvasContainerRef.current;
-    if (pointerDown.current && canvasContainer !== null) {
-      var distX = Math.abs(pointerDownX.current - e.clientX);
-      var distY = Math.abs(pointerDownY.current - e.clientY);
-      var pixelsMovedTolerance = 3;
-      var tapNextScreenWidthPercent = 0.5;
-      var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
-      var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
-      if (validNavigateTap) {
-        var _canvasContainer$getB = canvasContainer.getBoundingClientRect(),
-          _canvasContainer$getB2 = _canvasContainer$getB.left,
-          containerX = _canvasContainer$getB2 === void 0 ? 0 : _canvasContainer$getB2,
-          containerWidth = _canvasContainer$getB.width;
-        var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
-        if (hasTappedLeft) {
-          if (gotoPreviousScreen !== null) {
-            gotoPreviousScreen();
-          }
-        } else if (gotoNextScreen !== null) {
-          gotoNextScreen();
-        }
-      }
-      if (togglePlayTimeout.current !== null) {
-        clearTimeout(togglePlayTimeout.current);
-        togglePlayTimeout.current = null;
-      }
-    }
-    pointerDown.current = false;
-  }, [gotoPreviousScreen, gotoNextScreen, landscape]);
-  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.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(components.ScreenElement, {
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderVideo360, {
-      className: styles.placeholder,
-      width: "100%",
-      height: "100%"
-    }),
-    emptyClassName: styles.empty,
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.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);
-};
-Image360Screen.propTypes = propTypes;
-Image360Screen.defaultProps = defaultProps;
-var Image360Screen$1 = Image360Screen;
-
-// import * as transforms from './transforms/index';
-
-var definition = {
-  id: 'video-360',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "+9akmg",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio and Video"
-      }]
-    }),
-    order: 5
-  },
-  title: reactIntl.defineMessage({
-    id: "GRVidW",
-    defaultMessage: [{
-      "type": 0,
-      "value": "360 Video"
-    }]
-  }),
-  component: Image360Screen$1,
-  layouts: ['full'],
-  // transforms,
-  fields: [{
-    name: 'video',
-    type: 'video-element',
-    theme: {
-      color: 'primary'
-    },
-    defaultValue: {
-      autoPlay: true
-    },
-    label: reactIntl.defineMessage({
-      id: "tvl2Zc",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-};
-
-exports.Image360Screen = Image360Screen$1;
-exports.default = definition;