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

server/index.js

@@ -1,4 +1,5 @@
 const parser = require('ua-parser-js');
+const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator');
 
 class SnapdropServer {
 
@@ -19,7 +20,13 @@ class SnapdropServer {
         this._keepAlive(peer);
 
         // send displayName
-        this._send(peer, { type: 'display-name', message: peer.name.displayName });
+        this._send(peer, {
+            type: 'display-name',
+            message: {
+                displayName: peer.name.displayName,
+                deviceName: peer.name.deviceName
+            }
+        });
     }
 
     _onHeaders(headers, response) {
@@ -188,19 +195,28 @@ class Peer {
         let ua = parser(req.headers['user-agent']);
 
 
-        let displayName = ua.os.name.replace('Mac OS', 'Mac') + ' ';
+        let deviceName = ua.os.name.replace('Mac OS', 'Mac') + ' ';
         if (ua.device.model) {
-            displayName += ua.device.model;
+            deviceName += ua.device.model;
         } else {
-            displayName += ua.browser.name;
+            deviceName += ua.browser.name;
         }
 
+        const displayName = uniqueNamesGenerator({
+            length: 2,
+            separator: ' ',
+            dictionaries: [colors, animals],
+            style: 'capital',
+            seed: this.id.hashCode()
+        })
+
         this.name = {
             model: ua.device.model,
             os: ua.os.name,
             browser: ua.browser.name,
             type: ua.device.type,
-            displayName: displayName
+            deviceName,
+            displayName
         };
     }
 
@@ -239,4 +255,16 @@ class Peer {
     };
 }
 
+Object.defineProperty(String.prototype, 'hashCode', {
+  value: function() {
+    var hash = 0, i, chr;
+    for (i = 0; i < this.length; i++) {
+      chr   = this.charCodeAt(i);
+      hash  = ((hash << 5) - hash) + chr;
+      hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+  }
+});
+
 const server = new SnapdropServer(process.env.PORT || 3000);