chore: update resource type checks (#2081)

web/src/components/MemoResourceListView.tsx

 import { ImageList, ImageListItem, useMediaQuery } from "@mui/material";
 import { absolutifyLink } from "@/helpers/utils";
-import { getResourceUrl } from "@/utils/resource";
+import { getResourceType, getResourceUrl } from "@/utils/resource";
 import SquareDiv from "./kit/SquareDiv";
 import MemoResource from "./MemoResource";
 import showPreviewImageDialog from "./PreviewImageDialog";
@@ -24,17 +24,15 @@ const MemoResourceListView: React.FC<Props> = (props: Props) => {
     ...props,
   };
   const matches = useMediaQuery("(min-width:640px)");
-  const imageResourceList = resourceList.filter((resource) => resource.type.startsWith("image"));
+  const imageResourceList = resourceList.filter((resource) => getResourceType(resource).startsWith("image"));
   const videoResourceList = resourceList.filter((resource) => resource.type.startsWith("video"));
   const otherResourceList = resourceList.filter(
     (resource) => !imageResourceList.includes(resource) && !videoResourceList.includes(resource)
   );
 
-  const imgUrls = imageResourceList
-    .filter((resource) => resource.type.startsWith("image"))
-    .map((resource) => {
-      return getResourceUrl(resource);
-    });
+  const imgUrls = imageResourceList.map((resource) => {
+    return getResourceUrl(resource);
+  });
 
   const handleImageClick = (imgUrl: string) => {
     const index = imgUrls.findIndex((url) => url === imgUrl);

web/src/components/ResourceCover.tsx

 import React from "react";
-import { getResourceUrl } from "@/utils/resource";
+import { getResourceType, getResourceUrl } from "@/utils/resource";
 import Icon from "./Icon";
 import SquareDiv from "./kit/SquareDiv";
 import showPreviewImageDialog from "./PreviewImageDialog";
@@ -9,32 +9,6 @@ interface ResourceCoverProps {
   resource: Resource;
 }
 
-const getResourceType = (resource: Resource) => {
-  if (resource.type.startsWith("image")) {
-    return "image/*";
-  } else if (resource.type.startsWith("video")) {
-    return "video/*";
-  } else if (resource.type.startsWith("audio")) {
-    return "audio/*";
-  } else if (resource.type.startsWith("text")) {
-    return "text/*";
-  } else if (resource.type.startsWith("application/epub+zip")) {
-    return "application/epub+zip";
-  } else if (resource.type.startsWith("application/pdf")) {
-    return "application/pdf";
-  } else if (resource.type.includes("word")) {
-    return "application/msword";
-  } else if (resource.type.includes("excel")) {
-    return "application/msexcel";
-  } else if (resource.type.startsWith("application/zip")) {
-    return "application/zip";
-  } else if (resource.type.startsWith("application/x-java-archive")) {
-    return "application/x-java-archive";
-  } else {
-    return "application/octet-stream";
-  }
-};
-
 const ResourceCover = ({ resource }: ResourceCoverProps) => {
   const resourceType = getResourceType(resource);
   const resourceUrl = getResourceUrl(resource);

web/src/components/ResourceItemDropdown.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import toast from "react-hot-toast";
 import { useResourceStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
-import { getResourceUrl } from "@/utils/resource";
+import { getResourceType, getResourceUrl } from "@/utils/resource";
 import showChangeResourceFilenameDialog from "./ChangeResourceFilenameDialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
@@ -20,7 +20,7 @@ const ResourceItemDropdown = ({ resource }: Props) => {
 
   const handlePreviewBtnClick = (resource: Resource) => {
     const resourceUrl = getResourceUrl(resource);
-    if (resource.type.startsWith("image")) {
+    if (getResourceType(resource).startsWith("image")) {
       showPreviewImageDialog([getResourceUrl(resource)], 0);
     } else {
       window.open(resourceUrl);

web/src/utils/resource.ts

@@ -5,3 +5,34 @@ export const getResourceUrl = (resource: Resource, withOrigin = true) => {
 
   return `${withOrigin ? window.location.origin : ""}/o/r/${resource.id}`;
 };
+
+export const getResourceType = (resource: Resource) => {
+  if (resource.type.startsWith("image") && isImage(resource.type)) {
+    return "image/*";
+  } else if (resource.type.startsWith("video")) {
+    return "video/*";
+  } else if (resource.type.startsWith("audio")) {
+    return "audio/*";
+  } else if (resource.type.startsWith("text")) {
+    return "text/*";
+  } else if (resource.type.startsWith("application/epub+zip")) {
+    return "application/epub+zip";
+  } else if (resource.type.startsWith("application/pdf")) {
+    return "application/pdf";
+  } else if (resource.type.includes("word")) {
+    return "application/msword";
+  } else if (resource.type.includes("excel")) {
+    return "application/msexcel";
+  } else if (resource.type.startsWith("application/zip")) {
+    return "application/zip";
+  } else if (resource.type.startsWith("application/x-java-archive")) {
+    return "application/x-java-archive";
+  } else {
+    return "application/octet-stream";
+  }
+};
+
+// isImage returns true if the given mime type is an image.
+export const isImage = (t: string) => {
+  return t === "image/jpeg" || t === "image/png" || t === "image/gif" || t === "image/svg+xml" || t === "image/webp";
+};