@micromag/core 0.3.126 → 0.3.138

package/es/components.js

@@ -1570,6 +1570,8 @@ ModalsContainer.propTypes = propTypes$v;
 ModalsContainer.defaultProps = defaultProps$v;
 var Modals = withModals(ModalsContainer);
 
+var styles$l = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
+
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$u = {
   id: PropTypes$1.string,
@@ -1654,8 +1656,6 @@ var ModalPortal = function ModalPortal(_ref) {
 ModalPortal.propTypes = propTypes$t;
 ModalPortal.defaultProps = defaultProps$t;
 
-var styles$l = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
-
 var propTypes$s = {
   id: PropTypes$1.string,
   title: PropTypes$1.string,
@@ -1688,7 +1688,7 @@ var Modal = function Modal(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$l.container, _defineProperty({}, styles$l[position], position !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$l.inner
+    className: classNames([styles$l.inner, 'bg-dark'])
   }, children)));
 };
 
@@ -1732,7 +1732,7 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', styles$k.header, {// 'bg-dark': theme === 'dark',
+    className: classNames(['modal-header', 'p-2', styles$k.header, {// 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1744,8 +1744,9 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-body', styles$k.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames(['modal-body', 'p-2', styles$k.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
+      // 'bg-dark': theme === 'dark',
     }])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['modal-footer', styles$k.footer])

package/es/hooks.js

@@ -736,6 +736,8 @@ var useMediaApi = function useMediaApi() {
       onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
       _ref$onSeeked = _ref.onSeeked,
       onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
+      _ref$onSuspended = _ref.onSuspended,
+      onSuspended = _ref$onSuspended === void 0 ? null : _ref$onSuspended,
       _ref$onLoadStart = _ref.onLoadStart,
       onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
       _ref$onCanPlayThough = _ref.onCanPlayThough,
@@ -784,6 +786,11 @@ var useMediaApi = function useMediaApi() {
       initialPlay = _useState14[0],
       setInitialPlay = _useState14[1];
 
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      suspended = _useState16[0],
+      setSuspended = _useState16[1];
+
   var progressStepsReached = useRef({});
   var paused = !playing; // Exposed methods
 
@@ -959,6 +966,13 @@ var useMediaApi = function useMediaApi() {
       onLoadedData();
     }
   }, [setDataReady, onLoadedData]);
+  var onCustomSuspended = useCallback(function () {
+    setSuspended(true);
+
+    if (onSuspended !== null) {
+      onSuspended();
+    }
+  }, [setDataReady, onLoadedData]);
   useEffect(function () {
     var _ref$current = ref.current,
         media = _ref$current === void 0 ? null : _ref$current; // console.log('actions', url);
@@ -987,7 +1001,7 @@ var useMediaApi = function useMediaApi() {
         // media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
       }
     };
-  }, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked // onCustomLoadStart,
+  }, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomSuspended // onCustomLoadStart,
   // onCustomCanPlayThrough,
   // onCustomCanPlay,
   // onCustomLoadedMetadata,
@@ -1002,6 +1016,7 @@ var useMediaApi = function useMediaApi() {
       media.addEventListener('canplay', onCustomCanPlay);
       media.addEventListener('loadedmetadata', onCustomLoadedMetadata);
       media.addEventListener('loadeddata', onCustomLoadedData);
+      media.addEventListener('suspend', onCustomSuspended);
     }
 
     return function () {
@@ -1010,9 +1025,10 @@ var useMediaApi = function useMediaApi() {
         media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
         media.removeEventListener('canplay', onCustomCanPlay);
         media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
+        media.removeEventListener('suspend', onCustomSuspended);
       }
     };
-  }, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata]); // Duration
+  }, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]); // Duration
 
   useEffect(function () {
     var _ref$current3 = ref.current,
@@ -1075,7 +1091,8 @@ var useMediaApi = function useMediaApi() {
     playing: playing,
     paused: paused,
     ready: ready,
-    dataReady: dataReady
+    dataReady: dataReady,
+    suspended: suspended
   };
 };
 

package/lib/components.js

@@ -1611,6 +1611,8 @@ ModalsContainer.propTypes = propTypes$v;
 ModalsContainer.defaultProps = defaultProps$v;
 var Modals = contexts.withModals(ModalsContainer);
 
+var styles$l = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
+
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$u = {
   id: PropTypes__default["default"].string,
@@ -1695,8 +1697,6 @@ var ModalPortal = function ModalPortal(_ref) {
 ModalPortal.propTypes = propTypes$t;
 ModalPortal.defaultProps = defaultProps$t;
 
-var styles$l = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
-
 var propTypes$s = {
   id: PropTypes__default["default"].string,
   title: PropTypes__default["default"].string,
@@ -1729,7 +1729,7 @@ var Modal = function Modal(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$l.container, _defineProperty__default["default"]({}, styles$l[position], position !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$l.inner
+    className: classNames__default["default"]([styles$l.inner, 'bg-dark'])
   }, children)));
 };
 
@@ -1773,7 +1773,7 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-header', styles$k.header, {// 'bg-dark': theme === 'dark',
+    className: classNames__default["default"](['modal-header', 'p-2', styles$k.header, {// 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1785,8 +1785,9 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-body', styles$k.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames__default["default"](['modal-body', 'p-2', styles$k.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
+      // 'bg-dark': theme === 'dark',
     }])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['modal-footer', styles$k.footer])

package/lib/hooks.js

@@ -772,6 +772,8 @@ var useMediaApi = function useMediaApi() {
       onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
       _ref$onSeeked = _ref.onSeeked,
       onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
+      _ref$onSuspended = _ref.onSuspended,
+      onSuspended = _ref$onSuspended === void 0 ? null : _ref$onSuspended,
       _ref$onLoadStart = _ref.onLoadStart,
       onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
       _ref$onCanPlayThough = _ref.onCanPlayThough,
@@ -820,6 +822,11 @@ var useMediaApi = function useMediaApi() {
       initialPlay = _useState14[0],
       setInitialPlay = _useState14[1];
 
+  var _useState15 = react.useState(false),
+      _useState16 = _slicedToArray__default["default"](_useState15, 2),
+      suspended = _useState16[0],
+      setSuspended = _useState16[1];
+
   var progressStepsReached = react.useRef({});
   var paused = !playing; // Exposed methods
 
@@ -995,6 +1002,13 @@ var useMediaApi = function useMediaApi() {
       onLoadedData();
     }
   }, [setDataReady, onLoadedData]);
+  var onCustomSuspended = react.useCallback(function () {
+    setSuspended(true);
+
+    if (onSuspended !== null) {
+      onSuspended();
+    }
+  }, [setDataReady, onLoadedData]);
   react.useEffect(function () {
     var _ref$current = ref.current,
         media = _ref$current === void 0 ? null : _ref$current; // console.log('actions', url);
@@ -1023,7 +1037,7 @@ var useMediaApi = function useMediaApi() {
         // media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
       }
     };
-  }, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked // onCustomLoadStart,
+  }, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomSuspended // onCustomLoadStart,
   // onCustomCanPlayThrough,
   // onCustomCanPlay,
   // onCustomLoadedMetadata,
@@ -1038,6 +1052,7 @@ var useMediaApi = function useMediaApi() {
       media.addEventListener('canplay', onCustomCanPlay);
       media.addEventListener('loadedmetadata', onCustomLoadedMetadata);
       media.addEventListener('loadeddata', onCustomLoadedData);
+      media.addEventListener('suspend', onCustomSuspended);
     }
 
     return function () {
@@ -1046,9 +1061,10 @@ var useMediaApi = function useMediaApi() {
         media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
         media.removeEventListener('canplay', onCustomCanPlay);
         media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
+        media.removeEventListener('suspend', onCustomSuspended);
       }
     };
-  }, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata]); // Duration
+  }, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]); // Duration
 
   react.useEffect(function () {
     var _ref$current3 = ref.current,
@@ -1111,7 +1127,8 @@ var useMediaApi = function useMediaApi() {
     playing: playing,
     paused: paused,
     ready: ready,
-    dataReady: dataReady
+    dataReady: dataReady,
+    suspended: suspended
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.126",
+    "version": "0.3.138",
     "description": "",
     "keywords": [
         "javascript"
@@ -106,7 +106,7 @@
         "@uppy/webcam": "^2.0.5",
         "@uppy/xhr-upload": "^2.0.7",
         "@use-gesture/react": "^10.2.4",
-        "bootstrap": "^5.1.0",
+        "bootstrap": "5.2.0-beta1",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
         "css-mediaquery": "^0.1.2",
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "079203c5850c4aa771bc4fa1c567d2db1bc3ee3d"
+    "gitHead": "6460d58f8b915076249a11089a5f662ac11830fa"
 }