diff --git a/assets/js/components/smallAudioPlayer.js b/assets/js/components/smallAudioPlayer.js deleted file mode 100644 index dee0ed57..00000000 --- a/assets/js/components/smallAudioPlayer.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Small audio player - * - * @author Pierre Hubert - */ - -class SmallAudioPlayer { - /** - * @param {HTMLElement} target - * @param {String} url - */ - constructor(target, url) { - - let link = createElem2({ - appendTo: target, - type: "span", - class: "a", - innerHTML: " Audio file" - }); - - link.addEventListener("click", e => { - e.preventDefault(); - - this.showPlayer(url); - }) - } - - - /** - * Show full screen player - * @param {String} url - */ - async showPlayer(url) { - const tpl = await Page.loadHTMLTemplate("components/audioPlayer.html") - - let el = document.createElement("div"); - el.innerHTML = tpl; - document.body.appendChild(el); - - el.querySelector("audio").src = url; - - el.querySelector(".close").addEventListener("click", e => el.remove()); - el.addEventListener("click", e => el.remove()); - } -} \ No newline at end of file diff --git a/assets/js/components/smallMediaPlayer.js b/assets/js/components/smallMediaPlayer.js new file mode 100644 index 00000000..04905925 --- /dev/null +++ b/assets/js/components/smallMediaPlayer.js @@ -0,0 +1,65 @@ +/** + * Small media player + * + * @author Pierre Hubert + */ + +class SmallMediaPlayer { + /** + * @param {HTMLElement} target + * @param {String} url + */ + constructor(target, url, isVideo) { + + let link = createElem2({ + appendTo: target, + type: "span", + class: "a", + innerHTML: " "+(isVideo ? "Video" : "Audio")+" file" + }); + + link.addEventListener("click", e => { + e.preventDefault(); + + this.showPlayer(url, isVideo); + }) + } + + + /** + * Show full screen player + * @param {String} url + */ + async showPlayer(url, isVideo) { + try { + const tpl = await Page.loadHTMLTemplate("components/mediaPlayer.html") + + let el = document.createElement("div"); + el.innerHTML = tpl; + document.body.appendChild(el); + + let target = el.querySelector(".media-target"); + if (!isVideo) { + let audio = document.createElement("audio"); + audio.controls = true; + audio.src = url; + target.appendChild(audio); + } + else { + let video = document.createElement("video"); + video.controls = true; + video.src = url; + target.appendChild(video); + } + + + el.querySelector(".close").addEventListener("click", e => el.remove()); + el.addEventListener("click", e => el.remove()); + } + + catch(e) { + console.error(e); + notify(tr("Failed to paly media!"), "danger"); + } + } +} \ No newline at end of file diff --git a/assets/js/pages/conversations/conversation.js b/assets/js/pages/conversations/conversation.js index 92fefe73..f8ac6d01 100644 --- a/assets/js/pages/conversations/conversation.js +++ b/assets/js/pages/conversations/conversation.js @@ -330,7 +330,11 @@ const ConversationPageConvPart = { } else if(messageFile.type == "audio/mpeg") { - new SmallAudioPlayer(messageContentContainer, messageFile.url) + new SmallMediaPlayer(messageContentContainer, messageFile.url, false) + } + + else if(messageFile.type == "video/mp4") { + new SmallMediaPlayer(messageContentContainer, messageFile.url, true) } // Fallback diff --git a/assets/templates/components/audioPlayer.html b/assets/templates/components/mediaPlayer.html similarity index 68% rename from assets/templates/components/audioPlayer.html rename to assets/templates/components/mediaPlayer.html index e255b2da..e141e6e5 100644 --- a/assets/templates/components/audioPlayer.html +++ b/assets/templates/components/mediaPlayer.html @@ -1,7 +1,7 @@ - + -
tr("Close")