@micromag/screen-video 0.3.311 → 0.3.322
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 +85 -120
- package/lib/index.js +85 -120
- package/package.json +12 -12
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-video-unmuteAndPlayButton{
|
|
1
|
+
.micromag-screen-video-unmuteAndPlayButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-video-container .micromag-screen-video-background,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container .micromag-screen-video-inner,.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{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-video-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-video-container .micromag-screen-video-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-video-container .micromag-screen-video-background{z-index:0}.micromag-screen-video-container .micromag-screen-video-content{z-index:1}.micromag-screen-video-container .micromag-screen-video-emptyContainer{height:0;padding-bottom:56.25%;top:50%;-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-inner{overflow:hidden;z-index:1}.micromag-screen-video-container .micromag-screen-video-bottom{bottom:0;left:0;position:absolute;-webkit-transition:padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1);transition:padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1);-o-transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1);transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1);transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1);width:100%;z-index:2}.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{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{height:100%;padding-bottom:0;top:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{background-color:transparent;border:0;bottom:0;display:block;height:100%;left:0;opacity:0;position:absolute;right:0;top:0;width:100%;z-index:3}
|
package/es/index.js
CHANGED
|
@@ -19,7 +19,7 @@ import Video from '@micromag/element-video';
|
|
|
19
19
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
20
20
|
import { Video as Video$1, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
21
21
|
|
|
22
|
-
var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","
|
|
22
|
+
var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","video":"micromag-screen-video-video","placeholder":"micromag-screen-video-placeholder","inner":"micromag-screen-video-inner","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","background":"micromag-screen-video-background","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","content":"micromag-screen-video-content","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
|
|
23
23
|
|
|
24
24
|
var propTypes = {
|
|
25
25
|
layout: PropTypes.oneOf(['middle', 'full']),
|
|
@@ -47,84 +47,71 @@ var defaultProps = {
|
|
|
47
47
|
mediaRef: null,
|
|
48
48
|
className: null
|
|
49
49
|
};
|
|
50
|
-
|
|
51
50
|
var VideoScreen = function VideoScreen(_ref) {
|
|
52
51
|
var _ref7;
|
|
53
|
-
|
|
54
52
|
var layout = _ref.layout,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
53
|
+
video = _ref.video,
|
|
54
|
+
gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
|
|
55
|
+
background = _ref.background,
|
|
56
|
+
callToAction = _ref.callToAction,
|
|
57
|
+
current = _ref.current,
|
|
58
|
+
active = _ref.active,
|
|
59
|
+
spacing = _ref.spacing,
|
|
60
|
+
customMediaRef = _ref.mediaRef,
|
|
61
|
+
className = _ref.className;
|
|
64
62
|
var trackScreenMedia = useTrackScreenMedia('video');
|
|
65
|
-
|
|
66
63
|
var _useScreenSize = useScreenSize(),
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
width = _useScreenSize.width,
|
|
65
|
+
height = _useScreenSize.height,
|
|
66
|
+
resolution = _useScreenSize.resolution;
|
|
71
67
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
68
|
+
isView = _useScreenRenderConte.isView,
|
|
69
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
70
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
71
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
72
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
73
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
79
74
|
var _useViewerNavigation = useViewerNavigation(),
|
|
80
|
-
|
|
81
|
-
|
|
75
|
+
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
82
76
|
var _useViewerContext = useViewerContext(),
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
77
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
78
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
86
79
|
var _useViewerWebView = useViewerWebView(),
|
|
87
|
-
|
|
88
|
-
|
|
80
|
+
openWebView = _useViewerWebView.open;
|
|
89
81
|
var mediaShouldLoad = current || active;
|
|
90
82
|
var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
|
|
91
|
-
|
|
92
83
|
var _ref2 = video || {},
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
84
|
+
_ref2$autoPlay = _ref2.autoPlay,
|
|
85
|
+
autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
|
|
86
|
+
_ref2$loop = _ref2.loop,
|
|
87
|
+
loop = _ref2$loop === void 0 ? false : _ref2$loop,
|
|
88
|
+
_ref2$media = _ref2.media,
|
|
89
|
+
videoMedia = _ref2$media === void 0 ? null : _ref2$media,
|
|
90
|
+
_ref2$thumbnail = _ref2.thumbnail,
|
|
91
|
+
thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
|
|
92
|
+
_ref2$closedCaptions = _ref2.closedCaptions,
|
|
93
|
+
closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
|
|
94
|
+
_ref2$withSeekBar = _ref2.withSeekBar,
|
|
95
|
+
withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
|
|
96
|
+
_ref2$withControls = _ref2.withControls,
|
|
97
|
+
withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
|
|
98
|
+
_ref2$color = _ref2.color,
|
|
99
|
+
color = _ref2$color === void 0 ? null : _ref2$color,
|
|
100
|
+
_ref2$progressColor = _ref2.progressColor,
|
|
101
|
+
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
112
102
|
var _usePlaybackContext = usePlaybackContext(),
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
103
|
+
playing = _usePlaybackContext.playing,
|
|
104
|
+
muted = _usePlaybackContext.muted,
|
|
105
|
+
setControls = _usePlaybackContext.setControls,
|
|
106
|
+
setControlsTheme = _usePlaybackContext.setControlsTheme,
|
|
107
|
+
setPlaying = _usePlaybackContext.setPlaying,
|
|
108
|
+
showControls = _usePlaybackContext.showControls,
|
|
109
|
+
hideControls = _usePlaybackContext.hideControls;
|
|
121
110
|
var mediaRef = usePlaybackMediaRef(current);
|
|
122
|
-
|
|
123
111
|
var _useState = useState(false),
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
112
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
113
|
+
hasPlayed = _useState2[0],
|
|
114
|
+
setHasPlayed = _useState2[1];
|
|
128
115
|
var backgroundPlaying = current && (isView || isEdit);
|
|
129
116
|
var videoPlaying = current && (isView || isEdit) && playing;
|
|
130
117
|
var shouldDisplayPoster = isPreview || isCapture;
|
|
@@ -132,19 +119,16 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
132
119
|
if (!current) {
|
|
133
120
|
return function () {};
|
|
134
121
|
}
|
|
135
|
-
|
|
136
122
|
setControlsTheme({
|
|
137
123
|
seekBarOnly: withSeekBar && !withControls,
|
|
138
124
|
color: color,
|
|
139
125
|
progressColor: progressColor
|
|
140
126
|
});
|
|
141
|
-
|
|
142
127
|
if (withControls || withSeekBar) {
|
|
143
128
|
setControls(true);
|
|
144
129
|
} else {
|
|
145
130
|
setControls(false);
|
|
146
131
|
}
|
|
147
|
-
|
|
148
132
|
return function () {
|
|
149
133
|
if (withControls || withSeekBar) {
|
|
150
134
|
setControls(false);
|
|
@@ -162,14 +146,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
162
146
|
}
|
|
163
147
|
}, [current, autoPlay]);
|
|
164
148
|
var viewerContainer = useViewerContainer();
|
|
165
|
-
|
|
166
149
|
var _useActivityDetector = useActivityDetector({
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
150
|
+
element: viewerContainer,
|
|
151
|
+
disabled: !isView,
|
|
152
|
+
timeout: 2000
|
|
153
|
+
}),
|
|
154
|
+
activityDetected = _useActivityDetector.detected;
|
|
173
155
|
var toggleControlsVisibility = useCallback(function () {
|
|
174
156
|
if (activityDetected) {
|
|
175
157
|
showControls();
|
|
@@ -178,17 +160,14 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
178
160
|
}
|
|
179
161
|
}, [activityDetected, showControls, hideControls]);
|
|
180
162
|
useDebounce(toggleControlsVisibility, activityDetected, 1000);
|
|
181
|
-
|
|
182
163
|
var _useState3 = useState(null),
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
164
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
165
|
+
currentTime = _useState4[0],
|
|
166
|
+
setCurrentTime = _useState4[1];
|
|
187
167
|
var _useState5 = useState(null),
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
168
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
169
|
+
duration = _useState6[0],
|
|
170
|
+
setDuration = _useState6[1];
|
|
192
171
|
var onTimeUpdate = useCallback(function (time) {
|
|
193
172
|
setCurrentTime(time);
|
|
194
173
|
}, [duration, setCurrentTime]);
|
|
@@ -200,11 +179,9 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
200
179
|
}, [setDuration]);
|
|
201
180
|
var onPlay = useCallback(function (_ref3) {
|
|
202
181
|
var initial = _ref3.initial;
|
|
203
|
-
|
|
204
182
|
if (!hasPlayed) {
|
|
205
183
|
setHasPlayed(true);
|
|
206
184
|
}
|
|
207
|
-
|
|
208
185
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
209
186
|
}, [trackScreenMedia, video]);
|
|
210
187
|
var onPause = useCallback(function (_ref4) {
|
|
@@ -220,7 +197,6 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
220
197
|
if (current && !loop) {
|
|
221
198
|
setPlaying(false);
|
|
222
199
|
}
|
|
223
|
-
|
|
224
200
|
if (current && shouldGotoNextScreenOnEnd) {
|
|
225
201
|
gotoNextScreen();
|
|
226
202
|
}
|
|
@@ -228,39 +204,32 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
228
204
|
var fullscreen = layout === 'full';
|
|
229
205
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
230
206
|
var hasVideo = video !== null;
|
|
231
|
-
|
|
232
207
|
var _useState7 = useState(hasVideo),
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
208
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
209
|
+
ready = _useState8[0],
|
|
210
|
+
setReady = _useState8[1];
|
|
237
211
|
var finalVideo = useMemo(function () {
|
|
238
212
|
return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
|
|
239
213
|
autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
|
|
240
214
|
}) : null;
|
|
241
215
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
242
|
-
|
|
243
216
|
var _ref5 = videoMedia || {},
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
217
|
+
_ref5$metadata = _ref5.metadata,
|
|
218
|
+
videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
|
|
219
|
+
_ref5$url = _ref5.url,
|
|
220
|
+
videoUrl = _ref5$url === void 0 ? null : _ref5$url;
|
|
249
221
|
var finalThumbnail = useMediaThumbnail(videoMedia, thumbnail);
|
|
250
222
|
var hasVideoUrl = videoUrl !== null;
|
|
251
|
-
|
|
252
223
|
var _ref6 = videoMetadata || {},
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
224
|
+
_ref6$width = _ref6.width,
|
|
225
|
+
videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
|
|
226
|
+
_ref6$height = _ref6.height,
|
|
227
|
+
videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
|
|
258
228
|
var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
229
|
+
cover: fullscreen
|
|
230
|
+
}),
|
|
231
|
+
resizedVideoWidth = _getSizeWithinBounds.width,
|
|
232
|
+
resizedVideoHeight = _getSizeWithinBounds.height;
|
|
264
233
|
var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
|
|
265
234
|
var resizedVideoTop = -(resizedVideoHeight - height) / 2;
|
|
266
235
|
var placeholderProps = fullscreen ? {
|
|
@@ -371,26 +340,21 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
371
340
|
withoutVideo: isPreview
|
|
372
341
|
}) : null);
|
|
373
342
|
};
|
|
374
|
-
|
|
375
343
|
VideoScreen.propTypes = propTypes;
|
|
376
344
|
VideoScreen.defaultProps = defaultProps;
|
|
377
345
|
var VideoScreen$1 = /*#__PURE__*/React.memo(VideoScreen);
|
|
378
346
|
|
|
379
347
|
var transform = function transform(newStory, _ref) {
|
|
380
348
|
var video = _ref.video;
|
|
381
|
-
|
|
382
349
|
var _ref2 = video || {},
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
350
|
+
_ref2$media = _ref2.media,
|
|
351
|
+
media = _ref2$media === void 0 ? null : _ref2$media;
|
|
386
352
|
var _Video = Video$1(newStory, media),
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
353
|
+
titleStory = _Video.story,
|
|
354
|
+
titleComponent = _Video.component;
|
|
390
355
|
var _Container = Container$1(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
356
|
+
containerStory = _Container.story,
|
|
357
|
+
containerComponent = _Container.component;
|
|
394
358
|
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
395
359
|
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
396
360
|
});
|
|
@@ -486,7 +450,8 @@ var definition = {
|
|
|
486
450
|
}, {
|
|
487
451
|
name: 'shareIncentive',
|
|
488
452
|
type: 'share-incentive'
|
|
489
|
-
}
|
|
453
|
+
}
|
|
454
|
+
// {
|
|
490
455
|
// type: 'fields',
|
|
491
456
|
// isList: true,
|
|
492
457
|
// label: defineMessage({
|
package/lib/index.js
CHANGED
|
@@ -39,7 +39,7 @@ var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
|
|
|
39
39
|
var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
|
|
40
40
|
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
41
41
|
|
|
42
|
-
var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","
|
|
42
|
+
var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","video":"micromag-screen-video-video","placeholder":"micromag-screen-video-placeholder","inner":"micromag-screen-video-inner","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","background":"micromag-screen-video-background","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","content":"micromag-screen-video-content","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
|
|
43
43
|
|
|
44
44
|
var propTypes = {
|
|
45
45
|
layout: PropTypes__default["default"].oneOf(['middle', 'full']),
|
|
@@ -67,84 +67,71 @@ var defaultProps = {
|
|
|
67
67
|
mediaRef: null,
|
|
68
68
|
className: null
|
|
69
69
|
};
|
|
70
|
-
|
|
71
70
|
var VideoScreen = function VideoScreen(_ref) {
|
|
72
71
|
var _ref7;
|
|
73
|
-
|
|
74
72
|
var layout = _ref.layout,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
73
|
+
video = _ref.video,
|
|
74
|
+
gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
|
|
75
|
+
background = _ref.background,
|
|
76
|
+
callToAction = _ref.callToAction,
|
|
77
|
+
current = _ref.current,
|
|
78
|
+
active = _ref.active,
|
|
79
|
+
spacing = _ref.spacing,
|
|
80
|
+
customMediaRef = _ref.mediaRef,
|
|
81
|
+
className = _ref.className;
|
|
84
82
|
var trackScreenMedia = hooks.useTrackScreenMedia('video');
|
|
85
|
-
|
|
86
83
|
var _useScreenSize = contexts.useScreenSize(),
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
84
|
+
width = _useScreenSize.width,
|
|
85
|
+
height = _useScreenSize.height,
|
|
86
|
+
resolution = _useScreenSize.resolution;
|
|
91
87
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
88
|
+
isView = _useScreenRenderConte.isView,
|
|
89
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
90
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
91
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
92
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
93
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
99
94
|
var _useViewerNavigation = contexts.useViewerNavigation(),
|
|
100
|
-
|
|
101
|
-
|
|
95
|
+
gotoNextScreen = _useViewerNavigation.gotoNextScreen;
|
|
102
96
|
var _useViewerContext = contexts.useViewerContext(),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
97
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
98
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
106
99
|
var _useViewerWebView = contexts.useViewerWebView(),
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
openWebView = _useViewerWebView.open;
|
|
109
101
|
var mediaShouldLoad = current || active;
|
|
110
102
|
var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
|
|
111
|
-
|
|
112
103
|
var _ref2 = video || {},
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
104
|
+
_ref2$autoPlay = _ref2.autoPlay,
|
|
105
|
+
autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
|
|
106
|
+
_ref2$loop = _ref2.loop,
|
|
107
|
+
loop = _ref2$loop === void 0 ? false : _ref2$loop,
|
|
108
|
+
_ref2$media = _ref2.media,
|
|
109
|
+
videoMedia = _ref2$media === void 0 ? null : _ref2$media,
|
|
110
|
+
_ref2$thumbnail = _ref2.thumbnail,
|
|
111
|
+
thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
|
|
112
|
+
_ref2$closedCaptions = _ref2.closedCaptions,
|
|
113
|
+
closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
|
|
114
|
+
_ref2$withSeekBar = _ref2.withSeekBar,
|
|
115
|
+
withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
|
|
116
|
+
_ref2$withControls = _ref2.withControls,
|
|
117
|
+
withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
|
|
118
|
+
_ref2$color = _ref2.color,
|
|
119
|
+
color = _ref2$color === void 0 ? null : _ref2$color,
|
|
120
|
+
_ref2$progressColor = _ref2.progressColor,
|
|
121
|
+
progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
|
|
132
122
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
123
|
+
playing = _usePlaybackContext.playing,
|
|
124
|
+
muted = _usePlaybackContext.muted,
|
|
125
|
+
setControls = _usePlaybackContext.setControls,
|
|
126
|
+
setControlsTheme = _usePlaybackContext.setControlsTheme,
|
|
127
|
+
setPlaying = _usePlaybackContext.setPlaying,
|
|
128
|
+
showControls = _usePlaybackContext.showControls,
|
|
129
|
+
hideControls = _usePlaybackContext.hideControls;
|
|
141
130
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
142
|
-
|
|
143
131
|
var _useState = React.useState(false),
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
132
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
133
|
+
hasPlayed = _useState2[0],
|
|
134
|
+
setHasPlayed = _useState2[1];
|
|
148
135
|
var backgroundPlaying = current && (isView || isEdit);
|
|
149
136
|
var videoPlaying = current && (isView || isEdit) && playing;
|
|
150
137
|
var shouldDisplayPoster = isPreview || isCapture;
|
|
@@ -152,19 +139,16 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
152
139
|
if (!current) {
|
|
153
140
|
return function () {};
|
|
154
141
|
}
|
|
155
|
-
|
|
156
142
|
setControlsTheme({
|
|
157
143
|
seekBarOnly: withSeekBar && !withControls,
|
|
158
144
|
color: color,
|
|
159
145
|
progressColor: progressColor
|
|
160
146
|
});
|
|
161
|
-
|
|
162
147
|
if (withControls || withSeekBar) {
|
|
163
148
|
setControls(true);
|
|
164
149
|
} else {
|
|
165
150
|
setControls(false);
|
|
166
151
|
}
|
|
167
|
-
|
|
168
152
|
return function () {
|
|
169
153
|
if (withControls || withSeekBar) {
|
|
170
154
|
setControls(false);
|
|
@@ -182,14 +166,12 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
182
166
|
}
|
|
183
167
|
}, [current, autoPlay]);
|
|
184
168
|
var viewerContainer = contexts.useViewerContainer();
|
|
185
|
-
|
|
186
169
|
var _useActivityDetector = hooks.useActivityDetector({
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
170
|
+
element: viewerContainer,
|
|
171
|
+
disabled: !isView,
|
|
172
|
+
timeout: 2000
|
|
173
|
+
}),
|
|
174
|
+
activityDetected = _useActivityDetector.detected;
|
|
193
175
|
var toggleControlsVisibility = React.useCallback(function () {
|
|
194
176
|
if (activityDetected) {
|
|
195
177
|
showControls();
|
|
@@ -198,17 +180,14 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
198
180
|
}
|
|
199
181
|
}, [activityDetected, showControls, hideControls]);
|
|
200
182
|
hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
|
|
201
|
-
|
|
202
183
|
var _useState3 = React.useState(null),
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
184
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
185
|
+
currentTime = _useState4[0],
|
|
186
|
+
setCurrentTime = _useState4[1];
|
|
207
187
|
var _useState5 = React.useState(null),
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
188
|
+
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
189
|
+
duration = _useState6[0],
|
|
190
|
+
setDuration = _useState6[1];
|
|
212
191
|
var onTimeUpdate = React.useCallback(function (time) {
|
|
213
192
|
setCurrentTime(time);
|
|
214
193
|
}, [duration, setCurrentTime]);
|
|
@@ -220,11 +199,9 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
220
199
|
}, [setDuration]);
|
|
221
200
|
var onPlay = React.useCallback(function (_ref3) {
|
|
222
201
|
var initial = _ref3.initial;
|
|
223
|
-
|
|
224
202
|
if (!hasPlayed) {
|
|
225
203
|
setHasPlayed(true);
|
|
226
204
|
}
|
|
227
|
-
|
|
228
205
|
trackScreenMedia(video, initial ? 'play' : 'resume');
|
|
229
206
|
}, [trackScreenMedia, video]);
|
|
230
207
|
var onPause = React.useCallback(function (_ref4) {
|
|
@@ -240,7 +217,6 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
240
217
|
if (current && !loop) {
|
|
241
218
|
setPlaying(false);
|
|
242
219
|
}
|
|
243
|
-
|
|
244
220
|
if (current && shouldGotoNextScreenOnEnd) {
|
|
245
221
|
gotoNextScreen();
|
|
246
222
|
}
|
|
@@ -248,39 +224,32 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
248
224
|
var fullscreen = layout === 'full';
|
|
249
225
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
250
226
|
var hasVideo = video !== null;
|
|
251
|
-
|
|
252
227
|
var _useState7 = React.useState(hasVideo),
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
228
|
+
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
229
|
+
ready = _useState8[0],
|
|
230
|
+
setReady = _useState8[1];
|
|
257
231
|
var finalVideo = React.useMemo(function () {
|
|
258
232
|
return hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
|
|
259
233
|
autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
|
|
260
234
|
}) : null;
|
|
261
235
|
}, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
|
|
262
|
-
|
|
263
236
|
var _ref5 = videoMedia || {},
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
237
|
+
_ref5$metadata = _ref5.metadata,
|
|
238
|
+
videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
|
|
239
|
+
_ref5$url = _ref5.url,
|
|
240
|
+
videoUrl = _ref5$url === void 0 ? null : _ref5$url;
|
|
269
241
|
var finalThumbnail = hooks.useMediaThumbnail(videoMedia, thumbnail);
|
|
270
242
|
var hasVideoUrl = videoUrl !== null;
|
|
271
|
-
|
|
272
243
|
var _ref6 = videoMetadata || {},
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
244
|
+
_ref6$width = _ref6.width,
|
|
245
|
+
videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
|
|
246
|
+
_ref6$height = _ref6.height,
|
|
247
|
+
videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
|
|
278
248
|
var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
249
|
+
cover: fullscreen
|
|
250
|
+
}),
|
|
251
|
+
resizedVideoWidth = _getSizeWithinBounds.width,
|
|
252
|
+
resizedVideoHeight = _getSizeWithinBounds.height;
|
|
284
253
|
var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
|
|
285
254
|
var resizedVideoTop = -(resizedVideoHeight - height) / 2;
|
|
286
255
|
var placeholderProps = fullscreen ? {
|
|
@@ -391,26 +360,21 @@ var VideoScreen = function VideoScreen(_ref) {
|
|
|
391
360
|
withoutVideo: isPreview
|
|
392
361
|
}) : null);
|
|
393
362
|
};
|
|
394
|
-
|
|
395
363
|
VideoScreen.propTypes = propTypes;
|
|
396
364
|
VideoScreen.defaultProps = defaultProps;
|
|
397
365
|
var VideoScreen$1 = /*#__PURE__*/React__default["default"].memo(VideoScreen);
|
|
398
366
|
|
|
399
367
|
var transform = function transform(newStory, _ref) {
|
|
400
368
|
var video = _ref.video;
|
|
401
|
-
|
|
402
369
|
var _ref2 = video || {},
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
370
|
+
_ref2$media = _ref2.media,
|
|
371
|
+
media = _ref2$media === void 0 ? null : _ref2$media;
|
|
406
372
|
var _Video = appleNews.Video(newStory, media),
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
373
|
+
titleStory = _Video.story,
|
|
374
|
+
titleComponent = _Video.component;
|
|
410
375
|
var _Container = appleNews.Container(titleStory, _toConsumableArray__default["default"](titleComponent ? [titleComponent] : [])),
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
376
|
+
containerStory = _Container.story,
|
|
377
|
+
containerComponent = _Container.component;
|
|
414
378
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
|
|
415
379
|
components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
|
|
416
380
|
});
|
|
@@ -506,7 +470,8 @@ var definition = {
|
|
|
506
470
|
}, {
|
|
507
471
|
name: 'shareIncentive',
|
|
508
472
|
type: 'share-incentive'
|
|
509
|
-
}
|
|
473
|
+
}
|
|
474
|
+
// {
|
|
510
475
|
// type: 'fields',
|
|
511
476
|
// isList: true,
|
|
512
477
|
// label: defineMessage({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-video",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.322",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -50,23 +50,23 @@
|
|
|
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.322",
|
|
54
|
+
"@micromag/element-background": "^0.3.322",
|
|
55
|
+
"@micromag/element-call-to-action": "^0.3.322",
|
|
56
|
+
"@micromag/element-closed-captions": "^0.3.322",
|
|
57
|
+
"@micromag/element-container": "^0.3.322",
|
|
58
|
+
"@micromag/element-image": "^0.3.322",
|
|
59
|
+
"@micromag/element-media-controls": "^0.3.322",
|
|
60
|
+
"@micromag/element-video": "^0.3.322",
|
|
61
|
+
"@micromag/transforms": "^0.3.322",
|
|
62
62
|
"classnames": "^2.2.6",
|
|
63
63
|
"lodash": "^4.17.21",
|
|
64
64
|
"prop-types": "^15.7.2",
|
|
65
65
|
"react-intl": "^5.12.1",
|
|
66
|
-
"uuid": "^
|
|
66
|
+
"uuid": "^9.0.0"
|
|
67
67
|
},
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
|
|
72
72
|
}
|