From e7c484f428314560d40b2ef3dd7d3ebb1c43b74b Mon Sep 17 00:00:00 2001
From: Mrigank Krishan <mrigankkrishan@gmail.com>
Date: Wed, 28 Aug 2019 20:44:51 +0530
Subject: [PATCH] show displayName on UI

---
 client/index.html         | 1 +
 client/scripts/network.js | 3 +++
 client/scripts/ui.js      | 7 ++++++-
 server/index.js           | 3 +++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/index.html b/client/index.html
index 91dc6f1..3a97cd3 100644
--- a/client/index.html
+++ b/client/index.html
@@ -61,6 +61,7 @@
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
+        <div id="displayName" class="font-body2">[ ... ]</div>
         <div>The easiest way to transfer data across devices.</div>
         <div class="font-body2">Allow me to be discovered by: Everyone in this network.</div>
     </footer>
diff --git a/client/scripts/network.js b/client/scripts/network.js
index 98807d9..8633db7 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -41,6 +41,9 @@ class ServerConnection {
             case 'ping':
                 this.send({ type: 'pong' });
                 break;
+            case 'displayName':
+                Events.fire('displayName', msg);
+                break;
             default:
                 console.error('WS: unkown message type', msg);
         }
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index b830130..8fda890 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -491,7 +491,12 @@ class Snapdrop {
             const notifications = new Notifications();
             const networkStatusUI = new NetworkStatusUI();
             const webShareTargetUI = new WebShareTargetUI();
-        })
+        });
+
+        // set display name
+        Events.on('displayName', e => {
+            $("displayName").textContent = "[ " + e.detail.message + " ]";
+        });
     }
 }
 
diff --git a/server/index.js b/server/index.js
index c6e3ffb..6967029 100644
--- a/server/index.js
+++ b/server/index.js
@@ -18,6 +18,9 @@ class SnapdropServer {
         this._joinRoom(peer);
         peer.socket.on('message', message => this._onMessage(peer, message));
         this._keepAlive(peer);
+
+        // send displayName
+        this._send(peer, { type: 'displayName', message: peer.name.displayName });
     }
 
     _onHeaders(headers, response) {