increase version to v1.2.1

- give user option both options "share" and "download" on mobile
- add fallback if zipper fails that downloads files individually
- fix dequeuing of message queue not possible if sending peer has left

.github/workflows/github-image.yml

@@ -0,0 +1,51 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: GHCR Image CI
+
+on:
+  push:
+    tags:
+      - "v*.*.*"
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

README.md

@@ -47,11 +47,11 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * On iOS and Android the devices share menu is opened instead of downloading the files
 * Multiple files are transferred at once with an overall progress indicator
 
-### Share Files Directly From Share / Context Menu
-* [Share files directly from context menu on Windows](/docs/how-to.md#share-files-directly-from-context-menu-on-windows)
-* [Share directly from share menu on iOS](/docs/how-to.md#share-directly-from-share-menu-on-ios)
-* [Share directly from share menu on Android](/docs/how-to.md#share-directly-from-share-menu-on-android)
-
+### Send Files or Text Directly From Share Menu, Context Menu or CLI
+* [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)
+* [Send directly via command-line interface](/docs/how-to.md#send-directly-via-command-line-interface)
 
 ### Other changes
 * [Paste Mode](https://github.com/RobinLinus/snapdrop/pull/534)

docs/faq.md

@@ -33,12 +33,16 @@ iOS Shortcuts to the win:
 I created a simple iOS shortcut that takes your photos and saves them to your gallery:
 https://routinehub.co/shortcut/13988/
 
-### Is it possible to share files directly from the context / share menu?
-Yes it finally is!
-* [Share files directly from context menu on Windows](/docs/how-to.md#share-files-directly-from-context-menu-on-windows)
-* [Share directly from share menu on iOS](/docs/how-to.md#share-directly-from-share-menu-on-ios)
-* [Share directly from share menu on Android](/docs/how-to.md#share-directly-from-share-menu-on-android)
+### Is it possible to send files or text directly from the context or share menu?
+Yes, it finally is!
+* [Send files directly from context menu on Windows](/docs/how-to.md#send-files-directly-from-context-menu-on-windows)
+* [Send directly from share menu on iOS](/docs/how-to.md#send-directly-from-share-menu-on-ios)
+* [Send directly from share menu on Android](/docs/how-to.md#send-directly-from-share-menu-on-android)
 
+### Is it possible to send files or text directly via CLI?
+Yes, it is!
+
+* [Send directly from command-line interface](/docs/how-to.md#send-directly-via-command-line-interface)
 ### What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
 It uses a P2P connection if WebRTC is supported by the browser. WebRTC needs a Signaling Server, but it is only used to establish a connection and is not involved in the file transfer.
 

docs/host-your-own.md

@@ -1,32 +1,35 @@
 # Deployment Notes
 The easiest way to get PairDrop up and running is by using Docker.
 
-## Deployment with Docker from Docker Hub
+## Deployment with Docker
+
+### Docker Image from Docker Hub
 
 ```bash
 docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 lscr.io/linuxserver/pairdrop
 ```
+
 > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> To prevent bypassing the proxy and reach the docker container directly, `127.0.0.1` is specified in the run command.
+> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
 
-### Options / Flags
+#### Options / Flags
 Set options by using the following flags in the `docker run` command:
 
-#### Port
+##### Port
 ```
 -p 127.0.0.1:8080:3000
 ```
 > Specify the port used by the docker image 
 > - 3000 -> `-p 127.0.0.1:3000:3000`
 > - 8080 -> `-p 127.0.0.1:8080:3000`
-#### Rate limiting requests
+##### Rate limiting requests
 ```
 -e RATE_LIMIT=true
 ```
-> Limits clients to 100 requests per 5 min
+> Limits clients to 1000 requests per 5 min
 
-#### Websocket Fallback (for VPN)
+##### Websocket Fallback (for VPN)
 ```
 -e WS_FALLBACK=true
 ```
@@ -39,10 +42,18 @@ Set options by using the following flags in the `docker run` command:
 > Beware that the traffic routed via this fallback is readable by the server. Only ever use this on instances you can trust.
 > Additionally, beware that all traffic using this fallback debits the servers data plan.
 
-<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)).
+>
+> 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)
 
-## Deployment with Docker with self-built image
-### Build the image
+### Docker Image self-built
+#### Build the image
 ```bash
 docker build --pull . -f Dockerfile -t pairdrop
 ```
@@ -50,15 +61,45 @@ docker build --pull . -f Dockerfile -t pairdrop
 >
 > `--pull` ensures always the latest node image is used.
 
-### Run the image
+#### Run the image
 ```bash
 docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 -it pairdrop npm run start:prod
 ```
 > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> To prevent bypassing the proxy and reach the docker container directly, `127.0.0.1` is specified in the run command.
+> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
 >
-> To specify options replace `npm run start:prod` according to [the documentation above.](#options--flags)
+> To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1)
+
+<br>
+
+## Deployment with Docker Compose
+Here's an example docker-compose file:
+
+```yaml
+version: "2"
+services:
+    pairdrop:
+        image: lscr.io/linuxserver/pairdrop:latest
+        container_name: pairdrop
+        restart: unless-stopped
+        environment:
+            - PUID=1000 # UID to run the application as
+            - PGID=1000 # GID to run the application as
+            - WS_FALLBACK=false # Set to true to enable websocket fallback if the peer to peer WebRTC connection is not available to the client.
+            - RATE_LIMIT=false # Set to true to limit clients to 1000 requests per 5 min.
+            - TZ=Etc/UTC # Time Zone
+        ports:
+            - 127.0.0.1:3000:3000 # Web UI
+```
+
+Run the compose file with `docker compose up -d`.
+
+> You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
+>
+> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command.
+
+<br>
 
 ## Deployment with node
 
@@ -109,7 +150,7 @@ npm start -- --localhost-only
 > 
 > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)).
 >
-> Use this when deploying PairDrop with node to prevent bypassing the proxy and reach the docker container directly.
+> Use this when deploying PairDrop with node to prevent bypassing the proxy by reaching the docker container directly.
 
 #### Automatic restart on error
 ```bash
@@ -123,7 +164,7 @@ npm start -- --auto-restart
 ```bash
 npm start -- --rate-limit 
 ```
-> Limits clients to 100 requests per 5 min
+> Limits clients to 1000 requests per 5 min
 
 <br>
 

docs/how-to.md

@@ -1,5 +1,5 @@
 # How-To
-## Share files directly from context menu on Windows
+## Send files directly from context menu on Windows
 ### Registering to open files with PairDrop
 The [File Handling API](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files) is implemented
 
@@ -25,17 +25,58 @@ Outstandingly, it is also possible to send multiple files to PairDrop via the co
 
 [//]: # (Todo: add screenshots)
 
-## Share directly from share menu on iOS
+## 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 
 https://routinehub.co/shortcut/13990/
 
 [//]: # (Todo: add doku with screenshots)
 
 
-## Share directly from share menu on Android
+## Send directly from share menu on Android
 The [Web Share Target API](https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target) is implemented but not yet tested.
 When the PWA is installed, it should register itself to the share-menu of the device automatically.
 
-Please test this feature and create an issue if it does not work.
+This feature is still under development. Please test this feature and create an issue if it does not work.
+
+## Send directly via command-line interface
+Send files or text with PairDrop via command-line interface.
+
+This opens PairDrop in the default browser where you can choose the receiver.
+
+### Usage
+```bash
+$ pairdrop -h
+Current domain: https://pairdrop.net/
+
+Usage:
+Open PairDrop:          pairdrop
+Send files:             pairdrop file/directory
+Send text:              pairdrop -t "text"
+Specify domain:         pairdrop -d "https://pairdrop.net/"
+Show this help text:    pairdrop (-h|--help)
+```
+
+On Windows Command Prompt you need to use bash: `bash pairdrop -h`
+
+
+### Setup
+Download the bash file: [pairdrop-cli/pairdrop](/pairdrop-cli/pairdrop).
+
+#### Linux
+1. Put 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`
+
+#### Mac
+1. add bash file to `/usr/local/bin`
+
+#### 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...`
+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
 
 [< Back](/README.md)

index.js

@@ -1,6 +1,7 @@
 const process = require('process')
 const crypto = require('crypto')
 const {spawn} = require('child_process')
+const WebSocket = require('ws');
 
 // Handle SIGINT
 process.on('SIGINT', () => {
@@ -99,7 +100,6 @@ const { uniqueNamesGenerator, animals, colors } = require('unique-names-generato
 class PairDropServer {
 
     constructor() {
-        const WebSocket = require('ws');
         this._wss = new WebSocket.Server({ server });
         this._wss.on('connection', (socket, request) => this._onConnection(new Peer(socket, request)));
 
@@ -110,10 +110,10 @@ class PairDropServer {
     }
 
     _onConnection(peer) {
-        this._joinRoom(peer);
         peer.socket.on('message', message => this._onMessage(peer, message));
         peer.socket.onerror = e => console.error(e);
         this._keepAlive(peer);
+        this._joinRoom(peer);
 
         // send displayName
         this._send(peer, {
@@ -317,6 +317,10 @@ class PairDropServer {
     _joinRoom(peer, roomType = 'ip', roomSecret = '') {
         const room = roomType === 'ip' ? peer.ip : roomSecret;
 
+        if (this._rooms[room] && this._rooms[room][peer.id]) {
+            this._leaveRoom(peer, roomType, roomSecret);
+        }
+
         // if room doesn't exist, create it
         if (!this._rooms[room]) {
             this._rooms[room] = {};
@@ -341,10 +345,6 @@ class PairDropServer {
         // delete the peer
         delete this._rooms[room][peer.id];
 
-        if (roomType === 'ip') {
-            peer.socket.terminate();
-        }
-
         //if room is empty, delete the room
         if (!Object.keys(this._rooms[room]).length) {
             delete this._rooms[room];

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "pairdrop",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.0.0",
+      "version": "1.2.1",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",
         "express-rate-limit": "^6.7.0",
         "ua-parser-js": "^1.0.33",
         "unique-names-generator": "^4.3.0",
-        "ws": "^8.12.0"
+        "ws": "^8.12.1"
       },
       "engines": {
         "node": ">=15"
@@ -633,9 +633,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
-      "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.1.tgz",
+      "integrity": "sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -1095,9 +1095,9 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "ws": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz",
-      "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.1.tgz",
+      "integrity": "sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==",
       "requires": {}
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -14,7 +14,7 @@
     "express-rate-limit": "^6.7.0",
     "ua-parser-js": "^1.0.33",
     "unique-names-generator": "^4.3.0",
-    "ws": "^8.12.0"
+    "ws": "^8.12.1"
   },
   "engines": {
     "node": ">=15"

pairdrop-cli/pairdrop

@@ -0,0 +1,199 @@
+#!/bin/bash
+set -e
+
+############################################################
+# Help                                                     #
+############################################################
+help()
+{
+   # Display Help
+   echo "Send files or text with PairDrop via command-line interface."
+   echo "Current domain: ${DOMAIN}"
+   echo
+   echo "Usage:"
+   echo -e "Open PairDrop:\t\t$(basename "$0")"
+   echo -e "Send files:\t\t$(basename "$0") file/directory"
+   echo -e "Send text:\t\t$(basename "$0") -t \"text\""
+   echo -e "Specify domain:\t\t$(basename "$0") -d \"https://pairdrop.net/\""
+   echo -e "Show this help text:\t$(basename "$0") (-h|--help)"
+}
+
+openPairDrop()
+{
+  url="$DOMAIN"
+  if [[ -n $params ]];then
+    url="${url}?${params}"
+  fi
+  if [[ -n $hash ]];then
+    url="${url}#${hash}"
+  fi
+
+  echo "PairDrop is opening at $DOMAIN"
+  if [[ $OS == "Windows" ]];then
+    start "$url"
+  elif [[ $OS == "Mac" ]];then
+    open "$url"
+  elif [[ $OS == "WSL" || $OS == "WSL2" ]];then
+    powershell.exe /c "Start-Process ${url}"
+  else
+    xdg-open "$url"
+  fi
+  exit
+}
+
+setOs()
+{
+  unameOut=$(uname -a)
+  case "${unameOut}" in
+      *Microsoft*)     OS="WSL";; #must be first since Windows subsystem for linux will have Linux in the name too
+      *microsoft*)     OS="WSL2";; #WARNING: My v2 uses ubuntu 20.4 at the moment slightly different name may not always work
+      Linux*)          OS="Linux";;
+      Darwin*)         OS="Mac";;
+      CYGWIN*)         OS="Cygwin";;
+      MINGW*)          OS="Windows";;
+      *Msys)           OS="Windows";;
+      *)               OS="UNKNOWN:${unameOut}"
+  esac
+}
+
+specifyDomain()
+{
+  [[ ! $1 = http* ]] || [[ ! $1 = */ ]] && echo "Incorrect format. Specify domain like https://pairdrop.net/" && exit
+  echo "DOMAIN=${1}" > "$CONFIGPATH"
+  echo -e "Domain is now set to:\n$1\n"
+}
+
+sendText()
+{
+    params="base64text=hash"
+    hash=$(echo -n "${OPTARG}" | base64)
+
+    if [[ $(echo -n "$hash" | wc -m) -gt 32600 ]];then
+      params="base64text=paste"
+      if [[ $OS == "Windows" || $OS == "WSL" || $OS == "WSL2" ]];then
+        echo -n "$hash" | clip.exe
+      elif [[ $OS == "Mac" ]];then
+        echo -n "$hash" | pbcopy
+      else
+        (echo -n "$hash" | xclip) || echo "You need to install xclip for sending bigger files from cli"
+      fi
+      hash=
+    fi
+
+    openPairDrop
+    exit
+}
+
+sendFiles()
+{
+  params="base64zip=hash"
+  if [[ $1 == */ ]]; then
+    path="${1::-1}"
+  else
+    path=$1
+  fi
+  zipPath="${path}_pairdrop.zip"
+  zipPath=${zipPath// /_}
+
+  [[ -a "$zipPath" ]] && echo "Cannot overwrite $zipPath. Please remove first." && exit
+
+  if [[ -d $path ]]; then
+    zipPathTemp="temp_${zipPath}"
+    [[ -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"
+
+    hash=$(base64 -w 0 "$zipPathTemp")
+
+    # remove temporary temp file
+    rm "$zipPathTemp"
+  else
+    echo "Processing file..."
+
+    # Create zip file temporarily to send file
+    zip -q -b /tmp/ "$zipPath" "$path"
+
+    hash=$(base64 -w 0 "$zipPath")
+  fi
+
+  # remove temporary temp file
+  rm "$zipPath"
+
+  if [[ $(echo -n "$hash" | wc -m) -gt 32600 ]];then
+    params="base64zip=paste"
+    if [[ $OS == "Windows" || $OS == "WSL" || $OS == "WSL2" ]];then
+      echo -n "$hash" | clip.exe
+    elif [[ $OS == "Mac" ]];then
+      echo -n "$hash" | pbcopy
+    else
+      (echo -n "$hash" | xclip) || echo "You need to install xclip for sending bigger files from cli"
+    fi
+    hash=
+  fi
+
+  openPairDrop
+  exit
+}
+
+############################################################
+############################################################
+# Main program                                             #
+############################################################
+############################################################
+SCRIPTPATH="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
+
+pushd . > '/dev/null';
+SCRIPTPATH="${BASH_SOURCE[0]:-$0}";
+
+while [ -h "$SCRIPTPATH" ];
+do
+    cd "$( dirname -- "$SCRIPTPATH"; )";
+    SCRIPTPATH="$( readlink -f -- "$SCRIPTPATH"; )";
+done
+
+cd "$( dirname -- "$SCRIPTPATH"; )" > '/dev/null';
+SCRIPTPATH="$( pwd; )";
+popd  > '/dev/null';
+
+CONFIGPATH="${SCRIPTPATH}/.pairdrop-cli-config"
+
+[ ! -f "$CONFIGPATH" ] &&
+ specifyDomain "https://pairdrop.net/" &&
+ [ ! -f "$CONFIGPATH" ] &&
+ echo "Could not create config file. Add 'DOMAIN=https://pairdrop.net/' to a file called .pairdrop-cli-config in the same file as this 'pairdrop' bash file"
+
+[ ! -f "$CONFIGPATH" ] || export "$(grep -v '^#' "$CONFIGPATH" | xargs)"
+
+setOs
+############################################################
+# Process the input options. Add options as needed.        #
+############################################################
+# Get the options
+# open PairDrop if no options are given
+[[ $# -eq 0 ]] && openPairDrop && exit
+
+#  display help and exit if first argument is "--help" or more than 2 arguments are given
+[ "$1" == "--help" ] || [[ $# -gt 2 ]] && help && exit
+
+while getopts "d:ht:*" option; do
+    case $option in
+      d) # specify domain
+        specifyDomain "$2"
+        exit;;
+      t) # Send text
+        sendText
+        exit;;
+      h | ?) # display help and exit
+        help
+        exit;;
+      esac
+done
+
+# Send file(s)
+# display help and exit if 2 arguments are given or if file does not exist
+[[ $# -eq 2 ]] || [[ ! -a $1 ]] && help && exit
+
+sendFiles "$1"

public/index.html

@@ -69,162 +69,176 @@
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
         </a>
+        <a id="cancel-paste-mode" class="button" hidden>Done</a>
     </header>
-    <a id="cancelPasteModeBtn" class="button" close hidden>Done</a>
-    <!-- Peers -->
-    <x-peers class="center"></x-peers>
-    <x-no-peers>
-        <h2>Open PairDrop on other devices to send files</h2>
-        <div>Pair devices to be discoverable on other networks</div>
-    </x-no-peers>
-    <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
-        <p id="pasteFilename"></p>
-    </x-instructions>
+    <!-- Center -->
+    <div id="center">
+        <!-- Peers -->
+        <div class="x-peers-filler"></div>
+        <x-peers class="center"></x-peers>
+        <x-no-peers>
+            <h2>Open PairDrop on other devices to send files</h2>
+            <div>Pair devices to be discoverable on other networks</div>
+        </x-no-peers>
+        <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
+            <p id="paste-filename"></p>
+        </x-instructions>
+    </div>
     <!-- Footer -->
     <footer class="column">
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="displayName" placeholder="&nbsp;"></div>
+        <div id="display-name" placeholder="&nbsp;"></div>
         <div class="font-body2">
             You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
             <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
         </div>
     </footer>
     <!-- Pair Device Dialog -->
-    <x-dialog id="pairDeviceDialog">
+    <x-dialog id="pair-device-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Pair Devices</h2>
-                    <div class="center" id="roomKeyQrCode"></div>
-                    <h1 class="center" id="roomKey">000 000</h1>
-                    <div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
+                    <div id="room-key-qr-code" class="center"></div>
+                    <h1 id="room-key" class="center">000 000</h1>
+                    <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
                     <hr>
-                    <div id="keyInputContainer">
-                        <input type="tel" id="char0" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" id="char1" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char2" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char3" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char4" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char5" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                    <div id="key-input-container">
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
                     </div>
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit" disabled>Pair</button>
-                        <div class="separator"></div>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Clear Devices Dialog -->
-    <x-dialog id="clearDevicesDialog">
+    <x-dialog id="clear-devices-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Unpair Devices</h2>
                     <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit">Unpair Devices</button>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Request Dialog -->
-    <x-dialog id="receiveRequestDialog">
+    <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center">PairDrop</h2>
-                <div class="text-center file-description">
+                <h2 class="center"></h2>
+                <div class="center column file-description">
                     <div>
-                        <span id="requestingPeerDisplayName"></span>
+                        <span class="display-name"></span>
                         <span>would like to share</span>
                     </div>
-                    <div class="row" id="fileName">
-                        <span id="fileStem"></span>
-                        <span id="fileExtension"></span>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
                     </div>
-                    <div class="row">
-                        <span id="fileOther"></span>
+                    <div class="row file-other">
                     </div>
+                    <div class="row font-body2 file-size"></div>
                 </div>
-                <div class="font-body2 text-center file-size"></div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button>
-                    <div class="separator"></div>
-                    <button class="button" id="declineRequest" title="ESCAPE">Decline</button>
+                <div class="center row-reverse">
+                    <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
+                    <button id="decline-request" class="button" title="ESCAPE">Decline</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Receive File Dialog -->
-    <x-dialog id="receiveFileDialog">
+    <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center" id="receiveTitle"></h2>
-                <div class="text-center file-description"></div>
-                <div class="font-body2 text-center file-size"></div>
+                <h2 class="center"></h2>
+                <div class="center column file-description">
+                    <div>
+                        <span class="display-name"></span>
+                        <span>has sent</span>
+                    </div>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
+                    </div>
+                    <div class="row file-other"></div>
+                    <div class="row font-body2 file-size"></div>
+                </div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <a class="button" id="shareOrDownload" autofocus></a>
-                    <div class="separator"></div>
+                <div class="center row-reverse">
+                    <button id="share-btn" class="button" autofocus hidden>Share</button>
+                    <button id="download-btn" class="button" autofocus>Download</button>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Send Text Dialog -->
-    <x-dialog id="sendTextDialog">
+    <x-dialog id="send-text-dialog">
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2>PairDrop - Send a Message</h2>
-                    <div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
-                    <div class="row-reverse">
+                    <h2 class="text-center">Send Message</h2>
+                    <div class="dialog-subheader text-center">
+                        <span>Send a Message to</span>
+                        <span class="display-name"></span>
+                    </div>
+                    <div class="row-separator"></div>
+                    <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                    <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <div class="separator"></div>
-                        <a class="button" title="ESCAPE" close>Cancel</a>
+                        <button class="button" title="ESCAPE" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Text Dialog -->
-    <x-dialog id="receiveTextDialog">
+    <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2>PairDrop - Message Received</h2>
-                <div id="receiveTextDescriptionContainer">
-                    <span id="receiveTextPeerDisplayName"></span>
-                    <span>sent the following message:</span>
+                <h2 class="text-center">Message Received</h2>
+                <div class="text-center dialog-subheader">
+                    <span class="display-name"></span>
+                    <span>has sent:</span>
                 </div>
                 <div class="row-separator"></div>
                 <div id="text"></div>
-                <div class="row-reverse">
-                    <button class="button" id="copy" title="CTRL/⌘ + C">Copy</button>
-                    <div class="separator"></div>
-                    <button class="button" id="close" title="ESCAPE">Close</button>
+                <div class="center row-reverse">
+                    <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
+                    <button id="close" class="button" title="ESCAPE">Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
-    <!-- base64ZipDialog Dialog -->
-    <x-dialog id="base64ZipDialog">
+    <!-- base64 Paste Dialog -->
+    <x-dialog id="base64-paste-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <button class="button center" id="base64ZipPasteBtn" title="Paste">Tap here to paste files</button>
+                <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
                 <button class="button center" close>Close</button>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Toast -->
     <div class="toast-container full center">
-        <x-toast class="row" shadow="1" id="toast"></x-toast>
+        <x-toast id="toast" class="row" shadow="1"></x-toast>
     </div>
     <!-- About Page -->
     <x-about id="about" class="full center column">

public/scripts/network.js

@@ -320,7 +320,6 @@ class Peer {
             return;
         }
         message = JSON.parse(message);
-        console.log('RTC:', message);
         switch (message.type) {
             case 'request':
                 this._onFilesTransferRequest(message);
@@ -441,7 +440,7 @@ class Peer {
         if (!this._requestAccepted.header.length) {
             this._busy = false;
             Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
-            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, request: this._requestAccepted});
+            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
             this._filesReceived = [];
             this._requestAccepted = null;
         }
@@ -492,6 +491,7 @@ class RTCPeer extends Peer {
 
     constructor(serverConnection, peerId, roomType, roomSecret) {
         super(serverConnection, peerId, roomType, roomSecret);
+        this.rtcSupported = true;
         if (!peerId) return; // we will listen for a caller
         this._connect(peerId, true);
     }
@@ -568,6 +568,14 @@ class RTCPeer extends Peer {
         this._channel = channel;
     }
 
+    _onMessage(message) {
+        if (typeof message === 'string') {
+            message = JSON.parse(message);
+            console.log('RTC:', message);
+        }
+        super._onMessage(message);
+    }
+
     getConnectionHash() {
         const localDescriptionLines = this._conn.localDescription.sdp.split("\r\n");
         const remoteDescriptionLines = this._conn.remoteDescription.sdp.split("\r\n");

public/scripts/ui.js

@@ -1,6 +1,5 @@
 const $ = query => document.getElementById(query);
 const $$ = query => document.body.querySelector(query);
-const isURL = text => /^(https?:\/\/|www)[^\s]+$/g.test(text.toLowerCase());
 window.isProductionEnvironment = !window.location.host.startsWith('localhost');
 window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 window.android = /android/i.test(navigator.userAgent);
@@ -10,7 +9,7 @@ window.pasteMode.activated = false;
 // set display name
 Events.on('display-name', e => {
     const me = e.detail.message;
-    const $displayName = $('displayName')
+    const $displayName = $('display-name')
     $displayName.textContent = 'You are known as ' + me.displayName;
     $displayName.title = me.deviceName;
 });
@@ -28,7 +27,7 @@ class PeersUI {
         Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text));
         this.peers = {};
 
-        this.$cancelPasteModeBtn = $('cancelPasteModeBtn');
+        this.$cancelPasteModeBtn = $('cancel-paste-mode');
         this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
 
         Events.on('dragover', e => this._onDragOver(e));
@@ -38,8 +37,12 @@ class PeersUI {
         Events.on('drop', e => this._onDrop(e));
         Events.on('keydown', e => this._onKeyDown(e));
 
+        this.$xPeers = $$('x-peers');
         this.$xNoPeers = $$('x-no-peers');
         this.$xInstructions = $$('x-instructions');
+
+        Events.on('peer-added', _ => this.evaluateOverflowing());
+        Events.on('bg-resize', _ => this.evaluateOverflowing());
     }
 
     _onKeyDown(e) {
@@ -53,11 +56,11 @@ class PeersUI {
     }
 
     _joinPeer(peer, roomType, roomSecret) {
-        peer.roomType = roomType;
+        peer.roomTypes = [roomType];
         peer.roomSecret = roomSecret;
         if (this.peers[peer.id]) {
-            this.peers[peer.id].roomType = peer.roomType;
-            this._redrawPeer(peer);
+            if (!this.peers[peer.id].roomTypes.includes(roomType)) this.peers[peer.id].roomTypes.push(roomType);
+            this._redrawPeer(this.peers[peer.id]);
             return; // peer already exists
         }
         this.peers[peer.id] = peer;
@@ -72,7 +75,15 @@ class PeersUI {
         const peerNode = $(peer.id);
         if (!peerNode) return;
         peerNode.classList.remove('type-ip', 'type-secret');
-        peerNode.classList.add(`type-${peer.roomType}`)
+        peer.roomTypes.forEach(roomType => peerNode.classList.add(`type-${roomType}`));
+    }
+
+    evaluateOverflowing() {
+        if (this.$xPeers.clientHeight < this.$xPeers.scrollHeight) {
+            this.$xPeers.classList.add('overflowing');
+        } else {
+            this.$xPeers.classList.remove('overflowing');
+        }
     }
 
     _onPeers(msg) {
@@ -83,6 +94,7 @@ class PeersUI {
         const $peer = $(peerId);
         if (!$peer) return;
         $peer.remove();
+        this.evaluateOverflowing();
         if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
     }
 
@@ -143,7 +155,7 @@ class PeersUI {
                 descriptor = `${files[0].name} and ${files.length-1} other files`;
                 noPeersMessage = `Open PairDrop on other devices to send<br>${descriptor}`;
             } else {
-                descriptor = "pasted text";
+                descriptor = "shared text";
                 noPeersMessage = `Open PairDrop on other devices to send<br>${descriptor}`;
             }
 
@@ -213,6 +225,18 @@ class PeersUI {
 
 class PeerUI {
 
+    constructor(peer, connectionHash) {
+        this._peer = peer;
+        this._connectionHash = connectionHash;
+        this._initDom();
+        this._bindListeners();
+
+        $$('x-peers').appendChild(this.$el)
+        Events.fire('peer-added');
+        this.$xInstructions = $$('x-instructions');
+        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
+    }
+
     html() {
         let title;
         let input = '';
@@ -225,17 +249,24 @@ class PeerUI {
         this.$el.innerHTML = `
             <label class="column center" title="${title}">
                 ${input}
-                <x-icon shadow="1">
-                    <svg class="icon"><use xlink:href="#"/></svg>
+                <x-icon>
+                    <div class="icon-wrapper" shadow="1">
+                        <svg class="icon"><use xlink:href="#"/></svg>
+                    </div>
+                    <div class="highlight-wrapper center">
+                        <div class="highlight" shadow="1"></div>
+                    </div>
                 </x-icon>
                 <div class="progress">
                   <div class="circle"></div>
                   <div class="circle right"></div>
                 </div>
-                <div class="name font-subheading"></div>
-                <div class="device-name font-body2"></div>
-                <div class="status font-body2"></div>
-                <span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span>
+                <div class="device-descriptor">
+                    <div class="name font-subheading"></div>
+                    <div class="device-name font-body2"></div>
+                    <div class="status font-body2"></div>
+                    <span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span>
+                </div>
             </label>`;
 
         this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
@@ -245,23 +276,12 @@ class PeerUI {
             this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
     }
 
-    constructor(peer, connectionHash) {
-        this._peer = peer;
-        this._roomType = peer.roomType;
-        this._roomSecret = peer.roomSecret;
-        this._connectionHash = connectionHash;
-        this._initDom();
-        this._bindListeners();
-        $$('x-peers').appendChild(this.$el);
-        this.$xInstructions = $$('x-instructions');
-        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
-    }
-
     _initDom() {
         this.$el = document.createElement('x-peer');
         this.$el.id = this._peer.id;
         this.$el.ui = this;
-        this.$el.classList.add(`type-${this._roomType}`);
+        this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`));
+        this.$el.classList.add('center');
         this.html();
 
         this._callbackInput = e => this._onFilesSelected(e)
@@ -272,7 +292,7 @@ class PeerUI {
         this._callbackDragLeave = e => this._onDragEnd(e)
         this._callbackDragOver = e => this._onDragOver(e)
         this._callbackContextMenu = e => this._onRightClick(e)
-        this._callbackTouchStart = _ => this._onTouchStart()
+        this._callbackTouchStart = e => this._onTouchStart(e)
         this._callbackTouchEnd = e => this._onTouchEnd(e)
         this._callbackPointerDown = e => this._onPointerDown(e)
         // PasteMode
@@ -393,21 +413,28 @@ class PeerUI {
 
     _onRightClick(e) {
         e.preventDefault();
-        Events.fire('text-recipient', this._peer.id);
+        Events.fire('text-recipient', {
+            peerId: this._peer.id,
+            deviceName: e.target.closest('x-peer').querySelector('.name').innerText
+        });
     }
 
-    _onTouchStart() {
+    _onTouchStart(e) {
         this._touchStart = Date.now();
-        this._touchTimer = setTimeout(_ => this._onTouchEnd(), 610);
+        this._touchTimer = setTimeout(_ => this._onTouchEnd(e), 610);
     }
 
     _onTouchEnd(e) {
         if (Date.now() - this._touchStart < 500) {
             clearTimeout(this._touchTimer);
-        } else { // this was a long tap
-            if (e) e.preventDefault();
-            Events.fire('text-recipient', this._peer.id);
+        } else if (this._touchTimer) { // this was a long tap
+            e.preventDefault();
+            Events.fire('text-recipient', {
+                peerId: this._peer.id,
+                deviceName: e.target.closest('x-peer').querySelector('.name').innerText
+            });
         }
+        this._touchTimer = null;
     }
 }
 
@@ -445,10 +472,14 @@ class Dialog {
 class ReceiveDialog extends Dialog {
     constructor(id) {
         super(id);
-
-        this.$fileDescriptionNode = this.$el.querySelector('.file-description');
-        this.$fileSizeNode = this.$el.querySelector('.file-size');
-        this.$previewBox = this.$el.querySelector('.file-preview')
+        this.$fileDescription = this.$el.querySelector('.file-description');
+        this.$displayName = this.$el.querySelector('.display-name');
+        this.$fileStem = this.$el.querySelector('.file-stem');
+        this.$fileExtension = this.$el.querySelector('.file-extension');
+        this.$fileOther = this.$el.querySelector('.file-other');
+        this.$fileSize = this.$el.querySelector('.file-size');
+        this.$previewBox = this.$el.querySelector('.file-preview');
+        this.$receiveTitle = this.$el.querySelector('h2:first-of-type');
     }
 
     _formatFileSize(bytes) {
@@ -464,31 +495,52 @@ class ReceiveDialog extends Dialog {
             return bytes + ' Bytes';
         }
     }
+
+    _parseFileData(displayName, files, imagesOnly, totalSize) {
+        if (files.length > 1) {
+            let fileOtherText = ` and ${files.length - 1} other `;
+            if (files.length === 2) {
+                fileOtherText += imagesOnly ? 'image' : 'file';
+            } else {
+                fileOtherText += imagesOnly ? 'images' : 'files';
+            }
+            this.$fileOther.innerText = fileOtherText;
+        }
+
+        const fileName = files[0].name;
+        const fileNameSplit = fileName.split('.');
+        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
+        this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length);
+        this.$fileExtension.innerText = fileExtension;
+        this.$displayName.innerText = displayName;
+        this.$fileSize.innerText = this._formatFileSize(totalSize);
+    }
 }
 
 class ReceiveFileDialog extends ReceiveDialog {
 
     constructor() {
-        super('receiveFileDialog');
+        super('receive-file-dialog');
 
-        this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload');
-        this.$receiveTitleNode = this.$el.querySelector('#receiveTitle')
+        this.$downloadBtn = this.$el.querySelector('#download-btn');
+        this.$shareBtn = this.$el.querySelector('#share-btn');
 
-        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
+        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.imagesOnly, e.detail.totalSize));
         this._filesQueue = [];
     }
 
-    _onFilesReceived(sender, files, request) {
-        this._nextFiles(sender, files, request);
+    _onFilesReceived(sender, files, imagesOnly, totalSize) {
+        const displayName = $(sender).ui._displayName()
+        this._filesQueue.push({peer: sender, displayName: displayName, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        this._nextFiles();
         window.blop.play();
     }
 
-    _nextFiles(sender, nextFiles, nextRequest) {
-        if (nextFiles) this._filesQueue.push({peerId: sender, files: nextFiles, request: nextRequest});
+    _nextFiles() {
         if (this._busy) return;
         this._busy = true;
-        const {peerId, files, request} = this._filesQueue.shift();
-        this._displayFiles(peerId, files, request);
+        const {peer, displayName, files, imagesOnly, totalSize} = this._filesQueue.shift();
+        this._displayFiles(peer, displayName, files, imagesOnly, totalSize);
     }
 
     _dequeueFile() {
@@ -519,7 +571,6 @@ class ReceiveFileDialog extends ReceiveDialog {
                 let element = document.createElement(previewElement[mime]);
                 element.src = URL.createObjectURL(file);
                 element.controls = true;
-                element.classList.add('element-preview');
                 element.onload = _ => {
                     this.$previewBox.appendChild(element);
                     resolve(true)
@@ -530,30 +581,32 @@ class ReceiveFileDialog extends ReceiveDialog {
         });
     }
 
-    async _displayFiles(peerId, files, request) {
-        if (this.continueCallback) this.$shareOrDownloadBtn.removeEventListener("click", this.continueCallback);
-
-        let url;
-        let title;
-        let filenameDownload;
-
-        let descriptor = request.imagesOnly ? "Image" : "File";
-
-        let size = this._formatFileSize(request.totalSize);
-        let description = files[0].name;
-
-        let shareInsteadOfDownload = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
+    async _displayFiles(peerId, displayName, files, imagesOnly, totalSize) {
+        this._parseFileData(displayName, files, imagesOnly, totalSize);
 
+        let descriptor, url, filenameDownload;
         if (files.length === 1) {
-            url = URL.createObjectURL(files[0])
-            title = `PairDrop - ${descriptor} Received`
-            filenameDownload = files[0].name;
+            descriptor = imagesOnly ? 'Image' : 'File';
         } else {
-            title = `PairDrop - ${files.length} ${descriptor}s Received`
-            description += ` and ${files.length-1} other ${descriptor.toLowerCase()}`;
-            if(files.length>2) description += "s";
+            descriptor = imagesOnly ? 'Images' : 'Files';
+        }
+        this.$receiveTitle.innerText = `${descriptor} Received`;
 
-            if(!shareInsteadOfDownload) {
+        const canShare = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
+        if (canShare) {
+            this.$shareBtn.removeAttribute('hidden');
+            this.$shareBtn.onclick = _ => {
+                navigator.share({files: files})
+                    .catch(err => {
+                        console.error(err);
+                    });
+            }
+        }
+
+        let downloadZipped = false;
+        if (files.length > 1) {
+            downloadZipped = true;
+            try {
                 let bytesCompleted = 0;
                 zipper.createNewZipWriter();
                 for (let i=0; i<files.length; i++) {
@@ -561,7 +614,7 @@ class ReceiveFileDialog extends ReceiveDialog {
                         onprogress: (progress) => {
                             Events.fire('set-progress', {
                                 peerId: peerId,
-                                progress: (bytesCompleted + progress) / request.totalSize,
+                                progress: (bytesCompleted + progress) / totalSize,
                                 status: 'process'
                             })
                         }
@@ -581,39 +634,58 @@ class ReceiveFileDialog extends ReceiveDialog {
                 let minutes = now.getMinutes().toString();
                 minutes = minutes.length < 2 ? "0" + minutes : minutes;
                 filenameDownload = `PairDrop_files_${year+month+date}_${hours+minutes}.zip`;
+            } catch (e) {
+                console.error(e);
+                downloadZipped = false;
             }
         }
 
-        this.$receiveTitleNode.textContent = title;
-        this.$fileDescriptionNode.textContent = description;
-        this.$fileSizeNode.textContent = size;
-
-        if (shareInsteadOfDownload) {
-            this.$shareOrDownloadBtn.innerText = "Share";
-            this.continueCallback = async _ => {
-                navigator.share({
-                        files: files
-                    }).catch(err => console.error(err));
+        this.$downloadBtn.innerText = "Download";
+        this.$downloadBtn.onclick = _ => {
+            if (downloadZipped) {
+                let tmpZipBtn = document.createElement("a");
+                tmpZipBtn.download = filenameDownload;
+                tmpZipBtn.href = url;
+                tmpZipBtn.click();
+            } else {
+                this._downloadFilesIndividually(files);
             }
-            this.$shareOrDownloadBtn.addEventListener("click", this.continueCallback);
-        } else {
-            this.$shareOrDownloadBtn.innerText = "Download";
-            this.$shareOrDownloadBtn.download = filenameDownload;
-            this.$shareOrDownloadBtn.href = url;
-        }
+
+            if (!canShare) {
+                this.$downloadBtn.innerText = "Download again";
+            }
+            Events.fire('notify-user', `${descriptor} downloaded successfully`);
+            this.$downloadBtn.style.pointerEvents = "none";
+            setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000);
+        };
 
         this.createPreviewElement(files[0]).finally(_ => {
-            document.title = `PairDrop - ${files.length} Files received`;
+            document.title = files.length === 1
+                ? 'File received - PairDrop'
+                : `(${files.length}) Files received - PairDrop`;
             document.changeFavicon("images/favicon-96x96-notification.png");
-            this.show();
             Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
-            this.$shareOrDownloadBtn.click();
+            this.show();
+
+            if (canShare) {
+                this.$shareBtn.click();
+            } else {
+                this.$downloadBtn.click();
+            }
         }).catch(r => console.error(r));
     }
 
+    _downloadFilesIndividually(files) {
+        let tmpBtn = document.createElement("a");
+        for (let i=0; i<files.length; i++) {
+            tmpBtn.download = files[i].name;
+            tmpBtn.href = URL.createObjectURL(files[i]);
+            tmpBtn.click();
+        }
+    }
+
     hide() {
-        this.$shareOrDownloadBtn.removeAttribute('href');
-        this.$shareOrDownloadBtn.removeAttribute('download');
+        this.$shareBtn.setAttribute('hidden', '');
         this.$previewBox.innerHTML = '';
         super.hide();
         this._dequeueFile();
@@ -623,15 +695,10 @@ class ReceiveFileDialog extends ReceiveDialog {
 class ReceiveRequestDialog extends ReceiveDialog {
 
     constructor() {
-        super('receiveRequestDialog');
+        super('receive-request-dialog');
 
-        this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName');
-        this.$fileStemNode = this.$el.querySelector('#fileStem');
-        this.$fileExtensionNode = this.$el.querySelector('#fileExtension');
-        this.$fileOtherNode = this.$el.querySelector('#fileOther');
-
-        this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest');
-        this.$declineRequestBtn = this.$el.querySelector('#declineRequest');
+        this.$acceptRequestBtn = this.$el.querySelector('#accept-request');
+        this.$declineRequestBtn = this.$el.querySelector('#decline-request');
         this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
         this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false));
 
@@ -661,32 +728,18 @@ class ReceiveRequestDialog extends ReceiveDialog {
     _showRequestDialog(request, peerId) {
         this.correspondingPeerId = peerId;
 
-        this.$requestingPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
-
-        const fileName = request.header[0].name;
-        const fileNameSplit = fileName.split('.');
-        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
-        this.$fileStemNode.innerText = fileName.substring(0, fileName.length - fileExtension.length);
-        this.$fileExtensionNode.innerText = fileExtension
-
-        if (request.header.length >= 2) {
-            let fileOtherText = ` and ${request.header.length - 1} other `;
-            fileOtherText += request.imagesOnly ? 'image' : 'file';
-            if (request.header.length > 2) fileOtherText += "s";
-            this.$fileOtherNode.innerText = fileOtherText;
-        }
-
-        this.$fileSizeNode.innerText = this._formatFileSize(request.totalSize);
+        const displayName = $(peerId).ui._displayName();
+        this._parseFileData(displayName, request.header, request.imagesOnly, request.totalSize);
 
         if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
             let element = document.createElement('img');
             element.src = request.thumbnailDataUrl;
-            element.classList.add('element-preview');
-
             this.$previewBox.appendChild(element)
         }
 
-        document.title = 'PairDrop - File Transfer Requested';
+        this.$receiveTitle.innerText = `${request.imagesOnly ? 'Image' : 'File'} Transfer Request`
+
+        document.title = `${request.imagesOnly ? 'Image' : 'File'} Transfer Requested - PairDrop`;
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
@@ -712,16 +765,16 @@ class ReceiveRequestDialog extends ReceiveDialog {
 
 class PairDeviceDialog extends Dialog {
     constructor() {
-        super('pairDeviceDialog');
+        super('pair-device-dialog');
         $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
-        this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input');
+        this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
         this.$submitBtn = this.$el.querySelector('button[type="submit"]');
-        this.$roomKey = this.$el.querySelector('#roomKey');
-        this.$qrCode = this.$el.querySelector('#roomKeyQrCode');
+        this.$roomKey = this.$el.querySelector('#room-key');
+        this.$qrCode = this.$el.querySelector('#room-key-qr-code');
         this.$clearSecretsBtn = $('clear-pair-devices');
         this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
         let createJoinForm = this.$el.querySelector('form');
-        createJoinForm.addEventListener('submit', _ => this._onSubmit());
+        createJoinForm.addEventListener('submit', e => this._onSubmit(e));
 
         this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel())
         this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e)));
@@ -791,7 +844,7 @@ class PairDeviceDialog extends Dialog {
     }
 
     evaluateRoomKeyChars() {
-        if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) {
+        if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) {
             this.$submitBtn.setAttribute("disabled", "");
         } else {
             this.inputRoomKey = "";
@@ -800,7 +853,7 @@ class PairDeviceDialog extends Dialog {
             })
             this.$submitBtn.removeAttribute("disabled");
             if (document.activeElement === this.$inputRoomKeyChars[5]) {
-                this._onSubmit();
+                this._pairDeviceJoin(this.inputRoomKey);
             }
         }
     }
@@ -831,11 +884,11 @@ class PairDeviceDialog extends Dialog {
         // Display the QR code for the url
         const qr = new QRCode({
             content: this._getShareRoomURL(),
-            width: 80,
-            height: 80,
+            width: 150,
+            height: 150,
             padding: 0,
             background: "transparent",
-            color: getComputedStyle(document.body).getPropertyValue('--text-color'),
+            color: `rgb(var(--text-color))`,
             ecl: "L",
             join: true
         });
@@ -850,7 +903,8 @@ class PairDeviceDialog extends Dialog {
         return url.href;
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
         this._pairDeviceJoin(this.inputRoomKey);
     }
 
@@ -927,23 +981,29 @@ class PairDeviceDialog extends Dialog {
                 this.$clearSecretsBtn.setAttribute('hidden', '');
                 this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
             }
+            Events.fire('bg-resize');
         }).catch(_ => PersistentStorage.logBrowserNotCapable());
     }
 }
 
 class ClearDevicesDialog extends Dialog {
     constructor() {
-        super('clearDevicesDialog');
+        super('clear-devices-dialog');
         $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
         let clearDevicesForm = this.$el.querySelector('form');
-        clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
+        clearDevicesForm.addEventListener('submit', e => this._onSubmit(e));
     }
 
     _onClearPairDevices() {
         this.show();
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
+        this._clearRoomSecrets();
+    }
+
+    _clearRoomSecrets() {
         Events.fire('clear-room-secrets');
         this.hide();
     }
@@ -951,12 +1011,13 @@ class ClearDevicesDialog extends Dialog {
 
 class SendTextDialog extends Dialog {
     constructor() {
-        super('sendTextDialog');
-        Events.on('text-recipient', e => this._onRecipient(e.detail));
-        this.$text = this.$el.querySelector('#textInput');
+        super('send-text-dialog');
+        Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
+        this.$text = this.$el.querySelector('#text-input');
+        this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
-        this.$form.addEventListener('submit', _ => this._send());
+        this.$form.addEventListener('submit', e => this._onSubmit(e));
         this.$text.addEventListener('input', e => this._onChange(e));
         Events.on("keydown", e => this._onKeyDown(e));
     }
@@ -984,8 +1045,9 @@ class SendTextDialog extends Dialog {
         }
     }
 
-    _onRecipient(peerId) {
+    _onRecipient(peerId, deviceName) {
         this.correspondingPeerId = peerId;
+        this.$peerDisplayName.innerText = deviceName;
         this.show();
 
         const range = document.createRange();
@@ -997,6 +1059,11 @@ class SendTextDialog extends Dialog {
         sel.addRange(range);
     }
 
+    _onSubmit(e) {
+        e.preventDefault();
+        this._send();
+    }
+
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
@@ -1009,7 +1076,7 @@ class SendTextDialog extends Dialog {
 
 class ReceiveTextDialog extends Dialog {
     constructor() {
-        super('receiveTextDialog');
+        super('receive-text-dialog');
         Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId));
         this.$text = this.$el.querySelector('#text');
         this.$copy = this.$el.querySelector('#copy');
@@ -1020,7 +1087,7 @@ class ReceiveTextDialog extends Dialog {
 
         Events.on("keydown", e => this._onKeyDown(e));
 
-        this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName');
+        this.$displayNameNode = this.$el.querySelector('.display-name');
         this._receiveTextQueue = [];
     }
 
@@ -1038,6 +1105,7 @@ class ReceiveTextDialog extends Dialog {
     _onText(text, peerId) {
         window.blop.play();
         this._receiveTextQueue.push({text: text, peerId: peerId});
+        this._setDocumentTitleMessages();
         if (this.$el.attributes["show"]) return;
         this._dequeueRequests();
     }
@@ -1049,23 +1117,35 @@ class ReceiveTextDialog extends Dialog {
     }
 
     _showReceiveTextDialog(text, peerId) {
-        this.$receiveTextPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
+        this.$displayNameNode.innerText = $(peerId).ui._displayName();
 
-        if (isURL(text)) {
-            const $a = document.createElement('a');
-            $a.href = text;
-            $a.target = '_blank';
-            $a.textContent = text;
-            this.$text.innerHTML = '';
-            this.$text.appendChild($a);
-        } else {
-            this.$text.textContent = text;
+        this.$text.innerText = text;
+        this.$text.classList.remove('text-center');
+
+        // Beautify text if text is short
+        if (text.length < 2000) {
+            // replace urls with actual links
+            this.$text.innerHTML = this.$text.innerHTML.replace(/((https?:\/\/|www)[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)/g, url => {
+                return `<a href="${url}" target="_blank">${url}</a>`;
+            });
+
+            if (!/\s/.test(text)) {
+                this.$text.classList.add('text-center');
+            }
         }
-        document.title = 'PairDrop - Message Received';
+
+        this._setDocumentTitleMessages();
+
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
 
+    _setDocumentTitleMessages() {
+        document.title = !this._receiveTextQueue.length
+            ? 'Message Received - PairDrop'
+            : `(${this._receiveTextQueue.length + 1}) Messages Received - PairDrop`;
+    }
+
     async _onCopy() {
         await navigator.clipboard.writeText(this.$text.textContent);
         Events.fire('notify-user', 'Copied to clipboard');
@@ -1081,67 +1161,135 @@ class ReceiveTextDialog extends Dialog {
 class Base64ZipDialog extends Dialog {
 
     constructor() {
-        super('base64ZipDialog');
+        super('base64-paste-dialog');
         const urlParams = new URL(window.location).searchParams;
-        const base64Zip = urlParams.get('base64zip');
         const base64Text = urlParams.get('base64text');
-        this.$pasteBtn = this.$el.querySelector('#base64ZipPasteBtn')
-        this.$pasteBtn.addEventListener('click', _ => this.processClipboard())
+        const base64Zip = urlParams.get('base64zip');
+        const base64Hash = window.location.hash.substring(1);
+
+        this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
 
         if (base64Text) {
-            this.processBase64Text(base64Text);
-        } else if (base64Zip) {
-            if (!navigator.clipboard.readText) {
-                setTimeout(_ => Events.fire('notify-user', 'This feature is not available on your device.'), 500);
-                this.clearBrowserHistory();
-                return;
-            }
             this.show();
+            if (base64Text === "paste") {
+                // ?base64text=paste
+                // base64 encoded string is ready to be pasted from clipboard
+                this.$pasteBtn.innerText = 'Tap here to paste text';
+                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
+            } else if (base64Text === "hash") {
+                // ?base64text=hash#BASE64ENCODED
+                // base64 encoded string is url hash which is never sent to server and faster (recommended)
+                this.processBase64Text(base64Hash)
+                    .catch(_ => {
+                        Events.fire('notify-user', 'Text content is incorrect.');
+                        console.log("Text content incorrect.")
+                    }).finally(_ => {
+                        this.hide();
+                    });
+            } else {
+                // ?base64text=BASE64ENCODED
+                // base64 encoded string was part of url param (not recommended)
+                this.processBase64Text(base64Text)
+                    .catch(_ => {
+                        Events.fire('notify-user', 'Text content is incorrect.');
+                        console.log("Text content incorrect.")
+                    }).finally(_ => {
+                        this.hide();
+                    });
+            }
+        } else if (base64Zip) {
+            this.show();
+            if (base64Zip === "hash") {
+                // ?base64zip=hash#BASE64ENCODED
+                // base64 encoded zip file is url hash which is never sent to the server
+                this.processBase64Zip(base64Hash)
+                    .catch(_ => {
+                        Events.fire('notify-user', 'File content is incorrect.');
+                        console.log("File content incorrect.")
+                    }).finally(_ => {
+                        this.hide();
+                    });
+            } else {
+                // ?base64zip=paste || ?base64zip=true
+                this.$pasteBtn.innerText = 'Tap here to paste files';
+                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
+            }
+        }
+    }
+
+    _setPasteBtnToProcessing() {
+        this.$pasteBtn.style.pointerEvents = "none";
+        this.$pasteBtn.innerText = "Processing...";
+    }
+
+    async processClipboard(type) {
+        if (!navigator.clipboard.readText) {
+            Events.fire('notify-user', 'This feature is not available on your browser.');
+            console.log("navigator.clipboard.readText() is not available on your browser.")
+            this.hide();
+            return;
+        }
+
+        this._setPasteBtnToProcessing();
+
+        const base64 = await navigator.clipboard.readText();
+
+        if (!base64) return;
+
+        if (type === "text") {
+            this.processBase64Text(base64)
+                .catch(_ => {
+                    Events.fire('notify-user', 'Clipboard content is incorrect.');
+                    console.log("Clipboard content is incorrect.")
+                }).finally(_ => {
+                    this.hide();
+                });
+        } else {
+            this.processBase64Zip(base64)
+                .catch(_ => {
+                    Events.fire('notify-user', 'Clipboard content is incorrect.');
+                    console.log("Clipboard content is incorrect.")
+                }).finally(_ => {
+                    this.hide();
+                });
         }
     }
 
     processBase64Text(base64Text){
-        try {
+        return new Promise((resolve) => {
+            this._setPasteBtnToProcessing();
             let decodedText = decodeURIComponent(escape(window.atob(base64Text)));
             Events.fire('activate-paste-mode', {files: [], text: decodedText});
-        } catch (e) {
-            setTimeout(_ => Events.fire('notify-user', 'Content incorrect.'), 500);
-        } finally {
-            this.clearBrowserHistory();
-            this.hide();
-        }
+            resolve();
+        });
     }
 
-    async processClipboard() {
-        this.$pasteBtn.pointerEvents = "none";
-        this.$pasteBtn.innerText = "Processing...";
-        try {
-            const base64zip = await navigator.clipboard.readText();
-            let bstr = atob(base64zip), n = bstr.length, u8arr = new Uint8Array(n);
-            while (n--) {
-                u8arr[n] = bstr.charCodeAt(n);
-            }
-
-            const zipBlob = new File([u8arr], 'archive.zip');
-
-            let files = [];
-            const zipEntries = await zipper.getEntries(zipBlob);
-            for (let i = 0; i < zipEntries.length; i++) {
-                let fileBlob = await zipper.getData(zipEntries[i]);
-                files.push(new File([fileBlob], zipEntries[i].filename));
-            }
-            Events.fire('activate-paste-mode', {files: files, text: ""})
-        } catch (e) {
-            Events.fire('notify-user', 'Clipboard content is incorrect.')
-        } finally {
-            this.clearBrowserHistory();
-            this.hide();
+    async processBase64Zip(base64zip) {
+        this._setPasteBtnToProcessing();
+        let bstr = atob(base64zip), n = bstr.length, u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
         }
+
+        const zipBlob = new File([u8arr], 'archive.zip');
+
+        let files = [];
+        const zipEntries = await zipper.getEntries(zipBlob);
+        for (let i = 0; i < zipEntries.length; i++) {
+            let fileBlob = await zipper.getData(zipEntries[i]);
+            files.push(new File([fileBlob], zipEntries[i].filename));
+        }
+        Events.fire('activate-paste-mode', {files: files, text: ""});
     }
 
     clearBrowserHistory() {
         window.history.replaceState({}, "Rewrite URL", '/');
     }
+
+    hide() {
+        this.clearBrowserHistory();
+        super.hide();
+    }
 }
 
 class Toast extends Dialog {
@@ -1170,6 +1318,7 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
+        // Todo: fix Notifications
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
     }
@@ -1214,7 +1363,7 @@ class Notifications {
     _messageNotification(message, peerId) {
         if (document.visibilityState !== 'visible') {
             const peerDisplayName = $(peerId).ui._displayName();
-            if (isURL(message)) {
+            if (/^((https?:\/\/|www)[abcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)$/.test(message.toLowerCase())) {
                 const notification = this._notify(`Link received by ${peerDisplayName} - Click to open`, message);
                 this._bind(notification, _ => window.open(message, '_blank', null, true));
             } else {
@@ -1245,7 +1394,7 @@ class Notifications {
     }
 
     _download(notification) {
-        $('shareOrDownload').click();
+        $('share-or-download').click();
         notification.close();
     }
 
@@ -1634,23 +1783,19 @@ Events.on('load', () => {
     let x0, y0, w, h, dw, offset;
 
     function init() {
-        w = window.innerWidth;
-        h = window.innerHeight;
+        w = document.documentElement.clientWidth;
+        h = document.documentElement.clientHeight;
         c.width = w;
         c.height = h;
-        offset = h > 800
-            ? 116
-            : h > 380
-                ? 100
-                : 65;
-
-        if (w < 420) offset += 20;
+        offset = $$('footer').offsetHeight - 32;
+        if (h > 800) offset += 16;
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.max(w, h, 1000) / 13;
         drawCircles();
     }
-    window.onresize = init;
+    Events.on('bg-resize', _ => init());
+    window.onresize = _ => Events.fire('bg-resize');
 
     function drawCircle(radius) {
         ctx.beginPath();
@@ -1715,9 +1860,3 @@ Notifications permission has been blocked
 as the user has dismissed the permission prompt several times.
 This can be reset in Page Info
 which can be accessed by clicking the lock icon next to the URL.`;
-
-document.body.onclick = _ => { // safari hack to fix audio
-    document.body.onclick = null;
-    if (!(/.*Version.*Safari.*/.test(navigator.userAgent))) return;
-    blop.play();
-}

public/service-worker.js

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

public/styles.css

@@ -10,25 +10,25 @@
 
 /* Layout */
 
-html {
-    height: 100%;
-}
-
 html,
 body {
     margin: 0;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 100vw;
     overflow-x: hidden;
-    overscroll-behavior-y: none;
+    overscroll-behavior: none;
+    overflow-y: hidden;
 }
 
 body {
-    flex-grow: 1;
-    align-items: center;
-    justify-content: center;
-    overflow-y: hidden;
+    min-height: 100vh;
+    /* mobile viewport bug fix */
+    min-height: -webkit-fill-available;
+}
+
+html {
+    height: -webkit-fill-available;
 }
 
 .row-reverse {
@@ -70,10 +70,7 @@ body {
 }
 
 header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    position: relative;
     height: 56px;
     align-items: center;
     padding: 16px;
@@ -116,9 +113,9 @@ h3 {
 }
 
 .font-subheading {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
-    line-height: 24px;
+    line-height: 18px;
     word-break: normal;
 }
 
@@ -196,20 +193,151 @@ body>header a {
     margin-left: 8px;
 }
 
+#center {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+    flex-grow: 1;
+    --footer-height: 132px;
+    max-height: calc(100vh - 56px - var(--footer-height));
+    justify-content: space-around;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    overscroll-behavior-x: none;
+}
+
+@media screen and (max-width: 425px) {
+    header:has(#clear-pair-devices:not([hidden]))~#center {
+        --footer-height: 150px;
+    }
+}
+
 /* Peers List */
 
+#x-peers-filler {
+    display: flex;
+    flex-grow: 1;
+}
+
 x-peers {
-    width: 100%;
-    overflow: hidden;
+    position: relative;
+    display: flex;
     flex-flow: row wrap;
+    flex-grow: 1;
+    align-items: start !important;
+    justify-content: center;
+
     z-index: 2;
-    transition: color 300ms;
+    transition: --bg-color 0.5s ease;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    overscroll-behavior-x: none;
+    scrollbar-width: none;
+
+    --peers-per-row: 6; /* default if browser does not support :has selector */
+    --x-peers-width: min(100vw, calc(var(--peers-per-row) * (var(--peer-width) + 25px) - 16px));
+    width: var(--x-peers-width);
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
+x-peers.overflowing {
+    background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
+    linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
+        /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .2), rgba(var(--text-color), 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .2), rgba(var(--text-color), 0)) 0 100%;
+
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+}
+
+x-peers:has(> x-peer) {
+    --peers-per-row: 10;
+}
+
+@media screen and (min-height: 505px) and (max-height: 649px) and (max-width: 426px),
+screen and (min-height: 486px) and (max-height: 631px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(7)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 10;
+    }
+}
+
+@media screen and (min-height: 649px) and (max-width: 425px),
+screen and (min-height: 631px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(28)) {
+        --peers-per-row: 10;
+    }
+}
+
+::-webkit-scrollbar {
+    display: none;
 }
 
 /* Empty Peers List */
 
 x-no-peers {
-    height: 114px;
+    display: flex;
+    flex-direction: column;
     padding: 8px;
     text-align: center;
     /* prevent flickering on load */
@@ -251,25 +379,19 @@ x-no-peers[drop-bg] * {
 x-peer {
     -webkit-user-select: none;
     user-select: none;
+    padding: 8px;
+    align-content: start;
+    flex-wrap: wrap;
 }
 
 x-peer label {
     width: var(--peer-width);
-    padding: 8px;
     cursor: pointer;
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative;
 }
 
-x-peer .name {
-    width: var(--peer-width);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-}
-
 input[type="file"] {
     visibility: hidden;
     position: absolute;
@@ -277,21 +399,45 @@ input[type="file"] {
 
 x-peer x-icon {
     --icon-size: 40px;
+    margin-bottom: 4px;
+    transition: transform 150ms;
+    will-change: transform;
+    display: flex;
+    flex-direction: column;
+}
+
+x-peer .icon-wrapper {
     width: var(--icon-size);
     padding: 12px;
     border-radius: 50%;
     background: var(--primary-color);
     color: white;
     display: flex;
-    margin-bottom: 8px;
-    transition: transform 150ms;
-    will-change: transform;
 }
 
-x-peer:not(.type-ip) x-icon {
+x-peer:not(.type-ip).type-secret .icon-wrapper {
     background: var(--paired-device-color);
 }
 
+x-peer x-icon > .highlight-wrapper {
+    align-self: center;
+    align-items: center;
+    margin: 7px auto 0;
+    height: 6px;
+}
+
+x-peer x-icon > .highlight-wrapper > .highlight {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    display: none;
+}
+
+x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
+    background-color: var(--paired-device-color);
+    display: inline;
+}
+
 x-peer:not([status]):hover x-icon,
 x-peer:not([status]):focus x-icon {
     transform: scale(1.05);
@@ -303,6 +449,18 @@ x-peer[status] x-icon {
     transform: scale(1);
 }
 
+.device-descriptor {
+    text-align: center;
+}
+
+.name {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
 .status,
 .device-name,
 .connection-hash {
@@ -368,10 +526,9 @@ x-peer[drop] x-icon {
 /* Footer */
 
 footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    position: relative;
+    margin-top: auto;
+    z-index: 2;
     align-items: center;
     padding: 0 0 16px 0;
     text-align: center;
@@ -382,6 +539,7 @@ footer .logo {
     --icon-size: 80px;
     margin-bottom: 8px;
     color: var(--primary-color);
+    margin-top: -10px;
 }
 
 footer .font-body2 {
@@ -406,7 +564,8 @@ x-dialog x-background {
     z-index: 10;
     transition: opacity 300ms;
     will-change: opacity;
-    padding: 35px;
+    padding: 15px;
+    overflow: overlay;
 }
 
 x-dialog x-paper {
@@ -416,11 +575,22 @@ x-dialog x-paper {
     padding: 16px 24px;
     width: 100%;
     max-width: 400px;
+    overflow: hidden;
     box-sizing: border-box;
     transition: transform 300ms;
     will-change: transform;
 }
 
+#pair-device-dialog x-paper {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: max(50%, 350px);
+    margin-top: -328.5px;
+    width: calc(100vw - 20px);
+    height: 625px;
+}
+
 x-dialog:not([show]) {
     pointer-events: none;
 }
@@ -433,12 +603,6 @@ x-dialog:not([show]) x-background {
     opacity: 0;
 }
 
-x-dialog .row-reverse>.button {
-    margin-top: 0;
-    margin-bottom: -16px;
-    width: 50%;
-    height: 50px;
-}
 
 x-dialog a {
     color: var(--primary-color);
@@ -450,13 +614,13 @@ x-dialog .font-subheading {
 
 /* PairDevicesDialog */
 
-#keyInputContainer {
+#key-input-container {
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
-#keyInputContainer>input {
+#key-input-container>input {
     width: 45px;
     height: 45px;
     font-size: 30px;
@@ -472,15 +636,15 @@ x-dialog .font-subheading {
     justify-content: center;
 }
 
-#keyInputContainer>input + * {
+#key-input-container>input + * {
     margin-left: 6px;
 }
 
-#keyInputContainer>input:nth-of-type(4) {
-    margin-left: 18px;
+#key-input-container>input:nth-of-type(4) {
+    margin-left: 5%;
 }
 
-#roomKey {
+#room-key {
     font-size: 50px;
     letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
     display: inline-block;
@@ -488,19 +652,15 @@ x-dialog .font-subheading {
     margin: 15px -15px;
 }
 
-#roomKeyQrCode {
-    padding: inherit;
-    margin: auto;
-    width: 80px;
-    height: 80px;
+#room-key-qr-code {
+    margin: 16px;
 }
 
-#pairDeviceDialog hr {
-    margin-top: 40px;
-    margin-bottom: 40px;
+#pair-device-dialog hr {
+    margin: 40px -24px;
 }
 
-#pairDeviceDialog x-background {
+#pair-device-dialog x-background {
     padding: 16px!important;
 }
 
@@ -511,29 +671,24 @@ x-dialog .row {
     margin-bottom: 8px;
 }
 
-x-dialog h2 {
-    margin-top: 1rem;
-}
-
-#receiveRequestDialog h2,
-#receiveFileDialog h2 {
-    margin-bottom: 0.5rem;
-}
-
-x-dialog .row-reverse {
-    margin: 40px -24px auto;
+/* button row*/
+x-paper > div:last-child {
+    margin: auto -24px -15px;
     border-top: solid 2.5px var(--border-color);
+    height: 50px;
 }
 
-.separator {
-    border: solid 1.25px var(--border-color);
-    margin-bottom: -16px;
+x-paper > div:last-child > .button {
+    height: 100%;
+    width: 50%;
+}
+
+x-paper > div:last-child > .button:not(:last-child) {
+    border-left: solid 2.5px var(--border-color);
 }
 
 .file-description {
-    word-break: break-word;
-    width: 80%;
-    margin: auto;
+    margin-bottom: 25px;
 }
 
 .file-description .row {
@@ -545,52 +700,52 @@ x-dialog .row-reverse {
     word-break: normal;
 }
 
-#fileName {
+.file-name {
     font-style: italic;
+    max-width: 100%;
 }
 
-#fileStem {
-    max-width: 80%;
+.file-stem {
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
-    max-height: 20px;
-}
-
-.file-size{
-    margin-bottom: 30px;
+    white-space: nowrap;
 }
 
 /* Send Text Dialog */
 
-#textInput {
-    min-height: 120px;
+x-dialog .dialog-subheader {
+    margin-bottom: 25px;
+}
+
+#text-input {
+    min-height: 200px;
+    margin: 14px auto;
 }
 
 /* Receive Text Dialog */
 
-#receiveTextDialog #text {
+#receive-text-dialog #text {
     width: 100%;
     word-break: break-all;
-    max-height: 300px;
+    max-height: calc(100vh - 393px);
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-user-select: all;
     -moz-user-select: all;
     user-select: all;
     white-space: pre-wrap;
-    margin-top:36px;
+    padding: 15px 0;
 }
 
-#receiveTextDialog #text a {
+#receive-text-dialog #text a {
     cursor: pointer;
 }
 
-#receiveTextDialog #text a:hover {
+#receive-text-dialog #text a:hover {
     text-decoration: underline;
 }
 
-#receiveTextDialog h3 {
+#receive-text-dialog h3 {
     /* Select the received text when double-clicking the dialog */
     user-select: none;
     pointer-events: none;
@@ -598,28 +753,25 @@ x-dialog .row-reverse {
 
 .row-separator {
     border-bottom: solid 2.5px var(--border-color);
-    margin: auto -25px;
+    margin: auto -24px;
 }
 
-#receiveTextDescriptionContainer {
-    margin-bottom: 25px;
-}
-
-#base64ZipPasteBtn {
+#base64-paste-btn {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
 }
 
-#base64ZipDialog button {
+#base64-paste-dialog button {
     margin: auto;
     border-radius: 8px;
 }
 
-#base64ZipDialog button[close] {
+#base64-paste-dialog button[close] {
     margin-top: 20px;
 }
-#base64ZipDialog button[close]:before {
+
+#base64-paste-dialog button[close]:before {
     border-radius: 8px;
 }
 
@@ -629,7 +781,6 @@ x-dialog .row-reverse {
     padding: 2px 16px 0;
     box-sizing: border-box;
     min-height: 36px;
-    min-width: 100px;
     font-size: 14px;
     line-height: 24px;
     font-weight: 700;
@@ -640,6 +791,7 @@ x-dialog .row-reverse {
     user-select: none;
     background: inherit;
     color: var(--primary-color);
+    overflow: hidden;
 }
 
 .button[disabled] {
@@ -677,16 +829,18 @@ x-dialog .row-reverse {
     opacity: 0.1;
 }
 
-#cancelPasteModeBtn {
+#cancel-paste-mode {
     z-index: 2;
-    margin-top: 0;
+    margin: 0;
+    padding: 0;
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     height: 56px;
-    border-bottom: solid 2.5px var(--border-color);
+    background-color: var(--primary-color);
+    color: rgb(238, 238, 238);
 }
 
 .button:focus:before,
@@ -702,7 +856,6 @@ button::-moz-focus-inner {
 
 
 /* Icon Button */
-
 .icon-button {
     width: 40px;
     height: 40px;
@@ -712,10 +865,7 @@ button::-moz-focus-inner {
     border-radius: 50%;
 }
 
-
-
 /* Text Input */
-
 .textarea {
     box-sizing: border-box;
     border: none;
@@ -729,9 +879,8 @@ button::-moz-focus-inner {
     display: block;
     overflow: auto;
     resize: none;
-    min-height: 40px;
     line-height: 16px;
-    max-height: 300px;
+    max-height: calc(100vh - 254px);
     white-space: pre;
 }
 
@@ -797,7 +946,7 @@ button::-moz-focus-inner {
     width: 80px;
     height: 80px;
     position: absolute;
-    top: 0;
+    top: -8px;
     clip: rect(0px, 80px, 80px, 40px);
     --progress: rotate(0deg);
     transition: transform 200ms;
@@ -864,13 +1013,16 @@ x-toast:not([show]):not(:hover) {
 /* Instructions */
 
 x-instructions {
-    position: absolute;
-    top: 120px;
+    position: relative;
     opacity: 0.5;
     transition: opacity 300ms;
-    z-index: -1;
     text-align: center;
-    width: 80%;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
 }
 
 x-instructions:not([drop-peer]):not([drop-bg]):before {
@@ -887,88 +1039,92 @@ x-instructions[drop-bg]:not([drop-peer]):before {
 
 x-instructions p {
     display: none;
-    margin: 0 auto auto;
-    max-width: 80%;
 }
 
 x-peers:empty~x-instructions {
     opacity: 0;
 }
 
+@media (hover: none) and (pointer: coarse) {
+    x-peer {
+        transform: scale(0.95);
+        padding: 4px 0;
+    }
+}
+
+#websocket-fallback {
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 5px;
+    text-align: center;
+    opacity: 0.5;
+    transition: opacity 300ms;
+}
+
+#websocket-fallback>span {
+    margin: 2px;
+}
+
+#websocket-fallback > span > span {
+    border-bottom: solid 4px var(--ws-peer-color);
+}
 
 /* Responsive Styles */
+@media screen and (max-width: 360px) {
+    x-dialog x-paper {
+        padding: 15px;
+    }
+    x-paper > div:last-child {
+        margin: auto -15px -15px;
+    }
+}
 
-@media (min-height: 800px) {
+@media screen and (min-height: 800px) {
     footer {
         margin-bottom: 16px;
     }
 }
 
-@media screen and (min-height: 800px),
-screen and (min-width: 1100px) {
+@media (hover: hover) and (pointer: fine) {
     x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(desktop);
     }
 }
 
-@media (max-height: 420px) {
-    x-instructions {
-        top: 24px;
-    }
-
-    footer .logo {
-        --icon-size: 40px;
-    }
-}
-
-/*
-    iOS specific styles
-*/
-@supports (-webkit-overflow-scrolling: touch) {
-
-
-    html {
-        position: fixed;
-    }
-
-    x-instructions:before {
-        content: attr(mobile);
-    }
-}
-
 /*
     Color Themes
 */
 
 /* Default colors */
 body {
-    --text-color: #333;
-    --bg-color: #fff;
+    --text-color: 51,51,51;
+    --bg-color: 250,250,250; /*rgb code*/
+    --bg-color-test: 18,18,18;
     --bg-color-secondary: #f1f3f4;
     --border-color: #e7e8e8;
 }
 
 /* Dark theme colors */
 body.dark-theme {
-    --text-color: #eee;
-    --bg-color: #121212;
+    --text-color: 238,238,238;
+    --bg-color: 18,18,18; /*rgb code*/
     --bg-color-secondary: #333;
     --border-color: #252525;
 }
 
 /* Colored Elements */
 body {
-    color: var(--text-color);
-    background-color: var(--bg-color);
+    color: rgb(var(--text-color));
+    background-color: rgb(var(--bg-color));
     transition: background-color 0.5s ease;
 }
 
 x-dialog x-paper {
-    background-color: var(--bg-color);
+    background-color: rgb(var(--bg-color));
 }
 
 .textarea {
-    color: var(--text-color) !important;
+    color: rgb(var(--text-color)) !important;
     background-color: var(--bg-color-secondary) !important;
 }
 
@@ -994,7 +1150,9 @@ x-dialog x-paper {
     display: none;
 }
 
-.element-preview {
+.file-preview > img,
+.file-preview > audio,
+.file-preview > video {
     max-width: 100%;
     max-height: 40vh;
     margin: auto;
@@ -1006,16 +1164,16 @@ x-dialog x-paper {
 
     /* defaults to dark theme */
     body {
-        --text-color: #eee;
-        --bg-color: #121212;
+        --text-color: 238,238,238;
+        --bg-color: 18,18,18; /*rgb code*/
         --bg-color-secondary: #333;
         --border-color: #252525;
     }
 
     /* Override dark mode with light mode styles if the user decides to swap */
     body.light-theme {
-        --text-color: #333;
-        --bg-color: #fafafa;
+        --text-color: 51,51,51;
+        --bg-color: 250,250,250; /*rgb code*/
         --bg-color-secondary: #f1f3f4;
         --border-color: #e7e8e8;
    }
@@ -1033,6 +1191,15 @@ x-dialog x-paper {
     }
 }
 
+/*
+    iOS specific styles
+*/
+@supports (-webkit-overflow-scrolling: touch) {
+    html {
+        min-height: -webkit-fill-available;
+    }
+}
+
 /* webkit scrollbar style*/
 
 ::-webkit-scrollbar{

public_included_ws_fallback/index.html

@@ -69,165 +69,179 @@
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
         </a>
+        <a id="cancel-paste-mode" class="button" hidden>Done</a>
     </header>
-    <a id="cancelPasteModeBtn" class="button" close hidden>Done</a>
-    <!-- Peers -->
-    <x-peers class="center"></x-peers>
-    <x-no-peers>
-        <h2>Open PairDrop on other devices to send files</h2>
-        <div>Pair devices to be discoverable on other networks</div>
-        <br>
-        <div>A <span class="websocket-fallback">websocket fallback</span> is implemented on this instance. Use only if you trust the server!</div>
-    </x-no-peers>
-    <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
-        <div>A <span class="websocket-fallback">websocket fallback</span> is implemented on this instance. Use only if you trust the server!</div>
-        <p id="pasteFilename"></p>
-    </x-instructions>
+    <!-- Center -->
+    <div id="center">
+        <!-- Peers -->
+        <div class="x-peers-filler"></div>
+        <x-peers class="center"></x-peers>
+        <x-no-peers>
+            <h2>Open PairDrop on other devices to send files</h2>
+            <div>Pair devices to be discoverable on other networks</div>
+        </x-no-peers>
+        <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
+            <p id="paste-filename"></p>
+        </x-instructions>
+    </div>
     <!-- Footer -->
     <footer class="column">
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="displayName" placeholder="&nbsp;"></div>
+        <div id="display-name" placeholder="&nbsp;"></div>
         <div class="font-body2">
             You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
             <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
         </div>
+        <div id="websocket-fallback">
+            <span>Traffic is <span>routed through the server</span> if WebRTC is not available.</span>
+        </div>
     </footer>
     <!-- Pair Device Dialog -->
-    <x-dialog id="pairDeviceDialog">
+    <x-dialog id="pair-device-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Pair Devices</h2>
-                    <div class="center" id="roomKeyQrCode"></div>
-                    <h1 class="center" id="roomKey">000 000</h1>
-                    <div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
+                    <div id="room-key-qr-code" class="center"></div>
+                    <h1 id="room-key" class="center">000 000</h1>
+                    <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
                     <hr>
-                    <div id="keyInputContainer">
-                        <input type="tel" id="char0" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" id="char1" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char2" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char3" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char4" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" id="char5" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                    <div id="key-input-container">
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
                     </div>
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit" disabled>Pair</button>
-                        <div class="separator"></div>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Clear Devices Dialog -->
-    <x-dialog id="clearDevicesDialog">
+    <x-dialog id="clear-devices-dialog">
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center">Unpair Devices</h2>
                     <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
-                    <div class="row-reverse space-between">
+                    <div class="center row-reverse">
                         <button class="button" type="submit">Unpair Devices</button>
-                        <a class="button" close>Cancel</a>
+                        <button class="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Request Dialog -->
-    <x-dialog id="receiveRequestDialog">
+    <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center">PairDrop</h2>
-                <div class="text-center file-description">
+                <h2 class="center"></h2>
+                <div class="center column file-description">
                     <div>
-                        <span id="requestingPeerDisplayName"></span>
+                        <span class="display-name"></span>
                         <span>would like to share</span>
                     </div>
-                    <div class="row" id="fileName">
-                        <span id="fileStem"></span>
-                        <span id="fileExtension"></span>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
                     </div>
-                    <div class="row">
-                        <span id="fileOther"></span>
+                    <div class="row file-other">
                     </div>
+                    <div class="row font-body2 file-size"></div>
                 </div>
-                <div class="font-body2 text-center file-size"></div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button>
-                    <div class="separator"></div>
-                    <button class="button" id="declineRequest" title="ESCAPE">Decline</button>
+                <div class="center row-reverse">
+                    <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
+                    <button id="decline-request" class="button" title="ESCAPE">Decline</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Receive File Dialog -->
-    <x-dialog id="receiveFileDialog">
+    <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2 class="center" id="receiveTitle"></h2>
-                <div class="text-center file-description"></div>
-                <div class="font-body2 text-center file-size"></div>
+                <h2 class="center"></h2>
+                <div class="center column file-description">
+                    <div>
+                        <span class="display-name"></span>
+                        <span>has sent</span>
+                    </div>
+                    <div class="row file-name" >
+                        <span class="file-stem"></span>
+                        <span class="file-extension"></span>
+                    </div>
+                    <div class="row file-other"></div>
+                    <div class="row font-body2 file-size"></div>
+                </div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse space-between">
-                    <a class="button" id="shareOrDownload" autofocus></a>
-                    <div class="separator"></div>
+                <div class="center row-reverse">
+                    <button id="share-btn" class="button" autofocus hidden>Share</button>
+                    <button id="download-btn" class="button" autofocus>Download</button>
                     <button class="button" close>Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Send Text Dialog -->
-    <x-dialog id="sendTextDialog">
+    <x-dialog id="send-text-dialog">
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h2>PairDrop - Send a Message</h2>
-                    <div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
-                    <div class="row-reverse">
+                    <h2 class="text-center">Send Message</h2>
+                    <div class="dialog-subheader text-center">
+                        <span>Send a Message to</span>
+                        <span class="display-name"></span>
+                    </div>
+                    <div class="row-separator"></div>
+                    <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                    <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <div class="separator"></div>
-                        <a class="button" title="ESCAPE" close>Cancel</a>
+                        <button class="button" title="ESCAPE" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
     <!-- Receive Text Dialog -->
-    <x-dialog id="receiveTextDialog">
+    <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <h2>PairDrop - Message Received</h2>
-                <div id="receiveTextDescriptionContainer">
-                    <span id="receiveTextPeerDisplayName"></span>
-                    <span>sent the following message:</span>
+                <h2 class="text-center">Message Received</h2>
+                <div class="text-center dialog-subheader">
+                    <span class="display-name"></span>
+                    <span>has sent:</span>
                 </div>
                 <div class="row-separator"></div>
                 <div id="text"></div>
-                <div class="row-reverse">
-                    <button class="button" id="copy" title="CTRL/⌘ + C">Copy</button>
-                    <div class="separator"></div>
-                    <button class="button" id="close" title="ESCAPE">Close</button>
+                <div class="center row-reverse">
+                    <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
+                    <button id="close" class="button" title="ESCAPE">Close</button>
                 </div>
             </x-paper>
         </x-background>
     </x-dialog>
-    <!-- base64ZipDialog Dialog -->
-    <x-dialog id="base64ZipDialog">
+    <!-- base64 Paste Dialog -->
+    <x-dialog id="base64-paste-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <button class="button center" id="base64ZipPasteBtn" title="Paste">Tap here to paste files</button>
+                <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
                 <button class="button center" close>Close</button>
             </x-paper>
         </x-background>
     </x-dialog>
     <!-- Toast -->
     <div class="toast-container full center">
-        <x-toast class="row" shadow="1" id="toast"></x-toast>
+        <x-toast id="toast" class="row" shadow="1"></x-toast>
     </div>
     <!-- About Page -->
     <x-about id="about" class="full center column">

public_included_ws_fallback/scripts/network.js

@@ -324,13 +324,12 @@ class Peer {
         this.sendJSON({ type: 'progress', progress: progress });
     }
 
-    _onMessage(message, logMessage = true) {
+    _onMessage(message) {
         if (typeof message !== 'string') {
             this._onChunkReceived(message);
             return;
         }
         message = JSON.parse(message);
-        if (logMessage) console.log('RTC:', message);
         switch (message.type) {
             case 'request':
                 this._onFilesTransferRequest(message);
@@ -451,7 +450,7 @@ class Peer {
         if (!this._requestAccepted.header.length) {
             this._busy = false;
             Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
-            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, request: this._requestAccepted});
+            Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
             this._filesReceived = [];
             this._requestAccepted = null;
         }
@@ -502,6 +501,7 @@ class RTCPeer extends Peer {
 
     constructor(serverConnection, peerId, roomType, roomSecret) {
         super(serverConnection, peerId, roomType, roomSecret);
+        this.rtcSupported = true;
         if (!peerId) return; // we will listen for a caller
         this._connect(peerId, true);
     }
@@ -578,6 +578,14 @@ class RTCPeer extends Peer {
         this._channel = channel;
     }
 
+    _onMessage(message) {
+        if (typeof message === 'string') {
+            message = JSON.parse(message);
+            console.log('RTC:', message);
+        }
+        super._onMessage(message);
+    }
+
     getConnectionHash() {
         const localDescriptionLines = this._conn.localDescription.sdp.split("\r\n");
         const remoteDescriptionLines = this._conn.remoteDescription.sdp.split("\r\n");
@@ -682,6 +690,7 @@ class WSPeer extends Peer {
 
     constructor(serverConnection, peerId, roomType, roomSecret) {
         super(serverConnection, peerId, roomType, roomSecret);
+        this.rtcSupported = false;
         if (!peerId) return; // we will listen for a caller
         this._sendSignal();
     }
@@ -700,15 +709,15 @@ class WSPeer extends Peer {
         this._server.send(message);
     }
 
-    _sendSignal() {
-        this.sendJSON({type: 'signal'});
+    _sendSignal(connected = false) {
+        this.sendJSON({type: 'signal', connected: connected});
     }
 
     onServerMessage(message) {
         Events.fire('peer-connected', {peerId: message.sender.id, connectionHash: this.getConnectionHash()})
-        if (this._peerId) return;
+        if (message.connected) return;
         this._peerId = message.sender.id;
-        this._sendSignal();
+        this._sendSignal(true);
     }
 
     getConnectionHash() {
@@ -730,6 +739,7 @@ class PeersManager {
         Events.on('peer-left', e => this._onPeerLeft(e.detail));
         Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
+        Events.on('ws-disconnected', _ => this._onWsDisconnected());
         Events.on('ws-relay', e => this._onWsRelay(e.detail));
     }
 
@@ -749,7 +759,7 @@ class PeersManager {
     _onWsRelay(message) {
         const messageJSON = JSON.parse(message)
         if (messageJSON.type === 'ws-chunk') message = base64ToArrayBuffer(messageJSON.chunk);
-        this.peers[messageJSON.sender.id]._onMessage(message, false)
+        this.peers[messageJSON.sender.id]._onMessage(message)
     }
 
     _onPeers(msg) {
@@ -797,15 +807,24 @@ class PeersManager {
     }
 
     _onPeerLeft(msg) {
-        if (this.peers[msg.peerId] && !this.peers[msg.peerId].rtcSupported) {
-            console.log('WSPeer left:', msg.peerId)
-            Events.fire('peer-disconnected', msg.peerId)
+        if (this.peers[msg.peerId] && (!this.peers[msg.peerId].rtcSupported || !window.isRtcSupported)) {
+            console.log('WSPeer left:', msg.peerId);
+            Events.fire('peer-disconnected', msg.peerId);
         } else if (msg.disconnect === true) {
             // if user actively disconnected from PairDrop server, disconnect all peer to peer connections immediately
             Events.fire('peer-disconnected', msg.peerId);
         }
     }
 
+    _onWsDisconnected() {
+        for (const peerId in this.peers) {
+            console.debug(this.peers[peerId].rtcSupported);
+            if (this.peers[peerId] && (!this.peers[peerId].rtcSupported || !window.isRtcSupported)) {
+                Events.fire('peer-disconnected', peerId);
+            }
+        }
+    }
+
     _onPeerDisconnected(peerId) {
         const peer = this.peers[peerId];
         delete this.peers[peerId];

public_included_ws_fallback/scripts/ui.js

@@ -1,6 +1,5 @@
 const $ = query => document.getElementById(query);
 const $$ = query => document.body.querySelector(query);
-const isURL = text => /^(https?:\/\/|www)[^\s]+$/g.test(text.toLowerCase());
 window.isProductionEnvironment = !window.location.host.startsWith('localhost');
 window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 window.android = /android/i.test(navigator.userAgent);
@@ -10,7 +9,7 @@ window.pasteMode.activated = false;
 // set display name
 Events.on('display-name', e => {
     const me = e.detail.message;
-    const $displayName = $('displayName')
+    const $displayName = $('display-name')
     $displayName.textContent = 'You are known as ' + me.displayName;
     $displayName.title = me.deviceName;
 });
@@ -28,7 +27,7 @@ class PeersUI {
         Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text));
         this.peers = {};
 
-        this.$cancelPasteModeBtn = $('cancelPasteModeBtn');
+        this.$cancelPasteModeBtn = $('cancel-paste-mode');
         this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
 
         Events.on('dragover', e => this._onDragOver(e));
@@ -38,8 +37,12 @@ class PeersUI {
         Events.on('drop', e => this._onDrop(e));
         Events.on('keydown', e => this._onKeyDown(e));
 
+        this.$xPeers = $$('x-peers');
         this.$xNoPeers = $$('x-no-peers');
         this.$xInstructions = $$('x-instructions');
+
+        Events.on('peer-added', _ => this.evaluateOverflowing());
+        Events.on('bg-resize', _ => this.evaluateOverflowing());
     }
 
     _onKeyDown(e) {
@@ -53,11 +56,11 @@ class PeersUI {
     }
 
     _joinPeer(peer, roomType, roomSecret) {
-        peer.roomType = roomType;
+        peer.roomTypes = [roomType];
         peer.roomSecret = roomSecret;
         if (this.peers[peer.id]) {
-            this.peers[peer.id].roomType = peer.roomType;
-            this._redrawPeer(peer);
+            if (!this.peers[peer.id].roomTypes.includes(roomType)) this.peers[peer.id].roomTypes.push(roomType);
+            this._redrawPeer(this.peers[peer.id]);
             return; // peer already exists
         }
         this.peers[peer.id] = peer;
@@ -72,7 +75,15 @@ class PeersUI {
         const peerNode = $(peer.id);
         if (!peerNode) return;
         peerNode.classList.remove('type-ip', 'type-secret');
-        peerNode.classList.add(`type-${peer.roomType}`)
+        peer.roomTypes.forEach(roomType => peerNode.classList.add(`type-${roomType}`));
+    }
+
+    evaluateOverflowing() {
+        if (this.$xPeers.clientHeight < this.$xPeers.scrollHeight) {
+            this.$xPeers.classList.add('overflowing');
+        } else {
+            this.$xPeers.classList.remove('overflowing');
+        }
     }
 
     _onPeers(msg) {
@@ -83,6 +94,7 @@ class PeersUI {
         const $peer = $(peerId);
         if (!$peer) return;
         $peer.remove();
+        this.evaluateOverflowing();
         if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
     }
 
@@ -143,7 +155,7 @@ class PeersUI {
                 descriptor = `${files[0].name} and ${files.length-1} other files`;
                 noPeersMessage = `Open PairDrop on other devices to send<br>${descriptor}`;
             } else {
-                descriptor = "pasted text";
+                descriptor = "shared text";
                 noPeersMessage = `Open PairDrop on other devices to send<br>${descriptor}`;
             }
 
@@ -213,6 +225,18 @@ class PeersUI {
 
 class PeerUI {
 
+    constructor(peer, connectionHash) {
+        this._peer = peer;
+        this._connectionHash = connectionHash;
+        this._initDom();
+        this._bindListeners();
+
+        $$('x-peers').appendChild(this.$el)
+        Events.fire('peer-added');
+        this.$xInstructions = $$('x-instructions');
+        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
+    }
+
     html() {
         let title;
         let input = '';
@@ -225,17 +249,24 @@ class PeerUI {
         this.$el.innerHTML = `
             <label class="column center" title="${title}">
                 ${input}
-                <x-icon shadow="1">
-                    <svg class="icon"><use xlink:href="#"/></svg>
+                <x-icon>
+                    <div class="icon-wrapper" shadow="1">
+                        <svg class="icon"><use xlink:href="#"/></svg>
+                    </div>
+                    <div class="highlight-wrapper center">
+                        <div class="highlight" shadow="1"></div>
+                    </div>
                 </x-icon>
                 <div class="progress">
                   <div class="circle"></div>
                   <div class="circle right"></div>
                 </div>
-                <div class="name font-subheading"></div>
-                <div class="device-name font-body2"></div>
-                <div class="status font-body2"></div>
-                <span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span>
+                <div class="device-descriptor">
+                    <div class="name font-subheading"></div>
+                    <div class="device-name font-body2"></div>
+                    <div class="status font-body2"></div>
+                    <span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span>
+                </div>
             </label>`;
 
         this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
@@ -245,23 +276,12 @@ class PeerUI {
             this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
     }
 
-    constructor(peer, connectionHash) {
-        this._peer = peer;
-        this._roomType = peer.roomType;
-        this._roomSecret = peer.roomSecret;
-        this._connectionHash = connectionHash;
-        this._initDom();
-        this._bindListeners();
-        $$('x-peers').appendChild(this.$el);
-        this.$xInstructions = $$('x-instructions');
-        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
-    }
-
     _initDom() {
         this.$el = document.createElement('x-peer');
         this.$el.id = this._peer.id;
         this.$el.ui = this;
-        this.$el.classList.add(`type-${this._roomType}`);
+        this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`));
+        this.$el.classList.add('center');
         if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer')
         this.html();
 
@@ -273,7 +293,7 @@ class PeerUI {
         this._callbackDragLeave = e => this._onDragEnd(e)
         this._callbackDragOver = e => this._onDragOver(e)
         this._callbackContextMenu = e => this._onRightClick(e)
-        this._callbackTouchStart = _ => this._onTouchStart()
+        this._callbackTouchStart = e => this._onTouchStart(e)
         this._callbackTouchEnd = e => this._onTouchEnd(e)
         this._callbackPointerDown = e => this._onPointerDown(e)
         // PasteMode
@@ -394,21 +414,28 @@ class PeerUI {
 
     _onRightClick(e) {
         e.preventDefault();
-        Events.fire('text-recipient', this._peer.id);
+        Events.fire('text-recipient', {
+            peerId: this._peer.id,
+            deviceName: e.target.closest('x-peer').querySelector('.name').innerText
+        });
     }
 
-    _onTouchStart() {
+    _onTouchStart(e) {
         this._touchStart = Date.now();
-        this._touchTimer = setTimeout(_ => this._onTouchEnd(), 610);
+        this._touchTimer = setTimeout(_ => this._onTouchEnd(e), 610);
     }
 
     _onTouchEnd(e) {
         if (Date.now() - this._touchStart < 500) {
             clearTimeout(this._touchTimer);
-        } else { // this was a long tap
-            if (e) e.preventDefault();
-            Events.fire('text-recipient', this._peer.id);
+        } else if (this._touchTimer) { // this was a long tap
+            e.preventDefault();
+            Events.fire('text-recipient', {
+                peerId: this._peer.id,
+                deviceName: e.target.closest('x-peer').querySelector('.name').innerText
+            });
         }
+        this._touchTimer = null;
     }
 }
 
@@ -446,10 +473,14 @@ class Dialog {
 class ReceiveDialog extends Dialog {
     constructor(id) {
         super(id);
-
-        this.$fileDescriptionNode = this.$el.querySelector('.file-description');
-        this.$fileSizeNode = this.$el.querySelector('.file-size');
-        this.$previewBox = this.$el.querySelector('.file-preview')
+        this.$fileDescription = this.$el.querySelector('.file-description');
+        this.$displayName = this.$el.querySelector('.display-name');
+        this.$fileStem = this.$el.querySelector('.file-stem');
+        this.$fileExtension = this.$el.querySelector('.file-extension');
+        this.$fileOther = this.$el.querySelector('.file-other');
+        this.$fileSize = this.$el.querySelector('.file-size');
+        this.$previewBox = this.$el.querySelector('.file-preview');
+        this.$receiveTitle = this.$el.querySelector('h2:first-of-type');
     }
 
     _formatFileSize(bytes) {
@@ -465,31 +496,52 @@ class ReceiveDialog extends Dialog {
             return bytes + ' Bytes';
         }
     }
+
+    _parseFileData(displayName, files, imagesOnly, totalSize) {
+        if (files.length > 1) {
+            let fileOtherText = ` and ${files.length - 1} other `;
+            if (files.length === 2) {
+                fileOtherText += imagesOnly ? 'image' : 'file';
+            } else {
+                fileOtherText += imagesOnly ? 'images' : 'files';
+            }
+            this.$fileOther.innerText = fileOtherText;
+        }
+
+        const fileName = files[0].name;
+        const fileNameSplit = fileName.split('.');
+        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
+        this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length);
+        this.$fileExtension.innerText = fileExtension;
+        this.$displayName.innerText = displayName;
+        this.$fileSize.innerText = this._formatFileSize(totalSize);
+    }
 }
 
 class ReceiveFileDialog extends ReceiveDialog {
 
     constructor() {
-        super('receiveFileDialog');
+        super('receive-file-dialog');
 
-        this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload');
-        this.$receiveTitleNode = this.$el.querySelector('#receiveTitle')
+        this.$downloadBtn = this.$el.querySelector('#download-btn');
+        this.$shareBtn = this.$el.querySelector('#share-btn');
 
-        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
+        Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.imagesOnly, e.detail.totalSize));
         this._filesQueue = [];
     }
 
-    _onFilesReceived(sender, files, request) {
-        this._nextFiles(sender, files, request);
+    _onFilesReceived(sender, files, imagesOnly, totalSize) {
+        const displayName = $(sender).ui._displayName()
+        this._filesQueue.push({peer: sender, displayName: displayName, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        this._nextFiles();
         window.blop.play();
     }
 
-    _nextFiles(sender, nextFiles, nextRequest) {
-        if (nextFiles) this._filesQueue.push({peerId: sender, files: nextFiles, request: nextRequest});
+    _nextFiles() {
         if (this._busy) return;
         this._busy = true;
-        const {peerId, files, request} = this._filesQueue.shift();
-        this._displayFiles(peerId, files, request);
+        const {peer, displayName, files, imagesOnly, totalSize} = this._filesQueue.shift();
+        this._displayFiles(peer, displayName, files, imagesOnly, totalSize);
     }
 
     _dequeueFile() {
@@ -520,7 +572,6 @@ class ReceiveFileDialog extends ReceiveDialog {
                 let element = document.createElement(previewElement[mime]);
                 element.src = URL.createObjectURL(file);
                 element.controls = true;
-                element.classList.add('element-preview');
                 element.onload = _ => {
                     this.$previewBox.appendChild(element);
                     resolve(true)
@@ -531,30 +582,32 @@ class ReceiveFileDialog extends ReceiveDialog {
         });
     }
 
-    async _displayFiles(peerId, files, request) {
-        if (this.continueCallback) this.$shareOrDownloadBtn.removeEventListener("click", this.continueCallback);
-
-        let url;
-        let title;
-        let filenameDownload;
-
-        let descriptor = request.imagesOnly ? "Image" : "File";
-
-        let size = this._formatFileSize(request.totalSize);
-        let description = files[0].name;
-
-        let shareInsteadOfDownload = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
+    async _displayFiles(peerId, displayName, files, imagesOnly, totalSize) {
+        this._parseFileData(displayName, files, imagesOnly, totalSize);
 
+        let descriptor, url, filenameDownload;
         if (files.length === 1) {
-            url = URL.createObjectURL(files[0])
-            title = `PairDrop - ${descriptor} Received`
-            filenameDownload = files[0].name;
+            descriptor = imagesOnly ? 'Image' : 'File';
         } else {
-            title = `PairDrop - ${files.length} ${descriptor}s Received`
-            description += ` and ${files.length-1} other ${descriptor.toLowerCase()}`;
-            if(files.length>2) description += "s";
+            descriptor = imagesOnly ? 'Images' : 'Files';
+        }
+        this.$receiveTitle.innerText = `${descriptor} Received`;
 
-            if(!shareInsteadOfDownload) {
+        const canShare = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
+        if (canShare) {
+            this.$shareBtn.removeAttribute('hidden');
+            this.$shareBtn.onclick = _ => {
+                navigator.share({files: files})
+                    .catch(err => {
+                        console.error(err);
+                    });
+            }
+        }
+
+        let downloadZipped = false;
+        if (files.length > 1) {
+            downloadZipped = true;
+            try {
                 let bytesCompleted = 0;
                 zipper.createNewZipWriter();
                 for (let i=0; i<files.length; i++) {
@@ -562,7 +615,7 @@ class ReceiveFileDialog extends ReceiveDialog {
                         onprogress: (progress) => {
                             Events.fire('set-progress', {
                                 peerId: peerId,
-                                progress: (bytesCompleted + progress) / request.totalSize,
+                                progress: (bytesCompleted + progress) / totalSize,
                                 status: 'process'
                             })
                         }
@@ -582,39 +635,58 @@ class ReceiveFileDialog extends ReceiveDialog {
                 let minutes = now.getMinutes().toString();
                 minutes = minutes.length < 2 ? "0" + minutes : minutes;
                 filenameDownload = `PairDrop_files_${year+month+date}_${hours+minutes}.zip`;
+            } catch (e) {
+                console.error(e);
+                downloadZipped = false;
             }
         }
 
-        this.$receiveTitleNode.textContent = title;
-        this.$fileDescriptionNode.textContent = description;
-        this.$fileSizeNode.textContent = size;
-
-        if (shareInsteadOfDownload) {
-            this.$shareOrDownloadBtn.innerText = "Share";
-            this.continueCallback = async _ => {
-                navigator.share({
-                        files: files
-                    }).catch(err => console.error(err));
+        this.$downloadBtn.innerText = "Download";
+        this.$downloadBtn.onclick = _ => {
+            if (downloadZipped) {
+                let tmpZipBtn = document.createElement("a");
+                tmpZipBtn.download = filenameDownload;
+                tmpZipBtn.href = url;
+                tmpZipBtn.click();
+            } else {
+                this._downloadFilesIndividually(files);
             }
-            this.$shareOrDownloadBtn.addEventListener("click", this.continueCallback);
-        } else {
-            this.$shareOrDownloadBtn.innerText = "Download";
-            this.$shareOrDownloadBtn.download = filenameDownload;
-            this.$shareOrDownloadBtn.href = url;
-        }
+
+            if (!canShare) {
+                this.$downloadBtn.innerText = "Download again";
+            }
+            Events.fire('notify-user', `${descriptor} downloaded successfully`);
+            this.$downloadBtn.style.pointerEvents = "none";
+            setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000);
+        };
 
         this.createPreviewElement(files[0]).finally(_ => {
-            document.title = `PairDrop - ${files.length} Files received`;
+            document.title = files.length === 1
+                ? 'File received - PairDrop'
+                : `(${files.length}) Files received - PairDrop`;
             document.changeFavicon("images/favicon-96x96-notification.png");
-            this.show();
             Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
-            this.$shareOrDownloadBtn.click();
+            this.show();
+
+            if (canShare) {
+                this.$shareBtn.click();
+            } else {
+                this.$downloadBtn.click();
+            }
         }).catch(r => console.error(r));
     }
 
+    _downloadFilesIndividually(files) {
+        let tmpBtn = document.createElement("a");
+        for (let i=0; i<files.length; i++) {
+            tmpBtn.download = files[i].name;
+            tmpBtn.href = URL.createObjectURL(files[i]);
+            tmpBtn.click();
+        }
+    }
+
     hide() {
-        this.$shareOrDownloadBtn.removeAttribute('href');
-        this.$shareOrDownloadBtn.removeAttribute('download');
+        this.$shareBtn.setAttribute('hidden', '');
         this.$previewBox.innerHTML = '';
         super.hide();
         this._dequeueFile();
@@ -624,15 +696,10 @@ class ReceiveFileDialog extends ReceiveDialog {
 class ReceiveRequestDialog extends ReceiveDialog {
 
     constructor() {
-        super('receiveRequestDialog');
+        super('receive-request-dialog');
 
-        this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName');
-        this.$fileStemNode = this.$el.querySelector('#fileStem');
-        this.$fileExtensionNode = this.$el.querySelector('#fileExtension');
-        this.$fileOtherNode = this.$el.querySelector('#fileOther');
-
-        this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest');
-        this.$declineRequestBtn = this.$el.querySelector('#declineRequest');
+        this.$acceptRequestBtn = this.$el.querySelector('#accept-request');
+        this.$declineRequestBtn = this.$el.querySelector('#decline-request');
         this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
         this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false));
 
@@ -662,32 +729,18 @@ class ReceiveRequestDialog extends ReceiveDialog {
     _showRequestDialog(request, peerId) {
         this.correspondingPeerId = peerId;
 
-        this.$requestingPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
-
-        const fileName = request.header[0].name;
-        const fileNameSplit = fileName.split('.');
-        const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
-        this.$fileStemNode.innerText = fileName.substring(0, fileName.length - fileExtension.length);
-        this.$fileExtensionNode.innerText = fileExtension
-
-        if (request.header.length >= 2) {
-            let fileOtherText = ` and ${request.header.length - 1} other `;
-            fileOtherText += request.imagesOnly ? 'image' : 'file';
-            if (request.header.length > 2) fileOtherText += "s";
-            this.$fileOtherNode.innerText = fileOtherText;
-        }
-
-        this.$fileSizeNode.innerText = this._formatFileSize(request.totalSize);
+        const displayName = $(peerId).ui._displayName();
+        this._parseFileData(displayName, request.header, request.imagesOnly, request.totalSize);
 
         if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
             let element = document.createElement('img');
             element.src = request.thumbnailDataUrl;
-            element.classList.add('element-preview');
-
             this.$previewBox.appendChild(element)
         }
 
-        document.title = 'PairDrop - File Transfer Requested';
+        this.$receiveTitle.innerText = `${request.imagesOnly ? 'Image' : 'File'} Transfer Request`
+
+        document.title = `${request.imagesOnly ? 'Image' : 'File'} Transfer Requested - PairDrop`;
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
@@ -713,16 +766,16 @@ class ReceiveRequestDialog extends ReceiveDialog {
 
 class PairDeviceDialog extends Dialog {
     constructor() {
-        super('pairDeviceDialog');
+        super('pair-device-dialog');
         $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
-        this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input');
+        this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
         this.$submitBtn = this.$el.querySelector('button[type="submit"]');
-        this.$roomKey = this.$el.querySelector('#roomKey');
-        this.$qrCode = this.$el.querySelector('#roomKeyQrCode');
+        this.$roomKey = this.$el.querySelector('#room-key');
+        this.$qrCode = this.$el.querySelector('#room-key-qr-code');
         this.$clearSecretsBtn = $('clear-pair-devices');
         this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
         let createJoinForm = this.$el.querySelector('form');
-        createJoinForm.addEventListener('submit', _ => this._onSubmit());
+        createJoinForm.addEventListener('submit', e => this._onSubmit(e));
 
         this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel())
         this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e)));
@@ -792,7 +845,7 @@ class PairDeviceDialog extends Dialog {
     }
 
     evaluateRoomKeyChars() {
-        if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) {
+        if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) {
             this.$submitBtn.setAttribute("disabled", "");
         } else {
             this.inputRoomKey = "";
@@ -801,7 +854,7 @@ class PairDeviceDialog extends Dialog {
             })
             this.$submitBtn.removeAttribute("disabled");
             if (document.activeElement === this.$inputRoomKeyChars[5]) {
-                this._onSubmit();
+                this._pairDeviceJoin(this.inputRoomKey);
             }
         }
     }
@@ -832,11 +885,11 @@ class PairDeviceDialog extends Dialog {
         // Display the QR code for the url
         const qr = new QRCode({
             content: this._getShareRoomURL(),
-            width: 80,
-            height: 80,
+            width: 150,
+            height: 150,
             padding: 0,
             background: "transparent",
-            color: getComputedStyle(document.body).getPropertyValue('--text-color'),
+            color: `rgb(var(--text-color))`,
             ecl: "L",
             join: true
         });
@@ -851,7 +904,8 @@ class PairDeviceDialog extends Dialog {
         return url.href;
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
         this._pairDeviceJoin(this.inputRoomKey);
     }
 
@@ -928,23 +982,29 @@ class PairDeviceDialog extends Dialog {
                 this.$clearSecretsBtn.setAttribute('hidden', '');
                 this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
             }
+            Events.fire('bg-resize');
         }).catch(_ => PersistentStorage.logBrowserNotCapable());
     }
 }
 
 class ClearDevicesDialog extends Dialog {
     constructor() {
-        super('clearDevicesDialog');
+        super('clear-devices-dialog');
         $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
         let clearDevicesForm = this.$el.querySelector('form');
-        clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
+        clearDevicesForm.addEventListener('submit', e => this._onSubmit(e));
     }
 
     _onClearPairDevices() {
         this.show();
     }
 
-    _onSubmit() {
+    _onSubmit(e) {
+        e.preventDefault();
+        this._clearRoomSecrets();
+    }
+
+    _clearRoomSecrets() {
         Events.fire('clear-room-secrets');
         this.hide();
     }
@@ -952,12 +1012,13 @@ class ClearDevicesDialog extends Dialog {
 
 class SendTextDialog extends Dialog {
     constructor() {
-        super('sendTextDialog');
-        Events.on('text-recipient', e => this._onRecipient(e.detail));
-        this.$text = this.$el.querySelector('#textInput');
+        super('send-text-dialog');
+        Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
+        this.$text = this.$el.querySelector('#text-input');
+        this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
-        this.$form.addEventListener('submit', _ => this._send());
+        this.$form.addEventListener('submit', e => this._onSubmit(e));
         this.$text.addEventListener('input', e => this._onChange(e));
         Events.on("keydown", e => this._onKeyDown(e));
     }
@@ -985,8 +1046,9 @@ class SendTextDialog extends Dialog {
         }
     }
 
-    _onRecipient(peerId) {
+    _onRecipient(peerId, deviceName) {
         this.correspondingPeerId = peerId;
+        this.$peerDisplayName.innerText = deviceName;
         this.show();
 
         const range = document.createRange();
@@ -998,6 +1060,11 @@ class SendTextDialog extends Dialog {
         sel.addRange(range);
     }
 
+    _onSubmit(e) {
+        e.preventDefault();
+        this._send();
+    }
+
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
@@ -1010,7 +1077,7 @@ class SendTextDialog extends Dialog {
 
 class ReceiveTextDialog extends Dialog {
     constructor() {
-        super('receiveTextDialog');
+        super('receive-text-dialog');
         Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId));
         this.$text = this.$el.querySelector('#text');
         this.$copy = this.$el.querySelector('#copy');
@@ -1021,7 +1088,7 @@ class ReceiveTextDialog extends Dialog {
 
         Events.on("keydown", e => this._onKeyDown(e));
 
-        this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName');
+        this.$displayNameNode = this.$el.querySelector('.display-name');
         this._receiveTextQueue = [];
     }
 
@@ -1039,6 +1106,7 @@ class ReceiveTextDialog extends Dialog {
     _onText(text, peerId) {
         window.blop.play();
         this._receiveTextQueue.push({text: text, peerId: peerId});
+        this._setDocumentTitleMessages();
         if (this.$el.attributes["show"]) return;
         this._dequeueRequests();
     }
@@ -1050,23 +1118,35 @@ class ReceiveTextDialog extends Dialog {
     }
 
     _showReceiveTextDialog(text, peerId) {
-        this.$receiveTextPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
+        this.$displayNameNode.innerText = $(peerId).ui._displayName();
 
-        if (isURL(text)) {
-            const $a = document.createElement('a');
-            $a.href = text;
-            $a.target = '_blank';
-            $a.textContent = text;
-            this.$text.innerHTML = '';
-            this.$text.appendChild($a);
-        } else {
-            this.$text.textContent = text;
+        this.$text.innerText = text;
+        this.$text.classList.remove('text-center');
+
+        // Beautify text if text is short
+        if (text.length < 2000) {
+            // replace urls with actual links
+            this.$text.innerHTML = this.$text.innerHTML.replace(/((https?:\/\/|www)[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)/g, url => {
+                return `<a href="${url}" target="_blank">${url}</a>`;
+            });
+
+            if (!/\s/.test(text)) {
+                this.$text.classList.add('text-center');
+            }
         }
-        document.title = 'PairDrop - Message Received';
+
+        this._setDocumentTitleMessages();
+
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
 
+    _setDocumentTitleMessages() {
+        document.title = !this._receiveTextQueue.length
+            ? 'Message Received - PairDrop'
+            : `(${this._receiveTextQueue.length + 1}) Messages Received - PairDrop`;
+    }
+
     async _onCopy() {
         await navigator.clipboard.writeText(this.$text.textContent);
         Events.fire('notify-user', 'Copied to clipboard');
@@ -1082,67 +1162,135 @@ class ReceiveTextDialog extends Dialog {
 class Base64ZipDialog extends Dialog {
 
     constructor() {
-        super('base64ZipDialog');
+        super('base64-paste-dialog');
         const urlParams = new URL(window.location).searchParams;
-        const base64Zip = urlParams.get('base64zip');
         const base64Text = urlParams.get('base64text');
-        this.$pasteBtn = this.$el.querySelector('#base64ZipPasteBtn')
-        this.$pasteBtn.addEventListener('click', _ => this.processClipboard())
+        const base64Zip = urlParams.get('base64zip');
+        const base64Hash = window.location.hash.substring(1);
+
+        this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
 
         if (base64Text) {
-            this.processBase64Text(base64Text);
-        } else if (base64Zip) {
-            if (!navigator.clipboard.readText) {
-                setTimeout(_ => Events.fire('notify-user', 'This feature is not available on your device.'), 500);
-                this.clearBrowserHistory();
-                return;
-            }
             this.show();
+            if (base64Text === "paste") {
+                // ?base64text=paste
+                // base64 encoded string is ready to be pasted from clipboard
+                this.$pasteBtn.innerText = 'Tap here to paste text';
+                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
+            } else if (base64Text === "hash") {
+                // ?base64text=hash#BASE64ENCODED
+                // base64 encoded string is url hash which is never sent to server and faster (recommended)
+                this.processBase64Text(base64Hash)
+                    .catch(_ => {
+                        Events.fire('notify-user', 'Text content is incorrect.');
+                        console.log("Text content incorrect.")
+                    }).finally(_ => {
+                        this.hide();
+                    });
+            } else {
+                // ?base64text=BASE64ENCODED
+                // base64 encoded string was part of url param (not recommended)
+                this.processBase64Text(base64Text)
+                    .catch(_ => {
+                        Events.fire('notify-user', 'Text content is incorrect.');
+                        console.log("Text content incorrect.")
+                    }).finally(_ => {
+                        this.hide();
+                    });
+            }
+        } else if (base64Zip) {
+            this.show();
+            if (base64Zip === "hash") {
+                // ?base64zip=hash#BASE64ENCODED
+                // base64 encoded zip file is url hash which is never sent to the server
+                this.processBase64Zip(base64Hash)
+                    .catch(_ => {
+                        Events.fire('notify-user', 'File content is incorrect.');
+                        console.log("File content incorrect.")
+                    }).finally(_ => {
+                        this.hide();
+                    });
+            } else {
+                // ?base64zip=paste || ?base64zip=true
+                this.$pasteBtn.innerText = 'Tap here to paste files';
+                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
+            }
+        }
+    }
+
+    _setPasteBtnToProcessing() {
+        this.$pasteBtn.style.pointerEvents = "none";
+        this.$pasteBtn.innerText = "Processing...";
+    }
+
+    async processClipboard(type) {
+        if (!navigator.clipboard.readText) {
+            Events.fire('notify-user', 'This feature is not available on your browser.');
+            console.log("navigator.clipboard.readText() is not available on your browser.")
+            this.hide();
+            return;
+        }
+
+        this._setPasteBtnToProcessing();
+
+        const base64 = await navigator.clipboard.readText();
+
+        if (!base64) return;
+
+        if (type === "text") {
+            this.processBase64Text(base64)
+                .catch(_ => {
+                    Events.fire('notify-user', 'Clipboard content is incorrect.');
+                    console.log("Clipboard content is incorrect.")
+                }).finally(_ => {
+                    this.hide();
+                });
+        } else {
+            this.processBase64Zip(base64)
+                .catch(_ => {
+                    Events.fire('notify-user', 'Clipboard content is incorrect.');
+                    console.log("Clipboard content is incorrect.")
+                }).finally(_ => {
+                    this.hide();
+                });
         }
     }
 
     processBase64Text(base64Text){
-        try {
+        return new Promise((resolve) => {
+            this._setPasteBtnToProcessing();
             let decodedText = decodeURIComponent(escape(window.atob(base64Text)));
             Events.fire('activate-paste-mode', {files: [], text: decodedText});
-        } catch (e) {
-            setTimeout(_ => Events.fire('notify-user', 'Content incorrect.'), 500);
-        } finally {
-            this.clearBrowserHistory();
-            this.hide();
-        }
+            resolve();
+        });
     }
 
-    async processClipboard() {
-        this.$pasteBtn.pointerEvents = "none";
-        this.$pasteBtn.innerText = "Processing...";
-        try {
-            const base64zip = await navigator.clipboard.readText();
-            let bstr = atob(base64zip), n = bstr.length, u8arr = new Uint8Array(n);
-            while (n--) {
-                u8arr[n] = bstr.charCodeAt(n);
-            }
-
-            const zipBlob = new File([u8arr], 'archive.zip');
-
-            let files = [];
-            const zipEntries = await zipper.getEntries(zipBlob);
-            for (let i = 0; i < zipEntries.length; i++) {
-                let fileBlob = await zipper.getData(zipEntries[i]);
-                files.push(new File([fileBlob], zipEntries[i].filename));
-            }
-            Events.fire('activate-paste-mode', {files: files, text: ""})
-        } catch (e) {
-            Events.fire('notify-user', 'Clipboard content is incorrect.')
-        } finally {
-            this.clearBrowserHistory();
-            this.hide();
+    async processBase64Zip(base64zip) {
+        this._setPasteBtnToProcessing();
+        let bstr = atob(base64zip), n = bstr.length, u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
         }
+
+        const zipBlob = new File([u8arr], 'archive.zip');
+
+        let files = [];
+        const zipEntries = await zipper.getEntries(zipBlob);
+        for (let i = 0; i < zipEntries.length; i++) {
+            let fileBlob = await zipper.getData(zipEntries[i]);
+            files.push(new File([fileBlob], zipEntries[i].filename));
+        }
+        Events.fire('activate-paste-mode', {files: files, text: ""});
     }
 
     clearBrowserHistory() {
         window.history.replaceState({}, "Rewrite URL", '/');
     }
+
+    hide() {
+        this.clearBrowserHistory();
+        super.hide();
+    }
 }
 
 class Toast extends Dialog {
@@ -1171,6 +1319,7 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
+        // Todo: fix Notifications
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
     }
@@ -1215,7 +1364,7 @@ class Notifications {
     _messageNotification(message, peerId) {
         if (document.visibilityState !== 'visible') {
             const peerDisplayName = $(peerId).ui._displayName();
-            if (isURL(message)) {
+            if (/^((https?:\/\/|www)[abcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)$/.test(message.toLowerCase())) {
                 const notification = this._notify(`Link received by ${peerDisplayName} - Click to open`, message);
                 this._bind(notification, _ => window.open(message, '_blank', null, true));
             } else {
@@ -1246,7 +1395,7 @@ class Notifications {
     }
 
     _download(notification) {
-        $('shareOrDownload').click();
+        $('share-or-download').click();
         notification.close();
     }
 
@@ -1635,23 +1784,18 @@ Events.on('load', () => {
     let x0, y0, w, h, dw, offset;
 
     function init() {
-        w = window.innerWidth;
-        h = window.innerHeight;
+        w = document.documentElement.clientWidth;
+        h = document.documentElement.clientHeight;
         c.width = w;
         c.height = h;
-        offset = h > 800
-            ? 116
-            : h > 380
-                ? 100
-                : 65;
-
-        if (w < 420) offset += 20;
+        offset = $$('footer').offsetHeight - 32;
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.max(w, h, 1000) / 13;
         drawCircles();
     }
-    window.onresize = init;
+    Events.on('bg-resize', _ => init());
+    window.onresize = _ => Events.fire('bg-resize');
 
     function drawCircle(radius) {
         ctx.beginPath();
@@ -1716,9 +1860,3 @@ Notifications permission has been blocked
 as the user has dismissed the permission prompt several times.
 This can be reset in Page Info
 which can be accessed by clicking the lock icon next to the URL.`;
-
-document.body.onclick = _ => { // safari hack to fix audio
-    document.body.onclick = null;
-    if (!(/.*Version.*Safari.*/.test(navigator.userAgent))) return;
-    blop.play();
-}

public_included_ws_fallback/service-worker.js

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

public_included_ws_fallback/styles.css

@@ -11,25 +11,25 @@
 
 /* Layout */
 
-html {
-    height: 100%;
-}
-
 html,
 body {
     margin: 0;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 100vw;
     overflow-x: hidden;
-    overscroll-behavior-y: none;
+    overscroll-behavior: none;
+    overflow-y: hidden;
 }
 
 body {
-    flex-grow: 1;
-    align-items: center;
-    justify-content: center;
-    overflow-y: hidden;
+    min-height: 100vh;
+    /* mobile viewport bug fix */
+    min-height: -webkit-fill-available;
+}
+
+html {
+    height: -webkit-fill-available;
 }
 
 .row-reverse {
@@ -71,10 +71,7 @@ body {
 }
 
 header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    position: relative;
     height: 56px;
     align-items: center;
     padding: 16px;
@@ -117,9 +114,9 @@ h3 {
 }
 
 .font-subheading {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
-    line-height: 24px;
+    line-height: 18px;
     word-break: normal;
 }
 
@@ -197,20 +194,160 @@ body>header a {
     margin-left: 8px;
 }
 
+#center {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+    flex-grow: 1;
+    --footer-height: 146px;
+    max-height: calc(100vh - 56px - var(--footer-height));
+    justify-content: space-around;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    overscroll-behavior-x: none;
+}
+
+@media screen and (min-width: 402px) and (max-width: 425px) {
+    header:has(#clear-pair-devices:not([hidden]))~#center {
+        --footer-height: 164px;
+    }
+}
+
+@media screen and (max-width: 402px) {
+    #center {
+        --footer-height: 184px;
+    }
+}
 /* Peers List */
 
+#x-peers-filler {
+    display: flex;
+    flex-grow: 1;
+}
+
 x-peers {
-    width: 100%;
-    overflow: hidden;
+    position: relative;
+    display: flex;
     flex-flow: row wrap;
+    flex-grow: 1;
+    align-items: start !important;
+    justify-content: center;
+
     z-index: 2;
-    transition: color 300ms;
+    transition: --bg-color 0.5s ease;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    overscroll-behavior-x: none;
+    scrollbar-width: none;
+
+    --peers-per-row: 6; /* default if browser does not support :has selector */
+    --x-peers-width: min(100vw, calc(var(--peers-per-row) * (var(--peer-width) + 25px) - 16px));
+    width: var(--x-peers-width);
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
+x-peers.overflowing {
+    background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
+    linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
+        /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .2), rgba(var(--text-color), 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .2), rgba(var(--text-color), 0)) 0 100%;
+
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+}
+
+x-peers:has(> x-peer) {
+    --peers-per-row: 10;
+}
+
+/* peers-per-row if height is too small for 2 rows */
+@media screen and (min-height: 538px) and (max-height: 683px) and (max-width: 402px),
+screen and (min-height: 517px) and (max-height: 664px) and (max-width: 426px),
+screen and (min-height: 501px) and (max-height: 647px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(7)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 10;
+    }
+}
+
+/* peers-per-row if height is too small for 3 rows */
+@media screen and (min-height: 683px) and (max-width: 402px),
+screen and (min-height: 664px) and (max-width: 426px),
+screen and (min-height: 647px) and (min-width: 426px) {
+    x-peers:has(> x-peer) {
+        --peers-per-row: 3;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(10)) {
+        --peers-per-row: 4;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(13)) {
+        --peers-per-row: 5;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(16)) {
+        --peers-per-row: 6;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(19)) {
+        --peers-per-row: 7;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(22)) {
+        --peers-per-row: 8;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(25)) {
+        --peers-per-row: 9;
+    }
+
+    x-peers:has(> x-peer:nth-of-type(28)) {
+        --peers-per-row: 10;
+    }
+}
+
+::-webkit-scrollbar {
+    display: none;
 }
 
 /* Empty Peers List */
 
 x-no-peers {
-    height: 114px;
+    display: flex;
+    flex-direction: column;
     padding: 8px;
     text-align: center;
     /* prevent flickering on load */
@@ -252,25 +389,19 @@ x-no-peers[drop-bg] * {
 x-peer {
     -webkit-user-select: none;
     user-select: none;
+    padding: 8px;
+    align-content: start;
+    flex-wrap: wrap;
 }
 
 x-peer label {
     width: var(--peer-width);
-    padding: 8px;
     cursor: pointer;
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative;
 }
 
-x-peer .name {
-    width: var(--peer-width);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-}
-
 input[type="file"] {
     visibility: hidden;
     position: absolute;
@@ -278,27 +409,43 @@ input[type="file"] {
 
 x-peer x-icon {
     --icon-size: 40px;
+    margin-bottom: 4px;
+    transition: transform 150ms;
+    will-change: transform;
+    display: flex;
+    flex-direction: column;
+}
+
+x-peer .icon-wrapper {
     width: var(--icon-size);
     padding: 12px;
     border-radius: 50%;
     background: var(--primary-color);
     color: white;
     display: flex;
-    margin-bottom: 8px;
-    transition: transform 150ms;
-    will-change: transform;
 }
 
-x-peer:not(.type-ip) x-icon {
+x-peer:not(.type-ip).type-secret .icon-wrapper {
     background: var(--paired-device-color);
 }
 
-x-peer.ws-peer x-icon {
-    border: solid 4px var(--ws-peer-color);
+x-peer x-icon > .highlight-wrapper {
+    align-self: center;
+    align-items: center;
+    margin: 7px auto 0;
+    height: 6px;
 }
 
-x-peer.ws-peer .progress {
-    margin-top: 4px;
+x-peer x-icon > .highlight-wrapper > .highlight {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    display: none;
+}
+
+x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
+    background-color: var(--paired-device-color);
+    display: inline;
 }
 
 x-peer:not([status]):hover x-icon,
@@ -312,6 +459,35 @@ x-peer[status] x-icon {
     transform: scale(1);
 }
 
+
+x-peer.ws-peer {
+    margin-top: -1.5px;
+}
+
+x-peer.ws-peer .progress {
+    margin-top: 3px;
+}
+
+x-peer.ws-peer .icon-wrapper{
+    border: solid 3px var(--ws-peer-color);
+}
+
+x-peer.ws-peer .highlight-wrapper {
+    margin-top: 3px;
+}
+
+.device-descriptor {
+    text-align: center;
+}
+
+.name {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
 .status,
 .device-name,
 .connection-hash {
@@ -377,12 +553,10 @@ x-peer[drop] x-icon {
 /* Footer */
 
 footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    position: relative;
+    margin-top: auto;
+    z-index: 2;
     align-items: center;
-    padding: 0 0 16px 0;
     text-align: center;
     transition: color 300ms;
 }
@@ -391,6 +565,7 @@ footer .logo {
     --icon-size: 80px;
     margin-bottom: 8px;
     color: var(--primary-color);
+    margin-top: -10px;
 }
 
 footer .font-body2 {
@@ -415,7 +590,8 @@ x-dialog x-background {
     z-index: 10;
     transition: opacity 300ms;
     will-change: opacity;
-    padding: 35px;
+    padding: 15px;
+    overflow: overlay;
 }
 
 x-dialog x-paper {
@@ -425,11 +601,22 @@ x-dialog x-paper {
     padding: 16px 24px;
     width: 100%;
     max-width: 400px;
+    overflow: hidden;
     box-sizing: border-box;
     transition: transform 300ms;
     will-change: transform;
 }
 
+#pair-device-dialog x-paper {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: max(50%, 350px);
+    margin-top: -328.5px;
+    width: calc(100vw - 20px);
+    height: 625px;
+}
+
 x-dialog:not([show]) {
     pointer-events: none;
 }
@@ -442,12 +629,6 @@ x-dialog:not([show]) x-background {
     opacity: 0;
 }
 
-x-dialog .row-reverse>.button {
-    margin-top: 0;
-    margin-bottom: -16px;
-    width: 50%;
-    height: 50px;
-}
 
 x-dialog a {
     color: var(--primary-color);
@@ -459,13 +640,13 @@ x-dialog .font-subheading {
 
 /* PairDevicesDialog */
 
-#keyInputContainer {
+#key-input-container {
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
-#keyInputContainer>input {
+#key-input-container>input {
     width: 45px;
     height: 45px;
     font-size: 30px;
@@ -481,15 +662,15 @@ x-dialog .font-subheading {
     justify-content: center;
 }
 
-#keyInputContainer>input + * {
+#key-input-container>input + * {
     margin-left: 6px;
 }
 
-#keyInputContainer>input:nth-of-type(4) {
-    margin-left: 18px;
+#key-input-container>input:nth-of-type(4) {
+    margin-left: 5%;
 }
 
-#roomKey {
+#room-key {
     font-size: 50px;
     letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
     display: inline-block;
@@ -497,19 +678,15 @@ x-dialog .font-subheading {
     margin: 15px -15px;
 }
 
-#roomKeyQrCode {
-    padding: inherit;
-    margin: auto;
-    width: 80px;
-    height: 80px;
+#room-key-qr-code {
+    margin: 16px;
 }
 
-#pairDeviceDialog hr {
-    margin-top: 40px;
-    margin-bottom: 40px;
+#pair-device-dialog hr {
+    margin: 40px -24px;
 }
 
-#pairDeviceDialog x-background {
+#pair-device-dialog x-background {
     padding: 16px!important;
 }
 
@@ -520,29 +697,24 @@ x-dialog .row {
     margin-bottom: 8px;
 }
 
-x-dialog h2 {
-    margin-top: 1rem;
-}
-
-#receiveRequestDialog h2,
-#receiveFileDialog h2 {
-    margin-bottom: 0.5rem;
-}
-
-x-dialog .row-reverse {
-    margin: 40px -24px auto;
+/* button row*/
+x-paper > div:last-child {
+    margin: auto -24px -15px;
     border-top: solid 2.5px var(--border-color);
+    height: 50px;
 }
 
-.separator {
-    border: solid 1.25px var(--border-color);
-    margin-bottom: -16px;
+x-paper > div:last-child > .button {
+    height: 100%;
+    width: 50%;
+}
+
+x-paper > div:last-child > .button:not(:last-child) {
+    border-left: solid 2.5px var(--border-color);
 }
 
 .file-description {
-    word-break: break-word;
-    width: 80%;
-    margin: auto;
+    margin-bottom: 25px;
 }
 
 .file-description .row {
@@ -554,52 +726,52 @@ x-dialog .row-reverse {
     word-break: normal;
 }
 
-#fileName {
+.file-name {
     font-style: italic;
+    max-width: 100%;
 }
 
-#fileStem {
-    max-width: 80%;
+.file-stem {
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
-    max-height: 20px;
-}
-
-.file-size{
-    margin-bottom: 30px;
+    white-space: nowrap;
 }
 
 /* Send Text Dialog */
 
-#textInput {
-    min-height: 120px;
+x-dialog .dialog-subheader {
+    margin-bottom: 25px;
+}
+
+#text-input {
+    min-height: 200px;
+    margin: 14px auto;
 }
 
 /* Receive Text Dialog */
 
-#receiveTextDialog #text {
+#receive-text-dialog #text {
     width: 100%;
     word-break: break-all;
-    max-height: 300px;
+    max-height: calc(100vh - 393px);
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-user-select: all;
     -moz-user-select: all;
     user-select: all;
     white-space: pre-wrap;
-    margin-top:36px;
+    padding: 15px 0;
 }
 
-#receiveTextDialog #text a {
+#receive-text-dialog #text a {
     cursor: pointer;
 }
 
-#receiveTextDialog #text a:hover {
+#receive-text-dialog #text a:hover {
     text-decoration: underline;
 }
 
-#receiveTextDialog h3 {
+#receive-text-dialog h3 {
     /* Select the received text when double-clicking the dialog */
     user-select: none;
     pointer-events: none;
@@ -607,28 +779,25 @@ x-dialog .row-reverse {
 
 .row-separator {
     border-bottom: solid 2.5px var(--border-color);
-    margin: auto -25px;
+    margin: auto -24px;
 }
 
-#receiveTextDescriptionContainer {
-    margin-bottom: 25px;
-}
-
-#base64ZipPasteBtn {
+#base64-paste-btn {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
 }
 
-#base64ZipDialog button {
+#base64-paste-dialog button {
     margin: auto;
     border-radius: 8px;
 }
 
-#base64ZipDialog button[close] {
+#base64-paste-dialog button[close] {
     margin-top: 20px;
 }
-#base64ZipDialog button[close]:before {
+
+#base64-paste-dialog button[close]:before {
     border-radius: 8px;
 }
 
@@ -638,7 +807,6 @@ x-dialog .row-reverse {
     padding: 2px 16px 0;
     box-sizing: border-box;
     min-height: 36px;
-    min-width: 100px;
     font-size: 14px;
     line-height: 24px;
     font-weight: 700;
@@ -649,6 +817,7 @@ x-dialog .row-reverse {
     user-select: none;
     background: inherit;
     color: var(--primary-color);
+    overflow: hidden;
 }
 
 .button[disabled] {
@@ -686,16 +855,18 @@ x-dialog .row-reverse {
     opacity: 0.1;
 }
 
-#cancelPasteModeBtn {
+#cancel-paste-mode {
     z-index: 2;
-    margin-top: 0;
+    margin: 0;
+    padding: 0;
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     height: 56px;
-    border-bottom: solid 2.5px var(--border-color);
+    background-color: var(--primary-color);
+    color: rgb(238, 238, 238);
 }
 
 .button:focus:before,
@@ -711,7 +882,6 @@ button::-moz-focus-inner {
 
 
 /* Icon Button */
-
 .icon-button {
     width: 40px;
     height: 40px;
@@ -721,10 +891,7 @@ button::-moz-focus-inner {
     border-radius: 50%;
 }
 
-
-
 /* Text Input */
-
 .textarea {
     box-sizing: border-box;
     border: none;
@@ -738,9 +905,8 @@ button::-moz-focus-inner {
     display: block;
     overflow: auto;
     resize: none;
-    min-height: 40px;
     line-height: 16px;
-    max-height: 300px;
+    max-height: calc(100vh - 254px);
     white-space: pre;
 }
 
@@ -806,7 +972,7 @@ button::-moz-focus-inner {
     width: 80px;
     height: 80px;
     position: absolute;
-    top: 0;
+    top: -8px;
     clip: rect(0px, 80px, 80px, 40px);
     --progress: rotate(0deg);
     transition: transform 200ms;
@@ -873,13 +1039,16 @@ x-toast:not([show]):not(:hover) {
 /* Instructions */
 
 x-instructions {
-    position: absolute;
-    top: 120px;
+    position: relative;
     opacity: 0.5;
     transition: opacity 300ms;
-    z-index: -1;
     text-align: center;
-    width: 80%;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
 }
 
 x-instructions:not([drop-peer]):not([drop-bg]):before {
@@ -896,92 +1065,92 @@ x-instructions[drop-bg]:not([drop-peer]):before {
 
 x-instructions p {
     display: none;
-    margin: 0 auto auto;
-    max-width: 80%;
 }
 
 x-peers:empty~x-instructions {
     opacity: 0;
 }
 
-.websocket-fallback {
+@media (hover: none) and (pointer: coarse) {
+    x-peer {
+        transform: scale(0.95);
+        padding: 4px 0;
+    }
+}
+
+#websocket-fallback {
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 5px;
+    text-align: center;
+    opacity: 0.5;
+    transition: opacity 300ms;
+}
+
+#websocket-fallback>span {
+    margin: 2px;
+}
+
+#websocket-fallback > span > span {
     border-bottom: solid 4px var(--ws-peer-color);
-    padding-bottom: 1px;
 }
 
 /* Responsive Styles */
-
-@media (min-height: 800px) {
-    footer {
-        margin-bottom: 16px;
+@media screen and (max-width: 360px) {
+    x-dialog x-paper {
+        padding: 15px;
+    }
+    x-paper > div:last-child {
+        margin: auto -15px -15px;
     }
 }
 
-@media screen and (min-height: 800px),
-screen and (min-width: 1100px) {
+@media screen and (min-height: 800px) {
+    #websocket-fallback {
+        padding-bottom: 15px;
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
     x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(desktop);
     }
 }
 
-@media (max-height: 420px) {
-    x-instructions {
-        top: 24px;
-    }
-
-    footer .logo {
-        --icon-size: 40px;
-    }
-}
-
-/*
-    iOS specific styles
-*/
-@supports (-webkit-overflow-scrolling: touch) {
-
-
-    html {
-        position: fixed;
-    }
-
-    x-instructions:before {
-        content: attr(mobile);
-    }
-}
-
 /*
     Color Themes
 */
 
 /* Default colors */
 body {
-    --text-color: #333;
-    --bg-color: #fff;
+    --text-color: 51,51,51;
+    --bg-color: 250,250,250; /*rgb code*/
+    --bg-color-test: 18,18,18;
     --bg-color-secondary: #f1f3f4;
     --border-color: #e7e8e8;
 }
 
 /* Dark theme colors */
 body.dark-theme {
-    --text-color: #eee;
-    --bg-color: #121212;
+    --text-color: 238,238,238;
+    --bg-color: 18,18,18; /*rgb code*/
     --bg-color-secondary: #333;
     --border-color: #252525;
 }
 
 /* Colored Elements */
 body {
-    color: var(--text-color);
-    background-color: var(--bg-color);
+    color: rgb(var(--text-color));
+    background-color: rgb(var(--bg-color));
     transition: background-color 0.5s ease;
 }
 
 x-dialog x-paper {
-    background-color: var(--bg-color);
+    background-color: rgb(var(--bg-color));
 }
 
 .textarea {
-    color: var(--text-color) !important;
+    color: rgb(var(--text-color)) !important;
     background-color: var(--bg-color-secondary) !important;
 }
 
@@ -1007,7 +1176,9 @@ x-dialog x-paper {
     display: none;
 }
 
-.element-preview {
+.file-preview > img,
+.file-preview > audio,
+.file-preview > video {
     max-width: 100%;
     max-height: 40vh;
     margin: auto;
@@ -1019,16 +1190,16 @@ x-dialog x-paper {
 
     /* defaults to dark theme */
     body {
-        --text-color: #eee;
-        --bg-color: #121212;
+        --text-color: 238,238,238;
+        --bg-color: 18,18,18; /*rgb code*/
         --bg-color-secondary: #333;
         --border-color: #252525;
     }
 
     /* Override dark mode with light mode styles if the user decides to swap */
     body.light-theme {
-        --text-color: #333;
-        --bg-color: #fafafa;
+        --text-color: 51,51,51;
+        --bg-color: 250,250,250; /*rgb code*/
         --bg-color-secondary: #f1f3f4;
         --border-color: #e7e8e8;
    }
@@ -1046,6 +1217,15 @@ x-dialog x-paper {
     }
 }
 
+/*
+    iOS specific styles
+*/
+@supports (-webkit-overflow-scrolling: touch) {
+    html {
+        min-height: -webkit-fill-available;
+    }
+}
+
 /* webkit scrollbar style*/
 
 ::-webkit-scrollbar{