@micromag/element-video 0.3.111 → 0.3.117

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) {
@@ -193,19 +195,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();

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) {
@@ -204,19 +206,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();

package/package.json

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