+ Input this key on another device + or scan the QR-Code. +
Enter key from another device here.
@@ -209,26 +238,79 @@ + + + + + + + + Temporary Public Room + + + + + + IOX9P + + Input this room id on another device + or scan the QR-Code. + + + + + + + OR + + + + + + + + + + + + Enter room id from another device to join. + + + + Join + Close + Leave + + + + + - - - - - would like to share + + + - - - + + + + + + would like to share + + + + + + + + - - - - + Accept Decline @@ -239,21 +321,28 @@ - - - - - has sent + + + - - - + + + + + + has sent + + + + + + + + - - - + Share Download Close @@ -266,14 +355,25 @@ - Send Message - - Send a Message to - + + + Send Message + - - - + + + + Send a Message to + + + + + + + + + + Send Cancel @@ -285,14 +385,21 @@ - Message Received - - - has sent: + + Message Received - - - + + + + has sent: + + + + + + + + Copy Close @@ -311,7 +418,7 @@ - + @@ -421,6 +528,10 @@ + + + + diff --git a/public_included_ws_fallback/lang/en.json b/public_included_ws_fallback/lang/en.json index a607219..86ef21c 100644 --- a/public_included_ws_fallback/lang/en.json +++ b/public_included_ws_fallback/lang/en.json @@ -1,20 +1,22 @@ { "header": { "about_title": "About PairDrop", + "language-selector_title": "Select Language", "about_aria-label": "Open About PairDrop", "theme-auto_title": "Adapt Theme to System", "theme-light_title": "Always Use Light-Theme", "theme-dark_title": "Always Use Dark-Theme", "notification_title": "Enable Notifications", "install_title": "Install PairDrop", - "pair-device_title": "Pair Device", + "pair-device_title": "Pair Your Devices Permanently", "edit-paired-devices_title": "Edit Paired Devices", + "join-public-room_title": "Join Public Room Temporarily", "cancel-paste-mode": "Done" }, "instructions": { "no-peers_data-drop-bg": "Release to select recipient", "no-peers-title": "Open PairDrop on other devices to send files", - "no-peers-subtitle": "Pair devices to be discoverable on other networks", + "no-peers-subtitle": "Pair devices or enter a public room to be discoverable on other networks", "x-instructions_desktop": "Click to send files or right click to send a message", "x-instructions_mobile": "Tap to send files or long tap to send a message", "x-instructions_data-drop-peer": "Release to send to peer", @@ -26,10 +28,13 @@ "known-as": "You are known as:", "display-name_data-placeholder": "Loading…", "display-name_title": "Edit your device name permanently", - "discovery-everyone": "You can be discovered by everyone", + "discovery": "You can be discovered:", "on-this-network": "on this network", - "and-by": "and by", - "paired-devices": "paired devices", + "on-this-network_title": "You can be discovered by everyone on this network.", + "paired-devices": "by paired devices", + "paired-devices_title": "You can be discovered by paired devices at all times independent of the network.", + "public-room-devices": "in room {{roomId}}", + "public-room-devices_title": "You can be discovered by devices in this public room independent of the network.", "traffic": "Traffic is", "routed": "routed through the server", "webrtc": "if WebRTC is not available." @@ -38,10 +43,12 @@ "activate-paste-mode-base": "Open PairDrop on other devices to send", "activate-paste-mode-and-other-files": "and {{count}} other files", "activate-paste-mode-activate-paste-mode-shared-text": "shared text", - "pair-devices-title": "Pair Devices", + "pair-devices-title": "Pair Devices Permanently", "input-key-on-this-device": "Input this key on another device", "scan-qr-code": "or scan the QR-code.", - "enter-key-from-another-device": "Enter key from another device to continue.", + "enter-key-from-another-device": "Enter key from another device here.", + "input-room-id-on-another-device": "Input this room id on another device", + "hr-or": "OR", "pair": "Pair", "cancel": "Cancel", "edit-paired-devices-title": "Edit Paired Devices", @@ -75,7 +82,9 @@ "title-image-plural": "Images", "title-file-plural": "Files", "receive-title": "{{descriptor}} Received", - "download-again": "Download again" + "download-again": "Download again", + "language-selector-title": "Select Language", + "system-language": "System Language" }, "about": { "close-about_aria-label": "Close About PairDrop", @@ -93,10 +102,12 @@ "pairing-tabs-error": "Pairing two web browser tabs is impossible.", "pairing-success": "Devices paired.", "pairing-not-persistent": "Paired devices are not persistent.", - "pairing-key-invalid": "Invalid key", + "pairing-key-invalid": "Invalid key.", "pairing-key-invalidated": "Key {{key}} invalidated.", "pairing-cleared": "All Devices unpaired.", - "copied-to-clipboard": "Copied to clipboard", + "public-room-id-invalid": "Invalid room id.", + "public-room-left": "Left public room {{publicRoomId}}.", + "copied-to-clipboard": "Copied to clipboard.", "copied-to-clipboard-error": "Copying not possible. Copy manually.", "text-content-incorrect": "Text content is incorrect.", "file-content-incorrect": "File content is incorrect.", @@ -112,7 +123,8 @@ "offline": "You are offline", "online": "You are back online", "connected": "Connected.", - "online-requirement": "You need to be online to pair devices.", + "online-requirement-pairing": "You need to be online to pair devices.", + "online-requirement-public-room": "You need to be online to create a public room.", "connecting": "Connecting…", "files-incorrect": "Files are incorrect.", "file-transfer-completed": "File transfer completed.", diff --git a/public_included_ws_fallback/scripts/network.js b/public_included_ws_fallback/scripts/network.js index 259688d..87e4ea2 100644 --- a/public_included_ws_fallback/scripts/network.js +++ b/public_included_ws_fallback/scripts/network.js @@ -1,5 +1,5 @@ window.URL = window.URL || window.webkitURL; -window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection); +window.isRtcSupported = false; //!!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection); window.hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : @@ -21,10 +21,14 @@ class ServerConnection { Events.on('join-ip-room', e => this.send({ type: 'join-ip-room'})); Events.on('room-secrets-deleted', e => this.send({ type: 'room-secrets-deleted', roomSecrets: e.detail})); Events.on('regenerate-room-secret', e => this.send({ type: 'regenerate-room-secret', roomSecret: e.detail})); - Events.on('resend-peers', _ => this.send({ type: 'resend-peers'})); Events.on('pair-device-initiate', _ => this._onPairDeviceInitiate()); Events.on('pair-device-join', e => this._onPairDeviceJoin(e.detail)); Events.on('pair-device-cancel', _ => this.send({ type: 'pair-device-cancel' })); + + Events.on('create-public-room', _ => this._onCreatePublicRoom()); + Events.on('join-public-room', e => this._onJoinPublicRoom(e.detail.roomId, e.detail.createIfInvalid)); + Events.on('leave-public-room', _ => this._onLeavePublicRoom()); + Events.on('offline', _ => clearTimeout(this._reconnectTimer)); Events.on('online', _ => this._connect()); } @@ -49,18 +53,42 @@ class ServerConnection { _onPairDeviceInitiate() { if (!this._isConnected()) { - Events.fire('notify-user', Localization.getTranslation("notifications.online-requirement")); + Events.fire('notify-user', Localization.getTranslation("notifications.online-requirement-pairing")); return; } - this.send({ type: 'pair-device-initiate' }) + this.send({ type: 'pair-device-initiate' }); } - _onPairDeviceJoin(roomKey) { + _onPairDeviceJoin(pairKey) { if (!this._isConnected()) { - setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000); + setTimeout(_ => this._onPairDeviceJoin(pairKey), 1000); return; } - this.send({ type: 'pair-device-join', roomKey: roomKey }) + this.send({ type: 'pair-device-join', pairKey: pairKey }); + } + + _onCreatePublicRoom() { + if (!this._isConnected()) { + Events.fire('notify-user', Localization.getTranslation("notifications.online-requirement-public-room")); + return; + } + this.send({ type: 'create-public-room' }); + } + + _onJoinPublicRoom(roomId, createIfInvalid) { + if (!this._isConnected()) { + setTimeout(_ => this._onJoinPublicRoom(roomId), 1000); + return; + } + this.send({ type: 'join-public-room', publicRoomId: roomId, createIfInvalid: createIfInvalid }); + } + + _onLeavePublicRoom() { + if (!this._isConnected()) { + setTimeout(_ => this._onLeavePublicRoom(), 1000); + return; + } + this.send({ type: 'leave-public-room' }); } _setRtcConfig(config) { @@ -102,9 +130,9 @@ class ServerConnection { Events.fire('pair-device-join-key-invalid'); break; case 'pair-device-canceled': - Events.fire('pair-device-canceled', msg.roomKey); + Events.fire('pair-device-canceled', msg.pairKey); break; - case 'pair-device-join-key-rate-limit': + case 'join-key-rate-limit': Events.fire('notify-user', Localization.getTranslation("notifications.rate-limit-join-key")); break; case 'secret-room-deleted': @@ -113,6 +141,15 @@ class ServerConnection { case 'room-secret-regenerated': Events.fire('room-secret-regenerated', msg); break; + case 'public-room-id-invalid': + Events.fire('public-room-id-invalid', msg.publicRoomId); + break; + case 'public-room-created': + Events.fire('public-room-created', msg.roomId); + break; + case 'public-room-left': + Events.fire('public-room-left'); + break; case 'request': case 'header': case 'partition': @@ -139,18 +176,12 @@ class ServerConnection { _onPeers(msg) { Events.fire('peers', msg); - if (msg.roomType === "ip" && msg.peers.length === 0) { - BrowserTabsConnector.removeOtherPeerIdsFromLocalStorage().then(peerId => { - if (!peerId) return; - console.log("successfully removed other peerIds from localStorage"); - }); - } } _onDisplayName(msg) { // Add peerId and peerIdHash to sessionStorage to authenticate as the same device on page reload - sessionStorage.setItem("peerId", msg.message.peerId); - sessionStorage.setItem("peerIdHash", msg.message.peerIdHash); + sessionStorage.setItem('peer_id', msg.message.peerId); + sessionStorage.setItem('peer_id_hash', msg.message.peerIdHash); // Add peerId to localStorage to mark it for other PairDrop tabs on the same browser BrowserTabsConnector.addPeerIdToLocalStorage().then(peerId => { @@ -172,8 +203,8 @@ class ServerConnection { const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws'; const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback'; let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc); - const peerId = sessionStorage.getItem("peerId"); - const peerIdHash = sessionStorage.getItem("peerIdHash"); + const peerId = sessionStorage.getItem('peer_id'); + const peerIdHash = sessionStorage.getItem('peer_id_hash'); if (peerId && peerIdHash) { ws_url.searchParams.append('peer_id', peerId); ws_url.searchParams.append('peer_id_hash', peerIdHash); @@ -184,7 +215,7 @@ class ServerConnection { _disconnect() { this.send({ type: 'disconnect' }); - const peerId = sessionStorage.getItem("peerId"); + const peerId = sessionStorage.getItem('peer_id'); BrowserTabsConnector.removePeerIdFromLocalStorage(peerId).then(_ => { console.log("successfully removed peerId from localStorage"); }); @@ -232,12 +263,13 @@ class ServerConnection { class Peer { - constructor(serverConnection, isCaller, peerId, roomType, roomSecret) { + constructor(serverConnection, isCaller, peerId, roomType, roomId) { this._server = serverConnection; this._isCaller = isCaller; this._peerId = peerId; - this._roomType = roomType; - this._updateRoomSecret(roomSecret); + + this._roomIds = {}; + this._updateRoomIds(roomType, roomId); this._filesQueue = []; this._busy = false; @@ -258,34 +290,58 @@ class Peer { return BrowserTabsConnector.peerIsSameBrowser(this._peerId); } - _updateRoomSecret(roomSecret) { + _isPaired() { + return !!this._roomIds['secret']; + } + + _getPairSecret() { + return this._roomIds['secret']; + } + + _getRoomTypes() { + return Object.keys(this._roomIds); + } + + _updateRoomIds(roomType, roomId) { // if peer is another browser tab, peer is not identifiable with roomSecret as browser tabs share all roomSecrets // -> do not delete duplicates and do not regenerate room secrets - if (!this._isSameBrowser() && this._roomSecret && this._roomSecret !== roomSecret) { - // remove old roomSecrets to prevent multiple pairings with same peer - PersistentStorage.deleteRoomSecret(this._roomSecret).then(deletedRoomSecret => { - if (deletedRoomSecret) console.log("Successfully deleted duplicate room secret with same peer: ", deletedRoomSecret); - }) + if (!this._isSameBrowser() && roomType === "secret" && this._isPaired() && this._getPairSecret() !== roomId) { + // multiple roomSecrets with same peer -> delete old roomSecret + PersistentStorage.deleteRoomSecret(this._getPairSecret()) + .then(deletedRoomSecret => { + if (deletedRoomSecret) console.log("Successfully deleted duplicate room secret with same peer: ", deletedRoomSecret); + }); } - this._roomSecret = roomSecret; + this._roomIds[roomType] = roomId; - if (!this._isSameBrowser() && this._roomSecret && this._roomSecret.length !== 256 && this._isCaller) { - // increase security by increasing roomSecret length + if (!this._isSameBrowser() && roomType === "secret" && this._isPaired() && this._getPairSecret().length !== 256 && this._isCaller) { + // increase security by initiating the increase of the roomSecret length from 64 chars ( { - const autoAccept = roomSecretEntry ? roomSecretEntry.entry.auto_accept : false; + const autoAccept = roomSecretEntry + ? roomSecretEntry.entry.auto_accept + : false; this._setAutoAccept(autoAccept); }) .catch(_ => { @@ -294,7 +350,9 @@ class Peer { } _setAutoAccept(autoAccept) { - this._autoAccept = autoAccept; + this._autoAccept = !this._isSameBrowser() + ? autoAccept + : false; } getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) { @@ -553,7 +611,7 @@ class Peer { if (!this._requestAccepted.header.length) { this._busy = false; Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'}); - Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize}); + Events.fire('files-received', {peerId: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize}); this._filesReceived = []; this._requestAccepted = null; } @@ -616,8 +674,8 @@ class Peer { class RTCPeer extends Peer { - constructor(serverConnection, isCaller, peerId, roomType, roomSecret) { - super(serverConnection, isCaller, peerId, roomType, roomSecret); + constructor(serverConnection, isCaller, peerId, roomType, roomId) { + super(serverConnection, isCaller, peerId, roomType, roomId); this.rtcSupported = true; if (!this._isCaller) return; // we will listen for a caller this._connect(); @@ -643,13 +701,17 @@ class RTCPeer extends Peer { _openChannel() { if (!this._conn) return; + const channel = this._conn.createDataChannel('data-channel', { ordered: true, reliable: true // Obsolete. See https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/reliable }); channel.onopen = e => this._onChannelOpened(e); channel.onerror = e => this._onError(e); - this._conn.createOffer().then(d => this._onDescription(d)).catch(e => this._onError(e)); + + this._conn.createOffer() + .then(d => this._onDescription(d)) + .catch(e => this._onError(e)); } _onDescription(description) { @@ -789,8 +851,8 @@ class RTCPeer extends Peer { _sendSignal(signal) { signal.type = 'signal'; signal.to = this._peerId; - signal.roomType = this._roomType; - signal.roomSecret = this._roomSecret; + signal.roomType = this._getRoomTypes()[0]; + signal.roomId = this._roomIds[this._getRoomTypes()[0]]; this._server.send(signal); } @@ -836,8 +898,8 @@ class WSPeer extends Peer { sendJSON(message) { message.to = this._peerId; - message.roomType = this._roomType; - message.roomSecret = this._roomSecret; + message.roomType = this._getRoomTypes()[0]; + message.roomId = this._roomIds[this._getRoomTypes()[0]]; this._server.send(message); } @@ -872,7 +934,14 @@ class PeersManager { Events.on('peer-joined', e => this._onPeerJoined(e.detail)); Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId)); Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail)); + + // this device closes connection + Events.on('room-secrets-deleted', e => this._onRoomSecretsDeleted(e.detail)); + Events.on('leave-public-room', e => this._onLeavePublicRoom(e.detail)); + + // peer closes connection Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail)); + Events.on('room-secret-regenerated', e => this._onRoomSecretRegenerated(e.detail)); Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName)); Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail)); @@ -887,51 +956,45 @@ class PeersManager { this.peers[peerId].onServerMessage(message); } - _refreshPeer(peer, roomType, roomSecret) { + _refreshPeer(peer, roomType, roomId) { if (!peer) return false; - const roomTypeIsSecret = roomType === "secret"; - const roomSecretsDiffer = peer._roomSecret !== roomSecret; + const roomTypesDiffer = Object.keys(peer._roomIds)[0] !== roomType; + const roomIdsDiffer = peer._roomIds[roomType] !== roomId; - // if roomSecrets differs peer is already connected -> abort but update roomSecret and reevaluate auto accept - if (roomTypeIsSecret && roomSecretsDiffer) { - peer._updateRoomSecret(roomSecret); + // if roomType or roomId for roomType differs peer is already connected + // -> only update roomSecret and reevaluate auto accept + if (roomTypesDiffer || roomIdsDiffer) { + peer._updateRoomIds(roomType, roomId); peer._evaluateAutoAccept(); return true; } - const roomTypesDiffer = peer._roomType !== roomType; - - // if roomTypes differ peer is already connected -> abort - if (roomTypesDiffer) return true; - - peer.refresh(); - return true; } - _createOrRefreshPeer(isCaller, peerId, roomType, roomSecret, rtcSupported) { + _createOrRefreshPeer(isCaller, peerId, roomType, roomId, rtcSupported) { const peer = this.peers[peerId]; if (peer) { - this._refreshPeer(peer, roomType, roomSecret); + this._refreshPeer(peer, roomType, roomId); return; } if (window.isRtcSupported && rtcSupported) { - this.peers[peerId] = new RTCPeer(this._server,isCaller, peerId, roomType, roomSecret); + this.peers[peerId] = new RTCPeer(this._server,isCaller, peerId, roomType, roomId); } else { - this.peers[peerId] = new WSPeer(this._server, isCaller, peerId, roomType, roomSecret); + this.peers[peerId] = new WSPeer(this._server, isCaller, peerId, roomType, roomId); } } _onPeerJoined(message) { - this._createOrRefreshPeer(false, message.peer.id, message.roomType, message.roomSecret, message.peer.rtcSupported); + this._createOrRefreshPeer(false, message.peer.id, message.roomType, message.roomId, message.peer.rtcSupported); } _onPeers(message) { message.peers.forEach(peer => { - this._createOrRefreshPeer(true, peer.id, message.roomType, message.roomSecret, peer.rtcSupported); + this._createOrRefreshPeer(true, peer.id, message.roomType, message.roomId, peer.rtcSupported); }) } @@ -971,7 +1034,7 @@ class PeersManager { } if (message.disconnect === true) { // if user actively disconnected from PairDrop server, disconnect all peer to peer connections immediately - Events.fire('peer-disconnected', message.peerId); + this._disconnectOrRemoveRoomTypeByPeerId(message.peerId, message.roomType); // If no peers are connected anymore, we can safely assume that no other tab on the same browser is connected: // Tidy up peerIds in localStorage @@ -1003,14 +1066,42 @@ class PeersManager { if (peer._channel) peer._channel.onclose = null; peer._conn.close(); peer._busy = false; + peer._roomIds = {}; + } + + _onRoomSecretsDeleted(roomSecrets) { + for (let i=0; i 1) { + peer._removeRoomType(roomType); + } else { + Events.fire('peer-disconnected', peerId); } } @@ -1041,20 +1132,26 @@ class PeersManager { } _onAutoAcceptUpdated(roomSecret, autoAccept) { - const peerId = this._getPeerIdFromRoomSecret(roomSecret); + const peerId = this._getPeerIdsFromRoomId(roomSecret)[0]; + if (!peerId) return; + this.peers[peerId]._setAutoAccept(autoAccept); } - _getPeerIdFromRoomSecret(roomSecret) { + _getPeerIdsFromRoomId(roomId) { + if (!roomId) return []; + + let peerIds = [] for (const peerId in this.peers) { const peer = this.peers[peerId]; - // peer must have same roomSecret and not be on the same browser. - if (peer._roomSecret === roomSecret && !peer._isSameBrowser()) { - return peer._peerId; + + // peer must have same roomId. + if (Object.values(peer._roomIds).includes(roomId)) { + peerIds.push(peer._peerId); } } - return false; + return peerIds; } } @@ -1140,7 +1237,7 @@ class FileDigester { } class Events { - static fire(type, detail) { + static fire(type, detail = {}) { window.dispatchEvent(new CustomEvent(type, { detail: detail })); } diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js index 460f30f..bb0b3db 100644 --- a/public_included_ws_fallback/scripts/ui.js +++ b/public_included_ws_fallback/scripts/ui.js @@ -22,7 +22,7 @@ class PeersUI { Events.on('peers', e => this._onPeers(e.detail)); Events.on('set-progress', e => this._onSetProgress(e.detail)); Events.on('paste', e => this._onPaste(e)); - Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail)); + Events.on('room-type-removed', e => this._onRoomTypeRemoved(e.detail.peerId, e.detail.roomType)); Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text)); this.peers = {}; @@ -150,32 +150,22 @@ class PeersUI { } _onPeerJoined(msg) { - this._joinPeer(msg.peer, msg.roomType, msg.roomSecret); + this._joinPeer(msg.peer, msg.roomType, msg.roomId); } - _joinPeer(peer, roomType, roomSecret) { + _joinPeer(peer, roomType, roomId) { const existingPeer = this.peers[peer.id]; if (existingPeer) { - // peer already exists. Abort but add roomType to GUI and update roomSecret - // skip if peer is a tab on the same browser - if (!existingPeer.sameBrowser()) { - // add roomType to PeerUI - if (!existingPeer.roomTypes.includes(roomType)) { - existingPeer.roomTypes.push(roomType); - } - this._redrawPeerRoomTypes(peer.id); - - if (roomType === "secret") existingPeer.roomSecret = roomSecret; - } + // peer already exists. Abort but add roomType to GUI + existingPeer._roomIds[roomType] = roomId; + this._redrawPeerRoomTypes(peer.id); return; } - peer.sameBrowser = _ => BrowserTabsConnector.peerIsSameBrowser(peer.id); - if (!(roomType === "secret" && peer.sameBrowser())) { - peer.roomTypes = [roomType]; - peer.roomSecret = roomSecret; - } + peer._isSameBrowser = _ => BrowserTabsConnector.peerIsSameBrowser(peer.id); + peer._roomIds = {}; + peer._roomIds[roomType] = roomId; this.peers[peer.id] = peer; } @@ -188,13 +178,18 @@ class PeersUI { } _redrawPeerRoomTypes(peerId) { - const peer = this.peers[peerId] + const peer = this.peers[peerId]; const peerNode = $(peerId); - if (!peerNode) return; - peerNode.classList.remove('type-ip', 'type-secret'); - if (!peer.sameBrowser()) { - peer.roomTypes.forEach(roomType => peerNode.classList.add(`type-${roomType}`)); + + if (!peer || !peerNode) return; + + peerNode.classList.remove('type-ip', 'type-secret', 'type-public-id', 'type-same-browser'); + + if (peer._isSameBrowser()) { + peerNode.classList.add(`type-same-browser`); } + + Object.keys(peer._roomIds).forEach(roomType => peerNode.classList.add(`type-${roomType}`)); } evaluateOverflowing() { @@ -206,7 +201,7 @@ class PeersUI { } _onPeers(msg) { - msg.peers.forEach(peer => this._joinPeer(peer, msg.roomType, msg.roomSecret)); + msg.peers.forEach(peer => this._joinPeer(peer, msg.roomType, msg.roomId)); } _onPeerDisconnected(peerId) { @@ -216,23 +211,14 @@ class PeersUI { this.evaluateOverflowing(); } - _onSecretRoomDeleted(roomSecret) { - for (const peerId in this.peers) { - const peer = this.peers[peerId]; - if (peer.roomSecret === roomSecret) { - let index = peer.roomTypes.indexOf('secret'); - peer.roomTypes.splice(index, 1); - peer.roomSecret = ""; + _onRoomTypeRemoved(peerId, roomType) { + const peer = this.peers[peerId]; - if (peer.roomTypes.length) { - this._redrawPeerRoomTypes(peerId) - return; - } + if (!peer) return; - this._onPeerDisconnected(peerId); - return; - } - } + delete peer._roomIds[roomType]; + + this._redrawPeerRoomTypes(peerId) } _onSetProgress(progress) { @@ -376,14 +362,16 @@ class PeerUI { input = ''; } this.$el.innerHTML = ` - + ${input} - + + + @@ -404,13 +392,24 @@ class PeerUI { this.$el.querySelector('.connection-hash').textContent = this._connectionHash; } + addTypesToClassList() { + if (this._peer._isSameBrowser()) { + this.$el.classList.add(`type-same-browser`); + } + + Object.keys(this._peer._roomIds).forEach(roomType => this.$el.classList.add(`type-${roomType}`)); + + if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer'); + } + _initDom() { this.$el = document.createElement('x-peer'); this.$el.id = this._peer.id; this.$el.ui = this; this.$el.classList.add('center'); - if (!this._peer.sameBrowser()) this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`)); - if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer'); + + this.addTypesToClassList(); + this.html(); this._callbackInput = e => this._onFilesSelected(e) @@ -424,6 +423,7 @@ class PeerUI { this._callbackTouchStart = e => this._onTouchStart(e) this._callbackTouchEnd = e => this._onTouchEnd(e) this._callbackPointerDown = e => this._onPointerDown(e) + // PasteMode Events.on('paste-mode-changed', _ => this._onPasteModeChanged()); } @@ -483,6 +483,15 @@ class PeerUI { return this._peer.name.deviceName; } + _badgeClassName() { + const roomTypes = Object.keys(this._peer._roomIds); + return roomTypes.includes('secret') + ? 'badge-room-secret' + : roomTypes.includes('ip') + ? 'badge-room-ip' + : 'badge-room-public-id'; + } + _icon() { const device = this._peer.name.device || this._peer.name; if (device.type === 'mobile') { @@ -586,6 +595,8 @@ class Dialog { this.$el.querySelectorAll('[close]').forEach(el => el.addEventListener('click', _ => this.hide())); this.$autoFocus = this.$el.querySelector('[autofocus]'); Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail)); + + this.$discoveryWrapper = $$('footer .discovery-wrapper'); } show() { @@ -614,6 +625,17 @@ class Dialog { Events.fire('notify-user', Localization.getTranslation("notifications.selected-peer-left")); } } + + evaluateFooterBadges() { + if (this.$discoveryWrapper.querySelectorAll('div:last-of-type > span[hidden]').length < 2) { + this.$discoveryWrapper.classList.remove('row'); + this.$discoveryWrapper.classList.add('column'); + } else { + this.$discoveryWrapper.classList.remove('column'); + this.$discoveryWrapper.classList.add('row'); + } + Events.fire('bg-resize'); + } } class LanguageSelectDialog extends Dialog { @@ -695,7 +717,7 @@ class ReceiveDialog extends Dialog { } } - _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize) { + _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName) { let fileOther = ""; if (files.length === 2) { @@ -715,9 +737,11 @@ class ReceiveDialog extends Dialog { const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1]; this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length); this.$fileExtension.innerText = fileExtension; + this.$fileSize.innerText = this._formatFileSize(totalSize); this.$displayName.innerText = displayName; this.$displayName.title = connectionHash; - this.$fileSize.innerText = this._formatFileSize(totalSize); + this.$displayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id"); + this.$displayName.classList.add(badgeClassName) } } @@ -729,23 +753,35 @@ class ReceiveFileDialog extends ReceiveDialog { this.$downloadBtn = this.$el.querySelector('#download-btn'); this.$shareBtn = this.$el.querySelector('#share-btn'); - Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.imagesOnly, e.detail.totalSize)); + Events.on('files-received', e => this._onFilesReceived(e.detail.peerId, e.detail.files, e.detail.imagesOnly, e.detail.totalSize)); this._filesQueue = []; } - _onFilesReceived(sender, files, imagesOnly, totalSize) { - const displayName = $(sender).ui._displayName(); - const connectionHash = $(sender).ui._connectionHash; - this._filesQueue.push({peer: sender, displayName: displayName, connectionHash: connectionHash, files: files, imagesOnly: imagesOnly, totalSize: totalSize}); + _onFilesReceived(peerId, files, imagesOnly, totalSize) { + const displayName = $(peerId).ui._displayName(); + const connectionHash = $(peerId).ui._connectionHash; + const badgeClassName = $(peerId).ui._badgeClassName(); + + this._filesQueue.push({ + peerId: peerId, + displayName: displayName, + connectionHash: connectionHash, + files: files, + imagesOnly: imagesOnly, + totalSize: totalSize, + badgeClassName: badgeClassName + }); + this._nextFiles(); + window.blop.play(); } _nextFiles() { if (this._busy) return; this._busy = true; - const {peer, displayName, connectionHash, files, imagesOnly, totalSize} = this._filesQueue.shift(); - this._displayFiles(peer, displayName, connectionHash, files, imagesOnly, totalSize); + const {peerId, displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName} = this._filesQueue.shift(); + this._displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName); } _dequeueFile() { @@ -794,8 +830,8 @@ class ReceiveFileDialog extends ReceiveDialog { }); } - async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize) { - this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize); + async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName) { + this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize, badgeClassName); let descriptor, url, filenameDownload; if (files.length === 1) { @@ -958,7 +994,10 @@ class ReceiveRequestDialog extends ReceiveDialog { const displayName = $(peerId).ui._displayName(); const connectionHash = $(peerId).ui._connectionHash; - this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize); + + const badgeClassName = $(peerId).ui._badgeClassName(); + + this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize, badgeClassName); if (request.thumbnailDataUrl && request.thumbnailDataUrl.substring(0, 22) === "data:image/jpeg;base64") { let element = document.createElement('img'); @@ -996,50 +1035,48 @@ class ReceiveRequestDialog extends ReceiveDialog { } } -class PairDeviceDialog extends Dialog { - constructor() { - super('pair-device-dialog'); - this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input'); - this.$submitBtn = this.$el.querySelector('button[type="submit"]'); - this.$roomKey = this.$el.querySelector('#room-key'); - this.$qrCode = this.$el.querySelector('#room-key-qr-code'); - this.$pairDeviceBtn = $('pair-device'); - this.$editPairedDevicesBtn = $('edit-paired-devices'); - this.$footerInstructionsPairedDevices = $('and-by-paired-devices'); - this.$createJoinForm = this.$el.querySelector('form'); +class InputKeyContainer { + constructor(inputKeyContainer, evaluationRegex, onAllCharsFilled, onNoAllCharsFilled, onLastCharFilled) { - this.$createJoinForm.addEventListener('submit', e => this._onSubmit(e)); - this.$pairDeviceBtn.addEventListener('click', _ => this._pairDeviceInitiate()); + this.$inputKeyContainer = inputKeyContainer; + this.$inputKeyChars = inputKeyContainer.querySelectorAll('input'); - this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel()) - this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e))); - this.$inputRoomKeyChars.forEach(el => el.addEventListener('keydown', e => this._onCharsKeyDown(e))); - this.$inputRoomKeyChars.forEach(el => el.addEventListener('focus', e => e.target.select())); - this.$inputRoomKeyChars.forEach(el => el.addEventListener('click', e => e.target.select())); + this.$inputKeyChars.forEach(char => char.addEventListener('input', e => this._onCharsInput(e))); + this.$inputKeyChars.forEach(char => char.addEventListener('keydown', e => this._onCharsKeyDown(e))); + this.$inputKeyChars.forEach(char => char.addEventListener('keyup', e => this._onCharsKeyUp(e))); + this.$inputKeyChars.forEach(char => char.addEventListener('focus', e => e.target.select())); + this.$inputKeyChars.forEach(char => char.addEventListener('click', e => e.target.select())); - Events.on('keydown', e => this._onKeyDown(e)); - Events.on('ws-connected', _ => this._onWsConnected()); - Events.on('ws-disconnected', _ => this.hide()); - Events.on('pair-device-initiated', e => this._pairDeviceInitiated(e.detail)); - Events.on('pair-device-joined', e => this._pairDeviceJoined(e.detail.peerId, e.detail.roomSecret)); - Events.on('peers', e => this._onPeers(e.detail)); - Events.on('peer-joined', e => this._onPeerJoined(e.detail)); - Events.on('pair-device-join-key-invalid', _ => this._pairDeviceJoinKeyInvalid()); - Events.on('pair-device-canceled', e => this._pairDeviceCanceled(e.detail)); - Events.on('evaluate-number-room-secrets', _ => this._evaluateNumberRoomSecrets()) - Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail)); - this.$el.addEventListener('paste', e => this._onPaste(e)); + this.evalRgx = evaluationRegex - this.evaluateRoomKeyChars(); - this.evaluateUrlAttributes(); + this._onAllCharsFilled = onAllCharsFilled; + this._onNotAllCharsFilled = onNoAllCharsFilled; + this._onLastCharFilled = onLastCharFilled; + } - this.pairPeer = {}; + _enableChars() { + this.$inputKeyChars.forEach(char => char.removeAttribute("disabled")); + } + + _disableChars() { + this.$inputKeyChars.forEach(char => char.setAttribute("disabled", "")); + } + + _clearChars() { + this.$inputKeyChars.forEach(char => char.value = ''); + } + + _cleanUp() { + this._clearChars(); + this._disableChars(); } _onCharsInput(e) { - e.target.value = e.target.value.replace(/\D/g,''); - if (!e.target.value) return; - this.evaluateRoomKeyChars(); + if (!e.target.value.match(this.evalRgx)) { + e.target.value = ''; + return; + } + this._evaluateKeyChars(); let nextSibling = e.target.nextElementSibling; if (nextSibling) { @@ -1048,13 +1085,6 @@ class PairDeviceDialog extends Dialog { } } - _onKeyDown(e) { - if (this.isShown() && e.code === "Escape") { - // Timeout to prevent paste mode from getting cancelled simultaneously - setTimeout(_ => this._pairDeviceCancel(), 50); - } - } - _onCharsKeyDown(e) { let previousSibling = e.target.previousElementSibling; let nextSibling = e.target.nextElementSibling; @@ -1070,44 +1100,118 @@ class PairDeviceDialog extends Dialog { } } - _onPaste(e) { - e.preventDefault(); - let num = e.clipboardData.getData("Text").replace(/\D/g,'').substring(0, 6); - for (let i = 0; i < num.length; i++) { - document.activeElement.value = num.charAt(i); + _onCharsKeyUp(e) { + // deactivate submit btn when e.g. using backspace to clear element + if (!e.target.value) { + this._evaluateKeyChars(); + } + } + + _getInputKey() { + let key = ""; + this.$inputKeyChars.forEach(char => { + key += char.value; + }) + return key; + } + + _onPaste(pastedKey) { + let rgx = new RegExp("(?!" + this.evalRgx.source + ").", "g"); + pastedKey = pastedKey.replace(rgx,'').substring(0, this.$inputKeyChars.length) + for (let i = 0; i < pastedKey.length; i++) { + document.activeElement.value = pastedKey.charAt(i); let nextSibling = document.activeElement.nextElementSibling; if (!nextSibling) break; nextSibling.focus(); } - this.evaluateRoomKeyChars(); + this._evaluateKeyChars(); } - evaluateRoomKeyChars() { - if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) { - this.$submitBtn.setAttribute("disabled", ""); + _evaluateKeyChars() { + if (this.$inputKeyContainer.querySelectorAll('input:placeholder-shown').length > 0) { + this._onNotAllCharsFilled(); } else { - this.inputRoomKey = ""; - this.$inputRoomKeyChars.forEach(el => { - this.inputRoomKey += el.value; - }) - this.$submitBtn.removeAttribute("disabled"); - if (document.activeElement === this.$inputRoomKeyChars[5]) { - this._pairDeviceJoin(this.inputRoomKey); + this._onAllCharsFilled(); + + const lastCharFocused = document.activeElement === this.$inputKeyChars[this.$inputKeyChars.length - 1]; + if (lastCharFocused) { + this._onLastCharFilled(); } } } + focusLastChar() { + let lastChar = this.$inputKeyChars[this.$inputKeyChars.length-1]; + lastChar.focus(); + } +} + +class PairDeviceDialog extends Dialog { + constructor() { + super('pair-device-dialog'); + this.$pairDeviceHeaderBtn = $('pair-device'); + this.$editPairedDevicesHeaderBtn = $('edit-paired-devices'); + this.$footerInstructionsPairedDevices = $$('.discovery-wrapper .badge-room-secret'); + + this.$key = this.$el.querySelector('.key'); + this.$qrCode = this.$el.querySelector('.key-qr-code'); + this.$form = this.$el.querySelector('form'); + this.$closeBtn = this.$el.querySelector('[close]') + this.$pairSubmitBtn = this.$el.querySelector('button[type="submit"]'); + + this.inputKeyContainer = new InputKeyContainer( + this.$el.querySelector('.input-key-container'), + /\d/, + () => this.$pairSubmitBtn.removeAttribute("disabled"), + () => this.$pairSubmitBtn.setAttribute("disabled", ""), + () => this._submit() + ); + + this.$pairDeviceHeaderBtn.addEventListener('click', _ => this._pairDeviceInitiate()); + this.$form.addEventListener('submit', e => this._onSubmit(e)); + this.$closeBtn.addEventListener('click', _ => this._close()); + + Events.on('keydown', e => this._onKeyDown(e)); + Events.on('ws-connected', _ => this._onWsConnected()); + Events.on('ws-disconnected', _ => this.hide()); + Events.on('pair-device-initiated', e => this._onPairDeviceInitiated(e.detail)); + Events.on('pair-device-joined', e => this._onPairDeviceJoined(e.detail.peerId, e.detail.roomSecret)); + Events.on('peers', e => this._onPeers(e.detail)); + Events.on('peer-joined', e => this._onPeerJoined(e.detail)); + Events.on('pair-device-join-key-invalid', _ => this._onPublicRoomJoinKeyInvalid()); + Events.on('pair-device-canceled', e => this._onPairDeviceCanceled(e.detail)); + Events.on('evaluate-number-room-secrets', _ => this._evaluateNumberRoomSecrets()) + Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail)); + this.$el.addEventListener('paste', e => this._onPaste(e)); + + this.evaluateUrlAttributes(); + + this.pairPeer = {}; + } + + _onKeyDown(e) { + if (this.isShown() && e.code === "Escape") { + // Timeout to prevent paste mode from getting cancelled simultaneously + setTimeout(_ => this._close(), 50); + } + } + + _onPaste(e) { + e.preventDefault(); + let pastedKey = e.clipboardData.getData("Text").replace(/\D/g,'').substring(0, 6); + this.inputKeyContainer._onPaste(pastedKey); + } + evaluateUrlAttributes() { const urlParams = new URLSearchParams(window.location.search); - if (urlParams.has('room_key')) { - this._pairDeviceJoin(urlParams.get('room_key')); + if (urlParams.has('pair_key')) { + this._pairDeviceJoin(urlParams.get('pair_key')); const url = getUrlWithoutArguments(); - window.history.replaceState({}, "Rewrite URL", url); //remove room_key from url + window.history.replaceState({}, "Rewrite URL", url); //remove pair_key from url } } _onWsConnected() { - this.$pairDeviceBtn.removeAttribute('hidden'); this._evaluateNumberRoomSecrets(); } @@ -1115,13 +1219,13 @@ class PairDeviceDialog extends Dialog { Events.fire('pair-device-initiate'); } - _pairDeviceInitiated(msg) { - this.roomKey = msg.roomKey; + _onPairDeviceInitiated(msg) { + this.pairKey = msg.pairKey; this.roomSecret = msg.roomSecret; - this.$roomKey.innerText = `${this.roomKey.substring(0,3)} ${this.roomKey.substring(3,6)}` + this.$key.innerText = `${this.pairKey.substring(0,3)} ${this.pairKey.substring(3,6)}` // Display the QR code for the url const qr = new QRCode({ - content: this._getShareRoomURL(), + content: this._getPairURL(), width: 150, height: 150, padding: 0, @@ -1131,35 +1235,41 @@ class PairDeviceDialog extends Dialog { join: true }); this.$qrCode.innerHTML = qr.svg(); - this.$inputRoomKeyChars.forEach(el => el.removeAttribute("disabled")); + this.inputKeyContainer._enableChars(); this.show(); } - _getShareRoomURL() { + _getPairURL() { let url = new URL(location.href); - url.searchParams.append('room_key', this.roomKey) + url.searchParams.append('pair_key', this.pairKey) return url.href; } _onSubmit(e) { e.preventDefault(); - this._pairDeviceJoin(this.inputRoomKey); + this._submit(); } - _pairDeviceJoin(roomKey) { - if (/^\d{6}$/g.test(roomKey)) { - roomKey = roomKey.substring(0,6); - Events.fire('pair-device-join', roomKey); - let lastChar = this.$inputRoomKeyChars[5]; - lastChar.focus(); + _submit() { + let inputKey = this.inputKeyContainer._getInputKey(); + this._pairDeviceJoin(inputKey); + } + + _pairDeviceJoin(pairKey) { + if (/^\d{6}$/g.test(pairKey)) { + Events.fire('pair-device-join', pairKey); + this.inputKeyContainer.focusLastChar(); } } - _pairDeviceJoined(peerId, roomSecret) { - // skip adding to IndexedDB if peer is another tab on the same browser + _onPairDeviceJoined(peerId, roomSecret) { + // abort if peer is another tab on the same browser and remove room-type from gui if (BrowserTabsConnector.peerIsSameBrowser(peerId)) { this._cleanUp(); this.hide(); + + Events.fire('room-secrets-deleted', [roomSecret]); + Events.fire('notify-user', Localization.getTranslation("notifications.pairing-tabs-error")); return; } @@ -1172,26 +1282,27 @@ class PairDeviceDialog extends Dialog { } _onPeers(message) { - if (!Object.keys(this.pairPeer)) return; - message.peers.forEach(messagePeer => { - this._evaluateJoinedPeer(messagePeer.id, message.roomSecret); + this._evaluateJoinedPeer(messagePeer.id, message.roomType, message.roomId); }); } _onPeerJoined(message) { - if (!Object.keys(this.pairPeer)) return; - - this._evaluateJoinedPeer(message.peer.id, message.roomSecret); + this._evaluateJoinedPeer(message.peer.id, message.roomType, message.roomId); } - _evaluateJoinedPeer(peerId, roomSecret) { + _evaluateJoinedPeer(peerId, roomType, roomId) { + const noPairPeerSaved = !Object.keys(this.pairPeer); + + if (!peerId || !roomType || !roomId || noPairPeerSaved) return; + const samePeerId = peerId === this.pairPeer.peerId; - const sameRoomSecret = roomSecret === this.pairPeer.roomSecret; + const sameRoomSecret = roomId === this.pairPeer.roomSecret; + const typeIsSecret = roomType === "secret"; - if (!peerId || !roomSecret || !samePeerId || !sameRoomSecret) return; + if (!samePeerId || !sameRoomSecret || !typeIsSecret) return; - this._onPairPeerJoined(peerId, roomSecret); + this._onPairPeerJoined(peerId, roomId); this.pairPeer = {}; } @@ -1219,26 +1330,28 @@ class PairDeviceDialog extends Dialog { }); } - _pairDeviceJoinKeyInvalid() { + _onPublicRoomJoinKeyInvalid() { Events.fire('notify-user', Localization.getTranslation("notifications.pairing-key-invalid")); } + _close() { + this._pairDeviceCancel(); + } + _pairDeviceCancel() { this.hide(); this._cleanUp(); Events.fire('pair-device-cancel'); } - _pairDeviceCanceled(roomKey) { - Events.fire('notify-user', Localization.getTranslation("notifications.pairing-key-invalidated", null, {key: roomKey})); + _onPairDeviceCanceled(pairKey) { + Events.fire('notify-user', Localization.getTranslation("notifications.pairing-key-invalidated", null, {key: pairKey})); } _cleanUp() { this.roomSecret = null; - this.roomKey = null; - this.inputRoomKey = ''; - this.$inputRoomKeyChars.forEach(el => el.value = ''); - this.$inputRoomKeyChars.forEach(el => el.setAttribute("disabled", "")); + this.pairKey = null; + this.inputKeyContainer._cleanUp(); this.pairPeer = {}; } @@ -1251,13 +1364,13 @@ class PairDeviceDialog extends Dialog { _evaluateNumberRoomSecrets() { PersistentStorage.getAllRoomSecrets().then(roomSecrets => { if (roomSecrets.length > 0) { - this.$editPairedDevicesBtn.removeAttribute('hidden'); + this.$editPairedDevicesHeaderBtn.removeAttribute('hidden'); this.$footerInstructionsPairedDevices.removeAttribute('hidden'); } else { - this.$editPairedDevicesBtn.setAttribute('hidden', ''); + this.$editPairedDevicesHeaderBtn.setAttribute('hidden', ''); this.$footerInstructionsPairedDevices.setAttribute('hidden', ''); } - Events.fire('bg-resize'); + super.evaluateFooterBadges(); }); } } @@ -1266,7 +1379,10 @@ class EditPairedDevicesDialog extends Dialog { constructor() { super('edit-paired-devices-dialog'); this.$pairedDevicesWrapper = this.$el.querySelector('.paired-devices-wrapper'); + this.$footerInstructionsPairedDevices = $$('.discovery-wrapper .badge-room-secret'); + $('edit-paired-devices').addEventListener('click', _ => this._onEditPairedDevices()); + this.$footerInstructionsPairedDevices.addEventListener('click', _ => this._onEditPairedDevices()); Events.on('peer-display-name-changed', e => this._onPeerDisplayNameChanged(e)); Events.on('keydown', e => this._onKeyDown(e)); @@ -1292,7 +1408,7 @@ class EditPairedDevicesDialog extends Dialog { ${roomSecretsEntry.device_name} - auto-accept + auto-accept unpair @@ -1315,6 +1431,7 @@ class EditPairedDevicesDialog extends Dialog { }); }) + this.$pairedDevicesWrapper.html = ""; this.$pairedDevicesWrapper.appendChild($pairedDevice) }) @@ -1351,14 +1468,227 @@ class EditPairedDevicesDialog extends Dialog { const peer = peerNode.ui._peer; - if (!peer.roomSecret) return; + if (!peer || !peer._roomIds["secret"]) return; - PersistentStorage.updateRoomSecretNames(peer.roomSecret, peer.name.displayName, peer.name.deviceName).then(roomSecretEntry => { + PersistentStorage.updateRoomSecretNames(peer._roomIds["secret"], peer.name.displayName, peer.name.deviceName).then(roomSecretEntry => { console.log(`Successfully updated DisplayName and DeviceName for roomSecretEntry ${roomSecretEntry.key}`); }) } } +class PublicRoomDialog extends Dialog { + constructor() { + super('public-room-dialog'); + + this.$key = this.$el.querySelector('.key'); + this.$qrCode = this.$el.querySelector('.key-qr-code'); + this.$form = this.$el.querySelector('form'); + this.$closeBtn = this.$el.querySelector('[close]'); + this.$leaveBtn = this.$el.querySelector('.leave-room'); + this.$joinSubmitBtn = this.$el.querySelector('button[type="submit"]'); + this.$headerBtnJoinPublicRoom = $('join-public-room'); + this.$footerInstructionsPublicRoomDevices = $$('.discovery-wrapper .badge-room-public-id'); + + + this.$form.addEventListener('submit', e => this._onSubmit(e)); + this.$closeBtn.addEventListener('click', _ => this.hide()); + this.$leaveBtn.addEventListener('click', _ => this._leavePublicRoom()) + + this.$headerBtnJoinPublicRoom.addEventListener('click', _ => this._onHeaderBtnClick()); + this.$footerInstructionsPublicRoomDevices.addEventListener('click', _ => this._onHeaderBtnClick()); + + this.inputKeyContainer = new InputKeyContainer( + this.$el.querySelector('.input-key-container'), + /[a-z|A-Z]/, + () => this.$joinSubmitBtn.removeAttribute("disabled"), + () => this.$joinSubmitBtn.setAttribute("disabled", ""), + () => this._submit() + ); + + Events.on('keydown', e => this._onKeyDown(e)); + Events.on('public-room-created', e => this._onPublicRoomCreated(e.detail)); + Events.on('peers', e => this._onPeers(e.detail)); + Events.on('peer-joined', e => this._onPeerJoined(e.detail)); + Events.on('public-room-id-invalid', e => this._onPublicRoomIdInvalid(e.detail)); + Events.on('public-room-left', _ => this._onPublicRoomLeft()); + this.$el.addEventListener('paste', e => this._onPaste(e)); + + this.evaluateUrlAttributes(); + + Events.on('ws-connected', _ => this._onWsConnected()); + } + + _onKeyDown(e) { + if (this.isShown() && e.code === "Escape") { + this.hide(); + } + } + + _onPaste(e) { + e.preventDefault(); + let pastedKey = e.clipboardData.getData("Text"); + this.inputKeyContainer._onPaste(pastedKey); + } + + _onHeaderBtnClick() { + if (this.roomId) { + this.show(); + } else { + this._createPublicRoom(); + } + } + + _createPublicRoom() { + Events.fire('create-public-room'); + } + + _onPublicRoomCreated(roomId) { + this.roomId = roomId; + + this.setIdAndQrCode(); + + this.show(); + + sessionStorage.setItem('public_room_id', roomId); + } + + setIdAndQrCode() { + this.$key.innerText = this.roomId.toUpperCase(); + + // Display the QR code for the url + const qr = new QRCode({ + content: this._getShareRoomURL(), + width: 150, + height: 150, + padding: 0, + background: "transparent", + color: `rgb(var(--text-color))`, + ecl: "L", + join: true + }); + this.$qrCode.innerHTML = qr.svg(); + + this.$footerInstructionsPublicRoomDevices.innerText = Localization.getTranslation("footer.public-room-devices", null, { + roomId: this.roomId.toUpperCase() + }); + this.$footerInstructionsPublicRoomDevices.removeAttribute('hidden'); + super.evaluateFooterBadges(); + } + + _getShareRoomURL() { + let url = new URL(location.href); + url.searchParams.append('room_key', this.roomId) + return url.href; + } + + evaluateUrlAttributes() { + const urlParams = new URLSearchParams(window.location.search); + if (urlParams.has('room_key')) { + this._joinPublicRoom(urlParams.get('room_key')); + const url = getUrlWithoutArguments(); + window.history.replaceState({}, "Rewrite URL", url); //remove pair_key from url + } + } + + _onWsConnected() { + let roomId = sessionStorage.getItem('public_room_id'); + + if (!roomId) return; + + this.roomId = roomId; + this.setIdAndQrCode(roomId); + + this._joinPublicRoom(roomId, true); + } + + _onSubmit(e) { + e.preventDefault(); + this._submit(); + } + + _submit() { + let inputKey = this.inputKeyContainer._getInputKey(); + this._joinPublicRoom(inputKey); + } + + _joinPublicRoom(roomId, createIfInvalid = false) { + roomId = roomId.toLowerCase(); + if (/^[a-z]{5}$/g.test(roomId)) { + this.roomIdJoin = roomId; + + this.inputKeyContainer.focusLastChar(); + + Events.fire('join-public-room', { + roomId: roomId, + createIfInvalid: createIfInvalid + }); + } + } + + _onPeers(message) { + message.peers.forEach(messagePeer => { + this._evaluateJoinedPeer(messagePeer.id, message.roomId); + }); + } + + _onPeerJoined(message) { + this._evaluateJoinedPeer(message.peer.id, message.roomId); + } + + _evaluateJoinedPeer(peerId, roomId) { + const isInitiatedRoomId = roomId === this.roomId; + const isJoinedRoomId = roomId === this.roomIdJoin; + + if (!peerId || !roomId || !(isInitiatedRoomId || isJoinedRoomId)) return; + + this.hide(); + + sessionStorage.setItem('public_room_id', roomId); + + if (isJoinedRoomId) { + this.roomId = roomId; + this.roomIdJoin = false; + this.setIdAndQrCode(roomId); + } + } + + _onPublicRoomIdInvalid(roomId) { + Events.fire('notify-user', Localization.getTranslation("notifications.public-room-id-invalid")); + if (roomId === sessionStorage.getItem('public_room_id')) { + sessionStorage.removeItem('public_room_id'); + } + } + + _leavePublicRoom() { + Events.fire('leave-public-room', this.roomId); + } + + _onPublicRoomLeft() { + let publicRoomId = this.roomId.toUpperCase(); + this.hide(); + this._cleanUp(); + Events.fire('notify-user', Localization.getTranslation("notifications.public-room-left", null, {publicRoomId: publicRoomId})); + } + + show() { + this.inputKeyContainer._enableChars(); + super.show(); + } + + hide() { + this.inputKeyContainer._cleanUp(); + super.hide(); + } + + _cleanUp() { + this.roomId = null; + this.inputKeyContainer._cleanUp(); + sessionStorage.removeItem('public_room_id'); + this.$footerInstructionsPublicRoomDevices.setAttribute('hidden', ''); + super.evaluateFooterBadges(); + } +} + class SendTextDialog extends Dialog { constructor() { super('send-text-dialog'); @@ -1398,6 +1728,9 @@ class SendTextDialog extends Dialog { _onRecipient(peerId, deviceName) { this.correspondingPeerId = peerId; this.$peerDisplayName.innerText = deviceName; + this.$peerDisplayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id"); + this.$peerDisplayName.classList.add($(peerId).ui._badgeClassName()); + this.show(); const range = document.createRange(); @@ -1437,7 +1770,7 @@ class ReceiveTextDialog extends Dialog { Events.on("keydown", e => this._onKeyDown(e)); - this.$displayNameNode = this.$el.querySelector('.display-name'); + this.$displayName = this.$el.querySelector('.display-name'); this._receiveTextQueue = []; } @@ -1467,7 +1800,9 @@ class ReceiveTextDialog extends Dialog { } _showReceiveTextDialog(text, peerId) { - this.$displayNameNode.innerText = $(peerId).ui._displayName(); + this.$displayName.innerText = $(peerId).ui._displayName(); + this.$displayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id"); + this.$displayName.classList.add($(peerId).ui._badgeClassName()); this.$text.innerText = text; this.$text.classList.remove('text-center'); @@ -1478,10 +1813,6 @@ class ReceiveTextDialog extends Dialog { this.$text.innerHTML = this.$text.innerHTML.replace(/((https?:\/\/|www)[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)/g, url => { return `${url}`; }); - - if (!/\s/.test(text)) { - this.$text.classList.add('text-center'); - } } this._setDocumentTitleMessages(); @@ -2269,42 +2600,42 @@ class BrowserTabsConnector { } static peerIsSameBrowser(peerId) { - let peerIdsBrowser = JSON.parse(localStorage.getItem("peerIdsBrowser")); + let peerIdsBrowser = JSON.parse(localStorage.getItem("peer_ids_browser")); return peerIdsBrowser ? peerIdsBrowser.indexOf(peerId) !== -1 : false; } static async addPeerIdToLocalStorage() { - const peerId = sessionStorage.getItem("peerId"); + const peerId = sessionStorage.getItem("peer_id"); if (!peerId) return false; let peerIdsBrowser = []; - let peerIdsBrowserOld = JSON.parse(localStorage.getItem("peerIdsBrowser")); + let peerIdsBrowserOld = JSON.parse(localStorage.getItem("peer_ids_browser")); if (peerIdsBrowserOld) peerIdsBrowser.push(...peerIdsBrowserOld); peerIdsBrowser.push(peerId); peerIdsBrowser = peerIdsBrowser.filter(onlyUnique); - localStorage.setItem("peerIdsBrowser", JSON.stringify(peerIdsBrowser)); + localStorage.setItem("peer_ids_browser", JSON.stringify(peerIdsBrowser)); return peerIdsBrowser; } static async removePeerIdFromLocalStorage(peerId) { - let peerIdsBrowser = JSON.parse(localStorage.getItem("peerIdsBrowser")); + let peerIdsBrowser = JSON.parse(localStorage.getItem("peer_ids_browser")); const index = peerIdsBrowser.indexOf(peerId); peerIdsBrowser.splice(index, 1); - localStorage.setItem("peerIdsBrowser", JSON.stringify(peerIdsBrowser)); + localStorage.setItem("peer_ids_browser", JSON.stringify(peerIdsBrowser)); return peerId; } static async removeOtherPeerIdsFromLocalStorage() { - const peerId = sessionStorage.getItem("peerId"); + const peerId = sessionStorage.getItem("peer_id"); if (!peerId) return false; let peerIdsBrowser = [peerId]; - localStorage.setItem("peerIdsBrowser", JSON.stringify(peerIdsBrowser)); + localStorage.setItem("peer_ids_browser", JSON.stringify(peerIdsBrowser)); return peerIdsBrowser; } } @@ -2322,6 +2653,7 @@ class PairDrop { const receiveTextDialog = new ReceiveTextDialog(); const pairDeviceDialog = new PairDeviceDialog(); const clearDevicesDialog = new EditPairedDevicesDialog(); + const publicRoomDialog = new PublicRoomDialog(); const base64ZipDialog = new Base64ZipDialog(); const toast = new Toast(); const notifications = new Notifications(); @@ -2369,7 +2701,7 @@ Events.on('load', () => { let oldOffset = offset w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; - offset = $$('footer').offsetHeight - 33; + offset = $$('footer').offsetHeight - 27; if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css index b36dd69..ce58bac 100644 --- a/public_included_ws_fallback/styles.css +++ b/public_included_ws_fallback/styles.css @@ -4,6 +4,8 @@ --icon-size: 24px; --primary-color: #4285f4; --paired-device-color: #00a69c; + --public-room-color: #db8500; + --accent-color: var(--primary-color); --peer-width: 120px; --ws-peer-color: #ff6b6b; color-scheme: light dark; @@ -57,7 +59,6 @@ html { .row { display: flex; - justify-content: center; flex-direction: row; } @@ -84,6 +85,10 @@ html { bottom: 0; } +.pointer { + cursor: pointer; +} + header { position: absolute; align-items: baseline; @@ -221,10 +226,6 @@ a, cursor: pointer; } -hr { - color: white; -} - input { cursor: pointer; } @@ -290,11 +291,6 @@ x-noscript { overscroll-behavior-x: none; } -@media screen and (min-width: 402px) and (max-width: 425px) { - header:has(#edit-pair-devices:not([hidden]))~#center { - --footer-height: 164px; - } -} @media screen and (max-width: 402px) { #center { @@ -476,7 +472,6 @@ x-peer { x-peer label { width: var(--peer-width); - cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; @@ -505,10 +500,14 @@ x-peer .icon-wrapper { display: flex; } -x-peer:not(.type-ip).type-secret .icon-wrapper { +x-peer.type-secret .icon-wrapper { background: var(--paired-device-color); } +x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper { + background: var(--public-room-color); +} + x-peer x-icon > .highlight-wrapper { align-self: center; align-items: center; @@ -517,17 +516,29 @@ x-peer x-icon > .highlight-wrapper { } x-peer x-icon > .highlight-wrapper > .highlight { - width: 6px; + width: 15px; height: 6px; - border-radius: 50%; + border-radius: 4px; + margin-left: 1px; + margin-right: 1px; display: none; } -x-peer.type-secret x-icon > .highlight-wrapper > .highlight { +x-peer.type-ip x-icon > .highlight-wrapper > .highlight.highlight-room-ip { + background-color: var(--primary-color); + display: inline; +} + +x-peer.type-secret x-icon > .highlight-wrapper > .highlight.highlight-room-secret { background-color: var(--paired-device-color); display: inline; } +x-peer.type-public-id x-icon > .highlight-wrapper > .highlight.highlight-room-public-id { + background-color: var(--public-room-color); + display: inline; +} + x-peer:not([status]):hover x-icon, x-peer:not([status]):focus x-icon { transform: scale(1.05); @@ -556,6 +567,16 @@ x-peer.ws-peer .highlight-wrapper { margin-top: 3px; } +#websocket-fallback { + position: absolute; + top: 56px; + opacity: 0.5; +} + +#websocket-fallback > span:nth-of-type(2) { + border-bottom: solid 2px var(--ws-peer-color); +} + .device-descriptor { width: 100%; text-align: center; @@ -585,22 +606,6 @@ x-peer.ws-peer .highlight-wrapper { white-space: nowrap; } -x-peer[status=transfer] .status:before { - content: 'Transferring...'; -} - -x-peer[status=prepare] .status:before { - content: 'Preparing...'; -} - -x-peer[status=wait] .status:before { - content: 'Waiting...'; -} - -x-peer[status=process] .status:before { - content: 'Processing...'; -} - x-peer:not([status]) .status, x-peer[status] .device-name { display: none; @@ -634,12 +639,11 @@ x-peer[drop] x-icon { footer { position: relative; - margin-top: auto; z-index: 2; align-items: center; text-align: center; - transition: color 300ms; cursor: default; + margin: auto 5px 5px; } footer .logo { @@ -649,45 +653,72 @@ footer .logo { margin-top: -10px; } -footer .font-body2 { - color: var(--primary-color); - margin: auto 18px; +.discovery-wrapper { + font-size: 12px; + max-width: 350px; + margin: 10px auto auto; + border: 3px solid var(--border-color); + border-radius: 0.5rem; + padding: 2px; + background-color: rgb(var(--bg-color)); + transition: background-color 0.5s ease; } -#on-this-network { - border-bottom: solid 4px var(--primary-color); - padding-bottom: 1px; - word-break: keep-all; +/*You can be discovered wrapper*/ +.discovery-wrapper > div:first-of-type { + padding-left: 4px; + padding-right: 4px; } -#paired-devices { - border-bottom: solid 4px var(--paired-device-color); - padding-bottom: 1px; + +.discovery-wrapper .badge { word-break: keep-all; + margin: 2px; +} + +.badge { + border-radius: 0.3rem/0.3rem; + padding-right: 0.3rem; + padding-left: 0.3em; + background-color: var(--badge-color); + color: white; + transition: background-color 0.5s ease; + white-space: nowrap; +} + +.badge-room-ip { + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +.badge-room-secret { + background-color: var(--paired-device-color); + border-color: var(--paired-device-color); +} + +.badge-room-public-id { + background-color: var(--public-room-color); + border-color: var(--public-room-color); } #display-name { + position: relative; display: inline-block; text-align: left; border: none; outline: none; max-width: 15em; text-overflow: ellipsis; - white-space: nowrap; cursor: text; margin-left: -1rem; margin-bottom: -6px; - padding-right: 0.3rem; - padding-left: 0.3em; padding-bottom: 0.1rem; border-radius: 1.3rem/30%; border-right: solid 1rem transparent; border-left: solid 1rem transparent; background-clip: padding-box; - background-color: rgba(var(--text-color), 43%); - color: white; - transition: background-color 0.5s ease; overflow: hidden; + z-index: 1; } #edit-pen { @@ -696,7 +727,6 @@ footer .font-body2 { margin-left: -1rem; margin-bottom: -2px; position: relative; - z-index: -1; } /* Dialog */ @@ -714,7 +744,6 @@ x-dialog x-paper { z-index: 3; background: white; border-radius: 8px; - padding: 16px 24px; width: 100%; max-width: 400px; overflow: hidden; @@ -723,7 +752,27 @@ x-dialog x-paper { will-change: transform; } -#pair-device-dialog x-paper { +x-paper > .row:first-of-type { + background-color: var(--accent-color); + border-bottom: solid 4px var(--border-color); + margin-bottom: 10px; +} + +x-paper > .row:first-of-type h2 { + color: white; +} + +#pair-device-dialog, +#edit-paired-devices-dialog { + --accent-color: var(--paired-device-color); +} + +#public-room-dialog { + --accent-color: var(--public-room-color); +} + +#pair-device-dialog x-paper, +#public-room-dialog x-paper { display: flex; flex-direction: column; position: absolute; @@ -738,6 +787,12 @@ x-dialog x-paper { background: var(--paired-device-color); } +#public-room-dialog ::-moz-selection, +#public-room-dialog ::selection { + color: black; + background: var(--public-room-color); +} + x-dialog:not([show]) { pointer-events: none; } @@ -755,24 +810,21 @@ x-dialog a { color: var(--primary-color); } -x-dialog .font-subheading { - margin-bottom: 5px; -} - /* Pair Devices Dialog */ -#key-input-container { +.input-key-container { width: 100%; display: flex; justify-content: center; } -#key-input-container > input { +.input-key-container > input { width: 45px; height: 45px; font-size: 30px; padding: 0; text-align: center; + text-transform: uppercase; display: -webkit-box !important; display: -webkit-flex !important; display: -moz-flex !important; @@ -783,15 +835,15 @@ x-dialog .font-subheading { justify-content: center; } -#key-input-container > input + * { +.input-key-container > input + * { margin-left: 6px; } -#key-input-container > input:nth-of-type(4) { +.input-key-container.six-chars > input:nth-of-type(4) { margin-left: 5%; } -#room-key { +.key { -webkit-user-select: text; -moz-user-select: text; user-select: text; @@ -802,17 +854,48 @@ x-dialog .font-subheading { margin: 15px -15px; } -#room-key-qr-code { +.key-qr-code { margin: 16px; } -#pair-instructions { +.key-instructions { flex-direction: column; } +x-dialog h2 { + margin-top: 5px; + margin-bottom: 0; +} + x-dialog hr { - margin: 20px -24px 20px -24px; - border: solid 1.25px var(--border-color); + height: 3px; + border: none; + width: 100%; + background-color: var(--border-color); +} + +.hr-note { + margin-top: 10px; + margin-bottom: 10px; +} + +.hr-note hr { + margin-bottom: -2px; +} + +.hr-note > div { + height: 0; + transform: translateY(-10px); +} + + +.hr-note > div > span { + padding: 3px 10px; + border-radius: 10px; + color: rgb(var(--text-color)); + background-color: rgb(var(--bg-color)); + border: var(--border-color) solid 3px; + text-transform: uppercase; } #pair-device-dialog x-background { @@ -906,22 +989,17 @@ x-dialog hr { text-overflow: ellipsis; } -.paired-device > .auto-accept { - cursor: pointer; -} - /* Receive Dialog */ -x-dialog .row { - margin-top: 24px; - margin-bottom: 8px; +x-paper > .row { + padding: 10px; } /* button row*/ x-paper > .button-row { - margin: 25px -24px -15px; - border-top: solid 2.5px var(--border-color); + border-top: solid 3px var(--border-color); height: 50px; + margin-top: 10px; } x-paper > .button-row > .button { @@ -929,16 +1007,16 @@ x-paper > .button-row > .button { width: 100%; } +x-paper > .button-row > .button:not(:first-child) { + border-right: solid 1.5px var(--border-color); +} + x-paper > .button-row > .button:not(:last-child) { - border-left: solid 2.5px var(--border-color); + border-left: solid 1.5px var(--border-color); } .file-description { - margin-bottom: 25px; -} - -.file-description .row { - margin: 0 + max-width: 100%; } .file-description span { @@ -949,23 +1027,29 @@ x-paper > .button-row > .button:not(:last-child) { .file-name { font-style: italic; max-width: 100%; + margin-top: 5px; } .file-stem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + padding-right: 1px; } /* Send Text Dialog */ -/* Todo: add pair underline to send / receive dialogs displayName */ x-dialog .dialog-subheader { - margin-bottom: 25px; + padding-top: 16px; + padding-bottom: 16px; +} + +#send-text-dialog .display-name-wrapper { + padding-bottom: 0; } #text-input { min-height: 200px; - margin: 14px auto; + width: 100%; } /* Receive Text Dialog */ @@ -980,7 +1064,6 @@ x-dialog .dialog-subheader { -moz-user-select: text; user-select: text; white-space: pre-wrap; - padding: 15px 0; } #receive-text-dialog #text a { @@ -1055,12 +1138,13 @@ x-dialog .dialog-subheader { cursor: pointer; user-select: none; background: inherit; - color: var(--primary-color); + color: var(--accent-color); overflow: hidden; } .button[disabled] { color: #5B5B66; + cursor: not-allowed; } @@ -1141,8 +1225,7 @@ button::-moz-focus-inner { border: none; outline: none; padding: 16px 24px; - border-radius: 16px; - margin: 10px 0; + border-radius: 8px; font-size: 14px; font-family: inherit; background: #f1f3f4; @@ -1351,32 +1434,7 @@ x-peers:empty~x-instructions { } } -#websocket-fallback { - margin-left: 5px; - margin-right: 5px; - padding: 5px; - text-align: center; - opacity: 0.5; - transition: opacity 300ms; -} - -#websocket-fallback { - margin: 2px; -} - -#websocket-fallback > span:nth-child(2) { - border-bottom: solid 4px var(--ws-peer-color); -} - /* Responsive Styles */ -@media screen and (max-width: 360px) { - x-dialog x-paper { - padding: 15px; - } - x-paper > .button-row { - margin: auto -15px -15px; - } -} @media screen and (min-height: 800px) { #websocket-fallback { @@ -1399,8 +1457,9 @@ body { --text-color: 51,51,51; --bg-color: 250,250,250; /*rgb code*/ --bg-color-test: 18,18,18; - --bg-color-secondary: #f1f3f4; - --border-color: #e7e8e8; + --bg-color-secondary: #e4e4e4; + --border-color: rgb(169, 169, 169); + --badge-color: #a5a5a5; } /* Dark theme colors */ @@ -1408,7 +1467,8 @@ body.dark-theme { --text-color: 238,238,238; --bg-color: 18,18,18; /*rgb code*/ --bg-color-secondary: #333; - --border-color: #252525; + --border-color: rgb(238,238,238); + --badge-color: #717171; } /* Colored Elements */ @@ -1442,7 +1502,7 @@ x-dialog x-paper { /* Image/Video/Audio Preview */ .file-preview { - margin: 10px -24px 40px -24px; + margin-bottom: 15px; } .file-preview:empty { @@ -1466,15 +1526,17 @@ x-dialog x-paper { --text-color: 238,238,238; --bg-color: 18,18,18; /*rgb code*/ --bg-color-secondary: #333; - --border-color: #252525; + --border-color: rgb(238,238,238); + --badge-color: #717171; } /* Override dark mode with light mode styles if the user decides to swap */ body.light-theme { --text-color: 51,51,51; --bg-color: 250,250,250; /*rgb code*/ - --bg-color-secondary: #f1f3f4; - --border-color: #e7e8e8; + --bg-color-secondary: #e4e4e4; + --border-color: rgb(169, 169, 169); + --badge-color: #a5a5a5; } }
+ Input this room id on another device + or scan the QR-Code. +
Enter room id from another device to join.