@folklore/hooks 0.0.32 → 0.0.34

package/dist/cjs.js

@@ -107,9 +107,8 @@ function usePlayerCurrentTime(player) {
   return realCurrentTime.current;
 }
 
-const noPlayerError$1 = new Error('No player');
-const debug$3 = createDebug__default["default"]('folklore:video:dailymotion');
-const useDailymotionPlayer = function () {
+const NO_PLAYER_ERROR$3 = new Error('No player');
+function useDailymotionPlayer() {
   let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
@@ -135,6 +134,7 @@ const useDailymotionPlayer = function () {
       return match !== null ? match[1] : null;
     }
   } = params;
+  const debug = react.useMemo(() => createDebug__default["default"]('folklore:video:dailymotion'), []);
   const [apiLoaded, setApiLoaded] = react.useState(typeof window !== 'undefined' && typeof window.DM !== 'undefined');
   const [playerReady, setPlayerReady] = react.useState(false);
   const [loaded, setLoaded] = react.useState(false);
@@ -164,12 +164,12 @@ const useDailymotionPlayer = function () {
   react.useEffect(() => {
     let canceled = false;
     if (!apiLoaded && videoId !== null) {
-      debug$3('Load API');
+      debug('Load API');
       services.loadDailymotion().then(api => {
         if (!canceled) {
           apiRef.current = api;
           setApiLoaded(true);
-          debug$3('API Loaded');
+          debug('API Loaded');
         }
       });
     }
@@ -208,7 +208,7 @@ const useDailymotionPlayer = function () {
       player.load(videoId, {
         params: playerParams
       });
-      debug$3('Load video [ID: %s]', videoId);
+      debug('Load video [ID: %s]', videoId);
     } else {
       player = DM.player(element, {
         video: videoId,
@@ -216,7 +216,7 @@ const useDailymotionPlayer = function () {
         height,
         params: playerParams
       });
-      debug$3('Create player [ID: %s]', videoId);
+      debug('Create player [ID: %s]', videoId);
     }
     if (!playerReady) {
       setPlayerReady(true);
@@ -235,7 +235,7 @@ const useDailymotionPlayer = function () {
     let currentMetadata = metadata;
     function onPlaybackReady() {
       setLoaded(true);
-      debug$3('onPlaybackReady [ID: %s]', videoId);
+      debug('onPlaybackReady [ID: %s]', videoId);
     }
     function onLoadedMetadata() {
       currentMetadata = {
@@ -243,7 +243,7 @@ const useDailymotionPlayer = function () {
         duration: player.duration
       };
       setMetadata(currentMetadata);
-      debug$3('onLoadedMetadata [ID: %s]', videoId);
+      debug('onLoadedMetadata [ID: %s]', videoId);
     }
     function onDurationChange() {
       currentMetadata = {
@@ -251,12 +251,12 @@ const useDailymotionPlayer = function () {
         duration: player.duration
       };
       setMetadata(currentMetadata);
-      debug$3('onDurationChange [ID: %s]', videoId);
+      debug('onDurationChange [ID: %s]', videoId);
     }
     function onVolumeChange() {
       setMuted(player.muted);
       setVolumeState(player.volume);
-      debug$3('onVolumeChange [ID: %s]', videoId);
+      debug('onVolumeChange [ID: %s]', videoId);
     }
     function onPlay() {
       currentPlayState = {
@@ -266,7 +266,7 @@ const useDailymotionPlayer = function () {
         ended: false
       };
       setPlayState(currentPlayState);
-      debug$3('onPlay [ID: %s]', videoId);
+      debug('onPlay [ID: %s]', videoId);
     }
     function onPause() {
       currentPlayState = {
@@ -276,7 +276,7 @@ const useDailymotionPlayer = function () {
         ended: false
       };
       setPlayState(currentPlayState);
-      debug$3('onPause [ID: %s]', videoId);
+      debug('onPause [ID: %s]', videoId);
     }
     function onEnd() {
       currentPlayState = {
@@ -286,7 +286,7 @@ const useDailymotionPlayer = function () {
         ended: true
       };
       setPlayState(currentPlayState);
-      debug$3('onEnd [ID: %s]', videoId);
+      debug('onEnd [ID: %s]', videoId);
     }
     function onPlaying() {
       currentPlayState = {
@@ -294,7 +294,7 @@ const useDailymotionPlayer = function () {
         buffering: false
       };
       setPlayState(currentPlayState);
-      debug$3('onPlaying [ID: %s]', videoId);
+      debug('onPlaying [ID: %s]', videoId);
     }
     function onWaiting() {
       currentPlayState = {
@@ -302,7 +302,7 @@ const useDailymotionPlayer = function () {
         buffering: true
       };
       setPlayState(currentPlayState);
-      debug$3('onWaiting [ID: %s]', videoId);
+      debug('onWaiting [ID: %s]', videoId);
     }
     function onAdStart() {
       currentPlayState = {
@@ -310,7 +310,7 @@ const useDailymotionPlayer = function () {
         adPlaying: true
       };
       setPlayState(currentPlayState);
-      debug$3('onAdStart [ID: %s]', videoId);
+      debug('onAdStart [ID: %s]', videoId);
     }
     function onAdEnd() {
       currentPlayState = {
@@ -318,7 +318,7 @@ const useDailymotionPlayer = function () {
         adPlaying: false
       };
       setPlayState(currentPlayState);
-      debug$3('onAdEnd [ID: %s]', videoId);
+      debug('onAdEnd [ID: %s]', videoId);
     }
     player.addEventListener('playback_ready', onPlaybackReady);
     player.addEventListener('loadedmetadata', onLoadedMetadata);
@@ -349,37 +349,37 @@ const useDailymotionPlayer = function () {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.play() : Promise.reject(noPlayerError$1);
+    return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR$3);
   }, []);
   const pause = react.useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.pause() : Promise.reject(noPlayerError$1);
+    return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR$3);
   }, []);
   const setVolume = react.useCallback(newVolume => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setVolume(newVolume) : Promise.reject(noPlayerError$1);
+    return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR$3);
   }, []);
   const mute = react.useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setMute(true) : Promise.reject(noPlayerError$1);
+    return player !== null ? player.setMute(true) : Promise.reject(NO_PLAYER_ERROR$3);
   }, []);
   const unmute = react.useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setMute(false) : Promise.reject(noPlayerError$1);
+    return player !== null ? player.setMute(false) : Promise.reject(NO_PLAYER_ERROR$3);
   }, []);
   const seek = react.useCallback(time => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.seek(time) : Promise.reject(noPlayerError$1);
+    return player !== null ? player.seek(time) : Promise.reject(NO_PLAYER_ERROR$3);
   }, []);
   const {
     playing
@@ -407,10 +407,10 @@ const useDailymotionPlayer = function () {
     ...metadata,
     ...playState
   };
-};
+}
 
 const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
-const useDocumentEvent = (event, callback) => {
+function useDocumentEvent(event, callback) {
   react.useEffect(() => {
     if (eventsManager$1 !== null && callback !== null) {
       eventsManager$1.subscribe(event, callback);
@@ -421,10 +421,10 @@ const useDocumentEvent = (event, callback) => {
       }
     };
   }, [event, callback]);
-};
+}
 
 const eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
-const useWindowEvent = (event, callback) => {
+function useWindowEvent(event, callback) {
   react.useEffect(() => {
     if (eventsManager !== null && callback !== null) {
       eventsManager.subscribe(event, callback);
@@ -435,7 +435,7 @@ const useWindowEvent = (event, callback) => {
       }
     };
   }, [event, callback]);
-};
+}
 
 function useKeyboard() {
   let keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -675,9 +675,8 @@ const useItemsPaginated = function (loader) {
   };
 };
 
-const debug$2 = createDebug__default["default"]('folklore:video:native');
-const noPlayerError = new Error('No player');
-const useNativeVideoPlayer = function (url) {
+const NO_PLAYER_ERROR$2 = new Error('No player');
+function useNativeVideoPlayer(url) {
   let {
     width = 0,
     height = 0,
@@ -686,6 +685,7 @@ const useNativeVideoPlayer = function (url) {
     timeUpdateInterval = 1000,
     onTimeUpdate: customOnTimeUpdate = null
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const debug = react.useMemo(() => createDebug__default["default"]('folklore:video:native'), []);
   const elementRef = react.useRef(null);
   const [loaded, setLoaded] = react.useState(false);
   const [volume, setVolumeState] = react.useState(initialMuted ? 0 : 1);
@@ -704,13 +704,13 @@ const useNativeVideoPlayer = function (url) {
     const {
       current: player
     } = elementRef;
-    return player !== null ? player.play() : Promise.reject(noPlayerError);
+    return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const pause = react.useCallback(() => {
     const {
       current: player
     } = elementRef;
-    return player !== null ? player.pause() : Promise.reject(noPlayerError);
+    return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const setVolume = react.useCallback(newVolume => {
     const {
@@ -720,7 +720,7 @@ const useNativeVideoPlayer = function (url) {
       player.volume = newVolume;
       return Promise.resolve(newVolume);
     }
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const mute = react.useCallback(() => {
     const {
@@ -730,7 +730,7 @@ const useNativeVideoPlayer = function (url) {
       player.muted = true;
       return Promise.resolve(true);
     }
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const unmute = react.useCallback(() => {
     const {
@@ -740,7 +740,7 @@ const useNativeVideoPlayer = function (url) {
       player.muted = false;
       return Promise.resolve(false);
     }
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const seek = react.useCallback(newTime => {
     const {
@@ -750,7 +750,7 @@ const useNativeVideoPlayer = function (url) {
       player.currentTime = newTime;
       return Promise.resolve(newTime);
     }
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const setLoop = react.useCallback(newLoop => {
     const {
@@ -760,7 +760,7 @@ const useNativeVideoPlayer = function (url) {
       player.loop = newLoop;
       return Promise.resolve(newLoop);
     }
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
 
   // Bind player events
@@ -773,7 +773,7 @@ const useNativeVideoPlayer = function (url) {
     }
     const onCanPlay = () => {
       setLoaded(true);
-      debug$2('onCanPlay [URL: %s]', url);
+      debug('onCanPlay [URL: %s]', url);
     };
     const onMetadataLoaded = () => {
       const newMetadata = {
@@ -782,7 +782,7 @@ const useNativeVideoPlayer = function (url) {
         height: player.videoHeight
       };
       setMetadata(newMetadata);
-      debug$2('onMetadataLoaded [URL: %s]', url);
+      debug('onMetadataLoaded [URL: %s]', url);
     };
     const onPlay = () => {
       setPlayState({
@@ -791,7 +791,7 @@ const useNativeVideoPlayer = function (url) {
         ended: false,
         buffering: false
       });
-      debug$2('onPlay [URL: %s]', url);
+      debug('onPlay [URL: %s]', url);
     };
     const onPause = () => {
       setPlayState({
@@ -800,7 +800,7 @@ const useNativeVideoPlayer = function (url) {
         ended: false,
         buffering: false
       });
-      debug$2('onPause [URL: %s]', url);
+      debug('onPause [URL: %s]', url);
     };
     const onEnded = () => {
       setPlayState({
@@ -809,16 +809,16 @@ const useNativeVideoPlayer = function (url) {
         ended: true,
         buffering: false
       });
-      debug$2('onEnded [URL: %s]', url);
+      debug('onEnded [URL: %s]', url);
     };
-    debug$2('Bind events [URL: %s]', url);
+    debug('Bind events [URL: %s]', url);
     player.addEventListener('canplay', onCanPlay);
     player.addEventListener('metadataloaded', onMetadataLoaded);
     player.addEventListener('play', onPlay);
     player.addEventListener('pause', onPause);
     player.addEventListener('ended', onEnded);
     return () => {
-      debug$2('Unbind events [URL: %s]', url);
+      debug('Unbind events [URL: %s]', url);
       player.removeEventListener('canplay', onCanPlay);
       player.removeEventListener('metadataloaded', onMetadataLoaded);
       player.removeEventListener('play', onPlay);
@@ -853,18 +853,18 @@ const useNativeVideoPlayer = function (url) {
     ...metadata,
     ...playState
   };
-};
+}
 
 const observersCache = new Map();
-const getOptionsKey = _ref => {
+function getOptionsKey(_ref) {
   let {
     root = null,
     rootMargin,
     threshold = null
   } = _ref;
   return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
-};
-const createObserver = function (Observer) {
+}
+function createObserver(Observer) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let subscribers = [];
   const addSubscriber = (element, callback) => {
@@ -927,8 +927,8 @@ const createObserver = function (Observer) {
     unsubscribe,
     observer
   };
-};
-const getObserver = function () {
+}
+function getObserver() {
   let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   if (Observer === null) {
@@ -948,8 +948,8 @@ const getObserver = function () {
     observersCache.set(Observer, observers);
   }
   return observers[observerKey];
-};
-const useObserver = function (Observer) {
+}
+function useObserver(Observer) {
   let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
@@ -998,7 +998,7 @@ const useObserver = function (Observer) {
     ref: nodeRef,
     entry
   };
-};
+}
 
 /**
  * Intersection Observer
@@ -1014,7 +1014,7 @@ const intersectionObserverInitialEntry = {
   boundingClientRect: null,
   rootBounds: null
 };
-const useIntersectionObserver = function () {
+function useIntersectionObserver() {
   let {
     root = null,
     rootMargin = '0px',
@@ -1027,7 +1027,7 @@ const useIntersectionObserver = function () {
     threshold,
     disabled
   }, intersectionObserverInitialEntry);
-};
+}
 
 /**
  * Resize Observer
@@ -1038,255 +1038,17 @@ const resizeObserverInitialEntry = {
   contentBoxSize: null,
   borderBoxSize: null
 };
-const useResizeObserver = function () {
+function useResizeObserver() {
   let {
     disabled = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   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,
-    height = 0,
-    duration = 0,
-    autoplay = false,
-    controls = true,
-    timeUpdateInterval = 1000,
-    muted: initialMuted = false,
-    onVolumeChange: customOnVolumeChange = null,
-    onTimeUpdate: customOnTimeUpdate = null,
-    getVideoId = url => {
-      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 !== '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);
-  const elementHasChanged = elementRef.current !== playerElementRef.current;
-  const videoId = react.useMemo(() => getVideoId(id), [id]);
-  const [ready, setReady] = react.useState(false);
-  const [muted, setMuted] = react.useState(initialMuted);
-  const [playState, setPlayState] = react.useState({
-    playing: false,
-    paused: false,
-    ended: false,
-    buffering: false
-  });
-  const [metadata, setMetadata] = react.useState({
-    width,
-    height,
-    duration
-  });
-  react.useEffect(() => {
-    let canceled = false;
-    if (!apiLoaded && videoId !== null) {
-      debug$1('Load API');
-      services.loadYouTube().then(api => {
-        if (!canceled) {
-          apiRef.current = api;
-          setApiLoaded(true);
-          debug$1('API Loaded');
-        }
-      });
-    }
-    return () => {
-      canceled = true;
-    };
-  }, [apiLoaded, videoId, setApiLoaded]);
-  const play = react.useCallback(() => {
-    const {
-      current: player
-    } = playerRef;
-    return player !== null && typeof player.playVideo !== 'undefined' ? Promise.resolve(player.playVideo()) : Promise.reject(NO_PLAYER_ERROR$1);
-  }, []);
-  const pause = react.useCallback(() => {
-    const {
-      current: player
-    } = playerRef;
-    return player !== null && typeof player.pauseVideo !== 'undefined' ? Promise.resolve(player.pauseVideo()) : Promise.reject(NO_PLAYER_ERROR$1);
-  }, []);
-  const setVolume = react.useCallback(volume => {
-    const {
-      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(() => {
-    const {
-      current: player
-    } = playerRef;
-    return (player !== null && typeof player.mute !== 'undefined' ? Promise.resolve(player.mute()) : Promise.reject(NO_PLAYER_ERROR$1)).then(() => setMuted(true));
-  }, [setMuted]);
-  const unmute = react.useCallback(() => {
-    const {
-      current: player
-    } = playerRef;
-    return (player !== null && typeof player.unMute !== 'undefined' ? Promise.resolve(player.unMute()) : Promise.reject(NO_PLAYER_ERROR$1)).then(() => setMuted(false));
-  }, []);
-  const seek = react.useCallback(time => {
-    const {
-      current: player
-    } = playerRef;
-    return player !== null && typeof player.seekTo !== 'undefined' ? Promise.resolve(player.seekTo(time)) : Promise.reject(NO_PLAYER_ERROR$1);
-  }, []);
-  const setLoop = react.useCallback(loop => {
-    const {
-      current: player
-    } = playerRef;
-    return player !== null && typeof player.setLoop !== 'undefined' ? Promise.resolve(player.setLoop(loop)) : Promise.reject(NO_PLAYER_ERROR$1);
-  }, []);
-  const destroyPlayer = react.useCallback(() => {
-    if (playerRef.current !== null) {
-      debug$1('Unset player');
-      playerRef.current = null;
-    }
-  }, []);
-
-  // 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
-  react.useEffect(() => {
-    const {
-      current: YT = null
-    } = apiRef;
-    const {
-      current: currentPlayer = null
-    } = playerRef;
-    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
-        } = _ref;
-        player = target;
-        playerRef.current = target;
-        setReady(true);
-        const newDuration = target.getDuration();
-        if (newDuration !== metadata.duration) {
-          setMetadata({
-            ...metadata,
-            duration: newDuration
-          });
-        }
-        debug$1('onReady [ID: %s]', videoId);
-      };
-      const onStateChange = _ref2 => {
-        let {
-          data: state
-        } = _ref2;
-        const newState = {
-          playing: state === YT.PlayerState.PLAYING,
-          paused: state === YT.PlayerState.PAUSED,
-          ended: state === YT.PlayerState.ENDED,
-          buffering: state === YT.PlayerState.BUFFERING
-        };
-        setPlayState(newState);
-        let stateLabel = null;
-        if (newState.playing) {
-          stateLabel = 'playing';
-        } else if (newState.paused) {
-          stateLabel = 'paused';
-        } else if (newState.ended) {
-          stateLabel = 'ended';
-        } else if (newState.buffering) {
-          stateLabel = 'buffering';
-        } else if (state === -1) {
-          stateLabel = 'not started';
-        } else if (state === 0) {
-          stateLabel = 'stopped';
-        }
-        debug$1('onStateChange %s [ID: %s]', stateLabel, videoId);
-      };
-      player = new YT.Player(element, {
-        videoId,
-        playerVars: {
-          controls,
-          autoplay: autoplay ? 1 : 0,
-          mute: initialMuted,
-          playsinline: true,
-          rel: 0,
-          showinfo: 0,
-          modestbranding: 1
-        },
-        events: {
-          onReady,
-          onStateChange
-        }
-      });
-    }
-    playerRef.current = player;
-    playerElementRef.current = element;
-  }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
-  const {
-    playing
-  } = playState;
-  const getCurrentTime = react.useCallback(p => p.getCurrentTime(), []);
-  const currentTime = usePlayerCurrentTime(playerRef.current, {
-    id: videoId,
-    disabled: !playing || timeUpdateInterval === null,
-    updateInterval: timeUpdateInterval,
-    onUpdate: customOnTimeUpdate,
-    getCurrentTime
-  });
-  return {
-    ref: elementRef,
-    player: playerRef.current,
-    play,
-    pause,
-    mute,
-    unmute,
-    setVolume,
-    seek,
-    setLoop,
-    ready,
-    currentTime,
-    muted,
-    loaded: ready,
-    ...metadata,
-    ...playState
-  };
 }
 
-const debug = createDebug__default["default"]('folklore:video:vimeo');
-const NO_PLAYER_ERROR = new Error('No player');
-const useVimeoPlayer = function (id) {
+const NO_PLAYER_ERROR$1 = new Error('No player');
+function useVimeoPlayer(id) {
   let {
     width = 0,
     height = 0,
@@ -1306,6 +1068,7 @@ const useVimeoPlayer = function (id) {
       return match !== null ? match[1] : null;
     }
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const debug = react.useMemo(() => createDebug__default["default"]('folklore:video:vimeo'), []);
   const [apiLoaded, setApiLoaded] = react.useState(false);
   const apiRef = react.useRef(null);
   const elementRef = react.useRef(null);
@@ -1349,43 +1112,43 @@ const useVimeoPlayer = function (id) {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const pause = react.useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const setVolume = react.useCallback(newVolume => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const mute = react.useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setVolume(0) : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null ? player.setVolume(0) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const unmute = react.useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setVolume(1) : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null ? player.setVolume(1) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const seek = react.useCallback(time => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setCurrentTime(time) : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null ? player.setCurrentTime(time) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const setLoop = react.useCallback(loop => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setLoop(loop) : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null ? player.setLoop(loop) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const destroyVideo = react.useCallback(() => {
     const {
@@ -1584,7 +1347,244 @@ const useVimeoPlayer = function (id) {
     ...metadata,
     ...playState
   };
-};
+}
+
+const NO_PLAYER_ERROR = new Error('No player');
+function useYouTubePlayer(id) {
+  let {
+    width = 0,
+    height = 0,
+    duration = 0,
+    autoplay = false,
+    controls = true,
+    timeUpdateInterval = 1000,
+    muted: initialMuted = false,
+    onVolumeChange: customOnVolumeChange = null,
+    onTimeUpdate: customOnTimeUpdate = null,
+    getVideoId = url => {
+      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 debug = react.useMemo(() => createDebug__default["default"]('folklore:video:youtube'), []);
+  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);
+  const elementHasChanged = elementRef.current !== playerElementRef.current;
+  const videoId = react.useMemo(() => getVideoId(id), [id]);
+  const [ready, setReady] = react.useState(false);
+  const [muted, setMuted] = react.useState(initialMuted);
+  const [playState, setPlayState] = react.useState({
+    playing: false,
+    paused: false,
+    ended: false,
+    buffering: false
+  });
+  const [metadata, setMetadata] = react.useState({
+    width,
+    height,
+    duration
+  });
+  react.useEffect(() => {
+    let canceled = false;
+    if (!apiLoaded && videoId !== null) {
+      debug('Load API');
+      services.loadYouTube().then(api => {
+        if (!canceled) {
+          apiRef.current = api;
+          setApiLoaded(true);
+          debug('API Loaded');
+        }
+      });
+    }
+    return () => {
+      canceled = true;
+    };
+  }, [apiLoaded, videoId, setApiLoaded]);
+  const play = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
+    return player !== null && typeof player.playVideo !== 'undefined' ? Promise.resolve(player.playVideo()) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  const pause = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
+    return player !== null && typeof player.pauseVideo !== 'undefined' ? Promise.resolve(player.pauseVideo()) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  const setVolume = react.useCallback(volume => {
+    const {
+      current: player
+    } = playerRef;
+    const promise = player !== null && typeof player.setVolume !== 'undefined' ? Promise.resolve(player.setVolume(volume * 100)) : Promise.reject(NO_PLAYER_ERROR);
+    if (customOnVolumeChange) {
+      customOnVolumeChange(volume);
+    }
+    return promise;
+  }, [customOnVolumeChange]);
+  const mute = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
+    return (player !== null && typeof player.mute !== 'undefined' ? Promise.resolve(player.mute()) : Promise.reject(NO_PLAYER_ERROR)).then(() => setMuted(true));
+  }, [setMuted]);
+  const unmute = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
+    return (player !== null && typeof player.unMute !== 'undefined' ? Promise.resolve(player.unMute()) : Promise.reject(NO_PLAYER_ERROR)).then(() => setMuted(false));
+  }, []);
+  const seek = react.useCallback(time => {
+    const {
+      current: player
+    } = playerRef;
+    return player !== null && typeof player.seekTo !== 'undefined' ? Promise.resolve(player.seekTo(time)) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  const setLoop = react.useCallback(loop => {
+    const {
+      current: player
+    } = playerRef;
+    return player !== null && typeof player.setLoop !== 'undefined' ? Promise.resolve(player.setLoop(loop)) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  const destroyPlayer = react.useCallback(() => {
+    if (playerRef.current !== null) {
+      debug('Unset player');
+      playerRef.current = null;
+    }
+  }, []);
+
+  // Detect iframe switch and destroy player
+
+  react.useEffect(() => {
+    const {
+      current: currentPlayer
+    } = playerRef;
+    if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
+      debug('iFrame switched');
+      destroyPlayer();
+    }
+  }, [elementHasChanged]);
+
+  // Create player
+  react.useEffect(() => {
+    const {
+      current: YT = null
+    } = apiRef;
+    const {
+      current: currentPlayer = null
+    } = playerRef;
+    const {
+      current: element = null
+    } = elementRef;
+    if (!apiLoaded || videoId === null || element === null) {
+      destroyPlayer();
+      return;
+    }
+    let player = currentPlayer;
+    if (player !== null && typeof player.loadVideoById !== 'undefined') {
+      debug('Switch video [ID: %s]', videoId);
+      player.loadVideoById(videoId);
+    } else {
+      debug('Create player [ID: %s]', videoId);
+      const onReady = _ref => {
+        let {
+          target
+        } = _ref;
+        player = target;
+        playerRef.current = target;
+        setReady(true);
+        const newDuration = target.getDuration();
+        if (newDuration !== metadata.duration) {
+          setMetadata({
+            ...metadata,
+            duration: newDuration
+          });
+        }
+        debug('onReady [ID: %s]', videoId);
+      };
+      const onStateChange = _ref2 => {
+        let {
+          data: state
+        } = _ref2;
+        const newState = {
+          playing: state === YT.PlayerState.PLAYING,
+          paused: state === YT.PlayerState.PAUSED,
+          ended: state === YT.PlayerState.ENDED,
+          buffering: state === YT.PlayerState.BUFFERING
+        };
+        setPlayState(newState);
+        let stateLabel = null;
+        if (newState.playing) {
+          stateLabel = 'playing';
+        } else if (newState.paused) {
+          stateLabel = 'paused';
+        } else if (newState.ended) {
+          stateLabel = 'ended';
+        } else if (newState.buffering) {
+          stateLabel = 'buffering';
+        } else if (state === -1) {
+          stateLabel = 'not started';
+        } else if (state === 0) {
+          stateLabel = 'stopped';
+        }
+        debug('onStateChange %s [ID: %s]', stateLabel, videoId);
+      };
+      player = new YT.Player(element, {
+        videoId,
+        playerVars: {
+          controls,
+          autoplay: autoplay ? 1 : 0,
+          mute: initialMuted,
+          playsinline: true,
+          rel: 0,
+          showinfo: 0,
+          modestbranding: 1
+        },
+        events: {
+          onReady,
+          onStateChange
+        }
+      });
+    }
+    playerRef.current = player;
+    playerElementRef.current = element;
+  }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
+  const {
+    playing
+  } = playState;
+  const getCurrentTime = react.useCallback(p => p.getCurrentTime(), []);
+  const currentTime = usePlayerCurrentTime(playerRef.current, {
+    id: videoId,
+    disabled: !playing || timeUpdateInterval === null,
+    updateInterval: timeUpdateInterval,
+    onUpdate: customOnTimeUpdate,
+    getCurrentTime
+  });
+  return {
+    ref: elementRef,
+    player: playerRef.current,
+    play,
+    pause,
+    mute,
+    unmute,
+    setVolume,
+    seek,
+    setLoop,
+    ready,
+    currentTime,
+    muted,
+    loaded: ready,
+    ...metadata,
+    ...playState
+  };
+}
 
 function useVideoPlayer(params) {
   const {
@@ -1668,7 +1668,7 @@ const getWindowScroll = () => ({
   y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
 });
 const currentScroll = getWindowScroll();
-const useWindowScroll = function () {
+function useWindowScroll() {
   let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     onChange = null
@@ -1695,7 +1695,7 @@ const useWindowScroll = function () {
     onScroll();
   }, []);
   return scroll;
-};
+}
 
 const getWindowSize = () => ({
   width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,