@micromag/screen-video 0.3.222 → 0.3.224

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 -28
  2. package/lib/index.js +25 -28
  3. package/package.json +2 -2
package/es/index.js CHANGED
@@ -57,9 +57,8 @@ var VideoScreen = function VideoScreen(_ref) {
57
57
  background = _ref.background,
58
58
  callToAction = _ref.callToAction,
59
59
  current = _ref.current,
60
- active = _ref.active;
61
- _ref.transitions;
62
- var spacing = _ref.spacing,
60
+ active = _ref.active,
61
+ spacing = _ref.spacing,
63
62
  customMediaRef = _ref.mediaRef,
64
63
  className = _ref.className;
65
64
  var trackScreenMedia = useTrackScreenMedia('video');
@@ -127,9 +126,7 @@ var VideoScreen = function VideoScreen(_ref) {
127
126
  setHasPlayed = _useState2[1];
128
127
 
129
128
  var backgroundPlaying = current && (isView || isEdit);
130
- var videoPlaying = current && (isView || isEdit) && playing; // const shouldDisplayPoster =
131
- // isPreview || isCapture || (isView && active && !current && !hasPlayed);
132
-
129
+ var videoPlaying = current && (isView || isEdit) && playing;
133
130
  var shouldDisplayPoster = isPreview || isCapture;
134
131
  useEffect(function () {
135
132
  if (!current) {
@@ -183,7 +180,7 @@ var VideoScreen = function VideoScreen(_ref) {
183
180
  } else {
184
181
  hideControls();
185
182
  }
186
- }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
183
+ }, [activityDetected, showControls, hideControls]);
187
184
 
188
185
  var _useState3 = useState(null),
189
186
  _useState4 = _slicedToArray(_useState3, 2),
@@ -238,7 +235,8 @@ var VideoScreen = function VideoScreen(_ref) {
238
235
  var _useState7 = useState(hasVideo),
239
236
  _useState8 = _slicedToArray(_useState7, 2),
240
237
  ready = _useState8[0],
241
- setReady = _useState8[1]; // useState(!hasVideo);
238
+ setReady = _useState8[1];
239
+
242
240
  var finalVideo = useMemo(function () {
243
241
  return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
244
242
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -285,7 +283,23 @@ var VideoScreen = function VideoScreen(_ref) {
285
283
  setPlaying(false);
286
284
  }
287
285
  }, [current, playing, setPlaying]);
288
- var items = [/*#__PURE__*/React.createElement(ScreenElement, {
286
+ return /*#__PURE__*/React.createElement("div", {
287
+ className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
288
+ "data-screen-ready": isStatic || isCapture || ready
289
+ }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
290
+ background: background,
291
+ width: width,
292
+ height: height,
293
+ resolution: resolution,
294
+ playing: backgroundPlaying,
295
+ shouldLoad: mediaShouldLoad,
296
+ withoutVideo: isPreview
297
+ }) : null, /*#__PURE__*/React.createElement(Container, {
298
+ width: width,
299
+ height: height
300
+ }, /*#__PURE__*/React.createElement("div", {
301
+ className: styles.content
302
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
289
303
  key: "video",
290
304
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
291
305
  className: styles.placeholder
@@ -342,7 +356,7 @@ var VideoScreen = function VideoScreen(_ref) {
342
356
  key: "bottom-content",
343
357
  className: styles.bottom,
344
358
  style: {
345
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
359
+ transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
346
360
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
347
361
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
348
362
  paddingBottom: spacing / 2,
@@ -357,24 +371,7 @@ var VideoScreen = function VideoScreen(_ref) {
357
371
  animationDisabled: isPreview,
358
372
  focusable: current && isView,
359
373
  openWebView: openWebView
360
- })) : null) : null];
361
- return /*#__PURE__*/React.createElement("div", {
362
- className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
363
- "data-screen-ready": isStatic || isCapture || ready
364
- }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
365
- background: background,
366
- width: width,
367
- height: height,
368
- resolution: resolution,
369
- playing: backgroundPlaying,
370
- shouldLoad: mediaShouldLoad,
371
- withoutVideo: isPreview
372
- }) : null, /*#__PURE__*/React.createElement(Container, {
373
- width: width,
374
- height: height
375
- }, /*#__PURE__*/React.createElement("div", {
376
- className: styles.content
377
- }, items)));
374
+ })) : null) : null)));
378
375
  };
379
376
 
380
377
  VideoScreen.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -77,9 +77,8 @@ var VideoScreen = function VideoScreen(_ref) {
77
77
  background = _ref.background,
78
78
  callToAction = _ref.callToAction,
79
79
  current = _ref.current,
80
- active = _ref.active;
81
- _ref.transitions;
82
- var spacing = _ref.spacing,
80
+ active = _ref.active,
81
+ spacing = _ref.spacing,
83
82
  customMediaRef = _ref.mediaRef,
84
83
  className = _ref.className;
85
84
  var trackScreenMedia = hooks.useTrackScreenMedia('video');
@@ -147,9 +146,7 @@ var VideoScreen = function VideoScreen(_ref) {
147
146
  setHasPlayed = _useState2[1];
148
147
 
149
148
  var backgroundPlaying = current && (isView || isEdit);
150
- var videoPlaying = current && (isView || isEdit) && playing; // const shouldDisplayPoster =
151
- // isPreview || isCapture || (isView && active && !current && !hasPlayed);
152
-
149
+ var videoPlaying = current && (isView || isEdit) && playing;
153
150
  var shouldDisplayPoster = isPreview || isCapture;
154
151
  React.useEffect(function () {
155
152
  if (!current) {
@@ -203,7 +200,7 @@ var VideoScreen = function VideoScreen(_ref) {
203
200
  } else {
204
201
  hideControls();
205
202
  }
206
- }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
203
+ }, [activityDetected, showControls, hideControls]);
207
204
 
208
205
  var _useState3 = React.useState(null),
209
206
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
@@ -258,7 +255,8 @@ var VideoScreen = function VideoScreen(_ref) {
258
255
  var _useState7 = React.useState(hasVideo),
259
256
  _useState8 = _slicedToArray__default["default"](_useState7, 2),
260
257
  ready = _useState8[0],
261
- setReady = _useState8[1]; // useState(!hasVideo);
258
+ setReady = _useState8[1];
259
+
262
260
  var finalVideo = React.useMemo(function () {
263
261
  return hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
264
262
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -305,7 +303,23 @@ var VideoScreen = function VideoScreen(_ref) {
305
303
  setPlaying(false);
306
304
  }
307
305
  }, [current, playing, setPlaying]);
308
- var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
306
+ return /*#__PURE__*/React__default["default"].createElement("div", {
307
+ className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
308
+ "data-screen-ready": isStatic || isCapture || ready
309
+ }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
310
+ background: background,
311
+ width: width,
312
+ height: height,
313
+ resolution: resolution,
314
+ playing: backgroundPlaying,
315
+ shouldLoad: mediaShouldLoad,
316
+ withoutVideo: isPreview
317
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
318
+ width: width,
319
+ height: height
320
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
321
+ className: styles.content
322
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
309
323
  key: "video",
310
324
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
311
325
  className: styles.placeholder
@@ -362,7 +376,7 @@ var VideoScreen = function VideoScreen(_ref) {
362
376
  key: "bottom-content",
363
377
  className: styles.bottom,
364
378
  style: {
365
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
379
+ transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
366
380
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
367
381
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
368
382
  paddingBottom: spacing / 2,
@@ -377,24 +391,7 @@ var VideoScreen = function VideoScreen(_ref) {
377
391
  animationDisabled: isPreview,
378
392
  focusable: current && isView,
379
393
  openWebView: openWebView
380
- })) : null) : null];
381
- return /*#__PURE__*/React__default["default"].createElement("div", {
382
- className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
383
- "data-screen-ready": isStatic || isCapture || ready
384
- }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
385
- background: background,
386
- width: width,
387
- height: height,
388
- resolution: resolution,
389
- playing: backgroundPlaying,
390
- shouldLoad: mediaShouldLoad,
391
- withoutVideo: isPreview
392
- }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
393
- width: width,
394
- height: height
395
- }, /*#__PURE__*/React__default["default"].createElement("div", {
396
- className: styles.content
397
- }, items)));
394
+ })) : null) : null)));
398
395
  };
399
396
 
400
397
  VideoScreen.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.222",
3
+ "version": "0.3.224",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "f23cfee5d8950acdfe0e09ee77c11bc5ac322904"
71
+ "gitHead": "a4c770e486befc690596003e4ff622a113250549"
72
72
  }