show displayName on UI

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>

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);
         }

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 + " ]";
+        });
     }
 }
 

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) {