@micromag/screen-video 0.3.135 → 0.3.137

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 (3) hide show
  1. package/es/index.js +18 -11
  2. package/lib/index.js +18 -11
  3. package/package.json +11 -11
package/es/index.js CHANGED
@@ -117,6 +117,7 @@ var VideoScreen = function VideoScreen(_ref) {
117
117
  seek = _ref3.seek,
118
118
  play = _ref3.play,
119
119
  pause = _ref3.pause,
120
+ suspended = _ref3.suspended,
120
121
  _ref3$mediaRef = _ref3.mediaRef,
121
122
  apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
122
123
 
@@ -287,15 +288,26 @@ var VideoScreen = function VideoScreen(_ref) {
287
288
  setReady(!hasVideoUrl);
288
289
  }, [videoUrl, hasVideoUrl, setReady]);
289
290
  var onVideoReady = useCallback(function () {
290
- setReady(true);
291
- }, [setReady]);
291
+ setReady(true); // @todo the battery-saving play button issue
292
+
293
+ if (autoPlay && suspended) {
294
+ setShouldCatchFirstTapToPlay(true);
295
+ }
296
+ }, [setReady, autoPlay, suspended, setShouldCatchFirstTapToPlay]);
292
297
  var onSuspended = useCallback(function () {
293
- if (autoPlay) {
298
+ if (autoPlay && suspended) {
294
299
  setShouldCatchFirstTapToPlay(true);
295
300
  }
296
- }, [setShouldCatchFirstTapToPlay]);
301
+ }, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
297
302
  var visibleControls = !autoPlay && !playing || muted || showMediaControls;
298
- var items = [/*#__PURE__*/React.createElement(ScreenElement, {
303
+ var items = [shouldCatchFirstTapToPlay && suspended ? /*#__PURE__*/React.createElement("button", {
304
+ key: "tap-catcher-button",
305
+ type: "button",
306
+ onTouchStart: function onTouchStart() {
307
+ return play();
308
+ },
309
+ className: styles.unmuteAndPlayButton
310
+ }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
299
311
  key: "video",
300
312
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
301
313
  className: styles.placeholder
@@ -348,12 +360,7 @@ var VideoScreen = function VideoScreen(_ref) {
348
360
  onVolumeChanged: onVolumeChanged,
349
361
  focusable: current && isView,
350
362
  shouldLoad: mediaShouldLoad
351
- }))) : null), shouldCatchFirstTapToPlay && !playing ? /*#__PURE__*/React.createElement("button", {
352
- key: "tap-catcher-button",
353
- type: "button",
354
- onTouchStart: play,
355
- className: styles.unmuteAndPlayButton
356
- }) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
363
+ }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
357
364
  key: "bottom-content",
358
365
  className: styles.bottomContent
359
366
  }, /*#__PURE__*/React.createElement(Transitions, {
package/lib/index.js CHANGED
@@ -138,6 +138,7 @@ var VideoScreen = function VideoScreen(_ref) {
138
138
  seek = _ref3.seek,
139
139
  play = _ref3.play,
140
140
  pause = _ref3.pause,
141
+ suspended = _ref3.suspended,
141
142
  _ref3$mediaRef = _ref3.mediaRef,
142
143
  apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
143
144
 
@@ -308,15 +309,26 @@ var VideoScreen = function VideoScreen(_ref) {
308
309
  setReady(!hasVideoUrl);
309
310
  }, [videoUrl, hasVideoUrl, setReady]);
310
311
  var onVideoReady = React.useCallback(function () {
311
- setReady(true);
312
- }, [setReady]);
312
+ setReady(true); // @todo the battery-saving play button issue
313
+
314
+ if (autoPlay && suspended) {
315
+ setShouldCatchFirstTapToPlay(true);
316
+ }
317
+ }, [setReady, autoPlay, suspended, setShouldCatchFirstTapToPlay]);
313
318
  var onSuspended = React.useCallback(function () {
314
- if (autoPlay) {
319
+ if (autoPlay && suspended) {
315
320
  setShouldCatchFirstTapToPlay(true);
316
321
  }
317
- }, [setShouldCatchFirstTapToPlay]);
322
+ }, [autoPlay, suspended, setShouldCatchFirstTapToPlay]);
318
323
  var visibleControls = !autoPlay && !playing || muted || showMediaControls;
319
- var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
324
+ var items = [shouldCatchFirstTapToPlay && suspended ? /*#__PURE__*/React__default["default"].createElement("button", {
325
+ key: "tap-catcher-button",
326
+ type: "button",
327
+ onTouchStart: function onTouchStart() {
328
+ return play();
329
+ },
330
+ className: styles.unmuteAndPlayButton
331
+ }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
320
332
  key: "video",
321
333
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
322
334
  className: styles.placeholder
@@ -369,12 +381,7 @@ var VideoScreen = function VideoScreen(_ref) {
369
381
  onVolumeChanged: onVolumeChanged,
370
382
  focusable: current && isView,
371
383
  shouldLoad: mediaShouldLoad
372
- }))) : null), shouldCatchFirstTapToPlay && !playing ? /*#__PURE__*/React__default["default"].createElement("button", {
373
- key: "tap-catcher-button",
374
- type: "button",
375
- onTouchStart: play,
376
- className: styles.unmuteAndPlayButton
377
- }) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
384
+ }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
378
385
  key: "bottom-content",
379
386
  className: styles.bottomContent
380
387
  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.135",
3
+ "version": "0.3.137",
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.135",
54
- "@micromag/element-background": "^0.3.135",
55
- "@micromag/element-call-to-action": "^0.3.135",
56
- "@micromag/element-closed-captions": "^0.3.135",
57
- "@micromag/element-container": "^0.3.135",
58
- "@micromag/element-image": "^0.3.135",
59
- "@micromag/element-media-controls": "^0.3.135",
60
- "@micromag/element-video": "^0.3.135",
61
- "@micromag/transforms": "^0.3.135",
53
+ "@micromag/core": "^0.3.137",
54
+ "@micromag/element-background": "^0.3.137",
55
+ "@micromag/element-call-to-action": "^0.3.137",
56
+ "@micromag/element-closed-captions": "^0.3.137",
57
+ "@micromag/element-container": "^0.3.137",
58
+ "@micromag/element-image": "^0.3.137",
59
+ "@micromag/element-media-controls": "^0.3.137",
60
+ "@micromag/element-video": "^0.3.137",
61
+ "@micromag/transforms": "^0.3.137",
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": "b9bd185aacc16b6fb5540aa113dc7872c822e279"
71
+ "gitHead": "a94963893e52f7914128182fe7e1538de79b6f20"
72
72
  }