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

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)
@@ -344,14 +344,10 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
           deleteIcon={onDelete !== undefined}
           onDelete={handleDelete}
           darkMode={darkMode}          
-          valid={valid}
-          uploadStatus={uploadStatus}
-          localization={localization}
-          sizeFormatted={sizeFormatted}
           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}

src/files-ui/components/file-card/components/FileCardRightActions.tsx

@@ -14,12 +14,6 @@ declare type FileCardRightActionsProps = {
   deleteIcon?: boolean;
   onDelete?: Function;
   
-  valid: boolean | null | undefined;
-  uploadStatus?: UPLOADSTATUS;
-  localization?: Localization;
-
-  sizeFormatted: string;
-
   imageIcon: boolean;
   onSee: ((imageSource: string | undefined) => void) | undefined;
 
@@ -49,13 +43,10 @@ const FileCardRightActions: React.FC<FileCardRightActionsProps> = (
     onOpenInfo,
     onSee,
     onWatch,
-    sizeFormatted,
-    valid,
+
     videoIcon,
-    localization,
-    uploadStatus,
     isActive,
-    visible
+    visible,
   } = props;
   if (visible)
     return (
@@ -129,7 +120,7 @@ if(visible)
           )}
         </div>
       </>
-  )
-  return <></>
+    );
+  return <></>;
 };
 export default FileCardRightActions;

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,
@@ -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
               }

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.

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 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;