Combine browser name and unique name

client/scripts/ui.js

@@ -7,7 +7,10 @@ window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
 // set display name
 Events.on('display-name', e => {
-    $('displayName').textContent = 'You are known as ' + e.detail.message;
+    const me = e.detail.message;
+    const $displayName = $('displayName')
+    $displayName.textContent = 'You are known as ' + me.displayName;
+    $displayName.title = me.deviceName;
 });
 
 class PeersUI {
@@ -80,6 +83,7 @@ class PeerUI {
                   <div class="circle right"></div>
                 </div>
                 <div class="name font-subheading"></div>
+                <div class="device-name font-body2"></div>
                 <div class="status font-body2"></div>
             </label>`
     }
@@ -96,7 +100,8 @@ class PeerUI {
         el.innerHTML = this.html();
         el.ui = this;
         el.querySelector('svg use').setAttribute('xlink:href', this._icon());
-        el.querySelector('.name').textContent = this._name();
+        el.querySelector('.name').textContent = this._displayName();
+        el.querySelector('.device-name').textContent = this._deviceName();
         this.$el = el;
         this.$progress = el.querySelector('.progress');
     }
@@ -115,10 +120,14 @@ class PeerUI {
         Events.on('drop', e => e.preventDefault());
     }
 
-    _name() {
+    _displayName() {
         return this._peer.name.displayName;
     }
 
+    _deviceName() {
+        return this._peer.name.deviceName;
+    }
+
     _icon() {
         const device = this._peer.name.device || this._peer.name;
         if (device.type === 'mobile') {

client/styles.css

@@ -256,7 +256,7 @@ x-peer[transfer] x-icon {
     transform: scale(1);
 }
 
-.status {
+.status, .device-name {
     height: 18px;
     opacity: 0.7;
 }
@@ -265,6 +265,11 @@ x-peer[transfer] .status:before {
     content: 'Transferring...';
 }
 
+x-peer:not([transfer]) .status,
+x-peer[transfer] .device-name{
+    display: none;
+}
+
 x-peer x-icon {
     animation: pop 600ms ease-out 1;
 }