@micromag/element-audio 0.4.71 → 0.4.77

package/es/index.js

@@ -1,13 +1,8 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-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';
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { useDimensionObserver, useMediaCurrentTime, useMediaReady, useMediaDuration, useMediaLoad, useProgressSteps, useDevicePixelRatio } from '@micromag/core/hooks';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useGesture } from '@use-gesture/react';
 import { useIntl } from 'react-intl';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -17,48 +12,38 @@ import { getContrastingColor } from '@micromag/core/utils';
 
 var styles$2 = {"container":"micromag-element-audio-audio-bars-container","seekButton":"micromag-element-audio-audio-bars-seekButton"};
 
-function AudioBars(_ref) {
-  var _ref$progress = _ref.progress,
-    progress = _ref$progress === void 0 ? 0 : _ref$progress,
-    _ref$playing = _ref.playing,
-    playing = _ref$playing === void 0 ? false : _ref$playing,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 0 : _ref$duration,
-    _ref$seek = _ref.seek,
-    seek = _ref$seek === void 0 ? null : _ref$seek,
-    _ref$play = _ref.play,
-    play = _ref$play === void 0 ? null : _ref$play,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var intl = useIntl();
-  var _useDimensionObserver = 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 = 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);
-    });
+function AudioBars({
+  progress = 0,
+  playing = false,
+  duration = 0,
+  seek = null,
+  play = null,
+  className = null
+}) {
+  const intl = useIntl();
+  const {
+    ref: elRef,
+    width: elWidth = null,
+    height: elHeight
+  } = useDimensionObserver();
+  const barWidth = 1;
+  const barGap = 1;
+  const barSize = barWidth + barGap;
+  const current = progress * elWidth;
+  const [currentSeek, setCurrentSeek] = useState(null);
+  const items = useMemo(() => {
+    const count = Math.floor(elWidth / barSize);
+    return [...Array(count).keys()].map(() => Math.floor(Math.random() * 100));
   }, [elWidth, barSize]);
-  var seekFromX = useCallback(function () {
-    var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  const seekFromX = useCallback((x = 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));
+    const {
+      left: elX,
+      width
+    } = elRef.current.getBoundingClientRect();
+    const distance = Math.max(0, Math.min(1, (x - elX) / width));
     if (seek !== null && duration !== null) {
       seek(parseFloat(distance * duration, 10));
     }
@@ -66,45 +51,46 @@ function AudioBars(_ref) {
       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;
-    var distance = Math.max(0, Math.min(1, (x - elX) / width));
-    setCurrentSeek(distance * elWidth);
+  const seekTemporary = useCallback(x_0 => {
+    const {
+      left: elX_0,
+      width: width_0
+    } = elRef.current.getBoundingClientRect();
+    const distance_0 = Math.max(0, Math.min(1, (x_0 - elX_0) / width_0));
+    setCurrentSeek(distance_0 * elWidth);
   }, [elRef.current, elWidth, setCurrentSeek]);
-  var onClick = useCallback(function (e) {
+  const onClick = useCallback(e => {
     if (e) {
       seekFromX(e.clientX || null);
       setCurrentSeek(null);
     }
   }, [seekFromX, setCurrentSeek]);
-  var bind = useGesture({
-    onDrag: function onDrag(_ref2) {
-      var _ref2$xy = _slicedToArray(_ref2.xy, 1),
-        x = _ref2$xy[0],
-        elapsedTime = _ref2.elapsedTime,
-        active = _ref2.active;
+  const bind = useGesture({
+    onDrag: ({
+      xy: [x_1],
+      elapsedTime,
+      active
+    }) => {
       if (!active && elapsedTime > 300) {
         return;
       }
-      seekTemporary(x);
+      seekTemporary(x_1);
     },
-    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) {
+    onDragStart: ({
+      xy: [x_2],
+      elapsedTime: elapsedTime_0,
+      active: active_0
+    }) => {
+      if (!active_0 && elapsedTime_0 > 300) {
         return;
       }
-      seekTemporary(x);
+      seekTemporary(x_2);
     },
-    onDragEnd: function onDragEnd(_ref4) {
-      var _ref4$xy = _slicedToArray(_ref4.xy, 1),
-        x = _ref4$xy[0];
-      seekFromX(x);
-      setTimeout(function () {
+    onDragEnd: ({
+      xy: [x_3]
+    }) => {
+      seekFromX(x_3);
+      setTimeout(() => {
         setCurrentSeek(null);
       }, 1000);
     }
@@ -123,130 +109,91 @@ function AudioBars(_ref) {
       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),
+      width: `${elWidth}px`,
+      height: `${elHeight}px`,
+      viewBox: `0 0 ${elWidth} ${elHeight}`,
       className: className,
       xmlSpace: "preserve",
-      children: items.map(function (size, i) {
-        return /*#__PURE__*/jsx("rect", {
-          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"
-        }, "bar-".concat(i + 1));
-      })
-    }), /*#__PURE__*/jsx("button", _objectSpread(_objectSpread({}, bind()), {}, {
+      children: items.map((size, i) => /*#__PURE__*/jsx("rect", {
+        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"
+      }, `bar-${i + 1}`))
+    }), /*#__PURE__*/jsx("button", {
+      ...bind(),
       onClick: onClick,
       type: "button",
       className: styles$2.seekButton,
       title: intl.formatMessage({
         id: "G1Gyjn",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Seek"
-        }]
+        defaultMessage: "Seek"
       }),
       "aria-label": intl.formatMessage({
         id: "G1Gyjn",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Seek"
-        }]
+        defaultMessage: "Seek"
       })
-    }))]
+    })]
   });
 }
 
 var styles$1 = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave","withAutoHeight":"micromag-element-audio-withAutoHeight"};
 
-var _excluded = ["ref"];
-function Audio(_ref) {
-  var _ref$media = _ref.media,
-    media = _ref$media === void 0 ? null : _ref$media,
-    _ref$mediaRef = _ref.mediaRef,
-    mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$muted = _ref.muted,
-    muted = _ref$muted === void 0 ? false : _ref$muted,
-    _ref$autoPlay = _ref.autoPlay,
-    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
-    _ref$paused = _ref.paused,
-    paused = _ref$paused === void 0 ? false : _ref$paused,
-    _ref$loop = _ref.loop,
-    loop = _ref$loop === void 0 ? false : _ref$loop,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? 'auto' : _ref$preload,
-    _ref$shouldLoad = _ref.shouldLoad,
-    shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
-    _ref$waveFake = _ref.waveFake,
-    waveFake = _ref$waveFake === void 0 ? false : _ref$waveFake,
-    _ref$withWave = _ref.withWave,
-    withWave = _ref$withWave === void 0 ? false : _ref$withWave,
-    _ref$autoWaveHeight = _ref.autoWaveHeight,
-    autoWaveHeight = _ref$autoWaveHeight === void 0 ? false : _ref$autoWaveHeight,
-    _ref$updateInterval = _ref.updateInterval,
-    updateInterval = _ref$updateInterval === void 0 ? 1000 : _ref$updateInterval,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$withoutSeek = _ref.withoutSeek,
-    withoutSeek = _ref$withoutSeek === void 0 ? false : _ref$withoutSeek,
-    _ref$onReady = _ref.onReady,
-    onReady = _ref$onReady === void 0 ? null : _ref$onReady,
-    _ref$onPlay = _ref.onPlay,
-    onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
-    _ref$onPause = _ref.onPause,
-    onPause = _ref$onPause === void 0 ? null : _ref$onPause,
-    _ref$onEnded = _ref.onEnded,
-    onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
-    _ref$onSeeked = _ref.onSeeked,
-    onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
-    _ref$onTimeUpdate = _ref.onTimeUpdate,
-    onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
-    _ref$onProgressStep = _ref.onProgressStep,
-    onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
-    _ref$onDurationChange = _ref.onDurationChange,
-    customOnDurationChange = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
-    _ref$onVolumeChange = _ref.onVolumeChange,
-    customOnVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
-    _ref$onPlayError = _ref.onPlayError,
-    onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError;
-  var _ref2 = media || {},
-    _ref2$url = _ref2.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 () {
+function Audio({
+  media = null,
+  mediaRef = null,
+  muted = false,
+  autoPlay = false,
+  paused = false,
+  loop = false,
+  preload = 'auto',
+  shouldLoad = true,
+  waveFake = false,
+  withWave = false,
+  autoWaveHeight = false,
+  updateInterval = 1000,
+  className = null,
+  withoutSeek = false,
+  onReady = null,
+  onPlay = null,
+  onPause = null,
+  onEnded = null,
+  onSeeked = null,
+  onTimeUpdate = null,
+  onProgressStep = null,
+  onDurationChange: customOnDurationChange = null,
+  onVolumeChange: customOnVolumeChange = null,
+  onPlayError = null
+}) {
+  const {
+    url = null,
+    files = null
+  } = media || {};
+  const srcUrl = useMemo(() => {
     if (files) {
-      var filesAsEntries = Object.entries(files);
-      var _ref3 = filesAsEntries.find(function (_ref5) {
-          var _ref6 = _slicedToArray(_ref5, 1),
-            key = _ref6[0];
-          return key === 'mp3';
-        }) || [],
-        _ref4 = _slicedToArray(_ref3, 2),
-        _ref4$ = _ref4[1],
-        mp3File = _ref4$ === void 0 ? null : _ref4$;
+      const filesAsEntries = Object.entries(files);
+      const [, mp3File = null] = filesAsEntries.find(([key]) => key === 'mp3') || [];
       if (mp3File) {
         return mp3File.url;
       }
     }
     return url;
   }, [files, url]);
-  var _ref7 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref7.current, {
+  const ref = useRef(null);
+  const currentTime = useMediaCurrentTime(ref.current, {
     id: srcUrl,
     disabled: paused || !withWave && onProgressStep === null,
-    updateInterval: updateInterval
+    updateInterval
   });
-  var ready = useMediaReady(_ref7.current, {
+  const ready = useMediaReady(ref.current, {
     id: srcUrl
   });
-  var duration = useMediaDuration(_ref7.current, {
+  const duration = useMediaDuration(ref.current, {
     id: srcUrl
   });
 
@@ -255,60 +202,66 @@ function Audio(_ref) {
   //     reduceBufferFactor,
   // });
 
-  useMediaLoad(_ref7.current, {
-    preload: preload,
-    shouldLoad: shouldLoad
+  useMediaLoad(ref.current, {
+    preload,
+    shouldLoad
   });
-  var waveReady = waveFake || ready;
-  useEffect(function () {
+  const waveReady = waveFake || ready;
+  useEffect(() => {
     if (duration > 0 && customOnDurationChange !== null) {
       customOnDurationChange(duration);
     }
   }, [duration, customOnDurationChange]);
-  var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref7.current,
-      element = _ref$current === void 0 ? null : _ref$current;
+  const onVolumeChange = useCallback(() => {
+    const {
+      current: element = null
+    } = ref;
     if (element === null) {
       return;
     }
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [_ref7.current, customOnVolumeChange]);
-  var onWavePlay = useCallback(function () {
-    var _ref$current2 = _ref7.current,
-      element = _ref$current2 === void 0 ? null : _ref$current2;
-    if (element === null) {
+  }, [ref.current, customOnVolumeChange]);
+  const onWavePlay = useCallback(() => {
+    const {
+      current: element_0 = null
+    } = ref;
+    if (element_0 === null) {
       return;
     }
-    element.play();
-  }, [_ref7.current]);
-  var onWaveSeek = useCallback(function (newTime) {
-    var _ref$current3 = _ref7.current,
-      element = _ref$current3 === void 0 ? null : _ref$current3;
-    if (element === null) {
+    element_0.play();
+  }, [ref.current]);
+  const onWaveSeek = useCallback(newTime => {
+    const {
+      current: element_1 = null
+    } = ref;
+    if (element_1 === null) {
       return;
     }
     if (isNumber(newTime)) {
-      element.currentTime = newTime;
+      element_1.currentTime = newTime;
     }
-  }, [_ref7.current]);
-  useEffect(function () {
+  }, [ref.current]);
+  useEffect(() => {
     if (waveReady && onReady !== null) {
       onReady();
     }
   }, [waveReady, onReady]);
-  useEffect(function () {
-    var _ref$current4 = _ref7.current,
-      element = _ref$current4 === void 0 ? null : _ref$current4;
-    if (element === null) {
+  useEffect(() => {
+    const {
+      current: element_2 = null
+    } = ref;
+    if (element_2 === null) {
       return;
     }
-    var isPaused = element.paused;
+    const {
+      paused: isPaused
+    } = element_2;
     if (paused && !isPaused) {
-      element.pause();
+      element_2.pause();
     } else if (!paused && isPaused) {
-      element.play()["catch"](function (e) {
+      element_2.play().catch(e => {
         if (onPlayError !== null) {
           onPlayError(e);
         }
@@ -316,17 +269,17 @@ function Audio(_ref) {
     }
   }, [paused, media, onPlayError]);
   useProgressSteps({
-    currentTime: currentTime,
-    duration: duration,
+    currentTime,
+    duration,
     disabled: paused,
     onStep: onProgressStep
   });
-  var progress = currentTime !== null && duration > 0 ? currentTime / duration : 0;
+  const progress = currentTime !== null && duration > 0 ? currentTime / duration : 0;
   return /*#__PURE__*/jsxs("div", {
     className: classNames([styles$1.container, className]),
     children: [/*#__PURE__*/jsx("audio", {
-      ref: function ref(newRef) {
-        _ref7.current = newRef;
+      ref: newRef => {
+        ref.current = newRef;
         if (mediaRef !== null && isFunction(mediaRef)) {
           mediaRef(newRef);
         } else if (mediaRef !== null) {
@@ -346,7 +299,9 @@ function Audio(_ref) {
       onTimeUpdate: onTimeUpdate,
       onVolumeChange: onVolumeChange
     }, srcUrl), withWave ? /*#__PURE__*/jsx(AudioBars, {
-      className: classNames([styles$1.wave, _defineProperty({}, styles$1.withAutoHeight, autoWaveHeight)]),
+      className: classNames([styles$1.wave, {
+        [styles$1.withAutoHeight]: autoWaveHeight
+      }]),
       progress: progress
       // {...waveProps}
       ,
@@ -357,82 +312,63 @@ function Audio(_ref) {
     }) : null]
   });
 }
-var Audio_default = (function (_ref9) {
-  var ref = _ref9.ref,
-    props = _objectWithoutProperties(_ref9, _excluded);
-  return /*#__PURE__*/jsx(Audio, _objectSpread({
-    mediaRef: ref
-  }, props));
+var Audio_default = ({
+  ref,
+  ...props
+}) => /*#__PURE__*/jsx(Audio, {
+  mediaRef: ref,
+  ...props
 });
 
 var styles = {"container":"micromag-element-audio-audio-wave-container","canvasBackground":"micromag-element-audio-audio-wave-canvasBackground","canvasProgress":"micromag-element-audio-audio-wave-canvasProgress"};
 
-function AudioWave(_ref) {
-  var _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? null : _ref$currentTime,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? null : _ref$duration,
-    _ref$playing = _ref.playing,
-    playing = _ref$playing === void 0 ? false : _ref$playing,
-    _ref$sampleWidth = _ref.sampleWidth,
-    sampleWidth = _ref$sampleWidth === void 0 ? 3 : _ref$sampleWidth,
-    _ref$sampleMargin = _ref.sampleMargin,
-    sampleMargin = _ref$sampleMargin === void 0 ? 1 : _ref$sampleMargin,
-    _ref$minSampleHeight = _ref.minSampleHeight,
-    minSampleHeight = _ref$minSampleHeight === void 0 ? 2 : _ref$minSampleHeight,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? 'white' : _ref$backgroundColor,
-    _ref$progressColor = _ref.progressColor,
-    progressColor = _ref$progressColor === void 0 ? null : _ref$progressColor,
-    _ref$audioLevels = _ref.audioLevels,
-    audioLevels = _ref$audioLevels === void 0 ? null : _ref$audioLevels,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$onSeek = _ref.onSeek,
-    onSeek = _ref$onSeek === void 0 ? null : _ref$onSeek,
-    _ref$onResume = _ref.onResume,
-    onResume = _ref$onResume === void 0 ? null : _ref$onResume,
-    _ref$onReady = _ref.onReady,
-    onReady = _ref$onReady === void 0 ? null : _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;
+function AudioWave({
+  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
+}) {
+  const canvasBackgroundRef = useRef(null);
+  const canvasProgressRef = useRef(null);
+  const mainColor = useMemo(() => {
+    const {
+      color = 'white'
+    } = backgroundColor || {};
     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;
+  const alternateColor = useMemo(() => getContrastingColor(backgroundColor, progressColor), [progressColor, backgroundColor]);
+  const {
+    ref: elRef,
+    width: elWidth = null,
+    height: elHeight
+  } = useDimensionObserver();
 
   // Linear animation for progress bar
 
   // In react-spring v10, useSpring(fn) without deps resets the spring on every render
   // via a layout effect. Passing a SpringRef prevents this reset behavior.
-  var springRef = useSpringRef();
-  var _useSpring = useSpring(function () {
-      return {
-        ref: springRef,
-        x: 0,
-        config: {
-          duration: 0
-        }
-      };
-    }),
-    _useSpring2 = _slicedToArray(_useSpring, 2),
-    springProps = _useSpring2[0],
-    setSpringProps = _useSpring2[1];
-  useEffect(function () {
+  const springRef = useSpringRef();
+  const [springProps, setSpringProps] = useSpring(() => ({
+    ref: springRef,
+    x: 0,
+    config: {
+      duration: 0
+    }
+  }));
+  useEffect(() => {
     if (currentTime === null || duration === null) {
       return;
     }
-    var progress = currentTime / duration;
+    const progress = currentTime / duration;
     setSpringProps.start({
       reset: true,
       immediate: !playing,
@@ -450,28 +386,26 @@ function AudioWave(_ref) {
 
   // draw canvas
 
-  useEffect(function () {
+  useEffect(() => {
     if (audioLevels === null || audioLevels.length === 0 || elRef.current === null) {
       return;
     }
-    var sampleOuterWidth = sampleWidth + sampleMargin * 2;
-    var samplesCount = Math.floor(elWidth / sampleOuterWidth);
+    const sampleOuterWidth = sampleWidth + sampleMargin * 2;
+    const 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) {
+    const levelsBySamples = audioLevels.length / samplesCount;
+    const amplitudes = [...Array(samplesCount).keys()].reduce((newAmplitudes, index) => {
+      const levelStartIndex = index * levelsBySamples;
+      const levelEndIndex = levelStartIndex + levelsBySamples;
+      const newValues = [];
+      for (let 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);
+      return levelsBySamples >= 1 ? [...newAmplitudes, newValues.reduce((total, value) => total + value, 0) / newValues.length] : [...newAmplitudes, ...newValues];
     }, []);
 
     // for (let sampleI = 0; sampleI < samplesCount; sampleI += levelsBySamples) {
@@ -492,33 +426,31 @@ 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;
-    });
+    const minAmplitude = Math.min(...amplitudes);
+    const maxAmplitude = Math.max(...amplitudes);
+    const delta = maxAmplitude - minAmplitude;
+    const normalizedAmplitudes = amplitudes.map(n => (n - minAmplitude) / delta);
 
     // draw samples
-    var canvasBg = canvasBackgroundRef.current;
-    var canvasProgress = canvasProgressRef.current;
-    var devicePixelRatio = useDevicePixelRatio();
-    var scale = devicePixelRatio;
+    const canvasBg = canvasBackgroundRef.current;
+    const canvasProgress = canvasProgressRef.current;
+    const devicePixelRatio = useDevicePixelRatio();
+    const scale = devicePixelRatio;
     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');
+    const ctxBG = canvasBg.getContext('2d');
+    const 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;
+    const offsetLeft = (elWidth - samplesCount * sampleOuterWidth) / 2;
+    normalizedAmplitudes.forEach((amplitude, amplitudeI) => {
+      const sampleHeight = Math.max(minSampleHeight, amplitude * elHeight);
+      const sampleX = sampleOuterWidth * amplitudeI + offsetLeft + sampleMargin;
+      const 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));
     });
@@ -528,28 +460,29 @@ function AudioWave(_ref) {
   }, [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));
+  const seekFromX = useCallback(x => {
+    const {
+      left: elX,
+      width
+    } = elRef.current.getBoundingClientRect();
+    const progress_0 = Math.max(0, Math.min(1, (x - elX) / width));
     if (onSeek !== null && duration !== null) {
-      onSeek(progress * duration);
+      onSeek(progress_0 * 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;
+  const bind = useGesture({
+    onDrag: ({
+      xy: [x_0],
+      elapsedTime,
+      active
+    }) => {
       if (!active && elapsedTime > 300) {
         return;
       }
-      seekFromX(x);
+      seekFromX(x_0);
     }
   }, {
     drag: {
@@ -557,10 +490,10 @@ function AudioWave(_ref) {
       filterTaps: true
     }
   });
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className]),
-    ref: elRef
-  }, bind()), {}, {
+    ref: elRef,
+    ...bind(),
     children: [/*#__PURE__*/jsx("canvas", {
       ref: canvasBackgroundRef,
       className: styles.canvasBackground
@@ -568,12 +501,10 @@ function AudioWave(_ref) {
       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%)");
-        })
+        clipPath: springProps.x.to(x_1 => `polygon(0 0, ${x_1 * 100}% 0, ${x_1 * 100}% 100%, 0 100%)`)
       }
     })]
-  }));
+  });
 }
 
 export { AudioWave, Audio_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.4.71",
+    "version": "0.4.77",
     "private": false,
     "description": "",
     "keywords": [
@@ -33,9 +33,11 @@
     "type": "module",
     "module": "es/index.js",
     "types": "es/index.d.ts",
+    "style": "./assets/css/styles.css",
     "exports": {
         ".": {
             "import": "./es/index.js",
+            "style": "./assets/css/styles.css",
             "types": "./es/index.d.ts"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -52,17 +54,17 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-closed-captions": "^0.4.71",
+        "@micromag/core": "^0.4.77",
+        "@micromag/element-closed-captions": "^0.4.77",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -75,5 +77,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773"
+    "gitHead": "b55c2c748383d30c8ff0ca7594e499dbdc8d1c10"
 }