@micromag/core 0.3.459 → 0.3.463

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/es/hooks.js

@@ -16,6 +16,7 @@ import screenfull from 'screenfull';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
+import createDebug from 'debug';
 import raf from 'raf';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
 import { match } from 'css-mediaquery';
@@ -972,6 +973,10 @@ var useMediaApi = function useMediaApi() {
     setPlaying(true);
     setSuspended(false);
   }, [initialPlay, setPlaying, onPlay]);
+  var onCustomPlaying = useCallback(function () {
+    setPlaying(true);
+    setSuspended(false);
+  }, []);
   var onCustomPause = useCallback(function (e) {
     var eventMedia = e.currentTarget;
     setPlaying(false);
@@ -1072,6 +1077,7 @@ var useMediaApi = function useMediaApi() {
     if (media !== null) {
       media.addEventListener('volumechange', onCustomVolumeChange);
       media.addEventListener('play', onCustomPlay);
+      media.addEventListener('playing', onCustomPlaying);
       media.addEventListener('pause', onCustomPause);
       media.addEventListener('ended', onCustomEnded);
       media.addEventListener('seeked', onCustomSeeked);
@@ -1085,6 +1091,7 @@ var useMediaApi = function useMediaApi() {
       if (media !== null) {
         media.removeEventListener('volumechange', onCustomVolumeChange);
         media.removeEventListener('play', onCustomPlay);
+        media.removeEventListener('playing', onCustomPlaying);
         media.removeEventListener('pause', onCustomPause);
         media.removeEventListener('ended', onCustomEnded);
         media.removeEventListener('seeked', onCustomSeeked);
@@ -1180,6 +1187,232 @@ var useMediaApi = function useMediaApi() {
   };
 };
 
+var useMediaBuffering = function useMediaBuffering() {
+  var mediaElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    buffering = _useState2[0],
+    setBuffering = _useState2[1];
+  useEffect(function () {
+    if (mediaElement === null) {
+      return function () {};
+    }
+    function onBufferingEvent(e) {
+      // networkstate
+      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
+        // The user agent is actively trying to download data.
+        console.log('buffering? NETWORK_LOADING', e);
+        setBuffering(true);
+      }
+
+      // readystate
+      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
+        // There is not enough data to keep playing from this point
+        console.log('buffering? You have very little data', e);
+        setBuffering(true);
+      }
+    }
+    function onPlay() {
+      setBuffering(false);
+    }
+    function onPlaying() {
+      setBuffering(false);
+    }
+    function onPause() {
+      setBuffering(false);
+    }
+    function onEnded() {
+      setBuffering(false);
+    }
+    mediaElement.addEventListener('waiting', onBufferingEvent);
+    mediaElement.addEventListener('stalled', onBufferingEvent);
+    mediaElement.addEventListener('play', onPlay);
+    mediaElement.addEventListener('playing', onPlaying);
+    mediaElement.addEventListener('pause', onPause);
+    mediaElement.addEventListener('ended', onEnded);
+    return function () {
+      mediaElement.removeEventListener('waiting', onBufferingEvent);
+      mediaElement.removeEventListener('stalled', onBufferingEvent);
+      mediaElement.removeEventListener('play', onPlay);
+      mediaElement.removeEventListener('playing', onPlaying);
+      mediaElement.removeEventListener('pause', onPause);
+      mediaElement.removeEventListener('ended', onEnded);
+    };
+  }, [mediaElement]);
+
+  // useEffect(() => {
+  //     if (mediaElement === null) {
+  //         return () => {};
+  //     }
+  //     let lastPlayPos = 0;
+  //     let currentPlayPos = 0;
+  //     let bufferingDetected = false;
+
+  //     function checkBuffering(player, checkInterval) {
+  //         currentPlayPos = player.currentTime;
+
+  //         // checking offset should be at most the check interval
+  //         // but allow for some margin
+  //         const offset = (checkInterval - 20) / 1000;
+
+  //         // if no buffering is currently detected,
+  //         // and the position does not seem to increase
+  //         // and the player isn't manually paused...
+  //         if (!bufferingDetected && currentPlayPos < lastPlayPos + offset && !player.paused) {
+  //             console.log('buffering!');
+  //             bufferingDetected = true;
+  //         }
+
+  //         // if we were buffering but the player has advanced,
+  //         // then there is no buffering
+  //         if (bufferingDetected && currentPlayPos > lastPlayPos + offset && !player.paused) {
+  //             console.log('not buffering anymore!');
+  //             bufferingDetected = false;
+  //         }
+  //         lastPlayPos = currentPlayPos;
+
+  //         return bufferingDetected;
+  //     }
+
+  //     const id = setInterval(() => {
+  //         setBuffering(checkBuffering(mediaElement, interval));
+  //     }, interval);
+
+  //     return () => {
+  //         clearInterval(id);
+  //     };
+  // }, [mediaElement, interval]);
+
+  return {
+    buffering: buffering
+  };
+};
+
+var useMediaState = function useMediaState() {
+  var mediaElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$playing = _ref.playing,
+    wantedPlaying = _ref$playing === void 0 ? false : _ref$playing,
+    _ref$muted = _ref.muted,
+    wantedMuted = _ref$muted === void 0 ? false : _ref$muted;
+  var debug = useMemo(function () {
+    var mediaKey = mediaElement !== null && isString(mediaElement.src) ? mediaElement.src.split('/')[mediaElement.src.split('/').length - 1].split('#')[0] || null : null;
+    return createDebug(mediaKey !== null ? "micromag:media:".concat(mediaKey) : 'micromag:media');
+  }, [mediaElement]);
+  var _useState = useState(wantedPlaying),
+    _useState2 = _slicedToArray(_useState, 2),
+    playing = _useState2[0],
+    setPlaying = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    buffering = _useState4[0],
+    setBuffering = _useState4[1];
+  var _useState5 = useState(mediaElement !== null && (mediaElement.muted || mediaElement.volume === 0) || wantedMuted),
+    _useState6 = _slicedToArray(_useState5, 2),
+    muted = _useState6[0],
+    setMuted = _useState6[1];
+  useEffect(function () {
+    debug('State change %o', {
+      playing: playing,
+      buffering: buffering,
+      muted: muted
+    });
+  }, [playing, buffering, muted, debug]);
+  useEffect(function () {
+    if (mediaElement === null) {
+      setPlaying(wantedPlaying);
+      setBuffering(false);
+      setMuted(wantedMuted);
+      debug('Unset media: %o', {
+        wantedPlaying: wantedPlaying,
+        wantedMuted: wantedMuted
+      });
+    }
+  }, [mediaElement, debug, wantedPlaying, wantedMuted]);
+  useEffect(function () {
+    if (mediaElement === null) {
+      return function () {};
+    }
+    function onBufferingEvent(e) {
+      // networkstate
+      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
+        debug('onBufferingEvent: NETWORK_LOADING');
+        setBuffering(true);
+      }
+
+      // readystate
+      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
+        debug('onBufferingEvent: HAVE_FUTURE_DATA');
+        setBuffering(true);
+      }
+    }
+    function onPlay() {
+      debug('onPlay');
+      setPlaying(true);
+      setBuffering(false);
+    }
+    function onPlaying() {
+      debug('onPlaying');
+      setPlaying(true);
+      setBuffering(false);
+    }
+    function onTimeUpdate(e) {
+      debug('onTimeUpdate');
+      setPlaying(!e.currentTarget.paused && !e.currentTarget.ended);
+      setBuffering(false);
+    }
+    function onPause() {
+      debug('onPause');
+      setPlaying(false);
+      setBuffering(false);
+    }
+    function onEnded() {
+      debug('onEnded');
+      setPlaying(false);
+      setBuffering(false);
+    }
+    function onSuspend(e) {
+      debug('onSuspend');
+      setPlaying(!e.currentTarget.paused && !e.currentTarget.ended);
+      setBuffering(false);
+    }
+    function onVolumeChange() {
+      setMuted(mediaElement.muted || mediaElement.volume === 0);
+    }
+    if (mediaElement.paused || mediaElement.ended) {
+      setPlaying(false);
+    }
+    if (muted !== mediaElement.muted) {
+      setMuted(mediaElement.muted);
+    }
+    mediaElement.addEventListener('waiting', onBufferingEvent);
+    mediaElement.addEventListener('stalled', onBufferingEvent);
+    mediaElement.addEventListener('timeupdate', onTimeUpdate);
+    mediaElement.addEventListener('play', onPlay);
+    mediaElement.addEventListener('playing', onPlaying);
+    mediaElement.addEventListener('pause', onPause);
+    mediaElement.addEventListener('suspend', onSuspend);
+    mediaElement.addEventListener('ended', onEnded);
+    mediaElement.addEventListener('volumechange', onVolumeChange);
+    return function () {
+      mediaElement.removeEventListener('waiting', onBufferingEvent);
+      mediaElement.removeEventListener('stalled', onBufferingEvent);
+      mediaElement.removeEventListener('timeupdate', onTimeUpdate);
+      mediaElement.removeEventListener('play', onPlay);
+      mediaElement.removeEventListener('playing', onPlaying);
+      mediaElement.removeEventListener('pause', onPause);
+      mediaElement.removeEventListener('suspend', onSuspend);
+      mediaElement.removeEventListener('ended', onEnded);
+      mediaElement.removeEventListener('volumechange', onVolumeChange);
+    };
+  }, [mediaElement, debug]);
+  return {
+    playing: playing,
+    muted: muted,
+    buffering: buffering
+  };
+};
+
 function useMediaCurrentTime(element) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$id = _ref.id,
@@ -1347,28 +1580,31 @@ function useMediaProgress(media) {
     if (media === null) {
       return function () {};
     }
-    function onResume() {
-      if (!playing) {
-        setPlaying(true);
-      }
-      updateProgress(media.currentTime / media.duration);
+    function onResume(e) {
+      setPlaying(true);
+      var newProgress = media.currentTime / media.duration;
+      updateProgress(newProgress);
+    }
+    function onUpdate(e) {
+      setPlaying(!e.currentTarget.paused && !e.currentTarget.ended);
+      var newProgress = media.currentTime / media.duration;
+      updateProgress(newProgress);
     }
     function onPause() {
-      if (playing) {
-        setPlaying(false);
-      }
-      updateProgress(media.currentTime / media.duration);
+      setPlaying(false);
+      var newProgress = media.currentTime / media.duration;
+      updateProgress(newProgress);
     }
     media.addEventListener('play', onResume);
-    media.addEventListener('seeked', onResume);
     media.addEventListener('playing', onResume);
-    // media.addEventListener('timeupdate', onResume);
+    media.addEventListener('seeked', onUpdate);
+    // media.addEventListener('timeupdate', onUpdate);
     media.addEventListener('pause', onPause);
     media.addEventListener('ended', onPause);
     media.addEventListener('waiting', onPause);
     media.addEventListener('stalled', onPause);
     media.addEventListener('seeking', onPause);
-    // media.addEventListener('suspend', onPause);
+    media.addEventListener('suspend', onUpdate);
     // if (media.paused) {
     //     onPause();
     // } else {
@@ -1384,7 +1620,7 @@ function useMediaProgress(media) {
       media.removeEventListener('waiting', onPause);
       media.removeEventListener('stalled', onPause);
       media.removeEventListener('seeking', onPause);
-      // media.removeEventListener('suspend', onPause);
+      media.removeEventListener('suspend', onUpdate);
     };
   }, [media, updateProgress, setPlaying, playing]);
   useEffect(function () {
@@ -1399,9 +1635,8 @@ function useMediaProgress(media) {
       }
       var newTime = Date.now() / 1000;
       var elapsed = newTime - updateTimeRef.current;
-      updateTimeRef.current = newTime;
       var step = elapsed / duration;
-      var newProgress = realProgressRef.current + step;
+      var newProgress = realProgressRef.current < 0.1 ? media.currentTime / media.duration : realProgressRef.current + step;
       updateProgress(newProgress);
       handle = raf(tick);
     }
@@ -2103,4 +2338,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/index.js

@@ -9,8 +9,8 @@ import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import uniqWith from 'lodash/uniqWith';
 import sortBy from 'lodash/sortBy';
+import _callSuper from '@babel/runtime/helpers/callSuper';
 import _inherits from '@babel/runtime/helpers/inherits';
-import _createSuper from '@babel/runtime/helpers/createSuper';
 import EventEmitter from 'wolfy87-eventemitter';
 import 'lodash/isNumber';
 import '@babel/runtime/helpers/regeneratorRuntime';
@@ -1012,12 +1012,11 @@ var getComponentFromName = function getComponentFromName() {
 
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits(ComponentsManager, _EventEmitter);
-  var _super = _createSuper(ComponentsManager);
   function ComponentsManager() {
     var _this;
     var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, ComponentsManager);
-    _this = _super.call(this);
+    _this = _callSuper(this, ComponentsManager);
     _this.components = components;
     return _this;
   }
@@ -1086,12 +1085,11 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
 
 var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits(DefinitionsManager, _EventEmitter);
-  var _super = _createSuper(DefinitionsManager);
   function DefinitionsManager() {
     var _this;
     var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     _classCallCheck(this, DefinitionsManager);
-    _this = _super.call(this);
+    _this = _callSuper(this, DefinitionsManager);
     _this.definitions = definitions || [];
     return _this;
   }
@@ -1166,11 +1164,10 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
 
 var EventsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits(EventsManager, _EventEmitter);
-  var _super = _createSuper(EventsManager);
   function EventsManager(element) {
     var _this;
     _classCallCheck(this, EventsManager);
-    _this = _super.call(this);
+    _this = _callSuper(this, EventsManager);
     _this.element = element;
     _this.events = {};
     _this.listeners = {};
@@ -1228,10 +1225,9 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
 
 var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   _inherits(FieldsManager, _DefinitionsManager);
-  var _super = _createSuper(FieldsManager);
   function FieldsManager() {
     _classCallCheck(this, FieldsManager);
-    return _super.apply(this, arguments);
+    return _callSuper(this, FieldsManager, arguments);
   }
   _createClass(FieldsManager, [{
     key: "filter",
@@ -1518,10 +1514,9 @@ var MediasParser = /*#__PURE__*/function () {
 
 var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
   _inherits(ScreensManager, _DefinitionsManager);
-  var _super = _createSuper(ScreensManager);
   function ScreensManager() {
     _classCallCheck(this, ScreensManager);
-    return _super.apply(this, arguments);
+    return _callSuper(this, ScreensManager, arguments);
   }
   _createClass(ScreensManager, [{
     key: "getFields",
@@ -2152,12 +2147,11 @@ var _excluded = ["value"],
   _excluded2 = ["value", "currentTime"];
 var Tracking = /*#__PURE__*/function (_BaseTracking) {
   _inherits(Tracking, _BaseTracking);
-  var _super = _createSuper(Tracking);
   function Tracking() {
     var _this;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, Tracking);
-    _this = _super.call(this, opts);
+    _this = _callSuper(this, Tracking, [opts]);
     var _this$options$variabl = _this.options.variables,
       variables = _this$options$variabl === void 0 ? null : _this$options$variabl;
     _this.variables = null;

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);
@@ -1954,7 +1976,7 @@ var VisitorProvider = function VisitorProvider(_ref) {
 VisitorProvider.propTypes = propTypes;
 VisitorProvider.defaultProps = defaultProps;
 
-Object.defineProperty(exports, 'TrackingContext', {
+Object.defineProperty(exports, "TrackingContext", {
     enumerable: true,
     get: function () { return tracking.TrackingContext; }
 });