@micromag/element-video 0.2.404 → 0.2.412

package/es/index.js

@@ -1,12 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useMemo, useEffect } from 'react';
-import PropTypes$1 from 'prop-types';
-import classNames from 'classnames';
 import { PropTypes } from '@micromag/core';
 import { useUserInteracted } from '@micromag/core/contexts';
 import { useMediaApi } from '@micromag/core/hooks';
 import { getMediaFilesAsArray } from '@micromag/core/utils';
+import classNames from 'classnames';
+import PropTypes$1 from 'prop-types';
+import React, { useMemo, useEffect, useRef } from 'react';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
 
@@ -22,7 +22,7 @@ var propTypes = {
   autoPlay: PropTypes$1.bool,
   loop: PropTypes$1.bool,
   playsInline: PropTypes$1.bool,
-  preload: PropTypes$1.string,
+  preload: PropTypes$1.oneOf(['auto', 'metadata', 'none', null]),
   withoutCors: PropTypes$1.bool,
   className: PropTypes$1.string,
   onReady: PropTypes$1.func,
@@ -192,7 +192,21 @@ var Video = function Video(_ref) {
     } else {
       pause();
     }
-  }, [autoPlay]);
+  }, [autoPlay]); // Ensure load if preload value change over time
+
+  var firstPreloadRef = useRef(preload);
+  var hasLoadedRef = useRef(preload !== 'none' && preload !== 'metadata');
+  useEffect(function () {
+    var _ref$current = ref.current,
+        videoElement = _ref$current === void 0 ? null : _ref$current;
+    var canLoad = preload !== 'none' && preload !== 'metadata';
+    var preloadHasChanged = firstPreloadRef.current !== preload;
+
+    if (canLoad && preloadHasChanged && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
+      hasLoadedRef.current = true;
+      videoElement.load();
+    }
+  }, [preload]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.paused, !playing), _defineProperty(_ref6, styles.withSize, withSize), _ref6)]),
     style: withSize ? {

package/lib/index.js

@@ -2,21 +2,21 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
-var PropTypes = require('prop-types');
-var classNames = require('classnames');
 var core = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
+var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+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"};
 
@@ -32,7 +32,7 @@ var propTypes = {
   autoPlay: PropTypes__default["default"].bool,
   loop: PropTypes__default["default"].bool,
   playsInline: PropTypes__default["default"].bool,
-  preload: PropTypes__default["default"].string,
+  preload: PropTypes__default["default"].oneOf(['auto', 'metadata', 'none', null]),
   withoutCors: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   onReady: PropTypes__default["default"].func,
@@ -202,7 +202,21 @@ var Video = function Video(_ref) {
     } else {
       pause();
     }
-  }, [autoPlay]);
+  }, [autoPlay]); // Ensure load if preload value change over time
+
+  var firstPreloadRef = React.useRef(preload);
+  var hasLoadedRef = React.useRef(preload !== 'none' && preload !== 'metadata');
+  React.useEffect(function () {
+    var _ref$current = ref.current,
+        videoElement = _ref$current === void 0 ? null : _ref$current;
+    var canLoad = preload !== 'none' && preload !== 'metadata';
+    var preloadHasChanged = firstPreloadRef.current !== preload;
+
+    if (canLoad && preloadHasChanged && !hasLoadedRef.current && videoElement !== null && typeof videoElement.load !== 'undefined') {
+      hasLoadedRef.current = true;
+      videoElement.load();
+    }
+  }, [preload]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.paused, !playing), _defineProperty__default["default"](_ref6, styles.withSize, withSize), _ref6)]),
     style: withSize ? {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.2.404",
+    "version": "0.2.412",
     "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.2.404",
-        "@micromag/element-closed-captions": "^0.2.404",
-        "@micromag/element-media-controls": "^0.2.404",
+        "@micromag/core": "^0.2.412",
+        "@micromag/element-closed-captions": "^0.2.412",
+        "@micromag/element-media-controls": "^0.2.412",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "34d5345cb0dad79206bb6b7a25f02742663023ee"
+    "gitHead": "e16acc4643a563f4b7e98ddc1b778ea8a6c8b320"
 }