@micromag/core 0.4.55 → 0.4.63

package/lib/contexts.js

@@ -640,7 +640,8 @@ var FontsContext = /*#__PURE__*/React.createContext({
   customFonts: null
 });
 var useGoogleFonts = function useGoogleFonts() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref = options || {},
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$setFonts = _ref.setFonts,
@@ -680,7 +681,8 @@ var useGoogleFonts = function useGoogleFonts() {
   return googleFonts;
 };
 var useFonts = function useFonts() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref3 = options || {},
     _ref3$withoutGoogleFo = _ref3.withoutGoogleFonts,
     withoutGoogleFonts = _ref3$withoutGoogleFo === void 0 ? false : _ref3$withoutGoogleFo;
   var _useContext = React.useContext(FontsContext),
@@ -1009,30 +1011,28 @@ var defaultControlsThemeValue = {
   color: null,
   progressColor: null
 };
-var defaultValue$1 = {
+var PlaybackContext = /*#__PURE__*/React.createContext({
   playing: false,
-  paused: false,
   completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
   controlsVisible: false,
+  hasAudio: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
-  currentQualityLevel: null
-};
-var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
-  setMuted: function setMuted() {},
-  setPlaying: function setPlaying() {},
-  setControls: function setControls() {},
-  setControlsVisible: function setControlsVisible() {},
-  setControlsTheme: function setControlsTheme() {},
+  currentQualityLevel: null,
+  setMuted: function setMuted(muted) {},
+  setPlaying: function setPlaying(playing) {},
+  setControls: function setControls(hasControls) {},
+  setControlsVisible: function setControlsVisible(visible) {},
+  setControlsTheme: function setControlsTheme(theme) {},
   showControls: function showControls() {},
   hideControls: function hideControls() {},
-  setMedia: function setMedia() {},
-  setCurrentQualityLevel: function setCurrentQualityLevel() {},
-  setIsBackground: function setIsBackground() {}
-}));
+  setMedia: function setMedia(media) {},
+  setCurrentQualityLevel: function setCurrentQualityLevel(qualityLevel, fromRef) {},
+  setIsBackground: function setIsBackground(isBackground) {}
+});
 var usePlaybackContext = function usePlaybackContext() {
   return React.useContext(PlaybackContext);
 };
@@ -1043,29 +1043,35 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
-    media = _usePlaybackContext.media;
+    media = _usePlaybackContext.media,
+    isBackground = _usePlaybackContext.isBackground;
   var mediaRef = React.useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   React.useEffect(function () {
+    var currentMedia = mediaRef.current;
     return function () {
       if (active) {
+        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
         setMedia(null);
         setIsBackground(false);
+        if (playing) {
+          currentMedia.pause();
+        }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
   // Register media with context when active and no media is registered
   React.useEffect(function () {
-    if (!active || mediaRef.current === null || media !== null) {
+    if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media, updateKey, setMedia, setIsBackground]);
+  }, [active, background, media, updateKey, setMedia, setIsBackground, isBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media
@@ -1389,14 +1395,17 @@ function ScreenSizeProvider(_ref) {
 var useTracking = function useTracking() {
   return React.useContext(tracking.TrackingContext);
 };
-function TrackingProvider(_ref) {
-  var _ref$variables = _ref.variables,
+function TrackingProvider() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref = options || {},
+    _ref$variables = _ref.variables,
     variables = _ref$variables === void 0 ? null : _ref$variables,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$paused = _ref.paused,
     paused = _ref$paused === void 0 ? false : _ref$paused,
-    children = _ref.children;
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   var contextTracking = useTracking() || null;
   var refTracking = React.useRef(null);
   var tracking$1 = React.useMemo(function () {

package/lib/hooks.js

@@ -22,8 +22,8 @@ var contexts = require('@micromag/core/contexts');
 var isEmpty = require('lodash/isEmpty');
 var hooks = require('@folklore/hooks');
 var cssMediaquery = require('css-mediaquery');
-var reactIntl = require('react-intl');
 var dayjs = require('dayjs');
+var reactIntl = require('react-intl');
 var clamp = require('lodash/clamp');
 
 function useActivityDetector() {
@@ -122,7 +122,8 @@ var useAnimationFrame = function useAnimationFrame(onFrame) {
 };
 
 var useFormattedDate = function useFormattedDate() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref = options || {},
     _ref$format = _ref.format,
     format = _ref$format === void 0 ? null : _ref$format,
     _ref$showToday = _ref.showToday,
@@ -148,7 +149,8 @@ var useFormattedDate = function useFormattedDate() {
   }, [today, showToday, format]);
 };
 var useFormattedTime = function useFormattedTime() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref2 = options || {},
     _ref2$format = _ref2.format,
     format = _ref2$format === void 0 ? null : _ref2$format,
     _ref2$showNow = _ref2.showNow,
@@ -531,16 +533,17 @@ var getObserver = function getObserver(Observer) {
   return observers[observerKey];
 };
 var useObserver = function useObserver(Observer) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _opts$root = opts.root,
-    root = _opts$root === void 0 ? null : _opts$root,
-    _opts$rootMargin = opts.rootMargin,
-    rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
-    _opts$threshold = opts.threshold,
-    threshold = _opts$threshold === void 0 ? null : _opts$threshold,
-    _opts$disabled = opts.disabled,
-    disabled = _opts$disabled === void 0 ? false : _opts$disabled;
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var _ref3 = opts || {},
+    _ref3$root = _ref3.root,
+    root = _ref3$root === void 0 ? null : _ref3$root,
+    _ref3$rootMargin = _ref3.rootMargin,
+    rootMargin = _ref3$rootMargin === void 0 ? null : _ref3$rootMargin,
+    _ref3$threshold = _ref3.threshold,
+    threshold = _ref3$threshold === void 0 ? null : _ref3$threshold,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
   var _useState = react.useState(initialEntry),
     _useState2 = _slicedToArray(_useState, 2),
     entry = _useState2[0],
@@ -609,15 +612,15 @@ var intersectionObserverInitialEntry = {
   rootBounds: null
 };
 var useIntersectionObserver = function useIntersectionObserver() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref3$root = _ref3.root,
-    root = _ref3$root === void 0 ? null : _ref3$root,
-    _ref3$rootMargin = _ref3.rootMargin,
-    rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
-    _ref3$threshold = _ref3.threshold,
-    threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref4$root = _ref4.root,
+    root = _ref4$root === void 0 ? null : _ref4$root,
+    _ref4$rootMargin = _ref4.rootMargin,
+    rootMargin = _ref4$rootMargin === void 0 ? '0px' : _ref4$rootMargin,
+    _ref4$threshold = _ref4.threshold,
+    threshold = _ref4$threshold === void 0 ? thresholdArray : _ref4$threshold,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
   return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
     root: root,
     rootMargin: rootMargin,
@@ -636,9 +639,10 @@ var resizeObserverInitialEntry = {
   borderBoxSize: null
 };
 var useResizeObserver = function useResizeObserver() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref5 = options || {},
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled;
   return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
     disabled: disabled
   }, resizeObserverInitialEntry);
@@ -647,21 +651,21 @@ var useDimensionObserver = function useDimensionObserver() {
   var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
     entry = _useResizeObserver.entry,
     rest = _objectWithoutProperties(_useResizeObserver, _excluded$2);
-  var _ref5 = entry || {},
-    _ref5$contentRect = _ref5.contentRect,
-    contentRect = _ref5$contentRect === void 0 ? null : _ref5$contentRect,
-    _ref5$borderBoxSize = _ref5.borderBoxSize,
-    borderBoxSize = _ref5$borderBoxSize === void 0 ? null : _ref5$borderBoxSize;
-  var _ref6 = contentRect || {},
-    _ref6$width = _ref6.width,
-    width = _ref6$width === void 0 ? 0 : _ref6$width,
-    _ref6$height = _ref6.height,
-    height = _ref6$height === void 0 ? 0 : _ref6$height;
-  var _ref7 = isArray(borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
-    _ref7$blockSize = _ref7.blockSize,
-    blockSize = _ref7$blockSize === void 0 ? null : _ref7$blockSize,
-    _ref7$inlineSize = _ref7.inlineSize,
-    inlineSize = _ref7$inlineSize === void 0 ? null : _ref7$inlineSize;
+  var _ref6 = entry || {},
+    _ref6$contentRect = _ref6.contentRect,
+    contentRect = _ref6$contentRect === void 0 ? null : _ref6$contentRect,
+    _ref6$borderBoxSize = _ref6.borderBoxSize,
+    borderBoxSize = _ref6$borderBoxSize === void 0 ? null : _ref6$borderBoxSize;
+  var _ref7 = contentRect || {},
+    _ref7$width = _ref7.width,
+    width = _ref7$width === void 0 ? 0 : _ref7$width,
+    _ref7$height = _ref7.height,
+    height = _ref7$height === void 0 ? 0 : _ref7$height;
+  var _ref8 = isArray(borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
+    _ref8$blockSize = _ref8.blockSize,
+    blockSize = _ref8$blockSize === void 0 ? null : _ref8$blockSize,
+    _ref8$inlineSize = _ref8.inlineSize,
+    inlineSize = _ref8$inlineSize === void 0 ? null : _ref8$inlineSize;
   return _objectSpread(_objectSpread({}, rest), {}, {
     entry: entry,
     width: inlineSize || width,
@@ -1642,8 +1646,10 @@ function useMediaLoad(element) {
 }
 
 var _excluded$1 = ["disabled"];
-function useMediaProgress(media) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+function useMediaProgress() {
+  var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var _ref = options || {},
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     props = _objectWithoutProperties(_ref, _excluded$1);
@@ -2058,7 +2064,8 @@ var useScreenSize = function useScreenSize(_ref) {
   return screenSize;
 };
 var useScreenSizeFromElement = function useScreenSizeFromElement() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref4 = options || {},
     _ref4$width = _ref4.width,
     width = _ref4$width === void 0 ? null : _ref4$width,
     _ref4$height = _ref4.height,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.55",
+    "version": "0.4.63",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9708f0016de0cf18dcd6a6aa5bc70d7f00b86d9f",
+    "gitHead": "0a6df1a5352c067c3296377d26fadb9b71244345",
     "types": "es/index.d.ts"
 }