@micromag/viewer 0.3.165 → 0.3.168

package/es/index.js

@@ -12,9 +12,6 @@ import { ScreensProvider } from '@micromag/screens';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useDrag, useGesture } from '@use-gesture/react';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
@@ -26,11 +23,14 @@ import { getStyleFromColor, getStyleFromText, getColorAsString, getDeviceScreens
 import { useSpring, config } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import Scroll from '@micromag/element-scroll';
 import ShareOptions from '@micromag/element-share-options';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
 import { faPause } from '@fortawesome/free-solid-svg-icons/faPause';
 import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
 import { faVolumeUp } from '@fortawesome/free-solid-svg-icons/faVolumeUp';
@@ -213,11 +213,11 @@ function useScreenInteraction() {
   };
 }
 
-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$c = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
 
-var styles$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 styles$b = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
 
-var propTypes$g = {
+var propTypes$h = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -230,7 +230,7 @@ var propTypes$g = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$g = {
+var defaultProps$h = {
   current: false,
   active: false,
   colors: null,
@@ -293,44 +293,44 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     });
   }, [playing, duration, currentTime, setSpringProps]);
   var inner = current && count > 1 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$a.dots
+    className: styles$b.dots
   }, _toConsumableArray(Array(count).keys()).map(function (i) {
     return /*#__PURE__*/React.createElement("span", {
-      className: classNames([styles$a.dot, styles$a.subDot]),
+      className: classNames([styles$b.dot, styles$b.subDot]),
       style: {
         width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
         backgroundColor: active && i <= subIndex ? primary : secondary
       }
     });
   })) : /*#__PURE__*/React.createElement("span", {
-    className: styles$a.dot,
+    className: styles$b.dot,
     style: {
       backgroundColor: active ? primary : secondary
     }
   });
   return /*#__PURE__*/React.createElement("li", {
-    className: classNames([styles$a.container, (_ref3 = {}, _defineProperty(_ref3, styles$a.active, current), _defineProperty(_ref3, styles$a.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    className: classNames([styles$b.container, (_ref3 = {}, _defineProperty(_ref3, styles$b.active, current), _defineProperty(_ref3, styles$b.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$a.button,
+    className: styles$b.button,
     onClick: onClick,
     tabIndex: "-1"
   }, inner));
 };
 
-ViewerMenuDot.propTypes = propTypes$g;
-ViewerMenuDot.defaultProps = defaultProps$g;
+ViewerMenuDot.propTypes = propTypes$h;
+ViewerMenuDot.defaultProps = defaultProps$h;
 
-var styles$9 = {};
+var styles$a = {};
 
-var propTypes$f = {
+var propTypes$g = {
   size: PropTypes.number,
   spacing: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$f = {
+var defaultProps$g = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -344,7 +344,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -362,10 +362,10 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$f;
-MenuIcon.defaultProps = defaultProps$f;
+MenuIcon.propTypes = propTypes$g;
+MenuIcon.defaultProps = defaultProps$g;
 
-var propTypes$e = {
+var propTypes$f = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
   items: PropTypes$1.menuItems,
@@ -381,7 +381,7 @@ var propTypes$e = {
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$e = {
+var defaultProps$f = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
@@ -421,7 +421,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     return current;
   });
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$b.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$b.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$b.withShadow, withShadow), _ref4)]),
+    className: classNames([styles$c.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$c.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$c.withShadow, withShadow), _ref4)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -445,7 +445,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$b.items
+    className: styles$c.items
   }, items.map(function (item, index) {
     var _ref5 = item || {},
         _ref5$current = _ref5.current,
@@ -472,9 +472,9 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       vertical: direction === 'vertical'
     });
   }), !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
-    className: styles$b.menu
+    className: styles$c.menu
   }, /*#__PURE__*/React.createElement(MenuIcon, {
-    className: styles$b.menuIcon,
+    className: styles$c.menuIcon,
     color: primary
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -492,16 +492,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$b.menuButton,
+    className: styles$c.menuButton,
     onClick: onClickMenu
   })) : null, closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$b.closeButton,
+    className: styles$c.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$b.closeButton,
+    className: styles$c.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -522,13 +522,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$e;
-ViewerMenuDots.defaultProps = defaultProps$e;
+ViewerMenuDots.propTypes = propTypes$f;
+ViewerMenuDots.defaultProps = defaultProps$f;
 
-var propTypes$d = {
+var propTypes$e = {
   className: PropTypes.string
 };
-var defaultProps$d = {
+var defaultProps$e = {
   className: null
 };
 
@@ -545,12 +545,12 @@ var StackIcon = function StackIcon(_ref) {
   }));
 };
 
-StackIcon.propTypes = propTypes$d;
-StackIcon.defaultProps = defaultProps$d;
+StackIcon.propTypes = propTypes$e;
+StackIcon.defaultProps = defaultProps$e;
 
-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 styles$9 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
 
-var propTypes$c = {
+var propTypes$d = {
   url: PropTypes.string,
   title: PropTypes.string,
   opened: PropTypes.bool,
@@ -558,7 +558,7 @@ var propTypes$c = {
   onShare: PropTypes.func,
   onCancel: PropTypes.func
 };
-var defaultProps$c = {
+var defaultProps$d = {
   url: null,
   title: null,
   opened: false,
@@ -589,15 +589,15 @@ var ShareModal = function ShareModal(_ref) {
   }, [opened, onCancel]);
   useDocumentEvent('click', onDocumentClick, opened);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$8.opened, opened), _ref3)]),
+    className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$9.opened, opened), _ref3)]),
     "aria-hidden": opened ? null : '-1'
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.modal,
+    className: styles$9.modal,
     ref: modalRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.header
+    className: styles$9.header
   }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$8.heading
+    className: styles$9.heading
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "oL4ueH",
     defaultMessage: [{
@@ -605,16 +605,16 @@ var ShareModal = function ShareModal(_ref) {
       "value": "Share"
     }]
   })), /*#__PURE__*/React.createElement(Button, {
-    className: styles$8.close,
+    className: styles$9.close,
     onClick: onCancel,
     focusable: opened
   }, /*#__PURE__*/React.createElement(Close, {
-    className: styles$8.closeIcon,
+    className: styles$9.closeIcon,
     border: "none"
   }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$8.content
+    className: styles$9.content
   }, /*#__PURE__*/React.createElement(ShareOptions, {
-    className: styles$8.shareOptions,
+    className: styles$9.shareOptions,
     title: title,
     url: url,
     focusable: opened,
@@ -623,12 +623,12 @@ var ShareModal = function ShareModal(_ref) {
   }))));
 };
 
-ShareModal.propTypes = propTypes$c;
-ShareModal.defaultProps = defaultProps$c;
+ShareModal.propTypes = propTypes$d;
+ShareModal.defaultProps = defaultProps$d;
 
-var styles$7 = {"container":"micromag-viewer-partials-share-button-container"};
+var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
 
-var propTypes$b = {
+var propTypes$c = {
   title: PropTypes.string,
   url: PropTypes.string,
   className: PropTypes.string,
@@ -637,7 +637,7 @@ var propTypes$b = {
   children: PropTypes.node,
   focusable: PropTypes.bool
 };
-var defaultProps$b = {
+var defaultProps$c = {
   title: null,
   url: null,
   className: null,
@@ -678,7 +678,7 @@ var ShareButton = function ShareButton(_ref) {
     setStoryShareModalOpened(false);
   }, [setStoryShareModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Button, {
     className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
     onClick: onShareIconClick,
@@ -698,7 +698,7 @@ var ShareButton = function ShareButton(_ref) {
     }),
     focusable: focusable
   }, children), /*#__PURE__*/React.createElement(ShareModal, {
-    className: styles$7.shareModal,
+    className: styles$8.shareModal,
     opened: storyShareModalOpened,
     title: title,
     url: url,
@@ -707,12 +707,12 @@ var ShareButton = function ShareButton(_ref) {
   }));
 };
 
-ShareButton.propTypes = propTypes$b;
-ShareButton.defaultProps = defaultProps$b;
+ShareButton.propTypes = propTypes$c;
+ShareButton.defaultProps = defaultProps$c;
 
-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 styles$7 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
 
-var propTypes$a = {
+var propTypes$b = {
   viewerTheme: PropTypes$1.viewerTheme,
   screenSize: PropTypes$1.screenSize,
   menuWidth: PropTypes.number,
@@ -730,7 +730,7 @@ var propTypes$a = {
   fullscreenEnabled: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$a = {
+var defaultProps$b = {
   viewerTheme: null,
   screenSize: null,
   menuWidth: null,
@@ -856,36 +856,36 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     return !focusable ? items.slice(0, 3) : items;
   }, [items, focusable]);
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
     style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
   }, dragBind()), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.header
+    className: styles$7.header
   }, brandLogoUrl !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$6.organisation,
+    className: styles$7.organisation,
     style: {
       backgroundImage: "url(".concat(brandLogoUrl, ")")
     }
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.title,
+    className: styles$7.title,
     style: titleStyle
   }, title), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.buttons,
+    className: styles$7.buttons,
     style: colorSecondaryColorStyle
   }, /*#__PURE__*/React.createElement(ShareButton, {
-    className: styles$6.shareButton,
-    buttonClassName: styles$6.button,
+    className: styles$7.shareButton,
+    buttonClassName: styles$7.button,
     onShare: onShare,
     url: shareUrl,
     title: title,
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$6.icon,
+    className: styles$7.icon,
     icon: faShare
   })), fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
-    className: styles$6.button,
+    className: styles$7.button,
     onClick: toggleFullscreen,
     title: intl.formatMessage({
       id: "AuxqcG",
@@ -903,10 +903,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$6.icon,
+    className: styles$7.icon,
     icon: fullscreenActive ? faCompress : faExpand
   })) : null, /*#__PURE__*/React.createElement(Button, {
-    className: styles$6.button,
+    className: styles$7.button,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -924,19 +924,19 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$6.icon,
+    className: styles$7.icon,
     icon: faTimes
   })))), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.content,
+    className: styles$7.content,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$6.scroll,
+    className: styles$7.scroll,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$6.nav
+    className: styles$7.nav
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$6.items
+    className: styles$7.items
   }, finalItems.map(function (item, index) {
     var screenId = item.screenId,
         _item$current = item.current,
@@ -963,22 +963,22 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       }]
     })) : '');
     return /*#__PURE__*/React.createElement("li", {
-      className: classNames([styles$6.item, _defineProperty({}, styles$6.active, current)]),
+      className: classNames([styles$7.item, _defineProperty({}, styles$7.active, current)]),
       key: "item-".concat(screenId),
       style: {
         width: "".concat(100 / thumbsPerLine, "%")
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$6.itemContent
+      className: styles$7.itemContent
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$6.screenContainer,
+      className: styles$7.screenContainer,
       ref: index === 0 ? firstScreenContainerRef : null
     }, count > 1 ? /*#__PURE__*/React.createElement("div", {
-      className: styles$6.subScreenBadge
+      className: styles$7.subScreenBadge
     }, /*#__PURE__*/React.createElement("span", {
-      className: styles$6.subScreenCount
+      className: styles$7.subScreenCount
     }, count), /*#__PURE__*/React.createElement(StackIcon, {
-      className: styles$6.subScreenIcon
+      className: styles$7.subScreenIcon
     })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
       screenWidth: screenWidth,
       screenHeight: screenHeight,
@@ -988,11 +988,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       active: focusable,
       withSize: true
     }) : null, current ? /*#__PURE__*/React.createElement("div", {
-      className: styles$6.activeScreenBorder,
+      className: styles$7.activeScreenBorder,
       style: borderPrimaryColorStyle
     }) : null)), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$6.screenButton,
+      className: styles$7.screenButton,
       onClick: function onClick() {
         if (onClickItem !== null) {
           onClickItem(item);
@@ -1009,12 +1009,12 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }))))));
 };
 
-ViewerMenuPreview.propTypes = propTypes$a;
-ViewerMenuPreview.defaultProps = defaultProps$a;
+ViewerMenuPreview.propTypes = propTypes$b;
+ViewerMenuPreview.defaultProps = defaultProps$b;
 
-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","webView":"micromag-viewer-webView","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready","hasInteracted":"micromag-viewer-hasInteracted"};
+var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screenContainer":"micromag-viewer-screenContainer","screen":"micromag-viewer-screen","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSiblings":"micromag-viewer-withSiblings","playbackControlsContainer":"micromag-viewer-playbackControlsContainer","playbackControls":"micromag-viewer-playbackControls","webView":"micromag-viewer-webView","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
 
-var propTypes$9 = {
+var propTypes$a = {
   story: PropTypes$1.story.isRequired,
   currentScreenIndex: PropTypes.number,
   opened: PropTypes.bool,
@@ -1040,7 +1040,7 @@ var propTypes$9 = {
 
   })
 };
-var defaultProps$9 = {
+var defaultProps$a = {
   currentScreenIndex: 0,
   opened: false,
   toggleFullscreen: null,
@@ -1255,7 +1255,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       menuTheme = _ref6$menuTheme === void 0 ? null : _ref6$menuTheme;
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$5.menuDotsContainer,
+    className: styles$6.menuDotsContainer,
     ref: refDots,
     style: {
       width: menuWidth
@@ -1270,16 +1270,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
     onClose: onClickCloseViewer,
-    className: styles$5.menuDots
+    className: styles$6.menuDots
   }))), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$5.menuPreviewContainer,
+    className: styles$6.menuPreviewContainer,
     style: menuPreviewStyle,
     ref: menuPreviewContainerRef
   }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     title: title,
     shareUrl: shareUrl,
-    className: styles$5.menuPreview,
+    className: styles$6.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
     focusable: opened,
@@ -1293,40 +1293,111 @@ var ViewerMenu = function ViewerMenu(_ref) {
   })));
 };
 
-ViewerMenu.propTypes = propTypes$9;
-ViewerMenu.defaultProps = defaultProps$9;
+ViewerMenu.propTypes = propTypes$a;
+ViewerMenu.defaultProps = defaultProps$a;
 
-var styles$4 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+var styles$5 = {"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$9 = {
+  color: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$9 = {
+  color: 'currentColor',
+  className: null
+};
+
+var HandIcon = function HandIcon(_ref) {
+  var color = _ref.color,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 367.24 482.87"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M488.84,255.91a44.68,44.68,0,0,0-19.15,4.3A44.77,44.77,0,0,0,406,226.49a44.75,44.75,0,0,0-62.67-32.66V105.4a44.81,44.81,0,1,0-89.61,0V265.17l-1.15-2.7a44.78,44.78,0,1,0-82.84,34.06l64.87,157.76.34.73a156.29,156.29,0,0,0,141.42,88.44c86.7,0,157.24-70.53,157.24-157.26V300.7a44.82,44.82,0,0,0-44.78-44.79ZM507.46,386.2c0,72.3-58.78,131.1-131.07,131.1a130.29,130.29,0,0,1-117.73-73.36L193.93,286.61a18.64,18.64,0,1,1,34.53-14.07L279.91,394V105.4a18.64,18.64,0,1,1,37.28,0v196a13.08,13.08,0,0,0,26.16,0V234.56a18.64,18.64,0,0,1,37.27,0v89.95a13.07,13.07,0,1,0,26.13,0V266.86a18.64,18.64,0,1,1,37.28,0v80.71h0s0,.08,0,.11a13.08,13.08,0,0,0,26.15,0v-47a18.63,18.63,0,1,1,37.26,0v85.5Z",
+    transform: "translate(-166.38 -60.59)",
+    fill: color,
+    fillRule: "evenodd"
+  }));
+};
+
+HandIcon.propTypes = propTypes$9;
+HandIcon.defaultProps = defaultProps$9;
 
 var propTypes$8 = {
+  className: PropTypes.string
+};
+var defaultProps$8 = {
+  className: null
+};
+
+var HandTap = function HandTap(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$5.inner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$5.circle
+  }), /*#__PURE__*/React.createElement(HandIcon, {
+    className: styles$5.hand
+  })));
+};
+
+HandTap.propTypes = propTypes$8;
+HandTap.defaultProps = defaultProps$8;
+
+var styles$4 = {"container":"micromag-viewer-screen-container","handTap":"micromag-viewer-screen-handTap"};
+
+var propTypes$7 = {
   screen: PropTypes$1.screenComponent,
   renderContext: PropTypes$1.renderContext,
   screenState: PropTypes.string,
   current: PropTypes.bool,
   active: PropTypes.bool,
-  mediaRef: PropTypes.func
+  mediaRef: PropTypes.func,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  scale: PropTypes.number,
+  withNavigationHint: PropTypes.func,
+  className: PropTypes.string
 };
-var defaultProps$8 = {
+var defaultProps$7 = {
   screen: null,
   renderContext: null,
   screenState: null,
   current: false,
   active: true,
-  mediaRef: null
+  mediaRef: null,
+  width: null,
+  height: null,
+  scale: null,
+  withNavigationHint: false,
+  className: null
 };
 
-var ViewerScreen = function ViewerScreen(_ref) {
-  var _ref2;
-
+function ViewerScreen(_ref) {
   var screen = _ref.screen,
       renderContext = _ref.renderContext,
       screenState = _ref.screenState,
       active = _ref.active,
       current = _ref.current,
-      mediaRef = _ref.mediaRef;
-  return screen !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, (_ref2 = {}, _defineProperty(_ref2, styles$4.active, active), _defineProperty(_ref2, styles$4.current, current), _ref2)]),
-    "aria-hidden": current ? null : 'true'
+      mediaRef = _ref.mediaRef,
+      width = _ref.width,
+      height = _ref.height,
+      scale = _ref.scale,
+      withNavigationHint = _ref.withNavigationHint,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: width,
+      height: height,
+      transform: scale !== null ? "scale(".concat(scale, ")") : null,
+      transformOrigin: scale !== null ? '0 0' : null
+    }
   }, /*#__PURE__*/React.createElement(Screen, {
     screen: screen,
     renderContext: renderContext,
@@ -1334,63 +1405,57 @@ var ViewerScreen = function ViewerScreen(_ref) {
     active: active,
     current: current,
     mediaRef: mediaRef
-  })) : null;
-};
-
-ViewerScreen.propTypes = propTypes$8;
-ViewerScreen.defaultProps = defaultProps$8;
+  })), withNavigationHint ? /*#__PURE__*/React.createElement(HandTap, {
+    className: styles$4.handTap
+  }) : null);
+}
 
-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"};
+ViewerScreen.propTypes = propTypes$7;
+ViewerScreen.defaultProps = defaultProps$7;
 
-var propTypes$7 = {
-  color: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$7 = {
-  color: 'currentColor',
-  className: null
-};
-
-var HandIcon = function HandIcon(_ref) {
-  var color = _ref.color,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("svg", {
-    className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 367.24 482.87"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M488.84,255.91a44.68,44.68,0,0,0-19.15,4.3A44.77,44.77,0,0,0,406,226.49a44.75,44.75,0,0,0-62.67-32.66V105.4a44.81,44.81,0,1,0-89.61,0V265.17l-1.15-2.7a44.78,44.78,0,1,0-82.84,34.06l64.87,157.76.34.73a156.29,156.29,0,0,0,141.42,88.44c86.7,0,157.24-70.53,157.24-157.26V300.7a44.82,44.82,0,0,0-44.78-44.79ZM507.46,386.2c0,72.3-58.78,131.1-131.07,131.1a130.29,130.29,0,0,1-117.73-73.36L193.93,286.61a18.64,18.64,0,1,1,34.53-14.07L279.91,394V105.4a18.64,18.64,0,1,1,37.28,0v196a13.08,13.08,0,0,0,26.16,0V234.56a18.64,18.64,0,0,1,37.27,0v89.95a13.07,13.07,0,1,0,26.13,0V266.86a18.64,18.64,0,1,1,37.28,0v80.71h0s0,.08,0,.11a13.08,13.08,0,0,0,26.15,0v-47a18.63,18.63,0,1,1,37.26,0v85.5Z",
-    transform: "translate(-166.38 -60.59)",
-    fill: color,
-    fillRule: "evenodd"
-  }));
-};
-
-HandIcon.propTypes = propTypes$7;
-HandIcon.defaultProps = defaultProps$7;
+var styles$3 = {"container":"micromag-viewer-partials-navigation-button-container"};
 
 var propTypes$6 = {
+  direction: PropTypes.oneOf(['previous', 'next']),
+  onClick: null,
   className: PropTypes.string
 };
 var defaultProps$6 = {
+  direction: 'next',
+  onClick: null,
   className: null
 };
 
-var HandTap = function HandTap(_ref) {
-  var className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.circle
-  }), /*#__PURE__*/React.createElement(HandIcon, {
-    className: styles$3.hand
+var NavigationButton = function NavigationButton(_ref) {
+  var direction = _ref.direction,
+      onClick = _ref.onClick,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: styles$3.arrow,
+    icon: direction === 'previous' ? faArrowLeft : faArrowRight
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, direction === 'previous' ? /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "zYH/31",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Go to previous screen"
+    }]
+  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "v9bqYj",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Go to next screen"
+    }]
   })));
 };
 
-HandTap.propTypes = propTypes$6;
-HandTap.defaultProps = defaultProps$6;
+NavigationButton.propTypes = propTypes$6;
+NavigationButton.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"};
 
@@ -1736,32 +1801,46 @@ function WebViewContainer(_ref) {
       disableInteraction = _useViewerInteraction.disableInteraction,
       enableInteraction = _useViewerInteraction.enableInteraction;
 
+  var _usePlaybackContext = usePlaybackContext(),
+      playing = _usePlaybackContext.playing,
+      setPlaying = _usePlaybackContext.setPlaying;
+
+  var wasPlayingRef = useRef(playing);
+
   var _useState = useState(url),
       _useState2 = _slicedToArray(_useState, 2),
       currentUrl = _useState2[0],
-      setCurrentUrl = _useState2[1];
+      setCurrentUrl = _useState2[1]; // Handle current webview url
+
 
   useEffect(function () {
     if (url !== null) {
       setCurrentUrl(url);
     }
   }, [url, setCurrentUrl]);
+  var onTransitionEnd = useCallback(function () {
+    if (url === null) {
+      setCurrentUrl(null);
+    }
+  }, [url]); // Disable interaction and pause playback
+
   useEffect(function () {
     if (opened) {
       disableInteraction();
+      wasPlayingRef.current = playing;
+
+      if (playing) {
+        setPlaying(false);
+      }
     } else {
       enableInteraction();
-    }
 
-    return function () {
-      enableInteraction();
-    };
-  }, [opened]);
-  var onTransitionEnd = useCallback(function () {
-    if (url === null) {
-      setCurrentUrl(null);
+      if (wasPlayingRef.current && !playing) {
+        wasPlayingRef.current = false;
+        setPlaying(true);
+      }
     }
-  }, [url]);
+  }, [opened]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, styles.opened, opened), _defineProperty(_ref2, className, className !== null), _ref2)]),
     style: style,
@@ -1855,7 +1934,7 @@ var defaultProps$2 = {
 };
 
 var Viewer = function Viewer(_ref) {
-  var _ref14;
+  var _ref15;
 
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -1999,7 +2078,7 @@ var Viewer = function Viewer(_ref) {
     }
 
     if (currentScreenMedia !== null) {
-      currentScreenMedia.current = screensMediasRef.current[index];
+      currentScreenMedia.current = screensMediasRef.current[index] || null;
     }
 
     if (onScreenChange !== null) {
@@ -2015,12 +2094,11 @@ var Viewer = function Viewer(_ref) {
     }
   }, [currentScreen, trackScreenView, trackingEnabled]); // Handle interaction enable
 
-  var currentScreenRef = useRef(null);
   var gotoPreviousScreen = useCallback(function () {
-    changeIndex(Math.max(0, screenIndex - 1)); // currentScreenRef.current.focus();
+    changeIndex(Math.max(0, screenIndex - 1));
   }, [changeIndex]);
   var gotoNextScreen = useCallback(function () {
-    changeIndex(Math.min(screens.length - 1, screenIndex + 1)); // currentScreenRef.current.focus();
+    changeIndex(Math.min(screens.length - 1, screenIndex + 1));
   }, [changeIndex]);
   var screensCount = screens.length;
 
@@ -2134,8 +2212,10 @@ var Viewer = function Viewer(_ref) {
   var dragContentBind = useDrag(onDragContent, {
     filterTaps: true
   });
-  var onScreenKeyUp = useCallback(function (e, i) {
-    if (e.key === 'Enter' && withLandscapeSiblingsScreens && landscape && i !== screenIndex) {
+  var onScreenKeyUp = useCallback(function (_ref9, i) {
+    var key = _ref9.key;
+
+    if (key === 'Enter' && withLandscapeSiblingsScreens && landscape && i !== screenIndex) {
       changeIndex(i);
     }
   }, [withLandscapeSiblingsScreens, changeIndex, landscape, screenIndex]); // swipe menu open
@@ -2157,11 +2237,11 @@ var Viewer = function Viewer(_ref) {
     onInteractionPrivate();
     setMenuOpened(true);
   }, [changeIndex, onInteractionPrivate, setMenuOpened]);
-  var onClickMenuItem = useCallback(function (_ref9) {
-    var itemScreenId = _ref9.screenId;
+  var onClickMenuItem = useCallback(function (_ref10) {
+    var itemScreenId = _ref10.screenId;
     onInteractionPrivate();
-    var index = screens.findIndex(function (_ref10) {
-      var id = _ref10.id;
+    var index = screens.findIndex(function (_ref11) {
+      var id = _ref11.id;
       return id === itemScreenId;
     });
     changeIndex(index);
@@ -2214,24 +2294,24 @@ var Viewer = function Viewer(_ref) {
     disabled: renderContext !== 'view'
   });
 
-  var _ref11 = currentScreen || {},
-      screenParameters = _ref11.parameters;
+  var _ref12 = currentScreen || {},
+      screenParameters = _ref12.parameters;
 
-  var _ref12 = screenParameters || {},
-      screenMetadata = _ref12.metadata;
+  var _ref13 = screenParameters || {},
+      screenMetadata = _ref13.metadata;
 
-  var _ref13 = screenMetadata || {},
-      _ref13$title = _ref13.title,
-      screenTitle = _ref13$title === void 0 ? null : _ref13$title,
-      _ref13$description = _ref13.description,
-      screenDescription = _ref13$description === void 0 ? null : _ref13$description;
+  var _ref14 = screenMetadata || {},
+      _ref14$title = _ref14.title,
+      screenTitle = _ref14$title === void 0 ? null : _ref14$title,
+      _ref14$description = _ref14.description,
+      screenDescription = _ref14$description === void 0 ? null : _ref14$description;
 
   var finalTitle = screenTitle !== null ? screenTitle : title;
   var finalMetadata = useMemo(function () {
     return screenDescription !== null ? _objectSpread(_objectSpread({}, metadata), {}, {
       description: screenDescription
     }) : metadata;
-  }, [metadata]); // Get element height
+  }, [metadata, screenDescription]); // Get element height
 
   var _useDimensionObserver = useDimensionObserver(),
       menuDotsContainerRef = _useDimensionObserver.ref,
@@ -2280,9 +2360,9 @@ var Viewer = function Viewer(_ref) {
   }, overscrollStyle) : /*#__PURE__*/React.createElement(Helmet, null, overscrollStyle), /*#__PURE__*/React.createElement(FontFaces, {
     fonts: finalFonts
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, screenSize.screens.map(function (screenName) {
+    className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref14 = {}, _defineProperty(_ref14, styles$5.landscape, landscape), _defineProperty(_ref14, styles$5.withSiblings, withLandscapeSiblingsScreens), _defineProperty(_ref14, styles$5.hideMenu, !menuVisible), _defineProperty(_ref14, styles$5.ready, ready || withoutScreensTransforms), _defineProperty(_ref14, styles$5.hasInteracted, hasInteracted), _defineProperty(_ref14, className, className), _ref14)]),
+    }), (_ref15 = {}, _defineProperty(_ref15, styles$6.landscape, landscape), _defineProperty(_ref15, styles$6.withSiblings, withLandscapeSiblingsScreens), _defineProperty(_ref15, styles$6.hideMenu, !menuVisible), _defineProperty(_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref15, styles$6.hasInteracted, hasInteracted), _defineProperty(_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu, {
@@ -2308,25 +2388,13 @@ var Viewer = function Viewer(_ref) {
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     ref: contentRef,
-    className: styles$5.content
-  }, dragContentBind()), mountedScreens.map(function (scr, mountedIndex) {
-    var _ref15;
+    className: styles$6.content
+  }, dragContentBind()), mountedScreens.map(function (mountedScreen, mountedIndex) {
+    var _ref16;
 
     var i = mountedScreenStartIndex + mountedIndex;
     var current = i === parseInt(screenIndex, 10);
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
-    var viewerScreen = /*#__PURE__*/React.createElement(ViewerScreen, {
-      screen: scr,
-      screenState: current ? screenState : null,
-      renderContext: renderContext,
-      index: i,
-      current: current,
-      active: active,
-      mediaRef: function mediaRef(ref) {
-        screensMediasRef.current[i] = ref;
-      }
-    });
-    var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
     var screenTransform = null;
 
     if (landscape) {
@@ -2336,21 +2404,17 @@ var Viewer = function Viewer(_ref) {
     }
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: key
+      key: "screen-viewer-".concat(mountedScreen.id || '', "-").concat(i + 1)
     }, /*#__PURE__*/React.createElement("div", Object.assign({
-      ref: current ? currentScreenRef : null,
       style: {
-        // width: landscape ? screenWidth : null,
-        // height: landscape ? screenHeight : null,
         width: screenContainerWidth,
         height: screenContainerHeight,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
-      className: classNames([styles$5.screen, (_ref15 = {}, _defineProperty(_ref15, styles$5.current, current), _defineProperty(_ref15, styles$5.visible, current || withLandscapeSiblingsScreens), _ref15)]),
-      tabIndex: active ? '0' : '-1'
-      /* eslint-disable-line */
+      className: classNames([styles$6.screenContainer, (_ref16 = {}, _defineProperty(_ref16, styles$6.current, current), _defineProperty(_ref16, styles$6.visible, current || withLandscapeSiblingsScreens), _ref16)]) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       ,
-      "aria-hidden": current ? null : 'true',
+      tabIndex: !active ? -1 : null,
+      "aria-hidden": !current,
       "aria-label": intl.formatMessage({
         id: "LkVfwW",
         defaultMessage: [{
@@ -2366,67 +2430,42 @@ var Viewer = function Viewer(_ref) {
       onKeyUp: function onKeyUp(e) {
         return onScreenKeyUp(e, i);
       }
-    }, dragScreenBind(i)), /*#__PURE__*/React.createElement("div", {
-      className: styles$5.scaler,
-      style: {
-        width: screenWidth,
-        height: screenHeight,
-        transform: screenScale !== null ? "scale(".concat(screenScale, ")") : null,
-        transformOrigin: screenScale !== null ? '0 0' : null
-      }
-    }, current && screenIndex > 0 ? /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames([styles$5.navButton, styles$5.previous]),
+    }, dragScreenBind(i)), current && screenIndex > 0 ? /*#__PURE__*/React.createElement(NavigationButton, {
+      direction: "previous",
+      className: classNames([styles$6.navButton, styles$6.previous]),
       onClick: gotoPreviousScreen
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$5.arrow,
-      icon: faArrowLeft
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "sr-only"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "zYH/31",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to previous screen"
-      }]
-    }))) : null, viewerScreen, current && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames([styles$5.navButton, styles$5.next]),
+    }) : null, mountedScreen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
+      className: styles$6.screen,
+      screen: mountedScreen,
+      screenState: current ? screenState : null,
+      renderContext: renderContext,
+      index: i,
+      current: current,
+      active: active,
+      mediaRef: function mediaRef(ref) {
+        screensMediasRef.current[i] = ref;
+      },
+      width: screenWidth,
+      height: screenHeight,
+      scale: screenScale,
+      withNavigationHint: withNavigationHint && !withLandscapeSiblingsScreens && current && screenIndex === 0 && !hasInteracted
+    }) : null, current && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+      direction: "next",
+      className: classNames([styles$6.navButton, styles$6.next]),
       onClick: gotoNextScreen
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$5.arrow,
-      icon: faArrowRight
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "sr-only"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "v9bqYj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen"
-      }]
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "sr-only"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "v9bqYj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen"
-      }]
-    }))) : null), withNavigationHint && !withLandscapeSiblingsScreens && current && screenIndex === 0 ? /*#__PURE__*/React.createElement(HandTap, {
-      className: styles$5.handTap
     }) : null));
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$5.playbackControls,
+    className: styles$6.playbackControls,
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.playbackControlsContainer,
+    className: styles$6.playbackControlsContainer,
     style: {
       width: screenContainerWidth
     }
   }, /*#__PURE__*/React.createElement(PlaybackControls, {
-    className: styles$5.controls
+    className: styles$6.controls
   })))) : null, /*#__PURE__*/React.createElement(WebViewContainer, {
-    className: styles$5.webView,
+    className: styles$6.webView,
     style: {
       maxWidth: Math.max(screenContainerWidth, 600)
     }