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.
This commit is contained in:
Kegan Dougal 2015-09-15 14:18:17 +01:00
parent 353269370f
commit f384aa7d9e
5 changed files with 68 additions and 10 deletions

View File

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

View File

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

View File

@ -89,6 +89,7 @@ module.exports = React.createClass({
call_element = <CallView className="mx_MatrixChat_callView"/> 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()) { if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
return ( return (
<div className="mx_MatrixChat_wrapper"> <div className="mx_MatrixChat_wrapper">

View File

@ -112,7 +112,7 @@ module.exports = {
return m.userId !== member.userId return m.userId !== member.userId
})[0]; })[0];
if (ConferenceHandler.isConferenceUser(otherMember)) { 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; shouldShowRoom = false;
} }
} }

View File

@ -31,7 +31,8 @@ var dis = require("../../dispatcher");
var PAGINATE_SIZE = 20; var PAGINATE_SIZE = 20;
var INITIAL_SIZE = 100; var INITIAL_SIZE = 100;
var ComponentBroker = require('../../ComponentBroker'); var ConferenceHandler = require("../../ConferenceHandler");
var CallHandler = require("../../CallHandler");
var Notifier = ComponentBroker.get('organisms/Notifier'); var Notifier = ComponentBroker.get('organisms/Notifier');
var tileTypes = { var tileTypes = {
@ -62,6 +63,7 @@ module.exports = {
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
MatrixClientPeg.get().on("Room.name", this.onRoomName); MatrixClientPeg.get().on("Room.name", this.onRoomName);
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping); MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
this.atBottom = true; this.atBottom = true;
}, },
@ -78,6 +80,7 @@ module.exports = {
MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
MatrixClientPeg.get().removeListener("Room.name", this.onRoomName); MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping); MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
} }
}, },
@ -94,15 +97,20 @@ module.exports = {
this.forceUpdate(); this.forceUpdate();
break; break;
case 'call_state': 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; break;
} }
}, },
@ -170,6 +178,35 @@ module.exports = {
this.forceUpdate(); 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() { componentDidMount: function() {
if (this.refs.messageWrapper) { if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper.getDOMNode();
@ -183,6 +220,7 @@ module.exports = {
this.fillSpace(); this.fillSpace();
} }
this._updateConfCallNotification();
}, },
componentDidUpdate: function() { componentDidUpdate: function() {