@folklore/hooks 0.0.31 → 0.0.33

package/dist/es.js

@@ -1,6 +1,6 @@
 import raf from 'raf';
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { loadDailymotion, loadYouTube, loadVimeo } from '@folklore/services';
+import { loadDailymotion, loadVimeo, loadYouTube } from '@folklore/services';
 import createDebug from 'debug';
 import EventsManager from '@folklore/events';
 import { cancelable } from 'cancelable-promise';
@@ -19,32 +19,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(loop);
       }
     }
-
     if (delta !== 0) {
       duration = Math.min(maxDuration, Math.abs(delta) * speed * 1000);
       startTime = Date.now();
       animationFrame = raf(loop);
     }
-
     return () => {
       canceled = true;
-
       if (animationFrame !== null) {
         raf.cancel(animationFrame);
       }
@@ -65,36 +59,29 @@ function usePlayerCurrentTime(player) {
   const realCurrentTime = useRef(currentTime);
   const lastIdRef = useRef(id);
   const idChanged = lastIdRef.current !== id;
-
   if (idChanged) {
     realCurrentTime.current = 0;
     lastIdRef.current = id;
-  } // Check time update
-
+  }
 
+  // Check time update
   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 {
@@ -109,10 +96,8 @@ function usePlayerCurrentTime(player) {
   return realCurrentTime.current;
 }
 
-const noPlayerError$1 = new Error('No player');
-const debug$3 = createDebug('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 {
@@ -134,15 +119,15 @@ 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] = useState(typeof window.DM !== 'undefined');
+  const debug = useMemo(() => createDebug('folklore:video:dailymotion'), []);
+  const [apiLoaded, setApiLoaded] = useState(typeof window !== 'undefined' && typeof window.DM !== 'undefined');
   const [playerReady, setPlayerReady] = useState(false);
   const [loaded, setLoaded] = useState(false);
-  const apiRef = useRef(typeof window.DM !== 'undefined' ? window.DM : null);
+  const apiRef = useRef(typeof window !== 'undefined' && typeof window.DM !== 'undefined' ? window.DM : null);
   const ready = apiLoaded && playerReady;
   const videoId = useMemo(() => getVideoId(id), [id]);
   const elementRef = useRef(null);
@@ -162,27 +147,27 @@ const useDailymotionPlayer = function () {
     width,
     height,
     duration
-  }); // Load SDK
+  });
 
+  // Load SDK
   useEffect(() => {
     let canceled = false;
-
     if (!apiLoaded && videoId !== null) {
-      debug$3('Load API');
+      debug('Load API');
       loadDailymotion().then(api => {
         if (!canceled) {
           apiRef.current = api;
           setApiLoaded(true);
-          debug$3('API Loaded');
+          debug('API Loaded');
         }
       });
     }
-
     return () => {
       canceled = true;
     };
-  }, [videoId, apiLoaded, setApiLoaded]); // Create or update player
+  }, [videoId, apiLoaded, setApiLoaded]);
 
+  // Create or update player
   useEffect(() => {
     const {
       current: DM = null
@@ -193,11 +178,9 @@ const useDailymotionPlayer = function () {
     const {
       current: element = null
     } = elementRef;
-
     if (!apiLoaded || videoId === null || element === null) {
       return;
     }
-
     const playerParams = {
       'autoplay-d': autoplay,
       // muted,
@@ -210,12 +193,11 @@ const useDailymotionPlayer = function () {
       'ui-start-screen-info': uiStartScreenInfo
     };
     let player = currentPlayer;
-
     if (player !== null) {
       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,
@@ -223,13 +205,11 @@ const useDailymotionPlayer = function () {
         height,
         params: playerParams
       });
-      debug$3('Create player [ID: %s]', videoId);
+      debug('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]);
@@ -237,103 +217,98 @@ 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);
+      debug('onPlaybackReady [ID: %s]', videoId);
     }
-
     function onLoadedMetadata() {
-      currentMetadata = { ...currentMetadata,
+      currentMetadata = {
+        ...currentMetadata,
         duration: player.duration
       };
       setMetadata(currentMetadata);
-      debug$3('onLoadedMetadata [ID: %s]', videoId);
+      debug('onLoadedMetadata [ID: %s]', videoId);
     }
-
     function onDurationChange() {
-      currentMetadata = { ...currentMetadata,
+      currentMetadata = {
+        ...currentMetadata,
         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 = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         playing: true,
         paused: false,
         ended: false
       };
       setPlayState(currentPlayState);
-      debug$3('onPlay [ID: %s]', videoId);
+      debug('onPlay [ID: %s]', videoId);
     }
-
     function onPause() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         playing: false,
         paused: true,
         ended: false
       };
       setPlayState(currentPlayState);
-      debug$3('onPause [ID: %s]', videoId);
+      debug('onPause [ID: %s]', videoId);
     }
-
     function onEnd() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         playing: false,
         paused: false,
         ended: true
       };
       setPlayState(currentPlayState);
-      debug$3('onEnd [ID: %s]', videoId);
+      debug('onEnd [ID: %s]', videoId);
     }
-
     function onPlaying() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         buffering: false
       };
       setPlayState(currentPlayState);
-      debug$3('onPlaying [ID: %s]', videoId);
+      debug('onPlaying [ID: %s]', videoId);
     }
-
     function onWaiting() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         buffering: true
       };
       setPlayState(currentPlayState);
-      debug$3('onWaiting [ID: %s]', videoId);
+      debug('onWaiting [ID: %s]', videoId);
     }
-
     function onAdStart() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         adPlaying: true
       };
       setPlayState(currentPlayState);
-      debug$3('onAdStart [ID: %s]', videoId);
+      debug('onAdStart [ID: %s]', videoId);
     }
-
     function onAdEnd() {
-      currentPlayState = { ...currentPlayState,
+      currentPlayState = {
+        ...currentPlayState,
         adPlaying: false
       };
       setPlayState(currentPlayState);
-      debug$3('onAdEnd [ID: %s]', videoId);
+      debug('onAdEnd [ID: %s]', videoId);
     }
-
     player.addEventListener('playback_ready', onPlaybackReady);
     player.addEventListener('loadedmetadata', onLoadedMetadata);
     player.addEventListener('durationchange', onDurationChange);
@@ -363,37 +338,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 = 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 = 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 = 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 = 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 = 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
@@ -421,39 +396,35 @@ const useDailymotionPlayer = function () {
     ...metadata,
     ...playState
   };
-};
+}
 
 const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
-
-const useDocumentEvent = (event, callback) => {
+function useDocumentEvent(event, callback) {
   useEffect(() => {
     if (eventsManager$1 !== null && callback !== null) {
       eventsManager$1.subscribe(event, callback);
     }
-
     return () => {
       if (eventsManager$1 !== null && callback !== null) {
         eventsManager$1.unsubscribe(event, callback);
       }
     };
   }, [event, callback]);
-};
+}
 
 const eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
-
-const useWindowEvent = (event, callback) => {
+function useWindowEvent(event, callback) {
   useEffect(() => {
     if (eventsManager !== null && callback !== null) {
       eventsManager.subscribe(event, callback);
     }
-
     return () => {
       if (eventsManager !== null && callback !== null) {
         eventsManager.unsubscribe(event, callback);
       }
     };
   }, [event, callback]);
-};
+}
 
 function useKeyboard() {
   let keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -462,13 +433,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);
     }
@@ -478,13 +447,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);
     }
@@ -550,15 +517,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,
@@ -566,7 +531,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) => {
@@ -577,23 +541,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(a) && isNumber(b)) {
         if (a === b) {
           return 0;
         }
-
         return a > b ? 1 : -1;
       }
-
       return 0;
     });
     currentPagesRef.current = newPages;
@@ -606,7 +565,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 || [];
@@ -614,7 +572,6 @@ const useItemsPaginated = function (loader) {
     const firstItem = remainingPages.length > 0 ? remainingPages.shift() : null;
     return firstItem !== null ? firstItem : null;
   };
-
   const loadItems = requestPage => {
     updateState({
       loading: true
@@ -623,7 +580,6 @@ const useItemsPaginated = function (loader) {
       if (onLoaded !== null) {
         onLoaded(response);
       }
-
       return response;
     }).catch(error => {
       if (onError !== null) {
@@ -631,35 +587,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
   useEffect(() => {
     const hadState = lastState.current !== null;
-
     if (hadState) {
       currentPagesRef.current = null;
       updateState({
@@ -674,7 +623,6 @@ const useItemsPaginated = function (loader) {
   useEffect(() => {
     const hadState = lastState.current !== null;
     lastState.current = initialState;
-
     if (hadState) {
       currentPagesRef.current = initialState.pages;
       setState(initialState);
@@ -684,14 +632,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();
@@ -719,10 +664,8 @@ const useItemsPaginated = function (loader) {
   };
 };
 
-const debug$2 = createDebug('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,
@@ -731,6 +674,7 @@ const useNativeVideoPlayer = function (url) {
     timeUpdateInterval = 1000,
     onTimeUpdate: customOnTimeUpdate = null
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const debug = useMemo(() => createDebug('folklore:video:native'), []);
   const elementRef = useRef(null);
   const [loaded, setLoaded] = useState(false);
   const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
@@ -749,89 +693,77 @@ 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 = 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 = useCallback(newVolume => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.volume = newVolume;
       return Promise.resolve(newVolume);
     }
-
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const mute = useCallback(() => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.muted = true;
       return Promise.resolve(true);
     }
-
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const unmute = useCallback(() => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.muted = false;
       return Promise.resolve(false);
     }
-
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const seek = useCallback(newTime => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.currentTime = newTime;
       return Promise.resolve(newTime);
     }
-
-    return Promise.reject(noPlayerError);
+    return Promise.reject(NO_PLAYER_ERROR$2);
   }, []);
   const setLoop = useCallback(newLoop => {
     const {
       current: player
     } = elementRef;
-
     if (player !== null) {
       player.loop = newLoop;
       return Promise.resolve(newLoop);
     }
+    return Promise.reject(NO_PLAYER_ERROR$2);
+  }, []);
 
-    return Promise.reject(noPlayerError);
-  }, []); // Bind player events
-
+  // Bind player events
   useEffect(() => {
     const {
       current: player
     } = elementRef;
-
     if (player === null) {
       return () => {};
     }
-
     const onCanPlay = () => {
       setLoaded(true);
-      debug$2('onCanPlay [URL: %s]', url);
+      debug('onCanPlay [URL: %s]', url);
     };
-
     const onMetadataLoaded = () => {
       const newMetadata = {
         duration: player.duration,
@@ -839,9 +771,8 @@ const useNativeVideoPlayer = function (url) {
         height: player.videoHeight
       };
       setMetadata(newMetadata);
-      debug$2('onMetadataLoaded [URL: %s]', url);
+      debug('onMetadataLoaded [URL: %s]', url);
     };
-
     const onPlay = () => {
       setPlayState({
         playing: true,
@@ -849,9 +780,8 @@ const useNativeVideoPlayer = function (url) {
         ended: false,
         buffering: false
       });
-      debug$2('onPlay [URL: %s]', url);
+      debug('onPlay [URL: %s]', url);
     };
-
     const onPause = () => {
       setPlayState({
         playing: false,
@@ -859,9 +789,8 @@ const useNativeVideoPlayer = function (url) {
         ended: false,
         buffering: false
       });
-      debug$2('onPause [URL: %s]', url);
+      debug('onPause [URL: %s]', url);
     };
-
     const onEnded = () => {
       setPlayState({
         playing: false,
@@ -869,17 +798,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);
@@ -914,42 +842,37 @@ 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_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
-};
-
-const createObserver = function (Observer) {
+  return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
+}
+function createObserver(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 => {
@@ -957,7 +880,6 @@ const createObserver = function (Observer) {
           element,
           callbacks
         } = _ref2;
-
         if (element === entry.target) {
           callbacks.forEach(callback => {
             callback(entry);
@@ -966,13 +888,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 => {
@@ -980,48 +899,46 @@ 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) {
+}
+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) {
+    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) {
+}
+function useObserver(Observer) {
   let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
@@ -1039,26 +956,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
@@ -1066,7 +976,6 @@ const useObserver = function (Observer) {
       unsubscribe = localUnsubscribe;
       subscribe(nodeElement, callback);
     }
-
     currentElement.current = nodeElement;
     return () => {
       if (unsubscribe !== null) {
@@ -1078,11 +987,11 @@ const useObserver = function (Observer) {
     ref: nodeRef,
     entry
   };
-};
+}
+
 /**
  * Intersection Observer
  */
-
 const defaultThreshold = [0, 1.0];
 const intersectionObserverInitialEntry = {
   target: null,
@@ -1094,72 +1003,71 @@ const intersectionObserverInitialEntry = {
   boundingClientRect: null,
   rootBounds: null
 };
-const useIntersectionObserver = function () {
+function useIntersectionObserver() {
   let {
     root = null,
     rootMargin = '0px',
     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,
   contentBoxSize: null,
   borderBoxSize: null
 };
-const useResizeObserver = function () {
+function useResizeObserver() {
   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('folklore:video:youtube');
-
-function useYouTubePlayer(id) {
+function useVimeoPlayer(id) {
   let {
     width = 0,
     height = 0,
     duration = 0,
     autoplay = false,
-    controls = true,
+    autopause = true,
+    byline = false,
+    controls = false,
+    initialMuted = false,
     timeUpdateInterval = 1000,
-    muted: initialMuted = false,
-    onVolumeChange: customOnVolumeChange = null,
     onTimeUpdate: customOnTimeUpdate = null,
     getVideoId = url => {
-      if (url === null || url.match(/^https?:/) === null) {
+      if (url === null || url.match(/^[0-9]+$/) !== 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;
+      const match = url.match(/\/[0-9]+/);
+      return match !== null ? match[1] : null;
     }
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const [apiLoaded, setApiLoaded] = useState(typeof window.YT !== 'undefined');
-  const apiRef = useRef(typeof window.YT !== 'undefined' ? window.YT : null);
+  const debug = useMemo(() => createDebug('folklore:video:vimeo'), []);
+  const [apiLoaded, setApiLoaded] = useState(false);
+  const apiRef = useRef(null);
   const elementRef = useRef(null);
   const playerRef = useRef(null);
   const playerElementRef = useRef(elementRef.current);
   const elementHasChanged = elementRef.current !== playerElementRef.current;
   const videoId = useMemo(() => getVideoId(id), [id]);
   const [ready, setReady] = useState(false);
-  const [muted, setMuted] = useState(initialMuted);
+  const [loaded, setLoaded] = useState(false);
+  const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
   const [playState, setPlayState] = useState({
     playing: false,
     paused: false,
@@ -1171,93 +1079,93 @@ function useYouTubePlayer(id) {
     height,
     duration
   });
+
+  // Load SDK
   useEffect(() => {
     let canceled = false;
-
-    if (!apiLoaded && videoId !== null) {
-      debug$1('Load API');
-      loadYouTube().then(api => {
+    if (!apiLoaded && id !== null) {
+      debug('Load API');
+      loadVimeo().then(api => {
         if (!canceled) {
           apiRef.current = api;
           setApiLoaded(true);
-          debug$1('API Loaded');
+          debug('API Loaded');
         }
       });
     }
-
     return () => {
       canceled = true;
     };
-  }, [apiLoaded, videoId, setApiLoaded]);
+  }, [id]);
   const play = useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null && typeof player.playVideo !== 'undefined' ? Promise.resolve(player.playVideo()) : Promise.reject(NO_PLAYER_ERROR$1);
+    return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const pause = useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null && typeof player.pauseVideo !== 'undefined' ? Promise.resolve(player.pauseVideo()) : Promise.reject(NO_PLAYER_ERROR$1);
+    return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
-  const setVolume = useCallback(volume => {
+  const setVolume = useCallback(newVolume => {
     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]);
+    return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR$1);
+  }, []);
   const mute = 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]);
+    return player !== null ? player.setVolume(0) : Promise.reject(NO_PLAYER_ERROR$1);
+  }, []);
   const unmute = 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));
+    return player !== null ? player.setVolume(1) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const seek = useCallback(time => {
     const {
       current: player
     } = playerRef;
-    return player !== null && typeof player.seekTo !== 'undefined' ? Promise.resolve(player.seekTo(time)) : Promise.reject(NO_PLAYER_ERROR$1);
+    return player !== null ? player.setCurrentTime(time) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
   const setLoop = useCallback(loop => {
     const {
       current: player
     } = playerRef;
-    return player !== null && typeof player.setLoop !== 'undefined' ? Promise.resolve(player.setLoop(loop)) : Promise.reject(NO_PLAYER_ERROR$1);
+    return player !== null ? player.setLoop(loop) : Promise.reject(NO_PLAYER_ERROR$1);
   }, []);
-  const destroyPlayer = useCallback(() => {
-    if (playerRef.current !== null) {
-      debug$1('Unset player');
+  const destroyVideo = useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
+    if (player !== null) {
+      debug('Unload video');
+      player.unload();
+    }
+    if (player !== null) {
+      debug('Unset video');
       playerRef.current = null;
     }
-  }, []); // Detect iframe switch and destroy player
-
+  }, []);
   useEffect(() => {
     const {
       current: currentPlayer
     } = playerRef;
-
     if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
-      debug$1('iFrame switched');
-      destroyPlayer();
+      debug('iFrame switched');
+      destroyVideo();
     }
-  }, [elementHasChanged]); // Create player
+  }, [elementHasChanged]);
 
+  // Create player
   useEffect(() => {
     const {
-      current: YT = null
+      current: Player = null
     } = apiRef;
     const {
       current: currentPlayer = null
@@ -1265,89 +1173,140 @@ function useYouTubePlayer(id) {
     const {
       current: element = null
     } = elementRef;
-
     if (!apiLoaded || videoId === null || element === null) {
-      destroyPlayer();
+      destroyVideo();
       return;
     }
-
     let player = currentPlayer;
-
-    if (player !== null && typeof player.loadVideoById !== 'undefined') {
-      debug$1('Switch video [ID: %s]', videoId);
-      player.loadVideoById(videoId);
+    if (player === null) {
+      debug('Create player [ID: %s]', videoId);
+      player = new Player(element, {
+        id: videoId,
+        autoplay,
+        autopause,
+        byline,
+        controls,
+        muted: initialMuted,
+        background: !controls
+      });
+      player.ready().then(() => setReady(true)).catch(e => {
+        debug('ERROR: %o', e);
+      });
     } 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();
+      debug('Load video [ID: %s]', videoId);
+      player.loadVideo(videoId).catch(e => {
+        debug('ERROR: %o', e);
+      });
+    }
+    playerRef.current = player;
+    playerElementRef.current = element;
+  }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]);
 
-        if (newDuration !== metadata.duration) {
-          setMetadata({ ...metadata,
-            duration: newDuration
-          });
+  // Bind player events
+  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;
         }
-
-        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
+        const newMetadata = {
+          duration: newDuration,
+          width: newWidth,
+          height: newHeight
         };
-        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';
+        setMetadata(newMetadata);
+        if (newMuted) {
+          setVolumeState(0);
         }
-
-        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
+        setLoaded(true);
+      });
+      debug('onLoaded [ID: %s]', videoId);
+    };
+    const onPlay = () => {
+      setPlayState({
+        playing: true,
+        paused: false,
+        ended: false,
+        buffering: false
+      });
+      debug('onPlay [ID: %s]', videoId);
+      player.getMuted().then(newMuted => {
+        if (!canceled && newMuted) {
+          setVolumeState(0);
         }
+      }).catch(() => {});
+    };
+    const onPause = () => {
+      setPlayState({
+        playing: false,
+        paused: true,
+        ended: false,
+        buffering: false
       });
-    }
-
-    playerRef.current = player;
-    playerElementRef.current = element;
-  }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
+      debug('onPause [ID: %s]', videoId);
+    };
+    const onVolumeChange = _ref2 => {
+      let {
+        volume: newVolume
+      } = _ref2;
+      setVolumeState(newVolume);
+      debug('onVolumeChange [ID: %s]', videoId);
+    };
+    const onEnded = () => {
+      setPlayState({
+        playing: false,
+        paused: false,
+        ended: true,
+        buffering: false
+      });
+      debug('onEnded [ID: %s]', videoId);
+    };
+    const onBufferStart = () => {
+      setPlayState({
+        playing: true,
+        paused: false,
+        ended: false,
+        buffering: true
+      });
+      debug('onBufferStart [ID: %s]', videoId);
+    };
+    const onBufferEnded = () => {
+      setPlayState({
+        playing: true,
+        paused: false,
+        ended: false,
+        buffering: false
+      });
+      debug('onBufferStart [ID: %s]', videoId);
+    };
+    debug('Bind events [ID: %s]', videoId);
+    player.on('loaded', onLoaded);
+    player.on('play', onPlay);
+    player.on('pause', onPause);
+    player.on('volumechange', onVolumeChange);
+    player.on('ended', onEnded);
+    player.on('bufferstart', onBufferStart);
+    player.on('bufferend', onBufferEnded);
+    return () => {
+      canceled = true;
+      debug('Unbind events [ID: %s]', videoId);
+      player.off('loaded', onLoaded);
+      player.off('play', onPlay);
+      player.off('pause', onPause);
+      player.off('volumechange', onVolumeChange);
+      player.off('ended', onEnded);
+      player.off('bufferstart', onBufferStart);
+      player.off('bufferend', onBufferEnded);
+    };
+  }, [videoId, playerRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
   const {
     playing
   } = playState;
@@ -1371,47 +1330,45 @@ function useYouTubePlayer(id) {
     setLoop,
     ready,
     currentTime,
-    muted,
-    loaded: ready,
+    loaded,
+    muted: volume === 0,
+    volume,
     ...metadata,
     ...playState
   };
 }
 
-const debug = createDebug('folklore:video:vimeo');
 const NO_PLAYER_ERROR = new Error('No player');
-
-const useVimeoPlayer = function (id) {
+function useYouTubePlayer(id) {
   let {
     width = 0,
     height = 0,
     duration = 0,
     autoplay = false,
-    autopause = true,
-    byline = false,
-    controls = false,
-    initialMuted = false,
+    controls = true,
     timeUpdateInterval = 1000,
+    muted: initialMuted = false,
+    onVolumeChange: customOnVolumeChange = null,
     onTimeUpdate: customOnTimeUpdate = null,
     getVideoId = url => {
-      if (url === null || url.match(/^[0-9]+$/) !== null) {
+      if (url === null || url.match(/^https?:/) === null) {
         return url;
       }
-
-      const match = url.match(/\/[0-9]+/);
-      return match !== null ? match[1] : null;
+      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] = useState(false);
-  const apiRef = useRef(null);
+  const debug = useMemo(() => createDebug('folklore:video:youtube'), []);
+  const [apiLoaded, setApiLoaded] = useState(typeof window !== 'undefined' && typeof window.YT !== 'undefined');
+  const apiRef = useRef(typeof window !== 'undefined' && typeof window.YT !== 'undefined' ? window.YT : null);
   const elementRef = useRef(null);
   const playerRef = useRef(null);
   const playerElementRef = useRef(elementRef.current);
   const elementHasChanged = elementRef.current !== playerElementRef.current;
   const videoId = useMemo(() => getVideoId(id), [id]);
   const [ready, setReady] = useState(false);
-  const [loaded, setLoaded] = useState(false);
-  const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
+  const [muted, setMuted] = useState(initialMuted);
   const [playState, setPlayState] = useState({
     playing: false,
     paused: false,
@@ -1422,14 +1379,12 @@ const useVimeoPlayer = function (id) {
     width,
     height,
     duration
-  }); // Load SDK
-
+  });
   useEffect(() => {
     let canceled = false;
-
-    if (!apiLoaded && id !== null) {
+    if (!apiLoaded && videoId !== null) {
       debug('Load API');
-      loadVimeo().then(api => {
+      loadYouTube().then(api => {
         if (!canceled) {
           apiRef.current = api;
           setApiLoaded(true);
@@ -1437,82 +1392,79 @@ const useVimeoPlayer = function (id) {
         }
       });
     }
-
     return () => {
       canceled = true;
     };
-  }, [id]);
+  }, [apiLoaded, videoId, setApiLoaded]);
   const play = useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null && typeof player.playVideo !== 'undefined' ? Promise.resolve(player.playVideo()) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
   const pause = useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null && typeof player.pauseVideo !== 'undefined' ? Promise.resolve(player.pauseVideo()) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  const setVolume = useCallback(newVolume => {
+  const setVolume = useCallback(volume => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR);
-  }, []);
+    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 = useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setVolume(0) : Promise.reject(NO_PLAYER_ERROR);
-  }, []);
+    return (player !== null && typeof player.mute !== 'undefined' ? Promise.resolve(player.mute()) : Promise.reject(NO_PLAYER_ERROR)).then(() => setMuted(true));
+  }, [setMuted]);
   const unmute = useCallback(() => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setVolume(1) : Promise.reject(NO_PLAYER_ERROR);
+    return (player !== null && typeof player.unMute !== 'undefined' ? Promise.resolve(player.unMute()) : Promise.reject(NO_PLAYER_ERROR)).then(() => setMuted(false));
   }, []);
   const seek = useCallback(time => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setCurrentTime(time) : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null && typeof player.seekTo !== 'undefined' ? Promise.resolve(player.seekTo(time)) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
   const setLoop = useCallback(loop => {
     const {
       current: player
     } = playerRef;
-    return player !== null ? player.setLoop(loop) : Promise.reject(NO_PLAYER_ERROR);
+    return player !== null && typeof player.setLoop !== 'undefined' ? Promise.resolve(player.setLoop(loop)) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  const destroyVideo = useCallback(() => {
-    const {
-      current: player
-    } = playerRef;
-
-    if (player !== null) {
-      debug('Unload video');
-      player.unload();
-    }
-
-    if (player !== null) {
-      debug('Unset video');
+  const destroyPlayer = useCallback(() => {
+    if (playerRef.current !== null) {
+      debug('Unset player');
       playerRef.current = null;
     }
   }, []);
+
+  // Detect iframe switch and destroy player
+
   useEffect(() => {
     const {
       current: currentPlayer
     } = playerRef;
-
     if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
       debug('iFrame switched');
-      destroyVideo();
+      destroyPlayer();
     }
-  }, [elementHasChanged]); // Create player
+  }, [elementHasChanged]);
 
+  // Create player
   useEffect(() => {
     const {
-      current: Player = null
+      current: YT = null
     } = apiRef;
     const {
       current: currentPlayer = null
@@ -1520,157 +1472,79 @@ const useVimeoPlayer = function (id) {
     const {
       current: element = null
     } = elementRef;
-
     if (!apiLoaded || videoId === null || element === null) {
-      destroyVideo();
+      destroyPlayer();
       return;
     }
-
     let player = currentPlayer;
-
-    if (player === null) {
-      debug('Create player [ID: %s]', videoId);
-      player = new Player(element, {
-        id: videoId,
-        autoplay,
-        autopause,
-        byline,
-        controls,
-        muted: initialMuted,
-        background: !controls
-      });
-      player.ready().then(() => setReady(true)).catch(e => {
-        debug('ERROR: %o', e);
-      });
+    if (player !== null && typeof player.loadVideoById !== 'undefined') {
+      debug('Switch video [ID: %s]', videoId);
+      player.loadVideoById(videoId);
     } else {
-      debug('Load video [ID: %s]', videoId);
-      player.loadVideo(videoId).catch(e => {
-        debug('ERROR: %o', e);
-      });
-    }
-
-    playerRef.current = player;
-    playerElementRef.current = element;
-  }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events
-
-  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;
+      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
+          });
         }
-
-        const newMetadata = {
-          duration: newDuration,
-          width: newWidth,
-          height: newHeight
+        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
         };
-        setMetadata(newMetadata);
-
-        if (newMuted) {
-          setVolumeState(0);
+        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';
         }
-
-        setLoaded(true);
-      });
-      debug('onLoaded [ID: %s]', videoId);
-    };
-
-    const onPlay = () => {
-      setPlayState({
-        playing: true,
-        paused: false,
-        ended: false,
-        buffering: false
-      });
-      debug('onPlay [ID: %s]', videoId);
-      player.getMuted().then(newMuted => {
-        if (!canceled && newMuted) {
-          setVolumeState(0);
+        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
         }
-      }).catch(() => {});
-    };
-
-    const onPause = () => {
-      setPlayState({
-        playing: false,
-        paused: true,
-        ended: false,
-        buffering: false
       });
-      debug('onPause [ID: %s]', videoId);
-    };
-
-    const onVolumeChange = _ref2 => {
-      let {
-        volume: newVolume
-      } = _ref2;
-      setVolumeState(newVolume);
-      debug('onVolumeChange [ID: %s]', videoId);
-    };
-
-    const onEnded = () => {
-      setPlayState({
-        playing: false,
-        paused: false,
-        ended: true,
-        buffering: false
-      });
-      debug('onEnded [ID: %s]', videoId);
-    };
-
-    const onBufferStart = () => {
-      setPlayState({
-        playing: true,
-        paused: false,
-        ended: false,
-        buffering: true
-      });
-      debug('onBufferStart [ID: %s]', videoId);
-    };
-
-    const onBufferEnded = () => {
-      setPlayState({
-        playing: true,
-        paused: false,
-        ended: false,
-        buffering: false
-      });
-      debug('onBufferStart [ID: %s]', videoId);
-    };
-
-    debug('Bind events [ID: %s]', videoId);
-    player.on('loaded', onLoaded);
-    player.on('play', onPlay);
-    player.on('pause', onPause);
-    player.on('volumechange', onVolumeChange);
-    player.on('ended', onEnded);
-    player.on('bufferstart', onBufferStart);
-    player.on('bufferend', onBufferEnded);
-    return () => {
-      canceled = true;
-      debug('Unbind events [ID: %s]', videoId);
-      player.off('loaded', onLoaded);
-      player.off('play', onPlay);
-      player.off('pause', onPause);
-      player.off('volumechange', onVolumeChange);
-      player.off('ended', onEnded);
-      player.off('bufferstart', onBufferStart);
-      player.off('bufferend', onBufferEnded);
-    };
-  }, [videoId, playerRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
+    }
+    playerRef.current = player;
+    playerElementRef.current = element;
+  }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
   const {
     playing
   } = playState;
@@ -1694,13 +1568,12 @@ const useVimeoPlayer = function (id) {
     setLoop,
     ready,
     currentTime,
-    loaded,
-    muted: volume === 0,
-    volume,
+    muted,
+    loaded: ready,
     ...metadata,
     ...playState
   };
-};
+}
 
 function useVideoPlayer(params) {
   const {
@@ -1720,7 +1593,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') {
@@ -1730,7 +1602,6 @@ function useVideoPlayer(params) {
   } else {
     player = nativePlayer;
   }
-
   const {
     playing = false,
     paused = false,
@@ -1770,7 +1641,6 @@ function useVideoPlayer(params) {
   }, [ended, customOnEnd]);
   useEffect(() => {
     const hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null;
-
     if (hasMetadata && customOnMetadataChange !== null) {
       customOnMetadataChange({
         width: metaWidth,
@@ -1786,10 +1656,8 @@ const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
   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
@@ -1797,19 +1665,16 @@ const useWindowScroll = function () {
   const [scroll, setScroll] = useState(currentScroll);
   const updateScroll = 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 = useCallback(() => {
     const newScroll = updateScroll();
-
     if (newScroll !== null && onChange !== null) {
       onChange(newScroll);
     }
@@ -1819,14 +1684,13 @@ const useWindowScroll = function () {
     onScroll();
   }, []);
   return scroll;
-};
+}
 
 const getWindowSize = () => ({
   width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
   height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
 });
 let currentSize = getWindowSize();
-
 function useWindowSize() {
   let {
     onChange = null
@@ -1834,18 +1698,15 @@ function useWindowSize() {
   const [size, setSize] = useState(currentSize);
   const updateSize = useCallback(() => {
     const newSize = getWindowSize();
-
     if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
       currentSize = newSize;
       setSize(newSize);
       return newSize;
     }
-
     return null;
   }, [setSize]);
   const onResize = useCallback(() => {
     const newSize = updateSize();
-
     if (newSize !== null && onChange !== null) {
       onChange(newSize);
     }