@micromag/screen-video 0.3.105 → 0.3.108

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 +13 -11
  3. package/lib/index.js +13 -11
  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-videoButton{display:none;visibility:hidden;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}
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}
package/es/index.js CHANGED
@@ -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","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent"};
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"};
24
24
 
25
25
  var propTypes = {
26
26
  layout: PropTypes.oneOf(['middle', 'full']),
@@ -54,9 +54,10 @@ var defaultProps = {
54
54
  };
55
55
 
56
56
  var VideoScreen = function VideoScreen(_ref) {
57
- var _ref12;
57
+ var _ref11, _ref12;
58
58
 
59
- var layout = _ref.layout,
59
+ var id = _ref.id,
60
+ layout = _ref.layout,
60
61
  video = _ref.video,
61
62
  gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
62
63
  background = _ref.background,
@@ -88,8 +89,7 @@ var VideoScreen = function VideoScreen(_ref) {
88
89
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
89
90
 
90
91
  var backgroundPlaying = current && (isView || isEdit);
91
- var backgroundShouldLoad = current || active || !isView;
92
- var videoShouldLoad = current || active || !isView;
92
+ var mediaShouldLoad = current || active;
93
93
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
94
94
 
95
95
  var _ref2 = video || {},
@@ -106,6 +106,8 @@ var VideoScreen = function VideoScreen(_ref) {
106
106
  _ref2$withTime = _ref2.withTime,
107
107
  withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
108
108
 
109
+ var hasControls = withSeekBar || withPlayPause;
110
+
109
111
  var _useResizeObserver = useResizeObserver(),
110
112
  controlsRef = _useResizeObserver.ref,
111
113
  contentRect = _useResizeObserver.entry.contentRect;
@@ -201,7 +203,7 @@ var VideoScreen = function VideoScreen(_ref) {
201
203
  if (shouldGotoNextScreenOnEnd) {
202
204
  gotoNextScreen();
203
205
  }
204
- }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
206
+ }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
205
207
  useEffect(function () {
206
208
  if (!current && playing) {
207
209
  pause();
@@ -334,7 +336,8 @@ var VideoScreen = function VideoScreen(_ref) {
334
336
  },
335
337
  width: resizedVideoWidth,
336
338
  height: resizedVideoHeight,
337
- resolution: resolution
339
+ resolution: resolution,
340
+ shouldLoad: mediaShouldLoad
338
341
  }) : /*#__PURE__*/React.createElement(Video, Object.assign({}, finalVideo, {
339
342
  ref: apiRef,
340
343
  className: styles.video,
@@ -348,8 +351,7 @@ var VideoScreen = function VideoScreen(_ref) {
348
351
  onEnded: onEnded,
349
352
  onVolumeChanged: onVolumeChanged,
350
353
  focusable: current && isView,
351
- preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
352
-
354
+ shouldLoad: mediaShouldLoad
353
355
  }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
354
356
  key: "bottom-content",
355
357
  className: styles.bottomContent
@@ -384,7 +386,7 @@ var VideoScreen = function VideoScreen(_ref) {
384
386
  height: controlsHeight
385
387
  },
386
388
  onClick: onShowControls,
387
- className: classNames([styles.videoButton, _defineProperty({}, styles.visible, !visibleControls)])
389
+ className: classNames([styles.videoButton, (_ref11 = {}, _defineProperty(_ref11, styles.visible, !visibleControls), _defineProperty(_ref11, styles.alwaysHidden, !hasControls), _ref11)])
388
390
  })) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
389
391
  style: {
390
392
  marginTop: -spacing / 2
@@ -414,7 +416,7 @@ var VideoScreen = function VideoScreen(_ref) {
414
416
  height: height,
415
417
  resolution: resolution,
416
418
  playing: backgroundPlaying,
417
- shouldLoad: backgroundShouldLoad
419
+ shouldLoad: mediaShouldLoad
418
420
  }) : null, /*#__PURE__*/React.createElement(Container, {
419
421
  width: width,
420
422
  height: height
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","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent"};
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"};
45
45
 
46
46
  var propTypes = {
47
47
  layout: PropTypes__default["default"].oneOf(['middle', 'full']),
@@ -75,9 +75,10 @@ var defaultProps = {
75
75
  };
76
76
 
77
77
  var VideoScreen = function VideoScreen(_ref) {
78
- var _ref12;
78
+ var _ref11, _ref12;
79
79
 
80
- var layout = _ref.layout,
80
+ var id = _ref.id,
81
+ layout = _ref.layout,
81
82
  video = _ref.video,
82
83
  gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
83
84
  background = _ref.background,
@@ -109,8 +110,7 @@ var VideoScreen = function VideoScreen(_ref) {
109
110
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
110
111
 
111
112
  var backgroundPlaying = current && (isView || isEdit);
112
- var backgroundShouldLoad = current || active || !isView;
113
- var videoShouldLoad = current || active || !isView;
113
+ var mediaShouldLoad = current || active;
114
114
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
115
115
 
116
116
  var _ref2 = video || {},
@@ -127,6 +127,8 @@ var VideoScreen = function VideoScreen(_ref) {
127
127
  _ref2$withTime = _ref2.withTime,
128
128
  withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
129
129
 
130
+ var hasControls = withSeekBar || withPlayPause;
131
+
130
132
  var _useResizeObserver = hooks.useResizeObserver(),
131
133
  controlsRef = _useResizeObserver.ref,
132
134
  contentRect = _useResizeObserver.entry.contentRect;
@@ -222,7 +224,7 @@ var VideoScreen = function VideoScreen(_ref) {
222
224
  if (shouldGotoNextScreenOnEnd) {
223
225
  gotoNextScreen();
224
226
  }
225
- }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
227
+ }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
226
228
  React.useEffect(function () {
227
229
  if (!current && playing) {
228
230
  pause();
@@ -355,7 +357,8 @@ var VideoScreen = function VideoScreen(_ref) {
355
357
  },
356
358
  width: resizedVideoWidth,
357
359
  height: resizedVideoHeight,
358
- resolution: resolution
360
+ resolution: resolution,
361
+ shouldLoad: mediaShouldLoad
359
362
  }) : /*#__PURE__*/React__default["default"].createElement(Video__default["default"], Object.assign({}, finalVideo, {
360
363
  ref: apiRef,
361
364
  className: styles.video,
@@ -369,8 +372,7 @@ var VideoScreen = function VideoScreen(_ref) {
369
372
  onEnded: onEnded,
370
373
  onVolumeChanged: onVolumeChanged,
371
374
  focusable: current && isView,
372
- preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
373
-
375
+ shouldLoad: mediaShouldLoad
374
376
  }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
375
377
  key: "bottom-content",
376
378
  className: styles.bottomContent
@@ -405,7 +407,7 @@ var VideoScreen = function VideoScreen(_ref) {
405
407
  height: controlsHeight
406
408
  },
407
409
  onClick: onShowControls,
408
- className: classNames__default["default"]([styles.videoButton, _defineProperty__default["default"]({}, styles.visible, !visibleControls)])
410
+ className: classNames__default["default"]([styles.videoButton, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles.visible, !visibleControls), _defineProperty__default["default"](_ref11, styles.alwaysHidden, !hasControls), _ref11)])
409
411
  })) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
410
412
  style: {
411
413
  marginTop: -spacing / 2
@@ -435,7 +437,7 @@ var VideoScreen = function VideoScreen(_ref) {
435
437
  height: height,
436
438
  resolution: resolution,
437
439
  playing: backgroundPlaying,
438
- shouldLoad: backgroundShouldLoad
440
+ shouldLoad: mediaShouldLoad
439
441
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
440
442
  width: width,
441
443
  height: height
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.105",
3
+ "version": "0.3.108",
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.105",
54
- "@micromag/element-background": "^0.3.105",
55
- "@micromag/element-call-to-action": "^0.3.105",
56
- "@micromag/element-closed-captions": "^0.3.105",
57
- "@micromag/element-container": "^0.3.105",
58
- "@micromag/element-image": "^0.3.105",
59
- "@micromag/element-media-controls": "^0.3.105",
60
- "@micromag/element-video": "^0.3.105",
61
- "@micromag/transforms": "^0.3.105",
53
+ "@micromag/core": "^0.3.108",
54
+ "@micromag/element-background": "^0.3.108",
55
+ "@micromag/element-call-to-action": "^0.3.108",
56
+ "@micromag/element-closed-captions": "^0.3.108",
57
+ "@micromag/element-container": "^0.3.108",
58
+ "@micromag/element-image": "^0.3.108",
59
+ "@micromag/element-media-controls": "^0.3.108",
60
+ "@micromag/element-video": "^0.3.108",
61
+ "@micromag/transforms": "^0.3.108",
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": "fb6c28846c08f30c035ebbc162a4135b8b4d42a5"
71
+ "gitHead": "d7681b84be82b08eff5ed444f910ed367f235f4e"
72
72
  }