@micromag/screen-video 0.3.131 → 0.3.135
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 +44 -53
- package/lib/index.js +43 -52
- 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,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,12 @@ 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
|
+
var onSuspended = useCallback(function () {
|
|
293
|
+
if (autoPlay) {
|
|
294
|
+
setShouldCatchFirstTapToPlay(true);
|
|
295
|
+
}
|
|
296
|
+
}, [setShouldCatchFirstTapToPlay]);
|
|
304
297
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
305
298
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
306
299
|
key: "video",
|
|
@@ -351,14 +344,15 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
351
344
|
onDurationChanged: onDurationChanged,
|
|
352
345
|
onSeeked: onSeeked,
|
|
353
346
|
onEnded: onEnded,
|
|
347
|
+
onSuspended: onSuspended,
|
|
354
348
|
onVolumeChanged: onVolumeChanged,
|
|
355
349
|
focusable: current && isView,
|
|
356
350
|
shouldLoad: mediaShouldLoad
|
|
357
|
-
}))) : null),
|
|
358
|
-
key: "
|
|
351
|
+
}))) : null), shouldCatchFirstTapToPlay && !playing ? /*#__PURE__*/React.createElement("button", {
|
|
352
|
+
key: "tap-catcher-button",
|
|
359
353
|
type: "button",
|
|
360
|
-
|
|
361
|
-
className:
|
|
354
|
+
onTouchStart: play,
|
|
355
|
+
className: styles.unmuteAndPlayButton
|
|
362
356
|
}) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
363
357
|
key: "bottom-content",
|
|
364
358
|
className: styles.bottomContent
|
|
@@ -372,8 +366,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
372
366
|
currentTime: currentTime
|
|
373
367
|
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
374
368
|
className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
375
|
-
}, hasVideoUrl ? /*#__PURE__*/React.createElement(
|
|
376
|
-
|
|
369
|
+
}, hasVideoUrl ? /*#__PURE__*/React.createElement("div", {
|
|
370
|
+
className: styles.controls
|
|
377
371
|
}, /*#__PURE__*/React.createElement(MediaControls, {
|
|
378
372
|
className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
|
|
379
373
|
withControls: withControls,
|
|
@@ -388,15 +382,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
388
382
|
onToggleMute: onToggleMute,
|
|
389
383
|
onSeek: onSeek,
|
|
390
384
|
focusable: current && isView
|
|
391
|
-
})
|
|
385
|
+
}), withControls ? /*#__PURE__*/React.createElement("button", {
|
|
392
386
|
key: "video-button",
|
|
393
|
-
style: {
|
|
394
|
-
height: controlsHeight
|
|
395
|
-
},
|
|
396
387
|
type: "button",
|
|
397
|
-
|
|
398
|
-
className:
|
|
399
|
-
})) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
388
|
+
onTouchStart: onShowControls,
|
|
389
|
+
className: styles.showControlsButton
|
|
390
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
400
391
|
style: {
|
|
401
392
|
marginTop: -spacing / 2
|
|
402
393
|
}
|
|
@@ -422,7 +413,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
422
413
|
isSmall: true
|
|
423
414
|
}) : null))) : null];
|
|
424
415
|
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
425
|
-
className: classNames([styles.container, (
|
|
416
|
+
className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
426
417
|
"data-screen-ready": isStatic || isCapture || ready
|
|
427
418
|
}, longPressBind, {
|
|
428
419
|
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,12 @@ 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
|
+
var onSuspended = React.useCallback(function () {
|
|
314
|
+
if (autoPlay) {
|
|
315
|
+
setShouldCatchFirstTapToPlay(true);
|
|
316
|
+
}
|
|
317
|
+
}, [setShouldCatchFirstTapToPlay]);
|
|
325
318
|
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
326
319
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
327
320
|
key: "video",
|
|
@@ -372,14 +365,15 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
372
365
|
onDurationChanged: onDurationChanged,
|
|
373
366
|
onSeeked: onSeeked,
|
|
374
367
|
onEnded: onEnded,
|
|
368
|
+
onSuspended: onSuspended,
|
|
375
369
|
onVolumeChanged: onVolumeChanged,
|
|
376
370
|
focusable: current && isView,
|
|
377
371
|
shouldLoad: mediaShouldLoad
|
|
378
|
-
}))) : null),
|
|
379
|
-
key: "
|
|
372
|
+
}))) : null), shouldCatchFirstTapToPlay && !playing ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
373
|
+
key: "tap-catcher-button",
|
|
380
374
|
type: "button",
|
|
381
|
-
|
|
382
|
-
className:
|
|
375
|
+
onTouchStart: play,
|
|
376
|
+
className: styles.unmuteAndPlayButton
|
|
383
377
|
}) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
384
378
|
key: "bottom-content",
|
|
385
379
|
className: styles.bottomContent
|
|
@@ -393,8 +387,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
393
387
|
currentTime: currentTime
|
|
394
388
|
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
395
389
|
className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
396
|
-
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(
|
|
397
|
-
|
|
390
|
+
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
391
|
+
className: styles.controls
|
|
398
392
|
}, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
|
|
399
393
|
className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
|
|
400
394
|
withControls: withControls,
|
|
@@ -409,15 +403,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
409
403
|
onToggleMute: onToggleMute,
|
|
410
404
|
onSeek: onSeek,
|
|
411
405
|
focusable: current && isView
|
|
412
|
-
})
|
|
406
|
+
}), withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
413
407
|
key: "video-button",
|
|
414
|
-
style: {
|
|
415
|
-
height: controlsHeight
|
|
416
|
-
},
|
|
417
408
|
type: "button",
|
|
418
|
-
|
|
419
|
-
className:
|
|
420
|
-
})) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
409
|
+
onTouchStart: onShowControls,
|
|
410
|
+
className: styles.showControlsButton
|
|
411
|
+
}) : null) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
421
412
|
style: {
|
|
422
413
|
marginTop: -spacing / 2
|
|
423
414
|
}
|
|
@@ -443,7 +434,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
443
434
|
isSmall: true
|
|
444
435
|
}) : null))) : null];
|
|
445
436
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
446
|
-
className: classNames__default["default"]([styles.container, (
|
|
437
|
+
className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
447
438
|
"data-screen-ready": isStatic || isCapture || ready
|
|
448
439
|
}, longPressBind, {
|
|
449
440
|
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.135",
|
|
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.135",
|
|
54
|
+
"@micromag/element-background": "^0.3.135",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.135",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.135",
|
|
57
|
+
"@micromag/element-container": "^0.3.135",
|
|
58
|
+
"@micromag/element-image": "^0.3.135",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.135",
|
|
60
|
+
"@micromag/element-video": "^0.3.135",
|
|
61
|
+
"@micromag/transforms": "^0.3.135",
|
|
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": "b9bd185aacc16b6fb5540aa113dc7872c822e279"
|
|
72
72
|
}
|