@micromag/element-video 0.3.311 → 0.3.322

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-video-container.micromag-element-video-withSize .micromag-element-video-video{position:absolute;top:0;left:0;width:100%;height: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,.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}

package/es/index.js

@@ -1,15 +1,16 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 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 isFunction from 'lodash/isFunction';
 import PropTypes$1 from 'prop-types';
-import React, { useMemo, useRef, useEffect, useCallback, useState } from 'react';
+import React, { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import { PropTypes } from '@micromag/core';
+import { Spinner } from '@micromag/core/components';
 import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
 import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
 
-var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
+var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video","spinner":"micromag-element-video-spinner"};
 
 var propTypes = {
   media: PropTypes.videoMedia,
@@ -71,61 +72,54 @@ var defaultProps = {
   focusable: true,
   withPoster: false
 };
-
 var Video = function Video(_ref) {
   var _ref7;
-
   var media = _ref.media,
-      thumbnail = _ref.thumbnail,
-      width = _ref.width,
-      height = _ref.height,
-      mediaRef = _ref.mediaRef,
-      muted = _ref.muted,
-      autoPlay = _ref.autoPlay,
-      paused = _ref.paused,
-      loop = _ref.loop,
-      playsInline = _ref.playsInline,
-      preload = _ref.preload,
-      shouldLoad = _ref.shouldLoad,
-      withoutCors = _ref.withoutCors,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      customOnPlay = _ref.onPlay,
-      onPause = _ref.onPause,
-      onEnded = _ref.onEnded,
-      onSeeked = _ref.onSeeked,
-      onTimeUpdate = _ref.onTimeUpdate,
-      onProgressStep = _ref.onProgressStep,
-      customOnDurationChange = _ref.onDurationChange,
-      customOnVolumeChange = _ref.onVolumeChange,
-      customOnSuspend = _ref.onSuspend,
-      onSuspended = _ref.onSuspended,
-      focusable = _ref.focusable,
-      withPoster = _ref.withPoster;
-
+    thumbnail = _ref.thumbnail,
+    width = _ref.width,
+    height = _ref.height,
+    mediaRef = _ref.mediaRef,
+    muted = _ref.muted,
+    autoPlay = _ref.autoPlay,
+    paused = _ref.paused,
+    loop = _ref.loop,
+    playsInline = _ref.playsInline,
+    preload = _ref.preload,
+    shouldLoad = _ref.shouldLoad,
+    withoutCors = _ref.withoutCors,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    customOnPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onSeeked = _ref.onSeeked,
+    onTimeUpdate = _ref.onTimeUpdate,
+    onProgressStep = _ref.onProgressStep,
+    customOnDurationChange = _ref.onDurationChange,
+    customOnVolumeChange = _ref.onVolumeChange,
+    customOnSuspend = _ref.onSuspend,
+    onSuspended = _ref.onSuspended,
+    focusable = _ref.focusable,
+    withPoster = _ref.withPoster;
   var _ref2 = media || {},
-      _ref2$url = _ref2.url,
-      mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
-      _ref2$files = _ref2.files,
-      files = _ref2$files === void 0 ? null : _ref2$files,
-      _ref2$metadata = _ref2.metadata,
-      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-
+    _ref2$url = _ref2.url,
+    mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
+    _ref2$files = _ref2.files,
+    files = _ref2$files === void 0 ? null : _ref2$files,
+    _ref2$metadata = _ref2.metadata,
+    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
   var _ref3 = metadata || {},
-      _ref3$description = _ref3.description,
-      description = _ref3$description === void 0 ? null : _ref3$description,
-      _ref3$mime = _ref3.mime,
-      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
-      _ref3$has_audio = _ref3.has_audio,
-      hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
-
+    _ref3$description = _ref3.description,
+    description = _ref3$description === void 0 ? null : _ref3$description,
+    _ref3$mime = _ref3.mime,
+    mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
+    _ref3$has_audio = _ref3.has_audio,
+    hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
   var filesArray = useMemo(function () {
     return getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = useMediaThumbnail(media, thumbnail);
-
   var _ref9 = useRef(null);
-
   var currentTime = useMediaCurrentTime(_ref9.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
@@ -133,49 +127,60 @@ var Video = function Video(_ref) {
   var duration = useMediaDuration(_ref9.current, {
     id: mediaUrl
   });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLoading = _useState2[0],
+    setShowLoading = _useState2[1];
   var ready = useMediaReady(_ref9.current, {
     id: mediaUrl
   });
+  useEffect(function () {
+    var id = null;
+    setShowLoading(false);
+    if (mediaUrl) {
+      id = setTimeout(function () {
+        setShowLoading(true);
+      }, 1000);
+    }
+    return function () {
+      clearTimeout(id);
+    };
+  }, [mediaUrl]);
   var sourceFiles = useMemo(function () {
     if (filesArray.length === 0) {
       return null;
     }
-
     var supportedMimes = getVideoSupportedMimes();
-
     if (supportedMimes.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;
+        mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
       return supportedMimes.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;
+        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;
-
+        _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]); // @NOTE: Media is an animated image and doesn't have source files in video formats
+  }, [filesArray]);
 
+  // @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;
-    return handle === 'original';
-  }) || {},
-      _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 handle = _ref6.handle;
+      return handle === 'original';
+    }) || {},
+    _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);
   var withSize = width !== null && height !== null;
@@ -186,27 +191,24 @@ var Video = function Video(_ref) {
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
     var _ref$current = _ref9.current,
-        element = _ref$current === void 0 ? null : _ref$current;
-
+      element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
     }
-
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Manage suspend
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSuspended = _useState2[0],
-      setIsSuspended = _useState2[1];
+  }, [customOnVolumeChange]);
 
+  // Manage suspend
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSuspended = _useState4[0],
+    setIsSuspended = _useState4[1];
   var onPlay = useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
     }
-
     if (customOnPlay !== null) {
       customOnPlay(e);
     }
@@ -219,12 +221,10 @@ var Video = function Video(_ref) {
   var onSuspend = useCallback(function (e) {
     if (e.currentTarget.paused && !paused && !isSuspended) {
       setIsSuspended(true);
-
       if (onSuspended !== null) {
         onSuspended();
       }
     }
-
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
@@ -236,14 +236,11 @@ var Video = function Video(_ref) {
   }, [ready, onReady]);
   useEffect(function () {
     var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-
+      element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
-
     var isPaused = element.paused;
-
     if (paused && !isPaused) {
       element.pause();
     } else if (!paused && isPaused) {
@@ -270,7 +267,6 @@ var Video = function Video(_ref) {
     key: mediaUrl,
     ref: function ref(newRef) {
       _ref9.current = newRef;
-
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -299,15 +295,16 @@ var Video = function Video(_ref) {
     "data-is-suspended": isSuspended
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
-        sourceMime = _ref8.mime;
+      sourceMime = _ref8.mime;
     return /*#__PURE__*/React.createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.1") : null,
       type: sourceMime
     });
-  })) : null);
+  })) : null, !isImageWithoutSourceFile && !ready && showLoading ? /*#__PURE__*/React.createElement(Spinner, {
+    className: styles.spinner
+  }) : null);
 };
-
 Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
 var Video$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/lib/index.js

@@ -1,27 +1,28 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
 var isFunction = require('lodash/isFunction');
 var PropTypes = require('prop-types');
 var React = require('react');
 var core = require('@micromag/core');
+var components = require('@micromag/core/components');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
+var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video","spinner":"micromag-element-video-spinner"};
 
 var propTypes = {
   media: core.PropTypes.videoMedia,
@@ -83,61 +84,54 @@ var defaultProps = {
   focusable: true,
   withPoster: false
 };
-
 var Video = function Video(_ref) {
   var _ref7;
-
   var media = _ref.media,
-      thumbnail = _ref.thumbnail,
-      width = _ref.width,
-      height = _ref.height,
-      mediaRef = _ref.mediaRef,
-      muted = _ref.muted,
-      autoPlay = _ref.autoPlay,
-      paused = _ref.paused,
-      loop = _ref.loop,
-      playsInline = _ref.playsInline,
-      preload = _ref.preload,
-      shouldLoad = _ref.shouldLoad,
-      withoutCors = _ref.withoutCors,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      customOnPlay = _ref.onPlay,
-      onPause = _ref.onPause,
-      onEnded = _ref.onEnded,
-      onSeeked = _ref.onSeeked,
-      onTimeUpdate = _ref.onTimeUpdate,
-      onProgressStep = _ref.onProgressStep,
-      customOnDurationChange = _ref.onDurationChange,
-      customOnVolumeChange = _ref.onVolumeChange,
-      customOnSuspend = _ref.onSuspend,
-      onSuspended = _ref.onSuspended,
-      focusable = _ref.focusable,
-      withPoster = _ref.withPoster;
-
+    thumbnail = _ref.thumbnail,
+    width = _ref.width,
+    height = _ref.height,
+    mediaRef = _ref.mediaRef,
+    muted = _ref.muted,
+    autoPlay = _ref.autoPlay,
+    paused = _ref.paused,
+    loop = _ref.loop,
+    playsInline = _ref.playsInline,
+    preload = _ref.preload,
+    shouldLoad = _ref.shouldLoad,
+    withoutCors = _ref.withoutCors,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    customOnPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onSeeked = _ref.onSeeked,
+    onTimeUpdate = _ref.onTimeUpdate,
+    onProgressStep = _ref.onProgressStep,
+    customOnDurationChange = _ref.onDurationChange,
+    customOnVolumeChange = _ref.onVolumeChange,
+    customOnSuspend = _ref.onSuspend,
+    onSuspended = _ref.onSuspended,
+    focusable = _ref.focusable,
+    withPoster = _ref.withPoster;
   var _ref2 = media || {},
-      _ref2$url = _ref2.url,
-      mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
-      _ref2$files = _ref2.files,
-      files = _ref2$files === void 0 ? null : _ref2$files,
-      _ref2$metadata = _ref2.metadata,
-      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-
+    _ref2$url = _ref2.url,
+    mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
+    _ref2$files = _ref2.files,
+    files = _ref2$files === void 0 ? null : _ref2$files,
+    _ref2$metadata = _ref2.metadata,
+    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
   var _ref3 = metadata || {},
-      _ref3$description = _ref3.description,
-      description = _ref3$description === void 0 ? null : _ref3$description,
-      _ref3$mime = _ref3.mime,
-      mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
-      _ref3$has_audio = _ref3.has_audio,
-      hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
-
+    _ref3$description = _ref3.description,
+    description = _ref3$description === void 0 ? null : _ref3$description,
+    _ref3$mime = _ref3.mime,
+    mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
+    _ref3$has_audio = _ref3.has_audio,
+    hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
   var filesArray = React.useMemo(function () {
     return utils.getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = hooks.useMediaThumbnail(media, thumbnail);
-
   var _ref9 = React.useRef(null);
-
   var currentTime = hooks.useMediaCurrentTime(_ref9.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
@@ -145,49 +139,60 @@ var Video = function Video(_ref) {
   var duration = hooks.useMediaDuration(_ref9.current, {
     id: mediaUrl
   });
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    showLoading = _useState2[0],
+    setShowLoading = _useState2[1];
   var ready = hooks.useMediaReady(_ref9.current, {
     id: mediaUrl
   });
+  React.useEffect(function () {
+    var id = null;
+    setShowLoading(false);
+    if (mediaUrl) {
+      id = setTimeout(function () {
+        setShowLoading(true);
+      }, 1000);
+    }
+    return function () {
+      clearTimeout(id);
+    };
+  }, [mediaUrl]);
   var sourceFiles = React.useMemo(function () {
     if (filesArray.length === 0) {
       return null;
     }
-
     var supportedMimes = utils.getVideoSupportedMimes();
-
     if (supportedMimes.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;
+        mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
       return supportedMimes.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;
+        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;
-
+        _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]); // @NOTE: Media is an animated image and doesn't have source files in video formats
+  }, [filesArray]);
 
+  // @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;
-    return handle === 'original';
-  }) || {},
-      _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 handle = _ref6.handle;
+      return handle === 'original';
+    }) || {},
+    _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);
   var withSize = width !== null && height !== null;
@@ -198,27 +203,24 @@ var Video = function Video(_ref) {
   }, [duration, customOnDurationChange]);
   var onVolumeChange = React.useCallback(function () {
     var _ref$current = _ref9.current,
-        element = _ref$current === void 0 ? null : _ref$current;
-
+      element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
     }
-
     if (customOnVolumeChange !== null) {
       customOnVolumeChange(element.volume);
     }
-  }, [customOnVolumeChange]); // Manage suspend
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      isSuspended = _useState2[0],
-      setIsSuspended = _useState2[1];
+  }, [customOnVolumeChange]);
 
+  // Manage suspend
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    isSuspended = _useState4[0],
+    setIsSuspended = _useState4[1];
   var onPlay = React.useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
     }
-
     if (customOnPlay !== null) {
       customOnPlay(e);
     }
@@ -231,12 +233,10 @@ var Video = function Video(_ref) {
   var onSuspend = React.useCallback(function (e) {
     if (e.currentTarget.paused && !paused && !isSuspended) {
       setIsSuspended(true);
-
       if (onSuspended !== null) {
         onSuspended();
       }
     }
-
     if (customOnSuspend !== null) {
       customOnSuspend(e);
     }
@@ -248,14 +248,11 @@ var Video = function Video(_ref) {
   }, [ready, onReady]);
   React.useEffect(function () {
     var _ref$current2 = _ref9.current,
-        element = _ref$current2 === void 0 ? null : _ref$current2;
-
+      element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
     }
-
     var isPaused = element.paused;
-
     if (paused && !isPaused) {
       element.pause();
     } else if (!paused && isPaused) {
@@ -282,7 +279,6 @@ var Video = function Video(_ref) {
     key: mediaUrl,
     ref: function ref(newRef) {
       _ref9.current = newRef;
-
       if (mediaRef !== null && isFunction__default["default"](mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -311,15 +307,16 @@ var Video = function Video(_ref) {
     "data-is-suspended": isSuspended
   }, (sourceFiles || []).map(function (_ref8) {
     var sourceUrl = _ref8.url,
-        sourceMime = _ref8.mime;
+      sourceMime = _ref8.mime;
     return /*#__PURE__*/React__default["default"].createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.1") : null,
       type: sourceMime
     });
-  })) : null);
+  })) : null, !isImageWithoutSourceFile && !ready && showLoading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
+    className: styles.spinner
+  }) : null);
 };
-
 Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
 var Video$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.311",
+    "version": "0.3.322",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,17 +52,17 @@
         "@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.311",
-        "@micromag/element-closed-captions": "^0.3.311",
-        "@micromag/element-media-controls": "^0.3.311",
+        "@micromag/core": "^0.3.322",
+        "@micromag/element-closed-captions": "^0.3.322",
+        "@micromag/element-media-controls": "^0.3.322",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
-        "uuid": "^8.3.2"
+        "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fab297a7ad204611597c749b969f14d992d35d47"
+    "gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
 }