Change opacity of member list entries when their presence changes.

This is done by attaching a single room listener at the member list level and
then forceUpdate()ing the individual tiles as presence changes come in from
the JS SDK. This is more efficient than having hundreds of listeners attached
directly to the JS SDK (if we were to add a listener per tile).

skins/base/css/molecules/MemberTile.css

@@ -51,3 +51,11 @@ limitations under the License.
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.mx_MemberTile_unavailable {
+    opacity: 0.75;
+}
+
+.mx_MemberTile_offline {
+    opacity: 0.5;
+}

skins/base/views/molecules/MemberTile.js

@@ -46,9 +46,21 @@ module.exports = React.createClass({
             var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
             power = <img src={ img } className="mx_MemberTile_power" width="48" height="48" alt=""/>;
         }
+        var presenceClass = "mx_MemberTile_offline";
+        var mainClassName = "mx_MemberTile ";
+        if (this.props.member.user) {
+            if (this.props.member.user.presence === "online") {
+                presenceClass = "mx_MemberTile_online";
+            }
+            else if (this.props.member.user.presence === "unavailable") {
+                presenceClass = "mx_MemberTile_unavailable";
+            }
+        }
+        mainClassName += presenceClass;
 
         return (
-            <div className="mx_MemberTile" onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave } >
+            <div className={mainClassName} onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }
+            >
                 <div className="mx_MemberTile_avatar">
                     <img className="mx_MemberTile_avatarImg"
                          src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 40, 40, "crop") : null }

skins/base/views/organisms/MemberList.js

@@ -47,7 +47,7 @@ module.exports = React.createClass({
         return Object.keys(self.state.memberDict).map(function(userId) {
             var m = self.state.memberDict[userId];
             return (
-                <MemberTile key={userId} member={m} />
+                <MemberTile key={userId} member={m} ref={userId} />
             );
         });
     },

src/controllers/organisms/MemberList.js

@@ -40,6 +40,7 @@ module.exports = {
     componentWillUnmount: function() {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+            MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn);
         }
     },
 
@@ -51,8 +52,19 @@ module.exports = {
                 memberDict: self.roomMembers()
             });
         }, 50);
-    },
 
+        // 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) {
+            var tile = self.refs[user.userId];
+            if (tile) {
+                tile.forceUpdate();
+            }
+        }
+        MatrixClientPeg.get().on("User.presence", updateUserState);
+        this.userPresenceFn = updateUserState;
+    },
     // Remember to set 'key' on a MemberList to the ID of the room it's for
     /*componentWillReceiveProps: function(newProps) {
     },*/