@micromag/viewer 0.3.686 → 0.3.687

package/es/index.js

@@ -2970,9 +2970,12 @@ var Viewer = function Viewer(_ref) {
     _usePlaybackContext$c = _usePlaybackContext.controls,
     playbackControls = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
     _usePlaybackContext$c2 = _usePlaybackContext.controlsVisible,
-    playbackcontrolsVisible = _usePlaybackContext$c2 === void 0 ? false : _usePlaybackContext$c2,
+    playbackControlsVisible = _usePlaybackContext$c2 === void 0 ? false : _usePlaybackContext$c2,
     _usePlaybackContext$m = _usePlaybackContext.media,
     playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m;
+  var playbackHelpVisible = useMemo(function () {
+    return playbackControls && playbackControlsVisible;
+  }, [playbackControls, playbackControlsVisible]);
   var _useDimensionObserver = useDimensionObserver(),
     playbackControlsContainerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
@@ -3379,7 +3382,7 @@ var Viewer = function Viewer(_ref) {
   var bottomHeight = 0;
   if (bottomSafezoneHeight !== null) {
     bottomHeight = bottomSafezoneHeight / screenScale;
-  } else if (playbackControls && (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled) {
+  } else if (playbackControls && (playbackControlsVisible || !playing) && currentScreenInteractionEnabled) {
     bottomHeight = playbackControlsContainerHeight / screenScale;
   }
   var NavigationHint = withNavigationHint === 'hand' ? HandTap : ArrowHint;
@@ -3403,7 +3406,7 @@ var Viewer = function Viewer(_ref) {
     height: viewerHeight,
     topHeight: topHeight,
     bottomHeight: bottomHeight,
-    bottomSidesWidth: (playbackcontrolsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
+    bottomSidesWidth: (playbackControlsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
     gotoPreviousScreen: gotoPreviousScreen,
     gotoNextScreen: gotoNextScreen,
     disableInteraction: disableInteraction,
@@ -3416,7 +3419,7 @@ var Viewer = function Viewer(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$7.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$7.landscape, landscape), styles$7.withoutGestures, withoutGestures), styles$7.hideMenu, !menuVisible), styles$7.disableMenu, navigationDisabled), styles$7.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), styles$7.ready, ready || withoutScreensTransforms), styles$7.hasInteracted, hasInteracted), styles$7.isDragging, isDragging), className, className)]),
+    }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$7.landscape, landscape), styles$7.withoutGestures, withoutGestures), styles$7.hideMenu, !menuVisible), styles$7.disableMenu, navigationDisabled), styles$7.fadeMenu, playing && playbackControls && !playbackControlsVisible), styles$7.ready, ready || withoutScreensTransforms), styles$7.hasInteracted, hasInteracted), styles$7.isDragging, isDragging), className, className)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, /*#__PURE__*/React.createElement("div", {
@@ -3451,18 +3454,18 @@ var Viewer = function Viewer(_ref) {
       }]
     }),
     className: styles$7.accessibilityLinks
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, playbackHelpVisible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onClickSkipToPlaybackControls,
-    "aria-disabled": withoutPlaybackControls || !playbackcontrolsVisible,
+    "aria-disabled": withoutPlaybackControls || !playbackControlsVisible,
     "aria-describedby": "disabledReason",
-    className: classNames([styles$7.accessibilityButton, _defineProperty({}, styles$7.disabled, withoutPlaybackControls || !playbackcontrolsVisible)])
+    className: classNames([styles$7.accessibilityButton, _defineProperty({}, styles$7.disabled, withoutPlaybackControls || !playbackControlsVisible)])
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "CnVj9r",
     defaultMessage: [{
       "type": 0,
       "value": "Skip to controls"
     }]
-  })), withoutPlaybackControls || !playbackcontrolsVisible ? /*#__PURE__*/React.createElement("div", {
+  })), withoutPlaybackControls || !playbackControlsVisible ? /*#__PURE__*/React.createElement("div", {
     role: "tooltip",
     className: styles$7.tooltipBox,
     id: "disabledReason"
@@ -3474,7 +3477,7 @@ var Viewer = function Viewer(_ref) {
       "type": 0,
       "value": "No controls available"
     }]
-  }))) : null), !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu$1, {
+  }))) : null) : null), !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu$1, {
     story: parsedStory,
     currentScreenIndex: screenIndex,
     withShadow: menuOverScreen && !withoutMenuShadow,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.686",
+    "version": "0.3.687",
     "private": false,
     "description": "",
     "keywords": [
@@ -92,5 +92,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5bc6e156b107a08b875192cf654a4506cfacd2ca"
+    "gitHead": "6948bdcb137330d244f07ec81d126ae669c5dd07"
 }