@micromag/viewer 0.3.250 → 0.3.251

package/lib/index.js

@@ -16,7 +16,6 @@ var screens = require('@micromag/screens');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var web = require('@react-spring/web');
 var classNames = require('classnames');
 var reactHelmet = require('react-helmet');
 var EventEmitter = require('wolfy87-eventemitter');
@@ -27,6 +26,7 @@ var reactIntl = require('react-intl');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var core$1 = require('@react-spring/core');
+var web = require('@react-spring/web');
 var Scroll = require('@micromag/element-scroll');
 var ShareOptions = require('@micromag/element-share-options');
 var react = require('@use-gesture/react');
@@ -134,7 +134,6 @@ function useScreenInteraction() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       screens = _ref.screens,
       screenIndex = _ref.screenIndex,
-      screenWidth = _ref.screenWidth,
       _ref$disableCurrentSc = _ref.disableCurrentScreenNavigation,
       disableCurrentScreenNavigation = _ref$disableCurrentSc === void 0 ? false : _ref$disableCurrentSc,
       _ref$clickOnSiblings = _ref.clickOnSiblings,
@@ -204,14 +203,13 @@ function useScreenInteraction() {
     }
 
     var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
+        left = _currentTarget$getBou.left,
         width = _currentTarget$getBou.width;
 
-    var margin = (width - screenWidth) / 2;
-    var screenPreviousZone = screenWidth * (1 - nextScreenWidthPercent);
-    var previousZone = margin + screenPreviousZone;
-    var direction = x < previousZone ? 'previous' : 'next';
+    var relativeX = x - left;
+    var direction = relativeX < width * (1 - nextScreenWidthPercent) ? 'previous' : 'next';
     var lastIndex = screensCount - 1;
-    var nextIndex = index;
+    var nextIndex = index; // @todo investigate what clickOnSiblings is doing
 
     if (direction === 'previous' && !clickOnSiblings) {
       nextIndex = Math.max(0, screenIndex - 1);
@@ -533,14 +531,14 @@ var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","n
 
 var propTypes$i = {
   className: PropTypes__default["default"].string,
-  progressSpring: PropTypes__default["default"].number,
+  toggled: PropTypes__default["default"].number,
   button: PropTypes__default["default"].node,
   toggledButton: PropTypes__default["default"].node,
   toggledButtonClassName: PropTypes__default["default"].string
 };
 var defaultProps$i = {
   className: null,
-  progressSpring: 0,
+  toggled: 0,
   button: null,
   toggledButton: null,
   toggledButtonClassName: null
@@ -548,27 +546,26 @@ var defaultProps$i = {
 
 var ToggleButton = function ToggleButton(_ref) {
   var className = _ref.className,
-      progressSpring = _ref.progressSpring,
+      toggled = _ref.toggled,
       button = _ref.button,
       toggledButton = _ref.toggledButton,
       toggledButtonClassName = _ref.toggledButtonClassName;
   if (button === null) return false;
+
+  var getToggleButtonStyles = function getToggleButtonStyles(t) {
+    return {
+      transform: "translateY(".concat(t * -100, "%)")
+    };
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$e.normal,
-    style: {
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat(p * -100, "%)");
-      })
-    }
-  }, button), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+    style: getToggleButtonStyles(toggled)
+  }, button), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$e.toggled, _defineProperty__default["default"]({}, toggledButtonClassName, toggledButtonClassName !== null)]),
-    style: {
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat((p - 1) * -100, "%)");
-      })
-    }
+    style: getToggleButtonStyles(toggled - 1)
   }, toggledButton));
 };
 
@@ -579,20 +576,20 @@ var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heig
 
 var propTypes$h = {
   className: PropTypes__default["default"].string,
-  progressSpring: PropTypes__default["default"].number,
+  transitionProgress: PropTypes__default["default"].number,
   theme: core.PropTypes.viewerTheme,
   children: PropTypes__default["default"].node
 };
 var defaultProps$h = {
   className: null,
-  progressSpring: 0,
+  transitionProgress: 0,
   theme: null,
   children: null
 };
 
 var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
   var className = _ref.className,
-      progressSpring = _ref.progressSpring,
+      transitionProgress = _ref.transitionProgress,
       viewerTheme = _ref.theme,
       children = _ref.children;
 
@@ -610,26 +607,17 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$d.heightContainer,
     style: _objectSpread__default["default"]({
-      opacity: progressSpring,
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat((1 - p) * -2, "rem)");
-      }),
-      pointerEvents: progressSpring.to(function (p) {
-        return p < 0.25 ? 'none' : 'auto';
-      }),
-      zIndex: progressSpring.to(function (p) {
-        return Math.round(2 + p);
-      })
+      height: "".concat(transitionProgress * 100, "%"),
+      pointerEvents: transitionProgress < 0.25 ? 'none' : 'auto',
+      zIndex: Math.round(2 + transitionProgress)
     }, backgroundColorStyle)
-  }, children), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$d.backdrop,
     style: {
-      opacity: progressSpring.to(function (p) {
-        return utils.easings.easeOutQuint(p);
-      })
+      opacity: utils.easings.easeOutQuint(transitionProgress)
     }
   }));
 };
@@ -956,10 +944,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     }]
   })) : '');
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$a.isCurrent, current), _ref4)]),
-    style: {
-      paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
-    }
+    className: classNames__default["default"]([styles$a.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$a.isCurrent, current), _ref4)])
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: styles$a.button,
@@ -992,7 +977,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 ViewerMenuScreen.propTypes = propTypes$d;
 ViewerMenuScreen.defaultProps = defaultProps$d;
 
-var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
+var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","buttons":"micromag-viewer-menus-menu-preview-buttons","content":"micromag-viewer-menus-menu-preview-content","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
 
 var propTypes$c = {
   viewerTheme: core.PropTypes.viewerTheme,
@@ -1003,7 +988,6 @@ var propTypes$c = {
   onClickScreen: PropTypes__default["default"].func,
   maxThumbsWidth: PropTypes__default["default"].number,
   paddingTop: PropTypes__default["default"].number,
-  scrollDisabled: PropTypes__default["default"].bool,
   // @todo to reimplement:
   // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
@@ -1021,7 +1005,6 @@ var defaultProps$c = {
   onClickScreen: null,
   maxThumbsWidth: 140,
   paddingTop: null,
-  scrollDisabled: false,
   // toggleFullscreen: null,
   // fullscreenActive: false,
   // fullscreenEnabled: false,
@@ -1037,7 +1020,6 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClickScreen = _ref.onClickScreen,
       maxThumbsWidth = _ref.maxThumbsWidth,
       paddingTop = _ref.paddingTop,
-      scrollDisabled = _ref.scrollDisabled,
       className = _ref.className;
 
   var _useDimensionObserver = hooks.useDimensionObserver(),
@@ -1064,29 +1046,12 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null; // const { url: brandLogoUrl = null } = brandLogo || {};
-
-  var _useState = React.useState([]),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      screensMounted = _useState2[0],
-      setScreensMounted = _useState2[1]; // @todo optimize all of this the proper way
+  // @todo optimize all of this the proper way
   // const finalItems = useMemo(
   //     () => (!focusable ? items.map((s, i) => (i > 6 ? { screenId: s.screenId } : s)) : items),
   //     [items, focusable],
   // );
 
-
-  React.useEffect(function () {
-    if (items.length === screensMounted.length) {
-      return null;
-    }
-
-    var timeout = setTimeout(function () {
-      setScreensMounted([].concat(_toConsumableArray__default["default"](screensMounted), [true]));
-    }, 40);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [items, screensMounted, setScreensMounted]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
     style: _objectSpread__default["default"](_objectSpread__default["default"]({}, brandImageStyle), {}, {
@@ -1097,8 +1062,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.content,
     ref: containerRef
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-    className: styles$9.scroll,
-    disabled: scrollDisabled
+    className: styles$9.scroll
   }, /*#__PURE__*/React__default["default"].createElement("nav", {
     className: styles$9.nav,
     style: {
@@ -1108,36 +1072,38 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
-        screenId = _ref6.screenId;
+        screenId = _ref6.screenId,
+        _ref6$screen = _ref6.screen,
+        screen = _ref6$screen === void 0 ? null : _ref6$screen;
 
     var itemStyles = {
       width: "".concat(100 / thumbsPerLine, "%")
     };
-
-    var _ref7 = screenSize || {},
-        screenWidth = _ref7.width,
-        screenHeight = _ref7.height;
-
-    var screenMounted = screensMounted[index] || false;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       key: "item-".concat(screenId),
       className: styles$9.item,
       style: itemStyles
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$9.inner
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]([styles$9.frame, _defineProperty__default["default"]({}, styles$9.isLoading, !screenMounted)]),
+      className: styles$9.screen
+    }, screen === null ? /*#__PURE__*/React__default["default"].createElement("svg", {
+      className: styles$9.loading,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
       style: {
-        paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
+        animationDelay: "".concat(index * -50, "ms")
       }
-    }, screenMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuScreen, {
-      className: styles$9.screen,
+    }, /*#__PURE__*/React__default["default"].createElement("rect", {
+      width: "10",
+      height: "16"
+    })) : /*#__PURE__*/React__default["default"].createElement(ViewerMenuScreen, {
       item: item,
       index: index,
       screenSize: screenSize,
       onClick: onClickScreen,
       focusable: focusable
-    }) : null)));
+    })));
   }))))));
 };
 
@@ -1197,6 +1163,7 @@ var propTypes$a = {
   description: PropTypes__default["default"].string,
   items: core.PropTypes.menuItems,
   focusable: PropTypes__default["default"].bool,
+  // shouldLoad: PropTypes.bool, // @todo still needed? to re-implement?
   paddingTop: PropTypes__default["default"].number,
   currentScreenIndex: PropTypes__default["default"].number,
   shareUrl: PropTypes__default["default"].string,
@@ -1286,7 +1253,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
       setFinalShareUrl = _useState4[1];
 
   React.useEffect(function () {
-    setFinalShareUrl(shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex + 1) : shareUrl);
+    setFinalShareUrl(shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex) : shareUrl);
   }, [shareCurrentScreen, currentScreenIndex, setFinalShareUrl]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({}, className, className !== null)]),
@@ -1341,7 +1308,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
 ViewerMenuShare.propTypes = propTypes$a;
 ViewerMenuShare.defaultProps = defaultProps$a;
 
-var styles$6 = {"container":"micromag-viewer-container","menuContainer":"micromag-viewer-menuContainer","menuPreview":"micromag-viewer-menuPreview","menuShare":"micromag-viewer-menuShare","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","dots":"micromag-viewer-dots","menuTopContainer":"micromag-viewer-menuTopContainer","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView"};
+var styles$6 = {"container":"micromag-viewer-container","menuContainer":"micromag-viewer-menuContainer","menuPreview":"micromag-viewer-menuPreview","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","dots":"micromag-viewer-dots","menuTopContainer":"micromag-viewer-menuTopContainer","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuItemScreens":"micromag-viewer-menuItemScreens","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","isHidden":"micromag-viewer-isHidden","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView"};
 
 var propTypes$9 = {
   story: core.PropTypes.story.isRequired,
@@ -1446,11 +1413,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
       shareOpened = _useState4[0],
       setShareOpened = _useState4[1];
 
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      menuMounted = _useState6[0],
-      setMenuMounted = _useState6[1];
-
   var _useDimensionObserver = hooks.useDimensionObserver(),
       navContainerRef = _useDimensionObserver.ref,
       _useDimensionObserver2 = _useDimensionObserver.height,
@@ -1499,7 +1461,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
     var base = typeof window !== 'undefined' ? window.location.host : '';
     var path = shareBasePath !== null ? "".concat(base).concat(shareBasePath) : base;
     return path;
-  }, [shareBasePath]);
+  }, [shareBasePath]); // @note possible to extract some of that logic
+
   var onOpenMenu = React.useCallback(function () {
     setMenuOpened(true);
     setShareOpened(false);
@@ -1590,7 +1553,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     springParams: springParams
   }),
       bindShareDrag = _useDragProgress.bind,
-      draggingShare = _useDragProgress.dragging,
       shareOpenedProgress = _useDragProgress.progress;
 
   var computeMenuProgress = React.useCallback(function (_ref9) {
@@ -1638,7 +1600,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     springParams: springParams
   }),
       bindMenuDrag = _useDragProgress2.bind,
-      draggingMenu = _useDragProgress2.dragging,
       menuOpenedProgress = _useDragProgress2.progress;
 
   var keyboardShortcuts = React.useMemo(function () {
@@ -1654,13 +1615,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
   useKeyboardShortcuts(keyboardShortcuts); // should be zero if either screens menu or share menu is opened
 
   var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgress + shareOpenedProgress)));
-  React.useEffect(function () {
-    if ((menuOpened || draggingMenu) && !menuMounted) {
-      setMenuMounted(true);
-    } else if (!menuOpened && !draggingMenu && menuMounted) {
-      setMenuMounted(false);
-    }
-  }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$6.menuNavContainer, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles$6.withShadow, withShadow), _defineProperty__default["default"](_ref11, styles$6.isOpened, menuOpened || shareOpened), _ref11)]),
     ref: refDots,
@@ -1671,42 +1625,38 @@ var ViewerMenu = function ViewerMenu(_ref) {
     className: styles$6.menuTopContainer,
     ref: navContainerRef
   }, !withoutShareMenu ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: styles$6.menuItem
+    className: classNames__default["default"]([styles$6.menuItem, styles$6.menuShare])
   }, bindShareDrag()), /*#__PURE__*/React__default["default"].createElement(ToggleButton, {
     className: styles$6.slidingButton,
     button: /*#__PURE__*/React__default["default"].createElement(ShareButton, {
       className: styles$6.menuButton,
       onClick: onOpenShare,
       theme: menuTheme,
-      iconPosition: "left",
-      focusable: !shareOpened
+      iconPosition: "left"
     }),
     toggledButton: /*#__PURE__*/React__default["default"].createElement(CloseButton, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
-      iconPosition: "left",
-      focusable: shareOpened
+      iconPosition: "left"
     }),
-    progressSpring: shareOpenedProgress
+    toggled: shareOpenedProgress
   })) : null, !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: styles$6.menuItem
+    className: classNames__default["default"]([styles$6.menuItem, styles$6.menuItemScreens])
   }, bindMenuDrag()), /*#__PURE__*/React__default["default"].createElement(ToggleButton, {
     className: styles$6.slidingButton,
     button: /*#__PURE__*/React__default["default"].createElement(MenuButton, {
       className: styles$6.menuButton,
       onClick: onOpenMenu,
-      theme: menuTheme,
-      focusable: !menuOpened
+      theme: menuTheme
     }),
     toggledButton: /*#__PURE__*/React__default["default"].createElement(CloseButton, {
       className: styles$6.menuButton,
       onClick: onCloseMenu,
       theme: menuTheme,
-      iconPosition: "right",
-      focusable: menuOpened
+      iconPosition: "right"
     }),
-    progressSpring: menuOpenedProgress,
+    toggled: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
   })) : null), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
@@ -1720,14 +1670,15 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onClose: onClickCloseViewer,
     className: styles$6.dots,
     style: {
-      opacity: Math.pow(dotsOpacity, 5) // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
-
+      opacity: Math.pow(dotsOpacity, 5),
+      // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
+      pointerEvents: dotsOpacity < 1 ? 'none' : 'auto'
     }
   }))), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
-    progressSpring: shareOpenedProgress,
+    transitionProgress: shareOpenedProgress,
     theme: viewerTheme
-  }, draggingShare || shareOpened ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuShare, {
+  }, shareOpenedProgress > 0 ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -1742,9 +1693,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onClose: onCloseShare
   }) : null), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
-    progressSpring: menuOpenedProgress,
+    transitionProgress: menuOpenedProgress,
     theme: viewerTheme
-  }, menuMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
+  }, menuOpenedProgress > 0 ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     className: styles$6.menuPreview,
     screenSize: screenSize,
@@ -1756,7 +1707,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onShare: onShare,
     onClickScreen: onClickScreen,
     onClose: onCloseMenu,
-    scrollDisabled: draggingMenu,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
@@ -1765,9 +1715,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
 
 ViewerMenu.propTypes = propTypes$9;
 ViewerMenu.defaultProps = defaultProps$9;
-var ViewerMenu$1 = /*#__PURE__*/React__default["default"].memo(ViewerMenu);
 
-var styles$5 = {"container":"micromag-viewer-screen-container","inner":"micromag-viewer-screen-inner","navigationHint":"micromag-viewer-screen-navigationHint"};
+var styles$5 = {"container":"micromag-viewer-screen-container","navigationHint":"micromag-viewer-screen-navigationHint"};
 
 var propTypes$8 = {
   screen: core.PropTypes.screenComponent,
@@ -1777,7 +1726,6 @@ var propTypes$8 = {
   active: PropTypes__default["default"].bool,
   mediaRef: PropTypes__default["default"].func,
   width: PropTypes__default["default"].number,
-  index: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
   scale: PropTypes__default["default"].number,
   // withNavigationHint: PropTypes.bool,  // @todo
@@ -1789,7 +1737,6 @@ var defaultProps$8 = {
   screenState: null,
   current: false,
   active: true,
-  index: null,
   mediaRef: null,
   width: null,
   height: null,
@@ -1801,7 +1748,6 @@ var defaultProps$8 = {
 function ViewerScreen(_ref) {
   var screen = _ref.screen,
       renderContext = _ref.renderContext,
-      index = _ref.index,
       screenState = _ref.screenState,
       active = _ref.active,
       current = _ref.current,
@@ -1810,47 +1756,23 @@ function ViewerScreen(_ref) {
       height = _ref.height,
       scale = _ref.scale,
       className = _ref.className;
-
-  var _useState = React.useState(active || current),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      mounted = _useState2[0],
-      setMounted = _useState2[1];
-
-  React.useEffect(function () {
-    var timeout = null;
-
-    if (active !== mounted) {
-      timeout = setTimeout(function () {
-        setMounted(active);
-      }, 200);
-    }
-
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [active, mounted, setMounted, index]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5.inner,
     style: {
       width: width,
       height: height,
       transform: scale !== null ? "scale(".concat(scale, ")") : null,
-      transformOrigin: scale !== null ? '0 0' : null,
-      opacity: mounted ? 1 : null
+      transformOrigin: scale !== null ? '0 0' : null
     }
-  }, mounted ? /*#__PURE__*/React__default["default"].createElement(components.Screen, {
+  }, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
     screen: screen,
     renderContext: renderContext,
     screenState: screenState,
-    index: index,
     active: active,
     current: current,
     mediaRef: mediaRef
-  }) : null));
+  })));
 }
 
 ViewerScreen.propTypes = propTypes$8;
@@ -1963,10 +1885,9 @@ var stopDragEventsPropagation = {
 
 function getFormattedTimestamp(s) {
   var withMilliseconds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var parts = "".concat(s).split('.');
-  var seconds = parts[0];
-  var ms = withMilliseconds && parts.length > 1 ? ":".concat(parts[1].substring(0, 3)) : '';
-  return (s - (s %= 60)) / 60 + (9 < seconds ? ':' : ':0') + ~~s + ms; // eslint-disable-line
+  var sparts = withMilliseconds ? "".concat(s).split('.') : [];
+  var ms = sparts.length > 1 ? ":".concat(sparts[1].substring(0, 3)) : '';
+  return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + ~~s + ms; // eslint-disable-line
 }
 
 var SHOW_MILLISECONDS_THRESHOLD = 5; // show milliseconds when scrubbing if length of video is shorter than 5 seconds
@@ -2460,6 +2381,7 @@ var propTypes$2 = {
   screenState: PropTypes__default["default"].string,
   deviceScreens: core.PropTypes.deviceScreens,
   renderContext: core.PropTypes.renderContext,
+  visitor: core.PropTypes.visitor,
   onScreenChange: PropTypes__default["default"].func,
   tapNextScreenWidthPercent: PropTypes__default["default"].number,
   storyIsParsed: PropTypes__default["default"].bool,
@@ -2503,10 +2425,11 @@ var defaultProps$2 = {
   screenState: null,
   deviceScreens: utils.getDeviceScreens(),
   renderContext: 'view',
+  visitor: null,
   onScreenChange: null,
   tapNextScreenWidthPercent: 0.8,
   storyIsParsed: false,
-  neighborScreensActive: 1,
+  neighborScreensActive: 2,
   neighborScreenOffset: 105,
   neighborScreenScale: 0.8,
   withMetadata: false,
@@ -2545,6 +2468,7 @@ var Viewer = function Viewer(_ref) {
       screenState = _ref.screenState,
       deviceScreens = _ref.deviceScreens,
       renderContext = _ref.renderContext,
+      visitor = _ref.visitor,
       tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
       storyIsParsed = _ref.storyIsParsed,
       neighborScreensActive = _ref.neighborScreensActive,
@@ -2865,48 +2789,34 @@ var Viewer = function Viewer(_ref) {
     springParams: springParams
   }),
       isDragging = _useDragProgress.dragging,
-      progressSpring = _useDragProgress.progress,
+      screenIndexProgress = _useDragProgress.progress,
       dragContentBind = _useDragProgress.bind;
 
-  var getScreenStylesByIndex = function getScreenStylesByIndex(index, spring) {
+  var getScreenStylesByIndex = function getScreenStylesByIndex(index, progress) {
     if (transitionType === 'stack') {
+      var _t = index - progress;
+
+      var _clamped = Math.min(1, Math.max(0, _t));
+
+      var invert = Math.min(1, Math.max(0, -_t));
+      var opacity = Math.max(0, 1 - 0.75 * invert + (_t + 1)); // just hide other screens
+
+      if (Math.abs(_t) > neighborScreensActive) return {
+        opacity: 0
+      };
       return {
-        zIndex: index,
-        opacity: spring.to(function (progress) {
-          var t = index - progress;
-          var invert = Math.min(1, Math.max(0, -t));
-          if (Math.abs(t) > neighborScreensActive) return 0;
-          return Math.max(0, 1 - 0.75 * invert + (t + 1));
-        }),
-        transform: spring.to(function (progress) {
-          var t = index - progress;
-          var clamped = Math.min(1, Math.max(0, t));
-          var invert = Math.min(1, Math.max(0, -t));
-          if (Math.abs(t) > neighborScreensActive) return 'translateX(100%)';
-          return "translateX(".concat(clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")");
-        }),
-        boxShadow: spring.to(function (progress) {
-          var t = index - progress;
-          if (Math.abs(t) > neighborScreensActive) return null;
-          var clamped = Math.min(1, Math.max(0, t));
-          return "0 0 ".concat(4 * (1 - clamped), "rem ").concat(-0.5 * (1 - clamped), "rem black");
-        })
+        opacity: opacity,
+        transform: "translateX(".concat(_clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")"),
+        boxShadow: "0 0 ".concat(4 * (1 - _clamped), "rem ").concat(-0.5 * (1 - _clamped), "rem black"),
+        zIndex: index
       };
     }
 
+    var t = index - progress;
+    var clamped = Math.min(1, Math.max(0, Math.abs(t)));
     return {
-      opacity: spring.to(function (progress) {
-        var t = index - progress;
-        if (Math.abs(t) > neighborScreensActive) return 0;
-        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
-        return 1 - 0.75 * clamped;
-      }),
-      transform: spring.to(function (progress) {
-        var t = index - progress;
-        if (Math.abs(t) > neighborScreensActive) return "translate(100%)";
-        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
-        return "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")");
-      }),
+      opacity: 1 - 0.75 * clamped,
+      transform: "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")"),
       zIndex: screensCount - index
     };
   };
@@ -2963,8 +2873,8 @@ var Viewer = function Viewer(_ref) {
   useKeyboardShortcuts(keyboardShortcuts, {
     disabled: renderContext !== 'view'
   });
-  return /*#__PURE__*/React__default["default"].createElement(contexts.StoryProvider, {
-    story: parsedStory
+  return /*#__PURE__*/React__default["default"].createElement(contexts.VisitorProvider, {
+    visitor: visitor
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
@@ -2992,7 +2902,7 @@ var Viewer = function Viewer(_ref) {
     }), (_ref15 = {}, _defineProperty__default["default"](_ref15, styles$6.landscape, landscape), _defineProperty__default["default"](_ref15, styles$6.withoutGestures, withoutGestures), _defineProperty__default["default"](_ref15, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref15, styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), _defineProperty__default["default"](_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref15, styles$6.hasInteracted, hasInteracted), _defineProperty__default["default"](_ref15, styles$6.isDragging, isDragging), _defineProperty__default["default"](_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
-  }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu$1, {
+  }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu, {
     story: parsedStory,
     currentScreenIndex: screenIndex,
     withShadow: menuOverScreen && !withoutMenuShadow,
@@ -3027,12 +2937,12 @@ var Viewer = function Viewer(_ref) {
   }, screens.map(function (screen, i) {
     var current = screenIndex === i;
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
-    var screenStyles = getScreenStylesByIndex(i, progressSpring);
-    return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+    var screenStyles = getScreenStylesByIndex(i, screenIndexProgress);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
       style: screenStyles,
       className: classNames__default["default"]([styles$6.screenContainer, _defineProperty__default["default"]({}, styles$6.current, current)])
-    }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(ViewerScreen, {
+    }, screen !== null && active ? /*#__PURE__*/React__default["default"].createElement(ViewerScreen, {
       className: styles$6.screen,
       screen: screen,
       screenState: current ? screenState : null,
@@ -3146,7 +3056,7 @@ var defaultRoutes = {
   screen: screen
 };
 
-var _excluded = ["story", "screenComponents", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "visitor", "trackingVariables", "locale", "locales", "translations", "pathWithIndex"];
+var _excluded = ["story", "screenComponents", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "trackingVariables", "locale", "locales", "translations", "pathWithIndex"];
 var propTypes = {
   story: core.PropTypes.story,
   screen: PropTypes__default["default"].string,
@@ -3156,7 +3066,6 @@ var propTypes = {
   routes: routes,
   withoutRouter: PropTypes__default["default"].bool,
   googleApiKey: PropTypes__default["default"].string,
-  visitor: core.PropTypes.visitor,
   trackingVariables: core.PropTypes.trackingVariables,
   locale: PropTypes__default["default"].string,
   locales: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -3173,7 +3082,6 @@ var defaultProps = {
   routes: defaultRoutes,
   withoutRouter: false,
   googleApiKey: null,
-  visitor: null,
   trackingVariables: null,
   locale: 'en',
   locales: ['fr', 'en'],
@@ -3190,7 +3098,6 @@ var ViewerContainer = function ViewerContainer(_ref) {
       routes = _ref.routes,
       withoutRouter = _ref.withoutRouter,
       googleApiKey = _ref.googleApiKey,
-      visitor = _ref.visitor,
       trackingVariables = _ref.trackingVariables,
       locale = _ref.locale,
       locales = _ref.locales,
@@ -3240,9 +3147,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(screens.ScreensProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, {
     namespace: contexts.SCREENS_NAMESPACE,
     components: screenComponents || {}
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.VisitorProvider, {
-    visitor: visitor
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.PlaybackProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.TrackingProvider, {
+  }, /*#__PURE__*/React__default["default"].createElement(contexts.UserInteractionProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.PlaybackProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.TrackingProvider, {
     variables: finalTrackingVariables
   }, withoutRouter ? /*#__PURE__*/React__default["default"].createElement(Viewer, Object.assign({
     story: story,