@folklore/hooks 0.0.21 → 0.0.24

package/dist/cjs.js

@@ -192,6 +192,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     var canceled = false;
 
     if (!apiLoaded && videoId !== null) {
+      debug$3('Load API');
       services.loadDailymotion().then(function (api) {
         if (!canceled) {
           apiRef.current = api;
@@ -232,9 +233,10 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     var player = currentPlayer;
 
     if (player !== null) {
-      player.load(id, {
+      player.load(videoId, {
         params: playerParams
       });
+      debug$3('Load video [ID: %s]', videoId);
     } else {
       player = DM.player(element, {
         video: videoId,
@@ -242,6 +244,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         height: height,
         params: playerParams
       });
+      debug$3('Create player [ID: %s]', videoId);
     }
 
     if (!playerReady) {
@@ -264,6 +267,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
 
     function onPlaybackReady() {
       setLoaded(true);
+      debug$3('onPlaybackReady [ID: %s]', videoId);
     }
 
     function onLoadedMetadata() {
@@ -271,6 +275,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         duration: player.duration
       });
       setMetadata(currentMetadata);
+      debug$3('onLoadedMetadata [ID: %s]', videoId);
     }
 
     function onDurationChange() {
@@ -278,11 +283,13 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         duration: player.duration
       });
       setMetadata(currentMetadata);
+      debug$3('onDurationChange [ID: %s]', videoId);
     }
 
     function onVolumeChange() {
       setMuted(player.muted);
       setVolumeState(player.volume);
+      debug$3('onVolumeChange [ID: %s]', videoId);
     }
 
     function onPlay() {
@@ -292,6 +299,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         ended: false
       });
       setPlayState(currentPlayState);
+      debug$3('onPlay [ID: %s]', videoId);
     }
 
     function onPause() {
@@ -301,6 +309,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         ended: false
       });
       setPlayState(currentPlayState);
+      debug$3('onPause [ID: %s]', videoId);
     }
 
     function onEnd() {
@@ -310,6 +319,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         ended: true
       });
       setPlayState(currentPlayState);
+      debug$3('onEnd [ID: %s]', videoId);
     }
 
     function onPlaying() {
@@ -317,6 +327,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         buffering: false
       });
       setPlayState(currentPlayState);
+      debug$3('onPlaying [ID: %s]', videoId);
     }
 
     function onWaiting() {
@@ -324,6 +335,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         buffering: true
       });
       setPlayState(currentPlayState);
+      debug$3('onWaiting [ID: %s]', videoId);
     }
 
     function onAdStart() {
@@ -331,6 +343,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         adPlaying: true
       });
       setPlayState(currentPlayState);
+      debug$3('onAdStart [ID: %s]', videoId);
     }
 
     function onAdEnd() {
@@ -338,6 +351,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         adPlaying: false
       });
       setPlayState(currentPlayState);
+      debug$3('onAdEnd [ID: %s]', videoId);
     }
 
     player.addEventListener('playback_ready', onPlaybackReady);
@@ -413,33 +427,19 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
   }, metadata), playState);
 };
 
-var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
+var documentEventsManager = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
 
-var useDocumentEvent = function useDocumentEvent(event, callback) {
-  react.useEffect(function () {
-    if (eventsManager$1 !== null && callback !== null) {
-      eventsManager$1.subscribe(event, callback);
-    }
-
-    return function () {
-      if (eventsManager$1 !== null && callback !== null) {
-        eventsManager$1.unsubscribe(event, callback);
-      }
-    };
-  }, [event, callback]);
-};
-
-var eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
+var windowEventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
 
 var useWindowEvent = function useWindowEvent(event, callback) {
   react.useEffect(function () {
-    if (eventsManager !== null && callback !== null) {
-      eventsManager.subscribe(event, callback);
+    if (windowEventsManager !== null && callback !== null) {
+      windowEventsManager.subscribe(event, callback);
     }
 
     return function () {
-      if (eventsManager !== null && callback !== null) {
-        eventsManager.unsubscribe(event, callback);
+      if (windowEventsManager !== null && callback !== null) {
+        windowEventsManager.unsubscribe(event, callback);
       }
     };
   }, [event, callback]);
@@ -994,6 +994,7 @@ function useYouTubePlayer(id) {
     var canceled = false;
 
     if (!apiLoaded && videoId !== null) {
+      debug$1('Load API');
       services.loadYouTube().then(function (api) {
         if (!canceled) {
           apiRef.current = api;
@@ -1266,6 +1267,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
     var canceled = false;
 
     if (!apiLoaded && id !== null) {
+      debug('Load API');
       services.loadVimeo().then(function (api) {
         if (!canceled) {
           apiRef.current = api;
@@ -1435,7 +1437,8 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
 
     var onVolumeChange = function onVolumeChange(_ref4) {
       var newVolume = _ref4.volume;
-      return setVolumeState(newVolume);
+      setVolumeState(newVolume);
+      debug('onVolumeChange [ID: %s]', videoId);
     };
 
     var onEnded = function onEnded() {
@@ -1445,6 +1448,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
         ended: true,
         buffering: false
       });
+      debug('onEnded [ID: %s]', videoId);
     };
 
     var onBufferStart = function onBufferStart() {
@@ -1614,9 +1618,97 @@ function useVideoPlayer(params) {
   return player;
 }
 
+var getWindowScroll = function getWindowScroll() {
+  return {
+    x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
+    y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
+  };
+};
+
+var currentScroll = getWindowScroll();
+
+var useWindowScroll = function useWindowScroll() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _opts$onChange = opts.onChange,
+      onChange = _opts$onChange === void 0 ? null : _opts$onChange;
+
+  var _useState = react.useState(currentScroll),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      scroll = _useState2[0],
+      setScroll = _useState2[1];
+
+  var updateScroll = react.useCallback(function () {
+    var newScroll = getWindowScroll();
+
+    if (currentScroll.x !== newScroll.x || currentScroll.y !== newScroll.y) {
+      currentScroll.x = newScroll.x;
+      currentScroll.y = newScroll.y;
+      setScroll(newScroll);
+      return newScroll;
+    }
+
+    return null;
+  }, [setScroll]);
+  var onScroll = react.useCallback(function () {
+    var newScroll = updateScroll();
+
+    if (newScroll !== null && onChange !== null) {
+      onChange(newScroll);
+    }
+  }, [updateScroll, onChange]);
+  useWindowEvent('scroll', onScroll);
+  react.useEffect(function () {
+    onScroll();
+  }, []);
+  return scroll;
+};
+
+var getWindowSize = function getWindowSize() {
+  return {
+    width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+  };
+};
+var currentSize = getWindowSize();
+
+function useWindowSize() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? null : _ref$onChange;
+
+  var _useState = react.useState(currentSize),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      size = _useState2[0],
+      setSize = _useState2[1];
+
+  var updateSize = react.useCallback(function () {
+    var newSize = getWindowSize();
+
+    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+      currentSize = newSize;
+      setSize(newSize);
+      return newSize;
+    }
+
+    return null;
+  }, [setSize]);
+  var onResize = react.useCallback(function () {
+    var newSize = updateSize();
+
+    if (newSize !== null && onChange !== null) {
+      onChange(newSize);
+    }
+  }, [onChange]);
+  useWindowEvent('resize', onResize);
+  react.useEffect(function () {
+    onResize();
+  }, []);
+  return size;
+}
+
+exports.documentEventsManager = documentEventsManager;
 exports.getObserver = getObserver;
 exports.useDailymotionPlayer = useDailymotionPlayer;
-exports.useDocumentEvent = useDocumentEvent;
 exports.useIntersectionObserver = useIntersectionObserver;
 exports.useKeyboard = useKeyboard;
 exports.useNativeVideoPlayer = useNativeVideoPlayer;
@@ -1625,5 +1717,7 @@ exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
 exports.useVideoPlayer = useVideoPlayer;
 exports.useVimeoPlayer = useVimeoPlayer;
-exports.useWindowEvent = useWindowEvent;
+exports.useWindowScroll = useWindowScroll;
+exports.useWindowSize = useWindowSize;
 exports.useYouTubePlayer = useYouTubePlayer;
+exports.windowEventsManager = windowEventsManager;

package/dist/es.js

@@ -180,6 +180,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     var canceled = false;
 
     if (!apiLoaded && videoId !== null) {
+      debug$3('Load API');
       loadDailymotion().then(function (api) {
         if (!canceled) {
           apiRef.current = api;
@@ -220,9 +221,10 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     var player = currentPlayer;
 
     if (player !== null) {
-      player.load(id, {
+      player.load(videoId, {
         params: playerParams
       });
+      debug$3('Load video [ID: %s]', videoId);
     } else {
       player = DM.player(element, {
         video: videoId,
@@ -230,6 +232,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         height: height,
         params: playerParams
       });
+      debug$3('Create player [ID: %s]', videoId);
     }
 
     if (!playerReady) {
@@ -252,6 +255,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
 
     function onPlaybackReady() {
       setLoaded(true);
+      debug$3('onPlaybackReady [ID: %s]', videoId);
     }
 
     function onLoadedMetadata() {
@@ -259,6 +263,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         duration: player.duration
       });
       setMetadata(currentMetadata);
+      debug$3('onLoadedMetadata [ID: %s]', videoId);
     }
 
     function onDurationChange() {
@@ -266,11 +271,13 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         duration: player.duration
       });
       setMetadata(currentMetadata);
+      debug$3('onDurationChange [ID: %s]', videoId);
     }
 
     function onVolumeChange() {
       setMuted(player.muted);
       setVolumeState(player.volume);
+      debug$3('onVolumeChange [ID: %s]', videoId);
     }
 
     function onPlay() {
@@ -280,6 +287,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         ended: false
       });
       setPlayState(currentPlayState);
+      debug$3('onPlay [ID: %s]', videoId);
     }
 
     function onPause() {
@@ -289,6 +297,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         ended: false
       });
       setPlayState(currentPlayState);
+      debug$3('onPause [ID: %s]', videoId);
     }
 
     function onEnd() {
@@ -298,6 +307,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         ended: true
       });
       setPlayState(currentPlayState);
+      debug$3('onEnd [ID: %s]', videoId);
     }
 
     function onPlaying() {
@@ -305,6 +315,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         buffering: false
       });
       setPlayState(currentPlayState);
+      debug$3('onPlaying [ID: %s]', videoId);
     }
 
     function onWaiting() {
@@ -312,6 +323,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         buffering: true
       });
       setPlayState(currentPlayState);
+      debug$3('onWaiting [ID: %s]', videoId);
     }
 
     function onAdStart() {
@@ -319,6 +331,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         adPlaying: true
       });
       setPlayState(currentPlayState);
+      debug$3('onAdStart [ID: %s]', videoId);
     }
 
     function onAdEnd() {
@@ -326,6 +339,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
         adPlaying: false
       });
       setPlayState(currentPlayState);
+      debug$3('onAdEnd [ID: %s]', videoId);
     }
 
     player.addEventListener('playback_ready', onPlaybackReady);
@@ -401,33 +415,19 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
   }, metadata), playState);
 };
 
-var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
+var documentEventsManager = typeof document !== 'undefined' ? new EventsManager(document) : null;
 
-var useDocumentEvent = function useDocumentEvent(event, callback) {
-  useEffect(function () {
-    if (eventsManager$1 !== null && callback !== null) {
-      eventsManager$1.subscribe(event, callback);
-    }
-
-    return function () {
-      if (eventsManager$1 !== null && callback !== null) {
-        eventsManager$1.unsubscribe(event, callback);
-      }
-    };
-  }, [event, callback]);
-};
-
-var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
+var windowEventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 
 var useWindowEvent = function useWindowEvent(event, callback) {
   useEffect(function () {
-    if (eventsManager !== null && callback !== null) {
-      eventsManager.subscribe(event, callback);
+    if (windowEventsManager !== null && callback !== null) {
+      windowEventsManager.subscribe(event, callback);
     }
 
     return function () {
-      if (eventsManager !== null && callback !== null) {
-        eventsManager.unsubscribe(event, callback);
+      if (windowEventsManager !== null && callback !== null) {
+        windowEventsManager.unsubscribe(event, callback);
       }
     };
   }, [event, callback]);
@@ -982,6 +982,7 @@ function useYouTubePlayer(id) {
     var canceled = false;
 
     if (!apiLoaded && videoId !== null) {
+      debug$1('Load API');
       loadYouTube().then(function (api) {
         if (!canceled) {
           apiRef.current = api;
@@ -1254,6 +1255,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
     var canceled = false;
 
     if (!apiLoaded && id !== null) {
+      debug('Load API');
       loadVimeo().then(function (api) {
         if (!canceled) {
           apiRef.current = api;
@@ -1423,7 +1425,8 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
 
     var onVolumeChange = function onVolumeChange(_ref4) {
       var newVolume = _ref4.volume;
-      return setVolumeState(newVolume);
+      setVolumeState(newVolume);
+      debug('onVolumeChange [ID: %s]', videoId);
     };
 
     var onEnded = function onEnded() {
@@ -1433,6 +1436,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
         ended: true,
         buffering: false
       });
+      debug('onEnded [ID: %s]', videoId);
     };
 
     var onBufferStart = function onBufferStart() {
@@ -1602,4 +1606,92 @@ function useVideoPlayer(params) {
   return player;
 }
 
-export { getObserver, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowEvent, useYouTubePlayer };
+var getWindowScroll = function getWindowScroll() {
+  return {
+    x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
+    y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
+  };
+};
+
+var currentScroll = getWindowScroll();
+
+var useWindowScroll = function useWindowScroll() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _opts$onChange = opts.onChange,
+      onChange = _opts$onChange === void 0 ? null : _opts$onChange;
+
+  var _useState = useState(currentScroll),
+      _useState2 = _slicedToArray(_useState, 2),
+      scroll = _useState2[0],
+      setScroll = _useState2[1];
+
+  var updateScroll = useCallback(function () {
+    var newScroll = getWindowScroll();
+
+    if (currentScroll.x !== newScroll.x || currentScroll.y !== newScroll.y) {
+      currentScroll.x = newScroll.x;
+      currentScroll.y = newScroll.y;
+      setScroll(newScroll);
+      return newScroll;
+    }
+
+    return null;
+  }, [setScroll]);
+  var onScroll = useCallback(function () {
+    var newScroll = updateScroll();
+
+    if (newScroll !== null && onChange !== null) {
+      onChange(newScroll);
+    }
+  }, [updateScroll, onChange]);
+  useWindowEvent('scroll', onScroll);
+  useEffect(function () {
+    onScroll();
+  }, []);
+  return scroll;
+};
+
+var getWindowSize = function getWindowSize() {
+  return {
+    width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+  };
+};
+var currentSize = getWindowSize();
+
+function useWindowSize() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? null : _ref$onChange;
+
+  var _useState = useState(currentSize),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setSize = _useState2[1];
+
+  var updateSize = useCallback(function () {
+    var newSize = getWindowSize();
+
+    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+      currentSize = newSize;
+      setSize(newSize);
+      return newSize;
+    }
+
+    return null;
+  }, [setSize]);
+  var onResize = useCallback(function () {
+    var newSize = updateSize();
+
+    if (newSize !== null && onChange !== null) {
+      onChange(newSize);
+    }
+  }, [onChange]);
+  useWindowEvent('resize', onResize);
+  useEffect(function () {
+    onResize();
+  }, []);
+  return size;
+}
+
+export { documentEventsManager, getObserver, useDailymotionPlayer, useIntersectionObserver, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowScroll, useWindowSize, useYouTubePlayer, windowEventsManager };

package/package.json

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