From 1dd25634fd1faf544c691f9abe03d26a61b1c5c0 Mon Sep 17 00:00:00 2001
From: Jason Shawn D' Souza <jasonshawndsouza@gmail.com>
Date: Sun, 10 Aug 2025 07:23:41 +0100
Subject: [PATCH] fix: Midi files show up as playable (#4991)

---
 web/src/components/MemoAttachment.tsx | 4 ++--
 web/src/utils/attachment.ts           | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

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: 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>
       ) : (
         <>
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";
 };