@folklore/hooks 0.0.26 → 0.0.28
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 +954 -818
- package/dist/es.js +952 -817
- package/package.json +6 -3
package/dist/es.js
CHANGED
|
@@ -1,34 +1,70 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
|
|
1
|
+
import raf from 'raf';
|
|
2
|
+
import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
|
|
4
3
|
import { loadDailymotion, loadYouTube, loadVimeo } from '@folklore/services';
|
|
5
4
|
import createDebug from 'debug';
|
|
6
5
|
import EventsManager from '@folklore/events';
|
|
7
|
-
import
|
|
6
|
+
import { cancelable } from 'cancelable-promise';
|
|
7
|
+
import isNumber from 'lodash/isNumber';
|
|
8
|
+
|
|
9
|
+
function useCounter(desiredValue, _ref) {
|
|
10
|
+
let {
|
|
11
|
+
maxDuration = 2000,
|
|
12
|
+
speed = 1 / 10
|
|
13
|
+
} = _ref;
|
|
14
|
+
const [currentValue, setCurrentValue] = useState(desiredValue);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
let animationFrame = null;
|
|
17
|
+
let startTime = null;
|
|
18
|
+
let duration = 0;
|
|
19
|
+
let canceled = false;
|
|
20
|
+
const startValue = currentValue;
|
|
21
|
+
const delta = desiredValue - startValue;
|
|
22
|
+
|
|
23
|
+
function loop() {
|
|
24
|
+
if (canceled) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const currentTime = Date.now();
|
|
29
|
+
const elapsedTime = currentTime - startTime;
|
|
30
|
+
const progress = Math.min(elapsedTime / duration, 1);
|
|
31
|
+
const newValue = Math.round(startValue + progress * delta);
|
|
32
|
+
setCurrentValue(newValue);
|
|
33
|
+
|
|
34
|
+
if (newValue !== desiredValue) {
|
|
35
|
+
animationFrame = raf(loop);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (delta !== 0) {
|
|
40
|
+
duration = Math.min(maxDuration, Math.abs(delta) * speed * 1000);
|
|
41
|
+
startTime = Date.now();
|
|
42
|
+
animationFrame = raf(loop);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return () => {
|
|
46
|
+
canceled = true;
|
|
47
|
+
|
|
48
|
+
if (animationFrame !== null) {
|
|
49
|
+
raf.cancel(animationFrame);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
}, [desiredValue]);
|
|
53
|
+
return currentValue;
|
|
54
|
+
}
|
|
8
55
|
|
|
9
56
|
function usePlayerCurrentTime(player) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return p.currentTime;
|
|
22
|
-
} : _ref$getCurrentTime;
|
|
23
|
-
|
|
24
|
-
var _useState = useState(0),
|
|
25
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
26
|
-
currentTime = _useState2[0],
|
|
27
|
-
setCurrentTime = _useState2[1];
|
|
28
|
-
|
|
29
|
-
var realCurrentTime = useRef(currentTime);
|
|
30
|
-
var lastIdRef = useRef(id);
|
|
31
|
-
var idChanged = lastIdRef.current !== id;
|
|
57
|
+
let {
|
|
58
|
+
id = null,
|
|
59
|
+
disabled = false,
|
|
60
|
+
updateInterval = 1000,
|
|
61
|
+
onUpdate: customOnUpdate = null,
|
|
62
|
+
getCurrentTime = p => p.currentTime
|
|
63
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
64
|
+
const [currentTime, setCurrentTime] = useState(0);
|
|
65
|
+
const realCurrentTime = useRef(currentTime);
|
|
66
|
+
const lastIdRef = useRef(id);
|
|
67
|
+
const idChanged = lastIdRef.current !== id;
|
|
32
68
|
|
|
33
69
|
if (idChanged) {
|
|
34
70
|
realCurrentTime.current = 0;
|
|
@@ -36,14 +72,14 @@ function usePlayerCurrentTime(player) {
|
|
|
36
72
|
} // Check time update
|
|
37
73
|
|
|
38
74
|
|
|
39
|
-
useEffect(
|
|
75
|
+
useEffect(() => {
|
|
40
76
|
if (disabled || player === null) {
|
|
41
|
-
return
|
|
77
|
+
return () => {};
|
|
42
78
|
}
|
|
43
79
|
|
|
44
|
-
|
|
80
|
+
let canceled = false;
|
|
45
81
|
|
|
46
|
-
|
|
82
|
+
const updateTime = time => {
|
|
47
83
|
if (canceled) {
|
|
48
84
|
return;
|
|
49
85
|
}
|
|
@@ -56,8 +92,8 @@ function usePlayerCurrentTime(player) {
|
|
|
56
92
|
}
|
|
57
93
|
};
|
|
58
94
|
|
|
59
|
-
|
|
60
|
-
|
|
95
|
+
const interval = setInterval(() => {
|
|
96
|
+
const time = getCurrentTime(player);
|
|
61
97
|
|
|
62
98
|
if (typeof time.then !== 'undefined') {
|
|
63
99
|
time.then(updateTime);
|
|
@@ -65,7 +101,7 @@ function usePlayerCurrentTime(player) {
|
|
|
65
101
|
updateTime(time);
|
|
66
102
|
}
|
|
67
103
|
}, updateInterval);
|
|
68
|
-
return
|
|
104
|
+
return () => {
|
|
69
105
|
canceled = true;
|
|
70
106
|
clearInterval(interval);
|
|
71
107
|
};
|
|
@@ -73,115 +109,67 @@ function usePlayerCurrentTime(player) {
|
|
|
73
109
|
return realCurrentTime.current;
|
|
74
110
|
}
|
|
75
111
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
var match = url.match(/\/video\/([^/?]+)/);
|
|
120
|
-
return match !== null ? match[1] : null;
|
|
121
|
-
} : _params$getVideoId;
|
|
122
|
-
|
|
123
|
-
var _useState = useState(typeof window.DM !== 'undefined'),
|
|
124
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
125
|
-
apiLoaded = _useState2[0],
|
|
126
|
-
setApiLoaded = _useState2[1];
|
|
127
|
-
|
|
128
|
-
var _useState3 = useState(false),
|
|
129
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
130
|
-
playerReady = _useState4[0],
|
|
131
|
-
setPlayerReady = _useState4[1];
|
|
132
|
-
|
|
133
|
-
var _useState5 = useState(false),
|
|
134
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
135
|
-
loaded = _useState6[0],
|
|
136
|
-
setLoaded = _useState6[1];
|
|
137
|
-
|
|
138
|
-
var apiRef = useRef(typeof window.DM !== 'undefined' ? window.DM : null);
|
|
139
|
-
var ready = apiLoaded && playerReady;
|
|
140
|
-
var videoId = useMemo(function () {
|
|
141
|
-
return getVideoId(id);
|
|
142
|
-
}, [id]);
|
|
143
|
-
var elementRef = useRef(null);
|
|
144
|
-
var playerRef = useRef(null);
|
|
145
|
-
var playerElementRef = useRef(elementRef.current);
|
|
146
|
-
var elementHasChanged = elementRef.current !== playerElementRef.current;
|
|
147
|
-
|
|
148
|
-
var _useState7 = useState(initialMuted),
|
|
149
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
150
|
-
muted = _useState8[0],
|
|
151
|
-
setMuted = _useState8[1];
|
|
152
|
-
|
|
153
|
-
var _useState9 = useState(initialMuted ? 0 : 1),
|
|
154
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
155
|
-
volume = _useState10[0],
|
|
156
|
-
setVolumeState = _useState10[1];
|
|
157
|
-
|
|
158
|
-
var _useState11 = useState({
|
|
112
|
+
const noPlayerError$1 = new Error('No player');
|
|
113
|
+
const debug$3 = createDebug('folklore:video:dailymotion');
|
|
114
|
+
|
|
115
|
+
const useDailymotionPlayer = function () {
|
|
116
|
+
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
117
|
+
let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
118
|
+
const {
|
|
119
|
+
width = 0,
|
|
120
|
+
height = 0,
|
|
121
|
+
duration = 0,
|
|
122
|
+
autoplay = false,
|
|
123
|
+
muted: initialMuted = false,
|
|
124
|
+
start = 0,
|
|
125
|
+
controls = true,
|
|
126
|
+
queueAutoplayNext = false,
|
|
127
|
+
queueEnable = false,
|
|
128
|
+
sharingEnable = false,
|
|
129
|
+
uiLogo = false,
|
|
130
|
+
uiStartScreenInfo = true,
|
|
131
|
+
timeUpdateInterval = 1000,
|
|
132
|
+
onTimeUpdate: customOnTimeUpdate = null,
|
|
133
|
+
getVideoId = url => {
|
|
134
|
+
if (url === null || url.match(/^https?:/) === null) {
|
|
135
|
+
return url;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
const match = url.match(/\/video\/([^/?]+)/);
|
|
139
|
+
return match !== null ? match[1] : null;
|
|
140
|
+
}
|
|
141
|
+
} = params;
|
|
142
|
+
const [apiLoaded, setApiLoaded] = useState(typeof window.DM !== 'undefined');
|
|
143
|
+
const [playerReady, setPlayerReady] = useState(false);
|
|
144
|
+
const [loaded, setLoaded] = useState(false);
|
|
145
|
+
const apiRef = useRef(typeof window.DM !== 'undefined' ? window.DM : null);
|
|
146
|
+
const ready = apiLoaded && playerReady;
|
|
147
|
+
const videoId = useMemo(() => getVideoId(id), [id]);
|
|
148
|
+
const elementRef = useRef(null);
|
|
149
|
+
const playerRef = useRef(null);
|
|
150
|
+
const playerElementRef = useRef(elementRef.current);
|
|
151
|
+
const elementHasChanged = elementRef.current !== playerElementRef.current;
|
|
152
|
+
const [muted, setMuted] = useState(initialMuted);
|
|
153
|
+
const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
|
|
154
|
+
const [playState, setPlayState] = useState({
|
|
159
155
|
playing: false,
|
|
160
156
|
paused: false,
|
|
161
157
|
ended: false,
|
|
162
158
|
buffering: false,
|
|
163
159
|
adPlaying: false
|
|
164
|
-
})
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
width: width,
|
|
171
|
-
height: height,
|
|
172
|
-
duration: duration
|
|
173
|
-
}),
|
|
174
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
175
|
-
metadata = _useState14[0],
|
|
176
|
-
setMetadata = _useState14[1]; // Load SDK
|
|
177
|
-
|
|
160
|
+
});
|
|
161
|
+
const [metadata, setMetadata] = useState({
|
|
162
|
+
width,
|
|
163
|
+
height,
|
|
164
|
+
duration
|
|
165
|
+
}); // Load SDK
|
|
178
166
|
|
|
179
|
-
useEffect(
|
|
180
|
-
|
|
167
|
+
useEffect(() => {
|
|
168
|
+
let canceled = false;
|
|
181
169
|
|
|
182
170
|
if (!apiLoaded && videoId !== null) {
|
|
183
171
|
debug$3('Load API');
|
|
184
|
-
loadDailymotion().then(
|
|
172
|
+
loadDailymotion().then(api => {
|
|
185
173
|
if (!canceled) {
|
|
186
174
|
apiRef.current = api;
|
|
187
175
|
setApiLoaded(true);
|
|
@@ -190,35 +178,38 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
|
|
|
190
178
|
});
|
|
191
179
|
}
|
|
192
180
|
|
|
193
|
-
return
|
|
181
|
+
return () => {
|
|
194
182
|
canceled = true;
|
|
195
183
|
};
|
|
196
184
|
}, [videoId, apiLoaded, setApiLoaded]); // Create or update player
|
|
197
185
|
|
|
198
|
-
useEffect(
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
186
|
+
useEffect(() => {
|
|
187
|
+
const {
|
|
188
|
+
current: DM = null
|
|
189
|
+
} = apiRef;
|
|
190
|
+
const {
|
|
191
|
+
current: currentPlayer = null
|
|
192
|
+
} = playerRef;
|
|
193
|
+
const {
|
|
194
|
+
current: element = null
|
|
195
|
+
} = elementRef;
|
|
205
196
|
|
|
206
197
|
if (!apiLoaded || videoId === null || element === null) {
|
|
207
198
|
return;
|
|
208
199
|
}
|
|
209
200
|
|
|
210
|
-
|
|
201
|
+
const playerParams = {
|
|
211
202
|
'autoplay-d': autoplay,
|
|
212
203
|
// muted,
|
|
213
|
-
start
|
|
214
|
-
controls
|
|
204
|
+
start,
|
|
205
|
+
controls,
|
|
215
206
|
'queue-autoplay-next': queueAutoplayNext,
|
|
216
207
|
'queue-enable': queueEnable,
|
|
217
208
|
'sharing-enable': sharingEnable,
|
|
218
209
|
'ui-logo': uiLogo,
|
|
219
210
|
'ui-start-screen-info': uiStartScreenInfo
|
|
220
211
|
};
|
|
221
|
-
|
|
212
|
+
let player = currentPlayer;
|
|
222
213
|
|
|
223
214
|
if (player !== null) {
|
|
224
215
|
player.load(videoId, {
|
|
@@ -228,8 +219,8 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
|
|
|
228
219
|
} else {
|
|
229
220
|
player = DM.player(element, {
|
|
230
221
|
video: videoId,
|
|
231
|
-
width
|
|
232
|
-
height
|
|
222
|
+
width,
|
|
223
|
+
height,
|
|
233
224
|
params: playerParams
|
|
234
225
|
});
|
|
235
226
|
debug$3('Create player [ID: %s]', videoId);
|
|
@@ -242,16 +233,17 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
|
|
|
242
233
|
playerRef.current = player;
|
|
243
234
|
playerElementRef.current = element;
|
|
244
235
|
}, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
|
|
245
|
-
useEffect(
|
|
246
|
-
|
|
247
|
-
|
|
236
|
+
useEffect(() => {
|
|
237
|
+
const {
|
|
238
|
+
current: player = null
|
|
239
|
+
} = playerRef;
|
|
248
240
|
|
|
249
241
|
if (player === null) {
|
|
250
|
-
return
|
|
242
|
+
return () => {};
|
|
251
243
|
}
|
|
252
244
|
|
|
253
|
-
|
|
254
|
-
|
|
245
|
+
let currentPlayState = playState;
|
|
246
|
+
let currentMetadata = metadata;
|
|
255
247
|
|
|
256
248
|
function onPlaybackReady() {
|
|
257
249
|
setLoaded(true);
|
|
@@ -259,17 +251,17 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
|
|
|
259
251
|
}
|
|
260
252
|
|
|
261
253
|
function onLoadedMetadata() {
|
|
262
|
-
currentMetadata =
|
|
254
|
+
currentMetadata = { ...currentMetadata,
|
|
263
255
|
duration: player.duration
|
|
264
|
-
}
|
|
256
|
+
};
|
|
265
257
|
setMetadata(currentMetadata);
|
|
266
258
|
debug$3('onLoadedMetadata [ID: %s]', videoId);
|
|
267
259
|
}
|
|
268
260
|
|
|
269
261
|
function onDurationChange() {
|
|
270
|
-
currentMetadata =
|
|
262
|
+
currentMetadata = { ...currentMetadata,
|
|
271
263
|
duration: player.duration
|
|
272
|
-
}
|
|
264
|
+
};
|
|
273
265
|
setMetadata(currentMetadata);
|
|
274
266
|
debug$3('onDurationChange [ID: %s]', videoId);
|
|
275
267
|
}
|
|
@@ -281,63 +273,63 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
|
|
|
281
273
|
}
|
|
282
274
|
|
|
283
275
|
function onPlay() {
|
|
284
|
-
currentPlayState =
|
|
276
|
+
currentPlayState = { ...currentPlayState,
|
|
285
277
|
playing: true,
|
|
286
278
|
paused: false,
|
|
287
279
|
ended: false
|
|
288
|
-
}
|
|
280
|
+
};
|
|
289
281
|
setPlayState(currentPlayState);
|
|
290
282
|
debug$3('onPlay [ID: %s]', videoId);
|
|
291
283
|
}
|
|
292
284
|
|
|
293
285
|
function onPause() {
|
|
294
|
-
currentPlayState =
|
|
286
|
+
currentPlayState = { ...currentPlayState,
|
|
295
287
|
playing: false,
|
|
296
288
|
paused: true,
|
|
297
289
|
ended: false
|
|
298
|
-
}
|
|
290
|
+
};
|
|
299
291
|
setPlayState(currentPlayState);
|
|
300
292
|
debug$3('onPause [ID: %s]', videoId);
|
|
301
293
|
}
|
|
302
294
|
|
|
303
295
|
function onEnd() {
|
|
304
|
-
currentPlayState =
|
|
296
|
+
currentPlayState = { ...currentPlayState,
|
|
305
297
|
playing: false,
|
|
306
298
|
paused: false,
|
|
307
299
|
ended: true
|
|
308
|
-
}
|
|
300
|
+
};
|
|
309
301
|
setPlayState(currentPlayState);
|
|
310
302
|
debug$3('onEnd [ID: %s]', videoId);
|
|
311
303
|
}
|
|
312
304
|
|
|
313
305
|
function onPlaying() {
|
|
314
|
-
currentPlayState =
|
|
306
|
+
currentPlayState = { ...currentPlayState,
|
|
315
307
|
buffering: false
|
|
316
|
-
}
|
|
308
|
+
};
|
|
317
309
|
setPlayState(currentPlayState);
|
|
318
310
|
debug$3('onPlaying [ID: %s]', videoId);
|
|
319
311
|
}
|
|
320
312
|
|
|
321
313
|
function onWaiting() {
|
|
322
|
-
currentPlayState =
|
|
314
|
+
currentPlayState = { ...currentPlayState,
|
|
323
315
|
buffering: true
|
|
324
|
-
}
|
|
316
|
+
};
|
|
325
317
|
setPlayState(currentPlayState);
|
|
326
318
|
debug$3('onWaiting [ID: %s]', videoId);
|
|
327
319
|
}
|
|
328
320
|
|
|
329
321
|
function onAdStart() {
|
|
330
|
-
currentPlayState =
|
|
322
|
+
currentPlayState = { ...currentPlayState,
|
|
331
323
|
adPlaying: true
|
|
332
|
-
}
|
|
324
|
+
};
|
|
333
325
|
setPlayState(currentPlayState);
|
|
334
326
|
debug$3('onAdStart [ID: %s]', videoId);
|
|
335
327
|
}
|
|
336
328
|
|
|
337
329
|
function onAdEnd() {
|
|
338
|
-
currentPlayState =
|
|
330
|
+
currentPlayState = { ...currentPlayState,
|
|
339
331
|
adPlaying: false
|
|
340
|
-
}
|
|
332
|
+
};
|
|
341
333
|
setPlayState(currentPlayState);
|
|
342
334
|
debug$3('onAdEnd [ID: %s]', videoId);
|
|
343
335
|
}
|
|
@@ -353,7 +345,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
|
|
|
353
345
|
player.addEventListener('waiting', onWaiting);
|
|
354
346
|
player.addEventListener('ad_start', onAdStart);
|
|
355
347
|
player.addEventListener('ad_end', onAdEnd);
|
|
356
|
-
return
|
|
348
|
+
return () => {
|
|
357
349
|
player.removeEventListener('playback_ready', onPlaybackReady);
|
|
358
350
|
player.removeEventListener('loadedmetadata', onLoadedMetadata);
|
|
359
351
|
player.removeEventListener('durationchange', onDurationChange);
|
|
@@ -367,63 +359,79 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
|
|
|
367
359
|
player.removeEventListener('ad_end', onAdEnd);
|
|
368
360
|
};
|
|
369
361
|
}, [playerRef.current, playerReady, videoId, setLoaded, setPlayState, setMetadata, setVolumeState, setMuted]);
|
|
370
|
-
|
|
371
|
-
|
|
362
|
+
const play = useCallback(() => {
|
|
363
|
+
const {
|
|
364
|
+
current: player
|
|
365
|
+
} = playerRef;
|
|
372
366
|
return player !== null ? player.play() : Promise.reject(noPlayerError$1);
|
|
373
367
|
}, []);
|
|
374
|
-
|
|
375
|
-
|
|
368
|
+
const pause = useCallback(() => {
|
|
369
|
+
const {
|
|
370
|
+
current: player
|
|
371
|
+
} = playerRef;
|
|
376
372
|
return player !== null ? player.pause() : Promise.reject(noPlayerError$1);
|
|
377
373
|
}, []);
|
|
378
|
-
|
|
379
|
-
|
|
374
|
+
const setVolume = useCallback(newVolume => {
|
|
375
|
+
const {
|
|
376
|
+
current: player
|
|
377
|
+
} = playerRef;
|
|
380
378
|
return player !== null ? player.setVolume(newVolume) : Promise.reject(noPlayerError$1);
|
|
381
379
|
}, []);
|
|
382
|
-
|
|
383
|
-
|
|
380
|
+
const mute = useCallback(() => {
|
|
381
|
+
const {
|
|
382
|
+
current: player
|
|
383
|
+
} = playerRef;
|
|
384
384
|
return player !== null ? player.setMute(true) : Promise.reject(noPlayerError$1);
|
|
385
385
|
}, []);
|
|
386
|
-
|
|
387
|
-
|
|
386
|
+
const unmute = useCallback(() => {
|
|
387
|
+
const {
|
|
388
|
+
current: player
|
|
389
|
+
} = playerRef;
|
|
388
390
|
return player !== null ? player.setMute(false) : Promise.reject(noPlayerError$1);
|
|
389
391
|
}, []);
|
|
390
|
-
|
|
391
|
-
|
|
392
|
+
const seek = useCallback(time => {
|
|
393
|
+
const {
|
|
394
|
+
current: player
|
|
395
|
+
} = playerRef;
|
|
392
396
|
return player !== null ? player.seek(time) : Promise.reject(noPlayerError$1);
|
|
393
397
|
}, []);
|
|
394
|
-
|
|
395
|
-
|
|
398
|
+
const {
|
|
399
|
+
playing
|
|
400
|
+
} = playState;
|
|
401
|
+
const currentTime = usePlayerCurrentTime(playerRef.current, {
|
|
396
402
|
id: videoId,
|
|
397
403
|
disabled: !playing || timeUpdateInterval === null,
|
|
398
404
|
updateInterval: timeUpdateInterval,
|
|
399
405
|
onUpdate: customOnTimeUpdate
|
|
400
406
|
});
|
|
401
|
-
return
|
|
407
|
+
return {
|
|
402
408
|
ref: elementRef,
|
|
403
409
|
player: playerRef.current,
|
|
404
|
-
ready
|
|
405
|
-
play
|
|
406
|
-
pause
|
|
407
|
-
mute
|
|
408
|
-
unmute
|
|
409
|
-
setVolume
|
|
410
|
-
seek
|
|
411
|
-
currentTime
|
|
412
|
-
loaded
|
|
413
|
-
muted
|
|
414
|
-
volume
|
|
415
|
-
|
|
410
|
+
ready,
|
|
411
|
+
play,
|
|
412
|
+
pause,
|
|
413
|
+
mute,
|
|
414
|
+
unmute,
|
|
415
|
+
setVolume,
|
|
416
|
+
seek,
|
|
417
|
+
currentTime,
|
|
418
|
+
loaded,
|
|
419
|
+
muted,
|
|
420
|
+
volume,
|
|
421
|
+
...metadata,
|
|
422
|
+
...playState
|
|
423
|
+
};
|
|
416
424
|
};
|
|
417
425
|
|
|
418
|
-
|
|
426
|
+
const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
|
|
419
427
|
|
|
420
|
-
|
|
421
|
-
useEffect(
|
|
428
|
+
const useDocumentEvent = (event, callback) => {
|
|
429
|
+
useEffect(() => {
|
|
422
430
|
if (eventsManager$1 !== null && callback !== null) {
|
|
423
431
|
eventsManager$1.subscribe(event, callback);
|
|
424
432
|
}
|
|
425
433
|
|
|
426
|
-
return
|
|
434
|
+
return () => {
|
|
427
435
|
if (eventsManager$1 !== null && callback !== null) {
|
|
428
436
|
eventsManager$1.unsubscribe(event, callback);
|
|
429
437
|
}
|
|
@@ -431,15 +439,15 @@ var useDocumentEvent = function useDocumentEvent(event, callback) {
|
|
|
431
439
|
}, [event, callback]);
|
|
432
440
|
};
|
|
433
441
|
|
|
434
|
-
|
|
442
|
+
const eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
|
|
435
443
|
|
|
436
|
-
|
|
437
|
-
useEffect(
|
|
444
|
+
const useWindowEvent = (event, callback) => {
|
|
445
|
+
useEffect(() => {
|
|
438
446
|
if (eventsManager !== null && callback !== null) {
|
|
439
447
|
eventsManager.subscribe(event, callback);
|
|
440
448
|
}
|
|
441
449
|
|
|
442
|
-
return
|
|
450
|
+
return () => {
|
|
443
451
|
if (eventsManager !== null && callback !== null) {
|
|
444
452
|
eventsManager.unsubscribe(event, callback);
|
|
445
453
|
}
|
|
@@ -448,10 +456,12 @@ var useWindowEvent = function useWindowEvent(event, callback) {
|
|
|
448
456
|
};
|
|
449
457
|
|
|
450
458
|
function useKeyboard() {
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
459
|
+
let keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
460
|
+
const onKeyDown = useCallback(event => {
|
|
461
|
+
const {
|
|
462
|
+
key
|
|
463
|
+
} = event;
|
|
464
|
+
let callback = null;
|
|
455
465
|
|
|
456
466
|
if (typeof keyMap === 'function') {
|
|
457
467
|
callback = keyMap;
|
|
@@ -463,9 +473,11 @@ function useKeyboard() {
|
|
|
463
473
|
callback(event);
|
|
464
474
|
}
|
|
465
475
|
}, [keyMap]);
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
476
|
+
const onKeyUp = useCallback(event => {
|
|
477
|
+
const {
|
|
478
|
+
key
|
|
479
|
+
} = event;
|
|
480
|
+
let callback = null;
|
|
469
481
|
|
|
470
482
|
if (typeof keyMap === 'function') {
|
|
471
483
|
callback = keyMap;
|
|
@@ -481,68 +493,274 @@ function useKeyboard() {
|
|
|
481
493
|
useWindowEvent('keyup', keyMap !== null ? onKeyUp : null);
|
|
482
494
|
}
|
|
483
495
|
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
496
|
+
const useItemsPaginated = function (loader) {
|
|
497
|
+
let {
|
|
498
|
+
page = null,
|
|
499
|
+
count = 10,
|
|
500
|
+
pages: initialPages = null,
|
|
501
|
+
getPageFromResponse = _ref2 => {
|
|
502
|
+
let {
|
|
503
|
+
pagination: {
|
|
504
|
+
page: currentPage,
|
|
505
|
+
last_page: lastPage,
|
|
506
|
+
total
|
|
507
|
+
},
|
|
508
|
+
data: items
|
|
509
|
+
} = _ref2;
|
|
510
|
+
return {
|
|
511
|
+
page: parseInt(currentPage, 10),
|
|
512
|
+
lastPage: parseInt(lastPage, 10),
|
|
513
|
+
total: parseInt(total, 10),
|
|
514
|
+
items
|
|
515
|
+
};
|
|
516
|
+
},
|
|
517
|
+
onLoaded = null,
|
|
518
|
+
onError = null,
|
|
519
|
+
query = null
|
|
520
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
521
|
+
const lastState = useRef(null);
|
|
522
|
+
const initialState = useMemo(() => {
|
|
523
|
+
const finalInitialPages = initialPages !== null ? initialPages.map(it => getPageFromResponse(it)) : null;
|
|
524
|
+
const finalLastPage = finalInitialPages !== null ? finalInitialPages.reduce((currentLastPage, _ref3) => {
|
|
525
|
+
let {
|
|
526
|
+
lastPage: initialLastPage
|
|
527
|
+
} = _ref3;
|
|
528
|
+
return initialLastPage > currentLastPage ? initialLastPage : currentLastPage;
|
|
529
|
+
}, -1) : -1;
|
|
530
|
+
return {
|
|
531
|
+
lastPage: finalLastPage,
|
|
532
|
+
total: finalInitialPages !== null ? finalInitialPages[0].total : 0,
|
|
533
|
+
loaded: finalLastPage !== -1 && finalInitialPages !== null && finalInitialPages.length === finalLastPage,
|
|
534
|
+
loading: false,
|
|
535
|
+
pages: finalInitialPages !== null ? finalInitialPages : null
|
|
536
|
+
};
|
|
537
|
+
}, [initialPages]);
|
|
538
|
+
const currentPagesRef = useRef(initialState.pages);
|
|
539
|
+
const [state, setState] = useState(initialState);
|
|
540
|
+
const {
|
|
541
|
+
lastPage,
|
|
542
|
+
loaded,
|
|
543
|
+
loading,
|
|
544
|
+
pages,
|
|
545
|
+
total
|
|
546
|
+
} = state;
|
|
547
|
+
const items = pages !== null ? pages.reduce((pagesItems, _ref4) => {
|
|
548
|
+
let {
|
|
549
|
+
items: pageItems
|
|
550
|
+
} = _ref4;
|
|
551
|
+
return pagesItems.concat(pageItems);
|
|
552
|
+
}, []) : null;
|
|
553
|
+
|
|
554
|
+
const updateState = update => setState({ ...state,
|
|
555
|
+
...update
|
|
556
|
+
});
|
|
557
|
+
|
|
558
|
+
const updateFromResponse = function (response) {
|
|
559
|
+
let error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
560
|
+
let reset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
561
|
+
|
|
562
|
+
if (error !== null) {
|
|
563
|
+
updateState({
|
|
564
|
+
loaded: false,
|
|
565
|
+
loading: false
|
|
566
|
+
});
|
|
567
|
+
throw error;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
const newPage = getPageFromResponse(response);
|
|
571
|
+
const currentPages = currentPagesRef.current || [];
|
|
572
|
+
const newPages = (reset ? [newPage] : [...currentPages.filter(it => it.page !== newPage.page), newPage]).sort((a, b) => {
|
|
573
|
+
const {
|
|
574
|
+
page: aPage = null
|
|
575
|
+
} = a;
|
|
576
|
+
const {
|
|
577
|
+
page: bPage = null
|
|
578
|
+
} = b;
|
|
579
|
+
const hasObject = aPage !== null && bPage !== null;
|
|
580
|
+
|
|
581
|
+
if (hasObject) {
|
|
582
|
+
if (aPage === bPage) {
|
|
583
|
+
return 0;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
return aPage > bPage ? 1 : -1;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
if (isNumber(a) && isNumber(b)) {
|
|
590
|
+
if (a === b) {
|
|
591
|
+
return 0;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
return a > b ? 1 : -1;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
return 0;
|
|
598
|
+
});
|
|
599
|
+
currentPagesRef.current = newPages;
|
|
600
|
+
updateState({
|
|
601
|
+
loaded: true,
|
|
602
|
+
loading: false,
|
|
603
|
+
lastPage: newPage.lastPage,
|
|
604
|
+
total: newPage.total,
|
|
605
|
+
pages: newPages
|
|
606
|
+
});
|
|
607
|
+
return newPage;
|
|
608
|
+
};
|
|
609
|
+
|
|
610
|
+
const getNextPage = () => {
|
|
611
|
+
const allPages = lastPage !== -1 ? Array.call(null, ...Array(lastPage)).map((it, index) => index + 1) : [];
|
|
612
|
+
const currentPages = currentPagesRef.current || [];
|
|
613
|
+
const remainingPages = allPages.filter(pageNumber => currentPages.findIndex(it => it.page === pageNumber) === -1);
|
|
614
|
+
const firstItem = remainingPages.length > 0 ? remainingPages.shift() : null;
|
|
615
|
+
return firstItem !== null ? firstItem : null;
|
|
616
|
+
};
|
|
617
|
+
|
|
618
|
+
const loadItems = requestPage => {
|
|
619
|
+
updateState({
|
|
620
|
+
loading: true
|
|
621
|
+
});
|
|
622
|
+
return cancelable(loader(requestPage, count)).then(response => updateFromResponse(response)).catch(error => updateFromResponse(null, error)).then(response => {
|
|
623
|
+
if (onLoaded !== null) {
|
|
624
|
+
onLoaded(response);
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
return response;
|
|
628
|
+
}).catch(error => {
|
|
629
|
+
if (onError !== null) {
|
|
630
|
+
onError(error);
|
|
631
|
+
}
|
|
632
|
+
});
|
|
633
|
+
};
|
|
634
|
+
|
|
635
|
+
const loadPage = pageToLoad => {
|
|
636
|
+
if (loading) {
|
|
637
|
+
return Promise.reject();
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
const currentPages = currentPagesRef.current || [];
|
|
641
|
+
const foundPage = currentPages.find(it => it.page === pageToLoad) || null;
|
|
642
|
+
|
|
643
|
+
if (foundPage !== null) {
|
|
644
|
+
return Promise.resolve(foundPage);
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
return loadItems(pageToLoad);
|
|
648
|
+
};
|
|
649
|
+
|
|
650
|
+
const loadNextPage = () => {
|
|
651
|
+
if (loading) {
|
|
652
|
+
return Promise.reject();
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
const nextPage = getNextPage();
|
|
656
|
+
return nextPage !== null ? loadItems(nextPage) : Promise.resolve();
|
|
657
|
+
}; // Reset all on query change
|
|
658
|
+
|
|
659
|
+
|
|
660
|
+
useEffect(() => {
|
|
661
|
+
const hadState = lastState.current !== null;
|
|
662
|
+
|
|
663
|
+
if (hadState) {
|
|
664
|
+
currentPagesRef.current = null;
|
|
665
|
+
updateState({
|
|
666
|
+
loaded: true,
|
|
667
|
+
loading: false,
|
|
668
|
+
lastPage: null,
|
|
669
|
+
total: 0,
|
|
670
|
+
pages: []
|
|
671
|
+
});
|
|
672
|
+
}
|
|
673
|
+
}, [query]);
|
|
674
|
+
useEffect(() => {
|
|
675
|
+
const hadState = lastState.current !== null;
|
|
676
|
+
lastState.current = initialState;
|
|
677
|
+
|
|
678
|
+
if (hadState) {
|
|
679
|
+
currentPagesRef.current = initialState.pages;
|
|
680
|
+
setState(initialState);
|
|
681
|
+
}
|
|
682
|
+
}, [initialState]);
|
|
683
|
+
useEffect(() => {
|
|
684
|
+
if (loader === null) {
|
|
685
|
+
return () => {};
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
let loadPromise = null;
|
|
689
|
+
const pageToLoad = initialPages === null && page === null ? 1 : page;
|
|
690
|
+
|
|
691
|
+
if (pageToLoad !== null) {
|
|
692
|
+
loadPromise = loadItems(pageToLoad);
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
return () => {
|
|
696
|
+
if (loadPromise !== null) {
|
|
697
|
+
loadPromise.cancel();
|
|
698
|
+
}
|
|
699
|
+
};
|
|
700
|
+
}, [loader, page]);
|
|
701
|
+
const currentPage = pages !== null ? pages.find(_ref5 => {
|
|
702
|
+
let {
|
|
703
|
+
page: pageNumber
|
|
704
|
+
} = _ref5;
|
|
705
|
+
return parseInt(pageNumber, 10) === parseInt(page, 10);
|
|
706
|
+
}) || null : null;
|
|
707
|
+
return {
|
|
708
|
+
items,
|
|
709
|
+
pages,
|
|
710
|
+
currentPage,
|
|
711
|
+
pageItems: currentPage !== null ? currentPage.items : null,
|
|
712
|
+
total,
|
|
713
|
+
lastPage,
|
|
714
|
+
loaded,
|
|
715
|
+
allLoaded: lastPage !== -1 && pages.length === lastPage,
|
|
716
|
+
loading,
|
|
717
|
+
loadNextPage,
|
|
718
|
+
loadPage
|
|
719
|
+
};
|
|
720
|
+
};
|
|
721
|
+
|
|
722
|
+
const debug$2 = createDebug('folklore:video:native');
|
|
723
|
+
const noPlayerError = new Error('No player');
|
|
724
|
+
|
|
725
|
+
const useNativeVideoPlayer = function (url) {
|
|
726
|
+
let {
|
|
727
|
+
width = 0,
|
|
728
|
+
height = 0,
|
|
729
|
+
duration = 0,
|
|
730
|
+
initialMuted = false,
|
|
731
|
+
timeUpdateInterval = 1000,
|
|
732
|
+
onTimeUpdate: customOnTimeUpdate = null
|
|
733
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
734
|
+
const elementRef = useRef(null);
|
|
735
|
+
const [loaded, setLoaded] = useState(false);
|
|
736
|
+
const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
|
|
737
|
+
const [playState, setPlayState] = useState({
|
|
518
738
|
playing: false,
|
|
519
739
|
paused: false,
|
|
520
740
|
ended: false,
|
|
521
741
|
buffering: false
|
|
522
|
-
})
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
533
|
-
metadata = _useState8[0],
|
|
534
|
-
setMetadata = _useState8[1];
|
|
535
|
-
|
|
536
|
-
var play = useCallback(function () {
|
|
537
|
-
var player = elementRef.current;
|
|
742
|
+
});
|
|
743
|
+
const [metadata, setMetadata] = useState({
|
|
744
|
+
width,
|
|
745
|
+
height,
|
|
746
|
+
duration
|
|
747
|
+
});
|
|
748
|
+
const play = useCallback(() => {
|
|
749
|
+
const {
|
|
750
|
+
current: player
|
|
751
|
+
} = elementRef;
|
|
538
752
|
return player !== null ? player.play() : Promise.reject(noPlayerError);
|
|
539
753
|
}, []);
|
|
540
|
-
|
|
541
|
-
|
|
754
|
+
const pause = useCallback(() => {
|
|
755
|
+
const {
|
|
756
|
+
current: player
|
|
757
|
+
} = elementRef;
|
|
542
758
|
return player !== null ? player.pause() : Promise.reject(noPlayerError);
|
|
543
759
|
}, []);
|
|
544
|
-
|
|
545
|
-
|
|
760
|
+
const setVolume = useCallback(newVolume => {
|
|
761
|
+
const {
|
|
762
|
+
current: player
|
|
763
|
+
} = elementRef;
|
|
546
764
|
|
|
547
765
|
if (player !== null) {
|
|
548
766
|
player.volume = newVolume;
|
|
@@ -551,8 +769,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
551
769
|
|
|
552
770
|
return Promise.reject(noPlayerError);
|
|
553
771
|
}, []);
|
|
554
|
-
|
|
555
|
-
|
|
772
|
+
const mute = useCallback(() => {
|
|
773
|
+
const {
|
|
774
|
+
current: player
|
|
775
|
+
} = elementRef;
|
|
556
776
|
|
|
557
777
|
if (player !== null) {
|
|
558
778
|
player.muted = true;
|
|
@@ -561,8 +781,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
561
781
|
|
|
562
782
|
return Promise.reject(noPlayerError);
|
|
563
783
|
}, []);
|
|
564
|
-
|
|
565
|
-
|
|
784
|
+
const unmute = useCallback(() => {
|
|
785
|
+
const {
|
|
786
|
+
current: player
|
|
787
|
+
} = elementRef;
|
|
566
788
|
|
|
567
789
|
if (player !== null) {
|
|
568
790
|
player.muted = false;
|
|
@@ -571,8 +793,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
571
793
|
|
|
572
794
|
return Promise.reject(noPlayerError);
|
|
573
795
|
}, []);
|
|
574
|
-
|
|
575
|
-
|
|
796
|
+
const seek = useCallback(newTime => {
|
|
797
|
+
const {
|
|
798
|
+
current: player
|
|
799
|
+
} = elementRef;
|
|
576
800
|
|
|
577
801
|
if (player !== null) {
|
|
578
802
|
player.currentTime = newTime;
|
|
@@ -581,8 +805,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
581
805
|
|
|
582
806
|
return Promise.reject(noPlayerError);
|
|
583
807
|
}, []);
|
|
584
|
-
|
|
585
|
-
|
|
808
|
+
const setLoop = useCallback(newLoop => {
|
|
809
|
+
const {
|
|
810
|
+
current: player
|
|
811
|
+
} = elementRef;
|
|
586
812
|
|
|
587
813
|
if (player !== null) {
|
|
588
814
|
player.loop = newLoop;
|
|
@@ -592,20 +818,22 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
592
818
|
return Promise.reject(noPlayerError);
|
|
593
819
|
}, []); // Bind player events
|
|
594
820
|
|
|
595
|
-
useEffect(
|
|
596
|
-
|
|
821
|
+
useEffect(() => {
|
|
822
|
+
const {
|
|
823
|
+
current: player
|
|
824
|
+
} = elementRef;
|
|
597
825
|
|
|
598
826
|
if (player === null) {
|
|
599
|
-
return
|
|
827
|
+
return () => {};
|
|
600
828
|
}
|
|
601
829
|
|
|
602
|
-
|
|
830
|
+
const onCanPlay = () => {
|
|
603
831
|
setLoaded(true);
|
|
604
832
|
debug$2('onCanPlay [URL: %s]', url);
|
|
605
833
|
};
|
|
606
834
|
|
|
607
|
-
|
|
608
|
-
|
|
835
|
+
const onMetadataLoaded = () => {
|
|
836
|
+
const newMetadata = {
|
|
609
837
|
duration: player.duration,
|
|
610
838
|
width: player.videoWidth,
|
|
611
839
|
height: player.videoHeight
|
|
@@ -614,7 +842,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
614
842
|
debug$2('onMetadataLoaded [URL: %s]', url);
|
|
615
843
|
};
|
|
616
844
|
|
|
617
|
-
|
|
845
|
+
const onPlay = () => {
|
|
618
846
|
setPlayState({
|
|
619
847
|
playing: true,
|
|
620
848
|
paused: false,
|
|
@@ -624,7 +852,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
624
852
|
debug$2('onPlay [URL: %s]', url);
|
|
625
853
|
};
|
|
626
854
|
|
|
627
|
-
|
|
855
|
+
const onPause = () => {
|
|
628
856
|
setPlayState({
|
|
629
857
|
playing: false,
|
|
630
858
|
paused: true,
|
|
@@ -634,7 +862,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
634
862
|
debug$2('onPause [URL: %s]', url);
|
|
635
863
|
};
|
|
636
864
|
|
|
637
|
-
|
|
865
|
+
const onEnded = () => {
|
|
638
866
|
setPlayState({
|
|
639
867
|
playing: false,
|
|
640
868
|
paused: false,
|
|
@@ -650,7 +878,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
650
878
|
player.addEventListener('play', onPlay);
|
|
651
879
|
player.addEventListener('pause', onPause);
|
|
652
880
|
player.addEventListener('ended', onEnded);
|
|
653
|
-
return
|
|
881
|
+
return () => {
|
|
654
882
|
debug$2('Unbind events [URL: %s]', url);
|
|
655
883
|
player.removeEventListener('canplay', onCanPlay);
|
|
656
884
|
player.removeEventListener('metadataloaded', onMetadataLoaded);
|
|
@@ -659,90 +887,79 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
|
|
|
659
887
|
player.removeEventListener('ended', onEnded);
|
|
660
888
|
};
|
|
661
889
|
}, [url, elementRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
|
|
662
|
-
|
|
663
|
-
|
|
890
|
+
const {
|
|
891
|
+
playing
|
|
892
|
+
} = playState;
|
|
893
|
+
const currentTime = usePlayerCurrentTime(elementRef.current, {
|
|
664
894
|
id: url,
|
|
665
895
|
disabled: !playing || timeUpdateInterval === null,
|
|
666
896
|
updateInterval: timeUpdateInterval,
|
|
667
897
|
onUpdate: customOnTimeUpdate
|
|
668
898
|
});
|
|
669
|
-
return
|
|
899
|
+
return {
|
|
670
900
|
ref: elementRef,
|
|
671
901
|
player: elementRef.current,
|
|
672
|
-
play
|
|
673
|
-
pause
|
|
674
|
-
mute
|
|
675
|
-
unmute
|
|
676
|
-
setVolume
|
|
677
|
-
seek
|
|
678
|
-
setLoop
|
|
902
|
+
play,
|
|
903
|
+
pause,
|
|
904
|
+
mute,
|
|
905
|
+
unmute,
|
|
906
|
+
setVolume,
|
|
907
|
+
seek,
|
|
908
|
+
setLoop,
|
|
679
909
|
ready: true,
|
|
680
|
-
currentTime
|
|
681
|
-
loaded
|
|
910
|
+
currentTime,
|
|
911
|
+
loaded,
|
|
682
912
|
muted: volume === 0,
|
|
683
|
-
volume
|
|
684
|
-
|
|
913
|
+
volume,
|
|
914
|
+
...metadata,
|
|
915
|
+
...playState
|
|
916
|
+
};
|
|
685
917
|
};
|
|
686
918
|
|
|
687
|
-
|
|
919
|
+
const observersCache = new Map();
|
|
688
920
|
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
rootMargin = _ref.rootMargin,
|
|
696
|
-
_ref$threshold = _ref.threshold,
|
|
697
|
-
threshold = _ref$threshold === void 0 ? null : _ref$threshold;
|
|
921
|
+
const getOptionsKey = _ref => {
|
|
922
|
+
let {
|
|
923
|
+
root = null,
|
|
924
|
+
rootMargin,
|
|
925
|
+
threshold = null
|
|
926
|
+
} = _ref;
|
|
698
927
|
return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
|
|
699
928
|
};
|
|
700
929
|
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
930
|
+
const createObserver = function (Observer) {
|
|
931
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
932
|
+
let subscribers = [];
|
|
704
933
|
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
return it.element === element;
|
|
708
|
-
}) || null;
|
|
934
|
+
const addSubscriber = (element, callback) => {
|
|
935
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
709
936
|
|
|
710
937
|
if (currentSubscriber !== null) {
|
|
711
|
-
return subscribers.map(
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
}) : it;
|
|
715
|
-
}).filter(function (it) {
|
|
716
|
-
return it.callbacks.length > 0;
|
|
717
|
-
});
|
|
938
|
+
return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? { ...it,
|
|
939
|
+
callbacks: [...it.callbacks, callback]
|
|
940
|
+
} : it).filter(it => it.callbacks.length > 0);
|
|
718
941
|
}
|
|
719
942
|
|
|
720
|
-
return [
|
|
721
|
-
element
|
|
943
|
+
return [...subscribers, {
|
|
944
|
+
element,
|
|
722
945
|
callbacks: [callback]
|
|
723
|
-
}]
|
|
946
|
+
}];
|
|
724
947
|
};
|
|
725
948
|
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
callbacks: it.callbacks.filter(function (subCallback) {
|
|
730
|
-
return subCallback !== callback;
|
|
731
|
-
})
|
|
732
|
-
}) : it;
|
|
733
|
-
}).filter(function (it) {
|
|
734
|
-
return it.callbacks.length > 0;
|
|
735
|
-
});
|
|
736
|
-
};
|
|
949
|
+
const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? { ...it,
|
|
950
|
+
callbacks: it.callbacks.filter(subCallback => subCallback !== callback)
|
|
951
|
+
} : it).filter(it => it.callbacks.length > 0);
|
|
737
952
|
|
|
738
|
-
|
|
739
|
-
entries.forEach(
|
|
740
|
-
subscribers.forEach(
|
|
741
|
-
|
|
742
|
-
|
|
953
|
+
const onUpdate = entries => {
|
|
954
|
+
entries.forEach(entry => {
|
|
955
|
+
subscribers.forEach(_ref2 => {
|
|
956
|
+
let {
|
|
957
|
+
element,
|
|
958
|
+
callbacks
|
|
959
|
+
} = _ref2;
|
|
743
960
|
|
|
744
961
|
if (element === entry.target) {
|
|
745
|
-
callbacks.forEach(
|
|
962
|
+
callbacks.forEach(callback => {
|
|
746
963
|
callback(entry);
|
|
747
964
|
});
|
|
748
965
|
}
|
|
@@ -750,33 +967,29 @@ var createObserver = function createObserver(Observer) {
|
|
|
750
967
|
});
|
|
751
968
|
};
|
|
752
969
|
|
|
753
|
-
|
|
970
|
+
const observer = new Observer(onUpdate, options);
|
|
754
971
|
|
|
755
|
-
|
|
756
|
-
|
|
972
|
+
const unsubscribe = function (element) {
|
|
973
|
+
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
757
974
|
subscribers = removeSubscriber(element, callback);
|
|
758
975
|
|
|
759
976
|
if (typeof observer.unobserve === 'undefined') {
|
|
760
977
|
observer.disconnect();
|
|
761
|
-
subscribers.forEach(
|
|
978
|
+
subscribers.forEach(subscriber => {
|
|
762
979
|
observer.observe(subscriber.element);
|
|
763
980
|
});
|
|
764
981
|
return;
|
|
765
982
|
}
|
|
766
983
|
|
|
767
|
-
|
|
768
|
-
return it.element === element;
|
|
769
|
-
}) || null;
|
|
984
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
770
985
|
|
|
771
986
|
if (currentSubscriber === null) {
|
|
772
987
|
observer.unobserve(element);
|
|
773
988
|
}
|
|
774
989
|
};
|
|
775
990
|
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
return it.element === element;
|
|
779
|
-
}) || null;
|
|
991
|
+
const subscribe = (element, callback) => {
|
|
992
|
+
const currentSubscriber = subscribers.find(it => it.element === element) || null;
|
|
780
993
|
subscribers = addSubscriber(element, callback);
|
|
781
994
|
|
|
782
995
|
if (currentSubscriber === null) {
|
|
@@ -785,21 +998,21 @@ var createObserver = function createObserver(Observer) {
|
|
|
785
998
|
};
|
|
786
999
|
|
|
787
1000
|
return {
|
|
788
|
-
subscribe
|
|
789
|
-
unsubscribe
|
|
790
|
-
observer
|
|
1001
|
+
subscribe,
|
|
1002
|
+
unsubscribe,
|
|
1003
|
+
observer
|
|
791
1004
|
};
|
|
792
1005
|
};
|
|
793
1006
|
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
1007
|
+
const getObserver = function (Observer) {
|
|
1008
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1009
|
+
const observerKey = getOptionsKey(options);
|
|
797
1010
|
|
|
798
1011
|
if (!observersCache.has(Observer)) {
|
|
799
1012
|
observersCache.set(Observer, {});
|
|
800
1013
|
}
|
|
801
1014
|
|
|
802
|
-
|
|
1015
|
+
const observers = observersCache.get(Observer);
|
|
803
1016
|
|
|
804
1017
|
if (typeof observers[observerKey] === 'undefined') {
|
|
805
1018
|
observers[observerKey] = createObserver(Observer, options);
|
|
@@ -808,37 +1021,30 @@ var getObserver = function getObserver(Observer) {
|
|
|
808
1021
|
|
|
809
1022
|
return observers[observerKey];
|
|
810
1023
|
};
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
var nodeElement = nodeRef.current;
|
|
833
|
-
|
|
834
|
-
var callback = function callback(newEntry) {
|
|
835
|
-
return setEntry(newEntry);
|
|
836
|
-
};
|
|
837
|
-
|
|
838
|
-
var unsubscribe = null;
|
|
1024
|
+
const useObserver = function (Observer) {
|
|
1025
|
+
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1026
|
+
let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
1027
|
+
const {
|
|
1028
|
+
root = null,
|
|
1029
|
+
rootMargin = null,
|
|
1030
|
+
threshold = null,
|
|
1031
|
+
disabled = false
|
|
1032
|
+
} = opts;
|
|
1033
|
+
const [entry, setEntry] = useState(initialEntry);
|
|
1034
|
+
const nodeRef = useRef(null);
|
|
1035
|
+
const currentElement = useRef(null);
|
|
1036
|
+
const elementChanged = nodeRef.current !== currentElement.current;
|
|
1037
|
+
useEffect(() => {
|
|
1038
|
+
const {
|
|
1039
|
+
current: nodeElement
|
|
1040
|
+
} = nodeRef;
|
|
1041
|
+
|
|
1042
|
+
const callback = newEntry => setEntry(newEntry);
|
|
1043
|
+
|
|
1044
|
+
let unsubscribe = null;
|
|
839
1045
|
|
|
840
1046
|
if (nodeElement !== null) {
|
|
841
|
-
|
|
1047
|
+
const newOpts = {};
|
|
842
1048
|
|
|
843
1049
|
if (root !== null) {
|
|
844
1050
|
newOpts.root = root;
|
|
@@ -852,16 +1058,16 @@ var useObserver = function useObserver(Observer) {
|
|
|
852
1058
|
newOpts.threshold = threshold;
|
|
853
1059
|
}
|
|
854
1060
|
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
1061
|
+
const {
|
|
1062
|
+
subscribe,
|
|
1063
|
+
unsubscribe: localUnsubscribe
|
|
1064
|
+
} = getObserver(Observer, newOpts);
|
|
859
1065
|
unsubscribe = localUnsubscribe;
|
|
860
1066
|
subscribe(nodeElement, callback);
|
|
861
1067
|
}
|
|
862
1068
|
|
|
863
1069
|
currentElement.current = nodeElement;
|
|
864
|
-
return
|
|
1070
|
+
return () => {
|
|
865
1071
|
if (unsubscribe !== null) {
|
|
866
1072
|
unsubscribe(nodeElement, callback);
|
|
867
1073
|
}
|
|
@@ -869,14 +1075,14 @@ var useObserver = function useObserver(Observer) {
|
|
|
869
1075
|
}, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
|
|
870
1076
|
return {
|
|
871
1077
|
ref: nodeRef,
|
|
872
|
-
entry
|
|
1078
|
+
entry
|
|
873
1079
|
};
|
|
874
1080
|
};
|
|
875
1081
|
/**
|
|
876
1082
|
* Intersection Observer
|
|
877
1083
|
*/
|
|
878
1084
|
|
|
879
|
-
|
|
1085
|
+
const intersectionObserverInitialEntry = {
|
|
880
1086
|
target: null,
|
|
881
1087
|
time: null,
|
|
882
1088
|
isVisible: false,
|
|
@@ -886,130 +1092,89 @@ var intersectionObserverInitialEntry = {
|
|
|
886
1092
|
boundingClientRect: null,
|
|
887
1093
|
rootBounds: null
|
|
888
1094
|
};
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
threshold = _ref3$threshold === void 0 ? [0, 1.0] : _ref3$threshold,
|
|
897
|
-
_ref3$disabled = _ref3.disabled,
|
|
898
|
-
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
|
|
899
|
-
|
|
1095
|
+
const useIntersectionObserver = function () {
|
|
1096
|
+
let {
|
|
1097
|
+
root = null,
|
|
1098
|
+
rootMargin = '0px',
|
|
1099
|
+
threshold = [0, 1.0],
|
|
1100
|
+
disabled = false
|
|
1101
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
900
1102
|
return useObserver(IntersectionObserver, {
|
|
901
|
-
root
|
|
902
|
-
rootMargin
|
|
903
|
-
threshold
|
|
904
|
-
disabled
|
|
1103
|
+
root,
|
|
1104
|
+
rootMargin,
|
|
1105
|
+
threshold,
|
|
1106
|
+
disabled
|
|
905
1107
|
}, intersectionObserverInitialEntry);
|
|
906
1108
|
};
|
|
907
1109
|
/**
|
|
908
1110
|
* Resize Observer
|
|
909
1111
|
*/
|
|
910
1112
|
|
|
911
|
-
|
|
1113
|
+
const resizeObserverInitialEntry = {
|
|
912
1114
|
target: null,
|
|
913
1115
|
contentRect: null,
|
|
914
1116
|
contentBoxSize: null,
|
|
915
1117
|
borderBoxSize: null
|
|
916
1118
|
};
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
1119
|
+
const useResizeObserver = function () {
|
|
1120
|
+
let {
|
|
1121
|
+
disabled = false
|
|
1122
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
922
1123
|
return useObserver(ResizeObserver, {
|
|
923
|
-
disabled
|
|
1124
|
+
disabled
|
|
924
1125
|
}, resizeObserverInitialEntry);
|
|
925
1126
|
};
|
|
926
1127
|
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
930
|
-
var NO_PLAYER_ERROR$1 = new Error('No player');
|
|
931
|
-
var debug$1 = createDebug('folklore:video:youtube');
|
|
1128
|
+
const NO_PLAYER_ERROR$1 = new Error('No player');
|
|
1129
|
+
const debug$1 = createDebug('folklore:video:youtube');
|
|
932
1130
|
|
|
933
1131
|
function useYouTubePlayer(id) {
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
initialMuted = _ref$muted === void 0 ? false : _ref$muted,
|
|
949
|
-
_ref$onVolumeChange = _ref.onVolumeChange,
|
|
950
|
-
customOnVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
|
|
951
|
-
_ref$onTimeUpdate = _ref.onTimeUpdate,
|
|
952
|
-
customOnTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
|
|
953
|
-
_ref$getVideoId = _ref.getVideoId,
|
|
954
|
-
getVideoId = _ref$getVideoId === void 0 ? function (url) {
|
|
955
|
-
if (url === null || url.match(/^https?:/) === null) {
|
|
956
|
-
return url;
|
|
957
|
-
}
|
|
958
|
-
|
|
959
|
-
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
|
960
|
-
var match = url.match(regExp);
|
|
961
|
-
return match && match[7].length === 11 ? match[7] : null;
|
|
962
|
-
} : _ref$getVideoId;
|
|
963
|
-
|
|
964
|
-
var _useState = useState(typeof window.YT !== 'undefined'),
|
|
965
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
966
|
-
apiLoaded = _useState2[0],
|
|
967
|
-
setApiLoaded = _useState2[1];
|
|
968
|
-
|
|
969
|
-
var apiRef = useRef(typeof window.YT !== 'undefined' ? window.YT : null);
|
|
970
|
-
var elementRef = useRef(null);
|
|
971
|
-
var playerRef = useRef(null);
|
|
972
|
-
var playerElementRef = useRef(elementRef.current);
|
|
973
|
-
var elementHasChanged = elementRef.current !== playerElementRef.current;
|
|
974
|
-
var videoId = useMemo(function () {
|
|
975
|
-
return getVideoId(id);
|
|
976
|
-
}, [id]);
|
|
977
|
-
|
|
978
|
-
var _useState3 = useState(false),
|
|
979
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
980
|
-
ready = _useState4[0],
|
|
981
|
-
setReady = _useState4[1];
|
|
982
|
-
|
|
983
|
-
var _useState5 = useState(initialMuted),
|
|
984
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
985
|
-
muted = _useState6[0],
|
|
986
|
-
setMuted = _useState6[1];
|
|
1132
|
+
let {
|
|
1133
|
+
width = 0,
|
|
1134
|
+
height = 0,
|
|
1135
|
+
duration = 0,
|
|
1136
|
+
autoplay = false,
|
|
1137
|
+
controls = true,
|
|
1138
|
+
timeUpdateInterval = 1000,
|
|
1139
|
+
muted: initialMuted = false,
|
|
1140
|
+
onVolumeChange: customOnVolumeChange = null,
|
|
1141
|
+
onTimeUpdate: customOnTimeUpdate = null,
|
|
1142
|
+
getVideoId = url => {
|
|
1143
|
+
if (url === null || url.match(/^https?:/) === null) {
|
|
1144
|
+
return url;
|
|
1145
|
+
}
|
|
987
1146
|
|
|
988
|
-
|
|
1147
|
+
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
|
1148
|
+
const match = url.match(regExp);
|
|
1149
|
+
return match && match[7].length === 11 ? match[7] : null;
|
|
1150
|
+
}
|
|
1151
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1152
|
+
const [apiLoaded, setApiLoaded] = useState(typeof window.YT !== 'undefined');
|
|
1153
|
+
const apiRef = useRef(typeof window.YT !== 'undefined' ? window.YT : null);
|
|
1154
|
+
const elementRef = useRef(null);
|
|
1155
|
+
const playerRef = useRef(null);
|
|
1156
|
+
const playerElementRef = useRef(elementRef.current);
|
|
1157
|
+
const elementHasChanged = elementRef.current !== playerElementRef.current;
|
|
1158
|
+
const videoId = useMemo(() => getVideoId(id), [id]);
|
|
1159
|
+
const [ready, setReady] = useState(false);
|
|
1160
|
+
const [muted, setMuted] = useState(initialMuted);
|
|
1161
|
+
const [playState, setPlayState] = useState({
|
|
989
1162
|
playing: false,
|
|
990
1163
|
paused: false,
|
|
991
1164
|
ended: false,
|
|
992
1165
|
buffering: false
|
|
993
|
-
})
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
duration: duration
|
|
1002
|
-
}),
|
|
1003
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
1004
|
-
metadata = _useState10[0],
|
|
1005
|
-
setMetadata = _useState10[1];
|
|
1006
|
-
|
|
1007
|
-
useEffect(function () {
|
|
1008
|
-
var canceled = false;
|
|
1166
|
+
});
|
|
1167
|
+
const [metadata, setMetadata] = useState({
|
|
1168
|
+
width,
|
|
1169
|
+
height,
|
|
1170
|
+
duration
|
|
1171
|
+
});
|
|
1172
|
+
useEffect(() => {
|
|
1173
|
+
let canceled = false;
|
|
1009
1174
|
|
|
1010
1175
|
if (!apiLoaded && videoId !== null) {
|
|
1011
1176
|
debug$1('Load API');
|
|
1012
|
-
loadYouTube().then(
|
|
1177
|
+
loadYouTube().then(api => {
|
|
1013
1178
|
if (!canceled) {
|
|
1014
1179
|
apiRef.current = api;
|
|
1015
1180
|
setApiLoaded(true);
|
|
@@ -1018,21 +1183,27 @@ function useYouTubePlayer(id) {
|
|
|
1018
1183
|
});
|
|
1019
1184
|
}
|
|
1020
1185
|
|
|
1021
|
-
return
|
|
1186
|
+
return () => {
|
|
1022
1187
|
canceled = true;
|
|
1023
1188
|
};
|
|
1024
1189
|
}, [apiLoaded, videoId, setApiLoaded]);
|
|
1025
|
-
|
|
1026
|
-
|
|
1190
|
+
const play = useCallback(() => {
|
|
1191
|
+
const {
|
|
1192
|
+
current: player
|
|
1193
|
+
} = playerRef;
|
|
1027
1194
|
return player !== null && typeof player.playVideo !== 'undefined' ? Promise.resolve(player.playVideo()) : Promise.reject(NO_PLAYER_ERROR$1);
|
|
1028
1195
|
}, []);
|
|
1029
|
-
|
|
1030
|
-
|
|
1196
|
+
const pause = useCallback(() => {
|
|
1197
|
+
const {
|
|
1198
|
+
current: player
|
|
1199
|
+
} = playerRef;
|
|
1031
1200
|
return player !== null && typeof player.pauseVideo !== 'undefined' ? Promise.resolve(player.pauseVideo()) : Promise.reject(NO_PLAYER_ERROR$1);
|
|
1032
1201
|
}, []);
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1202
|
+
const setVolume = useCallback(volume => {
|
|
1203
|
+
const {
|
|
1204
|
+
current: player
|
|
1205
|
+
} = playerRef;
|
|
1206
|
+
const promise = player !== null && typeof player.setVolume !== 'undefined' ? Promise.resolve(player.setVolume(volume * 100)) : Promise.reject(NO_PLAYER_ERROR$1);
|
|
1036
1207
|
|
|
1037
1208
|
if (customOnVolumeChange) {
|
|
1038
1209
|
customOnVolumeChange(volume);
|
|
@@ -1040,35 +1211,41 @@ function useYouTubePlayer(id) {
|
|
|
1040
1211
|
|
|
1041
1212
|
return promise;
|
|
1042
1213
|
}, [customOnVolumeChange]);
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1214
|
+
const mute = useCallback(() => {
|
|
1215
|
+
const {
|
|
1216
|
+
current: player
|
|
1217
|
+
} = playerRef;
|
|
1218
|
+
return (player !== null && typeof player.mute !== 'undefined' ? Promise.resolve(player.mute()) : Promise.reject(NO_PLAYER_ERROR$1)).then(() => setMuted(true));
|
|
1048
1219
|
}, [setMuted]);
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1220
|
+
const unmute = useCallback(() => {
|
|
1221
|
+
const {
|
|
1222
|
+
current: player
|
|
1223
|
+
} = playerRef;
|
|
1224
|
+
return (player !== null && typeof player.unMute !== 'undefined' ? Promise.resolve(player.unMute()) : Promise.reject(NO_PLAYER_ERROR$1)).then(() => setMuted(false));
|
|
1054
1225
|
}, []);
|
|
1055
|
-
|
|
1056
|
-
|
|
1226
|
+
const seek = useCallback(time => {
|
|
1227
|
+
const {
|
|
1228
|
+
current: player
|
|
1229
|
+
} = playerRef;
|
|
1057
1230
|
return player !== null && typeof player.seekTo !== 'undefined' ? Promise.resolve(player.seekTo(time)) : Promise.reject(NO_PLAYER_ERROR$1);
|
|
1058
1231
|
}, []);
|
|
1059
|
-
|
|
1060
|
-
|
|
1232
|
+
const setLoop = useCallback(loop => {
|
|
1233
|
+
const {
|
|
1234
|
+
current: player
|
|
1235
|
+
} = playerRef;
|
|
1061
1236
|
return player !== null && typeof player.setLoop !== 'undefined' ? Promise.resolve(player.setLoop(loop)) : Promise.reject(NO_PLAYER_ERROR$1);
|
|
1062
1237
|
}, []);
|
|
1063
|
-
|
|
1238
|
+
const destroyPlayer = useCallback(() => {
|
|
1064
1239
|
if (playerRef.current !== null) {
|
|
1065
1240
|
debug$1('Unset player');
|
|
1066
1241
|
playerRef.current = null;
|
|
1067
1242
|
}
|
|
1068
1243
|
}, []); // Detect iframe switch and destroy player
|
|
1069
1244
|
|
|
1070
|
-
useEffect(
|
|
1071
|
-
|
|
1245
|
+
useEffect(() => {
|
|
1246
|
+
const {
|
|
1247
|
+
current: currentPlayer
|
|
1248
|
+
} = playerRef;
|
|
1072
1249
|
|
|
1073
1250
|
if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
|
|
1074
1251
|
debug$1('iFrame switched');
|
|
@@ -1076,20 +1253,23 @@ function useYouTubePlayer(id) {
|
|
|
1076
1253
|
}
|
|
1077
1254
|
}, [elementHasChanged]); // Create player
|
|
1078
1255
|
|
|
1079
|
-
useEffect(
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1256
|
+
useEffect(() => {
|
|
1257
|
+
const {
|
|
1258
|
+
current: YT = null
|
|
1259
|
+
} = apiRef;
|
|
1260
|
+
const {
|
|
1261
|
+
current: currentPlayer = null
|
|
1262
|
+
} = playerRef;
|
|
1263
|
+
const {
|
|
1264
|
+
current: element = null
|
|
1265
|
+
} = elementRef;
|
|
1086
1266
|
|
|
1087
1267
|
if (!apiLoaded || videoId === null || element === null) {
|
|
1088
1268
|
destroyPlayer();
|
|
1089
1269
|
return;
|
|
1090
1270
|
}
|
|
1091
1271
|
|
|
1092
|
-
|
|
1272
|
+
let player = currentPlayer;
|
|
1093
1273
|
|
|
1094
1274
|
if (player !== null && typeof player.loadVideoById !== 'undefined') {
|
|
1095
1275
|
debug$1('Switch video [ID: %s]', videoId);
|
|
@@ -1097,32 +1277,36 @@ function useYouTubePlayer(id) {
|
|
|
1097
1277
|
} else {
|
|
1098
1278
|
debug$1('Create player [ID: %s]', videoId);
|
|
1099
1279
|
|
|
1100
|
-
|
|
1101
|
-
|
|
1280
|
+
const onReady = _ref => {
|
|
1281
|
+
let {
|
|
1282
|
+
target
|
|
1283
|
+
} = _ref;
|
|
1102
1284
|
player = target;
|
|
1103
1285
|
playerRef.current = target;
|
|
1104
1286
|
setReady(true);
|
|
1105
|
-
|
|
1287
|
+
const newDuration = target.getDuration();
|
|
1106
1288
|
|
|
1107
1289
|
if (newDuration !== metadata.duration) {
|
|
1108
|
-
setMetadata(
|
|
1290
|
+
setMetadata({ ...metadata,
|
|
1109
1291
|
duration: newDuration
|
|
1110
|
-
})
|
|
1292
|
+
});
|
|
1111
1293
|
}
|
|
1112
1294
|
|
|
1113
1295
|
debug$1('onReady [ID: %s]', videoId);
|
|
1114
1296
|
};
|
|
1115
1297
|
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1298
|
+
const onStateChange = _ref2 => {
|
|
1299
|
+
let {
|
|
1300
|
+
data: state
|
|
1301
|
+
} = _ref2;
|
|
1302
|
+
const newState = {
|
|
1119
1303
|
playing: state === YT.PlayerState.PLAYING,
|
|
1120
1304
|
paused: state === YT.PlayerState.PAUSED,
|
|
1121
1305
|
ended: state === YT.PlayerState.ENDED,
|
|
1122
1306
|
buffering: state === YT.PlayerState.BUFFERING
|
|
1123
1307
|
};
|
|
1124
1308
|
setPlayState(newState);
|
|
1125
|
-
|
|
1309
|
+
let stateLabel = null;
|
|
1126
1310
|
|
|
1127
1311
|
if (newState.playing) {
|
|
1128
1312
|
stateLabel = 'playing';
|
|
@@ -1142,9 +1326,9 @@ function useYouTubePlayer(id) {
|
|
|
1142
1326
|
};
|
|
1143
1327
|
|
|
1144
1328
|
player = new YT.Player(element, {
|
|
1145
|
-
videoId
|
|
1329
|
+
videoId,
|
|
1146
1330
|
playerVars: {
|
|
1147
|
-
controls
|
|
1331
|
+
controls,
|
|
1148
1332
|
autoplay: autoplay ? 1 : 0,
|
|
1149
1333
|
mute: initialMuted,
|
|
1150
1334
|
playsinline: true,
|
|
@@ -1153,8 +1337,8 @@ function useYouTubePlayer(id) {
|
|
|
1153
1337
|
modestbranding: 1
|
|
1154
1338
|
},
|
|
1155
1339
|
events: {
|
|
1156
|
-
onReady
|
|
1157
|
-
onStateChange
|
|
1340
|
+
onReady,
|
|
1341
|
+
onStateChange
|
|
1158
1342
|
}
|
|
1159
1343
|
});
|
|
1160
1344
|
}
|
|
@@ -1162,127 +1346,88 @@ function useYouTubePlayer(id) {
|
|
|
1162
1346
|
playerRef.current = player;
|
|
1163
1347
|
playerElementRef.current = element;
|
|
1164
1348
|
}, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1349
|
+
const {
|
|
1350
|
+
playing
|
|
1351
|
+
} = playState;
|
|
1352
|
+
const getCurrentTime = useCallback(p => p.getCurrentTime(), []);
|
|
1353
|
+
const currentTime = usePlayerCurrentTime(playerRef.current, {
|
|
1170
1354
|
id: videoId,
|
|
1171
1355
|
disabled: !playing || timeUpdateInterval === null,
|
|
1172
1356
|
updateInterval: timeUpdateInterval,
|
|
1173
1357
|
onUpdate: customOnTimeUpdate,
|
|
1174
|
-
getCurrentTime
|
|
1358
|
+
getCurrentTime
|
|
1175
1359
|
});
|
|
1176
|
-
return
|
|
1360
|
+
return {
|
|
1177
1361
|
ref: elementRef,
|
|
1178
1362
|
player: playerRef.current,
|
|
1179
|
-
play
|
|
1180
|
-
pause
|
|
1181
|
-
mute
|
|
1182
|
-
unmute
|
|
1183
|
-
setVolume
|
|
1184
|
-
seek
|
|
1185
|
-
setLoop
|
|
1186
|
-
ready
|
|
1187
|
-
currentTime
|
|
1188
|
-
muted
|
|
1189
|
-
loaded: ready
|
|
1190
|
-
|
|
1363
|
+
play,
|
|
1364
|
+
pause,
|
|
1365
|
+
mute,
|
|
1366
|
+
unmute,
|
|
1367
|
+
setVolume,
|
|
1368
|
+
seek,
|
|
1369
|
+
setLoop,
|
|
1370
|
+
ready,
|
|
1371
|
+
currentTime,
|
|
1372
|
+
muted,
|
|
1373
|
+
loaded: ready,
|
|
1374
|
+
...metadata,
|
|
1375
|
+
...playState
|
|
1376
|
+
};
|
|
1191
1377
|
}
|
|
1192
1378
|
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
byline = _ref$byline === void 0 ? false : _ref$byline,
|
|
1213
|
-
_ref$controls = _ref.controls,
|
|
1214
|
-
controls = _ref$controls === void 0 ? false : _ref$controls,
|
|
1215
|
-
_ref$initialMuted = _ref.initialMuted,
|
|
1216
|
-
initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
|
|
1217
|
-
_ref$timeUpdateInterv = _ref.timeUpdateInterval,
|
|
1218
|
-
timeUpdateInterval = _ref$timeUpdateInterv === void 0 ? 1000 : _ref$timeUpdateInterv,
|
|
1219
|
-
_ref$onTimeUpdate = _ref.onTimeUpdate,
|
|
1220
|
-
customOnTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
|
|
1221
|
-
_ref$getVideoId = _ref.getVideoId,
|
|
1222
|
-
getVideoId = _ref$getVideoId === void 0 ? function (url) {
|
|
1223
|
-
if (url === null || url.match(/^[0-9]+$/) !== null) {
|
|
1224
|
-
return url;
|
|
1225
|
-
}
|
|
1226
|
-
|
|
1227
|
-
var match = url.match(/\/[0-9]+/);
|
|
1228
|
-
return match !== null ? match[1] : null;
|
|
1229
|
-
} : _ref$getVideoId;
|
|
1230
|
-
|
|
1231
|
-
var _useState = useState(false),
|
|
1232
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1233
|
-
apiLoaded = _useState2[0],
|
|
1234
|
-
setApiLoaded = _useState2[1];
|
|
1235
|
-
|
|
1236
|
-
var apiRef = useRef(null);
|
|
1237
|
-
var elementRef = useRef(null);
|
|
1238
|
-
var playerRef = useRef(null);
|
|
1239
|
-
var playerElementRef = useRef(elementRef.current);
|
|
1240
|
-
var elementHasChanged = elementRef.current !== playerElementRef.current;
|
|
1241
|
-
var videoId = useMemo(function () {
|
|
1242
|
-
return getVideoId(id);
|
|
1243
|
-
}, [id]);
|
|
1244
|
-
|
|
1245
|
-
var _useState3 = useState(false),
|
|
1246
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1247
|
-
ready = _useState4[0],
|
|
1248
|
-
setReady = _useState4[1];
|
|
1249
|
-
|
|
1250
|
-
var _useState5 = useState(false),
|
|
1251
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1252
|
-
loaded = _useState6[0],
|
|
1253
|
-
setLoaded = _useState6[1];
|
|
1254
|
-
|
|
1255
|
-
var _useState7 = useState(initialMuted ? 0 : 1),
|
|
1256
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
1257
|
-
volume = _useState8[0],
|
|
1258
|
-
setVolumeState = _useState8[1];
|
|
1379
|
+
const debug = createDebug('folklore:video:vimeo');
|
|
1380
|
+
const NO_PLAYER_ERROR = new Error('No player');
|
|
1381
|
+
|
|
1382
|
+
const useVimeoPlayer = function (id) {
|
|
1383
|
+
let {
|
|
1384
|
+
width = 0,
|
|
1385
|
+
height = 0,
|
|
1386
|
+
duration = 0,
|
|
1387
|
+
autoplay = false,
|
|
1388
|
+
autopause = true,
|
|
1389
|
+
byline = false,
|
|
1390
|
+
controls = false,
|
|
1391
|
+
initialMuted = false,
|
|
1392
|
+
timeUpdateInterval = 1000,
|
|
1393
|
+
onTimeUpdate: customOnTimeUpdate = null,
|
|
1394
|
+
getVideoId = url => {
|
|
1395
|
+
if (url === null || url.match(/^[0-9]+$/) !== null) {
|
|
1396
|
+
return url;
|
|
1397
|
+
}
|
|
1259
1398
|
|
|
1260
|
-
|
|
1399
|
+
const match = url.match(/\/[0-9]+/);
|
|
1400
|
+
return match !== null ? match[1] : null;
|
|
1401
|
+
}
|
|
1402
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1403
|
+
const [apiLoaded, setApiLoaded] = useState(false);
|
|
1404
|
+
const apiRef = useRef(null);
|
|
1405
|
+
const elementRef = useRef(null);
|
|
1406
|
+
const playerRef = useRef(null);
|
|
1407
|
+
const playerElementRef = useRef(elementRef.current);
|
|
1408
|
+
const elementHasChanged = elementRef.current !== playerElementRef.current;
|
|
1409
|
+
const videoId = useMemo(() => getVideoId(id), [id]);
|
|
1410
|
+
const [ready, setReady] = useState(false);
|
|
1411
|
+
const [loaded, setLoaded] = useState(false);
|
|
1412
|
+
const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
|
|
1413
|
+
const [playState, setPlayState] = useState({
|
|
1261
1414
|
playing: false,
|
|
1262
1415
|
paused: false,
|
|
1263
1416
|
ended: false,
|
|
1264
1417
|
buffering: false
|
|
1265
|
-
})
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
width: width,
|
|
1272
|
-
height: height,
|
|
1273
|
-
duration: duration
|
|
1274
|
-
}),
|
|
1275
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
1276
|
-
metadata = _useState12[0],
|
|
1277
|
-
setMetadata = _useState12[1]; // Load SDK
|
|
1278
|
-
|
|
1418
|
+
});
|
|
1419
|
+
const [metadata, setMetadata] = useState({
|
|
1420
|
+
width,
|
|
1421
|
+
height,
|
|
1422
|
+
duration
|
|
1423
|
+
}); // Load SDK
|
|
1279
1424
|
|
|
1280
|
-
useEffect(
|
|
1281
|
-
|
|
1425
|
+
useEffect(() => {
|
|
1426
|
+
let canceled = false;
|
|
1282
1427
|
|
|
1283
1428
|
if (!apiLoaded && id !== null) {
|
|
1284
1429
|
debug('Load API');
|
|
1285
|
-
loadVimeo().then(
|
|
1430
|
+
loadVimeo().then(api => {
|
|
1286
1431
|
if (!canceled) {
|
|
1287
1432
|
apiRef.current = api;
|
|
1288
1433
|
setApiLoaded(true);
|
|
@@ -1291,40 +1436,56 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1291
1436
|
});
|
|
1292
1437
|
}
|
|
1293
1438
|
|
|
1294
|
-
return
|
|
1439
|
+
return () => {
|
|
1295
1440
|
canceled = true;
|
|
1296
1441
|
};
|
|
1297
1442
|
}, [id]);
|
|
1298
|
-
|
|
1299
|
-
|
|
1443
|
+
const play = useCallback(() => {
|
|
1444
|
+
const {
|
|
1445
|
+
current: player
|
|
1446
|
+
} = playerRef;
|
|
1300
1447
|
return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR);
|
|
1301
1448
|
}, []);
|
|
1302
|
-
|
|
1303
|
-
|
|
1449
|
+
const pause = useCallback(() => {
|
|
1450
|
+
const {
|
|
1451
|
+
current: player
|
|
1452
|
+
} = playerRef;
|
|
1304
1453
|
return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR);
|
|
1305
1454
|
}, []);
|
|
1306
|
-
|
|
1307
|
-
|
|
1455
|
+
const setVolume = useCallback(newVolume => {
|
|
1456
|
+
const {
|
|
1457
|
+
current: player
|
|
1458
|
+
} = playerRef;
|
|
1308
1459
|
return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR);
|
|
1309
1460
|
}, []);
|
|
1310
|
-
|
|
1311
|
-
|
|
1461
|
+
const mute = useCallback(() => {
|
|
1462
|
+
const {
|
|
1463
|
+
current: player
|
|
1464
|
+
} = playerRef;
|
|
1312
1465
|
return player !== null ? player.setVolume(0) : Promise.reject(NO_PLAYER_ERROR);
|
|
1313
1466
|
}, []);
|
|
1314
|
-
|
|
1315
|
-
|
|
1467
|
+
const unmute = useCallback(() => {
|
|
1468
|
+
const {
|
|
1469
|
+
current: player
|
|
1470
|
+
} = playerRef;
|
|
1316
1471
|
return player !== null ? player.setVolume(1) : Promise.reject(NO_PLAYER_ERROR);
|
|
1317
1472
|
}, []);
|
|
1318
|
-
|
|
1319
|
-
|
|
1473
|
+
const seek = useCallback(time => {
|
|
1474
|
+
const {
|
|
1475
|
+
current: player
|
|
1476
|
+
} = playerRef;
|
|
1320
1477
|
return player !== null ? player.setCurrentTime(time) : Promise.reject(NO_PLAYER_ERROR);
|
|
1321
1478
|
}, []);
|
|
1322
|
-
|
|
1323
|
-
|
|
1479
|
+
const setLoop = useCallback(loop => {
|
|
1480
|
+
const {
|
|
1481
|
+
current: player
|
|
1482
|
+
} = playerRef;
|
|
1324
1483
|
return player !== null ? player.setLoop(loop) : Promise.reject(NO_PLAYER_ERROR);
|
|
1325
1484
|
}, []);
|
|
1326
|
-
|
|
1327
|
-
|
|
1485
|
+
const destroyVideo = useCallback(() => {
|
|
1486
|
+
const {
|
|
1487
|
+
current: player
|
|
1488
|
+
} = playerRef;
|
|
1328
1489
|
|
|
1329
1490
|
if (player !== null) {
|
|
1330
1491
|
debug('Unload video');
|
|
@@ -1336,8 +1497,10 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1336
1497
|
playerRef.current = null;
|
|
1337
1498
|
}
|
|
1338
1499
|
}, []);
|
|
1339
|
-
useEffect(
|
|
1340
|
-
|
|
1500
|
+
useEffect(() => {
|
|
1501
|
+
const {
|
|
1502
|
+
current: currentPlayer
|
|
1503
|
+
} = playerRef;
|
|
1341
1504
|
|
|
1342
1505
|
if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
|
|
1343
1506
|
debug('iFrame switched');
|
|
@@ -1345,40 +1508,41 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1345
1508
|
}
|
|
1346
1509
|
}, [elementHasChanged]); // Create player
|
|
1347
1510
|
|
|
1348
|
-
useEffect(
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1511
|
+
useEffect(() => {
|
|
1512
|
+
const {
|
|
1513
|
+
current: Player = null
|
|
1514
|
+
} = apiRef;
|
|
1515
|
+
const {
|
|
1516
|
+
current: currentPlayer = null
|
|
1517
|
+
} = playerRef;
|
|
1518
|
+
const {
|
|
1519
|
+
current: element = null
|
|
1520
|
+
} = elementRef;
|
|
1355
1521
|
|
|
1356
1522
|
if (!apiLoaded || videoId === null || element === null) {
|
|
1357
1523
|
destroyVideo();
|
|
1358
1524
|
return;
|
|
1359
1525
|
}
|
|
1360
1526
|
|
|
1361
|
-
|
|
1527
|
+
let player = currentPlayer;
|
|
1362
1528
|
|
|
1363
1529
|
if (player === null) {
|
|
1364
1530
|
debug('Create player [ID: %s]', videoId);
|
|
1365
1531
|
player = new Player(element, {
|
|
1366
1532
|
id: videoId,
|
|
1367
|
-
autoplay
|
|
1368
|
-
autopause
|
|
1369
|
-
byline
|
|
1370
|
-
controls
|
|
1533
|
+
autoplay,
|
|
1534
|
+
autopause,
|
|
1535
|
+
byline,
|
|
1536
|
+
controls,
|
|
1371
1537
|
muted: initialMuted,
|
|
1372
1538
|
background: !controls
|
|
1373
1539
|
});
|
|
1374
|
-
player.ready().then(
|
|
1375
|
-
return setReady(true);
|
|
1376
|
-
}).catch(function (e) {
|
|
1540
|
+
player.ready().then(() => setReady(true)).catch(e => {
|
|
1377
1541
|
debug('ERROR: %o', e);
|
|
1378
1542
|
});
|
|
1379
1543
|
} else {
|
|
1380
1544
|
debug('Load video [ID: %s]', videoId);
|
|
1381
|
-
player.loadVideo(videoId).catch(
|
|
1545
|
+
player.loadVideo(videoId).catch(e => {
|
|
1382
1546
|
debug('ERROR: %o', e);
|
|
1383
1547
|
});
|
|
1384
1548
|
}
|
|
@@ -1387,28 +1551,26 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1387
1551
|
playerElementRef.current = element;
|
|
1388
1552
|
}, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events
|
|
1389
1553
|
|
|
1390
|
-
useEffect(
|
|
1391
|
-
|
|
1554
|
+
useEffect(() => {
|
|
1555
|
+
const {
|
|
1556
|
+
current: player
|
|
1557
|
+
} = playerRef;
|
|
1392
1558
|
|
|
1393
1559
|
if (player === null) {
|
|
1394
|
-
return
|
|
1560
|
+
return () => {};
|
|
1395
1561
|
}
|
|
1396
1562
|
|
|
1397
|
-
|
|
1563
|
+
let canceled = false;
|
|
1398
1564
|
|
|
1399
|
-
|
|
1400
|
-
Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(
|
|
1401
|
-
|
|
1402
|
-
newDuration = _ref3[0],
|
|
1403
|
-
newWidth = _ref3[1],
|
|
1404
|
-
newHeight = _ref3[2],
|
|
1405
|
-
newMuted = _ref3[3];
|
|
1565
|
+
const onLoaded = () => {
|
|
1566
|
+
Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(_ref => {
|
|
1567
|
+
let [newDuration, newWidth, newHeight, newMuted] = _ref;
|
|
1406
1568
|
|
|
1407
1569
|
if (canceled) {
|
|
1408
1570
|
return;
|
|
1409
1571
|
}
|
|
1410
1572
|
|
|
1411
|
-
|
|
1573
|
+
const newMetadata = {
|
|
1412
1574
|
duration: newDuration,
|
|
1413
1575
|
width: newWidth,
|
|
1414
1576
|
height: newHeight
|
|
@@ -1424,7 +1586,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1424
1586
|
debug('onLoaded [ID: %s]', videoId);
|
|
1425
1587
|
};
|
|
1426
1588
|
|
|
1427
|
-
|
|
1589
|
+
const onPlay = () => {
|
|
1428
1590
|
setPlayState({
|
|
1429
1591
|
playing: true,
|
|
1430
1592
|
paused: false,
|
|
@@ -1432,14 +1594,14 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1432
1594
|
buffering: false
|
|
1433
1595
|
});
|
|
1434
1596
|
debug('onPlay [ID: %s]', videoId);
|
|
1435
|
-
player.getMuted().then(
|
|
1597
|
+
player.getMuted().then(newMuted => {
|
|
1436
1598
|
if (!canceled && newMuted) {
|
|
1437
1599
|
setVolumeState(0);
|
|
1438
1600
|
}
|
|
1439
|
-
}).catch(
|
|
1601
|
+
}).catch(() => {});
|
|
1440
1602
|
};
|
|
1441
1603
|
|
|
1442
|
-
|
|
1604
|
+
const onPause = () => {
|
|
1443
1605
|
setPlayState({
|
|
1444
1606
|
playing: false,
|
|
1445
1607
|
paused: true,
|
|
@@ -1449,13 +1611,15 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1449
1611
|
debug('onPause [ID: %s]', videoId);
|
|
1450
1612
|
};
|
|
1451
1613
|
|
|
1452
|
-
|
|
1453
|
-
|
|
1614
|
+
const onVolumeChange = _ref2 => {
|
|
1615
|
+
let {
|
|
1616
|
+
volume: newVolume
|
|
1617
|
+
} = _ref2;
|
|
1454
1618
|
setVolumeState(newVolume);
|
|
1455
1619
|
debug('onVolumeChange [ID: %s]', videoId);
|
|
1456
1620
|
};
|
|
1457
1621
|
|
|
1458
|
-
|
|
1622
|
+
const onEnded = () => {
|
|
1459
1623
|
setPlayState({
|
|
1460
1624
|
playing: false,
|
|
1461
1625
|
paused: false,
|
|
@@ -1465,7 +1629,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1465
1629
|
debug('onEnded [ID: %s]', videoId);
|
|
1466
1630
|
};
|
|
1467
1631
|
|
|
1468
|
-
|
|
1632
|
+
const onBufferStart = () => {
|
|
1469
1633
|
setPlayState({
|
|
1470
1634
|
playing: true,
|
|
1471
1635
|
paused: false,
|
|
@@ -1475,7 +1639,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1475
1639
|
debug('onBufferStart [ID: %s]', videoId);
|
|
1476
1640
|
};
|
|
1477
1641
|
|
|
1478
|
-
|
|
1642
|
+
const onBufferEnded = () => {
|
|
1479
1643
|
setPlayState({
|
|
1480
1644
|
playing: true,
|
|
1481
1645
|
paused: false,
|
|
@@ -1493,7 +1657,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1493
1657
|
player.on('ended', onEnded);
|
|
1494
1658
|
player.on('bufferstart', onBufferStart);
|
|
1495
1659
|
player.on('bufferend', onBufferEnded);
|
|
1496
|
-
return
|
|
1660
|
+
return () => {
|
|
1497
1661
|
canceled = true;
|
|
1498
1662
|
debug('Unbind events [ID: %s]', videoId);
|
|
1499
1663
|
player.off('loaded', onLoaded);
|
|
@@ -1505,63 +1669,55 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
|
|
|
1505
1669
|
player.off('bufferend', onBufferEnded);
|
|
1506
1670
|
};
|
|
1507
1671
|
}, [videoId, playerRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1672
|
+
const {
|
|
1673
|
+
playing
|
|
1674
|
+
} = playState;
|
|
1675
|
+
const getCurrentTime = useCallback(p => p.getCurrentTime(), []);
|
|
1676
|
+
const currentTime = usePlayerCurrentTime(playerRef.current, {
|
|
1513
1677
|
id: videoId,
|
|
1514
1678
|
disabled: !playing || timeUpdateInterval === null,
|
|
1515
1679
|
updateInterval: timeUpdateInterval,
|
|
1516
1680
|
onUpdate: customOnTimeUpdate,
|
|
1517
|
-
getCurrentTime
|
|
1681
|
+
getCurrentTime
|
|
1518
1682
|
});
|
|
1519
|
-
return
|
|
1683
|
+
return {
|
|
1520
1684
|
ref: elementRef,
|
|
1521
1685
|
player: playerRef.current,
|
|
1522
|
-
play
|
|
1523
|
-
pause
|
|
1524
|
-
mute
|
|
1525
|
-
unmute
|
|
1526
|
-
setVolume
|
|
1527
|
-
seek
|
|
1528
|
-
setLoop
|
|
1529
|
-
ready
|
|
1530
|
-
currentTime
|
|
1531
|
-
loaded
|
|
1686
|
+
play,
|
|
1687
|
+
pause,
|
|
1688
|
+
mute,
|
|
1689
|
+
unmute,
|
|
1690
|
+
setVolume,
|
|
1691
|
+
seek,
|
|
1692
|
+
setLoop,
|
|
1693
|
+
ready,
|
|
1694
|
+
currentTime,
|
|
1695
|
+
loaded,
|
|
1532
1696
|
muted: volume === 0,
|
|
1533
|
-
volume
|
|
1534
|
-
|
|
1697
|
+
volume,
|
|
1698
|
+
...metadata,
|
|
1699
|
+
...playState
|
|
1700
|
+
};
|
|
1535
1701
|
};
|
|
1536
1702
|
|
|
1537
1703
|
function useVideoPlayer(params) {
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
_ref$onBufferStart = _ref.onBufferStart,
|
|
1556
|
-
customOnBufferStart = _ref$onBufferStart === void 0 ? null : _ref$onBufferStart,
|
|
1557
|
-
_ref$onBufferEnded = _ref.onBufferEnded,
|
|
1558
|
-
customOnBufferEnded = _ref$onBufferEnded === void 0 ? null : _ref$onBufferEnded;
|
|
1559
|
-
|
|
1560
|
-
var dailymotionPlayer = useDailymotionPlayer(service === 'dailymotion' ? videoId || url : null, params);
|
|
1561
|
-
var youtubePlayer = useYouTubePlayer(service === 'youtube' ? videoId || url : null, params);
|
|
1562
|
-
var vimeoPlayer = useVimeoPlayer(service === 'vimeo' ? videoId || url : null, params);
|
|
1563
|
-
var nativePlayer = useNativeVideoPlayer(url, params);
|
|
1564
|
-
var player = null;
|
|
1704
|
+
const {
|
|
1705
|
+
service = null,
|
|
1706
|
+
videoId = null,
|
|
1707
|
+
url = null,
|
|
1708
|
+
onLoaded: customOnLoaded = null,
|
|
1709
|
+
onPlay: customOnPlay = null,
|
|
1710
|
+
onPause: customOnPause = null,
|
|
1711
|
+
onEnd: customOnEnd = null,
|
|
1712
|
+
onMetadataChange: customOnMetadataChange = null,
|
|
1713
|
+
onBufferStart: customOnBufferStart = null,
|
|
1714
|
+
onBufferEnded: customOnBufferEnded = null
|
|
1715
|
+
} = params || {};
|
|
1716
|
+
const dailymotionPlayer = useDailymotionPlayer(service === 'dailymotion' ? videoId || url : null, params);
|
|
1717
|
+
const youtubePlayer = useYouTubePlayer(service === 'youtube' ? videoId || url : null, params);
|
|
1718
|
+
const vimeoPlayer = useVimeoPlayer(service === 'vimeo' ? videoId || url : null, params);
|
|
1719
|
+
const nativePlayer = useNativeVideoPlayer(url, params);
|
|
1720
|
+
let player = null;
|
|
1565
1721
|
|
|
1566
1722
|
if (service === 'dailymotion') {
|
|
1567
1723
|
player = dailymotionPlayer;
|
|
@@ -1573,53 +1729,45 @@ function useVideoPlayer(params) {
|
|
|
1573
1729
|
player = nativePlayer;
|
|
1574
1730
|
}
|
|
1575
1731
|
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
_ref2$width = _ref2.width,
|
|
1588
|
-
metaWidth = _ref2$width === void 0 ? null : _ref2$width,
|
|
1589
|
-
_ref2$height = _ref2.height,
|
|
1590
|
-
metaHeight = _ref2$height === void 0 ? null : _ref2$height,
|
|
1591
|
-
_ref2$duration = _ref2.duration,
|
|
1592
|
-
metaDuration = _ref2$duration === void 0 ? null : _ref2$duration;
|
|
1593
|
-
|
|
1594
|
-
useEffect(function () {
|
|
1732
|
+
const {
|
|
1733
|
+
playing = false,
|
|
1734
|
+
paused = false,
|
|
1735
|
+
buffering = false,
|
|
1736
|
+
ended = false,
|
|
1737
|
+
ready = false,
|
|
1738
|
+
width: metaWidth = null,
|
|
1739
|
+
height: metaHeight = null,
|
|
1740
|
+
duration: metaDuration = null
|
|
1741
|
+
} = player || {};
|
|
1742
|
+
useEffect(() => {
|
|
1595
1743
|
if (ready && customOnLoaded !== null) {
|
|
1596
1744
|
customOnLoaded();
|
|
1597
1745
|
}
|
|
1598
1746
|
}, [ready, customOnLoaded]);
|
|
1599
|
-
useEffect(
|
|
1747
|
+
useEffect(() => {
|
|
1600
1748
|
if (playing && customOnPlay !== null) {
|
|
1601
1749
|
customOnPlay();
|
|
1602
1750
|
}
|
|
1603
1751
|
}, [playing, customOnPlay]);
|
|
1604
|
-
useEffect(
|
|
1752
|
+
useEffect(() => {
|
|
1605
1753
|
if (paused && customOnPause !== null) {
|
|
1606
1754
|
customOnPause();
|
|
1607
1755
|
}
|
|
1608
1756
|
}, [paused, customOnPause]);
|
|
1609
|
-
useEffect(
|
|
1757
|
+
useEffect(() => {
|
|
1610
1758
|
if (buffering && customOnBufferStart !== null) {
|
|
1611
1759
|
customOnBufferStart();
|
|
1612
1760
|
} else if (!buffering && customOnBufferEnded !== null) {
|
|
1613
1761
|
customOnBufferEnded();
|
|
1614
1762
|
}
|
|
1615
1763
|
}, [buffering, customOnBufferStart, customOnBufferEnded]);
|
|
1616
|
-
useEffect(
|
|
1764
|
+
useEffect(() => {
|
|
1617
1765
|
if (ended && customOnEnd !== null) {
|
|
1618
1766
|
customOnEnd();
|
|
1619
1767
|
}
|
|
1620
1768
|
}, [ended, customOnEnd]);
|
|
1621
|
-
useEffect(
|
|
1622
|
-
|
|
1769
|
+
useEffect(() => {
|
|
1770
|
+
const hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null;
|
|
1623
1771
|
|
|
1624
1772
|
if (hasMetadata && customOnMetadataChange !== null) {
|
|
1625
1773
|
customOnMetadataChange({
|
|
@@ -1632,27 +1780,21 @@ function useVideoPlayer(params) {
|
|
|
1632
1780
|
return player;
|
|
1633
1781
|
}
|
|
1634
1782
|
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
};
|
|
1640
|
-
};
|
|
1641
|
-
|
|
1642
|
-
var currentScroll = getWindowScroll();
|
|
1783
|
+
const getWindowScroll = () => ({
|
|
1784
|
+
x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
|
|
1785
|
+
y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
|
|
1786
|
+
});
|
|
1643
1787
|
|
|
1644
|
-
|
|
1645
|
-
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1646
|
-
var _opts$onChange = opts.onChange,
|
|
1647
|
-
onChange = _opts$onChange === void 0 ? null : _opts$onChange;
|
|
1788
|
+
const currentScroll = getWindowScroll();
|
|
1648
1789
|
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1790
|
+
const useWindowScroll = function () {
|
|
1791
|
+
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1792
|
+
const {
|
|
1793
|
+
onChange = null
|
|
1794
|
+
} = opts;
|
|
1795
|
+
const [scroll, setScroll] = useState(currentScroll);
|
|
1796
|
+
const updateScroll = useCallback(() => {
|
|
1797
|
+
const newScroll = getWindowScroll();
|
|
1656
1798
|
|
|
1657
1799
|
if (currentScroll.x !== newScroll.x || currentScroll.y !== newScroll.y) {
|
|
1658
1800
|
currentScroll.x = newScroll.x;
|
|
@@ -1663,40 +1805,33 @@ var useWindowScroll = function useWindowScroll() {
|
|
|
1663
1805
|
|
|
1664
1806
|
return null;
|
|
1665
1807
|
}, [setScroll]);
|
|
1666
|
-
|
|
1667
|
-
|
|
1808
|
+
const onScroll = useCallback(() => {
|
|
1809
|
+
const newScroll = updateScroll();
|
|
1668
1810
|
|
|
1669
1811
|
if (newScroll !== null && onChange !== null) {
|
|
1670
1812
|
onChange(newScroll);
|
|
1671
1813
|
}
|
|
1672
1814
|
}, [updateScroll, onChange]);
|
|
1673
1815
|
useWindowEvent('scroll', onScroll);
|
|
1674
|
-
useEffect(
|
|
1816
|
+
useEffect(() => {
|
|
1675
1817
|
onScroll();
|
|
1676
1818
|
}, []);
|
|
1677
1819
|
return scroll;
|
|
1678
1820
|
};
|
|
1679
1821
|
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
};
|
|
1686
|
-
var currentSize = getWindowSize();
|
|
1822
|
+
const getWindowSize = () => ({
|
|
1823
|
+
width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
|
|
1824
|
+
height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
|
|
1825
|
+
});
|
|
1826
|
+
let currentSize = getWindowSize();
|
|
1687
1827
|
|
|
1688
1828
|
function useWindowSize() {
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
size = _useState2[0],
|
|
1696
|
-
setSize = _useState2[1];
|
|
1697
|
-
|
|
1698
|
-
var updateSize = useCallback(function () {
|
|
1699
|
-
var newSize = getWindowSize();
|
|
1829
|
+
let {
|
|
1830
|
+
onChange = null
|
|
1831
|
+
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1832
|
+
const [size, setSize] = useState(currentSize);
|
|
1833
|
+
const updateSize = useCallback(() => {
|
|
1834
|
+
const newSize = getWindowSize();
|
|
1700
1835
|
|
|
1701
1836
|
if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
|
|
1702
1837
|
currentSize = newSize;
|
|
@@ -1706,18 +1841,18 @@ function useWindowSize() {
|
|
|
1706
1841
|
|
|
1707
1842
|
return null;
|
|
1708
1843
|
}, [setSize]);
|
|
1709
|
-
|
|
1710
|
-
|
|
1844
|
+
const onResize = useCallback(() => {
|
|
1845
|
+
const newSize = updateSize();
|
|
1711
1846
|
|
|
1712
1847
|
if (newSize !== null && onChange !== null) {
|
|
1713
1848
|
onChange(newSize);
|
|
1714
1849
|
}
|
|
1715
1850
|
}, [onChange]);
|
|
1716
1851
|
useWindowEvent('resize', onResize);
|
|
1717
|
-
useEffect(
|
|
1852
|
+
useEffect(() => {
|
|
1718
1853
|
onResize();
|
|
1719
1854
|
}, []);
|
|
1720
1855
|
return size;
|
|
1721
1856
|
}
|
|
1722
1857
|
|
|
1723
|
-
export { eventsManager$1 as documentEventsManager, getObserver, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
|
|
1858
|
+
export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
|