From f384aa7d9ec14645736857ab2e5ffd5e0529cead Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 15 Sep 2015 14:18:17 +0100 Subject: [PATCH] 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 | 9 +++++ skins/base/views/organisms/RoomView.js | 10 +++++ skins/base/views/pages/MatrixChat.js | 1 + src/controllers/organisms/RoomList.js | 2 +- src/controllers/organisms/RoomView.js | 56 +++++++++++++++++++++----- 5 files changed, 68 insertions(+), 10 deletions(-) diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index fb58b2049..e1c589a2b 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/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; +} \ No newline at end of file diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index 7a22b0178..0f1fe1afa 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/skins/base/views/organisms/RoomView.js @@ -176,6 +176,15 @@ module.exports = React.createClass({ roomEdit = ; } + var conferenceCallNotification = null; + if (this.state.displayConfCallNotification) { + conferenceCallNotification = ( +
+ Ongoing conference call +
+ ); + } + var fileDropTarget = null; if (this.state.draggingFile) { fileDropTarget =
@@ -192,6 +201,7 @@ module.exports = React.createClass({ onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
+ { conferenceCallNotification } { roomEdit }
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index e5fbe178a..602e241ea 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -89,6 +89,7 @@ module.exports = React.createClass({ call_element = } + // TODO: Fix duplication here and do conditionals like we do above if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) { return (
diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js index bc58ed796..6acce59a3 100644 --- a/src/controllers/organisms/RoomList.js +++ b/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; } } diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index d3feff69f..459a3606e 100644 --- a/src/controllers/organisms/RoomView.js +++ b/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) { - break; - } - // scroll to bottom - var messageWrapper = this.refs.messageWrapper; - if (messageWrapper) { - messageWrapper = messageWrapper.getDOMNode(); - messageWrapper.scrollTop = messageWrapper.scrollHeight; + if (CallHandler.getCallForRoom(this.props.roomId)) { + // Call state has changed so we may be loading video elements + // which will obscure the message log. + // scroll to bottom + var messageWrapper = this.refs.messageWrapper; + if (messageWrapper) { + messageWrapper = messageWrapper.getDOMNode(); + 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() {