@micromag/core 0.3.243 → 0.3.251
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components.js +0 -4
- package/es/hooks.js +69 -88
- package/es/utils.js +1 -17
- package/lib/components.js +0 -4
- package/lib/hooks.js +68 -88
- package/lib/utils.js +0 -17
- package/package.json +2 -2
package/es/components.js
CHANGED
|
@@ -3634,7 +3634,6 @@ var propTypes$9 = {
|
|
|
3634
3634
|
screen: PropTypes.storyComponent.isRequired,
|
|
3635
3635
|
renderContext: PropTypes.renderContext,
|
|
3636
3636
|
screenState: PropTypes$1.string,
|
|
3637
|
-
index: PropTypes$1.number,
|
|
3638
3637
|
active: PropTypes$1.bool,
|
|
3639
3638
|
current: PropTypes$1.bool,
|
|
3640
3639
|
component: PropTypes$1.node,
|
|
@@ -3646,7 +3645,6 @@ var defaultProps$9 = {
|
|
|
3646
3645
|
active: true,
|
|
3647
3646
|
renderContext: null,
|
|
3648
3647
|
screenState: null,
|
|
3649
|
-
index: null,
|
|
3650
3648
|
current: false,
|
|
3651
3649
|
component: null,
|
|
3652
3650
|
components: null,
|
|
@@ -3658,7 +3656,6 @@ var Screen = function Screen(_ref) {
|
|
|
3658
3656
|
var screen = _ref.screen,
|
|
3659
3657
|
renderContext = _ref.renderContext,
|
|
3660
3658
|
screenState = _ref.screenState,
|
|
3661
|
-
index = _ref.index,
|
|
3662
3659
|
active = _ref.active,
|
|
3663
3660
|
current = _ref.current,
|
|
3664
3661
|
components = _ref.components,
|
|
@@ -3680,7 +3677,6 @@ var Screen = function Screen(_ref) {
|
|
|
3680
3677
|
}, ScreenComponent !== null ? /*#__PURE__*/React.createElement("div", {
|
|
3681
3678
|
className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
|
|
3682
3679
|
}, /*#__PURE__*/React.createElement(ScreenComponent, Object.assign({}, screen, {
|
|
3683
|
-
index: index,
|
|
3684
3680
|
active: active,
|
|
3685
3681
|
current: current,
|
|
3686
3682
|
mediaRef: mediaRef
|
package/es/hooks.js
CHANGED
|
@@ -6,8 +6,8 @@ import isString from 'lodash/isString';
|
|
|
6
6
|
import dayjs from 'dayjs';
|
|
7
7
|
import { EventsManager, MediasParser, StoryParser, ThemeParser } from '@micromag/core';
|
|
8
8
|
import { createUseEvent, getMediaFilesAsArray } from '@micromag/core/utils';
|
|
9
|
-
import { useSpring, useSprings } from '@react-spring/core';
|
|
10
9
|
import { useDrag } from '@use-gesture/react';
|
|
10
|
+
import { useSpring, useSprings } from '@react-spring/core';
|
|
11
11
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
12
12
|
import { useForm as useForm$1 } from '@folklore/forms';
|
|
13
13
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
@@ -193,23 +193,42 @@ var useFormattedTime = function useFormattedTime() {
|
|
|
193
193
|
}, [now, showNow, timeGap, format]);
|
|
194
194
|
};
|
|
195
195
|
|
|
196
|
-
var useDebounced = function useDebounced(handler, watchedValue) {
|
|
197
|
-
var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
|
|
198
|
-
useEffect(function () {
|
|
199
|
-
var timeoutHandler = setTimeout(function () {
|
|
200
|
-
if (handler !== null) {
|
|
201
|
-
handler(watchedValue);
|
|
202
|
-
}
|
|
203
|
-
}, delay);
|
|
204
|
-
return function () {
|
|
205
|
-
clearTimeout(timeoutHandler);
|
|
206
|
-
};
|
|
207
|
-
}, [watchedValue, delay]);
|
|
208
|
-
};
|
|
209
|
-
|
|
210
196
|
var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
|
|
211
197
|
var useDocumentEvent = createUseEvent(eventsManager$1);
|
|
212
198
|
|
|
199
|
+
var getValueFromSpring = function getValueFromSpring(s) {
|
|
200
|
+
var _ref = s || {},
|
|
201
|
+
_ref$value = _ref.value,
|
|
202
|
+
v = _ref$value === void 0 ? null : _ref$value;
|
|
203
|
+
|
|
204
|
+
var _ref2 = v || {},
|
|
205
|
+
p = _ref2.progress;
|
|
206
|
+
|
|
207
|
+
return p;
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
function useSpringValue(wantedProgress, immediate, params) {
|
|
211
|
+
var _useState = useState(wantedProgress),
|
|
212
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
213
|
+
progress = _useState2[0],
|
|
214
|
+
setProgress = _useState2[1];
|
|
215
|
+
|
|
216
|
+
var onChange = useCallback(function (spring) {
|
|
217
|
+
return setProgress(getValueFromSpring(spring));
|
|
218
|
+
}, [setProgress]);
|
|
219
|
+
useSpring(_objectSpread({
|
|
220
|
+
progress: wantedProgress,
|
|
221
|
+
onChange: onChange,
|
|
222
|
+
immediate: immediate
|
|
223
|
+
}, params)); // useEffect(() => {
|
|
224
|
+
// if (wantedProgress !== null) {
|
|
225
|
+
// api.start({ progress: wantedProgress, immediate, ...params });
|
|
226
|
+
// }
|
|
227
|
+
// }, [wantedProgress, immediate, params, api]);
|
|
228
|
+
|
|
229
|
+
return immediate ? wantedProgress : progress;
|
|
230
|
+
}
|
|
231
|
+
|
|
213
232
|
function useDragProgress() {
|
|
214
233
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
215
234
|
wantedProgress = _ref.progress,
|
|
@@ -227,28 +246,21 @@ function useDragProgress() {
|
|
|
227
246
|
springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
|
|
228
247
|
_ref$dragOptions = _ref.dragOptions,
|
|
229
248
|
dragOptions = _ref$dragOptions === void 0 ? {
|
|
230
|
-
filterTaps: true
|
|
249
|
+
filterTaps: true,
|
|
250
|
+
preventDefault: true
|
|
231
251
|
} : _ref$dragOptions;
|
|
232
252
|
|
|
233
253
|
var refDragging = useRef(false);
|
|
234
|
-
var refProgress = useRef(wantedProgress);
|
|
235
254
|
|
|
236
|
-
var _useState = useState(
|
|
255
|
+
var _useState = useState({
|
|
256
|
+
dragging: false,
|
|
257
|
+
progress: wantedProgress
|
|
258
|
+
}),
|
|
237
259
|
_useState2 = _slicedToArray(_useState, 2),
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
return _objectSpread({
|
|
243
|
-
progress: wantedProgress,
|
|
244
|
-
immediate: dragging || disabled
|
|
245
|
-
}, springParams);
|
|
246
|
-
}, []);
|
|
247
|
-
|
|
248
|
-
var _useSpring = useSpring(spring),
|
|
249
|
-
_useSpring2 = _slicedToArray(_useSpring, 2),
|
|
250
|
-
progress = _useSpring2[0].progress,
|
|
251
|
-
api = _useSpring2[1];
|
|
260
|
+
_useState2$ = _useState2[0],
|
|
261
|
+
dragging = _useState2$.dragging,
|
|
262
|
+
progress = _useState2$.progress,
|
|
263
|
+
setDragState = _useState2[1];
|
|
252
264
|
|
|
253
265
|
var onDrag = useCallback(function (gestureState) {
|
|
254
266
|
if (disabled) {
|
|
@@ -269,35 +281,29 @@ function useDragProgress() {
|
|
|
269
281
|
|
|
270
282
|
var newProgress = computeProgress(gestureState);
|
|
271
283
|
refDragging.current = active;
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
setDragging(active);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
api.start({
|
|
279
|
-
progress: newProgress,
|
|
280
|
-
immediate: active
|
|
284
|
+
setDragState({
|
|
285
|
+
dragging: active,
|
|
286
|
+
progress: newProgress
|
|
281
287
|
});
|
|
282
288
|
|
|
283
289
|
if (onProgress !== null) {
|
|
284
290
|
onProgress(newProgress, gestureState);
|
|
285
291
|
}
|
|
286
|
-
}, [
|
|
292
|
+
}, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
|
|
287
293
|
var bind = useDrag(onDrag, dragOptions);
|
|
294
|
+
var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
|
|
288
295
|
useEffect(function () {
|
|
289
|
-
if (
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
progress: wantedProgress
|
|
293
|
-
immediate: false
|
|
296
|
+
if (wantedProgress !== progress && !refDragging.current) {
|
|
297
|
+
setDragState({
|
|
298
|
+
dragging: refDragging.current,
|
|
299
|
+
progress: wantedProgress
|
|
294
300
|
});
|
|
295
301
|
}
|
|
296
302
|
}, [wantedProgress]);
|
|
297
303
|
return {
|
|
298
304
|
bind: bind,
|
|
299
305
|
dragging: dragging,
|
|
300
|
-
progress:
|
|
306
|
+
progress: springedProgress
|
|
301
307
|
};
|
|
302
308
|
}
|
|
303
309
|
|
|
@@ -1483,17 +1489,16 @@ function useMediaProgress(media) {
|
|
|
1483
1489
|
var _useState = useState(!disabled),
|
|
1484
1490
|
_useState2 = _slicedToArray(_useState, 2),
|
|
1485
1491
|
playing = _useState2[0],
|
|
1486
|
-
setPlaying = _useState2[1];
|
|
1487
|
-
// disabled: disabled || !playing,
|
|
1488
|
-
// ...props,
|
|
1489
|
-
// });
|
|
1490
|
-
|
|
1492
|
+
setPlaying = _useState2[1];
|
|
1491
1493
|
|
|
1494
|
+
var currentTime = useMediaCurrentTime(media, _objectSpread({
|
|
1495
|
+
disabled: disabled || !playing
|
|
1496
|
+
}, props));
|
|
1492
1497
|
var duration = useMediaDuration(media, _objectSpread({
|
|
1493
1498
|
disabled: disabled || !playing
|
|
1494
1499
|
}, props));
|
|
1495
1500
|
|
|
1496
|
-
var _useState3 = useState(
|
|
1501
|
+
var _useState3 = useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
|
|
1497
1502
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
1498
1503
|
progress = _useState4[0],
|
|
1499
1504
|
setProgress = _useState4[1];
|
|
@@ -1528,8 +1533,8 @@ function useMediaProgress(media) {
|
|
|
1528
1533
|
|
|
1529
1534
|
media.addEventListener('play', onResume);
|
|
1530
1535
|
media.addEventListener('seeked', onResume);
|
|
1531
|
-
media.addEventListener('playing', onResume);
|
|
1532
|
-
|
|
1536
|
+
media.addEventListener('playing', onResume);
|
|
1537
|
+
media.addEventListener('timeupdate', onResume);
|
|
1533
1538
|
media.addEventListener('pause', onPause);
|
|
1534
1539
|
media.addEventListener('ended', onPause);
|
|
1535
1540
|
media.addEventListener('waiting', onPause);
|
|
@@ -1544,8 +1549,8 @@ function useMediaProgress(media) {
|
|
|
1544
1549
|
return function () {
|
|
1545
1550
|
media.removeEventListener('play', onResume);
|
|
1546
1551
|
media.removeEventListener('seeked', onResume);
|
|
1547
|
-
media.removeEventListener('playing', onResume);
|
|
1548
|
-
|
|
1552
|
+
media.removeEventListener('playing', onResume);
|
|
1553
|
+
media.removeEventListener('timeupdate', onResume);
|
|
1549
1554
|
media.removeEventListener('pause', onPause);
|
|
1550
1555
|
media.removeEventListener('ended', onPause);
|
|
1551
1556
|
media.removeEventListener('waiting', onPause);
|
|
@@ -1554,7 +1559,11 @@ function useMediaProgress(media) {
|
|
|
1554
1559
|
};
|
|
1555
1560
|
}, [media, updateProgress, setPlaying, playing]);
|
|
1556
1561
|
useEffect(function () {
|
|
1557
|
-
if (media === null
|
|
1562
|
+
if (media === null) {
|
|
1563
|
+
return function () {};
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
if (!playing || disabled) {
|
|
1558
1567
|
return function () {};
|
|
1559
1568
|
}
|
|
1560
1569
|
|
|
@@ -2003,34 +2012,6 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
|
2003
2012
|
return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
|
|
2004
2013
|
};
|
|
2005
2014
|
|
|
2006
|
-
var getValueFromSpring = function getValueFromSpring(s) {
|
|
2007
|
-
var _ref = s || {},
|
|
2008
|
-
_ref$value = _ref.value,
|
|
2009
|
-
v = _ref$value === void 0 ? null : _ref$value;
|
|
2010
|
-
|
|
2011
|
-
var _ref2 = v || {},
|
|
2012
|
-
p = _ref2.progress;
|
|
2013
|
-
|
|
2014
|
-
return p;
|
|
2015
|
-
};
|
|
2016
|
-
|
|
2017
|
-
function useSpringValue(wantedProgress, immediate, params) {
|
|
2018
|
-
var _useState = useState(wantedProgress),
|
|
2019
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
2020
|
-
progress = _useState2[0],
|
|
2021
|
-
setProgress = _useState2[1];
|
|
2022
|
-
|
|
2023
|
-
var onChange = useCallback(function (spring) {
|
|
2024
|
-
return setProgress(getValueFromSpring(spring));
|
|
2025
|
-
}, [setProgress]);
|
|
2026
|
-
useSpring(_objectSpread({
|
|
2027
|
-
progress: wantedProgress,
|
|
2028
|
-
onChange: onChange,
|
|
2029
|
-
immediate: immediate
|
|
2030
|
-
}, params));
|
|
2031
|
-
return immediate ? wantedProgress : progress;
|
|
2032
|
-
}
|
|
2033
|
-
|
|
2034
2015
|
var useSwipe = function useSwipe() {
|
|
2035
2016
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
2036
2017
|
_ref$width = _ref.width,
|
|
@@ -2352,4 +2333,4 @@ var useTrackMedia = function useTrackMedia() {
|
|
|
2352
2333
|
var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
|
|
2353
2334
|
var useWindowEvent = createUseEvent(eventsManager);
|
|
2354
2335
|
|
|
2355
|
-
export { getObserver, useActivityDetector, useAnimationFrame,
|
|
2336
|
+
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 };
|
package/es/utils.js
CHANGED
|
@@ -931,22 +931,6 @@ var getStyleFromMargin = function getStyleFromMargin(value) {
|
|
|
931
931
|
} : null);
|
|
932
932
|
};
|
|
933
933
|
|
|
934
|
-
var possibleMimes = ['video/webm', 'video/mp4', 'video/ogg'];
|
|
935
|
-
var supportedMimes = null;
|
|
936
|
-
|
|
937
|
-
function getVideoSupportedMimes() {
|
|
938
|
-
var mimes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : possibleMimes;
|
|
939
|
-
|
|
940
|
-
if (supportedMimes === null) {
|
|
941
|
-
var video = document.createElement('video');
|
|
942
|
-
supportedMimes = mimes.filter(function (mime) {
|
|
943
|
-
return video.canPlayType(mime) !== '';
|
|
944
|
-
});
|
|
945
|
-
}
|
|
946
|
-
|
|
947
|
-
return supportedMimes;
|
|
948
|
-
}
|
|
949
|
-
|
|
950
934
|
var getLayoutParts = function getLayoutParts() {
|
|
951
935
|
var layout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
952
936
|
|
|
@@ -1109,4 +1093,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
|
|
|
1109
1093
|
return tinycolor(color).spin(30).toString();
|
|
1110
1094
|
};
|
|
1111
1095
|
|
|
1112
|
-
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,
|
|
1096
|
+
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 };
|
package/lib/components.js
CHANGED
|
@@ -3675,7 +3675,6 @@ var propTypes$9 = {
|
|
|
3675
3675
|
screen: core.PropTypes.storyComponent.isRequired,
|
|
3676
3676
|
renderContext: core.PropTypes.renderContext,
|
|
3677
3677
|
screenState: PropTypes__default["default"].string,
|
|
3678
|
-
index: PropTypes__default["default"].number,
|
|
3679
3678
|
active: PropTypes__default["default"].bool,
|
|
3680
3679
|
current: PropTypes__default["default"].bool,
|
|
3681
3680
|
component: PropTypes__default["default"].node,
|
|
@@ -3687,7 +3686,6 @@ var defaultProps$9 = {
|
|
|
3687
3686
|
active: true,
|
|
3688
3687
|
renderContext: null,
|
|
3689
3688
|
screenState: null,
|
|
3690
|
-
index: null,
|
|
3691
3689
|
current: false,
|
|
3692
3690
|
component: null,
|
|
3693
3691
|
components: null,
|
|
@@ -3699,7 +3697,6 @@ var Screen = function Screen(_ref) {
|
|
|
3699
3697
|
var screen = _ref.screen,
|
|
3700
3698
|
renderContext = _ref.renderContext,
|
|
3701
3699
|
screenState = _ref.screenState,
|
|
3702
|
-
index = _ref.index,
|
|
3703
3700
|
active = _ref.active,
|
|
3704
3701
|
current = _ref.current,
|
|
3705
3702
|
components = _ref.components,
|
|
@@ -3721,7 +3718,6 @@ var Screen = function Screen(_ref) {
|
|
|
3721
3718
|
}, ScreenComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3722
3719
|
className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
3723
3720
|
}, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, Object.assign({}, screen, {
|
|
3724
|
-
index: index,
|
|
3725
3721
|
active: active,
|
|
3726
3722
|
current: current,
|
|
3727
3723
|
mediaRef: mediaRef
|
package/lib/hooks.js
CHANGED
|
@@ -10,8 +10,8 @@ var isString = require('lodash/isString');
|
|
|
10
10
|
var dayjs = require('dayjs');
|
|
11
11
|
var core = require('@micromag/core');
|
|
12
12
|
var utils = require('@micromag/core/utils');
|
|
13
|
-
var core$1 = require('@react-spring/core');
|
|
14
13
|
var react$1 = require('@use-gesture/react');
|
|
14
|
+
var core$1 = require('@react-spring/core');
|
|
15
15
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
16
16
|
var forms = require('@folklore/forms');
|
|
17
17
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
@@ -231,23 +231,42 @@ var useFormattedTime = function useFormattedTime() {
|
|
|
231
231
|
}, [now, showNow, timeGap, format]);
|
|
232
232
|
};
|
|
233
233
|
|
|
234
|
-
var useDebounced = function useDebounced(handler, watchedValue) {
|
|
235
|
-
var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
|
|
236
|
-
react.useEffect(function () {
|
|
237
|
-
var timeoutHandler = setTimeout(function () {
|
|
238
|
-
if (handler !== null) {
|
|
239
|
-
handler(watchedValue);
|
|
240
|
-
}
|
|
241
|
-
}, delay);
|
|
242
|
-
return function () {
|
|
243
|
-
clearTimeout(timeoutHandler);
|
|
244
|
-
};
|
|
245
|
-
}, [watchedValue, delay]);
|
|
246
|
-
};
|
|
247
|
-
|
|
248
234
|
var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
|
|
249
235
|
var useDocumentEvent = utils.createUseEvent(eventsManager$1);
|
|
250
236
|
|
|
237
|
+
var getValueFromSpring = function getValueFromSpring(s) {
|
|
238
|
+
var _ref = s || {},
|
|
239
|
+
_ref$value = _ref.value,
|
|
240
|
+
v = _ref$value === void 0 ? null : _ref$value;
|
|
241
|
+
|
|
242
|
+
var _ref2 = v || {},
|
|
243
|
+
p = _ref2.progress;
|
|
244
|
+
|
|
245
|
+
return p;
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
function useSpringValue(wantedProgress, immediate, params) {
|
|
249
|
+
var _useState = react.useState(wantedProgress),
|
|
250
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
251
|
+
progress = _useState2[0],
|
|
252
|
+
setProgress = _useState2[1];
|
|
253
|
+
|
|
254
|
+
var onChange = react.useCallback(function (spring) {
|
|
255
|
+
return setProgress(getValueFromSpring(spring));
|
|
256
|
+
}, [setProgress]);
|
|
257
|
+
core$1.useSpring(_objectSpread__default["default"]({
|
|
258
|
+
progress: wantedProgress,
|
|
259
|
+
onChange: onChange,
|
|
260
|
+
immediate: immediate
|
|
261
|
+
}, params)); // useEffect(() => {
|
|
262
|
+
// if (wantedProgress !== null) {
|
|
263
|
+
// api.start({ progress: wantedProgress, immediate, ...params });
|
|
264
|
+
// }
|
|
265
|
+
// }, [wantedProgress, immediate, params, api]);
|
|
266
|
+
|
|
267
|
+
return immediate ? wantedProgress : progress;
|
|
268
|
+
}
|
|
269
|
+
|
|
251
270
|
function useDragProgress() {
|
|
252
271
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
253
272
|
wantedProgress = _ref.progress,
|
|
@@ -265,28 +284,21 @@ function useDragProgress() {
|
|
|
265
284
|
springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
|
|
266
285
|
_ref$dragOptions = _ref.dragOptions,
|
|
267
286
|
dragOptions = _ref$dragOptions === void 0 ? {
|
|
268
|
-
filterTaps: true
|
|
287
|
+
filterTaps: true,
|
|
288
|
+
preventDefault: true
|
|
269
289
|
} : _ref$dragOptions;
|
|
270
290
|
|
|
271
291
|
var refDragging = react.useRef(false);
|
|
272
|
-
var refProgress = react.useRef(wantedProgress);
|
|
273
292
|
|
|
274
|
-
var _useState = react.useState(
|
|
293
|
+
var _useState = react.useState({
|
|
294
|
+
dragging: false,
|
|
295
|
+
progress: wantedProgress
|
|
296
|
+
}),
|
|
275
297
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
return _objectSpread__default["default"]({
|
|
281
|
-
progress: wantedProgress,
|
|
282
|
-
immediate: dragging || disabled
|
|
283
|
-
}, springParams);
|
|
284
|
-
}, []);
|
|
285
|
-
|
|
286
|
-
var _useSpring = core$1.useSpring(spring),
|
|
287
|
-
_useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
|
|
288
|
-
progress = _useSpring2[0].progress,
|
|
289
|
-
api = _useSpring2[1];
|
|
298
|
+
_useState2$ = _useState2[0],
|
|
299
|
+
dragging = _useState2$.dragging,
|
|
300
|
+
progress = _useState2$.progress,
|
|
301
|
+
setDragState = _useState2[1];
|
|
290
302
|
|
|
291
303
|
var onDrag = react.useCallback(function (gestureState) {
|
|
292
304
|
if (disabled) {
|
|
@@ -307,35 +319,29 @@ function useDragProgress() {
|
|
|
307
319
|
|
|
308
320
|
var newProgress = computeProgress(gestureState);
|
|
309
321
|
refDragging.current = active;
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
setDragging(active);
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
api.start({
|
|
317
|
-
progress: newProgress,
|
|
318
|
-
immediate: active
|
|
322
|
+
setDragState({
|
|
323
|
+
dragging: active,
|
|
324
|
+
progress: newProgress
|
|
319
325
|
});
|
|
320
326
|
|
|
321
327
|
if (onProgress !== null) {
|
|
322
328
|
onProgress(newProgress, gestureState);
|
|
323
329
|
}
|
|
324
|
-
}, [
|
|
330
|
+
}, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
|
|
325
331
|
var bind = react$1.useDrag(onDrag, dragOptions);
|
|
332
|
+
var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
|
|
326
333
|
react.useEffect(function () {
|
|
327
|
-
if (
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
progress: wantedProgress
|
|
331
|
-
immediate: false
|
|
334
|
+
if (wantedProgress !== progress && !refDragging.current) {
|
|
335
|
+
setDragState({
|
|
336
|
+
dragging: refDragging.current,
|
|
337
|
+
progress: wantedProgress
|
|
332
338
|
});
|
|
333
339
|
}
|
|
334
340
|
}, [wantedProgress]);
|
|
335
341
|
return {
|
|
336
342
|
bind: bind,
|
|
337
343
|
dragging: dragging,
|
|
338
|
-
progress:
|
|
344
|
+
progress: springedProgress
|
|
339
345
|
};
|
|
340
346
|
}
|
|
341
347
|
|
|
@@ -1521,17 +1527,16 @@ function useMediaProgress(media) {
|
|
|
1521
1527
|
var _useState = react.useState(!disabled),
|
|
1522
1528
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1523
1529
|
playing = _useState2[0],
|
|
1524
|
-
setPlaying = _useState2[1];
|
|
1525
|
-
// disabled: disabled || !playing,
|
|
1526
|
-
// ...props,
|
|
1527
|
-
// });
|
|
1528
|
-
|
|
1530
|
+
setPlaying = _useState2[1];
|
|
1529
1531
|
|
|
1532
|
+
var currentTime = useMediaCurrentTime(media, _objectSpread__default["default"]({
|
|
1533
|
+
disabled: disabled || !playing
|
|
1534
|
+
}, props));
|
|
1530
1535
|
var duration = useMediaDuration(media, _objectSpread__default["default"]({
|
|
1531
1536
|
disabled: disabled || !playing
|
|
1532
1537
|
}, props));
|
|
1533
1538
|
|
|
1534
|
-
var _useState3 = react.useState(
|
|
1539
|
+
var _useState3 = react.useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
|
|
1535
1540
|
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
1536
1541
|
progress = _useState4[0],
|
|
1537
1542
|
setProgress = _useState4[1];
|
|
@@ -1566,8 +1571,8 @@ function useMediaProgress(media) {
|
|
|
1566
1571
|
|
|
1567
1572
|
media.addEventListener('play', onResume);
|
|
1568
1573
|
media.addEventListener('seeked', onResume);
|
|
1569
|
-
media.addEventListener('playing', onResume);
|
|
1570
|
-
|
|
1574
|
+
media.addEventListener('playing', onResume);
|
|
1575
|
+
media.addEventListener('timeupdate', onResume);
|
|
1571
1576
|
media.addEventListener('pause', onPause);
|
|
1572
1577
|
media.addEventListener('ended', onPause);
|
|
1573
1578
|
media.addEventListener('waiting', onPause);
|
|
@@ -1582,8 +1587,8 @@ function useMediaProgress(media) {
|
|
|
1582
1587
|
return function () {
|
|
1583
1588
|
media.removeEventListener('play', onResume);
|
|
1584
1589
|
media.removeEventListener('seeked', onResume);
|
|
1585
|
-
media.removeEventListener('playing', onResume);
|
|
1586
|
-
|
|
1590
|
+
media.removeEventListener('playing', onResume);
|
|
1591
|
+
media.removeEventListener('timeupdate', onResume);
|
|
1587
1592
|
media.removeEventListener('pause', onPause);
|
|
1588
1593
|
media.removeEventListener('ended', onPause);
|
|
1589
1594
|
media.removeEventListener('waiting', onPause);
|
|
@@ -1592,7 +1597,11 @@ function useMediaProgress(media) {
|
|
|
1592
1597
|
};
|
|
1593
1598
|
}, [media, updateProgress, setPlaying, playing]);
|
|
1594
1599
|
react.useEffect(function () {
|
|
1595
|
-
if (media === null
|
|
1600
|
+
if (media === null) {
|
|
1601
|
+
return function () {};
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1604
|
+
if (!playing || disabled) {
|
|
1596
1605
|
return function () {};
|
|
1597
1606
|
}
|
|
1598
1607
|
|
|
@@ -2041,34 +2050,6 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
|
2041
2050
|
return useScreenSize(_objectSpread__default["default"](_objectSpread__default["default"]({}, opts), windowSize));
|
|
2042
2051
|
};
|
|
2043
2052
|
|
|
2044
|
-
var getValueFromSpring = function getValueFromSpring(s) {
|
|
2045
|
-
var _ref = s || {},
|
|
2046
|
-
_ref$value = _ref.value,
|
|
2047
|
-
v = _ref$value === void 0 ? null : _ref$value;
|
|
2048
|
-
|
|
2049
|
-
var _ref2 = v || {},
|
|
2050
|
-
p = _ref2.progress;
|
|
2051
|
-
|
|
2052
|
-
return p;
|
|
2053
|
-
};
|
|
2054
|
-
|
|
2055
|
-
function useSpringValue(wantedProgress, immediate, params) {
|
|
2056
|
-
var _useState = react.useState(wantedProgress),
|
|
2057
|
-
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
2058
|
-
progress = _useState2[0],
|
|
2059
|
-
setProgress = _useState2[1];
|
|
2060
|
-
|
|
2061
|
-
var onChange = react.useCallback(function (spring) {
|
|
2062
|
-
return setProgress(getValueFromSpring(spring));
|
|
2063
|
-
}, [setProgress]);
|
|
2064
|
-
core$1.useSpring(_objectSpread__default["default"]({
|
|
2065
|
-
progress: wantedProgress,
|
|
2066
|
-
onChange: onChange,
|
|
2067
|
-
immediate: immediate
|
|
2068
|
-
}, params));
|
|
2069
|
-
return immediate ? wantedProgress : progress;
|
|
2070
|
-
}
|
|
2071
|
-
|
|
2072
2053
|
var useSwipe = function useSwipe() {
|
|
2073
2054
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
2074
2055
|
_ref$width = _ref.width,
|
|
@@ -2393,7 +2374,6 @@ var useWindowEvent = utils.createUseEvent(eventsManager);
|
|
|
2393
2374
|
exports.getObserver = getObserver;
|
|
2394
2375
|
exports.useActivityDetector = useActivityDetector;
|
|
2395
2376
|
exports.useAnimationFrame = useAnimationFrame;
|
|
2396
|
-
exports.useDebounce = useDebounced;
|
|
2397
2377
|
exports.useDimensionObserver = useDimensionObserver;
|
|
2398
2378
|
exports.useDocumentEvent = useDocumentEvent;
|
|
2399
2379
|
exports.useDragProgress = useDragProgress;
|
package/lib/utils.js
CHANGED
|
@@ -950,22 +950,6 @@ var getStyleFromMargin = function getStyleFromMargin(value) {
|
|
|
950
950
|
} : null);
|
|
951
951
|
};
|
|
952
952
|
|
|
953
|
-
var possibleMimes = ['video/webm', 'video/mp4', 'video/ogg'];
|
|
954
|
-
var supportedMimes = null;
|
|
955
|
-
|
|
956
|
-
function getVideoSupportedMimes() {
|
|
957
|
-
var mimes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : possibleMimes;
|
|
958
|
-
|
|
959
|
-
if (supportedMimes === null) {
|
|
960
|
-
var video = document.createElement('video');
|
|
961
|
-
supportedMimes = mimes.filter(function (mime) {
|
|
962
|
-
return video.canPlayType(mime) !== '';
|
|
963
|
-
});
|
|
964
|
-
}
|
|
965
|
-
|
|
966
|
-
return supportedMimes;
|
|
967
|
-
}
|
|
968
|
-
|
|
969
953
|
var getLayoutParts = function getLayoutParts() {
|
|
970
954
|
var layout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
971
955
|
|
|
@@ -1168,7 +1152,6 @@ exports.getStyleFromImage = getStyleFromImage;
|
|
|
1168
1152
|
exports.getStyleFromLink = getStyleFromLink;
|
|
1169
1153
|
exports.getStyleFromMargin = getStyleFromMargin;
|
|
1170
1154
|
exports.getStyleFromText = getStyleFromText;
|
|
1171
|
-
exports.getVideoSupportedMimes = getVideoSupportedMimes;
|
|
1172
1155
|
exports.isImageFilled = isImageFilled;
|
|
1173
1156
|
exports.isIos = isIos;
|
|
1174
1157
|
exports.isLabelFilled = isTextFilled$1;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/core",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.251",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
"publishConfig": {
|
|
134
134
|
"access": "public"
|
|
135
135
|
},
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
|
|
137
137
|
}
|