From e4a30712b5cfbeaf6632622bdc4ce2e83a37f70a Mon Sep 17 00:00:00 2001
From: gparant <g.parant@thecodingmachine.com>
Date: Sun, 26 Apr 2020 17:42:49 +0200
Subject: [PATCH] Update front mutli peer conncexion

---
 front/src/WebRtc/MediaManager.ts |  4 +--
 front/src/WebRtc/SimplePeer.ts   | 42 +++++++++++++++++++++-----------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index ac1e9bbb..56e02d44 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -118,8 +118,8 @@ export class MediaManager {
      */
     addActiveVideo(userId : any){
         let elementRemoteVideo = document.getElementById("activeCam");
-        elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="myCamVideo'+userId+'" autoplay></video>');
+        elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="'+userId+'" autoplay></video>');
 
-        this.remoteVideo[userId] = document.getElementById('myCamVideo'+userId);
+        this.remoteVideo[userId] = document.getElementById(userId);
     }
 }
\ No newline at end of file
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index c5656c3b..fabc876e 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -41,47 +41,61 @@ export class SimplePeer {
 
     /**
      *
+     * @param message
      */
     receiveWebrtcStart(message: string) {
         let data = JSON.parse(message);
 
         //create pear connexion of user stared
-        this.createPeerConnexion(data.usersId, data.initiator);
+        this.createPeerConnexion(data);
     }
 
     /**
      *
-     * @param userId
-     * @param initiator
+     * @param users
      */
-    createPeerConnexion(usersId : Array<string>, initiator : boolean = false) {
-        usersId.forEach((userId: any) => {
-            if(this.PeerConnexionArray[userId]){
+    createPeerConnexion(users : Array<any>) {
+        console.log("createPeerConnexion", users);
+        users.forEach((user: any) => {
+            if(this.PeerConnexionArray[user.userId]){
                 return;
             }
-            this.MediaManager.addActiveVideo(userId);
+            this.MediaManager.addActiveVideo(user.userId);
 
-            this.PeerConnexion = new Peer({initiator: initiator});
+            this.PeerConnexion = new Peer({initiator: user.initiator});
 
             this.PeerConnexion.on('signal', (data: any) => {
                 this.sendWebrtcSignal(data);
             });
 
             this.PeerConnexion.on('stream', (stream: MediaStream) => {
-                this.stream(userId, stream);
+                this.stream(user.userId, stream);
             });
 
-            this.PeerConnexionArray[userId] = this.PeerConnexion;
-            this.addMedia(userId);
+            this.PeerConnexionArray[user.userId] = this.PeerConnexion;
+            this.addMedia(user.userId);
         });
+
+        /*let elements = document.getElementById("activeCam");
+        console.log("element.childNodes", elements.childNodes);
+        elements.childNodes.forEach((element : any) => {
+            if(!element.id){
+                return;
+            }
+            if(users.find((user) => user.userId === element.id)){
+                return;
+            }
+            elements.removeChild(element);
+        });*/
     }
 
     /**
-     * permit to send signal
+     *
+     * @param userId
      * @param data
      */
-    sendWebrtcSignal(data: any) {
-        this.Connexion.sendWebrtcSignal(data, this.RoomId);
+    sendWebrtcSignal(data: any, userId : string) {
+        this.Connexion.sendWebrtcSignal(data, this.RoomId, userId);
     }
 
     /**