increase version to v1.4.4

package-lock.json

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

package.json

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

public/index.html

@@ -122,7 +122,7 @@
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
                     <div class="center row-reverse">
                         <button class="button" type="submit" disabled>Pair</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -137,7 +137,7 @@
                     <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
                     <div class="center row-reverse">
                         <button class="button" type="submit">Unpair Devices</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -209,7 +209,7 @@
                     <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                     <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <button class="button" title="ESCAPE" close>Cancel</button>
+                        <button class="button" type="button" title="ESCAPE" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>

public/scripts/network.js

@@ -694,6 +694,11 @@ class RTCPeer extends Peer {
     _isConnecting() {
         return this._channel && this._channel.readyState === 'connecting';
     }
+
+    sendDisplayName(displayName) {
+        if (!this._isConnected()) return;
+        super.sendDisplayName(displayName);
+    }
 }
 
 class PeersManager {

public/scripts/ui.js

@@ -300,7 +300,8 @@ class PeerUI {
 
     constructor(peer, connectionHash) {
         this._peer = peer;
-        this._connectionHash = connectionHash;
+        this._connectionHash =
+            `${connectionHash.substring(0, 4)} ${connectionHash.substring(4, 8)} ${connectionHash.substring(8, 12)} ${connectionHash.substring(12, 16)}`;
         this._initDom();
         this._bindListeners();
 
@@ -345,8 +346,7 @@ class PeerUI {
         this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
         this.$el.querySelector('.name').textContent = this._displayName();
         this.$el.querySelector('.device-name').textContent = this._deviceName();
-        this.$el.querySelector('.connection-hash').textContent =
+        this.$el.querySelector('.connection-hash').textContent = this._connectionHash;
-            this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
     }
 
     _initDom() {
@@ -569,7 +569,7 @@ class ReceiveDialog extends Dialog {
         }
     }
 
-    _parseFileData(displayName, files, imagesOnly, totalSize) {
+    _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize) {
         if (files.length > 1) {
             let fileOtherText = ` and ${files.length - 1} other `;
             if (files.length === 2) {
@@ -586,6 +586,7 @@ class ReceiveDialog extends Dialog {
         this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length);
         this.$fileExtension.innerText = fileExtension;
         this.$displayName.innerText = displayName;
+        this.$displayName.title = connectionHash;
         this.$fileSize.innerText = this._formatFileSize(totalSize);
     }
 }
@@ -603,8 +604,9 @@ class ReceiveFileDialog extends ReceiveDialog {
     }
 
     _onFilesReceived(sender, files, imagesOnly, totalSize) {
-        const displayName = $(sender).ui._displayName()
+        const displayName = $(sender).ui._displayName();
-        this._filesQueue.push({peer: sender, displayName: displayName, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        const connectionHash = $(sender).ui._connectionHash;
+        this._filesQueue.push({peer: sender, displayName: displayName, connectionHash: connectionHash, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
         this._nextFiles();
         window.blop.play();
     }
@@ -612,12 +614,11 @@ class ReceiveFileDialog extends ReceiveDialog {
     _nextFiles() {
         if (this._busy) return;
         this._busy = true;
-        const {peer, displayName, files, imagesOnly, totalSize} = this._filesQueue.shift();
+        const {peer, displayName, connectionHash, files, imagesOnly, totalSize} = this._filesQueue.shift();
-        this._displayFiles(peer, displayName, files, imagesOnly, totalSize);
+        this._displayFiles(peer, displayName, connectionHash, files, imagesOnly, totalSize);
     }
 
     _dequeueFile() {
-        // Todo: change count in document.title and move '- PairDrop' to back
         if (!this._filesQueue.length) { // nothing to do
             this._busy = false;
             return;
@@ -655,8 +656,8 @@ class ReceiveFileDialog extends ReceiveDialog {
         });
     }
 
-    async _displayFiles(peerId, displayName, files, imagesOnly, totalSize) {
+    async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize) {
-        this._parseFileData(displayName, files, imagesOnly, totalSize);
+        this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize);
 
         let descriptor, url, filenameDownload;
         if (files.length === 1) {
@@ -803,7 +804,8 @@ class ReceiveRequestDialog extends ReceiveDialog {
         this.correspondingPeerId = peerId;
 
         const displayName = $(peerId).ui._displayName();
-        this._parseFileData(displayName, request.header, request.imagesOnly, request.totalSize);
+        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") {
             let element = document.createElement('img');
@@ -1417,9 +1419,9 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
-        // Todo: fix Notifications
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
+        Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
     }
 
     _requestPermission() {
@@ -1492,8 +1494,29 @@ class Notifications {
         }
     }
 
+    _requestNotification(request, peerId) {
+        if (document.visibilityState !== 'visible') {
+            let imagesOnly = true;
+            for(let i=0; i<request.header.length; i++) {
+                if (request.header[i].mime.split('/')[0] !== 'image') {
+                    imagesOnly = false;
+                    break;
+                }
+            }
+            let descriptor;
+            if (request.header.length > 1) {
+                descriptor = imagesOnly ? ' images' : ' files';
+            } else {
+                descriptor = imagesOnly ? ' image' : ' file';
+            }
+            let displayName = $(peerId).querySelector('.name').textContent
+            let title = `${displayName} would like to transfer ${request.header.length} ${descriptor}`;
+            const notification = this._notify(title, 'Click to show');
+        }
+    }
+
     _download(notification) {
-        $('share-or-download').click();
+        $('download-btn').click();
         notification.close();
     }
 

public/service-worker.js

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

public_included_ws_fallback/index.html

@@ -125,7 +125,7 @@
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
                     <div class="center row-reverse">
                         <button class="button" type="submit" disabled>Pair</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -140,7 +140,7 @@
                     <div class="font-subheading center text-center">Are you sure to unpair all devices?</div>
                     <div class="center row-reverse">
                         <button class="button" type="submit">Unpair Devices</button>
-                        <button class="button" close>Cancel</button>
+                        <button class="button" type="button" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>
@@ -212,7 +212,7 @@
                     <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                     <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
-                        <button class="button" title="ESCAPE" close>Cancel</button>
+                        <button class="button" type="button" title="ESCAPE" close>Cancel</button>
                     </div>
                 </x-paper>
             </x-background>

public_included_ws_fallback/scripts/network.js

@@ -705,6 +705,11 @@ class RTCPeer extends Peer {
     _isConnecting() {
         return this._channel && this._channel.readyState === 'connecting';
     }
+
+    sendDisplayName(displayName) {
+        if (!this._isConnected()) return;
+        super.sendDisplayName(displayName);
+    }
 }
 
 class WSPeer extends Peer {

public_included_ws_fallback/scripts/ui.js

@@ -300,7 +300,8 @@ class PeerUI {
 
     constructor(peer, connectionHash) {
         this._peer = peer;
-        this._connectionHash = connectionHash;
+        this._connectionHash =
+            `${connectionHash.substring(0, 4)} ${connectionHash.substring(4, 8)} ${connectionHash.substring(8, 12)} ${connectionHash.substring(12, 16)}`;
         this._initDom();
         this._bindListeners();
 
@@ -345,8 +346,7 @@ class PeerUI {
         this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
         this.$el.querySelector('.name').textContent = this._displayName();
         this.$el.querySelector('.device-name').textContent = this._deviceName();
-        this.$el.querySelector('.connection-hash').textContent =
+        this.$el.querySelector('.connection-hash').textContent = this._connectionHash;
-            this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
     }
 
     _initDom() {
@@ -570,7 +570,7 @@ class ReceiveDialog extends Dialog {
         }
     }
 
-    _parseFileData(displayName, files, imagesOnly, totalSize) {
+    _parseFileData(displayName, connectionHash, files, imagesOnly, totalSize) {
         if (files.length > 1) {
             let fileOtherText = ` and ${files.length - 1} other `;
             if (files.length === 2) {
@@ -587,6 +587,7 @@ class ReceiveDialog extends Dialog {
         this.$fileStem.innerText = fileName.substring(0, fileName.length - fileExtension.length);
         this.$fileExtension.innerText = fileExtension;
         this.$displayName.innerText = displayName;
+        this.$displayName.title = connectionHash;
         this.$fileSize.innerText = this._formatFileSize(totalSize);
     }
 }
@@ -604,8 +605,9 @@ class ReceiveFileDialog extends ReceiveDialog {
     }
 
     _onFilesReceived(sender, files, imagesOnly, totalSize) {
-        const displayName = $(sender).ui._displayName()
+        const displayName = $(sender).ui._displayName();
-        this._filesQueue.push({peer: sender, displayName: displayName, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
+        const connectionHash = $(sender).ui._connectionHash;
+        this._filesQueue.push({peer: sender, displayName: displayName, connectionHash: connectionHash, files: files, imagesOnly: imagesOnly, totalSize: totalSize});
         this._nextFiles();
         window.blop.play();
     }
@@ -613,12 +615,11 @@ class ReceiveFileDialog extends ReceiveDialog {
     _nextFiles() {
         if (this._busy) return;
         this._busy = true;
-        const {peer, displayName, files, imagesOnly, totalSize} = this._filesQueue.shift();
+        const {peer, displayName, connectionHash, files, imagesOnly, totalSize} = this._filesQueue.shift();
-        this._displayFiles(peer, displayName, files, imagesOnly, totalSize);
+        this._displayFiles(peer, displayName, connectionHash, files, imagesOnly, totalSize);
     }
 
     _dequeueFile() {
-        // Todo: change count in document.title and move '- PairDrop' to back
         if (!this._filesQueue.length) { // nothing to do
             this._busy = false;
             return;
@@ -656,8 +657,8 @@ class ReceiveFileDialog extends ReceiveDialog {
         });
     }
 
-    async _displayFiles(peerId, displayName, files, imagesOnly, totalSize) {
+    async _displayFiles(peerId, displayName, connectionHash, files, imagesOnly, totalSize) {
-        this._parseFileData(displayName, files, imagesOnly, totalSize);
+        this._parseFileData(displayName, connectionHash, files, imagesOnly, totalSize);
 
         let descriptor, url, filenameDownload;
         if (files.length === 1) {
@@ -804,7 +805,8 @@ class ReceiveRequestDialog extends ReceiveDialog {
         this.correspondingPeerId = peerId;
 
         const displayName = $(peerId).ui._displayName();
-        this._parseFileData(displayName, request.header, request.imagesOnly, request.totalSize);
+        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") {
             let element = document.createElement('img');
@@ -1386,6 +1388,8 @@ class Base64ZipDialog extends Dialog {
 
     hide() {
         this.clearBrowserHistory();
+        this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
+        this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
         super.hide();
     }
 }
@@ -1416,9 +1420,9 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
-        // Todo: fix Notifications
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
+        Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
     }
 
     _requestPermission() {
@@ -1491,8 +1495,29 @@ class Notifications {
         }
     }
 
+    _requestNotification(request, peerId) {
+        if (document.visibilityState !== 'visible') {
+            let imagesOnly = true;
+            for(let i=0; i<request.header.length; i++) {
+                if (request.header[i].mime.split('/')[0] !== 'image') {
+                    imagesOnly = false;
+                    break;
+                }
+            }
+            let descriptor;
+            if (request.header.length > 1) {
+                descriptor = imagesOnly ? ' images' : ' files';
+            } else {
+                descriptor = imagesOnly ? ' image' : ' file';
+            }
+            let displayName = $(peerId).querySelector('.name').textContent
+            let title = `${displayName} would like to transfer ${request.header.length} ${descriptor}`;
+            const notification = this._notify(title, 'Click to show');
+        }
+    }
+
     _download(notification) {
-        $('share-or-download').click();
+        $('download-btn').click();
         notification.close();
     }
 

public_included_ws_fallback/service-worker.js

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