@micromag/viewer 0.3.333 → 0.3.335

package/es/index.js

@@ -1983,16 +1983,25 @@ SeekBar.defaultProps = defaultProps$5;
 var styles$1 = {"playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
 
 var propTypes$4 = {
+  defaultColor: PropTypes.shape({
+    color: PropTypes.string,
+    alpha: PropTypes.number
+  }),
   className: PropTypes.string,
   collapsedClassName: PropTypes.string
 };
 var defaultProps$4 = {
+  defaultColor: {
+    color: '#000000',
+    alpha: 1
+  },
   className: null,
   collapsedClassName: null
 };
 function PlaybackControls(_ref) {
   var _ref4;
-  var className = _ref.className,
+  var defaultColor = _ref.defaultColor,
+    className = _ref.className,
     collapsedClassName = _ref.collapsedClassName;
   var intl = useIntl();
   var _usePlaybackContext = usePlaybackContext(),
@@ -2010,7 +2019,11 @@ function PlaybackControls(_ref) {
     controlsVisible = _usePlaybackContext.controlsVisible,
     controlsTheme = _usePlaybackContext.controlsTheme,
     showControls = _usePlaybackContext.showControls;
-  var _useState = useState(null),
+  var _useState = useState({
+      color: getColorAsString(defaultColor),
+      progressColor: getColorAsString(defaultColor),
+      seekBarOnly: false
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     customControlsTheme = _useState2[0],
     setCustomControlsTheme = _useState2[1];
@@ -2024,11 +2037,11 @@ function PlaybackControls(_ref) {
       progressColor = _ref2.progressColor,
       seekBarOnly = _ref2.seekBarOnly;
     setCustomControlsTheme({
-      color: getColorAsString(color),
-      progressColor: getColorAsString(progressColor),
+      color: getColorAsString(color || defaultColor),
+      progressColor: getColorAsString(progressColor || defaultColor),
       seekBarOnly: seekBarOnly
     });
-  }, [controlsTheme, setCustomControlsTheme]);
+  }, [controlsTheme, setCustomControlsTheme, defaultColor]);
   var onPlay = useCallback(function () {
     setPlaying(true);
     if (!controlsVisible && controls) {
@@ -2097,14 +2110,15 @@ function PlaybackControls(_ref) {
       width: "10px",
       height: "16px",
       viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
-      fill: "currentColor"
+      xmlSpace: "preserve"
     }, /*#__PURE__*/React.createElement("rect", {
+      fill: color,
       x: "1",
       y: "3.27",
       width: "3",
       height: "9.69"
     }), /*#__PURE__*/React.createElement("rect", {
+      fill: color,
       x: "6",
       y: "3.27",
       width: "3",
@@ -2118,9 +2132,9 @@ function PlaybackControls(_ref) {
       width: "10px",
       height: "16px",
       viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
-      fill: "currentColor"
+      xmlSpace: "preserve"
     }, /*#__PURE__*/React.createElement("path", {
+      fill: color,
       d: "M1,3.16V12.84l8-4.84L1,3.16"
     })),
     "aria-label": playing ? intl.formatMessage({
@@ -2164,11 +2178,12 @@ function PlaybackControls(_ref) {
       height: "16px",
       viewBox: "0 0 10 16",
       xmlSpace: "preserve",
-      className: styles$1.icon,
-      fill: "currentColor"
+      className: styles$1.icon
     }, /*#__PURE__*/React.createElement("polygon", {
+      fill: color,
       points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
     }), /*#__PURE__*/React.createElement("polygon", {
+      fill: color,
       points: "10 6.63 8.94 5.57 7.58 6.93 6.21 5.57 5.15 6.63 6.52 7.99 5.15 9.35 6.21 10.43 7.58 9.06 8.94 10.43 10 9.35 8.64 7.99 10 6.63"
     })) : /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2179,15 +2194,17 @@ function PlaybackControls(_ref) {
       height: "16px",
       viewBox: "0 0 10 16",
       xmlSpace: "preserve",
-      className: styles$1.icon,
-      fill: "currentColor"
+      className: styles$1.icon
     }, /*#__PURE__*/React.createElement("polygon", {
+      fill: color,
       points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
     }), /*#__PURE__*/React.createElement("circle", {
+      fill: color,
       cx: "6.14",
       cy: "8",
       r: ".99"
     }), /*#__PURE__*/React.createElement("path", {
+      fill: color,
       d: "M6.14,11.88v-1.5c1.31,0,2.38-1.07,2.38-2.38s-1.07-2.38-2.38-2.38v-1.5c2.14,0,3.88,1.74,3.88,3.88s-1.74,3.88-3.88,3.88Z"
     })),
     "aria-label": muted ? intl.formatMessage({

package/lib/index.js

@@ -2003,16 +2003,25 @@ SeekBar.defaultProps = defaultProps$5;
 var styles$1 = {"playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
 
 var propTypes$4 = {
+  defaultColor: PropTypes__default["default"].shape({
+    color: PropTypes__default["default"].string,
+    alpha: PropTypes__default["default"].number
+  }),
   className: PropTypes__default["default"].string,
   collapsedClassName: PropTypes__default["default"].string
 };
 var defaultProps$4 = {
+  defaultColor: {
+    color: '#000000',
+    alpha: 1
+  },
   className: null,
   collapsedClassName: null
 };
 function PlaybackControls(_ref) {
   var _ref4;
-  var className = _ref.className,
+  var defaultColor = _ref.defaultColor,
+    className = _ref.className,
     collapsedClassName = _ref.collapsedClassName;
   var intl = reactIntl.useIntl();
   var _usePlaybackContext = contexts.usePlaybackContext(),
@@ -2030,7 +2039,11 @@ function PlaybackControls(_ref) {
     controlsVisible = _usePlaybackContext.controlsVisible,
     controlsTheme = _usePlaybackContext.controlsTheme,
     showControls = _usePlaybackContext.showControls;
-  var _useState = React.useState(null),
+  var _useState = React.useState({
+      color: utils.getColorAsString(defaultColor),
+      progressColor: utils.getColorAsString(defaultColor),
+      seekBarOnly: false
+    }),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     customControlsTheme = _useState2[0],
     setCustomControlsTheme = _useState2[1];
@@ -2044,11 +2057,11 @@ function PlaybackControls(_ref) {
       progressColor = _ref2.progressColor,
       seekBarOnly = _ref2.seekBarOnly;
     setCustomControlsTheme({
-      color: utils.getColorAsString(color),
-      progressColor: utils.getColorAsString(progressColor),
+      color: utils.getColorAsString(color || defaultColor),
+      progressColor: utils.getColorAsString(progressColor || defaultColor),
       seekBarOnly: seekBarOnly
     });
-  }, [controlsTheme, setCustomControlsTheme]);
+  }, [controlsTheme, setCustomControlsTheme, defaultColor]);
   var onPlay = React.useCallback(function () {
     setPlaying(true);
     if (!controlsVisible && controls) {
@@ -2117,14 +2130,15 @@ function PlaybackControls(_ref) {
       width: "10px",
       height: "16px",
       viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
-      fill: "currentColor"
+      xmlSpace: "preserve"
     }, /*#__PURE__*/React__default["default"].createElement("rect", {
+      fill: color,
       x: "1",
       y: "3.27",
       width: "3",
       height: "9.69"
     }), /*#__PURE__*/React__default["default"].createElement("rect", {
+      fill: color,
       x: "6",
       y: "3.27",
       width: "3",
@@ -2138,9 +2152,9 @@ function PlaybackControls(_ref) {
       width: "10px",
       height: "16px",
       viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
-      fill: "currentColor"
+      xmlSpace: "preserve"
     }, /*#__PURE__*/React__default["default"].createElement("path", {
+      fill: color,
       d: "M1,3.16V12.84l8-4.84L1,3.16"
     })),
     "aria-label": playing ? intl.formatMessage({
@@ -2184,11 +2198,12 @@ function PlaybackControls(_ref) {
       height: "16px",
       viewBox: "0 0 10 16",
       xmlSpace: "preserve",
-      className: styles$1.icon,
-      fill: "currentColor"
+      className: styles$1.icon
     }, /*#__PURE__*/React__default["default"].createElement("polygon", {
+      fill: color,
       points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
     }), /*#__PURE__*/React__default["default"].createElement("polygon", {
+      fill: color,
       points: "10 6.63 8.94 5.57 7.58 6.93 6.21 5.57 5.15 6.63 6.52 7.99 5.15 9.35 6.21 10.43 7.58 9.06 8.94 10.43 10 9.35 8.64 7.99 10 6.63"
     })) : /*#__PURE__*/React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2199,15 +2214,17 @@ function PlaybackControls(_ref) {
       height: "16px",
       viewBox: "0 0 10 16",
       xmlSpace: "preserve",
-      className: styles$1.icon,
-      fill: "currentColor"
+      className: styles$1.icon
     }, /*#__PURE__*/React__default["default"].createElement("polygon", {
+      fill: color,
       points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
     }), /*#__PURE__*/React__default["default"].createElement("circle", {
+      fill: color,
       cx: "6.14",
       cy: "8",
       r: ".99"
     }), /*#__PURE__*/React__default["default"].createElement("path", {
+      fill: color,
       d: "M6.14,11.88v-1.5c1.31,0,2.38-1.07,2.38-2.38s-1.07-2.38-2.38-2.38v-1.5c2.14,0,3.88,1.74,3.88,3.88s-1.74,3.88-3.88,3.88Z"
     })),
     "aria-label": muted ? intl.formatMessage({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.333",
+    "version": "0.3.335",
     "description": "",
     "keywords": [
         "javascript"
@@ -63,10 +63,10 @@
         "@micromag/element-scroll": "^0.3.332",
         "@micromag/element-share-options": "^0.3.332",
         "@micromag/element-webview": "^0.3.332",
-        "@micromag/elements": "^0.3.332",
-        "@micromag/fields": "^0.3.333",
+        "@micromag/elements": "^0.3.335",
+        "@micromag/fields": "^0.3.335",
         "@micromag/intl": "^0.3.333",
-        "@micromag/screens": "^0.3.332",
+        "@micromag/screens": "^0.3.335",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.2.4",
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2623c05c1b9db8f5d547b39636cee5782e9bc881"
+    "gitHead": "2d4617589f6091803cee6d5614c61297bba3bdc6"
 }