fix: Midi files show up as playable (#4991)

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: Props) => {
     <div
       className={`w-auto flex flex-row justify-start items-center text-muted-foreground hover:text-foreground hover:bg-accent rounded px-2 py-1 transition-colors ${className}`}
     >
-      {attachment.type.startsWith("audio") ? (
+      {attachment.type.startsWith("audio") && !isMidiFile(attachment.type) ? (
         <audio src={attachmentUrl} controls></audio>
       ) : (
         <>

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