order the members list by most recently active

webclient/app.js

@@ -114,7 +114,20 @@ matrixWebClient
             return d + "d " + h + "h";
         }
     })
-    .filter('to_trusted', ['$sce', function($sce){
+    .filter('orderMembersList', function($sce) {
+        return function(members) {
+            var filtered = [];
+            angular.forEach(members, function(value, key) {
+                value["id"] = key;
+                filtered.push( value );
+            });
+            filtered.sort(function (a, b) {
+                return ((a["mtime_age"] || 10e10)> (b["mtime_age"] || 10e10) ? 1 : -1);
+            });
+            return filtered;
+        };
+    })
+    .filter('unsafe', ['$sce', function($sce) {
         return function(text) {
             return $sce.trustAsHtml(text);
         };

webclient/room/room.html

@@ -9,15 +9,14 @@
     
     <div id="usersTableWrapper">
         <table id="usersTable">
-            <tr ng-repeat="(name, info) in members">
+            <tr ng-repeat="member in members | orderMembersList">
                 <td class="userAvatar">
-                    <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
+                    <img class="userAvatarImage" ng-src="{{member.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
                     <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/>
-                    <!-- FIXME: does allowing <wbr/> to be unescaped introduce HTML injections from user IDs and display names? -->
-                    <div class="userName" ng-bind-html="info.displayname || (name.substr(0, name.indexOf(':')) + '<wbr/>' + name.substr(name.indexOf(':'))) | to_trusted"></div>
+                    <div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<wbr/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div>
                 </td>
-                <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')">
-                    {{ info.mtime_age | duration }} {{ info.mtime_age ? "ago" : "" }}
+                <td class="userPresence" ng-class="member.presenceState === 'online' ? 'online' : (member.presenceState === 'unavailable' ? 'unavailable' : '')">
+                    {{ member.mtime_age | duration }} {{ member.mtime_age ? "ago" : "" }}
                 </td>
         </table>
     </div>