Add video player

assets/js/components/smallAudioPlayer.js

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

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