@micromag/screen-video 0.3.145 → 0.3.148

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 +14 -4
  2. package/lib/index.js +14 -4
  3. package/package.json +11 -11
package/es/index.js CHANGED
@@ -289,12 +289,22 @@ var VideoScreen = function VideoScreen(_ref) {
289
289
  var onVideoReady = useCallback(function () {
290
290
  setReady(true);
291
291
  }, [setReady]);
292
+ /**
293
+ * if video can play, but:
294
+ * - it's the current screen
295
+ * - the video doesn't provide visual controls
296
+ * - the video is set to play automatically
297
+ * - and it's **not** playing
298
+ * -> then set up a button that catches a click and plays the video
299
+ */
300
+
292
301
  var onCanPlay = useCallback(function () {
293
- if (current && autoPlay && !playing) {
302
+ if (current && !withControls && autoPlay && !playing) {
294
303
  setAllowManualPlayOnTap(true);
295
304
  }
296
- }, [current, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
297
- var onForcePlay = useCallback(function () {
305
+ }, [current, withControls, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
306
+ var onForcePlay = useCallback(function (e) {
307
+ e.stopPropagation();
298
308
  setAllowManualPlayOnTap(false);
299
309
  play();
300
310
  }, [setAllowManualPlayOnTap, play]);
@@ -302,7 +312,7 @@ var VideoScreen = function VideoScreen(_ref) {
302
312
  var items = [allowManualPlayOnTap ? /*#__PURE__*/React.createElement("button", {
303
313
  key: "tap-catcher-button",
304
314
  type: "button",
305
- onTouchStart: onForcePlay,
315
+ onClick: onForcePlay,
306
316
  className: styles.unmuteAndPlayButton
307
317
  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
308
318
  key: "video",
package/lib/index.js CHANGED
@@ -310,12 +310,22 @@ var VideoScreen = function VideoScreen(_ref) {
310
310
  var onVideoReady = React.useCallback(function () {
311
311
  setReady(true);
312
312
  }, [setReady]);
313
+ /**
314
+ * if video can play, but:
315
+ * - it's the current screen
316
+ * - the video doesn't provide visual controls
317
+ * - the video is set to play automatically
318
+ * - and it's **not** playing
319
+ * -> then set up a button that catches a click and plays the video
320
+ */
321
+
313
322
  var onCanPlay = React.useCallback(function () {
314
- if (current && autoPlay && !playing) {
323
+ if (current && !withControls && autoPlay && !playing) {
315
324
  setAllowManualPlayOnTap(true);
316
325
  }
317
- }, [current, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
318
- var onForcePlay = React.useCallback(function () {
326
+ }, [current, withControls, autoPlay, playing, play, allowManualPlayOnTap, setAllowManualPlayOnTap]);
327
+ var onForcePlay = React.useCallback(function (e) {
328
+ e.stopPropagation();
319
329
  setAllowManualPlayOnTap(false);
320
330
  play();
321
331
  }, [setAllowManualPlayOnTap, play]);
@@ -323,7 +333,7 @@ var VideoScreen = function VideoScreen(_ref) {
323
333
  var items = [allowManualPlayOnTap ? /*#__PURE__*/React__default["default"].createElement("button", {
324
334
  key: "tap-catcher-button",
325
335
  type: "button",
326
- onTouchStart: onForcePlay,
336
+ onClick: onForcePlay,
327
337
  className: styles.unmuteAndPlayButton
328
338
  }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
329
339
  key: "video",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.145",
3
+ "version": "0.3.148",
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.144",
54
- "@micromag/element-background": "^0.3.144",
55
- "@micromag/element-call-to-action": "^0.3.144",
56
- "@micromag/element-closed-captions": "^0.3.144",
57
- "@micromag/element-container": "^0.3.144",
58
- "@micromag/element-image": "^0.3.144",
59
- "@micromag/element-media-controls": "^0.3.144",
60
- "@micromag/element-video": "^0.3.144",
61
- "@micromag/transforms": "^0.3.144",
53
+ "@micromag/core": "^0.3.148",
54
+ "@micromag/element-background": "^0.3.148",
55
+ "@micromag/element-call-to-action": "^0.3.148",
56
+ "@micromag/element-closed-captions": "^0.3.148",
57
+ "@micromag/element-container": "^0.3.148",
58
+ "@micromag/element-image": "^0.3.148",
59
+ "@micromag/element-media-controls": "^0.3.148",
60
+ "@micromag/element-video": "^0.3.148",
61
+ "@micromag/transforms": "^0.3.148",
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": "2a108f03c2666189c35a226df90490c02b42e493"
71
+ "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
72
72
  }