@micromag/core 0.3.779 → 0.3.781

package/es/components.js

@@ -3743,7 +3743,7 @@ var defaultProps$9 = {
   className: null,
   mediaRef: null
 };
-var Screen$1 = function Screen(_ref) {
+var Screen = function Screen(_ref) {
   var screen = _ref.screen,
     renderContext = _ref.renderContext,
     screenState = _ref.screenState,
@@ -3777,9 +3777,9 @@ var Screen$1 = function Screen(_ref) {
     className: className
   }, component));
 };
-Screen$1.propTypes = propTypes$9;
-Screen$1.defaultProps = defaultProps$9;
-var Screen = /*#__PURE__*/React.memo(Screen$1);
+Screen.propTypes = propTypes$9;
+Screen.defaultProps = defaultProps$9;
+var Screen$1 = /*#__PURE__*/React.memo(Screen);
 
 var styles$7 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
 
@@ -3810,7 +3810,7 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     withSize = _ref.withSize,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  var screenElement = /*#__PURE__*/React.createElement(Screen, Object.assign({
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "placeholder",
     screenState: screenState,
@@ -3863,7 +3863,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     fit = _ref.fit,
     hidden = _ref.hidden,
     props = _objectWithoutProperties(_ref, _excluded);
-  var screenElement = /*#__PURE__*/React.createElement(Screen, Object.assign({
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "preview",
     screenState: screenState,
@@ -4094,7 +4094,7 @@ var Screens = function Screens(_ref) {
     className: classNames([styles$1.container, _defineProperty({}, className, className)])
   }, screens.map(function (screen) {
     var id = screen.id;
-    return /*#__PURE__*/React.createElement(Screen, {
+    return /*#__PURE__*/React.createElement(Screen$1, {
       key: "screen-".concat(id),
       screen: screen,
       className: classNames([styles$1.screen, _defineProperty({}, styles$1.visible, screenId === id)])
@@ -4428,4 +4428,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, ClearButton, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, FullscreenIcon, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, _Menu as Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon };
+export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, ClearButton, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, FullscreenIcon, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, _Menu as Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon };

package/es/contexts.js

@@ -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

@@ -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/lib/contexts.js

@@ -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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.779",
+    "version": "0.3.781",
     "private": false,
     "description": "",
     "keywords": [
@@ -164,5 +164,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5cc7b8fc6d58ba77100060a9d9a4a3f87f835559"
+    "gitHead": "95e03bd48803c170ef4efbc5bd204a0c83563c11"
 }