increase version to v1.8.0

Bump ua-parser-js from 1.0.35 to 1.0.36

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,8 +1,8 @@
 ---
 name: Bug Report
 about: Create a report to help us improve. Please check the FAQ first.
-title: 'Bug:/Enhancement:/Feature Request: '
-labels: ''
+title: '[Bug] '
+labels: 'bug'
 assignees: ''
 
 ---
@@ -34,12 +34,17 @@ If applicable, add screenshots to help explain your problem.
  - Browser [e.g. stock browser, safari]
  - Version [e.g. 22]
 
-**Self-Hosted**
+**Bug occurs on official PairDrop instance https://pairdrop.net/**
+No | Yes
+Version: v1.8.0
+
+**Bug occurs on self-hosted PairDrop instance**
 No | Yes
 
 **Self-Hosted Setup**
 Proxy: Nginx | Apache2
 Deployment: docker run | docker-compose | npm run start:prod
+Version: v1.8.0
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/enhancement.md

@@ -0,0 +1,20 @@
+---
+name: Enhancement
+about: Enhancements and feature requests are always welcome. See discussions regarding central topics.
+title: '[Enhancement] '
+labels: 'enhancement'
+assignees: ''
+
+---
+
+**What problem is solved by the new feature**
+What's the motivation for this topic
+
+**Describe the feature**
+A clear and concise description of what the new feature/enhancement is.
+
+**Drafts**
+Screenshots of Draw.io graph or drawn sketch.
+
+**Additional context**
+Add any other context here.

README.md

@@ -20,8 +20,12 @@
 ## Features
 [PairDrop](https://pairdrop.net) is a sublime alternative to AirDrop that works on all platforms.
 
-Send images, documents or text via peer to peer connection to devices in the same local network/Wi-Fi or to paired devices.
-As it is web based, it runs on all devices.
+- File Sharing on your local network
+  - Send images, documents or text via peer to peer connection to devices on the same local network.
+- Internet Transfers
+  - Join temporary public rooms to transfer files easily over the internet!
+- Web-Application 
+  - As it is web based, it runs on all devices.
 
 You want to quickly send a file from your phone to your laptop?
 <br>You want to share photos in original quality with friends that use a mixture of Android and iOS?
@@ -32,14 +36,29 @@ You want to quickly send a file from your phone to your laptop?
 Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 
 ## Differences to Snapdrop
+<details><summary>Click to expand</summary>
 
-### 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.).
+### Paired Devices and Public Rooms - Internet Transfer
+* Transfer files over the internet between paired devices or by entering temporary public rooms.
+* Connect to devices in complex network environments (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 the PairDrop TURN server.
+* Devices outside your local network that are behind a NAT are connected automatically via the PairDrop TURN server.
+* Connect to devices on your mobile hotspot.
+* You will always discover devices on your local network. Paired devices and devices in the same public room are shown additionally.
+
+#### Persistent Device Pairing
+* Pair your devices via a 6-digit code or a QR-Code.
+* Paired devices will always find each other via shared secrets independently of their local network. 
+* Paired devices are persistent. You find your devices even after reopening PairDrop.
+* You can edit and unpair devices easily
+* Ideal to always connect easily to your own devices
+
+#### Temporary Public Rooms
+* Enter a public room via a 5-letter code or a QR-Code.
+* Enter a public room to temporarily connect to devices outside your local network.
+* All devices in the same public room see each other mutually.
+* Public rooms are temporary. Public rooms are left as soon as PairDrop is closed.
+* Ideal to connect easily to others in complex network situations or over the internet.
 
 ### [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 files are downloaded automatically if possible.
@@ -66,13 +85,12 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * Lots of stability fixes (Thanks [@MWY001](https://github.com/MWY001) [@skiby7](https://github.com/skiby7) and [@willstott101](https://github.com/willstott101))
 * To host PairDrop on your local network (e.g. on Raspberry Pi): [All peers connected with private IPs are discoverable by each other](https://github.com/RobinLinus/snapdrop/pull/558)
 * When hosting PairDrop yourself you can [set your own STUN/TURN servers](/docs/host-your-own.md#specify-stunturn-servers)
+* Built-in translations
+
+</details>
 
 ## Screenshots
-<div align="center">
-
-![Pairdrop Preview](/docs/pairdrop_screenshot_mobile.gif)
-
-</div>
+<img src="https://raw.githubusercontent.com/schlagmichdoch/PairDrop/master/docs/pairdrop_screenshot_mobile.gif" style="max-height: 50vh">
 
 ## PairDrop is built with the following awesome technologies:
 * Vanilla HTML5 / ES6 / CSS3 frontend
@@ -82,23 +100,29 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * [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
+* [Weblate](https://weblate.org/) Web based localization tool
 
 Have any questions? Read our [FAQ](/docs/faq.md).
 
 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 and the server.
-
-To contribute and support:<br>
+## Support PairDrop
 <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>
 
+PairDrop is free and always will be.
+Still, we have to pay for the domain and the server.
+
+To contribute and support, please use BuyMeACoffee via the button above.
+
 Thanks a lot for supporting free and open software!
 
-To support the original Snapdrop and its creator go to [his GitHub page](https://github.com/RobinLinus/snapdrop).
+## Translate PairDrop
+<a href="https://hosted.weblate.org/engage/pairdrop/">
+<img src="https://hosted.weblate.org/widget/pairdrop/pairdrop-spa/open-graph.png" alt="Translation status" style="max-height: 30vh" />
+</a>
 
 ## How to contribute
 

docs/docker-swarm-usage.md

@@ -2,42 +2,46 @@
 
 ## Healthcheck
 
-The [Docker Image](../Dockerfile) includes a Healthcheck with the following options:
+The [Docker Image](../Dockerfile) includes a health check 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.
-
+> Specifies the time interval to run the health check. \
+> In this case, the health check is 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.
-
+> Specifies the amount of time to wait for a response from the \"HEALTHCHECK\" command. \
+> If the response does not arrive within 10 seconds, the health check fails.
 <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.
-
+> 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.
-
+> 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.
+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 fails.
 
-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.
+Overall, this \"HEALTHCHECK\" instruction is defining a health check process \
+that runs every 30 seconds, and waits up to 10 seconds for a response, \
+begins 5 seconds after the container is started, and retries up to 3 times. \ 
+The health check attempts to connect to http://localhost:3000/ \
+and will considers the container unhealthy if unable to connect.
 

docs/faq.md

@@ -5,20 +5,18 @@
     Help! I can't install the PWA!
 </summary>
 
-if you are using a Chromium-based browser (Chrome, Edge, Brave, etc.), you can easily install PairDrop PWA on your desktop 
+if you are using a Chromium-based browser (Chrome, Edge, Vivaldi, 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 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/)
-
 <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. 
-
+See [this host your own section](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#testing-pwa-related-features) for more info.
 <br>
 
 </details>
@@ -28,12 +26,11 @@ See [this host your own section](https://github.com/schlagmichdoch/PairDrop/blob
     Shortcuts?
 </summary>
 
-Shortcuts!
+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`.
-
+- Close all "Send" and "Pair" dialogs by pressing `Esc`.
+- Copy a received message to the clipboard with `CTRL/⌘ + C`.
+- Accept file-transfer requests with `Enter` and decline with `Esc`.
 <br>
 
 </details>
@@ -44,28 +41,24 @@ Shortcuts!
 </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.
+It simply does not offer that option for images shared from a website.
 
-iOS Shortcuts to the win:
+iOS Shortcuts saves the day:
 I created a simple iOS shortcut that takes your photos and saves them to your gallery:
 https://routinehub.co/shortcut/13988/
-
-
 <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?
+    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)
-
-
+Yes, it finally is.
+* [Send files directly from the "Context" menu on Windows](/docs/how-to.md#send-files-directly-from-context-menu-on-windows)
+* [Send directly from the "Share" menu on iOS](/docs/how-to.md#send-directly-from-share-menu-on-ios)
+* [Send directly from the "Share" menu on Android](/docs/how-to.md#send-directly-from-share-menu-on-android)
 <br>
 
 </details>
@@ -75,71 +68,81 @@ Yes, it finally is!
     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)
-
+Yes.
 
+* [Send directly from a command-line interface](/docs/how-to.md#send-directly-via-command-line-interface)
 <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?
+    Are there any third-party Apps?
 </summary>
 
-Here's a list of some third-party apps compatible with PairDrop:
+These third-party apps are 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?
+    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.
+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 the 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).
+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?
+    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.
+Files are sent directly between peers.
+PairDrop doesn't even use a database.
+If curious, study [the server](https://github.com/schlagmichdoch/pairdrop/blob/master/index.js).
+WebRTC encrypts the files in transit.
 
-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 the 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?
+    What about security? Are my files encrypted while sent between the computers?
 </summary>
 
-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.
-
-
+Yes. Your files are sent using WebRTC, encrypting them in transit.
+To ensure the connection is secure and there is no [MITM](https://wikiless.org/wiki/Man-in-the-middle_attack),
+compare the security number shown under the device name on both devices.
+The security number is different for every connection.
 <br>
 
 </details>
@@ -149,18 +152,18 @@ Yes. Your files are sent using WebRTC, which encrypts them on transit. To ensure
     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.
+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.
+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)
+- [How to open a hotspot on macOS](https://support.apple.com/guide/mac-help/share-internet-connection-mac-network-users-mchlp1540/mac)
 - [Library to open a hotspot on Linux](https://github.com/lakinduakash/linux-wifi-hotspot)
 
 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.
-
-
+Then, all data should be sent directly between devices and not use your data plan.
 <br>
 
 </details>
@@ -170,10 +173,16 @@ Then, all data should be sent directly between devices and your data plan should
     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. 
+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. 
+Not facilitating optimal edge-cases means better flow for average users.
+Don't be sad. We may 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* or *Thinking, Fast and Slow*.
+Read *Insanely Simple: The Obsession that Drives Apple's Success*,
+and/or *Thinking, Fast and Slow* to learn more.
 
 
 <br>
@@ -182,17 +191,15 @@ If you want to learn more about simplicity you can read *Insanely Simple: The Ob
 
 <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? 
+    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
+* [Buy me a coffee](https://www.buymeacoffee.com/pairdrop) to pay for the domain and the server, and support libre 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
+* Do some security analysis and make suggestions.
 * To support the original Snapdrop and its creator go to [his GitHub page](https://github.com/RobinLinus/snapdrop)
-
-
 <br>
 
 </details>
@@ -202,8 +209,7 @@ If you want to learn more about simplicity you can read *Insanely Simple: The Ob
     How does it work?
 </summary>
 
-[See here for Information about the Technical Implementation](/docs/technical-documentation.md)
-
+[See here for info about the technical implementation](/docs/technical-documentation.md)
 <br>
 
 </details>

docs/host-your-own.md

@@ -3,9 +3,14 @@ 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.
+> Beware that you have to host your own TURN server 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).
+> 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).
+
+> <b>PairDrop via HTTPS</b>
+> 
+> On some browsers PairDrop must be served over TLS in order for some feautures to work properly. These may include copying an incoming message via the 'copy' button, installing PairDrop as PWA, persistent pairing of devices and changing of the display name, and notifications. Naturally, this is also recommended to increase security.
 
 ## Deployment with Docker
 
@@ -15,9 +20,11 @@ The easiest way to get PairDrop up and running is by using Docker.
 docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 lscr.io/linuxserver/pairdrop
 ```
 
-> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+> You must use a server proxy to set the X-Forwarded-For \
+> to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
+> To prevent bypassing the proxy by reaching the docker container directly, \
+> `127.0.0.1` is specified in the run command.
 
 #### Options / Flags
 Set options by using the following flags in the `docker run` command:
@@ -30,22 +37,39 @@ Set options by using the following flags in the `docker run` command:
 > - 3000 -> `-p 127.0.0.1:3000:3000`
 > - 8080 -> `-p 127.0.0.1:8080:3000`
 ##### Rate limiting requests
-```
+```bash
 -e RATE_LIMIT=true
 ```
 > Limits clients to 1000 requests per 5 min
 
+##### IPv6 Localization
+```bash
+-e IPV6_LOCALIZE=4
+```
+> To enable Peer Discovery among IPv6 peers, you can specify a reduced number of segments \
+> of the client IPv6 address to be evaluated as the peer's IP. \
+> This can be especially useful when using Cloudflare as a proxy.
+> 
+> The flag must be set to an **integer** between `1` and `7`. \
+> The number represents the number of IPv6 [hextets](https://en.wikipedia.org/wiki/IPv6#Address_representation) \
+> to match the client IP against. The most common value would be `4`, \
+> which will group peers within the same `/64` subnet.
+
 ##### Websocket Fallback (for VPN)
 ```bash
 -e WS_FALLBACK=true
 ```
-> Provides PairDrop to clients with an included websocket fallback if the peer to peer WebRTC connection is not available to the client.
+> Provides PairDrop to clients with an included websocket fallback \
+> if the peer to peer WebRTC connection is not available to the client.
 >
-> This is not used on the official https://pairdrop.net, but you can activate it on your self-hosted instance.
-> This is especially useful if you connect to your instance via a VPN as most VPN services block WebRTC completely in order to hide your real IP address ([read more](https://privacysavvy.com/security/safe-browsing/disable-webrtc-chrome-firefox-safari-opera-edge/)).
+> This is not used on the official https://pairdrop.net website, \
+> but you can activate it on your self-hosted instance.
+> This is especially useful if you connect to your instance via a VPN (as most VPN services block WebRTC completely in order to hide your real IP address). ([Read more here](https://privacysavvy.com/security/safe-browsing/disable-webrtc-chrome-firefox-safari-opera-edge/)).
 >
-> **Warning:** All traffic sent between devices using this fallback is routed through the server and therefor not peer to peer!
-> Beware that the traffic routed via this fallback is readable by the server. Only ever use this on instances you can trust.
+> **Warning:** All traffic sent between devices using this fallback \
+> is routed through the server and therefor not peer to peer! \
+> Beware that the traffic routed via this fallback is readable by the server. \
+> Only ever use this on instances you can trust. \
 > Additionally, beware that all traffic using this fallback debits the servers data plan.
 
 ##### Specify STUN/TURN Servers
@@ -53,10 +77,12 @@ Set options by using the following flags in the `docker run` command:
 -e RTC_CONFIG="rtc_config.json"
 ```
 
-> Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration.
+> 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/
+> Alternatively, use a free, pre-configured TURN server like [OpenRelay]([url](https://www.metered.ca/tools/openrelay/))
 >
 > Default configuration:
 > ```json
@@ -70,19 +96,50 @@ Set options by using the following flags in the `docker run` command:
 > }
 > ```
 
+##### Debug Mode
+```bash
+-e DEBUG_MODE="true"
+```
+
+> Use this flag to enable debugging information about the connecting peers IP addresses. \
+> This is quite useful to check whether the [#HTTP-Server](#http-server) \
+> is configured correctly, so the auto-discovery feature works correctly. \
+> Otherwise, all clients discover each other mutually, independently of their network status.
+> 
+> If this flag is set to `"true"` each peer that connects to the PairDrop server will produce a log to STDOUT like this:
+> ```
+> ----DEBUGGING-PEER-IP-START----
+> remoteAddress: ::ffff:172.17.0.1
+> x-forwarded-for: 19.117.63.126
+> cf-connecting-ip: undefined
+> PairDrop uses: 19.117.63.126
+> IP is private: false
+> if IP is private, '127.0.0.1' is used instead
+> ----DEBUGGING-PEER-IP-END----
+> ```
+> If the IP PairDrop uses is the public IP of your device, everything is set up correctly. \ 
+>To find out your devices public IP visit https://www.whatismyip.com/.
+> 
+> To preserve your clients' privacy, **never use this flag in production!** 
+
+
 <br>
 
 ### Docker Image from GHCR
 ```bash
 docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ghcr.io/schlagmichdoch/pairdrop npm run start:prod 
 ```
-> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+> You must use a server proxy to set the X-Forwarded-For to prevent \
+> all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
+> To prevent bypassing the proxy by reaching the Docker container directly, \
+> `127.0.0.1` is specified in the run command.
 >
-> To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)
+> 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)
+> The Docker Image includes a healthcheck. \
+> Read more about [Docker Swarm Usage](docker-swarm-usage.md#docker-swarm-usage).
 
 ### Docker Image self-built
 #### Build the image
@@ -97,13 +154,17 @@ docker build --pull . -f Dockerfile -t pairdrop
 ```bash
 docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 -it pairdrop npm run start:prod
 ```
-> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+> You must use a server proxy to set the X-Forwarded-For \
+> to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
+> To prevent bypassing the proxy by reaching the Docker container \
+> directly, `127.0.0.1` is specified in the run command.
 >
-> To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)
+> 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)
+> The Docker Image includes a Healthcheck. \
+Read more about [Docker Swarm Usage](docker-swarm-usage.md#docker-swarm-usage).
 
 <br>
 
@@ -129,9 +190,11 @@ services:
 
 Run the compose file with `docker compose up -d`.
 
-> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+> You must use a server proxy to set the X-Forwarded-For \
+> to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
+> To prevent bypassing the proxy by reaching the Docker container \
+> directly, `127.0.0.1` is specified in the run command.
 
 <br>
 
@@ -157,7 +220,7 @@ or
 npm start
 ```
 
-> Remember to check your IP Address using your OS command to see where you can access the server.
+> Remember to check your IP address using your OS command to see where you can access the server.
 
 > By default, the node server listens on port 3000.
 
@@ -175,6 +238,13 @@ $env:PORT=3010; npm start
 ```
 > Specify the port PairDrop is running on. (Default: 3000)
 
+#### IPv6 Localization
+```bash
+IPV6_LOCALIZE=4
+```
+> Truncate a portion of the client IPv6 address to make peers more discoverable. \
+> See [Options/Flags](#options--flags) above.
+
 #### Specify STUN/TURN Server
 On Unix based systems
 ```bash
@@ -184,10 +254,12 @@ On Windows
 ```bash
 $env:RTC_CONFIG="rtc_config.json"; npm start 
 ```
-> Specify the STUN/TURN servers PairDrop clients use by setting `RTC_CONFIG` to a JSON file including the configuration.
+> 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/ 
+> To host your own TURN server you can follow this guide: \
+> https://gabrieltanner.org/blog/turn-server/ 
 >
 > Default configuration:
 > ```json
@@ -201,6 +273,39 @@ $env:RTC_CONFIG="rtc_config.json"; npm start
 > }
 > ```
 
+#### Debug Mode
+On Unix based systems
+```bash
+DEBUG_MODE="true" npm start
+```
+On Windows
+```bash
+$env:DEBUG_MODE="true"; npm start 
+```
+
+> Use this flag to enable debugging info about the connecting peers IP addresses. \
+> This is quite useful to check whether the [#HTTP-Server](#http-server) \
+> is configured correctly, so the auto discovery feature works correctly. \
+> Otherwise, all clients discover each other mutually, independently of their network status.
+>
+> If this flag is set to `"true"` each peer that connects to the \
+> PairDrop server will produce a log to STDOUT like this:
+> ```
+> ----DEBUGGING-PEER-IP-START----
+> remoteAddress: ::ffff:172.17.0.1
+> x-forwarded-for: 19.117.63.126
+> cf-connecting-ip: undefined
+> PairDrop uses: 19.117.63.126
+> IP is private: false
+> if IP is private, '127.0.0.1' is used instead
+> ----DEBUGGING-PEER-IP-END----
+> ```
+> If the IP PairDrop uses is the public IP of your device everything is set up correctly. \
+>Find your devices public IP by visiting https://www.whatismyip.com/.
+>
+> Preserve your clients' privacy. **Never use this flag in production!**
+
+
 ### Options / Flags
 #### Local Run
 ```bash
@@ -208,9 +313,11 @@ npm start -- --localhost-only
 ```
 > Only allow connections from localhost.
 > 
-> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+> You must use a server proxy to set the X-Forwarded-For \
+> to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> Use this when deploying PairDrop with node to prevent bypassing the proxy by reaching the docker container directly.
+> Use this when deploying PairDrop with node to prevent \
+> bypassing the proxy by reaching the Docker container directly.
 
 #### Automatic restart on error
 ```bash
@@ -232,13 +339,19 @@ npm start -- --rate-limit
 ```bash
 npm start -- --include-ws-fallback
 ```
-> Provides PairDrop to clients with an included websocket fallback if the peer to peer WebRTC connection is not available to the client.
+> Provides PairDrop to clients with an included websocket fallback \
+> if the peer to peer WebRTC connection is not available to the client.
 >
-> This is not used on the official https://pairdrop.net, but you can activate it on your self-hosted instance.
-> This is especially useful if you connect to your instance via a VPN as most VPN services block WebRTC completely in order to hide your real IP address ([read more](https://privacysavvy.com/security/safe-browsing/disable-webrtc-chrome-firefox-safari-opera-edge/)).
+> This is not used on the official https://pairdrop.net, \
+but you can activate it on your self-hosted instance. \
+> This is especially useful if you connect to your instance \
+> via a VPN as most VPN services block WebRTC completely in order to hide your real IP address.
+> ([Read more](https://privacysavvy.com/security/safe-browsing/disable-webrtc-chrome-firefox-safari-opera-edge/)).
 > 
-> **Warning:** All traffic sent between devices using this fallback is routed through the server and therefor not peer to peer!
-> Beware that the traffic routed via this fallback is readable by the server. Only ever use this on instances you can trust.
+> **Warning:** All traffic sent between devices using this fallback \
+> is routed through the server and therefor not peer to peer! \
+> Beware that the traffic routed via this fallback is readable by the server. \
+> Only ever use this on instances you can trust. \
 > Additionally, beware that all traffic using this fallback debits the servers data plan.
 
 <br>
@@ -252,10 +365,14 @@ npm run start:prod
 ```bash
 npm run start:prod -- --localhost-only --include-ws-fallback
 ```
-> To prevent connections to the node server from bypassing the proxy server you should always use "--localhost-only" on production.
+> To prevent connections to the node server from bypassing \
+> the proxy server you should always use "--localhost-only" on production.
 
 ## HTTP-Server
-When running PairDrop, the `X-Forwarded-For` header has to be set by a proxy. Otherwise, all clients will be mutually visible.
+When running PairDrop, the `X-Forwarded-For` header has to be set by a proxy. \
+Otherwise, all clients will be mutually visible.
+
+To check if your setup is configured correctly [use the environment variable `DEBUG_MODE="true"`](#debug-mode).
 
 ### Using nginx
 #### Allow http and https requests
@@ -334,10 +451,10 @@ a2enmod proxy_wstunnel
 
 <br>
 
-Create a new configuration file under `/etc/apache2/sites-available` (on debian)
+Create a new configuration file under `/etc/apache2/sites-available` (on Debian)
 
 **pairdrop.conf**
-#### Allow http and https requests
+#### Allow HTTP and HTTPS requests
 ```apacheconf
 <VirtualHost *:80>	
 	ProxyPass / http://127.0.0.1:3000/
@@ -354,7 +471,7 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian)
 	RewriteRule ^/?(.*) "wws://127.0.0.1:3000/$1" [P,L]
 </VirtualHost>
 ```
-#### Automatic http to https redirect:
+#### Automatic HTTP to HTTPS redirect:
 ```apacheconf
 <VirtualHost *:80>	
    Redirect permanent / https://127.0.0.1:3000/
@@ -367,7 +484,7 @@ Create a new configuration file under `/etc/apache2/sites-available` (on debian)
 	RewriteRule ^/?(.*) "wws://127.0.0.1:3000/$1" [P,L]
 </VirtualHost>
 ```
-Activate the new virtual host and reload apache:
+Activate the new virtual host and reload Apache:
 ```bash
 a2ensite pairdrop
 ```
@@ -391,28 +508,38 @@ Then, clone the repository and run docker-compose:
     
     docker-compose up -d
 ```
-Now point your browser to `http://localhost:8080`.
+Now point your web browser to `http://localhost:8080`.
 
-- To restart the containers run `docker-compose restart`.
-- To stop the containers run `docker-compose stop`.
-- To debug the NodeJS server run `docker logs pairdrop_node_1`.
+- To restart the containers, run `docker-compose restart`.
+- To stop the containers, run `docker-compose stop`.
+- To debug the NodeJS server, run `docker logs pairdrop_node_1`.
 
 
 <br>
 
 ## Testing PWA related features
-PWAs require that the app is served under a correctly set up and trusted TLS endpoint.
+PWAs requires the app to be served under a correctly set up and trusted TLS endpoint.
 
-The nginx container creates a CA certificate and a website certificate for you. To correctly set the common name of the certificate, you need to change the FQDN environment variable in `docker/fqdn.env` to the fully qualified domain name of your workstation.
+The NGINX container creates a CA certificate and a website certificate for you. \
+To correctly set the common name of the certificate, \
+you need to change the FQDN environment variable in `docker/fqdn.env` \
+to the fully qualified domain name of your workstation.
 
-If you want to test PWA features, you need to trust the CA of the certificate for your local deployment. For your convenience, you can download the crt file from `http://<Your FQDN>:8080/ca.crt`. Install that certificate to the trust store of your operating system.
-- On Windows, make sure to install it to the `Trusted Root Certification Authorities` store.
-- On macOS, double-click the installed CA certificate in `Keychain Access`, expand `Trust`, and select `Always Trust` for SSL.
-- Firefox uses its own trust store. To install the CA, point Firefox at `http://<Your FQDN>:8080/ca.crt`. When prompted, select `Trust this CA to identify websites` and click OK.
-- When using Chrome, you need to restart Chrome so it reloads the trust store (`chrome://restart`). Additionally, after installing a new cert, you need to clear the Storage (DevTools -> Application -> Clear storage -> Clear site data).
+If you want to test PWA features, you need to trust the CA of the certificate for your local deployment. \
+For your convenience, you can download the crt file from `http://<Your FQDN>:8080/ca.crt`. \
+Install that certificate to the trust store of your operating system. \
+- On Windows, make sure to install it to the `Trusted Root Certification Authorities` store. \
+- On macOS, double-click the installed CA certificate in `Keychain Access`, \
+- expand `Trust`, and select `Always Trust` for SSL. \
+- Firefox uses its own trust store. To install the CA, \
+- point Firefox at `http://<Your FQDN>:8080/ca.crt`. \
+- When prompted, select `Trust this CA to identify websites` and click *OK*. \
+- When using Chrome, you need to restart Chrome so it reloads the trust store (`chrome://restart`). \
+- Additionally, after installing a new cert, \
+- you need to clear the Storage (DevTools → Application → Clear storage → Clear site data).
 
 Please note that the certificates (CA and webserver cert) expire after a day.
-Also, whenever you restart the nginx docker, container new certificates are created.
+Also, whenever you restart the NGINX Docker, container new certificates are created.
 
 The site is served on `https://<Your FQDN>:8443`.
 

docs/how-to.md

@@ -5,7 +5,7 @@ The [File Handling API](https://learn.microsoft.com/en-us/microsoft-edge/progres
 
 This is still experimental and must be enabled via a flag **before** the PWA is installed to Windows.
 1. [Enabled feature in Edge](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files#enable-the-file-handling-api)
-2. Install PairDrop by visiting https://pairdrop.net/ with the Edge browser and install it as described [here](faq.md#help--i-cant-install-the-pwa-).
+2. Install PairDrop by visiting https://pairdrop.net/ with the Edge web browser and install it as described [here](faq.md#help--i-cant-install-the-pwa-).
 3. You are done! You can now send most files one at a time via PairDrop:
    
    _context menu > Open with > PairDrop_
@@ -13,7 +13,8 @@ This is still experimental and must be enabled via a flag **before** the PWA is
 [//]: # (Todo: add screenshots)
 
 ### Sending multiple files to PairDrop
-Outstandingly, it is also possible to send multiple files to PairDrop via the context menu by adding PairDrop to the `Send to` menu:
+Outstandingly, it is also possible to send multiple files to PairDrop \
+via the context menu by adding PairDrop to the `Send to` menu:
 1. [Register PairDrop as file handler](#registering-to-open-files-with-pairdrop) 
 2. Hit Windows Key+R, type: `shell:programs` and hit Enter.
 3. Copy the PairDrop shortcut from the directory
@@ -26,7 +27,8 @@ Outstandingly, it is also possible to send multiple files to PairDrop via the co
 [//]: # (Todo: add screenshots)
 
 ## Send directly from share menu on iOS
-I created an iOS shortcut to send images, files, folder, URLs or text directly from the share-menu 
+I created an iOS shortcut to send images, files, folder, URLs \
+or text directly from the share-menu 
 https://routinehub.co/shortcut/13990/
 
 [//]: # (Todo: add doku with screenshots)
@@ -63,7 +65,7 @@ On Windows Command Prompt you need to use bash: `bash pairdrop -h`
 Download the bash file: [pairdrop-cli/pairdrop](/pairdrop-cli/pairdrop).
 
 #### Linux
-1. Put file in a preferred folder e.g. `/usr/local/bin`
+1. Put the file in a preferred folder e.g. `/usr/local/bin`
 2. Make sure the bash file is executable. Otherwise, use `chmod +x pairdrop`
 3. Add absolute path of the folder to PATH variable to make `pairdrop` available globally by executing
    `export PATH=$PATH:/opt/pairdrop-cli`
@@ -74,7 +76,7 @@ Download the bash file: [pairdrop-cli/pairdrop](/pairdrop-cli/pairdrop).
 #### Windows
 1. Put file in a preferred folder e.g. `C:\Users\Public\pairdrop-cli`
 2. Search for and open `Edit environment variables for your account`
-3. Click `Environment Variables...`
+3. Click `Environment Variables…`
 4. Under *System Variables* select `Path` and click *Edit...*
 5. Click *New*, insert the preferred folder (`C:\Users\Public\pairdrop-cli`), click *OK* until all windows are closed
 6. Reopen Command prompt window

docs/technical-documentation.md

@@ -3,48 +3,80 @@
 
 Encryption is mandatory for WebRTC connections and completely done by the browser itself.
 
-When the peers are first connecting, a channel is created by exchanging their signaling information.
-This signaling information includes some sort of public key and is specific to the clients ip address.
-That is what the STUN Server is used for: it simply returns your public IP address as you only know your local ip address
+When the peers are first connecting, \
+a channel is created by exchanging their signaling info. \
+This signaling information includes some sort of public key \
+and is specific to the clients IP address. \
+That is what the STUN Server is used for: \
+it simply returns your public IP address \
+as you only know your local ip address \
 if behind a NAT (router).
 
-The transfer of the signaling information is done by the PairDrop / Snapdrop server using secure websockets.
-After that the channel itself is completely peer-2-peer and all information can only be decrypted by the receiver.
-When the two peers are on the same network or when they are not behind any NAT system (which they are always for classic
-Snapdrop and for not paired users on PairDrop) the files are send directly peer to peer.
+The transfer of the signaling info is done by the \
+PairDrop / Snapdrop server using secure websockets. \
+After that the channel itself is completely peer-to-peer \
+and all info can only be decrypted by the receiver. \
+When the two peers are on the same network \
+or when they are not behind any NAT system \
+(which they are always for classic \
+Snapdrop and for not paired users on PairDrop) \
+the files are send directly peer-to-peer.
 
-When a user is behind a NAT (behind a router) the contents are channeled through a TURN server.
-But again, the contents send via the channel can only be decrypted by the receiver. So a rogue TURN server could only 
-see that there is a connection, but not what is sent. Obviously, connections which are channeled through a TURN server
-are not as fast as peer to peer.
+When a user is behind a NAT (behind a router) \
+the contents are channeled through a TURN server. \
+But again, the contents send via the channel \
+can only be decrypted by the receiver. \
+So a rogue TURN server could only \
+see that there is a connection, but not what is sent. \
+Obviously, connections which are channeled through a TURN server \
+are not as fast as peer-to-peer.
 
-The selection whether a TURN server is needed or not is also done automatically by the browser. 
-It simply iterated through the configured RTC iceServers and checks what works. Only if the STUN server is not sufficient,
+The selection whether a TURN server is needed \
+or not is also done automatically by the web browser. \
+It simply iterated through the configured \
+RTC iceServers and checks what works. \
+Only if the STUN server is not sufficient, \
 the TURN server is used.
 
 ![img](https://www.wowza.com/wp-content/uploads/WeRTC-Encryption-Diagrams-01.jpg)
 _Diagram created by wowza.com_
 
-Good thing: if your device has an IPv6 address it is uniquely reachable by that address. As I understand it, when both devices are using IPv6 addresses there is no need for a TURN server in any scenario.
+Good thing: if your device has an IPv6 address \
+it is uniquely reachable by that address. \
+As I understand it, when both devices are using \
+IPv6 addresses there is no need for a TURN server in any scenario.
 
-To learn more take a look at https://www.wowza.com/blog/webrtc-encryption-and-security which gives a good insight into stun, turn and webrtc
+Learn more by reading https://www.wowza.com/blog/webrtc-encryption-and-security \
+which gives a good insight into STUN, TURN and WebRTC.
 
 
 ## Device Pairing
 
 The pairing functionality uses the [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API).
 
-It works by creating long secrets that are served by the server to the initiating and requesting pair peer,
-when the inserted key is correct. These long secrets are then saved to an indexedDB database in the browser. 
-IndexedDB is somewhat the successor of localStorage as saved data is shared between all tabs.
-It goes one step further by making the data persistent and available offline if implemented to a PWA.
+It works by creating long secrets that are served \
+by the server to the initiating and requesting pair peer, \
+when the inserted key is correct. \
+These long secrets are then saved to an \
+indexedDB database in the web browser. \
+IndexedDB is somewhat the successor of localStorage \
+as saved data is shared between all tabs. \
+It goes one step further by making the data persistent \
+and available offline if implemented to a PWA.
 
-All secrets a client has saved to its database are send to the PairDrop server. Peers with a common secret are discoverable
-to each other analog to peers with the same ip-address are discoverable to each other.
+All secrets a client has saved to its database \
+are sent to the PairDrop server. \
+Peers with a common secret are discoverable \
+to each other analog to peers with the same \
+IP address are discoverable by each other.
 
-What I really like about this approach, and the reason why I implemented it, is that devices on the same network are always
-visible regardless whether any devices are paired or not. The main user flow is never obstructed. Paired devices are simply
-shown additionally. This makes it in my idea better than the idea of using a room system as [discussed here](https://github.com/RobinLinus/snapdrop/pull/214).
+What I really like about this approach (and the reason I implemented it) \
+is that devices on the same network are always \
+visible regardless whether any devices are paired or not. \
+The main user flow is never obstructed. \
+Paired devices are simply shown additionally. \
+This makes it in my idea better than the idea of \
+using a room system as [discussed here](https://github.com/RobinLinus/snapdrop/pull/214).
 
 
 [< Back](/README.md)

index.js

@@ -90,6 +90,23 @@ if (process.argv.includes('--include-ws-fallback')) {
     app.use(express.static('public'));
 }
 
+const debugMode = process.env.DEBUG_MODE === "true";
+
+if (debugMode) {
+    console.log("DEBUG_MODE is active. To protect privacy, do not use in production.")
+}
+
+let ipv6_lcl;
+if (process.env.IPV6_LOCALIZE) {
+    ipv6_lcl = parseInt(process.env.IPV6_LOCALIZE);
+    if (!ipv6_lcl || !(0 < ipv6_lcl && ipv6_lcl < 8)) {
+        console.error("IPV6_LOCALIZE must be an integer between 1 and 7");
+        return;
+    }
+
+    console.log("IPv6 client IPs will be localized to", ipv6_lcl, ipv6_lcl === 1 ? "segment" : "segments");
+}
+
 app.use(function(req, res) {
     res.redirect('/');
 });
@@ -113,8 +130,10 @@ class PairDropServer {
         this._wss = new WebSocket.Server({ server });
         this._wss.on('connection', (socket, request) => this._onConnection(new Peer(socket, request)));
 
-        this._rooms = {};
-        this._roomSecrets = {};
+        this._rooms = {}; // { roomId: peers[] }
+        this._roomSecrets = {}; // { pairKey: roomSecret }
+
+        this._keepAliveTimers = {};
 
         console.log('PairDrop is running on port', port);
     }
@@ -122,12 +141,13 @@ class PairDropServer {
     _onConnection(peer) {
         peer.socket.on('message', message => this._onMessage(peer, message));
         peer.socket.onerror = e => console.error(e);
+
         this._keepAlive(peer);
+
         this._send(peer, {
             type: 'rtc-config',
             config: rtcConfig
         });
-        this._joinRoom(peer);
 
         // send displayName
         this._send(peer, {
@@ -136,7 +156,7 @@ class PairDropServer {
                 displayName: peer.name.displayName,
                 deviceName: peer.name.deviceName,
                 peerId: peer.id,
-                peerIdHash: peer.id.hashCode128BitSalted()
+                peerIdHash: hasher.hashCodeSalted(peer.id)
             }
         });
     }
@@ -154,16 +174,16 @@ class PairDropServer {
                 this._onDisconnect(sender);
                 break;
             case 'pong':
-                sender.lastBeat = Date.now();
+                this._keepAliveTimers[sender.id].lastBeat = Date.now();
+                break;
+            case 'join-ip-room':
+                this._joinIpRoom(sender);
                 break;
             case 'room-secrets':
                 this._onRoomSecrets(sender, message);
                 break;
-            case 'room-secret-deleted':
-                this._onRoomSecretDeleted(sender, message);
-                break;
-            case 'room-secrets-cleared':
-                this._onRoomSecretsCleared(sender, message);
+            case 'room-secrets-deleted':
+                this._onRoomSecretsDeleted(sender, message);
                 break;
             case 'pair-device-initiate':
                 this._onPairDeviceInitiate(sender);
@@ -174,8 +194,17 @@ class PairDropServer {
             case 'pair-device-cancel':
                 this._onPairDeviceCancel(sender);
                 break;
-            case 'resend-peers':
-                this._notifyPeers(sender);
+            case 'regenerate-room-secret':
+                this._onRegenerateRoomSecret(sender, message);
+                break;
+            case 'create-public-room':
+                this._onCreatePublicRoom(sender);
+                break;
+            case 'join-public-room':
+                this._onJoinPublicRoom(sender, message);
+                break;
+            case 'leave-public-room':
+                this._onLeavePublicRoom(sender);
                 break;
             case 'signal':
             default:
@@ -184,7 +213,9 @@ class PairDropServer {
     }
 
     _signalAndRelay(sender, message) {
-        const room = message.roomType === 'ip' ? sender.ip : message.roomSecret;
+        const room = message.roomType === 'ip'
+            ? sender.ip
+            : message.roomId;
 
         // relay message to recipient
         if (message.to && Peer.isValidUuid(message.to) && this._rooms[room]) {
@@ -200,89 +231,88 @@ class PairDropServer {
     }
 
     _onDisconnect(sender) {
-        this._leaveRoom(sender, 'ip', '', true);
+        this._disconnect(sender);
+    }
+
+    _disconnect(sender) {
+        this._removePairKey(sender.pairKey);
+        sender.pairKey = null;
+
+        this._cancelKeepAlive(sender);
+        delete this._keepAliveTimers[sender.id];
+
+        this._leaveIpRoom(sender, true);
         this._leaveAllSecretRooms(sender, true);
-        this._removeRoomKey(sender.roomKey);
-        sender.roomKey = null;
+        this._leavePublicRoom(sender, true);
+
+        sender.socket.terminate();
     }
 
     _onRoomSecrets(sender, message) {
+        if (!message.roomSecrets) return;
+
         const roomSecrets = message.roomSecrets.filter(roomSecret => {
-            return /^[\x00-\x7F]{64}$/.test(roomSecret);
+            return /^[\x00-\x7F]{64,256}$/.test(roomSecret);
         })
+
+        if (!roomSecrets) return;
+
         this._joinSecretRooms(sender, roomSecrets);
     }
 
-    _onRoomSecretDeleted(sender, message) {
-        this._deleteSecretRoom(sender, message.roomSecret)
-    }
-
-    _onRoomSecretsCleared(sender, message) {
+    _onRoomSecretsDeleted(sender, message) {
         for (let i = 0; i<message.roomSecrets.length; i++) {
-            this._deleteSecretRoom(sender, message.roomSecrets[i]);
+            this._deleteSecretRoom(message.roomSecrets[i]);
         }
     }
 
-    _deleteSecretRoom(sender, roomSecret) {
+    _deleteSecretRoom(roomSecret) {
         const room = this._rooms[roomSecret];
-        if (room) {
-            for (const peerId in room) {
-                const peer = room[peerId];
-                this._leaveRoom(peer, 'secret', roomSecret);
-                this._send(peer, {
-                    type: 'secret-room-deleted',
-                    roomSecret: roomSecret,
-                });
-            }
-        }
-        this._notifyPeers(sender);
-    }
+        if (!room) return;
 
-    getRandomString(length) {
-        let string = "";
-        while (string.length < length) {
-            let arr = new Uint16Array(length);
-            crypto.webcrypto.getRandomValues(arr);
-            arr = Array.apply([], arr); /* turn into non-typed array */
-            arr = arr.map(function (r) {
-                return r % 128
-            })
-            arr = arr.filter(function (r) {
-                /* strip non-printables: if we transform into desirable range we have a propability bias, so I suppose we better skip this character */
-                return r === 45 || r >= 47 && r <= 57 || r >= 64 && r <= 90 || r >= 97 && r <= 122;
+        for (const peerId in room) {
+            const peer = room[peerId];
+
+            this._leaveSecretRoom(peer, roomSecret, true);
+
+            this._send(peer, {
+                type: 'secret-room-deleted',
+                roomSecret: roomSecret,
             });
-            string += String.fromCharCode.apply(String, arr);
         }
-        return string.substring(0, length)
     }
 
     _onPairDeviceInitiate(sender) {
-        let roomSecret = this.getRandomString(64);
-        let roomKey = this._createRoomKey(sender, roomSecret);
-        if (sender.roomKey) this._removeRoomKey(sender.roomKey);
-        sender.roomKey = roomKey;
+        let roomSecret = randomizer.getRandomString(256);
+        let pairKey = this._createPairKey(sender, roomSecret);
+
+        if (sender.pairKey) {
+            this._removePairKey(sender.pairKey);
+        }
+        sender.pairKey = pairKey;
+
         this._send(sender, {
             type: 'pair-device-initiated',
             roomSecret: roomSecret,
-            roomKey: roomKey
+            pairKey: pairKey
         });
-        this._joinRoom(sender, 'secret', roomSecret);
+        this._joinSecretRoom(sender, roomSecret);
     }
 
     _onPairDeviceJoin(sender, message) {
-        if (sender.roomKeyRate >= 10) {
-            this._send(sender, { type: 'pair-device-join-key-rate-limit' });
+        if (sender.rateLimitReached()) {
+            this._send(sender, { type: 'join-key-rate-limit' });
             return;
         }
-        sender.roomKeyRate += 1;
-        setTimeout(_ => sender.roomKeyRate -= 1, 10000);
-        if (!this._roomSecrets[message.roomKey] || sender.id === this._roomSecrets[message.roomKey].creator.id) {
+
+        if (!this._roomSecrets[message.pairKey] || sender.id === this._roomSecrets[message.pairKey].creator.id) {
             this._send(sender, { type: 'pair-device-join-key-invalid' });
             return;
         }
-        const roomSecret = this._roomSecrets[message.roomKey].roomSecret;
-        const creator = this._roomSecrets[message.roomKey].creator;
-        this._removeRoomKey(message.roomKey);
+
+        const roomSecret = this._roomSecrets[message.pairKey].roomSecret;
+        const creator = this._roomSecrets[message.pairKey].creator;
+        this._removePairKey(message.pairKey);
         this._send(sender, {
             type: 'pair-device-joined',
             roomSecret: roomSecret,
@@ -293,139 +323,222 @@ class PairDropServer {
             roomSecret: roomSecret,
             peerId: sender.id
         });
-        this._joinRoom(sender, 'secret', roomSecret);
-        this._removeRoomKey(sender.roomKey);
+        this._joinSecretRoom(sender, roomSecret);
+        this._removePairKey(sender.pairKey);
     }
 
     _onPairDeviceCancel(sender) {
-        if (sender.roomKey) {
-            this._send(sender, {
-                type: 'pair-device-canceled',
-                roomKey: sender.roomKey,
-            });
-            this._removeRoomKey(sender.roomKey);
-        }
+        const pairKey = sender.pairKey
+
+        if (!pairKey) return;
+
+        this._removePairKey(pairKey);
+        this._send(sender, {
+            type: 'pair-device-canceled',
+            pairKey: pairKey,
+        });
     }
 
-    _createRoomKey(creator, roomSecret) {
-        let roomKey;
+    _onCreatePublicRoom(sender) {
+        let publicRoomId = randomizer.getRandomString(5, true).toLowerCase();
+
+        this._send(sender, {
+            type: 'public-room-created',
+            roomId: publicRoomId
+        });
+
+        this._joinPublicRoom(sender, publicRoomId);
+    }
+
+    _onJoinPublicRoom(sender, message) {
+        if (sender.rateLimitReached()) {
+            this._send(sender, { type: 'join-key-rate-limit' });
+            return;
+        }
+
+        if (!this._rooms[message.publicRoomId] && !message.createIfInvalid) {
+            this._send(sender, { type: 'public-room-id-invalid', publicRoomId: message.publicRoomId });
+            return;
+        }
+
+        this._leavePublicRoom(sender);
+        this._joinPublicRoom(sender, message.publicRoomId);
+    }
+
+    _onLeavePublicRoom(sender) {
+        this._leavePublicRoom(sender, true);
+        this._send(sender, { type: 'public-room-left' });
+    }
+
+    _onRegenerateRoomSecret(sender, message) {
+        const oldRoomSecret = message.roomSecret;
+        const newRoomSecret = randomizer.getRandomString(256);
+
+        // notify all other peers
+        for (const peerId in this._rooms[oldRoomSecret]) {
+            const peer = this._rooms[oldRoomSecret][peerId];
+            this._send(peer, {
+                type: 'room-secret-regenerated',
+                oldRoomSecret: oldRoomSecret,
+                newRoomSecret: newRoomSecret,
+            });
+            peer.removeRoomSecret(oldRoomSecret);
+        }
+        delete this._rooms[oldRoomSecret];
+    }
+
+    _createPairKey(creator, roomSecret) {
+        let pairKey;
         do {
             // get randomInt until keyRoom not occupied
-            roomKey = crypto.randomInt(1000000, 1999999).toString().substring(1); // include numbers with leading 0s
-        } while (roomKey in this._roomSecrets)
+            pairKey = crypto.randomInt(1000000, 1999999).toString().substring(1); // include numbers with leading 0s
+        } while (pairKey in this._roomSecrets)
 
-        this._roomSecrets[roomKey] = {
+        this._roomSecrets[pairKey] = {
             roomSecret: roomSecret,
             creator: creator
         }
 
-        return roomKey;
+        return pairKey;
     }
 
-    _removeRoomKey(roomKey) {
+    _removePairKey(roomKey) {
         if (roomKey in this._roomSecrets) {
             this._roomSecrets[roomKey].creator.roomKey = null
             delete this._roomSecrets[roomKey];
         }
     }
 
-    _joinRoom(peer, roomType = 'ip', roomSecret = '') {
-        const room = roomType === 'ip' ? peer.ip : roomSecret;
+    _joinIpRoom(peer) {
+        this._joinRoom(peer, 'ip', peer.ip);
+    }
 
-        if (this._rooms[room] && this._rooms[room][peer.id]) {
-            this._leaveRoom(peer, roomType, roomSecret);
+    _joinSecretRoom(peer, roomSecret) {
+        this._joinRoom(peer, 'secret', roomSecret);
+
+        // add secret to peer
+        peer.addRoomSecret(roomSecret);
+    }
+
+    _joinPublicRoom(peer, publicRoomId) {
+        // prevent joining of 2 public rooms simultaneously
+        this._leavePublicRoom(peer);
+
+        this._joinRoom(peer, 'public-id', publicRoomId);
+
+        peer.publicRoomId = publicRoomId;
+    }
+
+    _joinRoom(peer, roomType, roomId) {
+        // roomType: 'ip', 'secret' or 'public-id'
+        if (this._rooms[roomId] && this._rooms[roomId][peer.id]) {
+            // ensures that otherPeers never receive `peer-left` after `peer-joined` on reconnect.
+            this._leaveRoom(peer, roomType, roomId);
         }
 
         // if room doesn't exist, create it
-        if (!this._rooms[room]) {
-            this._rooms[room] = {};
+        if (!this._rooms[roomId]) {
+            this._rooms[roomId] = {};
         }
 
-        this._notifyPeers(peer, roomType, roomSecret);
+        this._notifyPeers(peer, roomType, roomId);
 
         // add peer to room
-        this._rooms[room][peer.id] = peer;
-        // add secret to peer
-        if (roomType === 'secret') {
-            peer.addRoomSecret(roomSecret);
-        }
+        this._rooms[roomId][peer.id] = peer;
     }
 
-    _leaveRoom(peer, roomType = 'ip', roomSecret = '', disconnect = false) {
-        const room = roomType === 'ip' ? peer.ip : roomSecret;
 
-        if (!this._rooms[room] || !this._rooms[room][peer.id]) return;
-        this._cancelKeepAlive(this._rooms[room][peer.id]);
+    _leaveIpRoom(peer, disconnect = false) {
+        this._leaveRoom(peer, 'ip', peer.ip, disconnect);
+    }
 
-        // delete the peer
-        delete this._rooms[room][peer.id];
+    _leaveSecretRoom(peer, roomSecret, disconnect = false) {
+        this._leaveRoom(peer, 'secret', roomSecret, disconnect)
 
-        if (roomType === 'ip') {
-            peer.socket.terminate();
-        }
-
-        //if room is empty, delete the room
-        if (!Object.keys(this._rooms[room]).length) {
-            delete this._rooms[room];
-        } else {
-            // notify all other peers
-            for (const otherPeerId in this._rooms[room]) {
-                const otherPeer = this._rooms[room][otherPeerId];
-                this._send(otherPeer, {
-                    type: 'peer-left',
-                    peerId: peer.id,
-                    roomType: roomType,
-                    roomSecret: roomSecret,
-                    disconnect: disconnect
-                });
-            }
-        }
         //remove secret from peer
-        if (roomType === 'secret') {
-            peer.removeRoomSecret(roomSecret);
+        peer.removeRoomSecret(roomSecret);
+    }
+
+    _leavePublicRoom(peer, disconnect = false) {
+        if (!peer.publicRoomId) return;
+
+        this._leaveRoom(peer, 'public-id', peer.publicRoomId, disconnect);
+
+        peer.publicRoomId = null;
+    }
+
+    _leaveRoom(peer, roomType, roomId, disconnect = false) {
+        if (!this._rooms[roomId] || !this._rooms[roomId][peer.id]) return;
+
+        // remove peer from room
+        delete this._rooms[roomId][peer.id];
+
+        // delete room if empty and abort
+        if (!Object.keys(this._rooms[roomId]).length) {
+            delete this._rooms[roomId];
+            return;
+        }
+
+        // notify all other peers that remain in room that peer left
+        for (const otherPeerId in this._rooms[roomId]) {
+            const otherPeer = this._rooms[roomId][otherPeerId];
+
+            let msg = {
+                type: 'peer-left',
+                peerId: peer.id,
+                roomType: roomType,
+                roomId: roomId,
+                disconnect: disconnect
+            };
+
+            this._send(otherPeer, msg);
         }
     }
 
-    _notifyPeers(peer, roomType = 'ip', roomSecret = '') {
-        const room = roomType === 'ip' ? peer.ip : roomSecret;
-        if (!this._rooms[room]) return;
+    _notifyPeers(peer, roomType, roomId) {
+        if (!this._rooms[roomId]) return;
 
-        // notify all other peers
-        for (const otherPeerId in this._rooms[room]) {
+        // notify all other peers that peer joined
+        for (const otherPeerId in this._rooms[roomId]) {
             if (otherPeerId === peer.id) continue;
-            const otherPeer = this._rooms[room][otherPeerId];
-            this._send(otherPeer, {
+            const otherPeer = this._rooms[roomId][otherPeerId];
+
+            let msg = {
                 type: 'peer-joined',
                 peer: peer.getInfo(),
                 roomType: roomType,
-                roomSecret: roomSecret
-            });
+                roomId: roomId
+            };
+
+            this._send(otherPeer, msg);
         }
 
-        // notify peer about the other peers
+        // notify peer about peers already in the room
         const otherPeers = [];
-        for (const otherPeerId in this._rooms[room]) {
+        for (const otherPeerId in this._rooms[roomId]) {
             if (otherPeerId === peer.id) continue;
-            otherPeers.push(this._rooms[room][otherPeerId].getInfo());
+            otherPeers.push(this._rooms[roomId][otherPeerId].getInfo());
         }
 
-        this._send(peer, {
+        let msg = {
             type: 'peers',
             peers: otherPeers,
             roomType: roomType,
-            roomSecret: roomSecret
-        });
+            roomId: roomId
+        };
+
+        this._send(peer, msg);
     }
 
     _joinSecretRooms(peer, roomSecrets) {
         for (let i=0; i<roomSecrets.length; i++) {
-            this._joinRoom(peer, 'secret', roomSecrets[i])
+            this._joinSecretRoom(peer, roomSecrets[i])
         }
     }
 
     _leaveAllSecretRooms(peer, disconnect = false) {
         for (let i=0; i<peer.roomSecrets.length; i++) {
-            this._leaveRoom(peer, 'secret', peer.roomSecrets[i], disconnect);
+            this._leaveSecretRoom(peer, peer.roomSecrets[i], disconnect);
         }
     }
 
@@ -438,24 +551,29 @@ class PairDropServer {
 
     _keepAlive(peer) {
         this._cancelKeepAlive(peer);
-        let timeout = 500;
-        if (!peer.lastBeat) {
-            peer.lastBeat = Date.now();
+        let timeout = 1000;
+
+        if (!this._keepAliveTimers[peer.id]) {
+            this._keepAliveTimers[peer.id] = {
+                timer: 0,
+                lastBeat: Date.now()
+            };
         }
-        if (Date.now() - peer.lastBeat > 2 * timeout) {
-            this._leaveRoom(peer);
-            this._leaveAllSecretRooms(peer);
+
+        if (Date.now() - this._keepAliveTimers[peer.id].lastBeat > 5 * timeout) {
+            // Disconnect peer if unresponsive for 10s
+            this._disconnect(peer);
             return;
         }
 
         this._send(peer, { type: 'ping' });
 
-        peer.timerId = setTimeout(() => this._keepAlive(peer), timeout);
+        this._keepAliveTimers[peer.id].timer = setTimeout(() => this._keepAlive(peer), timeout);
     }
 
     _cancelKeepAlive(peer) {
-        if (peer && peer.timerId) {
-            clearTimeout(peer.timerId);
+        if (this._keepAliveTimers[peer.id]?.timer) {
+            clearTimeout(this._keepAliveTimers[peer.id].timer);
         }
     }
 }
@@ -472,7 +590,7 @@ class Peer {
         this._setIP(request);
 
         // set peer id
-        this._setPeerId(request)
+        this._setPeerId(request);
 
         // is WebRTC supported ?
         this.rtcSupported = request.url.indexOf('webrtc') > -1;
@@ -480,13 +598,22 @@ class Peer {
         // set name
         this._setName(request);
 
-        // for keepalive
-        this.timerId = 0;
-        this.lastBeat = Date.now();
+        this.requestRate = 0;
 
         this.roomSecrets = [];
         this.roomKey = null;
-        this.roomKeyRate = 0;
+
+        this.publicRoomId = null;
+    }
+
+    rateLimitReached() {
+        // rate limit implementation: max 10 attempts every 10s
+        if (this.requestRate >= 10) {
+            return true;
+        }
+        this.requestRate += 1;
+        setTimeout(_ => this.requestRate -= 1, 10000);
+        return false;
     }
 
     _setIP(request) {
@@ -502,6 +629,25 @@ class Peer {
         if (this.ip.substring(0,7) === "::ffff:")
             this.ip = this.ip.substring(7);
 
+        let ipv6_was_localized = false;
+        if (ipv6_lcl && this.ip.includes(':')) {
+            this.ip = this.ip.split(':',ipv6_lcl).join(':');
+            ipv6_was_localized = true;
+        }
+
+        if (debugMode) {
+            console.debug("----DEBUGGING-PEER-IP-START----");
+            console.debug("remoteAddress:", request.connection.remoteAddress);
+            console.debug("x-forwarded-for:", request.headers['x-forwarded-for']);
+            console.debug("cf-connecting-ip:", request.headers['cf-connecting-ip']);
+            if (ipv6_was_localized)
+                console.debug("IPv6 client IP was localized to", ipv6_lcl, ipv6_lcl > 1 ? "segments" : "segment");
+            console.debug("PairDrop uses:", this.ip);
+            console.debug("IP is private:", this.ipIsPrivate(this.ip));
+            console.debug("if IP is private, '127.0.0.1' is used instead");
+            console.debug("----DEBUGGING-PEER-IP-END----");
+        }
+
         // IPv4 and IPv6 use different values to refer to localhost
         // put all peers on the same network as the server into the same room as well
         if (this.ip === '::1' || this.ipIsPrivate(this.ip)) {
@@ -583,7 +729,7 @@ class Peer {
             separator: ' ',
             dictionaries: [colors, animals],
             style: 'capital',
-            seed: this.id.hashCode()
+            seed: cyrb53(this.id)
         })
 
         this.name = {
@@ -609,7 +755,7 @@ class Peer {
     }
 
     isPeerIdHashValid(peerId, peerIdHash) {
-        return peerIdHash === peerId.hashCode128BitSalted();
+        return peerIdHash === hasher.hashCodeSalted(peerId);
     }
 
     addRoomSecret(roomSecret) {
@@ -625,39 +771,50 @@ class Peer {
     }
 }
 
-Object.defineProperty(String.prototype, 'hashCode', {
-    value: function() {
-        return cyrb53(this);
-    }
-});
-
-Object.defineProperty(String.prototype, 'hashCode128BitSalted', {
-    value: function() {
-        return hasher.hashCode128BitSalted(this);
-    }
-});
-
 const hasher = (() => {
-    let seeds;
+    let password;
     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];
-                }
+        hashCodeSalted(salt) {
+            if (!password) {
+                // password is created on first call.
+                password = randomizer.getRandomString(128);
             }
-            let hashCode = "";
-            for (let i=0; i<4; i++) {
-                hashCode += cyrb53(str, seeds[i]);
-            }
-            return hashCode;
+
+            return crypto.createHash("sha3-512")
+                .update(password)
+                .update(crypto.createHash("sha3-512").update(salt, "utf8").digest("hex"))
+                .digest("hex");
         }
     }
+})()
 
+const randomizer = (() => {
+    let charCodeLettersOnly = r => 65 <= r && r <= 90;
+    let charCodeAllPrintableChars = r => r === 45 || 47 <= r && r <= 57 || 64 <= r && r <= 90 || 97 <= r && r <= 122;
+
+    return {
+        getRandomString(length, lettersOnly = false) {
+            const charCodeCondition = lettersOnly
+                ? charCodeLettersOnly
+                : charCodeAllPrintableChars;
+
+            let string = "";
+            while (string.length < length) {
+                let arr = new Uint16Array(length);
+                crypto.webcrypto.getRandomValues(arr);
+                arr = Array.apply([], arr); /* turn into non-typed array */
+                arr = arr.map(function (r) {
+                    return r % 128
+                })
+                arr = arr.filter(function (r) {
+                    /* strip non-printables: if we transform into desirable range we have a probability bias, so I suppose we better skip this character */
+                    return charCodeCondition(r);
+                });
+                string += String.fromCharCode.apply(String, arr);
+            }
+            return string.substring(0, length)
+        }
+    }
 })()
 
 /*

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "pairdrop",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.6.1",
+      "version": "1.8.0",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",
-        "express-rate-limit": "^6.7.0",
-        "ua-parser-js": "^1.0.35",
+        "express-rate-limit": "^7.0.1",
+        "ua-parser-js": "^1.0.36",
         "unique-names-generator": "^4.3.0",
-        "ws": "^8.13.0"
+        "ws": "^8.14.1"
       },
       "engines": {
         "node": ">=15"
@@ -204,11 +204,11 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-6.7.0.tgz",
-      "integrity": "sha512-vhwIdRoqcYB/72TK3tRZI+0ttS8Ytrk24GfmsxDXK9o9IhHNO5bXRiXQSExPQ4GbaE5tvIS7j1SGrxsuWs+sGA==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.0.1.tgz",
+      "integrity": "sha512-oTIPm094gh8c7nbShl4TNLqnayzOcbDGY7dCRnFqUAvptyb0pp5231LaH34JtvVEbZlOJMiixikU5AVK8VN3FA==",
       "engines": {
-        "node": ">= 12.9.0"
+        "node": ">= 16"
       },
       "peerDependencies": {
         "express": "^4 || ^5"
@@ -583,9 +583,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "1.0.35",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
-      "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==",
+      "version": "1.0.36",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.36.tgz",
+      "integrity": "sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw==",
       "funding": [
         {
           "type": "opencollective",
@@ -594,6 +594,10 @@
         {
           "type": "paypal",
           "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
         }
       ],
       "engines": {
@@ -633,9 +637,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -801,9 +805,9 @@
       }
     },
     "express-rate-limit": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-6.7.0.tgz",
-      "integrity": "sha512-vhwIdRoqcYB/72TK3tRZI+0ttS8Ytrk24GfmsxDXK9o9IhHNO5bXRiXQSExPQ4GbaE5tvIS7j1SGrxsuWs+sGA==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.0.1.tgz",
+      "integrity": "sha512-oTIPm094gh8c7nbShl4TNLqnayzOcbDGY7dCRnFqUAvptyb0pp5231LaH34JtvVEbZlOJMiixikU5AVK8VN3FA==",
       "requires": {}
     },
     "finalhandler": {
@@ -1070,9 +1074,9 @@
       }
     },
     "ua-parser-js": {
-      "version": "1.0.35",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
-      "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA=="
+      "version": "1.0.36",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.36.tgz",
+      "integrity": "sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw=="
     },
     "unique-names-generator": {
       "version": "4.7.1",
@@ -1095,9 +1099,9 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
       "requires": {}
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,10 +11,10 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.18.2",
-    "express-rate-limit": "^6.7.0",
-    "ua-parser-js": "^1.0.35",
+    "express-rate-limit": "^7.0.1",
+    "ua-parser-js": "^1.0.36",
     "unique-names-generator": "^4.3.0",
-    "ws": "^8.13.0"
+    "ws": "^8.14.1"
   },
   "engines": {
     "node": ">=15"

pairdrop-cli/pairdrop

@@ -38,7 +38,10 @@ openPairDrop()
   else
     xdg-open "$url"
   fi
+
+
   exit
+
 }
 
 setOs()
@@ -98,13 +101,19 @@ sendFiles()
   [[ -a "$zipPath" ]] && echo "Cannot overwrite $zipPath. Please remove first." && exit
 
   if [[ -d $path ]]; then
-    zipPathTemp="temp_${zipPath}"
+    zipPathTemp="${path}_pairdrop_temp.zip"
     [[ -a "$zipPathTemp" ]] && echo "Cannot overwrite $zipPathTemp. Please remove first." && exit
     echo "Processing directory..."
 
     # Create zip files temporarily to send directory
-    zip -q -b /tmp/ -r "$zipPath" "$path"
-    zip -q -b /tmp/ "$zipPathTemp" "$zipPath"
+    if [[ $OS == "Windows" ]];then
+          powershell.exe -Command "Compress-Archive -Path ${path} -DestinationPath ${zipPath}"
+          echo "Compress-Archive -Path ${zipPath} -DestinationPath ${zipPathTemp}"
+          powershell.exe -Command "Compress-Archive -Path ${zipPath} -DestinationPath ${zipPathTemp}"
+    else
+          zip -q -b /tmp/ -r "$zipPath" "$path"
+          zip -q -b /tmp/ "$zipPathTemp" "$zipPath"
+    fi
 
     if [[ $OS == "Mac" ]];then
       hash=$(base64 -i "$zipPathTemp")
@@ -118,8 +127,12 @@ sendFiles()
     echo "Processing file..."
 
     # Create zip file temporarily to send file
-    zip -q -b /tmp/ "$zipPath" "$path"
 
+    if [[ $OS == "Windows" ]];then
+      powershell.exe -Command "Compress-Archive -Path ${path} -DestinationPath ${zipPath} -CompressionLevel Optimal"
+    else
+      zip -q -b /tmp/ "$zipPath" "$path"
+    fi
     if [[ $OS == "Mac" ]];then
       hash=$(base64 -i "$zipPath")
     else
@@ -142,6 +155,7 @@ sendFiles()
     hash=
   fi
 
+
   openPairDrop
   exit
 }

public/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!-- Web App Config -->
     <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,62 +39,76 @@
 
 <body translate="no">
     <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" data-i18n-key="header.about" data-i18n-attrs="title aria-label" title="About PairDrop" aria-label="Open About PairDrop">
             <svg class="icon">
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
+        <div id="language-selector" class="icon-button" data-i18n-key="header.language-selector" data-i18n-attrs="title" title="Select Language">
+            <svg class="icon">
+                <use xlink:href="#icon-language-selector" />
+            </svg>
+        </div>
         <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" data-i18n-key="header.theme-auto" data-i18n-attrs="title" title="Adapt Theme to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
             </div>
             <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" data-i18n-key="header.theme-light" data-i18n-attrs="title" title="Always Use Light-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
                 </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" data-i18n-key="header.theme-dark" data-i18n-attrs="title" title="Always Use Dark-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
                 </div>
             </div>
         </div>
-        <div id="notification" class="icon-button" title="Enable Notifications" hidden>
+        <div id="notification" class="icon-button" data-i18n-key="header.notification" data-i18n-attrs="title" title="Enable Notifications" hidden>
             <svg class="icon">
                 <use xlink:href="#notifications" />
             </svg>
         </div>
-        <div id="install" class="icon-button" title="Install PairDrop" hidden>
+        <div id="install" class="icon-button" data-i18n-key="header.install" data-i18n-attrs="title" title="Install PairDrop" hidden>
             <svg class="icon">
                 <use xlink:href="#homescreen" />
             </svg>
         </div>
-        <div id="pair-device" class="icon-button" title="Pair Device" hidden>
+        <div id="pair-device" class="icon-button" data-i18n-key="header.pair-device" data-i18n-attrs="title" title="Pair Your Devices Permanently">
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
         </div>
-        <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
+        <div id="edit-paired-devices" class="icon-button" data-i18n-key="header.edit-paired-devices" data-i18n-attrs="title" title="Edit Paired Devices" hidden>
             <svg class="icon">
-                <use xlink:href="#clear-pair-devices-icon" />
+                <use xlink:href="#edit-pair-devices-icon" />
             </svg>
         </div>
-        <div id="cancel-paste-mode" class="button" hidden>Done</div>
+        <div id="join-public-room" class="icon-button" data-i18n-key="header.join-public-room" data-i18n-attrs="title" title="Join Public Room Temporarily">
+            <svg class="icon">
+                <use xlink:href="#public-room-icon" />
+            </svg>
+        </div>
+        <div id="cancel-paste-mode" class="button" data-i18n-key="header.cancel-paste-mode" data-i18n-attrs="text" hidden>Done</div>
     </header>
     <!-- Center -->
     <div id="center">
         <!-- Peers -->
         <div class="x-peers-filler"></div>
         <x-peers class="center"></x-peers>
-        <x-no-peers>
-            <h2>Open PairDrop on other devices to send files</h2>
-            <div>Pair devices to be discoverable on other networks</div>
+        <x-no-peers data-i18n-key="instructions.no-peers" data-i18n-attrs="data-drop-bg" data-drop-bg="Release to select recipient">
+            <h2 data-i18n-key="instructions.no-peers-title" data-i18n-attrs="text">Open PairDrop on other devices to send files</h2>
+            <div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text">Pair devices or enter a public room to be discoverable on other networks</div>
         </x-no-peers>
-        <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
+        <x-instructions data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"
+                        desktop="Click to send files or right click to send a message"
+                        mobile="Tap to send files or long tap to send a message"
+                        data-drop-peer="Release to send to peer"
+                        data-drop-bg="Release to select recipient">
             <p id="paste-filename"></p>
         </x-instructions>
     </div>
@@ -103,55 +117,163 @@
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div>
-            <span>You are known as:</span>
-            <div id="display-name" placeholder="Loading..." title="Edit your device name permanently" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
-            <svg id="edit-pen" class="icon">
-                <use xlink:href="#edit-pen-icon" />
-            </svg>
-        </div>
-        <div class="font-body2">
-            You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
-            <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
+        <div class="column">
+            <div class="known-as-wrapper">
+                <span data-i18n-key="footer.known-as" data-i18n-attrs="text">You are known as:</span>
+                <div id="display-name" class="badge" data-i18n-key="footer.display-name" data-i18n-attrs="data-placeholder title"
+                     placeholder="Loading..." data-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="discovery-wrapper row">
+                <div class="row center">
+                    <span data-i18n-key="footer.discovery" data-i18n-attrs="text">You can be discovered:</span>
+                </div>
+                <div class="row center">
+                    <span class="badge badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title">on this network</span>
+                    <span class="badge badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden>paired devices</span>
+                    <span class="badge badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
+                </div>
+            </div>
         </div>
     </footer>
+    <!-- Language Select Dialog -->
+    <x-dialog id="language-select-dialog">
+        <x-background class="full center">
+            <x-paper shadow="2">
+                <div class="row center">
+                    <h2 class="center" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text">Select Language</h2>
+                </div>
+                <div class="language-buttons">
+                    <button class="button fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text">System Language</button>
+                    <button class="button fw" value="en">English</button>
+                    <button class="button fw" value="de">Deutsch (German)</button>
+                    <button class="button fw" value="nb">Norsk (Norwegian)</button>
+                    <button class="button fw" value="ru">Русский язык (Russian)</button>
+                    <button class="button fw" value="zh-CN">中文 (Chinese)</button>
+                </div>
+                <div class="center row-reverse button-row">
+                    <button class="button" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
+                </div>
+            </x-paper>
+        </x-background>
+    </x-dialog>
     <!-- Pair Device Dialog -->
     <x-dialog id="pair-device-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <h2 class="center">Pair Devices</h2>
-                    <div id="room-key-qr-code" class="center"></div>
-                    <h1 id="room-key" class="center">000 000</h1>
-                    <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
-                    <hr>
-                    <div id="key-input-container">
-                        <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 class="row center">
+                        <h2 class="center" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text">Pair Devices</h2>
                     </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" type="button" close>Cancel</button>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="center key-qr-code"></div>
+                            <h1 class="center key">000 000</h1>
+                            <p class="center text-center key-instructions">
+                                <span class="font-subheading" data-i18n-key="dialogs.input-key-on-this-device" data-i18n-attrs="text">Input this key on another device</span>
+                                <span class="font-subheading" data-i18n-key="dialogs.scan-qr-code" data-i18n-attrs="text">or scan the QR-Code.</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="hr-note">
+                        <hr>
+                        <div>
+                            <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text">OR</span>
+                        </div>
+                    </div>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="input-key-container six-chars">
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-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-char-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-6" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                            </div>
+                            <p class="font-subheading center text-center" data-i18n-key="dialogs.enter-key-from-another-device" data-i18n-attrs="text">Enter key from another device here.</p>
+                        </div>
+                    </div>
+                    <div class="button-row row-reverse">
+                        <button class="button" type="submit" data-i18n-key="dialogs.pair" data-i18n-attrs="text" disabled>Pair</button>
+                        <button class="button" type="button" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
-    <!-- Clear Devices Dialog -->
-    <x-dialog id="clear-devices-dialog">
+    <!-- Edit Paired Devices Dialog -->
+    <x-dialog id="edit-paired-devices-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <h2 class="center">Unpair Devices</h2>
-                    <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
-                    <div class="center row-reverse">
-                        <button class="button" type="submit">Unpair Devices</button>
-                        <button class="button" type="button" close>Cancel</button>
+                    <div class="row center">
+                        <h2 class="center" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text">Edit Paired Devices</h2>
+                    </div>
+                    <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty" data-empty="No paired devices."></div>
+                    <div class="font-subheading center">
+                        <p>
+                            <span  data-i18n-key="dialogs.auto-accept-instructions-1" data-i18n-attrs="text">
+                                Activate
+                            </span>
+                            <u data-i18n-key="dialogs.auto-accept" data-i18n-attrs="text">auto-accept</u>
+                            <span data-i18n-key="dialogs.auto-accept-instructions-2" data-i18n-attrs="text">
+                                to automatically accept all files sent from that device.
+                            </span>
+                        </p>
+                    </div>
+                    <div class="center row-reverse button-row">
+                        <button class="button" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
+                    </div>
+                </x-paper>
+            </x-background>
+        </form>
+    </x-dialog>
+    <!-- Public Room Dialog -->
+    <x-dialog id="public-room-dialog">
+        <form action="#">
+            <x-background class="full center text-center">
+                <x-paper shadow="2">
+                    <div class="row center">
+                        <div class="column">
+                            <h2 class="center">Temporary Public Room</h2>
+                        </div>
+                    </div>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="center key-qr-code"></div>
+                            <h1 class="center key">IOX9P</h1>
+                            <p class="center text-center key-instructions">
+                                <span class="font-subheading" data-i18n-key="dialogs.input-room-id-on-another-device" data-i18n-attrs="text">Input this room id on another device</span>
+                                <span class="font-subheading" data-i18n-key="dialogs.scan-qr-code" data-i18n-attrs="text">or scan the QR-Code.</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="hr-note">
+                        <hr>
+                        <div>
+                            <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text">OR</span>
+                        </div>
+                    </div>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="input-key-container">
+                                <input type="text" class="textarea center" aria-label="room-id-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                            </div>
+                            <p class="font-subheading center text-center">Enter room id from another device to join.</p>
+                        </div>
+                    </div>
+                    <div class="center row-reverse button-row">
+                        <button class="button" type="submit" disabled>Join</button>
+                        <button class="button" type="button" close>Close</button>
+                        <button class="button leave-room" type="button">Leave</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -161,24 +283,30 @@
     <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center"></h2>
-                <div class="center column file-description">
-                    <div>
-                        <span class="display-name"></span>
-                        <span>would like to share</span>
+                <div class="row center">
+                    <div class="column">
+                        <h2 class="center"></h2>
                     </div>
-                    <div class="row file-name" >
-                        <span class="file-stem"></span>
-                        <span class="file-extension"></span>
+                </div>
+                <div class="row center">
+                    <div class="column center file-description">
+                        <div>
+                            <span class="display-name badge"></span>
+                            <span data-i18n-key="dialogs.would-like-to-share" data-i18n-attrs="text">would like to share</span>
+                        </div>
+                        <div class="row file-name" >
+                            <span class="file-stem"></span>
+                            <span class="file-extension"></span>
+                        </div>
+                        <div class="row file-other">
+                        </div>
+                        <div class="row font-body2 file-size"></div>
                     </div>
-                    <div class="row file-other">
-                    </div>
-                    <div class="row font-body2 file-size"></div>
                 </div>
                 <div class="center file-preview"></div>
-                <div class="center row-reverse">
-                    <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
-                    <button id="decline-request" class="button" title="ESCAPE">Decline</button>
+                <div class="row-reverse center button-row">
+                    <button id="accept-request" class="button" title="ENTER" data-i18n-key="dialogs.accept" data-i18n-attrs="text" autofocus>Accept</button>
+                    <button id="decline-request" class="button" title="ESCAPE" data-i18n-key="dialogs.decline" data-i18n-attrs="text">Decline</button>
                 </div>
             </x-paper>
         </x-background>
@@ -187,24 +315,31 @@
     <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center"></h2>
-                <div class="center column file-description">
-                    <div>
-                        <span class="display-name"></span>
-                        <span>has sent</span>
+                <div class="row center">
+                    <div class="column">
+                        <h2 class="center"></h2>
                     </div>
-                    <div class="row file-name" >
-                        <span class="file-stem"></span>
-                        <span class="file-extension"></span>
+                </div>
+                <div class="row center">
+                    <div class="column center file-description">
+                        <div>
+                            <span class="display-name badge"></span>
+                            <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text">has sent</span>
+                        </div>
+                        <div class="row file-name" >
+                            <span class="file-stem"></span>
+                            <span class="file-extension"></span>
+                        </div>
+                        <div class="row file-other">
+                        </div>
+                        <div class="row font-body2 file-size"></div>
                     </div>
-                    <div class="row file-other"></div>
-                    <div class="row font-body2 file-size"></div>
                 </div>
                 <div class="center file-preview"></div>
-                <div class="center row-reverse">
-                    <button id="share-btn" class="button" autofocus hidden>Share</button>
-                    <button id="download-btn" class="button" autofocus>Download</button>
-                    <button class="button" close>Close</button>
+                <div class="row-reverse center button-row">
+                    <button id="share-btn" class="button" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden>Share</button>
+                    <button id="download-btn" class="button" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus>Download</button>
+                    <button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
                 </div>
             </x-paper>
         </x-background>
@@ -214,16 +349,27 @@
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2 class="text-center">Send Message</h2>
-                    <div class="dialog-subheader text-center">
-                        <span>Send a Message to</span>
-                        <span class="display-name"></span>
+                    <div class="row center">
+                        <div class="column">
+                            <h2 class="center" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text">Send Message</h2>
+                        </div>
                     </div>
-                    <div class="row-separator"></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" type="button" title="ESCAPE" close>Cancel</button>
+                    <div class="row center display-name-wrapper">
+                        <div class="column">
+                            <div class="text-center">
+                                <span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text">Send a Message to</span>
+                                <span class="display-name badge"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="column fw">
+                            <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                        </div>
+                    </div>
+                    <div class="button-row row-reverse">
+                        <button class="button" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.send" data-i18n-attrs="text" disabled>Send</button>
+                        <button class="button" type="button" title="ESCAPE" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -233,16 +379,23 @@
     <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="text-center">Message Received</h2>
-                <div class="text-center dialog-subheader">
-                    <span class="display-name"></span>
-                    <span>has sent:</span>
+                <div class="row center">
+                    <h2 class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text">Message Received</h2>
                 </div>
-                <div class="row-separator"></div>
-                <div id="text"></div>
-                <div class="center row-reverse">
-                    <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
-                    <button id="close" class="button" title="ESCAPE">Close</button>
+                <div class="row center">
+                    <div class="text-center">
+                        <span class="display-name badge"></span>
+                        <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text">has sent:</span>
+                    </div>
+                </div>
+                <div class="row center">
+                    <div class="column fw">
+                        <div id="text" class="textarea fw"></div>
+                    </div>
+                </div>
+                <div class="row-reverse center button-row">
+                    <button id="copy" class="button" title="CTRL/⌘ + C" data-i18n-key="dialogs.copy" data-i18n-attrs="text">Copy</button>
+                    <button id="close" class="button" title="ESCAPE" data-i18n-key="dialogs.close" data-i18n-attrs="text">Close</button>
                 </div>
             </x-paper>
         </x-background>
@@ -251,20 +404,22 @@
     <x-dialog id="base64-paste-dialog">
         <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>
+                <button class="button center" id="base64-paste-btn" title="Paste"></button>
                 <div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
-                <button class="button center" close>Close</button>
+                <div class="row-reverse center button-row">
+                    <button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
+                </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Toast -->
     <div class="toast-container full center">
-        <x-toast id="toast" class="row" shadow="1"></x-toast>
+        <x-toast id="toast" class="row center" shadow="1"></x-toast>
     </div>
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" data-i18n-key="about.close-about" data-i18n-attrs="aria-label" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>
@@ -274,25 +429,28 @@
             <svg class="icon logo">
                 <use xlink:href="#wifi-tethering" />
             </svg>
-            <h1>PairDrop</h1>
-            <div class="font-subheading">The easiest way to transfer files across devices</div>
+            <div class="title-wrapper">
+                <h1>PairDrop</h1>
+                <div class="font-subheading">v1.8.0</div>
+            </div>
+            <div class="font-subheading" data-i18n-key="about.claim" data-i18n-attrs="text">The easiest way to transfer files across devices</div>
             <div class="row">
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer" data-i18n-key="about.github" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#github" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer" data-i18n-key="about.buy-me-a-coffee" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#monetarization" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer" data-i18n-key="about.tweet" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#twitter" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer" data-i18n-key="about.faq" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#help-outline" />
                     </svg>
@@ -301,6 +459,7 @@
         </section>
         <x-background></x-background>
     </x-about>
+    <canvas class="circles"></canvas>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">
@@ -355,16 +514,28 @@
             <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
             <path d="M579.8 267.7c56.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 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.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.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/>
         </symbol>
-        <symbol id="clear-pair-devices-icon" viewBox="0 0 640 512">
-            <!--! 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 id="edit-pair-devices-icon" viewBox="-159 25 640 512">
+            <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <!--! edited by @schlagmichdoch -->
+            <path d="M218,155.4c-56.5-56.5-148-56.5-204.5,0L-98.8,267.7c-56.5,56.5-56.5,148,0,204.5c50,50,128.8,56.5,186.3,15.4l1.6-1.1 c14.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.6c-31.5-31.6-31.5-82.6,0-114.1L58.7,200.6 c31.5-31.5,82.5-31.5,114,0c15.8,15.8,23.8,36.7,23.6,57.6c7.9-8.3,18.9-13,30.6-13c4.5,0,8.9,0.7,13.2,2l17.4,5.5 c0.9-0.5,1.8-1,2.7-1.5C258.7,216.2,244.4,181.8,218,155.4z M420.8,86.6c-50-50-128.8-56.5-186.3-15.4l-1.6,1.1 c-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.6c25.8,25.8,30.5,64.7,14,95.2 c0.7,2,1.3,4,1.8,6.1l3.9,17.9c1.1,0.6,2.1,1.2,3.2,1.8l17.4-5.5c4.3-1.4,8.7-2,13.1-2c7.3,0,14.3,1.8,20.5,5.2 C474.7,196.8,465.1,130.9,420.8,86.6z M140.7,254.4l1.1-1.6c10.3-14.4,6.9-34.4-7.4-44.6s-34.4-6.9-44.6,7.4l-1.1,1.6 C47.5,274.6,54,353.4,104,403.4c18.7,18.7,41.2,31.2,65,37.5c-1.4-3.1-2.6-6.2-3.8-9.3c-6-16.4-1.5-34.6,11.6-46.4l7.2-6.6 c-12.7-3.6-24.7-10.5-34.8-20.5C121.4,330.3,117.8,286.4,140.7,254.4z"/>
+            <path d="M458.9,407.4l-24.3-22.1c0.6-4.7,1-9.4,1-14.2s-0.3-9.6-1-14.2l24.3-22.1c3.9-3.5,5.4-8.9,3.6-13.8v-0.1 c-2.5-6.7-5.4-13.1-8.9-19.2l-2.6-4.5c-3.7-6.2-7.8-12-12.4-17.5c-3.3-4-8.8-5.4-13.7-3.8l-31.2,9.9c-7.5-5.8-15.8-10.6-24.7-14.2 l-7-32c-1.1-5.1-5-9.1-10.2-10c-7.7-1.3-15.7-2-23.8-2s-16.1,0.7-23.8,2c-5.2,0.9-9.1,4.9-10.2,10l-7,32 c-8.9,3.7-17.2,8.5-24.7,14.2l-31.2-9.9c-4.9-1.6-10.4-0.2-13.7,3.8c-4.5,5.5-8.7,11.3-12.4,17.5l-2.6,4.5 c-3.4,6.2-6.4,12.6-8.9,19.2c-1.8,4.9-0.3,10.3,3.6,13.8l24.3,22.1c-0.6,4.7-1,9.4-1,14.2s0.3,9.6,1,14.3L197,407.5 c-3.9,3.5-5.4,8.9-3.6,13.8c2.5,6.7,5.4,13.1,8.9,19.2l2.6,4.5c3.7,6.2,7.8,12,12.4,17.5c3.3,4,8.8,5.4,13.7,3.8l31.2-10 c7.5,5.8,15.8,10.6,24.7,14.2l7,32c1.1,5.1,5,9.1,10.2,10c7.7,1.3,15.7,2,23.8,2c8.1,0,16.1-0.7,23.8-2c5.2-0.8,9.1-4.9,10.2-10 l7-32c8.9-3.6,17.2-8.5,24.7-14.2l31.2,9.9c4.9,1.6,10.4,0.2,13.7-3.8c4.5-5.5,8.7-11.3,12.4-17.5l2.6-4.5 c3.4-6.2,6.4-12.6,8.9-19.2C464.2,416.3,462.7,410.9,458.9,407.4z M328,415.9c-24.8,0-44.9-20.1-44.9-44.8 c0-24.8,20.1-44.8,44.9-44.8s44.8,20.1,44.8,44.8C372.8,395.9,352.7,415.9,328,415.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>
+        <symbol id="public-room-icon" viewBox="0 0 640 512">
+            <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M0 24C0 10.7 10.7 0 24 0H616c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 48 0 37.3 0 24zM0 488c0-13.3 10.7-24 24-24H616c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM83.2 160a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM32 320c0-35.3 28.7-64 64-64h96c12.2 0 23.7 3.4 33.4 9.4c-37.2 15.1-65.6 47.2-75.8 86.6H64c-17.7 0-32-14.3-32-32zm461.6 32c-10.3-40.1-39.6-72.6-77.7-87.4c9.4-5.5 20.4-8.6 32.1-8.6h96c35.3 0 64 28.7 64 64c0 17.7-14.3 32-32 32H493.6zM391.2 290.4c32.1 7.4 58.1 30.9 68.9 61.6c3.5 10 5.5 20.8 5.5 32c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32c0-11.2 1.9-22 5.5-32c10.5-29.7 35.3-52.8 66.1-60.9c7.8-2.1 16-3.1 24.5-3.1h96c7.4 0 14.7 .8 21.6 2.4zm44-130.4a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM321.6 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/>
+        </symbol>
+        <symbol id="icon-language-selector" viewBox="0 0 640 512">
+            <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M0 128C0 92.7 28.7 64 64 64H256h48 16H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H320 304 256 64c-35.3 0-64-28.7-64-64V128zm320 0V384H576V128H320zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276H141l19-42.8zM448 164c11 0 20 9 20 20v4h44 16c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45H448 376c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20z"/>
+        </symbol>
+
     </svg>
     <!-- Scripts -->
+    <script src="scripts/localization.js"></script>
     <script src="scripts/theme.js"></script>
     <script src="scripts/network.js"></script>
     <script src="scripts/ui.js"></script>

public/lang/de.json

@@ -0,0 +1,156 @@
+{
+    "header": {
+        "about_title": "Über PairDrop",
+        "notification_title": "Benachrichtigungen aktivieren",
+        "about_aria-label": "Über PairDrop öffnen",
+        "install_title": "PairDrop installieren",
+        "pair-device_title": "Deine Geräte dauerhaft koppeln",
+        "edit-paired-devices_title": "Gekoppelte Geräte bearbeiten",
+        "theme-auto_title": "Systemstil verwenden",
+        "theme-dark_title": "Dunklen Stil verwenden",
+        "theme-light_title": "Hellen Stil verwenden",
+        "cancel-paste-mode": "Fertig",
+        "language-selector_title": "Sprache auswählen",
+        "join-public-room_title": "Öffentlichen Raum temporär betreten"
+    },
+    "dialogs": {
+        "share": "Teilen",
+        "download": "Herunterladen",
+        "pair-devices-title": "Geräte dauerhaft koppeln",
+        "input-key-on-this-device": "Gib diesen Schlüssel auf einem anderen Gerät ein",
+        "enter-key-from-another-device": "Gib den Schlüssel von einem anderen Gerät hier ein.",
+        "pair": "Koppeln",
+        "cancel": "Abbrechen",
+        "edit-paired-devices-title": "Gekoppelte Geräte bearbeiten",
+        "paired-devices-wrapper_data-empty": "Keine gekoppelten Geräte.",
+        "close": "Schließen",
+        "accept": "Akzeptieren",
+        "decline": "Ablehnen",
+        "title-image": "Bild",
+        "title-file": "Datei",
+        "title-image-plural": "Bilder",
+        "title-file-plural": "Dateien",
+        "scan-qr-code": "oder scanne den QR-Code.",
+        "would-like-to-share": "möchte Folgendes teilen",
+        "send": "Senden",
+        "copy": "Kopieren",
+        "receive-text-title": "Textnachricht erhalten",
+        "file-other-description-image-plural": "und {{count}} andere Bilder",
+        "file-other-description-file-plural": "und {{count}} andere Dateien",
+        "auto-accept-instructions-1": "Aktiviere",
+        "auto-accept": "auto-accept",
+        "auto-accept-instructions-2": "um automatisch alle Dateien von diesem Gerät zu akzeptieren.",
+        "has-sent": "hat Folgendes gesendet:",
+        "send-message-title": "Textnachricht senden",
+        "send-message-to": "Sende eine Textnachricht an",
+        "base64-tap-to-paste": "Hier tippen, um {{type}} einzufügen",
+        "base64-paste-to-send": "Hier einfügen, um {{type}} zu versenden",
+        "base64-text": "Text",
+        "base64-files": "Dateien",
+        "base64-processing": "Bearbeitung läuft…",
+        "file-other-description-image": "und ein anderes Bild",
+        "file-other-description-file": "und eine andere Datei",
+        "receive-title": "{{descriptor}} erhalten",
+        "download-again": "Erneut herunterladen",
+        "system-language": "Systemsprache",
+        "language-selector-title": "Sprache auswählen",
+        "hr-or": "ODER",
+        "input-room-id-on-another-device": "Gib diese Raum ID auf einem anderen Gerät ein",
+        "unpair": "Entkoppeln"
+    },
+    "about": {
+        "tweet_title": "Über PairDrop twittern",
+        "faq_title": "Häufig gestellte Fragen",
+        "close-about_aria-label": "Schließe Über PairDrop",
+        "github_title": "PairDrop auf GitHub",
+        "buy-me-a-coffee_title": "Kauf mir einen Kaffee!",
+        "claim": "Der einfachste Weg Dateien zwischen Geräten zu teilen"
+    },
+    "footer": {
+        "known-as": "Du wirst angezeigt als:",
+        "display-name_title": "Setze einen permanenten Gerätenamen",
+        "on-this-network": "in diesem Netzwerk",
+        "paired-devices": "für gekoppelte Geräte",
+        "traffic": "Datenverkehr wird",
+        "display-name_placeholder": "Lade…",
+        "routed": "durch den Server geleitet",
+        "webrtc": "wenn WebRTC nicht verfügbar ist.",
+        "display-name_data-placeholder": "Lade…",
+        "public-room-devices_title": "Du kannst von Geräten in diesem öffentlichen Raum unabhängig von deinem Netzwerk gefunden werden.",
+        "paired-devices_title": "Du kannst immer von gekoppelten Geräten gefunden werden, egal in welchem Netzwerk.",
+        "public-room-devices": "in Raum {{roomId}}",
+        "discovery": "Du bist sichtbar:",
+        "on-this-network_title": "Du kannst von jedem in diesem Netzwerk gefunden werden."
+    },
+    "notifications": {
+        "link-received": "Link von {{name}} empfangen - Klicke um ihn zu öffnen",
+        "message-received": "Nachricht von {{name}} empfangen - Klicke um sie zu kopieren",
+        "click-to-download": "Klicken zum Download",
+        "copied-text": "Text in die Zwischenablage kopiert",
+        "connected": "Verbunden.",
+        "pairing-success": "Geräte gekoppelt.",
+        "display-name-random-again": "Anzeigename wird ab jetzt wieder zufällig generiert.",
+        "pairing-tabs-error": "Es können keine zwei Webbrowser Tabs gekoppelt werden.",
+        "pairing-not-persistent": "Gekoppelte Geräte sind nicht persistent.",
+        "pairing-key-invalid": "Ungültiger Schlüssel",
+        "pairing-key-invalidated": "Schlüssel {{key}} wurde ungültig gemacht.",
+        "copied-to-clipboard": "In die Zwischenablage kopiert",
+        "text-content-incorrect": "Textinhalt ist fehlerhaft.",
+        "clipboard-content-incorrect": "Inhalt der Zwischenablage ist fehlerhaft.",
+        "copied-text-error": "Konnte nicht in die Zwischenablage schreiben. Kopiere manuell!",
+        "file-content-incorrect": "Dateiinhalt ist fehlerhaft.",
+        "notifications-enabled": "Benachrichtigungen aktiviert.",
+        "offline": "Du bist offline",
+        "online": "Du bist wieder Online",
+        "unfinished-transfers-warning": "Es wurden noch nicht alle Übertragungen fertiggestellt. Möchtest du PairDrop wirklich schließen?",
+        "display-name-changed-permanently": "Anzeigename wurde dauerhaft geändert.",
+        "download-successful": "{{descriptor}} heruntergeladen",
+        "pairing-cleared": "Alle Geräte entkoppelt.",
+        "click-to-show": "Klicken zum Anzeigen",
+        "online-requirement": "Du musst online sein um Geräte zu koppeln.",
+        "display-name-changed-temporarily": "Anzeigename wurde nur für diese Sitzung geändert.",
+        "request-title": "{{name}} möchte {{count}}{{descriptor}} übertragen",
+        "connecting": "Verbindung wird aufgebaut…",
+        "files-incorrect": "Dateien sind fehlerhaft.",
+        "file-transfer-completed": "Dateiübertragung fertiggestellt.",
+        "message-transfer-completed": "Nachrichtenübertragung fertiggestellt.",
+        "rate-limit-join-key": "Rate Limit erreicht. Warte 10 Sekunden und versuche es erneut.",
+        "selected-peer-left": "Ausgewählter Peer ist gegangen.",
+        "ios-memory-limit": "Für Übertragungen an iOS Geräte beträgt die maximale Dateigröße 200 MB",
+        "public-room-left": "Öffentlichen Raum {{publicRoomId}} verlassen",
+        "copied-to-clipboard-error": "Konnte nicht kopieren. Kopiere manuell.",
+        "public-room-id-invalid": "Ungültige Raum ID",
+        "online-requirement-pairing": "Du musst online sein, um Geräte zu koppeln.",
+        "online-requirement-public-room": "Du musst online sein, um öffentliche Räume erstellen zu können."
+    },
+    "instructions": {
+        "x-instructions_desktop": "Klicke, um Dateien zu Senden oder klicke mit der rechten Maustaste, um Textnachrichten zu senden",
+        "no-peers-title": "Öffne PairDrop auf anderen Geräten, um Dateien zu senden",
+        "no-peers_data-drop-bg": "Hier ablegen, um Empfänger auszuwählen",
+        "no-peers-subtitle": "Kopple Geräte oder besuche einen öffentlichen Raum, damit du in anderen Netzwerken sichtbar bist",
+        "click-to-send": "Klicke zum Senden von",
+        "tap-to-send": "Tippe zum Senden von",
+        "x-instructions_data-drop-peer": "Hier ablegen, um an Peer zu senden",
+        "x-instructions_data-drop-bg": "Loslassen um Empfänger auszuwählen",
+        "x-instructions_mobile": "Tippe zum Senden von Dateien oder tippe lange zum Senden von Nachrichten",
+        "activate-paste-mode-base": "Öffne PairDrop auf anderen Geräten zum Senden von",
+        "activate-paste-mode-and-other-files": "und {{count}} anderen Dateien",
+        "activate-paste-mode-shared-text": "freigegebenem Text"
+    },
+    "document-titles": {
+        "file-transfer-requested": "Datenübertagung angefordert",
+        "file-received": "Datei erhalten",
+        "file-received-plural": "{{count}} Dateien erhalten",
+        "message-received": "Nachricht erhalten",
+        "message-received-plural": "{{count}} Nachrichten erhalten"
+    },
+    "peer-ui": {
+        "click-to-send": "Klicke um Dateien zu senden oder nutze einen Rechtsklick um eine Textnachricht zu senden",
+        "connection-hash": "Um die Ende-zu-Ende Verschlüsselung zu verifizieren, vergleiche die Sicherheitsnummer auf beiden Geräten",
+        "waiting": "Warte…",
+        "click-to-send-paste-mode": "Klicken um {{descriptor}} zu senden",
+        "transferring": "Übertragung läuft…",
+        "processing": "Bearbeitung läuft…",
+        "preparing": "Vorbereitung läuft…"
+    }
+}

public/lang/en.json

@@ -0,0 +1,154 @@
+{
+    "header": {
+        "about_title": "About PairDrop",
+        "language-selector_title": "Select Language",
+        "about_aria-label": "Open About PairDrop",
+        "theme-auto_title": "Adapt Theme to System",
+        "theme-light_title": "Always Use Light-Theme",
+        "theme-dark_title": "Always Use Dark-Theme",
+        "notification_title": "Enable Notifications",
+        "install_title": "Install PairDrop",
+        "pair-device_title": "Pair Your Devices Permanently",
+        "edit-paired-devices_title": "Edit Paired Devices",
+        "join-public-room_title": "Join Public Room Temporarily",
+        "cancel-paste-mode": "Done"
+    },
+    "instructions": {
+        "no-peers_data-drop-bg": "Release to select recipient",
+        "no-peers-title": "Open PairDrop on other devices to send files",
+        "no-peers-subtitle": "Pair devices or enter a public room to be discoverable on other networks",
+        "x-instructions_desktop": "Click to send files or right click to send a message",
+        "x-instructions_mobile": "Tap to send files or long tap to send a message",
+        "x-instructions_data-drop-peer": "Release to send to peer",
+        "x-instructions_data-drop-bg": "Release to select recipient",
+        "click-to-send": "Click to send",
+        "tap-to-send": "Tap to send",
+        "activate-paste-mode-base": "Open PairDrop on other devices to send",
+        "activate-paste-mode-and-other-files": "and {{count}} other files",
+        "activate-paste-mode-shared-text": "shared text"
+    },
+    "footer": {
+        "known-as": "You are known as:",
+        "display-name_data-placeholder": "Loading…",
+        "display-name_title": "Edit your device name permanently",
+        "discovery": "You can be discovered:",
+        "on-this-network": "on this network",
+        "on-this-network_title": "You can be discovered by everyone on this network.",
+        "paired-devices": "by paired devices",
+        "paired-devices_title": "You can be discovered by paired devices at all times independent of the network.",
+        "public-room-devices": "in room {{roomId}}",
+        "public-room-devices_title": "You can be discovered by devices in this public room independent of the network.",
+        "traffic": "Traffic is",
+        "routed": "routed through the server",
+        "webrtc": "if WebRTC is not available."
+    },
+    "dialogs": {
+        "pair-devices-title": "Pair Devices Permanently",
+        "input-key-on-this-device": "Input this key on another device",
+        "scan-qr-code": "or scan the QR-code.",
+        "enter-key-from-another-device": "Enter key from another device here.",
+        "input-room-id-on-another-device": "Input this room id on another device",
+        "hr-or": "OR",
+        "pair": "Pair",
+        "cancel": "Cancel",
+        "edit-paired-devices-title": "Edit Paired Devices",
+        "unpair": "Unpair",
+        "paired-devices-wrapper_data-empty": "No paired devices.",
+        "auto-accept-instructions-1": "Activate",
+        "auto-accept": "auto-accept",
+        "auto-accept-instructions-2": "to automatically accept all files sent from that device.",
+        "close": "Close",
+        "would-like-to-share": "would like to share",
+        "accept": "Accept",
+        "decline": "Decline",
+        "has-sent": "has sent:",
+        "share": "Share",
+        "download": "Download",
+        "send-message-title": "Send Message",
+        "send-message-to": "Send a Message to",
+        "send": "Send",
+        "receive-text-title": "Message Received",
+        "copy": "Copy",
+        "base64-processing": "Processing…",
+        "base64-tap-to-paste": "Tap here to paste {{type}}",
+        "base64-paste-to-send": "Paste here to send {{type}}",
+        "base64-text": "text",
+        "base64-files": "files",
+        "file-other-description-image": "and 1 other image",
+        "file-other-description-file": "and 1 other file",
+        "file-other-description-image-plural": "and {{count}} other images",
+        "file-other-description-file-plural": "and {{count}} other files",
+        "title-image": "Image",
+        "title-file": "File",
+        "title-image-plural": "Images",
+        "title-file-plural": "Files",
+        "receive-title": "{{descriptor}} Received",
+        "download-again": "Download again",
+        "language-selector-title": "Select Language",
+        "system-language": "System Language"
+    },
+    "about": {
+        "close-about_aria-label": "Close About PairDrop",
+        "claim": "The easiest way to transfer files across devices",
+        "github_title": "PairDrop on GitHub",
+        "buy-me-a-coffee_title": "Buy me a coffee!",
+        "tweet_title": "Tweet about PairDrop",
+        "faq_title": "Frequently asked questions"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "Display name is changed permanently.",
+        "display-name-changed-temporarily": "Display name is changed only for this session.",
+        "display-name-random-again": "Display name is randomly generated again.",
+        "download-successful": "{{descriptor}} downloaded",
+        "pairing-tabs-error": "Pairing two web browser tabs is impossible.",
+        "pairing-success": "Devices paired.",
+        "pairing-not-persistent": "Paired devices are not persistent.",
+        "pairing-key-invalid": "Invalid key",
+        "pairing-key-invalidated": "Key {{key}} invalidated.",
+        "pairing-cleared": "All Devices unpaired.",
+        "public-room-id-invalid": "Invalid room id",
+        "public-room-left": "Left public room {{publicRoomId}}",
+        "copied-to-clipboard": "Copied to clipboard",
+        "copied-to-clipboard-error": "Copying not possible. Copy manually.",
+        "text-content-incorrect": "Text content is incorrect.",
+        "file-content-incorrect": "File content is incorrect.",
+        "clipboard-content-incorrect": "Clipboard content is incorrect.",
+        "notifications-enabled": "Notifications enabled.",
+        "link-received": "Link received by {{name}} - Click to open",
+        "message-received": "Message received by {{name}} - Click to copy",
+        "click-to-download": "Click to download",
+        "request-title": "{{name}} would like to transfer {{count}} {{descriptor}}",
+        "click-to-show": "Click to show",
+        "copied-text": "Copied text to clipboard",
+        "copied-text-error": "Writing to clipboard failed. Copy manually!",
+        "offline": "You are offline",
+        "online": "You are back online",
+        "connected": "Connected.",
+        "online-requirement-pairing": "You need to be online to pair devices.",
+        "online-requirement-public-room": "You need to be online to create a public room.",
+        "connecting": "Connecting…",
+        "files-incorrect": "Files are incorrect.",
+        "file-transfer-completed": "File transfer completed.",
+        "ios-memory-limit": "Sending files to iOS is only possible up to 200 MB at once",
+        "message-transfer-completed": "Message transfer completed.",
+        "unfinished-transfers-warning": "There are unfinished transfers. Are you sure you want to close PairDrop?",
+        "rate-limit-join-key": "Rate limit reached. Wait 10 seconds and try again.",
+        "selected-peer-left": "Selected peer left."
+    },
+    "document-titles": {
+        "file-received": "File Received",
+        "file-received-plural": "{{count}} Files Received",
+        "file-transfer-requested": "File Transfer Requested",
+        "message-received": "Message Received",
+        "message-received-plural": "{{count}} Messages Received"
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "Click to send {{descriptor}}",
+        "click-to-send": "Click to send files or right click to send a message",
+        "connection-hash": "To verify the security of the end-to-end encryption, compare this security number on both devices",
+        "preparing": "Preparing…",
+        "waiting": "Waiting…",
+        "processing": "Processing…",
+        "transferring": "Transferring…"
+    }
+}

public/lang/nb.json

@@ -0,0 +1,138 @@
+{
+    "header": {
+        "edit-paired-devices_title": "Rediger sammenkoblede enheter",
+        "about_title": "Om PairDrop",
+        "about_aria-label": "Åpne «Om PairDrop»",
+        "theme-auto_title": "Juster drakt til system",
+        "theme-light_title": "Alltid bruk lys drakt",
+        "theme-dark_title": "Alltid bruk mørk drakt",
+        "notification_title": "Skru på merknader",
+        "cancel-paste-mode": "Ferdig",
+        "install_title": "Installer PairDrop",
+        "pair-device_title": "Sammenkoble enhet"
+    },
+    "footer": {
+        "webrtc": "hvis WebRTC ikke er tilgjengelig.",
+        "display-name_data-placeholder": "Laster inn…",
+        "display-name_title": "Rediger det vedvarende enhetsnavnet ditt",
+        "traffic": "Trafikken",
+        "on-this-network": "på dette nettverket",
+        "known-as": "Du er kjent som:",
+        "paired-devices": "sammenkoblede enheter",
+        "routed": "Sendes gjennom tjeneren"
+    },
+    "instructions": {
+        "x-instructions_desktop": "Klikk for å sende filer, eller høyreklikk for å sende en melding",
+        "x-instructions_mobile": "Trykk for å sende filer, eller lang-trykk for å sende en melding",
+        "x-instructions_data-drop-bg": "Slipp for å velge mottager",
+        "click-to-send": "Klikk for å sende",
+        "no-peers_data-drop-bg": "Slipp for å velge mottager",
+        "no-peers-title": "Åpne PairDrop på andre enheter for å sende filer",
+        "no-peers-subtitle": "Sammenkoble enheter for å kunne oppdages på andre nettverk",
+        "x-instructions_data-drop-peer": "Slipp for å sende til likemann",
+        "tap-to-send": "Trykk for å sende",
+        "activate-paste-mode-base": "Åpne PairDrop på andre enheter for å sende",
+        "activate-paste-mode-and-other-files": "og {{count}} andre filer",
+        "activate-paste-mode-shared-text": "delt tekst"
+    },
+    "dialogs": {
+        "input-key-on-this-device": "Skriv inn denne nøkkelen på en annen enhet",
+        "pair-devices-title": "Sammenkoble enheter",
+        "would-like-to-share": "ønsker å dele",
+        "auto-accept-instructions-2": "for å godkjenne alle filer sendt fra den enheten automatisk.",
+        "paired-devices-wrapper_data-empty": "Ingen sammenkoblede enheter",
+        "enter-key-from-another-device": "Skriv inn nøkkel fra en annen enhet for å fortsette.",
+        "edit-paired-devices-title": "Rediger sammenkoblede enheter",
+        "accept": "Godta",
+        "has-sent": "har sendt:",
+        "base64-paste-to-send": "Trykk her for å sende {{type}}",
+        "base64-text": "tekst",
+        "base64-files": "filer",
+        "file-other-description-image-plural": "og {{count}} andre bilder",
+        "receive-title": "{{descriptor}} mottatt",
+        "send-message-title": "Send melding",
+        "base64-processing": "Behandler…",
+        "close": "Lukk",
+        "decline": "Avslå",
+        "download": "Last ned",
+        "copy": "Kopier",
+        "pair": "Sammenkoble",
+        "cancel": "Avbryt",
+        "scan-qr-code": "eller skann QR-koden.",
+        "auto-accept-instructions-1": "Aktiver",
+        "receive-text-title": "Melding mottatt",
+        "auto-accept": "auto-godkjenn",
+        "share": "Del",
+        "send-message-to": "Send en melding til",
+        "send": "Send",
+        "base64-tap-to-paste": "Trykk her for å lime inn {{type}}",
+        "file-other-description-image": "og ett annet bilde",
+        "file-other-description-file-plural": "og {{count}} andre filer",
+        "title-file-plural": "Filer",
+        "download-again": "Last ned igjen",
+        "file-other-description-file": "og én annen fil",
+        "title-image": "Bilde",
+        "title-file": "Fil",
+        "title-image-plural": "Bilder"
+    },
+    "about": {
+        "close-about_aria-label": "Lukk «Om PairDrop»",
+        "faq_title": "Ofte stilte spørsmål",
+        "claim": "Den enkleste måten å overføre filer mellom enheter",
+        "buy-me-a-coffee_title": "Spander drikke.",
+        "tweet_title": "Tvitre om PairDrop",
+        "github_title": "PairDrop på GitHub"
+    },
+    "notifications": {
+        "copied-to-clipboard": "Kopiert til utklippstavlen",
+        "pairing-tabs-error": "Sammenkobling av to nettleserfaner er ikke mulig.",
+        "notifications-enabled": "Merknader påskrudd.",
+        "click-to-show": "Klikk for å vise",
+        "copied-text": "Tekst kopiert til utklippstavlen",
+        "connected": "Tilkoblet.",
+        "online": "Du er tilbake på nett",
+        "file-transfer-completed": "Filoverføring utført.",
+        "selected-peer-left": "Valgt likemann dro.",
+        "pairing-key-invalid": "Ugyldig nøkkel",
+        "connecting": "Kobler til …",
+        "pairing-not-persistent": "Sammenkoblede enheter er ikke vedvarende.",
+        "offline": "Du er frakoblet",
+        "online-requirement": "Du må være på nett for å koble sammen enheter.",
+        "display-name-random-again": "Visningsnavnet er tilfeldig generert igjen.",
+        "display-name-changed-permanently": "Visningsnavnet er endret for godt.",
+        "display-name-changed-temporarily": "Visningsnavnet er endret kun for denne økten.",
+        "text-content-incorrect": "Tekstinnholdet er uriktig.",
+        "file-content-incorrect": "Filinnholdet er uriktig.",
+        "click-to-download": "Klikk for å laste ned",
+        "message-transfer-completed": "Meldingsoverføring utført.",
+        "download-successful": "{{descriptor}} nedlastet",
+        "pairing-success": "Enheter sammenkoblet.",
+        "pairing-cleared": "Sammenkobling av alle enheter opphevet.",
+        "pairing-key-invalidated": "Nøkkel {{key}} ugyldiggjort.",
+        "copied-text-error": "Kunne ikke legge innhold i utklkippstavlen. Kopier manuelt!",
+        "clipboard-content-incorrect": "Utklippstavleinnholdet er uriktig.",
+        "link-received": "Lenke mottatt av {{name}} - Klikk for å åpne.",
+        "request-title": "{{name}} ønsker å overføre {{count}} {{descriptor}}",
+        "message-received": "Melding mottatt av {{name}} - Klikk for å åpne.",
+        "files-incorrect": "Filene er uriktige.",
+        "ios-memory-limit": "Forsendelse av filer til iOS er kun mulig opptil 200 MB av gangen.",
+        "unfinished-transfers-warning": "Lukk med ufullførte overføringer?",
+        "rate-limit-join-key": "Forsøksgrense overskredet. Vent 10 sek. og prøv igjen."
+    },
+    "document-titles": {
+        "file-received": "Fil mottatt",
+        "file-received-plural": "{{count}} filer mottatt",
+        "message-received": "Melding mottatt",
+        "file-transfer-requested": "Filoverføring forespurt",
+        "message-received-plural": "{{count}} meldinger mottatt"
+    },
+    "peer-ui": {
+        "preparing": "Forbereder …",
+        "waiting": "Venter…",
+        "processing": "Behandler …",
+        "transferring": "Overfører …",
+        "click-to-send": "Klikk for å sende filer, eller høyreklikk for å sende en melding",
+        "click-to-send-paste-mode": "Klikk for å sende {{descriptor}}",
+        "connection-hash": "Sammenlign dette sikkerhetsnummeret på begge enhetene for å bekrefte ende-til-ende -krypteringen."
+    }
+}

public/lang/ru.json

@@ -0,0 +1,156 @@
+{
+    "header": {
+        "about_aria-label": "Открыть страницу \"О сервисе\"",
+        "pair-device_title": "Связать ваши устройства навсегда",
+        "install_title": "Установить PairDrop",
+        "cancel-paste-mode": "Выполнено",
+        "edit-paired-devices_title": "Редактировать сопряженные устройства",
+        "notification_title": "Включить уведомления",
+        "about_title": "О сервисе",
+        "theme-auto_title": "Адаптировать тему к системной",
+        "theme-dark_title": "Всегда использовать темную тему",
+        "theme-light_title": "Всегда использовать светлую тему",
+        "join-public-room_title": "Войти на время в публичную комнату",
+        "language-selector_title": "Выбрать язык"
+    },
+    "instructions": {
+        "x-instructions_desktop": "Нажмите, чтобы отправить файлы, или щелкните правой кнопкой мыши, чтобы отправить сообщение",
+        "no-peers_data-drop-bg": "Отпустите, чтобы выбрать получателя",
+        "click-to-send": "Нажмите, чтобы отправить",
+        "x-instructions_data-drop-bg": "Отпустите, чтобы выбрать получателя",
+        "tap-to-send": "Прикоснитесь, чтобы отправить",
+        "x-instructions_data-drop-peer": "Отпустите, чтобы послать узлу",
+        "x-instructions_mobile": "Прикоснитесь коротко, чтобы отправить файлы, или долго, чтобы отправить сообщение",
+        "no-peers-title": "Откройте PairDrop на других устройствах, чтобы отправить файлы",
+        "no-peers-subtitle": "Сопрягите устройства или войдите в публичную комнату, чтобы вас могли обнаружить из других сетей",
+        "activate-paste-mode-and-other-files": "и {{count}} других файлов",
+        "activate-paste-mode-base": "Откройте PairDrop на других устройствах, чтобы отправить",
+        "activate-paste-mode-shared-text": "общий текст"
+    },
+    "footer": {
+        "display-name_data-placeholder": "Загрузка…",
+        "routed": "направляется через сервер",
+        "webrtc": ", если WebRTC недоступен.",
+        "traffic": "Трафик",
+        "paired-devices": "сопряженными устройствами",
+        "known-as": "Вы известны под именем:",
+        "on-this-network": "в этой сети",
+        "display-name_title": "Изменить имя вашего устройства навсегда",
+        "public-room-devices_title": "Вы можете быть обнаружены устройствами в этой публичной комнате вне зависимости от сети.",
+        "paired-devices_title": "Вы можете быть обнаружены сопряженными устройствами в любое время вне зависимости от сети.",
+        "public-room-devices": "в комнате {{roomId}}",
+        "discovery": "Вы можете быть обнаружены:",
+        "on-this-network_title": "Вы можете быть обнаружены кем угодно в этой сети."
+    },
+    "dialogs": {
+        "edit-paired-devices-title": "Редактировать сопряженные устройства",
+        "auto-accept": "автоприем",
+        "close": "Закрыть",
+        "decline": "Отклонить",
+        "share": "Поделиться",
+        "would-like-to-share": "хотел бы поделиться",
+        "has-sent": "отправил:",
+        "paired-devices-wrapper_data-empty": "Нет сопряженных устройств.",
+        "download": "Скачать",
+        "receive-text-title": "Сообщение получено",
+        "send": "Отправить",
+        "send-message-to": "Отправить сообщение",
+        "send-message-title": "Отправить сообщение",
+        "copy": "Копировать",
+        "base64-files": "файлы",
+        "base64-paste-to-send": "Вставьте здесь, чтобы отправить {{type}}",
+        "base64-processing": "Обработка…",
+        "base64-tap-to-paste": "Прикоснитесь здесь, чтобы вставить {{type}}",
+        "base64-text": "текст",
+        "title-file": "Файл",
+        "title-file-plural": "Файлы",
+        "title-image": "Изображение",
+        "title-image-plural": "Изображения",
+        "download-again": "Скачать еще раз",
+        "auto-accept-instructions-2": ", чтобы автоматически принимать все файлы, отправленные с того устройства.",
+        "enter-key-from-another-device": "Введите сюда ключ с другого устройства.",
+        "pair-devices-title": "Сопрягите устройства навсегда",
+        "input-key-on-this-device": "Введите этот ключ на другом устройстве",
+        "scan-qr-code": "или отсканируйте QR-код.",
+        "cancel": "Отменить",
+        "pair": "Подключить",
+        "accept": "Принять",
+        "auto-accept-instructions-1": "Активировать",
+        "file-other-description-file": "и 1 другой файл",
+        "file-other-description-image-plural": "и {{count}} других изображений",
+        "file-other-description-image": "и 1 другое изображение",
+        "file-other-description-file-plural": "и {{count}} других файлов",
+        "receive-title": "{{descriptor}} получен",
+        "system-language": "Язык системы",
+        "unpair": "Разорвать сопряжение",
+        "language-selector-title": "Выберите язык",
+        "hr-or": "ИЛИ",
+        "input-room-id-on-another-device": "Введите этот ID комнаты на другом устройстве"
+    },
+    "about": {
+        "close-about-aria-label": "Закрыть страницу \"О сервисе\"",
+        "claim": "Самый простой способ передачи файлов между устройствами",
+        "close-about_aria-label": "Закрыть страницу \"О сервисе\"",
+        "buy-me-a-coffee_title": "Купить мне кофе!",
+        "github_title": "PairDrop на GitHub",
+        "tweet_title": "Твит о PairDrop",
+        "faq_title": "Часто задаваемые вопросы"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "Отображаемое имя было изменено навсегда.",
+        "display-name-random-again": "Отображаемое имя сгенерировалось случайным образом снова.",
+        "pairing-success": "Устройства сопряжены.",
+        "pairing-tabs-error": "Сопряжение двух вкладок браузера невозможно.",
+        "copied-to-clipboard": "Скопировано в буфер обмена",
+        "pairing-not-persistent": "Сопряженные устройства непостоянны.",
+        "link-received": "Получена ссылка от {{name}} - нажмите, чтобы открыть",
+        "notifications-enabled": "Уведомления включены.",
+        "text-content-incorrect": "Содержание текста неверно.",
+        "message-received": "Получено сообщение от {{name}} - нажмите, чтобы скопировать",
+        "connected": "Подключено.",
+        "copied-text": "Текст скопирован в буфер обмена",
+        "online": "Вы снова в сети",
+        "offline": "Вы находитесь вне сети",
+        "online-requirement": "Для сопряжения устройств вам нужно быть в сети.",
+        "files-incorrect": "Файлы неверны.",
+        "message-transfer-completed": "Передача сообщения завершена.",
+        "ios-memory-limit": "Отправка файлов на iOS устройства возможна только до 200 МБ за один раз",
+        "selected-peer-left": "Выбранный узел вышел.",
+        "request-title": "{{name}} хотел бы передать {{count}} {{descriptor}}",
+        "rate-limit-join-key": "Достигнут предел скорости. Подождите 10 секунд и повторите попытку.",
+        "unfinished-transfers-warning": "Есть незавершенные передачи. Вы уверены, что хотите закрыть PairDrop?",
+        "copied-text-error": "Запись в буфер обмена не удалась. Скопируйте вручную!",
+        "pairing-cleared": "Все устройства не сопряжены.",
+        "pairing-key-invalid": "Неверный ключ",
+        "pairing-key-invalidated": "Ключ {{key}} признан недействительным.",
+        "click-to-download": "Нажмите, чтобы скачать",
+        "clipboard-content-incorrect": "Содержание буфера обмена неверно.",
+        "click-to-show": "Нажмите, чтобы показать",
+        "connecting": "Подключение…",
+        "download-successful": "{{descriptor}} загружен",
+        "display-name-changed-temporarily": "Отображаемое имя было изменено только для этой сессии.",
+        "file-content-incorrect": "Содержимое файла неверно.",
+        "file-transfer-completed": "Передача файла завершена.",
+        "public-room-left": "Покинуть публичную комнату {{publicRoomId}}",
+        "copied-to-clipboard-error": "Копирование невозможно. Скопируйте вручную.",
+        "public-room-id-invalid": "Неверный ID комнаты",
+        "online-requirement-pairing": "Для сопряжения устройств необходимо находиться быть онлайн.",
+        "online-requirement-public-room": "Для создания публичной комнаты необходимо быть онлайн."
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "Нажмите, чтобы отправить {{descriptor}}",
+        "preparing": "Подготовка…",
+        "transferring": "Передача…",
+        "processing": "Обработка…",
+        "waiting": "Ожидание…",
+        "connection-hash": "Чтобы проверить безопасность сквозного шифрования, сравните этот номер безопасности на обоих устройствах",
+        "click-to-send": "Нажмите, чтобы отправить файлы, или щелкните правой кнопкой мыши, чтобы отправить сообщение"
+    },
+    "document-titles": {
+        "file-received-plural": "{{count}} файлов получено",
+        "message-received-plural": "{{count}} сообщений получено",
+        "file-received": "Файл получен",
+        "file-transfer-requested": "Запрошена передача файлов",
+        "message-received": "Сообщение получено"
+    }
+}

public/lang/tr.json

@@ -0,0 +1,25 @@
+{
+    "header": {
+        "about_title": "PairDrop Hakkında",
+        "about_aria-label": "PairDrop Hakkında Aç",
+        "theme-auto_title": "Temayı Sisteme Uyarla",
+        "theme-light_title": "Daima Açık Tema Kullan",
+        "theme-dark_title": "Daima Koyu Tema Kullan",
+        "notification_title": "Bildirimleri Etkinleştir",
+        "install_title": "PairDrop'u Yükle",
+        "pair-device_title": "Cihaz Eşleştir",
+        "edit-paired-devices_title": "Eşleştirilmiş Cihazları Düzenle",
+        "cancel-paste-mode": "Bitti"
+    },
+    "instructions": {
+        "no-peers_data-drop-bg": "Alıcıyı seçmek için bırakın"
+    },
+    "footer": {
+        "display-name_data-placeholder": "Yükleniyor…",
+        "display-name_title": "Cihazının adını kalıcı olarak düzenle"
+    },
+    "dialogs": {
+        "cancel": "İptal",
+        "edit-paired-devices-title": "Eşleştirilmiş Cihazları Düzenle"
+    }
+}

public/lang/zh-CN.json

@@ -0,0 +1,155 @@
+{
+    "header": {
+        "about_title": "关于 PairDrop",
+        "about_aria-label": "打开 关于 PairDrop",
+        "theme-light_title": "总是使用明亮主题",
+        "install_title": "安装 PairDrop",
+        "pair-device_title": "长久配对您的设备",
+        "theme-auto_title": "主题适应系统",
+        "theme-dark_title": "总是使用暗黑主题",
+        "notification_title": "开启通知",
+        "edit-paired-devices_title": "管理已配对设备",
+        "cancel-paste-mode": "完成",
+        "join-public-room_title": "暂时加入公共房间",
+        "language-selector_title": "选择语言"
+    },
+    "instructions": {
+        "x-instructions_data-drop-peer": "释放以发送到此设备",
+        "no-peers_data-drop-bg": "释放来选择接收者",
+        "no-peers-subtitle": "配对新设备 或 加入一个公共房间 使在其他网络上可见",
+        "no-peers-title": "在其他设备上打开 PairDrop 来发送文件",
+        "x-instructions_desktop": "点击以发送文件 或 右键来发送信息",
+        "x-instructions_mobile": "轻触以发送文件 或 长按来发送信息",
+        "x-instructions_data-drop-bg": "释放来选择接收者",
+        "click-to-send": "点击发送",
+        "tap-to-send": "轻触发送",
+        "activate-paste-mode-base": "在其他设备上打开 PairDrop 来发送",
+        "activate-paste-mode-and-other-files": "和 {{count}} 个其他的文件",
+        "activate-paste-mode-shared-text": "分享文本"
+    },
+    "footer": {
+        "routed": "途径服务器",
+        "webrtc": "如果 WebRTC 不可用。",
+        "known-as": "你的名字是:",
+        "display-name_data-placeholder": "加载中…",
+        "display-name_title": "修改你的默认设备名",
+        "on-this-network": "在此网络上",
+        "paired-devices": "已配对的设备",
+        "traffic": "流量将",
+        "public-room-devices_title": "您可以被这个独立于网络的公共房间中的设备发现。",
+        "paired-devices_title": "您可以在任何时候被已配对的设备发现，而不依赖于网络。",
+        "public-room-devices": "在房间 {{roomId}} 中",
+        "discovery": "您可以被发现:",
+        "on-this-network_title": "您可以被这个网络上的每个人发现。"
+    },
+    "dialogs": {
+        "pair-devices-title": "配对新设备（常驻）",
+        "input-key-on-this-device": "在另一个设备上输入这串数字",
+        "base64-text": "信息",
+        "enter-key-from-another-device": "在此处输入从另一个设备上获得的数字。",
+        "edit-paired-devices-title": "管理已配对的设备",
+        "pair": "配对",
+        "cancel": "取消",
+        "scan-qr-code": "或者 扫描二维码。",
+        "paired-devices-wrapper_data-empty": "无已配对设备。",
+        "auto-accept-instructions-1": "启用",
+        "auto-accept": "自动接收",
+        "decline": "拒绝",
+        "base64-processing": "处理中…",
+        "base64-tap-to-paste": "轻触此处粘贴{{type}}",
+        "base64-paste-to-send": "粘贴到此处以发送 {{type}}",
+        "auto-accept-instructions-2": "以无需同意而自动接收从那个设备上发送的所有文件。",
+        "would-like-to-share": "想要分享",
+        "accept": "接收",
+        "close": "关闭",
+        "share": "分享",
+        "download": "保存",
+        "send": "发送",
+        "receive-text-title": "收到信息",
+        "copy": "复制",
+        "send-message-title": "发送信息",
+        "send-message-to": "发了一条信息给",
+        "has-sent": "发送了：",
+        "base64-files": "文件",
+        "file-other-description-file": "和 1 个其他的文件",
+        "file-other-description-image": "和 1 个其他的图片",
+        "file-other-description-image-plural": "和 {{count}} 个其他的图片",
+        "file-other-description-file-plural": "和 {{count}} 个其他的文件",
+        "title-image-plural": "图片",
+        "receive-title": "收到 {{descriptor}}",
+        "title-image": "图片",
+        "title-file": "文件",
+        "title-file-plural": "文件",
+        "download-again": "再次保存",
+        "system-language": "跟随系统语言",
+        "unpair": "取消配对",
+        "language-selector-title": "选择语言",
+        "hr-or": "或者",
+        "input-room-id-on-another-device": "在另一个设备上输入这串房间号"
+    },
+    "about": {
+        "faq_title": "常见问题",
+        "close-about_aria-label": "关闭 关于 PairDrop",
+        "github_title": "PairDrop 在 GitHub 上开源",
+        "claim": "最简单的跨设备传输方案",
+        "buy-me-a-coffee_title": "帮我买杯咖啡！",
+        "tweet_title": "关于 PairDrop 的推特"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "展示的名字已经长久变更。",
+        "display-name-changed-temporarily": "展示的名字已经变更 仅在此会话中。",
+        "display-name-random-again": "展示的名字再次随机生成。",
+        "download-successful": "{{descriptor}} 已下载",
+        "pairing-tabs-error": "无法配对两个浏览器标签页。",
+        "pairing-success": "新设备已配对。",
+        "pairing-not-persistent": "配对的设备不是持久的。",
+        "pairing-key-invalid": "无效配对码",
+        "pairing-key-invalidated": "配对码 {{key}} 已失效。",
+        "text-content-incorrect": "文本内容不合法。",
+        "file-content-incorrect": "文件内容不合法。",
+        "clipboard-content-incorrect": "剪贴板内容不合法。",
+        "link-received": "收到来自 {{name}} 的链接 - 点击打开",
+        "message-received": "收到来自 {{name}} 的信息 - 点击复制",
+        "request-title": "{{name}} 想要发送 {{count}} 个 {{descriptor}}",
+        "click-to-show": "点击展示",
+        "copied-text": "复制到剪贴板",
+        "selected-peer-left": "选择的设备已离开。",
+        "pairing-cleared": "所有设备已解除配对。",
+        "copied-to-clipboard": "已复制到剪贴板",
+        "notifications-enabled": "通知已启用。",
+        "copied-text-error": "写入剪贴板失败。请手动复制！",
+        "click-to-download": "点击以保存",
+        "unfinished-transfers-warning": "还有未完成的传输任务。你确定要关闭 PairDrop 吗？",
+        "message-transfer-completed": "信息传输已完成。",
+        "offline": "你未连接到网络",
+        "online": "你已重新连接到网络",
+        "connected": "已连接。",
+        "online-requirement": "你需要连接网络来配对新设备。",
+        "files-incorrect": "文件不合法。",
+        "file-transfer-completed": "文件传输已完成。",
+        "connecting": "连接中…",
+        "ios-memory-limit": "向 iOS 发送文件 一次最多只能发送 200 MB",
+        "rate-limit-join-key": "已达连接限制。请等待 10秒 后再试。",
+        "public-room-left": "已退出公共房间 {{publicRoomId}}",
+        "copied-to-clipboard-error": "无法复制。请手动复制。",
+        "public-room-id-invalid": "无效的房间号",
+        "online-requirement-pairing": "您需要连接到互联网来配对新设备。",
+        "online-requirement-public-room": "您需要连接到互联网来创建一个公共房间。"
+    },
+    "document-titles": {
+        "message-received": "收到信息",
+        "message-received-plural": "收到 {{count}} 条信息",
+        "file-transfer-requested": "文件传输请求",
+        "file-received-plural": "收到 {{count}} 个文件",
+        "file-received": "收到文件"
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "点击发送 {{descriptor}}",
+        "click-to-send": "点击以发送文件 或 右键来发送信息",
+        "connection-hash": "若要验证端到端加密的安全性，请在两个设备上比较此安全编号",
+        "preparing": "准备中…",
+        "waiting": "请等待…",
+        "transferring": "传输中…",
+        "processing": "处理中…"
+    }
+}

public/scripts/localization.js

@@ -0,0 +1,144 @@
+class Localization {
+    constructor() {
+        Localization.defaultLocale = "en";
+        Localization.supportedLocales = ["en", "nb", "ru", "zh-CN", "de"];
+        Localization.translations = {};
+        Localization.defaultTranslations = {};
+
+        Localization.systemLocale = Localization.supportedOrDefault(navigator.languages);
+
+        let storedLanguageCode = localStorage.getItem("language-code");
+
+        Localization.initialLocale = storedLanguageCode && Localization.isSupported(storedLanguageCode)
+            ? storedLanguageCode
+            : Localization.systemLocale;
+
+        Localization.setTranslation(Localization.initialLocale)
+            .then(_ => {
+                console.log("Initial translation successful.");
+                Events.fire("initial-translation-loaded");
+            });
+    }
+
+    static isSupported(locale) {
+        return Localization.supportedLocales.indexOf(locale) > -1;
+    }
+
+    static supportedOrDefault(locales) {
+        return locales.find(Localization.isSupported) || Localization.defaultLocale;
+    }
+
+    static async setTranslation(locale) {
+        if (!locale) locale = Localization.systemLocale;
+
+        await Localization.setLocale(locale)
+        await Localization.translatePage();
+
+        console.log("Page successfully translated",
+            `System language: ${Localization.systemLocale}`,
+            `Selected language: ${locale}`
+        );
+
+        Events.fire("translation-loaded");
+    }
+
+    static async setLocale(newLocale) {
+        if (newLocale === Localization.locale) return false;
+
+        Localization.defaultTranslations = await Localization.fetchTranslationsFor(Localization.defaultLocale);
+
+        const newTranslations = await Localization.fetchTranslationsFor(newLocale);
+
+        if(!newTranslations) return false;
+
+        Localization.locale = newLocale;
+        Localization.translations = newTranslations;
+    }
+
+    static getLocale() {
+        return Localization.locale;
+    }
+
+    static isSystemLocale() {
+        return !localStorage.getItem('language-code');
+    }
+
+    static async fetchTranslationsFor(newLocale) {
+        const response = await fetch(`lang/${newLocale}.json`)
+
+        if (response.redirected === true || response.status !== 200) return false;
+
+        return await response.json();
+    }
+
+    static async translatePage() {
+        document
+            .querySelectorAll("[data-i18n-key]")
+            .forEach(element => Localization.translateElement(element));
+    }
+
+    static async translateElement(element) {
+        const key = element.getAttribute("data-i18n-key");
+        const attrs = element.getAttribute("data-i18n-attrs").split(" ");
+
+        for (let i in attrs) {
+            let attr = attrs[i];
+            if (attr === "text") {
+                element.innerText = Localization.getTranslation(key);
+            } else {
+                if (attr.startsWith("data-")) {
+                    let dataAttr = attr.substring(5);
+                    element.dataset.dataAttr = Localization.getTranslation(key, attr);
+                } {
+                    element.setAttribute(attr, Localization.getTranslation(key, attr));
+                }
+            }
+        }
+    }
+
+    static getTranslation(key, attr=null, data={}, useDefault=false) {
+        const keys = key.split(".");
+
+        let translationCandidates = useDefault
+            ? Localization.defaultTranslations
+            : Localization.translations;
+
+        let translation;
+
+        try {
+            for (let i = 0; i < keys.length - 1; i++) {
+                translationCandidates = translationCandidates[keys[i]]
+            }
+
+            let lastKey = keys[keys.length - 1];
+
+            if (attr) lastKey += "_" + attr;
+
+            translation = translationCandidates[lastKey];
+
+            for (let j in data) {
+                translation = translation.replace(`{{${j}}}`, data[j]);
+            }
+        } catch (e) {
+            translation = "";
+        }
+
+        if (!translation) {
+            if (!useDefault) {
+                translation = this.getTranslation(key, attr, data, true);
+                console.warn(`Missing translation entry for your language ${Localization.locale.toUpperCase()}. Using ${Localization.defaultLocale.toUpperCase()} instead.`, key, attr);
+                console.warn("Help translating PairDrop: https://hosted.weblate.org/projects/pairdrop/pairdrop-spa/");
+            } else {
+                console.warn("Missing translation in default language:", key, attr);
+            }
+        }
+
+        return Localization.escapeHTML(translation);
+    }
+
+    static escapeHTML(unsafeText) {
+        let div = document.createElement('div');
+        div.innerText = unsafeText;
+        return div.innerHTML;
+    }
+}

public/scripts/network.js

@@ -3,20 +3,34 @@ window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnecti
 
 if (!window.isRtcSupported) alert("WebRTC must be enabled for PairDrop to work");
 
+window.hiddenProperty = 'hidden' in document ? 'hidden' :
+    'webkitHidden' in document ? 'webkitHidden' :
+        'mozHidden' in document ? 'mozHidden' :
+            null;
+window.visibilityChangeEvent = 'visibilitychange' in document ? 'visibilitychange' :
+    'webkitvisibilitychange' in document ? 'webkitvisibilitychange' :
+        'mozvisibilitychange' in document ? 'mozvisibilitychange' :
+            null;
+
 class ServerConnection {
 
     constructor() {
         this._connect();
         Events.on('pagehide', _ => this._disconnect());
-        document.addEventListener('visibilitychange', _ => this._onVisibilityChange());
+        document.addEventListener(window.visibilityChangeEvent, _ => this._onVisibilityChange());
         if (navigator.connection) navigator.connection.addEventListener('change', _ => this._reconnect());
-        Events.on('room-secrets', e => this._sendRoomSecrets(e.detail));
-        Events.on('room-secret-deleted', e => this.send({ type: 'room-secret-deleted', roomSecret: e.detail}));
-        Events.on('room-secrets-cleared', e => this.send({ type: 'room-secrets-cleared', roomSecrets: e.detail}));
-        Events.on('resend-peers', _ => this.send({ type: 'resend-peers'}));
+        Events.on('room-secrets', e => this.send({ type: 'room-secrets', roomSecrets: e.detail }));
+        Events.on('join-ip-room', e => this.send({ type: 'join-ip-room'}));
+        Events.on('room-secrets-deleted', e => this.send({ type: 'room-secrets-deleted', roomSecrets: e.detail}));
+        Events.on('regenerate-room-secret', e => this.send({ type: 'regenerate-room-secret', roomSecret: e.detail}));
         Events.on('pair-device-initiate', _ => this._onPairDeviceInitiate());
         Events.on('pair-device-join', e => this._onPairDeviceJoin(e.detail));
         Events.on('pair-device-cancel', _ => this.send({ type: 'pair-device-cancel' }));
+
+        Events.on('create-public-room', _ => this._onCreatePublicRoom());
+        Events.on('join-public-room', e => this._onJoinPublicRoom(e.detail.roomId, e.detail.createIfInvalid));
+        Events.on('leave-public-room', _ => this._onLeavePublicRoom());
+
         Events.on('offline', _ => clearTimeout(this._reconnectTimer));
         Events.on('online', _ => this._connect());
     }
@@ -36,27 +50,47 @@ class ServerConnection {
     _onOpen() {
         console.log('WS: server connected');
         Events.fire('ws-connected');
-        if (this._isReconnect) Events.fire('notify-user', 'Connected.');
-    }
-
-    _sendRoomSecrets(roomSecrets) {
-        this.send({ type: 'room-secrets', roomSecrets: roomSecrets });
+        if (this._isReconnect) Events.fire('notify-user', Localization.getTranslation("notifications.connected"));
     }
 
     _onPairDeviceInitiate() {
         if (!this._isConnected()) {
-            Events.fire('notify-user', 'You need to be online to pair devices.');
+            Events.fire('notify-user', Localization.getTranslation("notifications.online-requirement-pairing"));
             return;
         }
-        this.send({ type: 'pair-device-initiate' })
+        this.send({ type: 'pair-device-initiate' });
     }
 
-    _onPairDeviceJoin(roomKey) {
+    _onPairDeviceJoin(pairKey) {
         if (!this._isConnected()) {
-            setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000);
+            setTimeout(_ => this._onPairDeviceJoin(pairKey), 1000);
             return;
         }
-        this.send({ type: 'pair-device-join', roomKey: roomKey })
+        this.send({ type: 'pair-device-join', pairKey: pairKey });
+    }
+
+    _onCreatePublicRoom() {
+        if (!this._isConnected()) {
+            Events.fire('notify-user', Localization.getTranslation("notifications.online-requirement-public-room"));
+            return;
+        }
+        this.send({ type: 'create-public-room' });
+    }
+
+    _onJoinPublicRoom(roomId, createIfInvalid) {
+        if (!this._isConnected()) {
+            setTimeout(_ => this._onJoinPublicRoom(roomId), 1000);
+            return;
+        }
+        this.send({ type: 'join-public-room', publicRoomId: roomId, createIfInvalid: createIfInvalid });
+    }
+
+    _onLeavePublicRoom() {
+        if (!this._isConnected()) {
+            setTimeout(_ => this._onLeavePublicRoom(), 1000);
+            return;
+        }
+        this.send({ type: 'leave-public-room' });
     }
 
     _setRtcConfig(config) {
@@ -65,13 +99,13 @@ class ServerConnection {
 
     _onMessage(msg) {
         msg = JSON.parse(msg);
-        if (msg.type !== 'ping') console.log('WS:', msg);
+        if (msg.type !== 'ping') console.log('WS receive:', msg);
         switch (msg.type) {
             case 'rtc-config':
                 this._setRtcConfig(msg.config);
                 break;
             case 'peers':
-                Events.fire('peers', msg);
+                this._onPeers(msg);
                 break;
             case 'peer-joined':
                 Events.fire('peer-joined', msg);
@@ -98,27 +132,58 @@ class ServerConnection {
                 Events.fire('pair-device-join-key-invalid');
                 break;
             case 'pair-device-canceled':
-                Events.fire('pair-device-canceled', msg.roomKey);
+                Events.fire('pair-device-canceled', msg.pairKey);
                 break;
-            case 'pair-device-join-key-rate-limit':
-                Events.fire('notify-user', 'Rate limit reached. Wait 10 seconds and try again.');
+            case 'join-key-rate-limit':
+                Events.fire('notify-user', Localization.getTranslation("notifications.rate-limit-join-key"));
                 break;
             case 'secret-room-deleted':
                 Events.fire('secret-room-deleted', msg.roomSecret);
                 break;
+            case 'room-secret-regenerated':
+                Events.fire('room-secret-regenerated', msg);
+                break;
+            case 'public-room-id-invalid':
+                Events.fire('public-room-id-invalid', msg.publicRoomId);
+                break;
+            case 'public-room-created':
+                Events.fire('public-room-created', msg.roomId);
+                break;
+            case 'public-room-left':
+                Events.fire('public-room-left');
+                break;
             default:
-                console.error('WS: unknown message type', msg);
+                console.error('WS receive: unknown message type', msg);
         }
     }
 
     send(msg) {
         if (!this._isConnected()) return;
+        if (msg.type !== 'pong') console.log("WS send:", msg)
         this._socket.send(JSON.stringify(msg));
     }
 
+    _onPeers(msg) {
+        Events.fire('peers', msg);
+    }
+
     _onDisplayName(msg) {
-        sessionStorage.setItem("peerId", msg.message.peerId);
-        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
+        // Add peerId and peerIdHash to sessionStorage to authenticate as the same device on page reload
+        sessionStorage.setItem('peer_id', msg.message.peerId);
+        sessionStorage.setItem('peer_id_hash', msg.message.peerIdHash);
+
+        // Add peerId to localStorage to mark it for other PairDrop tabs on the same browser
+        BrowserTabsConnector.addPeerIdToLocalStorage().then(peerId => {
+            if (!peerId) return;
+            console.log("successfully added peerId to localStorage");
+
+            // Only now join rooms
+            Events.fire('join-ip-room');
+            PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
+                Events.fire('room-secrets', roomSecrets);
+            });
+        });
+
         Events.fire('display-name', msg);
     }
 
@@ -127,8 +192,8 @@ class ServerConnection {
         const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws';
         const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback';
         let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc);
-        const peerId = sessionStorage.getItem("peerId");
-        const peerIdHash = sessionStorage.getItem("peerIdHash");
+        const peerId = sessionStorage.getItem('peer_id');
+        const peerIdHash = sessionStorage.getItem('peer_id_hash');
         if (peerId && peerIdHash) {
             ws_url.searchParams.append('peer_id', peerId);
             ws_url.searchParams.append('peer_id_hash', peerIdHash);
@@ -138,18 +203,24 @@ class ServerConnection {
 
     _disconnect() {
         this.send({ type: 'disconnect' });
-        if (this._socket) {
-            this._socket.onclose = null;
-            this._socket.close();
-            this._socket = null;
-            Events.fire('ws-disconnected');
-            this._isReconnect = true;
-        }
+
+        const peerId = sessionStorage.getItem('peer_id');
+        BrowserTabsConnector.removePeerIdFromLocalStorage(peerId).then(_ => {
+            console.log("successfully removed peerId from localStorage");
+        });
+
+        if (!this._socket) return;
+
+        this._socket.onclose = null;
+        this._socket.close();
+        this._socket = null;
+        Events.fire('ws-disconnected');
+        this._isReconnect = true;
     }
 
     _onDisconnect() {
         console.log('WS: server disconnected');
-        Events.fire('notify-user', 'Connecting..');
+        Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
         clearTimeout(this._reconnectTimer);
         this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
         Events.fire('ws-disconnected');
@@ -157,7 +228,7 @@ class ServerConnection {
     }
 
     _onVisibilityChange() {
-        if (document.hidden) return;
+        if (window.hiddenProperty) return;
         this._connect();
     }
 
@@ -181,13 +252,19 @@ class ServerConnection {
 
 class Peer {
 
-    constructor(serverConnection, peerId, roomType, roomSecret) {
+    constructor(serverConnection, isCaller, peerId, roomType, roomId) {
         this._server = serverConnection;
+        this._isCaller = isCaller;
         this._peerId = peerId;
-        this._roomType = roomType;
-        this._roomSecret = roomSecret;
+
+        this._roomIds = {};
+        this._updateRoomIds(roomType, roomId);
+
         this._filesQueue = [];
         this._busy = false;
+
+        // evaluate auto accept
+        this._evaluateAutoAccept();
     }
 
     sendJSON(message) {
@@ -198,12 +275,73 @@ class Peer {
         this.sendJSON({type: 'display-name-changed', displayName: displayName});
     }
 
-    async createHeader(file) {
-        return {
-            name: file.name,
-            mime: file.type,
-            size: file.size,
-        };
+    _isSameBrowser() {
+        return BrowserTabsConnector.peerIsSameBrowser(this._peerId);
+    }
+
+    _isPaired() {
+        return !!this._roomIds['secret'];
+    }
+
+    _getPairSecret() {
+        return this._roomIds['secret'];
+    }
+
+    _getRoomTypes() {
+        return Object.keys(this._roomIds);
+    }
+
+    _updateRoomIds(roomType, roomId) {
+        // if peer is another browser tab, peer is not identifiable with roomSecret as browser tabs share all roomSecrets
+        // -> do not delete duplicates and do not regenerate room secrets
+        if (!this._isSameBrowser() && roomType === "secret" && this._isPaired() && this._getPairSecret() !== roomId) {
+            // multiple roomSecrets with same peer -> delete old roomSecret
+            PersistentStorage.deleteRoomSecret(this._getPairSecret())
+                .then(deletedRoomSecret => {
+                    if (deletedRoomSecret) console.log("Successfully deleted duplicate room secret with same peer: ", deletedRoomSecret);
+                });
+        }
+
+        this._roomIds[roomType] = roomId;
+
+        if (!this._isSameBrowser() && roomType === "secret" && this._isPaired() && this._getPairSecret().length !== 256 && this._isCaller) {
+            // increase security by initiating the increase of the roomSecret length from 64 chars (<v1.7.0) to 256 chars (v1.7.0+)
+            console.log('RoomSecret is regenerated to increase security')
+            Events.fire('regenerate-room-secret', this._getPairSecret());
+        }
+    }
+
+    _removeRoomType(roomType) {
+        delete this._roomIds[roomType];
+
+        Events.fire('room-type-removed', {
+            peerId: this._peerId,
+            roomType: roomType
+        });
+    }
+
+    _evaluateAutoAccept() {
+        if (!this._isPaired()) {
+            this._setAutoAccept(false);
+            return;
+        }
+
+        PersistentStorage.getRoomSecretEntry(this._getPairSecret())
+            .then(roomSecretEntry => {
+                const autoAccept = roomSecretEntry
+                    ? roomSecretEntry.entry.auto_accept
+                    : false;
+                this._setAutoAccept(autoAccept);
+            })
+            .catch(_ => {
+                this._setAutoAccept(false);
+            });
+    }
+
+    _setAutoAccept(autoAccept) {
+        this._autoAccept = !this._isSameBrowser()
+            ? autoAccept
+            : false;
     }
 
     getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
@@ -248,7 +386,11 @@ class Peer {
         let imagesOnly = true
         for (let i=0; i<files.length; i++) {
             Events.fire('set-progress', {peerId: this._peerId, progress: 0.8*i/files.length, status: 'prepare'})
-            header.push(await this.createHeader(files[i]));
+            header.push({
+                name: files[i].name,
+                mime: files[i].type,
+                size: files[i].size
+            });
             totalSize += files[i].size;
             if (files[i].type.split('/')[0] !== 'image') imagesOnly = false;
         }
@@ -360,7 +502,7 @@ class Peer {
 
     _onFilesTransferRequest(request) {
         if (this._requestPending) {
-            // Only accept one request at a time
+            // Only accept one request at a time per peer
             this.sendJSON({type: 'files-transfer-response', accepted: false});
             return;
         }
@@ -372,6 +514,14 @@ class Peer {
         }
 
         this._requestPending = request;
+
+        if (this._autoAccept) {
+            // auto accept if set via Edit Paired Devices Dialog
+            this._respondToFileTransferRequest(true);
+            return;
+        }
+
+        // default behavior: show user transfer request
         Events.fire('files-transfer-request', {
             request: request,
             peerId: this._peerId
@@ -402,7 +552,7 @@ class Peer {
 
     _abortTransfer() {
         Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
-        Events.fire('notify-user', 'Files are incorrect.');
+        Events.fire('notify-user', Localization.getTranslation("notifications.files-incorrect"));
         this._filesReceived = [];
         this._requestAccepted = null;
         this._digester = null;
@@ -443,14 +593,14 @@ class Peer {
             this._abortTransfer();
         }
 
-        // include for compatibility with Snapdrop for Android app
+        // include for compatibility with 'Snapdrop & PairDrop for Android' app
         Events.fire('file-received', fileBlob);
 
         this._filesReceived.push(fileBlob);
         if (!this._requestAccepted.header.length) {
             this._busy = false;
             Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
-            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
+            Events.fire('files-received', {peerId: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
             this._filesReceived = [];
             this._requestAccepted = null;
         }
@@ -460,7 +610,8 @@ class Peer {
         this._chunker = null;
         if (!this._filesQueue.length) {
             this._busy = false;
-            Events.fire('notify-user', 'File transfer completed.');
+            Events.fire('notify-user', Localization.getTranslation("notifications.file-transfer-completed"));
+            Events.fire('files-sent'); // used by 'Snapdrop & PairDrop for Android' app
         } else {
             this._dequeueFile();
         }
@@ -471,7 +622,7 @@ class Peer {
             Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
             this._filesRequested = null;
             if (message.reason === 'ios-memory-limit') {
-                Events.fire('notify-user', "Sending files to iOS is only possible up to 200MB at once");
+                Events.fire('notify-user', Localization.getTranslation("notifications.ios-memory-limit"));
             }
             return;
         }
@@ -481,7 +632,7 @@ class Peer {
     }
 
     _onMessageTransferCompleted() {
-        Events.fire('notify-user', 'Message transfer completed.');
+        Events.fire('notify-user', Localization.getTranslation("notifications.message-transfer-completed"));
     }
 
     sendText(text) {
@@ -497,34 +648,39 @@ class Peer {
     }
 
     _onDisplayNameChanged(message) {
-        if (!message.displayName || this._displayName === message.displayName) return;
-        this._displayName = message.displayName;
+        const displayNameHasChanged = this._displayName !== message.displayName
+
+        if (message.displayName && displayNameHasChanged) {
+            this._displayName = message.displayName;
+        }
+
         Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
+
+        if (!displayNameHasChanged) return;
+        Events.fire('notify-peer-display-name-changed', this._peerId);
     }
 }
 
 class RTCPeer extends Peer {
 
-    constructor(serverConnection, peerId, roomType, roomSecret) {
-        super(serverConnection, peerId, roomType, roomSecret);
+    constructor(serverConnection, isCaller, peerId, roomType, roomId) {
+        super(serverConnection, isCaller, peerId, roomType, roomId);
         this.rtcSupported = true;
-        if (!peerId) return; // we will listen for a caller
-        this._connect(peerId, true);
+        if (!this._isCaller) return; // we will listen for a caller
+        this._connect();
     }
 
-    _connect(peerId, isCaller) {
-        if (!this._conn || this._conn.signalingState === "closed") this._openConnection(peerId, isCaller);
+    _connect() {
+        if (!this._conn || this._conn.signalingState === "closed") this._openConnection();
 
-        if (isCaller) {
+        if (this._isCaller) {
             this._openChannel();
         } else {
             this._conn.ondatachannel = e => this._onChannelOpened(e);
         }
     }
 
-    _openConnection(peerId, isCaller) {
-        this._isCaller = isCaller;
-        this._peerId = peerId;
+    _openConnection() {
         this._conn = new RTCPeerConnection(window.rtcConfig);
         this._conn.onicecandidate = e => this._onIceCandidate(e);
         this._conn.onicecandidateerror = e => this._onError(e);
@@ -534,13 +690,17 @@ class RTCPeer extends Peer {
 
     _openChannel() {
         if (!this._conn) return;
+
         const channel = this._conn.createDataChannel('data-channel', {
             ordered: true,
             reliable: true // Obsolete. See https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/reliable
         });
         channel.onopen = e => this._onChannelOpened(e);
         channel.onerror = e => this._onError(e);
-        this._conn.createOffer().then(d => this._onDescription(d)).catch(e => this._onError(e));
+
+        this._conn.createOffer()
+            .then(d => this._onDescription(d))
+            .catch(e => this._onError(e));
     }
 
     _onDescription(description) {
@@ -556,7 +716,7 @@ class RTCPeer extends Peer {
     }
 
     onServerMessage(message) {
-        if (!this._conn) this._connect(message.sender.id, false);
+        if (!this._conn) this._connect();
 
         if (message.sdp) {
             this._conn.setRemoteDescription(message.sdp)
@@ -621,7 +781,7 @@ class RTCPeer extends Peer {
     _onBeforeUnload(e) {
         if (this._busy) {
             e.preventDefault();
-            return "There are unfinished transfers. Are you sure you want to close?";
+            return Localization.getTranslation("notifications.unfinished-transfers-warning");
         }
     }
 
@@ -641,7 +801,7 @@ class RTCPeer extends Peer {
         console.log('RTC: channel closed', this._peerId);
         Events.fire('peer-disconnected', this._peerId);
         if (!this._isCaller) return;
-        this._connect(this._peerId, true); // reopen the channel
+        this._connect(); // reopen the channel
     }
 
     _onConnectionStateChange() {
@@ -680,15 +840,19 @@ class RTCPeer extends Peer {
     _sendSignal(signal) {
         signal.type = 'signal';
         signal.to = this._peerId;
-        signal.roomType = this._roomType;
-        signal.roomSecret = this._roomSecret;
+        signal.roomType = this._getRoomTypes()[0];
+        signal.roomId = this._roomIds[this._getRoomTypes()[0]];
         this._server.send(signal);
     }
 
     refresh() {
         // check if channel is open. otherwise create one
         if (this._isConnected() || this._isConnecting()) return;
-        this._connect(this._peerId, this._isCaller);
+
+        // only reconnect if peer is caller
+        if (!this._isCaller) return;
+
+        this._connect();
     }
 
     _isConnected() {
@@ -716,32 +880,66 @@ 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-joined', e => this._onPeerJoined(e.detail));
         Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
+
+        // this device closes connection
+        Events.on('room-secrets-deleted', e => this._onRoomSecretsDeleted(e.detail));
+        Events.on('leave-public-room', e => this._onLeavePublicRoom(e.detail));
+
+        // peer closes connection
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
+
+        Events.on('room-secret-regenerated', e => this._onRoomSecretRegenerated(e.detail));
         Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName));
         Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
-        Events.on('peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail.peerId));
+        Events.on('notify-peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail));
+        Events.on('auto-accept-updated', e => this._onAutoAcceptUpdated(e.detail.roomSecret, e.detail.autoAccept));
     }
 
     _onMessage(message) {
-        // if different roomType -> abort
-        if (this.peers[message.sender.id] && this.peers[message.sender.id]._roomType !== message.roomType) return;
-        if (!this.peers[message.sender.id]) {
-            this.peers[message.sender.id] = new RTCPeer(this._server, undefined, message.roomType, message.roomSecret);
-        }
-        this.peers[message.sender.id].onServerMessage(message);
+        const peerId = message.sender.id;
+        this.peers[peerId].onServerMessage(message);
     }
 
-    _onPeers(msg) {
-        msg.peers.forEach(peer => {
-            if (this.peers[peer.id]) {
-                // if different roomType -> abort
-                if (this.peers[peer.id].roomType !== msg.roomType || this.peers[peer.id].roomSecret !== msg.roomSecret) return;
-                this.peers[peer.id].refresh();
-                return;
-            }
-            this.peers[peer.id] = new RTCPeer(this._server, peer.id, msg.roomType, msg.roomSecret);
+    _refreshPeer(peer, roomType, roomId) {
+        if (!peer) return false;
+
+        const roomTypesDiffer = Object.keys(peer._roomIds)[0] !== roomType;
+        const roomIdsDiffer = peer._roomIds[roomType] !== roomId;
+
+        // if roomType or roomId for roomType differs peer is already connected
+        // -> only update roomSecret and reevaluate auto accept
+        if (roomTypesDiffer || roomIdsDiffer) {
+            peer._updateRoomIds(roomType, roomId);
+            peer._evaluateAutoAccept();
+
+            return true;
+        }
+
+        peer.refresh();
+
+        return true;
+    }
+
+    _createOrRefreshPeer(isCaller, peerId, roomType, roomId) {
+        const peer = this.peers[peerId];
+        if (peer) {
+            this._refreshPeer(peer, roomType, roomId);
+            return;
+        }
+
+        this.peers[peerId] = new RTCPeer(this._server, isCaller, peerId, roomType, roomId);
+    }
+
+    _onPeerJoined(message) {
+        this._createOrRefreshPeer(false, message.peer.id, message.roomType, message.roomId);
+    }
+
+    _onPeers(message) {
+        message.peers.forEach(peer => {
+            this._createOrRefreshPeer(true, peer.id, message.roomType, message.roomId);
         })
     }
 
@@ -769,10 +967,19 @@ class PeersManager {
         this.peers[message.to].sendText(message.text);
     }
 
-    _onPeerLeft(msg) {
-        if (msg.disconnect === true) {
-            // if user actively disconnected from PairDrop disconnect all peer to peer connections immediately
-            Events.fire('peer-disconnected', msg.peerId);
+    _onPeerLeft(message) {
+        if (message.disconnect === true) {
+            // if user actively disconnected from PairDrop server, disconnect all peer to peer connections immediately
+            this._disconnectOrRemoveRoomTypeByPeerId(message.peerId, message.roomType);
+
+            // If no peers are connected anymore, we can safely assume that no other tab on the same browser is connected:
+            // Tidy up peerIds in localStorage
+            if (Object.keys(this.peers).length === 0) {
+                BrowserTabsConnector.removeOtherPeerIdsFromLocalStorage().then(peerIds => {
+                    if (!peerIds) return;
+                    console.log("successfully removed other peerIds from localStorage");
+                });
+            }
         }
     }
 
@@ -787,17 +994,52 @@ class PeersManager {
         if (peer._channel) peer._channel.onclose = null;
         peer._conn.close();
         peer._busy = false;
+        peer._roomIds = {};
+    }
+
+    _onRoomSecretsDeleted(roomSecrets) {
+        for (let i=0; i<roomSecrets.length; i++) {
+            this._disconnectOrRemoveRoomTypeByRoomId('secret', roomSecrets[i]);
+        }
+    }
+
+    _onLeavePublicRoom(publicRoomId) {
+        this._disconnectOrRemoveRoomTypeByRoomId('public-id', publicRoomId);
     }
 
     _onSecretRoomDeleted(roomSecret) {
-        for (const peerId in this.peers) {
-            const peer = this.peers[peerId];
-            if (peer._roomSecret === roomSecret) {
-                this._onPeerDisconnected(peerId);
-            }
+        this._disconnectOrRemoveRoomTypeByRoomId('secret', roomSecret);
+    }
+
+    _disconnectOrRemoveRoomTypeByRoomId(roomType, roomId) {
+        const peerIds = this._getPeerIdsFromRoomId(roomId);
+
+        if (!peerIds.length) return;
+
+        for (let i=0; i<peerIds.length; i++) {
+            this._disconnectOrRemoveRoomTypeByPeerId(peerIds[i], roomType);
         }
     }
 
+    _disconnectOrRemoveRoomTypeByPeerId(peerId, roomType) {
+        const peer = this.peers[peerId];
+
+        if (!peer) return;
+
+        if (peer._getRoomTypes().length > 1) {
+            peer._removeRoomType(roomType);
+        } else {
+            Events.fire('peer-disconnected', peerId);
+        }
+    }
+
+    _onRoomSecretRegenerated(message) {
+        PersistentStorage.updateRoomSecret(message.oldRoomSecret, message.newRoomSecret).then(_ => {
+            console.log("successfully regenerated room secret");
+            Events.fire("room-secrets", [message.newRoomSecret]);
+        })
+    }
+
     _notifyPeersDisplayNameChanged(newDisplayName) {
         this._displayName = newDisplayName ? newDisplayName : this._originalDisplayName;
         for (const peerId in this.peers) {
@@ -813,6 +1055,31 @@ class PeersManager {
 
     _onDisplayName(displayName) {
         this._originalDisplayName = displayName;
+        // if the displayName has not been changed (yet) set the displayName to the original displayName
+        if (!this._displayName) this._displayName = displayName;
+    }
+
+    _onAutoAcceptUpdated(roomSecret, autoAccept) {
+        const peerId = this._getPeerIdsFromRoomId(roomSecret)[0];
+
+        if (!peerId) return;
+
+        this.peers[peerId]._setAutoAccept(autoAccept);
+    }
+
+    _getPeerIdsFromRoomId(roomId) {
+        if (!roomId) return [];
+
+        let peerIds = []
+        for (const peerId in this.peers) {
+            const peer = this.peers[peerId];
+
+            // peer must have same roomId.
+            if (Object.values(peer._roomIds).includes(roomId)) {
+                peerIds.push(peer._peerId);
+            }
+        }
+        return peerIds;
     }
 }
 
@@ -898,7 +1165,7 @@ class FileDigester {
 }
 
 class Events {
-    static fire(type, detail) {
+    static fire(type, detail = {}) {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 

public/scripts/util.js

@@ -5,7 +5,7 @@ if (!navigator.clipboard) {
 
             // A <span> contains the text to copy
             const span = document.createElement('span');
-            span.textContent = text;
+            span.innerText = text;
             span.style.whiteSpace = 'pre'; // Preserve consecutive spaces and newlines
 
             // Paint the span outside the viewport
@@ -398,3 +398,11 @@ const cyrb53 = function(str, seed = 0) {
     h2 = Math.imul(h2 ^ (h2>>>16), 2246822507) ^ Math.imul(h1 ^ (h1>>>13), 3266489909);
     return 4294967296 * (2097151 & h2) + (h1>>>0);
 };
+
+function onlyUnique (value, index, array) {
+    return array.indexOf(value) === index;
+}
+
+function getUrlWithoutArguments() {
+    return `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+}

public/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.6.1';
+const cacheVersion = 'v1.8.0';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',
@@ -72,8 +72,7 @@ self.addEventListener('fetch', function(event) {
     if (event.request.method === "POST") {
         // Requests related to Web Share Target.
         event.respondWith((async () => {
-            let share_url = await evaluateRequestData(event.request);
-            share_url = event.request.url + share_url;
+            const share_url = await evaluateRequestData(event.request);
             return Response.redirect(encodeURI(share_url), 302);
         })());
     } else {
@@ -101,15 +100,16 @@ 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");
-
-
+const evaluateRequestData = function (request) {
     return new Promise(async (resolve) => {
+        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");
+
+        const pairDropUrl = request.url;
+
         if (files && files.length > 0) {
             let fileObjects = [];
             for (let i=0; i<files.length; i++) {
@@ -128,21 +128,21 @@ const evaluateRequestData = async function (request) {
 
                     const objectStoreRequest = objectStore.add(fileObjects[i]);
                     objectStoreRequest.onsuccess = _ => {
-                        if (i === fileObjects.length - 1) resolve('?share-target=files');
+                        if (i === fileObjects.length - 1) resolve(pairDropUrl + '?share-target=files');
                     }
                 }
             }
             DBOpenRequest.onerror = _ => {
-                resolve('');
+                resolve(pairDropUrl);
             }
         } else {
-            let share_url = '?share-target=text';
+            let urlArgument = '?share-target=text';
 
-            if (title) share_url += `&title=${title}`;
-            if (text) share_url += `&text=${text}`;
-            if (url) share_url += `&url=${url}`;
+            if (title) urlArgument += `&title=${title}`;
+            if (text) urlArgument += `&text=${text}`;
+            if (url) urlArgument += `&url=${url}`;
 
-            resolve(share_url);
+            resolve(pairDropUrl + urlArgument);
         }
     });
 }

public/styles.css

@@ -4,6 +4,8 @@
     --icon-size: 24px;
     --primary-color: #4285f4;
     --paired-device-color: #00a69c;
+    --public-room-color: #db8500;
+    --accent-color: var(--primary-color);
     --peer-width: 120px;
     color-scheme: light dark;
 }
@@ -19,6 +21,11 @@ body {
     overflow-x: hidden;
     overscroll-behavior: none;
     overflow-y: hidden;
+    /* Only allow selection on message and pair key */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    transition: color 300ms;
 }
 
 body {
@@ -36,6 +43,10 @@ html {
     min-height: fill-available;
 }
 
+.fw {
+    width: 100%;
+}
+
 .row-reverse {
     display: flex;
     flex-direction: row-reverse;
@@ -47,7 +58,6 @@ html {
 
 .row {
     display: flex;
-    justify-content: center;
     flex-direction: row;
 }
 
@@ -74,6 +84,10 @@ html {
     bottom: 0;
 }
 
+.pointer {
+    cursor: pointer;
+}
+
 header {
     position: absolute;
     align-items: baseline;
@@ -211,8 +225,12 @@ a,
     cursor: pointer;
 }
 
-hr {
-    color: white;
+input {
+    cursor: pointer;
+}
+
+input[type="checkbox"] {
+    min-width: 13px;
 }
 
 x-noscript {
@@ -263,8 +281,6 @@ x-noscript {
     margin-top: 56px;
     flex-direction: column-reverse;
     flex-grow: 1;
-    --footer-height: 132px;
-    max-height: calc(100vh - 56px - var(--footer-height));
     justify-content: space-around;
     align-items: center;
     overflow-x: hidden;
@@ -272,11 +288,6 @@ x-noscript {
     overscroll-behavior-x: none;
 }
 
-@media screen and (max-width: 425px) {
-    header:has(#clear-pair-devices:not([hidden]))~#center {
-        --footer-height: 150px;
-    }
-}
 
 /* Peers List */
 
@@ -405,10 +416,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,
@@ -430,7 +441,7 @@ x-no-peers::before {
 }
 
 x-no-peers[drop-bg]::before {
-    content: "Release to select recipient";
+    content: attr(data-drop-bg);
 }
 
 x-no-peers[drop-bg] * {
@@ -442,8 +453,6 @@ x-no-peers[drop-bg] * {
 /* Peer */
 
 x-peer {
-    -webkit-user-select: none;
-    user-select: none;
     padding: 8px;
     align-content: start;
     flex-wrap: wrap;
@@ -451,7 +460,6 @@ x-peer {
 
 x-peer label {
     width: var(--peer-width);
-    cursor: pointer;
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative;
@@ -480,10 +488,14 @@ x-peer .icon-wrapper {
     display: flex;
 }
 
-x-peer:not(.type-ip).type-secret .icon-wrapper {
+x-peer.type-secret .icon-wrapper {
     background: var(--paired-device-color);
 }
 
+x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
+    background: var(--public-room-color);
+}
+
 x-peer x-icon > .highlight-wrapper {
     align-self: center;
     align-items: center;
@@ -492,17 +504,29 @@ x-peer x-icon > .highlight-wrapper {
 }
 
 x-peer x-icon > .highlight-wrapper > .highlight {
-    width: 6px;
+    width: 15px;
     height: 6px;
-    border-radius: 50%;
+    border-radius: 4px;
+    margin-left: 1px;
+    margin-right: 1px;
     display: none;
 }
 
-x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
+x-peer.type-ip x-icon > .highlight-wrapper > .highlight.highlight-room-ip {
+    background-color: var(--primary-color);
+    display: inline;
+}
+
+x-peer.type-secret x-icon > .highlight-wrapper > .highlight.highlight-room-secret {
     background-color: var(--paired-device-color);
     display: inline;
 }
 
+x-peer.type-public-id x-icon > .highlight-wrapper > .highlight.highlight-room-public-id {
+    background-color: var(--public-room-color);
+    display: inline;
+}
+
 x-peer:not([status]):hover x-icon,
 x-peer:not([status]):focus x-icon {
     transform: scale(1.05);
@@ -530,7 +554,6 @@ x-peer[status] x-icon {
 .status,
 .device-name,
 .connection-hash {
-    height: 18px;
     opacity: 0.7;
 }
 
@@ -544,22 +567,6 @@ x-peer[status] x-icon {
     white-space: nowrap;
 }
 
-x-peer[status=transfer] .status:before {
-    content: 'Transferring...';
-}
-
-x-peer[status=prepare] .status:before {
-    content: 'Preparing...';
-}
-
-x-peer[status=wait] .status:before {
-    content: 'Waiting...';
-}
-
-x-peer[status=process] .status:before {
-    content: 'Processing...';
-}
-
 x-peer:not([status]) .status,
 x-peer[status] .device-name {
     display: none;
@@ -593,13 +600,11 @@ x-peer[drop] x-icon {
 
 footer {
     position: relative;
-    margin-top: auto;
     z-index: 2;
     align-items: center;
-    padding: 0 0 16px 0;
     text-align: center;
-    transition: color 300ms;
     cursor: default;
+    margin: auto 5px 5px;
 }
 
 footer .logo {
@@ -609,43 +614,71 @@ footer .logo {
     margin-top: -10px;
 }
 
-footer .font-body2 {
-    color: var(--primary-color);
-    margin: auto 18px;
+.discovery-wrapper {
+    font-size: 12px;
+    margin: 10px auto auto;
+    border: 3px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 2px;
+    background-color: rgb(var(--bg-color));
+    transition: background-color 0.5s ease;
 }
 
-#on-this-network {
-    border-bottom: solid 4px var(--primary-color);
-    padding-bottom: 1px;
+/*You can be discovered wrapper*/
+.discovery-wrapper > div:first-of-type {
+    padding-left: 4px;
+    padding-right: 4px;
 }
 
-#paired-devices {
-    border-bottom: solid 4px var(--paired-device-color);
-    padding-bottom: 1px;
+
+.discovery-wrapper .badge {
+    word-break: keep-all;
+    margin: 2px;
+}
+
+.badge {
+    border-radius: 0.3rem/0.3rem;
+    padding-right: 0.3rem;
+    padding-left: 0.3em;
+    background-color: var(--badge-color);
+    color: white;
+    transition: background-color 0.5s ease;
+    white-space: nowrap;
+}
+
+.badge-room-ip {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.badge-room-secret {
+    background-color: var(--paired-device-color);
+    border-color: var(--paired-device-color);
+}
+
+.badge-room-public-id {
+    background-color: var(--public-room-color);
+    border-color: var(--public-room-color);
 }
 
 #display-name {
+    position: relative;
     display: inline-block;
     text-align: left;
     border: none;
     outline: none;
     max-width: 15em;
     text-overflow: ellipsis;
-    white-space: nowrap;
     cursor: text;
     margin-left: -1rem;
     margin-bottom: -6px;
-    padding-right: 0.3rem;
-    padding-left: 0.3em;
     padding-bottom: 0.1rem;
     border-radius: 1.3rem/30%;
     border-right: solid 1rem transparent;
     border-left: solid 1rem transparent;
     background-clip: padding-box;
-    background-color: rgba(var(--text-color), 43%);
-    color: white;
-    transition: background-color 0.5s ease;
     overflow: hidden;
+    z-index: 1;
 }
 
 #edit-pen {
@@ -654,7 +687,6 @@ footer .font-body2 {
     margin-left: -1rem;
     margin-bottom: -2px;
     position: relative;
-    z-index: -1;
 }
 
 /* Dialog */
@@ -672,7 +704,6 @@ x-dialog x-paper {
     z-index: 3;
     background: white;
     border-radius: 8px;
-    padding: 16px 24px;
     width: 100%;
     max-width: 400px;
     overflow: hidden;
@@ -681,14 +712,45 @@ x-dialog x-paper {
     will-change: transform;
 }
 
-#pair-device-dialog x-paper {
+x-paper > .row:first-of-type {
+    background-color: var(--accent-color);
+    border-bottom: solid 4px var(--border-color);
+    margin-bottom: 10px;
+}
+
+x-paper > .row:first-of-type h2 {
+    color: white;
+}
+
+#pair-device-dialog,
+#edit-paired-devices-dialog {
+    --accent-color: var(--paired-device-color);
+}
+
+#public-room-dialog {
+    --accent-color: var(--public-room-color);
+}
+
+#pair-device-dialog x-paper,
+#public-room-dialog x-paper {
     display: flex;
     flex-direction: column;
     position: absolute;
     top: max(50%, 350px);
     margin-top: -328.5px;
     width: calc(100vw - 20px);
-    height: 625px;
+}
+
+#pair-device-dialog ::-moz-selection,
+#pair-device-dialog ::selection {
+    color: black;
+    background: var(--paired-device-color);
+}
+
+#public-room-dialog ::-moz-selection,
+#public-room-dialog ::selection {
+    color: black;
+    background: var(--public-room-color);
 }
 
 x-dialog:not([show]) {
@@ -708,24 +770,21 @@ x-dialog a {
     color: var(--primary-color);
 }
 
-x-dialog .font-subheading {
-    margin-bottom: 5px;
-}
+/* Pair Devices Dialog */
 
-/* PairDevicesDialog */
-
-#key-input-container {
+.input-key-container {
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
-#key-input-container>input {
+.input-key-container > input {
     width: 45px;
     height: 45px;
     font-size: 30px;
     padding: 0;
     text-align: center;
+    text-transform: uppercase;
     display: -webkit-box !important;
     display: -webkit-flex !important;
     display: -moz-flex !important;
@@ -736,15 +795,18 @@ x-dialog .font-subheading {
     justify-content: center;
 }
 
-#key-input-container>input + * {
+.input-key-container > input + * {
     margin-left: 6px;
 }
 
-#key-input-container>input:nth-of-type(4) {
+.input-key-container.six-chars > input:nth-of-type(4) {
     margin-left: 5%;
 }
 
-#room-key {
+.key {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    user-select: text;
     font-size: 50px;
     letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
     display: inline-block;
@@ -752,47 +814,169 @@ x-dialog .font-subheading {
     margin: 15px -15px;
 }
 
-#room-key-qr-code {
+.key-qr-code {
     margin: 16px;
 }
 
-#pair-device-dialog hr {
-    margin: 40px -24px;
+.key-instructions {
+    flex-direction: column;
+}
+
+x-dialog h2 {
+    margin-top: 5px;
+    margin-bottom: 0;
+}
+
+x-dialog hr {
+    height: 3px;
+    border: none;
+    width: 100%;
+    background-color: var(--border-color);
+}
+
+.hr-note {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.hr-note hr {
+    margin-bottom: -2px;
+}
+
+.hr-note > div {
+    height: 0;
+    transform: translateY(-10px);
+}
+
+
+.hr-note > div > span {
+    padding: 3px 10px;
+    border-radius: 10px;
+    color: rgb(var(--text-color));
+    background-color: rgb(var(--bg-color));
+    border: var(--border-color) solid 3px;
+    text-transform: uppercase;
 }
 
 #pair-device-dialog x-background {
     padding: 16px!important;
 }
 
+/* Edit Paired Devices Dialog */
+.paired-devices-wrapper:empty:before {
+    content: attr(data-empty);
+}
+
+.paired-devices-wrapper:empty {
+    padding: 10px;
+}
+
+.paired-devices-wrapper {
+    border-top: solid 4px var(--paired-device-color);
+    border-bottom: solid 4px var(--paired-device-color);
+    max-height: 65vh;
+    overflow: scroll;
+    background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
+    linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
+        /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .3), rgba(var(--text-color), 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .3), rgba(var(--text-color), 0)) 0 100%;
+
+    background-repeat: no-repeat;
+    background-size: 100% 80px, 100% 80px, 100% 24px, 100% 24px;
+
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+}
+
+.paired-device {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+}
+
+.paired-device:not(:last-child) {
+    border-bottom: solid 4px var(--paired-device-color);
+}
+
+.paired-device > .display-name,
+.paired-device > .device-name {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    align-self: center;
+    border-bottom: solid 2px rgba(128, 128, 128, 0.5);
+    opacity: 1;
+}
+.paired-device span {
+    width: 100%;
+}
+
+.paired-device > .button-wrapper {
+    display: flex;
+    height: 36px;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.paired-device > .button-wrapper > label,
+.paired-device > .button-wrapper > button {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    white-space: nowrap;
+    justify-content: center;
+    width: 50%;
+    padding-left: 6px;
+    padding-right: 6px;
+    height: 36px;
+}
+
+.paired-device > .button-wrapper > :not(:last-child) {
+    border-right: solid 1px rgba(128, 128, 128, 0.5);
+}
+
+.paired-device > .button-wrapper > :not(:first-child) {
+    border-left: solid 1px rgba(128, 128, 128, 0.5);
+}
+
+.paired-device * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* Receive Dialog */
 
-x-dialog .row {
-    margin-top: 24px;
-    margin-bottom: 8px;
+x-paper > .row {
+    padding: 10px;
 }
 
 /* button row*/
-x-paper > div:last-child {
-    margin: auto -24px -15px;
-    border-top: solid 2.5px var(--border-color);
+x-paper > .button-row {
+    border-top: solid 3px var(--border-color);
     height: 50px;
+    margin-top: 10px;
 }
 
-x-paper > div:last-child > .button {
+x-paper > .button-row > .button {
     height: 100%;
     width: 100%;
 }
 
-x-paper > div:last-child > .button:not(:last-child) {
-    border-left: solid 2.5px var(--border-color);
+x-paper > .button-row > .button:not(:first-child) {
+    border-right: solid 1.5px var(--border-color);
+}
+
+x-paper > .button-row > .button:not(:last-child) {
+    border-left: solid 1.5px var(--border-color);
 }
 
 .file-description {
-    margin-bottom: 25px;
-}
-
-.file-description .row {
-    margin: 0
+    max-width: 100%;
 }
 
 .file-description span {
@@ -803,23 +987,29 @@ x-paper > div:last-child > .button:not(:last-child) {
 .file-name {
     font-style: italic;
     max-width: 100%;
+    margin-top: 5px;
 }
 
 .file-stem {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding-right: 1px;
 }
 
 /* Send Text Dialog */
-
 x-dialog .dialog-subheader {
-    margin-bottom: 25px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+}
+
+#send-text-dialog .display-name-wrapper {
+    padding-bottom: 0;
 }
 
 #text-input {
     min-height: 200px;
-    margin: 14px auto;
+    width: 100%;
 }
 
 /* Receive Text Dialog */
@@ -830,11 +1020,10 @@ x-dialog .dialog-subheader {
     max-height: calc(100vh - 393px);
     overflow-x: hidden;
     overflow-y: auto;
-    -webkit-user-select: all;
-    -moz-user-select: all;
-    user-select: all;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    user-select: text;
     white-space: pre-wrap;
-    padding: 15px 0;
 }
 
 #receive-text-dialog #text a {
@@ -861,12 +1050,11 @@ x-dialog .dialog-subheader {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
-    text-align: center;
+    border-radius: 8px;
 }
 
 #base64-paste-dialog .textarea {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -878,21 +1066,9 @@ x-dialog .dialog-subheader {
     color: var(--primary-color);
     font-weight: 700;
     text-transform: uppercase;
-    content: attr(placeholder);
+    white-space: pre-wrap;
 }
 
-#base64-paste-dialog button {
-    margin: auto;
-    border-radius: 8px;
-}
-
-#base64-paste-dialog button[close] {
-    margin-top: 20px;
-}
-
-#base64-paste-dialog button[close]:before {
-    border-radius: 8px;
-}
 
 /* Button */
 
@@ -909,12 +1085,13 @@ x-dialog .dialog-subheader {
     cursor: pointer;
     user-select: none;
     background: inherit;
-    color: var(--primary-color);
+    color: var(--accent-color);
     overflow: hidden;
 }
 
 .button[disabled] {
     color: #5B5B66;
+    cursor: not-allowed;
 }
 
 
@@ -948,6 +1125,11 @@ x-dialog .dialog-subheader {
     opacity: 0.1;
 }
 
+.button[selected],
+.icon-button[selected] {
+    opacity: 0.1;
+}
+
 #cancel-paste-mode {
     z-index: 2;
     margin: 0;
@@ -990,8 +1172,7 @@ button::-moz-focus-inner {
     border: none;
     outline: none;
     padding: 16px 24px;
-    border-radius: 16px;
-    margin: 10px 0;
+    border-radius: 8px;
     font-size: 14px;
     font-family: inherit;
     background: #f1f3f4;
@@ -1014,11 +1195,14 @@ button::-moz-focus-inner {
     text-align: center;
 }
 
+#about header {
+    z-index: 1;
+}
+
 #about .fade-in {
     transition: opacity 300ms;
     will-change: opacity;
     transition-delay: 300ms;
-    z-index: 11;
     pointer-events: all;
 }
 
@@ -1032,12 +1216,23 @@ button::-moz-focus-inner {
     --icon-size: 96px;
 }
 
+#about .title-wrapper {
+    display: flex;
+    align-items: baseline;
+}
+
+#about .title-wrapper > div {
+    margin-left: 0.5em;
+}
+
 #about x-background {
     position: absolute;
-    top: calc(28px - 250px);
-    right: calc(36px - 250px);
-    width: 500px;
-    height: 500px;
+    --size: max(max(230vw, 230vh), calc(150vh + 150vw));
+    --size-half: calc(var(--size)/2);
+    top: calc(28px - var(--size-half));
+    right: calc(36px - var(--size-half));
+    width: var(--size);
+    height: var(--size);
     border-radius: 50%;
     background: var(--primary-color);
     transform: scale(0);
@@ -1051,7 +1246,7 @@ button::-moz-focus-inner {
 }
 
 #about:target x-background {
-    transform: scale(10);
+    transform: scale(1);
 }
 
 #about .row a {
@@ -1066,6 +1261,14 @@ button::-moz-focus-inner {
     align-self: end;
 }
 
+canvas.circles {
+    width: 100vw;
+    position: absolute;
+    z-index: -10;
+    top: 0;
+    left: 0;
+}
+
 /* Loading Indicator */
 
 .progress {
@@ -1156,11 +1359,11 @@ x-instructions:not([drop-peer]):not([drop-bg]):before {
 }
 
 x-instructions[drop-peer]:before {
-    content: "Release to send to peer";
+    content: attr(data-drop-peer);
 }
 
 x-instructions[drop-bg]:not([drop-peer]):before {
-    content: "Release to select recipient";
+    content: attr(data-drop-bg);
 }
 
 x-instructions p {
@@ -1174,36 +1377,11 @@ x-peers:empty~x-instructions {
 @media (hover: none) and (pointer: coarse) {
     x-peer {
         transform: scale(0.95);
-        padding: 4px 0;
+        padding: 4px;
     }
 }
 
-#websocket-fallback {
-    margin-left: 5px;
-    margin-right: 5px;
-    padding: 5px;
-    text-align: center;
-    opacity: 0.5;
-    transition: opacity 300ms;
-}
-
-#websocket-fallback>span {
-    margin: 2px;
-}
-
-#websocket-fallback > span > span {
-    border-bottom: solid 4px var(--ws-peer-color);
-}
-
 /* Responsive Styles */
-@media screen and (max-width: 360px) {
-    x-dialog x-paper {
-        padding: 15px;
-    }
-    x-paper > div:last-child {
-        margin: auto -15px -15px;
-    }
-}
 
 @media screen and (min-height: 800px) {
     footer {
@@ -1226,8 +1404,9 @@ body {
     --text-color: 51,51,51;
     --bg-color: 250,250,250; /*rgb code*/
     --bg-color-test: 18,18,18;
-    --bg-color-secondary: #f1f3f4;
-    --border-color: #e7e8e8;
+    --bg-color-secondary: #e4e4e4;
+    --border-color: rgb(169, 169, 169);
+    --badge-color: #a5a5a5;
 }
 
 /* Dark theme colors */
@@ -1235,7 +1414,8 @@ body.dark-theme {
     --text-color: 238,238,238;
     --bg-color: 18,18,18; /*rgb code*/
     --bg-color-secondary: #333;
-    --border-color: #252525;
+    --border-color: rgb(238,238,238);
+    --badge-color: #717171;
 }
 
 /* Colored Elements */
@@ -1269,7 +1449,7 @@ x-dialog x-paper {
 
 /* Image/Video/Audio Preview */
 .file-preview {
-    margin: 10px -24px 40px -24px;
+    margin-bottom: 15px;
 }
 
 .file-preview:empty {
@@ -1293,15 +1473,17 @@ x-dialog x-paper {
         --text-color: 238,238,238;
         --bg-color: 18,18,18; /*rgb code*/
         --bg-color-secondary: #333;
-        --border-color: #252525;
+        --border-color: rgb(238,238,238);
+        --badge-color: #717171;
     }
 
     /* Override dark mode with light mode styles if the user decides to swap */
     body.light-theme {
         --text-color: 51,51,51;
         --bg-color: 250,250,250; /*rgb code*/
-        --bg-color-secondary: #f1f3f4;
-        --border-color: #e7e8e8;
+        --bg-color-secondary: #e4e4e4;
+        --border-color: rgb(169, 169, 169);
+        --badge-color: #a5a5a5;
    }
 }
 
@@ -1337,3 +1519,9 @@ x-dialog x-paper {
     background: #bfbfbf;
     border-radius: 4px;
 }
+
+::-moz-selection,
+::selection {
+    color: black;
+    background: var(--primary-color);
+}

public_included_ws_fallback/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!-- Web App Config -->
     <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,122 +39,246 @@
 
 <body translate="no">
     <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" data-i18n-key="header.about" data-i18n-attrs="title aria-label" title="About PairDrop" aria-label="Open About PairDrop">
             <svg class="icon">
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
+        <div id="language-selector" class="icon-button" data-i18n-key="header.language-selector" data-i18n-attrs="title" title="Select Language">
+            <svg class="icon">
+                <use xlink:href="#icon-language-selector" />
+            </svg>
+        </div>
         <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" data-i18n-key="header.theme-auto" data-i18n-attrs="title" title="Adapt Theme to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
             </div>
             <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" data-i18n-key="header.theme-light" data-i18n-attrs="title" title="Always Use Light-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
                 </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" data-i18n-key="header.theme-dark" data-i18n-attrs="title" title="Always Use Dark-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
                 </div>
             </div>
         </div>
-        <div id="notification" class="icon-button" title="Enable Notifications" hidden>
+        <div id="notification" class="icon-button" data-i18n-key="header.notification" data-i18n-attrs="title" title="Enable Notifications" hidden>
             <svg class="icon">
                 <use xlink:href="#notifications" />
             </svg>
         </div>
-        <div id="install" class="icon-button" title="Install PairDrop" hidden>
+        <div id="install" class="icon-button" data-i18n-key="header.install" data-i18n-attrs="title" title="Install PairDrop" hidden>
             <svg class="icon">
                 <use xlink:href="#homescreen" />
             </svg>
         </div>
-        <div id="pair-device" class="icon-button" title="Pair Device" hidden>
+        <div id="pair-device" class="icon-button" data-i18n-key="header.pair-device" data-i18n-attrs="title" title="Pair Your Devices Permanently">
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
         </div>
-        <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
+        <div id="edit-paired-devices" class="icon-button" data-i18n-key="header.edit-paired-devices" data-i18n-attrs="title" title="Edit Paired Devices" hidden>
             <svg class="icon">
-                <use xlink:href="#clear-pair-devices-icon" />
+                <use xlink:href="#edit-pair-devices-icon" />
             </svg>
         </div>
-        <div id="cancel-paste-mode" class="button" hidden>Done</div>
+        <div id="join-public-room" class="icon-button" data-i18n-key="header.join-public-room" data-i18n-attrs="title" title="Join Public Room Temporarily">
+            <svg class="icon">
+                <use xlink:href="#public-room-icon" />
+            </svg>
+        </div>
+        <div id="cancel-paste-mode" class="button" data-i18n-key="header.cancel-paste-mode" data-i18n-attrs="text" hidden>Done</div>
     </header>
     <!-- Center -->
     <div id="center">
         <!-- Peers -->
         <div class="x-peers-filler"></div>
         <x-peers class="center"></x-peers>
-        <x-no-peers>
-            <h2>Open PairDrop on other devices to send files</h2>
-            <div>Pair devices to be discoverable on other networks</div>
+        <x-no-peers data-i18n-key="instructions.no-peers" data-i18n-attrs="data-drop-bg" data-drop-bg="Release to select recipient">
+            <h2 data-i18n-key="instructions.no-peers-title" data-i18n-attrs="text">Open PairDrop on other devices to send files</h2>
+            <div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text">Pair devices or enter a public room to be discoverable on other networks</div>
         </x-no-peers>
-        <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
+        <x-instructions data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"
+                        desktop="Click to send files or right click to send a message"
+                        mobile="Tap to send files or long tap to send a message"
+                        data-drop-peer="Release to send to peer"
+                        data-drop-bg="Release to select recipient">
             <p id="paste-filename"></p>
         </x-instructions>
+        <div id="websocket-fallback">
+            <span data-i18n-key="footer.traffic" data-i18n-attrs="text">Traffic is</span>
+            <span data-i18n-key="footer.routed" data-i18n-attrs="text">routed through the server</span>
+            <span data-i18n-key="footer.webrtc" data-i18n-attrs="text">if WebRTC is not available.</span>
+        </div>
     </div>
     <!-- Footer -->
     <footer class="column">
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div>
-            <span>You are known as:</span>
-            <div id="display-name" placeholder="Loading..." title="Edit your device name permanently" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
-            <svg id="edit-pen" class="icon">
-                <use xlink:href="#edit-pen-icon" />
-            </svg>
-        </div>
-        <div class="font-body2">
-            You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
-            <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
-        </div>
-        <div id="websocket-fallback">
-            <span>Traffic is <span>routed through the server</span> if WebRTC is not available.</span>
+        <div class="column">
+            <div class="known-as-wrapper">
+                <span data-i18n-key="footer.known-as" data-i18n-attrs="text">You are known as:</span>
+                <div id="display-name" class="badge" data-i18n-key="footer.display-name" data-i18n-attrs="data-placeholder title"
+                     placeholder="Loading..." data-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="discovery-wrapper row">
+                <div class="row center">
+                    <span data-i18n-key="footer.discovery" data-i18n-attrs="text">You can be discovered:</span>
+                </div>
+                <div class="row center">
+                    <span class="badge badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title">on this network</span>
+                    <span class="badge badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden>paired devices</span>
+                    <span class="badge badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
+                </div>
+            </div>
         </div>
     </footer>
+    <!-- Language Select Dialog -->
+    <x-dialog id="language-select-dialog">
+        <x-background class="full center">
+            <x-paper shadow="2">
+                <div class="row center">
+                    <h2 class="center" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text">Select Language</h2>
+                </div>
+                <div class="language-buttons">
+                    <button class="button fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text">System Language</button>
+                    <button class="button fw" value="en">English</button>
+                    <button class="button fw" value="de">Deutsch (German)</button>
+                    <button class="button fw" value="nb">Norsk (Norwegian)</button>
+                    <button class="button fw" value="ru">Русский язык (Russian)</button>
+                    <button class="button fw" value="zh-CN">中文 (Chinese)</button>
+                </div>
+                <div class="center row-reverse button-row">
+                    <button class="button" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
+                </div>
+            </x-paper>
+        </x-background>
+    </x-dialog>
     <!-- Pair Device Dialog -->
     <x-dialog id="pair-device-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <h2 class="center">Pair Devices</h2>
-                    <div id="room-key-qr-code" class="center"></div>
-                    <h1 id="room-key" class="center">000 000</h1>
-                    <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
-                    <hr>
-                    <div id="key-input-container">
-                        <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 class="row center">
+                        <h2 class="center" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text">Pair Devices</h2>
                     </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" type="button" close>Cancel</button>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="center key-qr-code"></div>
+                            <h1 class="center key">000 000</h1>
+                            <p class="center text-center key-instructions">
+                                <span class="font-subheading" data-i18n-key="dialogs.input-key-on-this-device" data-i18n-attrs="text">Input this key on another device</span>
+                                <span class="font-subheading" data-i18n-key="dialogs.scan-qr-code" data-i18n-attrs="text">or scan the QR-Code.</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="hr-note">
+                        <hr>
+                        <div>
+                            <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text">OR</span>
+                        </div>
+                    </div>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="input-key-container six-chars">
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-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-char-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="tel" class="textarea center" aria-label="pair-key-char-6" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                            </div>
+                            <p class="font-subheading center text-center" data-i18n-key="dialogs.enter-key-from-another-device" data-i18n-attrs="text">Enter key from another device here.</p>
+                        </div>
+                    </div>
+                    <div class="button-row row-reverse">
+                        <button class="button" type="submit" data-i18n-key="dialogs.pair" data-i18n-attrs="text" disabled>Pair</button>
+                        <button class="button" type="button" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
-    <!-- Clear Devices Dialog -->
-    <x-dialog id="clear-devices-dialog">
+    <!-- Edit Paired Devices Dialog -->
+    <x-dialog id="edit-paired-devices-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <h2 class="center">Unpair Devices</h2>
-                    <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
-                    <div class="center row-reverse">
-                        <button class="button" type="submit">Unpair Devices</button>
-                        <button class="button" type="button" close>Cancel</button>
+                    <div class="row center">
+                        <h2 class="center" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text">Edit Paired Devices</h2>
+                    </div>
+                    <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty" data-empty="No paired devices."></div>
+                    <div class="font-subheading center">
+                        <p>
+                            <span  data-i18n-key="dialogs.auto-accept-instructions-1" data-i18n-attrs="text">
+                                Activate
+                            </span>
+                            <u data-i18n-key="dialogs.auto-accept" data-i18n-attrs="text">auto-accept</u>
+                            <span data-i18n-key="dialogs.auto-accept-instructions-2" data-i18n-attrs="text">
+                                to automatically accept all files sent from that device.
+                            </span>
+                        </p>
+                    </div>
+                    <div class="center row-reverse button-row">
+                        <button class="button" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
+                    </div>
+                </x-paper>
+            </x-background>
+        </form>
+    </x-dialog>
+    <!-- Public Room Dialog -->
+    <x-dialog id="public-room-dialog">
+        <form action="#">
+            <x-background class="full center text-center">
+                <x-paper shadow="2">
+                    <div class="row center">
+                        <div class="column">
+                            <h2 class="center">Temporary Public Room</h2>
+                        </div>
+                    </div>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="center key-qr-code"></div>
+                            <h1 class="center key">IOX9P</h1>
+                            <p class="center text-center key-instructions">
+                                <span class="font-subheading" data-i18n-key="dialogs.input-room-id-on-another-device" data-i18n-attrs="text">Input this room id on another device</span>
+                                <span class="font-subheading" data-i18n-key="dialogs.scan-qr-code" data-i18n-attrs="text">or scan the QR-Code.</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="hr-note">
+                        <hr>
+                        <div>
+                            <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text">OR</span>
+                        </div>
+                    </div>
+                    <div class="row center">
+                        <div class="column">
+                            <div class="input-key-container">
+                                <input type="text" class="textarea center" aria-label="room-id-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                                <input type="text" class="textarea center" aria-label="room-id-char-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                            </div>
+                            <p class="font-subheading center text-center">Enter room id from another device to join.</p>
+                        </div>
+                    </div>
+                    <div class="center row-reverse button-row">
+                        <button class="button" type="submit" disabled>Join</button>
+                        <button class="button" type="button" close>Close</button>
+                        <button class="button leave-room" type="button">Leave</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -164,24 +288,30 @@
     <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center"></h2>
-                <div class="center column file-description">
-                    <div>
-                        <span class="display-name"></span>
-                        <span>would like to share</span>
+                <div class="row center">
+                    <div class="column">
+                        <h2 class="center"></h2>
                     </div>
-                    <div class="row file-name" >
-                        <span class="file-stem"></span>
-                        <span class="file-extension"></span>
+                </div>
+                <div class="row center">
+                    <div class="column center file-description">
+                        <div>
+                            <span class="display-name badge"></span>
+                            <span data-i18n-key="dialogs.would-like-to-share" data-i18n-attrs="text">would like to share</span>
+                        </div>
+                        <div class="row file-name" >
+                            <span class="file-stem"></span>
+                            <span class="file-extension"></span>
+                        </div>
+                        <div class="row file-other">
+                        </div>
+                        <div class="row font-body2 file-size"></div>
                     </div>
-                    <div class="row file-other">
-                    </div>
-                    <div class="row font-body2 file-size"></div>
                 </div>
                 <div class="center file-preview"></div>
-                <div class="center row-reverse">
-                    <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
-                    <button id="decline-request" class="button" title="ESCAPE">Decline</button>
+                <div class="row-reverse center button-row">
+                    <button id="accept-request" class="button" title="ENTER" data-i18n-key="dialogs.accept" data-i18n-attrs="text" autofocus>Accept</button>
+                    <button id="decline-request" class="button" title="ESCAPE" data-i18n-key="dialogs.decline" data-i18n-attrs="text">Decline</button>
                 </div>
             </x-paper>
         </x-background>
@@ -190,24 +320,31 @@
     <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center"></h2>
-                <div class="center column file-description">
-                    <div>
-                        <span class="display-name"></span>
-                        <span>has sent</span>
+                <div class="row center">
+                    <div class="column">
+                        <h2 class="center"></h2>
                     </div>
-                    <div class="row file-name" >
-                        <span class="file-stem"></span>
-                        <span class="file-extension"></span>
+                </div>
+                <div class="row center">
+                    <div class="column center file-description">
+                        <div>
+                            <span class="display-name badge"></span>
+                            <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text">has sent</span>
+                        </div>
+                        <div class="row file-name" >
+                            <span class="file-stem"></span>
+                            <span class="file-extension"></span>
+                        </div>
+                        <div class="row file-other">
+                        </div>
+                        <div class="row font-body2 file-size"></div>
                     </div>
-                    <div class="row file-other"></div>
-                    <div class="row font-body2 file-size"></div>
                 </div>
                 <div class="center file-preview"></div>
-                <div class="center row-reverse">
-                    <button id="share-btn" class="button" autofocus hidden>Share</button>
-                    <button id="download-btn" class="button" autofocus>Download</button>
-                    <button class="button" close>Close</button>
+                <div class="row-reverse center button-row">
+                    <button id="share-btn" class="button" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden>Share</button>
+                    <button id="download-btn" class="button" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus>Download</button>
+                    <button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
                 </div>
             </x-paper>
         </x-background>
@@ -217,16 +354,27 @@
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2 class="text-center">Send Message</h2>
-                    <div class="dialog-subheader text-center">
-                        <span>Send a Message to</span>
-                        <span class="display-name"></span>
+                    <div class="row center">
+                        <div class="column">
+                            <h2 class="center" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text">Send Message</h2>
+                        </div>
                     </div>
-                    <div class="row-separator"></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" type="button" title="ESCAPE" close>Cancel</button>
+                    <div class="row center display-name-wrapper">
+                        <div class="column">
+                            <div class="text-center">
+                                <span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text">Send a Message to</span>
+                                <span class="display-name badge"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="column fw">
+                            <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                        </div>
+                    </div>
+                    <div class="button-row row-reverse">
+                        <button class="button" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.send" data-i18n-attrs="text" disabled>Send</button>
+                        <button class="button" type="button" title="ESCAPE" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -236,16 +384,23 @@
     <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="text-center">Message Received</h2>
-                <div class="text-center dialog-subheader">
-                    <span class="display-name"></span>
-                    <span>has sent:</span>
+                <div class="row center">
+                    <h2 class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text">Message Received</h2>
                 </div>
-                <div class="row-separator"></div>
-                <div id="text"></div>
-                <div class="center row-reverse">
-                    <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
-                    <button id="close" class="button" title="ESCAPE">Close</button>
+                <div class="row center">
+                    <div class="text-center">
+                        <span class="display-name badge"></span>
+                        <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text">has sent:</span>
+                    </div>
+                </div>
+                <div class="row center">
+                    <div class="column fw">
+                        <div id="text" class="textarea fw"></div>
+                    </div>
+                </div>
+                <div class="row-reverse center button-row">
+                    <button id="copy" class="button" title="CTRL/⌘ + C" data-i18n-key="dialogs.copy" data-i18n-attrs="text">Copy</button>
+                    <button id="close" class="button" title="ESCAPE" data-i18n-key="dialogs.close" data-i18n-attrs="text">Close</button>
                 </div>
             </x-paper>
         </x-background>
@@ -254,20 +409,22 @@
     <x-dialog id="base64-paste-dialog">
         <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>
+                <button class="button center" id="base64-paste-btn" title="Paste"></button>
                 <div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
-                <button class="button center" close>Close</button>
+                <div class="row-reverse center button-row">
+                    <button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
+                </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Toast -->
     <div class="toast-container full center">
-        <x-toast id="toast" class="row" shadow="1"></x-toast>
+        <x-toast id="toast" class="row center" shadow="1"></x-toast>
     </div>
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" data-i18n-key="about.close-about" data-i18n-attrs="aria-label" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>
@@ -277,25 +434,28 @@
             <svg class="icon logo">
                 <use xlink:href="#wifi-tethering" />
             </svg>
-            <h1>PairDrop</h1>
-            <div class="font-subheading">The easiest way to transfer files across devices</div>
+            <div class="title-wrapper">
+                <h1>PairDrop</h1>
+                <div class="font-subheading">v1.8.0</div>
+            </div>
+            <div class="font-subheading" data-i18n-key="about.claim" data-i18n-attrs="text">The easiest way to transfer files across devices</div>
             <div class="row">
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer" data-i18n-key="about.github" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#github" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer" data-i18n-key="about.buy-me-a-coffee" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#monetarization" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer" data-i18n-key="about.tweet" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#twitter" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer" data-i18n-key="about.faq" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#help-outline" />
                     </svg>
@@ -304,6 +464,7 @@
         </section>
         <x-background></x-background>
     </x-about>
+    <canvas class="circles"></canvas>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">
@@ -358,16 +519,28 @@
             <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
             <path d="M579.8 267.7c56.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 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.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.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/>
         </symbol>
-        <symbol id="clear-pair-devices-icon" viewBox="0 0 640 512">
-            <!--! 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 id="edit-pair-devices-icon" viewBox="-159 25 640 512">
+            <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <!--! edited by @schlagmichdoch -->
+            <path d="M218,155.4c-56.5-56.5-148-56.5-204.5,0L-98.8,267.7c-56.5,56.5-56.5,148,0,204.5c50,50,128.8,56.5,186.3,15.4l1.6-1.1 c14.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.6c-31.5-31.6-31.5-82.6,0-114.1L58.7,200.6 c31.5-31.5,82.5-31.5,114,0c15.8,15.8,23.8,36.7,23.6,57.6c7.9-8.3,18.9-13,30.6-13c4.5,0,8.9,0.7,13.2,2l17.4,5.5 c0.9-0.5,1.8-1,2.7-1.5C258.7,216.2,244.4,181.8,218,155.4z M420.8,86.6c-50-50-128.8-56.5-186.3-15.4l-1.6,1.1 c-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.6c25.8,25.8,30.5,64.7,14,95.2 c0.7,2,1.3,4,1.8,6.1l3.9,17.9c1.1,0.6,2.1,1.2,3.2,1.8l17.4-5.5c4.3-1.4,8.7-2,13.1-2c7.3,0,14.3,1.8,20.5,5.2 C474.7,196.8,465.1,130.9,420.8,86.6z M140.7,254.4l1.1-1.6c10.3-14.4,6.9-34.4-7.4-44.6s-34.4-6.9-44.6,7.4l-1.1,1.6 C47.5,274.6,54,353.4,104,403.4c18.7,18.7,41.2,31.2,65,37.5c-1.4-3.1-2.6-6.2-3.8-9.3c-6-16.4-1.5-34.6,11.6-46.4l7.2-6.6 c-12.7-3.6-24.7-10.5-34.8-20.5C121.4,330.3,117.8,286.4,140.7,254.4z"/>
+            <path d="M458.9,407.4l-24.3-22.1c0.6-4.7,1-9.4,1-14.2s-0.3-9.6-1-14.2l24.3-22.1c3.9-3.5,5.4-8.9,3.6-13.8v-0.1 c-2.5-6.7-5.4-13.1-8.9-19.2l-2.6-4.5c-3.7-6.2-7.8-12-12.4-17.5c-3.3-4-8.8-5.4-13.7-3.8l-31.2,9.9c-7.5-5.8-15.8-10.6-24.7-14.2 l-7-32c-1.1-5.1-5-9.1-10.2-10c-7.7-1.3-15.7-2-23.8-2s-16.1,0.7-23.8,2c-5.2,0.9-9.1,4.9-10.2,10l-7,32 c-8.9,3.7-17.2,8.5-24.7,14.2l-31.2-9.9c-4.9-1.6-10.4-0.2-13.7,3.8c-4.5,5.5-8.7,11.3-12.4,17.5l-2.6,4.5 c-3.4,6.2-6.4,12.6-8.9,19.2c-1.8,4.9-0.3,10.3,3.6,13.8l24.3,22.1c-0.6,4.7-1,9.4-1,14.2s0.3,9.6,1,14.3L197,407.5 c-3.9,3.5-5.4,8.9-3.6,13.8c2.5,6.7,5.4,13.1,8.9,19.2l2.6,4.5c3.7,6.2,7.8,12,12.4,17.5c3.3,4,8.8,5.4,13.7,3.8l31.2-10 c7.5,5.8,15.8,10.6,24.7,14.2l7,32c1.1,5.1,5,9.1,10.2,10c7.7,1.3,15.7,2,23.8,2c8.1,0,16.1-0.7,23.8-2c5.2-0.8,9.1-4.9,10.2-10 l7-32c8.9-3.6,17.2-8.5,24.7-14.2l31.2,9.9c4.9,1.6,10.4,0.2,13.7-3.8c4.5-5.5,8.7-11.3,12.4-17.5l2.6-4.5 c3.4-6.2,6.4-12.6,8.9-19.2C464.2,416.3,462.7,410.9,458.9,407.4z M328,415.9c-24.8,0-44.9-20.1-44.9-44.8 c0-24.8,20.1-44.8,44.9-44.8s44.8,20.1,44.8,44.8C372.8,395.9,352.7,415.9,328,415.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>
+        <symbol id="public-room-icon" viewBox="0 0 640 512">
+            <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M0 24C0 10.7 10.7 0 24 0H616c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 48 0 37.3 0 24zM0 488c0-13.3 10.7-24 24-24H616c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM83.2 160a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM32 320c0-35.3 28.7-64 64-64h96c12.2 0 23.7 3.4 33.4 9.4c-37.2 15.1-65.6 47.2-75.8 86.6H64c-17.7 0-32-14.3-32-32zm461.6 32c-10.3-40.1-39.6-72.6-77.7-87.4c9.4-5.5 20.4-8.6 32.1-8.6h96c35.3 0 64 28.7 64 64c0 17.7-14.3 32-32 32H493.6zM391.2 290.4c32.1 7.4 58.1 30.9 68.9 61.6c3.5 10 5.5 20.8 5.5 32c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32c0-11.2 1.9-22 5.5-32c10.5-29.7 35.3-52.8 66.1-60.9c7.8-2.1 16-3.1 24.5-3.1h96c7.4 0 14.7 .8 21.6 2.4zm44-130.4a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM321.6 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/>
+        </symbol>
+        <symbol id="icon-language-selector" viewBox="0 0 640 512">
+            <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M0 128C0 92.7 28.7 64 64 64H256h48 16H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H320 304 256 64c-35.3 0-64-28.7-64-64V128zm320 0V384H576V128H320zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276H141l19-42.8zM448 164c11 0 20 9 20 20v4h44 16c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45H448 376c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20z"/>
+        </symbol>
+
     </svg>
     <!-- Scripts -->
+    <script src="scripts/localization.js"></script>
     <script src="scripts/theme.js"></script>
     <script src="scripts/network.js"></script>
     <script src="scripts/ui.js"></script>

public_included_ws_fallback/lang/de.json

@@ -0,0 +1,156 @@
+{
+    "header": {
+        "about_title": "Über PairDrop",
+        "notification_title": "Benachrichtigungen aktivieren",
+        "about_aria-label": "Über PairDrop öffnen",
+        "install_title": "PairDrop installieren",
+        "pair-device_title": "Deine Geräte dauerhaft koppeln",
+        "edit-paired-devices_title": "Gekoppelte Geräte bearbeiten",
+        "theme-auto_title": "Systemstil verwenden",
+        "theme-dark_title": "Dunklen Stil verwenden",
+        "theme-light_title": "Hellen Stil verwenden",
+        "cancel-paste-mode": "Fertig",
+        "language-selector_title": "Sprache auswählen",
+        "join-public-room_title": "Öffentlichen Raum temporär betreten"
+    },
+    "dialogs": {
+        "share": "Teilen",
+        "download": "Herunterladen",
+        "pair-devices-title": "Geräte dauerhaft koppeln",
+        "input-key-on-this-device": "Gib diesen Schlüssel auf einem anderen Gerät ein",
+        "enter-key-from-another-device": "Gib den Schlüssel von einem anderen Gerät hier ein.",
+        "pair": "Koppeln",
+        "cancel": "Abbrechen",
+        "edit-paired-devices-title": "Gekoppelte Geräte bearbeiten",
+        "paired-devices-wrapper_data-empty": "Keine gekoppelten Geräte.",
+        "close": "Schließen",
+        "accept": "Akzeptieren",
+        "decline": "Ablehnen",
+        "title-image": "Bild",
+        "title-file": "Datei",
+        "title-image-plural": "Bilder",
+        "title-file-plural": "Dateien",
+        "scan-qr-code": "oder scanne den QR-Code.",
+        "would-like-to-share": "möchte Folgendes teilen",
+        "send": "Senden",
+        "copy": "Kopieren",
+        "receive-text-title": "Textnachricht erhalten",
+        "file-other-description-image-plural": "und {{count}} andere Bilder",
+        "file-other-description-file-plural": "und {{count}} andere Dateien",
+        "auto-accept-instructions-1": "Aktiviere",
+        "auto-accept": "auto-accept",
+        "auto-accept-instructions-2": "um automatisch alle Dateien von diesem Gerät zu akzeptieren.",
+        "has-sent": "hat Folgendes gesendet:",
+        "send-message-title": "Textnachricht senden",
+        "send-message-to": "Sende eine Textnachricht an",
+        "base64-tap-to-paste": "Hier tippen, um {{type}} einzufügen",
+        "base64-paste-to-send": "Hier einfügen, um {{type}} zu versenden",
+        "base64-text": "Text",
+        "base64-files": "Dateien",
+        "base64-processing": "Bearbeitung läuft…",
+        "file-other-description-image": "und ein anderes Bild",
+        "file-other-description-file": "und eine andere Datei",
+        "receive-title": "{{descriptor}} erhalten",
+        "download-again": "Erneut herunterladen",
+        "system-language": "Systemsprache",
+        "language-selector-title": "Sprache auswählen",
+        "hr-or": "ODER",
+        "input-room-id-on-another-device": "Gib diese Raum ID auf einem anderen Gerät ein",
+        "unpair": "Entkoppeln"
+    },
+    "about": {
+        "tweet_title": "Über PairDrop twittern",
+        "faq_title": "Häufig gestellte Fragen",
+        "close-about_aria-label": "Schließe Über PairDrop",
+        "github_title": "PairDrop auf GitHub",
+        "buy-me-a-coffee_title": "Kauf mir einen Kaffee!",
+        "claim": "Der einfachste Weg Dateien zwischen Geräten zu teilen"
+    },
+    "footer": {
+        "known-as": "Du wirst angezeigt als:",
+        "display-name_title": "Setze einen permanenten Gerätenamen",
+        "on-this-network": "in diesem Netzwerk",
+        "paired-devices": "für gekoppelte Geräte",
+        "traffic": "Datenverkehr wird",
+        "display-name_placeholder": "Lade…",
+        "routed": "durch den Server geleitet",
+        "webrtc": "wenn WebRTC nicht verfügbar ist.",
+        "display-name_data-placeholder": "Lade…",
+        "public-room-devices_title": "Du kannst von Geräten in diesem öffentlichen Raum unabhängig von deinem Netzwerk gefunden werden.",
+        "paired-devices_title": "Du kannst immer von gekoppelten Geräten gefunden werden, egal in welchem Netzwerk.",
+        "public-room-devices": "in Raum {{roomId}}",
+        "discovery": "Du bist sichtbar:",
+        "on-this-network_title": "Du kannst von jedem in diesem Netzwerk gefunden werden."
+    },
+    "notifications": {
+        "link-received": "Link von {{name}} empfangen - Klicke um ihn zu öffnen",
+        "message-received": "Nachricht von {{name}} empfangen - Klicke um sie zu kopieren",
+        "click-to-download": "Klicken zum Download",
+        "copied-text": "Text in die Zwischenablage kopiert",
+        "connected": "Verbunden.",
+        "pairing-success": "Geräte gekoppelt.",
+        "display-name-random-again": "Anzeigename wird ab jetzt wieder zufällig generiert.",
+        "pairing-tabs-error": "Es können keine zwei Webbrowser Tabs gekoppelt werden.",
+        "pairing-not-persistent": "Gekoppelte Geräte sind nicht persistent.",
+        "pairing-key-invalid": "Ungültiger Schlüssel",
+        "pairing-key-invalidated": "Schlüssel {{key}} wurde ungültig gemacht.",
+        "copied-to-clipboard": "In die Zwischenablage kopiert",
+        "text-content-incorrect": "Textinhalt ist fehlerhaft.",
+        "clipboard-content-incorrect": "Inhalt der Zwischenablage ist fehlerhaft.",
+        "copied-text-error": "Konnte nicht in die Zwischenablage schreiben. Kopiere manuell!",
+        "file-content-incorrect": "Dateiinhalt ist fehlerhaft.",
+        "notifications-enabled": "Benachrichtigungen aktiviert.",
+        "offline": "Du bist offline",
+        "online": "Du bist wieder Online",
+        "unfinished-transfers-warning": "Es wurden noch nicht alle Übertragungen fertiggestellt. Möchtest du PairDrop wirklich schließen?",
+        "display-name-changed-permanently": "Anzeigename wurde dauerhaft geändert.",
+        "download-successful": "{{descriptor}} heruntergeladen",
+        "pairing-cleared": "Alle Geräte entkoppelt.",
+        "click-to-show": "Klicken zum Anzeigen",
+        "online-requirement": "Du musst online sein um Geräte zu koppeln.",
+        "display-name-changed-temporarily": "Anzeigename wurde nur für diese Sitzung geändert.",
+        "request-title": "{{name}} möchte {{count}}{{descriptor}} übertragen",
+        "connecting": "Verbindung wird aufgebaut…",
+        "files-incorrect": "Dateien sind fehlerhaft.",
+        "file-transfer-completed": "Dateiübertragung fertiggestellt.",
+        "message-transfer-completed": "Nachrichtenübertragung fertiggestellt.",
+        "rate-limit-join-key": "Rate Limit erreicht. Warte 10 Sekunden und versuche es erneut.",
+        "selected-peer-left": "Ausgewählter Peer ist gegangen.",
+        "ios-memory-limit": "Für Übertragungen an iOS Geräte beträgt die maximale Dateigröße 200 MB",
+        "public-room-left": "Öffentlichen Raum {{publicRoomId}} verlassen",
+        "copied-to-clipboard-error": "Konnte nicht kopieren. Kopiere manuell.",
+        "public-room-id-invalid": "Ungültige Raum ID",
+        "online-requirement-pairing": "Du musst online sein, um Geräte zu koppeln.",
+        "online-requirement-public-room": "Du musst online sein, um öffentliche Räume erstellen zu können."
+    },
+    "instructions": {
+        "x-instructions_desktop": "Klicke, um Dateien zu Senden oder klicke mit der rechten Maustaste, um Textnachrichten zu senden",
+        "no-peers-title": "Öffne PairDrop auf anderen Geräten, um Dateien zu senden",
+        "no-peers_data-drop-bg": "Hier ablegen, um Empfänger auszuwählen",
+        "no-peers-subtitle": "Kopple Geräte oder besuche einen öffentlichen Raum, damit du in anderen Netzwerken sichtbar bist",
+        "click-to-send": "Klicke zum Senden von",
+        "tap-to-send": "Tippe zum Senden von",
+        "x-instructions_data-drop-peer": "Hier ablegen, um an Peer zu senden",
+        "x-instructions_data-drop-bg": "Loslassen um Empfänger auszuwählen",
+        "x-instructions_mobile": "Tippe zum Senden von Dateien oder tippe lange zum Senden von Nachrichten",
+        "activate-paste-mode-base": "Öffne PairDrop auf anderen Geräten zum Senden von",
+        "activate-paste-mode-and-other-files": "und {{count}} anderen Dateien",
+        "activate-paste-mode-shared-text": "freigegebenem Text"
+    },
+    "document-titles": {
+        "file-transfer-requested": "Datenübertagung angefordert",
+        "file-received": "Datei erhalten",
+        "file-received-plural": "{{count}} Dateien erhalten",
+        "message-received": "Nachricht erhalten",
+        "message-received-plural": "{{count}} Nachrichten erhalten"
+    },
+    "peer-ui": {
+        "click-to-send": "Klicke um Dateien zu senden oder nutze einen Rechtsklick um eine Textnachricht zu senden",
+        "connection-hash": "Um die Ende-zu-Ende Verschlüsselung zu verifizieren, vergleiche die Sicherheitsnummer auf beiden Geräten",
+        "waiting": "Warte…",
+        "click-to-send-paste-mode": "Klicken um {{descriptor}} zu senden",
+        "transferring": "Übertragung läuft…",
+        "processing": "Bearbeitung läuft…",
+        "preparing": "Vorbereitung läuft…"
+    }
+}

public_included_ws_fallback/lang/en.json

@@ -0,0 +1,154 @@
+{
+    "header": {
+        "about_title": "About PairDrop",
+        "language-selector_title": "Select Language",
+        "about_aria-label": "Open About PairDrop",
+        "theme-auto_title": "Adapt Theme to System",
+        "theme-light_title": "Always Use Light-Theme",
+        "theme-dark_title": "Always Use Dark-Theme",
+        "notification_title": "Enable Notifications",
+        "install_title": "Install PairDrop",
+        "pair-device_title": "Pair Your Devices Permanently",
+        "edit-paired-devices_title": "Edit Paired Devices",
+        "join-public-room_title": "Join Public Room Temporarily",
+        "cancel-paste-mode": "Done"
+    },
+    "instructions": {
+        "no-peers_data-drop-bg": "Release to select recipient",
+        "no-peers-title": "Open PairDrop on other devices to send files",
+        "no-peers-subtitle": "Pair devices or enter a public room to be discoverable on other networks",
+        "x-instructions_desktop": "Click to send files or right click to send a message",
+        "x-instructions_mobile": "Tap to send files or long tap to send a message",
+        "x-instructions_data-drop-peer": "Release to send to peer",
+        "x-instructions_data-drop-bg": "Release to select recipient",
+        "click-to-send": "Click to send",
+        "tap-to-send": "Tap to send",
+        "activate-paste-mode-base": "Open PairDrop on other devices to send",
+        "activate-paste-mode-and-other-files": "and {{count}} other files",
+        "activate-paste-mode-shared-text": "shared text"
+    },
+    "footer": {
+        "known-as": "You are known as:",
+        "display-name_data-placeholder": "Loading…",
+        "display-name_title": "Edit your device name permanently",
+        "discovery": "You can be discovered:",
+        "on-this-network": "on this network",
+        "on-this-network_title": "You can be discovered by everyone on this network.",
+        "paired-devices": "by paired devices",
+        "paired-devices_title": "You can be discovered by paired devices at all times independent of the network.",
+        "public-room-devices": "in room {{roomId}}",
+        "public-room-devices_title": "You can be discovered by devices in this public room independent of the network.",
+        "traffic": "Traffic is",
+        "routed": "routed through the server",
+        "webrtc": "if WebRTC is not available."
+    },
+    "dialogs": {
+        "pair-devices-title": "Pair Devices Permanently",
+        "input-key-on-this-device": "Input this key on another device",
+        "scan-qr-code": "or scan the QR-code.",
+        "enter-key-from-another-device": "Enter key from another device here.",
+        "input-room-id-on-another-device": "Input this room id on another device",
+        "hr-or": "OR",
+        "pair": "Pair",
+        "cancel": "Cancel",
+        "edit-paired-devices-title": "Edit Paired Devices",
+        "unpair": "Unpair",
+        "paired-devices-wrapper_data-empty": "No paired devices.",
+        "auto-accept-instructions-1": "Activate",
+        "auto-accept": "auto-accept",
+        "auto-accept-instructions-2": "to automatically accept all files sent from that device.",
+        "close": "Close",
+        "would-like-to-share": "would like to share",
+        "accept": "Accept",
+        "decline": "Decline",
+        "has-sent": "has sent:",
+        "share": "Share",
+        "download": "Download",
+        "send-message-title": "Send Message",
+        "send-message-to": "Send a Message to",
+        "send": "Send",
+        "receive-text-title": "Message Received",
+        "copy": "Copy",
+        "base64-processing": "Processing…",
+        "base64-tap-to-paste": "Tap here to paste {{type}}",
+        "base64-paste-to-send": "Paste here to send {{type}}",
+        "base64-text": "text",
+        "base64-files": "files",
+        "file-other-description-image": "and 1 other image",
+        "file-other-description-file": "and 1 other file",
+        "file-other-description-image-plural": "and {{count}} other images",
+        "file-other-description-file-plural": "and {{count}} other files",
+        "title-image": "Image",
+        "title-file": "File",
+        "title-image-plural": "Images",
+        "title-file-plural": "Files",
+        "receive-title": "{{descriptor}} Received",
+        "download-again": "Download again",
+        "language-selector-title": "Select Language",
+        "system-language": "System Language"
+    },
+    "about": {
+        "close-about_aria-label": "Close About PairDrop",
+        "claim": "The easiest way to transfer files across devices",
+        "github_title": "PairDrop on GitHub",
+        "buy-me-a-coffee_title": "Buy me a coffee!",
+        "tweet_title": "Tweet about PairDrop",
+        "faq_title": "Frequently asked questions"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "Display name is changed permanently.",
+        "display-name-changed-temporarily": "Display name is changed only for this session.",
+        "display-name-random-again": "Display name is randomly generated again.",
+        "download-successful": "{{descriptor}} downloaded",
+        "pairing-tabs-error": "Pairing two web browser tabs is impossible.",
+        "pairing-success": "Devices paired.",
+        "pairing-not-persistent": "Paired devices are not persistent.",
+        "pairing-key-invalid": "Invalid key",
+        "pairing-key-invalidated": "Key {{key}} invalidated.",
+        "pairing-cleared": "All Devices unpaired.",
+        "public-room-id-invalid": "Invalid room id",
+        "public-room-left": "Left public room {{publicRoomId}}",
+        "copied-to-clipboard": "Copied to clipboard",
+        "copied-to-clipboard-error": "Copying not possible. Copy manually.",
+        "text-content-incorrect": "Text content is incorrect.",
+        "file-content-incorrect": "File content is incorrect.",
+        "clipboard-content-incorrect": "Clipboard content is incorrect.",
+        "notifications-enabled": "Notifications enabled.",
+        "link-received": "Link received by {{name}} - Click to open",
+        "message-received": "Message received by {{name}} - Click to copy",
+        "click-to-download": "Click to download",
+        "request-title": "{{name}} would like to transfer {{count}} {{descriptor}}",
+        "click-to-show": "Click to show",
+        "copied-text": "Copied text to clipboard",
+        "copied-text-error": "Writing to clipboard failed. Copy manually!",
+        "offline": "You are offline",
+        "online": "You are back online",
+        "connected": "Connected.",
+        "online-requirement-pairing": "You need to be online to pair devices.",
+        "online-requirement-public-room": "You need to be online to create a public room.",
+        "connecting": "Connecting…",
+        "files-incorrect": "Files are incorrect.",
+        "file-transfer-completed": "File transfer completed.",
+        "ios-memory-limit": "Sending files to iOS is only possible up to 200 MB at once",
+        "message-transfer-completed": "Message transfer completed.",
+        "unfinished-transfers-warning": "There are unfinished transfers. Are you sure you want to close PairDrop?",
+        "rate-limit-join-key": "Rate limit reached. Wait 10 seconds and try again.",
+        "selected-peer-left": "Selected peer left."
+    },
+    "document-titles": {
+        "file-received": "File Received",
+        "file-received-plural": "{{count}} Files Received",
+        "file-transfer-requested": "File Transfer Requested",
+        "message-received": "Message Received",
+        "message-received-plural": "{{count}} Messages Received"
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "Click to send {{descriptor}}",
+        "click-to-send": "Click to send files or right click to send a message",
+        "connection-hash": "To verify the security of the end-to-end encryption, compare this security number on both devices",
+        "preparing": "Preparing…",
+        "waiting": "Waiting…",
+        "processing": "Processing…",
+        "transferring": "Transferring…"
+    }
+}

public_included_ws_fallback/lang/nb.json

@@ -0,0 +1,138 @@
+{
+    "header": {
+        "edit-paired-devices_title": "Rediger sammenkoblede enheter",
+        "about_title": "Om PairDrop",
+        "about_aria-label": "Åpne «Om PairDrop»",
+        "theme-auto_title": "Juster drakt til system",
+        "theme-light_title": "Alltid bruk lys drakt",
+        "theme-dark_title": "Alltid bruk mørk drakt",
+        "notification_title": "Skru på merknader",
+        "cancel-paste-mode": "Ferdig",
+        "install_title": "Installer PairDrop",
+        "pair-device_title": "Sammenkoble enhet"
+    },
+    "footer": {
+        "webrtc": "hvis WebRTC ikke er tilgjengelig.",
+        "display-name_data-placeholder": "Laster inn…",
+        "display-name_title": "Rediger det vedvarende enhetsnavnet ditt",
+        "traffic": "Trafikken",
+        "on-this-network": "på dette nettverket",
+        "known-as": "Du er kjent som:",
+        "paired-devices": "sammenkoblede enheter",
+        "routed": "Sendes gjennom tjeneren"
+    },
+    "instructions": {
+        "x-instructions_desktop": "Klikk for å sende filer, eller høyreklikk for å sende en melding",
+        "x-instructions_mobile": "Trykk for å sende filer, eller lang-trykk for å sende en melding",
+        "x-instructions_data-drop-bg": "Slipp for å velge mottager",
+        "click-to-send": "Klikk for å sende",
+        "no-peers_data-drop-bg": "Slipp for å velge mottager",
+        "no-peers-title": "Åpne PairDrop på andre enheter for å sende filer",
+        "no-peers-subtitle": "Sammenkoble enheter for å kunne oppdages på andre nettverk",
+        "x-instructions_data-drop-peer": "Slipp for å sende til likemann",
+        "tap-to-send": "Trykk for å sende",
+        "activate-paste-mode-base": "Åpne PairDrop på andre enheter for å sende",
+        "activate-paste-mode-and-other-files": "og {{count}} andre filer",
+        "activate-paste-mode-shared-text": "delt tekst"
+    },
+    "dialogs": {
+        "input-key-on-this-device": "Skriv inn denne nøkkelen på en annen enhet",
+        "pair-devices-title": "Sammenkoble enheter",
+        "would-like-to-share": "ønsker å dele",
+        "auto-accept-instructions-2": "for å godkjenne alle filer sendt fra den enheten automatisk.",
+        "paired-devices-wrapper_data-empty": "Ingen sammenkoblede enheter",
+        "enter-key-from-another-device": "Skriv inn nøkkel fra en annen enhet for å fortsette.",
+        "edit-paired-devices-title": "Rediger sammenkoblede enheter",
+        "accept": "Godta",
+        "has-sent": "har sendt:",
+        "base64-paste-to-send": "Trykk her for å sende {{type}}",
+        "base64-text": "tekst",
+        "base64-files": "filer",
+        "file-other-description-image-plural": "og {{count}} andre bilder",
+        "receive-title": "{{descriptor}} mottatt",
+        "send-message-title": "Send melding",
+        "base64-processing": "Behandler…",
+        "close": "Lukk",
+        "decline": "Avslå",
+        "download": "Last ned",
+        "copy": "Kopier",
+        "pair": "Sammenkoble",
+        "cancel": "Avbryt",
+        "scan-qr-code": "eller skann QR-koden.",
+        "auto-accept-instructions-1": "Aktiver",
+        "receive-text-title": "Melding mottatt",
+        "auto-accept": "auto-godkjenn",
+        "share": "Del",
+        "send-message-to": "Send en melding til",
+        "send": "Send",
+        "base64-tap-to-paste": "Trykk her for å lime inn {{type}}",
+        "file-other-description-image": "og ett annet bilde",
+        "file-other-description-file-plural": "og {{count}} andre filer",
+        "title-file-plural": "Filer",
+        "download-again": "Last ned igjen",
+        "file-other-description-file": "og én annen fil",
+        "title-image": "Bilde",
+        "title-file": "Fil",
+        "title-image-plural": "Bilder"
+    },
+    "about": {
+        "close-about_aria-label": "Lukk «Om PairDrop»",
+        "faq_title": "Ofte stilte spørsmål",
+        "claim": "Den enkleste måten å overføre filer mellom enheter",
+        "buy-me-a-coffee_title": "Spander drikke.",
+        "tweet_title": "Tvitre om PairDrop",
+        "github_title": "PairDrop på GitHub"
+    },
+    "notifications": {
+        "copied-to-clipboard": "Kopiert til utklippstavlen",
+        "pairing-tabs-error": "Sammenkobling av to nettleserfaner er ikke mulig.",
+        "notifications-enabled": "Merknader påskrudd.",
+        "click-to-show": "Klikk for å vise",
+        "copied-text": "Tekst kopiert til utklippstavlen",
+        "connected": "Tilkoblet.",
+        "online": "Du er tilbake på nett",
+        "file-transfer-completed": "Filoverføring utført.",
+        "selected-peer-left": "Valgt likemann dro.",
+        "pairing-key-invalid": "Ugyldig nøkkel",
+        "connecting": "Kobler til …",
+        "pairing-not-persistent": "Sammenkoblede enheter er ikke vedvarende.",
+        "offline": "Du er frakoblet",
+        "online-requirement": "Du må være på nett for å koble sammen enheter.",
+        "display-name-random-again": "Visningsnavnet er tilfeldig generert igjen.",
+        "display-name-changed-permanently": "Visningsnavnet er endret for godt.",
+        "display-name-changed-temporarily": "Visningsnavnet er endret kun for denne økten.",
+        "text-content-incorrect": "Tekstinnholdet er uriktig.",
+        "file-content-incorrect": "Filinnholdet er uriktig.",
+        "click-to-download": "Klikk for å laste ned",
+        "message-transfer-completed": "Meldingsoverføring utført.",
+        "download-successful": "{{descriptor}} nedlastet",
+        "pairing-success": "Enheter sammenkoblet.",
+        "pairing-cleared": "Sammenkobling av alle enheter opphevet.",
+        "pairing-key-invalidated": "Nøkkel {{key}} ugyldiggjort.",
+        "copied-text-error": "Kunne ikke legge innhold i utklkippstavlen. Kopier manuelt!",
+        "clipboard-content-incorrect": "Utklippstavleinnholdet er uriktig.",
+        "link-received": "Lenke mottatt av {{name}} - Klikk for å åpne.",
+        "request-title": "{{name}} ønsker å overføre {{count}} {{descriptor}}",
+        "message-received": "Melding mottatt av {{name}} - Klikk for å åpne.",
+        "files-incorrect": "Filene er uriktige.",
+        "ios-memory-limit": "Forsendelse av filer til iOS er kun mulig opptil 200 MB av gangen.",
+        "unfinished-transfers-warning": "Lukk med ufullførte overføringer?",
+        "rate-limit-join-key": "Forsøksgrense overskredet. Vent 10 sek. og prøv igjen."
+    },
+    "document-titles": {
+        "file-received": "Fil mottatt",
+        "file-received-plural": "{{count}} filer mottatt",
+        "message-received": "Melding mottatt",
+        "file-transfer-requested": "Filoverføring forespurt",
+        "message-received-plural": "{{count}} meldinger mottatt"
+    },
+    "peer-ui": {
+        "preparing": "Forbereder …",
+        "waiting": "Venter…",
+        "processing": "Behandler …",
+        "transferring": "Overfører …",
+        "click-to-send": "Klikk for å sende filer, eller høyreklikk for å sende en melding",
+        "click-to-send-paste-mode": "Klikk for å sende {{descriptor}}",
+        "connection-hash": "Sammenlign dette sikkerhetsnummeret på begge enhetene for å bekrefte ende-til-ende -krypteringen."
+    }
+}

public_included_ws_fallback/lang/ru.json

@@ -0,0 +1,156 @@
+{
+    "header": {
+        "about_aria-label": "Открыть страницу \"О сервисе\"",
+        "pair-device_title": "Связать ваши устройства навсегда",
+        "install_title": "Установить PairDrop",
+        "cancel-paste-mode": "Выполнено",
+        "edit-paired-devices_title": "Редактировать сопряженные устройства",
+        "notification_title": "Включить уведомления",
+        "about_title": "О сервисе",
+        "theme-auto_title": "Адаптировать тему к системной",
+        "theme-dark_title": "Всегда использовать темную тему",
+        "theme-light_title": "Всегда использовать светлую тему",
+        "join-public-room_title": "Войти на время в публичную комнату",
+        "language-selector_title": "Выбрать язык"
+    },
+    "instructions": {
+        "x-instructions_desktop": "Нажмите, чтобы отправить файлы, или щелкните правой кнопкой мыши, чтобы отправить сообщение",
+        "no-peers_data-drop-bg": "Отпустите, чтобы выбрать получателя",
+        "click-to-send": "Нажмите, чтобы отправить",
+        "x-instructions_data-drop-bg": "Отпустите, чтобы выбрать получателя",
+        "tap-to-send": "Прикоснитесь, чтобы отправить",
+        "x-instructions_data-drop-peer": "Отпустите, чтобы послать узлу",
+        "x-instructions_mobile": "Прикоснитесь коротко, чтобы отправить файлы, или долго, чтобы отправить сообщение",
+        "no-peers-title": "Откройте PairDrop на других устройствах, чтобы отправить файлы",
+        "no-peers-subtitle": "Сопрягите устройства или войдите в публичную комнату, чтобы вас могли обнаружить из других сетей",
+        "activate-paste-mode-and-other-files": "и {{count}} других файлов",
+        "activate-paste-mode-base": "Откройте PairDrop на других устройствах, чтобы отправить",
+        "activate-paste-mode-shared-text": "общий текст"
+    },
+    "footer": {
+        "display-name_data-placeholder": "Загрузка…",
+        "routed": "направляется через сервер",
+        "webrtc": ", если WebRTC недоступен.",
+        "traffic": "Трафик",
+        "paired-devices": "сопряженными устройствами",
+        "known-as": "Вы известны под именем:",
+        "on-this-network": "в этой сети",
+        "display-name_title": "Изменить имя вашего устройства навсегда",
+        "public-room-devices_title": "Вы можете быть обнаружены устройствами в этой публичной комнате вне зависимости от сети.",
+        "paired-devices_title": "Вы можете быть обнаружены сопряженными устройствами в любое время вне зависимости от сети.",
+        "public-room-devices": "в комнате {{roomId}}",
+        "discovery": "Вы можете быть обнаружены:",
+        "on-this-network_title": "Вы можете быть обнаружены кем угодно в этой сети."
+    },
+    "dialogs": {
+        "edit-paired-devices-title": "Редактировать сопряженные устройства",
+        "auto-accept": "автоприем",
+        "close": "Закрыть",
+        "decline": "Отклонить",
+        "share": "Поделиться",
+        "would-like-to-share": "хотел бы поделиться",
+        "has-sent": "отправил:",
+        "paired-devices-wrapper_data-empty": "Нет сопряженных устройств.",
+        "download": "Скачать",
+        "receive-text-title": "Сообщение получено",
+        "send": "Отправить",
+        "send-message-to": "Отправить сообщение",
+        "send-message-title": "Отправить сообщение",
+        "copy": "Копировать",
+        "base64-files": "файлы",
+        "base64-paste-to-send": "Вставьте здесь, чтобы отправить {{type}}",
+        "base64-processing": "Обработка…",
+        "base64-tap-to-paste": "Прикоснитесь здесь, чтобы вставить {{type}}",
+        "base64-text": "текст",
+        "title-file": "Файл",
+        "title-file-plural": "Файлы",
+        "title-image": "Изображение",
+        "title-image-plural": "Изображения",
+        "download-again": "Скачать еще раз",
+        "auto-accept-instructions-2": ", чтобы автоматически принимать все файлы, отправленные с того устройства.",
+        "enter-key-from-another-device": "Введите сюда ключ с другого устройства.",
+        "pair-devices-title": "Сопрягите устройства навсегда",
+        "input-key-on-this-device": "Введите этот ключ на другом устройстве",
+        "scan-qr-code": "или отсканируйте QR-код.",
+        "cancel": "Отменить",
+        "pair": "Подключить",
+        "accept": "Принять",
+        "auto-accept-instructions-1": "Активировать",
+        "file-other-description-file": "и 1 другой файл",
+        "file-other-description-image-plural": "и {{count}} других изображений",
+        "file-other-description-image": "и 1 другое изображение",
+        "file-other-description-file-plural": "и {{count}} других файлов",
+        "receive-title": "{{descriptor}} получен",
+        "system-language": "Язык системы",
+        "unpair": "Разорвать сопряжение",
+        "language-selector-title": "Выберите язык",
+        "hr-or": "ИЛИ",
+        "input-room-id-on-another-device": "Введите этот ID комнаты на другом устройстве"
+    },
+    "about": {
+        "close-about-aria-label": "Закрыть страницу \"О сервисе\"",
+        "claim": "Самый простой способ передачи файлов между устройствами",
+        "close-about_aria-label": "Закрыть страницу \"О сервисе\"",
+        "buy-me-a-coffee_title": "Купить мне кофе!",
+        "github_title": "PairDrop на GitHub",
+        "tweet_title": "Твит о PairDrop",
+        "faq_title": "Часто задаваемые вопросы"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "Отображаемое имя было изменено навсегда.",
+        "display-name-random-again": "Отображаемое имя сгенерировалось случайным образом снова.",
+        "pairing-success": "Устройства сопряжены.",
+        "pairing-tabs-error": "Сопряжение двух вкладок браузера невозможно.",
+        "copied-to-clipboard": "Скопировано в буфер обмена",
+        "pairing-not-persistent": "Сопряженные устройства непостоянны.",
+        "link-received": "Получена ссылка от {{name}} - нажмите, чтобы открыть",
+        "notifications-enabled": "Уведомления включены.",
+        "text-content-incorrect": "Содержание текста неверно.",
+        "message-received": "Получено сообщение от {{name}} - нажмите, чтобы скопировать",
+        "connected": "Подключено.",
+        "copied-text": "Текст скопирован в буфер обмена",
+        "online": "Вы снова в сети",
+        "offline": "Вы находитесь вне сети",
+        "online-requirement": "Для сопряжения устройств вам нужно быть в сети.",
+        "files-incorrect": "Файлы неверны.",
+        "message-transfer-completed": "Передача сообщения завершена.",
+        "ios-memory-limit": "Отправка файлов на iOS устройства возможна только до 200 МБ за один раз",
+        "selected-peer-left": "Выбранный узел вышел.",
+        "request-title": "{{name}} хотел бы передать {{count}} {{descriptor}}",
+        "rate-limit-join-key": "Достигнут предел скорости. Подождите 10 секунд и повторите попытку.",
+        "unfinished-transfers-warning": "Есть незавершенные передачи. Вы уверены, что хотите закрыть PairDrop?",
+        "copied-text-error": "Запись в буфер обмена не удалась. Скопируйте вручную!",
+        "pairing-cleared": "Все устройства не сопряжены.",
+        "pairing-key-invalid": "Неверный ключ",
+        "pairing-key-invalidated": "Ключ {{key}} признан недействительным.",
+        "click-to-download": "Нажмите, чтобы скачать",
+        "clipboard-content-incorrect": "Содержание буфера обмена неверно.",
+        "click-to-show": "Нажмите, чтобы показать",
+        "connecting": "Подключение…",
+        "download-successful": "{{descriptor}} загружен",
+        "display-name-changed-temporarily": "Отображаемое имя было изменено только для этой сессии.",
+        "file-content-incorrect": "Содержимое файла неверно.",
+        "file-transfer-completed": "Передача файла завершена.",
+        "public-room-left": "Покинуть публичную комнату {{publicRoomId}}",
+        "copied-to-clipboard-error": "Копирование невозможно. Скопируйте вручную.",
+        "public-room-id-invalid": "Неверный ID комнаты",
+        "online-requirement-pairing": "Для сопряжения устройств необходимо находиться быть онлайн.",
+        "online-requirement-public-room": "Для создания публичной комнаты необходимо быть онлайн."
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "Нажмите, чтобы отправить {{descriptor}}",
+        "preparing": "Подготовка…",
+        "transferring": "Передача…",
+        "processing": "Обработка…",
+        "waiting": "Ожидание…",
+        "connection-hash": "Чтобы проверить безопасность сквозного шифрования, сравните этот номер безопасности на обоих устройствах",
+        "click-to-send": "Нажмите, чтобы отправить файлы, или щелкните правой кнопкой мыши, чтобы отправить сообщение"
+    },
+    "document-titles": {
+        "file-received-plural": "{{count}} файлов получено",
+        "message-received-plural": "{{count}} сообщений получено",
+        "file-received": "Файл получен",
+        "file-transfer-requested": "Запрошена передача файлов",
+        "message-received": "Сообщение получено"
+    }
+}

public_included_ws_fallback/lang/tr.json

@@ -0,0 +1,25 @@
+{
+    "header": {
+        "about_title": "PairDrop Hakkında",
+        "about_aria-label": "PairDrop Hakkında Aç",
+        "theme-auto_title": "Temayı Sisteme Uyarla",
+        "theme-light_title": "Daima Açık Tema Kullan",
+        "theme-dark_title": "Daima Koyu Tema Kullan",
+        "notification_title": "Bildirimleri Etkinleştir",
+        "install_title": "PairDrop'u Yükle",
+        "pair-device_title": "Cihaz Eşleştir",
+        "edit-paired-devices_title": "Eşleştirilmiş Cihazları Düzenle",
+        "cancel-paste-mode": "Bitti"
+    },
+    "instructions": {
+        "no-peers_data-drop-bg": "Alıcıyı seçmek için bırakın"
+    },
+    "footer": {
+        "display-name_data-placeholder": "Yükleniyor…",
+        "display-name_title": "Cihazının adını kalıcı olarak düzenle"
+    },
+    "dialogs": {
+        "cancel": "İptal",
+        "edit-paired-devices-title": "Eşleştirilmiş Cihazları Düzenle"
+    }
+}

public_included_ws_fallback/lang/zh-CN.json

@@ -0,0 +1,155 @@
+{
+    "header": {
+        "about_title": "关于 PairDrop",
+        "about_aria-label": "打开 关于 PairDrop",
+        "theme-light_title": "总是使用明亮主题",
+        "install_title": "安装 PairDrop",
+        "pair-device_title": "长久配对您的设备",
+        "theme-auto_title": "主题适应系统",
+        "theme-dark_title": "总是使用暗黑主题",
+        "notification_title": "开启通知",
+        "edit-paired-devices_title": "管理已配对设备",
+        "cancel-paste-mode": "完成",
+        "join-public-room_title": "暂时加入公共房间",
+        "language-selector_title": "选择语言"
+    },
+    "instructions": {
+        "x-instructions_data-drop-peer": "释放以发送到此设备",
+        "no-peers_data-drop-bg": "释放来选择接收者",
+        "no-peers-subtitle": "配对新设备 或 加入一个公共房间 使在其他网络上可见",
+        "no-peers-title": "在其他设备上打开 PairDrop 来发送文件",
+        "x-instructions_desktop": "点击以发送文件 或 右键来发送信息",
+        "x-instructions_mobile": "轻触以发送文件 或 长按来发送信息",
+        "x-instructions_data-drop-bg": "释放来选择接收者",
+        "click-to-send": "点击发送",
+        "tap-to-send": "轻触发送",
+        "activate-paste-mode-base": "在其他设备上打开 PairDrop 来发送",
+        "activate-paste-mode-and-other-files": "和 {{count}} 个其他的文件",
+        "activate-paste-mode-shared-text": "分享文本"
+    },
+    "footer": {
+        "routed": "途径服务器",
+        "webrtc": "如果 WebRTC 不可用。",
+        "known-as": "你的名字是:",
+        "display-name_data-placeholder": "加载中…",
+        "display-name_title": "修改你的默认设备名",
+        "on-this-network": "在此网络上",
+        "paired-devices": "已配对的设备",
+        "traffic": "流量将",
+        "public-room-devices_title": "您可以被这个独立于网络的公共房间中的设备发现。",
+        "paired-devices_title": "您可以在任何时候被已配对的设备发现，而不依赖于网络。",
+        "public-room-devices": "在房间 {{roomId}} 中",
+        "discovery": "您可以被发现:",
+        "on-this-network_title": "您可以被这个网络上的每个人发现。"
+    },
+    "dialogs": {
+        "pair-devices-title": "配对新设备（常驻）",
+        "input-key-on-this-device": "在另一个设备上输入这串数字",
+        "base64-text": "信息",
+        "enter-key-from-another-device": "在此处输入从另一个设备上获得的数字。",
+        "edit-paired-devices-title": "管理已配对的设备",
+        "pair": "配对",
+        "cancel": "取消",
+        "scan-qr-code": "或者 扫描二维码。",
+        "paired-devices-wrapper_data-empty": "无已配对设备。",
+        "auto-accept-instructions-1": "启用",
+        "auto-accept": "自动接收",
+        "decline": "拒绝",
+        "base64-processing": "处理中…",
+        "base64-tap-to-paste": "轻触此处粘贴{{type}}",
+        "base64-paste-to-send": "粘贴到此处以发送 {{type}}",
+        "auto-accept-instructions-2": "以无需同意而自动接收从那个设备上发送的所有文件。",
+        "would-like-to-share": "想要分享",
+        "accept": "接收",
+        "close": "关闭",
+        "share": "分享",
+        "download": "保存",
+        "send": "发送",
+        "receive-text-title": "收到信息",
+        "copy": "复制",
+        "send-message-title": "发送信息",
+        "send-message-to": "发了一条信息给",
+        "has-sent": "发送了：",
+        "base64-files": "文件",
+        "file-other-description-file": "和 1 个其他的文件",
+        "file-other-description-image": "和 1 个其他的图片",
+        "file-other-description-image-plural": "和 {{count}} 个其他的图片",
+        "file-other-description-file-plural": "和 {{count}} 个其他的文件",
+        "title-image-plural": "图片",
+        "receive-title": "收到 {{descriptor}}",
+        "title-image": "图片",
+        "title-file": "文件",
+        "title-file-plural": "文件",
+        "download-again": "再次保存",
+        "system-language": "跟随系统语言",
+        "unpair": "取消配对",
+        "language-selector-title": "选择语言",
+        "hr-or": "或者",
+        "input-room-id-on-another-device": "在另一个设备上输入这串房间号"
+    },
+    "about": {
+        "faq_title": "常见问题",
+        "close-about_aria-label": "关闭 关于 PairDrop",
+        "github_title": "PairDrop 在 GitHub 上开源",
+        "claim": "最简单的跨设备传输方案",
+        "buy-me-a-coffee_title": "帮我买杯咖啡！",
+        "tweet_title": "关于 PairDrop 的推特"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "展示的名字已经长久变更。",
+        "display-name-changed-temporarily": "展示的名字已经变更 仅在此会话中。",
+        "display-name-random-again": "展示的名字再次随机生成。",
+        "download-successful": "{{descriptor}} 已下载",
+        "pairing-tabs-error": "无法配对两个浏览器标签页。",
+        "pairing-success": "新设备已配对。",
+        "pairing-not-persistent": "配对的设备不是持久的。",
+        "pairing-key-invalid": "无效配对码",
+        "pairing-key-invalidated": "配对码 {{key}} 已失效。",
+        "text-content-incorrect": "文本内容不合法。",
+        "file-content-incorrect": "文件内容不合法。",
+        "clipboard-content-incorrect": "剪贴板内容不合法。",
+        "link-received": "收到来自 {{name}} 的链接 - 点击打开",
+        "message-received": "收到来自 {{name}} 的信息 - 点击复制",
+        "request-title": "{{name}} 想要发送 {{count}} 个 {{descriptor}}",
+        "click-to-show": "点击展示",
+        "copied-text": "复制到剪贴板",
+        "selected-peer-left": "选择的设备已离开。",
+        "pairing-cleared": "所有设备已解除配对。",
+        "copied-to-clipboard": "已复制到剪贴板",
+        "notifications-enabled": "通知已启用。",
+        "copied-text-error": "写入剪贴板失败。请手动复制！",
+        "click-to-download": "点击以保存",
+        "unfinished-transfers-warning": "还有未完成的传输任务。你确定要关闭 PairDrop 吗？",
+        "message-transfer-completed": "信息传输已完成。",
+        "offline": "你未连接到网络",
+        "online": "你已重新连接到网络",
+        "connected": "已连接。",
+        "online-requirement": "你需要连接网络来配对新设备。",
+        "files-incorrect": "文件不合法。",
+        "file-transfer-completed": "文件传输已完成。",
+        "connecting": "连接中…",
+        "ios-memory-limit": "向 iOS 发送文件 一次最多只能发送 200 MB",
+        "rate-limit-join-key": "已达连接限制。请等待 10秒 后再试。",
+        "public-room-left": "已退出公共房间 {{publicRoomId}}",
+        "copied-to-clipboard-error": "无法复制。请手动复制。",
+        "public-room-id-invalid": "无效的房间号",
+        "online-requirement-pairing": "您需要连接到互联网来配对新设备。",
+        "online-requirement-public-room": "您需要连接到互联网来创建一个公共房间。"
+    },
+    "document-titles": {
+        "message-received": "收到信息",
+        "message-received-plural": "收到 {{count}} 条信息",
+        "file-transfer-requested": "文件传输请求",
+        "file-received-plural": "收到 {{count}} 个文件",
+        "file-received": "收到文件"
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "点击发送 {{descriptor}}",
+        "click-to-send": "点击以发送文件 或 右键来发送信息",
+        "connection-hash": "若要验证端到端加密的安全性，请在两个设备上比较此安全编号",
+        "preparing": "准备中…",
+        "waiting": "请等待…",
+        "transferring": "传输中…",
+        "processing": "处理中…"
+    }
+}

public_included_ws_fallback/scripts/localization.js

@@ -0,0 +1,144 @@
+class Localization {
+    constructor() {
+        Localization.defaultLocale = "en";
+        Localization.supportedLocales = ["en", "nb", "ru", "zh-CN", "de"];
+        Localization.translations = {};
+        Localization.defaultTranslations = {};
+
+        Localization.systemLocale = Localization.supportedOrDefault(navigator.languages);
+
+        let storedLanguageCode = localStorage.getItem("language-code");
+
+        Localization.initialLocale = storedLanguageCode && Localization.isSupported(storedLanguageCode)
+            ? storedLanguageCode
+            : Localization.systemLocale;
+
+        Localization.setTranslation(Localization.initialLocale)
+            .then(_ => {
+                console.log("Initial translation successful.");
+                Events.fire("initial-translation-loaded");
+            });
+    }
+
+    static isSupported(locale) {
+        return Localization.supportedLocales.indexOf(locale) > -1;
+    }
+
+    static supportedOrDefault(locales) {
+        return locales.find(Localization.isSupported) || Localization.defaultLocale;
+    }
+
+    static async setTranslation(locale) {
+        if (!locale) locale = Localization.systemLocale;
+
+        await Localization.setLocale(locale)
+        await Localization.translatePage();
+
+        console.log("Page successfully translated",
+            `System language: ${Localization.systemLocale}`,
+            `Selected language: ${locale}`
+        );
+
+        Events.fire("translation-loaded");
+    }
+
+    static async setLocale(newLocale) {
+        if (newLocale === Localization.locale) return false;
+
+        Localization.defaultTranslations = await Localization.fetchTranslationsFor(Localization.defaultLocale);
+
+        const newTranslations = await Localization.fetchTranslationsFor(newLocale);
+
+        if(!newTranslations) return false;
+
+        Localization.locale = newLocale;
+        Localization.translations = newTranslations;
+    }
+
+    static getLocale() {
+        return Localization.locale;
+    }
+
+    static isSystemLocale() {
+        return !localStorage.getItem('language-code');
+    }
+
+    static async fetchTranslationsFor(newLocale) {
+        const response = await fetch(`lang/${newLocale}.json`)
+
+        if (response.redirected === true || response.status !== 200) return false;
+
+        return await response.json();
+    }
+
+    static async translatePage() {
+        document
+            .querySelectorAll("[data-i18n-key]")
+            .forEach(element => Localization.translateElement(element));
+    }
+
+    static async translateElement(element) {
+        const key = element.getAttribute("data-i18n-key");
+        const attrs = element.getAttribute("data-i18n-attrs").split(" ");
+
+        for (let i in attrs) {
+            let attr = attrs[i];
+            if (attr === "text") {
+                element.innerText = Localization.getTranslation(key);
+            } else {
+                if (attr.startsWith("data-")) {
+                    let dataAttr = attr.substring(5);
+                    element.dataset.dataAttr = Localization.getTranslation(key, attr);
+                } {
+                    element.setAttribute(attr, Localization.getTranslation(key, attr));
+                }
+            }
+        }
+    }
+
+    static getTranslation(key, attr=null, data={}, useDefault=false) {
+        const keys = key.split(".");
+
+        let translationCandidates = useDefault
+            ? Localization.defaultTranslations
+            : Localization.translations;
+
+        let translation;
+
+        try {
+            for (let i = 0; i < keys.length - 1; i++) {
+                translationCandidates = translationCandidates[keys[i]]
+            }
+
+            let lastKey = keys[keys.length - 1];
+
+            if (attr) lastKey += "_" + attr;
+
+            translation = translationCandidates[lastKey];
+
+            for (let j in data) {
+                translation = translation.replace(`{{${j}}}`, data[j]);
+            }
+        } catch (e) {
+            translation = "";
+        }
+
+        if (!translation) {
+            if (!useDefault) {
+                translation = this.getTranslation(key, attr, data, true);
+                console.warn(`Missing translation entry for your language ${Localization.locale.toUpperCase()}. Using ${Localization.defaultLocale.toUpperCase()} instead.`, key, attr);
+                console.warn("Help translating PairDrop: https://hosted.weblate.org/projects/pairdrop/pairdrop-spa/");
+            } else {
+                console.warn("Missing translation in default language:", key, attr);
+            }
+        }
+
+        return Localization.escapeHTML(translation);
+    }
+
+    static escapeHTML(unsafeText) {
+        let div = document.createElement('div');
+        div.innerText = unsafeText;
+        return div.innerHTML;
+    }
+}

public_included_ws_fallback/scripts/network.js

@@ -1,20 +1,34 @@
 window.URL = window.URL || window.webkitURL;
-window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
+window.isRtcSupported = false; //!!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
+
+window.hiddenProperty = 'hidden' in document ? 'hidden' :
+    'webkitHidden' in document ? 'webkitHidden' :
+        'mozHidden' in document ? 'mozHidden' :
+            null;
+window.visibilityChangeEvent = 'visibilitychange' in document ? 'visibilitychange' :
+    'webkitvisibilitychange' in document ? 'webkitvisibilitychange' :
+        'mozvisibilitychange' in document ? 'mozvisibilitychange' :
+            null;
 
 class ServerConnection {
 
     constructor() {
         this._connect();
         Events.on('pagehide', _ => this._disconnect());
-        document.addEventListener('visibilitychange', _ => this._onVisibilityChange());
+        document.addEventListener(window.visibilityChangeEvent, _ => this._onVisibilityChange());
         if (navigator.connection) navigator.connection.addEventListener('change', _ => this._reconnect());
-        Events.on('room-secrets', e => this._sendRoomSecrets(e.detail));
-        Events.on('room-secret-deleted', e => this.send({ type: 'room-secret-deleted', roomSecret: e.detail}));
-        Events.on('room-secrets-cleared', e => this.send({ type: 'room-secrets-cleared', roomSecrets: e.detail}));
-        Events.on('resend-peers', _ => this.send({ type: 'resend-peers'}));
+        Events.on('room-secrets', e => this.send({ type: 'room-secrets', roomSecrets: e.detail }));
+        Events.on('join-ip-room', e => this.send({ type: 'join-ip-room'}));
+        Events.on('room-secrets-deleted', e => this.send({ type: 'room-secrets-deleted', roomSecrets: e.detail}));
+        Events.on('regenerate-room-secret', e => this.send({ type: 'regenerate-room-secret', roomSecret: e.detail}));
         Events.on('pair-device-initiate', _ => this._onPairDeviceInitiate());
         Events.on('pair-device-join', e => this._onPairDeviceJoin(e.detail));
         Events.on('pair-device-cancel', _ => this.send({ type: 'pair-device-cancel' }));
+
+        Events.on('create-public-room', _ => this._onCreatePublicRoom());
+        Events.on('join-public-room', e => this._onJoinPublicRoom(e.detail.roomId, e.detail.createIfInvalid));
+        Events.on('leave-public-room', _ => this._onLeavePublicRoom());
+
         Events.on('offline', _ => clearTimeout(this._reconnectTimer));
         Events.on('online', _ => this._connect());
     }
@@ -34,27 +48,47 @@ class ServerConnection {
     _onOpen() {
         console.log('WS: server connected');
         Events.fire('ws-connected');
-        if (this._isReconnect) Events.fire('notify-user', 'Connected.');
-    }
-
-    _sendRoomSecrets(roomSecrets) {
-        this.send({ type: 'room-secrets', roomSecrets: roomSecrets });
+        if (this._isReconnect) Events.fire('notify-user', Localization.getTranslation("notifications.connected"));
     }
 
     _onPairDeviceInitiate() {
         if (!this._isConnected()) {
-            Events.fire('notify-user', 'You need to be online to pair devices.');
+            Events.fire('notify-user', Localization.getTranslation("notifications.online-requirement-pairing"));
             return;
         }
-        this.send({ type: 'pair-device-initiate' })
+        this.send({ type: 'pair-device-initiate' });
     }
 
-    _onPairDeviceJoin(roomKey) {
+    _onPairDeviceJoin(pairKey) {
         if (!this._isConnected()) {
-            setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000);
+            setTimeout(_ => this._onPairDeviceJoin(pairKey), 1000);
             return;
         }
-        this.send({ type: 'pair-device-join', roomKey: roomKey })
+        this.send({ type: 'pair-device-join', pairKey: pairKey });
+    }
+
+    _onCreatePublicRoom() {
+        if (!this._isConnected()) {
+            Events.fire('notify-user', Localization.getTranslation("notifications.online-requirement-public-room"));
+            return;
+        }
+        this.send({ type: 'create-public-room' });
+    }
+
+    _onJoinPublicRoom(roomId, createIfInvalid) {
+        if (!this._isConnected()) {
+            setTimeout(_ => this._onJoinPublicRoom(roomId), 1000);
+            return;
+        }
+        this.send({ type: 'join-public-room', publicRoomId: roomId, createIfInvalid: createIfInvalid });
+    }
+
+    _onLeavePublicRoom() {
+        if (!this._isConnected()) {
+            setTimeout(_ => this._onLeavePublicRoom(), 1000);
+            return;
+        }
+        this.send({ type: 'leave-public-room' });
     }
 
     _setRtcConfig(config) {
@@ -63,13 +97,13 @@ class ServerConnection {
 
     _onMessage(msg) {
         msg = JSON.parse(msg);
-        if (msg.type !== 'ping') console.log('WS:', msg);
+        if (msg.type !== 'ping') console.log('WS receive:', msg);
         switch (msg.type) {
             case 'rtc-config':
                 this._setRtcConfig(msg.config);
                 break;
             case 'peers':
-                Events.fire('peers', msg);
+                this._onPeers(msg);
                 break;
             case 'peer-joined':
                 Events.fire('peer-joined', msg);
@@ -96,14 +130,26 @@ class ServerConnection {
                 Events.fire('pair-device-join-key-invalid');
                 break;
             case 'pair-device-canceled':
-                Events.fire('pair-device-canceled', msg.roomKey);
+                Events.fire('pair-device-canceled', msg.pairKey);
                 break;
-            case 'pair-device-join-key-rate-limit':
-                Events.fire('notify-user', 'Rate limit reached. Wait 10 seconds and try again.');
+            case 'join-key-rate-limit':
+                Events.fire('notify-user', Localization.getTranslation("notifications.rate-limit-join-key"));
                 break;
             case 'secret-room-deleted':
                 Events.fire('secret-room-deleted', msg.roomSecret);
                 break;
+            case 'room-secret-regenerated':
+                Events.fire('room-secret-regenerated', msg);
+                break;
+            case 'public-room-id-invalid':
+                Events.fire('public-room-id-invalid', msg.publicRoomId);
+                break;
+            case 'public-room-created':
+                Events.fire('public-room-created', msg.roomId);
+                break;
+            case 'public-room-left':
+                Events.fire('public-room-left');
+                break;
             case 'request':
             case 'header':
             case 'partition':
@@ -118,18 +164,37 @@ class ServerConnection {
                 Events.fire('ws-relay', JSON.stringify(msg));
                 break;
             default:
-                console.error('WS: unknown message type', msg);
+                console.error('WS receive: unknown message type', msg);
         }
     }
 
     send(msg) {
         if (!this._isConnected()) return;
+        if (msg.type !== 'pong') console.log("WS send:", msg)
         this._socket.send(JSON.stringify(msg));
     }
 
+    _onPeers(msg) {
+        Events.fire('peers', msg);
+    }
+
     _onDisplayName(msg) {
-        sessionStorage.setItem("peerId", msg.message.peerId);
-        sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
+        // Add peerId and peerIdHash to sessionStorage to authenticate as the same device on page reload
+        sessionStorage.setItem('peer_id', msg.message.peerId);
+        sessionStorage.setItem('peer_id_hash', msg.message.peerIdHash);
+
+        // Add peerId to localStorage to mark it for other PairDrop tabs on the same browser
+        BrowserTabsConnector.addPeerIdToLocalStorage().then(peerId => {
+            if (!peerId) return;
+            console.log("successfully added peerId to localStorage");
+
+            // Only now join rooms
+            Events.fire('join-ip-room');
+            PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
+                Events.fire('room-secrets', roomSecrets);
+            });
+        });
+
         Events.fire('display-name', msg);
     }
 
@@ -138,8 +203,8 @@ class ServerConnection {
         const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws';
         const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback';
         let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc);
-        const peerId = sessionStorage.getItem("peerId");
-        const peerIdHash = sessionStorage.getItem("peerIdHash");
+        const peerId = sessionStorage.getItem('peer_id');
+        const peerIdHash = sessionStorage.getItem('peer_id_hash');
         if (peerId && peerIdHash) {
             ws_url.searchParams.append('peer_id', peerId);
             ws_url.searchParams.append('peer_id_hash', peerIdHash);
@@ -149,18 +214,24 @@ class ServerConnection {
 
     _disconnect() {
         this.send({ type: 'disconnect' });
-        if (this._socket) {
-            this._socket.onclose = null;
-            this._socket.close();
-            this._socket = null;
-            Events.fire('ws-disconnected');
-            this._isReconnect = true;
-        }
+
+        const peerId = sessionStorage.getItem('peer_id');
+        BrowserTabsConnector.removePeerIdFromLocalStorage(peerId).then(_ => {
+            console.log("successfully removed peerId from localStorage");
+        });
+
+        if (!this._socket) return;
+
+        this._socket.onclose = null;
+        this._socket.close();
+        this._socket = null;
+        Events.fire('ws-disconnected');
+        this._isReconnect = true;
     }
 
     _onDisconnect() {
         console.log('WS: server disconnected');
-        Events.fire('notify-user', 'Connecting..');
+        Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
         clearTimeout(this._reconnectTimer);
         this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
         Events.fire('ws-disconnected');
@@ -168,7 +239,7 @@ class ServerConnection {
     }
 
     _onVisibilityChange() {
-        if (document.hidden) return;
+        if (window.hiddenProperty) return;
         this._connect();
     }
 
@@ -192,13 +263,19 @@ class ServerConnection {
 
 class Peer {
 
-    constructor(serverConnection, peerId, roomType, roomSecret) {
+    constructor(serverConnection, isCaller, peerId, roomType, roomId) {
         this._server = serverConnection;
+        this._isCaller = isCaller;
         this._peerId = peerId;
-        this._roomType = roomType;
-        this._roomSecret = roomSecret;
+
+        this._roomIds = {};
+        this._updateRoomIds(roomType, roomId);
+
         this._filesQueue = [];
         this._busy = false;
+
+        // evaluate auto accept
+        this._evaluateAutoAccept();
     }
 
     sendJSON(message) {
@@ -209,12 +286,73 @@ class Peer {
         this.sendJSON({type: 'display-name-changed', displayName: displayName});
     }
 
-    async createHeader(file) {
-        return {
-            name: file.name,
-            mime: file.type,
-            size: file.size,
-        };
+    _isSameBrowser() {
+        return BrowserTabsConnector.peerIsSameBrowser(this._peerId);
+    }
+
+    _isPaired() {
+        return !!this._roomIds['secret'];
+    }
+
+    _getPairSecret() {
+        return this._roomIds['secret'];
+    }
+
+    _getRoomTypes() {
+        return Object.keys(this._roomIds);
+    }
+
+    _updateRoomIds(roomType, roomId) {
+        // if peer is another browser tab, peer is not identifiable with roomSecret as browser tabs share all roomSecrets
+        // -> do not delete duplicates and do not regenerate room secrets
+        if (!this._isSameBrowser() && roomType === "secret" && this._isPaired() && this._getPairSecret() !== roomId) {
+            // multiple roomSecrets with same peer -> delete old roomSecret
+            PersistentStorage.deleteRoomSecret(this._getPairSecret())
+                .then(deletedRoomSecret => {
+                    if (deletedRoomSecret) console.log("Successfully deleted duplicate room secret with same peer: ", deletedRoomSecret);
+                });
+        }
+
+        this._roomIds[roomType] = roomId;
+
+        if (!this._isSameBrowser() && roomType === "secret" && this._isPaired() && this._getPairSecret().length !== 256 && this._isCaller) {
+            // increase security by initiating the increase of the roomSecret length from 64 chars (<v1.7.0) to 256 chars (v1.7.0+)
+            console.log('RoomSecret is regenerated to increase security')
+            Events.fire('regenerate-room-secret', this._getPairSecret());
+        }
+    }
+
+    _removeRoomType(roomType) {
+        delete this._roomIds[roomType];
+
+        Events.fire('room-type-removed', {
+            peerId: this._peerId,
+            roomType: roomType
+        });
+    }
+
+    _evaluateAutoAccept() {
+        if (!this._isPaired()) {
+            this._setAutoAccept(false);
+            return;
+        }
+
+        PersistentStorage.getRoomSecretEntry(this._getPairSecret())
+            .then(roomSecretEntry => {
+                const autoAccept = roomSecretEntry
+                    ? roomSecretEntry.entry.auto_accept
+                    : false;
+                this._setAutoAccept(autoAccept);
+            })
+            .catch(_ => {
+                this._setAutoAccept(false);
+            });
+    }
+
+    _setAutoAccept(autoAccept) {
+        this._autoAccept = !this._isSameBrowser()
+            ? autoAccept
+            : false;
     }
 
     getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
@@ -259,7 +397,11 @@ class Peer {
         let imagesOnly = true
         for (let i=0; i<files.length; i++) {
             Events.fire('set-progress', {peerId: this._peerId, progress: 0.8*i/files.length, status: 'prepare'})
-            header.push(await this.createHeader(files[i]));
+            header.push({
+                name: files[i].name,
+                mime: files[i].type,
+                size: files[i].size
+            });
             totalSize += files[i].size;
             if (files[i].type.split('/')[0] !== 'image') imagesOnly = false;
         }
@@ -371,7 +513,7 @@ class Peer {
 
     _onFilesTransferRequest(request) {
         if (this._requestPending) {
-            // Only accept one request at a time
+            // Only accept one request at a time per peer
             this.sendJSON({type: 'files-transfer-response', accepted: false});
             return;
         }
@@ -383,6 +525,14 @@ class Peer {
         }
 
         this._requestPending = request;
+
+        if (this._autoAccept) {
+            // auto accept if set via Edit Paired Devices Dialog
+            this._respondToFileTransferRequest(true);
+            return;
+        }
+
+        // default behavior: show user transfer request
         Events.fire('files-transfer-request', {
             request: request,
             peerId: this._peerId
@@ -413,7 +563,7 @@ class Peer {
 
     _abortTransfer() {
         Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
-        Events.fire('notify-user', 'Files are incorrect.');
+        Events.fire('notify-user', Localization.getTranslation("notifications.files-incorrect"));
         this._filesReceived = [];
         this._requestAccepted = null;
         this._digester = null;
@@ -454,14 +604,14 @@ class Peer {
             this._abortTransfer();
         }
 
-        // include for compatibility with Snapdrop for Android app
+        // include for compatibility with 'Snapdrop & PairDrop for Android' app
         Events.fire('file-received', fileBlob);
 
         this._filesReceived.push(fileBlob);
         if (!this._requestAccepted.header.length) {
             this._busy = false;
             Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
-            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
+            Events.fire('files-received', {peerId: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
             this._filesReceived = [];
             this._requestAccepted = null;
         }
@@ -471,7 +621,8 @@ class Peer {
         this._chunker = null;
         if (!this._filesQueue.length) {
             this._busy = false;
-            Events.fire('notify-user', 'File transfer completed.');
+            Events.fire('notify-user', Localization.getTranslation("notifications.file-transfer-completed"));
+            Events.fire('files-sent'); // used by 'Snapdrop & PairDrop for Android' app
         } else {
             this._dequeueFile();
         }
@@ -482,7 +633,7 @@ class Peer {
             Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
             this._filesRequested = null;
             if (message.reason === 'ios-memory-limit') {
-                Events.fire('notify-user', "Sending files to iOS is only possible up to 200MB at once");
+                Events.fire('notify-user', Localization.getTranslation("notifications.ios-memory-limit"));
             }
             return;
         }
@@ -492,7 +643,7 @@ class Peer {
     }
 
     _onMessageTransferCompleted() {
-        Events.fire('notify-user', 'Message transfer completed.');
+        Events.fire('notify-user', Localization.getTranslation("notifications.message-transfer-completed"));
     }
 
     sendText(text) {
@@ -508,34 +659,39 @@ class Peer {
     }
 
     _onDisplayNameChanged(message) {
-        if (!message.displayName || this._displayName === message.displayName) return;
-        this._displayName = message.displayName;
+        const displayNameHasChanged = this._displayName !== message.displayName
+
+        if (message.displayName && displayNameHasChanged) {
+            this._displayName = message.displayName;
+        }
+
         Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
+
+        if (!displayNameHasChanged) return;
+        Events.fire('notify-peer-display-name-changed', this._peerId);
     }
 }
 
 class RTCPeer extends Peer {
 
-    constructor(serverConnection, peerId, roomType, roomSecret) {
-        super(serverConnection, peerId, roomType, roomSecret);
+    constructor(serverConnection, isCaller, peerId, roomType, roomId) {
+        super(serverConnection, isCaller, peerId, roomType, roomId);
         this.rtcSupported = true;
-        if (!peerId) return; // we will listen for a caller
-        this._connect(peerId, true);
+        if (!this._isCaller) return; // we will listen for a caller
+        this._connect();
     }
 
-    _connect(peerId, isCaller) {
-        if (!this._conn || this._conn.signalingState === "closed") this._openConnection(peerId, isCaller);
+    _connect() {
+        if (!this._conn || this._conn.signalingState === "closed") this._openConnection();
 
-        if (isCaller) {
+        if (this._isCaller) {
             this._openChannel();
         } else {
             this._conn.ondatachannel = e => this._onChannelOpened(e);
         }
     }
 
-    _openConnection(peerId, isCaller) {
-        this._isCaller = isCaller;
-        this._peerId = peerId;
+    _openConnection() {
         this._conn = new RTCPeerConnection(window.rtcConfig);
         this._conn.onicecandidate = e => this._onIceCandidate(e);
         this._conn.onicecandidateerror = e => this._onError(e);
@@ -545,13 +701,17 @@ class RTCPeer extends Peer {
 
     _openChannel() {
         if (!this._conn) return;
+
         const channel = this._conn.createDataChannel('data-channel', {
             ordered: true,
             reliable: true // Obsolete. See https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/reliable
         });
         channel.onopen = e => this._onChannelOpened(e);
         channel.onerror = e => this._onError(e);
-        this._conn.createOffer().then(d => this._onDescription(d)).catch(e => this._onError(e));
+
+        this._conn.createOffer()
+            .then(d => this._onDescription(d))
+            .catch(e => this._onError(e));
     }
 
     _onDescription(description) {
@@ -567,7 +727,7 @@ class RTCPeer extends Peer {
     }
 
     onServerMessage(message) {
-        if (!this._conn) this._connect(message.sender.id, false);
+        if (!this._conn) this._connect();
 
         if (message.sdp) {
             this._conn.setRemoteDescription(message.sdp)
@@ -632,7 +792,7 @@ class RTCPeer extends Peer {
     _onBeforeUnload(e) {
         if (this._busy) {
             e.preventDefault();
-            return "There are unfinished transfers. Are you sure you want to close?";
+            return Localization.getTranslation("notifications.unfinished-transfers-warning");
         }
     }
 
@@ -652,7 +812,7 @@ class RTCPeer extends Peer {
         console.log('RTC: channel closed', this._peerId);
         Events.fire('peer-disconnected', this._peerId);
         if (!this._isCaller) return;
-        this._connect(this._peerId, true); // reopen the channel
+        this._connect(); // reopen the channel
     }
 
     _onConnectionStateChange() {
@@ -691,15 +851,19 @@ class RTCPeer extends Peer {
     _sendSignal(signal) {
         signal.type = 'signal';
         signal.to = this._peerId;
-        signal.roomType = this._roomType;
-        signal.roomSecret = this._roomSecret;
+        signal.roomType = this._getRoomTypes()[0];
+        signal.roomId = this._roomIds[this._getRoomTypes()[0]];
         this._server.send(signal);
     }
 
     refresh() {
         // check if channel is open. otherwise create one
         if (this._isConnected() || this._isConnecting()) return;
-        this._connect(this._peerId, this._isCaller);
+
+        // only reconnect if peer is caller
+        if (!this._isCaller) return;
+
+        this._connect();
     }
 
     _isConnected() {
@@ -718,11 +882,10 @@ class RTCPeer extends Peer {
 
 class WSPeer extends Peer {
 
-    constructor(serverConnection, peerId, roomType, roomSecret) {
-        super(serverConnection, peerId, roomType, roomSecret);
+    constructor(serverConnection, isCaller, peerId, roomType, roomSecret) {
+        super(serverConnection, isCaller, peerId, roomType, roomSecret);
         this.rtcSupported = false;
-        if (!peerId) return; // we will listen for a caller
-        this._isCaller = true;
+        if (!this._isCaller) return; // we will listen for a caller
         this._sendSignal();
     }
 
@@ -734,10 +897,9 @@ class WSPeer extends Peer {
     }
 
     sendJSON(message) {
-        console.debug(message)
         message.to = this._peerId;
-        message.roomType = this._roomType;
-        message.roomSecret = this._roomSecret;
+        message.roomType = this._getRoomTypes()[0];
+        message.roomId = this._roomIds[this._getRoomTypes()[0]];
         this._server.send(message);
     }
 
@@ -769,49 +931,77 @@ 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-joined', e => this._onPeerJoined(e.detail));
         Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
+
+        // this device closes connection
+        Events.on('room-secrets-deleted', e => this._onRoomSecretsDeleted(e.detail));
+        Events.on('leave-public-room', e => this._onLeavePublicRoom(e.detail));
+
+        // peer closes connection
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
+
+        Events.on('room-secret-regenerated', e => this._onRoomSecretRegenerated(e.detail));
         Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName));
         Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
-        Events.on('peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail.peerId));
+        Events.on('notify-peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail));
+        Events.on('auto-accept-updated', e => this._onAutoAcceptUpdated(e.detail.roomSecret, e.detail.autoAccept));
         Events.on('ws-disconnected', _ => this._onWsDisconnected());
         Events.on('ws-relay', e => this._onWsRelay(e.detail));
     }
 
     _onMessage(message) {
-        // if different roomType -> abort
-        if (this.peers[message.sender.id] && this.peers[message.sender.id]._roomType !== message.roomType) return;
-        if (!this.peers[message.sender.id]) {
-            if (window.isRtcSupported && message.sender.rtcSupported) {
-                this.peers[message.sender.id] = new RTCPeer(this._server, undefined, message.roomType, message.roomSecret);
-            } else {
-                this.peers[message.sender.id] = new WSPeer(this._server, undefined, message.roomType, message.roomSecret);
-            }
+        const peerId = message.sender.id;
+        this.peers[peerId].onServerMessage(message);
+    }
+
+    _refreshPeer(peer, roomType, roomId) {
+        if (!peer) return false;
+
+        const roomTypesDiffer = Object.keys(peer._roomIds)[0] !== roomType;
+        const roomIdsDiffer = peer._roomIds[roomType] !== roomId;
+
+        // if roomType or roomId for roomType differs peer is already connected
+        // -> only update roomSecret and reevaluate auto accept
+        if (roomTypesDiffer || roomIdsDiffer) {
+            peer._updateRoomIds(roomType, roomId);
+            peer._evaluateAutoAccept();
+
+            return true;
         }
-        this.peers[message.sender.id].onServerMessage(message);
+
+        return true;
+    }
+
+    _createOrRefreshPeer(isCaller, peerId, roomType, roomId, rtcSupported) {
+        const peer = this.peers[peerId];
+        if (peer) {
+            this._refreshPeer(peer, roomType, roomId);
+            return;
+        }
+
+        if (window.isRtcSupported && rtcSupported) {
+            this.peers[peerId] = new RTCPeer(this._server,isCaller, peerId, roomType, roomId);
+        } else {
+            this.peers[peerId] = new WSPeer(this._server, isCaller, peerId, roomType, roomId);
+        }
+    }
+
+    _onPeerJoined(message) {
+        this._createOrRefreshPeer(false, message.peer.id, message.roomType, message.roomId, message.peer.rtcSupported);
+    }
+
+    _onPeers(message) {
+        message.peers.forEach(peer => {
+            this._createOrRefreshPeer(true, peer.id, message.roomType, message.roomId, peer.rtcSupported);
+        })
     }
 
     _onWsRelay(message) {
-        const messageJSON = JSON.parse(message)
+        const messageJSON = JSON.parse(message);
         if (messageJSON.type === 'ws-chunk') message = base64ToArrayBuffer(messageJSON.chunk);
-        this.peers[messageJSON.sender.id]._onMessage(message)
-    }
-
-    _onPeers(msg) {
-        msg.peers.forEach(peer => {
-            if (this.peers[peer.id]) {
-                // if different roomType -> abort
-                if (this.peers[peer.id].roomType !== msg.roomType || this.peers[peer.id].roomSecret !== msg.roomSecret) return;
-                this.peers[peer.id].refresh();
-                return;
-            }
-            if (window.isRtcSupported && peer.rtcSupported) {
-                this.peers[peer.id] = new RTCPeer(this._server, peer.id, msg.roomType, msg.roomSecret);
-            } else {
-                this.peers[peer.id] = new WSPeer(this._server, peer.id, msg.roomType, msg.roomSecret);
-            }
-        })
+        this.peers[messageJSON.sender.id]._onMessage(message);
     }
 
     _onRespondToFileTransferRequest(detail) {
@@ -838,13 +1028,22 @@ class PeersManager {
         this.peers[message.to].sendText(message.text);
     }
 
-    _onPeerLeft(msg) {
-        if (this.peers[msg.peerId] && (!this.peers[msg.peerId].rtcSupported || !window.isRtcSupported)) {
-            console.log('WSPeer left:', msg.peerId);
-            Events.fire('peer-disconnected', msg.peerId);
-        } else if (msg.disconnect === true) {
+    _onPeerLeft(message) {
+        if (this.peers[message.peerId] && (!this.peers[message.peerId].rtcSupported || !window.isRtcSupported)) {
+            console.log('WSPeer left:', message.peerId);
+        }
+        if (message.disconnect === true) {
             // if user actively disconnected from PairDrop server, disconnect all peer to peer connections immediately
-            Events.fire('peer-disconnected', msg.peerId);
+            this._disconnectOrRemoveRoomTypeByPeerId(message.peerId, message.roomType);
+
+            // If no peers are connected anymore, we can safely assume that no other tab on the same browser is connected:
+            // Tidy up peerIds in localStorage
+            if (Object.keys(this.peers).length === 0) {
+                BrowserTabsConnector.removeOtherPeerIdsFromLocalStorage().then(peerIds => {
+                    if (!peerIds) return;
+                    console.log("successfully removed other peerIds from localStorage");
+                });
+            }
         }
     }
 
@@ -854,7 +1053,6 @@ class PeersManager {
 
     _onWsDisconnected() {
         for (const peerId in this.peers) {
-            console.debug(this.peers[peerId].rtcSupported);
             if (this.peers[peerId] && (!this.peers[peerId].rtcSupported || !window.isRtcSupported)) {
                 Events.fire('peer-disconnected', peerId);
             }
@@ -868,17 +1066,52 @@ class PeersManager {
         if (peer._channel) peer._channel.onclose = null;
         peer._conn.close();
         peer._busy = false;
+        peer._roomIds = {};
+    }
+
+    _onRoomSecretsDeleted(roomSecrets) {
+        for (let i=0; i<roomSecrets.length; i++) {
+            this._disconnectOrRemoveRoomTypeByRoomId('secret', roomSecrets[i]);
+        }
+    }
+
+    _onLeavePublicRoom(publicRoomId) {
+        this._disconnectOrRemoveRoomTypeByRoomId('public-id', publicRoomId);
     }
 
     _onSecretRoomDeleted(roomSecret) {
-        for (const peerId in this.peers) {
-            const peer = this.peers[peerId];
-            if (peer._roomSecret === roomSecret) {
-                this._onPeerDisconnected(peerId);
-            }
+        this._disconnectOrRemoveRoomTypeByRoomId('secret', roomSecret);
+    }
+
+    _disconnectOrRemoveRoomTypeByRoomId(roomType, roomId) {
+        const peerIds = this._getPeerIdsFromRoomId(roomId);
+
+        if (!peerIds.length) return;
+
+        for (let i=0; i<peerIds.length; i++) {
+            this._disconnectOrRemoveRoomTypeByPeerId(peerIds[i], roomType);
         }
     }
 
+    _disconnectOrRemoveRoomTypeByPeerId(peerId, roomType) {
+        const peer = this.peers[peerId];
+
+        if (!peer) return;
+
+        if (peer._getRoomTypes().length > 1) {
+            peer._removeRoomType(roomType);
+        } else {
+            Events.fire('peer-disconnected', peerId);
+        }
+    }
+
+    _onRoomSecretRegenerated(message) {
+        PersistentStorage.updateRoomSecret(message.oldRoomSecret, message.newRoomSecret).then(_ => {
+            console.log("successfully regenerated room secret");
+            Events.fire("room-secrets", [message.newRoomSecret]);
+        })
+    }
+
     _notifyPeersDisplayNameChanged(newDisplayName) {
         this._displayName = newDisplayName ? newDisplayName : this._originalDisplayName;
         for (const peerId in this.peers) {
@@ -894,6 +1127,31 @@ class PeersManager {
 
     _onDisplayName(displayName) {
         this._originalDisplayName = displayName;
+        // if the displayName has not been changed (yet) set the displayName to the original displayName
+        if (!this._displayName) this._displayName = displayName;
+    }
+
+    _onAutoAcceptUpdated(roomSecret, autoAccept) {
+        const peerId = this._getPeerIdsFromRoomId(roomSecret)[0];
+
+        if (!peerId) return;
+
+        this.peers[peerId]._setAutoAccept(autoAccept);
+    }
+
+    _getPeerIdsFromRoomId(roomId) {
+        if (!roomId) return [];
+
+        let peerIds = []
+        for (const peerId in this.peers) {
+            const peer = this.peers[peerId];
+
+            // peer must have same roomId.
+            if (Object.values(peer._roomIds).includes(roomId)) {
+                peerIds.push(peer._peerId);
+            }
+        }
+        return peerIds;
     }
 }
 
@@ -979,7 +1237,7 @@ class FileDigester {
 }
 
 class Events {
-    static fire(type, detail) {
+    static fire(type, detail = {}) {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 

public_included_ws_fallback/scripts/util.js

@@ -5,7 +5,7 @@ if (!navigator.clipboard) {
 
             // A <span> contains the text to copy
             const span = document.createElement('span');
-            span.textContent = text;
+            span.innerText = text;
             span.style.whiteSpace = 'pre'; // Preserve consecutive spaces and newlines
 
             // Paint the span outside the viewport
@@ -399,6 +399,14 @@ const cyrb53 = function(str, seed = 0) {
     return 4294967296 * (2097151 & h2) + (h1>>>0);
 };
 
+function onlyUnique (value, index, array) {
+    return array.indexOf(value) === index;
+}
+
+function getUrlWithoutArguments() {
+    return `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+}
+
 function arrayBufferToBase64(buffer) {
     var binary = '';
     var bytes = new Uint8Array(buffer);
@@ -410,10 +418,10 @@ function arrayBufferToBase64(buffer) {
 }
 
 function base64ToArrayBuffer(base64) {
-    var binary_string =  window.atob(base64);
+    var binary_string = window.atob(base64);
     var len = binary_string.length;
     var bytes = new Uint8Array(len);
-    for (var i = 0; i < len; i++)        {
+    for (var i = 0; i < len; i++) {
         bytes[i] = binary_string.charCodeAt(i);
     }
     return bytes.buffer;

public_included_ws_fallback/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.6.1';
+const cacheVersion = 'v1.8.0';
 const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',
@@ -72,8 +72,7 @@ self.addEventListener('fetch', function(event) {
     if (event.request.method === "POST") {
         // Requests related to Web Share Target.
         event.respondWith((async () => {
-            let share_url = await evaluateRequestData(event.request);
-            share_url = event.request.url + share_url;
+            const share_url = await evaluateRequestData(event.request);
             return Response.redirect(encodeURI(share_url), 302);
         })());
     } else {
@@ -101,15 +100,16 @@ 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");
-
-
+const evaluateRequestData = function (request) {
     return new Promise(async (resolve) => {
+        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");
+
+        const pairDropUrl = request.url;
+
         if (files && files.length > 0) {
             let fileObjects = [];
             for (let i=0; i<files.length; i++) {
@@ -128,21 +128,21 @@ const evaluateRequestData = async function (request) {
 
                     const objectStoreRequest = objectStore.add(fileObjects[i]);
                     objectStoreRequest.onsuccess = _ => {
-                        if (i === fileObjects.length - 1) resolve('?share-target=files');
+                        if (i === fileObjects.length - 1) resolve(pairDropUrl + '?share-target=files');
                     }
                 }
             }
             DBOpenRequest.onerror = _ => {
-                resolve('');
+                resolve(pairDropUrl);
             }
         } else {
-            let share_url = '?share-target=text';
+            let urlArgument = '?share-target=text';
 
-            if (title) share_url += `&title=${title}`;
-            if (text) share_url += `&text=${text}`;
-            if (url) share_url += `&url=${url}`;
+            if (title) urlArgument += `&title=${title}`;
+            if (text) urlArgument += `&text=${text}`;
+            if (url) urlArgument += `&url=${url}`;
 
-            resolve(share_url);
+            resolve(pairDropUrl + urlArgument);
         }
     });
 }

public_included_ws_fallback/styles.css

@@ -4,6 +4,8 @@
     --icon-size: 24px;
     --primary-color: #4285f4;
     --paired-device-color: #00a69c;
+    --public-room-color: #db8500;
+    --accent-color: var(--primary-color);
     --peer-width: 120px;
     --ws-peer-color: #ff6b6b;
     color-scheme: light dark;
@@ -20,6 +22,11 @@ body {
     overflow-x: hidden;
     overscroll-behavior: none;
     overflow-y: hidden;
+    /* Only allow selection on message and pair key */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    transition: color 300ms;
 }
 
 body {
@@ -37,6 +44,10 @@ html {
     min-height: fill-available;
 }
 
+.fw {
+    width: 100%;
+}
+
 .row-reverse {
     display: flex;
     flex-direction: row-reverse;
@@ -48,7 +59,6 @@ html {
 
 .row {
     display: flex;
-    justify-content: center;
     flex-direction: row;
 }
 
@@ -75,6 +85,10 @@ html {
     bottom: 0;
 }
 
+.pointer {
+    cursor: pointer;
+}
+
 header {
     position: absolute;
     align-items: baseline;
@@ -212,8 +226,12 @@ a,
     cursor: pointer;
 }
 
-hr {
-    color: white;
+input {
+    cursor: pointer;
+}
+
+input[type="checkbox"] {
+    min-width: 13px;
 }
 
 x-noscript {
@@ -264,8 +282,6 @@ x-noscript {
     margin-top: 56px;
     flex-direction: column-reverse;
     flex-grow: 1;
-    --footer-height: 146px;
-    max-height: calc(100vh - 56px - var(--footer-height));
     justify-content: space-around;
     align-items: center;
     overflow-x: hidden;
@@ -273,17 +289,7 @@ x-noscript {
     overscroll-behavior-x: none;
 }
 
-@media screen and (min-width: 402px) and (max-width: 425px) {
-    header:has(#clear-pair-devices:not([hidden]))~#center {
-        --footer-height: 164px;
-    }
-}
 
-@media screen and (max-width: 402px) {
-    #center {
-        --footer-height: 184px;
-    }
-}
 /* Peers List */
 
 #x-peers-filler {
@@ -415,10 +421,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,
@@ -440,7 +446,7 @@ x-no-peers::before {
 }
 
 x-no-peers[drop-bg]::before {
-    content: "Release to select recipient";
+    content: attr(data-drop-bg);
 }
 
 x-no-peers[drop-bg] * {
@@ -452,8 +458,6 @@ x-no-peers[drop-bg] * {
 /* Peer */
 
 x-peer {
-    -webkit-user-select: none;
-    user-select: none;
     padding: 8px;
     align-content: start;
     flex-wrap: wrap;
@@ -461,7 +465,6 @@ x-peer {
 
 x-peer label {
     width: var(--peer-width);
-    cursor: pointer;
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative;
@@ -490,10 +493,14 @@ x-peer .icon-wrapper {
     display: flex;
 }
 
-x-peer:not(.type-ip).type-secret .icon-wrapper {
+x-peer.type-secret .icon-wrapper {
     background: var(--paired-device-color);
 }
 
+x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
+    background: var(--public-room-color);
+}
+
 x-peer x-icon > .highlight-wrapper {
     align-self: center;
     align-items: center;
@@ -502,17 +509,29 @@ x-peer x-icon > .highlight-wrapper {
 }
 
 x-peer x-icon > .highlight-wrapper > .highlight {
-    width: 6px;
+    width: 15px;
     height: 6px;
-    border-radius: 50%;
+    border-radius: 4px;
+    margin-left: 1px;
+    margin-right: 1px;
     display: none;
 }
 
-x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
+x-peer.type-ip x-icon > .highlight-wrapper > .highlight.highlight-room-ip {
+    background-color: var(--primary-color);
+    display: inline;
+}
+
+x-peer.type-secret x-icon > .highlight-wrapper > .highlight.highlight-room-secret {
     background-color: var(--paired-device-color);
     display: inline;
 }
 
+x-peer.type-public-id x-icon > .highlight-wrapper > .highlight.highlight-room-public-id {
+    background-color: var(--public-room-color);
+    display: inline;
+}
+
 x-peer:not([status]):hover x-icon,
 x-peer:not([status]):focus x-icon {
     transform: scale(1.05);
@@ -541,6 +560,14 @@ x-peer.ws-peer .highlight-wrapper {
     margin-top: 3px;
 }
 
+#websocket-fallback {
+    opacity: 0.5;
+}
+
+#websocket-fallback > span:nth-of-type(2) {
+    border-bottom: solid 2px var(--ws-peer-color);
+}
+
 .device-descriptor {
     width: 100%;
     text-align: center;
@@ -557,7 +584,6 @@ x-peer.ws-peer .highlight-wrapper {
 .status,
 .device-name,
 .connection-hash {
-    height: 18px;
     opacity: 0.7;
 }
 
@@ -571,22 +597,6 @@ x-peer.ws-peer .highlight-wrapper {
     white-space: nowrap;
 }
 
-x-peer[status=transfer] .status:before {
-    content: 'Transferring...';
-}
-
-x-peer[status=prepare] .status:before {
-    content: 'Preparing...';
-}
-
-x-peer[status=wait] .status:before {
-    content: 'Waiting...';
-}
-
-x-peer[status=process] .status:before {
-    content: 'Processing...';
-}
-
 x-peer:not([status]) .status,
 x-peer[status] .device-name {
     display: none;
@@ -620,12 +630,11 @@ x-peer[drop] x-icon {
 
 footer {
     position: relative;
-    margin-top: auto;
     z-index: 2;
     align-items: center;
     text-align: center;
-    transition: color 300ms;
     cursor: default;
+    margin: auto 5px 5px;
 }
 
 footer .logo {
@@ -635,43 +644,71 @@ footer .logo {
     margin-top: -10px;
 }
 
-footer .font-body2 {
-    color: var(--primary-color);
-    margin: auto 18px;
+.discovery-wrapper {
+    font-size: 12px;
+    margin: 10px auto auto;
+    border: 3px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 2px;
+    background-color: rgb(var(--bg-color));
+    transition: background-color 0.5s ease;
 }
 
-#on-this-network {
-    border-bottom: solid 4px var(--primary-color);
-    padding-bottom: 1px;
+/*You can be discovered wrapper*/
+.discovery-wrapper > div:first-of-type {
+    padding-left: 4px;
+    padding-right: 4px;
 }
 
-#paired-devices {
-    border-bottom: solid 4px var(--paired-device-color);
-    padding-bottom: 1px;
+
+.discovery-wrapper .badge {
+    word-break: keep-all;
+    margin: 2px;
+}
+
+.badge {
+    border-radius: 0.3rem/0.3rem;
+    padding-right: 0.3rem;
+    padding-left: 0.3em;
+    background-color: var(--badge-color);
+    color: white;
+    transition: background-color 0.5s ease;
+    white-space: nowrap;
+}
+
+.badge-room-ip {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.badge-room-secret {
+    background-color: var(--paired-device-color);
+    border-color: var(--paired-device-color);
+}
+
+.badge-room-public-id {
+    background-color: var(--public-room-color);
+    border-color: var(--public-room-color);
 }
 
 #display-name {
+    position: relative;
     display: inline-block;
     text-align: left;
     border: none;
     outline: none;
     max-width: 15em;
     text-overflow: ellipsis;
-    white-space: nowrap;
     cursor: text;
     margin-left: -1rem;
     margin-bottom: -6px;
-    padding-right: 0.3rem;
-    padding-left: 0.3em;
     padding-bottom: 0.1rem;
     border-radius: 1.3rem/30%;
     border-right: solid 1rem transparent;
     border-left: solid 1rem transparent;
     background-clip: padding-box;
-    background-color: rgba(var(--text-color), 43%);
-    color: white;
-    transition: background-color 0.5s ease;
     overflow: hidden;
+    z-index: 1;
 }
 
 #edit-pen {
@@ -680,7 +717,6 @@ footer .font-body2 {
     margin-left: -1rem;
     margin-bottom: -2px;
     position: relative;
-    z-index: -1;
 }
 
 /* Dialog */
@@ -698,7 +734,6 @@ x-dialog x-paper {
     z-index: 3;
     background: white;
     border-radius: 8px;
-    padding: 16px 24px;
     width: 100%;
     max-width: 400px;
     overflow: hidden;
@@ -707,14 +742,45 @@ x-dialog x-paper {
     will-change: transform;
 }
 
-#pair-device-dialog x-paper {
+x-paper > .row:first-of-type {
+    background-color: var(--accent-color);
+    border-bottom: solid 4px var(--border-color);
+    margin-bottom: 10px;
+}
+
+x-paper > .row:first-of-type h2 {
+    color: white;
+}
+
+#pair-device-dialog,
+#edit-paired-devices-dialog {
+    --accent-color: var(--paired-device-color);
+}
+
+#public-room-dialog {
+    --accent-color: var(--public-room-color);
+}
+
+#pair-device-dialog x-paper,
+#public-room-dialog x-paper {
     display: flex;
     flex-direction: column;
     position: absolute;
     top: max(50%, 350px);
     margin-top: -328.5px;
     width: calc(100vw - 20px);
-    height: 625px;
+}
+
+#pair-device-dialog ::-moz-selection,
+#pair-device-dialog ::selection {
+    color: black;
+    background: var(--paired-device-color);
+}
+
+#public-room-dialog ::-moz-selection,
+#public-room-dialog ::selection {
+    color: black;
+    background: var(--public-room-color);
 }
 
 x-dialog:not([show]) {
@@ -734,24 +800,21 @@ x-dialog a {
     color: var(--primary-color);
 }
 
-x-dialog .font-subheading {
-    margin-bottom: 5px;
-}
+/* Pair Devices Dialog */
 
-/* PairDevicesDialog */
-
-#key-input-container {
+.input-key-container {
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
-#key-input-container>input {
+.input-key-container > input {
     width: 45px;
     height: 45px;
     font-size: 30px;
     padding: 0;
     text-align: center;
+    text-transform: uppercase;
     display: -webkit-box !important;
     display: -webkit-flex !important;
     display: -moz-flex !important;
@@ -762,15 +825,18 @@ x-dialog .font-subheading {
     justify-content: center;
 }
 
-#key-input-container>input + * {
+.input-key-container > input + * {
     margin-left: 6px;
 }
 
-#key-input-container>input:nth-of-type(4) {
+.input-key-container.six-chars > input:nth-of-type(4) {
     margin-left: 5%;
 }
 
-#room-key {
+.key {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    user-select: text;
     font-size: 50px;
     letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
     display: inline-block;
@@ -778,47 +844,169 @@ x-dialog .font-subheading {
     margin: 15px -15px;
 }
 
-#room-key-qr-code {
+.key-qr-code {
     margin: 16px;
 }
 
-#pair-device-dialog hr {
-    margin: 40px -24px;
+.key-instructions {
+    flex-direction: column;
+}
+
+x-dialog h2 {
+    margin-top: 5px;
+    margin-bottom: 0;
+}
+
+x-dialog hr {
+    height: 3px;
+    border: none;
+    width: 100%;
+    background-color: var(--border-color);
+}
+
+.hr-note {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.hr-note hr {
+    margin-bottom: -2px;
+}
+
+.hr-note > div {
+    height: 0;
+    transform: translateY(-10px);
+}
+
+
+.hr-note > div > span {
+    padding: 3px 10px;
+    border-radius: 10px;
+    color: rgb(var(--text-color));
+    background-color: rgb(var(--bg-color));
+    border: var(--border-color) solid 3px;
+    text-transform: uppercase;
 }
 
 #pair-device-dialog x-background {
     padding: 16px!important;
 }
 
+/* Edit Paired Devices Dialog */
+.paired-devices-wrapper:empty:before {
+    content: attr(data-empty);
+}
+
+.paired-devices-wrapper:empty {
+    padding: 10px;
+}
+
+.paired-devices-wrapper {
+    border-top: solid 4px var(--paired-device-color);
+    border-bottom: solid 4px var(--paired-device-color);
+    max-height: 65vh;
+    overflow: scroll;
+    background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
+    linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
+        /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .3), rgba(var(--text-color), 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .3), rgba(var(--text-color), 0)) 0 100%;
+
+    background-repeat: no-repeat;
+    background-size: 100% 80px, 100% 80px, 100% 24px, 100% 24px;
+
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+}
+
+.paired-device {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+}
+
+.paired-device:not(:last-child) {
+    border-bottom: solid 4px var(--paired-device-color);
+}
+
+.paired-device > .display-name,
+.paired-device > .device-name {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    align-self: center;
+    border-bottom: solid 2px rgba(128, 128, 128, 0.5);
+    opacity: 1;
+}
+.paired-device span {
+    width: 100%;
+}
+
+.paired-device > .button-wrapper {
+    display: flex;
+    height: 36px;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.paired-device > .button-wrapper > label,
+.paired-device > .button-wrapper > button {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    white-space: nowrap;
+    justify-content: center;
+    width: 50%;
+    padding-left: 6px;
+    padding-right: 6px;
+    height: 36px;
+}
+
+.paired-device > .button-wrapper > :not(:last-child) {
+    border-right: solid 1px rgba(128, 128, 128, 0.5);
+}
+
+.paired-device > .button-wrapper > :not(:first-child) {
+    border-left: solid 1px rgba(128, 128, 128, 0.5);
+}
+
+.paired-device * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* Receive Dialog */
 
-x-dialog .row {
-    margin-top: 24px;
-    margin-bottom: 8px;
+x-paper > .row {
+    padding: 10px;
 }
 
 /* button row*/
-x-paper > div:last-child {
-    margin: auto -24px -15px;
-    border-top: solid 2.5px var(--border-color);
+x-paper > .button-row {
+    border-top: solid 3px var(--border-color);
     height: 50px;
+    margin-top: 10px;
 }
 
-x-paper > div:last-child > .button {
+x-paper > .button-row > .button {
     height: 100%;
     width: 100%;
 }
 
-x-paper > div:last-child > .button:not(:last-child) {
-    border-left: solid 2.5px var(--border-color);
+x-paper > .button-row > .button:not(:first-child) {
+    border-right: solid 1.5px var(--border-color);
+}
+
+x-paper > .button-row > .button:not(:last-child) {
+    border-left: solid 1.5px var(--border-color);
 }
 
 .file-description {
-    margin-bottom: 25px;
-}
-
-.file-description .row {
-    margin: 0
+    max-width: 100%;
 }
 
 .file-description span {
@@ -829,23 +1017,29 @@ x-paper > div:last-child > .button:not(:last-child) {
 .file-name {
     font-style: italic;
     max-width: 100%;
+    margin-top: 5px;
 }
 
 .file-stem {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding-right: 1px;
 }
 
 /* Send Text Dialog */
-
 x-dialog .dialog-subheader {
-    margin-bottom: 25px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+}
+
+#send-text-dialog .display-name-wrapper {
+    padding-bottom: 0;
 }
 
 #text-input {
     min-height: 200px;
-    margin: 14px auto;
+    width: 100%;
 }
 
 /* Receive Text Dialog */
@@ -856,11 +1050,10 @@ x-dialog .dialog-subheader {
     max-height: calc(100vh - 393px);
     overflow-x: hidden;
     overflow-y: auto;
-    -webkit-user-select: all;
-    -moz-user-select: all;
-    user-select: all;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    user-select: text;
     white-space: pre-wrap;
-    padding: 15px 0;
 }
 
 #receive-text-dialog #text a {
@@ -887,12 +1080,11 @@ x-dialog .dialog-subheader {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
-    text-align: center;
+    border-radius: 8px;
 }
 
 #base64-paste-dialog .textarea {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -904,21 +1096,9 @@ x-dialog .dialog-subheader {
     color: var(--primary-color);
     font-weight: 700;
     text-transform: uppercase;
-    content: attr(placeholder);
+    white-space: pre-wrap;
 }
 
-#base64-paste-dialog button {
-    margin: auto;
-    border-radius: 8px;
-}
-
-#base64-paste-dialog button[close] {
-    margin-top: 20px;
-}
-
-#base64-paste-dialog button[close]:before {
-    border-radius: 8px;
-}
 
 /* Button */
 
@@ -935,12 +1115,13 @@ x-dialog .dialog-subheader {
     cursor: pointer;
     user-select: none;
     background: inherit;
-    color: var(--primary-color);
+    color: var(--accent-color);
     overflow: hidden;
 }
 
 .button[disabled] {
     color: #5B5B66;
+    cursor: not-allowed;
 }
 
 
@@ -974,6 +1155,11 @@ x-dialog .dialog-subheader {
     opacity: 0.1;
 }
 
+.button[selected],
+.icon-button[selected] {
+    opacity: 0.1;
+}
+
 #cancel-paste-mode {
     z-index: 2;
     margin: 0;
@@ -1016,8 +1202,7 @@ button::-moz-focus-inner {
     border: none;
     outline: none;
     padding: 16px 24px;
-    border-radius: 16px;
-    margin: 10px 0;
+    border-radius: 8px;
     font-size: 14px;
     font-family: inherit;
     background: #f1f3f4;
@@ -1040,11 +1225,14 @@ button::-moz-focus-inner {
     text-align: center;
 }
 
+#about header {
+    z-index: 1;
+}
+
 #about .fade-in {
     transition: opacity 300ms;
     will-change: opacity;
     transition-delay: 300ms;
-    z-index: 11;
     pointer-events: all;
 }
 
@@ -1058,12 +1246,23 @@ button::-moz-focus-inner {
     --icon-size: 96px;
 }
 
+#about .title-wrapper {
+    display: flex;
+    align-items: baseline;
+}
+
+#about .title-wrapper > div {
+    margin-left: 0.5em;
+}
+
 #about x-background {
     position: absolute;
-    top: calc(32px - 250px);
-    right: calc(32px - 250px);
-    width: 500px;
-    height: 500px;
+    --size: max(max(230vw, 230vh), calc(150vh + 150vw));
+    --size-half: calc(var(--size)/2);
+    top: calc(28px - var(--size-half));
+    right: calc(36px - var(--size-half));
+    width: var(--size);
+    height: var(--size);
     border-radius: 50%;
     background: var(--primary-color);
     transform: scale(0);
@@ -1077,7 +1276,7 @@ button::-moz-focus-inner {
 }
 
 #about:target x-background {
-    transform: scale(10);
+    transform: scale(1);
 }
 
 #about .row a {
@@ -1092,6 +1291,14 @@ button::-moz-focus-inner {
     align-self: end;
 }
 
+canvas.circles {
+    width: 100vw;
+    position: absolute;
+    z-index: -10;
+    top: 0;
+    left: 0;
+}
+
 /* Loading Indicator */
 
 .progress {
@@ -1182,11 +1389,11 @@ x-instructions:not([drop-peer]):not([drop-bg]):before {
 }
 
 x-instructions[drop-peer]:before {
-    content: "Release to send to peer";
+    content: attr(data-drop-peer);
 }
 
 x-instructions[drop-bg]:not([drop-peer]):before {
-    content: "Release to select recipient";
+    content: attr(data-drop-bg);
 }
 
 x-instructions p {
@@ -1200,40 +1407,15 @@ x-peers:empty~x-instructions {
 @media (hover: none) and (pointer: coarse) {
     x-peer {
         transform: scale(0.95);
-        padding: 4px 0;
+        padding: 4px;
     }
 }
 
-#websocket-fallback {
-    margin-left: 5px;
-    margin-right: 5px;
-    padding: 5px;
-    text-align: center;
-    opacity: 0.5;
-    transition: opacity 300ms;
-}
-
-#websocket-fallback>span {
-    margin: 2px;
-}
-
-#websocket-fallback > span > span {
-    border-bottom: solid 4px var(--ws-peer-color);
-}
-
 /* Responsive Styles */
-@media screen and (max-width: 360px) {
-    x-dialog x-paper {
-        padding: 15px;
-    }
-    x-paper > div:last-child {
-        margin: auto -15px -15px;
-    }
-}
 
 @media screen and (min-height: 800px) {
-    #websocket-fallback {
-        padding-bottom: 15px;
+    footer {
+        margin-bottom: 16px;
     }
 }
 
@@ -1252,8 +1434,9 @@ body {
     --text-color: 51,51,51;
     --bg-color: 250,250,250; /*rgb code*/
     --bg-color-test: 18,18,18;
-    --bg-color-secondary: #f1f3f4;
-    --border-color: #e7e8e8;
+    --bg-color-secondary: #e4e4e4;
+    --border-color: rgb(169, 169, 169);
+    --badge-color: #a5a5a5;
 }
 
 /* Dark theme colors */
@@ -1261,7 +1444,8 @@ body.dark-theme {
     --text-color: 238,238,238;
     --bg-color: 18,18,18; /*rgb code*/
     --bg-color-secondary: #333;
-    --border-color: #252525;
+    --border-color: rgb(238,238,238);
+    --badge-color: #717171;
 }
 
 /* Colored Elements */
@@ -1295,7 +1479,7 @@ x-dialog x-paper {
 
 /* Image/Video/Audio Preview */
 .file-preview {
-    margin: 10px -24px 40px -24px;
+    margin-bottom: 15px;
 }
 
 .file-preview:empty {
@@ -1319,15 +1503,17 @@ x-dialog x-paper {
         --text-color: 238,238,238;
         --bg-color: 18,18,18; /*rgb code*/
         --bg-color-secondary: #333;
-        --border-color: #252525;
+        --border-color: rgb(238,238,238);
+        --badge-color: #717171;
     }
 
     /* Override dark mode with light mode styles if the user decides to swap */
     body.light-theme {
         --text-color: 51,51,51;
         --bg-color: 250,250,250; /*rgb code*/
-        --bg-color-secondary: #f1f3f4;
-        --border-color: #e7e8e8;
+        --bg-color-secondary: #e4e4e4;
+        --border-color: rgb(169, 169, 169);
+        --badge-color: #a5a5a5;
    }
 }
 
@@ -1363,3 +1549,9 @@ x-dialog x-paper {
     background: #bfbfbf;
     border-radius: 4px;
 }
+
+::-moz-selection,
+::selection {
+    color: black;
+    background: var(--primary-color);
+}