@micromag/core 0.3.156 → 0.3.159

package/es/hooks.js

@@ -34,6 +34,7 @@ function useActivityDetector() {
       detected = _useState2[0],
       setDetected = _useState2[1];
 
+  var detectedRef = useRef(detected);
   useEffect(function () {
     var _ref$current = ref.current,
         element = _ref$current === void 0 ? null : _ref$current;
@@ -44,26 +45,47 @@ function useActivityDetector() {
 
     var timeout = null;
 
-    function onMove() {
+    function onActivity() {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      setDetected(true);
+      if (!detectedRef.current) {
+        detectedRef.current = true;
+        setDetected(true);
+      }
+
       timeout = setTimeout(function () {
+        detectedRef.current = false;
         setDetected(false);
       }, timeoutDelay);
     }
 
-    element.addEventListener('mousemove', onMove);
+    element.addEventListener('keydown', onActivity);
+    element.addEventListener('mousedown', onActivity);
+    element.addEventListener('mousemove', onActivity);
+    element.addEventListener('mouseup', onActivity);
+    element.addEventListener('pointerdown', onActivity);
+    element.addEventListener('pointermove', onActivity);
+    element.addEventListener('pointerup', onActivity);
+    element.addEventListener('touchmove', onActivity);
+    element.addEventListener('touchstart', onActivity);
     return function () {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      element.removeEventListener('mousemove', onMove);
+      element.removeEventListener('keydown', onActivity);
+      element.removeEventListener('mousedown', onActivity);
+      element.removeEventListener('mousemove', onActivity);
+      element.removeEventListener('mouseup', onActivity);
+      element.removeEventListener('pointerdown', onActivity);
+      element.removeEventListener('pointermove', onActivity);
+      element.removeEventListener('pointerup', onActivity);
+      element.removeEventListener('touchmove', onActivity);
+      element.removeEventListener('touchstart', onActivity);
     };
   }, [disabled, timeoutDelay]);
   return {
@@ -1165,47 +1187,54 @@ function useMediaCurrentTime(element) {
       setCurrentTime = _useState2[1];
 
   var realCurrentTime = useRef(currentTime);
-  var lastIdRef = useRef(id);
-  var idChanged = lastIdRef.current !== id;
+  var finalId = id || element;
+  var lastIdRef = useRef(finalId);
+  var idChanged = lastIdRef.current !== finalId;
 
   if (idChanged) {
-    realCurrentTime.current = 0;
-    lastIdRef.current = id;
+    realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
+    lastIdRef.current = finalId;
   } // Check time update
 
 
   useEffect(function () {
-    if (disabled || element === null) {
+    if (element === null) {
       return function () {};
     }
 
-    var canceled = false;
+    function updateTime() {
+      var time = element.currentTime;
 
-    var updateTime = function updateTime(time) {
-      if (canceled) {
-        return;
+      if (time !== realCurrentTime.current) {
+        realCurrentTime.current = time;
+        setCurrentTime(time);
+
+        if (customOnUpdate !== null) {
+          customOnUpdate(time);
+        }
       }
 
-      realCurrentTime.current = time;
-      setCurrentTime(time);
+      return time;
+    }
 
-      if (customOnUpdate !== null) {
-        customOnUpdate(time);
-      }
-    };
+    if (disabled) {
+      updateTime();
+      return function () {};
+    }
 
-    var interval = setInterval(function () {
-      var time = element.currentTime;
+    var timeout = null;
 
-      if (typeof time.then !== 'undefined') {
-        time.then(updateTime);
-      } else {
-        updateTime(time);
-      }
-    }, updateInterval);
+    function loop() {
+      var time = updateTime();
+      var remainingTime = Math.floor((element.duration - time) * 1000);
+      timeout = setTimeout(loop, Math.min(updateInterval, remainingTime));
+    }
+
+    loop();
     return function () {
-      canceled = true;
-      clearInterval(interval);
+      if (timeout !== null) {
+        clearInterval(timeout);
+      }
     };
   }, [id, element, setCurrentTime, disabled, updateInterval]);
   return realCurrentTime.current;
@@ -1222,12 +1251,13 @@ function useMediaDuration(element) {
       setDuration = _useState2[1];
 
   var realDuration = useRef(duration);
-  var lastIdRef = useRef(id);
-  var idChanged = lastIdRef.current !== id;
+  var finalId = id || element;
+  var lastIdRef = useRef(finalId);
+  var idChanged = lastIdRef.current !== finalId;
 
   if (idChanged) {
     realDuration.current = element !== null ? element.duration || 0 : 0;
-    lastIdRef.current = id;
+    lastIdRef.current = finalId;
   }
 
   useEffect(function () {
@@ -1236,14 +1266,20 @@ function useMediaDuration(element) {
     }
 
     function updateDuration() {
-      realDuration.current = element.duration || 0;
-      setDuration(element.duration || 0);
+      var newDuration = element.duration || 0;
+
+      if (newDuration !== realDuration.current) {
+        realDuration.current = newDuration;
+        setDuration(newDuration);
+      }
     }
 
     updateDuration();
+    element.addEventListener('canplay', updateDuration);
     element.addEventListener('loadedmetadata', updateDuration);
     element.addEventListener('durationchange', updateDuration);
     return function () {
+      element.removeEventListener('canplay', updateDuration);
       element.removeEventListener('loadedmetadata', updateDuration);
       element.removeEventListener('durationchange', updateDuration);
     };

package/lib/hooks.js

@@ -71,6 +71,7 @@ function useActivityDetector() {
       detected = _useState2[0],
       setDetected = _useState2[1];
 
+  var detectedRef = react.useRef(detected);
   react.useEffect(function () {
     var _ref$current = ref.current,
         element = _ref$current === void 0 ? null : _ref$current;
@@ -81,26 +82,47 @@ function useActivityDetector() {
 
     var timeout = null;
 
-    function onMove() {
+    function onActivity() {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      setDetected(true);
+      if (!detectedRef.current) {
+        detectedRef.current = true;
+        setDetected(true);
+      }
+
       timeout = setTimeout(function () {
+        detectedRef.current = false;
         setDetected(false);
       }, timeoutDelay);
     }
 
-    element.addEventListener('mousemove', onMove);
+    element.addEventListener('keydown', onActivity);
+    element.addEventListener('mousedown', onActivity);
+    element.addEventListener('mousemove', onActivity);
+    element.addEventListener('mouseup', onActivity);
+    element.addEventListener('pointerdown', onActivity);
+    element.addEventListener('pointermove', onActivity);
+    element.addEventListener('pointerup', onActivity);
+    element.addEventListener('touchmove', onActivity);
+    element.addEventListener('touchstart', onActivity);
     return function () {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      element.removeEventListener('mousemove', onMove);
+      element.removeEventListener('keydown', onActivity);
+      element.removeEventListener('mousedown', onActivity);
+      element.removeEventListener('mousemove', onActivity);
+      element.removeEventListener('mouseup', onActivity);
+      element.removeEventListener('pointerdown', onActivity);
+      element.removeEventListener('pointermove', onActivity);
+      element.removeEventListener('pointerup', onActivity);
+      element.removeEventListener('touchmove', onActivity);
+      element.removeEventListener('touchstart', onActivity);
     };
   }, [disabled, timeoutDelay]);
   return {
@@ -1202,47 +1224,54 @@ function useMediaCurrentTime(element) {
       setCurrentTime = _useState2[1];
 
   var realCurrentTime = react.useRef(currentTime);
-  var lastIdRef = react.useRef(id);
-  var idChanged = lastIdRef.current !== id;
+  var finalId = id || element;
+  var lastIdRef = react.useRef(finalId);
+  var idChanged = lastIdRef.current !== finalId;
 
   if (idChanged) {
-    realCurrentTime.current = 0;
-    lastIdRef.current = id;
+    realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
+    lastIdRef.current = finalId;
   } // Check time update
 
 
   react.useEffect(function () {
-    if (disabled || element === null) {
+    if (element === null) {
       return function () {};
     }
 
-    var canceled = false;
+    function updateTime() {
+      var time = element.currentTime;
 
-    var updateTime = function updateTime(time) {
-      if (canceled) {
-        return;
+      if (time !== realCurrentTime.current) {
+        realCurrentTime.current = time;
+        setCurrentTime(time);
+
+        if (customOnUpdate !== null) {
+          customOnUpdate(time);
+        }
       }
 
-      realCurrentTime.current = time;
-      setCurrentTime(time);
+      return time;
+    }
 
-      if (customOnUpdate !== null) {
-        customOnUpdate(time);
-      }
-    };
+    if (disabled) {
+      updateTime();
+      return function () {};
+    }
 
-    var interval = setInterval(function () {
-      var time = element.currentTime;
+    var timeout = null;
 
-      if (typeof time.then !== 'undefined') {
-        time.then(updateTime);
-      } else {
-        updateTime(time);
-      }
-    }, updateInterval);
+    function loop() {
+      var time = updateTime();
+      var remainingTime = Math.floor((element.duration - time) * 1000);
+      timeout = setTimeout(loop, Math.min(updateInterval, remainingTime));
+    }
+
+    loop();
     return function () {
-      canceled = true;
-      clearInterval(interval);
+      if (timeout !== null) {
+        clearInterval(timeout);
+      }
     };
   }, [id, element, setCurrentTime, disabled, updateInterval]);
   return realCurrentTime.current;
@@ -1259,12 +1288,13 @@ function useMediaDuration(element) {
       setDuration = _useState2[1];
 
   var realDuration = react.useRef(duration);
-  var lastIdRef = react.useRef(id);
-  var idChanged = lastIdRef.current !== id;
+  var finalId = id || element;
+  var lastIdRef = react.useRef(finalId);
+  var idChanged = lastIdRef.current !== finalId;
 
   if (idChanged) {
     realDuration.current = element !== null ? element.duration || 0 : 0;
-    lastIdRef.current = id;
+    lastIdRef.current = finalId;
   }
 
   react.useEffect(function () {
@@ -1273,14 +1303,20 @@ function useMediaDuration(element) {
     }
 
     function updateDuration() {
-      realDuration.current = element.duration || 0;
-      setDuration(element.duration || 0);
+      var newDuration = element.duration || 0;
+
+      if (newDuration !== realDuration.current) {
+        realDuration.current = newDuration;
+        setDuration(newDuration);
+      }
     }
 
     updateDuration();
+    element.addEventListener('canplay', updateDuration);
     element.addEventListener('loadedmetadata', updateDuration);
     element.addEventListener('durationchange', updateDuration);
     return function () {
+      element.removeEventListener('canplay', updateDuration);
       element.removeEventListener('loadedmetadata', updateDuration);
       element.removeEventListener('durationchange', updateDuration);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.156",
+    "version": "0.3.159",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
+    "gitHead": "685851a0877cde60bcb1c322d939e93bf2f72792"
 }