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
This commit is contained in:
schlagmichdoch
parent
5a56251ee3
commit
880e8bd195
|
|
@ -737,6 +737,10 @@
|
|||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
|
||||
<path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="turn-indicator" viewBox="0 0 576 512">
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<path d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48V96H384V80c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H432c-26.5 0-48-21.5-48-48V160H192v16c0 1.7-.1 3.4-.3 5L272 288h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H272c-26.5 0-48-21.5-48-48V336c0-1.7 .1-3.4 .3-5L144 224H48c-26.5 0-48-21.5-48-48V80z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<!-- Scripts -->
|
||||
<script src="scripts/localization.js" defer></script>
|
||||
|
|
|
|||
|
|
@ -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…",
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue