diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 985d7a94e93c51d029a2890a9a81e80d7bccb88b..065c9abbc9cfa85901b5c6f8adde2a7e84904d90 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -77,6 +77,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
localization,
preview,
imageUrl,
+ videoUrl,
info,
backgroundBlurImage = true,
darkMode,
@@ -107,8 +108,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
//ref for anchor element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
- const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
-
//className created
const finalClassName: string = makeFileCardClassName(
elevation,
@@ -127,21 +126,22 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
const localProgress: number | undefined = useProgress(progress, xhr);
//Initialize File Item
- const [isReady, isImage, isVideo, url, imageSource]: [
+ const [isReady, isImage, isVideo, url, imageSource, videoSource]: [
boolean,
boolean,
boolean,
string,
- string | undefined
+ string | undefined,
+ File | string | undefined
] = useFileMosaicInitializer(
file,
propName,
propType,
valid,
preview as boolean,
- imageUrl
+ imageUrl,
+ videoUrl
);
-
//The size formatted and rounded in 2 decimals
const sizeFormatted: string = localSize
? fileSizeFormater(localSize)
@@ -343,15 +343,11 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
<FileCardRightActions
deleteIcon={onDelete !== undefined}
onDelete={handleDelete}
- darkMode={darkMode}
- valid={valid}
- uploadStatus={uploadStatus}
- localization={localization}
- sizeFormatted={sizeFormatted}
+ darkMode={darkMode}
imageIcon={isImage && onSee !== undefined}
onSee={() => onSee?.(imageSource)}
videoIcon={isVideo && onWatch !== undefined}
- onWatch={() => onWatch?.(file)}
+ onWatch={() => onWatch?.(videoSource)}
downloadIcon={onDownload !== undefined || downloadUrl !== undefined}
onDownload={handleDownload}
infoIcon={info !== undefined}
diff --git a/src/files-ui/components/file-card/components/FileCardRightActions.tsx b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
index dbba7d5212d4ac3d2ccc9b88458cddc9314c5fc5..2cb660fb57fe4bd2aed77502de10d51b0e4da399 100644
--- a/src/files-ui/components/file-card/components/FileCardRightActions.tsx
+++ b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
@@ -13,13 +13,7 @@ declare type FileCardRightActionsProps = {
darkMode?: boolean;
deleteIcon?: boolean;
onDelete?: Function;
-
- valid: boolean | null | undefined;
- uploadStatus?: UPLOADSTATUS;
- localization?: Localization;
-
- sizeFormatted: string;
-
+
imageIcon: boolean;
onSee: ((imageSource: string | undefined) => void) | undefined;
@@ -49,87 +43,84 @@ const FileCardRightActions: React.FC<FileCardRightActionsProps> = (
onOpenInfo,
onSee,
onWatch,
- sizeFormatted,
- valid,
+
videoIcon,
- localization,
- uploadStatus,
isActive,
- visible
+ visible,
} = props;
-if(visible)
- return (
- <>
- <div className="file-card-right-layer-header">
- {isActive && deleteIcon && (
- <Clear
- className={
- darkMode ? "files-ui-file-icon dark-mode" : "files-ui-file-icon"
- }
- color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
- onClick={onDelete}
- size="small"
- colorFill="transparent"
- />
- )}
- </div>
- <div className="file-card-right-layer-footer">
- {isActive && (
- <React.Fragment>
- {imageIcon && (
- <Visibility
- className={
- darkMode
- ? "files-ui-file-icon dark-mode"
- : "files-ui-file-icon"
- }
- color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
- onClick={onSee}
- size="small"
- />
- )}
+ if (visible)
+ return (
+ <>
+ <div className="file-card-right-layer-header">
+ {isActive && deleteIcon && (
+ <Clear
+ className={
+ darkMode ? "files-ui-file-icon dark-mode" : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onDelete}
+ size="small"
+ colorFill="transparent"
+ />
+ )}
+ </div>
+ <div className="file-card-right-layer-footer">
+ {isActive && (
+ <React.Fragment>
+ {imageIcon && (
+ <Visibility
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onSee}
+ size="small"
+ />
+ )}
- {videoIcon && (
- <PlayIcon
- className={
- darkMode
- ? "files-ui-file-icon dark-mode"
- : "files-ui-file-icon"
- }
- color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
- onClick={onWatch}
- size="small"
- />
- )}
- {downloadIcon && (
- <DownloadFile
- className={
- darkMode
- ? "files-ui-file-icon dark-mode"
- : "files-ui-file-icon"
- }
- color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
- onClick={onDownload}
- size="small"
- />
- )}
- {infoIcon && (
- <InfoDisney
- className={
- darkMode
- ? "files-ui-file-icon dark-mode"
- : "files-ui-file-icon"
- }
- onClick={onOpenInfo}
- color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
- size="micro"
- />
- )}
- </React.Fragment>
- )}
- </div>
- </>
- )
- return <></>
+ {videoIcon && (
+ <PlayIcon
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onWatch}
+ size="small"
+ />
+ )}
+ {downloadIcon && (
+ <DownloadFile
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onDownload}
+ size="small"
+ />
+ )}
+ {infoIcon && (
+ <InfoDisney
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ onClick={onOpenInfo}
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ size="micro"
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ </>
+ );
+ return <></>;
};
export default FileCardRightActions;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 696d21da28c042eac3b955018999109c034252a8..261d30fbdd236e192637d06ba1f15ea8dc3f2679 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -37,6 +37,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
localization,
preview,
imageUrl,
+ videoUrl,
info,
backgroundBlurImage = true,
darkMode,
@@ -60,7 +61,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onRightClick,
} = props;
- // console.log("FileMosaic progress " + id, progress);
+ // console.log("FileMosaic progress " + id, progress);
//ref for anchor download element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
@@ -90,19 +91,21 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
//console.log("FileMosaic progress localProgress " + localProgress);
//Initialize File Item
- const [isReady, isImage, isVideo, url, imageSource]: [
+ const [isReady, isImage, isVideo, url, imageSource, videoSource]: [
boolean,
boolean,
boolean,
string,
- string | undefined
+ string | undefined,
+ File | string | undefined
] = useFileMosaicInitializer(
file,
propName,
propType,
valid,
preview as boolean,
- imageUrl
+ imageUrl,
+ videoUrl
);
//The size formatted and rounded in 2 decimals
@@ -250,7 +253,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
imageIcon={isImage && onSee !== undefined}
onSee={() => onSee?.(imageSource)}
videoIcon={isVideo && onWatch !== undefined}
- onWatch={() => onWatch?.(file)}
+ onWatch={() => onWatch?.(videoSource)}
downloadIcon={
onDownload !== undefined || downloadUrl !== undefined
}
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
index 899f9a6391eea5e8ed9966e5e7de4340744bc660..29d1948f4d7a34dce3179bde51dae77d916b6786 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
@@ -56,9 +56,15 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
/**
* A string representation or web url of the image
* that will be set to the "src" prop of an <img/> tag
- * <img src={`${url}`} />
+ * <img src={`${imageUrl}`} />
*/
imageUrl?: string;
+ /**
+ * A string representation or web url of the video
+ * that will be set to the "src" prop of an <video/> tag
+ * <video src={`${videoUrl}`} />
+ */
+ videoUrl?: string;
/**
* If true, a background blur image will be shown
*/
@@ -91,7 +97,7 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
/**
* A function that return a file object when "play" button is presssed or clicked
*/
- onWatch?: (videoSource: File | undefined) => void;
+ onWatch?: (videoSource: File | string | undefined) => void;
/**
* Event that is triggered when `delete` button is clicked or pressed.
* If present, `delete` button will be visible.
diff --git a/src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts b/src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts
index e28ec9028fcc6c72c85816cbd04a642fbe72d142..a0a76d02e4ab7577938590b99b281ab44f890e1f 100644
--- a/src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts
+++ b/src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts
@@ -19,14 +19,16 @@ const useFileMosaicInitializer = (
valid: boolean | undefined | null,
preview: boolean,
imageUrl: string | undefined,
+ videoUrl: string | undefined,
xhr?: XMLHttpRequest,
-): [boolean,boolean, boolean, string, string | undefined] => {
+): [boolean,boolean, boolean, string, string | undefined, File |string | undefined] => {
const [isImage, setIsImage] = React.useState<boolean>(false);
const [isVideo, setIsVideo] = React.useState<boolean>(false);
const [url, setUrl] = React.useState<string>("");
const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
+ const [videoSource, setVideoSource] = React.useState<File | string | undefined>(undefined);
const [isReady,setIsReady]=React.useState(false);
@@ -37,6 +39,7 @@ const useFileMosaicInitializer = (
valid: boolean | undefined | null,
preview: boolean,
imageUrl: string | undefined,
+ videoUrl: string | undefined,
xhr?: XMLHttpRequest,
progress?: number
) => {
@@ -57,10 +60,15 @@ const useFileMosaicInitializer = (
setImageSource(imageUrl);
setIsReady(true);
return;
- } else {
+ } else if(videoUrl){
+ setIsVideo(true);
+ setVideoSource(videoUrl);
+ setIsReady(true);
+ }else {
const [headerMime, tailMime] = getHeaderAndTail(file, type);
setIsImage(headerMime === "image");
+
setIsVideo(
headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
);
@@ -93,7 +101,7 @@ const useFileMosaicInitializer = (
////// CLEAN UP
React.useEffect(() => {
- init(file, name, type, valid, preview || false, imageUrl);
+ init(file, name, type, valid, preview || false, imageUrl,videoUrl);
return () => {
setImageSource(undefined);
setIsImage(false);
@@ -101,8 +109,9 @@ const useFileMosaicInitializer = (
setIsReady(false);
};
// eslint-disable-next-line
- }, [file, name, type, valid, preview, imageUrl,]);
- return [isReady,isImage, isVideo, url, imageSource];
+ }, [file, name, type, valid, preview, imageUrl,videoUrl]);
+
+ return [isReady,isImage, isVideo, url, imageSource,videoSource];
}
export default useFileMosaicInitializer;