2015-06-23 15:41:25 +00:00
|
|
|
/*
|
2016-01-07 04:06:39 +00:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-06-23 15:41:25 +00:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
2015-11-30 15:13:28 +00:00
|
|
|
var React = require('react');
|
|
|
|
var classNames = require('classnames');
|
2016-01-13 16:55:28 +00:00
|
|
|
var Matrix = require("matrix-js-sdk");
|
2016-01-15 15:18:55 +00:00
|
|
|
var q = require('q');
|
2015-11-30 15:13:28 +00:00
|
|
|
var MatrixClientPeg = require("../../../MatrixClientPeg");
|
|
|
|
var Modal = require("../../../Modal");
|
2016-01-15 09:58:48 +00:00
|
|
|
var Entities = require("../../../Entities");
|
2015-11-30 15:13:28 +00:00
|
|
|
var sdk = require('../../../index');
|
|
|
|
var GeminiScrollbar = require('react-gemini-scrollbar');
|
2015-06-22 10:42:09 +00:00
|
|
|
|
2015-06-25 13:57:35 +00:00
|
|
|
var INITIAL_LOAD_NUM_MEMBERS = 50;
|
2016-01-15 15:18:55 +00:00
|
|
|
var SHARE_HISTORY_WARNING = "Newly invited users will see the history of this room. "+
|
|
|
|
"If you'd prefer invited users not to see messages that were sent before they joined, "+
|
|
|
|
"turn off, 'Share message history with new users' in the settings for this room.";
|
|
|
|
|
|
|
|
var shown_invite_warning_this_session = false;
|
2015-06-25 13:57:35 +00:00
|
|
|
|
2015-11-30 15:13:28 +00:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'MemberList',
|
2015-06-25 13:57:35 +00:00
|
|
|
getInitialState: function() {
|
2015-10-12 15:25:49 +00:00
|
|
|
if (!this.props.roomId) return { members: [] };
|
2015-10-09 16:24:48 +00:00
|
|
|
var cli = MatrixClientPeg.get();
|
|
|
|
var room = cli.getRoom(this.props.roomId);
|
2015-10-12 15:25:49 +00:00
|
|
|
if (!room) return { members: [] };
|
2015-10-09 16:24:48 +00:00
|
|
|
|
|
|
|
this.memberDict = this.getMemberDict();
|
|
|
|
|
2015-06-25 13:57:35 +00:00
|
|
|
var members = this.roomMembers(INITIAL_LOAD_NUM_MEMBERS);
|
|
|
|
return {
|
2015-10-09 16:24:48 +00:00
|
|
|
members: members
|
2015-06-25 13:57:35 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-06-22 10:42:09 +00:00
|
|
|
componentWillMount: function() {
|
|
|
|
var cli = MatrixClientPeg.get();
|
|
|
|
cli.on("RoomState.members", this.onRoomStateMember);
|
2015-10-28 15:15:35 +00:00
|
|
|
cli.on("RoomMember.name", this.onRoomMemberName);
|
2015-09-18 17:39:16 +00:00
|
|
|
cli.on("Room", this.onRoom); // invites
|
2015-06-22 10:42:09 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
if (MatrixClientPeg.get()) {
|
2015-09-18 17:39:16 +00:00
|
|
|
MatrixClientPeg.get().removeListener("Room", this.onRoom);
|
2015-06-22 10:42:09 +00:00
|
|
|
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
|
2015-11-05 15:07:46 +00:00
|
|
|
MatrixClientPeg.get().removeListener("RoomMember.name", this.onRoomMemberName);
|
2015-09-18 17:39:16 +00:00
|
|
|
MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn);
|
2015-06-22 10:42:09 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-06-25 13:57:35 +00:00
|
|
|
componentDidMount: function() {
|
2015-09-18 17:39:16 +00:00
|
|
|
var self = this;
|
2015-09-28 10:32:00 +00:00
|
|
|
|
|
|
|
// Lazy-load in more than the first N members
|
2015-06-25 13:57:35 +00:00
|
|
|
setTimeout(function() {
|
2015-09-18 17:39:16 +00:00
|
|
|
if (!self.isMounted()) return;
|
|
|
|
self.setState({
|
2015-10-09 16:24:48 +00:00
|
|
|
members: self.roomMembers()
|
2015-06-25 13:57:35 +00:00
|
|
|
});
|
|
|
|
}, 50);
|
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
// Attach a SINGLE listener for global presence changes then locate the
|
|
|
|
// member tile and re-render it. This is more efficient than every tile
|
|
|
|
// evar attaching their own listener.
|
|
|
|
function updateUserState(event, user) {
|
2015-10-02 13:37:34 +00:00
|
|
|
// XXX: evil hack to track the age of this presence info.
|
2015-09-28 10:32:00 +00:00
|
|
|
// this should be removed once syjs-28 is resolved in the JS SDK itself.
|
|
|
|
user.lastPresenceTs = Date.now();
|
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
var tile = self.refs[user.userId];
|
2015-09-28 10:32:00 +00:00
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
if (tile) {
|
2015-09-28 10:32:00 +00:00
|
|
|
self._updateList(); // reorder the membership list
|
2015-09-18 17:39:16 +00:00
|
|
|
}
|
|
|
|
}
|
2015-09-28 10:32:00 +00:00
|
|
|
// FIXME: we should probably also reset 'lastActiveAgo' to zero whenever
|
|
|
|
// we see a typing notif from a user, as we don't get presence updates for those.
|
2015-09-18 17:39:16 +00:00
|
|
|
MatrixClientPeg.get().on("User.presence", updateUserState);
|
|
|
|
this.userPresenceFn = updateUserState;
|
|
|
|
},
|
2015-06-22 10:42:09 +00:00
|
|
|
// Remember to set 'key' on a MemberList to the ID of the room it's for
|
|
|
|
/*componentWillReceiveProps: function(newProps) {
|
|
|
|
},*/
|
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
onRoom: function(room) {
|
|
|
|
if (room.roomId !== this.props.roomId) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// We listen for room events because when we accept an invite
|
|
|
|
// we need to wait till the room is fully populated with state
|
|
|
|
// before refreshing the member list else we get a stale list.
|
|
|
|
this._updateList();
|
|
|
|
},
|
|
|
|
|
2015-06-22 10:42:09 +00:00
|
|
|
onRoomStateMember: function(ev, state, member) {
|
2015-09-18 17:39:16 +00:00
|
|
|
this._updateList();
|
|
|
|
},
|
|
|
|
|
2015-10-28 15:15:35 +00:00
|
|
|
onRoomMemberName: function(ev, member) {
|
|
|
|
this._updateList();
|
|
|
|
},
|
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
_updateList: function() {
|
2015-10-09 16:24:48 +00:00
|
|
|
this.memberDict = this.getMemberDict();
|
|
|
|
|
|
|
|
var self = this;
|
2015-06-22 10:42:09 +00:00
|
|
|
this.setState({
|
2015-10-09 16:24:48 +00:00
|
|
|
members: self.roomMembers()
|
2015-06-22 10:42:09 +00:00
|
|
|
});
|
2015-06-24 12:48:39 +00:00
|
|
|
},
|
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
onInvite: function(inputText) {
|
2015-11-30 14:11:04 +00:00
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2015-09-18 17:39:16 +00:00
|
|
|
var self = this;
|
|
|
|
inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
|
2015-11-09 17:36:14 +00:00
|
|
|
var isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
|
|
|
|
|
|
|
|
// sanity check the input for user IDs
|
|
|
|
if (!isEmailAddress && (inputText[0] !== '@' || inputText.indexOf(":") === -1)) {
|
2015-09-18 17:39:16 +00:00
|
|
|
console.error("Bad user ID to invite: %s", inputText);
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Invite Error",
|
|
|
|
description: "Malformed user ID. Should look like '@localpart:domain'"
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2015-11-09 17:36:14 +00:00
|
|
|
|
2016-01-15 15:18:55 +00:00
|
|
|
var invite_defer = q.defer();
|
|
|
|
|
|
|
|
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
|
|
|
|
var history_visibility = room.currentState.getStateEvents('m.room.history_visibility', '');
|
|
|
|
if (history_visibility) history_visibility = history_visibility.getContent().history_visibility;
|
|
|
|
|
|
|
|
if (history_visibility == 'shared' && !shown_invite_warning_this_session) {
|
|
|
|
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
|
|
Modal.createDialog(QuestionDialog, {
|
|
|
|
title: "Warning",
|
|
|
|
description: SHARE_HISTORY_WARNING,
|
|
|
|
button: "Invite",
|
|
|
|
onFinished: function(should_invite) {
|
|
|
|
if (should_invite) {
|
|
|
|
shown_invite_warning_this_session = true;
|
|
|
|
invite_defer.resolve();
|
|
|
|
} else {
|
|
|
|
invite_defer.reject(null);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
invite_defer.resolve();
|
|
|
|
}
|
|
|
|
|
|
|
|
var promise = invite_defer.promise;;
|
2015-11-09 17:36:14 +00:00
|
|
|
if (isEmailAddress) {
|
2016-01-15 15:18:55 +00:00
|
|
|
promise = promise.then(function() {
|
|
|
|
MatrixClientPeg.get().inviteByEmail(self.props.roomId, inputText);
|
|
|
|
});
|
2015-11-09 17:36:14 +00:00
|
|
|
}
|
|
|
|
else {
|
2016-01-15 15:18:55 +00:00
|
|
|
promise = promise.then(function() {
|
|
|
|
MatrixClientPeg.get().invite(self.props.roomId, inputText);
|
|
|
|
});
|
2015-11-09 17:36:14 +00:00
|
|
|
}
|
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
self.setState({
|
|
|
|
inviting: true
|
|
|
|
});
|
2015-11-09 17:36:14 +00:00
|
|
|
console.log(
|
|
|
|
"Invite %s to %s - isEmail=%s", inputText, this.props.roomId, isEmailAddress
|
|
|
|
);
|
|
|
|
promise.done(function(res) {
|
2015-09-18 17:39:16 +00:00
|
|
|
console.log("Invited");
|
|
|
|
self.setState({
|
|
|
|
inviting: false
|
|
|
|
});
|
|
|
|
}, function(err) {
|
2016-01-15 15:18:55 +00:00
|
|
|
if (err !== null) {
|
|
|
|
console.error("Failed to invite: %s", JSON.stringify(err));
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Server error whilst inviting",
|
|
|
|
description: err.message
|
|
|
|
});
|
|
|
|
}
|
2015-09-18 17:39:16 +00:00
|
|
|
self.setState({
|
|
|
|
inviting: false
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-10-09 16:24:48 +00:00
|
|
|
getMemberDict: function() {
|
2015-09-18 17:39:16 +00:00
|
|
|
if (!this.props.roomId) return {};
|
2015-06-24 12:48:39 +00:00
|
|
|
var cli = MatrixClientPeg.get();
|
2015-09-18 17:39:16 +00:00
|
|
|
var room = cli.getRoom(this.props.roomId);
|
|
|
|
if (!room) return {};
|
2015-10-09 16:24:48 +00:00
|
|
|
|
2015-09-18 17:39:16 +00:00
|
|
|
var all_members = room.currentState.members;
|
|
|
|
|
2015-10-02 13:37:34 +00:00
|
|
|
// XXX: evil hack until SYJS-28 is fixed
|
2015-10-09 16:24:48 +00:00
|
|
|
Object.keys(all_members).map(function(userId) {
|
2015-09-28 10:32:00 +00:00
|
|
|
if (all_members[userId].user && !all_members[userId].user.lastPresenceTs) {
|
|
|
|
all_members[userId].user.lastPresenceTs = Date.now();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-10-09 16:24:48 +00:00
|
|
|
return all_members;
|
|
|
|
},
|
2015-09-18 17:39:16 +00:00
|
|
|
|
2015-10-09 16:24:48 +00:00
|
|
|
roomMembers: function(limit) {
|
2015-10-21 13:45:39 +00:00
|
|
|
var all_members = this.memberDict || {};
|
2015-10-09 16:24:48 +00:00
|
|
|
var all_user_ids = Object.keys(all_members);
|
2015-09-18 17:39:16 +00:00
|
|
|
|
2015-10-09 16:24:48 +00:00
|
|
|
if (this.memberSort) all_user_ids.sort(this.memberSort);
|
2015-09-18 17:39:16 +00:00
|
|
|
|
2015-10-09 16:24:48 +00:00
|
|
|
var to_display = [];
|
2015-06-25 13:57:35 +00:00
|
|
|
var count = 0;
|
|
|
|
for (var i = 0; i < all_user_ids.length && (limit === undefined || count < limit); ++i) {
|
2015-06-24 13:01:59 +00:00
|
|
|
var user_id = all_user_ids[i];
|
2015-06-24 12:48:39 +00:00
|
|
|
var m = all_members[user_id];
|
|
|
|
|
|
|
|
if (m.membership == 'join' || m.membership == 'invite') {
|
2015-10-09 16:24:48 +00:00
|
|
|
to_display.push(user_id);
|
2015-06-25 13:57:35 +00:00
|
|
|
++count;
|
2015-06-24 12:48:39 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
return to_display;
|
2015-11-30 15:13:28 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
memberSort: function(userIdA, userIdB) {
|
|
|
|
var userA = this.memberDict[userIdA].user;
|
|
|
|
var userB = this.memberDict[userIdB].user;
|
|
|
|
|
|
|
|
var presenceMap = {
|
|
|
|
online: 3,
|
|
|
|
unavailable: 2,
|
|
|
|
offline: 1
|
|
|
|
};
|
|
|
|
|
|
|
|
var presenceOrdA = userA ? presenceMap[userA.presence] : 0;
|
|
|
|
var presenceOrdB = userB ? presenceMap[userB.presence] : 0;
|
|
|
|
|
|
|
|
if (presenceOrdA != presenceOrdB) {
|
|
|
|
return presenceOrdB - presenceOrdA;
|
|
|
|
}
|
|
|
|
|
|
|
|
var latA = userA ? (userA.lastPresenceTs - (userA.lastActiveAgo || userA.lastPresenceTs)) : 0;
|
|
|
|
var latB = userB ? (userB.lastPresenceTs - (userB.lastActiveAgo || userB.lastPresenceTs)) : 0;
|
|
|
|
|
|
|
|
return latB - latA;
|
|
|
|
},
|
|
|
|
|
|
|
|
makeMemberTiles: function(membership) {
|
|
|
|
var MemberTile = sdk.getComponent("rooms.MemberTile");
|
|
|
|
|
|
|
|
var self = this;
|
2016-01-13 15:55:28 +00:00
|
|
|
|
|
|
|
var memberList = self.state.members.filter(function(userId) {
|
2015-11-30 15:13:28 +00:00
|
|
|
var m = self.memberDict[userId];
|
|
|
|
return m.membership == membership;
|
|
|
|
}).map(function(userId) {
|
|
|
|
var m = self.memberDict[userId];
|
|
|
|
return (
|
|
|
|
<MemberTile key={userId} member={m} ref={userId} />
|
|
|
|
);
|
|
|
|
});
|
2016-01-13 15:55:28 +00:00
|
|
|
|
|
|
|
if (membership === "invite") {
|
|
|
|
// include 3pid invites (m.room.third_party_invite) state events.
|
|
|
|
// The HS may have already converted these into m.room.member invites so
|
|
|
|
// we shouldn't add them if the 3pid invite state key (token) is in the
|
|
|
|
// member invite (content.third_party_invite.signed.token)
|
|
|
|
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
|
2016-01-18 16:55:51 +00:00
|
|
|
var EntityTile = sdk.getComponent("rooms.EntityTile");
|
|
|
|
var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
|
2016-01-13 15:55:28 +00:00
|
|
|
if (room) {
|
|
|
|
room.currentState.getStateEvents("m.room.third_party_invite").forEach(
|
|
|
|
function(e) {
|
|
|
|
// discard all invites which have a m.room.member event since we've
|
|
|
|
// already added them.
|
|
|
|
var memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey());
|
|
|
|
if (memberEvent) {
|
|
|
|
return;
|
|
|
|
}
|
2016-01-18 16:55:51 +00:00
|
|
|
var avatarJsx = (
|
|
|
|
<BaseAvatar name={e.getContent().display_name} width={36} height={36} />
|
|
|
|
);
|
2016-01-13 15:55:28 +00:00
|
|
|
memberList.push(
|
2016-01-18 16:55:51 +00:00
|
|
|
<EntityTile key={e.getStateKey()} ref={e.getStateKey()}
|
|
|
|
name={e.getContent().display_name} avatarJsx={avatarJsx} />
|
2016-01-13 16:55:28 +00:00
|
|
|
)
|
2016-01-13 15:55:28 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return memberList;
|
2015-11-30 15:13:28 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
inviteTile: function() {
|
|
|
|
if (this.state.inviting) {
|
|
|
|
var Loader = sdk.getComponent("elements.Spinner");
|
|
|
|
return (
|
|
|
|
<Loader />
|
|
|
|
);
|
|
|
|
} else {
|
2016-01-15 10:31:31 +00:00
|
|
|
// TODO: Cache this calculation
|
2016-01-14 17:27:06 +00:00
|
|
|
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
|
2016-01-15 10:31:31 +00:00
|
|
|
var allUsers = MatrixClientPeg.get().getUsers();
|
|
|
|
// only add Users if they don't exist in the member list
|
|
|
|
allUsers = allUsers.filter(function(u) {
|
|
|
|
return room.getMember(u.userId) === null;
|
|
|
|
});
|
|
|
|
|
|
|
|
var SearchableEntityList = sdk.getComponent("rooms.SearchableEntityList");
|
|
|
|
|
2015-11-30 15:13:28 +00:00
|
|
|
return (
|
2016-01-14 17:27:06 +00:00
|
|
|
<SearchableEntityList searchPlaceholderText={"Invite / Search"}
|
|
|
|
onSubmit={this.onInvite}
|
|
|
|
entities={
|
2016-01-15 09:58:48 +00:00
|
|
|
Entities.fromRoomMembers(
|
2016-01-14 17:27:06 +00:00
|
|
|
room.currentState.getMembers() // ALLLLL OF THEM
|
2016-01-15 10:31:31 +00:00
|
|
|
).concat(
|
|
|
|
Entities.fromUsers(allUsers)
|
2016-01-14 17:27:06 +00:00
|
|
|
)
|
|
|
|
} />
|
2015-11-30 15:13:28 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var invitedSection = null;
|
|
|
|
var invitedMemberTiles = this.makeMemberTiles('invite');
|
|
|
|
if (invitedMemberTiles.length > 0) {
|
|
|
|
invitedSection = (
|
|
|
|
<div className="mx_MemberList_invited">
|
|
|
|
<h2>Invited</h2>
|
|
|
|
<div className="mx_MemberList_wrapper">
|
|
|
|
{invitedMemberTiles}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="mx_MemberList">
|
|
|
|
<GeminiScrollbar autoshow={true} className="mx_MemberList_border">
|
|
|
|
{this.inviteTile()}
|
|
|
|
<div>
|
|
|
|
<div className="mx_MemberList_wrapper">
|
|
|
|
{this.makeMemberTiles('join')}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{invitedSection}
|
|
|
|
</GeminiScrollbar>
|
|
|
|
</div>
|
|
|
|
);
|
2015-06-22 10:42:09 +00:00
|
|
|
}
|
2015-11-30 15:13:28 +00:00
|
|
|
});
|
2015-06-22 10:42:09 +00:00
|
|
|
|