@micromag/viewer 0.3.148 → 0.3.152

package/lib/index.js

@@ -19,6 +19,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var faArrowLeft = require('@fortawesome/free-solid-svg-icons/faArrowLeft');
 var faArrowRight = require('@fortawesome/free-solid-svg-icons/faArrowRight');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
+var react = require('@use-gesture/react');
 var classNames = require('classnames');
 var reactHelmet = require('react-helmet');
 var reactIntl = require('react-intl');
@@ -28,13 +29,16 @@ var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var core = require('@react-spring/core');
 var web = require('@react-spring/web');
-var react = require('@use-gesture/react');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
 var faCompress = require('@fortawesome/free-solid-svg-icons/faCompress');
 var faExpand = require('@fortawesome/free-solid-svg-icons/faExpand');
 var faShare = require('@fortawesome/free-solid-svg-icons/faShare');
 var Scroll = require('@micromag/element-scroll');
 var ShareOptions = require('@micromag/element-share-options');
+var faPause = require('@fortawesome/free-solid-svg-icons/faPause');
+var faPlay = require('@fortawesome/free-solid-svg-icons/faPlay');
+var faVolumeUp = require('@fortawesome/free-solid-svg-icons/faVolumeUp');
+var WebView = require('@micromag/element-webview');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -50,13 +54,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
 var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
-
-var home = "/";
-var screen = "/:screen";
-var defaultRoutes = {
-  home: home,
-  screen: screen
-};
+var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
 
 var routes = PropTypes__default["default"].shape({
   home: PropTypes__default["default"].string.isRequired,
@@ -135,21 +133,16 @@ function useScreenInteraction() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       screens = _ref.screens,
       screenIndex = _ref.screenIndex,
-      screenWidth = _ref.screenWidth,
-      _ref$isView = _ref.isView,
-      isView = _ref$isView === void 0 ? false : _ref$isView,
+      _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$eventsManager = _ref.eventsManager,
-      eventsManager = _ref$eventsManager === void 0 ? null : _ref$eventsManager,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? null : _ref$onClick,
-      _ref$onEnd = _ref.onEnd,
-      onEnd = _ref$onEnd === void 0 ? null : _ref$onEnd,
-      _ref$onChangeScreen = _ref.onChangeScreen,
-      onChangeScreen = _ref$onChangeScreen === void 0 ? null : _ref$onChangeScreen;
+      _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;
@@ -182,74 +175,69 @@ function useScreenInteraction() {
   var disableInteraction = React.useCallback(function () {
     return updateInteraction(false);
   }, [updateInteraction]);
-  var onScreenClick = React.useCallback(function (e, index) {
-    if (onClick !== null) {
-      onClick(e, index);
+  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;
+
+    if (onInteract !== null) {
+      onInteract({
+        event: event,
+        target: target,
+        currentTarget: currentTarget,
+        index: index,
+        x: x,
+        y: y
+      });
     }
 
     var screensCount = screens.length;
     var tappedCurrent = screenIndex === index;
 
-    if (eventsManager !== null) {
-      eventsManager.emit('tap', e, index);
-    }
-
-    if (!isView && tappedCurrent || checkClickable(e.target) || tappedCurrent && !currentScreenInteractionEnabled) {
+    if (disableCurrentScreenNavigation && tappedCurrent || checkClickable(target) || tappedCurrent && !currentScreenInteractionEnabled) {
       return;
     }
 
-    var nextIndex = screenIndex;
-
-    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
-        _e$currentTarget$getB2 = _e$currentTarget$getB.left,
-        contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2;
-
-    var tapX = e.clientX; // console.log(e.clientX, contentX, screenWidth);
-
-    var hasTappedLeft = tappedCurrent ? tapX - contentX < screenWidth * (1 - nextScreenWidthPercent) : screenIndex > index;
-
-    if (hasTappedLeft) {
-      nextIndex = clickOnSiblings ? index : Math.max(0, screenIndex - 1);
+    var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
+        left = _currentTarget$getBou.left,
+        width = _currentTarget$getBou.width;
 
-      if (eventsManager !== null) {
-        eventsManager.emit('tap_previous', nextIndex);
-      }
-    } else {
-      nextIndex = clickOnSiblings ? index : Math.min(screensCount - 1, screenIndex + 1);
-      var isLastScreen = screenIndex === screensCount - 1;
-
-      if (isLastScreen && onEnd !== null) {
-        onEnd();
+    var relativeX = x - left;
+    var direction = relativeX < width * (1 - nextScreenWidthPercent) ? 'previous' : 'next';
+    var lastIndex = screensCount - 1;
+    var nextIndex = index;
 
-        if (eventsManager !== null) {
-          eventsManager.emit('tap_end');
-        }
-      } else if (eventsManager) {
-        eventsManager.emit('tap_next', nextIndex);
-      }
+    if (direction === 'previous' && !clickOnSiblings) {
+      nextIndex = Math.max(0, screenIndex - 1);
+    } else if (direction === 'next' && !clickOnSiblings) {
+      nextIndex = Math.min(lastIndex, screenIndex + 1);
     }
 
-    if (eventsManager !== null) {
-      eventsManager.emit('change_screen', nextIndex);
+    if (onNavigate !== null) {
+      onNavigate({
+        index: index,
+        newIndex: nextIndex,
+        direction: direction,
+        end: index === nextIndex && nextIndex === lastIndex
+      });
     }
-
-    onChangeScreen(nextIndex);
-  }, [screenWidth, screens, screenIndex, eventsManager, onClick, onEnd, onChangeScreen, screenIndex, screensInteractionEnabled, currentScreenInteractionEnabled, nextScreenWidthPercent, isView, clickOnSiblings]);
+  }, [screens, screenIndex, screenIndex, screensInteractionEnabled, currentScreenInteractionEnabled, nextScreenWidthPercent, disableCurrentScreenNavigation, clickOnSiblings, onInteract, onNavigate]);
   return {
-    onClick: onScreenClick,
+    interact: interact,
     currentScreenInteractionEnabled: currentScreenInteractionEnabled,
     enableInteraction: enableInteraction,
     disableInteraction: disableInteraction
   };
 }
 
-var styles$8 = {"container":"micromag-viewer-container","navButton":"micromag-viewer-navButton","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","previous":"micromag-viewer-previous","next":"micromag-viewer-next","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","handTap":"micromag-viewer-handTap","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSiblings":"micromag-viewer-withSiblings","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready","hasInteracted":"micromag-viewer-hasInteracted"};
-
-var styles$7 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
+var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
 
-var styles$6 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
+var styles$a = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
 
-var propTypes$e = {
+var propTypes$g = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   colors: PropTypes__default["default"].shape({
@@ -262,7 +250,7 @@ var propTypes$e = {
   onClick: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$e = {
+var defaultProps$g = {
   current: false,
   active: false,
   colors: null,
@@ -325,44 +313,44 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     });
   }, [playing, duration, currentTime, setSpringProps]);
   var inner = current && count > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$6.dots
+    className: styles$a.dots
   }, _toConsumableArray__default["default"](Array(count).keys()).map(function (i) {
     return /*#__PURE__*/React__default["default"].createElement("span", {
-      className: classNames__default["default"]([styles$6.dot, styles$6.subDot]),
+      className: classNames__default["default"]([styles$a.dot, styles$a.subDot]),
       style: {
         width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
         backgroundColor: active && i <= subIndex ? primary : secondary
       }
     });
   })) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$6.dot,
+    className: styles$a.dot,
     style: {
       backgroundColor: active ? primary : secondary
     }
   });
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: classNames__default["default"]([styles$6.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$6.active, current), _defineProperty__default["default"](_ref3, styles$6.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
+    className: classNames__default["default"]([styles$a.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$a.active, current), _defineProperty__default["default"](_ref3, styles$a.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: styles$6.button,
+    className: styles$a.button,
     onClick: onClick,
     tabIndex: "-1"
   }, inner));
 };
 
-ViewerMenuDot.propTypes = propTypes$e;
-ViewerMenuDot.defaultProps = defaultProps$e;
+ViewerMenuDot.propTypes = propTypes$g;
+ViewerMenuDot.defaultProps = defaultProps$g;
 
-var styles$5 = {};
+var styles$9 = {};
 
-var propTypes$d = {
+var propTypes$f = {
   size: PropTypes__default["default"].number,
   spacing: PropTypes__default["default"].number,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$d = {
+var defaultProps$f = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -376,7 +364,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -394,10 +382,10 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$d;
-MenuIcon.defaultProps = defaultProps$d;
+MenuIcon.propTypes = propTypes$f;
+MenuIcon.defaultProps = defaultProps$f;
 
-var propTypes$c = {
+var propTypes$e = {
   direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes__default["default"].bool,
   items: core$1.PropTypes.menuItems,
@@ -413,7 +401,7 @@ var propTypes$c = {
   onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$c = {
+var defaultProps$e = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
@@ -453,7 +441,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     return current;
   });
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$7.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$7.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref4, styles$7.withShadow, withShadow), _ref4)]),
+    className: classNames__default["default"]([styles$b.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$b.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref4, styles$b.withShadow, withShadow), _ref4)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -477,7 +465,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$7.items
+    className: styles$b.items
   }, items.map(function (item, index) {
     var _ref5 = item || {},
         _ref5$current = _ref5.current,
@@ -504,9 +492,9 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       vertical: direction === 'vertical'
     });
   }), !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$7.menu
+    className: styles$b.menu
   }, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
-    className: styles$7.menuIcon,
+    className: styles$b.menuIcon,
     color: primary
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
@@ -524,16 +512,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$7.menuButton,
+    className: styles$b.menuButton,
     onClick: onClickMenu
   })) : null, closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$7.closeButton,
+    className: styles$b.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: styles$7.closeButton,
+    className: styles$b.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -554,15 +542,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$c;
-ViewerMenuDots.defaultProps = defaultProps$c;
-
-var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+ViewerMenuDots.propTypes = propTypes$e;
+ViewerMenuDots.defaultProps = defaultProps$e;
 
-var propTypes$b = {
+var propTypes$d = {
   className: PropTypes__default["default"].string
 };
-var defaultProps$b = {
+var defaultProps$d = {
   className: null
 };
 
@@ -579,47 +565,12 @@ var StackIcon = function StackIcon(_ref) {
   }));
 };
 
-StackIcon.propTypes = propTypes$b;
-StackIcon.defaultProps = defaultProps$b;
-
-var propTypes$a = {
-  className: PropTypes__default["default"].string
-};
-var defaultProps$a = {
-  className: null
-};
-
-var LinkIcon = function LinkIcon(_ref) {
-  var className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "32",
-    height: "32",
-    viewBox: "0 0 32 32",
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M13.13,17.44a7.18,7.18,0,0,0,10,1.45,6.34,6.34,0,0,0,.78-.68l4.31-4.31A7.18,7.18,0,0,0,18.2,3.65l-.09.09L15.65,6.2",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "3"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M18.87,14.56a7.19,7.19,0,0,0-10-1.45,6.34,6.34,0,0,0-.78.68L3.73,18.1A7.18,7.18,0,1,0,13.8,28.35l.09-.09,2.45-2.46",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "3"
-  }));
-};
-
-LinkIcon.propTypes = propTypes$a;
-LinkIcon.defaultProps = defaultProps$a;
+StackIcon.propTypes = propTypes$d;
+StackIcon.defaultProps = defaultProps$d;
 
-var styles$3 = {"close":"micromag-viewer-partials-share-modal-close","copyUrlButton":"micromag-viewer-partials-share-modal-copyUrlButton","screenUrlInput":"micromag-viewer-partials-share-modal-screenUrlInput","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions","otherOptions":"micromag-viewer-partials-share-modal-otherOptions","copyLink":"micromag-viewer-partials-share-modal-copyLink","linkIcon":"micromag-viewer-partials-share-modal-linkIcon","successfulCopyMessage":"micromag-viewer-partials-share-modal-successfulCopyMessage","isLinkCopied":"micromag-viewer-partials-share-modal-isLinkCopied"};
+var styles$8 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
 
-var propTypes$9 = {
+var propTypes$c = {
   url: PropTypes__default["default"].string,
   title: PropTypes__default["default"].string,
   opened: PropTypes__default["default"].bool,
@@ -627,7 +578,7 @@ var propTypes$9 = {
   onShare: PropTypes__default["default"].func,
   onCancel: PropTypes__default["default"].func
 };
-var defaultProps$9 = {
+var defaultProps$c = {
   url: null,
   title: null,
   opened: false,
@@ -646,24 +597,6 @@ var ShareModal = function ShareModal(_ref) {
       onShare = _ref.onShare,
       onCancel = _ref.onCancel;
   var modalRef = React.useRef();
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      linkCopied = _useState2[0],
-      setLinkCopied = _useState2[1];
-
-  var onClickCopy = React.useCallback(function () {
-    utils.copyToClipboard(url).then(function () {
-      setLinkCopied(true);
-      setTimeout(function () {
-        setLinkCopied(false);
-      }, 2000);
-    });
-  }, [setLinkCopied]);
-  var onClickLinkInput = React.useCallback(function (e) {
-    var target = e.target;
-    target.setSelectionRange(0, target.value.length);
-  }, []);
   var onDocumentClick = React.useCallback(function (e) {
     var _ref2 = e || {},
         target = _ref2.target;
@@ -676,15 +609,15 @@ var ShareModal = function ShareModal(_ref) {
   }, [opened, onCancel]);
   hooks.useDocumentEvent('click', onDocumentClick, opened);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$3.opened, opened), _ref3)]),
+    className: classNames__default["default"]([styles$8.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$8.opened, opened), _ref3)]),
     "aria-hidden": opened ? null : '-1'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.modal,
+    className: styles$8.modal,
     ref: modalRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.header
+    className: styles$8.header
   }, /*#__PURE__*/React__default["default"].createElement("h2", {
-    className: styles$3.heading
+    className: styles$8.heading
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "oL4ueH",
     defaultMessage: [{
@@ -692,54 +625,30 @@ var ShareModal = function ShareModal(_ref) {
       "value": "Share"
     }]
   })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$3.close,
+    className: styles$8.close,
     onClick: onCancel,
     focusable: opened
   }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
-    className: styles$3.closeIcon,
+    className: styles$8.closeIcon,
     border: "none"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.content
+    className: styles$8.content
   }, /*#__PURE__*/React__default["default"].createElement(ShareOptions__default["default"], {
-    className: styles$3.shareOptions,
+    className: styles$8.shareOptions,
     title: title,
     url: url,
     focusable: opened,
     onShare: onShare,
     onClose: onCancel
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.otherOptions
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$3.copyLink, _defineProperty__default["default"]({}, styles$3.isLinkCopied, linkCopied)])
-  }, /*#__PURE__*/React__default["default"].createElement("input", {
-    className: styles$3.screenUrlInput,
-    type: "text",
-    value: url,
-    onClick: onClickLinkInput,
-    readOnly: true
-  }), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$3.copyUrlButton,
-    onClick: onClickCopy,
-    focusable: opened
-  }, /*#__PURE__*/React__default["default"].createElement(LinkIcon, {
-    className: styles$3.linkIcon
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.successfulCopyMessage
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "XRmkEh",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Link copied to clipboard!"
-    }]
-  })))))));
+  }))));
 };
 
-ShareModal.propTypes = propTypes$9;
-ShareModal.defaultProps = defaultProps$9;
+ShareModal.propTypes = propTypes$c;
+ShareModal.defaultProps = defaultProps$c;
 
-var styles$2 = {"container":"micromag-viewer-partials-share-button-container"};
+var styles$7 = {"container":"micromag-viewer-partials-share-button-container"};
 
-var propTypes$8 = {
+var propTypes$b = {
   title: PropTypes__default["default"].string,
   url: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
@@ -748,7 +657,7 @@ var propTypes$8 = {
   children: PropTypes__default["default"].node,
   focusable: PropTypes__default["default"].bool
 };
-var defaultProps$8 = {
+var defaultProps$b = {
   title: null,
   url: null,
   className: null,
@@ -777,7 +686,7 @@ var ShareButton = function ShareButton(_ref) {
     setStoryShareModalOpened(function (opened) {
       return !opened;
     });
-  }, [setStoryShareModalOpened]);
+  }, [setStoryShareModalOpened, storyShareModalOpened]);
   var onStoryShared = React.useCallback(function (type) {
     setStoryShareModalOpened(false);
 
@@ -789,7 +698,7 @@ var ShareButton = function ShareButton(_ref) {
     setStoryShareModalOpened(false);
   }, [setStoryShareModalOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
     onClick: onShareIconClick,
@@ -809,7 +718,7 @@ var ShareButton = function ShareButton(_ref) {
     }),
     focusable: focusable
   }, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
-    className: styles$2.shareModal,
+    className: styles$7.shareModal,
     opened: storyShareModalOpened,
     title: title,
     url: url,
@@ -818,10 +727,12 @@ var ShareButton = function ShareButton(_ref) {
   }));
 };
 
-ShareButton.propTypes = propTypes$8;
-ShareButton.defaultProps = defaultProps$8;
+ShareButton.propTypes = propTypes$b;
+ShareButton.defaultProps = defaultProps$b;
 
-var propTypes$7 = {
+var styles$6 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+
+var propTypes$a = {
   viewerTheme: core$1.PropTypes.viewerTheme,
   screenSize: core$1.PropTypes.screenSize,
   menuWidth: PropTypes__default["default"].number,
@@ -839,7 +750,7 @@ var propTypes$7 = {
   fullscreenEnabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$7 = {
+var defaultProps$a = {
   viewerTheme: null,
   screenSize: null,
   menuWidth: null,
@@ -880,61 +791,55 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       screenWidth = _ref2.width,
       screenHeight = _ref2.height;
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      firstScreenContainerRef = _useResizeObserver.ref,
-      firstScreenContentRect = _useResizeObserver.entry.contentRect;
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      firstScreenContainerRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      thumbWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
 
-  var _useResizeObserver2 = hooks.useResizeObserver(),
-      containerRef = _useResizeObserver2.ref,
-      containerRect = _useResizeObserver2.entry.contentRect;
-
-  var _ref3 = firstScreenContentRect || {},
-      _ref3$width = _ref3.width,
-      thumbWidth = _ref3$width === void 0 ? 0 : _ref3$width;
-
-  var _ref4 = containerRect || {},
-      _ref4$width = _ref4.width,
-      contentWidth = _ref4$width === void 0 ? 0 : _ref4$width;
+  var _useDimensionObserver3 = hooks.useDimensionObserver(),
+      containerRef = _useDimensionObserver3.ref,
+      _useDimensionObserver4 = _useDimensionObserver3.width,
+      contentWidth = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
 
   var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // Viewer theme
 
-  var _ref5 = viewerTheme || {},
-      _ref5$colors = _ref5.colors,
-      colors = _ref5$colors === void 0 ? null : _ref5$colors,
-      _ref5$background = _ref5.background,
-      background = _ref5$background === void 0 ? null : _ref5$background,
-      _ref5$textStyles = _ref5.textStyles,
-      textStyles = _ref5$textStyles === void 0 ? null : _ref5$textStyles,
-      _ref5$logo = _ref5.logo,
-      brandLogo = _ref5$logo === void 0 ? null : _ref5$logo;
-
-  var _ref6 = textStyles || {},
-      _ref6$title = _ref6.title,
-      brandTextStyle = _ref6$title === void 0 ? null : _ref6$title;
-
-  var _ref7 = colors || {},
-      _ref7$primary = _ref7.primary,
-      brandPrimaryColor = _ref7$primary === void 0 ? null : _ref7$primary,
-      _ref7$secondary = _ref7.secondary,
-      brandSecondaryColor = _ref7$secondary === void 0 ? null : _ref7$secondary;
-
-  var _ref8 = background || {},
-      _ref8$color = _ref8.color,
-      brandBackgroundColor = _ref8$color === void 0 ? null : _ref8$color,
-      _ref8$image = _ref8.image,
-      image = _ref8$image === void 0 ? null : _ref8$image;
-
-  var _ref9 = image || {},
-      _ref9$url = _ref9.url,
-      brandImageUrl = _ref9$url === void 0 ? null : _ref9$url;
+  var _ref3 = viewerTheme || {},
+      _ref3$colors = _ref3.colors,
+      colors = _ref3$colors === void 0 ? null : _ref3$colors,
+      _ref3$background = _ref3.background,
+      background = _ref3$background === void 0 ? null : _ref3$background,
+      _ref3$textStyles = _ref3.textStyles,
+      textStyles = _ref3$textStyles === void 0 ? null : _ref3$textStyles,
+      _ref3$logo = _ref3.logo,
+      brandLogo = _ref3$logo === void 0 ? null : _ref3$logo;
+
+  var _ref4 = textStyles || {},
+      _ref4$title = _ref4.title,
+      brandTextStyle = _ref4$title === void 0 ? null : _ref4$title;
+
+  var _ref5 = colors || {},
+      _ref5$primary = _ref5.primary,
+      brandPrimaryColor = _ref5$primary === void 0 ? null : _ref5$primary,
+      _ref5$secondary = _ref5.secondary,
+      brandSecondaryColor = _ref5$secondary === void 0 ? null : _ref5$secondary;
+
+  var _ref6 = background || {},
+      _ref6$color = _ref6.color,
+      brandBackgroundColor = _ref6$color === void 0 ? null : _ref6$color,
+      _ref6$image = _ref6.image,
+      image = _ref6$image === void 0 ? null : _ref6$image;
+
+  var _ref7 = image || {},
+      _ref7$url = _ref7.url,
+      brandImageUrl = _ref7$url === void 0 ? null : _ref7$url;
 
   var borderPrimaryColorStyle = utils.getStyleFromColor(brandPrimaryColor, 'borderColor');
   var colorSecondaryColorStyle = utils.getStyleFromColor(brandSecondaryColor, 'color');
   var backgroundColorStyle = utils.getStyleFromColor(brandBackgroundColor, 'backgroundColor');
 
-  var _ref10 = brandLogo || {},
-      _ref10$url = _ref10.url,
-      brandLogoUrl = _ref10$url === void 0 ? null : _ref10$url;
+  var _ref8 = brandLogo || {},
+      _ref8$url = _ref8.url,
+      brandLogoUrl = _ref8$url === void 0 ? null : _ref8$url;
 
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
@@ -946,11 +851,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       scrolledBottom = _useState2[0],
       setScrolledBottom = _useState2[1];
 
-  var dragBind = react.useDrag(function (_ref11) {
-    var _ref11$direction = _slicedToArray__default["default"](_ref11.direction, 2),
-        dy = _ref11$direction[1],
-        last = _ref11.last,
-        tap = _ref11.tap;
+  var dragBind = react.useDrag(function (_ref9) {
+    var _ref9$direction = _slicedToArray__default["default"](_ref9.direction, 2),
+        dy = _ref9$direction[1],
+        last = _ref9.last,
+        tap = _ref9.tap;
 
     if (!tap && last && scrolledBottom && dy < 0 && onClose !== null) {
       onClose();
@@ -971,36 +876,36 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     return !focusable ? items.slice(0, 3) : items;
   }, [items, focusable]);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: classNames__default["default"]([styles$4.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({}, className, className !== null)]),
     style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, backgroundColorStyle), brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
   }, dragBind()), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.header
+    className: styles$6.header
   }, brandLogoUrl !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.organisation,
+    className: styles$6.organisation,
     style: {
       backgroundImage: "url(".concat(brandLogoUrl, ")")
     }
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.title,
+    className: styles$6.title,
     style: titleStyle
   }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.buttons,
+    className: styles$6.buttons,
     style: colorSecondaryColorStyle
   }, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
-    className: styles$4.shareButton,
-    buttonClassName: styles$4.button,
+    className: styles$6.shareButton,
+    buttonClassName: styles$6.button,
     onShare: onShare,
     url: shareUrl,
     title: title,
     focusable: focusable
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$4.icon,
+    className: styles$6.icon,
     icon: faShare.faShare
   })), fullscreenEnabled ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$4.button,
+    className: styles$6.button,
     onClick: toggleFullscreen,
     title: intl.formatMessage({
       id: "AuxqcG",
@@ -1018,10 +923,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$4.icon,
+    className: styles$6.icon,
     icon: fullscreenActive ? faCompress.faCompress : faExpand.faExpand
   })) : null, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$4.button,
+    className: styles$6.button,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -1039,19 +944,19 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$4.icon,
+    className: styles$6.icon,
     icon: faTimes.faTimes
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.content,
+    className: styles$6.content,
     ref: containerRef
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-    className: styles$4.scroll,
+    className: styles$6.scroll,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
   }, /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: styles$4.nav
+    className: styles$6.nav
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$4.items
+    className: styles$6.items
   }, finalItems.map(function (item, index) {
     var screenId = item.screenId,
         _item$current = item.current,
@@ -1078,22 +983,22 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       }]
     })) : '');
     return /*#__PURE__*/React__default["default"].createElement("li", {
-      className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.active, current)]),
+      className: classNames__default["default"]([styles$6.item, _defineProperty__default["default"]({}, styles$6.active, current)]),
       key: "item-".concat(screenId),
       style: {
         width: "".concat(100 / thumbsPerLine, "%")
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$4.itemContent
+      className: styles$6.itemContent
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$4.screenContainer,
+      className: styles$6.screenContainer,
       ref: index === 0 ? firstScreenContainerRef : null
     }, count > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$4.subScreenBadge
+      className: styles$6.subScreenBadge
     }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$4.subScreenCount
+      className: styles$6.subScreenCount
     }, count), /*#__PURE__*/React__default["default"].createElement(StackIcon, {
-      className: styles$4.subScreenIcon
+      className: styles$6.subScreenIcon
     })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
       screenWidth: screenWidth,
       screenHeight: screenHeight,
@@ -1103,11 +1008,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       active: focusable,
       withSize: true
     }) : null, current ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$4.activeScreenBorder,
+      className: styles$6.activeScreenBorder,
       style: borderPrimaryColorStyle
     }) : null)), /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: styles$4.screenButton,
+      className: styles$6.screenButton,
       onClick: function onClick() {
         if (onClickItem !== null) {
           onClickItem(item);
@@ -1124,10 +1029,12 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }))))));
 };
 
-ViewerMenuPreview.propTypes = propTypes$7;
-ViewerMenuPreview.defaultProps = defaultProps$7;
+ViewerMenuPreview.propTypes = propTypes$a;
+ViewerMenuPreview.defaultProps = defaultProps$a;
 
-var propTypes$6 = {
+var styles$5 = {"container":"micromag-viewer-container","navButton":"micromag-viewer-navButton","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","previous":"micromag-viewer-previous","next":"micromag-viewer-next","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","handTap":"micromag-viewer-handTap","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSiblings":"micromag-viewer-withSiblings","playbackControlsContainer":"micromag-viewer-playbackControlsContainer","playbackControls":"micromag-viewer-playbackControls","isCollapsed":"micromag-viewer-isCollapsed","webView":"micromag-viewer-webView","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready","hasInteracted":"micromag-viewer-hasInteracted"};
+
+var propTypes$9 = {
   story: core$1.PropTypes.story.isRequired,
   currentScreenIndex: PropTypes__default["default"].number,
   opened: PropTypes__default["default"].bool,
@@ -1153,7 +1060,7 @@ var propTypes$6 = {
 
   })
 };
-var defaultProps$6 = {
+var defaultProps$9 = {
   currentScreenIndex: 0,
   opened: false,
   toggleFullscreen: null,
@@ -1275,29 +1182,26 @@ var ViewerMenu = function ViewerMenu(_ref) {
     });
   }, [opened]);
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      menuPreviewContainerRef = _useResizeObserver.ref,
-      menuPreviewContainerRect = _useResizeObserver.entry.contentRect;
-
-  var _ref4 = menuPreviewContainerRect || {},
-      _ref4$height = _ref4.height,
-      menuPreviewContainerHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      menuPreviewContainerRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.height,
+      menuPreviewContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
 
   var menuPreviewStyle = {
     transform: menuY.to(function (y) {
       return "translateY(".concat(y * menuPreviewContainerHeight, "px)");
     })
   };
-  var menuDragBind = react.useDrag(function (_ref5) {
-    var _ref5$movement = _slicedToArray__default["default"](_ref5.movement, 2),
-        my = _ref5$movement[1],
-        first = _ref5.first,
-        last = _ref5.last,
-        _ref5$direction = _slicedToArray__default["default"](_ref5.direction, 2),
-        dy = _ref5$direction[1],
-        cancel = _ref5.cancel,
-        canceled = _ref5.canceled,
-        tap = _ref5.tap;
+  var menuDragBind = react.useDrag(function (_ref4) {
+    var _ref4$movement = _slicedToArray__default["default"](_ref4.movement, 2),
+        my = _ref4$movement[1],
+        first = _ref4.first,
+        last = _ref4.last,
+        _ref4$direction = _slicedToArray__default["default"](_ref4.direction, 2),
+        dy = _ref4$direction[1],
+        cancel = _ref4.cancel,
+        canceled = _ref4.canceled,
+        tap = _ref4.tap;
 
     if (canceled || tap) {
       return;
@@ -1348,8 +1252,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
       customOnClickItem(item);
     }
 
-    var index = items.findIndex(function (_ref6) {
-      var id = _ref6.id;
+    var index = items.findIndex(function (_ref5) {
+      var id = _ref5.id;
       return id === screenId;
     });
     trackScreenEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1));
@@ -1366,12 +1270,12 @@ var ViewerMenu = function ViewerMenu(_ref) {
     return trackScreenEvent('viewer_menu', 'click_share', type);
   }, [trackScreenEvent]);
 
-  var _ref7 = viewerTheme || {},
-      _ref7$menuTheme = _ref7.menuTheme,
-      menuTheme = _ref7$menuTheme === void 0 ? null : _ref7$menuTheme;
+  var _ref6 = viewerTheme || {},
+      _ref6$menuTheme = _ref6.menuTheme,
+      menuTheme = _ref6$menuTheme === void 0 ? null : _ref6$menuTheme;
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: styles$8.menuDotsContainer,
+    className: styles$5.menuDotsContainer,
     ref: refDots,
     style: {
       width: menuWidth
@@ -1386,16 +1290,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
     onClose: onClickCloseViewer,
-    className: styles$8.menuDots
+    className: styles$5.menuDots
   }))), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
-    className: styles$8.menuPreviewContainer,
+    className: styles$5.menuPreviewContainer,
     style: menuPreviewStyle,
     ref: menuPreviewContainerRef
   }, /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     title: title,
     shareUrl: shareUrl,
-    className: styles$8.menuPreview,
+    className: styles$5.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
     focusable: opened,
@@ -1409,34 +1313,26 @@ var ViewerMenu = function ViewerMenu(_ref) {
   })));
 };
 
-ViewerMenu.propTypes = propTypes$6;
-ViewerMenu.defaultProps = defaultProps$6;
+ViewerMenu.propTypes = propTypes$9;
+ViewerMenu.defaultProps = defaultProps$9;
 
-var styles$1 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+var styles$4 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
 
-var propTypes$5 = {
+var propTypes$8 = {
   screen: core$1.PropTypes.screenComponent,
   renderContext: core$1.PropTypes.renderContext,
   screenState: PropTypes__default["default"].string,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
-  onPrevious: PropTypes__default["default"].func,
-  onNext: PropTypes__default["default"].func,
-  enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func,
-  getMediaRef: PropTypes__default["default"].func
+  mediaRef: PropTypes__default["default"].func
 };
-var defaultProps$5 = {
+var defaultProps$8 = {
   screen: null,
   renderContext: null,
   screenState: null,
   current: false,
   active: true,
-  onPrevious: null,
-  onNext: null,
-  enableInteraction: null,
-  disableInteraction: null,
-  getMediaRef: null
+  mediaRef: null
 };
 
 var ViewerScreen = function ViewerScreen(_ref) {
@@ -1447,13 +1343,9 @@ var ViewerScreen = function ViewerScreen(_ref) {
       screenState = _ref.screenState,
       active = _ref.active,
       current = _ref.current,
-      onPrevious = _ref.onPrevious,
-      onNext = _ref.onNext,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
-      getMediaRef = _ref.getMediaRef;
+      mediaRef = _ref.mediaRef;
   return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$1.active, active), _defineProperty__default["default"](_ref2, styles$1.current, current), _ref2)]),
+    className: classNames__default["default"]([styles$4.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$4.active, active), _defineProperty__default["default"](_ref2, styles$4.current, current), _ref2)]),
     "aria-hidden": current ? null : 'true'
   }, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
     screen: screen,
@@ -1461,24 +1353,20 @@ var ViewerScreen = function ViewerScreen(_ref) {
     screenState: screenState,
     active: active,
     current: current,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction,
-    getMediaRef: getMediaRef
+    mediaRef: mediaRef
   })) : null;
 };
 
-ViewerScreen.propTypes = propTypes$5;
-ViewerScreen.defaultProps = defaultProps$5;
+ViewerScreen.propTypes = propTypes$8;
+ViewerScreen.defaultProps = defaultProps$8;
 
-var styles = {"container":"micromag-viewer-partials-hand-tap-container","circle":"micromag-viewer-partials-hand-tap-circle","pulse":"micromag-viewer-partials-hand-tap-pulse","hand":"micromag-viewer-partials-hand-tap-hand","panY":"micromag-viewer-partials-hand-tap-panY","inner":"micromag-viewer-partials-hand-tap-inner","shadowFade":"micromag-viewer-partials-hand-tap-shadowFade"};
+var styles$3 = {"container":"micromag-viewer-partials-hand-tap-container","circle":"micromag-viewer-partials-hand-tap-circle","pulse":"micromag-viewer-partials-hand-tap-pulse","hand":"micromag-viewer-partials-hand-tap-hand","panY":"micromag-viewer-partials-hand-tap-panY","inner":"micromag-viewer-partials-hand-tap-inner","shadowFade":"micromag-viewer-partials-hand-tap-shadowFade"};
 
-var propTypes$4 = {
+var propTypes$7 = {
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$4 = {
+var defaultProps$7 = {
   color: 'currentColor',
   className: null
 };
@@ -1498,31 +1386,463 @@ var HandIcon = function HandIcon(_ref) {
   }));
 };
 
-HandIcon.propTypes = propTypes$4;
-HandIcon.defaultProps = defaultProps$4;
+HandIcon.propTypes = propTypes$7;
+HandIcon.defaultProps = defaultProps$7;
 
-var propTypes$3 = {
+var propTypes$6 = {
   className: PropTypes__default["default"].string
 };
-var defaultProps$3 = {
+var defaultProps$6 = {
   className: null
 };
 
 var HandTap = function HandTap(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.inner
+    className: styles$3.inner
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.circle
+    className: styles$3.circle
   }), /*#__PURE__*/React__default["default"].createElement(HandIcon, {
-    className: styles.hand
+    className: styles$3.hand
+  })));
+};
+
+HandTap.propTypes = propTypes$6;
+HandTap.defaultProps = defaultProps$6;
+
+var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","time":"micromag-viewer-partials-seek-bar-time"};
+
+var propTypes$5 = {
+  media: PropTypes__default["default"].node,
+  currentTime: PropTypes__default["default"].number,
+  duration: PropTypes__default["default"].number,
+  playing: PropTypes__default["default"].bool,
+  backgroundColor: core$1.PropTypes.color,
+  progressColor: core$1.PropTypes.color,
+  onSeek: PropTypes__default["default"].func,
+  onSeekStart: PropTypes__default["default"].func,
+  onSeekEnd: PropTypes__default["default"].func,
+  focusable: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  withSeekHead: PropTypes__default["default"].bool
+};
+var defaultProps$5 = {
+  media: null,
+  currentTime: null,
+  duration: null,
+  playing: false,
+  backgroundColor: null,
+  progressColor: null,
+  onSeek: null,
+  onSeekStart: null,
+  onSeekEnd: null,
+  focusable: true,
+  className: null,
+  withSeekHead: true
+};
+
+var SeekBar = function SeekBar(_ref) {
+  var _ref3;
+
+  var media = _ref.media,
+      currentTime = _ref.currentTime,
+      duration = _ref.duration,
+      playing = _ref.playing,
+      backgroundColor = _ref.backgroundColor,
+      progressColor = _ref.progressColor,
+      onSeek = _ref.onSeek,
+      onSeekStart = _ref.onSeekStart,
+      onSeekEnd = _ref.onSeekEnd,
+      focusable = _ref.focusable,
+      className = _ref.className,
+      withSeekHead = _ref.withSeekHead;
+  var intl = reactIntl.useIntl();
+
+  var _useSpring = core.useSpring(function () {
+    return {
+      x: currentTime !== null && duration !== null ? currentTime / duration : 0,
+      config: {
+        duration: 0
+      }
+    };
+  }),
+      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+      springProps = _useSpring2[0],
+      setSpringProps = _useSpring2[1];
+
+  var lastMediaRef = React.useRef(media);
+  var mediaChanged = lastMediaRef.current !== media;
+  lastMediaRef.current = media;
+
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      elRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2;
+
+  React.useEffect(function () {
+    if (currentTime === null || duration === null) {
+      return;
+    }
+
+    var progress = duration > 0 ? currentTime / duration : 0;
+    setSpringProps.start({
+      reset: true,
+      immediate: !playing || mediaChanged,
+      from: {
+        x: progress
+      },
+      to: {
+        x: playing ? 1 : progress
+      },
+      config: {
+        duration: (duration - currentTime) * 1000
+      }
+    });
+  }, [playing, duration, currentTime, mediaChanged, setSpringProps]); // User events
+
+  var seekFromX = React.useCallback(function (x) {
+    var elX = elRef.current.getBoundingClientRect().left;
+    var progress = Math.max(0, Math.min(1, (x - elX) / elWidth));
+    setSpringProps.start({
+      immediate: true,
+      to: {
+        x: progress
+      }
+    });
+
+    if (onSeek !== null && duration !== null) {
+      onSeek(progress * duration);
+    }
+  }, [duration, playing, onSeek]);
+  var bind = react.useGesture({
+    onDrag: function onDrag(_ref2) {
+      var _ref2$xy = _slicedToArray__default["default"](_ref2.xy, 1),
+          x = _ref2$xy[0],
+          elapsedTime = _ref2.elapsedTime,
+          active = _ref2.active;
+
+      if (!active && elapsedTime > 300) {
+        return;
+      }
+
+      seekFromX(x);
+    },
+    onPointerDown: function onPointerDown() {
+      if (onSeekStart !== null) {
+        onSeekStart();
+      }
+    },
+    onPointerUp: function onPointerUp() {
+      if (onSeekEnd !== null) {
+        onSeekEnd();
+      }
+    }
+  }, {
+    drag: {
+      axis: 'x',
+      filterTaps: true
+    }
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$2.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles$2.withSeekHead, withSeekHead), _ref3)])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$2.inner
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$2.progressBar,
+    style: {
+      backgroundColor: backgroundColor
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+    className: styles$2.playHead,
+    style: {
+      left: springProps.x.to(function (x) {
+        return "".concat(x * 100, "%");
+      }),
+      backgroundColor: progressColor
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+    className: styles$2.progress,
+    style: {
+      transform: springProps.x.to(function (x) {
+        return "scaleX(".concat(x, ")");
+      }),
+      backgroundColor: progressColor
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
+    ref: elRef
+  }, bind(), {
+    type: "button",
+    className: styles$2.track,
+    title: intl.formatMessage({
+      id: "G1Gyjn",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Seek"
+      }]
+    }),
+    "aria-label": intl.formatMessage({
+      id: "G1Gyjn",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Seek"
+      }]
+    }),
+    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","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","icon":"micromag-viewer-partials-playback-controls-icon","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar"};
+
+var propTypes$4 = {
+  className: PropTypes__default["default"].string
+};
+var defaultProps$4 = {
+  className: null
+};
+
+function PlaybackControls(_ref) {
+  var _ref4;
+
+  var className = _ref.className;
+  var intl = reactIntl.useIntl();
+
+  var _usePlaybackContext = contexts.usePlaybackContext(),
+      _usePlaybackContext$m = _usePlaybackContext.media,
+      mediaElement = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m,
+      _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 duration = hooks.useMediaDuration(mediaElement);
+  var currentTime = hooks.useMediaCurrentTime(mediaElement, {
+    disabled: !playing,
+    updateInterval: 100
+  });
+
+  var _useState = React.useState(null),
+      _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];
+
+  React.useEffect(function () {
+    var _ref2 = controlsTheme || {},
+        color = _ref2.color,
+        progressColor = _ref2.progressColor,
+        seekBarOnly = _ref2.seekBarOnly;
+
+    setCustomControlsTheme({
+      color: utils.getColorAsString(color),
+      progressColor: utils.getColorAsString(progressColor),
+      seekBarOnly: seekBarOnly
+    });
+  }, [controlsTheme, setCustomControlsTheme]);
+  var onPlay = React.useCallback(function () {
+    setPlaying(true);
+
+    if (!controlsVisible) {
+      showControls();
+    }
+  }, [setPlaying, controlsVisible, showControls]);
+  var onPause = React.useCallback(function () {
+    setPlaying(false);
+
+    if (!controlsVisible) {
+      showControls();
+    }
+  }, [setPlaying, controlsVisible, 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);
+  }, [playing, setWasPlaying]);
+  var onSeek = React.useCallback(function (time) {
+    mediaElement.currentTime = time;
+    showControls();
+  }, [mediaElement, setWasPlaying, playing, setPlaying, showControls]);
+  var onSeekEnd = React.useCallback(function () {
+    if (wasPlaying) setPlaying(true);
+  }, [playing, setPlaying, wasPlaying]);
+
+  var _ref3 = customControlsTheme || {},
+      color = _ref3.color,
+      progressColor = _ref3.progressColor,
+      seekBarOnly = _ref3.seekBarOnly;
+
+  var isCollapsed = controls && !controlsVisible && playing || !controls && mediaElement !== null;
+  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, mediaElement !== null || controls), _defineProperty__default["default"](_ref4, styles$1.withSeekBar, controls), _defineProperty__default["default"](_ref4, styles$1.isCollapsed, isCollapsed), _ref4)])
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: styles$1.playPauseButton,
+    style: {
+      color: color
+    },
+    onClick: playing ? onPause : onPlay,
+    title: intl.formatMessage({
+      id: "ahSpiH",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Play"
+      }]
+    }),
+    "aria-label": intl.formatMessage({
+      id: "ahSpiH",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Play"
+      }]
+    }),
+    tabIndex: controlsVisible ? '0' : '-1'
+  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$1.icon,
+    icon: playing ? faPause.faPause : faPlay.faPlay
+  })), /*#__PURE__*/React__default["default"].createElement(SeekBar, {
+    className: styles$1.seekBar,
+    duration: duration,
+    currentTime: currentTime,
+    playing: playing,
+    media: mediaElement,
+    onSeek: onSeek,
+    onSeekStart: onSeekStart,
+    onSeekEnd: onSeekEnd,
+    focusable: playing,
+    isCollapsed: isCollapsed,
+    withSeekHead: controlsVisible && !seekBarOnly,
+    backgroundColor: color,
+    progressColor: progressColor
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: classNames__default["default"]([styles$1.muteButton, _defineProperty__default["default"]({}, styles$1.isMuted, muted)]),
+    style: {
+      color: color
+    },
+    onClick: muted ? onUnmute : onMute,
+    title: intl.formatMessage({
+      id: "vzg8Es",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Mute"
+      }]
+    }),
+    "aria-label": intl.formatMessage({
+      id: "vzg8Es",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Mute"
+      }]
+    }),
+    tabIndex: controlsVisible ? '0' : '-1'
+  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$1.icon,
+    icon: faVolumeUp.faVolumeUp
   })));
+}
+
+PlaybackControls.propTypes = propTypes$4;
+PlaybackControls.defaultProps = defaultProps$4;
+
+var styles = {"container":"micromag-viewer-partials-web-view-container","opened":"micromag-viewer-partials-web-view-opened"};
+
+var _excluded$2 = ["opened", "close", "open", "update", "url"];
+var propTypes$3 = {
+  className: PropTypes__default["default"].string,
+  style: PropTypes__default["default"].object
+};
+var defaultProps$3 = {
+  className: null,
+  style: null
 };
 
-HandTap.propTypes = propTypes$3;
-HandTap.defaultProps = defaultProps$3;
+function WebViewContainer(_ref) {
+  var _ref2;
+
+  var className = _ref.className,
+      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);
+
+  var _useViewerInteraction = contexts.useViewerInteraction(),
+      disableInteraction = _useViewerInteraction.disableInteraction,
+      enableInteraction = _useViewerInteraction.enableInteraction;
+
+  var _useState = React.useState(url),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      currentUrl = _useState2[0],
+      setCurrentUrl = _useState2[1];
+
+  React.useEffect(function () {
+    if (url !== null) {
+      setCurrentUrl(url);
+    }
+  }, [url, setCurrentUrl]);
+  React.useEffect(function () {
+    if (opened) {
+      disableInteraction();
+    } else {
+      enableInteraction();
+    }
+
+    return function () {
+      enableInteraction();
+    };
+  }, [opened]);
+  var onTransitionEnd = React.useCallback(function () {
+    if (url === null) {
+      setCurrentUrl(null);
+    }
+  }, [url]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles.opened, opened), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
+    style: style,
+    onTransitionEnd: onTransitionEnd
+  }, /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
+    url: url || currentUrl
+  }, webViewProps, {
+    closeable: true,
+    className: styles.webView,
+    onClose: close
+  })));
+}
+
+WebViewContainer.propTypes = propTypes$3;
+WebViewContainer.defaultProps = defaultProps$3;
 
 var propTypes$2 = {
   story: core$1.PropTypes.story,
@@ -1601,7 +1921,7 @@ var defaultProps$2 = {
 };
 
 var Viewer = function Viewer(_ref) {
-  var _ref12;
+  var _ref14;
 
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -1613,7 +1933,6 @@ var Viewer = function Viewer(_ref) {
       deviceScreens = _ref.deviceScreens,
       renderContext = _ref.renderContext,
       visitor = _ref.visitor,
-      onScreenChange = _ref.onScreenChange,
       tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
       neighborScreensActive = _ref.neighborScreensActive,
       neighborScreensMounted = _ref.neighborScreensMounted,
@@ -1631,6 +1950,7 @@ var Viewer = function Viewer(_ref) {
       onCloseViewer = _ref.onClose,
       onInteraction = _ref.onInteraction,
       onEnd = _ref.onEnd,
+      onScreenChange = _ref.onScreenChange,
       onViewModeChange = _ref.onViewModeChange,
       currentScreenMedia = _ref.currentScreenMedia,
       screensMedias = _ref.screensMedias,
@@ -1678,6 +1998,14 @@ var Viewer = function Viewer(_ref) {
   var isStatic = renderContext === 'static';
   var isCapture = renderContext === 'capture';
   var withoutScreensTransforms = isStatic || isCapture;
+
+  var _usePlaybackContext = contexts.usePlaybackContext(),
+      playing = _usePlaybackContext.playing,
+      _usePlaybackContext$c = _usePlaybackContext.controlsVisible,
+      playbackcontrolsVisible = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
+      _usePlaybackContext$m = _usePlaybackContext.media,
+      playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m;
+
   var trackScreenView = hooks.useTrackScreenView();
   var contentRef = React.useRef(null); // Get screen size
 
@@ -1708,10 +2036,11 @@ var Viewer = function Viewer(_ref) {
   React.useEffect(function () {
     if (ready && onViewModeChange !== null) {
       onViewModeChange({
-        landscape: landscape
+        landscape: landscape,
+        menuOverScreen: menuOverScreen
       });
     }
-  }, [ready, landscape, onViewModeChange]);
+  }, [ready, landscape, menuOverScreen, onViewModeChange]);
   var screensMediasRef = React.useRef([]); // Screen index
 
   var screenIndex = React.useMemo(function () {
@@ -1721,7 +2050,7 @@ var Viewer = function Viewer(_ref) {
   }, [screenId, screens]);
 
   if (currentScreenMedia !== null) {
-    currentScreenMedia.current = screensMediasRef.current[screenIndex];
+    currentScreenMedia.current = screensMediasRef.current[screenIndex] || null;
   }
 
   if (screensMedias !== null) {
@@ -1752,12 +2081,10 @@ var Viewer = function Viewer(_ref) {
 
   var currentScreenRef = React.useRef(null);
   var gotoPreviousScreen = React.useCallback(function () {
-    changeIndex(Math.max(0, screenIndex - 1));
-    currentScreenRef.current.focus();
+    changeIndex(Math.max(0, screenIndex - 1)); // currentScreenRef.current.focus();
   }, [changeIndex]);
   var gotoNextScreen = React.useCallback(function () {
-    changeIndex(Math.min(screens.length - 1, screenIndex + 1));
-    currentScreenRef.current.focus();
+    changeIndex(Math.min(screens.length - 1, screenIndex + 1)); // currentScreenRef.current.focus();
   }, [changeIndex]);
   var screensCount = screens.length;
 
@@ -1775,45 +2102,107 @@ var Viewer = function Viewer(_ref) {
       setHasInteracted(true);
     }
   }, [onInteraction, hasInteracted, setHasInteracted]);
+  var onScreenNavigate = React.useCallback(function (_ref6) {
+    var index = _ref6.index,
+        newIndex = _ref6.newIndex,
+        end = _ref6.end,
+        direction = _ref6.direction;
+
+    if (end && onEnd !== null) {
+      onEnd();
+    }
+
+    changeIndex(newIndex);
+    eventsManager.emit('navigate', {
+      newIndex: newIndex,
+      index: index,
+      direction: direction,
+      end: end
+    });
+
+    if (end) {
+      eventsManager.emit('navigate_end');
+    } else {
+      eventsManager.emit("navigate_".concat(direction), newIndex);
+    }
+  }, [onEnd, changeIndex]);
 
   var _useScreenInteraction = useScreenInteraction({
     screens: screens,
     screenIndex: screenIndex,
     screenWidth: screenContainerWidth,
-    isView: isView,
+    disableCurrentScreenNavigation: !isView,
     clickOnSiblings: landscape && withLandscapeSiblingsScreens,
     nextScreenWidthPercent: tapNextScreenWidthPercent,
-    eventsManager: eventsManager,
-    onClick: onInteractionPrivate,
-    onEnd: onEnd,
-    onChangeScreen: changeIndex
+    onInteract: onInteractionPrivate,
+    onNavigate: onScreenNavigate
   }),
-      onScreenClick = _useScreenInteraction.onClick,
+      interactWithScreen = _useScreenInteraction.interact,
       currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
       enableInteraction = _useScreenInteraction.enableInteraction,
-      disableInteraction = _useScreenInteraction.disableInteraction;
-
-  var onClickContent = React.useCallback(function (e) {
-    if (withLandscapeSiblingsScreens || e.target !== contentRef.current) {
-      return;
+      disableInteraction = _useScreenInteraction.disableInteraction; // Handle tap on screens
+
+
+  var onDragScreen = React.useCallback(function (_ref7) {
+    var _ref7$args = _slicedToArray__default["default"](_ref7.args, 1),
+        tapScreenIndex = _ref7$args[0],
+        event = _ref7.event,
+        target = _ref7.target,
+        currentTarget = _ref7.currentTarget,
+        tap = _ref7.tap,
+        _ref7$xy = _slicedToArray__default["default"](_ref7.xy, 2),
+        x = _ref7$xy[0],
+        y = _ref7$xy[1];
+
+    if (tap) {
+      interactWithScreen({
+        event: event,
+        target: target,
+        currentTarget: currentTarget,
+        index: tapScreenIndex,
+        x: x,
+        y: y
+      });
     }
+  }, [interactWithScreen]);
+  var dragScreenBind = react.useDrag(onDragScreen, {
+    filterTaps: true
+  }); // Handles tap when landscape (space around current screen)
 
-    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
-        _e$currentTarget$getB2 = _e$currentTarget$getB.left,
-        contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2,
-        _e$currentTarget$getB3 = _e$currentTarget$getB.width,
-        contentWidth = _e$currentTarget$getB3 === void 0 ? 0 : _e$currentTarget$getB3;
-
-    var tapX = e.clientX;
-    var hasTappedLeft = tapX - contentX < contentWidth * 0.5;
-    var nextIndex = hasTappedLeft ? Math.max(0, screenIndex - 1) : Math.min(screensCount - 1, screenIndex + 1);
+  var onDragContent = React.useCallback(function (_ref8) {
+    var tap = _ref8.tap,
+        target = _ref8.target,
+        currentTarget = _ref8.currentTarget,
+        _ref8$xy = _slicedToArray__default["default"](_ref8.xy, 1),
+        x = _ref8$xy[0];
 
-    if (eventsManager !== null) {
-      eventsManager.emit('change_screen', nextIndex);
+    if (!landscape || withLandscapeSiblingsScreens || target !== contentRef.current) {
+      return;
     }
 
-    changeIndex(nextIndex);
-  }, [withLandscapeSiblingsScreens, screenIndex, tapNextScreenWidthPercent, changeIndex, eventsManager, screensCount]); // swipe menu open
+    if (tap) {
+      var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
+          _currentTarget$getBou2 = _currentTarget$getBou.left,
+          contentX = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
+          _currentTarget$getBou3 = _currentTarget$getBou.width,
+          contentWidth = _currentTarget$getBou3 === void 0 ? 0 : _currentTarget$getBou3;
+
+      var hasTappedLeft = x - contentX < contentWidth * 0.5;
+      var nextIndex = hasTappedLeft ? Math.max(0, screenIndex - 1) : Math.min(screensCount - 1, screenIndex + 1);
+      onScreenNavigate({
+        index: screenIndex,
+        newIndex: nextIndex
+      });
+    }
+  }, [screenIndex, screensCount, landscape, withLandscapeSiblingsScreens]);
+  var dragContentBind = react.useDrag(onDragContent, {
+    filterTaps: true
+  });
+  var onScreenKeyUp = React.useCallback(function (e, i) {
+    if (e.key === 'Enter' && withLandscapeSiblingsScreens && landscape && i !== screenIndex) {
+      changeIndex(i);
+    }
+  }, [withLandscapeSiblingsScreens, changeIndex, landscape, screenIndex]); // swipe menu open
 
   var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
 
@@ -1832,11 +2221,11 @@ var Viewer = function Viewer(_ref) {
     onInteractionPrivate();
     setMenuOpened(true);
   }, [changeIndex, onInteractionPrivate, setMenuOpened]);
-  var onClickMenuItem = React.useCallback(function (_ref6) {
-    var itemScreenId = _ref6.screenId;
+  var onClickMenuItem = React.useCallback(function (_ref9) {
+    var itemScreenId = _ref9.screenId;
     onInteractionPrivate();
-    var index = screens.findIndex(function (_ref7) {
-      var id = _ref7.id;
+    var index = screens.findIndex(function (_ref10) {
+      var id = _ref10.id;
       return id === itemScreenId;
     });
     changeIndex(index);
@@ -1889,32 +2278,34 @@ var Viewer = function Viewer(_ref) {
     disabled: renderContext !== 'view'
   });
 
-  var _ref8 = currentScreen || {},
-      screenParameters = _ref8.parameters;
+  var _ref11 = currentScreen || {},
+      screenParameters = _ref11.parameters;
 
-  var _ref9 = screenParameters || {},
-      screenMetadata = _ref9.metadata;
+  var _ref12 = screenParameters || {},
+      screenMetadata = _ref12.metadata;
 
-  var _ref10 = screenMetadata || {},
-      _ref10$title = _ref10.title,
-      screenTitle = _ref10$title === void 0 ? null : _ref10$title,
-      _ref10$description = _ref10.description,
-      screenDescription = _ref10$description === void 0 ? null : _ref10$description;
+  var _ref13 = screenMetadata || {},
+      _ref13$title = _ref13.title,
+      screenTitle = _ref13$title === void 0 ? null : _ref13$title,
+      _ref13$description = _ref13.description,
+      screenDescription = _ref13$description === void 0 ? null : _ref13$description;
 
   var finalTitle = screenTitle !== null ? screenTitle : title;
   var finalMetadata = React.useMemo(function () {
     return screenDescription !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, metadata), {}, {
       description: screenDescription
     }) : metadata;
-  }, [metadata]);
+  }, [metadata]); // Get element height
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      menuDotsContainerRef = _useResizeObserver.ref,
-      menuDotsContainerRect = _useResizeObserver.entry.contentRect;
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      menuDotsContainerRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.height,
+      menuDotsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
 
-  var _ref11 = menuDotsContainerRect || {},
-      _ref11$height = _ref11.height,
-      menuDotsContainerHeight = _ref11$height === void 0 ? 0 : _ref11$height;
+  var _useDimensionObserver3 = hooks.useDimensionObserver(),
+      playbackControlsContainerRef = _useDimensionObserver3.ref,
+      _useDimensionObserver4 = _useDimensionObserver3.height,
+      playbackControlsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
 
   var _useMemo = React.useMemo(function () {
     return neighborScreensMounted !== null ? {
@@ -1931,14 +2322,17 @@ var Viewer = function Viewer(_ref) {
   var mountedScreens = React.useMemo(function () {
     return neighborScreensMounted != null ? screens.slice(mountedScreenStartIndex, mountedScreenEndIndex) : screens;
   }, [screens, mountedScreenStartIndex, mountedScreenEndIndex, neighborScreensActive, neighborScreensMounted]);
-  return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.VisitorProvider, {
+  return /*#__PURE__*/React__default["default"].createElement(contexts.VisitorProvider, {
     visitor: visitor
+  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
+    size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
     events: eventsManager,
     menuVisible: menuVisible,
-    menuSize: menuDotsContainerHeight,
+    menuOverScreen: menuOverScreen,
+    topHeight: menuOverScreen && currentScreenInteractionEnabled ? menuDotsContainerHeight / screenScale : 0,
+    bottomHeight: (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled ? playbackControlsContainerHeight / screenScale : 0,
+    bottomSidesWidth: (playbackcontrolsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
     gotoPreviousScreen: gotoPreviousScreen,
     gotoNextScreen: gotoNextScreen,
     disableInteraction: disableInteraction,
@@ -1949,9 +2343,9 @@ var Viewer = function Viewer(_ref) {
   }, overscrollStyle) : /*#__PURE__*/React__default["default"].createElement(reactHelmet.Helmet, null, overscrollStyle), /*#__PURE__*/React__default["default"].createElement(components.FontFaces, {
     fonts: finalFonts
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, screenSize.screens.map(function (screenName) {
+    className: classNames__default["default"]([styles$5.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$8.landscape, landscape), _defineProperty__default["default"](_ref12, styles$8.withSiblings, withLandscapeSiblingsScreens), _defineProperty__default["default"](_ref12, styles$8.hideMenu, !menuVisible), _defineProperty__default["default"](_ref12, styles$8.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref12, styles$8.hasInteracted, hasInteracted), _defineProperty__default["default"](_ref12, className, className), _ref12)]),
+    }), (_ref14 = {}, _defineProperty__default["default"](_ref14, styles$5.landscape, landscape), _defineProperty__default["default"](_ref14, styles$5.withSiblings, withLandscapeSiblingsScreens), _defineProperty__default["default"](_ref14, styles$5.hideMenu, !menuVisible), _defineProperty__default["default"](_ref14, styles$5.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref14, styles$5.hasInteracted, hasInteracted), _defineProperty__default["default"](_ref14, className, className), _ref14)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu, {
@@ -1975,14 +2369,11 @@ var Viewer = function Viewer(_ref) {
     withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
     refDots: menuDotsContainerRef
-  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: contentRef,
-    className: styles$8.content,
-    onClick: onClickContent // onPointerDown={detectPointerEvents.hasApi ? onClickContent : null}
-    // onMouseDown={detectPointerEvents.hasApi ? onClickContent : null}
-
-  }, mountedScreens.map(function (scr, mountedIndex) {
-    var _ref13;
+    className: styles$5.content
+  }, dragContentBind()), mountedScreens.map(function (scr, mountedIndex) {
+    var _ref15;
 
     var i = mountedScreenStartIndex + mountedIndex;
     var current = i === parseInt(screenIndex, 10);
@@ -1994,12 +2385,8 @@ var Viewer = function Viewer(_ref) {
       index: i,
       current: current,
       active: active,
-      onPrevious: gotoPreviousScreen,
-      onNext: gotoNextScreen,
-      enableInteraction: enableInteraction,
-      disableInteraction: disableInteraction,
-      getMediaRef: function getMediaRef(mediaRef) {
-        screensMediasRef.current[i] = mediaRef;
+      mediaRef: function mediaRef(ref) {
+        screensMediasRef.current[i] = ref;
       }
     });
     var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
@@ -2013,7 +2400,7 @@ var Viewer = function Viewer(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
       ref: current ? currentScreenRef : null,
       style: {
         // width: landscape ? screenWidth : null,
@@ -2022,7 +2409,7 @@ var Viewer = function Viewer(_ref) {
         height: screenContainerHeight,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
-      className: classNames__default["default"]([styles$8.screen, (_ref13 = {}, _defineProperty__default["default"](_ref13, styles$8.current, current), _defineProperty__default["default"](_ref13, styles$8.visible, current || withLandscapeSiblingsScreens), _ref13)]),
+      className: classNames__default["default"]([styles$5.screen, (_ref15 = {}, _defineProperty__default["default"](_ref15, styles$5.current, current), _defineProperty__default["default"](_ref15, styles$5.visible, current || withLandscapeSiblingsScreens), _ref15)]),
       tabIndex: active ? '0' : '-1'
       /* eslint-disable-line */
       ,
@@ -2040,26 +2427,10 @@ var Viewer = function Viewer(_ref) {
         index: i + 1
       }),
       onKeyUp: function onKeyUp(e) {
-        if (e.key === 'Enter') {
-          onScreenClick(e, i);
-        }
-      },
-      onClick: function onClick(e) {
-        return onScreenClick(e, i);
-      } // @todo: this was to make the experience “snappier” when switching screens
-      // onPointerDown={
-      //     detectPointerEvents.hasApi
-      //         ? (e) => onScreenClick(e, i)
-      //         : null
-      // }
-      // onMouseDown={
-      //     !detectPointerEvents.hasApi
-      //         ? (e) => onScreenClick(e, i)
-      //         : null
-      // }
-
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$8.scaler,
+        return onScreenKeyUp(e, i);
+      }
+    }, dragScreenBind(i)), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$5.scaler,
       style: {
         width: screenWidth,
         height: screenHeight,
@@ -2068,10 +2439,10 @@ var Viewer = function Viewer(_ref) {
       }
     }, current && screenIndex > 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: classNames__default["default"]([styles$8.navButton, styles$8.previous]),
+      className: classNames__default["default"]([styles$5.navButton, styles$5.previous]),
       onClick: gotoPreviousScreen
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$8.arrow,
+      className: styles$5.arrow,
       icon: faArrowLeft.faArrowLeft
     }), /*#__PURE__*/React__default["default"].createElement("span", {
       className: "sr-only"
@@ -2083,10 +2454,10 @@ var Viewer = function Viewer(_ref) {
       }]
     }))) : null, viewerScreen, current && screenIndex < screens.length - 1 ? /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: classNames__default["default"]([styles$8.navButton, styles$8.next]),
+      className: classNames__default["default"]([styles$5.navButton, styles$5.next]),
       onClick: gotoNextScreen
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$8.arrow,
+      className: styles$5.arrow,
       icon: faArrowRight.faArrowRight
     }), /*#__PURE__*/React__default["default"].createElement("span", {
       className: "sr-only"
@@ -2105,9 +2476,24 @@ var Viewer = function Viewer(_ref) {
         "value": "Go to next screen"
       }]
     }))) : null), withNavigationHint && !withLandscapeSiblingsScreens && current && screenIndex === 0 ? /*#__PURE__*/React__default["default"].createElement(HandTap, {
-      className: styles$8.handTap
+      className: styles$5.handTap
     }) : null));
-  })) : null))));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$5.playbackControls, _defineProperty__default["default"]({}, styles$5.isCollapsed, !playbackcontrolsVisible)]),
+    ref: playbackControlsContainerRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$5.playbackControlsContainer,
+    style: {
+      width: screenContainerWidth
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(PlaybackControls, {
+    className: styles$5.controls
+  })))) : null, /*#__PURE__*/React__default["default"].createElement(WebViewContainer, {
+    className: styles$5.webView,
+    style: {
+      maxWidth: Math.max(screenContainerWidth, 600)
+    }
+  })))));
 };
 
 Viewer.propTypes = propTypes$2;
@@ -2183,6 +2569,13 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
 ViewerRoutes.propTypes = propTypes$1;
 ViewerRoutes.defaultProps = defaultProps$1;
 
+var home = "/";
+var screen = "/:screen";
+var defaultRoutes = {
+  home: home,
+  screen: screen
+};
+
 var _excluded = ["story", "screenComponents", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "trackingVariables", "locale", "locales", "translations", "pathWithIndex"];
 var propTypes = {
   story: core$1.PropTypes.story,
@@ -2274,7 +2667,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(screens.ScreensProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, {
     namespace: contexts.SCREENS_NAMESPACE,
     components: screenComponents || {}
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.UserInteractionProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.TrackingProvider, {
+  }, /*#__PURE__*/React__default["default"].createElement(contexts.UserInteractionProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.PlaybackProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.TrackingProvider, {
     variables: finalTrackingVariables
   }, withoutRouter ? /*#__PURE__*/React__default["default"].createElement(Viewer, Object.assign({
     story: story,
@@ -2283,7 +2676,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
     story: story,
     basePath: basePath,
     pathWithIndex: pathWithIndex
-  }, otherProps))))))))));
+  }, otherProps)))))))))));
   return withoutRouter ? content : /*#__PURE__*/React__default["default"].createElement(Router, {
     basename: !memoryRouter ? basePath : null
   }, /*#__PURE__*/React__default["default"].createElement(contexts.RoutesProvider, {