@micromag/core 0.3.150 → 0.3.156

package/lib/hooks.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var reactIntl = require('react-intl');
@@ -13,9 +14,9 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var forms = require('@folklore/forms');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var classNames = require('classnames');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var screenfull = require('screenfull');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
 var contexts = require('@micromag/core/contexts');
 var cssMediaquery = require('css-mediaquery');
@@ -43,18 +44,71 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var screenfull__default = /*#__PURE__*/_interopDefaultLegacy(screenfull);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
 
+function useActivityDetector() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$timeout = _ref.timeout,
+      timeoutDelay = _ref$timeout === void 0 ? 2000 : _ref$timeout;
+
+  var ref = react.useRef(null);
+
+  var _useState = react.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      detected = _useState2[0],
+      setDetected = _useState2[1];
+
+  react.useEffect(function () {
+    var _ref$current = ref.current,
+        element = _ref$current === void 0 ? null : _ref$current;
+
+    if (element === null || disabled) {
+      return function () {};
+    }
+
+    var timeout = null;
+
+    function onMove() {
+      if (timeout !== null) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+
+      setDetected(true);
+      timeout = setTimeout(function () {
+        setDetected(false);
+      }, timeoutDelay);
+    }
+
+    element.addEventListener('mousemove', onMove);
+    return function () {
+      if (timeout !== null) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+
+      element.removeEventListener('mousemove', onMove);
+    };
+  }, [disabled, timeoutDelay]);
+  return {
+    ref: ref,
+    detected: detected
+  };
+}
+
 var useAnimationFrame = function useAnimationFrame(onFrame) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$disabled = _ref.disabled,
@@ -149,7 +203,7 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
 var useDocumentEvent = utils.createUseEvent(eventsManager$1);
 
-var _excluded$1 = ["fields", "injectInFields"],
+var _excluded$2 = ["fields", "injectInFields"],
     _excluded2 = ["fields"];
 
 var useForm = function useForm() {
@@ -158,7 +212,7 @@ var useForm = function useForm() {
       providedFields = _ref$fields === void 0 ? [] : _ref$fields,
       _ref$injectInFields = _ref.injectInFields,
       injectInFields = _ref$injectInFields === void 0 ? false : _ref$injectInFields,
-      opts = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+      opts = _objectWithoutProperties__default["default"](_ref, _excluded$2);
 
   var fieldsNames = react.useMemo(function () {
     return providedFields.length > 0 ? providedFields.map(function (_ref2) {
@@ -265,6 +319,8 @@ var useFullscreen = function useFullscreen(element) {
   };
 };
 
+var _excluded$1 = ["entry"];
+
 var buildThresholdArray = function buildThresholdArray() {
   return [0, 1.0];
 };
@@ -506,6 +562,35 @@ var useResizeObserver = function useResizeObserver() {
     disabled: disabled
   }, resizeObserverInitialEntry);
 };
+var useDimensionObserver = function useDimensionObserver() {
+  var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
+      entry = _useResizeObserver.entry,
+      rest = _objectWithoutProperties__default["default"](_useResizeObserver, _excluded$1);
+
+  var _ref5 = entry || {},
+      _ref5$contentRect = _ref5.contentRect,
+      contentRect = _ref5$contentRect === void 0 ? null : _ref5$contentRect,
+      _ref5$borderBoxSize = _ref5.borderBoxSize,
+      borderBoxSize = _ref5$borderBoxSize === void 0 ? null : _ref5$borderBoxSize;
+
+  var _ref6 = contentRect || {},
+      _ref6$width = _ref6.width,
+      width = _ref6$width === void 0 ? 0 : _ref6$width,
+      _ref6$height = _ref6.height,
+      height = _ref6$height === void 0 ? 0 : _ref6$height;
+
+  var _ref7 = isArray__default["default"](borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
+      _ref7$blockSize = _ref7.blockSize,
+      blockSize = _ref7$blockSize === void 0 ? null : _ref7$blockSize,
+      _ref7$inlineSize = _ref7.inlineSize,
+      inlineSize = _ref7$inlineSize === void 0 ? null : _ref7$inlineSize;
+
+  return _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+    entry: entry,
+    width: inlineSize || width,
+    height: blockSize || height
+  });
+};
 
 var useIsVisible = function useIsVisible() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -754,16 +839,14 @@ var useMediaApi = function useMediaApi() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? null : _ref$url,
-      _ref$initialMuted = _ref.initialMuted,
-      initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
       _ref$onTimeUpdate = _ref.onTimeUpdate,
       onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
       _ref$onProgressStep = _ref.onProgressStep,
       onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
-      _ref$onDurationChange = _ref.onDurationChanged,
-      onDurationChanged = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
-      _ref$onVolumeChanged = _ref.onVolumeChanged,
-      onVolumeChanged = _ref$onVolumeChanged === void 0 ? null : _ref$onVolumeChanged,
+      _ref$onDurationChange = _ref.onDurationChange,
+      onDurationChange = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
+      _ref$onVolumeChange = _ref.onVolumeChange,
+      onVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
       _ref$onPlay = _ref.onPlay,
       onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
       _ref$onPause = _ref.onPause,
@@ -772,8 +855,8 @@ var useMediaApi = function useMediaApi() {
       onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
       _ref$onSeeked = _ref.onSeeked,
       onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
-      _ref$onSuspended = _ref.onSuspended,
-      onSuspended = _ref$onSuspended === void 0 ? null : _ref$onSuspended,
+      _ref$onSuspend = _ref.onSuspend,
+      onSuspend = _ref$onSuspend === void 0 ? null : _ref$onSuspend,
       _ref$onLoadStart = _ref.onLoadStart,
       onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
       _ref$onCanPlayThough = _ref.onCanPlayThough,
@@ -787,45 +870,40 @@ var useMediaApi = function useMediaApi() {
 
   var ref = react.useRef(null);
 
-  var _useState = react.useState(initialMuted),
+  var _useState = react.useState(null),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      muted = _useState2[0],
-      setMuted = _useState2[1];
+      currentTime = _useState2[0],
+      setCurrentTime = _useState2[1];
 
   var _useState3 = react.useState(null),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      currentTime = _useState4[0],
-      setCurrentTime = _useState4[1];
+      duration = _useState4[0],
+      setDuration = _useState4[1];
 
-  var _useState5 = react.useState(null),
+  var _useState5 = react.useState(false),
       _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      duration = _useState6[0],
-      setDuration = _useState6[1];
+      playing = _useState6[0],
+      setPlaying = _useState6[1];
 
   var _useState7 = react.useState(false),
       _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      playing = _useState8[0],
-      setPlaying = _useState8[1];
+      ready = _useState8[0],
+      setReady = _useState8[1];
 
   var _useState9 = react.useState(false),
       _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      ready = _useState10[0],
-      setReady = _useState10[1];
+      dataReady = _useState10[0],
+      setDataReady = _useState10[1];
 
-  var _useState11 = react.useState(false),
+  var _useState11 = react.useState(true),
       _useState12 = _slicedToArray__default["default"](_useState11, 2),
-      dataReady = _useState12[0],
-      setDataReady = _useState12[1];
+      initialPlay = _useState12[0],
+      setInitialPlay = _useState12[1];
 
-  var _useState13 = react.useState(true),
+  var _useState13 = react.useState(false),
       _useState14 = _slicedToArray__default["default"](_useState13, 2),
-      initialPlay = _useState14[0],
-      setInitialPlay = _useState14[1];
-
-  var _useState15 = react.useState(false),
-      _useState16 = _slicedToArray__default["default"](_useState15, 2),
-      suspended = _useState16[0],
-      setSuspended = _useState16[1];
+      suspended = _useState14[0],
+      setSuspended = _useState14[1];
 
   var progressStepsReached = react.useRef({});
   var paused = !playing; // Exposed methods
@@ -844,17 +922,6 @@ var useMediaApi = function useMediaApi() {
       media.pause();
     }
   }, []);
-  var togglePlay = react.useCallback(function () {
-    var media = ref.current;
-
-    if (media !== null) {
-      if (playing) {
-        media.pause();
-      } else {
-        media.play();
-      }
-    }
-  }, [playing]);
   var stop = react.useCallback(function () {
     var media = ref.current;
 
@@ -869,28 +936,19 @@ var useMediaApi = function useMediaApi() {
     if (media !== null) {
       media.currentTime = time;
     }
-  }, []);
-  var mute = react.useCallback(function () {
-    var media = ref.current;
-
-    if (media !== null) {
-      media.muted = true;
-    }
-  }, []);
-  var unMute = react.useCallback(function () {
-    var media = ref.current;
-
-    if (media !== null) {
-      media.muted = false;
-    }
-  }, []);
-  var toggleMute = react.useCallback(function () {
-    var media = ref.current;
-
-    if (media !== null) {
-      media.muted = !muted;
-    }
-  }, [muted]); // Media events callbacks
+  }, []); // const mute = useCallback(() => {
+  //     const { current: media } = ref;
+  //     if (media !== null) {
+  //         media.muted = true;
+  //     }
+  // }, []);
+  // const unMute = useCallback(() => {
+  //     const { current: media } = ref;
+  //     if (media !== null) {
+  //         media.muted = false;
+  //     }
+  // }, []);
+  // Media events callbacks
 
   var onCustomPlay = react.useCallback(function () {
     if (onPlay !== null) {
@@ -951,10 +1009,10 @@ var useMediaApi = function useMediaApi() {
     var eventMedia = e.currentTarget;
     setDuration(eventMedia.duration);
 
-    if (onDurationChanged !== null) {
-      onDurationChanged(eventMedia.duration);
+    if (onDurationChange !== null) {
+      onDurationChange(eventMedia.duration);
     }
-  }, [setDuration, onDurationChanged]);
+  }, [setDuration, onDurationChange]);
   var onCustomSeeked = react.useCallback(function (e) {
     var eventMedia = e.currentTarget;
 
@@ -963,13 +1021,12 @@ var useMediaApi = function useMediaApi() {
     }
   }, [onSeeked]);
   var onCustomVolumeChange = react.useCallback(function (e) {
-    var eventMedia = e.currentTarget;
-    setMuted(eventMedia.muted);
+    var eventMedia = e.currentTarget; // setMuted(eventMedia.muted);
 
-    if (onVolumeChanged !== null) {
-      onVolumeChanged(eventMedia.muted, eventMedia.volume);
+    if (onVolumeChange !== null) {
+      onVolumeChange(eventMedia.volume);
     }
-  }, [setMuted, onVolumeChanged]);
+  }, [onVolumeChange]);
   var onCustomLoadStart = react.useCallback(function () {
     if (onLoadStart !== null) {
       onLoadStart();
@@ -1006,8 +1063,8 @@ var useMediaApi = function useMediaApi() {
   var onCustomSuspended = react.useCallback(function () {
     setSuspended(true);
 
-    if (onSuspended !== null) {
-      onSuspended();
+    if (onSuspend !== null) {
+      onSuspend();
     }
   }, [setSuspended, onSuspended]);
   react.useEffect(function () {
@@ -1116,13 +1173,8 @@ var useMediaApi = function useMediaApi() {
     ref: ref,
     play: play,
     pause: pause,
-    togglePlay: togglePlay,
     stop: stop,
     seek: seek,
-    mute: mute,
-    unMute: unMute,
-    toggleMute: toggleMute,
-    muted: muted,
     currentTime: currentTime,
     duration: duration,
     playing: playing,
@@ -1133,6 +1185,190 @@ var useMediaApi = function useMediaApi() {
   };
 };
 
+function useMediaCurrentTime(element) {
+  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;
+
+  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 || element === 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 = element.currentTime;
+
+      if (typeof time.then !== 'undefined') {
+        time.then(updateTime);
+      } else {
+        updateTime(time);
+      }
+    }, updateInterval);
+    return function () {
+      canceled = true;
+      clearInterval(interval);
+    };
+  }, [id, element, setCurrentTime, disabled, updateInterval]);
+  return realCurrentTime.current;
+}
+
+function useMediaDuration(element) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? null : _ref$id;
+
+  var _useState = react.useState(element !== null ? element.duration || 0 : 0),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      duration = _useState2[0],
+      setDuration = _useState2[1];
+
+  var realDuration = react.useRef(duration);
+  var lastIdRef = react.useRef(id);
+  var idChanged = lastIdRef.current !== id;
+
+  if (idChanged) {
+    realDuration.current = element !== null ? element.duration || 0 : 0;
+    lastIdRef.current = id;
+  }
+
+  react.useEffect(function () {
+    if (element === null) {
+      return function () {};
+    }
+
+    function updateDuration() {
+      realDuration.current = element.duration || 0;
+      setDuration(element.duration || 0);
+    }
+
+    updateDuration();
+    element.addEventListener('loadedmetadata', updateDuration);
+    element.addEventListener('durationchange', updateDuration);
+    return function () {
+      element.removeEventListener('loadedmetadata', updateDuration);
+      element.removeEventListener('durationchange', updateDuration);
+    };
+  }, [element, id, setDuration]);
+  return realDuration.current;
+}
+
+function useMediaLoad(element) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$preload = _ref.preload,
+      preload = _ref$preload === void 0 ? 'auto' : _ref$preload,
+      _ref$shouldLoad = _ref.shouldLoad,
+      shouldLoad = _ref$shouldLoad === void 0 ? false : _ref$shouldLoad;
+
+  var firstPreloadRef = react.useRef(preload);
+  var firstShouldLoadRef = react.useRef(shouldLoad);
+  var hasLoadedRef = react.useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
+  react.useEffect(function () {
+    var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad; // @todo
+
+    var preloadHasChanged = firstPreloadRef.current !== preload;
+    var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
+
+    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
+      hasLoadedRef.current = true;
+      element.load();
+    }
+  }, [element, shouldLoad, preload]);
+}
+
+function useMediaReady(element) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? null : _ref$id;
+
+  var _useState = react.useState(element !== null && element.readyState > 0),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      ready = _useState2[0],
+      setReady = _useState2[1];
+
+  var realReady = react.useRef(ready);
+  var lastIdRef = react.useRef(id);
+  var idChanged = lastIdRef.current !== id;
+
+  if (idChanged) {
+    realReady.current = false;
+    lastIdRef.current = id;
+  }
+
+  react.useEffect(function () {
+    if (element === null) {
+      return function () {};
+    }
+
+    function updateReady() {
+      var currentReady = ready;
+
+      if (element.readyState > 0 && !ready) {
+        setReady(true);
+        currentReady = true;
+      } else if (ready && element.readyState === 0) {
+        setReady(false);
+        currentReady = false;
+      }
+
+      realReady.current = currentReady;
+      return currentReady;
+    }
+
+    var currentReady = updateReady();
+
+    if (!currentReady) {
+      element.addEventListener('loadedmetadata', updateReady);
+      element.addEventListener('canplay', updateReady);
+      element.addEventListener('canplaythrough', updateReady);
+    }
+
+    return function () {
+      if (!currentReady) {
+        element.removeEventListener('loadedmetadata', updateReady);
+        element.removeEventListener('canplay', updateReady);
+        element.removeEventListener('canplaythrough', updateReady);
+      }
+    };
+  }, [element, id]);
+  return realReady.current;
+}
+
 var useMediasParser = function useMediasParser() {
   var screensManager = contexts.useScreensManager();
   var fieldsManager = contexts.useFieldsManager(); // Convert medias object to path
@@ -1158,25 +1394,117 @@ var useMediasParser = function useMediasParser() {
 
 function useMediaThumbnail(media) {
   var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var thumbnail = react.useMemo(function () {
+    if (isObject__default["default"](file)) {
+      return file;
+    }
+
+    var _ref = media || {},
+        _ref$thumbnail_url = _ref.thumbnail_url,
+        defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
+        _ref$files = _ref.files,
+        files = _ref$files === void 0 ? null : _ref$files,
+        _ref$metadata = _ref.metadata,
+        metadata = _ref$metadata === void 0 ? null : _ref$metadata;
 
-  var _ref = media || {},
-      _ref$thumbnail_url = _ref.thumbnail_url,
-      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
-      _ref$files = _ref.files,
-      files = _ref$files === void 0 ? null : _ref$files;
+    var _ref2 = metadata || {},
+        mediaWidth = _ref2.width,
+        mediaHeight = _ref2.height;
 
-  var thumbnailUrl = react.useMemo(function () {
     var filesArray = utils.getMediaFilesAsArray(files) || [];
 
-    var _ref2 = (file !== null ? filesArray.find(function (_ref3) {
-      var handle = _ref3.handle;
+    var _ref3 = (file !== null ? filesArray.find(function (_ref4) {
+      var handle = _ref4.handle;
       return handle === file;
     }) || null : null) || {},
-        url = _ref2.url;
+        _ref3$url = _ref3.url,
+        url = _ref3$url === void 0 ? null : _ref3$url;
+
+    return url !== null || defaultThumbnailUrl !== null ? {
+      url: url || defaultThumbnailUrl,
+      metadata: {
+        width: mediaWidth,
+        height: mediaHeight
+      }
+    } : null;
+  }, [media, file]);
+  return thumbnail;
+}
 
-    return url || defaultThumbnailUrl;
-  }, [files, file, defaultThumbnailUrl]);
-  return thumbnailUrl;
+function useMediaWaveform(media) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$fake = _ref.fake,
+      fake = _ref$fake === void 0 ? false : _ref$fake,
+      _ref$reduceBufferFact = _ref.reduceBufferFactor,
+      reduceBufferFactor = _ref$reduceBufferFact === void 0 ? 100 : _ref$reduceBufferFact;
+
+  var _ref2 = media || {},
+      _ref2$url = _ref2.url,
+      url = _ref2$url === void 0 ? null : _ref2$url,
+      _ref2$metadata = _ref2.metadata,
+      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
+
+  var _ref3 = metadata || {},
+      _ref3$waveform = _ref3.waveform,
+      waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
+
+  var _useState = react.useState(null),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      audioLevels = _useState2[0],
+      setAudioLevels = _useState2[1];
+
+  react.useEffect(function () {
+    var canceled = false;
+    var AudioContext = typeof window !== 'undefined' ? window.AudioContext || window.webkitAudioContext : null;
+
+    if (waveform !== null) {
+      setAudioLevels(waveform.map(function (it) {
+        return (it + 256 / 2) / 256;
+      }));
+    } else if (url !== null && fake) {
+      var fakeLength = 1000;
+      setAudioLevels(_toConsumableArray__default["default"](new Array(fakeLength)).map(function () {
+        return Math.random();
+      }));
+    } else if (url !== null && AudioContext !== null) {
+      fetch(url, {
+        mode: 'cors'
+      }).then(function (response) {
+        if (canceled) {
+          throw new Error('Audio loading canceled');
+        }
+
+        return response.arrayBuffer();
+      }).then(function (arrayBuffer) {
+        if (canceled) {
+          throw new Error('Audio loading canceled');
+        }
+
+        var audioCtx = new AudioContext();
+        return audioCtx.decodeAudioData(arrayBuffer);
+      }).then(function (buffer) {
+        var channelsCount = buffer.numberOfChannels;
+
+        if (channelsCount > 0) {
+          var leftChannelData = buffer.getChannelData(0);
+          setAudioLevels(leftChannelData.reduce(function (newArray, level) {
+            // eslint-disable-next-line no-param-reassign
+            newArray[newArray.length] = Math.abs(level);
+            return newArray;
+          }, []));
+        }
+      })["catch"](function (e) {
+        throw e;
+      });
+    }
+
+    return function () {
+      if (url === null) {
+        canceled = true;
+      }
+    };
+  }, [url, waveform, setAudioLevels, reduceBufferFactor, fake]);
+  return audioLevels;
 }
 
 var useParsedStory = function useParsedStory(story) {
@@ -1212,6 +1540,38 @@ var useParsedStory = function useParsedStory(story) {
   return newStory;
 };
 
+function useProgressSteps() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      currentTime = _ref.currentTime,
+      duration = _ref.duration,
+      _ref$onStep = _ref.onStep,
+      onStep = _ref$onStep === void 0 ? null : _ref$onStep,
+      _ref$steps = _ref.steps,
+      steps = _ref$steps === void 0 ? [0.1, 0.25, 0.5, 0.75, 0.9] : _ref$steps;
+
+  var progressStepsReached = react.useRef({});
+  react.useEffect(function () {
+    if (duration === 0 || disabled) {
+      return;
+    }
+
+    var progress = currentTime / duration;
+    var currentSteps = progressStepsReached.current;
+    var stepsToTrack = steps.filter(function (step) {
+      return progress > step && typeof currentSteps[step] === 'undefined';
+    });
+    stepsToTrack.forEach(function (step) {
+      if (onStep !== null) {
+        onStep(step);
+      }
+
+      currentSteps[step] = true;
+    });
+  }, [duration, currentTime, disabled]);
+}
+
 var _excluded = ["width", "height"];
 var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 
@@ -1269,34 +1629,31 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
       height = _ref4$height === void 0 ? null : _ref4$height,
       opts = _objectWithoutProperties__default["default"](_ref4, _excluded);
 
-  var _useResizeObserver = useResizeObserver(),
-      ref = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref5 = contentRect || {},
-      _ref5$width = _ref5.width,
-      calculatedWidth = _ref5$width === void 0 ? 0 : _ref5$width,
-      _ref5$height = _ref5.height,
-      calculatedHeight = _ref5$height === void 0 ? 0 : _ref5$height;
+  var _useDimensionObserver = useDimensionObserver(),
+      ref = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+      _useDimensionObserver3 = _useDimensionObserver.height,
+      calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
 
   var fullWidth = width !== null ? width : calculatedWidth;
   var fullHeight = height !== null ? height : calculatedHeight;
 
-  var _ref6 = opts || {},
-      _ref6$screenWidth = _ref6.screenWidth,
-      screenWidth = _ref6$screenWidth === void 0 ? 320 : _ref6$screenWidth,
-      _ref6$screenHeight = _ref6.screenHeight,
-      screenHeight = _ref6$screenHeight === void 0 ? 480 : _ref6$screenHeight,
-      _ref6$withoutMaxSize = _ref6.withoutMaxSize,
-      withoutMaxSize = _ref6$withoutMaxSize === void 0 ? false : _ref6$withoutMaxSize,
-      _ref6$landscapeMinHei = _ref6.landscapeMinHeight,
-      landscapeMinHeight = _ref6$landscapeMinHei === void 0 ? 600 : _ref6$landscapeMinHei,
-      _ref6$menuAlwaysOverS = _ref6.menuAlwaysOverScreen,
-      menuAlwaysOverScreen = _ref6$menuAlwaysOverS === void 0 ? true : _ref6$menuAlwaysOverS,
-      _ref6$landscapeMinRat = _ref6.landscapeMinRatio,
-      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat,
-      _ref6$withoutScale = _ref6.withoutScale,
-      withoutScale = _ref6$withoutScale === void 0 ? false : _ref6$withoutScale;
+  var _ref5 = opts || {},
+      _ref5$screenWidth = _ref5.screenWidth,
+      screenWidth = _ref5$screenWidth === void 0 ? 320 : _ref5$screenWidth,
+      _ref5$screenHeight = _ref5.screenHeight,
+      screenHeight = _ref5$screenHeight === void 0 ? 480 : _ref5$screenHeight,
+      _ref5$withoutMaxSize = _ref5.withoutMaxSize,
+      withoutMaxSize = _ref5$withoutMaxSize === void 0 ? false : _ref5$withoutMaxSize,
+      _ref5$landscapeMinHei = _ref5.landscapeMinHeight,
+      landscapeMinHeight = _ref5$landscapeMinHei === void 0 ? 600 : _ref5$landscapeMinHei,
+      _ref5$menuAlwaysOverS = _ref5.menuAlwaysOverScreen,
+      menuAlwaysOverScreen = _ref5$menuAlwaysOverS === void 0 ? true : _ref5$menuAlwaysOverS,
+      _ref5$landscapeMinRat = _ref5.landscapeMinRatio,
+      landscapeMinRatio = _ref5$landscapeMinRat === void 0 ? 2 / 3 : _ref5$landscapeMinRat,
+      _ref5$withoutScale = _ref5.withoutScale,
+      withoutScale = _ref5$withoutScale === void 0 ? false : _ref5$withoutScale;
 
   var screenRatio = screenWidth / screenHeight;
   var elementRatio = fullWidth / fullHeight;
@@ -1693,7 +2050,9 @@ var eventsManager = typeof window !== 'undefined' ? new core.EventsManager(windo
 var useWindowEvent = utils.createUseEvent(eventsManager);
 
 exports.getObserver = getObserver;
+exports.useActivityDetector = useActivityDetector;
 exports.useAnimationFrame = useAnimationFrame;
+exports.useDimensionObserver = useDimensionObserver;
 exports.useDocumentEvent = useDocumentEvent;
 exports.useForm = useForm;
 exports.useFormTransition = useFormTransition;
@@ -1705,10 +2064,16 @@ exports.useIsVisible = useIsVisible;
 exports.useLoadedFonts = useLoadedFonts;
 exports.useLongPress = useLongPress;
 exports.useMediaApi = useMediaApi;
+exports.useMediaCurrentTime = useMediaCurrentTime;
+exports.useMediaDuration = useMediaDuration;
+exports.useMediaLoad = useMediaLoad;
+exports.useMediaReady = useMediaReady;
 exports.useMediaThumbnail = useMediaThumbnail;
+exports.useMediaWaveform = useMediaWaveform;
 exports.useMediasParser = useMediasParser;
 exports.useObserver = useObserver;
 exports.useParsedStory = useParsedStory;
+exports.useProgressSteps = useProgressSteps;
 exports.useResizeObserver = useResizeObserver;
 exports.useScreenSizeFromElement = useScreenSizeFromElement;
 exports.useScreenSizeFromWindow = useScreenSizeFromWindow;