[FEAT]: add onWatch prop on FileItem component

Author: JinSSJ3

src/components/file-item/components/FileItem/FileItem.tsx

@@ -22,6 +22,7 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
     file,
     onDelete,
     onSee,
+    onWatch,
     style,
     preview,
     onlyImage,
@@ -58,6 +59,7 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
   const sizeFormatted: string = file ? fileSizeFormater(file.size) : "0 KB";
 
   const [isImage, setIsImage] = useState<boolean>(false);
+  const [isVideo, setIsVideo] = useState<boolean>(false);
   const [url, setUrl] = useState<string>("");
   const [imageSource, setImageSource] = useState<string | undefined>(undefined);
   //alwaysActive
@@ -68,6 +70,7 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
     return () => {
       setImageSource(undefined);
       setIsImage(false);
+      setIsVideo(false);
     };
   }, [file, valid, preview, imageUrl]);
 
@@ -90,6 +93,7 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
     } else {
       const headerMime = file.type ? file.type.split("/")[0] : "octet";
       setIsImage(headerMime === "image");
+      setIsVideo(headerMime === "video");
       if (preview && valid && headerMime === "image") {
         const response = await readImagePromise(file);
         if (response) {
@@ -117,6 +121,11 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
 
     setShowInfo(false);
   };
+  const handleOpenVideo = async () => {
+    if (file) {
+      onWatch?.(file);
+    }
+  };
   const handleOpenImage = async () => {
     if (imageSource && file) {
       if (hd) {
@@ -159,6 +168,8 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
               fileName={file.name}
               onDelete={onDelete ? handleDelete : undefined}
               onOpenImage={onSee && preview ? handleOpenImage : undefined}
+              onOpenVideo={onWatch && preview ? handleOpenVideo : undefined}
+              isVideo={isVideo}
               onOpenInfo={handleOpenInfo}
               info={info || false}
               valid={valid || false}

src/components/file-item/components/FileItem/FileItemProps.ts

@@ -33,11 +33,15 @@ export interface FileItemProps extends PaperProps {
     /**
      * A function of what to do when close button is pressed or clicked
      */
-    onDelete?: (imageUrl: number | string | undefined) => void;
+    onDelete?: (fileId: number | string | undefined) => void;
     /**
-     * A function of what to do when "see" button is pressed or clicked
+     * A function that return a file object when "see" button is pressed or clicked
      */
     onSee?: (imageUrl: string) => void;
+    /**
+     * A function that return a file object when "play" button is presssed or clicked
+     */
+    onWatch?: (videoUrl: File) => void;
     /**
      * Whether to see as grid or inline (horizontal list)
      */