@@ -527,6 +531,15 @@ class PeerUI {
}
}
+ _updateTurnClass() {
+ if (this._connectionType === "relay") {
+ this.$el.classList.add('turn');
+ }
+ else {
+ this.$el.classList.remove('turn');
+ }
+ }
+
_addRoomId(roomType, roomId) {
this._roomIds[roomType] = roomId;
this._updateRoomTypeClasses();
@@ -610,7 +623,7 @@ class PeerUI {
});
}
- _peerConnected(connected = true, connectionHash = "") {
+ _peerConnected(connected, connectionHash = "", connectionType = "") {
if (connected) {
this._connected = true;
@@ -619,9 +632,11 @@ class PeerUI {
this._oldStatus = null;
this._connectionHash = connectionHash;
+ this._connectionType = connectionType;
this._updateSameBrowserClass();
this._updateWsPeerClass();
+ this._updateTurnClass();
}
else {
this._connected = false;
@@ -633,6 +648,7 @@ class PeerUI {
this.setStatus("connect");
this._connectionHash = "";
+ this._connectionType = "";
}
}
diff --git a/public/styles/styles-deferred.css b/public/styles/styles-deferred.css
index 367b7a9..c7131f1 100644
--- a/public/styles/styles-deferred.css
+++ b/public/styles/styles-deferred.css
@@ -279,6 +279,40 @@ x-peer[drop] x-icon {
transform: scale(1.1);
}
+x-peer:not(.turn) .turn-indicator-wrapper {
+ display: none;
+}
+
+x-peer .turn-indicator-wrapper {
+ z-index: 0;
+ display: flex;
+ position: absolute;
+ top: 43px;
+ right: 23px;
+ width: 22px;
+ height: 22px;
+}
+
+x-peer .turn-indicator-wrapper:before {
+ z-index: -1;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: white;
+ border-radius: 50%;
+ border: solid 2px var(--primary-color);
+}
+
+x-peer .turn-indicator {
+ margin: auto;
+ width: calc(var(--icon-size) / 3);
+ height: calc(var(--icon-size) / 3);
+ fill: var(--primary-color);
+}
+
/* Checkboxes as slider */
.switch {