@micromag/viewer 0.3.317 → 0.3.319

package/lib/index.js

@@ -49,6 +49,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
 var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
 
+// eslint-disable-next-line import/prefer-default-export
 var routes = PropTypes__default["default"].shape({
   home: PropTypes__default["default"].string.isRequired,
   screen: PropTypes__default["default"].string.isRequired
@@ -56,11 +57,9 @@ var routes = PropTypes__default["default"].shape({
 
 function useKeyboardShortcuts() {
   var shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   React.useEffect(function () {
     var onKey = function onKey(e) {
       if (['input', 'textarea'].reduce(function (foundMatch, match) {
@@ -68,19 +67,15 @@ function useKeyboardShortcuts() {
       }, 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);
@@ -92,23 +87,22 @@ function useKeyboardShortcuts() {
 function checkClickable(el) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var parentDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-
   var _ref = options || {},
-      _ref$maxParentDistanc = _ref.maxParentDistance,
-      maxParentDistance = _ref$maxParentDistanc === void 0 ? 5 : _ref$maxParentDistanc,
-      _ref$tags = _ref.tags,
-      tags = _ref$tags === void 0 ? ['BUTTON', 'A', 'INPUT', 'TEXTAREA'] : _ref$tags;
-
+    _ref$maxParentDistanc = _ref.maxParentDistance,
+    maxParentDistance = _ref$maxParentDistanc === void 0 ? 5 : _ref$maxParentDistanc,
+    _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;
-      _ref2.dataset;
-
+    _ref2$tagName = _ref2.tagName,
+    tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
+    _ref2$parentNode = _ref2.parentNode,
+    parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode;
+    _ref2.dataset;
   if (tagName === 'BODY') {
     return false;
-  } // Check if video is suspended
+  }
+
+  // Check if video is suspended
   // if (
   //     tagName === 'VIDEO' &&
   //     typeof dataset.isSuspended !== 'undefined' &&
@@ -117,54 +111,47 @@ function checkClickable(el) {
   //     return true;
   // }
 
-
   if (tags.map(function (it) {
     return it.toLowerCase();
   }).indexOf(tagName.toLowerCase()) !== -1) {
     return true;
   }
-
   if (parentDistance < maxParentDistance) {
     return checkClickable(parentNode, options, parentDistance + 1);
   }
-
   return false;
 }
 
 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,
-      clickOnSiblings = _ref$clickOnSiblings === void 0 ? false : _ref$clickOnSiblings,
-      _ref$nextScreenWidthP = _ref.nextScreenWidthPercent,
-      nextScreenWidthPercent = _ref$nextScreenWidthP === void 0 ? 0.5 : _ref$nextScreenWidthP,
-      _ref$onInteract = _ref.onInteract,
-      onInteract = _ref$onInteract === void 0 ? null : _ref$onInteract,
-      _ref$onNavigate = _ref.onNavigate,
-      onNavigate = _ref$onNavigate === void 0 ? null : _ref$onNavigate;
-
+    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,
+    clickOnSiblings = _ref$clickOnSiblings === void 0 ? false : _ref$clickOnSiblings,
+    _ref$nextScreenWidthP = _ref.nextScreenWidthPercent,
+    nextScreenWidthPercent = _ref$nextScreenWidthP === void 0 ? 0.5 : _ref$nextScreenWidthP,
+    _ref$onInteract = _ref.onInteract,
+    onInteract = _ref$onInteract === void 0 ? null : _ref$onInteract,
+    _ref$onNavigate = _ref.onNavigate,
+    onNavigate = _ref$onNavigate === void 0 ? null : _ref$onNavigate;
   var _useState = React.useState(screens.reduce(function (map, _ref2) {
-    var id = _ref2.id;
-    return _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, true));
-  }, {})),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      screensInteractionEnabled = _useState2[0],
-      setScreensInteractionEnabled = _useState2[1];
-
+      var id = _ref2.id;
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, true));
+    }, {})),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    screensInteractionEnabled = _useState2[0],
+    setScreensInteractionEnabled = _useState2[1];
   var _ref3 = screens[screenIndex] || {},
-      _ref3$id = _ref3.id,
-      screenId = _ref3$id === void 0 ? screenIndex : _ref3$id;
-
+    _ref3$id = _ref3.id,
+    screenId = _ref3$id === void 0 ? screenIndex : _ref3$id;
   var _screensInteractionEn = screensInteractionEnabled[screenId],
-      currentScreenInteractionEnabled = _screensInteractionEn === void 0 ? true : _screensInteractionEn;
+    currentScreenInteractionEnabled = _screensInteractionEn === void 0 ? true : _screensInteractionEn;
   var updateInteraction = React.useCallback(function (newValue) {
     var _screensInteractionEn2 = screensInteractionEnabled[screenId],
-        currentValue = _screensInteractionEn2 === void 0 ? true : _screensInteractionEn2;
-
+      currentValue = _screensInteractionEn2 === void 0 ? true : _screensInteractionEn2;
     if (currentValue !== newValue) {
       setScreensInteractionEnabled(screens.reduce(function (map, _ref4) {
         var id = _ref4.id;
@@ -180,12 +167,11 @@ function useScreenInteraction() {
   }, [updateInteraction]);
   var interact = React.useCallback(function (_ref5) {
     var event = _ref5.event,
-        target = _ref5.target,
-        currentTarget = _ref5.currentTarget,
-        x = _ref5.x,
-        y = _ref5.y,
-        index = _ref5.index;
-
+      target = _ref5.target,
+      currentTarget = _ref5.currentTarget,
+      x = _ref5.x,
+      y = _ref5.y,
+      index = _ref5.index;
     if (onInteract !== null) {
       onInteract({
         event: event,
@@ -196,30 +182,24 @@ function useScreenInteraction() {
         y: y
       });
     }
-
     var screensCount = screens.length;
     var tappedCurrent = screenIndex === index;
-
     if (disableCurrentScreenNavigation && tappedCurrent || checkClickable(target) || tappedCurrent && !currentScreenInteractionEnabled) {
       return;
     }
-
     var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
-        width = _currentTarget$getBou.width;
-
+      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 lastIndex = screensCount - 1;
     var nextIndex = index;
-
     if (direction === 'previous' && !clickOnSiblings) {
       nextIndex = Math.max(0, screenIndex - 1);
     } else if (direction === 'next' && !clickOnSiblings) {
       nextIndex = Math.min(lastIndex, screenIndex + 1);
     }
-
     if (onNavigate !== null) {
       onNavigate({
         index: index,
@@ -265,9 +245,9 @@ var propTypes$n = {
   onClick: PropTypes__default["default"].func,
   refButton: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any // eslint-disable-line
-
   })])
 };
+
 var defaultProps$n = {
   type: 'button',
   theme: null,
@@ -293,35 +273,32 @@ var defaultProps$n = {
   onClick: null,
   refButton: null
 };
-
 var Button = function Button(_ref) {
   var _ref2;
-
   var type = _ref.type,
-      theme = _ref.theme;
-      _ref.size;
-      var href = _ref.href,
-      external = _ref.external,
-      direct = _ref.direct,
-      target = _ref.target,
-      label = _ref.label,
-      children = _ref.children,
-      focusable = _ref.focusable;
-      _ref.active;
-      var icon = _ref.icon,
-      iconPosition = _ref.iconPosition,
-      disabled = _ref.disabled,
-      loading = _ref.loading,
-      disableOnLoading = _ref.disableOnLoading;
-      _ref.withoutTheme;
-      var asLink = _ref.asLink,
-      onClick = _ref.onClick,
-      className = _ref.className,
-      iconClassName = _ref.iconClassName,
-      labelClassName = _ref.labelClassName,
-      refButton = _ref.refButton,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
-
+    theme = _ref.theme;
+    _ref.size;
+    var href = _ref.href,
+    external = _ref.external,
+    direct = _ref.direct,
+    target = _ref.target,
+    label = _ref.label,
+    children = _ref.children,
+    focusable = _ref.focusable;
+    _ref.active;
+    var icon = _ref.icon,
+    iconPosition = _ref.iconPosition,
+    disabled = _ref.disabled,
+    loading = _ref.loading,
+    disableOnLoading = _ref.disableOnLoading;
+    _ref.withoutTheme;
+    var asLink = _ref.asLink,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    iconClassName = _ref.iconClassName,
+    labelClassName = _ref.labelClassName,
+    refButton = _ref.refButton,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(components.Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
@@ -329,19 +306,14 @@ var Button = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var buttonClassNames = classNames__default["default"]([styles$g.container, styles$g["icon-".concat(iconPosition)], (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.withIcon, hasIcon), _defineProperty__default["default"](_ref2, styles$g.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref2, styles$g.withText, text !== null), _defineProperty__default["default"](_ref2, styles$g.isLink, href !== null), _defineProperty__default["default"](_ref2, styles$g.asLink, asLink), _defineProperty__default["default"](_ref2, styles$g.isDisabled, disabled), _defineProperty__default["default"](_ref2, styles$g.isLoading, loading), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]);
-
   var _ref3 = theme || {},
-      _ref3$colors = _ref3.colors,
-      colors = _ref3$colors === void 0 ? null : _ref3$colors;
-
+    _ref3$colors = _ref3.colors,
+    colors = _ref3$colors === void 0 ? null : _ref3$colors;
   var _ref4 = colors || {},
-      _ref4$primary = _ref4.primary,
-      brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
-
+    _ref4$primary = _ref4.primary,
+    brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
   var primaryColor = utils.getStyleFromColor(brandPrimaryColor, 'color');
-
   var buttonStyles = _objectSpread__default["default"]({}, primaryColor);
-
   var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasInlineIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: classNames__default["default"]([styles$g.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -353,7 +325,6 @@ var Button = function Button(_ref) {
   }, text), iconPosition === 'right' ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: classNames__default["default"]([styles$g.icon, styles$g.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, icon) : null, hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
-
   if (href !== null) {
     var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
       disabled: disabled
@@ -375,7 +346,6 @@ var Button = function Button(_ref) {
       tabIndex: focusable ? '' : '-1'
     }), content);
   }
-
   return /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, props, {
     type: type,
     className: buttonClassNames,
@@ -386,7 +356,6 @@ var Button = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-
 Button.propTypes = propTypes$n;
 Button.defaultProps = defaultProps$n;
 
@@ -399,18 +368,15 @@ var propTypes$m = {
 var defaultProps$m = {
   className: null
 };
-
 var IconButton = function IconButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
-
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
   return /*#__PURE__*/React__default["default"].createElement(Button, Object.assign({
     className: classNames__default["default"]([styles$f.container, _defineProperty__default["default"]({}, className, className !== null)]),
     labelClassName: styles$f.label,
     iconClassName: styles$f.icon
   }, props));
 };
-
 IconButton.propTypes = propTypes$m;
 IconButton.defaultProps = defaultProps$m;
 
@@ -421,11 +387,9 @@ var propTypes$l = {
 var defaultProps$l = {
   className: null
 };
-
 var CloseButton = function CloseButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
-
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React__default["default"].createElement(IconButton, Object.assign({
     className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
@@ -447,7 +411,6 @@ var CloseButton = function CloseButton(_ref) {
     }))
   }, props));
 };
-
 CloseButton.propTypes = propTypes$l;
 CloseButton.defaultProps = defaultProps$l;
 
@@ -458,11 +421,9 @@ var propTypes$k = {
 var defaultProps$k = {
   className: null
 };
-
 var MenuButton = function MenuButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
-
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React__default["default"].createElement(IconButton, Object.assign({
     className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
@@ -486,7 +447,6 @@ var MenuButton = function MenuButton(_ref) {
     }))
   }, props));
 };
-
 MenuButton.propTypes = propTypes$k;
 MenuButton.defaultProps = defaultProps$k;
 
@@ -497,11 +457,9 @@ var propTypes$j = {
 var defaultProps$j = {
   className: null
 };
-
 var ShareButton = function ShareButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
-
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React__default["default"].createElement(IconButton, Object.assign({
     className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
@@ -526,7 +484,6 @@ var ShareButton = function ShareButton(_ref) {
     }))
   }, props));
 };
-
 ShareButton.propTypes = propTypes$j;
 ShareButton.defaultProps = defaultProps$j;
 
@@ -547,13 +504,12 @@ var defaultProps$i = {
   toggledButton: null,
   toggledButtonClassName: null
 };
-
 var ToggleButton = function ToggleButton(_ref) {
   var className = _ref.className,
-      progressSpring = _ref.progressSpring,
-      button = _ref.button,
-      toggledButton = _ref.toggledButton,
-      toggledButtonClassName = _ref.toggledButtonClassName;
+    progressSpring = _ref.progressSpring,
+    button = _ref.button,
+    toggledButton = _ref.toggledButton,
+    toggledButtonClassName = _ref.toggledButtonClassName;
   if (button === null) return false;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className !== null)])
@@ -573,7 +529,6 @@ var ToggleButton = function ToggleButton(_ref) {
     }
   }, toggledButton));
 };
-
 ToggleButton.propTypes = propTypes$i;
 ToggleButton.defaultProps = defaultProps$i;
 
@@ -592,21 +547,17 @@ var defaultProps$h = {
   theme: null,
   children: null
 };
-
 var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
   var className = _ref.className,
-      progressSpring = _ref.progressSpring,
-      viewerTheme = _ref.theme,
-      children = _ref.children;
-
+    progressSpring = _ref.progressSpring,
+    viewerTheme = _ref.theme,
+    children = _ref.children;
   var _ref2 = viewerTheme || {},
-      _ref2$background = _ref2.background,
-      background = _ref2$background === void 0 ? null : _ref2$background;
-
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? null : _ref2$background;
   var _ref3 = background || {},
-      _ref3$color = _ref3.color,
-      brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
-
+    _ref3$color = _ref3.color,
+    brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
   var backgroundColorStyle = utils.getStyleFromColor(brandBackgroundColor, 'backgroundColor');
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className !== null)]),
@@ -636,7 +587,6 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     }
   }));
 };
-
 ViewerMenuContainer.propTypes = propTypes$h;
 ViewerMenuContainer.defaultProps = defaultProps$h;
 
@@ -665,38 +615,33 @@ var defaultProps$g = {
   onClick: null,
   className: null
 };
-
 var ViewerMenuDot = function ViewerMenuDot(_ref) {
   var _ref3;
-
   var current = _ref.current,
-      active = _ref.active,
-      colors = _ref.colors,
-      count = _ref.count,
-      subIndex = _ref.subIndex,
-      vertical = _ref.vertical,
-      onClick = _ref.onClick,
-      className = _ref.className;
-
+    active = _ref.active,
+    colors = _ref.colors,
+    count = _ref.count,
+    subIndex = _ref.subIndex,
+    vertical = _ref.vertical,
+    onClick = _ref.onClick,
+    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(255, 255, 255, 0.25)' : _ref2$secondary;
-
+    _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(255, 255, 255, 0.25)' : _ref2$secondary;
   var _useSpring = core$1.useSpring(function () {
-    return {
-      scaleX: 0,
-      config: {
-        tension: 200,
-        friction: 30
-      }
-    };
-  }),
-      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
-      dotSpringStyles = _useSpring2[0],
-      setDotSpringProps = _useSpring2[1];
-
+      return {
+        scaleX: 0,
+        config: {
+          tension: 200,
+          friction: 30
+        }
+      };
+    }),
+    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+    dotSpringStyles = _useSpring2[0],
+    setDotSpringProps = _useSpring2[1];
   React.useEffect(function () {
     var activeRatio = active ? 1 : 0;
     var ratio = count > 1 && current ? (subIndex + 1) / count : activeRatio;
@@ -726,11 +671,10 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     })
   }))));
 };
-
 ViewerMenuDot.propTypes = propTypes$g;
 ViewerMenuDot.defaultProps = defaultProps$g;
 
-var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","vertical":"micromag-viewer-menus-menu-dots-vertical"};
+var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
 var _excluded$3 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "withItemClick", "withoutScreensMenu", "onClose", "className"];
 var propTypes$f = {
@@ -760,36 +704,30 @@ var defaultProps$f = {
   onClose: null,
   className: null
 };
-
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
   var _ref5;
-
   var direction = _ref.direction,
-      items = _ref.items,
-      onClickDot = _ref.onClickDot,
-      onClickScreensMenu = _ref.onClickScreensMenu,
-      colors = _ref.colors,
-      closeable = _ref.closeable,
-      withItemClick = _ref.withItemClick,
-      withoutScreensMenu = _ref.withoutScreensMenu,
-      onClose = _ref.onClose,
-      className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
-
+    items = _ref.items,
+    onClickDot = _ref.onClickDot,
+    onClickScreensMenu = _ref.onClickScreensMenu,
+    colors = _ref.colors,
+    closeable = _ref.closeable,
+    withItemClick = _ref.withItemClick,
+    withoutScreensMenu = _ref.withoutScreensMenu,
+    onClose = _ref.onClose,
+    className = _ref.className,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
   var _ref2 = colors || {},
-      _ref2$primary = _ref2.primary,
-      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
-
+    _ref2$primary = _ref2.primary,
+    primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
   var intl = reactIntl.useIntl();
   var currentIndex = items.findIndex(function (_ref3) {
     var _ref3$current = _ref3.current,
-        current = _ref3$current === void 0 ? false : _ref3$current;
+      current = _ref3$current === void 0 ? false : _ref3$current;
     return current;
   });
-
   var _ref4 = props || {},
-      style = _ref4.style;
-
+    style = _ref4.style;
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"]([styles$b.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles$b.vertical, direction === 'vertical'), _ref5)]),
     "aria-label": intl.formatMessage({
@@ -819,13 +757,12 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     className: styles$b.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
-        _ref6$current = _ref6.current,
-        current = _ref6$current === void 0 ? false : _ref6$current,
-        _ref6$count = _ref6.count,
-        count = _ref6$count === void 0 ? 1 : _ref6$count,
-        _ref6$subIndex = _ref6.subIndex,
-        subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
-
+      _ref6$current = _ref6.current,
+      current = _ref6$current === void 0 ? false : _ref6$current,
+      _ref6$count = _ref6.count,
+      count = _ref6$count === void 0 ? 1 : _ref6$count,
+      _ref6$subIndex = _ref6.subIndex,
+      subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
     return /*#__PURE__*/React__default["default"].createElement(ViewerMenuDot, {
       key: "item-".concat(index + 1),
       current: current,
@@ -869,7 +806,6 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     icon: faTimes.faTimes
   }))) : null));
 };
-
 ViewerMenuDots.propTypes = propTypes$f;
 ViewerMenuDots.defaultProps = defaultProps$f;
 
@@ -879,7 +815,6 @@ var propTypes$e = {
 var defaultProps$e = {
   className: null
 };
-
 var StackIcon = function StackIcon(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
@@ -895,7 +830,6 @@ var StackIcon = function StackIcon(_ref) {
     points: "10.5 1.5 10.5 16.5 1.5 16.5 1.5 17.5 11.5 17.5 11.5 1.5 10.5 1.5"
   }));
 };
-
 StackIcon.propTypes = propTypes$e;
 StackIcon.defaultProps = defaultProps$e;
 
@@ -917,29 +851,24 @@ var defaultProps$d = {
   screenSize: null,
   focusable: true
 };
-
 var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
   var _ref4;
-
   var className = _ref.className,
-      item = _ref.item,
-      index = _ref.index,
-      _onClick = _ref.onClick,
-      screenSize = _ref.screenSize,
-      focusable = _ref.focusable;
+    item = _ref.item,
+    index = _ref.index,
+    _onClick = _ref.onClick,
+    screenSize = _ref.screenSize,
+    focusable = _ref.focusable;
   var intl = reactIntl.useIntl();
-
   var _ref2 = item || {},
-      _ref2$current = _ref2.current,
-      current = _ref2$current === void 0 ? false : _ref2$current,
-      screen = _ref2.screen,
-      _ref2$count = _ref2.count,
-      count = _ref2$count === void 0 ? 1 : _ref2$count;
-
+    _ref2$current = _ref2.current,
+    current = _ref2$current === void 0 ? false : _ref2$current,
+    screen = _ref2.screen,
+    _ref2$count = _ref2.count,
+    count = _ref2$count === void 0 ? 1 : _ref2$count;
   var _ref3 = screenSize || {},
-      screenWidth = _ref3.width,
-      screenHeight = _ref3.height;
-
+    screenWidth = _ref3.width,
+    screenHeight = _ref3.height;
   var screenAriaLabel = "".concat(intl.formatMessage({
     id: "LkVfwW",
     defaultMessage: [{
@@ -991,11 +920,10 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     withSize: true
   }) : null));
 };
-
 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","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","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","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 propTypes$c = {
   viewerTheme: core.PropTypes.viewerTheme,
@@ -1030,59 +958,54 @@ var defaultProps$c = {
   // fullscreenEnabled: false,
   className: null
 };
-
 var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var viewerTheme = _ref.viewerTheme,
-      screenSize = _ref.screenSize,
-      menuWidth = _ref.menuWidth,
-      items = _ref.items,
-      focusable = _ref.focusable,
-      onClickScreen = _ref.onClickScreen,
-      maxThumbsWidth = _ref.maxThumbsWidth,
-      paddingTop = _ref.paddingTop,
-      scrollDisabled = _ref.scrollDisabled,
-      className = _ref.className;
-
+    screenSize = _ref.screenSize,
+    menuWidth = _ref.menuWidth,
+    items = _ref.items,
+    focusable = _ref.focusable,
+    onClickScreen = _ref.onClickScreen,
+    maxThumbsWidth = _ref.maxThumbsWidth,
+    paddingTop = _ref.paddingTop,
+    scrollDisabled = _ref.scrollDisabled,
+    className = _ref.className;
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      containerRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      contentWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-
+    containerRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    contentWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // @note cool, should be in recipes
+
   // @todo reimplement the brand logo
   // const { background = null, logo: brandLogo = null } = viewerTheme || {};
-
   var _ref2 = viewerTheme || {},
-      _ref2$background = _ref2.background,
-      background = _ref2$background === void 0 ? null : _ref2$background;
-
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? null : _ref2$background;
   var _ref3 = background || {},
-      _ref3$image = _ref3.image,
-      image = _ref3$image === void 0 ? null : _ref3$image;
-
+    _ref3$image = _ref3.image,
+    image = _ref3$image === void 0 ? null : _ref3$image;
   var _ref4 = image || {},
-      _ref4$url = _ref4.url,
-      brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
-
+    _ref4$url = _ref4.url,
+    brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
-  } : null; // const { url: brandLogoUrl = null } = brandLogo || {};
+  } : 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
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    screensMounted = _useState2[0],
+    setScreensMounted = _useState2[1];
+
+  // @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 function () {};
     }
-
     var timeout = setTimeout(function () {
       setScreensMounted([].concat(_toConsumableArray__default["default"](screensMounted), [true]));
     }, 40);
@@ -1111,16 +1034,13 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
-        screenId = _ref6.screenId;
-
+      screenId = _ref6.screenId;
     var itemStyles = {
       width: "".concat(100 / thumbsPerLine, "%")
     };
-
     var _ref7 = screenSize || {},
-        screenWidth = _ref7.width,
-        screenHeight = _ref7.height;
-
+      screenWidth = _ref7.width,
+      screenHeight = _ref7.height;
     var screenMounted = screensMounted[index] || false;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       key: "item-".concat(screenId),
@@ -1143,7 +1063,6 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }) : null)));
   }))))));
 };
-
 ViewerMenuPreview.propTypes = propTypes$c;
 ViewerMenuPreview.defaultProps = defaultProps$c;
 
@@ -1163,13 +1082,12 @@ var defaultProps$b = {
   description: null,
   className: null
 };
-
 var MicromagPreview = function MicromagPreview(_ref) {
   var screen = _ref.screen,
-      title = _ref.title,
-      url = _ref.url,
-      description = _ref.description,
-      className = _ref.className;
+    title = _ref.title,
+    url = _ref.url,
+    description = _ref.description,
+    className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1187,7 +1105,6 @@ var MicromagPreview = function MicromagPreview(_ref) {
     className: styles$8.url
   }, url) : null, /*#__PURE__*/React__default["default"].createElement("p", null, description)));
 };
-
 MicromagPreview.propTypes = propTypes$b;
 MicromagPreview.defaultProps = defaultProps$b;
 
@@ -1219,75 +1136,62 @@ var defaultProps$a = {
   onShare: null,
   className: null
 };
-
 var ViewerMenuShare = function ViewerMenuShare(_ref) {
   var viewerTheme = _ref.viewerTheme,
-      menuWidth = _ref.menuWidth,
-      title = _ref.title,
-      description = _ref.description,
-      items = _ref.items,
-      focusable = _ref.focusable,
-      paddingTop = _ref.paddingTop,
-      currentScreenIndex = _ref.currentScreenIndex,
-      shareUrl = _ref.shareUrl,
-      onShare = _ref.onShare,
-      className = _ref.className;
-
+    menuWidth = _ref.menuWidth,
+    title = _ref.title,
+    description = _ref.description,
+    items = _ref.items,
+    focusable = _ref.focusable,
+    paddingTop = _ref.paddingTop,
+    currentScreenIndex = _ref.currentScreenIndex,
+    shareUrl = _ref.shareUrl,
+    onShare = _ref.onShare,
+    className = _ref.className;
   // Viewer theme
   var _ref2 = viewerTheme || {},
-      _ref2$background = _ref2.background,
-      background = _ref2$background === void 0 ? null : _ref2$background;
-
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? null : _ref2$background;
   var _ref3 = background || {},
-      _ref3$image = _ref3.image,
-      image = _ref3$image === void 0 ? null : _ref3$image;
-
+    _ref3$image = _ref3.image,
+    image = _ref3$image === void 0 ? null : _ref3$image;
   var _ref4 = image || {},
-      _ref4$url = _ref4.url,
-      brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
-
+    _ref4$url = _ref4.url,
+    brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null;
   var coverScreen = React.useMemo(function () {
     var _ref5 = items[0] || {},
-        _ref5$screen = _ref5.screen,
-        screen = _ref5$screen === void 0 ? null : _ref5$screen;
-
+      _ref5$screen = _ref5.screen,
+      screen = _ref5$screen === void 0 ? null : _ref5$screen;
     return screen;
   }, [items]);
   var currentScreen = React.useMemo(function () {
     var found = items.find(function (item) {
       var _ref6 = item || {},
-          _ref6$current = _ref6.current,
-          current = _ref6$current === void 0 ? false : _ref6$current;
-
+        _ref6$current = _ref6.current,
+        current = _ref6$current === void 0 ? false : _ref6$current;
       return current;
     });
-
     var _ref7 = found || {},
-        _ref7$screen = _ref7.screen,
-        screen = _ref7$screen === void 0 ? null : _ref7$screen;
-
+      _ref7$screen = _ref7.screen,
+      screen = _ref7$screen === void 0 ? null : _ref7$screen;
     return screen;
   }, [items, currentScreenIndex, focusable]);
-
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      shareCurrentScreen = _useState2[0],
-      setShareCurrentScreen = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    shareCurrentScreen = _useState2[0],
+    setShareCurrentScreen = _useState2[1];
   var onShareModeChange = React.useCallback(function () {
     setShareCurrentScreen(function (value) {
       return !value;
     });
   }, [setShareCurrentScreen]);
-
   var _useState3 = React.useState(shareUrl),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      finalShareUrl = _useState4[0],
-      setFinalShareUrl = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    finalShareUrl = _useState4[0],
+    setFinalShareUrl = _useState4[1];
   React.useEffect(function () {
     setFinalShareUrl(shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex + 1) : shareUrl);
   }, [shareCurrentScreen, currentScreenIndex, setFinalShareUrl]);
@@ -1340,11 +1244,10 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     shareCurrentScreen: shareCurrentScreen
   })))));
 };
-
 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","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
+var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","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","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
 
 var propTypes$9 = {
   story: core.PropTypes.story.isRequired,
@@ -1367,9 +1270,9 @@ var propTypes$9 = {
   onClickCloseViewer: PropTypes__default["default"].func,
   refDots: PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any // eslint-disable-line
-
   })
 };
+
 var defaultProps$9 = {
   currentScreenIndex: 0,
   toggleFullscreen: null,
@@ -1390,75 +1293,63 @@ var defaultProps$9 = {
   onClickCloseViewer: null,
   refDots: null
 };
-
 var ViewerMenu = function ViewerMenu(_ref) {
   var _ref11;
-
   var story = _ref.story,
-      currentScreenIndex = _ref.currentScreenIndex,
-      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,
-      withoutShareMenu = _ref.withoutShareMenu,
-      customOnClickScreen = _ref.onClickScreen;
-      _ref.onClickMenu;
-      var onClickCloseViewer = _ref.onClickCloseViewer,
-      refDots = _ref.refDots;
+    currentScreenIndex = _ref.currentScreenIndex,
+    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,
+    withoutShareMenu = _ref.withoutShareMenu,
+    customOnClickScreen = _ref.onClickScreen;
+    _ref.onClickMenu;
+    var 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,
-      _story$metadata = story.metadata,
-      metadata = _story$metadata === void 0 ? null : _story$metadata;
-
+    screens = _story$components === void 0 ? [] : _story$components,
+    _story$title = story.title,
+    title = _story$title === void 0 ? null : _story$title,
+    _story$metadata = story.metadata,
+    metadata = _story$metadata === void 0 ? null : _story$metadata;
   var _ref2 = metadata || {},
-      _ref2$description = _ref2.description,
-      description = _ref2$description === void 0 ? null : _ref2$description;
-
+    _ref2$description = _ref2.description,
+    description = _ref2$description === void 0 ? null : _ref2$description;
   var currentScreen = screens !== null ? screens[currentScreenIndex] || null : null;
-
   var _ref3 = currentScreen || {},
-      _ref3$id = _ref3.id,
-      screenId = _ref3$id === void 0 ? null : _ref3$id,
-      _ref3$type = _ref3.type,
-      screenType = _ref3$type === void 0 ? null : _ref3$type;
-
+    _ref3$id = _ref3.id,
+    screenId = _ref3$id === void 0 ? null : _ref3$id,
+    _ref3$type = _ref3.type,
+    screenType = _ref3$type === void 0 ? null : _ref3$type;
   var _ref4 = viewerTheme || {},
-      _ref4$menuTheme = _ref4.menuTheme,
-      menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
-
+    _ref4$menuTheme = _ref4.menuTheme,
+    menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
   var _useViewerSize = contexts.useViewerSize(),
-      viewerHeight = _useViewerSize.height;
-
+    viewerHeight = _useViewerSize.height;
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      menuOpened = _useState2[0],
-      setMenuOpened = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    menuOpened = _useState2[0],
+    setMenuOpened = _useState2[1];
   var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      shareOpened = _useState4[0],
-      setShareOpened = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    shareOpened = _useState4[0],
+    setShareOpened = _useState4[1];
   var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      menuMounted = _useState6[0],
-      setMenuMounted = _useState6[1];
-
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    menuMounted = _useState6[0],
+    setMenuMounted = _useState6[1];
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      navContainerRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.height,
-      navContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-
+    navContainerRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.height,
+    navContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var items = React.useMemo(function () {
     return screens.map(function (it) {
       var children = screens.filter(function (s) {
@@ -1480,7 +1371,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       };
     }).filter(function (_ref5) {
       var _ref5$visible = _ref5.visible,
-          visible = _ref5$visible === void 0 ? true : _ref5$visible;
+        visible = _ref5$visible === void 0 ? true : _ref5$visible;
       return visible;
     });
   }, [screens, screenId]);
@@ -1525,11 +1416,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, [setShareOpened, setMenuOpened, trackScreenEvent]);
   var onClickScreen = React.useCallback(function (screen) {
     setMenuOpened(false);
-
     if (customOnClickScreen !== null) {
       customOnClickScreen(screen);
     }
-
     var index = items.findIndex(function (_ref6) {
       var id = _ref6.id;
       return id === screenId;
@@ -1542,40 +1431,34 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, [trackScreenEvent]);
   var computeShareProgress = React.useCallback(function (_ref7) {
     var active = _ref7.active,
-        _ref7$direction = _slicedToArray__default["default"](_ref7.direction, 2),
-        dy = _ref7$direction[1],
-        _ref7$movement = _slicedToArray__default["default"](_ref7.movement, 2),
-        my = _ref7$movement[1],
-        _ref7$velocity = _slicedToArray__default["default"](_ref7.velocity, 2),
-        vy = _ref7$velocity[1];
-
+      _ref7$direction = _slicedToArray__default["default"](_ref7.direction, 2),
+      dy = _ref7$direction[1],
+      _ref7$movement = _slicedToArray__default["default"](_ref7.movement, 2),
+      my = _ref7$movement[1],
+      _ref7$velocity = _slicedToArray__default["default"](_ref7.velocity, 2),
+      vy = _ref7$velocity[1];
     var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
-
     if (!active) {
       if (reachedThreshold) onOpenShare();
       return reachedThreshold ? 1 : 0;
     }
-
     return progress;
   }, [onOpenShare, viewerHeight]);
   var computeShareProgressClose = React.useCallback(function (_ref8) {
     var active = _ref8.active,
-        _ref8$direction = _slicedToArray__default["default"](_ref8.direction, 2),
-        dy = _ref8$direction[1],
-        _ref8$movement = _slicedToArray__default["default"](_ref8.movement, 2),
-        my = _ref8$movement[1],
-        _ref8$velocity = _slicedToArray__default["default"](_ref8.velocity, 2),
-        vy = _ref8$velocity[1];
-
+      _ref8$direction = _slicedToArray__default["default"](_ref8.direction, 2),
+      dy = _ref8$direction[1],
+      _ref8$movement = _slicedToArray__default["default"](_ref8.movement, 2),
+      my = _ref8$movement[1],
+      _ref8$velocity = _slicedToArray__default["default"](_ref8.velocity, 2),
+      vy = _ref8$velocity[1];
     var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
-
     if (!active) {
       if (reachedThreshold) onCloseShare();
       return reachedThreshold ? 0 : 1;
     }
-
     return 1 - progress;
   }, [onCloseShare, viewerHeight]);
   var springParams = React.useMemo(function () {
@@ -1586,64 +1469,54 @@ var ViewerMenu = function ViewerMenu(_ref) {
       }
     };
   }, []);
-
   var _useDragProgress = hooks.useDragProgress({
-    progress: shareOpened ? 1 : 0,
-    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
-    springParams: springParams
-  }),
-      bindShareDrag = _useDragProgress.bind,
-      draggingShare = _useDragProgress.dragging,
-      shareOpenedProgress = _useDragProgress.progress;
-
+      progress: shareOpened ? 1 : 0,
+      computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
+      springParams: springParams
+    }),
+    bindShareDrag = _useDragProgress.bind,
+    draggingShare = _useDragProgress.dragging,
+    shareOpenedProgress = _useDragProgress.progress;
   var computeMenuProgress = React.useCallback(function (_ref9) {
     var active = _ref9.active,
-        _ref9$direction = _slicedToArray__default["default"](_ref9.direction, 2),
-        dy = _ref9$direction[1],
-        _ref9$movement = _slicedToArray__default["default"](_ref9.movement, 2),
-        my = _ref9$movement[1],
-        _ref9$velocity = _slicedToArray__default["default"](_ref9.velocity, 2),
-        vy = _ref9$velocity[1];
-
+      _ref9$direction = _slicedToArray__default["default"](_ref9.direction, 2),
+      dy = _ref9$direction[1],
+      _ref9$movement = _slicedToArray__default["default"](_ref9.movement, 2),
+      my = _ref9$movement[1],
+      _ref9$velocity = _slicedToArray__default["default"](_ref9.velocity, 2),
+      vy = _ref9$velocity[1];
     var progress = Math.max(0, my) / (window.innerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
-
     if (!active) {
       if (reachedThreshold) onOpenMenu();
       return reachedThreshold ? 1 : 0;
     }
-
     return progress;
   }, [onOpenMenu]);
   var computeMenuProgressClose = React.useCallback(function (_ref10) {
     var active = _ref10.active,
-        _ref10$direction = _slicedToArray__default["default"](_ref10.direction, 2),
-        dy = _ref10$direction[1],
-        _ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
-        my = _ref10$movement[1],
-        _ref10$velocity = _slicedToArray__default["default"](_ref10.velocity, 2),
-        vy = _ref10$velocity[1];
-
+      _ref10$direction = _slicedToArray__default["default"](_ref10.direction, 2),
+      dy = _ref10$direction[1],
+      _ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
+      my = _ref10$movement[1],
+      _ref10$velocity = _slicedToArray__default["default"](_ref10.velocity, 2),
+      vy = _ref10$velocity[1];
     var progress = Math.max(0, my) / (window.innerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
-
     if (!active) {
       if (reachedThreshold) onCloseMenu();
       return reachedThreshold ? 0 : 1;
     }
-
     return 1 - progress;
   }, [onCloseMenu]);
-
   var _useDragProgress2 = hooks.useDragProgress({
-    progress: menuOpened ? 1 : 0,
-    computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
-    springParams: springParams
-  }),
-      bindMenuDrag = _useDragProgress2.bind,
-      draggingMenu = _useDragProgress2.dragging,
-      menuOpenedProgress = _useDragProgress2.progress;
-
+      progress: menuOpened ? 1 : 0,
+      computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
+      springParams: springParams
+    }),
+    bindMenuDrag = _useDragProgress2.bind,
+    draggingMenu = _useDragProgress2.dragging,
+    menuOpenedProgress = _useDragProgress2.progress;
   var keyboardShortcuts = React.useMemo(function () {
     return {
       m: function m() {
@@ -1656,9 +1529,12 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, [menuOpened, onOpenMenu, onCloseMenu]);
   useKeyboardShortcuts(keyboardShortcuts);
   var menuOpenedProgressValue = menuOpenedProgress ? menuOpenedProgress.value || 0 : 0;
-  var shareOpenedProgressValue = shareOpenedProgress ? shareOpenedProgress.value || 0 : 0; // should be zero if either screens menu or share menu is opened
+  var shareOpenedProgressValue = shareOpenedProgress ? shareOpenedProgress.value || 0 : 0;
+
+  // should be zero if either screens menu or share menu is opened
+  var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgressValue + shareOpenedProgressValue)));
 
-  var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgressValue + shareOpenedProgressValue))); // console.log(dotsOpacity, menuProgressValue, shareProgressValue);
+  // console.log(dotsOpacity, menuProgressValue, shareProgressValue);
 
   React.useEffect(function () {
     if ((menuOpened || draggingMenu) && !menuMounted) {
@@ -1727,7 +1603,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     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
-
     }
   }))), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
@@ -1768,7 +1643,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     fullscreenEnabled: fullscreenEnabled
   }) : null));
 };
-
 ViewerMenu.propTypes = propTypes$9;
 ViewerMenu.defaultProps = defaultProps$9;
 var ViewerMenu$1 = /*#__PURE__*/React__default["default"].memo(ViewerMenu);
@@ -1803,34 +1677,29 @@ var defaultProps$8 = {
   // withNavigationHint: false,
   className: null
 };
-
 function ViewerScreen(_ref) {
   var screen = _ref.screen,
-      renderContext = _ref.renderContext,
-      index = _ref.index,
-      screenState = _ref.screenState,
-      active = _ref.active,
-      current = _ref.current,
-      mediaRef = _ref.mediaRef,
-      width = _ref.width,
-      height = _ref.height,
-      scale = _ref.scale,
-      className = _ref.className;
-
+    renderContext = _ref.renderContext,
+    index = _ref.index,
+    screenState = _ref.screenState,
+    active = _ref.active,
+    current = _ref.current,
+    mediaRef = _ref.mediaRef,
+    width = _ref.width,
+    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];
-
+    _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);
@@ -1858,7 +1727,6 @@ function ViewerScreen(_ref) {
     mediaRef: mediaRef
   }) : null));
 }
-
 ViewerScreen.propTypes = propTypes$8;
 ViewerScreen.defaultProps = defaultProps$8;
 
@@ -1874,11 +1742,10 @@ var defaultProps$7 = {
   onClick: null,
   className: null
 };
-
 var NavigationButton = function NavigationButton(_ref) {
   var direction = _ref.direction,
-      onClick = _ref.onClick,
-      className = _ref.className;
+    onClick = _ref.onClick,
+    className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement(IconButton, {
     className: classNames__default["default"]([styles$4.container, styles$4[direction], _defineProperty__default["default"]({}, className, className !== null)]),
     onClick: onClick,
@@ -1910,7 +1777,6 @@ var NavigationButton = function NavigationButton(_ref) {
     }))
   });
 };
-
 NavigationButton.propTypes = propTypes$7;
 NavigationButton.defaultProps = defaultProps$7;
 
@@ -1922,7 +1788,6 @@ var propTypes$6 = {
 var defaultProps$6 = {
   className: null
 };
-
 var ArrowHint = function ArrowHint(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1943,7 +1808,6 @@ var ArrowHint = function ArrowHint(_ref) {
     points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
   }))));
 };
-
 ArrowHint.propTypes = propTypes$6;
 ArrowHint.defaultProps = defaultProps$6;
 
@@ -1969,28 +1833,22 @@ var stopDragEventsPropagation = {
     return e.stopPropagation();
   }
 };
-
 function getFormattedTimestamp() {
   var secondsWithMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
   if (secondsWithMs === null || secondsWithMs <= 0) {
     return '00:00';
   }
-
   var parts = "".concat(secondsWithMs).split('.');
-
   var _ref = parts || [],
-      _ref2 = _slicedToArray__default["default"](_ref, 1),
-      _ref2$ = _ref2[0],
-      fullSeconds = _ref2$ === void 0 ? 0 : _ref2$;
-
+    _ref2 = _slicedToArray__default["default"](_ref, 1),
+    _ref2$ = _ref2[0],
+    fullSeconds = _ref2$ === void 0 ? 0 : _ref2$;
   var finalFullSeconds = Math.round(fullSeconds);
   var seconds = finalFullSeconds % 60;
   var diff = finalFullSeconds - seconds;
   var minutes = diff > 0 ? diff / 60 : 0;
   return "".concat(String(Math.round(minutes)).padStart(2, '0'), ":").concat(String(Math.round(seconds)).padStart(2, '0'));
 }
-
 var SHOW_MILLISECONDS_THRESHOLD = 5; // show milliseconds when scrubbing if length of video is shorter than 5 seconds
 
 var propTypes$5 = {
@@ -1998,6 +1856,7 @@ var propTypes$5 = {
     current: PropTypes__default["default"].any
   }) // eslint-disable-line
   ]),
+
   playing: PropTypes__default["default"].bool,
   backgroundColor: PropTypes__default["default"].string,
   progressColor: PropTypes__default["default"].string,
@@ -2020,63 +1879,53 @@ var defaultProps$5 = {
   className: null,
   withSeekHead: true
 };
-
 var SeekBar = function SeekBar(_ref3) {
   var _ref6;
-
   var media = _ref3.media,
-      playing = _ref3.playing,
-      backgroundColor = _ref3.backgroundColor,
-      progressColor = _ref3.progressColor,
-      onSeek = _ref3.onSeek,
-      onSeekStart = _ref3.onSeekStart,
-      onSeekEnd = _ref3.onSeekEnd,
-      focusable = _ref3.focusable,
-      className = _ref3.className,
-      withSeekHead = _ref3.withSeekHead;
+    playing = _ref3.playing,
+    backgroundColor = _ref3.backgroundColor,
+    progressColor = _ref3.progressColor,
+    onSeek = _ref3.onSeek,
+    onSeekStart = _ref3.onSeekStart,
+    onSeekEnd = _ref3.onSeekEnd,
+    focusable = _ref3.focusable,
+    className = _ref3.className,
+    withSeekHead = _ref3.withSeekHead;
   var intl = reactIntl.useIntl();
   var progress = hooks.useMediaProgress(media, {
     disabled: !playing
   });
-
   var _ref4 = media || {},
-      _ref4$currentTime = _ref4.currentTime,
-      currentTime = _ref4$currentTime === void 0 ? null : _ref4$currentTime,
-      _ref4$duration = _ref4.duration,
-      duration = _ref4$duration === void 0 ? null : _ref4$duration;
-
+    _ref4$currentTime = _ref4.currentTime,
+    currentTime = _ref4$currentTime === void 0 ? null : _ref4$currentTime,
+    _ref4$duration = _ref4.duration,
+    duration = _ref4$duration === void 0 ? null : _ref4$duration;
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      showTimestamp = _useState2[0],
-      setShowTimestamp = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    showTimestamp = _useState2[0],
+    setShowTimestamp = _useState2[1];
   var onDrag = React.useCallback(function (_ref5) {
     var _ref5$xy = _slicedToArray__default["default"](_ref5.xy, 1),
-        x = _ref5$xy[0],
-        elapsedTime = _ref5.elapsedTime,
-        active = _ref5.active,
-        tap = _ref5.tap,
-        currentTarget = _ref5.currentTarget;
-
+      x = _ref5$xy[0],
+      elapsedTime = _ref5.elapsedTime,
+      active = _ref5.active,
+      tap = _ref5.tap,
+      currentTarget = _ref5.currentTarget;
     if (!active && elapsedTime > 300) {
       return;
     }
-
     var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
-        _currentTarget$getBou2 = _currentTarget$getBou.left,
-        elX = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
-        _currentTarget$getBou3 = _currentTarget$getBou.width,
-        elWidth = _currentTarget$getBou3 === void 0 ? 0 : _currentTarget$getBou3;
-
+      _currentTarget$getBou2 = _currentTarget$getBou.left,
+      elX = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
+      _currentTarget$getBou3 = _currentTarget$getBou.width,
+      elWidth = _currentTarget$getBou3 === void 0 ? 0 : _currentTarget$getBou3;
     var newProgress = Math.max(0, Math.min(1, (x - elX) / elWidth));
-
     if (onSeek !== null) {
       onSeek(newProgress, tap);
     }
   }, [onSeek]);
   var onDragStart = React.useCallback(function () {
     setShowTimestamp(true);
-
     if (onSeekStart !== null) {
       onSeekStart();
     }
@@ -2143,11 +1992,10 @@ var SeekBar = function SeekBar(_ref3) {
     tabIndex: focusable ? '0' : '-1'
   }))));
 };
-
 SeekBar.propTypes = propTypes$5;
 SeekBar.defaultProps = defaultProps$5;
 
-var styles$1 = {"muteButton":"micromag-viewer-partials-playback-controls-muteButton","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
+var styles$1 = {"playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
 
 var propTypes$4 = {
   className: PropTypes__default["default"].string,
@@ -2157,46 +2005,39 @@ var defaultProps$4 = {
   className: null,
   collapsedClassName: null
 };
-
 function PlaybackControls(_ref) {
   var _ref4;
-
   var className = _ref.className,
-      collapsedClassName = _ref.collapsedClassName;
+    collapsedClassName = _ref.collapsedClassName;
   var intl = reactIntl.useIntl();
-
   var _usePlaybackContext = contexts.usePlaybackContext(),
-      _usePlaybackContext$m = _usePlaybackContext.media,
-      mediaElement = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m,
-      _usePlaybackContext$h = _usePlaybackContext.hasAudio,
-      hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
-      _usePlaybackContext$p = _usePlaybackContext.playing,
-      playing = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
-      _usePlaybackContext$m2 = _usePlaybackContext.muted,
-      muted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
-      setPlaying = _usePlaybackContext.setPlaying,
-      setMuted = _usePlaybackContext.setMuted,
-      controls = _usePlaybackContext.controls,
-      controlsVisible = _usePlaybackContext.controlsVisible,
-      controlsTheme = _usePlaybackContext.controlsTheme,
-      showControls = _usePlaybackContext.showControls;
-
+    _usePlaybackContext$m = _usePlaybackContext.media,
+    mediaElement = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m,
+    _usePlaybackContext$h = _usePlaybackContext.hasAudio,
+    hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
+    _usePlaybackContext$p = _usePlaybackContext.playing,
+    playing = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
+    _usePlaybackContext$m2 = _usePlaybackContext.muted,
+    muted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
+    setPlaying = _usePlaybackContext.setPlaying,
+    setMuted = _usePlaybackContext.setMuted,
+    controls = _usePlaybackContext.controls,
+    controlsVisible = _usePlaybackContext.controlsVisible,
+    controlsTheme = _usePlaybackContext.controlsTheme,
+    showControls = _usePlaybackContext.showControls;
   var _useState = React.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      customControlsTheme = _useState2[0],
-      setCustomControlsTheme = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    customControlsTheme = _useState2[0],
+    setCustomControlsTheme = _useState2[1];
   var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      wasPlaying = _useState4[0],
-      setWasPlaying = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    wasPlaying = _useState4[0],
+    setWasPlaying = _useState4[1];
   React.useEffect(function () {
     var _ref2 = controlsTheme || {},
-        color = _ref2.color,
-        progressColor = _ref2.progressColor,
-        seekBarOnly = _ref2.seekBarOnly;
-
+      color = _ref2.color,
+      progressColor = _ref2.progressColor,
+      seekBarOnly = _ref2.seekBarOnly;
     setCustomControlsTheme({
       color: utils.getColorAsString(color),
       progressColor: utils.getColorAsString(progressColor),
@@ -2205,35 +2046,30 @@ function PlaybackControls(_ref) {
   }, [controlsTheme, setCustomControlsTheme]);
   var onPlay = React.useCallback(function () {
     setPlaying(true);
-
     if (!controlsVisible && controls) {
       showControls();
     }
   }, [setPlaying, controlsVisible, showControls]);
   var onPause = React.useCallback(function () {
     setPlaying(false);
-
     if (!controlsVisible && controls) {
       showControls();
     }
   }, [setPlaying, controlsVisible, controls, showControls]);
   var onMute = React.useCallback(function () {
     setMuted(true);
-
     if (!controlsVisible && controls) {
       showControls();
     }
   }, [setMuted, controlsVisible, showControls]);
   var onUnmute = React.useCallback(function () {
     setMuted(false);
-
     if (!controlsVisible && controls) {
       showControls();
     }
   }, [setMuted, controlsVisible, showControls]);
   var onSeekStart = React.useCallback(function () {
     setWasPlaying(playing);
-
     if (playing) {
       setPlaying(false);
     }
@@ -2242,7 +2078,6 @@ function PlaybackControls(_ref) {
     if (mediaElement !== null) {
       mediaElement.currentTime = progress * mediaElement.duration;
     }
-
     if (!controlsVisible && controls) {
       showControls();
     }
@@ -2254,12 +2089,10 @@ function PlaybackControls(_ref) {
   }, [setPlaying, wasPlaying]);
   var hasMedia = mediaElement !== null;
   var mediaHasAudio = hasMedia && (hasAudio === null || hasAudio === true);
-
   var _ref3 = customControlsTheme || {},
-      color = _ref3.color,
-      progressColor = _ref3.progressColor,
-      seekBarOnly = _ref3.seekBarOnly;
-
+    color = _ref3.color,
+    progressColor = _ref3.progressColor,
+    seekBarOnly = _ref3.seekBarOnly;
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$1.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$1.withPlayPause, controls && !seekBarOnly), _defineProperty__default["default"](_ref4, styles$1.withMute, hasMedia || controls), _defineProperty__default["default"](_ref4, styles$1.withSeekBar, controls), _defineProperty__default["default"](_ref4, styles$1.withSeekBarOnly, seekBarOnly), _defineProperty__default["default"](_ref4, styles$1.isCollapsed, isCollapsed), _defineProperty__default["default"](_ref4, styles$1.isMuted, muted), _defineProperty__default["default"](_ref4, collapsedClassName, collapsedClassName !== null && isCollapsed), _ref4)])
@@ -2388,7 +2221,6 @@ function PlaybackControls(_ref) {
     withoutBootstrapStyles: true
   }));
 }
-
 PlaybackControls.propTypes = propTypes$4;
 PlaybackControls.defaultProps = defaultProps$4;
 
@@ -2403,38 +2235,31 @@ var defaultProps$3 = {
   className: null,
   style: null
 };
-
 function WebViewContainer(_ref) {
   var _ref2;
-
   var className = _ref.className,
-      style = _ref.style;
-
+    style = _ref.style;
   var _useViewerWebView = contexts.useViewerWebView(),
-      opened = _useViewerWebView.opened,
-      close = _useViewerWebView.close;
-      _useViewerWebView.open;
-      _useViewerWebView.update;
-      var _useViewerWebView$url = _useViewerWebView.url,
-      url = _useViewerWebView$url === void 0 ? null : _useViewerWebView$url,
-      webViewProps = _objectWithoutProperties__default["default"](_useViewerWebView, _excluded$2);
-
+    opened = _useViewerWebView.opened,
+    close = _useViewerWebView.close;
+    _useViewerWebView.open;
+    _useViewerWebView.update;
+    var _useViewerWebView$url = _useViewerWebView.url,
+    url = _useViewerWebView$url === void 0 ? null : _useViewerWebView$url,
+    webViewProps = _objectWithoutProperties__default["default"](_useViewerWebView, _excluded$2);
   var _useViewerInteraction = contexts.useViewerInteraction(),
-      disableInteraction = _useViewerInteraction.disableInteraction,
-      enableInteraction = _useViewerInteraction.enableInteraction;
-
+    disableInteraction = _useViewerInteraction.disableInteraction,
+    enableInteraction = _useViewerInteraction.enableInteraction;
   var _usePlaybackContext = contexts.usePlaybackContext(),
-      playing = _usePlaybackContext.playing,
-      setPlaying = _usePlaybackContext.setPlaying;
-
+    playing = _usePlaybackContext.playing,
+    setPlaying = _usePlaybackContext.setPlaying;
   var wasPlayingRef = React.useRef(playing);
-
   var _useState = React.useState(url),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      currentUrl = _useState2[0],
-      setCurrentUrl = _useState2[1]; // Handle current webview url
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    currentUrl = _useState2[0],
+    setCurrentUrl = _useState2[1];
 
+  // Handle current webview url
   React.useEffect(function () {
     if (url !== null) {
       setCurrentUrl(url);
@@ -2444,19 +2269,18 @@ function WebViewContainer(_ref) {
     if (url === null) {
       setCurrentUrl(null);
     }
-  }, [url]); // Disable interaction and pause playback
+  }, [url]);
 
+  // Disable interaction and pause playback
   React.useEffect(function () {
     if (opened) {
       disableInteraction();
       wasPlayingRef.current = playing;
-
       if (playing) {
         setPlaying(false);
       }
     } else {
       enableInteraction();
-
       if (wasPlayingRef.current && !playing) {
         wasPlayingRef.current = false;
         setPlaying(true);
@@ -2475,15 +2299,14 @@ function WebViewContainer(_ref) {
     onClose: close
   })));
 }
-
 WebViewContainer.propTypes = propTypes$3;
 WebViewContainer.defaultProps = defaultProps$3;
 
+// @todo export from somewhere else; or use as props in possible component for screen transitions
 var SPRING_CONFIG_TIGHT = {
   tension: 300,
   friction: 35
 }; // tight
-
 var DRAG_PROGRESS_ACTIVATION_THRESHOLD = 0.3;
 var DRAG_VELOCITY_ACTIVATION_THRESHOLD = 0.3;
 var DEFAULT_TRANSITION_TYPE_LANDSCAPE = 'carousel';
@@ -2572,48 +2395,45 @@ var defaultProps$2 = {
   screenSizeOptions: null,
   className: null
 };
-
 var Viewer = function Viewer(_ref) {
   var _ref20;
-
   var story = _ref.story,
-      basePath = _ref.basePath,
-      viewerTheme = _ref.theme,
-      width = _ref.width,
-      height = _ref.height,
-      screenId = _ref.screen,
-      screenState = _ref.screenState,
-      deviceScreens = _ref.deviceScreens,
-      renderContext = _ref.renderContext,
-      tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
-      storyIsParsed = _ref.storyIsParsed,
-      neighborScreensActive = _ref.neighborScreensActive,
-      neighborScreenOffset = _ref.neighborScreenOffset,
-      neighborScreenScale = _ref.neighborScreenScale,
-      withMetadata = _ref.withMetadata,
-      withoutGestures = _ref.withoutGestures,
-      withoutMenu = _ref.withoutMenu,
-      withoutScreensMenu = _ref.withoutScreensMenu,
-      withoutShareMenu = _ref.withoutShareMenu,
-      withoutMenuShadow = _ref.withoutMenuShadow;
-      _ref.withoutFullscreen;
-      var withoutNavigationArrow = _ref.withoutNavigationArrow,
-      withoutTransitions = _ref.withoutTransitions,
-      withNeighborScreens = _ref.withNeighborScreens,
-      withNavigationHint = _ref.withNavigationHint,
-      withoutPlaybackControls = _ref.withoutPlaybackControls,
-      menuIsScreenWidth = _ref.menuIsScreenWidth,
-      closeable = _ref.closeable,
-      onCloseViewer = _ref.onClose,
-      onInteraction = _ref.onInteraction,
-      onEnd = _ref.onEnd,
-      onScreenChange = _ref.onScreenChange,
-      onViewModeChange = _ref.onViewModeChange,
-      currentScreenMedia = _ref.currentScreenMedia,
-      screensMedias = _ref.screensMedias,
-      screenSizeOptions = _ref.screenSizeOptions,
-      className = _ref.className;
-
+    basePath = _ref.basePath,
+    viewerTheme = _ref.theme,
+    width = _ref.width,
+    height = _ref.height,
+    screenId = _ref.screen,
+    screenState = _ref.screenState,
+    deviceScreens = _ref.deviceScreens,
+    renderContext = _ref.renderContext,
+    tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
+    storyIsParsed = _ref.storyIsParsed,
+    neighborScreensActive = _ref.neighborScreensActive,
+    neighborScreenOffset = _ref.neighborScreenOffset,
+    neighborScreenScale = _ref.neighborScreenScale,
+    withMetadata = _ref.withMetadata,
+    withoutGestures = _ref.withoutGestures,
+    withoutMenu = _ref.withoutMenu,
+    withoutScreensMenu = _ref.withoutScreensMenu,
+    withoutShareMenu = _ref.withoutShareMenu,
+    withoutMenuShadow = _ref.withoutMenuShadow;
+    _ref.withoutFullscreen;
+    var withoutNavigationArrow = _ref.withoutNavigationArrow,
+    withoutTransitions = _ref.withoutTransitions,
+    withNeighborScreens = _ref.withNeighborScreens,
+    withNavigationHint = _ref.withNavigationHint,
+    withoutPlaybackControls = _ref.withoutPlaybackControls,
+    menuIsScreenWidth = _ref.menuIsScreenWidth,
+    closeable = _ref.closeable,
+    onCloseViewer = _ref.onClose,
+    onInteraction = _ref.onInteraction,
+    onEnd = _ref.onEnd,
+    onScreenChange = _ref.onScreenChange,
+    onViewModeChange = _ref.onViewModeChange,
+    currentScreenMedia = _ref.currentScreenMedia,
+    screensMedias = _ref.screensMedias,
+    screenSizeOptions = _ref.screenSizeOptions,
+    className = _ref.className;
   /**
    * Screen Data + Processing
    */
@@ -2621,13 +2441,13 @@ var Viewer = function Viewer(_ref) {
     disabled: storyIsParsed
   }) || {};
   var _parsedStory$componen = parsedStory.components,
-      screens = _parsedStory$componen === void 0 ? [] : _parsedStory$componen,
-      _parsedStory$title = parsedStory.title,
-      title = _parsedStory$title === void 0 ? null : _parsedStory$title,
-      _parsedStory$metadata = parsedStory.metadata,
-      metadata = _parsedStory$metadata === void 0 ? null : _parsedStory$metadata,
-      _parsedStory$fonts = parsedStory.fonts,
-      fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts;
+    screens = _parsedStory$componen === void 0 ? [] : _parsedStory$componen,
+    _parsedStory$title = parsedStory.title,
+    title = _parsedStory$title === void 0 ? null : _parsedStory$title,
+    _parsedStory$metadata = parsedStory.metadata,
+    metadata = _parsedStory$metadata === void 0 ? null : _parsedStory$metadata,
+    _parsedStory$fonts = parsedStory.fonts,
+    fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts;
   var screensCount = screens.length;
   var eventsManager = React.useMemo(function () {
     return new EventEmitter__default["default"]();
@@ -2638,19 +2458,15 @@ var Viewer = function Viewer(_ref) {
     }));
   }, [screenId, screens]);
   var currentScreen = screens[screenIndex] || null;
-
   var _ref2 = currentScreen || {},
-      screenParameters = _ref2.parameters;
-
+    screenParameters = _ref2.parameters;
   var _ref3 = screenParameters || {},
-      screenMetadata = _ref3.metadata;
-
+    screenMetadata = _ref3.metadata;
   var _ref4 = screenMetadata || {},
-      _ref4$title = _ref4.title,
-      screenTitle = _ref4$title === void 0 ? null : _ref4$title,
-      _ref4$description = _ref4.description,
-      screenDescription = _ref4$description === void 0 ? null : _ref4$description;
-
+    _ref4$title = _ref4.title,
+    screenTitle = _ref4$title === void 0 ? null : _ref4$title,
+    _ref4$description = _ref4.description,
+    screenDescription = _ref4$description === void 0 ? null : _ref4$description;
   var finalTitle = screenTitle !== null ? screenTitle : title;
   var finalMetadata = React.useMemo(function () {
     return screenDescription !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, metadata), {}, {
@@ -2658,84 +2474,71 @@ var Viewer = function Viewer(_ref) {
     }) : metadata;
   }, [metadata, screenDescription]);
   var screensMediasRef = React.useRef([]);
-
   if (currentScreenMedia !== null) {
     currentScreenMedia.current = screensMediasRef.current[screenIndex] || null;
   }
-
   if (screensMedias !== null) {
     screensMedias.current = screensMediasRef.current;
   }
+
   /**
    * Screen Layout
    */
-
-
   var _ref5 = viewerTheme || {},
-      textStyles = _ref5.textStyles;
-
+    textStyles = _ref5.textStyles;
   var _ref6 = textStyles || {},
-      _ref6$title = _ref6.title,
-      themeTextStyle = _ref6$title === void 0 ? null : _ref6$title;
-
+    _ref6$title = _ref6.title,
+    themeTextStyle = _ref6$title === void 0 ? null : _ref6$title;
   var _ref7 = themeTextStyle || {},
-      _ref7$fontFamily = _ref7.fontFamily,
-      themeFont = _ref7$fontFamily === void 0 ? null : _ref7$fontFamily; // Fonts
-
+    _ref7$fontFamily = _ref7.fontFamily,
+    themeFont = _ref7$fontFamily === void 0 ? null : _ref7$fontFamily;
 
+  // Fonts
   var finalFonts = React.useMemo(function () {
     return [].concat(_toConsumableArray__default["default"](fonts || []), [themeFont]).filter(function (font) {
       return font !== null;
     });
   }, [fonts]);
-
   var _useLoadedFonts = hooks.useLoadedFonts(finalFonts);
-      _useLoadedFonts.loaded; // eslint-disable-line
-
+    _useLoadedFonts.loaded; // eslint-disable-line
 
   var isView = renderContext === 'view';
   var isStatic = renderContext === 'static';
   var isCapture = renderContext === 'capture';
   var isEditor = renderContext === 'edit';
   var withoutScreensTransforms = isStatic || isCapture;
-
   var _usePlaybackContext = contexts.usePlaybackContext(),
-      playing = _usePlaybackContext.playing,
-      _usePlaybackContext$c = _usePlaybackContext.controls,
-      playbackControls = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
-      _usePlaybackContext$c2 = _usePlaybackContext.controlsVisible,
-      playbackcontrolsVisible = _usePlaybackContext$c2 === void 0 ? false : _usePlaybackContext$c2,
-      _usePlaybackContext$m = _usePlaybackContext.media,
-      playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m;
-
+    playing = _usePlaybackContext.playing,
+    _usePlaybackContext$c = _usePlaybackContext.controls,
+    playbackControls = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
+    _usePlaybackContext$c2 = _usePlaybackContext.controlsVisible,
+    playbackcontrolsVisible = _usePlaybackContext$c2 === void 0 ? false : _usePlaybackContext$c2,
+    _usePlaybackContext$m = _usePlaybackContext.media,
+    playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m;
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      playbackControlsContainerRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.height,
-      playbackControlsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-
+    playbackControlsContainerRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.height,
+    playbackControlsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var trackScreenView = hooks.useTrackScreenView();
-
   var _useScreenSizeFromEle = hooks.useScreenSizeFromElement(_objectSpread__default["default"]({
-    width: width,
-    height: height,
-    screens: deviceScreens
-  }, screenSizeOptions)),
-      containerRef = _useScreenSizeFromEle.ref,
-      viewerWidth = _useScreenSizeFromEle.fullWidth,
-      viewerHeight = _useScreenSizeFromEle.fullHeight,
-      screenSize = _useScreenSizeFromEle.screenSize,
-      screenScale = _useScreenSizeFromEle.scale;
-
+      width: width,
+      height: height,
+      screens: deviceScreens
+    }, screenSizeOptions)),
+    containerRef = _useScreenSizeFromEle.ref,
+    viewerWidth = _useScreenSizeFromEle.fullWidth,
+    viewerHeight = _useScreenSizeFromEle.fullHeight,
+    screenSize = _useScreenSizeFromEle.screenSize,
+    screenScale = _useScreenSizeFromEle.scale;
   var _ref8 = screenSize || {},
-      _ref8$width = _ref8.width,
-      screenWidth = _ref8$width === void 0 ? null : _ref8$width,
-      _ref8$height = _ref8.height,
-      screenHeight = _ref8$height === void 0 ? null : _ref8$height,
-      _ref8$landscape = _ref8.landscape,
-      landscape = _ref8$landscape === void 0 ? false : _ref8$landscape,
-      _ref8$menuOverScreen = _ref8.menuOverScreen,
-      menuOverScreen = _ref8$menuOverScreen === void 0 ? false : _ref8$menuOverScreen;
-
+    _ref8$width = _ref8.width,
+    screenWidth = _ref8$width === void 0 ? null : _ref8$width,
+    _ref8$height = _ref8.height,
+    screenHeight = _ref8$height === void 0 ? null : _ref8$height,
+    _ref8$landscape = _ref8.landscape,
+    landscape = _ref8$landscape === void 0 ? false : _ref8$landscape,
+    _ref8$menuOverScreen = _ref8.menuOverScreen,
+    menuOverScreen = _ref8$menuOverScreen === void 0 ? false : _ref8$menuOverScreen;
   var screenContainerWidth = screenScale !== null ? screenWidth * screenScale : screenWidth;
   var screenContainerHeight = screenScale !== null ? screenHeight * screenScale : screenHeight;
   var hasSize = screenWidth > 0 && screenHeight > 0;
@@ -2754,38 +2557,34 @@ var Viewer = function Viewer(_ref) {
       });
     }
   }, [ready, landscape, menuOverScreen, onViewModeChange]);
+
   /**
    * Screen Transitions
    */
-
   var transitionType = landscape && withNeighborScreens ? DEFAULT_TRANSITION_TYPE_LANDSCAPE : DEFAULT_TRANSITION_TYPE_PORTRAIT;
+
   /**
    * Screen Navigation
    */
-
   var changeIndex = React.useCallback(function (index) {
     if (index === screenIndex) {
       return;
     }
-
     if (currentScreenMedia !== null) {
       currentScreenMedia.current = screensMediasRef.current[index] || null;
     }
-
     if (onScreenChange !== null) {
       onScreenChange(screens[index], index);
     }
   }, [screenIndex, screens, onScreenChange]);
   var onScreenNavigate = React.useCallback(function (_ref9) {
     var index = _ref9.index,
-        newIndex = _ref9.newIndex,
-        end = _ref9.end,
-        direction = _ref9.direction;
-
+      newIndex = _ref9.newIndex,
+      end = _ref9.end,
+      direction = _ref9.direction;
     if (end && onEnd !== null) {
       onEnd();
     }
-
     changeIndex(newIndex);
     eventsManager.emit('navigate', {
       index: index,
@@ -2793,57 +2592,52 @@ var Viewer = function Viewer(_ref) {
       direction: direction,
       end: end
     });
-
     if (end) {
       eventsManager.emit('navigate_end');
     } else {
       eventsManager.emit("navigate_".concat(direction), newIndex);
     }
   }, [onEnd, changeIndex]);
-  var gotoPreviousScreen = React.useCallback(function () {
+  var gotoPreviousScreen = React.useCallback(function (e) {
+    e.stopPropagation();
     changeIndex(Math.max(0, screenIndex - 1));
   }, [changeIndex, screenIndex]);
-  var gotoNextScreen = React.useCallback(function () {
+  var gotoNextScreen = React.useCallback(function (e) {
+    e.stopPropagation();
     changeIndex(Math.min(screens.length - 1, screenIndex + 1));
   }, [changeIndex, screenIndex]);
-
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      hasInteracted = _useState2[0],
-      setHasInteracted = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    hasInteracted = _useState2[0],
+    setHasInteracted = _useState2[1];
   var onInteractionPrivate = React.useCallback(function () {
     if (onInteraction !== null) {
       onInteraction();
     }
-
     if (!hasInteracted) {
       setHasInteracted(true);
     }
   }, [onInteraction, hasInteracted, setHasInteracted]);
-
   var _useScreenInteraction = useScreenInteraction({
-    screens: screens,
-    screenIndex: screenIndex,
-    screenWidth: screenContainerWidth,
-    disableCurrentScreenNavigation: !isView,
-    nextScreenWidthPercent: tapNextScreenWidthPercent,
-    onInteract: onInteractionPrivate,
-    onNavigate: onScreenNavigate
-  }),
-      interactWithScreen = _useScreenInteraction.interact,
-      currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
-      enableInteraction = _useScreenInteraction.enableInteraction,
-      disableInteraction = _useScreenInteraction.disableInteraction;
-
+      screens: screens,
+      screenIndex: screenIndex,
+      screenWidth: screenContainerWidth,
+      disableCurrentScreenNavigation: !isView,
+      nextScreenWidthPercent: tapNextScreenWidthPercent,
+      onInteract: onInteractionPrivate,
+      onNavigate: onScreenNavigate
+    }),
+    interactWithScreen = _useScreenInteraction.interact,
+    currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
+    enableInteraction = _useScreenInteraction.enableInteraction,
+    disableInteraction = _useScreenInteraction.disableInteraction;
   var onTap = React.useCallback(function (_ref10) {
     var currentTarget = _ref10.currentTarget,
-        event = _ref10.event,
-        target = _ref10.target,
-        _ref10$xy = _slicedToArray__default["default"](_ref10.xy, 2),
-        x = _ref10$xy[0],
-        y = _ref10$xy[1];
-
+      event = _ref10.event,
+      target = _ref10.target,
+      _ref10$xy = _slicedToArray__default["default"](_ref10.xy, 2),
+      x = _ref10$xy[0],
+      y = _ref10$xy[1];
     interactWithScreen({
       event: event,
       target: target,
@@ -2855,34 +2649,26 @@ var Viewer = function Viewer(_ref) {
   }, [interactWithScreen, screenIndex]);
   var computeScreenProgress = React.useCallback(function (_ref11) {
     var active = _ref11.active,
-        _ref11$movement = _slicedToArray__default["default"](_ref11.movement, 1),
-        mx = _ref11$movement[0],
-        _ref11$velocity = _slicedToArray__default["default"](_ref11.velocity, 1),
-        vx = _ref11$velocity[0];
-
+      _ref11$movement = _slicedToArray__default["default"](_ref11.movement, 1),
+      mx = _ref11$movement[0],
+      _ref11$velocity = _slicedToArray__default["default"](_ref11.velocity, 1),
+      vx = _ref11$velocity[0];
     var p = mx / screenContainerWidth; // drag "ratio": how much of the screen width has been swiped?
-
     var forwards = mx < 0; // true if swiping to left (to navigate forwards)
-
     var newIndex = !forwards ? screenIndex - 1 : screenIndex + 1; // which item index are we moving towards?
-
     var reachedThreshold = vx > DRAG_VELOCITY_ACTIVATION_THRESHOLD || Math.abs(p) > DRAG_PROGRESS_ACTIVATION_THRESHOLD;
     var reachedBounds = newIndex < 0 || newIndex >= screensCount; // have we reached the end of the stack?
-
     var damper = reachedBounds ? 0.1 : 1;
     var progress = Math.max(-1, Math.min(1, p * damper));
-
     if (!active) {
       return reachedThreshold && !reachedBounds ? newIndex : screenIndex;
     }
-
     return screenIndex - progress;
   }, [screenContainerWidth, screenIndex]);
   var onScreenProgress = React.useCallback(function (progress, _ref12) {
     var active = _ref12.active;
     var delta = Math.abs(progress - screenIndex);
     var reachedBounds = progress < 0 || progress >= screensCount; // have we reached the end of the stack?
-
     if (!active && delta === 1 && !reachedBounds) {
       onScreenNavigate({
         index: screenIndex,
@@ -2890,25 +2676,38 @@ var Viewer = function Viewer(_ref) {
       });
     }
   }, [onScreenNavigate, screenIndex]);
+  var _useState3 = React.useState(true),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    transitioned = _useState4[0],
+    setTransitioned = _useState4[1];
+  var onTransitionStart = React.useCallback(function () {
+    setTransitioned(false);
+  }, [setTransitioned]);
+  var onTransitionComplete = React.useCallback(function () {
+    setTransitioned(true);
+  }, [setTransitioned]);
+
+  // console.log({ transitioned });
+
   var springParams = React.useMemo(function () {
     return {
-      config: SPRING_CONFIG_TIGHT
+      config: SPRING_CONFIG_TIGHT,
+      onStart: onTransitionStart,
+      onRest: onTransitionComplete
     };
-  }, []);
-
+  }, [onTransitionStart, onTransitionComplete]);
   var _useDragProgress = hooks.useDragProgress({
-    progress: screenIndex,
-    disabled: !isView || withoutTransitions,
-    dragDisabled: withoutGestures,
-    computeProgress: computeScreenProgress,
-    onProgress: onScreenProgress,
-    onTap: onTap,
-    springParams: springParams
-  }),
-      isDragging = _useDragProgress.dragging,
-      progressSpring = _useDragProgress.progress,
-      dragContentBind = _useDragProgress.bind;
-
+      progress: screenIndex,
+      disabled: !isView || withoutTransitions,
+      dragDisabled: withoutGestures,
+      computeProgress: computeScreenProgress,
+      onProgress: onScreenProgress,
+      onTap: onTap,
+      springParams: springParams
+    }),
+    isDragging = _useDragProgress.dragging,
+    progressSpring = _useDragProgress.progress,
+    dragContentBind = _useDragProgress.bind;
   var getScreenStylesByIndex = function getScreenStylesByIndex(index, spring) {
     if (transitionType === 'stack') {
       return {
@@ -2934,7 +2733,6 @@ var Viewer = function Viewer(_ref) {
         })
       };
     }
-
     return {
       opacity: spring.to(function (progress) {
         var t = index - progress;
@@ -2951,19 +2749,18 @@ var Viewer = function Viewer(_ref) {
       zIndex: screensCount - index
     };
   };
-
   var _useFullscreen = hooks.useFullscreen(containerRef.current || null),
-      toggleFullscreen = _useFullscreen.toggle,
-      fullscreenActive = _useFullscreen.active,
-      fullscreenEnabled = _useFullscreen.enabled;
-
-  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled; // Get element height
+    toggleFullscreen = _useFullscreen.toggle,
+    fullscreenActive = _useFullscreen.active,
+    fullscreenEnabled = _useFullscreen.enabled;
+  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
+  var navigationDisabled = currentScreenInteractionEnabled === false;
 
+  // Get element height
   var _useDimensionObserver3 = hooks.useDimensionObserver(),
-      menuDotsContainerRef = _useDimensionObserver3.ref,
-      _useDimensionObserver4 = _useDimensionObserver3.height,
-      menuDotsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-
+    menuDotsContainerRef = _useDimensionObserver3.ref,
+    _useDimensionObserver4 = _useDimensionObserver3.height,
+    menuDotsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var onClickScreen = React.useCallback(function (_ref13) {
     var itemScreenId = _ref13.screenId;
     onInteractionPrivate();
@@ -2978,10 +2775,10 @@ var Viewer = function Viewer(_ref) {
       e.preventDefault();
       return false;
     }
-
     return true;
-  }, [landscape]); // hmm?
+  }, [landscape]);
 
+  // hmm?
   var overscrollStyle = /*#__PURE__*/React__default["default"].createElement("style", {
     type: "text/css"
   }, "body { overscroll-behavior: contain; }");
@@ -3004,46 +2801,36 @@ var Viewer = function Viewer(_ref) {
   useKeyboardShortcuts(keyboardShortcuts, {
     disabled: renderContext !== 'view'
   });
-
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      currentShareIncentive = _useState4[0],
-      setCurrentShareIncentive = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      shareIncentiveVisible = _useState6[0],
-      setShareIncentiveVisible = _useState6[1];
-
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    currentShareIncentive = _useState6[0],
+    setCurrentShareIncentive = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    shareIncentiveVisible = _useState8[0],
+    setShareIncentiveVisible = _useState8[1];
   var _ref15 = currentScreen || {},
-      _ref15$shareIncentive = _ref15.shareIncentive,
-      shareIncentive = _ref15$shareIncentive === void 0 ? null : _ref15$shareIncentive;
-
+    _ref15$shareIncentive = _ref15.shareIncentive,
+    shareIncentive = _ref15$shareIncentive === void 0 ? null : _ref15$shareIncentive;
   var _ref16 = shareIncentive || {},
-      _ref16$active = _ref16.active,
-      hasShareIncentive = _ref16$active === void 0 ? false : _ref16$active,
-      _ref16$label = _ref16.label,
-      shareIncentiveLabel = _ref16$label === void 0 ? null : _ref16$label;
-
+    _ref16$active = _ref16.active,
+    hasShareIncentive = _ref16$active === void 0 ? false : _ref16$active,
+    _ref16$label = _ref16.label,
+    shareIncentiveLabel = _ref16$label === void 0 ? null : _ref16$label;
   var _ref17 = currentShareIncentive || {},
-      _ref17$label = _ref17.label,
-      currentShareIncentiveLabel = _ref17$label === void 0 ? null : _ref17$label;
-
+    _ref17$label = _ref17.label,
+    currentShareIncentiveLabel = _ref17$label === void 0 ? null : _ref17$label;
   var _ref18 = shareIncentiveLabel || {},
-      _ref18$body = _ref18.body,
-      incentiveLabel = _ref18$body === void 0 ? null : _ref18$body;
-
+    _ref18$body = _ref18.body,
+    incentiveLabel = _ref18$body === void 0 ? null : _ref18$body;
   var _ref19 = currentShareIncentiveLabel || {},
-      _ref19$body = _ref19.body,
-      currentIncentiveLabel = _ref19$body === void 0 ? null : _ref19$body;
-
+    _ref19$body = _ref19.body,
+    currentIncentiveLabel = _ref19$body === void 0 ? null : _ref19$body;
   React.useEffect(function () {
     setShareIncentiveVisible(true);
-
     if (hasShareIncentive && shareIncentiveLabel !== currentShareIncentiveLabel) {
       setCurrentShareIncentive(shareIncentive);
     }
-
     var timeout = setTimeout(function () {
       if (isView) {
         setShareIncentiveVisible(false);
@@ -3079,7 +2866,7 @@ var Viewer = function Viewer(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref20 = {}, _defineProperty__default["default"](_ref20, styles$6.landscape, landscape), _defineProperty__default["default"](_ref20, styles$6.withoutGestures, withoutGestures), _defineProperty__default["default"](_ref20, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref20, styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), _defineProperty__default["default"](_ref20, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref20, styles$6.hasInteracted, hasInteracted), _defineProperty__default["default"](_ref20, styles$6.isDragging, isDragging), _defineProperty__default["default"](_ref20, className, className), _ref20)]),
+    }), (_ref20 = {}, _defineProperty__default["default"](_ref20, styles$6.landscape, landscape), _defineProperty__default["default"](_ref20, styles$6.withoutGestures, withoutGestures), _defineProperty__default["default"](_ref20, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref20, styles$6.disableMenu, navigationDisabled), _defineProperty__default["default"](_ref20, styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), _defineProperty__default["default"](_ref20, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref20, styles$6.hasInteracted, hasInteracted), _defineProperty__default["default"](_ref20, styles$6.isDragging, isDragging), _defineProperty__default["default"](_ref20, className, className), _ref20)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu$1, {
@@ -3103,7 +2890,7 @@ var Viewer = function Viewer(_ref) {
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     className: styles$6.content
-  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React__default["default"].createElement(NavigationButton, {
+  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React__default["default"].createElement(NavigationButton, {
     direction: "previous",
     className: classNames__default["default"]([styles$6.navButton, styles$6.previous]),
     onClick: gotoPreviousScreen
@@ -3129,6 +2916,7 @@ var Viewer = function Viewer(_ref) {
       index: i,
       current: current,
       active: active,
+      ready: current && transitioned,
       mediaRef: function mediaRef(ref) {
         screensMediasRef.current[i] = ref;
       },
@@ -3137,7 +2925,7 @@ var Viewer = function Viewer(_ref) {
       height: screenHeight,
       scale: screenScale
     }) : null);
-  })), !withoutNavigationArrow && !withNeighborScreens && screenIndex < screens.length - 1 ? /*#__PURE__*/React__default["default"].createElement(NavigationButton, {
+  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React__default["default"].createElement(NavigationButton, {
     direction: "next",
     className: classNames__default["default"]([styles$6.navButton, styles$6.next]),
     onClick: gotoNextScreen
@@ -3146,7 +2934,7 @@ var Viewer = function Viewer(_ref) {
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React__default["default"].createElement(PlaybackControls, {
     className: styles$6.controls
-  })) : null, withNavigationHint && !withNeighborScreens && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React__default["default"].createElement(ArrowHint, {
+  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React__default["default"].createElement(ArrowHint, {
     className: styles$6.arrowHint
   }) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$6.shareIncentiveContainer, _defineProperty__default["default"]({}, styles$6.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
@@ -3162,7 +2950,6 @@ var Viewer = function Viewer(_ref) {
     }
   })))));
 };
-
 Viewer.propTypes = propTypes$2;
 Viewer.defaultProps = defaultProps$2;
 
@@ -3180,21 +2967,17 @@ var defaultProps$1 = {
   children: null,
   onScreenChange: null
 };
-
 var ViewerRoutes = function ViewerRoutes(_ref) {
   var story = _ref.story,
-      pathWithIndex = _ref.pathWithIndex;
-      _ref.children;
-      var onScreenChange = _ref.onScreenChange,
-      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
-
+    pathWithIndex = _ref.pathWithIndex;
+    _ref.children;
+    var onScreenChange = _ref.onScreenChange,
+    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
   var routes = contexts.useRoutes();
   var push = contexts.useRoutePush();
-
   var _ref2 = story || {},
-      _ref2$components = _ref2.components,
-      screens = _ref2$components === void 0 ? [] : _ref2$components;
-
+    _ref2$components = _ref2.components,
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
   var finalOnScreenChange = React.useCallback(function (it) {
     var screenIndex = screens.findIndex(function (screen) {
       var screenId = screen.id;
@@ -3203,7 +2986,6 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     push('screen', {
       screen: pathWithIndex ? screenIndex + 1 : it.id
     });
-
     if (onScreenChange !== null) {
       onScreenChange(it);
     }
@@ -3221,7 +3003,7 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     path: routes.screen,
     render: function render(_ref3) {
       var _ref3$match$params$sc = _ref3.match.params.screen,
-          screenParam = _ref3$match$params$sc === void 0 ? null : _ref3$match$params$sc;
+        screenParam = _ref3$match$params$sc === void 0 ? null : _ref3$match$params$sc;
       var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
       var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
       return /*#__PURE__*/React__default["default"].createElement(Viewer, Object.assign({}, otherProps, {
@@ -3232,7 +3014,6 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     }
   }));
 };
-
 ViewerRoutes.propTypes = propTypes$1;
 ViewerRoutes.defaultProps = defaultProps$1;
 
@@ -3280,38 +3061,35 @@ var defaultProps = {
   pathWithIndex: false,
   children: null
 };
-
 var ViewerContainer = function ViewerContainer(_ref) {
   var story = _ref.story,
-      paused = _ref.paused,
-      screenComponents = _ref.screenComponents,
-      memoryRouter = _ref.memoryRouter,
-      basePath = _ref.basePath,
-      routes = _ref.routes,
-      withoutRouter = _ref.withoutRouter,
-      googleApiKey = _ref.googleApiKey,
-      visitor = _ref.visitor,
-      trackingVariables = _ref.trackingVariables,
-      locale = _ref.locale,
-      locales = _ref.locales,
-      translations = _ref.translations,
-      pathWithIndex = _ref.pathWithIndex,
-      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
+    paused = _ref.paused,
+    screenComponents = _ref.screenComponents,
+    memoryRouter = _ref.memoryRouter,
+    basePath = _ref.basePath,
+    routes = _ref.routes,
+    withoutRouter = _ref.withoutRouter,
+    googleApiKey = _ref.googleApiKey,
+    visitor = _ref.visitor,
+    trackingVariables = _ref.trackingVariables,
+    locale = _ref.locale,
+    locales = _ref.locales,
+    translations = _ref.translations,
+    pathWithIndex = _ref.pathWithIndex,
+    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
   var Router = memoryRouter ? reactRouter.MemoryRouter : reactRouterDom.BrowserRouter;
   var finalTrackingVariables = React.useMemo(function () {
     if (story === null && trackingVariables === null) {
       return null;
     }
-
     var _story$id = story.id,
-        id = _story$id === void 0 ? null : _story$id,
-        _story$slug = story.slug,
-        slug = _story$slug === void 0 ? null : _story$slug,
-        _story$title = story.title,
-        title = _story$title === void 0 ? null : _story$title,
-        _story$components = story.components,
-        components = _story$components === void 0 ? [] : _story$components;
+      id = _story$id === void 0 ? null : _story$id,
+      _story$slug = story.slug,
+      slug = _story$slug === void 0 ? null : _story$slug,
+      _story$title = story.title,
+      title = _story$title === void 0 ? null : _story$title,
+      _story$components = story.components,
+      components = _story$components === void 0 ? [] : _story$components;
     return _objectSpread__default["default"]({
       storyId: id,
       storySlug: slug,
@@ -3319,14 +3097,11 @@ var ViewerContainer = function ViewerContainer(_ref) {
       screensCount: (components || []).length
     }, trackingVariables);
   }, [story, trackingVariables]);
-
   var _ref2 = story || {},
-      metadata = _ref2.metadata;
-
+    metadata = _ref2.metadata;
   var _ref3 = metadata || {},
-      _ref3$language = _ref3.language,
-      finalLocale = _ref3$language === void 0 ? locale : _ref3$language;
-
+    _ref3$language = _ref3.language,
+    finalLocale = _ref3$language === void 0 ? locale : _ref3$language;
   var content = /*#__PURE__*/React__default["default"].createElement(intl.IntlProvider, {
     locale: finalLocale,
     locales: locales,
@@ -3360,7 +3135,6 @@ var ViewerContainer = function ViewerContainer(_ref) {
     routes: routes
   }, content));
 };
-
 ViewerContainer.propTypes = propTypes;
 ViewerContainer.defaultProps = defaultProps;