diff --git a/assets/js/components/smallAudioPlayer.js b/assets/js/components/smallAudioPlayer.js new file mode 100644 index 00000000..dee0ed57 --- /dev/null +++ b/assets/js/components/smallAudioPlayer.js @@ -0,0 +1,45 @@ +/** + * 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/pages/conversations/conversation.js b/assets/js/pages/conversations/conversation.js index 8479d3b8..92fefe73 100644 --- a/assets/js/pages/conversations/conversation.js +++ b/assets/js/pages/conversations/conversation.js @@ -329,6 +329,10 @@ const ConversationPageConvPart = { }; } + else if(messageFile.type == "audio/mpeg") { + new SmallAudioPlayer(messageContentContainer, messageFile.url) + } + // Fallback else { let letFileLink = createElem2({ diff --git a/assets/templates/components/audioPlayer.html b/assets/templates/components/audioPlayer.html new file mode 100644 index 00000000..e255b2da --- /dev/null +++ b/assets/templates/components/audioPlayer.html @@ -0,0 +1,38 @@ + + + + +
+
+ + +

tr("Close")

+
+
\ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index af304648..2d7193a8 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -474,11 +474,14 @@ class Dev { "js/components/pacman.js", // Manon - "js/components/manon.js", + //"js/components/manon.js", // Password input "js/components/passwordInput.js", + // Small audio player + "js/components/smallAudioPlayer.js", + //User scripts "js/user/loginTokens.js", "js/user/userLogin.js",