@micromag/screen-video 0.3.150 → 0.3.156
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 +128 -217
- package/lib/index.js +125 -215
- package/package.json +11 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-video-
|
|
1
|
+
.micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding: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-bottom{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out}.micromag-screen-video-container .micromag-screen-video-bottom>*{margin-bottom:10px}.micromag-screen-video-container .micromag-screen-video-bottom>:last-child{margin-bottom: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-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}
|
package/es/index.js
CHANGED
|
@@ -5,22 +5,21 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
5
5
|
import { getSizeWithinBounds } from '@folklore/size';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
|
-
import React, {
|
|
8
|
+
import React, { 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
|
-
import { useScreenSize, useScreenRenderContext, useViewerNavigation } from '@micromag/core/contexts';
|
|
12
|
-
import { useTrackScreenMedia,
|
|
11
|
+
import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
|
|
12
|
+
import { useTrackScreenMedia, useActivityDetector, 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';
|
|
16
16
|
import Container from '@micromag/element-container';
|
|
17
17
|
import Image from '@micromag/element-image';
|
|
18
|
-
import MediaControls, { SeekBar } from '@micromag/element-media-controls';
|
|
19
18
|
import Video from '@micromag/element-video';
|
|
20
19
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
21
20
|
import { Video as Video$1, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
22
21
|
|
|
23
|
-
var styles = {"
|
|
22
|
+
var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","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","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
|
|
24
23
|
|
|
25
24
|
var propTypes = {
|
|
26
25
|
layout: PropTypes.oneOf(['middle', 'full']),
|
|
@@ -32,9 +31,7 @@ var propTypes = {
|
|
|
32
31
|
active: PropTypes.bool,
|
|
33
32
|
transitions: PropTypes$1.transitions,
|
|
34
33
|
spacing: PropTypes.number,
|
|
35
|
-
|
|
36
|
-
enableInteraction: PropTypes.func,
|
|
37
|
-
disableInteraction: PropTypes.func,
|
|
34
|
+
mediaRef: PropTypes.func,
|
|
38
35
|
className: PropTypes.string
|
|
39
36
|
};
|
|
40
37
|
var defaultProps = {
|
|
@@ -47,14 +44,12 @@ var defaultProps = {
|
|
|
47
44
|
active: true,
|
|
48
45
|
transitions: null,
|
|
49
46
|
spacing: 20,
|
|
50
|
-
|
|
51
|
-
enableInteraction: null,
|
|
52
|
-
disableInteraction: null,
|
|
47
|
+
mediaRef: null,
|
|
53
48
|
className: null
|
|
54
49
|
};
|
|
55
50
|
|
|
56
51
|
var VideoScreen = function VideoScreen(_ref) {
|
|
57
|
-
var
|
|
52
|
+
var _ref7;
|
|
58
53
|
|
|
59
54
|
var layout = _ref.layout,
|
|
60
55
|
video = _ref.video,
|
|
@@ -65,9 +60,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
65
60
|
active = _ref.active,
|
|
66
61
|
transitions = _ref.transitions,
|
|
67
62
|
spacing = _ref.spacing,
|
|
68
|
-
|
|
69
|
-
enableInteraction = _ref.enableInteraction,
|
|
70
|
-
disableInteraction = _ref.disableInteraction,
|
|
63
|
+
customMediaRef = _ref.mediaRef,
|
|
71
64
|
className = _ref.className;
|
|
72
65
|
var trackScreenMedia = useTrackScreenMedia('video');
|
|
73
66
|
|
|
@@ -87,7 +80,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
87
80
|
var _useViewerNavigation = useViewerNavigation(),
|
|
88
81
|
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
89
82
|
|
|
90
|
-
var
|
|
83
|
+
var _useViewerContext = useViewerContext(),
|
|
84
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
85
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
86
|
+
|
|
87
|
+
var _useViewerWebView = useViewerWebView(),
|
|
88
|
+
openWebView = _useViewerWebView.open;
|
|
89
|
+
|
|
91
90
|
var mediaShouldLoad = current || active;
|
|
92
91
|
var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
|
|
93
92
|
|
|
@@ -96,8 +95,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
96
95
|
autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
|
|
97
96
|
_ref2$media = _ref2.media,
|
|
98
97
|
videoMedia = _ref2$media === void 0 ? null : _ref2$media,
|
|
99
|
-
_ref2$
|
|
100
|
-
|
|
98
|
+
_ref2$thumbnail = _ref2.thumbnail,
|
|
99
|
+
thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
|
|
101
100
|
_ref2$closedCaptions = _ref2.closedCaptions,
|
|
102
101
|
closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
|
|
103
102
|
_ref2$withSeekBar = _ref2.withSeekBar,
|
|
@@ -109,54 +108,79 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
109
108
|
_ref2$progressColor = _ref2.progressColor,
|
|
110
109
|
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
111
110
|
|
|
112
|
-
var
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
_ref3$mediaRef = _ref3.mediaRef,
|
|
121
|
-
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
111
|
+
var _usePlaybackContext = usePlaybackContext(),
|
|
112
|
+
playing = _usePlaybackContext.playing,
|
|
113
|
+
muted = _usePlaybackContext.muted,
|
|
114
|
+
setControls = _usePlaybackContext.setControls,
|
|
115
|
+
setControlsTheme = _usePlaybackContext.setControlsTheme,
|
|
116
|
+
setPlaying = _usePlaybackContext.setPlaying,
|
|
117
|
+
showControls = _usePlaybackContext.showControls,
|
|
118
|
+
hideControls = _usePlaybackContext.hideControls;
|
|
122
119
|
|
|
120
|
+
var mediaRef = usePlaybackMediaRef(current);
|
|
121
|
+
var backgroundPlaying = current && (isView || isEdit);
|
|
122
|
+
var videoPlaying = current && (isView || isEdit) && playing;
|
|
123
123
|
useEffect(function () {
|
|
124
|
-
if (
|
|
125
|
-
|
|
124
|
+
if (!current) {
|
|
125
|
+
return function () {};
|
|
126
126
|
}
|
|
127
|
-
}, [apiMediaRef, getMediaRef]);
|
|
128
|
-
var mouseMoveRef = useRef(null);
|
|
129
127
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
128
|
+
if (withControls || withSeekBar) {
|
|
129
|
+
setControls(true);
|
|
130
|
+
setControlsTheme({
|
|
131
|
+
seekBarOnly: withSeekBar && !withControls,
|
|
132
|
+
color: color,
|
|
133
|
+
progressColor: progressColor
|
|
134
|
+
});
|
|
135
|
+
} else {
|
|
136
|
+
setControls(false);
|
|
137
|
+
}
|
|
134
138
|
|
|
139
|
+
return function () {
|
|
140
|
+
if (withControls || withSeekBar) {
|
|
141
|
+
setControls(false);
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
}, [current, withControls, setControls, withSeekBar, color, progressColor]);
|
|
145
|
+
useEffect(function () {
|
|
146
|
+
if (customMediaRef !== null) {
|
|
147
|
+
customMediaRef(mediaRef.current);
|
|
148
|
+
}
|
|
149
|
+
}, [mediaRef.current]);
|
|
150
|
+
useEffect(function () {
|
|
151
|
+
if (current && autoPlay && !playing) {
|
|
152
|
+
setPlaying(true);
|
|
153
|
+
}
|
|
154
|
+
}, [current, autoPlay]);
|
|
135
155
|
|
|
136
|
-
var
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
156
|
+
var _useActivityDetector = useActivityDetector({
|
|
157
|
+
disabled: !current || !isView,
|
|
158
|
+
timeout: 2000
|
|
159
|
+
}),
|
|
160
|
+
activityDetectorRef = _useActivityDetector.ref,
|
|
161
|
+
activityDetected = _useActivityDetector.detected;
|
|
140
162
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
163
|
+
useEffect(function () {
|
|
164
|
+
if (!current) {
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
145
167
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
168
|
+
if (activityDetected) {
|
|
169
|
+
showControls();
|
|
170
|
+
} else {
|
|
171
|
+
hideControls();
|
|
172
|
+
}
|
|
173
|
+
}, [activityDetected, showControls, hideControls]); // Get api state updates from callback
|
|
150
174
|
|
|
151
|
-
var
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
175
|
+
var _useState = useState(null),
|
|
176
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
177
|
+
currentTime = _useState2[0],
|
|
178
|
+
setCurrentTime = _useState2[1];
|
|
155
179
|
|
|
156
|
-
var
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
180
|
+
var _useState3 = useState(null),
|
|
181
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
182
|
+
duration = _useState4[0],
|
|
183
|
+
setDuration = _useState4[1];
|
|
160
184
|
|
|
161
185
|
var onTimeUpdate = useCallback(function (time) {
|
|
162
186
|
setCurrentTime(time);
|
|
@@ -164,86 +188,37 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
164
188
|
var onProgressStep = useCallback(function (step) {
|
|
165
189
|
trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
|
|
166
190
|
}, [trackScreenMedia, video]);
|
|
167
|
-
var
|
|
191
|
+
var onDurationChange = useCallback(function (dur) {
|
|
168
192
|
setDuration(dur);
|
|
169
193
|
}, [setDuration]);
|
|
170
|
-
var onPlay = useCallback(function (
|
|
171
|
-
var initial =
|
|
172
|
-
setPlaying(true);
|
|
194
|
+
var onPlay = useCallback(function (_ref3) {
|
|
195
|
+
var initial = _ref3.initial;
|
|
173
196
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
174
197
|
}, [trackScreenMedia, video]);
|
|
175
|
-
var onPause = useCallback(function (
|
|
176
|
-
var midway =
|
|
177
|
-
setPlaying(false);
|
|
198
|
+
var onPause = useCallback(function (_ref4) {
|
|
199
|
+
var midway = _ref4.midway;
|
|
178
200
|
trackScreenMedia(video, midway ? 'pause' : 'ended');
|
|
179
201
|
}, [trackScreenMedia, video]);
|
|
180
|
-
var onVolumeChanged = useCallback(function (isMuted) {
|
|
181
|
-
setMuted(isMuted);
|
|
182
|
-
trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
|
|
183
|
-
}, [trackScreenMedia, video]);
|
|
184
|
-
var onSeek = useCallback(function (e) {
|
|
185
|
-
seek(e);
|
|
186
|
-
play();
|
|
187
|
-
}, [seek, play]);
|
|
188
202
|
var onSeeked = useCallback(function (time) {
|
|
189
203
|
if (time > 0) {
|
|
190
204
|
trackScreenMedia(video, 'seek');
|
|
191
205
|
}
|
|
192
206
|
}, [trackScreenMedia, video]);
|
|
193
|
-
var onToggleMute = useCallback(function () {
|
|
194
|
-
if (muted && !playing) {
|
|
195
|
-
play();
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
toggleMute();
|
|
199
|
-
}, [muted, toggleMute]);
|
|
200
207
|
var onEnded = useCallback(function () {
|
|
208
|
+
setPlaying(false);
|
|
209
|
+
|
|
201
210
|
if (shouldGotoNextScreenOnEnd) {
|
|
202
211
|
gotoNextScreen();
|
|
203
212
|
}
|
|
204
|
-
}, [current, shouldGotoNextScreenOnEnd,
|
|
205
|
-
useEffect(function () {
|
|
206
|
-
if (!current && playing) {
|
|
207
|
-
pause();
|
|
208
|
-
}
|
|
209
|
-
}, [playing, current]);
|
|
210
|
-
var onMouseMove = useCallback(function (e) {
|
|
211
|
-
var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
|
|
212
|
-
setShowMediaControls(true);
|
|
213
|
-
|
|
214
|
-
if (mouseMoveRef.current !== null) {
|
|
215
|
-
clearTimeout(mouseMoveRef.current);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
mouseMoveRef.current = setTimeout(function () {
|
|
219
|
-
setShowMediaControls(false);
|
|
220
|
-
mouseMoveRef.current = null;
|
|
221
|
-
}, time);
|
|
222
|
-
}, [setShowMediaControls]);
|
|
223
|
-
var onLongPress = useCallback(function () {
|
|
224
|
-
if (!playing) {
|
|
225
|
-
play();
|
|
226
|
-
} else if (withControls) {
|
|
227
|
-
onMouseMove(null, 3000);
|
|
228
|
-
} else {
|
|
229
|
-
pause();
|
|
230
|
-
}
|
|
231
|
-
}, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
|
|
232
|
-
var onShowControls = useCallback(function (e) {
|
|
233
|
-
onMouseMove(e, 3000);
|
|
234
|
-
}, [play, onMouseMove]);
|
|
235
|
-
var longPressBind = useLongPress({
|
|
236
|
-
onLongPress: onLongPress,
|
|
237
|
-
onClick: onMouseMove
|
|
238
|
-
});
|
|
213
|
+
}, [current, shouldGotoNextScreenOnEnd, gotoNextScreen]);
|
|
239
214
|
var fullscreen = layout === 'full';
|
|
240
215
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
241
216
|
var hasVideo = video !== null;
|
|
242
217
|
|
|
243
|
-
var
|
|
244
|
-
|
|
245
|
-
ready =
|
|
246
|
-
setReady =
|
|
218
|
+
var _useState5 = useState(hasVideo),
|
|
219
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
220
|
+
ready = _useState6[0],
|
|
221
|
+
setReady = _useState6[1]; // useState(!hasVideo);
|
|
247
222
|
|
|
248
223
|
|
|
249
224
|
var transitionPlaying = current && ready;
|
|
@@ -254,20 +229,20 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
254
229
|
}) : null;
|
|
255
230
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
256
231
|
|
|
257
|
-
var
|
|
258
|
-
|
|
259
|
-
videoMetadata =
|
|
260
|
-
|
|
261
|
-
videoUrl =
|
|
232
|
+
var _ref5 = videoMedia || {},
|
|
233
|
+
_ref5$metadata = _ref5.metadata,
|
|
234
|
+
videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
|
|
235
|
+
_ref5$url = _ref5.url,
|
|
236
|
+
videoUrl = _ref5$url === void 0 ? null : _ref5$url;
|
|
262
237
|
|
|
263
|
-
var
|
|
238
|
+
var finalThumbnail = useMediaThumbnail(videoMedia, thumbnail);
|
|
264
239
|
var hasVideoUrl = videoUrl !== null;
|
|
265
240
|
|
|
266
|
-
var
|
|
267
|
-
|
|
268
|
-
videoWidth =
|
|
269
|
-
|
|
270
|
-
videoHeight =
|
|
241
|
+
var _ref6 = videoMetadata || {},
|
|
242
|
+
_ref6$width = _ref6.width,
|
|
243
|
+
videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
|
|
244
|
+
_ref6$height = _ref6.height,
|
|
245
|
+
videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
|
|
271
246
|
|
|
272
247
|
var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
273
248
|
cover: fullscreen
|
|
@@ -289,32 +264,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
289
264
|
var onVideoReady = useCallback(function () {
|
|
290
265
|
setReady(true);
|
|
291
266
|
}, [setReady]);
|
|
292
|
-
|
|
293
|
-
* if video can play, but:
|
|
294
|
-
* - it's the current screen
|
|
295
|
-
* - the video doesn't provide visual controls
|
|
296
|
-
* - the video is set to play automatically
|
|
297
|
-
* - and it's **not** playing
|
|
298
|
-
* -> then set up a button that catches a click and plays the video
|
|
299
|
-
*/
|
|
300
|
-
|
|
301
|
-
var onCanPlay = useCallback(function () {
|
|
302
|
-
if (current && !withControls && autoPlay && !playing) {
|
|
303
|
-
setAllowManualPlayOnTap(true);
|
|
304
|
-
}
|
|
305
|
-
}, [current, withControls, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
|
|
306
|
-
var onForcePlay = useCallback(function (e) {
|
|
307
|
-
e.stopPropagation();
|
|
308
|
-
setAllowManualPlayOnTap(false);
|
|
309
|
-
play();
|
|
310
|
-
}, [setAllowManualPlayOnTap, play]);
|
|
311
|
-
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
312
|
-
var items = [allowManualPlayOnTap ? /*#__PURE__*/React.createElement("button", {
|
|
313
|
-
key: "tap-catcher-button",
|
|
314
|
-
type: "button",
|
|
315
|
-
onClick: onForcePlay,
|
|
316
|
-
className: styles.unmuteAndPlayButton
|
|
317
|
-
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
267
|
+
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
318
268
|
key: "video",
|
|
319
269
|
placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
|
|
320
270
|
className: styles.placeholder
|
|
@@ -341,35 +291,39 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
341
291
|
}
|
|
342
292
|
}, isPreview || isCapture ? /*#__PURE__*/React.createElement(Image, {
|
|
343
293
|
className: styles.image,
|
|
344
|
-
media:
|
|
345
|
-
url: thumbnailUrl,
|
|
346
|
-
metadata: {
|
|
347
|
-
width: videoWidth,
|
|
348
|
-
height: videoHeight
|
|
349
|
-
}
|
|
350
|
-
},
|
|
294
|
+
media: finalThumbnail,
|
|
351
295
|
width: resizedVideoWidth,
|
|
352
296
|
height: resizedVideoHeight,
|
|
297
|
+
objectFit: {
|
|
298
|
+
fit: 'cover'
|
|
299
|
+
},
|
|
353
300
|
resolution: resolution,
|
|
354
301
|
shouldLoad: mediaShouldLoad
|
|
355
302
|
}) : /*#__PURE__*/React.createElement(Video, Object.assign({}, finalVideo, {
|
|
356
|
-
|
|
303
|
+
paused: !videoPlaying,
|
|
304
|
+
muted: muted,
|
|
305
|
+
mediaRef: mediaRef,
|
|
357
306
|
className: styles.video,
|
|
358
307
|
onReady: onVideoReady,
|
|
359
308
|
onPlay: onPlay,
|
|
360
|
-
onCanPlay: onCanPlay,
|
|
361
309
|
onPause: onPause,
|
|
362
310
|
onTimeUpdate: onTimeUpdate,
|
|
363
311
|
onProgressStep: onProgressStep,
|
|
364
|
-
|
|
312
|
+
onDurationChange: onDurationChange,
|
|
365
313
|
onSeeked: onSeeked,
|
|
366
314
|
onEnded: onEnded,
|
|
367
|
-
onVolumeChanged: onVolumeChanged,
|
|
368
315
|
focusable: current && isView,
|
|
369
316
|
shouldLoad: mediaShouldLoad
|
|
370
317
|
}))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
371
318
|
key: "bottom-content",
|
|
372
|
-
className: styles.
|
|
319
|
+
className: styles.bottom,
|
|
320
|
+
style: {
|
|
321
|
+
transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
|
|
322
|
+
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
323
|
+
paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
324
|
+
paddingBottom: spacing / 2,
|
|
325
|
+
paddingTop: 0
|
|
326
|
+
}
|
|
373
327
|
}, /*#__PURE__*/React.createElement(Transitions, {
|
|
374
328
|
playing: transitionPlaying,
|
|
375
329
|
transitions: transitions,
|
|
@@ -378,60 +332,17 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
378
332
|
className: styles.closedCaptions,
|
|
379
333
|
media: closedCaptions,
|
|
380
334
|
currentTime: currentTime
|
|
381
|
-
}) : null, /*#__PURE__*/React.createElement(
|
|
382
|
-
className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
383
|
-
}, hasVideoUrl ? /*#__PURE__*/React.createElement("div", {
|
|
384
|
-
className: styles.controls
|
|
385
|
-
}, /*#__PURE__*/React.createElement(MediaControls, {
|
|
386
|
-
className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
|
|
387
|
-
withControls: withControls,
|
|
388
|
-
withSeekBar: withSeekBar,
|
|
389
|
-
color: color,
|
|
390
|
-
progressColor: progressColor,
|
|
391
|
-
playing: playing,
|
|
392
|
-
muted: muted,
|
|
393
|
-
currentTime: currentTime,
|
|
394
|
-
duration: duration,
|
|
395
|
-
onTogglePlay: togglePlay,
|
|
396
|
-
onToggleMute: onToggleMute,
|
|
397
|
-
onSeek: onSeek,
|
|
398
|
-
focusable: current && isView
|
|
399
|
-
}), withControls ? /*#__PURE__*/React.createElement("button", {
|
|
400
|
-
key: "video-button",
|
|
401
|
-
type: "button",
|
|
402
|
-
onTouchStart: onShowControls,
|
|
403
|
-
className: styles.showControlsButton
|
|
404
|
-
}) : null) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
405
|
-
style: {
|
|
406
|
-
marginTop: -spacing / 2
|
|
407
|
-
}
|
|
408
|
-
}, /*#__PURE__*/React.createElement(CallToAction, {
|
|
335
|
+
}) : null, hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
|
|
409
336
|
className: styles.callToAction,
|
|
410
|
-
callToAction: callToAction,
|
|
411
337
|
animationDisabled: isPreview,
|
|
412
338
|
focusable: current && isView,
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
},
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
}
|
|
420
|
-
currentTime: currentTime,
|
|
421
|
-
duration: duration,
|
|
422
|
-
playing: playing,
|
|
423
|
-
focusable: false,
|
|
424
|
-
backgroundColor: color,
|
|
425
|
-
progressColor: progressColor,
|
|
426
|
-
className: classNames([styles.bottomSeekBar, _defineProperty({}, styles.isHidden, visibleControls)]),
|
|
427
|
-
isSmall: true
|
|
428
|
-
}) : null))) : null];
|
|
429
|
-
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
430
|
-
className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
431
|
-
"data-screen-ready": isStatic || isCapture || ready
|
|
432
|
-
}, longPressBind, {
|
|
433
|
-
onMouseMove: onMouseMove
|
|
434
|
-
}), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
339
|
+
openWebView: openWebView
|
|
340
|
+
})) : null)) : null];
|
|
341
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
342
|
+
className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
|
|
343
|
+
"data-screen-ready": isStatic || isCapture || ready,
|
|
344
|
+
ref: activityDetectorRef
|
|
345
|
+
}, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
435
346
|
background: background,
|
|
436
347
|
width: width,
|
|
437
348
|
height: height,
|
package/lib/index.js
CHANGED
|
@@ -19,7 +19,6 @@ var CallToAction = require('@micromag/element-call-to-action');
|
|
|
19
19
|
var ClosedCaptions = require('@micromag/element-closed-captions');
|
|
20
20
|
var Container = require('@micromag/element-container');
|
|
21
21
|
var Image = require('@micromag/element-image');
|
|
22
|
-
var MediaControls = require('@micromag/element-media-controls');
|
|
23
22
|
var Video = require('@micromag/element-video');
|
|
24
23
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
25
24
|
var appleNews = require('@micromag/transforms/apple-news');
|
|
@@ -37,11 +36,10 @@ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
|
|
|
37
36
|
var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
|
|
38
37
|
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
39
38
|
var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
|
|
40
|
-
var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
|
|
41
39
|
var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
|
|
42
40
|
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
43
41
|
|
|
44
|
-
var styles = {"
|
|
42
|
+
var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","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","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
|
|
45
43
|
|
|
46
44
|
var propTypes = {
|
|
47
45
|
layout: PropTypes__default["default"].oneOf(['middle', 'full']),
|
|
@@ -53,9 +51,7 @@ var propTypes = {
|
|
|
53
51
|
active: PropTypes__default["default"].bool,
|
|
54
52
|
transitions: core.PropTypes.transitions,
|
|
55
53
|
spacing: PropTypes__default["default"].number,
|
|
56
|
-
|
|
57
|
-
enableInteraction: PropTypes__default["default"].func,
|
|
58
|
-
disableInteraction: PropTypes__default["default"].func,
|
|
54
|
+
mediaRef: PropTypes__default["default"].func,
|
|
59
55
|
className: PropTypes__default["default"].string
|
|
60
56
|
};
|
|
61
57
|
var defaultProps = {
|
|
@@ -68,14 +64,12 @@ var defaultProps = {
|
|
|
68
64
|
active: true,
|
|
69
65
|
transitions: null,
|
|
70
66
|
spacing: 20,
|
|
71
|
-
|
|
72
|
-
enableInteraction: null,
|
|
73
|
-
disableInteraction: null,
|
|
67
|
+
mediaRef: null,
|
|
74
68
|
className: null
|
|
75
69
|
};
|
|
76
70
|
|
|
77
71
|
var VideoScreen = function VideoScreen(_ref) {
|
|
78
|
-
var
|
|
72
|
+
var _ref7;
|
|
79
73
|
|
|
80
74
|
var layout = _ref.layout,
|
|
81
75
|
video = _ref.video,
|
|
@@ -86,9 +80,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
86
80
|
active = _ref.active,
|
|
87
81
|
transitions = _ref.transitions,
|
|
88
82
|
spacing = _ref.spacing,
|
|
89
|
-
|
|
90
|
-
enableInteraction = _ref.enableInteraction,
|
|
91
|
-
disableInteraction = _ref.disableInteraction,
|
|
83
|
+
customMediaRef = _ref.mediaRef,
|
|
92
84
|
className = _ref.className;
|
|
93
85
|
var trackScreenMedia = hooks.useTrackScreenMedia('video');
|
|
94
86
|
|
|
@@ -108,7 +100,13 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
108
100
|
var _useViewerNavigation = contexts.useViewerNavigation(),
|
|
109
101
|
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
110
102
|
|
|
111
|
-
var
|
|
103
|
+
var _useViewerContext = contexts.useViewerContext(),
|
|
104
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
105
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
106
|
+
|
|
107
|
+
var _useViewerWebView = contexts.useViewerWebView(),
|
|
108
|
+
openWebView = _useViewerWebView.open;
|
|
109
|
+
|
|
112
110
|
var mediaShouldLoad = current || active;
|
|
113
111
|
var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
|
|
114
112
|
|
|
@@ -117,8 +115,8 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
117
115
|
autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
|
|
118
116
|
_ref2$media = _ref2.media,
|
|
119
117
|
videoMedia = _ref2$media === void 0 ? null : _ref2$media,
|
|
120
|
-
_ref2$
|
|
121
|
-
|
|
118
|
+
_ref2$thumbnail = _ref2.thumbnail,
|
|
119
|
+
thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
|
|
122
120
|
_ref2$closedCaptions = _ref2.closedCaptions,
|
|
123
121
|
closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
|
|
124
122
|
_ref2$withSeekBar = _ref2.withSeekBar,
|
|
@@ -130,54 +128,79 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
130
128
|
_ref2$progressColor = _ref2.progressColor,
|
|
131
129
|
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
132
130
|
|
|
133
|
-
var
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
_ref3$mediaRef = _ref3.mediaRef,
|
|
142
|
-
apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
|
|
131
|
+
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
132
|
+
playing = _usePlaybackContext.playing,
|
|
133
|
+
muted = _usePlaybackContext.muted,
|
|
134
|
+
setControls = _usePlaybackContext.setControls,
|
|
135
|
+
setControlsTheme = _usePlaybackContext.setControlsTheme,
|
|
136
|
+
setPlaying = _usePlaybackContext.setPlaying,
|
|
137
|
+
showControls = _usePlaybackContext.showControls,
|
|
138
|
+
hideControls = _usePlaybackContext.hideControls;
|
|
143
139
|
|
|
140
|
+
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
141
|
+
var backgroundPlaying = current && (isView || isEdit);
|
|
142
|
+
var videoPlaying = current && (isView || isEdit) && playing;
|
|
144
143
|
React.useEffect(function () {
|
|
145
|
-
if (
|
|
146
|
-
|
|
144
|
+
if (!current) {
|
|
145
|
+
return function () {};
|
|
147
146
|
}
|
|
148
|
-
}, [apiMediaRef, getMediaRef]);
|
|
149
|
-
var mouseMoveRef = React.useRef(null);
|
|
150
147
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
148
|
+
if (withControls || withSeekBar) {
|
|
149
|
+
setControls(true);
|
|
150
|
+
setControlsTheme({
|
|
151
|
+
seekBarOnly: withSeekBar && !withControls,
|
|
152
|
+
color: color,
|
|
153
|
+
progressColor: progressColor
|
|
154
|
+
});
|
|
155
|
+
} else {
|
|
156
|
+
setControls(false);
|
|
157
|
+
}
|
|
155
158
|
|
|
159
|
+
return function () {
|
|
160
|
+
if (withControls || withSeekBar) {
|
|
161
|
+
setControls(false);
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
}, [current, withControls, setControls, withSeekBar, color, progressColor]);
|
|
165
|
+
React.useEffect(function () {
|
|
166
|
+
if (customMediaRef !== null) {
|
|
167
|
+
customMediaRef(mediaRef.current);
|
|
168
|
+
}
|
|
169
|
+
}, [mediaRef.current]);
|
|
170
|
+
React.useEffect(function () {
|
|
171
|
+
if (current && autoPlay && !playing) {
|
|
172
|
+
setPlaying(true);
|
|
173
|
+
}
|
|
174
|
+
}, [current, autoPlay]);
|
|
156
175
|
|
|
157
|
-
var
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
176
|
+
var _useActivityDetector = hooks.useActivityDetector({
|
|
177
|
+
disabled: !current || !isView,
|
|
178
|
+
timeout: 2000
|
|
179
|
+
}),
|
|
180
|
+
activityDetectorRef = _useActivityDetector.ref,
|
|
181
|
+
activityDetected = _useActivityDetector.detected;
|
|
161
182
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
183
|
+
React.useEffect(function () {
|
|
184
|
+
if (!current) {
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
166
187
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
188
|
+
if (activityDetected) {
|
|
189
|
+
showControls();
|
|
190
|
+
} else {
|
|
191
|
+
hideControls();
|
|
192
|
+
}
|
|
193
|
+
}, [activityDetected, showControls, hideControls]); // Get api state updates from callback
|
|
171
194
|
|
|
172
|
-
var
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
195
|
+
var _useState = React.useState(null),
|
|
196
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
197
|
+
currentTime = _useState2[0],
|
|
198
|
+
setCurrentTime = _useState2[1];
|
|
176
199
|
|
|
177
|
-
var
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
200
|
+
var _useState3 = React.useState(null),
|
|
201
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
202
|
+
duration = _useState4[0],
|
|
203
|
+
setDuration = _useState4[1];
|
|
181
204
|
|
|
182
205
|
var onTimeUpdate = React.useCallback(function (time) {
|
|
183
206
|
setCurrentTime(time);
|
|
@@ -185,86 +208,37 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
185
208
|
var onProgressStep = React.useCallback(function (step) {
|
|
186
209
|
trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
|
|
187
210
|
}, [trackScreenMedia, video]);
|
|
188
|
-
var
|
|
211
|
+
var onDurationChange = React.useCallback(function (dur) {
|
|
189
212
|
setDuration(dur);
|
|
190
213
|
}, [setDuration]);
|
|
191
|
-
var onPlay = React.useCallback(function (
|
|
192
|
-
var initial =
|
|
193
|
-
setPlaying(true);
|
|
214
|
+
var onPlay = React.useCallback(function (_ref3) {
|
|
215
|
+
var initial = _ref3.initial;
|
|
194
216
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
195
217
|
}, [trackScreenMedia, video]);
|
|
196
|
-
var onPause = React.useCallback(function (
|
|
197
|
-
var midway =
|
|
198
|
-
setPlaying(false);
|
|
218
|
+
var onPause = React.useCallback(function (_ref4) {
|
|
219
|
+
var midway = _ref4.midway;
|
|
199
220
|
trackScreenMedia(video, midway ? 'pause' : 'ended');
|
|
200
221
|
}, [trackScreenMedia, video]);
|
|
201
|
-
var onVolumeChanged = React.useCallback(function (isMuted) {
|
|
202
|
-
setMuted(isMuted);
|
|
203
|
-
trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
|
|
204
|
-
}, [trackScreenMedia, video]);
|
|
205
|
-
var onSeek = React.useCallback(function (e) {
|
|
206
|
-
seek(e);
|
|
207
|
-
play();
|
|
208
|
-
}, [seek, play]);
|
|
209
222
|
var onSeeked = React.useCallback(function (time) {
|
|
210
223
|
if (time > 0) {
|
|
211
224
|
trackScreenMedia(video, 'seek');
|
|
212
225
|
}
|
|
213
226
|
}, [trackScreenMedia, video]);
|
|
214
|
-
var onToggleMute = React.useCallback(function () {
|
|
215
|
-
if (muted && !playing) {
|
|
216
|
-
play();
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
toggleMute();
|
|
220
|
-
}, [muted, toggleMute]);
|
|
221
227
|
var onEnded = React.useCallback(function () {
|
|
228
|
+
setPlaying(false);
|
|
229
|
+
|
|
222
230
|
if (shouldGotoNextScreenOnEnd) {
|
|
223
231
|
gotoNextScreen();
|
|
224
232
|
}
|
|
225
|
-
}, [current, shouldGotoNextScreenOnEnd,
|
|
226
|
-
React.useEffect(function () {
|
|
227
|
-
if (!current && playing) {
|
|
228
|
-
pause();
|
|
229
|
-
}
|
|
230
|
-
}, [playing, current]);
|
|
231
|
-
var onMouseMove = React.useCallback(function (e) {
|
|
232
|
-
var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
|
|
233
|
-
setShowMediaControls(true);
|
|
234
|
-
|
|
235
|
-
if (mouseMoveRef.current !== null) {
|
|
236
|
-
clearTimeout(mouseMoveRef.current);
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
mouseMoveRef.current = setTimeout(function () {
|
|
240
|
-
setShowMediaControls(false);
|
|
241
|
-
mouseMoveRef.current = null;
|
|
242
|
-
}, time);
|
|
243
|
-
}, [setShowMediaControls]);
|
|
244
|
-
var onLongPress = React.useCallback(function () {
|
|
245
|
-
if (!playing) {
|
|
246
|
-
play();
|
|
247
|
-
} else if (withControls) {
|
|
248
|
-
onMouseMove(null, 3000);
|
|
249
|
-
} else {
|
|
250
|
-
pause();
|
|
251
|
-
}
|
|
252
|
-
}, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
|
|
253
|
-
var onShowControls = React.useCallback(function (e) {
|
|
254
|
-
onMouseMove(e, 3000);
|
|
255
|
-
}, [play, onMouseMove]);
|
|
256
|
-
var longPressBind = hooks.useLongPress({
|
|
257
|
-
onLongPress: onLongPress,
|
|
258
|
-
onClick: onMouseMove
|
|
259
|
-
});
|
|
233
|
+
}, [current, shouldGotoNextScreenOnEnd, gotoNextScreen]);
|
|
260
234
|
var fullscreen = layout === 'full';
|
|
261
235
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
262
236
|
var hasVideo = video !== null;
|
|
263
237
|
|
|
264
|
-
var
|
|
265
|
-
|
|
266
|
-
ready =
|
|
267
|
-
setReady =
|
|
238
|
+
var _useState5 = React.useState(hasVideo),
|
|
239
|
+
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
240
|
+
ready = _useState6[0],
|
|
241
|
+
setReady = _useState6[1]; // useState(!hasVideo);
|
|
268
242
|
|
|
269
243
|
|
|
270
244
|
var transitionPlaying = current && ready;
|
|
@@ -275,20 +249,20 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
275
249
|
}) : null;
|
|
276
250
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
277
251
|
|
|
278
|
-
var
|
|
279
|
-
|
|
280
|
-
videoMetadata =
|
|
281
|
-
|
|
282
|
-
videoUrl =
|
|
252
|
+
var _ref5 = videoMedia || {},
|
|
253
|
+
_ref5$metadata = _ref5.metadata,
|
|
254
|
+
videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
|
|
255
|
+
_ref5$url = _ref5.url,
|
|
256
|
+
videoUrl = _ref5$url === void 0 ? null : _ref5$url;
|
|
283
257
|
|
|
284
|
-
var
|
|
258
|
+
var finalThumbnail = hooks.useMediaThumbnail(videoMedia, thumbnail);
|
|
285
259
|
var hasVideoUrl = videoUrl !== null;
|
|
286
260
|
|
|
287
|
-
var
|
|
288
|
-
|
|
289
|
-
videoWidth =
|
|
290
|
-
|
|
291
|
-
videoHeight =
|
|
261
|
+
var _ref6 = videoMetadata || {},
|
|
262
|
+
_ref6$width = _ref6.width,
|
|
263
|
+
videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
|
|
264
|
+
_ref6$height = _ref6.height,
|
|
265
|
+
videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
|
|
292
266
|
|
|
293
267
|
var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
294
268
|
cover: fullscreen
|
|
@@ -310,32 +284,7 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
310
284
|
var onVideoReady = React.useCallback(function () {
|
|
311
285
|
setReady(true);
|
|
312
286
|
}, [setReady]);
|
|
313
|
-
|
|
314
|
-
* if video can play, but:
|
|
315
|
-
* - it's the current screen
|
|
316
|
-
* - the video doesn't provide visual controls
|
|
317
|
-
* - the video is set to play automatically
|
|
318
|
-
* - and it's **not** playing
|
|
319
|
-
* -> then set up a button that catches a click and plays the video
|
|
320
|
-
*/
|
|
321
|
-
|
|
322
|
-
var onCanPlay = React.useCallback(function () {
|
|
323
|
-
if (current && !withControls && autoPlay && !playing) {
|
|
324
|
-
setAllowManualPlayOnTap(true);
|
|
325
|
-
}
|
|
326
|
-
}, [current, withControls, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
|
|
327
|
-
var onForcePlay = React.useCallback(function (e) {
|
|
328
|
-
e.stopPropagation();
|
|
329
|
-
setAllowManualPlayOnTap(false);
|
|
330
|
-
play();
|
|
331
|
-
}, [setAllowManualPlayOnTap, play]);
|
|
332
|
-
var visibleControls = !autoPlay && !playing || muted || showMediaControls;
|
|
333
|
-
var items = [allowManualPlayOnTap ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
334
|
-
key: "tap-catcher-button",
|
|
335
|
-
type: "button",
|
|
336
|
-
onClick: onForcePlay,
|
|
337
|
-
className: styles.unmuteAndPlayButton
|
|
338
|
-
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
287
|
+
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
339
288
|
key: "video",
|
|
340
289
|
placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
|
|
341
290
|
className: styles.placeholder
|
|
@@ -362,35 +311,39 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
362
311
|
}
|
|
363
312
|
}, isPreview || isCapture ? /*#__PURE__*/React__default["default"].createElement(Image__default["default"], {
|
|
364
313
|
className: styles.image,
|
|
365
|
-
media:
|
|
366
|
-
url: thumbnailUrl,
|
|
367
|
-
metadata: {
|
|
368
|
-
width: videoWidth,
|
|
369
|
-
height: videoHeight
|
|
370
|
-
}
|
|
371
|
-
},
|
|
314
|
+
media: finalThumbnail,
|
|
372
315
|
width: resizedVideoWidth,
|
|
373
316
|
height: resizedVideoHeight,
|
|
317
|
+
objectFit: {
|
|
318
|
+
fit: 'cover'
|
|
319
|
+
},
|
|
374
320
|
resolution: resolution,
|
|
375
321
|
shouldLoad: mediaShouldLoad
|
|
376
322
|
}) : /*#__PURE__*/React__default["default"].createElement(Video__default["default"], Object.assign({}, finalVideo, {
|
|
377
|
-
|
|
323
|
+
paused: !videoPlaying,
|
|
324
|
+
muted: muted,
|
|
325
|
+
mediaRef: mediaRef,
|
|
378
326
|
className: styles.video,
|
|
379
327
|
onReady: onVideoReady,
|
|
380
328
|
onPlay: onPlay,
|
|
381
|
-
onCanPlay: onCanPlay,
|
|
382
329
|
onPause: onPause,
|
|
383
330
|
onTimeUpdate: onTimeUpdate,
|
|
384
331
|
onProgressStep: onProgressStep,
|
|
385
|
-
|
|
332
|
+
onDurationChange: onDurationChange,
|
|
386
333
|
onSeeked: onSeeked,
|
|
387
334
|
onEnded: onEnded,
|
|
388
|
-
onVolumeChanged: onVolumeChanged,
|
|
389
335
|
focusable: current && isView,
|
|
390
336
|
shouldLoad: mediaShouldLoad
|
|
391
337
|
}))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
392
338
|
key: "bottom-content",
|
|
393
|
-
className: styles.
|
|
339
|
+
className: styles.bottom,
|
|
340
|
+
style: {
|
|
341
|
+
transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
|
|
342
|
+
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
343
|
+
paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
344
|
+
paddingBottom: spacing / 2,
|
|
345
|
+
paddingTop: 0
|
|
346
|
+
}
|
|
394
347
|
}, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
395
348
|
playing: transitionPlaying,
|
|
396
349
|
transitions: transitions,
|
|
@@ -399,60 +352,17 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
399
352
|
className: styles.closedCaptions,
|
|
400
353
|
media: closedCaptions,
|
|
401
354
|
currentTime: currentTime
|
|
402
|
-
}) : null, /*#__PURE__*/React__default["default"].createElement("
|
|
403
|
-
className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
|
|
404
|
-
}, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
405
|
-
className: styles.controls
|
|
406
|
-
}, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
|
|
407
|
-
className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
|
|
408
|
-
withControls: withControls,
|
|
409
|
-
withSeekBar: withSeekBar,
|
|
410
|
-
color: color,
|
|
411
|
-
progressColor: progressColor,
|
|
412
|
-
playing: playing,
|
|
413
|
-
muted: muted,
|
|
414
|
-
currentTime: currentTime,
|
|
415
|
-
duration: duration,
|
|
416
|
-
onTogglePlay: togglePlay,
|
|
417
|
-
onToggleMute: onToggleMute,
|
|
418
|
-
onSeek: onSeek,
|
|
419
|
-
focusable: current && isView
|
|
420
|
-
}), withControls ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
421
|
-
key: "video-button",
|
|
422
|
-
type: "button",
|
|
423
|
-
onTouchStart: onShowControls,
|
|
424
|
-
className: styles.showControlsButton
|
|
425
|
-
}) : null) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
426
|
-
style: {
|
|
427
|
-
marginTop: -spacing / 2
|
|
428
|
-
}
|
|
429
|
-
}, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
|
|
355
|
+
}) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
|
|
430
356
|
className: styles.callToAction,
|
|
431
|
-
callToAction: callToAction,
|
|
432
357
|
animationDisabled: isPreview,
|
|
433
358
|
focusable: current && isView,
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
},
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
}
|
|
441
|
-
currentTime: currentTime,
|
|
442
|
-
duration: duration,
|
|
443
|
-
playing: playing,
|
|
444
|
-
focusable: false,
|
|
445
|
-
backgroundColor: color,
|
|
446
|
-
progressColor: progressColor,
|
|
447
|
-
className: classNames__default["default"]([styles.bottomSeekBar, _defineProperty__default["default"]({}, styles.isHidden, visibleControls)]),
|
|
448
|
-
isSmall: true
|
|
449
|
-
}) : null))) : null];
|
|
450
|
-
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
451
|
-
className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.fullscreen, fullscreen), _ref11)]),
|
|
452
|
-
"data-screen-ready": isStatic || isCapture || ready
|
|
453
|
-
}, longPressBind, {
|
|
454
|
-
onMouseMove: onMouseMove
|
|
455
|
-
}), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
359
|
+
openWebView: openWebView
|
|
360
|
+
})) : null)) : null];
|
|
361
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
362
|
+
className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
|
|
363
|
+
"data-screen-ready": isStatic || isCapture || ready,
|
|
364
|
+
ref: activityDetectorRef
|
|
365
|
+
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
456
366
|
background: background,
|
|
457
367
|
width: width,
|
|
458
368
|
height: height,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-video",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.156",
|
|
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.156",
|
|
54
|
+
"@micromag/element-background": "^0.3.156",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.156",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.156",
|
|
57
|
+
"@micromag/element-container": "^0.3.156",
|
|
58
|
+
"@micromag/element-image": "^0.3.156",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.156",
|
|
60
|
+
"@micromag/element-video": "^0.3.156",
|
|
61
|
+
"@micromag/transforms": "^0.3.156",
|
|
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": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
|
|
72
72
|
}
|