From 5d59a5b297a91a078f80a2a8de8abab93e77348d Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 20 Jul 2015 17:42:19 +0100
Subject: [PATCH] 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  |  8 ++++++++
 skins/base/views/molecules/MemberTile.js | 14 +++++++++++++-
 skins/base/views/organisms/MemberList.js |  2 +-
 src/controllers/organisms/MemberList.js  | 14 +++++++++++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index ddd3962b33..2f735f624b 100644
--- a/skins/base/css/molecules/MemberTile.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js
index 4e00f2af23..1286173d38 100644
--- a/skins/base/views/molecules/MemberTile.js
+++ b/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 }
diff --git a/skins/base/views/organisms/MemberList.js b/skins/base/views/organisms/MemberList.js
index a08a03c3c3..3e586e569c 100644
--- a/skins/base/views/organisms/MemberList.js
+++ b/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} />
             );
         });
     },
diff --git a/src/controllers/organisms/MemberList.js b/src/controllers/organisms/MemberList.js
index 89dd985564..0695270066 100644
--- a/src/controllers/organisms/MemberList.js
+++ b/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) {
     },*/