add discovery of a screencatter near you

Author: mafintosh

app.html

@@ -19,7 +19,7 @@
       </p>
     </main>
   </div>
-  
+
   <div class="viewing-container dn">
     <main class="center mw8 phm phl-ns ptl pbxl">
       <p class="mono gray lh-copy thin mw7 f4 f3-ns">
@@ -77,7 +77,7 @@ <h2 class="f4 ttu book cl">join</h2>
             <div class="code-paste-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Connect</div>
           </div>
         </div>
-        <p>Enter a code to connect to a remote screen</p>
+        <p>Enter a code to connect to a remote screen. <span class="code-mdns">Found <a href="javascript:void(0)" class="code-mdns-button"></a> near you</span></p>
       </div>
 
     </main>

app.js

@@ -1,6 +1,7 @@
 var ipc = require('ipc')
 var clipboard = require('clipboard')
 var shell = require('shell')
+var mdns = require('multicast-dns')()
 
 var createPeerConnection = require('./peer.js')
 var ui = require('./ui.js')
@@ -10,6 +11,24 @@ var peer
 var peerConnection = createPeerConnection()
 window.pc = peerConnection
 
+mdns.on('query', function (query) {
+  if (!ui.inputs.copy.value) return
+  query.questions.forEach(function (q) {
+    if (q.type === 'TXT' && q.name === 'screencat') {
+      mdns.respond([{type: 'TXT', name: 'screencat', data: ui.inputs.copy.value}])
+    }
+  })
+})
+
+mdns.on('response', function (res) {
+  res.answers.forEach(function (a) {
+    if (a.type === 'TXT' && a.name === 'screencat') {
+      ui.buttons.mdns.innerText = a.data
+      ui.show(ui.containers.mdns)
+    }
+  })
+})
+
 peerConnection.on('connected', function connected (newPeer, remote) {
   peer = newPeer
 
@@ -63,18 +82,33 @@ ui.buttons.share.addEventListener('click', function (e) {
   connect.host(peerConnection, ui)
 })
 
+ui.buttons.mdns.addEventListener('click', function (e) {
+  ui.inputs.paste.value = ui.buttons.mdns.innerText.trim()
+  ui.buttons.paste.click()
+})
+
 ui.buttons.join.addEventListener('click', function (e) {
+  ui.hide(ui.containers.mdns)
   ui.show(ui.containers.join)
   ui.hide(ui.containers.choose)
   ui.show(ui.buttons.back)
+
+  var interval = setInterval(query, 1000)
+  query()
+
   connect.verifyUserRoom(peerConnection, ui, function (err, room, config) {
+    clearInterval(interval)
     if (err) {
       ui.inputs.paste.value = 'Error! ' + err.message
       return
     }
     ui.inputs.paste.value = 'Waiting on other side...'
     ipc.send('create-window', {config: config, room: room})
   })
+
+  function query () {
+    mdns.query([{type: 'TXT', name: 'screencat'}])
+  }
 })
 
 ui.buttons.back.addEventListener('click', function (e) {

package.json

@@ -14,6 +14,7 @@
   "license": "BSD-3-Clause",
   "dependencies": {
     "menubar": "^2.0.4",
+    "multicast-dns": "^3.0.0",
     "nets": "^3.1.0",
     "simple-peer": "^5.11.5",
     "ssejson": "^1.2.0",

ui.js

@@ -12,7 +12,8 @@ ui.containers = {
   choose: document.querySelector('.choose-container'),
   multimedia: document.querySelector('.multimedia-container'),
   sharing: document.querySelector('.sharing-container'),
-  viewing: document.querySelector('.viewing-container')
+  viewing: document.querySelector('.viewing-container'),
+  mdns: document.querySelector('.code-mdns')
 }
 
 ui.buttons = {
@@ -24,7 +25,8 @@ ui.buttons = {
   back: document.querySelector('.back-button'),
   destroy: document.querySelector('.sharing-container .destroy-button'),
   stopViewing: document.querySelector('.viewing-container .destroy-button'),
-  show: document.querySelector('.viewing-container .show-button')
+  show: document.querySelector('.viewing-container .show-button'),
+  mdns: document.querySelector('.code-mdns-button')
 }
 
 ui.inputs = {