@micromag/viewer 0.3.461 → 0.3.463

package/es/index.js

@@ -17,7 +17,7 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 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, useMediaReady, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
+import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, 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 { useIntl, FormattedMessage } from 'react-intl';
@@ -966,6 +966,7 @@ var _excluded$3 = ["textAlign"];
 var propTypes$c = {
   viewerTheme: PropTypes$1.viewerTheme,
   header: PropTypes.node,
+  footer: PropTypes.node,
   screenSize: PropTypes$1.screenSize,
   title: PropTypes.string,
   menuWidth: PropTypes.number,
@@ -985,6 +986,7 @@ var propTypes$c = {
 var defaultProps$c = {
   viewerTheme: null,
   header: null,
+  footer: null,
   screenSize: null,
   title: null,
   menuWidth: null,
@@ -1003,6 +1005,7 @@ var defaultProps$c = {
 var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var viewerTheme = _ref.viewerTheme,
     header = _ref.header,
+    footer = _ref.footer,
     screenSize = _ref.screenSize,
     title = _ref.title,
     menuWidth = _ref.menuWidth,
@@ -1129,7 +1132,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClick: onClickScreen,
       focusable: focusable
     }) : null)));
-  }))))));
+  }))), footer)));
 };
 ViewerMenuPreview.propTypes = propTypes$c;
 ViewerMenuPreview.defaultProps = defaultProps$c;
@@ -1332,6 +1335,7 @@ var propTypes$9 = {
   screenSize: PropTypes$1.screenSize,
   menuWidth: PropTypes.number,
   previewHeader: PropTypes.node,
+  previewFooter: PropTypes.node,
   withDotItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
   withoutShareMenu: PropTypes.bool,
@@ -1357,6 +1361,7 @@ var defaultProps$9 = {
   screenSize: null,
   menuWidth: null,
   previewHeader: null,
+  previewFooter: null,
   withDotItemClick: false,
   withoutScreensMenu: false,
   withoutShareMenu: false,
@@ -1381,6 +1386,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     screenSize = _ref.screenSize,
     menuWidth = _ref.menuWidth,
     previewHeader = _ref.previewHeader,
+    previewFooter = _ref.previewFooter,
     withDotItemClick = _ref.withDotItemClick,
     withoutScreensMenu = _ref.withoutScreensMenu,
     withoutShareMenu = _ref.withoutShareMenu,
@@ -1713,6 +1719,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, menuMounted ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     header: previewHeader,
+    footer: previewFooter,
     title: title,
     className: styles$6.menuPreview,
     screenSize: screenSize,
@@ -2126,9 +2133,9 @@ function PlaybackControls(_ref) {
     _usePlaybackContext$h = _usePlaybackContext.hasAudio,
     hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
     _usePlaybackContext$p = _usePlaybackContext.playing,
-    playing = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
+    wantedPlaying = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
     _usePlaybackContext$m2 = _usePlaybackContext.muted,
-    muted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
+    wantedMuted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
     setPlaying = _usePlaybackContext.setPlaying,
     setMuted = _usePlaybackContext.setMuted,
     controls = _usePlaybackContext.controls,
@@ -2146,19 +2153,26 @@ function PlaybackControls(_ref) {
   });
   var ready = mediaElement === null || mediaReady;
   var finalShowLoading = showLoading && !ready;
+  var _useMediaState = useMediaState(mediaElement, {
+      playing: wantedPlaying,
+      muted: wantedMuted
+    }),
+    buffering = _useMediaState.buffering,
+    playing = _useMediaState.playing,
+    muted = _useMediaState.muted;
   useEffect(function () {
     var id = null;
     setShowLoading(false);
-    if (!ready && withLoading) {
+    if ((!ready || buffering) && withLoading) {
       id = setTimeout(function () {
         setShowLoading(true);
-      }, 2000);
+      }, 1000);
     }
     return function () {
       setShowLoading(false);
       clearTimeout(id);
     };
-  }, [ready, withLoading, setShowLoading]);
+  }, [ready, buffering, withLoading, setShowLoading]);
   var _useState3 = useState({
       color: getColorAsString(defaultColor),
       progressColor: getColorAsString(defaultColor),
@@ -2444,6 +2458,11 @@ var propTypes$2 = {
   neighborScreenScale: PropTypes.number,
   topSafezoneHeight: PropTypes.number,
   bottomSafezoneHeight: PropTypes.number,
+  menuDotsButtons: PropTypes.node,
+  menuIsScreenWidth: PropTypes.bool,
+  menuHeader: PropTypes.node,
+  menuFooter: PropTypes.node,
+  closeable: PropTypes.bool,
   withMetadata: PropTypes.bool,
   withoutGestures: PropTypes.bool,
   withoutMenu: PropTypes.bool,
@@ -2456,16 +2475,12 @@ var propTypes$2 = {
   withNeighborScreens: PropTypes.bool,
   withNavigationHint: PropTypes.bool,
   withoutPlaybackControls: PropTypes.bool,
-  menuDotsButtons: PropTypes.node,
-  closeable: PropTypes.bool,
   onClose: PropTypes.func,
   onInteraction: PropTypes.func,
   onEnd: PropTypes.func,
   onViewModeChange: PropTypes.func,
   onMenuChange: PropTypes.func,
   currentScreenMedia: PropTypes$1.ref,
-  menuIsScreenWidth: PropTypes.bool,
-  menuHeader: PropTypes.node,
   screensMedias: PropTypes$1.ref,
   screenSizeOptions: PropTypes.shape({
     withoutMaxSize: PropTypes.bool,
@@ -2492,6 +2507,11 @@ var defaultProps$2 = {
   neighborScreenScale: 0.8,
   topSafezoneHeight: null,
   bottomSafezoneHeight: null,
+  menuIsScreenWidth: false,
+  menuHeader: null,
+  menuFooter: null,
+  menuDotsButtons: null,
+  closeable: false,
   withMetadata: false,
   withNeighborScreens: false,
   withNavigationHint: false,
@@ -2504,10 +2524,6 @@ var defaultProps$2 = {
   withoutTransitions: false,
   withoutNavigationArrow: false,
   withoutPlaybackControls: false,
-  menuIsScreenWidth: false,
-  menuHeader: null,
-  menuDotsButtons: null,
-  closeable: false,
   onClose: null,
   onInteraction: null,
   onEnd: null,
@@ -2535,6 +2551,11 @@ var Viewer = function Viewer(_ref) {
     neighborScreenScale = _ref.neighborScreenScale,
     topSafezoneHeight = _ref.topSafezoneHeight,
     bottomSafezoneHeight = _ref.bottomSafezoneHeight,
+    menuIsScreenWidth = _ref.menuIsScreenWidth,
+    menuHeader = _ref.menuHeader,
+    menuDotsButtons = _ref.menuDotsButtons,
+    menuFooter = _ref.menuFooter,
+    closeable = _ref.closeable,
     withMetadata = _ref.withMetadata,
     withoutGestures = _ref.withoutGestures,
     withoutMenu = _ref.withoutMenu,
@@ -2547,10 +2568,6 @@ var Viewer = function Viewer(_ref) {
     withNeighborScreens = _ref.withNeighborScreens,
     withNavigationHint = _ref.withNavigationHint,
     withoutPlaybackControls = _ref.withoutPlaybackControls,
-    menuIsScreenWidth = _ref.menuIsScreenWidth,
-    menuHeader = _ref.menuHeader,
-    menuDotsButtons = _ref.menuDotsButtons,
-    closeable = _ref.closeable,
     onCloseViewer = _ref.onClose,
     onInteraction = _ref.onInteraction,
     onEnd = _ref.onEnd,
@@ -3036,6 +3053,7 @@ var Viewer = function Viewer(_ref) {
     menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
     theme: viewerTheme,
     previewHeader: menuHeader,
+    previewFooter: menuFooter,
     trackingEnabled: trackingEnabled,
     onClickScreen: onClickScreen,
     onClickCloseViewer: onCloseViewer,

package/lib/index.js

@@ -970,6 +970,7 @@ var _excluded$3 = ["textAlign"];
 var propTypes$c = {
   viewerTheme: core.PropTypes.viewerTheme,
   header: PropTypes.node,
+  footer: PropTypes.node,
   screenSize: core.PropTypes.screenSize,
   title: PropTypes.string,
   menuWidth: PropTypes.number,
@@ -989,6 +990,7 @@ var propTypes$c = {
 var defaultProps$c = {
   viewerTheme: null,
   header: null,
+  footer: null,
   screenSize: null,
   title: null,
   menuWidth: null,
@@ -1007,6 +1009,7 @@ var defaultProps$c = {
 var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var viewerTheme = _ref.viewerTheme,
     header = _ref.header,
+    footer = _ref.footer,
     screenSize = _ref.screenSize,
     title = _ref.title,
     menuWidth = _ref.menuWidth,
@@ -1133,7 +1136,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClick: onClickScreen,
       focusable: focusable
     }) : null)));
-  }))))));
+  }))), footer)));
 };
 ViewerMenuPreview.propTypes = propTypes$c;
 ViewerMenuPreview.defaultProps = defaultProps$c;
@@ -1336,6 +1339,7 @@ var propTypes$9 = {
   screenSize: core.PropTypes.screenSize,
   menuWidth: PropTypes.number,
   previewHeader: PropTypes.node,
+  previewFooter: PropTypes.node,
   withDotItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
   withoutShareMenu: PropTypes.bool,
@@ -1361,6 +1365,7 @@ var defaultProps$9 = {
   screenSize: null,
   menuWidth: null,
   previewHeader: null,
+  previewFooter: null,
   withDotItemClick: false,
   withoutScreensMenu: false,
   withoutShareMenu: false,
@@ -1385,6 +1390,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     screenSize = _ref.screenSize,
     menuWidth = _ref.menuWidth,
     previewHeader = _ref.previewHeader,
+    previewFooter = _ref.previewFooter,
     withDotItemClick = _ref.withDotItemClick,
     withoutScreensMenu = _ref.withoutScreensMenu,
     withoutShareMenu = _ref.withoutShareMenu,
@@ -1717,6 +1723,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, menuMounted ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     header: previewHeader,
+    footer: previewFooter,
     title: title,
     className: styles$6.menuPreview,
     screenSize: screenSize,
@@ -2130,9 +2137,9 @@ function PlaybackControls(_ref) {
     _usePlaybackContext$h = _usePlaybackContext.hasAudio,
     hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
     _usePlaybackContext$p = _usePlaybackContext.playing,
-    playing = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
+    wantedPlaying = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
     _usePlaybackContext$m2 = _usePlaybackContext.muted,
-    muted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
+    wantedMuted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
     setPlaying = _usePlaybackContext.setPlaying,
     setMuted = _usePlaybackContext.setMuted,
     controls = _usePlaybackContext.controls,
@@ -2150,19 +2157,26 @@ function PlaybackControls(_ref) {
   });
   var ready = mediaElement === null || mediaReady;
   var finalShowLoading = showLoading && !ready;
+  var _useMediaState = hooks.useMediaState(mediaElement, {
+      playing: wantedPlaying,
+      muted: wantedMuted
+    }),
+    buffering = _useMediaState.buffering,
+    playing = _useMediaState.playing,
+    muted = _useMediaState.muted;
   React.useEffect(function () {
     var id = null;
     setShowLoading(false);
-    if (!ready && withLoading) {
+    if ((!ready || buffering) && withLoading) {
       id = setTimeout(function () {
         setShowLoading(true);
-      }, 2000);
+      }, 1000);
     }
     return function () {
       setShowLoading(false);
       clearTimeout(id);
     };
-  }, [ready, withLoading, setShowLoading]);
+  }, [ready, buffering, withLoading, setShowLoading]);
   var _useState3 = React.useState({
       color: utils.getColorAsString(defaultColor),
       progressColor: utils.getColorAsString(defaultColor),
@@ -2448,6 +2462,11 @@ var propTypes$2 = {
   neighborScreenScale: PropTypes.number,
   topSafezoneHeight: PropTypes.number,
   bottomSafezoneHeight: PropTypes.number,
+  menuDotsButtons: PropTypes.node,
+  menuIsScreenWidth: PropTypes.bool,
+  menuHeader: PropTypes.node,
+  menuFooter: PropTypes.node,
+  closeable: PropTypes.bool,
   withMetadata: PropTypes.bool,
   withoutGestures: PropTypes.bool,
   withoutMenu: PropTypes.bool,
@@ -2460,16 +2479,12 @@ var propTypes$2 = {
   withNeighborScreens: PropTypes.bool,
   withNavigationHint: PropTypes.bool,
   withoutPlaybackControls: PropTypes.bool,
-  menuDotsButtons: PropTypes.node,
-  closeable: PropTypes.bool,
   onClose: PropTypes.func,
   onInteraction: PropTypes.func,
   onEnd: PropTypes.func,
   onViewModeChange: PropTypes.func,
   onMenuChange: PropTypes.func,
   currentScreenMedia: core.PropTypes.ref,
-  menuIsScreenWidth: PropTypes.bool,
-  menuHeader: PropTypes.node,
   screensMedias: core.PropTypes.ref,
   screenSizeOptions: PropTypes.shape({
     withoutMaxSize: PropTypes.bool,
@@ -2496,6 +2511,11 @@ var defaultProps$2 = {
   neighborScreenScale: 0.8,
   topSafezoneHeight: null,
   bottomSafezoneHeight: null,
+  menuIsScreenWidth: false,
+  menuHeader: null,
+  menuFooter: null,
+  menuDotsButtons: null,
+  closeable: false,
   withMetadata: false,
   withNeighborScreens: false,
   withNavigationHint: false,
@@ -2508,10 +2528,6 @@ var defaultProps$2 = {
   withoutTransitions: false,
   withoutNavigationArrow: false,
   withoutPlaybackControls: false,
-  menuIsScreenWidth: false,
-  menuHeader: null,
-  menuDotsButtons: null,
-  closeable: false,
   onClose: null,
   onInteraction: null,
   onEnd: null,
@@ -2539,6 +2555,11 @@ var Viewer = function Viewer(_ref) {
     neighborScreenScale = _ref.neighborScreenScale,
     topSafezoneHeight = _ref.topSafezoneHeight,
     bottomSafezoneHeight = _ref.bottomSafezoneHeight,
+    menuIsScreenWidth = _ref.menuIsScreenWidth,
+    menuHeader = _ref.menuHeader,
+    menuDotsButtons = _ref.menuDotsButtons,
+    menuFooter = _ref.menuFooter,
+    closeable = _ref.closeable,
     withMetadata = _ref.withMetadata,
     withoutGestures = _ref.withoutGestures,
     withoutMenu = _ref.withoutMenu,
@@ -2551,10 +2572,6 @@ var Viewer = function Viewer(_ref) {
     withNeighborScreens = _ref.withNeighborScreens,
     withNavigationHint = _ref.withNavigationHint,
     withoutPlaybackControls = _ref.withoutPlaybackControls,
-    menuIsScreenWidth = _ref.menuIsScreenWidth,
-    menuHeader = _ref.menuHeader,
-    menuDotsButtons = _ref.menuDotsButtons,
-    closeable = _ref.closeable,
     onCloseViewer = _ref.onClose,
     onInteraction = _ref.onInteraction,
     onEnd = _ref.onEnd,
@@ -3040,6 +3057,7 @@ var Viewer = function Viewer(_ref) {
     menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
     theme: viewerTheme,
     previewHeader: menuHeader,
+    previewFooter: menuFooter,
     trackingEnabled: trackingEnabled,
     onClickScreen: onClickScreen,
     onClickCloseViewer: onCloseViewer,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.461",
+    "version": "0.3.463",
     "private": false,
     "description": "",
     "keywords": [
@@ -62,15 +62,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.460",
-        "@micromag/element-badge": "^0.3.460",
-        "@micromag/element-scroll": "^0.3.460",
-        "@micromag/element-share-options": "^0.3.460",
-        "@micromag/element-webview": "^0.3.460",
-        "@micromag/elements": "^0.3.460",
-        "@micromag/fields": "^0.3.460",
-        "@micromag/intl": "^0.3.460",
-        "@micromag/screens": "^0.3.461",
+        "@micromag/core": "^0.3.463",
+        "@micromag/element-badge": "^0.3.463",
+        "@micromag/element-scroll": "^0.3.463",
+        "@micromag/element-share-options": "^0.3.463",
+        "@micromag/element-webview": "^0.3.463",
+        "@micromag/elements": "^0.3.463",
+        "@micromag/fields": "^0.3.463",
+        "@micromag/intl": "^0.3.463",
+        "@micromag/screens": "^0.3.463",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -90,5 +90,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4272b6ced198a1a689fcfcb9682a584d55d6780c"
+    "gitHead": "a2eb34209cb2dcbcd6a15d1325a02778543a8bca"
 }