@micromag/screen-video 0.3.137 → 0.3.140
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 +20 -37
- package/lib/index.js +20 -37
- 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
|
@@ -131,33 +131,28 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
131
131
|
var _useState = useState(false),
|
|
132
132
|
_useState2 = _slicedToArray(_useState, 2),
|
|
133
133
|
showMediaControls = _useState2[0],
|
|
134
|
-
setShowMediaControls = _useState2[1];
|
|
134
|
+
setShowMediaControls = _useState2[1]; // Get api state updates from callback
|
|
135
135
|
|
|
136
|
-
var _useState3 = useState(false),
|
|
137
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
138
|
-
shouldCatchFirstTapToPlay = _useState4[0],
|
|
139
|
-
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
140
136
|
|
|
137
|
+
var _useState3 = useState(null),
|
|
138
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
139
|
+
currentTime = _useState4[0],
|
|
140
|
+
setCurrentTime = _useState4[1];
|
|
141
141
|
|
|
142
142
|
var _useState5 = useState(null),
|
|
143
143
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
duration = _useState6[0],
|
|
145
|
+
setDuration = _useState6[1];
|
|
146
146
|
|
|
147
|
-
var _useState7 = useState(
|
|
147
|
+
var _useState7 = useState(false),
|
|
148
148
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
playing = _useState8[0],
|
|
150
|
+
setPlaying = _useState8[1];
|
|
151
151
|
|
|
152
152
|
var _useState9 = useState(false),
|
|
153
153
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
var _useState11 = useState(false),
|
|
158
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
159
|
-
muted = _useState12[0],
|
|
160
|
-
setMuted = _useState12[1];
|
|
154
|
+
muted = _useState10[0],
|
|
155
|
+
setMuted = _useState10[1];
|
|
161
156
|
|
|
162
157
|
var onTimeUpdate = useCallback(function (time) {
|
|
163
158
|
setCurrentTime(time);
|
|
@@ -241,10 +236,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
241
236
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
242
237
|
var hasVideo = video !== null;
|
|
243
238
|
|
|
244
|
-
var
|
|
245
|
-
|
|
246
|
-
ready =
|
|
247
|
-
setReady =
|
|
239
|
+
var _useState11 = useState(hasVideo),
|
|
240
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
241
|
+
ready = _useState12[0],
|
|
242
|
+
setReady = _useState12[1]; // useState(!hasVideo);
|
|
248
243
|
|
|
249
244
|
|
|
250
245
|
var transitionPlaying = current && ready;
|
|
@@ -288,24 +283,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
288
283
|
setReady(!hasVideoUrl);
|
|
289
284
|
}, [videoUrl, hasVideoUrl, setReady]);
|
|
290
285
|
var onVideoReady = useCallback(function () {
|
|
291
|
-
setReady(true);
|
|
292
|
-
|
|
293
|
-
if (autoPlay && suspended) {
|
|
294
|
-
setShouldCatchFirstTapToPlay(true);
|
|
295
|
-
}
|
|
296
|
-
}, [setReady, autoPlay, suspended, setShouldCatchFirstTapToPlay]);
|
|
297
|
-
var onSuspended = useCallback(function () {
|
|
298
|
-
if (autoPlay && suspended) {
|
|
299
|
-
setShouldCatchFirstTapToPlay(true);
|
|
300
|
-
}
|
|
301
|
-
}, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
|
|
286
|
+
setReady(true);
|
|
287
|
+
}, [setReady]);
|
|
302
288
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
303
|
-
var items = [
|
|
289
|
+
var items = [autoPlay && suspended && !playing && !withControls ? /*#__PURE__*/React.createElement("button", {
|
|
304
290
|
key: "tap-catcher-button",
|
|
305
291
|
type: "button",
|
|
306
|
-
onTouchStart:
|
|
307
|
-
return play();
|
|
308
|
-
},
|
|
292
|
+
onTouchStart: play,
|
|
309
293
|
className: styles.unmuteAndPlayButton
|
|
310
294
|
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
311
295
|
key: "video",
|
|
@@ -356,7 +340,6 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
356
340
|
onDurationChanged: onDurationChanged,
|
|
357
341
|
onSeeked: onSeeked,
|
|
358
342
|
onEnded: onEnded,
|
|
359
|
-
onSuspended: onSuspended,
|
|
360
343
|
onVolumeChanged: onVolumeChanged,
|
|
361
344
|
focusable: current && isView,
|
|
362
345
|
shouldLoad: mediaShouldLoad
|
package/lib/index.js
CHANGED
|
@@ -152,33 +152,28 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
152
152
|
var _useState = React.useState(false),
|
|
153
153
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
154
154
|
showMediaControls = _useState2[0],
|
|
155
|
-
setShowMediaControls = _useState2[1];
|
|
155
|
+
setShowMediaControls = _useState2[1]; // Get api state updates from callback
|
|
156
156
|
|
|
157
|
-
var _useState3 = React.useState(false),
|
|
158
|
-
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
159
|
-
shouldCatchFirstTapToPlay = _useState4[0],
|
|
160
|
-
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
161
157
|
|
|
158
|
+
var _useState3 = React.useState(null),
|
|
159
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
160
|
+
currentTime = _useState4[0],
|
|
161
|
+
setCurrentTime = _useState4[1];
|
|
162
162
|
|
|
163
163
|
var _useState5 = React.useState(null),
|
|
164
164
|
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
165
|
-
|
|
166
|
-
|
|
165
|
+
duration = _useState6[0],
|
|
166
|
+
setDuration = _useState6[1];
|
|
167
167
|
|
|
168
|
-
var _useState7 = React.useState(
|
|
168
|
+
var _useState7 = React.useState(false),
|
|
169
169
|
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
170
|
-
|
|
171
|
-
|
|
170
|
+
playing = _useState8[0],
|
|
171
|
+
setPlaying = _useState8[1];
|
|
172
172
|
|
|
173
173
|
var _useState9 = React.useState(false),
|
|
174
174
|
_useState10 = _slicedToArray__default["default"](_useState9, 2),
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
var _useState11 = React.useState(false),
|
|
179
|
-
_useState12 = _slicedToArray__default["default"](_useState11, 2),
|
|
180
|
-
muted = _useState12[0],
|
|
181
|
-
setMuted = _useState12[1];
|
|
175
|
+
muted = _useState10[0],
|
|
176
|
+
setMuted = _useState10[1];
|
|
182
177
|
|
|
183
178
|
var onTimeUpdate = React.useCallback(function (time) {
|
|
184
179
|
setCurrentTime(time);
|
|
@@ -262,10 +257,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
262
257
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
263
258
|
var hasVideo = video !== null;
|
|
264
259
|
|
|
265
|
-
var
|
|
266
|
-
|
|
267
|
-
ready =
|
|
268
|
-
setReady =
|
|
260
|
+
var _useState11 = React.useState(hasVideo),
|
|
261
|
+
_useState12 = _slicedToArray__default["default"](_useState11, 2),
|
|
262
|
+
ready = _useState12[0],
|
|
263
|
+
setReady = _useState12[1]; // useState(!hasVideo);
|
|
269
264
|
|
|
270
265
|
|
|
271
266
|
var transitionPlaying = current && ready;
|
|
@@ -309,24 +304,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
309
304
|
setReady(!hasVideoUrl);
|
|
310
305
|
}, [videoUrl, hasVideoUrl, setReady]);
|
|
311
306
|
var onVideoReady = React.useCallback(function () {
|
|
312
|
-
setReady(true);
|
|
313
|
-
|
|
314
|
-
if (autoPlay && suspended) {
|
|
315
|
-
setShouldCatchFirstTapToPlay(true);
|
|
316
|
-
}
|
|
317
|
-
}, [setReady, autoPlay, suspended, setShouldCatchFirstTapToPlay]);
|
|
318
|
-
var onSuspended = React.useCallback(function () {
|
|
319
|
-
if (autoPlay && suspended) {
|
|
320
|
-
setShouldCatchFirstTapToPlay(true);
|
|
321
|
-
}
|
|
322
|
-
}, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
|
|
307
|
+
setReady(true);
|
|
308
|
+
}, [setReady]);
|
|
323
309
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
324
|
-
var items = [
|
|
310
|
+
var items = [autoPlay && suspended && !playing && !withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
325
311
|
key: "tap-catcher-button",
|
|
326
312
|
type: "button",
|
|
327
|
-
onTouchStart:
|
|
328
|
-
return play();
|
|
329
|
-
},
|
|
313
|
+
onTouchStart: play,
|
|
330
314
|
className: styles.unmuteAndPlayButton
|
|
331
315
|
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
332
316
|
key: "video",
|
|
@@ -377,7 +361,6 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
377
361
|
onDurationChanged: onDurationChanged,
|
|
378
362
|
onSeeked: onSeeked,
|
|
379
363
|
onEnded: onEnded,
|
|
380
|
-
onSuspended: onSuspended,
|
|
381
364
|
onVolumeChanged: onVolumeChanged,
|
|
382
365
|
focusable: current && isView,
|
|
383
366
|
shouldLoad: mediaShouldLoad
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-video",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.140",
|
|
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.140",
|
|
54
|
+
"@micromag/element-background": "^0.3.140",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.140",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.140",
|
|
57
|
+
"@micromag/element-container": "^0.3.140",
|
|
58
|
+
"@micromag/element-image": "^0.3.140",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.140",
|
|
60
|
+
"@micromag/element-video": "^0.3.140",
|
|
61
|
+
"@micromag/transforms": "^0.3.140",
|
|
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": "580f0f9c5bc9d85057750f7f710bc27c933dd21a"
|
|
72
72
|
}
|