increase version to v1.4.2

pairdrop-cli: add fallback if navigator.clipboard.readText() is not available

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "pairdrop",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.4.1",
+      "version": "1.4.2",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",
         "express-rate-limit": "^6.7.0",
-        "ua-parser-js": "^1.0.33",
+        "ua-parser-js": "^1.0.34",
         "unique-names-generator": "^4.3.0",
         "ws": "^8.12.1"
       },
@@ -583,9 +583,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ==",
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
+      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew==",
       "funding": [
         {
           "type": "opencollective",
@@ -1070,9 +1070,9 @@
       }
     },
     "ua-parser-js": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
-      "integrity": "sha512-RqshF7TPTE0XLYAqmjlu5cLLuGdKrNu9O1KLA/qp39QtbZwuzwv1dT46DZSopoUMsYgXpB3Cv8a03FI8b74oFQ=="
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.34.tgz",
+      "integrity": "sha512-K9mwJm/DaB6mRLZfw6q8IMXipcrmuT6yfhYmwhAkuh+81sChuYstYA+znlgaflUPaYUa3odxKPKGw6Vw/lANew=="
     },
     "unique-names-generator": {
       "version": "4.7.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
   "dependencies": {
     "express": "^4.18.2",
     "express-rate-limit": "^6.7.0",
-    "ua-parser-js": "^1.0.33",
+    "ua-parser-js": "^1.0.34",
     "unique-names-generator": "^4.3.0",
     "ws": "^8.12.1"
   },

public/index.html

@@ -238,6 +238,7 @@
         <x-background class="full center">
             <x-paper shadow="2">
                 <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
+                <div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
                 <button class="button center" close>Close</button>
             </x-paper>
         </x-background>

public/scripts/network.js

@@ -194,6 +194,10 @@ class Peer {
         this._send(JSON.stringify(message));
     }
 
+    sendDisplayName(displayName) {
+        this.sendJSON({type: 'display-name-changed', displayName: displayName});
+    }
+
     async createHeader(file) {
         return {
             name: file.name,
@@ -490,7 +494,8 @@ class Peer {
     }
 
     _onDisplayNameChanged(message) {
-        if (!message.displayName) return;
+        if (!message.displayName || this._displayName === message.displayName) return;
+        this._displayName = message.displayName;
         Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
     }
 }
@@ -707,6 +712,7 @@ class PeersManager {
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
         Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName));
         Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
+        Events.on('peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail.peerId));
     }
 
     _onMessage(message) {
@@ -793,7 +799,7 @@ class PeersManager {
     _notifyPeerDisplayNameChanged(peerId) {
         const peer = this.peers[peerId];
         if (!peer) return;
-        this.peers[peerId].sendJSON({type: 'display-name-changed', displayName: this._displayName});
+        this.peers[peerId].sendDisplayName(this._displayName);
     }
 
     _onDisplayName(displayName) {
@@ -887,11 +893,11 @@ class Events {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 
-    static on(type, callback) {
-        return window.addEventListener(type, callback, false);
+    static on(type, callback, options = false) {
+        return window.addEventListener(type, callback, options);
     }
 
-    static off(type, callback) {
-        return window.removeEventListener(type, callback, false);
+    static off(type, callback, options = false) {
+        return window.removeEventListener(type, callback, options);
     }
 }

public/scripts/ui.js

@@ -241,7 +241,7 @@ class PeersUI {
 
             const _callback = (e) => this._sendClipboardData(e, files, text);
             Events.on('paste-pointerdown', _callback);
-            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback));
+            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback), { once: true });
 
             this.$cancelPasteModeBtn.removeAttribute('hidden');
 
@@ -1245,21 +1245,21 @@ class Base64ZipDialog extends Dialog {
         const base64Hash = window.location.hash.substring(1);
 
         this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
+        this.$fallbackTextarea = this.$el.querySelector('.textarea');
 
         if (base64Text) {
             this.show();
             if (base64Text === "paste") {
                 // ?base64text=paste
                 // base64 encoded string is ready to be pasted from clipboard
-                this.$pasteBtn.innerText = 'Tap here to paste text';
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
+                this.preparePasting("text");
             } else if (base64Text === "hash") {
                 // ?base64text=hash#BASE64ENCODED
                 // base64 encoded string is url hash which is never sent to server and faster (recommended)
                 this.processBase64Text(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1269,7 +1269,7 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Text(base64Text)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1282,14 +1282,13 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Zip(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'File content is incorrect.');
-                        console.log("File content incorrect.")
+                        console.log("File content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
             } else {
                 // ?base64zip=paste || ?base64zip=true
-                this.$pasteBtn.innerText = 'Tap here to paste files';
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
+                this.preparePasting('files');
             }
         }
     }
@@ -1299,39 +1298,60 @@ class Base64ZipDialog extends Dialog {
         this.$pasteBtn.innerText = "Processing...";
     }
 
-    async processClipboard(type) {
-        if (!navigator.clipboard.readText) {
-            Events.fire('notify-user', 'This feature is not available on your browser.');
-            console.log("navigator.clipboard.readText() is not available on your browser.")
-            this.hide();
-            return;
-        }
-
-        this._setPasteBtnToProcessing();
-
-        const base64 = await navigator.clipboard.readText();
-
-        if (!base64) return;
-
-        if (type === "text") {
-            this.processBase64Text(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
+    preparePasting(type) {
+        if (navigator.clipboard.readText) {
+            this.$pasteBtn.innerText = `Tap here to paste ${type}`;
+            this._clickCallback = _ => this.processClipboard(type);
+            this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
         } else {
-            this.processBase64Zip(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
+            console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
+            this.$pasteBtn.setAttribute('hidden', '');
+            this.$fallbackTextarea.setAttribute('placeholder', `Paste here to send ${type}`);
+            this.$fallbackTextarea.removeAttribute('hidden');
+            this._inputCallback = _ => this.processInput(type);
+            this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
+            this.$fallbackTextarea.focus();
         }
     }
 
+    async processInput(type) {
+        const base64 = this.$fallbackTextarea.textContent;
+        this.$fallbackTextarea.textContent = '';
+        await this.processBase64(type, base64);
+    }
+
+    async processClipboard(type) {
+        const base64 = await navigator.clipboard.readText();
+        await this.processBase64(type, base64);
+    }
+
+    isValidBase64(base64) {
+        try {
+            // check if input is base64 encoded
+            window.atob(base64);
+            return true;
+        } catch (e) {
+            // input is not base64 string.
+            return false;
+        }
+    }
+
+    async processBase64(type, base64) {
+        if (!base64 || !this.isValidBase64(base64)) return;
+        this._setPasteBtnToProcessing();
+        try {
+            if (type === "text") {
+                await this.processBase64Text(base64);
+            } else {
+                await this.processBase64Zip(base64);
+            }
+        } catch(_) {
+            Events.fire('notify-user', 'Clipboard content is incorrect.');
+            console.log("Clipboard content is incorrect.")
+        }
+        this.hide();
+    }
+
     processBase64Text(base64Text){
         return new Promise((resolve) => {
             this._setPasteBtnToProcessing();
@@ -1365,6 +1385,8 @@ class Base64ZipDialog extends Dialog {
 
     hide() {
         this.clearBrowserHistory();
+        this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
+        this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
         super.hide();
     }
 }

public/service-worker.js

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

public/styles.css

@@ -791,10 +791,29 @@ x-dialog .dialog-subheader {
     margin: auto -24px;
 }
 
-#base64-paste-btn {
+#base64-paste-btn,
+#base64-paste-dialog .textarea {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
+    text-align: center;
+}
+
+#base64-paste-dialog .textarea {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#base64-paste-dialog .textarea::before {
+    font-size: 15px;
+    letter-spacing: 0.12em;
+    color: var(--primary-color);
+    font-weight: 700;
+    text-transform: uppercase;
+    content: attr(placeholder);
 }
 
 #base64-paste-dialog button {

public_included_ws_fallback/index.html

@@ -241,6 +241,7 @@
         <x-background class="full center">
             <x-paper shadow="2">
                 <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
+                <div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
                 <button class="button center" close>Close</button>
             </x-paper>
         </x-background>

public_included_ws_fallback/scripts/network.js

@@ -205,6 +205,10 @@ class Peer {
         this._send(JSON.stringify(message));
     }
 
+    sendDisplayName(displayName) {
+        this.sendJSON({type: 'display-name-changed', displayName: displayName});
+    }
+
     async createHeader(file) {
         return {
             name: file.name,
@@ -501,7 +505,8 @@ class Peer {
     }
 
     _onDisplayNameChanged(message) {
-        if (!message.displayName) return;
+        if (!message.displayName || this._displayName === message.displayName) return;
+        this._displayName = message.displayName;
         Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
     }
 }
@@ -760,6 +765,7 @@ class PeersManager {
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
         Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName));
         Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
+        Events.on('peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail.peerId));
         Events.on('ws-disconnected', _ => this._onWsDisconnected());
         Events.on('ws-relay', e => this._onWsRelay(e.detail));
     }
@@ -874,7 +880,7 @@ class PeersManager {
     _notifyPeerDisplayNameChanged(peerId) {
         const peer = this.peers[peerId];
         if (!peer) return;
-        this.peers[peerId].sendJSON({type: 'display-name-changed', displayName: this._displayName});
+        this.peers[peerId].sendDisplayName(this._displayName);
     }
 
     _onDisplayName(displayName) {
@@ -968,11 +974,11 @@ class Events {
         window.dispatchEvent(new CustomEvent(type, { detail: detail }));
     }
 
-    static on(type, callback) {
-        return window.addEventListener(type, callback, false);
+    static on(type, callback, options = false) {
+        return window.addEventListener(type, callback, options);
     }
 
-    static off(type, callback) {
-        return window.removeEventListener(type, callback, false);
+    static off(type, callback, options = false) {
+        return window.removeEventListener(type, callback, options);
     }
 }

public_included_ws_fallback/scripts/ui.js

@@ -241,7 +241,7 @@ class PeersUI {
 
             const _callback = (e) => this._sendClipboardData(e, files, text);
             Events.on('paste-pointerdown', _callback);
-            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback));
+            Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback), { once: true });
 
             this.$cancelPasteModeBtn.removeAttribute('hidden');
 
@@ -1246,21 +1246,21 @@ class Base64ZipDialog extends Dialog {
         const base64Hash = window.location.hash.substring(1);
 
         this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
+        this.$fallbackTextarea = this.$el.querySelector('.textarea');
 
         if (base64Text) {
             this.show();
             if (base64Text === "paste") {
                 // ?base64text=paste
                 // base64 encoded string is ready to be pasted from clipboard
-                this.$pasteBtn.innerText = 'Tap here to paste text';
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('text'));
+                this.preparePasting("text");
             } else if (base64Text === "hash") {
                 // ?base64text=hash#BASE64ENCODED
                 // base64 encoded string is url hash which is never sent to server and faster (recommended)
                 this.processBase64Text(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1270,7 +1270,7 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Text(base64Text)
                     .catch(_ => {
                         Events.fire('notify-user', 'Text content is incorrect.');
-                        console.log("Text content incorrect.")
+                        console.log("Text content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
@@ -1283,14 +1283,13 @@ class Base64ZipDialog extends Dialog {
                 this.processBase64Zip(base64Hash)
                     .catch(_ => {
                         Events.fire('notify-user', 'File content is incorrect.');
-                        console.log("File content incorrect.")
+                        console.log("File content incorrect.");
                     }).finally(_ => {
                         this.hide();
                     });
             } else {
                 // ?base64zip=paste || ?base64zip=true
-                this.$pasteBtn.innerText = 'Tap here to paste files';
-                this.$pasteBtn.addEventListener('click', _ => this.processClipboard('file'));
+                this.preparePasting('files');
             }
         }
     }
@@ -1300,39 +1299,60 @@ class Base64ZipDialog extends Dialog {
         this.$pasteBtn.innerText = "Processing...";
     }
 
-    async processClipboard(type) {
-        if (!navigator.clipboard.readText) {
-            Events.fire('notify-user', 'This feature is not available on your browser.');
-            console.log("navigator.clipboard.readText() is not available on your browser.")
-            this.hide();
-            return;
-        }
-
-        this._setPasteBtnToProcessing();
-
-        const base64 = await navigator.clipboard.readText();
-
-        if (!base64) return;
-
-        if (type === "text") {
-            this.processBase64Text(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
+    preparePasting(type) {
+        if (navigator.clipboard.readText) {
+            this.$pasteBtn.innerText = `Tap here to paste ${type}`;
+            this._clickCallback = _ => this.processClipboard(type);
+            this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
         } else {
-            this.processBase64Zip(base64)
-                .catch(_ => {
-                    Events.fire('notify-user', 'Clipboard content is incorrect.');
-                    console.log("Clipboard content is incorrect.")
-                }).finally(_ => {
-                    this.hide();
-                });
+            console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
+            this.$pasteBtn.setAttribute('hidden', '');
+            this.$fallbackTextarea.setAttribute('placeholder', `Paste here to send ${type}`);
+            this.$fallbackTextarea.removeAttribute('hidden');
+            this._inputCallback = _ => this.processInput(type);
+            this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
+            this.$fallbackTextarea.focus();
         }
     }
 
+    async processInput(type) {
+        const base64 = this.$fallbackTextarea.textContent;
+        this.$fallbackTextarea.textContent = '';
+        await this.processBase64(type, base64);
+    }
+
+    async processClipboard(type) {
+        const base64 = await navigator.clipboard.readText();
+        await this.processBase64(type, base64);
+    }
+
+    isValidBase64(base64) {
+        try {
+            // check if input is base64 encoded
+            window.atob(base64);
+            return true;
+        } catch (e) {
+            // input is not base64 string.
+            return false;
+        }
+    }
+
+    async processBase64(type, base64) {
+        if (!base64 || !this.isValidBase64(base64)) return;
+        this._setPasteBtnToProcessing();
+        try {
+            if (type === "text") {
+                await this.processBase64Text(base64);
+            } else {
+                await this.processBase64Zip(base64);
+            }
+        } catch(_) {
+            Events.fire('notify-user', 'Clipboard content is incorrect.');
+            console.log("Clipboard content is incorrect.")
+        }
+        this.hide();
+    }
+
     processBase64Text(base64Text){
         return new Promise((resolve) => {
             this._setPasteBtnToProcessing();

public_included_ws_fallback/service-worker.js

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

public_included_ws_fallback/styles.css

@@ -817,10 +817,29 @@ x-dialog .dialog-subheader {
     margin: auto -24px;
 }
 
-#base64-paste-btn {
+#base64-paste-btn,
+#base64-paste-dialog .textarea {
     width: 100%;
     height: 40vh;
     border: solid 12px #438cff;
+    text-align: center;
+}
+
+#base64-paste-dialog .textarea {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#base64-paste-dialog .textarea::before {
+    font-size: 15px;
+    letter-spacing: 0.12em;
+    color: var(--primary-color);
+    font-weight: 700;
+    text-transform: uppercase;
+    content: attr(placeholder);
 }
 
 #base64-paste-dialog button {