@micromag/element-audio 0.3.832 → 0.4.4

package/assets/css/styles.css

@@ -1,3 +1,3 @@
-.micromag-element-audio-audio-bars-container .micromag-element-audio-audio-bars-seekButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;left:0;padding:0;position:relative;top:0;width:100%}.micromag-element-audio-audio-bars-container{height:100%;position:relative;width:100%}.micromag-element-audio-audio-bars-container .micromag-element-audio-audio-bars-seekButton{position:absolute;-ms-touch-action:none;touch-action:none}
-.micromag-element-audio-container .micromag-element-audio-wave{height:150px}.micromag-element-audio-container .micromag-element-audio-wave.micromag-element-audio-withAutoHeight{height:100%}
-.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-button,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasBackground,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasProgress{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-element-audio-audio-wave-container{height:100px;position:relative;-ms-touch-action:pan-y;touch-action:pan-y}
+.container{height:100%;position:relative;width:100%}.container .seekButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;left:0;padding:0;position:absolute;top:0;-ms-touch-action:none;touch-action:none;width:100%}
+.container .wave{height:150px}.container .wave.withAutoHeight{height:100%}
+.container{height:100px;position:relative;-ms-touch-action:pan-y;touch-action:pan-y}.container .button,.container .canvasBackground,.container .canvasProgress{height:100%;left:0;position:absolute;top:0;width:100%}.container .button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}

package/es/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Color } from '@micromag/core';
+
+declare const _default: any;
+
+interface AudioWaveProps {
+    currentTime?: number | null;
+    duration?: number | null;
+    playing?: boolean;
+    sampleWidth?: number;
+    sampleMargin?: number;
+    minSampleHeight?: number;
+    backgroundColor?: Color;
+    progressColor?: Color | null;
+    audioLevels?: number[] | null;
+    className?: string | null;
+    onSeek?: ((...args: unknown[]) => void) | null;
+    onResume?: ((...args: unknown[]) => void) | null;
+    onReady?: ((...args: unknown[]) => void) | null;
+}
+declare function AudioWave({ currentTime, duration, playing, sampleWidth, sampleMargin, minSampleHeight, backgroundColor, progressColor, audioLevels, className, onSeek, onResume, onReady, }: AudioWaveProps): react_jsx_runtime.JSX.Element;
+
+export { AudioWave, _default as default };

package/es/index.js

@@ -3,9 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import isNumber from 'lodash/isNumber';
-import PropTypes from 'prop-types';
 import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { PropTypes as PropTypes$1 } from '@micromag/core';
 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';
@@ -14,33 +12,21 @@ import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 import { getContrastingColor } from '@micromag/core/utils';
 
-var styles$2 = {"container":"micromag-element-audio-audio-bars-container","seekButton":"micromag-element-audio-audio-bars-seekButton"};
+var styles$2 = {"container":"container","seekButton":"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$1 = {
-  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 _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,
@@ -172,46 +158,10 @@ function AudioBars(_ref) {
     })
   })));
 }
-AudioBars.propTypes = propTypes$2;
-AudioBars.defaultProps = defaultProps$1;
 
-var styles$1 = {"container":"micromag-element-audio-container","wave":"micromag-element-audio-wave","withAutoHeight":"micromag-element-audio-withAutoHeight"};
+var styles$1 = {"container":"container","wave":"wave","withAutoHeight":"withAutoHeight"};
 
-var propTypes$1 = {
-  media: PropTypes$1.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,
-  withoutSeek: PropTypes.bool,
-  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 Audio = function Audio(_ref) {
+function Audio(_ref) {
   var _ref$media = _ref.media,
     media = _ref$media === void 0 ? null : _ref$media,
     _ref$mediaRef = _ref.mediaRef,
@@ -401,60 +351,42 @@ var Audio = function Audio(_ref) {
     seek: !withoutSeek ? onWaveSeek : null,
     play: onWavePlay
   }) : null);
-};
-Audio.propTypes = propTypes$1;
+}
 var Audio_default = /*#__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","canvasBackground":"micromag-element-audio-audio-wave-canvasBackground","canvasProgress":"micromag-element-audio-audio-wave-canvasProgress"};
+var styles = {"container":"container","canvasBackground":"canvasBackground","canvasProgress":"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 _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 () {
@@ -630,7 +562,5 @@ function AudioWave(_ref) {
     }
   }));
 }
-AudioWave.propTypes = propTypes;
-AudioWave.defaultProps = defaultProps;
 
 export { AudioWave, Audio_default as default };

package/es/styles.css

@@ -0,0 +1,3 @@
+.container{height:100%;position:relative;width:100%}.container .seekButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;left:0;padding:0;position:absolute;top:0;-ms-touch-action:none;touch-action:none;width:100%}
+.container .wave{height:150px}.container .wave.withAutoHeight{height:100%}
+.container{height:100px;position:relative;-ms-touch-action:pan-y;touch-action:pan-y}.container .button,.container .canvasBackground,.container .canvasProgress{height:100%;left:0;position:absolute;top:0;width:100%}.container .button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.3.832",
+    "version": "0.4.4",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,9 +32,11 @@
     "license": "ISC",
     "type": "module",
     "module": "es/index.js",
+    "types": "es/index.d.ts",
     "exports": {
         ".": {
-            "import": "./es/index.js"
+            "import": "./es/index.js",
+            "types": "./es/index.d.ts"
         },
         "./assets/css/styles": "./assets/css/styles.css",
         "./assets/css/styles.css": "./assets/css/styles.css"
@@ -47,32 +49,31 @@
     "scripts": {
         "clean": "rm -rf es && rm -rf lib && rm -rf assets",
         "prepublishOnly": "npm run build",
-        "build": "../../scripts/prepare-package.sh"
+        "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0",
+        "react-dom": "^18.3.0 || ^19.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0",
+        "react-dom": "^18.3.0 || ^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.832",
-        "@micromag/element-closed-captions": "^0.3.832",
-        "@react-spring/core": "^9.6.1",
-        "@react-spring/web": "^9.6.1",
+        "@micromag/core": "^0.4.4",
+        "@micromag/element-closed-captions": "^0.4.4",
+        "@react-spring/core": "^10.0.3",
+        "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
         "classnames": "^2.2.6",
-        "lodash": "^4.17.21",
-        "prop-types": "^15.7.2",
-        "react-intl": "^6.6.4",
+        "lodash": "^4.17.23",
+        "react-intl": "^8.1.3",
         "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4969d64e304334cfd47321e624e5914e0694c55f"
+    "gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d"
 }