@micromag/core 0.3.152 → 0.3.159

package/es/contexts.js

@@ -977,6 +977,17 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   var hideControls = useCallback(function () {
     return setControlsVisible(false);
   }, [setControlsVisible]);
+  var hasAudio = useMemo(function () {
+    if (media === null || media.tagName.toLowerCase() !== 'video') {
+      return false;
+    }
+
+    if (media.tagName.toLowerCase() === 'audio') {
+      return true;
+    }
+
+    return typeof media.dataset.hasAudio !== 'undefined' ? media.dataset.hasAudio : null;
+  }, [media]);
   var value = useMemo(function () {
     return {
       muted: muted,
@@ -984,6 +995,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       controls: controls,
       controlsVisible: controlsVisible,
       media: media,
+      hasAudio: hasAudio,
       controlsTheme: controlsTheme,
       setMuted: setMuted,
       setPlaying: setPlaying,
@@ -994,7 +1006,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       hideControls: hideControls,
       setMedia: setMedia
     };
-  }, [muted, playing, controls, controlsVisible, controlsTheme, media, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
+  }, [muted, playing, controls, controlsVisible, controlsTheme, media, hasAudio, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

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);
     };
@@ -1357,25 +1393,41 @@ var useMediasParser = function useMediasParser() {
 
 function useMediaThumbnail(media) {
   var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var thumbnail = useMemo(function () {
+    if (isObject(file)) {
+      return file;
+    }
+
+    var _ref = media || {},
+        _ref$thumbnail_url = _ref.thumbnail_url,
+        defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
+        _ref$files = _ref.files,
+        files = _ref$files === void 0 ? null : _ref$files,
+        _ref$metadata = _ref.metadata,
+        metadata = _ref$metadata === void 0 ? null : _ref$metadata;
 
-  var _ref = media || {},
-      _ref$thumbnail_url = _ref.thumbnail_url,
-      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
-      _ref$files = _ref.files,
-      files = _ref$files === void 0 ? null : _ref$files;
+    var _ref2 = metadata || {},
+        mediaWidth = _ref2.width,
+        mediaHeight = _ref2.height;
 
-  var thumbnailUrl = useMemo(function () {
     var filesArray = getMediaFilesAsArray(files) || [];
 
-    var _ref2 = (file !== null && !isObject(file) ? filesArray.find(function (_ref3) {
-      var handle = _ref3.handle;
+    var _ref3 = (file !== null ? filesArray.find(function (_ref4) {
+      var handle = _ref4.handle;
       return handle === file;
-    }) || null : file) || {},
-        url = _ref2.url;
-
-    return url || defaultThumbnailUrl;
-  }, [files, file, defaultThumbnailUrl]);
-  return thumbnailUrl;
+    }) || null : null) || {},
+        _ref3$url = _ref3.url,
+        url = _ref3$url === void 0 ? null : _ref3$url;
+
+    return url !== null || defaultThumbnailUrl !== null ? {
+      url: url || defaultThumbnailUrl,
+      metadata: {
+        width: mediaWidth,
+        height: mediaHeight
+      }
+    } : null;
+  }, [media, file]);
+  return thumbnail;
 }
 
 function useMediaWaveform(media) {

package/es/index.js

@@ -1358,7 +1358,7 @@ var MediasParser = /*#__PURE__*/function () {
         var newValue;
 
         if (patternMatch) {
-          newValue = isObject(value) ? value : medias[value] || null;
+          newValue = isObject(value) ? value : medias[value] || value;
         } else {
           newValue = isObject(value) || isArray(value) ? MediasParser.replacePathsWithMedias(value, medias, patterns, path) : value;
         }

package/lib/contexts.js

@@ -1012,6 +1012,17 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   var hideControls = React.useCallback(function () {
     return setControlsVisible(false);
   }, [setControlsVisible]);
+  var hasAudio = React.useMemo(function () {
+    if (media === null || media.tagName.toLowerCase() !== 'video') {
+      return false;
+    }
+
+    if (media.tagName.toLowerCase() === 'audio') {
+      return true;
+    }
+
+    return typeof media.dataset.hasAudio !== 'undefined' ? media.dataset.hasAudio : null;
+  }, [media]);
   var value = React.useMemo(function () {
     return {
       muted: muted,
@@ -1019,6 +1030,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       controls: controls,
       controlsVisible: controlsVisible,
       media: media,
+      hasAudio: hasAudio,
       controlsTheme: controlsTheme,
       setMuted: setMuted,
       setPlaying: setPlaying,
@@ -1029,7 +1041,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       hideControls: hideControls,
       setMedia: setMedia
     };
-  }, [muted, playing, controls, controlsVisible, controlsTheme, media, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
+  }, [muted, playing, controls, controlsVisible, controlsTheme, media, hasAudio, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
   return /*#__PURE__*/React__default["default"].createElement(PlaybackContext.Provider, {
     value: value
   }, children);

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);
     };
@@ -1394,25 +1430,41 @@ var useMediasParser = function useMediasParser() {
 
 function useMediaThumbnail(media) {
   var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var thumbnail = react.useMemo(function () {
+    if (isObject__default["default"](file)) {
+      return file;
+    }
+
+    var _ref = media || {},
+        _ref$thumbnail_url = _ref.thumbnail_url,
+        defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
+        _ref$files = _ref.files,
+        files = _ref$files === void 0 ? null : _ref$files,
+        _ref$metadata = _ref.metadata,
+        metadata = _ref$metadata === void 0 ? null : _ref$metadata;
 
-  var _ref = media || {},
-      _ref$thumbnail_url = _ref.thumbnail_url,
-      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
-      _ref$files = _ref.files,
-      files = _ref$files === void 0 ? null : _ref$files;
+    var _ref2 = metadata || {},
+        mediaWidth = _ref2.width,
+        mediaHeight = _ref2.height;
 
-  var thumbnailUrl = react.useMemo(function () {
     var filesArray = utils.getMediaFilesAsArray(files) || [];
 
-    var _ref2 = (file !== null && !isObject__default["default"](file) ? filesArray.find(function (_ref3) {
-      var handle = _ref3.handle;
+    var _ref3 = (file !== null ? filesArray.find(function (_ref4) {
+      var handle = _ref4.handle;
       return handle === file;
-    }) || null : file) || {},
-        url = _ref2.url;
-
-    return url || defaultThumbnailUrl;
-  }, [files, file, defaultThumbnailUrl]);
-  return thumbnailUrl;
+    }) || null : null) || {},
+        _ref3$url = _ref3.url,
+        url = _ref3$url === void 0 ? null : _ref3$url;
+
+    return url !== null || defaultThumbnailUrl !== null ? {
+      url: url || defaultThumbnailUrl,
+      metadata: {
+        width: mediaWidth,
+        height: mediaHeight
+      }
+    } : null;
+  }, [media, file]);
+  return thumbnail;
 }
 
 function useMediaWaveform(media) {

package/lib/index.js

@@ -1385,7 +1385,7 @@ var MediasParser = /*#__PURE__*/function () {
         var newValue;
 
         if (patternMatch) {
-          newValue = isObject__default["default"](value) ? value : medias[value] || null;
+          newValue = isObject__default["default"](value) ? value : medias[value] || value;
         } else {
           newValue = isObject__default["default"](value) || isArray__default["default"](value) ? MediasParser.replacePathsWithMedias(value, medias, patterns, path) : value;
         }

package/package.json

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