@micromag/screen-audio 0.3.27 → 0.3.31

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 +35 -14
  2. package/lib/index.js +40 -19
  3. package/package.json +11 -11
package/es/index.js CHANGED
@@ -2,21 +2,21 @@ import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
- import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
6
- import PropTypes from 'prop-types';
7
5
  import classNames from 'classnames';
6
+ import PropTypes from 'prop-types';
7
+ import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
8
8
  import { PropTypes as PropTypes$1 } from '@micromag/core';
9
- import { isIos } from '@micromag/core/utils';
9
+ import { ScreenElement, Transitions } from '@micromag/core/components';
10
10
  import { useScreenSize, useScreenRenderContext, useViewer } from '@micromag/core/contexts';
11
11
  import { useTrackScreenMedia, useLongPress } from '@micromag/core/hooks';
12
- import { ScreenElement, Transitions } from '@micromag/core/components';
12
+ import { isIos } from '@micromag/core/utils';
13
13
  import Audio from '@micromag/element-audio';
14
- import ClosedCaptions from '@micromag/element-closed-captions';
15
- import MediaControls from '@micromag/element-media-controls';
16
14
  import Background from '@micromag/element-background';
15
+ import CallToAction from '@micromag/element-call-to-action';
16
+ import ClosedCaptions from '@micromag/element-closed-captions';
17
17
  import Container from '@micromag/element-container';
18
18
  import Layout, { Spacer } from '@micromag/element-layout';
19
- import CallToAction from '@micromag/element-call-to-action';
19
+ import MediaControls from '@micromag/element-media-controls';
20
20
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
21
21
  import { Audio as Audio$1, Container as Container$1 } from '@micromag/transforms/apple-news';
22
22
 
@@ -32,6 +32,7 @@ var propTypes = {
32
32
  active: PropTypes.bool,
33
33
  transitions: PropTypes$1.transitions,
34
34
  getMediaRef: PropTypes.func,
35
+ showWave: PropTypes.bool,
35
36
  className: PropTypes.string
36
37
  };
37
38
  var defaultProps = {
@@ -44,6 +45,7 @@ var defaultProps = {
44
45
  active: true,
45
46
  transitions: null,
46
47
  getMediaRef: null,
48
+ showWave: false,
47
49
  className: null
48
50
  };
49
51
 
@@ -59,6 +61,7 @@ var AudioScreen = function AudioScreen(_ref) {
59
61
  active = _ref.active,
60
62
  transitions = _ref.transitions,
61
63
  getMediaRef = _ref.getMediaRef,
64
+ showWave = _ref.showWave,
62
65
  className = _ref.className;
63
66
  var trackScreenMedia = useTrackScreenMedia('audio');
64
67
 
@@ -99,7 +102,11 @@ var AudioScreen = function AudioScreen(_ref) {
99
102
  _ref2$closedCaptions = _ref2.closedCaptions,
100
103
  closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
101
104
  _ref2$withPlayPause = _ref2.withPlayPause,
102
- withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause;
105
+ withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
106
+ _ref2$color = _ref2.color,
107
+ color = _ref2$color === void 0 ? null : _ref2$color,
108
+ _ref2$progressColor = _ref2.progressColor,
109
+ progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
103
110
 
104
111
  var _ref3 = audioMedia || {},
105
112
  _ref3$url = _ref3.url,
@@ -120,6 +127,7 @@ var AudioScreen = function AudioScreen(_ref) {
120
127
  toggleMute = _ref4.toggleMute,
121
128
  play = _ref4.play,
122
129
  pause = _ref4.pause,
130
+ seek = _ref4.seek,
123
131
  _ref4$mediaRef = _ref4.mediaRef,
124
132
  apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
125
133
 
@@ -171,6 +179,10 @@ var AudioScreen = function AudioScreen(_ref) {
171
179
  setPlaying(false);
172
180
  trackScreenMedia(audio, midway ? 'pause' : 'ended');
173
181
  }, [trackScreenMedia, audio]);
182
+ var onSeek = useCallback(function (e) {
183
+ seek(e);
184
+ play();
185
+ }, [seek, play]);
174
186
  var onVolumeChanged = useCallback(function (isMuted) {
175
187
  setMuted(isMuted);
176
188
  trackScreenMedia(audio, isMuted ? 'mute' : 'unmute');
@@ -191,8 +203,7 @@ var AudioScreen = function AudioScreen(_ref) {
191
203
  if (!current && playing) {
192
204
  pause();
193
205
  }
194
- }, [playing, current]); // ------------------------------------
195
-
206
+ }, [playing, current]);
196
207
  var longPressBind = useLongPress({
197
208
  onLongPress: togglePlay
198
209
  });
@@ -220,8 +231,13 @@ var AudioScreen = function AudioScreen(_ref) {
220
231
  waveProps: isPreview ? {
221
232
  sampleWidth: 10,
222
233
  sampleMargin: 5,
223
- minSampleHeight: 5
224
- } : null,
234
+ minSampleHeight: 5,
235
+ backgroundColor: color,
236
+ progressColor: progressColor
237
+ } : {
238
+ backgroundColor: color,
239
+ progressColor: progressColor
240
+ },
225
241
  className: styles.audio,
226
242
  onReady: onAudioReady,
227
243
  onPlay: onPlay,
@@ -230,7 +246,8 @@ var AudioScreen = function AudioScreen(_ref) {
230
246
  onProgressStep: onProgressStep,
231
247
  onDurationChanged: onDurationChanged,
232
248
  onSeeked: onSeeked,
233
- onVolumeChanged: onVolumeChanged
249
+ onVolumeChanged: onVolumeChanged,
250
+ showWave: showWave
234
251
  })))), /*#__PURE__*/React.createElement(Spacer, {
235
252
  key: "spacer-middle"
236
253
  }), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
@@ -247,7 +264,11 @@ var AudioScreen = function AudioScreen(_ref) {
247
264
  muted: muted,
248
265
  onTogglePlay: togglePlay,
249
266
  onToggleMute: onToggleMute,
250
- focusable: current && isView
267
+ focusable: current && isView,
268
+ withSeekBar: !showWave,
269
+ duration: duration,
270
+ currentTime: currentTime,
271
+ onSeek: onSeek
251
272
  }) : null) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
252
273
  style: {
253
274
  margin: -spacing,
package/lib/index.js CHANGED
@@ -6,21 +6,21 @@ var reactIntl = require('react-intl');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
7
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
8
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
- var React = require('react');
10
- var PropTypes = require('prop-types');
11
9
  var classNames = require('classnames');
10
+ var PropTypes = require('prop-types');
11
+ var React = require('react');
12
12
  var core = require('@micromag/core');
13
- var utils = require('@micromag/core/utils');
13
+ var components = require('@micromag/core/components');
14
14
  var contexts = require('@micromag/core/contexts');
15
15
  var hooks = require('@micromag/core/hooks');
16
- var components = require('@micromag/core/components');
16
+ var utils = require('@micromag/core/utils');
17
17
  var Audio = require('@micromag/element-audio');
18
- var ClosedCaptions = require('@micromag/element-closed-captions');
19
- var MediaControls = require('@micromag/element-media-controls');
20
18
  var Background = require('@micromag/element-background');
19
+ var CallToAction = require('@micromag/element-call-to-action');
20
+ var ClosedCaptions = require('@micromag/element-closed-captions');
21
21
  var Container = require('@micromag/element-container');
22
22
  var Layout = require('@micromag/element-layout');
23
- var CallToAction = require('@micromag/element-call-to-action');
23
+ var MediaControls = require('@micromag/element-media-controls');
24
24
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
25
25
  var appleNews = require('@micromag/transforms/apple-news');
26
26
 
@@ -29,16 +29,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
29
29
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
30
30
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
31
31
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
32
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
33
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
34
32
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
33
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
34
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
35
35
  var Audio__default = /*#__PURE__*/_interopDefaultLegacy(Audio);
36
- var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
37
- var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
38
36
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
37
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
38
+ var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
39
39
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
40
40
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
41
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
41
+ var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
42
42
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
43
43
 
44
44
  var styles = {"container":"micromag-screen-audio-container","disabled":"micromag-screen-audio-disabled","hidden":"micromag-screen-audio-hidden","placeholder":"micromag-screen-audio-placeholder","content":"micromag-screen-audio-content","empty":"micromag-screen-audio-empty","mediaControls":"micromag-screen-audio-mediaControls","audio":"micromag-screen-audio-audio","bottomContent":"micromag-screen-audio-bottomContent","isPreview":"micromag-screen-audio-isPreview"};
@@ -53,6 +53,7 @@ var propTypes = {
53
53
  active: PropTypes__default["default"].bool,
54
54
  transitions: core.PropTypes.transitions,
55
55
  getMediaRef: PropTypes__default["default"].func,
56
+ showWave: PropTypes__default["default"].bool,
56
57
  className: PropTypes__default["default"].string
57
58
  };
58
59
  var defaultProps = {
@@ -65,6 +66,7 @@ var defaultProps = {
65
66
  active: true,
66
67
  transitions: null,
67
68
  getMediaRef: null,
69
+ showWave: false,
68
70
  className: null
69
71
  };
70
72
 
@@ -80,6 +82,7 @@ var AudioScreen = function AudioScreen(_ref) {
80
82
  active = _ref.active,
81
83
  transitions = _ref.transitions,
82
84
  getMediaRef = _ref.getMediaRef,
85
+ showWave = _ref.showWave,
83
86
  className = _ref.className;
84
87
  var trackScreenMedia = hooks.useTrackScreenMedia('audio');
85
88
 
@@ -120,7 +123,11 @@ var AudioScreen = function AudioScreen(_ref) {
120
123
  _ref2$closedCaptions = _ref2.closedCaptions,
121
124
  closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
122
125
  _ref2$withPlayPause = _ref2.withPlayPause,
123
- withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause;
126
+ withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
127
+ _ref2$color = _ref2.color,
128
+ color = _ref2$color === void 0 ? null : _ref2$color,
129
+ _ref2$progressColor = _ref2.progressColor,
130
+ progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
124
131
 
125
132
  var _ref3 = audioMedia || {},
126
133
  _ref3$url = _ref3.url,
@@ -141,6 +148,7 @@ var AudioScreen = function AudioScreen(_ref) {
141
148
  toggleMute = _ref4.toggleMute,
142
149
  play = _ref4.play,
143
150
  pause = _ref4.pause,
151
+ seek = _ref4.seek,
144
152
  _ref4$mediaRef = _ref4.mediaRef,
145
153
  apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
146
154
 
@@ -192,6 +200,10 @@ var AudioScreen = function AudioScreen(_ref) {
192
200
  setPlaying(false);
193
201
  trackScreenMedia(audio, midway ? 'pause' : 'ended');
194
202
  }, [trackScreenMedia, audio]);
203
+ var onSeek = React.useCallback(function (e) {
204
+ seek(e);
205
+ play();
206
+ }, [seek, play]);
195
207
  var onVolumeChanged = React.useCallback(function (isMuted) {
196
208
  setMuted(isMuted);
197
209
  trackScreenMedia(audio, isMuted ? 'mute' : 'unmute');
@@ -212,8 +224,7 @@ var AudioScreen = function AudioScreen(_ref) {
212
224
  if (!current && playing) {
213
225
  pause();
214
226
  }
215
- }, [playing, current]); // ------------------------------------
216
-
227
+ }, [playing, current]);
217
228
  var longPressBind = hooks.useLongPress({
218
229
  onLongPress: togglePlay
219
230
  });
@@ -241,8 +252,13 @@ var AudioScreen = function AudioScreen(_ref) {
241
252
  waveProps: isPreview ? {
242
253
  sampleWidth: 10,
243
254
  sampleMargin: 5,
244
- minSampleHeight: 5
245
- } : null,
255
+ minSampleHeight: 5,
256
+ backgroundColor: color,
257
+ progressColor: progressColor
258
+ } : {
259
+ backgroundColor: color,
260
+ progressColor: progressColor
261
+ },
246
262
  className: styles.audio,
247
263
  onReady: onAudioReady,
248
264
  onPlay: onPlay,
@@ -251,7 +267,8 @@ var AudioScreen = function AudioScreen(_ref) {
251
267
  onProgressStep: onProgressStep,
252
268
  onDurationChanged: onDurationChanged,
253
269
  onSeeked: onSeeked,
254
- onVolumeChanged: onVolumeChanged
270
+ onVolumeChanged: onVolumeChanged,
271
+ showWave: showWave
255
272
  })))), /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
256
273
  key: "spacer-middle"
257
274
  }), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -268,7 +285,11 @@ var AudioScreen = function AudioScreen(_ref) {
268
285
  muted: muted,
269
286
  onTogglePlay: togglePlay,
270
287
  onToggleMute: onToggleMute,
271
- focusable: current && isView
288
+ focusable: current && isView,
289
+ withSeekBar: !showWave,
290
+ duration: duration,
291
+ currentTime: currentTime,
292
+ onSeek: onSeek
272
293
  }) : null) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
273
294
  style: {
274
295
  margin: -spacing,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-audio",
3
- "version": "0.3.27",
3
+ "version": "0.3.31",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,15 +49,15 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.27",
53
- "@micromag/element-audio": "^0.3.27",
54
- "@micromag/element-background": "^0.3.27",
55
- "@micromag/element-call-to-action": "^0.3.27",
56
- "@micromag/element-closed-captions": "^0.3.27",
57
- "@micromag/element-container": "^0.3.27",
58
- "@micromag/element-layout": "^0.3.27",
59
- "@micromag/element-media-controls": "^0.3.27",
60
- "@micromag/transforms": "^0.3.27",
52
+ "@micromag/core": "^0.3.29",
53
+ "@micromag/element-audio": "^0.3.30",
54
+ "@micromag/element-background": "^0.3.31",
55
+ "@micromag/element-call-to-action": "^0.3.29",
56
+ "@micromag/element-closed-captions": "^0.3.29",
57
+ "@micromag/element-container": "^0.3.29",
58
+ "@micromag/element-layout": "^0.3.29",
59
+ "@micromag/element-media-controls": "^0.3.31",
60
+ "@micromag/transforms": "^0.3.29",
61
61
  "classnames": "^2.2.6",
62
62
  "lodash": "^4.17.21",
63
63
  "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "18798c7cbbab4d9a702e7070950394f05c1170cb"
70
+ "gitHead": "cff56eaea0fa5635c4cc3196835fa99eb7a5ec82"
71
71
  }