diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js index 6ce63ffd..b315e187 100644 --- a/src/domain/navigation/index.js +++ b/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) { @@ -147,6 +147,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; diff --git a/src/domain/session/rightpanel/RightPanelViewModel.js b/src/domain/session/rightpanel/RightPanelViewModel.js index c56080a8..87809eb8 100644 --- a/src/domain/session/rightpanel/RightPanelViewModel.js +++ b/src/domain/session/rightpanel/RightPanelViewModel.js @@ -1,6 +1,7 @@ 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) { @@ -11,16 +12,24 @@ export class RightPanelViewModel extends ViewModel { get activeViewModel() { return this._activeViewModel; } - async _getMemberArguments() { + async _getMemberListArguments() { const members = await this._room.loadMemberList(); const room = this._room; const powerLevelsObservable = await this._room.observePowerLevels(); return {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); + return {observableMember, 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()); } _hookUpdaterToSegment(segment, viewmodel, argCreator) { diff --git a/src/platform/web/ui/session/rightpanel/RightPanelView.js b/src/platform/web/ui/session/rightpanel/RightPanelView.js index f812d6aa..69b81f49 100644 --- a/src/platform/web/ui/session/rightpanel/RightPanelView.js +++ b/src/platform/web/ui/session/rightpanel/RightPanelView.js @@ -2,12 +2,14 @@ import {TemplateView} from "../../general/TemplateView.js"; import {RoomDetailsView} from "./RoomDetailsView.js"; import {MemberListView} from "./MemberListView.js"; import {LoadingView} from "../../general/LoadingView.js"; +import {MemberDetailsView} from "./MemberDetailsView.js"; export class RightPanelView extends TemplateView { render(t) { const viewFromType = { "room-details": RoomDetailsView, - "member-list": MemberListView + "member-list": MemberListView, + "member-details": MemberDetailsView }; return t.div({ className: "RightPanelView" }, [