diff --git a/public/index.html b/public/index.html index 87b2372..b9a4212 100644 --- a/public/index.html +++ b/public/index.html @@ -737,6 +737,10 @@ + + + + diff --git a/public/lang/en.json b/public/lang/en.json index 4a1bd7b..a31826e 100644 --- a/public/lang/en.json +++ b/public/lang/en.json @@ -178,6 +178,7 @@ "click-to-send-share-mode": "Click to send {{descriptor}}", "click-to-send": "Click to send files or right click to send a message", "connection-hash": "To verify the security of the end-to-end encryption, compare this security number on both devices", + "turn-indicator": "Transfer over the Internet", "connecting": "Connecting…", "preparing": "Preparing…", "waiting": "Waiting…", diff --git a/public/scripts/network.js b/public/scripts/network.js index af4900c..4bcb7c3 100644 --- a/public/scripts/network.js +++ b/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(); diff --git a/public/scripts/ui.js b/public/scripts/ui.js index 2eb1b05..e87a39a 100644 --- a/public/scripts/ui.js +++ b/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 = ` -