@micromag/viewer 0.3.462 → 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';
@@ -2133,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,
@@ -2153,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),

package/lib/index.js

@@ -2137,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,
@@ -2157,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),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.462",
+    "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": "cdf44482ebdc89155b55ad52824e88dd8c4e322b"
+    "gitHead": "a2eb34209cb2dcbcd6a15d1325a02778543a8bca"
 }