diff --git a/web/src/components/MemoAttachment.tsx b/web/src/components/MemoAttachment.tsx index 825af5eb3..2c6e318b5 100644 --- a/web/src/components/MemoAttachment.tsx +++ b/web/src/components/MemoAttachment.tsx @@ -1,5 +1,5 @@ import { Attachment } from "@/types/proto/api/v1/attachment_service"; -import { getAttachmentUrl } from "@/utils/attachment"; +import { getAttachmentUrl, isMidiFile } from "@/utils/attachment"; import AttachmentIcon from "./AttachmentIcon"; interface Props { @@ -19,7 +19,7 @@ const MemoAttachment: React.FC = (props: Props) => {
- {attachment.type.startsWith("audio") ? ( + {attachment.type.startsWith("audio") && !isMidiFile(attachment.type) ? ( ) : ( <> diff --git a/web/src/utils/attachment.ts b/web/src/utils/attachment.ts index 8db275849..cf6ab9f4f 100644 --- a/web/src/utils/attachment.ts +++ b/web/src/utils/attachment.ts @@ -13,7 +13,7 @@ export const getAttachmentType = (attachment: Attachment) => { return "image/*"; } else if (attachment.type.startsWith("video")) { return "video/*"; - } else if (attachment.type.startsWith("audio")) { + } else if (attachment.type.startsWith("audio") && !isMidiFile(attachment.type)) { return "audio/*"; } else if (attachment.type.startsWith("text")) { return "text/*"; @@ -40,6 +40,11 @@ export const isImage = (t: string) => { return t.startsWith("image/") && !isPSD(t); }; +// isMidiFile returns true if the given mime type is a MIDI file. +export const isMidiFile = (mimeType: string): boolean => { + return mimeType === "audio/midi" || mimeType === "audio/mid" || mimeType === "audio/x-midi" || mimeType === "application/x-midi"; +}; + const isPSD = (t: string) => { return t === "image/vnd.adobe.photoshop" || t === "image/x-photoshop" || t === "image/photoshop"; };