@micromag/screen-video 0.3.80 → 0.3.81

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 +51 -31
  3. package/lib/index.js +50 -30
  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-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;opacity:0}.micromag-screen-video-container .micromag-screen-video-bottom.micromag-screen-video-visible{opacity:1}.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}.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}
1
+ .micromag-screen-video-container .micromag-screen-video-videoButton{display:inline-block;position:relative;padding:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-callToAction{padding-bottom:5px}.micromag-screen-video-container .micromag-screen-video-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-video-container .micromag-screen-video-bottom.micromag-screen-video-withGradient{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-video-container .micromag-screen-video-mediaControls{padding:10px 20px 20px;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0}.micromag-screen-video-container .micromag-screen-video-mediaControls.micromag-screen-video-visible{opacity:1}.micromag-screen-video-container .micromag-screen-video-videoButton{display:none;visibility:hidden;position:absolute;top:0;right:0;left:0;width:100%;border:0;background-color:rgba(0,0,0,0)}.micromag-screen-video-container .micromag-screen-video-videoButton.micromag-screen-video-visible{display:block;visibility:visible}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;right:0;bottom:0;left:0;width:100%}.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
@@ -9,7 +9,7 @@ import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { ScreenElement, PlaceholderVideo, Empty, Transitions } from '@micromag/core/components';
11
11
  import { useScreenSize, useScreenRenderContext, useViewerNavigation } from '@micromag/core/contexts';
12
- import { useTrackScreenMedia, useLongPress } from '@micromag/core/hooks';
12
+ import { useTrackScreenMedia, useResizeObserver, useLongPress } from '@micromag/core/hooks';
13
13
  import Background from '@micromag/element-background';
14
14
  import CallToAction from '@micromag/element-call-to-action';
15
15
  import ClosedCaptions from '@micromag/element-closed-captions';
@@ -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","callToAction":"micromag-screen-video-callToAction","bottom":"micromag-screen-video-bottom","visible":"micromag-screen-video-visible","withGradient":"micromag-screen-video-withGradient","mediaControls":"micromag-screen-video-mediaControls","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","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 _ref8, _ref10;
53
+ var _ref12;
54
54
 
55
55
  var layout = _ref.layout,
56
56
  video = _ref.video,
@@ -100,16 +100,24 @@ var VideoScreen = function VideoScreen(_ref) {
100
100
  _ref2$withTime = _ref2.withTime,
101
101
  withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
102
102
 
103
+ var _useResizeObserver = useResizeObserver(),
104
+ controlsRef = _useResizeObserver.ref,
105
+ contentRect = _useResizeObserver.entry.contentRect;
106
+
107
+ var _ref3 = contentRect || {},
108
+ _ref3$height = _ref3.height,
109
+ controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
110
+
103
111
  var apiRef = useRef();
104
112
 
105
- var _ref3 = apiRef.current || {},
106
- togglePlay = _ref3.togglePlay,
107
- toggleMute = _ref3.toggleMute,
108
- seek = _ref3.seek,
109
- play = _ref3.play,
110
- pause = _ref3.pause,
111
- _ref3$mediaRef = _ref3.mediaRef,
112
- apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
113
+ var _ref4 = apiRef.current || {},
114
+ togglePlay = _ref4.togglePlay,
115
+ toggleMute = _ref4.toggleMute,
116
+ seek = _ref4.seek,
117
+ play = _ref4.play,
118
+ pause = _ref4.pause,
119
+ _ref4$mediaRef = _ref4.mediaRef,
120
+ apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
113
121
 
114
122
  useEffect(function () {
115
123
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -153,13 +161,13 @@ var VideoScreen = function VideoScreen(_ref) {
153
161
  var onDurationChanged = useCallback(function (dur) {
154
162
  setDuration(dur);
155
163
  }, [setDuration]);
156
- var onPlay = useCallback(function (_ref4) {
157
- var initial = _ref4.initial;
164
+ var onPlay = useCallback(function (_ref5) {
165
+ var initial = _ref5.initial;
158
166
  setPlaying(true);
159
167
  trackScreenMedia(video, initial ? 'play' : 'resume');
160
168
  }, [trackScreenMedia, video]);
161
- var onPause = useCallback(function (_ref5) {
162
- var midway = _ref5.midway;
169
+ var onPause = useCallback(function (_ref6) {
170
+ var midway = _ref6.midway;
163
171
  setPlaying(false);
164
172
  trackScreenMedia(video, midway ? 'pause' : 'ended');
165
173
  }, [trackScreenMedia, video]);
@@ -215,6 +223,9 @@ var VideoScreen = function VideoScreen(_ref) {
215
223
  pause();
216
224
  }
217
225
  }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
226
+ var onShowControls = useCallback(function (e) {
227
+ onMouseMove(e, 3000);
228
+ }, [onMouseMove]);
218
229
  var longPressBind = useLongPress({
219
230
  onLongPress: onLongPress,
220
231
  onClick: onMouseMove
@@ -237,22 +248,22 @@ var VideoScreen = function VideoScreen(_ref) {
237
248
  }) : null;
238
249
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
239
250
 
240
- var _ref6 = videoMedia || {},
241
- _ref6$metadata = _ref6.metadata,
242
- videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
243
- _ref6$url = _ref6.url,
244
- videoUrl = _ref6$url === void 0 ? null : _ref6$url,
245
- _ref6$thumbnail_url = _ref6.thumbnail_url,
246
- thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
251
+ var _ref7 = videoMedia || {},
252
+ _ref7$metadata = _ref7.metadata,
253
+ videoMetadata = _ref7$metadata === void 0 ? null : _ref7$metadata,
254
+ _ref7$url = _ref7.url,
255
+ videoUrl = _ref7$url === void 0 ? null : _ref7$url,
256
+ _ref7$thumbnail_url = _ref7.thumbnail_url,
257
+ thumbnailUrl = _ref7$thumbnail_url === void 0 ? null : _ref7$thumbnail_url;
247
258
 
248
259
  var hasVideoUrl = videoUrl !== null; // const hasThumbnail = thumbnailUrl !== null;
249
260
  // const [posterReady, setPosterReady] = useState(!hasThumbnail);
250
261
 
251
- var _ref7 = videoMetadata || {},
252
- _ref7$width = _ref7.width,
253
- videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
254
- _ref7$height = _ref7.height,
255
- videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
262
+ var _ref8 = videoMetadata || {},
263
+ _ref8$width = _ref8.width,
264
+ videoWidth = _ref8$width === void 0 ? 0 : _ref8$width,
265
+ _ref8$height = _ref8.height,
266
+ videoHeight = _ref8$height === void 0 ? 0 : _ref8$height;
256
267
 
257
268
  var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
258
269
  cover: fullscreen
@@ -345,8 +356,10 @@ var VideoScreen = function VideoScreen(_ref) {
345
356
  media: closedCaptions,
346
357
  currentTime: currentTime
347
358
  }) : null, /*#__PURE__*/React.createElement("div", {
348
- className: classNames([styles.bottom, (_ref8 = {}, _defineProperty(_ref8, styles.visible, visibleControls), _defineProperty(_ref8, styles.withGradient, withSeekBar || withPlayPause || muted), _ref8)])
349
- }, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
359
+ className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withPlayPause || muted)])
360
+ }, hasVideoUrl ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
361
+ ref: controlsRef
362
+ }, /*#__PURE__*/React.createElement(MediaControls, {
350
363
  className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
351
364
  withSeekBar: withSeekBar,
352
365
  withPlayPause: withPlayPause,
@@ -359,7 +372,14 @@ var VideoScreen = function VideoScreen(_ref) {
359
372
  onToggleMute: onToggleMute,
360
373
  onSeek: onSeek,
361
374
  focusable: current && isView
362
- }) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
375
+ })), /*#__PURE__*/React.createElement("button", {
376
+ type: "button",
377
+ style: {
378
+ height: controlsHeight
379
+ },
380
+ onClick: onShowControls,
381
+ className: classNames([styles.videoButton, _defineProperty({}, styles.visible, !visibleControls)])
382
+ })) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
363
383
  style: {
364
384
  marginTop: -spacing / 2
365
385
  }
@@ -374,7 +394,7 @@ var VideoScreen = function VideoScreen(_ref) {
374
394
  }
375
395
  })) : null))) : null];
376
396
  return /*#__PURE__*/React.createElement("div", Object.assign({
377
- className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.fullscreen, fullscreen), _ref10)]),
397
+ className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.fullscreen, fullscreen), _ref12)]),
378
398
  "data-screen-ready": isStatic || isCapture
379
399
  /* && posterReady */
380
400
  || 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","callToAction":"micromag-screen-video-callToAction","bottom":"micromag-screen-video-bottom","visible":"micromag-screen-video-visible","withGradient":"micromag-screen-video-withGradient","mediaControls":"micromag-screen-video-mediaControls","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","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 _ref8, _ref10;
74
+ var _ref12;
75
75
 
76
76
  var layout = _ref.layout,
77
77
  video = _ref.video,
@@ -121,16 +121,24 @@ var VideoScreen = function VideoScreen(_ref) {
121
121
  _ref2$withTime = _ref2.withTime,
122
122
  withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
123
123
 
124
+ var _useResizeObserver = hooks.useResizeObserver(),
125
+ controlsRef = _useResizeObserver.ref,
126
+ contentRect = _useResizeObserver.entry.contentRect;
127
+
128
+ var _ref3 = contentRect || {},
129
+ _ref3$height = _ref3.height,
130
+ controlsHeight = _ref3$height === void 0 ? null : _ref3$height;
131
+
124
132
  var apiRef = React.useRef();
125
133
 
126
- var _ref3 = apiRef.current || {},
127
- togglePlay = _ref3.togglePlay,
128
- toggleMute = _ref3.toggleMute,
129
- seek = _ref3.seek,
130
- play = _ref3.play,
131
- pause = _ref3.pause,
132
- _ref3$mediaRef = _ref3.mediaRef,
133
- apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
134
+ var _ref4 = apiRef.current || {},
135
+ togglePlay = _ref4.togglePlay,
136
+ toggleMute = _ref4.toggleMute,
137
+ seek = _ref4.seek,
138
+ play = _ref4.play,
139
+ pause = _ref4.pause,
140
+ _ref4$mediaRef = _ref4.mediaRef,
141
+ apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
134
142
 
135
143
  React.useEffect(function () {
136
144
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -174,13 +182,13 @@ var VideoScreen = function VideoScreen(_ref) {
174
182
  var onDurationChanged = React.useCallback(function (dur) {
175
183
  setDuration(dur);
176
184
  }, [setDuration]);
177
- var onPlay = React.useCallback(function (_ref4) {
178
- var initial = _ref4.initial;
185
+ var onPlay = React.useCallback(function (_ref5) {
186
+ var initial = _ref5.initial;
179
187
  setPlaying(true);
180
188
  trackScreenMedia(video, initial ? 'play' : 'resume');
181
189
  }, [trackScreenMedia, video]);
182
- var onPause = React.useCallback(function (_ref5) {
183
- var midway = _ref5.midway;
190
+ var onPause = React.useCallback(function (_ref6) {
191
+ var midway = _ref6.midway;
184
192
  setPlaying(false);
185
193
  trackScreenMedia(video, midway ? 'pause' : 'ended');
186
194
  }, [trackScreenMedia, video]);
@@ -236,6 +244,9 @@ var VideoScreen = function VideoScreen(_ref) {
236
244
  pause();
237
245
  }
238
246
  }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
247
+ var onShowControls = React.useCallback(function (e) {
248
+ onMouseMove(e, 3000);
249
+ }, [onMouseMove]);
239
250
  var longPressBind = hooks.useLongPress({
240
251
  onLongPress: onLongPress,
241
252
  onClick: onMouseMove
@@ -258,22 +269,22 @@ var VideoScreen = function VideoScreen(_ref) {
258
269
  }) : null;
259
270
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
260
271
 
261
- var _ref6 = videoMedia || {},
262
- _ref6$metadata = _ref6.metadata,
263
- videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
264
- _ref6$url = _ref6.url,
265
- videoUrl = _ref6$url === void 0 ? null : _ref6$url,
266
- _ref6$thumbnail_url = _ref6.thumbnail_url,
267
- thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
272
+ var _ref7 = videoMedia || {},
273
+ _ref7$metadata = _ref7.metadata,
274
+ videoMetadata = _ref7$metadata === void 0 ? null : _ref7$metadata,
275
+ _ref7$url = _ref7.url,
276
+ videoUrl = _ref7$url === void 0 ? null : _ref7$url,
277
+ _ref7$thumbnail_url = _ref7.thumbnail_url,
278
+ thumbnailUrl = _ref7$thumbnail_url === void 0 ? null : _ref7$thumbnail_url;
268
279
 
269
280
  var hasVideoUrl = videoUrl !== null; // const hasThumbnail = thumbnailUrl !== null;
270
281
  // const [posterReady, setPosterReady] = useState(!hasThumbnail);
271
282
 
272
- var _ref7 = videoMetadata || {},
273
- _ref7$width = _ref7.width,
274
- videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
275
- _ref7$height = _ref7.height,
276
- videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
283
+ var _ref8 = videoMetadata || {},
284
+ _ref8$width = _ref8.width,
285
+ videoWidth = _ref8$width === void 0 ? 0 : _ref8$width,
286
+ _ref8$height = _ref8.height,
287
+ videoHeight = _ref8$height === void 0 ? 0 : _ref8$height;
277
288
 
278
289
  var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
279
290
  cover: fullscreen
@@ -366,8 +377,10 @@ var VideoScreen = function VideoScreen(_ref) {
366
377
  media: closedCaptions,
367
378
  currentTime: currentTime
368
379
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
369
- className: classNames__default["default"]([styles.bottom, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles.visible, visibleControls), _defineProperty__default["default"](_ref8, styles.withGradient, withSeekBar || withPlayPause || muted), _ref8)])
370
- }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
380
+ className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withPlayPause || muted)])
381
+ }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
382
+ ref: controlsRef
383
+ }, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
371
384
  className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
372
385
  withSeekBar: withSeekBar,
373
386
  withPlayPause: withPlayPause,
@@ -380,7 +393,14 @@ var VideoScreen = function VideoScreen(_ref) {
380
393
  onToggleMute: onToggleMute,
381
394
  onSeek: onSeek,
382
395
  focusable: current && isView
383
- }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
396
+ })), /*#__PURE__*/React__default["default"].createElement("button", {
397
+ type: "button",
398
+ style: {
399
+ height: controlsHeight
400
+ },
401
+ onClick: onShowControls,
402
+ className: classNames__default["default"]([styles.videoButton, _defineProperty__default["default"]({}, styles.visible, !visibleControls)])
403
+ })) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
384
404
  style: {
385
405
  marginTop: -spacing / 2
386
406
  }
@@ -395,7 +415,7 @@ var VideoScreen = function VideoScreen(_ref) {
395
415
  }
396
416
  })) : null))) : null];
397
417
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
398
- className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.fullscreen, fullscreen), _ref10)]),
418
+ className: classNames__default["default"]([styles.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, className, className !== null), _defineProperty__default["default"](_ref12, styles.fullscreen, fullscreen), _ref12)]),
399
419
  "data-screen-ready": isStatic || isCapture
400
420
  /* && posterReady */
401
421
  || ready
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.80",
3
+ "version": "0.3.81",
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.80",
54
- "@micromag/element-background": "^0.3.80",
55
- "@micromag/element-call-to-action": "^0.3.80",
56
- "@micromag/element-closed-captions": "^0.3.80",
57
- "@micromag/element-container": "^0.3.80",
58
- "@micromag/element-image": "^0.3.80",
59
- "@micromag/element-media-controls": "^0.3.80",
60
- "@micromag/element-video": "^0.3.80",
61
- "@micromag/transforms": "^0.3.80",
53
+ "@micromag/core": "^0.3.81",
54
+ "@micromag/element-background": "^0.3.81",
55
+ "@micromag/element-call-to-action": "^0.3.81",
56
+ "@micromag/element-closed-captions": "^0.3.81",
57
+ "@micromag/element-container": "^0.3.81",
58
+ "@micromag/element-image": "^0.3.81",
59
+ "@micromag/element-media-controls": "^0.3.81",
60
+ "@micromag/element-video": "^0.3.81",
61
+ "@micromag/transforms": "^0.3.81",
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": "3fdbc1c17e63df2cbe671bd08a19d21cd32754b9"
71
+ "gitHead": "4fec1502a42a4813cc39e24de20c6cd47134cc62"
72
72
  }