@micromag/element-audio 0.3.25 → 0.3.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.js +34 -20
  2. package/lib/index.js +37 -23
  3. package/package.json +6 -5
package/es/index.js CHANGED
@@ -2,16 +2,17 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
5
+ import classNames from 'classnames';
6
+ import PropTypes from 'prop-types';
7
+ import React, { useRef, useMemo, useEffect, useCallback, useState } from 'react';
5
8
  import { PropTypes as PropTypes$1 } from '@micromag/core';
6
9
  import { useUserInteracted } from '@micromag/core/contexts';
7
10
  import { useResizeObserver, useMediaApi } from '@micromag/core/hooks';
8
- import classNames from 'classnames';
9
- import PropTypes from 'prop-types';
10
- import React, { useRef, useEffect, useCallback, useState } from 'react';
11
11
  import { useSpring } from '@react-spring/core';
12
12
  import { animated } from '@react-spring/web';
13
13
  import { useGesture } from '@use-gesture/react';
14
14
  import 'whatwg-fetch';
15
+ import { getContrastingColor } from '@micromag/core/utils';
15
16
 
16
17
  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"};
17
18
 
@@ -22,8 +23,8 @@ var propTypes$1 = {
22
23
  sampleWidth: PropTypes.number,
23
24
  sampleMargin: PropTypes.number,
24
25
  minSampleHeight: PropTypes.number,
25
- backgroundColor: PropTypes.string,
26
- progressColor: PropTypes.string,
26
+ backgroundColor: PropTypes$1.color,
27
+ progressColor: PropTypes$1.color,
27
28
  audioLevels: PropTypes.arrayOf(PropTypes.number),
28
29
  className: PropTypes.string,
29
30
  onSeek: PropTypes.func,
@@ -38,7 +39,7 @@ var defaultProps$1 = {
38
39
  sampleMargin: 1,
39
40
  minSampleHeight: 2,
40
41
  backgroundColor: 'white',
41
- progressColor: 'lightblue',
42
+ progressColor: null,
42
43
  audioLevels: null,
43
44
  className: null,
44
45
  onSeek: null,
@@ -62,15 +63,25 @@ function AudioWave(_ref) {
62
63
  onReady = _ref.onReady;
63
64
  var canvasBackgroundRef = useRef(null);
64
65
  var canvasProgressRef = useRef(null);
66
+ var mainColor = useMemo(function () {
67
+ var _ref2 = backgroundColor || {},
68
+ _ref2$color = _ref2.color,
69
+ color = _ref2$color === void 0 ? 'white' : _ref2$color;
70
+
71
+ return color;
72
+ }, [backgroundColor]);
73
+ var alternateColor = useMemo(function () {
74
+ return getContrastingColor(backgroundColor, progressColor);
75
+ }, [progressColor, backgroundColor]);
65
76
 
66
77
  var _useResizeObserver = useResizeObserver(),
67
78
  elRef = _useResizeObserver.ref,
68
79
  elContentRect = _useResizeObserver.entry.contentRect;
69
80
 
70
- var _ref2 = elContentRect || {},
71
- _ref2$width = _ref2.width,
72
- elWidth = _ref2$width === void 0 ? null : _ref2$width,
73
- elHeight = _ref2.height; // Linear animation for progress bar
81
+ var _ref3 = elContentRect || {},
82
+ _ref3$width = _ref3.width,
83
+ elWidth = _ref3$width === void 0 ? null : _ref3$width,
84
+ elHeight = _ref3.height; // Linear animation for progress bar
74
85
 
75
86
 
76
87
  var _useSpring = useSpring(function () {
@@ -167,8 +178,8 @@ function AudioWave(_ref) {
167
178
  ctxProgress.scale(scale, scale);
168
179
  ctxBG.clearRect(0, 0, elWidth, elHeight);
169
180
  ctxProgress.clearRect(0, 0, elWidth, elHeight);
170
- ctxBG.fillStyle = backgroundColor;
171
- ctxProgress.fillStyle = progressColor;
181
+ ctxBG.fillStyle = mainColor;
182
+ ctxProgress.fillStyle = alternateColor;
172
183
  var offsetLeft = (elWidth - samplesCount * sampleOuterWidth) / 2;
173
184
  normalizedAmplitudes.forEach(function (amplitude, amplitudeI) {
174
185
  var sampleHeight = Math.max(minSampleHeight, amplitude * elHeight);
@@ -181,7 +192,7 @@ function AudioWave(_ref) {
181
192
  if (onReady !== null) {
182
193
  onReady();
183
194
  }
184
- }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, backgroundColor, progressColor, onReady]); // User events
195
+ }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
185
196
 
186
197
  var seekFromX = useCallback(function (x) {
187
198
  var elX = elRef.current.getBoundingClientRect().left;
@@ -196,11 +207,11 @@ function AudioWave(_ref) {
196
207
  }
197
208
  }, [duration, playing, onSeek, onResume]);
198
209
  var bind = useGesture({
199
- onDrag: function onDrag(_ref3) {
200
- var _ref3$xy = _slicedToArray(_ref3.xy, 1),
201
- x = _ref3$xy[0],
202
- elapsedTime = _ref3.elapsedTime,
203
- active = _ref3.active;
210
+ onDrag: function onDrag(_ref4) {
211
+ var _ref4$xy = _slicedToArray(_ref4.xy, 1),
212
+ x = _ref4$xy[0],
213
+ elapsedTime = _ref4.elapsedTime,
214
+ active = _ref4.active;
204
215
 
205
216
  if (!active && elapsedTime > 300) {
206
217
  return;
@@ -251,6 +262,7 @@ var propTypes = {
251
262
  sampleMargin: PropTypes.number,
252
263
  minSampleHeight: PropTypes.number
253
264
  }),
265
+ showWave: PropTypes.bool,
254
266
  reduceBufferFactor: PropTypes.number,
255
267
  className: PropTypes.string,
256
268
  onReady: PropTypes.func,
@@ -271,6 +283,7 @@ var defaultProps = {
271
283
  loop: false,
272
284
  waveFake: false,
273
285
  waveProps: null,
286
+ showWave: false,
274
287
  reduceBufferFactor: 100,
275
288
  className: null,
276
289
  onReady: null,
@@ -292,6 +305,7 @@ var Audio = function Audio(_ref) {
292
305
  loop = _ref.loop,
293
306
  waveFake = _ref.waveFake,
294
307
  waveProps = _ref.waveProps,
308
+ showWave = _ref.showWave,
295
309
  reduceBufferFactor = _ref.reduceBufferFactor,
296
310
  className = _ref.className,
297
311
  onReady = _ref.onReady,
@@ -439,7 +453,7 @@ var Audio = function Audio(_ref) {
439
453
  loop: loop,
440
454
  crossOrigin: "anonymous",
441
455
  preload: "none"
442
- }), /*#__PURE__*/React.createElement(AudioWave, Object.assign({
456
+ }), showWave ? /*#__PURE__*/React.createElement(AudioWave, Object.assign({
443
457
  className: styles.wave,
444
458
  media: media,
445
459
  currentTime: currentTime
@@ -449,7 +463,7 @@ var Audio = function Audio(_ref) {
449
463
  onSeek: seek,
450
464
  onResume: play,
451
465
  audioLevels: audioLevels
452
- })));
466
+ })) : null);
453
467
  };
454
468
 
455
469
  Audio.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -6,16 +6,17 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
6
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
7
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
8
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
9
- var core$1 = require('@micromag/core');
10
- var contexts = require('@micromag/core/contexts');
11
- var hooks = require('@micromag/core/hooks');
12
9
  var classNames = require('classnames');
13
10
  var PropTypes = require('prop-types');
14
11
  var React = require('react');
15
- var core = require('@react-spring/core');
12
+ var core = require('@micromag/core');
13
+ var contexts = require('@micromag/core/contexts');
14
+ var hooks = require('@micromag/core/hooks');
15
+ var core$1 = require('@react-spring/core');
16
16
  var web = require('@react-spring/web');
17
17
  var react = require('@use-gesture/react');
18
18
  require('whatwg-fetch');
19
+ var utils = require('@micromag/core/utils');
19
20
 
20
21
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
22
 
@@ -36,8 +37,8 @@ var propTypes$1 = {
36
37
  sampleWidth: PropTypes__default["default"].number,
37
38
  sampleMargin: PropTypes__default["default"].number,
38
39
  minSampleHeight: PropTypes__default["default"].number,
39
- backgroundColor: PropTypes__default["default"].string,
40
- progressColor: PropTypes__default["default"].string,
40
+ backgroundColor: core.PropTypes.color,
41
+ progressColor: core.PropTypes.color,
41
42
  audioLevels: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
42
43
  className: PropTypes__default["default"].string,
43
44
  onSeek: PropTypes__default["default"].func,
@@ -52,7 +53,7 @@ var defaultProps$1 = {
52
53
  sampleMargin: 1,
53
54
  minSampleHeight: 2,
54
55
  backgroundColor: 'white',
55
- progressColor: 'lightblue',
56
+ progressColor: null,
56
57
  audioLevels: null,
57
58
  className: null,
58
59
  onSeek: null,
@@ -76,18 +77,28 @@ function AudioWave(_ref) {
76
77
  onReady = _ref.onReady;
77
78
  var canvasBackgroundRef = React.useRef(null);
78
79
  var canvasProgressRef = React.useRef(null);
80
+ var mainColor = React.useMemo(function () {
81
+ var _ref2 = backgroundColor || {},
82
+ _ref2$color = _ref2.color,
83
+ color = _ref2$color === void 0 ? 'white' : _ref2$color;
84
+
85
+ return color;
86
+ }, [backgroundColor]);
87
+ var alternateColor = React.useMemo(function () {
88
+ return utils.getContrastingColor(backgroundColor, progressColor);
89
+ }, [progressColor, backgroundColor]);
79
90
 
80
91
  var _useResizeObserver = hooks.useResizeObserver(),
81
92
  elRef = _useResizeObserver.ref,
82
93
  elContentRect = _useResizeObserver.entry.contentRect;
83
94
 
84
- var _ref2 = elContentRect || {},
85
- _ref2$width = _ref2.width,
86
- elWidth = _ref2$width === void 0 ? null : _ref2$width,
87
- elHeight = _ref2.height; // Linear animation for progress bar
95
+ var _ref3 = elContentRect || {},
96
+ _ref3$width = _ref3.width,
97
+ elWidth = _ref3$width === void 0 ? null : _ref3$width,
98
+ elHeight = _ref3.height; // Linear animation for progress bar
88
99
 
89
100
 
90
- var _useSpring = core.useSpring(function () {
101
+ var _useSpring = core$1.useSpring(function () {
91
102
  return {
92
103
  x: 0,
93
104
  config: {
@@ -181,8 +192,8 @@ function AudioWave(_ref) {
181
192
  ctxProgress.scale(scale, scale);
182
193
  ctxBG.clearRect(0, 0, elWidth, elHeight);
183
194
  ctxProgress.clearRect(0, 0, elWidth, elHeight);
184
- ctxBG.fillStyle = backgroundColor;
185
- ctxProgress.fillStyle = progressColor;
195
+ ctxBG.fillStyle = mainColor;
196
+ ctxProgress.fillStyle = alternateColor;
186
197
  var offsetLeft = (elWidth - samplesCount * sampleOuterWidth) / 2;
187
198
  normalizedAmplitudes.forEach(function (amplitude, amplitudeI) {
188
199
  var sampleHeight = Math.max(minSampleHeight, amplitude * elHeight);
@@ -195,7 +206,7 @@ function AudioWave(_ref) {
195
206
  if (onReady !== null) {
196
207
  onReady();
197
208
  }
198
- }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, backgroundColor, progressColor, onReady]); // User events
209
+ }, [audioLevels, sampleWidth, sampleMargin, minSampleHeight, elWidth, elHeight, mainColor, alternateColor, onReady]); // User events
199
210
 
200
211
  var seekFromX = React.useCallback(function (x) {
201
212
  var elX = elRef.current.getBoundingClientRect().left;
@@ -210,11 +221,11 @@ function AudioWave(_ref) {
210
221
  }
211
222
  }, [duration, playing, onSeek, onResume]);
212
223
  var bind = react.useGesture({
213
- onDrag: function onDrag(_ref3) {
214
- var _ref3$xy = _slicedToArray__default["default"](_ref3.xy, 1),
215
- x = _ref3$xy[0],
216
- elapsedTime = _ref3.elapsedTime,
217
- active = _ref3.active;
224
+ onDrag: function onDrag(_ref4) {
225
+ var _ref4$xy = _slicedToArray__default["default"](_ref4.xy, 1),
226
+ x = _ref4$xy[0],
227
+ elapsedTime = _ref4.elapsedTime,
228
+ active = _ref4.active;
218
229
 
219
230
  if (!active && elapsedTime > 300) {
220
231
  return;
@@ -252,7 +263,7 @@ var styles = {"container":"micromag-element-audio-container","wave":"micromag-el
252
263
 
253
264
  var _excluded = ["ref"];
254
265
  var propTypes = {
255
- media: core$1.PropTypes.audioMedia,
266
+ media: core.PropTypes.audioMedia,
256
267
  apiRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
257
268
  current: PropTypes__default["default"].any
258
269
  })]),
@@ -265,6 +276,7 @@ var propTypes = {
265
276
  sampleMargin: PropTypes__default["default"].number,
266
277
  minSampleHeight: PropTypes__default["default"].number
267
278
  }),
279
+ showWave: PropTypes__default["default"].bool,
268
280
  reduceBufferFactor: PropTypes__default["default"].number,
269
281
  className: PropTypes__default["default"].string,
270
282
  onReady: PropTypes__default["default"].func,
@@ -285,6 +297,7 @@ var defaultProps = {
285
297
  loop: false,
286
298
  waveFake: false,
287
299
  waveProps: null,
300
+ showWave: false,
288
301
  reduceBufferFactor: 100,
289
302
  className: null,
290
303
  onReady: null,
@@ -306,6 +319,7 @@ var Audio = function Audio(_ref) {
306
319
  loop = _ref.loop,
307
320
  waveFake = _ref.waveFake,
308
321
  waveProps = _ref.waveProps,
322
+ showWave = _ref.showWave,
309
323
  reduceBufferFactor = _ref.reduceBufferFactor,
310
324
  className = _ref.className,
311
325
  onReady = _ref.onReady,
@@ -453,7 +467,7 @@ var Audio = function Audio(_ref) {
453
467
  loop: loop,
454
468
  crossOrigin: "anonymous",
455
469
  preload: "none"
456
- }), /*#__PURE__*/React__default["default"].createElement(AudioWave, Object.assign({
470
+ }), showWave ? /*#__PURE__*/React__default["default"].createElement(AudioWave, Object.assign({
457
471
  className: styles.wave,
458
472
  media: media,
459
473
  currentTime: currentTime
@@ -463,7 +477,7 @@ var Audio = function Audio(_ref) {
463
477
  onSeek: seek,
464
478
  onResume: play,
465
479
  audioLevels: audioLevels
466
- })));
480
+ })) : null);
467
481
  };
468
482
 
469
483
  Audio.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-audio",
3
- "version": "0.3.25",
3
+ "version": "0.3.30",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,20 +52,21 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.25",
56
- "@micromag/element-closed-captions": "^0.3.25",
57
- "@micromag/element-media-controls": "^0.3.25",
55
+ "@micromag/core": "^0.3.29",
56
+ "@micromag/element-closed-captions": "^0.3.29",
57
+ "@micromag/element-media-controls": "^0.3.29",
58
58
  "@react-spring/core": "^9.1.1",
59
59
  "@react-spring/web": "^9.1.1",
60
60
  "@use-gesture/react": "^10.2.4",
61
61
  "classnames": "^2.2.6",
62
62
  "prop-types": "^15.7.2",
63
63
  "react-intl": "^5.12.1",
64
+ "tinycolor2": "^1.4.2",
64
65
  "uuid": "^8.3.2",
65
66
  "whatwg-fetch": "^3.6.1"
66
67
  },
67
68
  "publishConfig": {
68
69
  "access": "public"
69
70
  },
70
- "gitHead": "5f08fe9d1373e802a08df9edd6842ac848bdc009"
71
+ "gitHead": "46bfc3c15f285a65b96d644a9f3eda4d3b1159e5"
71
72
  }