Add memberlist right-panel to Hydrogen

src/domain/navigation/index.js

@@ -37,7 +37,9 @@ function allowsChild(parent, child) {
             // downside of the approach: both of these will control which tile is selected
             return type === "room" || type === "empty-grid-tile";
         case "room":
-            return type === "lightbox" || type === "details";
+            return type === "lightbox" || type === "right-panel";
+        case "right-panel":
+            return type === "details"|| type === "members";
         default:
             return false;
     }
@@ -85,6 +87,23 @@ function roomsSegmentWithRoom(rooms, roomId, path) {
     }
 }
 
+function pushRightPanelSegment(array, segment) {
+    array.push(new Segment("right-panel"));
+    array.push(new Segment(segment));
+}
+
+export function addPanelIfNeeded(navigation, path) {
+    const segments = navigation.path.segments;
+    const i = segments.findIndex(segment => segment.type === "right-panel");
+    let _path = path;
+    if (i !== -1) {
+        _path = path.until("room");
+        _path = _path.with(segments[i]);
+        _path = _path.with(segments[i + 1]);
+    }
+    return _path;
+}
+
 export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
     // substr(1) to take of initial /
     const parts = urlPath.substr(1).split("/");
@@ -114,7 +133,9 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
             }
             segments.push(new Segment("room", roomId));
             if (currentNavPath.get("details")?.value) {
-                segments.push(new Segment("details"));
+                pushRightPanelSegment(segments, "details");
+            } else if (currentNavPath.get("members")?.value) {
+                pushRightPanelSegment(segments, "members");
             }
         } else if (type === "last-session") {
             let sessionSegment = currentNavPath.get("session");
@@ -124,6 +145,8 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
             if (sessionSegment) {
                 segments.push(sessionSegment);
             }
+        } else if (type === "details" || type === "members") {
+            pushRightPanelSegment(segments, type);
         } else {
             // might be undefined, which will be turned into true by Segment 
             const value = iterator.next().value;
@@ -152,6 +175,9 @@ export function stringifyPath(path) {
                     urlPath += `/${segment.type}/${segment.value}`;
                 }
                 break;
+            case "right-panel":
+                // Ignore right-panel in url
+                continue;
             default:
                 urlPath += `/${segment.type}`;
                 if (segment.value && segment.value !== true) {
@@ -185,6 +211,18 @@ export function tests() {
             const urlPath = stringifyPath(path);
             assert.equal(urlPath, "/session/1/rooms/a,b,c/1");
         },
+        "stringify url with right-panel and details segment": assert => {
+            const nav = new Navigation(allowsChild);
+            const path = nav.pathFrom([
+                new Segment("session", 1),
+                new Segment("rooms", ["a", "b", "c"]),
+                new Segment("room", "b"),
+                new Segment("right-panel"),
+                new Segment("details")
+            ]);
+            const urlPath = stringifyPath(path);
+            assert.equal(urlPath, "/session/1/rooms/a,b,c/1/details");
+        },
         "parse grid url path with focused empty tile": assert => {
             const segments = parseUrlPath("/session/1/rooms/a,b,c/3");
             assert.equal(segments.length, 3);
@@ -263,18 +301,21 @@ export function tests() {
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
                 new Segment("room", "b"),
+                new Segment("right-panel", true),
                 new Segment("details", true)
             ]);
             const segments = parseUrlPath("/session/1/open-room/a", path);
-            assert.equal(segments.length, 4);
+            assert.equal(segments.length, 5);
             assert.equal(segments[0].type, "session");
             assert.equal(segments[0].value, "1");
             assert.equal(segments[1].type, "rooms");
             assert.deepEqual(segments[1].value, ["a", "b", "c"]);
             assert.equal(segments[2].type, "room");
             assert.equal(segments[2].value, "a");
-            assert.equal(segments[3].type, "details");
+            assert.equal(segments[3].type, "right-panel");
             assert.equal(segments[3].value, true);
+            assert.equal(segments[4].type, "details");
+            assert.equal(segments[4].value, true);
         },
         "parse open-room action setting a room in an empty tile": assert => {
             const nav = new Navigation(allowsChild);

src/domain/session/RoomGridViewModel.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import {ViewModel} from "../ViewModel.js";
+import {addPanelIfNeeded} from "../navigation/index.js";
 
 function dedupeSparse(roomIds) {
     return roomIds.map((id, idx) => {
@@ -79,12 +80,9 @@ export class RoomGridViewModel extends ViewModel {
     }
 
     _switchToRoom(roomId) {
-        const detailsShown = !!this.navigation.path.get("details")?.value;
         let path = this.navigation.path.until("rooms");
         path = path.with(this.navigation.segment("room", roomId));
-        if (detailsShown) {
-            path = path.with(this.navigation.segment("details", true));
-        }
+        path = addPanelIfNeeded(this.navigation, path);
         this.navigation.applyPath(path);
     }
 

src/domain/session/SessionViewModel.js

@@ -17,7 +17,6 @@ limitations under the License.
 
 import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
 import {RoomViewModel} from "./room/RoomViewModel.js";
-import {RoomDetailsViewModel} from "./rightpanel/RoomDetailsViewModel.js";
 import {UnknownRoomViewModel} from "./room/UnknownRoomViewModel.js";
 import {InviteViewModel} from "./room/InviteViewModel.js";
 import {LightboxViewModel} from "./room/LightboxViewModel.js";
@@ -26,6 +25,7 @@ import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {SettingsViewModel} from "./settings/SettingsViewModel.js";
 import {ViewModel} from "../ViewModel.js";
 import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
+import {RightPanelViewModel} from "./rightpanel/RightPanelViewModel.js";
 
 export class SessionViewModel extends ViewModel {
     constructor(options) {
@@ -63,7 +63,7 @@ export class SessionViewModel extends ViewModel {
             if (!this._gridViewModel) {
                 this._updateRoom(roomId);
             }
-            this._updateRoomDetails();
+            this._updateRightPanel();
         }));
         if (!this._gridViewModel) {
             this._updateRoom(currentRoomId.get());
@@ -81,9 +81,10 @@ export class SessionViewModel extends ViewModel {
         }));
         this._updateLightbox(lightbox.get());
 
-        const details = this.navigation.observe("details");
-        this.track(details.subscribe(() => this._updateRoomDetails()));
-        this._updateRoomDetails();
+
+        const rightpanel = this.navigation.observe("right-panel");
+        this.track(rightpanel.subscribe(() => this._updateRightPanel()));
+        this._updateRightPanel();
     }
 
     get id() {
@@ -118,8 +119,9 @@ export class SessionViewModel extends ViewModel {
         return this._roomViewModelObservable?.get();
     }
 
-    get roomDetailsViewModel() {
-        return this._roomDetailsViewModel;
+
+    get rightPanelViewModel() {
+        return this._rightPanelViewModel;
     }
 
     _updateGrid(roomIds) {
@@ -256,15 +258,14 @@ export class SessionViewModel extends ViewModel {
         return room;
     }
 
-    _updateRoomDetails() {
-        this._roomDetailsViewModel = this.disposeTracked(this._roomDetailsViewModel);
-        const enable = !!this.navigation.path.get("details")?.value;
+    _updateRightPanel() {
+        this._rightPanelViewModel = this.disposeTracked(this._rightPanelViewModel);
+        const enable = !!this.navigation.path.get("right-panel")?.value;
         if (enable) {
             const room = this._roomFromNavigation();
-            if (!room) { return; }
-            this._roomDetailsViewModel = this.track(new RoomDetailsViewModel(this.childOptions({room})));
+            this._rightPanelViewModel = this.track(new RightPanelViewModel(this.childOptions({room})));
         }
-        this.emitChange("roomDetailsViewModel");
+        this.emitChange("rightPanelViewModel");
     }
 
 }

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -20,6 +20,7 @@ import {RoomTileViewModel} from "./RoomTileViewModel.js";
 import {InviteTileViewModel} from "./InviteTileViewModel.js";
 import {RoomFilter} from "./RoomFilter.js";
 import {ApplyMap} from "../../../observable/map/ApplyMap.js";
+import {addPanelIfNeeded} from "../../navigation/index.js";
 
 export class LeftPanelViewModel extends ViewModel {
     constructor(options) {
@@ -92,24 +93,19 @@ export class LeftPanelViewModel extends ViewModel {
         }
     }
 
-    _pathForDetails(path) {
-        const details = this.navigation.path.get("details");
-        return details?.value ? path.with(details) : path;
-    }
-
     toggleGrid() {
         const room = this.navigation.path.get("room");
         let path = this.navigation.path.until("session");
         if (this.gridEnabled) {
             if (room) {
                 path = path.with(room);
-                path = this._pathForDetails(path);
+                path = addPanelIfNeeded(this.navigation, path);
             }
         } else {
             if (room) {
                 path = path.with(this.navigation.segment("rooms", [room.value]));
                 path = path.with(room);
-                path = this._pathForDetails(path);
+                path = addPanelIfNeeded(this.navigation, path);
             } else {
                 path = path.with(this.navigation.segment("rooms", []));
                 path = path.with(this.navigation.segment("empty-grid-tile", 0));

src/domain/session/rightpanel/MemberListViewModel.js

@@ -0,0 +1,42 @@
+import {ViewModel} from "../../ViewModel.js";
+import {MemberTileViewModel} from "./MemberTileViewModel.js";
+import {createMemberComparator} from "./members/comparator.js";
+import {Disambiguator} from "./members/disambiguator.js";
+
+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*/ }));
+
+        const powerLevels = powerLevelsObservable.get();
+        this.memberTileViewModels = this._mapTileViewModels(list.members.filterValues(member => member.membership === "join"))
+                                        .sortValues(createMemberComparator(powerLevels));
+        this.nameDisambiguator = new Disambiguator();
+        this.mediaRepository = options.mediaRepository;
+    }
+
+    get type() { return "member-list"; }
+
+    get shouldShowBackButton() { return true; }
+
+    get previousSegmentName() { return "details"; }
+
+    _mapTileViewModels(members) {
+        const mapper = (member, emitChange) => {
+            const mediaRepository = this.mediaRepository;
+            const vm = new MemberTileViewModel(this.childOptions({member, emitChange, mediaRepository}));
+            this.nameDisambiguator.disambiguate(vm);
+            return vm;
+        }
+        const updater = (vm, params, newMember) => {
+            vm.updateFrom(newMember);
+            this.nameDisambiguator.disambiguate(vm);
+        };
+        return members.mapValues(mapper, updater);
+    }
+
+}

src/domain/session/rightpanel/MemberTileViewModel.js

@@ -0,0 +1,68 @@
+import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+
+export class MemberTileViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._member = this._options.member;
+        this._mediaRepository = options.mediaRepository
+        this._previousName = null;
+        this._nameChanged = true;
+    }
+
+    get name() {
+        return `${this._member.name}${this._disambiguationPart}`;
+    }
+
+    get _disambiguationPart() {
+        return this._disambiguate ? ` (${this.userId})` : "";
+    }
+
+    get userId() {
+        return this._member.userId;
+    }
+
+    get previousName() {
+        return this._previousName;
+    }
+
+    get nameChanged() {
+        return this._nameChanged;
+    }
+
+    _updatePreviousName(newName) {
+        const currentName = this._member.name;
+        if (currentName !== newName) {
+            this._previousName = currentName;
+            this._nameChanged = true;
+        } else {
+            this._nameChanged = false;
+        }
+    }
+
+    setDisambiguation(status) {
+        this._disambiguate = status;
+        this.emitChange();
+    }
+
+    updateFrom(newMember) {
+        this._updatePreviousName(newMember.name);
+        this._member = newMember;
+    }
+
+    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;
+    }
+}