@micromag/screen-video 0.3.488 → 0.3.495

package/es/index.js

@@ -90,6 +90,8 @@ var VideoScreen = function VideoScreen(_ref) {
     videoMedia = _ref2$media === void 0 ? null : _ref2$media,
     _ref2$thumbnail = _ref2.thumbnail,
     thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
+    _ref2$captions = _ref2.captions,
+    captions = _ref2$captions === void 0 ? null : _ref2$captions,
     _ref2$closedCaptions = _ref2.closedCaptions,
     closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
     _ref2$withSeekBar = _ref2.withSeekBar,
@@ -171,8 +173,16 @@ var VideoScreen = function VideoScreen(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     duration = _useState6[0],
     setDuration = _useState6[1];
-  var onTimeUpdate = useCallback(function (time) {
-    setCurrentTime(time);
+  var onTimeUpdate = useCallback(function () {
+    var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (time !== null && typeof time.currentTarget !== 'undefined') {
+      var _ref3 = time.currentTarget || {},
+        _ref3$currentTime = _ref3.currentTime,
+        targetTime = _ref3$currentTime === void 0 ? 0 : _ref3$currentTime;
+      setCurrentTime(targetTime);
+    } else {
+      setCurrentTime(0);
+    }
   }, [duration, setCurrentTime]);
   var onProgressStep = useCallback(function (step) {
     trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
@@ -180,15 +190,15 @@ var VideoScreen = function VideoScreen(_ref) {
   var onDurationChange = useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
-  var onPlay = useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  var onPlay = useCallback(function (_ref4) {
+    var initial = _ref4.initial;
     if (!hasPlayed) {
       setHasPlayed(true);
     }
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
-  var onPause = useCallback(function (_ref4) {
-    var midway = _ref4.midway;
+  var onPause = useCallback(function (_ref5) {
+    var midway = _ref5.midway;
     trackScreenMedia(video, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, video]);
   var onSeeked = useCallback(function (time) {
@@ -223,18 +233,18 @@ var VideoScreen = function VideoScreen(_ref) {
       autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
     }) : null;
   }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
-  var _ref5 = videoMedia || {},
-    _ref5$metadata = _ref5.metadata,
-    videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
-    _ref5$url = _ref5.url,
-    videoUrl = _ref5$url === void 0 ? null : _ref5$url;
+  var _ref6 = videoMedia || {},
+    _ref6$metadata = _ref6.metadata,
+    videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
+    _ref6$url = _ref6.url,
+    videoUrl = _ref6$url === void 0 ? null : _ref6$url;
   var finalThumbnail = useMediaThumbnail(videoMedia, thumbnail);
   var hasVideoUrl = videoUrl !== null;
-  var _ref6 = videoMetadata || {},
-    _ref6$width = _ref6.width,
-    videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
-    _ref6$height = _ref6.height,
-    videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
+  var _ref7 = videoMetadata || {},
+    _ref7$width = _ref7.width,
+    videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
+    _ref7$height = _ref7.height,
+    videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
   var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
       cover: fullscreen
     }),
@@ -254,11 +264,13 @@ var VideoScreen = function VideoScreen(_ref) {
   var onVideoReady = useCallback(function () {
     setReady(true);
   }, [setReady]);
-  useCallback(function () {
-    if (playing && current) {
-      setPlaying(false);
-    }
-  }, [current, playing, setPlaying]);
+
+  // const onSuspended = useCallback(() => {
+  //     if (playing && current) {
+  //         setPlaying(false);
+  //     }
+  // }, [current, playing, setPlaying]);
+
   var onPlayError = useCallback(function () {
     if (isView && playing && current && hasVideoUrl && autoPlay) {
       setPlaying(false);
@@ -350,11 +362,12 @@ var VideoScreen = function VideoScreen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: 0
     }
-  }, closedCaptions !== null && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, {
+  }, (closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, Object.assign({
     className: styles.closedCaptions,
-    media: closedCaptions,
+    media: closedCaptions // BW Compat
+  }, captions, {
     currentTime: currentTime
-  }) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, footerProps) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+  })) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, footerProps) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,

package/lib/index.js

@@ -94,6 +94,8 @@ var VideoScreen = function VideoScreen(_ref) {
     videoMedia = _ref2$media === void 0 ? null : _ref2$media,
     _ref2$thumbnail = _ref2.thumbnail,
     thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
+    _ref2$captions = _ref2.captions,
+    captions = _ref2$captions === void 0 ? null : _ref2$captions,
     _ref2$closedCaptions = _ref2.closedCaptions,
     closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
     _ref2$withSeekBar = _ref2.withSeekBar,
@@ -175,8 +177,16 @@ var VideoScreen = function VideoScreen(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     duration = _useState6[0],
     setDuration = _useState6[1];
-  var onTimeUpdate = React.useCallback(function (time) {
-    setCurrentTime(time);
+  var onTimeUpdate = React.useCallback(function () {
+    var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (time !== null && typeof time.currentTarget !== 'undefined') {
+      var _ref3 = time.currentTarget || {},
+        _ref3$currentTime = _ref3.currentTime,
+        targetTime = _ref3$currentTime === void 0 ? 0 : _ref3$currentTime;
+      setCurrentTime(targetTime);
+    } else {
+      setCurrentTime(0);
+    }
   }, [duration, setCurrentTime]);
   var onProgressStep = React.useCallback(function (step) {
     trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
@@ -184,15 +194,15 @@ var VideoScreen = function VideoScreen(_ref) {
   var onDurationChange = React.useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
-  var onPlay = React.useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  var onPlay = React.useCallback(function (_ref4) {
+    var initial = _ref4.initial;
     if (!hasPlayed) {
       setHasPlayed(true);
     }
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
-  var onPause = React.useCallback(function (_ref4) {
-    var midway = _ref4.midway;
+  var onPause = React.useCallback(function (_ref5) {
+    var midway = _ref5.midway;
     trackScreenMedia(video, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, video]);
   var onSeeked = React.useCallback(function (time) {
@@ -227,18 +237,18 @@ var VideoScreen = function VideoScreen(_ref) {
       autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
     }) : null;
   }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
-  var _ref5 = videoMedia || {},
-    _ref5$metadata = _ref5.metadata,
-    videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
-    _ref5$url = _ref5.url,
-    videoUrl = _ref5$url === void 0 ? null : _ref5$url;
+  var _ref6 = videoMedia || {},
+    _ref6$metadata = _ref6.metadata,
+    videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
+    _ref6$url = _ref6.url,
+    videoUrl = _ref6$url === void 0 ? null : _ref6$url;
   var finalThumbnail = hooks.useMediaThumbnail(videoMedia, thumbnail);
   var hasVideoUrl = videoUrl !== null;
-  var _ref6 = videoMetadata || {},
-    _ref6$width = _ref6.width,
-    videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
-    _ref6$height = _ref6.height,
-    videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
+  var _ref7 = videoMetadata || {},
+    _ref7$width = _ref7.width,
+    videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
+    _ref7$height = _ref7.height,
+    videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
   var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
       cover: fullscreen
     }),
@@ -258,11 +268,13 @@ var VideoScreen = function VideoScreen(_ref) {
   var onVideoReady = React.useCallback(function () {
     setReady(true);
   }, [setReady]);
-  React.useCallback(function () {
-    if (playing && current) {
-      setPlaying(false);
-    }
-  }, [current, playing, setPlaying]);
+
+  // const onSuspended = useCallback(() => {
+  //     if (playing && current) {
+  //         setPlaying(false);
+  //     }
+  // }, [current, playing, setPlaying]);
+
   var onPlayError = React.useCallback(function () {
     if (isView && playing && current && hasVideoUrl && autoPlay) {
       setPlaying(false);
@@ -354,11 +366,12 @@ var VideoScreen = function VideoScreen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: 0
     }
-  }, closedCaptions !== null && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, {
+  }, (closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, Object.assign({
     className: styles.closedCaptions,
-    media: closedCaptions,
+    media: closedCaptions // BW Compat
+  }, captions, {
     currentTime: currentTime
-  }) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, footerProps) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+  })) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, footerProps) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.3.488",
+    "version": "0.3.495",
     "private": false,
     "description": "",
     "keywords": [
@@ -62,15 +62,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.488",
-        "@micromag/element-background": "^0.3.488",
-        "@micromag/element-closed-captions": "^0.3.488",
-        "@micromag/element-container": "^0.3.488",
-        "@micromag/element-footer": "^0.3.488",
-        "@micromag/element-header": "^0.3.488",
-        "@micromag/element-image": "^0.3.488",
-        "@micromag/element-video": "^0.3.488",
-        "@micromag/transforms": "^0.3.488",
+        "@micromag/core": "^0.3.491",
+        "@micromag/element-background": "^0.3.491",
+        "@micromag/element-closed-captions": "^0.3.491",
+        "@micromag/element-container": "^0.3.491",
+        "@micromag/element-footer": "^0.3.491",
+        "@micromag/element-header": "^0.3.495",
+        "@micromag/element-image": "^0.3.491",
+        "@micromag/element-video": "^0.3.491",
+        "@micromag/transforms": "^0.3.491",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "36ecbf590ebb8eabac17e47fc48ffb8bf8c8178c"
+    "gitHead": "dca5bb24d7c6de3807e45e15dccfdca68dcac0f4"
 }