@micromag/element-video 0.3.676 → 0.3.682

package/es/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import Hls from 'hls.js';
@@ -140,19 +139,19 @@ var Video = function Video(_ref) {
     return getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = useMediaThumbnail(media, thumbnail);
-  var _ref16 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref16.current, {
+  var _ref17 = useRef(null);
+  var currentTime = useMediaCurrentTime(_ref17.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
   });
-  var duration = useMediaDuration(_ref16.current, {
+  var duration = useMediaDuration(_ref17.current, {
     id: mediaUrl
   });
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showLoading = _useState2[0],
     setShowLoading = _useState2[1];
-  var ready = useMediaReady(_ref16.current, {
+  var ready = useMediaReady(_ref17.current, {
     id: mediaUrl
   });
   useEffect(function () {
@@ -214,7 +213,7 @@ var Video = function Video(_ref) {
     hls.on(Hls.Events.LEVEL_SWITCHED, function (_, _ref5) {
       var level = _ref5.level;
       if (onQualityLevelChange !== null) {
-        onQualityLevelChange(level, _ref16.current);
+        onQualityLevelChange(level, _ref17.current);
       }
     });
     hls.on(Hls.Events.ERROR, function (_, _ref6) {
@@ -260,8 +259,8 @@ var Video = function Video(_ref) {
 
   // attach hls.js when the <video> ref or the hls.js instance is ready
   useEffect(function () {
-    if (hlsJs !== null && _ref16.current !== null) {
-      hlsJs.attachMedia(_ref16.current);
+    if (hlsJs !== null && _ref17.current !== null) {
+      hlsJs.attachMedia(_ref17.current);
       // if (onQualityLevelChange !== null) {
       //     onQualityLevelChange(hlsJs.currentLevel, ref.current);
       // }
@@ -271,7 +270,7 @@ var Video = function Video(_ref) {
         hlsJs.detachMedia();
       }
     };
-  }, [hlsJs, _ref16.current]);
+  }, [hlsJs, _ref17.current]);
 
   // cleanup hls.js instance when it is no longer needed
   useEffect(function () {
@@ -290,7 +289,7 @@ var Video = function Video(_ref) {
     if (hlsJs !== null) {
       var qualityLevel = qualityStartLevel !== null ? qualityStartLevel : -1;
       hlsJs.startLevel = qualityLevel;
-      if (_ref16.current !== null && _ref16.current.paused) {
+      if (_ref17.current !== null && _ref17.current.paused) {
         hlsJs.currentLevel = qualityLevel;
         hlsJs.nextLevel = -1; // force auto quality selection for the next fragment
       }
@@ -302,40 +301,39 @@ var Video = function Video(_ref) {
     }
     var supportedMimes = getVideoSupportedMimes();
     if (supportedMimes.length === 0) {
-      return null;
+      supportedMimes = ['video/mp4', 'video/webm'];
     }
-    var sourceFilesMap = filesArray.filter(function (file) {
+    var supportedFiles = filesArray.filter(function (file) {
       var fileHandle = file.handle || file.id;
       var _file$mime = file.mime,
         mime = _file$mime === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime;
       return supportedMimes.indexOf(mime) !== -1;
-    }).reduce(function (filesMap, file) {
+    });
+    var supportedFilesWithoutOriginal = supportedFiles.filter(function (file) {
       var fileHandle = file.handle || file.id;
-      var _file$mime2 = file.mime,
-        mime = _file$mime2 === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime2;
-      var currentMimeFile = filesMap[mime] || null;
-      var _ref9 = currentMimeFile || {},
-        _ref9$id = _ref9.id,
-        currentId = _ref9$id === void 0 ? null : _ref9$id,
-        _ref9$handle = _ref9.handle,
-        currentHandle = _ref9$handle === void 0 ? null : _ref9$handle;
-      var currentMimeHandle = currentHandle || currentId;
-      return currentMimeFile === null || currentMimeHandle === 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
-    }, {});
-    return Object.keys(sourceFilesMap).map(function (mime) {
-      return sourceFilesMap[mime];
+      return fileHandle !== 'original';
+    });
+    return (supportedFilesWithoutOriginal.length > 0 ? supportedFilesWithoutOriginal : supportedFiles).sort(function (_ref9, _ref10) {
+      var _ref9$size = _ref9.size,
+        a = _ref9$size === void 0 ? '' : _ref9$size;
+      var _ref10$size = _ref10.size,
+        b = _ref10$size === void 0 ? '' : _ref10$size;
+      if (a === b) {
+        return 0;
+      }
+      return a > b ? 1 : -1;
     });
   }, [filesArray, hlsSources]);
 
   // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref10 = filesArray.find(function (_ref11) {
-      var handle = _ref11.handle;
+  var _ref11 = filesArray.find(function (_ref12) {
+      var handle = _ref12.handle;
       return handle === 'original';
     }) || {},
-    _ref10$type = _ref10.type,
-    originalType = _ref10$type === void 0 ? null : _ref10$type,
-    _ref10$mime = _ref10.mime,
-    originalMime = _ref10$mime === void 0 ? mediaMime : _ref10$mime;
+    _ref11$type = _ref11.type,
+    originalType = _ref11$type === void 0 ? null : _ref11$type,
+    _ref11$mime = _ref11.mime,
+    originalMime = _ref11$mime === void 0 ? mediaMime : _ref11$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;
@@ -345,7 +343,7 @@ var Video = function Video(_ref) {
     }
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref16.current,
+    var _ref$current = _ref17.current,
       element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
@@ -390,7 +388,7 @@ var Video = function Video(_ref) {
     }
   }, [ready, onReady]);
   useEffect(function () {
-    var _ref$current2 = _ref16.current,
+    var _ref$current2 = _ref17.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
@@ -427,7 +425,7 @@ var Video = function Video(_ref) {
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: function ref(newRef) {
-      _ref16.current = newRef;
+      _ref17.current = newRef;
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -458,9 +456,9 @@ var Video = function Video(_ref) {
     "data-hls": hlsJs !== null,
     "data-ts-offset": hlsTsOffset,
     "aria-hidden": true
-  }, (shouldLoad ? sourceFiles || [] : []).map(function (_ref15) {
-    var sourceUrl = _ref15.url,
-      sourceMime = _ref15.mime;
+  }, (shouldLoad ? sourceFiles || [] : []).map(function (_ref16) {
+    var sourceUrl = _ref16.url,
+      sourceMime = _ref16.mime;
     return /*#__PURE__*/React.createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.001") : null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.676",
+    "version": "0.3.682",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,8 +59,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.676",
-        "@micromag/element-closed-captions": "^0.3.676",
+        "@micromag/core": "^0.3.679",
+        "@micromag/element-closed-captions": "^0.3.679",
         "classnames": "^2.2.6",
         "hls.js": "^1.5.15",
         "lodash": "^4.17.21",
@@ -72,5 +72,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "941f3a10c4de917c02ca81f39e6d15a85094e289"
+    "gitHead": "ff77a57d44913b0e5afa373445ae9f014799e183"
 }