@micromag/element-audio 0.3.306 → 0.3.310

package/es/index.js

@@ -1,212 +1,115 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
+import isNumber from 'lodash/isNumber';
 import PropTypes from 'prop-types';
-import React, { useRef, useMemo, useEffect, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { useDimensionObserver, useMediaCurrentTime, useMediaReady, useMediaDuration, useMediaWaveform, useMediaLoad, useProgressSteps } from '@micromag/core/hooks';
+import { useDimensionObserver, useMediaCurrentTime, useMediaReady, useMediaDuration, useMediaLoad, useProgressSteps } from '@micromag/core/hooks';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useGesture } from '@use-gesture/react';
+import { useIntl } from 'react-intl';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
-import { useGesture } from '@use-gesture/react';
 import 'whatwg-fetch';
 import { getContrastingColor } from '@micromag/core/utils';
 
-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"};
+var styles$2 = {"container":"micromag-element-audio-audio-bars-container","seekButton":"micromag-element-audio-audio-bars-seekButton"};
 
-var propTypes$1 = {
-  currentTime: PropTypes.number,
+var propTypes$2 = {
+  progress: PropTypes.number,
   duration: PropTypes.number,
   playing: PropTypes.bool,
-  sampleWidth: PropTypes.number,
-  sampleMargin: PropTypes.number,
-  minSampleHeight: PropTypes.number,
-  backgroundColor: PropTypes$1.color,
-  progressColor: PropTypes$1.color,
-  audioLevels: PropTypes.arrayOf(PropTypes.number),
-  className: PropTypes.string,
-  onSeek: PropTypes.func,
-  onResume: PropTypes.func,
-  onReady: PropTypes.func
+  seek: PropTypes.func,
+  play: PropTypes.func,
+  // onReady: PropTypes.func,
+  className: PropTypes.string
 };
-var defaultProps$1 = {
-  currentTime: null,
-  duration: null,
+var defaultProps$2 = {
+  progress: 0,
+  duration: 0,
   playing: false,
-  sampleWidth: 3,
-  sampleMargin: 1,
-  minSampleHeight: 2,
-  backgroundColor: 'white',
-  progressColor: null,
-  audioLevels: null,
-  className: null,
-  onSeek: null,
-  onResume: null,
-  onReady: null
+  seek: null,
+  play: null,
+  // onReady: null,
+  className: null
 };
 
-function AudioWave(_ref) {
-  var currentTime = _ref.currentTime,
-      duration = _ref.duration,
+function AudioBars(_ref) {
+  var progress = _ref.progress,
       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;
-
-    return color;
-  }, [backgroundColor]);
-  var alternateColor = useMemo(function () {
-    return getContrastingColor(backgroundColor, progressColor);
-  }, [progressColor, backgroundColor]);
+      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; // 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];
-
-  useEffect(function () {
-    if (currentTime === null || duration === null) {
-      return;
-    }
-
-    var progress = currentTime / duration;
-    setSpringProps.start({
-      reset: true,
-      immediate: !playing,
-      from: {
-        x: progress
-      },
-      to: {
-        x: playing ? 1 : progress
-      },
-      config: {
-        duration: (duration - currentTime) * 1000
-      }
+      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];
+
+  var items = useMemo(function () {
+    var count = Math.floor(elWidth / barSize);
+    return _toConsumableArray(Array(count).keys()).map(function () {
+      return Math.floor(Math.random() * 100);
     });
-  }, [playing, duration, currentTime, setSpringProps]); // draw canvas
+  }, [elWidth, barSize]);
+  var seekFromX = useCallback(function () {
+    var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
-  useEffect(function () {
-    if (audioLevels === null || audioLevels.length === 0 || elRef.current === null) {
+    if (x === null) {
       return;
     }
 
-    var sampleOuterWidth = sampleWidth + sampleMargin * 2;
-    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) {
-    //     // if (levelsBySamples >= 1) {
-    //     //     const sampleSize = Math.floor(levelsBySamples);
-    //     //     const sampleStart = sampleSize * sampleI;
-    //     //     let sum = 0;
-    //     //     for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
-    //     //         sum += Math.abs(audioLevels[sampleStart + sampleSizeI]);
-    //     //     }
-    //     //     amplitudes.push(sum / sampleSize);
-    //     // } else {
-    //         console.log(sampleI);
-    //         amplitudes.push(Math.abs(audioLevels[Math.floor(sampleI)]));
-    //         // for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
-    //         //     console.log(sampleI, sampleSize);
-    //         //     amplitudes.push(Math.abs(audioLevels[sampleI % sampleSize]));
-    //         // }
-    //     // }
-    // }
-
-
-    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
-
-    var canvasBg = canvasBackgroundRef.current;
-    var canvasProgress = canvasProgressRef.current;
-    var scale = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
-    canvasBg.width = canvasProgress.width = Math.floor(elWidth * scale);
-    canvasBg.height = canvasProgress.height = Math.floor(elHeight * scale);
-    var ctxBG = canvasBg.getContext('2d');
-    var ctxProgress = canvasProgress.getContext('2d');
-    ctxBG.scale(scale, scale);
-    ctxProgress.scale(scale, scale);
-    ctxBG.clearRect(0, 0, elWidth, elHeight);
-    ctxProgress.clearRect(0, 0, elWidth, elHeight);
-    ctxBG.fillStyle = mainColor;
-    ctxProgress.fillStyle = alternateColor;
-    var offsetLeft = (elWidth - samplesCount * sampleOuterWidth) / 2;
-    normalizedAmplitudes.forEach(function (amplitude, amplitudeI) {
-      var sampleHeight = Math.max(minSampleHeight, amplitude * elHeight);
-      var sampleX = sampleOuterWidth * amplitudeI + offsetLeft + sampleMargin;
-      var sampleY = elHeight / 2 - sampleHeight / 2;
-      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
-
-  var seekFromX = useCallback(function (x) {
     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));
+    var distance = Math.max(0, Math.min(1, (x - elX) / width));
 
-    if (onSeek !== null && duration !== null) {
-      onSeek(progress * duration);
+    if (seek !== null && duration !== null) {
+      seek(parseFloat(distance * duration, 10));
     }
 
-    if (!playing) {
-      onResume();
+    if (!playing && play != null) {
+      play();
     }
-  }, [duration, playing, onSeek, onResume]);
+  }, [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;
+
+    var distance = Math.max(0, Math.min(1, (x - elX) / width));
+    setCurrentSeek(distance * elWidth);
+  }, [elRef.current, elWidth, setCurrentSeek]);
   var bind = useGesture({
-    onDrag: function onDrag(_ref3) {
+    onDrag: function onDrag(_ref2) {
+      var _ref2$xy = _slicedToArray(_ref2.xy, 1),
+          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,
@@ -216,7 +119,16 @@ function AudioWave(_ref) {
         return;
       }
 
+      seekTemporary(x);
+    },
+    onDragEnd: function onDragEnd(_ref4) {
+      var _ref4$xy = _slicedToArray(_ref4.xy, 1),
+          x = _ref4$xy[0];
+
       seekFromX(x);
+      setTimeout(function () {
+        setCurrentSeek(null);
+      }, 1000);
     }
   }, {
     drag: {
@@ -224,29 +136,62 @@ function AudioWave(_ref) {
       filterTaps: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
     ref: elRef
-  }, bind()), /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasBackgroundRef,
-    className: styles$1.canvasBackground
-  }), /*#__PURE__*/React.createElement(animated.canvas, {
-    ref: canvasProgressRef,
-    className: styles$1.canvasProgress,
-    style: {
-      clipPath: springProps.x.to(function (x) {
-        return "polygon(0 0, ".concat(x * 100, "% 0, ").concat(x * 100, "% 100%, 0 100%)");
-      })
-    }
-  }));
+  }, /*#__PURE__*/React.createElement("svg", {
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    x: "0",
+    y: "0",
+    width: "".concat(elWidth, "px"),
+    height: "".concat(elHeight, "px"),
+    viewBox: "0 0 ".concat(elWidth, " ").concat(elHeight),
+    className: className,
+    xmlSpace: "preserve"
+  }, items.map(function (size, i) {
+    return /*#__PURE__*/React.createElement("rect", {
+      key: "bar-".concat(i + 1),
+      width: barWidth,
+      height: size,
+      x: i * barSize,
+      y: elHeight / 2 - size / 2,
+      fill: (currentSeek || current) > i * barSize ? 'white' : 'gray',
+      stroke: "black",
+      strokeWidth: "0px",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    });
+  })), /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
+    onClick: function onClick(e) {
+      return e.target !== null ? seekFromX(e.target.clientX) : null;
+    },
+    type: "button",
+    className: styles$2.seekButton,
+    title: intl.formatMessage({
+      id: "G1Gyjn",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Seek"
+      }]
+    }),
+    "aria-label": intl.formatMessage({
+      id: "G1Gyjn",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Seek"
+      }]
+    })
+  })));
 }
 
-AudioWave.propTypes = propTypes$1;
-AudioWave.defaultProps = defaultProps$1;
+AudioBars.propTypes = propTypes$2;
+AudioBars.defaultProps = defaultProps$2;
 
-var styles = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave"};
+var styles$1 = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave"};
 
-var propTypes = {
+var propTypes$1 = {
   media: PropTypes$1.audioMedia,
   mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
@@ -258,13 +203,13 @@ var propTypes = {
   preload: PropTypes.oneOf(['auto', 'none', 'metadata']),
   shouldLoad: PropTypes.bool,
   waveFake: PropTypes.bool,
-  waveProps: PropTypes.shape({
-    sampleWidth: PropTypes.number,
-    sampleMargin: PropTypes.number,
-    minSampleHeight: PropTypes.number
-  }),
+  // waveProps: PropTypes.shape({
+  //     sampleWidth: PropTypes.number,
+  //     sampleMargin: PropTypes.number,
+  //     minSampleHeight: PropTypes.number,
+  // }),
   withWave: PropTypes.bool,
-  reduceBufferFactor: PropTypes.number,
+  // reduceBufferFactor: PropTypes.number,
   className: PropTypes.string,
   onReady: PropTypes.func,
   onPlay: PropTypes.func,
@@ -276,7 +221,7 @@ var propTypes = {
   onDurationChange: PropTypes.func,
   onVolumeChange: PropTypes.func
 };
-var defaultProps = {
+var defaultProps$1 = {
   media: null,
   mediaRef: null,
   muted: false,
@@ -286,9 +231,9 @@ var defaultProps = {
   preload: 'auto',
   shouldLoad: true,
   waveFake: false,
-  waveProps: null,
+  // waveProps: null,
   withWave: false,
-  reduceBufferFactor: 100,
+  // reduceBufferFactor: 100,
   className: null,
   onReady: null,
   onPlay: null,
@@ -311,9 +256,7 @@ var Audio = function Audio(_ref) {
       preload = _ref.preload,
       shouldLoad = _ref.shouldLoad,
       waveFake = _ref.waveFake,
-      waveProps = _ref.waveProps,
       withWave = _ref.withWave,
-      reduceBufferFactor = _ref.reduceBufferFactor,
       className = _ref.className,
       onReady = _ref.onReady,
       onPlay = _ref.onPlay,
@@ -340,11 +283,11 @@ var Audio = function Audio(_ref) {
   });
   var duration = useMediaDuration(_ref4.current, {
     id: url
-  });
-  var audioLevels = useMediaWaveform(media, {
-    fake: waveFake,
-    reduceBufferFactor: reduceBufferFactor
-  });
+  }); // const audioLevels = useMediaWaveform(media, {
+  //     fake: waveFake,
+  //     reduceBufferFactor,
+  // });
+
   useMediaLoad(_ref4.current, {
     preload: preload,
     shouldLoad: shouldLoad
@@ -366,7 +309,7 @@ var Audio = function Audio(_ref) {
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]);
+  }, [_ref4.current, customOnVolumeChange]);
   var onWavePlay = useCallback(function () {
     var _ref$current2 = _ref4.current,
         element = _ref$current2 === void 0 ? null : _ref$current2;
@@ -376,7 +319,7 @@ var Audio = function Audio(_ref) {
     }
 
     element.play();
-  }, []);
+  }, [_ref4.current]);
   var onWaveSeek = useCallback(function (newTime) {
     var _ref$current3 = _ref4.current,
         element = _ref$current3 === void 0 ? null : _ref$current3;
@@ -385,8 +328,12 @@ var Audio = function Audio(_ref) {
       return;
     }
 
-    element.currentTime = newTime;
-  }, []);
+    console.log('fuck off', newTime);
+
+    if (isNumber(newTime)) {
+      element.currentTime = newTime;
+    }
+  }, [_ref4.current]);
   useEffect(function () {
     if (waveReady && onReady !== null) {
       onReady();
@@ -414,8 +361,9 @@ var Audio = function Audio(_ref) {
     disabled: paused,
     onStep: onProgressStep
   });
+  var progress = currentTime !== null && duration > 0 ? currentTime / duration : 0;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("audio", {
     key: url,
     ref: function ref(newRef) {
@@ -439,25 +387,254 @@ var Audio = function Audio(_ref) {
     onSeeked: onSeeked,
     onTimeUpdate: onTimeUpdate,
     onVolumeChange: onVolumeChange
-  }), withWave ? /*#__PURE__*/React.createElement(AudioWave, Object.assign({
-    className: styles.wave,
-    media: media,
-    currentTime: currentTime
-  }, waveProps, {
+  }), withWave ? /*#__PURE__*/React.createElement(AudioBars, {
+    className: styles$1.wave,
+    progress: progress // {...waveProps}
+    ,
     duration: duration,
     playing: !paused,
-    onSeek: onWaveSeek,
-    onResume: onWavePlay,
-    audioLevels: audioLevels
-  })) : null);
+    seek: onWaveSeek,
+    play: onWavePlay
+  }) : null);
 };
 
-Audio.propTypes = propTypes;
-Audio.defaultProps = defaultProps;
+Audio.propTypes = propTypes$1;
+Audio.defaultProps = defaultProps$1;
 var Audio$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Audio, Object.assign({
     mediaRef: ref
   }, props));
 });
 
+var styles = {"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"};
+
+var propTypes = {
+  currentTime: PropTypes.number,
+  duration: PropTypes.number,
+  playing: PropTypes.bool,
+  sampleWidth: PropTypes.number,
+  sampleMargin: PropTypes.number,
+  minSampleHeight: PropTypes.number,
+  backgroundColor: PropTypes$1.color,
+  progressColor: PropTypes$1.color,
+  audioLevels: PropTypes.arrayOf(PropTypes.number),
+  className: PropTypes.string,
+  onSeek: PropTypes.func,
+  onResume: PropTypes.func,
+  onReady: PropTypes.func
+};
+var defaultProps = {
+  currentTime: null,
+  duration: null,
+  playing: false,
+  sampleWidth: 3,
+  sampleMargin: 1,
+  minSampleHeight: 2,
+  backgroundColor: 'white',
+  progressColor: null,
+  audioLevels: null,
+  className: null,
+  onSeek: null,
+  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;
+  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;
+
+    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
+
+
+  var _useSpring = useSpring(function () {
+    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,
+      immediate: !playing,
+      from: {
+        x: progress
+      },
+      to: {
+        x: playing ? 1 : progress
+      },
+      config: {
+        duration: (duration - currentTime) * 1000
+      }
+    });
+  }, [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 = [];
+    // 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) {
+    //     // if (levelsBySamples >= 1) {
+    //     //     const sampleSize = Math.floor(levelsBySamples);
+    //     //     const sampleStart = sampleSize * sampleI;
+    //     //     let sum = 0;
+    //     //     for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
+    //     //         sum += Math.abs(audioLevels[sampleStart + sampleSizeI]);
+    //     //     }
+    //     //     amplitudes.push(sum / sampleSize);
+    //     // } else {
+    //         console.log(sampleI);
+    //         amplitudes.push(Math.abs(audioLevels[Math.floor(sampleI)]));
+    //         // for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
+    //         //     console.log(sampleI, sampleSize);
+    //         //     amplitudes.push(Math.abs(audioLevels[sampleI % sampleSize]));
+    //         // }
+    //     // }
+    // }
+
+
+    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
+
+    var canvasBg = canvasBackgroundRef.current;
+    var canvasProgress = canvasProgressRef.current;
+    var scale = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+    canvasBg.width = canvasProgress.width = Math.floor(elWidth * scale);
+    canvasBg.height = canvasProgress.height = Math.floor(elHeight * scale);
+    var ctxBG = canvasBg.getContext('2d');
+    var ctxProgress = canvasProgress.getContext('2d');
+    ctxBG.scale(scale, scale);
+    ctxProgress.scale(scale, scale);
+    ctxBG.clearRect(0, 0, elWidth, elHeight);
+    ctxProgress.clearRect(0, 0, elWidth, elHeight);
+    ctxBG.fillStyle = mainColor;
+    ctxProgress.fillStyle = alternateColor;
+    var offsetLeft = (elWidth - samplesCount * sampleOuterWidth) / 2;
+    normalizedAmplitudes.forEach(function (amplitude, amplitudeI) {
+      var sampleHeight = Math.max(minSampleHeight, amplitude * elHeight);
+      var sampleX = sampleOuterWidth * amplitudeI + offsetLeft + sampleMargin;
+      var sampleY = elHeight / 2 - sampleHeight / 2;
+      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
+
+  var seekFromX = useCallback(function (x) {
+    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);
+    }
+
+    if (!playing) {
+      onResume();
+    }
+  }, [duration, playing, onSeek, onResume]);
+  var bind = useGesture({
+    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;
+      }
+
+      seekFromX(x);
+    }
+  }, {
+    drag: {
+      axis: 'x',
+      filterTaps: true
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
+    ref: elRef
+  }, bind()), /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasBackgroundRef,
+    className: styles.canvasBackground
+  }), /*#__PURE__*/React.createElement(animated.canvas, {
+    ref: canvasProgressRef,
+    className: styles.canvasProgress,
+    style: {
+      clipPath: springProps.x.to(function (x) {
+        return "polygon(0 0, ".concat(x * 100, "% 0, ").concat(x * 100, "% 100%, 0 100%)");
+      })
+    }
+  }));
+}
+
+AudioWave.propTypes = propTypes;
+AudioWave.defaultProps = defaultProps;
+
 export { AudioWave, Audio$1 as default };