@micromag/element-video 0.2.327 → 0.2.353

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-video-container.micromag-element-video-withSize video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-video-container{position:relative}.micromag-element-video-container video{display:block;width:100%}
+.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%}

package/es/index.js

@@ -1,14 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useEffect } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import PropTypes$1 from 'prop-types';
 import classNames from 'classnames';
 import { PropTypes } from '@micromag/core';
 import { useUserInteracted } from '@micromag/core/contexts';
 import { useMediaApi } from '@micromag/core/hooks';
+import { getMediaFilesAsArray } from '@micromag/core/utils';
 
-var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize"};
+var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
+var _excluded = ["ref"];
 var propTypes = {
   media: PropTypes.videoMedia,
   width: PropTypes$1.number,
@@ -32,7 +34,8 @@ var propTypes = {
   onProgressStep: PropTypes$1.func,
   onDurationChanged: PropTypes$1.func,
   onVolumeChanged: PropTypes$1.func,
-  focusable: PropTypes$1.bool // onPosterLoaded: PropTypes.func,
+  focusable: PropTypes$1.bool,
+  supportedMimes: PropTypes$1.arrayOf(PropTypes$1.string) // onPosterLoaded: PropTypes.func,
 
 };
 var defaultProps = {
@@ -56,12 +59,13 @@ var defaultProps = {
   onProgressStep: null,
   onDurationChanged: null,
   onVolumeChanged: null,
-  focusable: true // onPosterLoaded: null,
+  focusable: true,
+  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'] // onPosterLoaded: null,
 
 };
 
 var Video = function Video(_ref) {
-  var _ref3;
+  var _ref6;
 
   var media = _ref.media,
       width = _ref.width,
@@ -83,16 +87,54 @@ var Video = function Video(_ref) {
       onProgressStep = _ref.onProgressStep,
       onDurationChanged = _ref.onDurationChanged,
       onVolumeChanged = _ref.onVolumeChanged,
-      focusable = _ref.focusable;
+      focusable = _ref.focusable,
+      supportedMimes = _ref.supportedMimes;
 
   var _ref2 = media || {},
       _ref2$url = _ref2.url,
-      url = _ref2$url === void 0 ? null : _ref2$url,
+      mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
       _ref2$files = _ref2.files,
-      files = _ref2$files === void 0 ? null : _ref2$files;
+      files = _ref2$files === void 0 ? null : _ref2$files,
+      _ref2$metadata = _ref2.metadata,
+      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
 
-  var hasFiles = files !== null && typeof files.h264 !== 'undefined' && typeof files.webm !== 'undefined';
-  var mediaUrl = hasFiles ? files.h264.url : url;
+  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;
+
+  var filesArray = useMemo(function () {
+    return getMediaFilesAsArray(files);
+  }, [files]); // Get source files with supported mimes
+
+  var sourceFiles = useMemo(function () {
+    if (filesArray.length === 0) {
+      return null;
+    }
+
+    var supportVideo = document.createElement('video');
+    var finalSupportedMimes = supportedMimes.filter(function (mime) {
+      return supportVideo.canPlayType(mime) !== '';
+    });
+    return finalSupportedMimes.length > 0 ? filesArray.filter(function (file) {
+      var _file$mime = file.mime,
+          mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
+      return finalSupportedMimes.indexOf(mime) !== -1;
+    }, null) : null;
+  }, [filesArray, supportedMimes]); // @NOTE: Media is an animated image and doesn't have source files in video formats
+
+  var _ref4 = filesArray.find(function (_ref5) {
+    var id = _ref5.id;
+    return id === 'original';
+  }) || {},
+      _ref4$type = _ref4.type,
+      originalType = _ref4$type === void 0 ? null : _ref4$type,
+      _ref4$mime = _ref4.mime,
+      originalMime = _ref4$mime === void 0 ? mediaMime : _ref4$mime;
+
+  var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
+  var isImageWithoutSourceFile = originalFileIsImage && sourceFiles === null;
   var userInteracted = useUserInteracted();
   var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
 
@@ -109,7 +151,7 @@ var Video = function Video(_ref) {
     onVolumeChanged: onVolumeChanged
   }),
       ref = _useMediaApi.ref,
-      api = _objectWithoutProperties(_useMediaApi, ["ref"]);
+      api = _objectWithoutProperties(_useMediaApi, _excluded);
 
   if (apiRef !== null) {
     apiRef.current = api;
@@ -152,15 +194,19 @@ var Video = function Video(_ref) {
     }
   }, [autoPlay]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.paused, !playing), _defineProperty(_ref3, styles.withSize, withSize), _ref3)]),
+    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.paused, !playing), _defineProperty(_ref6, styles.withSize, withSize), _ref6)]),
     style: withSize ? {
       width: width,
       height: height
     } : null
-  }, /*#__PURE__*/React.createElement("video", {
+  }, isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("img", {
+    src: mediaUrl,
+    alt: description,
+    className: styles.video
+  }) : /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: ref,
-    src: !hasFiles ? mediaUrl : null,
+    src: sourceFiles === null ? mediaUrl : null,
     autoPlay: autoPlay,
     loop: loop,
     muted: muted // poster={thumbnailUrl}
@@ -168,14 +214,17 @@ var Video = function Video(_ref) {
     preload: preload,
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
-    tabIndex: focusable ? '0' : '-1'
-  }, hasFiles ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("source", {
-    src: files.webm.url,
-    type: "video/webm"
-  }), /*#__PURE__*/React.createElement("source", {
-    src: files.h264.url,
-    type: "video/mp4"
-  })) : null));
+    tabIndex: focusable ? '0' : '-1',
+    className: styles.video
+  }, (sourceFiles || []).map(function (_ref7) {
+    var sourceUrl = _ref7.url,
+        sourceMime = _ref7.mime;
+    return /*#__PURE__*/React.createElement("source", {
+      key: "".concat(sourceUrl, "-").concat(sourceMime),
+      src: sourceUrl,
+      type: sourceMime
+    });
+  })));
 };
 
 Video.propTypes = propTypes;
@@ -186,4 +235,4 @@ var Video$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, props));
 });
 
-export default Video$1;
+export { Video$1 as default };

package/lib/index.js

@@ -8,6 +8,7 @@ var classNames = require('classnames');
 var core = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
+var utils = require('@micromag/core/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,32 +18,34 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
-var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize"};
+var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
+var _excluded = ["ref"];
 var propTypes = {
   media: core.PropTypes.videoMedia,
-  width: PropTypes__default['default'].number,
-  height: PropTypes__default['default'].number,
-  apiRef: PropTypes__default['default'].oneOfType([PropTypes__default['default'].func, PropTypes__default['default'].shape({
-    current: PropTypes__default['default'].any
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  apiRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
   })]),
-  initialMuted: PropTypes__default['default'].oneOf(['auto', true, false]),
-  autoPlay: PropTypes__default['default'].bool,
-  loop: PropTypes__default['default'].bool,
-  playsInline: PropTypes__default['default'].bool,
-  preload: PropTypes__default['default'].string,
-  withoutCors: PropTypes__default['default'].bool,
-  className: PropTypes__default['default'].string,
-  onReady: PropTypes__default['default'].func,
-  onPlay: PropTypes__default['default'].func,
-  onPause: PropTypes__default['default'].func,
-  onEnded: PropTypes__default['default'].func,
-  onSeeked: PropTypes__default['default'].func,
-  onTimeUpdate: PropTypes__default['default'].func,
-  onProgressStep: PropTypes__default['default'].func,
-  onDurationChanged: PropTypes__default['default'].func,
-  onVolumeChanged: PropTypes__default['default'].func,
-  focusable: PropTypes__default['default'].bool // onPosterLoaded: PropTypes.func,
+  initialMuted: PropTypes__default["default"].oneOf(['auto', true, false]),
+  autoPlay: PropTypes__default["default"].bool,
+  loop: PropTypes__default["default"].bool,
+  playsInline: PropTypes__default["default"].bool,
+  preload: PropTypes__default["default"].string,
+  withoutCors: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  onReady: PropTypes__default["default"].func,
+  onPlay: PropTypes__default["default"].func,
+  onPause: PropTypes__default["default"].func,
+  onEnded: PropTypes__default["default"].func,
+  onSeeked: PropTypes__default["default"].func,
+  onTimeUpdate: PropTypes__default["default"].func,
+  onProgressStep: PropTypes__default["default"].func,
+  onDurationChanged: PropTypes__default["default"].func,
+  onVolumeChanged: PropTypes__default["default"].func,
+  focusable: PropTypes__default["default"].bool,
+  supportedMimes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string) // onPosterLoaded: PropTypes.func,
 
 };
 var defaultProps = {
@@ -66,12 +69,13 @@ var defaultProps = {
   onProgressStep: null,
   onDurationChanged: null,
   onVolumeChanged: null,
-  focusable: true // onPosterLoaded: null,
+  focusable: true,
+  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'] // onPosterLoaded: null,
 
 };
 
 var Video = function Video(_ref) {
-  var _ref3;
+  var _ref6;
 
   var media = _ref.media,
       width = _ref.width,
@@ -93,16 +97,54 @@ var Video = function Video(_ref) {
       onProgressStep = _ref.onProgressStep,
       onDurationChanged = _ref.onDurationChanged,
       onVolumeChanged = _ref.onVolumeChanged,
-      focusable = _ref.focusable;
+      focusable = _ref.focusable,
+      supportedMimes = _ref.supportedMimes;
 
   var _ref2 = media || {},
       _ref2$url = _ref2.url,
-      url = _ref2$url === void 0 ? null : _ref2$url,
+      mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
       _ref2$files = _ref2.files,
-      files = _ref2$files === void 0 ? null : _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;
+
+  var filesArray = React.useMemo(function () {
+    return utils.getMediaFilesAsArray(files);
+  }, [files]); // Get source files with supported mimes
+
+  var sourceFiles = React.useMemo(function () {
+    if (filesArray.length === 0) {
+      return null;
+    }
 
-  var hasFiles = files !== null && typeof files.h264 !== 'undefined' && typeof files.webm !== 'undefined';
-  var mediaUrl = hasFiles ? files.h264.url : url;
+    var supportVideo = document.createElement('video');
+    var finalSupportedMimes = supportedMimes.filter(function (mime) {
+      return supportVideo.canPlayType(mime) !== '';
+    });
+    return finalSupportedMimes.length > 0 ? filesArray.filter(function (file) {
+      var _file$mime = file.mime,
+          mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
+      return finalSupportedMimes.indexOf(mime) !== -1;
+    }, null) : null;
+  }, [filesArray, supportedMimes]); // @NOTE: Media is an animated image and doesn't have source files in video formats
+
+  var _ref4 = filesArray.find(function (_ref5) {
+    var id = _ref5.id;
+    return id === 'original';
+  }) || {},
+      _ref4$type = _ref4.type,
+      originalType = _ref4$type === void 0 ? null : _ref4$type,
+      _ref4$mime = _ref4.mime,
+      originalMime = _ref4$mime === void 0 ? mediaMime : _ref4$mime;
+
+  var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
+  var isImageWithoutSourceFile = originalFileIsImage && sourceFiles === null;
   var userInteracted = contexts.useUserInteracted();
   var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
 
@@ -119,7 +161,7 @@ var Video = function Video(_ref) {
     onVolumeChanged: onVolumeChanged
   }),
       ref = _useMediaApi.ref,
-      api = _objectWithoutProperties__default['default'](_useMediaApi, ["ref"]);
+      api = _objectWithoutProperties__default["default"](_useMediaApi, _excluded);
 
   if (apiRef !== null) {
     apiRef.current = api;
@@ -161,16 +203,20 @@ var Video = function Video(_ref) {
       pause();
     }
   }, [autoPlay]);
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classNames__default['default']([styles.container, (_ref3 = {}, _defineProperty__default['default'](_ref3, className, className !== null), _defineProperty__default['default'](_ref3, styles.paused, !playing), _defineProperty__default['default'](_ref3, styles.withSize, withSize), _ref3)]),
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.paused, !playing), _defineProperty__default["default"](_ref6, styles.withSize, withSize), _ref6)]),
     style: withSize ? {
       width: width,
       height: height
     } : null
-  }, /*#__PURE__*/React__default['default'].createElement("video", {
+  }, isImageWithoutSourceFile ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: mediaUrl,
+    alt: description,
+    className: styles.video
+  }) : /*#__PURE__*/React__default["default"].createElement("video", {
     key: mediaUrl,
     ref: ref,
-    src: !hasFiles ? mediaUrl : null,
+    src: sourceFiles === null ? mediaUrl : null,
     autoPlay: autoPlay,
     loop: loop,
     muted: muted // poster={thumbnailUrl}
@@ -178,20 +224,23 @@ var Video = function Video(_ref) {
     preload: preload,
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
-    tabIndex: focusable ? '0' : '-1'
-  }, hasFiles ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("source", {
-    src: files.webm.url,
-    type: "video/webm"
-  }), /*#__PURE__*/React__default['default'].createElement("source", {
-    src: files.h264.url,
-    type: "video/mp4"
-  })) : null));
+    tabIndex: focusable ? '0' : '-1',
+    className: styles.video
+  }, (sourceFiles || []).map(function (_ref7) {
+    var sourceUrl = _ref7.url,
+        sourceMime = _ref7.mime;
+    return /*#__PURE__*/React__default["default"].createElement("source", {
+      key: "".concat(sourceUrl, "-").concat(sourceMime),
+      src: sourceUrl,
+      type: sourceMime
+    });
+  })));
 };
 
 Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
-var Video$1 = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default['default'].createElement(Video, Object.assign({
+var Video$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default["default"].createElement(Video, Object.assign({
     apiRef: ref
   }, props));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.2.327",
+    "version": "0.2.353",
     "description": "",
     "keywords": [
         "javascript"
@@ -40,21 +40,21 @@
         "prepare": "../../scripts/prepare-package.sh"
     },
     "devDependencies": {
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0"
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0"
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.2.327",
-        "@micromag/element-closed-captions": "^0.2.327",
-        "@micromag/element-media-controls": "^0.2.327",
+        "@micromag/core": "^0.2.353",
+        "@micromag/element-closed-captions": "^0.2.353",
+        "@micromag/element-media-controls": "^0.2.353",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2051023f216b19695acf83053ef3bdca24f96932"
+    "gitHead": "2fa5d38251980ca054d584adcb07e9fbe703299f"
 }