@micromag/core 0.3.311 → 0.3.322
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/assets/css/styles.css +21 -21
- package/assets/css/vendor.css +1 -1
- package/es/components.js +650 -859
- package/es/contexts.js +304 -442
- package/es/hooks.js +448 -694
- package/es/index.js +247 -391
- package/es/utils.js +294 -391
- package/lib/components.js +649 -858
- package/lib/contexts.js +304 -442
- package/lib/hooks.js +448 -694
- package/lib/index.js +247 -391
- package/lib/utils.js +294 -391
- package/package.json +6 -6
package/es/hooks.js
CHANGED
|
@@ -23,53 +23,42 @@ import clamp from 'lodash/clamp';
|
|
|
23
23
|
|
|
24
24
|
function useActivityDetector() {
|
|
25
25
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
_ref$element = _ref.element,
|
|
27
|
+
providedElement = _ref$element === void 0 ? null : _ref$element,
|
|
28
|
+
_ref$disabled = _ref.disabled,
|
|
29
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
30
|
+
_ref$timeout = _ref.timeout,
|
|
31
|
+
timeoutDelay = _ref$timeout === void 0 ? 2000 : _ref$timeout;
|
|
33
32
|
var ref = useRef(providedElement);
|
|
34
|
-
|
|
35
33
|
var _useState = useState(false),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
35
|
+
detected = _useState2[0],
|
|
36
|
+
setDetected = _useState2[1];
|
|
40
37
|
var detectedRef = useRef(detected);
|
|
41
|
-
|
|
42
38
|
if (providedElement !== null && providedElement !== ref.current) {
|
|
43
39
|
ref.current = providedElement;
|
|
44
40
|
}
|
|
45
|
-
|
|
46
41
|
useEffect(function () {
|
|
47
42
|
var _ref$current = ref.current,
|
|
48
|
-
|
|
49
|
-
|
|
43
|
+
element = _ref$current === void 0 ? null : _ref$current;
|
|
50
44
|
if (element === null || disabled) {
|
|
51
45
|
return function () {};
|
|
52
46
|
}
|
|
53
|
-
|
|
54
47
|
var timeout = null;
|
|
55
|
-
|
|
56
48
|
function onActivity() {
|
|
57
49
|
if (timeout !== null) {
|
|
58
50
|
clearTimeout(timeout);
|
|
59
51
|
timeout = null;
|
|
60
52
|
}
|
|
61
|
-
|
|
62
53
|
if (!detectedRef.current) {
|
|
63
54
|
detectedRef.current = true;
|
|
64
55
|
setDetected(true);
|
|
65
56
|
}
|
|
66
|
-
|
|
67
57
|
timeout = setTimeout(function () {
|
|
68
58
|
detectedRef.current = false;
|
|
69
59
|
setDetected(false);
|
|
70
60
|
}, timeoutDelay);
|
|
71
61
|
}
|
|
72
|
-
|
|
73
62
|
element.addEventListener('keydown', onActivity);
|
|
74
63
|
element.addEventListener('mousedown', onActivity);
|
|
75
64
|
element.addEventListener('mousemove', onActivity);
|
|
@@ -84,7 +73,6 @@ function useActivityDetector() {
|
|
|
84
73
|
clearTimeout(timeout);
|
|
85
74
|
timeout = null;
|
|
86
75
|
}
|
|
87
|
-
|
|
88
76
|
element.removeEventListener('keydown', onActivity);
|
|
89
77
|
element.removeEventListener('mousedown', onActivity);
|
|
90
78
|
element.removeEventListener('mousemove', onActivity);
|
|
@@ -104,27 +92,22 @@ function useActivityDetector() {
|
|
|
104
92
|
|
|
105
93
|
var useAnimationFrame = function useAnimationFrame(onFrame) {
|
|
106
94
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
95
|
+
_ref$disabled = _ref.disabled,
|
|
96
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
110
97
|
var requestRef = useRef(null);
|
|
111
98
|
var startTimeRef = useRef(null);
|
|
112
|
-
|
|
113
99
|
var callback = function callback(time) {
|
|
114
100
|
if (!startTimeRef.current) {
|
|
115
101
|
startTimeRef.current = time;
|
|
116
102
|
}
|
|
117
|
-
|
|
118
103
|
var progress = time - startTimeRef.current;
|
|
119
104
|
onFrame(progress);
|
|
120
105
|
requestRef.current = requestAnimationFrame(callback);
|
|
121
106
|
};
|
|
122
|
-
|
|
123
107
|
useEffect(function () {
|
|
124
108
|
if (!disabled) {
|
|
125
109
|
requestRef.current = requestAnimationFrame(callback);
|
|
126
110
|
}
|
|
127
|
-
|
|
128
111
|
return function () {
|
|
129
112
|
if (requestRef.current !== null) {
|
|
130
113
|
cancelAnimationFrame(requestRef.current);
|
|
@@ -135,16 +118,14 @@ var useAnimationFrame = function useAnimationFrame(onFrame) {
|
|
|
135
118
|
|
|
136
119
|
var useFormattedDate = function useFormattedDate() {
|
|
137
120
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
121
|
+
_ref$format = _ref.format,
|
|
122
|
+
format = _ref$format === void 0 ? null : _ref$format,
|
|
123
|
+
_ref$showToday = _ref.showToday,
|
|
124
|
+
showToday = _ref$showToday === void 0 ? true : _ref$showToday;
|
|
143
125
|
var intl = useIntl();
|
|
144
126
|
var today = dayjs();
|
|
145
127
|
return useCallback(function (date) {
|
|
146
128
|
var dateToFormat = isString(date) ? dayjs(date) : date;
|
|
147
|
-
|
|
148
129
|
if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
|
|
149
130
|
return intl.formatMessage({
|
|
150
131
|
id: "v4Qtl9",
|
|
@@ -154,7 +135,6 @@ var useFormattedDate = function useFormattedDate() {
|
|
|
154
135
|
}]
|
|
155
136
|
});
|
|
156
137
|
}
|
|
157
|
-
|
|
158
138
|
return intl.formatDate(dayjs(date).toDate(), _objectSpread({
|
|
159
139
|
year: 'numeric',
|
|
160
140
|
month: 'long',
|
|
@@ -164,18 +144,16 @@ var useFormattedDate = function useFormattedDate() {
|
|
|
164
144
|
};
|
|
165
145
|
var useFormattedTime = function useFormattedTime() {
|
|
166
146
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
147
|
+
_ref2$format = _ref2.format,
|
|
148
|
+
format = _ref2$format === void 0 ? null : _ref2$format,
|
|
149
|
+
_ref2$showNow = _ref2.showNow,
|
|
150
|
+
showNow = _ref2$showNow === void 0 ? true : _ref2$showNow,
|
|
151
|
+
_ref2$timeGap = _ref2.timeGap,
|
|
152
|
+
timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
|
|
174
153
|
var intl = useIntl();
|
|
175
154
|
var now = dayjs();
|
|
176
155
|
return useCallback(function (date) {
|
|
177
156
|
var dateToFormat = isString(date) ? dayjs(date) : date;
|
|
178
|
-
|
|
179
157
|
if (showNow && dateToFormat.format('YYYY-MM-DD') === now.format('YYYY-MM-DD') && dateToFormat.hour() === now.hour() && dateToFormat.minute() > now.minute() - timeGap && dateToFormat.minute() < now.minute() + timeGap) {
|
|
180
158
|
return intl.formatMessage({
|
|
181
159
|
id: "3na7F8",
|
|
@@ -185,7 +163,6 @@ var useFormattedTime = function useFormattedTime() {
|
|
|
185
163
|
}]
|
|
186
164
|
});
|
|
187
165
|
}
|
|
188
|
-
|
|
189
166
|
return intl.formatTime(dateToFormat.toDate(), _objectSpread({
|
|
190
167
|
hour: 'numeric',
|
|
191
168
|
minute: 'numeric'
|
|
@@ -212,74 +189,62 @@ var useDocumentEvent = createUseEvent(eventsManager$1);
|
|
|
212
189
|
|
|
213
190
|
function useDragProgress() {
|
|
214
191
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
192
|
+
wantedProgress = _ref.progress,
|
|
193
|
+
_ref$onTap = _ref.onTap,
|
|
194
|
+
onTap = _ref$onTap === void 0 ? null : _ref$onTap,
|
|
195
|
+
_ref$disabled = _ref.disabled,
|
|
196
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
197
|
+
_ref$dragDisabled = _ref.dragDisabled,
|
|
198
|
+
dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
|
|
199
|
+
_ref$computeProgress = _ref.computeProgress,
|
|
200
|
+
computeProgress = _ref$computeProgress === void 0 ? null : _ref$computeProgress,
|
|
201
|
+
_ref$onProgress = _ref.onProgress,
|
|
202
|
+
onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
|
|
203
|
+
_ref$springParams = _ref.springParams,
|
|
204
|
+
springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
|
|
205
|
+
_ref$dragOptions = _ref.dragOptions,
|
|
206
|
+
dragOptions = _ref$dragOptions === void 0 ? {
|
|
207
|
+
filterTaps: true
|
|
208
|
+
} : _ref$dragOptions;
|
|
233
209
|
var refDragging = useRef(false);
|
|
234
210
|
var refProgress = useRef(wantedProgress);
|
|
235
|
-
|
|
236
211
|
var _useState = useState(false),
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
212
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
213
|
+
dragging = _useState2[0],
|
|
214
|
+
setDragging = _useState2[1];
|
|
241
215
|
var spring = useCallback(function () {
|
|
242
216
|
return _objectSpread({
|
|
243
217
|
progress: wantedProgress,
|
|
244
218
|
immediate: dragging || disabled
|
|
245
219
|
}, springParams);
|
|
246
|
-
}, []);
|
|
247
|
-
|
|
220
|
+
}, [wantedProgress, disabled]);
|
|
248
221
|
var _useSpring = useSpring(spring),
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
222
|
+
_useSpring2 = _slicedToArray(_useSpring, 2),
|
|
223
|
+
progress = _useSpring2[0].progress,
|
|
224
|
+
api = _useSpring2[1];
|
|
253
225
|
var onDrag = useCallback(function (gestureState) {
|
|
226
|
+
var active = gestureState.active,
|
|
227
|
+
tap = gestureState.tap;
|
|
254
228
|
if (disabled) {
|
|
255
229
|
return;
|
|
256
230
|
}
|
|
257
|
-
|
|
258
|
-
var active = gestureState.active,
|
|
259
|
-
tap = gestureState.tap;
|
|
260
|
-
|
|
261
231
|
if (tap) {
|
|
262
232
|
if (onTap !== null) onTap(gestureState);
|
|
263
233
|
return;
|
|
264
234
|
}
|
|
265
|
-
|
|
266
235
|
if (dragDisabled) {
|
|
267
236
|
return;
|
|
268
237
|
}
|
|
269
|
-
|
|
270
238
|
var newProgress = computeProgress(gestureState);
|
|
271
239
|
refDragging.current = active;
|
|
272
240
|
refProgress.current = newProgress;
|
|
273
|
-
|
|
274
241
|
if (active !== dragging) {
|
|
275
242
|
setDragging(active);
|
|
276
243
|
}
|
|
277
|
-
|
|
278
244
|
api.start({
|
|
279
245
|
progress: newProgress,
|
|
280
246
|
immediate: active
|
|
281
247
|
});
|
|
282
|
-
|
|
283
248
|
if (onProgress !== null) {
|
|
284
249
|
onProgress(newProgress, gestureState);
|
|
285
250
|
}
|
|
@@ -302,29 +267,27 @@ function useDragProgress() {
|
|
|
302
267
|
}
|
|
303
268
|
|
|
304
269
|
var _excluded$3 = ["fields", "injectInFields"],
|
|
305
|
-
|
|
270
|
+
_excluded2 = ["fields"];
|
|
306
271
|
|
|
272
|
+
// eslint-disable-next-line
|
|
307
273
|
var useForm = function useForm() {
|
|
308
274
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
275
|
+
_ref$fields = _ref.fields,
|
|
276
|
+
providedFields = _ref$fields === void 0 ? [] : _ref$fields,
|
|
277
|
+
_ref$injectInFields = _ref.injectInFields,
|
|
278
|
+
injectInFields = _ref$injectInFields === void 0 ? false : _ref$injectInFields,
|
|
279
|
+
opts = _objectWithoutProperties(_ref, _excluded$3);
|
|
315
280
|
var fieldsNames = useMemo(function () {
|
|
316
281
|
return providedFields.length > 0 ? providedFields.map(function (_ref2) {
|
|
317
282
|
var name = _ref2.name;
|
|
318
283
|
return name;
|
|
319
284
|
}) : [];
|
|
320
285
|
}, [providedFields]);
|
|
321
|
-
|
|
322
286
|
var _useBaseForm = useForm$1(_objectSpread({
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
287
|
+
fields: fieldsNames
|
|
288
|
+
}, opts)),
|
|
289
|
+
fields = _useBaseForm.fields,
|
|
290
|
+
form = _objectWithoutProperties(_useBaseForm, _excluded2);
|
|
328
291
|
return _objectSpread(_objectSpread({}, form), {}, {
|
|
329
292
|
fields: injectInFields ? providedFields.map(function (it) {
|
|
330
293
|
return _objectSpread(_objectSpread({}, it), fields[it.name] || null);
|
|
@@ -338,18 +301,15 @@ var useFormTransition = function useFormTransition() {
|
|
|
338
301
|
var lastPageRef = useRef(paths || []);
|
|
339
302
|
var direction = useMemo(function () {
|
|
340
303
|
var currentPartsCount = paths.length;
|
|
341
|
-
|
|
342
304
|
if (lastPageRef.current) {
|
|
343
305
|
var previousPartsCount = lastPageRef.current.length;
|
|
344
306
|
lastPageRef.current = paths || [];
|
|
345
307
|
return currentPartsCount > previousPartsCount ? 'right' : 'left';
|
|
346
308
|
}
|
|
347
|
-
|
|
348
309
|
return null;
|
|
349
310
|
}, [paths]);
|
|
350
311
|
var name = useMemo(function () {
|
|
351
312
|
var _classNames, _classNames2, _classNames3;
|
|
352
|
-
|
|
353
313
|
return {
|
|
354
314
|
enter: classNames((_classNames = {}, _defineProperty(_classNames, styles.enterRight, direction === 'right'), _defineProperty(_classNames, styles.enterLeft, direction === 'left'), _defineProperty(_classNames, styles.enterTop, direction === 'top'), _defineProperty(_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
|
|
355
315
|
enterActive: classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty(_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
|
|
@@ -366,12 +326,10 @@ var useFormTransition = function useFormTransition() {
|
|
|
366
326
|
|
|
367
327
|
var useFullscreen = function useFullscreen(element) {
|
|
368
328
|
var enabled = screenfull.isEnabled;
|
|
369
|
-
|
|
370
329
|
var _useState = useState(false),
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
330
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
331
|
+
active = _useState2[0],
|
|
332
|
+
setActive = _useState2[1];
|
|
375
333
|
var fullscreen = useCallback(function () {
|
|
376
334
|
if (screenfull.isEnabled) {
|
|
377
335
|
if (typeof element !== 'undefined' && element !== null) {
|
|
@@ -397,11 +355,9 @@ var useFullscreen = function useFullscreen(element) {
|
|
|
397
355
|
var onChange = function onChange() {
|
|
398
356
|
setActive(screenfull.isFullscreen);
|
|
399
357
|
};
|
|
400
|
-
|
|
401
358
|
if (screenfull.isEnabled) {
|
|
402
359
|
screenfull.on('change', onChange);
|
|
403
360
|
}
|
|
404
|
-
|
|
405
361
|
return function () {
|
|
406
362
|
if (screenfull.isEnabled) {
|
|
407
363
|
screenfull.off('change', onChange);
|
|
@@ -418,31 +374,25 @@ var useFullscreen = function useFullscreen(element) {
|
|
|
418
374
|
};
|
|
419
375
|
|
|
420
376
|
var _excluded$2 = ["entry"];
|
|
421
|
-
|
|
422
377
|
var buildThresholdArray = function buildThresholdArray() {
|
|
423
378
|
return [0, 1.0];
|
|
424
379
|
};
|
|
425
|
-
|
|
426
380
|
var observersCache = new Map();
|
|
427
|
-
|
|
428
381
|
var getOptionsKey = function getOptionsKey(_ref) {
|
|
429
382
|
var _ref$root = _ref.root,
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
383
|
+
root = _ref$root === void 0 ? null : _ref$root,
|
|
384
|
+
rootMargin = _ref.rootMargin,
|
|
385
|
+
_ref$threshold = _ref.threshold,
|
|
386
|
+
threshold = _ref$threshold === void 0 ? null : _ref$threshold;
|
|
434
387
|
return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
|
|
435
388
|
};
|
|
436
|
-
|
|
437
389
|
var createObserver = function createObserver(Observer) {
|
|
438
390
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
439
391
|
var subscribers = [];
|
|
440
|
-
|
|
441
392
|
var addSubscriber = function addSubscriber(element, callback) {
|
|
442
393
|
var currentSubscriber = subscribers.find(function (it) {
|
|
443
394
|
return it.element === element;
|
|
444
395
|
}) || null;
|
|
445
|
-
|
|
446
396
|
if (currentSubscriber !== null) {
|
|
447
397
|
return subscribers.map(function (it) {
|
|
448
398
|
return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, it), {}, {
|
|
@@ -452,13 +402,11 @@ var createObserver = function createObserver(Observer) {
|
|
|
452
402
|
return it.callbacks.length > 0;
|
|
453
403
|
});
|
|
454
404
|
}
|
|
455
|
-
|
|
456
405
|
return [].concat(_toConsumableArray(subscribers), [{
|
|
457
406
|
element: element,
|
|
458
407
|
callbacks: [callback]
|
|
459
408
|
}]);
|
|
460
409
|
};
|
|
461
|
-
|
|
462
410
|
var removeSubscriber = function removeSubscriber(element, callback) {
|
|
463
411
|
return subscribers.map(function (it) {
|
|
464
412
|
return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
|
|
@@ -470,13 +418,11 @@ var createObserver = function createObserver(Observer) {
|
|
|
470
418
|
return it.callbacks.length > 0;
|
|
471
419
|
});
|
|
472
420
|
};
|
|
473
|
-
|
|
474
421
|
var onUpdate = function onUpdate(entries) {
|
|
475
422
|
entries.forEach(function (entry) {
|
|
476
423
|
subscribers.forEach(function (_ref2) {
|
|
477
424
|
var element = _ref2.element,
|
|
478
|
-
|
|
479
|
-
|
|
425
|
+
callbacks = _ref2.callbacks;
|
|
480
426
|
if (element === entry.target) {
|
|
481
427
|
callbacks.forEach(function (callback) {
|
|
482
428
|
callback(entry);
|
|
@@ -485,13 +431,10 @@ var createObserver = function createObserver(Observer) {
|
|
|
485
431
|
});
|
|
486
432
|
});
|
|
487
433
|
};
|
|
488
|
-
|
|
489
434
|
var observer = new Observer(onUpdate, options);
|
|
490
|
-
|
|
491
435
|
var unsubscribe = function unsubscribe(element) {
|
|
492
436
|
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
493
437
|
subscribers = removeSubscriber(element, callback);
|
|
494
|
-
|
|
495
438
|
if (typeof observer.unobserve === 'undefined') {
|
|
496
439
|
observer.disconnect();
|
|
497
440
|
subscribers.forEach(function (subscriber) {
|
|
@@ -499,103 +442,82 @@ var createObserver = function createObserver(Observer) {
|
|
|
499
442
|
});
|
|
500
443
|
return;
|
|
501
444
|
}
|
|
502
|
-
|
|
503
445
|
var currentSubscriber = subscribers.find(function (it) {
|
|
504
446
|
return it.element === element;
|
|
505
447
|
}) || null;
|
|
506
|
-
|
|
507
448
|
if (currentSubscriber === null) {
|
|
508
449
|
observer.unobserve(element);
|
|
509
450
|
}
|
|
510
451
|
};
|
|
511
|
-
|
|
512
452
|
var subscribe = function subscribe(element, callback) {
|
|
513
453
|
var currentSubscriber = subscribers.find(function (it) {
|
|
514
454
|
return it.element === element;
|
|
515
455
|
}) || null;
|
|
516
456
|
subscribers = addSubscriber(element, callback);
|
|
517
|
-
|
|
518
457
|
if (currentSubscriber === null) {
|
|
519
458
|
observer.observe(element);
|
|
520
459
|
}
|
|
521
460
|
};
|
|
522
|
-
|
|
523
461
|
return {
|
|
524
462
|
subscribe: subscribe,
|
|
525
463
|
unsubscribe: unsubscribe,
|
|
526
464
|
observer: observer
|
|
527
465
|
};
|
|
528
466
|
};
|
|
529
|
-
|
|
530
467
|
var getObserver = function getObserver(Observer) {
|
|
531
468
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
532
469
|
var observerKey = getOptionsKey(options);
|
|
533
|
-
|
|
534
470
|
if (!observersCache.has(Observer)) {
|
|
535
471
|
observersCache.set(Observer, {});
|
|
536
472
|
}
|
|
537
|
-
|
|
538
473
|
var observers = observersCache.get(Observer);
|
|
539
|
-
|
|
540
474
|
if (typeof observers[observerKey] === 'undefined') {
|
|
541
475
|
observers[observerKey] = createObserver(Observer, options);
|
|
542
476
|
observersCache.set(Observer, observers);
|
|
543
477
|
}
|
|
544
|
-
|
|
545
478
|
return observers[observerKey];
|
|
546
479
|
};
|
|
547
480
|
var useObserver = function useObserver(Observer) {
|
|
548
481
|
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
549
482
|
var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
550
483
|
var _opts$root = opts.root,
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
484
|
+
root = _opts$root === void 0 ? null : _opts$root,
|
|
485
|
+
_opts$rootMargin = opts.rootMargin,
|
|
486
|
+
rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
|
|
487
|
+
_opts$threshold = opts.threshold,
|
|
488
|
+
threshold = _opts$threshold === void 0 ? null : _opts$threshold,
|
|
489
|
+
_opts$disabled = opts.disabled,
|
|
490
|
+
disabled = _opts$disabled === void 0 ? false : _opts$disabled;
|
|
559
491
|
var _useState = useState(initialEntry),
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
492
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
493
|
+
entry = _useState2[0],
|
|
494
|
+
setEntry = _useState2[1];
|
|
564
495
|
var nodeRef = useRef(null);
|
|
565
496
|
var currentElement = useRef(null);
|
|
566
497
|
var elementChanged = nodeRef.current !== currentElement.current;
|
|
567
498
|
useEffect(function () {
|
|
568
499
|
var nodeElement = nodeRef.current;
|
|
569
|
-
|
|
570
500
|
var callback = function callback(newEntry) {
|
|
571
501
|
return setEntry(newEntry);
|
|
572
502
|
};
|
|
573
|
-
|
|
574
503
|
var unsubscribe = null;
|
|
575
|
-
|
|
576
504
|
if (nodeElement !== null) {
|
|
577
505
|
var newOpts = {};
|
|
578
|
-
|
|
579
506
|
if (root !== null) {
|
|
580
507
|
newOpts.root = root;
|
|
581
508
|
}
|
|
582
|
-
|
|
583
509
|
if (rootMargin !== null) {
|
|
584
510
|
newOpts.rootMargin = rootMargin;
|
|
585
511
|
}
|
|
586
|
-
|
|
587
512
|
if (threshold !== null) {
|
|
588
513
|
newOpts.threshold = threshold;
|
|
589
514
|
}
|
|
590
|
-
|
|
591
515
|
var _getObserver = getObserver(Observer, newOpts),
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
516
|
+
subscribe = _getObserver.subscribe,
|
|
517
|
+
localUnsubscribe = _getObserver.unsubscribe;
|
|
595
518
|
unsubscribe = localUnsubscribe;
|
|
596
519
|
subscribe(nodeElement, callback);
|
|
597
520
|
}
|
|
598
|
-
|
|
599
521
|
currentElement.current = nodeElement;
|
|
600
522
|
return function () {
|
|
601
523
|
if (unsubscribe !== null) {
|
|
@@ -608,10 +530,10 @@ var useObserver = function useObserver(Observer) {
|
|
|
608
530
|
entry: entry
|
|
609
531
|
};
|
|
610
532
|
};
|
|
533
|
+
|
|
611
534
|
/**
|
|
612
535
|
* Intersection Observer
|
|
613
536
|
*/
|
|
614
|
-
|
|
615
537
|
var thresholdArray = buildThresholdArray();
|
|
616
538
|
var intersectionObserverInitialEntry = {
|
|
617
539
|
target: null,
|
|
@@ -625,15 +547,14 @@ var intersectionObserverInitialEntry = {
|
|
|
625
547
|
};
|
|
626
548
|
var useIntersectionObserver = function useIntersectionObserver() {
|
|
627
549
|
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
550
|
+
_ref3$root = _ref3.root,
|
|
551
|
+
root = _ref3$root === void 0 ? null : _ref3$root,
|
|
552
|
+
_ref3$rootMargin = _ref3.rootMargin,
|
|
553
|
+
rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
|
|
554
|
+
_ref3$threshold = _ref3.threshold,
|
|
555
|
+
threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
|
|
556
|
+
_ref3$disabled = _ref3.disabled,
|
|
557
|
+
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
|
|
637
558
|
return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
|
|
638
559
|
root: root,
|
|
639
560
|
rootMargin: rootMargin,
|
|
@@ -641,10 +562,10 @@ var useIntersectionObserver = function useIntersectionObserver() {
|
|
|
641
562
|
disabled: disabled
|
|
642
563
|
}, intersectionObserverInitialEntry);
|
|
643
564
|
};
|
|
565
|
+
|
|
644
566
|
/**
|
|
645
567
|
* Resize Observer
|
|
646
568
|
*/
|
|
647
|
-
|
|
648
569
|
var resizeObserverInitialEntry = {
|
|
649
570
|
target: null,
|
|
650
571
|
contentRect: null,
|
|
@@ -653,36 +574,31 @@ var resizeObserverInitialEntry = {
|
|
|
653
574
|
};
|
|
654
575
|
var useResizeObserver = function useResizeObserver() {
|
|
655
576
|
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
577
|
+
_ref4$disabled = _ref4.disabled,
|
|
578
|
+
disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
|
|
659
579
|
return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
|
|
660
580
|
disabled: disabled
|
|
661
581
|
}, resizeObserverInitialEntry);
|
|
662
582
|
};
|
|
663
583
|
var useDimensionObserver = function useDimensionObserver() {
|
|
664
584
|
var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
585
|
+
entry = _useResizeObserver.entry,
|
|
586
|
+
rest = _objectWithoutProperties(_useResizeObserver, _excluded$2);
|
|
668
587
|
var _ref5 = entry || {},
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
588
|
+
_ref5$contentRect = _ref5.contentRect,
|
|
589
|
+
contentRect = _ref5$contentRect === void 0 ? null : _ref5$contentRect,
|
|
590
|
+
_ref5$borderBoxSize = _ref5.borderBoxSize,
|
|
591
|
+
borderBoxSize = _ref5$borderBoxSize === void 0 ? null : _ref5$borderBoxSize;
|
|
674
592
|
var _ref6 = contentRect || {},
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
593
|
+
_ref6$width = _ref6.width,
|
|
594
|
+
width = _ref6$width === void 0 ? 0 : _ref6$width,
|
|
595
|
+
_ref6$height = _ref6.height,
|
|
596
|
+
height = _ref6$height === void 0 ? 0 : _ref6$height;
|
|
680
597
|
var _ref7 = isArray(borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
598
|
+
_ref7$blockSize = _ref7.blockSize,
|
|
599
|
+
blockSize = _ref7$blockSize === void 0 ? null : _ref7$blockSize,
|
|
600
|
+
_ref7$inlineSize = _ref7.inlineSize,
|
|
601
|
+
inlineSize = _ref7$inlineSize === void 0 ? null : _ref7$inlineSize;
|
|
686
602
|
return _objectSpread(_objectSpread({}, rest), {}, {
|
|
687
603
|
entry: entry,
|
|
688
604
|
width: inlineSize || width,
|
|
@@ -692,25 +608,21 @@ var useDimensionObserver = function useDimensionObserver() {
|
|
|
692
608
|
|
|
693
609
|
var useIsVisible = function useIsVisible() {
|
|
694
610
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
611
|
+
rootMargin = _ref.rootMargin,
|
|
612
|
+
_ref$threshold = _ref.threshold,
|
|
613
|
+
threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
|
|
614
|
+
_ref$persist = _ref.persist,
|
|
615
|
+
persist = _ref$persist === void 0 ? false : _ref$persist;
|
|
701
616
|
var _useIntersectionObser = useIntersectionObserver({
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
617
|
+
rootMargin: rootMargin,
|
|
618
|
+
threshold: threshold
|
|
619
|
+
}),
|
|
620
|
+
ref = _useIntersectionObser.ref,
|
|
621
|
+
isIntersecting = _useIntersectionObser.entry.isIntersecting;
|
|
708
622
|
var wasIntersecting = useRef(isIntersecting);
|
|
709
|
-
|
|
710
623
|
if (isIntersecting && !wasIntersecting.current) {
|
|
711
624
|
wasIntersecting.current = isIntersecting;
|
|
712
625
|
}
|
|
713
|
-
|
|
714
626
|
var isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
|
|
715
627
|
return {
|
|
716
628
|
ref: ref,
|
|
@@ -722,52 +634,44 @@ var fontsMap = {
|
|
|
722
634
|
loading: [],
|
|
723
635
|
active: []
|
|
724
636
|
};
|
|
725
|
-
|
|
726
637
|
var isFontLoading = function isFontLoading(name) {
|
|
727
638
|
return fontsMap.loading.indexOf(name) !== -1;
|
|
728
639
|
};
|
|
729
|
-
|
|
730
640
|
var isFontActive = function isFontActive(name) {
|
|
731
641
|
return fontsMap.active.indexOf(name) !== -1;
|
|
732
642
|
};
|
|
733
|
-
|
|
734
643
|
var addFontLoading = function addFontLoading(name) {
|
|
735
644
|
fontsMap.active = fontsMap.active.filter(function (it) {
|
|
736
645
|
return it !== name;
|
|
737
646
|
});
|
|
738
647
|
fontsMap.loading = [].concat(_toConsumableArray(fontsMap.loading), [name]);
|
|
739
648
|
};
|
|
740
|
-
|
|
741
649
|
var removeFontLoading = function removeFontLoading(name) {
|
|
742
650
|
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
743
651
|
return it !== name;
|
|
744
652
|
});
|
|
745
653
|
};
|
|
746
|
-
|
|
747
654
|
var addFontActive = function addFontActive(name) {
|
|
748
655
|
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
749
656
|
return it !== name;
|
|
750
657
|
});
|
|
751
658
|
fontsMap.active = [].concat(_toConsumableArray(fontsMap.active), [name]);
|
|
752
659
|
};
|
|
753
|
-
|
|
754
660
|
var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
755
661
|
var _useState = useState(false),
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
662
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
663
|
+
loaded = _useState2[0],
|
|
664
|
+
setLoaded = _useState2[1];
|
|
760
665
|
useEffect(function () {
|
|
761
666
|
var config = fonts.reduce(function (newConfig, font) {
|
|
762
667
|
var _ref = isObject(font) ? font : {
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
668
|
+
type: 'system',
|
|
669
|
+
name: font
|
|
670
|
+
},
|
|
671
|
+
type = _ref.type,
|
|
672
|
+
name = _ref.name,
|
|
673
|
+
_ref$variants = _ref.variants,
|
|
674
|
+
variants = _ref$variants === void 0 ? [] : _ref$variants;
|
|
771
675
|
if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
|
|
772
676
|
return _objectSpread(_objectSpread({}, newConfig), {}, _defineProperty({}, type, {
|
|
773
677
|
families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? [name, (variants || []).filter(function (it) {
|
|
@@ -778,11 +682,11 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
778
682
|
fvd: 'n4'
|
|
779
683
|
}].concat(_toConsumableArray(variants)) : []).map(function (_ref2) {
|
|
780
684
|
var _ref2$fvd = _ref2.fvd,
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
685
|
+
fvd = _ref2$fvd === void 0 ? null : _ref2$fvd,
|
|
686
|
+
_ref2$weight = _ref2.weight,
|
|
687
|
+
weight = _ref2$weight === void 0 ? null : _ref2$weight,
|
|
688
|
+
_ref2$style = _ref2.style,
|
|
689
|
+
style = _ref2$style === void 0 ? null : _ref2$style;
|
|
786
690
|
return fvd || [style, weight].filter(function (it) {
|
|
787
691
|
return it !== null;
|
|
788
692
|
}).map(function (it) {
|
|
@@ -795,11 +699,9 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
795
699
|
}).join(':')])
|
|
796
700
|
}));
|
|
797
701
|
}
|
|
798
|
-
|
|
799
702
|
return newConfig;
|
|
800
703
|
}, null);
|
|
801
704
|
var hasConfig = config !== null;
|
|
802
|
-
|
|
803
705
|
if (hasConfig && typeof window !== 'undefined') {
|
|
804
706
|
import('webfontloader').then(function (_ref3) {
|
|
805
707
|
var WebFont = _ref3["default"];
|
|
@@ -831,73 +733,60 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
831
733
|
var isTouchEvent = function isTouchEvent(event) {
|
|
832
734
|
return 'touches' in event;
|
|
833
735
|
};
|
|
834
|
-
|
|
835
736
|
var preventDefault = function preventDefault(event) {
|
|
836
737
|
if (!isTouchEvent(event)) return false;
|
|
837
|
-
|
|
838
738
|
if (event.touches.length < 2 && event.preventDefault) {
|
|
839
739
|
event.preventDefault();
|
|
840
740
|
}
|
|
841
|
-
|
|
842
741
|
return false;
|
|
843
742
|
};
|
|
844
|
-
|
|
845
743
|
var preventClickDefault = function preventClickDefault(e) {
|
|
846
744
|
if (e.preventDefault) {
|
|
847
745
|
e.preventDefault();
|
|
848
746
|
}
|
|
849
|
-
|
|
850
747
|
if (e.stopPropagation) {
|
|
851
748
|
e.stopPropagation();
|
|
852
749
|
}
|
|
853
750
|
};
|
|
854
|
-
|
|
855
751
|
var useLongPress = function useLongPress() {
|
|
856
752
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
753
|
+
_ref$onLongPress = _ref.onLongPress,
|
|
754
|
+
onLongPress = _ref$onLongPress === void 0 ? null : _ref$onLongPress,
|
|
755
|
+
_ref$onLongPressStart = _ref.onLongPressStart,
|
|
756
|
+
onLongPressStart = _ref$onLongPressStart === void 0 ? null : _ref$onLongPressStart,
|
|
757
|
+
_ref$onLongPressEnd = _ref.onLongPressEnd,
|
|
758
|
+
onLongPressEnd = _ref$onLongPressEnd === void 0 ? null : _ref$onLongPressEnd,
|
|
759
|
+
_ref$onClick = _ref.onClick,
|
|
760
|
+
onClick = _ref$onClick === void 0 ? null : _ref$onClick,
|
|
761
|
+
_ref$shouldPreventDef = _ref.shouldPreventDefault,
|
|
762
|
+
shouldPreventDefault = _ref$shouldPreventDef === void 0 ? true : _ref$shouldPreventDef,
|
|
763
|
+
_ref$shouldStopPropag = _ref.shouldStopPropagation,
|
|
764
|
+
shouldStopPropagation = _ref$shouldStopPropag === void 0 ? false : _ref$shouldStopPropag,
|
|
765
|
+
_ref$preventClick = _ref.preventClick,
|
|
766
|
+
preventClick = _ref$preventClick === void 0 ? false : _ref$preventClick,
|
|
767
|
+
_ref$delay = _ref.delay,
|
|
768
|
+
delay = _ref$delay === void 0 ? 350 : _ref$delay;
|
|
874
769
|
var _useState = useState(false),
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
770
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
771
|
+
pressed = _useState2[0],
|
|
772
|
+
setPressed = _useState2[1];
|
|
879
773
|
var _useState3 = useState(false),
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
774
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
775
|
+
triggered = _useState4[0],
|
|
776
|
+
setTriggered = _useState4[1];
|
|
884
777
|
var timeout = useRef(null);
|
|
885
778
|
var target = useRef(null);
|
|
886
779
|
var start = useCallback(function (event, props) {
|
|
887
780
|
setPressed(true);
|
|
888
|
-
|
|
889
781
|
if (shouldStopPropagation) {
|
|
890
782
|
event.stopPropagation();
|
|
891
783
|
}
|
|
892
|
-
|
|
893
784
|
if (event.target !== null) {
|
|
894
785
|
target.current = event.target;
|
|
895
786
|
}
|
|
896
|
-
|
|
897
787
|
if (onLongPressStart !== null) {
|
|
898
788
|
onLongPressStart(event, props);
|
|
899
789
|
}
|
|
900
|
-
|
|
901
790
|
timeout.current = setTimeout(function () {
|
|
902
791
|
if (shouldPreventDefault && target.current !== null) {
|
|
903
792
|
target.current.addEventListener('touchend', preventDefault, {
|
|
@@ -907,25 +796,20 @@ var useLongPress = function useLongPress() {
|
|
|
907
796
|
passive: false
|
|
908
797
|
});
|
|
909
798
|
}
|
|
910
|
-
|
|
911
799
|
setTriggered(true);
|
|
912
|
-
|
|
913
800
|
if (onLongPress !== null) {
|
|
914
801
|
onLongPress(event, props);
|
|
915
802
|
setPressed(false);
|
|
916
803
|
}
|
|
917
|
-
|
|
918
804
|
timeout.current = null;
|
|
919
805
|
}, delay);
|
|
920
806
|
}, [onLongPress, onLongPressStart, delay, setPressed, shouldPreventDefault]);
|
|
921
807
|
var clear = useCallback(function (event, props) {
|
|
922
808
|
var shouldTriggerClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
923
809
|
setPressed(false);
|
|
924
|
-
|
|
925
810
|
if (preventClick && triggered) {
|
|
926
811
|
return;
|
|
927
812
|
}
|
|
928
|
-
|
|
929
813
|
if (timeout.current !== null) {
|
|
930
814
|
clearTimeout(timeout.current);
|
|
931
815
|
} else if (shouldPreventDefault && target.current !== null) {
|
|
@@ -935,15 +819,12 @@ var useLongPress = function useLongPress() {
|
|
|
935
819
|
target.current.removeEventListener('click', preventClickDefault);
|
|
936
820
|
}, 10);
|
|
937
821
|
}
|
|
938
|
-
|
|
939
822
|
if (shouldTriggerClick && !triggered && onClick !== null) {
|
|
940
823
|
onClick(props);
|
|
941
824
|
}
|
|
942
|
-
|
|
943
825
|
onLongPressEnd(event, props, triggered);
|
|
944
826
|
setTriggered(false);
|
|
945
827
|
}, [shouldPreventDefault, onClick, onLongPressEnd, setPressed, triggered, preventClick]);
|
|
946
|
-
|
|
947
828
|
var bind = function bind() {
|
|
948
829
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
949
830
|
return {
|
|
@@ -964,7 +845,6 @@ var useLongPress = function useLongPress() {
|
|
|
964
845
|
}
|
|
965
846
|
};
|
|
966
847
|
};
|
|
967
|
-
|
|
968
848
|
return {
|
|
969
849
|
bind: bind,
|
|
970
850
|
pressed: pressed,
|
|
@@ -973,97 +853,86 @@ var useLongPress = function useLongPress() {
|
|
|
973
853
|
};
|
|
974
854
|
|
|
975
855
|
var progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
|
|
976
|
-
|
|
977
856
|
var useMediaApi = function useMediaApi() {
|
|
978
857
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
858
|
+
_ref$url = _ref.url,
|
|
859
|
+
url = _ref$url === void 0 ? null : _ref$url,
|
|
860
|
+
_ref$onTimeUpdate = _ref.onTimeUpdate,
|
|
861
|
+
onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
|
|
862
|
+
_ref$onProgressStep = _ref.onProgressStep,
|
|
863
|
+
onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
|
|
864
|
+
_ref$onDurationChange = _ref.onDurationChange,
|
|
865
|
+
onDurationChange = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
|
|
866
|
+
_ref$onVolumeChange = _ref.onVolumeChange,
|
|
867
|
+
onVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
|
|
868
|
+
_ref$onPlay = _ref.onPlay,
|
|
869
|
+
onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
|
|
870
|
+
_ref$onPause = _ref.onPause,
|
|
871
|
+
onPause = _ref$onPause === void 0 ? null : _ref$onPause,
|
|
872
|
+
_ref$onEnded = _ref.onEnded,
|
|
873
|
+
onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
|
|
874
|
+
_ref$onSeeked = _ref.onSeeked,
|
|
875
|
+
onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
|
|
876
|
+
_ref$onSuspend = _ref.onSuspend,
|
|
877
|
+
onSuspend = _ref$onSuspend === void 0 ? null : _ref$onSuspend,
|
|
878
|
+
_ref$onLoadStart = _ref.onLoadStart,
|
|
879
|
+
onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
|
|
880
|
+
_ref$onCanPlayThough = _ref.onCanPlayThough,
|
|
881
|
+
onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough,
|
|
882
|
+
_ref$onCanPlay = _ref.onCanPlay,
|
|
883
|
+
onCanPlay = _ref$onCanPlay === void 0 ? null : _ref$onCanPlay,
|
|
884
|
+
_ref$onLoadedData = _ref.onLoadedData,
|
|
885
|
+
onLoadedData = _ref$onLoadedData === void 0 ? null : _ref$onLoadedData,
|
|
886
|
+
_ref$onLoadedMetadata = _ref.onLoadedMetadata,
|
|
887
|
+
onLoadedMetadata = _ref$onLoadedMetadata === void 0 ? null : _ref$onLoadedMetadata;
|
|
1010
888
|
var ref = useRef(null);
|
|
1011
|
-
|
|
1012
889
|
var _useState = useState(null),
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
890
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
891
|
+
currentTime = _useState2[0],
|
|
892
|
+
setCurrentTime = _useState2[1];
|
|
1017
893
|
var _useState3 = useState(null),
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
894
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
895
|
+
duration = _useState4[0],
|
|
896
|
+
setDuration = _useState4[1];
|
|
1022
897
|
var _useState5 = useState(false),
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
898
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
899
|
+
playing = _useState6[0],
|
|
900
|
+
setPlaying = _useState6[1];
|
|
1027
901
|
var _useState7 = useState(false),
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
902
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
903
|
+
ready = _useState8[0],
|
|
904
|
+
setReady = _useState8[1];
|
|
1032
905
|
var _useState9 = useState(false),
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
906
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
907
|
+
dataReady = _useState10[0],
|
|
908
|
+
setDataReady = _useState10[1];
|
|
1037
909
|
var _useState11 = useState(true),
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
910
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
911
|
+
initialPlay = _useState12[0],
|
|
912
|
+
setInitialPlay = _useState12[1];
|
|
1042
913
|
var _useState13 = useState(false),
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
914
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
915
|
+
suspended = _useState14[0],
|
|
916
|
+
setSuspended = _useState14[1];
|
|
1047
917
|
var progressStepsReached = useRef({});
|
|
1048
|
-
var paused = !playing;
|
|
918
|
+
var paused = !playing;
|
|
919
|
+
|
|
920
|
+
// Exposed methods
|
|
1049
921
|
|
|
1050
922
|
var play = useCallback(function () {
|
|
1051
923
|
var media = ref.current;
|
|
1052
|
-
|
|
1053
924
|
if (media !== null) {
|
|
1054
925
|
media.play();
|
|
1055
926
|
}
|
|
1056
927
|
}, []);
|
|
1057
928
|
var pause = useCallback(function () {
|
|
1058
929
|
var media = ref.current;
|
|
1059
|
-
|
|
1060
930
|
if (media !== null) {
|
|
1061
931
|
media.pause();
|
|
1062
932
|
}
|
|
1063
933
|
}, []);
|
|
1064
934
|
var stop = useCallback(function () {
|
|
1065
935
|
var media = ref.current;
|
|
1066
|
-
|
|
1067
936
|
if (media !== null) {
|
|
1068
937
|
media.pause();
|
|
1069
938
|
media.currentTime = 0;
|
|
@@ -1071,22 +940,25 @@ var useMediaApi = function useMediaApi() {
|
|
|
1071
940
|
}, []);
|
|
1072
941
|
var seek = useCallback(function (time) {
|
|
1073
942
|
var media = ref.current;
|
|
1074
|
-
|
|
1075
943
|
if (media !== null) {
|
|
1076
944
|
media.currentTime = time;
|
|
1077
945
|
}
|
|
1078
|
-
}, []);
|
|
946
|
+
}, []);
|
|
947
|
+
|
|
948
|
+
// const mute = useCallback(() => {
|
|
1079
949
|
// const { current: media } = ref;
|
|
1080
950
|
// if (media !== null) {
|
|
1081
951
|
// media.muted = true;
|
|
1082
952
|
// }
|
|
1083
953
|
// }, []);
|
|
954
|
+
|
|
1084
955
|
// const unMute = useCallback(() => {
|
|
1085
956
|
// const { current: media } = ref;
|
|
1086
957
|
// if (media !== null) {
|
|
1087
958
|
// media.muted = false;
|
|
1088
959
|
// }
|
|
1089
960
|
// }, []);
|
|
961
|
+
|
|
1090
962
|
// Media events callbacks
|
|
1091
963
|
|
|
1092
964
|
var onCustomPlay = useCallback(function () {
|
|
@@ -1095,18 +967,15 @@ var useMediaApi = function useMediaApi() {
|
|
|
1095
967
|
initial: initialPlay
|
|
1096
968
|
});
|
|
1097
969
|
}
|
|
1098
|
-
|
|
1099
970
|
if (initialPlay) {
|
|
1100
971
|
setInitialPlay(false);
|
|
1101
972
|
}
|
|
1102
|
-
|
|
1103
973
|
setPlaying(true);
|
|
1104
974
|
setSuspended(false);
|
|
1105
975
|
}, [initialPlay, setPlaying, onPlay]);
|
|
1106
976
|
var onCustomPause = useCallback(function (e) {
|
|
1107
977
|
var eventMedia = e.currentTarget;
|
|
1108
978
|
setPlaying(false);
|
|
1109
|
-
|
|
1110
979
|
if (onPause !== null) {
|
|
1111
980
|
onPause({
|
|
1112
981
|
midway: eventMedia.currentTime > 0 && eventMedia.currentTime < eventMedia.duration
|
|
@@ -1116,21 +985,17 @@ var useMediaApi = function useMediaApi() {
|
|
|
1116
985
|
var onCustomEnded = useCallback(function (e) {
|
|
1117
986
|
var eventMedia = e.currentTarget;
|
|
1118
987
|
eventMedia.currentTime = 0;
|
|
1119
|
-
|
|
1120
988
|
if (onEnded !== null) {
|
|
1121
989
|
onEnded();
|
|
1122
990
|
}
|
|
1123
|
-
|
|
1124
991
|
setInitialPlay(true);
|
|
1125
992
|
}, [setInitialPlay, onEnded]);
|
|
1126
993
|
var onCustomTimeUpdate = useCallback(function (e) {
|
|
1127
994
|
var eventMedia = e.currentTarget;
|
|
1128
995
|
setCurrentTime(eventMedia.currentTime);
|
|
1129
|
-
|
|
1130
996
|
if (onTimeUpdate !== null) {
|
|
1131
997
|
onTimeUpdate(eventMedia.currentTime);
|
|
1132
998
|
}
|
|
1133
|
-
|
|
1134
999
|
var progress = eventMedia.currentTime / eventMedia.duration;
|
|
1135
1000
|
var currentSteps = progressStepsReached.current;
|
|
1136
1001
|
var stepsToTrack = progressSteps.filter(function (step) {
|
|
@@ -1140,28 +1005,26 @@ var useMediaApi = function useMediaApi() {
|
|
|
1140
1005
|
if (onProgressStep !== null) {
|
|
1141
1006
|
onProgressStep(step);
|
|
1142
1007
|
}
|
|
1143
|
-
|
|
1144
1008
|
currentSteps[step] = true;
|
|
1145
1009
|
});
|
|
1146
1010
|
}, [setCurrentTime, onTimeUpdate, onProgressStep]);
|
|
1147
1011
|
var onCustomDurationChange = useCallback(function (e) {
|
|
1148
1012
|
var eventMedia = e.currentTarget;
|
|
1149
1013
|
setDuration(eventMedia.duration);
|
|
1150
|
-
|
|
1151
1014
|
if (onDurationChange !== null) {
|
|
1152
1015
|
onDurationChange(eventMedia.duration);
|
|
1153
1016
|
}
|
|
1154
1017
|
}, [setDuration, onDurationChange]);
|
|
1155
1018
|
var onCustomSeeked = useCallback(function (e) {
|
|
1156
1019
|
var eventMedia = e.currentTarget;
|
|
1157
|
-
|
|
1158
1020
|
if (onSeeked !== null) {
|
|
1159
1021
|
onSeeked(eventMedia.currentTime);
|
|
1160
1022
|
}
|
|
1161
1023
|
}, [onSeeked]);
|
|
1162
1024
|
var onCustomVolumeChange = useCallback(function (e) {
|
|
1163
|
-
var eventMedia = e.currentTarget;
|
|
1025
|
+
var eventMedia = e.currentTarget;
|
|
1164
1026
|
|
|
1027
|
+
// setMuted(eventMedia.muted);
|
|
1165
1028
|
if (onVolumeChange !== null) {
|
|
1166
1029
|
onVolumeChange(eventMedia.volume);
|
|
1167
1030
|
}
|
|
@@ -1173,49 +1036,47 @@ var useMediaApi = function useMediaApi() {
|
|
|
1173
1036
|
}, [setReady, onLoadStart]);
|
|
1174
1037
|
var onCustomCanPlayThrough = useCallback(function () {
|
|
1175
1038
|
setReady(true);
|
|
1176
|
-
|
|
1177
1039
|
if (onCanPlayThough !== null) {
|
|
1178
1040
|
onCanPlayThough();
|
|
1179
1041
|
}
|
|
1180
1042
|
}, [setReady, onCanPlayThough]);
|
|
1181
1043
|
var onCustomCanPlay = useCallback(function () {
|
|
1182
1044
|
setReady(true);
|
|
1183
|
-
|
|
1184
1045
|
if (onCanPlay !== null) {
|
|
1185
1046
|
onCanPlay();
|
|
1186
1047
|
}
|
|
1187
1048
|
}, [setReady, onCanPlay]);
|
|
1188
1049
|
var onCustomLoadedMetadata = useCallback(function () {
|
|
1189
1050
|
setReady(true);
|
|
1190
|
-
|
|
1191
1051
|
if (onLoadedMetadata !== null) {
|
|
1192
1052
|
onLoadedMetadata();
|
|
1193
1053
|
}
|
|
1194
1054
|
}, [setReady, onLoadedMetadata]);
|
|
1195
1055
|
var onCustomLoadedData = useCallback(function () {
|
|
1196
1056
|
setDataReady(true);
|
|
1197
|
-
|
|
1198
1057
|
if (onLoadedData !== null) {
|
|
1199
1058
|
onLoadedData();
|
|
1200
1059
|
}
|
|
1201
1060
|
}, [setDataReady, onLoadedData]);
|
|
1202
1061
|
var onCustomSuspended = useCallback(function () {
|
|
1203
1062
|
setSuspended(true);
|
|
1204
|
-
|
|
1205
1063
|
if (onSuspend !== null) {
|
|
1206
1064
|
onSuspend();
|
|
1207
1065
|
}
|
|
1208
1066
|
}, [setSuspended, onSuspended]);
|
|
1209
1067
|
useEffect(function () {
|
|
1210
1068
|
var _ref$current = ref.current,
|
|
1211
|
-
|
|
1069
|
+
media = _ref$current === void 0 ? null : _ref$current;
|
|
1070
|
+
|
|
1071
|
+
// console.log('actions', url);
|
|
1212
1072
|
|
|
1213
1073
|
if (media !== null) {
|
|
1214
1074
|
media.addEventListener('volumechange', onCustomVolumeChange);
|
|
1215
1075
|
media.addEventListener('play', onCustomPlay);
|
|
1216
1076
|
media.addEventListener('pause', onCustomPause);
|
|
1217
1077
|
media.addEventListener('ended', onCustomEnded);
|
|
1218
|
-
media.addEventListener('seeked', onCustomSeeked);
|
|
1078
|
+
media.addEventListener('seeked', onCustomSeeked);
|
|
1079
|
+
// media.addEventListener('loadstart', onCustomLoadStart);
|
|
1219
1080
|
// media.addEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
1220
1081
|
// media.addEventListener('canplay', onCustomCanPlay);
|
|
1221
1082
|
// media.addEventListener('loadedmetadata', onCustomLoadedMetadata);
|
|
@@ -1228,21 +1089,23 @@ var useMediaApi = function useMediaApi() {
|
|
|
1228
1089
|
media.removeEventListener('play', onCustomPlay);
|
|
1229
1090
|
media.removeEventListener('pause', onCustomPause);
|
|
1230
1091
|
media.removeEventListener('ended', onCustomEnded);
|
|
1231
|
-
media.removeEventListener('seeked', onCustomSeeked);
|
|
1092
|
+
media.removeEventListener('seeked', onCustomSeeked);
|
|
1093
|
+
// media.removeEventListener('loadstart', onCustomLoadStart);
|
|
1232
1094
|
// media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
1233
1095
|
// media.removeEventListener('canplay', onCustomCanPlay);
|
|
1234
1096
|
// media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
|
|
1235
1097
|
}
|
|
1236
1098
|
};
|
|
1237
|
-
}, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomSuspended
|
|
1099
|
+
}, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomSuspended
|
|
1100
|
+
// onCustomLoadStart,
|
|
1238
1101
|
// onCustomCanPlayThrough,
|
|
1239
1102
|
// onCustomCanPlay,
|
|
1240
1103
|
// onCustomLoadedMetadata,
|
|
1241
1104
|
]);
|
|
1105
|
+
|
|
1242
1106
|
useEffect(function () {
|
|
1243
1107
|
var _ref$current2 = ref.current,
|
|
1244
|
-
|
|
1245
|
-
|
|
1108
|
+
media = _ref$current2 === void 0 ? null : _ref$current2;
|
|
1246
1109
|
if (media !== null) {
|
|
1247
1110
|
media.addEventListener('loadstart', onCustomLoadStart);
|
|
1248
1111
|
media.addEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
@@ -1251,7 +1114,6 @@ var useMediaApi = function useMediaApi() {
|
|
|
1251
1114
|
media.addEventListener('loadeddata', onCustomLoadedData);
|
|
1252
1115
|
media.addEventListener('suspend', onCustomSuspended);
|
|
1253
1116
|
}
|
|
1254
|
-
|
|
1255
1117
|
return function () {
|
|
1256
1118
|
if (media !== null) {
|
|
1257
1119
|
media.removeEventListener('loadstart', onCustomLoadStart);
|
|
@@ -1261,31 +1123,30 @@ var useMediaApi = function useMediaApi() {
|
|
|
1261
1123
|
media.removeEventListener('suspend', onCustomSuspended);
|
|
1262
1124
|
}
|
|
1263
1125
|
};
|
|
1264
|
-
}, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]);
|
|
1126
|
+
}, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]);
|
|
1265
1127
|
|
|
1128
|
+
// Duration
|
|
1266
1129
|
useEffect(function () {
|
|
1267
1130
|
var _ref$current3 = ref.current,
|
|
1268
|
-
|
|
1269
|
-
|
|
1131
|
+
media = _ref$current3 === void 0 ? null : _ref$current3;
|
|
1270
1132
|
if (media !== null) {
|
|
1271
1133
|
media.addEventListener('durationchange', onCustomDurationChange);
|
|
1272
1134
|
}
|
|
1273
|
-
|
|
1274
1135
|
return function () {
|
|
1275
1136
|
if (media !== null) {
|
|
1276
1137
|
media.removeEventListener('durationchange', onCustomDurationChange);
|
|
1277
1138
|
}
|
|
1278
1139
|
};
|
|
1279
|
-
}, [url, onCustomDurationChange]);
|
|
1140
|
+
}, [url, onCustomDurationChange]);
|
|
1280
1141
|
|
|
1142
|
+
// Timeupdate
|
|
1281
1143
|
useEffect(function () {
|
|
1282
1144
|
var _ref$current4 = ref.current,
|
|
1283
|
-
|
|
1284
|
-
|
|
1145
|
+
media = _ref$current4 === void 0 ? null : _ref$current4;
|
|
1146
|
+
// console.log('timeupdate', url);
|
|
1285
1147
|
if (media !== null) {
|
|
1286
1148
|
media.addEventListener('timeupdate', onCustomTimeUpdate);
|
|
1287
1149
|
}
|
|
1288
|
-
|
|
1289
1150
|
return function () {
|
|
1290
1151
|
if (media !== null) {
|
|
1291
1152
|
media.removeEventListener('timeupdate', onCustomTimeUpdate);
|
|
@@ -1294,14 +1155,12 @@ var useMediaApi = function useMediaApi() {
|
|
|
1294
1155
|
}, [url, onCustomTimeUpdate, onCustomDurationChange]);
|
|
1295
1156
|
useEffect(function () {
|
|
1296
1157
|
var _ref$current5 = ref.current,
|
|
1297
|
-
|
|
1298
|
-
|
|
1158
|
+
media = _ref$current5 === void 0 ? null : _ref$current5;
|
|
1299
1159
|
if (media !== null && media.readyState > 1) {
|
|
1300
1160
|
setDataReady(true);
|
|
1301
1161
|
} else {
|
|
1302
1162
|
setDataReady(false);
|
|
1303
1163
|
}
|
|
1304
|
-
|
|
1305
1164
|
if (media !== null && media.readyState > 3) {
|
|
1306
1165
|
setReady(true);
|
|
1307
1166
|
} else {
|
|
@@ -1326,75 +1185,63 @@ var useMediaApi = function useMediaApi() {
|
|
|
1326
1185
|
|
|
1327
1186
|
function useMediaCurrentTime(element) {
|
|
1328
1187
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1188
|
+
_ref$id = _ref.id,
|
|
1189
|
+
id = _ref$id === void 0 ? null : _ref$id,
|
|
1190
|
+
_ref$disabled = _ref.disabled,
|
|
1191
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1192
|
+
_ref$updateInterval = _ref.updateInterval,
|
|
1193
|
+
updateInterval = _ref$updateInterval === void 0 ? 1000 : _ref$updateInterval,
|
|
1194
|
+
_ref$onUpdate = _ref.onUpdate,
|
|
1195
|
+
customOnUpdate = _ref$onUpdate === void 0 ? null : _ref$onUpdate;
|
|
1338
1196
|
var _useState = useState(0),
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1197
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1198
|
+
currentTime = _useState2[0],
|
|
1199
|
+
setCurrentTime = _useState2[1];
|
|
1343
1200
|
var realCurrentTime = useRef(currentTime);
|
|
1344
1201
|
var finalId = id || element;
|
|
1345
1202
|
var lastIdRef = useRef(finalId);
|
|
1346
1203
|
var idChanged = lastIdRef.current !== finalId;
|
|
1347
1204
|
var disabledRef = useRef(disabled);
|
|
1348
1205
|
var disabledChanged = disabledRef.current !== disabled;
|
|
1349
|
-
|
|
1350
1206
|
if (idChanged || disabledChanged) {
|
|
1351
1207
|
realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
|
|
1352
1208
|
lastIdRef.current = finalId;
|
|
1353
1209
|
disabledRef.current = disabled;
|
|
1354
|
-
}
|
|
1355
|
-
|
|
1210
|
+
}
|
|
1356
1211
|
|
|
1212
|
+
// Check time update
|
|
1357
1213
|
useEffect(function () {
|
|
1358
1214
|
if (element === null) {
|
|
1359
1215
|
return function () {};
|
|
1360
1216
|
}
|
|
1361
|
-
|
|
1362
1217
|
function updateTime() {
|
|
1363
1218
|
var time = element.currentTime || 0;
|
|
1364
|
-
|
|
1365
1219
|
if (time !== realCurrentTime.current) {
|
|
1366
1220
|
realCurrentTime.current = time;
|
|
1367
1221
|
setCurrentTime(time);
|
|
1368
|
-
|
|
1369
1222
|
if (customOnUpdate !== null) {
|
|
1370
1223
|
customOnUpdate(time);
|
|
1371
1224
|
}
|
|
1372
1225
|
}
|
|
1373
|
-
|
|
1374
1226
|
return time;
|
|
1375
1227
|
}
|
|
1376
|
-
|
|
1377
1228
|
if (disabled) {
|
|
1378
1229
|
updateTime();
|
|
1379
1230
|
return function () {};
|
|
1380
1231
|
}
|
|
1381
|
-
|
|
1382
1232
|
var timeout = null;
|
|
1383
|
-
|
|
1384
1233
|
function loop() {
|
|
1385
1234
|
var _element$duration = element.duration,
|
|
1386
|
-
|
|
1235
|
+
duration = _element$duration === void 0 ? 0 : _element$duration;
|
|
1387
1236
|
var time = updateTime();
|
|
1388
1237
|
var remainingTime = Math.floor(((duration || 0) - time) * 1000);
|
|
1389
1238
|
timeout = setTimeout(loop, Math.max(Math.min(updateInterval, remainingTime), updateInterval));
|
|
1390
1239
|
}
|
|
1391
|
-
|
|
1392
1240
|
loop();
|
|
1393
1241
|
return function () {
|
|
1394
1242
|
if (element !== null) {
|
|
1395
1243
|
realCurrentTime.current = element.currentTime;
|
|
1396
1244
|
}
|
|
1397
|
-
|
|
1398
1245
|
if (timeout !== null) {
|
|
1399
1246
|
clearInterval(timeout);
|
|
1400
1247
|
}
|
|
@@ -1405,38 +1252,31 @@ function useMediaCurrentTime(element) {
|
|
|
1405
1252
|
|
|
1406
1253
|
function useMediaDuration(element) {
|
|
1407
1254
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1255
|
+
_ref$id = _ref.id,
|
|
1256
|
+
id = _ref$id === void 0 ? null : _ref$id;
|
|
1411
1257
|
var _useState = useState(element !== null ? element.duration || 0 : 0),
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1258
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1259
|
+
duration = _useState2[0],
|
|
1260
|
+
setDuration = _useState2[1];
|
|
1416
1261
|
var realDuration = useRef(duration);
|
|
1417
1262
|
var finalId = id || element;
|
|
1418
1263
|
var lastIdRef = useRef(finalId);
|
|
1419
1264
|
var idChanged = lastIdRef.current !== finalId;
|
|
1420
|
-
|
|
1421
1265
|
if (idChanged) {
|
|
1422
1266
|
realDuration.current = element !== null ? element.duration || 0 : 0;
|
|
1423
1267
|
lastIdRef.current = finalId;
|
|
1424
1268
|
}
|
|
1425
|
-
|
|
1426
1269
|
useEffect(function () {
|
|
1427
1270
|
if (element === null) {
|
|
1428
1271
|
return function () {};
|
|
1429
1272
|
}
|
|
1430
|
-
|
|
1431
1273
|
function updateDuration() {
|
|
1432
1274
|
var newDuration = element.duration || 0;
|
|
1433
|
-
|
|
1434
1275
|
if (newDuration !== realDuration.current) {
|
|
1435
1276
|
realDuration.current = newDuration;
|
|
1436
1277
|
setDuration(newDuration);
|
|
1437
1278
|
}
|
|
1438
1279
|
}
|
|
1439
|
-
|
|
1440
1280
|
updateDuration();
|
|
1441
1281
|
element.addEventListener('canplay', updateDuration);
|
|
1442
1282
|
element.addEventListener('loadedmetadata', updateDuration);
|
|
@@ -1452,11 +1292,10 @@ function useMediaDuration(element) {
|
|
|
1452
1292
|
|
|
1453
1293
|
function useMediaLoad(element) {
|
|
1454
1294
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1295
|
+
_ref$preload = _ref.preload,
|
|
1296
|
+
preload = _ref$preload === void 0 ? 'auto' : _ref$preload,
|
|
1297
|
+
_ref$shouldLoad = _ref.shouldLoad,
|
|
1298
|
+
shouldLoad = _ref$shouldLoad === void 0 ? false : _ref$shouldLoad;
|
|
1460
1299
|
var firstPreloadRef = useRef(preload);
|
|
1461
1300
|
var firstShouldLoadRef = useRef(shouldLoad);
|
|
1462
1301
|
var hasLoadedRef = useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
|
|
@@ -1464,7 +1303,6 @@ function useMediaLoad(element) {
|
|
|
1464
1303
|
var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad;
|
|
1465
1304
|
var preloadHasChanged = firstPreloadRef.current !== preload;
|
|
1466
1305
|
var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
|
|
1467
|
-
|
|
1468
1306
|
if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
|
|
1469
1307
|
hasLoadedRef.current = true;
|
|
1470
1308
|
element.load();
|
|
@@ -1473,31 +1311,28 @@ function useMediaLoad(element) {
|
|
|
1473
1311
|
}
|
|
1474
1312
|
|
|
1475
1313
|
var _excluded$1 = ["disabled"];
|
|
1476
|
-
|
|
1477
1314
|
function useMediaProgress(media) {
|
|
1478
1315
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1316
|
+
_ref$disabled = _ref.disabled,
|
|
1317
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1318
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
1483
1319
|
var _useState = useState(!disabled),
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1320
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1321
|
+
playing = _useState2[0],
|
|
1322
|
+
setPlaying = _useState2[1];
|
|
1323
|
+
|
|
1324
|
+
// const currentTime = useMediaCurrentTime(media, {
|
|
1487
1325
|
// disabled: disabled || !playing,
|
|
1488
1326
|
// ...props,
|
|
1489
1327
|
// });
|
|
1490
1328
|
|
|
1491
|
-
|
|
1492
1329
|
var duration = useMediaDuration(media, _objectSpread({
|
|
1493
1330
|
disabled: disabled || !playing
|
|
1494
1331
|
}, props));
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
setProgress = _useState4[1];
|
|
1500
|
-
|
|
1332
|
+
var _useState3 = useState(0),
|
|
1333
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1334
|
+
progress = _useState4[0],
|
|
1335
|
+
setProgress = _useState4[1];
|
|
1501
1336
|
var realProgressRef = useRef(progress);
|
|
1502
1337
|
var updateTimeRef = useRef(new Date().getTime());
|
|
1503
1338
|
var updateProgress = useCallback(function (newProgress) {
|
|
@@ -1505,67 +1340,69 @@ function useMediaProgress(media) {
|
|
|
1505
1340
|
realProgressRef.current = newProgress;
|
|
1506
1341
|
setProgress(newProgress);
|
|
1507
1342
|
}, [setProgress]);
|
|
1343
|
+
useEffect(function () {
|
|
1344
|
+
if (media !== null) {
|
|
1345
|
+
var value = media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0;
|
|
1346
|
+
updateProgress(value);
|
|
1347
|
+
} else {
|
|
1348
|
+
updateProgress(0);
|
|
1349
|
+
}
|
|
1350
|
+
setPlaying(!disabled);
|
|
1351
|
+
}, [media, disabled, setPlaying]);
|
|
1508
1352
|
useEffect(function () {
|
|
1509
1353
|
if (media === null) {
|
|
1510
1354
|
return function () {};
|
|
1511
1355
|
}
|
|
1512
|
-
|
|
1513
1356
|
function onResume() {
|
|
1514
1357
|
if (!playing) {
|
|
1515
1358
|
setPlaying(true);
|
|
1516
1359
|
}
|
|
1517
|
-
|
|
1518
1360
|
updateProgress(media.currentTime / media.duration);
|
|
1519
1361
|
}
|
|
1520
|
-
|
|
1521
1362
|
function onPause() {
|
|
1522
1363
|
if (playing) {
|
|
1523
1364
|
setPlaying(false);
|
|
1524
1365
|
}
|
|
1525
|
-
|
|
1526
1366
|
updateProgress(media.currentTime / media.duration);
|
|
1527
1367
|
}
|
|
1528
|
-
|
|
1529
1368
|
media.addEventListener('play', onResume);
|
|
1530
1369
|
media.addEventListener('seeked', onResume);
|
|
1531
|
-
media.addEventListener('playing', onResume);
|
|
1532
|
-
|
|
1370
|
+
media.addEventListener('playing', onResume);
|
|
1371
|
+
// media.addEventListener('timeupdate', onResume);
|
|
1533
1372
|
media.addEventListener('pause', onPause);
|
|
1534
1373
|
media.addEventListener('ended', onPause);
|
|
1535
1374
|
media.addEventListener('waiting', onPause);
|
|
1536
1375
|
media.addEventListener('stalled', onPause);
|
|
1537
|
-
media.addEventListener('seeking', onPause);
|
|
1376
|
+
media.addEventListener('seeking', onPause);
|
|
1377
|
+
// media.addEventListener('suspend', onPause);
|
|
1538
1378
|
// if (media.paused) {
|
|
1539
1379
|
// onPause();
|
|
1540
1380
|
// } else {
|
|
1541
1381
|
// onResume();
|
|
1542
1382
|
// }
|
|
1543
|
-
|
|
1544
1383
|
return function () {
|
|
1545
1384
|
media.removeEventListener('play', onResume);
|
|
1546
1385
|
media.removeEventListener('seeked', onResume);
|
|
1547
|
-
media.removeEventListener('playing', onResume);
|
|
1548
|
-
|
|
1386
|
+
media.removeEventListener('playing', onResume);
|
|
1387
|
+
// media.removeEventListener('timeupdate', onResume);
|
|
1549
1388
|
media.removeEventListener('pause', onPause);
|
|
1550
1389
|
media.removeEventListener('ended', onPause);
|
|
1551
1390
|
media.removeEventListener('waiting', onPause);
|
|
1552
1391
|
media.removeEventListener('stalled', onPause);
|
|
1553
|
-
media.removeEventListener('seeking', onPause);
|
|
1392
|
+
media.removeEventListener('seeking', onPause);
|
|
1393
|
+
// media.removeEventListener('suspend', onPause);
|
|
1554
1394
|
};
|
|
1555
1395
|
}, [media, updateProgress, setPlaying, playing]);
|
|
1556
1396
|
useEffect(function () {
|
|
1557
1397
|
if (media === null || !playing || disabled) {
|
|
1558
1398
|
return function () {};
|
|
1559
1399
|
}
|
|
1560
|
-
|
|
1561
1400
|
var handle;
|
|
1562
1401
|
var canceled = false;
|
|
1563
|
-
|
|
1564
1402
|
function tick() {
|
|
1565
1403
|
if (canceled) {
|
|
1566
1404
|
return;
|
|
1567
1405
|
}
|
|
1568
|
-
|
|
1569
1406
|
var newTime = new Date().getTime();
|
|
1570
1407
|
var elapsed = newTime - updateTimeRef.current;
|
|
1571
1408
|
updateTimeRef.current = newTime;
|
|
@@ -1574,7 +1411,6 @@ function useMediaProgress(media) {
|
|
|
1574
1411
|
updateProgress(newProgress);
|
|
1575
1412
|
handle = raf(tick);
|
|
1576
1413
|
}
|
|
1577
|
-
|
|
1578
1414
|
tick();
|
|
1579
1415
|
return function () {
|
|
1580
1416
|
canceled = true;
|
|
@@ -1586,31 +1422,25 @@ function useMediaProgress(media) {
|
|
|
1586
1422
|
|
|
1587
1423
|
function useMediaReady(element) {
|
|
1588
1424
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1425
|
+
_ref$id = _ref.id,
|
|
1426
|
+
id = _ref$id === void 0 ? null : _ref$id;
|
|
1592
1427
|
var _useState = useState(element !== null && element.readyState > 0),
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1428
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1429
|
+
ready = _useState2[0],
|
|
1430
|
+
setReady = _useState2[1];
|
|
1597
1431
|
var realReady = useRef(ready);
|
|
1598
1432
|
var lastIdRef = useRef(id);
|
|
1599
1433
|
var idChanged = lastIdRef.current !== id;
|
|
1600
|
-
|
|
1601
1434
|
if (idChanged) {
|
|
1602
1435
|
realReady.current = false;
|
|
1603
1436
|
lastIdRef.current = id;
|
|
1604
1437
|
}
|
|
1605
|
-
|
|
1606
1438
|
useEffect(function () {
|
|
1607
1439
|
if (element === null) {
|
|
1608
1440
|
return function () {};
|
|
1609
1441
|
}
|
|
1610
|
-
|
|
1611
1442
|
function updateReady() {
|
|
1612
1443
|
var currentReady = ready;
|
|
1613
|
-
|
|
1614
1444
|
if (element.readyState > 0 && !ready) {
|
|
1615
1445
|
setReady(true);
|
|
1616
1446
|
currentReady = true;
|
|
@@ -1618,19 +1448,15 @@ function useMediaReady(element) {
|
|
|
1618
1448
|
setReady(false);
|
|
1619
1449
|
currentReady = false;
|
|
1620
1450
|
}
|
|
1621
|
-
|
|
1622
1451
|
realReady.current = currentReady;
|
|
1623
1452
|
return currentReady;
|
|
1624
1453
|
}
|
|
1625
|
-
|
|
1626
1454
|
var currentReady = updateReady();
|
|
1627
|
-
|
|
1628
1455
|
if (!currentReady) {
|
|
1629
1456
|
element.addEventListener('loadedmetadata', updateReady);
|
|
1630
1457
|
element.addEventListener('canplay', updateReady);
|
|
1631
1458
|
element.addEventListener('canplaythrough', updateReady);
|
|
1632
1459
|
}
|
|
1633
|
-
|
|
1634
1460
|
return function () {
|
|
1635
1461
|
if (!currentReady) {
|
|
1636
1462
|
element.removeEventListener('loadedmetadata', updateReady);
|
|
@@ -1644,8 +1470,9 @@ function useMediaReady(element) {
|
|
|
1644
1470
|
|
|
1645
1471
|
var useMediasParser = function useMediasParser() {
|
|
1646
1472
|
var screensManager = useScreensManager();
|
|
1647
|
-
var fieldsManager = useFieldsManager();
|
|
1473
|
+
var fieldsManager = useFieldsManager();
|
|
1648
1474
|
|
|
1475
|
+
// Convert medias object to path
|
|
1649
1476
|
var parser = useMemo(function () {
|
|
1650
1477
|
return new MediasParser({
|
|
1651
1478
|
screensManager: screensManager,
|
|
@@ -1671,28 +1498,23 @@ function useMediaThumbnail(media) {
|
|
|
1671
1498
|
if (isObject(file)) {
|
|
1672
1499
|
return file;
|
|
1673
1500
|
}
|
|
1674
|
-
|
|
1675
1501
|
var _ref = media || {},
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1502
|
+
_ref$thumbnail_url = _ref.thumbnail_url,
|
|
1503
|
+
defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
|
|
1504
|
+
_ref$files = _ref.files,
|
|
1505
|
+
files = _ref$files === void 0 ? null : _ref$files,
|
|
1506
|
+
_ref$metadata = _ref.metadata,
|
|
1507
|
+
metadata = _ref$metadata === void 0 ? null : _ref$metadata;
|
|
1683
1508
|
var _ref2 = metadata || {},
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1509
|
+
mediaWidth = _ref2.width,
|
|
1510
|
+
mediaHeight = _ref2.height;
|
|
1687
1511
|
var filesArray = getMediaFilesAsArray(files) || [];
|
|
1688
|
-
|
|
1689
1512
|
var _ref3 = (file !== null ? filesArray.find(function (_ref4) {
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1513
|
+
var handle = _ref4.handle;
|
|
1514
|
+
return handle === file;
|
|
1515
|
+
}) || null : null) || {},
|
|
1516
|
+
_ref3$url = _ref3.url,
|
|
1517
|
+
url = _ref3$url === void 0 ? null : _ref3$url;
|
|
1696
1518
|
return url !== null || defaultThumbnailUrl !== null ? {
|
|
1697
1519
|
url: url || defaultThumbnailUrl,
|
|
1698
1520
|
metadata: {
|
|
@@ -1706,30 +1528,25 @@ function useMediaThumbnail(media) {
|
|
|
1706
1528
|
|
|
1707
1529
|
function useMediaWaveform(media) {
|
|
1708
1530
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1531
|
+
_ref$fake = _ref.fake,
|
|
1532
|
+
fake = _ref$fake === void 0 ? false : _ref$fake,
|
|
1533
|
+
_ref$reduceBufferFact = _ref.reduceBufferFactor,
|
|
1534
|
+
reduceBufferFactor = _ref$reduceBufferFact === void 0 ? 100 : _ref$reduceBufferFact;
|
|
1714
1535
|
var _ref2 = media || {},
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1536
|
+
_ref2$url = _ref2.url,
|
|
1537
|
+
url = _ref2$url === void 0 ? null : _ref2$url,
|
|
1538
|
+
_ref2$metadata = _ref2.metadata,
|
|
1539
|
+
metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
|
|
1720
1540
|
var _ref3 = metadata || {},
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1541
|
+
_ref3$waveform = _ref3.waveform,
|
|
1542
|
+
waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
|
|
1724
1543
|
var _useState = useState(null),
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1544
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1545
|
+
audioLevels = _useState2[0],
|
|
1546
|
+
setAudioLevels = _useState2[1];
|
|
1729
1547
|
useEffect(function () {
|
|
1730
1548
|
var canceled = false;
|
|
1731
1549
|
var AudioContext = typeof window !== 'undefined' ? window.AudioContext || window.webkitAudioContext : null;
|
|
1732
|
-
|
|
1733
1550
|
if (waveform !== null) {
|
|
1734
1551
|
setAudioLevels(waveform.map(function (it) {
|
|
1735
1552
|
return (it + 256 / 2) / 256;
|
|
@@ -1746,18 +1563,15 @@ function useMediaWaveform(media) {
|
|
|
1746
1563
|
if (canceled) {
|
|
1747
1564
|
throw new Error('Audio loading canceled');
|
|
1748
1565
|
}
|
|
1749
|
-
|
|
1750
1566
|
return response.arrayBuffer();
|
|
1751
1567
|
}).then(function (arrayBuffer) {
|
|
1752
1568
|
if (canceled) {
|
|
1753
1569
|
throw new Error('Audio loading canceled');
|
|
1754
1570
|
}
|
|
1755
|
-
|
|
1756
1571
|
var audioCtx = new AudioContext();
|
|
1757
1572
|
return audioCtx.decodeAudioData(arrayBuffer);
|
|
1758
1573
|
}).then(function (buffer) {
|
|
1759
1574
|
var channelsCount = buffer.numberOfChannels;
|
|
1760
|
-
|
|
1761
1575
|
if (channelsCount > 0) {
|
|
1762
1576
|
var leftChannelData = buffer.getChannelData(0);
|
|
1763
1577
|
setAudioLevels(leftChannelData.reduce(function (newArray, level) {
|
|
@@ -1770,7 +1584,6 @@ function useMediaWaveform(media) {
|
|
|
1770
1584
|
throw e;
|
|
1771
1585
|
});
|
|
1772
1586
|
}
|
|
1773
|
-
|
|
1774
1587
|
return function () {
|
|
1775
1588
|
if (url === null) {
|
|
1776
1589
|
canceled = true;
|
|
@@ -1780,17 +1593,18 @@ function useMediaWaveform(media) {
|
|
|
1780
1593
|
return audioLevels;
|
|
1781
1594
|
}
|
|
1782
1595
|
|
|
1596
|
+
// const debug = createDebug('core:useParsedStory');
|
|
1597
|
+
|
|
1783
1598
|
var useParsedStory = function useParsedStory(story) {
|
|
1784
1599
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1600
|
+
_ref$disabled = _ref.disabled,
|
|
1601
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1602
|
+
_ref$withTheme = _ref.withTheme,
|
|
1603
|
+
withTheme = _ref$withTheme === void 0 ? true : _ref$withTheme,
|
|
1604
|
+
_ref$withMedias = _ref.withMedias,
|
|
1605
|
+
withMedias = _ref$withMedias === void 0 ? true : _ref$withMedias,
|
|
1606
|
+
_ref$withFonts = _ref.withFonts,
|
|
1607
|
+
withFonts = _ref$withFonts === void 0 ? true : _ref$withFonts;
|
|
1794
1608
|
var screensManager = useScreensManager();
|
|
1795
1609
|
var fieldsManager = useFieldsManager();
|
|
1796
1610
|
var parser = useMemo(function () {
|
|
@@ -1803,7 +1617,6 @@ var useParsedStory = function useParsedStory(story) {
|
|
|
1803
1617
|
if (disabled) {
|
|
1804
1618
|
return story;
|
|
1805
1619
|
}
|
|
1806
|
-
|
|
1807
1620
|
return parser.parse(story, {
|
|
1808
1621
|
withMedias: withMedias,
|
|
1809
1622
|
withTheme: withTheme,
|
|
@@ -1815,21 +1628,19 @@ var useParsedStory = function useParsedStory(story) {
|
|
|
1815
1628
|
|
|
1816
1629
|
function useProgressSteps() {
|
|
1817
1630
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1631
|
+
_ref$disabled = _ref.disabled,
|
|
1632
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1633
|
+
currentTime = _ref.currentTime,
|
|
1634
|
+
duration = _ref.duration,
|
|
1635
|
+
_ref$onStep = _ref.onStep,
|
|
1636
|
+
onStep = _ref$onStep === void 0 ? null : _ref$onStep,
|
|
1637
|
+
_ref$steps = _ref.steps,
|
|
1638
|
+
steps = _ref$steps === void 0 ? [0.1, 0.25, 0.5, 0.75, 0.9] : _ref$steps;
|
|
1827
1639
|
var progressStepsReached = useRef({});
|
|
1828
1640
|
useEffect(function () {
|
|
1829
1641
|
if (duration === 0 || disabled) {
|
|
1830
1642
|
return;
|
|
1831
1643
|
}
|
|
1832
|
-
|
|
1833
1644
|
var progress = currentTime / duration;
|
|
1834
1645
|
var currentSteps = progressStepsReached.current;
|
|
1835
1646
|
var stepsToTrack = steps.filter(function (step) {
|
|
@@ -1839,7 +1650,6 @@ function useProgressSteps() {
|
|
|
1839
1650
|
if (onStep !== null) {
|
|
1840
1651
|
onStep(step);
|
|
1841
1652
|
}
|
|
1842
|
-
|
|
1843
1653
|
currentSteps[step] = true;
|
|
1844
1654
|
});
|
|
1845
1655
|
}, [duration, currentTime, disabled]);
|
|
@@ -1847,37 +1657,34 @@ function useProgressSteps() {
|
|
|
1847
1657
|
|
|
1848
1658
|
var _excluded = ["width", "height"];
|
|
1849
1659
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
1850
|
-
|
|
1851
1660
|
var useScreenSize = function useScreenSize(_ref) {
|
|
1852
1661
|
var _ref$width = _ref.width,
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1662
|
+
width = _ref$width === void 0 ? null : _ref$width,
|
|
1663
|
+
_ref$height = _ref.height,
|
|
1664
|
+
height = _ref$height === void 0 ? null : _ref$height,
|
|
1665
|
+
_ref$landscape = _ref.landscape,
|
|
1666
|
+
landscape = _ref$landscape === void 0 ? false : _ref$landscape,
|
|
1667
|
+
_ref$menuOverScreen = _ref.menuOverScreen,
|
|
1668
|
+
menuOverScreen = _ref$menuOverScreen === void 0 ? false : _ref$menuOverScreen,
|
|
1669
|
+
_ref$screens = _ref.screens,
|
|
1670
|
+
screens = _ref$screens === void 0 ? [] : _ref$screens,
|
|
1671
|
+
_ref$mediaType = _ref.mediaType,
|
|
1672
|
+
mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
|
|
1673
|
+
_ref$media = _ref.media,
|
|
1674
|
+
providedMedia = _ref$media === void 0 ? null : _ref$media,
|
|
1675
|
+
_ref$scale = _ref.scale,
|
|
1676
|
+
scale = _ref$scale === void 0 ? null : _ref$scale;
|
|
1868
1677
|
var screenSize = useMemo(function () {
|
|
1869
1678
|
var media = providedMedia !== null ? providedMedia : {
|
|
1870
1679
|
type: mediaType,
|
|
1871
1680
|
width: "".concat(width, "px"),
|
|
1872
1681
|
height: "".concat(height, "px")
|
|
1873
1682
|
};
|
|
1874
|
-
|
|
1875
1683
|
var matchingScreens = _toConsumableArray(screens).reverse().filter(function (_ref2) {
|
|
1876
1684
|
var _ref2$mediaQuery = _ref2.mediaQuery,
|
|
1877
|
-
|
|
1685
|
+
mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
|
|
1878
1686
|
return mediaQuery === null || match(mediaQuery, media);
|
|
1879
1687
|
});
|
|
1880
|
-
|
|
1881
1688
|
return {
|
|
1882
1689
|
screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
|
|
1883
1690
|
screens: _toConsumableArray(matchingScreens).reverse().map(function (_ref3) {
|
|
@@ -1893,41 +1700,36 @@ var useScreenSize = function useScreenSize(_ref) {
|
|
|
1893
1700
|
}, [screens, providedMedia, mediaType, width, height, landscape, menuOverScreen]);
|
|
1894
1701
|
return screenSize;
|
|
1895
1702
|
};
|
|
1896
|
-
|
|
1897
1703
|
var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
1898
1704
|
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1705
|
+
_ref4$width = _ref4.width,
|
|
1706
|
+
width = _ref4$width === void 0 ? null : _ref4$width,
|
|
1707
|
+
_ref4$height = _ref4.height,
|
|
1708
|
+
height = _ref4$height === void 0 ? null : _ref4$height,
|
|
1709
|
+
opts = _objectWithoutProperties(_ref4, _excluded);
|
|
1905
1710
|
var _useDimensionObserver = useDimensionObserver(),
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1711
|
+
ref = _useDimensionObserver.ref,
|
|
1712
|
+
_useDimensionObserver2 = _useDimensionObserver.width,
|
|
1713
|
+
calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
|
|
1714
|
+
_useDimensionObserver3 = _useDimensionObserver.height,
|
|
1715
|
+
calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
|
|
1912
1716
|
var fullWidth = width !== null ? width : calculatedWidth;
|
|
1913
1717
|
var fullHeight = height !== null ? height : calculatedHeight;
|
|
1914
|
-
|
|
1915
1718
|
var _ref5 = opts || {},
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1719
|
+
_ref5$screenWidth = _ref5.screenWidth,
|
|
1720
|
+
screenWidth = _ref5$screenWidth === void 0 ? 320 : _ref5$screenWidth,
|
|
1721
|
+
_ref5$screenHeight = _ref5.screenHeight,
|
|
1722
|
+
screenHeight = _ref5$screenHeight === void 0 ? 480 : _ref5$screenHeight,
|
|
1723
|
+
_ref5$withoutMaxSize = _ref5.withoutMaxSize,
|
|
1724
|
+
withoutMaxSize = _ref5$withoutMaxSize === void 0 ? false : _ref5$withoutMaxSize,
|
|
1725
|
+
_ref5$landscapeMinHei = _ref5.landscapeMinHeight,
|
|
1726
|
+
landscapeMinHeight = _ref5$landscapeMinHei === void 0 ? 600 : _ref5$landscapeMinHei,
|
|
1727
|
+
_ref5$menuAlwaysOverS = _ref5.menuAlwaysOverScreen,
|
|
1728
|
+
menuAlwaysOverScreen = _ref5$menuAlwaysOverS === void 0 ? true : _ref5$menuAlwaysOverS,
|
|
1729
|
+
_ref5$landscapeMinRat = _ref5.landscapeMinRatio,
|
|
1730
|
+
landscapeMinRatio = _ref5$landscapeMinRat === void 0 ? 2 / 3 : _ref5$landscapeMinRat,
|
|
1731
|
+
_ref5$withoutScale = _ref5.withoutScale,
|
|
1732
|
+
withoutScale = _ref5$withoutScale === void 0 ? false : _ref5$withoutScale;
|
|
1931
1733
|
var screenRatio = screenWidth / screenHeight;
|
|
1932
1734
|
var elementRatio = fullWidth / fullHeight;
|
|
1933
1735
|
var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
|
|
@@ -1935,25 +1737,20 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
|
1935
1737
|
var finalWidth = fullWidth;
|
|
1936
1738
|
var finalHeight = fullHeight;
|
|
1937
1739
|
var menuOverScreen = !landscape;
|
|
1938
|
-
|
|
1939
1740
|
if (landscapeWithMaxSize) {
|
|
1940
1741
|
if (fullHeight < landscapeMinHeight || menuAlwaysOverScreen) {
|
|
1941
1742
|
menuOverScreen = true;
|
|
1942
1743
|
} else {
|
|
1943
1744
|
finalHeight = fullHeight - 100;
|
|
1944
1745
|
}
|
|
1945
|
-
|
|
1946
1746
|
finalWidth = Math.round(finalHeight * screenRatio);
|
|
1947
1747
|
}
|
|
1948
|
-
|
|
1949
1748
|
if (finalWidth % 2 === 1) {
|
|
1950
1749
|
finalWidth -= 1;
|
|
1951
1750
|
}
|
|
1952
|
-
|
|
1953
1751
|
if (finalHeight % 2 === 1) {
|
|
1954
1752
|
finalHeight -= 1;
|
|
1955
1753
|
}
|
|
1956
|
-
|
|
1957
1754
|
var scale = finalWidth > 0 ? finalWidth / screenWidth : null;
|
|
1958
1755
|
var screenSize = useScreenSize(_objectSpread({
|
|
1959
1756
|
width: withoutScale || scale === null ? finalWidth : screenWidth,
|
|
@@ -1971,29 +1768,24 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
|
1971
1768
|
resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
|
|
1972
1769
|
};
|
|
1973
1770
|
};
|
|
1974
|
-
|
|
1975
1771
|
var getWindowSize = function getWindowSize() {
|
|
1976
1772
|
return {
|
|
1977
1773
|
width: typeof window !== 'undefined' ? window.innerWidth : null,
|
|
1978
1774
|
height: typeof window !== 'undefined' ? window.innerHæeight : null
|
|
1979
1775
|
};
|
|
1980
1776
|
};
|
|
1981
|
-
|
|
1982
1777
|
var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
1983
1778
|
var _useState = useState(getWindowSize()),
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1779
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1780
|
+
windowSize = _useState2[0],
|
|
1781
|
+
setWindowSize = _useState2[1];
|
|
1988
1782
|
useEffect(function () {
|
|
1989
1783
|
var onResize = function onResize() {
|
|
1990
1784
|
return setWindowSize(getWindowSize());
|
|
1991
1785
|
};
|
|
1992
|
-
|
|
1993
1786
|
if (typeof window !== 'undefined') {
|
|
1994
1787
|
window.addEventListener('resize', onResize);
|
|
1995
1788
|
}
|
|
1996
|
-
|
|
1997
1789
|
return function () {
|
|
1998
1790
|
if (typeof window !== 'undefined') {
|
|
1999
1791
|
window.removeEventListener('resize', onResize);
|
|
@@ -2005,21 +1797,17 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
|
2005
1797
|
|
|
2006
1798
|
var getValueFromSpring = function getValueFromSpring(s) {
|
|
2007
1799
|
var _ref = s || {},
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
1800
|
+
_ref$value = _ref.value,
|
|
1801
|
+
v = _ref$value === void 0 ? null : _ref$value;
|
|
2011
1802
|
var _ref2 = v || {},
|
|
2012
|
-
|
|
2013
|
-
|
|
1803
|
+
p = _ref2.progress;
|
|
2014
1804
|
return p;
|
|
2015
1805
|
};
|
|
2016
|
-
|
|
2017
1806
|
function useSpringValue(wantedProgress, immediate, params) {
|
|
2018
1807
|
var _useState = useState(wantedProgress),
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
1808
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1809
|
+
progress = _useState2[0],
|
|
1810
|
+
setProgress = _useState2[1];
|
|
2023
1811
|
var onChange = useCallback(function (spring) {
|
|
2024
1812
|
return setProgress(getValueFromSpring(spring));
|
|
2025
1813
|
}, [setProgress]);
|
|
@@ -2033,29 +1821,28 @@ function useSpringValue(wantedProgress, immediate, params) {
|
|
|
2033
1821
|
|
|
2034
1822
|
var useSwipe = function useSwipe() {
|
|
2035
1823
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
1824
|
+
_ref$width = _ref.width,
|
|
1825
|
+
width = _ref$width === void 0 ? null : _ref$width,
|
|
1826
|
+
_ref$items = _ref.items,
|
|
1827
|
+
items = _ref$items === void 0 ? [] : _ref$items,
|
|
1828
|
+
_ref$withSpring = _ref.withSpring,
|
|
1829
|
+
withSpring = _ref$withSpring === void 0 ? true : _ref$withSpring,
|
|
1830
|
+
_ref$swipeWidthThresh = _ref.swipeWidthThreshold,
|
|
1831
|
+
swipeWidthThreshold = _ref$swipeWidthThresh === void 0 ? 3 : _ref$swipeWidthThresh,
|
|
1832
|
+
_ref$animateScale = _ref.animateScale,
|
|
1833
|
+
animateScale = _ref$animateScale === void 0 ? false : _ref$animateScale,
|
|
1834
|
+
_ref$disabled = _ref.disabled,
|
|
1835
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1836
|
+
_ref$lockAxis = _ref.lockAxis,
|
|
1837
|
+
lockAxis = _ref$lockAxis === void 0 ? false : _ref$lockAxis,
|
|
1838
|
+
_ref$onSwipeStart = _ref.onSwipeStart,
|
|
1839
|
+
onSwipeStart = _ref$onSwipeStart === void 0 ? null : _ref$onSwipeStart,
|
|
1840
|
+
_ref$onSwipeEnd = _ref.onSwipeEnd,
|
|
1841
|
+
onSwipeEnd = _ref$onSwipeEnd === void 0 ? null : _ref$onSwipeEnd,
|
|
1842
|
+
_ref$onSwipeCancel = _ref.onSwipeCancel,
|
|
1843
|
+
onSwipeCancel = _ref$onSwipeCancel === void 0 ? null : _ref$onSwipeCancel,
|
|
1844
|
+
_ref$onTap = _ref.onTap,
|
|
1845
|
+
onTap = _ref$onTap === void 0 ? null : _ref$onTap;
|
|
2059
1846
|
var swipingIndex = useRef(null);
|
|
2060
1847
|
var index = useRef(0);
|
|
2061
1848
|
var lockedAxis = useRef(null);
|
|
@@ -2075,55 +1862,52 @@ var useSwipe = function useSwipe() {
|
|
|
2075
1862
|
});
|
|
2076
1863
|
var getItems = useCallback(function () {
|
|
2077
1864
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
1865
|
+
_ref2$down = _ref2.down,
|
|
1866
|
+
down = _ref2$down === void 0 ? false : _ref2$down,
|
|
1867
|
+
_ref2$mx = _ref2.mx,
|
|
1868
|
+
mx = _ref2$mx === void 0 ? 0 : _ref2$mx;
|
|
2083
1869
|
return items.map(function (item, i) {
|
|
2084
1870
|
var x = disabled ? 0 : (i - index.current) * currentWidth + (down ? mx : 0);
|
|
2085
1871
|
var scale = !animateScale || disabled || !down ? 1 : 1 - Math.abs(mx) / currentWidth / 2;
|
|
2086
1872
|
return getItem(x, i, scale);
|
|
2087
1873
|
});
|
|
2088
|
-
}, [disabled, items, index, currentWidth, animateScale]);
|
|
1874
|
+
}, [disabled, items, index, currentWidth, animateScale]);
|
|
2089
1875
|
|
|
1876
|
+
// Initial items state
|
|
2090
1877
|
var _useSprings = useSprings(items.length, function (i) {
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
1878
|
+
return {
|
|
1879
|
+
x: disabled ? 0 : i * currentWidth,
|
|
1880
|
+
y: 0,
|
|
1881
|
+
zIndex: i,
|
|
1882
|
+
config: _objectSpread({}, !withSpring ? {
|
|
1883
|
+
duration: 1
|
|
1884
|
+
} : null)
|
|
1885
|
+
};
|
|
1886
|
+
}),
|
|
1887
|
+
_useSprings2 = _slicedToArray(_useSprings, 2),
|
|
1888
|
+
itemsWithProps = _useSprings2[0],
|
|
1889
|
+
set = _useSprings2[1];
|
|
2104
1890
|
var bind = useDrag(function (_ref3) {
|
|
2105
1891
|
var down = _ref3.down,
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
1892
|
+
_ref3$movement = _slicedToArray(_ref3.movement, 2),
|
|
1893
|
+
mx = _ref3$movement[0],
|
|
1894
|
+
my = _ref3$movement[1],
|
|
1895
|
+
_ref3$direction = _slicedToArray(_ref3.direction, 1),
|
|
1896
|
+
xDir = _ref3$direction[0],
|
|
1897
|
+
cancel = _ref3.cancel,
|
|
1898
|
+
tap = _ref3.tap;
|
|
2114
1899
|
if (disabled) {
|
|
2115
1900
|
cancel();
|
|
2116
1901
|
return;
|
|
2117
1902
|
}
|
|
2118
|
-
|
|
2119
1903
|
if (!down && swipingIndex.current === index.current) {
|
|
2120
1904
|
lockedAxis.current = null;
|
|
2121
|
-
|
|
2122
1905
|
if (onSwipeCancel !== null) {
|
|
2123
1906
|
onSwipeCancel(index.current);
|
|
2124
1907
|
}
|
|
2125
|
-
}
|
|
1908
|
+
}
|
|
2126
1909
|
|
|
1910
|
+
// Block first and last moves
|
|
2127
1911
|
/*
|
|
2128
1912
|
if (down && index.current === items.length - 1 && xDir < 0) {
|
|
2129
1913
|
cancel();
|
|
@@ -2135,55 +1919,48 @@ var useSwipe = function useSwipe() {
|
|
|
2135
1919
|
}
|
|
2136
1920
|
*/
|
|
2137
1921
|
|
|
2138
|
-
|
|
2139
1922
|
var movementX = !lockAxis || lockedAxis.current === 'x' ? mx : 0;
|
|
2140
1923
|
var movementY = !lockAxis || lockedAxis.current === 'y' ? my : 0;
|
|
2141
|
-
|
|
2142
1924
|
if (down) {
|
|
2143
1925
|
// Snap to next slide
|
|
2144
1926
|
if (Math.abs(movementX) > currentWidth / swipeWidthThreshold) {
|
|
2145
1927
|
index.current = clamp(index.current + (xDir > 0 ? -1 : 1), 0, count - 1);
|
|
2146
1928
|
lockedAxis.current = null;
|
|
2147
1929
|
cancel();
|
|
2148
|
-
|
|
2149
1930
|
if (onSwipeEnd !== null) {
|
|
2150
1931
|
onSwipeEnd(index.current);
|
|
2151
1932
|
}
|
|
2152
|
-
|
|
2153
1933
|
return;
|
|
2154
1934
|
}
|
|
2155
1935
|
}
|
|
2156
|
-
|
|
2157
1936
|
set(getItems({
|
|
2158
1937
|
down: down,
|
|
2159
1938
|
mx: movementX,
|
|
2160
1939
|
my: movementY
|
|
2161
|
-
}));
|
|
1940
|
+
}));
|
|
2162
1941
|
|
|
1942
|
+
// saving current swiping index in a ref in order to have a section called only once when swipe just started or a tap was detected
|
|
2163
1943
|
if (swipingIndex.current !== index.current) {
|
|
2164
1944
|
if (down && !tap) {
|
|
2165
1945
|
if (onSwipeStart !== null) {
|
|
2166
1946
|
onSwipeStart(index.current);
|
|
2167
1947
|
}
|
|
2168
1948
|
}
|
|
2169
|
-
|
|
2170
1949
|
if (!down && tap) {
|
|
2171
1950
|
if (onTap !== null) {
|
|
2172
1951
|
onTap();
|
|
2173
1952
|
}
|
|
2174
1953
|
}
|
|
2175
|
-
}
|
|
2176
|
-
|
|
1954
|
+
}
|
|
2177
1955
|
|
|
1956
|
+
// lock swiping on axis from initial 3 pixels distance (Y axis requires to swipe down)
|
|
2178
1957
|
if (lockAxis && down && lockedAxis.current === null) {
|
|
2179
1958
|
var distanceX = Math.abs(mx);
|
|
2180
1959
|
var distanceY = Math.abs(my);
|
|
2181
|
-
|
|
2182
1960
|
if (distanceX !== distanceY && (distanceY > 2 || distanceX > 2)) {
|
|
2183
1961
|
lockedAxis.current = distanceY > distanceX ? 'y' : 'x';
|
|
2184
1962
|
}
|
|
2185
1963
|
}
|
|
2186
|
-
|
|
2187
1964
|
swipingIndex.current = down && !tap ? index.current : null;
|
|
2188
1965
|
}, {
|
|
2189
1966
|
filterTaps: true
|
|
@@ -2194,8 +1971,9 @@ var useSwipe = function useSwipe() {
|
|
|
2194
1971
|
var setIndex = useCallback(function (idx) {
|
|
2195
1972
|
index.current = idx;
|
|
2196
1973
|
reset();
|
|
2197
|
-
}, [reset]);
|
|
1974
|
+
}, [reset]);
|
|
2198
1975
|
|
|
1976
|
+
// Reset on resize or others
|
|
2199
1977
|
useEffect(function () {
|
|
2200
1978
|
set(getItems());
|
|
2201
1979
|
}, [items, width, set, disabled]);
|
|
@@ -2222,20 +2000,17 @@ var useThemeParser = function useThemeParser() {
|
|
|
2222
2000
|
|
|
2223
2001
|
var getScreenOptions = function getScreenOptions(screenContext, opts) {
|
|
2224
2002
|
var _ref = screenContext || {},
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2003
|
+
_ref$data = _ref.data,
|
|
2004
|
+
ctxData = _ref$data === void 0 ? null : _ref$data;
|
|
2228
2005
|
var _ref2 = ctxData || {},
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2006
|
+
_ref2$id = _ref2.id,
|
|
2007
|
+
ctxScreenId = _ref2$id === void 0 ? null : _ref2$id,
|
|
2008
|
+
ctxScreenType = _ref2.type;
|
|
2233
2009
|
var _ref3 = opts || {},
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2010
|
+
_ref3$screenId = _ref3.screenId,
|
|
2011
|
+
optsScreenId = _ref3$screenId === void 0 ? null : _ref3$screenId,
|
|
2012
|
+
_ref3$screenType = _ref3.screenType,
|
|
2013
|
+
optsScreenType = _ref3$screenType === void 0 ? null : _ref3$screenType;
|
|
2239
2014
|
var screenId = ctxScreenId !== null ? ctxScreenId : optsScreenId;
|
|
2240
2015
|
var screenType = ctxScreenType !== null ? ctxScreenType : optsScreenType;
|
|
2241
2016
|
return {
|
|
@@ -2243,22 +2018,17 @@ var getScreenOptions = function getScreenOptions(screenContext, opts) {
|
|
|
2243
2018
|
screenType: screenType
|
|
2244
2019
|
};
|
|
2245
2020
|
};
|
|
2246
|
-
|
|
2247
2021
|
var hasTracking = function hasTracking(tracking) {
|
|
2248
2022
|
return typeof tracking !== 'undefined';
|
|
2249
2023
|
};
|
|
2250
|
-
|
|
2251
2024
|
var useTrackScreenView = function useTrackScreenView() {
|
|
2252
2025
|
var tracking = useTracking();
|
|
2253
|
-
|
|
2254
2026
|
if (!hasTracking(tracking)) {
|
|
2255
2027
|
return function () {};
|
|
2256
2028
|
}
|
|
2257
|
-
|
|
2258
2029
|
return useCallback(function () {
|
|
2259
2030
|
var screen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2260
2031
|
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2261
|
-
|
|
2262
2032
|
if (screen !== null && index !== null) {
|
|
2263
2033
|
tracking.trackScreenView(screen, index);
|
|
2264
2034
|
}
|
|
@@ -2267,22 +2037,17 @@ var useTrackScreenView = function useTrackScreenView() {
|
|
|
2267
2037
|
var useTrackScreenEvent = function useTrackScreenEvent() {
|
|
2268
2038
|
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2269
2039
|
var tracking = useTracking();
|
|
2270
|
-
|
|
2271
2040
|
if (!hasTracking(tracking)) {
|
|
2272
2041
|
return function () {};
|
|
2273
2042
|
}
|
|
2274
|
-
|
|
2275
2043
|
var screenContext = useScreen();
|
|
2276
|
-
|
|
2277
2044
|
if (screenContext.renderContext !== 'view') {
|
|
2278
2045
|
return function () {};
|
|
2279
2046
|
}
|
|
2280
|
-
|
|
2281
2047
|
return useCallback(function () {
|
|
2282
2048
|
var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2283
2049
|
var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2284
2050
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2285
|
-
|
|
2286
2051
|
if (type !== null && action !== null) {
|
|
2287
2052
|
tracking.trackEvent("screen_".concat(type), action, label, _objectSpread(_objectSpread({}, opts), getScreenOptions(screenContext, opts)));
|
|
2288
2053
|
}
|
|
@@ -2291,22 +2056,17 @@ var useTrackScreenEvent = function useTrackScreenEvent() {
|
|
|
2291
2056
|
var useTrackScreenMedia = function useTrackScreenMedia() {
|
|
2292
2057
|
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2293
2058
|
var tracking = useTracking();
|
|
2294
|
-
|
|
2295
2059
|
if (!hasTracking(tracking)) {
|
|
2296
2060
|
return function () {};
|
|
2297
2061
|
}
|
|
2298
|
-
|
|
2299
2062
|
var screenContext = useScreen();
|
|
2300
|
-
|
|
2301
2063
|
if (screenContext.renderContext !== 'view') {
|
|
2302
2064
|
return function () {};
|
|
2303
2065
|
}
|
|
2304
|
-
|
|
2305
2066
|
return useCallback(function () {
|
|
2306
2067
|
var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2307
2068
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2308
2069
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2309
|
-
|
|
2310
2070
|
if (type !== null && media !== null && action !== null) {
|
|
2311
2071
|
tracking.trackMedia("screen_".concat(type), media, action, _objectSpread(_objectSpread({}, opts), getScreenOptions(screenContext, opts)));
|
|
2312
2072
|
}
|
|
@@ -2314,17 +2074,14 @@ var useTrackScreenMedia = function useTrackScreenMedia() {
|
|
|
2314
2074
|
};
|
|
2315
2075
|
var useTrackEvent = function useTrackEvent() {
|
|
2316
2076
|
var tracking = useTracking();
|
|
2317
|
-
|
|
2318
2077
|
if (!hasTracking(tracking)) {
|
|
2319
2078
|
return function () {};
|
|
2320
2079
|
}
|
|
2321
|
-
|
|
2322
2080
|
return useCallback(function () {
|
|
2323
2081
|
var category = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2324
2082
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2325
2083
|
var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
2326
2084
|
var opts = arguments.length > 3 ? arguments[3] : undefined;
|
|
2327
|
-
|
|
2328
2085
|
if (category !== null && action !== null) {
|
|
2329
2086
|
tracking.trackEvent(category, action, label, opts);
|
|
2330
2087
|
}
|
|
@@ -2333,16 +2090,13 @@ var useTrackEvent = function useTrackEvent() {
|
|
|
2333
2090
|
var useTrackMedia = function useTrackMedia() {
|
|
2334
2091
|
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2335
2092
|
var tracking = useTracking();
|
|
2336
|
-
|
|
2337
2093
|
if (!hasTracking(tracking)) {
|
|
2338
2094
|
return function () {};
|
|
2339
2095
|
}
|
|
2340
|
-
|
|
2341
2096
|
return useCallback(function () {
|
|
2342
2097
|
var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2343
2098
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2344
2099
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2345
|
-
|
|
2346
2100
|
if (type !== null && media !== null && action !== null) {
|
|
2347
2101
|
tracking.trackMedia(type, media, action, opts);
|
|
2348
2102
|
}
|