From abf96c02282c5171793f5487880918f4719e8f15 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 16:36:59 +0200
Subject: [PATCH 01/34] Test

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index fec4428..eb9f9c4 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
-# Snapdrop
+# Snapdrop 
 
-[Snapdrop](https://snapdrop.net) is a Progressive Web App inspired by Apple's Airdrop.
+[Snapdrop](https://snapdrop.net): local file sharing in your browser - inspired by Apple's Airdrop.
 
-#### Snapdrop is built with the following awesome technologies:
-* Vanilla HTML / JS / CSS  
+#### Snapdrop Version 2 is built with the following awesome technologies:
+* Vanilla HTML5 / ES6 / CSS3  
+* Progressive Web App
 * [WebRTC](http://webrtc.org/)
 * [WebSockets](http://www.websocket.org/) fallback (iDevices don't support WebRTC)
 * [NodeJS](https://nodejs.org/en/)
@@ -24,7 +25,6 @@ It uses a P2P connection if WebRTC is supported by the browser. (WebRTC needs a
 
 If WebRTC isn’t supported (Safari, IE) it uses a Web Sockets fallback for the file transfer. The server connects the clients with a stream.  
 
-
 ##### What about privacy? Will files be saved on third-party-servers?
 None of your files are ever saved on any server. 
 Snapdrop doesn't even use cookies or a database. If you are curious have a look [at the Server](https://github.com/RobinLinus/snapdrop/blob/master/server/ws-server.js).
@@ -50,7 +50,7 @@ ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop u
     npm install
     node index.js
     cd ../client
-    python -m http.server
+    python -m SimpleHTTPServer
 ```
 
 Now point your browser to http://localhost:8000.

From 36ec13d4285b1d8633cc3bddd26df8fddbb8e59e Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 18:53:31 +0200
Subject: [PATCH 02/34] Fix uncaught error in server

---
 README.md                    |  4 ++--
 client/scripts/network-v2.js | 34 ----------------------------------
 server/index.js              |  2 +-
 3 files changed, 3 insertions(+), 37 deletions(-)
 delete mode 100644 client/scripts/network-v2.js

diff --git a/README.md b/README.md
index eb9f9c4..0744ba4 100644
--- a/README.md
+++ b/README.md
@@ -45,8 +45,8 @@ ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop u
 
 ## Local Development
 ```
-    git clone git@github.com:RobinLinus/secret-snapdrop.git
-    cd secret-snapdrop/server
+    git clone git@github.com:RobinLinus/snapdrop.git
+    cd snapdrop/server
     npm install
     node index.js
     cd ../client
diff --git a/client/scripts/network-v2.js b/client/scripts/network-v2.js
deleted file mode 100644
index 7a15cbd..0000000
--- a/client/scripts/network-v2.js
+++ /dev/null
@@ -1,34 +0,0 @@
-class ServerConnection {
-
-}
-
-class Connection {
-
-}
-
-class WSConnection extends Connection {
-
-}
-
-class RTCConnection extends Connection {
-
-}
-
-class Peer {
-
-    constructor(serverConnection) {
-        this._ws = new WSConnection(serverConnection);
-        this._rtc = new RTCConnection(serverConnection);
-        this._fileReceiver = new FileReceiver(this);
-        this._fileSender = new FileSender(this);
-    }
-
-    send(message) {
-
-    }
-
-}
-
-class Peers {
-
-}
\ No newline at end of file
diff --git a/server/index.js b/server/index.js
index 2d8bbfd..52ecc7a 100644
--- a/server/index.js
+++ b/server/index.js
@@ -39,7 +39,7 @@ class SnapdropServer {
         }
 
         // relay message to recipient
-        if (message.to) {
+        if (message.to && this._rooms[sender.ip]) {
             const recipientId = message.to; // TODO: sanitize
             const recipient = this._rooms[sender.ip][recipientId];
             delete message.to;

From e9eeea48e5ea76214971daa1a879b0ae2ba1a196 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 18:54:52 +0200
Subject: [PATCH 03/34] Fix notifications on android

---
 client/scripts/network.js |  6 ++++++
 client/scripts/ui.js      | 20 ++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index e7ebd87..e254fe0 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -3,9 +3,11 @@ class ServerConnection {
     constructor() {
         this._connect();
         Events.on('beforeunload', e => this._disconnect(), false);
+        Events.on('pageshow', e => this._connect(), false);
     }
 
     _connect() {
+        if (this._isConnected()) return
         const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
         ws.onopen = e => console.log('WS: server connection opened');
@@ -16,6 +18,10 @@ class ServerConnection {
         clearTimeout(this._reconnectTimer);
     }
 
+    _isConnected(){
+        return this._socket && this._socket.readyState === this._socket.OPEN;
+    }
+
     _onMessage(msg) {
         msg = JSON.parse(msg);
         console.log('WS:', msg);
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 45c9483..29b7a41 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -358,12 +358,16 @@ class Notifications {
     }
 
     _notify(message, body) {
-        var img = '/images/logo_transparent_128x128.png';
-        return new Notification(message, {
+        const config = {
             body: body,
-            icon: img,
+            icon: '/images/logo_transparent_128x128.png',
             vibrate: [200, 100, 200, 100, 200, 100, 400],
-        });
+        }
+        if (serviceWorker && serviceWorker.showNotification) {
+            return serviceWorker.showNotification(message, config);
+        } else {
+            return new Notification(message, config);
+        }
     }
 
     _messageNotification(message) {
@@ -434,10 +438,14 @@ document.copy = text => {
     return success;
 }
 
-if ('serviceWorker' in navigator && isProductionEnvironment) {
+
+if ('serviceWorker' in navigator) {
     navigator.serviceWorker
         .register('/service-worker.js')
-        .then(e => console.log("Service Worker Registered"));
+        .then(serviceWorker => {
+            console.log('Service Worker registered');
+            window.serviceWorker = serviceWorker
+        });
 }
 
 // Background Animation

From 92a5f3b782b4037beaf9b404683239cf71105586 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 19:14:25 +0200
Subject: [PATCH 04/34] Cleanup; fix STUN servers

---
 client/scripts/network.js | 31 ++++++++++++++++---------------
 client/scripts/ui.js      |  3 ++-
 server/index.js           |  2 +-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index e254fe0..6bc4a1f 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -10,7 +10,7 @@ class ServerConnection {
         if (this._isConnected()) return
         const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
-        ws.onopen = e => console.log('WS: server connection opened');
+        ws.onopen = e => console.log('WS: server connected');
         ws.onmessage = e => this._onMessage(e.data);
         ws.onclose = e => this._onDisconnect();
         ws.onerror = e => console.error(e);
@@ -18,7 +18,7 @@ class ServerConnection {
         clearTimeout(this._reconnectTimer);
     }
 
-    _isConnected(){
+    _isConnected() {
         return this._socket && this._socket.readyState === this._socket.OPEN;
     }
 
@@ -243,7 +243,7 @@ class RTCPeer extends Peer {
     _createChannel() {
         const channel = this._peer.createDataChannel('data-channel', { reliable: true });
         channel.binaryType = 'arraybuffer';
-        channel.onopen = e => this._onChannelOpened(e)
+        channel.onopen = e => this._onChannelOpened(e);
         this._peer.createOffer(d => this._onDescription(d), e => this._onError(e));
     }
 
@@ -466,16 +466,17 @@ window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnecti
 
 RTCPeer.config = {
     'iceServers': [{
-        urls: 'stun:stun.stunprotocol.org:3478'
-    }, {
-        urls: 'stun:stun.l.google.com:19302'
-    }, {
-        urls: 'turn:turn.bistri.com:80',
-        credential: 'homeo',
-        username: 'homeo'
-    }, {
-        urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
-        credential: 'webrtc',
-        username: 'webrtc'
-    }]
+            urls: 'stun:stun.stunprotocol.org:3478'
+        }, {
+            urls: 'stun:stun.l.google.com:19302'
+        }, {
+            url: 'turn:192.158.29.39:3478?transport=tcp',
+            credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+            username: '28224511:1379330808'
+        } {
+            urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
+            credential: 'webrtc',
+            username: 'webrtc'
+        }
+    ]
 }
\ No newline at end of file
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 29b7a41..fa34e69 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -335,8 +335,8 @@ class Notifications {
     constructor() {
         // Check if the browser supports notifications
         if (!('Notification' in window)) return;
+        
         // Check whether notification permissions have already been granted
-
         if (Notification.permission !== 'granted') {
             this.$button = $('notification');
             this.$button.removeAttribute('hidden');
@@ -364,6 +364,7 @@ class Notifications {
             vibrate: [200, 100, 200, 100, 200, 100, 400],
         }
         if (serviceWorker && serviceWorker.showNotification) {
+            // android doesn't support "new Notification" if service worker is installed
             return serviceWorker.showNotification(message, config);
         } else {
             return new Notification(message, config);
diff --git a/server/index.js b/server/index.js
index 52ecc7a..c50b4d8 100644
--- a/server/index.js
+++ b/server/index.js
@@ -84,7 +84,7 @@ class SnapdropServer {
     _leaveRoom(peer) {
         // delete the peer
         this._cancelKeepAlive(peer);
-        if (!this._rooms[peer.ip]) return;
+        if (!this._rooms[peer.ip] || !this._rooms[peer.ip][peer.id]) return;
 
         delete this._rooms[peer.ip][peer.id];
 

From 6317c25b10f3d885c8ccc3374fb1e873e2c18f44 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 19:14:25 +0200
Subject: [PATCH 05/34] Cleanup; fix STUN servers

---
 client/scripts/network.js | 31 ++++++++++++++++---------------
 client/scripts/ui.js      |  3 ++-
 server/index.js           |  2 +-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index e254fe0..ec67d8f 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -10,7 +10,7 @@ class ServerConnection {
         if (this._isConnected()) return
         const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
-        ws.onopen = e => console.log('WS: server connection opened');
+        ws.onopen = e => console.log('WS: server connected');
         ws.onmessage = e => this._onMessage(e.data);
         ws.onclose = e => this._onDisconnect();
         ws.onerror = e => console.error(e);
@@ -18,7 +18,7 @@ class ServerConnection {
         clearTimeout(this._reconnectTimer);
     }
 
-    _isConnected(){
+    _isConnected() {
         return this._socket && this._socket.readyState === this._socket.OPEN;
     }
 
@@ -243,7 +243,7 @@ class RTCPeer extends Peer {
     _createChannel() {
         const channel = this._peer.createDataChannel('data-channel', { reliable: true });
         channel.binaryType = 'arraybuffer';
-        channel.onopen = e => this._onChannelOpened(e)
+        channel.onopen = e => this._onChannelOpened(e);
         this._peer.createOffer(d => this._onDescription(d), e => this._onError(e));
     }
 
@@ -466,16 +466,17 @@ window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnecti
 
 RTCPeer.config = {
     'iceServers': [{
-        urls: 'stun:stun.stunprotocol.org:3478'
-    }, {
-        urls: 'stun:stun.l.google.com:19302'
-    }, {
-        urls: 'turn:turn.bistri.com:80',
-        credential: 'homeo',
-        username: 'homeo'
-    }, {
-        urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
-        credential: 'webrtc',
-        username: 'webrtc'
-    }]
+            urls: 'stun:stun.stunprotocol.org:3478'
+        }, {
+            urls: 'stun:stun.l.google.com:19302'
+        }, {
+            url: 'turn:192.158.29.39:3478?transport=tcp',
+            credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+            username: '28224511:1379330808'
+        }, {
+            urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
+            credential: 'webrtc',
+            username: 'webrtc'
+        }
+    ]
 }
\ No newline at end of file
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 29b7a41..fa34e69 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -335,8 +335,8 @@ class Notifications {
     constructor() {
         // Check if the browser supports notifications
         if (!('Notification' in window)) return;
+        
         // Check whether notification permissions have already been granted
-
         if (Notification.permission !== 'granted') {
             this.$button = $('notification');
             this.$button.removeAttribute('hidden');
@@ -364,6 +364,7 @@ class Notifications {
             vibrate: [200, 100, 200, 100, 200, 100, 400],
         }
         if (serviceWorker && serviceWorker.showNotification) {
+            // android doesn't support "new Notification" if service worker is installed
             return serviceWorker.showNotification(message, config);
         } else {
             return new Notification(message, config);
diff --git a/server/index.js b/server/index.js
index 52ecc7a..c50b4d8 100644
--- a/server/index.js
+++ b/server/index.js
@@ -84,7 +84,7 @@ class SnapdropServer {
     _leaveRoom(peer) {
         // delete the peer
         this._cancelKeepAlive(peer);
-        if (!this._rooms[peer.ip]) return;
+        if (!this._rooms[peer.ip] || !this._rooms[peer.ip][peer.id]) return;
 
         delete this._rooms[peer.ip][peer.id];
 

From e573d5741979fa48fdbfebed4f3cedd7f82f9ea5 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 19:17:07 +0200
Subject: [PATCH 06/34] STUN server tests

---
 client/scripts/network.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index ec67d8f..948db6c 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -18,7 +18,7 @@ class ServerConnection {
         clearTimeout(this._reconnectTimer);
     }
 
-    _isConnected() {
+    _isConnected(){
         return this._socket && this._socket.readyState === this._socket.OPEN;
     }
 
@@ -466,17 +466,16 @@ window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnecti
 
 RTCPeer.config = {
     'iceServers': [{
-            urls: 'stun:stun.stunprotocol.org:3478'
-        }, {
-            urls: 'stun:stun.l.google.com:19302'
-        }, {
-            url: 'turn:192.158.29.39:3478?transport=tcp',
-            credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
-            username: '28224511:1379330808'
-        }, {
-            urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
-            credential: 'webrtc',
-            username: 'webrtc'
-        }
-    ]
+        urls: 'stun:stun.stunprotocol.org:3478'
+    }, {
+        urls: 'stun:stun.l.google.com:19302'
+    }, {
+        urls: 'turn:turn.bistri.com:80',
+        credential: 'homeo',
+        username: 'homeo'
+    }, {
+        urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
+        credential: 'webrtc',
+        username: 'webrtc'
+    }]
 }
\ No newline at end of file

From 31e5f635d19a69ebe719194aeb8465368e9f672d Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 19:24:01 +0200
Subject: [PATCH 07/34] Add connection state handler

---
 client/scripts/network.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 948db6c..4831717 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -18,7 +18,7 @@ class ServerConnection {
         clearTimeout(this._reconnectTimer);
     }
 
-    _isConnected(){
+    _isConnected() {
         return this._socket && this._socket.readyState === this._socket.OPEN;
     }
 
@@ -230,7 +230,7 @@ class RTCPeer extends Peer {
             this._peerId = peerId;
             this._peer = new RTCPeerConnection(RTCPeer.config);
             this._peer.onicecandidate = e => this._onIceCandidate(e);
-            this._peer.onconnectionstatechange = e => console.log('RTC: state changed:', this._peer.connectionState);
+            this._peer.onconnectionstatechange = e => this._onConnectionStateChange(e);
         }
 
         if (isCaller) {
@@ -288,11 +288,19 @@ class RTCPeer extends Peer {
     }
 
     _onChannelClosed() {
-        console.log('RTC: channel closed ', this._peerId);
+        console.log('RTC: channel closed', this._peerId);
         if (!this.isCaller) return;
         this._start(this._peerId, true); // reopen the channel
     }
 
+    _onConnectionStateChange(e) {
+        console.log('RTC: state changed:', this._peer.connectionState);
+        switch (this._peer.connectionState) {
+            'disconnected': this._onChannelClosed();
+            break;
+        }
+    }
+
     _send(message) {
         this._channel.send(message);
     }

From 96e37aef40c7a69203b172655b290732dc236dc3 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 19:25:01 +0200
Subject: [PATCH 08/34] Fix typo

---
 client/scripts/network.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 4831717..fdc1f8c 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -296,7 +296,7 @@ class RTCPeer extends Peer {
     _onConnectionStateChange(e) {
         console.log('RTC: state changed:', this._peer.connectionState);
         switch (this._peer.connectionState) {
-            'disconnected': this._onChannelClosed();
+            case 'disconnected': this._onChannelClosed();
             break;
         }
     }

From 728aabd449ed8f70231c643d756488fef7431aae Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 19:32:59 +0200
Subject: [PATCH 09/34] Fix typo in server

---
 server/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/server/index.js b/server/index.js
index c50b4d8..f35a299 100644
--- a/server/index.js
+++ b/server/index.js
@@ -34,8 +34,10 @@ class SnapdropServer {
         switch (message.type) {
             case 'disconnect':
                 this._leaveRoom(sender);
+                break;
             case 'pong':
                 sender.lastBeat = Date.now();
+                break;
         }
 
         // relay message to recipient

From 4cf2beda9075d75e1efc6dca3dc0e390612882fd Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 19:49:16 +0200
Subject: [PATCH 10/34] Fix beforeunload on iphone

---
 client/scripts/network.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index fdc1f8c..c986092 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -3,11 +3,11 @@ class ServerConnection {
     constructor() {
         this._connect();
         Events.on('beforeunload', e => this._disconnect(), false);
-        Events.on('pageshow', e => this._connect(), false);
+        Events.on('pagehide', e => this._disconnect(), false);
     }
 
     _connect() {
-        if (this._isConnected()) return
+        if (this._isConnected()) return;
         const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
         ws.onopen = e => console.log('WS: server connected');

From 61697d3abc5430ad58478b12a9b7fc36d8978881 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 20:01:59 +0200
Subject: [PATCH 11/34] Cancel keep alive on join room

---
 server/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/server/index.js b/server/index.js
index 7cc3626..025ab45 100644
--- a/server/index.js
+++ b/server/index.js
@@ -53,11 +53,13 @@ class SnapdropServer {
     }
 
     _joinRoom(peer) {
-        this._cancelKeepAlive(peer);
         // if room doesn't exist, create it
         if (!this._rooms[peer.ip]) {
             this._rooms[peer.ip] = {};
         }
+        if (this._rooms[peer.ip][peer.id]) {
+            this._cancelKeepAlive(this._rooms[peer.ip][peer.id]);
+        }
 
         // console.log(peer.id, ' joined the room', peer.ip);
         // notify all other peers
@@ -128,6 +130,7 @@ class SnapdropServer {
                 type: 'ping'
             });
         }
+        this._cancelKeepAlive(peer);
         peer.timerId = setTimeout(() => this._keepAlive(peer), timeout);
     }
 

From 0731a21d685c35e45985a39e3df32549730953db Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 20:09:49 +0200
Subject: [PATCH 12/34] Cancel keep alive on join room

---
 server/index.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/server/index.js b/server/index.js
index 025ab45..4f78674 100644
--- a/server/index.js
+++ b/server/index.js
@@ -111,6 +111,7 @@ class SnapdropServer {
 
     _send(peer, message) {
         if (!peer) return console.error('undefined peer');
+        if (this._wss.readyState !== this._wss.OPEN) return console.error('Socket is closed');
         message = JSON.stringify(message);
         peer.socket.send(message, error => {
             if (error) this._leaveRoom(peer);
@@ -119,17 +120,16 @@ class SnapdropServer {
 
     _keepAlive(peer) {
         var timeout = 10000;
-        // console.log(Date.now() - peer.lastBeat);
+        if (!peer.lastBeat) {
+            peer.lastBeat = Date.now();
+        }
         if (Date.now() - peer.lastBeat > 2 * timeout) {
             this._leaveRoom(peer);
             return;
         }
 
-        if (this._wss.readyState == this._wss.OPEN) {
-            this._send(peer, {
-                type: 'ping'
-            });
-        }
+        this._send(peer, { type: 'ping' });
+
         this._cancelKeepAlive(peer);
         peer.timerId = setTimeout(() => this._keepAlive(peer), timeout);
     }
@@ -137,6 +137,7 @@ class SnapdropServer {
     _cancelKeepAlive(peer) {
         if (peer.timerId) {
             clearTimeout(peer.timerId);
+            peer.lastBeat = null;
         }
     }
 }

From e71564a97cc083b606f144db4de3e35e5e172bfb Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 20:15:55 +0200
Subject: [PATCH 13/34] Cancel keep alive on join room

---
 server/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/server/index.js b/server/index.js
index 4f78674..b6c4ab7 100644
--- a/server/index.js
+++ b/server/index.js
@@ -87,10 +87,10 @@ class SnapdropServer {
     }
 
     _leaveRoom(peer) {
-        this._cancelKeepAlive(peer);
-        // delete the peer
         if (!this._rooms[peer.ip] || !this._rooms[peer.ip][peer.id]) return;
+        this._cancelKeepAlive(peer);
 
+        // delete the peer
         delete this._rooms[peer.ip][peer.id];
 
         peer.socket.terminate();
@@ -137,7 +137,6 @@ class SnapdropServer {
     _cancelKeepAlive(peer) {
         if (peer.timerId) {
             clearTimeout(peer.timerId);
-            peer.lastBeat = null;
         }
     }
 }

From 1d9581632fe3a99c2068d8c0cece9345c9397cc8 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 20:25:54 +0200
Subject: [PATCH 14/34] Cancel keep alive on join room

---
 server/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/server/index.js b/server/index.js
index b6c4ab7..17e6b07 100644
--- a/server/index.js
+++ b/server/index.js
@@ -11,7 +11,6 @@ class SnapdropServer {
         this._wss.on('headers', (headers, response) => this._onHeaders(headers, response));
 
         this._rooms = {};
-        this._timerID = 0;
 
         console.log('Snapdrop is running on port', port);
     }
@@ -119,6 +118,7 @@ class SnapdropServer {
     }
 
     _keepAlive(peer) {
+        this._cancelKeepAlive(peer);
         var timeout = 10000;
         if (!peer.lastBeat) {
             peer.lastBeat = Date.now();
@@ -130,7 +130,6 @@ class SnapdropServer {
 
         this._send(peer, { type: 'ping' });
 
-        this._cancelKeepAlive(peer);
         peer.timerId = setTimeout(() => this._keepAlive(peer), timeout);
     }
 

From 0ede41f8d5397e8b7beb62ba6abe2571296f4690 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 20:34:49 +0200
Subject: [PATCH 15/34] Cancel keep alive on join room

---
 server/index.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/server/index.js b/server/index.js
index 17e6b07..f231651 100644
--- a/server/index.js
+++ b/server/index.js
@@ -56,9 +56,6 @@ class SnapdropServer {
         if (!this._rooms[peer.ip]) {
             this._rooms[peer.ip] = {};
         }
-        if (this._rooms[peer.ip][peer.id]) {
-            this._cancelKeepAlive(this._rooms[peer.ip][peer.id]);
-        }
 
         // console.log(peer.id, ' joined the room', peer.ip);
         // notify all other peers
@@ -87,7 +84,7 @@ class SnapdropServer {
 
     _leaveRoom(peer) {
         if (!this._rooms[peer.ip] || !this._rooms[peer.ip][peer.id]) return;
-        this._cancelKeepAlive(peer);
+        this._cancelKeepAlive(this._rooms[peer.ip][peer.id]);
 
         // delete the peer
         delete this._rooms[peer.ip][peer.id];
@@ -112,9 +109,7 @@ class SnapdropServer {
         if (!peer) return console.error('undefined peer');
         if (this._wss.readyState !== this._wss.OPEN) return console.error('Socket is closed');
         message = JSON.stringify(message);
-        peer.socket.send(message, error => {
-            if (error) this._leaveRoom(peer);
-        });
+        peer.socket.send(message, error => console.log(error));
     }
 
     _keepAlive(peer) {
@@ -134,7 +129,7 @@ class SnapdropServer {
     }
 
     _cancelKeepAlive(peer) {
-        if (peer.timerId) {
+        if (peer && peer.timerId) {
             clearTimeout(peer.timerId);
         }
     }

From 7194c65c74681883089d21c574275dfc01864d50 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 20:51:56 +0200
Subject: [PATCH 16/34] Reconnect on rejoin room

---
 client/scripts/network.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index c986092..90ae29e 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -4,6 +4,8 @@ class ServerConnection {
         this._connect();
         Events.on('beforeunload', e => this._disconnect(), false);
         Events.on('pagehide', e => this._disconnect(), false);
+        document.addEventListener('visibilitychange', e => this._onVisibilityChange());
+
     }
 
     _connect() {
@@ -71,6 +73,11 @@ class ServerConnection {
         clearTimeout(this._reconnectTimer);
         this._reconnectTimer = setTimeout(_ => this._connect(), 5000);
     }
+
+    _onVisibilityChange() {
+        if (document.hidden) return;
+        this._connect();
+    }
 }
 
 class Peer {
@@ -296,8 +303,13 @@ class RTCPeer extends Peer {
     _onConnectionStateChange(e) {
         console.log('RTC: state changed:', this._peer.connectionState);
         switch (this._peer.connectionState) {
-            case 'disconnected': this._onChannelClosed();
-            break;
+            case 'disconnected':
+                this._onChannelClosed();
+                break;
+            case 'failed':
+                this._peer = null;
+                this._onChannelClosed();
+                break;
         }
     }
 

From 9c9ca70d05fb2894d4e8113acc3a99a7b582ec78 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 20:55:15 +0200
Subject: [PATCH 17/34] Reconnect on rejoin room

---
 client/scripts/network.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 90ae29e..bf30fe5 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -324,7 +324,7 @@ class RTCPeer extends Peer {
     refresh() {
         // check if channel open. otherwise create one
         if (this._peer && this._channel && this._channel.readyState !== 'open') return;
-        this._createChannel(this._peerId, this._isCaller);
+        this._start(this._peerId, this._isCaller);
     }
 }
 

From 3ac40fb3d7467df6c0f66b0d156202cbfbf80f09 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 21:04:48 +0200
Subject: [PATCH 18/34] =?UTF-8?q?Don=E2=80=99t=20reconnect=20if=20already?=
 =?UTF-8?q?=20connecting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/scripts/network.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index bf30fe5..98c43ac 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -9,7 +9,7 @@ class ServerConnection {
     }
 
     _connect() {
-        if (this._isConnected()) return;
+        if (this._isConnected() || this._isConnecting()) return;
         const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
         ws.onopen = e => console.log('WS: server connected');
@@ -24,6 +24,10 @@ class ServerConnection {
         return this._socket && this._socket.readyState === this._socket.OPEN;
     }
 
+    _isConnecting() {
+        return this._socket && this._socket.readyState === this._socket.CONNECTING;
+    }
+
     _onMessage(msg) {
         msg = JSON.parse(msg);
         console.log('WS:', msg);

From 600d3551f4765d65a4348a33012b57ee370b3da3 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 21:12:11 +0200
Subject: [PATCH 19/34] Add will-change

---
 client/scripts/network.js | 2 +-
 client/styles.css         | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 98c43ac..6e61a78 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -9,6 +9,7 @@ class ServerConnection {
     }
 
     _connect() {
+        clearTimeout(this._reconnectTimer);
         if (this._isConnected() || this._isConnecting()) return;
         const ws = new WebSocket(this._endpoint());
         ws.binaryType = 'arraybuffer';
@@ -17,7 +18,6 @@ class ServerConnection {
         ws.onclose = e => this._onDisconnect();
         ws.onerror = e => console.error(e);
         this._socket = ws;
-        clearTimeout(this._reconnectTimer);
     }
 
     _isConnected() {
diff --git a/client/styles.css b/client/styles.css
index 517e727..f6e84b5 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -301,6 +301,7 @@ x-dialog x-background {
     background: rgba(0, 0, 0, 0.61);
     z-index: 10;
     transition: opacity 300ms;
+    will-change: opacity;
     padding: 16px;
 }
 
@@ -313,6 +314,7 @@ x-dialog x-paper {
     max-width: 400px;
     box-sizing: border-box;
     transition: transform 300ms;
+    will-change: transform;
 }
 
 x-dialog:not([show]) {

From 5a631d3833a63e76d3611dc97ec073e471af58ba Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 21:21:44 +0200
Subject: [PATCH 20/34] Notfication API on android

---
 client/scripts/ui.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index fa34e69..1b90a8f 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -361,7 +361,8 @@ class Notifications {
         const config = {
             body: body,
             icon: '/images/logo_transparent_128x128.png',
-            vibrate: [200, 100, 200, 100, 200, 100, 400],
+            // vibrate: [200, 100, 200, 100, 200, 100, 400],
+            // requireInteraction: true
         }
         if (serviceWorker && serviceWorker.showNotification) {
             // android doesn't support "new Notification" if service worker is installed

From 476cb0ae6525177d7ea0519c9f0c4de67d2bf0f3 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 22:31:46 +0200
Subject: [PATCH 21/34] Notifications

---
 client/scripts/ui.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 1b90a8f..9bd7c14 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -335,7 +335,7 @@ class Notifications {
     constructor() {
         // Check if the browser supports notifications
         if (!('Notification' in window)) return;
-        
+
         // Check whether notification permissions have already been granted
         if (Notification.permission !== 'granted') {
             this.$button = $('notification');
@@ -361,11 +361,12 @@ class Notifications {
         const config = {
             body: body,
             icon: '/images/logo_transparent_128x128.png',
-            // vibrate: [200, 100, 200, 100, 200, 100, 400],
-            // requireInteraction: true
         }
         if (serviceWorker && serviceWorker.showNotification) {
             // android doesn't support "new Notification" if service worker is installed
+            config.actions = {
+                { "action": "yes", "title": "Yes"}
+            };
             return serviceWorker.showNotification(message, config);
         } else {
             return new Notification(message, config);
@@ -385,11 +386,20 @@ class Notifications {
     _downloadNotification(message) {
         const notification = this._notify(message, 'Click to download');
         if (window.isDownloadSupported) return;
-        notification.onclick = e => {
-            document.querySelector('x-dialog [download]').click();
-        };
+        notification.onclick = e => this._download(e);
     }
 
+    _download(e) {
+        document.querySelector('x-dialog [download]').click();
+        e.target.close();
+    }
+
+    _copyText(notification, message) {
+        console.log('message');
+        document.copy(message);
+        this._notify('Copied to clipboard');
+        notification.close();
+    }
 }
 
 class Snapdrop {

From f537b9621350fd1ea6694e7a2a8d3eca1edbf012 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 22:32:39 +0200
Subject: [PATCH 22/34] Notifications

---
 client/scripts/ui.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 9bd7c14..c3c4cd9 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -364,9 +364,9 @@ class Notifications {
         }
         if (serviceWorker && serviceWorker.showNotification) {
             // android doesn't support "new Notification" if service worker is installed
-            config.actions = {
+            config.actions = [
                 { "action": "yes", "title": "Yes"}
-            };
+            ];
             return serviceWorker.showNotification(message, config);
         } else {
             return new Notification(message, config);

From 52bd7692e951c5fafdcdb182a69646b78f03884d Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Fri, 21 Sep 2018 23:19:54 +0200
Subject: [PATCH 23/34] Notifications Android & Desktop

---
 client/scripts/ui.js | 50 +++++++++++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index c3c4cd9..42ca141 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -1,8 +1,8 @@
 const $ = query => document.getElementById(query);
 const $$ = query => document.body.querySelector(query);
 const isURL = text => /^((https?:\/\/|www)[^\s]+)/g.test(text.toLowerCase());
-const isDownloadSupported = (typeof document.createElement('a').download !== 'undefined');
-const isProductionEnvironment = !window.location.host.startsWith('localhost');
+window.isDownloadSupported = (typeof document.createElement('a').download !== 'undefined');
+window.isProductionEnvironment = !window.location.host.startsWith('localhost');
 
 class PeersUI {
 
@@ -236,10 +236,8 @@ class ReceiveDialog extends Dialog {
         this.$el.querySelector('#fileSize').textContent = this._formatFileSize(file.size);
         this.show();
 
-        if (!isDownloadSupported) return;
-        // $a.target = "_blank"; // fallback
-        $a.target = "_system"; // fallback
-        $a.href = 'external:' + $a.href;
+        if (window.isDownloadSupported) return;
+        $a.target = "_blank"; // fallback
     }
 
     _formatFileSize(bytes) {
@@ -362,43 +360,51 @@ class Notifications {
             body: body,
             icon: '/images/logo_transparent_128x128.png',
         }
-        if (serviceWorker && serviceWorker.showNotification) {
-            // android doesn't support "new Notification" if service worker is installed
-            config.actions = [
-                { "action": "yes", "title": "Yes"}
-            ];
-            return serviceWorker.showNotification(message, config);
-        } else {
+        try {
             return new Notification(message, config);
+        } catch (e) {
+            // android doesn't support "new Notification" if service worker is installed
+            if (!serviceWorker || !serviceWorker.showNotification) return;
+            return serviceWorker.showNotification(message, config);
         }
+
     }
 
     _messageNotification(message) {
         if (isURL(message)) {
             const notification = this._notify(message, 'Click to open link');
-            notification.onclick = e => window.open(message, '_blank', null, true);
+            this._bind(notification, e => window.open(message, '_blank', null, true));
         } else {
             const notification = this._notify(message, 'Click to copy text');
-            notification.onclick = e => document.copy(message);
+            this._bind(notification, e => this._copyText(message, notification));
         }
     }
 
     _downloadNotification(message) {
         const notification = this._notify(message, 'Click to download');
-        if (window.isDownloadSupported) return;
-        notification.onclick = e => this._download(e);
+        if (!window.isDownloadSupported) return;
+        this._bind(notification, e => this._download(notification));
     }
 
-    _download(e) {
+    _download(notification) {
         document.querySelector('x-dialog [download]').click();
-        e.target.close();
+        notification.close();
     }
 
-    _copyText(notification, message) {
-        console.log('message');
+    _copyText(message, notification) {
         document.copy(message);
-        this._notify('Copied to clipboard');
         notification.close();
+        this._notify('Copied text to clipboard');
+    }
+
+    _bind(notification, handler) {
+        if (notification.then) {
+            notification.then(e => serviceWorker.getNotifications().then(notifications => {
+                serviceWorker.addEventListener('notificationclick', handler);
+            }));
+        } else {
+            notification.onclick = handler;
+        }
     }
 }
 

From 04415ef28f8e7281c13546f168f2582a82bcb34f Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Sat, 22 Sep 2018 04:44:17 +0200
Subject: [PATCH 24/34] Cleanup

---
 README.md                 |  16 ++---
 client/scripts/network.js | 122 +++++++++++++++++++-------------------
 client/scripts/ui.js      |   2 +-
 client/styles.css         |   1 +
 4 files changed, 73 insertions(+), 68 deletions(-)

diff --git a/README.md b/README.md
index 0744ba4..5cb278f 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 [Snapdrop](https://snapdrop.net): local file sharing in your browser - inspired by Apple's Airdrop.
 
-#### Snapdrop Version 2 is built with the following awesome technologies:
+#### Snapdrop (Version 2) is built with the following awesome technologies:
 * Vanilla HTML5 / ES6 / CSS3  
 * Progressive Web App
 * [WebRTC](http://webrtc.org/)
@@ -18,12 +18,12 @@
 * [idownloadblog](http://www.idownloadblog.com/2015/12/29/snapdrop/)
 * [thenextweb](http://thenextweb.com/insider/2015/12/27/snapdrop-is-a-handy-web-based-replacement-for-apples-fiddly-airdrop-file-transfer-tool/)
 * [winboard](http://www.winboard.org/artikel-ratgeber/6253-dateien-vom-desktop-pc-mit-anderen-plattformen-teilen-mit-snapdrop.html)
-* [免費資源網路社群](https://free.com.tw/snapdrop/?utm_content=buffere6987&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)
+* [免費資源網路社群](https://free.com.tw/snapdrop/)
 
 ##### What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
 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 WebRTC isn’t supported (Safari, IE) it uses a Web Sockets fallback for the file transfer. The server connects the clients with a stream.  
+If WebRTC isn’t supported (Safari, IE) it uses a Web Sockets fallback for the file transfer. The server connects the clients with each other.  
 
 ##### What about privacy? Will files be saved on third-party-servers?
 None of your files are ever saved on any server. 
@@ -33,15 +33,15 @@ But it does use Google Analytics.
 ##### Is SnapDrop a fork of ShareDrop?
 No. ShareDrop is built with Ember. Snapdrop is built with vanilla ES6. 
 I wanted to play around with Progressive Web Apps and then I got the idea of a local file sharing app. By doing research on this idea I found and analysed ShareDrop. I liked it and thought about how to improve it.
-ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop uses a Websocket fallback and some hacks to make Snapdrop work due to the download restrictions on iDevices. 
+ShareDrop uses WebRTC only and isn't compatible with Safari browsers. Snapdrop uses a Websocket fallback and some hacks to make Snapdrop work due to the download restrictions on iDevices. 
 
 
 ### Snapdrop is awesome! How can I support it? 
 * [File bugs, give feedback, submit suggestions](https://github.com/RobinLinus/snapdrop/issues)
 * Share Snapdrop on your social media.
 * [Buy me a cup of coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=R9C5E42UYEQCN)
-* Fix bugs and make a Pull Request. This is my first open source project, so I am not very used to the common workflow, but we'll figure it out!
-* Do Security Analysis and suggestions
+* Fix bugs and make a pull request. 
+* Do security analysis and suggestions
 
 ## Local Development
 ```
@@ -49,7 +49,9 @@ ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop u
     cd snapdrop/server
     npm install
     node index.js
-    cd ../client
+
+    # open a second shell:
+    cd snapdrop/client
     python -m SimpleHTTPServer
 ```
 
diff --git a/client/scripts/network.js b/client/scripts/network.js
index 6e61a78..ff113f3 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -20,14 +20,6 @@ class ServerConnection {
         this._socket = ws;
     }
 
-    _isConnected() {
-        return this._socket && this._socket.readyState === this._socket.OPEN;
-    }
-
-    _isConnecting() {
-        return this._socket && this._socket.readyState === this._socket.CONNECTING;
-    }
-
     _onMessage(msg) {
         msg = JSON.parse(msg);
         console.log('WS:', msg);
@@ -82,6 +74,14 @@ class ServerConnection {
         if (document.hidden) return;
         this._connect();
     }
+
+    _isConnected() {
+        return this._socket && this._socket.readyState === this._socket.OPEN;
+    }
+
+    _isConnecting() {
+        return this._socket && this._socket.readyState === this._socket.CONNECTING;
+    }
 }
 
 class Peer {
@@ -192,16 +192,12 @@ class Peer {
     }
 
     _onDownloadProgress(progress) {
-        Events.fire('file-progress', {
-            sender: this._peerId,
-            progress: progress
-        });
+        Events.fire('file-progress', { sender: this._peerId, progress: progress });
     }
 
     _onFileReceived(proxyFile) {
         Events.fire('file-received', proxyFile);
         this.sendJSON({ type: 'transfer-complete' });
-        // this._digester = null;
     }
 
     _onTransferCompleted() {
@@ -213,17 +209,13 @@ class Peer {
     }
 
     sendText(text) {
-        this.sendJSON({
-            type: 'text',
-            text: btoa(unescape(encodeURIComponent(text)))
-        });
+        const unescaped = btoa(unescape(encodeURIComponent(text)));
+        this.sendJSON({ type: 'text', text: unescaped });
     }
 
     _onTextReceived(message) {
-        Events.fire('text-received', {
-            text: decodeURIComponent(escape(atob(message.text))),
-            sender: this._peerId
-        });
+        const escaped = decodeURIComponent(escape(atob(message.text)));
+        Events.fire('text-received', { text: escaped, sender: this._peerId });
     }
 }
 
@@ -232,35 +224,37 @@ class RTCPeer extends Peer {
     constructor(serverConnection, peerId) {
         super(serverConnection, peerId);
         if (!peerId) return; // we will listen for a caller
-        this._start(peerId, true);
+        this._connect(peerId, true);
     }
 
-    _start(peerId, isCaller) {
-        if (!this._peer) {
-            this._isCaller = isCaller;
-            this._peerId = peerId;
-            this._peer = new RTCPeerConnection(RTCPeer.config);
-            this._peer.onicecandidate = e => this._onIceCandidate(e);
-            this._peer.onconnectionstatechange = e => this._onConnectionStateChange(e);
-        }
+    _connect(peerId, isCaller) {
+        if (!this._conn) this._openConnection(peerId, isCaller);
 
         if (isCaller) {
-            this._createChannel();
+            this._openChannel();
         } else {
-            this._peer.ondatachannel = e => this._onChannelOpened(e);
+            this._conn.ondatachannel = e => this._onChannelOpened(e);
         }
     }
 
-    _createChannel() {
-        const channel = this._peer.createDataChannel('data-channel', { reliable: true });
+    _openConnection(peerId, isCaller) {
+        this._isCaller = isCaller;
+        this._peerId = peerId;
+        this._conn = new RTCPeerConnection(RTCPeer.config);
+        this._conn.onicecandidate = e => this._onIceCandidate(e);
+        this._conn.onconnectionstatechange = e => this._onConnectionStateChange(e);
+    }
+
+    _openChannel() {
+        const channel = this._conn.createDataChannel('data-channel', { reliable: true });
         channel.binaryType = 'arraybuffer';
         channel.onopen = e => this._onChannelOpened(e);
-        this._peer.createOffer(d => this._onDescription(d), e => this._onError(e));
+        this._conn.createOffer(d => this._onDescription(d), e => this._onError(e));
     }
 
     _onDescription(description) {
         // description.sdp = description.sdp.replace('b=AS:30', 'b=AS:1638400');
-        this._peer.setLocalDescription(description,
+        this._conn.setLocalDescription(description,
             _ => this._sendSignal({ sdp: description }),
             e => this._onError(e));
     }
@@ -270,23 +264,16 @@ class RTCPeer extends Peer {
         this._sendSignal({ ice: event.candidate });
     }
 
-    _sendSignal(signal) {
-        signal.type = 'signal';
-        signal.to = this._peerId;
-        this._server.send(signal);
-    }
-
     onServerMessage(message) {
-        if (!this._peer) this._start(message.sender, false);
-        const conn = this._peer;
+        if (!this._conn) this._connect(message.sender, false);
 
         if (message.sdp) {
-            this._peer.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
+            this._conn.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
                 if (message.sdp.type !== 'offer') return;
-                this._peer.createAnswer(d => this._onDescription(d), e => this._onError(e));
+                this._conn.createAnswer(d => this._onDescription(d), e => this._onError(e));
             }, e => this._onError(e));
         } else if (message.ice) {
-            this._peer.addIceCandidate(new RTCIceCandidate(message.ice));
+            this._conn.addIceCandidate(new RTCIceCandidate(message.ice));
         }
     }
 
@@ -301,34 +288,48 @@ class RTCPeer extends Peer {
     _onChannelClosed() {
         console.log('RTC: channel closed', this._peerId);
         if (!this.isCaller) return;
-        this._start(this._peerId, true); // reopen the channel
+        this._connect(this._peerId, true); // reopen the channel
     }
 
     _onConnectionStateChange(e) {
-        console.log('RTC: state changed:', this._peer.connectionState);
-        switch (this._peer.connectionState) {
+        console.log('RTC: state changed:', this._conn.connectionState);
+        switch (this._conn.connectionState) {
             case 'disconnected':
                 this._onChannelClosed();
                 break;
             case 'failed':
-                this._peer = null;
+                this._conn = null;
                 this._onChannelClosed();
                 break;
         }
     }
 
-    _send(message) {
-        this._channel.send(message);
-    }
-
     _onError(error) {
         console.error(error);
     }
 
+    _send(message) {
+        this._channel.send(message);
+    }
+
+    _sendSignal(signal) {
+        signal.type = 'signal';
+        signal.to = this._peerId;
+        this._server.send(signal);
+    }
+
     refresh() {
-        // check if channel open. otherwise create one
-        if (this._peer && this._channel && this._channel.readyState !== 'open') return;
-        this._start(this._peerId, this._isCaller);
+        // check if channel is open. otherwise create one
+        if (this._isConnected() || this._isConnecting()) return;
+        this._connect(this._peerId, this._isCaller);
+    }
+
+    _isConnected() {
+        return this._channel && this._channel.readyState === 'open';
+    }
+
+    _isConnecting() {
+        return this._channel && this._channel.readyState === 'connecting';
     }
 }
 
@@ -422,7 +423,7 @@ class FileChunker {
         this._partitionSize += chunk.byteLength;
         this._onChunk(chunk);
         if (this._isPartitionEnd() || this.isFileEnd()) {
-            this._onPartitionEnd(this._partitionSize);
+            this._onPartitionEnd(this._offset);
             return;
         }
         this._readChunk();
@@ -447,6 +448,7 @@ class FileChunker {
 }
 
 class FileDigester {
+    
     constructor(meta, callback) {
         this._buffer = [];
         this._bytesReceived = 0;
@@ -473,6 +475,7 @@ class FileDigester {
         });
         this._callback = null;
     }
+
 }
 
 class Events {
@@ -485,7 +488,6 @@ class Events {
     }
 }
 
-
 window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
 
 RTCPeer.config = {
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 42ca141..8ef5251 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -392,8 +392,8 @@ class Notifications {
     }
 
     _copyText(message, notification) {
-        document.copy(message);
         notification.close();
+        if(!document.copy(message)) return;
         this._notify('Copied text to clipboard');
     }
 
diff --git a/client/styles.css b/client/styles.css
index f6e84b5..121ea7b 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -625,6 +625,7 @@ screen and (min-width: 1100px) {
     x-instructions {
         top: 24px;
     }
+    
     footer .logo {
         --icon-size: 40px;
     }

From 891859680a1565cead8fe3dca771449b5e1e3035 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Sat, 22 Sep 2018 05:55:09 +0200
Subject: [PATCH 25/34] Refactor about page

---
 client/index.html |  90 +++++++++++++++++++----------------
 client/styles.css | 119 +++++++++++++++++++++-------------------------
 2 files changed, 102 insertions(+), 107 deletions(-)

diff --git a/client/index.html b/client/index.html
index 629f84b..ff6eb9e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -36,6 +36,18 @@
 </head>
 
 <body>
+    <header class="row-reverse">
+        <a href="#about" class="icon-button" title="About Snapdrop">
+            <svg class="icon">
+                <use xlink:href="#info-outline" />
+            </svg>
+        </a>
+        <a href="#" id="notification" class="icon-button" title="Enable Notifications" hidden>
+            <svg class="icon">
+                <use xlink:href="#notifications" />
+            </svg>
+        </a>
+    </header>
     <!-- Peers -->
     <x-peers class="center"></x-peers>
     <x-no-peers>
@@ -97,47 +109,41 @@
     <div class="toast-container full center">
         <x-toast class="row" shadow="1" id="toast">File Transfer Completed</x-toast>
     </div>
-    <!-- Info Page -->
-    <div id="info" class="full center column">
-        <a href="#" class="close icon-button">
-            <svg class="icon">
-                <use xlink:href="#close" />
+    <!-- About Page -->
+    <x-about id="about" class="full center column">
+        <section class="center column fade-in">
+            <header class="row-reverse">
+                <a href="#" class="close icon-button">
+                    <svg class="icon">
+                        <use xlink:href="#close" />
+                    </svg>
+                </a>
+            </header>
+            <svg class="icon logo">
+                <use xlink:href="#wifi-tethering" />
             </svg>
-        </a>
-        <svg class="icon logo">
-            <use xlink:href="#wifi-tethering" />
-        </svg>
-        <h1>Snapdrop</h1>
-        <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/RobinLinus/snapdrop" title="Snapdrop on Github">
-                <svg class="icon">
-                    <use xlink:href="#github" />
-                </svg>
-            </a>
-            <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title="tweet about Snapdrop">
-                <svg class="icon">
-                    <use xlink:href="#twitter" />
-                </svg>
-            </a>
-            <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="frequently asked questions">
-                <svg class="icon">
-                    <use xlink:href="#help-outline" />
-                </svg>
-            </a>
-        </div>
-    </div>
-    <a href="#info" class="icon-button" title="about Snapdrop">
-        <svg class="icon">
-            <use xlink:href="#info-outline" />
-        </svg>
-        <div class="info-background"></div>
-    </a>
-    <a id="notification" class="icon-button" hidden title="enable Notifications">
-        <svg class="icon">
-            <use xlink:href="#notifications" />
-        </svg>
-    </a>
+            <h1>Snapdrop</h1>
+            <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/RobinLinus/snapdrop" title="Snapdrop on Github">
+                    <svg class="icon">
+                        <use xlink:href="#github" />
+                    </svg>
+                </a>
+                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title="Tweet about Snapdrop">
+                    <svg class="icon">
+                        <use xlink:href="#twitter" />
+                    </svg>
+                </a>
+                <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="Frequently asked questions">
+                    <svg class="icon">
+                        <use xlink:href="#help-outline" />
+                    </svg>
+                </a>
+            </div>
+        </section>
+        <x-background></x-background>
+    </x-about>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">
@@ -172,8 +178,8 @@
         </g>
     </svg>
     <!-- Scripts -->
-    <script type="text/javascript" src="scripts/network.js"></script>
-    <script type="text/javascript" src="scripts/ui.js"></script>
+    <script src="scripts/network.js"></script>
+    <script src="scripts/ui.js"></script>
     <!-- Sounds -->
     <audio id="blop" preload="auto" autobuffer="true">
         <source src="/sounds/blop.mp3" type="audio/mpeg">
diff --git a/client/styles.css b/client/styles.css
index 121ea7b..c3a638a 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -6,6 +6,7 @@
     --peer-width: 120px;
 }
 
+
 /* Layout */
 
 html {
@@ -57,10 +58,22 @@ body {
     bottom: 0;
 }
 
+header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    align-items: center;
+    padding: 16px;
+    box-sizing: border-box;
+}
+
 [hidden] {
     display: none !important;
 }
 
+
 /* Typography */
 
 body {
@@ -112,7 +125,7 @@ body {
 
 a {
     text-decoration: none;
-    color: var(--primary-color);
+    color: currentColor;
     cursor: pointer;
 }
 
@@ -153,7 +166,11 @@ a {
     }
 }
 
+/* Main Header */
 
+body>header a {
+    margin-left: 8px;
+}
 
 /* Peers List */
 
@@ -164,8 +181,6 @@ x-peers {
     z-index: 2;
 }
 
-
-
 /* Empty Peers List */
 
 x-no-peers {
@@ -177,7 +192,8 @@ x-no-peers {
     animation-fill-mode: backwards;
 }
 
-x-no-peers h2 {
+x-no-peers h2,
+x-no-peers a {
     color: var(--primary-color);
 }
 
@@ -266,6 +282,8 @@ x-peer[drop] x-icon {
     transform: scale(1.1);
 }
 
+
+
 /* Footer */
 
 footer {
@@ -294,7 +312,6 @@ footer .font-body2 {
 }
 
 
-
 /* Dialog */
 
 x-dialog x-background {
@@ -335,7 +352,6 @@ x-dialog .row-reverse>.button {
 }
 
 
-
 /* Receive Dialog */
 
 #receiveTextDialog #text {
@@ -351,15 +367,12 @@ x-dialog .row-reverse>.button {
 
 
 
-
 /* Button */
 
 .button {
     padding: 0 16px;
     box-sizing: border-box;
     min-height: 36px;
-    border: none;
-    outline: none;
     min-width: 100px;
     font-size: 14px;
     line-height: 24px;
@@ -381,6 +394,8 @@ x-dialog .row-reverse>.button {
     justify-content: center;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     touch-action: manipulation;
+    border: none;
+    outline: none;
 }
 
 .button:before,
@@ -405,16 +420,18 @@ x-dialog .row-reverse>.button {
     border-radius: 8px;
 }
 
-.button:focus:before {
+.button:focus:before,
+.icon-button:focus:before {
     opacity: 0.2;
 }
 
+
+
 button::-moz-focus-inner {
     border: 0;
 }
 
 
-
 /* Icon Button */
 
 .icon-button {
@@ -444,74 +461,56 @@ input {
 }
 
 
-
 /* Info Animation */
 
-#info {
-    text-align: center;
+#about {
     color: white;
-    transition: opacity 300ms;
-    will-change: opacity;
     z-index: 11;
-    transition-delay: 300ms;
+    overflow: hidden;
+    pointer-events: none;
 }
 
-#info:not(:target) {
+#about .fade-in {
+    transition: opacity 300ms;
+    will-change: opacity;
+    transition-delay: 300ms;
+    z-index: 11;
+    pointer-events: all;
+}
+
+#about:not(:target) .fade-in {
     opacity: 0;
     pointer-events: none;
     transition-delay: 0;
 }
 
-#info .logo {
+#about .logo {
     --icon-size: 96px;
 }
 
-#info .close {
+#about x-background {
     position: absolute;
-    top: 12px;
-    right: 12px;
-    color: white;
-    border-radius: 50%;
-}
-
-.info-background {
-    position: relative;
-}
-
-.info-background:before {
-    content: '';
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    top: -20px;
-    left: -32px;
+    top: calc(32px - 200px);
+    right: calc(32px - 200px);
+    width: 400px;
+    height: 400px;
     border-radius: 50%;
     background: var(--primary-color);
     transform: scale(0);
-    transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
     will-change: transform;
+    transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
+    z-index: -1;
 }
 
-#info:target+a>.info-background:before {
-    transform: scale(100);
+#about:target x-background {
+    transform: scale(10);
 }
 
-a[href="#info"] {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    color: #333;
-    z-index: 10;
-}
-
-#info .row a {
-    color: currentColor;
+#about .row a {
     margin: 8px 8px -16px;
 }
 
 
-
-
 /* Loading Indicator */
 
 .progress {
@@ -544,7 +543,6 @@ a[href="#info"] {
 }
 
 
-
 /* Toast */
 
 .toast-container {
@@ -559,7 +557,6 @@ x-toast {
     bottom: 24px;
     width: 100%;
     max-width: 344px;
-    border-radius: 8px;
     background-color: #323232;
     color: rgba(255, 255, 255, 0.95);
     align-items: center;
@@ -569,7 +566,7 @@ x-toast {
     transition: opacity 200ms, transform 300ms ease-out;
     cursor: default;
     line-height: 24px;
-    border-radius: 6px;
+    border-radius: 8px;
     pointer-events: all;
 }
 
@@ -578,12 +575,6 @@ x-toast:not([show]):not(:hover) {
     transform: translateY(100px);
 }
 
-#notification {
-    position: absolute;
-    right: 56px;
-    top: 12px;
-    color: #333;
-}
 
 /* Instructions */
 
@@ -603,12 +594,10 @@ x-peers:empty~x-instructions {
     opacity: 0;
 }
 
+
 /* Responsive Styles */
 
 @media (min-height: 800px) {
-    x-toast {
-        right: 24px;
-    }
     footer {
         margin-bottom: 16px;
     }
@@ -625,7 +614,7 @@ screen and (min-width: 1100px) {
     x-instructions {
         top: 24px;
     }
-    
+
     footer .logo {
         --icon-size: 40px;
     }

From c04cdad7db20fcd66a8e191c99282d21aa1a4ca2 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Sat, 22 Sep 2018 08:47:40 +0200
Subject: [PATCH 26/34] Cleanup

---
 client/scripts/network.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index ff113f3..efbd601 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -2,8 +2,8 @@ class ServerConnection {
 
     constructor() {
         this._connect();
-        Events.on('beforeunload', e => this._disconnect(), false);
-        Events.on('pagehide', e => this._disconnect(), false);
+        Events.on('beforeunload', e => this._disconnect());
+        Events.on('pagehide', e => this._disconnect());
         document.addEventListener('visibilitychange', e => this._onVisibilityChange());
 
     }
@@ -60,6 +60,7 @@ class ServerConnection {
 
     _disconnect() {
         this.send({ type: 'disconnect' });
+        this._socket.onclose = null;
         this._socket.close();
     }
 
@@ -130,7 +131,7 @@ class Peer {
     }
 
     _onReceivedPartitionEnd(offset) {
-        this.sendJSON({ type: 'partition_received', offset: offset });
+        this.sendJSON({ type: 'partition-received', offset: offset });
     }
 
     _sendNextPartition() {
@@ -156,7 +157,7 @@ class Peer {
             case 'partition':
                 this._onReceivedPartitionEnd(message);
                 break;
-            case 'partition_received':
+            case 'partition-received':
                 this._sendNextPartition();
                 break;
             case 'progress':
@@ -448,7 +449,7 @@ class FileChunker {
 }
 
 class FileDigester {
-    
+
     constructor(meta, callback) {
         this._buffer = [];
         this._bytesReceived = 0;
@@ -464,8 +465,8 @@ class FileDigester {
         const totalChunks = this._buffer.length;
         this.progress = this._bytesReceived / this._size;
         if (this._bytesReceived < this._size) return;
-
-        let received = new Blob(this._buffer, { type: this._mime }); // pass a useful mime type here
+        // we are done
+        let received = new Blob(this._buffer, { type: this._mime }); 
         let url = URL.createObjectURL(received);
         this._callback({
             name: this._name,
@@ -473,7 +474,6 @@ class FileDigester {
             size: this._size,
             url: url
         });
-        this._callback = null;
     }
 
 }

From 8f5c0efd3faf649a08b6f21d0c14cb1b83414044 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 25 Sep 2018 18:28:30 +0200
Subject: [PATCH 27/34] Change STUN server

---
 client/scripts/network.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index efbd601..6be09a9 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -466,7 +466,7 @@ class FileDigester {
         this.progress = this._bytesReceived / this._size;
         if (this._bytesReceived < this._size) return;
         // we are done
-        let received = new Blob(this._buffer, { type: this._mime }); 
+        let received = new Blob(this._buffer, { type: this._mime });
         let url = URL.createObjectURL(received);
         this._callback({
             name: this._name,
@@ -496,12 +496,8 @@ RTCPeer.config = {
     }, {
         urls: 'stun:stun.l.google.com:19302'
     }, {
-        urls: 'turn:turn.bistri.com:80',
-        credential: 'homeo',
-        username: 'homeo'
-    }, {
-        urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
-        credential: 'webrtc',
-        username: 'webrtc'
+        url: 'turn:192.158.29.39:3478?transport=tcp',
+        credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+        username: '28224511:1379330808'
     }]
 }
\ No newline at end of file

From 61351cd0222282db9d33ac08de04788832f9ec1c Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 25 Sep 2018 18:29:35 +0200
Subject: [PATCH 28/34] Fix depricated api

---
 client/scripts/network.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 6be09a9..d5a6b9a 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -496,7 +496,7 @@ RTCPeer.config = {
     }, {
         urls: 'stun:stun.l.google.com:19302'
     }, {
-        url: 'turn:192.158.29.39:3478?transport=tcp',
+        urls: 'turn:192.158.29.39:3478?transport=tcp',
         credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
         username: '28224511:1379330808'
     }]

From 4f8ecf4aace6bc4b2dc4f57362d2cbc543f20c3a Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 25 Sep 2018 18:36:56 +0200
Subject: [PATCH 29/34] Fix depricated api

---
 client/scripts/network.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index d5a6b9a..9c4802c 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -492,8 +492,6 @@ window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnecti
 
 RTCPeer.config = {
     'iceServers': [{
-        urls: 'stun:stun.stunprotocol.org:3478'
-    }, {
         urls: 'stun:stun.l.google.com:19302'
     }, {
         urls: 'turn:192.158.29.39:3478?transport=tcp',

From ca9a5566af04acf0d32a4802def98b7de7bfc39e Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 25 Sep 2018 18:53:12 +0200
Subject: [PATCH 30/34] Add logging for ICE failed

---
 client/scripts/network.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 9c4802c..776325a 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -244,6 +244,7 @@ class RTCPeer extends Peer {
         this._conn = new RTCPeerConnection(RTCPeer.config);
         this._conn.onicecandidate = e => this._onIceCandidate(e);
         this._conn.onconnectionstatechange = e => this._onConnectionStateChange(e);
+        this._conn.oniceconnectionstatechange = e => console.log(e);
     }
 
     _openChannel() {

From b65dab968e7cfc4d79f23263e62568c36d354ae0 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 25 Sep 2018 18:55:47 +0200
Subject: [PATCH 31/34] Add logging for ICE failed

---
 client/scripts/network.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 776325a..473a0d8 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -244,7 +244,7 @@ class RTCPeer extends Peer {
         this._conn = new RTCPeerConnection(RTCPeer.config);
         this._conn.onicecandidate = e => this._onIceCandidate(e);
         this._conn.onconnectionstatechange = e => this._onConnectionStateChange(e);
-        this._conn.oniceconnectionstatechange = e => console.log(e);
+        this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e);
     }
 
     _openChannel() {
@@ -306,6 +306,10 @@ class RTCPeer extends Peer {
         }
     }
 
+    _onIceConnectionStateChange(){
+        console.log('IceConnectionStateChange',this._conn.iceConnectionState);
+    }
+
     _onError(error) {
         console.error(error);
     }

From ab52a58fc54c9a8579524e60b54dc91797b529e2 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 25 Sep 2018 18:58:52 +0200
Subject: [PATCH 32/34] Add logging for ICE failed

---
 client/scripts/network.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 473a0d8..dfdb305 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -306,8 +306,14 @@ class RTCPeer extends Peer {
         }
     }
 
-    _onIceConnectionStateChange(){
-        console.log('IceConnectionStateChange',this._conn.iceConnectionState);
+    _onIceConnectionStateChange() {
+        switch (this._conn.iceConnectionState) {
+            case 'failed':
+                console.error('ICE Gathering failed');
+                break;
+            default:
+                console.log('ICE Gathering', this._conn.iceConnectionState);
+        }
     }
 
     _onError(error) {

From e9e8d6336bdba0d17465154ac48578ecad2958d8 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 9 Oct 2018 15:45:07 +0200
Subject: [PATCH 33/34] Refactor and cleanup

---
 client/scripts/network.js | 15 ++++---
 client/scripts/ui.js      | 12 +++---
 server/index.js           | 89 ++++++++++++++++++++-------------------
 3 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index dfdb305..96dabd1 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -1,3 +1,6 @@
+window.URL = window.URL || window.webkitURL;
+window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
+
 class ServerConnection {
 
     constructor() {
@@ -5,7 +8,6 @@ class ServerConnection {
         Events.on('beforeunload', e => this._disconnect());
         Events.on('pagehide', e => this._disconnect());
         document.addEventListener('visibilitychange', e => this._onVisibilityChange());
-
     }
 
     _connect() {
@@ -40,12 +42,12 @@ class ServerConnection {
                 this.send({ type: 'pong' });
                 break;
             default:
-                console.error('WS: unkown message type', msg)
+                console.error('WS: unkown message type', msg);
         }
     }
 
     send(message) {
-        if (this._socket.readyState !== this._socket.OPEN) return;
+        if (!this._isConnected()) return;
         this._socket.send(JSON.stringify(message));
     }
 
@@ -118,7 +120,7 @@ class Peer {
             type: 'header',
             name: file.name,
             mime: file.type,
-            size: file.size,
+            size: file.size
         });
         this._chunker = new FileChunker(file,
             chunk => this._send(chunk),
@@ -409,8 +411,8 @@ class WSPeer {
 class FileChunker {
 
     constructor(file, onChunk, onPartitionEnd) {
-        this._chunkSize = 64000;
-        this._maxPartitionSize = 1e6;
+        this._chunkSize = 64000;      // 64 KB
+        this._maxPartitionSize = 1e6; // 1 MB
         this._offset = 0;
         this._partitionSize = 0;
         this._file = file;
@@ -499,7 +501,6 @@ class Events {
     }
 }
 
-window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
 
 RTCPeer.config = {
     'iceServers': [{
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 8ef5251..2477767 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -25,16 +25,16 @@ class PeersUI {
     }
 
     _onPeerLeft(peerId) {
-        const peer = $(peerId);
-        if (!peer) return;
-        peer.remove();
+        const $peer = $(peerId);
+        if (!$peer) return;
+        $peer.remove();
     }
 
     _onFileProgress(progress) {
         const peerId = progress.sender || progress.recipient;
-        const peer = $(peerId);
-        if (!peer) return;
-        peer.ui.setProgress(progress.progress);
+        const $peer = $(peerId);
+        if (!$peer) return;
+        $peer.ui.setProgress(progress.progress);
     }
 
     _clearPeers() {
diff --git a/server/index.js b/server/index.js
index f231651..4c02151 100644
--- a/server/index.js
+++ b/server/index.js
@@ -4,9 +4,7 @@ class SnapdropServer {
 
     constructor(port) {
         const WebSocket = require('ws');
-        this._wss = new WebSocket.Server({
-            port: port
-        });
+        this._wss = new WebSocket.Server({ port: port });
         this._wss.on('connection', (socket, request) => this._onConnection(new Peer(socket, request)));
         this._wss.on('headers', (headers, response) => this._onHeaders(headers, response));
 
@@ -57,7 +55,6 @@ class SnapdropServer {
             this._rooms[peer.ip] = {};
         }
 
-        // console.log(peer.id, ' joined the room', peer.ip);
         // notify all other peers
         for (const otherPeerId in this._rooms[peer.ip]) {
             const otherPeer = this._rooms[peer.ip][otherPeerId];
@@ -97,10 +94,7 @@ class SnapdropServer {
             // notify all other peers
             for (const otherPeerId in this._rooms[peer.ip]) {
                 const otherPeer = this._rooms[peer.ip][otherPeerId];
-                this._send(otherPeer, {
-                    type: 'peer-left',
-                    peerId: peer.id
-                });
+                this._send(otherPeer, { type: 'peer-left', peerId: peer.id });
             }
         }
     }
@@ -109,7 +103,7 @@ class SnapdropServer {
         if (!peer) return console.error('undefined peer');
         if (this._wss.readyState !== this._wss.OPEN) return console.error('Socket is closed');
         message = JSON.stringify(message);
-        peer.socket.send(message, error => console.log(error));
+        peer.socket.send(message, error => error ? console.log(error): '');
     }
 
     _keepAlive(peer) {
@@ -145,24 +139,55 @@ class Peer {
 
 
         // set remote ip
-        if (request.headers['x-forwarded-for'])
-            this.ip = request.headers['x-forwarded-for'].split(/\s*,\s*/)[0];
-        else
-            this.ip = request.connection.remoteAddress;
+        this._setIP(request);
 
+        // set peer id
+        this._setPeerId(request)
+        // is WebRTC supported ?
+        this.rtcSupported = request.url.indexOf('webrtc') > -1;
+        // set name 
+        this._setName(request);
+        // for keepalive
+        this.timerId = 0;
+        this.lastBeat = Date.now();
+    }
+
+    _setIP(request) {
+        if (request.headers['x-forwarded-for']) {
+            this.ip = request.headers['x-forwarded-for'].split(/\s*,\s*/)[0];
+        } else {
+            this.ip = request.connection.remoteAddress;
+        }
+    }
+
+    _setPeerId(request) {
         if (request.peerId) {
             this.id = request.peerId;
         } else {
             this.id = request.headers.cookie.replace('peerid=', '');
         }
-        // set peer id
-        // is WebRTC supported ?
-        this.rtcSupported = request.url.indexOf('webrtc') > -1;
-        // set name 
-        this.setName(request);
-        // for keepalive
-        this.timerId = 0;
-        this.lastBeat = Date.now();
+    }
+
+    toString() {
+        return `<Peer id=${this.id} ip=${this.ip} rtcSupported=${this.rtcSupported}>`
+    }
+
+    _setName(req) {
+        var ua = parser(req.headers['user-agent']);
+        this.name = {
+            model: ua.device.model,
+            os: ua.os.name,
+            browser: ua.browser.name,
+            type: ua.device.type
+        };
+    }
+
+    getInfo() {
+        return {
+            id: this.id,
+            name: this.name,
+            rtcSupported: this.rtcSupported
+        }
     }
 
     // return uuid of form xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
@@ -190,28 +215,6 @@ class Peer {
         }
         return uuid;
     };
-
-    toString() {
-        return `<Peer id=${this.id} ip=${this.ip} rtcSupported=${this.rtcSupported}>`
-    }
-
-    setName(req) {
-        var ua = parser(req.headers['user-agent']);
-        this.name = {
-            model: ua.device.model,
-            os: ua.os.name,
-            browser: ua.browser.name,
-            type: ua.device.type
-        };
-    }
-
-    getInfo() {
-        return {
-            id: this.id,
-            name: this.name,
-            rtcSupported: this.rtcSupported
-        }
-    }
 }
 
 const server = new SnapdropServer(process.env.PORT || 3000);
\ No newline at end of file

From 29a755c55528a97edf4353f80190a1a69cd4bf85 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Tue, 9 Oct 2018 15:45:31 +0200
Subject: [PATCH 34/34] Fix iOS 12 download bug

---
 client/scripts/ui.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 2477767..ccb53f8 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -237,7 +237,7 @@ class ReceiveDialog extends Dialog {
         this.show();
 
         if (window.isDownloadSupported) return;
-        $a.target = "_blank"; // fallback
+        // $a.target = "_blank"; // fallback
     }
 
     _formatFileSize(bytes) {