@micromag/element-audio 0.3.24 → 0.3.29

package/es/index.js

@@ -7,11 +7,12 @@ import { useUserInteracted } from '@micromag/core/contexts';
 import { useResizeObserver, useMediaApi } from '@micromag/core/hooks';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useEffect, useCallback, useState } from 'react';
+import React, { useRef, useMemo, useEffect, useCallback, useState } from 'react';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 import { useGesture } from '@use-gesture/react';
 import 'whatwg-fetch';
+import { getContrastingColor } from '@micromag/core/utils';
 
 var styles$1 = {"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"};
 
@@ -22,8 +23,8 @@ var propTypes$1 = {
   sampleWidth: PropTypes.number,
   sampleMargin: PropTypes.number,
   minSampleHeight: PropTypes.number,
-  backgroundColor: PropTypes.string,
-  progressColor: PropTypes.string,
+  backgroundColor: PropTypes$1.color,
+  progressColor: PropTypes$1.color,
   audioLevels: PropTypes.arrayOf(PropTypes.number),
   className: PropTypes.string,
   onSeek: PropTypes.func,
@@ -38,7 +39,7 @@ var defaultProps$1 = {
   sampleMargin: 1,
   minSampleHeight: 2,
   backgroundColor: 'white',
-  progressColor: 'lightblue',
+  progressColor: null,
   audioLevels: null,
   className: null,
   onSeek: null,
@@ -62,15 +63,25 @@ function AudioWave(_ref) {
       onReady = _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;
+
+    return color;
+  }, [backgroundColor]);
+  var alternateColor = useMemo(function () {
+    return getContrastingColor(backgroundColor, progressColor);
+  }, [progressColor, backgroundColor]);
 
   var _useResizeObserver = useResizeObserver(),
       elRef = _useResizeObserver.ref,
       elContentRect = _useResizeObserver.entry.contentRect;
 
-  var _ref2 = elContentRect || {},
-      _ref2$width = _ref2.width,
-      elWidth = _ref2$width === void 0 ? null : _ref2$width,
-      elHeight = _ref2.height; // Linear animation for progress bar
+  var _ref3 = elContentRect || {},
+      _ref3$width = _ref3.width,
+      elWidth = _ref3$width === void 0 ? null : _ref3$width,
+      elHeight = _ref3.height; // Linear animation for progress bar
 
 
   var _useSpring = useSpring(function () {
@@ -167,8 +178,8 @@ function AudioWave(_ref) {
     ctxProgress.scale(scale, scale);
     ctxBG.clearRect(0, 0, elWidth, elHeight);
     ctxProgress.clearRect(0, 0, elWidth, elHeight);
-    ctxBG.fillStyle = backgroundColor;
-    ctxProgress.fillStyle = progressColor;
+    ctxBG.fillStyle = mainColor;
+    ctxProgress.fillStyle = alternateColor;
     var offsetLeft = (elWidth - samplesCount * sampleOuterWidth) / 2;
     normalizedAmplitudes.forEach(function (amplitude, amplitudeI) {
       var sampleHeight = Math.max(minSampleHeight, amplitude * elHeight);
@@ -181,7 +192,7 @@ function AudioWave(_ref) {
     if (onReady !== null) {
       onReady();
     }
-  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, backgroundColor, progressColor, onReady]); // User events
+  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
 
   var seekFromX = useCallback(function (x) {
     var elX = elRef.current.getBoundingClientRect().left;
@@ -196,11 +207,11 @@ function AudioWave(_ref) {
     }
   }, [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;
+    onDrag: function onDrag(_ref4) {
+      var _ref4$xy = _slicedToArray(_ref4.xy, 1),
+          x = _ref4$xy[0],
+          elapsedTime = _ref4.elapsedTime,
+          active = _ref4.active;
 
       if (!active && elapsedTime > 300) {
         return;

package/lib/index.js

@@ -6,16 +6,17 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var core$1 = require('@micromag/core');
+var core = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
 var classNames = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var core = require('@react-spring/core');
+var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
 var react = require('@use-gesture/react');
 require('whatwg-fetch');
+var utils = require('@micromag/core/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,8 +37,8 @@ var propTypes$1 = {
   sampleWidth: PropTypes__default["default"].number,
   sampleMargin: PropTypes__default["default"].number,
   minSampleHeight: PropTypes__default["default"].number,
-  backgroundColor: PropTypes__default["default"].string,
-  progressColor: PropTypes__default["default"].string,
+  backgroundColor: core.PropTypes.color,
+  progressColor: core.PropTypes.color,
   audioLevels: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
   className: PropTypes__default["default"].string,
   onSeek: PropTypes__default["default"].func,
@@ -52,7 +53,7 @@ var defaultProps$1 = {
   sampleMargin: 1,
   minSampleHeight: 2,
   backgroundColor: 'white',
-  progressColor: 'lightblue',
+  progressColor: null,
   audioLevels: null,
   className: null,
   onSeek: null,
@@ -76,18 +77,28 @@ function AudioWave(_ref) {
       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 _useResizeObserver = hooks.useResizeObserver(),
       elRef = _useResizeObserver.ref,
       elContentRect = _useResizeObserver.entry.contentRect;
 
-  var _ref2 = elContentRect || {},
-      _ref2$width = _ref2.width,
-      elWidth = _ref2$width === void 0 ? null : _ref2$width,
-      elHeight = _ref2.height; // Linear animation for progress bar
+  var _ref3 = elContentRect || {},
+      _ref3$width = _ref3.width,
+      elWidth = _ref3$width === void 0 ? null : _ref3$width,
+      elHeight = _ref3.height; // Linear animation for progress bar
 
 
-  var _useSpring = core.useSpring(function () {
+  var _useSpring = core$1.useSpring(function () {
     return {
       x: 0,
       config: {
@@ -181,8 +192,8 @@ function AudioWave(_ref) {
     ctxProgress.scale(scale, scale);
     ctxBG.clearRect(0, 0, elWidth, elHeight);
     ctxProgress.clearRect(0, 0, elWidth, elHeight);
-    ctxBG.fillStyle = backgroundColor;
-    ctxProgress.fillStyle = progressColor;
+    ctxBG.fillStyle = mainColor;
+    ctxProgress.fillStyle = alternateColor;
     var offsetLeft = (elWidth - samplesCount * sampleOuterWidth) / 2;
     normalizedAmplitudes.forEach(function (amplitude, amplitudeI) {
       var sampleHeight = Math.max(minSampleHeight, amplitude * elHeight);
@@ -195,7 +206,7 @@ function AudioWave(_ref) {
     if (onReady !== null) {
       onReady();
     }
-  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, backgroundColor, progressColor, onReady]); // User events
+  }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
 
   var seekFromX = React.useCallback(function (x) {
     var elX = elRef.current.getBoundingClientRect().left;
@@ -210,11 +221,11 @@ function AudioWave(_ref) {
     }
   }, [duration, playing, onSeek, onResume]);
   var bind = react.useGesture({
-    onDrag: function onDrag(_ref3) {
-      var _ref3$xy = _slicedToArray__default["default"](_ref3.xy, 1),
-          x = _ref3$xy[0],
-          elapsedTime = _ref3.elapsedTime,
-          active = _ref3.active;
+    onDrag: function onDrag(_ref4) {
+      var _ref4$xy = _slicedToArray__default["default"](_ref4.xy, 1),
+          x = _ref4$xy[0],
+          elapsedTime = _ref4.elapsedTime,
+          active = _ref4.active;
 
       if (!active && elapsedTime > 300) {
         return;
@@ -252,7 +263,7 @@ var styles = {"container":"micromag-element-audio-container","wave":"micromag-el
 
 var _excluded = ["ref"];
 var propTypes = {
-  media: core$1.PropTypes.audioMedia,
+  media: core.PropTypes.audioMedia,
   apiRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any
   })]),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.3.24",
+    "version": "0.3.29",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,20 +52,21 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.24",
-        "@micromag/element-closed-captions": "^0.3.24",
-        "@micromag/element-media-controls": "^0.3.24",
+        "@micromag/core": "^0.3.29",
+        "@micromag/element-closed-captions": "^0.3.29",
+        "@micromag/element-media-controls": "^0.3.29",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
+        "tinycolor2": "^1.4.2",
         "uuid": "^8.3.2",
         "whatwg-fetch": "^3.6.1"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f2d5d71a3e5c5e6d6e9d8af3bdd8a71bf38fbbb7"
+    "gitHead": "fb4684ac9e69930c0ac4d9045b5148d011e92c7b"
 }