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', `