@folklore/hooks 0.0.30 → 0.0.32

package/dist/cjs.js

@@ -30,32 +30,26 @@ function useCounter(desiredValue, _ref) {
     let canceled = false;
     const startValue = currentValue;
     const delta = desiredValue - startValue;
-
     function loop() {
       if (canceled) {
         return;
       }
-
       const currentTime = Date.now();
       const elapsedTime = currentTime - startTime;
       const progress = Math.min(elapsedTime / duration, 1);
       const newValue = Math.round(startValue + progress * delta);
       setCurrentValue(newValue);
-
       if (newValue !== desiredValue) {
         animationFrame = raf__default["default"](loop);
       }
     }
-
     if (delta !== 0) {
       duration = Math.min(maxDuration, Math.abs(delta) * speed * 1000);
       startTime = Date.now();
       animationFrame = raf__default["default"](loop);
     }
-
     return () => {
       canceled = true;
-
       if (animationFrame !== null) {
         raf__default["default"].cancel(animationFrame);
       }
@@ -76,36 +70,29 @@ function usePlayerCurrentTime(player) {
   const realCurrentTime = react.useRef(currentTime);
   const lastIdRef = react.useRef(id);
   const idChanged = lastIdRef.current !== id;
-
   if (idChanged) {
     realCurrentTime.current = 0;
     lastIdRef.current = id;
-  } // Check time update
-
+  }
 
+  // Check time update
   react.useEffect(() => {
     if (disabled || player === null) {
       return () => {};
     }
-
     let canceled = false;
-
     const updateTime = time => {
       if (canceled) {
         return;
       }
-
       realCurrentTime.current = time;
       setCurrentTime(time);
-
       if (customOnUpdate !== null) {
         customOnUpdate(time);
       }
     };
-
     const interval = setInterval(() => {
       const time = getCurrentTime(player);
-
       if (typeof time.then !== 'undefined') {
         time.then(updateTime);
       } else {
@@ -122,7 +109,6 @@ function usePlayerCurrentTime(player) {
 
 const noPlayerError$1 = new Error('No player');
 const debug$3 = createDebug__default["default"]('folklore:video:dailymotion');
-
 const useDailymotionPlayer = function () {
   let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -145,15 +131,14 @@ const useDailymotionPlayer = function () {
       if (url === null || url.match(/^https?:/) === null) {
         return url;
       }
-
       const match = url.match(/\/video\/([^/?]+)/);
       return match !== null ? match[1] : null;
     }
   } = params;
-  const [apiLoaded, setApiLoaded] = react.useState(typeof window.DM !== 'undefined');
+  const [apiLoaded, setApiLoaded] = react.useState(typeof window !== 'undefined' && typeof window.DM !== 'undefined');
   const [playerReady, setPlayerReady] = react.useState(false);
   const [loaded, setLoaded] = react.useState(false);
-  const apiRef = react.useRef(typeof window.DM !== 'undefined' ? window.DM : null);
+  const apiRef = react.useRef(typeof window !== 'undefined' && typeof window.DM !== 'undefined' ? window.DM : null);
   const ready = apiLoaded && playerReady;
   const videoId = react.useMemo(() => getVideoId(id), [id]);
   const elementRef = react.useRef(null);
@@ -173,11 +158,11 @@ const useDailymotionPlayer = function () {
     width,
     height,
     duration
-  }); // Load SDK
+  });
 
+  // Load SDK
   react.useEffect(() => {
     let canceled = false;
-
     if (!apiLoaded && videoId !== null) {
       debug$3('Load API');
       services.loadDailymotion().then(api => {
@@ -188,12 +173,12 @@ const useDailymotionPlayer = function () {
         }
       });
     }
-
     return () => {
       canceled = true;
     };
-  }, [videoId, apiLoaded, setApiLoaded]); // Create or update player
+  }, [videoId, apiLoaded, setApiLoaded]);
 
+  // Create or update player
   react.useEffect(() => {
     const {
       current: DM = null
@@ -204,11 +189,9 @@ const useDailymotionPlayer = function () {
     const {
       current: element = null
     } = elementRef;
-
     if (!apiLoaded || videoId === null || element === null) {
       return;
     }
-
     const playerParams = {
       'autoplay-d': autoplay,
       // muted,
@@ -221,7 +204,6 @@ const useDailymotionPlayer = function () {
       'ui-start-screen-info': uiStartScreenInfo
     };
     let player = currentPlayer;
-
     if (player !== null) {
       player.load(videoId, {
         params: playerParams
@@ -236,11 +218,9 @@ const useDailymotionPlayer = function () {
       });
       debug$3('Create player [ID: %s]', videoId);
     }
-
     if (!playerReady) {
       setPlayerReady(true);
     }
-
     playerRef.current = player;
     playerElementRef.current = element;
   }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
@@ -248,43 +228,39 @@ const useDailymotionPlayer = function () {
     const {
       current: player = null
     } = playerRef;
-
     if (player === null) {
       return () => {};
     }
-
     let currentPlayState = playState;
     let currentMetadata = metadata;
-
     function onPlaybackReady() {
       setLoaded(true);
       debug$3('onPlaybackReady [ID: %s]', videoId);
     }
-
     function onLoadedMetadata() {
-      currentMetadata = { ...currentMetadata,
+      currentMetadata = {
+        ...currentMetadata,
         duration: player.duration
       };
       setMetadata(currentMetadata);
       debug$3('onLoadedMetadata [ID: %s]', videoId);
     }
-
     function onDurationChange() {
-      currentMetadata = { ...currentMetadata,
+      currentMetadata = {
+        ...currentMetadata,
         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() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         playing: true,
         paused: false,
         ended: false
@@ -292,9 +268,9 @@ const useDailymotionPlayer = function () {
       setPlayState(currentPlayState);
       debug$3('onPlay [ID: %s]', videoId);
     }
-
     function onPause() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         playing: false,
         paused: true,
         ended: false
@@ -302,9 +278,9 @@ const useDailymotionPlayer = function () {
       setPlayState(currentPlayState);
       debug$3('onPause [ID: %s]', videoId);
     }
-
     function onEnd() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         playing: false,
         paused: false,
         ended: true
@@ -312,39 +288,38 @@ const useDailymotionPlayer = function () {
       setPlayState(currentPlayState);
       debug$3('onEnd [ID: %s]', videoId);
     }
-
     function onPlaying() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         buffering: false
       };
       setPlayState(currentPlayState);
       debug$3('onPlaying [ID: %s]', videoId);
     }
-
     function onWaiting() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         buffering: true
       };
       setPlayState(currentPlayState);
       debug$3('onWaiting [ID: %s]', videoId);
     }
-
     function onAdStart() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         adPlaying: true
       };
       setPlayState(currentPlayState);
       debug$3('onAdStart [ID: %s]', videoId);
     }
-
     function onAdEnd() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         adPlaying: false
       };
       setPlayState(currentPlayState);
       debug$3('onAdEnd [ID: %s]', videoId);
     }
-
     player.addEventListener('playback_ready', onPlaybackReady);
     player.addEventListener('loadedmetadata', onLoadedMetadata);
     player.addEventListener('durationchange', onDurationChange);
@@ -435,13 +410,11 @@ const useDailymotionPlayer = function () {
 };
 
 const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
-
 const useDocumentEvent = (event, callback) => {
   react.useEffect(() => {
     if (eventsManager$1 !== null && callback !== null) {
       eventsManager$1.subscribe(event, callback);
     }
-
     return () => {
       if (eventsManager$1 !== null && callback !== null) {
         eventsManager$1.unsubscribe(event, callback);
@@ -451,13 +424,11 @@ const useDocumentEvent = (event, callback) => {
 };
 
 const eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
-
 const useWindowEvent = (event, callback) => {
   react.useEffect(() => {
     if (eventsManager !== null && callback !== null) {
       eventsManager.subscribe(event, callback);
     }
-
     return () => {
       if (eventsManager !== null && callback !== null) {
         eventsManager.unsubscribe(event, callback);
@@ -473,13 +444,11 @@ function useKeyboard() {
       key
     } = event;
     let callback = null;
-
     if (typeof keyMap === 'function') {
       callback = keyMap;
     } else if (typeof keyMap[key] !== 'undefined') {
       callback = typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).down || null;
     }
-
     if (callback !== null) {
       callback(event);
     }
@@ -489,13 +458,11 @@ function useKeyboard() {
       key
     } = event;
     let callback = null;
-
     if (typeof keyMap === 'function') {
       callback = keyMap;
     } else if (typeof keyMap[key] !== 'undefined') {
       callback = typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).up || null;
     }
-
     if (callback !== null) {
       callback(event);
     }
@@ -561,15 +528,13 @@ const useItemsPaginated = function (loader) {
     } = _ref4;
     return pagesItems.concat(pageItems);
   }, []) : null;
-
-  const updateState = update => setState({ ...state,
+  const updateState = update => setState({
+    ...state,
     ...update
   });
-
   const updateFromResponse = function (response) {
     let error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     let reset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
     if (error !== null) {
       updateState({
         loaded: false,
@@ -577,7 +542,6 @@ const useItemsPaginated = function (loader) {
       });
       throw error;
     }
-
     const newPage = getPageFromResponse(response);
     const currentPages = currentPagesRef.current || [];
     const newPages = (reset ? [newPage] : [...currentPages.filter(it => it.page !== newPage.page), newPage]).sort((a, b) => {
@@ -588,23 +552,18 @@ const useItemsPaginated = function (loader) {
         page: bPage = null
       } = b;
       const hasObject = aPage !== null && bPage !== null;
-
       if (hasObject) {
         if (aPage === bPage) {
           return 0;
         }
-
         return aPage > bPage ? 1 : -1;
       }
-
       if (isNumber__default["default"](a) && isNumber__default["default"](b)) {
         if (a === b) {
           return 0;
         }
-
         return a > b ? 1 : -1;
       }
-
       return 0;
     });
     currentPagesRef.current = newPages;
@@ -617,7 +576,6 @@ const useItemsPaginated = function (loader) {
     });
     return newPage;
   };
-
   const getNextPage = () => {
     const allPages = lastPage !== -1 ? Array.call(null, ...Array(lastPage)).map((it, index) => index + 1) : [];
     const currentPages = currentPagesRef.current || [];
@@ -625,7 +583,6 @@ const useItemsPaginated = function (loader) {
     const firstItem = remainingPages.length > 0 ? remainingPages.shift() : null;
     return firstItem !== null ? firstItem : null;
   };
-
   const loadItems = requestPage => {
     updateState({
       loading: true
@@ -634,7 +591,6 @@ const useItemsPaginated = function (loader) {
       if (onLoaded !== null) {
         onLoaded(response);
       }
-
       return response;
     }).catch(error => {
       if (onError !== null) {
@@ -642,35 +598,28 @@ const useItemsPaginated = function (loader) {
       }
     });
   };
-
   const loadPage = pageToLoad => {
     if (loading) {
       return Promise.reject();
     }
-
     const currentPages = currentPagesRef.current || [];
     const foundPage = currentPages.find(it => it.page === pageToLoad) || null;
-
     if (foundPage !== null) {
       return Promise.resolve(foundPage);
     }
-
     return loadItems(pageToLoad);
   };
-
   const loadNextPage = () => {
     if (loading) {
       return Promise.reject();
     }
-
     const nextPage = getNextPage();
     return nextPage !== null ? loadItems(nextPage) : Promise.resolve();
-  }; // Reset all on query change
-
+  };
 
+  // Reset all on query change
   react.useEffect(() => {
     const hadState = lastState.current !== null;
-
     if (hadState) {
       currentPagesRef.current = null;
       updateState({
@@ -685,7 +634,6 @@ const useItemsPaginated = function (loader) {
   react.useEffect(() => {
     const hadState = lastState.current !== null;
     lastState.current = initialState;
-
     if (hadState) {
       currentPagesRef.current = initialState.pages;
       setState(initialState);
@@ -695,14 +643,11 @@ const useItemsPaginated = function (loader) {
     if (loader === null) {
       return () => {};
     }
-
     let loadPromise = null;
     const pageToLoad = initialPages === null && page === null ? 1 : page;
-
     if (pageToLoad !== null) {
       loadPromise = loadItems(pageToLoad);
     }
-
     return () => {
       if (loadPromise !== null) {
         loadPromise.cancel();
@@ -732,7 +677,6 @@ const useItemsPaginated = function (loader) {
 
 const debug$2 = createDebug__default["default"]('folklore:video:native');
 const noPlayerError = new Error('No player');
-
 const useNativeVideoPlayer = function (url) {
   let {
     width = 0,
@@ -772,77 +716,65 @@ const useNativeVideoPlayer = function (url) {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.volume = newVolume;
       return Promise.resolve(newVolume);
     }
-
     return Promise.reject(noPlayerError);
   }, []);
   const mute = react.useCallback(() => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.muted = true;
       return Promise.resolve(true);
     }
-
     return Promise.reject(noPlayerError);
   }, []);
   const unmute = react.useCallback(() => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.muted = false;
       return Promise.resolve(false);
     }
-
     return Promise.reject(noPlayerError);
   }, []);
   const seek = react.useCallback(newTime => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.currentTime = newTime;
       return Promise.resolve(newTime);
     }
-
     return Promise.reject(noPlayerError);
   }, []);
   const setLoop = react.useCallback(newLoop => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.loop = newLoop;
       return Promise.resolve(newLoop);
     }
-
     return Promise.reject(noPlayerError);
-  }, []); // Bind player events
+  }, []);
 
+  // Bind player events
   react.useEffect(() => {
     const {
       current: player
     } = elementRef;
-
     if (player === null) {
       return () => {};
     }
-
     const onCanPlay = () => {
       setLoaded(true);
       debug$2('onCanPlay [URL: %s]', url);
     };
-
     const onMetadataLoaded = () => {
       const newMetadata = {
         duration: player.duration,
@@ -852,7 +784,6 @@ const useNativeVideoPlayer = function (url) {
       setMetadata(newMetadata);
       debug$2('onMetadataLoaded [URL: %s]', url);
     };
-
     const onPlay = () => {
       setPlayState({
         playing: true,
@@ -862,7 +793,6 @@ const useNativeVideoPlayer = function (url) {
       });
       debug$2('onPlay [URL: %s]', url);
     };
-
     const onPause = () => {
       setPlayState({
         playing: false,
@@ -872,7 +802,6 @@ const useNativeVideoPlayer = function (url) {
       });
       debug$2('onPause [URL: %s]', url);
     };
-
     const onEnded = () => {
       setPlayState({
         playing: false,
@@ -882,7 +811,6 @@ const useNativeVideoPlayer = function (url) {
       });
       debug$2('onEnded [URL: %s]', url);
     };
-
     debug$2('Bind events [URL: %s]', url);
     player.addEventListener('canplay', onCanPlay);
     player.addEventListener('metadataloaded', onMetadataLoaded);
@@ -928,39 +856,34 @@ const useNativeVideoPlayer = function (url) {
 };
 
 const observersCache = new Map();
-
 const getOptionsKey = _ref => {
   let {
     root = null,
     rootMargin,
     threshold = null
   } = _ref;
-  return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
+  return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
 };
-
 const createObserver = function (Observer) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let subscribers = [];
-
   const addSubscriber = (element, callback) => {
     const currentSubscriber = subscribers.find(it => it.element === element) || null;
-
     if (currentSubscriber !== null) {
-      return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? { ...it,
+      return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? {
+        ...it,
         callbacks: [...it.callbacks, callback]
       } : it).filter(it => it.callbacks.length > 0);
     }
-
     return [...subscribers, {
       element,
       callbacks: [callback]
     }];
   };
-
-  const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? { ...it,
+  const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? {
+    ...it,
     callbacks: it.callbacks.filter(subCallback => subCallback !== callback)
   } : it).filter(it => it.callbacks.length > 0);
-
   const onUpdate = entries => {
     entries.forEach(entry => {
       subscribers.forEach(_ref2 => {
@@ -968,7 +891,6 @@ const createObserver = function (Observer) {
           element,
           callbacks
         } = _ref2;
-
         if (element === entry.target) {
           callbacks.forEach(callback => {
             callback(entry);
@@ -977,13 +899,10 @@ const createObserver = function (Observer) {
       });
     });
   };
-
   const observer = new Observer(onUpdate, options);
-
   const unsubscribe = function (element) {
     let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     subscribers = removeSubscriber(element, callback);
-
     if (typeof observer.unobserve === 'undefined') {
       observer.disconnect();
       subscribers.forEach(subscriber => {
@@ -991,45 +910,43 @@ const createObserver = function (Observer) {
       });
       return;
     }
-
     const currentSubscriber = subscribers.find(it => it.element === element) || null;
-
     if (currentSubscriber === null) {
       observer.unobserve(element);
     }
   };
-
   const subscribe = (element, callback) => {
     const currentSubscriber = subscribers.find(it => it.element === element) || null;
     subscribers = addSubscriber(element, callback);
-
     if (currentSubscriber === null) {
       observer.observe(element);
     }
   };
-
   return {
     subscribe,
     unsubscribe,
     observer
   };
 };
-
-const getObserver = function (Observer) {
+const getObserver = function () {
+  let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (Observer === null) {
+    return {
+      observer: null,
+      subscribe: () => {},
+      unsubscribe: () => {}
+    };
+  }
   const observerKey = getOptionsKey(options);
-
   if (!observersCache.has(Observer)) {
     observersCache.set(Observer, {});
   }
-
   const observers = observersCache.get(Observer);
-
   if (typeof observers[observerKey] === 'undefined') {
     observers[observerKey] = createObserver(Observer, options);
     observersCache.set(Observer, observers);
   }
-
   return observers[observerKey];
 };
 const useObserver = function (Observer) {
@@ -1050,26 +967,19 @@ const useObserver = function (Observer) {
     const {
       current: nodeElement
     } = nodeRef;
-
     const callback = newEntry => setEntry(newEntry);
-
     let unsubscribe = null;
-
     if (nodeElement !== null) {
       const newOpts = {};
-
       if (root !== null) {
         newOpts.root = root;
       }
-
       if (rootMargin !== null) {
         newOpts.rootMargin = rootMargin;
       }
-
       if (threshold !== null) {
         newOpts.threshold = threshold;
       }
-
       const {
         subscribe,
         unsubscribe: localUnsubscribe
@@ -1077,7 +987,6 @@ const useObserver = function (Observer) {
       unsubscribe = localUnsubscribe;
       subscribe(nodeElement, callback);
     }
-
     currentElement.current = nodeElement;
     return () => {
       if (unsubscribe !== null) {
@@ -1090,10 +999,10 @@ const useObserver = function (Observer) {
     entry
   };
 };
+
 /**
  * Intersection Observer
  */
-
 const defaultThreshold = [0, 1.0];
 const intersectionObserverInitialEntry = {
   target: null,
@@ -1112,17 +1021,17 @@ const useIntersectionObserver = function () {
     threshold = defaultThreshold,
     disabled = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useObserver(IntersectionObserver, {
+  return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
     root,
     rootMargin,
     threshold,
     disabled
   }, intersectionObserverInitialEntry);
 };
+
 /**
  * Resize Observer
  */
-
 const resizeObserverInitialEntry = {
   target: null,
   contentRect: null,
@@ -1133,14 +1042,13 @@ const useResizeObserver = function () {
   let {
     disabled = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useObserver(ResizeObserver, {
+  return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
     disabled
   }, resizeObserverInitialEntry);
 };
 
 const NO_PLAYER_ERROR$1 = new Error('No player');
 const debug$1 = createDebug__default["default"]('folklore:video:youtube');
-
 function useYouTubePlayer(id) {
   let {
     width = 0,
@@ -1156,14 +1064,13 @@ function useYouTubePlayer(id) {
       if (url === null || url.match(/^https?:/) === null) {
         return url;
       }
-
       const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
       const match = url.match(regExp);
       return match && match[7].length === 11 ? match[7] : null;
     }
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const [apiLoaded, setApiLoaded] = react.useState(typeof window.YT !== 'undefined');
-  const apiRef = react.useRef(typeof window.YT !== 'undefined' ? window.YT : null);
+  const [apiLoaded, setApiLoaded] = react.useState(typeof window !== 'undefined' && typeof window.YT !== 'undefined');
+  const apiRef = react.useRef(typeof window !== 'undefined' && typeof window.YT !== 'undefined' ? window.YT : null);
   const elementRef = react.useRef(null);
   const playerRef = react.useRef(null);
   const playerElementRef = react.useRef(elementRef.current);
@@ -1184,7 +1091,6 @@ function useYouTubePlayer(id) {
   });
   react.useEffect(() => {
     let canceled = false;
-
     if (!apiLoaded && videoId !== null) {
       debug$1('Load API');
       services.loadYouTube().then(api => {
@@ -1195,7 +1101,6 @@ function useYouTubePlayer(id) {
         }
       });
     }
-
     return () => {
       canceled = true;
     };
@@ -1217,11 +1122,9 @@ function useYouTubePlayer(id) {
       current: player
     } = playerRef;
     const promise = player !== null && typeof player.setVolume !== 'undefined' ? Promise.resolve(player.setVolume(volume * 100)) : Promise.reject(NO_PLAYER_ERROR$1);
-
     if (customOnVolumeChange) {
       customOnVolumeChange(volume);
     }
-
     return promise;
   }, [customOnVolumeChange]);
   const mute = react.useCallback(() => {
@@ -1253,19 +1156,21 @@ function useYouTubePlayer(id) {
       debug$1('Unset player');
       playerRef.current = null;
     }
-  }, []); // Detect iframe switch and destroy player
+  }, []);
+
+  // Detect iframe switch and destroy player
 
   react.useEffect(() => {
     const {
       current: currentPlayer
     } = playerRef;
-
     if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
       debug$1('iFrame switched');
       destroyPlayer();
     }
-  }, [elementHasChanged]); // Create player
+  }, [elementHasChanged]);
 
+  // Create player
   react.useEffect(() => {
     const {
       current: YT = null
@@ -1276,20 +1181,16 @@ function useYouTubePlayer(id) {
     const {
       current: element = null
     } = elementRef;
-
     if (!apiLoaded || videoId === null || element === null) {
       destroyPlayer();
       return;
     }
-
     let player = currentPlayer;
-
     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);
-
       const onReady = _ref => {
         let {
           target
@@ -1298,16 +1199,14 @@ function useYouTubePlayer(id) {
         playerRef.current = target;
         setReady(true);
         const newDuration = target.getDuration();
-
         if (newDuration !== metadata.duration) {
-          setMetadata({ ...metadata,
+          setMetadata({
+            ...metadata,
             duration: newDuration
           });
         }
-
         debug$1('onReady [ID: %s]', videoId);
       };
-
       const onStateChange = _ref2 => {
         let {
           data: state
@@ -1320,7 +1219,6 @@ function useYouTubePlayer(id) {
         };
         setPlayState(newState);
         let stateLabel = null;
-
         if (newState.playing) {
           stateLabel = 'playing';
         } else if (newState.paused) {
@@ -1334,10 +1232,8 @@ function useYouTubePlayer(id) {
         } else if (state === 0) {
           stateLabel = 'stopped';
         }
-
         debug$1('onStateChange %s [ID: %s]', stateLabel, videoId);
       };
-
       player = new YT.Player(element, {
         videoId,
         playerVars: {
@@ -1355,7 +1251,6 @@ function useYouTubePlayer(id) {
         }
       });
     }
-
     playerRef.current = player;
     playerElementRef.current = element;
   }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
@@ -1391,7 +1286,6 @@ function useYouTubePlayer(id) {
 
 const debug = createDebug__default["default"]('folklore:video:vimeo');
 const NO_PLAYER_ERROR = new Error('No player');
-
 const useVimeoPlayer = function (id) {
   let {
     width = 0,
@@ -1408,7 +1302,6 @@ const useVimeoPlayer = function (id) {
       if (url === null || url.match(/^[0-9]+$/) !== null) {
         return url;
       }
-
       const match = url.match(/\/[0-9]+/);
       return match !== null ? match[1] : null;
     }
@@ -1433,11 +1326,11 @@ const useVimeoPlayer = function (id) {
     width,
     height,
     duration
-  }); // Load SDK
+  });
 
+  // Load SDK
   react.useEffect(() => {
     let canceled = false;
-
     if (!apiLoaded && id !== null) {
       debug('Load API');
       services.loadVimeo().then(api => {
@@ -1448,7 +1341,6 @@ const useVimeoPlayer = function (id) {
         }
       });
     }
-
     return () => {
       canceled = true;
     };
@@ -1499,12 +1391,10 @@ const useVimeoPlayer = function (id) {
     const {
       current: player
     } = playerRef;
-
     if (player !== null) {
       debug('Unload video');
       player.unload();
     }
-
     if (player !== null) {
       debug('Unset video');
       playerRef.current = null;
@@ -1514,13 +1404,13 @@ const useVimeoPlayer = function (id) {
     const {
       current: currentPlayer
     } = playerRef;
-
     if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
       debug('iFrame switched');
       destroyVideo();
     }
-  }, [elementHasChanged]); // Create player
+  }, [elementHasChanged]);
 
+  // Create player
   react.useEffect(() => {
     const {
       current: Player = null
@@ -1531,14 +1421,11 @@ const useVimeoPlayer = function (id) {
     const {
       current: element = null
     } = elementRef;
-
     if (!apiLoaded || videoId === null || element === null) {
       destroyVideo();
       return;
     }
-
     let player = currentPlayer;
-
     if (player === null) {
       debug('Create player [ID: %s]', videoId);
       player = new Player(element, {
@@ -1559,46 +1446,38 @@ const useVimeoPlayer = function (id) {
         debug('ERROR: %o', e);
       });
     }
-
     playerRef.current = player;
     playerElementRef.current = element;
-  }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events
+  }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]);
 
+  // Bind player events
   react.useEffect(() => {
     const {
       current: player
     } = playerRef;
-
     if (player === null) {
       return () => {};
     }
-
     let canceled = false;
-
     const onLoaded = () => {
       Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(_ref => {
         let [newDuration, newWidth, newHeight, newMuted] = _ref;
-
         if (canceled) {
           return;
         }
-
         const newMetadata = {
           duration: newDuration,
           width: newWidth,
           height: newHeight
         };
         setMetadata(newMetadata);
-
         if (newMuted) {
           setVolumeState(0);
         }
-
         setLoaded(true);
       });
       debug('onLoaded [ID: %s]', videoId);
     };
-
     const onPlay = () => {
       setPlayState({
         playing: true,
@@ -1613,7 +1492,6 @@ const useVimeoPlayer = function (id) {
         }
       }).catch(() => {});
     };
-
     const onPause = () => {
       setPlayState({
         playing: false,
@@ -1623,7 +1501,6 @@ const useVimeoPlayer = function (id) {
       });
       debug('onPause [ID: %s]', videoId);
     };
-
     const onVolumeChange = _ref2 => {
       let {
         volume: newVolume
@@ -1631,7 +1508,6 @@ const useVimeoPlayer = function (id) {
       setVolumeState(newVolume);
       debug('onVolumeChange [ID: %s]', videoId);
     };
-
     const onEnded = () => {
       setPlayState({
         playing: false,
@@ -1641,7 +1517,6 @@ const useVimeoPlayer = function (id) {
       });
       debug('onEnded [ID: %s]', videoId);
     };
-
     const onBufferStart = () => {
       setPlayState({
         playing: true,
@@ -1651,7 +1526,6 @@ const useVimeoPlayer = function (id) {
       });
       debug('onBufferStart [ID: %s]', videoId);
     };
-
     const onBufferEnded = () => {
       setPlayState({
         playing: true,
@@ -1661,7 +1535,6 @@ const useVimeoPlayer = function (id) {
       });
       debug('onBufferStart [ID: %s]', videoId);
     };
-
     debug('Bind events [ID: %s]', videoId);
     player.on('loaded', onLoaded);
     player.on('play', onPlay);
@@ -1731,7 +1604,6 @@ function useVideoPlayer(params) {
   const vimeoPlayer = useVimeoPlayer(service === 'vimeo' ? videoId || url : null, params);
   const nativePlayer = useNativeVideoPlayer(url, params);
   let player = null;
-
   if (service === 'dailymotion') {
     player = dailymotionPlayer;
   } else if (service === 'youtube') {
@@ -1741,7 +1613,6 @@ function useVideoPlayer(params) {
   } else {
     player = nativePlayer;
   }
-
   const {
     playing = false,
     paused = false,
@@ -1781,7 +1652,6 @@ function useVideoPlayer(params) {
   }, [ended, customOnEnd]);
   react.useEffect(() => {
     const hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null;
-
     if (hasMetadata && customOnMetadataChange !== null) {
       customOnMetadataChange({
         width: metaWidth,
@@ -1797,9 +1667,7 @@ const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
   y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
 });
-
 const currentScroll = getWindowScroll();
-
 const useWindowScroll = function () {
   let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
@@ -1808,19 +1676,16 @@ const useWindowScroll = function () {
   const [scroll, setScroll] = react.useState(currentScroll);
   const updateScroll = react.useCallback(() => {
     const 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]);
   const onScroll = react.useCallback(() => {
     const newScroll = updateScroll();
-
     if (newScroll !== null && onChange !== null) {
       onChange(newScroll);
     }
@@ -1837,7 +1702,6 @@ const getWindowSize = () => ({
   height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
 });
 let currentSize = getWindowSize();
-
 function useWindowSize() {
   let {
     onChange = null
@@ -1845,18 +1709,15 @@ function useWindowSize() {
   const [size, setSize] = react.useState(currentSize);
   const updateSize = react.useCallback(() => {
     const newSize = getWindowSize();
-
     if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
       currentSize = newSize;
       setSize(newSize);
       return newSize;
     }
-
     return null;
   }, [setSize]);
   const onResize = react.useCallback(() => {
     const newSize = updateSize();
-
     if (newSize !== null && onChange !== null) {
       onChange(newSize);
     }