@micromag/element-video 0.3.217 → 0.3.218

package/es/index.js

@@ -7,11 +7,10 @@ import PropTypes$1 from 'prop-types';
 import React, { useMemo, useRef, useEffect, useCallback, useState } from 'react';
 import { PropTypes } from '@micromag/core';
 import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
-import { getMediaFilesAsArray } from '@micromag/core/utils';
+import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
-var supportVideo = document.createElement('video');
 var propTypes = {
   media: PropTypes.videoMedia,
   thumbnail: PropTypes$1.oneOf([PropTypes$1.string, PropTypes.imageMedia]),
@@ -41,7 +40,6 @@ var propTypes = {
   onSuspend: PropTypes$1.func,
   onSuspended: PropTypes$1.func,
   focusable: PropTypes$1.bool,
-  supportedMimes: PropTypes$1.arrayOf(PropTypes$1.string),
   withPoster: PropTypes$1.bool // onPosterLoaded: PropTypes.func,
 
 };
@@ -72,7 +70,6 @@ var defaultProps = {
   onSuspend: null,
   onSuspended: null,
   focusable: true,
-  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
 };
 
@@ -105,7 +102,6 @@ var Video = function Video(_ref) {
       customOnSuspend = _ref.onSuspend,
       onSuspended = _ref.onSuspended,
       focusable = _ref.focusable,
-      supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
 
   var _ref2 = media || {},
@@ -151,18 +147,16 @@ var Video = function Video(_ref) {
       return null;
     }
 
-    var finalSupportedMimes = supportedMimes.filter(function (mime) {
-      return supportVideo.canPlayType(mime) !== '';
-    });
+    var supportedMimes = getVideoSupportedMimes();
 
-    if (finalSupportedMimes.length === 0) {
+    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;
-      return finalSupportedMimes.indexOf(mime) !== -1;
+      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;
@@ -177,7 +171,7 @@ var Video = function Video(_ref) {
     return Object.keys(sourceFilesMap).map(function (mime) {
       return sourceFilesMap[mime];
     });
-  }, [filesArray, supportedMimes]); // @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;

package/lib/index.js

@@ -23,7 +23,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
-var supportVideo = document.createElement('video');
 var propTypes = {
   media: core.PropTypes.videoMedia,
   thumbnail: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, core.PropTypes.imageMedia]),
@@ -53,7 +52,6 @@ var propTypes = {
   onSuspend: PropTypes__default["default"].func,
   onSuspended: PropTypes__default["default"].func,
   focusable: PropTypes__default["default"].bool,
-  supportedMimes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
   withPoster: PropTypes__default["default"].bool // onPosterLoaded: PropTypes.func,
 
 };
@@ -84,7 +82,6 @@ var defaultProps = {
   onSuspend: null,
   onSuspended: null,
   focusable: true,
-  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
 };
 
@@ -117,7 +114,6 @@ var Video = function Video(_ref) {
       customOnSuspend = _ref.onSuspend,
       onSuspended = _ref.onSuspended,
       focusable = _ref.focusable,
-      supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
 
   var _ref2 = media || {},
@@ -163,18 +159,16 @@ var Video = function Video(_ref) {
       return null;
     }
 
-    var finalSupportedMimes = supportedMimes.filter(function (mime) {
-      return supportVideo.canPlayType(mime) !== '';
-    });
+    var supportedMimes = utils.getVideoSupportedMimes();
 
-    if (finalSupportedMimes.length === 0) {
+    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;
-      return finalSupportedMimes.indexOf(mime) !== -1;
+      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;
@@ -189,7 +183,7 @@ var Video = function Video(_ref) {
     return Object.keys(sourceFilesMap).map(function (mime) {
       return sourceFilesMap[mime];
     });
-  }, [filesArray, supportedMimes]); // @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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.217",
+    "version": "0.3.218",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,9 +52,9 @@
         "@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.217",
-        "@micromag/element-closed-captions": "^0.3.217",
-        "@micromag/element-media-controls": "^0.3.217",
+        "@micromag/core": "^0.3.218",
+        "@micromag/element-closed-captions": "^0.3.218",
+        "@micromag/element-media-controls": "^0.3.218",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -64,5 +64,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2750ca00051185b241ed98606700aab9d596326c"
+    "gitHead": "ae1a2d883a94e5d15c2d011bf6e7e23574b6b8a1"
 }