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

assets/templates/components/mediaPlayer.html

@@ -1,7 +1,7 @@
-<!-- Audio player template -->
+<!-- media player template -->
 
 <style>
-.audio-player {
+.media-player {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -14,24 +14,29 @@
     align-items: center;
 }
 
-.audio-player div {
+.media-player div {
     display: flex;
     align-items: center;
     flex-direction: column;
 }
 
-.audio-player .close {
+.media-player .close {
     color: white;
     margin: 20px;
     opacity: 1;
     text-shadow: unset;
     font-weight: unset;
 }
+
+.media-target * {
+    max-width: 100%;
+    max-height: 100%;
+}
 </style>
 
-<div class="audio-player">
+<div class="media-player">
     <div>
-        <audio controls></audio>
+        <div class="media-target"></div>
         
         <p class="close a">tr("Close")</p>
     </div>

system/config/dev.config.php

@@ -479,8 +479,8 @@ class Dev {
 			// Password input
 			"js/components/passwordInput.js",
 
-			// Small audio player
-			"js/components/smallAudioPlayer.js",
+			// Small media player
+			"js/components/smallMediaPlayer.js",
 
 		//User scripts
 		"js/user/loginTokens.js",