@micromag/core 0.3.251 → 0.3.252

package/es/hooks.js

@@ -6,8 +6,8 @@ import isString from 'lodash/isString';
 import dayjs from 'dayjs';
 import { EventsManager, MediasParser, StoryParser, ThemeParser } from '@micromag/core';
 import { createUseEvent, getMediaFilesAsArray } from '@micromag/core/utils';
-import { useDrag } from '@use-gesture/react';
 import { useSpring, useSprings } from '@react-spring/core';
+import { useDrag } from '@use-gesture/react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useForm as useForm$1 } from '@folklore/forms';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -193,41 +193,22 @@ var useFormattedTime = function useFormattedTime() {
   }, [now, showNow, timeGap, format]);
 };
 
-var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
-var useDocumentEvent = 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;
+  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 = useState(wantedProgress),
-      _useState2 = _slicedToArray(_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  var onChange = useCallback(function (spring) {
-    return setProgress(getValueFromSpring(spring));
-  }, [setProgress]);
-  useSpring(_objectSpread({
-    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 EventsManager(document) : null;
+var useDocumentEvent = createUseEvent(eventsManager$1);
 
 function useDragProgress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -246,21 +227,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 = useRef(false);
+  var refProgress = useRef(wantedProgress);
 
-  var _useState = useState({
-    dragging: false,
-    progress: wantedProgress
-  }),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      dragging = _useState2$.dragging,
-      progress = _useState2$.progress,
-      setDragState = _useState2[1];
+      dragging = _useState2[0],
+      setDragging = _useState2[1];
+
+  var spring = useCallback(function () {
+    return _objectSpread({
+      progress: wantedProgress,
+      immediate: dragging || disabled
+    }, springParams);
+  }, []);
+
+  var _useSpring = useSpring(spring),
+      _useSpring2 = _slicedToArray(_useSpring, 2),
+      progress = _useSpring2[0].progress,
+      api = _useSpring2[1];
 
   var onDrag = useCallback(function (gestureState) {
     if (disabled) {
@@ -281,29 +269,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 = useDrag(onDrag, dragOptions);
-  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
   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
   };
 }
 
@@ -1489,16 +1483,17 @@ function useMediaProgress(media) {
   var _useState = useState(!disabled),
       _useState2 = _slicedToArray(_useState, 2),
       playing = _useState2[0],
-      setPlaying = _useState2[1];
+      setPlaying = _useState2[1]; // const currentTime = useMediaCurrentTime(media, {
+  //     disabled: disabled || !playing,
+  //     ...props,
+  // });
+
 
-  var currentTime = useMediaCurrentTime(media, _objectSpread({
-    disabled: disabled || !playing
-  }, props));
   var duration = useMediaDuration(media, _objectSpread({
     disabled: disabled || !playing
   }, props));
 
-  var _useState3 = useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
+  var _useState3 = useState(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
       _useState4 = _slicedToArray(_useState3, 2),
       progress = _useState4[0],
       setProgress = _useState4[1];
@@ -1533,8 +1528,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);
@@ -1549,8 +1544,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);
@@ -1559,11 +1554,7 @@ function useMediaProgress(media) {
     };
   }, [media, updateProgress, setPlaying, playing]);
   useEffect(function () {
-    if (media === null) {
-      return function () {};
-    }
-
-    if (!playing || disabled) {
+    if (media === null || !playing || disabled) {
       return function () {};
     }
 
@@ -2012,6 +2003,34 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
   return useScreenSize(_objectSpread(_objectSpread({}, 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 = useState(wantedProgress),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  var onChange = useCallback(function (spring) {
+    return setProgress(getValueFromSpring(spring));
+  }, [setProgress]);
+  useSpring(_objectSpread({
+    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,
@@ -2333,4 +2352,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/utils.js

@@ -931,6 +931,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;
 
@@ -1093,4 +1109,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -3675,6 +3675,7 @@ var propTypes$9 = {
   screen: core.PropTypes.storyComponent.isRequired,
   renderContext: core.PropTypes.renderContext,
   screenState: PropTypes__default["default"].string,
+  index: PropTypes__default["default"].number,
   active: PropTypes__default["default"].bool,
   current: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].node,
@@ -3686,6 +3687,7 @@ var defaultProps$9 = {
   active: true,
   renderContext: null,
   screenState: null,
+  index: null,
   current: false,
   component: null,
   components: null,
@@ -3697,6 +3699,7 @@ var Screen = function Screen(_ref) {
   var screen = _ref.screen,
       renderContext = _ref.renderContext,
       screenState = _ref.screenState,
+      index = _ref.index,
       active = _ref.active,
       current = _ref.current,
       components = _ref.components,
@@ -3710,7 +3713,8 @@ var Screen = function Screen(_ref) {
 
   var CustomScreenComponent = components !== null ? utils.getComponentFromName(type, components) || null : null;
   var ContextScreenComponent = contexts.useScreenComponent(type);
-  var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
+  var ScreenComponent = CustomScreenComponent || ContextScreenComponent; // Comment
+
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen,
     renderContext: renderContext,
@@ -3718,6 +3722,7 @@ var Screen = function Screen(_ref) {
   }, ScreenComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, Object.assign({}, screen, {
+    index: index,
     active: active,
     current: current,
     mediaRef: mediaRef