Move the 'thumbnail' video to the top-left of the screen

This was originally laid out at the MatrixChat level which could then be
CSSified, but Matthew suggests this looks a lot better being at the
RoomList level above recents. Move the rendering logic to RoomList.

skins/base/views/organisms/RoomList.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var ComponentBroker = require('../../../../src/ComponentBroker');
-
+var CallView = ComponentBroker.get('molecules/voip/CallView');
 var RoomDropTarget = ComponentBroker.get('molecules/RoomDropTarget');
 
 var RoomListController = require("../../../../src/controllers/organisms/RoomList");
@@ -28,8 +28,14 @@ module.exports = React.createClass({
     mixins: [RoomListController],
 
     render: function() {
+        var callElement;
+        if (this.state.show_call_element) {
+            callElement = <CallView className="mx_MatrixChat_callView"/>
+        }
+
         return (
             <div className="mx_RoomList">
+                {callElement}
                 <h2 className="mx_RoomList_favourites_label">Favourites</h2>
                 <RoomDropTarget text="Drop here to favourite"/>
 

skins/base/views/pages/MatrixChat.js

@@ -18,7 +18,6 @@ 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');
@@ -30,7 +29,6 @@ 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');
 
@@ -55,7 +53,7 @@ module.exports = React.createClass({
     render: function() {
         if (this.state.logged_in && this.state.ready) {
 
-            var page_element, call_element;
+            var page_element;
             var right_panel = "";
 
             switch (this.state.page_type) {
@@ -76,18 +74,6 @@ 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.getCallForRoom(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"/>
-            }
 
             // TODO: Fix duplication here and do conditionals like we do above
             if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
@@ -96,7 +82,6 @@ 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>
@@ -109,7 +94,6 @@ 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/controllers/organisms/RoomList.js

@@ -19,9 +19,11 @@ limitations under the License.
 var React = require("react");
 var MatrixClientPeg = require("../../MatrixClientPeg");
 var RoomListSorter = require("../../RoomListSorter");
+var dis = require("../../dispatcher");
 
 var ComponentBroker = require('../../ComponentBroker');
 var ConferenceHandler = require("../../ConferenceHandler");
+var CallHandler = require("../../CallHandler");
 
 var RoomTile = ComponentBroker.get("molecules/RoomTile");
 
@@ -41,7 +43,22 @@ module.exports = {
         });
     },
 
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            // listen for call state changes to prod the render method, which
+            // may hide the global CallView if the call it is tracking is dead
+            case 'call_state':
+                this._recheckCallElement(this.props.selectedRoom);
+                break;
+        }
+    },
+
     componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("Room", this.onRoom);
             MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
@@ -51,6 +68,7 @@ module.exports = {
 
     componentWillReceiveProps: function(newProps) {
         this.state.activityMap[newProps.selectedRoom] = undefined;
+        this._recheckCallElement(newProps.selectedRoom);
         this.setState({
             activityMap: this.state.activityMap
         });
@@ -122,6 +140,18 @@ module.exports = {
         );
     },
 
+    _recheckCallElement: function(selectedRoomId) {
+        // 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
+        var activeCall = CallHandler.getAnyActiveCall();
+        var callForRoom = CallHandler.getCallForRoom(selectedRoomId);
+        var showCall = (activeCall && !callForRoom);
+        this.setState({
+            show_call_element: showCall
+        });
+    },
+
     makeRoomTiles: function() {
         var self = this;
         return this.state.roomList.map(function(room) {
@@ -136,5 +166,5 @@ module.exports = {
                 />
             );
         });
-    },
+    }
 };

src/controllers/pages/MatrixChat.js

@@ -26,7 +26,6 @@ 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');
 
@@ -206,13 +205,6 @@ 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;
         }
     },