@micromag/screen-video 0.3.29 → 0.3.31

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 -6
  3. package/lib/index.js +9 -6
  4. package/package.json +5 -5
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .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-mediaControls{padding:10px 20px 20px;opacity:0;-webkit-transition:opacity .3s linear;-o-transition:opacity .3s linear;transition:opacity .3s linear}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{opacity:1}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;bottom:0;width:100%}.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-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-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0;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-bottom.micromag-screen-video-visible{opacity:1}.micromag-screen-video-container .micromag-screen-video-mediaControls{padding:10px 20px 20px}.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;bottom:0;width:100%}.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","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","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","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","bottom":"micromag-screen-video-bottom","visible":"micromag-screen-video-visible","mediaControls":"micromag-screen-video-mediaControls","videoContainer":"micromag-screen-video-videoContainer","bottomContent":"micromag-screen-video-bottomContent"};
24
24
 
25
25
  var propTypes = {
26
26
  layout: PropTypes.oneOf(['middle', 'full']),
@@ -50,7 +50,7 @@ var defaultProps = {
50
50
  };
51
51
 
52
52
  var VideoScreen = function VideoScreen(_ref) {
53
- var _ref9;
53
+ var _ref10;
54
54
 
55
55
  var layout = _ref.layout,
56
56
  video = _ref.video,
@@ -279,6 +279,7 @@ var VideoScreen = function VideoScreen(_ref) {
279
279
  // setPosterReady(true);
280
280
  // }, [isStatic, isCapture, setPosterReady]);
281
281
 
282
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
282
283
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
283
284
  key: "video",
284
285
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
@@ -341,8 +342,10 @@ var VideoScreen = function VideoScreen(_ref) {
341
342
  className: styles.closedCaptions,
342
343
  media: closedCaptions,
343
344
  currentTime: currentTime
344
- }) : null, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
345
- className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, !autoPlay && !playing || muted || showMediaControls)]),
345
+ }) : null, /*#__PURE__*/React.createElement("div", {
346
+ className: classNames([styles.bottom, _defineProperty({}, styles.visible, visibleControls)])
347
+ }, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
348
+ className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
346
349
  withSeekBar: withSeekBar,
347
350
  withPlayPause: withPlayPause,
348
351
  withTime: withTime,
@@ -362,9 +365,9 @@ var VideoScreen = function VideoScreen(_ref) {
362
365
  callToAction: callToAction,
363
366
  animationDisabled: isPreview,
364
367
  focusable: current && isView
365
- })) : null)) : null];
368
+ })) : null))) : null];
366
369
  return /*#__PURE__*/React.createElement("div", Object.assign({
367
- className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.fullscreen, fullscreen), _ref9)]),
370
+ className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.fullscreen, fullscreen), _ref10)]),
368
371
  "data-screen-ready": isStatic || isCapture
369
372
  /* && posterReady */
370
373
  || ready
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","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","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","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","bottom":"micromag-screen-video-bottom","visible":"micromag-screen-video-visible","mediaControls":"micromag-screen-video-mediaControls","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']),
@@ -71,7 +71,7 @@ var defaultProps = {
71
71
  };
72
72
 
73
73
  var VideoScreen = function VideoScreen(_ref) {
74
- var _ref9;
74
+ var _ref10;
75
75
 
76
76
  var layout = _ref.layout,
77
77
  video = _ref.video,
@@ -300,6 +300,7 @@ var VideoScreen = function VideoScreen(_ref) {
300
300
  // setPosterReady(true);
301
301
  // }, [isStatic, isCapture, setPosterReady]);
302
302
 
303
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
303
304
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
304
305
  key: "video",
305
306
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
@@ -362,8 +363,10 @@ var VideoScreen = function VideoScreen(_ref) {
362
363
  className: styles.closedCaptions,
363
364
  media: closedCaptions,
364
365
  currentTime: currentTime
365
- }) : null, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
366
- className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, !autoPlay && !playing || muted || showMediaControls)]),
366
+ }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
367
+ className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.visible, visibleControls)])
368
+ }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
369
+ className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
367
370
  withSeekBar: withSeekBar,
368
371
  withPlayPause: withPlayPause,
369
372
  withTime: withTime,
@@ -383,9 +386,9 @@ var VideoScreen = function VideoScreen(_ref) {
383
386
  callToAction: callToAction,
384
387
  animationDisabled: isPreview,
385
388
  focusable: current && isView
386
- })) : null)) : null];
389
+ })) : null))) : null];
387
390
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
388
- className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.fullscreen, fullscreen), _ref9)]),
391
+ className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.fullscreen, fullscreen), _ref10)]),
389
392
  "data-screen-ready": isStatic || isCapture
390
393
  /* && posterReady */
391
394
  || ready
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.29",
3
+ "version": "0.3.31",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -51,13 +51,13 @@
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.15",
53
53
  "@micromag/core": "^0.3.29",
54
- "@micromag/element-background": "^0.3.29",
54
+ "@micromag/element-background": "^0.3.31",
55
55
  "@micromag/element-call-to-action": "^0.3.29",
56
56
  "@micromag/element-closed-captions": "^0.3.29",
57
57
  "@micromag/element-container": "^0.3.29",
58
58
  "@micromag/element-image": "^0.3.29",
59
- "@micromag/element-media-controls": "^0.3.29",
60
- "@micromag/element-video": "^0.3.29",
59
+ "@micromag/element-media-controls": "^0.3.31",
60
+ "@micromag/element-video": "^0.3.31",
61
61
  "@micromag/transforms": "^0.3.29",
62
62
  "classnames": "^2.2.6",
63
63
  "lodash": "^4.17.21",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "fb4684ac9e69930c0ac4d9045b5148d011e92c7b"
71
+ "gitHead": "cff56eaea0fa5635c4cc3196835fa99eb7a5ec82"
72
72
  }