@micromag/screen-video 0.3.133 → 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 -52
- package/lib/index.js +45 -51
- 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
|
@@ -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,16 @@ 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
|
-
apiMediaRef =
|
|
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
|
+
_ref3$mediaRef = _ref3.mediaRef,
|
|
121
|
+
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
130
122
|
|
|
131
123
|
useEffect(function () {
|
|
132
124
|
if (apiMediaRef !== null && getMediaRef !== null) {
|
|
@@ -142,8 +134,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
142
134
|
|
|
143
135
|
var _useState3 = useState(false),
|
|
144
136
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
145
|
-
|
|
146
|
-
|
|
137
|
+
shouldCatchFirstTapToPlay = _useState4[0],
|
|
138
|
+
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
147
139
|
|
|
148
140
|
|
|
149
141
|
var _useState5 = useState(null),
|
|
@@ -175,13 +167,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
175
167
|
var onDurationChanged = useCallback(function (dur) {
|
|
176
168
|
setDuration(dur);
|
|
177
169
|
}, [setDuration]);
|
|
178
|
-
var onPlay = useCallback(function (
|
|
179
|
-
var initial =
|
|
170
|
+
var onPlay = useCallback(function (_ref4) {
|
|
171
|
+
var initial = _ref4.initial;
|
|
180
172
|
setPlaying(true);
|
|
181
173
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
182
174
|
}, [trackScreenMedia, video]);
|
|
183
|
-
var onPause = useCallback(function (
|
|
184
|
-
var midway =
|
|
175
|
+
var onPause = useCallback(function (_ref5) {
|
|
176
|
+
var midway = _ref5.midway;
|
|
185
177
|
setPlaying(false);
|
|
186
178
|
trackScreenMedia(video, midway ? 'pause' : 'ended');
|
|
187
179
|
}, [trackScreenMedia, video]);
|
|
@@ -262,20 +254,20 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
262
254
|
}) : null;
|
|
263
255
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
264
256
|
|
|
265
|
-
var
|
|
266
|
-
|
|
267
|
-
videoMetadata =
|
|
268
|
-
|
|
269
|
-
videoUrl =
|
|
257
|
+
var _ref6 = videoMedia || {},
|
|
258
|
+
_ref6$metadata = _ref6.metadata,
|
|
259
|
+
videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
|
|
260
|
+
_ref6$url = _ref6.url,
|
|
261
|
+
videoUrl = _ref6$url === void 0 ? null : _ref6$url;
|
|
270
262
|
|
|
271
263
|
var thumbnailUrl = useMediaThumbnail(videoMedia, thumbnailFile);
|
|
272
264
|
var hasVideoUrl = videoUrl !== null;
|
|
273
265
|
|
|
274
|
-
var
|
|
275
|
-
|
|
276
|
-
videoWidth =
|
|
277
|
-
|
|
278
|
-
videoHeight =
|
|
266
|
+
var _ref7 = videoMetadata || {},
|
|
267
|
+
_ref7$width = _ref7.width,
|
|
268
|
+
videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
|
|
269
|
+
_ref7$height = _ref7.height,
|
|
270
|
+
videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
279
271
|
|
|
280
272
|
var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
281
273
|
cover: fullscreen
|
|
@@ -296,11 +288,16 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
296
288
|
}, [videoUrl, hasVideoUrl, setReady]);
|
|
297
289
|
var onVideoReady = useCallback(function () {
|
|
298
290
|
setReady(true);
|
|
299
|
-
|
|
300
|
-
if (autoPlay && !playing) {
|
|
301
|
-
setPlayOnFirstTap(true); // @note: this sets up a button that plays the video on click for folks who are low on battery on their device: e.g. ios stops the autoplay of videos in that case...
|
|
302
|
-
}
|
|
303
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]);
|
|
304
301
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
305
302
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
306
303
|
key: "video",
|
|
@@ -354,11 +351,11 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
354
351
|
onVolumeChanged: onVolumeChanged,
|
|
355
352
|
focusable: current && isView,
|
|
356
353
|
shouldLoad: mediaShouldLoad
|
|
357
|
-
}))) : null),
|
|
358
|
-
key: "
|
|
354
|
+
}))) : null), shouldCatchFirstTapToPlay ? /*#__PURE__*/React.createElement("button", {
|
|
355
|
+
key: "tap-catcher-button",
|
|
359
356
|
type: "button",
|
|
360
|
-
onTouchStart:
|
|
361
|
-
className:
|
|
357
|
+
onTouchStart: play,
|
|
358
|
+
className: styles.unmuteAndPlayButton
|
|
362
359
|
}) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
363
360
|
key: "bottom-content",
|
|
364
361
|
className: styles.bottomContent
|
|
@@ -372,8 +369,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
372
369
|
currentTime: currentTime
|
|
373
370
|
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
374
371
|
className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
375
|
-
}, hasVideoUrl ? /*#__PURE__*/React.createElement(
|
|
376
|
-
|
|
372
|
+
}, hasVideoUrl ? /*#__PURE__*/React.createElement("div", {
|
|
373
|
+
className: styles.controls
|
|
377
374
|
}, /*#__PURE__*/React.createElement(MediaControls, {
|
|
378
375
|
className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
|
|
379
376
|
withControls: withControls,
|
|
@@ -388,15 +385,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
388
385
|
onToggleMute: onToggleMute,
|
|
389
386
|
onSeek: onSeek,
|
|
390
387
|
focusable: current && isView
|
|
391
|
-
})
|
|
388
|
+
}), withControls ? /*#__PURE__*/React.createElement("button", {
|
|
392
389
|
key: "video-button",
|
|
393
|
-
style: {
|
|
394
|
-
height: controlsHeight
|
|
395
|
-
},
|
|
396
390
|
type: "button",
|
|
397
391
|
onTouchStart: onShowControls,
|
|
398
|
-
className:
|
|
399
|
-
})) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
392
|
+
className: styles.showControlsButton
|
|
393
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
400
394
|
style: {
|
|
401
395
|
marginTop: -spacing / 2
|
|
402
396
|
}
|
|
@@ -422,7 +416,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
422
416
|
isSmall: true
|
|
423
417
|
}) : null))) : null];
|
|
424
418
|
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
425
|
-
className: classNames([styles.container, (
|
|
419
|
+
className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
426
420
|
"data-screen-ready": isStatic || isCapture || ready
|
|
427
421
|
}, longPressBind, {
|
|
428
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,
|
|
@@ -130,24 +130,16 @@ 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
|
-
apiMediaRef =
|
|
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
|
+
_ref3$mediaRef = _ref3.mediaRef,
|
|
142
|
+
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
151
143
|
|
|
152
144
|
React.useEffect(function () {
|
|
153
145
|
if (apiMediaRef !== null && getMediaRef !== null) {
|
|
@@ -163,8 +155,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
163
155
|
|
|
164
156
|
var _useState3 = React.useState(false),
|
|
165
157
|
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
166
|
-
|
|
167
|
-
|
|
158
|
+
shouldCatchFirstTapToPlay = _useState4[0],
|
|
159
|
+
setShouldCatchFirstTapToPlay = _useState4[1]; // Get api state updates from callback
|
|
168
160
|
|
|
169
161
|
|
|
170
162
|
var _useState5 = React.useState(null),
|
|
@@ -196,13 +188,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
196
188
|
var onDurationChanged = React.useCallback(function (dur) {
|
|
197
189
|
setDuration(dur);
|
|
198
190
|
}, [setDuration]);
|
|
199
|
-
var onPlay = React.useCallback(function (
|
|
200
|
-
var initial =
|
|
191
|
+
var onPlay = React.useCallback(function (_ref4) {
|
|
192
|
+
var initial = _ref4.initial;
|
|
201
193
|
setPlaying(true);
|
|
202
194
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
203
195
|
}, [trackScreenMedia, video]);
|
|
204
|
-
var onPause = React.useCallback(function (
|
|
205
|
-
var midway =
|
|
196
|
+
var onPause = React.useCallback(function (_ref5) {
|
|
197
|
+
var midway = _ref5.midway;
|
|
206
198
|
setPlaying(false);
|
|
207
199
|
trackScreenMedia(video, midway ? 'pause' : 'ended');
|
|
208
200
|
}, [trackScreenMedia, video]);
|
|
@@ -283,20 +275,20 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
283
275
|
}) : null;
|
|
284
276
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
285
277
|
|
|
286
|
-
var
|
|
287
|
-
|
|
288
|
-
videoMetadata =
|
|
289
|
-
|
|
290
|
-
videoUrl =
|
|
278
|
+
var _ref6 = videoMedia || {},
|
|
279
|
+
_ref6$metadata = _ref6.metadata,
|
|
280
|
+
videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
|
|
281
|
+
_ref6$url = _ref6.url,
|
|
282
|
+
videoUrl = _ref6$url === void 0 ? null : _ref6$url;
|
|
291
283
|
|
|
292
284
|
var thumbnailUrl = hooks.useMediaThumbnail(videoMedia, thumbnailFile);
|
|
293
285
|
var hasVideoUrl = videoUrl !== null;
|
|
294
286
|
|
|
295
|
-
var
|
|
296
|
-
|
|
297
|
-
videoWidth =
|
|
298
|
-
|
|
299
|
-
videoHeight =
|
|
287
|
+
var _ref7 = videoMetadata || {},
|
|
288
|
+
_ref7$width = _ref7.width,
|
|
289
|
+
videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
|
|
290
|
+
_ref7$height = _ref7.height,
|
|
291
|
+
videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
300
292
|
|
|
301
293
|
var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
302
294
|
cover: fullscreen
|
|
@@ -317,11 +309,16 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
317
309
|
}, [videoUrl, hasVideoUrl, setReady]);
|
|
318
310
|
var onVideoReady = React.useCallback(function () {
|
|
319
311
|
setReady(true);
|
|
320
|
-
|
|
321
|
-
if (autoPlay && !playing) {
|
|
322
|
-
setPlayOnFirstTap(true); // @note: this sets up a button that plays the video on click for folks who are low on battery on their device: e.g. ios stops the autoplay of videos in that case...
|
|
323
|
-
}
|
|
324
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]);
|
|
325
322
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
326
323
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
327
324
|
key: "video",
|
|
@@ -375,11 +372,11 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
375
372
|
onVolumeChanged: onVolumeChanged,
|
|
376
373
|
focusable: current && isView,
|
|
377
374
|
shouldLoad: mediaShouldLoad
|
|
378
|
-
}))) : null),
|
|
379
|
-
key: "
|
|
375
|
+
}))) : null), shouldCatchFirstTapToPlay ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
376
|
+
key: "tap-catcher-button",
|
|
380
377
|
type: "button",
|
|
381
|
-
onTouchStart:
|
|
382
|
-
className:
|
|
378
|
+
onTouchStart: play,
|
|
379
|
+
className: styles.unmuteAndPlayButton
|
|
383
380
|
}) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
384
381
|
key: "bottom-content",
|
|
385
382
|
className: styles.bottomContent
|
|
@@ -393,8 +390,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
393
390
|
currentTime: currentTime
|
|
394
391
|
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
395
392
|
className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
396
|
-
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(
|
|
397
|
-
|
|
393
|
+
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
394
|
+
className: styles.controls
|
|
398
395
|
}, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
|
|
399
396
|
className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
|
|
400
397
|
withControls: withControls,
|
|
@@ -409,15 +406,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
409
406
|
onToggleMute: onToggleMute,
|
|
410
407
|
onSeek: onSeek,
|
|
411
408
|
focusable: current && isView
|
|
412
|
-
})
|
|
409
|
+
}), withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
413
410
|
key: "video-button",
|
|
414
|
-
style: {
|
|
415
|
-
height: controlsHeight
|
|
416
|
-
},
|
|
417
411
|
type: "button",
|
|
418
412
|
onTouchStart: onShowControls,
|
|
419
|
-
className:
|
|
420
|
-
})) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
413
|
+
className: styles.showControlsButton
|
|
414
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
421
415
|
style: {
|
|
422
416
|
marginTop: -spacing / 2
|
|
423
417
|
}
|
|
@@ -443,7 +437,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
443
437
|
isSmall: true
|
|
444
438
|
}) : null))) : null];
|
|
445
439
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
446
|
-
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)]),
|
|
447
441
|
"data-screen-ready": isStatic || isCapture || ready
|
|
448
442
|
}, longPressBind, {
|
|
449
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
|
}
|