@micromag/screen-video 0.3.106 → 0.3.109

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 +9 -7
  3. package/lib/index.js +9 -7
  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,
@@ -87,8 +88,7 @@ var VideoScreen = function VideoScreen(_ref) {
87
88
  var _useViewerNavigation = useViewerNavigation(),
88
89
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
89
90
 
90
- var backgroundPlaying = current && (isView || isEdit); // const backgroundShouldLoad = current || active;
91
-
91
+ var backgroundPlaying = current && (isView || isEdit);
92
92
  var mediaShouldLoad = current || active;
93
93
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
94
94
 
@@ -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();
@@ -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
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,8 +109,7 @@ var VideoScreen = function VideoScreen(_ref) {
108
109
  var _useViewerNavigation = contexts.useViewerNavigation(),
109
110
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
110
111
 
111
- var backgroundPlaying = current && (isView || isEdit); // const backgroundShouldLoad = current || active;
112
-
112
+ var backgroundPlaying = current && (isView || isEdit);
113
113
  var mediaShouldLoad = current || active;
114
114
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
115
115
 
@@ -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();
@@ -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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.106",
3
+ "version": "0.3.109",
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.106",
54
- "@micromag/element-background": "^0.3.106",
55
- "@micromag/element-call-to-action": "^0.3.106",
56
- "@micromag/element-closed-captions": "^0.3.106",
57
- "@micromag/element-container": "^0.3.106",
58
- "@micromag/element-image": "^0.3.106",
59
- "@micromag/element-media-controls": "^0.3.106",
60
- "@micromag/element-video": "^0.3.106",
61
- "@micromag/transforms": "^0.3.106",
53
+ "@micromag/core": "^0.3.108",
54
+ "@micromag/element-background": "^0.3.109",
55
+ "@micromag/element-call-to-action": "^0.3.108",
56
+ "@micromag/element-closed-captions": "^0.3.109",
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.109",
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": "865842ef7fbdc41f89dd0891857989ded63d44c4"
71
+ "gitHead": "ee76c507ad200ea67dc12d079e3ba33684e2df86"
72
72
  }