increase version to v1.4.5

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

README.md

@@ -6,7 +6,7 @@
   <h1>PairDrop</h1>
 
   <p>
-    Local file sharing in your browser. Inspired by Apple's Airdrop.
+    Local file sharing in your browser. Inspired by Apple's AirDrop.
     <br />
     <a href="https://pairdrop.net"><strong>Explore  »</strong></a>
     <br />
@@ -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.
+* Files are transferred only after a request is accepted first. On transfer completion files are downloaded automatically if possible.
-* Multiple files are downloaded as ZIP file
+* Multiple files are downloaded as a ZIP file
-* On iOS and Android the devices share menu is opened instead of downloading the files
+* 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/faq.md

@@ -58,8 +58,11 @@ If your devices are paired and behind a NAT, the public TURN Server from [Open R
 Yes. Your files are sent using WebRTC, which encrypts them on transit. To ensure the connection is secure and there is no MITM, compare the security number shown under the device name on both devices. The security number is different for every connection.
 
 ### Transferring many files with paired devices takes too long
-Naturally, if traffic needs to be routed through the turn server transfer speed decreases.
+Naturally, if traffic needs to be routed through the turn server because your devices are behind different NATs, transfer speed decreases.
-As a workaround you can open a hotspot on one of your devices to bridge the connection which makes transfers much faster.
+
+As the public TURN server used is not super fast, you can easily [specify to use your own TURN server](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#specify-stunturn-servers) if you host your own instance.
+
+Alternatively, you can open a hotspot on one of your devices to bridge the connection which makes transfers much faster as no TURN server is needed.
 
 - [How to open a hotspot on Windows](https://support.microsoft.com/en-us/windows/use-your-windows-pc-as-a-mobile-hotspot-c89b0fad-72d5-41e8-f7ea-406ad9036b85#WindowsVersion=Windows_11)
 - [How to open a hotspot on Mac](https://support.apple.com/guide/mac-help/share-internet-connection-mac-network-users-mchlp1540/mac)

docs/host-your-own.md

@@ -17,7 +17,7 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ls
 Set options by using the following flags in the `docker run` command:
 
 ##### Port
-```
+```bash
 -p 127.0.0.1:8080:3000
 ```
 > Specify the port used by the docker image 
@@ -30,7 +30,7 @@ Set options by using the following flags in the `docker run` command:
 > Limits clients to 1000 requests per 5 min
 
 ##### 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.
@@ -42,6 +42,36 @@ 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>
+
 ### 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 
@@ -141,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
@@ -262,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
 ```
 
@@ -278,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
@@ -295,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>
@@ -308,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
 ```
 
@@ -322,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
@@ -347,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 rtcConfig = process.env.RTC_CONFIG
-const RateLimit = require('express-rate-limit');
+    ? JSON.parse(fs.readFileSync(process.env.RTC_CONFIG, 'utf8'))
-const http = require('http');
+    : {
+        "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");
+        const searchParams = new URL(request.url, "http://server").searchParams;
-        if (peer_id && Peer.isValidUuid(peer_id)) {
+        let peerId = searchParams.get("peer_id");
-            this.id = 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;
+        return cyrb53(this);
-        for (i = 0; i < this.length; i++) {
-            chr   = this.charCodeAt(i);
-            hash  = ((hash << 5) - hash) + chr;
-            hash |= 0; // Convert to 32bit integer
-        }
-        return hash;
     }
 });
 
+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.2.0",
+  "version": "1.4.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.2.0",
+      "version": "1.4.5",
       "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",
+      "version": "1.0.34",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ==",
+      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew==",
       "funding": [
         {
           "type": "opencollective",
@@ -1070,9 +1070,9 @@
       }
     },
     "ua-parser-js": {
-      "version": "1.0.33",
+      "version": "1.0.34",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ=="
+      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew=="
     },
     "unique-names-generator": {
       "version": "4.7.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.2.0",
+  "version": "1.4.5",
   "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,7 +69,7 @@
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
         </a>
-        <a id="cancel-paste-mode-btn" class="button" close hidden>Done</a>
+        <a id="cancel-paste-mode" class="button" hidden>Done</a>
     </header>
     <!-- Center -->
     <div id="center">
@@ -89,7 +89,13 @@
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="display-name" 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>
@@ -106,18 +112,17 @@
                     <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="key-input-container">
-                        <input id="char0" 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" autofocus contenteditable placeholder="" disabled>
-                        <input id="char1" 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 id="char2" 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 id="char3" 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 id="char4" 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 id="char5" 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>
+                        <button class="button" type="button" close>Cancel</button>
-                        <a class="button" close>Cancel</a>
                     </div>
                 </x-paper>
             </x-background>
@@ -130,9 +135,9 @@
                 <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" type="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -142,25 +147,23 @@
     <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center">PairDrop</h2>
+                <h2 class="center"></h2>
-                <div class="text-center file-description">
+                <div class="center column file-description">
                     <div>
-                        <span id="requesting-peer-display-name"></span>
+                        <span class="display-name"></span>
                         <span>would like to share</span>
                     </div>
-                    <div id="file-name" class="row" >
+                    <div class="row file-name" >
-                        <span id="file-stem"></span>
+                        <span class="file-stem"></span>
-                        <span id="file-extension"></span>
+                        <span class="file-extension"></span>
                     </div>
-                    <div class="row">
+                    <div class="row file-other">
-                        <span id="file-other"></span>
                     </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">
+                <div class="center row-reverse">
                     <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
-                    <div class="separator"></div>
                     <button id="decline-request" class="button" title="ESCAPE">Decline</button>
                 </div>
             </x-paper>
@@ -170,13 +173,23 @@
     <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 id="receive-title" class="center"></h2>
+                <h2 class="center"></h2>
-                <div class="text-center file-description"></div>
+                <div class="center column file-description">
-                <div class="font-body2 text-center file-size"></div>
+                    <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">
+                <div class="center row-reverse">
-                    <a id="share-or-download" class="button" autofocus></a>
+                    <button id="share-btn" class="button" autofocus hidden>Share</button>
-                    <div class="separator"></div>
+                    <button id="download-btn" class="button" autofocus>Download</button>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>
@@ -187,16 +200,16 @@
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2 class="text-center">PairDrop</h2>
+                    <h2 class="text-center">Send Message</h2>
-                    <div class="text-center">
+                    <div class="dialog-subheader text-center">
                         <span>Send a Message to</span>
-                        <span id="text-send-peer-display-name"></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="row-reverse">
+                    <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <div class="separator"></div>
+                        <button class="button" type="button" title="ESCAPE" close>Cancel</button>
-                        <a class="button" title="ESCAPE" close>Cancel</a>
                     </div>
                 </x-paper>
             </x-background>
@@ -206,16 +219,15 @@
     <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2>PairDrop - Message Received</h2>
+                <h2 class="text-center">Message Received</h2>
-                <div id="receive-text-description-container">
+                <div class="text-center dialog-subheader">
-                    <span id="receive-text-peer-display-name"></span>
+                    <span class="display-name"></span>
-                    <span>sent the following message:</span>
+                    <span>has sent:</span>
                 </div>
                 <div class="row-separator"></div>
                 <div id="text"></div>
-                <div class="row-reverse">
+                <div class="center row-reverse">
                     <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
-                    <div class="separator"></div>
                     <button id="close" class="button" title="ESCAPE">Close</button>
                 </div>
             </x-paper>
@@ -226,6 +238,7 @@
         <x-background class="full center">
             <x-paper shadow="2">
                 <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>
@@ -236,14 +249,14 @@
     </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>
@@ -326,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 => {
+        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
-            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())
         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();
+        const peerId = sessionStorage.getItem("peerId");
-        if (peerId) ws_url.searchParams.append('peer_id', 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);
+        const messageJSON = JSON.parse(message);
-        console.log('RTC:', message);
+        switch (messageJSON.type) {
-        switch (message.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,8 +522,9 @@ 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.onicecandidateerror = e => this._onError(e);
         this._conn.onconnectionstatechange = _ => this._onConnectionStateChange();
         this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e);
     }
@@ -558,14 +572,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 +622,16 @@ class RTCPeer extends Peer {
         }
     }
 
-    _closeChannel() {
+    _onPageHide() {
-        if (this._channel) this._channel.onclose = null;
+        this._disconnect();
-        if (this._conn) this._conn.close();
+    }
-        this._conn = null;
+
+    _disconnect() {
+        if (this._conn && this._channel) {
+            this._channel.onclose = null;
+            this._channel.close();
+        }
+        Events.fire('peer-disconnected', this._peerId);
     }
 
     _onChannelClosed() {
@@ -618,9 +645,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;
         }
@@ -666,6 +695,11 @@ class RTCPeer extends Peer {
     _isConnecting() {
         return this._channel && this._channel.readyState === 'connecting';
     }
+
+    sendDisplayName(displayName) {
+        if (!this._isConnected()) return;
+        super.sendDisplayName(displayName);
+    }
 }
 
 class PeersManager {
@@ -679,8 +713,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 +742,6 @@ class PeersManager {
         })
     }
 
-    sendTo(peerId, message) {
-        this.peers[peerId].send(message);
-    }
-
     _onRespondToFileTransferRequest(detail) {
         this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
     }
@@ -739,6 +773,10 @@ class PeersManager {
         }
     }
 
+    _onPeerConnected(peerId) {
+        this._notifyPeerDisplayNameChanged(peerId);
+    }
+
     _onPeerDisconnected(peerId) {
         const peer = this.peers[peerId];
         delete this.peers[peerId];
@@ -756,6 +794,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 +899,11 @@ class Events {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 
-    static on(type, callback) {
+    static on(type, callback, options = false) {
-        return window.addEventListener(type, callback, false);
+        return window.addEventListener(type, callback, options);
     }
 
-    static off(type, callback) {
+    static off(type, callback, options = false) {
-        return window.removeEventListener(type, callback, 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/scripts/ui.js

@@ -1,6 +1,5 @@
 const $ = query => document.getElementById(query);
 const $$ = query => document.body.querySelector(query);
-const isURL = text => /^(https?:\/\/|www)[^\s]+$/g.test(text.toLowerCase());
 window.isProductionEnvironment = !window.location.host.startsWith('localhost');
 window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 window.android = /android/i.test(navigator.userAgent);
@@ -10,9 +9,8 @@ window.pasteMode.activated = false;
 // set display name
 Events.on('display-name', e => {
     const me = e.detail.message;
-    const $displayName = $('display-name')
+    const $displayName = $('display-name');
-    $displayName.textContent = 'You are known as ' + me.displayName;
+    $displayName.setAttribute('placeholder', me.displayName);
-    $displayName.title = me.deviceName;
 });
 
 class PeersUI {
@@ -28,7 +26,7 @@ class PeersUI {
         Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text));
         this.peers = {};
 
-        this.$cancelPasteModeBtn = $('cancel-paste-mode-btn');
+        this.$cancelPasteModeBtn = $('cancel-paste-mode');
         this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
 
         Events.on('dragover', e => this._onDragOver(e));
@@ -44,6 +42,80 @@ class PeersUI {
 
         Events.on('peer-added', _ => this.evaluateOverflowing());
         Events.on('bg-resize', _ => this.evaluateOverflowing());
+
+        this.$displayName = $('display-name');
+
+        this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
+        this.$displayName.addEventListener('keyup', e => this._onKeyUpDisplayName(e));
+        this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText));
+
+        Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
+        Events.on('peer-display-name-changed', e => this._changePeerDisplayName(e.detail.peerId, e.detail.displayName));
+
+        // Load saved display name on page load
+        this._getSavedDisplayName().then(displayName => {
+            console.log("Retrieved edited display name:", displayName)
+            if (displayName) Events.fire('self-display-name-changed', displayName);
+        });
+    }
+
+    _insertDisplayName(displayName) {
+        this.$displayName.textContent = displayName;
+    }
+
+    _onKeyDownDisplayName(e) {
+        if (e.key === "Enter" || e.key === "Escape") {
+            e.preventDefault();
+            e.target.blur();
+        }
+    }
+
+    _onKeyUpDisplayName(e) {
+        // fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
+        if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) e.target.innerText = '';
+    }
+
+    async _saveDisplayName(newDisplayName) {
+        newDisplayName = newDisplayName.replace(/(\n|\r|\r\n)/, '')
+        const savedDisplayName = await this._getSavedDisplayName();
+        if (newDisplayName === savedDisplayName) return;
+
+        if (newDisplayName) {
+            PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
+                Events.fire('notify-user', 'Device name is changed permanently.');
+            }).catch(_ => {
+                console.log("This browser does not support IndexedDB. Use localStorage instead.");
+                localStorage.setItem('editedDisplayName', newDisplayName);
+                Events.fire('notify-user', 'Device name is changed only for this session.');
+            }).finally(_ => {
+                Events.fire('self-display-name-changed', newDisplayName);
+                Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
+            });
+        } else {
+            PersistentStorage.delete('editedDisplayName').catch(_ => {
+                console.log("This browser does not support IndexedDB. Use localStorage instead.")
+                localStorage.removeItem('editedDisplayName');
+                Events.fire('notify-user', 'Random Display name is used again.');
+            }).finally(_ => {
+                Events.fire('notify-user', 'Device name is randomly generated again.');
+                Events.fire('self-display-name-changed', '');
+                Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
+            });
+        }
+    }
+
+    _getSavedDisplayName() {
+        return new Promise((resolve) => {
+            PersistentStorage.get('editedDisplayName')
+                .then(displayName => resolve(displayName ?? ""))
+                .catch(_ => resolve(localStorage.getItem('editedDisplayName') ?? ""))
+        });
+    }
+
+    _changePeerDisplayName(peerId, displayName) {
+        this.peers[peerId].name.displayName = displayName;
+        const peerIdNode = $(peerId);
+        if (peerIdNode && displayName) peerIdNode.querySelector('.name').textContent = displayName;
     }
 
     _onKeyDown(e) {
@@ -169,7 +241,7 @@ class PeersUI {
 
             const _callback = (e) => this._sendClipboardData(e, files, text);
             Events.on('paste-pointerdown', _callback);
-            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback));
+            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback), { once: true });
 
             this.$cancelPasteModeBtn.removeAttribute('hidden');
 
@@ -228,7 +300,8 @@ class PeerUI {
 
     constructor(peer, connectionHash) {
         this._peer = peer;
-        this._connectionHash = connectionHash;
+        this._connectionHash =
+            `${connectionHash.substring(0, 4)} ${connectionHash.substring(4, 8)} ${connectionHash.substring(8, 12)} ${connectionHash.substring(12, 16)}`;
         this._initDom();
         this._bindListeners();
 
@@ -273,8 +346,7 @@ class PeerUI {
         this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
         this.$el.querySelector('.name').textContent = this._displayName();
         this.$el.querySelector('.device-name').textContent = this._deviceName();
-        this.$el.querySelector('.connection-hash').textContent =
+        this.$el.querySelector('.connection-hash').textContent = this._connectionHash;
-            this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
     }
 
     _initDom() {
@@ -473,10 +545,14 @@ class Dialog {
 class ReceiveDialog extends Dialog {
     constructor(id) {
         super(id);
-
+        this.$fileDescription = this.$el.querySelector('.file-description');
-        this.$fileDescriptionNode = this.$el.querySelector('.file-description');
+        this.$displayName = this.$el.querySelector('.display-name');
-        this.$fileSizeNode = this.$el.querySelector('.file-size');
+        this.$fileStem = this.$el.querySelector('.file-stem');
-        this.$previewBox = this.$el.querySelector('.file-preview')
+        this.$fileExtension = this.$el.querySelector('.file-extension');
+        this.$fileOther = this.$el.querySelector('.file-other');
+        this.$fileSize = this.$el.querySelector('.file-size');
+        this.$previewBox = this.$el.querySelector('.file-preview');
+        this.$receiveTitle = this.$el.querySelector('h2:first-of-type');
     }
 
     _formatFileSize(bytes) {
@@ -492,6 +568,27 @@ class ReceiveDialog extends Dialog {
             return bytes + ' Bytes';
         }
     }
+
+    _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize) {
+        if (files.length > 1) {
+            let fileOtherText = ` and ${files.length - 1} other `;
+            if (files.length === 2) {
+                fileOtherText += imagesOnly ? 'image' : 'file';
+            } else {
+                fileOtherText += imagesOnly ? 'images' : 'files';
+            }
+            this.$fileOther.innerText = fileOtherText;
+        }
+
+        const fileName = files[0].name;
+        const fileNameSplit = fileName.split('.');
+        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
+        this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length);
+        this.$fileExtension.innerText = fileExtension;
+        this.$displayName.innerText = displayName;
+        this.$displayName.title = connectionHash;
+        this.$fileSize.innerText = this._formatFileSize(totalSize);
+    }
 }
 
 class ReceiveFileDialog extends ReceiveDialog {
@@ -499,24 +596,26 @@ class ReceiveFileDialog extends ReceiveDialog {
     constructor() {
         super('receive-file-dialog');
 
-        this.$shareOrDownloadBtn = this.$el.querySelector('#share-or-download');
+        this.$downloadBtn = this.$el.querySelector('#download-btn');
-        this.$receiveTitleNode = this.$el.querySelector('#receive-title')
+        this.$shareBtn = this.$el.querySelector('#share-btn');
 
-        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
+        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.imagesOnly, e.detail.totalSize));
         this._filesQueue = [];
     }
 
-    _onFilesReceived(sender, files, request) {
+    _onFilesReceived(sender, files, imagesOnly, totalSize) {
-        this._nextFiles(sender, files, request);
+        const displayName = $(sender).ui._displayName();
+        const connectionHash = $(sender).ui._connectionHash;
+        this._filesQueue.push({peer: sender, displayName: displayName, connectionHash: connectionHash, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        this._nextFiles();
         window.blop.play();
     }
 
-    _nextFiles(sender, nextFiles, nextRequest) {
+    _nextFiles() {
-        if (nextFiles) this._filesQueue.push({peerId: sender, files: nextFiles, request: nextRequest});
         if (this._busy) return;
         this._busy = true;
-        const {peerId, files, request} = this._filesQueue.shift();
+        const {peer, displayName, connectionHash, files, imagesOnly, totalSize} = this._filesQueue.shift();
-        this._displayFiles(peerId, files, request);
+        this._displayFiles(peer, displayName, connectionHash, files, imagesOnly, totalSize);
     }
 
     _dequeueFile() {
@@ -533,55 +632,64 @@ class ReceiveFileDialog extends ReceiveDialog {
 
     createPreviewElement(file) {
         return new Promise((resolve, reject) => {
-            let mime = file.type.split('/')[0]
+            try {
-            let previewElement = {
+                let mime = file.type.split('/')[0]
-                image: 'img',
+                let previewElement = {
-                audio: 'audio',
+                    image: 'img',
-                video: 'video'
+                    audio: 'audio',
-            }
+                    video: 'video'
+                }
 
-            if (Object.keys(previewElement).indexOf(mime) === -1) {
+                if (Object.keys(previewElement).indexOf(mime) === -1) {
-                resolve(false);
+                    resolve(false);
-            } else {
+                } else {
-                console.log('the file is able to preview');
+                    let element = document.createElement(previewElement[mime]);
-                let element = document.createElement(previewElement[mime]);
+                    element.controls = true;
-                element.src = URL.createObjectURL(file);
+                    element.onload = _ => {
-                element.controls = true;
+                        this.$previewBox.appendChild(element);
-                element.classList.add('element-preview');
+                        resolve(true);
-                element.onload = _ => {
+                    };
-                    this.$previewBox.appendChild(element);
+                    element.onloadeddata = _ => {
-                    resolve(true)
+                        this.$previewBox.appendChild(element);
-                };
+                        resolve(true);
-                element.addEventListener('loadeddata', _ => resolve(true));
+                    };
-                element.onerror = _ => reject(`${mime} preview could not be loaded from type ${file.type}`);
+                    element.onerror = _ => {
+                        reject(`${mime} preview could not be loaded from type ${file.type}`);
+                    };
+                    element.src = URL.createObjectURL(file);
+                }
+            } catch (e) {
+                reject(`preview could not be loaded from type ${file.type}`);
             }
         });
     }
 
-    async _displayFiles(peerId, files, request) {
+    async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize) {
-        if (this.continueCallback) this.$shareOrDownloadBtn.removeEventListener("click", this.continueCallback);
+        this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize);
-
-        let url;
-        let title;
-        let filenameDownload;
-
-        let descriptor = request.imagesOnly ? "Image" : "File";
-
-        let size = this._formatFileSize(request.totalSize);
-        let description = files[0].name;
-
-        let shareInsteadOfDownload = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
 
+        let descriptor, url, filenameDownload;
         if (files.length === 1) {
-            url = URL.createObjectURL(files[0])
+            descriptor = imagesOnly ? 'Image' : 'File';
-            title = `PairDrop - ${descriptor} Received`
-            filenameDownload = files[0].name;
         } else {
-            title = `PairDrop - ${files.length} ${descriptor}s Received`
+            descriptor = imagesOnly ? 'Images' : 'Files';
-            description += ` and ${files.length-1} other ${descriptor.toLowerCase()}`;
+        }
-            if(files.length>2) description += "s";
+        this.$receiveTitle.innerText = `${descriptor} Received`;
 
-            if(!shareInsteadOfDownload) {
+        const canShare = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
+        if (canShare) {
+            this.$shareBtn.removeAttribute('hidden');
+            this.$shareBtn.onclick = _ => {
+                navigator.share({files: files})
+                    .catch(err => {
+                        console.error(err);
+                    });
+            }
+        }
+
+        let downloadZipped = false;
+        if (files.length > 1) {
+            downloadZipped = true;
+            try {
                 let bytesCompleted = 0;
                 zipper.createNewZipWriter();
                 for (let i=0; i<files.length; i++) {
@@ -589,7 +697,7 @@ class ReceiveFileDialog extends ReceiveDialog {
                         onprogress: (progress) => {
                             Events.fire('set-progress', {
                                 peerId: peerId,
-                                progress: (bytesCompleted + progress) / request.totalSize,
+                                progress: (bytesCompleted + progress) / totalSize,
                                 status: 'process'
                             })
                         }
@@ -609,49 +717,68 @@ class ReceiveFileDialog extends ReceiveDialog {
                 let minutes = now.getMinutes().toString();
                 minutes = minutes.length < 2 ? "0" + minutes : minutes;
                 filenameDownload = `PairDrop_files_${year+month+date}_${hours+minutes}.zip`;
+            } catch (e) {
+                console.error(e);
+                downloadZipped = false;
             }
         }
 
-        this.$receiveTitleNode.textContent = title;
+        this.$downloadBtn.innerText = "Download";
-        this.$fileDescriptionNode.textContent = description;
+        this.$downloadBtn.onclick = _ => {
-        this.$fileSizeNode.textContent = size;
+            if (downloadZipped) {
-
+                let tmpZipBtn = document.createElement("a");
-        if (shareInsteadOfDownload) {
+                tmpZipBtn.download = filenameDownload;
-            this.$shareOrDownloadBtn.innerText = "Share";
+                tmpZipBtn.href = url;
-            this.continue = _ => {
+                tmpZipBtn.click();
-                navigator.share({files: files})
+            } else {
-                    .catch(err => console.error(err));
+                this._downloadFilesIndividually(files);
             }
-            this.continueCallback = _ => this.continue();
-        } else {
-            this.$shareOrDownloadBtn.innerText = "Download again";
-            this.continue = _ => {
-                let tmpBtn = document.createElement("a");
-                tmpBtn.download = filenameDownload;
-                tmpBtn.href = url;
-                tmpBtn.click();
-            };
-            this.continueCallback = _ => {
-                this.continue();
-                this.hide();
-            };
-        }
-        this.$shareOrDownloadBtn.addEventListener("click", this.continueCallback);
 
-        this.createPreviewElement(files[0]).finally(_ => {
+            if (!canShare) {
-            document.title = files.length === 1
+                this.$downloadBtn.innerText = "Download again";
-                ? 'File received - PairDrop'
+            }
-                : `(${files.length}) Files received - PairDrop`;
+            Events.fire('notify-user', `${descriptor} downloaded successfully`);
-            document.changeFavicon("images/favicon-96x96-notification.png");
+            this.$downloadBtn.style.pointerEvents = "none";
-            this.show();
+            setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000);
-            Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
+        };
-            this.continue();
+
-        }).catch(r => console.error(r));
+        document.title = files.length === 1
+            ? 'File received - PairDrop'
+            : `${files.length} Files received - PairDrop`;
+        document.changeFavicon("images/favicon-96x96-notification.png");
+        Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
+        this.show();
+
+        setTimeout(_ => {
+            if (canShare) {
+                this.$shareBtn.click();
+            } else {
+                this.$downloadBtn.click();
+            }
+        }, 500);
+
+        this.createPreviewElement(files[0])
+            .then(canPreview => {
+                if (canPreview) {
+                    console.log('the file is able to preview');
+                } else {
+                    console.log('the file is not able to preview');
+                }
+            })
+            .catch(r => console.error(r));
+    }
+
+    _downloadFilesIndividually(files) {
+        let tmpBtn = document.createElement("a");
+        for (let i=0; i<files.length; i++) {
+            tmpBtn.download = files[i].name;
+            tmpBtn.href = URL.createObjectURL(files[i]);
+            tmpBtn.click();
+        }
     }
 
     hide() {
-        this.$shareOrDownloadBtn.removeAttribute('href');
+        this.$shareBtn.setAttribute('hidden', '');
-        this.$shareOrDownloadBtn.removeAttribute('download');
         this.$previewBox.innerHTML = '';
         super.hide();
         this._dequeueFile();
@@ -663,11 +790,6 @@ class ReceiveRequestDialog extends ReceiveDialog {
     constructor() {
         super('receive-request-dialog');
 
-        this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requesting-peer-display-name');
-        this.$fileStemNode = this.$el.querySelector('#file-stem');
-        this.$fileExtensionNode = this.$el.querySelector('#file-extension');
-        this.$fileOtherNode = this.$el.querySelector('#file-other');
-
         this.$acceptRequestBtn = this.$el.querySelector('#accept-request');
         this.$declineRequestBtn = this.$el.querySelector('#decline-request');
         this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
@@ -699,32 +821,19 @@ class ReceiveRequestDialog extends ReceiveDialog {
     _showRequestDialog(request, peerId) {
         this.correspondingPeerId = peerId;
 
-        this.$requestingPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
+        const displayName = $(peerId).ui._displayName();
-
+        const connectionHash = $(peerId).ui._connectionHash;
-        const fileName = request.header[0].name;
+        this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize);
-        const fileNameSplit = fileName.split('.');
-        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
-        this.$fileStemNode.innerText = fileName.substring(0, fileName.length - fileExtension.length);
-        this.$fileExtensionNode.innerText = fileExtension
-
-        if (request.header.length >= 2) {
-            let fileOtherText = ` and ${request.header.length - 1} other `;
-            fileOtherText += request.imagesOnly ? 'image' : 'file';
-            if (request.header.length > 2) fileOtherText += "s";
-            this.$fileOtherNode.innerText = fileOtherText;
-        }
-
-        this.$fileSizeNode.innerText = this._formatFileSize(request.totalSize);
 
         if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
             let element = document.createElement('img');
             element.src = request.thumbnailDataUrl;
-            element.classList.add('element-preview');
-
             this.$previewBox.appendChild(element)
         }
 
-        document.title = 'File Transfer Requested - PairDrop';
+        this.$receiveTitle.innerText = `${request.imagesOnly ? 'Image' : 'File'} Transfer Request`
+
+        document.title = `${request.imagesOnly ? 'Image' : 'File'} Transfer Requested - PairDrop`;
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
@@ -751,15 +860,17 @@ class ReceiveRequestDialog extends ReceiveDialog {
 class PairDeviceDialog extends Dialog {
     constructor() {
         super('pair-device-dialog');
-        $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
         this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
         this.$submitBtn = this.$el.querySelector('button[type="submit"]');
         this.$roomKey = this.$el.querySelector('#room-key');
         this.$qrCode = this.$el.querySelector('#room-key-qr-code');
+        this.$pairDeviceBtn = $('pair-device');
         this.$clearSecretsBtn = $('clear-pair-devices');
         this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
-        let createJoinForm = this.$el.querySelector('form');
+        this.$createJoinForm = this.$el.querySelector('form');
-        createJoinForm.addEventListener('submit', _ => this._onSubmit());
+
+        this.$createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$pairDeviceBtn.addEventListener('click', _ => this._pairDeviceInitiate());
 
         this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel())
         this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e)));
@@ -838,7 +949,7 @@ class PairDeviceDialog extends Dialog {
             })
             this.$submitBtn.removeAttribute("disabled");
             if (document.activeElement === this.$inputRoomKeyChars[5]) {
-                this._onSubmit();
+                this._pairDeviceJoin(this.inputRoomKey);
             }
         }
     }
@@ -852,6 +963,7 @@ class PairDeviceDialog extends Dialog {
     }
 
     _onWsConnected() {
+        this.$pairDeviceBtn.removeAttribute('hidden');
         PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
             Events.fire('room-secrets', roomSecrets);
             this._evaluateNumberRoomSecrets();
@@ -888,7 +1000,8 @@ class PairDeviceDialog extends Dialog {
         return url.href;
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
         this._pairDeviceJoin(this.inputRoomKey);
     }
 
@@ -975,14 +1088,19 @@ class ClearDevicesDialog extends Dialog {
         super('clear-devices-dialog');
         $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
         let clearDevicesForm = this.$el.querySelector('form');
-        clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
+        clearDevicesForm.addEventListener('submit', e => this._onSubmit(e));
     }
 
     _onClearPairDevices() {
         this.show();
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
+        this._clearRoomSecrets();
+    }
+
+    _clearRoomSecrets() {
         Events.fire('clear-room-secrets');
         this.hide();
     }
@@ -993,10 +1111,10 @@ class SendTextDialog extends Dialog {
         super('send-text-dialog');
         Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
         this.$text = this.$el.querySelector('#text-input');
-        this.$peerDisplayName = this.$el.querySelector('#text-send-peer-display-name');
+        this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
-        this.$form.addEventListener('submit', _ => this._send());
+        this.$form.addEventListener('submit', e => this._onSubmit(e));
         this.$text.addEventListener('input', e => this._onChange(e));
         Events.on("keydown", e => this._onKeyDown(e));
     }
@@ -1038,6 +1156,11 @@ class SendTextDialog extends Dialog {
         sel.addRange(range);
     }
 
+    _onSubmit(e) {
+        e.preventDefault();
+        this._send();
+    }
+
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
@@ -1061,7 +1184,7 @@ class ReceiveTextDialog extends Dialog {
 
         Events.on("keydown", e => this._onKeyDown(e));
 
-        this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receive-text-peer-display-name');
+        this.$displayNameNode = this.$el.querySelector('.display-name');
         this._receiveTextQueue = [];
     }
 
@@ -1091,18 +1214,23 @@ class ReceiveTextDialog extends Dialog {
     }
 
     _showReceiveTextDialog(text, peerId) {
-        this.$receiveTextPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
+        this.$displayNameNode.innerText = $(peerId).ui._displayName();
 
-        if (isURL(text)) {
+        this.$text.innerText = text;
-            const $a = document.createElement('a');
+        this.$text.classList.remove('text-center');
-            $a.href = text;
+
-            $a.target = '_blank';
+        // Beautify text if text is short
-            $a.textContent = text;
+        if (text.length < 2000) {
-            this.$text.innerHTML = '';
+            // replace urls with actual links
-            this.$text.appendChild($a);
+            this.$text.innerHTML = this.$text.innerHTML.replace(/((https?:\/\/|www)[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)/g, url => {
-        } else {
+                return `<a href="${url}" target="_blank">${url}</a>`;
-            this.$text.textContent = text;
+            });
+
+            if (!/\s/.test(text)) {
+                this.$text.classList.add('text-center');
+            }
         }
+
         this._setDocumentTitleMessages();
 
         document.changeFavicon("images/favicon-96x96-notification.png");
@@ -1112,7 +1240,7 @@ class ReceiveTextDialog extends Dialog {
     _setDocumentTitleMessages() {
         document.title = !this._receiveTextQueue.length
             ? 'Message Received - PairDrop'
-            : `(${this._receiveTextQueue.length + 1}) Messages Received - PairDrop`;
+            : `${this._receiveTextQueue.length + 1} Messages Received - PairDrop`;
     }
 
     async _onCopy() {
@@ -1137,21 +1265,21 @@ class Base64ZipDialog extends Dialog {
         const base64Hash = window.location.hash.substring(1);
 
         this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
+        this.$fallbackTextarea = this.$el.querySelector('.textarea');
 
         if (base64Text) {
             this.show();
             if (base64Text === "paste") {
                 // ?base64text=paste
                 // base64 encoded string is ready to be pasted from clipboard
-                this.$pasteBtn.innerText = 'Tap here to paste text';
+                this.preparePasting("text");
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
             } else if (base64Text === "hash") {
                 // ?base64text=hash#BASE64ENCODED
                 // base64 encoded string is url hash which is never sent to server and faster (recommended)
                 this.processBase64Text(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1161,7 +1289,7 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Text(base64Text)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1174,56 +1302,76 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Zip(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'File content is incorrect.');
-                        console.log("File content incorrect.")
+                        console.log("File content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
             } else {
                 // ?base64zip=paste || ?base64zip=true
-                this.$pasteBtn.innerText = 'Tap here to paste files';
+                this.preparePasting('files');
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
             }
         }
     }
 
     _setPasteBtnToProcessing() {
-        this.$pasteBtn.pointerEvents = "none";
+        this.$pasteBtn.style.pointerEvents = "none";
         this.$pasteBtn.innerText = "Processing...";
     }
 
-    async processClipboard(type) {
+    preparePasting(type) {
-        if (!navigator.clipboard.readText) {
+        if (navigator.clipboard.readText) {
-            Events.fire('notify-user', 'This feature is not available on your browser.');
+            this.$pasteBtn.innerText = `Tap here to paste ${type}`;
-            console.log("navigator.clipboard.readText() is not available on your browser.")
+            this._clickCallback = _ => this.processClipboard(type);
-            this.hide();
+            this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
-            return;
-        }
-
-        this._setPasteBtnToProcessing();
-
-        const base64 = await navigator.clipboard.readText();
-
-        if (!base64) return;
-
-        if (type === "text") {
-            this.processBase64Text(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
         } else {
-            this.processBase64Zip(base64)
+            console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
-                .catch(_ => {
+            this.$pasteBtn.setAttribute('hidden', '');
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
+            this.$fallbackTextarea.setAttribute('placeholder', `Paste here to send ${type}`);
-                    console.log("Clipboard content is incorrect.")
+            this.$fallbackTextarea.removeAttribute('hidden');
-                }).finally(_ => {
+            this._inputCallback = _ => this.processInput(type);
-                    this.hide();
+            this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
-                });
+            this.$fallbackTextarea.focus();
         }
     }
 
+    async processInput(type) {
+        const base64 = this.$fallbackTextarea.textContent;
+        this.$fallbackTextarea.textContent = '';
+        await this.processBase64(type, base64);
+    }
+
+    async processClipboard(type) {
+        const base64 = await navigator.clipboard.readText();
+        await this.processBase64(type, base64);
+    }
+
+    isValidBase64(base64) {
+        try {
+            // check if input is base64 encoded
+            window.atob(base64);
+            return true;
+        } catch (e) {
+            // input is not base64 string.
+            return false;
+        }
+    }
+
+    async processBase64(type, base64) {
+        if (!base64 || !this.isValidBase64(base64)) return;
+        this._setPasteBtnToProcessing();
+        try {
+            if (type === "text") {
+                await this.processBase64Text(base64);
+            } else {
+                await this.processBase64Zip(base64);
+            }
+        } catch(_) {
+            Events.fire('notify-user', 'Clipboard content is incorrect.');
+            console.log("Clipboard content is incorrect.")
+        }
+        this.hide();
+    }
+
     processBase64Text(base64Text){
         return new Promise((resolve) => {
             this._setPasteBtnToProcessing();
@@ -1257,6 +1405,8 @@ class Base64ZipDialog extends Dialog {
 
     hide() {
         this.clearBrowserHistory();
+        this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
+        this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
         super.hide();
     }
 }
@@ -1287,9 +1437,9 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
-        // Todo: fix Notifications
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
+        Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
     }
 
     _requestPermission() {
@@ -1332,7 +1482,7 @@ class Notifications {
     _messageNotification(message, peerId) {
         if (document.visibilityState !== 'visible') {
             const peerDisplayName = $(peerId).ui._displayName();
-            if (isURL(message)) {
+            if (/^((https?:\/\/|www)[abcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)$/.test(message.toLowerCase())) {
                 const notification = this._notify(`Link received by ${peerDisplayName} - Click to open`, message);
                 this._bind(notification, _ => window.open(message, '_blank', null, true));
             } else {
@@ -1362,8 +1512,29 @@ class Notifications {
         }
     }
 
+    _requestNotification(request, peerId) {
+        if (document.visibilityState !== 'visible') {
+            let imagesOnly = true;
+            for(let i=0; i<request.header.length; i++) {
+                if (request.header[i].mime.split('/')[0] !== 'image') {
+                    imagesOnly = false;
+                    break;
+                }
+            }
+            let descriptor;
+            if (request.header.length > 1) {
+                descriptor = imagesOnly ? ' images' : ' files';
+            } else {
+                descriptor = imagesOnly ? ' image' : ' file';
+            }
+            let displayName = $(peerId).querySelector('.name').textContent
+            let title = `${displayName} would like to transfer ${request.header.length} ${descriptor}`;
+            const notification = this._notify(title, 'Click to show');
+        }
+    }
+
     _download(notification) {
-        $('share-or-download').click();
+        $('download-btn').click();
         notification.close();
     }
 
@@ -1393,7 +1564,7 @@ class NetworkStatusUI {
     constructor() {
         Events.on('offline', _ => this._showOfflineMessage());
         Events.on('online', _ => this._showOnlineMessage());
-        Events.on('ws-connected', _ => this._showOnlineMessage());
+        Events.on('ws-connected', _ => this._onWsConnected());
         Events.on('ws-disconnected', _ => this._onWsDisconnected());
         if (!navigator.onLine) this._showOfflineMessage();
     }
@@ -1404,17 +1575,16 @@ class NetworkStatusUI {
     }
 
     _showOnlineMessage() {
-        window.animateBackground(true);
-        if (!this.firstConnect) {
-            this.firstConnect = true;
-            return;
-        }
         Events.fire('notify-user', 'You are back online');
+        window.animateBackground(true);
+    }
+
+    _onWsConnected() {
+        window.animateBackground(true);
     }
 
     _onWsDisconnected() {
         window.animateBackground(false);
-        if (!this.firstConnect) this.firstConnect = true;
     }
 }
 
@@ -1693,6 +1863,23 @@ class PersistentStorage {
     }
 }
 
+class Broadcast {
+    constructor() {
+        this.bc = new BroadcastChannel('pairdrop');
+        this.bc.addEventListener('message', e => this._onMessage(e));
+        Events.on('broadcast-send', e => this._broadcastMessage(e.detail));
+    }
+
+    _broadcastMessage(message) {
+        this.bc.postMessage(message);
+    }
+
+    _onMessage(e) {
+        console.log('Broadcast message received:', e.data)
+        Events.fire(e.data.type, e.data.detail);
+    }
+}
+
 class PairDrop {
     constructor() {
         Events.on('load', _ => {
@@ -1712,6 +1899,7 @@ class PairDrop {
             const webShareTargetUI = new WebShareTargetUI();
             const webFileHandlersUI = new WebFileHandlersUI();
             const noSleepUI = new NoSleepUI();
+            const broadCast = new Broadcast();
         });
     }
 }
@@ -1752,8 +1940,8 @@ Events.on('load', () => {
     let x0, y0, w, h, dw, offset;
 
     function init() {
-        w = window.innerWidth;
+        w = document.documentElement.clientWidth;
-        h = window.innerHeight;
+        h = document.documentElement.clientHeight;
         c.width = w;
         c.height = h;
         offset = $$('footer').offsetHeight - 32;

public/service-worker.js

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

public/styles.css

@@ -22,13 +22,18 @@ body {
 }
 
 body {
-    min-height: 100vh;
+    height: 100%;
     /* mobile viewport bug fix */
-    min-height: -webkit-fill-available;
+    min-height: -moz-available;          /* WebKit-based browsers will ignore this. */
+    min-height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    min-height: fill-available;
 }
 
 html {
-    height: -webkit-fill-available;
+    height: 100%;
+    min-height: -moz-available;          /* WebKit-based browsers will ignore this. */
+    min-height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    min-height: fill-available;
 }
 
 .row-reverse {
@@ -450,6 +455,7 @@ x-peer[status] x-icon {
 }
 
 .device-descriptor {
+    width: 100%;
     text-align: center;
 }
 
@@ -533,6 +539,7 @@ footer {
     padding: 0 0 16px 0;
     text-align: center;
     transition: color 300ms;
+    cursor: default;
 }
 
 footer .logo {
@@ -557,6 +564,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 {
@@ -564,7 +604,7 @@ x-dialog x-background {
     z-index: 10;
     transition: opacity 300ms;
     will-change: opacity;
-    padding: 35px;
+    padding: 15px;
     overflow: overlay;
 }
 
@@ -575,19 +615,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;
 }
 
 #pair-device-dialog x-paper {
-    position: absolute;
-    top: max(50%, 350px);
-    height: 650px;
-    margin-top: -325px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    position: absolute;
+    top: max(50%, 350px);
+    margin-top: -328.5px;
+    width: calc(100vw - 20px);
+    height: 625px;
 }
 
 x-dialog:not([show]) {
@@ -602,12 +643,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);
@@ -646,7 +681,7 @@ x-dialog .font-subheading {
 }
 
 #key-input-container>input:nth-of-type(4) {
-    margin-left: 18px;
+    margin-left: 5%;
 }
 
 #room-key {
@@ -658,16 +693,11 @@ x-dialog .font-subheading {
 }
 
 #room-key-qr-code {
-    padding: inherit;
+    margin: 16px;
-    margin: auto;
-    width: 150px;
-    height: 150px;
 }
 
 #pair-device-dialog hr {
-    margin-top: 40px;
+    margin: 40px -24px;
-    margin-bottom: 40px;
-    width: 100%;
 }
 
 #pair-device-dialog x-background {
@@ -681,29 +711,24 @@ x-dialog .row {
     margin-bottom: 8px;
 }
 
-x-dialog h2 {
+/* button row*/
-    margin-top: 1rem;
+x-paper > div:last-child {
-}
+    margin: auto -24px -15px;
-
-#receive-request-dialog h2,
-#receive-file-dialog h2 {
-    margin-bottom: 0.5rem;
-}
-
-x-dialog .row-reverse {
-    margin: 40px -24px 0;
     border-top: solid 2.5px var(--border-color);
+    height: 50px;
 }
 
-.separator {
+x-paper > div:last-child > .button {
-    border: solid 1.25px var(--border-color);
+    height: 100%;
-    margin-bottom: -16px;
+    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;
+    margin-bottom: 25px;
-    width: 80%;
-    margin: auto;
 }
 
 .file-description .row {
@@ -715,26 +740,26 @@ x-dialog .row-reverse {
     word-break: normal;
 }
 
-#file-name {
+.file-name {
     font-style: italic;
+    max-width: 100%;
 }
 
-#file-stem {
+.file-stem {
-    max-width: 80%;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
+    white-space: nowrap;
-    max-height: 20px;
-}
-
-.file-size{
-    margin-bottom: 30px;
 }
 
 /* Send Text Dialog */
 
+x-dialog .dialog-subheader {
+    margin-bottom: 25px;
+}
+
 #text-input {
-    min-height: 120px;
+    min-height: 200px;
+    margin: 14px auto;
 }
 
 /* Receive Text Dialog */
@@ -742,14 +767,14 @@ x-dialog .row-reverse {
 #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;
 }
 
 #receive-text-dialog #text a {
@@ -768,17 +793,32 @@ x-dialog .row-reverse {
 
 .row-separator {
     border-bottom: solid 2.5px var(--border-color);
-    margin: auto -25px;
+    margin: auto -24px;
 }
 
-#receive-text-description-container {
+#base64-paste-btn,
-    margin-bottom: 25px;
+#base64-paste-dialog .textarea {
-}
-
-#base64-paste-btn {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
+    text-align: center;
+}
+
+#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 {
@@ -800,7 +840,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;
@@ -811,6 +850,7 @@ x-dialog .row-reverse {
     user-select: none;
     background: inherit;
     color: var(--primary-color);
+    overflow: hidden;
 }
 
 .button[disabled] {
@@ -848,7 +888,7 @@ x-dialog .row-reverse {
     opacity: 0.1;
 }
 
-#cancel-paste-mode-btn {
+#cancel-paste-mode {
     z-index: 2;
     margin: 0;
     padding: 0;
@@ -875,7 +915,6 @@ button::-moz-focus-inner {
 
 
 /* Icon Button */
-
 .icon-button {
     width: 40px;
     height: 40px;
@@ -885,10 +924,7 @@ button::-moz-focus-inner {
     border-radius: 50%;
 }
 
-
-
 /* Text Input */
-
 .textarea {
     box-sizing: border-box;
     border: none;
@@ -902,9 +938,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;
 }
 
@@ -963,6 +998,13 @@ button::-moz-focus-inner {
     margin: 8px 8px -16px;
 }
 
+#about section {
+    flex-grow: 1;
+}
+
+#about header {
+    align-self: end;
+}
 
 /* Loading Indicator */
 
@@ -1012,11 +1054,11 @@ button::-moz-focus-inner {
 x-toast {
     position: absolute;
     min-height: 48px;
-    bottom: 24px;
+    top: 50px;
     width: 100%;
     max-width: 344px;
-    background-color: #323232;
+    background-color: rgb(var(--text-color));
-    color: rgba(255, 255, 255, 0.95);
+    color: rgb(var(--bg-color));
     align-items: center;
     box-sizing: border-box;
     padding: 8px 24px;
@@ -1030,7 +1072,7 @@ x-toast {
 
 x-toast:not([show]):not(:hover) {
     opacity: 0;
-    transform: translateY(100px);
+    transform: translateY(-100px);
 }
 
 
@@ -1094,6 +1136,14 @@ x-peers:empty~x-instructions {
 }
 
 /* Responsive Styles */
+@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) {
     footer {
@@ -1166,7 +1216,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;

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,7 +69,7 @@
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
         </a>
-        <a id="cancel-paste-mode-btn" class="button" close hidden>Done</a>
+        <a id="cancel-paste-mode" class="button" hidden>Done</a>
     </header>
     <!-- Center -->
     <div id="center">
@@ -89,7 +89,13 @@
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="display-name" 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>
@@ -109,18 +115,17 @@
                     <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="key-input-container">
-                        <input id="char0" 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" autofocus contenteditable placeholder="" disabled>
-                        <input id="char1" 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 id="char2" 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 id="char3" 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 id="char4" 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 id="char5" 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>
+                        <button class="button" type="button" close>Cancel</button>
-                        <a class="button" close>Cancel</a>
                     </div>
                 </x-paper>
             </x-background>
@@ -133,9 +138,9 @@
                 <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" type="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -145,25 +150,23 @@
     <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center">PairDrop</h2>
+                <h2 class="center"></h2>
-                <div class="text-center file-description">
+                <div class="center column file-description">
                     <div>
-                        <span id="requesting-peer-display-name"></span>
+                        <span class="display-name"></span>
                         <span>would like to share</span>
                     </div>
-                    <div id="file-name" class="row" >
+                    <div class="row file-name" >
-                        <span id="file-stem"></span>
+                        <span class="file-stem"></span>
-                        <span id="file-extension"></span>
+                        <span class="file-extension"></span>
                     </div>
-                    <div class="row">
+                    <div class="row file-other">
-                        <span id="file-other"></span>
                     </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">
+                <div class="center row-reverse">
                     <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
-                    <div class="separator"></div>
                     <button id="decline-request" class="button" title="ESCAPE">Decline</button>
                 </div>
             </x-paper>
@@ -173,13 +176,23 @@
     <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 id="receive-title" class="center"></h2>
+                <h2 class="center"></h2>
-                <div class="text-center file-description"></div>
+                <div class="center column file-description">
-                <div class="font-body2 text-center file-size"></div>
+                    <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">
+                <div class="center row-reverse">
-                    <a id="share-or-download" class="button" autofocus></a>
+                    <button id="share-btn" class="button" autofocus hidden>Share</button>
-                    <div class="separator"></div>
+                    <button id="download-btn" class="button" autofocus>Download</button>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>
@@ -190,16 +203,16 @@
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2 class="text-center">PairDrop</h2>
+                    <h2 class="text-center">Send Message</h2>
-                    <div class="text-center">
+                    <div class="dialog-subheader text-center">
                         <span>Send a Message to</span>
-                        <span id="text-send-peer-display-name"></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="row-reverse">
+                    <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <div class="separator"></div>
+                        <button class="button" type="button" title="ESCAPE" close>Cancel</button>
-                        <a class="button" title="ESCAPE" close>Cancel</a>
                     </div>
                 </x-paper>
             </x-background>
@@ -209,16 +222,15 @@
     <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2>PairDrop - Message Received</h2>
+                <h2 class="text-center">Message Received</h2>
-                <div id="receive-text-description-container">
+                <div class="text-center dialog-subheader">
-                    <span id="receive-text-peer-display-name"></span>
+                    <span class="display-name"></span>
-                    <span>sent the following message:</span>
+                    <span>has sent:</span>
                 </div>
                 <div class="row-separator"></div>
                 <div id="text"></div>
-                <div class="row-reverse">
+                <div class="center row-reverse">
                     <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
-                    <div class="separator"></div>
                     <button id="close" class="button" title="ESCAPE">Close</button>
                 </div>
             </x-paper>
@@ -229,6 +241,7 @@
         <x-background class="full center">
             <x-paper shadow="2">
                 <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>
@@ -239,14 +252,14 @@
     </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>
@@ -329,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 => {
+        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
-            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())
         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();
+        const peerId = sessionStorage.getItem("peerId");
-        if (peerId) ws_url.searchParams.append('peer_id', 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);
+        const messageJSON = JSON.parse(message);
-        if (logMessage) console.log('RTC:', message);
+        switch (messageJSON.type) {
-        switch (message.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,8 +533,9 @@ 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.onicecandidateerror = e => this._onError(e);
         this._conn.onconnectionstatechange = _ => this._onConnectionStateChange();
         this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e);
     }
@@ -568,14 +583,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 +633,16 @@ class RTCPeer extends Peer {
         }
     }
 
-    _closeChannel() {
+    _onPageHide() {
-        if (this._channel) this._channel.onclose = null;
+        this._disconnect();
-        if (this._conn) this._conn.close();
+    }
-        this._conn = null;
+
+    _disconnect() {
+        if (this._conn && this._channel) {
+            this._channel.onclose = null;
+            this._channel.close();
+        }
+        Events.fire('peer-disconnected', this._peerId);
     }
 
     _onChannelClosed() {
@@ -628,9 +656,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;
         }
@@ -676,13 +706,20 @@ class RTCPeer extends Peer {
     _isConnecting() {
         return this._channel && this._channel.readyState === 'connecting';
     }
+
+    sendDisplayName(displayName) {
+        if (!this._isConnected()) return;
+        super.sendDisplayName(displayName);
+    }
 }
 
 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 +731,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() {
+    _sendSignal(connected = false) {
-        this.sendJSON({type: 'signal'});
+        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 +766,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 +792,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 +811,6 @@ class PeersManager {
         })
     }
 
-    sendTo(peerId, message) {
-        this.peers[peerId].send(message);
-    }
-
     _onRespondToFileTransferRequest(detail) {
         this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
     }
@@ -797,15 +836,28 @@ class PeersManager {
     }
 
     _onPeerLeft(msg) {
-        if (this.peers[msg.peerId] && !this.peers[msg.peerId].rtcSupported) {
+        if (this.peers[msg.peerId] && (!this.peers[msg.peerId].rtcSupported || !window.isRtcSupported)) {
-            console.log('WSPeer left:', msg.peerId)
+            console.log('WSPeer left:', msg.peerId);
-            Events.fire('peer-disconnected', 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 +875,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 +980,11 @@ class Events {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 
-    static on(type, callback) {
+    static on(type, callback, options = false) {
-        return window.addEventListener(type, callback, false);
+        return window.addEventListener(type, callback, options);
     }
 
-    static off(type, callback) {
+    static off(type, callback, options = false) {
-        return window.removeEventListener(type, callback, 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/scripts/ui.js

@@ -1,6 +1,5 @@
 const $ = query => document.getElementById(query);
 const $$ = query => document.body.querySelector(query);
-const isURL = text => /^(https?:\/\/|www)[^\s]+$/g.test(text.toLowerCase());
 window.isProductionEnvironment = !window.location.host.startsWith('localhost');
 window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 window.android = /android/i.test(navigator.userAgent);
@@ -10,9 +9,8 @@ window.pasteMode.activated = false;
 // set display name
 Events.on('display-name', e => {
     const me = e.detail.message;
-    const $displayName = $('display-name')
+    const $displayName = $('display-name');
-    $displayName.textContent = 'You are known as ' + me.displayName;
+    $displayName.setAttribute('placeholder', me.displayName);
-    $displayName.title = me.deviceName;
 });
 
 class PeersUI {
@@ -28,7 +26,7 @@ class PeersUI {
         Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text));
         this.peers = {};
 
-        this.$cancelPasteModeBtn = $('cancel-paste-mode-btn');
+        this.$cancelPasteModeBtn = $('cancel-paste-mode');
         this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
 
         Events.on('dragover', e => this._onDragOver(e));
@@ -44,6 +42,80 @@ class PeersUI {
 
         Events.on('peer-added', _ => this.evaluateOverflowing());
         Events.on('bg-resize', _ => this.evaluateOverflowing());
+
+        this.$displayName = $('display-name');
+
+        this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
+        this.$displayName.addEventListener('keyup', e => this._onKeyUpDisplayName(e));
+        this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText));
+
+        Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
+        Events.on('peer-display-name-changed', e => this._changePeerDisplayName(e.detail.peerId, e.detail.displayName));
+
+        // Load saved display name on page load
+        this._getSavedDisplayName().then(displayName => {
+            console.log("Retrieved edited display name:", displayName)
+            if (displayName) Events.fire('self-display-name-changed', displayName);
+        });
+    }
+
+    _insertDisplayName(displayName) {
+        this.$displayName.textContent = displayName;
+    }
+
+    _onKeyDownDisplayName(e) {
+        if (e.key === "Enter" || e.key === "Escape") {
+            e.preventDefault();
+            e.target.blur();
+        }
+    }
+
+    _onKeyUpDisplayName(e) {
+        // fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
+        if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) e.target.innerText = '';
+    }
+
+    async _saveDisplayName(newDisplayName) {
+        newDisplayName = newDisplayName.replace(/(\n|\r|\r\n)/, '')
+        const savedDisplayName = await this._getSavedDisplayName();
+        if (newDisplayName === savedDisplayName) return;
+
+        if (newDisplayName) {
+            PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
+                Events.fire('notify-user', 'Device name is changed permanently.');
+            }).catch(_ => {
+                console.log("This browser does not support IndexedDB. Use localStorage instead.");
+                localStorage.setItem('editedDisplayName', newDisplayName);
+                Events.fire('notify-user', 'Device name is changed only for this session.');
+            }).finally(_ => {
+                Events.fire('self-display-name-changed', newDisplayName);
+                Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
+            });
+        } else {
+            PersistentStorage.delete('editedDisplayName').catch(_ => {
+                console.log("This browser does not support IndexedDB. Use localStorage instead.")
+                localStorage.removeItem('editedDisplayName');
+                Events.fire('notify-user', 'Random Display name is used again.');
+            }).finally(_ => {
+                Events.fire('notify-user', 'Device name is randomly generated again.');
+                Events.fire('self-display-name-changed', '');
+                Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
+            });
+        }
+    }
+
+    _getSavedDisplayName() {
+        return new Promise((resolve) => {
+            PersistentStorage.get('editedDisplayName')
+                .then(displayName => resolve(displayName ?? ""))
+                .catch(_ => resolve(localStorage.getItem('editedDisplayName') ?? ""))
+        });
+    }
+
+    _changePeerDisplayName(peerId, displayName) {
+        this.peers[peerId].name.displayName = displayName;
+        const peerIdNode = $(peerId);
+        if (peerIdNode && displayName) peerIdNode.querySelector('.name').textContent = displayName;
     }
 
     _onKeyDown(e) {
@@ -169,7 +241,7 @@ class PeersUI {
 
             const _callback = (e) => this._sendClipboardData(e, files, text);
             Events.on('paste-pointerdown', _callback);
-            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback));
+            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback), { once: true });
 
             this.$cancelPasteModeBtn.removeAttribute('hidden');
 
@@ -228,7 +300,8 @@ class PeerUI {
 
     constructor(peer, connectionHash) {
         this._peer = peer;
-        this._connectionHash = connectionHash;
+        this._connectionHash =
+            `${connectionHash.substring(0, 4)} ${connectionHash.substring(4, 8)} ${connectionHash.substring(8, 12)} ${connectionHash.substring(12, 16)}`;
         this._initDom();
         this._bindListeners();
 
@@ -273,8 +346,7 @@ class PeerUI {
         this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
         this.$el.querySelector('.name').textContent = this._displayName();
         this.$el.querySelector('.device-name').textContent = this._deviceName();
-        this.$el.querySelector('.connection-hash').textContent =
+        this.$el.querySelector('.connection-hash').textContent = this._connectionHash;
-            this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
     }
 
     _initDom() {
@@ -474,10 +546,14 @@ class Dialog {
 class ReceiveDialog extends Dialog {
     constructor(id) {
         super(id);
-
+        this.$fileDescription = this.$el.querySelector('.file-description');
-        this.$fileDescriptionNode = this.$el.querySelector('.file-description');
+        this.$displayName = this.$el.querySelector('.display-name');
-        this.$fileSizeNode = this.$el.querySelector('.file-size');
+        this.$fileStem = this.$el.querySelector('.file-stem');
-        this.$previewBox = this.$el.querySelector('.file-preview')
+        this.$fileExtension = this.$el.querySelector('.file-extension');
+        this.$fileOther = this.$el.querySelector('.file-other');
+        this.$fileSize = this.$el.querySelector('.file-size');
+        this.$previewBox = this.$el.querySelector('.file-preview');
+        this.$receiveTitle = this.$el.querySelector('h2:first-of-type');
     }
 
     _formatFileSize(bytes) {
@@ -493,6 +569,27 @@ class ReceiveDialog extends Dialog {
             return bytes + ' Bytes';
         }
     }
+
+    _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize) {
+        if (files.length > 1) {
+            let fileOtherText = ` and ${files.length - 1} other `;
+            if (files.length === 2) {
+                fileOtherText += imagesOnly ? 'image' : 'file';
+            } else {
+                fileOtherText += imagesOnly ? 'images' : 'files';
+            }
+            this.$fileOther.innerText = fileOtherText;
+        }
+
+        const fileName = files[0].name;
+        const fileNameSplit = fileName.split('.');
+        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
+        this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length);
+        this.$fileExtension.innerText = fileExtension;
+        this.$displayName.innerText = displayName;
+        this.$displayName.title = connectionHash;
+        this.$fileSize.innerText = this._formatFileSize(totalSize);
+    }
 }
 
 class ReceiveFileDialog extends ReceiveDialog {
@@ -500,24 +597,26 @@ class ReceiveFileDialog extends ReceiveDialog {
     constructor() {
         super('receive-file-dialog');
 
-        this.$shareOrDownloadBtn = this.$el.querySelector('#share-or-download');
+        this.$downloadBtn = this.$el.querySelector('#download-btn');
-        this.$receiveTitleNode = this.$el.querySelector('#receive-title')
+        this.$shareBtn = this.$el.querySelector('#share-btn');
 
-        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
+        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.imagesOnly, e.detail.totalSize));
         this._filesQueue = [];
     }
 
-    _onFilesReceived(sender, files, request) {
+    _onFilesReceived(sender, files, imagesOnly, totalSize) {
-        this._nextFiles(sender, files, request);
+        const displayName = $(sender).ui._displayName();
+        const connectionHash = $(sender).ui._connectionHash;
+        this._filesQueue.push({peer: sender, displayName: displayName, connectionHash: connectionHash, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        this._nextFiles();
         window.blop.play();
     }
 
-    _nextFiles(sender, nextFiles, nextRequest) {
+    _nextFiles() {
-        if (nextFiles) this._filesQueue.push({peerId: sender, files: nextFiles, request: nextRequest});
         if (this._busy) return;
         this._busy = true;
-        const {peerId, files, request} = this._filesQueue.shift();
+        const {peer, displayName, connectionHash, files, imagesOnly, totalSize} = this._filesQueue.shift();
-        this._displayFiles(peerId, files, request);
+        this._displayFiles(peer, displayName, connectionHash, files, imagesOnly, totalSize);
     }
 
     _dequeueFile() {
@@ -534,55 +633,64 @@ class ReceiveFileDialog extends ReceiveDialog {
 
     createPreviewElement(file) {
         return new Promise((resolve, reject) => {
-            let mime = file.type.split('/')[0]
+            try {
-            let previewElement = {
+                let mime = file.type.split('/')[0]
-                image: 'img',
+                let previewElement = {
-                audio: 'audio',
+                    image: 'img',
-                video: 'video'
+                    audio: 'audio',
-            }
+                    video: 'video'
+                }
 
-            if (Object.keys(previewElement).indexOf(mime) === -1) {
+                if (Object.keys(previewElement).indexOf(mime) === -1) {
-                resolve(false);
+                    resolve(false);
-            } else {
+                } else {
-                console.log('the file is able to preview');
+                    let element = document.createElement(previewElement[mime]);
-                let element = document.createElement(previewElement[mime]);
+                    element.controls = true;
-                element.src = URL.createObjectURL(file);
+                    element.onload = _ => {
-                element.controls = true;
+                        this.$previewBox.appendChild(element);
-                element.classList.add('element-preview');
+                        resolve(true);
-                element.onload = _ => {
+                    };
-                    this.$previewBox.appendChild(element);
+                    element.onloadeddata = _ => {
-                    resolve(true)
+                        this.$previewBox.appendChild(element);
-                };
+                        resolve(true);
-                element.addEventListener('loadeddata', _ => resolve(true));
+                    };
-                element.onerror = _ => reject(`${mime} preview could not be loaded from type ${file.type}`);
+                    element.onerror = _ => {
+                        reject(`${mime} preview could not be loaded from type ${file.type}`);
+                    };
+                    element.src = URL.createObjectURL(file);
+                }
+            } catch (e) {
+                reject(`preview could not be loaded from type ${file.type}`);
             }
         });
     }
 
-    async _displayFiles(peerId, files, request) {
+    async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize) {
-        if (this.continueCallback) this.$shareOrDownloadBtn.removeEventListener("click", this.continueCallback);
+        this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize);
-
-        let url;
-        let title;
-        let filenameDownload;
-
-        let descriptor = request.imagesOnly ? "Image" : "File";
-
-        let size = this._formatFileSize(request.totalSize);
-        let description = files[0].name;
-
-        let shareInsteadOfDownload = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
 
+        let descriptor, url, filenameDownload;
         if (files.length === 1) {
-            url = URL.createObjectURL(files[0])
+            descriptor = imagesOnly ? 'Image' : 'File';
-            title = `PairDrop - ${descriptor} Received`
-            filenameDownload = files[0].name;
         } else {
-            title = `PairDrop - ${files.length} ${descriptor}s Received`
+            descriptor = imagesOnly ? 'Images' : 'Files';
-            description += ` and ${files.length-1} other ${descriptor.toLowerCase()}`;
+        }
-            if(files.length>2) description += "s";
+        this.$receiveTitle.innerText = `${descriptor} Received`;
 
-            if(!shareInsteadOfDownload) {
+        const canShare = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
+        if (canShare) {
+            this.$shareBtn.removeAttribute('hidden');
+            this.$shareBtn.onclick = _ => {
+                navigator.share({files: files})
+                    .catch(err => {
+                        console.error(err);
+                    });
+            }
+        }
+
+        let downloadZipped = false;
+        if (files.length > 1) {
+            downloadZipped = true;
+            try {
                 let bytesCompleted = 0;
                 zipper.createNewZipWriter();
                 for (let i=0; i<files.length; i++) {
@@ -590,7 +698,7 @@ class ReceiveFileDialog extends ReceiveDialog {
                         onprogress: (progress) => {
                             Events.fire('set-progress', {
                                 peerId: peerId,
-                                progress: (bytesCompleted + progress) / request.totalSize,
+                                progress: (bytesCompleted + progress) / totalSize,
                                 status: 'process'
                             })
                         }
@@ -610,49 +718,68 @@ class ReceiveFileDialog extends ReceiveDialog {
                 let minutes = now.getMinutes().toString();
                 minutes = minutes.length < 2 ? "0" + minutes : minutes;
                 filenameDownload = `PairDrop_files_${year+month+date}_${hours+minutes}.zip`;
+            } catch (e) {
+                console.error(e);
+                downloadZipped = false;
             }
         }
 
-        this.$receiveTitleNode.textContent = title;
+        this.$downloadBtn.innerText = "Download";
-        this.$fileDescriptionNode.textContent = description;
+        this.$downloadBtn.onclick = _ => {
-        this.$fileSizeNode.textContent = size;
+            if (downloadZipped) {
-
+                let tmpZipBtn = document.createElement("a");
-        if (shareInsteadOfDownload) {
+                tmpZipBtn.download = filenameDownload;
-            this.$shareOrDownloadBtn.innerText = "Share";
+                tmpZipBtn.href = url;
-            this.continue = _ => {
+                tmpZipBtn.click();
-                navigator.share({files: files})
+            } else {
-                    .catch(err => console.error(err));
+                this._downloadFilesIndividually(files);
             }
-            this.continueCallback = _ => this.continue();
-        } else {
-            this.$shareOrDownloadBtn.innerText = "Download again";
-            this.continue = _ => {
-                let tmpBtn = document.createElement("a");
-                tmpBtn.download = filenameDownload;
-                tmpBtn.href = url;
-                tmpBtn.click();
-            };
-            this.continueCallback = _ => {
-                this.continue();
-                this.hide();
-            };
-        }
-        this.$shareOrDownloadBtn.addEventListener("click", this.continueCallback);
 
-        this.createPreviewElement(files[0]).finally(_ => {
+            if (!canShare) {
-            document.title = files.length === 1
+                this.$downloadBtn.innerText = "Download again";
-                ? 'File received - PairDrop'
+            }
-                : `(${files.length}) Files received - PairDrop`;
+            Events.fire('notify-user', `${descriptor} downloaded successfully`);
-            document.changeFavicon("images/favicon-96x96-notification.png");
+            this.$downloadBtn.style.pointerEvents = "none";
-            this.show();
+            setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000);
-            Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
+        };
-            this.continue();
+
-        }).catch(r => console.error(r));
+        document.title = files.length === 1
+            ? 'File received - PairDrop'
+            : `${files.length} Files received - PairDrop`;
+        document.changeFavicon("images/favicon-96x96-notification.png");
+        Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
+        this.show();
+
+        setTimeout(_ => {
+            if (canShare) {
+                this.$shareBtn.click();
+            } else {
+                this.$downloadBtn.click();
+            }
+        }, 500);
+
+        this.createPreviewElement(files[0])
+            .then(canPreview => {
+                if (canPreview) {
+                    console.log('the file is able to preview');
+                } else {
+                    console.log('the file is not able to preview');
+                }
+            })
+            .catch(r => console.error(r));
+    }
+
+    _downloadFilesIndividually(files) {
+        let tmpBtn = document.createElement("a");
+        for (let i=0; i<files.length; i++) {
+            tmpBtn.download = files[i].name;
+            tmpBtn.href = URL.createObjectURL(files[i]);
+            tmpBtn.click();
+        }
     }
 
     hide() {
-        this.$shareOrDownloadBtn.removeAttribute('href');
+        this.$shareBtn.setAttribute('hidden', '');
-        this.$shareOrDownloadBtn.removeAttribute('download');
         this.$previewBox.innerHTML = '';
         super.hide();
         this._dequeueFile();
@@ -664,11 +791,6 @@ class ReceiveRequestDialog extends ReceiveDialog {
     constructor() {
         super('receive-request-dialog');
 
-        this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requesting-peer-display-name');
-        this.$fileStemNode = this.$el.querySelector('#file-stem');
-        this.$fileExtensionNode = this.$el.querySelector('#file-extension');
-        this.$fileOtherNode = this.$el.querySelector('#file-other');
-
         this.$acceptRequestBtn = this.$el.querySelector('#accept-request');
         this.$declineRequestBtn = this.$el.querySelector('#decline-request');
         this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
@@ -700,32 +822,19 @@ class ReceiveRequestDialog extends ReceiveDialog {
     _showRequestDialog(request, peerId) {
         this.correspondingPeerId = peerId;
 
-        this.$requestingPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
+        const displayName = $(peerId).ui._displayName();
-
+        const connectionHash = $(peerId).ui._connectionHash;
-        const fileName = request.header[0].name;
+        this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize);
-        const fileNameSplit = fileName.split('.');
-        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
-        this.$fileStemNode.innerText = fileName.substring(0, fileName.length - fileExtension.length);
-        this.$fileExtensionNode.innerText = fileExtension
-
-        if (request.header.length >= 2) {
-            let fileOtherText = ` and ${request.header.length - 1} other `;
-            fileOtherText += request.imagesOnly ? 'image' : 'file';
-            if (request.header.length > 2) fileOtherText += "s";
-            this.$fileOtherNode.innerText = fileOtherText;
-        }
-
-        this.$fileSizeNode.innerText = this._formatFileSize(request.totalSize);
 
         if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
             let element = document.createElement('img');
             element.src = request.thumbnailDataUrl;
-            element.classList.add('element-preview');
-
             this.$previewBox.appendChild(element)
         }
 
-        document.title = 'File Transfer Requested - PairDrop';
+        this.$receiveTitle.innerText = `${request.imagesOnly ? 'Image' : 'File'} Transfer Request`
+
+        document.title = `${request.imagesOnly ? 'Image' : 'File'} Transfer Requested - PairDrop`;
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
@@ -752,15 +861,17 @@ class ReceiveRequestDialog extends ReceiveDialog {
 class PairDeviceDialog extends Dialog {
     constructor() {
         super('pair-device-dialog');
-        $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
         this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
         this.$submitBtn = this.$el.querySelector('button[type="submit"]');
         this.$roomKey = this.$el.querySelector('#room-key');
         this.$qrCode = this.$el.querySelector('#room-key-qr-code');
+        this.$pairDeviceBtn = $('pair-device');
         this.$clearSecretsBtn = $('clear-pair-devices');
         this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
-        let createJoinForm = this.$el.querySelector('form');
+        this.$createJoinForm = this.$el.querySelector('form');
-        createJoinForm.addEventListener('submit', _ => this._onSubmit());
+
+        this.$createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$pairDeviceBtn.addEventListener('click', _ => this._pairDeviceInitiate());
 
         this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel())
         this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e)));
@@ -839,7 +950,7 @@ class PairDeviceDialog extends Dialog {
             })
             this.$submitBtn.removeAttribute("disabled");
             if (document.activeElement === this.$inputRoomKeyChars[5]) {
-                this._onSubmit();
+                this._pairDeviceJoin(this.inputRoomKey);
             }
         }
     }
@@ -853,6 +964,7 @@ class PairDeviceDialog extends Dialog {
     }
 
     _onWsConnected() {
+        this.$pairDeviceBtn.removeAttribute('hidden');
         PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
             Events.fire('room-secrets', roomSecrets);
             this._evaluateNumberRoomSecrets();
@@ -889,7 +1001,8 @@ class PairDeviceDialog extends Dialog {
         return url.href;
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
         this._pairDeviceJoin(this.inputRoomKey);
     }
 
@@ -976,14 +1089,19 @@ class ClearDevicesDialog extends Dialog {
         super('clear-devices-dialog');
         $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
         let clearDevicesForm = this.$el.querySelector('form');
-        clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
+        clearDevicesForm.addEventListener('submit', e => this._onSubmit(e));
     }
 
     _onClearPairDevices() {
         this.show();
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
+        this._clearRoomSecrets();
+    }
+
+    _clearRoomSecrets() {
         Events.fire('clear-room-secrets');
         this.hide();
     }
@@ -994,10 +1112,10 @@ class SendTextDialog extends Dialog {
         super('send-text-dialog');
         Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
         this.$text = this.$el.querySelector('#text-input');
-        this.$peerDisplayName = this.$el.querySelector('#text-send-peer-display-name');
+        this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
-        this.$form.addEventListener('submit', _ => this._send());
+        this.$form.addEventListener('submit', e => this._onSubmit(e));
         this.$text.addEventListener('input', e => this._onChange(e));
         Events.on("keydown", e => this._onKeyDown(e));
     }
@@ -1039,6 +1157,11 @@ class SendTextDialog extends Dialog {
         sel.addRange(range);
     }
 
+    _onSubmit(e) {
+        e.preventDefault();
+        this._send();
+    }
+
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
@@ -1062,7 +1185,7 @@ class ReceiveTextDialog extends Dialog {
 
         Events.on("keydown", e => this._onKeyDown(e));
 
-        this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receive-text-peer-display-name');
+        this.$displayNameNode = this.$el.querySelector('.display-name');
         this._receiveTextQueue = [];
     }
 
@@ -1092,18 +1215,23 @@ class ReceiveTextDialog extends Dialog {
     }
 
     _showReceiveTextDialog(text, peerId) {
-        this.$receiveTextPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
+        this.$displayNameNode.innerText = $(peerId).ui._displayName();
 
-        if (isURL(text)) {
+        this.$text.innerText = text;
-            const $a = document.createElement('a');
+        this.$text.classList.remove('text-center');
-            $a.href = text;
+
-            $a.target = '_blank';
+        // Beautify text if text is short
-            $a.textContent = text;
+        if (text.length < 2000) {
-            this.$text.innerHTML = '';
+            // replace urls with actual links
-            this.$text.appendChild($a);
+            this.$text.innerHTML = this.$text.innerHTML.replace(/((https?:\/\/|www)[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)/g, url => {
-        } else {
+                return `<a href="${url}" target="_blank">${url}</a>`;
-            this.$text.textContent = text;
+            });
+
+            if (!/\s/.test(text)) {
+                this.$text.classList.add('text-center');
+            }
         }
+
         this._setDocumentTitleMessages();
 
         document.changeFavicon("images/favicon-96x96-notification.png");
@@ -1113,7 +1241,7 @@ class ReceiveTextDialog extends Dialog {
     _setDocumentTitleMessages() {
         document.title = !this._receiveTextQueue.length
             ? 'Message Received - PairDrop'
-            : `(${this._receiveTextQueue.length + 1}) Messages Received - PairDrop`;
+            : `${this._receiveTextQueue.length + 1} Messages Received - PairDrop`;
     }
 
     async _onCopy() {
@@ -1138,21 +1266,21 @@ class Base64ZipDialog extends Dialog {
         const base64Hash = window.location.hash.substring(1);
 
         this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
+        this.$fallbackTextarea = this.$el.querySelector('.textarea');
 
         if (base64Text) {
             this.show();
             if (base64Text === "paste") {
                 // ?base64text=paste
                 // base64 encoded string is ready to be pasted from clipboard
-                this.$pasteBtn.innerText = 'Tap here to paste text';
+                this.preparePasting("text");
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
             } else if (base64Text === "hash") {
                 // ?base64text=hash#BASE64ENCODED
                 // base64 encoded string is url hash which is never sent to server and faster (recommended)
                 this.processBase64Text(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1162,7 +1290,7 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Text(base64Text)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1175,56 +1303,76 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Zip(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'File content is incorrect.');
-                        console.log("File content incorrect.")
+                        console.log("File content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
             } else {
                 // ?base64zip=paste || ?base64zip=true
-                this.$pasteBtn.innerText = 'Tap here to paste files';
+                this.preparePasting('files');
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
             }
         }
     }
 
     _setPasteBtnToProcessing() {
-        this.$pasteBtn.pointerEvents = "none";
+        this.$pasteBtn.style.pointerEvents = "none";
         this.$pasteBtn.innerText = "Processing...";
     }
 
-    async processClipboard(type) {
+    preparePasting(type) {
-        if (!navigator.clipboard.readText) {
+        if (navigator.clipboard.readText) {
-            Events.fire('notify-user', 'This feature is not available on your browser.');
+            this.$pasteBtn.innerText = `Tap here to paste ${type}`;
-            console.log("navigator.clipboard.readText() is not available on your browser.")
+            this._clickCallback = _ => this.processClipboard(type);
-            this.hide();
+            this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
-            return;
-        }
-
-        this._setPasteBtnToProcessing();
-
-        const base64 = await navigator.clipboard.readText();
-
-        if (!base64) return;
-
-        if (type === "text") {
-            this.processBase64Text(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
         } else {
-            this.processBase64Zip(base64)
+            console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
-                .catch(_ => {
+            this.$pasteBtn.setAttribute('hidden', '');
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
+            this.$fallbackTextarea.setAttribute('placeholder', `Paste here to send ${type}`);
-                    console.log("Clipboard content is incorrect.")
+            this.$fallbackTextarea.removeAttribute('hidden');
-                }).finally(_ => {
+            this._inputCallback = _ => this.processInput(type);
-                    this.hide();
+            this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
-                });
+            this.$fallbackTextarea.focus();
         }
     }
 
+    async processInput(type) {
+        const base64 = this.$fallbackTextarea.textContent;
+        this.$fallbackTextarea.textContent = '';
+        await this.processBase64(type, base64);
+    }
+
+    async processClipboard(type) {
+        const base64 = await navigator.clipboard.readText();
+        await this.processBase64(type, base64);
+    }
+
+    isValidBase64(base64) {
+        try {
+            // check if input is base64 encoded
+            window.atob(base64);
+            return true;
+        } catch (e) {
+            // input is not base64 string.
+            return false;
+        }
+    }
+
+    async processBase64(type, base64) {
+        if (!base64 || !this.isValidBase64(base64)) return;
+        this._setPasteBtnToProcessing();
+        try {
+            if (type === "text") {
+                await this.processBase64Text(base64);
+            } else {
+                await this.processBase64Zip(base64);
+            }
+        } catch(_) {
+            Events.fire('notify-user', 'Clipboard content is incorrect.');
+            console.log("Clipboard content is incorrect.")
+        }
+        this.hide();
+    }
+
     processBase64Text(base64Text){
         return new Promise((resolve) => {
             this._setPasteBtnToProcessing();
@@ -1258,6 +1406,8 @@ class Base64ZipDialog extends Dialog {
 
     hide() {
         this.clearBrowserHistory();
+        this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
+        this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
         super.hide();
     }
 }
@@ -1288,9 +1438,9 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
-        // Todo: fix Notifications
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
+        Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
     }
 
     _requestPermission() {
@@ -1333,7 +1483,7 @@ class Notifications {
     _messageNotification(message, peerId) {
         if (document.visibilityState !== 'visible') {
             const peerDisplayName = $(peerId).ui._displayName();
-            if (isURL(message)) {
+            if (/^((https?:\/\/|www)[abcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)$/.test(message.toLowerCase())) {
                 const notification = this._notify(`Link received by ${peerDisplayName} - Click to open`, message);
                 this._bind(notification, _ => window.open(message, '_blank', null, true));
             } else {
@@ -1363,8 +1513,29 @@ class Notifications {
         }
     }
 
+    _requestNotification(request, peerId) {
+        if (document.visibilityState !== 'visible') {
+            let imagesOnly = true;
+            for(let i=0; i<request.header.length; i++) {
+                if (request.header[i].mime.split('/')[0] !== 'image') {
+                    imagesOnly = false;
+                    break;
+                }
+            }
+            let descriptor;
+            if (request.header.length > 1) {
+                descriptor = imagesOnly ? ' images' : ' files';
+            } else {
+                descriptor = imagesOnly ? ' image' : ' file';
+            }
+            let displayName = $(peerId).querySelector('.name').textContent
+            let title = `${displayName} would like to transfer ${request.header.length} ${descriptor}`;
+            const notification = this._notify(title, 'Click to show');
+        }
+    }
+
     _download(notification) {
-        $('share-or-download').click();
+        $('download-btn').click();
         notification.close();
     }
 
@@ -1394,7 +1565,7 @@ class NetworkStatusUI {
     constructor() {
         Events.on('offline', _ => this._showOfflineMessage());
         Events.on('online', _ => this._showOnlineMessage());
-        Events.on('ws-connected', _ => this._showOnlineMessage());
+        Events.on('ws-connected', _ => this._onWsConnected());
         Events.on('ws-disconnected', _ => this._onWsDisconnected());
         if (!navigator.onLine) this._showOfflineMessage();
     }
@@ -1405,17 +1576,16 @@ class NetworkStatusUI {
     }
 
     _showOnlineMessage() {
-        window.animateBackground(true);
-        if (!this.firstConnect) {
-            this.firstConnect = true;
-            return;
-        }
         Events.fire('notify-user', 'You are back online');
+        window.animateBackground(true);
+    }
+
+    _onWsConnected() {
+        window.animateBackground(true);
     }
 
     _onWsDisconnected() {
         window.animateBackground(false);
-        if (!this.firstConnect) this.firstConnect = true;
     }
 }
 
@@ -1694,6 +1864,23 @@ class PersistentStorage {
     }
 }
 
+class Broadcast {
+    constructor() {
+        this.bc = new BroadcastChannel('pairdrop');
+        this.bc.addEventListener('message', e => this._onMessage(e));
+        Events.on('broadcast-send', e => this._broadcastMessage(e.detail));
+    }
+
+    _broadcastMessage(message) {
+        this.bc.postMessage(message);
+    }
+
+    _onMessage(e) {
+        console.log('Broadcast message received:', e.data)
+        Events.fire(e.data.type, e.data.detail);
+    }
+}
+
 class PairDrop {
     constructor() {
         Events.on('load', _ => {
@@ -1713,6 +1900,7 @@ class PairDrop {
             const webShareTargetUI = new WebShareTargetUI();
             const webFileHandlersUI = new WebFileHandlersUI();
             const noSleepUI = new NoSleepUI();
+            const broadCast = new Broadcast();
         });
     }
 }
@@ -1753,8 +1941,8 @@ Events.on('load', () => {
     let x0, y0, w, h, dw, offset;
 
     function init() {
-        w = window.innerWidth;
+        w = document.documentElement.clientWidth;
-        h = window.innerHeight;
+        h = document.documentElement.clientHeight;
         c.width = w;
         c.height = h;
         offset = $$('footer').offsetHeight - 32;

public_included_ws_fallback/service-worker.js

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

public_included_ws_fallback/styles.css

@@ -23,13 +23,18 @@ body {
 }
 
 body {
-    min-height: 100vh;
+    height: 100%;
     /* mobile viewport bug fix */
-    min-height: -webkit-fill-available;
+    min-height: -moz-available;          /* WebKit-based browsers will ignore this. */
+    min-height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    min-height: fill-available;
 }
 
 html {
-    height: -webkit-fill-available;
+    height: 100%;
+    min-height: -moz-available;          /* WebKit-based browsers will ignore this. */
+    min-height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    min-height: fill-available;
 }
 
 .row-reverse {
@@ -477,6 +482,7 @@ x-peer.ws-peer .highlight-wrapper {
 }
 
 .device-descriptor {
+    width: 100%;
     text-align: center;
 }
 
@@ -559,6 +565,7 @@ footer {
     align-items: center;
     text-align: center;
     transition: color 300ms;
+    cursor: default;
 }
 
 footer .logo {
@@ -583,6 +590,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 {
@@ -590,7 +630,7 @@ x-dialog x-background {
     z-index: 10;
     transition: opacity 300ms;
     will-change: opacity;
-    padding: 35px;
+    padding: 15px;
     overflow: overlay;
 }
 
@@ -601,19 +641,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;
 }
 
 #pair-device-dialog x-paper {
-    position: absolute;
-    top: max(50%, 350px);
-    height: 650px;
-    margin-top: -325px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    position: absolute;
+    top: max(50%, 350px);
+    margin-top: -328.5px;
+    width: calc(100vw - 20px);
+    height: 625px;
 }
 
 x-dialog:not([show]) {
@@ -628,12 +669,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);
@@ -672,7 +707,7 @@ x-dialog .font-subheading {
 }
 
 #key-input-container>input:nth-of-type(4) {
-    margin-left: 18px;
+    margin-left: 5%;
 }
 
 #room-key {
@@ -684,16 +719,11 @@ x-dialog .font-subheading {
 }
 
 #room-key-qr-code {
-    padding: inherit;
+    margin: 16px;
-    margin: auto;
-    width: 150px;
-    height: 150px;
 }
 
 #pair-device-dialog hr {
-    margin-top: 40px;
+    margin: 40px -24px;
-    margin-bottom: 40px;
-    width: 100%;
 }
 
 #pair-device-dialog x-background {
@@ -707,29 +737,24 @@ x-dialog .row {
     margin-bottom: 8px;
 }
 
-x-dialog h2 {
+/* button row*/
-    margin-top: 1rem;
+x-paper > div:last-child {
-}
+    margin: auto -24px -15px;
-
-#receive-request-dialog h2,
-#receive-file-dialog h2 {
-    margin-bottom: 0.5rem;
-}
-
-x-dialog .row-reverse {
-    margin: 40px -24px 0;
     border-top: solid 2.5px var(--border-color);
+    height: 50px;
 }
 
-.separator {
+x-paper > div:last-child > .button {
-    border: solid 1.25px var(--border-color);
+    height: 100%;
-    margin-bottom: -16px;
+    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;
+    margin-bottom: 25px;
-    width: 80%;
-    margin: auto;
 }
 
 .file-description .row {
@@ -741,26 +766,26 @@ x-dialog .row-reverse {
     word-break: normal;
 }
 
-#file-name {
+.file-name {
     font-style: italic;
+    max-width: 100%;
 }
 
-#file-stem {
+.file-stem {
-    max-width: 80%;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
+    white-space: nowrap;
-    max-height: 20px;
-}
-
-.file-size{
-    margin-bottom: 30px;
 }
 
 /* Send Text Dialog */
 
+x-dialog .dialog-subheader {
+    margin-bottom: 25px;
+}
+
 #text-input {
-    min-height: 120px;
+    min-height: 200px;
+    margin: 14px auto;
 }
 
 /* Receive Text Dialog */
@@ -768,14 +793,14 @@ x-dialog .row-reverse {
 #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;
 }
 
 #receive-text-dialog #text a {
@@ -794,17 +819,32 @@ x-dialog .row-reverse {
 
 .row-separator {
     border-bottom: solid 2.5px var(--border-color);
-    margin: auto -25px;
+    margin: auto -24px;
 }
 
-#receive-text-description-container {
+#base64-paste-btn,
-    margin-bottom: 25px;
+#base64-paste-dialog .textarea {
-}
-
-#base64-paste-btn {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
+    text-align: center;
+}
+
+#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 {
@@ -826,7 +866,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;
@@ -837,6 +876,7 @@ x-dialog .row-reverse {
     user-select: none;
     background: inherit;
     color: var(--primary-color);
+    overflow: hidden;
 }
 
 .button[disabled] {
@@ -874,7 +914,7 @@ x-dialog .row-reverse {
     opacity: 0.1;
 }
 
-#cancel-paste-mode-btn {
+#cancel-paste-mode {
     z-index: 2;
     margin: 0;
     padding: 0;
@@ -901,7 +941,6 @@ button::-moz-focus-inner {
 
 
 /* Icon Button */
-
 .icon-button {
     width: 40px;
     height: 40px;
@@ -911,10 +950,7 @@ button::-moz-focus-inner {
     border-radius: 50%;
 }
 
-
-
 /* Text Input */
-
 .textarea {
     box-sizing: border-box;
     border: none;
@@ -928,9 +964,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;
 }
 
@@ -989,6 +1024,13 @@ button::-moz-focus-inner {
     margin: 8px 8px -16px;
 }
 
+#about section {
+    flex-grow: 1;
+}
+
+#about header {
+    align-self: end;
+}
 
 /* Loading Indicator */
 
@@ -1038,11 +1080,11 @@ button::-moz-focus-inner {
 x-toast {
     position: absolute;
     min-height: 48px;
-    bottom: 24px;
+    top: 50px;
     width: 100%;
     max-width: 344px;
-    background-color: #323232;
+    background-color: rgb(var(--text-color));
-    color: rgba(255, 255, 255, 0.95);
+    color: rgb(var(--bg-color));
     align-items: center;
     box-sizing: border-box;
     padding: 8px 24px;
@@ -1056,7 +1098,7 @@ x-toast {
 
 x-toast:not([show]):not(:hover) {
     opacity: 0;
-    transform: translateY(100px);
+    transform: translateY(-100px);
 }
 
 
@@ -1120,6 +1162,14 @@ x-peers:empty~x-instructions {
 }
 
 /* Responsive Styles */
+@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) {
     #websocket-fallback {
@@ -1192,7 +1242,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;

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"
+    }
+  ]
+}