@micromag/screen-video 0.3.24 → 0.3.29

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 +48 -35
  2. package/lib/index.js +48 -35
  3. package/package.json +11 -11
package/es/index.js CHANGED
@@ -83,17 +83,32 @@ var VideoScreen = function VideoScreen(_ref) {
83
83
  var backgroundPlaying = current && (isView || isEdit);
84
84
  var backgroundShouldLoad = current || active || !isView;
85
85
  var videoShouldLoad = current || active || !isView;
86
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
86
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
87
+
88
+ var _ref2 = video || {},
89
+ _ref2$autoPlay = _ref2.autoPlay,
90
+ autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
91
+ _ref2$media = _ref2.media,
92
+ videoMedia = _ref2$media === void 0 ? null : _ref2$media,
93
+ _ref2$closedCaptions = _ref2.closedCaptions,
94
+ closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
95
+ _ref2$withSeekBar = _ref2.withSeekBar,
96
+ withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
97
+ _ref2$withPlayPause = _ref2.withPlayPause,
98
+ withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
99
+ _ref2$withTime = _ref2.withTime,
100
+ withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
101
+
87
102
  var apiRef = useRef();
88
103
 
89
- var _ref2 = apiRef.current || {},
90
- togglePlay = _ref2.togglePlay,
91
- toggleMute = _ref2.toggleMute,
92
- seek = _ref2.seek,
93
- play = _ref2.play,
94
- pause = _ref2.pause,
95
- _ref2$mediaRef = _ref2.mediaRef,
96
- apiMediaRef = _ref2$mediaRef === void 0 ? null : _ref2$mediaRef;
104
+ var _ref3 = apiRef.current || {},
105
+ togglePlay = _ref3.togglePlay,
106
+ toggleMute = _ref3.toggleMute,
107
+ seek = _ref3.seek,
108
+ play = _ref3.play,
109
+ pause = _ref3.pause,
110
+ _ref3$mediaRef = _ref3.mediaRef,
111
+ apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
97
112
 
98
113
  useEffect(function () {
99
114
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -137,13 +152,13 @@ var VideoScreen = function VideoScreen(_ref) {
137
152
  var onDurationChanged = useCallback(function (dur) {
138
153
  setDuration(dur);
139
154
  }, [setDuration]);
140
- var onPlay = useCallback(function (_ref3) {
141
- var initial = _ref3.initial;
155
+ var onPlay = useCallback(function (_ref4) {
156
+ var initial = _ref4.initial;
142
157
  setPlaying(true);
143
158
  trackScreenMedia(video, initial ? 'play' : 'resume');
144
159
  }, [trackScreenMedia, video]);
145
- var onPause = useCallback(function (_ref4) {
146
- var midway = _ref4.midway;
160
+ var onPause = useCallback(function (_ref5) {
161
+ var midway = _ref5.midway;
147
162
  setPlaying(false);
148
163
  trackScreenMedia(video, midway ? 'pause' : 'ended');
149
164
  }, [trackScreenMedia, video]);
@@ -151,6 +166,10 @@ var VideoScreen = function VideoScreen(_ref) {
151
166
  setMuted(isMuted);
152
167
  trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
153
168
  }, [trackScreenMedia, video]);
169
+ var onSeek = useCallback(function (e) {
170
+ seek(e);
171
+ play();
172
+ }, [seek, play]);
154
173
  var onSeeked = useCallback(function (time) {
155
174
  if (time > 0) {
156
175
  trackScreenMedia(video, 'seek');
@@ -173,7 +192,8 @@ var VideoScreen = function VideoScreen(_ref) {
173
192
  pause();
174
193
  }
175
194
  }, [playing, current]);
176
- var onMouseMove = useCallback(function () {
195
+ var onMouseMove = useCallback(function (e) {
196
+ var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
177
197
  setShowMediaControls(true);
178
198
 
179
199
  if (mouseMoveRef.current !== null) {
@@ -183,11 +203,19 @@ var VideoScreen = function VideoScreen(_ref) {
183
203
  mouseMoveRef.current = setTimeout(function () {
184
204
  setShowMediaControls(false);
185
205
  mouseMoveRef.current = null;
186
- }, 1800);
187
- }, [setShowMediaControls]); // ------------------------------------
188
-
206
+ }, time);
207
+ }, [setShowMediaControls]);
208
+ var onLongPress = useCallback(function () {
209
+ if (!playing) {
210
+ play();
211
+ } else if (withPlayPause) {
212
+ onMouseMove(null, 3000);
213
+ } else {
214
+ pause();
215
+ }
216
+ }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
189
217
  var longPressBind = useLongPress({
190
- onLongPress: togglePlay,
218
+ onLongPress: onLongPress,
191
219
  onClick: onMouseMove
192
220
  });
193
221
  var fullscreen = layout === 'full';
@@ -201,22 +229,7 @@ var VideoScreen = function VideoScreen(_ref) {
201
229
 
202
230
 
203
231
  var transitionPlaying = current && ready;
204
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit; // get resized video style props
205
-
206
- var _ref5 = video || {},
207
- _ref5$autoPlay = _ref5.autoPlay,
208
- autoPlay = _ref5$autoPlay === void 0 ? true : _ref5$autoPlay,
209
- _ref5$media = _ref5.media,
210
- videoMedia = _ref5$media === void 0 ? null : _ref5$media,
211
- _ref5$closedCaptions = _ref5.closedCaptions,
212
- closedCaptions = _ref5$closedCaptions === void 0 ? null : _ref5$closedCaptions,
213
- _ref5$withSeekBar = _ref5.withSeekBar,
214
- withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
215
- _ref5$withPlayPause = _ref5.withPlayPause,
216
- withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause,
217
- _ref5$withTime = _ref5.withTime,
218
- withTime = _ref5$withTime === void 0 ? false : _ref5$withTime;
219
-
232
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
220
233
  var finalVideo = useMemo(function () {
221
234
  return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
222
235
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -339,7 +352,7 @@ var VideoScreen = function VideoScreen(_ref) {
339
352
  duration: duration,
340
353
  onTogglePlay: togglePlay,
341
354
  onToggleMute: onToggleMute,
342
- onSeek: seek,
355
+ onSeek: onSeek,
343
356
  focusable: current && isView
344
357
  }) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
345
358
  style: {
package/lib/index.js CHANGED
@@ -104,17 +104,32 @@ var VideoScreen = function VideoScreen(_ref) {
104
104
  var backgroundPlaying = current && (isView || isEdit);
105
105
  var backgroundShouldLoad = current || active || !isView;
106
106
  var videoShouldLoad = current || active || !isView;
107
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
107
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
108
+
109
+ var _ref2 = video || {},
110
+ _ref2$autoPlay = _ref2.autoPlay,
111
+ autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
112
+ _ref2$media = _ref2.media,
113
+ videoMedia = _ref2$media === void 0 ? null : _ref2$media,
114
+ _ref2$closedCaptions = _ref2.closedCaptions,
115
+ closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
116
+ _ref2$withSeekBar = _ref2.withSeekBar,
117
+ withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
118
+ _ref2$withPlayPause = _ref2.withPlayPause,
119
+ withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
120
+ _ref2$withTime = _ref2.withTime,
121
+ withTime = _ref2$withTime === void 0 ? false : _ref2$withTime;
122
+
108
123
  var apiRef = React.useRef();
109
124
 
110
- var _ref2 = apiRef.current || {},
111
- togglePlay = _ref2.togglePlay,
112
- toggleMute = _ref2.toggleMute,
113
- seek = _ref2.seek,
114
- play = _ref2.play,
115
- pause = _ref2.pause,
116
- _ref2$mediaRef = _ref2.mediaRef,
117
- apiMediaRef = _ref2$mediaRef === void 0 ? null : _ref2$mediaRef;
125
+ var _ref3 = apiRef.current || {},
126
+ togglePlay = _ref3.togglePlay,
127
+ toggleMute = _ref3.toggleMute,
128
+ seek = _ref3.seek,
129
+ play = _ref3.play,
130
+ pause = _ref3.pause,
131
+ _ref3$mediaRef = _ref3.mediaRef,
132
+ apiMediaRef = _ref3$mediaRef === void 0 ? null : _ref3$mediaRef;
118
133
 
119
134
  React.useEffect(function () {
120
135
  if (apiMediaRef !== null && getMediaRef !== null) {
@@ -158,13 +173,13 @@ var VideoScreen = function VideoScreen(_ref) {
158
173
  var onDurationChanged = React.useCallback(function (dur) {
159
174
  setDuration(dur);
160
175
  }, [setDuration]);
161
- var onPlay = React.useCallback(function (_ref3) {
162
- var initial = _ref3.initial;
176
+ var onPlay = React.useCallback(function (_ref4) {
177
+ var initial = _ref4.initial;
163
178
  setPlaying(true);
164
179
  trackScreenMedia(video, initial ? 'play' : 'resume');
165
180
  }, [trackScreenMedia, video]);
166
- var onPause = React.useCallback(function (_ref4) {
167
- var midway = _ref4.midway;
181
+ var onPause = React.useCallback(function (_ref5) {
182
+ var midway = _ref5.midway;
168
183
  setPlaying(false);
169
184
  trackScreenMedia(video, midway ? 'pause' : 'ended');
170
185
  }, [trackScreenMedia, video]);
@@ -172,6 +187,10 @@ var VideoScreen = function VideoScreen(_ref) {
172
187
  setMuted(isMuted);
173
188
  trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
174
189
  }, [trackScreenMedia, video]);
190
+ var onSeek = React.useCallback(function (e) {
191
+ seek(e);
192
+ play();
193
+ }, [seek, play]);
175
194
  var onSeeked = React.useCallback(function (time) {
176
195
  if (time > 0) {
177
196
  trackScreenMedia(video, 'seek');
@@ -194,7 +213,8 @@ var VideoScreen = function VideoScreen(_ref) {
194
213
  pause();
195
214
  }
196
215
  }, [playing, current]);
197
- var onMouseMove = React.useCallback(function () {
216
+ var onMouseMove = React.useCallback(function (e) {
217
+ var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
198
218
  setShowMediaControls(true);
199
219
 
200
220
  if (mouseMoveRef.current !== null) {
@@ -204,11 +224,19 @@ var VideoScreen = function VideoScreen(_ref) {
204
224
  mouseMoveRef.current = setTimeout(function () {
205
225
  setShowMediaControls(false);
206
226
  mouseMoveRef.current = null;
207
- }, 1800);
208
- }, [setShowMediaControls]); // ------------------------------------
209
-
227
+ }, time);
228
+ }, [setShowMediaControls]);
229
+ var onLongPress = React.useCallback(function () {
230
+ if (!playing) {
231
+ play();
232
+ } else if (withPlayPause) {
233
+ onMouseMove(null, 3000);
234
+ } else {
235
+ pause();
236
+ }
237
+ }, [play, playing, pause, onMouseMove, withPlayPause, setShowMediaControls]);
210
238
  var longPressBind = hooks.useLongPress({
211
- onLongPress: togglePlay,
239
+ onLongPress: onLongPress,
212
240
  onClick: onMouseMove
213
241
  });
214
242
  var fullscreen = layout === 'full';
@@ -222,22 +250,7 @@ var VideoScreen = function VideoScreen(_ref) {
222
250
 
223
251
 
224
252
  var transitionPlaying = current && ready;
225
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit; // get resized video style props
226
-
227
- var _ref5 = video || {},
228
- _ref5$autoPlay = _ref5.autoPlay,
229
- autoPlay = _ref5$autoPlay === void 0 ? true : _ref5$autoPlay,
230
- _ref5$media = _ref5.media,
231
- videoMedia = _ref5$media === void 0 ? null : _ref5$media,
232
- _ref5$closedCaptions = _ref5.closedCaptions,
233
- closedCaptions = _ref5$closedCaptions === void 0 ? null : _ref5$closedCaptions,
234
- _ref5$withSeekBar = _ref5.withSeekBar,
235
- withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
236
- _ref5$withPlayPause = _ref5.withPlayPause,
237
- withPlayPause = _ref5$withPlayPause === void 0 ? false : _ref5$withPlayPause,
238
- _ref5$withTime = _ref5.withTime,
239
- withTime = _ref5$withTime === void 0 ? false : _ref5$withTime;
240
-
253
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
241
254
  var finalVideo = React.useMemo(function () {
242
255
  return hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
243
256
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -360,7 +373,7 @@ var VideoScreen = function VideoScreen(_ref) {
360
373
  duration: duration,
361
374
  onTogglePlay: togglePlay,
362
375
  onToggleMute: onToggleMute,
363
- onSeek: seek,
376
+ onSeek: onSeek,
364
377
  focusable: current && isView
365
378
  }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
366
379
  style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.24",
3
+ "version": "0.3.29",
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.3.24",
54
- "@micromag/element-background": "^0.3.24",
55
- "@micromag/element-call-to-action": "^0.3.24",
56
- "@micromag/element-closed-captions": "^0.3.24",
57
- "@micromag/element-container": "^0.3.24",
58
- "@micromag/element-image": "^0.3.24",
59
- "@micromag/element-media-controls": "^0.3.24",
60
- "@micromag/element-video": "^0.3.24",
61
- "@micromag/transforms": "^0.3.24",
53
+ "@micromag/core": "^0.3.29",
54
+ "@micromag/element-background": "^0.3.29",
55
+ "@micromag/element-call-to-action": "^0.3.29",
56
+ "@micromag/element-closed-captions": "^0.3.29",
57
+ "@micromag/element-container": "^0.3.29",
58
+ "@micromag/element-image": "^0.3.29",
59
+ "@micromag/element-media-controls": "^0.3.29",
60
+ "@micromag/element-video": "^0.3.29",
61
+ "@micromag/transforms": "^0.3.29",
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": "f2d5d71a3e5c5e6d6e9d8af3bdd8a71bf38fbbb7"
71
+ "gitHead": "fb4684ac9e69930c0ac4d9045b5148d011e92c7b"
72
72
  }