@micromag/element-video 0.3.318 → 0.3.322

package/assets/css/styles.css

@@ -1 +1 @@
-.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,.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,
@@ -126,9 +127,25 @@ 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;
@@ -184,10 +201,10 @@ var Video = function Video(_ref) {
   }, [customOnVolumeChange]);
 
   // Manage suspend
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isSuspended = _useState2[0],
-    setIsSuspended = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSuspended = _useState4[0],
+    setIsSuspended = _useState4[1];
   var onPlay = useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
@@ -284,7 +301,9 @@ var Video = function Video(_ref) {
       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;

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,
@@ -138,9 +139,25 @@ 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;
@@ -196,10 +213,10 @@ var Video = function Video(_ref) {
   }, [customOnVolumeChange]);
 
   // Manage suspend
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    isSuspended = _useState2[0],
-    setIsSuspended = _useState2[1];
+  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);
@@ -296,7 +313,9 @@ var Video = function Video(_ref) {
       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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.318",
+    "version": "0.3.322",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,9 +52,9 @@
         "@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.318",
-        "@micromag/element-closed-captions": "^0.3.318",
-        "@micromag/element-media-controls": "^0.3.318",
+        "@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",
@@ -64,5 +64,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
+    "gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
 }