@micromag/viewer 0.3.173 → 0.3.179

package/es/index.js

@@ -15,20 +15,20 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useDrag, useGesture } from '@use-gesture/react';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
-import { useIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import EventEmitter from 'wolfy87-eventemitter';
 import { Button, Close, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
 import { useDocumentEvent, useDimensionObserver, useTrackEvent, useMediaProgress, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
 import { getStyleFromColor, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { useSpring, config } from '@react-spring/core';
 import { animated } from '@react-spring/web';
+import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ShareOptions from '@micromag/element-share-options';
 import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
-import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import Scroll from '@micromag/element-scroll';
-import ShareOptions from '@micromag/element-share-options';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
 import { faPause } from '@fortawesome/free-solid-svg-icons/faPause';
@@ -222,11 +222,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.string,
+  title: PropTypes.string,
+  opened: PropTypes.bool,
+  className: PropTypes.string,
+  onShare: PropTypes.func,
+  onCancel: PropTypes.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 = useRef();
+  var onDocumentClick = useCallback(function (e) {
+    var _ref2 = e || {},
+        target = _ref2.target;
+
+    if (!modalRef.current || modalRef.current.contains(target)) {
+      return;
+    }
+
+    onCancel();
+  }, [opened, onCancel]);
+  useDocumentEvent('click', onDocumentClick, opened);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$c.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$c.opened, opened), _ref3)]),
+    "aria-hidden": opened ? null : '-1'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$c.modal,
+    ref: modalRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$c.header
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$c.heading
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "oL4ueH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Share"
+    }]
+  })), /*#__PURE__*/React.createElement(Button, {
+    className: styles$c.close,
+    onClick: onCancel,
+    focusable: opened
+  }, /*#__PURE__*/React.createElement(Close, {
+    className: styles$c.closeIcon,
+    border: "none"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$c.content
+  }, /*#__PURE__*/React.createElement(ShareOptions, {
+    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.string,
+  url: PropTypes.string,
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  onShare: PropTypes.func,
+  children: PropTypes.node,
+  focusable: PropTypes.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 = useIntl();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      storyShareModalOpened = _useState2[0],
+      setStoryShareModalOpened = _useState2[1];
+
+  var onShareIconClick = useCallback(function () {
+    setStoryShareModalOpened(function (opened) {
+      return !opened;
+    });
+  }, [setStoryShareModalOpened, storyShareModalOpened]);
+  var onStoryShared = useCallback(function (type) {
+    setStoryShareModalOpened(false);
+
+    if (onShare !== null) {
+      onShare(type);
+    }
+  }, [setStoryShareModalOpened, onShare]);
+  var onStoryShareCanceled = useCallback(function () {
+    setStoryShareModalOpened(false);
+  }, [setStoryShareModalOpened]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames([_defineProperty({}, 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.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.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -239,7 +399,7 @@ var propTypes$h = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$h = {
+var defaultProps$f = {
   current: false,
   active: false,
   colors: null,
@@ -302,44 +462,44 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     });
   }, [playing, duration, currentTime, setSpringProps]);
   var inner = current && count > 1 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$b.dots
+    className: styles$a.dots
   }, _toConsumableArray(Array(count).keys()).map(function (i) {
     return /*#__PURE__*/React.createElement("span", {
-      className: classNames([styles$b.dot, styles$b.subDot]),
+      className: classNames([styles$a.dot, styles$a.subDot]),
       style: {
         width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
         backgroundColor: active && i <= subIndex ? primary : secondary
       }
     });
   })) : /*#__PURE__*/React.createElement("span", {
-    className: styles$b.dot,
+    className: styles$a.dot,
     style: {
       backgroundColor: active ? primary : secondary
     }
   });
   return /*#__PURE__*/React.createElement("li", {
-    className: classNames([styles$b.container, (_ref3 = {}, _defineProperty(_ref3, styles$b.active, current), _defineProperty(_ref3, styles$b.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    className: classNames([styles$a.container, (_ref3 = {}, _defineProperty(_ref3, styles$a.active, current), _defineProperty(_ref3, styles$a.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React.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.number,
   spacing: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$g = {
+var defaultProps$e = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -353,7 +513,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -371,13 +531,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.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
+  title: PropTypes.string,
   items: PropTypes$1.menuItems,
+  shareUrl: PropTypes.string,
+  onShare: PropTypes.func,
   onClickItem: PropTypes.func,
   onClickMenu: PropTypes.func,
   colors: PropTypes.shape({
@@ -387,19 +552,24 @@ var propTypes$f = {
   closeable: PropTypes.bool,
   withItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
+  withoutShareMenu: PropTypes.bool,
   onClose: PropTypes.func,
   className: PropTypes.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
 };
@@ -409,13 +579,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;
 
@@ -430,7 +604,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     return current;
   });
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$c.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$c.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$c.withShadow, withShadow), _ref4)]),
+    className: classNames([styles$8.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$8.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$8.withShadow, withShadow), _ref4)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -454,7 +628,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$c.items
+    className: styles$8.items
   }, items.map(function (item, index) {
     var _ref5 = item || {},
         _ref5$current = _ref5.current,
@@ -480,10 +654,21 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       },
       vertical: direction === 'vertical'
     });
-  }), !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
-    className: styles$c.menu
+  }), !withoutShareMenu ? /*#__PURE__*/React.createElement("li", {
+    className: styles$8.menu
+  }, /*#__PURE__*/React.createElement(ShareButton, {
+    className: styles$8.shareButton,
+    buttonClassName: styles$8.menuButton,
+    onShare: onShare,
+    url: shareUrl,
+    title: title
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: styles$8.icon,
+    icon: faShare
+  }))) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
+    className: styles$8.menu
   }, /*#__PURE__*/React.createElement(MenuIcon, {
-    className: styles$c.menuIcon,
+    className: styles$8.menuIcon,
     color: primary
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -501,16 +686,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$c.menuButton,
+    className: styles$8.menuButton,
     onClick: onClickMenu
   })) : null, closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$c.closeButton,
+    className: styles$8.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$c.closeButton,
+    className: styles$8.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -531,13 +716,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.string
 };
-var defaultProps$e = {
+var defaultProps$c = {
   className: null
 };
 
@@ -554,170 +739,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.string,
-  title: PropTypes.string,
-  opened: PropTypes.bool,
-  className: PropTypes.string,
-  onShare: PropTypes.func,
-  onCancel: PropTypes.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 = useRef();
-  var onDocumentClick = useCallback(function (e) {
-    var _ref2 = e || {},
-        target = _ref2.target;
-
-    if (!modalRef.current || modalRef.current.contains(target)) {
-      return;
-    }
-
-    onCancel();
-  }, [opened, onCancel]);
-  useDocumentEvent('click', onDocumentClick, opened);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$9.opened, opened), _ref3)]),
-    "aria-hidden": opened ? null : '-1'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.modal,
-    ref: modalRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.header
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$9.heading
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "oL4ueH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Share"
-    }]
-  })), /*#__PURE__*/React.createElement(Button, {
-    className: styles$9.close,
-    onClick: onCancel,
-    focusable: opened
-  }, /*#__PURE__*/React.createElement(Close, {
-    className: styles$9.closeIcon,
-    border: "none"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$9.content
-  }, /*#__PURE__*/React.createElement(ShareOptions, {
-    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.string,
-  url: PropTypes.string,
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  onShare: PropTypes.func,
-  children: PropTypes.node,
-  focusable: PropTypes.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 = useIntl();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      storyShareModalOpened = _useState2[0],
-      setStoryShareModalOpened = _useState2[1];
-
-  var onShareIconClick = useCallback(function () {
-    setStoryShareModalOpened(function (opened) {
-      return !opened;
-    });
-  }, [setStoryShareModalOpened, storyShareModalOpened]);
-  var onStoryShared = useCallback(function (type) {
-    setStoryShareModalOpened(false);
-
-    if (onShare !== null) {
-      onShare(type);
-    }
-  }, [setStoryShareModalOpened, onShare]);
-  var onStoryShareCanceled = useCallback(function () {
-    setStoryShareModalOpened(false);
-  }, [setStoryShareModalOpened]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames([_defineProperty({}, 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.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"};
 
@@ -726,13 +749,11 @@ var propTypes$b = {
   screenSize: PropTypes$1.screenSize,
   menuWidth: PropTypes.number,
   title: PropTypes.string,
-  shareUrl: PropTypes.string,
   items: PropTypes$1.menuItems,
   focusable: PropTypes.bool,
   shouldLoad: PropTypes.bool,
   onClickItem: PropTypes.func,
   onClose: PropTypes.func,
-  onShare: PropTypes.func,
   maxThumbsWidth: PropTypes.number,
   toggleFullscreen: PropTypes.func,
   fullscreenActive: PropTypes.bool,
@@ -744,13 +765,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,
@@ -763,12 +782,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,
@@ -883,17 +900,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }, title), /*#__PURE__*/React.createElement("div", {
     className: styles$7.buttons,
     style: colorSecondaryColorStyle
-  }, /*#__PURE__*/React.createElement(ShareButton, {
-    className: styles$7.shareButton,
-    buttonClassName: styles$7.button,
-    onShare: onShare,
-    url: shareUrl,
-    title: title,
-    focusable: focusable
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$7.icon,
-    icon: faShare
-  })), fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
+  }, fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
     className: styles$7.button,
     onClick: toggleFullscreen,
     title: intl.formatMessage({
@@ -1039,6 +1046,7 @@ var propTypes$a = {
   menuWidth: PropTypes.number,
   withDotItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
+  withoutShareMenu: PropTypes.bool,
   onRequestOpen: PropTypes.func,
   onRequestClose: PropTypes.func,
   onClickItem: PropTypes.func,
@@ -1064,6 +1072,7 @@ var defaultProps$a = {
   menuWidth: null,
   withDotItemClick: false,
   withoutScreensMenu: false,
+  withoutShareMenu: false,
   onRequestOpen: null,
   onRequestClose: null,
   onClickItem: null,
@@ -1088,6 +1097,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,
@@ -1273,11 +1283,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.createElement(animated.div, {
@@ -1286,8 +1300,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     ref: menuPreviewContainerRef
   }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
-    title: title,
-    shareUrl: shareUrl,
     className: styles$6.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
@@ -1295,7 +1307,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     items: items,
     onClickItem: onClickItem,
     onClose: onClickClose,
-    onShare: onClickShare,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
@@ -1884,13 +1895,16 @@ var propTypes$2 = {
   neighborScreensMounted: PropTypes.number,
   storyIsParsed: PropTypes.bool,
   landscapeScreenMargin: PropTypes.number,
+  landscapeSmallScreenScale: PropTypes.number,
   withMetadata: PropTypes.bool,
   withoutMenu: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
+  withoutShareMenu: PropTypes.bool,
   withoutMenuShadow: PropTypes.bool,
   withoutFullscreen: PropTypes.bool,
   withLandscapeSiblingsScreens: PropTypes.bool,
   withNavigationHint: PropTypes.bool,
+  withoutPlaybackControls: PropTypes.bool,
   closeable: PropTypes.bool,
   onClose: PropTypes.func,
   onInteraction: PropTypes.func,
@@ -1923,13 +1937,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,
@@ -1960,13 +1977,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,
@@ -2394,6 +2414,7 @@ var Viewer = function Viewer(_ref) {
     onRequestClose: onMenuRequestClose,
     withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
+    withoutShareMenu: withoutShareMenu,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     ref: contentRef,
@@ -2407,7 +2428,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%', ")");
     }
@@ -2463,7 +2498,7 @@ var Viewer = function Viewer(_ref) {
       className: classNames([styles$6.navButton, styles$6.next]),
       onClick: gotoNextScreen
     }) : null));
-  }), /*#__PURE__*/React.createElement("div", {
+  }), !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
     className: styles$6.playbackControls,
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React.createElement("div", {
@@ -2473,7 +2508,7 @@ var Viewer = function Viewer(_ref) {
     }
   }, /*#__PURE__*/React.createElement(PlaybackControls, {
     className: styles$6.controls
-  })))) : null, /*#__PURE__*/React.createElement(WebViewContainer, {
+  }))) : null) : null, /*#__PURE__*/React.createElement(WebViewContainer, {
     className: styles$6.webView,
     style: {
       maxWidth: Math.max(screenContainerWidth, 600)