mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
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:
parent
353269370f
commit
f384aa7d9e
@ -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;
|
||||
}
|
@ -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 }>
|
||||
|
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user