From a4d7eb9903546dd7306d33c81bfdfc9a9cf3391a Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 13 Apr 2020 09:26:15 +0200
Subject: [PATCH] Improve videos appearance

---
 assets/css/components/calls/window.css |  9 +++++++-
 assets/js/components/calls/window.js   | 30 ++++++++++++++++++++------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/assets/css/components/calls/window.css b/assets/css/components/calls/window.css
index 92482843..c9b15dd2 100644
--- a/assets/css/components/calls/window.css
+++ b/assets/css/components/calls/window.css
@@ -69,11 +69,18 @@
 	justify-content: center;
 }
 
-.call-window .videos-area video {
+.call-window .videos-area .video {
 	flex-shrink: 1;
 	flex: 1;
 	max-height: 100%;
 	max-width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.call-window .videos-area .video video {
+	max-width: 100%;
 }
 
 .call-window .window-bottom {
diff --git a/assets/js/components/calls/window.js b/assets/js/components/calls/window.js
index 7181a80e..7dbfe3bd 100644
--- a/assets/js/components/calls/window.js
+++ b/assets/js/components/calls/window.js
@@ -365,6 +365,20 @@ class CallWindow extends CustomEvents {
 		return this.membersArea.querySelector("[data-call-member-name-id=\""+userID+"\"]");
 	}
 
+
+	/**
+	 * Remove the video element of a specific user
+	 * 
+	 * @param {number} peerID Target peer ID
+	 */
+	removeVideoElement(peerID) {
+		const el = this.videoEls.get(peerID);
+		this.videoEls.delete(peerID)
+
+		el.pause()
+		el.parentNode.remove()
+	}
+
 	/**
 	 * Remove a member connection
 	 * 
@@ -378,11 +392,7 @@ class CallWindow extends CustomEvents {
 
 		// Remove video (if any)
 		if(this.videoEls.has(userID)) {
-			const el = this.videoEls.get(userID);
-			this.videoEls.delete(userID)
-
-			el.pause()
-			el.remove()
+			this.removeVideoElement(userID)
 		}
 		
 		// Remove peer connection (if any)
@@ -471,11 +481,17 @@ class CallWindow extends CustomEvents {
 
 		// Remove any previous video stream
 		if(this.videoEls.has(peerID)) {
-			this.videoEls.get(peerID).remove()
+			this.removeVideoElement(peerID)
 		}
 
+		const videoContainer = createElem2({
+			appendTo: this.videosArea,
+			type: "div",
+			class: "video"
+		})
+
 		const videoEl = document.createElement(stream.getVideoTracks().length > 0 ?  "video" : "audio");
-		this.videosArea.appendChild(videoEl)
+		videoContainer.appendChild(videoEl)
 
 		videoEl.muted = muted;