@folklore/hooks 0.0.48 → 0.0.50

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 +29 -35
  2. package/dist/es.js +29 -35
  3. package/package.json +2 -2
package/dist/cjs.js CHANGED
@@ -233,24 +233,28 @@ function useDailymotionPlayer() {
233
233
  });
234
234
  debug('Load video [ID: %s]', videoId);
235
235
  } else {
236
- player = dailymotion.createPlayer(element, {
236
+ element.id = `dailymotion-player-${videoId}-${Date.now()}`;
237
+ player = dailymotion.createPlayer(element.id, {
237
238
  video: videoId,
238
239
  width,
239
240
  height,
240
241
  params: playerParams
242
+ }).then(newPlayer => {
243
+ debug('Player ready [ID: %s]', videoId);
244
+ setPlayerReady(true);
245
+ playerRef.current = newPlayer;
241
246
  });
242
247
  debug('Create player [ID: %s]', videoId);
243
248
  }
244
- if (!playerReady) {
245
- setPlayerReady(true);
246
- }
247
- playerRef.current = player;
248
249
  playerElementRef.current = element;
249
250
  }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
250
251
  react.useEffect(() => {
251
252
  const {
252
253
  current: player = null
253
254
  } = playerRef;
255
+ const {
256
+ current: dailymotion = null
257
+ } = apiRef;
254
258
  if (player === null) {
255
259
  return () => {};
256
260
  }
@@ -260,14 +264,6 @@ function useDailymotionPlayer() {
260
264
  setLoaded(true);
261
265
  debug('onPlaybackReady [ID: %s]', videoId);
262
266
  }
263
- function onLoadedMetadata() {
264
- currentMetadata = {
265
- ...currentMetadata,
266
- duration: player.duration
267
- };
268
- setMetadata(currentMetadata);
269
- debug('onLoadedMetadata [ID: %s]', videoId);
270
- }
271
267
  function onDurationChange() {
272
268
  currentMetadata = {
273
269
  ...currentMetadata,
@@ -343,29 +339,27 @@ function useDailymotionPlayer() {
343
339
  setPlayState(currentPlayState);
344
340
  debug('onAdEnd [ID: %s]', videoId);
345
341
  }
346
- player.addEventListener('playback_ready', onPlaybackReady);
347
- player.addEventListener('loadedmetadata', onLoadedMetadata);
348
- player.addEventListener('durationchange', onDurationChange);
349
- player.addEventListener('volumechange', onVolumeChange);
350
- player.addEventListener('play', onPlay);
351
- player.addEventListener('pause', onPause);
352
- player.addEventListener('video_end', onEnd);
353
- player.addEventListener('playing', onPlaying);
354
- player.addEventListener('waiting', onWaiting);
355
- player.addEventListener('ad_start', onAdStart);
356
- player.addEventListener('ad_end', onAdEnd);
342
+ player.on(dailymotion.events.PLAYER_CRITICALPATHREADY, onPlaybackReady);
343
+ player.on(dailymotion.events.VIDEO_DURATIONCHANGE, onDurationChange);
344
+ player.on(dailymotion.events.PLAYER_VOLUMECHANGE, onVolumeChange);
345
+ player.on(dailymotion.events.VIDEO_PLAY, onPlay);
346
+ player.on(dailymotion.events.VIDEO_PAUSE, onPause);
347
+ player.on(dailymotion.events.VIDEO_END, onEnd);
348
+ player.on(dailymotion.events.VIDEO_PLAYING, onPlaying);
349
+ player.on(dailymotion.events.VIDEO_BUFFERING, onWaiting);
350
+ player.on(dailymotion.events.AD_START, onAdStart);
351
+ player.on(dailymotion.events.AD_END, onAdEnd);
357
352
  return () => {
358
- player.removeEventListener('playback_ready', onPlaybackReady);
359
- player.removeEventListener('loadedmetadata', onLoadedMetadata);
360
- player.removeEventListener('durationchange', onDurationChange);
361
- player.removeEventListener('volumechange', onVolumeChange);
362
- player.removeEventListener('play', onPlay);
363
- player.removeEventListener('pause', onPause);
364
- player.removeEventListener('video_end', onEnd);
365
- player.removeEventListener('playing', onPlaying);
366
- player.removeEventListener('waiting', onWaiting);
367
- player.removeEventListener('ad_start', onAdStart);
368
- player.removeEventListener('ad_end', onAdEnd);
353
+ player.off(dailymotion.events.PLAYER_CRITICALPATHREADY, onPlaybackReady);
354
+ player.off(dailymotion.events.VIDEO_DURATIONCHANGE, onDurationChange);
355
+ player.off(dailymotion.events.PLAYER_VOLUMECHANGE, onVolumeChange);
356
+ player.off(dailymotion.events.VIDEO_PLAY, onPlay);
357
+ player.off(dailymotion.events.VIDEO_PAUSE, onPause);
358
+ player.off(dailymotion.events.VIDEO_END, onEnd);
359
+ player.off(dailymotion.events.VIDEO_PLAYING, onPlaying);
360
+ player.off(dailymotion.events.VIDEO_BUFFERING, onWaiting);
361
+ player.off(dailymotion.events.AD_START, onAdStart);
362
+ player.off(dailymotion.events.AD_END, onAdEnd);
369
363
  };
370
364
  }, [playerRef.current, playerReady, videoId, setLoaded, setPlayState, setMetadata, setVolumeState, setMuted]);
371
365
  const play = react.useCallback(() => {
package/dist/es.js CHANGED
@@ -222,24 +222,28 @@ function useDailymotionPlayer() {
222
222
  });
223
223
  debug('Load video [ID: %s]', videoId);
224
224
  } else {
225
- player = dailymotion.createPlayer(element, {
225
+ element.id = `dailymotion-player-${videoId}-${Date.now()}`;
226
+ player = dailymotion.createPlayer(element.id, {
226
227
  video: videoId,
227
228
  width,
228
229
  height,
229
230
  params: playerParams
231
+ }).then(newPlayer => {
232
+ debug('Player ready [ID: %s]', videoId);
233
+ setPlayerReady(true);
234
+ playerRef.current = newPlayer;
230
235
  });
231
236
  debug('Create player [ID: %s]', videoId);
232
237
  }
233
- if (!playerReady) {
234
- setPlayerReady(true);
235
- }
236
- playerRef.current = player;
237
238
  playerElementRef.current = element;
238
239
  }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
239
240
  useEffect(() => {
240
241
  const {
241
242
  current: player = null
242
243
  } = playerRef;
244
+ const {
245
+ current: dailymotion = null
246
+ } = apiRef;
243
247
  if (player === null) {
244
248
  return () => {};
245
249
  }
@@ -249,14 +253,6 @@ function useDailymotionPlayer() {
249
253
  setLoaded(true);
250
254
  debug('onPlaybackReady [ID: %s]', videoId);
251
255
  }
252
- function onLoadedMetadata() {
253
- currentMetadata = {
254
- ...currentMetadata,
255
- duration: player.duration
256
- };
257
- setMetadata(currentMetadata);
258
- debug('onLoadedMetadata [ID: %s]', videoId);
259
- }
260
256
  function onDurationChange() {
261
257
  currentMetadata = {
262
258
  ...currentMetadata,
@@ -332,29 +328,27 @@ function useDailymotionPlayer() {
332
328
  setPlayState(currentPlayState);
333
329
  debug('onAdEnd [ID: %s]', videoId);
334
330
  }
335
- player.addEventListener('playback_ready', onPlaybackReady);
336
- player.addEventListener('loadedmetadata', onLoadedMetadata);
337
- player.addEventListener('durationchange', onDurationChange);
338
- player.addEventListener('volumechange', onVolumeChange);
339
- player.addEventListener('play', onPlay);
340
- player.addEventListener('pause', onPause);
341
- player.addEventListener('video_end', onEnd);
342
- player.addEventListener('playing', onPlaying);
343
- player.addEventListener('waiting', onWaiting);
344
- player.addEventListener('ad_start', onAdStart);
345
- player.addEventListener('ad_end', onAdEnd);
331
+ player.on(dailymotion.events.PLAYER_CRITICALPATHREADY, onPlaybackReady);
332
+ player.on(dailymotion.events.VIDEO_DURATIONCHANGE, onDurationChange);
333
+ player.on(dailymotion.events.PLAYER_VOLUMECHANGE, onVolumeChange);
334
+ player.on(dailymotion.events.VIDEO_PLAY, onPlay);
335
+ player.on(dailymotion.events.VIDEO_PAUSE, onPause);
336
+ player.on(dailymotion.events.VIDEO_END, onEnd);
337
+ player.on(dailymotion.events.VIDEO_PLAYING, onPlaying);
338
+ player.on(dailymotion.events.VIDEO_BUFFERING, onWaiting);
339
+ player.on(dailymotion.events.AD_START, onAdStart);
340
+ player.on(dailymotion.events.AD_END, onAdEnd);
346
341
  return () => {
347
- player.removeEventListener('playback_ready', onPlaybackReady);
348
- player.removeEventListener('loadedmetadata', onLoadedMetadata);
349
- player.removeEventListener('durationchange', onDurationChange);
350
- player.removeEventListener('volumechange', onVolumeChange);
351
- player.removeEventListener('play', onPlay);
352
- player.removeEventListener('pause', onPause);
353
- player.removeEventListener('video_end', onEnd);
354
- player.removeEventListener('playing', onPlaying);
355
- player.removeEventListener('waiting', onWaiting);
356
- player.removeEventListener('ad_start', onAdStart);
357
- player.removeEventListener('ad_end', onAdEnd);
342
+ player.off(dailymotion.events.PLAYER_CRITICALPATHREADY, onPlaybackReady);
343
+ player.off(dailymotion.events.VIDEO_DURATIONCHANGE, onDurationChange);
344
+ player.off(dailymotion.events.PLAYER_VOLUMECHANGE, onVolumeChange);
345
+ player.off(dailymotion.events.VIDEO_PLAY, onPlay);
346
+ player.off(dailymotion.events.VIDEO_PAUSE, onPause);
347
+ player.off(dailymotion.events.VIDEO_END, onEnd);
348
+ player.off(dailymotion.events.VIDEO_PLAYING, onPlaying);
349
+ player.off(dailymotion.events.VIDEO_BUFFERING, onWaiting);
350
+ player.off(dailymotion.events.AD_START, onAdStart);
351
+ player.off(dailymotion.events.AD_END, onAdEnd);
358
352
  };
359
353
  }, [playerRef.current, playerReady, videoId, setLoaded, setPlayState, setMetadata, setVolumeState, setMuted]);
360
354
  const play = useCallback(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@folklore/hooks",
3
- "version": "0.0.48",
3
+ "version": "0.0.50",
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": "c78aebfb30991e558a5e848d45c50da0296cd293",
52
+ "gitHead": "60293e0c7b0480cf8235095faa7313c5222f5f02",
53
53
  "dependencies": {
54
54
  "@folklore/events": "^0.0.5",
55
55
  "@folklore/services": "^0.1.40",