[FEAT]: Add ogv, oga and ogx icons

Author: JinSSJ3

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

@@ -92,8 +92,9 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
       return;
     } else {
       const headerMime = file.type ? file.type.split("/")[0] : "octet";
+      const tailMime = file.type ? file.type.split("/")[1] : "octet";
       setIsImage(headerMime === "image");
-      setIsVideo(headerMime === "video");
+      setIsVideo(headerMime === "video" && ["mp4","ogg","webm"].includes(tailMime));
       if (preview && valid && headerMime === "image") {
         const response = await readImagePromise(file);
         if (response) {

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

@@ -55,7 +55,8 @@ const FileItemMainLayer: FC<FileItemMainLayerProps> = (
     localization,
     hovering,
   } = props;
-
+  console.log("FileItemMainLayer onOpenVideo", onOpenVideo);
+  console.log("FileItemMainLayer isVideo", isVideo);
   const handleDelete = () => {
     onDelete?.();
   };

src/components/file-item/utils/IconFiles/index.ts

@@ -126,6 +126,12 @@ export const octet = "https://user-images.githubusercontent.com/43678736/1320866
 export const odp = "https://user-images.githubusercontent.com/43678736/132086667-6c7dcbcc-8d83-41a2-8e0a-85b09e2791ae.png";
 export const ods = "https://user-images.githubusercontent.com/43678736/132086668-9f246e91-cf2e-49cf-9617-e1fbb71abbbb.png";
 export const odt = "https://user-images.githubusercontent.com/43678736/132086669-46113762-84d1-4b32-9441-b0138ce17a5d.png";
+
+//ogg type
+export const oga = "https://user-images.githubusercontent.com/43678736/145835364-2054509d-3448-4d34-921f-73dd6e297fc7.png";
+export const ogv = "https://user-images.githubusercontent.com/43678736/145835367-19172bf8-cd5a-4cbe-b512-d0de1d91f269.png";
+export const ogx = "https://user-images.githubusercontent.com/43678736/145835373-a57ef0f5-3968-483b-9f55-6d67e7f1dcea.png";
+
 export const opus = "https://user-images.githubusercontent.com/43678736/132086670-0f96e770-cedc-4635-a5f9-cf97894c1d7a.png";
 export const otf = "https://user-images.githubusercontent.com/43678736/132086671-02ad35ef-ec3a-4a65-abd5-5bf794dfcf7b.png";
 export const pdf = "https://user-images.githubusercontent.com/43678736/132086672-3a856fda-823d-4997-b802-c7c640e6ef44.png";

src/components/file-item/utils/mime.files.ts

@@ -10,10 +10,10 @@ import {
     html, icalendar,
     jar, java, javascript, jpeg, json, jsonld,
     midi, mp3, mp4, mpeg, mpkg,
-    octet, odp, ods, odt, opus, otf,
+    octet, odp, ods, odt, oga, ogv, ogx, opus, otf,
     pdf, php, png, pptx, psd, python,
     rar, react, rtf,
-    sass, sevenzip, sh,  swf,
+    sass, sevenzip, sh, swf,
     tar, text, tiff, ttf, typescript,
     vsd, vue,
     wav, weba, webm, webp, wma, wmv, woff,
@@ -33,7 +33,7 @@ export const audioSelector = (tailMime: string): string => {
         case "midi": return "midi";
         case "x-midi": return "midi";
         case "mpeg": return "mpeg";//mp3
-        // case "ogg": return "oga";
+        case "ogg": return "oga";
         case "opus": return "opus";
         case "wav": return "wav";
         case "webm": return "webm";
@@ -90,9 +90,10 @@ export const videoSelector = (tailMime: string): string => {
     switch (tailMime) {
         case "x-msvideo": return "avi";
         case "msvideo": return "avi";
+        case "avi": return "avi";
         case "mp4": return "mp4";
         case "mpeg": return "mpeg";
-        // case "ogg": return "ogv";
+        case "ogg": return "ogv";
         case "mp2t": return "mp2t";
         case "wmv": return "wmv";
 
@@ -132,7 +133,7 @@ export const applicationSelector = (tailMime: string): string => {
         case "json": return "json";
         case "ld+json": return "jsonld";
         case "vnd.apple.installer+xml": return "mpkg";
-        //case "ogg": return "ogx";
+        case "ogg": return "ogx";
         case "vnd.rar": return "rar";
         case "rtf": return "rtf";
         case "x-sh": return "sh";
@@ -340,9 +341,9 @@ const mimeUrlList: MimeSelector = {
     odp: odp,
     ods: ods,
     odt: odt,
-    // oga: oga,
-    //ogv: ogv,
-    // ogx: ogx,
+    oga: oga,
+    ogv: ogv,
+    ogx: ogx,
     opus: opus,
     otf: otf,
     png: png,

src/components/video-preview/VideoPreview.tsx

@@ -6,19 +6,29 @@ import { Cancel } from "../icons";
 import { VideoPreviewProps } from "./VideoPreviewProps";
 import "./VideoPreview.scss";
 const VideoPreview: FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
-  const { videoSrc, openVideo, onClose, autoplay, controls , style} = props;
+  const { videoSrc, openVideo, onClose, autoplay, controls, style } = props;
   const videoRef = useRef<HTMLVideoElement>(null);
   const [source, setSource] = useState<string | undefined>(undefined);
 
   useEffect(() => {
+    //if not undefined
     if (!videoSrc) {
       return;
     }
+
     if (typeof videoSrc === "string") {
+      //if a url string is given, assign it directly
       setSource(videoSrc);
     } else {
-      const newVideoSrc = URL.createObjectURL(videoSrc);
-      setSource(newVideoSrc);
+      //if a File object is given, check if is a supported format
+      const headerMime = videoSrc.type ? videoSrc.type.split("/")[0] : "octet";
+      const tailMime = videoSrc.type ? videoSrc.type.split("/")[1] : "octet";
+
+      if (headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)) {
+        //set the video source and create the uri string if is a supported video format
+        const newVideoSrc = URL.createObjectURL(videoSrc);
+        setSource(newVideoSrc);
+      }
     }
   }, [videoSrc]);
   useEffect(() => {
@@ -27,10 +37,8 @@ const VideoPreview: FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
     }
   }, [source]);
 
- 
-
   function handleClose<T extends HTMLDivElement>(
-    e: React.MouseEvent<T, MouseEvent>
+    e: React.MouseEvent<T, MouseEvent>,
   ): void {
     e.stopPropagation();
     onClose?.();
@@ -41,7 +49,8 @@ const VideoPreview: FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
         className={openVideo ? "video-container show" : "video-container"}
         onClick={handleClose}
       >
-        {videoSrc && openVideo && (
+        {//videoSrc && 
+        openVideo && (
           <div
             className="vid-rel-container"
             onClick={(evt) => {