@micromag/screen-audio 0.3.423 → 0.3.429
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.
- package/assets/css/styles.css +1 -1
- package/es/index.js +1 -2
- package/lib/index.js +29 -47
- package/package.json +19 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-audio-container .micromag-screen-audio-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-audio-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-audio-disabled.micromag-screen-audio-container{overflow:hidden;pointer-events:none}.micromag-screen-audio-hidden.micromag-screen-audio-container{display:none;visibility:hidden}.micromag-screen-audio-placeholder.micromag-screen-audio-container .micromag-screen-audio-content{padding:6px;position:relative}.micromag-screen-audio-container .micromag-screen-audio-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-audio-container .micromag-screen-audio-background{z-index:0}.micromag-screen-audio-container .micromag-screen-audio-content{z-index:1}.micromag-screen-audio-container .micromag-screen-audio-audio{bottom:50%;left:0;position:absolute;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);width:100%}.micromag-screen-audio-container .micromag-screen-audio-bottom{bottom:0;left:0;position:absolute;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out
|
|
1
|
+
.micromag-screen-audio-container .micromag-screen-audio-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-audio-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-audio-disabled.micromag-screen-audio-container{overflow:hidden;pointer-events:none}.micromag-screen-audio-hidden.micromag-screen-audio-container{display:none;visibility:hidden}.micromag-screen-audio-placeholder.micromag-screen-audio-container .micromag-screen-audio-content{padding:6px;position:relative}.micromag-screen-audio-container .micromag-screen-audio-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-audio-container .micromag-screen-audio-background{z-index:0}.micromag-screen-audio-container .micromag-screen-audio-content{z-index:1}.micromag-screen-audio-container .micromag-screen-audio-audio{bottom:50%;left:0;position:absolute;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);width:100%}.micromag-screen-audio-container .micromag-screen-audio-bottom{bottom:0;left:0;position:absolute;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out;width:100%}.micromag-screen-audio-container .micromag-screen-audio-bottom>*{margin-bottom:10px}.micromag-screen-audio-container .micromag-screen-audio-bottom>:last-child{margin-bottom:0}.micromag-screen-audio-container .micromag-screen-audio-empty{height:100px;margin:0 auto;width:100%}.micromag-screen-audio-container.micromag-screen-audio-isPreview{pointer-events:none}
|
package/es/index.js
CHANGED
|
@@ -49,7 +49,6 @@ var defaultProps = {
|
|
|
49
49
|
className: null
|
|
50
50
|
};
|
|
51
51
|
var AudioScreen = function AudioScreen(_ref) {
|
|
52
|
-
var _ref7;
|
|
53
52
|
_ref.layout;
|
|
54
53
|
var audio = _ref.audio,
|
|
55
54
|
spacing = _ref.spacing,
|
|
@@ -203,7 +202,7 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
203
202
|
}
|
|
204
203
|
}, [trackScreenMedia, audio]);
|
|
205
204
|
return /*#__PURE__*/React.createElement("div", {
|
|
206
|
-
className: classNames([styles.container, (
|
|
205
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.placeholder, isPlaceholder), styles.isPreview, isPreview)]),
|
|
207
206
|
"data-screen-ready": ready
|
|
208
207
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
209
208
|
width: width,
|
package/lib/index.js
CHANGED
|
@@ -24,37 +24,20 @@ var Layout = require('@micromag/element-layout');
|
|
|
24
24
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
25
25
|
var appleNews = require('@micromag/transforms/apple-news');
|
|
26
26
|
|
|
27
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
28
|
-
|
|
29
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
30
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
31
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
32
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
33
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
34
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
35
|
-
var Audio__default = /*#__PURE__*/_interopDefaultLegacy(Audio);
|
|
36
|
-
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
37
|
-
var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
|
|
38
|
-
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
39
|
-
var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
|
|
40
|
-
var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
|
|
41
|
-
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
42
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
43
|
-
|
|
44
27
|
var styles = {"container":"micromag-screen-audio-container","background":"micromag-screen-audio-background","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","audio":"micromag-screen-audio-audio","bottom":"micromag-screen-audio-bottom","isPreview":"micromag-screen-audio-isPreview"};
|
|
45
28
|
|
|
46
29
|
var propTypes = {
|
|
47
|
-
layout:
|
|
30
|
+
layout: PropTypes.oneOf(['middle']),
|
|
48
31
|
audio: core.PropTypes.audioElement,
|
|
49
|
-
spacing:
|
|
32
|
+
spacing: PropTypes.number,
|
|
50
33
|
background: core.PropTypes.backgroundElement,
|
|
51
34
|
header: core.PropTypes.header,
|
|
52
35
|
footer: core.PropTypes.footer,
|
|
53
|
-
current:
|
|
54
|
-
active:
|
|
55
|
-
mediaRef:
|
|
56
|
-
showWave:
|
|
57
|
-
className:
|
|
36
|
+
current: PropTypes.bool,
|
|
37
|
+
active: PropTypes.bool,
|
|
38
|
+
mediaRef: PropTypes.func,
|
|
39
|
+
showWave: PropTypes.bool,
|
|
40
|
+
className: PropTypes.string
|
|
58
41
|
};
|
|
59
42
|
var defaultProps = {
|
|
60
43
|
layout: 'middle',
|
|
@@ -70,7 +53,6 @@ var defaultProps = {
|
|
|
70
53
|
className: null
|
|
71
54
|
};
|
|
72
55
|
var AudioScreen = function AudioScreen(_ref) {
|
|
73
|
-
var _ref7;
|
|
74
56
|
_ref.layout;
|
|
75
57
|
var audio = _ref.audio,
|
|
76
58
|
spacing = _ref.spacing,
|
|
@@ -101,7 +83,7 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
101
83
|
openWebView = _useViewerWebView.open;
|
|
102
84
|
var trackScreenMedia = hooks.useTrackScreenMedia('audio');
|
|
103
85
|
var _useState = React.useState(isStatic || isPlaceholder),
|
|
104
|
-
_useState2 =
|
|
86
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
105
87
|
ready = _useState2[0],
|
|
106
88
|
setReady = _useState2[1];
|
|
107
89
|
var backgroundPlaying = current && (isView || isEdit);
|
|
@@ -139,7 +121,7 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
139
121
|
_ref3$url = _ref3.url,
|
|
140
122
|
audioUrl = _ref3$url === void 0 ? null : _ref3$url;
|
|
141
123
|
var hasAudioUrl = audioUrl !== null;
|
|
142
|
-
var finalAudio = hasAudio ?
|
|
124
|
+
var finalAudio = hasAudio ? _objectSpread(_objectSpread({}, audio), {}, {
|
|
143
125
|
autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
|
|
144
126
|
}) : null;
|
|
145
127
|
var hasClosedCaptions = closedCaptions !== null;
|
|
@@ -179,11 +161,11 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
179
161
|
setReady(true);
|
|
180
162
|
}, [setReady]);
|
|
181
163
|
var _useState3 = React.useState(null),
|
|
182
|
-
_useState4 =
|
|
164
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
183
165
|
currentTime = _useState4[0],
|
|
184
166
|
setCurrentTime = _useState4[1];
|
|
185
167
|
var _useState5 = React.useState(null),
|
|
186
|
-
_useState6 =
|
|
168
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
187
169
|
duration = _useState6[0],
|
|
188
170
|
setDuration = _useState6[1];
|
|
189
171
|
var isIOS = React.useMemo(function () {
|
|
@@ -223,25 +205,25 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
223
205
|
trackScreenMedia(audio, 'seek');
|
|
224
206
|
}
|
|
225
207
|
}, [trackScreenMedia, audio]);
|
|
226
|
-
return /*#__PURE__*/
|
|
227
|
-
className:
|
|
208
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
209
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.placeholder, isPlaceholder), styles.isPreview, isPreview)]),
|
|
228
210
|
"data-screen-ready": ready
|
|
229
|
-
}, /*#__PURE__*/
|
|
211
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
230
212
|
width: width,
|
|
231
213
|
height: height,
|
|
232
214
|
className: styles.content
|
|
233
|
-
}, /*#__PURE__*/
|
|
215
|
+
}, /*#__PURE__*/React.createElement(Layout, {
|
|
234
216
|
fullscreen: true,
|
|
235
217
|
style: !isPlaceholder ? {
|
|
236
218
|
padding: spacing,
|
|
237
219
|
paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing)
|
|
238
220
|
} : null
|
|
239
|
-
}, hasHeader ? /*#__PURE__*/
|
|
221
|
+
}, hasHeader ? /*#__PURE__*/React.createElement(Header, header) : /*#__PURE__*/React.createElement(Layout.Spacer, {
|
|
240
222
|
key: "spacer-top"
|
|
241
|
-
}), /*#__PURE__*/
|
|
223
|
+
}), /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
242
224
|
key: "audio",
|
|
243
225
|
placeholder: "audio",
|
|
244
|
-
emptyLabel: /*#__PURE__*/
|
|
226
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
245
227
|
id: "MYZwSA",
|
|
246
228
|
defaultMessage: [{
|
|
247
229
|
"type": 0,
|
|
@@ -250,7 +232,7 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
250
232
|
}),
|
|
251
233
|
emptyClassName: styles.empty,
|
|
252
234
|
isEmpty: !hasAudioUrl
|
|
253
|
-
}, /*#__PURE__*/
|
|
235
|
+
}, /*#__PURE__*/React.createElement(Audio, Object.assign({}, finalAudio, {
|
|
254
236
|
mediaRef: mediaRef,
|
|
255
237
|
waveFake: isIOS || isPreview,
|
|
256
238
|
waveProps: isPreview ? {
|
|
@@ -275,9 +257,9 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
275
257
|
onSeeked: onSeeked,
|
|
276
258
|
onEnded: onEnded,
|
|
277
259
|
withWave: showWave && withWave
|
|
278
|
-
}))), /*#__PURE__*/
|
|
260
|
+
}))), /*#__PURE__*/React.createElement(Layout.Spacer, {
|
|
279
261
|
key: "spacer-middle"
|
|
280
|
-
}), !isPlaceholder ? /*#__PURE__*/
|
|
262
|
+
}), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
281
263
|
key: "bottom",
|
|
282
264
|
className: styles.bottom,
|
|
283
265
|
style: {
|
|
@@ -287,13 +269,13 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
287
269
|
paddingBottom: spacing / 2,
|
|
288
270
|
paddingTop: 0
|
|
289
271
|
}
|
|
290
|
-
}, hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/
|
|
272
|
+
}, hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, {
|
|
291
273
|
className: styles.closedCaptions,
|
|
292
274
|
media: closedCaptions,
|
|
293
275
|
currentTime: currentTime
|
|
294
|
-
}) : null, hasFooter ? /*#__PURE__*/
|
|
276
|
+
}) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, Object.assign({}, footerProps, {
|
|
295
277
|
className: styles.callToAction
|
|
296
|
-
})) : null) : null)), !isPlaceholder ? /*#__PURE__*/
|
|
278
|
+
})) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
297
279
|
background: background,
|
|
298
280
|
width: width,
|
|
299
281
|
height: height,
|
|
@@ -306,7 +288,7 @@ var AudioScreen = function AudioScreen(_ref) {
|
|
|
306
288
|
};
|
|
307
289
|
AudioScreen.propTypes = propTypes;
|
|
308
290
|
AudioScreen.defaultProps = defaultProps;
|
|
309
|
-
var AudioScreen$1 = /*#__PURE__*/
|
|
291
|
+
var AudioScreen$1 = /*#__PURE__*/React.memo(AudioScreen);
|
|
310
292
|
|
|
311
293
|
var transform = function transform(newStory, _ref) {
|
|
312
294
|
var audio = _ref.audio;
|
|
@@ -317,11 +299,11 @@ var transform = function transform(newStory, _ref) {
|
|
|
317
299
|
titleStory = _Audio.story,
|
|
318
300
|
titleComponent = _Audio.component;
|
|
319
301
|
// console.log(media);
|
|
320
|
-
var _Container = appleNews.Container(titleStory,
|
|
302
|
+
var _Container = appleNews.Container(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
|
|
321
303
|
containerStory = _Container.story,
|
|
322
304
|
containerComponent = _Container.component;
|
|
323
|
-
return
|
|
324
|
-
components: [].concat(
|
|
305
|
+
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
306
|
+
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
325
307
|
});
|
|
326
308
|
};
|
|
327
309
|
|
|
@@ -421,4 +403,4 @@ var definition = {
|
|
|
421
403
|
};
|
|
422
404
|
|
|
423
405
|
exports.AudioScreen = AudioScreen$1;
|
|
424
|
-
exports
|
|
406
|
+
exports.default = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-audio",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.429",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"main": "lib/index.js",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "assets/css/styles.css",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"require": "./lib/index.js",
|
|
39
|
+
"import": "./es/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./assets/css/*.css": "./assets/css/*.css"
|
|
42
|
+
},
|
|
35
43
|
"files": [
|
|
36
44
|
"lib",
|
|
37
45
|
"es",
|
|
@@ -50,15 +58,15 @@
|
|
|
50
58
|
},
|
|
51
59
|
"dependencies": {
|
|
52
60
|
"@babel/runtime": "^7.13.10",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/element-audio": "^0.3.
|
|
55
|
-
"@micromag/element-background": "^0.3.
|
|
56
|
-
"@micromag/element-closed-captions": "^0.3.
|
|
57
|
-
"@micromag/element-container": "^0.3.
|
|
58
|
-
"@micromag/element-footer": "^0.3.
|
|
59
|
-
"@micromag/element-header": "^0.3.
|
|
60
|
-
"@micromag/element-layout": "^0.3.
|
|
61
|
-
"@micromag/transforms": "^0.3.
|
|
61
|
+
"@micromag/core": "^0.3.429",
|
|
62
|
+
"@micromag/element-audio": "^0.3.429",
|
|
63
|
+
"@micromag/element-background": "^0.3.429",
|
|
64
|
+
"@micromag/element-closed-captions": "^0.3.429",
|
|
65
|
+
"@micromag/element-container": "^0.3.429",
|
|
66
|
+
"@micromag/element-footer": "^0.3.429",
|
|
67
|
+
"@micromag/element-header": "^0.3.429",
|
|
68
|
+
"@micromag/element-layout": "^0.3.429",
|
|
69
|
+
"@micromag/transforms": "^0.3.429",
|
|
62
70
|
"classnames": "^2.2.6",
|
|
63
71
|
"lodash": "^4.17.21",
|
|
64
72
|
"prop-types": "^15.7.2",
|
|
@@ -69,5 +77,5 @@
|
|
|
69
77
|
"access": "public",
|
|
70
78
|
"registry": "https://registry.npmjs.org/"
|
|
71
79
|
},
|
|
72
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
|
|
73
81
|
}
|