@micromag/screen-video 0.3.103 → 0.3.107

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 +15 -12
  3. package/lib/index.js +15 -12
  4. package/package.json +15 -15
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,
@@ -87,9 +88,9 @@ var VideoScreen = function VideoScreen(_ref) {
87
88
  var _useViewerNavigation = useViewerNavigation(),
88
89
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
89
90
 
90
- var backgroundPlaying = current && (isView || isEdit);
91
- var backgroundShouldLoad = current || active || !isView;
92
- var videoShouldLoad = current || active || !isView;
91
+ var backgroundPlaying = current && (isView || isEdit); // const backgroundShouldLoad = current || active;
92
+
93
+ var mediaShouldLoad = current || active;
93
94
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
94
95
 
95
96
  var _ref2 = video || {},
@@ -106,6 +107,8 @@ var VideoScreen = function VideoScreen(_ref) {
106
107
  _ref2$withTime = _ref2.withTime,
107
108
  withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
108
109
 
110
+ var hasControls = withSeekBar || withPlayPause;
111
+
109
112
  var _useResizeObserver = useResizeObserver(),
110
113
  controlsRef = _useResizeObserver.ref,
111
114
  contentRect = _useResizeObserver.entry.contentRect;
@@ -201,7 +204,7 @@ var VideoScreen = function VideoScreen(_ref) {
201
204
  if (shouldGotoNextScreenOnEnd) {
202
205
  gotoNextScreen();
203
206
  }
204
- }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
207
+ }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
205
208
  useEffect(function () {
206
209
  if (!current && playing) {
207
210
  pause();
@@ -334,7 +337,8 @@ var VideoScreen = function VideoScreen(_ref) {
334
337
  },
335
338
  width: resizedVideoWidth,
336
339
  height: resizedVideoHeight,
337
- resolution: resolution
340
+ resolution: resolution,
341
+ shouldLoad: mediaShouldLoad
338
342
  }) : /*#__PURE__*/React.createElement(Video, Object.assign({}, finalVideo, {
339
343
  ref: apiRef,
340
344
  className: styles.video,
@@ -348,8 +352,7 @@ var VideoScreen = function VideoScreen(_ref) {
348
352
  onEnded: onEnded,
349
353
  onVolumeChanged: onVolumeChanged,
350
354
  focusable: current && isView,
351
- preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
352
-
355
+ shouldLoad: mediaShouldLoad
353
356
  }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
354
357
  key: "bottom-content",
355
358
  className: styles.bottomContent
@@ -384,7 +387,7 @@ var VideoScreen = function VideoScreen(_ref) {
384
387
  height: controlsHeight
385
388
  },
386
389
  onClick: onShowControls,
387
- className: classNames([styles.videoButton, _defineProperty({}, styles.visible, !visibleControls)])
390
+ className: classNames([styles.videoButton, (_ref11 = {}, _defineProperty(_ref11, styles.visible, !visibleControls), _defineProperty(_ref11, styles.alwaysHidden, !hasControls), _ref11)])
388
391
  })) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
389
392
  style: {
390
393
  marginTop: -spacing / 2
@@ -414,7 +417,7 @@ var VideoScreen = function VideoScreen(_ref) {
414
417
  height: height,
415
418
  resolution: resolution,
416
419
  playing: backgroundPlaying,
417
- shouldLoad: backgroundShouldLoad
420
+ shouldLoad: mediaShouldLoad
418
421
  }) : null, /*#__PURE__*/React.createElement(Container, {
419
422
  width: width,
420
423
  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,
@@ -108,9 +109,9 @@ var VideoScreen = function VideoScreen(_ref) {
108
109
  var _useViewerNavigation = contexts.useViewerNavigation(),
109
110
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
110
111
 
111
- var backgroundPlaying = current && (isView || isEdit);
112
- var backgroundShouldLoad = current || active || !isView;
113
- var videoShouldLoad = current || active || !isView;
112
+ var backgroundPlaying = current && (isView || isEdit); // const backgroundShouldLoad = current || active;
113
+
114
+ var mediaShouldLoad = current || active;
114
115
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
115
116
 
116
117
  var _ref2 = video || {},
@@ -127,6 +128,8 @@ var VideoScreen = function VideoScreen(_ref) {
127
128
  _ref2$withTime = _ref2.withTime,
128
129
  withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
129
130
 
131
+ var hasControls = withSeekBar || withPlayPause;
132
+
130
133
  var _useResizeObserver = hooks.useResizeObserver(),
131
134
  controlsRef = _useResizeObserver.ref,
132
135
  contentRect = _useResizeObserver.entry.contentRect;
@@ -222,7 +225,7 @@ var VideoScreen = function VideoScreen(_ref) {
222
225
  if (shouldGotoNextScreenOnEnd) {
223
226
  gotoNextScreen();
224
227
  }
225
- }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
228
+ }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
226
229
  React.useEffect(function () {
227
230
  if (!current && playing) {
228
231
  pause();
@@ -355,7 +358,8 @@ var VideoScreen = function VideoScreen(_ref) {
355
358
  },
356
359
  width: resizedVideoWidth,
357
360
  height: resizedVideoHeight,
358
- resolution: resolution
361
+ resolution: resolution,
362
+ shouldLoad: mediaShouldLoad
359
363
  }) : /*#__PURE__*/React__default["default"].createElement(Video__default["default"], Object.assign({}, finalVideo, {
360
364
  ref: apiRef,
361
365
  className: styles.video,
@@ -369,8 +373,7 @@ var VideoScreen = function VideoScreen(_ref) {
369
373
  onEnded: onEnded,
370
374
  onVolumeChanged: onVolumeChanged,
371
375
  focusable: current && isView,
372
- preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
373
-
376
+ shouldLoad: mediaShouldLoad
374
377
  }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
375
378
  key: "bottom-content",
376
379
  className: styles.bottomContent
@@ -405,7 +408,7 @@ var VideoScreen = function VideoScreen(_ref) {
405
408
  height: controlsHeight
406
409
  },
407
410
  onClick: onShowControls,
408
- className: classNames__default["default"]([styles.videoButton, _defineProperty__default["default"]({}, styles.visible, !visibleControls)])
411
+ className: classNames__default["default"]([styles.videoButton, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles.visible, !visibleControls), _defineProperty__default["default"](_ref11, styles.alwaysHidden, !hasControls), _ref11)])
409
412
  })) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
410
413
  style: {
411
414
  marginTop: -spacing / 2
@@ -435,7 +438,7 @@ var VideoScreen = function VideoScreen(_ref) {
435
438
  height: height,
436
439
  resolution: resolution,
437
440
  playing: backgroundPlaying,
438
- shouldLoad: backgroundShouldLoad
441
+ shouldLoad: mediaShouldLoad
439
442
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
440
443
  width: width,
441
444
  height: height
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.103",
3
+ "version": "0.3.107",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -40,25 +40,25 @@
40
40
  "prepare": "../../scripts/prepare-package.sh"
41
41
  },
42
42
  "devDependencies": {
43
- "react": "^16.8.0 || ^17.0.0",
44
- "react-dom": "^16.8.0 || ^17.0.0"
43
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
44
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
45
45
  },
46
46
  "peerDependencies": {
47
- "react": "^16.8.0 || ^17.0.0",
48
- "react-dom": "^16.8.0 || ^17.0.0"
47
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
48
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
- "@micromag/core": "^0.3.91",
54
- "@micromag/element-background": "^0.3.91",
55
- "@micromag/element-call-to-action": "^0.3.103",
56
- "@micromag/element-closed-captions": "^0.3.91",
57
- "@micromag/element-container": "^0.3.91",
58
- "@micromag/element-image": "^0.3.91",
59
- "@micromag/element-media-controls": "^0.3.91",
60
- "@micromag/element-video": "^0.3.91",
61
- "@micromag/transforms": "^0.3.91",
53
+ "@micromag/core": "^0.3.107",
54
+ "@micromag/element-background": "^0.3.107",
55
+ "@micromag/element-call-to-action": "^0.3.107",
56
+ "@micromag/element-closed-captions": "^0.3.107",
57
+ "@micromag/element-container": "^0.3.107",
58
+ "@micromag/element-image": "^0.3.107",
59
+ "@micromag/element-media-controls": "^0.3.107",
60
+ "@micromag/element-video": "^0.3.107",
61
+ "@micromag/transforms": "^0.3.107",
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": "660b2ada7b03941feb841470abf5cd2cc6e3e68f"
71
+ "gitHead": "952ef450fe62328a0ae3ab6dbb3c3079bb66d17a"
72
72
  }