@folklore/hooks 0.0.54 → 0.0.56

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.
Files changed (3) hide show
  1. package/dist/cjs.js +54 -24
  2. package/dist/es.js +54 -24
  3. package/package.json +2 -2
package/dist/cjs.js CHANGED
@@ -135,6 +135,7 @@ function useDailymotionPlayer() {
135
135
  uiLogo = false,
136
136
  uiStartScreenInfo = true,
137
137
  timeUpdateInterval = 1000,
138
+ embedPlayerId = null,
138
139
  onTimeUpdate: customOnTimeUpdate = null,
139
140
  getVideoId = url => {
140
141
  if (url === null || url.match(/^https?:/) === null) {
@@ -167,6 +168,7 @@ function useDailymotionPlayer() {
167
168
  const elementHasChanged = elementRef.current !== playerElementRef.current;
168
169
  const [muted, setMuted] = react.useState(initialMuted);
169
170
  const [volume, setVolumeState] = react.useState(initialMuted ? 0 : 1);
171
+ const [currentTime, setCurrentTime] = react.useState(0);
170
172
  const [playState, setPlayState] = react.useState({
171
173
  playing: false,
172
174
  paused: false,
@@ -186,7 +188,7 @@ function useDailymotionPlayer() {
186
188
  if (!apiLoaded && videoId !== null) {
187
189
  debug('Load API');
188
190
  services.loadDailymotion({
189
- url: 'https://geo.dailymotion.com/libs/player.js',
191
+ url: embedPlayerId !== null ? `https://geo.dailymotion.com/libs/player/${embedPlayerId}.js` : 'https://geo.dailymotion.com/libs/player.js',
190
192
  callback: null
191
193
  }).then(api => {
192
194
  if (!canceled) {
@@ -199,7 +201,7 @@ function useDailymotionPlayer() {
199
201
  return () => {
200
202
  canceled = true;
201
203
  };
202
- }, [videoId, apiLoaded, setApiLoaded]);
204
+ }, [videoId, apiLoaded, setApiLoaded, embedPlayerId]);
203
205
 
204
206
  // Create or update player
205
207
  react.useEffect(() => {
@@ -247,7 +249,7 @@ function useDailymotionPlayer() {
247
249
  debug('Create player [ID: %s]', videoId);
248
250
  }
249
251
  playerElementRef.current = element;
250
- }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
252
+ }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
251
253
  react.useEffect(() => {
252
254
  const {
253
255
  current: player = null
@@ -264,20 +266,34 @@ function useDailymotionPlayer() {
264
266
  setLoaded(true);
265
267
  debug('onPlaybackReady [ID: %s]', videoId);
266
268
  }
267
- function onDurationChange() {
269
+ function onDurationChange(_ref) {
270
+ let {
271
+ videoTime,
272
+ videoDuration
273
+ } = _ref;
268
274
  currentMetadata = {
269
275
  ...currentMetadata,
270
- duration: player.videoDuration
276
+ duration: videoDuration
271
277
  };
272
278
  setMetadata(currentMetadata);
279
+ setCurrentTime(videoTime);
273
280
  debug('onDurationChange [ID: %s]', videoId);
274
281
  }
275
- function onVolumeChange() {
276
- setMuted(player.playerIsMuted);
277
- setVolumeState(player.playerVolume);
282
+ function onVolumeChange(_ref2) {
283
+ let {
284
+ playerIsMuted,
285
+ playerVolume,
286
+ videoTime
287
+ } = _ref2;
288
+ setMuted(playerIsMuted);
289
+ setVolumeState(playerVolume);
290
+ setCurrentTime(videoTime);
278
291
  debug('onVolumeChange [ID: %s]', videoId);
279
292
  }
280
- function onPlay() {
293
+ function onPlay(_ref3) {
294
+ let {
295
+ videoTime
296
+ } = _ref3;
281
297
  currentPlayState = {
282
298
  ...currentPlayState,
283
299
  playing: true,
@@ -285,9 +301,13 @@ function useDailymotionPlayer() {
285
301
  ended: false
286
302
  };
287
303
  setPlayState(currentPlayState);
304
+ setCurrentTime(videoTime);
288
305
  debug('onPlay [ID: %s]', videoId);
289
306
  }
290
- function onPause() {
307
+ function onPause(_ref4) {
308
+ let {
309
+ videoTime
310
+ } = _ref4;
291
311
  currentPlayState = {
292
312
  ...currentPlayState,
293
313
  playing: false,
@@ -295,9 +315,13 @@ function useDailymotionPlayer() {
295
315
  ended: false
296
316
  };
297
317
  setPlayState(currentPlayState);
318
+ setCurrentTime(videoTime);
298
319
  debug('onPause [ID: %s]', videoId);
299
320
  }
300
- function onEnd() {
321
+ function onEnd(_ref5) {
322
+ let {
323
+ videoTime
324
+ } = _ref5;
301
325
  currentPlayState = {
302
326
  ...currentPlayState,
303
327
  playing: false,
@@ -305,24 +329,39 @@ function useDailymotionPlayer() {
305
329
  ended: true
306
330
  };
307
331
  setPlayState(currentPlayState);
332
+ setCurrentTime(videoTime);
308
333
  debug('onEnd [ID: %s]', videoId);
309
334
  }
310
- function onPlaying() {
335
+ function onPlaying(_ref6) {
336
+ let {
337
+ videoTime
338
+ } = _ref6;
311
339
  currentPlayState = {
312
340
  ...currentPlayState,
313
341
  buffering: false
314
342
  };
315
343
  setPlayState(currentPlayState);
344
+ setCurrentTime(videoTime);
316
345
  debug('onPlaying [ID: %s]', videoId);
317
346
  }
318
- function onWaiting() {
347
+ function onWaiting(_ref7) {
348
+ let {
349
+ videoTime
350
+ } = _ref7;
319
351
  currentPlayState = {
320
352
  ...currentPlayState,
321
353
  buffering: true
322
354
  };
323
355
  setPlayState(currentPlayState);
356
+ setCurrentTime(videoTime);
324
357
  debug('onWaiting [ID: %s]', videoId);
325
358
  }
359
+ function onTimeChange(_ref8) {
360
+ let {
361
+ videoTime
362
+ } = _ref8;
363
+ setCurrentTime(videoTime);
364
+ }
326
365
  function onAdStart() {
327
366
  currentPlayState = {
328
367
  ...currentPlayState,
@@ -347,6 +386,7 @@ function useDailymotionPlayer() {
347
386
  player.on(dailymotion.events.VIDEO_END, onEnd);
348
387
  player.on(dailymotion.events.VIDEO_PLAYING, onPlaying);
349
388
  player.on(dailymotion.events.VIDEO_BUFFERING, onWaiting);
389
+ player.on(dailymotion.events.VIDEO_TIMECHANGE, onTimeChange);
350
390
  player.on(dailymotion.events.AD_START, onAdStart);
351
391
  player.on(dailymotion.events.AD_END, onAdEnd);
352
392
  return () => {
@@ -358,6 +398,7 @@ function useDailymotionPlayer() {
358
398
  player.off(dailymotion.events.VIDEO_END, onEnd);
359
399
  player.off(dailymotion.events.VIDEO_PLAYING, onPlaying);
360
400
  player.off(dailymotion.events.VIDEO_BUFFERING, onWaiting);
401
+ player.off(dailymotion.events.VIDEO_TIMECHANGE, onTimeChange);
361
402
  player.off(dailymotion.events.AD_START, onAdStart);
362
403
  player.off(dailymotion.events.AD_END, onAdEnd);
363
404
  };
@@ -398,17 +439,6 @@ function useDailymotionPlayer() {
398
439
  } = playerRef;
399
440
  return player !== null ? player.seek(time) : Promise.reject(NO_PLAYER_ERROR$3);
400
441
  }, []);
401
- const {
402
- playing
403
- } = playState;
404
- const getCurrentTime = react.useCallback(player => player.videoTime || 0, []);
405
- const currentTime = usePlayerCurrentTime(playerRef.current, {
406
- id: videoId,
407
- disabled: !playing || timeUpdateInterval === null,
408
- updateInterval: timeUpdateInterval,
409
- onUpdate: customOnTimeUpdate,
410
- getCurrentTime
411
- });
412
442
  return {
413
443
  ref: elementRef,
414
444
  player: playerRef.current,
package/dist/es.js CHANGED
@@ -124,6 +124,7 @@ function useDailymotionPlayer() {
124
124
  uiLogo = false,
125
125
  uiStartScreenInfo = true,
126
126
  timeUpdateInterval = 1000,
127
+ embedPlayerId = null,
127
128
  onTimeUpdate: customOnTimeUpdate = null,
128
129
  getVideoId = url => {
129
130
  if (url === null || url.match(/^https?:/) === null) {
@@ -156,6 +157,7 @@ function useDailymotionPlayer() {
156
157
  const elementHasChanged = elementRef.current !== playerElementRef.current;
157
158
  const [muted, setMuted] = useState(initialMuted);
158
159
  const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
160
+ const [currentTime, setCurrentTime] = useState(0);
159
161
  const [playState, setPlayState] = useState({
160
162
  playing: false,
161
163
  paused: false,
@@ -175,7 +177,7 @@ function useDailymotionPlayer() {
175
177
  if (!apiLoaded && videoId !== null) {
176
178
  debug('Load API');
177
179
  loadDailymotion({
178
- url: 'https://geo.dailymotion.com/libs/player.js',
180
+ url: embedPlayerId !== null ? `https://geo.dailymotion.com/libs/player/${embedPlayerId}.js` : 'https://geo.dailymotion.com/libs/player.js',
179
181
  callback: null
180
182
  }).then(api => {
181
183
  if (!canceled) {
@@ -188,7 +190,7 @@ function useDailymotionPlayer() {
188
190
  return () => {
189
191
  canceled = true;
190
192
  };
191
- }, [videoId, apiLoaded, setApiLoaded]);
193
+ }, [videoId, apiLoaded, setApiLoaded, embedPlayerId]);
192
194
 
193
195
  // Create or update player
194
196
  useEffect(() => {
@@ -236,7 +238,7 @@ function useDailymotionPlayer() {
236
238
  debug('Create player [ID: %s]', videoId);
237
239
  }
238
240
  playerElementRef.current = element;
239
- }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
241
+ }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
240
242
  useEffect(() => {
241
243
  const {
242
244
  current: player = null
@@ -253,20 +255,34 @@ function useDailymotionPlayer() {
253
255
  setLoaded(true);
254
256
  debug('onPlaybackReady [ID: %s]', videoId);
255
257
  }
256
- function onDurationChange() {
258
+ function onDurationChange(_ref) {
259
+ let {
260
+ videoTime,
261
+ videoDuration
262
+ } = _ref;
257
263
  currentMetadata = {
258
264
  ...currentMetadata,
259
- duration: player.videoDuration
265
+ duration: videoDuration
260
266
  };
261
267
  setMetadata(currentMetadata);
268
+ setCurrentTime(videoTime);
262
269
  debug('onDurationChange [ID: %s]', videoId);
263
270
  }
264
- function onVolumeChange() {
265
- setMuted(player.playerIsMuted);
266
- setVolumeState(player.playerVolume);
271
+ function onVolumeChange(_ref2) {
272
+ let {
273
+ playerIsMuted,
274
+ playerVolume,
275
+ videoTime
276
+ } = _ref2;
277
+ setMuted(playerIsMuted);
278
+ setVolumeState(playerVolume);
279
+ setCurrentTime(videoTime);
267
280
  debug('onVolumeChange [ID: %s]', videoId);
268
281
  }
269
- function onPlay() {
282
+ function onPlay(_ref3) {
283
+ let {
284
+ videoTime
285
+ } = _ref3;
270
286
  currentPlayState = {
271
287
  ...currentPlayState,
272
288
  playing: true,
@@ -274,9 +290,13 @@ function useDailymotionPlayer() {
274
290
  ended: false
275
291
  };
276
292
  setPlayState(currentPlayState);
293
+ setCurrentTime(videoTime);
277
294
  debug('onPlay [ID: %s]', videoId);
278
295
  }
279
- function onPause() {
296
+ function onPause(_ref4) {
297
+ let {
298
+ videoTime
299
+ } = _ref4;
280
300
  currentPlayState = {
281
301
  ...currentPlayState,
282
302
  playing: false,
@@ -284,9 +304,13 @@ function useDailymotionPlayer() {
284
304
  ended: false
285
305
  };
286
306
  setPlayState(currentPlayState);
307
+ setCurrentTime(videoTime);
287
308
  debug('onPause [ID: %s]', videoId);
288
309
  }
289
- function onEnd() {
310
+ function onEnd(_ref5) {
311
+ let {
312
+ videoTime
313
+ } = _ref5;
290
314
  currentPlayState = {
291
315
  ...currentPlayState,
292
316
  playing: false,
@@ -294,24 +318,39 @@ function useDailymotionPlayer() {
294
318
  ended: true
295
319
  };
296
320
  setPlayState(currentPlayState);
321
+ setCurrentTime(videoTime);
297
322
  debug('onEnd [ID: %s]', videoId);
298
323
  }
299
- function onPlaying() {
324
+ function onPlaying(_ref6) {
325
+ let {
326
+ videoTime
327
+ } = _ref6;
300
328
  currentPlayState = {
301
329
  ...currentPlayState,
302
330
  buffering: false
303
331
  };
304
332
  setPlayState(currentPlayState);
333
+ setCurrentTime(videoTime);
305
334
  debug('onPlaying [ID: %s]', videoId);
306
335
  }
307
- function onWaiting() {
336
+ function onWaiting(_ref7) {
337
+ let {
338
+ videoTime
339
+ } = _ref7;
308
340
  currentPlayState = {
309
341
  ...currentPlayState,
310
342
  buffering: true
311
343
  };
312
344
  setPlayState(currentPlayState);
345
+ setCurrentTime(videoTime);
313
346
  debug('onWaiting [ID: %s]', videoId);
314
347
  }
348
+ function onTimeChange(_ref8) {
349
+ let {
350
+ videoTime
351
+ } = _ref8;
352
+ setCurrentTime(videoTime);
353
+ }
315
354
  function onAdStart() {
316
355
  currentPlayState = {
317
356
  ...currentPlayState,
@@ -336,6 +375,7 @@ function useDailymotionPlayer() {
336
375
  player.on(dailymotion.events.VIDEO_END, onEnd);
337
376
  player.on(dailymotion.events.VIDEO_PLAYING, onPlaying);
338
377
  player.on(dailymotion.events.VIDEO_BUFFERING, onWaiting);
378
+ player.on(dailymotion.events.VIDEO_TIMECHANGE, onTimeChange);
339
379
  player.on(dailymotion.events.AD_START, onAdStart);
340
380
  player.on(dailymotion.events.AD_END, onAdEnd);
341
381
  return () => {
@@ -347,6 +387,7 @@ function useDailymotionPlayer() {
347
387
  player.off(dailymotion.events.VIDEO_END, onEnd);
348
388
  player.off(dailymotion.events.VIDEO_PLAYING, onPlaying);
349
389
  player.off(dailymotion.events.VIDEO_BUFFERING, onWaiting);
390
+ player.off(dailymotion.events.VIDEO_TIMECHANGE, onTimeChange);
350
391
  player.off(dailymotion.events.AD_START, onAdStart);
351
392
  player.off(dailymotion.events.AD_END, onAdEnd);
352
393
  };
@@ -387,17 +428,6 @@ function useDailymotionPlayer() {
387
428
  } = playerRef;
388
429
  return player !== null ? player.seek(time) : Promise.reject(NO_PLAYER_ERROR$3);
389
430
  }, []);
390
- const {
391
- playing
392
- } = playState;
393
- const getCurrentTime = useCallback(player => player.videoTime || 0, []);
394
- const currentTime = usePlayerCurrentTime(playerRef.current, {
395
- id: videoId,
396
- disabled: !playing || timeUpdateInterval === null,
397
- updateInterval: timeUpdateInterval,
398
- onUpdate: customOnTimeUpdate,
399
- getCurrentTime
400
- });
401
431
  return {
402
432
  ref: elementRef,
403
433
  player: playerRef.current,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@folklore/hooks",
3
- "version": "0.0.54",
3
+ "version": "0.0.56",
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": "782dc0475b4b57c501ed3da370fbf0950807f7eb",
52
+ "gitHead": "075c1674bbedc9d3a0aea9facf98fdb2391105ce",
53
53
  "dependencies": {
54
54
  "@folklore/events": "^0.0.5",
55
55
  "@folklore/services": "^0.1.40",