Skip to content
Snippets Groups Projects
Commit 174932d5 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[FEAT]: Add videoUrl prop and improve downloadUrl and onDownload

parent d7b1b347
Branches
Tags
No related merge requests found
...@@ -77,6 +77,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => { ...@@ -77,6 +77,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
localization, localization,
preview, preview,
imageUrl, imageUrl,
videoUrl,
info, info,
backgroundBlurImage = true, backgroundBlurImage = true,
darkMode, darkMode,
...@@ -107,8 +108,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => { ...@@ -107,8 +108,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
//ref for anchor element //ref for anchor element
const downloadRef = React.useRef<HTMLAnchorElement>(null); const downloadRef = React.useRef<HTMLAnchorElement>(null);
const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
//className created //className created
const finalClassName: string = makeFileCardClassName( const finalClassName: string = makeFileCardClassName(
elevation, elevation,
...@@ -127,21 +126,22 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => { ...@@ -127,21 +126,22 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
const localProgress: number | undefined = useProgress(progress, xhr); const localProgress: number | undefined = useProgress(progress, xhr);
//Initialize File Item //Initialize File Item
const [isReady, isImage, isVideo, url, imageSource]: [ const [isReady, isImage, isVideo, url, imageSource, videoSource]: [
boolean, boolean,
boolean, boolean,
boolean, boolean,
string, string,
string | undefined string | undefined,
File | string | undefined
] = useFileMosaicInitializer( ] = useFileMosaicInitializer(
file, file,
propName, propName,
propType, propType,
valid, valid,
preview as boolean, preview as boolean,
imageUrl imageUrl,
videoUrl
); );
//The size formatted and rounded in 2 decimals //The size formatted and rounded in 2 decimals
const sizeFormatted: string = localSize const sizeFormatted: string = localSize
? fileSizeFormater(localSize) ? fileSizeFormater(localSize)
...@@ -344,14 +344,10 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => { ...@@ -344,14 +344,10 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
deleteIcon={onDelete !== undefined} deleteIcon={onDelete !== undefined}
onDelete={handleDelete} onDelete={handleDelete}
darkMode={darkMode} darkMode={darkMode}
valid={valid}
uploadStatus={uploadStatus}
localization={localization}
sizeFormatted={sizeFormatted}
imageIcon={isImage && onSee !== undefined} imageIcon={isImage && onSee !== undefined}
onSee={() => onSee?.(imageSource)} onSee={() => onSee?.(imageSource)}
videoIcon={isVideo && onWatch !== undefined} videoIcon={isVideo && onWatch !== undefined}
onWatch={() => onWatch?.(file)} onWatch={() => onWatch?.(videoSource)}
downloadIcon={onDownload !== undefined || downloadUrl !== undefined} downloadIcon={onDownload !== undefined || downloadUrl !== undefined}
onDownload={handleDownload} onDownload={handleDownload}
infoIcon={info !== undefined} infoIcon={info !== undefined}
......
...@@ -14,12 +14,6 @@ declare type FileCardRightActionsProps = { ...@@ -14,12 +14,6 @@ declare type FileCardRightActionsProps = {
deleteIcon?: boolean; deleteIcon?: boolean;
onDelete?: Function; onDelete?: Function;
valid: boolean | null | undefined;
uploadStatus?: UPLOADSTATUS;
localization?: Localization;
sizeFormatted: string;
imageIcon: boolean; imageIcon: boolean;
onSee: ((imageSource: string | undefined) => void) | undefined; onSee: ((imageSource: string | undefined) => void) | undefined;
...@@ -49,13 +43,10 @@ const FileCardRightActions: React.FC<FileCardRightActionsProps> = ( ...@@ -49,13 +43,10 @@ const FileCardRightActions: React.FC<FileCardRightActionsProps> = (
onOpenInfo, onOpenInfo,
onSee, onSee,
onWatch, onWatch,
sizeFormatted,
valid,
videoIcon, videoIcon,
localization,
uploadStatus,
isActive, isActive,
visible visible,
} = props; } = props;
if (visible) if (visible)
return ( return (
...@@ -129,7 +120,7 @@ if(visible) ...@@ -129,7 +120,7 @@ if(visible)
)} )}
</div> </div>
</> </>
) );
return <></> return <></>;
}; };
export default FileCardRightActions; export default FileCardRightActions;
...@@ -37,6 +37,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { ...@@ -37,6 +37,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
localization, localization,
preview, preview,
imageUrl, imageUrl,
videoUrl,
info, info,
backgroundBlurImage = true, backgroundBlurImage = true,
darkMode, darkMode,
...@@ -90,19 +91,21 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { ...@@ -90,19 +91,21 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
//console.log("FileMosaic progress localProgress " + localProgress); //console.log("FileMosaic progress localProgress " + localProgress);
//Initialize File Item //Initialize File Item
const [isReady, isImage, isVideo, url, imageSource]: [ const [isReady, isImage, isVideo, url, imageSource, videoSource]: [
boolean, boolean,
boolean, boolean,
boolean, boolean,
string, string,
string | undefined string | undefined,
File | string | undefined
] = useFileMosaicInitializer( ] = useFileMosaicInitializer(
file, file,
propName, propName,
propType, propType,
valid, valid,
preview as boolean, preview as boolean,
imageUrl imageUrl,
videoUrl
); );
//The size formatted and rounded in 2 decimals //The size formatted and rounded in 2 decimals
...@@ -250,7 +253,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { ...@@ -250,7 +253,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
imageIcon={isImage && onSee !== undefined} imageIcon={isImage && onSee !== undefined}
onSee={() => onSee?.(imageSource)} onSee={() => onSee?.(imageSource)}
videoIcon={isVideo && onWatch !== undefined} videoIcon={isVideo && onWatch !== undefined}
onWatch={() => onWatch?.(file)} onWatch={() => onWatch?.(videoSource)}
downloadIcon={ downloadIcon={
onDownload !== undefined || downloadUrl !== undefined onDownload !== undefined || downloadUrl !== undefined
} }
......
...@@ -56,9 +56,15 @@ export interface FileMosaicPropsMap extends OverridableComponentProps { ...@@ -56,9 +56,15 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
/** /**
* A string representation or web url of the image * A string representation or web url of the image
* that will be set to the "src" prop of an <img/> tag * that will be set to the "src" prop of an <img/> tag
* <img src={`${url}`} /> * <img src={`${imageUrl}`} />
*/ */
imageUrl?: string; 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 * If true, a background blur image will be shown
*/ */
...@@ -91,7 +97,7 @@ export interface FileMosaicPropsMap extends OverridableComponentProps { ...@@ -91,7 +97,7 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
/** /**
* A function that return a file object when "play" button is presssed or clicked * 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. * Event that is triggered when `delete` button is clicked or pressed.
* If present, `delete` button will be visible. * If present, `delete` button will be visible.
......
...@@ -19,14 +19,16 @@ const useFileMosaicInitializer = ( ...@@ -19,14 +19,16 @@ const useFileMosaicInitializer = (
valid: boolean | undefined | null, valid: boolean | undefined | null,
preview: boolean, preview: boolean,
imageUrl: string | undefined, imageUrl: string | undefined,
videoUrl: string | undefined,
xhr?: XMLHttpRequest, 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 [isImage, setIsImage] = React.useState<boolean>(false);
const [isVideo, setIsVideo] = React.useState<boolean>(false); const [isVideo, setIsVideo] = React.useState<boolean>(false);
const [url, setUrl] = React.useState<string>(""); const [url, setUrl] = React.useState<string>("");
const [imageSource, setImageSource] = React.useState<string | undefined>(undefined); const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
const [videoSource, setVideoSource] = React.useState<File | string | undefined>(undefined);
const [isReady,setIsReady]=React.useState(false); const [isReady,setIsReady]=React.useState(false);
...@@ -37,6 +39,7 @@ const useFileMosaicInitializer = ( ...@@ -37,6 +39,7 @@ const useFileMosaicInitializer = (
valid: boolean | undefined | null, valid: boolean | undefined | null,
preview: boolean, preview: boolean,
imageUrl: string | undefined, imageUrl: string | undefined,
videoUrl: string | undefined,
xhr?: XMLHttpRequest, xhr?: XMLHttpRequest,
progress?: number progress?: number
) => { ) => {
...@@ -57,10 +60,15 @@ const useFileMosaicInitializer = ( ...@@ -57,10 +60,15 @@ const useFileMosaicInitializer = (
setImageSource(imageUrl); setImageSource(imageUrl);
setIsReady(true); setIsReady(true);
return; return;
} else if(videoUrl){
setIsVideo(true);
setVideoSource(videoUrl);
setIsReady(true);
}else { }else {
const [headerMime, tailMime] = getHeaderAndTail(file, type); const [headerMime, tailMime] = getHeaderAndTail(file, type);
setIsImage(headerMime === "image"); setIsImage(headerMime === "image");
setIsVideo( setIsVideo(
headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime) headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
); );
...@@ -93,7 +101,7 @@ const useFileMosaicInitializer = ( ...@@ -93,7 +101,7 @@ const useFileMosaicInitializer = (
////// CLEAN UP ////// CLEAN UP
React.useEffect(() => { React.useEffect(() => {
init(file, name, type, valid, preview || false, imageUrl); init(file, name, type, valid, preview || false, imageUrl,videoUrl);
return () => { return () => {
setImageSource(undefined); setImageSource(undefined);
setIsImage(false); setIsImage(false);
...@@ -101,8 +109,9 @@ const useFileMosaicInitializer = ( ...@@ -101,8 +109,9 @@ const useFileMosaicInitializer = (
setIsReady(false); setIsReady(false);
}; };
// eslint-disable-next-line // eslint-disable-next-line
}, [file, name, type, valid, preview, imageUrl,]); }, [file, name, type, valid, preview, imageUrl,videoUrl]);
return [isReady,isImage, isVideo, url, imageSource];
return [isReady,isImage, isVideo, url, imageSource,videoSource];
} }
export default useFileMosaicInitializer; export default useFileMosaicInitializer;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment