@folklore/hooks 0.0.73 → 0.0.75
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/dist/cjs.js +162 -211
- package/dist/es.js +162 -211
- package/package.json +10 -10
package/dist/cjs.js
CHANGED
|
@@ -8,13 +8,12 @@ var EventsManager = require('@folklore/events');
|
|
|
8
8
|
var cancelablePromise = require('cancelable-promise');
|
|
9
9
|
var isNumber = require('lodash/isNumber');
|
|
10
10
|
|
|
11
|
-
function useCounter(desiredValue,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
11
|
+
function useCounter(desiredValue, {
|
|
12
|
+
disabled = false,
|
|
13
|
+
maxDuration = 2000,
|
|
14
|
+
speed = 1 / 10,
|
|
15
|
+
initialValue = null
|
|
16
|
+
}) {
|
|
18
17
|
const [currentValue, setCurrentValue] = react.useState(initialValue !== null ? initialValue : desiredValue);
|
|
19
18
|
react.useEffect(() => {
|
|
20
19
|
if (initialValue !== null && !disabled) {
|
|
@@ -60,9 +59,7 @@ function useCounter(desiredValue, _ref) {
|
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
const NO_PLAYER_ERROR$3 = new Error('No player');
|
|
63
|
-
function useDailymotionPlayer() {
|
|
64
|
-
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
65
|
-
let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
62
|
+
function useDailymotionPlayer(id = null, params = {}) {
|
|
66
63
|
const {
|
|
67
64
|
width = 0,
|
|
68
65
|
height = 0,
|
|
@@ -194,11 +191,10 @@ function useDailymotionPlayer() {
|
|
|
194
191
|
setLoaded(true);
|
|
195
192
|
debug('onPlaybackReady [ID: %s]', videoId);
|
|
196
193
|
}
|
|
197
|
-
function onDurationChange(
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
} = _ref;
|
|
194
|
+
function onDurationChange({
|
|
195
|
+
videoTime,
|
|
196
|
+
videoDuration
|
|
197
|
+
}) {
|
|
202
198
|
currentMetadata = {
|
|
203
199
|
...currentMetadata,
|
|
204
200
|
duration: videoDuration
|
|
@@ -207,21 +203,19 @@ function useDailymotionPlayer() {
|
|
|
207
203
|
setCurrentTime(videoTime);
|
|
208
204
|
debug('onDurationChange [ID: %s]', videoId);
|
|
209
205
|
}
|
|
210
|
-
function onVolumeChange(
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
} = _ref2;
|
|
206
|
+
function onVolumeChange({
|
|
207
|
+
playerIsMuted,
|
|
208
|
+
playerVolume,
|
|
209
|
+
videoTime
|
|
210
|
+
}) {
|
|
216
211
|
setMuted(playerIsMuted);
|
|
217
212
|
setVolumeState(playerVolume);
|
|
218
213
|
setCurrentTime(videoTime);
|
|
219
214
|
debug('onVolumeChange [ID: %s]', videoId);
|
|
220
215
|
}
|
|
221
|
-
function onPlay(
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
} = _ref3;
|
|
216
|
+
function onPlay({
|
|
217
|
+
videoTime
|
|
218
|
+
}) {
|
|
225
219
|
currentPlayState = {
|
|
226
220
|
...currentPlayState,
|
|
227
221
|
playing: true,
|
|
@@ -232,10 +226,9 @@ function useDailymotionPlayer() {
|
|
|
232
226
|
setCurrentTime(videoTime);
|
|
233
227
|
debug('onPlay [ID: %s]', videoId);
|
|
234
228
|
}
|
|
235
|
-
function onPause(
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
} = _ref4;
|
|
229
|
+
function onPause({
|
|
230
|
+
videoTime
|
|
231
|
+
}) {
|
|
239
232
|
currentPlayState = {
|
|
240
233
|
...currentPlayState,
|
|
241
234
|
playing: false,
|
|
@@ -246,10 +239,9 @@ function useDailymotionPlayer() {
|
|
|
246
239
|
setCurrentTime(videoTime);
|
|
247
240
|
debug('onPause [ID: %s]', videoId);
|
|
248
241
|
}
|
|
249
|
-
function onEnd(
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
} = _ref5;
|
|
242
|
+
function onEnd({
|
|
243
|
+
videoTime
|
|
244
|
+
}) {
|
|
253
245
|
currentPlayState = {
|
|
254
246
|
...currentPlayState,
|
|
255
247
|
playing: false,
|
|
@@ -260,10 +252,9 @@ function useDailymotionPlayer() {
|
|
|
260
252
|
setCurrentTime(videoTime);
|
|
261
253
|
debug('onEnd [ID: %s]', videoId);
|
|
262
254
|
}
|
|
263
|
-
function onPlaying(
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
} = _ref6;
|
|
255
|
+
function onPlaying({
|
|
256
|
+
videoTime
|
|
257
|
+
}) {
|
|
267
258
|
currentPlayState = {
|
|
268
259
|
...currentPlayState,
|
|
269
260
|
buffering: false
|
|
@@ -272,10 +263,9 @@ function useDailymotionPlayer() {
|
|
|
272
263
|
setCurrentTime(videoTime);
|
|
273
264
|
debug('onPlaying [ID: %s]', videoId);
|
|
274
265
|
}
|
|
275
|
-
function onWaiting(
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
} = _ref7;
|
|
266
|
+
function onWaiting({
|
|
267
|
+
videoTime
|
|
268
|
+
}) {
|
|
279
269
|
currentPlayState = {
|
|
280
270
|
...currentPlayState,
|
|
281
271
|
buffering: true
|
|
@@ -284,10 +274,9 @@ function useDailymotionPlayer() {
|
|
|
284
274
|
setCurrentTime(videoTime);
|
|
285
275
|
debug('onWaiting [ID: %s]', videoId);
|
|
286
276
|
}
|
|
287
|
-
function onTimeChange(
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
} = _ref8;
|
|
277
|
+
function onTimeChange({
|
|
278
|
+
videoTime
|
|
279
|
+
}) {
|
|
291
280
|
setCurrentTime(videoTime);
|
|
292
281
|
}
|
|
293
282
|
function onAdStart() {
|
|
@@ -406,16 +395,14 @@ function useDocumentEvent(event, callback) {
|
|
|
406
395
|
}
|
|
407
396
|
|
|
408
397
|
const observersCache = new Map();
|
|
409
|
-
function getOptionsKey(
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
} = _ref;
|
|
398
|
+
function getOptionsKey({
|
|
399
|
+
root = null,
|
|
400
|
+
rootMargin,
|
|
401
|
+
threshold = null
|
|
402
|
+
}) {
|
|
415
403
|
return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
|
|
416
404
|
}
|
|
417
|
-
function createObserver(Observer) {
|
|
418
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
405
|
+
function createObserver(Observer, options = {}) {
|
|
419
406
|
let subscribers = [];
|
|
420
407
|
const addSubscriber = (element, callback) => {
|
|
421
408
|
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
@@ -436,11 +423,10 @@ function createObserver(Observer) {
|
|
|
436
423
|
} : it).filter(it => it.callbacks.length > 0);
|
|
437
424
|
const onUpdate = entries => {
|
|
438
425
|
entries.forEach(entry => {
|
|
439
|
-
subscribers.forEach(
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
} = _ref2;
|
|
426
|
+
subscribers.forEach(({
|
|
427
|
+
element,
|
|
428
|
+
callbacks
|
|
429
|
+
}) => {
|
|
444
430
|
if (element === entry.target) {
|
|
445
431
|
callbacks.forEach(callback => {
|
|
446
432
|
callback(entry);
|
|
@@ -450,8 +436,7 @@ function createObserver(Observer) {
|
|
|
450
436
|
});
|
|
451
437
|
};
|
|
452
438
|
const observer = new Observer(onUpdate, options);
|
|
453
|
-
const unsubscribe =
|
|
454
|
-
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
439
|
+
const unsubscribe = (element, callback = null) => {
|
|
455
440
|
subscribers = removeSubscriber(element, callback);
|
|
456
441
|
if (typeof observer.unobserve === 'undefined') {
|
|
457
442
|
observer.disconnect();
|
|
@@ -478,9 +463,7 @@ function createObserver(Observer) {
|
|
|
478
463
|
observer
|
|
479
464
|
};
|
|
480
465
|
}
|
|
481
|
-
function getObserver() {
|
|
482
|
-
let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
483
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
466
|
+
function getObserver(Observer = null, options = {}) {
|
|
484
467
|
if (Observer === null) {
|
|
485
468
|
return {
|
|
486
469
|
observer: null,
|
|
@@ -499,9 +482,7 @@ function getObserver() {
|
|
|
499
482
|
}
|
|
500
483
|
return observers[observerKey];
|
|
501
484
|
}
|
|
502
|
-
function useObserver(Observer) {
|
|
503
|
-
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
504
|
-
let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
485
|
+
function useObserver(Observer, opts = {}, initialEntry = {}) {
|
|
505
486
|
const {
|
|
506
487
|
root = null,
|
|
507
488
|
rootMargin = null,
|
|
@@ -567,13 +548,12 @@ const intersectionObserverInitialEntry = {
|
|
|
567
548
|
boundingClientRect: null,
|
|
568
549
|
rootBounds: null
|
|
569
550
|
};
|
|
570
|
-
function useIntersectionObserver(
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
551
|
+
function useIntersectionObserver({
|
|
552
|
+
root = null,
|
|
553
|
+
rootMargin = '0px',
|
|
554
|
+
threshold = defaultThreshold,
|
|
555
|
+
disabled = false
|
|
556
|
+
} = {}) {
|
|
577
557
|
return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
|
|
578
558
|
root,
|
|
579
559
|
rootMargin,
|
|
@@ -591,20 +571,18 @@ const resizeObserverInitialEntry = {
|
|
|
591
571
|
contentBoxSize: null,
|
|
592
572
|
borderBoxSize: null
|
|
593
573
|
};
|
|
594
|
-
function useResizeObserver(
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
574
|
+
function useResizeObserver({
|
|
575
|
+
disabled = false
|
|
576
|
+
} = {}) {
|
|
598
577
|
return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
|
|
599
578
|
disabled
|
|
600
579
|
}, resizeObserverInitialEntry);
|
|
601
580
|
}
|
|
602
581
|
|
|
603
|
-
function useIsVisible(
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
582
|
+
function useIsVisible({
|
|
583
|
+
persist = false,
|
|
584
|
+
...opts
|
|
585
|
+
} = {}) {
|
|
608
586
|
const {
|
|
609
587
|
ref,
|
|
610
588
|
entry: {
|
|
@@ -638,8 +616,7 @@ function useWindowEvent(event, callback) {
|
|
|
638
616
|
}, [event, callback]);
|
|
639
617
|
}
|
|
640
618
|
|
|
641
|
-
function useKeyboard() {
|
|
642
|
-
let keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
619
|
+
function useKeyboard(keyMap = null) {
|
|
643
620
|
const onKeyDown = react.useCallback(event => {
|
|
644
621
|
const {
|
|
645
622
|
key
|
|
@@ -672,40 +649,33 @@ function useKeyboard() {
|
|
|
672
649
|
useWindowEvent('keyup', keyMap !== null ? onKeyUp : null);
|
|
673
650
|
}
|
|
674
651
|
|
|
675
|
-
const useItemsPaginated =
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
last_page: lastPage,
|
|
685
|
-
total
|
|
686
|
-
},
|
|
687
|
-
data: items
|
|
688
|
-
} = _ref2;
|
|
689
|
-
return {
|
|
690
|
-
page: parseInt(currentPage, 10),
|
|
691
|
-
lastPage: parseInt(lastPage, 10),
|
|
692
|
-
total: parseInt(total, 10),
|
|
693
|
-
items
|
|
694
|
-
};
|
|
652
|
+
const useItemsPaginated = (loader, {
|
|
653
|
+
page = null,
|
|
654
|
+
count = 10,
|
|
655
|
+
pages: initialPages = null,
|
|
656
|
+
getPageFromResponse = ({
|
|
657
|
+
pagination: {
|
|
658
|
+
page: currentPage,
|
|
659
|
+
last_page: lastPage,
|
|
660
|
+
total
|
|
695
661
|
},
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
662
|
+
data: items
|
|
663
|
+
}) => ({
|
|
664
|
+
page: parseInt(currentPage, 10),
|
|
665
|
+
lastPage: parseInt(lastPage, 10),
|
|
666
|
+
total: parseInt(total, 10),
|
|
667
|
+
items
|
|
668
|
+
}),
|
|
669
|
+
onLoaded = null,
|
|
670
|
+
onError = null,
|
|
671
|
+
query = null
|
|
672
|
+
} = {}) => {
|
|
700
673
|
const lastState = react.useRef(null);
|
|
701
674
|
const initialState = react.useMemo(() => {
|
|
702
675
|
const finalInitialPages = initialPages !== null ? initialPages.map(it => getPageFromResponse(it)) : null;
|
|
703
|
-
const finalLastPage = finalInitialPages !== null ? finalInitialPages.reduce((currentLastPage,
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
} = _ref3;
|
|
707
|
-
return initialLastPage > currentLastPage ? initialLastPage : currentLastPage;
|
|
708
|
-
}, -1) : -1;
|
|
676
|
+
const finalLastPage = finalInitialPages !== null ? finalInitialPages.reduce((currentLastPage, {
|
|
677
|
+
lastPage: initialLastPage
|
|
678
|
+
}) => initialLastPage > currentLastPage ? initialLastPage : currentLastPage, -1) : -1;
|
|
709
679
|
return {
|
|
710
680
|
lastPage: finalLastPage,
|
|
711
681
|
total: finalInitialPages !== null ? finalInitialPages[0].total : 0,
|
|
@@ -723,19 +693,14 @@ const useItemsPaginated = function (loader) {
|
|
|
723
693
|
pages,
|
|
724
694
|
total
|
|
725
695
|
} = state;
|
|
726
|
-
const items = pages !== null ? pages.reduce((pagesItems,
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
} = _ref4;
|
|
730
|
-
return pagesItems.concat(pageItems);
|
|
731
|
-
}, []) : null;
|
|
696
|
+
const items = pages !== null ? pages.reduce((pagesItems, {
|
|
697
|
+
items: pageItems
|
|
698
|
+
}) => pagesItems.concat(pageItems), []) : null;
|
|
732
699
|
const updateState = update => setState({
|
|
733
700
|
...state,
|
|
734
701
|
...update
|
|
735
702
|
});
|
|
736
|
-
const updateFromResponse =
|
|
737
|
-
let error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
738
|
-
let reset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
703
|
+
const updateFromResponse = (response, error = null, reset = false) => {
|
|
739
704
|
if (error !== null) {
|
|
740
705
|
updateState({
|
|
741
706
|
loaded: false,
|
|
@@ -855,12 +820,9 @@ const useItemsPaginated = function (loader) {
|
|
|
855
820
|
}
|
|
856
821
|
};
|
|
857
822
|
}, [loader, page]);
|
|
858
|
-
const currentPage = pages !== null ? pages.find(
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
} = _ref5;
|
|
862
|
-
return parseInt(pageNumber, 10) === parseInt(page, 10);
|
|
863
|
-
}) || null : null;
|
|
823
|
+
const currentPage = pages !== null ? pages.find(({
|
|
824
|
+
page: pageNumber
|
|
825
|
+
}) => parseInt(pageNumber, 10) === parseInt(page, 10)) || null : null;
|
|
864
826
|
return {
|
|
865
827
|
items,
|
|
866
828
|
pages,
|
|
@@ -876,14 +838,13 @@ const useItemsPaginated = function (loader) {
|
|
|
876
838
|
};
|
|
877
839
|
};
|
|
878
840
|
|
|
879
|
-
function usePlayerCurrentTime(player
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
841
|
+
function usePlayerCurrentTime(player, {
|
|
842
|
+
id = null,
|
|
843
|
+
disabled = false,
|
|
844
|
+
updateInterval = 1000,
|
|
845
|
+
onUpdate: customOnUpdate = null,
|
|
846
|
+
getCurrentTime = p => p.currentTime
|
|
847
|
+
} = {}) {
|
|
887
848
|
const [currentTime, setCurrentTime] = react.useState(0);
|
|
888
849
|
const realCurrentTime = react.useRef(currentTime);
|
|
889
850
|
const lastIdRef = react.useRef(id);
|
|
@@ -926,16 +887,15 @@ function usePlayerCurrentTime(player) {
|
|
|
926
887
|
}
|
|
927
888
|
|
|
928
889
|
const NO_PLAYER_ERROR$2 = new Error('No player');
|
|
929
|
-
function useNativeVideoPlayer(url
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
890
|
+
function useNativeVideoPlayer(url, {
|
|
891
|
+
width = 0,
|
|
892
|
+
height = 0,
|
|
893
|
+
duration = 0,
|
|
894
|
+
muted: providedMuted = false,
|
|
895
|
+
initialMuted = false,
|
|
896
|
+
timeUpdateInterval = 1000,
|
|
897
|
+
onTimeUpdate: customOnTimeUpdate = null
|
|
898
|
+
} = {}) {
|
|
939
899
|
const debug = react.useMemo(() => createDebug('folklore:video:native'), []);
|
|
940
900
|
const elementRef = react.useRef(null);
|
|
941
901
|
const [loaded, setLoaded] = react.useState(false);
|
|
@@ -1118,27 +1078,26 @@ function useNativeVideoPlayer(url) {
|
|
|
1118
1078
|
}
|
|
1119
1079
|
|
|
1120
1080
|
const NO_PLAYER_ERROR$1 = new Error('No player');
|
|
1121
|
-
function useVimeoPlayer(id
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1081
|
+
function useVimeoPlayer(id, {
|
|
1082
|
+
width = 0,
|
|
1083
|
+
height = 0,
|
|
1084
|
+
duration = 0,
|
|
1085
|
+
autoplay = false,
|
|
1086
|
+
autopause = true,
|
|
1087
|
+
byline = false,
|
|
1088
|
+
controls = false,
|
|
1089
|
+
muted: providedMuted = false,
|
|
1090
|
+
initialMuted = false,
|
|
1091
|
+
timeUpdateInterval = 1000,
|
|
1092
|
+
onTimeUpdate: customOnTimeUpdate = null,
|
|
1093
|
+
getVideoId = url => {
|
|
1094
|
+
if (url === null || url.match(/^[0-9]+$/) !== null) {
|
|
1095
|
+
return url;
|
|
1096
|
+
}
|
|
1097
|
+
const match = url.match(/\/[0-9]+/);
|
|
1098
|
+
return match !== null ? match[1] : null;
|
|
1099
|
+
}
|
|
1100
|
+
} = {}) {
|
|
1142
1101
|
const debug = react.useMemo(() => createDebug('folklore:video:vimeo'), []);
|
|
1143
1102
|
const [apiLoaded, setApiLoaded] = react.useState(false);
|
|
1144
1103
|
const apiRef = react.useRef(null);
|
|
@@ -1294,8 +1253,7 @@ function useVimeoPlayer(id) {
|
|
|
1294
1253
|
}
|
|
1295
1254
|
let canceled = false;
|
|
1296
1255
|
const onLoaded = () => {
|
|
1297
|
-
Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(
|
|
1298
|
-
let [newDuration, newWidth, newHeight, newMuted] = _ref;
|
|
1256
|
+
Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(([newDuration, newWidth, newHeight, newMuted]) => {
|
|
1299
1257
|
if (canceled) {
|
|
1300
1258
|
return;
|
|
1301
1259
|
}
|
|
@@ -1335,10 +1293,9 @@ function useVimeoPlayer(id) {
|
|
|
1335
1293
|
});
|
|
1336
1294
|
debug('onPause [ID: %s]', videoId);
|
|
1337
1295
|
};
|
|
1338
|
-
const onVolumeChange =
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
} = _ref2;
|
|
1296
|
+
const onVolumeChange = ({
|
|
1297
|
+
volume: newVolume
|
|
1298
|
+
}) => {
|
|
1342
1299
|
setVolumeState(newVolume);
|
|
1343
1300
|
debug('onVolumeChange [ID: %s]', videoId);
|
|
1344
1301
|
};
|
|
@@ -1421,27 +1378,26 @@ function useVimeoPlayer(id) {
|
|
|
1421
1378
|
}
|
|
1422
1379
|
|
|
1423
1380
|
const NO_PLAYER_ERROR = new Error('No player');
|
|
1424
|
-
function useYouTubePlayer(id
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1381
|
+
function useYouTubePlayer(id, {
|
|
1382
|
+
width = 0,
|
|
1383
|
+
height = 0,
|
|
1384
|
+
duration = 0,
|
|
1385
|
+
autoplay = false,
|
|
1386
|
+
controls = true,
|
|
1387
|
+
timeUpdateInterval = 1000,
|
|
1388
|
+
muted: providedMuted = false,
|
|
1389
|
+
initialMuted = false,
|
|
1390
|
+
onVolumeChange: customOnVolumeChange = null,
|
|
1391
|
+
onTimeUpdate: customOnTimeUpdate = null,
|
|
1392
|
+
getVideoId = url => {
|
|
1393
|
+
if (url === null || url.match(/^https?:/) === null) {
|
|
1394
|
+
return url;
|
|
1395
|
+
}
|
|
1396
|
+
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
|
1397
|
+
const match = url.match(regExp);
|
|
1398
|
+
return match !== null ? match[7] : null;
|
|
1399
|
+
}
|
|
1400
|
+
} = {}) {
|
|
1445
1401
|
const debug = react.useMemo(() => createDebug('folklore:video:youtube'), []);
|
|
1446
1402
|
const [apiLoaded, setApiLoaded] = react.useState(typeof window !== 'undefined' && typeof window.YT !== 'undefined');
|
|
1447
1403
|
const apiRef = react.useRef(typeof window !== 'undefined' && typeof window.YT !== 'undefined' ? window.YT : null);
|
|
@@ -1568,10 +1524,9 @@ function useYouTubePlayer(id) {
|
|
|
1568
1524
|
player.loadVideoById(videoId);
|
|
1569
1525
|
} else {
|
|
1570
1526
|
debug('Create player [ID: %s]', videoId);
|
|
1571
|
-
const onReady =
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
} = _ref;
|
|
1527
|
+
const onReady = ({
|
|
1528
|
+
target
|
|
1529
|
+
}) => {
|
|
1575
1530
|
player = target;
|
|
1576
1531
|
playerRef.current = target;
|
|
1577
1532
|
setReady(true);
|
|
@@ -1587,10 +1542,9 @@ function useYouTubePlayer(id) {
|
|
|
1587
1542
|
player.mute();
|
|
1588
1543
|
}
|
|
1589
1544
|
};
|
|
1590
|
-
const onStateChange =
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
} = _ref2;
|
|
1545
|
+
const onStateChange = ({
|
|
1546
|
+
data: state
|
|
1547
|
+
}) => {
|
|
1594
1548
|
const newState = {
|
|
1595
1549
|
playing: state === YT.PlayerState.PLAYING,
|
|
1596
1550
|
paused: state === YT.PlayerState.PAUSED,
|
|
@@ -1746,10 +1700,9 @@ const getWindowSize = () => ({
|
|
|
1746
1700
|
height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
|
|
1747
1701
|
});
|
|
1748
1702
|
let currentSize = getWindowSize();
|
|
1749
|
-
function useWindowSize(
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1703
|
+
function useWindowSize({
|
|
1704
|
+
onChange = null
|
|
1705
|
+
} = {}) {
|
|
1753
1706
|
const [size, setSize] = react.useState(currentSize);
|
|
1754
1707
|
const sizeRef = react.useRef(size);
|
|
1755
1708
|
const updateSize = react.useCallback(() => {
|
|
@@ -1790,8 +1743,7 @@ function useVisualViewport() {
|
|
|
1790
1743
|
width: windowWidth,
|
|
1791
1744
|
height: windowHeight
|
|
1792
1745
|
});
|
|
1793
|
-
const updateViewport = react.useCallback(
|
|
1794
|
-
let viewPort = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1746
|
+
const updateViewport = react.useCallback((viewPort = null) => {
|
|
1795
1747
|
const {
|
|
1796
1748
|
width: newWidth = 0,
|
|
1797
1749
|
height: newHeight = 0,
|
|
@@ -1837,8 +1789,7 @@ const getWindowScroll = () => ({
|
|
|
1837
1789
|
y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
|
|
1838
1790
|
});
|
|
1839
1791
|
let currentScroll = getWindowScroll();
|
|
1840
|
-
function useWindowScroll() {
|
|
1841
|
-
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1792
|
+
function useWindowScroll(opts = {}) {
|
|
1842
1793
|
const {
|
|
1843
1794
|
onChange = null
|
|
1844
1795
|
} = opts;
|
package/dist/es.js
CHANGED
|
@@ -6,13 +6,12 @@ import EventsManager from '@folklore/events';
|
|
|
6
6
|
import { cancelable } from 'cancelable-promise';
|
|
7
7
|
import isNumber from 'lodash/isNumber';
|
|
8
8
|
|
|
9
|
-
function useCounter(desiredValue,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
9
|
+
function useCounter(desiredValue, {
|
|
10
|
+
disabled = false,
|
|
11
|
+
maxDuration = 2000,
|
|
12
|
+
speed = 1 / 10,
|
|
13
|
+
initialValue = null
|
|
14
|
+
}) {
|
|
16
15
|
const [currentValue, setCurrentValue] = useState(initialValue !== null ? initialValue : desiredValue);
|
|
17
16
|
useEffect(() => {
|
|
18
17
|
if (initialValue !== null && !disabled) {
|
|
@@ -58,9 +57,7 @@ function useCounter(desiredValue, _ref) {
|
|
|
58
57
|
}
|
|
59
58
|
|
|
60
59
|
const NO_PLAYER_ERROR$3 = new Error('No player');
|
|
61
|
-
function useDailymotionPlayer() {
|
|
62
|
-
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
63
|
-
let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
60
|
+
function useDailymotionPlayer(id = null, params = {}) {
|
|
64
61
|
const {
|
|
65
62
|
width = 0,
|
|
66
63
|
height = 0,
|
|
@@ -192,11 +189,10 @@ function useDailymotionPlayer() {
|
|
|
192
189
|
setLoaded(true);
|
|
193
190
|
debug('onPlaybackReady [ID: %s]', videoId);
|
|
194
191
|
}
|
|
195
|
-
function onDurationChange(
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
} = _ref;
|
|
192
|
+
function onDurationChange({
|
|
193
|
+
videoTime,
|
|
194
|
+
videoDuration
|
|
195
|
+
}) {
|
|
200
196
|
currentMetadata = {
|
|
201
197
|
...currentMetadata,
|
|
202
198
|
duration: videoDuration
|
|
@@ -205,21 +201,19 @@ function useDailymotionPlayer() {
|
|
|
205
201
|
setCurrentTime(videoTime);
|
|
206
202
|
debug('onDurationChange [ID: %s]', videoId);
|
|
207
203
|
}
|
|
208
|
-
function onVolumeChange(
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
} = _ref2;
|
|
204
|
+
function onVolumeChange({
|
|
205
|
+
playerIsMuted,
|
|
206
|
+
playerVolume,
|
|
207
|
+
videoTime
|
|
208
|
+
}) {
|
|
214
209
|
setMuted(playerIsMuted);
|
|
215
210
|
setVolumeState(playerVolume);
|
|
216
211
|
setCurrentTime(videoTime);
|
|
217
212
|
debug('onVolumeChange [ID: %s]', videoId);
|
|
218
213
|
}
|
|
219
|
-
function onPlay(
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
} = _ref3;
|
|
214
|
+
function onPlay({
|
|
215
|
+
videoTime
|
|
216
|
+
}) {
|
|
223
217
|
currentPlayState = {
|
|
224
218
|
...currentPlayState,
|
|
225
219
|
playing: true,
|
|
@@ -230,10 +224,9 @@ function useDailymotionPlayer() {
|
|
|
230
224
|
setCurrentTime(videoTime);
|
|
231
225
|
debug('onPlay [ID: %s]', videoId);
|
|
232
226
|
}
|
|
233
|
-
function onPause(
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
} = _ref4;
|
|
227
|
+
function onPause({
|
|
228
|
+
videoTime
|
|
229
|
+
}) {
|
|
237
230
|
currentPlayState = {
|
|
238
231
|
...currentPlayState,
|
|
239
232
|
playing: false,
|
|
@@ -244,10 +237,9 @@ function useDailymotionPlayer() {
|
|
|
244
237
|
setCurrentTime(videoTime);
|
|
245
238
|
debug('onPause [ID: %s]', videoId);
|
|
246
239
|
}
|
|
247
|
-
function onEnd(
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
} = _ref5;
|
|
240
|
+
function onEnd({
|
|
241
|
+
videoTime
|
|
242
|
+
}) {
|
|
251
243
|
currentPlayState = {
|
|
252
244
|
...currentPlayState,
|
|
253
245
|
playing: false,
|
|
@@ -258,10 +250,9 @@ function useDailymotionPlayer() {
|
|
|
258
250
|
setCurrentTime(videoTime);
|
|
259
251
|
debug('onEnd [ID: %s]', videoId);
|
|
260
252
|
}
|
|
261
|
-
function onPlaying(
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
} = _ref6;
|
|
253
|
+
function onPlaying({
|
|
254
|
+
videoTime
|
|
255
|
+
}) {
|
|
265
256
|
currentPlayState = {
|
|
266
257
|
...currentPlayState,
|
|
267
258
|
buffering: false
|
|
@@ -270,10 +261,9 @@ function useDailymotionPlayer() {
|
|
|
270
261
|
setCurrentTime(videoTime);
|
|
271
262
|
debug('onPlaying [ID: %s]', videoId);
|
|
272
263
|
}
|
|
273
|
-
function onWaiting(
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
} = _ref7;
|
|
264
|
+
function onWaiting({
|
|
265
|
+
videoTime
|
|
266
|
+
}) {
|
|
277
267
|
currentPlayState = {
|
|
278
268
|
...currentPlayState,
|
|
279
269
|
buffering: true
|
|
@@ -282,10 +272,9 @@ function useDailymotionPlayer() {
|
|
|
282
272
|
setCurrentTime(videoTime);
|
|
283
273
|
debug('onWaiting [ID: %s]', videoId);
|
|
284
274
|
}
|
|
285
|
-
function onTimeChange(
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
} = _ref8;
|
|
275
|
+
function onTimeChange({
|
|
276
|
+
videoTime
|
|
277
|
+
}) {
|
|
289
278
|
setCurrentTime(videoTime);
|
|
290
279
|
}
|
|
291
280
|
function onAdStart() {
|
|
@@ -404,16 +393,14 @@ function useDocumentEvent(event, callback) {
|
|
|
404
393
|
}
|
|
405
394
|
|
|
406
395
|
const observersCache = new Map();
|
|
407
|
-
function getOptionsKey(
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
} = _ref;
|
|
396
|
+
function getOptionsKey({
|
|
397
|
+
root = null,
|
|
398
|
+
rootMargin,
|
|
399
|
+
threshold = null
|
|
400
|
+
}) {
|
|
413
401
|
return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
|
|
414
402
|
}
|
|
415
|
-
function createObserver(Observer) {
|
|
416
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
403
|
+
function createObserver(Observer, options = {}) {
|
|
417
404
|
let subscribers = [];
|
|
418
405
|
const addSubscriber = (element, callback) => {
|
|
419
406
|
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
@@ -434,11 +421,10 @@ function createObserver(Observer) {
|
|
|
434
421
|
} : it).filter(it => it.callbacks.length > 0);
|
|
435
422
|
const onUpdate = entries => {
|
|
436
423
|
entries.forEach(entry => {
|
|
437
|
-
subscribers.forEach(
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
} = _ref2;
|
|
424
|
+
subscribers.forEach(({
|
|
425
|
+
element,
|
|
426
|
+
callbacks
|
|
427
|
+
}) => {
|
|
442
428
|
if (element === entry.target) {
|
|
443
429
|
callbacks.forEach(callback => {
|
|
444
430
|
callback(entry);
|
|
@@ -448,8 +434,7 @@ function createObserver(Observer) {
|
|
|
448
434
|
});
|
|
449
435
|
};
|
|
450
436
|
const observer = new Observer(onUpdate, options);
|
|
451
|
-
const unsubscribe =
|
|
452
|
-
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
437
|
+
const unsubscribe = (element, callback = null) => {
|
|
453
438
|
subscribers = removeSubscriber(element, callback);
|
|
454
439
|
if (typeof observer.unobserve === 'undefined') {
|
|
455
440
|
observer.disconnect();
|
|
@@ -476,9 +461,7 @@ function createObserver(Observer) {
|
|
|
476
461
|
observer
|
|
477
462
|
};
|
|
478
463
|
}
|
|
479
|
-
function getObserver() {
|
|
480
|
-
let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
481
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
464
|
+
function getObserver(Observer = null, options = {}) {
|
|
482
465
|
if (Observer === null) {
|
|
483
466
|
return {
|
|
484
467
|
observer: null,
|
|
@@ -497,9 +480,7 @@ function getObserver() {
|
|
|
497
480
|
}
|
|
498
481
|
return observers[observerKey];
|
|
499
482
|
}
|
|
500
|
-
function useObserver(Observer) {
|
|
501
|
-
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
502
|
-
let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
483
|
+
function useObserver(Observer, opts = {}, initialEntry = {}) {
|
|
503
484
|
const {
|
|
504
485
|
root = null,
|
|
505
486
|
rootMargin = null,
|
|
@@ -565,13 +546,12 @@ const intersectionObserverInitialEntry = {
|
|
|
565
546
|
boundingClientRect: null,
|
|
566
547
|
rootBounds: null
|
|
567
548
|
};
|
|
568
|
-
function useIntersectionObserver(
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
549
|
+
function useIntersectionObserver({
|
|
550
|
+
root = null,
|
|
551
|
+
rootMargin = '0px',
|
|
552
|
+
threshold = defaultThreshold,
|
|
553
|
+
disabled = false
|
|
554
|
+
} = {}) {
|
|
575
555
|
return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
|
|
576
556
|
root,
|
|
577
557
|
rootMargin,
|
|
@@ -589,20 +569,18 @@ const resizeObserverInitialEntry = {
|
|
|
589
569
|
contentBoxSize: null,
|
|
590
570
|
borderBoxSize: null
|
|
591
571
|
};
|
|
592
|
-
function useResizeObserver(
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
572
|
+
function useResizeObserver({
|
|
573
|
+
disabled = false
|
|
574
|
+
} = {}) {
|
|
596
575
|
return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
|
|
597
576
|
disabled
|
|
598
577
|
}, resizeObserverInitialEntry);
|
|
599
578
|
}
|
|
600
579
|
|
|
601
|
-
function useIsVisible(
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
580
|
+
function useIsVisible({
|
|
581
|
+
persist = false,
|
|
582
|
+
...opts
|
|
583
|
+
} = {}) {
|
|
606
584
|
const {
|
|
607
585
|
ref,
|
|
608
586
|
entry: {
|
|
@@ -636,8 +614,7 @@ function useWindowEvent(event, callback) {
|
|
|
636
614
|
}, [event, callback]);
|
|
637
615
|
}
|
|
638
616
|
|
|
639
|
-
function useKeyboard() {
|
|
640
|
-
let keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
617
|
+
function useKeyboard(keyMap = null) {
|
|
641
618
|
const onKeyDown = useCallback(event => {
|
|
642
619
|
const {
|
|
643
620
|
key
|
|
@@ -670,40 +647,33 @@ function useKeyboard() {
|
|
|
670
647
|
useWindowEvent('keyup', keyMap !== null ? onKeyUp : null);
|
|
671
648
|
}
|
|
672
649
|
|
|
673
|
-
const useItemsPaginated =
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
last_page: lastPage,
|
|
683
|
-
total
|
|
684
|
-
},
|
|
685
|
-
data: items
|
|
686
|
-
} = _ref2;
|
|
687
|
-
return {
|
|
688
|
-
page: parseInt(currentPage, 10),
|
|
689
|
-
lastPage: parseInt(lastPage, 10),
|
|
690
|
-
total: parseInt(total, 10),
|
|
691
|
-
items
|
|
692
|
-
};
|
|
650
|
+
const useItemsPaginated = (loader, {
|
|
651
|
+
page = null,
|
|
652
|
+
count = 10,
|
|
653
|
+
pages: initialPages = null,
|
|
654
|
+
getPageFromResponse = ({
|
|
655
|
+
pagination: {
|
|
656
|
+
page: currentPage,
|
|
657
|
+
last_page: lastPage,
|
|
658
|
+
total
|
|
693
659
|
},
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
660
|
+
data: items
|
|
661
|
+
}) => ({
|
|
662
|
+
page: parseInt(currentPage, 10),
|
|
663
|
+
lastPage: parseInt(lastPage, 10),
|
|
664
|
+
total: parseInt(total, 10),
|
|
665
|
+
items
|
|
666
|
+
}),
|
|
667
|
+
onLoaded = null,
|
|
668
|
+
onError = null,
|
|
669
|
+
query = null
|
|
670
|
+
} = {}) => {
|
|
698
671
|
const lastState = useRef(null);
|
|
699
672
|
const initialState = useMemo(() => {
|
|
700
673
|
const finalInitialPages = initialPages !== null ? initialPages.map(it => getPageFromResponse(it)) : null;
|
|
701
|
-
const finalLastPage = finalInitialPages !== null ? finalInitialPages.reduce((currentLastPage,
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
} = _ref3;
|
|
705
|
-
return initialLastPage > currentLastPage ? initialLastPage : currentLastPage;
|
|
706
|
-
}, -1) : -1;
|
|
674
|
+
const finalLastPage = finalInitialPages !== null ? finalInitialPages.reduce((currentLastPage, {
|
|
675
|
+
lastPage: initialLastPage
|
|
676
|
+
}) => initialLastPage > currentLastPage ? initialLastPage : currentLastPage, -1) : -1;
|
|
707
677
|
return {
|
|
708
678
|
lastPage: finalLastPage,
|
|
709
679
|
total: finalInitialPages !== null ? finalInitialPages[0].total : 0,
|
|
@@ -721,19 +691,14 @@ const useItemsPaginated = function (loader) {
|
|
|
721
691
|
pages,
|
|
722
692
|
total
|
|
723
693
|
} = state;
|
|
724
|
-
const items = pages !== null ? pages.reduce((pagesItems,
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
} = _ref4;
|
|
728
|
-
return pagesItems.concat(pageItems);
|
|
729
|
-
}, []) : null;
|
|
694
|
+
const items = pages !== null ? pages.reduce((pagesItems, {
|
|
695
|
+
items: pageItems
|
|
696
|
+
}) => pagesItems.concat(pageItems), []) : null;
|
|
730
697
|
const updateState = update => setState({
|
|
731
698
|
...state,
|
|
732
699
|
...update
|
|
733
700
|
});
|
|
734
|
-
const updateFromResponse =
|
|
735
|
-
let error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
736
|
-
let reset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
701
|
+
const updateFromResponse = (response, error = null, reset = false) => {
|
|
737
702
|
if (error !== null) {
|
|
738
703
|
updateState({
|
|
739
704
|
loaded: false,
|
|
@@ -853,12 +818,9 @@ const useItemsPaginated = function (loader) {
|
|
|
853
818
|
}
|
|
854
819
|
};
|
|
855
820
|
}, [loader, page]);
|
|
856
|
-
const currentPage = pages !== null ? pages.find(
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
} = _ref5;
|
|
860
|
-
return parseInt(pageNumber, 10) === parseInt(page, 10);
|
|
861
|
-
}) || null : null;
|
|
821
|
+
const currentPage = pages !== null ? pages.find(({
|
|
822
|
+
page: pageNumber
|
|
823
|
+
}) => parseInt(pageNumber, 10) === parseInt(page, 10)) || null : null;
|
|
862
824
|
return {
|
|
863
825
|
items,
|
|
864
826
|
pages,
|
|
@@ -874,14 +836,13 @@ const useItemsPaginated = function (loader) {
|
|
|
874
836
|
};
|
|
875
837
|
};
|
|
876
838
|
|
|
877
|
-
function usePlayerCurrentTime(player
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
839
|
+
function usePlayerCurrentTime(player, {
|
|
840
|
+
id = null,
|
|
841
|
+
disabled = false,
|
|
842
|
+
updateInterval = 1000,
|
|
843
|
+
onUpdate: customOnUpdate = null,
|
|
844
|
+
getCurrentTime = p => p.currentTime
|
|
845
|
+
} = {}) {
|
|
885
846
|
const [currentTime, setCurrentTime] = useState(0);
|
|
886
847
|
const realCurrentTime = useRef(currentTime);
|
|
887
848
|
const lastIdRef = useRef(id);
|
|
@@ -924,16 +885,15 @@ function usePlayerCurrentTime(player) {
|
|
|
924
885
|
}
|
|
925
886
|
|
|
926
887
|
const NO_PLAYER_ERROR$2 = new Error('No player');
|
|
927
|
-
function useNativeVideoPlayer(url
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
888
|
+
function useNativeVideoPlayer(url, {
|
|
889
|
+
width = 0,
|
|
890
|
+
height = 0,
|
|
891
|
+
duration = 0,
|
|
892
|
+
muted: providedMuted = false,
|
|
893
|
+
initialMuted = false,
|
|
894
|
+
timeUpdateInterval = 1000,
|
|
895
|
+
onTimeUpdate: customOnTimeUpdate = null
|
|
896
|
+
} = {}) {
|
|
937
897
|
const debug = useMemo(() => createDebug('folklore:video:native'), []);
|
|
938
898
|
const elementRef = useRef(null);
|
|
939
899
|
const [loaded, setLoaded] = useState(false);
|
|
@@ -1116,27 +1076,26 @@ function useNativeVideoPlayer(url) {
|
|
|
1116
1076
|
}
|
|
1117
1077
|
|
|
1118
1078
|
const NO_PLAYER_ERROR$1 = new Error('No player');
|
|
1119
|
-
function useVimeoPlayer(id
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1079
|
+
function useVimeoPlayer(id, {
|
|
1080
|
+
width = 0,
|
|
1081
|
+
height = 0,
|
|
1082
|
+
duration = 0,
|
|
1083
|
+
autoplay = false,
|
|
1084
|
+
autopause = true,
|
|
1085
|
+
byline = false,
|
|
1086
|
+
controls = false,
|
|
1087
|
+
muted: providedMuted = false,
|
|
1088
|
+
initialMuted = false,
|
|
1089
|
+
timeUpdateInterval = 1000,
|
|
1090
|
+
onTimeUpdate: customOnTimeUpdate = null,
|
|
1091
|
+
getVideoId = url => {
|
|
1092
|
+
if (url === null || url.match(/^[0-9]+$/) !== null) {
|
|
1093
|
+
return url;
|
|
1094
|
+
}
|
|
1095
|
+
const match = url.match(/\/[0-9]+/);
|
|
1096
|
+
return match !== null ? match[1] : null;
|
|
1097
|
+
}
|
|
1098
|
+
} = {}) {
|
|
1140
1099
|
const debug = useMemo(() => createDebug('folklore:video:vimeo'), []);
|
|
1141
1100
|
const [apiLoaded, setApiLoaded] = useState(false);
|
|
1142
1101
|
const apiRef = useRef(null);
|
|
@@ -1292,8 +1251,7 @@ function useVimeoPlayer(id) {
|
|
|
1292
1251
|
}
|
|
1293
1252
|
let canceled = false;
|
|
1294
1253
|
const onLoaded = () => {
|
|
1295
|
-
Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(
|
|
1296
|
-
let [newDuration, newWidth, newHeight, newMuted] = _ref;
|
|
1254
|
+
Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(([newDuration, newWidth, newHeight, newMuted]) => {
|
|
1297
1255
|
if (canceled) {
|
|
1298
1256
|
return;
|
|
1299
1257
|
}
|
|
@@ -1333,10 +1291,9 @@ function useVimeoPlayer(id) {
|
|
|
1333
1291
|
});
|
|
1334
1292
|
debug('onPause [ID: %s]', videoId);
|
|
1335
1293
|
};
|
|
1336
|
-
const onVolumeChange =
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
} = _ref2;
|
|
1294
|
+
const onVolumeChange = ({
|
|
1295
|
+
volume: newVolume
|
|
1296
|
+
}) => {
|
|
1340
1297
|
setVolumeState(newVolume);
|
|
1341
1298
|
debug('onVolumeChange [ID: %s]', videoId);
|
|
1342
1299
|
};
|
|
@@ -1419,27 +1376,26 @@ function useVimeoPlayer(id) {
|
|
|
1419
1376
|
}
|
|
1420
1377
|
|
|
1421
1378
|
const NO_PLAYER_ERROR = new Error('No player');
|
|
1422
|
-
function useYouTubePlayer(id
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1379
|
+
function useYouTubePlayer(id, {
|
|
1380
|
+
width = 0,
|
|
1381
|
+
height = 0,
|
|
1382
|
+
duration = 0,
|
|
1383
|
+
autoplay = false,
|
|
1384
|
+
controls = true,
|
|
1385
|
+
timeUpdateInterval = 1000,
|
|
1386
|
+
muted: providedMuted = false,
|
|
1387
|
+
initialMuted = false,
|
|
1388
|
+
onVolumeChange: customOnVolumeChange = null,
|
|
1389
|
+
onTimeUpdate: customOnTimeUpdate = null,
|
|
1390
|
+
getVideoId = url => {
|
|
1391
|
+
if (url === null || url.match(/^https?:/) === null) {
|
|
1392
|
+
return url;
|
|
1393
|
+
}
|
|
1394
|
+
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
|
1395
|
+
const match = url.match(regExp);
|
|
1396
|
+
return match !== null ? match[7] : null;
|
|
1397
|
+
}
|
|
1398
|
+
} = {}) {
|
|
1443
1399
|
const debug = useMemo(() => createDebug('folklore:video:youtube'), []);
|
|
1444
1400
|
const [apiLoaded, setApiLoaded] = useState(typeof window !== 'undefined' && typeof window.YT !== 'undefined');
|
|
1445
1401
|
const apiRef = useRef(typeof window !== 'undefined' && typeof window.YT !== 'undefined' ? window.YT : null);
|
|
@@ -1566,10 +1522,9 @@ function useYouTubePlayer(id) {
|
|
|
1566
1522
|
player.loadVideoById(videoId);
|
|
1567
1523
|
} else {
|
|
1568
1524
|
debug('Create player [ID: %s]', videoId);
|
|
1569
|
-
const onReady =
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
} = _ref;
|
|
1525
|
+
const onReady = ({
|
|
1526
|
+
target
|
|
1527
|
+
}) => {
|
|
1573
1528
|
player = target;
|
|
1574
1529
|
playerRef.current = target;
|
|
1575
1530
|
setReady(true);
|
|
@@ -1585,10 +1540,9 @@ function useYouTubePlayer(id) {
|
|
|
1585
1540
|
player.mute();
|
|
1586
1541
|
}
|
|
1587
1542
|
};
|
|
1588
|
-
const onStateChange =
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
} = _ref2;
|
|
1543
|
+
const onStateChange = ({
|
|
1544
|
+
data: state
|
|
1545
|
+
}) => {
|
|
1592
1546
|
const newState = {
|
|
1593
1547
|
playing: state === YT.PlayerState.PLAYING,
|
|
1594
1548
|
paused: state === YT.PlayerState.PAUSED,
|
|
@@ -1744,10 +1698,9 @@ const getWindowSize = () => ({
|
|
|
1744
1698
|
height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
|
|
1745
1699
|
});
|
|
1746
1700
|
let currentSize = getWindowSize();
|
|
1747
|
-
function useWindowSize(
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1701
|
+
function useWindowSize({
|
|
1702
|
+
onChange = null
|
|
1703
|
+
} = {}) {
|
|
1751
1704
|
const [size, setSize] = useState(currentSize);
|
|
1752
1705
|
const sizeRef = useRef(size);
|
|
1753
1706
|
const updateSize = useCallback(() => {
|
|
@@ -1788,8 +1741,7 @@ function useVisualViewport() {
|
|
|
1788
1741
|
width: windowWidth,
|
|
1789
1742
|
height: windowHeight
|
|
1790
1743
|
});
|
|
1791
|
-
const updateViewport = useCallback(
|
|
1792
|
-
let viewPort = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1744
|
+
const updateViewport = useCallback((viewPort = null) => {
|
|
1793
1745
|
const {
|
|
1794
1746
|
width: newWidth = 0,
|
|
1795
1747
|
height: newHeight = 0,
|
|
@@ -1835,8 +1787,7 @@ const getWindowScroll = () => ({
|
|
|
1835
1787
|
y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
|
|
1836
1788
|
});
|
|
1837
1789
|
let currentScroll = getWindowScroll();
|
|
1838
|
-
function useWindowScroll() {
|
|
1839
|
-
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1790
|
+
function useWindowScroll(opts = {}) {
|
|
1840
1791
|
const {
|
|
1841
1792
|
onChange = null
|
|
1842
1793
|
} = opts;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@folklore/hooks",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.75",
|
|
4
4
|
"description": "React hooks",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript",
|
|
@@ -36,24 +36,24 @@
|
|
|
36
36
|
"scripts": {
|
|
37
37
|
"clean": "rm -rf dist",
|
|
38
38
|
"build": "rollup --bundleConfigAsCjs --config ../../rollup.config.js",
|
|
39
|
-
"
|
|
39
|
+
"prepublishOnly": "npm run clean && npm run build"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"react": "^17.0.0 || ^18.0.0",
|
|
43
|
-
"react-dom": "^17.0.0 || ^18.0.0"
|
|
42
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
43
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
47
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
46
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
47
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
48
48
|
},
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "2056c43ca08a0a3eafdd4542887c6923871e100b",
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@folklore/events": "^0.0.
|
|
55
|
-
"@folklore/services": "^0.1.
|
|
56
|
-
"@folklore/utils": "^0.1.
|
|
54
|
+
"@folklore/events": "^0.0.8",
|
|
55
|
+
"@folklore/services": "^0.1.44",
|
|
56
|
+
"@folklore/utils": "^0.1.4",
|
|
57
57
|
"cancelable-promise": "^4.3.1",
|
|
58
58
|
"debug": "^4.3.4",
|
|
59
59
|
"lodash": "^4.17.21",
|