@micromag/screen-video 0.3.128 → 0.3.134
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 +46 -29
- package/lib/index.js +46 -29
- package/package.json +5 -5
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-video-container .micromag-screen-video-
|
|
1
|
+
.micromag-screen-video-container .micromag-screen-video-showControlsButton,.micromag-screen-video-container .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,.micromag-screen-video-container .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: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-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
|
@@ -20,7 +20,7 @@ import Video from '@micromag/element-video';
|
|
|
20
20
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
21
21
|
import { Video as Video$1, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
22
22
|
|
|
23
|
-
var styles = {"container":"micromag-screen-video-container","
|
|
23
|
+
var styles = {"container":"micromag-screen-video-container","showControlsButton":"micromag-screen-video-showControlsButton","unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","callToAction":"micromag-screen-video-callToAction","bottom":"micromag-screen-video-bottom","withGradient":"micromag-screen-video-withGradient","controls":"micromag-screen-video-controls","mediaControls":"micromag-screen-video-mediaControls","visible":"micromag-screen-video-visible","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent","bottomSeekBar":"micromag-screen-video-bottomSeekBar","isHidden":"micromag-screen-video-isHidden"};
|
|
24
24
|
|
|
25
25
|
var propTypes = {
|
|
26
26
|
layout: PropTypes.oneOf(['middle', 'full']),
|
|
@@ -54,7 +54,7 @@ var defaultProps = {
|
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
var VideoScreen = function VideoScreen(_ref) {
|
|
57
|
-
var
|
|
57
|
+
var _ref11;
|
|
58
58
|
|
|
59
59
|
var layout = _ref.layout,
|
|
60
60
|
video = _ref.video,
|
|
@@ -130,28 +130,33 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
130
130
|
var _useState = useState(false),
|
|
131
131
|
_useState2 = _slicedToArray(_useState, 2),
|
|
132
132
|
showMediaControls = _useState2[0],
|
|
133
|
-
setShowMediaControls = _useState2[1];
|
|
133
|
+
setShowMediaControls = _useState2[1];
|
|
134
134
|
|
|
135
|
-
|
|
136
|
-
var _useState3 = useState(null),
|
|
135
|
+
var _useState3 = useState(false),
|
|
137
136
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
138
|
-
|
|
139
|
-
|
|
137
|
+
shouldCatchFirstTapToPlay = _useState4[0],
|
|
138
|
+
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
139
|
+
|
|
140
140
|
|
|
141
141
|
var _useState5 = useState(null),
|
|
142
142
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
143
|
-
|
|
144
|
-
|
|
143
|
+
currentTime = _useState6[0],
|
|
144
|
+
setCurrentTime = _useState6[1];
|
|
145
145
|
|
|
146
|
-
var _useState7 = useState(
|
|
146
|
+
var _useState7 = useState(null),
|
|
147
147
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
148
|
-
|
|
149
|
-
|
|
148
|
+
duration = _useState8[0],
|
|
149
|
+
setDuration = _useState8[1];
|
|
150
150
|
|
|
151
151
|
var _useState9 = useState(false),
|
|
152
152
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
153
|
-
|
|
154
|
-
|
|
153
|
+
playing = _useState10[0],
|
|
154
|
+
setPlaying = _useState10[1];
|
|
155
|
+
|
|
156
|
+
var _useState11 = useState(false),
|
|
157
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
158
|
+
muted = _useState12[0],
|
|
159
|
+
setMuted = _useState12[1];
|
|
155
160
|
|
|
156
161
|
var onTimeUpdate = useCallback(function (time) {
|
|
157
162
|
setCurrentTime(time);
|
|
@@ -226,10 +231,6 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
226
231
|
}, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
|
|
227
232
|
var onShowControls = useCallback(function (e) {
|
|
228
233
|
onMouseMove(e, 3000);
|
|
229
|
-
|
|
230
|
-
if (autoPlay && !playing) {
|
|
231
|
-
play();
|
|
232
|
-
}
|
|
233
234
|
}, [play, onMouseMove]);
|
|
234
235
|
var longPressBind = useLongPress({
|
|
235
236
|
onLongPress: onLongPress,
|
|
@@ -239,10 +240,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
239
240
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
240
241
|
var hasVideo = video !== null;
|
|
241
242
|
|
|
242
|
-
var
|
|
243
|
-
|
|
244
|
-
ready =
|
|
245
|
-
setReady =
|
|
243
|
+
var _useState13 = useState(hasVideo),
|
|
244
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
245
|
+
ready = _useState14[0],
|
|
246
|
+
setReady = _useState14[1]; // useState(!hasVideo);
|
|
246
247
|
|
|
247
248
|
|
|
248
249
|
var transitionPlaying = current && ready;
|
|
@@ -288,6 +289,15 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
288
289
|
var onVideoReady = useCallback(function () {
|
|
289
290
|
setReady(true);
|
|
290
291
|
}, [setReady]);
|
|
292
|
+
useEffect(function () {
|
|
293
|
+
var checkPlayStatus = setTimeout(function () {
|
|
294
|
+
if (current && ready && autoPlay && !playing && apiMediaRef) {
|
|
295
|
+
setShouldCatchFirstTapToPlay(true);
|
|
296
|
+
}
|
|
297
|
+
}, 200); // @todo?
|
|
298
|
+
|
|
299
|
+
return clearTimeout(checkPlayStatus);
|
|
300
|
+
}, [current, ready, autoPlay, playing, setShouldCatchFirstTapToPlay]);
|
|
291
301
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
292
302
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
293
303
|
key: "video",
|
|
@@ -341,11 +351,11 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
341
351
|
onVolumeChanged: onVolumeChanged,
|
|
342
352
|
focusable: current && isView,
|
|
343
353
|
shouldLoad: mediaShouldLoad
|
|
344
|
-
}))) : null),
|
|
345
|
-
key: "
|
|
354
|
+
}))) : null), shouldCatchFirstTapToPlay ? /*#__PURE__*/React.createElement("button", {
|
|
355
|
+
key: "tap-catcher-button",
|
|
346
356
|
type: "button",
|
|
347
|
-
|
|
348
|
-
className:
|
|
357
|
+
onTouchStart: play,
|
|
358
|
+
className: styles.unmuteAndPlayButton
|
|
349
359
|
}) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
350
360
|
key: "bottom-content",
|
|
351
361
|
className: styles.bottomContent
|
|
@@ -359,7 +369,9 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
359
369
|
currentTime: currentTime
|
|
360
370
|
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
361
371
|
className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
362
|
-
}, hasVideoUrl ? /*#__PURE__*/React.createElement(
|
|
372
|
+
}, hasVideoUrl ? /*#__PURE__*/React.createElement("div", {
|
|
373
|
+
className: styles.controls
|
|
374
|
+
}, /*#__PURE__*/React.createElement(MediaControls, {
|
|
363
375
|
className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
|
|
364
376
|
withControls: withControls,
|
|
365
377
|
withSeekBar: withSeekBar,
|
|
@@ -373,7 +385,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
373
385
|
onToggleMute: onToggleMute,
|
|
374
386
|
onSeek: onSeek,
|
|
375
387
|
focusable: current && isView
|
|
376
|
-
})
|
|
388
|
+
}), withControls ? /*#__PURE__*/React.createElement("button", {
|
|
389
|
+
key: "video-button",
|
|
390
|
+
type: "button",
|
|
391
|
+
onTouchStart: onShowControls,
|
|
392
|
+
className: styles.showControlsButton
|
|
393
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
377
394
|
style: {
|
|
378
395
|
marginTop: -spacing / 2
|
|
379
396
|
}
|
|
@@ -399,7 +416,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
399
416
|
isSmall: true
|
|
400
417
|
}) : null))) : null];
|
|
401
418
|
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
402
|
-
className: classNames([styles.container, (
|
|
419
|
+
className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
403
420
|
"data-screen-ready": isStatic || isCapture || ready
|
|
404
421
|
}, longPressBind, {
|
|
405
422
|
onMouseMove: onMouseMove
|
package/lib/index.js
CHANGED
|
@@ -41,7 +41,7 @@ var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
|
|
|
41
41
|
var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
|
|
42
42
|
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
43
43
|
|
|
44
|
-
var styles = {"container":"micromag-screen-video-container","
|
|
44
|
+
var styles = {"container":"micromag-screen-video-container","showControlsButton":"micromag-screen-video-showControlsButton","unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","callToAction":"micromag-screen-video-callToAction","bottom":"micromag-screen-video-bottom","withGradient":"micromag-screen-video-withGradient","controls":"micromag-screen-video-controls","mediaControls":"micromag-screen-video-mediaControls","visible":"micromag-screen-video-visible","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent","bottomSeekBar":"micromag-screen-video-bottomSeekBar","isHidden":"micromag-screen-video-isHidden"};
|
|
45
45
|
|
|
46
46
|
var propTypes = {
|
|
47
47
|
layout: PropTypes__default["default"].oneOf(['middle', 'full']),
|
|
@@ -75,7 +75,7 @@ var defaultProps = {
|
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
var VideoScreen = function VideoScreen(_ref) {
|
|
78
|
-
var
|
|
78
|
+
var _ref11;
|
|
79
79
|
|
|
80
80
|
var layout = _ref.layout,
|
|
81
81
|
video = _ref.video,
|
|
@@ -151,28 +151,33 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
151
151
|
var _useState = React.useState(false),
|
|
152
152
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
153
153
|
showMediaControls = _useState2[0],
|
|
154
|
-
setShowMediaControls = _useState2[1];
|
|
154
|
+
setShowMediaControls = _useState2[1];
|
|
155
155
|
|
|
156
|
-
|
|
157
|
-
var _useState3 = React.useState(null),
|
|
156
|
+
var _useState3 = React.useState(false),
|
|
158
157
|
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
159
|
-
|
|
160
|
-
|
|
158
|
+
shouldCatchFirstTapToPlay = _useState4[0],
|
|
159
|
+
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
160
|
+
|
|
161
161
|
|
|
162
162
|
var _useState5 = React.useState(null),
|
|
163
163
|
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
164
|
-
|
|
165
|
-
|
|
164
|
+
currentTime = _useState6[0],
|
|
165
|
+
setCurrentTime = _useState6[1];
|
|
166
166
|
|
|
167
|
-
var _useState7 = React.useState(
|
|
167
|
+
var _useState7 = React.useState(null),
|
|
168
168
|
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
169
|
-
|
|
170
|
-
|
|
169
|
+
duration = _useState8[0],
|
|
170
|
+
setDuration = _useState8[1];
|
|
171
171
|
|
|
172
172
|
var _useState9 = React.useState(false),
|
|
173
173
|
_useState10 = _slicedToArray__default["default"](_useState9, 2),
|
|
174
|
-
|
|
175
|
-
|
|
174
|
+
playing = _useState10[0],
|
|
175
|
+
setPlaying = _useState10[1];
|
|
176
|
+
|
|
177
|
+
var _useState11 = React.useState(false),
|
|
178
|
+
_useState12 = _slicedToArray__default["default"](_useState11, 2),
|
|
179
|
+
muted = _useState12[0],
|
|
180
|
+
setMuted = _useState12[1];
|
|
176
181
|
|
|
177
182
|
var onTimeUpdate = React.useCallback(function (time) {
|
|
178
183
|
setCurrentTime(time);
|
|
@@ -247,10 +252,6 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
247
252
|
}, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
|
|
248
253
|
var onShowControls = React.useCallback(function (e) {
|
|
249
254
|
onMouseMove(e, 3000);
|
|
250
|
-
|
|
251
|
-
if (autoPlay && !playing) {
|
|
252
|
-
play();
|
|
253
|
-
}
|
|
254
255
|
}, [play, onMouseMove]);
|
|
255
256
|
var longPressBind = hooks.useLongPress({
|
|
256
257
|
onLongPress: onLongPress,
|
|
@@ -260,10 +261,10 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
260
261
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
261
262
|
var hasVideo = video !== null;
|
|
262
263
|
|
|
263
|
-
var
|
|
264
|
-
|
|
265
|
-
ready =
|
|
266
|
-
setReady =
|
|
264
|
+
var _useState13 = React.useState(hasVideo),
|
|
265
|
+
_useState14 = _slicedToArray__default["default"](_useState13, 2),
|
|
266
|
+
ready = _useState14[0],
|
|
267
|
+
setReady = _useState14[1]; // useState(!hasVideo);
|
|
267
268
|
|
|
268
269
|
|
|
269
270
|
var transitionPlaying = current && ready;
|
|
@@ -309,6 +310,15 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
309
310
|
var onVideoReady = React.useCallback(function () {
|
|
310
311
|
setReady(true);
|
|
311
312
|
}, [setReady]);
|
|
313
|
+
React.useEffect(function () {
|
|
314
|
+
var checkPlayStatus = setTimeout(function () {
|
|
315
|
+
if (current && ready && autoPlay && !playing && apiMediaRef) {
|
|
316
|
+
setShouldCatchFirstTapToPlay(true);
|
|
317
|
+
}
|
|
318
|
+
}, 200); // @todo?
|
|
319
|
+
|
|
320
|
+
return clearTimeout(checkPlayStatus);
|
|
321
|
+
}, [current, ready, autoPlay, playing, setShouldCatchFirstTapToPlay]);
|
|
312
322
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
313
323
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
314
324
|
key: "video",
|
|
@@ -362,11 +372,11 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
362
372
|
onVolumeChanged: onVolumeChanged,
|
|
363
373
|
focusable: current && isView,
|
|
364
374
|
shouldLoad: mediaShouldLoad
|
|
365
|
-
}))) : null),
|
|
366
|
-
key: "
|
|
375
|
+
}))) : null), shouldCatchFirstTapToPlay ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
376
|
+
key: "tap-catcher-button",
|
|
367
377
|
type: "button",
|
|
368
|
-
|
|
369
|
-
className:
|
|
378
|
+
onTouchStart: play,
|
|
379
|
+
className: styles.unmuteAndPlayButton
|
|
370
380
|
}) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
371
381
|
key: "bottom-content",
|
|
372
382
|
className: styles.bottomContent
|
|
@@ -380,7 +390,9 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
380
390
|
currentTime: currentTime
|
|
381
391
|
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
382
392
|
className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
383
|
-
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(
|
|
393
|
+
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
394
|
+
className: styles.controls
|
|
395
|
+
}, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
|
|
384
396
|
className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
|
|
385
397
|
withControls: withControls,
|
|
386
398
|
withSeekBar: withSeekBar,
|
|
@@ -394,7 +406,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
394
406
|
onToggleMute: onToggleMute,
|
|
395
407
|
onSeek: onSeek,
|
|
396
408
|
focusable: current && isView
|
|
397
|
-
})
|
|
409
|
+
}), withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
410
|
+
key: "video-button",
|
|
411
|
+
type: "button",
|
|
412
|
+
onTouchStart: onShowControls,
|
|
413
|
+
className: styles.showControlsButton
|
|
414
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
398
415
|
style: {
|
|
399
416
|
marginTop: -spacing / 2
|
|
400
417
|
}
|
|
@@ -420,7 +437,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
420
437
|
isSmall: true
|
|
421
438
|
}) : null))) : null];
|
|
422
439
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
423
|
-
className: classNames__default["default"]([styles.container, (
|
|
440
|
+
className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
424
441
|
"data-screen-ready": isStatic || isCapture || ready
|
|
425
442
|
}, longPressBind, {
|
|
426
443
|
onMouseMove: onMouseMove
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-video",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.134",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
52
|
"@folklore/size": "^0.1.20",
|
|
53
53
|
"@micromag/core": "^0.3.126",
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
54
|
+
"@micromag/element-background": "^0.3.134",
|
|
55
55
|
"@micromag/element-call-to-action": "^0.3.128",
|
|
56
56
|
"@micromag/element-closed-captions": "^0.3.126",
|
|
57
57
|
"@micromag/element-container": "^0.3.126",
|
|
58
58
|
"@micromag/element-image": "^0.3.126",
|
|
59
|
-
"@micromag/element-media-controls": "^0.3.
|
|
60
|
-
"@micromag/element-video": "^0.3.
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.134",
|
|
60
|
+
"@micromag/element-video": "^0.3.134",
|
|
61
61
|
"@micromag/transforms": "^0.3.126",
|
|
62
62
|
"classnames": "^2.2.6",
|
|
63
63
|
"lodash": "^4.17.21",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "3eda132e0f399a773083f6b42a4d1ff7131b7b04"
|
|
72
72
|
}
|