@micromag/screen-video 0.3.126 → 0.3.131

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 +43 -39
  3. package/lib/index.js +43 -39
  4. package/package.json +4 -4
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}.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}
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%;height: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
@@ -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","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"};
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","bottomSeekBar":"micromag-screen-video-bottomSeekBar","isHidden":"micromag-screen-video-isHidden"};
24
24
 
25
25
  var propTypes = {
26
26
  layout: PropTypes.oneOf(['middle', 'full']),
@@ -54,7 +54,7 @@ var defaultProps = {
54
54
  };
55
55
 
56
56
  var VideoScreen = function VideoScreen(_ref) {
57
- var _ref11, _ref13;
57
+ var _ref13;
58
58
 
59
59
  var layout = _ref.layout,
60
60
  video = _ref.video,
@@ -109,8 +109,6 @@ var VideoScreen = function VideoScreen(_ref) {
109
109
  _ref2$progressColor = _ref2.progressColor,
110
110
  progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
111
111
 
112
- var hasControls = (withSeekBar || withControls) && (isView || isEdit);
113
-
114
112
  var _useResizeObserver = useResizeObserver(),
115
113
  controlsRef = _useResizeObserver.ref,
116
114
  contentRect = _useResizeObserver.entry.contentRect;
@@ -140,28 +138,33 @@ var VideoScreen = function VideoScreen(_ref) {
140
138
  var _useState = useState(false),
141
139
  _useState2 = _slicedToArray(_useState, 2),
142
140
  showMediaControls = _useState2[0],
143
- setShowMediaControls = _useState2[1]; // Get api state updates from callback
144
-
141
+ setShowMediaControls = _useState2[1];
145
142
 
146
- var _useState3 = useState(null),
143
+ var _useState3 = useState(false),
147
144
  _useState4 = _slicedToArray(_useState3, 2),
148
- currentTime = _useState4[0],
149
- setCurrentTime = _useState4[1];
145
+ playOnFirstTap = _useState4[0],
146
+ setPlayOnFirstTap = _useState4[1]; // Get api state updates from callback
147
+
150
148
 
151
149
  var _useState5 = useState(null),
152
150
  _useState6 = _slicedToArray(_useState5, 2),
153
- duration = _useState6[0],
154
- setDuration = _useState6[1];
151
+ currentTime = _useState6[0],
152
+ setCurrentTime = _useState6[1];
155
153
 
156
- var _useState7 = useState(false),
154
+ var _useState7 = useState(null),
157
155
  _useState8 = _slicedToArray(_useState7, 2),
158
- playing = _useState8[0],
159
- setPlaying = _useState8[1];
156
+ duration = _useState8[0],
157
+ setDuration = _useState8[1];
160
158
 
161
159
  var _useState9 = useState(false),
162
160
  _useState10 = _slicedToArray(_useState9, 2),
163
- muted = _useState10[0],
164
- setMuted = _useState10[1];
161
+ playing = _useState10[0],
162
+ setPlaying = _useState10[1];
163
+
164
+ var _useState11 = useState(false),
165
+ _useState12 = _slicedToArray(_useState11, 2),
166
+ muted = _useState12[0],
167
+ setMuted = _useState12[1];
165
168
 
166
169
  var onTimeUpdate = useCallback(function (time) {
167
170
  setCurrentTime(time);
@@ -236,7 +239,7 @@ var VideoScreen = function VideoScreen(_ref) {
236
239
  }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
237
240
  var onShowControls = useCallback(function (e) {
238
241
  onMouseMove(e, 3000);
239
- }, [onMouseMove]);
242
+ }, [play, onMouseMove]);
240
243
  var longPressBind = useLongPress({
241
244
  onLongPress: onLongPress,
242
245
  onClick: onMouseMove
@@ -245,10 +248,10 @@ var VideoScreen = function VideoScreen(_ref) {
245
248
  var hasCallToAction = callToAction !== null && callToAction.active === true;
246
249
  var hasVideo = video !== null;
247
250
 
248
- var _useState11 = useState(hasVideo),
249
- _useState12 = _slicedToArray(_useState11, 2),
250
- ready = _useState12[0],
251
- setReady = _useState12[1]; // useState(!hasVideo);
251
+ var _useState13 = useState(hasVideo),
252
+ _useState14 = _slicedToArray(_useState13, 2),
253
+ ready = _useState14[0],
254
+ setReady = _useState14[1]; // useState(!hasVideo);
252
255
 
253
256
 
254
257
  var transitionPlaying = current && ready;
@@ -266,8 +269,7 @@ var VideoScreen = function VideoScreen(_ref) {
266
269
  videoUrl = _ref7$url === void 0 ? null : _ref7$url;
267
270
 
268
271
  var thumbnailUrl = useMediaThumbnail(videoMedia, thumbnailFile);
269
- var hasVideoUrl = videoUrl !== null; // const hasThumbnail = thumbnailUrl !== null;
270
- // const [posterReady, setPosterReady] = useState(!hasThumbnail);
272
+ var hasVideoUrl = videoUrl !== null;
271
273
 
272
274
  var _ref8 = videoMetadata || {},
273
275
  _ref8$width = _ref8.width,
@@ -291,17 +293,15 @@ var VideoScreen = function VideoScreen(_ref) {
291
293
  };
292
294
  useEffect(function () {
293
295
  setReady(!hasVideoUrl);
294
- }, [videoUrl, hasVideoUrl, setReady]); // useEffect(() => {
295
- // setPosterReady(!hasThumbnail);
296
- // }, [thumbnailUrl, hasThumbnail, setPosterReady]);
297
-
296
+ }, [videoUrl, hasVideoUrl, setReady]);
298
297
  var onVideoReady = useCallback(function () {
299
298
  setReady(true);
300
- }, [setReady]); // const onPosterLoaded = useCallback(() => {
301
- // setPosterReady(true);
302
- // }, [isStatic, isCapture, setPosterReady]);
303
299
 
304
- var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
300
+ if (autoPlay && !playing) {
301
+ setPlayOnFirstTap(true); // @note: this sets up a button that plays the video on click for folks who are low on battery on their device: e.g. ios stops the autoplay of videos in that case...
302
+ }
303
+ }, [setReady]);
304
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
305
305
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
306
306
  key: "video",
307
307
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
@@ -354,7 +354,12 @@ var VideoScreen = function VideoScreen(_ref) {
354
354
  onVolumeChanged: onVolumeChanged,
355
355
  focusable: current && isView,
356
356
  shouldLoad: mediaShouldLoad
357
- }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
357
+ }))) : null), playOnFirstTap && !playing ? /*#__PURE__*/React.createElement("button", {
358
+ key: "first-tap-button",
359
+ type: "button",
360
+ onClick: onPlay,
361
+ className: classNames([styles.videoButton])
362
+ }) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
358
363
  key: "bottom-content",
359
364
  className: styles.bottomContent
360
365
  }, /*#__PURE__*/React.createElement(Transitions, {
@@ -367,7 +372,7 @@ var VideoScreen = function VideoScreen(_ref) {
367
372
  currentTime: currentTime
368
373
  }) : null, /*#__PURE__*/React.createElement("div", {
369
374
  className: classNames([styles.bottom, _defineProperty({}, styles.withGradient, withSeekBar || withControls || muted)])
370
- }, hasVideoUrl && hasControls ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
375
+ }, hasVideoUrl ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
371
376
  ref: controlsRef
372
377
  }, /*#__PURE__*/React.createElement(MediaControls, {
373
378
  className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
@@ -384,12 +389,13 @@ var VideoScreen = function VideoScreen(_ref) {
384
389
  onSeek: onSeek,
385
390
  focusable: current && isView
386
391
  })), /*#__PURE__*/React.createElement("button", {
387
- type: "button",
392
+ key: "video-button",
388
393
  style: {
389
394
  height: controlsHeight
390
395
  },
391
- onClick: onShowControls,
392
- className: classNames([styles.videoButton, (_ref11 = {}, _defineProperty(_ref11, styles.visible, !visibleControls), _defineProperty(_ref11, styles.alwaysHidden, !hasControls), _ref11)])
396
+ type: "button",
397
+ onPointerDown: onShowControls,
398
+ className: classNames([styles.videoButton, _defineProperty({}, styles.visible, !visibleControls)])
393
399
  })) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
394
400
  style: {
395
401
  marginTop: -spacing / 2
@@ -417,9 +423,7 @@ var VideoScreen = function VideoScreen(_ref) {
417
423
  }) : null))) : null];
418
424
  return /*#__PURE__*/React.createElement("div", Object.assign({
419
425
  className: classNames([styles.container, (_ref13 = {}, _defineProperty(_ref13, className, className !== null), _defineProperty(_ref13, styles.fullscreen, fullscreen), _ref13)]),
420
- "data-screen-ready": isStatic || isCapture
421
- /* && posterReady */
422
- || ready
426
+ "data-screen-ready": isStatic || isCapture || ready
423
427
  }, longPressBind, {
424
428
  onMouseMove: onMouseMove
425
429
  }), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
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","bottomSeekBar":"micromag-screen-video-bottomSeekBar","isHidden":"micromag-screen-video-isHidden"};
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","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,7 +75,7 @@ var defaultProps = {
75
75
  };
76
76
 
77
77
  var VideoScreen = function VideoScreen(_ref) {
78
- var _ref11, _ref13;
78
+ var _ref13;
79
79
 
80
80
  var layout = _ref.layout,
81
81
  video = _ref.video,
@@ -130,8 +130,6 @@ var VideoScreen = function VideoScreen(_ref) {
130
130
  _ref2$progressColor = _ref2.progressColor,
131
131
  progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
132
132
 
133
- var hasControls = (withSeekBar || withControls) && (isView || isEdit);
134
-
135
133
  var _useResizeObserver = hooks.useResizeObserver(),
136
134
  controlsRef = _useResizeObserver.ref,
137
135
  contentRect = _useResizeObserver.entry.contentRect;
@@ -161,28 +159,33 @@ var VideoScreen = function VideoScreen(_ref) {
161
159
  var _useState = React.useState(false),
162
160
  _useState2 = _slicedToArray__default["default"](_useState, 2),
163
161
  showMediaControls = _useState2[0],
164
- setShowMediaControls = _useState2[1]; // Get api state updates from callback
165
-
162
+ setShowMediaControls = _useState2[1];
166
163
 
167
- var _useState3 = React.useState(null),
164
+ var _useState3 = React.useState(false),
168
165
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
169
- currentTime = _useState4[0],
170
- setCurrentTime = _useState4[1];
166
+ playOnFirstTap = _useState4[0],
167
+ setPlayOnFirstTap = _useState4[1]; // Get api state updates from callback
168
+
171
169
 
172
170
  var _useState5 = React.useState(null),
173
171
  _useState6 = _slicedToArray__default["default"](_useState5, 2),
174
- duration = _useState6[0],
175
- setDuration = _useState6[1];
172
+ currentTime = _useState6[0],
173
+ setCurrentTime = _useState6[1];
176
174
 
177
- var _useState7 = React.useState(false),
175
+ var _useState7 = React.useState(null),
178
176
  _useState8 = _slicedToArray__default["default"](_useState7, 2),
179
- playing = _useState8[0],
180
- setPlaying = _useState8[1];
177
+ duration = _useState8[0],
178
+ setDuration = _useState8[1];
181
179
 
182
180
  var _useState9 = React.useState(false),
183
181
  _useState10 = _slicedToArray__default["default"](_useState9, 2),
184
- muted = _useState10[0],
185
- setMuted = _useState10[1];
182
+ playing = _useState10[0],
183
+ setPlaying = _useState10[1];
184
+
185
+ var _useState11 = React.useState(false),
186
+ _useState12 = _slicedToArray__default["default"](_useState11, 2),
187
+ muted = _useState12[0],
188
+ setMuted = _useState12[1];
186
189
 
187
190
  var onTimeUpdate = React.useCallback(function (time) {
188
191
  setCurrentTime(time);
@@ -257,7 +260,7 @@ var VideoScreen = function VideoScreen(_ref) {
257
260
  }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
258
261
  var onShowControls = React.useCallback(function (e) {
259
262
  onMouseMove(e, 3000);
260
- }, [onMouseMove]);
263
+ }, [play, onMouseMove]);
261
264
  var longPressBind = hooks.useLongPress({
262
265
  onLongPress: onLongPress,
263
266
  onClick: onMouseMove
@@ -266,10 +269,10 @@ var VideoScreen = function VideoScreen(_ref) {
266
269
  var hasCallToAction = callToAction !== null && callToAction.active === true;
267
270
  var hasVideo = video !== null;
268
271
 
269
- var _useState11 = React.useState(hasVideo),
270
- _useState12 = _slicedToArray__default["default"](_useState11, 2),
271
- ready = _useState12[0],
272
- setReady = _useState12[1]; // useState(!hasVideo);
272
+ var _useState13 = React.useState(hasVideo),
273
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
274
+ ready = _useState14[0],
275
+ setReady = _useState14[1]; // useState(!hasVideo);
273
276
 
274
277
 
275
278
  var transitionPlaying = current && ready;
@@ -287,8 +290,7 @@ var VideoScreen = function VideoScreen(_ref) {
287
290
  videoUrl = _ref7$url === void 0 ? null : _ref7$url;
288
291
 
289
292
  var thumbnailUrl = hooks.useMediaThumbnail(videoMedia, thumbnailFile);
290
- var hasVideoUrl = videoUrl !== null; // const hasThumbnail = thumbnailUrl !== null;
291
- // const [posterReady, setPosterReady] = useState(!hasThumbnail);
293
+ var hasVideoUrl = videoUrl !== null;
292
294
 
293
295
  var _ref8 = videoMetadata || {},
294
296
  _ref8$width = _ref8.width,
@@ -312,17 +314,15 @@ var VideoScreen = function VideoScreen(_ref) {
312
314
  };
313
315
  React.useEffect(function () {
314
316
  setReady(!hasVideoUrl);
315
- }, [videoUrl, hasVideoUrl, setReady]); // useEffect(() => {
316
- // setPosterReady(!hasThumbnail);
317
- // }, [thumbnailUrl, hasThumbnail, setPosterReady]);
318
-
317
+ }, [videoUrl, hasVideoUrl, setReady]);
319
318
  var onVideoReady = React.useCallback(function () {
320
319
  setReady(true);
321
- }, [setReady]); // const onPosterLoaded = useCallback(() => {
322
- // setPosterReady(true);
323
- // }, [isStatic, isCapture, setPosterReady]);
324
320
 
325
- var visibleControls = withControls && (!autoPlay && !playing || muted || showMediaControls);
321
+ if (autoPlay && !playing) {
322
+ setPlayOnFirstTap(true); // @note: this sets up a button that plays the video on click for folks who are low on battery on their device: e.g. ios stops the autoplay of videos in that case...
323
+ }
324
+ }, [setReady]);
325
+ var visibleControls = !autoPlay && !playing || muted || showMediaControls;
326
326
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
327
327
  key: "video",
328
328
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
@@ -375,7 +375,12 @@ var VideoScreen = function VideoScreen(_ref) {
375
375
  onVolumeChanged: onVolumeChanged,
376
376
  focusable: current && isView,
377
377
  shouldLoad: mediaShouldLoad
378
- }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
378
+ }))) : null), playOnFirstTap && !playing ? /*#__PURE__*/React__default["default"].createElement("button", {
379
+ key: "first-tap-button",
380
+ type: "button",
381
+ onClick: onPlay,
382
+ className: classNames__default["default"]([styles.videoButton])
383
+ }) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
379
384
  key: "bottom-content",
380
385
  className: styles.bottomContent
381
386
  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
@@ -388,7 +393,7 @@ var VideoScreen = function VideoScreen(_ref) {
388
393
  currentTime: currentTime
389
394
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
390
395
  className: classNames__default["default"]([styles.bottom, _defineProperty__default["default"]({}, styles.withGradient, withSeekBar || withControls || muted)])
391
- }, hasVideoUrl && hasControls ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
396
+ }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
392
397
  ref: controlsRef
393
398
  }, /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
394
399
  className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
@@ -405,12 +410,13 @@ var VideoScreen = function VideoScreen(_ref) {
405
410
  onSeek: onSeek,
406
411
  focusable: current && isView
407
412
  })), /*#__PURE__*/React__default["default"].createElement("button", {
408
- type: "button",
413
+ key: "video-button",
409
414
  style: {
410
415
  height: controlsHeight
411
416
  },
412
- onClick: onShowControls,
413
- className: classNames__default["default"]([styles.videoButton, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles.visible, !visibleControls), _defineProperty__default["default"](_ref11, styles.alwaysHidden, !hasControls), _ref11)])
417
+ type: "button",
418
+ onPointerDown: onShowControls,
419
+ className: classNames__default["default"]([styles.videoButton, _defineProperty__default["default"]({}, styles.visible, !visibleControls)])
414
420
  })) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
415
421
  style: {
416
422
  marginTop: -spacing / 2
@@ -438,9 +444,7 @@ var VideoScreen = function VideoScreen(_ref) {
438
444
  }) : null))) : null];
439
445
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
440
446
  className: classNames__default["default"]([styles.container, (_ref13 = {}, _defineProperty__default["default"](_ref13, className, className !== null), _defineProperty__default["default"](_ref13, styles.fullscreen, fullscreen), _ref13)]),
441
- "data-screen-ready": isStatic || isCapture
442
- /* && posterReady */
443
- || ready
447
+ "data-screen-ready": isStatic || isCapture || ready
444
448
  }, longPressBind, {
445
449
  onMouseMove: onMouseMove
446
450
  }), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.126",
3
+ "version": "0.3.131",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -51,8 +51,8 @@
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
53
  "@micromag/core": "^0.3.126",
54
- "@micromag/element-background": "^0.3.126",
55
- "@micromag/element-call-to-action": "^0.3.126",
54
+ "@micromag/element-background": "^0.3.127",
55
+ "@micromag/element-call-to-action": "^0.3.128",
56
56
  "@micromag/element-closed-captions": "^0.3.126",
57
57
  "@micromag/element-container": "^0.3.126",
58
58
  "@micromag/element-image": "^0.3.126",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "079203c5850c4aa771bc4fa1c567d2db1bc3ee3d"
71
+ "gitHead": "36022ce41c8564ba276666e48795aa2f47cac492"
72
72
  }