Pass the call around different CallViews to keep media flowing

Previously, the CallView was attached to the RoomView, so you would get
a new CallView each time you changed the room and the one you changed
from would be destroyed. This would destroy media capture/playback as
the element was no longer in the DOM.

This is now fixed by having a "global" CallView which is attached at
the MatrixChat "page" level in the DOM hierarchy. This CallView isn't
scoped to a particular room; it will render any "active" call it can
find that *isn't the current room being displayed*. This has the side
effect of enforcing 1 call per app semantics as only the first active
call found is returned.

This fixes https://github.com/vector-im/vector-web/issues/31
This is unfinished (CSS for the global call view isn't done)

src/CallHandler.js

@@ -106,7 +106,7 @@ function _setCallListeners(call) {
             play("ringbackAudio");
         }
         else if (newState === "ended" && oldState === "connected") {
-            _setCallState(call, call.roomId, "ended");
+            _setCallState(undefined, call.roomId, "ended");
             pause("ringbackAudio");
             play("callendAudio");
         }
@@ -239,5 +239,16 @@ dis.register(function(payload) {
 module.exports = {
     getCall: function(roomId) {
         return calls[roomId] || null;
+    },
+
+    getAnyActiveCall: function() {
+        var roomsWithCalls = Object.keys(calls);
+        for (var i = 0; i < roomsWithCalls.length; i++) {
+            if (calls[roomsWithCalls[i]] &&
+                    calls[roomsWithCalls[i]].call_state !== "ended") {
+                return calls[roomsWithCalls[i]];
+            }
+        }
+        return null;
     }
 };

src/controllers/molecules/voip/CallView.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 var dis = require("../../../dispatcher");
 var CallHandler = require("../../../CallHandler");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
 
 /*
  * State vars:
@@ -24,14 +25,30 @@ var CallHandler = require("../../../CallHandler");
  *
  * Props:
  * this.props.room = Room (JS SDK)
+ *
+ * Internal state:
+ * this._trackedRoom = (either from props.room or programatically set)
  */
 
 module.exports = {
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
+        this._trackedRoom = null;
         if (this.props.room) {
-            this.showCall(this.props.room.roomId);
+            this._trackedRoom = this.props.room;
+            this.showCall(this._trackedRoom.roomId);
+        }
+        else {
+            var call = CallHandler.getAnyActiveCall();
+            if (call) {
+                console.log(
+                    "Global CallView is now tracking active call in room %s",
+                    call.roomId
+                );
+                this._trackedRoom = MatrixClientPeg.get().getRoom(call.roomId);
+                this.showCall(call.roomId);
+            }
         }
     },
 
@@ -41,8 +58,8 @@ module.exports = {
 
     onAction: function(payload) {
         // if we were given a room_id to track, don't handle anything else.
-        if (payload.room_id && this.props.room && 
-                this.props.room.roomId !== payload.room_id) {
+        if (payload.room_id && this._trackedRoom &&
+                this._trackedRoom.roomId !== payload.room_id) {
             return;
         }
         if (payload.action !== 'call_state') {

src/controllers/pages/MatrixChat.js

@@ -26,6 +26,7 @@ var dis = require("../../dispatcher");
 var q = require("q");
 
 var ComponentBroker = require('../../ComponentBroker');
+var CallHandler = require("../../CallHandler");
 var Notifier = ComponentBroker.get('organisms/Notifier');
 var MatrixTools = require('../../MatrixTools');
 
@@ -205,6 +206,13 @@ module.exports = {
             case 'notifier_enabled':
                 this.forceUpdate();
                 break;
+            case 'call_state':
+                // listen for call state changes to prod the render method, which
+                // may hide the global CallView if the call it is tracking is dead
+                this.setState({
+                    active_call: CallHandler.getAnyActiveCall()
+                });
+                break;
         }
     },