From f2c96478826f1ec0093faff9db8085e427afc0d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= 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', `
+
+ ${userName} @@ -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}`); });