@micromag/element-video 0.3.36 → 0.3.37

package/es/index.js

@@ -1,12 +1,14 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import classNames from 'classnames';
+import 'lodash';
+import PropTypes$1 from 'prop-types';
+import React, { useMemo, useEffect, useRef } from 'react';
 import { PropTypes } from '@micromag/core';
 import { useUserInteracted } from '@micromag/core/contexts';
 import { useMediaApi } from '@micromag/core/hooks';
 import { getMediaFilesAsArray } from '@micromag/core/utils';
-import classNames from 'classnames';
-import PropTypes$1 from 'prop-types';
-import React, { useMemo, useEffect, useRef } from 'react';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
@@ -65,7 +67,7 @@ var defaultProps = {
 };
 
 var Video = function Video(_ref) {
-  var _ref6;
+  var _ref7;
 
   var media = _ref.media,
       width = _ref.width,
@@ -117,21 +119,39 @@ var Video = function Video(_ref) {
     var finalSupportedMimes = supportedMimes.filter(function (mime) {
       return supportVideo.canPlayType(mime) !== '';
     });
-    return finalSupportedMimes.length > 0 ? filesArray.filter(function (file) {
+
+    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 finalSupportedMimes.indexOf(mime) !== -1;
-    }, null) : null;
+    }).reduce(function (filesMap, file) {
+      var _file$mime2 = file.mime,
+          mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
+      var currentMimeFile = filesMap[mime] || null;
+
+      var _ref4 = currentMimeFile || {},
+          _ref4$id = _ref4.id,
+          currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
+
+      return currentMimeFile === null || currentMimeId === 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
+    }, {});
+    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
 
-  var _ref4 = filesArray.find(function (_ref5) {
-    var handle = _ref5.handle;
+  var _ref5 = filesArray.find(function (_ref6) {
+    var handle = _ref6.handle;
     return handle === '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;
+      _ref5$type = _ref5.type,
+      originalType = _ref5$type === void 0 ? null : _ref5$type,
+      _ref5$mime = _ref5.mime,
+      originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
 
   var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
@@ -208,7 +228,7 @@ var Video = function Video(_ref) {
     }
   }, [preload]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.paused, !playing), _defineProperty(_ref6, styles.withSize, withSize), _ref6)]),
+    className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.paused, !playing), _defineProperty(_ref7, styles.withSize, withSize), _ref7)]),
     style: withSize ? {
       width: width,
       height: height
@@ -230,9 +250,9 @@ var Video = function Video(_ref) {
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',
     className: styles.video
-  }, (sourceFiles || []).map(function (_ref7) {
-    var sourceUrl = _ref7.url,
-        sourceMime = _ref7.mime;
+  }, (sourceFiles || []).map(function (_ref8) {
+    var sourceUrl = _ref8.url,
+        sourceMime = _ref8.mime;
     return /*#__PURE__*/React.createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl,

package/lib/index.js

@@ -1,19 +1,22 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var classNames = require('classnames');
+require('lodash');
+var PropTypes = require('prop-types');
+var React = require('react');
 var core = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -75,7 +78,7 @@ var defaultProps = {
 };
 
 var Video = function Video(_ref) {
-  var _ref6;
+  var _ref7;
 
   var media = _ref.media,
       width = _ref.width,
@@ -127,21 +130,39 @@ var Video = function Video(_ref) {
     var finalSupportedMimes = supportedMimes.filter(function (mime) {
       return supportVideo.canPlayType(mime) !== '';
     });
-    return finalSupportedMimes.length > 0 ? filesArray.filter(function (file) {
+
+    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 finalSupportedMimes.indexOf(mime) !== -1;
-    }, null) : null;
+    }).reduce(function (filesMap, file) {
+      var _file$mime2 = file.mime,
+          mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
+      var currentMimeFile = filesMap[mime] || null;
+
+      var _ref4 = currentMimeFile || {},
+          _ref4$id = _ref4.id,
+          currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
+
+      return currentMimeFile === null || currentMimeId === 'original' ? _objectSpread__default["default"](_objectSpread__default["default"]({}, filesMap), {}, _defineProperty__default["default"]({}, mime, file)) : filesMap;
+    }, {});
+    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
 
-  var _ref4 = filesArray.find(function (_ref5) {
-    var handle = _ref5.handle;
+  var _ref5 = filesArray.find(function (_ref6) {
+    var handle = _ref6.handle;
     return handle === '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;
+      _ref5$type = _ref5.type,
+      originalType = _ref5$type === void 0 ? null : _ref5$type,
+      _ref5$mime = _ref5.mime,
+      originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
 
   var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
@@ -218,7 +239,7 @@ var Video = function Video(_ref) {
     }
   }, [preload]);
   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)]),
+    className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.paused, !playing), _defineProperty__default["default"](_ref7, styles.withSize, withSize), _ref7)]),
     style: withSize ? {
       width: width,
       height: height
@@ -240,9 +261,9 @@ var Video = function Video(_ref) {
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',
     className: styles.video
-  }, (sourceFiles || []).map(function (_ref7) {
-    var sourceUrl = _ref7.url,
-        sourceMime = _ref7.mime;
+  }, (sourceFiles || []).map(function (_ref8) {
+    var sourceUrl = _ref8.url,
+        sourceMime = _ref8.mime;
     return /*#__PURE__*/React__default["default"].createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.36",
+    "version": "0.3.37",
     "description": "",
     "keywords": [
         "javascript"
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3a430d587a82acb0bf94fe7f842c7f96707a98f4"
+    "gitHead": "81633b181d0ca4b962255ddeaed955346d29b2e9"
 }