increase version to v1.6.0

Increase SEO

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,6 +1,6 @@
 ---
 name: Bug Report
-about: Create a report to help us improve
+about: Create a report to help us improve. Please check the FAQ first.
 title: 'Bug:/Enhancement:/Feature Request: '
 labels: ''
 assignees: ''

.github/workflows/github-image.yml

@@ -29,6 +29,12 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
         
+      - name: Setup qemu
+        uses: docker/setup-qemu-action@v2.1.0
+
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
       - name: Log in to the Container registry
         uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
         with:
@@ -46,6 +52,7 @@ jobs:
         uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
         with:
           context: .
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -9,3 +9,6 @@ RUN npm ci
 COPY . .
 
 EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD wget --quiet --tries=1 --spider http://localhost:3000 || exit 1

README.md

@@ -60,6 +60,7 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
 * Warn user before PairDrop is closed on file transfer
 * Open PairDrop on multiple tabs simultaneously (Thanks [@willstott101](https://github.com/willstott101))
 * [Video and Audio preview](https://github.com/RobinLinus/snapdrop/pull/455) (Thanks [@victorwads](https://github.com/victorwads))
+* Switch theme back to auto/system after darkmode or lightmode is enabled
 * Node-only implementation (Thanks [@Bellisario](https://github.com/Bellisario))
 * Automatic restart on error (Thanks [@KaKi87](https://github.com/KaKi87))
 * Lots of stability fixes (Thanks [@MWY001](https://github.com/MWY001) [@skiby7](https://github.com/skiby7) and [@willstott101](https://github.com/willstott101))

docs/docker-swarm-usage.md

@@ -0,0 +1,43 @@
+# Docker Swarm Usage
+
+## Healthcheck
+
+The [Docker Image](../Dockerfile) includes a Healthcheck with the following options:
+
+```
+--interval=30s
+```
+> Specifies the time interval at which the health check should be performed. In this case, the health check will be performed every 30 seconds.
+
+<br>
+
+```
+--timeout=10s
+```
+> Specifies the amount of time to wait for a response from the health check command. If the response does not arrive within 10 seconds, the health check will be considered a failure.
+
+<br>
+
+```
+--start-period=5s
+```
+> Specifies the amount of time to wait before starting the health check process. In this case, the health check process will begin 5 seconds after the container is started.
+
+<br>
+
+```
+--retries=3
+```
+> Specifies the number of times Docker should retry the health check before considering the container to be unhealthy.
+
+<br>
+
+
+The CMD instruction is used to define the command that will be run as part of the health check. 
+In this case, the command is `wget --quiet --tries=1 --spider http://localhost:3000/ || exit 1`. This command will attempt to connect to `http://localhost:3000/` 
+and if it fails it will exit with a status code of `1`. If this command returns a status code other than `0`, the health check will be considered a failure.
+
+Overall, this HEALTHCHECK instruction is defining a health check process that will run every 30 seconds, wait up to 10 seconds for a response, 
+begin 5 seconds after the container is started, and retry up to 3 times. 
+The health check will consist of attempting to connect to http://localhost:3000/ and will consider the container to be unhealthy if it is unable to connect.
+

docs/faq.md

@@ -1,31 +1,48 @@
 # Frequently Asked Questions
 
-### Instructions / Discussions
+<details>
-* [Video Instructions](https://www.youtube.com/watch?v=4XN02GkcHUM) (Big thanks to [TheiTeckHq](https://www.youtube.com/channel/UC_DUzWMb8gZZnAbISQjmAfQ))
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
-* [idownloadblog](http://www.idownloadblog.com/2015/12/29/snapdrop/)
+    Help! I can't install the PWA!
-* [thenextweb](http://thenextweb.com/insider/2015/12/27/snapdrop-is-a-handy-web-based-replacement-for-apples-fiddly-airdrop-file-transfer-tool/)
+</summary>
-* [winboard](http://www.winboard.org/artikel-ratgeber/6253-dateien-vom-desktop-pc-mit-anderen-plattformen-teilen-mit-snapdrop.html)
-* [免費資源網路社群](https://free.com.tw/snapdrop/)
-* [Hackernews](https://news.ycombinator.com/front?day=2020-12-24)
-* [Reddit](https://www.reddit.com/r/Android/comments/et4qny/snapdrop_is_a_free_open_source_cross_platform/)
-* [Producthunt](https://www.producthunt.com/posts/snapdrop)
 
-### Help! I can't install the PWA!
 if you are using a Chromium-based browser (Chrome, Edge, Brave, etc.), you can easily install PairDrop PWA on your desktop 
 by clicking the install-button in the top-right corner while on [pairdrop.net](https://pairdrop.net).
 
-<img src="pwa-install.png" alt="Example on how to install a pwa with Edge">
+<img width="400" src="pwa-install.png" alt="Example on how to install a pwa with Edge">
 
 On Firefox, PWAs are installable via [this browser extensions](https://addons.mozilla.org/de/firefox/addon/pwas-for-firefox/)
 
-### Are there any shortcuts?
+<br>
-Sure!
+
+<b>Self-Hosted Instance?</b>
+
+To be able to install the PWA from a self-hosted instance, the connection needs to be [established through HTTPS](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs).
+See [this host your own section](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#testing-pwa-related-features) for more information. 
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Shortcuts?
+</summary>
+
+Shortcuts!
 - Send a message with `CTRL + ENTER`
 - Close all send and pair dialogs by pressing `Escape`.
 - Copy a received message to clipboard with `CTRL/⌘ + C`.
 - Accept file transfer request with `Enter` and decline with `Escape`.
 
-### When I receive images on iOS I cannot add them directly to the gallery?
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    How to save images directly to the gallery on iOS?
+</summary>
+
 Apparently, iOS does not allow images shared from a website to be saved to the gallery directly.
 It simply does not offer the option for images shared from a website.
 
@@ -33,31 +50,101 @@ iOS Shortcuts to the win:
 I created a simple iOS shortcut that takes your photos and saves them to your gallery:
 https://routinehub.co/shortcut/13988/
 
-### Is it possible to send files or text directly from the context or share menu?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Is it possible to send files or text directly from the context or share menu?
+</summary>
+
 Yes, it finally is!
 * [Send files directly from context menu on Windows](/docs/how-to.md#send-files-directly-from-context-menu-on-windows)
 * [Send directly from share menu on iOS](/docs/how-to.md#send-directly-from-share-menu-on-ios)
 * [Send directly from share menu on Android](/docs/how-to.md#send-directly-from-share-menu-on-android)
 
-### Is it possible to send files or text directly via CLI?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Is it possible to send files or text directly via CLI?
+</summary>
+
 Yes, it is!
 
 * [Send directly from command-line interface](/docs/how-to.md#send-directly-via-command-line-interface)
-### What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
+
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Are there any Third-Party Apps?
+</summary>
+
+Here's a list of some third-party apps compatible with PairDrop:
+
+1. [Snapdrop Android App](https://github.com/fm-sys/snapdrop-android)
+2. [Snapdrop for Firefox (Addon)](https://github.com/ueen/SnapdropFirefoxAddon)
+3. Feel free to make one :)
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
+</summary>
+
 It uses a P2P connection if WebRTC is supported by the browser. WebRTC needs a Signaling Server, but it is only used to establish a connection and is not involved in the file transfer.
 
 If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.
 
-### What about privacy? Will files be saved on third-party-servers?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    What about privacy? Will files be saved on third-party-servers?
+</summary>
+
 None of your files are ever sent to any server. Files are sent only between peers. PairDrop doesn't even use a database. If you are curious have a look [at the Server](https://github.com/schlagmichdoch/pairdrop/blob/master/index.js).
 WebRTC encrypts the files on transit.
 
 If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.
 
-### What about security? Are my files encrypted while being sent between the computers?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    What about security? Are my files encrypted while being sent between the computers?
+</summary>
+
 Yes. Your files are sent using WebRTC, which encrypts them on transit. To ensure the connection is secure and there is no MITM, compare the security number shown under the device name on both devices. The security number is different for every connection.
 
-### Transferring many files with paired devices takes too long
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Transferring many files with paired devices takes too long
+</summary>
+
 Naturally, if traffic needs to be routed through the turn server because your devices are behind different NATs, transfer speed decreases.
 
 As the public TURN server used is not super fast, you can easily [specify to use your own TURN server](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#specify-stunturn-servers) if you host your own instance.
@@ -71,22 +158,52 @@ Alternatively, you can open a hotspot on one of your devices to bridge the conne
 You can also use mobile hotspots on phones to do that. 
 Then, all data should be sent directly between devices and your data plan should not be charged.
 
-### Why don't you implement feature xyz?
+
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Why don't you implement feature xyz?
+</summary>
+
 Snapdrop and PairDrop are a study in radical simplicity. The user interface is insanely simple. Features are chosen very carefully because complexity grows quadratically since every feature potentially interferes with each other feature. We focus very narrowly on a single use case: instant file transfer. 
 We are not trying to optimize for some edge-cases. We are optimizing the user flow of the average users. Don't be sad if we decline your feature request for the sake of simplicity. 
 
 If you want to learn more about simplicity you can read [Insanely Simple: The Obsession that Drives Apple's Success](https://www.amazon.com/Insanely-Simple-Ken-Segall-audiobook/dp/B007Z9686O) or [Thinking, Fast and Slow](https://www.amazon.com/Thinking-Fast-Slow-Daniel-Kahneman/dp/0374533555).
 
 
-### Snapdrop and PairDrop are awesome! How can I support them? 
+<br>
-* [Buy me a cover to support open source software](https://www.buymeacoffee.com/pairdrop)
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    Snapdrop and PairDrop are awesome! How can I support them? 
+</summary>
+
+* [Buy me a coffee to support open source software](https://www.buymeacoffee.com/pairdrop)
 * [File bugs, give feedback, submit suggestions](https://github.com/schlagmichdoch/pairdrop/issues)
 * Share PairDrop on social media.
 * Fix bugs and make a pull request. 
 * Do security analysis and suggestions
+* To support the original Snapdrop and its creator go to [his GitHub page](https://github.com/RobinLinus/snapdrop)
 
 
-### How does it work?
+<br>
+
+</details>
+
+<details>
+<summary style="font-size:1.25em;margin-top: 24px; margin-bottom: 16px; font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25;">
+    How does it work?
+</summary>
+
 [See here for Information about the Technical Implementation](/docs/technical-documentation.md)
 
+<br>
+
+</details>
+
 [< Back](/README.md)

docs/host-your-own.md

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

docs/how-to.md

@@ -33,10 +33,10 @@ https://routinehub.co/shortcut/13990/
 
 
 ## Send directly from share menu on Android
-The [Web Share Target API](https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target) is implemented but not yet tested.
+The [Web Share Target API](https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target) is implemented.
-When the PWA is installed, it should register itself to the share-menu of the device automatically.
+
+When the PWA is installed, it will register itself to the share-menu of the device automatically.
 
-This feature is still under development. Please test this feature and create an issue if it does not work.
 
 ## Send directly via command-line interface
 Send files or text with PairDrop via command-line interface.

index.js

@@ -63,14 +63,6 @@ const rtcConfig = process.env.RTC_CONFIG
         "iceServers": [
             {
                 "urls": "stun:stun.l.google.com:19302"
-            },
-            {
-                "urls": "stun:openrelay.metered.ca:80"
-            },
-            {
-                "urls": "turn:openrelay.metered.ca:443",
-                "username": "openrelayproject",
-                "credential": "openrelayproject"
             }
         ]
     };

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "pairdrop",
-  "version": "1.4.5",
+  "version": "1.6.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.4.5",
+      "version": "1.6.0",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",
         "express-rate-limit": "^6.7.0",
-        "ua-parser-js": "^1.0.34",
+        "ua-parser-js": "^1.0.35",
         "unique-names-generator": "^4.3.0",
-        "ws": "^8.12.1"
+        "ws": "^8.13.0"
       },
       "engines": {
         "node": ">=15"
@@ -583,9 +583,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "1.0.34",
+      "version": "1.0.35",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
-      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew==",
+      "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==",
       "funding": [
         {
           "type": "opencollective",
@@ -633,9 +633,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.12.1",
+      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -1070,9 +1070,9 @@
       }
     },
     "ua-parser-js": {
-      "version": "1.0.34",
+      "version": "1.0.35",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
-      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew=="
+      "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA=="
     },
     "unique-names-generator": {
       "version": "4.7.1",
@@ -1095,9 +1095,9 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "ws": {
-      "version": "8.12.1",
+      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-1qo+M9Ba+xNhPB+YTWUlK6M17brTut5EXbcBaMRN5pH5dFrXz7lzz1ChFSUq3bOUl8yEvSenhHmYUNJxFzdJew==",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
       "requires": {}
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.4.5",
+  "version": "1.6.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,9 +12,9 @@
   "dependencies": {
     "express": "^4.18.2",
     "express-rate-limit": "^6.7.0",
-    "ua-parser-js": "^1.0.34",
+    "ua-parser-js": "^1.0.35",
     "unique-names-generator": "^4.3.0",
-    "ws": "^8.12.1"
+    "ws": "^8.13.0"
   },
   "engines": {
     "node": ">=15"

public/index.html

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

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

public/scripts/network.js

@@ -329,7 +329,7 @@ class Peer {
                 this._onFilesTransferRequest(messageJSON);
                 break;
             case 'header':
-                this._onFilesHeader(messageJSON);
+                this._onFileHeader(messageJSON);
                 break;
             case 'partition':
                 this._onReceivedPartitionEnd(messageJSON);
@@ -389,8 +389,8 @@ class Peer {
         this._requestPending = null;
     }
 
-    _onFilesHeader(header) {
+    _onFileHeader(header) {
-        if (this._requestAccepted?.header.length) {
+        if (this._requestAccepted && this._requestAccepted.header.length) {
             this._lastProgress = 0;
             this._digester = new FileDigester({size: header.size, name: header.name, mime: header.mime},
                 this._requestAccepted.totalSize,
@@ -443,6 +443,9 @@ class Peer {
             this._abortTransfer();
         }
 
+        // include for compatibility with Snapdrop for Android app
+        Events.fire('file-received', fileBlob);
+
         this._filesReceived.push(fileBlob);
         if (!this._requestAccepted.header.length) {
             this._busy = false;

public/scripts/theme.js

@@ -1,39 +1,78 @@
 (function(){
 
-  // Select the button
+  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const btnTheme = document.getElementById('theme');
+  const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
-  // Check for dark mode preference at the OS level
+
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+  const $themeAuto = document.getElementById('theme-auto');
-  

+  const $themeLight = document.getElementById('theme-light');
-  // Get the user's theme preference from local storage, if it's available
+  const $themeDark = document.getElementById('theme-dark');
-  const currentTheme = localStorage.getItem('theme');
+
-  // If the user's preference in localStorage is dark...
+  let currentTheme = localStorage.getItem('theme');
+
   if (currentTheme === 'dark') {
-    // ...let's toggle the .dark-theme class on the body
+    setModeToDark();
-    document.body.classList.toggle('dark-theme');
-  // Otherwise, if the user's preference in localStorage is light...
   } else if (currentTheme === 'light') {
-    // ...let's toggle the .light-theme class on the body
+    setModeToLight();
-    document.body.classList.toggle('light-theme');
   }
-  

+
-  // Listen for a click on the button
+  $themeAuto.addEventListener('click', _ => {
-  btnTheme.addEventListener('click', function(e) {
+    if (currentTheme) {
-    e.preventDefault();
+      setModeToAuto();
-    // If the user's OS setting is dark and matches our .dark-theme class...
-    let theme;
-    if (prefersDarkScheme.matches) {
-      // ...then toggle the light mode class
-      document.body.classList.toggle('light-theme');
-      // ...but use .dark-theme if the .light-theme class is already on the body,
-      theme = document.body.classList.contains('light-theme') ? 'light' : 'dark';
     } else {
-      // Otherwise, let's do the same thing, but for .dark-theme
+      setModeToDark();
-      document.body.classList.toggle('dark-theme');
+    }
-      theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
+  });
+  $themeLight.addEventListener('click', _ => {
+    if (currentTheme !== 'light') {
+      setModeToLight();
+    } else {
+      setModeToAuto();
+    }
+  });
+  $themeDark.addEventListener('click', _ => {
+    if (currentTheme !== 'dark') {
+      setModeToDark();
+    } else {
+      setModeToLight();
     }
-    // Finally, let's save the current preference to localStorage to keep using it
-    localStorage.setItem('theme', theme);
   });
 
+  function setModeToDark() {
+    document.body.classList.remove('light-theme');
+    document.body.classList.add('dark-theme');
+    localStorage.setItem('theme', 'dark');
+    currentTheme = 'dark';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.add("selected");
+  }
+
+  function setModeToLight() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.add('light-theme');
+    localStorage.setItem('theme', 'light');
+    currentTheme = 'light';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.add("selected");
+    $themeDark.classList.remove("selected");
+  }
+
+  function setModeToAuto() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.remove('light-theme');
+    if (prefersDarkTheme) {
+      document.body.classList.add('dark-theme');
+    } else if (prefersLightTheme) {
+      document.body.classList.add('light-theme');
+    }
+    localStorage.removeItem('theme');
+    currentTheme = undefined;
+
+    $themeAuto.classList.add("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.remove("selected");
+  }
+
 })();

public/scripts/ui.js

@@ -107,8 +107,15 @@ class PeersUI {
     _getSavedDisplayName() {
         return new Promise((resolve) => {
             PersistentStorage.get('editedDisplayName')
-                .then(displayName => resolve(displayName ?? ""))
+                .then(displayName => {
-                .catch(_ => resolve(localStorage.getItem('editedDisplayName') ?? ""))
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
+                .catch(_ => {
+                    let displayName = localStorage.getItem('editedDisplayName');
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
         });
     }
 
@@ -825,7 +832,7 @@ class ReceiveRequestDialog extends ReceiveDialog {
         const connectionHash = $(peerId).ui._connectionHash;
         this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize);
 
-        if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
+        if (request.thumbnailDataUrl && request.thumbnailDataUrl.substring(0, 22) === "data:image/jpeg;base64") {
             let element = document.createElement('img');
             element.src = request.thumbnailDataUrl;
             this.$previewBox.appendChild(element)
@@ -1600,27 +1607,33 @@ class WebShareTargetUI {
                 let shareTargetText;
 
                 if (url) {
-                    shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
+                    shareTargetText = url; // we share only the link - no text.
                 } else if (title && text) {
                     shareTargetText = title + '\r\n' + text;
                 } else {
                     shareTargetText = title + text;
                 }
 
-                console.log('Shared Target Text:', '"' + shareTargetText + '"');
                 Events.fire('activate-paste-mode', {files: [], text: shareTargetText})
             } else if (share_target_type === "files") {
-                const openRequest = window.indexedDB.open('pairdrop_store')
+                let openRequest = window.indexedDB.open('pairdrop_store')
-                openRequest.onsuccess( db => {
+                openRequest.onsuccess = e => {
+                    const db = e.target.result;
                     const tx = db.transaction('share_target_files', 'readwrite');
                     const store = tx.objectStore('share_target_files');
                     const request = store.getAll();
                     request.onsuccess = _ => {
-                        Events.fire('activate-paste-mode', {files: request.result, text: ""})
+                        const fileObjects = request.result;
+                        let filesReceived = [];
+                        for (let i=0; i<fileObjects.length; i++) {
+                            filesReceived.push(new File([fileObjects[i].buffer], fileObjects[i].name));
+                        }
                         const clearRequest = store.clear()
                         clearRequest.onsuccess = _ => db.close();
+
+                        Events.fire('activate-paste-mode', {files: filesReceived, text: ""})
+                    }
                 }
-                })
             }
             window.history.replaceState({}, "Rewrite URL", '/');
         }
@@ -1677,7 +1690,7 @@ class PersistentStorage {
             PersistentStorage.logBrowserNotCapable();
             return;
         }
-        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 2);
+        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 3);
         DBOpenRequest.onerror = (e) => {
             PersistentStorage.logBrowserNotCapable();
             console.log('Error initializing database: ');
@@ -1703,7 +1716,10 @@ class PersistentStorage {
             }
 
             try {
-                db.createObjectStore('share_target_files');
+                if (db.objectStoreNames.contains('share_target_files')) {
+                    db.deleteObjectStore('share_target_files');
+                }
+                db.createObjectStore('share_target_files', {autoIncrement: true});
             } catch (error) {
                 console.log("Object store named 'share_target_files' already exists")
             }
@@ -1936,68 +1952,84 @@ Events.on('load', () => {
     style.zIndex = -1;
     style.top = 0;
     style.left = 0;
-    let ctx = c.getContext('2d');
+    let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
+    let offscreenCanvases = [];
+
     function init() {
+        let oldW = w;
+        let oldH = h;
+        let oldOffset = offset
         w = document.documentElement.clientWidth;
         h = document.documentElement.clientHeight;
-        c.width = w;
-        c.height = h;
         offset = $$('footer').offsetHeight - 32;
         if (h > 800) offset += 16;
+
+        if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
+
+        c.width = w;
+        c.height = h;
         x0 = w / 2;
         y0 = h - offset;
-        dw = Math.max(w, h, 1000) / 13;
+        dw = Math.round(Math.max(w, h, 1000) / 13);
-        drawCircles();
+        drawCircles(cCtx, 0);
+
+        // enforce redrawing of frames
+        offscreenCanvases = [];
     }
     Events.on('bg-resize', _ => init());
     window.onresize = _ => Events.fire('bg-resize');
 
-    function drawCircle(radius) {
+    function drawCircle(ctx, radius) {
         ctx.beginPath();
-        let color = Math.round(255 * (1 - radius / Math.max(w, h)));
+        ctx.lineWidth = 2;
-        ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
+        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();
-        ctx.lineWidth = 2;
     }
 
-    let step = 0;
+    function drawCircles(ctx, frame) {
-
+        for (let i = 0; i < 13; i++) {
-    function drawCircles() {
+            drawCircle(ctx, dw * i + frame);
-        ctx.clearRect(0, 0, w, h);
-        for (let i = 0; i < 8; i++) {
-            drawCircle(dw * i + step % dw);
-        }
-        step += 1;
-    }
-
-    let loading = true;
-
-    function animate() {
-        if (loading || !finished()) {
-            requestAnimationFrame(function() {
-                drawCircles();
-                animate();
-            });
         }
     }
 
-    function finished() {
+    function createOffscreenCanvas(frame) {
-        return step % dw >= dw - 5;
+        let canvas = document.createElement("canvas");
+        canvas.width = c.width;
+        canvas.height = c.height;
+        offscreenCanvases[frame] = canvas;
+        let ctx = canvas.getContext('2d');
+        drawCircles(ctx, frame);
+    }
+
+    function drawFrame(frame) {
+        cCtx.clearRect(0, 0, w, h);
+        if (!offscreenCanvases[frame]) {
+            createOffscreenCanvas(frame);
+        }
+        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
+    }
+
+    let animate = true;
+    let currentFrame = 0;
+
+    function animateBg() {
+        if (currentFrame + 1 < dw || animate) {
+            currentFrame = (currentFrame + 1) % dw;
+            drawFrame(currentFrame);
+        }
+        setTimeout(_ => animateBg(), 3000 / dw);
     }
 
     window.animateBackground = function(l) {
-        if (!l) {
+        animate = l;
-            loading = false;
-        } else if (!loading) {
-            loading = true;
-            if (finished()) animate();
-        }
     };
+
     init();
-    animate();
+    animateBg();
 });
 
 document.changeFavicon = function (src) {

public/service-worker.js

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

public/styles.css

@@ -75,11 +75,75 @@ html {
 }
 
 header {
-    position: relative;
+    position: absolute;
-    height: 56px;
+    align-items: baseline;
-    align-items: center;
+    padding: 8px 16px;
-    padding: 16px;
     box-sizing: border-box;
+    width: 100vw;
+    z-index: 2;
+    top: 0;
+    right: 0;
+}
+
+header > a,
+header > div {
+    margin-left: 8px;
+}
+
+header > div {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+    touch-action: manipulation;
+}
+
+header > div .icon-button {
+    height: 40px;
+    transition: all 300ms;
+}
+
+header > div > div {
+    display: flex;
+    flex-direction: column;
+}
+
+header > div:not(:hover) .icon-button:not(.selected) {
+    height: 0;
+    opacity: 0;
+}
+
+header > div:hover::before {
+    border-radius: 20px;
+    background: currentColor;
+    opacity: 0.1;
+    transition: opacity 300ms;
+    content: '';
+    position: absolute;
+    width: 40px;
+    top: 0;
+    bottom: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+header > div:hover .icon-button.selected::before {
+    opacity: 0.1;
+}
+
+@media (pointer: coarse) {
+    header > div:hover .icon-button.selected:hover::before {
+        opacity: 0.2;
+    }
+
+    header > div .icon-button:not(.selected) {
+        height: 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    header > div > div {
+        flex-direction: column-reverse;
+    }
 }
 
 [hidden] {
@@ -192,15 +256,10 @@ x-noscript {
     }
 }
 
-/* Main Header */
-
-body>header a {
-    margin-left: 8px;
-}
-
 #center {
     position: relative;
     display: flex;
+    margin-top: 56px;
     flex-direction: column-reverse;
     flex-grow: 1;
     --footer-height: 132px;
@@ -459,7 +518,7 @@ x-peer[status] x-icon {
     text-align: center;
 }
 
-.name {
+.device-descriptor > div {
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
@@ -720,7 +779,7 @@ x-paper > div:last-child {
 
 x-paper > div:last-child > .button {
     height: 100%;
-    width: 50%;
+    width: 100%;
 }
 
 x-paper > div:last-child > .button:not(:last-child) {
@@ -974,8 +1033,8 @@ button::-moz-focus-inner {
 
 #about x-background {
     position: absolute;
-    top: calc(32px - 250px);
+    top: calc(28px - 250px);
-    right: calc(32px - 250px);
+    right: calc(36px - 250px);
     width: 500px;
     height: 500px;
     border-radius: 50%;

public_included_ws_fallback/index.html

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

public_included_ws_fallback/scripts/network.js

@@ -340,7 +340,7 @@ class Peer {
                 this._onFilesTransferRequest(messageJSON);
                 break;
             case 'header':
-                this._onFilesHeader(messageJSON);
+                this._onFileHeader(messageJSON);
                 break;
             case 'partition':
                 this._onReceivedPartitionEnd(messageJSON);
@@ -400,8 +400,8 @@ class Peer {
         this._requestPending = null;
     }
 
-    _onFilesHeader(header) {
+    _onFileHeader(header) {
-        if (this._requestAccepted?.header.length) {
+        if (this._requestAccepted && this._requestAccepted.header.length) {
             this._lastProgress = 0;
             this._digester = new FileDigester({size: header.size, name: header.name, mime: header.mime},
                 this._requestAccepted.totalSize,
@@ -454,6 +454,9 @@ class Peer {
             this._abortTransfer();
         }
 
+        // include for compatibility with Snapdrop for Android app
+        Events.fire('file-received', fileBlob);
+
         this._filesReceived.push(fileBlob);
         if (!this._requestAccepted.header.length) {
             this._busy = false;

public_included_ws_fallback/scripts/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

public_included_ws_fallback/scripts/theme.js

@@ -1,39 +1,78 @@
 (function(){
 
-  // Select the button
+  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const btnTheme = document.getElementById('theme');
+  const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
-  // Check for dark mode preference at the OS level
+
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+  const $themeAuto = document.getElementById('theme-auto');
-  

+  const $themeLight = document.getElementById('theme-light');
-  // Get the user's theme preference from local storage, if it's available
+  const $themeDark = document.getElementById('theme-dark');
-  const currentTheme = localStorage.getItem('theme');
+
-  // If the user's preference in localStorage is dark...
+  let currentTheme = localStorage.getItem('theme');
+
   if (currentTheme === 'dark') {
-    // ...let's toggle the .dark-theme class on the body
+    setModeToDark();
-    document.body.classList.toggle('dark-theme');
-  // Otherwise, if the user's preference in localStorage is light...
   } else if (currentTheme === 'light') {
-    // ...let's toggle the .light-theme class on the body
+    setModeToLight();
-    document.body.classList.toggle('light-theme');
   }
-  

+
-  // Listen for a click on the button
+  $themeAuto.addEventListener('click', _ => {
-  btnTheme.addEventListener('click', function(e) {
+    if (currentTheme) {
-    e.preventDefault();
+      setModeToAuto();
-    // If the user's OS setting is dark and matches our .dark-theme class...
-    let theme;
-    if (prefersDarkScheme.matches) {
-      // ...then toggle the light mode class
-      document.body.classList.toggle('light-theme');
-      // ...but use .dark-theme if the .light-theme class is already on the body,
-      theme = document.body.classList.contains('light-theme') ? 'light' : 'dark';
     } else {
-      // Otherwise, let's do the same thing, but for .dark-theme
+      setModeToDark();
-      document.body.classList.toggle('dark-theme');
+    }
-      theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
+  });
+  $themeLight.addEventListener('click', _ => {
+    if (currentTheme !== 'light') {
+      setModeToLight();
+    } else {
+      setModeToAuto();
+    }
+  });
+  $themeDark.addEventListener('click', _ => {
+    if (currentTheme !== 'dark') {
+      setModeToDark();
+    } else {
+      setModeToLight();
     }
-    // Finally, let's save the current preference to localStorage to keep using it
-    localStorage.setItem('theme', theme);
   });
 
+  function setModeToDark() {
+    document.body.classList.remove('light-theme');
+    document.body.classList.add('dark-theme');
+    localStorage.setItem('theme', 'dark');
+    currentTheme = 'dark';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.add("selected");
+  }
+
+  function setModeToLight() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.add('light-theme');
+    localStorage.setItem('theme', 'light');
+    currentTheme = 'light';
+
+    $themeAuto.classList.remove("selected");
+    $themeLight.classList.add("selected");
+    $themeDark.classList.remove("selected");
+  }
+
+  function setModeToAuto() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.remove('light-theme');
+    if (prefersDarkTheme) {
+      document.body.classList.add('dark-theme');
+    } else if (prefersLightTheme) {
+      document.body.classList.add('light-theme');
+    }
+    localStorage.removeItem('theme');
+    currentTheme = undefined;
+
+    $themeAuto.classList.add("selected");
+    $themeLight.classList.remove("selected");
+    $themeDark.classList.remove("selected");
+  }
+
 })();

public_included_ws_fallback/scripts/ui.js

@@ -107,8 +107,15 @@ class PeersUI {
     _getSavedDisplayName() {
         return new Promise((resolve) => {
             PersistentStorage.get('editedDisplayName')
-                .then(displayName => resolve(displayName ?? ""))
+                .then(displayName => {
-                .catch(_ => resolve(localStorage.getItem('editedDisplayName') ?? ""))
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
+                .catch(_ => {
+                    let displayName = localStorage.getItem('editedDisplayName');
+                    if (!displayName) displayName = "";
+                    resolve(displayName);
+                })
         });
     }
 
@@ -826,7 +833,7 @@ class ReceiveRequestDialog extends ReceiveDialog {
         const connectionHash = $(peerId).ui._connectionHash;
         this._parseFileData(displayName, connectionHash, request.header, request.imagesOnly, request.totalSize);
 
-        if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
+        if (request.thumbnailDataUrl && request.thumbnailDataUrl.substring(0, 22) === "data:image/jpeg;base64") {
             let element = document.createElement('img');
             element.src = request.thumbnailDataUrl;
             this.$previewBox.appendChild(element)
@@ -1601,27 +1608,33 @@ class WebShareTargetUI {
                 let shareTargetText;
 
                 if (url) {
-                    shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
+                    shareTargetText = url; // we share only the link - no text.
                 } else if (title && text) {
                     shareTargetText = title + '\r\n' + text;
                 } else {
                     shareTargetText = title + text;
                 }
 
-                console.log('Shared Target Text:', '"' + shareTargetText + '"');
                 Events.fire('activate-paste-mode', {files: [], text: shareTargetText})
             } else if (share_target_type === "files") {
-                const openRequest = window.indexedDB.open('pairdrop_store')
+                let openRequest = window.indexedDB.open('pairdrop_store')
-                openRequest.onsuccess( db => {
+                openRequest.onsuccess = e => {
+                    const db = e.target.result;
                     const tx = db.transaction('share_target_files', 'readwrite');
                     const store = tx.objectStore('share_target_files');
                     const request = store.getAll();
                     request.onsuccess = _ => {
-                        Events.fire('activate-paste-mode', {files: request.result, text: ""})
+                        const fileObjects = request.result;
+                        let filesReceived = [];
+                        for (let i=0; i<fileObjects.length; i++) {
+                            filesReceived.push(new File([fileObjects[i].buffer], fileObjects[i].name));
+                        }
                         const clearRequest = store.clear()
                         clearRequest.onsuccess = _ => db.close();
+
+                        Events.fire('activate-paste-mode', {files: filesReceived, text: ""})
+                    }
                 }
-                })
             }
             window.history.replaceState({}, "Rewrite URL", '/');
         }
@@ -1678,7 +1691,7 @@ class PersistentStorage {
             PersistentStorage.logBrowserNotCapable();
             return;
         }
-        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 2);
+        const DBOpenRequest = window.indexedDB.open('pairdrop_store', 3);
         DBOpenRequest.onerror = (e) => {
             PersistentStorage.logBrowserNotCapable();
             console.log('Error initializing database: ');
@@ -1704,7 +1717,10 @@ class PersistentStorage {
             }
 
             try {
-                db.createObjectStore('share_target_files');
+                if (db.objectStoreNames.contains('share_target_files')) {
+                    db.deleteObjectStore('share_target_files');
+                }
+                db.createObjectStore('share_target_files', {autoIncrement: true});
             } catch (error) {
                 console.log("Object store named 'share_target_files' already exists")
             }
@@ -1937,67 +1953,84 @@ Events.on('load', () => {
     style.zIndex = -1;
     style.top = 0;
     style.left = 0;
-    let ctx = c.getContext('2d');
+    let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
+    let offscreenCanvases = [];
+
     function init() {
+        let oldW = w;
+        let oldH = h;
+        let oldOffset = offset
         w = document.documentElement.clientWidth;
         h = document.documentElement.clientHeight;
+        offset = $$('footer').offsetHeight - 32;
+        if (h > 800) offset += 16;
+
+        if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
+
         c.width = w;
         c.height = h;
-        offset = $$('footer').offsetHeight - 32;
         x0 = w / 2;
         y0 = h - offset;
-        dw = Math.max(w, h, 1000) / 13;
+        dw = Math.round(Math.max(w, h, 1000) / 13);
-        drawCircles();
+        drawCircles(cCtx, 0);
+
+        // enforce redrawing of frames
+        offscreenCanvases = [];
     }
     Events.on('bg-resize', _ => init());
     window.onresize = _ => Events.fire('bg-resize');
 
-    function drawCircle(radius) {
+    function drawCircle(ctx, radius) {
         ctx.beginPath();
-        let color = Math.round(255 * (1 - radius / Math.max(w, h)));
+        ctx.lineWidth = 2;
-        ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
+        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();
-        ctx.lineWidth = 2;
     }
 
-    let step = 0;
+    function drawCircles(ctx, frame) {
-
+        for (let i = 0; i < 13; i++) {
-    function drawCircles() {
+            drawCircle(ctx, dw * i + frame);
-        ctx.clearRect(0, 0, w, h);
-        for (let i = 0; i < 8; i++) {
-            drawCircle(dw * i + step % dw);
-        }
-        step += 1;
-    }
-
-    let loading = true;
-
-    function animate() {
-        if (loading || !finished()) {
-            requestAnimationFrame(function() {
-                drawCircles();
-                animate();
-            });
         }
     }
 
-    function finished() {
+    function createOffscreenCanvas(frame) {
-        return step % dw >= dw - 5;
+        let canvas = document.createElement("canvas");
+        canvas.width = c.width;
+        canvas.height = c.height;
+        offscreenCanvases[frame] = canvas;
+        let ctx = canvas.getContext('2d');
+        drawCircles(ctx, frame);
+    }
+
+    function drawFrame(frame) {
+        cCtx.clearRect(0, 0, w, h);
+        if (!offscreenCanvases[frame]) {
+            createOffscreenCanvas(frame);
+        }
+        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
+    }
+
+    let animate = true;
+    let currentFrame = 0;
+
+    function animateBg() {
+        if (currentFrame + 1 < dw || animate) {
+            currentFrame = (currentFrame + 1) % dw;
+            drawFrame(currentFrame);
+        }
+        setTimeout(_ => animateBg(), 3000 / dw);
     }
 
     window.animateBackground = function(l) {
-        if (!l) {
+        animate = l;
-            loading = false;
-        } else if (!loading) {
-            loading = true;
-            if (finished()) animate();
-        }
     };
+
     init();
-    animate();
+    animateBg();
 });
 
 document.changeFavicon = function (src) {

public_included_ws_fallback/service-worker.js

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

public_included_ws_fallback/styles.css

@@ -76,11 +76,75 @@ html {
 }
 
 header {
-    position: relative;
+    position: absolute;
-    height: 56px;
+    align-items: baseline;
-    align-items: center;
+    padding: 8px 16px;
-    padding: 16px;
     box-sizing: border-box;
+    width: 100vw;
+    z-index: 2;
+    top: 0;
+    right: 0;
+}
+
+header > a,
+header > div {
+    margin-left: 8px;
+}
+
+header > div {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+    touch-action: manipulation;
+}
+
+header > div .icon-button {
+    height: 40px;
+    transition: all 300ms;
+}
+
+header > div > div {
+    display: flex;
+    flex-direction: column;
+}
+
+header > div:not(:hover) .icon-button:not(.selected) {
+    height: 0;
+    opacity: 0;
+}
+
+header > div:hover::before {
+    border-radius: 20px;
+    background: currentColor;
+    opacity: 0.1;
+    transition: opacity 300ms;
+    content: '';
+    position: absolute;
+    width: 40px;
+    top: 0;
+    bottom: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+header > div:hover .icon-button.selected::before {
+    opacity: 0.1;
+}
+
+@media (pointer: coarse) {
+    header > div:hover .icon-button.selected:hover::before {
+        opacity: 0.2;
+    }
+
+    header > div .icon-button:not(.selected) {
+        height: 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    header > div > div {
+        flex-direction: column-reverse;
+    }
 }
 
 [hidden] {
@@ -193,15 +257,10 @@ x-noscript {
     }
 }
 
-/* Main Header */
-
-body>header a {
-    margin-left: 8px;
-}
-
 #center {
     position: relative;
     display: flex;
+    margin-top: 56px;
     flex-direction: column-reverse;
     flex-grow: 1;
     --footer-height: 146px;
@@ -486,7 +545,7 @@ x-peer.ws-peer .highlight-wrapper {
     text-align: center;
 }
 
-.name {
+.device-descriptor > div {
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
@@ -746,7 +805,7 @@ x-paper > div:last-child {
 
 x-paper > div:last-child > .button {
     height: 100%;
-    width: 50%;
+    width: 100%;
 }
 
 x-paper > div:last-child > .button:not(:last-child) {

rtc_config_example.json

@@ -3,14 +3,6 @@
   "iceServers": [
     {
       "urls": "stun:stun.l.google.com:19302"
-    },
-    {
-      "urls": "stun:openrelay.metered.ca:80"
-    },
-    {
-      "urls": "turn:openrelay.metered.ca:443",
-      "username": "openrelayproject",
-      "credential": "openrelayproject"
     }
   ]
 }