@micromag/element-video 0.3.112 → 0.3.119

package/es/index.js

@@ -6,7 +6,7 @@ import PropTypes$1 from 'prop-types';
 import React, { useMemo, useEffect, useRef } from 'react';
 import { PropTypes } from '@micromag/core';
 import { useUserInteracted } from '@micromag/core/contexts';
-import { useMediaApi } from '@micromag/core/hooks';
+import { useMediaThumbnail, useMediaApi } from '@micromag/core/hooks';
 import { getMediaFilesAsArray } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","video":"micromag-element-video-video"};
@@ -14,6 +14,7 @@ var styles = {"container":"micromag-element-video-container","withSize":"microma
 var _excluded = ["ref"];
 var propTypes = {
   media: PropTypes.videoMedia,
+  thumbnailFile: PropTypes$1.string,
   width: PropTypes$1.number,
   height: PropTypes$1.number,
   apiRef: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.shape({
@@ -42,6 +43,7 @@ var propTypes = {
 };
 var defaultProps = {
   media: null,
+  thumbnailFile: null,
   width: null,
   height: null,
   apiRef: null,
@@ -71,6 +73,7 @@ var Video = function Video(_ref) {
   var _ref7;
 
   var media = _ref.media,
+      thumbnailFile = _ref.thumbnailFile,
       width = _ref.width,
       height = _ref.height,
       apiRef = _ref.apiRef,
@@ -100,9 +103,7 @@ var Video = function Video(_ref) {
       _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$thumbnail_url = _ref2.thumbnail_url,
-      thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
+      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
 
   var _ref3 = metadata || {},
       _ref3$description = _ref3.description,
@@ -112,7 +113,8 @@ var Video = function Video(_ref) {
 
   var filesArray = useMemo(function () {
     return getMediaFilesAsArray(files);
-  }, [files]); // Get source files with supported mimes
+  }, [files]);
+  var thumbnailUrl = useMediaThumbnail(media, thumbnailFile); // Get source files with supported mimes
 
   var sourceFiles = useMemo(function () {
     if (filesArray.length === 0) {
@@ -182,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,
@@ -193,19 +194,7 @@ var Video = function Video(_ref) {
       onReady();
     }
   }, [dataReady, onReady]);
-  var withSize = width !== null && height !== null; // const { thumbnail_url: thumbnailUrl = null } = media || {};
-  // useEffect(() => {
-  //     if (thumbnailUrl !== null) {
-  //         const img = new Image();
-  //         img.src = thumbnailUrl;
-  //         img.onload = () => {
-  //             if (onPosterLoaded) {
-  //                 onPosterLoaded();
-  //             }
-  //         };
-  //     }
-  // }, [thumbnailUrl]);
-
+  var withSize = width !== null && height !== null;
   useEffect(function () {
     if (autoPlay) {
       play();
@@ -219,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
@@ -245,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

@@ -25,6 +25,7 @@ var styles = {"container":"micromag-element-video-container","withSize":"microma
 var _excluded = ["ref"];
 var propTypes = {
   media: core.PropTypes.videoMedia,
+  thumbnailFile: PropTypes__default["default"].string,
   width: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
   apiRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
@@ -53,6 +54,7 @@ var propTypes = {
 };
 var defaultProps = {
   media: null,
+  thumbnailFile: null,
   width: null,
   height: null,
   apiRef: null,
@@ -82,6 +84,7 @@ var Video = function Video(_ref) {
   var _ref7;
 
   var media = _ref.media,
+      thumbnailFile = _ref.thumbnailFile,
       width = _ref.width,
       height = _ref.height,
       apiRef = _ref.apiRef,
@@ -111,9 +114,7 @@ var Video = function Video(_ref) {
       _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$thumbnail_url = _ref2.thumbnail_url,
-      thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
+      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
 
   var _ref3 = metadata || {},
       _ref3$description = _ref3.description,
@@ -123,7 +124,8 @@ var Video = function Video(_ref) {
 
   var filesArray = React.useMemo(function () {
     return utils.getMediaFilesAsArray(files);
-  }, [files]); // Get source files with supported mimes
+  }, [files]);
+  var thumbnailUrl = hooks.useMediaThumbnail(media, thumbnailFile); // Get source files with supported mimes
 
   var sourceFiles = React.useMemo(function () {
     if (filesArray.length === 0) {
@@ -193,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,
@@ -204,19 +205,7 @@ var Video = function Video(_ref) {
       onReady();
     }
   }, [dataReady, onReady]);
-  var withSize = width !== null && height !== null; // const { thumbnail_url: thumbnailUrl = null } = media || {};
-  // useEffect(() => {
-  //     if (thumbnailUrl !== null) {
-  //         const img = new Image();
-  //         img.src = thumbnailUrl;
-  //         img.onload = () => {
-  //             if (onPosterLoaded) {
-  //                 onPosterLoaded();
-  //             }
-  //         };
-  //     }
-  // }, [thumbnailUrl]);
-
+  var withSize = width !== null && height !== null;
   React.useEffect(function () {
     if (autoPlay) {
       play();
@@ -230,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
@@ -256,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.112",
+    "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.112",
-        "@micromag/element-closed-captions": "^0.3.112",
-        "@micromag/element-media-controls": "^0.3.112",
+        "@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": "f85362071b76115397f9a77537ac6e66b91f59f3"
+    "gitHead": "009841dc1641be98ddce6ed56cfcddc22509f342"
 }