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/assets/javascripts/discourse/components/chat-upload.hbs

@@ -13,6 +13,10 @@
   <video class="chat-video-upload" preload="metadata" controls>
     <source src={{@upload.url}} />
   </video>
+{{else if (eq this.type this.AUDIO_TYPE)}}
+  <audio class="chat-audio-upload" preload="metadata" controls>
+    <source src={{@upload.url}} />
+  </audio>
 {{else}}
   <a
     class="chat-other-upload"

plugins/chat/assets/javascripts/discourse/components/chat-upload.js

@@ -1,7 +1,7 @@
 import Component from "@glimmer/component";
 
 import { inject as service } from "@ember/service";
-import { isImage, isVideo } from "discourse/lib/uploads";
+import { isAudio, isImage, isVideo } from "discourse/lib/uploads";
 import { action } from "@ember/object";
 import { tracked } from "@glimmer/tracking";
 import { htmlSafe } from "@ember/template";
@@ -13,6 +13,7 @@ export default class extends Component {
 
   IMAGE_TYPE = "image";
   VIDEO_TYPE = "video";
+  AUDIO_TYPE = "audio";
   ATTACHMENT_TYPE = "attachment";
 
   get type() {
@@ -24,6 +25,10 @@ export default class extends Component {
       return this.VIDEO_TYPE;
     }
 
+    if (isAudio(this.args.upload.original_filename)) {
+      return this.AUDIO_TYPE;
+    }
+
     return this.ATTACHMENT_TYPE;
   }
 

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);