Add TURN indicator to PeerUI and add method to RTCPeer to get the connection type of the webrtc connection. If connection type is relay show TURN indicator

public/scripts/network.js

@@ -1029,6 +1029,33 @@ class RTCPeer extends Peer {
             );
     }
 
+    async _connectionType() {
+        if (!this._conn) return "";
+
+        const stats = await this._conn.getStats(null);
+
+        let id;
+        stats.forEach((report) => {
+            if (report.type === "candidate-pair" && report.state === "succeeded") {
+                id = report.localCandidateId;
+            }
+        });
+
+        if (!id) return "";
+
+        let connectionType;
+        stats.forEach((report) => {
+            if (report.id === id) {
+                connectionType = report.candidateType;
+            }
+        });
+        return connectionType;
+    }
+
+    async _isTurn() {
+        return await this._connectionType() === "relay";
+    }
+
     _messageChannelOpen() {
         return this._messageChannel && this._messageChannel.readyState === 'open';
     }
@@ -1158,13 +1185,13 @@ class RTCPeer extends Peer {
         return channel;
     }
 
-    _onChannelOpened(e) {
+    async _onChannelOpened(e) {
         Logger.debug(`RTC: Channel ${e.target.label} opened with`, this._peerId);
 
         // wait until all channels are open
         if (!this._stable()) return;
 
-        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()});
+        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash(), connectionType: await this._connectionType()});
         super._onPeerConnected();
 
         this._sendPendingOutboundMessaged();

public/scripts/ui.js

@@ -25,7 +25,7 @@ class PeersUI {
         this.shareMode.text = "";
 
         Events.on('peer-joined', e => this._onPeerJoined(e.detail.peer, e.detail.roomType, e.detail.roomId));
-        Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId, e.detail.connectionHash));
+        Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId, e.detail.connectionHash, e.detail.connectionType));
         Events.on('peer-connecting', e => this._onPeerConnecting(e.detail));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
         Events.on('peers', e => this._onPeers(e.detail));
@@ -110,12 +110,12 @@ class PeersUI {
         this.peerUIs[peer.id] = peerUI;
     }
 
-    _onPeerConnected(peerId, connectionHash) {
+    _onPeerConnected(peerId, connectionHash, connectionType) {
         const peerUI = this.peerUIs[peerId];
 
         if (!peerUI) return;
 
-        peerUI._peerConnected(true, connectionHash);
+        peerUI._peerConnected(true, connectionHash, connectionType);
 
         this._addPeerUIIfMissing(peerUI);
     }
@@ -474,14 +474,18 @@ class PeerUI {
     }
 
     html() {
-        let title= Localization.getTranslation("peer-ui.click-to-send");
+        const titleLabelTranslation= Localization.getTranslation("peer-ui.click-to-send");
+        const titleTurnTranslation= Localization.getTranslation("peer-ui.turn-indicator");
 
         this.$el.innerHTML = `
-            <label class="column center pointer" title="${title}">
+            <label class="column center pointer" title="${titleLabelTranslation}">
                 <input type="file" multiple/>
                 <x-icon>
                     <div class="icon-wrapper" shadow="1">
                         <svg class="icon"><use xlink:href="#"/></svg>
+                        <div class="turn-indicator-wrapper center" title="${titleTurnTranslation}">
+                            <svg class="turn-indicator"><use xlink:href="#turn-indicator"/></svg>
+                        </div>
                     </div>
                     <div class="highlight-wrapper center">
                         <div class="highlight highlight-room-ip" shadow="1"></div>
@@ -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 = "";
         }
     }