From 0bbed7717a57f317a1f9efde5173f8bada37034f Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Mon, 8 Jun 2020 22:52:25 +0200
Subject: [PATCH] Continue screen sharing

---
 front/dist/index.html                |  5 ++---
 front/dist/resources/style/style.css | 30 ++++++++++++++++++++++++++++
 front/src/WebRtc/SimplePeer.ts       | 28 +++++++++++++++++++-------
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/front/dist/index.html b/front/dist/index.html
index 360d5a9a..02ec0205 100644
--- a/front/dist/index.html
+++ b/front/dist/index.html
@@ -108,12 +108,11 @@
                     <img id="monitor" src="resources/logos/monitor.svg">
                     <img id="monitor-close" src="resources/logos/monitor-close.svg">
                 </div>
-                <!--<div class="btn-call">
-                    <img src="resources/logos/phone.svg">
-                </div>-->
             </div>
         </div>
         -->
+        <div id="activeScreenSharing" class="active-screen-sharing active">
+        </div>
         <div id="webRtcSetup" class="webrtcsetup">
                 <img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
                 <video id="myCamVideoSetup" autoplay muted></video>
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 413bce71..d0dc2cd4 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -365,3 +365,33 @@ body {
 .chat-mode > div:last-child {
     flex-grow: 5;
 }
+
+/*SCREEN SHARING*/
+.active-screen-sharing video{
+    transform: scaleX(1);
+}
+.active-screen-sharing .screen-sharing-video-container video:hover{
+    width: 50%;
+}
+.active-screen-sharing .screen-sharing-video-container video{
+    position: absolute;
+    width: 25%;
+    height: auto;
+    left: 0;
+    top: 0;
+    transition: all 0.2s ease;
+}
+
+.active-screen-sharing .screen-sharing-video-container video:nth-child(1){
+    /*this is for camera of user*/
+    top: 0%;
+}
+.active-screen-sharing .screen-sharing-video-container video:nth-child(2){
+    top: 25%;
+}
+.active-screen-sharing .screen-sharing-video-container video:nth-child(3){
+    top: 50%;
+}
+.active-screen-sharing .screen-sharing-video-container video:nth-child(4) {
+    top: 75%;
+}
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index f24cc31d..6f5fd69a 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -289,14 +289,22 @@ export class SimplePeer {
      */
     private addMedia (userId : string) {
         try {
-            let localStream: MediaStream | null = mediaManager.localStream;
-            let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
             let PeerConnection = this.PeerConnectionArray.get(userId);
-
-            if (!PeerConnection || PeerConnection === undefined) {
+            if (!PeerConnection) {
                 throw new Error('While adding media, cannot find user with ID ' + userId);
             }
-            PeerConnection.write(new Buffer(JSON.stringify(Object.assign(mediaManager.constraintsMedia, {screen: localScreenCapture !== null}))));
+
+            if(userId.indexOf("screenSharing") > -1 && mediaManager.localScreenCapture){
+                for (const track of mediaManager.localScreenCapture.getTracks()) {
+                    PeerConnection.addTrack(track, mediaManager.localScreenCapture);
+                }
+                return;
+            }
+
+            let localStream: MediaStream | null = mediaManager.localStream;
+            let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
+
+            PeerConnection.write(new Buffer(JSON.stringify(Object.assign(this.MediaManager.constraintsMedia, {screen: localScreenCapture !== null}))));
 
             if(!localStream){
                 return;
@@ -321,15 +329,21 @@ export class SimplePeer {
         if (this.MediaManager.localScreenCapture) {
             let screenSharingUser: UserSimplePeerInterface = {
                 userId: `screenSharing-${this.Connection.userId}`,
+                name: 'screenSharing',
                 initiator: true
             };
             let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser);
             if (!PeerConnectionScreenSharing) {
                 return;
             }
-            for (const track of this.MediaManager.localScreenCapture.getTracks()) {
-                PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
+            try {
+                for (const track of this.MediaManager.localScreenCapture.getTracks()) {
+                    PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
+                }
+            }catch (e) {
+                console.error("updatedScreenSharing => ", e);
             }
+            this.MediaManager.addStreamRemoteVideo(screenSharingUser.userId, this.MediaManager.localScreenCapture);
         } else {
             if (!this.PeerConnectionArray.has(`screenSharing-${this.Connection.userId}`)) {
                 return;