@micromag/element-audio 0.3.547 → 0.3.567

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,37 @@ 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 _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$;
+      if (mp3File) {
+        return mp3File.url;
+      }
+    }
+    return url;
+  }, [files, url]);
+  var _ref8 = useRef(null);
+  var currentTime = useMediaCurrentTime(_ref8.current, {
+    id: srcUrl,
     disabled: paused || !withWave && onProgressStep === null,
     updateInterval: updateInterval
   });
-  var ready = useMediaReady(_ref4.current, {
-    id: url
+  var ready = useMediaReady(_ref8.current, {
+    id: srcUrl
   });
-  var duration = useMediaDuration(_ref4.current, {
-    id: url
+  var duration = useMediaDuration(_ref8.current, {
+    id: srcUrl
   });
 
   // const audioLevels = useMediaWaveform(media, {
@@ -282,7 +301,7 @@ var Audio = function Audio(_ref) {
   //     reduceBufferFactor,
   // });
 
-  useMediaLoad(_ref4.current, {
+  useMediaLoad(_ref8.current, {
     preload: preload,
     shouldLoad: shouldLoad
   });
@@ -293,7 +312,7 @@ var Audio = function Audio(_ref) {
     }
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref4.current,
+    var _ref$current = _ref8.current,
       element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
@@ -301,17 +320,17 @@ var Audio = function Audio(_ref) {
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [_ref4.current, customOnVolumeChange]);
+  }, [_ref8.current, customOnVolumeChange]);
   var onWavePlay = useCallback(function () {
-    var _ref$current2 = _ref4.current,
+    var _ref$current2 = _ref8.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
     element.play();
-  }, [_ref4.current]);
+  }, [_ref8.current]);
   var onWaveSeek = useCallback(function (newTime) {
-    var _ref$current3 = _ref4.current,
+    var _ref$current3 = _ref8.current,
       element = _ref$current3 === void 0 ? null : _ref$current3;
     if (element === null) {
       return;
@@ -319,14 +338,14 @@ var Audio = function Audio(_ref) {
     if (isNumber(newTime)) {
       element.currentTime = newTime;
     }
-  }, [_ref4.current]);
+  }, [_ref8.current]);
   useEffect(function () {
     if (waveReady && onReady !== null) {
       onReady();
     }
   }, [waveReady, onReady]);
   useEffect(function () {
-    var _ref$current4 = _ref4.current,
+    var _ref$current4 = _ref8.current,
       element = _ref$current4 === void 0 ? null : _ref$current4;
     if (element === null) {
       return;
@@ -352,16 +371,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;
+      _ref8.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.547",
+    "version": "0.3.567",
     "private": false,
     "description": "",
     "keywords": [
@@ -74,5 +74,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
+    "gitHead": "e39cb9da7eac1d14d3d914bc1cdb6b86b44aedbf"
 }