@folklore/hooks 0.0.27 → 0.0.29

package/dist/cjs.js

@@ -2,52 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var raf = require('raf');
 var react = require('react');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var services = require('@folklore/services');
 var createDebug = require('debug');
 var EventsManager = require('@folklore/events');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var cancelablePromise = require('cancelable-promise');
+var isNumber = require('lodash/isNumber');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var raf__default = /*#__PURE__*/_interopDefaultLegacy(raf);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
 var EventsManager__default = /*#__PURE__*/_interopDefaultLegacy(EventsManager);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
 
 function useCounter(desiredValue, _ref) {
-  var _ref$maxDuration = _ref.maxDuration,
-      maxDuration = _ref$maxDuration === void 0 ? 2000 : _ref$maxDuration,
-      _ref$speed = _ref.speed,
-      speed = _ref$speed === void 0 ? 1 / 10 : _ref$speed;
-
-  var _useState = react.useState(desiredValue),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      currentValue = _useState2[0],
-      setCurrentValue = _useState2[1];
-
-  react.useEffect(function () {
-    var animationFrame = null;
-    var startTime = null;
-    var duration = 0;
-    var canceled = false;
-    var startValue = currentValue;
-    var delta = desiredValue - startValue;
+  let {
+    maxDuration = 2000,
+    speed = 1 / 10
+  } = _ref;
+  const [currentValue, setCurrentValue] = react.useState(desiredValue);
+  react.useEffect(() => {
+    let animationFrame = null;
+    let startTime = null;
+    let duration = 0;
+    let canceled = false;
+    const startValue = currentValue;
+    const delta = desiredValue - startValue;
 
     function loop() {
       if (canceled) {
         return;
       }
 
-      var currentTime = Date.now();
-      var elapsedTime = currentTime - startTime;
-      var progress = Math.min(elapsedTime / duration, 1);
-      var newValue = Math.round(startValue + progress * delta);
+      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) {
@@ -61,7 +53,7 @@ function useCounter(desiredValue, _ref) {
       animationFrame = raf__default["default"](loop);
     }
 
-    return function () {
+    return () => {
       canceled = true;
 
       if (animationFrame !== null) {
@@ -73,28 +65,17 @@ function useCounter(desiredValue, _ref) {
 }
 
 function usePlayerCurrentTime(player) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? null : _ref$id,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$updateInterval = _ref.updateInterval,
-      updateInterval = _ref$updateInterval === void 0 ? 1000 : _ref$updateInterval,
-      _ref$onUpdate = _ref.onUpdate,
-      customOnUpdate = _ref$onUpdate === void 0 ? null : _ref$onUpdate,
-      _ref$getCurrentTime = _ref.getCurrentTime,
-      getCurrentTime = _ref$getCurrentTime === void 0 ? function (p) {
-    return p.currentTime;
-  } : _ref$getCurrentTime;
-
-  var _useState = react.useState(0),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      currentTime = _useState2[0],
-      setCurrentTime = _useState2[1];
-
-  var realCurrentTime = react.useRef(currentTime);
-  var lastIdRef = react.useRef(id);
-  var idChanged = lastIdRef.current !== id;
+  let {
+    id = null,
+    disabled = false,
+    updateInterval = 1000,
+    onUpdate: customOnUpdate = null,
+    getCurrentTime = p => p.currentTime
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const [currentTime, setCurrentTime] = react.useState(0);
+  const realCurrentTime = react.useRef(currentTime);
+  const lastIdRef = react.useRef(id);
+  const idChanged = lastIdRef.current !== id;
 
   if (idChanged) {
     realCurrentTime.current = 0;
@@ -102,14 +83,14 @@ function usePlayerCurrentTime(player) {
   } // Check time update
 
 
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (disabled || player === null) {
-      return function () {};
+      return () => {};
     }
 
-    var canceled = false;
+    let canceled = false;
 
-    var updateTime = function updateTime(time) {
+    const updateTime = time => {
       if (canceled) {
         return;
       }
@@ -122,8 +103,8 @@ function usePlayerCurrentTime(player) {
       }
     };
 
-    var interval = setInterval(function () {
-      var time = getCurrentTime(player);
+    const interval = setInterval(() => {
+      const time = getCurrentTime(player);
 
       if (typeof time.then !== 'undefined') {
         time.then(updateTime);
@@ -131,7 +112,7 @@ function usePlayerCurrentTime(player) {
         updateTime(time);
       }
     }, updateInterval);
-    return function () {
+    return () => {
       canceled = true;
       clearInterval(interval);
     };
@@ -139,115 +120,67 @@ function usePlayerCurrentTime(player) {
   return realCurrentTime.current;
 }
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var noPlayerError$1 = new Error('No player');
-var debug$3 = createDebug__default["default"]('folklore:video:dailymotion');
-
-var useDailymotionPlayer = function useDailymotionPlayer() {
-  var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _params$width = params.width,
-      width = _params$width === void 0 ? 0 : _params$width,
-      _params$height = params.height,
-      height = _params$height === void 0 ? 0 : _params$height,
-      _params$duration = params.duration,
-      duration = _params$duration === void 0 ? 0 : _params$duration,
-      _params$autoplay = params.autoplay,
-      autoplay = _params$autoplay === void 0 ? false : _params$autoplay,
-      _params$muted = params.muted,
-      initialMuted = _params$muted === void 0 ? false : _params$muted,
-      _params$start = params.start,
-      start = _params$start === void 0 ? 0 : _params$start,
-      _params$controls = params.controls,
-      controls = _params$controls === void 0 ? true : _params$controls,
-      _params$queueAutoplay = params.queueAutoplayNext,
-      queueAutoplayNext = _params$queueAutoplay === void 0 ? false : _params$queueAutoplay,
-      _params$queueEnable = params.queueEnable,
-      queueEnable = _params$queueEnable === void 0 ? false : _params$queueEnable,
-      _params$sharingEnable = params.sharingEnable,
-      sharingEnable = _params$sharingEnable === void 0 ? false : _params$sharingEnable,
-      _params$uiLogo = params.uiLogo,
-      uiLogo = _params$uiLogo === void 0 ? false : _params$uiLogo,
-      _params$uiStartScreen = params.uiStartScreenInfo,
-      uiStartScreenInfo = _params$uiStartScreen === void 0 ? true : _params$uiStartScreen,
-      _params$timeUpdateInt = params.timeUpdateInterval,
-      timeUpdateInterval = _params$timeUpdateInt === void 0 ? 1000 : _params$timeUpdateInt,
-      _params$onTimeUpdate = params.onTimeUpdate,
-      customOnTimeUpdate = _params$onTimeUpdate === void 0 ? null : _params$onTimeUpdate,
-      _params$getVideoId = params.getVideoId,
-      getVideoId = _params$getVideoId === void 0 ? function (url) {
-    if (url === null || url.match(/^https?:/) === null) {
-      return url;
-    }
-
-    var match = url.match(/\/video\/([^/?]+)/);
-    return match !== null ? match[1] : null;
-  } : _params$getVideoId;
-
-  var _useState = react.useState(typeof window.DM !== 'undefined'),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      apiLoaded = _useState2[0],
-      setApiLoaded = _useState2[1];
-
-  var _useState3 = react.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      playerReady = _useState4[0],
-      setPlayerReady = _useState4[1];
-
-  var _useState5 = react.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      loaded = _useState6[0],
-      setLoaded = _useState6[1];
-
-  var apiRef = react.useRef(typeof window.DM !== 'undefined' ? window.DM : null);
-  var ready = apiLoaded && playerReady;
-  var videoId = react.useMemo(function () {
-    return getVideoId(id);
-  }, [id]);
-  var elementRef = react.useRef(null);
-  var playerRef = react.useRef(null);
-  var playerElementRef = react.useRef(elementRef.current);
-  var elementHasChanged = elementRef.current !== playerElementRef.current;
-
-  var _useState7 = react.useState(initialMuted),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      muted = _useState8[0],
-      setMuted = _useState8[1];
-
-  var _useState9 = react.useState(initialMuted ? 0 : 1),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      volume = _useState10[0],
-      setVolumeState = _useState10[1];
-
-  var _useState11 = react.useState({
+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] : {};
+  const {
+    width = 0,
+    height = 0,
+    duration = 0,
+    autoplay = false,
+    muted: initialMuted = false,
+    start = 0,
+    controls = true,
+    queueAutoplayNext = false,
+    queueEnable = false,
+    sharingEnable = false,
+    uiLogo = false,
+    uiStartScreenInfo = true,
+    timeUpdateInterval = 1000,
+    onTimeUpdate: customOnTimeUpdate = null,
+    getVideoId = url => {
+      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 [playerReady, setPlayerReady] = react.useState(false);
+  const [loaded, setLoaded] = react.useState(false);
+  const apiRef = react.useRef(typeof window.DM !== 'undefined' ? window.DM : null);
+  const ready = apiLoaded && playerReady;
+  const videoId = react.useMemo(() => getVideoId(id), [id]);
+  const elementRef = react.useRef(null);
+  const playerRef = react.useRef(null);
+  const playerElementRef = react.useRef(elementRef.current);
+  const elementHasChanged = elementRef.current !== playerElementRef.current;
+  const [muted, setMuted] = react.useState(initialMuted);
+  const [volume, setVolumeState] = react.useState(initialMuted ? 0 : 1);
+  const [playState, setPlayState] = react.useState({
     playing: false,
     paused: false,
     ended: false,
     buffering: false,
     adPlaying: false
-  }),
-      _useState12 = _slicedToArray__default["default"](_useState11, 2),
-      playState = _useState12[0],
-      setPlayState = _useState12[1];
-
-  var _useState13 = react.useState({
-    width: width,
-    height: height,
-    duration: duration
-  }),
-      _useState14 = _slicedToArray__default["default"](_useState13, 2),
-      metadata = _useState14[0],
-      setMetadata = _useState14[1]; // Load SDK
-
+  });
+  const [metadata, setMetadata] = react.useState({
+    width,
+    height,
+    duration
+  }); // Load SDK
 
-  react.useEffect(function () {
-    var canceled = false;
+  react.useEffect(() => {
+    let canceled = false;
 
     if (!apiLoaded && videoId !== null) {
       debug$3('Load API');
-      services.loadDailymotion().then(function (api) {
+      services.loadDailymotion().then(api => {
         if (!canceled) {
           apiRef.current = api;
           setApiLoaded(true);
@@ -256,35 +189,38 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
       });
     }
 
-    return function () {
+    return () => {
       canceled = true;
     };
   }, [videoId, apiLoaded, setApiLoaded]); // Create or update player
 
-  react.useEffect(function () {
-    var _apiRef$current = apiRef.current,
-        DM = _apiRef$current === void 0 ? null : _apiRef$current;
-    var _playerRef$current = playerRef.current,
-        currentPlayer = _playerRef$current === void 0 ? null : _playerRef$current;
-    var _elementRef$current = elementRef.current,
-        element = _elementRef$current === void 0 ? null : _elementRef$current;
+  react.useEffect(() => {
+    const {
+      current: DM = null
+    } = apiRef;
+    const {
+      current: currentPlayer = null
+    } = playerRef;
+    const {
+      current: element = null
+    } = elementRef;
 
     if (!apiLoaded || videoId === null || element === null) {
       return;
     }
 
-    var playerParams = {
+    const playerParams = {
       'autoplay-d': autoplay,
       // muted,
-      start: start,
-      controls: controls,
+      start,
+      controls,
       'queue-autoplay-next': queueAutoplayNext,
       'queue-enable': queueEnable,
       'sharing-enable': sharingEnable,
       'ui-logo': uiLogo,
       'ui-start-screen-info': uiStartScreenInfo
     };
-    var player = currentPlayer;
+    let player = currentPlayer;
 
     if (player !== null) {
       player.load(videoId, {
@@ -294,8 +230,8 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     } else {
       player = DM.player(element, {
         video: videoId,
-        width: width,
-        height: height,
+        width,
+        height,
         params: playerParams
       });
       debug$3('Create player [ID: %s]', videoId);
@@ -308,16 +244,17 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     playerRef.current = player;
     playerElementRef.current = element;
   }, [apiLoaded, elementHasChanged, videoId, width, height, autoplay, muted, start, controls, queueAutoplayNext, queueEnable, sharingEnable, uiLogo, uiStartScreenInfo]);
-  react.useEffect(function () {
-    var _playerRef$current2 = playerRef.current,
-        player = _playerRef$current2 === void 0 ? null : _playerRef$current2;
+  react.useEffect(() => {
+    const {
+      current: player = null
+    } = playerRef;
 
     if (player === null) {
-      return function () {};
+      return () => {};
     }
 
-    var currentPlayState = playState;
-    var currentMetadata = metadata;
+    let currentPlayState = playState;
+    let currentMetadata = metadata;
 
     function onPlaybackReady() {
       setLoaded(true);
@@ -325,17 +262,17 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     }
 
     function onLoadedMetadata() {
-      currentMetadata = _objectSpread$4(_objectSpread$4({}, currentMetadata), {}, {
+      currentMetadata = { ...currentMetadata,
         duration: player.duration
-      });
+      };
       setMetadata(currentMetadata);
       debug$3('onLoadedMetadata [ID: %s]', videoId);
     }
 
     function onDurationChange() {
-      currentMetadata = _objectSpread$4(_objectSpread$4({}, currentMetadata), {}, {
+      currentMetadata = { ...currentMetadata,
         duration: player.duration
-      });
+      };
       setMetadata(currentMetadata);
       debug$3('onDurationChange [ID: %s]', videoId);
     }
@@ -347,63 +284,63 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     }
 
     function onPlay() {
-      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+      currentPlayState = { ...currentPlayState,
         playing: true,
         paused: false,
         ended: false
-      });
+      };
       setPlayState(currentPlayState);
       debug$3('onPlay [ID: %s]', videoId);
     }
 
     function onPause() {
-      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+      currentPlayState = { ...currentPlayState,
         playing: false,
         paused: true,
         ended: false
-      });
+      };
       setPlayState(currentPlayState);
       debug$3('onPause [ID: %s]', videoId);
     }
 
     function onEnd() {
-      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+      currentPlayState = { ...currentPlayState,
         playing: false,
         paused: false,
         ended: true
-      });
+      };
       setPlayState(currentPlayState);
       debug$3('onEnd [ID: %s]', videoId);
     }
 
     function onPlaying() {
-      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+      currentPlayState = { ...currentPlayState,
         buffering: false
-      });
+      };
       setPlayState(currentPlayState);
       debug$3('onPlaying [ID: %s]', videoId);
     }
 
     function onWaiting() {
-      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+      currentPlayState = { ...currentPlayState,
         buffering: true
-      });
+      };
       setPlayState(currentPlayState);
       debug$3('onWaiting [ID: %s]', videoId);
     }
 
     function onAdStart() {
-      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+      currentPlayState = { ...currentPlayState,
         adPlaying: true
-      });
+      };
       setPlayState(currentPlayState);
       debug$3('onAdStart [ID: %s]', videoId);
     }
 
     function onAdEnd() {
-      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+      currentPlayState = { ...currentPlayState,
         adPlaying: false
-      });
+      };
       setPlayState(currentPlayState);
       debug$3('onAdEnd [ID: %s]', videoId);
     }
@@ -419,7 +356,7 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
     player.addEventListener('waiting', onWaiting);
     player.addEventListener('ad_start', onAdStart);
     player.addEventListener('ad_end', onAdEnd);
-    return function () {
+    return () => {
       player.removeEventListener('playback_ready', onPlaybackReady);
       player.removeEventListener('loadedmetadata', onLoadedMetadata);
       player.removeEventListener('durationchange', onDurationChange);
@@ -433,63 +370,79 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
       player.removeEventListener('ad_end', onAdEnd);
     };
   }, [playerRef.current, playerReady, videoId, setLoaded, setPlayState, setMetadata, setVolumeState, setMuted]);
-  var play = react.useCallback(function () {
-    var player = playerRef.current;
+  const play = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.play() : Promise.reject(noPlayerError$1);
   }, []);
-  var pause = react.useCallback(function () {
-    var player = playerRef.current;
+  const pause = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.pause() : Promise.reject(noPlayerError$1);
   }, []);
-  var setVolume = react.useCallback(function (newVolume) {
-    var player = playerRef.current;
+  const setVolume = react.useCallback(newVolume => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setVolume(newVolume) : Promise.reject(noPlayerError$1);
   }, []);
-  var mute = react.useCallback(function () {
-    var player = playerRef.current;
+  const mute = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setMute(true) : Promise.reject(noPlayerError$1);
   }, []);
-  var unmute = react.useCallback(function () {
-    var player = playerRef.current;
+  const unmute = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setMute(false) : Promise.reject(noPlayerError$1);
   }, []);
-  var seek = react.useCallback(function (time) {
-    var player = playerRef.current;
+  const seek = react.useCallback(time => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.seek(time) : Promise.reject(noPlayerError$1);
   }, []);
-  var playing = playState.playing;
-  var currentTime = usePlayerCurrentTime(playerRef.current, {
+  const {
+    playing
+  } = playState;
+  const currentTime = usePlayerCurrentTime(playerRef.current, {
     id: videoId,
     disabled: !playing || timeUpdateInterval === null,
     updateInterval: timeUpdateInterval,
     onUpdate: customOnTimeUpdate
   });
-  return _objectSpread$4(_objectSpread$4({
+  return {
     ref: elementRef,
     player: playerRef.current,
-    ready: ready,
-    play: play,
-    pause: pause,
-    mute: mute,
-    unmute: unmute,
-    setVolume: setVolume,
-    seek: seek,
-    currentTime: currentTime,
-    loaded: loaded,
-    muted: muted,
-    volume: volume
-  }, metadata), playState);
+    ready,
+    play,
+    pause,
+    mute,
+    unmute,
+    setVolume,
+    seek,
+    currentTime,
+    loaded,
+    muted,
+    volume,
+    ...metadata,
+    ...playState
+  };
 };
 
-var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
+const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
 
-var useDocumentEvent = function useDocumentEvent(event, callback) {
-  react.useEffect(function () {
+const useDocumentEvent = (event, callback) => {
+  react.useEffect(() => {
     if (eventsManager$1 !== null && callback !== null) {
       eventsManager$1.subscribe(event, callback);
     }
 
-    return function () {
+    return () => {
       if (eventsManager$1 !== null && callback !== null) {
         eventsManager$1.unsubscribe(event, callback);
       }
@@ -497,15 +450,15 @@ var useDocumentEvent = function useDocumentEvent(event, callback) {
   }, [event, callback]);
 };
 
-var eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
+const eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
 
-var useWindowEvent = function useWindowEvent(event, callback) {
-  react.useEffect(function () {
+const useWindowEvent = (event, callback) => {
+  react.useEffect(() => {
     if (eventsManager !== null && callback !== null) {
       eventsManager.subscribe(event, callback);
     }
 
-    return function () {
+    return () => {
       if (eventsManager !== null && callback !== null) {
         eventsManager.unsubscribe(event, callback);
       }
@@ -514,10 +467,12 @@ var useWindowEvent = function useWindowEvent(event, callback) {
 };
 
 function useKeyboard() {
-  var keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var onKeyDown = react.useCallback(function (event) {
-    var key = event.key;
-    var callback = null;
+  let keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  const onKeyDown = react.useCallback(event => {
+    const {
+      key
+    } = event;
+    let callback = null;
 
     if (typeof keyMap === 'function') {
       callback = keyMap;
@@ -529,9 +484,11 @@ function useKeyboard() {
       callback(event);
     }
   }, [keyMap]);
-  var onKeyUp = react.useCallback(function (event) {
-    var key = event.key;
-    var callback = null;
+  const onKeyUp = react.useCallback(event => {
+    const {
+      key
+    } = event;
+    let callback = null;
 
     if (typeof keyMap === 'function') {
       callback = keyMap;
@@ -547,68 +504,274 @@ function useKeyboard() {
   useWindowEvent('keyup', keyMap !== null ? onKeyUp : null);
 }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var debug$2 = createDebug__default["default"]('folklore:video:native');
-var noPlayerError = new Error('No player');
-
-var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 0 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 0 : _ref$height,
-      _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? 0 : _ref$duration,
-      _ref$initialMuted = _ref.initialMuted,
-      initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
-      _ref$timeUpdateInterv = _ref.timeUpdateInterval,
-      timeUpdateInterval = _ref$timeUpdateInterv === void 0 ? 1000 : _ref$timeUpdateInterv,
-      _ref$onTimeUpdate = _ref.onTimeUpdate,
-      customOnTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate;
-
-  var elementRef = react.useRef(null);
-
-  var _useState = react.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      loaded = _useState2[0],
-      setLoaded = _useState2[1];
-
-  var _useState3 = react.useState(initialMuted ? 0 : 1),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      volume = _useState4[0],
-      setVolumeState = _useState4[1];
-
-  var _useState5 = react.useState({
+const useItemsPaginated = function (loader) {
+  let {
+    page = null,
+    count = 10,
+    pages: initialPages = null,
+    getPageFromResponse = _ref2 => {
+      let {
+        pagination: {
+          page: currentPage,
+          last_page: lastPage,
+          total
+        },
+        data: items
+      } = _ref2;
+      return {
+        page: parseInt(currentPage, 10),
+        lastPage: parseInt(lastPage, 10),
+        total: parseInt(total, 10),
+        items
+      };
+    },
+    onLoaded = null,
+    onError = null,
+    query = null
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const lastState = react.useRef(null);
+  const initialState = react.useMemo(() => {
+    const finalInitialPages = initialPages !== null ? initialPages.map(it => getPageFromResponse(it)) : null;
+    const finalLastPage = finalInitialPages !== null ? finalInitialPages.reduce((currentLastPage, _ref3) => {
+      let {
+        lastPage: initialLastPage
+      } = _ref3;
+      return initialLastPage > currentLastPage ? initialLastPage : currentLastPage;
+    }, -1) : -1;
+    return {
+      lastPage: finalLastPage,
+      total: finalInitialPages !== null ? finalInitialPages[0].total : 0,
+      loaded: finalLastPage !== -1 && finalInitialPages !== null && finalInitialPages.length === finalLastPage,
+      loading: false,
+      pages: finalInitialPages !== null ? finalInitialPages : null
+    };
+  }, [initialPages]);
+  const currentPagesRef = react.useRef(initialState.pages);
+  const [state, setState] = react.useState(initialState);
+  const {
+    lastPage,
+    loaded,
+    loading,
+    pages,
+    total
+  } = state;
+  const items = pages !== null ? pages.reduce((pagesItems, _ref4) => {
+    let {
+      items: pageItems
+    } = _ref4;
+    return pagesItems.concat(pageItems);
+  }, []) : null;
+
+  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,
+        loading: false
+      });
+      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) => {
+      const {
+        page: aPage = null
+      } = a;
+      const {
+        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;
+    updateState({
+      loaded: true,
+      loading: false,
+      lastPage: newPage.lastPage,
+      total: newPage.total,
+      pages: newPages
+    });
+    return newPage;
+  };
+
+  const getNextPage = () => {
+    const allPages = lastPage !== -1 ? Array.call(null, ...Array(lastPage)).map((it, index) => index + 1) : [];
+    const currentPages = currentPagesRef.current || [];
+    const remainingPages = allPages.filter(pageNumber => currentPages.findIndex(it => it.page === pageNumber) === -1);
+    const firstItem = remainingPages.length > 0 ? remainingPages.shift() : null;
+    return firstItem !== null ? firstItem : null;
+  };
+
+  const loadItems = requestPage => {
+    updateState({
+      loading: true
+    });
+    return cancelablePromise.cancelable(loader(requestPage, count)).then(response => updateFromResponse(response)).catch(error => updateFromResponse(null, error)).then(response => {
+      if (onLoaded !== null) {
+        onLoaded(response);
+      }
+
+      return response;
+    }).catch(error => {
+      if (onError !== null) {
+        onError(error);
+      }
+    });
+  };
+
+  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
+
+
+  react.useEffect(() => {
+    const hadState = lastState.current !== null;
+
+    if (hadState) {
+      currentPagesRef.current = null;
+      updateState({
+        loaded: true,
+        loading: false,
+        lastPage: null,
+        total: 0,
+        pages: []
+      });
+    }
+  }, [query]);
+  react.useEffect(() => {
+    const hadState = lastState.current !== null;
+    lastState.current = initialState;
+
+    if (hadState) {
+      currentPagesRef.current = initialState.pages;
+      setState(initialState);
+    }
+  }, [initialState]);
+  react.useEffect(() => {
+    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();
+      }
+    };
+  }, [loader, page]);
+  const currentPage = pages !== null ? pages.find(_ref5 => {
+    let {
+      page: pageNumber
+    } = _ref5;
+    return parseInt(pageNumber, 10) === parseInt(page, 10);
+  }) || null : null;
+  return {
+    items,
+    pages,
+    currentPage,
+    pageItems: currentPage !== null ? currentPage.items : null,
+    total,
+    lastPage,
+    loaded,
+    allLoaded: lastPage !== -1 && pages.length === lastPage,
+    loading,
+    loadNextPage,
+    loadPage
+  };
+};
+
+const debug$2 = createDebug__default["default"]('folklore:video:native');
+const noPlayerError = new Error('No player');
+
+const useNativeVideoPlayer = function (url) {
+  let {
+    width = 0,
+    height = 0,
+    duration = 0,
+    initialMuted = false,
+    timeUpdateInterval = 1000,
+    onTimeUpdate: customOnTimeUpdate = null
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const elementRef = react.useRef(null);
+  const [loaded, setLoaded] = react.useState(false);
+  const [volume, setVolumeState] = react.useState(initialMuted ? 0 : 1);
+  const [playState, setPlayState] = react.useState({
     playing: false,
     paused: false,
     ended: false,
     buffering: false
-  }),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      playState = _useState6[0],
-      setPlayState = _useState6[1];
-
-  var _useState7 = react.useState({
-    width: width,
-    height: height,
-    duration: duration
-  }),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      metadata = _useState8[0],
-      setMetadata = _useState8[1];
-
-  var play = react.useCallback(function () {
-    var player = elementRef.current;
+  });
+  const [metadata, setMetadata] = react.useState({
+    width,
+    height,
+    duration
+  });
+  const play = react.useCallback(() => {
+    const {
+      current: player
+    } = elementRef;
     return player !== null ? player.play() : Promise.reject(noPlayerError);
   }, []);
-  var pause = react.useCallback(function () {
-    var player = elementRef.current;
+  const pause = react.useCallback(() => {
+    const {
+      current: player
+    } = elementRef;
     return player !== null ? player.pause() : Promise.reject(noPlayerError);
   }, []);
-  var setVolume = react.useCallback(function (newVolume) {
-    var player = elementRef.current;
+  const setVolume = react.useCallback(newVolume => {
+    const {
+      current: player
+    } = elementRef;
 
     if (player !== null) {
       player.volume = newVolume;
@@ -617,8 +780,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
 
     return Promise.reject(noPlayerError);
   }, []);
-  var mute = react.useCallback(function () {
-    var player = elementRef.current;
+  const mute = react.useCallback(() => {
+    const {
+      current: player
+    } = elementRef;
 
     if (player !== null) {
       player.muted = true;
@@ -627,8 +792,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
 
     return Promise.reject(noPlayerError);
   }, []);
-  var unmute = react.useCallback(function () {
-    var player = elementRef.current;
+  const unmute = react.useCallback(() => {
+    const {
+      current: player
+    } = elementRef;
 
     if (player !== null) {
       player.muted = false;
@@ -637,8 +804,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
 
     return Promise.reject(noPlayerError);
   }, []);
-  var seek = react.useCallback(function (newTime) {
-    var player = elementRef.current;
+  const seek = react.useCallback(newTime => {
+    const {
+      current: player
+    } = elementRef;
 
     if (player !== null) {
       player.currentTime = newTime;
@@ -647,8 +816,10 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
 
     return Promise.reject(noPlayerError);
   }, []);
-  var setLoop = react.useCallback(function (newLoop) {
-    var player = elementRef.current;
+  const setLoop = react.useCallback(newLoop => {
+    const {
+      current: player
+    } = elementRef;
 
     if (player !== null) {
       player.loop = newLoop;
@@ -658,20 +829,22 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
     return Promise.reject(noPlayerError);
   }, []); // Bind player events
 
-  react.useEffect(function () {
-    var player = elementRef.current;
+  react.useEffect(() => {
+    const {
+      current: player
+    } = elementRef;
 
     if (player === null) {
-      return function () {};
+      return () => {};
     }
 
-    var onCanPlay = function onCanPlay() {
+    const onCanPlay = () => {
       setLoaded(true);
       debug$2('onCanPlay [URL: %s]', url);
     };
 
-    var onMetadataLoaded = function onMetadataLoaded() {
-      var newMetadata = {
+    const onMetadataLoaded = () => {
+      const newMetadata = {
         duration: player.duration,
         width: player.videoWidth,
         height: player.videoHeight
@@ -680,7 +853,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
       debug$2('onMetadataLoaded [URL: %s]', url);
     };
 
-    var onPlay = function onPlay() {
+    const onPlay = () => {
       setPlayState({
         playing: true,
         paused: false,
@@ -690,7 +863,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
       debug$2('onPlay [URL: %s]', url);
     };
 
-    var onPause = function onPause() {
+    const onPause = () => {
       setPlayState({
         playing: false,
         paused: true,
@@ -700,7 +873,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
       debug$2('onPause [URL: %s]', url);
     };
 
-    var onEnded = function onEnded() {
+    const onEnded = () => {
       setPlayState({
         playing: false,
         paused: false,
@@ -716,7 +889,7 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
     player.addEventListener('play', onPlay);
     player.addEventListener('pause', onPause);
     player.addEventListener('ended', onEnded);
-    return function () {
+    return () => {
       debug$2('Unbind events [URL: %s]', url);
       player.removeEventListener('canplay', onCanPlay);
       player.removeEventListener('metadataloaded', onMetadataLoaded);
@@ -725,90 +898,79 @@ var useNativeVideoPlayer = function useNativeVideoPlayer(url) {
       player.removeEventListener('ended', onEnded);
     };
   }, [url, elementRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
-  var playing = playState.playing;
-  var currentTime = usePlayerCurrentTime(elementRef.current, {
+  const {
+    playing
+  } = playState;
+  const currentTime = usePlayerCurrentTime(elementRef.current, {
     id: url,
     disabled: !playing || timeUpdateInterval === null,
     updateInterval: timeUpdateInterval,
     onUpdate: customOnTimeUpdate
   });
-  return _objectSpread$3(_objectSpread$3({
+  return {
     ref: elementRef,
     player: elementRef.current,
-    play: play,
-    pause: pause,
-    mute: mute,
-    unmute: unmute,
-    setVolume: setVolume,
-    seek: seek,
-    setLoop: setLoop,
+    play,
+    pause,
+    mute,
+    unmute,
+    setVolume,
+    seek,
+    setLoop,
     ready: true,
-    currentTime: currentTime,
-    loaded: loaded,
+    currentTime,
+    loaded,
     muted: volume === 0,
-    volume: volume
-  }, metadata), playState);
+    volume,
+    ...metadata,
+    ...playState
+  };
 };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+const observersCache = new Map();
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var observersCache = new Map();
-
-var getOptionsKey = function getOptionsKey(_ref) {
-  var _ref$root = _ref.root,
-      root = _ref$root === void 0 ? null : _ref$root,
-      rootMargin = _ref.rootMargin,
-      _ref$threshold = _ref.threshold,
-      threshold = _ref$threshold === void 0 ? null : _ref$threshold;
+const getOptionsKey = _ref => {
+  let {
+    root = null,
+    rootMargin,
+    threshold = null
+  } = _ref;
   return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
 };
 
-var createObserver = function createObserver(Observer) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var subscribers = [];
+const createObserver = function (Observer) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let subscribers = [];
 
-  var addSubscriber = function addSubscriber(element, callback) {
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
+  const addSubscriber = (element, callback) => {
+    const currentSubscriber = subscribers.find(it => it.element === element) || null;
 
     if (currentSubscriber !== null) {
-      return subscribers.map(function (it) {
-        return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread$2(_objectSpread$2({}, it), {}, {
-          callbacks: [].concat(_toConsumableArray__default["default"](it.callbacks), [callback])
-        }) : it;
-      }).filter(function (it) {
-        return it.callbacks.length > 0;
-      });
+      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 [].concat(_toConsumableArray__default["default"](subscribers), [{
-      element: element,
+    return [...subscribers, {
+      element,
       callbacks: [callback]
-    }]);
+    }];
   };
 
-  var removeSubscriber = function removeSubscriber(element, callback) {
-    return subscribers.map(function (it) {
-      return it.element === element ? _objectSpread$2(_objectSpread$2({}, it), {}, {
-        callbacks: it.callbacks.filter(function (subCallback) {
-          return subCallback !== callback;
-        })
-      }) : it;
-    }).filter(function (it) {
-      return it.callbacks.length > 0;
-    });
-  };
+  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);
 
-  var onUpdate = function onUpdate(entries) {
-    entries.forEach(function (entry) {
-      subscribers.forEach(function (_ref2) {
-        var element = _ref2.element,
-            callbacks = _ref2.callbacks;
+  const onUpdate = entries => {
+    entries.forEach(entry => {
+      subscribers.forEach(_ref2 => {
+        let {
+          element,
+          callbacks
+        } = _ref2;
 
         if (element === entry.target) {
-          callbacks.forEach(function (callback) {
+          callbacks.forEach(callback => {
             callback(entry);
           });
         }
@@ -816,33 +978,29 @@ var createObserver = function createObserver(Observer) {
     });
   };
 
-  var observer = new Observer(onUpdate, options);
+  const observer = new Observer(onUpdate, options);
 
-  var unsubscribe = function unsubscribe(element) {
-    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  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(function (subscriber) {
+      subscribers.forEach(subscriber => {
         observer.observe(subscriber.element);
       });
       return;
     }
 
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
+    const currentSubscriber = subscribers.find(it => it.element === element) || null;
 
     if (currentSubscriber === null) {
       observer.unobserve(element);
     }
   };
 
-  var subscribe = function subscribe(element, callback) {
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
+  const subscribe = (element, callback) => {
+    const currentSubscriber = subscribers.find(it => it.element === element) || null;
     subscribers = addSubscriber(element, callback);
 
     if (currentSubscriber === null) {
@@ -851,21 +1009,21 @@ var createObserver = function createObserver(Observer) {
   };
 
   return {
-    subscribe: subscribe,
-    unsubscribe: unsubscribe,
-    observer: observer
+    subscribe,
+    unsubscribe,
+    observer
   };
 };
 
-var getObserver = function getObserver(Observer) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var observerKey = getOptionsKey(options);
+const getObserver = function (Observer) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const observerKey = getOptionsKey(options);
 
   if (!observersCache.has(Observer)) {
     observersCache.set(Observer, {});
   }
 
-  var observers = observersCache.get(Observer);
+  const observers = observersCache.get(Observer);
 
   if (typeof observers[observerKey] === 'undefined') {
     observers[observerKey] = createObserver(Observer, options);
@@ -874,37 +1032,31 @@ var getObserver = function getObserver(Observer) {
 
   return observers[observerKey];
 };
-var useObserver = function useObserver(Observer) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _opts$root = opts.root,
-      root = _opts$root === void 0 ? null : _opts$root,
-      _opts$rootMargin = opts.rootMargin,
-      rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
-      _opts$threshold = opts.threshold,
-      threshold = _opts$threshold === void 0 ? null : _opts$threshold,
-      _opts$disabled = opts.disabled,
-      disabled = _opts$disabled === void 0 ? false : _opts$disabled;
-
-  var _useState = react.useState(initialEntry),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      entry = _useState2[0],
-      setEntry = _useState2[1];
-
-  var nodeRef = react.useRef(null);
-  var currentElement = react.useRef(null);
-  var elementChanged = nodeRef.current !== currentElement.current;
-  react.useEffect(function () {
-    var nodeElement = nodeRef.current;
-
-    var callback = function callback(newEntry) {
-      return setEntry(newEntry);
-    };
-
-    var unsubscribe = null;
+const useObserver = function (Observer) {
+  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    root = null,
+    rootMargin = null,
+    threshold: defaultThreshold = null,
+    disabled = false
+  } = opts;
+  const [entry, setEntry] = react.useState(initialEntry);
+  const threshold = react.useMemo(() => defaultThreshold, [defaultThreshold]);
+  const nodeRef = react.useRef(null);
+  const currentElement = react.useRef(null);
+  const elementChanged = nodeRef.current !== currentElement.current;
+  react.useEffect(() => {
+    const {
+      current: nodeElement
+    } = nodeRef;
+
+    const callback = newEntry => setEntry(newEntry);
+
+    let unsubscribe = null;
 
     if (nodeElement !== null) {
-      var newOpts = {};
+      const newOpts = {};
 
       if (root !== null) {
         newOpts.root = root;
@@ -918,16 +1070,16 @@ var useObserver = function useObserver(Observer) {
         newOpts.threshold = threshold;
       }
 
-      var _getObserver = getObserver(Observer, newOpts),
-          subscribe = _getObserver.subscribe,
-          localUnsubscribe = _getObserver.unsubscribe;
-
+      const {
+        subscribe,
+        unsubscribe: localUnsubscribe
+      } = getObserver(Observer, newOpts);
       unsubscribe = localUnsubscribe;
       subscribe(nodeElement, callback);
     }
 
     currentElement.current = nodeElement;
-    return function () {
+    return () => {
       if (unsubscribe !== null) {
         unsubscribe(nodeElement, callback);
       }
@@ -935,14 +1087,15 @@ var useObserver = function useObserver(Observer) {
   }, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
   return {
     ref: nodeRef,
-    entry: entry
+    entry
   };
 };
 /**
  * Intersection Observer
  */
 
-var intersectionObserverInitialEntry = {
+const defaultThreshold = [0, 1.0];
+const intersectionObserverInitialEntry = {
   target: null,
   time: null,
   isVisible: false,
@@ -952,130 +1105,89 @@ var intersectionObserverInitialEntry = {
   boundingClientRect: null,
   rootBounds: null
 };
-var useIntersectionObserver = function useIntersectionObserver() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref3$root = _ref3.root,
-      root = _ref3$root === void 0 ? null : _ref3$root,
-      _ref3$rootMargin = _ref3.rootMargin,
-      rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
-      _ref3$threshold = _ref3.threshold,
-      threshold = _ref3$threshold === void 0 ? [0, 1.0] : _ref3$threshold,
-      _ref3$disabled = _ref3.disabled,
-      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
-
+const useIntersectionObserver = function () {
+  let {
+    root = null,
+    rootMargin = '0px',
+    threshold = defaultThreshold,
+    disabled = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return useObserver(IntersectionObserver, {
-    root: root,
-    rootMargin: rootMargin,
-    threshold: threshold,
-    disabled: disabled
+    root,
+    rootMargin,
+    threshold,
+    disabled
   }, intersectionObserverInitialEntry);
 };
 /**
  * Resize Observer
  */
 
-var resizeObserverInitialEntry = {
+const resizeObserverInitialEntry = {
   target: null,
   contentRect: null,
   contentBoxSize: null,
   borderBoxSize: null
 };
-var useResizeObserver = function useResizeObserver() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
-
+const useResizeObserver = function () {
+  let {
+    disabled = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return useObserver(ResizeObserver, {
-    disabled: disabled
+    disabled
   }, resizeObserverInitialEntry);
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var NO_PLAYER_ERROR$1 = new Error('No player');
-var debug$1 = createDebug__default["default"]('folklore:video:youtube');
+const NO_PLAYER_ERROR$1 = new Error('No player');
+const debug$1 = createDebug__default["default"]('folklore:video:youtube');
 
 function useYouTubePlayer(id) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 0 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 0 : _ref$height,
-      _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? 0 : _ref$duration,
-      _ref$autoplay = _ref.autoplay,
-      autoplay = _ref$autoplay === void 0 ? false : _ref$autoplay,
-      _ref$controls = _ref.controls,
-      controls = _ref$controls === void 0 ? true : _ref$controls,
-      _ref$timeUpdateInterv = _ref.timeUpdateInterval,
-      timeUpdateInterval = _ref$timeUpdateInterv === void 0 ? 1000 : _ref$timeUpdateInterv,
-      _ref$muted = _ref.muted,
-      initialMuted = _ref$muted === void 0 ? false : _ref$muted,
-      _ref$onVolumeChange = _ref.onVolumeChange,
-      customOnVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
-      _ref$onTimeUpdate = _ref.onTimeUpdate,
-      customOnTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
-      _ref$getVideoId = _ref.getVideoId,
-      getVideoId = _ref$getVideoId === void 0 ? function (url) {
-    if (url === null || url.match(/^https?:/) === null) {
-      return url;
-    }
-
-    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-    var match = url.match(regExp);
-    return match && match[7].length === 11 ? match[7] : null;
-  } : _ref$getVideoId;
-
-  var _useState = react.useState(typeof window.YT !== 'undefined'),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      apiLoaded = _useState2[0],
-      setApiLoaded = _useState2[1];
-
-  var apiRef = react.useRef(typeof window.YT !== 'undefined' ? window.YT : null);
-  var elementRef = react.useRef(null);
-  var playerRef = react.useRef(null);
-  var playerElementRef = react.useRef(elementRef.current);
-  var elementHasChanged = elementRef.current !== playerElementRef.current;
-  var videoId = react.useMemo(function () {
-    return getVideoId(id);
-  }, [id]);
-
-  var _useState3 = react.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      ready = _useState4[0],
-      setReady = _useState4[1];
-
-  var _useState5 = react.useState(initialMuted),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      muted = _useState6[0],
-      setMuted = _useState6[1];
+  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;
+      }
 
-  var _useState7 = react.useState({
+      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 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
-  }),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      playState = _useState8[0],
-      setPlayState = _useState8[1];
-
-  var _useState9 = react.useState({
-    width: width,
-    height: height,
-    duration: duration
-  }),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      metadata = _useState10[0],
-      setMetadata = _useState10[1];
-
-  react.useEffect(function () {
-    var canceled = 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(function (api) {
+      services.loadYouTube().then(api => {
         if (!canceled) {
           apiRef.current = api;
           setApiLoaded(true);
@@ -1084,21 +1196,27 @@ function useYouTubePlayer(id) {
       });
     }
 
-    return function () {
+    return () => {
       canceled = true;
     };
   }, [apiLoaded, videoId, setApiLoaded]);
-  var play = react.useCallback(function () {
-    var player = playerRef.current;
+  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);
   }, []);
-  var pause = react.useCallback(function () {
-    var player = playerRef.current;
+  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);
   }, []);
-  var setVolume = react.useCallback(function (volume) {
-    var player = playerRef.current;
-    var promise = player !== null && typeof player.setVolume !== 'undefined' ? Promise.resolve(player.setVolume(volume * 100)) : 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);
@@ -1106,35 +1224,41 @@ function useYouTubePlayer(id) {
 
     return promise;
   }, [customOnVolumeChange]);
-  var mute = react.useCallback(function () {
-    var player = playerRef.current;
-    return (player !== null && typeof player.mute !== 'undefined' ? Promise.resolve(player.mute()) : Promise.reject(NO_PLAYER_ERROR$1)).then(function () {
-      return setMuted(true);
-    });
+  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]);
-  var unmute = react.useCallback(function () {
-    var player = playerRef.current;
-    return (player !== null && typeof player.unMute !== 'undefined' ? Promise.resolve(player.unMute()) : Promise.reject(NO_PLAYER_ERROR$1)).then(function () {
-      return setMuted(false);
-    });
+  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));
   }, []);
-  var seek = react.useCallback(function (time) {
-    var player = playerRef.current;
+  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);
   }, []);
-  var setLoop = react.useCallback(function (loop) {
-    var player = playerRef.current;
+  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);
   }, []);
-  var destroyPlayer = react.useCallback(function () {
+  const destroyPlayer = react.useCallback(() => {
     if (playerRef.current !== null) {
       debug$1('Unset player');
       playerRef.current = null;
     }
   }, []); // Detect iframe switch and destroy player
 
-  react.useEffect(function () {
-    var currentPlayer = playerRef.current;
+  react.useEffect(() => {
+    const {
+      current: currentPlayer
+    } = playerRef;
 
     if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
       debug$1('iFrame switched');
@@ -1142,20 +1266,23 @@ function useYouTubePlayer(id) {
     }
   }, [elementHasChanged]); // Create player
 
-  react.useEffect(function () {
-    var _apiRef$current = apiRef.current,
-        YT = _apiRef$current === void 0 ? null : _apiRef$current;
-    var _playerRef$current = playerRef.current,
-        currentPlayer = _playerRef$current === void 0 ? null : _playerRef$current;
-    var _elementRef$current = elementRef.current,
-        element = _elementRef$current === void 0 ? null : _elementRef$current;
+  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;
     }
 
-    var player = currentPlayer;
+    let player = currentPlayer;
 
     if (player !== null && typeof player.loadVideoById !== 'undefined') {
       debug$1('Switch video [ID: %s]', videoId);
@@ -1163,32 +1290,36 @@ function useYouTubePlayer(id) {
     } else {
       debug$1('Create player [ID: %s]', videoId);
 
-      var onReady = function onReady(_ref2) {
-        var target = _ref2.target;
+      const onReady = _ref => {
+        let {
+          target
+        } = _ref;
         player = target;
         playerRef.current = target;
         setReady(true);
-        var newDuration = target.getDuration();
+        const newDuration = target.getDuration();
 
         if (newDuration !== metadata.duration) {
-          setMetadata(_objectSpread$1(_objectSpread$1({}, metadata), {}, {
+          setMetadata({ ...metadata,
             duration: newDuration
-          }));
+          });
         }
 
         debug$1('onReady [ID: %s]', videoId);
       };
 
-      var onStateChange = function onStateChange(_ref3) {
-        var state = _ref3.data;
-        var newState = {
+      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);
-        var stateLabel = null;
+        let stateLabel = null;
 
         if (newState.playing) {
           stateLabel = 'playing';
@@ -1208,9 +1339,9 @@ function useYouTubePlayer(id) {
       };
 
       player = new YT.Player(element, {
-        videoId: videoId,
+        videoId,
         playerVars: {
-          controls: controls,
+          controls,
           autoplay: autoplay ? 1 : 0,
           mute: initialMuted,
           playsinline: true,
@@ -1219,8 +1350,8 @@ function useYouTubePlayer(id) {
           modestbranding: 1
         },
         events: {
-          onReady: onReady,
-          onStateChange: onStateChange
+          onReady,
+          onStateChange
         }
       });
     }
@@ -1228,127 +1359,88 @@ function useYouTubePlayer(id) {
     playerRef.current = player;
     playerElementRef.current = element;
   }, [apiLoaded, videoId, elementHasChanged, setPlayState, setReady, setMetadata, destroyPlayer]);
-  var playing = playState.playing;
-  var getCurrentTime = react.useCallback(function (p) {
-    return p.getCurrentTime();
-  }, []);
-  var currentTime = usePlayerCurrentTime(playerRef.current, {
+  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: getCurrentTime
+    getCurrentTime
   });
-  return _objectSpread$1(_objectSpread$1({
+  return {
     ref: elementRef,
     player: playerRef.current,
-    play: play,
-    pause: pause,
-    mute: mute,
-    unmute: unmute,
-    setVolume: setVolume,
-    seek: seek,
-    setLoop: setLoop,
-    ready: ready,
-    currentTime: currentTime,
-    muted: muted,
-    loaded: ready
-  }, metadata), playState);
+    play,
+    pause,
+    mute,
+    unmute,
+    setVolume,
+    seek,
+    setLoop,
+    ready,
+    currentTime,
+    muted,
+    loaded: ready,
+    ...metadata,
+    ...playState
+  };
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var debug = createDebug__default["default"]('folklore:video:vimeo');
-var NO_PLAYER_ERROR = new Error('No player');
-
-var useVimeoPlayer = function useVimeoPlayer(id) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 0 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 0 : _ref$height,
-      _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? 0 : _ref$duration,
-      _ref$autoplay = _ref.autoplay,
-      autoplay = _ref$autoplay === void 0 ? false : _ref$autoplay,
-      _ref$autopause = _ref.autopause,
-      autopause = _ref$autopause === void 0 ? true : _ref$autopause,
-      _ref$byline = _ref.byline,
-      byline = _ref$byline === void 0 ? false : _ref$byline,
-      _ref$controls = _ref.controls,
-      controls = _ref$controls === void 0 ? false : _ref$controls,
-      _ref$initialMuted = _ref.initialMuted,
-      initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
-      _ref$timeUpdateInterv = _ref.timeUpdateInterval,
-      timeUpdateInterval = _ref$timeUpdateInterv === void 0 ? 1000 : _ref$timeUpdateInterv,
-      _ref$onTimeUpdate = _ref.onTimeUpdate,
-      customOnTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
-      _ref$getVideoId = _ref.getVideoId,
-      getVideoId = _ref$getVideoId === void 0 ? function (url) {
-    if (url === null || url.match(/^[0-9]+$/) !== null) {
-      return url;
-    }
-
-    var match = url.match(/\/[0-9]+/);
-    return match !== null ? match[1] : null;
-  } : _ref$getVideoId;
-
-  var _useState = react.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      apiLoaded = _useState2[0],
-      setApiLoaded = _useState2[1];
-
-  var apiRef = react.useRef(null);
-  var elementRef = react.useRef(null);
-  var playerRef = react.useRef(null);
-  var playerElementRef = react.useRef(elementRef.current);
-  var elementHasChanged = elementRef.current !== playerElementRef.current;
-  var videoId = react.useMemo(function () {
-    return getVideoId(id);
-  }, [id]);
-
-  var _useState3 = react.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      ready = _useState4[0],
-      setReady = _useState4[1];
-
-  var _useState5 = react.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      loaded = _useState6[0],
-      setLoaded = _useState6[1];
-
-  var _useState7 = react.useState(initialMuted ? 0 : 1),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      volume = _useState8[0],
-      setVolumeState = _useState8[1];
+const debug = createDebug__default["default"]('folklore:video:vimeo');
+const NO_PLAYER_ERROR = new Error('No player');
+
+const useVimeoPlayer = function (id) {
+  let {
+    width = 0,
+    height = 0,
+    duration = 0,
+    autoplay = false,
+    autopause = true,
+    byline = false,
+    controls = false,
+    initialMuted = false,
+    timeUpdateInterval = 1000,
+    onTimeUpdate: customOnTimeUpdate = null,
+    getVideoId = url => {
+      if (url === null || url.match(/^[0-9]+$/) !== null) {
+        return url;
+      }
 
-  var _useState9 = react.useState({
+      const match = url.match(/\/[0-9]+/);
+      return match !== null ? match[1] : null;
+    }
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const [apiLoaded, setApiLoaded] = react.useState(false);
+  const apiRef = react.useRef(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 [loaded, setLoaded] = react.useState(false);
+  const [volume, setVolumeState] = react.useState(initialMuted ? 0 : 1);
+  const [playState, setPlayState] = react.useState({
     playing: false,
     paused: false,
     ended: false,
     buffering: false
-  }),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      playState = _useState10[0],
-      setPlayState = _useState10[1];
-
-  var _useState11 = react.useState({
-    width: width,
-    height: height,
-    duration: duration
-  }),
-      _useState12 = _slicedToArray__default["default"](_useState11, 2),
-      metadata = _useState12[0],
-      setMetadata = _useState12[1]; // Load SDK
-
+  });
+  const [metadata, setMetadata] = react.useState({
+    width,
+    height,
+    duration
+  }); // Load SDK
 
-  react.useEffect(function () {
-    var canceled = false;
+  react.useEffect(() => {
+    let canceled = false;
 
     if (!apiLoaded && id !== null) {
       debug('Load API');
-      services.loadVimeo().then(function (api) {
+      services.loadVimeo().then(api => {
         if (!canceled) {
           apiRef.current = api;
           setApiLoaded(true);
@@ -1357,40 +1449,56 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       });
     }
 
-    return function () {
+    return () => {
       canceled = true;
     };
   }, [id]);
-  var play = react.useCallback(function () {
-    var player = playerRef.current;
+  const play = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  var pause = react.useCallback(function () {
-    var player = playerRef.current;
+  const pause = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  var setVolume = react.useCallback(function (newVolume) {
-    var player = playerRef.current;
+  const setVolume = react.useCallback(newVolume => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  var mute = react.useCallback(function () {
-    var player = playerRef.current;
+  const mute = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setVolume(0) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  var unmute = react.useCallback(function () {
-    var player = playerRef.current;
+  const unmute = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setVolume(1) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  var seek = react.useCallback(function (time) {
-    var player = playerRef.current;
+  const seek = react.useCallback(time => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setCurrentTime(time) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  var setLoop = react.useCallback(function (loop) {
-    var player = playerRef.current;
+  const setLoop = react.useCallback(loop => {
+    const {
+      current: player
+    } = playerRef;
     return player !== null ? player.setLoop(loop) : Promise.reject(NO_PLAYER_ERROR);
   }, []);
-  var destroyVideo = react.useCallback(function () {
-    var player = playerRef.current;
+  const destroyVideo = react.useCallback(() => {
+    const {
+      current: player
+    } = playerRef;
 
     if (player !== null) {
       debug('Unload video');
@@ -1402,8 +1510,10 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       playerRef.current = null;
     }
   }, []);
-  react.useEffect(function () {
-    var currentPlayer = playerRef.current;
+  react.useEffect(() => {
+    const {
+      current: currentPlayer
+    } = playerRef;
 
     if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
       debug('iFrame switched');
@@ -1411,40 +1521,41 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
     }
   }, [elementHasChanged]); // Create player
 
-  react.useEffect(function () {
-    var _apiRef$current = apiRef.current,
-        Player = _apiRef$current === void 0 ? null : _apiRef$current;
-    var _playerRef$current = playerRef.current,
-        currentPlayer = _playerRef$current === void 0 ? null : _playerRef$current;
-    var _elementRef$current = elementRef.current,
-        element = _elementRef$current === void 0 ? null : _elementRef$current;
+  react.useEffect(() => {
+    const {
+      current: Player = null
+    } = apiRef;
+    const {
+      current: currentPlayer = null
+    } = playerRef;
+    const {
+      current: element = null
+    } = elementRef;
 
     if (!apiLoaded || videoId === null || element === null) {
       destroyVideo();
       return;
     }
 
-    var player = currentPlayer;
+    let player = currentPlayer;
 
     if (player === null) {
       debug('Create player [ID: %s]', videoId);
       player = new Player(element, {
         id: videoId,
-        autoplay: autoplay,
-        autopause: autopause,
-        byline: byline,
-        controls: controls,
+        autoplay,
+        autopause,
+        byline,
+        controls,
         muted: initialMuted,
         background: !controls
       });
-      player.ready().then(function () {
-        return setReady(true);
-      }).catch(function (e) {
+      player.ready().then(() => setReady(true)).catch(e => {
         debug('ERROR: %o', e);
       });
     } else {
       debug('Load video [ID: %s]', videoId);
-      player.loadVideo(videoId).catch(function (e) {
+      player.loadVideo(videoId).catch(e => {
         debug('ERROR: %o', e);
       });
     }
@@ -1453,28 +1564,26 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
     playerElementRef.current = element;
   }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events
 
-  react.useEffect(function () {
-    var player = playerRef.current;
+  react.useEffect(() => {
+    const {
+      current: player
+    } = playerRef;
 
     if (player === null) {
-      return function () {};
+      return () => {};
     }
 
-    var canceled = false;
+    let canceled = false;
 
-    var onLoaded = function onLoaded() {
-      Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(function (_ref2) {
-        var _ref3 = _slicedToArray__default["default"](_ref2, 4),
-            newDuration = _ref3[0],
-            newWidth = _ref3[1],
-            newHeight = _ref3[2],
-            newMuted = _ref3[3];
+    const onLoaded = () => {
+      Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(_ref => {
+        let [newDuration, newWidth, newHeight, newMuted] = _ref;
 
         if (canceled) {
           return;
         }
 
-        var newMetadata = {
+        const newMetadata = {
           duration: newDuration,
           width: newWidth,
           height: newHeight
@@ -1490,7 +1599,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       debug('onLoaded [ID: %s]', videoId);
     };
 
-    var onPlay = function onPlay() {
+    const onPlay = () => {
       setPlayState({
         playing: true,
         paused: false,
@@ -1498,14 +1607,14 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
         buffering: false
       });
       debug('onPlay [ID: %s]', videoId);
-      player.getMuted().then(function (newMuted) {
+      player.getMuted().then(newMuted => {
         if (!canceled && newMuted) {
           setVolumeState(0);
         }
-      }).catch(function () {});
+      }).catch(() => {});
     };
 
-    var onPause = function onPause() {
+    const onPause = () => {
       setPlayState({
         playing: false,
         paused: true,
@@ -1515,13 +1624,15 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       debug('onPause [ID: %s]', videoId);
     };
 
-    var onVolumeChange = function onVolumeChange(_ref4) {
-      var newVolume = _ref4.volume;
+    const onVolumeChange = _ref2 => {
+      let {
+        volume: newVolume
+      } = _ref2;
       setVolumeState(newVolume);
       debug('onVolumeChange [ID: %s]', videoId);
     };
 
-    var onEnded = function onEnded() {
+    const onEnded = () => {
       setPlayState({
         playing: false,
         paused: false,
@@ -1531,7 +1642,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       debug('onEnded [ID: %s]', videoId);
     };
 
-    var onBufferStart = function onBufferStart() {
+    const onBufferStart = () => {
       setPlayState({
         playing: true,
         paused: false,
@@ -1541,7 +1652,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       debug('onBufferStart [ID: %s]', videoId);
     };
 
-    var onBufferEnded = function onBufferEnded() {
+    const onBufferEnded = () => {
       setPlayState({
         playing: true,
         paused: false,
@@ -1559,7 +1670,7 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
     player.on('ended', onEnded);
     player.on('bufferstart', onBufferStart);
     player.on('bufferend', onBufferEnded);
-    return function () {
+    return () => {
       canceled = true;
       debug('Unbind events [ID: %s]', videoId);
       player.off('loaded', onLoaded);
@@ -1571,63 +1682,55 @@ var useVimeoPlayer = function useVimeoPlayer(id) {
       player.off('bufferend', onBufferEnded);
     };
   }, [videoId, playerRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
-  var playing = playState.playing;
-  var getCurrentTime = react.useCallback(function (p) {
-    return p.getCurrentTime();
-  }, []);
-  var currentTime = usePlayerCurrentTime(playerRef.current, {
+  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: getCurrentTime
+    getCurrentTime
   });
-  return _objectSpread(_objectSpread({
+  return {
     ref: elementRef,
     player: playerRef.current,
-    play: play,
-    pause: pause,
-    mute: mute,
-    unmute: unmute,
-    setVolume: setVolume,
-    seek: seek,
-    setLoop: setLoop,
-    ready: ready,
-    currentTime: currentTime,
-    loaded: loaded,
+    play,
+    pause,
+    mute,
+    unmute,
+    setVolume,
+    seek,
+    setLoop,
+    ready,
+    currentTime,
+    loaded,
     muted: volume === 0,
-    volume: volume
-  }, metadata), playState);
+    volume,
+    ...metadata,
+    ...playState
+  };
 };
 
 function useVideoPlayer(params) {
-  var _ref = params || {},
-      _ref$service = _ref.service,
-      service = _ref$service === void 0 ? null : _ref$service,
-      _ref$videoId = _ref.videoId,
-      videoId = _ref$videoId === void 0 ? null : _ref$videoId,
-      _ref$url = _ref.url,
-      url = _ref$url === void 0 ? null : _ref$url,
-      _ref$onLoaded = _ref.onLoaded,
-      customOnLoaded = _ref$onLoaded === void 0 ? null : _ref$onLoaded,
-      _ref$onPlay = _ref.onPlay,
-      customOnPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
-      _ref$onPause = _ref.onPause,
-      customOnPause = _ref$onPause === void 0 ? null : _ref$onPause,
-      _ref$onEnd = _ref.onEnd,
-      customOnEnd = _ref$onEnd === void 0 ? null : _ref$onEnd,
-      _ref$onMetadataChange = _ref.onMetadataChange,
-      customOnMetadataChange = _ref$onMetadataChange === void 0 ? null : _ref$onMetadataChange,
-      _ref$onBufferStart = _ref.onBufferStart,
-      customOnBufferStart = _ref$onBufferStart === void 0 ? null : _ref$onBufferStart,
-      _ref$onBufferEnded = _ref.onBufferEnded,
-      customOnBufferEnded = _ref$onBufferEnded === void 0 ? null : _ref$onBufferEnded;
-
-  var dailymotionPlayer = useDailymotionPlayer(service === 'dailymotion' ? videoId || url : null, params);
-  var youtubePlayer = useYouTubePlayer(service === 'youtube' ? videoId || url : null, params);
-  var vimeoPlayer = useVimeoPlayer(service === 'vimeo' ? videoId || url : null, params);
-  var nativePlayer = useNativeVideoPlayer(url, params);
-  var player = null;
+  const {
+    service = null,
+    videoId = null,
+    url = null,
+    onLoaded: customOnLoaded = null,
+    onPlay: customOnPlay = null,
+    onPause: customOnPause = null,
+    onEnd: customOnEnd = null,
+    onMetadataChange: customOnMetadataChange = null,
+    onBufferStart: customOnBufferStart = null,
+    onBufferEnded: customOnBufferEnded = null
+  } = params || {};
+  const dailymotionPlayer = useDailymotionPlayer(service === 'dailymotion' ? videoId || url : null, params);
+  const youtubePlayer = useYouTubePlayer(service === 'youtube' ? videoId || url : null, params);
+  const vimeoPlayer = useVimeoPlayer(service === 'vimeo' ? videoId || url : null, params);
+  const nativePlayer = useNativeVideoPlayer(url, params);
+  let player = null;
 
   if (service === 'dailymotion') {
     player = dailymotionPlayer;
@@ -1639,53 +1742,45 @@ function useVideoPlayer(params) {
     player = nativePlayer;
   }
 
-  var _ref2 = player || {},
-      _ref2$playing = _ref2.playing,
-      playing = _ref2$playing === void 0 ? false : _ref2$playing,
-      _ref2$paused = _ref2.paused,
-      paused = _ref2$paused === void 0 ? false : _ref2$paused,
-      _ref2$buffering = _ref2.buffering,
-      buffering = _ref2$buffering === void 0 ? false : _ref2$buffering,
-      _ref2$ended = _ref2.ended,
-      ended = _ref2$ended === void 0 ? false : _ref2$ended,
-      _ref2$ready = _ref2.ready,
-      ready = _ref2$ready === void 0 ? false : _ref2$ready,
-      _ref2$width = _ref2.width,
-      metaWidth = _ref2$width === void 0 ? null : _ref2$width,
-      _ref2$height = _ref2.height,
-      metaHeight = _ref2$height === void 0 ? null : _ref2$height,
-      _ref2$duration = _ref2.duration,
-      metaDuration = _ref2$duration === void 0 ? null : _ref2$duration;
-
-  react.useEffect(function () {
+  const {
+    playing = false,
+    paused = false,
+    buffering = false,
+    ended = false,
+    ready = false,
+    width: metaWidth = null,
+    height: metaHeight = null,
+    duration: metaDuration = null
+  } = player || {};
+  react.useEffect(() => {
     if (ready && customOnLoaded !== null) {
       customOnLoaded();
     }
   }, [ready, customOnLoaded]);
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (playing && customOnPlay !== null) {
       customOnPlay();
     }
   }, [playing, customOnPlay]);
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (paused && customOnPause !== null) {
       customOnPause();
     }
   }, [paused, customOnPause]);
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (buffering && customOnBufferStart !== null) {
       customOnBufferStart();
     } else if (!buffering && customOnBufferEnded !== null) {
       customOnBufferEnded();
     }
   }, [buffering, customOnBufferStart, customOnBufferEnded]);
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (ended && customOnEnd !== null) {
       customOnEnd();
     }
   }, [ended, customOnEnd]);
-  react.useEffect(function () {
-    var hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null;
+  react.useEffect(() => {
+    const hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null;
 
     if (hasMetadata && customOnMetadataChange !== null) {
       customOnMetadataChange({
@@ -1698,27 +1793,21 @@ function useVideoPlayer(params) {
   return player;
 }
 
-var getWindowScroll = function getWindowScroll() {
-  return {
-    x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
-    y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
-  };
-};
-
-var currentScroll = getWindowScroll();
+const getWindowScroll = () => ({
+  x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
+  y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
+});
 
-var useWindowScroll = function useWindowScroll() {
-  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _opts$onChange = opts.onChange,
-      onChange = _opts$onChange === void 0 ? null : _opts$onChange;
+const currentScroll = getWindowScroll();
 
-  var _useState = react.useState(currentScroll),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      scroll = _useState2[0],
-      setScroll = _useState2[1];
-
-  var updateScroll = react.useCallback(function () {
-    var newScroll = getWindowScroll();
+const useWindowScroll = function () {
+  let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    onChange = null
+  } = opts;
+  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;
@@ -1729,40 +1818,33 @@ var useWindowScroll = function useWindowScroll() {
 
     return null;
   }, [setScroll]);
-  var onScroll = react.useCallback(function () {
-    var newScroll = updateScroll();
+  const onScroll = react.useCallback(() => {
+    const newScroll = updateScroll();
 
     if (newScroll !== null && onChange !== null) {
       onChange(newScroll);
     }
   }, [updateScroll, onChange]);
   useWindowEvent('scroll', onScroll);
-  react.useEffect(function () {
+  react.useEffect(() => {
     onScroll();
   }, []);
   return scroll;
 };
 
-var getWindowSize = function getWindowSize() {
-  return {
-    width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
-    height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
-  };
-};
-var currentSize = getWindowSize();
+const getWindowSize = () => ({
+  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+});
+let currentSize = getWindowSize();
 
 function useWindowSize() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? null : _ref$onChange;
-
-  var _useState = react.useState(currentSize),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      size = _useState2[0],
-      setSize = _useState2[1];
-
-  var updateSize = react.useCallback(function () {
-    var newSize = getWindowSize();
+  let {
+    onChange = null
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [size, setSize] = react.useState(currentSize);
+  const updateSize = react.useCallback(() => {
+    const newSize = getWindowSize();
 
     if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
       currentSize = newSize;
@@ -1772,15 +1854,15 @@ function useWindowSize() {
 
     return null;
   }, [setSize]);
-  var onResize = react.useCallback(function () {
-    var newSize = updateSize();
+  const onResize = react.useCallback(() => {
+    const newSize = updateSize();
 
     if (newSize !== null && onChange !== null) {
       onChange(newSize);
     }
   }, [onChange]);
   useWindowEvent('resize', onResize);
-  react.useEffect(function () {
+  react.useEffect(() => {
     onResize();
   }, []);
   return size;
@@ -1792,6 +1874,7 @@ exports.useCounter = useCounter;
 exports.useDailymotionPlayer = useDailymotionPlayer;
 exports.useDocumentEvent = useDocumentEvent;
 exports.useIntersectionObserver = useIntersectionObserver;
+exports.useItemsPaginated = useItemsPaginated;
 exports.useKeyboard = useKeyboard;
 exports.useNativeVideoPlayer = useNativeVideoPlayer;
 exports.useObserver = useObserver;