@micromag/viewer 0.3.604 → 0.3.606

package/es/index.js

@@ -17,7 +17,7 @@ import { Helmet } from 'react-helmet';
 import { useIntl, FormattedMessage } from 'react-intl';
 import EventEmitter from 'wolfy87-eventemitter';
 import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$1, PlayIcon, Spinner, UnmuteIcon, MuteIcon, PauseIcon, Meta, FontFaces } from '@micromag/core/components';
-import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaState, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
+import { useIsVisible, useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaState, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
 import { getStyleFromColor, easings, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { ShareIncentive } from '@micromag/elements/all';
 import FocusLock from 'react-focus-lock';
@@ -896,7 +896,7 @@ var StackIcon = function StackIcon(_ref) {
 StackIcon.propTypes = propTypes$g;
 StackIcon.defaultProps = defaultProps$g;
 
-var styles$b = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon","screen":"micromag-viewer-menus-menu-screen-screen","pulse":"micromag-viewer-menus-menu-screen-pulse"};
+var styles$b = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon","screen":"micromag-viewer-menus-menu-screen-screen","intro":"micromag-viewer-menus-menu-screen-intro","pulse":"micromag-viewer-menus-menu-screen-pulse"};
 
 var propTypes$f = {
   className: PropTypes.string,
@@ -904,6 +904,7 @@ var propTypes$f = {
   index: PropTypes.number,
   onClick: PropTypes.func,
   screenSize: PropTypes$1.screenSize,
+  alwaysRender: PropTypes.bool,
   focusable: PropTypes.bool
 };
 var defaultProps$f = {
@@ -912,6 +913,7 @@ var defaultProps$f = {
   index: 0,
   onClick: null,
   screenSize: null,
+  alwaysRender: false,
   focusable: true
 };
 var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
@@ -920,6 +922,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     index = _ref.index,
     _onClick = _ref.onClick,
     screenSize = _ref.screenSize,
+    alwaysRender = _ref.alwaysRender,
     focusable = _ref.focusable;
   var intl = useIntl();
   var _ref2 = item || {},
@@ -931,6 +934,13 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
   var _ref3 = screenSize || {},
     screenWidth = _ref3.width,
     screenHeight = _ref3.height;
+  var _useIsVisible = useIsVisible({
+      rootMargin: '200px',
+      persist: false
+    }),
+    refVisible = _useIsVisible.ref,
+    _useIsVisible$visible = _useIsVisible.visible,
+    visible = _useIsVisible$visible === void 0 ? false : _useIsVisible$visible;
   var screenAriaLabel = "".concat(intl.formatMessage({
     id: "LkVfwW",
     defaultMessage: [{
@@ -953,7 +963,8 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     className: classNames([styles$b.container, _defineProperty(_defineProperty({}, className, className !== null), styles$b.isCurrent, current)]),
     style: {
       paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
-    }
+    },
+    ref: refVisible
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: styles$b.button,
@@ -976,7 +987,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     className: styles$b.subScreenCount
   }, count), /*#__PURE__*/React.createElement(StackIcon, {
     className: styles$b.subScreenIcon
-  })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
+  })) : null, screenWidth > 0 && screenHeight > 0 && (visible || alwaysRender) ? /*#__PURE__*/React.createElement(ScreenPreview, {
     className: styles$b.screen,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
@@ -1076,10 +1087,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     var otherTitleStyles = _objectWithoutProperties(_ref6, _excluded$4);
   var finalTitleStyles = titleStyles !== null ? getStyleFromText(otherTitleStyles) : null;
   // const { url: brandLogoUrl = null } = brandLogo || {};
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    screensMounted = _useState2[0],
-    setScreensMounted = _useState2[1];
+
   var hasTitle = title !== null;
 
   // @todo optimize all of this the proper way
@@ -1088,17 +1096,6 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   //     [items, focusable],
   // );
 
-  useEffect(function () {
-    if (items.length === screensMounted.length) {
-      return function () {};
-    }
-    var timeout = setTimeout(function () {
-      setScreensMounted([].concat(_toConsumableArray(screensMounted), [true]));
-    }, 40);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [items, screensMounted, setScreensMounted]);
   var menuPaddingTop = paddingTop + 10;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
@@ -1141,7 +1138,6 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     var _ref9 = screenSize || {},
       screenWidth = _ref9.width,
       screenHeight = _ref9.height;
-    var screenMounted = screensMounted[index] || false;
     return /*#__PURE__*/React.createElement("li", {
       key: "item-".concat(screenId),
       className: styles$a.item,
@@ -1149,18 +1145,18 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$a.inner
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles$a.frame, _defineProperty({}, styles$a.isLoading, !screenMounted)]),
+      className: classNames([styles$a.frame, _defineProperty({}, styles$a.isLoading, false)]),
       style: {
         paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
       }
-    }, screenMounted ? /*#__PURE__*/React.createElement(ViewerMenuScreen, {
+    }, /*#__PURE__*/React.createElement(ViewerMenuScreen, {
       className: styles$a.screen,
       item: item,
       index: index,
       screenSize: screenSize,
       onClick: onClickScreen,
       focusable: focusable
-    }) : null)));
+    }))));
   }))), footer)));
 };
 ViewerMenuPreview.propTypes = propTypes$e;
@@ -1343,7 +1339,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
 ViewerMenuShare.propTypes = propTypes$c;
 ViewerMenuShare.defaultProps = defaultProps$c;
 
-var styles$7 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","ariaAnnouncement":"micromag-viewer-ariaAnnouncement","accessibilityLinks":"micromag-viewer-accessibilityLinks","accessibilityButton":"micromag-viewer-accessibilityButton","disabled":"micromag-viewer-disabled","tooltip":"micromag-viewer-tooltip","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","navigationHint":"micromag-viewer-navigationHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
+var styles$7 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","ariaAnnouncement":"micromag-viewer-ariaAnnouncement","accessibilityLinks":"micromag-viewer-accessibilityLinks","accessibilityButton":"micromag-viewer-accessibilityButton","disabled":"micromag-viewer-disabled","tooltip":"micromag-viewer-tooltip","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","visible":"micromag-viewer-visible","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","navigationHint":"micromag-viewer-navigationHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
 
 var propTypes$b = {
   story: PropTypes$1.story.isRequired,
@@ -1943,7 +1939,55 @@ var ArrowHint = function ArrowHint(_ref) {
 ArrowHint.propTypes = propTypes$8;
 ArrowHint.defaultProps = defaultProps$8;
 
-var styles$3 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
+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$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 propTypes$6 = {
+  className: PropTypes.string
+};
+var defaultProps$6 = {
+  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
+  })));
+};
+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","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
 
 var stopDragEventsPropagation = {
   onTouchMove: function onTouchMove(e) {
@@ -1983,7 +2027,7 @@ function getFormattedTimestamp() {
 }
 var SHOW_MILLISECONDS_THRESHOLD = 5; // show milliseconds when scrubbing if length of video is shorter than 5 seconds
 
-var propTypes$7 = {
+var propTypes$5 = {
   media: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   }) // eslint-disable-line
@@ -2000,7 +2044,7 @@ var propTypes$7 = {
   className: PropTypes.string,
   withSeekHead: PropTypes.bool
 };
-var defaultProps$7 = {
+var defaultProps$5 = {
   media: null,
   playing: false,
   backgroundColor: null,
@@ -2100,29 +2144,29 @@ var SeekBar = function SeekBar(_ref3) {
     }
   });
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$3.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$3.withSeekHead, withSeekHead), styles$3.showTimestamp, showTimestamp)])
+    className: classNames([styles$2.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$2.withSeekHead, withSeekHead), styles$2.showTimestamp, showTimestamp)])
   }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.inner
+    className: styles$2.inner
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.progressBarContainer
+    className: styles$2.progressBarContainer
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.progressBar,
+    className: styles$2.progressBar,
     style: {
       backgroundColor: backgroundColor
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.playHead,
+    className: styles$2.playHead,
     style: {
       left: "".concat(progress * 100, "%"),
       backgroundColor: progressColor
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.scrubbedTime,
+    className: styles$2.scrubbedTime,
     style: {
       borderColor: progressColor
     }
   }, getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD))), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.progress,
+    className: styles$2.progress,
     style: {
       transform: "scaleX(".concat(progress, ")"),
       backgroundColor: progressColor
@@ -2150,7 +2194,7 @@ var SeekBar = function SeekBar(_ref3) {
       duration: getFormattedTimestamp(duration, duration < SHOW_MILLISECONDS_THRESHOLD)
     }),
     "data-draggable": true,
-    className: styles$3.track,
+    className: styles$2.track,
     title: intl.formatMessage({
       id: "G1Gyjn",
       defaultMessage: [{
@@ -2168,12 +2212,12 @@ var SeekBar = function SeekBar(_ref3) {
     tabIndex: focusable ? '0' : '-1'
   }))));
 };
-SeekBar.propTypes = propTypes$7;
-SeekBar.defaultProps = defaultProps$7;
+SeekBar.propTypes = propTypes$5;
+SeekBar.defaultProps = defaultProps$5;
 
-var styles$2 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
+var styles$1 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
 
-var propTypes$6 = {
+var propTypes$4 = {
   defaultColor: PropTypes.shape({
     color: PropTypes.string,
     alpha: PropTypes.number
@@ -2186,7 +2230,7 @@ var propTypes$6 = {
   className: PropTypes.string,
   collapsedClassName: PropTypes.string
 };
-var defaultProps$6 = {
+var defaultProps$4 = {
   defaultColor: {
     color: '#FFFFFF',
     alpha: 1
@@ -2333,21 +2377,21 @@ function PlaybackControls(_ref) {
     seekBarOnly = _ref3.seekBarOnly;
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
   var playIcon = playing ? /*#__PURE__*/React.createElement(PauseIcon, {
-    className: styles$2.icon
+    className: styles$1.icon
   }) : /*#__PURE__*/React.createElement(PlayIcon, {
-    className: styles$2.icon
+    className: styles$1.icon
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$2.withPlayPause, controls && !seekBarOnly), styles$2.withSuggestPlay, controlsSuggestPlay), styles$2.withMute, hasMedia || controls), styles$2.withSeekBar, controls), styles$2.withSeekBarOnly, seekBarOnly), styles$2.isCollapsed, isCollapsed), styles$2.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
+    className: classNames([styles$1.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
   }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(Button$1, {
-    className: classNames([styles$2.suggest]),
+    className: classNames([styles$1.suggest]),
     style: {
       color: color
     },
     onClick: playing ? onPause : onPlay,
     focusable: controlsVisible,
     icon: /*#__PURE__*/React.createElement(PlayIcon, {
-      className: classNames([styles$2.icon, styles$2.offset])
+      className: classNames([styles$1.icon, styles$1.offset])
     }),
     "aria-pressed": !playing,
     "aria-label": intl.formatMessage({
@@ -2359,7 +2403,7 @@ function PlaybackControls(_ref) {
     }),
     withoutBootstrapStyles: true
   }) : null, /*#__PURE__*/React.createElement(Button$1, {
-    className: classNames([styles$2.playPauseButton, _defineProperty(_defineProperty({}, styles$2.hidden, controlsSuggestPlay && !controls), styles$2.loading, finalShowLoading)]),
+    className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
     style: {
       color: color
     },
@@ -2367,7 +2411,7 @@ function PlaybackControls(_ref) {
     focusable: controls && controlsVisible && (!seekBarOnly || !playing),
     disabled: finalShowLoading,
     icon: finalShowLoading ? /*#__PURE__*/React.createElement(Spinner, {
-      className: classNames([styles$2.spinner, styles$2.offset])
+      className: classNames([styles$1.spinner, styles$1.offset])
     }) : playIcon,
     "aria-pressed": !playing,
     "aria-label": finalShowLoading ? intl.formatMessage({
@@ -2385,7 +2429,7 @@ function PlaybackControls(_ref) {
     }),
     withoutBootstrapStyles: true
   }), /*#__PURE__*/React.createElement(SeekBar, {
-    className: styles$2.seekBar,
+    className: styles$1.seekBar,
     media: mediaElement,
     playing: playing,
     onClick: onSeekClick,
@@ -2398,16 +2442,16 @@ function PlaybackControls(_ref) {
     backgroundColor: color,
     progressColor: progressColor
   }), /*#__PURE__*/React.createElement(Button$1, {
-    className: styles$2.muteButton,
+    className: styles$1.muteButton,
     style: {
       color: color
     },
     onClick: muted ? onUnmute : onMute,
     focusable: controlsVisible || mediaHasAudio,
     icon: muted ? /*#__PURE__*/React.createElement(UnmuteIcon, {
-      className: styles$2.icon
+      className: styles$1.icon
     }) : /*#__PURE__*/React.createElement(MuteIcon, {
-      className: styles$2.icon
+      className: styles$1.icon
     }),
     "aria-pressed": !muted,
     "aria-label": intl.formatMessage({
@@ -2420,18 +2464,18 @@ function PlaybackControls(_ref) {
     withoutBootstrapStyles: true
   }));
 }
-PlaybackControls.propTypes = propTypes$6;
-PlaybackControls.defaultProps = defaultProps$6;
+PlaybackControls.propTypes = propTypes$4;
+PlaybackControls.defaultProps = defaultProps$4;
 
-var styles$1 = {"container":"micromag-viewer-partials-web-view-container","focusLock":"micromag-viewer-partials-web-view-focusLock","opened":"micromag-viewer-partials-web-view-opened"};
+var styles = {"container":"micromag-viewer-partials-web-view-container","focusLock":"micromag-viewer-partials-web-view-focusLock","opened":"micromag-viewer-partials-web-view-opened"};
 
 var _excluded$2 = ["opened", "close", "open", "update", "url"];
-var propTypes$5 = {
+var propTypes$3 = {
   onChange: PropTypes.func,
   className: PropTypes.string,
   style: PropTypes.object
 };
-var defaultProps$5 = {
+var defaultProps$3 = {
   onChange: null,
   className: null,
   style: null
@@ -2505,7 +2549,7 @@ function WebViewContainer(_ref) {
   }, [close]);
   useKeyboardShortcuts(keyboardShortcuts);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty(_defineProperty({}, styles$1.opened, opened), className, className !== null)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, styles.opened, opened), className, className !== null)]),
     style: style,
     onTransitionEnd: onTransitionEnd,
     ref: ref
@@ -2514,60 +2558,12 @@ function WebViewContainer(_ref) {
   }, webViewProps, {
     closeable: opened,
     focusable: opened,
-    className: styles$1.webView,
+    className: styles.webView,
     onClose: close
   })));
 }
-WebViewContainer.propTypes = propTypes$5;
-WebViewContainer.defaultProps = defaultProps$5;
-
-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 propTypes$4 = {
-  color: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$4 = {
-  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$4;
-HandIcon.defaultProps = defaultProps$4;
-
-var propTypes$3 = {
-  className: PropTypes.string
-};
-var defaultProps$3 = {
-  className: null
-};
-var HandTap = function HandTap(_ref) {
-  var className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.circle
-  }), /*#__PURE__*/React.createElement(HandIcon, {
-    className: styles.hand
-  })));
-};
-HandTap.propTypes = propTypes$3;
-HandTap.defaultProps = defaultProps$3;
+WebViewContainer.propTypes = propTypes$3;
+WebViewContainer.defaultProps = defaultProps$3;
 
 // @todo export from somewhere else; or use as props in possible component for screen transitions
 var SPRING_CONFIG_TIGHT = {
@@ -3223,6 +3219,11 @@ var Viewer = function Viewer(_ref) {
     bottomHeight = playbackControlsContainerHeight / screenScale;
   }
   var NavigationHint = withNavigationHint === 'hand' ? HandTap : ArrowHint;
+  console.log({
+    screenIndex: screenIndex,
+    transitionDirection: transitionDirection,
+    transitioned: transitioned
+  });
   return /*#__PURE__*/React.createElement(StoryProvider, {
     story: parsedStory
   }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
@@ -3364,13 +3365,14 @@ var Viewer = function Viewer(_ref) {
     var active = current || isInActiveRange || isNext;
     var preload = current || preloadNeighbors && (isAfter && isInPreloadRange || neighborPreloadBackward && isBefore && isInPreloadRange) || isNext;
     var screenStyles = getScreenStylesByIndex(i, progressSpring);
+    var isVisible = current || isDragging && isNext || transitionDirection !== 0 && !isDragging && i === screenIndex - transitionDirection || withNeighborScreens && active;
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
       id: current ? 'content' : null,
       "aria-hidden": !current,
       style: screenStyles,
       tabIndex: current ? 0 : -1,
-      className: classNames([styles$7.screenContainer, _defineProperty({}, styles$7.current, current)])
+      className: classNames([styles$7.screenContainer, _defineProperty(_defineProperty({}, styles$7.visible, isVisible), styles$7.current, current)])
     }, screen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
       className: styles$7.screen,
       screen: screen,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.604",
+    "version": "0.3.606",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,14 +64,14 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/routes": "^0.2.27",
-        "@micromag/core": "^0.3.601",
-        "@micromag/element-badge": "^0.3.601",
-        "@micromag/element-scroll": "^0.3.601",
-        "@micromag/element-share-options": "^0.3.601",
-        "@micromag/element-webview": "^0.3.601",
-        "@micromag/elements": "^0.3.601",
-        "@micromag/intl": "^0.3.601",
-        "@micromag/screens": "^0.3.604",
+        "@micromag/core": "^0.3.606",
+        "@micromag/element-badge": "^0.3.606",
+        "@micromag/element-scroll": "^0.3.606",
+        "@micromag/element-share-options": "^0.3.606",
+        "@micromag/element-webview": "^0.3.606",
+        "@micromag/elements": "^0.3.606",
+        "@micromag/intl": "^0.3.606",
+        "@micromag/screens": "^0.3.606",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -91,5 +91,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "8131499a60ad899f9be87dfdb461255e393fbbfc"
+    "gitHead": "0e2ee772952cc24e6824806bd23a7c65c8858c73"
 }