@micromag/element-video 0.3.34 → 0.3.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.js +38 -18
  2. package/lib/index.js +40 -19
  3. package/package.json +5 -5
package/es/index.js CHANGED
@@ -1,12 +1,14 @@
1
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
1
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
2
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
+ import classNames from 'classnames';
5
+ import 'lodash';
6
+ import PropTypes$1 from 'prop-types';
7
+ import React, { useMemo, useEffect, useRef } from 'react';
3
8
  import { PropTypes } from '@micromag/core';
4
9
  import { useUserInteracted } from '@micromag/core/contexts';
5
10
  import { useMediaApi } from '@micromag/core/hooks';
6
11
  import { getMediaFilesAsArray } from '@micromag/core/utils';
7
- import classNames from 'classnames';
8
- import PropTypes$1 from 'prop-types';
9
- import React, { useMemo, useEffect, useRef } from 'react';
10
12
 
11
13
  var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
12
14
 
@@ -65,7 +67,7 @@ var defaultProps = {
65
67
  };
66
68
 
67
69
  var Video = function Video(_ref) {
68
- var _ref6;
70
+ var _ref7;
69
71
 
70
72
  var media = _ref.media,
71
73
  width = _ref.width,
@@ -117,21 +119,39 @@ var Video = function Video(_ref) {
117
119
  var finalSupportedMimes = supportedMimes.filter(function (mime) {
118
120
  return supportVideo.canPlayType(mime) !== '';
119
121
  });
120
- return finalSupportedMimes.length > 0 ? filesArray.filter(function (file) {
122
+
123
+ if (finalSupportedMimes.length === 0) {
124
+ return null;
125
+ }
126
+
127
+ var sourceFilesMap = filesArray.filter(function (file) {
121
128
  var _file$mime = file.mime,
122
129
  mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
123
130
  return finalSupportedMimes.indexOf(mime) !== -1;
124
- }, null) : null;
131
+ }).reduce(function (filesMap, file) {
132
+ var _file$mime2 = file.mime,
133
+ mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
134
+ var currentMimeFile = filesMap[mime] || null;
135
+
136
+ var _ref4 = currentMimeFile || {},
137
+ _ref4$id = _ref4.id,
138
+ currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
139
+
140
+ return currentMimeFile === null || currentMimeId === 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
141
+ }, {});
142
+ return Object.keys(sourceFilesMap).map(function (mime) {
143
+ return sourceFilesMap[mime];
144
+ });
125
145
  }, [filesArray, supportedMimes]); // @NOTE: Media is an animated image and doesn't have source files in video formats
126
146
 
127
- var _ref4 = filesArray.find(function (_ref5) {
128
- var handle = _ref5.handle;
147
+ var _ref5 = filesArray.find(function (_ref6) {
148
+ var handle = _ref6.handle;
129
149
  return handle === 'original';
130
150
  }) || {},
131
- _ref4$type = _ref4.type,
132
- originalType = _ref4$type === void 0 ? null : _ref4$type,
133
- _ref4$mime = _ref4.mime,
134
- originalMime = _ref4$mime === void 0 ? mediaMime : _ref4$mime;
151
+ _ref5$type = _ref5.type,
152
+ originalType = _ref5$type === void 0 ? null : _ref5$type,
153
+ _ref5$mime = _ref5.mime,
154
+ originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
135
155
 
136
156
  var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
137
157
  var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
@@ -139,7 +159,7 @@ var Video = function Video(_ref) {
139
159
  var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
140
160
 
141
161
  var _useMediaApi = useMediaApi({
142
- url: mediaUrl,
162
+ url: !isImageWithoutSourceFile ? mediaUrl : null,
143
163
  initialMuted: finalInitialMuted,
144
164
  onPlay: onPlay,
145
165
  onPause: onPause,
@@ -208,7 +228,7 @@ var Video = function Video(_ref) {
208
228
  }
209
229
  }, [preload]);
210
230
  return /*#__PURE__*/React.createElement("div", {
211
- className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.paused, !playing), _defineProperty(_ref6, styles.withSize, withSize), _ref6)]),
231
+ className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.paused, !playing), _defineProperty(_ref7, styles.withSize, withSize), _ref7)]),
212
232
  style: withSize ? {
213
233
  width: width,
214
234
  height: height
@@ -230,9 +250,9 @@ var Video = function Video(_ref) {
230
250
  crossOrigin: withoutCors ? 'anonymous' : null,
231
251
  tabIndex: focusable ? '0' : '-1',
232
252
  className: styles.video
233
- }, (sourceFiles || []).map(function (_ref7) {
234
- var sourceUrl = _ref7.url,
235
- sourceMime = _ref7.mime;
253
+ }, (sourceFiles || []).map(function (_ref8) {
254
+ var sourceUrl = _ref8.url,
255
+ sourceMime = _ref8.mime;
236
256
  return /*#__PURE__*/React.createElement("source", {
237
257
  key: "".concat(sourceUrl, "-").concat(sourceMime),
238
258
  src: sourceUrl,
package/lib/index.js CHANGED
@@ -1,19 +1,22 @@
1
1
  'use strict';
2
2
 
3
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
3
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
4
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
+ var classNames = require('classnames');
7
+ require('lodash');
8
+ var PropTypes = require('prop-types');
9
+ var React = require('react');
5
10
  var core = require('@micromag/core');
6
11
  var contexts = require('@micromag/core/contexts');
7
12
  var hooks = require('@micromag/core/hooks');
8
13
  var utils = require('@micromag/core/utils');
9
- var classNames = require('classnames');
10
- var PropTypes = require('prop-types');
11
- var React = require('react');
12
14
 
13
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
16
 
15
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
17
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
18
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
19
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
17
20
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
18
21
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
19
22
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -75,7 +78,7 @@ var defaultProps = {
75
78
  };
76
79
 
77
80
  var Video = function Video(_ref) {
78
- var _ref6;
81
+ var _ref7;
79
82
 
80
83
  var media = _ref.media,
81
84
  width = _ref.width,
@@ -127,21 +130,39 @@ var Video = function Video(_ref) {
127
130
  var finalSupportedMimes = supportedMimes.filter(function (mime) {
128
131
  return supportVideo.canPlayType(mime) !== '';
129
132
  });
130
- return finalSupportedMimes.length > 0 ? filesArray.filter(function (file) {
133
+
134
+ if (finalSupportedMimes.length === 0) {
135
+ return null;
136
+ }
137
+
138
+ var sourceFilesMap = filesArray.filter(function (file) {
131
139
  var _file$mime = file.mime,
132
140
  mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
133
141
  return finalSupportedMimes.indexOf(mime) !== -1;
134
- }, null) : null;
142
+ }).reduce(function (filesMap, file) {
143
+ var _file$mime2 = file.mime,
144
+ mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
145
+ var currentMimeFile = filesMap[mime] || null;
146
+
147
+ var _ref4 = currentMimeFile || {},
148
+ _ref4$id = _ref4.id,
149
+ currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
150
+
151
+ return currentMimeFile === null || currentMimeId === 'original' ? _objectSpread__default["default"](_objectSpread__default["default"]({}, filesMap), {}, _defineProperty__default["default"]({}, mime, file)) : filesMap;
152
+ }, {});
153
+ return Object.keys(sourceFilesMap).map(function (mime) {
154
+ return sourceFilesMap[mime];
155
+ });
135
156
  }, [filesArray, supportedMimes]); // @NOTE: Media is an animated image and doesn't have source files in video formats
136
157
 
137
- var _ref4 = filesArray.find(function (_ref5) {
138
- var handle = _ref5.handle;
158
+ var _ref5 = filesArray.find(function (_ref6) {
159
+ var handle = _ref6.handle;
139
160
  return handle === 'original';
140
161
  }) || {},
141
- _ref4$type = _ref4.type,
142
- originalType = _ref4$type === void 0 ? null : _ref4$type,
143
- _ref4$mime = _ref4.mime,
144
- originalMime = _ref4$mime === void 0 ? mediaMime : _ref4$mime;
162
+ _ref5$type = _ref5.type,
163
+ originalType = _ref5$type === void 0 ? null : _ref5$type,
164
+ _ref5$mime = _ref5.mime,
165
+ originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
145
166
 
146
167
  var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
147
168
  var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
@@ -149,7 +170,7 @@ var Video = function Video(_ref) {
149
170
  var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
150
171
 
151
172
  var _useMediaApi = hooks.useMediaApi({
152
- url: mediaUrl,
173
+ url: !isImageWithoutSourceFile ? mediaUrl : null,
153
174
  initialMuted: finalInitialMuted,
154
175
  onPlay: onPlay,
155
176
  onPause: onPause,
@@ -218,7 +239,7 @@ var Video = function Video(_ref) {
218
239
  }
219
240
  }, [preload]);
220
241
  return /*#__PURE__*/React__default["default"].createElement("div", {
221
- 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)]),
242
+ 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)]),
222
243
  style: withSize ? {
223
244
  width: width,
224
245
  height: height
@@ -240,9 +261,9 @@ var Video = function Video(_ref) {
240
261
  crossOrigin: withoutCors ? 'anonymous' : null,
241
262
  tabIndex: focusable ? '0' : '-1',
242
263
  className: styles.video
243
- }, (sourceFiles || []).map(function (_ref7) {
244
- var sourceUrl = _ref7.url,
245
- sourceMime = _ref7.mime;
264
+ }, (sourceFiles || []).map(function (_ref8) {
265
+ var sourceUrl = _ref8.url,
266
+ sourceMime = _ref8.mime;
246
267
  return /*#__PURE__*/React__default["default"].createElement("source", {
247
268
  key: "".concat(sourceUrl, "-").concat(sourceMime),
248
269
  src: sourceUrl,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-video",
3
- "version": "0.3.34",
3
+ "version": "0.3.37",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,9 +52,9 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.34",
56
- "@micromag/element-closed-captions": "^0.3.34",
57
- "@micromag/element-media-controls": "^0.3.34",
55
+ "@micromag/core": "^0.3.36",
56
+ "@micromag/element-closed-captions": "^0.3.36",
57
+ "@micromag/element-media-controls": "^0.3.36",
58
58
  "classnames": "^2.2.6",
59
59
  "prop-types": "^15.7.2",
60
60
  "react-intl": "^5.12.1",
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "f8332cb20e6c8cf2cbdba28fc965877684174b2f"
66
+ "gitHead": "81633b181d0ca4b962255ddeaed955346d29b2e9"
67
67
  }