Skip to content

WIP: Add turn indicator #279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: sw_digester
Choose a base branch
from
Open

WIP: Add turn indicator #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a56251
Tidy up update class methods on PeerUI
schlagmichdoch Feb 20, 2024
880e8bd
Add TURN indicator to PeerUI and add method to RTCPeer to get the con…
schlagmichdoch Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -737,6 +737,10 @@ <h1>PairDrop</h1>
<!--!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>
Expand Down
1 change: 1 addition & 0 deletions public/lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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…",
Expand Down
31 changes: 29 additions & 2 deletions public/scripts/network.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Expand Down Expand Up @@ -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();
Expand Down
55 changes: 43 additions & 12 deletions public/scripts/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -459,7 +459,9 @@ class PeerUI {
this.$displayName.textContent = this._displayName();
this.$deviceName.textContent = this._deviceName();

this.updateTypesClassList();
this._updateRoomTypeClasses();
this._updateSameBrowserClass();
this._updateWsPeerClass();

this.setStatus("connect");

Expand All @@ -472,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>
Expand All @@ -499,30 +505,49 @@ class PeerUI {
</label>`;
}

updateTypesClassList() {
_updateRoomTypeClasses() {
// Remove all classes
this.$el.classList.remove('type-ip', 'type-secret', 'type-public-id', 'type-same-browser', 'ws-peer');
this.$el.classList.remove('type-ip', 'type-secret', 'type-public-id');

// Add classes accordingly
Object.keys(this._roomIds).forEach(roomType => this.$el.classList.add(`type-${roomType}`));
}

_updateSameBrowserClass() {
if (BrowserTabsConnector.peerIsSameBrowser(this._peer.id)) {
this.$el.classList.add(`type-same-browser`);
this.$el.classList.add('same-browser');
}
else {
this.$el.classList.remove('same-browser');
}
}

_updateWsPeerClass() {
if (!this._peer.rtcSupported || !window.isRtcSupported) {
this.$el.classList.add('ws-peer');
}
else {
this.$el.classList.remove('ws-peer');
}
}

_updateTurnClass() {
if (this._connectionType === "relay") {
this.$el.classList.add('turn');
}
else {
this.$el.classList.remove('turn');
}
}

_addRoomId(roomType, roomId) {
this._roomIds[roomType] = roomId;
this.updateTypesClassList();
this._updateRoomTypeClasses();
}

_removeRoomId(roomType) {
delete this._roomIds[roomType];
this.updateTypesClassList();
this._updateRoomTypeClasses();
}

_onShareModeChanged(active = false, descriptor = "") {
Expand Down Expand Up @@ -598,7 +623,7 @@ class PeerUI {
});
}

_peerConnected(connected = true, connectionHash = "") {
_peerConnected(connected, connectionHash = "", connectionType = "") {
if (connected) {
this._connected = true;

Expand All @@ -607,6 +632,11 @@ class PeerUI {
this._oldStatus = null;

this._connectionHash = connectionHash;
this._connectionType = connectionType;

this._updateSameBrowserClass();
this._updateWsPeerClass();
this._updateTurnClass();
}
else {
this._connected = false;
Expand All @@ -618,6 +648,7 @@ class PeerUI {
this.setStatus("connect");

this._connectionHash = "";
this._connectionType = "";
}
}

Expand Down
34 changes: 34 additions & 0 deletions public/styles/styles-deferred.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down