increase version to v1.7.3

Add new env var `IPV6_LOCALIZE` to enable auto discovery for IPv6 addresses

docs/host-your-own.md

@@ -35,6 +35,14 @@ Set options by using the following flags in the `docker run` command:
 ```
 > Limits clients to 1000 requests per 5 min
 
+##### IPv6 Localization
+```bash
+-e IPV6_LOCALIZE=4
+```
+> To enable Peer Discovery among IPv6 peers, you can specify a reduced number of segments of the client IPv6 address to be evaluated as the peer's IP. This can be especially useful when using Cloudflare as a proxy.
+> 
+> The flag must be set to an **integer** between `1` and `7`. The number represents the number of IPv6 [hextets](https://en.wikipedia.org/wiki/IPv6#Address_representation) to match the client IP against. The most common value would be `4`, which will group peers within the same `/64` subnet.
+
 ##### Websocket Fallback (for VPN)
 ```bash
 -e WS_FALLBACK=true
@@ -200,6 +208,12 @@ $env:PORT=3010; npm start
 ```
 > Specify the port PairDrop is running on. (Default: 3000)
 
+#### IPv6 Localization
+```bash
+IPV6_LOCALIZE=4
+```
+> Truncate a portion of the client IPv6 address to make peers more discoverable. See [Options/Flags](#options--flags) above.
+
 #### Specify STUN/TURN Server
 On Unix based systems
 ```bash

index.js

@@ -96,6 +96,17 @@ if (debugMode) {
     console.log("DEBUG_MODE is active. To protect privacy, do not use in production.")
 }
 
+let ipv6_lcl;
+if (process.env.IPV6_LOCALIZE) {
+    ipv6_lcl = parseInt(process.env.IPV6_LOCALIZE);
+    if (!ipv6_lcl || !(0 < ipv6_lcl && ipv6_lcl < 8)) {
+        console.error("IPV6_LOCALIZE must be an integer between 1 and 7");
+        return;
+    }
+
+    console.log("IPv6 client IPs will be localized to", ipv6_lcl, ipv6_lcl === 1 ? "segment" : "segments");
+}
+
 app.use(function(req, res) {
     res.redirect('/');
 });
@@ -516,11 +527,19 @@ class Peer {
         if (this.ip.substring(0,7) === "::ffff:")
             this.ip = this.ip.substring(7);
 
+        let ipv6_was_localized = false;
+        if (ipv6_lcl && this.ip.includes(':')) {
+            this.ip = this.ip.split(':',ipv6_lcl).join(':');
+            ipv6_was_localized = true;
+        }
+
         if (debugMode) {
             console.debug("----DEBUGGING-PEER-IP-START----");
             console.debug("remoteAddress:", request.connection.remoteAddress);
             console.debug("x-forwarded-for:", request.headers['x-forwarded-for']);
             console.debug("cf-connecting-ip:", request.headers['cf-connecting-ip']);
+            if (ipv6_was_localized)
+                console.debug("IPv6 client IP was localized to", ipv6_lcl, ipv6_lcl > 1 ? "segments" : "segment");
             console.debug("PairDrop uses:", this.ip);
             console.debug("IP is private:", this.ipIsPrivate(this.ip));
             console.debug("if IP is private, '127.0.0.1' is used instead");

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pairdrop",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.7.2",
+      "version": "1.7.3",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "",
   "main": "index.js",
   "scripts": {

public/index.html

@@ -276,7 +276,10 @@
             <svg class="icon logo">
                 <use xlink:href="#wifi-tethering" />
             </svg>
-            <h1>PairDrop</h1>
+            <div class="title-wrapper">
+                <h1>PairDrop</h1>
+                <div class="font-subheading">v1.7.3</div>
+            </div>
             <div class="font-subheading">The easiest way to transfer files across devices</div>
             <div class="row">
                 <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer">
@@ -303,6 +306,7 @@
         </section>
         <x-background></x-background>
     </x-about>
+    <canvas class="circles"></canvas>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">

public/scripts/ui.js

@@ -1306,7 +1306,7 @@ class SendTextDialog extends Dialog {
     }
 
     _textInputEmpty() {
-        return this.$text.innerText === "\n";
+        return !this.$text.innerText || this.$text.innerText === "\n";
     }
 
     _onChange(e) {
@@ -2249,14 +2249,7 @@ window.addEventListener('beforeinstallprompt', e => {
 
 // Background Circles
 Events.on('load', () => {
-    let c = document.createElement('canvas');
-    let style = c.style;
-    style.width = '100%';
-    style.position = 'absolute';
-    style.zIndex = -1;
-    style.top = 0;
-    style.left = 0;
-    style.animation = "fade-in 800ms";
+    let c = $$('canvas');
     let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
@@ -2277,11 +2270,7 @@ Events.on('load', () => {
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
 
-        if (document.body.contains(c)) {
-            document.body.removeChild(c);
-        }
         drawCircles(cCtx, dw);
-        document.body.appendChild(c);
     }
 
     Events.on('bg-resize', _ => init());
@@ -2297,6 +2286,7 @@ Events.on('load', () => {
     }
 
     function drawCircles(ctx, frame) {
+        ctx.clearRect(0, 0, w, h);
         for (let i = 0; i < 13; i++) {
             drawCircle(ctx, dw * i + frame + 33);
         }

public/service-worker.js

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

public/styles.css

@@ -1142,6 +1142,15 @@ button::-moz-focus-inner {
     --icon-size: 96px;
 }
 
+#about .title-wrapper {
+    display: flex;
+    align-items: baseline;
+}
+
+#about .title-wrapper > div {
+    margin-left: 0.5em;
+}
+
 #about x-background {
     position: absolute;
     --size: max(max(230vw, 230vh), calc(150vh + 150vw));
@@ -1178,6 +1187,14 @@ button::-moz-focus-inner {
     align-self: end;
 }
 
+canvas.circles {
+    width: 100vw;
+    position: absolute;
+    z-index: -10;
+    top: 0;
+    left: 0;
+}
+
 /* Loading Indicator */
 
 .progress {

public_included_ws_fallback/index.html

@@ -279,7 +279,10 @@
             <svg class="icon logo">
                 <use xlink:href="#wifi-tethering" />
             </svg>
-            <h1>PairDrop</h1>
+            <div class="title-wrapper">
+                <h1>PairDrop</h1>
+                <div class="font-subheading">v1.7.3</div>
+            </div>
             <div class="font-subheading">The easiest way to transfer files across devices</div>
             <div class="row">
                 <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer">
@@ -306,6 +309,7 @@
         </section>
         <x-background></x-background>
     </x-about>
+    <canvas class="circles"></canvas>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">

public_included_ws_fallback/scripts/ui.js

@@ -1307,7 +1307,7 @@ class SendTextDialog extends Dialog {
     }
 
     _textInputEmpty() {
-        return this.$text.innerText === "\n";
+        return !this.$text.innerText || this.$text.innerText === "\n";
     }
 
     _onChange(e) {
@@ -2250,14 +2250,7 @@ window.addEventListener('beforeinstallprompt', e => {
 
 // Background Circles
 Events.on('load', () => {
-    let c = document.createElement('canvas');
-    let style = c.style;
-    style.width = '100%';
-    style.position = 'absolute';
-    style.zIndex = -1;
-    style.top = 0;
-    style.left = 0;
-    style.animation = "fade-in 800ms";
+    let c = $$('canvas');
     let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
@@ -2277,11 +2270,7 @@ Events.on('load', () => {
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
 
-        if (document.body.contains(c)) {
-            document.body.removeChild(c);
-        }
         drawCircles(cCtx, dw);
-        document.body.appendChild(c);
     }
 
     Events.on('bg-resize', _ => init());
@@ -2297,6 +2286,7 @@ Events.on('load', () => {
     }
 
     function drawCircles(ctx, frame) {
+        ctx.clearRect(0, 0, w, h);
         for (let i = 0; i < 13; i++) {
             drawCircle(ctx, dw * i + frame + 33);
         }

public_included_ws_fallback/service-worker.js

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

public_included_ws_fallback/styles.css

@@ -1168,6 +1168,15 @@ button::-moz-focus-inner {
     --icon-size: 96px;
 }
 
+#about .title-wrapper {
+    display: flex;
+    align-items: baseline;
+}
+
+#about .title-wrapper > div {
+    margin-left: 0.5em;
+}
+
 #about x-background {
     position: absolute;
     --size: max(max(230vw, 230vh), calc(150vh + 150vw));
@@ -1204,6 +1213,14 @@ button::-moz-focus-inner {
     align-self: end;
 }
 
+canvas.circles {
+    width: 100vw;
+    position: absolute;
+    z-index: -10;
+    top: 0;
+    left: 0;
+}
+
 /* Loading Indicator */
 
 .progress {