@micromag/screen-video 0.3.108 → 0.3.111

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 +23 -20
  3. package/lib/index.js +22 -19
  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}
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}
package/es/index.js CHANGED
@@ -15,12 +15,12 @@ import CallToAction from '@micromag/element-call-to-action';
15
15
  import ClosedCaptions from '@micromag/element-closed-captions';
16
16
  import Container from '@micromag/element-container';
17
17
  import Image from '@micromag/element-image';
18
- import MediaControls from '@micromag/element-media-controls';
18
+ import MediaControls, { SeekBar } from '@micromag/element-media-controls';
19
19
  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"};
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"};
24
24
 
25
25
  var propTypes = {
26
26
  layout: PropTypes.oneOf(['middle', 'full']),
@@ -54,10 +54,9 @@ var defaultProps = {
54
54
  };
55
55
 
56
56
  var VideoScreen = function VideoScreen(_ref) {
57
- var _ref11, _ref12;
57
+ var _ref11, _ref13;
58
58
 
59
- var id = _ref.id,
60
- layout = _ref.layout,
59
+ var layout = _ref.layout,
61
60
  video = _ref.video,
62
61
  gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
63
62
  background = _ref.background,
@@ -101,12 +100,10 @@ var VideoScreen = function VideoScreen(_ref) {
101
100
  closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
102
101
  _ref2$withSeekBar = _ref2.withSeekBar,
103
102
  withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
104
- _ref2$withPlayPause = _ref2.withPlayPause,
105
- withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
106
- _ref2$withTime = _ref2.withTime,
107
- withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
103
+ _ref2$withControls = _ref2.withControls,
104
+ withControls = _ref2$withControls === void 0 ? false : _ref2$withControls;
108
105
 
109
- var hasControls = withSeekBar || withPlayPause;
106
+ var hasControls = (withSeekBar || withControls) && (isView || isEdit);
110
107
 
111
108
  var _useResizeObserver = useResizeObserver(),
112
109
  controlsRef = _useResizeObserver.ref,
@@ -203,7 +200,7 @@ var VideoScreen = function VideoScreen(_ref) {
203
200
  if (shouldGotoNextScreenOnEnd) {
204
201
  gotoNextScreen();
205
202
  }
206
- }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
203
+ }, [current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
207
204
  useEffect(function () {
208
205
  if (!current && playing) {
209
206
  pause();
@@ -225,12 +222,12 @@ var VideoScreen = function VideoScreen(_ref) {
225
222
  var onLongPress = useCallback(function () {
226
223
  if (!playing) {
227
224
  play();
228
- } else if (withPlayPause) {
225
+ } else if (withControls) {
229
226
  onMouseMove(null, 3000);
230
227
  } else {
231
228
  pause();
232
229
  }
233
- }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
230
+ }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
234
231
  var onShowControls = useCallback(function (e) {
235
232
  onMouseMove(e, 3000);
236
233
  }, [onMouseMove]);
@@ -299,7 +296,7 @@ var VideoScreen = function VideoScreen(_ref) {
299
296
  // setPosterReady(true);
300
297
  // }, [isStatic, isCapture, setPosterReady]);
301
298
 
302
- var visibleControls = !autoPlay && !playing || muted || showMediaControls;
299
+ var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
303
300
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
304
301
  key: "video",
305
302
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
@@ -364,14 +361,13 @@ var VideoScreen = function VideoScreen(_ref) {
364
361
  media: closedCaptions,
365
362
  currentTime: currentTime
366
363
  }) : null, /*#__PURE__*/React.createElement("div", {
367
- className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withPlayPause || muted)])
368
- }, hasVideoUrl ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
364
+ className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
365
+ }, hasVideoUrl && hasControls ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
369
366
  ref: controlsRef
370
367
  }, /*#__PURE__*/React.createElement(MediaControls, {
371
368
  className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
372
369
  withSeekBar: withSeekBar,
373
- withPlayPause: withPlayPause,
374
- withTime: withTime,
370
+ withControls: withControls,
375
371
  playing: playing,
376
372
  muted: muted,
377
373
  currentTime: currentTime,
@@ -402,9 +398,16 @@ var VideoScreen = function VideoScreen(_ref) {
402
398
  },
403
399
  enableInteraction: enableInteraction,
404
400
  disableInteraction: disableInteraction
405
- })) : null))) : null];
401
+ })) : null, withSeekBar && (isView || isEdit) ? /*#__PURE__*/React.createElement(SeekBar, {
402
+ currentTime: currentTime,
403
+ duration: duration,
404
+ playing: playing,
405
+ focusable: false,
406
+ className: classNames([styles.bottomSeekBar, _defineProperty({}, styles.isHidden, visibleControls)]),
407
+ isSmall: true
408
+ }) : null))) : null];
406
409
  return /*#__PURE__*/React.createElement("div", Object.assign({
407
- className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.fullscreen, fullscreen), _ref12)]),
410
+ className: classNames([styles.container, (_ref13 = {}, _defineProperty(_ref13, className, className !== null), _defineProperty(_ref13, styles.fullscreen, fullscreen), _ref13)]),
408
411
  "data-screen-ready": isStatic || isCapture
409
412
  /* && posterReady */
410
413
  || 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","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"};
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"};
45
45
 
46
46
  var propTypes = {
47
47
  layout: PropTypes__default["default"].oneOf(['middle', 'full']),
@@ -75,10 +75,9 @@ var defaultProps = {
75
75
  };
76
76
 
77
77
  var VideoScreen = function VideoScreen(_ref) {
78
- var _ref11, _ref12;
78
+ var _ref11, _ref13;
79
79
 
80
- var id = _ref.id,
81
- layout = _ref.layout,
80
+ var layout = _ref.layout,
82
81
  video = _ref.video,
83
82
  gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
84
83
  background = _ref.background,
@@ -122,12 +121,10 @@ var VideoScreen = function VideoScreen(_ref) {
122
121
  closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
123
122
  _ref2$withSeekBar = _ref2.withSeekBar,
124
123
  withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
125
- _ref2$withPlayPause = _ref2.withPlayPause,
126
- withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
127
- _ref2$withTime = _ref2.withTime,
128
- withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
124
+ _ref2$withControls = _ref2.withControls,
125
+ withControls = _ref2$withControls === void 0 ? false : _ref2$withControls;
129
126
 
130
- var hasControls = withSeekBar || withPlayPause;
127
+ var hasControls = (withSeekBar || withControls) && (isView || isEdit);
131
128
 
132
129
  var _useResizeObserver = hooks.useResizeObserver(),
133
130
  controlsRef = _useResizeObserver.ref,
@@ -224,7 +221,7 @@ var VideoScreen = function VideoScreen(_ref) {
224
221
  if (shouldGotoNextScreenOnEnd) {
225
222
  gotoNextScreen();
226
223
  }
227
- }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
224
+ }, [current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
228
225
  React.useEffect(function () {
229
226
  if (!current && playing) {
230
227
  pause();
@@ -246,12 +243,12 @@ var VideoScreen = function VideoScreen(_ref) {
246
243
  var onLongPress = React.useCallback(function () {
247
244
  if (!playing) {
248
245
  play();
249
- } else if (withPlayPause) {
246
+ } else if (withControls) {
250
247
  onMouseMove(null, 3000);
251
248
  } else {
252
249
  pause();
253
250
  }
254
- }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
251
+ }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
255
252
  var onShowControls = React.useCallback(function (e) {
256
253
  onMouseMove(e, 3000);
257
254
  }, [onMouseMove]);
@@ -320,7 +317,7 @@ var VideoScreen = function VideoScreen(_ref) {
320
317
  // setPosterReady(true);
321
318
  // }, [isStatic, isCapture, setPosterReady]);
322
319
 
323
- var visibleControls = !autoPlay && !playing || muted || showMediaControls;
320
+ var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
324
321
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
325
322
  key: "video",
326
323
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
@@ -385,14 +382,13 @@ var VideoScreen = function VideoScreen(_ref) {
385
382
  media: closedCaptions,
386
383
  currentTime: currentTime
387
384
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
388
- className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withPlayPause || muted)])
389
- }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
385
+ className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
386
+ }, hasVideoUrl && hasControls ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
390
387
  ref: controlsRef
391
388
  }, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
392
389
  className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
393
390
  withSeekBar: withSeekBar,
394
- withPlayPause: withPlayPause,
395
- withTime: withTime,
391
+ withControls: withControls,
396
392
  playing: playing,
397
393
  muted: muted,
398
394
  currentTime: currentTime,
@@ -423,9 +419,16 @@ var VideoScreen = function VideoScreen(_ref) {
423
419
  },
424
420
  enableInteraction: enableInteraction,
425
421
  disableInteraction: disableInteraction
426
- })) : null))) : null];
422
+ })) : null, withSeekBar && (isView || isEdit) ? /*#__PURE__*/React__default["default"].createElement(MediaControls.SeekBar, {
423
+ currentTime: currentTime,
424
+ duration: duration,
425
+ playing: playing,
426
+ focusable: false,
427
+ className: classNames__default["default"]([styles.bottomSeekBar, _defineProperty__default["default"]({}, styles.isHidden, visibleControls)]),
428
+ isSmall: true
429
+ }) : null))) : null];
427
430
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
428
- className: classNames__default["default"]([styles.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, className, className !== null), _defineProperty__default["default"](_ref12, styles.fullscreen, fullscreen), _ref12)]),
431
+ className: classNames__default["default"]([styles.container, (_ref13 = {}, _defineProperty__default["default"](_ref13, className, className !== null), _defineProperty__default["default"](_ref13, styles.fullscreen, fullscreen), _ref13)]),
429
432
  "data-screen-ready": isStatic || isCapture
430
433
  /* && posterReady */
431
434
  || ready
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.108",
3
+ "version": "0.3.111",
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.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",
53
+ "@micromag/core": "^0.3.111",
54
+ "@micromag/element-background": "^0.3.111",
55
+ "@micromag/element-call-to-action": "^0.3.111",
56
+ "@micromag/element-closed-captions": "^0.3.111",
57
+ "@micromag/element-container": "^0.3.111",
58
+ "@micromag/element-image": "^0.3.111",
59
+ "@micromag/element-media-controls": "^0.3.111",
60
+ "@micromag/element-video": "^0.3.111",
61
+ "@micromag/transforms": "^0.3.111",
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": "d7681b84be82b08eff5ed444f910ed367f235f4e"
71
+ "gitHead": "0b8e0748efe102dae09d162dc4f06a0b0797ea35"
72
72
  }