@micromag/element-video 0.3.436 → 0.3.444

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +16 -13
  3. package/lib/index.js +16 -13
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-video-container .micromag-element-video-spinner,.micromag-element-video-container.micromag-element-video-withSize .micromag-element-video-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-element-video-container{position:relative}.micromag-element-video-container .micromag-element-video-video{display:block;width:100%}.micromag-element-video-container .micromag-element-video-spinner{height:32px;left:50%;margin-left:-16px;margin-top:-16px;top:50%;width:32px}
1
+ .micromag-element-video-container .micromag-element-video-spinner,.micromag-element-video-container.micromag-element-video-withSize .micromag-element-video-media{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-element-video-container{position:relative}.micromag-element-video-container .micromag-element-video-media{display:block;width:100%}.micromag-element-video-container .micromag-element-video-spinner{height:32px;left:50%;margin-left:-16px;margin-top:-16px;top:50%;width:32px}
package/es/index.js CHANGED
@@ -10,7 +10,7 @@ import { Spinner } from '@micromag/core/components';
10
10
  import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
11
11
  import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
12
12
 
13
- var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video","spinner":"micromag-element-video-spinner"};
13
+ var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","media":"micromag-element-video-media","spinner":"micromag-element-video-spinner"};
14
14
 
15
15
  var propTypes = {
16
16
  media: PropTypes.videoMedia,
@@ -30,6 +30,7 @@ var propTypes = {
30
30
  shouldLoad: PropTypes$1.bool,
31
31
  withoutCors: PropTypes$1.bool,
32
32
  className: PropTypes$1.string,
33
+ innerClassName: PropTypes$1.string,
33
34
  onReady: PropTypes$1.func,
34
35
  onPlay: PropTypes$1.func,
35
36
  onPause: PropTypes$1.func,
@@ -61,6 +62,7 @@ var defaultProps = {
61
62
  shouldLoad: true,
62
63
  withoutCors: false,
63
64
  className: null,
65
+ innerClassName: null,
64
66
  onReady: null,
65
67
  onPlay: null,
66
68
  onPause: null,
@@ -91,6 +93,7 @@ var Video = function Video(_ref) {
91
93
  shouldLoad = _ref.shouldLoad,
92
94
  withoutCors = _ref.withoutCors,
93
95
  className = _ref.className,
96
+ innerClassName = _ref.innerClassName,
94
97
  onReady = _ref.onReady,
95
98
  customOnPlay = _ref.onPlay,
96
99
  onPause = _ref.onPause,
@@ -124,19 +127,19 @@ var Video = function Video(_ref) {
124
127
  return getMediaFilesAsArray(files);
125
128
  }, [files]);
126
129
  var finalThumbnail = useMediaThumbnail(media, thumbnail);
127
- var _ref9 = useRef(null);
128
- var currentTime = useMediaCurrentTime(_ref9.current, {
130
+ var _ref11 = useRef(null);
131
+ var currentTime = useMediaCurrentTime(_ref11.current, {
129
132
  id: mediaUrl,
130
133
  disabled: paused || onProgressStep === null
131
134
  });
132
- var duration = useMediaDuration(_ref9.current, {
135
+ var duration = useMediaDuration(_ref11.current, {
133
136
  id: mediaUrl
134
137
  });
135
138
  var _useState = useState(false),
136
139
  _useState2 = _slicedToArray(_useState, 2),
137
140
  showLoading = _useState2[0],
138
141
  setShowLoading = _useState2[1];
139
- var ready = useMediaReady(_ref9.current, {
142
+ var ready = useMediaReady(_ref11.current, {
140
143
  id: mediaUrl
141
144
  });
142
145
  useEffect(function () {
@@ -195,7 +198,7 @@ var Video = function Video(_ref) {
195
198
  }
196
199
  }, [duration, customOnDurationChange]);
197
200
  var onVolumeChange = useCallback(function () {
198
- var _ref$current = _ref9.current,
201
+ var _ref$current = _ref11.current,
199
202
  element = _ref$current === void 0 ? null : _ref$current;
200
203
  if (element === null) {
201
204
  return;
@@ -240,7 +243,7 @@ var Video = function Video(_ref) {
240
243
  }
241
244
  }, [ready, onReady]);
242
245
  useEffect(function () {
243
- var _ref$current2 = _ref9.current,
246
+ var _ref$current2 = _ref11.current,
244
247
  element = _ref$current2 === void 0 ? null : _ref$current2;
245
248
  if (element === null) {
246
249
  return;
@@ -267,11 +270,11 @@ var Video = function Video(_ref) {
267
270
  }, isImageWithoutSourceFile && shouldLoad ? /*#__PURE__*/React.createElement("img", {
268
271
  src: mediaUrl,
269
272
  alt: description,
270
- className: styles.video
273
+ className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)])
271
274
  }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
272
275
  key: mediaUrl,
273
276
  ref: function ref(newRef) {
274
- _ref9.current = newRef;
277
+ _ref11.current = newRef;
275
278
  if (mediaRef !== null && isFunction(mediaRef)) {
276
279
  mediaRef(newRef);
277
280
  } else if (mediaRef !== null) {
@@ -288,7 +291,7 @@ var Video = function Video(_ref) {
288
291
  crossOrigin: withoutCors ? 'anonymous' : null,
289
292
  disablePictureInPicture: disablePictureInPicture,
290
293
  tabIndex: focusable ? '0' : '-1',
291
- className: classNames(styles.video),
294
+ className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)]),
292
295
  onPlay: onPlay,
293
296
  onPlaying: onPlaying,
294
297
  onPause: onPause,
@@ -299,9 +302,9 @@ var Video = function Video(_ref) {
299
302
  onSuspend: onSuspend,
300
303
  "data-has-audio": hasAudio,
301
304
  "data-is-suspended": isSuspended
302
- }, (sourceFiles || []).map(function (_ref8) {
303
- var sourceUrl = _ref8.url,
304
- sourceMime = _ref8.mime;
305
+ }, (sourceFiles || []).map(function (_ref10) {
306
+ var sourceUrl = _ref10.url,
307
+ sourceMime = _ref10.mime;
305
308
  return /*#__PURE__*/React.createElement("source", {
306
309
  key: "".concat(sourceUrl, "-").concat(sourceMime),
307
310
  src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.1") : null,
package/lib/index.js CHANGED
@@ -12,7 +12,7 @@ var components = require('@micromag/core/components');
12
12
  var hooks = require('@micromag/core/hooks');
13
13
  var utils = require('@micromag/core/utils');
14
14
 
15
- var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video","spinner":"micromag-element-video-spinner"};
15
+ var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","media":"micromag-element-video-media","spinner":"micromag-element-video-spinner"};
16
16
 
17
17
  var propTypes = {
18
18
  media: core.PropTypes.videoMedia,
@@ -32,6 +32,7 @@ var propTypes = {
32
32
  shouldLoad: PropTypes.bool,
33
33
  withoutCors: PropTypes.bool,
34
34
  className: PropTypes.string,
35
+ innerClassName: PropTypes.string,
35
36
  onReady: PropTypes.func,
36
37
  onPlay: PropTypes.func,
37
38
  onPause: PropTypes.func,
@@ -63,6 +64,7 @@ var defaultProps = {
63
64
  shouldLoad: true,
64
65
  withoutCors: false,
65
66
  className: null,
67
+ innerClassName: null,
66
68
  onReady: null,
67
69
  onPlay: null,
68
70
  onPause: null,
@@ -93,6 +95,7 @@ var Video = function Video(_ref) {
93
95
  shouldLoad = _ref.shouldLoad,
94
96
  withoutCors = _ref.withoutCors,
95
97
  className = _ref.className,
98
+ innerClassName = _ref.innerClassName,
96
99
  onReady = _ref.onReady,
97
100
  customOnPlay = _ref.onPlay,
98
101
  onPause = _ref.onPause,
@@ -126,19 +129,19 @@ var Video = function Video(_ref) {
126
129
  return utils.getMediaFilesAsArray(files);
127
130
  }, [files]);
128
131
  var finalThumbnail = hooks.useMediaThumbnail(media, thumbnail);
129
- var _ref9 = React.useRef(null);
130
- var currentTime = hooks.useMediaCurrentTime(_ref9.current, {
132
+ var _ref11 = React.useRef(null);
133
+ var currentTime = hooks.useMediaCurrentTime(_ref11.current, {
131
134
  id: mediaUrl,
132
135
  disabled: paused || onProgressStep === null
133
136
  });
134
- var duration = hooks.useMediaDuration(_ref9.current, {
137
+ var duration = hooks.useMediaDuration(_ref11.current, {
135
138
  id: mediaUrl
136
139
  });
137
140
  var _useState = React.useState(false),
138
141
  _useState2 = _slicedToArray(_useState, 2),
139
142
  showLoading = _useState2[0],
140
143
  setShowLoading = _useState2[1];
141
- var ready = hooks.useMediaReady(_ref9.current, {
144
+ var ready = hooks.useMediaReady(_ref11.current, {
142
145
  id: mediaUrl
143
146
  });
144
147
  React.useEffect(function () {
@@ -197,7 +200,7 @@ var Video = function Video(_ref) {
197
200
  }
198
201
  }, [duration, customOnDurationChange]);
199
202
  var onVolumeChange = React.useCallback(function () {
200
- var _ref$current = _ref9.current,
203
+ var _ref$current = _ref11.current,
201
204
  element = _ref$current === void 0 ? null : _ref$current;
202
205
  if (element === null) {
203
206
  return;
@@ -242,7 +245,7 @@ var Video = function Video(_ref) {
242
245
  }
243
246
  }, [ready, onReady]);
244
247
  React.useEffect(function () {
245
- var _ref$current2 = _ref9.current,
248
+ var _ref$current2 = _ref11.current,
246
249
  element = _ref$current2 === void 0 ? null : _ref$current2;
247
250
  if (element === null) {
248
251
  return;
@@ -269,11 +272,11 @@ var Video = function Video(_ref) {
269
272
  }, isImageWithoutSourceFile && shouldLoad ? /*#__PURE__*/React.createElement("img", {
270
273
  src: mediaUrl,
271
274
  alt: description,
272
- className: styles.video
275
+ className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)])
273
276
  }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
274
277
  key: mediaUrl,
275
278
  ref: function ref(newRef) {
276
- _ref9.current = newRef;
279
+ _ref11.current = newRef;
277
280
  if (mediaRef !== null && isFunction(mediaRef)) {
278
281
  mediaRef(newRef);
279
282
  } else if (mediaRef !== null) {
@@ -290,7 +293,7 @@ var Video = function Video(_ref) {
290
293
  crossOrigin: withoutCors ? 'anonymous' : null,
291
294
  disablePictureInPicture: disablePictureInPicture,
292
295
  tabIndex: focusable ? '0' : '-1',
293
- className: classNames(styles.video),
296
+ className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)]),
294
297
  onPlay: onPlay,
295
298
  onPlaying: onPlaying,
296
299
  onPause: onPause,
@@ -301,9 +304,9 @@ var Video = function Video(_ref) {
301
304
  onSuspend: onSuspend,
302
305
  "data-has-audio": hasAudio,
303
306
  "data-is-suspended": isSuspended
304
- }, (sourceFiles || []).map(function (_ref8) {
305
- var sourceUrl = _ref8.url,
306
- sourceMime = _ref8.mime;
307
+ }, (sourceFiles || []).map(function (_ref10) {
308
+ var sourceUrl = _ref10.url,
309
+ sourceMime = _ref10.mime;
307
310
  return /*#__PURE__*/React.createElement("source", {
308
311
  key: "".concat(sourceUrl, "-").concat(sourceMime),
309
312
  src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.1") : null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-video",
3
- "version": "0.3.436",
3
+ "version": "0.3.444",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -61,8 +61,8 @@
61
61
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
62
62
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
63
63
  "@fortawesome/react-fontawesome": "^0.1.13",
64
- "@micromag/core": "^0.3.436",
65
- "@micromag/element-closed-captions": "^0.3.436",
64
+ "@micromag/core": "^0.3.444",
65
+ "@micromag/element-closed-captions": "^0.3.444",
66
66
  "classnames": "^2.2.6",
67
67
  "lodash": "^4.17.21",
68
68
  "prop-types": "^15.7.2",
@@ -73,5 +73,5 @@
73
73
  "access": "public",
74
74
  "registry": "https://registry.npmjs.org/"
75
75
  },
76
- "gitHead": "75dc79aa33e0bb347135acea40eaef42351e2dd4"
76
+ "gitHead": "40bfd80ccd7a777ffebb0a6d9006c8ebad6a22bd"
77
77
  }