@micromag/element-video 0.3.169 → 0.3.173

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 +13 -9
  2. package/lib/index.js +13 -9
  3. package/package.json +5 -5
package/es/index.js CHANGED
@@ -38,6 +38,7 @@ var propTypes = {
38
38
  onDurationChange: PropTypes$1.func,
39
39
  onVolumeChange: PropTypes$1.func,
40
40
  onSuspend: PropTypes$1.func,
41
+ onSuspended: PropTypes$1.func,
41
42
  focusable: PropTypes$1.bool,
42
43
  supportedMimes: PropTypes$1.arrayOf(PropTypes$1.string),
43
44
  withPoster: PropTypes$1.bool // onPosterLoaded: PropTypes.func,
@@ -68,6 +69,7 @@ var defaultProps = {
68
69
  onDurationChange: null,
69
70
  onVolumeChange: null,
70
71
  onSuspend: null,
72
+ onSuspended: null,
71
73
  focusable: true,
72
74
  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
73
75
  withPoster: false
@@ -100,6 +102,7 @@ var Video = function Video(_ref) {
100
102
  customOnDurationChange = _ref.onDurationChange,
101
103
  customOnVolumeChange = _ref.onVolumeChange,
102
104
  customOnSuspend = _ref.onSuspend,
105
+ onSuspended = _ref.onSuspended,
103
106
  focusable = _ref.focusable,
104
107
  supportedMimes = _ref.supportedMimes,
105
108
  withPoster = _ref.withPoster;
@@ -204,7 +207,7 @@ var Video = function Video(_ref) {
204
207
  if (customOnVolumeChange !== null) {
205
208
  customOnVolumeChange(element.volume);
206
209
  }
207
- }, [customOnVolumeChange]);
210
+ }, [customOnVolumeChange]); // Manage suspend
208
211
 
209
212
  var _useState = useState(false),
210
213
  _useState2 = _slicedToArray(_useState, 2),
@@ -212,8 +215,6 @@ var Video = function Video(_ref) {
212
215
  setIsSuspended = _useState2[1];
213
216
 
214
217
  var onPlay = useCallback(function (e) {
215
- console.log('PLAY');
216
-
217
218
  if (isSuspended) {
218
219
  setIsSuspended(false);
219
220
  }
@@ -222,21 +223,24 @@ var Video = function Video(_ref) {
222
223
  customOnPlay(e);
223
224
  }
224
225
  }, [isSuspended, setIsSuspended, customOnPlay]);
225
- var onPlaying = useCallback(function (e) {
226
- console.log('PLAYing');
227
-
226
+ var onPlaying = useCallback(function () {
228
227
  if (isSuspended) {
229
228
  setIsSuspended(false);
230
229
  }
231
230
  }, [isSuspended, setIsSuspended]);
232
231
  var onSuspend = useCallback(function (e) {
233
- console.log('suspend');
234
- setIsSuspended(true);
232
+ if (e.currentTarget.paused && !paused && !isSuspended) {
233
+ setIsSuspended(true);
234
+
235
+ if (onSuspended !== null) {
236
+ onSuspended();
237
+ }
238
+ }
235
239
 
236
240
  if (customOnSuspend !== null) {
237
241
  customOnSuspend(e);
238
242
  }
239
- }, [setIsSuspended, customOnSuspend]); // Ensure load if preload value change over time
243
+ }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]); // Ensure load if preload value change over time
240
244
 
241
245
  var firstPreloadRef = useRef(preload);
242
246
  var firstShouldLoadRef = useRef(shouldLoad);
package/lib/index.js CHANGED
@@ -50,6 +50,7 @@ var propTypes = {
50
50
  onDurationChange: PropTypes__default["default"].func,
51
51
  onVolumeChange: PropTypes__default["default"].func,
52
52
  onSuspend: PropTypes__default["default"].func,
53
+ onSuspended: PropTypes__default["default"].func,
53
54
  focusable: PropTypes__default["default"].bool,
54
55
  supportedMimes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
55
56
  withPoster: PropTypes__default["default"].bool // onPosterLoaded: PropTypes.func,
@@ -80,6 +81,7 @@ var defaultProps = {
80
81
  onDurationChange: null,
81
82
  onVolumeChange: null,
82
83
  onSuspend: null,
84
+ onSuspended: null,
83
85
  focusable: true,
84
86
  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
85
87
  withPoster: false
@@ -112,6 +114,7 @@ var Video = function Video(_ref) {
112
114
  customOnDurationChange = _ref.onDurationChange,
113
115
  customOnVolumeChange = _ref.onVolumeChange,
114
116
  customOnSuspend = _ref.onSuspend,
117
+ onSuspended = _ref.onSuspended,
115
118
  focusable = _ref.focusable,
116
119
  supportedMimes = _ref.supportedMimes,
117
120
  withPoster = _ref.withPoster;
@@ -216,7 +219,7 @@ var Video = function Video(_ref) {
216
219
  if (customOnVolumeChange !== null) {
217
220
  customOnVolumeChange(element.volume);
218
221
  }
219
- }, [customOnVolumeChange]);
222
+ }, [customOnVolumeChange]); // Manage suspend
220
223
 
221
224
  var _useState = React.useState(false),
222
225
  _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -224,8 +227,6 @@ var Video = function Video(_ref) {
224
227
  setIsSuspended = _useState2[1];
225
228
 
226
229
  var onPlay = React.useCallback(function (e) {
227
- console.log('PLAY');
228
-
229
230
  if (isSuspended) {
230
231
  setIsSuspended(false);
231
232
  }
@@ -234,21 +235,24 @@ var Video = function Video(_ref) {
234
235
  customOnPlay(e);
235
236
  }
236
237
  }, [isSuspended, setIsSuspended, customOnPlay]);
237
- var onPlaying = React.useCallback(function (e) {
238
- console.log('PLAYing');
239
-
238
+ var onPlaying = React.useCallback(function () {
240
239
  if (isSuspended) {
241
240
  setIsSuspended(false);
242
241
  }
243
242
  }, [isSuspended, setIsSuspended]);
244
243
  var onSuspend = React.useCallback(function (e) {
245
- console.log('suspend');
246
- setIsSuspended(true);
244
+ if (e.currentTarget.paused && !paused && !isSuspended) {
245
+ setIsSuspended(true);
246
+
247
+ if (onSuspended !== null) {
248
+ onSuspended();
249
+ }
250
+ }
247
251
 
248
252
  if (customOnSuspend !== null) {
249
253
  customOnSuspend(e);
250
254
  }
251
- }, [setIsSuspended, customOnSuspend]); // Ensure load if preload value change over time
255
+ }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]); // Ensure load if preload value change over time
252
256
 
253
257
  var firstPreloadRef = React.useRef(preload);
254
258
  var firstShouldLoadRef = React.useRef(shouldLoad);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-video",
3
- "version": "0.3.169",
3
+ "version": "0.3.173",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,9 +52,9 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.169",
56
- "@micromag/element-closed-captions": "^0.3.169",
57
- "@micromag/element-media-controls": "^0.3.169",
55
+ "@micromag/core": "^0.3.173",
56
+ "@micromag/element-closed-captions": "^0.3.173",
57
+ "@micromag/element-media-controls": "^0.3.173",
58
58
  "classnames": "^2.2.6",
59
59
  "lodash": "^4.17.21",
60
60
  "prop-types": "^15.7.2",
@@ -64,5 +64,5 @@
64
64
  "publishConfig": {
65
65
  "access": "public"
66
66
  },
67
- "gitHead": "0c1d21566e76943b0d1548cfe7f0e95380cf017c"
67
+ "gitHead": "faaf4c2d53fe9b88d569983fd6fbd6913d592916"
68
68
  }