@micromag/element-video 0.3.243 → 0.3.251

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, useProgressSteps } from '@micromag/core/hooks';
-import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
+import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaLoad, useProgressSteps } from '@micromag/core/hooks';
+import { getMediaFilesAsArray } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
@@ -40,6 +40,7 @@ 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,
 
 };
@@ -70,6 +71,7 @@ var defaultProps = {
   onSuspend: null,
   onSuspended: null,
   focusable: true,
+  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
 };
 
@@ -102,6 +104,7 @@ var Video = function Video(_ref) {
       customOnSuspend = _ref.onSuspend,
       onSuspended = _ref.onSuspended,
       focusable = _ref.focusable,
+      supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
 
   var _ref2 = media || {},
@@ -137,21 +140,29 @@ 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 supportedMimes = getVideoSupportedMimes();
+    var supportVideo = document.createElement('video');
+    var finalSupportedMimes = supportedMimes.filter(function (mime) {
+      return supportVideo.canPlayType(mime) !== '';
+    });
 
-    if (supportedMimes.length === 0) {
+    if (finalSupportedMimes.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 supportedMimes.indexOf(mime) !== -1;
+      return finalSupportedMimes.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;
@@ -166,7 +177,7 @@ var Video = function Video(_ref) {
     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, supportedMimes]); // @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;
@@ -229,15 +240,31 @@ var Video = function Video(_ref) {
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
-  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]);
+  }, [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]);
   useEffect(function () {
     if (ready && onReady !== null) {
       onReady();
     }
   }, [ready, onReady]);
   useEffect(function () {
-    var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
+    var _ref$current3 = _ref9.current,
+        element = _ref$current3 === void 0 ? null : _ref$current3;
 
     if (element === null) {
       return;

package/lib/index.js

@@ -52,6 +52,7 @@ 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,
 
 };
@@ -82,6 +83,7 @@ var defaultProps = {
   onSuspend: null,
   onSuspended: null,
   focusable: true,
+  supportedMimes: ['video/mp4', 'video/webm', 'video/ogg'],
   withPoster: false
 };
 
@@ -114,6 +116,7 @@ var Video = function Video(_ref) {
       customOnSuspend = _ref.onSuspend,
       onSuspended = _ref.onSuspended,
       focusable = _ref.focusable,
+      supportedMimes = _ref.supportedMimes,
       withPoster = _ref.withPoster;
 
   var _ref2 = media || {},
@@ -149,21 +152,29 @@ 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 supportedMimes = utils.getVideoSupportedMimes();
+    var supportVideo = document.createElement('video');
+    var finalSupportedMimes = supportedMimes.filter(function (mime) {
+      return supportVideo.canPlayType(mime) !== '';
+    });
 
-    if (supportedMimes.length === 0) {
+    if (finalSupportedMimes.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 supportedMimes.indexOf(mime) !== -1;
+      return finalSupportedMimes.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;
@@ -178,7 +189,7 @@ var Video = function Video(_ref) {
     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, supportedMimes]); // @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;
@@ -241,15 +252,31 @@ var Video = function Video(_ref) {
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
-  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]);
+  }, [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]);
   React.useEffect(function () {
     if (ready && onReady !== null) {
       onReady();
     }
   }, [ready, onReady]);
   React.useEffect(function () {
-    var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
+    var _ref$current3 = _ref9.current,
+        element = _ref$current3 === void 0 ? null : _ref$current3;
 
     if (element === null) {
       return;

package/package.json

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