diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index fb58b204..e1c589a2 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 7a22b017..0f1fe1af 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/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 }> diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index e5fbe178..602e241e 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 = <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"> diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js index bc58ed79..6acce59a 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 d3feff69..459a3606 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() {