@micromag/element-video 0.3.117 → 0.3.119

package/es/index.js

@@ -184,8 +184,7 @@ var Video = function Video(_ref) {
     apiRef.current.mediaRef = ref;
   }
 
-  var playing = api.playing,
-      muted = api.muted,
+  var muted = api.muted,
       dataReady = api.dataReady,
       play = api.play,
       pause = api.pause,
@@ -209,21 +208,23 @@ var Video = function Video(_ref) {
   }, [autoPlay]); // Ensure load if preload value change over time
 
   var firstPreloadRef = useRef(preload);
-  var hasLoadedRef = useRef(preload !== 'none' && preload !== 'metadata');
+  var firstShouldLoadRef = useRef(shouldLoad);
+  var hasLoadedRef = useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
   useEffect(function () {
     var _ref$current = ref.current,
         videoElement = _ref$current === void 0 ? null : _ref$current;
     var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad; // @todo
 
     var preloadHasChanged = firstPreloadRef.current !== preload;
+    var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
 
-    if (canLoad && preloadHasChanged && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
+    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
       hasLoadedRef.current = true;
       videoElement.load();
     }
   }, [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)]),
+    className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.withSize, withSize), _ref7)]),
     style: withSize ? {
       width: width,
       height: height
@@ -235,12 +236,12 @@ var Video = function Video(_ref) {
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: ref,
-    src: sourceFiles === null ? mediaUrl : null,
+    src: sourceFiles === null || sourceFiles.length === 0 ? mediaUrl : null,
     autoPlay: autoPlay,
     loop: loop,
     muted: muted,
     poster: shouldLoad ? thumbnailUrl : null,
-    preload: shouldLoad ? preload : 'metadata',
+    preload: shouldLoad ? preload : 'none',
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',

package/lib/index.js

@@ -195,8 +195,7 @@ var Video = function Video(_ref) {
     apiRef.current.mediaRef = ref;
   }
 
-  var playing = api.playing,
-      muted = api.muted,
+  var muted = api.muted,
       dataReady = api.dataReady,
       play = api.play,
       pause = api.pause,
@@ -220,21 +219,23 @@ var Video = function Video(_ref) {
   }, [autoPlay]); // Ensure load if preload value change over time
 
   var firstPreloadRef = React.useRef(preload);
-  var hasLoadedRef = React.useRef(preload !== 'none' && preload !== 'metadata');
+  var firstShouldLoadRef = React.useRef(shouldLoad);
+  var hasLoadedRef = React.useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
   React.useEffect(function () {
     var _ref$current = ref.current,
         videoElement = _ref$current === void 0 ? null : _ref$current;
     var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad; // @todo
 
     var preloadHasChanged = firstPreloadRef.current !== preload;
+    var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
 
-    if (canLoad && preloadHasChanged && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
+    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
       hasLoadedRef.current = true;
       videoElement.load();
     }
   }, [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)]),
+    className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.withSize, withSize), _ref7)]),
     style: withSize ? {
       width: width,
       height: height
@@ -246,12 +247,12 @@ var Video = function Video(_ref) {
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React__default["default"].createElement("video", {
     key: mediaUrl,
     ref: ref,
-    src: sourceFiles === null ? mediaUrl : null,
+    src: sourceFiles === null || sourceFiles.length === 0 ? mediaUrl : null,
     autoPlay: autoPlay,
     loop: loop,
     muted: muted,
     poster: shouldLoad ? thumbnailUrl : null,
-    preload: shouldLoad ? preload : 'metadata',
+    preload: shouldLoad ? preload : 'none',
     playsInline: playsInline,
     crossOrigin: withoutCors ? 'anonymous' : null,
     tabIndex: focusable ? '0' : '-1',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.117",
+    "version": "0.3.119",
     "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.117",
-        "@micromag/element-closed-captions": "^0.3.117",
-        "@micromag/element-media-controls": "^0.3.117",
+        "@micromag/core": "^0.3.119",
+        "@micromag/element-closed-captions": "^0.3.119",
+        "@micromag/element-media-controls": "^0.3.119",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "eab1c9a0b8c19d747fee6472158779f33b1f18d3"
+    "gitHead": "009841dc1641be98ddce6ed56cfcddc22509f342"
 }