@micromag/element-video 0.3.307 → 0.3.318

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-video-container.micromag-element-video-withSize .micromag-element-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-video-container{position:relative}.micromag-element-video-container .micromag-element-video-video{display:block;width:100%}
+.micromag-element-video-container.micromag-element-video-withSize .micromag-element-video-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-element-video-container{position:relative}.micromag-element-video-container .micromag-element-video-video{display:block;width:100%}

package/es/index.js

@@ -71,61 +71,54 @@ var defaultProps = {
   focusable: true,
   withPoster: false
 };
-
 var Video = function Video(_ref) {
   var _ref7;
-
   var media = _ref.media,
-      thumbnail = _ref.thumbnail,
-      width = _ref.width,
-      height = _ref.height,
-      mediaRef = _ref.mediaRef,
-      muted = _ref.muted,
-      autoPlay = _ref.autoPlay,
-      paused = _ref.paused,
-      loop = _ref.loop,
-      playsInline = _ref.playsInline,
-      preload = _ref.preload,
-      shouldLoad = _ref.shouldLoad,
-      withoutCors = _ref.withoutCors,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      customOnPlay = _ref.onPlay,
-      onPause = _ref.onPause,
-      onEnded = _ref.onEnded,
-      onSeeked = _ref.onSeeked,
-      onTimeUpdate = _ref.onTimeUpdate,
-      onProgressStep = _ref.onProgressStep,
-      customOnDurationChange = _ref.onDurationChange,
-      customOnVolumeChange = _ref.onVolumeChange,
-      customOnSuspend = _ref.onSuspend,
-      onSuspended = _ref.onSuspended,
-      focusable = _ref.focusable,
-      withPoster = _ref.withPoster;
-
+    thumbnail = _ref.thumbnail,
+    width = _ref.width,
+    height = _ref.height,
+    mediaRef = _ref.mediaRef,
+    muted = _ref.muted,
+    autoPlay = _ref.autoPlay,
+    paused = _ref.paused,
+    loop = _ref.loop,
+    playsInline = _ref.playsInline,
+    preload = _ref.preload,
+    shouldLoad = _ref.shouldLoad,
+    withoutCors = _ref.withoutCors,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    customOnPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onSeeked = _ref.onSeeked,
+    onTimeUpdate = _ref.onTimeUpdate,
+    onProgressStep = _ref.onProgressStep,
+    customOnDurationChange = _ref.onDurationChange,
+    customOnVolumeChange = _ref.onVolumeChange,
+    customOnSuspend = _ref.onSuspend,
+    onSuspended = _ref.onSuspended,
+    focusable = _ref.focusable,
+    withPoster = _ref.withPoster;
   var _ref2 = media || {},
-      _ref2$url = _ref2.url,
-      mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
-      _ref2$files = _ref2.files,
-      files = _ref2$files === void 0 ? null : _ref2$files,
-      _ref2$metadata = _ref2.metadata,
-      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-
+    _ref2$url = _ref2.url,
+    mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
+    _ref2$files = _ref2.files,
+    files = _ref2$files === void 0 ? null : _ref2$files,
+    _ref2$metadata = _ref2.metadata,
+    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
   var _ref3 = metadata || {},
-      _ref3$description = _ref3.description,
-      description = _ref3$description === void 0 ? null : _ref3$description,
-      _ref3$mime = _ref3.mime,
-      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
-      _ref3$has_audio = _ref3.has_audio,
-      hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
-
+    _ref3$description = _ref3.description,
+    description = _ref3$description === void 0 ? null : _ref3$description,
+    _ref3$mime = _ref3.mime,
+    mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
+    _ref3$has_audio = _ref3.has_audio,
+    hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
   var filesArray = useMemo(function () {
     return getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = useMediaThumbnail(media, thumbnail);
-
   var _ref9 = useRef(null);
-
   var currentTime = useMediaCurrentTime(_ref9.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
@@ -140,42 +133,37 @@ var Video = function Video(_ref) {
     if (filesArray.length === 0) {
       return null;
     }
-
     var supportedMimes = getVideoSupportedMimes();
-
     if (supportedMimes.length === 0) {
       return null;
     }
-
     var sourceFilesMap = filesArray.filter(function (file) {
       var _file$mime = file.mime,
-          mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
+        mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
       return supportedMimes.indexOf(mime) !== -1;
     }).reduce(function (filesMap, file) {
       var _file$mime2 = file.mime,
-          mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
+        mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
       var currentMimeFile = filesMap[mime] || null;
-
       var _ref4 = currentMimeFile || {},
-          _ref4$id = _ref4.id,
-          currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
-
+        _ref4$id = _ref4.id,
+        currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
       return currentMimeFile === null || currentMimeId !== 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
     }, {});
     return Object.keys(sourceFilesMap).map(function (mime) {
       return sourceFilesMap[mime];
     });
-  }, [filesArray]); // @NOTE: Media is an animated image and doesn't have source files in video formats
+  }, [filesArray]);
 
+  // @NOTE: Media is an animated image and doesn't have source files in video formats
   var _ref5 = filesArray.find(function (_ref6) {
-    var handle = _ref6.handle;
-    return handle === 'original';
-  }) || {},
-      _ref5$type = _ref5.type,
-      originalType = _ref5$type === void 0 ? null : _ref5$type,
-      _ref5$mime = _ref5.mime,
-      originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
-
+      var handle = _ref6.handle;
+      return handle === 'original';
+    }) || {},
+    _ref5$type = _ref5.type,
+    originalType = _ref5$type === void 0 ? null : _ref5$type,
+    _ref5$mime = _ref5.mime,
+    originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
   var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
   var withSize = width !== null && height !== null;
@@ -186,27 +174,24 @@ var Video = function Video(_ref) {
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
     var _ref$current = _ref9.current,
-        element = _ref$current === void 0 ? null : _ref$current;
-
+      element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
     }
-
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Manage suspend
+  }, [customOnVolumeChange]);
 
+  // Manage suspend
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSuspended = _useState2[0],
-      setIsSuspended = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isSuspended = _useState2[0],
+    setIsSuspended = _useState2[1];
   var onPlay = useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
     }
-
     if (customOnPlay !== null) {
       customOnPlay(e);
     }
@@ -219,12 +204,10 @@ var Video = function Video(_ref) {
   var onSuspend = useCallback(function (e) {
     if (e.currentTarget.paused && !paused && !isSuspended) {
       setIsSuspended(true);
-
       if (onSuspended !== null) {
         onSuspended();
       }
     }
-
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
@@ -236,14 +219,11 @@ var Video = function Video(_ref) {
   }, [ready, onReady]);
   useEffect(function () {
     var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-
+      element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
-
     var isPaused = element.paused;
-
     if (paused && !isPaused) {
       element.pause();
     } else if (!paused && isPaused) {
@@ -270,7 +250,6 @@ var Video = function Video(_ref) {
     key: mediaUrl,
     ref: function ref(newRef) {
       _ref9.current = newRef;
-
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -299,7 +278,7 @@ var Video = function Video(_ref) {
     "data-is-suspended": isSuspended
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
-        sourceMime = _ref8.mime;
+      sourceMime = _ref8.mime;
     return /*#__PURE__*/React.createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.1") : null,
@@ -307,7 +286,6 @@ var Video = function Video(_ref) {
     });
   })) : null);
 };
-
 Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
 var Video$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/lib/index.js

@@ -83,61 +83,54 @@ var defaultProps = {
   focusable: true,
   withPoster: false
 };
-
 var Video = function Video(_ref) {
   var _ref7;
-
   var media = _ref.media,
-      thumbnail = _ref.thumbnail,
-      width = _ref.width,
-      height = _ref.height,
-      mediaRef = _ref.mediaRef,
-      muted = _ref.muted,
-      autoPlay = _ref.autoPlay,
-      paused = _ref.paused,
-      loop = _ref.loop,
-      playsInline = _ref.playsInline,
-      preload = _ref.preload,
-      shouldLoad = _ref.shouldLoad,
-      withoutCors = _ref.withoutCors,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      customOnPlay = _ref.onPlay,
-      onPause = _ref.onPause,
-      onEnded = _ref.onEnded,
-      onSeeked = _ref.onSeeked,
-      onTimeUpdate = _ref.onTimeUpdate,
-      onProgressStep = _ref.onProgressStep,
-      customOnDurationChange = _ref.onDurationChange,
-      customOnVolumeChange = _ref.onVolumeChange,
-      customOnSuspend = _ref.onSuspend,
-      onSuspended = _ref.onSuspended,
-      focusable = _ref.focusable,
-      withPoster = _ref.withPoster;
-
+    thumbnail = _ref.thumbnail,
+    width = _ref.width,
+    height = _ref.height,
+    mediaRef = _ref.mediaRef,
+    muted = _ref.muted,
+    autoPlay = _ref.autoPlay,
+    paused = _ref.paused,
+    loop = _ref.loop,
+    playsInline = _ref.playsInline,
+    preload = _ref.preload,
+    shouldLoad = _ref.shouldLoad,
+    withoutCors = _ref.withoutCors,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    customOnPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onSeeked = _ref.onSeeked,
+    onTimeUpdate = _ref.onTimeUpdate,
+    onProgressStep = _ref.onProgressStep,
+    customOnDurationChange = _ref.onDurationChange,
+    customOnVolumeChange = _ref.onVolumeChange,
+    customOnSuspend = _ref.onSuspend,
+    onSuspended = _ref.onSuspended,
+    focusable = _ref.focusable,
+    withPoster = _ref.withPoster;
   var _ref2 = media || {},
-      _ref2$url = _ref2.url,
-      mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
-      _ref2$files = _ref2.files,
-      files = _ref2$files === void 0 ? null : _ref2$files,
-      _ref2$metadata = _ref2.metadata,
-      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-
+    _ref2$url = _ref2.url,
+    mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
+    _ref2$files = _ref2.files,
+    files = _ref2$files === void 0 ? null : _ref2$files,
+    _ref2$metadata = _ref2.metadata,
+    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
   var _ref3 = metadata || {},
-      _ref3$description = _ref3.description,
-      description = _ref3$description === void 0 ? null : _ref3$description,
-      _ref3$mime = _ref3.mime,
-      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
-      _ref3$has_audio = _ref3.has_audio,
-      hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
-
+    _ref3$description = _ref3.description,
+    description = _ref3$description === void 0 ? null : _ref3$description,
+    _ref3$mime = _ref3.mime,
+    mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
+    _ref3$has_audio = _ref3.has_audio,
+    hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
   var filesArray = React.useMemo(function () {
     return utils.getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = hooks.useMediaThumbnail(media, thumbnail);
-
   var _ref9 = React.useRef(null);
-
   var currentTime = hooks.useMediaCurrentTime(_ref9.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
@@ -152,42 +145,37 @@ var Video = function Video(_ref) {
     if (filesArray.length === 0) {
       return null;
     }
-
     var supportedMimes = utils.getVideoSupportedMimes();
-
     if (supportedMimes.length === 0) {
       return null;
     }
-
     var sourceFilesMap = filesArray.filter(function (file) {
       var _file$mime = file.mime,
-          mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
+        mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
       return supportedMimes.indexOf(mime) !== -1;
     }).reduce(function (filesMap, file) {
       var _file$mime2 = file.mime,
-          mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
+        mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
       var currentMimeFile = filesMap[mime] || null;
-
       var _ref4 = currentMimeFile || {},
-          _ref4$id = _ref4.id,
-          currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
-
+        _ref4$id = _ref4.id,
+        currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
       return currentMimeFile === null || currentMimeId !== 'original' ? _objectSpread__default["default"](_objectSpread__default["default"]({}, filesMap), {}, _defineProperty__default["default"]({}, mime, file)) : filesMap;
     }, {});
     return Object.keys(sourceFilesMap).map(function (mime) {
       return sourceFilesMap[mime];
     });
-  }, [filesArray]); // @NOTE: Media is an animated image and doesn't have source files in video formats
+  }, [filesArray]);
 
+  // @NOTE: Media is an animated image and doesn't have source files in video formats
   var _ref5 = filesArray.find(function (_ref6) {
-    var handle = _ref6.handle;
-    return handle === 'original';
-  }) || {},
-      _ref5$type = _ref5.type,
-      originalType = _ref5$type === void 0 ? null : _ref5$type,
-      _ref5$mime = _ref5.mime,
-      originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
-
+      var handle = _ref6.handle;
+      return handle === 'original';
+    }) || {},
+    _ref5$type = _ref5.type,
+    originalType = _ref5$type === void 0 ? null : _ref5$type,
+    _ref5$mime = _ref5.mime,
+    originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
   var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
   var withSize = width !== null && height !== null;
@@ -198,27 +186,24 @@ var Video = function Video(_ref) {
   }, [duration, customOnDurationChange]);
   var onVolumeChange = React.useCallback(function () {
     var _ref$current = _ref9.current,
-        element = _ref$current === void 0 ? null : _ref$current;
-
+      element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
     }
-
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Manage suspend
+  }, [customOnVolumeChange]);
 
+  // Manage suspend
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      isSuspended = _useState2[0],
-      setIsSuspended = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    isSuspended = _useState2[0],
+    setIsSuspended = _useState2[1];
   var onPlay = React.useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
     }
-
     if (customOnPlay !== null) {
       customOnPlay(e);
     }
@@ -231,12 +216,10 @@ var Video = function Video(_ref) {
   var onSuspend = React.useCallback(function (e) {
     if (e.currentTarget.paused && !paused && !isSuspended) {
       setIsSuspended(true);
-
       if (onSuspended !== null) {
         onSuspended();
       }
     }
-
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
@@ -248,14 +231,11 @@ var Video = function Video(_ref) {
   }, [ready, onReady]);
   React.useEffect(function () {
     var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-
+      element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
-
     var isPaused = element.paused;
-
     if (paused && !isPaused) {
       element.pause();
     } else if (!paused && isPaused) {
@@ -282,7 +262,6 @@ var Video = function Video(_ref) {
     key: mediaUrl,
     ref: function ref(newRef) {
       _ref9.current = newRef;
-
       if (mediaRef !== null && isFunction__default["default"](mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -311,7 +290,7 @@ var Video = function Video(_ref) {
     "data-is-suspended": isSuspended
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
-        sourceMime = _ref8.mime;
+      sourceMime = _ref8.mime;
     return /*#__PURE__*/React__default["default"].createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.1") : null,
@@ -319,7 +298,6 @@ var Video = function Video(_ref) {
     });
   })) : null);
 };
-
 Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
 var Video$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.307",
+    "version": "0.3.318",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,17 +52,17 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.307",
-        "@micromag/element-closed-captions": "^0.3.307",
-        "@micromag/element-media-controls": "^0.3.307",
+        "@micromag/core": "^0.3.318",
+        "@micromag/element-closed-captions": "^0.3.318",
+        "@micromag/element-media-controls": "^0.3.318",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
-        "uuid": "^8.3.2"
+        "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cdc815b7aebe1b9ae8741e1956e21780def64caf"
+    "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
 }