Experimental Module API Additions (#30863)
* Module API experiments * Move ResizerNotifier into SDKContext so we don't have to pass it into RoomView * Add the MultiRoomViewStore * Make RoomViewStore able to take a roomId prop * Different interface to add space panel items A bit less flexible but probably simpler and will help keep things actually consistent rather than just allowing modules to stick any JSX into the space panel (which means they also have to worry about styling if they *do* want it to be consistent). * Allow space panel items to be updated and manage which one is selected, allowing module "spaces" to be considered spaces * Remove fetchRoomFn from SpaceNotificationStore which didn't really seem to have any point as it was only called from one place * Switch to using module api via .instance * Fairly awful workaround to actually break the dependency nightmare * Add test for multiroomviewstore * add test * Make room names deterministic So the tests don't fail if you add other tests or run them individually * Add test for builtinsapi * Update module api * RVS is not needed as prop anymore Since it's passed through context * Add roomId to prop * Remove RoomViewStore from state This is now accessed through class field * Fix test * No need to pass RVS from LoggedInView * Add RoomContextType * Implement new builtins api * Add tests * Fix import * Fix circular dependency issue * Fix import * Add more tests * Improve comment * room-id is optional * Update license * Add implementation for AccountDataApi * Add implementation for Room * Add implementation for ClientApi * Create ClientApi in Api.ts * Write tests * Use nullish coalescing assignment * Implement openRoom in NavigationApi * Write tests * Add implementation for StoresApi * Write tests * Fix circular dependency * Add comments in lieu of type and fix else block * Change to class field --------- Co-authored-by: R Midhun Suresh <hi@midhun.dev>
This commit is contained in:
David Baker
GitHub
@@ -68,7 +68,8 @@ import { monitorSyncedPushRules } from "../../utils/pushRules/monitorSyncedPushR
|
||||
import { type ConfigOptions } from "../../SdkConfig";
|
||||
import { MatrixClientContextProvider } from "./MatrixClientContextProvider";
|
||||
import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
|
||||
import { SDKContext, SdkContextClass } from "../../contexts/SDKContext.ts";
|
||||
import { ModuleApi } from "../../modules/Api.ts";
|
||||
import { SDKContext } from "../../contexts/SDKContext.ts";
|
||||
|
||||
// We need to fetch each pinned message individually (if we don't already have it)
|
||||
// so each pinned message may trigger a request. Limit the number per room for sanity.
|
||||
@@ -679,6 +680,10 @@ class LoggedInView extends React.Component<IProps, IState> {
|
||||
public render(): React.ReactNode {
|
||||
let pageElement;
|
||||
|
||||
const moduleRenderer = this.props.page_type
|
||||
? ModuleApi.instance.navigation.locationRenderers.get(this.props.page_type)
|
||||
: undefined;
|
||||
|
||||
switch (this.props.page_type) {
|
||||
case PageTypes.RoomView:
|
||||
pageElement = (
|
||||
@@ -690,7 +695,6 @@ class LoggedInView extends React.Component<IProps, IState> {
|
||||
key={this.props.currentRoomId || "roomview"}
|
||||
justCreatedOpts={this.props.roomJustCreatedOpts}
|
||||
forceTimeline={this.props.forceTimeline}
|
||||
roomViewStore={SdkContextClass.instance.roomViewStore}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -706,6 +710,13 @@ class LoggedInView extends React.Component<IProps, IState> {
|
||||
);
|
||||
}
|
||||
break;
|
||||
default: {
|
||||
if (moduleRenderer) {
|
||||
pageElement = moduleRenderer();
|
||||
} else {
|
||||
console.warn(`Couldn't render page type "${this.props.page_type}"`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const wrapperClasses = classNames({
|
||||
@@ -747,20 +758,22 @@ class LoggedInView extends React.Component<IProps, IState> {
|
||||
)}
|
||||
<SpacePanel />
|
||||
{!useNewRoomList && <BackdropPanel backgroundImage={this.state.backgroundImage} />}
|
||||
<div
|
||||
className="mx_LeftPanel_wrapper--user"
|
||||
ref={this._resizeContainer}
|
||||
data-collapsed={shouldUseMinimizedUI ? true : undefined}
|
||||
>
|
||||
<LeftPanel
|
||||
pageType={this.props.page_type as PageTypes}
|
||||
isMinimized={shouldUseMinimizedUI || false}
|
||||
resizeNotifier={this.context.resizeNotifier}
|
||||
/>
|
||||
</div>
|
||||
{!moduleRenderer && (
|
||||
<div
|
||||
className="mx_LeftPanel_wrapper--user"
|
||||
ref={this._resizeContainer}
|
||||
data-collapsed={shouldUseMinimizedUI ? true : undefined}
|
||||
>
|
||||
<LeftPanel
|
||||
pageType={this.props.page_type as PageTypes}
|
||||
isMinimized={shouldUseMinimizedUI || false}
|
||||
resizeNotifier={this.context.resizeNotifier}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
|
||||
{!moduleRenderer && <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />}
|
||||
<div className="mx_RoomView_wrapper">{pageElement}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -140,6 +140,7 @@ import { ShareFormat, type SharePayload } from "../../dispatcher/payloads/ShareP
|
||||
import Markdown from "../../Markdown";
|
||||
import { sanitizeHtmlParams } from "../../Linkify";
|
||||
import { isOnlyAdmin } from "../../utils/membership";
|
||||
import { ModuleApi } from "../../modules/Api.ts";
|
||||
|
||||
// legacy export
|
||||
export { default as Views } from "../../Views";
|
||||
@@ -175,9 +176,11 @@ interface IProps {
|
||||
interface IState {
|
||||
// the master view we are showing.
|
||||
view: Views;
|
||||
// What the LoggedInView would be showing if visible
|
||||
// What the LoggedInView would be showing if visible.
|
||||
// A member of the enum for standard pages or a string for those provided by
|
||||
// a module.
|
||||
// eslint-disable-next-line camelcase
|
||||
page_type?: PageType;
|
||||
page_type?: PageType | string;
|
||||
// The ID of the room we're viewing. This is either populated directly
|
||||
// in the case where we view a room by ID or by RoomView when it resolves
|
||||
// what ID an alias points at.
|
||||
@@ -1921,8 +1924,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
||||
userId: userId,
|
||||
subAction: params?.action,
|
||||
});
|
||||
} else {
|
||||
logger.info(`Ignoring showScreen for '${screen}'`);
|
||||
} else if (ModuleApi.instance.navigation.locationRenderers.get(screen)) {
|
||||
this.setState({ page_type: screen });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -44,6 +44,7 @@ import { type CallState, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
||||
import { debounce, throttle } from "lodash";
|
||||
import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
|
||||
import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
|
||||
import { type RoomViewProps } from "@element-hq/element-web-module-api";
|
||||
|
||||
import shouldHideEvent from "../../shouldHideEvent";
|
||||
import { _t } from "../../languageHandler";
|
||||
@@ -148,7 +149,7 @@ if (DEBUG) {
|
||||
debuglog = logger.log.bind(console);
|
||||
}
|
||||
|
||||
interface IRoomProps {
|
||||
interface IRoomProps extends RoomViewProps {
|
||||
threepidInvite?: IThreepidInvite;
|
||||
oobData?: IOOBData;
|
||||
|
||||
@@ -158,19 +159,17 @@ interface IRoomProps {
|
||||
|
||||
// Called with the credentials of a registered user (if they were a ROU that transitioned to PWLU)
|
||||
onRegistered?(credentials: IMatrixClientCreds): void;
|
||||
|
||||
/**
|
||||
* The RoomViewStore instance for the room to be displayed.
|
||||
* Only necessary if RoomView should get it's RoomViewStore through the MultiRoomViewStore.
|
||||
* Omitting this will mean that RoomView renders for the room held in SDKContext.RoomViewStore.
|
||||
*/
|
||||
roomViewStore: RoomViewStore;
|
||||
roomId?: string;
|
||||
}
|
||||
|
||||
export { MainSplitContentType };
|
||||
|
||||
export interface IRoomState {
|
||||
/**
|
||||
* The RoomViewStore instance for the room we are displaying
|
||||
*/
|
||||
roomViewStore: RoomViewStore;
|
||||
room?: Room;
|
||||
roomId?: string;
|
||||
roomAlias?: string;
|
||||
@@ -389,6 +388,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
private messagePanel: TimelinePanel | null = null;
|
||||
private roomViewBody = createRef<HTMLDivElement>();
|
||||
|
||||
private roomViewStore: RoomViewStore;
|
||||
|
||||
public static contextType = SDKContext;
|
||||
declare public context: React.ContextType<typeof SDKContext>;
|
||||
|
||||
@@ -401,9 +402,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
throw new Error("Unable to create RoomView without MatrixClient");
|
||||
}
|
||||
|
||||
if (props.roomId) {
|
||||
this.roomViewStore = this.context.multiRoomViewStore.getRoomViewStoreForRoom(props.roomId);
|
||||
} else {
|
||||
this.roomViewStore = context.roomViewStore;
|
||||
}
|
||||
|
||||
const llMembers = context.client.hasLazyLoadMembersEnabled();
|
||||
this.state = {
|
||||
roomViewStore: props.roomViewStore,
|
||||
roomId: undefined,
|
||||
roomLoading: true,
|
||||
peekLoading: false,
|
||||
@@ -535,7 +541,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
};
|
||||
|
||||
private getMainSplitContentType = (room: Room): MainSplitContentType => {
|
||||
if (this.state.roomViewStore.isViewingCall() || isVideoRoom(room)) {
|
||||
if (this.roomViewStore.isViewingCall() || isVideoRoom(room)) {
|
||||
return MainSplitContentType.Call;
|
||||
}
|
||||
if (this.context.widgetLayoutStore.hasMaximisedWidget(room)) {
|
||||
@@ -549,8 +555,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
return;
|
||||
}
|
||||
|
||||
const roomLoadError = this.state.roomViewStore.getRoomLoadError() ?? undefined;
|
||||
if (!initial && !roomLoadError && this.state.roomId !== this.state.roomViewStore.getRoomId()) {
|
||||
const roomLoadError = this.roomViewStore.getRoomLoadError() ?? undefined;
|
||||
if (!initial && !roomLoadError && this.state.roomId !== this.roomViewStore.getRoomId()) {
|
||||
// RoomView explicitly does not support changing what room
|
||||
// is being viewed: instead it should just be re-mounted when
|
||||
// switching rooms. Therefore, if the room ID changes, we
|
||||
@@ -564,7 +570,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
// it was, it means we're about to be unmounted.
|
||||
return;
|
||||
}
|
||||
const roomViewStore = this.state.roomViewStore;
|
||||
const roomViewStore = this.roomViewStore;
|
||||
const roomId = roomViewStore.getRoomId() ?? null;
|
||||
const roomAlias = roomViewStore.getRoomAlias() ?? undefined;
|
||||
const roomLoading = roomViewStore.isRoomLoading();
|
||||
@@ -611,7 +617,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
newState.showRightPanel = false;
|
||||
}
|
||||
|
||||
const initialEventId = this.state.roomViewStore.getInitialEventId() ?? this.state.initialEventId;
|
||||
const initialEventId = this.roomViewStore.getInitialEventId() ?? this.state.initialEventId;
|
||||
if (initialEventId) {
|
||||
let initialEvent = room?.findEventById(initialEventId);
|
||||
// The event does not exist in the current sync data
|
||||
@@ -637,13 +643,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
action: Action.ShowThread,
|
||||
rootEvent: thread.rootEvent,
|
||||
initialEvent,
|
||||
highlighted: this.state.roomViewStore.isInitialEventHighlighted(),
|
||||
scroll_into_view: this.state.roomViewStore.initialEventScrollIntoView(),
|
||||
highlighted: this.roomViewStore.isInitialEventHighlighted(),
|
||||
scroll_into_view: this.roomViewStore.initialEventScrollIntoView(),
|
||||
});
|
||||
} else {
|
||||
newState.initialEventId = initialEventId;
|
||||
newState.isInitialEventHighlighted = this.state.roomViewStore.isInitialEventHighlighted();
|
||||
newState.initialEventScrollIntoView = this.state.roomViewStore.initialEventScrollIntoView();
|
||||
newState.isInitialEventHighlighted = this.roomViewStore.isInitialEventHighlighted();
|
||||
newState.initialEventScrollIntoView = this.roomViewStore.initialEventScrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -903,7 +909,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
this.context.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
|
||||
}
|
||||
// Start listening for RoomViewStore updates
|
||||
this.state.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
|
||||
this.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
|
||||
|
||||
this.context.rightPanelStore.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
|
||||
|
||||
@@ -1020,7 +1026,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
|
||||
window.removeEventListener("beforeunload", this.onPageUnload);
|
||||
|
||||
this.state.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
|
||||
this.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
|
||||
|
||||
this.context.rightPanelStore.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
|
||||
WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
|
||||
@@ -1048,6 +1054,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
// clean up if this was a local room
|
||||
this.context.client?.store.removeRoom(this.state.room.roomId);
|
||||
}
|
||||
|
||||
if (this.props.roomId) this.context.multiRoomViewStore.removeRoomViewStore(this.props.roomId);
|
||||
}
|
||||
|
||||
private onRightPanelStoreUpdate = (): void => {
|
||||
@@ -2070,7 +2078,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
if (!this.state.room || !this.context?.client) return null;
|
||||
const names = this.state.room.getDefaultRoomName(this.context.client.getSafeUserId());
|
||||
return (
|
||||
<ScopedRoomContextProvider {...this.state}>
|
||||
<ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
|
||||
<LocalRoomCreateLoader
|
||||
localRoom={localRoom}
|
||||
names={names}
|
||||
@@ -2082,7 +2090,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
|
||||
private renderLocalRoomView(localRoom: LocalRoom): ReactNode {
|
||||
return (
|
||||
<ScopedRoomContextProvider {...this.state}>
|
||||
<ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
|
||||
<LocalRoomView
|
||||
e2eStatus={this.state.e2eStatus}
|
||||
localRoom={localRoom}
|
||||
@@ -2098,7 +2106,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
|
||||
private renderWaitingForThirdPartyRoomView(inviteEvent: MatrixEvent): ReactNode {
|
||||
return (
|
||||
<ScopedRoomContextProvider {...this.state}>
|
||||
<ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
|
||||
<WaitingForThirdPartyRoomView
|
||||
resizeNotifier={this.context.resizeNotifier}
|
||||
roomView={this.roomView}
|
||||
@@ -2640,7 +2648,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
||||
}
|
||||
|
||||
return (
|
||||
<ScopedRoomContextProvider {...this.state}>
|
||||
<ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
|
||||
<div className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
|
||||
{showChatEffects && this.roomView.current && (
|
||||
<EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
|
||||
|
||||
Reference in New Issue
Block a user