@folklore/hooks 0.0.7 → 0.0.11

package/dist/cjs.js

@@ -2,18 +2,412 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
+var services = require('@folklore/services');
+var createDebug = require('debug');
 var EventsManager = require('@folklore/events');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var EventsManager__default = /*#__PURE__*/_interopDefaultLegacy(EventsManager);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
+var EventsManager__default = /*#__PURE__*/_interopDefaultLegacy(EventsManager);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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;
+
+  if (idChanged) {
+    realCurrentTime.current = 0;
+    lastIdRef.current = id;
+  } // Check time update
+
+
+  react.useEffect(function () {
+    if (disabled || player === null) {
+      return function () {};
+    }
+
+    var canceled = false;
+
+    var updateTime = function updateTime(time) {
+      if (canceled) {
+        return;
+      }
+
+      realCurrentTime.current = time;
+      setCurrentTime(time);
+
+      if (customOnUpdate !== null) {
+        customOnUpdate(time);
+      }
+    };
+
+    var interval = setInterval(function () {
+      var time = getCurrentTime(player);
+
+      if (typeof time.then !== 'undefined') {
+        time.then(updateTime);
+      } else {
+        updateTime(time);
+      }
+    }, updateInterval);
+    return function () {
+      canceled = true;
+      clearInterval(interval);
+    };
+  }, [id, player, setCurrentTime, disabled, updateInterval, getCurrentTime]);
+  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:youtube');
+
+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 null;
+    }
+
+    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 elementRef = react.useRef(null);
+  var playerRef = react.useRef(null);
+  var ready = apiLoaded && playerReady;
+  var videoId = react.useMemo(function () {
+    return getVideoId(id);
+  }, [id]);
+
+  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({
+    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
+
+
+  react.useEffect(function () {
+    var canceled = false;
+
+    if (!apiLoaded && id !== null) {
+      services.loadDailymotion().then(function (api) {
+        if (!canceled) {
+          apiRef.current = api;
+          setApiLoaded(true);
+          debug$3('API Loaded');
+        }
+      });
+    }
+
+    return function () {
+      canceled = true;
+    };
+  }, [id]); // 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;
+
+    if (!apiLoaded || videoId === null || element === null) {
+      return;
+    }
+
+    var playerParams = {
+      'autoplay-d': autoplay,
+      // muted,
+      start: start,
+      controls: controls,
+      'queue-autoplay-next': queueAutoplayNext,
+      'queue-enable': queueEnable,
+      'sharing-enable': sharingEnable,
+      'ui-logo': uiLogo,
+      'ui-start-screen-info': uiStartScreenInfo
+    };
+    var player = currentPlayer;
+
+    if (player !== null) {
+      player.load(id, {
+        params: playerParams
+      });
+    } else {
+      player = DM.player(element, {
+        video: videoId,
+        width: width,
+        height: height,
+        params: playerParams
+      });
+      playerRef.current = player;
+    }
+
+    if (!playerReady) {
+      setPlayerReady(true);
+    }
+  }, [apiLoaded, elementRef.current, 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;
+
+    if (player === null) {
+      return function () {};
+    }
+
+    var currentPlayState = playState;
+    var currentMetadata = metadata;
+
+    function onPlaybackReady() {
+      setLoaded(true);
+    }
+
+    function onLoadedMetadata() {
+      currentMetadata = _objectSpread$4(_objectSpread$4({}, currentMetadata), {}, {
+        duration: player.duration
+      });
+      setMetadata(currentMetadata);
+    }
+
+    function onDurationChange() {
+      currentMetadata = _objectSpread$4(_objectSpread$4({}, currentMetadata), {}, {
+        duration: player.duration
+      });
+      setMetadata(currentMetadata);
+    }
+
+    function onVolumeChange() {
+      setMuted(player.muted);
+      setVolumeState(player.volume);
+    }
+
+    function onPlay() {
+      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+        playing: true,
+        paused: false,
+        ended: false
+      });
+      setPlayState(currentPlayState);
+    }
+
+    function onPause() {
+      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+        playing: false,
+        paused: true,
+        ended: false
+      });
+      setPlayState(currentPlayState);
+    }
+
+    function onEnd() {
+      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+        playing: false,
+        paused: false,
+        ended: true
+      });
+      setPlayState(currentPlayState);
+    }
+
+    function onPlaying() {
+      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+        buffering: false
+      });
+      setPlayState(currentPlayState);
+    }
+
+    function onWaiting() {
+      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+        buffering: true
+      });
+      setPlayState(currentPlayState);
+    }
+
+    function onAdStart() {
+      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+        adPlaying: true
+      });
+      setPlayState(currentPlayState);
+    }
+
+    function onAdEnd() {
+      currentPlayState = _objectSpread$4(_objectSpread$4({}, currentPlayState), {}, {
+        adPlaying: false
+      });
+      setPlayState(currentPlayState);
+    }
+
+    player.addEventListener('playback_ready', onPlaybackReady);
+    player.addEventListener('loadedmetadata', onLoadedMetadata);
+    player.addEventListener('durationchange', onDurationChange);
+    player.addEventListener('volumechange', onVolumeChange);
+    player.addEventListener('play', onPlay);
+    player.addEventListener('pause', onPause);
+    player.addEventListener('video_end', onEnd);
+    player.addEventListener('playing', onPlaying);
+    player.addEventListener('waiting', onWaiting);
+    player.addEventListener('ad_start', onAdStart);
+    player.addEventListener('ad_end', onAdEnd);
+    return function () {
+      player.removeEventListener('playback_ready', onPlaybackReady);
+      player.removeEventListener('loadedmetadata', onLoadedMetadata);
+      player.removeEventListener('durationchange', onDurationChange);
+      player.removeEventListener('volumechange', onVolumeChange);
+      player.removeEventListener('play', onPlay);
+      player.removeEventListener('pause', onPause);
+      player.removeEventListener('video_end', onEnd);
+      player.removeEventListener('playing', onPlaying);
+      player.removeEventListener('waiting', onWaiting);
+      player.removeEventListener('ad_start', onAdStart);
+      player.removeEventListener('ad_end', onAdEnd);
+    };
+  }, [playerRef.current, playerReady, videoId, setLoaded, setPlayState, setMetadata, setVolumeState, setMuted]);
+  var play = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.play() : Promise.reject(noPlayerError$1);
+  }, []);
+  var pause = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.pause() : Promise.reject(noPlayerError$1);
+  }, []);
+  var setVolume = react.useCallback(function (newVolume) {
+    var player = playerRef.current;
+    return player !== null ? player.setVolume(newVolume) : Promise.reject(noPlayerError$1);
+  }, []);
+  var mute = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.setMute(true) : Promise.reject(noPlayerError$1);
+  }, []);
+  var unmute = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.setMute(false) : Promise.reject(noPlayerError$1);
+  }, []);
+  var seek = react.useCallback(function (time) {
+    var player = playerRef.current;
+    return player !== null ? player.seek(time) : Promise.reject(noPlayerError$1);
+  }, []);
+  var playing = playState.playing;
+  var currentTime = usePlayerCurrentTime(playerRef.current, {
+    id: videoId,
+    disabled: !playing || timeUpdateInterval === null,
+    updateInterval: timeUpdateInterval,
+    onUpdate: customOnTimeUpdate
+  });
+  return _objectSpread$4(_objectSpread$4({
+    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);
+};
 
 var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
 
@@ -69,9 +463,212 @@ function useKeyboard() {
   useWindowEvent('keyup', keyMap !== null ? onKeyUp : null);
 }
 
-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 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(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; }
+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({
+    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;
+    return player !== null ? player.play() : Promise.reject(noPlayerError);
+  }, []);
+  var pause = react.useCallback(function () {
+    var player = elementRef.current;
+    return player !== null ? player.pause() : Promise.reject(noPlayerError);
+  }, []);
+  var setVolume = react.useCallback(function (newVolume) {
+    var player = elementRef.current;
+
+    if (player !== null) {
+      player.volume = newVolume;
+      return Promise.resolve(newVolume);
+    }
+
+    return Promise.reject(noPlayerError);
+  }, []);
+  var mute = react.useCallback(function () {
+    var player = elementRef.current;
+
+    if (player !== null) {
+      player.muted = true;
+      return Promise.resolve(true);
+    }
+
+    return Promise.reject(noPlayerError);
+  }, []);
+  var unmute = react.useCallback(function () {
+    var player = elementRef.current;
+
+    if (player !== null) {
+      player.muted = false;
+      return Promise.resolve(false);
+    }
+
+    return Promise.reject(noPlayerError);
+  }, []);
+  var seek = react.useCallback(function (newTime) {
+    var player = elementRef.current;
+
+    if (player !== null) {
+      player.currentTime = newTime;
+      return Promise.resolve(newTime);
+    }
+
+    return Promise.reject(noPlayerError);
+  }, []);
+  var setLoop = react.useCallback(function (newLoop) {
+    var player = elementRef.current;
+
+    if (player !== null) {
+      player.loop = newLoop;
+      return Promise.resolve(newLoop);
+    }
+
+    return Promise.reject(noPlayerError);
+  }, []); // Bind player events
+
+  react.useEffect(function () {
+    var player = elementRef.current;
+
+    if (player === null) {
+      return function () {};
+    }
+
+    var onCanPlay = function onCanPlay() {
+      setLoaded(true);
+      debug$2('onCanPlay [URL: %s]', url);
+    };
+
+    var onMetadataLoaded = function onMetadataLoaded() {
+      var newMetadata = {
+        duration: player.duration,
+        width: player.videoWidth,
+        height: player.videoHeight
+      };
+      setMetadata(newMetadata);
+      debug$2('onMetadataLoaded [URL: %s]', url);
+    };
+
+    var onPlay = function onPlay() {
+      setPlayState({
+        playing: true,
+        paused: false,
+        ended: false,
+        buffering: false
+      });
+      debug$2('onPlay [URL: %s]', url);
+    };
+
+    var onPause = function onPause() {
+      setPlayState({
+        playing: false,
+        paused: true,
+        ended: false,
+        buffering: false
+      });
+      debug$2('onPause [URL: %s]', url);
+    };
+
+    var onEnded = function onEnded() {
+      setPlayState({
+        playing: false,
+        paused: false,
+        ended: true,
+        buffering: false
+      });
+      debug$2('onEnded [URL: %s]', url);
+    };
+
+    debug$2('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 function () {
+      debug$2('Unbind events [URL: %s]', url);
+      player.removeEventListener('canplay', onCanPlay);
+      player.removeEventListener('metadataloaded', onMetadataLoaded);
+      player.removeEventListener('play', onPlay);
+      player.removeEventListener('pause', onPause);
+      player.removeEventListener('ended', onEnded);
+    };
+  }, [url, elementRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
+  var playing = playState.playing;
+  var currentTime = usePlayerCurrentTime(elementRef.current, {
+    id: url,
+    disabled: !playing || timeUpdateInterval === null,
+    updateInterval: timeUpdateInterval,
+    onUpdate: customOnTimeUpdate
+  });
+  return _objectSpread$3(_objectSpread$3({
+    ref: elementRef,
+    player: elementRef.current,
+    play: play,
+    pause: pause,
+    mute: mute,
+    unmute: unmute,
+    setVolume: setVolume,
+    seek: seek,
+    setLoop: setLoop,
+    ready: true,
+    currentTime: currentTime,
+    loaded: loaded,
+    muted: volume === 0,
+    volume: 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; }
+
+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) {
@@ -94,7 +691,7 @@ var createObserver = function createObserver(Observer) {
 
     if (currentSubscriber !== null) {
       return subscribers.map(function (it) {
-        return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, 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) {
@@ -110,7 +707,7 @@ var createObserver = function createObserver(Observer) {
 
   var removeSubscriber = function removeSubscriber(element, callback) {
     return subscribers.map(function (it) {
-      return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
+      return it.element === element ? _objectSpread$2(_objectSpread$2({}, it), {}, {
         callbacks: it.callbacks.filter(function (subCallback) {
           return subCallback !== callback;
         })
@@ -309,10 +906,719 @@ var useResizeObserver = function useResizeObserver() {
   }, 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');
+
+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 null;
+    }
+
+    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 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];
+
+  var _useState7 = 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;
+
+    if (!apiLoaded && videoId !== null) {
+      services.loadYouTube().then(function (api) {
+        if (!canceled) {
+          apiRef.current = api;
+          setApiLoaded(true);
+          debug$1('API Loaded');
+        }
+      });
+    }
+
+    return function () {
+      canceled = true;
+    };
+  }, [apiLoaded, videoId, setApiLoaded]);
+  var play = react.useCallback(function () {
+    var player = playerRef.current;
+    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;
+    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);
+
+    if (customOnVolumeChange) {
+      customOnVolumeChange(volume);
+    }
+
+    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);
+    });
+  }, [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);
+    });
+  }, []);
+  var seek = react.useCallback(function (time) {
+    var player = playerRef.current;
+    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;
+    return player !== null && typeof player.setLoop !== 'undefined' ? Promise.resolve(player.setLoop(loop)) : Promise.reject(NO_PLAYER_ERROR$1);
+  }, []);
+  var destroyPlayer = react.useCallback(function () {
+    if (playerRef.current !== null) {
+      debug$1('Unset player');
+      playerRef.current = null;
+    }
+  }, []); // Detect iframe switch and destroy player
+
+  react.useEffect(function () {
+    var currentPlayer = playerRef.current;
+
+    if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
+      debug$1('iFrame switched');
+      destroyPlayer();
+    }
+  }); // 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;
+
+    if (!apiLoaded || videoId === null || element === null) {
+      destroyPlayer();
+      return;
+    }
+
+    var player = currentPlayer;
+
+    if (player !== null) {
+      debug$1('Switch video [ID: %s]', videoId);
+      player.loadVideoById(videoId);
+    } else {
+      debug$1('Create player [ID: %s]', videoId);
+      var iframe = elementRef.current;
+
+      var onReady = function onReady(_ref2) {
+        var target = _ref2.target;
+        player = target;
+        playerRef.current = target;
+        setReady(true);
+        var newDuration = target.getDuration();
+
+        if (newDuration !== metadata.duration) {
+          setMetadata(_objectSpread$1(_objectSpread$1({}, metadata), {}, {
+            duration: newDuration
+          }));
+        }
+
+        debug$1('onReady [ID: %s]', videoId);
+      };
+
+      var onStateChange = function onStateChange(_ref3) {
+        var state = _ref3.data;
+        var 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;
+
+        if (newState.playing) {
+          stateLabel = 'playing';
+        } else if (newState.paused) {
+          stateLabel = 'paused';
+        } else if (newState.ended) {
+          stateLabel = 'ended';
+        } else if (newState.buffering) {
+          stateLabel = 'buffering';
+        } else if (state === -1) {
+          stateLabel = 'not started';
+        } else if (state === 0) {
+          stateLabel = 'stopped';
+        }
+
+        debug$1('onStateChange %s [ID: %s]', stateLabel, videoId);
+      };
+
+      player = new YT.Player(iframe, {
+        videoId: videoId,
+        playerVars: {
+          controls: controls,
+          autoplay: autoplay ? 1 : 0,
+          mute: initialMuted,
+          playsinline: true,
+          rel: 0,
+          showinfo: 0,
+          modestbranding: 1
+        },
+        events: {
+          onReady: onReady,
+          onStateChange: onStateChange
+        }
+      });
+      playerElementRef.current = iframe;
+    }
+
+    playerRef.current = player;
+  }, [apiLoaded, videoId, setPlayState, setReady, setMetadata, destroyPlayer]);
+  var playing = playState.playing;
+  var getCurrentTime = react.useCallback(function (p) {
+    return p.getCurrentTime();
+  }, []);
+  var currentTime = usePlayerCurrentTime(playerRef.current, {
+    id: videoId,
+    disabled: !playing || timeUpdateInterval === null,
+    updateInterval: timeUpdateInterval,
+    onUpdate: customOnTimeUpdate,
+    getCurrentTime: getCurrentTime
+  });
+  return _objectSpread$1(_objectSpread$1({
+    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);
+}
+
+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 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];
+
+  var _useState9 = 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
+
+
+  react.useEffect(function () {
+    var canceled = false;
+
+    if (!apiLoaded && id !== null) {
+      services.loadVimeo().then(function (api) {
+        if (!canceled) {
+          apiRef.current = api;
+          setApiLoaded(true);
+          debug('API Loaded');
+        }
+      });
+    }
+
+    return function () {
+      canceled = true;
+    };
+  }, [id]);
+  var play = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.play() : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  var pause = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.pause() : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  var setVolume = react.useCallback(function (newVolume) {
+    var player = playerRef.current;
+    return player !== null ? player.setVolume(newVolume) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  var mute = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.setVolume(0) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  var unmute = react.useCallback(function () {
+    var player = playerRef.current;
+    return player !== null ? player.setVolume(1) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  var seek = react.useCallback(function (time) {
+    var player = playerRef.current;
+    return player !== null ? player.setCurrentTime(time) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  var setLoop = react.useCallback(function (loop) {
+    var player = playerRef.current;
+    return player !== null ? player.setLoop(loop) : Promise.reject(NO_PLAYER_ERROR);
+  }, []);
+  var destroyVideo = react.useCallback(function () {
+    var player = playerRef.current;
+
+    if (player !== null) {
+      debug('Unload video');
+      player.unload();
+    }
+
+    if (player !== null) {
+      debug('Unset video');
+      playerRef.current = null;
+    }
+  }, []);
+  var playerElementRef = react.useRef(elementRef.current);
+  react.useEffect(function () {
+    var currentPlayer = playerRef.current;
+
+    if (playerElementRef.current !== elementRef.current && currentPlayer !== null) {
+      debug('iFrame switched');
+      destroyVideo();
+    }
+  }); // 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;
+
+    if (!apiLoaded || videoId === null || element === null) {
+      destroyVideo();
+      return;
+    }
+
+    var 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,
+        muted: initialMuted,
+        background: !controls
+      });
+      player.ready().then(function () {
+        return setReady(true);
+      }).catch(function (e) {
+        debug('ERROR: %o', e);
+      });
+      playerElementRef.current = element;
+    } else {
+      debug('Load video [ID: %s]', videoId);
+      player.loadVideo(videoId).catch(function (e) {
+        debug('ERROR: %o', e);
+      });
+    }
+
+    playerRef.current = player;
+  }, [apiLoaded, videoId, setReady, destroyVideo, setLoaded]); // Bind player events
+
+  react.useEffect(function () {
+    var player = playerRef.current;
+
+    if (player === null) {
+      return function () {};
+    }
+
+    var 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];
+
+        if (canceled) {
+          return;
+        }
+
+        var newMetadata = {
+          duration: newDuration,
+          width: newWidth,
+          height: newHeight
+        };
+        setMetadata(newMetadata);
+
+        if (newMuted) {
+          setVolumeState(0);
+        }
+
+        setLoaded(true);
+      });
+      debug('onLoaded [ID: %s]', videoId);
+    };
+
+    var onPlay = function onPlay() {
+      setPlayState({
+        playing: true,
+        paused: false,
+        ended: false,
+        buffering: false
+      });
+      debug('onPlay [ID: %s]', videoId);
+      player.getMuted().then(function (newMuted) {
+        if (!canceled && newMuted) {
+          setVolumeState(0);
+        }
+      }).catch(function () {});
+    };
+
+    var onPause = function onPause() {
+      setPlayState({
+        playing: false,
+        paused: true,
+        ended: false,
+        buffering: false
+      });
+      debug('onPause [ID: %s]', videoId);
+    };
+
+    var onVolumeChange = function onVolumeChange(_ref4) {
+      var newVolume = _ref4.volume;
+      return setVolumeState(newVolume);
+    };
+
+    var onEnded = function onEnded() {
+      setPlayState({
+        playing: false,
+        paused: false,
+        ended: true,
+        buffering: false
+      });
+    };
+
+    var onBufferStart = function onBufferStart() {
+      setPlayState({
+        playing: true,
+        paused: false,
+        ended: false,
+        buffering: true
+      });
+      debug('onBufferStart [ID: %s]', videoId);
+    };
+
+    var onBufferEnded = function 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 function () {
+      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]);
+  var playing = playState.playing;
+  var getCurrentTime = react.useCallback(function (p) {
+    return p.getCurrentTime();
+  }, []);
+  var currentTime = usePlayerCurrentTime(playerRef.current, {
+    id: videoId,
+    disabled: !playing || timeUpdateInterval === null,
+    updateInterval: timeUpdateInterval,
+    onUpdate: customOnTimeUpdate,
+    getCurrentTime: getCurrentTime
+  });
+  return _objectSpread(_objectSpread({
+    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,
+    muted: volume === 0,
+    volume: 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;
+
+  if (service === 'dailymotion') {
+    player = dailymotionPlayer;
+  } else if (service === 'youtube') {
+    player = youtubePlayer;
+  } else if (service === 'vimeo') {
+    player = vimeoPlayer;
+  } else {
+    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 () {
+    if (ready && customOnLoaded !== null) {
+      customOnLoaded();
+    }
+  }, [ready, customOnLoaded]);
+  react.useEffect(function () {
+    if (playing && customOnPlay !== null) {
+      customOnPlay();
+    }
+  }, [playing, customOnPlay]);
+  react.useEffect(function () {
+    if (paused && customOnPause !== null) {
+      customOnPause();
+    }
+  }, [paused, customOnPause]);
+  react.useEffect(function () {
+    if (buffering && customOnBufferStart !== null) {
+      customOnBufferStart();
+    } else if (!buffering && customOnBufferEnded !== null) {
+      customOnBufferEnded();
+    }
+  }, [buffering, customOnBufferStart, customOnBufferEnded]);
+  react.useEffect(function () {
+    if (ended && customOnEnd !== null) {
+      customOnEnd();
+    }
+  }, [ended, customOnEnd]);
+  react.useEffect(function () {
+    var hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null;
+
+    if (hasMetadata && customOnMetadataChange !== null) {
+      customOnMetadataChange({
+        width: metaWidth,
+        height: metaHeight,
+        duration: metaDuration
+      });
+    }
+  }, [metaWidth, metaHeight, metaDuration, customOnMetadataChange]);
+  return player;
+}
+
 exports.getObserver = getObserver;
+exports.useDailymotionPlayer = useDailymotionPlayer;
 exports.useDocumentEvent = useDocumentEvent;
 exports.useIntersectionObserver = useIntersectionObserver;
 exports.useKeyboard = useKeyboard;
+exports.useNativeVideoPlayer = useNativeVideoPlayer;
 exports.useObserver = useObserver;
+exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
+exports.useVideoPlayer = useVideoPlayer;
+exports.useVimeoPlayer = useVimeoPlayer;
 exports.useWindowEvent = useWindowEvent;
+exports.useYouTubePlayer = useYouTubePlayer;