From ee14bcb659d58572d1c2a936523e96d3bacfcf42 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Sat, 6 Mar 2021 11:09:59 +0100
Subject: [PATCH] Add audio player

---
 assets/js/components/smallAudioPlayer.js      | 45 +++++++++++++++++++
 assets/js/pages/conversations/conversation.js |  4 ++
 assets/templates/components/audioPlayer.html  | 38 ++++++++++++++++
 system/config/dev.config.php                  |  5 ++-
 4 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/components/smallAudioPlayer.js
 create mode 100644 assets/templates/components/audioPlayer.html

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: "<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());
+    }
+}
\ 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 @@
+<!-- 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>
\ 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",