Render audio attachments as a player (#429)

src/app/components/ContentLinkBlock.svelte

@@ -26,7 +26,7 @@
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/modal"
   import {PLATFORM_URL, THUMBNAIL_URL} from "@app/env"
-  import {IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/content"
+  import {AUDIO_CONTENT_TYPES, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/content"
   import {isRoomId} from "@app/rooms"
 
   const {value, event} = $props()
@@ -43,6 +43,10 @@
 
   const fileType = tagValue(tagSpec("file-type"), event.tags) || ""
 
+  const isAudio =
+    Boolean(url.match(/\.(mp3|m4a|wav|ogg|oga|opus|flac)$/)) ||
+    AUDIO_CONTENT_TYPES.includes(fileType)
+
   const getVideoPoster = (videoUrl: string): string | undefined => {
     if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
       return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
@@ -60,6 +64,8 @@
 
 {#if isRoomOrRelay}
   <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
+{:else if isAudio}
+  <audio controls src={url} preload="metadata" class="my-2 w-full max-w-xl"></audio>
 {:else}
   <Link {external} {href} class="my-2 block">
     {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}

src/app/content.ts

@@ -22,6 +22,16 @@ export const IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/gif", "ima
 
 export const VIDEO_CONTENT_TYPES = ["video/quicktime", "video/webm", "video/mp4"]
 
+export const AUDIO_CONTENT_TYPES = [
+  "audio/mpeg",
+  "audio/mp4",
+  "audio/wav",
+  "audio/x-wav",
+  "audio/ogg",
+  "audio/webm",
+  "audio/flac",
+]
+
 export const makeCommentFilter = (kinds: number[], extra: Filter = {}) => ({
   kinds: [COMMENT],
   "#K": kinds.map(String),