@micromag/core 0.3.459 → 0.3.460

package/es/components.js

@@ -1084,14 +1084,14 @@ var PlayIcon = function PlayIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
-    width: "20",
-    height: "23",
-    viewBox: "0 0 20 23",
+    width: "40",
+    height: "45.1",
+    viewBox: "0 0 40 45.1",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M16.25 12.5574L2.74999 20.3516C1.74999 20.9289 0.499993 20.2073 0.499993 19.0526L0.499994 3.4641C0.499994 2.3094 1.74999 1.58771 2.74999 2.16506L16.25 9.95929C17.25 10.5366 17.25 11.98 16.25 12.5574Z",
+    d: "M38.2,25.7L5.5,44.6C3,46,0,44.2,0,41.4L0,3.6c0-2.8,3-4.5,5.5-3.1l32.7,18.9C40.6,20.8,40.6,24.3,38.2,25.7z",
     fill: color,
     stroke: color
   }));

package/es/contexts.js

@@ -825,6 +825,7 @@ var defaultValue$1 = {
   paused: false,
   muted: true,
   controls: false,
+  controlsSuggestPlay: false,
   controlsVisible: false,
   media: null,
   controlsTheme: defaultControlsThemeValue
@@ -862,6 +863,7 @@ var usePlaybackMediaRef = function usePlaybackMediaRef(active) {
 var propTypes$7 = {
   children: PropTypes.node.isRequired,
   controls: PropTypes.bool,
+  controlsSuggestPlay: PropTypes.bool,
   controlsVisible: PropTypes.bool,
   controlsTheme: PropTypes.shape({
     seekBarOnly: PropTypes.bool,
@@ -878,6 +880,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     initialPlaying = _ref.playing,
     paused = _ref.paused,
     initialControls = _ref.controls,
+    initialControlsSuggestPlay = _ref.controlsSuggestPlay,
     initialControlsVisible = _ref.controlsVisible,
     initialControlsTheme = _ref.controlsTheme,
     children = _ref.children;
@@ -897,26 +900,43 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     controls = _useState8[0],
     setControls = _useState8[1];
-  var _useState9 = useState(initialControlsVisible),
+  var _useState9 = useState(initialControlsSuggestPlay),
     _useState10 = _slicedToArray(_useState9, 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];
+    controlsVisible = _useState12[0],
+    setControlsVisible = _useState12[1];
+  var _useState13 = useState(initialControlsTheme),
+    _useState14 = _slicedToArray(_useState13, 2),
+    controlsTheme = _useState14[0],
+    setControlsTheme = _useState14[1];
   var finalSetControls = useCallback(function (newControls) {
     if (newControls) {
       setControls(true);
       setControlsVisible(true);
+      setControlsSuggestPlay(false);
     } else {
       setControls(false);
       setControlsVisible(false);
+      setControlsSuggestPlay(false);
     }
-  }, [setControls, setControlsVisible]);
+  }, [setControls, setControlsVisible, setControlsSuggestPlay]);
   var finalSetControlsTheme = useCallback(function (newTheme) {
     setControlsTheme(_objectSpread(_objectSpread({}, defaultControlsThemeValue), newTheme));
   }, [setControlsTheme]);
+  var finalSetPlaying = useCallback(function (value) {
+    if (value) {
+      setControlsSuggestPlay(false);
+    }
+    setPlaying(value);
+  }, [setPlaying, setControlsSuggestPlay]);
+
+  // Reset on media change
+  useEffect(function () {
+    setControlsSuggestPlay(false);
+  }, [media, setControlsSuggestPlay]);
   var showControls = useCallback(function () {
     return setControlsVisible(true);
   }, [setControlsVisible]);
@@ -940,20 +960,22 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       muted: muted,
       playing: playing && !paused,
       controls: controls,
+      controlsSuggestPlay: controlsSuggestPlay,
       controlsVisible: controlsVisible,
       media: media,
       hasAudio: hasAudio,
       controlsTheme: controlsTheme,
       setMuted: setMuted,
-      setPlaying: setPlaying,
+      setPlaying: finalSetPlaying,
       setControls: finalSetControls,
+      setControlsSuggestPlay: setControlsSuggestPlay,
       setControlsVisible: setControlsVisible,
       setControlsTheme: finalSetControlsTheme,
       showControls: showControls,
       hideControls: hideControls,
       setMedia: setMedia
     };
-  }, [muted, playing, paused, controls, controlsVisible, controlsTheme, media, hasAudio, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
+  }, [muted, playing, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

package/lib/components.js

@@ -1086,14 +1086,14 @@ var PlayIcon = function PlayIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
-    width: "20",
-    height: "23",
-    viewBox: "0 0 20 23",
+    width: "40",
+    height: "45.1",
+    viewBox: "0 0 40 45.1",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M16.25 12.5574L2.74999 20.3516C1.74999 20.9289 0.499993 20.2073 0.499993 19.0526L0.499994 3.4641C0.499994 2.3094 1.74999 1.58771 2.74999 2.16506L16.25 9.95929C17.25 10.5366 17.25 11.98 16.25 12.5574Z",
+    d: "M38.2,25.7L5.5,44.6C3,46,0,44.2,0,41.4L0,3.6c0-2.8,3-4.5,5.5-3.1l32.7,18.9C40.6,20.8,40.6,24.3,38.2,25.7z",
     fill: color,
     stroke: color
   }));

package/lib/contexts.js

@@ -826,6 +826,7 @@ var defaultValue$1 = {
   paused: false,
   muted: true,
   controls: false,
+  controlsSuggestPlay: false,
   controlsVisible: false,
   media: null,
   controlsTheme: defaultControlsThemeValue
@@ -863,6 +864,7 @@ var usePlaybackMediaRef = function usePlaybackMediaRef(active) {
 var propTypes$7 = {
   children: PropTypes.node.isRequired,
   controls: PropTypes.bool,
+  controlsSuggestPlay: PropTypes.bool,
   controlsVisible: PropTypes.bool,
   controlsTheme: PropTypes.shape({
     seekBarOnly: PropTypes.bool,
@@ -879,6 +881,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     initialPlaying = _ref.playing,
     paused = _ref.paused,
     initialControls = _ref.controls,
+    initialControlsSuggestPlay = _ref.controlsSuggestPlay,
     initialControlsVisible = _ref.controlsVisible,
     initialControlsTheme = _ref.controlsTheme,
     children = _ref.children;
@@ -898,26 +901,43 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     controls = _useState8[0],
     setControls = _useState8[1];
-  var _useState9 = React.useState(initialControlsVisible),
+  var _useState9 = React.useState(initialControlsSuggestPlay),
     _useState10 = _slicedToArray(_useState9, 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];
+    controlsVisible = _useState12[0],
+    setControlsVisible = _useState12[1];
+  var _useState13 = React.useState(initialControlsTheme),
+    _useState14 = _slicedToArray(_useState13, 2),
+    controlsTheme = _useState14[0],
+    setControlsTheme = _useState14[1];
   var finalSetControls = React.useCallback(function (newControls) {
     if (newControls) {
       setControls(true);
       setControlsVisible(true);
+      setControlsSuggestPlay(false);
     } else {
       setControls(false);
       setControlsVisible(false);
+      setControlsSuggestPlay(false);
     }
-  }, [setControls, setControlsVisible]);
+  }, [setControls, setControlsVisible, setControlsSuggestPlay]);
   var finalSetControlsTheme = React.useCallback(function (newTheme) {
     setControlsTheme(_objectSpread(_objectSpread({}, defaultControlsThemeValue), newTheme));
   }, [setControlsTheme]);
+  var finalSetPlaying = React.useCallback(function (value) {
+    if (value) {
+      setControlsSuggestPlay(false);
+    }
+    setPlaying(value);
+  }, [setPlaying, setControlsSuggestPlay]);
+
+  // Reset on media change
+  React.useEffect(function () {
+    setControlsSuggestPlay(false);
+  }, [media, setControlsSuggestPlay]);
   var showControls = React.useCallback(function () {
     return setControlsVisible(true);
   }, [setControlsVisible]);
@@ -941,20 +961,22 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       muted: muted,
       playing: playing && !paused,
       controls: controls,
+      controlsSuggestPlay: controlsSuggestPlay,
       controlsVisible: controlsVisible,
       media: media,
       hasAudio: hasAudio,
       controlsTheme: controlsTheme,
       setMuted: setMuted,
-      setPlaying: setPlaying,
+      setPlaying: finalSetPlaying,
       setControls: finalSetControls,
+      setControlsSuggestPlay: setControlsSuggestPlay,
       setControlsVisible: setControlsVisible,
       setControlsTheme: finalSetControlsTheme,
       showControls: showControls,
       hideControls: hideControls,
       setMedia: setMedia
     };
-  }, [muted, playing, paused, controls, controlsVisible, controlsTheme, media, hasAudio, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
+  }, [muted, playing, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.459",
+    "version": "0.3.460",
     "private": false,
     "description": "",
     "keywords": [
@@ -155,5 +155,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4432e89197f9cebdc6b0c4c39ba65100fb5e0939"
+    "gitHead": "7e5a6ed3d80be59cdd74716781b467be88a4ccc6"
 }