@micromag/core 0.3.150 → 0.3.156

package/es/hooks.js

@@ -1,4 +1,5 @@
-import { useRef, useEffect, useCallback, useMemo, useState } from 'react';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { useIntl } from 'react-intl';
 import isString from 'lodash/isString';
@@ -9,9 +10,9 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { useForm as useForm$1 } from '@folklore/forms';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import screenfull from 'screenfull';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
 import { match } from 'css-mediaquery';
@@ -19,6 +20,58 @@ import { useSprings } from '@react-spring/core';
 import { useDrag } from '@use-gesture/react';
 import clamp from 'lodash/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 = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      detected = _useState2[0],
+      setDetected = _useState2[1];
+
+  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,
@@ -113,7 +166,7 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
 var useDocumentEvent = createUseEvent(eventsManager$1);
 
-var _excluded$1 = ["fields", "injectInFields"],
+var _excluded$2 = ["fields", "injectInFields"],
     _excluded2 = ["fields"];
 
 var useForm = function useForm() {
@@ -122,7 +175,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(_ref, _excluded$1);
+      opts = _objectWithoutProperties(_ref, _excluded$2);
 
   var fieldsNames = useMemo(function () {
     return providedFields.length > 0 ? providedFields.map(function (_ref2) {
@@ -229,6 +282,8 @@ var useFullscreen = function useFullscreen(element) {
   };
 };
 
+var _excluded$1 = ["entry"];
+
 var buildThresholdArray = function buildThresholdArray() {
   return [0, 1.0];
 };
@@ -470,6 +525,35 @@ var useResizeObserver = function useResizeObserver() {
     disabled: disabled
   }, resizeObserverInitialEntry);
 };
+var useDimensionObserver = function useDimensionObserver() {
+  var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
+      entry = _useResizeObserver.entry,
+      rest = _objectWithoutProperties(_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(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(_objectSpread({}, rest), {}, {
+    entry: entry,
+    width: inlineSize || width,
+    height: blockSize || height
+  });
+};
 
 var useIsVisible = function useIsVisible() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -718,16 +802,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,
@@ -736,8 +818,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,
@@ -751,45 +833,40 @@ var useMediaApi = function useMediaApi() {
 
   var ref = useRef(null);
 
-  var _useState = useState(initialMuted),
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      muted = _useState2[0],
-      setMuted = _useState2[1];
+      currentTime = _useState2[0],
+      setCurrentTime = _useState2[1];
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      currentTime = _useState4[0],
-      setCurrentTime = _useState4[1];
+      duration = _useState4[0],
+      setDuration = _useState4[1];
 
-  var _useState5 = useState(null),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      duration = _useState6[0],
-      setDuration = _useState6[1];
+      playing = _useState6[0],
+      setPlaying = _useState6[1];
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      playing = _useState8[0],
-      setPlaying = _useState8[1];
+      ready = _useState8[0],
+      setReady = _useState8[1];
 
   var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
-      ready = _useState10[0],
-      setReady = _useState10[1];
+      dataReady = _useState10[0],
+      setDataReady = _useState10[1];
 
-  var _useState11 = useState(false),
+  var _useState11 = useState(true),
       _useState12 = _slicedToArray(_useState11, 2),
-      dataReady = _useState12[0],
-      setDataReady = _useState12[1];
+      initialPlay = _useState12[0],
+      setInitialPlay = _useState12[1];
 
-  var _useState13 = useState(true),
+  var _useState13 = useState(false),
       _useState14 = _slicedToArray(_useState13, 2),
-      initialPlay = _useState14[0],
-      setInitialPlay = _useState14[1];
-
-  var _useState15 = useState(false),
-      _useState16 = _slicedToArray(_useState15, 2),
-      suspended = _useState16[0],
-      setSuspended = _useState16[1];
+      suspended = _useState14[0],
+      setSuspended = _useState14[1];
 
   var progressStepsReached = useRef({});
   var paused = !playing; // Exposed methods
@@ -808,17 +885,6 @@ var useMediaApi = function useMediaApi() {
       media.pause();
     }
   }, []);
-  var togglePlay = useCallback(function () {
-    var media = ref.current;
-
-    if (media !== null) {
-      if (playing) {
-        media.pause();
-      } else {
-        media.play();
-      }
-    }
-  }, [playing]);
   var stop = useCallback(function () {
     var media = ref.current;
 
@@ -833,28 +899,19 @@ var useMediaApi = function useMediaApi() {
     if (media !== null) {
       media.currentTime = time;
     }
-  }, []);
-  var mute = useCallback(function () {
-    var media = ref.current;
-
-    if (media !== null) {
-      media.muted = true;
-    }
-  }, []);
-  var unMute = useCallback(function () {
-    var media = ref.current;
-
-    if (media !== null) {
-      media.muted = false;
-    }
-  }, []);
-  var toggleMute = 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 = useCallback(function () {
     if (onPlay !== null) {
@@ -915,10 +972,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 = useCallback(function (e) {
     var eventMedia = e.currentTarget;
 
@@ -927,13 +984,12 @@ var useMediaApi = function useMediaApi() {
     }
   }, [onSeeked]);
   var onCustomVolumeChange = 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 = useCallback(function () {
     if (onLoadStart !== null) {
       onLoadStart();
@@ -970,8 +1026,8 @@ var useMediaApi = function useMediaApi() {
   var onCustomSuspended = useCallback(function () {
     setSuspended(true);
 
-    if (onSuspended !== null) {
-      onSuspended();
+    if (onSuspend !== null) {
+      onSuspend();
     }
   }, [setSuspended, onSuspended]);
   useEffect(function () {
@@ -1080,13 +1136,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,
@@ -1097,6 +1148,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 = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentTime = _useState2[0],
+      setCurrentTime = _useState2[1];
+
+  var realCurrentTime = useRef(currentTime);
+  var lastIdRef = useRef(id);
+  var idChanged = lastIdRef.current !== id;
+
+  if (idChanged) {
+    realCurrentTime.current = 0;
+    lastIdRef.current = id;
+  } // Check time update
+
+
+  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 = useState(element !== null ? element.duration || 0 : 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      duration = _useState2[0],
+      setDuration = _useState2[1];
+
+  var realDuration = useRef(duration);
+  var lastIdRef = useRef(id);
+  var idChanged = lastIdRef.current !== id;
+
+  if (idChanged) {
+    realDuration.current = element !== null ? element.duration || 0 : 0;
+    lastIdRef.current = id;
+  }
+
+  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 = useRef(preload);
+  var firstShouldLoadRef = useRef(shouldLoad);
+  var hasLoadedRef = useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
+  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 = useState(element !== null && element.readyState > 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      ready = _useState2[0],
+      setReady = _useState2[1];
+
+  var realReady = useRef(ready);
+  var lastIdRef = useRef(id);
+  var idChanged = lastIdRef.current !== id;
+
+  if (idChanged) {
+    realReady.current = false;
+    lastIdRef.current = id;
+  }
+
+  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 = useScreensManager();
   var fieldsManager = useFieldsManager(); // Convert medias object to path
@@ -1122,25 +1357,117 @@ var useMediasParser = function useMediasParser() {
 
 function useMediaThumbnail(media) {
   var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var thumbnail = useMemo(function () {
+    if (isObject(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 = useMemo(function () {
     var filesArray = 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 = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      audioLevels = _useState2[0],
+      setAudioLevels = _useState2[1];
+
+  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(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) {
@@ -1176,6 +1503,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 = useRef({});
+  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;
 
@@ -1233,34 +1592,31 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
       height = _ref4$height === void 0 ? null : _ref4$height,
       opts = _objectWithoutProperties(_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;
@@ -1656,4 +2012,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useAnimationFrame, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaThumbnail, useMediasParser, useObserver, useParsedStory, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDimensionObserver, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };