increase version to v1.4.2

pairdrop-cli: add fallback if navigator.clipboard.readText() is not available

.github/workflows/github-image.yml

@@ -16,7 +16,7 @@ on:
 
 env:
   REGISTRY: ghcr.io
-  IMAGE_NAME: pairdrop
+  IMAGE_NAME: ${{ github.repository }}
 
 jobs:
   build-and-push-image:

README.md

@@ -42,9 +42,9 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * Paired devices outside your local network that are behind a NAT are connected automatically via [Open Relay: Free WebRTC TURN Server](https://www.metered.ca/tools/openrelay/)
 
 ### [Improved UI for sending/receiving files](https://github.com/RobinLinus/snapdrop/issues/560)
-* Files are transferred only after a request is accepted first. On transfer completion they are downloaded automatically if possible.
-* Multiple files are downloaded as ZIP file
-* On iOS and Android the devices share menu is opened instead of downloading the files
+* Files are transferred only after a request is accepted first. On transfer completion files are downloaded automatically if possible.
+* Multiple files are downloaded as a ZIP file
+* On iOS and Android, in addition to downloading, files can be shared or saved to the gallery via the Share menu.
 * Multiple files are transferred at once with an overall progress indicator
 
 ### Send Files or Text Directly From Share Menu, Context Menu or CLI
@@ -54,7 +54,8 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * [Send directly via command-line interface](/docs/how-to.md#send-directly-via-command-line-interface)
 
 ### Other changes
-* [Paste Mode](https://github.com/RobinLinus/snapdrop/pull/534)
+* Change your display name permanently to easily differentiate your devices
+* [Paste files/text and choose the recipient afterwords ](https://github.com/RobinLinus/snapdrop/pull/534)
 * [Prevent devices from sleeping on file transfer](https://github.com/RobinLinus/snapdrop/pull/413)
 * Warn user before PairDrop is closed on file transfer  
 * Open PairDrop on multiple tabs simultaneously (Thanks [@willstott101](https://github.com/willstott101))
@@ -63,6 +64,7 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * Automatic restart on error (Thanks [@KaKi87](https://github.com/KaKi87))
 * Lots of stability fixes (Thanks [@MWY001](https://github.com/MWY001) [@skiby7](https://github.com/skiby7) and [@willstott101](https://github.com/willstott101))
 * To host PairDrop on your local network (e.g. on Raspberry Pi): [All peers connected with private IPs are discoverable by each other](https://github.com/RobinLinus/snapdrop/pull/558)
+* When hosting PairDrop yourself you can [set your own STUN/TURN servers](/docs/host-your-own.md#specify-stunturn-servers)
 
 ## Screenshots
 <div align="center">
@@ -78,6 +80,7 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * [Progressive Web App](https://wikipedia.org/wiki/Progressive_Web_App)
 * [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
 * [zip.js](https://gildas-lormeau.github.io/zip.js/)
+* [cyrb53](https://github.com/bryc) super fast hash function
 
 Have any questions? Read our [FAQ](/docs/faq.md).
 

docs/host-your-own.md

@@ -2,40 +2,35 @@
 The easiest way to get PairDrop up and running is by using Docker.
 
 ## Deployment with Docker
-> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
->
-> To prevent bypassing the proxy and reach the docker container directly, `127.0.0.1` is specified in the run command.
 
-### Image from Docker Hub
+### Docker Image from Docker Hub
 
 ```bash
 docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 lscr.io/linuxserver/pairdrop
 ```
 
-### Image from GHCR
+> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+>
+> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
 
-```bash
-docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ghcr.io/schlagmichdoch/pairdrop
-```
-
-### Options / Flags
+#### Options / Flags
 Set options by using the following flags in the `docker run` command:
 
-#### Port
-```
+##### Port
+```bash
 -p 127.0.0.1:8080:3000
 ```
 > Specify the port used by the docker image 
 > - 3000 -> `-p 127.0.0.1:3000:3000`
 > - 8080 -> `-p 127.0.0.1:8080:3000`
-#### Rate limiting requests
+##### Rate limiting requests
 ```
 -e RATE_LIMIT=true
 ```
-> Limits clients to 100 requests per 5 min
+> Limits clients to 1000 requests per 5 min
 
-#### Websocket Fallback (for VPN)
-```
+##### Websocket Fallback (for VPN)
+```bash
 -e WS_FALLBACK=true
 ```
 > Provides PairDrop to clients with an included websocket fallback if the peer to peer WebRTC connection is not available to the client.
@@ -47,10 +42,48 @@ Set options by using the following flags in the `docker run` command:
 > Beware that the traffic routed via this fallback is readable by the server. Only ever use this on instances you can trust.
 > Additionally, beware that all traffic using this fallback debits the servers data plan.
 
+##### Specify STUN/TURN Servers
+```bash
+-e RTC_CONFIG="rtc_config.json"
+```
+
+> Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration.
+> You can use `pairdrop/rtc_config_example.json` as a starting point.
+>
+> Default configuration:
+> ```json
+> {
+>   "sdpSemantics": "unified-plan",
+>   "iceServers": [
+>     {
+>       "urls": "stun:stun.l.google.com:19302"
+>     },
+>     {
+>       "urls": "stun:openrelay.metered.ca:80"
+>     },
+>     {
+>       "urls": "turn:openrelay.metered.ca:443",
+>       "username": "openrelayproject",
+>       "credential": "openrelayproject"
+>     }
+>   ]
+> }
+> ```
+
 <br>
 
-## Deployment with Docker with self-built image
-### Build the image
+### Docker Image from GHCR
+```bash
+docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ghcr.io/schlagmichdoch/pairdrop npm run start:prod 
+```
+> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+>
+> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
+>
+> To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)
+
+### Docker Image self-built
+#### Build the image
 ```bash
 docker build --pull . -f Dockerfile -t pairdrop
 ```
@@ -58,15 +91,45 @@ docker build --pull . -f Dockerfile -t pairdrop
 >
 > `--pull` ensures always the latest node image is used.
 
-### Run the image
+#### Run the image
 ```bash
 docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 -it pairdrop npm run start:prod
 ```
 > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> To prevent bypassing the proxy and reach the docker container directly, `127.0.0.1` is specified in the run command.
+> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
 >
-> To specify options replace `npm run start:prod` according to [the documentation above.](#options--flags)
+> To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)
+
+<br>
+
+## Deployment with Docker Compose
+Here's an example docker-compose file:
+
+```yaml
+version: "2"
+services:
+    pairdrop:
+        image: lscr.io/linuxserver/pairdrop:latest
+        container_name: pairdrop
+        restart: unless-stopped
+        environment:
+            - PUID=1000 # UID to run the application as
+            - PGID=1000 # GID to run the application as
+            - WS_FALLBACK=false # Set to true to enable websocket fallback if the peer to peer WebRTC connection is not available to the client.
+            - RATE_LIMIT=false # Set to true to limit clients to 1000 requests per 5 min.
+            - TZ=Etc/UTC # Time Zone
+        ports:
+            - 127.0.0.1:3000:3000 # Web UI
+```
+
+Run the compose file with `docker compose up -d`.
+
+> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+>
+> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
+
+<br>
 
 ## Deployment with node
 
@@ -108,6 +171,38 @@ $env:PORT=3010; npm start
 ```
 > Specify the port PairDrop is running on. (Default: 3000)
 
+#### Specify STUN/TURN Server
+On Unix based systems
+```bash
+RTC_CONFIG="rtc_config.json" npm start
+```
+On Windows
+```bash
+$env:RTC_CONFIG="rtc_config.json"; npm start 
+```
+> Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration.
+> You can use `pairdrop/rtc_config_example.json` as a starting point.
+>
+> Default configuration:
+> ```json
+> {
+>   "sdpSemantics": "unified-plan",
+>   "iceServers": [
+>     {
+>       "urls": "stun:stun.l.google.com:19302"
+>     },
+>     {
+>       "urls": "stun:openrelay.metered.ca:80"
+>     },
+>     {
+>       "urls": "turn:openrelay.metered.ca:443",
+>       "username": "openrelayproject",
+>       "credential": "openrelayproject"
+>     }
+>   ]
+> }
+> ```
+
 ### Options / Flags
 #### Local Run
 ```bash
@@ -117,7 +212,7 @@ npm start -- --localhost-only
 > 
 > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> Use this when deploying PairDrop with node to prevent bypassing the proxy and reach the docker container directly.
+> Use this when deploying PairDrop with node to prevent bypassing the proxy by reaching the docker container directly.
 
 #### Automatic restart on error
 ```bash
@@ -131,7 +226,7 @@ npm start -- --auto-restart
 ```bash
 npm start -- --rate-limit 
 ```
-> Limits clients to 100 requests per 5 min
+> Limits clients to 1000 requests per 5 min
 
 <br>
 
@@ -229,13 +324,13 @@ server {
 
 ### Using Apache
 install modules `proxy`, `proxy_http`, `mod_proxy_wstunnel`
-```shell
+```bash
 a2enmod proxy
 ```
-```shell
+```bash
 a2enmod proxy_http
 ```
-```shell
+```bash
 a2enmod proxy_wstunnel
 ```
 
@@ -245,7 +340,7 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian)
 
 **pairdrop.conf**
 #### Allow http and https requests
-```
+```apacheconf
 <VirtualHost *:80>	
 	ProxyPass / http://127.0.0.1:3000/
 	RewriteEngine on
@@ -262,7 +357,7 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian)
 </VirtualHost>
 ```
 #### Automatic http to https redirect:
-```
+```apacheconf
 <VirtualHost *:80>	
    Redirect permanent / https://127.0.0.1:3000/
 </VirtualHost>
@@ -275,10 +370,10 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian)
 </VirtualHost>
 ```
 Activate the new virtual host and reload apache:
-```shell
+```bash
 a2ensite pairdrop
 ```
-```shell
+```bash
 service apache2 reload
 ```
 
@@ -289,7 +384,7 @@ All files needed for developing are available on the branch `dev`.
 First, [Install docker with docker-compose.](https://docs.docker.com/compose/install/)
 
 Then, clone the repository and run docker-compose:
-```shell
+```bash
     git clone https://github.com/schlagmichdoch/PairDrop.git
 
     cd PairDrop
@@ -314,7 +409,7 @@ The nginx container creates a CA certificate and a website certificate for you.
 
 If you want to test PWA features, you need to trust the CA of the certificate for your local deployment. For your convenience, you can download the crt file from `http://<Your FQDN>:8080/ca.crt`. Install that certificate to the trust store of your operating system.
 - On Windows, make sure to install it to the `Trusted Root Certification Authorities` store.
-- On MacOS, double click the installed CA certificate in `Keychain Access`, expand `Trust`, and select `Always Trust` for SSL.
+- On macOS, double-click the installed CA certificate in `Keychain Access`, expand `Trust`, and select `Always Trust` for SSL.
 - Firefox uses its own trust store. To install the CA, point Firefox at `http://<Your FQDN>:8080/ca.crt`. When prompted, select `Trust this CA to identify websites` and click OK.
 - When using Chrome, you need to restart Chrome so it reloads the trust store (`chrome://restart`). Additionally, after installing a new cert, you need to clear the Storage (DevTools -> Application -> Clear storage -> Clear site data).
 

index.js

@@ -1,6 +1,13 @@
 const process = require('process')
 const crypto = require('crypto')
 const {spawn} = require('child_process')
+const WebSocket = require('ws');
+const fs = require('fs');
+const parser = require('ua-parser-js');
+const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator');
+const express = require('express');
+const RateLimit = require('express-rate-limit');
+const http = require('http');
 
 // Handle SIGINT
 process.on('SIGINT', () => {
@@ -49,9 +56,24 @@ if (process.argv.includes('--auto-restart')) {
     );
 }
 
-const express = require('express');
-const RateLimit = require('express-rate-limit');
-const http = require('http');
+const rtcConfig = process.env.RTC_CONFIG
+    ? JSON.parse(fs.readFileSync(process.env.RTC_CONFIG, 'utf8'))
+    : {
+        "sdpSemantics": "unified-plan",
+        "iceServers": [
+            {
+                "urls": "stun:stun.l.google.com:19302"
+            },
+            {
+                "urls": "stun:openrelay.metered.ca:80"
+            },
+            {
+                "urls": "turn:openrelay.metered.ca:443",
+                "username": "openrelayproject",
+                "credential": "openrelayproject"
+            }
+        ]
+    };
 
 const app = express();
 
@@ -93,13 +115,9 @@ if (process.argv.includes('--localhost-only')) {
     server.listen(port);
 }
 
-const parser = require('ua-parser-js');
-const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator');
-
 class PairDropServer {
 
     constructor() {
-        const WebSocket = require('ws');
         this._wss = new WebSocket.Server({ server });
         this._wss.on('connection', (socket, request) => this._onConnection(new Peer(socket, request)));
 
@@ -110,10 +128,14 @@ class PairDropServer {
     }
 
     _onConnection(peer) {
-        this._joinRoom(peer);
         peer.socket.on('message', message => this._onMessage(peer, message));
         peer.socket.onerror = e => console.error(e);
         this._keepAlive(peer);
+        this._send(peer, {
+            type: 'rtc-config',
+            config: rtcConfig
+        });
+        this._joinRoom(peer);
 
         // send displayName
         this._send(peer, {
@@ -121,7 +143,8 @@ class PairDropServer {
             message: {
                 displayName: peer.name.displayName,
                 deviceName: peer.name.deviceName,
-                peerId: peer.id
+                peerId: peer.id,
+                peerIdHash: peer.id.hashCode128BitSalted()
             }
         });
     }
@@ -317,6 +340,10 @@ class PairDropServer {
     _joinRoom(peer, roomType = 'ip', roomSecret = '') {
         const room = roomType === 'ip' ? peer.ip : roomSecret;
 
+        if (this._rooms[room] && this._rooms[room][peer.id]) {
+            this._leaveRoom(peer, roomType, roomSecret);
+        }
+
         // if room doesn't exist, create it
         if (!this._rooms[room]) {
             this._rooms[room] = {};
@@ -526,9 +553,11 @@ class Peer {
     }
 
     _setPeerId(request) {
-        let peer_id = new URL(request.url, "http://server").searchParams.get("peer_id");
-        if (peer_id && Peer.isValidUuid(peer_id)) {
-            this.id = peer_id;
+        const searchParams = new URL(request.url, "http://server").searchParams;
+        let peerId = searchParams.get("peer_id");
+        let peerIdHash = searchParams.get("peer_id_hash");
+        if (peerId && Peer.isValidUuid(peerId) && this.isPeerIdHashValid(peerId, peerIdHash)) {
+            this.id = peerId;
         } else {
             this.id = crypto.randomUUID();
         }
@@ -587,6 +616,10 @@ class Peer {
         return /^([0-9]|[a-f]){8}-(([0-9]|[a-f]){4}-){3}([0-9]|[a-f]){12}$/.test(uuid);
     }
 
+    isPeerIdHashValid(peerId, peerIdHash) {
+        return peerIdHash === peerId.hashCode128BitSalted();
+    }
+
     addRoomSecret(roomSecret) {
         if (!(roomSecret in this.roomSecrets)) {
             this.roomSecrets.push(roomSecret);
@@ -602,14 +635,55 @@ class Peer {
 
 Object.defineProperty(String.prototype, 'hashCode', {
     value: function() {
-        var hash = 0, i, chr;
-        for (i = 0; i < this.length; i++) {
-            chr   = this.charCodeAt(i);
-            hash  = ((hash << 5) - hash) + chr;
-            hash |= 0; // Convert to 32bit integer
-        }
-        return hash;
+        return cyrb53(this);
     }
 });
 
+Object.defineProperty(String.prototype, 'hashCode128BitSalted', {
+    value: function() {
+        return hasher.hashCode128BitSalted(this);
+    }
+});
+
+const hasher = (() => {
+    let seeds;
+    return {
+        hashCode128BitSalted(str) {
+            if (!seeds) {
+                // seeds are created on first call to salt hash.
+                seeds = [4];
+                for (let i=0; i<4; i++) {
+                    const randomBuffer = new Uint32Array(1);
+                    crypto.webcrypto.getRandomValues(randomBuffer);
+                    seeds[i] = randomBuffer[0];
+                }
+            }
+            let hashCode = "";
+            for (let i=0; i<4; i++) {
+                hashCode += cyrb53(str, seeds[i]);
+            }
+            return hashCode;
+        }
+    }
+
+})()
+
+/*
+    cyrb53 (c) 2018 bryc (github.com/bryc)
+    A fast and simple hash function with decent collision resistance.
+    Largely inspired by MurmurHash2/3, but with a focus on speed/simplicity.
+    Public domain. Attribution appreciated.
+*/
+const cyrb53 = function(str, seed = 0) {
+    let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
+    for (let i = 0, ch; i < str.length; i++) {
+        ch = str.charCodeAt(i);
+        h1 = Math.imul(h1 ^ ch, 2654435761);
+        h2 = Math.imul(h2 ^ ch, 1597334677);
+    }
+    h1 = Math.imul(h1 ^ (h1>>>16), 2246822507) ^ Math.imul(h2 ^ (h2>>>13), 3266489909);
+    h2 = Math.imul(h2 ^ (h2>>>16), 2246822507) ^ Math.imul(h1 ^ (h1>>>13), 3266489909);
+    return 4294967296 * (2097151 & h2) + (h1>>>0);
+};
+
 new PairDropServer();

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "pairdrop",
-  "version": "1.1.2",
+  "version": "1.4.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.1.2",
+      "version": "1.4.2",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",
         "express-rate-limit": "^6.7.0",
-        "ua-parser-js": "^1.0.33",
+        "ua-parser-js": "^1.0.34",
         "unique-names-generator": "^4.3.0",
         "ws": "^8.12.1"
       },
@@ -583,9 +583,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ==",
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
+      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew==",
       "funding": [
         {
           "type": "opencollective",
@@ -1070,9 +1070,9 @@
       }
     },
     "ua-parser-js": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ=="
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
+      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew=="
     },
     "unique-names-generator": {
       "version": "4.7.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.1.2",
+  "version": "1.4.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
   "dependencies": {
     "express": "^4.18.2",
     "express-rate-limit": "^6.7.0",
-    "ua-parser-js": "^1.0.33",
+    "ua-parser-js": "^1.0.34",
     "unique-names-generator": "^4.3.0",
     "ws": "^8.12.1"
   },

pairdrop-cli/pairdrop

@@ -106,7 +106,11 @@ sendFiles()
     zip -q -b /tmp/ -r "$zipPath" "$path"
     zip -q -b /tmp/ "$zipPathTemp" "$zipPath"
 
-    hash=$(base64 -w 0 "$zipPathTemp")
+    if [[ $OS == "Mac" ]];then
+      hash=$(base64 -i "$zipPathTemp")
+    else
+      hash=$(base64 -w 0 "$zipPathTemp")
+    fi
 
     # remove temporary temp file
     rm "$zipPathTemp"
@@ -116,7 +120,11 @@ sendFiles()
     # Create zip file temporarily to send file
     zip -q -b /tmp/ "$zipPath" "$path"
 
-    hash=$(base64 -w 0 "$zipPath")
+    if [[ $OS == "Mac" ]];then
+      hash=$(base64 -i "$zipPath")
+    else
+      hash=$(base64 -w 0 "$zipPath")
+    fi
   fi
 
   # remove temporary temp file

public/index.html

@@ -59,7 +59,7 @@
                 <use xlink:href="#homescreen" />
             </svg>
         </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" >
+        <a id="pair-device" class="icon-button" title="Pair Device" hidden>
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
@@ -69,173 +69,194 @@
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
         </a>
+        <a id="cancel-paste-mode" class="button" hidden>Done</a>
     </header>
-    <a id="cancelPasteModeBtn" class="button" close hidden>Done</a>
-    <!-- Peers -->
-    <x-peers class="center"></x-peers>
-    <x-no-peers>
-        <h2>Open PairDrop on other devices to send files</h2>
-        <div>Pair devices to be discoverable on other networks</div>
-    </x-no-peers>
-    <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
-        <p id="pasteFilename"></p>
-    </x-instructions>
+    <!-- Center -->
+    <div id="center">
+        <!-- Peers -->
+        <div class="x-peers-filler"></div>
+        <x-peers class="center"></x-peers>
+        <x-no-peers>
+            <h2>Open PairDrop on other devices to send files</h2>
+            <div>Pair devices to be discoverable on other networks</div>
+        </x-no-peers>
+        <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
+            <p id="paste-filename"></p>
+        </x-instructions>
+    </div>
     <!-- Footer -->
     <footer class="column">
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="displayName" placeholder="&nbsp;"></div>
+        <div>
+            <span>You are known as:</span>
+            <div id="display-name" placeholder="Loading..." title="Edit your device name permanently" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
+            <svg id="edit-pen" class="icon">
+                <use xlink:href="#edit-pen-icon" />
+            </svg>
+        </div>
         <div class="font-body2">
             You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
             <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
         </div>
     </footer>
     <!-- Pair Device Dialog -->
-    <x-dialog id="pairDeviceDialog">
+    <x-dialog id="pair-device-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Pair Devices</h2>
-                    <div class="center" id="roomKeyQrCode"></div>
-                    <h1 class="center" id="roomKey">000 000</h1>
-                    <div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
+                    <div id="room-key-qr-code" class="center"></div>
+                    <h1 id="room-key" class="center">000 000</h1>
+                    <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
                     <hr>
-                    <div id="keyInputContainer">
-                        <input type="tel" id="char0" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" id="char1" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char2" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char3" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char4" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char5" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                    <div id="key-input-container">
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
                     </div>
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit" disabled>Pair</button>
-                        <div class="separator"></div>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Clear Devices Dialog -->
-    <x-dialog id="clearDevicesDialog">
+    <x-dialog id="clear-devices-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Unpair Devices</h2>
                     <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit">Unpair Devices</button>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Request Dialog -->
-    <x-dialog id="receiveRequestDialog">
+    <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center">PairDrop</h2>
-                <div class="text-center file-description">
+                <h2 class="center"></h2>
+                <div class="center column file-description">
                     <div>
-                        <span id="requestingPeerDisplayName"></span>
+                        <span class="display-name"></span>
                         <span>would like to share</span>
                     </div>
-                    <div class="row" id="fileName">
-                        <span id="fileStem"></span>
-                        <span id="fileExtension"></span>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
                     </div>
-                    <div class="row">
-                        <span id="fileOther"></span>
+                    <div class="row file-other">
                     </div>
+                    <div class="row font-body2 file-size"></div>
                 </div>
-                <div class="font-body2 text-center file-size"></div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button>
-                    <div class="separator"></div>
-                    <button class="button" id="declineRequest" title="ESCAPE">Decline</button>
+                <div class="center row-reverse">
+                    <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
+                    <button id="decline-request" class="button" title="ESCAPE">Decline</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Receive File Dialog -->
-    <x-dialog id="receiveFileDialog">
+    <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center" id="receiveTitle"></h2>
-                <div class="text-center file-description"></div>
-                <div class="font-body2 text-center file-size"></div>
+                <h2 class="center"></h2>
+                <div class="center column file-description">
+                    <div>
+                        <span class="display-name"></span>
+                        <span>has sent</span>
+                    </div>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
+                    </div>
+                    <div class="row file-other"></div>
+                    <div class="row font-body2 file-size"></div>
+                </div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <a class="button" id="shareOrDownload" autofocus></a>
-                    <div class="separator"></div>
+                <div class="center row-reverse">
+                    <button id="share-btn" class="button" autofocus hidden>Share</button>
+                    <button id="download-btn" class="button" autofocus>Download</button>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Send Text Dialog -->
-    <x-dialog id="sendTextDialog">
+    <x-dialog id="send-text-dialog">
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2>PairDrop - Send a Message</h2>
-                    <div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
-                    <div class="row-reverse">
+                    <h2 class="text-center">Send Message</h2>
+                    <div class="dialog-subheader text-center">
+                        <span>Send a Message to</span>
+                        <span class="display-name"></span>
+                    </div>
+                    <div class="row-separator"></div>
+                    <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                    <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <div class="separator"></div>
-                        <a class="button" title="ESCAPE" close>Cancel</a>
+                        <button class="button" title="ESCAPE" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Text Dialog -->
-    <x-dialog id="receiveTextDialog">
+    <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2>PairDrop - Message Received</h2>
-                <div id="receiveTextDescriptionContainer">
-                    <span id="receiveTextPeerDisplayName"></span>
-                    <span>sent the following message:</span>
+                <h2 class="text-center">Message Received</h2>
+                <div class="text-center dialog-subheader">
+                    <span class="display-name"></span>
+                    <span>has sent:</span>
                 </div>
                 <div class="row-separator"></div>
                 <div id="text"></div>
-                <div class="row-reverse">
-                    <button class="button" id="copy" title="CTRL/⌘ + C">Copy</button>
-                    <div class="separator"></div>
-                    <button class="button" id="close" title="ESCAPE">Close</button>
+                <div class="center row-reverse">
+                    <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
+                    <button id="close" class="button" title="ESCAPE">Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
-    <!-- base64PasteDialog Dialog -->
-    <x-dialog id="base64PasteDialog">
+    <!-- base64 Paste Dialog -->
+    <x-dialog id="base64-paste-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <button class="button center" id="base64PasteBtn" title="Paste">Tap here to paste files</button>
+                <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
+                <div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
                 <button class="button center" close>Close</button>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Toast -->
     <div class="toast-container full center">
-        <x-toast class="row" shadow="1" id="toast"></x-toast>
+        <x-toast id="toast" class="row" shadow="1"></x-toast>
     </div>
     <!-- About Page -->
     <x-about id="about" class="full center column">
+        <header class="row-reverse fade-in">
+            <a href="#" class="close icon-button">
+                <svg class="icon">
+                    <use xlink:href="#close-icon" />
+                </svg>
+            </a>
+        </header>
         <section class="center column fade-in">
-            <header class="row-reverse">
-                <a href="#" class="close icon-button">
-                    <svg class="icon">
-                        <use xlink:href="#close-icon" />
-                    </svg>
-                </a>
-            </header>
             <svg class="icon logo">
                 <use xlink:href="#wifi-tethering" />
             </svg>
@@ -318,6 +339,10 @@
             <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
             <path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5L239 162zM406.6 416.4L220.9 270c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3zm-290-228.5L60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9z"/>
         </symbol>
+        <symbol id="edit-pen-icon" viewBox="0 0 512 512">
+            <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/>
+        </symbol>
     </svg>
     <!-- Scripts -->
     <script src="scripts/util.js"></script>

public/scripts/network.js

@@ -21,10 +21,10 @@ class ServerConnection {
         Events.on('online', _ => this._connect());
     }
 
-    async _connect() {
+    _connect() {
         clearTimeout(this._reconnectTimer);
         if (this._isConnected() || this._isConnecting()) return;
-        const ws = new WebSocket(await this._endpoint());
+        const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
         ws.onopen = _ => this._onOpen();
         ws.onmessage = e => this._onMessage(e.data);
@@ -36,6 +36,7 @@ class ServerConnection {
     _onOpen() {
         console.log('WS: server connected');
         Events.fire('ws-connected');
+        if (this._isReconnect) Events.fire('notify-user', 'Connected.');
     }
 
     _sendRoomSecrets(roomSecrets) {
@@ -52,16 +53,23 @@ class ServerConnection {
 
     _onPairDeviceJoin(roomKey) {
         if (!this._isConnected()) {
-            setTimeout(_ => this._onPairDeviceJoin(roomKey), 5000);
+            setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000);
             return;
         }
         this.send({ type: 'pair-device-join', roomKey: roomKey })
     }
 
+    _setRtcConfig(config) {
+        window.rtcConfig = config;
+    }
+
     _onMessage(msg) {
         msg = JSON.parse(msg);
         if (msg.type !== 'ping') console.log('WS:', msg);
         switch (msg.type) {
+            case 'rtc-config':
+                this._setRtcConfig(msg.config);
+                break;
             case 'peers':
                 Events.fire('peers', msg);
                 break;
@@ -110,34 +118,24 @@ class ServerConnection {
 
     _onDisplayName(msg) {
         sessionStorage.setItem("peerId", msg.message.peerId);
-        PersistentStorage.get('peerId').then(peerId => {
-            if (!peerId) {
-                // save peerId to indexedDB to retrieve after PWA is installed
-                PersistentStorage.set('peerId', msg.message.peerId).then(peerId => {
-                    console.log(`peerId saved to indexedDB: ${peerId}`);
-                });
-            }
-        }).catch(_ => _ => PersistentStorage.logBrowserNotCapable())
+        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
         Events.fire('display-name', msg);
     }
 
-    async _endpoint() {
+    _endpoint() {
         // hack to detect if deployment or development environment
         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 = await this._peerId();
-        if (peerId) ws_url.searchParams.append('peer_id', peerId)
+        const peerId = sessionStorage.getItem("peerId");
+        const peerIdHash = sessionStorage.getItem("peerIdHash");
+        if (peerId && peerIdHash) {
+            ws_url.searchParams.append('peer_id', peerId);
+            ws_url.searchParams.append('peer_id_hash', peerIdHash);
+        }
         return ws_url.toString();
     }
 
-    async _peerId() {
-        // make peerId persistent when pwa is installed
-        return window.matchMedia('(display-mode: minimal-ui)').matches
-            ? await PersistentStorage.get('peerId')
-            : sessionStorage.getItem("peerId");
-    }
-
     _disconnect() {
         this.send({ type: 'disconnect' });
         if (this._socket) {
@@ -145,15 +143,17 @@ class ServerConnection {
             this._socket.close();
             this._socket = null;
             Events.fire('ws-disconnected');
+            this._isReconnect = true;
         }
     }
 
     _onDisconnect() {
         console.log('WS: server disconnected');
-        Events.fire('notify-user', 'No server connection. Retry in 5s...');
+        Events.fire('notify-user', 'Connecting..');
         clearTimeout(this._reconnectTimer);
-        this._reconnectTimer = setTimeout(_ => this._connect(), 5000);
+        this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
         Events.fire('ws-disconnected');
+        this._isReconnect = true;
     }
 
     _onVisibilityChange() {
@@ -194,6 +194,10 @@ class Peer {
         this._send(JSON.stringify(message));
     }
 
+    sendDisplayName(displayName) {
+        this.sendJSON({type: 'display-name-changed', displayName: displayName});
+    }
+
     async createHeader(file) {
         return {
             name: file.name,
@@ -319,26 +323,25 @@ class Peer {
             this._onChunkReceived(message);
             return;
         }
-        message = JSON.parse(message);
-        console.log('RTC:', message);
-        switch (message.type) {
+        const messageJSON = JSON.parse(message);
+        switch (messageJSON.type) {
             case 'request':
-                this._onFilesTransferRequest(message);
+                this._onFilesTransferRequest(messageJSON);
                 break;
             case 'header':
-                this._onFilesHeader(message);
+                this._onFilesHeader(messageJSON);
                 break;
             case 'partition':
-                this._onReceivedPartitionEnd(message);
+                this._onReceivedPartitionEnd(messageJSON);
                 break;
             case 'partition-received':
                 this._sendNextPartition();
                 break;
             case 'progress':
-                this._onDownloadProgress(message.progress);
+                this._onDownloadProgress(messageJSON.progress);
                 break;
             case 'files-transfer-response':
-                this._onFileTransferRequestResponded(message);
+                this._onFileTransferRequestResponded(messageJSON);
                 break;
             case 'file-transfer-complete':
                 this._onFileTransferCompleted();
@@ -347,7 +350,10 @@ class Peer {
                 this._onMessageTransferCompleted();
                 break;
             case 'text':
-                this._onTextReceived(message);
+                this._onTextReceived(messageJSON);
+                break;
+            case 'display-name-changed':
+                this._onDisplayNameChanged(messageJSON);
                 break;
         }
     }
@@ -441,7 +447,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, request: this._requestAccepted});
+            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
             this._filesReceived = [];
             this._requestAccepted = null;
         }
@@ -486,12 +492,19 @@ class Peer {
         Events.fire('text-received', { text: escaped, peerId: this._peerId });
         this.sendJSON({ type: 'message-transfer-complete' });
     }
+
+    _onDisplayNameChanged(message) {
+        if (!message.displayName || this._displayName === message.displayName) return;
+        this._displayName = message.displayName;
+        Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
+    }
 }
 
 class RTCPeer extends Peer {
 
     constructor(serverConnection, peerId, roomType, roomSecret) {
         super(serverConnection, peerId, roomType, roomSecret);
+        this.rtcSupported = true;
         if (!peerId) return; // we will listen for a caller
         this._connect(peerId, true);
     }
@@ -509,7 +522,7 @@ class RTCPeer extends Peer {
     _openConnection(peerId, isCaller) {
         this._isCaller = isCaller;
         this._peerId = peerId;
-        this._conn = new RTCPeerConnection(RTCPeer.config);
+        this._conn = new RTCPeerConnection(window.rtcConfig);
         this._conn.onicecandidate = e => this._onIceCandidate(e);
         this._conn.onconnectionstatechange = _ => this._onConnectionStateChange();
         this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e);
@@ -558,14 +571,21 @@ class RTCPeer extends Peer {
 
     _onChannelOpened(event) {
         console.log('RTC: channel opened with', this._peerId);
-        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()});
         const channel = event.channel || event.target;
         channel.binaryType = 'arraybuffer';
         channel.onmessage = e => this._onMessage(e.data);
         channel.onclose = _ => this._onChannelClosed();
-        Events.on('beforeunload', e => this._onBeforeUnload(e));
-        Events.on('pagehide', _ => this._closeChannel());
         this._channel = channel;
+        Events.on('beforeunload', e => this._onBeforeUnload(e));
+        Events.on('pagehide', _ => this._onPageHide());
+        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()});
+    }
+
+    _onMessage(message) {
+        if (typeof message === 'string') {
+            console.log('RTC:', JSON.parse(message));
+        }
+        super._onMessage(message);
     }
 
     getConnectionHash() {
@@ -601,10 +621,16 @@ class RTCPeer extends Peer {
         }
     }
 
-    _closeChannel() {
-        if (this._channel) this._channel.onclose = null;
-        if (this._conn) this._conn.close();
-        this._conn = null;
+    _onPageHide() {
+        this._disconnect();
+    }
+
+    _disconnect() {
+        if (this._conn && this._channel) {
+            this._channel.onclose = null;
+            this._channel.close();
+        }
+        Events.fire('peer-disconnected', this._peerId);
     }
 
     _onChannelClosed() {
@@ -618,9 +644,11 @@ class RTCPeer extends Peer {
         console.log('RTC: state changed:', this._conn.connectionState);
         switch (this._conn.connectionState) {
             case 'disconnected':
+                Events.fire('peer-disconnected', this._peerId);
                 this._onError('rtc connection disconnected');
                 break;
             case 'failed':
+                Events.fire('peer-disconnected', this._peerId);
                 this._onError('rtc connection failed');
                 break;
         }
@@ -679,8 +707,12 @@ class PeersManager {
         Events.on('respond-to-files-transfer-request', e => this._onRespondToFileTransferRequest(e.detail))
         Events.on('send-text', e => this._onSendText(e.detail));
         Events.on('peer-left', e => this._onPeerLeft(e.detail));
+        Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
+        Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName));
+        Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
+        Events.on('peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail.peerId));
     }
 
     _onMessage(message) {
@@ -704,10 +736,6 @@ class PeersManager {
         })
     }
 
-    sendTo(peerId, message) {
-        this.peers[peerId].send(message);
-    }
-
     _onRespondToFileTransferRequest(detail) {
         this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
     }
@@ -739,6 +767,10 @@ class PeersManager {
         }
     }
 
+    _onPeerConnected(peerId) {
+        this._notifyPeerDisplayNameChanged(peerId);
+    }
+
     _onPeerDisconnected(peerId) {
         const peer = this.peers[peerId];
         delete this.peers[peerId];
@@ -756,6 +788,23 @@ class PeersManager {
             }
         }
     }
+
+    _notifyPeersDisplayNameChanged(newDisplayName) {
+        this._displayName = newDisplayName ? newDisplayName : this._originalDisplayName;
+        for (const peerId in this.peers) {
+            this._notifyPeerDisplayNameChanged(peerId);
+        }
+    }
+
+    _notifyPeerDisplayNameChanged(peerId) {
+        const peer = this.peers[peerId];
+        if (!peer) return;
+        this.peers[peerId].sendDisplayName(this._displayName);
+    }
+
+    _onDisplayName(displayName) {
+        this._originalDisplayName = displayName;
+    }
 }
 
 class FileChunker {
@@ -844,28 +893,11 @@ class Events {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 
-    static on(type, callback) {
-        return window.addEventListener(type, callback, false);
+    static on(type, callback, options = false) {
+        return window.addEventListener(type, callback, options);
     }
 
-    static off(type, callback) {
-        return window.removeEventListener(type, callback, false);
+    static off(type, callback, options = false) {
+        return window.removeEventListener(type, callback, options);
     }
 }
-
-RTCPeer.config = {
-    'sdpSemantics': 'unified-plan',
-    'iceServers': [
-        {
-            urls: 'stun:stun.l.google.com:19302'
-        },
-        {
-            urls: 'stun:openrelay.metered.ca:80'
-        },
-        {
-            urls: 'turn:openrelay.metered.ca:443',
-            username: 'openrelayproject',
-            credential: 'openrelayproject',
-        },
-    ]
-}

public/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.1.2';
+const cacheVersion = 'v1.4.2';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

public/styles.css

@@ -10,28 +10,25 @@
 
 /* Layout */
 
-html {
-    min-height: 100%;
-    height: -webkit-fill-available;
-}
-
 html,
 body {
     margin: 0;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 100vw;
     overflow-x: hidden;
-    overscroll-behavior-y: none;
+    overscroll-behavior: none;
+    overflow-y: hidden;
 }
 
 body {
-    min-height: 100%;
+    min-height: 100vh;
+    /* mobile viewport bug fix */
     min-height: -webkit-fill-available;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: center;
-    overflow-y: hidden;
+}
+
+html {
+    height: -webkit-fill-available;
 }
 
 .row-reverse {
@@ -73,10 +70,7 @@ body {
 }
 
 header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    position: relative;
     height: 56px;
     align-items: center;
     padding: 16px;
@@ -119,9 +113,9 @@ h3 {
 }
 
 .font-subheading {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
-    line-height: 24px;
+    line-height: 18px;
     word-break: normal;
 }
 
@@ -199,20 +193,151 @@ body>header a {
     margin-left: 8px;
 }
 
+#center {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+    flex-grow: 1;
+    --footer-height: 132px;
+    max-height: calc(100vh - 56px - var(--footer-height));
+    justify-content: space-around;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    overscroll-behavior-x: none;
+}
+
+@media screen and (max-width: 425px) {
+    header:has(#clear-pair-devices:not([hidden]))~#center {
+        --footer-height: 150px;
+    }
+}
+
 /* Peers List */
 
+#x-peers-filler {
+    display: flex;
+    flex-grow: 1;
+}
+
 x-peers {
-    width: 100%;
-    overflow: hidden;
+    position: relative;
+    display: flex;
     flex-flow: row wrap;
+    flex-grow: 1;
+    align-items: start !important;
+    justify-content: center;
+
     z-index: 2;
-    transition: color 300ms;
+    transition: --bg-color 0.5s ease;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    overscroll-behavior-x: none;
+    scrollbar-width: none;
+
+    --peers-per-row: 6; /* default if browser does not support :has selector */
+    --x-peers-width: min(100vw, calc(var(--peers-per-row) * (var(--peer-width) + 25px) - 16px));
+    width: var(--x-peers-width);
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
+x-peers.overflowing {
+    background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
+    linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
+        /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .2), rgba(var(--text-color), 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .2), rgba(var(--text-color), 0)) 0 100%;
+
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+}
+
+x-peers:has(> x-peer) {
+    --peers-per-row: 10;
+}
+
+@media screen and (min-height: 505px) and (max-height: 649px) and (max-width: 426px),
+screen and (min-height: 486px) and (max-height: 631px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(7)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 10;
+    }
+}
+
+@media screen and (min-height: 649px) and (max-width: 425px),
+screen and (min-height: 631px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(28)) {
+        --peers-per-row: 10;
+    }
+}
+
+::-webkit-scrollbar {
+    display: none;
 }
 
 /* Empty Peers List */
 
 x-no-peers {
-    height: 114px;
+    display: flex;
+    flex-direction: column;
     padding: 8px;
     text-align: center;
     /* prevent flickering on load */
@@ -254,25 +379,19 @@ x-no-peers[drop-bg] * {
 x-peer {
     -webkit-user-select: none;
     user-select: none;
+    padding: 8px;
+    align-content: start;
+    flex-wrap: wrap;
 }
 
 x-peer label {
     width: var(--peer-width);
-    padding: 8px;
     cursor: pointer;
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative;
 }
 
-x-peer .name {
-    width: var(--peer-width);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-}
-
 input[type="file"] {
     visibility: hidden;
     position: absolute;
@@ -280,21 +399,45 @@ input[type="file"] {
 
 x-peer x-icon {
     --icon-size: 40px;
+    margin-bottom: 4px;
+    transition: transform 150ms;
+    will-change: transform;
+    display: flex;
+    flex-direction: column;
+}
+
+x-peer .icon-wrapper {
     width: var(--icon-size);
     padding: 12px;
     border-radius: 50%;
     background: var(--primary-color);
     color: white;
     display: flex;
-    margin-bottom: 8px;
-    transition: transform 150ms;
-    will-change: transform;
 }
 
-x-peer:not(.type-ip) x-icon {
+x-peer:not(.type-ip).type-secret .icon-wrapper {
     background: var(--paired-device-color);
 }
 
+x-peer x-icon > .highlight-wrapper {
+    align-self: center;
+    align-items: center;
+    margin: 7px auto 0;
+    height: 6px;
+}
+
+x-peer x-icon > .highlight-wrapper > .highlight {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    display: none;
+}
+
+x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
+    background-color: var(--paired-device-color);
+    display: inline;
+}
+
 x-peer:not([status]):hover x-icon,
 x-peer:not([status]):focus x-icon {
     transform: scale(1.05);
@@ -306,6 +449,19 @@ x-peer[status] x-icon {
     transform: scale(1);
 }
 
+.device-descriptor {
+    width: 100%;
+    text-align: center;
+}
+
+.name {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
 .status,
 .device-name,
 .connection-hash {
@@ -371,20 +527,21 @@ x-peer[drop] x-icon {
 /* Footer */
 
 footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    position: relative;
+    margin-top: auto;
+    z-index: 2;
     align-items: center;
     padding: 0 0 16px 0;
     text-align: center;
     transition: color 300ms;
+    cursor: default;
 }
 
 footer .logo {
     --icon-size: 80px;
     margin-bottom: 8px;
     color: var(--primary-color);
+    margin-top: -10px;
 }
 
 footer .font-body2 {
@@ -402,6 +559,39 @@ footer .font-body2 {
     padding-bottom: 1px;
 }
 
+#display-name {
+    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;
+}
+
+#edit-pen {
+    width: 1rem;
+    height: 1rem;
+    margin-left: -1rem;
+    margin-bottom: -2px;
+    position: relative;
+    z-index: -1;
+}
+
 /* Dialog */
 
 x-dialog x-background {
@@ -409,7 +599,7 @@ x-dialog x-background {
     z-index: 10;
     transition: opacity 300ms;
     will-change: opacity;
-    padding: 35px;
+    padding: 15px;
     overflow: overlay;
 }
 
@@ -420,16 +610,20 @@ x-dialog x-paper {
     padding: 16px 24px;
     width: 100%;
     max-width: 400px;
+    overflow: hidden;
     box-sizing: border-box;
     transition: transform 300ms;
     will-change: transform;
 }
 
-#pairDeviceDialog x-paper {
+#pair-device-dialog x-paper {
+    display: flex;
+    flex-direction: column;
     position: absolute;
     top: max(50%, 350px);
-    height: 650px;
-    margin-top: -325px;
+    margin-top: -328.5px;
+    width: calc(100vw - 20px);
+    height: 625px;
 }
 
 x-dialog:not([show]) {
@@ -444,12 +638,6 @@ x-dialog:not([show]) x-background {
     opacity: 0;
 }
 
-x-dialog .row-reverse>.button {
-    margin-top: 0;
-    margin-bottom: -16px;
-    width: 50%;
-    height: 50px;
-}
 
 x-dialog a {
     color: var(--primary-color);
@@ -461,13 +649,13 @@ x-dialog .font-subheading {
 
 /* PairDevicesDialog */
 
-#keyInputContainer {
+#key-input-container {
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
-#keyInputContainer>input {
+#key-input-container>input {
     width: 45px;
     height: 45px;
     font-size: 30px;
@@ -483,15 +671,15 @@ x-dialog .font-subheading {
     justify-content: center;
 }
 
-#keyInputContainer>input + * {
+#key-input-container>input + * {
     margin-left: 6px;
 }
 
-#keyInputContainer>input:nth-of-type(4) {
-    margin-left: 18px;
+#key-input-container>input:nth-of-type(4) {
+    margin-left: 5%;
 }
 
-#roomKey {
+#room-key {
     font-size: 50px;
     letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
     display: inline-block;
@@ -499,19 +687,15 @@ x-dialog .font-subheading {
     margin: 15px -15px;
 }
 
-#roomKeyQrCode {
-    padding: inherit;
-    margin: auto;
-    width: 150px;
-    height: 150px;
+#room-key-qr-code {
+    margin: 16px;
 }
 
-#pairDeviceDialog hr {
-    margin-top: 40px;
-    margin-bottom: 40px;
+#pair-device-dialog hr {
+    margin: 40px -24px;
 }
 
-#pairDeviceDialog x-background {
+#pair-device-dialog x-background {
     padding: 16px!important;
 }
 
@@ -522,29 +706,24 @@ x-dialog .row {
     margin-bottom: 8px;
 }
 
-x-dialog h2 {
-    margin-top: 1rem;
-}
-
-#receiveRequestDialog h2,
-#receiveFileDialog h2 {
-    margin-bottom: 0.5rem;
-}
-
-x-dialog .row-reverse {
-    margin: 40px -24px auto;
+/* button row*/
+x-paper > div:last-child {
+    margin: auto -24px -15px;
     border-top: solid 2.5px var(--border-color);
+    height: 50px;
 }
 
-.separator {
-    border: solid 1.25px var(--border-color);
-    margin-bottom: -16px;
+x-paper > div:last-child > .button {
+    height: 100%;
+    width: 50%;
+}
+
+x-paper > div:last-child > .button:not(:last-child) {
+    border-left: solid 2.5px var(--border-color);
 }
 
 .file-description {
-    word-break: break-word;
-    width: 80%;
-    margin: auto;
+    margin-bottom: 25px;
 }
 
 .file-description .row {
@@ -556,52 +735,52 @@ x-dialog .row-reverse {
     word-break: normal;
 }
 
-#fileName {
+.file-name {
     font-style: italic;
+    max-width: 100%;
 }
 
-#fileStem {
-    max-width: 80%;
+.file-stem {
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
-    max-height: 20px;
-}
-
-.file-size{
-    margin-bottom: 30px;
+    white-space: nowrap;
 }
 
 /* Send Text Dialog */
 
-#textInput {
-    min-height: 120px;
+x-dialog .dialog-subheader {
+    margin-bottom: 25px;
+}
+
+#text-input {
+    min-height: 200px;
+    margin: 14px auto;
 }
 
 /* Receive Text Dialog */
 
-#receiveTextDialog #text {
+#receive-text-dialog #text {
     width: 100%;
     word-break: break-all;
-    max-height: 300px;
+    max-height: calc(100vh - 393px);
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-user-select: all;
     -moz-user-select: all;
     user-select: all;
     white-space: pre-wrap;
-    margin-top:36px;
+    padding: 15px 0;
 }
 
-#receiveTextDialog #text a {
+#receive-text-dialog #text a {
     cursor: pointer;
 }
 
-#receiveTextDialog #text a:hover {
+#receive-text-dialog #text a:hover {
     text-decoration: underline;
 }
 
-#receiveTextDialog h3 {
+#receive-text-dialog h3 {
     /* Select the received text when double-clicking the dialog */
     user-select: none;
     pointer-events: none;
@@ -609,29 +788,44 @@ x-dialog .row-reverse {
 
 .row-separator {
     border-bottom: solid 2.5px var(--border-color);
-    margin: auto -25px;
+    margin: auto -24px;
 }
 
-#receiveTextDescriptionContainer {
-    margin-bottom: 25px;
-}
-
-#base64PasteBtn {
+#base64-paste-btn,
+#base64-paste-dialog .textarea {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
+    text-align: center;
 }
 
-#base64PasteDialog button {
+#base64-paste-dialog .textarea {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#base64-paste-dialog .textarea::before {
+    font-size: 15px;
+    letter-spacing: 0.12em;
+    color: var(--primary-color);
+    font-weight: 700;
+    text-transform: uppercase;
+    content: attr(placeholder);
+}
+
+#base64-paste-dialog button {
     margin: auto;
     border-radius: 8px;
 }
 
-#base64PasteDialog button[close] {
+#base64-paste-dialog button[close] {
     margin-top: 20px;
 }
 
-#base64PasteDialog button[close]:before {
+#base64-paste-dialog button[close]:before {
     border-radius: 8px;
 }
 
@@ -641,7 +835,6 @@ x-dialog .row-reverse {
     padding: 2px 16px 0;
     box-sizing: border-box;
     min-height: 36px;
-    min-width: 100px;
     font-size: 14px;
     line-height: 24px;
     font-weight: 700;
@@ -652,6 +845,7 @@ x-dialog .row-reverse {
     user-select: none;
     background: inherit;
     color: var(--primary-color);
+    overflow: hidden;
 }
 
 .button[disabled] {
@@ -689,16 +883,18 @@ x-dialog .row-reverse {
     opacity: 0.1;
 }
 
-#cancelPasteModeBtn {
+#cancel-paste-mode {
     z-index: 2;
-    margin-top: 0;
+    margin: 0;
+    padding: 0;
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     height: 56px;
-    border-bottom: solid 2.5px var(--border-color);
+    background-color: var(--primary-color);
+    color: rgb(238, 238, 238);
 }
 
 .button:focus:before,
@@ -714,7 +910,6 @@ button::-moz-focus-inner {
 
 
 /* Icon Button */
-
 .icon-button {
     width: 40px;
     height: 40px;
@@ -724,10 +919,7 @@ button::-moz-focus-inner {
     border-radius: 50%;
 }
 
-
-
 /* Text Input */
-
 .textarea {
     box-sizing: border-box;
     border: none;
@@ -741,9 +933,8 @@ button::-moz-focus-inner {
     display: block;
     overflow: auto;
     resize: none;
-    min-height: 40px;
     line-height: 16px;
-    max-height: 300px;
+    max-height: calc(100vh - 254px);
     white-space: pre;
 }
 
@@ -802,6 +993,13 @@ button::-moz-focus-inner {
     margin: 8px 8px -16px;
 }
 
+#about section {
+    flex-grow: 1;
+}
+
+#about header {
+    align-self: end;
+}
 
 /* Loading Indicator */
 
@@ -809,7 +1007,7 @@ button::-moz-focus-inner {
     width: 80px;
     height: 80px;
     position: absolute;
-    top: 0;
+    top: -8px;
     clip: rect(0px, 80px, 80px, 40px);
     --progress: rotate(0deg);
     transition: transform 200ms;
@@ -851,11 +1049,11 @@ button::-moz-focus-inner {
 x-toast {
     position: absolute;
     min-height: 48px;
-    bottom: 24px;
+    top: 50px;
     width: 100%;
     max-width: 344px;
-    background-color: #323232;
-    color: rgba(255, 255, 255, 0.95);
+    background-color: rgb(var(--text-color));
+    color: rgb(var(--bg-color));
     align-items: center;
     box-sizing: border-box;
     padding: 8px 24px;
@@ -869,20 +1067,23 @@ x-toast {
 
 x-toast:not([show]):not(:hover) {
     opacity: 0;
-    transform: translateY(100px);
+    transform: translateY(-100px);
 }
 
 
 /* Instructions */
 
 x-instructions {
-    position: absolute;
-    top: 120px;
+    position: relative;
     opacity: 0.5;
     transition: opacity 300ms;
-    z-index: -1;
     text-align: center;
-    width: 80%;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
 }
 
 x-instructions:not([drop-peer]):not([drop-bg]):before {
@@ -899,88 +1100,92 @@ x-instructions[drop-bg]:not([drop-peer]):before {
 
 x-instructions p {
     display: none;
-    margin: 0 auto auto;
-    max-width: 80%;
 }
 
 x-peers:empty~x-instructions {
     opacity: 0;
 }
 
+@media (hover: none) and (pointer: coarse) {
+    x-peer {
+        transform: scale(0.95);
+        padding: 4px 0;
+    }
+}
+
+#websocket-fallback {
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 5px;
+    text-align: center;
+    opacity: 0.5;
+    transition: opacity 300ms;
+}
+
+#websocket-fallback>span {
+    margin: 2px;
+}
+
+#websocket-fallback > span > span {
+    border-bottom: solid 4px var(--ws-peer-color);
+}
 
 /* Responsive Styles */
+@media screen and (max-width: 360px) {
+    x-dialog x-paper {
+        padding: 15px;
+    }
+    x-paper > div:last-child {
+        margin: auto -15px -15px;
+    }
+}
 
-@media (min-height: 800px) {
+@media screen and (min-height: 800px) {
     footer {
         margin-bottom: 16px;
     }
 }
 
-@media screen and (min-height: 800px),
-screen and (min-width: 1100px) {
+@media (hover: hover) and (pointer: fine) {
     x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(desktop);
     }
 }
 
-@media (max-height: 420px) {
-    x-instructions {
-        top: 24px;
-    }
-
-    footer .logo {
-        --icon-size: 40px;
-    }
-}
-
-/*
-    iOS specific styles
-*/
-@supports (-webkit-overflow-scrolling: touch) {
-
-
-    html {
-        position: fixed;
-    }
-
-    x-instructions:not([drop-peer]):not([drop-bg]):before {
-        content: attr(mobile);
-    }
-}
-
 /*
     Color Themes
 */
 
 /* Default colors */
 body {
-    --text-color: #333;
-    --bg-color: #fff;
+    --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;
 }
 
 /* Dark theme colors */
 body.dark-theme {
-    --text-color: #eee;
-    --bg-color: #121212;
+    --text-color: 238,238,238;
+    --bg-color: 18,18,18; /*rgb code*/
     --bg-color-secondary: #333;
     --border-color: #252525;
 }
 
 /* Colored Elements */
 body {
-    color: var(--text-color);
-    background-color: var(--bg-color);
+    color: rgb(var(--text-color));
+    background-color: rgb(var(--bg-color));
     transition: background-color 0.5s ease;
 }
 
 x-dialog x-paper {
-    background-color: var(--bg-color);
+    background-color: rgb(var(--bg-color));
 }
 
 .textarea {
-    color: var(--text-color) !important;
+    color: rgb(var(--text-color)) !important;
     background-color: var(--bg-color-secondary) !important;
 }
 
@@ -1006,7 +1211,9 @@ x-dialog x-paper {
     display: none;
 }
 
-.element-preview {
+.file-preview > img,
+.file-preview > audio,
+.file-preview > video {
     max-width: 100%;
     max-height: 40vh;
     margin: auto;
@@ -1018,16 +1225,16 @@ x-dialog x-paper {
 
     /* defaults to dark theme */
     body {
-        --text-color: #eee;
-        --bg-color: #121212;
+        --text-color: 238,238,238;
+        --bg-color: 18,18,18; /*rgb code*/
         --bg-color-secondary: #333;
         --border-color: #252525;
     }
 
     /* Override dark mode with light mode styles if the user decides to swap */
     body.light-theme {
-        --text-color: #333;
-        --bg-color: #fafafa;
+        --text-color: 51,51,51;
+        --bg-color: 250,250,250; /*rgb code*/
         --bg-color-secondary: #f1f3f4;
         --border-color: #e7e8e8;
    }
@@ -1045,6 +1252,15 @@ x-dialog x-paper {
     }
 }
 
+/*
+    iOS specific styles
+*/
+@supports (-webkit-overflow-scrolling: touch) {
+    html {
+        min-height: -webkit-fill-available;
+    }
+}
+
 /* webkit scrollbar style*/
 
 ::-webkit-scrollbar{

public_included_ws_fallback/index.html

@@ -59,7 +59,7 @@
                 <use xlink:href="#homescreen" />
             </svg>
         </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" >
+        <a id="pair-device" class="icon-button" title="Pair Device" hidden>
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
@@ -69,176 +69,197 @@
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
         </a>
+        <a id="cancel-paste-mode" class="button" hidden>Done</a>
     </header>
-    <a id="cancelPasteModeBtn" class="button" close hidden>Done</a>
-    <!-- Peers -->
-    <x-peers class="center"></x-peers>
-    <x-no-peers>
-        <h2>Open PairDrop on other devices to send files</h2>
-        <div>Pair devices to be discoverable on other networks</div>
-        <br>
-        <div>A <span class="websocket-fallback">websocket fallback</span> is implemented on this instance. Use only if you trust the server!</div>
-    </x-no-peers>
-    <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
-        <div>A <span class="websocket-fallback">websocket fallback</span> is implemented on this instance. Use only if you trust the server!</div>
-        <p id="pasteFilename"></p>
-    </x-instructions>
+    <!-- Center -->
+    <div id="center">
+        <!-- Peers -->
+        <div class="x-peers-filler"></div>
+        <x-peers class="center"></x-peers>
+        <x-no-peers>
+            <h2>Open PairDrop on other devices to send files</h2>
+            <div>Pair devices to be discoverable on other networks</div>
+        </x-no-peers>
+        <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
+            <p id="paste-filename"></p>
+        </x-instructions>
+    </div>
     <!-- Footer -->
     <footer class="column">
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="displayName" placeholder="&nbsp;"></div>
+        <div>
+            <span>You are known as:</span>
+            <div id="display-name" placeholder="Loading..." title="Edit your device name permanently" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
+            <svg id="edit-pen" class="icon">
+                <use xlink:href="#edit-pen-icon" />
+            </svg>
+        </div>
         <div class="font-body2">
             You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
             <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
         </div>
+        <div id="websocket-fallback">
+            <span>Traffic is <span>routed through the server</span> if WebRTC is not available.</span>
+        </div>
     </footer>
     <!-- Pair Device Dialog -->
-    <x-dialog id="pairDeviceDialog">
+    <x-dialog id="pair-device-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Pair Devices</h2>
-                    <div class="center" id="roomKeyQrCode"></div>
-                    <h1 class="center" id="roomKey">000 000</h1>
-                    <div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
+                    <div id="room-key-qr-code" class="center"></div>
+                    <h1 id="room-key" class="center">000 000</h1>
+                    <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
                     <hr>
-                    <div id="keyInputContainer">
-                        <input type="tel" id="char0" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" id="char1" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char2" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char3" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char4" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char5" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                    <div id="key-input-container">
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
                     </div>
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit" disabled>Pair</button>
-                        <div class="separator"></div>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Clear Devices Dialog -->
-    <x-dialog id="clearDevicesDialog">
+    <x-dialog id="clear-devices-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Unpair Devices</h2>
                     <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit">Unpair Devices</button>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Request Dialog -->
-    <x-dialog id="receiveRequestDialog">
+    <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center">PairDrop</h2>
-                <div class="text-center file-description">
+                <h2 class="center"></h2>
+                <div class="center column file-description">
                     <div>
-                        <span id="requestingPeerDisplayName"></span>
+                        <span class="display-name"></span>
                         <span>would like to share</span>
                     </div>
-                    <div class="row" id="fileName">
-                        <span id="fileStem"></span>
-                        <span id="fileExtension"></span>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
                     </div>
-                    <div class="row">
-                        <span id="fileOther"></span>
+                    <div class="row file-other">
                     </div>
+                    <div class="row font-body2 file-size"></div>
                 </div>
-                <div class="font-body2 text-center file-size"></div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button>
-                    <div class="separator"></div>
-                    <button class="button" id="declineRequest" title="ESCAPE">Decline</button>
+                <div class="center row-reverse">
+                    <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
+                    <button id="decline-request" class="button" title="ESCAPE">Decline</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Receive File Dialog -->
-    <x-dialog id="receiveFileDialog">
+    <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center" id="receiveTitle"></h2>
-                <div class="text-center file-description"></div>
-                <div class="font-body2 text-center file-size"></div>
+                <h2 class="center"></h2>
+                <div class="center column file-description">
+                    <div>
+                        <span class="display-name"></span>
+                        <span>has sent</span>
+                    </div>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
+                    </div>
+                    <div class="row file-other"></div>
+                    <div class="row font-body2 file-size"></div>
+                </div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <a class="button" id="shareOrDownload" autofocus></a>
-                    <div class="separator"></div>
+                <div class="center row-reverse">
+                    <button id="share-btn" class="button" autofocus hidden>Share</button>
+                    <button id="download-btn" class="button" autofocus>Download</button>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Send Text Dialog -->
-    <x-dialog id="sendTextDialog">
+    <x-dialog id="send-text-dialog">
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2>PairDrop - Send a Message</h2>
-                    <div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
-                    <div class="row-reverse">
+                    <h2 class="text-center">Send Message</h2>
+                    <div class="dialog-subheader text-center">
+                        <span>Send a Message to</span>
+                        <span class="display-name"></span>
+                    </div>
+                    <div class="row-separator"></div>
+                    <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                    <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <div class="separator"></div>
-                        <a class="button" title="ESCAPE" close>Cancel</a>
+                        <button class="button" title="ESCAPE" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Text Dialog -->
-    <x-dialog id="receiveTextDialog">
+    <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2>PairDrop - Message Received</h2>
-                <div id="receiveTextDescriptionContainer">
-                    <span id="receiveTextPeerDisplayName"></span>
-                    <span>sent the following message:</span>
+                <h2 class="text-center">Message Received</h2>
+                <div class="text-center dialog-subheader">
+                    <span class="display-name"></span>
+                    <span>has sent:</span>
                 </div>
                 <div class="row-separator"></div>
                 <div id="text"></div>
-                <div class="row-reverse">
-                    <button class="button" id="copy" title="CTRL/⌘ + C">Copy</button>
-                    <div class="separator"></div>
-                    <button class="button" id="close" title="ESCAPE">Close</button>
+                <div class="center row-reverse">
+                    <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
+                    <button id="close" class="button" title="ESCAPE">Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
-    <!-- base64PasteDialog Dialog -->
-    <x-dialog id="base64PasteDialog">
+    <!-- base64 Paste Dialog -->
+    <x-dialog id="base64-paste-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <button class="button center" id="base64PasteBtn" title="Paste">Tap here to paste files</button>
+                <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
+                <div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
                 <button class="button center" close>Close</button>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Toast -->
     <div class="toast-container full center">
-        <x-toast class="row" shadow="1" id="toast"></x-toast>
+        <x-toast id="toast" class="row" shadow="1"></x-toast>
     </div>
     <!-- About Page -->
     <x-about id="about" class="full center column">
+        <header class="row-reverse fade-in">
+            <a href="#" class="close icon-button">
+                <svg class="icon">
+                    <use xlink:href="#close-icon" />
+                </svg>
+            </a>
+        </header>
         <section class="center column fade-in">
-            <header class="row-reverse">
-                <a href="#" class="close icon-button">
-                    <svg class="icon">
-                        <use xlink:href="#close-icon" />
-                    </svg>
-                </a>
-            </header>
             <svg class="icon logo">
                 <use xlink:href="#wifi-tethering" />
             </svg>
@@ -321,6 +342,10 @@
             <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
             <path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5L239 162zM406.6 416.4L220.9 270c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3zm-290-228.5L60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9z"/>
         </symbol>
+        <symbol id="edit-pen-icon" viewBox="0 0 512 512">
+            <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/>
+        </symbol>
     </svg>
     <!-- Scripts -->
     <script src="scripts/util.js"></script>

public_included_ws_fallback/scripts/network.js

@@ -19,10 +19,10 @@ class ServerConnection {
         Events.on('online', _ => this._connect());
     }
 
-    async _connect() {
+    _connect() {
         clearTimeout(this._reconnectTimer);
         if (this._isConnected() || this._isConnecting()) return;
-        const ws = new WebSocket(await this._endpoint());
+        const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
         ws.onopen = _ => this._onOpen();
         ws.onmessage = e => this._onMessage(e.data);
@@ -34,6 +34,7 @@ class ServerConnection {
     _onOpen() {
         console.log('WS: server connected');
         Events.fire('ws-connected');
+        if (this._isReconnect) Events.fire('notify-user', 'Connected.');
     }
 
     _sendRoomSecrets(roomSecrets) {
@@ -50,16 +51,23 @@ class ServerConnection {
 
     _onPairDeviceJoin(roomKey) {
         if (!this._isConnected()) {
-            setTimeout(_ => this._onPairDeviceJoin(roomKey), 5000);
+            setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000);
             return;
         }
         this.send({ type: 'pair-device-join', roomKey: roomKey })
     }
 
+    _setRtcConfig(config) {
+        window.rtcConfig = config;
+    }
+
     _onMessage(msg) {
         msg = JSON.parse(msg);
         if (msg.type !== 'ping') console.log('WS:', msg);
         switch (msg.type) {
+            case 'rtc-config':
+                this._setRtcConfig(msg.config);
+                break;
             case 'peers':
                 Events.fire('peers', msg);
                 break;
@@ -105,6 +113,7 @@ class ServerConnection {
             case 'file-transfer-complete':
             case 'message-transfer-complete':
             case 'text':
+            case 'display-name-changed':
             case 'ws-chunk':
                 Events.fire('ws-relay', JSON.stringify(msg));
                 break;
@@ -120,34 +129,24 @@ class ServerConnection {
 
     _onDisplayName(msg) {
         sessionStorage.setItem("peerId", msg.message.peerId);
-        PersistentStorage.get('peerId').then(peerId => {
-            if (!peerId) {
-                // save peerId to indexedDB to retrieve after PWA is installed
-                PersistentStorage.set('peerId', msg.message.peerId).then(peerId => {
-                    console.log(`peerId saved to indexedDB: ${peerId}`);
-                });
-            }
-        }).catch(_ => _ => PersistentStorage.logBrowserNotCapable())
+        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
         Events.fire('display-name', msg);
     }
 
-    async _endpoint() {
+    _endpoint() {
         // hack to detect if deployment or development environment
         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 = await this._peerId();
-        if (peerId) ws_url.searchParams.append('peer_id', peerId)
+        const peerId = sessionStorage.getItem("peerId");
+        const peerIdHash = sessionStorage.getItem("peerIdHash");
+        if (peerId && peerIdHash) {
+            ws_url.searchParams.append('peer_id', peerId);
+            ws_url.searchParams.append('peer_id_hash', peerIdHash);
+        }
         return ws_url.toString();
     }
 
-    async _peerId() {
-        // make peerId persistent when pwa is installed
-        return window.matchMedia('(display-mode: minimal-ui)').matches
-            ? await PersistentStorage.get('peerId')
-            : sessionStorage.getItem("peerId");
-    }
-
     _disconnect() {
         this.send({ type: 'disconnect' });
         if (this._socket) {
@@ -155,15 +154,17 @@ class ServerConnection {
             this._socket.close();
             this._socket = null;
             Events.fire('ws-disconnected');
+            this._isReconnect = true;
         }
     }
 
     _onDisconnect() {
         console.log('WS: server disconnected');
-        Events.fire('notify-user', 'No server connection. Retry in 5s...');
+        Events.fire('notify-user', 'Connecting..');
         clearTimeout(this._reconnectTimer);
-        this._reconnectTimer = setTimeout(_ => this._connect(), 5000);
+        this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
         Events.fire('ws-disconnected');
+        this._isReconnect = true;
     }
 
     _onVisibilityChange() {
@@ -204,6 +205,10 @@ class Peer {
         this._send(JSON.stringify(message));
     }
 
+    sendDisplayName(displayName) {
+        this.sendJSON({type: 'display-name-changed', displayName: displayName});
+    }
+
     async createHeader(file) {
         return {
             name: file.name,
@@ -324,31 +329,30 @@ class Peer {
         this.sendJSON({ type: 'progress', progress: progress });
     }
 
-    _onMessage(message, logMessage = true) {
+    _onMessage(message) {
         if (typeof message !== 'string') {
             this._onChunkReceived(message);
             return;
         }
-        message = JSON.parse(message);
-        if (logMessage) console.log('RTC:', message);
-        switch (message.type) {
+        const messageJSON = JSON.parse(message);
+        switch (messageJSON.type) {
             case 'request':
-                this._onFilesTransferRequest(message);
+                this._onFilesTransferRequest(messageJSON);
                 break;
             case 'header':
-                this._onFilesHeader(message);
+                this._onFilesHeader(messageJSON);
                 break;
             case 'partition':
-                this._onReceivedPartitionEnd(message);
+                this._onReceivedPartitionEnd(messageJSON);
                 break;
             case 'partition-received':
                 this._sendNextPartition();
                 break;
             case 'progress':
-                this._onDownloadProgress(message.progress);
+                this._onDownloadProgress(messageJSON.progress);
                 break;
             case 'files-transfer-response':
-                this._onFileTransferRequestResponded(message);
+                this._onFileTransferRequestResponded(messageJSON);
                 break;
             case 'file-transfer-complete':
                 this._onFileTransferCompleted();
@@ -357,7 +361,10 @@ class Peer {
                 this._onMessageTransferCompleted();
                 break;
             case 'text':
-                this._onTextReceived(message);
+                this._onTextReceived(messageJSON);
+                break;
+            case 'display-name-changed':
+                this._onDisplayNameChanged(messageJSON);
                 break;
         }
     }
@@ -451,7 +458,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, request: this._requestAccepted});
+            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
             this._filesReceived = [];
             this._requestAccepted = null;
         }
@@ -496,12 +503,19 @@ class Peer {
         Events.fire('text-received', { text: escaped, peerId: this._peerId });
         this.sendJSON({ type: 'message-transfer-complete' });
     }
+
+    _onDisplayNameChanged(message) {
+        if (!message.displayName || this._displayName === message.displayName) return;
+        this._displayName = message.displayName;
+        Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
+    }
 }
 
 class RTCPeer extends Peer {
 
     constructor(serverConnection, peerId, roomType, roomSecret) {
         super(serverConnection, peerId, roomType, roomSecret);
+        this.rtcSupported = true;
         if (!peerId) return; // we will listen for a caller
         this._connect(peerId, true);
     }
@@ -519,7 +533,7 @@ class RTCPeer extends Peer {
     _openConnection(peerId, isCaller) {
         this._isCaller = isCaller;
         this._peerId = peerId;
-        this._conn = new RTCPeerConnection(RTCPeer.config);
+        this._conn = new RTCPeerConnection(window.rtcConfig);
         this._conn.onicecandidate = e => this._onIceCandidate(e);
         this._conn.onconnectionstatechange = _ => this._onConnectionStateChange();
         this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e);
@@ -568,14 +582,21 @@ class RTCPeer extends Peer {
 
     _onChannelOpened(event) {
         console.log('RTC: channel opened with', this._peerId);
-        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()});
         const channel = event.channel || event.target;
         channel.binaryType = 'arraybuffer';
         channel.onmessage = e => this._onMessage(e.data);
         channel.onclose = _ => this._onChannelClosed();
-        Events.on('beforeunload', e => this._onBeforeUnload(e));
-        Events.on('pagehide', _ => this._closeChannel());
         this._channel = channel;
+        Events.on('beforeunload', e => this._onBeforeUnload(e));
+        Events.on('pagehide', _ => this._onPageHide());
+        Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()});
+    }
+
+    _onMessage(message) {
+        if (typeof message === 'string') {
+            console.log('RTC:', JSON.parse(message));
+        }
+        super._onMessage(message);
     }
 
     getConnectionHash() {
@@ -611,10 +632,16 @@ class RTCPeer extends Peer {
         }
     }
 
-    _closeChannel() {
-        if (this._channel) this._channel.onclose = null;
-        if (this._conn) this._conn.close();
-        this._conn = null;
+    _onPageHide() {
+        this._disconnect();
+    }
+
+    _disconnect() {
+        if (this._conn && this._channel) {
+            this._channel.onclose = null;
+            this._channel.close();
+        }
+        Events.fire('peer-disconnected', this._peerId);
     }
 
     _onChannelClosed() {
@@ -628,9 +655,11 @@ class RTCPeer extends Peer {
         console.log('RTC: state changed:', this._conn.connectionState);
         switch (this._conn.connectionState) {
             case 'disconnected':
+                Events.fire('peer-disconnected', this._peerId);
                 this._onError('rtc connection disconnected');
                 break;
             case 'failed':
+                Events.fire('peer-disconnected', this._peerId);
                 this._onError('rtc connection failed');
                 break;
         }
@@ -682,7 +711,9 @@ class WSPeer extends Peer {
 
     constructor(serverConnection, peerId, roomType, roomSecret) {
         super(serverConnection, peerId, roomType, roomSecret);
+        this.rtcSupported = false;
         if (!peerId) return; // we will listen for a caller
+        this._isCaller = true;
         this._sendSignal();
     }
 
@@ -694,21 +725,22 @@ class WSPeer extends Peer {
     }
 
     sendJSON(message) {
+        console.debug(message)
         message.to = this._peerId;
         message.roomType = this._roomType;
         message.roomSecret = this._roomSecret;
         this._server.send(message);
     }
 
-    _sendSignal() {
-        this.sendJSON({type: 'signal'});
+    _sendSignal(connected = false) {
+        this.sendJSON({type: 'signal', connected: connected});
     }
 
     onServerMessage(message) {
-        Events.fire('peer-connected', {peerId: message.sender.id, connectionHash: this.getConnectionHash()})
-        if (this._peerId) return;
         this._peerId = message.sender.id;
-        this._sendSignal();
+        Events.fire('peer-connected', {peerId: message.sender.id, connectionHash: this.getConnectionHash()})
+        if (message.connected) return;
+        this._sendSignal(true);
     }
 
     getConnectionHash() {
@@ -728,8 +760,13 @@ class PeersManager {
         Events.on('respond-to-files-transfer-request', e => this._onRespondToFileTransferRequest(e.detail))
         Events.on('send-text', e => this._onSendText(e.detail));
         Events.on('peer-left', e => this._onPeerLeft(e.detail));
+        Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
+        Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName));
+        Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
+        Events.on('peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail.peerId));
+        Events.on('ws-disconnected', _ => this._onWsDisconnected());
         Events.on('ws-relay', e => this._onWsRelay(e.detail));
     }
 
@@ -749,7 +786,7 @@ class PeersManager {
     _onWsRelay(message) {
         const messageJSON = JSON.parse(message)
         if (messageJSON.type === 'ws-chunk') message = base64ToArrayBuffer(messageJSON.chunk);
-        this.peers[messageJSON.sender.id]._onMessage(message, false)
+        this.peers[messageJSON.sender.id]._onMessage(message)
     }
 
     _onPeers(msg) {
@@ -768,10 +805,6 @@ class PeersManager {
         })
     }
 
-    sendTo(peerId, message) {
-        this.peers[peerId].send(message);
-    }
-
     _onRespondToFileTransferRequest(detail) {
         this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
     }
@@ -797,15 +830,28 @@ class PeersManager {
     }
 
     _onPeerLeft(msg) {
-        if (this.peers[msg.peerId] && !this.peers[msg.peerId].rtcSupported) {
-            console.log('WSPeer left:', msg.peerId)
-            Events.fire('peer-disconnected', msg.peerId)
+        if (this.peers[msg.peerId] && (!this.peers[msg.peerId].rtcSupported || !window.isRtcSupported)) {
+            console.log('WSPeer left:', msg.peerId);
+            Events.fire('peer-disconnected', msg.peerId);
         } else if (msg.disconnect === true) {
             // if user actively disconnected from PairDrop server, disconnect all peer to peer connections immediately
             Events.fire('peer-disconnected', msg.peerId);
         }
     }
 
+    _onPeerConnected(peerId) {
+        this._notifyPeerDisplayNameChanged(peerId);
+    }
+
+    _onWsDisconnected() {
+        for (const peerId in this.peers) {
+            console.debug(this.peers[peerId].rtcSupported);
+            if (this.peers[peerId] && (!this.peers[peerId].rtcSupported || !window.isRtcSupported)) {
+                Events.fire('peer-disconnected', peerId);
+            }
+        }
+    }
+
     _onPeerDisconnected(peerId) {
         const peer = this.peers[peerId];
         delete this.peers[peerId];
@@ -823,6 +869,23 @@ class PeersManager {
             }
         }
     }
+
+    _notifyPeersDisplayNameChanged(newDisplayName) {
+        this._displayName = newDisplayName ? newDisplayName : this._originalDisplayName;
+        for (const peerId in this.peers) {
+            this._notifyPeerDisplayNameChanged(peerId);
+        }
+    }
+
+    _notifyPeerDisplayNameChanged(peerId) {
+        const peer = this.peers[peerId];
+        if (!peer) return;
+        this.peers[peerId].sendDisplayName(this._displayName);
+    }
+
+    _onDisplayName(displayName) {
+        this._originalDisplayName = displayName;
+    }
 }
 
 class FileChunker {
@@ -911,28 +974,11 @@ class Events {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 
-    static on(type, callback) {
-        return window.addEventListener(type, callback, false);
+    static on(type, callback, options = false) {
+        return window.addEventListener(type, callback, options);
     }
 
-    static off(type, callback) {
-        return window.removeEventListener(type, callback, false);
+    static off(type, callback, options = false) {
+        return window.removeEventListener(type, callback, options);
     }
 }
-
-RTCPeer.config = {
-    'sdpSemantics': 'unified-plan',
-    'iceServers': [
-        {
-            urls: 'stun:stun.l.google.com:19302'
-        },
-        {
-            urls: 'stun:openrelay.metered.ca:80'
-        },
-        {
-            urls: 'turn:openrelay.metered.ca:443',
-            username: 'openrelayproject',
-            credential: 'openrelayproject',
-        },
-    ]
-}

public_included_ws_fallback/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.1.2';
+const cacheVersion = 'v1.4.2';
 const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

public_included_ws_fallback/styles.css

@@ -11,28 +11,25 @@
 
 /* Layout */
 
-html {
-    min-height: 100%;
-    height: -webkit-fill-available;
-}
-
 html,
 body {
     margin: 0;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 100vw;
     overflow-x: hidden;
-    overscroll-behavior-y: none;
+    overscroll-behavior: none;
+    overflow-y: hidden;
 }
 
 body {
-    min-height: 100%;
+    min-height: 100vh;
+    /* mobile viewport bug fix */
     min-height: -webkit-fill-available;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: center;
-    overflow-y: hidden;
+}
+
+html {
+    height: -webkit-fill-available;
 }
 
 .row-reverse {
@@ -74,10 +71,7 @@ body {
 }
 
 header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    position: relative;
     height: 56px;
     align-items: center;
     padding: 16px;
@@ -120,9 +114,9 @@ h3 {
 }
 
 .font-subheading {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
-    line-height: 24px;
+    line-height: 18px;
     word-break: normal;
 }
 
@@ -200,20 +194,160 @@ body>header a {
     margin-left: 8px;
 }
 
+#center {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+    flex-grow: 1;
+    --footer-height: 146px;
+    max-height: calc(100vh - 56px - var(--footer-height));
+    justify-content: space-around;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    overscroll-behavior-x: none;
+}
+
+@media screen and (min-width: 402px) and (max-width: 425px) {
+    header:has(#clear-pair-devices:not([hidden]))~#center {
+        --footer-height: 164px;
+    }
+}
+
+@media screen and (max-width: 402px) {
+    #center {
+        --footer-height: 184px;
+    }
+}
 /* Peers List */
 
+#x-peers-filler {
+    display: flex;
+    flex-grow: 1;
+}
+
 x-peers {
-    width: 100%;
-    overflow: hidden;
+    position: relative;
+    display: flex;
     flex-flow: row wrap;
+    flex-grow: 1;
+    align-items: start !important;
+    justify-content: center;
+
     z-index: 2;
-    transition: color 300ms;
+    transition: --bg-color 0.5s ease;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    overscroll-behavior-x: none;
+    scrollbar-width: none;
+
+    --peers-per-row: 6; /* default if browser does not support :has selector */
+    --x-peers-width: min(100vw, calc(var(--peers-per-row) * (var(--peer-width) + 25px) - 16px));
+    width: var(--x-peers-width);
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
+x-peers.overflowing {
+    background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
+    linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
+        /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .2), rgba(var(--text-color), 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .2), rgba(var(--text-color), 0)) 0 100%;
+
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+}
+
+x-peers:has(> x-peer) {
+    --peers-per-row: 10;
+}
+
+/* peers-per-row if height is too small for 2 rows */
+@media screen and (min-height: 538px) and (max-height: 683px) and (max-width: 402px),
+screen and (min-height: 517px) and (max-height: 664px) and (max-width: 426px),
+screen and (min-height: 501px) and (max-height: 647px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(7)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 10;
+    }
+}
+
+/* peers-per-row if height is too small for 3 rows */
+@media screen and (min-height: 683px) and (max-width: 402px),
+screen and (min-height: 664px) and (max-width: 426px),
+screen and (min-height: 647px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(28)) {
+        --peers-per-row: 10;
+    }
+}
+
+::-webkit-scrollbar {
+    display: none;
 }
 
 /* Empty Peers List */
 
 x-no-peers {
-    height: 114px;
+    display: flex;
+    flex-direction: column;
     padding: 8px;
     text-align: center;
     /* prevent flickering on load */
@@ -255,25 +389,19 @@ x-no-peers[drop-bg] * {
 x-peer {
     -webkit-user-select: none;
     user-select: none;
+    padding: 8px;
+    align-content: start;
+    flex-wrap: wrap;
 }
 
 x-peer label {
     width: var(--peer-width);
-    padding: 8px;
     cursor: pointer;
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative;
 }
 
-x-peer .name {
-    width: var(--peer-width);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-}
-
 input[type="file"] {
     visibility: hidden;
     position: absolute;
@@ -281,27 +409,43 @@ input[type="file"] {
 
 x-peer x-icon {
     --icon-size: 40px;
+    margin-bottom: 4px;
+    transition: transform 150ms;
+    will-change: transform;
+    display: flex;
+    flex-direction: column;
+}
+
+x-peer .icon-wrapper {
     width: var(--icon-size);
     padding: 12px;
     border-radius: 50%;
     background: var(--primary-color);
     color: white;
     display: flex;
-    margin-bottom: 8px;
-    transition: transform 150ms;
-    will-change: transform;
 }
 
-x-peer:not(.type-ip) x-icon {
+x-peer:not(.type-ip).type-secret .icon-wrapper {
     background: var(--paired-device-color);
 }
 
-x-peer.ws-peer x-icon {
-    border: solid 4px var(--ws-peer-color);
+x-peer x-icon > .highlight-wrapper {
+    align-self: center;
+    align-items: center;
+    margin: 7px auto 0;
+    height: 6px;
 }
 
-x-peer.ws-peer .progress {
-    margin-top: 4px;
+x-peer x-icon > .highlight-wrapper > .highlight {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    display: none;
+}
+
+x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
+    background-color: var(--paired-device-color);
+    display: inline;
 }
 
 x-peer:not([status]):hover x-icon,
@@ -315,6 +459,36 @@ x-peer[status] x-icon {
     transform: scale(1);
 }
 
+
+x-peer.ws-peer {
+    margin-top: -1.5px;
+}
+
+x-peer.ws-peer .progress {
+    margin-top: 3px;
+}
+
+x-peer.ws-peer .icon-wrapper{
+    border: solid 3px var(--ws-peer-color);
+}
+
+x-peer.ws-peer .highlight-wrapper {
+    margin-top: 3px;
+}
+
+.device-descriptor {
+    width: 100%;
+    text-align: center;
+}
+
+.name {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
 .status,
 .device-name,
 .connection-hash {
@@ -380,20 +554,20 @@ x-peer[drop] x-icon {
 /* Footer */
 
 footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    position: relative;
+    margin-top: auto;
+    z-index: 2;
     align-items: center;
-    padding: 0 0 16px 0;
     text-align: center;
     transition: color 300ms;
+    cursor: default;
 }
 
 footer .logo {
     --icon-size: 80px;
     margin-bottom: 8px;
     color: var(--primary-color);
+    margin-top: -10px;
 }
 
 footer .font-body2 {
@@ -411,6 +585,39 @@ footer .font-body2 {
     padding-bottom: 1px;
 }
 
+#display-name {
+    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;
+}
+
+#edit-pen {
+    width: 1rem;
+    height: 1rem;
+    margin-left: -1rem;
+    margin-bottom: -2px;
+    position: relative;
+    z-index: -1;
+}
+
 /* Dialog */
 
 x-dialog x-background {
@@ -418,7 +625,7 @@ x-dialog x-background {
     z-index: 10;
     transition: opacity 300ms;
     will-change: opacity;
-    padding: 35px;
+    padding: 15px;
     overflow: overlay;
 }
 
@@ -429,16 +636,20 @@ x-dialog x-paper {
     padding: 16px 24px;
     width: 100%;
     max-width: 400px;
+    overflow: hidden;
     box-sizing: border-box;
     transition: transform 300ms;
     will-change: transform;
 }
 
-#pairDeviceDialog x-paper {
+#pair-device-dialog x-paper {
+    display: flex;
+    flex-direction: column;
     position: absolute;
     top: max(50%, 350px);
-    height: 650px;
-    margin-top: -325px;
+    margin-top: -328.5px;
+    width: calc(100vw - 20px);
+    height: 625px;
 }
 
 x-dialog:not([show]) {
@@ -453,12 +664,6 @@ x-dialog:not([show]) x-background {
     opacity: 0;
 }
 
-x-dialog .row-reverse>.button {
-    margin-top: 0;
-    margin-bottom: -16px;
-    width: 50%;
-    height: 50px;
-}
 
 x-dialog a {
     color: var(--primary-color);
@@ -470,13 +675,13 @@ x-dialog .font-subheading {
 
 /* PairDevicesDialog */
 
-#keyInputContainer {
+#key-input-container {
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
-#keyInputContainer>input {
+#key-input-container>input {
     width: 45px;
     height: 45px;
     font-size: 30px;
@@ -492,15 +697,15 @@ x-dialog .font-subheading {
     justify-content: center;
 }
 
-#keyInputContainer>input + * {
+#key-input-container>input + * {
     margin-left: 6px;
 }
 
-#keyInputContainer>input:nth-of-type(4) {
-    margin-left: 18px;
+#key-input-container>input:nth-of-type(4) {
+    margin-left: 5%;
 }
 
-#roomKey {
+#room-key {
     font-size: 50px;
     letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
     display: inline-block;
@@ -508,19 +713,15 @@ x-dialog .font-subheading {
     margin: 15px -15px;
 }
 
-#roomKeyQrCode {
-    padding: inherit;
-    margin: auto;
-    width: 150px;
-    height: 150px;
+#room-key-qr-code {
+    margin: 16px;
 }
 
-#pairDeviceDialog hr {
-    margin-top: 40px;
-    margin-bottom: 40px;
+#pair-device-dialog hr {
+    margin: 40px -24px;
 }
 
-#pairDeviceDialog x-background {
+#pair-device-dialog x-background {
     padding: 16px!important;
 }
 
@@ -531,29 +732,24 @@ x-dialog .row {
     margin-bottom: 8px;
 }
 
-x-dialog h2 {
-    margin-top: 1rem;
-}
-
-#receiveRequestDialog h2,
-#receiveFileDialog h2 {
-    margin-bottom: 0.5rem;
-}
-
-x-dialog .row-reverse {
-    margin: 40px -24px auto;
+/* button row*/
+x-paper > div:last-child {
+    margin: auto -24px -15px;
     border-top: solid 2.5px var(--border-color);
+    height: 50px;
 }
 
-.separator {
-    border: solid 1.25px var(--border-color);
-    margin-bottom: -16px;
+x-paper > div:last-child > .button {
+    height: 100%;
+    width: 50%;
+}
+
+x-paper > div:last-child > .button:not(:last-child) {
+    border-left: solid 2.5px var(--border-color);
 }
 
 .file-description {
-    word-break: break-word;
-    width: 80%;
-    margin: auto;
+    margin-bottom: 25px;
 }
 
 .file-description .row {
@@ -565,52 +761,52 @@ x-dialog .row-reverse {
     word-break: normal;
 }
 
-#fileName {
+.file-name {
     font-style: italic;
+    max-width: 100%;
 }
 
-#fileStem {
-    max-width: 80%;
+.file-stem {
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
-    max-height: 20px;
-}
-
-.file-size{
-    margin-bottom: 30px;
+    white-space: nowrap;
 }
 
 /* Send Text Dialog */
 
-#textInput {
-    min-height: 120px;
+x-dialog .dialog-subheader {
+    margin-bottom: 25px;
+}
+
+#text-input {
+    min-height: 200px;
+    margin: 14px auto;
 }
 
 /* Receive Text Dialog */
 
-#receiveTextDialog #text {
+#receive-text-dialog #text {
     width: 100%;
     word-break: break-all;
-    max-height: 300px;
+    max-height: calc(100vh - 393px);
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-user-select: all;
     -moz-user-select: all;
     user-select: all;
     white-space: pre-wrap;
-    margin-top:36px;
+    padding: 15px 0;
 }
 
-#receiveTextDialog #text a {
+#receive-text-dialog #text a {
     cursor: pointer;
 }
 
-#receiveTextDialog #text a:hover {
+#receive-text-dialog #text a:hover {
     text-decoration: underline;
 }
 
-#receiveTextDialog h3 {
+#receive-text-dialog h3 {
     /* Select the received text when double-clicking the dialog */
     user-select: none;
     pointer-events: none;
@@ -618,29 +814,44 @@ x-dialog .row-reverse {
 
 .row-separator {
     border-bottom: solid 2.5px var(--border-color);
-    margin: auto -25px;
+    margin: auto -24px;
 }
 
-#receiveTextDescriptionContainer {
-    margin-bottom: 25px;
-}
-
-#base64PasteBtn {
+#base64-paste-btn,
+#base64-paste-dialog .textarea {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
+    text-align: center;
 }
 
-#base64PasteDialog button {
+#base64-paste-dialog .textarea {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#base64-paste-dialog .textarea::before {
+    font-size: 15px;
+    letter-spacing: 0.12em;
+    color: var(--primary-color);
+    font-weight: 700;
+    text-transform: uppercase;
+    content: attr(placeholder);
+}
+
+#base64-paste-dialog button {
     margin: auto;
     border-radius: 8px;
 }
 
-#base64PasteDialog button[close] {
+#base64-paste-dialog button[close] {
     margin-top: 20px;
 }
 
-#base64PasteDialog button[close]:before {
+#base64-paste-dialog button[close]:before {
     border-radius: 8px;
 }
 
@@ -650,7 +861,6 @@ x-dialog .row-reverse {
     padding: 2px 16px 0;
     box-sizing: border-box;
     min-height: 36px;
-    min-width: 100px;
     font-size: 14px;
     line-height: 24px;
     font-weight: 700;
@@ -661,6 +871,7 @@ x-dialog .row-reverse {
     user-select: none;
     background: inherit;
     color: var(--primary-color);
+    overflow: hidden;
 }
 
 .button[disabled] {
@@ -698,16 +909,18 @@ x-dialog .row-reverse {
     opacity: 0.1;
 }
 
-#cancelPasteModeBtn {
+#cancel-paste-mode {
     z-index: 2;
-    margin-top: 0;
+    margin: 0;
+    padding: 0;
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     height: 56px;
-    border-bottom: solid 2.5px var(--border-color);
+    background-color: var(--primary-color);
+    color: rgb(238, 238, 238);
 }
 
 .button:focus:before,
@@ -723,7 +936,6 @@ button::-moz-focus-inner {
 
 
 /* Icon Button */
-
 .icon-button {
     width: 40px;
     height: 40px;
@@ -733,10 +945,7 @@ button::-moz-focus-inner {
     border-radius: 50%;
 }
 
-
-
 /* Text Input */
-
 .textarea {
     box-sizing: border-box;
     border: none;
@@ -750,9 +959,8 @@ button::-moz-focus-inner {
     display: block;
     overflow: auto;
     resize: none;
-    min-height: 40px;
     line-height: 16px;
-    max-height: 300px;
+    max-height: calc(100vh - 254px);
     white-space: pre;
 }
 
@@ -811,6 +1019,13 @@ button::-moz-focus-inner {
     margin: 8px 8px -16px;
 }
 
+#about section {
+    flex-grow: 1;
+}
+
+#about header {
+    align-self: end;
+}
 
 /* Loading Indicator */
 
@@ -818,7 +1033,7 @@ button::-moz-focus-inner {
     width: 80px;
     height: 80px;
     position: absolute;
-    top: 0;
+    top: -8px;
     clip: rect(0px, 80px, 80px, 40px);
     --progress: rotate(0deg);
     transition: transform 200ms;
@@ -860,11 +1075,11 @@ button::-moz-focus-inner {
 x-toast {
     position: absolute;
     min-height: 48px;
-    bottom: 24px;
+    top: 50px;
     width: 100%;
     max-width: 344px;
-    background-color: #323232;
-    color: rgba(255, 255, 255, 0.95);
+    background-color: rgb(var(--text-color));
+    color: rgb(var(--bg-color));
     align-items: center;
     box-sizing: border-box;
     padding: 8px 24px;
@@ -878,20 +1093,23 @@ x-toast {
 
 x-toast:not([show]):not(:hover) {
     opacity: 0;
-    transform: translateY(100px);
+    transform: translateY(-100px);
 }
 
 
 /* Instructions */
 
 x-instructions {
-    position: absolute;
-    top: 120px;
+    position: relative;
     opacity: 0.5;
     transition: opacity 300ms;
-    z-index: -1;
     text-align: center;
-    width: 80%;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
 }
 
 x-instructions:not([drop-peer]):not([drop-bg]):before {
@@ -908,92 +1126,92 @@ x-instructions[drop-bg]:not([drop-peer]):before {
 
 x-instructions p {
     display: none;
-    margin: 0 auto auto;
-    max-width: 80%;
 }
 
 x-peers:empty~x-instructions {
     opacity: 0;
 }
 
-.websocket-fallback {
+@media (hover: none) and (pointer: coarse) {
+    x-peer {
+        transform: scale(0.95);
+        padding: 4px 0;
+    }
+}
+
+#websocket-fallback {
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 5px;
+    text-align: center;
+    opacity: 0.5;
+    transition: opacity 300ms;
+}
+
+#websocket-fallback>span {
+    margin: 2px;
+}
+
+#websocket-fallback > span > span {
     border-bottom: solid 4px var(--ws-peer-color);
-    padding-bottom: 1px;
 }
 
 /* Responsive Styles */
-
-@media (min-height: 800px) {
-    footer {
-        margin-bottom: 16px;
+@media screen and (max-width: 360px) {
+    x-dialog x-paper {
+        padding: 15px;
+    }
+    x-paper > div:last-child {
+        margin: auto -15px -15px;
     }
 }
 
-@media screen and (min-height: 800px),
-screen and (min-width: 1100px) {
+@media screen and (min-height: 800px) {
+    #websocket-fallback {
+        padding-bottom: 15px;
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
     x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(desktop);
     }
 }
 
-@media (max-height: 420px) {
-    x-instructions {
-        top: 24px;
-    }
-
-    footer .logo {
-        --icon-size: 40px;
-    }
-}
-
-/*
-    iOS specific styles
-*/
-@supports (-webkit-overflow-scrolling: touch) {
-
-
-    html {
-        position: fixed;
-    }
-
-    x-instructions:not([drop-peer]):not([drop-bg]):before {
-        content: attr(mobile);
-    }
-}
-
 /*
     Color Themes
 */
 
 /* Default colors */
 body {
-    --text-color: #333;
-    --bg-color: #fff;
+    --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;
 }
 
 /* Dark theme colors */
 body.dark-theme {
-    --text-color: #eee;
-    --bg-color: #121212;
+    --text-color: 238,238,238;
+    --bg-color: 18,18,18; /*rgb code*/
     --bg-color-secondary: #333;
     --border-color: #252525;
 }
 
 /* Colored Elements */
 body {
-    color: var(--text-color);
-    background-color: var(--bg-color);
+    color: rgb(var(--text-color));
+    background-color: rgb(var(--bg-color));
     transition: background-color 0.5s ease;
 }
 
 x-dialog x-paper {
-    background-color: var(--bg-color);
+    background-color: rgb(var(--bg-color));
 }
 
 .textarea {
-    color: var(--text-color) !important;
+    color: rgb(var(--text-color)) !important;
     background-color: var(--bg-color-secondary) !important;
 }
 
@@ -1019,7 +1237,9 @@ x-dialog x-paper {
     display: none;
 }
 
-.element-preview {
+.file-preview > img,
+.file-preview > audio,
+.file-preview > video {
     max-width: 100%;
     max-height: 40vh;
     margin: auto;
@@ -1031,16 +1251,16 @@ x-dialog x-paper {
 
     /* defaults to dark theme */
     body {
-        --text-color: #eee;
-        --bg-color: #121212;
+        --text-color: 238,238,238;
+        --bg-color: 18,18,18; /*rgb code*/
         --bg-color-secondary: #333;
         --border-color: #252525;
     }
 
     /* Override dark mode with light mode styles if the user decides to swap */
     body.light-theme {
-        --text-color: #333;
-        --bg-color: #fafafa;
+        --text-color: 51,51,51;
+        --bg-color: 250,250,250; /*rgb code*/
         --bg-color-secondary: #f1f3f4;
         --border-color: #e7e8e8;
    }
@@ -1058,6 +1278,15 @@ x-dialog x-paper {
     }
 }
 
+/*
+    iOS specific styles
+*/
+@supports (-webkit-overflow-scrolling: touch) {
+    html {
+        min-height: -webkit-fill-available;
+    }
+}
+
 /* webkit scrollbar style*/
 
 ::-webkit-scrollbar{

rtc_config_example.json

@@ -0,0 +1,16 @@
+{
+  "sdpSemantics": "unified-plan",
+  "iceServers": [
+    {
+      "urls": "stun:stun.l.google.com:19302"
+    },
+    {
+      "urls": "stun:openrelay.metered.ca:80"
+    },
+    {
+      "urls": "turn:openrelay.metered.ca:443",
+      "username": "openrelayproject",
+      "credential": "openrelayproject"
+    }
+  ]
+}