@micromag/element-video 0.3.105 → 0.3.106

package/es/index.js

@@ -25,6 +25,7 @@ var propTypes = {
   loop: PropTypes$1.bool,
   playsInline: PropTypes$1.bool,
   preload: PropTypes$1.oneOf(['auto', 'metadata', 'none', null]),
+  shouldLoad: PropTypes$1.bool,
   withoutCors: PropTypes$1.bool,
   className: PropTypes$1.string,
   onReady: PropTypes$1.func,
@@ -50,6 +51,7 @@ var defaultProps = {
   loop: false,
   playsInline: true,
   preload: 'auto',
+  shouldLoad: true,
   withoutCors: false,
   className: null,
   onReady: null,
@@ -78,6 +80,7 @@ var Video = function Video(_ref) {
       loop = _ref.loop,
       playsInline = _ref.playsInline,
       preload = _ref.preload,
+      shouldLoad = _ref.shouldLoad,
       withoutCors = _ref.withoutCors,
       className = _ref.className,
       onReady = _ref.onReady,
@@ -221,33 +224,34 @@ var Video = function Video(_ref) {
   useEffect(function () {
     var _ref$current = ref.current,
         videoElement = _ref$current === void 0 ? null : _ref$current;
-    var canLoad = preload !== 'none' && preload !== 'metadata';
+    var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad; // @todo
+
     var preloadHasChanged = firstPreloadRef.current !== preload;
 
     if (canLoad && preloadHasChanged && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
       hasLoadedRef.current = true;
       videoElement.load();
     }
-  }, [preload]);
+  }, [shouldLoad, preload]);
   return /*#__PURE__*/React.createElement("div", {
     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
     } : null
-  }, isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("img", {
+  }, isImageWithoutSourceFile && shouldLoad ? /*#__PURE__*/React.createElement("img", {
     src: mediaUrl,
     alt: description,
     className: styles.video
-  }) : /*#__PURE__*/React.createElement("video", {
+  }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: ref,
     src: sourceFiles === null ? mediaUrl : null,
     autoPlay: autoPlay,
     loop: loop,
     muted: muted,
-    poster: thumbnailUrl,
-    preload: preload,
+    poster: shouldLoad ? thumbnailUrl : null,
+    preload: shouldLoad ? preload : 'metadata',
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',
@@ -260,7 +264,7 @@ var Video = function Video(_ref) {
       src: sourceUrl,
       type: sourceMime
     });
-  })));
+  })) : null);
 };
 
 Video.propTypes = propTypes;

package/lib/index.js

@@ -36,6 +36,7 @@ var propTypes = {
   loop: PropTypes__default["default"].bool,
   playsInline: PropTypes__default["default"].bool,
   preload: PropTypes__default["default"].oneOf(['auto', 'metadata', 'none', null]),
+  shouldLoad: PropTypes__default["default"].bool,
   withoutCors: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   onReady: PropTypes__default["default"].func,
@@ -61,6 +62,7 @@ var defaultProps = {
   loop: false,
   playsInline: true,
   preload: 'auto',
+  shouldLoad: true,
   withoutCors: false,
   className: null,
   onReady: null,
@@ -89,6 +91,7 @@ var Video = function Video(_ref) {
       loop = _ref.loop,
       playsInline = _ref.playsInline,
       preload = _ref.preload,
+      shouldLoad = _ref.shouldLoad,
       withoutCors = _ref.withoutCors,
       className = _ref.className,
       onReady = _ref.onReady,
@@ -232,33 +235,34 @@ var Video = function Video(_ref) {
   React.useEffect(function () {
     var _ref$current = ref.current,
         videoElement = _ref$current === void 0 ? null : _ref$current;
-    var canLoad = preload !== 'none' && preload !== 'metadata';
+    var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad; // @todo
+
     var preloadHasChanged = firstPreloadRef.current !== preload;
 
     if (canLoad && preloadHasChanged && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
       hasLoadedRef.current = true;
       videoElement.load();
     }
-  }, [preload]);
+  }, [shouldLoad, preload]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     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
     } : null
-  }, isImageWithoutSourceFile ? /*#__PURE__*/React__default["default"].createElement("img", {
+  }, isImageWithoutSourceFile && shouldLoad ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: mediaUrl,
     alt: description,
     className: styles.video
-  }) : /*#__PURE__*/React__default["default"].createElement("video", {
+  }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React__default["default"].createElement("video", {
     key: mediaUrl,
     ref: ref,
     src: sourceFiles === null ? mediaUrl : null,
     autoPlay: autoPlay,
     loop: loop,
     muted: muted,
-    poster: thumbnailUrl,
-    preload: preload,
+    poster: shouldLoad ? thumbnailUrl : null,
+    preload: shouldLoad ? preload : 'metadata',
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',
@@ -271,7 +275,7 @@ var Video = function Video(_ref) {
       src: sourceUrl,
       type: sourceMime
     });
-  })));
+  })) : null);
 };
 
 Video.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.105",
+    "version": "0.3.106",
     "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.105",
-        "@micromag/element-closed-captions": "^0.3.105",
-        "@micromag/element-media-controls": "^0.3.105",
+        "@micromag/core": "^0.3.106",
+        "@micromag/element-closed-captions": "^0.3.106",
+        "@micromag/element-media-controls": "^0.3.106",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fb6c28846c08f30c035ebbc162a4135b8b4d42a5"
+    "gitHead": "865842ef7fbdc41f89dd0891857989ded63d44c4"
 }