@folklore/hooks 0.0.18 → 0.0.21

package/dist/cjs.js

@@ -148,12 +148,14 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
       setLoaded = _useState6[1];
 
   var apiRef = react.useRef(typeof window.DM !== 'undefined' ? window.DM : null);
-  var elementRef = react.useRef(null);
-  var playerRef = react.useRef(null);
   var ready = apiLoaded && playerReady;
   var videoId = react.useMemo(function () {
     return getVideoId(id);
   }, [id]);
+  var elementRef = react.useRef(null);
+  var playerRef = react.useRef(null);
+  var playerElementRef = react.useRef(elementRef.current);
+  var elementHasChanged = elementRef.current !== playerElementRef.current;
 
   var _useState7 = react.useState(initialMuted),
       _useState8 = _slicedToArray__default["default"](_useState7, 2),
@@ -240,13 +242,15 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         height: height,
         params: playerParams
       });
-      playerRef.current = player;
     }
 
     if (!playerReady) {
       setPlayerReady(true);
     }
-  }, [apiLoaded, elementRef.current, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
+
+    playerRef.current = player;
+    playerElementRef.current = element;
+  }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
   react.useEffect(function () {
     var _playerRef$current2 = playerRef.current,
         player = _playerRef$current2 === void 0 ? null : _playerRef$current2;
@@ -935,7 +939,7 @@ function useYouTubePlayer(id) {
       _ref$getVideoId = _ref.getVideoId,
       getVideoId = _ref$getVideoId === void 0 ? function (url) {
     if (url === null || url.match(/^https?:/) === null) {
-      return null;
+      return url;
     }
 
     var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
@@ -952,6 +956,7 @@ function useYouTubePlayer(id) {
   var elementRef = react.useRef(null);
   var playerRef = react.useRef(null);
   var playerElementRef = react.useRef(elementRef.current);
+  var elementHasChanged = elementRef.current !== playerElementRef.current;
   var videoId = react.useMemo(function () {
     return getVideoId(id);
   }, [id]);
@@ -1054,7 +1059,7 @@ function useYouTubePlayer(id) {
       debug$1('iFrame switched');
       destroyPlayer();
     }
-  }); // Create player
+  }, [elementHasChanged]); // Create player
 
   react.useEffect(function () {
     var _apiRef$current = apiRef.current,
@@ -1071,12 +1076,11 @@ function useYouTubePlayer(id) {
 
     var player = currentPlayer;
 
-    if (player !== null) {
+    if (player !== null && typeof player.loadVideoById !== 'undefined') {
       debug$1('Switch video [ID: %s]', videoId);
       player.loadVideoById(videoId);
     } else {
       debug$1('Create player [ID: %s]', videoId);
-      var iframe = elementRef.current;
 
       var onReady = function onReady(_ref2) {
         var target = _ref2.target;
@@ -1122,7 +1126,7 @@ function useYouTubePlayer(id) {
         debug$1('onStateChange %s [ID: %s]', stateLabel, videoId);
       };
 
-      player = new YT.Player(iframe, {
+      player = new YT.Player(element, {
         videoId: videoId,
         playerVars: {
           controls: controls,
@@ -1138,11 +1142,11 @@ function useYouTubePlayer(id) {
           onStateChange: onStateChange
         }
       });
-      playerElementRef.current = iframe;
     }
 
     playerRef.current = player;
-  }, [apiLoaded, videoId, elementRef.current, setPlayState, setReady, setMetadata, destroyPlayer]);
+    playerElementRef.current = element;
+  }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
   var playing = playState.playing;
   var getCurrentTime = react.useCallback(function (p) {
     return p.getCurrentTime();
@@ -1217,6 +1221,8 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
   var apiRef = react.useRef(null);
   var elementRef = react.useRef(null);
   var playerRef = react.useRef(null);
+  var playerElementRef = react.useRef(elementRef.current);
+  var elementHasChanged = elementRef.current !== playerElementRef.current;
   var videoId = react.useMemo(function () {
     return getVideoId(id);
   }, [id]);
@@ -1314,7 +1320,6 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       playerRef.current = null;
     }
   }, []);
-  var playerElementRef = react.useRef(elementRef.current);
   react.useEffect(function () {
     var currentPlayer = playerRef.current;
 
@@ -1322,7 +1327,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       debug('iFrame switched');
       destroyVideo();
     }
-  }); // Create player
+  }, [elementHasChanged]); // Create player
 
   react.useEffect(function () {
     var _apiRef$current = apiRef.current,
@@ -1355,7 +1360,6 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       }).catch(function (e) {
         debug('ERROR: %o', e);
       });
-      playerElementRef.current = element;
     } else {
       debug('Load video [ID: %s]', videoId);
       player.loadVideo(videoId).catch(function (e) {
@@ -1364,7 +1368,8 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
     }
 
     playerRef.current = player;
-  }, [apiLoaded, videoId, elementRef.current, setReady, destroyVideo, setLoaded]); // Bind player events
+    playerElementRef.current = element;
+  }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events
 
   react.useEffect(function () {
     var player = playerRef.current;

package/dist/es.js

@@ -136,12 +136,14 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
       setLoaded = _useState6[1];
 
   var apiRef = useRef(typeof window.DM !== 'undefined' ? window.DM : null);
-  var elementRef = useRef(null);
-  var playerRef = useRef(null);
   var ready = apiLoaded && playerReady;
   var videoId = useMemo(function () {
     return getVideoId(id);
   }, [id]);
+  var elementRef = useRef(null);
+  var playerRef = useRef(null);
+  var playerElementRef = useRef(elementRef.current);
+  var elementHasChanged = elementRef.current !== playerElementRef.current;
 
   var _useState7 = useState(initialMuted),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -228,13 +230,15 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         height: height,
         params: playerParams
       });
-      playerRef.current = player;
     }
 
     if (!playerReady) {
       setPlayerReady(true);
     }
-  }, [apiLoaded, elementRef.current, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
+
+    playerRef.current = player;
+    playerElementRef.current = element;
+  }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
   useEffect(function () {
     var _playerRef$current2 = playerRef.current,
         player = _playerRef$current2 === void 0 ? null : _playerRef$current2;
@@ -923,7 +927,7 @@ function useYouTubePlayer(id) {
       _ref$getVideoId = _ref.getVideoId,
       getVideoId = _ref$getVideoId === void 0 ? function (url) {
     if (url === null || url.match(/^https?:/) === null) {
-      return null;
+      return url;
     }
 
     var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
@@ -940,6 +944,7 @@ function useYouTubePlayer(id) {
   var elementRef = useRef(null);
   var playerRef = useRef(null);
   var playerElementRef = useRef(elementRef.current);
+  var elementHasChanged = elementRef.current !== playerElementRef.current;
   var videoId = useMemo(function () {
     return getVideoId(id);
   }, [id]);
@@ -1042,7 +1047,7 @@ function useYouTubePlayer(id) {
       debug$1('iFrame switched');
       destroyPlayer();
     }
-  }); // Create player
+  }, [elementHasChanged]); // Create player
 
   useEffect(function () {
     var _apiRef$current = apiRef.current,
@@ -1059,12 +1064,11 @@ function useYouTubePlayer(id) {
 
     var player = currentPlayer;
 
-    if (player !== null) {
+    if (player !== null && typeof player.loadVideoById !== 'undefined') {
       debug$1('Switch video [ID: %s]', videoId);
       player.loadVideoById(videoId);
     } else {
       debug$1('Create player [ID: %s]', videoId);
-      var iframe = elementRef.current;
 
       var onReady = function onReady(_ref2) {
         var target = _ref2.target;
@@ -1110,7 +1114,7 @@ function useYouTubePlayer(id) {
         debug$1('onStateChange %s [ID: %s]', stateLabel, videoId);
       };
 
-      player = new YT.Player(iframe, {
+      player = new YT.Player(element, {
         videoId: videoId,
         playerVars: {
           controls: controls,
@@ -1126,11 +1130,11 @@ function useYouTubePlayer(id) {
           onStateChange: onStateChange
         }
       });
-      playerElementRef.current = iframe;
     }
 
     playerRef.current = player;
-  }, [apiLoaded, videoId, elementRef.current, setPlayState, setReady, setMetadata, destroyPlayer]);
+    playerElementRef.current = element;
+  }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
   var playing = playState.playing;
   var getCurrentTime = useCallback(function (p) {
     return p.getCurrentTime();
@@ -1205,6 +1209,8 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
   var apiRef = useRef(null);
   var elementRef = useRef(null);
   var playerRef = useRef(null);
+  var playerElementRef = useRef(elementRef.current);
+  var elementHasChanged = elementRef.current !== playerElementRef.current;
   var videoId = useMemo(function () {
     return getVideoId(id);
   }, [id]);
@@ -1302,7 +1308,6 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       playerRef.current = null;
     }
   }, []);
-  var playerElementRef = useRef(elementRef.current);
   useEffect(function () {
     var currentPlayer = playerRef.current;
 
@@ -1310,7 +1315,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       debug('iFrame switched');
       destroyVideo();
     }
-  }); // Create player
+  }, [elementHasChanged]); // Create player
 
   useEffect(function () {
     var _apiRef$current = apiRef.current,
@@ -1343,7 +1348,6 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       }).catch(function (e) {
         debug('ERROR: %o', e);
       });
-      playerElementRef.current = element;
     } else {
       debug('Load video [ID: %s]', videoId);
       player.loadVideo(videoId).catch(function (e) {
@@ -1352,7 +1356,8 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
     }
 
     playerRef.current = player;
-  }, [apiLoaded, videoId, elementRef.current, setReady, destroyVideo, setLoaded]); // Bind player events
+    playerElementRef.current = element;
+  }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events
 
   useEffect(function () {
     var player = playerRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.18",
+    "version": "0.0.21",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -48,7 +48,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f98daae27869fa6aaec9f26a4c2f6fc4310b8ff3",
+    "gitHead": "6347817aea21fb3239a7a59dcac8af24f1228179",
     "dependencies": {
         "@folklore/events": "^0.0.3",
         "@folklore/services": "^0.1.36",