@folklore/hooks 0.0.56 → 0.0.57
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 +56 -51
- package/dist/es.js +57 -52
- package/package.json +2 -2
package/dist/cjs.js
CHANGED
|
@@ -68,55 +68,6 @@ function useCounter(desiredValue, _ref) {
|
|
|
68
68
|
return currentValue;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
function usePlayerCurrentTime(player) {
|
|
72
|
-
let {
|
|
73
|
-
id = null,
|
|
74
|
-
disabled = false,
|
|
75
|
-
updateInterval = 1000,
|
|
76
|
-
onUpdate: customOnUpdate = null,
|
|
77
|
-
getCurrentTime = p => p.currentTime
|
|
78
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
79
|
-
const [currentTime, setCurrentTime] = react.useState(0);
|
|
80
|
-
const realCurrentTime = react.useRef(currentTime);
|
|
81
|
-
const lastIdRef = react.useRef(id);
|
|
82
|
-
const idChanged = lastIdRef.current !== id;
|
|
83
|
-
if (idChanged) {
|
|
84
|
-
realCurrentTime.current = 0;
|
|
85
|
-
lastIdRef.current = id;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
// Check time update
|
|
89
|
-
react.useEffect(() => {
|
|
90
|
-
if (disabled || player === null) {
|
|
91
|
-
return () => {};
|
|
92
|
-
}
|
|
93
|
-
let canceled = false;
|
|
94
|
-
const updateTime = time => {
|
|
95
|
-
if (canceled) {
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
realCurrentTime.current = time;
|
|
99
|
-
setCurrentTime(time);
|
|
100
|
-
if (customOnUpdate !== null) {
|
|
101
|
-
customOnUpdate(time);
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
const interval = setInterval(() => {
|
|
105
|
-
const time = getCurrentTime(player);
|
|
106
|
-
if (typeof time.then !== 'undefined') {
|
|
107
|
-
time.then(updateTime);
|
|
108
|
-
} else {
|
|
109
|
-
updateTime(time);
|
|
110
|
-
}
|
|
111
|
-
}, updateInterval);
|
|
112
|
-
return () => {
|
|
113
|
-
canceled = true;
|
|
114
|
-
clearInterval(interval);
|
|
115
|
-
};
|
|
116
|
-
}, [id, player, setCurrentTime, disabled, updateInterval, getCurrentTime]);
|
|
117
|
-
return realCurrentTime.current;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
71
|
const NO_PLAYER_ERROR$3 = new Error('No player');
|
|
121
72
|
function useDailymotionPlayer() {
|
|
122
73
|
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
@@ -134,7 +85,6 @@ function useDailymotionPlayer() {
|
|
|
134
85
|
sharingEnable = false,
|
|
135
86
|
uiLogo = false,
|
|
136
87
|
uiStartScreenInfo = true,
|
|
137
|
-
timeUpdateInterval = 1000,
|
|
138
88
|
embedPlayerId = null,
|
|
139
89
|
onTimeUpdate: customOnTimeUpdate = null,
|
|
140
90
|
getVideoId = url => {
|
|
@@ -220,8 +170,9 @@ function useDailymotionPlayer() {
|
|
|
220
170
|
const playerParams = {
|
|
221
171
|
'autoplay-d': autoplay,
|
|
222
172
|
// muted,
|
|
223
|
-
start,
|
|
173
|
+
startTime: start,
|
|
224
174
|
controls,
|
|
175
|
+
aspectRatio: 'inherit',
|
|
225
176
|
'queue-autoplay-next': queueAutoplayNext,
|
|
226
177
|
'queue-enable': queueEnable,
|
|
227
178
|
'sharing-enable': sharingEnable,
|
|
@@ -439,6 +390,11 @@ function useDailymotionPlayer() {
|
|
|
439
390
|
} = playerRef;
|
|
440
391
|
return player !== null ? player.seek(time) : Promise.reject(NO_PLAYER_ERROR$3);
|
|
441
392
|
}, []);
|
|
393
|
+
react.useEffect(() => {
|
|
394
|
+
if (customOnTimeUpdate !== null) {
|
|
395
|
+
customOnTimeUpdate(currentTime);
|
|
396
|
+
}
|
|
397
|
+
}, [currentTime, customOnTimeUpdate]);
|
|
442
398
|
return {
|
|
443
399
|
ref: elementRef,
|
|
444
400
|
player: playerRef.current,
|
|
@@ -940,6 +896,55 @@ const useItemsPaginated = function (loader) {
|
|
|
940
896
|
};
|
|
941
897
|
};
|
|
942
898
|
|
|
899
|
+
function usePlayerCurrentTime(player) {
|
|
900
|
+
let {
|
|
901
|
+
id = null,
|
|
902
|
+
disabled = false,
|
|
903
|
+
updateInterval = 1000,
|
|
904
|
+
onUpdate: customOnUpdate = null,
|
|
905
|
+
getCurrentTime = p => p.currentTime
|
|
906
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
907
|
+
const [currentTime, setCurrentTime] = react.useState(0);
|
|
908
|
+
const realCurrentTime = react.useRef(currentTime);
|
|
909
|
+
const lastIdRef = react.useRef(id);
|
|
910
|
+
const idChanged = lastIdRef.current !== id;
|
|
911
|
+
if (idChanged) {
|
|
912
|
+
realCurrentTime.current = 0;
|
|
913
|
+
lastIdRef.current = id;
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
// Check time update
|
|
917
|
+
react.useEffect(() => {
|
|
918
|
+
if (disabled || player === null) {
|
|
919
|
+
return () => {};
|
|
920
|
+
}
|
|
921
|
+
let canceled = false;
|
|
922
|
+
const updateTime = time => {
|
|
923
|
+
if (canceled) {
|
|
924
|
+
return;
|
|
925
|
+
}
|
|
926
|
+
realCurrentTime.current = time;
|
|
927
|
+
setCurrentTime(time);
|
|
928
|
+
if (customOnUpdate !== null) {
|
|
929
|
+
customOnUpdate(time);
|
|
930
|
+
}
|
|
931
|
+
};
|
|
932
|
+
const interval = setInterval(() => {
|
|
933
|
+
const time = getCurrentTime(player);
|
|
934
|
+
if (typeof time.then !== 'undefined') {
|
|
935
|
+
time.then(updateTime);
|
|
936
|
+
} else {
|
|
937
|
+
updateTime(time);
|
|
938
|
+
}
|
|
939
|
+
}, updateInterval);
|
|
940
|
+
return () => {
|
|
941
|
+
canceled = true;
|
|
942
|
+
clearInterval(interval);
|
|
943
|
+
};
|
|
944
|
+
}, [id, player, setCurrentTime, disabled, updateInterval, getCurrentTime]);
|
|
945
|
+
return realCurrentTime.current;
|
|
946
|
+
}
|
|
947
|
+
|
|
943
948
|
const NO_PLAYER_ERROR$2 = new Error('No player');
|
|
944
949
|
function useNativeVideoPlayer(url) {
|
|
945
950
|
let {
|
package/dist/es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import raf from 'raf';
|
|
2
|
-
import { useState, useEffect,
|
|
2
|
+
import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
|
|
3
3
|
import { loadDailymotion, loadVimeo, loadYouTube } from '@folklore/services';
|
|
4
4
|
import createDebug from 'debug';
|
|
5
5
|
import EventsManager from '@folklore/events';
|
|
@@ -57,55 +57,6 @@ function useCounter(desiredValue, _ref) {
|
|
|
57
57
|
return currentValue;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
function usePlayerCurrentTime(player) {
|
|
61
|
-
let {
|
|
62
|
-
id = null,
|
|
63
|
-
disabled = false,
|
|
64
|
-
updateInterval = 1000,
|
|
65
|
-
onUpdate: customOnUpdate = null,
|
|
66
|
-
getCurrentTime = p => p.currentTime
|
|
67
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
68
|
-
const [currentTime, setCurrentTime] = useState(0);
|
|
69
|
-
const realCurrentTime = useRef(currentTime);
|
|
70
|
-
const lastIdRef = useRef(id);
|
|
71
|
-
const idChanged = lastIdRef.current !== id;
|
|
72
|
-
if (idChanged) {
|
|
73
|
-
realCurrentTime.current = 0;
|
|
74
|
-
lastIdRef.current = id;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// Check time update
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
if (disabled || player === null) {
|
|
80
|
-
return () => {};
|
|
81
|
-
}
|
|
82
|
-
let canceled = false;
|
|
83
|
-
const updateTime = time => {
|
|
84
|
-
if (canceled) {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
realCurrentTime.current = time;
|
|
88
|
-
setCurrentTime(time);
|
|
89
|
-
if (customOnUpdate !== null) {
|
|
90
|
-
customOnUpdate(time);
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
const interval = setInterval(() => {
|
|
94
|
-
const time = getCurrentTime(player);
|
|
95
|
-
if (typeof time.then !== 'undefined') {
|
|
96
|
-
time.then(updateTime);
|
|
97
|
-
} else {
|
|
98
|
-
updateTime(time);
|
|
99
|
-
}
|
|
100
|
-
}, updateInterval);
|
|
101
|
-
return () => {
|
|
102
|
-
canceled = true;
|
|
103
|
-
clearInterval(interval);
|
|
104
|
-
};
|
|
105
|
-
}, [id, player, setCurrentTime, disabled, updateInterval, getCurrentTime]);
|
|
106
|
-
return realCurrentTime.current;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
60
|
const NO_PLAYER_ERROR$3 = new Error('No player');
|
|
110
61
|
function useDailymotionPlayer() {
|
|
111
62
|
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
@@ -123,7 +74,6 @@ function useDailymotionPlayer() {
|
|
|
123
74
|
sharingEnable = false,
|
|
124
75
|
uiLogo = false,
|
|
125
76
|
uiStartScreenInfo = true,
|
|
126
|
-
timeUpdateInterval = 1000,
|
|
127
77
|
embedPlayerId = null,
|
|
128
78
|
onTimeUpdate: customOnTimeUpdate = null,
|
|
129
79
|
getVideoId = url => {
|
|
@@ -209,8 +159,9 @@ function useDailymotionPlayer() {
|
|
|
209
159
|
const playerParams = {
|
|
210
160
|
'autoplay-d': autoplay,
|
|
211
161
|
// muted,
|
|
212
|
-
start,
|
|
162
|
+
startTime: start,
|
|
213
163
|
controls,
|
|
164
|
+
aspectRatio: 'inherit',
|
|
214
165
|
'queue-autoplay-next': queueAutoplayNext,
|
|
215
166
|
'queue-enable': queueEnable,
|
|
216
167
|
'sharing-enable': sharingEnable,
|
|
@@ -428,6 +379,11 @@ function useDailymotionPlayer() {
|
|
|
428
379
|
} = playerRef;
|
|
429
380
|
return player !== null ? player.seek(time) : Promise.reject(NO_PLAYER_ERROR$3);
|
|
430
381
|
}, []);
|
|
382
|
+
useEffect(() => {
|
|
383
|
+
if (customOnTimeUpdate !== null) {
|
|
384
|
+
customOnTimeUpdate(currentTime);
|
|
385
|
+
}
|
|
386
|
+
}, [currentTime, customOnTimeUpdate]);
|
|
431
387
|
return {
|
|
432
388
|
ref: elementRef,
|
|
433
389
|
player: playerRef.current,
|
|
@@ -929,6 +885,55 @@ const useItemsPaginated = function (loader) {
|
|
|
929
885
|
};
|
|
930
886
|
};
|
|
931
887
|
|
|
888
|
+
function usePlayerCurrentTime(player) {
|
|
889
|
+
let {
|
|
890
|
+
id = null,
|
|
891
|
+
disabled = false,
|
|
892
|
+
updateInterval = 1000,
|
|
893
|
+
onUpdate: customOnUpdate = null,
|
|
894
|
+
getCurrentTime = p => p.currentTime
|
|
895
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
896
|
+
const [currentTime, setCurrentTime] = useState(0);
|
|
897
|
+
const realCurrentTime = useRef(currentTime);
|
|
898
|
+
const lastIdRef = useRef(id);
|
|
899
|
+
const idChanged = lastIdRef.current !== id;
|
|
900
|
+
if (idChanged) {
|
|
901
|
+
realCurrentTime.current = 0;
|
|
902
|
+
lastIdRef.current = id;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
// Check time update
|
|
906
|
+
useEffect(() => {
|
|
907
|
+
if (disabled || player === null) {
|
|
908
|
+
return () => {};
|
|
909
|
+
}
|
|
910
|
+
let canceled = false;
|
|
911
|
+
const updateTime = time => {
|
|
912
|
+
if (canceled) {
|
|
913
|
+
return;
|
|
914
|
+
}
|
|
915
|
+
realCurrentTime.current = time;
|
|
916
|
+
setCurrentTime(time);
|
|
917
|
+
if (customOnUpdate !== null) {
|
|
918
|
+
customOnUpdate(time);
|
|
919
|
+
}
|
|
920
|
+
};
|
|
921
|
+
const interval = setInterval(() => {
|
|
922
|
+
const time = getCurrentTime(player);
|
|
923
|
+
if (typeof time.then !== 'undefined') {
|
|
924
|
+
time.then(updateTime);
|
|
925
|
+
} else {
|
|
926
|
+
updateTime(time);
|
|
927
|
+
}
|
|
928
|
+
}, updateInterval);
|
|
929
|
+
return () => {
|
|
930
|
+
canceled = true;
|
|
931
|
+
clearInterval(interval);
|
|
932
|
+
};
|
|
933
|
+
}, [id, player, setCurrentTime, disabled, updateInterval, getCurrentTime]);
|
|
934
|
+
return realCurrentTime.current;
|
|
935
|
+
}
|
|
936
|
+
|
|
932
937
|
const NO_PLAYER_ERROR$2 = new Error('No player');
|
|
933
938
|
function useNativeVideoPlayer(url) {
|
|
934
939
|
let {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@folklore/hooks",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.57",
|
|
4
4
|
"description": "React hooks",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "0afeed292591d823f72f5611a078f94c21321d2e",
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@folklore/events": "^0.0.5",
|
|
55
55
|
"@folklore/services": "^0.1.40",
|