@micromag/core 0.3.246 → 0.3.251

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 core$1 = require('@react-spring/core');
 var react$1 = require('@use-gesture/react');
+var core$1 = require('@react-spring/core');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var forms = require('@folklore/forms');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
@@ -231,23 +231,42 @@ var useFormattedTime = function useFormattedTime() {
   }, [now, showNow, timeGap, format]);
 };
 
-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]);
-};
-
 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;
+};
+
+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;
+}
+
 function useDragProgress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       wantedProgress = _ref.progress,
@@ -265,28 +284,21 @@ function useDragProgress() {
       springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
       _ref$dragOptions = _ref.dragOptions,
       dragOptions = _ref$dragOptions === void 0 ? {
-    filterTaps: true
+    filterTaps: true,
+    preventDefault: true
   } : _ref$dragOptions;
 
   var refDragging = react.useRef(false);
-  var refProgress = react.useRef(wantedProgress);
 
-  var _useState = react.useState(false),
+  var _useState = react.useState({
+    dragging: false,
+    progress: wantedProgress
+  }),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      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];
+      _useState2$ = _useState2[0],
+      dragging = _useState2$.dragging,
+      progress = _useState2$.progress,
+      setDragState = _useState2[1];
 
   var onDrag = react.useCallback(function (gestureState) {
     if (disabled) {
@@ -307,35 +319,29 @@ function useDragProgress() {
 
     var newProgress = computeProgress(gestureState);
     refDragging.current = active;
-    refProgress.current = newProgress;
-
-    if (active !== dragging) {
-      setDragging(active);
-    }
-
-    api.start({
-      progress: newProgress,
-      immediate: active
+    setDragState({
+      dragging: active,
+      progress: newProgress
     });
 
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
-  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
+  }, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
   var bind = react$1.useDrag(onDrag, dragOptions);
+  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
   react.useEffect(function () {
-    if (!refDragging.current && wantedProgress !== refProgress.current) {
-      refProgress.current = wantedProgress;
-      api.start({
-        progress: wantedProgress,
-        immediate: false
+    if (wantedProgress !== progress && !refDragging.current) {
+      setDragState({
+        dragging: refDragging.current,
+        progress: wantedProgress
       });
     }
   }, [wantedProgress]);
   return {
     bind: bind,
     dragging: dragging,
-    progress: progress
+    progress: springedProgress
   };
 }
 
@@ -1521,17 +1527,16 @@ function useMediaProgress(media) {
   var _useState = react.useState(!disabled),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       playing = _useState2[0],
-      setPlaying = _useState2[1]; // const currentTime = useMediaCurrentTime(media, {
-  //     disabled: disabled || !playing,
-  //     ...props,
-  // });
-
+      setPlaying = _useState2[1];
 
+  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(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
+  var _useState3 = react.useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
       progress = _useState4[0],
       setProgress = _useState4[1];
@@ -1566,8 +1571,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);
@@ -1582,8 +1587,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);
@@ -1592,7 +1597,11 @@ function useMediaProgress(media) {
     };
   }, [media, updateProgress, setPlaying, playing]);
   react.useEffect(function () {
-    if (media === null || !playing || disabled) {
+    if (media === null) {
+      return function () {};
+    }
+
+    if (!playing || disabled) {
       return function () {};
     }
 
@@ -2041,34 +2050,6 @@ 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,
@@ -2393,7 +2374,6 @@ 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,22 +950,6 @@ 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;
 
@@ -1168,7 +1152,6 @@ 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.246",
+    "version": "0.3.251",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "473a4ad55684e54d3f1e62e760792ed6e003f8e7"
+    "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
 }