@micromag/screen-video 0.3.25 → 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 +57 -41
  3. package/lib/index.js +57 -41
  4. package/package.json +11 -11
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,
@@ -83,17 +83,32 @@ var VideoScreen = function VideoScreen(_ref) {
83
83
  var backgroundPlaying = current && (isView || isEdit);
84
84
  var backgroundShouldLoad = current || active || !isView;
85
85
  var videoShouldLoad = current || active || !isView;
86
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
86
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
87
+
88
+ var _ref2 = video || {},
89
+ _ref2$autoPlay = _ref2.autoPlay,
90
+ autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
91
+ _ref2$media = _ref2.media,
92
+ videoMedia = _ref2$media === void 0 ? null : _ref2$media,
93
+ _ref2$closedCaptions = _ref2.closedCaptions,
94
+ closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
95
+ _ref2$withSeekBar = _ref2.withSeekBar,
96
+ withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
97
+ _ref2$withPlayPause = _ref2.withPlayPause,
98
+ withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
99
+ _ref2$withTime = _ref2.withTime,
100
+ withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
101
+
87
102
  var apiRef = useRef();
88
103
 
89
- var _ref2 = apiRef.current || {},
90
- togglePlay = _ref2.togglePlay,
91
- toggleMute = _ref2.toggleMute,
92
- seek = _ref2.seek,
93
- play = _ref2.play,
94
- pause = _ref2.pause,
95
- _ref2$mediaRef = _ref2.mediaRef,
96
- apiMediaRef = _ref2$mediaRef === void 0 ? null : _ref2$mediaRef;
104
+ var _ref3 = apiRef.current || {},
105
+ togglePlay = _ref3.togglePlay,
106
+ toggleMute = _ref3.toggleMute,
107
+ seek = _ref3.seek,
108
+ play = _ref3.play,
109
+ pause = _ref3.pause,
110
+ _ref3$mediaRef = _ref3.mediaRef,
111
+ apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
97
112
 
98
113
  useEffect(function () {
99
114
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -137,13 +152,13 @@ var VideoScreen = function VideoScreen(_ref) {
137
152
  var onDurationChanged = useCallback(function (dur) {
138
153
  setDuration(dur);
139
154
  }, [setDuration]);
140
- var onPlay = useCallback(function (_ref3) {
141
- var initial = _ref3.initial;
155
+ var onPlay = useCallback(function (_ref4) {
156
+ var initial = _ref4.initial;
142
157
  setPlaying(true);
143
158
  trackScreenMedia(video, initial ? 'play' : 'resume');
144
159
  }, [trackScreenMedia, video]);
145
- var onPause = useCallback(function (_ref4) {
146
- var midway = _ref4.midway;
160
+ var onPause = useCallback(function (_ref5) {
161
+ var midway = _ref5.midway;
147
162
  setPlaying(false);
148
163
  trackScreenMedia(video, midway ? 'pause' : 'ended');
149
164
  }, [trackScreenMedia, video]);
@@ -151,6 +166,10 @@ var VideoScreen = function VideoScreen(_ref) {
151
166
  setMuted(isMuted);
152
167
  trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
153
168
  }, [trackScreenMedia, video]);
169
+ var onSeek = useCallback(function (e) {
170
+ seek(e);
171
+ play();
172
+ }, [seek, play]);
154
173
  var onSeeked = useCallback(function (time) {
155
174
  if (time > 0) {
156
175
  trackScreenMedia(video, 'seek');
@@ -173,7 +192,8 @@ var VideoScreen = function VideoScreen(_ref) {
173
192
  pause();
174
193
  }
175
194
  }, [playing, current]);
176
- var onMouseMove = useCallback(function () {
195
+ var onMouseMove = useCallback(function (e) {
196
+ var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
177
197
  setShowMediaControls(true);
178
198
 
179
199
  if (mouseMoveRef.current !== null) {
@@ -183,11 +203,19 @@ var VideoScreen = function VideoScreen(_ref) {
183
203
  mouseMoveRef.current = setTimeout(function () {
184
204
  setShowMediaControls(false);
185
205
  mouseMoveRef.current = null;
186
- }, 1800);
187
- }, [setShowMediaControls]); // ------------------------------------
188
-
206
+ }, time);
207
+ }, [setShowMediaControls]);
208
+ var onLongPress = useCallback(function () {
209
+ if (!playing) {
210
+ play();
211
+ } else if (withPlayPause) {
212
+ onMouseMove(null, 3000);
213
+ } else {
214
+ pause();
215
+ }
216
+ }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
189
217
  var longPressBind = useLongPress({
190
- onLongPress: togglePlay,
218
+ onLongPress: onLongPress,
191
219
  onClick: onMouseMove
192
220
  });
193
221
  var fullscreen = layout === 'full';
@@ -201,22 +229,7 @@ var VideoScreen = function VideoScreen(_ref) {
201
229
 
202
230
 
203
231
  var transitionPlaying = current && ready;
204
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit; // get resized video style props
205
-
206
- var _ref5 = video || {},
207
- _ref5$autoPlay = _ref5.autoPlay,
208
- autoPlay = _ref5$autoPlay === void 0 ? true : _ref5$autoPlay,
209
- _ref5$media = _ref5.media,
210
- videoMedia = _ref5$media === void 0 ? null : _ref5$media,
211
- _ref5$closedCaptions = _ref5.closedCaptions,
212
- closedCaptions = _ref5$closedCaptions === void 0 ? null : _ref5$closedCaptions,
213
- _ref5$withSeekBar = _ref5.withSeekBar,
214
- withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
215
- _ref5$withPlayPause = _ref5.withPlayPause,
216
- withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause,
217
- _ref5$withTime = _ref5.withTime,
218
- withTime = _ref5$withTime === void 0 ? false : _ref5$withTime;
219
-
232
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
220
233
  var finalVideo = useMemo(function () {
221
234
  return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
222
235
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -266,6 +279,7 @@ var VideoScreen = function VideoScreen(_ref) {
266
279
  // setPosterReady(true);
267
280
  // }, [isStatic, isCapture, setPosterReady]);
268
281
 
282
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
269
283
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
270
284
  key: "video",
271
285
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
@@ -328,8 +342,10 @@ var VideoScreen = function VideoScreen(_ref) {
328
342
  className: styles.closedCaptions,
329
343
  media: closedCaptions,
330
344
  currentTime: currentTime
331
- }) : null, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
332
- 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)]),
333
349
  withSeekBar: withSeekBar,
334
350
  withPlayPause: withPlayPause,
335
351
  withTime: withTime,
@@ -339,7 +355,7 @@ var VideoScreen = function VideoScreen(_ref) {
339
355
  duration: duration,
340
356
  onTogglePlay: togglePlay,
341
357
  onToggleMute: onToggleMute,
342
- onSeek: seek,
358
+ onSeek: onSeek,
343
359
  focusable: current && isView
344
360
  }) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
345
361
  style: {
@@ -349,9 +365,9 @@ var VideoScreen = function VideoScreen(_ref) {
349
365
  callToAction: callToAction,
350
366
  animationDisabled: isPreview,
351
367
  focusable: current && isView
352
- })) : null)) : null];
368
+ })) : null))) : null];
353
369
  return /*#__PURE__*/React.createElement("div", Object.assign({
354
- 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)]),
355
371
  "data-screen-ready": isStatic || isCapture
356
372
  /* && posterReady */
357
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,
@@ -104,17 +104,32 @@ var VideoScreen = function VideoScreen(_ref) {
104
104
  var backgroundPlaying = current && (isView || isEdit);
105
105
  var backgroundShouldLoad = current || active || !isView;
106
106
  var videoShouldLoad = current || active || !isView;
107
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
107
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
108
+
109
+ var _ref2 = video || {},
110
+ _ref2$autoPlay = _ref2.autoPlay,
111
+ autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
112
+ _ref2$media = _ref2.media,
113
+ videoMedia = _ref2$media === void 0 ? null : _ref2$media,
114
+ _ref2$closedCaptions = _ref2.closedCaptions,
115
+ closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
116
+ _ref2$withSeekBar = _ref2.withSeekBar,
117
+ withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
118
+ _ref2$withPlayPause = _ref2.withPlayPause,
119
+ withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
120
+ _ref2$withTime = _ref2.withTime,
121
+ withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
122
+
108
123
  var apiRef = React.useRef();
109
124
 
110
- var _ref2 = apiRef.current || {},
111
- togglePlay = _ref2.togglePlay,
112
- toggleMute = _ref2.toggleMute,
113
- seek = _ref2.seek,
114
- play = _ref2.play,
115
- pause = _ref2.pause,
116
- _ref2$mediaRef = _ref2.mediaRef,
117
- apiMediaRef = _ref2$mediaRef === void 0 ? null : _ref2$mediaRef;
125
+ var _ref3 = apiRef.current || {},
126
+ togglePlay = _ref3.togglePlay,
127
+ toggleMute = _ref3.toggleMute,
128
+ seek = _ref3.seek,
129
+ play = _ref3.play,
130
+ pause = _ref3.pause,
131
+ _ref3$mediaRef = _ref3.mediaRef,
132
+ apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
118
133
 
119
134
  React.useEffect(function () {
120
135
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -158,13 +173,13 @@ var VideoScreen = function VideoScreen(_ref) {
158
173
  var onDurationChanged = React.useCallback(function (dur) {
159
174
  setDuration(dur);
160
175
  }, [setDuration]);
161
- var onPlay = React.useCallback(function (_ref3) {
162
- var initial = _ref3.initial;
176
+ var onPlay = React.useCallback(function (_ref4) {
177
+ var initial = _ref4.initial;
163
178
  setPlaying(true);
164
179
  trackScreenMedia(video, initial ? 'play' : 'resume');
165
180
  }, [trackScreenMedia, video]);
166
- var onPause = React.useCallback(function (_ref4) {
167
- var midway = _ref4.midway;
181
+ var onPause = React.useCallback(function (_ref5) {
182
+ var midway = _ref5.midway;
168
183
  setPlaying(false);
169
184
  trackScreenMedia(video, midway ? 'pause' : 'ended');
170
185
  }, [trackScreenMedia, video]);
@@ -172,6 +187,10 @@ var VideoScreen = function VideoScreen(_ref) {
172
187
  setMuted(isMuted);
173
188
  trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
174
189
  }, [trackScreenMedia, video]);
190
+ var onSeek = React.useCallback(function (e) {
191
+ seek(e);
192
+ play();
193
+ }, [seek, play]);
175
194
  var onSeeked = React.useCallback(function (time) {
176
195
  if (time > 0) {
177
196
  trackScreenMedia(video, 'seek');
@@ -194,7 +213,8 @@ var VideoScreen = function VideoScreen(_ref) {
194
213
  pause();
195
214
  }
196
215
  }, [playing, current]);
197
- var onMouseMove = React.useCallback(function () {
216
+ var onMouseMove = React.useCallback(function (e) {
217
+ var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
198
218
  setShowMediaControls(true);
199
219
 
200
220
  if (mouseMoveRef.current !== null) {
@@ -204,11 +224,19 @@ var VideoScreen = function VideoScreen(_ref) {
204
224
  mouseMoveRef.current = setTimeout(function () {
205
225
  setShowMediaControls(false);
206
226
  mouseMoveRef.current = null;
207
- }, 1800);
208
- }, [setShowMediaControls]); // ------------------------------------
209
-
227
+ }, time);
228
+ }, [setShowMediaControls]);
229
+ var onLongPress = React.useCallback(function () {
230
+ if (!playing) {
231
+ play();
232
+ } else if (withPlayPause) {
233
+ onMouseMove(null, 3000);
234
+ } else {
235
+ pause();
236
+ }
237
+ }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
210
238
  var longPressBind = hooks.useLongPress({
211
- onLongPress: togglePlay,
239
+ onLongPress: onLongPress,
212
240
  onClick: onMouseMove
213
241
  });
214
242
  var fullscreen = layout === 'full';
@@ -222,22 +250,7 @@ var VideoScreen = function VideoScreen(_ref) {
222
250
 
223
251
 
224
252
  var transitionPlaying = current && ready;
225
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit; // get resized video style props
226
-
227
- var _ref5 = video || {},
228
- _ref5$autoPlay = _ref5.autoPlay,
229
- autoPlay = _ref5$autoPlay === void 0 ? true : _ref5$autoPlay,
230
- _ref5$media = _ref5.media,
231
- videoMedia = _ref5$media === void 0 ? null : _ref5$media,
232
- _ref5$closedCaptions = _ref5.closedCaptions,
233
- closedCaptions = _ref5$closedCaptions === void 0 ? null : _ref5$closedCaptions,
234
- _ref5$withSeekBar = _ref5.withSeekBar,
235
- withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
236
- _ref5$withPlayPause = _ref5.withPlayPause,
237
- withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause,
238
- _ref5$withTime = _ref5.withTime,
239
- withTime = _ref5$withTime === void 0 ? false : _ref5$withTime;
240
-
253
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
241
254
  var finalVideo = React.useMemo(function () {
242
255
  return hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
243
256
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -287,6 +300,7 @@ var VideoScreen = function VideoScreen(_ref) {
287
300
  // setPosterReady(true);
288
301
  // }, [isStatic, isCapture, setPosterReady]);
289
302
 
303
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
290
304
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
291
305
  key: "video",
292
306
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
@@ -349,8 +363,10 @@ var VideoScreen = function VideoScreen(_ref) {
349
363
  className: styles.closedCaptions,
350
364
  media: closedCaptions,
351
365
  currentTime: currentTime
352
- }) : null, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
353
- 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)]),
354
370
  withSeekBar: withSeekBar,
355
371
  withPlayPause: withPlayPause,
356
372
  withTime: withTime,
@@ -360,7 +376,7 @@ var VideoScreen = function VideoScreen(_ref) {
360
376
  duration: duration,
361
377
  onTogglePlay: togglePlay,
362
378
  onToggleMute: onToggleMute,
363
- onSeek: seek,
379
+ onSeek: onSeek,
364
380
  focusable: current && isView
365
381
  }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
366
382
  style: {
@@ -370,9 +386,9 @@ var VideoScreen = function VideoScreen(_ref) {
370
386
  callToAction: callToAction,
371
387
  animationDisabled: isPreview,
372
388
  focusable: current && isView
373
- })) : null)) : null];
389
+ })) : null))) : null];
374
390
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
375
- 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)]),
376
392
  "data-screen-ready": isStatic || isCapture
377
393
  /* && posterReady */
378
394
  || ready
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.25",
3
+ "version": "0.3.31",
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.15",
53
- "@micromag/core": "^0.3.25",
54
- "@micromag/element-background": "^0.3.25",
55
- "@micromag/element-call-to-action": "^0.3.25",
56
- "@micromag/element-closed-captions": "^0.3.25",
57
- "@micromag/element-container": "^0.3.25",
58
- "@micromag/element-image": "^0.3.25",
59
- "@micromag/element-media-controls": "^0.3.25",
60
- "@micromag/element-video": "^0.3.25",
61
- "@micromag/transforms": "^0.3.25",
53
+ "@micromag/core": "^0.3.29",
54
+ "@micromag/element-background": "^0.3.31",
55
+ "@micromag/element-call-to-action": "^0.3.29",
56
+ "@micromag/element-closed-captions": "^0.3.29",
57
+ "@micromag/element-container": "^0.3.29",
58
+ "@micromag/element-image": "^0.3.29",
59
+ "@micromag/element-media-controls": "^0.3.31",
60
+ "@micromag/element-video": "^0.3.31",
61
+ "@micromag/transforms": "^0.3.29",
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": "5f08fe9d1373e802a08df9edd6842ac848bdc009"
71
+ "gitHead": "cff56eaea0fa5635c4cc3196835fa99eb7a5ec82"
72
72
  }