Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Martin Brennan 2023-02-06 16:00:03 +10:00 committed by GitHub
parent 1c9759af5d
commit c3ace5ea8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/chat/assets/javascripts/discourse/components/chat-upload.hbs
View File

@ -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"

7
plugins/chat/assets/javascripts/discourse/components/chat-upload.js
View File

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

33
plugins/chat/test/javascripts/components/chat-upload-test.js
View File

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