@micromag/element-audio 0.3.541 → 0.3.566

package/es/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import isNumber from 'lodash/isNumber';
@@ -7,7 +8,6 @@ import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react'
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 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';
@@ -263,18 +263,36 @@ var Audio = function Audio(_ref) {
     onPlayError = _ref.onPlayError;
   var _ref2 = media || {},
     _ref2$url = _ref2.url,
-    url = _ref2$url === void 0 ? null : _ref2$url;
-  var _ref4 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref4.current, {
-    id: url,
+    url = _ref2$url === void 0 ? null : _ref2$url,
+    _ref2$files = _ref2.files,
+    files = _ref2$files === void 0 ? null : _ref2$files;
+  var srcUrl = useMemo(function () {
+    if (files) {
+      var filesAsEntries = Object.entries(files);
+      var _filesAsEntries$find = filesAsEntries.find(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 1),
+            key = _ref4[0];
+          return key === 'mp3';
+        }),
+        _filesAsEntries$find2 = _slicedToArray(_filesAsEntries$find, 2),
+        mp3File = _filesAsEntries$find2[1];
+      if (mp3File) {
+        return mp3File.url;
+      }
+    }
+    return url;
+  }, [files, url]);
+  var _ref6 = useRef(null);
+  var currentTime = useMediaCurrentTime(_ref6.current, {
+    id: srcUrl,
     disabled: paused || !withWave && onProgressStep === null,
     updateInterval: updateInterval
   });
-  var ready = useMediaReady(_ref4.current, {
-    id: url
+  var ready = useMediaReady(_ref6.current, {
+    id: srcUrl
   });
-  var duration = useMediaDuration(_ref4.current, {
-    id: url
+  var duration = useMediaDuration(_ref6.current, {
+    id: srcUrl
   });
 
   // const audioLevels = useMediaWaveform(media, {
@@ -282,7 +300,7 @@ var Audio = function Audio(_ref) {
   //     reduceBufferFactor,
   // });
 
-  useMediaLoad(_ref4.current, {
+  useMediaLoad(_ref6.current, {
     preload: preload,
     shouldLoad: shouldLoad
   });
@@ -293,7 +311,7 @@ var Audio = function Audio(_ref) {
     }
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref4.current,
+    var _ref$current = _ref6.current,
       element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
@@ -301,17 +319,17 @@ var Audio = function Audio(_ref) {
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [_ref4.current, customOnVolumeChange]);
+  }, [_ref6.current, customOnVolumeChange]);
   var onWavePlay = useCallback(function () {
-    var _ref$current2 = _ref4.current,
+    var _ref$current2 = _ref6.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
     element.play();
-  }, [_ref4.current]);
+  }, [_ref6.current]);
   var onWaveSeek = useCallback(function (newTime) {
-    var _ref$current3 = _ref4.current,
+    var _ref$current3 = _ref6.current,
       element = _ref$current3 === void 0 ? null : _ref$current3;
     if (element === null) {
       return;
@@ -319,14 +337,14 @@ var Audio = function Audio(_ref) {
     if (isNumber(newTime)) {
       element.currentTime = newTime;
     }
-  }, [_ref4.current]);
+  }, [_ref6.current]);
   useEffect(function () {
     if (waveReady && onReady !== null) {
       onReady();
     }
   }, [waveReady, onReady]);
   useEffect(function () {
-    var _ref$current4 = _ref4.current,
+    var _ref$current4 = _ref6.current,
       element = _ref$current4 === void 0 ? null : _ref$current4;
     if (element === null) {
       return;
@@ -352,16 +370,16 @@ var Audio = function Audio(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("audio", {
-    key: url,
+    key: srcUrl,
     ref: function ref(newRef) {
-      _ref4.current = newRef;
+      _ref6.current = newRef;
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
         mediaRef.current = newRef;
       }
     },
-    src: url,
+    src: srcUrl,
     autoPlay: autoPlay,
     muted: muted,
     loop: loop,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.3.541",
+    "version": "0.3.566",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,11 +30,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -60,8 +59,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-closed-captions": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-closed-captions": "^0.3.547",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -75,5 +74,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "7ee1998bfc00f5a841711346ac8ca21dba439df7"
 }

package/lib/index.js

@@ -1,623 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var classNames = require('classnames');
-var isFunction = require('lodash/isFunction');
-var isNumber = require('lodash/isNumber');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var hooks = require('@micromag/core/hooks');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var react = require('@use-gesture/react');
-var reactIntl = require('react-intl');
-var core$1 = require('@react-spring/core');
-var web = require('@react-spring/web');
-var utils = require('@micromag/core/utils');
-
-var styles$2 = {"container":"micromag-element-audio-audio-bars-container","seekButton":"micromag-element-audio-audio-bars-seekButton"};
-
-var propTypes$2 = {
-  progress: PropTypes.number,
-  duration: PropTypes.number,
-  playing: PropTypes.bool,
-  seek: PropTypes.func,
-  play: PropTypes.func,
-  // onReady: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$2 = {
-  progress: 0,
-  duration: 0,
-  playing: false,
-  seek: null,
-  play: null,
-  // 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;
-  var intl = reactIntl.useIntl();
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    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(_useState, 2),
-    currentSeek = _useState2[0],
-    setCurrentSeek = _useState2[1];
-  var items = React.useMemo(function () {
-    var count = Math.floor(elWidth / barSize);
-    return _toConsumableArray(Array(count).keys()).map(function () {
-      return Math.floor(Math.random() * 100);
-    });
-  }, [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;
-    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;
-    var distance = Math.max(0, Math.min(1, (x - elX) / width));
-    setCurrentSeek(distance * elWidth);
-  }, [elRef.current, elWidth, setCurrentSeek]);
-  var onClick = React.useCallback(function (e) {
-    if (e) {
-      seekFromX(e.clientX || null);
-      setCurrentSeek(null);
-    }
-  }, [seekFromX, setCurrentSeek]);
-  var bind = react.useGesture({
-    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,
-        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];
-      seekFromX(x);
-      setTimeout(function () {
-        setCurrentSeek(null);
-      }, 1000);
-    }
-  }, {
-    drag: {
-      axis: 'x',
-      filterTaps: true
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
-    ref: elRef
-  }, /*#__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: onClick,
-    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"
-      }]
-    })
-  })));
-}
-AudioBars.propTypes = propTypes$2;
-AudioBars.defaultProps = defaultProps$2;
-
-var styles$1 = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave","withAutoHeight":"micromag-element-audio-withAutoHeight"};
-
-var propTypes$1 = {
-  media: core.PropTypes.audioMedia,
-  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  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,
-  // }),
-  withWave: PropTypes.bool,
-  autoWaveHeight: PropTypes.bool,
-  // reduceBufferFactor: PropTypes.number,
-  updateInterval: PropTypes.number,
-  className: PropTypes.string,
-  onReady: PropTypes.func,
-  onPlay: PropTypes.func,
-  onPause: PropTypes.func,
-  onEnded: PropTypes.func,
-  onSeeked: PropTypes.func,
-  onTimeUpdate: PropTypes.func,
-  onProgressStep: PropTypes.func,
-  onDurationChange: PropTypes.func,
-  onVolumeChange: PropTypes.func,
-  onPlayError: PropTypes.func
-};
-var defaultProps$1 = {
-  media: null,
-  mediaRef: null,
-  muted: false,
-  autoPlay: false,
-  paused: false,
-  loop: false,
-  preload: 'auto',
-  shouldLoad: true,
-  waveFake: false,
-  // waveProps: null,
-  withWave: false,
-  autoWaveHeight: false,
-  // reduceBufferFactor: 100,
-  updateInterval: 1000,
-  className: null,
-  onReady: null,
-  onPlay: null,
-  onPause: null,
-  onEnded: null,
-  onSeeked: null,
-  onTimeUpdate: null,
-  onProgressStep: null,
-  onDurationChange: null,
-  onVolumeChange: null,
-  onPlayError: 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,
-    autoWaveHeight = _ref.autoWaveHeight,
-    updateInterval = _ref.updateInterval,
-    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,
-    onPlayError = _ref.onPlayError;
-  var _ref2 = media || {},
-    _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,
-    updateInterval: updateInterval
-  });
-  var ready = hooks.useMediaReady(_ref4.current, {
-    id: url
-  });
-  var duration = hooks.useMediaDuration(_ref4.current, {
-    id: url
-  });
-
-  // const audioLevels = useMediaWaveform(media, {
-  //     fake: waveFake,
-  //     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;
-    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;
-    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;
-    if (element === null) {
-      return;
-    }
-    if (isNumber(newTime)) {
-      element.currentTime = newTime;
-    }
-  }, [_ref4.current]);
-  React.useEffect(function () {
-    if (waveReady && onReady !== null) {
-      onReady();
-    }
-  }, [waveReady, onReady]);
-  React.useEffect(function () {
-    var _ref$current4 = _ref4.current,
-      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) {
-      element.play()["catch"](function (e) {
-        if (onPlayError !== null) {
-          onPlayError(e);
-        }
-      });
-    }
-  }, [paused, media, onPlayError]);
-  hooks.useProgressSteps({
-    currentTime: currentTime,
-    duration: duration,
-    disabled: paused,
-    onStep: onProgressStep
-  });
-  var progress = currentTime !== null && duration > 0 ? currentTime / duration : 0;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("audio", {
-    key: url,
-    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: preload,
-    onPlay: onPlay,
-    onPause: onPause,
-    onEnded: onEnded,
-    onSeeked: onSeeked,
-    onTimeUpdate: onTimeUpdate,
-    onVolumeChange: onVolumeChange
-  }), withWave ? /*#__PURE__*/React.createElement(AudioBars, {
-    className: classNames([styles$1.wave, _defineProperty({}, styles$1.withAutoHeight, autoWaveHeight)]),
-    progress: progress
-    // {...waveProps}
-    ,
-    duration: duration,
-    playing: !paused,
-    seek: onWaveSeek,
-    play: onWavePlay
-  }) : null);
-};
-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: core.PropTypes.color,
-  progressColor: core.PropTypes.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 = 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;
-    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
-
-  var _useSpring = core$1.useSpring(function () {
-      return {
-        x: 0,
-        config: {
-          duration: 0
-        }
-      };
-    }),
-    _useSpring2 = _slicedToArray(_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,
-      immediate: !playing,
-      from: {
-        x: progress
-      },
-      to: {
-        x: playing ? 1 : progress
-      },
-      config: {
-        duration: (duration - currentTime) * 1000
-      }
-    });
-  }, [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 = [];
-
-    // 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 = React.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 = react.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(web.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;
-
-exports.AudioWave = AudioWave;
-exports.default = Audio$1;