@micromag/screen-video 0.2.409 → 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 +25 -1
  2. package/lib/index.js +24 -0
  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,9 +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);
78
84
  var backgroundShouldLoad = current || active || !isView;
79
85
  var videoShouldLoad = current || active || !isView;
86
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
80
87
  var apiRef = useRef();
81
88
 
82
89
  var _ref2 = apiRef.current || {},
@@ -149,6 +156,11 @@ var VideoScreen = function VideoScreen(_ref) {
149
156
 
150
157
  toggleMute();
151
158
  }, [muted, toggleMute]);
159
+ var onEnded = useCallback(function () {
160
+ if (shouldGotoNextScreenOnEnd) {
161
+ gotoNextScreen();
162
+ }
163
+ }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
152
164
  useEffect(function () {
153
165
  if (!current && playing) {
154
166
  pause();
@@ -278,6 +290,7 @@ var VideoScreen = function VideoScreen(_ref) {
278
290
  onProgressStep: onProgressStep,
279
291
  onDurationChanged: onDurationChanged,
280
292
  onSeeked: onSeeked,
293
+ onEnded: onEnded,
281
294
  onVolumeChanged: onVolumeChanged,
282
295
  focusable: current && isView,
283
296
  preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
@@ -414,6 +427,17 @@ var definition = {
414
427
  "value": "Video"
415
428
  }]
416
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
+ })
417
441
  }, {
418
442
  name: 'background',
419
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,9 +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);
99
105
  var backgroundShouldLoad = current || active || !isView;
100
106
  var videoShouldLoad = current || active || !isView;
107
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
101
108
  var apiRef = React.useRef();
102
109
 
103
110
  var _ref2 = apiRef.current || {},
@@ -170,6 +177,11 @@ var VideoScreen = function VideoScreen(_ref) {
170
177
 
171
178
  toggleMute();
172
179
  }, [muted, toggleMute]);
180
+ var onEnded = React.useCallback(function () {
181
+ if (shouldGotoNextScreenOnEnd) {
182
+ gotoNextScreen();
183
+ }
184
+ }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
173
185
  React.useEffect(function () {
174
186
  if (!current && playing) {
175
187
  pause();
@@ -299,6 +311,7 @@ var VideoScreen = function VideoScreen(_ref) {
299
311
  onProgressStep: onProgressStep,
300
312
  onDurationChanged: onDurationChanged,
301
313
  onSeeked: onSeeked,
314
+ onEnded: onEnded,
302
315
  onVolumeChanged: onVolumeChanged,
303
316
  focusable: current && isView,
304
317
  preload: videoShouldLoad ? 'auto' : 'metadata' // onPosterLoaded={onPosterLoaded}
@@ -435,6 +448,17 @@ var definition = {
435
448
  "value": "Video"
436
449
  }]
437
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
+ })
438
462
  }, {
439
463
  name: 'background',
440
464
  type: 'background',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.2.409",
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.409",
54
- "@micromag/element-background": "^0.2.409",
55
- "@micromag/element-call-to-action": "^0.2.409",
56
- "@micromag/element-closed-captions": "^0.2.409",
57
- "@micromag/element-container": "^0.2.409",
58
- "@micromag/element-image": "^0.2.409",
59
- "@micromag/element-media-controls": "^0.2.409",
60
- "@micromag/element-video": "^0.2.409",
61
- "@micromag/transforms": "^0.2.409",
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": "4c16c3bb63644d1bd5b7d50086098337317ee3f6"
71
+ "gitHead": "e16acc4643a563f4b7e98ddc1b778ea8a6c8b320"
72
72
  }