FEATURE: Inline audio player for chat uploads (#20175)

Similar to https://github.com/discourse/discourse-chat/pull/1283,
this adds the <audio> inline player for uploaded audio files in
chat channels.

plugins/chat/test/javascripts/components/chat-upload-test.js

@@ -23,7 +23,7 @@ const IMAGE_FIXTURE = {
 
 const VIDEO_FIXTURE = {
   id: 290,
-  url: null, // Nulled out to avoid actually setting the img src - avoids an HTTP request
+  url: null, // Nulled out to avoid actually setting the src - avoids an HTTP request
   original_filename: "video.mp4",
   filesize: 172214,
   width: 1024,
@@ -37,6 +37,22 @@ const VIDEO_FIXTURE = {
   human_filesize: "168 KB",
 };
 
+const AUDIO_FIXTURE = {
+  id: 290,
+  url: null, // Nulled out to avoid actually setting the src - avoids an HTTP request
+  original_filename: "song.mp3",
+  filesize: 172214,
+  width: 1024,
+  height: 768,
+  thumbnail_width: 666,
+  thumbnail_height: 500,
+  extension: "mp3",
+  short_url: "upload://mnCnqY5tunCFw2qMgtPnu1mu1C9.mp3",
+  short_path: "/uploads/short-url/mnCnqY5tunCFw2qMgtPnu1mu1C9.mp3",
+  retain_hours: null,
+  human_filesize: "168 KB",
+};
+
 const TXT_FIXTURE = {
   id: 290,
   url: "https://example.com/file.txt",
@@ -92,6 +108,21 @@ module("Discourse Chat | Component | chat-upload", function (hooks) {
     );
   });
 
+  test("with a audio", async function (assert) {
+    this.set("upload", AUDIO_FIXTURE);
+
+    await render(hbs`<ChatUpload @upload={{this.upload}} />`);
+
+    assert.true(exists("audio.chat-audio-upload"), "displays as an audio");
+    const audio = query("audio.chat-audio-upload");
+    assert.true(audio.hasAttribute("controls"), "has audio controls");
+    assert.strictEqual(
+      audio.getAttribute("preload"),
+      "metadata",
+      "audio has correct preload settings"
+    );
+  });
+
   test("non image upload", async function (assert) {
     this.set("upload", TXT_FIXTURE);