@micromag/screen-video 0.3.107 → 0.3.110

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 +24 -22
  3. package/lib/index.js +23 -21
  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,
@@ -88,8 +87,7 @@ var VideoScreen = function VideoScreen(_ref) {
88
87
  var _useViewerNavigation = useViewerNavigation(),
89
88
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
90
89
 
91
- var backgroundPlaying = current && (isView || isEdit); // const backgroundShouldLoad = current || active;
92
-
90
+ var backgroundPlaying = current && (isView || isEdit);
93
91
  var mediaShouldLoad = current || active;
94
92
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
95
93
 
@@ -102,12 +100,10 @@ var VideoScreen = function VideoScreen(_ref) {
102
100
  closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
103
101
  _ref2$withSeekBar = _ref2.withSeekBar,
104
102
  withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
105
- _ref2$withPlayPause = _ref2.withPlayPause,
106
- withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
107
- _ref2$withTime = _ref2.withTime,
108
- withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
103
+ _ref2$withControls = _ref2.withControls,
104
+ withControls = _ref2$withControls === void 0 ? false : _ref2$withControls;
109
105
 
110
- var hasControls = withSeekBar || withPlayPause;
106
+ var hasControls = (withSeekBar || withControls) && (isView || isEdit);
111
107
 
112
108
  var _useResizeObserver = useResizeObserver(),
113
109
  controlsRef = _useResizeObserver.ref,
@@ -204,7 +200,7 @@ var VideoScreen = function VideoScreen(_ref) {
204
200
  if (shouldGotoNextScreenOnEnd) {
205
201
  gotoNextScreen();
206
202
  }
207
- }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
203
+ }, [current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
208
204
  useEffect(function () {
209
205
  if (!current && playing) {
210
206
  pause();
@@ -226,12 +222,12 @@ var VideoScreen = function VideoScreen(_ref) {
226
222
  var onLongPress = useCallback(function () {
227
223
  if (!playing) {
228
224
  play();
229
- } else if (withPlayPause) {
225
+ } else if (withControls) {
230
226
  onMouseMove(null, 3000);
231
227
  } else {
232
228
  pause();
233
229
  }
234
- }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
230
+ }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
235
231
  var onShowControls = useCallback(function (e) {
236
232
  onMouseMove(e, 3000);
237
233
  }, [onMouseMove]);
@@ -300,7 +296,7 @@ var VideoScreen = function VideoScreen(_ref) {
300
296
  // setPosterReady(true);
301
297
  // }, [isStatic, isCapture, setPosterReady]);
302
298
 
303
- var visibleControls = !autoPlay && !playing || muted || showMediaControls;
299
+ var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
304
300
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
305
301
  key: "video",
306
302
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
@@ -365,14 +361,13 @@ var VideoScreen = function VideoScreen(_ref) {
365
361
  media: closedCaptions,
366
362
  currentTime: currentTime
367
363
  }) : null, /*#__PURE__*/React.createElement("div", {
368
- className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withPlayPause || muted)])
369
- }, 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", {
370
366
  ref: controlsRef
371
367
  }, /*#__PURE__*/React.createElement(MediaControls, {
372
368
  className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
373
369
  withSeekBar: withSeekBar,
374
- withPlayPause: withPlayPause,
375
- withTime: withTime,
370
+ withControls: withControls,
376
371
  playing: playing,
377
372
  muted: muted,
378
373
  currentTime: currentTime,
@@ -403,9 +398,16 @@ var VideoScreen = function VideoScreen(_ref) {
403
398
  },
404
399
  enableInteraction: enableInteraction,
405
400
  disableInteraction: disableInteraction
406
- })) : null))) : null];
401
+ })) : null, 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];
407
409
  return /*#__PURE__*/React.createElement("div", Object.assign({
408
- 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)]),
409
411
  "data-screen-ready": isStatic || isCapture
410
412
  /* && posterReady */
411
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,
@@ -109,8 +108,7 @@ var VideoScreen = function VideoScreen(_ref) {
109
108
  var _useViewerNavigation = contexts.useViewerNavigation(),
110
109
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
111
110
 
112
- var backgroundPlaying = current && (isView || isEdit); // const backgroundShouldLoad = current || active;
113
-
111
+ var backgroundPlaying = current && (isView || isEdit);
114
112
  var mediaShouldLoad = current || active;
115
113
  var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
116
114
 
@@ -123,12 +121,10 @@ var VideoScreen = function VideoScreen(_ref) {
123
121
  closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
124
122
  _ref2$withSeekBar = _ref2.withSeekBar,
125
123
  withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
126
- _ref2$withPlayPause = _ref2.withPlayPause,
127
- withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
128
- _ref2$withTime = _ref2.withTime,
129
- withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
124
+ _ref2$withControls = _ref2.withControls,
125
+ withControls = _ref2$withControls === void 0 ? false : _ref2$withControls;
130
126
 
131
- var hasControls = withSeekBar || withPlayPause;
127
+ var hasControls = (withSeekBar || withControls) && (isView || isEdit);
132
128
 
133
129
  var _useResizeObserver = hooks.useResizeObserver(),
134
130
  controlsRef = _useResizeObserver.ref,
@@ -225,7 +221,7 @@ var VideoScreen = function VideoScreen(_ref) {
225
221
  if (shouldGotoNextScreenOnEnd) {
226
222
  gotoNextScreen();
227
223
  }
228
- }, [id, current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
224
+ }, [current, shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
229
225
  React.useEffect(function () {
230
226
  if (!current && playing) {
231
227
  pause();
@@ -247,12 +243,12 @@ var VideoScreen = function VideoScreen(_ref) {
247
243
  var onLongPress = React.useCallback(function () {
248
244
  if (!playing) {
249
245
  play();
250
- } else if (withPlayPause) {
246
+ } else if (withControls) {
251
247
  onMouseMove(null, 3000);
252
248
  } else {
253
249
  pause();
254
250
  }
255
- }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
251
+ }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
256
252
  var onShowControls = React.useCallback(function (e) {
257
253
  onMouseMove(e, 3000);
258
254
  }, [onMouseMove]);
@@ -321,7 +317,7 @@ var VideoScreen = function VideoScreen(_ref) {
321
317
  // setPosterReady(true);
322
318
  // }, [isStatic, isCapture, setPosterReady]);
323
319
 
324
- var visibleControls = !autoPlay && !playing || muted || showMediaControls;
320
+ var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
325
321
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
326
322
  key: "video",
327
323
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
@@ -386,14 +382,13 @@ var VideoScreen = function VideoScreen(_ref) {
386
382
  media: closedCaptions,
387
383
  currentTime: currentTime
388
384
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
389
- className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withPlayPause || muted)])
390
- }, 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", {
391
387
  ref: controlsRef
392
388
  }, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
393
389
  className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
394
390
  withSeekBar: withSeekBar,
395
- withPlayPause: withPlayPause,
396
- withTime: withTime,
391
+ withControls: withControls,
397
392
  playing: playing,
398
393
  muted: muted,
399
394
  currentTime: currentTime,
@@ -424,9 +419,16 @@ var VideoScreen = function VideoScreen(_ref) {
424
419
  },
425
420
  enableInteraction: enableInteraction,
426
421
  disableInteraction: disableInteraction
427
- })) : null))) : null];
422
+ })) : null, 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];
428
430
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
429
- 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)]),
430
432
  "data-screen-ready": isStatic || isCapture
431
433
  /* && posterReady */
432
434
  || ready
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.107",
3
+ "version": "0.3.110",
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.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",
53
+ "@micromag/core": "^0.3.110",
54
+ "@micromag/element-background": "^0.3.110",
55
+ "@micromag/element-call-to-action": "^0.3.110",
56
+ "@micromag/element-closed-captions": "^0.3.110",
57
+ "@micromag/element-container": "^0.3.110",
58
+ "@micromag/element-image": "^0.3.110",
59
+ "@micromag/element-media-controls": "^0.3.110",
60
+ "@micromag/element-video": "^0.3.110",
61
+ "@micromag/transforms": "^0.3.110",
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": "952ef450fe62328a0ae3ab6dbb3c3079bb66d17a"
71
+ "gitHead": "a4a09bb4e14c7ee52330258a2e9a02b3cc8809a7"
72
72
  }