@micromag/viewer 0.2.412 → 0.3.0

package/es/index.js

@@ -1,105 +1,314 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useRef, useCallback, useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { Switch, Route, MemoryRouter } from 'react-router';
 import { BrowserRouter } from 'react-router-dom';
-import { ScreensProvider } from '@micromag/screens';
-import { IntlProvider } from '@micromag/intl';
-import fieldsManager from '@micromag/fields/manager';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, UserInteractionProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
+import { ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, UserInteractionProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
+import fieldsManager from '@micromag/fields/manager';
+import { IntlProvider } from '@micromag/intl';
+import { ScreensProvider } from '@micromag/screens';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { useSpring, config } from '@react-spring/core';
-import { animated } from '@react-spring/web';
-import { useDrag } from '@use-gesture/react';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { useIntl, FormattedMessage } from 'react-intl';
-import { Screen, Button, ScreenPreview, Meta, FontFaces } from '@micromag/core/components';
-import { useDocumentEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useTrackEvent, useScreenSizeFromElement, useResizeObserver, useFullscreen } from '@micromag/core/hooks';
+import { Button, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
+import { useDocumentEvent, useResizeObserver, useTrackEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
 import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
+import { useSpring, config } from '@react-spring/core';
+import { animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
 import { faTimes, faShare, faCompress, faExpand } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Scroll from '@micromag/element-scroll';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, EmailShareButton, EmailIcon } from 'react-share';
+import EventEmitter from 'wolfy87-eventemitter';
+
+var home = "/";
+var screen = "/:screen";
+var defaultRoutes = {
+  home: home,
+  screen: screen
+};
 
 var routes = PropTypes.shape({
   home: PropTypes.string.isRequired,
   screen: PropTypes.string.isRequired
 });
 
-var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+function useKeyboardShortcuts() {
+  var shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-var styles$5 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
 
-var propTypes$8 = {
-  screen: PropTypes$1.screenComponent,
-  renderContext: PropTypes$1.renderContext,
+  useEffect(function () {
+    var onKey = function onKey(e) {
+      if (['input', 'textarea'].reduce(function (foundMatch, match) {
+        return foundMatch || e.target.matches(match);
+      }, false)) {
+        return;
+      }
+
+      var key = e.key;
+      var lowercaseKey = key.toLowerCase();
+
+      if (typeof shortcuts[lowercaseKey] !== 'undefined') {
+        shortcuts[lowercaseKey]();
+      }
+    };
+
+    if (!disabled) {
+      window.addEventListener('keydown', onKey);
+    }
+
+    return function () {
+      if (!disabled) {
+        window.removeEventListener('keydown', onKey);
+      }
+    };
+  }, [disabled]);
+}
+
+function checkClickable(el) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var distance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+
+  var _ref = options || {},
+      _ref$maxDistance = _ref.maxDistance,
+      maxDistance = _ref$maxDistance === void 0 ? 5 : _ref$maxDistance,
+      _ref$tags = _ref.tags,
+      tags = _ref$tags === void 0 ? ['BUTTON', 'A', 'INPUT', 'TEXTAREA'] : _ref$tags;
+
+  var _ref2 = el || {},
+      _ref2$tagName = _ref2.tagName,
+      tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
+      _ref2$parentNode = _ref2.parentNode,
+      parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode;
+
+  if (tagName === 'BODY') {
+    return false;
+  }
+
+  if (tags.map(function (it) {
+    return it.toLowerCase();
+  }).indexOf(tagName.toLowerCase()) > -1) {
+    return true;
+  }
+
+  if (distance < maxDistance) {
+    return checkClickable(parentNode, options, distance + 1);
+  }
+
+  return false;
+}
+
+function useScreenInteraction() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      screens = _ref.screens,
+      screenId = _ref.screenId,
+      screenWidth = _ref.screenWidth,
+      _ref$isView = _ref.isView,
+      isView = _ref$isView === void 0 ? false : _ref$isView,
+      _ref$clickOnSiblings = _ref.clickOnSiblings,
+      clickOnSiblings = _ref$clickOnSiblings === void 0 ? false : _ref$clickOnSiblings,
+      _ref$nextScreenWidthP = _ref.nextScreenWidthPercent,
+      nextScreenWidthPercent = _ref$nextScreenWidthP === void 0 ? 0.5 : _ref$nextScreenWidthP,
+      _ref$eventsManager = _ref.eventsManager,
+      eventsManager = _ref$eventsManager === void 0 ? null : _ref$eventsManager,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+      _ref$onEnd = _ref.onEnd,
+      onEnd = _ref$onEnd === void 0 ? null : _ref$onEnd,
+      _ref$onChangeScreen = _ref.onChangeScreen,
+      onChangeScreen = _ref$onChangeScreen === void 0 ? null : _ref$onChangeScreen;
+
+  var _useState = useState(screens.reduce(function (map, _ref2) {
+    var id = _ref2.id;
+    return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, true));
+  }, {})),
+      _useState2 = _slicedToArray(_useState, 2),
+      screensInteractionEnabled = _useState2[0],
+      setScreensInteractionEnabled = _useState2[1];
+
+  var screenIndex = screens.findIndex(function (_ref3) {
+    var id = _ref3.id;
+    return id === screenId;
+  });
+  var _screensInteractionEn = screensInteractionEnabled[screenId],
+      currentScreenInteractionEnabled = _screensInteractionEn === void 0 ? true : _screensInteractionEn;
+  var updateInteraction = useCallback(function (newValue) {
+    var _screensInteractionEn2 = screensInteractionEnabled[screenId],
+        currentValue = _screensInteractionEn2 === void 0 ? true : _screensInteractionEn2;
+
+    if (currentValue !== newValue) {
+      setScreensInteractionEnabled(screens.reduce(function (map, _ref4) {
+        var id = _ref4.id;
+        return screenId === id ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, newValue)) : _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, typeof screensInteractionEnabled[id] === 'undefined' || screensInteractionEnabled[id] === true));
+      }, {}));
+    }
+  }, [screens, screenId, screensInteractionEnabled, setScreensInteractionEnabled]);
+  var enableInteraction = useCallback(function () {
+    return updateInteraction(true);
+  }, [updateInteraction]);
+  var disableInteraction = useCallback(function () {
+    return updateInteraction(false);
+  }, [updateInteraction]);
+  var onScreenClick = useCallback(function (e, index) {
+    if (onClick !== null) {
+      onClick(e, index);
+    }
+
+    var screensCount = screens.length;
+    var tappedCurrent = screenIndex === index;
+    eventsManager.emit('tap', e, index);
+
+    if (!isView && tappedCurrent || checkClickable(e.target) || tappedCurrent && !currentScreenInteractionEnabled) {
+      return;
+    }
+
+    var nextIndex = screenIndex;
+
+    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+        _e$currentTarget$getB2 = _e$currentTarget$getB.left,
+        contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2;
+
+    var tapX = e.clientX;
+    var hasTappedLeft = tappedCurrent ? tapX - contentX < screenWidth * (1 - nextScreenWidthPercent) : screenIndex > index;
+
+    if (hasTappedLeft) {
+      nextIndex = clickOnSiblings ? index : Math.max(0, screenIndex - 1);
+      eventsManager.emit('tap_previous', nextIndex);
+    } else {
+      nextIndex = clickOnSiblings ? index : Math.min(screensCount - 1, screenIndex + 1);
+      var isLastScreen = screenIndex === screensCount - 1;
+
+      if (isLastScreen && onEnd !== null) {
+        eventsManager.emit('tap_end');
+        onEnd();
+      } else {
+        eventsManager.emit('tap_next', nextIndex);
+      }
+    }
+
+    eventsManager.emit('change_screen', nextIndex);
+    onChangeScreen(nextIndex);
+  }, [screenWidth, screens, screenIndex, eventsManager, onClick, onEnd, onChangeScreen, screenIndex, screensInteractionEnabled, currentScreenInteractionEnabled, nextScreenWidthPercent, isView, clickOnSiblings]);
+  return {
+    onClick: onScreenClick,
+    currentScreenInteractionEnabled: currentScreenInteractionEnabled,
+    enableInteraction: enableInteraction,
+    disableInteraction: disableInteraction
+  };
+}
+
+var styles$7 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSibblings":"micromag-viewer-withSibblings","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+
+var styles$6 = {"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$5 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","vertical":"micromag-viewer-menus-menu-dot-vertical"};
+
+var propTypes$a = {
   current: PropTypes.bool,
   active: PropTypes.bool,
-  onPrevious: PropTypes.func,
-  onNext: PropTypes.func,
-  onEnableInteraction: PropTypes.func,
-  onDisableInteraction: PropTypes.func,
-  getMediaRef: PropTypes.func
+  colors: PropTypes.shape({
+    primary: PropTypes.string,
+    secondary: PropTypes.string
+  }),
+  vertical: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string
 };
-var defaultProps$8 = {
-  screen: null,
-  renderContext: null,
+var defaultProps$a = {
   current: false,
-  active: true,
-  onPrevious: null,
-  onNext: null,
-  onEnableInteraction: null,
-  onDisableInteraction: null,
-  getMediaRef: null
+  active: false,
+  colors: null,
+  vertical: false,
+  onClick: null,
+  className: null
 };
 
-var ViewerScreen = function ViewerScreen(_ref) {
-  var _ref2;
+var ViewerMenuDot = function ViewerMenuDot(_ref) {
+  var _ref3;
 
-  var screen = _ref.screen,
-      renderContext = _ref.renderContext,
+  var current = _ref.current,
       active = _ref.active,
-      current = _ref.current,
-      onPrevious = _ref.onPrevious,
-      onNext = _ref.onNext,
-      onEnableInteraction = _ref.onEnableInteraction,
-      onDisableInteraction = _ref.onDisableInteraction,
-      getMediaRef = _ref.getMediaRef;
-  return screen !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, (_ref2 = {}, _defineProperty(_ref2, styles$5.active, active), _defineProperty(_ref2, styles$5.current, current), _ref2)]),
-    "aria-hidden": current ? null : 'true'
-  }, /*#__PURE__*/React.createElement(Screen, {
-    screen: screen,
-    renderContext: renderContext,
-    active: active,
-    current: current,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnableInteraction: onEnableInteraction,
-    onDisableInteraction: onDisableInteraction,
-    getMediaRef: getMediaRef
-  })) : null;
-};
+      colors = _ref.colors,
+      vertical = _ref.vertical,
+      onClick = _ref.onClick,
+      className = _ref.className;
+  var currentTime = 0;
+  var duration = 1;
+  var playing = true;
 
-ViewerScreen.propTypes = propTypes$8;
-ViewerScreen.defaultProps = defaultProps$8;
+  var _ref2 = colors || {},
+      _ref2$primary = _ref2.primary,
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
+      _ref2$secondary = _ref2.secondary,
+      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary; // TODO: if approved animate progress
 
-var styles$4 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","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$3 = {};
+  var _useSpring = useSpring(function () {
+    return {
+      x: 0,
+      config: {
+        duration: 0
+      }
+    };
+  }),
+      _useSpring2 = _slicedToArray(_useSpring, 2);
+      _useSpring2[0];
+      var setSpringProps = _useSpring2[1];
 
-var propTypes$7 = {
+  useEffect(function () {
+
+    var progress = currentTime / duration;
+    setSpringProps.start({
+      reset: true,
+      immediate: !playing,
+      from: {
+        x: progress
+      },
+      to: {
+        x: 1 
+      },
+      config: {
+        duration: (duration - currentTime) * 1000
+      }
+    });
+  }, [playing, duration, currentTime, setSpringProps]);
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames([styles$5.container, (_ref3 = {}, _defineProperty(_ref3, styles$5.active, current), _defineProperty(_ref3, styles$5.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles$5.button,
+    onClick: onClick,
+    tabIndex: "-1"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$5.dot,
+    style: {
+      backgroundColor: active ? primary : secondary
+    }
+  })));
+};
+
+ViewerMenuDot.propTypes = propTypes$a;
+ViewerMenuDot.defaultProps = defaultProps$a;
+
+var styles$4 = {};
+
+var propTypes$9 = {
   size: PropTypes.number,
   spacing: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$7 = {
+var defaultProps$9 = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -113,7 +322,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -131,57 +340,66 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$7;
-MenuIcon.defaultProps = defaultProps$7;
+MenuIcon.propTypes = propTypes$9;
+MenuIcon.defaultProps = defaultProps$9;
 
-var propTypes$6 = {
+var propTypes$8 = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
   items: PropTypes$1.menuItems,
-  current: PropTypes.number,
   onClickItem: PropTypes.func,
+  onClickMenu: PropTypes.func,
   colors: PropTypes.shape({
     primary: PropTypes.string,
     secondary: PropTypes.string
   }),
   closeable: PropTypes.bool,
+  withItemClick: PropTypes.bool,
+  withoutScreensMenu: PropTypes.bool,
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$6 = {
+var defaultProps$8 = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
-  current: 0,
   onClickItem: null,
+  onClickMenu: null,
   colors: null,
   closeable: false,
+  withItemClick: false,
+  withoutScreensMenu: false,
   onClose: null,
   className: null
 };
 
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref3;
+  var _ref4;
 
   var direction = _ref.direction,
       withShadow = _ref.withShadow,
       items = _ref.items,
-      current = _ref.current,
       onClickItem = _ref.onClickItem,
+      onClickMenu = _ref.onClickMenu,
       colors = _ref.colors,
       closeable = _ref.closeable,
+      withItemClick = _ref.withItemClick,
+      withoutScreensMenu = _ref.withoutScreensMenu,
       onClose = _ref.onClose,
       className = _ref.className;
 
   var _ref2 = colors || {},
       _ref2$primary = _ref2.primary,
-      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
-      _ref2$secondary = _ref2.secondary,
-      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary;
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
 
   var intl = useIntl();
+  var currentIndex = items.findIndex(function (_ref3) {
+    var _ref3$current = _ref3.current,
+        current = _ref3$current === void 0 ? false : _ref3$current;
+    return current;
+  });
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$4.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles$4.vertical, direction === 'vertical'), _defineProperty(_ref3, styles$4.withShadow, withShadow), _ref3)]),
+    className: classNames([styles$6.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$6.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$6.withShadow, withShadow), _ref4)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -201,35 +419,32 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "."
       }]
     }, {
-      current: current + 1,
+      current: currentIndex + 1,
       total: items.length
     })
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$4.items
+    className: styles$6.items
   }, items.map(function (item, index) {
-    return (item === null || item === void 0 ? void 0 : item.parentId) === null ? /*#__PURE__*/React.createElement("li", {
-      className: classNames([styles$4.item, _defineProperty({}, styles$4.active, current === index)]),
-      key: "item-".concat(index),
-      "aria-hidden": "true"
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: styles$4.button,
+    var _item$current = item.current,
+        current = _item$current === void 0 ? false : _item$current;
+    return /*#__PURE__*/React.createElement(ViewerMenuDot, {
+      key: "item-".concat(index + 1),
+      current: current,
+      active: index <= currentIndex,
+      colors: colors,
       onClick: function onClick() {
-        if (onClickItem !== null) {
-          onClickItem(index);
+        if ((withItemClick || withoutScreensMenu) && onClickItem !== null) {
+          onClickItem(item);
+        } else if (!withItemClick && onClickMenu !== null) {
+          onClickMenu();
         }
       },
-      tabIndex: "-1"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles$4.dot,
-      style: {
-        backgroundColor: index <= current ? primary : secondary
-      }
-    }))) : null;
-  }), /*#__PURE__*/React.createElement("li", {
-    className: styles$4.menu
+      vertical: direction === 'vertical'
+    });
+  }), !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
+    className: styles$6.menu
   }, /*#__PURE__*/React.createElement(MenuIcon, {
-    className: styles$4.menuIcon,
+    className: styles$6.menuIcon,
     color: primary
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -247,20 +462,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$4.menuButton,
-    onClick: function onClick() {
-      if (onClickItem !== null) {
-        onClickItem(null);
-      }
-    }
-  })), closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$4.closeButton,
+    className: styles$6.menuButton,
+    onClick: onClickMenu
+  })) : null, closeable ? /*#__PURE__*/React.createElement("li", {
+    className: styles$6.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$4.closeButton,
+    className: styles$6.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -281,14 +492,14 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$6;
-ViewerMenuDots.defaultProps = defaultProps$6;
+ViewerMenuDots.propTypes = propTypes$8;
+ViewerMenuDots.defaultProps = defaultProps$8;
 
-var styles$2 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","itemContent":"micromag-viewer-menus-menu-preview-itemContent","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","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+var styles$3 = {"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","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
 
-var styles$1 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
+var styles$2 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
 
-var propTypes$5 = {
+var propTypes$7 = {
   url: PropTypes.string,
   title: PropTypes.string,
   opened: PropTypes.bool,
@@ -296,7 +507,7 @@ var propTypes$5 = {
   onShare: PropTypes.func,
   onCancel: PropTypes.func
 };
-var defaultProps$5 = {
+var defaultProps$7 = {
   url: null,
   title: null,
   opened: false,
@@ -349,13 +560,13 @@ var ShareModal = function ShareModal(_ref) {
   }, [opened, onCancel]);
   useDocumentEvent('click', onDocumentClick, opened);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$1.opened, opened), _ref2)]),
+    className: classNames([styles$2.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$2.opened, opened), _ref2)]),
     ref: containerRef,
     "aria-hidden": opened ? null : '-1'
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.content
+    className: styles$2.content
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.buttons
+    className: styles$2.buttons
   }, /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
     quote: title,
     beforeOnClick: function beforeOnClick() {
@@ -380,12 +591,12 @@ var ShareModal = function ShareModal(_ref) {
   }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps)))));
 };
 
-ShareModal.propTypes = propTypes$5;
-ShareModal.defaultProps = defaultProps$5;
+ShareModal.propTypes = propTypes$7;
+ShareModal.defaultProps = defaultProps$7;
 
-var styles = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
+var styles$1 = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
 
-var propTypes$4 = {
+var propTypes$6 = {
   title: PropTypes.string,
   url: PropTypes.string,
   className: PropTypes.string,
@@ -394,7 +605,7 @@ var propTypes$4 = {
   children: PropTypes.node,
   focusable: PropTypes.bool
 };
-var defaultProps$4 = {
+var defaultProps$6 = {
   title: null,
   url: null,
   className: null,
@@ -435,7 +646,7 @@ var ShareButton = function ShareButton(_ref) {
     setStoryShareModalOpened(false);
   }, [setStoryShareModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Button, {
     className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
     onClick: onShareIconClick,
@@ -455,7 +666,7 @@ var ShareButton = function ShareButton(_ref) {
     }),
     focusable: focusable
   }, children), /*#__PURE__*/React.createElement(ShareModal, {
-    className: styles.shareModal,
+    className: styles$1.shareModal,
     opened: storyShareModalOpened,
     title: title,
     url: url,
@@ -464,16 +675,16 @@ var ShareButton = function ShareButton(_ref) {
   }));
 };
 
-ShareButton.propTypes = propTypes$4;
-ShareButton.defaultProps = defaultProps$4;
+ShareButton.propTypes = propTypes$6;
+ShareButton.defaultProps = defaultProps$6;
 
-var propTypes$3 = {
+var propTypes$5 = {
   viewerTheme: PropTypes$1.viewerTheme,
-  screenWidth: PropTypes.number,
+  screenSize: PropTypes$1.screenSize,
+  menuWidth: PropTypes.number,
   title: PropTypes.string,
   shareUrl: PropTypes.string,
   items: PropTypes$1.menuItems,
-  current: PropTypes.number,
   focusable: PropTypes.bool,
   onClickItem: PropTypes.func,
   onClose: PropTypes.func,
@@ -484,13 +695,13 @@ var propTypes$3 = {
   fullscreenEnabled: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$3 = {
+var defaultProps$5 = {
   viewerTheme: null,
-  screenWidth: null,
+  screenSize: null,
+  menuWidth: null,
   title: null,
   shareUrl: null,
   items: [],
-  current: 0,
   focusable: true,
   onClickItem: null,
   onClose: null,
@@ -504,11 +715,11 @@ var defaultProps$3 = {
 
 var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var viewerTheme = _ref.viewerTheme,
-      screenWidth = _ref.screenWidth,
+      screenSize = _ref.screenSize,
+      menuWidth = _ref.menuWidth,
       title = _ref.title,
       shareUrl = _ref.shareUrl,
       items = _ref.items,
-      current = _ref.current,
       focusable = _ref.focusable,
       onClickItem = _ref.onClickItem,
       onClose = _ref.onClose,
@@ -519,82 +730,74 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       fullscreenEnabled = _ref.fullscreenEnabled,
       className = _ref.className;
   var intl = useIntl();
-  var screenSizeRatio = "".concat(3 / 2 / thumbsPerLine * 100, "%");
-  var screenRatioHeight = screenWidth * 3 / 2;
-  var hasSize = screenWidth > 0;
-  var hasItems = items !== null && items.length > 0;
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      thumbSize = _useState2[0],
-      setThumbSize = _useState2[1];
-
-  var firstScreenContainerRef = useRef(null);
-  useEffect(function () {
-    if (hasItems && hasSize && firstScreenContainerRef.current !== null) {
-      var _firstScreenContainer = firstScreenContainerRef.current,
-          offsetWidth = _firstScreenContainer.offsetWidth,
-          offsetHeight = _firstScreenContainer.offsetHeight;
-      setThumbSize({
-        width: offsetWidth,
-        height: offsetHeight
-      });
-    }
-  }, [screenWidth, hasItems, hasSize]); // Viewer theme
-
-  var _ref2 = viewerTheme || {},
-      _ref2$colors = _ref2.colors,
-      colors = _ref2$colors === void 0 ? null : _ref2$colors,
-      _ref2$background = _ref2.background,
-      background = _ref2$background === void 0 ? null : _ref2$background,
-      _ref2$textStyles = _ref2.textStyles,
-      textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles,
-      _ref2$logo = _ref2.logo,
-      brandLogo = _ref2$logo === void 0 ? null : _ref2$logo;
-
-  var _ref3 = textStyles || {},
-      _ref3$title = _ref3.title,
-      brandTextStyle = _ref3$title === void 0 ? null : _ref3$title;
-
-  var _ref4 = colors || {},
-      _ref4$primary = _ref4.primary,
-      brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary,
-      _ref4$secondary = _ref4.secondary,
-      brandSecondaryColor = _ref4$secondary === void 0 ? null : _ref4$secondary;
 
-  var _ref5 = background || {},
-      _ref5$color = _ref5.color,
-      brandBackgroundColor = _ref5$color === void 0 ? null : _ref5$color,
-      _ref5$image = _ref5.image,
-      image = _ref5$image === void 0 ? null : _ref5$image;
+  var _ref2 = screenSize || {},
+      screenWidth = _ref2.width,
+      screenHeight = _ref2.height;
 
-  var _ref6 = image || {},
-      _ref6$url = _ref6.url,
-      brandImageUrl = _ref6$url === void 0 ? null : _ref6$url;
+  var _useResizeObserver = useResizeObserver(),
+      firstScreenContainerRef = _useResizeObserver.ref,
+      firstScreenContentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref3 = firstScreenContentRect || {},
+      _ref3$width = _ref3.width,
+      thumbWidth = _ref3$width === void 0 ? 0 : _ref3$width;
+
+  var screenScale = thumbWidth / screenWidth; // Viewer theme
+
+  var _ref4 = viewerTheme || {},
+      _ref4$colors = _ref4.colors,
+      colors = _ref4$colors === void 0 ? null : _ref4$colors,
+      _ref4$background = _ref4.background,
+      background = _ref4$background === void 0 ? null : _ref4$background,
+      _ref4$textStyles = _ref4.textStyles,
+      textStyles = _ref4$textStyles === void 0 ? null : _ref4$textStyles,
+      _ref4$logo = _ref4.logo,
+      brandLogo = _ref4$logo === void 0 ? null : _ref4$logo;
+
+  var _ref5 = textStyles || {},
+      _ref5$title = _ref5.title,
+      brandTextStyle = _ref5$title === void 0 ? null : _ref5$title;
+
+  var _ref6 = colors || {},
+      _ref6$primary = _ref6.primary,
+      brandPrimaryColor = _ref6$primary === void 0 ? null : _ref6$primary,
+      _ref6$secondary = _ref6.secondary,
+      brandSecondaryColor = _ref6$secondary === void 0 ? null : _ref6$secondary;
+
+  var _ref7 = background || {},
+      _ref7$color = _ref7.color,
+      brandBackgroundColor = _ref7$color === void 0 ? null : _ref7$color,
+      _ref7$image = _ref7.image,
+      image = _ref7$image === void 0 ? null : _ref7$image;
+
+  var _ref8 = image || {},
+      _ref8$url = _ref8.url,
+      brandImageUrl = _ref8$url === void 0 ? null : _ref8$url;
 
   var borderPrimaryColorStyle = getStyleFromColor(brandPrimaryColor, 'borderColor');
   var colorSecondaryColorStyle = getStyleFromColor(brandSecondaryColor, 'color');
   var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
 
-  var _ref7 = brandLogo || {},
-      _ref7$url = _ref7.url,
-      brandLogoUrl = _ref7$url === void 0 ? null : _ref7$url;
+  var _ref9 = brandLogo || {},
+      _ref9$url = _ref9.url,
+      brandLogoUrl = _ref9$url === void 0 ? null : _ref9$url;
 
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null;
   var titleStyle = brandTextStyle !== null ? getStyleFromText(brandTextStyle) : null;
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      scrolledBottom = _useState4[0],
-      setScrolledBottom = _useState4[1];
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      scrolledBottom = _useState2[0],
+      setScrolledBottom = _useState2[1];
 
-  var dragBind = useDrag(function (_ref8) {
-    var _ref8$direction = _slicedToArray(_ref8.direction, 2),
-        dy = _ref8$direction[1],
-        last = _ref8.last,
-        tap = _ref8.tap;
+  var dragBind = useDrag(function (_ref10) {
+    var _ref10$direction = _slicedToArray(_ref10.direction, 2),
+        dy = _ref10$direction[1],
+        last = _ref10.last,
+        tap = _ref10.tap;
 
     if (!tap && last && scrolledBottom && dy < 0 && onClose !== null) {
       onClose();
@@ -611,37 +814,37 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var onScrolledNotBottom = useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  return hasSize ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
     style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
-      width: screenWidth
+      width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
   }, dragBind()), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.header
+    className: styles$3.header
   }, brandLogoUrl !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$2.organisation,
+    className: styles$3.organisation,
     style: {
       backgroundImage: "url(".concat(brandLogoUrl, ")")
     }
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.title,
+    className: styles$3.title,
     style: titleStyle
   }, title), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.buttons,
+    className: styles$3.buttons,
     style: colorSecondaryColorStyle
   }, /*#__PURE__*/React.createElement(ShareButton, {
-    className: styles$2.shareButton,
-    buttonClassName: styles$2.button,
+    className: styles$3.shareButton,
+    buttonClassName: styles$3.button,
     onShare: onShare,
     url: shareUrl,
     title: title,
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$2.icon,
+    className: styles$3.icon,
     icon: faShare
   })), fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
-    className: styles$2.button,
+    className: styles$3.button,
     onClick: toggleFullscreen,
     title: intl.formatMessage({
       id: "AuxqcG",
@@ -659,10 +862,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$2.icon,
+    className: styles$3.icon,
     icon: fullscreenActive ? faCompress : faExpand
   })) : null, /*#__PURE__*/React.createElement(Button, {
-    className: styles$2.button,
+    className: styles$3.button,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -680,20 +883,23 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$2.icon,
+    className: styles$3.icon,
     icon: faTimes
   })))), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.content
+    className: styles$3.content
   }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$2.scroll,
+    className: styles$3.scroll,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$2.nav
+    className: styles$3.nav
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$2.items
+    className: styles$3.items
   }, items.map(function (item, index) {
-    var screenIndexLabel = intl.formatMessage({
+    var _item$current = item.current,
+        current = _item$current === void 0 ? false : _item$current,
+        screen = item.screen;
+    var screenAriaLabel = "".concat(intl.formatMessage({
       id: "LkVfwW",
       defaultMessage: [{
         "type": 0,
@@ -704,89 +910,427 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       }]
     }, {
       index: index + 1
-    });
-    var isCurrentScreenLabel = current === index ? " ".concat(intl.formatMessage({
+    })).concat(current ? " ".concat(intl.formatMessage({
       id: "vmrJ8U",
       defaultMessage: [{
         "type": 0,
         "value": "(current screen)"
       }]
-    })) : '';
-    var screenAriaLabel = screenIndexLabel + isCurrentScreenLabel;
-    return item.parentId === null ? /*#__PURE__*/React.createElement("li", {
-      className: classNames([styles$2.item, _defineProperty({}, styles$2.active, current === index)]),
+    })) : '');
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames([styles$3.item, _defineProperty({}, styles$3.active, current)]),
       key: "item-".concat(index),
       style: {
-        paddingBottom: screenSizeRatio,
         width: "".concat(100 / thumbsPerLine, "%")
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$2.itemContent
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$2.screenContainer,
-      ref: index === 0 ? firstScreenContainerRef : null
+      className: styles$3.itemContent
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$2.screenContent,
-      style: thumbSize !== null ? {
+      className: styles$3.screenContainer,
+      ref: index === 0 ? firstScreenContainerRef : null,
+      style: {
+        height: screenHeight * screenScale
+      }
+    }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement("div", {
+      className: styles$3.screenContent,
+      style: {
         width: screenWidth,
-        height: screenRatioHeight,
-        transform: "scale(".concat(thumbSize.width / screenWidth)
-      } : null,
+        height: screenHeight,
+        transform: "scale(".concat(screenScale)
+      },
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement(ScreenPreview, {
       width: screenWidth,
-      height: screenRatioHeight,
-      screen: item,
+      height: screenHeight,
+      screen: screen,
       focusable: false
-    })), current === index ? /*#__PURE__*/React.createElement("div", {
-      className: styles$2.activeScreenBorder,
+    })) : null, current ? /*#__PURE__*/React.createElement("div", {
+      className: styles$3.activeScreenBorder,
       style: borderPrimaryColorStyle
     }) : null)), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$2.screenButton,
+      className: styles$3.screenButton,
       onClick: function onClick() {
-        onClickItem(index);
+        if (onClickItem !== null) {
+          onClickItem(item);
+        }
       },
       "aria-label": screenAriaLabel,
       onKeyUp: function onKeyUp(e) {
-        if (e.key === 'Enter') {
-          onClickItem(index);
+        if (e.key === 'Enter' && onClickItem !== null) {
+          onClickItem(item);
         }
       },
       tabIndex: focusable ? '0' : '-1'
-    })) : null;
-  })))))) : null;
+    }));
+  }))))));
 };
 
-ViewerMenuPreview.propTypes = propTypes$3;
-ViewerMenuPreview.defaultProps = defaultProps$3;
+ViewerMenuPreview.propTypes = propTypes$5;
+ViewerMenuPreview.defaultProps = defaultProps$5;
 
-var propTypes$2 = {
-  story: PropTypes$1.story,
-  // .isRequired,
-  basePath: PropTypes.string,
-  theme: PropTypes$1.viewerTheme,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  screen: PropTypes.string,
-  deviceScreens: PropTypes$1.deviceScreens,
-  renderContext: PropTypes$1.renderContext,
-  onScreenChange: PropTypes.func,
-  tapNextScreenWidthPercent: PropTypes.number,
-  neighborScreensActive: PropTypes.number,
-  storyIsParsed: PropTypes.bool,
-  landscapeScreenMargin: PropTypes.number,
-  withMetadata: PropTypes.bool,
-  withoutMenu: PropTypes.bool,
-  withoutFullscreen: PropTypes.bool,
+var propTypes$4 = {
+  story: PropTypes$1.story.isRequired,
+  currentScreenIndex: PropTypes.number,
+  opened: PropTypes.bool,
+  toggleFullscreen: PropTypes.func,
+  fullscreenActive: PropTypes.bool,
+  fullscreenEnabled: PropTypes.bool,
   closeable: PropTypes.bool,
-  onClose: PropTypes.func,
-  onInteraction: PropTypes.func,
-  onEnd: PropTypes.func,
-  onViewModeChange: PropTypes.func,
-  currentScreenMedia: PropTypes$1.ref,
-  screensMedias: PropTypes$1.ref,
-  screenSizeOptions: PropTypes.shape({
+  withShadow: PropTypes.bool,
+  trackingEnabled: PropTypes.bool,
+  shareBasePath: PropTypes.string,
+  theme: PropTypes$1.viewerTheme,
+  screenSize: PropTypes$1.screenSize,
+  menuWidth: PropTypes.number,
+  withDotItemClick: PropTypes.bool,
+  withoutScreensMenu: PropTypes.bool,
+  onRequestOpen: PropTypes.func,
+  onRequestClose: PropTypes.func,
+  onClickItem: PropTypes.func,
+  onClickMenu: PropTypes.func,
+  onClickCloseViewer: PropTypes.func,
+  refDots: PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
+
+  })
+};
+var defaultProps$4 = {
+  currentScreenIndex: 0,
+  opened: false,
+  toggleFullscreen: null,
+  fullscreenActive: false,
+  fullscreenEnabled: false,
+  closeable: false,
+  withShadow: false,
+  trackingEnabled: false,
+  shareBasePath: null,
+  theme: null,
+  screenSize: null,
+  menuWidth: null,
+  withDotItemClick: false,
+  withoutScreensMenu: false,
+  onRequestOpen: null,
+  onRequestClose: null,
+  onClickItem: null,
+  onClickMenu: null,
+  onClickCloseViewer: null,
+  refDots: null
+};
+
+var ViewerMenu = function ViewerMenu(_ref) {
+  var story = _ref.story,
+      currentScreenIndex = _ref.currentScreenIndex,
+      opened = _ref.opened,
+      toggleFullscreen = _ref.toggleFullscreen,
+      fullscreenActive = _ref.fullscreenActive,
+      fullscreenEnabled = _ref.fullscreenEnabled,
+      closeable = _ref.closeable,
+      withShadow = _ref.withShadow,
+      shareBasePath = _ref.shareBasePath,
+      trackingEnabled = _ref.trackingEnabled,
+      viewerTheme = _ref.theme,
+      screenSize = _ref.screenSize,
+      menuWidth = _ref.menuWidth,
+      withDotItemClick = _ref.withDotItemClick,
+      withoutScreensMenu = _ref.withoutScreensMenu,
+      onRequestOpen = _ref.onRequestOpen,
+      onRequestClose = _ref.onRequestClose,
+      customOnClickItem = _ref.onClickItem,
+      customOnClickMenu = _ref.onClickMenu,
+      onClickCloseViewer = _ref.onClickCloseViewer,
+      refDots = _ref.refDots;
+  var _story$components = story.components,
+      screens = _story$components === void 0 ? [] : _story$components,
+      _story$title = story.title,
+      title = _story$title === void 0 ? null : _story$title;
+  var currentScreen = screens !== null ? screens[currentScreenIndex] || null : null;
+
+  var _ref2 = currentScreen || {},
+      _ref2$id = _ref2.id,
+      screenId = _ref2$id === void 0 ? null : _ref2$id,
+      _ref2$type = _ref2.type,
+      screenType = _ref2$type === void 0 ? null : _ref2$type;
+
+  var items = useMemo(function () {
+    return screens.filter(function (_ref3) {
+      var _ref3$parentId = _ref3.parentId,
+          parentId = _ref3$parentId === void 0 ? null : _ref3$parentId;
+      return parentId === null;
+    }).map(function (it) {
+      return {
+        screen: it,
+        screenId: it.id,
+        current: screenId === it.id
+      };
+    });
+  }, [screens, screenId]);
+  var trackEvent = useTrackEvent();
+  var trackScreenEvent = useCallback(function (cat, action, label) {
+    if (trackingEnabled) {
+      trackEvent(cat, action, label, {
+        screenId: screenId,
+        screenIndex: currentScreenIndex,
+        screenType: screenType
+      });
+    }
+  }, [trackEvent, screenId, currentScreenIndex, screenType]);
+  var shareUrl = useMemo(function () {
+    var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
+    var path = shareBasePath !== null ? "".concat(origin).concat(shareBasePath) : origin;
+    return path;
+  }, [shareBasePath]);
+
+  var _useSpring = useSpring(function () {
+    return {
+      y: 0,
+      config: _objectSpread(_objectSpread({}, config.stiff), {}, {
+        clamp: true
+      })
+    };
+  }),
+      _useSpring2 = _slicedToArray(_useSpring, 2),
+      menuY = _useSpring2[0].y,
+      setMenuSpring = _useSpring2[1];
+
+  var refOpened = useRef(opened);
+
+  if (refOpened.current !== opened) {
+    refOpened.current = opened;
+  }
+
+  useEffect(function () {
+    setMenuSpring.start({
+      y: opened ? 1 : 0
+    });
+  }, [opened]);
+
+  var _useResizeObserver = useResizeObserver(),
+      menuPreviewContainerRef = _useResizeObserver.ref,
+      menuPreviewContainerRect = _useResizeObserver.entry.contentRect;
+
+  var _ref4 = menuPreviewContainerRect || {},
+      _ref4$height = _ref4.height,
+      menuPreviewContainerHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+
+  var menuPreviewStyle = {
+    transform: menuY.to(function (y) {
+      return "translateY(".concat(y * menuPreviewContainerHeight, "px)");
+    })
+  };
+  var menuDragBind = useDrag(function (_ref5) {
+    var _ref5$movement = _slicedToArray(_ref5.movement, 2),
+        my = _ref5$movement[1],
+        first = _ref5.first,
+        last = _ref5.last,
+        _ref5$direction = _slicedToArray(_ref5.direction, 2),
+        dy = _ref5$direction[1],
+        cancel = _ref5.cancel,
+        canceled = _ref5.canceled,
+        tap = _ref5.tap;
+
+    if (canceled || tap) {
+      return;
+    }
+
+    var isMenuOpened = refOpened.current;
+
+    if (first) {
+      if (isMenuOpened) {
+        cancel();
+        return;
+      }
+    }
+
+    var yProgress = Math.max(0, Math.min(1, my / menuPreviewContainerHeight + (isMenuOpened ? 1 : 0)));
+
+    if (last) {
+      var menuNowOpened = dy > 0 && yProgress > 0.1;
+      refOpened.current = menuNowOpened;
+      setMenuSpring.start({
+        y: menuNowOpened ? 1 : 0
+      });
+
+      if (menuNowOpened && onRequestOpen !== null) {
+        onRequestOpen();
+      } else if (!menuNowOpened && onRequestClose !== null) {
+        onRequestClose();
+      }
+    } else {
+      setMenuSpring.start({
+        y: yProgress
+      });
+    }
+  }, {
+    axis: 'y',
+    filterTaps: true
+  }); // handle preview menu item click
+
+  var onClickMenu = useCallback(function (index) {
+    if (customOnClickMenu !== null) {
+      customOnClickMenu(index);
+    }
+
+    trackScreenEvent('viewer_menu', 'click_open', 'Menu icon');
+  }, [customOnClickMenu, trackScreenEvent]);
+  var onClickItem = useCallback(function (item) {
+    if (customOnClickItem !== null) {
+      customOnClickItem(item);
+    }
+
+    var index = items.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === screenId;
+    });
+    trackScreenEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1));
+  }, [customOnClickItem, items, screenId, trackScreenEvent]);
+  var onClickClose = useCallback(function () {
+    if (onRequestClose !== null) {
+      onRequestClose();
+    }
+
+    trackScreenEvent('viewer_menu', 'click_close', 'Close icon');
+  }, [onRequestClose, trackScreenEvent]); // Handle preview menu share click
+
+  var onClickShare = useCallback(function (type) {
+    return trackScreenEvent('viewer_menu', 'click_share', type);
+  }, [trackScreenEvent]);
+
+  var _ref7 = viewerTheme || {},
+      _ref7$menuTheme = _ref7.menuTheme,
+      menuTheme = _ref7$menuTheme === void 0 ? null : _ref7$menuTheme;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
+    className: styles$7.menuDotsContainer,
+    ref: refDots,
+    style: {
+      width: menuWidth
+    }
+  }, menuDragBind()), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
+    direction: "horizontal",
+    withShadow: withShadow,
+    items: items,
+    onClickItem: onClickItem,
+    onClickMenu: onClickMenu,
+    closeable: closeable,
+    withItemClick: withDotItemClick,
+    withoutScreensMenu: withoutScreensMenu,
+    onClose: onClickCloseViewer,
+    className: styles$7.menuDots
+  }))), /*#__PURE__*/React.createElement(animated.div, {
+    className: styles$7.menuPreviewContainer,
+    style: menuPreviewStyle,
+    ref: menuPreviewContainerRef
+  }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
+    viewerTheme: viewerTheme,
+    title: title,
+    shareUrl: shareUrl,
+    className: styles$7.menuPreview,
+    screenSize: screenSize,
+    menuWidth: menuWidth,
+    focusable: opened,
+    items: items,
+    onClickItem: onClickItem,
+    onClose: onClickClose,
+    onShare: onClickShare,
+    toggleFullscreen: toggleFullscreen,
+    fullscreenActive: fullscreenActive,
+    fullscreenEnabled: fullscreenEnabled
+  })));
+};
+
+ViewerMenu.propTypes = propTypes$4;
+ViewerMenu.defaultProps = defaultProps$4;
+
+var styles = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+
+var propTypes$3 = {
+  screen: PropTypes$1.screenComponent,
+  renderContext: PropTypes$1.renderContext,
+  screenState: PropTypes.string,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  onPrevious: PropTypes.func,
+  onNext: PropTypes.func,
+  onEnableInteraction: PropTypes.func,
+  onDisableInteraction: PropTypes.func,
+  getMediaRef: PropTypes.func
+};
+var defaultProps$3 = {
+  screen: null,
+  renderContext: null,
+  screenState: null,
+  current: false,
+  active: true,
+  onPrevious: null,
+  onNext: null,
+  onEnableInteraction: null,
+  onDisableInteraction: null,
+  getMediaRef: null
+};
+
+var ViewerScreen = function ViewerScreen(_ref) {
+  var _ref2;
+
+  var screen = _ref.screen,
+      renderContext = _ref.renderContext,
+      screenState = _ref.screenState,
+      active = _ref.active,
+      current = _ref.current,
+      onPrevious = _ref.onPrevious,
+      onNext = _ref.onNext,
+      onEnableInteraction = _ref.onEnableInteraction,
+      onDisableInteraction = _ref.onDisableInteraction,
+      getMediaRef = _ref.getMediaRef;
+  return screen !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, styles.active, active), _defineProperty(_ref2, styles.current, current), _ref2)]),
+    "aria-hidden": current ? null : 'true'
+  }, /*#__PURE__*/React.createElement(Screen, {
+    screen: screen,
+    renderContext: renderContext,
+    screenState: screenState,
+    active: active,
+    current: current,
+    onPrevious: onPrevious,
+    onNext: onNext,
+    onEnableInteraction: onEnableInteraction,
+    onDisableInteraction: onDisableInteraction,
+    getMediaRef: getMediaRef
+  })) : null;
+};
+
+ViewerScreen.propTypes = propTypes$3;
+ViewerScreen.defaultProps = defaultProps$3;
+
+var propTypes$2 = {
+  story: PropTypes$1.story,
+  // .isRequired,
+  basePath: PropTypes.string,
+  theme: PropTypes$1.viewerTheme,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  screen: PropTypes.string,
+  screenState: PropTypes.string,
+  deviceScreens: PropTypes$1.deviceScreens,
+  renderContext: PropTypes$1.renderContext,
+  onScreenChange: PropTypes.func,
+  tapNextScreenWidthPercent: PropTypes.number,
+  neighborScreensActive: PropTypes.number,
+  storyIsParsed: PropTypes.bool,
+  landscapeScreenMargin: PropTypes.number,
+  withMetadata: PropTypes.bool,
+  withoutMenu: PropTypes.bool,
+  withoutScreensMenu: PropTypes.bool,
+  withoutFullscreen: PropTypes.bool,
+  withLandscapeSiblingsScreens: PropTypes.bool,
+  closeable: PropTypes.bool,
+  onClose: PropTypes.func,
+  onInteraction: PropTypes.func,
+  onEnd: PropTypes.func,
+  onViewModeChange: PropTypes.func,
+  currentScreenMedia: PropTypes$1.ref,
+  screensMedias: PropTypes$1.ref,
+  screenSizeOptions: PropTypes.shape({
     withoutMaxSize: PropTypes.bool,
     desktopHeightRatio: PropTypes.number,
     screenRatio: PropTypes.number
@@ -800,16 +1344,19 @@ var defaultProps$2 = {
   width: null,
   height: null,
   screen: null,
+  screenState: null,
   deviceScreens: getDeviceScreens(),
   renderContext: 'view',
   onScreenChange: null,
-  tapNextScreenWidthPercent: 0.5,
+  tapNextScreenWidthPercent: 0.8,
   neighborScreensActive: 2,
   storyIsParsed: false,
-  landscapeScreenMargin: 50,
+  landscapeScreenMargin: 20,
   withMetadata: false,
   withoutMenu: false,
+  withoutScreensMenu: false,
   withoutFullscreen: false,
+  withLandscapeSiblingsScreens: false,
   closeable: false,
   onClose: null,
   onInteraction: null,
@@ -822,7 +1369,7 @@ var defaultProps$2 = {
 };
 
 var Viewer = function Viewer(_ref) {
-  var _ref15;
+  var _ref12;
 
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -830,6 +1377,7 @@ var Viewer = function Viewer(_ref) {
       width = _ref.width,
       height = _ref.height,
       screenId = _ref.screen,
+      screenState = _ref.screenState,
       deviceScreens = _ref.deviceScreens,
       renderContext = _ref.renderContext,
       onScreenChange = _ref.onScreenChange,
@@ -838,10 +1386,12 @@ var Viewer = function Viewer(_ref) {
       storyIsParsed = _ref.storyIsParsed,
       landscapeScreenMargin = _ref.landscapeScreenMargin,
       withMetadata = _ref.withMetadata,
-      withoutMenu = _ref.withoutMenu;
+      withoutMenu = _ref.withoutMenu,
+      withoutScreensMenu = _ref.withoutScreensMenu;
       _ref.withoutFullscreen;
-      var closeable = _ref.closeable,
-      onClose = _ref.onClose,
+      var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
+      closeable = _ref.closeable,
+      onCloseViewer = _ref.onClose,
       onInteraction = _ref.onInteraction,
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
@@ -860,7 +1410,10 @@ var Viewer = function Viewer(_ref) {
       _parsedStory$metadata = parsedStory.metadata,
       metadata = _parsedStory$metadata === void 0 ? null : _parsedStory$metadata,
       _parsedStory$fonts = parsedStory.fonts,
-      fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts; // Viewer Theme
+      fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts;
+  var eventsManager = useMemo(function () {
+    return new EventEmitter();
+  }, [parsedStory]); // Viewer Theme
 
   var _ref2 = viewerTheme || {},
       textStyles = _ref2.textStyles;
@@ -884,17 +1437,11 @@ var Viewer = function Viewer(_ref) {
       _useLoadedFonts.loaded; // eslint-disable-line
 
 
-  var shareUrl = useMemo(function () {
-    var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
-    var path = basePath !== null ? "".concat(origin).concat(basePath) : origin;
-    return path;
-  }, [basePath]);
   var isView = renderContext === 'view';
   var isStatic = renderContext === 'static';
   var isCapture = renderContext === 'capture';
   var withoutScreensTransforms = isStatic || isCapture;
   var trackScreenView = useTrackScreenView();
-  var trackEvent = useTrackEvent();
   var contentRef = useRef(null); // Get screen size
 
   var _useScreenSizeFromEle = useScreenSizeFromElement(_objectSpread({
@@ -924,30 +1471,12 @@ var Viewer = function Viewer(_ref) {
         landscape: landscape
       });
     }
-  }, [ready, landscape, onViewModeChange]); // Get dots menu height
-
-  var _useResizeObserver = useResizeObserver(),
-      menuDotsContainerRef = _useResizeObserver.ref,
-      menuDotsContainerRect = _useResizeObserver.entry.contentRect;
-
-  var _ref6 = menuDotsContainerRect || {},
-      _ref6$height = _ref6.height,
-      menuDotsContainerHeight = _ref6$height === void 0 ? 0 : _ref6$height; // Get preview menu height
-
-
-  var _useResizeObserver2 = useResizeObserver(),
-      menuPreviewContainerRef = _useResizeObserver2.ref,
-      menuPreviewContainerRect = _useResizeObserver2.entry.contentRect;
-
-  var _ref7 = menuPreviewContainerRect || {},
-      _ref7$height = _ref7.height,
-      menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
-
+  }, [ready, landscape, onViewModeChange]);
   var screensMediasRef = useRef([]); // Screen index
 
   var screenIndex = useMemo(function () {
     return Math.max(0, screens.findIndex(function (it) {
-      return String(it.id) === String(screenId);
+      return "".concat(it.id) === "".concat(screenId);
     }));
   }, [screenId, screens]);
 
@@ -974,13 +1503,7 @@ var Viewer = function Viewer(_ref) {
   }, [screenIndex, screens, onScreenChange]); // Track screen view
 
   var trackingEnabled = isView;
-  var validIndex = screens.length > 0 && screenIndex < screens.length;
-  var currentScreen = validIndex ? screens[screenIndex] : null;
-
-  var _ref8 = currentScreen || {},
-      _ref8$type = _ref8.type,
-      screenType = _ref8$type === void 0 ? null : _ref8$type;
-
+  var currentScreen = screens[screenIndex] || null;
   useEffect(function () {
     if (trackingEnabled && currentScreen !== null) {
       trackScreenView(currentScreen, screenIndex);
@@ -997,247 +1520,60 @@ var Viewer = function Viewer(_ref) {
     currentScreenRef.current.focus();
   }, [changeIndex]);
   var screensCount = screens.length;
-
-  var _useState = useState(screens.map(function () {
-    return true;
-  })),
-      _useState2 = _slicedToArray(_useState, 2),
-      screensInteractionEnabled = _useState2[0],
-      setScreensInteractionEnabled = _useState2[1];
-
-  var currentScreenInteractionEnabled = screensInteractionEnabled[screenIndex];
-  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
-  useEffect(function () {
-    setScreensInteractionEnabled(_toConsumableArray(Array(screensCount).keys()).map(function () {
-      return true;
-    }));
-  }, [screensCount]);
-  var onEnableInteraction = useCallback(function () {
-    if (!screensInteractionEnabled[screenIndex]) {
-      var newArray = _toConsumableArray(screensInteractionEnabled);
-
-      newArray[screenIndex] = true;
-      setScreensInteractionEnabled(newArray);
-    }
-  }, [screenIndex, screensInteractionEnabled, setScreensInteractionEnabled]);
-  var onDisableInteraction = useCallback(function () {
-    if (screensInteractionEnabled[screenIndex]) {
-      var newArray = _toConsumableArray(screensInteractionEnabled);
-
-      newArray[screenIndex] = false;
-      setScreensInteractionEnabled(newArray);
-    }
-  }, [screenIndex, screensInteractionEnabled, setScreensInteractionEnabled]); // handle screenClick
-
   var onInteractionPrivate = useCallback(function () {
     if (onInteraction !== null) {
       onInteraction();
     }
   }, [onInteraction]);
-  var onScreenClick = useCallback(function (e, index) {
-    onInteractionPrivate();
-
-    var checkClickable = function checkClickable(el) {
-      var maxDistance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
-      var distance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-
-      var _ref9 = el || {},
-          _ref9$tagName = _ref9.tagName,
-          tagName = _ref9$tagName === void 0 ? null : _ref9$tagName,
-          _ref9$parentNode = _ref9.parentNode,
-          parentNode = _ref9$parentNode === void 0 ? null : _ref9$parentNode;
 
-      if (tagName === 'BODY') {
-        return false;
-      }
-
-      var tags = ['BUTTON', 'A', 'INPUT', 'TEXTAREA'];
-
-      if (tags.indexOf(tagName) > -1) {
-        return true;
-      }
-
-      if (distance < maxDistance) {
-        return checkClickable(parentNode, maxDistance, distance + 1);
-      }
-
-      return false;
-    };
-
-    var tappedCurrent = screenIndex === index;
-
-    if (!isView && tappedCurrent || checkClickable(e.target)) {
-      return;
-    }
-
-    var it = screens[screenIndex] || null;
-    var interactionEnabled = screensInteractionEnabled[screenIndex];
-
-    if (it === null || tappedCurrent && !interactionEnabled) {
-      return;
-    }
-
-    var nextIndex = screenIndex;
-
-    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
-        _e$currentTarget$getB2 = _e$currentTarget$getB.left,
-        contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2;
-
-    var tapX = e.clientX;
-    var hasTappedLeft = tappedCurrent ? tapX - contentX < screenWidth * (1 - tapNextScreenWidthPercent) : screenIndex > index;
-
-    if (hasTappedLeft) {
-      nextIndex = landscape ? index : Math.max(0, screenIndex - 1);
-    } else {
-      nextIndex = landscape ? index : Math.min(screens.length - 1, screenIndex + 1);
-      var isLastScreen = screenIndex === screens.length - 1;
-
-      if (isLastScreen && onEnd !== null) {
-        onEnd();
-      }
-    }
-
-    changeIndex(nextIndex);
-  }, [onScreenChange, screenWidth, screens, changeIndex, screenIndex, screensInteractionEnabled, isView, onInteractionPrivate, onEnd]); // swipe menu open
-
-  var menuOpened = useRef(false);
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      previewMenuOpen = _useState4[0],
-      setPreviewMenuOpen = _useState4[1];
-
-  var _useSpring = useSpring(function () {
-    return {
-      y: 0,
-      config: _objectSpread(_objectSpread({}, config.stiff), {}, {
-        clamp: true
-      })
-    };
+  var _useScreenInteraction = useScreenInteraction({
+    screens: screens,
+    screenId: screenId,
+    screenWidth: screenWidth,
+    isView: isView,
+    clickOnSiblings: landscape && withLandscapeSiblingsScreens,
+    nextScreenWidthPercent: tapNextScreenWidthPercent,
+    events: eventsManager,
+    onClick: onInteractionPrivate,
+    onEnd: onEnd,
+    onChangeScreen: changeIndex
   }),
-      _useSpring2 = _slicedToArray(_useSpring, 2),
-      menuY = _useSpring2[0].y,
-      setMenuSpring = _useSpring2[1];
-
-  var menuPreviewStyle = {
-    transform: menuY.to(function (y) {
-      return "translateY(".concat(y * menuPreviewContainerHeight, "px)");
-    })
-  };
-  var menuDragBind = useDrag(function (_ref10) {
-    var _ref10$movement = _slicedToArray(_ref10.movement, 2),
-        my = _ref10$movement[1],
-        first = _ref10.first,
-        last = _ref10.last,
-        _ref10$direction = _slicedToArray(_ref10.direction, 2),
-        dy = _ref10$direction[1],
-        cancel = _ref10.cancel,
-        canceled = _ref10.canceled,
-        tap = _ref10.tap;
-
-    if (canceled || tap) {
-      return;
-    }
-
-    var isMenuOpened = menuOpened.current;
-
-    if (first) {
-      if (isMenuOpened) {
-        cancel();
-        return;
-      }
-    }
-
-    var yProgress = Math.max(0, Math.min(1, my / menuPreviewContainerHeight + (isMenuOpened ? 1 : 0)));
-
-    if (last) {
-      var menuNowOpened = dy > 0 && yProgress > 0.1;
-      menuOpened.current = menuNowOpened;
-      setMenuSpring.start({
-        y: menuNowOpened ? 1 : 0
-      });
-      setPreviewMenuOpen(menuNowOpened);
-    } else {
-      setMenuSpring.start({
-        y: yProgress
-      });
-    }
-  }, {
-    axis: 'y',
-    filterTaps: true
-  });
+      onScreenClick = _useScreenInteraction.onClick,
+      currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
+      enableInteraction = _useScreenInteraction.enableInteraction,
+      disableInteraction = _useScreenInteraction.disableInteraction; // swipe menu open
 
-  var setPreviewMenu = function setPreviewMenu(opened) {
-    setMenuSpring.start({
-      y: opened ? 1 : 0
-    });
-    menuOpened.current = opened;
-    setPreviewMenuOpen(opened);
-  };
 
-  var openPreviewMenu = useCallback(function () {
-    setPreviewMenu(true);
-  }, [setMenuSpring, setPreviewMenuOpen]);
-  var closePreviewMenu = useCallback(function () {
-    setPreviewMenu(false);
-  }, [setMenuSpring, setPreviewMenuOpen]); // Handle dot menu item click
+  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
 
-  var onClickDotsMenuItem = useCallback(function (index) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      menuOpened = _useState2[0],
+      setMenuOpened = _useState2[1];
+
+  var onMenuRequestOpen = useCallback(function () {
+    return setMenuOpened(true);
+  }, [setMenuOpened]);
+  var onMenuRequestClose = useCallback(function () {
+    return setMenuOpened(false);
+  }, [setMenuOpened]);
+  var onClickMenu = useCallback(function () {
     onInteractionPrivate();
-    var clickedOnDot = index !== null;
-    var goToScreen = landscape && clickedOnDot;
-
-    if (goToScreen) {
-      changeIndex(index);
-    } else {
-      openPreviewMenu();
-    }
-
-    if (trackingEnabled) {
-      var trackAction = goToScreen ? 'click_screen_change' : 'click_open';
-      var trackLabel = clickedOnDot ? "Screen ".concat(index + 1) : 'Menu icon';
-      trackEvent('viewer_menu', trackAction, trackLabel, {
-        screenId: screenId,
-        screenType: screenType,
-        screenIndex: index
-      });
-    }
-  }, [changeIndex, landscape, trackingEnabled, trackEvent, screenType, onInteractionPrivate]); // handle preview menu item click
-
-  var onClickPreviewMenuItem = useCallback(function (index) {
+    setMenuOpened(true);
+  }, [changeIndex, onInteractionPrivate, setMenuOpened]);
+  var onClickMenuItem = useCallback(function (_ref6) {
+    var itemScreenId = _ref6.screenId;
+    onInteractionPrivate();
+    var index = screens.findIndex(function (_ref7) {
+      var id = _ref7.id;
+      return id === itemScreenId;
+    });
     changeIndex(index);
-    closePreviewMenu();
 
-    if (trackingEnabled) {
-      trackEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1), {
-        screenId: screenId,
-        screenType: screenType,
-        screenIndex: index
-      });
-    }
-  }, [changeIndex, trackingEnabled, trackEvent, screenId, screenType]); // Handle preview menu close click
-
-  var onClickPreviewMenuClose = useCallback(function () {
-    closePreviewMenu();
-
-    if (trackingEnabled) {
-      trackEvent('viewer_menu', 'click_close', 'Close icon', {
-        screenId: screenId,
-        screenIndex: screenIndex,
-        screenType: screenType
-      });
-    }
-  }, [closePreviewMenu, trackingEnabled, trackEvent, screenId, screenIndex, screenType]); // Handle preview menu share click
-
-  var onClickShare = useCallback(function (type) {
-    if (trackingEnabled) {
-      trackEvent('viewer_menu', 'click_share', type, {
-        screenId: screenId,
-        screenIndex: screenIndex,
-        screenType: screenType
-      });
+    if (menuOpened) {
+      setMenuOpened(false);
     }
-  }, [trackingEnabled, trackEvent, screenId, screenIndex, screenType]);
+  }, [onInteractionPrivate, changeIndex, menuOpened, setMenuOpened]);
   var onContextMenu = useCallback(function (e) {
     if (!landscape) {
       e.preventDefault();
@@ -1256,62 +1592,43 @@ var Viewer = function Viewer(_ref) {
       fullscreenEnabled = _useFullscreen.enabled; // Keyboard Events
 
 
-  useEffect(function () {
-    var onKey = function onKey(e) {
-      if (['input', 'textarea'].reduce(function (foundMatch, match) {
-        return foundMatch || e.target.matches(match);
-      }, false)) {
-        return;
-      }
-
-      var key = e.key;
-      var lowercaseKey = key.toLowerCase();
-
-      switch (lowercaseKey) {
-        case 'f':
-          toggleFullscreen();
-          break;
-
-        case 'm':
-          setPreviewMenu(!menuOpened.current);
-          break;
-
-        case 'escape':
-          closePreviewMenu();
-          break;
-
-        case 'arrowleft':
-          gotoPreviousScreen();
-          break;
-
-        case 'arrowright':
-        case ' ':
-          // spacebar
-          gotoNextScreen();
-          break;
+  var keyboardShortcuts = useMemo(function () {
+    return {
+      f: function f() {
+        return toggleFullscreen();
+      },
+      m: function m() {
+        return setMenuOpened(!menuOpened);
+      },
+      escape: function escape() {
+        return setMenuOpened(false);
+      },
+      arrowleft: function arrowleft() {
+        return gotoPreviousScreen();
+      },
+      arrowright: function arrowright() {
+        return gotoNextScreen();
+      },
+      ' ': function _() {
+        return gotoNextScreen();
       }
     };
+  }, [menuOpened, setMenuOpened, gotoPreviousScreen, gotoNextScreen]);
+  useKeyboardShortcuts(keyboardShortcuts, {
+    disabled: renderContext !== 'view'
+  });
 
-    if (renderContext === 'view') {
-      window.addEventListener('keydown', onKey);
-    }
-
-    return function () {
-      window.removeEventListener('keydown', onKey);
-    };
-  }, [renderContext, closePreviewMenu, gotoPreviousScreen, gotoNextScreen]);
-
-  var _ref11 = currentScreen || {},
-      screenParameters = _ref11.parameters;
+  var _ref8 = currentScreen || {},
+      screenParameters = _ref8.parameters;
 
-  var _ref12 = screenParameters || {},
-      screenMetadata = _ref12.metadata;
+  var _ref9 = screenParameters || {},
+      screenMetadata = _ref9.metadata;
 
-  var _ref13 = screenMetadata || {},
-      _ref13$title = _ref13.title,
-      screenTitle = _ref13$title === void 0 ? null : _ref13$title,
-      _ref13$description = _ref13.description,
-      screenDescription = _ref13$description === void 0 ? null : _ref13$description;
+  var _ref10 = screenMetadata || {},
+      _ref10$title = _ref10.title,
+      screenTitle = _ref10$title === void 0 ? null : _ref10$title,
+      _ref10$description = _ref10.description,
+      screenDescription = _ref10$description === void 0 ? null : _ref10$description;
 
   var finalTitle = screenTitle !== null ? screenTitle : title;
   var finalMetadata = useMemo(function () {
@@ -1320,84 +1637,88 @@ var Viewer = function Viewer(_ref) {
     }) : metadata;
   }, [metadata]);
 
-  var _ref14 = viewerTheme || {},
-      _ref14$menuTheme = _ref14.menuTheme,
-      menuTheme = _ref14$menuTheme === void 0 ? null : _ref14$menuTheme;
+  var _useResizeObserver = useResizeObserver(),
+      menuDotsContainerRef = _useResizeObserver.ref,
+      menuDotsContainerRect = _useResizeObserver.entry.contentRect;
+
+  var _ref11 = menuDotsContainerRect || {},
+      _ref11$height = _ref11.height,
+      menuDotsContainerHeight = _ref11$height === void 0 ? 0 : _ref11$height;
 
   return /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement(ViewerProvider, {
+    events: eventsManager,
     menuVisible: menuVisible,
     menuSize: menuDotsContainerHeight,
     gotoPreviousScreen: gotoPreviousScreen,
-    gotoNextScreen: gotoNextScreen
+    gotoNextScreen: gotoNextScreen,
+    disableInteraction: disableInteraction,
+    enableInteraction: enableInteraction
   }, withMetadata ? /*#__PURE__*/React.createElement(Meta, {
     title: finalTitle,
     metadata: finalMetadata
   }, overscrollStyle) : /*#__PURE__*/React.createElement(Helmet, null, overscrollStyle), /*#__PURE__*/React.createElement(FontFaces, {
     fonts: finalFonts
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
+    className: classNames([styles$7.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref15 = {}, _defineProperty(_ref15, styles$6.landscape, landscape), _defineProperty(_ref15, styles$6.hideMenu, !menuVisible), _defineProperty(_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref15, className, className), _ref15)]),
+    }), (_ref12 = {}, _defineProperty(_ref12, styles$7.landscape, landscape), _defineProperty(_ref12, styles$7.withSibblings, withLandscapeSiblingsScreens), _defineProperty(_ref12, styles$7.hideMenu, !menuVisible), _defineProperty(_ref12, styles$7.ready, ready || withoutScreensTransforms), _defineProperty(_ref12, className, className), _ref12)]),
     ref: containerRef,
     onContextMenu: onContextMenu
-  }, !withoutMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.menuDotsContainer,
-    ref: menuDotsContainerRef,
-    style: {
-      width: screenWidth
-    }
-  }, menuDragBind()), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
-    direction: "horizontal",
+  }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu, {
+    story: parsedStory,
+    currentScreenIndex: screenIndex,
+    opened: menuOpened,
     withShadow: menuOverScreen,
-    items: screens,
-    current: screenIndex,
-    onClickItem: onClickDotsMenuItem,
-    closeable: closeable,
-    onClose: onClose,
-    className: styles$6.menuDots
-  }))), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$6.menuPreviewContainer,
-    style: menuPreviewStyle,
-    ref: menuPreviewContainerRef
-  }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
-    viewerTheme: viewerTheme,
-    title: title,
-    shareUrl: shareUrl,
-    className: styles$6.menuPreview,
-    screenWidth: screenWidth,
-    focusable: previewMenuOpen,
-    items: screens,
-    current: screenIndex,
-    onClickItem: onClickPreviewMenuItem,
-    onClose: onClickPreviewMenuClose,
-    onShare: onClickShare,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
-    fullscreenEnabled: fullscreenEnabled
-  }))) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", {
+    fullscreenEnabled: fullscreenEnabled,
+    closeable: closeable,
+    shareBasePath: basePath,
+    screenSize: screenSize,
+    menuWidth: screenWidth,
+    trackingEnabled: trackingEnabled,
+    onClickItem: onClickMenuItem,
+    onClickMenu: onClickMenu,
+    onClickCloseViewer: onCloseViewer,
+    onRequestOpen: onMenuRequestOpen,
+    onRequestClose: onMenuRequestClose,
+    withDotItemClick: screenWidth > 400,
+    withoutScreensMenu: withoutScreensMenu,
+    refDots: menuDotsContainerRef
+  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: styles$6.content
+    className: styles$7.content
   }, screens.map(function (scr, i) {
+    var _ref13;
+
     var current = i === screenIndex;
     var active = i > screenIndex - neighborScreensActive && i < screenIndex + neighborScreensActive;
     var viewerScreen = /*#__PURE__*/React.createElement(ViewerScreen, {
       screen: scr,
+      screenState: current ? screenState : null,
       renderContext: renderContext,
       index: i,
       current: current,
       active: active,
       onPrevious: gotoPreviousScreen,
       onNext: gotoNextScreen,
-      onEnableInteraction: onEnableInteraction,
-      onDisableInteraction: onDisableInteraction,
+      onEnableInteraction: enableInteraction,
+      onDisableInteraction: disableInteraction,
       getMediaRef: function getMediaRef(mediaRef) {
         screensMediasRef.current[i] = mediaRef;
       }
     });
     var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
-    var screenTransform = landscape ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : "translateX(".concat(current ? 0 : '100%', ")");
+    var screenTransform = null;
+
+    if (landscape) {
+      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
+    } else {
+      screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
+    }
+
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, current && screenIndex > 0 ? /*#__PURE__*/React.createElement("button", {
@@ -1418,7 +1739,7 @@ var Viewer = function Viewer(_ref) {
         height: landscape ? screenHeight : null,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
-      className: classNames([styles$6.screen, _defineProperty({}, styles$6.current, current)]),
+      className: classNames([styles$7.screen, (_ref13 = {}, _defineProperty(_ref13, styles$7.current, current), _defineProperty(_ref13, styles$7.visible, current || withLandscapeSiblingsScreens), _ref13)]),
       tabIndex: active ? '0' : '-1'
       /* eslint-disable-line */
       ,
@@ -1510,17 +1831,11 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
 ViewerRoutes.propTypes = propTypes$1;
 ViewerRoutes.defaultProps = defaultProps$1;
 
-var home = "/";
-var screen = "/:screen";
-var defaultRoutes = {
-  home: home,
-  screen: screen
-};
-
-var _excluded = ["story", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "trackingVariables", "locale", "locales", "translations"];
+var _excluded = ["story", "screenComponents", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "trackingVariables", "locale", "locales", "translations"];
 var propTypes = {
   story: PropTypes$1.story,
   screen: PropTypes.string,
+  screenComponents: PropTypes.objectOf(PropTypes.elementType),
   memoryRouter: PropTypes.bool,
   basePath: PropTypes.string,
   routes: routes,
@@ -1535,6 +1850,7 @@ var propTypes = {
 var defaultProps = {
   story: null,
   screen: null,
+  screenComponents: null,
   memoryRouter: false,
   basePath: null,
   routes: defaultRoutes,
@@ -1549,6 +1865,7 @@ var defaultProps = {
 
 var ViewerContainer = function ViewerContainer(_ref) {
   var story = _ref.story,
+      screenComponents = _ref.screenComponents,
       memoryRouter = _ref.memoryRouter,
       basePath = _ref.basePath,
       routes = _ref.routes,
@@ -1599,7 +1916,10 @@ var ViewerContainer = function ViewerContainer(_ref) {
     locale: finalLocale
   }, /*#__PURE__*/React.createElement(FieldsProvider, {
     manager: fieldsManager
-  }, /*#__PURE__*/React.createElement(ScreensProvider, null, /*#__PURE__*/React.createElement(UserInteractionProvider, null, /*#__PURE__*/React.createElement(TrackingProvider, {
+  }, /*#__PURE__*/React.createElement(ScreensProvider, null, /*#__PURE__*/React.createElement(ComponentsProvider, {
+    namespace: SCREENS_NAMESPACE,
+    components: screenComponents || {}
+  }, /*#__PURE__*/React.createElement(UserInteractionProvider, null, /*#__PURE__*/React.createElement(TrackingProvider, {
     variables: finalTrackingVariables
   }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer, Object.assign({
     story: story,
@@ -1607,7 +1927,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
   }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes, Object.assign({
     story: story,
     basePath: basePath
-  }, otherProps)))))))));
+  }, otherProps))))))))));
   return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, {
     basename: !memoryRouter ? basePath : null
   }, /*#__PURE__*/React.createElement(RoutesProvider, {