@micromag/element-video 0.3.251 → 0.3.252

package/es/index.js

@@ -6,8 +6,8 @@ import isFunction from 'lodash/isFunction';
 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, useMediaLoad, useProgressSteps } from '@micromag/core/hooks';
-import { getMediaFilesAsArray } from '@micromag/core/utils';
+import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
+import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
@@ -40,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,
 
 };
@@ -71,7 +70,6 @@ var defaultProps = {
   onSuspend: null,
   onSuspended: null,
   focusable: true,
-  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
 };
 
@@ -104,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 || {},
@@ -140,29 +137,21 @@ var Video = function Video(_ref) {
   var ready = useMediaReady(_ref9.current, {
     id: mediaUrl
   });
-  useMediaLoad(_ref9.current, {
-    preload: preload,
-    shouldLoad: shouldLoad
-  }); // 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) !== '';
-    });
+    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 +166,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;
@@ -240,31 +229,15 @@ var Video = function Video(_ref) {
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
-  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]); // Ensure load if preload value change over time
-
-  var firstPreloadRef = useRef(preload);
-  var firstShouldLoadRef = useRef(shouldLoad);
-  var hasLoadedRef = useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
-  useEffect(function () {
-    var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-    var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad;
-    var preloadHasChanged = firstPreloadRef.current !== preload;
-    var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
-
-    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
-      hasLoadedRef.current = true;
-      element.load();
-    }
-  }, [shouldLoad, preload]);
+  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]);
   useEffect(function () {
     if (ready && onReady !== null) {
       onReady();
     }
   }, [ready, onReady]);
   useEffect(function () {
-    var _ref$current3 = _ref9.current,
-        element = _ref$current3 === void 0 ? null : _ref$current3;
+    var _ref$current2 = _ref9.current,
+        element = _ref$current2 === void 0 ? null : _ref$current2;
 
     if (element === null) {
       return;

package/lib/index.js

@@ -52,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,
 
 };
@@ -83,7 +82,6 @@ var defaultProps = {
   onSuspend: null,
   onSuspended: null,
   focusable: true,
-  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
 };
 
@@ -116,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 || {},
@@ -152,29 +149,21 @@ var Video = function Video(_ref) {
   var ready = hooks.useMediaReady(_ref9.current, {
     id: mediaUrl
   });
-  hooks.useMediaLoad(_ref9.current, {
-    preload: preload,
-    shouldLoad: shouldLoad
-  }); // Get source files with supported mimes
-
   var sourceFiles = React.useMemo(function () {
     if (filesArray.length === 0) {
       return null;
     }
 
-    var supportVideo = document.createElement('video');
-    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 +178,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;
@@ -252,31 +241,15 @@ var Video = function Video(_ref) {
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
-  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]); // Ensure load if preload value change over time
-
-  var firstPreloadRef = React.useRef(preload);
-  var firstShouldLoadRef = React.useRef(shouldLoad);
-  var hasLoadedRef = React.useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
-  React.useEffect(function () {
-    var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-    var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad;
-    var preloadHasChanged = firstPreloadRef.current !== preload;
-    var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
-
-    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
-      hasLoadedRef.current = true;
-      element.load();
-    }
-  }, [shouldLoad, preload]);
+  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]);
   React.useEffect(function () {
     if (ready && onReady !== null) {
       onReady();
     }
   }, [ready, onReady]);
   React.useEffect(function () {
-    var _ref$current3 = _ref9.current,
-        element = _ref$current3 === void 0 ? null : _ref$current3;
+    var _ref$current2 = _ref9.current,
+        element = _ref$current2 === void 0 ? null : _ref$current2;
 
     if (element === null) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.251",
+    "version": "0.3.252",
     "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.251",
-        "@micromag/element-closed-captions": "^0.3.251",
-        "@micromag/element-media-controls": "^0.3.251",
+        "@micromag/core": "^0.3.252",
+        "@micromag/element-closed-captions": "^0.3.252",
+        "@micromag/element-media-controls": "^0.3.252",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -64,5 +64,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
+    "gitHead": "67a8b8144a40086a6dfd98c9eb8c4b6b8ebb05b0"
 }