@micromag/screen-image-360 0.3.347 → 0.3.354

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-callToAction{bottom:0;left:0;position:absolute;width:100%}.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{-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-callToAction{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

@@ -10,9 +10,11 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderVideo360, Transitions } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenSize, useViewerNavigation, useViewerWebView, useViewerContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useAnimationFrame } from '@micromag/core/hooks';
+import { isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
-import CallToAction from '@micromag/element-call-to-action';
 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 _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -71,13 +73,14 @@ var useThree = function useThree() {
   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","callToAction":"micromag-screen-image-360-callToAction","showVideo":"micromag-screen-image-360-showVideo"};
+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","callToAction":"micromag-screen-image-360-callToAction","showVideo":"micromag-screen-image-360-showVideo"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['full']),
   image: PropTypes$1.imageMedia,
   background: PropTypes$1.backgroundElement,
-  callToAction: PropTypes$1.callToAction,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
@@ -89,7 +92,8 @@ var defaultProps = {
   layout: 'full',
   image: null,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -98,11 +102,12 @@ var defaultProps = {
   className: null
 };
 var Image360Screen = function Image360Screen(_ref) {
-  var _ref7;
+  var _ref6;
   _ref.layout;
     var image = _ref.image,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     transitions = _ref.transitions,
@@ -141,28 +146,33 @@ var Image360Screen = function Image360Screen(_ref) {
   // ------------------------------------
 
   var hasMedia = image !== null;
-  var _ref2 = callToAction || {},
-    _ref2$active = _ref2.active,
-    hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _useState = useState(!hasMedia),
     _useState2 = _slicedToArray(_useState, 2),
     ready = _useState2[0],
     setReady = _useState2[1];
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var _ref3 = image || {},
-    _ref3$metadata = _ref3.metadata,
-    imageMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata,
-    _ref3$url = _ref3.url,
-    imageUrl = _ref3$url === void 0 ? null : _ref3$url,
-    _ref3$thumbnail_url = _ref3.thumbnail_url,
-    thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
+  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 _ref4 = imageMetadata || {},
-    _ref4$width = _ref4.width,
-    imageWidth = _ref4$width === void 0 ? 0 : _ref4$width,
-    _ref4$height = _ref4.height,
-    imageHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+  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 = useState(!hasThumbnail),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -296,20 +306,20 @@ var Image360Screen = function Image360Screen(_ref) {
   var pixelsMovedTracked = useRef(false);
   var onPointerMove = useCallback(function (e) {
     if (pointerDown.current) {
-      var _ref5 = e || {},
-        _ref5$clientX = _ref5.clientX,
-        clientX = _ref5$clientX === void 0 ? null : _ref5$clientX,
-        _ref5$clientY = _ref5.clientY,
-        clientY = _ref5$clientY === void 0 ? null : _ref5$clientY;
+      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 _ref6 = lastPointerClient.current || {},
-        _ref6$x = _ref6.x,
-        lastX = _ref6$x === void 0 ? clientX : _ref6$x,
-        _ref6$y = _ref6.y,
-        lastY = _ref6$y === void 0 ? clientY : _ref6$y;
+      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;
@@ -359,10 +369,33 @@ var Image360Screen = function Image360Screen(_ref) {
     }
     pointerDown.current = false;
   }, [gotoPreviousScreen, gotoNextScreen, landscape]);
-
-  // Building elements ------------------
-
-  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),
+    "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", {
+    key: "header",
+    className: styles.header,
+    style: {
+      paddingTop: spacing,
+      paddingLeft: spacing,
+      paddingRight: spacing
+    }
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "video",
     placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo360, {
       className: styles.placeholder,
@@ -415,7 +448,7 @@ var Image360Screen = function Image360Screen(_ref) {
     height: resizedImageHeight,
     resolution: resolution,
     shouldLoad: mediaShouldLoad
-  })))), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+  })))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     key: "callToAction",
     className: styles.callToAction,
     style: {
@@ -425,30 +458,7 @@ var Image360Screen = function Image360Screen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: 0
     }
-  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    openWebView: openWebView
-  }))) : null];
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.showVideo, isPreview || isStatic || isCapture), _ref7)]),
-    "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
-  }, items)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,
@@ -538,17 +548,25 @@ var definition = {
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      boxStyle: 'cta',
-      label: {
-        textStyle: 'cta'
-      }
-    }
+    name: 'header',
+    type: 'header',
+    label: defineMessage({
+      id: "rhuDxI",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Header"
+      }]
+    })
   }, {
-    name: 'shareIncentive',
-    type: 'share-incentive'
+    name: 'footer',
+    type: 'footer',
+    label: defineMessage({
+      id: "g4nybp",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Footer"
+      }]
+    })
   }]
 };
 

package/lib/index.js

@@ -14,9 +14,11 @@ 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 CallToAction = require('@micromag/element-call-to-action');
 var Container = require('@micromag/element-container');
+var Footer = require('@micromag/element-footer');
+var Header = require('@micromag/element-header');
 var Image = require('@micromag/element-image');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -48,8 +50,9 @@ 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 CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 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);
@@ -107,13 +110,14 @@ var useThree = function useThree() {
   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","callToAction":"micromag-screen-image-360-callToAction","showVideo":"micromag-screen-image-360-showVideo"};
+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","callToAction":"micromag-screen-image-360-callToAction","showVideo":"micromag-screen-image-360-showVideo"};
 
 var propTypes = {
   layout: PropTypes__default["default"].oneOf(['full']),
   image: core.PropTypes.imageMedia,
   background: core.PropTypes.backgroundElement,
-  callToAction: core.PropTypes.callToAction,
+  header: core.PropTypes.header,
+  footer: core.PropTypes.footer,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
@@ -125,7 +129,8 @@ var defaultProps = {
   layout: 'full',
   image: null,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -134,11 +139,12 @@ var defaultProps = {
   className: null
 };
 var Image360Screen = function Image360Screen(_ref) {
-  var _ref7;
+  var _ref6;
   _ref.layout;
     var image = _ref.image,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     transitions = _ref.transitions,
@@ -177,28 +183,33 @@ var Image360Screen = function Image360Screen(_ref) {
   // ------------------------------------
 
   var hasMedia = image !== null;
-  var _ref2 = callToAction || {},
-    _ref2$active = _ref2.active,
-    hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
+  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__default["default"](_useState, 2),
     ready = _useState2[0],
     setReady = _useState2[1];
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var _ref3 = image || {},
-    _ref3$metadata = _ref3.metadata,
-    imageMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata,
-    _ref3$url = _ref3.url,
-    imageUrl = _ref3$url === void 0 ? null : _ref3$url,
-    _ref3$thumbnail_url = _ref3.thumbnail_url,
-    thumbnailUrl = _ref3$thumbnail_url === void 0 ? null : _ref3$thumbnail_url;
+  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 _ref4 = imageMetadata || {},
-    _ref4$width = _ref4.width,
-    imageWidth = _ref4$width === void 0 ? 0 : _ref4$width,
-    _ref4$height = _ref4.height,
-    imageHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+  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__default["default"](_useState3, 2),
@@ -332,20 +343,20 @@ var Image360Screen = function Image360Screen(_ref) {
   var pixelsMovedTracked = React.useRef(false);
   var onPointerMove = React.useCallback(function (e) {
     if (pointerDown.current) {
-      var _ref5 = e || {},
-        _ref5$clientX = _ref5.clientX,
-        clientX = _ref5$clientX === void 0 ? null : _ref5$clientX,
-        _ref5$clientY = _ref5.clientY,
-        clientY = _ref5$clientY === void 0 ? null : _ref5$clientY;
+      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 _ref6 = lastPointerClient.current || {},
-        _ref6$x = _ref6.x,
-        lastX = _ref6$x === void 0 ? clientX : _ref6$x,
-        _ref6$y = _ref6.y,
-        lastY = _ref6$y === void 0 ? clientY : _ref6$y;
+      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;
@@ -395,10 +406,33 @@ var Image360Screen = function Image360Screen(_ref) {
     }
     pointerDown.current = false;
   }, [gotoPreviousScreen, gotoNextScreen, landscape]);
-
-  // Building elements ------------------
-
-  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  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)]),
+    "data-screen-ready": (isStatic || isCapture) && posterReady || ready
+  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+    width: width,
+    height: height,
+    className: styles.content
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: canvasContainerRef,
+    className: styles.videoContainer,
+    style: {
+      width: resizedImageWidth,
+      height: resizedImageHeight,
+      left: resizedImageLeft,
+      top: resizedImageTop
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.inner
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "header",
+    className: styles.header,
+    style: {
+      paddingTop: spacing,
+      paddingLeft: spacing,
+      paddingRight: spacing
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "video",
     placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo360, {
       className: styles.placeholder,
@@ -451,7 +485,7 @@ var Image360Screen = function Image360Screen(_ref) {
     height: resizedImageHeight,
     resolution: resolution,
     shouldLoad: mediaShouldLoad
-  })))), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })))), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
     key: "callToAction",
     className: styles.callToAction,
     style: {
@@ -461,30 +495,7 @@ var Image360Screen = function Image360Screen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: 0
     }
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    openWebView: openWebView
-  }))) : null];
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.showVideo, isPreview || isStatic || isCapture), _ref7)]),
-    "data-screen-ready": (isStatic || isCapture) && posterReady || ready
-  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: canvasContainerRef,
-    className: styles.videoContainer,
-    style: {
-      width: resizedImageWidth,
-      height: resizedImageHeight,
-      left: resizedImageLeft,
-      top: resizedImageTop
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.inner
-  }, items)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
     width: width,
     height: height,
@@ -574,17 +585,25 @@ var definition = {
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      boxStyle: 'cta',
-      label: {
-        textStyle: 'cta'
-      }
-    }
+    name: 'header',
+    type: 'header',
+    label: reactIntl.defineMessage({
+      id: "rhuDxI",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Header"
+      }]
+    })
   }, {
-    name: 'shareIncentive',
-    type: 'share-incentive'
+    name: 'footer',
+    type: 'footer',
+    label: reactIntl.defineMessage({
+      id: "g4nybp",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Footer"
+      }]
+    })
   }]
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image-360",
-    "version": "0.3.347",
+    "version": "0.3.354",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.347",
-        "@micromag/element-background": "^0.3.347",
-        "@micromag/element-call-to-action": "^0.3.347",
-        "@micromag/element-closed-captions": "^0.3.347",
-        "@micromag/element-container": "^0.3.347",
-        "@micromag/element-image": "^0.3.347",
-        "@micromag/element-media-controls": "^0.3.347",
-        "@micromag/element-video": "^0.3.347",
-        "@micromag/transforms": "^0.3.347",
+        "@micromag/core": "^0.3.354",
+        "@micromag/element-background": "^0.3.354",
+        "@micromag/element-closed-captions": "^0.3.354",
+        "@micromag/element-container": "^0.3.354",
+        "@micromag/element-footer": "^0.3.354",
+        "@micromag/element-header": "^0.3.354",
+        "@micromag/element-image": "^0.3.354",
+        "@micromag/element-video": "^0.3.354",
+        "@micromag/transforms": "^0.3.354",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "63a7e46763ae34c4143f0aa29a4c9467126e7734"
+    "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
 }