mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-06-15 10:44:52 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge 880e8bd195 into 50539ed485

Browse source
This commit is contained in:
schlagmichdoch 2024-08-31 14:25:24 +02:00 • committed by GitHub
commit 70f4ea06c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 111 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -767,6 +767,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>

1
public/lang/en.json
View file

@ -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…",

31
public/scripts/network.js
View file

@ -1147,6 +1147,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';
}
@ -1276,13 +1303,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();

59
public/scripts/ui.js
View file

@ -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);
}
@ -462,7 +462,9 @@ class PeerUI {
this.$displayName.textContent = this._displayName();
this.$deviceName.textContent = this._deviceName();
this.updateTypesClassList();
this._updateRoomTypeClasses();
this._updateSameBrowserClass();
this._updateWsPeerClass();
this._evaluateShareMode();
this._bindListeners();
@ -473,14 +475,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>
@ -500,30 +506,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}`));
if (BrowserTabsConnector.peerIsSameBrowser(this._peer.id)) {
this.$el.classList.add(`type-same-browser`);
}
_updateSameBrowserClass() {
if (BrowserTabsConnector.peerIsSameBrowser(this._peer.id)) {
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 = "") {
@ -599,7 +624,7 @@ class PeerUI {
});
}
_peerConnected(connected = true, connectionHash = "") {
_peerConnected(connected, connectionHash = "", connectionType = "") {
if (connected) {
this._connected = true;
@ -608,6 +633,11 @@ class PeerUI {
this._oldStatus = 'idle';
this._connectionHash = connectionHash;
this._connectionType = connectionType;
this._updateSameBrowserClass();
this._updateWsPeerClass();
this._updateTurnClass();
}
else {
this._connected = false;
@ -619,6 +649,7 @@ class PeerUI {
this.queueProgressStatus(null, "connect");
this._connectionHash = "";
this._connectionType = "";
}
}

34
public/styles/styles-deferred.css
View file

@ -278,6 +278,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 {