@micromag/screen-video 0.3.246 → 0.3.251

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +36 -24
  3. package/lib/index.js +34 -22
  4. package/package.json +11 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-background,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video,.micromag-screen-video-container .micromag-screen-video-inner{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-background{z-index:0}.micromag-screen-video-container .micromag-screen-video-content{z-index:1}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-inner{z-index:1;overflow:hidden}.micromag-screen-video-container .micromag-screen-video-bottom{position:absolute;z-index:2;bottom:0;left:0;width:100%;-webkit-transition:padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1);transition:padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1);-o-transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1);transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1);transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1)}.micromag-screen-video-container .micromag-screen-video-bottom>*{margin-bottom:10px}.micromag-screen-video-container .micromag-screen-video-bottom>:last-child{margin-bottom:0}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}
1
+ .micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-bottom{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out}.micromag-screen-video-container .micromag-screen-video-bottom>*{margin-bottom:10px}.micromag-screen-video-container .micromag-screen-video-bottom>:last-child{margin-bottom:0}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}
package/es/index.js CHANGED
@@ -7,9 +7,9 @@ import classNames from 'classnames';
7
7
  import PropTypes from 'prop-types';
8
8
  import React, { useState, useEffect, useCallback, useMemo } from 'react';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
- import { ScreenElement, PlaceholderVideo, Empty } from '@micromag/core/components';
10
+ import { ScreenElement, PlaceholderVideo, Empty, Transitions } from '@micromag/core/components';
11
11
  import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
12
- import { useTrackScreenMedia, useActivityDetector, useDebounce, useMediaThumbnail } from '@micromag/core/hooks';
12
+ import { useTrackScreenMedia, useActivityDetector, useMediaThumbnail } from '@micromag/core/hooks';
13
13
  import Background from '@micromag/element-background';
14
14
  import CallToAction from '@micromag/element-call-to-action';
15
15
  import ClosedCaptions from '@micromag/element-closed-captions';
@@ -19,7 +19,7 @@ import Video from '@micromag/element-video';
19
19
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
20
20
  import { Video as Video$1, Container as Container$1 } from '@micromag/transforms/apple-news';
21
21
 
22
- var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","background":"micromag-screen-video-background","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","inner":"micromag-screen-video-inner","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","content":"micromag-screen-video-content","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
22
+ var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
23
23
 
24
24
  var propTypes = {
25
25
  layout: PropTypes.oneOf(['middle', 'full']),
@@ -58,6 +58,7 @@ var VideoScreen = function VideoScreen(_ref) {
58
58
  callToAction = _ref.callToAction,
59
59
  current = _ref.current,
60
60
  active = _ref.active,
61
+ transitions = _ref.transitions,
61
62
  spacing = _ref.spacing,
62
63
  customMediaRef = _ref.mediaRef,
63
64
  className = _ref.className;
@@ -126,7 +127,9 @@ var VideoScreen = function VideoScreen(_ref) {
126
127
  setHasPlayed = _useState2[1];
127
128
 
128
129
  var backgroundPlaying = current && (isView || isEdit);
129
- var videoPlaying = current && (isView || isEdit) && playing;
130
+ var videoPlaying = current && (isView || isEdit) && playing; // const shouldDisplayPoster =
131
+ // isPreview || isCapture || (isView && active && !current && !hasPlayed);
132
+
130
133
  var shouldDisplayPoster = isPreview || isCapture;
131
134
  useEffect(function () {
132
135
  if (!current) {
@@ -165,19 +168,22 @@ var VideoScreen = function VideoScreen(_ref) {
165
168
 
166
169
  var _useActivityDetector = useActivityDetector({
167
170
  element: viewerContainer,
168
- disabled: !isView,
171
+ disabled: !current || !isView,
169
172
  timeout: 2000
170
173
  }),
171
174
  activityDetected = _useActivityDetector.detected;
172
175
 
173
- var toggleControlsVisibility = useCallback(function () {
176
+ useEffect(function () {
177
+ if (!current) {
178
+ return;
179
+ }
180
+
174
181
  if (activityDetected) {
175
182
  showControls();
176
183
  } else {
177
184
  hideControls();
178
185
  }
179
- }, [activityDetected, showControls, hideControls]);
180
- useDebounce(toggleControlsVisibility, activityDetected, 1000);
186
+ }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
181
187
 
182
188
  var _useState3 = useState(null),
183
189
  _useState4 = _slicedToArray(_useState3, 2),
@@ -232,8 +238,11 @@ var VideoScreen = function VideoScreen(_ref) {
232
238
  var _useState7 = useState(hasVideo),
233
239
  _useState8 = _slicedToArray(_useState7, 2),
234
240
  ready = _useState8[0],
235
- setReady = _useState8[1];
241
+ setReady = _useState8[1]; // useState(!hasVideo);
236
242
 
243
+
244
+ var transitionPlaying = current && ready;
245
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
237
246
  var finalVideo = useMemo(function () {
238
247
  return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
239
248
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -280,16 +289,7 @@ var VideoScreen = function VideoScreen(_ref) {
280
289
  setPlaying(false);
281
290
  }
282
291
  }, [current, playing, setPlaying]);
283
- return /*#__PURE__*/React.createElement("div", {
284
- className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
285
- "data-screen-ready": isStatic || isCapture || ready
286
- }, /*#__PURE__*/React.createElement(Container, {
287
- width: width,
288
- height: height,
289
- className: styles.content
290
- }, /*#__PURE__*/React.createElement("div", {
291
- className: styles.inner
292
- }, /*#__PURE__*/React.createElement(ScreenElement, {
292
+ var items = [/*#__PURE__*/React.createElement(ScreenElement, {
293
293
  key: "video",
294
294
  placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo, Object.assign({
295
295
  className: styles.placeholder
@@ -346,12 +346,16 @@ var VideoScreen = function VideoScreen(_ref) {
346
346
  key: "bottom-content",
347
347
  className: styles.bottom,
348
348
  style: {
349
- transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
349
+ transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
350
350
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
351
351
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
352
352
  paddingBottom: spacing / 2,
353
353
  paddingTop: 0
354
354
  }
355
+ }, /*#__PURE__*/React.createElement(Transitions, {
356
+ playing: transitionPlaying,
357
+ transitions: transitions,
358
+ disabled: transitionDisabled
355
359
  }, closedCaptions !== null && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, {
356
360
  className: styles.closedCaptions,
357
361
  media: closedCaptions,
@@ -361,15 +365,23 @@ var VideoScreen = function VideoScreen(_ref) {
361
365
  animationDisabled: isPreview,
362
366
  focusable: current && isView,
363
367
  openWebView: openWebView
364
- })) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
368
+ })) : null)) : null];
369
+ return /*#__PURE__*/React.createElement("div", {
370
+ className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
371
+ "data-screen-ready": isStatic || isCapture || ready
372
+ }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
365
373
  background: background,
366
374
  width: width,
367
375
  height: height,
368
376
  resolution: resolution,
369
377
  playing: backgroundPlaying,
370
- shouldLoad: mediaShouldLoad,
371
- withoutVideo: isPreview
372
- }) : null);
378
+ shouldLoad: mediaShouldLoad
379
+ }) : null, /*#__PURE__*/React.createElement(Container, {
380
+ width: width,
381
+ height: height
382
+ }, /*#__PURE__*/React.createElement("div", {
383
+ className: styles.content
384
+ }, items)));
373
385
  };
374
386
 
375
387
  VideoScreen.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -39,7 +39,7 @@ var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
39
39
  var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
40
40
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
41
41
 
42
- var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","background":"micromag-screen-video-background","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","inner":"micromag-screen-video-inner","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","content":"micromag-screen-video-content","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
42
+ var styles = {"unmuteAndPlayButton":"micromag-screen-video-unmuteAndPlayButton","container":"micromag-screen-video-container","content":"micromag-screen-video-content","empty":"micromag-screen-video-empty","emptyContainer":"micromag-screen-video-emptyContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","placeholder":"micromag-screen-video-placeholder","video":"micromag-screen-video-video","disabled":"micromag-screen-video-disabled","hidden":"micromag-screen-video-hidden","bottom":"micromag-screen-video-bottom","videoContainer":"micromag-screen-video-videoContainer"};
43
43
 
44
44
  var propTypes = {
45
45
  layout: PropTypes__default["default"].oneOf(['middle', 'full']),
@@ -78,6 +78,7 @@ var VideoScreen = function VideoScreen(_ref) {
78
78
  callToAction = _ref.callToAction,
79
79
  current = _ref.current,
80
80
  active = _ref.active,
81
+ transitions = _ref.transitions,
81
82
  spacing = _ref.spacing,
82
83
  customMediaRef = _ref.mediaRef,
83
84
  className = _ref.className;
@@ -146,7 +147,9 @@ var VideoScreen = function VideoScreen(_ref) {
146
147
  setHasPlayed = _useState2[1];
147
148
 
148
149
  var backgroundPlaying = current && (isView || isEdit);
149
- var videoPlaying = current && (isView || isEdit) && playing;
150
+ var videoPlaying = current && (isView || isEdit) && playing; // const shouldDisplayPoster =
151
+ // isPreview || isCapture || (isView && active && !current && !hasPlayed);
152
+
150
153
  var shouldDisplayPoster = isPreview || isCapture;
151
154
  React.useEffect(function () {
152
155
  if (!current) {
@@ -185,19 +188,22 @@ var VideoScreen = function VideoScreen(_ref) {
185
188
 
186
189
  var _useActivityDetector = hooks.useActivityDetector({
187
190
  element: viewerContainer,
188
- disabled: !isView,
191
+ disabled: !current || !isView,
189
192
  timeout: 2000
190
193
  }),
191
194
  activityDetected = _useActivityDetector.detected;
192
195
 
193
- var toggleControlsVisibility = React.useCallback(function () {
196
+ React.useEffect(function () {
197
+ if (!current) {
198
+ return;
199
+ }
200
+
194
201
  if (activityDetected) {
195
202
  showControls();
196
203
  } else {
197
204
  hideControls();
198
205
  }
199
- }, [activityDetected, showControls, hideControls]);
200
- hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
206
+ }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
201
207
 
202
208
  var _useState3 = React.useState(null),
203
209
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
@@ -252,8 +258,11 @@ var VideoScreen = function VideoScreen(_ref) {
252
258
  var _useState7 = React.useState(hasVideo),
253
259
  _useState8 = _slicedToArray__default["default"](_useState7, 2),
254
260
  ready = _useState8[0],
255
- setReady = _useState8[1];
261
+ setReady = _useState8[1]; // useState(!hasVideo);
256
262
 
263
+
264
+ var transitionPlaying = current && ready;
265
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
257
266
  var finalVideo = React.useMemo(function () {
258
267
  return hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
259
268
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -300,16 +309,7 @@ var VideoScreen = function VideoScreen(_ref) {
300
309
  setPlaying(false);
301
310
  }
302
311
  }, [current, playing, setPlaying]);
303
- return /*#__PURE__*/React__default["default"].createElement("div", {
304
- className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
305
- "data-screen-ready": isStatic || isCapture || ready
306
- }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
307
- width: width,
308
- height: height,
309
- className: styles.content
310
- }, /*#__PURE__*/React__default["default"].createElement("div", {
311
- className: styles.inner
312
- }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
312
+ var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
313
313
  key: "video",
314
314
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo, Object.assign({
315
315
  className: styles.placeholder
@@ -366,12 +366,16 @@ var VideoScreen = function VideoScreen(_ref) {
366
366
  key: "bottom-content",
367
367
  className: styles.bottom,
368
368
  style: {
369
- transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
369
+ transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
370
370
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
371
371
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
372
372
  paddingBottom: spacing / 2,
373
373
  paddingTop: 0
374
374
  }
375
+ }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
376
+ playing: transitionPlaying,
377
+ transitions: transitions,
378
+ disabled: transitionDisabled
375
379
  }, closedCaptions !== null && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React__default["default"].createElement(ClosedCaptions__default["default"], {
376
380
  className: styles.closedCaptions,
377
381
  media: closedCaptions,
@@ -381,15 +385,23 @@ var VideoScreen = function VideoScreen(_ref) {
381
385
  animationDisabled: isPreview,
382
386
  focusable: current && isView,
383
387
  openWebView: openWebView
384
- })) : null) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
388
+ })) : null)) : null];
389
+ return /*#__PURE__*/React__default["default"].createElement("div", {
390
+ className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
391
+ "data-screen-ready": isStatic || isCapture || ready
392
+ }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
385
393
  background: background,
386
394
  width: width,
387
395
  height: height,
388
396
  resolution: resolution,
389
397
  playing: backgroundPlaying,
390
- shouldLoad: mediaShouldLoad,
391
- withoutVideo: isPreview
392
- }) : null);
398
+ shouldLoad: mediaShouldLoad
399
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
400
+ width: width,
401
+ height: height
402
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
403
+ className: styles.content
404
+ }, items)));
393
405
  };
394
406
 
395
407
  VideoScreen.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.3.246",
3
+ "version": "0.3.251",
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.20",
53
- "@micromag/core": "^0.3.246",
54
- "@micromag/element-background": "^0.3.246",
55
- "@micromag/element-call-to-action": "^0.3.246",
56
- "@micromag/element-closed-captions": "^0.3.246",
57
- "@micromag/element-container": "^0.3.246",
58
- "@micromag/element-image": "^0.3.246",
59
- "@micromag/element-media-controls": "^0.3.246",
60
- "@micromag/element-video": "^0.3.246",
61
- "@micromag/transforms": "^0.3.246",
53
+ "@micromag/core": "^0.3.251",
54
+ "@micromag/element-background": "^0.3.251",
55
+ "@micromag/element-call-to-action": "^0.3.251",
56
+ "@micromag/element-closed-captions": "^0.3.251",
57
+ "@micromag/element-container": "^0.3.251",
58
+ "@micromag/element-image": "^0.3.251",
59
+ "@micromag/element-media-controls": "^0.3.251",
60
+ "@micromag/element-video": "^0.3.251",
61
+ "@micromag/transforms": "^0.3.251",
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": "473a4ad55684e54d3f1e62e760792ed6e003f8e7"
71
+ "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
72
72
  }