@micromag/screen-video 0.2.406 → 0.2.412

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 +30 -3
  2. package/lib/index.js +29 -2
  3. package/package.json +11 -11
package/es/index.js CHANGED
@@ -8,7 +8,7 @@ import classNames from 'classnames';
8
8
  import { getSizeWithinBounds } from '@folklore/size';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { ScreenElement, PlaceholderVideo, Empty, Transitions } from '@micromag/core/components';
11
- import { useScreenSize, useScreenRenderContext } from '@micromag/core/contexts';
11
+ import { useScreenSize, useScreenRenderContext, useViewerNavigation } from '@micromag/core/contexts';
12
12
  import { useTrackScreenMedia, useLongPress } from '@micromag/core/hooks';
13
13
  import Background from '@micromag/element-background';
14
14
  import Container from '@micromag/element-container';
@@ -25,6 +25,7 @@ var styles = {"container":"micromag-screen-video-container","content":"micromag-
25
25
  var propTypes = {
26
26
  layout: PropTypes.oneOf(['middle', 'full']),
27
27
  video: PropTypes$1.videoElement,
28
+ gotoNextScreenOnEnd: PropTypes.bool,
28
29
  background: PropTypes$1.backgroundElement,
29
30
  callToAction: PropTypes$1.callToAction,
30
31
  current: PropTypes.bool,
@@ -37,6 +38,7 @@ var propTypes = {
37
38
  var defaultProps = {
38
39
  layout: 'middle',
39
40
  video: null,
41
+ gotoNextScreenOnEnd: false,
40
42
  background: null,
41
43
  callToAction: null,
42
44
  current: true,
@@ -52,6 +54,7 @@ var VideoScreen = function VideoScreen(_ref) {
52
54
 
53
55
  var layout = _ref.layout,
54
56
  video = _ref.video,
57
+ gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
55
58
  background = _ref.background,
56
59
  callToAction = _ref.callToAction,
57
60
  current = _ref.current,
@@ -74,7 +77,13 @@ var VideoScreen = function VideoScreen(_ref) {
74
77
  isStatic = _useScreenRenderConte.isStatic,
75
78
  isCapture = _useScreenRenderConte.isCapture;
76
79
 
80
+ var _useViewerNavigation = useViewerNavigation(),
81
+ gotoNextScreen = _useViewerNavigation.gotoNextScreen;
82
+
77
83
  var backgroundPlaying = current && (isView || isEdit);
84
+ var backgroundShouldLoad = current || active || !isView;
85
+ var videoShouldLoad = current || active || !isView;
86
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
78
87
  var apiRef = useRef();
79
88
 
80
89
  var _ref2 = apiRef.current || {},
@@ -147,6 +156,11 @@ var VideoScreen = function VideoScreen(_ref) {
147
156
 
148
157
  toggleMute();
149
158
  }, [muted, toggleMute]);
159
+ var onEnded = useCallback(function () {
160
+ if (shouldGotoNextScreenOnEnd) {
161
+ gotoNextScreen();
162
+ }
163
+ }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
150
164
  useEffect(function () {
151
165
  if (!current && playing) {
152
166
  pause();
@@ -276,8 +290,10 @@ var VideoScreen = function VideoScreen(_ref) {
276
290
  onProgressStep: onProgressStep,
277
291
  onDurationChanged: onDurationChanged,
278
292
  onSeeked: onSeeked,
293
+ onEnded: onEnded,
279
294
  onVolumeChanged: onVolumeChanged,
280
- focusable: current && isView // onPosterLoaded={onPosterLoaded}
295
+ focusable: current && isView,
296
+ preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
281
297
 
282
298
  }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
283
299
  key: "bottom-content",
@@ -321,7 +337,7 @@ var VideoScreen = function VideoScreen(_ref) {
321
337
  width: width,
322
338
  height: height,
323
339
  playing: backgroundPlaying,
324
- shouldLoad: current || active
340
+ shouldLoad: backgroundShouldLoad
325
341
  }) : null, /*#__PURE__*/React.createElement(Container, {
326
342
  width: width,
327
343
  height: height
@@ -411,6 +427,17 @@ var definition = {
411
427
  "value": "Video"
412
428
  }]
413
429
  })
430
+ }, {
431
+ name: 'gotoNextScreenOnEnd',
432
+ type: 'toggle',
433
+ defaultValue: false,
434
+ label: defineMessage({
435
+ id: "n8zmLY",
436
+ defaultMessage: [{
437
+ "type": 0,
438
+ "value": "Go to next screen on end"
439
+ }]
440
+ })
414
441
  }, {
415
442
  name: 'background',
416
443
  type: 'background',
package/lib/index.js CHANGED
@@ -46,6 +46,7 @@ var styles = {"container":"micromag-screen-video-container","content":"micromag-
46
46
  var propTypes = {
47
47
  layout: PropTypes__default["default"].oneOf(['middle', 'full']),
48
48
  video: core.PropTypes.videoElement,
49
+ gotoNextScreenOnEnd: PropTypes__default["default"].bool,
49
50
  background: core.PropTypes.backgroundElement,
50
51
  callToAction: core.PropTypes.callToAction,
51
52
  current: PropTypes__default["default"].bool,
@@ -58,6 +59,7 @@ var propTypes = {
58
59
  var defaultProps = {
59
60
  layout: 'middle',
60
61
  video: null,
62
+ gotoNextScreenOnEnd: false,
61
63
  background: null,
62
64
  callToAction: null,
63
65
  current: true,
@@ -73,6 +75,7 @@ var VideoScreen = function VideoScreen(_ref) {
73
75
 
74
76
  var layout = _ref.layout,
75
77
  video = _ref.video,
78
+ gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
76
79
  background = _ref.background,
77
80
  callToAction = _ref.callToAction,
78
81
  current = _ref.current,
@@ -95,7 +98,13 @@ var VideoScreen = function VideoScreen(_ref) {
95
98
  isStatic = _useScreenRenderConte.isStatic,
96
99
  isCapture = _useScreenRenderConte.isCapture;
97
100
 
101
+ var _useViewerNavigation = contexts.useViewerNavigation(),
102
+ gotoNextScreen = _useViewerNavigation.gotoNextScreen;
103
+
98
104
  var backgroundPlaying = current && (isView || isEdit);
105
+ var backgroundShouldLoad = current || active || !isView;
106
+ var videoShouldLoad = current || active || !isView;
107
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
99
108
  var apiRef = React.useRef();
100
109
 
101
110
  var _ref2 = apiRef.current || {},
@@ -168,6 +177,11 @@ var VideoScreen = function VideoScreen(_ref) {
168
177
 
169
178
  toggleMute();
170
179
  }, [muted, toggleMute]);
180
+ var onEnded = React.useCallback(function () {
181
+ if (shouldGotoNextScreenOnEnd) {
182
+ gotoNextScreen();
183
+ }
184
+ }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
171
185
  React.useEffect(function () {
172
186
  if (!current && playing) {
173
187
  pause();
@@ -297,8 +311,10 @@ var VideoScreen = function VideoScreen(_ref) {
297
311
  onProgressStep: onProgressStep,
298
312
  onDurationChanged: onDurationChanged,
299
313
  onSeeked: onSeeked,
314
+ onEnded: onEnded,
300
315
  onVolumeChanged: onVolumeChanged,
301
- focusable: current && isView // onPosterLoaded={onPosterLoaded}
316
+ focusable: current && isView,
317
+ preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
302
318
 
303
319
  }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
304
320
  key: "bottom-content",
@@ -342,7 +358,7 @@ var VideoScreen = function VideoScreen(_ref) {
342
358
  width: width,
343
359
  height: height,
344
360
  playing: backgroundPlaying,
345
- shouldLoad: current || active
361
+ shouldLoad: backgroundShouldLoad
346
362
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
347
363
  width: width,
348
364
  height: height
@@ -432,6 +448,17 @@ var definition = {
432
448
  "value": "Video"
433
449
  }]
434
450
  })
451
+ }, {
452
+ name: 'gotoNextScreenOnEnd',
453
+ type: 'toggle',
454
+ defaultValue: false,
455
+ label: reactIntl.defineMessage({
456
+ id: "n8zmLY",
457
+ defaultMessage: [{
458
+ "type": 0,
459
+ "value": "Go to next screen on end"
460
+ }]
461
+ })
435
462
  }, {
436
463
  name: 'background',
437
464
  type: 'background',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.2.406",
3
+ "version": "0.2.412",
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.15",
53
- "@micromag/core": "^0.2.405",
54
- "@micromag/element-background": "^0.2.406",
55
- "@micromag/element-call-to-action": "^0.2.405",
56
- "@micromag/element-closed-captions": "^0.2.405",
57
- "@micromag/element-container": "^0.2.405",
58
- "@micromag/element-image": "^0.2.406",
59
- "@micromag/element-media-controls": "^0.2.405",
60
- "@micromag/element-video": "^0.2.405",
61
- "@micromag/transforms": "^0.2.405",
53
+ "@micromag/core": "^0.2.412",
54
+ "@micromag/element-background": "^0.2.412",
55
+ "@micromag/element-call-to-action": "^0.2.412",
56
+ "@micromag/element-closed-captions": "^0.2.412",
57
+ "@micromag/element-container": "^0.2.412",
58
+ "@micromag/element-image": "^0.2.412",
59
+ "@micromag/element-media-controls": "^0.2.412",
60
+ "@micromag/element-video": "^0.2.412",
61
+ "@micromag/transforms": "^0.2.412",
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": "5e1a6de73674624b0cb3f9701140ea8850e6f35e"
71
+ "gitHead": "e16acc4643a563f4b7e98ddc1b778ea8a6c8b320"
72
72
  }