@micromag/element-audio 0.4.49 → 0.4.51

package/es/index.js

@@ -1,14 +1,16 @@
+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 React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+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';
 import { useSpringRef, useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 import { getContrastingColor } from '@micromag/core/utils';
@@ -112,52 +114,53 @@ function AudioBars(_ref) {
       filterTaps: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles$2.container, className]),
-    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"
-      }]
-    })
-  })));
+    ref: elRef,
+    children: [/*#__PURE__*/jsx("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",
+      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()), {}, {
+      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"
+        }]
+      })
+    }))]
+  });
 }
 
 var styles$1 = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave","withAutoHeight":"micromag-element-audio-withAutoHeight"};
@@ -319,45 +322,45 @@ function Audio(_ref) {
     onStep: onProgressStep
   });
   var progress = currentTime !== null && duration > 0 ? currentTime / duration : 0;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, className])
-  }, /*#__PURE__*/React.createElement("audio", {
-    key: srcUrl,
-    ref: function ref(newRef) {
-      _ref7.current = newRef;
-      if (mediaRef !== null && isFunction(mediaRef)) {
-        mediaRef(newRef);
-      } else if (mediaRef !== null) {
-        mediaRef.current = newRef;
-      }
-    },
-    src: srcUrl,
-    autoPlay: autoPlay && !paused,
-    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: !withoutSeek ? onWaveSeek : null,
-    play: onWavePlay
-  }) : null);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$1.container, className]),
+    children: [/*#__PURE__*/jsx("audio", {
+      ref: function ref(newRef) {
+        _ref7.current = newRef;
+        if (mediaRef !== null && isFunction(mediaRef)) {
+          mediaRef(newRef);
+        } else if (mediaRef !== null) {
+          mediaRef.current = newRef;
+        }
+      },
+      src: srcUrl,
+      autoPlay: autoPlay && !paused,
+      muted: muted,
+      loop: loop,
+      crossOrigin: "anonymous",
+      preload: preload,
+      onPlay: onPlay,
+      onPause: onPause,
+      onEnded: onEnded,
+      onSeeked: onSeeked,
+      onTimeUpdate: onTimeUpdate,
+      onVolumeChange: onVolumeChange
+    }, srcUrl), withWave ? /*#__PURE__*/jsx(AudioBars, {
+      className: classNames([styles$1.wave, _defineProperty({}, styles$1.withAutoHeight, autoWaveHeight)]),
+      progress: progress
+      // {...waveProps}
+      ,
+      duration: duration,
+      playing: !paused,
+      seek: !withoutSeek ? onWaveSeek : null,
+      play: onWavePlay
+    }) : null]
+  });
 }
 var Audio_default = (function (_ref9) {
   var ref = _ref9.ref,
     props = _objectWithoutProperties(_ref9, _excluded);
-  return /*#__PURE__*/React.createElement(Audio, Object.assign({
+  return /*#__PURE__*/jsx(Audio, _objectSpread({
     mediaRef: ref
   }, props));
 });
@@ -554,20 +557,22 @@ function AudioWave(_ref) {
       filterTaps: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     className: classNames([styles.container, className]),
     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%)");
-      })
-    }
+  }, bind()), {}, {
+    children: [/*#__PURE__*/jsx("canvas", {
+      ref: canvasBackgroundRef,
+      className: styles.canvasBackground
+    }), /*#__PURE__*/jsx(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%)");
+        })
+      }
+    })]
   }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.4.49",
+    "version": "0.4.51",
     "private": false,
     "description": "",
     "keywords": [
@@ -61,8 +61,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.49",
-        "@micromag/element-closed-captions": "^0.4.49",
+        "@micromag/core": "^0.4.51",
+        "@micromag/element-closed-captions": "^0.4.51",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -75,5 +75,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e"
+    "gitHead": "985a2370829c9ac8901ea97bf20bfc98ab158439"
 }