@micromag/screen-video 0.3.135 → 0.3.139
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 +24 -34
- package/lib/index.js +24 -34
- package/package.json +11 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-video-container .micromag-screen-video-showControlsButton,.micromag-screen-video-
|
|
1
|
+
.micromag-screen-video-container .micromag-screen-video-showControlsButton,.micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-callToAction{padding-bottom:5px}.micromag-screen-video-container .micromag-screen-video-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-video-container .micromag-screen-video-bottom.micromag-screen-video-withGradient{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-video-container .micromag-screen-video-controls{position:relative}.micromag-screen-video-container .micromag-screen-video-mediaControls{position:relative;z-index:1;padding:10px 20px 20px;-webkit-transition:z-index .15s linear,opacity .15s linear;-o-transition:z-index .15s linear,opacity .15s linear;transition:z-index .15s linear,opacity .15s linear;opacity:0}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{z-index:3;opacity:1}.micromag-screen-video-container .micromag-screen-video-showControlsButton{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;right:0;bottom:0;left:0;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:.2;background-color:#a13dff}.micromag-screen-video-bottomSeekBar{-webkit-transition:-webkit-transform .5s ease-out .5s;transition:-webkit-transform .5s ease-out .5s;-o-transition:transform .5s ease-out .5s;transition:transform .5s ease-out .5s;transition:transform .5s ease-out .5s, -webkit-transform .5s ease-out .5s}.micromag-screen-video-bottomSeekBar.micromag-screen-video-isHidden{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}
|
package/es/index.js
CHANGED
|
@@ -117,6 +117,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
117
117
|
seek = _ref3.seek,
|
|
118
118
|
play = _ref3.play,
|
|
119
119
|
pause = _ref3.pause,
|
|
120
|
+
suspended = _ref3.suspended,
|
|
120
121
|
_ref3$mediaRef = _ref3.mediaRef,
|
|
121
122
|
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
122
123
|
|
|
@@ -130,33 +131,28 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
130
131
|
var _useState = useState(false),
|
|
131
132
|
_useState2 = _slicedToArray(_useState, 2),
|
|
132
133
|
showMediaControls = _useState2[0],
|
|
133
|
-
setShowMediaControls = _useState2[1];
|
|
134
|
+
setShowMediaControls = _useState2[1]; // Get api state updates from callback
|
|
134
135
|
|
|
135
|
-
var _useState3 = useState(false),
|
|
136
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
137
|
-
shouldCatchFirstTapToPlay = _useState4[0],
|
|
138
|
-
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
139
136
|
|
|
137
|
+
var _useState3 = useState(null),
|
|
138
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
139
|
+
currentTime = _useState4[0],
|
|
140
|
+
setCurrentTime = _useState4[1];
|
|
140
141
|
|
|
141
142
|
var _useState5 = useState(null),
|
|
142
143
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
143
|
-
|
|
144
|
-
|
|
144
|
+
duration = _useState6[0],
|
|
145
|
+
setDuration = _useState6[1];
|
|
145
146
|
|
|
146
|
-
var _useState7 = useState(
|
|
147
|
+
var _useState7 = useState(false),
|
|
147
148
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
148
|
-
|
|
149
|
-
|
|
149
|
+
playing = _useState8[0],
|
|
150
|
+
setPlaying = _useState8[1];
|
|
150
151
|
|
|
151
152
|
var _useState9 = useState(false),
|
|
152
153
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
var _useState11 = useState(false),
|
|
157
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
158
|
-
muted = _useState12[0],
|
|
159
|
-
setMuted = _useState12[1];
|
|
154
|
+
muted = _useState10[0],
|
|
155
|
+
setMuted = _useState10[1];
|
|
160
156
|
|
|
161
157
|
var onTimeUpdate = useCallback(function (time) {
|
|
162
158
|
setCurrentTime(time);
|
|
@@ -240,10 +236,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
240
236
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
241
237
|
var hasVideo = video !== null;
|
|
242
238
|
|
|
243
|
-
var
|
|
244
|
-
|
|
245
|
-
ready =
|
|
246
|
-
setReady =
|
|
239
|
+
var _useState11 = useState(hasVideo),
|
|
240
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
241
|
+
ready = _useState12[0],
|
|
242
|
+
setReady = _useState12[1]; // useState(!hasVideo);
|
|
247
243
|
|
|
248
244
|
|
|
249
245
|
var transitionPlaying = current && ready;
|
|
@@ -289,13 +285,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
289
285
|
var onVideoReady = useCallback(function () {
|
|
290
286
|
setReady(true);
|
|
291
287
|
}, [setReady]);
|
|
292
|
-
var onSuspended = useCallback(function () {
|
|
293
|
-
if (autoPlay) {
|
|
294
|
-
setShouldCatchFirstTapToPlay(true);
|
|
295
|
-
}
|
|
296
|
-
}, [setShouldCatchFirstTapToPlay]);
|
|
297
288
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
298
|
-
var items = [/*#__PURE__*/React.createElement(
|
|
289
|
+
var items = [autoPlay && suspended && !withControls ? /*#__PURE__*/React.createElement("button", {
|
|
290
|
+
key: "tap-catcher-button",
|
|
291
|
+
type: "button",
|
|
292
|
+
onTouchStart: play,
|
|
293
|
+
className: styles.unmuteAndPlayButton
|
|
294
|
+
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
299
295
|
key: "video",
|
|
300
296
|
placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
|
|
301
297
|
className: styles.placeholder
|
|
@@ -344,16 +340,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
344
340
|
onDurationChanged: onDurationChanged,
|
|
345
341
|
onSeeked: onSeeked,
|
|
346
342
|
onEnded: onEnded,
|
|
347
|
-
onSuspended: onSuspended,
|
|
348
343
|
onVolumeChanged: onVolumeChanged,
|
|
349
344
|
focusable: current && isView,
|
|
350
345
|
shouldLoad: mediaShouldLoad
|
|
351
|
-
}))) : null),
|
|
352
|
-
key: "tap-catcher-button",
|
|
353
|
-
type: "button",
|
|
354
|
-
onTouchStart: play,
|
|
355
|
-
className: styles.unmuteAndPlayButton
|
|
356
|
-
}) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
346
|
+
}))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
357
347
|
key: "bottom-content",
|
|
358
348
|
className: styles.bottomContent
|
|
359
349
|
}, /*#__PURE__*/React.createElement(Transitions, {
|
package/lib/index.js
CHANGED
|
@@ -138,6 +138,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
138
138
|
seek = _ref3.seek,
|
|
139
139
|
play = _ref3.play,
|
|
140
140
|
pause = _ref3.pause,
|
|
141
|
+
suspended = _ref3.suspended,
|
|
141
142
|
_ref3$mediaRef = _ref3.mediaRef,
|
|
142
143
|
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
143
144
|
|
|
@@ -151,33 +152,28 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
151
152
|
var _useState = React.useState(false),
|
|
152
153
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
153
154
|
showMediaControls = _useState2[0],
|
|
154
|
-
setShowMediaControls = _useState2[1];
|
|
155
|
+
setShowMediaControls = _useState2[1]; // Get api state updates from callback
|
|
155
156
|
|
|
156
|
-
var _useState3 = React.useState(false),
|
|
157
|
-
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
158
|
-
shouldCatchFirstTapToPlay = _useState4[0],
|
|
159
|
-
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
160
157
|
|
|
158
|
+
var _useState3 = React.useState(null),
|
|
159
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
160
|
+
currentTime = _useState4[0],
|
|
161
|
+
setCurrentTime = _useState4[1];
|
|
161
162
|
|
|
162
163
|
var _useState5 = React.useState(null),
|
|
163
164
|
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
164
|
-
|
|
165
|
-
|
|
165
|
+
duration = _useState6[0],
|
|
166
|
+
setDuration = _useState6[1];
|
|
166
167
|
|
|
167
|
-
var _useState7 = React.useState(
|
|
168
|
+
var _useState7 = React.useState(false),
|
|
168
169
|
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
169
|
-
|
|
170
|
-
|
|
170
|
+
playing = _useState8[0],
|
|
171
|
+
setPlaying = _useState8[1];
|
|
171
172
|
|
|
172
173
|
var _useState9 = React.useState(false),
|
|
173
174
|
_useState10 = _slicedToArray__default["default"](_useState9, 2),
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
var _useState11 = React.useState(false),
|
|
178
|
-
_useState12 = _slicedToArray__default["default"](_useState11, 2),
|
|
179
|
-
muted = _useState12[0],
|
|
180
|
-
setMuted = _useState12[1];
|
|
175
|
+
muted = _useState10[0],
|
|
176
|
+
setMuted = _useState10[1];
|
|
181
177
|
|
|
182
178
|
var onTimeUpdate = React.useCallback(function (time) {
|
|
183
179
|
setCurrentTime(time);
|
|
@@ -261,10 +257,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
261
257
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
262
258
|
var hasVideo = video !== null;
|
|
263
259
|
|
|
264
|
-
var
|
|
265
|
-
|
|
266
|
-
ready =
|
|
267
|
-
setReady =
|
|
260
|
+
var _useState11 = React.useState(hasVideo),
|
|
261
|
+
_useState12 = _slicedToArray__default["default"](_useState11, 2),
|
|
262
|
+
ready = _useState12[0],
|
|
263
|
+
setReady = _useState12[1]; // useState(!hasVideo);
|
|
268
264
|
|
|
269
265
|
|
|
270
266
|
var transitionPlaying = current && ready;
|
|
@@ -310,13 +306,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
310
306
|
var onVideoReady = React.useCallback(function () {
|
|
311
307
|
setReady(true);
|
|
312
308
|
}, [setReady]);
|
|
313
|
-
var onSuspended = React.useCallback(function () {
|
|
314
|
-
if (autoPlay) {
|
|
315
|
-
setShouldCatchFirstTapToPlay(true);
|
|
316
|
-
}
|
|
317
|
-
}, [setShouldCatchFirstTapToPlay]);
|
|
318
309
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
319
|
-
var items = [/*#__PURE__*/React__default["default"].createElement(
|
|
310
|
+
var items = [autoPlay && suspended && !withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
311
|
+
key: "tap-catcher-button",
|
|
312
|
+
type: "button",
|
|
313
|
+
onTouchStart: play,
|
|
314
|
+
className: styles.unmuteAndPlayButton
|
|
315
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
320
316
|
key: "video",
|
|
321
317
|
placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
|
|
322
318
|
className: styles.placeholder
|
|
@@ -365,16 +361,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
365
361
|
onDurationChanged: onDurationChanged,
|
|
366
362
|
onSeeked: onSeeked,
|
|
367
363
|
onEnded: onEnded,
|
|
368
|
-
onSuspended: onSuspended,
|
|
369
364
|
onVolumeChanged: onVolumeChanged,
|
|
370
365
|
focusable: current && isView,
|
|
371
366
|
shouldLoad: mediaShouldLoad
|
|
372
|
-
}))) : null),
|
|
373
|
-
key: "tap-catcher-button",
|
|
374
|
-
type: "button",
|
|
375
|
-
onTouchStart: play,
|
|
376
|
-
className: styles.unmuteAndPlayButton
|
|
377
|
-
}) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
367
|
+
}))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
378
368
|
key: "bottom-content",
|
|
379
369
|
className: styles.bottomContent
|
|
380
370
|
}, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-video",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.139",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -50,15 +50,15 @@
|
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
52
|
"@folklore/size": "^0.1.20",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
55
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
56
|
-
"@micromag/element-closed-captions": "^0.3.
|
|
57
|
-
"@micromag/element-container": "^0.3.
|
|
58
|
-
"@micromag/element-image": "^0.3.
|
|
59
|
-
"@micromag/element-media-controls": "^0.3.
|
|
60
|
-
"@micromag/element-video": "^0.3.
|
|
61
|
-
"@micromag/transforms": "^0.3.
|
|
53
|
+
"@micromag/core": "^0.3.138",
|
|
54
|
+
"@micromag/element-background": "^0.3.139",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.138",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.138",
|
|
57
|
+
"@micromag/element-container": "^0.3.138",
|
|
58
|
+
"@micromag/element-image": "^0.3.138",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.138",
|
|
60
|
+
"@micromag/element-video": "^0.3.139",
|
|
61
|
+
"@micromag/transforms": "^0.3.138",
|
|
62
62
|
"classnames": "^2.2.6",
|
|
63
63
|
"lodash": "^4.17.21",
|
|
64
64
|
"prop-types": "^15.7.2",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "15fcfa8f15961b6f2928425c672a0cac50c97d4f"
|
|
72
72
|
}
|