Update

assets/css/components/calls/window.css

@@ -55,6 +55,10 @@
 	margin: 0px 5px;
 }
 
+.call-window .members-area span.ready {
+	color: rgb(1, 218, 1);
+}
+
 .call-window .videos-area {
 	display: flex;
 	flex-direction: row;

assets/js/components/calls/window.js

@@ -99,6 +99,11 @@ class CallWindow extends CustomEvents {
 				callID: this.conv.ID
 			})
 
+			// Apply this list of user
+			for(const user of currMembersList)
+				if(user.userID != userID())
+					await this.AddMember(user.userID)
+
 			// Start to connect to ready pears
 			for(const user of currMembersList)
 				if(user.userID != userID() && user.ready)
@@ -108,11 +113,6 @@ class CallWindow extends CustomEvents {
 			await this.startStreaming();
 
 
-			// Apply this list of user
-			for(const user of currMembersList)
-				if(user.userID != userID())
-					await this.AddMember(user.userID)
-
 		} catch(e) {
 			console.error(e)
 			notify("Could not initialize call!", "danger");
@@ -234,6 +234,16 @@ class CallWindow extends CustomEvents {
 
 	}
 
+	/**
+	 * Get the name element of a member
+	 * 
+	 * @param {number} userID The ID of the user to get
+	 * @return {HTMLElement|null}
+	 */
+	getMemberNameEl(userID) {
+		return this.membersArea.querySelector("[data-call-member-name-id=\""+userID+"\"]");
+	}
+
 	/**
 	 * Remove a member connection
 	 * 
@@ -241,6 +251,10 @@ class CallWindow extends CustomEvents {
 	 */
 	async RemoveMemberConnection(userID) {
 
+		const el = this.getMemberNameEl(userID)
+		if(el)
+			el.classList.remove("ready")
+
 		// Remove video (if any)
 		if(this.videoEls.has(userID)) {
 			const el = this.videoEls.get(userID);
@@ -266,7 +280,7 @@ class CallWindow extends CustomEvents {
 	async RemoveMember(userID) {
 		
 		// Remove user name
-		const el = this.membersArea.querySelector("[data-call-member-name-id=\""+userID+"\"]")
+		const el = this.getMemberNameEl(userID)
 		if(el)
 			el.remove()
 		
@@ -291,6 +305,11 @@ class CallWindow extends CustomEvents {
 	 */
 	addVideoStream(peerID, muted, stream) {
 
+		// Remove any previous video stream
+		if(this.videoEls.has(peerID)) {
+			this.videoEls.get(peerID).remove()
+		}
+
 		const videoEl = document.createElement(stream.getVideoTracks().length > 0 ?  "video" : "audio");
 		this.videosArea.appendChild(videoEl)
 
@@ -367,11 +386,16 @@ class CallWindow extends CustomEvents {
 			alert("Stream on main peer!!!")
 		});
 
+		/*
+
+		DO NOT DO THIS !!! On configuration change it would close
+		the call window...
+
 		this.mainPeer.on("close", () => {
 			console.log("Connection to main peer was closed.")
 			if(this.mainPeer)
 				this.Close(false);
-		});
+		});*/
 	}
 
 	/**
@@ -380,6 +404,18 @@ class CallWindow extends CustomEvents {
 	 * @param {number} peerID Target peer ID
 	 */
 	async PeerReady(peerID) {
+
+		// Mark the peer as ready
+		const el = this.getMemberNameEl(peerID)
+		if(el)
+			el.classList.add("ready")
+
+		
+		// Remove any previous connection
+		if(this.peersEls.has(peerID)) {
+			this.peersEls.get(peerID).destroy()
+		}
+
 		const peer = new SimplePeer({
 			initiator: false,
 			trickle: true, // Allow exchange of multiple ice candidates
@@ -404,7 +440,7 @@ class CallWindow extends CustomEvents {
 
 		peer.on("stream", stream => {
 			console.log("Got remote peer stream", stream)
-			
+
 			this.addVideoStream(peerID, false, stream)
 		});