@micromag/core 0.3.779 → 0.3.788

package/es/components.js

@@ -1,31 +1,31 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { Link as Link$1 } from 'wouter';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver, useDevicePixelRatio } from '@micromag/core/hooks';
-import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import get from 'lodash/get';
-import queryString from 'query-string';
-import { createPortal } from 'react-dom';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
 import dayjs from 'dayjs';
 import throttle from 'lodash/throttle';
+import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver, useDevicePixelRatio } from '@micromag/core/hooks';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import get from 'lodash/get';
+import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import isObject from 'lodash/isObject';
 import { Helmet } from 'react-helmet';
 import isString from 'lodash/isString';
 import isArray from 'lodash/isArray';
+import { createPortal } from 'react-dom';
+import queryString from 'query-string';
 import { faAd } from '@fortawesome/free-solid-svg-icons/faAd';
 import { faImage } from '@fortawesome/free-solid-svg-icons/faImage';
 import { faMusic } from '@fortawesome/free-solid-svg-icons/faMusic';
@@ -35,12 +35,12 @@ import { faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkedAlt
 import { faVideo } from '@fortawesome/free-solid-svg-icons/faVideo';
 import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
-import { getSizeWithinBounds } from '@folklore/size';
 import { faCommentDots } from '@fortawesome/free-solid-svg-icons/faCommentDots';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
 import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
+import { getSizeWithinBounds } from '@folklore/size';
 import { useSpring } from '@react-spring/core';
 import { config, animated } from '@react-spring/web';
 
@@ -2435,24 +2435,56 @@ var FontFaces = function FontFaces(_ref4) {
       return fontFontFaces;
     }
     var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
-    return [].concat(_toConsumableArray(fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray((variants || []).map(function (_ref6) {
+    var fontKey = name.toLowerCase();
+    return _objectSpread(_objectSpread({}, fontFontFaces), {}, _defineProperty({}, fontKey, urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null), variants.reduce(function (variantFontFaces, _ref6) {
       var weight = _ref6.weight,
         style = _ref6.style,
         _ref6$media = _ref6.media,
         variantMedia = _ref6$media === void 0 ? null : _ref6$media;
       if (variantMedia == null) {
-        return null;
+        return variantFontFaces;
       }
       var variantUrls = getUrlsFromMedia(variantMedia, formats);
-      return variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null;
-    })));
-  }, []).filter(function (it) {
-    return it !== null;
-  });
+      var variantKey = "".concat(fontKey, "-").concat(weight !== null ? weight : 'normal', "-").concat(style !== null ? style : 'normal');
+      return _objectSpread(_objectSpread({}, variantFontFaces), {}, _defineProperty({}, variantKey, variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null));
+    }, {}));
+
+    // return [
+    //     ...fontFontFaces,
+    //     urls !== null && urls.length > 0
+    //         ? `
+    //     @font-face {
+    //         font-family: "${name}";
+    //         src: ${urls.join(',')};
+    //     }
+    // `
+    //         : null,
+    //     ...(variants || []).map(({ weight, style, media: variantMedia = null }) => {
+    //         if (variantMedia == null) {
+    //             return null;
+    //         }
+    //         const variantUrls = getUrlsFromMedia(variantMedia, formats);
+    //         return variantUrls !== null && variantUrls.length > 0
+    //             ? `
+    //     @font-face {
+    //         font-family: "${name}";
+    //         ${weight !== null ? `font-weight: ${weight};` : ''}
+    //         ${style !== null ? `font-style: ${style};` : ''}
+    //         src: ${variantUrls.join(',')};
+    //     }
+    // `
+    //             : null;
+    //     }),
+    // ];
+  }, {});
   return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {
     type: "text/css",
     dangerouslySetInnerHTML: {
-      __html: fontFaces.join('\n')
+      __html: Object.keys(fontFaces).map(function (it) {
+        return fontFaces[it];
+      }).filter(function (it) {
+        return it !== null;
+      }).join('\n')
     }
   }) : null;
 };

package/es/contexts.js

@@ -15,10 +15,10 @@ import { loadGoogleApi, loadGoogleMaps } from '@folklore/services';
 import { getDisplayName, getScreenExtraField } from '@micromag/core/utils';
 import { useUrlGenerator } from '@folklore/routes';
 export { RoutesContext, RoutesProvider, useRoutes, useUrlGenerator } from '@folklore/routes';
-import { useLocation } from 'wouter';
-import { TrackingContext, TrackingContainer } from '@folklore/tracking';
+import { TrackingContainer, TrackingContext } from '@folklore/tracking';
 export { TrackingContext } from '@folklore/tracking';
 import EventEmitter from 'wolfy87-eventemitter';
+import { useLocation } from 'wouter';
 
 var MODALS_NAMESPACE = 'modals';
 var FIELDS_NAMESPACE = 'fields';
@@ -1101,21 +1101,26 @@ var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpre
 var usePlaybackContext = function usePlaybackContext() {
   return useContext(PlaybackContext);
 };
-var usePlaybackMediaRef = function usePlaybackMediaRef(active) {
+var usePlaybackMediaRef = function usePlaybackMediaRef() {
+  var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var background = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var _usePlaybackContext = usePlaybackContext(),
-    setMedia = _usePlaybackContext.setMedia;
+    setMedia = _usePlaybackContext.setMedia,
+    setIsBackground = _usePlaybackContext.setIsBackground;
   var mediaRef = useRef(null);
   useEffect(function () {
     if (!active) {
       return function () {};
     }
+    setIsBackground(background);
     if (mediaRef.current !== null) {
       setMedia(mediaRef.current);
     }
     return function () {
       setMedia(null);
+      setIsBackground(false);
     };
-  }, [setMedia, active]);
+  }, [setMedia, setIsBackground, active, background]);
   return mediaRef;
 };
 var propTypes$5 = {
@@ -1156,26 +1161,30 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     media = _useState6[0],
     setMedia = _useState6[1];
-  var _useState7 = useState(initialControls),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    controls = _useState8[0],
-    setControls = _useState8[1];
-  var _useState9 = useState(initialControlsSuggestPlay),
+    isBackground = _useState8[0],
+    setIsBackground = _useState8[1];
+  var _useState9 = useState(initialControls),
     _useState0 = _slicedToArray(_useState9, 2),
-    controlsSuggestPlay = _useState0[0],
-    setControlsSuggestPlay = _useState0[1];
-  var _useState1 = useState(initialControlsVisible),
+    controls = _useState0[0],
+    setControls = _useState0[1];
+  var _useState1 = useState(initialControlsSuggestPlay),
     _useState10 = _slicedToArray(_useState1, 2),
-    controlsVisible = _useState10[0],
-    setControlsVisible = _useState10[1];
-  var _useState11 = useState(initialControlsTheme),
+    controlsSuggestPlay = _useState10[0],
+    setControlsSuggestPlay = _useState10[1];
+  var _useState11 = useState(initialControlsVisible),
     _useState12 = _slicedToArray(_useState11, 2),
-    controlsTheme = _useState12[0],
-    setControlsTheme = _useState12[1];
-  var _useState13 = useState(initialCurrentQualityLevel),
+    controlsVisible = _useState12[0],
+    setControlsVisible = _useState12[1];
+  var _useState13 = useState(initialControlsTheme),
     _useState14 = _slicedToArray(_useState13, 2),
-    currentQualityLevel = _useState14[0],
-    setCurrentQualityLevel = _useState14[1];
+    controlsTheme = _useState14[0],
+    setControlsTheme = _useState14[1];
+  var _useState15 = useState(initialCurrentQualityLevel),
+    _useState16 = _slicedToArray(_useState15, 2),
+    currentQualityLevel = _useState16[0],
+    setCurrentQualityLevel = _useState16[1];
   var finalSetControls = useCallback(function (newControls) {
     if (newControls) {
       setControls(true);
@@ -1203,10 +1212,10 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   }, [media, setControlsSuggestPlay]);
 
   // Handle media ended
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    completed = _useState16[0],
-    setCompleted = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    completed = _useState18[0],
+    setCompleted = _useState18[1];
   var onMediaCompleted = useCallback(function () {
     return setCompleted(true);
   }, [setCompleted]);
@@ -1258,6 +1267,8 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       controlsTheme: controlsTheme,
       currentQualityLevel: currentQualityLevel,
       setMuted: setMuted,
+      setIsBackground: setIsBackground,
+      isBackground: isBackground,
       setPlaying: finalSetPlaying,
       setControls: finalSetControls,
       setControlsSuggestPlay: setControlsSuggestPlay,
@@ -1268,7 +1279,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       setMedia: setMedia,
       setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
-  }, [muted, playing, completed, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
+  }, [muted, playing, completed, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, setIsBackground, isBackground, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

package/es/hooks.js

@@ -13,13 +13,13 @@ import screenfull from 'screenfull';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
+import raf from 'raf';
 import createDebug from 'debug';
 import isString from 'lodash/isString';
-import raf from 'raf';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
+import { match } from 'css-mediaquery';
 import { useIntl } from 'react-intl';
 import dayjs from 'dayjs';
-import { match } from 'css-mediaquery';
 import clamp from 'lodash/clamp';
 
 function useActivityDetector() {
@@ -203,6 +203,8 @@ function useDragProgress() {
     onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
     _ref$onPointerDown = _ref.onPointerDown,
     onPointerDown = _ref$onPointerDown === void 0 ? null : _ref$onPointerDown,
+    _ref$onScroll = _ref.onScroll,
+    onScroll = _ref$onScroll === void 0 ? null : _ref$onScroll,
     _ref$springParams = _ref.springParams,
     springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
     _ref$dragOptions = _ref.dragOptions,
@@ -272,7 +274,8 @@ function useDragProgress() {
   }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = useGesture({
     onDrag: onDrag,
-    onPointerDown: onPointerDown !== null ? onPointerDown : function () {}
+    onPointerDown: onPointerDown !== null ? onPointerDown : function () {},
+    onScroll: onScroll !== null ? onScroll : function () {}
   }, {
     drag: dragOptions
   });

package/es/index.js

@@ -12,11 +12,11 @@ import _inherits from '@babel/runtime/helpers/inherits';
 import EventEmitter from 'wolfy87-eventemitter';
 import { snakeCase, pascalCase } from 'change-case';
 import uniqBy from 'lodash/uniqBy';
-import _typeof from '@babel/runtime/helpers/typeof';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import uniq from 'lodash/uniq';
+import _typeof from '@babel/runtime/helpers/typeof';
 import isString from 'lodash/isString';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import uniq from 'lodash/uniq';
 import isEmpty from 'lodash/isEmpty';
 import { Tracking as Tracking$1 } from '@folklore/tracking';
 import PropTypes$1 from 'prop-types';

package/es/utils.js

@@ -11,8 +11,8 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import isArray from 'lodash/isArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import slugify from 'slugify';
 
 function addNonBreakingSpaces(text) {

package/lib/components.js

@@ -1,33 +1,33 @@
 'use strict';
 
+var PropTypes = require('prop-types');
+var React = require('react');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
 var wouter = require('wouter');
 var core = require('@micromag/core');
 var reactIntl = require('react-intl');
 var utils = require('@micromag/core/utils');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
 var faClose = require('@fortawesome/free-solid-svg-icons/faClose');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var hooks = require('@micromag/core/hooks');
-var contexts = require('@micromag/core/contexts');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var get = require('lodash/get');
-var queryString = require('query-string');
-var reactDom = require('react-dom');
 var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
 var faAngleUp = require('@fortawesome/free-solid-svg-icons/faAngleUp');
 var dayjs = require('dayjs');
 var throttle = require('lodash/throttle');
+var hooks = require('@micromag/core/hooks');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var get = require('lodash/get');
+var contexts = require('@micromag/core/contexts');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var isObject = require('lodash/isObject');
 var reactHelmet = require('react-helmet');
 var isString = require('lodash/isString');
 var isArray = require('lodash/isArray');
+var reactDom = require('react-dom');
+var queryString = require('query-string');
 var faAd = require('@fortawesome/free-solid-svg-icons/faAd');
 var faImage = require('@fortawesome/free-solid-svg-icons/faImage');
 var faMusic = require('@fortawesome/free-solid-svg-icons/faMusic');
@@ -37,12 +37,12 @@ var faMapMarkedAlt = require('@fortawesome/free-solid-svg-icons/faMapMarkedAlt')
 var faVideo = require('@fortawesome/free-solid-svg-icons/faVideo');
 var faPlay = require('@fortawesome/free-solid-svg-icons/faPlay');
 var faRedo = require('@fortawesome/free-solid-svg-icons/faRedo');
-var size = require('@folklore/size');
 var faCommentDots = require('@fortawesome/free-solid-svg-icons/faCommentDots');
 var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
 var faCircle = require('@fortawesome/free-solid-svg-icons/faCircle');
 var faPercent = require('@fortawesome/free-solid-svg-icons/faPercent');
+var size = require('@folklore/size');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
 
@@ -2437,24 +2437,56 @@ var FontFaces = function FontFaces(_ref4) {
       return fontFontFaces;
     }
     var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
-    return [].concat(_toConsumableArray(fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray((variants || []).map(function (_ref6) {
+    var fontKey = name.toLowerCase();
+    return _objectSpread(_objectSpread({}, fontFontFaces), {}, _defineProperty({}, fontKey, urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null), variants.reduce(function (variantFontFaces, _ref6) {
       var weight = _ref6.weight,
         style = _ref6.style,
         _ref6$media = _ref6.media,
         variantMedia = _ref6$media === void 0 ? null : _ref6$media;
       if (variantMedia == null) {
-        return null;
+        return variantFontFaces;
       }
       var variantUrls = getUrlsFromMedia(variantMedia, formats);
-      return variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null;
-    })));
-  }, []).filter(function (it) {
-    return it !== null;
-  });
+      var variantKey = "".concat(fontKey, "-").concat(weight !== null ? weight : 'normal', "-").concat(style !== null ? style : 'normal');
+      return _objectSpread(_objectSpread({}, variantFontFaces), {}, _defineProperty({}, variantKey, variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null));
+    }, {}));
+
+    // return [
+    //     ...fontFontFaces,
+    //     urls !== null && urls.length > 0
+    //         ? `
+    //     @font-face {
+    //         font-family: "${name}";
+    //         src: ${urls.join(',')};
+    //     }
+    // `
+    //         : null,
+    //     ...(variants || []).map(({ weight, style, media: variantMedia = null }) => {
+    //         if (variantMedia == null) {
+    //             return null;
+    //         }
+    //         const variantUrls = getUrlsFromMedia(variantMedia, formats);
+    //         return variantUrls !== null && variantUrls.length > 0
+    //             ? `
+    //     @font-face {
+    //         font-family: "${name}";
+    //         ${weight !== null ? `font-weight: ${weight};` : ''}
+    //         ${style !== null ? `font-style: ${style};` : ''}
+    //         src: ${variantUrls.join(',')};
+    //     }
+    // `
+    //             : null;
+    //     }),
+    // ];
+  }, {});
   return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {
     type: "text/css",
     dangerouslySetInnerHTML: {
-      __html: fontFaces.join('\n')
+      __html: Object.keys(fontFaces).map(function (it) {
+        return fontFaces[it];
+      }).filter(function (it) {
+        return it !== null;
+      }).join('\n')
     }
   }) : null;
 };

package/lib/contexts.js

@@ -16,9 +16,9 @@ var isObject = require('lodash/isObject');
 var services = require('@folklore/services');
 var utils = require('@micromag/core/utils');
 var routes = require('@folklore/routes');
-var wouter = require('wouter');
 var tracking = require('@folklore/tracking');
 var EventEmitter = require('wolfy87-eventemitter');
+var wouter = require('wouter');
 
 var MODALS_NAMESPACE = 'modals';
 var FIELDS_NAMESPACE = 'fields';
@@ -1101,21 +1101,26 @@ var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpre
 var usePlaybackContext = function usePlaybackContext() {
   return React.useContext(PlaybackContext);
 };
-var usePlaybackMediaRef = function usePlaybackMediaRef(active) {
+var usePlaybackMediaRef = function usePlaybackMediaRef() {
+  var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var background = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var _usePlaybackContext = usePlaybackContext(),
-    setMedia = _usePlaybackContext.setMedia;
+    setMedia = _usePlaybackContext.setMedia,
+    setIsBackground = _usePlaybackContext.setIsBackground;
   var mediaRef = React.useRef(null);
   React.useEffect(function () {
     if (!active) {
       return function () {};
     }
+    setIsBackground(background);
     if (mediaRef.current !== null) {
       setMedia(mediaRef.current);
     }
     return function () {
       setMedia(null);
+      setIsBackground(false);
     };
-  }, [setMedia, active]);
+  }, [setMedia, setIsBackground, active, background]);
   return mediaRef;
 };
 var propTypes$5 = {
@@ -1156,26 +1161,30 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     media = _useState6[0],
     setMedia = _useState6[1];
-  var _useState7 = React.useState(initialControls),
+  var _useState7 = React.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    controls = _useState8[0],
-    setControls = _useState8[1];
-  var _useState9 = React.useState(initialControlsSuggestPlay),
+    isBackground = _useState8[0],
+    setIsBackground = _useState8[1];
+  var _useState9 = React.useState(initialControls),
     _useState0 = _slicedToArray(_useState9, 2),
-    controlsSuggestPlay = _useState0[0],
-    setControlsSuggestPlay = _useState0[1];
-  var _useState1 = React.useState(initialControlsVisible),
+    controls = _useState0[0],
+    setControls = _useState0[1];
+  var _useState1 = React.useState(initialControlsSuggestPlay),
     _useState10 = _slicedToArray(_useState1, 2),
-    controlsVisible = _useState10[0],
-    setControlsVisible = _useState10[1];
-  var _useState11 = React.useState(initialControlsTheme),
+    controlsSuggestPlay = _useState10[0],
+    setControlsSuggestPlay = _useState10[1];
+  var _useState11 = React.useState(initialControlsVisible),
     _useState12 = _slicedToArray(_useState11, 2),
-    controlsTheme = _useState12[0],
-    setControlsTheme = _useState12[1];
-  var _useState13 = React.useState(initialCurrentQualityLevel),
+    controlsVisible = _useState12[0],
+    setControlsVisible = _useState12[1];
+  var _useState13 = React.useState(initialControlsTheme),
     _useState14 = _slicedToArray(_useState13, 2),
-    currentQualityLevel = _useState14[0],
-    setCurrentQualityLevel = _useState14[1];
+    controlsTheme = _useState14[0],
+    setControlsTheme = _useState14[1];
+  var _useState15 = React.useState(initialCurrentQualityLevel),
+    _useState16 = _slicedToArray(_useState15, 2),
+    currentQualityLevel = _useState16[0],
+    setCurrentQualityLevel = _useState16[1];
   var finalSetControls = React.useCallback(function (newControls) {
     if (newControls) {
       setControls(true);
@@ -1203,10 +1212,10 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   }, [media, setControlsSuggestPlay]);
 
   // Handle media ended
-  var _useState15 = React.useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    completed = _useState16[0],
-    setCompleted = _useState16[1];
+  var _useState17 = React.useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    completed = _useState18[0],
+    setCompleted = _useState18[1];
   var onMediaCompleted = React.useCallback(function () {
     return setCompleted(true);
   }, [setCompleted]);
@@ -1258,6 +1267,8 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       controlsTheme: controlsTheme,
       currentQualityLevel: currentQualityLevel,
       setMuted: setMuted,
+      setIsBackground: setIsBackground,
+      isBackground: isBackground,
       setPlaying: finalSetPlaying,
       setControls: finalSetControls,
       setControlsSuggestPlay: setControlsSuggestPlay,
@@ -1268,7 +1279,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       setMedia: setMedia,
       setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
-  }, [muted, playing, completed, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
+  }, [muted, playing, completed, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, setIsBackground, isBackground, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

package/lib/hooks.js

@@ -15,13 +15,13 @@ var screenfull = require('screenfull');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
+var raf = require('raf');
 var createDebug = require('debug');
 var isString = require('lodash/isString');
-var raf = require('raf');
 var contexts = require('@micromag/core/contexts');
+var cssMediaquery = require('css-mediaquery');
 var reactIntl = require('react-intl');
 var dayjs = require('dayjs');
-var cssMediaquery = require('css-mediaquery');
 var clamp = require('lodash/clamp');
 
 function useActivityDetector() {
@@ -205,6 +205,8 @@ function useDragProgress() {
     onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
     _ref$onPointerDown = _ref.onPointerDown,
     onPointerDown = _ref$onPointerDown === void 0 ? null : _ref$onPointerDown,
+    _ref$onScroll = _ref.onScroll,
+    onScroll = _ref$onScroll === void 0 ? null : _ref$onScroll,
     _ref$springParams = _ref.springParams,
     springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
     _ref$dragOptions = _ref.dragOptions,
@@ -274,7 +276,8 @@ function useDragProgress() {
   }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = react$1.useGesture({
     onDrag: onDrag,
-    onPointerDown: onPointerDown !== null ? onPointerDown : function () {}
+    onPointerDown: onPointerDown !== null ? onPointerDown : function () {},
+    onScroll: onScroll !== null ? onScroll : function () {}
   }, {
     drag: dragOptions
   });

package/lib/index.js

@@ -14,11 +14,11 @@ var _inherits = require('@babel/runtime/helpers/inherits');
 var EventEmitter = require('wolfy87-eventemitter');
 var changeCase = require('change-case');
 var uniqBy = require('lodash/uniqBy');
-var _typeof = require('@babel/runtime/helpers/typeof');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var uniq = require('lodash/uniq');
+var _typeof = require('@babel/runtime/helpers/typeof');
 var isString = require('lodash/isString');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var uniq = require('lodash/uniq');
 var isEmpty = require('lodash/isEmpty');
 var tracking = require('@folklore/tracking');
 var PropTypes$1 = require('prop-types');

package/lib/utils.js

@@ -12,8 +12,8 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var isArray = require('lodash/isArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var slugify = require('slugify');
 
 function addNonBreakingSpaces(text) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.779",
+    "version": "0.3.788",
     "private": false,
     "description": "",
     "keywords": [
@@ -120,6 +120,9 @@
         "@panneau/filters": "^3.0.301",
         "@panneau/medias": "^3.0.300",
         "@panneau/uppy": "^3.0.162",
+        "@uppy/core": "^5.1.1",
+        "@uppy/dashboard": "^5.0.4",
+        "@uppy/react": "^5.1.1",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
@@ -164,5 +167,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5cc7b8fc6d58ba77100060a9d9a4a3f87f835559"
+    "gitHead": "d7e3871424004d8c65157598cd9b9234e1974cdd"
 }