Merge branch 'develop' into feature-composer-emoji

src/components/views/rooms/EntityTile.js

@@ -29,6 +29,23 @@ var PRESENCE_CLASS = {
     "unavailable": "mx_EntityTile_unavailable"
 };
 
+
+function presenceClassForMember(presenceState, lastActiveAgo) {
+    // offline is split into two categories depending on whether we have
+    // a last_active_ago for them.
+    if (presenceState == 'offline') {
+        if (lastActiveAgo) {
+            return PRESENCE_CLASS['offline'] + '_beenactive';
+        } else {
+            return PRESENCE_CLASS['offline'] + '_neveractive';
+        }
+    } else if (presenceState) {
+        return PRESENCE_CLASS[presenceState];
+    } else {
+        return PRESENCE_CLASS['offline'] + '_neveractive';
+    }
+}
+
 module.exports = React.createClass({
     displayName: 'EntityTile',
 
@@ -79,7 +96,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var presenceClass = PRESENCE_CLASS[this.props.presenceState] || "mx_EntityTile_offline";
+        const presenceClass = presenceClassForMember(
+            this.props.presenceState, this.props.presenceLastActiveAgo
+        );
+
         var mainClassName = "mx_EntityTile ";
         mainClassName += presenceClass + (this.props.className ? (" " + this.props.className) : "");
         var nameEl;

src/components/views/rooms/EventTile.js

@@ -101,6 +101,9 @@ module.exports = React.createClass({
         /* link URL for the highlights */
         highlightLink: React.PropTypes.string,
 
+        /* should show URL previews for this event */
+        showUrlPreview: React.PropTypes.bool,
+
         /* is this the focused event */
         isSelectedEvent: React.PropTypes.bool,
 
@@ -359,6 +362,8 @@ module.exports = React.createClass({
         var SenderProfile = sdk.getComponent('messages.SenderProfile');
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 
+        //console.log("EventTile showUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
+
         var content = this.props.mxEvent.getContent();
         var msgtype = content.msgtype;
 
@@ -420,6 +425,7 @@ module.exports = React.createClass({
                 <div className="mx_EventTile_line">
                     <EventTileType ref="tile" mxEvent={this.props.mxEvent} highlights={this.props.highlights}
                           highlightLink={this.props.highlightLink}
+                          showUrlPreview={this.props.showUrlPreview}
                           onWidgetLoad={this.props.onWidgetLoad} />
                 </div>
             </div>

src/components/views/rooms/InviteMemberList.js

@@ -37,17 +37,14 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
-        this._room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        var cli = MatrixClientPeg.get();
+        cli.on("RoomState.members", this.onRoomStateMember);
+
         this._emailEntity = null;
-        // Load the complete user list for inviting new users
-        // TODO: Keep this list bleeding-edge up-to-date. Practically speaking,
-        // it will do for now not being updated as random new users join different
-        // rooms as this list will be reloaded every room swap.
-        if (this._room) {
-            this._userList = MatrixClientPeg.get().getUsers().filter((u) => {
-                return !this._room.hasMembershipState(u.userId, "join");
-            });
-        }
+
+        // we have to update the list whenever membership changes
+        // particularly to avoid bug https://github.com/vector-im/vector-web/issues/1813
+        this._updateList();
     },
 
     componentDidMount: function() {
@@ -55,6 +52,28 @@ module.exports = React.createClass({
         this.onSearchQueryChanged('');
     },
 
+    componentWillUnmount: function() {
+        var cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("RoomState.members", this.onRoomStateMember);
+        }
+    },
+
+    _updateList: function() {
+        this._room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        // Load the complete user list for inviting new users
+        if (this._room) {
+            this._userList = MatrixClientPeg.get().getUsers().filter((u) => {
+                return (!this._room.hasMembershipState(u.userId, "join") &&
+                        !this._room.hasMembershipState(u.userId, "invite"));
+            });
+        }
+    },
+
+    onRoomStateMember: function(ev, state, member) {
+        this._updateList();
+    },
+
     onInvite: function(ev) {
         this.props.onInvite(this._input);
     },

src/components/views/rooms/MemberInfo.js

@@ -61,12 +61,16 @@ module.exports = React.createClass({
             updating: 0,
             devicesLoading: true,
             devices: null,
+            existingOneToOneRoomId: null,
         }
     },
 
-
     componentWillMount: function() {
         this._cancelDeviceList = null;
+
+        this.setState({
+            existingOneToOneRoomId: this.getExistingOneToOneRoomId()
+        });
     },
 
     componentDidMount: function() {
@@ -90,6 +94,44 @@ module.exports = React.createClass({
         }
     },
 
+    getExistingOneToOneRoomId: function() {
+        var self = this;
+        var rooms = MatrixClientPeg.get().getRooms();
+        var userIds = [
+            this.props.member.userId,
+            MatrixClientPeg.get().credentials.userId
+        ];
+        var existingRoomId;
+
+        // roomId can be null here because of a hack in MatrixChat.onUserClick where we
+        // abuse this to view users rather than room members.
+        var currentMembers;
+        if (this.props.member.roomId) {
+            var currentRoom = MatrixClientPeg.get().getRoom(this.props.member.roomId);
+            currentMembers = currentRoom.getJoinedMembers();
+        }
+
+        // reuse the first private 1:1 we find
+        existingRoomId = null;
+
+        for (var i = 0; i < rooms.length; i++) {
+            // don't try to reuse public 1:1 rooms
+            var join_rules = rooms[i].currentState.getStateEvents("m.room.join_rules", '');
+            if (join_rules && join_rules.getContent().join_rule === 'public') continue;
+
+            var members = rooms[i].getJoinedMembers();
+            if (members.length === 2 &&
+                userIds.indexOf(members[0].userId) !== -1 &&
+                userIds.indexOf(members[1].userId) !== -1)
+            {
+                existingRoomId = rooms[i].roomId;
+                break;
+            }
+        }
+
+        return existingRoomId;
+    },
+
     onDeviceVerificationChanged: function(userId, device) {
         if (userId == this.props.member.userId) {
             // no need to re-download the whole thing; just update our copy of
@@ -349,66 +391,29 @@ module.exports = React.createClass({
 
     onChatClick: function() {
         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        // TODO: keep existingOneToOneRoomId updated if we see any room member changes anywhere
+
+        var useExistingOneToOneRoom = this.state.existingOneToOneRoomId && (this.state.existingOneToOneRoomId !== this.props.member.roomId);
+
         // check if there are any existing rooms with just us and them (1:1)
         // If so, just view that room. If not, create a private room with them.
-        var self = this;
-        var rooms = MatrixClientPeg.get().getRooms();
-        var userIds = [
-            this.props.member.userId,
-            MatrixClientPeg.get().credentials.userId
-        ];
-        var existingRoomId;
-
-        // roomId can be null here because of a hack in MatrixChat.onUserClick where we
-        // abuse this to view users rather than room members.
-        var currentMembers;
-        if (this.props.member.roomId) {
-            var currentRoom = MatrixClientPeg.get().getRoom(this.props.member.roomId);
-            currentMembers = currentRoom.getJoinedMembers();
-        }
-        // if we're currently in a 1:1 with this user, start a new chat
-        if (currentMembers && currentMembers.length === 2 &&
-            userIds.indexOf(currentMembers[0].userId) !== -1 &&
-            userIds.indexOf(currentMembers[1].userId) !== -1)
-        {
-            existingRoomId = null;
-        }
-        // otherwise reuse the first private 1:1 we find
-        else {
-            existingRoomId = null;
-
-            for (var i = 0; i < rooms.length; i++) {
-                // don't try to reuse public 1:1 rooms
-                var join_rules = rooms[i].currentState.getStateEvents("m.room.join_rules", '');
-                if (join_rules && join_rules.getContent().join_rule === 'public') continue;
-
-                var members = rooms[i].getJoinedMembers();
-                if (members.length === 2 &&
-                    userIds.indexOf(members[0].userId) !== -1 &&
-                    userIds.indexOf(members[1].userId) !== -1)
-                {
-                    existingRoomId = rooms[i].roomId;
-                    break;
-                }
-            }
-        }
-
-        if (existingRoomId) {
+        if (this.state.existingOneToOneRoomId) {
             dis.dispatch({
                 action: 'view_room',
-                room_id: existingRoomId
+                room_id: this.state.existingOneToOneRoomId,
             });
             this.props.onFinished();
         }
         else {
-            self.setState({ updating: self.state.updating + 1 });
+            this.setState({ updating: this.state.updating + 1 });
             createRoom({
                 createOpts: {
                     invite: [this.props.member.userId],
                 },
-            }).finally(function() {
-                self.props.onFinished();
-                self.setState({ updating: self.state.updating - 1 });
+            }).finally(() => {
+                this.props.onFinished();
+                this.setState({ updating: this.state.updating - 1 });
             }).done();
         }
     },
@@ -553,7 +558,22 @@ module.exports = React.createClass({
         if (this.props.member.userId !== MatrixClientPeg.get().credentials.userId) {
             // FIXME: we're referring to a vector component from react-sdk
             var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
-            startChat = <BottomLeftMenuTile collapsed={ false } img="img/create-big.svg" label="Start chat" onClick={ this.onChatClick }/>
+
+            var label;
+            if (this.state.existingOneToOneRoomId) {
+                if (this.state.existingOneToOneRoomId == this.props.member.roomId) {
+                    label = "Start new direct chat";
+                }
+                else {
+                    label = "Go to direct chat";
+                }
+            }
+            else {
+                label = "Start direct chat";
+            }
+
+            startChat = <BottomLeftMenuTile collapsed={ false } img="img/create-big.svg"
+                                            label={ label } onClick={ this.onChatClick }/>
         }
 
         if (this.state.updating) {

src/components/views/rooms/MemberList.js

@@ -54,7 +54,7 @@ module.exports = React.createClass({
 
         this.memberDict = this.getMemberDict();
 
-        state.members = this.roomMembers(INITIAL_LOAD_NUM_MEMBERS);
+        state.members = this.roomMembers();
         return state;
     },
 
@@ -64,7 +64,10 @@ module.exports = React.createClass({
         cli.on("RoomMember.name", this.onRoomMemberName);
         cli.on("RoomState.events", this.onRoomStateEvent);
         cli.on("Room", this.onRoom); // invites
-        cli.on("User.presence", this.onUserPresence);
+        // We listen for changes to the lastPresenceTs which is essentially
+        // listening for all presence events (we display most of not all of
+        // the information contained in presence events).
+        cli.on("User.lastPresenceTs", this.onUserLastPresenceTs);
         // cli.on("Room.timeline", this.onRoomTimeline);
     },
 
@@ -75,24 +78,11 @@ module.exports = React.createClass({
             cli.removeListener("RoomMember.name", this.onRoomMemberName);
             cli.removeListener("RoomState.events", this.onRoomStateEvent);
             cli.removeListener("Room", this.onRoom);
-            cli.removeListener("User.presence", this.onUserPresence);
+            cli.removeListener("User.lastPresenceTs", this.onUserLastPresenceTs);
             // cli.removeListener("Room.timeline", this.onRoomTimeline);
         }
     },
 
-    componentDidMount: function() {
-        var self = this;
-
-        // Lazy-load in more than the first N members
-        setTimeout(function() {
-            if (!self.isMounted()) return;
-            // lazy load to prevent it blocking the first render
-            self.setState({
-                members: self.roomMembers()
-            });
-        }, 50);
-    },
-
 /*
     onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
         // ignore anything but real-time updates at the end of the room:
@@ -121,7 +111,7 @@ module.exports = React.createClass({
     },
 */
 
-    onUserPresence(event, user) {
+    onUserLastPresenceTs(event, user) {
         // 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.
@@ -325,7 +315,7 @@ module.exports = React.createClass({
         return all_members;
     },
 
-    roomMembers: function(limit) {
+    roomMembers: function() {
         var all_members = this.memberDict || {};
         var all_user_ids = Object.keys(all_members);
         var ConferenceHandler = CallHandler.getConferenceHandler();
@@ -334,7 +324,7 @@ module.exports = React.createClass({
 
         var to_display = [];
         var count = 0;
-        for (var i = 0; i < all_user_ids.length && (limit === undefined || count < limit); ++i) {
+        for (var i = 0; i < all_user_ids.length; ++i) {
             var user_id = all_user_ids[i];
             var m = all_members[user_id];
 
@@ -442,9 +432,16 @@ module.exports = React.createClass({
 
         var memberList = self.state.members.filter(function(userId) {
             var m = self.memberDict[userId];
-            if (query && m.name.toLowerCase().indexOf(query) === -1) {
-                return false;
+
+            if (query) {
+                const matchesName = m.name.toLowerCase().indexOf(query) !== -1;
+                const matchesId = m.userId.toLowerCase().indexOf(query) !== -1;
+
+                if (!matchesName && !matchesId) {
+                    return false;
+                }
             }
+
             return m.membership == membership;
         }).map(function(userId) {
             var m = self.memberDict[userId];

src/components/views/rooms/RoomSettings.js

@@ -65,7 +65,12 @@ module.exports = React.createClass({
             tags_changed: false,
             tags: tags,
             areNotifsMuted: areNotifsMuted,
-            isRoomPublished: false, // loaded async in componentWillMount
+            // isRoomPublished is loaded async in componentWillMount so when the component
+            // inits, the saved value will always be undefined, however getInitialState()
+            // is also called from the saving code so we must return the correct value here
+            // if we have it (although this could race if the user saves before we load whether
+            // the room is published or not).
+            isRoomPublished: this._originalIsRoomPublished,
         };
     },
 
@@ -211,10 +216,13 @@ module.exports = React.createClass({
         // color scheme
         promises.push(this.saveColor());
 
+        // url preview settings
+        promises.push(this.saveUrlPreviewSettings());
+
         // encryption
         promises.push(this.saveEncryption());
 
-        console.log("Performing %s operations", promises.length);
+        console.log("Performing %s operations: %s", promises.length, JSON.stringify(promises));
         return q.allSettled(promises);
     },
 
@@ -228,6 +236,11 @@ module.exports = React.createClass({
         return this.refs.color_settings.saveSettings();
     },
 
+    saveUrlPreviewSettings: function() {
+        if (!this.refs.url_preview_settings) { return q(); }
+        return this.refs.url_preview_settings.saveSettings();
+    },
+
     saveEncryption: function () {
         if (!this.refs.encrypt) { return q(); }
 
@@ -422,6 +435,7 @@ module.exports = React.createClass({
 
         var AliasSettings = sdk.getComponent("room_settings.AliasSettings");
         var ColorSettings = sdk.getComponent("room_settings.ColorSettings");
+        var UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
         var EditableText = sdk.getComponent('elements.EditableText');
         var PowerSelector = sdk.getComponent('elements.PowerSelector');
 
@@ -654,6 +668,8 @@ module.exports = React.createClass({
                     canonicalAliasEvent={this.props.room.currentState.getStateEvents('m.room.canonical_alias', '')}
                     aliasEvents={this.props.room.currentState.getStateEvents('m.room.aliases')} />
 
+                <UrlPreviewSettings ref="url_preview_settings" room={this.props.room} />
+
                 <h3>Permissions</h3>
                 <div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
                     <div className="mx_RoomSettings_powerLevel">

src/components/views/rooms/RoomTile.js

@@ -43,7 +43,10 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-        return( { hover : false });
+        return({
+            hover : false,
+            badgeHover : false,
+        });
     },
 
     onClick: function() {
@@ -61,6 +64,14 @@ module.exports = React.createClass({
         this.setState( { hover : false });
     },
 
+    badgeOnMouseEnter: function() {
+        this.setState( { badgeHover : true } );
+    },
+
+    badgeOnMouseLeave: function() {
+        this.setState( { badgeHover : false } );
+    },
+
     render: function() {
         var myUserId = MatrixClientPeg.get().credentials.userId;
         var me = this.props.room.currentState.members[myUserId];
@@ -83,9 +94,25 @@ module.exports = React.createClass({
 
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
         var badge;
-        if (this.props.highlight || notificationCount > 0) {
-            badge = <div className="mx_RoomTile_badge">{ notificationCount ? notificationCount : '!' }</div>;
+        var badgeContent;
+        var badgeClasses;
+
+        if (this.state.badgeHover) {
+            badgeContent = "\u00B7\u00B7\u00B7";
+        } else if (this.props.highlight || notificationCount > 0) {
+            badgeContent = notificationCount ? notificationCount : '!';
+        } else {
+            badgeContent = '\u200B';
         }
+
+        if (this.props.highlight || notificationCount > 0) {
+            badgeClasses = "mx_RoomTile_badge";
+        } else {
+            badgeClasses = "mx_RoomTile_badge mx_RoomTile_badge_no_unread";
+        }
+
+        badge = <div className={ badgeClasses } onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
+
         /*
         if (this.props.highlight) {
             badge = <div className="mx_RoomTile_badge">!</div>;

src/components/views/rooms/TabCompleteBar.js

@@ -24,17 +24,17 @@ module.exports = React.createClass({
     displayName: 'TabCompleteBar',
 
     propTypes: {
-        entries: React.PropTypes.array.isRequired
+        tabComplete: React.PropTypes.object.isRequired
     },
 
     render: function() {
         return (
             <div className="mx_TabCompleteBar">
-            {this.props.entries.map(function(entry, i) {
+            {this.props.tabComplete.peek(6).map((entry, i) => {
                 return (
                     <div key={entry.getKey() || i + ""}
-                         className={ "mx_TabCompleteBar_item " + (entry instanceof CommandEntry ? "mx_TabCompleteBar_command" : "") } 
-                         onClick={entry.onClick.bind(entry)} >
+                         className={ "mx_TabCompleteBar_item " + (entry instanceof CommandEntry ? "mx_TabCompleteBar_command" : "") }
+                         onClick={this.props.tabComplete.onEntryClick.bind(this.props.tabComplete, entry)} >
                         {entry.getImageJsx()}
                         <span className="mx_TabCompleteBar_text">
                             {entry.getText()}