@micromag/viewer 0.3.173 → 0.3.179

package/lib/index.js

@@ -26,13 +26,13 @@ var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var core = require('@react-spring/core');
 var web = require('@react-spring/web');
+var faShare = require('@fortawesome/free-solid-svg-icons/faShare');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
+var ShareOptions = require('@micromag/element-share-options');
 var faCompress = require('@fortawesome/free-solid-svg-icons/faCompress');
 var faExpand = require('@fortawesome/free-solid-svg-icons/faExpand');
-var faShare = require('@fortawesome/free-solid-svg-icons/faShare');
 var Scroll = require('@micromag/element-scroll');
-var ShareOptions = require('@micromag/element-share-options');
 var faArrowLeft = require('@fortawesome/free-solid-svg-icons/faArrowLeft');
 var faArrowRight = require('@fortawesome/free-solid-svg-icons/faArrowRight');
 var faPause = require('@fortawesome/free-solid-svg-icons/faPause');
@@ -52,8 +52,8 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray)
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
-var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
+var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
 
 var routes = PropTypes__default["default"].shape({
@@ -242,11 +242,171 @@ function useScreenInteraction() {
   };
 }
 
-var styles$c = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
-
-var styles$b = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
+var styles$c = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
 
 var propTypes$h = {
+  url: PropTypes__default["default"].string,
+  title: PropTypes__default["default"].string,
+  opened: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  onShare: PropTypes__default["default"].func,
+  onCancel: PropTypes__default["default"].func
+};
+var defaultProps$h = {
+  url: null,
+  title: null,
+  opened: false,
+  className: null,
+  onShare: null,
+  onCancel: null
+};
+
+var ShareModal = function ShareModal(_ref) {
+  var _ref3;
+
+  var url = _ref.url,
+      title = _ref.title,
+      opened = _ref.opened,
+      className = _ref.className,
+      onShare = _ref.onShare,
+      onCancel = _ref.onCancel;
+  var modalRef = React.useRef();
+  var onDocumentClick = React.useCallback(function (e) {
+    var _ref2 = e || {},
+        target = _ref2.target;
+
+    if (!modalRef.current || modalRef.current.contains(target)) {
+      return;
+    }
+
+    onCancel();
+  }, [opened, onCancel]);
+  hooks.useDocumentEvent('click', onDocumentClick, opened);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$c.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$c.opened, opened), _ref3)]),
+    "aria-hidden": opened ? null : '-1'
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$c.modal,
+    ref: modalRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$c.header
+  }, /*#__PURE__*/React__default["default"].createElement("h2", {
+    className: styles$c.heading
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "oL4ueH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Share"
+    }]
+  })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: styles$c.close,
+    onClick: onCancel,
+    focusable: opened
+  }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
+    className: styles$c.closeIcon,
+    border: "none"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$c.content
+  }, /*#__PURE__*/React__default["default"].createElement(ShareOptions__default["default"], {
+    className: styles$c.shareOptions,
+    title: title,
+    url: url,
+    focusable: opened,
+    onShare: onShare,
+    onClose: onCancel
+  }))));
+};
+
+ShareModal.propTypes = propTypes$h;
+ShareModal.defaultProps = defaultProps$h;
+
+var styles$b = {"container":"micromag-viewer-partials-share-button-container"};
+
+var propTypes$g = {
+  title: PropTypes__default["default"].string,
+  url: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  buttonClassName: PropTypes__default["default"].string,
+  onShare: PropTypes__default["default"].func,
+  children: PropTypes__default["default"].node,
+  focusable: PropTypes__default["default"].bool
+};
+var defaultProps$g = {
+  title: null,
+  url: null,
+  className: null,
+  buttonClassName: null,
+  onShare: null,
+  children: null,
+  focusable: false
+};
+
+var ShareButton = function ShareButton(_ref) {
+  var title = _ref.title,
+      url = _ref.url,
+      className = _ref.className,
+      buttonClassName = _ref.buttonClassName,
+      onShare = _ref.onShare,
+      children = _ref.children,
+      focusable = _ref.focusable;
+  var intl = reactIntl.useIntl();
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      storyShareModalOpened = _useState2[0],
+      setStoryShareModalOpened = _useState2[1];
+
+  var onShareIconClick = React.useCallback(function () {
+    setStoryShareModalOpened(function (opened) {
+      return !opened;
+    });
+  }, [setStoryShareModalOpened, storyShareModalOpened]);
+  var onStoryShared = React.useCallback(function (type) {
+    setStoryShareModalOpened(false);
+
+    if (onShare !== null) {
+      onShare(type);
+    }
+  }, [setStoryShareModalOpened, onShare]);
+  var onStoryShareCanceled = React.useCallback(function () {
+    setStoryShareModalOpened(false);
+  }, [setStoryShareModalOpened]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
+    onClick: onShareIconClick,
+    title: intl.formatMessage({
+      id: "7tw6U2",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Share"
+      }]
+    }),
+    "aria-label": intl.formatMessage({
+      id: "7tw6U2",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Share"
+      }]
+    }),
+    focusable: focusable
+  }, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
+    className: styles$b.shareModal,
+    opened: storyShareModalOpened,
+    title: title,
+    url: url,
+    onShare: onStoryShared,
+    onCancel: onStoryShareCanceled
+  }));
+};
+
+ShareButton.propTypes = propTypes$g;
+ShareButton.defaultProps = defaultProps$g;
+
+var styles$a = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
+
+var propTypes$f = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   colors: PropTypes__default["default"].shape({
@@ -259,7 +419,7 @@ var propTypes$h = {
   onClick: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$h = {
+var defaultProps$f = {
   current: false,
   active: false,
   colors: null,
@@ -322,44 +482,44 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     });
   }, [playing, duration, currentTime, setSpringProps]);
   var inner = current && count > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$b.dots
+    className: styles$a.dots
   }, _toConsumableArray__default["default"](Array(count).keys()).map(function (i) {
     return /*#__PURE__*/React__default["default"].createElement("span", {
-      className: classNames__default["default"]([styles$b.dot, styles$b.subDot]),
+      className: classNames__default["default"]([styles$a.dot, styles$a.subDot]),
       style: {
         width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
         backgroundColor: active && i <= subIndex ? primary : secondary
       }
     });
   })) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$b.dot,
+    className: styles$a.dot,
     style: {
       backgroundColor: active ? primary : secondary
     }
   });
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: classNames__default["default"]([styles$b.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$b.active, current), _defineProperty__default["default"](_ref3, styles$b.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
+    className: classNames__default["default"]([styles$a.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$a.active, current), _defineProperty__default["default"](_ref3, styles$a.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: styles$b.button,
+    className: styles$a.button,
     onClick: onClick,
     tabIndex: "-1"
   }, inner));
 };
 
-ViewerMenuDot.propTypes = propTypes$h;
-ViewerMenuDot.defaultProps = defaultProps$h;
+ViewerMenuDot.propTypes = propTypes$f;
+ViewerMenuDot.defaultProps = defaultProps$f;
 
-var styles$a = {};
+var styles$9 = {};
 
-var propTypes$g = {
+var propTypes$e = {
   size: PropTypes__default["default"].number,
   spacing: PropTypes__default["default"].number,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$g = {
+var defaultProps$e = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -373,7 +533,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -391,13 +551,18 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$g;
-MenuIcon.defaultProps = defaultProps$g;
+MenuIcon.propTypes = propTypes$e;
+MenuIcon.defaultProps = defaultProps$e;
 
-var propTypes$f = {
+var styles$8 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
+
+var propTypes$d = {
   direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes__default["default"].bool,
+  title: PropTypes__default["default"].string,
   items: core$1.PropTypes.menuItems,
+  shareUrl: PropTypes__default["default"].string,
+  onShare: PropTypes__default["default"].func,
   onClickItem: PropTypes__default["default"].func,
   onClickMenu: PropTypes__default["default"].func,
   colors: PropTypes__default["default"].shape({
@@ -407,19 +572,24 @@ var propTypes$f = {
   closeable: PropTypes__default["default"].bool,
   withItemClick: PropTypes__default["default"].bool,
   withoutScreensMenu: PropTypes__default["default"].bool,
+  withoutShareMenu: PropTypes__default["default"].bool,
   onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$f = {
+var defaultProps$d = {
   direction: 'horizontal',
   withShadow: false,
+  title: null,
   items: [],
+  shareUrl: null,
+  onShare: null,
   onClickItem: null,
   onClickMenu: null,
   colors: null,
   closeable: false,
   withItemClick: false,
   withoutScreensMenu: false,
+  withoutShareMenu: false,
   onClose: null,
   className: null
 };
@@ -429,13 +599,17 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
 
   var direction = _ref.direction,
       withShadow = _ref.withShadow,
+      title = _ref.title,
       items = _ref.items,
+      shareUrl = _ref.shareUrl,
+      onShare = _ref.onShare,
       onClickItem = _ref.onClickItem,
       onClickMenu = _ref.onClickMenu,
       colors = _ref.colors,
       closeable = _ref.closeable,
       withItemClick = _ref.withItemClick,
       withoutScreensMenu = _ref.withoutScreensMenu,
+      withoutShareMenu = _ref.withoutShareMenu,
       onClose = _ref.onClose,
       className = _ref.className;
 
@@ -450,7 +624,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     return current;
   });
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$c.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$c.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref4, styles$c.withShadow, withShadow), _ref4)]),
+    className: classNames__default["default"]([styles$8.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$8.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref4, styles$8.withShadow, withShadow), _ref4)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -474,7 +648,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$c.items
+    className: styles$8.items
   }, items.map(function (item, index) {
     var _ref5 = item || {},
         _ref5$current = _ref5.current,
@@ -500,10 +674,21 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       },
       vertical: direction === 'vertical'
     });
-  }), !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$c.menu
+  }), !withoutShareMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
+    className: styles$8.menu
+  }, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
+    className: styles$8.shareButton,
+    buttonClassName: styles$8.menuButton,
+    onShare: onShare,
+    url: shareUrl,
+    title: title
+  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$8.icon,
+    icon: faShare.faShare
+  }))) : null, !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
+    className: styles$8.menu
   }, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
-    className: styles$c.menuIcon,
+    className: styles$8.menuIcon,
     color: primary
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
@@ -521,16 +706,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$c.menuButton,
+    className: styles$8.menuButton,
     onClick: onClickMenu
   })) : null, closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$c.closeButton,
+    className: styles$8.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: styles$c.closeButton,
+    className: styles$8.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -551,13 +736,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$f;
-ViewerMenuDots.defaultProps = defaultProps$f;
+ViewerMenuDots.propTypes = propTypes$d;
+ViewerMenuDots.defaultProps = defaultProps$d;
 
-var propTypes$e = {
+var propTypes$c = {
   className: PropTypes__default["default"].string
 };
-var defaultProps$e = {
+var defaultProps$c = {
   className: null
 };
 
@@ -574,170 +759,8 @@ var StackIcon = function StackIcon(_ref) {
   }));
 };
 
-StackIcon.propTypes = propTypes$e;
-StackIcon.defaultProps = defaultProps$e;
-
-var styles$9 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
-
-var propTypes$d = {
-  url: PropTypes__default["default"].string,
-  title: PropTypes__default["default"].string,
-  opened: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  onShare: PropTypes__default["default"].func,
-  onCancel: PropTypes__default["default"].func
-};
-var defaultProps$d = {
-  url: null,
-  title: null,
-  opened: false,
-  className: null,
-  onShare: null,
-  onCancel: null
-};
-
-var ShareModal = function ShareModal(_ref) {
-  var _ref3;
-
-  var url = _ref.url,
-      title = _ref.title,
-      opened = _ref.opened,
-      className = _ref.className,
-      onShare = _ref.onShare,
-      onCancel = _ref.onCancel;
-  var modalRef = React.useRef();
-  var onDocumentClick = React.useCallback(function (e) {
-    var _ref2 = e || {},
-        target = _ref2.target;
-
-    if (!modalRef.current || modalRef.current.contains(target)) {
-      return;
-    }
-
-    onCancel();
-  }, [opened, onCancel]);
-  hooks.useDocumentEvent('click', onDocumentClick, opened);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$9.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$9.opened, opened), _ref3)]),
-    "aria-hidden": opened ? null : '-1'
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.modal,
-    ref: modalRef
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.header
-  }, /*#__PURE__*/React__default["default"].createElement("h2", {
-    className: styles$9.heading
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "oL4ueH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Share"
-    }]
-  })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$9.close,
-    onClick: onCancel,
-    focusable: opened
-  }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
-    className: styles$9.closeIcon,
-    border: "none"
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.content
-  }, /*#__PURE__*/React__default["default"].createElement(ShareOptions__default["default"], {
-    className: styles$9.shareOptions,
-    title: title,
-    url: url,
-    focusable: opened,
-    onShare: onShare,
-    onClose: onCancel
-  }))));
-};
-
-ShareModal.propTypes = propTypes$d;
-ShareModal.defaultProps = defaultProps$d;
-
-var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
-
-var propTypes$c = {
-  title: PropTypes__default["default"].string,
-  url: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string,
-  buttonClassName: PropTypes__default["default"].string,
-  onShare: PropTypes__default["default"].func,
-  children: PropTypes__default["default"].node,
-  focusable: PropTypes__default["default"].bool
-};
-var defaultProps$c = {
-  title: null,
-  url: null,
-  className: null,
-  buttonClassName: null,
-  onShare: null,
-  children: null,
-  focusable: false
-};
-
-var ShareButton = function ShareButton(_ref) {
-  var title = _ref.title,
-      url = _ref.url,
-      className = _ref.className,
-      buttonClassName = _ref.buttonClassName,
-      onShare = _ref.onShare,
-      children = _ref.children,
-      focusable = _ref.focusable;
-  var intl = reactIntl.useIntl();
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      storyShareModalOpened = _useState2[0],
-      setStoryShareModalOpened = _useState2[1];
-
-  var onShareIconClick = React.useCallback(function () {
-    setStoryShareModalOpened(function (opened) {
-      return !opened;
-    });
-  }, [setStoryShareModalOpened, storyShareModalOpened]);
-  var onStoryShared = React.useCallback(function (type) {
-    setStoryShareModalOpened(false);
-
-    if (onShare !== null) {
-      onShare(type);
-    }
-  }, [setStoryShareModalOpened, onShare]);
-  var onStoryShareCanceled = React.useCallback(function () {
-    setStoryShareModalOpened(false);
-  }, [setStoryShareModalOpened]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
-    onClick: onShareIconClick,
-    title: intl.formatMessage({
-      id: "7tw6U2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Share"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      id: "7tw6U2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Share"
-      }]
-    }),
-    focusable: focusable
-  }, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
-    className: styles$8.shareModal,
-    opened: storyShareModalOpened,
-    title: title,
-    url: url,
-    onShare: onStoryShared,
-    onCancel: onStoryShareCanceled
-  }));
-};
-
-ShareButton.propTypes = propTypes$c;
-ShareButton.defaultProps = defaultProps$c;
+StackIcon.propTypes = propTypes$c;
+StackIcon.defaultProps = defaultProps$c;
 
 var styles$7 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
 
@@ -746,13 +769,11 @@ var propTypes$b = {
   screenSize: core$1.PropTypes.screenSize,
   menuWidth: PropTypes__default["default"].number,
   title: PropTypes__default["default"].string,
-  shareUrl: PropTypes__default["default"].string,
   items: core$1.PropTypes.menuItems,
   focusable: PropTypes__default["default"].bool,
   shouldLoad: PropTypes__default["default"].bool,
   onClickItem: PropTypes__default["default"].func,
   onClose: PropTypes__default["default"].func,
-  onShare: PropTypes__default["default"].func,
   maxThumbsWidth: PropTypes__default["default"].number,
   toggleFullscreen: PropTypes__default["default"].func,
   fullscreenActive: PropTypes__default["default"].bool,
@@ -764,13 +785,11 @@ var defaultProps$b = {
   screenSize: null,
   menuWidth: null,
   title: null,
-  shareUrl: null,
   items: [],
   focusable: true,
   shouldLoad: true,
   onClickItem: null,
   onClose: null,
-  onShare: null,
   maxThumbsWidth: 140,
   toggleFullscreen: null,
   fullscreenActive: false,
@@ -783,12 +802,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       screenSize = _ref.screenSize,
       menuWidth = _ref.menuWidth,
       title = _ref.title,
-      shareUrl = _ref.shareUrl,
       items = _ref.items,
       focusable = _ref.focusable,
       onClickItem = _ref.onClickItem,
       onClose = _ref.onClose,
-      onShare = _ref.onShare,
       maxThumbsWidth = _ref.maxThumbsWidth,
       toggleFullscreen = _ref.toggleFullscreen,
       fullscreenActive = _ref.fullscreenActive,
@@ -903,17 +920,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }, title), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$7.buttons,
     style: colorSecondaryColorStyle
-  }, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
-    className: styles$7.shareButton,
-    buttonClassName: styles$7.button,
-    onShare: onShare,
-    url: shareUrl,
-    title: title,
-    focusable: focusable
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$7.icon,
-    icon: faShare.faShare
-  })), fullscreenEnabled ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }, fullscreenEnabled ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
     className: styles$7.button,
     onClick: toggleFullscreen,
     title: intl.formatMessage({
@@ -1059,6 +1066,7 @@ var propTypes$a = {
   menuWidth: PropTypes__default["default"].number,
   withDotItemClick: PropTypes__default["default"].bool,
   withoutScreensMenu: PropTypes__default["default"].bool,
+  withoutShareMenu: PropTypes__default["default"].bool,
   onRequestOpen: PropTypes__default["default"].func,
   onRequestClose: PropTypes__default["default"].func,
   onClickItem: PropTypes__default["default"].func,
@@ -1084,6 +1092,7 @@ var defaultProps$a = {
   menuWidth: null,
   withDotItemClick: false,
   withoutScreensMenu: false,
+  withoutShareMenu: false,
   onRequestOpen: null,
   onRequestClose: null,
   onClickItem: null,
@@ -1108,6 +1117,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       menuWidth = _ref.menuWidth,
       withDotItemClick = _ref.withDotItemClick,
       withoutScreensMenu = _ref.withoutScreensMenu,
+      withoutShareMenu = _ref.withoutShareMenu,
       onRequestOpen = _ref.onRequestOpen,
       onRequestClose = _ref.onRequestClose,
       customOnClickItem = _ref.onClickItem,
@@ -1293,11 +1303,15 @@ var ViewerMenu = function ViewerMenu(_ref) {
     direction: "horizontal",
     withShadow: withShadow,
     items: items,
+    title: title,
+    shareUrl: shareUrl,
+    onShare: onClickShare,
     onClickItem: onClickItem,
     onClickMenu: onClickMenu,
     closeable: closeable,
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
+    withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
     className: styles$6.menuDots
   }))), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
@@ -1306,8 +1320,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     ref: menuPreviewContainerRef
   }, /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
-    title: title,
-    shareUrl: shareUrl,
     className: styles$6.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
@@ -1315,7 +1327,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     items: items,
     onClickItem: onClickItem,
     onClose: onClickClose,
-    onShare: onClickShare,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
@@ -1904,13 +1915,16 @@ var propTypes$2 = {
   neighborScreensMounted: PropTypes__default["default"].number,
   storyIsParsed: PropTypes__default["default"].bool,
   landscapeScreenMargin: PropTypes__default["default"].number,
+  landscapeSmallScreenScale: PropTypes__default["default"].number,
   withMetadata: PropTypes__default["default"].bool,
   withoutMenu: PropTypes__default["default"].bool,
   withoutScreensMenu: PropTypes__default["default"].bool,
+  withoutShareMenu: PropTypes__default["default"].bool,
   withoutMenuShadow: PropTypes__default["default"].bool,
   withoutFullscreen: PropTypes__default["default"].bool,
   withLandscapeSiblingsScreens: PropTypes__default["default"].bool,
   withNavigationHint: PropTypes__default["default"].bool,
+  withoutPlaybackControls: PropTypes__default["default"].bool,
   closeable: PropTypes__default["default"].bool,
   onClose: PropTypes__default["default"].func,
   onInteraction: PropTypes__default["default"].func,
@@ -1943,13 +1957,16 @@ var defaultProps$2 = {
   neighborScreensMounted: 1,
   storyIsParsed: false,
   landscapeScreenMargin: 20,
+  landscapeSmallScreenScale: 0.9,
   withMetadata: false,
   withoutMenu: false,
   withoutScreensMenu: false,
+  withoutShareMenu: false,
   withoutMenuShadow: false,
   withoutFullscreen: false,
   withLandscapeSiblingsScreens: false,
   withNavigationHint: false,
+  withoutPlaybackControls: false,
   menuIsScreenWidth: false,
   closeable: false,
   onClose: null,
@@ -1980,13 +1997,16 @@ var Viewer = function Viewer(_ref) {
       neighborScreensMounted = _ref.neighborScreensMounted,
       storyIsParsed = _ref.storyIsParsed,
       landscapeScreenMargin = _ref.landscapeScreenMargin,
+      landscapeSmallScreenScale = _ref.landscapeSmallScreenScale,
       withMetadata = _ref.withMetadata,
       withoutMenu = _ref.withoutMenu,
       withoutScreensMenu = _ref.withoutScreensMenu,
+      withoutShareMenu = _ref.withoutShareMenu,
       withoutMenuShadow = _ref.withoutMenuShadow;
       _ref.withoutFullscreen;
       var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
       withNavigationHint = _ref.withNavigationHint,
+      withoutPlaybackControls = _ref.withoutPlaybackControls,
       menuIsScreenWidth = _ref.menuIsScreenWidth,
       closeable = _ref.closeable,
       onCloseViewer = _ref.onClose,
@@ -2414,6 +2434,7 @@ var Viewer = function Viewer(_ref) {
     onRequestClose: onMenuRequestClose,
     withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
+    withoutShareMenu: withoutShareMenu,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: contentRef,
@@ -2427,7 +2448,21 @@ var Viewer = function Viewer(_ref) {
     var screenTransform = null;
 
     if (landscape) {
-      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenContainerWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
+      var max = i - screenIndex;
+      var distance = (screenContainerWidth + landscapeScreenMargin) * max; // Compensates for scaling
+
+      if (max !== 0) {
+        var halfMargin = screenContainerWidth * (1 - landscapeSmallScreenScale) / 2;
+        distance -= halfMargin * max;
+
+        if (max < -1) {
+          distance -= halfMargin * (max + 1);
+        } else if (max > 1) {
+          distance -= halfMargin * (max - 1);
+        }
+      }
+
+      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat(distance, "px - 50%)) scale(").concat(current ? 1 : landscapeSmallScreenScale, ")") : null;
     } else {
       screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
     }
@@ -2483,7 +2518,7 @@ var Viewer = function Viewer(_ref) {
       className: classNames__default["default"]([styles$6.navButton, styles$6.next]),
       onClick: gotoNextScreen
     }) : null));
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), !withoutPlaybackControls ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$6.playbackControls,
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2493,7 +2528,7 @@ var Viewer = function Viewer(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(PlaybackControls, {
     className: styles$6.controls
-  })))) : null, /*#__PURE__*/React__default["default"].createElement(WebViewContainer, {
+  }))) : null) : null, /*#__PURE__*/React__default["default"].createElement(WebViewContainer, {
     className: styles$6.webView,
     style: {
       maxWidth: Math.max(screenContainerWidth, 600)