Add input form

package.json

@@ -26,7 +26,8 @@
     "simple-peer": "^6.0.3",
     "socket.io": "^1.3.7",
     "socket.io-client": "^1.3.7",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "uuid": "^2.0.1"
   },
   "devDependencies": {
     "browserify-middleware": "^7.0.0",

src/index.js

@@ -5,13 +5,12 @@ if (!process.env.DEBUG) {
 }
 
 const app = require('./server/app.js');
-const http = require('http').Server(app);
 const os = require('os');
 
 let port = process.env.PORT || 3000;
 let ifaces = os.networkInterfaces();
 
-http.listen(port, function() {
+app.http.listen(port, function() {
   Object.keys(ifaces).forEach(ifname =>
     ifaces[ifname].forEach(iface =>
       console.log('listening on', iface.address, 'and port', port)));

src/js/index.js

@@ -27,6 +27,8 @@ activeStore.addListener(render);
 
 render();
 
+const callId = window.document.getElementById('callId').value;
+
 getUserMedia({ video: true, audio: false })
 .then(stream => {
   dispatcher.dispatch({
@@ -41,7 +43,7 @@ socket.once('connect', () => {
   getUserMedia({ video: true, audio: true })
   .then(stream => {
     debug('forwarding stream to handshake');
-    handshake.init(socket, 'test', stream);
+    handshake.init(socket, callId, stream);
   })
   .catch(err => {
     debug('error getting media: %s %s', err.name, err.message);

src/less/main.less

@@ -28,6 +28,46 @@ body {
   height: 100%;
 }
 
+#form {
+  text-align: center;
+  width: 300px;
+  margin: 0 auto;
+
+  input {
+    width: 100%;
+    border: 1px solid @color-fg;
+    background-color: @color-bg;
+    border-radius: 5px;
+    padding: 1em 2em;
+    margin-bottom: 1em;
+    color: @color-active;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  ::-webkit-input-placeholder {
+    color: @color-fg;
+    text-align: center;
+  }
+
+  :-moz-placeholder { /* Firefox 18- */
+    color: @color-fg;
+    text-align: center;
+  }
+
+  ::-moz-placeholder {  /* Firefox 19+ */
+    color: @color-fg;
+    text-align: center;
+  }
+
+  :-ms-input-placeholder {
+    color: @color-fg;
+    text-align: center;
+  }
+}
+
 .app {
   width: 100%;
   height: 100%;

src/server/app.js

@@ -1,17 +1,14 @@
 #!/usr/bin/env node
 'use strict';
-if (!process.env.DEBUG) {
-  process.env.DEBUG = 'peer-calls:*';
-}
-
 const express = require('express');
+const handleSocket = require('./socket.js');
+const os = require('os');
+const path = require('path');
+const uuid = require('uuid');
+
 const app = express();
 const http = require('http').Server(app);
 const io = require('socket.io')(http);
-const path = require('path');
-const os = require('os');
-
-const handleSocket = require('./socket.js');
 
 app.set('view engine', 'jade');
 app.set('views', path.join(__dirname, '../views'));
@@ -37,7 +34,17 @@ if (__dirname.indexOf('/dist/') >= 0 || __dirname.indexOf('\\dist\\') >= 0) {
 }
 
 app.get('/', (req, res) => res.render('index'));
+app.get('/call/', (req, res) => {
+  let prefix = 'call/';
+  if (req.url.charAt(req.url.length - 1) === '/') prefix = '';
+  res.redirect(prefix + uuid.v4());
+});
+app.get('/call/:callId', (req, res) => {
+  res.render('call', {
+    callId: req.params.callId
+  });
+});
 
 io.on('connection', socket => handleSocket(socket, io));
 
-module.exports = app;
+module.exports = { http, app };

src/views/call.jade

@@ -0,0 +1,19 @@
+doctype html
+html
+  head
+    title Peer Call
+    meta(charset="utf-8")
+    meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
+    meta(name="mobile-web-app-capable" content="yes")
+    meta(name="apple-mobile-web-app-capable" content="yes")
+    link(rel="apple-touch-icon" href="../res/icon.png")
+    link(rel="icon" sizes="256x256" href="../res/icon.png")
+    link(rel="stylesheet" type="text/css" href="../less/main.css")
+
+  body
+
+    input#callId(type="hidden" value="#{callId}")
+
+    div#container
+
+    script(src='../js/index.js')

src/views/index.jade

@@ -1,16 +1,32 @@
 doctype html
 html
   head
-    title Peer Call
+    title Peer Calls - Video calls to anybody in the world with a private direct connection
+    meta(charset="utf-8")
+    meta(name="description" content="Make video calls to anybody in the world with a private connection. Share the conversation by url.")
     meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
     meta(name="mobile-web-app-capable" content="yes")
     meta(name="apple-mobile-web-app-capable" content="yes")
     link(rel="apple-touch-icon" href="res/icon.png")
     link(rel="icon" sizes="256x256" href="res/icon.png")
-  link(rel="stylesheet" type="text/css" href="less/main.css")
+    link(rel="stylesheet" type="text/css" href="less/main.css")
 
   body
 
     div#container
 
-    script(src='js/index.js')
+
+      form#form
+        h1 Peer Calls
+        input#callId(name="callId" placeholder="Enter your call ID")
+        input(type="submit" value="Join")
+
+    script.
+      (function() {
+        var form = document.getElementById('form');
+        form.onsubmit = function(event) {
+          var callId = document.getElementById('callId').value;
+          window.location = 'call/' + (callId || '');
+          return false;
+        }
+      }());