@micromag/core 0.3.769 → 0.3.781

package/es/components.js

@@ -3631,6 +3631,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
     className = _ref.className,
     children = _ref.children;
   var hasSize = width !== null || height !== null;
+  //
   var _useDimensionObserver = useDimensionObserver(),
     refContainer = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.width,

package/es/contexts.js

@@ -1078,6 +1078,7 @@ var defaultControlsThemeValue = {
 var defaultValue$1 = {
   playing: false,
   paused: false,
+  completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
@@ -1100,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 = {
@@ -1155,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);
@@ -1200,6 +1210,26 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   useEffect(function () {
     setControlsSuggestPlay(false);
   }, [media, setControlsSuggestPlay]);
+
+  // Handle media ended
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    completed = _useState18[0],
+    setCompleted = _useState18[1];
+  var onMediaCompleted = useCallback(function () {
+    return setCompleted(true);
+  }, [setCompleted]);
+  useEffect(function () {
+    if (media !== null) {
+      media.addEventListener('ended', onMediaCompleted);
+    }
+    return function () {
+      if (media !== null) {
+        media.removeEventListener('ended', onMediaCompleted);
+      }
+      setCompleted(false);
+    };
+  }, [media, onMediaCompleted, setCompleted]);
   var showControls = useCallback(function () {
     return setControlsVisible(true);
   }, [setControlsVisible]);
@@ -1228,6 +1258,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     return {
       muted: muted,
       playing: playing && !paused,
+      completed: completed,
       controls: controls,
       controlsSuggestPlay: controlsSuggestPlay,
       controlsVisible: controlsVisible,
@@ -1236,6 +1267,8 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       controlsTheme: controlsTheme,
       currentQualityLevel: currentQualityLevel,
       setMuted: setMuted,
+      setIsBackground: setIsBackground,
+      isBackground: isBackground,
       setPlaying: finalSetPlaying,
       setControls: finalSetControls,
       setControlsSuggestPlay: setControlsSuggestPlay,
@@ -1246,7 +1279,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       setMedia: setMedia,
       setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
-  }, [muted, playing, 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
+    onPointerDown: onPointerDown !== null ? onPointerDown : function () {},
+    onScroll: onScroll !== null ? onScroll : function () {}
   }, {
     drag: dragOptions
   });

package/lib/components.js

@@ -3633,6 +3633,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
     className = _ref.className,
     children = _ref.children;
   var hasSize = width !== null || height !== null;
+  //
   var _useDimensionObserver = hooks.useDimensionObserver(),
     refContainer = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.width,

package/lib/contexts.js

@@ -1078,6 +1078,7 @@ var defaultControlsThemeValue = {
 var defaultValue$1 = {
   playing: false,
   paused: false,
+  completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
@@ -1100,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 = {
@@ -1155,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);
@@ -1200,6 +1210,26 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   React.useEffect(function () {
     setControlsSuggestPlay(false);
   }, [media, setControlsSuggestPlay]);
+
+  // Handle media ended
+  var _useState17 = React.useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    completed = _useState18[0],
+    setCompleted = _useState18[1];
+  var onMediaCompleted = React.useCallback(function () {
+    return setCompleted(true);
+  }, [setCompleted]);
+  React.useEffect(function () {
+    if (media !== null) {
+      media.addEventListener('ended', onMediaCompleted);
+    }
+    return function () {
+      if (media !== null) {
+        media.removeEventListener('ended', onMediaCompleted);
+      }
+      setCompleted(false);
+    };
+  }, [media, onMediaCompleted, setCompleted]);
   var showControls = React.useCallback(function () {
     return setControlsVisible(true);
   }, [setControlsVisible]);
@@ -1228,6 +1258,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     return {
       muted: muted,
       playing: playing && !paused,
+      completed: completed,
       controls: controls,
       controlsSuggestPlay: controlsSuggestPlay,
       controlsVisible: controlsVisible,
@@ -1236,6 +1267,8 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       controlsTheme: controlsTheme,
       currentQualityLevel: currentQualityLevel,
       setMuted: setMuted,
+      setIsBackground: setIsBackground,
+      isBackground: isBackground,
       setPlaying: finalSetPlaying,
       setControls: finalSetControls,
       setControlsSuggestPlay: setControlsSuggestPlay,
@@ -1246,7 +1279,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       setMedia: setMedia,
       setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
-  }, [muted, playing, 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
+    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.769",
+    "version": "0.3.781",
     "private": false,
     "description": "",
     "keywords": [
@@ -164,5 +164,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "a009106ec28c6e34288f0b3292f1bc6826812dd0"
+    "gitHead": "95e03bd48803c170ef4efbc5bd204a0c83563c11"
 }