Add audio player

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: "<i class='fa fa-play-circle'></i> 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());
+    }
+}

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({

assets/templates/components/audioPlayer.html

@@ -0,0 +1,38 @@
+<!-- Audio player template -->
+
+<style>
+.audio-player {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: #000000a3;
+    top: 0px;
+    left: 0px;
+    z-index: 1030;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.audio-player div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.audio-player .close {
+    color: white;
+    margin: 20px;
+    opacity: 1;
+    text-shadow: unset;
+    font-weight: unset;
+}
+</style>
+
+<div class="audio-player">
+    <div>
+        <audio controls></audio>
+        
+        <p class="close a">tr("Close")</p>
+    </div>
+</div>

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