From 640266f660750b6bbeb8afc7a84229ea410028a0 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Thu, 17 Nov 2022 18:24:01 +0100
Subject: [PATCH] only show Peer when p2p channel is opened to prevent sending
 without open channel -> Improve stability

---
 client/scripts/network.js |  4 +++-
 client/scripts/ui.js      | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/scripts/network.js b/client/scripts/network.js
index e1383f3d..bf019482 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -293,6 +293,7 @@ class RTCPeer extends Peer {
 
     _onChannelOpened(event) {
         console.log('RTC: channel opened with', this._peerId);
+        Events.fire('peer-connected', this._peerId);
         const channel = event.channel || event.target;
         channel.binaryType = 'arraybuffer';
         channel.onmessage = e => this._onMessage(e.data);
@@ -302,7 +303,8 @@ class RTCPeer extends Peer {
 
     _onChannelClosed() {
         console.log('RTC: channel closed', this._peerId);
-        if (!this.isCaller) return;
+        Events.fire('peer-left', 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 426bbc9c..92ac5470 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -26,8 +26,6 @@ class PeersUI {
     _onPeerJoined(peer) {
         if ($(peer.id)) return; // peer already exists
         const peerUI = new PeerUI(peer);
-        $$('x-peers').appendChild(peerUI.$el);
-        setTimeout(e => window.animateBackground(false), 1750); // Stop animation
     }
 
     _onPeers(peers) {
@@ -91,8 +89,18 @@ class PeerUI {
 
     constructor(peer) {
         this._peer = peer;
-        this._initDom();
-        this._bindListeners(this.$el);
+        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
+        }
     }
 
     _initDom() {