@micromag/core 0.3.460 → 0.3.463

package/lib/hooks.js

@@ -18,6 +18,7 @@ var screenfull = require('screenfull');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
+var createDebug = require('debug');
 var raf = require('raf');
 var contexts = require('@micromag/core/contexts');
 var cssMediaquery = require('css-mediaquery');
@@ -974,6 +975,10 @@ var useMediaApi = function useMediaApi() {
     setPlaying(true);
     setSuspended(false);
   }, [initialPlay, setPlaying, onPlay]);
+  var onCustomPlaying = react.useCallback(function () {
+    setPlaying(true);
+    setSuspended(false);
+  }, []);
   var onCustomPause = react.useCallback(function (e) {
     var eventMedia = e.currentTarget;
     setPlaying(false);
@@ -1074,6 +1079,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);
@@ -1087,6 +1093,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);
@@ -1182,6 +1189,232 @@ var useMediaApi = function useMediaApi() {
   };
 };
 
+var useMediaBuffering = function useMediaBuffering() {
+  var mediaElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    buffering = _useState2[0],
+    setBuffering = _useState2[1];
+  react.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 = react.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 = react.useState(wantedPlaying),
+    _useState2 = _slicedToArray(_useState, 2),
+    playing = _useState2[0],
+    setPlaying = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    buffering = _useState4[0],
+    setBuffering = _useState4[1];
+  var _useState5 = react.useState(mediaElement !== null && (mediaElement.muted || mediaElement.volume === 0) || wantedMuted),
+    _useState6 = _slicedToArray(_useState5, 2),
+    muted = _useState6[0],
+    setMuted = _useState6[1];
+  react.useEffect(function () {
+    debug('State change %o', {
+      playing: playing,
+      buffering: buffering,
+      muted: muted
+    });
+  }, [playing, buffering, muted, debug]);
+  react.useEffect(function () {
+    if (mediaElement === null) {
+      setPlaying(wantedPlaying);
+      setBuffering(false);
+      setMuted(wantedMuted);
+      debug('Unset media: %o', {
+        wantedPlaying: wantedPlaying,
+        wantedMuted: wantedMuted
+      });
+    }
+  }, [mediaElement, debug, wantedPlaying, wantedMuted]);
+  react.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,
@@ -1349,28 +1582,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 {
@@ -1386,7 +1622,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]);
   react.useEffect(function () {
@@ -1401,9 +1637,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);
     }
@@ -2122,11 +2357,13 @@ exports.useIsVisible = useIsVisible;
 exports.useLoadedFonts = useLoadedFonts;
 exports.useLongPress = useLongPress;
 exports.useMediaApi = useMediaApi;
+exports.useMediaBuffering = useMediaBuffering;
 exports.useMediaCurrentTime = useMediaCurrentTime;
 exports.useMediaDuration = useMediaDuration;
 exports.useMediaLoad = useMediaLoad;
 exports.useMediaProgress = useMediaProgress;
 exports.useMediaReady = useMediaReady;
+exports.useMediaState = useMediaState;
 exports.useMediaThumbnail = useMediaThumbnail;
 exports.useMediaWaveform = useMediaWaveform;
 exports.useMediasParser = useMediasParser;

package/lib/index.js

@@ -11,8 +11,8 @@ var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
 var uniqWith = require('lodash/uniqWith');
 var sortBy = require('lodash/sortBy');
+var _callSuper = require('@babel/runtime/helpers/callSuper');
 var _inherits = require('@babel/runtime/helpers/inherits');
-var _createSuper = require('@babel/runtime/helpers/createSuper');
 var EventEmitter = require('wolfy87-eventemitter');
 require('lodash/isNumber');
 require('@babel/runtime/helpers/regeneratorRuntime');
@@ -1014,12 +1014,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;
   }
@@ -1088,12 +1087,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;
   }
@@ -1168,11 +1166,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 = {};
@@ -1230,10 +1227,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",
@@ -1520,10 +1516,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",
@@ -2154,12 +2149,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.460",
+    "version": "0.3.463",
     "private": false,
     "description": "",
     "keywords": [
@@ -131,7 +131,7 @@
         "classnames": "^2.2.6",
         "css-mediaquery": "^0.1.2",
         "dayjs": "^1.11.10",
-        "debug": "^4.3.1",
+        "debug": "^4.3.4",
         "flat": "^5.0.2",
         "hoist-non-react-statics": "^3.3.2",
         "lodash": "^4.17.21",
@@ -155,5 +155,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "7e5a6ed3d80be59cdd74716781b467be88a4ccc6"
+    "gitHead": "a2eb34209cb2dcbcd6a15d1325a02778543a8bca"
 }