increase version to v1.6.1

fix header btn shadow styling
include example files to run an own TURN server via coturn or via docker-compose
2026-04-06 09:53:49 +00:00 · 2023-04-19 21:16:43 +02:00 · 2023-04-19 21:15:03 +02:00 · 2023-04-19 17:38:14 +02:00 · 2023-04-19 16:50:22 +02:00 · 2023-04-18 13:06:21 +02:00
31 changed files with 1850 additions and 668 deletions
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -1,6 +1,6 @@
 ---
 name: Bug Report
-about: Create a report to help us improve
+about: Create a report to help us improve. Please check the FAQ first.
 title: 'Bug:/Enhancement:/Feature Request: '
 labels: ''
 assignees: ''
--- a/.github/workflows/github-image.yml
+++ b/.github/workflows/github-image.yml
@@ -28,6 +28,12 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
+        
+      - name: Setup qemu
+        uses: docker/setup-qemu-action@v2.1.0
+
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0

      - name: Log in to the Container registry
        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
@@ -46,6 +52,7 @@ jobs:
        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
        with:
          context: .
+          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
--- a/3
+++ b/3
@@ -9,3 +9,6 @@ RUN npm ci
 COPY . .

 EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD wget --quiet --tries=1 --spider http://localhost:3000 || exit 1
--- a/README.md
+++ b/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 />
@@ -33,18 +33,18 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)

 ## Differences to Snapdrop

-### Device Pairing
+### Device Pairing / Internet Transfer
 * Pair devices via 6-digit code or QR-Code
 * Pair devices outside your local network or in complex network environment (public Wi-Fi, company network, Apple Private Relay, VPN etc.).
 * Connect to devices on your mobile hotspot.
 * Paired devices will always find each other via shared secrets even after reopening the browser or the Progressive Web App
 * You will always discover devices on your local network. Paired devices are shown additionally.
-* 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/)
+* Paired devices outside your local network that are behind a NAT are connected automatically via the PairDrop TURN server.

 ### [Improved UI for sending/receiving files](https://github.com/RobinLinus/snapdrop/issues/560)
-* Files are transferred only after a request is accepted first. On transfer completion they are downloaded automatically if possible.
-* Multiple files are downloaded as ZIP file
-* On iOS and Android the devices share menu is opened instead of downloading the files
+* Files are transferred only after a request is accepted first. On transfer completion files are downloaded automatically if possible.
+* Multiple files are downloaded as a ZIP file
+* On iOS and Android, in addition to downloading, files can be shared or saved to the gallery via the Share menu.
 * Multiple files are transferred at once with an overall progress indicator

 ### Send Files or Text Directly From Share Menu, Context Menu or CLI
@@ -54,11 +54,13 @@ 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  
+* Warn user before PairDrop is closed on file transfer
 * Open PairDrop on multiple tabs simultaneously (Thanks [@willstott101](https://github.com/willstott101))
 * [Video and Audio preview](https://github.com/RobinLinus/snapdrop/pull/455) (Thanks [@victorwads](https://github.com/victorwads))
+* Switch theme back to auto/system after darkmode or lightmode is enabled
 * Node-only implementation (Thanks [@Bellisario](https://github.com/Bellisario))
 * 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))
@@ -79,6 +81,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).

@@ -86,9 +89,9 @@ You can [host your own instance with Docker](/docs/host-your-own.md).


 ## Support the Community
-PairDrop is free and always will be. Still, we have to pay for the domain.
+PairDrop is free and always will be. Still, we have to pay for the domain and the server.

-To contribute and support me:<br>
+To contribute and support:<br>
 <a href="https://www.buymeacoffee.com/pairdrop" target="_blank">
 <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
 </a>
--- a/docker-compose-coturn.yml
+++ b/docker-compose-coturn.yml
@@ -0,0 +1,19 @@
+version: "3"
+services:
+  node:
+    image: "node:lts-alpine"
+    user: "node"
+    working_dir: /home/node/app
+    volumes:
+      - ./:/home/node/app
+    command: ash -c "npm i && npm run start:prod"
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+  coturn_server:
+    image: "coturn/coturn"
+    restart: always
+    network_mode: "host"
+    volumes:
+      - ./turnserver.conf:/etc/coturn/turnserver.conf
+    #you need to copy turnserver_example.conf to turnserver.conf and specify domain, IP address, user and password
--- a/docs/docker-swarm-usage.md
+++ b/docs/docker-swarm-usage.md
@@ -0,0 +1,43 @@
+# Docker Swarm Usage
+
+## Healthcheck
+
+The [Docker Image](../Dockerfile) includes a Healthcheck with the following options:
+
+```
+--interval=30s
+```
+> Specifies the time interval at which the health check should be performed. In this case, the health check will be performed every 30 seconds.
+
+<br>
+
+```
+--timeout=10s
+```
+> Specifies the amount of time to wait for a response from the health check command. If the response does not arrive within 10 seconds, the health check will be considered a failure.
+
+<br>
+
+```
+--start-period=5s
+```
+> Specifies the amount of time to wait before starting the health check process. In this case, the health check process will begin 5 seconds after the container is started.
+
+<br>
+
+```
+--retries=3
+```
+> Specifies the number of times Docker should retry the health check before considering the container to be unhealthy.
+
+<br>
+
+
+The CMD instruction is used to define the command that will be run as part of the health check. 
+In this case, the command is `wget --quiet --tries=1 --spider http://localhost:3000/ || exit 1`. This command will attempt to connect to `http://localhost:3000/` 
+and if it fails it will exit with a status code of `1`. If this command returns a status code other than `0`, the health check will be considered a failure.
+
+Overall, this HEALTHCHECK instruction is defining a health check process that will run every 30 seconds, wait up to 10 seconds for a response, 
+begin 5 seconds after the container is started, and retry up to 3 times. 
+The health check will consist of attempting to connect to http://localhost:3000/ and will consider the container to be unhealthy if it is unable to connect.
+
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -1,31 +1,48 @@
 # Frequently Asked Questions

-### Instructions / Discussions
-* [Video Instructions](https://www.youtube.com/watch?v=4XN02GkcHUM) (Big thanks to [TheiTeckHq](https://www.youtube.com/channel/UC_DUzWMb8gZZnAbISQjmAfQ))
-* [idownloadblog](http://www.idownloadblog.com/2015/12/29/snapdrop/)
-* [thenextweb](http://thenextweb.com/insider/2015/12/27/snapdrop-is-a-handy-web-based-replacement-for-apples-fiddly-airdrop-file-transfer-tool/)
-* [winboard](http://www.winboard.org/artikel-ratgeber/6253-dateien-vom-desktop-pc-mit-anderen-plattformen-teilen-mit-snapdrop.html)
-* [免費資源網路社群](https://free.com.tw/snapdrop/)
-* [Hackernews](https://news.ycombinator.com/front?day=2020-12-24)
-* [Reddit](https://www.reddit.com/r/Android/comments/et4qny/snapdrop_is_a_free_open_source_cross_platform/)
-* [Producthunt](https://www.producthunt.com/posts/snapdrop)
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Help! I can't install the PWA!
+</summary>

-### Help! I can't install the PWA!
 if you are using a Chromium-based browser (Chrome, Edge, Brave, etc.), you can easily install PairDrop PWA on your desktop 
 by clicking the install-button in the top-right corner while on [pairdrop.net](https://pairdrop.net).

-<img src="pwa-install.png" alt="Example on how to install a pwa with Edge">
+<img width="400" src="pwa-install.png" alt="Example on how to install a pwa with Edge">

 On Firefox, PWAs are installable via [this browser extensions](https://addons.mozilla.org/de/firefox/addon/pwas-for-firefox/)

-### Are there any shortcuts?
-Sure!
+<br>
+
+<b>Self-Hosted Instance?</b>
+
+To be able to install the PWA from a self-hosted instance, the connection needs to be [established through HTTPS](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs).
+See [this host your own section](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#testing-pwa-related-features) for more information. 
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Shortcuts?
+</summary>
+
+Shortcuts!
 - Send a message with `CTRL + ENTER`
 - Close all send and pair dialogs by pressing `Escape`.
 - Copy a received message to clipboard with `CTRL/⌘ + C`.
 - Accept file transfer request with `Enter` and decline with `Escape`.

-### When I receive images on iOS I cannot add them directly to the gallery?
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    How to save images directly to the gallery on iOS?
+</summary>
+
 Apparently, iOS does not allow images shared from a website to be saved to the gallery directly.
 It simply does not offer the option for images shared from a website.

@@ -33,33 +50,108 @@ iOS Shortcuts to the win:
 I created a simple iOS shortcut that takes your photos and saves them to your gallery:
 https://routinehub.co/shortcut/13988/

-### Is it possible to send files or text directly from the context or share menu?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Is it possible to send files or text directly from the context or share menu?
+</summary>
+
 Yes, it finally is!
 * [Send files directly from context menu on Windows](/docs/how-to.md#send-files-directly-from-context-menu-on-windows)
 * [Send directly from share menu on iOS](/docs/how-to.md#send-directly-from-share-menu-on-ios)
 * [Send directly from share menu on Android](/docs/how-to.md#send-directly-from-share-menu-on-android)

-### Is it possible to send files or text directly via CLI?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Is it possible to send files or text directly via CLI?
+</summary>
+
 Yes, it is!

 * [Send directly from command-line interface](/docs/how-to.md#send-directly-via-command-line-interface)
-### What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
-It uses a P2P connection if WebRTC is supported by the browser. WebRTC needs a Signaling Server, but it is only used to establish a connection and is not involved in the file transfer.

-If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.

-### What about privacy? Will files be saved on third-party-servers?
-None of your files are ever sent to any server. Files are sent only between peers. PairDrop doesn't even use a database. If you are curious have a look [at the Server](https://github.com/schlagmichdoch/pairdrop/blob/master/index.js).
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Are there any Third-Party Apps?
+</summary>
+
+Here's a list of some third-party apps compatible with PairDrop:
+
+1. [Snapdrop Android App](https://github.com/fm-sys/snapdrop-android)
+2. [Snapdrop for Firefox (Addon)](https://github.com/ueen/SnapdropFirefoxAddon)
+3. Feel free to make one :)
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
+</summary>
+
+It uses a WebRTC peer to peer connection. WebRTC needs a Signaling Server that is only used to establish a connection. The server is not involved in the file transfer.
+
+If devices are on the same network, none of your files are ever sent to any server.
+
+If your devices are paired and behind a NAT, the PairDrop TURN Server is used to route your files and messages. See the [Technical Documentation](technical-documentation.md#encryption-webrtc-stun-and-turn) to learn more about STUN, TURN and WebRTC.
+
+If you host your own instance and want to support devices that do not support WebRTC, you can [start the PairDrop instance with an activated Websocket fallback](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#websocket-fallback-for-vpn).
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    What about privacy? Will files be saved on third-party-servers?
+</summary>
+
+Files are sent directly between peers. PairDrop doesn't even use a database. If you are curious, have a look [at the Server](https://github.com/schlagmichdoch/pairdrop/blob/master/index.js).
 WebRTC encrypts the files on transit.

-If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.
+If devices are on the same network, none of your files are ever sent to any server.
+
+If your devices are paired and behind a NAT, the PairDrop TURN Server is used to route your files and messages. See the [Technical Documentation](technical-documentation.md#encryption-webrtc-stun-and-turn) to learn more about STUN, TURN and WebRTC.
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    What about security? Are my files encrypted while being sent between the computers?
+</summary>

-### What about security? Are my files encrypted while being sent between the computers?
 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.
-As a workaround you can open a hotspot on one of your devices to bridge the connection which makes transfers much faster.
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Transferring many files with paired devices takes too long
+</summary>
+
+Naturally, if traffic needs to be routed through the turn server because your devices are behind different NATs, transfer speed decreases.
+
+You can open a hotspot on one of your devices to bridge the connection which omits the need of the TURN server.

 - [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)
@@ -68,22 +160,52 @@ As a workaround you can open a hotspot on one of your devices to bridge the conn
 You can also use mobile hotspots on phones to do that. 
 Then, all data should be sent directly between devices and your data plan should not be charged.

-### Why don't you implement feature xyz?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Why don't you implement feature xyz?
+</summary>
+
 Snapdrop and PairDrop are a study in radical simplicity. The user interface is insanely simple. Features are chosen very carefully because complexity grows quadratically since every feature potentially interferes with each other feature. We focus very narrowly on a single use case: instant file transfer. 
 We are not trying to optimize for some edge-cases. We are optimizing the user flow of the average users. Don't be sad if we decline your feature request for the sake of simplicity. 

-If you want to learn more about simplicity you can read [Insanely Simple: The Obsession that Drives Apple's Success](https://www.amazon.com/Insanely-Simple-Ken-Segall-audiobook/dp/B007Z9686O) or [Thinking, Fast and Slow](https://www.amazon.com/Thinking-Fast-Slow-Daniel-Kahneman/dp/0374533555).
+If you want to learn more about simplicity you can read *Insanely Simple: The Obsession that Drives Apple's Success* or *Thinking, Fast and Slow*.


-### Snapdrop and PairDrop are awesome! How can I support them? 
-* [Buy me a cover to support open source software](https://www.buymeacoffee.com/pairdrop)
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Snapdrop and PairDrop are awesome! How can I support them? 
+</summary>
+
+* [Buy me a coffee](https://www.buymeacoffee.com/pairdrop) to pay for the domain and the server, and support open source software
 * [File bugs, give feedback, submit suggestions](https://github.com/schlagmichdoch/pairdrop/issues)
 * Share PairDrop on social media.
 * Fix bugs and make a pull request. 
 * Do security analysis and suggestions
+* To support the original Snapdrop and its creator go to [his GitHub page](https://github.com/RobinLinus/snapdrop)


-### How does it work?
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    How does it work?
+</summary>
+
 [See here for Information about the Technical Implementation](/docs/technical-documentation.md)

+<br>
+
+</details>
+
 [< Back](/README.md)
--- a/docs/host-your-own.md
+++ b/docs/host-your-own.md
@@ -1,6 +1,12 @@
 # Deployment Notes
 The easiest way to get PairDrop up and running is by using Docker.

+> <b>TURN server for Internet Transfer</b>
+> 
+> Beware that you have to host your own TURN server in order to enable transfers between different networks.
+>
+> You can follow [this guide](https://gabrieltanner.org/blog/turn-server/) to either install coturn directly on your system (Step 1) or deploy it via docker-compose (Step 5).
+
 ## Deployment with Docker

 ### Docker Image from Docker Hub
@@ -50,6 +56,8 @@ Set options by using the following flags in the `docker run` command:
 > 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.
 >
+> To host your own TURN server you can follow this guide: https://gabrieltanner.org/blog/turn-server/
+>
 > Default configuration:
 > ```json
 > {
@@ -57,14 +65,6 @@ Set options by using the following flags in the `docker run` command:
 >   "iceServers": [
 >     {
 >       "urls": "stun:stun.l.google.com:19302"
->     },
->     {
->       "urls": "stun:openrelay.metered.ca:80"
->     },
->     {
->       "urls": "turn:openrelay.metered.ca:443",
->       "username": "openrelayproject",
->       "credential": "openrelayproject"
 >     }
 >   ]
 > }
@@ -82,6 +82,8 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 gh
 >
 > To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)

+> The Docker Image includes a Healthcheck. To learn more see [Docker Swarm Usage](./docker-swarm-usage.md#docker-swarm-usage)
+
 ### Docker Image self-built
 #### Build the image
 ```bash
@@ -101,6 +103,8 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 -i
 >
 > To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)

+> The Docker Image includes a Healthcheck. To learn more see [Docker Swarm Usage](./docker-swarm-usage.md#docker-swarm-usage)
+
 <br>

 ## Deployment with Docker Compose
@@ -182,6 +186,8 @@ $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.
+> 
+> To host your own TURN server you can follow this guide: https://gabrieltanner.org/blog/turn-server/ 
 >
 > Default configuration:
 > ```json
@@ -190,14 +196,6 @@ $env:RTC_CONFIG="rtc_config.json"; npm start
 >   "iceServers": [
 >     {
 >       "urls": "stun:stun.l.google.com:19302"
->     },
->     {
->       "urls": "stun:openrelay.metered.ca:80"
->     },
->     {
->       "urls": "turn:openrelay.metered.ca:443",
->       "username": "openrelayproject",
->       "credential": "openrelayproject"
 >     }
 >   ]
 > }
--- a/docs/how-to.md
+++ b/docs/how-to.md
@@ -33,10 +33,10 @@ https://routinehub.co/shortcut/13990/


 ## Send directly from share menu on Android
-The [Web Share Target API](https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target) is implemented but not yet tested.
-When the PWA is installed, it should register itself to the share-menu of the device automatically.
+The [Web Share Target API](https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target) is implemented.
+
+When the PWA is installed, it will register itself to the share-menu of the device automatically.

-This feature is still under development. Please test this feature and create an issue if it does not work.

 ## Send directly via command-line interface
 Send files or text with PairDrop via command-line interface.
--- a/index.js
+++ b/index.js
@@ -3,6 +3,11 @@ 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', () => {
@@ -52,28 +57,16 @@ if (process.argv.includes('--auto-restart')) {
 }

 const rtcConfig = process.env.RTC_CONFIG
-    ? fs.readFileSync(process.env.RTC_CONFIG, 'utf8')
+    ? JSON.parse(fs.readFileSync(process.env.RTC_CONFIG, 'utf8'))
    : {
        "sdpSemantics": "unified-plan",
        "iceServers": [
            {
                "urls": "stun:stun.l.google.com:19302"
-            },
-            {
-                "urls": "stun:openrelay.metered.ca:80"
-            },
-            {
-                "urls": "turn:openrelay.metered.ca:443",
-                "username": "openrelayproject",
-                "credential": "openrelayproject"
            }
        ]
    };

-const express = require('express');
-const RateLimit = require('express-rate-limit');
-const http = require('http');
-
 const app = express();

 if (process.argv.includes('--rate-limit')) {
@@ -114,9 +107,6 @@ 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() {
@@ -145,7 +135,8 @@ class PairDropServer {
            message: {
                displayName: peer.name.displayName,
                deviceName: peer.name.deviceName,
-                peerId: peer.id
+                peerId: peer.id,
+                peerIdHash: peer.id.hashCode128BitSalted()
            }
        });
    }
@@ -369,6 +360,10 @@ class PairDropServer {
        // delete the peer
        delete this._rooms[room][peer.id];

+        if (roomType === 'ip') {
+            peer.socket.terminate();
+        }
+
        //if room is empty, delete the room
        if (!Object.keys(this._rooms[room]).length) {
            delete this._rooms[room];
@@ -550,9 +545,11 @@ class Peer {
    }

    _setPeerId(request) {
-        let peer_id = new URL(request.url, "http://server").searchParams.get("peer_id");
-        if (peer_id && Peer.isValidUuid(peer_id)) {
-            this.id = peer_id;
+        const searchParams = new URL(request.url, "http://server").searchParams;
+        let peerId = searchParams.get("peer_id");
+        let peerIdHash = searchParams.get("peer_id_hash");
+        if (peerId && Peer.isValidUuid(peerId) && this.isPeerIdHashValid(peerId, peerIdHash)) {
+            this.id = peerId;
        } else {
            this.id = crypto.randomUUID();
        }
@@ -611,6 +608,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);
@@ -626,14 +627,55 @@ class Peer {

 Object.defineProperty(String.prototype, 'hashCode', {
    value: function() {
-        var hash = 0, i, chr;
-        for (i = 0; i < this.length; i++) {
-            chr   = this.charCodeAt(i);
-            hash  = ((hash << 5) - hash) + chr;
-            hash |= 0; // Convert to 32bit integer
-        }
-        return hash;
+        return cyrb53(this);
    }
 });

+Object.defineProperty(String.prototype, 'hashCode128BitSalted', {
+    value: function() {
+        return hasher.hashCode128BitSalted(this);
+    }
+});
+
+const hasher = (() => {
+    let seeds;
+    return {
+        hashCode128BitSalted(str) {
+            if (!seeds) {
+                // seeds are created on first call to salt hash.
+                seeds = [4];
+                for (let i=0; i<4; i++) {
+                    const randomBuffer = new Uint32Array(1);
+                    crypto.webcrypto.getRandomValues(randomBuffer);
+                    seeds[i] = randomBuffer[0];
+                }
+            }
+            let hashCode = "";
+            for (let i=0; i<4; i++) {
+                hashCode += cyrb53(str, seeds[i]);
+            }
+            return hashCode;
+        }
+    }
+
+})()
+
+/*
+    cyrb53 (c) 2018 bryc (github.com/bryc)
+    A fast and simple hash function with decent collision resistance.
+    Largely inspired by MurmurHash2/3, but with a focus on speed/simplicity.
+    Public domain. Attribution appreciated.
+*/
+const cyrb53 = function(str, seed = 0) {
+    let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
+    for (let i = 0, ch; i < str.length; i++) {
+        ch = str.charCodeAt(i);
+        h1 = Math.imul(h1 ^ ch, 2654435761);
+        h2 = Math.imul(h2 ^ ch, 1597334677);
+    }
+    h1 = Math.imul(h1 ^ (h1>>>16), 2246822507) ^ Math.imul(h2 ^ (h2>>>13), 3266489909);
+    h2 = Math.imul(h2 ^ (h2>>>16), 2246822507) ^ Math.imul(h1 ^ (h1>>>13), 3266489909);
+    return 4294967296 * (2097151 & h2) + (h1>>>0);
+};
+
 new PairDropServer();
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,19 @@
 {
  "name": "pairdrop",
-  "version": "1.3.0",
+  "version": "1.6.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "pairdrop",
-      "version": "1.3.0",
+      "version": "1.6.1",
      "license": "ISC",
      "dependencies": {
        "express": "^4.18.2",
        "express-rate-limit": "^6.7.0",
-        "ua-parser-js": "^1.0.33",
+        "ua-parser-js": "^1.0.35",
        "unique-names-generator": "^4.3.0",
-        "ws": "^8.12.1"
+        "ws": "^8.13.0"
      },
      "engines": {
        "node": ">=15"
@@ -583,9 +583,9 @@
      }
    },
    "node_modules/ua-parser-js": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ==",
+      "version": "1.0.35",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
+      "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==",
      "funding": [
        {
          "type": "opencollective",
@@ -633,9 +633,9 @@
      }
    },
    "node_modules/ws": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.1.tgz",
-      "integrity": "sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
      "engines": {
        "node": ">=10.0.0"
      },
@@ -1070,9 +1070,9 @@
      }
    },
    "ua-parser-js": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ=="
+      "version": "1.0.35",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
+      "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA=="
    },
    "unique-names-generator": {
      "version": "4.7.1",
@@ -1095,9 +1095,9 @@
      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
    },
    "ws": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.1.tgz",
-      "integrity": "sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
      "requires": {}
    }
  }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "pairdrop",
-  "version": "1.3.0",
+  "version": "1.6.1",
  "description": "",
  "main": "index.js",
  "scripts": {
@@ -12,9 +12,9 @@
  "dependencies": {
    "express": "^4.18.2",
    "express-rate-limit": "^6.7.0",
-    "ua-parser-js": "^1.0.33",
+    "ua-parser-js": "^1.0.35",
    "unique-names-generator": "^4.3.0",
-    "ws": "^8.12.1"
+    "ws": "^8.13.0"
  },
  "engines": {
    "node": ">=15"
--- a/pairdrop-cli/pairdrop
+++ b/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
--- a/public/index.html
+++ b/public/index.html
@@ -44,32 +44,46 @@
                <use xlink:href="#info-outline" />
            </svg>
        </a>
-        <a id="theme" class="icon-button" title="Switch Darkmode/Lightmode" >
-            <svg class="icon">
-                <use xlink:href="#icon-theme" />
-            </svg>
-        </a>
-        <a id="notification" class="icon-button" title="Enable Notifications" hidden>
+        <div id="theme-wrapper">
+            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+                <svg class="icon">
+                    <use xlink:href="#icon-theme-auto" />
+                </svg>
+            </div>
+            <div>
+                <div id="theme-light" class="icon-button" title="Always Light" >
+                    <svg class="icon">
+                        <use xlink:href="#icon-theme-light" />
+                    </svg>
+                </div>
+                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                    <svg class="icon">
+                        <use xlink:href="#icon-theme-dark" />
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div id="notification" class="icon-button" title="Enable Notifications" hidden>
            <svg class="icon">
                <use xlink:href="#notifications" />
            </svg>
-        </a>
-        <a id="install" class="icon-button" title="Install PairDrop" hidden>
+        </div>
+        <div id="install" class="icon-button" title="Install PairDrop" hidden>
            <svg class="icon">
                <use xlink:href="#homescreen" />
            </svg>
-        </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" >
+        </div>
+        <div id="pair-device" class="icon-button" title="Pair Device" hidden>
            <svg class="icon">
                <use xlink:href="#pair-device-icon" />
            </svg>
-        </a>
-        <a id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
+        </div>
+        <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
            <svg class="icon">
                <use xlink:href="#clear-pair-devices-icon" />
            </svg>
-        </a>
-        <a id="cancel-paste-mode" class="button" hidden>Done</a>
+        </div>
+        <div id="cancel-paste-mode" class="button" hidden>Done</div>
    </header>
    <!-- Center -->
    <div id="center">
@@ -89,7 +103,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,17 +126,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 type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-6" 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="center row-reverse">
                        <button class="button" type="submit" disabled>Pair</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                    </div>
                </x-paper>
            </x-background>
@@ -131,7 +151,7 @@
                    <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
                    <div class="center row-reverse">
                        <button class="button" type="submit">Unpair Devices</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                    </div>
                </x-paper>
            </x-background>
@@ -200,10 +220,10 @@
                        <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 id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                    <div class="center row-reverse">
                        <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <button class="button" title="ESCAPE" close>Cancel</button>
+                        <button class="button" type="button" title="ESCAPE" close>Cancel</button>
                    </div>
                </x-paper>
            </x-background>
@@ -232,6 +252,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>
@@ -321,7 +342,13 @@
            <path d="M0 0h24v24H0z" fill="none" />
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z" />
        </symbol>
-        <symbol id="icon-theme" viewBox="0 0 24 24">
+        <symbol id="icon-theme-auto" viewBox="0 0 24 24">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-54 -54 620 620"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>
+        </symbol>
+        <symbol id="icon-theme-light" viewBox="0 0 24 24">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-54 -54 620 620"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
+        </symbol>
+        <symbol id="icon-theme-dark" viewBox="0 0 24 24">
         <rect fill="none" height="24" width="24"/><path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/>
        </symbol>
        <symbol id="pair-device-icon" viewBox="0 0 640 512">
@@ -332,13 +359,17 @@
            <!--! 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>
+    <script src="scripts/theme.js"></script>
    <script src="scripts/network.js"></script>
    <script src="scripts/ui.js"></script>
-    <script src="scripts/theme.js" async></script>
-    <script src="scripts/qrcode.js" async></script>
+    <script src="scripts/util.js" async></script>
+    <script src="scripts/QRCode.min.js" async></script>
    <script src="scripts/zip.min.js" async></script>
    <script src="scripts/NoSleep.min.js" async></script>
    <!-- Sounds -->
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
--- a/public/scripts/QRCode.min.js
+++ b/public/scripts/QRCode.min.js
--- a/public/scripts/network.js
+++ b/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);
@@ -53,7 +53,7 @@ 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 })
@@ -118,34 +118,24 @@ class ServerConnection {

    _onDisplayName(msg) {
        sessionStorage.setItem("peerId", msg.message.peerId);
-        PersistentStorage.get('peerId').then(peerId => {
-            if (!peerId) {
-                // save peerId to indexedDB to retrieve after PWA is installed
-                PersistentStorage.set('peerId', msg.message.peerId).then(peerId => {
-                    console.log(`peerId saved to indexedDB: ${peerId}`);
-                });
-            }
-        }).catch(_ => _ => PersistentStorage.logBrowserNotCapable())
+        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
        Events.fire('display-name', msg);
    }

-    async _endpoint() {
+    _endpoint() {
        // hack to detect if deployment or development environment
        const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws';
        const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback';
        let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc);
-        const peerId = await this._peerId();
-        if (peerId) ws_url.searchParams.append('peer_id', peerId)
+        const peerId = sessionStorage.getItem("peerId");
+        const peerIdHash = sessionStorage.getItem("peerIdHash");
+        if (peerId && peerIdHash) {
+            ws_url.searchParams.append('peer_id', peerId);
+            ws_url.searchParams.append('peer_id_hash', peerIdHash);
+        }
        return ws_url.toString();
    }

-    async _peerId() {
-        // make peerId persistent when pwa is installed
-        return window.matchMedia('(display-mode: minimal-ui)').matches
-            ? await PersistentStorage.get('peerId')
-            : sessionStorage.getItem("peerId");
-    }
-
    _disconnect() {
        this.send({ type: 'disconnect' });
        if (this._socket) {
@@ -161,7 +151,7 @@ class ServerConnection {
        console.log('WS: server disconnected');
        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;
    }
@@ -204,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,
@@ -335,7 +329,7 @@ class Peer {
                this._onFilesTransferRequest(messageJSON);
                break;
            case 'header':
-                this._onFilesHeader(messageJSON);
+                this._onFileHeader(messageJSON);
                break;
            case 'partition':
                this._onReceivedPartitionEnd(messageJSON);
@@ -358,6 +352,9 @@ class Peer {
            case 'text':
                this._onTextReceived(messageJSON);
                break;
+            case 'display-name-changed':
+                this._onDisplayNameChanged(messageJSON);
+                break;
        }
    }

@@ -392,8 +389,8 @@ class Peer {
        this._requestPending = null;
    }

-    _onFilesHeader(header) {
-        if (this._requestAccepted?.header.length) {
+    _onFileHeader(header) {
+        if (this._requestAccepted && this._requestAccepted.header.length) {
            this._lastProgress = 0;
            this._digester = new FileDigester({size: header.size, name: header.name, mime: header.mime},
                this._requestAccepted.totalSize,
@@ -446,6 +443,9 @@ class Peer {
            this._abortTransfer();
        }

+        // include for compatibility with Snapdrop for Android app
+        Events.fire('file-received', fileBlob);
+
        this._filesReceived.push(fileBlob);
        if (!this._requestAccepted.header.length) {
            this._busy = false;
@@ -495,6 +495,12 @@ 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 {
@@ -521,6 +527,7 @@ class RTCPeer extends Peer {
        this._peerId = peerId;
        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 +575,14 @@ 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) {
@@ -618,10 +625,16 @@ class RTCPeer extends Peer {
        }
    }

-    _closeChannel() {
-        if (this._channel) this._channel.onclose = null;
-        if (this._conn) this._conn.close();
-        this._conn = null;
+    _onPageHide() {
+        this._disconnect();
+    }
+
+    _disconnect() {
+        if (this._conn && this._channel) {
+            this._channel.onclose = null;
+            this._channel.close();
+        }
+        Events.fire('peer-disconnected', this._peerId);
    }

    _onChannelClosed() {
@@ -635,9 +648,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;
        }
@@ -683,6 +698,11 @@ class RTCPeer extends Peer {
    _isConnecting() {
        return this._channel && this._channel.readyState === 'connecting';
    }
+
+    sendDisplayName(displayName) {
+        if (!this._isConnected()) return;
+        super.sendDisplayName(displayName);
+    }
 }

 class PeersManager {
@@ -696,8 +716,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) {
@@ -721,10 +745,6 @@ class PeersManager {
        })
    }

-    sendTo(peerId, message) {
-        this.peers[peerId].send(message);
-    }
-
    _onRespondToFileTransferRequest(detail) {
        this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
    }
@@ -756,6 +776,10 @@ class PeersManager {
        }
    }

+    _onPeerConnected(peerId) {
+        this._notifyPeerDisplayNameChanged(peerId);
+    }
+
    _onPeerDisconnected(peerId) {
        const peer = this.peers[peerId];
        delete this.peers[peerId];
@@ -773,6 +797,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 {
@@ -861,11 +902,11 @@ class Events {
        window.dispatchEvent(new CustomEvent(type, { detail: detail }));
    }

-    static on(type, callback) {
-        return window.addEventListener(type, callback, false);
+    static on(type, callback, options = false) {
+        return window.addEventListener(type, callback, options);
    }

-    static off(type, callback) {
-        return window.removeEventListener(type, callback, false);
+    static off(type, callback, options = false) {
+        return window.removeEventListener(type, callback, options);
    }
 }
--- a/public/scripts/theme.js
+++ b/public/scripts/theme.js
@@ -1,39 +1,78 @@
 (function(){

-  // Select the button
-  const btnTheme = document.getElementById('theme');
-  // Check for dark mode preference at the OS level
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-   
-  // Get the user's theme preference from local storage, if it's available
-  const currentTheme = localStorage.getItem('theme');
-  // If the user's preference in localStorage is dark...
+  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+  const $themeAuto = document.getElementById('theme-auto');
+  const $themeLight = document.getElementById('theme-light');
+  const $themeDark = document.getElementById('theme-dark');
+
+  let currentTheme = localStorage.getItem('theme');
+
  if (currentTheme === 'dark') {
-    // ...let's toggle the .dark-theme class on the body
-    document.body.classList.toggle('dark-theme');
-  // Otherwise, if the user's preference in localStorage is light...
+    setModeToDark();
  } else if (currentTheme === 'light') {
-    // ...let's toggle the .light-theme class on the body
-    document.body.classList.toggle('light-theme');
+    setModeToLight();
  }
-   
-  // Listen for a click on the button
-  btnTheme.addEventListener('click', function(e) {
-    e.preventDefault();
-    // If the user's OS setting is dark and matches our .dark-theme class...
-    let theme;
-    if (prefersDarkScheme.matches) {
-      // ...then toggle the light mode class
-      document.body.classList.toggle('light-theme');
-      // ...but use .dark-theme if the .light-theme class is already on the body,
-      theme = document.body.classList.contains('light-theme') ? 'light' : 'dark';
+
+  $themeAuto.addEventListener('click', _ => {
+    if (currentTheme) {
+      setModeToAuto();
    } else {
-      // Otherwise, let's do the same thing, but for .dark-theme
-      document.body.classList.toggle('dark-theme');
-      theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
+      setModeToDark();
+    }
+  });
+  $themeLight.addEventListener('click', _ => {
+    if (currentTheme !== 'light') {
+      setModeToLight();
+    } else {
+      setModeToAuto();
+    }
+  });
+  $themeDark.addEventListener('click', _ => {
+    if (currentTheme !== 'dark') {
+      setModeToDark();
+    } else {
+      setModeToLight();
    }
-    // Finally, let's save the current preference to localStorage to keep using it
-    localStorage.setItem('theme', theme);
  });

+  function setModeToDark() {
+    document.body.classList.remove('light-theme');
+    document.body.classList.add('dark-theme');
+    localStorage.setItem('theme', 'dark');
+    currentTheme = 'dark';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.add("selected");
+  }
+
+  function setModeToLight() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.add('light-theme');
+    localStorage.setItem('theme', 'light');
+    currentTheme = 'light';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.add("selected");
+    $themeDark.classList.remove("selected");
+  }
+
+  function setModeToAuto() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.remove('light-theme');
+    if (prefersDarkTheme) {
+      document.body.classList.add('dark-theme');
+    } else if (prefersLightTheme) {
+      document.body.classList.add('light-theme');
+    }
+    localStorage.removeItem('theme');
+    currentTheme = undefined;
+
+    $themeAuto.classList.add("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.remove("selected");
+  }
+
 })();
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -9,9 +9,8 @@ window.pasteMode.activated = false;
 // set display name
 Events.on('display-name', e => {
    const me = e.detail.message;
-    const $displayName = $('display-name')
-    $displayName.textContent = 'You are known as ' + me.displayName;
-    $displayName.title = me.deviceName;
+    const $displayName = $('display-name');
+    $displayName.setAttribute('placeholder', me.displayName);
 });

 class PeersUI {
@@ -43,6 +42,87 @@ 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 => {
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
+                .catch(_ => {
+                    let displayName = localStorage.getItem('editedDisplayName');
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
+        });
+    }
+
+    _changePeerDisplayName(peerId, displayName) {
+        this.peers[peerId].name.displayName = displayName;
+        const peerIdNode = $(peerId);
+        if (peerIdNode && displayName) peerIdNode.querySelector('.name').textContent = displayName;
    }

    _onKeyDown(e) {
@@ -168,7 +248,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');

@@ -227,7 +307,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();

@@ -272,8 +353,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._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
+        this.$el.querySelector('.connection-hash').textContent = this._connectionHash;
    }

    _initDom() {
@@ -496,7 +576,7 @@ class ReceiveDialog extends Dialog {
        }
    }

-    _parseFileData(displayName, files, imagesOnly, totalSize) {
+    _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize) {
        if (files.length > 1) {
            let fileOtherText = ` and ${files.length - 1} other `;
            if (files.length === 2) {
@@ -513,6 +593,7 @@ class ReceiveDialog extends Dialog {
        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);
    }
 }
@@ -530,8 +611,9 @@ class ReceiveFileDialog extends ReceiveDialog {
    }

    _onFilesReceived(sender, files, imagesOnly, totalSize) {
-        const displayName = $(sender).ui._displayName()
-        this._filesQueue.push({peer: sender, displayName: displayName, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        const displayName = $(sender).ui._displayName();
+        const connectionHash = $(sender).ui._connectionHash;
+        this._filesQueue.push({peer: sender, displayName: displayName, connectionHash: connectionHash, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
        this._nextFiles();
        window.blop.play();
    }
@@ -539,8 +621,8 @@ class ReceiveFileDialog extends ReceiveDialog {
    _nextFiles() {
        if (this._busy) return;
        this._busy = true;
-        const {peer, displayName, files, imagesOnly, totalSize} = this._filesQueue.shift();
-        this._displayFiles(peer, displayName, files, imagesOnly, totalSize);
+        const {peer, displayName, connectionHash, files, imagesOnly, totalSize} = this._filesQueue.shift();
+        this._displayFiles(peer, displayName, connectionHash, files, imagesOnly, totalSize);
    }

    _dequeueFile() {
@@ -557,32 +639,40 @@ class ReceiveFileDialog extends ReceiveDialog {

    createPreviewElement(file) {
        return new Promise((resolve, reject) => {
-            let mime = file.type.split('/')[0]
-            let previewElement = {
-                image: 'img',
-                audio: 'audio',
-                video: 'video'
-            }
+            try {
+                let mime = file.type.split('/')[0]
+                let previewElement = {
+                    image: 'img',
+                    audio: 'audio',
+                    video: 'video'
+                }

-            if (Object.keys(previewElement).indexOf(mime) === -1) {
-                resolve(false);
-            } else {
-                console.log('the file is able to preview');
-                let element = document.createElement(previewElement[mime]);
-                element.src = URL.createObjectURL(file);
-                element.controls = true;
-                element.onload = _ => {
-                    this.$previewBox.appendChild(element);
-                    resolve(true)
-                };
-                element.addEventListener('loadeddata', _ => resolve(true));
-                element.onerror = _ => reject(`${mime} preview could not be loaded from type ${file.type}`);
+                if (Object.keys(previewElement).indexOf(mime) === -1) {
+                    resolve(false);
+                } else {
+                    let element = document.createElement(previewElement[mime]);
+                    element.controls = true;
+                    element.onload = _ => {
+                        this.$previewBox.appendChild(element);
+                        resolve(true);
+                    };
+                    element.onloadeddata = _ => {
+                        this.$previewBox.appendChild(element);
+                        resolve(true);
+                    };
+                    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, displayName, files, imagesOnly, totalSize) {
-        this._parseFileData(displayName, files, imagesOnly, totalSize);
+    async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize) {
+        this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize);

        let descriptor, url, filenameDownload;
        if (files.length === 1) {
@@ -659,20 +749,30 @@ class ReceiveFileDialog extends ReceiveDialog {
            setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000);
        };

-        this.createPreviewElement(files[0]).finally(_ => {
-            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();
+        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();
            }
-        }).catch(r => console.error(r));
+        }, 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) {
@@ -729,9 +829,10 @@ class ReceiveRequestDialog extends ReceiveDialog {
        this.correspondingPeerId = peerId;

        const displayName = $(peerId).ui._displayName();
-        this._parseFileData(displayName, request.header, request.imagesOnly, request.totalSize);
+        const connectionHash = $(peerId).ui._connectionHash;
+        this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize);

-        if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
+        if (request.thumbnailDataUrl && request.thumbnailDataUrl.substring(0, 22) === "data:image/jpeg;base64") {
            let element = document.createElement('img');
            element.src = request.thumbnailDataUrl;
            this.$previewBox.appendChild(element)
@@ -766,15 +867,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');
-        createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$createJoinForm = this.$el.querySelector('form');
+
+        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)));
@@ -867,6 +970,7 @@ class PairDeviceDialog extends Dialog {
    }

    _onWsConnected() {
+        this.$pairDeviceBtn.removeAttribute('hidden');
        PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
            Events.fire('room-secrets', roomSecrets);
            this._evaluateNumberRoomSecrets();
@@ -1168,21 +1272,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.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
+                this.preparePasting("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();
                    });
@@ -1192,7 +1296,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();
                    });
@@ -1205,14 +1309,13 @@ 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.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
+                this.preparePasting('files');
            }
        }
    }
@@ -1222,39 +1325,60 @@ class Base64ZipDialog extends Dialog {
        this.$pasteBtn.innerText = "Processing...";
    }

-    async processClipboard(type) {
-        if (!navigator.clipboard.readText) {
-            Events.fire('notify-user', 'This feature is not available on your browser.');
-            console.log("navigator.clipboard.readText() is not available on your browser.")
-            this.hide();
-            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();
-                });
+    preparePasting(type) {
+        if (navigator.clipboard.readText) {
+            this.$pasteBtn.innerText = `Tap here to paste ${type}`;
+            this._clickCallback = _ => this.processClipboard(type);
+            this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
        } else {
-            this.processBase64Zip(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
+            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.")
+            this.$pasteBtn.setAttribute('hidden', '');
+            this.$fallbackTextarea.setAttribute('placeholder', `Paste here to send ${type}`);
+            this.$fallbackTextarea.removeAttribute('hidden');
+            this._inputCallback = _ => this.processInput(type);
+            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();
@@ -1288,6 +1412,8 @@ class Base64ZipDialog extends Dialog {

    hide() {
        this.clearBrowserHistory();
+        this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
+        this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
        super.hide();
    }
 }
@@ -1318,9 +1444,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() {
@@ -1393,8 +1519,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();
    }

@@ -1460,27 +1607,33 @@ class WebShareTargetUI {
                let shareTargetText;

                if (url) {
-                    shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
+                    shareTargetText = url; // we share only the link - no text.
                } else if (title && text) {
                    shareTargetText = title + '\r\n' + text;
                } else {
                    shareTargetText = title + text;
                }

-                console.log('Shared Target Text:', '"' + shareTargetText + '"');
                Events.fire('activate-paste-mode', {files: [], text: shareTargetText})
            } else if (share_target_type === "files") {
-                const openRequest = window.indexedDB.open('pairdrop_store')
-                openRequest.onsuccess( db => {
+                let openRequest = window.indexedDB.open('pairdrop_store')
+                openRequest.onsuccess = e => {
+                    const db = e.target.result;
                    const tx = db.transaction('share_target_files', 'readwrite');
                    const store = tx.objectStore('share_target_files');
                    const request = store.getAll();
                    request.onsuccess = _ => {
-                        Events.fire('activate-paste-mode', {files: request.result, text: ""})
+                        const fileObjects = request.result;
+                        let filesReceived = [];
+                        for (let i=0; i<fileObjects.length; i++) {
+                            filesReceived.push(new File([fileObjects[i].buffer], fileObjects[i].name));
+                        }
                        const clearRequest = store.clear()
                        clearRequest.onsuccess = _ => db.close();
+
+                        Events.fire('activate-paste-mode', {files: filesReceived, text: ""})
                    }
-                })
+                }
            }
            window.history.replaceState({}, "Rewrite URL", '/');
        }
@@ -1537,7 +1690,7 @@ class PersistentStorage {
            PersistentStorage.logBrowserNotCapable();
            return;
        }
-        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 2);
+        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 3);
        DBOpenRequest.onerror = (e) => {
            PersistentStorage.logBrowserNotCapable();
            console.log('Error initializing database: ');
@@ -1563,7 +1716,10 @@ class PersistentStorage {
            }

            try {
-                db.createObjectStore('share_target_files');
+                if (db.objectStoreNames.contains('share_target_files')) {
+                    db.deleteObjectStore('share_target_files');
+                }
+                db.createObjectStore('share_target_files', {autoIncrement: true});
            } catch (error) {
                console.log("Object store named 'share_target_files' already exists")
            }
@@ -1723,6 +1879,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', _ => {
@@ -1742,6 +1915,7 @@ class PairDrop {
            const webShareTargetUI = new WebShareTargetUI();
            const webFileHandlersUI = new WebFileHandlersUI();
            const noSleepUI = new NoSleepUI();
+            const broadCast = new Broadcast();
        });
    }
 }
@@ -1778,68 +1952,84 @@ Events.on('load', () => {
    style.zIndex = -1;
    style.top = 0;
    style.left = 0;
-    let ctx = c.getContext('2d');
+    let cCtx = c.getContext('2d');
    let x0, y0, w, h, dw, offset;

+    let offscreenCanvases = [];
+
    function init() {
+        let oldW = w;
+        let oldH = h;
+        let oldOffset = offset
        w = document.documentElement.clientWidth;
        h = document.documentElement.clientHeight;
-        c.width = w;
-        c.height = h;
        offset = $$('footer').offsetHeight - 32;
        if (h > 800) offset += 16;
+
+        if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
+
+        c.width = w;
+        c.height = h;
        x0 = w / 2;
        y0 = h - offset;
-        dw = Math.max(w, h, 1000) / 13;
-        drawCircles();
+        dw = Math.round(Math.max(w, h, 1000) / 13);
+        drawCircles(cCtx, 0);
+
+        // enforce redrawing of frames
+        offscreenCanvases = [];
    }
    Events.on('bg-resize', _ => init());
    window.onresize = _ => Events.fire('bg-resize');

-    function drawCircle(radius) {
+    function drawCircle(ctx, radius) {
        ctx.beginPath();
-        let color = Math.round(255 * (1 - radius / Math.max(w, h)));
-        ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
+        ctx.lineWidth = 2;
+        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
        ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
        ctx.stroke();
-        ctx.lineWidth = 2;
    }

-    let step = 0;
-
-    function drawCircles() {
-        ctx.clearRect(0, 0, w, h);
-        for (let i = 0; i < 8; i++) {
-            drawCircle(dw * i + step % dw);
-        }
-        step += 1;
-    }
-
-    let loading = true;
-
-    function animate() {
-        if (loading || !finished()) {
-            requestAnimationFrame(function() {
-                drawCircles();
-                animate();
-            });
+    function drawCircles(ctx, frame) {
+        for (let i = 0; i < 13; i++) {
+            drawCircle(ctx, dw * i + frame);
        }
    }

-    function finished() {
-        return step % dw >= dw - 5;
+    function createOffscreenCanvas(frame) {
+        let canvas = document.createElement("canvas");
+        canvas.width = c.width;
+        canvas.height = c.height;
+        offscreenCanvases[frame] = canvas;
+        let ctx = canvas.getContext('2d');
+        drawCircles(ctx, frame);
+    }
+
+    function drawFrame(frame) {
+        cCtx.clearRect(0, 0, w, h);
+        if (!offscreenCanvases[frame]) {
+            createOffscreenCanvas(frame);
+        }
+        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
+    }
+
+    let animate = true;
+    let currentFrame = 0;
+
+    function animateBg() {
+        if (currentFrame + 1 < dw || animate) {
+            currentFrame = (currentFrame + 1) % dw;
+            drawFrame(currentFrame);
+        }
+        setTimeout(_ => animateBg(), 3000 / dw);
    }

    window.animateBackground = function(l) {
-        if (!l) {
-            loading = false;
-        } else if (!loading) {
-            loading = true;
-            if (finished()) animate();
-        }
+        animate = l;
    };
+
    init();
-    animate();
+    animateBg();
 });

 document.changeFavicon = function (src) {
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.3.0';
+const cacheVersion = 'v1.6.1';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
    'index.html',
@@ -71,30 +71,11 @@ const update = request =>
 self.addEventListener('fetch', function(event) {
    if (event.request.method === "POST") {
        // Requests related to Web Share Target.
-        event.respondWith(
-            (async () => {
-                const formData = await event.request.formData();
-                const title = formData.get("title");
-                const text = formData.get("text");
-                const url = formData.get("url");
-                const files = formData.get("files");
-                let share_url = "/";
-                if (files.length > 0) {
-                    share_url = "/?share-target=files";
-                    const db = await window.indexedDB.open('pairdrop_store');
-                    const tx = db.transaction('share_target_files', 'readwrite');
-                    const store = tx.objectStore('share_target_files');
-                    for (let i=0; i<files.length; i++) {
-                        await store.add(files[i]);
-                    }
-                    await tx.complete
-                    db.close()
-                } else if (title.length > 0 || text.length > 0 || url.length) {
-                    share_url = `/?share-target=text&title=${title}&text=${text}&url=${url}`;
-                }
-                return Response.redirect(encodeURI(share_url), 303);
-            })()
-        );
+        event.respondWith((async () => {
+            let share_url = await evaluateRequestData(event.request);
+            share_url = event.request.url + share_url;
+            return Response.redirect(encodeURI(share_url), 302);
+        })());
    } else {
        // Regular requests not related to Web Share Target.
        event.respondWith(
@@ -119,3 +100,49 @@ self.addEventListener('activate', evt =>
        })
    )
 );
+
+const evaluateRequestData = async function (request) {
+    const formData = await request.formData();
+    const title = formData.get("title");
+    const text = formData.get("text");
+    const url = formData.get("url");
+    const files = formData.getAll("allfiles");
+
+
+    return new Promise(async (resolve) => {
+        if (files && files.length > 0) {
+            let fileObjects = [];
+            for (let i=0; i<files.length; i++) {
+                fileObjects.push({
+                    name: files[i].name,
+                    buffer: await files[i].arrayBuffer()
+                });
+            }
+
+            const DBOpenRequest = indexedDB.open('pairdrop_store');
+            DBOpenRequest.onsuccess = e => {
+                const db = e.target.result;
+                for (let i = 0; i < fileObjects.length; i++) {
+                    const transaction = db.transaction('share_target_files', 'readwrite');
+                    const objectStore = transaction.objectStore('share_target_files');
+
+                    const objectStoreRequest = objectStore.add(fileObjects[i]);
+                    objectStoreRequest.onsuccess = _ => {
+                        if (i === fileObjects.length - 1) resolve('?share-target=files');
+                    }
+                }
+            }
+            DBOpenRequest.onerror = _ => {
+                resolve('');
+            }
+        } else {
+            let share_url = '?share-target=text';
+
+            if (title) share_url += `&title=${title}`;
+            if (text) share_url += `&text=${text}`;
+            if (url) share_url += `&url=${url}`;
+
+            resolve(share_url);
+        }
+    });
+}
--- a/public/styles.css
+++ b/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 {
@@ -70,11 +75,75 @@ html {
 }

 header {
-    position: relative;
-    height: 56px;
-    align-items: center;
-    padding: 16px;
+    position: absolute;
+    align-items: baseline;
+    padding: 8px 16px;
    box-sizing: border-box;
+    width: 100vw;
+    z-index: 2;
+    top: 0;
+    right: 0;
+}
+
+header > a,
+header > div {
+    margin-left: 8px;
+}
+
+header > div {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+    touch-action: manipulation;
+}
+
+header > div .icon-button {
+    height: 40px;
+    transition: all 300ms;
+}
+
+header > div > div {
+    display: flex;
+    flex-direction: column;
+}
+
+header > div:not(:hover) .icon-button:not(.selected) {
+    height: 0;
+    opacity: 0;
+}
+
+#theme-wrapper:hover::before {
+    border-radius: 20px;
+    background: currentColor;
+    opacity: 0.1;
+    transition: opacity 300ms;
+    content: '';
+    position: absolute;
+    width: 40px;
+    top: 0;
+    bottom: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+header > div:hover .icon-button.selected::before {
+    opacity: 0.1;
+}
+
+@media (pointer: coarse) {
+    header > div:hover .icon-button.selected:hover::before {
+        opacity: 0.2;
+    }
+
+    header > div .icon-button:not(.selected) {
+        height: 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    header > div > div {
+        flex-direction: column-reverse;
+    }
 }

 [hidden] {
@@ -135,7 +204,8 @@ body {
    line-height: 18px;
 }

-a {
+a,
+.icon-button {
    text-decoration: none;
    color: currentColor;
    cursor: pointer;
@@ -187,15 +257,10 @@ x-noscript {
    }
 }

-/* Main Header */
-
-body>header a {
-    margin-left: 8px;
-}
-
 #center {
    position: relative;
    display: flex;
+    margin-top: 56px;
    flex-direction: column-reverse;
    flex-grow: 1;
    --footer-height: 132px;
@@ -450,10 +515,11 @@ x-peer[status] x-icon {
 }

 .device-descriptor {
+    width: 100%;
    text-align: center;
 }

-.name {
+.device-descriptor > div {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
@@ -533,6 +599,7 @@ footer {
    padding: 0 0 16px 0;
    text-align: center;
    transition: color 300ms;
+    cursor: default;
 }

 footer .logo {
@@ -557,6 +624,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 {
@@ -680,7 +780,7 @@ x-paper > div:last-child {

 x-paper > div:last-child > .button {
    height: 100%;
-    width: 50%;
+    width: 100%;
 }

 x-paper > div:last-child > .button:not(:last-child) {
@@ -756,10 +856,29 @@ x-dialog .dialog-subheader {
    margin: auto -24px;
 }

-#base64-paste-btn {
+#base64-paste-btn,
+#base64-paste-dialog .textarea {
    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 {
@@ -915,8 +1034,8 @@ button::-moz-focus-inner {

 #about x-background {
    position: absolute;
-    top: calc(32px - 250px);
-    right: calc(32px - 250px);
+    top: calc(28px - 250px);
+    right: calc(36px - 250px);
    width: 500px;
    height: 500px;
    border-radius: 50%;
@@ -995,11 +1114,11 @@ button::-moz-focus-inner {
 x-toast {
    position: absolute;
    min-height: 48px;
-    bottom: 24px;
+    top: 50px;
    width: 100%;
    max-width: 344px;
-    background-color: #323232;
-    color: rgba(255, 255, 255, 0.95);
+    background-color: rgb(var(--text-color));
+    color: rgb(var(--bg-color));
    align-items: center;
    box-sizing: border-box;
    padding: 8px 24px;
@@ -1013,7 +1132,7 @@ x-toast {

 x-toast:not([show]):not(:hover) {
    opacity: 0;
-    transform: translateY(100px);
+    transform: translateY(-100px);
 }


--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -44,32 +44,46 @@
                <use xlink:href="#info-outline" />
            </svg>
        </a>
-        <a id="theme" class="icon-button" title="Switch Darkmode/Lightmode" >
-            <svg class="icon">
-                <use xlink:href="#icon-theme" />
-            </svg>
-        </a>
-        <a id="notification" class="icon-button" title="Enable Notifications" hidden>
+        <div id="theme-wrapper">
+            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+                <svg class="icon">
+                    <use xlink:href="#icon-theme-auto" />
+                </svg>
+            </div>
+            <div>
+                <div id="theme-light" class="icon-button" title="Always Light" >
+                    <svg class="icon">
+                        <use xlink:href="#icon-theme-light" />
+                    </svg>
+                </div>
+                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                    <svg class="icon">
+                        <use xlink:href="#icon-theme-dark" />
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div id="notification" class="icon-button" title="Enable Notifications" hidden>
            <svg class="icon">
                <use xlink:href="#notifications" />
            </svg>
-        </a>
-        <a id="install" class="icon-button" title="Install PairDrop" hidden>
+        </div>
+        <div id="install" class="icon-button" title="Install PairDrop" hidden>
            <svg class="icon">
                <use xlink:href="#homescreen" />
            </svg>
-        </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" >
+        </div>
+        <div id="pair-device" class="icon-button" title="Pair Device" hidden>
            <svg class="icon">
                <use xlink:href="#pair-device-icon" />
            </svg>
-        </a>
-        <a id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
+        </div>
+        <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
            <svg class="icon">
                <use xlink:href="#clear-pair-devices-icon" />
            </svg>
-        </a>
-        <a id="cancel-paste-mode" class="button" hidden>Done</a>
+        </div>
+        <div id="cancel-paste-mode" class="button" hidden>Done</div>
    </header>
    <!-- Center -->
    <div id="center">
@@ -89,7 +103,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,17 +129,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 type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-6" 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="center row-reverse">
                        <button class="button" type="submit" disabled>Pair</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                    </div>
                </x-paper>
            </x-background>
@@ -134,7 +154,7 @@
                    <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
                    <div class="center row-reverse">
                        <button class="button" type="submit">Unpair Devices</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                    </div>
                </x-paper>
            </x-background>
@@ -203,10 +223,10 @@
                        <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 id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                    <div class="center row-reverse">
                        <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <button class="button" title="ESCAPE" close>Cancel</button>
+                        <button class="button" type="button" title="ESCAPE" close>Cancel</button>
                    </div>
                </x-paper>
            </x-background>
@@ -235,6 +255,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>
@@ -245,14 +266,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>
@@ -324,7 +345,13 @@
            <path d="M0 0h24v24H0z" fill="none" />
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z" />
        </symbol>
-        <symbol id="icon-theme" viewBox="0 0 24 24">
+        <symbol id="icon-theme-auto" viewBox="0 0 24 24">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-54 -54 620 620"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>
+        </symbol>
+        <symbol id="icon-theme-light" viewBox="0 0 24 24">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-54 -54 620 620"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
+        </symbol>
+        <symbol id="icon-theme-dark" viewBox="0 0 24 24">
         <rect fill="none" height="24" width="24"/><path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/>
        </symbol>
        <symbol id="pair-device-icon" viewBox="0 0 640 512">
@@ -335,13 +362,17 @@
            <!--! 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>
+    <script src="scripts/theme.js"></script>
    <script src="scripts/network.js"></script>
    <script src="scripts/ui.js"></script>
-    <script src="scripts/theme.js" async></script>
-    <script src="scripts/qrcode.js" async></script>
+    <script src="scripts/util.js" async></script>
+    <script src="scripts/QRCode.min.js" async></script>
    <script src="scripts/zip.min.js" async></script>
    <script src="scripts/NoSleep.min.js" async></script>
    <!-- Sounds -->
--- a/public_included_ws_fallback/scripts/QRCode.min.js
+++ b/public_included_ws_fallback/scripts/QRCode.min.js
--- a/public_included_ws_fallback/scripts/network.js
+++ b/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);
@@ -51,7 +51,7 @@ 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 })
@@ -113,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;
@@ -128,34 +129,24 @@ class ServerConnection {

    _onDisplayName(msg) {
        sessionStorage.setItem("peerId", msg.message.peerId);
-        PersistentStorage.get('peerId').then(peerId => {
-            if (!peerId) {
-                // save peerId to indexedDB to retrieve after PWA is installed
-                PersistentStorage.set('peerId', msg.message.peerId).then(peerId => {
-                    console.log(`peerId saved to indexedDB: ${peerId}`);
-                });
-            }
-        }).catch(_ => _ => PersistentStorage.logBrowserNotCapable())
+        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
        Events.fire('display-name', msg);
    }

-    async _endpoint() {
+    _endpoint() {
        // hack to detect if deployment or development environment
        const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws';
        const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback';
        let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc);
-        const peerId = await this._peerId();
-        if (peerId) ws_url.searchParams.append('peer_id', peerId)
+        const peerId = sessionStorage.getItem("peerId");
+        const peerIdHash = sessionStorage.getItem("peerIdHash");
+        if (peerId && peerIdHash) {
+            ws_url.searchParams.append('peer_id', peerId);
+            ws_url.searchParams.append('peer_id_hash', peerIdHash);
+        }
        return ws_url.toString();
    }

-    async _peerId() {
-        // make peerId persistent when pwa is installed
-        return window.matchMedia('(display-mode: minimal-ui)').matches
-            ? await PersistentStorage.get('peerId')
-            : sessionStorage.getItem("peerId");
-    }
-
    _disconnect() {
        this.send({ type: 'disconnect' });
        if (this._socket) {
@@ -171,7 +162,7 @@ class ServerConnection {
        console.log('WS: server disconnected');
        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;
    }
@@ -214,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,
@@ -345,7 +340,7 @@ class Peer {
                this._onFilesTransferRequest(messageJSON);
                break;
            case 'header':
-                this._onFilesHeader(messageJSON);
+                this._onFileHeader(messageJSON);
                break;
            case 'partition':
                this._onReceivedPartitionEnd(messageJSON);
@@ -368,6 +363,9 @@ class Peer {
            case 'text':
                this._onTextReceived(messageJSON);
                break;
+            case 'display-name-changed':
+                this._onDisplayNameChanged(messageJSON);
+                break;
        }
    }

@@ -402,8 +400,8 @@ class Peer {
        this._requestPending = null;
    }

-    _onFilesHeader(header) {
-        if (this._requestAccepted?.header.length) {
+    _onFileHeader(header) {
+        if (this._requestAccepted && this._requestAccepted.header.length) {
            this._lastProgress = 0;
            this._digester = new FileDigester({size: header.size, name: header.name, mime: header.mime},
                this._requestAccepted.totalSize,
@@ -456,6 +454,9 @@ class Peer {
            this._abortTransfer();
        }

+        // include for compatibility with Snapdrop for Android app
+        Events.fire('file-received', fileBlob);
+
        this._filesReceived.push(fileBlob);
        if (!this._requestAccepted.header.length) {
            this._busy = false;
@@ -505,6 +506,12 @@ 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 {
@@ -531,6 +538,7 @@ class RTCPeer extends Peer {
        this._peerId = peerId;
        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);
    }
@@ -578,14 +586,14 @@ 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) {
@@ -628,10 +636,16 @@ class RTCPeer extends Peer {
        }
    }

-    _closeChannel() {
-        if (this._channel) this._channel.onclose = null;
-        if (this._conn) this._conn.close();
-        this._conn = null;
+    _onPageHide() {
+        this._disconnect();
+    }
+
+    _disconnect() {
+        if (this._conn && this._channel) {
+            this._channel.onclose = null;
+            this._channel.close();
+        }
+        Events.fire('peer-disconnected', this._peerId);
    }

    _onChannelClosed() {
@@ -645,9 +659,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;
        }
@@ -693,6 +709,11 @@ 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 {
@@ -701,6 +722,7 @@ class WSPeer extends Peer {
        super(serverConnection, peerId, roomType, roomSecret);
        this.rtcSupported = false;
        if (!peerId) return; // we will listen for a caller
+        this._isCaller = true;
        this._sendSignal();
    }

@@ -712,6 +734,7 @@ class WSPeer extends Peer {
    }

    sendJSON(message) {
+        console.debug(message)
        message.to = this._peerId;
        message.roomType = this._roomType;
        message.roomSecret = this._roomSecret;
@@ -723,9 +746,9 @@ class WSPeer extends Peer {
    }

    onServerMessage(message) {
+        this._peerId = message.sender.id;
        Events.fire('peer-connected', {peerId: message.sender.id, connectionHash: this.getConnectionHash()})
        if (message.connected) return;
-        this._peerId = message.sender.id;
        this._sendSignal(true);
    }

@@ -746,8 +769,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));
        Events.on('ws-disconnected', _ => this._onWsDisconnected());
        Events.on('ws-relay', e => this._onWsRelay(e.detail));
    }
@@ -787,10 +814,6 @@ class PeersManager {
        })
    }

-    sendTo(peerId, message) {
-        this.peers[peerId].send(message);
-    }
-
    _onRespondToFileTransferRequest(detail) {
        this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
    }
@@ -825,6 +848,10 @@ class PeersManager {
        }
    }

+    _onPeerConnected(peerId) {
+        this._notifyPeerDisplayNameChanged(peerId);
+    }
+
    _onWsDisconnected() {
        for (const peerId in this.peers) {
            console.debug(this.peers[peerId].rtcSupported);
@@ -851,6 +878,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 {
@@ -939,11 +983,11 @@ class Events {
        window.dispatchEvent(new CustomEvent(type, { detail: detail }));
    }

-    static on(type, callback) {
-        return window.addEventListener(type, callback, false);
+    static on(type, callback, options = false) {
+        return window.addEventListener(type, callback, options);
    }

-    static off(type, callback) {
-        return window.removeEventListener(type, callback, false);
+    static off(type, callback, options = false) {
+        return window.removeEventListener(type, callback, options);
    }
 }
--- a/public_included_ws_fallback/scripts/robots.txt
+++ b/public_included_ws_fallback/scripts/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
--- a/public_included_ws_fallback/scripts/theme.js
+++ b/public_included_ws_fallback/scripts/theme.js
@@ -1,39 +1,78 @@
 (function(){

-  // Select the button
-  const btnTheme = document.getElementById('theme');
-  // Check for dark mode preference at the OS level
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-   
-  // Get the user's theme preference from local storage, if it's available
-  const currentTheme = localStorage.getItem('theme');
-  // If the user's preference in localStorage is dark...
+  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+  const $themeAuto = document.getElementById('theme-auto');
+  const $themeLight = document.getElementById('theme-light');
+  const $themeDark = document.getElementById('theme-dark');
+
+  let currentTheme = localStorage.getItem('theme');
+
  if (currentTheme === 'dark') {
-    // ...let's toggle the .dark-theme class on the body
-    document.body.classList.toggle('dark-theme');
-  // Otherwise, if the user's preference in localStorage is light...
+    setModeToDark();
  } else if (currentTheme === 'light') {
-    // ...let's toggle the .light-theme class on the body
-    document.body.classList.toggle('light-theme');
+    setModeToLight();
  }
-   
-  // Listen for a click on the button
-  btnTheme.addEventListener('click', function(e) {
-    e.preventDefault();
-    // If the user's OS setting is dark and matches our .dark-theme class...
-    let theme;
-    if (prefersDarkScheme.matches) {
-      // ...then toggle the light mode class
-      document.body.classList.toggle('light-theme');
-      // ...but use .dark-theme if the .light-theme class is already on the body,
-      theme = document.body.classList.contains('light-theme') ? 'light' : 'dark';
+
+  $themeAuto.addEventListener('click', _ => {
+    if (currentTheme) {
+      setModeToAuto();
    } else {
-      // Otherwise, let's do the same thing, but for .dark-theme
-      document.body.classList.toggle('dark-theme');
-      theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
+      setModeToDark();
+    }
+  });
+  $themeLight.addEventListener('click', _ => {
+    if (currentTheme !== 'light') {
+      setModeToLight();
+    } else {
+      setModeToAuto();
+    }
+  });
+  $themeDark.addEventListener('click', _ => {
+    if (currentTheme !== 'dark') {
+      setModeToDark();
+    } else {
+      setModeToLight();
    }
-    // Finally, let's save the current preference to localStorage to keep using it
-    localStorage.setItem('theme', theme);
  });

+  function setModeToDark() {
+    document.body.classList.remove('light-theme');
+    document.body.classList.add('dark-theme');
+    localStorage.setItem('theme', 'dark');
+    currentTheme = 'dark';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.add("selected");
+  }
+
+  function setModeToLight() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.add('light-theme');
+    localStorage.setItem('theme', 'light');
+    currentTheme = 'light';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.add("selected");
+    $themeDark.classList.remove("selected");
+  }
+
+  function setModeToAuto() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.remove('light-theme');
+    if (prefersDarkTheme) {
+      document.body.classList.add('dark-theme');
+    } else if (prefersLightTheme) {
+      document.body.classList.add('light-theme');
+    }
+    localStorage.removeItem('theme');
+    currentTheme = undefined;
+
+    $themeAuto.classList.add("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.remove("selected");
+  }
+
 })();
--- a/public_included_ws_fallback/scripts/ui.js
+++ b/public_included_ws_fallback/scripts/ui.js
@@ -9,9 +9,8 @@ window.pasteMode.activated = false;
 // set display name
 Events.on('display-name', e => {
    const me = e.detail.message;
-    const $displayName = $('display-name')
-    $displayName.textContent = 'You are known as ' + me.displayName;
-    $displayName.title = me.deviceName;
+    const $displayName = $('display-name');
+    $displayName.setAttribute('placeholder', me.displayName);
 });

 class PeersUI {
@@ -43,6 +42,87 @@ 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 => {
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
+                .catch(_ => {
+                    let displayName = localStorage.getItem('editedDisplayName');
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
+        });
+    }
+
+    _changePeerDisplayName(peerId, displayName) {
+        this.peers[peerId].name.displayName = displayName;
+        const peerIdNode = $(peerId);
+        if (peerIdNode && displayName) peerIdNode.querySelector('.name').textContent = displayName;
    }

    _onKeyDown(e) {
@@ -168,7 +248,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');

@@ -227,7 +307,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();

@@ -272,8 +353,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._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
+        this.$el.querySelector('.connection-hash').textContent = this._connectionHash;
    }

    _initDom() {
@@ -497,7 +577,7 @@ class ReceiveDialog extends Dialog {
        }
    }

-    _parseFileData(displayName, files, imagesOnly, totalSize) {
+    _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize) {
        if (files.length > 1) {
            let fileOtherText = ` and ${files.length - 1} other `;
            if (files.length === 2) {
@@ -514,6 +594,7 @@ class ReceiveDialog extends Dialog {
        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);
    }
 }
@@ -531,8 +612,9 @@ class ReceiveFileDialog extends ReceiveDialog {
    }

    _onFilesReceived(sender, files, imagesOnly, totalSize) {
-        const displayName = $(sender).ui._displayName()
-        this._filesQueue.push({peer: sender, displayName: displayName, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        const displayName = $(sender).ui._displayName();
+        const connectionHash = $(sender).ui._connectionHash;
+        this._filesQueue.push({peer: sender, displayName: displayName, connectionHash: connectionHash, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
        this._nextFiles();
        window.blop.play();
    }
@@ -540,8 +622,8 @@ class ReceiveFileDialog extends ReceiveDialog {
    _nextFiles() {
        if (this._busy) return;
        this._busy = true;
-        const {peer, displayName, files, imagesOnly, totalSize} = this._filesQueue.shift();
-        this._displayFiles(peer, displayName, files, imagesOnly, totalSize);
+        const {peer, displayName, connectionHash, files, imagesOnly, totalSize} = this._filesQueue.shift();
+        this._displayFiles(peer, displayName, connectionHash, files, imagesOnly, totalSize);
    }

    _dequeueFile() {
@@ -558,32 +640,40 @@ class ReceiveFileDialog extends ReceiveDialog {

    createPreviewElement(file) {
        return new Promise((resolve, reject) => {
-            let mime = file.type.split('/')[0]
-            let previewElement = {
-                image: 'img',
-                audio: 'audio',
-                video: 'video'
-            }
+            try {
+                let mime = file.type.split('/')[0]
+                let previewElement = {
+                    image: 'img',
+                    audio: 'audio',
+                    video: 'video'
+                }

-            if (Object.keys(previewElement).indexOf(mime) === -1) {
-                resolve(false);
-            } else {
-                console.log('the file is able to preview');
-                let element = document.createElement(previewElement[mime]);
-                element.src = URL.createObjectURL(file);
-                element.controls = true;
-                element.onload = _ => {
-                    this.$previewBox.appendChild(element);
-                    resolve(true)
-                };
-                element.addEventListener('loadeddata', _ => resolve(true));
-                element.onerror = _ => reject(`${mime} preview could not be loaded from type ${file.type}`);
+                if (Object.keys(previewElement).indexOf(mime) === -1) {
+                    resolve(false);
+                } else {
+                    let element = document.createElement(previewElement[mime]);
+                    element.controls = true;
+                    element.onload = _ => {
+                        this.$previewBox.appendChild(element);
+                        resolve(true);
+                    };
+                    element.onloadeddata = _ => {
+                        this.$previewBox.appendChild(element);
+                        resolve(true);
+                    };
+                    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, displayName, files, imagesOnly, totalSize) {
-        this._parseFileData(displayName, files, imagesOnly, totalSize);
+    async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize) {
+        this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize);

        let descriptor, url, filenameDownload;
        if (files.length === 1) {
@@ -660,20 +750,30 @@ class ReceiveFileDialog extends ReceiveDialog {
            setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000);
        };

-        this.createPreviewElement(files[0]).finally(_ => {
-            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();
+        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();
            }
-        }).catch(r => console.error(r));
+        }, 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) {
@@ -730,9 +830,10 @@ class ReceiveRequestDialog extends ReceiveDialog {
        this.correspondingPeerId = peerId;

        const displayName = $(peerId).ui._displayName();
-        this._parseFileData(displayName, request.header, request.imagesOnly, request.totalSize);
+        const connectionHash = $(peerId).ui._connectionHash;
+        this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize);

-        if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
+        if (request.thumbnailDataUrl && request.thumbnailDataUrl.substring(0, 22) === "data:image/jpeg;base64") {
            let element = document.createElement('img');
            element.src = request.thumbnailDataUrl;
            this.$previewBox.appendChild(element)
@@ -767,15 +868,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');
-        createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$createJoinForm = this.$el.querySelector('form');
+
+        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)));
@@ -868,6 +971,7 @@ class PairDeviceDialog extends Dialog {
    }

    _onWsConnected() {
+        this.$pairDeviceBtn.removeAttribute('hidden');
        PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
            Events.fire('room-secrets', roomSecrets);
            this._evaluateNumberRoomSecrets();
@@ -1169,21 +1273,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.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
+                this.preparePasting("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();
                    });
@@ -1193,7 +1297,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();
                    });
@@ -1206,14 +1310,13 @@ 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.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
+                this.preparePasting('files');
            }
        }
    }
@@ -1223,39 +1326,60 @@ class Base64ZipDialog extends Dialog {
        this.$pasteBtn.innerText = "Processing...";
    }

-    async processClipboard(type) {
-        if (!navigator.clipboard.readText) {
-            Events.fire('notify-user', 'This feature is not available on your browser.');
-            console.log("navigator.clipboard.readText() is not available on your browser.")
-            this.hide();
-            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();
-                });
+    preparePasting(type) {
+        if (navigator.clipboard.readText) {
+            this.$pasteBtn.innerText = `Tap here to paste ${type}`;
+            this._clickCallback = _ => this.processClipboard(type);
+            this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
        } else {
-            this.processBase64Zip(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
+            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.")
+            this.$pasteBtn.setAttribute('hidden', '');
+            this.$fallbackTextarea.setAttribute('placeholder', `Paste here to send ${type}`);
+            this.$fallbackTextarea.removeAttribute('hidden');
+            this._inputCallback = _ => this.processInput(type);
+            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();
@@ -1289,6 +1413,8 @@ class Base64ZipDialog extends Dialog {

    hide() {
        this.clearBrowserHistory();
+        this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
+        this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
        super.hide();
    }
 }
@@ -1319,9 +1445,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() {
@@ -1394,8 +1520,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();
    }

@@ -1461,27 +1608,33 @@ class WebShareTargetUI {
                let shareTargetText;

                if (url) {
-                    shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
+                    shareTargetText = url; // we share only the link - no text.
                } else if (title && text) {
                    shareTargetText = title + '\r\n' + text;
                } else {
                    shareTargetText = title + text;
                }

-                console.log('Shared Target Text:', '"' + shareTargetText + '"');
                Events.fire('activate-paste-mode', {files: [], text: shareTargetText})
            } else if (share_target_type === "files") {
-                const openRequest = window.indexedDB.open('pairdrop_store')
-                openRequest.onsuccess( db => {
+                let openRequest = window.indexedDB.open('pairdrop_store')
+                openRequest.onsuccess = e => {
+                    const db = e.target.result;
                    const tx = db.transaction('share_target_files', 'readwrite');
                    const store = tx.objectStore('share_target_files');
                    const request = store.getAll();
                    request.onsuccess = _ => {
-                        Events.fire('activate-paste-mode', {files: request.result, text: ""})
+                        const fileObjects = request.result;
+                        let filesReceived = [];
+                        for (let i=0; i<fileObjects.length; i++) {
+                            filesReceived.push(new File([fileObjects[i].buffer], fileObjects[i].name));
+                        }
                        const clearRequest = store.clear()
                        clearRequest.onsuccess = _ => db.close();
+
+                        Events.fire('activate-paste-mode', {files: filesReceived, text: ""})
                    }
-                })
+                }
            }
            window.history.replaceState({}, "Rewrite URL", '/');
        }
@@ -1538,7 +1691,7 @@ class PersistentStorage {
            PersistentStorage.logBrowserNotCapable();
            return;
        }
-        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 2);
+        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 3);
        DBOpenRequest.onerror = (e) => {
            PersistentStorage.logBrowserNotCapable();
            console.log('Error initializing database: ');
@@ -1564,7 +1717,10 @@ class PersistentStorage {
            }

            try {
-                db.createObjectStore('share_target_files');
+                if (db.objectStoreNames.contains('share_target_files')) {
+                    db.deleteObjectStore('share_target_files');
+                }
+                db.createObjectStore('share_target_files', {autoIncrement: true});
            } catch (error) {
                console.log("Object store named 'share_target_files' already exists")
            }
@@ -1724,6 +1880,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', _ => {
@@ -1743,6 +1916,7 @@ class PairDrop {
            const webShareTargetUI = new WebShareTargetUI();
            const webFileHandlersUI = new WebFileHandlersUI();
            const noSleepUI = new NoSleepUI();
+            const broadCast = new Broadcast();
        });
    }
 }
@@ -1779,67 +1953,84 @@ Events.on('load', () => {
    style.zIndex = -1;
    style.top = 0;
    style.left = 0;
-    let ctx = c.getContext('2d');
+    let cCtx = c.getContext('2d');
    let x0, y0, w, h, dw, offset;

+    let offscreenCanvases = [];
+
    function init() {
+        let oldW = w;
+        let oldH = h;
+        let oldOffset = offset
        w = document.documentElement.clientWidth;
        h = document.documentElement.clientHeight;
+        offset = $$('footer').offsetHeight - 32;
+        if (h > 800) offset += 16;
+
+        if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
+
        c.width = w;
        c.height = h;
-        offset = $$('footer').offsetHeight - 32;
        x0 = w / 2;
        y0 = h - offset;
-        dw = Math.max(w, h, 1000) / 13;
-        drawCircles();
+        dw = Math.round(Math.max(w, h, 1000) / 13);
+        drawCircles(cCtx, 0);
+
+        // enforce redrawing of frames
+        offscreenCanvases = [];
    }
    Events.on('bg-resize', _ => init());
    window.onresize = _ => Events.fire('bg-resize');

-    function drawCircle(radius) {
+    function drawCircle(ctx, radius) {
        ctx.beginPath();
-        let color = Math.round(255 * (1 - radius / Math.max(w, h)));
-        ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
+        ctx.lineWidth = 2;
+        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
        ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
        ctx.stroke();
-        ctx.lineWidth = 2;
    }

-    let step = 0;
-
-    function drawCircles() {
-        ctx.clearRect(0, 0, w, h);
-        for (let i = 0; i < 8; i++) {
-            drawCircle(dw * i + step % dw);
-        }
-        step += 1;
-    }
-
-    let loading = true;
-
-    function animate() {
-        if (loading || !finished()) {
-            requestAnimationFrame(function() {
-                drawCircles();
-                animate();
-            });
+    function drawCircles(ctx, frame) {
+        for (let i = 0; i < 13; i++) {
+            drawCircle(ctx, dw * i + frame);
        }
    }

-    function finished() {
-        return step % dw >= dw - 5;
+    function createOffscreenCanvas(frame) {
+        let canvas = document.createElement("canvas");
+        canvas.width = c.width;
+        canvas.height = c.height;
+        offscreenCanvases[frame] = canvas;
+        let ctx = canvas.getContext('2d');
+        drawCircles(ctx, frame);
+    }
+
+    function drawFrame(frame) {
+        cCtx.clearRect(0, 0, w, h);
+        if (!offscreenCanvases[frame]) {
+            createOffscreenCanvas(frame);
+        }
+        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
+    }
+
+    let animate = true;
+    let currentFrame = 0;
+
+    function animateBg() {
+        if (currentFrame + 1 < dw || animate) {
+            currentFrame = (currentFrame + 1) % dw;
+            drawFrame(currentFrame);
+        }
+        setTimeout(_ => animateBg(), 3000 / dw);
    }

    window.animateBackground = function(l) {
-        if (!l) {
-            loading = false;
-        } else if (!loading) {
-            loading = true;
-            if (finished()) animate();
-        }
+        animate = l;
    };
+
    init();
-    animate();
+    animateBg();
 });

 document.changeFavicon = function (src) {
--- a/public_included_ws_fallback/service-worker.js
+++ b/public_included_ws_fallback/service-worker.js
@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.3.0';
+const cacheVersion = 'v1.6.1';
 const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
 const urlsToCache = [
    'index.html',
@@ -71,30 +71,11 @@ const update = request =>
 self.addEventListener('fetch', function(event) {
    if (event.request.method === "POST") {
        // Requests related to Web Share Target.
-        event.respondWith(
-            (async () => {
-                const formData = await event.request.formData();
-                const title = formData.get("title");
-                const text = formData.get("text");
-                const url = formData.get("url");
-                const files = formData.get("files");
-                let share_url = "/";
-                if (files.length > 0) {
-                    share_url = "/?share-target=files";
-                    const db = await window.indexedDB.open('pairdrop_store');
-                    const tx = db.transaction('share_target_files', 'readwrite');
-                    const store = tx.objectStore('share_target_files');
-                    for (let i=0; i<files.length; i++) {
-                        await store.add(files[i]);
-                    }
-                    await tx.complete
-                    db.close()
-                } else if (title.length > 0 || text.length > 0 || url.length) {
-                    share_url = `/?share-target=text&title=${title}&text=${text}&url=${url}`;
-                }
-                return Response.redirect(encodeURI(share_url), 303);
-            })()
-        );
+        event.respondWith((async () => {
+            let share_url = await evaluateRequestData(event.request);
+            share_url = event.request.url + share_url;
+            return Response.redirect(encodeURI(share_url), 302);
+        })());
    } else {
        // Regular requests not related to Web Share Target.
        event.respondWith(
@@ -119,3 +100,49 @@ self.addEventListener('activate', evt =>
        })
    )
 );
+
+const evaluateRequestData = async function (request) {
+    const formData = await request.formData();
+    const title = formData.get("title");
+    const text = formData.get("text");
+    const url = formData.get("url");
+    const files = formData.getAll("allfiles");
+
+
+    return new Promise(async (resolve) => {
+        if (files && files.length > 0) {
+            let fileObjects = [];
+            for (let i=0; i<files.length; i++) {
+                fileObjects.push({
+                    name: files[i].name,
+                    buffer: await files[i].arrayBuffer()
+                });
+            }
+
+            const DBOpenRequest = indexedDB.open('pairdrop_store');
+            DBOpenRequest.onsuccess = e => {
+                const db = e.target.result;
+                for (let i = 0; i < fileObjects.length; i++) {
+                    const transaction = db.transaction('share_target_files', 'readwrite');
+                    const objectStore = transaction.objectStore('share_target_files');
+
+                    const objectStoreRequest = objectStore.add(fileObjects[i]);
+                    objectStoreRequest.onsuccess = _ => {
+                        if (i === fileObjects.length - 1) resolve('?share-target=files');
+                    }
+                }
+            }
+            DBOpenRequest.onerror = _ => {
+                resolve('');
+            }
+        } else {
+            let share_url = '?share-target=text';
+
+            if (title) share_url += `&title=${title}`;
+            if (text) share_url += `&text=${text}`;
+            if (url) share_url += `&url=${url}`;
+
+            resolve(share_url);
+        }
+    });
+}
--- a/public_included_ws_fallback/styles.css
+++ b/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 {
@@ -71,11 +76,75 @@ html {
 }

 header {
-    position: relative;
-    height: 56px;
-    align-items: center;
-    padding: 16px;
+    position: absolute;
+    align-items: baseline;
+    padding: 8px 16px;
    box-sizing: border-box;
+    width: 100vw;
+    z-index: 2;
+    top: 0;
+    right: 0;
+}
+
+header > a,
+header > div {
+    margin-left: 8px;
+}
+
+header > div {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+    touch-action: manipulation;
+}
+
+header > div .icon-button {
+    height: 40px;
+    transition: all 300ms;
+}
+
+header > div > div {
+    display: flex;
+    flex-direction: column;
+}
+
+header > div:not(:hover) .icon-button:not(.selected) {
+    height: 0;
+    opacity: 0;
+}
+
+#theme-wrapper:hover::before {
+    border-radius: 20px;
+    background: currentColor;
+    opacity: 0.1;
+    transition: opacity 300ms;
+    content: '';
+    position: absolute;
+    width: 40px;
+    top: 0;
+    bottom: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+header > div:hover .icon-button.selected::before {
+    opacity: 0.1;
+}
+
+@media (pointer: coarse) {
+    header > div:hover .icon-button.selected:hover::before {
+        opacity: 0.2;
+    }
+
+    header > div .icon-button:not(.selected) {
+        height: 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    header > div > div {
+        flex-direction: column-reverse;
+    }
 }

 [hidden] {
@@ -136,7 +205,8 @@ body {
    line-height: 18px;
 }

-a {
+a,
+.icon-button {
    text-decoration: none;
    color: currentColor;
    cursor: pointer;
@@ -188,15 +258,10 @@ x-noscript {
    }
 }

-/* Main Header */
-
-body>header a {
-    margin-left: 8px;
-}
-
 #center {
    position: relative;
    display: flex;
+    margin-top: 56px;
    flex-direction: column-reverse;
    flex-grow: 1;
    --footer-height: 146px;
@@ -477,10 +542,11 @@ x-peer.ws-peer .highlight-wrapper {
 }

 .device-descriptor {
+    width: 100%;
    text-align: center;
 }

-.name {
+.device-descriptor > div {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
@@ -559,6 +625,7 @@ footer {
    align-items: center;
    text-align: center;
    transition: color 300ms;
+    cursor: default;
 }

 footer .logo {
@@ -583,6 +650,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 {
@@ -706,7 +806,7 @@ x-paper > div:last-child {

 x-paper > div:last-child > .button {
    height: 100%;
-    width: 50%;
+    width: 100%;
 }

 x-paper > div:last-child > .button:not(:last-child) {
@@ -782,10 +882,29 @@ x-dialog .dialog-subheader {
    margin: auto -24px;
 }

-#base64-paste-btn {
+#base64-paste-btn,
+#base64-paste-dialog .textarea {
    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 {
@@ -1021,11 +1140,11 @@ button::-moz-focus-inner {
 x-toast {
    position: absolute;
    min-height: 48px;
-    bottom: 24px;
+    top: 50px;
    width: 100%;
    max-width: 344px;
-    background-color: #323232;
-    color: rgba(255, 255, 255, 0.95);
+    background-color: rgb(var(--text-color));
+    color: rgb(var(--bg-color));
    align-items: center;
    box-sizing: border-box;
    padding: 8px 24px;
@@ -1039,7 +1158,7 @@ x-toast {

 x-toast:not([show]):not(:hover) {
    opacity: 0;
-    transform: translateY(100px);
+    transform: translateY(-100px);
 }


--- a/rtc_config_example.json
+++ b/rtc_config_example.json
@@ -5,12 +5,9 @@
      "urls": "stun:stun.l.google.com:19302"
    },
    {
-      "urls": "stun:openrelay.metered.ca:80"
-    },
-    {
-      "urls": "turn:openrelay.metered.ca:443",
-      "username": "openrelayproject",
-      "credential": "openrelayproject"
+      "urls": "turn:example.com:3478",
+      "username": "username",
+      "credential": "password"
    }
  ]
 }
--- a/turnserver_example.conf
+++ b/turnserver_example.conf
@@ -0,0 +1,38 @@
+# TURN server name and realm
+realm=<DOMAIN>
+server-name=pairdrop
+
+# IPs the TURN server listens to
+listening-ip=0.0.0.0
+
+# External IP-Address of the TURN server
+external-ip=<IP_ADDRESS>
+
+# Main listening port
+listening-port=3478
+
+# Further ports that are open for communication
+min-port=10000
+max-port=20000
+
+# Use fingerprint in TURN message
+fingerprint
+
+# Log file path
+log-file=/var/log/turnserver.log
+
+# Enable verbose logging
+verbose
+
+# Specify the user for the TURN authentification
+user=user:password
+
+# Enable long-term credential mechanism
+lt-cred-mech
+
+# SSL certificates
+cert=/etc/letsencrypt/live/<DOMAIN>/cert.pem
+pkey=/etc/letsencrypt/live/<DOMAIN>/privkey.pem
+
+# 443 for TURN over TLS, which can bypass firewalls
+tls-listening-port=443
Author	SHA1	Message	Date
schlagmichdoch	8de899f124	increase version to v1.6.1	2023-04-19 21:16:43 +02:00
schlagmichdoch	87097e9cd4	fix header btn shadow styling	2023-04-19 21:15:03 +02:00
schlagmichdoch	b2fc6415da	include example files to run an own TURN server via coturn or via docker-compose	2023-04-19 17:38:14 +02:00
schlagmichdoch	2d8bbd5a79	Change docs to include the usage of our own TURN server instead of the TURN server of the Open Relay Project	2023-04-19 16:50:22 +02:00
schlagmichdoch	cae3bb7c7b	Add server costs to README.md	2023-04-18 13:06:21 +02:00
schlagmichdoch	59dca141b6	increase version to v1.6.0	2023-04-17 15:25:52 +02:00
schlagmichdoch	d0046e83cb	remove openrelayproject from rtc_config	2023-04-17 15:24:31 +02:00
schlagmichdoch	2aeadb44e2	Merge pull request #68 Increase SEO	2023-04-17 15:21:04 +02:00
schlagmichdoch	7827a47d29	increase seo with recommendations from PageSpeed Insights	2023-04-17 15:19:54 +02:00
schlagmichdoch	4edc9c9b22	Merge pull request #95 from robvanoostenrijk/ghcr-multi-architecture Build multi-architecture image	2023-04-16 15:35:22 +02:00
schlagmichdoch	398a69d7a0	Merge pull request #97 from schlagmichdoch/dependabot/npm_and_yarn/ua-parser-js-1.0.35 Bump ua-parser-js from 1.0.34 to 1.0.35	2023-04-07 18:07:43 +02:00
dependabot[bot]	dfe69cc873	Bump ua-parser-js from 1.0.34 to 1.0.35 Bumps [ua-parser-js](https://github.com/faisalman/ua-parser-js) from 1.0.34 to 1.0.35. - [Release notes](https://github.com/faisalman/ua-parser-js/releases) - [Changelog](https://github.com/faisalman/ua-parser-js/blob/master/changelog.md) - [Commits](https://github.com/faisalman/ua-parser-js/compare/1.0.34...1.0.35) --- updated-dependencies: - dependency-name: ua-parser-js dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2023-04-03 05:05:12 +00:00
Rob van Oostenrijk	f5fde731b0	Build multi-architecture image Build image output both for amd64 & arm64	2023-03-31 08:37:11 +04:00
schlagmichdoch	d6eee480b3	Add darkmode/lightmode/auto toggle to "Other changes"	2023-03-29 17:10:20 +02:00
schlagmichdoch	f6ad85a744	increase version to v1.5.3	2023-03-29 16:24:24 +02:00
schlagmichdoch	d50480b2f8	Merge pull request #94 from schlagmichdoch/add_theme_menu Add theme menu to toggle between auto, light and dark mode.	2023-03-29 16:22:42 +02:00
schlagmichdoch	ac1e88b6a0	Add possibility to reset theme to auto	2023-03-29 01:39:45 +02:00
schlagmichdoch	0fe36e132c	Remove the "under development" message from the share-menu section	2023-03-28 20:24:46 +02:00
schlagmichdoch	ab08091f5d	increase version to v1.5.2	2023-03-28 20:00:05 +02:00
schlagmichdoch	19a78a5239	Merge pull request #72 from schlagmichdoch/fix_share_target WIP: Fix share target API	2023-03-28 19:58:34 +02:00
schlagmichdoch	d0b2c81582	Tidy up code	2023-03-28 19:07:33 +02:00
Daniel Pham	10a0aaf896	Fix passed arguments for sharing text	2023-03-28 19:00:15 +02:00
Daniel Pham	34ebd60304	Update service worker - files array now matches manifest files name - fixed handling fetch redirect	2023-03-28 19:00:15 +02:00
schlagmichdoch	251df2fbff	try to fix share target api	2023-03-28 19:00:05 +02:00
schlagmichdoch	1bb8a63eed	increase version to v1.5.1	2023-03-27 02:31:56 +02:00
schlagmichdoch	7d581ca858	Merge pull request #92 from schlagmichdoch/optimize_animation Optimize background animation to drastically reduce CPU/GPU resources	2023-03-27 02:19:19 +02:00
schlagmichdoch	dcc4e8b747	Optimize background animation drastically by using offscreen canvases to reuse frames. Rewrite animate function to prevent it from being called multiple times	2023-03-27 02:17:36 +02:00
schlagmichdoch	ce549adf22	Merge pull request #82 from kgncloud/patch-1 Add Healthcheck to Dockerfile	2023-03-25 04:09:46 +01:00
schlagmichdoch	bdb39a1d2c	add docker-swarm-usage.md reference to host-your-own.md and tidy up docker-swarm-usage.md	2023-03-25 04:08:11 +01:00
schlagmichdoch	195dfd0bb3	Add https requirement for PWAs to faq.md	2023-03-25 03:37:15 +01:00
Kaindl Network	680ed81bd7	Create	2023-03-18 23:52:33 +00:00
schlagmichdoch	f120677393	increase version to v1.5.0	2023-03-14 15:52:15 +01:00
schlagmichdoch	3f85d266b3	Merge pull request #80 from schlagmichdoch/compatibility_snapdrop_android PairDrop is finally compatible with snapdrop for android! 🎉	2023-03-14 15:49:12 +01:00
schlagmichdoch	01cd670afc	Convert FAQ to collapsible sections and add back third-party apps	2023-03-14 15:43:40 +01:00
schlagmichdoch	3f0909637b	fix full button width if only one button is shown	2023-03-14 15:12:31 +01:00
schlagmichdoch	1f97c12562	fix overflow of long device names for snapdrop-android	2023-03-14 15:12:31 +01:00
schlagmichdoch	17abc91c86	rename function and add event to achieve compatibility with snapdrop-android app	2023-03-14 15:12:23 +01:00
schlagmichdoch	4a0cd1f49a	Update issue templates: Point out the FAQ	2023-03-14 11:48:57 +01:00
Kaindl Network	b7781e2bab	Add Healthcheck to Dockerfile	2023-03-13 20:38:36 +01:00
schlagmichdoch	4e0fb89720	replace javascript operators `??` and `?.` to support older browsers (see #79 )	2023-03-13 14:21:26 +01:00
schlagmichdoch	5a290718b6	Merge pull request #78 from schlagmichdoch/dependabot/npm_and_yarn/ws-8.13.0 Bump ws from 8.12.1 to 8.13.0	2023-03-13 11:35:30 +01:00
dependabot[bot]	6c6f288c3d	Bump ws from 8.12.1 to 8.13.0 Bumps [ws](https://github.com/websockets/ws) from 8.12.1 to 8.13.0. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/compare/8.12.1...8.13.0) --- updated-dependencies: - dependency-name: ws dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2023-03-13 05:17:56 +00:00
schlagmichdoch	fea15d3ee1	increase version to v1.4.5	2023-03-13 00:05:57 +01:00
schlagmichdoch	028752a809	fixes #76 . 'File received' dialog not showing on iOS when big videos are sent.	2023-03-13 00:04:48 +01:00
schlagmichdoch	1093f4d246	log error onicecandidateerror	2023-03-10 22:21:19 +01:00
schlagmichdoch	7ddd600b0c	fix display name hidden on Firefox for Android	2023-03-10 20:01:59 +01:00
schlagmichdoch	715356aafb	Fix AirDrop typo	2023-03-08 11:35:37 +01:00
schlagmichdoch	490e4db380	Add information about specifying TURN servers	2023-03-07 18:25:25 +01:00
schlagmichdoch	11a988e550	increase version to v1.4.4	2023-03-06 16:05:58 +01:00
schlagmichdoch	ff8f28660a	prevent buttons from submitting form by adding `type="button"`	2023-03-06 16:03:34 +01:00
schlagmichdoch	5fc8e85f75	increase version to 1.4.3	2023-03-06 15:40:09 +01:00
schlagmichdoch	5eeaae01fe	add connection hash to title of display-name of receive dialogs	2023-03-06 15:39:24 +01:00
schlagmichdoch	660e523263	prevent sending of displayName if RTCPeer is not connected	2023-03-06 15:33:22 +01:00
schlagmichdoch	cdfbc7a2df	add missing removal of event listener to ws fallback ui.js	2023-03-06 15:32:58 +01:00
schlagmichdoch	c9dca7e083	fix download notification and add request notification	2023-03-06 15:32:42 +01:00
schlagmichdoch	79af04d95a	increase version to v1.4.2	2023-03-06 12:31:44 +01:00
schlagmichdoch	954e9c7c3a	Merge pull request #65 from schlagmichdoch/pairdrop_cli_add_firefox_fallback pairdrop-cli: add fallback if navigator.clipboard.readText() is not available	2023-03-06 12:25:54 +01:00
schlagmichdoch	c0d504f6a8	remove base64 event listeners manually on hide instead of once: true	2023-03-06 12:20:30 +01:00
schlagmichdoch	36e152dc7c	add { once: true } to deactivate-paste-mode event listener	2023-03-06 11:59:56 +01:00
schlagmichdoch	fdf024f378	pairdrop-cli: add fallback if navigator.clipboard.readText() is not available	2023-03-06 11:56:17 +01:00
schlagmichdoch	9f2e4c5f8f	fix displayName sometimes not exchanged on reload	2023-03-06 11:24:19 +01:00
schlagmichdoch	8e219914ec	Merge pull request #66 from schlagmichdoch/dependabot/npm_and_yarn/ua-parser-js-1.0.34 Bump ua-parser-js from 1.0.33 to 1.0.34	2023-03-06 10:53:35 +01:00
dependabot[bot]	d1273ef9cc	Bump ua-parser-js from 1.0.33 to 1.0.34 Bumps [ua-parser-js](https://github.com/faisalman/ua-parser-js) from 1.0.33 to 1.0.34. - [Release notes](https://github.com/faisalman/ua-parser-js/releases) - [Changelog](https://github.com/faisalman/ua-parser-js/blob/1.0.34/changelog.md) - [Commits](https://github.com/faisalman/ua-parser-js/compare/1.0.33...1.0.34) --- updated-dependencies: - dependency-name: ua-parser-js dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2023-03-06 05:12:00 +00:00
schlagmichdoch	27ac7786d0	increase version to v1.4.1	2023-03-06 03:48:23 +01:00
schlagmichdoch	edf2ab5eb3	revert some changes to regain stability	2023-03-06 03:47:24 +01:00
schlagmichdoch	c3863a9dd3	increase version to v1.4.0	2023-03-06 02:19:41 +01:00
schlagmichdoch	5934e94761	edit some styling of the display-name edit field	2023-03-06 00:40:53 +01:00
schlagmichdoch	1bc23dc4b3	fix read rtcConfig.json must be parsed as JSON..	2023-03-06 00:16:33 +01:00
schlagmichdoch	cc78b34d2e	Revert making peerId ephemeral to prevent duplication of shown peers on reconnect. Implement peerIdHash to prevent rogue users from overtaking peerIds	2023-03-06 00:07:21 +01:00
schlagmichdoch	f34f5bd4b2	tidy up code, add tooltip to device name and change color and bg-color of device-name	2023-03-06 00:07:21 +01:00
schlagmichdoch	b2f6a75c99	Merge pull request #60 from ChaosExAnima/master Updates CLI to work with OSX base64	2023-03-05 00:43:37 +01:00
Echo	82138c06f3	Updates CLI to work with OSX base64	2023-03-04 15:53:13 -05:00
schlagmichdoch	ee820ed6e0	Merge pull request #57 from schlagmichdoch/enable_renaming New feature: You can now change your display name	2023-03-04 20:53:41 +01:00
schlagmichdoch	b7e7fd1b68	Merge branch 'master' into enable_renaming	2023-03-04 20:52:10 +01:00
schlagmichdoch	96ed0e53b1	apply styling to clarify that the display-name is editable	2023-03-04 20:50:52 +01:00
schlagmichdoch	77b76a3b8d	reduce reconnect timers to 1s	2023-03-04 15:46:26 +01:00
schlagmichdoch	e37f9bd9fb	fix display name offset in styles.css	2023-03-04 15:44:42 +01:00
schlagmichdoch	451173caac	Add possibility to change the display name to the README.md	2023-03-03 19:10:24 +01:00
schlagmichdoch	460e8ec79c	change cursor to clarify that the display name is editable	2023-03-03 17:43:03 +01:00
schlagmichdoch	002b31a113	merge master into branch	2023-03-03 17:40:10 +01:00
schlagmichdoch	1eb53498b1	add localStorage fallback to fix renaming on private tabs and fix Firefox inserting linebreaks into edited divs	2023-03-02 15:06:22 +01:00
schlagmichdoch	d56ee87437	- Enable renaming of own display name permanently via UI - Make peerId completely ephemeral - Stabilize RTCConnection by closing connections cleanly	2023-03-01 21:38:36 +01:00