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)

skins/base/views/pages/MatrixChat.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var ComponentBroker = require('../../../../src/ComponentBroker');
+var CallHandler = require('../../../../src/CallHandler');
 
 var LeftPanel = ComponentBroker.get('organisms/LeftPanel');
 var RoomView = ComponentBroker.get('organisms/RoomView');
@@ -29,8 +30,9 @@ var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
 var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
 var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
 var Notifier = ComponentBroker.get('organisms/Notifier');
+var CallView = ComponentBroker.get('molecules/voip/CallView');
 
-var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
+var MatrixChatController = require('../../../../src/controllers/pages/MatrixChat');
 
 // should be atomised
 var Loader = require("react-loader");
@@ -53,7 +55,7 @@ module.exports = React.createClass({
     render: function() {
         if (this.state.logged_in && this.state.ready) {
 
-            var page_element;
+            var page_element, call_element;
             var right_panel = "";
 
             switch (this.state.page_type) {
@@ -74,6 +76,17 @@ module.exports = React.createClass({
                     right_panel = <RightPanel/>
                     break;
             }
+            // if we aren't viewing a room with an ongoing call, but there is an
+            // active call, show the call element - we need to do this to make
+            // audio/video not crap out
+            if (this.state.active_call && (
+                    !this.state.currentRoom || !CallHandler.getCall(this.state.currentRoom))) {
+                console.log(
+                    "Creating global CallView for active call in room %s",
+                    this.state.active_call.roomId
+                );
+                call_element = <CallView className="mx_MatrixChat_callView"/>
+            }
 
             if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
                 return (
@@ -81,6 +94,7 @@ module.exports = React.createClass({
                             <MatrixToolbar />
                             <div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
                                 <LeftPanel selectedRoom={this.state.currentRoom} />
+                                {call_element}
                                 <main className="mx_MatrixChat_middlePanel">
                                     {page_element}
                                 </main>
@@ -93,6 +107,7 @@ module.exports = React.createClass({
                 return (
                         <div className="mx_MatrixChat">
                             <LeftPanel selectedRoom={this.state.currentRoom} />
+                            {call_element}
                             <main className="mx_MatrixChat_middlePanel">
                                 {page_element}
                             </main>

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