Add notification to group chat rooms with ongoing conf calls

This notification disappears when in the conf call / when the call is over.
CSS stolen from the desktop notification bar.

skins/base/css/organisms/RoomView.css

@@ -218,3 +218,12 @@ limitations under the License.
     background-color: blue;
     height: 5px;
 }
+
+.mx_RoomView_ongoingConfCallNotification {
+    width: 100%;
+    text-align: center;
+    background-color: #ff0064;
+    color: #fff;
+    font-weight: bold;
+    padding: 6px;
+}

skins/base/views/organisms/RoomView.js

@@ -176,6 +176,15 @@ module.exports = React.createClass({
                 roomEdit = <Loader/>;
             }
 
+            var conferenceCallNotification = null;
+            if (this.state.displayConfCallNotification) {
+                conferenceCallNotification = (
+                    <div className="mx_RoomView_ongoingConfCallNotification">
+                        Ongoing conference call
+                    </div>
+                );
+            }
+
             var fileDropTarget = null;
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
@@ -192,6 +201,7 @@ module.exports = React.createClass({
                         onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
                     <div className="mx_RoomView_auxPanel">
                         <CallView room={this.state.room}/>
+                        { conferenceCallNotification }
                         { roomEdit }
                     </div>
                     <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>

skins/base/views/pages/MatrixChat.js

@@ -89,6 +89,7 @@ module.exports = React.createClass({
                 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()) {
                 return (
                         <div className="mx_MatrixChat_wrapper">

src/controllers/organisms/RoomList.js

@@ -112,7 +112,7 @@ module.exports = {
                             return m.userId !== member.userId
                         })[0];
                         if (ConferenceHandler.isConferenceUser(otherMember)) {
-                            console.log("Hiding conference 1:1 room %s", room.roomId);
+                            // console.log("Hiding conference 1:1 room %s", room.roomId);
                             shouldShowRoom = false;
                         }
                     }

src/controllers/organisms/RoomView.js

@@ -31,7 +31,8 @@ var dis = require("../../dispatcher");
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 100;
 
-var ComponentBroker = require('../../ComponentBroker');
+var ConferenceHandler = require("../../ConferenceHandler");
+var CallHandler = require("../../CallHandler");
 var Notifier = ComponentBroker.get('organisms/Notifier');
 
 var tileTypes = {
@@ -62,6 +63,7 @@ module.exports = {
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+        MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
         this.atBottom = true;
     },
 
@@ -78,6 +80,7 @@ module.exports = {
             MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
             MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
+            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
         }
     },
 
@@ -94,15 +97,20 @@ module.exports = {
                 this.forceUpdate();
                 break;
             case 'call_state':
-                if (this.props.roomId !== payload.room_id) {
+                if (CallHandler.getCallForRoom(this.props.roomId)) {
-                    break;
+                    // Call state has changed so we may be loading video elements
-                }
+                    // which will obscure the message log.
-                // scroll to bottom
+                    // scroll to bottom
-                var messageWrapper = this.refs.messageWrapper;
+                    var messageWrapper = this.refs.messageWrapper;
-                if (messageWrapper) {
+                    if (messageWrapper) {
-                    messageWrapper = messageWrapper.getDOMNode();
+                        messageWrapper = messageWrapper.getDOMNode();
-                    messageWrapper.scrollTop = messageWrapper.scrollHeight;
+                        messageWrapper.scrollTop = messageWrapper.scrollHeight;
+                    }
                 }
+
+                // possibly remove the conf call notification if we're now in
+                // the conf
+                this._updateConfCallNotification();
                 break;
         }
     },
@@ -170,6 +178,35 @@ module.exports = {
         this.forceUpdate();
     },
 
+    onRoomStateMember: function(ev, state, member) {
+        if (member.roomId !== this.props.roomId ||
+                member.userId !== ConferenceHandler.getConferenceUserIdForRoom(member.roomId)) {
+            return;
+        }
+        this._updateConfCallNotification();
+    },
+
+    _updateConfCallNotification: function() {
+        var member = MatrixClientPeg.get().getRoom(this.props.roomId).getMember(
+            ConferenceHandler.getConferenceUserIdForRoom(this.props.roomId)
+        );
+
+        if (!member) {
+            return;
+        }
+        console.log("_updateConfCallNotification");
+        var confCall = CallHandler.getConferenceCall(member.roomId);
+
+        // A conf call notification should be displayed if there is an ongoing
+        // conf call but this cilent isn't a part of it.
+        this.setState({
+            displayConfCallNotification: (
+                (!confCall || confCall.call_state === "ended") &&
+                member.membership === "join"
+            )
+        });
+    },
+
     componentDidMount: function() {
         if (this.refs.messageWrapper) {
             var messageWrapper = this.refs.messageWrapper.getDOMNode();
@@ -183,6 +220,7 @@ module.exports = {
 
             this.fillSpace();
         }
+        this._updateConfCallNotification();
     },
 
     componentDidUpdate: function() {