From e5a2c6326e665343b0e4afc67802bab4fa157518 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Thu, 22 Dec 2022 22:41:26 +0100
Subject: [PATCH] fix problem of multiple creation of PeerUI when peer has
 joined mutliple times without successfully creating a p2p connection

---
 client/scripts/network.js |  2 +-
 client/scripts/ui.js      | 46 +++++++++++++++++++++------------------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index 6d951aa..9004d4f 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -311,7 +311,7 @@ class RTCPeer extends Peer {
 
     _onChannelClosed() {
         console.log('RTC: channel closed', this._peerId);
-        Events.fire('peer-left', this._peerId);
+        Events.fire('peer-disconnected', this._peerId);
         if (!this._isCaller) return;
         this._connect(this._peerId, true); // reopen the channel
     }
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 92ac547..0e0d7b3 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -18,14 +18,21 @@ class PeersUI {
     constructor() {
         Events.on('peer-joined', e => this._onPeerJoined(e.detail));
         Events.on('peer-left', e => this._onPeerLeft(e.detail));
+        Events.on('peer-connected', e => this._onPeerConnected(e.detail));
+        Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
         Events.on('peers', e => this._onPeers(e.detail));
         Events.on('file-progress', e => this._onFileProgress(e.detail));
         Events.on('paste', e => this._onPaste(e));
+        this.peers = {};
     }
 
     _onPeerJoined(peer) {
-        if ($(peer.id)) return; // peer already exists
-        const peerUI = new PeerUI(peer);
+        if (this.peers[peer.id]) return; // peer already exists
+        this.peers[peer.id] = peer;
+    }
+
+    _onPeerConnected(peerId) {
+        new PeerUI(this.peers[peerId]);
     }
 
     _onPeers(peers) {
@@ -33,12 +40,16 @@ class PeersUI {
         peers.forEach(peer => this._onPeerJoined(peer));
     }
 
-    _onPeerLeft(peerId) {
+    _onPeerDisconnected(peerId) {
         const $peer = $(peerId);
         if (!$peer) return;
         $peer.remove();
     }
 
+    _onPeerLeft(peerId) {
+        delete this.peers[peerId];
+    }
+
     _onFileProgress(progress) {
         const peerId = progress.sender || progress.recipient;
         const $peer = $(peerId);
@@ -48,6 +59,7 @@ class PeersUI {
 
     _clearPeers() {
         const $peers = $$('x-peers').innerHTML = '';
+        Object.keys(this.peers).forEach(key => delete this.peers[key]);
     }
 
     _onPaste(e) {
@@ -89,18 +101,10 @@ class PeerUI {
 
     constructor(peer) {
         this._peer = peer;
-        this.callbackFunction = (e) => this._onPeerConnected(e.detail);
-        Events.on('peer-connected', this.callbackFunction);
-    }
-
-    _onPeerConnected(peerId) {
-        if (peerId === this._peer.id) {
-            Events.off('peer-connected', this.callbackFunction)
-            this._initDom();
-            this._bindListeners(this.$el);
-            $$('x-peers').appendChild(this.$el);
-            setTimeout(e => window.animateBackground(false), 1750); // Stop animation
-        }
+        this._initDom();
+        this._bindListeners(this.$el);
+        $$('x-peers').appendChild(this.$el);
+        setTimeout(e => window.animateBackground(false), 1750); // Stop animation
     }
 
     _initDom() {
@@ -443,12 +447,12 @@ class Notifications {
         }
 
         // Notification is persistent on Android. We have to close it manually
-        const visibilitychangeHandler = () => {                             
-            if (document.visibilityState === 'visible') {    
+        const visibilitychangeHandler = () => {
+            if (document.visibilityState === 'visible') {
                 notification.close();
                 Events.off('visibilitychange', visibilitychangeHandler);
-            }                                                       
-        };                                                                                
+            }
+        };
         Events.on('visibilitychange', visibilitychangeHandler);
 
         return notification;
@@ -500,8 +504,8 @@ class Notifications {
 class NetworkStatusUI {
 
     constructor() {
-        window.addEventListener('offline', e => this._showOfflineMessage(), false);
-        window.addEventListener('online', e => this._showOnlineMessage(), false);
+        Events.on('offline', e => this._showOfflineMessage());
+        Events.on('online', e => this._showOnlineMessage());
         if (!navigator.onLine) this._showOfflineMessage();
     }