Merge pull request #157 from thecodingmachine/fixing_long_disconnect

Adding connecting spinner and blinking error to webrtc display
This commit is contained in:
David Négrier 2020-06-08 18:09:12 +02:00 committed by GitHub
commit bd3be2a138
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 100 additions and 1 deletions

View File

@ -149,3 +149,61 @@ video{
left: calc(48px - 41px);
position: relative;
}
/* 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;
}
}

View File

@ -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

View File

@ -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}`);
});