@micromag/core 0.3.251 → 0.3.252

package/lib/hooks.js

@@ -10,8 +10,8 @@ var isString = require('lodash/isString');
 var dayjs = require('dayjs');
 var core = require('@micromag/core');
 var utils = require('@micromag/core/utils');
-var react$1 = require('@use-gesture/react');
 var core$1 = require('@react-spring/core');
+var react$1 = require('@use-gesture/react');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var forms = require('@folklore/forms');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
@@ -231,41 +231,22 @@ var useFormattedTime = function useFormattedTime() {
   }, [now, showNow, timeGap, format]);
 };
 
-var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
-var useDocumentEvent = utils.createUseEvent(eventsManager$1);
-
-var getValueFromSpring = function getValueFromSpring(s) {
-  var _ref = s || {},
-      _ref$value = _ref.value,
-      v = _ref$value === void 0 ? null : _ref$value;
-
-  var _ref2 = v || {},
-      p = _ref2.progress;
-
-  return p;
+var useDebounced = function useDebounced(handler, watchedValue) {
+  var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+  react.useEffect(function () {
+    var timeoutHandler = setTimeout(function () {
+      if (handler !== null) {
+        handler(watchedValue);
+      }
+    }, delay);
+    return function () {
+      clearTimeout(timeoutHandler);
+    };
+  }, [watchedValue, delay]);
 };
 
-function useSpringValue(wantedProgress, immediate, params) {
-  var _useState = react.useState(wantedProgress),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  var onChange = react.useCallback(function (spring) {
-    return setProgress(getValueFromSpring(spring));
-  }, [setProgress]);
-  core$1.useSpring(_objectSpread__default["default"]({
-    progress: wantedProgress,
-    onChange: onChange,
-    immediate: immediate
-  }, params)); // useEffect(() => {
-  //     if (wantedProgress !== null) {
-  //         api.start({ progress: wantedProgress, immediate, ...params });
-  //     }
-  // }, [wantedProgress, immediate, params, api]);
-
-  return immediate ? wantedProgress : progress;
-}
+var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
+var useDocumentEvent = utils.createUseEvent(eventsManager$1);
 
 function useDragProgress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -284,21 +265,28 @@ function useDragProgress() {
       springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
       _ref$dragOptions = _ref.dragOptions,
       dragOptions = _ref$dragOptions === void 0 ? {
-    filterTaps: true,
-    preventDefault: true
+    filterTaps: true
   } : _ref$dragOptions;
 
   var refDragging = react.useRef(false);
+  var refProgress = react.useRef(wantedProgress);
 
-  var _useState = react.useState({
-    dragging: false,
-    progress: wantedProgress
-  }),
+  var _useState = react.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      _useState2$ = _useState2[0],
-      dragging = _useState2$.dragging,
-      progress = _useState2$.progress,
-      setDragState = _useState2[1];
+      dragging = _useState2[0],
+      setDragging = _useState2[1];
+
+  var spring = react.useCallback(function () {
+    return _objectSpread__default["default"]({
+      progress: wantedProgress,
+      immediate: dragging || disabled
+    }, springParams);
+  }, []);
+
+  var _useSpring = core$1.useSpring(spring),
+      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+      progress = _useSpring2[0].progress,
+      api = _useSpring2[1];
 
   var onDrag = react.useCallback(function (gestureState) {
     if (disabled) {
@@ -319,29 +307,35 @@ function useDragProgress() {
 
     var newProgress = computeProgress(gestureState);
     refDragging.current = active;
-    setDragState({
-      dragging: active,
-      progress: newProgress
+    refProgress.current = newProgress;
+
+    if (active !== dragging) {
+      setDragging(active);
+    }
+
+    api.start({
+      progress: newProgress,
+      immediate: active
     });
 
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
-  }, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
+  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = react$1.useDrag(onDrag, dragOptions);
-  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
   react.useEffect(function () {
-    if (wantedProgress !== progress && !refDragging.current) {
-      setDragState({
-        dragging: refDragging.current,
-        progress: wantedProgress
+    if (!refDragging.current && wantedProgress !== refProgress.current) {
+      refProgress.current = wantedProgress;
+      api.start({
+        progress: wantedProgress,
+        immediate: false
       });
     }
   }, [wantedProgress]);
   return {
     bind: bind,
     dragging: dragging,
-    progress: springedProgress
+    progress: progress
   };
 }
 
@@ -1527,16 +1521,17 @@ function useMediaProgress(media) {
   var _useState = react.useState(!disabled),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       playing = _useState2[0],
-      setPlaying = _useState2[1];
+      setPlaying = _useState2[1]; // const currentTime = useMediaCurrentTime(media, {
+  //     disabled: disabled || !playing,
+  //     ...props,
+  // });
+
 
-  var currentTime = useMediaCurrentTime(media, _objectSpread__default["default"]({
-    disabled: disabled || !playing
-  }, props));
   var duration = useMediaDuration(media, _objectSpread__default["default"]({
     disabled: disabled || !playing
   }, props));
 
-  var _useState3 = react.useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
+  var _useState3 = react.useState(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
       progress = _useState4[0],
       setProgress = _useState4[1];
@@ -1571,8 +1566,8 @@ function useMediaProgress(media) {
 
     media.addEventListener('play', onResume);
     media.addEventListener('seeked', onResume);
-    media.addEventListener('playing', onResume);
-    media.addEventListener('timeupdate', onResume);
+    media.addEventListener('playing', onResume); // media.addEventListener('timeupdate', onResume);
+
     media.addEventListener('pause', onPause);
     media.addEventListener('ended', onPause);
     media.addEventListener('waiting', onPause);
@@ -1587,8 +1582,8 @@ function useMediaProgress(media) {
     return function () {
       media.removeEventListener('play', onResume);
       media.removeEventListener('seeked', onResume);
-      media.removeEventListener('playing', onResume);
-      media.removeEventListener('timeupdate', onResume);
+      media.removeEventListener('playing', onResume); // media.removeEventListener('timeupdate', onResume);
+
       media.removeEventListener('pause', onPause);
       media.removeEventListener('ended', onPause);
       media.removeEventListener('waiting', onPause);
@@ -1597,11 +1592,7 @@ function useMediaProgress(media) {
     };
   }, [media, updateProgress, setPlaying, playing]);
   react.useEffect(function () {
-    if (media === null) {
-      return function () {};
-    }
-
-    if (!playing || disabled) {
+    if (media === null || !playing || disabled) {
       return function () {};
     }
 
@@ -2050,6 +2041,34 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
   return useScreenSize(_objectSpread__default["default"](_objectSpread__default["default"]({}, opts), windowSize));
 };
 
+var getValueFromSpring = function getValueFromSpring(s) {
+  var _ref = s || {},
+      _ref$value = _ref.value,
+      v = _ref$value === void 0 ? null : _ref$value;
+
+  var _ref2 = v || {},
+      p = _ref2.progress;
+
+  return p;
+};
+
+function useSpringValue(wantedProgress, immediate, params) {
+  var _useState = react.useState(wantedProgress),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  var onChange = react.useCallback(function (spring) {
+    return setProgress(getValueFromSpring(spring));
+  }, [setProgress]);
+  core$1.useSpring(_objectSpread__default["default"]({
+    progress: wantedProgress,
+    onChange: onChange,
+    immediate: immediate
+  }, params));
+  return immediate ? wantedProgress : progress;
+}
+
 var useSwipe = function useSwipe() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$width = _ref.width,
@@ -2374,6 +2393,7 @@ var useWindowEvent = utils.createUseEvent(eventsManager);
 exports.getObserver = getObserver;
 exports.useActivityDetector = useActivityDetector;
 exports.useAnimationFrame = useAnimationFrame;
+exports.useDebounce = useDebounced;
 exports.useDimensionObserver = useDimensionObserver;
 exports.useDocumentEvent = useDocumentEvent;
 exports.useDragProgress = useDragProgress;

package/lib/utils.js

@@ -950,6 +950,22 @@ var getStyleFromMargin = function getStyleFromMargin(value) {
   } : null);
 };
 
+var possibleMimes = ['video/webm', 'video/mp4', 'video/ogg'];
+var supportedMimes = null;
+
+function getVideoSupportedMimes() {
+  var mimes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : possibleMimes;
+
+  if (supportedMimes === null) {
+    var video = document.createElement('video');
+    supportedMimes = mimes.filter(function (mime) {
+      return video.canPlayType(mime) !== '';
+    });
+  }
+
+  return supportedMimes;
+}
+
 var getLayoutParts = function getLayoutParts() {
   var layout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
@@ -1152,6 +1168,7 @@ exports.getStyleFromImage = getStyleFromImage;
 exports.getStyleFromLink = getStyleFromLink;
 exports.getStyleFromMargin = getStyleFromMargin;
 exports.getStyleFromText = getStyleFromText;
+exports.getVideoSupportedMimes = getVideoSupportedMimes;
 exports.isImageFilled = isImageFilled;
 exports.isIos = isIos;
 exports.isLabelFilled = isTextFilled$1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.251",
+    "version": "0.3.252",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
+    "gitHead": "67a8b8144a40086a6dfd98c9eb8c4b6b8ebb05b0"
 }