increase version to v1.6.3

Add debug mode to enable debugging auto discovery

docs/host-your-own.md

@@ -30,7 +30,7 @@ Set options by using the following flags in the `docker run` command:
 > - 3000 -> `-p 127.0.0.1:3000:3000`
 > - 8080 -> `-p 127.0.0.1:8080:3000`
 ##### Rate limiting requests
-```
+```bash
 -e RATE_LIMIT=true
 ```
 > Limits clients to 1000 requests per 5 min
@@ -70,6 +70,31 @@ Set options by using the following flags in the `docker run` command:
 > }
 > ```
 
+##### Debug Mode
+```bash
+-e DEBUG_MODE="true"
+```
+
+> Use this flag to enable debugging information about the connecting peers IP addresses. This is quite useful to check whether the [#HTTP-Server](#http-server) 
+> is configured correctly, so the auto discovery feature works correctly. Otherwise, all clients discover each other mutually, independently of their network status.
+> 
+> If this flag is set to `"true"` each peer that connects to the PairDrop server will produce a log to STDOUT like this:
+> ```
+> ----DEBUGGING-PEER-IP-START----
+> remoteAddress: ::ffff:172.17.0.1
+> x-forwarded-for: 19.117.63.126
+> cf-connecting-ip: undefined
+> PairDrop uses: 19.117.63.126
+> IP is private: false
+> if IP is private, '127.0.0.1' is used instead
+> ----DEBUGGING-PEER-IP-END----
+> ```
+> If the IP PairDrop uses is the public IP of your device everything is correctly setup. 
+>To find out your devices public IP visit https://www.whatismyip.com/.
+> 
+> To preserve your clients' privacy, **never use this flag in production!** 
+
+
 <br>
 
 ### Docker Image from GHCR
@@ -82,7 +107,7 @@ 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)
+> 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
@@ -103,7 +128,7 @@ 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)
+> The Docker Image includes a Healthcheck. To learn more see [Docker Swarm Usage](docker-swarm-usage.md#docker-swarm-usage)
 
 <br>
 
@@ -201,6 +226,36 @@ $env:RTC_CONFIG="rtc_config.json"; npm start
 > }
 > ```
 
+#### Debug Mode
+On Unix based systems
+```bash
+DEBUG_MODE="true" npm start
+```
+On Windows
+```bash
+$env:DEBUG_MODE="true"; npm start 
+```
+
+> Use this flag to enable debugging information about the connecting peers IP addresses. This is quite useful to check whether the [#HTTP-Server](#http-server)
+> is configured correctly, so the auto discovery feature works correctly. Otherwise, all clients discover each other mutually, independently of their network status.
+>
+> If this flag is set to `"true"` each peer that connects to the PairDrop server will produce a log to STDOUT like this:
+> ```
+> ----DEBUGGING-PEER-IP-START----
+> remoteAddress: ::ffff:172.17.0.1
+> x-forwarded-for: 19.117.63.126
+> cf-connecting-ip: undefined
+> PairDrop uses: 19.117.63.126
+> IP is private: false
+> if IP is private, '127.0.0.1' is used instead
+> ----DEBUGGING-PEER-IP-END----
+> ```
+> If the IP PairDrop uses is the public IP of your device everything is correctly setup.
+>To find out your devices public IP visit https://www.whatismyip.com/.
+>
+> To preserve your clients' privacy, **never use this flag in production!**
+
+
 ### Options / Flags
 #### Local Run
 ```bash
@@ -257,6 +312,8 @@ npm run start:prod -- --localhost-only --include-ws-fallback
 ## HTTP-Server
 When running PairDrop, the `X-Forwarded-For` header has to be set by a proxy. Otherwise, all clients will be mutually visible.
 
+To check if your setup is configured correctly [use the environment variable `DEBUG_MODE="true"`](#debug-mode).
+
 ### Using nginx
 #### Allow http and https requests
 ```

index.js

@@ -90,6 +90,12 @@ if (process.argv.includes('--include-ws-fallback')) {
     app.use(express.static('public'));
 }
 
+const debugMode = process.env.DEBUG_MODE === "true";
+
+if (debugMode) {
+    console.log("DEBUG_MODE is active. To protect privacy, do not use in production.")
+}
+
 app.use(function(req, res) {
     res.redirect('/');
 });
@@ -502,6 +508,17 @@ class Peer {
         if (this.ip.substring(0,7) === "::ffff:")
             this.ip = this.ip.substring(7);
 
+        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']);
+            console.debug("PairDrop uses:", this.ip);
+            console.debug("IP is private:", this.ipIsPrivate(this.ip));
+            console.debug("if IP is private, '127.0.0.1' is used instead");
+            console.debug("----DEBUGGING-PEER-IP-END----");
+        }
+
         // IPv4 and IPv6 use different values to refer to localhost
         // put all peers on the same network as the server into the same room as well
         if (this.ip === '::1' || this.ipIsPrivate(this.ip)) {

package-lock.json

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

package.json

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

public/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!-- Web App Config -->
     <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,24 +39,24 @@
 
 <body translate="no">
     <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" title="About PairDrop" aria-label="Open About PairDrop">
             <svg class="icon">
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
         <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt Theme to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
             </div>
             <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Use Light-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
                 </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" title="Always Use Dark-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
@@ -264,7 +264,7 @@
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>

public/scripts/ui.js

@@ -57,6 +57,12 @@ class PeersUI {
             console.log("Retrieved edited display name:", displayName)
             if (displayName) Events.fire('self-display-name-changed', displayName);
         });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
     }
 
     _insertDisplayName(displayName) {
@@ -175,7 +181,6 @@ class PeersUI {
         if (!$peer) return;
         $peer.remove();
         this.evaluateOverflowing();
-        if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
     }
 
     _onSecretRoomDeleted(roomSecret) {
@@ -315,7 +320,6 @@ class PeerUI {
         $$('x-peers').appendChild(this.$el)
         Events.fire('peer-added');
         this.$xInstructions = $$('x-instructions');
-        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
     }
 
     html() {
@@ -1571,27 +1575,15 @@ class NetworkStatusUI {
     constructor() {
         Events.on('offline', _ => this._showOfflineMessage());
         Events.on('online', _ => this._showOnlineMessage());
-        Events.on('ws-connected', _ => this._onWsConnected());
-        Events.on('ws-disconnected', _ => this._onWsDisconnected());
         if (!navigator.onLine) this._showOfflineMessage();
     }
 
     _showOfflineMessage() {
         Events.fire('notify-user', 'You are offline');
-        window.animateBackground(false);
     }
 
     _showOnlineMessage() {
         Events.fire('notify-user', 'You are back online');
-        window.animateBackground(true);
-    }
-
-    _onWsConnected() {
-        window.animateBackground(true);
-    }
-
-    _onWsDisconnected() {
-        window.animateBackground(false);
     }
 }
 
@@ -1942,28 +1934,26 @@ window.addEventListener('beforeinstallprompt', e => {
     return e.preventDefault();
 });
 
-// Background Animation
+// Background Circles
 Events.on('load', () => {
     let c = document.createElement('canvas');
-    document.body.appendChild(c);
     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 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;
+        offset = $$('footer').offsetHeight - 33;
         if (h > 800) offset += 16;
 
         if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
@@ -1973,63 +1963,33 @@ Events.on('load', () => {
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
-        drawCircles(cCtx, 0);
 
-        // enforce redrawing of frames
-        offscreenCanvases = [];
+        if (document.body.contains(c)) {
+            document.body.removeChild(c);
+        }
+        drawCircles(cCtx, dw);
+        document.body.appendChild(c);
     }
+
     Events.on('bg-resize', _ => init());
     window.onresize = _ => Events.fire('bg-resize');
 
     function drawCircle(ctx, radius) {
         ctx.beginPath();
         ctx.lineWidth = 2;
-        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
-        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
+        let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`;
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();
     }
 
     function drawCircles(ctx, frame) {
         for (let i = 0; i < 13; i++) {
-            drawCircle(ctx, dw * i + frame);
+            drawCircle(ctx, dw * i + frame + 33);
         }
     }
 
-    function createOffscreenCanvas(frame) {
-        let canvas = document.createElement("canvas");
-        canvas.width = c.width;
-        canvas.height = c.height;
-        offscreenCanvases[frame] = canvas;
-        let ctx = canvas.getContext('2d');
-        drawCircles(ctx, frame);
-    }
-
-    function drawFrame(frame) {
-        cCtx.clearRect(0, 0, w, h);
-        if (!offscreenCanvases[frame]) {
-            createOffscreenCanvas(frame);
-        }
-        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
-    }
-
-    let animate = true;
-    let currentFrame = 0;
-
-    function animateBg() {
-        if (currentFrame + 1 < dw || animate) {
-            currentFrame = (currentFrame + 1) % dw;
-            drawFrame(currentFrame);
-        }
-        setTimeout(_ => animateBg(), 3000 / dw);
-    }
-
-    window.animateBackground = function(l) {
-        animate = l;
-    };
-
     init();
-    animateBg();
 });
 
 document.changeFavicon = function (src) {

public/service-worker.js

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

public/styles.css

@@ -405,10 +405,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,

public_included_ws_fallback/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!-- Web App Config -->
     <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,24 +39,24 @@
 
 <body translate="no">
     <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" title="About PairDrop" aria-label="Open About PairDrop">
             <svg class="icon">
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
         <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt Theme to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
             </div>
             <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Use Light-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
                 </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" title="Always Use Dark-Theme" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
@@ -267,7 +267,7 @@
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>

public_included_ws_fallback/scripts/ui.js

@@ -57,6 +57,12 @@ class PeersUI {
             console.log("Retrieved edited display name:", displayName)
             if (displayName) Events.fire('self-display-name-changed', displayName);
         });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
     }
 
     _insertDisplayName(displayName) {
@@ -175,7 +181,6 @@ class PeersUI {
         if (!$peer) return;
         $peer.remove();
         this.evaluateOverflowing();
-        if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
     }
 
     _onSecretRoomDeleted(roomSecret) {
@@ -315,7 +320,6 @@ class PeerUI {
         $$('x-peers').appendChild(this.$el)
         Events.fire('peer-added');
         this.$xInstructions = $$('x-instructions');
-        setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
     }
 
     html() {
@@ -362,7 +366,6 @@ class PeerUI {
         this.$el.ui = this;
         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();
 
         this._callbackInput = e => this._onFilesSelected(e)
@@ -1572,27 +1575,15 @@ class NetworkStatusUI {
     constructor() {
         Events.on('offline', _ => this._showOfflineMessage());
         Events.on('online', _ => this._showOnlineMessage());
-        Events.on('ws-connected', _ => this._onWsConnected());
-        Events.on('ws-disconnected', _ => this._onWsDisconnected());
         if (!navigator.onLine) this._showOfflineMessage();
     }
 
     _showOfflineMessage() {
         Events.fire('notify-user', 'You are offline');
-        window.animateBackground(false);
     }
 
     _showOnlineMessage() {
         Events.fire('notify-user', 'You are back online');
-        window.animateBackground(true);
-    }
-
-    _onWsConnected() {
-        window.animateBackground(true);
-    }
-
-    _onWsDisconnected() {
-        window.animateBackground(false);
     }
 }
 
@@ -1943,28 +1934,26 @@ window.addEventListener('beforeinstallprompt', e => {
     return e.preventDefault();
 });
 
-// Background Animation
+// Background Circles
 Events.on('load', () => {
     let c = document.createElement('canvas');
-    document.body.appendChild(c);
     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 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;
+        offset = $$('footer').offsetHeight - 33;
         if (h > 800) offset += 16;
 
         if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
@@ -1974,63 +1963,33 @@ Events.on('load', () => {
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
-        drawCircles(cCtx, 0);
 
-        // enforce redrawing of frames
-        offscreenCanvases = [];
+        if (document.body.contains(c)) {
+            document.body.removeChild(c);
+        }
+        drawCircles(cCtx, dw);
+        document.body.appendChild(c);
     }
+
     Events.on('bg-resize', _ => init());
     window.onresize = _ => Events.fire('bg-resize');
 
     function drawCircle(ctx, radius) {
         ctx.beginPath();
         ctx.lineWidth = 2;
-        let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h));
-        ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`;
+        let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h));
+        ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`;
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();
     }
 
     function drawCircles(ctx, frame) {
         for (let i = 0; i < 13; i++) {
-            drawCircle(ctx, dw * i + frame);
+            drawCircle(ctx, dw * i + frame + 33);
         }
     }
 
-    function createOffscreenCanvas(frame) {
-        let canvas = document.createElement("canvas");
-        canvas.width = c.width;
-        canvas.height = c.height;
-        offscreenCanvases[frame] = canvas;
-        let ctx = canvas.getContext('2d');
-        drawCircles(ctx, frame);
-    }
-
-    function drawFrame(frame) {
-        cCtx.clearRect(0, 0, w, h);
-        if (!offscreenCanvases[frame]) {
-            createOffscreenCanvas(frame);
-        }
-        cCtx.drawImage(offscreenCanvases[frame], 0, 0);
-    }
-
-    let animate = true;
-    let currentFrame = 0;
-
-    function animateBg() {
-        if (currentFrame + 1 < dw || animate) {
-            currentFrame = (currentFrame + 1) % dw;
-            drawFrame(currentFrame);
-        }
-        setTimeout(_ => animateBg(), 3000 / dw);
-    }
-
-    window.animateBackground = function(l) {
-        animate = l;
-    };
-
     init();
-    animateBg();
 });
 
 document.changeFavicon = function (src) {

public_included_ws_fallback/service-worker.js

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

public_included_ws_fallback/styles.css

@@ -415,10 +415,10 @@ x-no-peers {
     flex-direction: column;
     padding: 8px;
     text-align: center;
-    /* prevent flickering on load */
     animation: fade-in 300ms;
-    animation-delay: 500ms;
     animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }
 
 x-no-peers h2,