@micromag/element-audio 0.3.150 → 0.3.152

package/es/index.js

@@ -1,13 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';
-import React, { useRef, useMemo, useEffect, useCallback, useState } from 'react';
+import React, { useRef, useMemo, useEffect, useCallback } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { useUserInteracted } from '@micromag/core/contexts';
-import { useResizeObserver, useMediaApi } from '@micromag/core/hooks';
+import { useDimensionObserver, useMediaCurrentTime, useMediaReady, useMediaDuration, useMediaWaveform, useMediaLoad, useProgressSteps } from '@micromag/core/hooks';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 import { useGesture } from '@use-gesture/react';
@@ -74,14 +73,11 @@ function AudioWave(_ref) {
     return getContrastingColor(backgroundColor, progressColor);
   }, [progressColor, backgroundColor]);
 
-  var _useResizeObserver = useResizeObserver(),
-      elRef = _useResizeObserver.ref,
-      elContentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref3 = elContentRect || {},
-      _ref3$width = _ref3.width,
-      elWidth = _ref3$width === void 0 ? null : _ref3$width,
-      elHeight = _ref3.height; // Linear animation for progress bar
+  var _useDimensionObserver = useDimensionObserver(),
+      elRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+      elHeight = _useDimensionObserver.height; // Linear animation for progress bar
 
 
   var _useSpring = useSpring(function () {
@@ -195,8 +191,11 @@ function AudioWave(_ref) {
   }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
 
   var seekFromX = useCallback(function (x) {
-    var elX = elRef.current.getBoundingClientRect().left;
-    var progress = Math.max(0, Math.min(1, (x - elX) / elWidth));
+    var _elRef$current$getBou = elRef.current.getBoundingClientRect(),
+        elX = _elRef$current$getBou.left,
+        width = _elRef$current$getBou.width;
+
+    var progress = Math.max(0, Math.min(1, (x - elX) / width));
 
     if (onSeek !== null && duration !== null) {
       onSeek(progress * duration);
@@ -207,11 +206,11 @@ function AudioWave(_ref) {
     }
   }, [duration, playing, onSeek, onResume]);
   var bind = useGesture({
-    onDrag: function onDrag(_ref4) {
-      var _ref4$xy = _slicedToArray(_ref4.xy, 1),
-          x = _ref4$xy[0],
-          elapsedTime = _ref4.elapsedTime,
-          active = _ref4.active;
+    onDrag: function onDrag(_ref3) {
+      var _ref3$xy = _slicedToArray(_ref3.xy, 1),
+          x = _ref3$xy[0],
+          elapsedTime = _ref3.elapsedTime,
+          active = _ref3.active;
 
       if (!active && elapsedTime > 300) {
         return;
@@ -247,22 +246,24 @@ AudioWave.defaultProps = defaultProps$1;
 
 var styles = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave"};
 
-var _excluded = ["ref"];
 var propTypes = {
   media: PropTypes$1.audioMedia,
-  apiRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
-  initialMuted: PropTypes.oneOf(['auto', true, false]),
+  muted: PropTypes.bool,
   autoPlay: PropTypes.bool,
+  paused: PropTypes.bool,
   loop: PropTypes.bool,
+  preload: PropTypes.oneOf(['auto', 'none', 'metadata']),
+  shouldLoad: PropTypes.bool,
   waveFake: PropTypes.bool,
   waveProps: PropTypes.shape({
     sampleWidth: PropTypes.number,
     sampleMargin: PropTypes.number,
     minSampleHeight: PropTypes.number
   }),
-  showWave: PropTypes.bool,
+  withWave: PropTypes.bool,
   reduceBufferFactor: PropTypes.number,
   className: PropTypes.string,
   onReady: PropTypes.func,
@@ -272,18 +273,21 @@ var propTypes = {
   onSeeked: PropTypes.func,
   onTimeUpdate: PropTypes.func,
   onProgressStep: PropTypes.func,
-  onDurationChanged: PropTypes.func,
-  onVolumeChanged: PropTypes.func
+  onDurationChange: PropTypes.func,
+  onVolumeChange: PropTypes.func
 };
 var defaultProps = {
   media: null,
-  apiRef: null,
-  initialMuted: 'auto',
+  mediaRef: null,
+  muted: false,
   autoPlay: false,
+  paused: false,
   loop: false,
+  preload: 'auto',
+  shouldLoad: true,
   waveFake: false,
   waveProps: null,
-  showWave: false,
+  withWave: false,
   reduceBufferFactor: 100,
   className: null,
   onReady: null,
@@ -293,19 +297,22 @@ var defaultProps = {
   onSeeked: null,
   onTimeUpdate: null,
   onProgressStep: null,
-  onDurationChanged: null,
-  onVolumeChanged: null
+  onDurationChange: null,
+  onVolumeChange: null
 };
 
 var Audio = function Audio(_ref) {
   var media = _ref.media,
-      apiRef = _ref.apiRef,
-      initialMuted = _ref.initialMuted,
+      mediaRef = _ref.mediaRef,
+      muted = _ref.muted,
       autoPlay = _ref.autoPlay,
+      paused = _ref.paused,
       loop = _ref.loop,
+      preload = _ref.preload,
+      shouldLoad = _ref.shouldLoad,
       waveFake = _ref.waveFake,
       waveProps = _ref.waveProps,
-      showWave = _ref.showWave,
+      withWave = _ref.withWave,
       reduceBufferFactor = _ref.reduceBufferFactor,
       className = _ref.className,
       onReady = _ref.onReady,
@@ -315,153 +322,132 @@ var Audio = function Audio(_ref) {
       onSeeked = _ref.onSeeked,
       onTimeUpdate = _ref.onTimeUpdate,
       onProgressStep = _ref.onProgressStep,
-      onDurationChanged = _ref.onDurationChanged,
-      onVolumeChanged = _ref.onVolumeChanged;
+      customOnDurationChange = _ref.onDurationChange,
+      customOnVolumeChange = _ref.onVolumeChange;
 
   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;
+      url = _ref2$url === void 0 ? null : _ref2$url;
 
-  var _ref3 = metadata || {},
-      _ref3$waveform = _ref3.waveform,
-      waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
+  var _ref4 = useRef(null);
 
-  var userInteracted = useUserInteracted();
-  var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
+  var currentTime = useMediaCurrentTime(_ref4.current, {
+    id: url,
+    disabled: paused || !withWave && onProgressStep === null
+  });
+  var ready = useMediaReady(_ref4.current, {
+    id: url
+  });
+  var duration = useMediaDuration(_ref4.current, {
+    id: url
+  });
+  var audioLevels = useMediaWaveform(media, {
+    fake: waveFake,
+    reduceBufferFactor: reduceBufferFactor
+  });
+  useMediaLoad(_ref4.current, {
+    preload: preload,
+    shouldLoad: shouldLoad
+  });
+  var waveReady = waveFake || ready;
+  useEffect(function () {
+    if (duration > 0 && customOnDurationChange !== null) {
+      customOnDurationChange(duration);
+    }
+  }, [duration, customOnDurationChange]);
+  var onVolumeChange = useCallback(function () {
+    var _ref$current = _ref4.current,
+        element = _ref$current === void 0 ? null : _ref$current;
 
-  var _useMediaApi = useMediaApi({
-    url: url,
-    initialMuted: finalInitialMuted,
-    onPlay: onPlay,
-    onPause: onPause,
-    onEnded: onEnded,
-    onSeeked: onSeeked,
-    onTimeUpdate: onTimeUpdate,
-    onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
-    onVolumeChanged: onVolumeChanged
-  }),
-      ref = _useMediaApi.ref,
-      api = _objectWithoutProperties(_useMediaApi, _excluded);
-
-  if (apiRef !== null) {
-    apiRef.current = api;
-    apiRef.current.mediaRef = ref;
-  }
-
-  var currentTime = api.currentTime,
-      duration = api.duration,
-      playing = api.playing,
-      seek = api.seek,
-      audioReady = api.ready,
-      play = api.play,
-      pause = api.pause,
-      muted = api.muted,
-      unMute = api.unMute;
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      audioLevels = _useState2[0],
-      setAudioLevels = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      blobUrl = _useState4[0],
-      setBlobUrl = _useState4[1];
+    if (element === null) {
+      return;
+    }
 
-  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 && waveFake) {
-      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');
-        }
-
-        setBlobUrl(URL.createObjectURL(new Blob([arrayBuffer])));
-        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, levelIndex) {
-            // if (levelIndex % reduceBufferFactor === 0) {
-            //     console.log(level, (level + 1) / 2);
-            newArray[newArray.length] = Math.abs(level); // }
-
-            return newArray;
-          }, []));
-        }
-      })["catch"](function (e) {
-        throw e;
-      });
+    if (customOnVolumeChange !== null) {
+      customOnVolumeChange(element.volume);
     }
+  }, [customOnVolumeChange]);
+  var onWavePlay = useCallback(function () {
+    var _ref$current2 = _ref4.current,
+        element = _ref$current2 === void 0 ? null : _ref$current2;
 
-    return function () {
-      if (url === null) {
-        canceled = true;
-      }
-    };
-  }, [url, waveform, setAudioLevels, setBlobUrl, reduceBufferFactor, waveFake]);
-  var ready = waveFake || audioReady && blobUrl !== null;
+    if (element === null) {
+      return;
+    }
+
+    element.play();
+  }, []);
+  var onWaveSeek = useCallback(function (newTime) {
+    var _ref$current3 = _ref4.current,
+        element = _ref$current3 === void 0 ? null : _ref$current3;
+
+    if (element === null) {
+      return;
+    }
+
+    element.currentTime = newTime;
+  }, []);
   useEffect(function () {
-    if (ready && onReady !== null) {
+    if (waveReady && onReady !== null) {
       onReady();
     }
-  }, [ready, onReady]);
+  }, [waveReady, onReady]);
   useEffect(function () {
-    if (autoPlay) {
-      play();
+    var _ref$current4 = _ref4.current,
+        element = _ref$current4 === void 0 ? null : _ref$current4;
 
-      if (initialMuted === 'auto' && muted && userInteracted) {
-        unMute();
-      }
-    } else {
-      pause();
+    if (element === null) {
+      return;
+    }
+
+    var isPaused = element.paused;
+
+    if (paused && !isPaused) {
+      element.pause();
+    } else if (!paused && isPaused) {
+      element.play();
     }
-  }, [autoPlay]);
+  }, [paused, media]);
+  useProgressSteps({
+    currentTime: currentTime,
+    duration: duration,
+    disabled: paused,
+    onStep: onProgressStep
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("audio", {
     key: url,
-    ref: ref,
-    src: waveFake ? url : blobUrl,
+    ref: function ref(newRef) {
+      _ref4.current = newRef;
+
+      if (mediaRef !== null && isFunction(mediaRef)) {
+        mediaRef(newRef);
+      } else if (mediaRef !== null) {
+        mediaRef.current = newRef;
+      }
+    },
+    src: url,
     autoPlay: autoPlay,
     muted: muted,
     loop: loop,
     crossOrigin: "anonymous",
-    preload: "none"
-  }), showWave ? /*#__PURE__*/React.createElement(AudioWave, Object.assign({
+    preload: preload,
+    onPlay: onPlay,
+    onPause: onPause,
+    onEnded: onEnded,
+    onSeeked: onSeeked,
+    onTimeUpdate: onTimeUpdate,
+    onVolumeChange: onVolumeChange
+  }), withWave ? /*#__PURE__*/React.createElement(AudioWave, Object.assign({
     className: styles.wave,
     media: media,
     currentTime: currentTime
   }, waveProps, {
     duration: duration,
-    playing: playing,
-    onSeek: seek,
-    onResume: play,
+    playing: !paused,
+    onSeek: onWaveSeek,
+    onResume: onWavePlay,
     audioLevels: audioLevels
   })) : null);
 };
@@ -470,7 +456,7 @@ Audio.propTypes = propTypes;
 Audio.defaultProps = defaultProps;
 var Audio$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Audio, Object.assign({
-    apiRef: ref
+    mediaRef: ref
   }, props));
 });
 

package/lib/index.js

@@ -3,15 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
+var isFunction = require('lodash/isFunction');
 var PropTypes = require('prop-types');
 var React = require('react');
 var core = require('@micromag/core');
-var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
 var react = require('@use-gesture/react');
@@ -21,12 +20,12 @@ var utils = require('@micromag/core/utils');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 
 var styles$1 = {"container":"micromag-element-audio-audio-wave-container","button":"micromag-element-audio-audio-wave-button","canvasBackground":"micromag-element-audio-audio-wave-canvasBackground","canvasProgress":"micromag-element-audio-audio-wave-canvasProgress"};
 
@@ -88,14 +87,11 @@ function AudioWave(_ref) {
     return utils.getContrastingColor(backgroundColor, progressColor);
   }, [progressColor, backgroundColor]);
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      elRef = _useResizeObserver.ref,
-      elContentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref3 = elContentRect || {},
-      _ref3$width = _ref3.width,
-      elWidth = _ref3$width === void 0 ? null : _ref3$width,
-      elHeight = _ref3.height; // Linear animation for progress bar
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      elRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+      elHeight = _useDimensionObserver.height; // Linear animation for progress bar
 
 
   var _useSpring = core$1.useSpring(function () {
@@ -209,8 +205,11 @@ function AudioWave(_ref) {
   }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
 
   var seekFromX = React.useCallback(function (x) {
-    var elX = elRef.current.getBoundingClientRect().left;
-    var progress = Math.max(0, Math.min(1, (x - elX) / elWidth));
+    var _elRef$current$getBou = elRef.current.getBoundingClientRect(),
+        elX = _elRef$current$getBou.left,
+        width = _elRef$current$getBou.width;
+
+    var progress = Math.max(0, Math.min(1, (x - elX) / width));
 
     if (onSeek !== null && duration !== null) {
       onSeek(progress * duration);
@@ -221,11 +220,11 @@ function AudioWave(_ref) {
     }
   }, [duration, playing, onSeek, onResume]);
   var bind = react.useGesture({
-    onDrag: function onDrag(_ref4) {
-      var _ref4$xy = _slicedToArray__default["default"](_ref4.xy, 1),
-          x = _ref4$xy[0],
-          elapsedTime = _ref4.elapsedTime,
-          active = _ref4.active;
+    onDrag: function onDrag(_ref3) {
+      var _ref3$xy = _slicedToArray__default["default"](_ref3.xy, 1),
+          x = _ref3$xy[0],
+          elapsedTime = _ref3.elapsedTime,
+          active = _ref3.active;
 
       if (!active && elapsedTime > 300) {
         return;
@@ -261,22 +260,24 @@ AudioWave.defaultProps = defaultProps$1;
 
 var styles = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave"};
 
-var _excluded = ["ref"];
 var propTypes = {
   media: core.PropTypes.audioMedia,
-  apiRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+  mediaRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any
   })]),
-  initialMuted: PropTypes__default["default"].oneOf(['auto', true, false]),
+  muted: PropTypes__default["default"].bool,
   autoPlay: PropTypes__default["default"].bool,
+  paused: PropTypes__default["default"].bool,
   loop: PropTypes__default["default"].bool,
+  preload: PropTypes__default["default"].oneOf(['auto', 'none', 'metadata']),
+  shouldLoad: PropTypes__default["default"].bool,
   waveFake: PropTypes__default["default"].bool,
   waveProps: PropTypes__default["default"].shape({
     sampleWidth: PropTypes__default["default"].number,
     sampleMargin: PropTypes__default["default"].number,
     minSampleHeight: PropTypes__default["default"].number
   }),
-  showWave: PropTypes__default["default"].bool,
+  withWave: PropTypes__default["default"].bool,
   reduceBufferFactor: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string,
   onReady: PropTypes__default["default"].func,
@@ -286,18 +287,21 @@ var propTypes = {
   onSeeked: PropTypes__default["default"].func,
   onTimeUpdate: PropTypes__default["default"].func,
   onProgressStep: PropTypes__default["default"].func,
-  onDurationChanged: PropTypes__default["default"].func,
-  onVolumeChanged: PropTypes__default["default"].func
+  onDurationChange: PropTypes__default["default"].func,
+  onVolumeChange: PropTypes__default["default"].func
 };
 var defaultProps = {
   media: null,
-  apiRef: null,
-  initialMuted: 'auto',
+  mediaRef: null,
+  muted: false,
   autoPlay: false,
+  paused: false,
   loop: false,
+  preload: 'auto',
+  shouldLoad: true,
   waveFake: false,
   waveProps: null,
-  showWave: false,
+  withWave: false,
   reduceBufferFactor: 100,
   className: null,
   onReady: null,
@@ -307,19 +311,22 @@ var defaultProps = {
   onSeeked: null,
   onTimeUpdate: null,
   onProgressStep: null,
-  onDurationChanged: null,
-  onVolumeChanged: null
+  onDurationChange: null,
+  onVolumeChange: null
 };
 
 var Audio = function Audio(_ref) {
   var media = _ref.media,
-      apiRef = _ref.apiRef,
-      initialMuted = _ref.initialMuted,
+      mediaRef = _ref.mediaRef,
+      muted = _ref.muted,
       autoPlay = _ref.autoPlay,
+      paused = _ref.paused,
       loop = _ref.loop,
+      preload = _ref.preload,
+      shouldLoad = _ref.shouldLoad,
       waveFake = _ref.waveFake,
       waveProps = _ref.waveProps,
-      showWave = _ref.showWave,
+      withWave = _ref.withWave,
       reduceBufferFactor = _ref.reduceBufferFactor,
       className = _ref.className,
       onReady = _ref.onReady,
@@ -329,153 +336,132 @@ var Audio = function Audio(_ref) {
       onSeeked = _ref.onSeeked,
       onTimeUpdate = _ref.onTimeUpdate,
       onProgressStep = _ref.onProgressStep,
-      onDurationChanged = _ref.onDurationChanged,
-      onVolumeChanged = _ref.onVolumeChanged;
+      customOnDurationChange = _ref.onDurationChange,
+      customOnVolumeChange = _ref.onVolumeChange;
 
   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;
+      url = _ref2$url === void 0 ? null : _ref2$url;
 
-  var _ref3 = metadata || {},
-      _ref3$waveform = _ref3.waveform,
-      waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
+  var _ref4 = React.useRef(null);
 
-  var userInteracted = contexts.useUserInteracted();
-  var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
+  var currentTime = hooks.useMediaCurrentTime(_ref4.current, {
+    id: url,
+    disabled: paused || !withWave && onProgressStep === null
+  });
+  var ready = hooks.useMediaReady(_ref4.current, {
+    id: url
+  });
+  var duration = hooks.useMediaDuration(_ref4.current, {
+    id: url
+  });
+  var audioLevels = hooks.useMediaWaveform(media, {
+    fake: waveFake,
+    reduceBufferFactor: reduceBufferFactor
+  });
+  hooks.useMediaLoad(_ref4.current, {
+    preload: preload,
+    shouldLoad: shouldLoad
+  });
+  var waveReady = waveFake || ready;
+  React.useEffect(function () {
+    if (duration > 0 && customOnDurationChange !== null) {
+      customOnDurationChange(duration);
+    }
+  }, [duration, customOnDurationChange]);
+  var onVolumeChange = React.useCallback(function () {
+    var _ref$current = _ref4.current,
+        element = _ref$current === void 0 ? null : _ref$current;
 
-  var _useMediaApi = hooks.useMediaApi({
-    url: url,
-    initialMuted: finalInitialMuted,
-    onPlay: onPlay,
-    onPause: onPause,
-    onEnded: onEnded,
-    onSeeked: onSeeked,
-    onTimeUpdate: onTimeUpdate,
-    onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
-    onVolumeChanged: onVolumeChanged
-  }),
-      ref = _useMediaApi.ref,
-      api = _objectWithoutProperties__default["default"](_useMediaApi, _excluded);
-
-  if (apiRef !== null) {
-    apiRef.current = api;
-    apiRef.current.mediaRef = ref;
-  }
-
-  var currentTime = api.currentTime,
-      duration = api.duration,
-      playing = api.playing,
-      seek = api.seek,
-      audioReady = api.ready,
-      play = api.play,
-      pause = api.pause,
-      muted = api.muted,
-      unMute = api.unMute;
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      audioLevels = _useState2[0],
-      setAudioLevels = _useState2[1];
-
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      blobUrl = _useState4[0],
-      setBlobUrl = _useState4[1];
+    if (element === null) {
+      return;
+    }
 
-  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 && waveFake) {
-      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');
-        }
-
-        setBlobUrl(URL.createObjectURL(new Blob([arrayBuffer])));
-        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, levelIndex) {
-            // if (levelIndex % reduceBufferFactor === 0) {
-            //     console.log(level, (level + 1) / 2);
-            newArray[newArray.length] = Math.abs(level); // }
-
-            return newArray;
-          }, []));
-        }
-      })["catch"](function (e) {
-        throw e;
-      });
+    if (customOnVolumeChange !== null) {
+      customOnVolumeChange(element.volume);
     }
+  }, [customOnVolumeChange]);
+  var onWavePlay = React.useCallback(function () {
+    var _ref$current2 = _ref4.current,
+        element = _ref$current2 === void 0 ? null : _ref$current2;
 
-    return function () {
-      if (url === null) {
-        canceled = true;
-      }
-    };
-  }, [url, waveform, setAudioLevels, setBlobUrl, reduceBufferFactor, waveFake]);
-  var ready = waveFake || audioReady && blobUrl !== null;
+    if (element === null) {
+      return;
+    }
+
+    element.play();
+  }, []);
+  var onWaveSeek = React.useCallback(function (newTime) {
+    var _ref$current3 = _ref4.current,
+        element = _ref$current3 === void 0 ? null : _ref$current3;
+
+    if (element === null) {
+      return;
+    }
+
+    element.currentTime = newTime;
+  }, []);
   React.useEffect(function () {
-    if (ready && onReady !== null) {
+    if (waveReady && onReady !== null) {
       onReady();
     }
-  }, [ready, onReady]);
+  }, [waveReady, onReady]);
   React.useEffect(function () {
-    if (autoPlay) {
-      play();
+    var _ref$current4 = _ref4.current,
+        element = _ref$current4 === void 0 ? null : _ref$current4;
 
-      if (initialMuted === 'auto' && muted && userInteracted) {
-        unMute();
-      }
-    } else {
-      pause();
+    if (element === null) {
+      return;
     }
-  }, [autoPlay]);
+
+    var isPaused = element.paused;
+
+    if (paused && !isPaused) {
+      element.pause();
+    } else if (!paused && isPaused) {
+      element.play();
+    }
+  }, [paused, media]);
+  hooks.useProgressSteps({
+    currentTime: currentTime,
+    duration: duration,
+    disabled: paused,
+    onStep: onProgressStep
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("audio", {
     key: url,
-    ref: ref,
-    src: waveFake ? url : blobUrl,
+    ref: function ref(newRef) {
+      _ref4.current = newRef;
+
+      if (mediaRef !== null && isFunction__default["default"](mediaRef)) {
+        mediaRef(newRef);
+      } else if (mediaRef !== null) {
+        mediaRef.current = newRef;
+      }
+    },
+    src: url,
     autoPlay: autoPlay,
     muted: muted,
     loop: loop,
     crossOrigin: "anonymous",
-    preload: "none"
-  }), showWave ? /*#__PURE__*/React__default["default"].createElement(AudioWave, Object.assign({
+    preload: preload,
+    onPlay: onPlay,
+    onPause: onPause,
+    onEnded: onEnded,
+    onSeeked: onSeeked,
+    onTimeUpdate: onTimeUpdate,
+    onVolumeChange: onVolumeChange
+  }), withWave ? /*#__PURE__*/React__default["default"].createElement(AudioWave, Object.assign({
     className: styles.wave,
     media: media,
     currentTime: currentTime
   }, waveProps, {
     duration: duration,
-    playing: playing,
-    onSeek: seek,
-    onResume: play,
+    playing: !paused,
+    onSeek: onWaveSeek,
+    onResume: onWavePlay,
     audioLevels: audioLevels
   })) : null);
 };
@@ -484,7 +470,7 @@ Audio.propTypes = propTypes;
 Audio.defaultProps = defaultProps;
 var Audio$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Audio, Object.assign({
-    apiRef: ref
+    mediaRef: ref
   }, props));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.3.150",
+    "version": "0.3.152",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,13 +52,14 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.150",
-        "@micromag/element-closed-captions": "^0.3.150",
-        "@micromag/element-media-controls": "^0.3.150",
+        "@micromag/core": "^0.3.152",
+        "@micromag/element-closed-captions": "^0.3.152",
+        "@micromag/element-media-controls": "^0.3.152",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
         "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
         "uuid": "^8.3.2",
@@ -67,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
+    "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
 }