@micromag/screen-video 0.3.124 → 0.3.128

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +44 -63
  3. package/lib/index.js +43 -62
  4. package/package.json +11 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-video-container .micromag-screen-video-videoButton{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-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-mediaControls{padding:10px 20px 20px;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{opacity:1}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-alwaysHidden,.micromag-screen-video-container .micromag-screen-video-videoButton{display:none;visibility:hidden}.micromag-screen-video-container .micromag-screen-video-videoButton{position:absolute;top:0;right:0;left:0;width:100%;border:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-container .micromag-screen-video-videoButton.micromag-screen-video-visible{display:block;visibility:visible}.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}
1
+ .micromag-screen-video-container .micromag-screen-video-videoButton{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-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-mediaControls{padding:10px 20px 20px;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{opacity:1}.micromag-screen-video-container .micromag-screen-video-videoButton{display:none;visibility:hidden;position:absolute;top:0;right:0;left:0;width:100%;height:100%;border:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-container .micromag-screen-video-videoButton.micromag-screen-video-visible{display:block;visibility:visible}.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, useResizeObserver, useLongPress, useMediaThumbnail } from '@micromag/core/hooks';
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","videoButton":"micromag-screen-video-videoButton","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","mediaControls":"micromag-screen-video-mediaControls","visible":"micromag-screen-video-visible","alwaysHidden":"micromag-screen-video-alwaysHidden","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent","bottomSeekBar":"micromag-screen-video-bottomSeekBar","isHidden":"micromag-screen-video-isHidden"};
23
+ var styles = {"container":"micromag-screen-video-container","videoButton":"micromag-screen-video-videoButton","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","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 _ref11, _ref13;
57
+ var _ref12;
58
58
 
59
59
  var layout = _ref.layout,
60
60
  video = _ref.video,
@@ -109,26 +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 hasControls = (withSeekBar || withControls) && (isView || isEdit);
113
-
114
- var _useResizeObserver = useResizeObserver(),
115
- controlsRef = _useResizeObserver.ref,
116
- contentRect = _useResizeObserver.entry.contentRect;
117
-
118
- var _ref3 = contentRect || {},
119
- _ref3$height = _ref3.height,
120
- controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
121
-
122
112
  var apiRef = useRef();
123
113
 
124
- var _ref4 = apiRef.current || {},
125
- togglePlay = _ref4.togglePlay,
126
- toggleMute = _ref4.toggleMute,
127
- seek = _ref4.seek,
128
- play = _ref4.play,
129
- pause = _ref4.pause,
130
- _ref4$mediaRef = _ref4.mediaRef,
131
- apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
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;
132
122
 
133
123
  useEffect(function () {
134
124
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -172,13 +162,13 @@ var VideoScreen = function VideoScreen(_ref) {
172
162
  var onDurationChanged = useCallback(function (dur) {
173
163
  setDuration(dur);
174
164
  }, [setDuration]);
175
- var onPlay = useCallback(function (_ref5) {
176
- var initial = _ref5.initial;
165
+ var onPlay = useCallback(function (_ref4) {
166
+ var initial = _ref4.initial;
177
167
  setPlaying(true);
178
168
  trackScreenMedia(video, initial ? 'play' : 'resume');
179
169
  }, [trackScreenMedia, video]);
180
- var onPause = useCallback(function (_ref6) {
181
- var midway = _ref6.midway;
170
+ var onPause = useCallback(function (_ref5) {
171
+ var midway = _ref5.midway;
182
172
  setPlaying(false);
183
173
  trackScreenMedia(video, midway ? 'pause' : 'ended');
184
174
  }, [trackScreenMedia, video]);
@@ -236,7 +226,11 @@ var VideoScreen = function VideoScreen(_ref) {
236
226
  }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
237
227
  var onShowControls = useCallback(function (e) {
238
228
  onMouseMove(e, 3000);
239
- }, [onMouseMove]);
229
+
230
+ if (autoPlay && !playing) {
231
+ play();
232
+ }
233
+ }, [play, onMouseMove]);
240
234
  var longPressBind = useLongPress({
241
235
  onLongPress: onLongPress,
242
236
  onClick: onMouseMove
@@ -259,21 +253,20 @@ var VideoScreen = function VideoScreen(_ref) {
259
253
  }) : null;
260
254
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
261
255
 
262
- var _ref7 = videoMedia || {},
263
- _ref7$metadata = _ref7.metadata,
264
- videoMetadata = _ref7$metadata === void 0 ? null : _ref7$metadata,
265
- _ref7$url = _ref7.url,
266
- videoUrl = _ref7$url === void 0 ? null : _ref7$url;
256
+ var _ref6 = videoMedia || {},
257
+ _ref6$metadata = _ref6.metadata,
258
+ videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
259
+ _ref6$url = _ref6.url,
260
+ videoUrl = _ref6$url === void 0 ? null : _ref6$url;
267
261
 
268
262
  var thumbnailUrl = useMediaThumbnail(videoMedia, thumbnailFile);
269
- var hasVideoUrl = videoUrl !== null; // const hasThumbnail = thumbnailUrl !== null;
270
- // const [posterReady, setPosterReady] = useState(!hasThumbnail);
263
+ var hasVideoUrl = videoUrl !== null;
271
264
 
272
- var _ref8 = videoMetadata || {},
273
- _ref8$width = _ref8.width,
274
- videoWidth = _ref8$width === void 0 ? 0 : _ref8$width,
275
- _ref8$height = _ref8.height,
276
- videoHeight = _ref8$height === void 0 ? 0 : _ref8$height;
265
+ var _ref7 = videoMetadata || {},
266
+ _ref7$width = _ref7.width,
267
+ videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
268
+ _ref7$height = _ref7.height,
269
+ videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
277
270
 
278
271
  var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
279
272
  cover: fullscreen
@@ -291,17 +284,11 @@ var VideoScreen = function VideoScreen(_ref) {
291
284
  };
292
285
  useEffect(function () {
293
286
  setReady(!hasVideoUrl);
294
- }, [videoUrl, hasVideoUrl, setReady]); // useEffect(() => {
295
- // setPosterReady(!hasThumbnail);
296
- // }, [thumbnailUrl, hasThumbnail, setPosterReady]);
297
-
287
+ }, [videoUrl, hasVideoUrl, setReady]);
298
288
  var onVideoReady = useCallback(function () {
299
289
  setReady(true);
300
- }, [setReady]); // const onPosterLoaded = useCallback(() => {
301
- // setPosterReady(true);
302
- // }, [isStatic, isCapture, setPosterReady]);
303
-
304
- var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
290
+ }, [setReady]);
291
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
305
292
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
306
293
  key: "video",
307
294
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
@@ -354,7 +341,12 @@ var VideoScreen = function VideoScreen(_ref) {
354
341
  onVolumeChanged: onVolumeChanged,
355
342
  focusable: current && isView,
356
343
  shouldLoad: mediaShouldLoad
357
- }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
344
+ }))) : null), hasVideoUrl ? /*#__PURE__*/React.createElement("button", {
345
+ key: "video-button",
346
+ type: "button",
347
+ onClick: onShowControls,
348
+ className: classNames([styles.videoButton, _defineProperty({}, styles.visible, !visibleControls)])
349
+ }) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
358
350
  key: "bottom-content",
359
351
  className: styles.bottomContent
360
352
  }, /*#__PURE__*/React.createElement(Transitions, {
@@ -367,9 +359,7 @@ var VideoScreen = function VideoScreen(_ref) {
367
359
  currentTime: currentTime
368
360
  }) : null, /*#__PURE__*/React.createElement("div", {
369
361
  className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
370
- }, hasVideoUrl && hasControls ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
371
- ref: controlsRef
372
- }, /*#__PURE__*/React.createElement(MediaControls, {
362
+ }, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
373
363
  className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
374
364
  withControls: withControls,
375
365
  withSeekBar: withSeekBar,
@@ -383,14 +373,7 @@ var VideoScreen = function VideoScreen(_ref) {
383
373
  onToggleMute: onToggleMute,
384
374
  onSeek: onSeek,
385
375
  focusable: current && isView
386
- })), /*#__PURE__*/React.createElement("button", {
387
- type: "button",
388
- style: {
389
- height: controlsHeight
390
- },
391
- onClick: onShowControls,
392
- className: classNames([styles.videoButton, (_ref11 = {}, _defineProperty(_ref11, styles.visible, !visibleControls), _defineProperty(_ref11, styles.alwaysHidden, !hasControls), _ref11)])
393
- })) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
376
+ }) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
394
377
  style: {
395
378
  marginTop: -spacing / 2
396
379
  }
@@ -416,10 +399,8 @@ var VideoScreen = function VideoScreen(_ref) {
416
399
  isSmall: true
417
400
  }) : null))) : null];
418
401
  return /*#__PURE__*/React.createElement("div", Object.assign({
419
- className: classNames([styles.container, (_ref13 = {}, _defineProperty(_ref13, className, className !== null), _defineProperty(_ref13, styles.fullscreen, fullscreen), _ref13)]),
420
- "data-screen-ready": isStatic || isCapture
421
- /* && posterReady */
422
- || ready
402
+ className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.fullscreen, fullscreen), _ref12)]),
403
+ "data-screen-ready": isStatic || isCapture || ready
423
404
  }, longPressBind, {
424
405
  onMouseMove: onMouseMove
425
406
  }), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
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","videoButton":"micromag-screen-video-videoButton","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","mediaControls":"micromag-screen-video-mediaControls","visible":"micromag-screen-video-visible","alwaysHidden":"micromag-screen-video-alwaysHidden","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent","bottomSeekBar":"micromag-screen-video-bottomSeekBar","isHidden":"micromag-screen-video-isHidden"};
44
+ var styles = {"container":"micromag-screen-video-container","videoButton":"micromag-screen-video-videoButton","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","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 _ref11, _ref13;
78
+ var _ref12;
79
79
 
80
80
  var layout = _ref.layout,
81
81
  video = _ref.video,
@@ -130,26 +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 hasControls = (withSeekBar || withControls) && (isView || isEdit);
134
-
135
- var _useResizeObserver = hooks.useResizeObserver(),
136
- controlsRef = _useResizeObserver.ref,
137
- contentRect = _useResizeObserver.entry.contentRect;
138
-
139
- var _ref3 = contentRect || {},
140
- _ref3$height = _ref3.height,
141
- controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
142
-
143
133
  var apiRef = React.useRef();
144
134
 
145
- var _ref4 = apiRef.current || {},
146
- togglePlay = _ref4.togglePlay,
147
- toggleMute = _ref4.toggleMute,
148
- seek = _ref4.seek,
149
- play = _ref4.play,
150
- pause = _ref4.pause,
151
- _ref4$mediaRef = _ref4.mediaRef,
152
- apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
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;
153
143
 
154
144
  React.useEffect(function () {
155
145
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -193,13 +183,13 @@ var VideoScreen = function VideoScreen(_ref) {
193
183
  var onDurationChanged = React.useCallback(function (dur) {
194
184
  setDuration(dur);
195
185
  }, [setDuration]);
196
- var onPlay = React.useCallback(function (_ref5) {
197
- var initial = _ref5.initial;
186
+ var onPlay = React.useCallback(function (_ref4) {
187
+ var initial = _ref4.initial;
198
188
  setPlaying(true);
199
189
  trackScreenMedia(video, initial ? 'play' : 'resume');
200
190
  }, [trackScreenMedia, video]);
201
- var onPause = React.useCallback(function (_ref6) {
202
- var midway = _ref6.midway;
191
+ var onPause = React.useCallback(function (_ref5) {
192
+ var midway = _ref5.midway;
203
193
  setPlaying(false);
204
194
  trackScreenMedia(video, midway ? 'pause' : 'ended');
205
195
  }, [trackScreenMedia, video]);
@@ -257,7 +247,11 @@ var VideoScreen = function VideoScreen(_ref) {
257
247
  }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
258
248
  var onShowControls = React.useCallback(function (e) {
259
249
  onMouseMove(e, 3000);
260
- }, [onMouseMove]);
250
+
251
+ if (autoPlay && !playing) {
252
+ play();
253
+ }
254
+ }, [play, onMouseMove]);
261
255
  var longPressBind = hooks.useLongPress({
262
256
  onLongPress: onLongPress,
263
257
  onClick: onMouseMove
@@ -280,21 +274,20 @@ var VideoScreen = function VideoScreen(_ref) {
280
274
  }) : null;
281
275
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
282
276
 
283
- var _ref7 = videoMedia || {},
284
- _ref7$metadata = _ref7.metadata,
285
- videoMetadata = _ref7$metadata === void 0 ? null : _ref7$metadata,
286
- _ref7$url = _ref7.url,
287
- videoUrl = _ref7$url === void 0 ? null : _ref7$url;
277
+ var _ref6 = videoMedia || {},
278
+ _ref6$metadata = _ref6.metadata,
279
+ videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
280
+ _ref6$url = _ref6.url,
281
+ videoUrl = _ref6$url === void 0 ? null : _ref6$url;
288
282
 
289
283
  var thumbnailUrl = hooks.useMediaThumbnail(videoMedia, thumbnailFile);
290
- var hasVideoUrl = videoUrl !== null; // const hasThumbnail = thumbnailUrl !== null;
291
- // const [posterReady, setPosterReady] = useState(!hasThumbnail);
284
+ var hasVideoUrl = videoUrl !== null;
292
285
 
293
- var _ref8 = videoMetadata || {},
294
- _ref8$width = _ref8.width,
295
- videoWidth = _ref8$width === void 0 ? 0 : _ref8$width,
296
- _ref8$height = _ref8.height,
297
- videoHeight = _ref8$height === void 0 ? 0 : _ref8$height;
286
+ var _ref7 = videoMetadata || {},
287
+ _ref7$width = _ref7.width,
288
+ videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
289
+ _ref7$height = _ref7.height,
290
+ videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
298
291
 
299
292
  var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
300
293
  cover: fullscreen
@@ -312,17 +305,11 @@ var VideoScreen = function VideoScreen(_ref) {
312
305
  };
313
306
  React.useEffect(function () {
314
307
  setReady(!hasVideoUrl);
315
- }, [videoUrl, hasVideoUrl, setReady]); // useEffect(() => {
316
- // setPosterReady(!hasThumbnail);
317
- // }, [thumbnailUrl, hasThumbnail, setPosterReady]);
318
-
308
+ }, [videoUrl, hasVideoUrl, setReady]);
319
309
  var onVideoReady = React.useCallback(function () {
320
310
  setReady(true);
321
- }, [setReady]); // const onPosterLoaded = useCallback(() => {
322
- // setPosterReady(true);
323
- // }, [isStatic, isCapture, setPosterReady]);
324
-
325
- var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
311
+ }, [setReady]);
312
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
326
313
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
327
314
  key: "video",
328
315
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
@@ -375,7 +362,12 @@ var VideoScreen = function VideoScreen(_ref) {
375
362
  onVolumeChanged: onVolumeChanged,
376
363
  focusable: current && isView,
377
364
  shouldLoad: mediaShouldLoad
378
- }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
365
+ }))) : null), hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement("button", {
366
+ key: "video-button",
367
+ type: "button",
368
+ onClick: onShowControls,
369
+ className: classNames__default["default"]([styles.videoButton, _defineProperty__default["default"]({}, styles.visible, !visibleControls)])
370
+ }) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
379
371
  key: "bottom-content",
380
372
  className: styles.bottomContent
381
373
  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
@@ -388,9 +380,7 @@ var VideoScreen = function VideoScreen(_ref) {
388
380
  currentTime: currentTime
389
381
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
390
382
  className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
391
- }, hasVideoUrl && hasControls ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
392
- ref: controlsRef
393
- }, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
383
+ }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
394
384
  className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
395
385
  withControls: withControls,
396
386
  withSeekBar: withSeekBar,
@@ -404,14 +394,7 @@ var VideoScreen = function VideoScreen(_ref) {
404
394
  onToggleMute: onToggleMute,
405
395
  onSeek: onSeek,
406
396
  focusable: current && isView
407
- })), /*#__PURE__*/React__default["default"].createElement("button", {
408
- type: "button",
409
- style: {
410
- height: controlsHeight
411
- },
412
- onClick: onShowControls,
413
- className: classNames__default["default"]([styles.videoButton, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles.visible, !visibleControls), _defineProperty__default["default"](_ref11, styles.alwaysHidden, !hasControls), _ref11)])
414
- })) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
397
+ }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
415
398
  style: {
416
399
  marginTop: -spacing / 2
417
400
  }
@@ -437,10 +420,8 @@ var VideoScreen = function VideoScreen(_ref) {
437
420
  isSmall: true
438
421
  }) : null))) : null];
439
422
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
440
- className: classNames__default["default"]([styles.container, (_ref13 = {}, _defineProperty__default["default"](_ref13, className, className !== null), _defineProperty__default["default"](_ref13, styles.fullscreen, fullscreen), _ref13)]),
441
- "data-screen-ready": isStatic || isCapture
442
- /* && posterReady */
443
- || ready
423
+ className: classNames__default["default"]([styles.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, className, className !== null), _defineProperty__default["default"](_ref12, styles.fullscreen, fullscreen), _ref12)]),
424
+ "data-screen-ready": isStatic || isCapture || ready
444
425
  }, longPressBind, {
445
426
  onMouseMove: onMouseMove
446
427
  }), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.124",
3
+ "version": "0.3.128",
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.124",
54
- "@micromag/element-background": "^0.3.124",
55
- "@micromag/element-call-to-action": "^0.3.124",
56
- "@micromag/element-closed-captions": "^0.3.124",
57
- "@micromag/element-container": "^0.3.124",
58
- "@micromag/element-image": "^0.3.124",
59
- "@micromag/element-media-controls": "^0.3.124",
60
- "@micromag/element-video": "^0.3.124",
61
- "@micromag/transforms": "^0.3.124",
53
+ "@micromag/core": "^0.3.126",
54
+ "@micromag/element-background": "^0.3.127",
55
+ "@micromag/element-call-to-action": "^0.3.128",
56
+ "@micromag/element-closed-captions": "^0.3.126",
57
+ "@micromag/element-container": "^0.3.126",
58
+ "@micromag/element-image": "^0.3.126",
59
+ "@micromag/element-media-controls": "^0.3.126",
60
+ "@micromag/element-video": "^0.3.126",
61
+ "@micromag/transforms": "^0.3.126",
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": "9050944df1d66cae14e04a771f739e2743894fb8"
71
+ "gitHead": "c968790aaa40811a33fd151892abc083bc596d4b"
72
72
  }