@micromag/screen-video 0.3.133 → 0.3.137
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 +53 -55
- package/lib/index.js +52 -54
- package/package.json +11 -11
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
|
@@ -9,7 +9,7 @@ import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
|
|
|
9
9
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
10
10
|
import { ScreenElement, PlaceholderVideo, Empty, Transitions } from '@micromag/core/components';
|
|
11
11
|
import { useScreenSize, useScreenRenderContext, useViewerNavigation } from '@micromag/core/contexts';
|
|
12
|
-
import { useTrackScreenMedia,
|
|
12
|
+
import { useTrackScreenMedia, useLongPress, useMediaThumbnail } from '@micromag/core/hooks';
|
|
13
13
|
import Background from '@micromag/element-background';
|
|
14
14
|
import CallToAction from '@micromag/element-call-to-action';
|
|
15
15
|
import ClosedCaptions from '@micromag/element-closed-captions';
|
|
@@ -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,
|
|
@@ -109,24 +109,17 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
109
109
|
_ref2$progressColor = _ref2.progressColor,
|
|
110
110
|
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
111
111
|
|
|
112
|
-
var _useResizeObserver = useResizeObserver(),
|
|
113
|
-
controlsRef = _useResizeObserver.ref,
|
|
114
|
-
contentRect = _useResizeObserver.entry.contentRect;
|
|
115
|
-
|
|
116
|
-
var _ref3 = contentRect || {},
|
|
117
|
-
_ref3$height = _ref3.height,
|
|
118
|
-
controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
|
|
119
|
-
|
|
120
112
|
var apiRef = useRef();
|
|
121
113
|
|
|
122
|
-
var
|
|
123
|
-
togglePlay =
|
|
124
|
-
toggleMute =
|
|
125
|
-
seek =
|
|
126
|
-
play =
|
|
127
|
-
pause =
|
|
128
|
-
|
|
129
|
-
|
|
114
|
+
var _ref3 = apiRef.current || {},
|
|
115
|
+
togglePlay = _ref3.togglePlay,
|
|
116
|
+
toggleMute = _ref3.toggleMute,
|
|
117
|
+
seek = _ref3.seek,
|
|
118
|
+
play = _ref3.play,
|
|
119
|
+
pause = _ref3.pause,
|
|
120
|
+
suspended = _ref3.suspended,
|
|
121
|
+
_ref3$mediaRef = _ref3.mediaRef,
|
|
122
|
+
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
130
123
|
|
|
131
124
|
useEffect(function () {
|
|
132
125
|
if (apiMediaRef !== null && getMediaRef !== null) {
|
|
@@ -142,8 +135,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
142
135
|
|
|
143
136
|
var _useState3 = useState(false),
|
|
144
137
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
145
|
-
|
|
146
|
-
|
|
138
|
+
shouldCatchFirstTapToPlay = _useState4[0],
|
|
139
|
+
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
147
140
|
|
|
148
141
|
|
|
149
142
|
var _useState5 = useState(null),
|
|
@@ -175,13 +168,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
175
168
|
var onDurationChanged = useCallback(function (dur) {
|
|
176
169
|
setDuration(dur);
|
|
177
170
|
}, [setDuration]);
|
|
178
|
-
var onPlay = useCallback(function (
|
|
179
|
-
var initial =
|
|
171
|
+
var onPlay = useCallback(function (_ref4) {
|
|
172
|
+
var initial = _ref4.initial;
|
|
180
173
|
setPlaying(true);
|
|
181
174
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
182
175
|
}, [trackScreenMedia, video]);
|
|
183
|
-
var onPause = useCallback(function (
|
|
184
|
-
var midway =
|
|
176
|
+
var onPause = useCallback(function (_ref5) {
|
|
177
|
+
var midway = _ref5.midway;
|
|
185
178
|
setPlaying(false);
|
|
186
179
|
trackScreenMedia(video, midway ? 'pause' : 'ended');
|
|
187
180
|
}, [trackScreenMedia, video]);
|
|
@@ -262,20 +255,20 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
262
255
|
}) : null;
|
|
263
256
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
264
257
|
|
|
265
|
-
var
|
|
266
|
-
|
|
267
|
-
videoMetadata =
|
|
268
|
-
|
|
269
|
-
videoUrl =
|
|
258
|
+
var _ref6 = videoMedia || {},
|
|
259
|
+
_ref6$metadata = _ref6.metadata,
|
|
260
|
+
videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
|
|
261
|
+
_ref6$url = _ref6.url,
|
|
262
|
+
videoUrl = _ref6$url === void 0 ? null : _ref6$url;
|
|
270
263
|
|
|
271
264
|
var thumbnailUrl = useMediaThumbnail(videoMedia, thumbnailFile);
|
|
272
265
|
var hasVideoUrl = videoUrl !== null;
|
|
273
266
|
|
|
274
|
-
var
|
|
275
|
-
|
|
276
|
-
videoWidth =
|
|
277
|
-
|
|
278
|
-
videoHeight =
|
|
267
|
+
var _ref7 = videoMetadata || {},
|
|
268
|
+
_ref7$width = _ref7.width,
|
|
269
|
+
videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
|
|
270
|
+
_ref7$height = _ref7.height,
|
|
271
|
+
videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
279
272
|
|
|
280
273
|
var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
281
274
|
cover: fullscreen
|
|
@@ -295,14 +288,26 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
295
288
|
setReady(!hasVideoUrl);
|
|
296
289
|
}, [videoUrl, hasVideoUrl, setReady]);
|
|
297
290
|
var onVideoReady = useCallback(function () {
|
|
298
|
-
setReady(true);
|
|
291
|
+
setReady(true); // @todo the battery-saving play button issue
|
|
299
292
|
|
|
300
|
-
if (autoPlay &&
|
|
301
|
-
|
|
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);
|
|
302
300
|
}
|
|
303
|
-
}, [
|
|
301
|
+
}, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
|
|
304
302
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
305
|
-
var items = [/*#__PURE__*/React.createElement(
|
|
303
|
+
var items = [shouldCatchFirstTapToPlay && suspended ? /*#__PURE__*/React.createElement("button", {
|
|
304
|
+
key: "tap-catcher-button",
|
|
305
|
+
type: "button",
|
|
306
|
+
onTouchStart: function onTouchStart() {
|
|
307
|
+
return play();
|
|
308
|
+
},
|
|
309
|
+
className: styles.unmuteAndPlayButton
|
|
310
|
+
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
306
311
|
key: "video",
|
|
307
312
|
placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
|
|
308
313
|
className: styles.placeholder
|
|
@@ -351,15 +356,11 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
351
356
|
onDurationChanged: onDurationChanged,
|
|
352
357
|
onSeeked: onSeeked,
|
|
353
358
|
onEnded: onEnded,
|
|
359
|
+
onSuspended: onSuspended,
|
|
354
360
|
onVolumeChanged: onVolumeChanged,
|
|
355
361
|
focusable: current && isView,
|
|
356
362
|
shouldLoad: mediaShouldLoad
|
|
357
|
-
}))) : null),
|
|
358
|
-
key: "first-tap-button",
|
|
359
|
-
type: "button",
|
|
360
|
-
onTouchStart: onPlay,
|
|
361
|
-
className: classNames([styles.videoButton, styles.visible])
|
|
362
|
-
}) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
363
|
+
}))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
363
364
|
key: "bottom-content",
|
|
364
365
|
className: styles.bottomContent
|
|
365
366
|
}, /*#__PURE__*/React.createElement(Transitions, {
|
|
@@ -372,8 +373,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
372
373
|
currentTime: currentTime
|
|
373
374
|
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
374
375
|
className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
375
|
-
}, hasVideoUrl ? /*#__PURE__*/React.createElement(
|
|
376
|
-
|
|
376
|
+
}, hasVideoUrl ? /*#__PURE__*/React.createElement("div", {
|
|
377
|
+
className: styles.controls
|
|
377
378
|
}, /*#__PURE__*/React.createElement(MediaControls, {
|
|
378
379
|
className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
|
|
379
380
|
withControls: withControls,
|
|
@@ -388,15 +389,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
388
389
|
onToggleMute: onToggleMute,
|
|
389
390
|
onSeek: onSeek,
|
|
390
391
|
focusable: current && isView
|
|
391
|
-
})
|
|
392
|
+
}), withControls ? /*#__PURE__*/React.createElement("button", {
|
|
392
393
|
key: "video-button",
|
|
393
|
-
style: {
|
|
394
|
-
height: controlsHeight
|
|
395
|
-
},
|
|
396
394
|
type: "button",
|
|
397
395
|
onTouchStart: onShowControls,
|
|
398
|
-
className:
|
|
399
|
-
})) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
396
|
+
className: styles.showControlsButton
|
|
397
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
400
398
|
style: {
|
|
401
399
|
marginTop: -spacing / 2
|
|
402
400
|
}
|
|
@@ -422,7 +420,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
422
420
|
isSmall: true
|
|
423
421
|
}) : null))) : null];
|
|
424
422
|
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
425
|
-
className: classNames([styles.container, (
|
|
423
|
+
className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
426
424
|
"data-screen-ready": isStatic || isCapture || ready
|
|
427
425
|
}, longPressBind, {
|
|
428
426
|
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,
|
|
@@ -130,24 +130,17 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
130
130
|
_ref2$progressColor = _ref2.progressColor,
|
|
131
131
|
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
132
132
|
|
|
133
|
-
var _useResizeObserver = hooks.useResizeObserver(),
|
|
134
|
-
controlsRef = _useResizeObserver.ref,
|
|
135
|
-
contentRect = _useResizeObserver.entry.contentRect;
|
|
136
|
-
|
|
137
|
-
var _ref3 = contentRect || {},
|
|
138
|
-
_ref3$height = _ref3.height,
|
|
139
|
-
controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
|
|
140
|
-
|
|
141
133
|
var apiRef = React.useRef();
|
|
142
134
|
|
|
143
|
-
var
|
|
144
|
-
togglePlay =
|
|
145
|
-
toggleMute =
|
|
146
|
-
seek =
|
|
147
|
-
play =
|
|
148
|
-
pause =
|
|
149
|
-
|
|
150
|
-
|
|
135
|
+
var _ref3 = apiRef.current || {},
|
|
136
|
+
togglePlay = _ref3.togglePlay,
|
|
137
|
+
toggleMute = _ref3.toggleMute,
|
|
138
|
+
seek = _ref3.seek,
|
|
139
|
+
play = _ref3.play,
|
|
140
|
+
pause = _ref3.pause,
|
|
141
|
+
suspended = _ref3.suspended,
|
|
142
|
+
_ref3$mediaRef = _ref3.mediaRef,
|
|
143
|
+
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
151
144
|
|
|
152
145
|
React.useEffect(function () {
|
|
153
146
|
if (apiMediaRef !== null && getMediaRef !== null) {
|
|
@@ -163,8 +156,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
163
156
|
|
|
164
157
|
var _useState3 = React.useState(false),
|
|
165
158
|
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
166
|
-
|
|
167
|
-
|
|
159
|
+
shouldCatchFirstTapToPlay = _useState4[0],
|
|
160
|
+
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
168
161
|
|
|
169
162
|
|
|
170
163
|
var _useState5 = React.useState(null),
|
|
@@ -196,13 +189,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
196
189
|
var onDurationChanged = React.useCallback(function (dur) {
|
|
197
190
|
setDuration(dur);
|
|
198
191
|
}, [setDuration]);
|
|
199
|
-
var onPlay = React.useCallback(function (
|
|
200
|
-
var initial =
|
|
192
|
+
var onPlay = React.useCallback(function (_ref4) {
|
|
193
|
+
var initial = _ref4.initial;
|
|
201
194
|
setPlaying(true);
|
|
202
195
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
203
196
|
}, [trackScreenMedia, video]);
|
|
204
|
-
var onPause = React.useCallback(function (
|
|
205
|
-
var midway =
|
|
197
|
+
var onPause = React.useCallback(function (_ref5) {
|
|
198
|
+
var midway = _ref5.midway;
|
|
206
199
|
setPlaying(false);
|
|
207
200
|
trackScreenMedia(video, midway ? 'pause' : 'ended');
|
|
208
201
|
}, [trackScreenMedia, video]);
|
|
@@ -283,20 +276,20 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
283
276
|
}) : null;
|
|
284
277
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
285
278
|
|
|
286
|
-
var
|
|
287
|
-
|
|
288
|
-
videoMetadata =
|
|
289
|
-
|
|
290
|
-
videoUrl =
|
|
279
|
+
var _ref6 = videoMedia || {},
|
|
280
|
+
_ref6$metadata = _ref6.metadata,
|
|
281
|
+
videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
|
|
282
|
+
_ref6$url = _ref6.url,
|
|
283
|
+
videoUrl = _ref6$url === void 0 ? null : _ref6$url;
|
|
291
284
|
|
|
292
285
|
var thumbnailUrl = hooks.useMediaThumbnail(videoMedia, thumbnailFile);
|
|
293
286
|
var hasVideoUrl = videoUrl !== null;
|
|
294
287
|
|
|
295
|
-
var
|
|
296
|
-
|
|
297
|
-
videoWidth =
|
|
298
|
-
|
|
299
|
-
videoHeight =
|
|
288
|
+
var _ref7 = videoMetadata || {},
|
|
289
|
+
_ref7$width = _ref7.width,
|
|
290
|
+
videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
|
|
291
|
+
_ref7$height = _ref7.height,
|
|
292
|
+
videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
300
293
|
|
|
301
294
|
var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
302
295
|
cover: fullscreen
|
|
@@ -316,14 +309,26 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
316
309
|
setReady(!hasVideoUrl);
|
|
317
310
|
}, [videoUrl, hasVideoUrl, setReady]);
|
|
318
311
|
var onVideoReady = React.useCallback(function () {
|
|
319
|
-
setReady(true);
|
|
312
|
+
setReady(true); // @todo the battery-saving play button issue
|
|
320
313
|
|
|
321
|
-
if (autoPlay &&
|
|
322
|
-
|
|
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);
|
|
323
321
|
}
|
|
324
|
-
}, [
|
|
322
|
+
}, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
|
|
325
323
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
326
|
-
var items = [/*#__PURE__*/React__default["default"].createElement(
|
|
324
|
+
var items = [shouldCatchFirstTapToPlay && suspended ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
325
|
+
key: "tap-catcher-button",
|
|
326
|
+
type: "button",
|
|
327
|
+
onTouchStart: function onTouchStart() {
|
|
328
|
+
return play();
|
|
329
|
+
},
|
|
330
|
+
className: styles.unmuteAndPlayButton
|
|
331
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
327
332
|
key: "video",
|
|
328
333
|
placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
|
|
329
334
|
className: styles.placeholder
|
|
@@ -372,15 +377,11 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
372
377
|
onDurationChanged: onDurationChanged,
|
|
373
378
|
onSeeked: onSeeked,
|
|
374
379
|
onEnded: onEnded,
|
|
380
|
+
onSuspended: onSuspended,
|
|
375
381
|
onVolumeChanged: onVolumeChanged,
|
|
376
382
|
focusable: current && isView,
|
|
377
383
|
shouldLoad: mediaShouldLoad
|
|
378
|
-
}))) : null),
|
|
379
|
-
key: "first-tap-button",
|
|
380
|
-
type: "button",
|
|
381
|
-
onTouchStart: onPlay,
|
|
382
|
-
className: classNames__default["default"]([styles.videoButton, styles.visible])
|
|
383
|
-
}) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
384
|
+
}))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
384
385
|
key: "bottom-content",
|
|
385
386
|
className: styles.bottomContent
|
|
386
387
|
}, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
@@ -393,8 +394,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
393
394
|
currentTime: currentTime
|
|
394
395
|
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
395
396
|
className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
396
|
-
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(
|
|
397
|
-
|
|
397
|
+
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
398
|
+
className: styles.controls
|
|
398
399
|
}, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
|
|
399
400
|
className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
|
|
400
401
|
withControls: withControls,
|
|
@@ -409,15 +410,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
409
410
|
onToggleMute: onToggleMute,
|
|
410
411
|
onSeek: onSeek,
|
|
411
412
|
focusable: current && isView
|
|
412
|
-
})
|
|
413
|
+
}), withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
413
414
|
key: "video-button",
|
|
414
|
-
style: {
|
|
415
|
-
height: controlsHeight
|
|
416
|
-
},
|
|
417
415
|
type: "button",
|
|
418
416
|
onTouchStart: onShowControls,
|
|
419
|
-
className:
|
|
420
|
-
})) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
417
|
+
className: styles.showControlsButton
|
|
418
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
421
419
|
style: {
|
|
422
420
|
marginTop: -spacing / 2
|
|
423
421
|
}
|
|
@@ -443,7 +441,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
443
441
|
isSmall: true
|
|
444
442
|
}) : null))) : null];
|
|
445
443
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
446
|
-
className: classNames__default["default"]([styles.container, (
|
|
444
|
+
className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
447
445
|
"data-screen-ready": isStatic || isCapture || ready
|
|
448
446
|
}, longPressBind, {
|
|
449
447
|
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.137",
|
|
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.137",
|
|
54
|
+
"@micromag/element-background": "^0.3.137",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.137",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.137",
|
|
57
|
+
"@micromag/element-container": "^0.3.137",
|
|
58
|
+
"@micromag/element-image": "^0.3.137",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.137",
|
|
60
|
+
"@micromag/element-video": "^0.3.137",
|
|
61
|
+
"@micromag/transforms": "^0.3.137",
|
|
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": "a94963893e52f7914128182fe7e1538de79b6f20"
|
|
72
72
|
}
|