@micromag/core 0.4.27 → 0.4.28

package/es/components.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { Link as Link$1 } from 'wouter';
 import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -14,7 +15,6 @@ 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, useFieldContext, withModals, useModals, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -172,7 +172,7 @@ function Button$1(_ref) {
 
 var styles$x = {"container":"micromag-core-buttons-container"};
 
-var _excluded$b = ["className", "onClick", "theme"];
+var _excluded$b = ["id", "name", "className", "onClick", "theme"];
 var emptyArray$a = [];
 function Buttons(_ref) {
   var _ref$buttons = _ref.buttons,
@@ -193,7 +193,9 @@ function Buttons(_ref) {
     className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
-    var _button$className = button.className,
+    var id = button.id;
+      button.name;
+      var _button$className = button.className,
       customClassName = _button$className === void 0 ? null : _button$className,
       _button$onClick = button.onClick,
       _onClick = _button$onClick === void 0 ? null : _button$onClick,
@@ -201,7 +203,6 @@ function Buttons(_ref) {
       buttonTheme = _button$theme === void 0 ? null : _button$theme,
       buttonProps = _objectWithoutProperties(button, _excluded$b);
     var fixedProps = {
-      key: "button-".concat(index),
       className: classNames([styles$x.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
@@ -213,7 +214,12 @@ function Buttons(_ref) {
       },
       theme: buttonTheme || theme
     };
-    return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
+    var buttonKey = id || "button-".concat(index);
+    return renderButton !== null ? renderButton(button, index, _objectSpread({
+      key: buttonKey
+    }, fixedProps)) : /*#__PURE__*/React.createElement(Button$1, Object.assign({
+      key: buttonKey
+    }, fixedProps, buttonProps));
   }));
 }
 
@@ -875,7 +881,6 @@ function PlayIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  console.log('color', color);
   return /*#__PURE__*/React.createElement("svg", {
     width: "40",
     height: "45.1",

package/es/contexts.d.ts

@@ -165,8 +165,8 @@ declare function PanelsProvider({ children, container: initialContainer }: {
 
 declare const PlaybackContext: any;
 declare const usePlaybackContext: () => unknown;
-declare const usePlaybackMediaRef: (active?: boolean, background?: boolean) => {
-    ref: React.RefObject<any>;
+declare const usePlaybackMediaRef: (active?: boolean, background?: boolean, updateKey?: any) => {
+    ref: React.RefObject<HTMLMediaElement>;
     isCurrent: boolean;
 };
 declare function PlaybackProvider({ muted: initialMuted, playing: initialPlaying, paused, controls: initialControls, controlsSuggestPlay: initialControlsSuggestPlay, controlsVisible: initialControlsVisible, controlsTheme: initialControlsTheme, currentQualityLevel: initialCurrentQualityLevel, children, }: {

package/es/contexts.js

@@ -1013,51 +1013,31 @@ var usePlaybackContext = function usePlaybackContext() {
 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 updateKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
     media = _usePlaybackContext.media;
   var mediaRef = useRef(null);
+
+  // Cleanup: only clear if this ref owns the current media registration
   useEffect(function () {
     return function () {
-      if (active) {
+      if (active && mediaRef.current !== null && mediaRef.current === media) {
         setMedia(null);
         setIsBackground(false);
       }
     };
-  }, [active]);
+  }, [active, setMedia, setIsBackground, media]);
+
+  // Register media with context when active and no media is registered
   useEffect(function () {
     if (!active || mediaRef.current === null || media !== null) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media]);
-
-  // const shouldSetMedia = active && media === null && mediaRef.current !== null;
-  // useEffect(
-  //     () => () => {
-  //         if (active) {
-  //             console.log('DESTROY unset media');
-  //             setMedia(null);
-  //             setIsBackground(false);
-  //         }
-  //     },
-  //     [active],
-  // );
-
-  // useEffect(() => {
-  //     if (active && mediaRef.current !== null && media === null) {
-  //         console.log('SET media');
-  //         setIsBackground(background);
-  //         setMedia(mediaRef.current);
-  //     } else if (!active && mediaRef.current === media && media !== null) {
-  //         console.log('Unset media');
-  //         setMedia(null);
-  //         setIsBackground(false);
-  //     }
-  // }, [active, background, media]);
-
+  }, [active, background, media, updateKey, setMedia, setIsBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/lib/components.js

@@ -9,6 +9,7 @@ var classNames = require('classnames');
 var wouter = require('wouter');
 var reactIntl = require('react-intl');
 var utils = require('@micromag/core/utils');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var faClose = require('@fortawesome/free-solid-svg-icons/faClose');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
@@ -16,7 +17,6 @@ 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');
@@ -174,7 +174,7 @@ function Button$1(_ref) {
 
 var styles$x = {"container":"micromag-core-buttons-container"};
 
-var _excluded$b = ["className", "onClick", "theme"];
+var _excluded$b = ["id", "name", "className", "onClick", "theme"];
 var emptyArray$a = [];
 function Buttons(_ref) {
   var _ref$buttons = _ref.buttons,
@@ -195,7 +195,9 @@ function Buttons(_ref) {
     className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
-    var _button$className = button.className,
+    var id = button.id;
+      button.name;
+      var _button$className = button.className,
       customClassName = _button$className === void 0 ? null : _button$className,
       _button$onClick = button.onClick,
       _onClick = _button$onClick === void 0 ? null : _button$onClick,
@@ -203,7 +205,6 @@ function Buttons(_ref) {
       buttonTheme = _button$theme === void 0 ? null : _button$theme,
       buttonProps = _objectWithoutProperties(button, _excluded$b);
     var fixedProps = {
-      key: "button-".concat(index),
       className: classNames([styles$x.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
@@ -215,7 +216,12 @@ function Buttons(_ref) {
       },
       theme: buttonTheme || theme
     };
-    return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
+    var buttonKey = id || "button-".concat(index);
+    return renderButton !== null ? renderButton(button, index, _objectSpread({
+      key: buttonKey
+    }, fixedProps)) : /*#__PURE__*/React.createElement(Button$1, Object.assign({
+      key: buttonKey
+    }, fixedProps, buttonProps));
   }));
 }
 
@@ -877,7 +883,6 @@ function PlayIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  console.log('color', color);
   return /*#__PURE__*/React.createElement("svg", {
     width: "40",
     height: "45.1",

package/lib/contexts.js

@@ -1013,51 +1013,31 @@ var usePlaybackContext = function usePlaybackContext() {
 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 updateKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
     media = _usePlaybackContext.media;
   var mediaRef = React.useRef(null);
+
+  // Cleanup: only clear if this ref owns the current media registration
   React.useEffect(function () {
     return function () {
-      if (active) {
+      if (active && mediaRef.current !== null && mediaRef.current === media) {
         setMedia(null);
         setIsBackground(false);
       }
     };
-  }, [active]);
+  }, [active, setMedia, setIsBackground, media]);
+
+  // Register media with context when active and no media is registered
   React.useEffect(function () {
     if (!active || mediaRef.current === null || media !== null) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media]);
-
-  // const shouldSetMedia = active && media === null && mediaRef.current !== null;
-  // useEffect(
-  //     () => () => {
-  //         if (active) {
-  //             console.log('DESTROY unset media');
-  //             setMedia(null);
-  //             setIsBackground(false);
-  //         }
-  //     },
-  //     [active],
-  // );
-
-  // useEffect(() => {
-  //     if (active && mediaRef.current !== null && media === null) {
-  //         console.log('SET media');
-  //         setIsBackground(background);
-  //         setMedia(mediaRef.current);
-  //     } else if (!active && mediaRef.current === media && media !== null) {
-  //         console.log('Unset media');
-  //         setMedia(null);
-  //         setIsBackground(false);
-  //     }
-  // }, [active, background, media]);
-
+  }, [active, background, media, updateKey, setMedia, setIsBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.27",
+    "version": "0.4.28",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "7541e15e6fe1950d19247a338aaad3d6943ac994",
+    "gitHead": "1b14d4403eb5decff05346870eb849a96f636604",
     "types": "es/index.d.ts"
 }