Member Panel - PR 2 - UI

src/domain/navigation/index.js

@@ -39,7 +39,7 @@ function allowsChild(parent, child) {
         case "room":
             return type === "lightbox" || type === "right-panel";
         case "right-panel":
-            return type === "details"|| type === "members";
+            return type === "details"|| type === "members" || type === "member";
         default:
             return false;
     }
@@ -87,9 +87,9 @@ function roomsSegmentWithRoom(rooms, roomId, path) {
     }
 }
 
-function pushRightPanelSegment(array, segment) {
+function pushRightPanelSegment(array, segment, value = true) {
     array.push(new Segment("right-panel"));
-    array.push(new Segment(segment));
+    array.push(new Segment(segment, value));
 }
 
 export function addPanelIfNeeded(navigation, path) {
@@ -132,10 +132,11 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
                 segments.push(roomsSegmentWithRoom(rooms, roomId, currentNavPath));
             }
             segments.push(new Segment("room", roomId));
-            if (currentNavPath.get("details")?.value) {
-                pushRightPanelSegment(segments, "details");
-            } else if (currentNavPath.get("members")?.value) {
-                pushRightPanelSegment(segments, "members");
+            // Add right-panel segments from previous path
+            const previousSegments = currentNavPath.segments;
+            const i = previousSegments.findIndex(s => s.type === "right-panel");
+            if (i !== -1) {
+                segments.push(...previousSegments.slice(i));
             }
         } else if (type === "last-session") {
             let sessionSegment = currentNavPath.get("session");
@@ -147,6 +148,10 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
             }
         } else if (type === "details" || type === "members") {
             pushRightPanelSegment(segments, type);
+        } else if (type === "member") {
+            const userId = iterator.next().value;
+            if (!userId) { break; }
+            pushRightPanelSegment(segments, type, userId);
         } else {
             // might be undefined, which will be turned into true by Segment 
             const value = iterator.next().value;

src/domain/session/rightpanel/MemberDetailsViewModel.js

@@ -0,0 +1,82 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+
+export class MemberDetailsViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._observableMember = options.observableMember;
+        this._mediaRepository = options.mediaRepository;
+        this._member = this._observableMember.get();
+        this._isEncrypted = options.isEncrypted;
+        this._powerLevelsObservable = options.powerLevelsObservable;
+        this.track(this._powerLevelsObservable.subscribe(() => this._onPowerLevelsChange()));
+        this.track(this._observableMember.subscribe( () => this._onMemberChange()));
+    }
+
+    get name() { return this._member.name; }
+    get userId() { return this._member.userId; }
+
+    get type() { return "member-details"; }
+    get shouldShowBackButton() { return true; }
+    get previousSegmentName() { return "members"; }
+
+    get role() {
+        if (this.powerLevel >= 100) { return this.i18n`Admin`; }
+        else if (this.powerLevel >= 50) { return this.i18n`Moderator`; }
+        else if (this.powerLevel === 0) { return this.i18n`Default`; }
+        else { return this.i18n`Custom (${this.powerLevel})`; }
+    }
+
+    _onMemberChange() {
+        this._member = this._observableMember.get();
+        this.emitChange("member");
+    }
+
+    _onPowerLevelsChange() {
+        this.emitChange("role");
+    }
+
+    get avatarLetter() {
+        return avatarInitials(this.name);
+    }
+
+    get avatarColorNumber() {
+        return getIdentifierColorNumber(this.userId)
+    }
+
+    avatarUrl(size) {
+        return getAvatarHttpUrl(this._member.avatarUrl, size, this.platform, this._mediaRepository);
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
+
+    get isEncrypted() {
+        return this._isEncrypted;
+    }
+
+    get powerLevel() {
+        return this._powerLevelsObservable.get()?.getUserLevel(this._member.userId);
+    }
+
+    get linkToUser() {
+        return `https://matrix.to/#/${this._member.userId}`;
+    }
+}

src/domain/session/rightpanel/MemberListViewModel.js

@@ -7,7 +7,6 @@ export class MemberListViewModel extends ViewModel {
     constructor(options) {
         super(options);
         const list = options.members;
-        this.track(() => list.release());
 
         const powerLevelsObservable = options.powerLevelsObservable;
         this.track(powerLevelsObservable.subscribe(() => { /*resort based on new power levels here*/ }));

src/domain/session/rightpanel/MemberTileViewModel.js

@@ -30,6 +30,10 @@ export class MemberTileViewModel extends ViewModel {
         return this._nameChanged;
     }
 
+    get detailsUrl() {
+        return `${this.urlCreator.urlUntilSegment("room")}/member/${this._member.userId}`;
+    }
+
     _updatePreviousName(newName) {
         const currentName = this._member.name;
         if (currentName !== newName) {

src/domain/session/rightpanel/RightPanelViewModel.js

@@ -1,42 +1,70 @@
 import {ViewModel} from "../../ViewModel.js";
 import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js";
 import {MemberListViewModel} from "./MemberListViewModel.js";
+import {MemberDetailsViewModel} from "./MemberDetailsViewModel.js";
 
 export class RightPanelViewModel extends ViewModel {
     constructor(options) {
         super(options);
         this._room = options.room;
+        this._members = null;
         this._setupNavigation();
     }
 
     get activeViewModel() { return this._activeViewModel; }
 
-    async _getMemberArguments() {
-        const members = await this._room.loadMemberList();
+    async _getMemberListArguments() {
+        if (!this._members) {
+            this._members = await this._room.loadMemberList();
+            this.track(() => this._members.release());
+        }
         const room = this._room;
         const powerLevelsObservable = await this._room.observePowerLevels();
-        return {members, powerLevelsObservable, mediaRepository: room.mediaRepository};
+        return {members: this._members, powerLevelsObservable, mediaRepository: room.mediaRepository};
+    }
+
+    async _getMemberDetailsArguments() {
+        const segment = this.navigation.path.get("member"); 
+        const userId = segment.value;
+        const observableMember = await this._room.observeMember(userId);
+        if (!observableMember) {
+            return false;
+        }
+        const isEncrypted = this._room.isEncrypted;
+        const powerLevelsObservable = await this._room.observePowerLevels();
+        return {observableMember, isEncrypted, powerLevelsObservable, mediaRepository: this._room.mediaRepository};
     }
 
     _setupNavigation() {
         this._hookUpdaterToSegment("details", RoomDetailsViewModel, () => { return {room: this._room}; });
-        this._hookUpdaterToSegment("members", MemberListViewModel, () => this._getMemberArguments());
+        this._hookUpdaterToSegment("members", MemberListViewModel, () => this._getMemberListArguments());
+        this._hookUpdaterToSegment("member", MemberDetailsViewModel, () => this._getMemberDetailsArguments(),
+            () => {
+                // If we fail to create the member details panel, fallback to memberlist
+                const url = `${this.urlCreator.urlUntilSegment("room")}/members`;
+                this.urlCreator.pushUrl(url);
+            }
+        );
     }
 
-    _hookUpdaterToSegment(segment, viewmodel, argCreator) {
+    _hookUpdaterToSegment(segment, viewmodel, argCreator, failCallback) {
         const observable = this.navigation.observe(segment);
-        const updater = this._setupUpdater(segment, viewmodel, argCreator);
-        this.track(observable.subscribe(() => updater()));
+        const updater = this._setupUpdater(segment, viewmodel, argCreator, failCallback);
+        this.track(observable.subscribe(updater));
     }
 
-    _setupUpdater(segment, viewmodel, argCreator) {
+    _setupUpdater(segment, viewmodel, argCreator, failCallback) {
         const updater = async (skipDispose = false) => {
             if (!skipDispose) {
                 this._activeViewModel = this.disposeTracked(this._activeViewModel);
             }
             const enable = !!this.navigation.path.get(segment)?.value;
             if (enable) {
                 const args = await argCreator();
+                if (!args && failCallback) {
+                    failCallback();
+                    return;
+                }
                 this._activeViewModel = this.track(new viewmodel(this.childOptions(args)));
             }
             this.emitChange("activeViewModel");

src/matrix/net/HomeServerApi.js

@@ -130,6 +130,10 @@ export class HomeServerApi {
             {}, {}, options);
     }
 
+    state(roomId, eventType, stateKey, options = null) {
+        return this._get(`/rooms/${encodeURIComponent(roomId)}/state/${encodeURIComponent(eventType)}/${encodeURIComponent(stateKey)}`, {}, null, options);
+    }
+
     passwordLogin(username, password, initialDeviceDisplayName, options = null) {
         return this._unauthedRequest("POST", this._url("/login"), null, {
           "type": "m.login.password",

src/matrix/room/BaseRoom.js

@@ -21,7 +21,7 @@ import {RelationWriter} from "./timeline/persistence/RelationWriter.js";
 import {Timeline} from "./timeline/Timeline.js";
 import {FragmentIdComparer} from "./timeline/FragmentIdComparer.js";
 import {WrappedError} from "../error.js"
-import {fetchOrLoadMembers} from "./members/load.js";
+import {fetchOrLoadMembers, fetchOrLoadMember} from "./members/load.js";
 import {MemberList} from "./members/MemberList.js";
 import {Heroes} from "./members/Heroes.js";
 import {EventEntry} from "./timeline/entries/EventEntry.js";
@@ -54,6 +54,7 @@ export class BaseRoom extends EventEmitter {
         this._observedEvents = null;
         this._powerLevels = null;
         this._powerLevelLoading = null;
+        this._observedMembers = null;
     }
 
     async _eventIdsToEntries(eventIds, txn) {
@@ -214,6 +215,32 @@ export class BaseRoom extends EventEmitter {
         }
     }
 
+    async observeMember(userId) {
+        if (!this._observedMembers) {
+            this._observedMembers = new Map();
+        }
+        const mapMember = this._observedMembers.get(userId);
+        if (mapMember) {
+            // Hit, we're already observing this member
+            return mapMember;
+        }
+        // Miss, load from storage/hs and set in map
+        const member = await fetchOrLoadMember({
+            summary: this._summary,
+            roomId: this._roomId,
+            userId,
+            storage: this._storage,
+            hsApi: this._hsApi
+        }, this._platform.logger);
+        if (!member) {
+            return null;
+        }
+        const observableMember = new RetainedObservableValue(member, () => this._observedMembers.delete(userId));
+        this._observedMembers.set(userId, observableMember);
+        return observableMember;
+    }
+
+
     /** @public */
     async loadMemberList(log = null) {
         if (this._memberList) {

src/matrix/room/Room.js

@@ -209,6 +209,9 @@ export class Room extends BaseRoom {
             if (this._memberList) {
                 this._memberList.afterSync(memberChanges);
             }
+            if (this._observedMembers) {
+                this._updateObservedMembers(memberChanges);
+            }
             if (this._timeline) {
                 for (const [userId, memberChange] of memberChanges.entries()) {
                     if (userId === this._user.id) {
@@ -250,6 +253,15 @@ export class Room extends BaseRoom {
         }
     }
 
+    _updateObservedMembers(memberChanges) {
+        for (const [userId, memberChange] of memberChanges) {
+            const observableMember = this._observedMembers.get(userId);
+            if (observableMember) {
+                observableMember.set(memberChange.member);
+            }
+        }
+    }
+
     needsAfterSyncCompleted({shouldFlushKeyShares}) {
         return shouldFlushKeyShares;
     }

src/matrix/room/members/load.js

@@ -90,3 +90,49 @@ export async function fetchOrLoadMembers(options, logger) {
         return loadMembers(options);
     }
 }
+
+export async function fetchOrLoadMember(options, logger) {
+    const member = await loadMember(options);
+    const {summary} = options;
+    if (!summary.data.hasFetchedMembers && !member) {
+        // We haven't fetched the memberlist yet; so ping the hs to see if this member does exist
+        return logger.wrapOrRun(options.log, "fetchMember", log => fetchMember(options, log));
+    }
+    return member;
+}
+
+async function loadMember({roomId, userId, storage}) {
+    const txn = await storage.readTxn([storage.storeNames.roomMembers,]);
+    const member = await txn.roomMembers.get(roomId, userId);
+    return member? new RoomMember(member) : null;
+}
+
+async function fetchMember({roomId, userId, hsApi, storage}, log) {
+    let memberData;
+    try {
+        memberData = await hsApi.state(roomId, "m.room.member", userId, { log }).response();
+    }
+    catch (error) {
+        if (error.name === "HomeServerError" && error.errcode === "M_NOT_FOUND") {
+            return null;
+        }
+        throw error;
+    }
+    const member = new RoomMember({
+        roomId,
+        userId,
+        membership: memberData.membership,
+        avatarUrl: memberData.avatar_url,
+        displayName: memberData.displayname,
+    });
+    const txn = await storage.readWriteTxn([storage.storeNames.roomMembers]);
+    try {
+        txn.roomMembers.set(member.serialize());
+    }
+    catch(e) {
+        txn.abort();
+        throw e;
+    }
+    await txn.complete();
+    return member;
+}

src/platform/web/ui/css/right-panel.css

@@ -6,7 +6,7 @@
     flex-direction: column;
 }
 
-.RoomDetailsView {
+.RoomDetailsView, .MemberDetailsView {
     flex-direction: column;
     flex: 1;
 }
@@ -15,11 +15,11 @@
     display: flex;
 }
 
-.RoomDetailsView_name h2 {
+.RoomDetailsView_name h2, .MemberDetailsView_name h2 {
     text-align: center;
 }
 
-.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .EncryptionIconView {
+.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .MemberDetailsView, .EncryptionIconView {
     display: flex;
     align-items: center;
 }
@@ -45,7 +45,7 @@
     visibility: hidden;
 }
 
-.MemberTileView {
+.MemberTileView a {
     display: flex;
     align-items: center;
 }