@micromag/element-audio 0.3.311 → 0.3.322

package/assets/css/styles.css

@@ -1,3 +1,3 @@
-.micromag-element-audio-audio-bars-container .micromag-element-audio-audio-bars-seekButton{display:inline-block;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;top:0;left:0}.micromag-element-audio-audio-bars-container,.micromag-element-audio-audio-bars-container .micromag-element-audio-audio-bars-seekButton{position:relative;width:100%;height:100%}.micromag-element-audio-audio-bars-container .micromag-element-audio-audio-bars-seekButton{position:absolute;-ms-touch-action:none;touch-action:none}
+.micromag-element-audio-audio-bars-container .micromag-element-audio-audio-bars-seekButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;left:0;padding:0;position:relative;top:0;width:100%}.micromag-element-audio-audio-bars-container{height:100%;position:relative;width:100%}.micromag-element-audio-audio-bars-container .micromag-element-audio-audio-bars-seekButton{position:absolute;-ms-touch-action:none;touch-action:none}
 .micromag-element-audio-container .micromag-element-audio-wave{height:150px}
-.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-button,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasBackground,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasProgress{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-audio-audio-wave-container{position:relative;height:100px;-ms-touch-action:pan-y;touch-action:pan-y}
+.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-button,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasBackground,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasProgress{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-element-audio-audio-wave-container{height:100px;position:relative;-ms-touch-action:pan-y;touch-action:pan-y}

package/es/index.js

@@ -35,32 +35,27 @@ var defaultProps$2 = {
   // onReady: null,
   className: null
 };
-
 function AudioBars(_ref) {
   var progress = _ref.progress,
-      playing = _ref.playing,
-      duration = _ref.duration,
-      seek = _ref.seek,
-      play = _ref.play,
-      className = _ref.className;
+    playing = _ref.playing,
+    duration = _ref.duration,
+    seek = _ref.seek,
+    play = _ref.play,
+    className = _ref.className;
   var intl = useIntl();
-
   var _useDimensionObserver = useDimensionObserver(),
-      elRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
-      elHeight = _useDimensionObserver.height;
-
+    elRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+    elHeight = _useDimensionObserver.height;
   var barWidth = 1;
   var barGap = 1;
   var barSize = barWidth + barGap;
   var current = progress * elWidth;
-
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentSeek = _useState2[0],
-      setCurrentSeek = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    currentSeek = _useState2[0],
+    setCurrentSeek = _useState2[1];
   var items = useMemo(function () {
     var count = Math.floor(elWidth / barSize);
     return _toConsumableArray(Array(count).keys()).map(function () {
@@ -69,30 +64,24 @@ function AudioBars(_ref) {
   }, [elWidth, barSize]);
   var seekFromX = useCallback(function () {
     var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
     if (x === null) {
       return;
     }
-
     var _elRef$current$getBou = elRef.current.getBoundingClientRect(),
-        elX = _elRef$current$getBou.left,
-        width = _elRef$current$getBou.width;
-
+      elX = _elRef$current$getBou.left,
+      width = _elRef$current$getBou.width;
     var distance = Math.max(0, Math.min(1, (x - elX) / width));
-
     if (seek !== null && duration !== null) {
       seek(parseFloat(distance * duration, 10));
     }
-
     if (!playing && play != null) {
       play();
     }
   }, [elRef.current, elWidth, duration, playing, seek, play]);
   var seekTemporary = useCallback(function (x) {
     var _elRef$current$getBou2 = elRef.current.getBoundingClientRect(),
-        elX = _elRef$current$getBou2.left,
-        width = _elRef$current$getBou2.width;
-
+      elX = _elRef$current$getBou2.left,
+      width = _elRef$current$getBou2.width;
     var distance = Math.max(0, Math.min(1, (x - elX) / width));
     setCurrentSeek(distance * elWidth);
   }, [elRef.current, elWidth, setCurrentSeek]);
@@ -105,32 +94,27 @@ function AudioBars(_ref) {
   var bind = useGesture({
     onDrag: function onDrag(_ref2) {
       var _ref2$xy = _slicedToArray(_ref2.xy, 1),
-          x = _ref2$xy[0],
-          elapsedTime = _ref2.elapsedTime,
-          active = _ref2.active;
-
+        x = _ref2$xy[0],
+        elapsedTime = _ref2.elapsedTime,
+        active = _ref2.active;
       if (!active && elapsedTime > 300) {
         return;
       }
-
       seekTemporary(x);
     },
     onDragStart: function onDragStart(_ref3) {
       var _ref3$xy = _slicedToArray(_ref3.xy, 1),
-          x = _ref3$xy[0],
-          elapsedTime = _ref3.elapsedTime,
-          active = _ref3.active;
-
+        x = _ref3$xy[0],
+        elapsedTime = _ref3.elapsedTime,
+        active = _ref3.active;
       if (!active && elapsedTime > 300) {
         return;
       }
-
       seekTemporary(x);
     },
     onDragEnd: function onDragEnd(_ref4) {
       var _ref4$xy = _slicedToArray(_ref4.xy, 1),
-          x = _ref4$xy[0];
-
+        x = _ref4$xy[0];
       seekFromX(x);
       setTimeout(function () {
         setCurrentSeek(null);
@@ -189,7 +173,6 @@ function AudioBars(_ref) {
     })
   })));
 }
-
 AudioBars.propTypes = propTypes$2;
 AudioBars.defaultProps = defaultProps$2;
 
@@ -249,35 +232,31 @@ var defaultProps$1 = {
   onDurationChange: null,
   onVolumeChange: null
 };
-
 var Audio = function Audio(_ref) {
   var media = _ref.media,
-      mediaRef = _ref.mediaRef,
-      muted = _ref.muted,
-      autoPlay = _ref.autoPlay,
-      paused = _ref.paused,
-      loop = _ref.loop,
-      preload = _ref.preload,
-      shouldLoad = _ref.shouldLoad,
-      waveFake = _ref.waveFake,
-      withWave = _ref.withWave,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      onPlay = _ref.onPlay,
-      onPause = _ref.onPause,
-      onEnded = _ref.onEnded,
-      onSeeked = _ref.onSeeked,
-      onTimeUpdate = _ref.onTimeUpdate,
-      onProgressStep = _ref.onProgressStep,
-      customOnDurationChange = _ref.onDurationChange,
-      customOnVolumeChange = _ref.onVolumeChange;
-
+    mediaRef = _ref.mediaRef,
+    muted = _ref.muted,
+    autoPlay = _ref.autoPlay,
+    paused = _ref.paused,
+    loop = _ref.loop,
+    preload = _ref.preload,
+    shouldLoad = _ref.shouldLoad,
+    waveFake = _ref.waveFake,
+    withWave = _ref.withWave,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    onPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onSeeked = _ref.onSeeked,
+    onTimeUpdate = _ref.onTimeUpdate,
+    onProgressStep = _ref.onProgressStep,
+    customOnDurationChange = _ref.onDurationChange,
+    customOnVolumeChange = _ref.onVolumeChange;
   var _ref2 = media || {},
-      _ref2$url = _ref2.url,
-      url = _ref2$url === void 0 ? null : _ref2$url;
-
+    _ref2$url = _ref2.url,
+    url = _ref2$url === void 0 ? null : _ref2$url;
   var _ref4 = useRef(null);
-
   var currentTime = useMediaCurrentTime(_ref4.current, {
     id: url,
     disabled: paused || !withWave && onProgressStep === null
@@ -287,7 +266,9 @@ var Audio = function Audio(_ref) {
   });
   var duration = useMediaDuration(_ref4.current, {
     id: url
-  }); // const audioLevels = useMediaWaveform(media, {
+  });
+
+  // const audioLevels = useMediaWaveform(media, {
   //     fake: waveFake,
   //     reduceBufferFactor,
   // });
@@ -304,34 +285,28 @@ var Audio = function Audio(_ref) {
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
     var _ref$current = _ref4.current,
-        element = _ref$current === void 0 ? null : _ref$current;
-
+      element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
     }
-
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
   }, [_ref4.current, customOnVolumeChange]);
   var onWavePlay = useCallback(function () {
     var _ref$current2 = _ref4.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-
+      element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
-
     element.play();
   }, [_ref4.current]);
   var onWaveSeek = useCallback(function (newTime) {
     var _ref$current3 = _ref4.current,
-        element = _ref$current3 === void 0 ? null : _ref$current3;
-
+      element = _ref$current3 === void 0 ? null : _ref$current3;
     if (element === null) {
       return;
     }
-
     if (isNumber(newTime)) {
       element.currentTime = newTime;
     }
@@ -343,14 +318,11 @@ var Audio = function Audio(_ref) {
   }, [waveReady, onReady]);
   useEffect(function () {
     var _ref$current4 = _ref4.current,
-        element = _ref$current4 === void 0 ? null : _ref$current4;
-
+      element = _ref$current4 === void 0 ? null : _ref$current4;
     if (element === null) {
       return;
     }
-
     var isPaused = element.paused;
-
     if (paused && !isPaused) {
       element.pause();
     } else if (!paused && isPaused) {
@@ -370,7 +342,6 @@ var Audio = function Audio(_ref) {
     key: url,
     ref: function ref(newRef) {
       _ref4.current = newRef;
-
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -391,7 +362,8 @@ var Audio = function Audio(_ref) {
     onVolumeChange: onVolumeChange
   }), withWave ? /*#__PURE__*/React.createElement(AudioBars, {
     className: styles$1.wave,
-    progress: progress // {...waveProps}
+    progress: progress
+    // {...waveProps}
     ,
     duration: duration,
     playing: !paused,
@@ -399,7 +371,6 @@ var Audio = function Audio(_ref) {
     play: onWavePlay
   }) : null);
 };
-
 Audio.propTypes = propTypes$1;
 Audio.defaultProps = defaultProps$1;
 var Audio$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -440,58 +411,54 @@ var defaultProps = {
   onResume: null,
   onReady: null
 };
-
 function AudioWave(_ref) {
   var currentTime = _ref.currentTime,
-      duration = _ref.duration,
-      playing = _ref.playing,
-      sampleWidth = _ref.sampleWidth,
-      sampleMargin = _ref.sampleMargin,
-      minSampleHeight = _ref.minSampleHeight,
-      backgroundColor = _ref.backgroundColor,
-      progressColor = _ref.progressColor,
-      audioLevels = _ref.audioLevels,
-      className = _ref.className,
-      onSeek = _ref.onSeek,
-      onResume = _ref.onResume,
-      onReady = _ref.onReady;
+    duration = _ref.duration,
+    playing = _ref.playing,
+    sampleWidth = _ref.sampleWidth,
+    sampleMargin = _ref.sampleMargin,
+    minSampleHeight = _ref.minSampleHeight,
+    backgroundColor = _ref.backgroundColor,
+    progressColor = _ref.progressColor,
+    audioLevels = _ref.audioLevels,
+    className = _ref.className,
+    onSeek = _ref.onSeek,
+    onResume = _ref.onResume,
+    onReady = _ref.onReady;
   var canvasBackgroundRef = useRef(null);
   var canvasProgressRef = useRef(null);
   var mainColor = useMemo(function () {
     var _ref2 = backgroundColor || {},
-        _ref2$color = _ref2.color,
-        color = _ref2$color === void 0 ? 'white' : _ref2$color;
-
+      _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? 'white' : _ref2$color;
     return color;
   }, [backgroundColor]);
   var alternateColor = useMemo(function () {
     return getContrastingColor(backgroundColor, progressColor);
   }, [progressColor, backgroundColor]);
-
   var _useDimensionObserver = useDimensionObserver(),
-      elRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
-      elHeight = _useDimensionObserver.height; // Linear animation for progress bar
+    elRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+    elHeight = _useDimensionObserver.height;
 
+  // Linear animation for progress bar
 
   var _useSpring = useSpring(function () {
-    return {
-      x: 0,
-      config: {
-        duration: 0
-      }
-    };
-  }),
-      _useSpring2 = _slicedToArray(_useSpring, 2),
-      springProps = _useSpring2[0],
-      setSpringProps = _useSpring2[1];
-
+      return {
+        x: 0,
+        config: {
+          duration: 0
+        }
+      };
+    }),
+    _useSpring2 = _slicedToArray(_useSpring, 2),
+    springProps = _useSpring2[0],
+    setSpringProps = _useSpring2[1];
   useEffect(function () {
     if (currentTime === null || duration === null) {
       return;
     }
-
     var progress = currentTime / duration;
     setSpringProps.start({
       reset: true,
@@ -506,32 +473,35 @@ function AudioWave(_ref) {
         duration: (duration - currentTime) * 1000
       }
     });
-  }, [playing, duration, currentTime, setSpringProps]); // draw canvas
+  }, [playing, duration, currentTime, setSpringProps]);
+
+  // draw canvas
 
   useEffect(function () {
     if (audioLevels === null || audioLevels.length === 0 || elRef.current === null) {
       return;
     }
-
     var sampleOuterWidth = sampleWidth + sampleMargin * 2;
-    var samplesCount = Math.floor(elWidth / sampleOuterWidth); // const amplitudes = [];
+    var samplesCount = Math.floor(elWidth / sampleOuterWidth);
+
+    // const amplitudes = [];
+
     // get samples
 
     var levelsBySamples = audioLevels.length / samplesCount;
-
     var amplitudes = _toConsumableArray(Array(samplesCount).keys()).reduce(function (newAmplitudes, index) {
       var levelStartIndex = index * levelsBySamples;
       var levelEndIndex = levelStartIndex + levelsBySamples;
       var newValues = [];
-
       for (var i = Math.floor(levelStartIndex); i < Math.round(levelEndIndex); i += 1) {
         newValues.push(audioLevels[i]);
       }
-
       return levelsBySamples >= 1 ? [].concat(_toConsumableArray(newAmplitudes), [newValues.reduce(function (total, value) {
         return total + value;
       }, 0) / newValues.length]) : [].concat(_toConsumableArray(newAmplitudes), newValues);
-    }, []); // for (let sampleI = 0; sampleI < samplesCount; sampleI += levelsBySamples) {
+    }, []);
+
+    // for (let sampleI = 0; sampleI < samplesCount; sampleI += levelsBySamples) {
     //     // if (levelsBySamples >= 1) {
     //     //     const sampleSize = Math.floor(levelsBySamples);
     //     //     const sampleStart = sampleSize * sampleI;
@@ -549,15 +519,14 @@ function AudioWave(_ref) {
     //         // }
     //     // }
     // }
-
-
     var minAmplitude = Math.min.apply(Math, _toConsumableArray(amplitudes));
     var maxAmplitude = Math.max.apply(Math, _toConsumableArray(amplitudes));
     var delta = maxAmplitude - minAmplitude;
     var normalizedAmplitudes = amplitudes.map(function (n) {
       return (n - minAmplitude) / delta;
-    }); // draw samples
+    });
 
+    // draw samples
     var canvasBg = canvasBackgroundRef.current;
     var canvasProgress = canvasProgressRef.current;
     var scale = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
@@ -579,23 +548,20 @@ function AudioWave(_ref) {
       ctxBG.fillRect(Math.round(sampleX), Math.round(sampleY), sampleWidth, Math.round(sampleHeight));
       ctxProgress.fillRect(Math.round(sampleX), Math.round(sampleY), sampleWidth, Math.round(sampleHeight));
     });
-
     if (onReady !== null) {
       onReady();
     }
-  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
+  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]);
 
+  // User events
   var seekFromX = useCallback(function (x) {
     var _elRef$current$getBou = elRef.current.getBoundingClientRect(),
-        elX = _elRef$current$getBou.left,
-        width = _elRef$current$getBou.width;
-
+      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);
     }
-
     if (!playing) {
       onResume();
     }
@@ -603,14 +569,12 @@ function AudioWave(_ref) {
   var bind = useGesture({
     onDrag: function onDrag(_ref3) {
       var _ref3$xy = _slicedToArray(_ref3.xy, 1),
-          x = _ref3$xy[0],
-          elapsedTime = _ref3.elapsedTime,
-          active = _ref3.active;
-
+        x = _ref3$xy[0],
+        elapsedTime = _ref3.elapsedTime,
+        active = _ref3.active;
       if (!active && elapsedTime > 300) {
         return;
       }
-
       seekFromX(x);
     }
   }, {
@@ -635,7 +599,6 @@ function AudioWave(_ref) {
     }
   }));
 }
-
 AudioWave.propTypes = propTypes;
 AudioWave.defaultProps = defaultProps;
 

package/lib/index.js

@@ -50,32 +50,27 @@ var defaultProps$2 = {
   // onReady: null,
   className: null
 };
-
 function AudioBars(_ref) {
   var progress = _ref.progress,
-      playing = _ref.playing,
-      duration = _ref.duration,
-      seek = _ref.seek,
-      play = _ref.play,
-      className = _ref.className;
+    playing = _ref.playing,
+    duration = _ref.duration,
+    seek = _ref.seek,
+    play = _ref.play,
+    className = _ref.className;
   var intl = reactIntl.useIntl();
-
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      elRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
-      elHeight = _useDimensionObserver.height;
-
+    elRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+    elHeight = _useDimensionObserver.height;
   var barWidth = 1;
   var barGap = 1;
   var barSize = barWidth + barGap;
   var current = progress * elWidth;
-
   var _useState = React.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      currentSeek = _useState2[0],
-      setCurrentSeek = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    currentSeek = _useState2[0],
+    setCurrentSeek = _useState2[1];
   var items = React.useMemo(function () {
     var count = Math.floor(elWidth / barSize);
     return _toConsumableArray__default["default"](Array(count).keys()).map(function () {
@@ -84,30 +79,24 @@ function AudioBars(_ref) {
   }, [elWidth, barSize]);
   var seekFromX = React.useCallback(function () {
     var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
     if (x === null) {
       return;
     }
-
     var _elRef$current$getBou = elRef.current.getBoundingClientRect(),
-        elX = _elRef$current$getBou.left,
-        width = _elRef$current$getBou.width;
-
+      elX = _elRef$current$getBou.left,
+      width = _elRef$current$getBou.width;
     var distance = Math.max(0, Math.min(1, (x - elX) / width));
-
     if (seek !== null && duration !== null) {
       seek(parseFloat(distance * duration, 10));
     }
-
     if (!playing && play != null) {
       play();
     }
   }, [elRef.current, elWidth, duration, playing, seek, play]);
   var seekTemporary = React.useCallback(function (x) {
     var _elRef$current$getBou2 = elRef.current.getBoundingClientRect(),
-        elX = _elRef$current$getBou2.left,
-        width = _elRef$current$getBou2.width;
-
+      elX = _elRef$current$getBou2.left,
+      width = _elRef$current$getBou2.width;
     var distance = Math.max(0, Math.min(1, (x - elX) / width));
     setCurrentSeek(distance * elWidth);
   }, [elRef.current, elWidth, setCurrentSeek]);
@@ -120,32 +109,27 @@ function AudioBars(_ref) {
   var bind = react.useGesture({
     onDrag: function onDrag(_ref2) {
       var _ref2$xy = _slicedToArray__default["default"](_ref2.xy, 1),
-          x = _ref2$xy[0],
-          elapsedTime = _ref2.elapsedTime,
-          active = _ref2.active;
-
+        x = _ref2$xy[0],
+        elapsedTime = _ref2.elapsedTime,
+        active = _ref2.active;
       if (!active && elapsedTime > 300) {
         return;
       }
-
       seekTemporary(x);
     },
     onDragStart: function onDragStart(_ref3) {
       var _ref3$xy = _slicedToArray__default["default"](_ref3.xy, 1),
-          x = _ref3$xy[0],
-          elapsedTime = _ref3.elapsedTime,
-          active = _ref3.active;
-
+        x = _ref3$xy[0],
+        elapsedTime = _ref3.elapsedTime,
+        active = _ref3.active;
       if (!active && elapsedTime > 300) {
         return;
       }
-
       seekTemporary(x);
     },
     onDragEnd: function onDragEnd(_ref4) {
       var _ref4$xy = _slicedToArray__default["default"](_ref4.xy, 1),
-          x = _ref4$xy[0];
-
+        x = _ref4$xy[0];
       seekFromX(x);
       setTimeout(function () {
         setCurrentSeek(null);
@@ -204,7 +188,6 @@ function AudioBars(_ref) {
     })
   })));
 }
-
 AudioBars.propTypes = propTypes$2;
 AudioBars.defaultProps = defaultProps$2;
 
@@ -264,35 +247,31 @@ var defaultProps$1 = {
   onDurationChange: null,
   onVolumeChange: null
 };
-
 var Audio = function Audio(_ref) {
   var media = _ref.media,
-      mediaRef = _ref.mediaRef,
-      muted = _ref.muted,
-      autoPlay = _ref.autoPlay,
-      paused = _ref.paused,
-      loop = _ref.loop,
-      preload = _ref.preload,
-      shouldLoad = _ref.shouldLoad,
-      waveFake = _ref.waveFake,
-      withWave = _ref.withWave,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      onPlay = _ref.onPlay,
-      onPause = _ref.onPause,
-      onEnded = _ref.onEnded,
-      onSeeked = _ref.onSeeked,
-      onTimeUpdate = _ref.onTimeUpdate,
-      onProgressStep = _ref.onProgressStep,
-      customOnDurationChange = _ref.onDurationChange,
-      customOnVolumeChange = _ref.onVolumeChange;
-
+    mediaRef = _ref.mediaRef,
+    muted = _ref.muted,
+    autoPlay = _ref.autoPlay,
+    paused = _ref.paused,
+    loop = _ref.loop,
+    preload = _ref.preload,
+    shouldLoad = _ref.shouldLoad,
+    waveFake = _ref.waveFake,
+    withWave = _ref.withWave,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    onPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onSeeked = _ref.onSeeked,
+    onTimeUpdate = _ref.onTimeUpdate,
+    onProgressStep = _ref.onProgressStep,
+    customOnDurationChange = _ref.onDurationChange,
+    customOnVolumeChange = _ref.onVolumeChange;
   var _ref2 = media || {},
-      _ref2$url = _ref2.url,
-      url = _ref2$url === void 0 ? null : _ref2$url;
-
+    _ref2$url = _ref2.url,
+    url = _ref2$url === void 0 ? null : _ref2$url;
   var _ref4 = React.useRef(null);
-
   var currentTime = hooks.useMediaCurrentTime(_ref4.current, {
     id: url,
     disabled: paused || !withWave && onProgressStep === null
@@ -302,7 +281,9 @@ var Audio = function Audio(_ref) {
   });
   var duration = hooks.useMediaDuration(_ref4.current, {
     id: url
-  }); // const audioLevels = useMediaWaveform(media, {
+  });
+
+  // const audioLevels = useMediaWaveform(media, {
   //     fake: waveFake,
   //     reduceBufferFactor,
   // });
@@ -319,34 +300,28 @@ var Audio = function Audio(_ref) {
   }, [duration, customOnDurationChange]);
   var onVolumeChange = React.useCallback(function () {
     var _ref$current = _ref4.current,
-        element = _ref$current === void 0 ? null : _ref$current;
-
+      element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
     }
-
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
   }, [_ref4.current, customOnVolumeChange]);
   var onWavePlay = React.useCallback(function () {
     var _ref$current2 = _ref4.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-
+      element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
-
     element.play();
   }, [_ref4.current]);
   var onWaveSeek = React.useCallback(function (newTime) {
     var _ref$current3 = _ref4.current,
-        element = _ref$current3 === void 0 ? null : _ref$current3;
-
+      element = _ref$current3 === void 0 ? null : _ref$current3;
     if (element === null) {
       return;
     }
-
     if (isNumber__default["default"](newTime)) {
       element.currentTime = newTime;
     }
@@ -358,14 +333,11 @@ var Audio = function Audio(_ref) {
   }, [waveReady, onReady]);
   React.useEffect(function () {
     var _ref$current4 = _ref4.current,
-        element = _ref$current4 === void 0 ? null : _ref$current4;
-
+      element = _ref$current4 === void 0 ? null : _ref$current4;
     if (element === null) {
       return;
     }
-
     var isPaused = element.paused;
-
     if (paused && !isPaused) {
       element.pause();
     } else if (!paused && isPaused) {
@@ -385,7 +357,6 @@ var Audio = function Audio(_ref) {
     key: url,
     ref: function ref(newRef) {
       _ref4.current = newRef;
-
       if (mediaRef !== null && isFunction__default["default"](mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -406,7 +377,8 @@ var Audio = function Audio(_ref) {
     onVolumeChange: onVolumeChange
   }), withWave ? /*#__PURE__*/React__default["default"].createElement(AudioBars, {
     className: styles$1.wave,
-    progress: progress // {...waveProps}
+    progress: progress
+    // {...waveProps}
     ,
     duration: duration,
     playing: !paused,
@@ -414,7 +386,6 @@ var Audio = function Audio(_ref) {
     play: onWavePlay
   }) : null);
 };
-
 Audio.propTypes = propTypes$1;
 Audio.defaultProps = defaultProps$1;
 var Audio$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -455,58 +426,54 @@ var defaultProps = {
   onResume: null,
   onReady: null
 };
-
 function AudioWave(_ref) {
   var currentTime = _ref.currentTime,
-      duration = _ref.duration,
-      playing = _ref.playing,
-      sampleWidth = _ref.sampleWidth,
-      sampleMargin = _ref.sampleMargin,
-      minSampleHeight = _ref.minSampleHeight,
-      backgroundColor = _ref.backgroundColor,
-      progressColor = _ref.progressColor,
-      audioLevels = _ref.audioLevels,
-      className = _ref.className,
-      onSeek = _ref.onSeek,
-      onResume = _ref.onResume,
-      onReady = _ref.onReady;
+    duration = _ref.duration,
+    playing = _ref.playing,
+    sampleWidth = _ref.sampleWidth,
+    sampleMargin = _ref.sampleMargin,
+    minSampleHeight = _ref.minSampleHeight,
+    backgroundColor = _ref.backgroundColor,
+    progressColor = _ref.progressColor,
+    audioLevels = _ref.audioLevels,
+    className = _ref.className,
+    onSeek = _ref.onSeek,
+    onResume = _ref.onResume,
+    onReady = _ref.onReady;
   var canvasBackgroundRef = React.useRef(null);
   var canvasProgressRef = React.useRef(null);
   var mainColor = React.useMemo(function () {
     var _ref2 = backgroundColor || {},
-        _ref2$color = _ref2.color,
-        color = _ref2$color === void 0 ? 'white' : _ref2$color;
-
+      _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? 'white' : _ref2$color;
     return color;
   }, [backgroundColor]);
   var alternateColor = React.useMemo(function () {
     return utils.getContrastingColor(backgroundColor, progressColor);
   }, [progressColor, backgroundColor]);
-
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      elRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
-      elHeight = _useDimensionObserver.height; // Linear animation for progress bar
+    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 () {
-    return {
-      x: 0,
-      config: {
-        duration: 0
-      }
-    };
-  }),
-      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
-      springProps = _useSpring2[0],
-      setSpringProps = _useSpring2[1];
-
+      return {
+        x: 0,
+        config: {
+          duration: 0
+        }
+      };
+    }),
+    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+    springProps = _useSpring2[0],
+    setSpringProps = _useSpring2[1];
   React.useEffect(function () {
     if (currentTime === null || duration === null) {
       return;
     }
-
     var progress = currentTime / duration;
     setSpringProps.start({
       reset: true,
@@ -521,32 +488,35 @@ function AudioWave(_ref) {
         duration: (duration - currentTime) * 1000
       }
     });
-  }, [playing, duration, currentTime, setSpringProps]); // draw canvas
+  }, [playing, duration, currentTime, setSpringProps]);
+
+  // draw canvas
 
   React.useEffect(function () {
     if (audioLevels === null || audioLevels.length === 0 || elRef.current === null) {
       return;
     }
-
     var sampleOuterWidth = sampleWidth + sampleMargin * 2;
-    var samplesCount = Math.floor(elWidth / sampleOuterWidth); // const amplitudes = [];
+    var samplesCount = Math.floor(elWidth / sampleOuterWidth);
+
+    // const amplitudes = [];
+
     // get samples
 
     var levelsBySamples = audioLevels.length / samplesCount;
-
     var amplitudes = _toConsumableArray__default["default"](Array(samplesCount).keys()).reduce(function (newAmplitudes, index) {
       var levelStartIndex = index * levelsBySamples;
       var levelEndIndex = levelStartIndex + levelsBySamples;
       var newValues = [];
-
       for (var i = Math.floor(levelStartIndex); i < Math.round(levelEndIndex); i += 1) {
         newValues.push(audioLevels[i]);
       }
-
       return levelsBySamples >= 1 ? [].concat(_toConsumableArray__default["default"](newAmplitudes), [newValues.reduce(function (total, value) {
         return total + value;
       }, 0) / newValues.length]) : [].concat(_toConsumableArray__default["default"](newAmplitudes), newValues);
-    }, []); // for (let sampleI = 0; sampleI < samplesCount; sampleI += levelsBySamples) {
+    }, []);
+
+    // for (let sampleI = 0; sampleI < samplesCount; sampleI += levelsBySamples) {
     //     // if (levelsBySamples >= 1) {
     //     //     const sampleSize = Math.floor(levelsBySamples);
     //     //     const sampleStart = sampleSize * sampleI;
@@ -564,15 +534,14 @@ function AudioWave(_ref) {
     //         // }
     //     // }
     // }
-
-
     var minAmplitude = Math.min.apply(Math, _toConsumableArray__default["default"](amplitudes));
     var maxAmplitude = Math.max.apply(Math, _toConsumableArray__default["default"](amplitudes));
     var delta = maxAmplitude - minAmplitude;
     var normalizedAmplitudes = amplitudes.map(function (n) {
       return (n - minAmplitude) / delta;
-    }); // draw samples
+    });
 
+    // draw samples
     var canvasBg = canvasBackgroundRef.current;
     var canvasProgress = canvasProgressRef.current;
     var scale = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
@@ -594,23 +563,20 @@ function AudioWave(_ref) {
       ctxBG.fillRect(Math.round(sampleX), Math.round(sampleY), sampleWidth, Math.round(sampleHeight));
       ctxProgress.fillRect(Math.round(sampleX), Math.round(sampleY), sampleWidth, Math.round(sampleHeight));
     });
-
     if (onReady !== null) {
       onReady();
     }
-  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
+  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]);
 
+  // User events
   var seekFromX = React.useCallback(function (x) {
     var _elRef$current$getBou = elRef.current.getBoundingClientRect(),
-        elX = _elRef$current$getBou.left,
-        width = _elRef$current$getBou.width;
-
+      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);
     }
-
     if (!playing) {
       onResume();
     }
@@ -618,14 +584,12 @@ function AudioWave(_ref) {
   var bind = react.useGesture({
     onDrag: function onDrag(_ref3) {
       var _ref3$xy = _slicedToArray__default["default"](_ref3.xy, 1),
-          x = _ref3$xy[0],
-          elapsedTime = _ref3.elapsedTime,
-          active = _ref3.active;
-
+        x = _ref3$xy[0],
+        elapsedTime = _ref3.elapsedTime,
+        active = _ref3.active;
       if (!active && elapsedTime > 300) {
         return;
       }
-
       seekFromX(x);
     }
   }, {
@@ -650,7 +614,6 @@ function AudioWave(_ref) {
     }
   }));
 }
-
 AudioWave.propTypes = propTypes;
 AudioWave.defaultProps = defaultProps;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.3.311",
+    "version": "0.3.322",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,21 +52,21 @@
         "@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.311",
-        "@micromag/element-closed-captions": "^0.3.311",
-        "@micromag/element-media-controls": "^0.3.311",
-        "@react-spring/core": "^9.1.1",
-        "@react-spring/web": "^9.1.1",
+        "@micromag/core": "^0.3.322",
+        "@micromag/element-closed-captions": "^0.3.322",
+        "@micromag/element-media-controls": "^0.3.322",
+        "@react-spring/core": "^9.6.1",
+        "@react-spring/web": "^9.6.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",
+        "uuid": "^9.0.0",
         "whatwg-fetch": "^3.6.1"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fab297a7ad204611597c749b969f14d992d35d47"
+    "gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
 }