Sort member list in room info

src/components/RoomInfo.vue

@@ -168,12 +168,12 @@
     <v-card class="members ma-3" flat>
       <v-card-title class="h2"
         >{{ $t("room_info.members") }}<v-spacer></v-spacer>
-        <div>{{ memberCount }}</div></v-card-title
+        <div>{{ members.length }}</div></v-card-title
       >
       <v-card-text>
         <div
           class="member ma-2"
-          v-for="(member, index) in joinedMembers"
+          v-for="(member, index) in members"
           :key="member.userId"
           v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
           @click="toggleMemberExpanded(member)"
@@ -216,7 +216,7 @@
             :member="member"
           />
         </div>
-        <div class="show-all" @click="showAllMembers = !showAllMembers" v-if="joinedMembers.length > SHOW_MEMBER_LIMIT">
+        <div class="show-all" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
           {{
             showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all")
           }}
@@ -294,7 +294,7 @@ export default {
   },
   data() {
     return {
-      memberCount: null,
+      members: [],
       user: null,
       displayName: "",
       showAllMembers: false,
@@ -323,7 +323,7 @@ export default {
   },
   mounted() {
     this.$matrix.on("Room.timeline", this.onEvent);
-    this.updateMemberCount();
+    this.updateMembers();
     this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
     this.displayName = this.user.displayName;
 
@@ -362,30 +362,13 @@ export default {
       }
       return "";
     },
-
-    joinedMembers() {
-      if (!this.room) {
-        return [];
-      }
-      const myUserId = this.$matrix.currentUserId;
-      return this.room.getJoinedMembers().sort((a, b) => {
-        if (a.userId == myUserId) {
-          return -1;
-        } else if (b.userId == myUserId) {
-          return 1;
-        }
-        const aName = a.user ? a.user.displayName : a.name;
-        const bName = b.user ? b.user.displayName : b.name;
-        return aName.localeCompare(bName);
-      });
-    },
   },
 
   watch: {
     room: {
       handler(ignoredNewVal, ignoredOldVal) {
         console.log("RoomInfo: Current room changed");
-        this.updateMemberCount();
+        this.updateMembers();
         this.updateQRCode();
       },
     },
@@ -393,19 +376,39 @@ export default {
 
   methods: {
     onEvent(event) {
-      if (event.getRoomId() !== this.roomId) {
-        return; // Not for this room
+      if (this.room && this.room.roomId == event.getRoomId()) {
+        // For this room
+        if (event.getType() == "m.room.member") {
+        this.updateMembers();
       }
-      if (event.getType() == "m.room.member") {
-        this.updateMemberCount();
       }
     },
 
-    updateMemberCount() {
+    updateMembers() {
       if (this.room) {
-        this.memberCount = this.room.getJoinedMemberCount();
+        const myUserId = this.$matrix.currentUserId;
+        this.members = this.room.getJoinedMembers().sort((a, b) => {
+          // Place ourselves at the top!
+          if (a.userId == myUserId) {
+            return -1;
+          } else if (b.userId == myUserId) {
+            return 1;
+          }
+
+          // Then sort by power level
+          if (a.powerLevel > b.powerLevel) {
+            return -1;
+          } else if (b.powerLevel > a.powerLevel) {
+            return 1;
+          }
+
+          // Then by name
+          const aName = a.user ? a.user.displayName : a.name;
+          const bName = b.user ? b.user.displayName : b.name;
+          return aName.localeCompare(bName);
+        });
       } else {
-        this.memberCount = null;
+        this.members = [];
       }
     },