Refactor call initialization

src/client/browser/video.js

@@ -0,0 +1,15 @@
+const debug = require('debug')('peer-calls:video');
+
+function play() {
+  let videos = window.document.querySelectorAll('video');
+  Array.prototype.forEach.call(videos, (video, index) => {
+    debug('playing video: %s', index);
+    try {
+      video.play();
+    } catch (e) {
+      debug('error playing video: %s', e.name);
+    }
+  });
+}
+
+module.exports = { play };

src/client/call.js

@@ -0,0 +1,49 @@
+const debug = require('debug')('peer-calls:call');
+const dispatcher = require('./dispatcher/dispatcher.js');
+const getUserMedia = require('./browser/getUserMedia.js');
+const play = require('./browser/video.js').play;
+const notify = require('./action/notify.js');
+const handshake = require('./peer/handshake.js');
+const socket = require('./socket.js');
+
+dispatcher.register(action => {
+  if (action.type === 'play') play();
+});
+
+function init() {
+  const callId = window.document.getElementById('callId').value;
+
+  getUserMedia({ video: true, audio: false })
+  .then(stream => {
+    dispatcher.dispatch({
+      type: 'add-stream',
+      userId: '_me_',
+      stream
+    });
+  })
+  .catch(() => {
+    notify.alert('Could not get access to microphone & camera');
+  });
+
+  socket.once('connect', () => {
+    notify.warn('Connected to server socket');
+    debug('socket connected');
+
+    getUserMedia({ video: true, audio: true })
+    .then(stream => {
+      debug('forwarding stream to handshake');
+      handshake.init(socket, callId, stream);
+    })
+    .catch(err => {
+      notify.alert('Could not get access to camera!', true);
+      debug('error getting media: %s %s', err.name, err.message);
+    });
+  });
+
+  socket.on('disconnect', () => {
+    notify.error('Server socket disconnected');
+  });
+
+}
+
+module.exports = { init };

src/client/index.js

@@ -1,7 +1,4 @@
 'use strict';
-if (window.localStorage && !window.localStorage.debug) {
-  window.localStorage.debug = 'peer-calls:*';
-}
 window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {};
 
 const App = require('./components/app.js');
@@ -9,36 +6,18 @@ const React = require('react');
 const ReactDom = require('react-dom');
 const activeStore = require('./store/activeStore.js');
 const alertStore = require('./store/alertStore.js');
+const call = require('./call.js');
 const debug = require('debug')('peer-calls:index');
-const dispatcher = require('./dispatcher/dispatcher.js');
-const getUserMedia = require('./browser/getUserMedia.js');
-const handshake = require('./peer/handshake.js');
 const notificationsStore = require('./store/notificationsStore.js');
-const notify = require('./action/notify.js');
+const play = require('./browser/video.js').play;
-const socket = require('./socket.js');
 const streamStore = require('./store/streamStore.js');
 
-function play() {
-  let videos = window.document.querySelectorAll('video');
-  Array.prototype.forEach.call(videos, (video, index) => {
-    debug('playing video: %s', index);
-    try {
-      video.play();
-    } catch (e) {
-      debug('error playing video: %s', e.name);
-    }
-  });
-}
-
 function render() {
+  debug('rendering');
   ReactDom.render(<App />, document.querySelector('#container'));
   play();
 }
 
-dispatcher.register(action => {
-  if (action.type === 'play') play();
-});
-
 activeStore.addListener(render);
 alertStore.addListener(render);
 notificationsStore.addListener(render);
@@ -46,34 +25,4 @@ streamStore.addListener(render);
 
 render();
 
-const callId = window.document.getElementById('callId').value;
+call.init();
-
-getUserMedia({ video: true, audio: false })
-.then(stream => {
-  dispatcher.dispatch({
-    type: 'add-stream',
-    userId: '_me_',
-    stream
-  });
-})
-.catch(() => {
-  notify.alert('Could not get access to microphone & camera');
-});
-
-socket.once('connect', () => {
-  notify.warn('Connected to server socket');
-  debug('socket connected');
-  getUserMedia({ video: true, audio: true })
-  .then(stream => {
-    debug('forwarding stream to handshake');
-    handshake.init(socket, callId, stream);
-  })
-  .catch(err => {
-    notify.alert('Could not get access to camera!', true);
-    debug('error getting media: %s %s', err.name, err.message);
-  });
-});
-
-socket.on('disconnect', () => {
-  notify.error('Server socket disconnected');
-});

src/client/peer/handshake.js

@@ -10,7 +10,7 @@ function init(socket, roomName, stream) {
 
   function createPeer(user, initiator) {
     debug('create peer: %s', user.id);
-    notify.warn('Initializing new peer connection');
+    notify.warn('Connecting to peer...');
 
     let peer = peers[user.id] = Peer.init({
       initiator: '/#' + socket.id === initiator,

src/client/store/callIdStore.js

@@ -0,0 +1,5 @@
+function getCallId() {
+  return window.document.getElementById('callId').value;
+}
+
+module.exports = { getCallId };

src/server/app.js

@@ -41,7 +41,7 @@ app.get('/call/', (req, res) => {
 });
 app.get('/call/:callId', (req, res) => {
   res.render('call', {
-    callId: req.params.callId
+    callId: encodeURIComponent(req.params.callId)
   });
 });