From f2c96478826f1ec0093faff9db8085e427afc0d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 6 Jun 2020 22:49:55 +0200
Subject: [PATCH] Adding connecting spinner and blinking error to webrtc
 display

I put a connecting spinner around the user name when the user is connecting.
Also, if an error occurs, we will see a blinking red circle around the player name.
---
 front/dist/resources/style/style.css | 60 +++++++++++++++++++++++++++-
 front/src/WebRtc/MediaManager.ts     | 39 ++++++++++++++++++
 front/src/WebRtc/SimplePeer.ts       |  2 +
 3 files changed, 100 insertions(+), 1 deletion(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 3f3c2c62..458dde9c 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -148,4 +148,62 @@ video{
     top: calc(48px - 37px);
     left: calc(48px - 41px);
     position: relative;
-}
\ No newline at end of file
+}
+
+/* Spinner */
+.connecting-spinner {
+      /*display: inline-block;*/
+      position: absolute;
+      left: calc(50% - 68px);
+      top: calc(50% - 68px);
+
+
+      width: 130px;
+      height: 130px;
+  }
+.connecting-spinner:after {
+    content: " ";
+    display: block;
+    width: 108px;
+    height: 108px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: connecting-spinner 1.2s linear infinite;
+}
+@keyframes connecting-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+
+.rtc-error {
+    position: absolute;
+    left: calc(50% - 68px);
+    top: calc(50% - 68px);
+
+
+    width: 130px;
+    height: 130px;
+}
+.rtc-error:after {
+    content: " ";
+    display: block;
+    width: 108px;
+    height: 108px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid #f00;
+    animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+    50% {
+        opacity: 0;
+    }
+}
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index bb3f0cb9..359eac67 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -143,6 +143,8 @@ export class MediaManager {
         let color = this.getColorByString(userName);
         elementRemoteVideo.insertAdjacentHTML('beforeend', `
             <div id="div-${userId}" class="video-container" style="border-color: ${color};">
+                <div class="connecting-spinner"></div>
+                <div class="rtc-error" style="display: none"></div>
                 <i style="background-color: ${color};">${userName}</i>
                 <img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
                 <video id="${userId}" autoplay></video>
@@ -228,6 +230,43 @@ export class MediaManager {
         element.remove();
     }
 
+    isConnecting(userId : string): void {
+        let connectingSpinnerDiv = this.getSpinner(userId);
+        if (connectingSpinnerDiv === null) {
+            return;
+        }
+        connectingSpinnerDiv.style.display = 'block';
+    }
+
+    isConnected(userId : string): void {
+        let connectingSpinnerDiv = this.getSpinner(userId);
+        if (connectingSpinnerDiv === null) {
+            return;
+        }
+        connectingSpinnerDiv.style.display = 'none';
+    }
+
+    isError(userId : string): void {
+        let element = document.getElementById(`div-${userId}`);
+        if(!element){
+            return;
+        }
+        let errorDiv = element.getElementsByClassName('rtc-error').item(0) as HTMLDivElement|null;
+        if (errorDiv === null) {
+            return;
+        }
+        errorDiv.style.display = 'block';
+    }
+
+    private getSpinner(userId : string): HTMLDivElement|null {
+        let element = document.getElementById(`div-${userId}`);
+        if(!element){
+            return null;
+        }
+        let connnectingSpinnerDiv = element.getElementsByClassName('connecting-spinner').item(0) as HTMLDivElement|null;
+        return connnectingSpinnerDiv;
+    }
+
     /**
      *
      * @param str
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 902d316c..da1ae3db 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -161,9 +161,11 @@ export class SimplePeer {
 
         peer.on('error', (err: any) => {
             console.error(`error => ${user.userId} => ${err.code}`, err);
+            this.MediaManager.isError(user.userId);
         });
 
         peer.on('connect', () => {
+            this.MediaManager.isConnected(user.userId);
             console.info(`connect => ${user.userId}`);
         });