nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fix widgets getting stuck in loading states (#31314)

Browse Source 
* Refer to ClientWidgetApi as "widget API" rather than "messaging"

* Rename StopGapWidgetDriver to ElementWidgetDriver

* Rename StopGapWidget to WidgetMessaging

* Fix WidgetMessaging's lifetime by storing it in WidgetMessagingStore

(Rather than storing just the raw ClientWidgetApi objects.)

* Unfail test

* use an error

* cleanup start

* Add docs

* Prettier

* link to store

* remove a let

* More logging, split up loop

* Add a test demonstrating a regression in Call.start

* Restore Call.start to a single, robust event loop

* Fix test failure by resetting the messaging store

* Expand on the WidgetMessaging doc comment

* Add additional tests to buff up coverage

* Add a test for the sticker picker opening the IM.

* reduce copy paste

---------

Co-authored-by: Half-Shot <will@half-shot.uk>
Co-authored-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Robin
2025-12-05 04:19:06 -05:00
committed by GitHub
parent f4e74c8dd2
commit 71895a3891
26 changed files with 1242 additions and 806 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
playwright/e2e/voip/element-call.spec.ts
View File

@@ -544,34 +544,37 @@ test.describe("Element Call", () => {
}); });
// For https://github.com/element-hq/element-web/issues/30838 // For https://github.com/element-hq/element-web/issues/30838
test.fail( test("should be able to join a call, leave via PiP, and rejoin the call", async ({
"should be able to join a call, leave via PiP, and rejoin the call", page,
async ({ page, user, room, app, bot }) => { user,
await app.viewRoomById(room.roomId); room,
await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible(); app,
await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50); bot,
}) => {
await app.viewRoomById(room.roomId);
await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
await sendRTCState(bot, room.roomId); await sendRTCState(bot, room.roomId);
await openAndJoinCall(page, true); await openAndJoinCall(page, true);
await app.viewRoomByName("OtherRoom"); await app.viewRoomByName("OtherRoom");
const pipContainer = page.locator(".mx_WidgetPip"); const pipContainer = page.locator(".mx_WidgetPip");
// We should have a PiP container here. // We should have a PiP container here.
await expect(pipContainer).toBeVisible(); await expect(pipContainer).toBeVisible();
// Leave the call. // Leave the call.
const overlay = page.locator(".mx_WidgetPip_overlay"); const overlay = page.locator(".mx_WidgetPip_overlay");
await overlay.hover({ timeout: 2000 }); // Show the call footer. await overlay.hover({ timeout: 2000 }); // Show the call footer.
await overlay.getByRole("button", { name: "Leave", exact: true }).click(); await overlay.getByRole("button", { name: "Leave", exact: true }).click();
// PiP container goes. // PiP container goes.
await expect(pipContainer).not.toBeVisible(); await expect(pipContainer).not.toBeVisible();
// Rejoin the call // Rejoin the call
await app.viewRoomById(room.roomId); await app.viewRoomById(room.roomId);
await openAndJoinCall(page, true); await openAndJoinCall(page, true);
}, });
);
}); });
}); });

4
src/LegacyCallHandler.tsx
View File

@@ -1055,9 +1055,9 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
const jitsiWidgets = roomInfo.widgets.filter((w) => WidgetType.JITSI.matches(w.type)); const jitsiWidgets = roomInfo.widgets.filter((w) => WidgetType.JITSI.matches(w.type));
jitsiWidgets.forEach((w) => { jitsiWidgets.forEach((w) => {
const messaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(w)); const messaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(w));
if (!messaging) return; // more "should never happen" words if (!messaging?.widgetApi) return; // more "should never happen" words
messaging.transport.send(ElementWidgetActions.HangupCall, {}); messaging.widgetApi.transport.send(ElementWidgetActions.HangupCall, {});
}); });
} }

4
src/Livestream.ts
View File

@@ -41,12 +41,12 @@ async function createLiveStream(matrixClient: MatrixClient, roomId: string): Pro
export async function startJitsiAudioLivestream( export async function startJitsiAudioLivestream(
matrixClient: MatrixClient, matrixClient: MatrixClient,
widgetMessaging: ClientWidgetApi, widgetApi: ClientWidgetApi,
roomId: string, roomId: string,
): Promise<void> { ): Promise<void> {
const streamId = await createLiveStream(matrixClient, roomId); const streamId = await createLiveStream(matrixClient, roomId);
await widgetMessaging.transport.send(ElementWidgetActions.StartLiveStream, { await widgetApi.transport.send(ElementWidgetActions.StartLiveStream, {
rtmpStreamKey: AUDIOSTREAM_DUMMY_URL + streamId, rtmpStreamKey: AUDIOSTREAM_DUMMY_URL + streamId,
}); });
} }

12
src/components/views/context_menus/WidgetContextMenu.tsx
View File

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React, { type JSX, type ComponentProps, useContext } from "react"; import React, { type JSX, type ComponentProps, useContext } from "react";
import { type ClientWidgetApi, type IWidget, MatrixCapabilities } from "matrix-widget-api"; import { type IWidget, MatrixCapabilities } from "matrix-widget-api";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { type ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; import { type ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix"; import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
@@ -28,7 +28,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream"; import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
import { ModuleRunner } from "../../../modules/ModuleRunner"; import { ModuleRunner } from "../../../modules/ModuleRunner";
import { ElementWidget } from "../../../stores/widgets/StopGapWidget"; import { ElementWidget, type WidgetMessaging } from "../../../stores/widgets/WidgetMessaging";
import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx"; import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
interface IProps extends Omit<ComponentProps<typeof IconizedContextMenu>, "children"> { interface IProps extends Omit<ComponentProps<typeof IconizedContextMenu>, "children"> {
@@ -69,10 +69,10 @@ const showDeleteButton = (canModify: boolean, onDeleteClick: undefined | (() =>
return !!onDeleteClick || canModify; return !!onDeleteClick || canModify;
}; };
const showSnapshotButton = (widgetMessaging: ClientWidgetApi | undefined): boolean => { const showSnapshotButton = (widgetMessaging: WidgetMessaging | undefined): boolean => {
return ( return (
SettingsStore.getValue("enableWidgetScreenshots") && SettingsStore.getValue("enableWidgetScreenshots") &&
!!widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots) !!widgetMessaging?.widgetApi?.hasCapability(MatrixCapabilities.Screenshots)
); );
}; };
@@ -123,7 +123,7 @@ export const WidgetContextMenu: React.FC<IProps> = ({
if (roomId && showStreamAudioStreamButton(app)) { if (roomId && showStreamAudioStreamButton(app)) {
const onStreamAudioClick = async (): Promise<void> => { const onStreamAudioClick = async (): Promise<void> => {
try { try {
await startJitsiAudioLivestream(cli, widgetMessaging!, roomId); await startJitsiAudioLivestream(cli, widgetMessaging!.widgetApi!, roomId);
} catch (err) { } catch (err) {
logger.error("Failed to start livestream", err); logger.error("Failed to start livestream", err);
// XXX: won't i18n well, but looks like widget api only support 'message'? // XXX: won't i18n well, but looks like widget api only support 'message'?
@@ -161,7 +161,7 @@ export const WidgetContextMenu: React.FC<IProps> = ({
let snapshotButton: JSX.Element | undefined; let snapshotButton: JSX.Element | undefined;
if (showSnapshotButton(widgetMessaging)) { if (showSnapshotButton(widgetMessaging)) {
const onSnapshotClick = (): void => { const onSnapshotClick = (): void => {
widgetMessaging widgetMessaging?.widgetApi
?.takeScreenshot() ?.takeScreenshot()
.then((data) => { .then((data) => {
dis.dispatch({ dis.dispatch({

6
src/components/views/dialogs/ModalWidgetDialog.tsx
View File

@@ -27,11 +27,11 @@ import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import BaseDialog from "./BaseDialog"; import BaseDialog from "./BaseDialog";
import { _t, getUserLanguage } from "../../../languageHandler"; import { _t, getUserLanguage } from "../../../languageHandler";
import AccessibleButton, { type AccessibleButtonKind } from "../elements/AccessibleButton"; import AccessibleButton, { type AccessibleButtonKind } from "../elements/AccessibleButton";
import { StopGapWidgetDriver } from "../../../stores/widgets/StopGapWidgetDriver"; import { ElementWidgetDriver } from "../../../stores/widgets/ElementWidgetDriver";
import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import { arrayFastClone } from "../../../utils/arrays"; import { arrayFastClone } from "../../../utils/arrays";
import { ElementWidget } from "../../../stores/widgets/StopGapWidget"; import { ElementWidget } from "../../../stores/widgets/WidgetMessaging";
import { ELEMENT_CLIENT_ID } from "../../../identifiers"; import { ELEMENT_CLIENT_ID } from "../../../identifiers";
import ThemeWatcher, { ThemeWatcherEvent } from "../../../settings/watchers/ThemeWatcher"; import ThemeWatcher, { ThemeWatcherEvent } from "../../../settings/watchers/ThemeWatcher";
@@ -72,7 +72,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
} }
public componentDidMount(): void { public componentDidMount(): void {
const driver = new StopGapWidgetDriver([], this.widget, WidgetKind.Modal, false); const driver = new ElementWidgetDriver(this.widget, WidgetKind.Modal, false);
const messaging = new ClientWidgetApi(this.widget, this.appFrame.current!, driver); const messaging = new ClientWidgetApi(this.widget, this.appFrame.current!, driver);
this.setState({ messaging }); this.setState({ messaging });
} }

170
src/components/views/elements/AppTile.tsx
View File

@@ -18,7 +18,7 @@ import React, {
type ReactNode, type ReactNode,
} from "react"; } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { type IWidget, MatrixCapabilities } from "matrix-widget-api"; import { type IWidget, MatrixCapabilities, type ClientWidgetApi } from "matrix-widget-api";
import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
@@ -42,7 +42,7 @@ import SettingsStore from "../../../settings/SettingsStore";
import { aboveLeftOf, ContextMenuButton } from "../../structures/ContextMenu"; import { aboveLeftOf, ContextMenuButton } from "../../structures/ContextMenu";
import PersistedElement, { getPersistKey } from "./PersistedElement"; import PersistedElement, { getPersistKey } from "./PersistedElement";
import { WidgetType } from "../../../widgets/WidgetType"; import { WidgetType } from "../../../widgets/WidgetType";
import { ElementWidget, StopGapWidget } from "../../../stores/widgets/StopGapWidget"; import { ElementWidget, WidgetMessaging, WidgetMessagingEvent } from "../../../stores/widgets/WidgetMessaging";
import { showContextMenu, WidgetContextMenu } from "../context_menus/WidgetContextMenu"; import { showContextMenu, WidgetContextMenu } from "../context_menus/WidgetContextMenu";
import WidgetAvatar from "../avatars/WidgetAvatar"; import WidgetAvatar from "../avatars/WidgetAvatar";
import LegacyCallHandler from "../../../LegacyCallHandler"; import LegacyCallHandler from "../../../LegacyCallHandler";
@@ -151,11 +151,12 @@ export default class AppTile extends React.Component<IProps, IState> {
showLayoutButtons: true, showLayoutButtons: true,
}; };
private readonly widget: ElementWidget;
private contextMenuButton = createRef<any>(); private contextMenuButton = createRef<any>();
private iframeParent: HTMLElement | null = null; // parent div of the iframe private iframeParent: HTMLElement | null = null; // parent div of the iframe
private allowedWidgetsWatchRef?: string; private allowedWidgetsWatchRef?: string;
private persistKey: string; private persistKey: string;
private sgWidget?: StopGapWidget; private messaging?: WidgetMessaging;
private dispatcherRef?: string; private dispatcherRef?: string;
private unmounted = false; private unmounted = false;
@@ -164,11 +165,16 @@ export default class AppTile extends React.Component<IProps, IState> {
// The key used for PersistedElement // The key used for PersistedElement
this.persistKey = getPersistKey(WidgetUtils.getWidgetUid(this.props.app)); this.persistKey = getPersistKey(WidgetUtils.getWidgetUid(this.props.app));
try {
this.sgWidget = new StopGapWidget(this.props); this.widget = new ElementWidget(props.app);
} catch (e) { this.messaging = WidgetMessagingStore.instance.getMessaging(this.widget, props.room?.roomId);
logger.log("Failed to construct widget", e); if (this.messaging === undefined) {
this.sgWidget = undefined; try {
this.messaging = new WidgetMessaging(this.widget, props);
WidgetMessagingStore.instance.storeMessaging(this.widget, props.room?.roomId, this.messaging);
} catch (e) {
logger.error("Failed to construct widget", e);
}
} }
this.state = this.getNewState(props); this.state = this.getNewState(props);
@@ -235,11 +241,11 @@ export default class AppTile extends React.Component<IProps, IState> {
private determineInitialRequiresClientState(): boolean { private determineInitialRequiresClientState(): boolean {
try { try {
const mockWidget = new ElementWidget(this.props.app); const widget = new ElementWidget(this.props.app);
const widgetApi = WidgetMessagingStore.instance.getMessaging(mockWidget, this.props.room?.roomId); const messaging = WidgetMessagingStore.instance.getMessaging(widget, this.props.room?.roomId);
if (widgetApi) { if (messaging?.widgetApi) {
// Load value from existing API to prevent resetting the requiresClient value on layout changes. // Load value from existing API to prevent resetting the requiresClient value on layout changes.
return widgetApi.hasCapability(ElementWidgetCapabilities.RequiresClient); return messaging.widgetApi.hasCapability(ElementWidgetCapabilities.RequiresClient);
} }
} catch { } catch {
// fallback to true // fallback to true
@@ -291,7 +297,7 @@ export default class AppTile extends React.Component<IProps, IState> {
isAppWidget(this.props.app) ? this.props.app.roomId : null, isAppWidget(this.props.app) ? this.props.app.roomId : null,
); );
PersistedElement.destroyElement(this.persistKey); PersistedElement.destroyElement(this.persistKey);
this.sgWidget?.stopMessaging(); this.messaging?.stop();
} }
this.setState({ hasPermissionToLoad }); this.setState({ hasPermissionToLoad });
@@ -325,12 +331,12 @@ export default class AppTile extends React.Component<IProps, IState> {
); );
} }
if (this.sgWidget) { if (this.messaging) {
this.setupSgListeners(); this.setupMessagingListeners();
} }
// Only fetch IM token on mount if we're showing and have permission to load // Only fetch IM token on mount if we're showing and have permission to load
if (this.sgWidget && this.state.hasPermissionToLoad) { if (this.messaging && this.state.hasPermissionToLoad) {
this.startWidget(); this.startWidget();
} }
this.watchUserReady(); this.watchUserReady();
@@ -376,73 +382,56 @@ export default class AppTile extends React.Component<IProps, IState> {
OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady); OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady);
} }
private setupSgListeners(): void { private setupMessagingListeners(): void {
this.sgWidget?.on("ready", this.onWidgetReady); this.messaging?.on(WidgetMessagingEvent.Start, this.onMessagingStart);
this.sgWidget?.on("error:preparing", this.updateRequiresClient); this.messaging?.on(WidgetMessagingEvent.Stop, this.onMessagingStop);
// emits when the capabilities have been set up or changed
this.sgWidget?.on("capabilitiesNotified", this.updateRequiresClient);
} }
private stopSgListeners(): void { private stopMessagingListeners(): void {
if (!this.sgWidget) return; this.messaging?.off(WidgetMessagingEvent.Start, this.onMessagingStart);
this.sgWidget?.off("ready", this.onWidgetReady); this.messaging?.off(WidgetMessagingEvent.Stop, this.onMessagingStop);
this.sgWidget.off("error:preparing", this.updateRequiresClient);
this.sgWidget.off("capabilitiesNotified", this.updateRequiresClient);
} }
private readonly onMessagingStart = (widgetApi: ClientWidgetApi): void => {
widgetApi.on("ready", this.onWidgetReady);
widgetApi.on("error:preparing", this.updateRequiresClient);
// emits when the capabilities have been set up or changed
widgetApi.on("capabilitiesNotified", this.updateRequiresClient);
};
private readonly onMessagingStop = (widgetApi: ClientWidgetApi): void => {
widgetApi.off("ready", this.onWidgetReady);
widgetApi.off("error:preparing", this.updateRequiresClient);
widgetApi.off("capabilitiesNotified", this.updateRequiresClient);
};
private resetWidget(newProps: IProps): void { private resetWidget(newProps: IProps): void {
this.sgWidget?.stopMessaging(); this.messaging?.stop();
this.stopSgListeners(); this.stopMessagingListeners();
try { try {
this.sgWidget = new StopGapWidget(newProps); WidgetMessagingStore.instance.stopMessaging(this.widget, this.props.room?.roomId);
this.setupSgListeners(); this.messaging = new WidgetMessaging(this.widget, newProps);
WidgetMessagingStore.instance.storeMessaging(this.widget, this.props.room?.roomId, this.messaging);
this.setupMessagingListeners();
this.startWidget(); this.startWidget();
} catch (e) { } catch (e) {
logger.error("Failed to construct widget", e); logger.error("Failed to construct widget", e);
this.sgWidget = undefined; this.messaging = undefined;
} }
} }
private startWidget(): void { private startWidget(): void {
this.sgWidget?.prepare().then(() => { this.messaging?.prepare().then(() => {
if (this.unmounted) return; if (this.unmounted) return;
this.setState({ initialising: false }); this.setState({ initialising: false });
}); });
} }
/** /**
* Creates the widget iframe and opens communication with the widget. * A callback ref receiving the current parent div of the iframe. This is
*/ * responsible for creating the iframe and starting or resetting
private startMessaging(): void { * communication with the widget.
// We create the iframe ourselves rather than leaving the job to React,
// because we need the lifetime of the messaging and the iframe to be
// the same; we don't want strict mode, for instance, to cause the
// messaging to restart (lose its state) without also killing the widget
const iframe = document.createElement("iframe");
iframe.title = WidgetUtils.getWidgetName(this.props.app);
iframe.allow = iframeFeatures;
iframe.src = this.sgWidget!.embedUrl;
iframe.allowFullscreen = true;
iframe.sandbox = sandboxFlags;
this.iframeParent!.appendChild(iframe);
// In order to start the widget messaging we need iframe.contentWindow
// to exist. Waiting until the next layout gives the browser a chance to
// initialize it.
requestAnimationFrame(() => {
// Handle the race condition (seen in strict mode) where the element
// is added and then removed before we enter this callback
if (iframe.parentElement === null) return;
try {
this.sgWidget?.startMessaging(iframe);
} catch (e) {
logger.error("Failed to start widget", e);
}
});
}
/**
* Callback ref for the parent div of the iframe.
*/ */
private iframeParentRef = (element: HTMLElement | null): void => { private iframeParentRef = (element: HTMLElement | null): void => {
if (this.unmounted) return; if (this.unmounted) return;
@@ -451,10 +440,43 @@ export default class AppTile extends React.Component<IProps, IState> {
this.iframeParent?.querySelector("iframe")?.remove(); this.iframeParent?.querySelector("iframe")?.remove();
this.iframeParent = element; this.iframeParent = element;
if (element && this.sgWidget) { if (this.iframeParent === null) {
this.startMessaging(); // The component is trying to unmount the iframe. We could reach
} else { // this path if the widget definition was updated, for example. The
// iframe parent will later be remounted and widget communications
// reopened after this.state.initializing resets to false.
this.resetWidget(this.props); this.resetWidget(this.props);
} else if (
this.messaging &&
// Check whether an iframe already exists (it totally could exist,
// seeing as it is a persisted element which might have hopped
// between React components)
this.iframeParent.querySelector("iframe") === null
) {
// We create the iframe ourselves rather than leaving the job to React,
// because we need the lifetime of the messaging and the iframe to be
// the same; we don't want strict mode, for instance, to cause the
// messaging to restart (lose its state) without also killing the widget
const iframe = document.createElement("iframe");
iframe.title = WidgetUtils.getWidgetName(this.props.app);
iframe.allow = iframeFeatures;
iframe.src = this.messaging.embedUrl;
iframe.allowFullscreen = true;
iframe.sandbox = sandboxFlags;
this.iframeParent.appendChild(iframe);
// In order to start the widget messaging we need iframe.contentWindow
// to exist. Waiting until the next layout gives the browser a chance to
// initialize it.
requestAnimationFrame(() => {
// Handle the race condition (seen in strict mode) where the element is
// added and then removed from the DOM before we enter this callback
if (iframe.parentElement === null) return;
try {
this.messaging?.start(iframe);
} catch (e) {
logger.error("Failed to start widget", e);
}
});
} }
}; };
@@ -484,7 +506,7 @@ export default class AppTile extends React.Component<IProps, IState> {
isAppWidget(this.props.app) ? this.props.app.roomId : null, isAppWidget(this.props.app) ? this.props.app.roomId : null,
); );
this.sgWidget?.stopMessaging({ forceDestroy: true }); this.messaging?.stop({ forceDestroy: true });
} }
private onWidgetReady = (): void => { private onWidgetReady = (): void => {
@@ -493,7 +515,7 @@ export default class AppTile extends React.Component<IProps, IState> {
private updateRequiresClient = (): void => { private updateRequiresClient = (): void => {
this.setState({ this.setState({
requiresClient: !!this.sgWidget?.widgetApi?.hasCapability(ElementWidgetCapabilities.RequiresClient), requiresClient: !!this.messaging?.widgetApi?.hasCapability(ElementWidgetCapabilities.RequiresClient),
}); });
}; };
@@ -502,7 +524,7 @@ export default class AppTile extends React.Component<IProps, IState> {
case "m.sticker": case "m.sticker":
if ( if (
payload.widgetId === this.props.app.id && payload.widgetId === this.props.app.id &&
this.sgWidget?.widgetApi?.hasCapability(MatrixCapabilities.StickerSending) this.messaging?.widgetApi?.hasCapability(MatrixCapabilities.StickerSending)
) { ) {
dis.dispatch({ dis.dispatch({
action: "post_sticker_message", action: "post_sticker_message",
@@ -602,7 +624,7 @@ export default class AppTile extends React.Component<IProps, IState> {
// window.open(this._getPopoutUrl(), '_blank', 'noopener=yes'); // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
Object.assign(document.createElement("a"), { Object.assign(document.createElement("a"), {
target: "_blank", target: "_blank",
href: this.sgWidget?.popoutUrl, href: this.messaging?.popoutUrl,
rel: "noreferrer noopener", rel: "noreferrer noopener",
}).click(); }).click();
}; };
@@ -665,13 +687,13 @@ export default class AppTile extends React.Component<IProps, IState> {
</div> </div>
); );
if (this.sgWidget === null) { if (this.messaging === null) {
appTileBody = ( appTileBody = (
<div className={appTileBodyClass} style={appTileBodyStyles}> <div className={appTileBodyClass} style={appTileBodyStyles}>
<AppWarning errorMsg={_t("widget|error_loading")} /> <AppWarning errorMsg={_t("widget|error_loading")} />
</div> </div>
); );
} else if (!this.state.hasPermissionToLoad && this.props.room && this.sgWidget) { } else if (!this.state.hasPermissionToLoad && this.props.room && this.messaging) {
// only possible for room widgets, can assert this.props.room here // only possible for room widgets, can assert this.props.room here
const isEncrypted = this.context.isRoomEncrypted(this.props.room.roomId); const isEncrypted = this.context.isRoomEncrypted(this.props.room.roomId);
appTileBody = ( appTileBody = (
@@ -679,7 +701,7 @@ export default class AppTile extends React.Component<IProps, IState> {
<AppPermission <AppPermission
roomId={this.props.room.roomId} roomId={this.props.room.roomId}
creatorUserId={this.props.creatorUserId} creatorUserId={this.props.creatorUserId}
url={this.sgWidget.embedUrl} url={this.messaging.embedUrl}
isRoomEncrypted={isEncrypted} isRoomEncrypted={isEncrypted}
onPermissionGranted={this.grantWidgetPermission} onPermissionGranted={this.grantWidgetPermission}
/> />
@@ -698,7 +720,7 @@ export default class AppTile extends React.Component<IProps, IState> {
<AppWarning errorMsg={_t("widget|error_mixed_content")} /> <AppWarning errorMsg={_t("widget|error_mixed_content")} />
</div> </div>
); );
} else if (this.sgWidget) { } else if (this.messaging) {
appTileBody = ( appTileBody = (
<> <>
<div className={appTileBodyClass} style={appTileBodyStyles} ref={this.iframeParentRef}> <div className={appTileBodyClass} style={appTileBodyStyles} ref={this.iframeParentRef}>

2
src/components/views/pips/WidgetPip.tsx
View File

@@ -89,7 +89,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
// Assumed to be a Jitsi widget // Assumed to be a Jitsi widget
WidgetMessagingStore.instance WidgetMessagingStore.instance
.getMessagingForUid(WidgetUtils.getWidgetUid(widget)) .getMessagingForUid(WidgetUtils.getWidgetUid(widget))
?.transport.send(ElementWidgetActions.HangupCall, {}) ?.widgetApi?.transport.send(ElementWidgetActions.HangupCall, {})
.catch((e) => console.error("Failed to leave Jitsi", e)); .catch((e) => console.error("Failed to leave Jitsi", e));
} }
}, },

4
src/components/views/rooms/Stickerpicker.tsx
View File

@@ -224,8 +224,8 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
const messaging = WidgetMessagingStore.instance.getMessagingForUid( const messaging = WidgetMessagingStore.instance.getMessagingForUid(
WidgetUtils.calcWidgetUid(this.state.stickerpickerWidget.id), WidgetUtils.calcWidgetUid(this.state.stickerpickerWidget.id),
); );
if (messaging && visible !== this.prevSentVisibility) { if (messaging?.widgetApi && visible !== this.prevSentVisibility) {
messaging.updateVisibility(visible).catch((err) => { messaging.widgetApi.updateVisibility(visible).catch((err) => {
logger.error("Error updating widget visibility: ", err); logger.error("Error updating widget visibility: ", err);
}); });
this.prevSentVisibility = visible; this.prevSentVisibility = visible;

148
src/models/Call.ts
View File

@@ -16,7 +16,7 @@ import {
type RoomMember, type RoomMember,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { KnownMembership, type Membership } from "matrix-js-sdk/src/types"; import { KnownMembership, type Membership } from "matrix-js-sdk/src/types";
import { logger } from "matrix-js-sdk/src/logger"; import { logger as rootLogger } from "matrix-js-sdk/src/logger";
import { secureRandomString } from "matrix-js-sdk/src/randomstring"; import { secureRandomString } from "matrix-js-sdk/src/randomstring";
import { CallType } from "matrix-js-sdk/src/webrtc/call"; import { CallType } from "matrix-js-sdk/src/webrtc/call";
import { type IWidgetApiRequest, type ClientWidgetApi, type IWidgetData } from "matrix-widget-api"; import { type IWidgetApiRequest, type ClientWidgetApi, type IWidgetData } from "matrix-widget-api";
@@ -43,8 +43,10 @@ import { FontWatcher } from "../settings/watchers/FontWatcher";
import { type JitsiCallMemberContent, JitsiCallMemberEventType } from "../call-types"; import { type JitsiCallMemberContent, JitsiCallMemberEventType } from "../call-types";
import SdkConfig from "../SdkConfig.ts"; import SdkConfig from "../SdkConfig.ts";
import DMRoomMap from "../utils/DMRoomMap.ts"; import DMRoomMap from "../utils/DMRoomMap.ts";
import { type WidgetMessaging, WidgetMessagingEvent } from "../stores/widgets/WidgetMessaging.ts";
const TIMEOUT_MS = 16000; const TIMEOUT_MS = 16000;
const logger = rootLogger.getChild("models/Call");
// Waits until an event is emitted satisfying the given predicate // Waits until an event is emitted satisfying the given predicate
const waitForEvent = async ( const waitForEvent = async (
@@ -122,15 +124,15 @@ export abstract class Call extends TypedEventEmitter<CallEvent, CallEventHandler
*/ */
public abstract readonly STUCK_DEVICE_TIMEOUT_MS: number; public abstract readonly STUCK_DEVICE_TIMEOUT_MS: number;
private _messaging: ClientWidgetApi | null = null; private _widgetApi: ClientWidgetApi | null = null;
/** /**
* The widget's messaging, or null if disconnected. * The widget API interface to the widget, or null if disconnected.
*/ */
protected get messaging(): ClientWidgetApi | null { protected get widgetApi(): ClientWidgetApi | null {
return this._messaging; return this._widgetApi;
} }
private set messaging(value: ClientWidgetApi | null) { private set widgetApi(value: ClientWidgetApi | null) {
this._messaging = value; this._widgetApi = value;
} }
public get roomId(): string { public get roomId(): string {
@@ -212,28 +214,58 @@ export abstract class Call extends TypedEventEmitter<CallEvent, CallEventHandler
* Starts the communication between the widget and the call. * Starts the communication between the widget and the call.
* The widget associated with the call must be active for this to succeed. * The widget associated with the call must be active for this to succeed.
* Only call this if the call state is: ConnectionState.Disconnected. * Only call this if the call state is: ConnectionState.Disconnected.
* @param _params Widget generation parameters are unused in this abstract class.
* @returns The ClientWidgetApi for this call.
*/ */
public async start(_params?: WidgetGenerationParameters): Promise<void> { public async start(_params?: WidgetGenerationParameters): Promise<ClientWidgetApi> {
const messagingStore = WidgetMessagingStore.instance; const messagingStore = WidgetMessagingStore.instance;
this.messaging = messagingStore.getMessagingForUid(this.widgetUid) ?? null; const startTime = performance.now();
if (!this.messaging) { let messaging: WidgetMessaging | undefined = messagingStore.getMessagingForUid(this.widgetUid);
// The widget might still be initializing, so wait for it. // The widget might still be initializing, so wait for it in an async
// event loop. We need the messaging to be both present and started
// (have a connected widget API), so register listeners for both cases.
while (!messaging?.widgetApi) {
if (messaging) logger.debug(`Messaging present but not yet started for ${this.widgetUid}`);
else logger.debug(`No messaging yet for ${this.widgetUid}`);
const recheck = Promise.withResolvers<void>();
const currentMessaging = messaging;
// Maybe the messaging is present but not yet started. In this case,
// check again for a widget API as soon as it starts.
const onStart = (): void => recheck.resolve();
currentMessaging?.on(WidgetMessagingEvent.Start, onStart);
// Maybe the messaging is not present at all. It's also entirely
// possible (as shown in React strict mode) that the messaging could
// be abandoned and replaced by an entirely new messaging object
// while we were waiting for the original one to start. We need to
// react to store updates in either case.
const onStoreMessaging = (uid: string, m: WidgetMessaging): void => {
if (uid === this.widgetUid) {
messagingStore.off(WidgetMessagingStoreEvent.StoreMessaging, onStoreMessaging);
messaging = m; // Check the new messaging object on the next iteration of the loop
recheck.resolve();
}
};
messagingStore.on(WidgetMessagingStoreEvent.StoreMessaging, onStoreMessaging);
// Race both of the above recheck signals against a timeout.
const timeout = setTimeout(
() => recheck.reject(new Error(`Widget for call in ${this.roomId} not started; timed out`)),
TIMEOUT_MS - (performance.now() - startTime),
);
try { try {
await waitForEvent( await recheck.promise;
messagingStore, } finally {
WidgetMessagingStoreEvent.StoreMessaging, currentMessaging?.off(WidgetMessagingEvent.Start, onStart);
(uid: string, widgetApi: ClientWidgetApi) => { messagingStore.off(WidgetMessagingStoreEvent.StoreMessaging, onStoreMessaging);
if (uid === this.widgetUid) { clearTimeout(timeout);
this.messaging = widgetApi;
return true;
}
return false;
},
);
} catch (e) {
throw new Error(`Failed to bind call widget in room ${this.roomId}: ${e}`);
} }
} }
logger.debug(`Widget ${this.widgetUid} now ready`);
return (this.widgetApi = messaging.widgetApi);
} }
protected setConnected(): void { protected setConnected(): void {
@@ -267,7 +299,7 @@ export abstract class Call extends TypedEventEmitter<CallEvent, CallEventHandler
* Stops further communication with the widget and tells the UI to close. * Stops further communication with the widget and tells the UI to close.
*/ */
protected close(): void { protected close(): void {
this.messaging = null; this.widgetApi = null;
this.emit(CallEvent.Close); this.emit(CallEvent.Close);
} }
@@ -289,7 +321,7 @@ export abstract class Call extends TypedEventEmitter<CallEvent, CallEventHandler
private readonly onStopMessaging = (uid: string): void => { private readonly onStopMessaging = (uid: string): void => {
if (uid === this.widgetUid && this.connected) { if (uid === this.widgetUid && this.connected) {
logger.log("The widget died; treating this as a user hangup"); logger.debug("The widget died; treating this as a user hangup");
this.setDisconnected(); this.setDisconnected();
this.close(); this.close();
} }
@@ -448,25 +480,26 @@ export class JitsiCall extends Call {
}); });
} }
public async start(): Promise<void> { public async start(): Promise<ClientWidgetApi> {
await super.start(); const widgetApi = await super.start();
this.messaging!.on(`action:${ElementWidgetActions.JoinCall}`, this.onJoin); widgetApi.on(`action:${ElementWidgetActions.JoinCall}`, this.onJoin);
this.messaging!.on(`action:${ElementWidgetActions.HangupCall}`, this.onHangup); widgetApi.on(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Dock, this.onDock); ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Dock, this.onDock);
ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Undock, this.onUndock); ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Undock, this.onUndock);
return widgetApi;
} }
protected async performDisconnection(): Promise<void> { protected async performDisconnection(): Promise<void> {
const response = waitForEvent( const response = waitForEvent(
this.messaging!, this.widgetApi!,
`action:${ElementWidgetActions.HangupCall}`, `action:${ElementWidgetActions.HangupCall}`,
(ev: CustomEvent<IWidgetApiRequest>) => { (ev: CustomEvent<IWidgetApiRequest>) => {
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
return true; return true;
}, },
); );
const request = this.messaging!.transport.send(ElementWidgetActions.HangupCall, {}); const request = this.widgetApi!.transport.send(ElementWidgetActions.HangupCall, {});
try { try {
await Promise.all([request, response]); await Promise.all([request, response]);
} catch (e) { } catch (e) {
@@ -475,8 +508,8 @@ export class JitsiCall extends Call {
} }
public close(): void { public close(): void {
this.messaging!.off(`action:${ElementWidgetActions.JoinCall}`, this.onJoin); this.widgetApi!.off(`action:${ElementWidgetActions.JoinCall}`, this.onJoin);
this.messaging!.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup); this.widgetApi!.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Dock, this.onDock); ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Dock, this.onDock);
ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Undock, this.onUndock); ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Undock, this.onUndock);
super.close(); super.close();
@@ -508,7 +541,7 @@ export class JitsiCall extends Call {
// Re-add this device every so often so our video member event doesn't become stale // Re-add this device every so often so our video member event doesn't become stale
this.resendDevicesTimer = window.setInterval( this.resendDevicesTimer = window.setInterval(
async (): Promise<void> => { async (): Promise<void> => {
logger.log(`Resending video member event for ${this.roomId}`); logger.debug(`Resending video member event for ${this.roomId}`);
await this.addOurDevice(); await this.addOurDevice();
}, },
(this.STUCK_DEVICE_TIMEOUT_MS * 3) / 4, (this.STUCK_DEVICE_TIMEOUT_MS * 3) / 4,
@@ -527,18 +560,18 @@ export class JitsiCall extends Call {
private readonly onDock = async (): Promise<void> => { private readonly onDock = async (): Promise<void> => {
// The widget is no longer a PiP, so let's restore the default layout // The widget is no longer a PiP, so let's restore the default layout
await this.messaging!.transport.send(ElementWidgetActions.TileLayout, {}); await this.widgetApi!.transport.send(ElementWidgetActions.TileLayout, {});
}; };
private readonly onUndock = async (): Promise<void> => { private readonly onUndock = async (): Promise<void> => {
// The widget has become a PiP, so let's switch Jitsi to spotlight mode // The widget has become a PiP, so let's switch Jitsi to spotlight mode
// to only show the active speaker and economize on space // to only show the active speaker and economize on space
await this.messaging!.transport.send(ElementWidgetActions.SpotlightLayout, {}); await this.widgetApi!.transport.send(ElementWidgetActions.SpotlightLayout, {});
}; };
private readonly onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => { private readonly onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
this.setConnected(); this.setConnected();
}; };
@@ -548,7 +581,7 @@ export class JitsiCall extends Call {
if (this.connectionState === ConnectionState.Disconnecting) return; if (this.connectionState === ConnectionState.Disconnecting) return;
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
this.setDisconnected(); this.setDisconnected();
if (!isVideoRoom(this.room)) this.close(); if (!isVideoRoom(this.room)) this.close();
}; };
@@ -900,7 +933,7 @@ export class ElementCall extends Call {
ElementCall.createOrGetCallWidget(room.roomId, room.client); ElementCall.createOrGetCallWidget(room.roomId, room.client);
} }
public async start(widgetGenerationParameters: WidgetGenerationParameters): Promise<void> { public async start(widgetGenerationParameters: WidgetGenerationParameters): Promise<ClientWidgetApi> {
// Some parameters may only be set once the user has chosen to interact with the call, regenerate the URL // Some parameters may only be set once the user has chosen to interact with the call, regenerate the URL
// at this point in case any of the parameters have changed. // at this point in case any of the parameters have changed.
this.widgetGenerationParameters = { ...this.widgetGenerationParameters, ...widgetGenerationParameters }; this.widgetGenerationParameters = { ...this.widgetGenerationParameters, ...widgetGenerationParameters };
@@ -909,24 +942,25 @@ export class ElementCall extends Call {
this.roomId, this.roomId,
this.widgetGenerationParameters, this.widgetGenerationParameters,
).toString(); ).toString();
await super.start(); const widgetApi = await super.start();
this.messaging!.on(`action:${ElementWidgetActions.JoinCall}`, this.onJoin); widgetApi.on(`action:${ElementWidgetActions.JoinCall}`, this.onJoin);
this.messaging!.on(`action:${ElementWidgetActions.HangupCall}`, this.onHangup); widgetApi.on(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
this.messaging!.on(`action:${ElementWidgetActions.Close}`, this.onClose); widgetApi.on(`action:${ElementWidgetActions.Close}`, this.onClose);
this.messaging!.on(`action:${ElementWidgetActions.DeviceMute}`, this.onDeviceMute); widgetApi.on(`action:${ElementWidgetActions.DeviceMute}`, this.onDeviceMute);
return widgetApi;
} }
protected async performDisconnection(): Promise<void> { protected async performDisconnection(): Promise<void> {
const response = waitForEvent( const response = waitForEvent(
this.messaging!, this.widgetApi!,
`action:${ElementWidgetActions.HangupCall}`, `action:${ElementWidgetActions.HangupCall}`,
(ev: CustomEvent<IWidgetApiRequest>) => { (ev: CustomEvent<IWidgetApiRequest>) => {
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
return true; return true;
}, },
); );
const request = this.messaging!.transport.send(ElementWidgetActions.HangupCall, {}); const request = this.widgetApi!.transport.send(ElementWidgetActions.HangupCall, {});
try { try {
await Promise.all([request, response]); await Promise.all([request, response]);
} catch (e) { } catch (e) {
@@ -935,10 +969,10 @@ export class ElementCall extends Call {
} }
public close(): void { public close(): void {
this.messaging!.off(`action:${ElementWidgetActions.JoinCall}`, this.onJoin); this.widgetApi!.off(`action:${ElementWidgetActions.JoinCall}`, this.onJoin);
this.messaging!.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup); this.widgetApi!.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
this.messaging!.off(`action:${ElementWidgetActions.Close}`, this.onClose); this.widgetApi!.off(`action:${ElementWidgetActions.Close}`, this.onClose);
this.messaging!.off(`action:${ElementWidgetActions.DeviceMute}`, this.onDeviceMute); this.widgetApi!.off(`action:${ElementWidgetActions.DeviceMute}`, this.onDeviceMute);
super.close(); super.close();
} }
@@ -986,12 +1020,12 @@ export class ElementCall extends Call {
private readonly onDeviceMute = (ev: CustomEvent<IWidgetApiRequest>): void => { private readonly onDeviceMute = (ev: CustomEvent<IWidgetApiRequest>): void => {
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
}; };
private readonly onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => { private readonly onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
this.setConnected(); this.setConnected();
}; };
@@ -1001,13 +1035,13 @@ export class ElementCall extends Call {
if (this.connectionState === ConnectionState.Disconnecting) return; if (this.connectionState === ConnectionState.Disconnecting) return;
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
this.setDisconnected(); this.setDisconnected();
}; };
private readonly onClose = async (ev: CustomEvent<IWidgetApiRequest>): Promise<void> => { private readonly onClose = async (ev: CustomEvent<IWidgetApiRequest>): Promise<void> => {
ev.preventDefault(); ev.preventDefault();
this.messaging!.transport.reply(ev.detail, {}); // ack this.widgetApi!.transport.reply(ev.detail, {}); // ack
this.setDisconnected(); // Just in case the widget forgot to emit a hangup action (maybe it's in an error state) this.setDisconnected(); // Just in case the widget forgot to emit a hangup action (maybe it's in an error state)
this.close(); // User is done with the call; tell the UI to close it this.close(); // User is done with the call; tell the UI to close it
}; };

6
src/stores/ModalWidgetStore.ts
View File

@@ -88,11 +88,11 @@ export class ModalWidgetStore extends AsyncStoreWithClient<IState> {
this.modalInstance = null; this.modalInstance = null;
const sourceMessaging = WidgetMessagingStore.instance.getMessaging(sourceWidget, widgetRoomId); const sourceMessaging = WidgetMessagingStore.instance.getMessaging(sourceWidget, widgetRoomId);
if (!sourceMessaging) { if (!sourceMessaging?.widgetApi) {
logger.error("No source widget messaging for modal widget"); logger.error("No source widget API for modal widget");
return; return;
} }
sourceMessaging.notifyModalWidgetClose(data); sourceMessaging.widgetApi.notifyModalWidgetClose(data);
} }
}; };
} }

19
src/stores/widgets/StopGapWidgetDriver.ts → src/stores/widgets/ElementWidgetDriver.ts
View File

@@ -65,8 +65,6 @@ import { ModuleRunner } from "../../modules/ModuleRunner";
import SettingsStore from "../../settings/SettingsStore"; import SettingsStore from "../../settings/SettingsStore";
import { mediaFromMxc } from "../../customisations/Media"; import { mediaFromMxc } from "../../customisations/Media";
// TODO: Purge this from the universe
function getRememberedCapabilitiesForWidget(widget: Widget): Capability[] { function getRememberedCapabilitiesForWidget(widget: Widget): Capability[] {
return JSON.parse(localStorage.getItem(`widget_${widget.id}_approved_caps`) || "[]"); return JSON.parse(localStorage.getItem(`widget_${widget.id}_approved_caps`) || "[]");
} }
@@ -81,12 +79,19 @@ const normalizeTurnServer = ({ urls, username, credential }: IClientTurnServer):
password: credential, password: credential,
}); });
export class StopGapWidgetDriver extends WidgetDriver { /**
* Element Web's implementation of a widget driver (the object that
* matrix-widget-api uses to retrieve information from the client and carry out
* authorized actions on the widget's behalf). Essentially this is a glorified
* set of callbacks.
*/
// TODO: Consider alternative designs for matrix-widget-api?
// Replace with matrix-rust-sdk?
export class ElementWidgetDriver extends WidgetDriver {
private allowedCapabilities: Set<Capability>; private allowedCapabilities: Set<Capability>;
// TODO: Refactor widgetKind into the Widget class // TODO: Refactor widgetKind into the Widget class
public constructor( public constructor(
allowedCapabilities: Capability[],
private forWidget: Widget, private forWidget: Widget,
private forWidgetKind: WidgetKind, private forWidgetKind: WidgetKind,
virtual: boolean, virtual: boolean,
@@ -97,11 +102,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
// Always allow screenshots to be taken because it's a client-induced flow. The widget can't // Always allow screenshots to be taken because it's a client-induced flow. The widget can't
// spew screenshots at us and can't request screenshots of us, so it's up to us to provide the // spew screenshots at us and can't request screenshots of us, so it's up to us to provide the
// button if the widget says it supports screenshots. // button if the widget says it supports screenshots.
this.allowedCapabilities = new Set([ this.allowedCapabilities = new Set([MatrixCapabilities.Screenshots, ElementWidgetCapabilities.RequiresClient]);
...allowedCapabilities,
MatrixCapabilities.Screenshots,
ElementWidgetCapabilities.RequiresClient,
]);
// Grant the permissions that are specific to given widget types // Grant the permissions that are specific to given widget types
if (WidgetType.JITSI.matches(this.forWidget.type) && forWidgetKind === WidgetKind.Room) { if (WidgetType.JITSI.matches(this.forWidget.type) && forWidgetKind === WidgetKind.Room) {

210
src/stores/widgets/StopGapWidget.ts → src/stores/widgets/WidgetMessaging.ts
View File

@@ -14,6 +14,7 @@ import {
ClientEvent, ClientEvent,
RoomStateEvent, RoomStateEvent,
type ReceivedToDeviceMessage, type ReceivedToDeviceMessage,
TypedEventEmitter,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { import {
@@ -34,11 +35,10 @@ import {
WidgetApiFromWidgetAction, WidgetApiFromWidgetAction,
WidgetKind, WidgetKind,
} from "matrix-widget-api"; } from "matrix-widget-api";
import { EventEmitter } from "events";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { _t, getUserLanguage } from "../../languageHandler"; import { _t, getUserLanguage } from "../../languageHandler";
import { StopGapWidgetDriver } from "./StopGapWidgetDriver"; import { ElementWidgetDriver } from "./ElementWidgetDriver";
import { WidgetMessagingStore } from "./WidgetMessagingStore"; import { WidgetMessagingStore } from "./WidgetMessagingStore";
import { MatrixClientPeg } from "../../MatrixClientPeg"; import { MatrixClientPeg } from "../../MatrixClientPeg";
import { OwnProfileStore } from "../OwnProfileStore"; import { OwnProfileStore } from "../OwnProfileStore";
@@ -46,12 +46,11 @@ import WidgetUtils from "../../utils/WidgetUtils";
import { IntegrationManagers } from "../../integrations/IntegrationManagers"; import { IntegrationManagers } from "../../integrations/IntegrationManagers";
import { WidgetType } from "../../widgets/WidgetType"; import { WidgetType } from "../../widgets/WidgetType";
import ActiveWidgetStore from "../ActiveWidgetStore"; import ActiveWidgetStore from "../ActiveWidgetStore";
import { objectShallowClone } from "../../utils/objects";
import defaultDispatcher from "../../dispatcher/dispatcher"; import defaultDispatcher from "../../dispatcher/dispatcher";
import { Action } from "../../dispatcher/actions"; import { Action } from "../../dispatcher/actions";
import { ElementWidgetActions, type IHangupCallApiRequest, type IViewRoomApiRequest } from "./ElementWidgetActions"; import { ElementWidgetActions, type IHangupCallApiRequest, type IViewRoomApiRequest } from "./ElementWidgetActions";
import { ModalWidgetStore } from "../ModalWidgetStore"; import { ModalWidgetStore } from "../ModalWidgetStore";
import { type IApp, isAppWidget } from "../WidgetStore"; import { isAppWidget } from "../WidgetStore";
import ThemeWatcher, { ThemeWatcherEvent } from "../../settings/watchers/ThemeWatcher"; import ThemeWatcher, { ThemeWatcherEvent } from "../../settings/watchers/ThemeWatcher";
import { getCustomTheme } from "../../theme"; import { getCustomTheme } from "../../theme";
import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities"; import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
@@ -64,21 +63,10 @@ import ErrorDialog from "../../components/views/dialogs/ErrorDialog";
import { SdkContextClass } from "../../contexts/SDKContext"; import { SdkContextClass } from "../../contexts/SDKContext";
import { UPDATE_EVENT } from "../AsyncStore"; import { UPDATE_EVENT } from "../AsyncStore";
// TODO: Destroy all of this code // TODO: Purge this code of its overgrown hacks and compatibility shims.
interface IAppTileProps { // TODO: Don't use this. We should avoid overriding/mocking matrix-widget-api
// Note: these are only the props we care about // behavior and instead strive to use widgets in more transparent ways.
app: IApp | IWidget;
room?: Room; // without a room it is a user widget
userId: string;
creatorUserId: string;
waitForIframeLoad: boolean;
whitelistCapabilities?: string[];
userWidget: boolean;
stickyPromise?: () => Promise<void>;
}
// TODO: Don't use this because it's wrong
export class ElementWidget extends Widget { export class ElementWidget extends Widget {
public constructor(private rawDefinition: IWidget) { public constructor(private rawDefinition: IWidget) {
super(rawDefinition); super(rawDefinition);
@@ -152,11 +140,49 @@ export class ElementWidget extends Widget {
} }
} }
export class StopGapWidget extends EventEmitter { export enum WidgetMessagingEvent {
Start = "start",
Stop = "stop",
}
interface WidgetMessagingEventMap {
[WidgetMessagingEvent.Start]: (widgetApi: ClientWidgetApi) => void;
[WidgetMessagingEvent.Stop]: (widgetApi: ClientWidgetApi) => void;
}
interface WidgetMessagingOptions {
app: IWidget;
room?: Room; // without a room it is a user widget
userId: string;
creatorUserId: string;
waitForIframeLoad: boolean;
userWidget: boolean;
/**
* If defined this async method will be called when the widget requests to become sticky.
* It will only become sticky once the returned promise resolves.
* This is useful because: Widget B is sticky. Making widget A sticky will kill widget B immediately.
* This promise allows to do Widget B related cleanup before Widget A becomes sticky. (e.g. hangup a Voip call)
*/
stickyPromise?: () => Promise<void>;
}
/**
* A running instance of a widget, associated with an iframe and an active communication
* channel. Instances must be tracked by WidgetMessagingStore, as only one WidgetMessaging
* instance should exist for a given widget.
*
* This class is responsible for:
* - Computing the templated widget URL
* - Starting a {@link ClientWidgetApi} communication channel with the widget
* - Eagerly pushing events from the Matrix client to the widget
*
* @see {@link ElementWidgetDriver} for the class used to *pull* data lazily from the
* Matrix client to the widget on the widget's behalf.
* @see {@link WidgetMessagingStore} for the store that holds these instances.
*/
export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, WidgetMessagingEventMap> {
private client: MatrixClient; private client: MatrixClient;
private iframe: HTMLIFrameElement | null = null; private iframe: HTMLIFrameElement | null = null;
private messaging: ClientWidgetApi | null = null;
private mockWidget: ElementWidget;
private scalarToken?: string; private scalarToken?: string;
private roomId?: string; private roomId?: string;
// The room that we're currently allowing the widget to interact with. Only // The room that we're currently allowing the widget to interact with. Only
@@ -171,26 +197,28 @@ export class StopGapWidget extends EventEmitter {
// Holds events that should be fed to the widget once they finish decrypting // Holds events that should be fed to the widget once they finish decrypting
private readonly eventsToFeed = new WeakSet<MatrixEvent>(); private readonly eventsToFeed = new WeakSet<MatrixEvent>();
public constructor(private appTileProps: IAppTileProps) { public constructor(
private readonly widget: ElementWidget,
options: WidgetMessagingOptions,
) {
super(); super();
this.client = MatrixClientPeg.safeGet(); this.client = MatrixClientPeg.safeGet();
this.roomId = options.room?.roomId;
let app = appTileProps.app; this.kind = options.userWidget ? WidgetKind.Account : WidgetKind.Room; // probably
// Backwards compatibility: not all old widgets have a creatorUserId this.virtual = isAppWidget(options.app) && options.app.eventId === undefined;
if (!app.creatorUserId) { this.stickyPromise = options.stickyPromise;
app = objectShallowClone(app); // clone to prevent accidental mutation
app.creatorUserId = this.client.getUserId()!;
}
this.mockWidget = new ElementWidget(app);
this.roomId = appTileProps.room?.roomId;
this.kind = appTileProps.userWidget ? WidgetKind.Account : WidgetKind.Room; // probably
this.virtual = isAppWidget(app) && app.eventId === undefined;
this.stickyPromise = appTileProps.stickyPromise;
} }
private _widgetApi: ClientWidgetApi | null = null;
private set widgetApi(value: ClientWidgetApi | null) {
this._widgetApi = value;
}
/**
* The widget API interface to the widget, or null if disconnected.
*/
public get widgetApi(): ClientWidgetApi | null { public get widgetApi(): ClientWidgetApi | null {
return this.messaging; return this._widgetApi;
} }
/** /**
@@ -220,7 +248,7 @@ export class StopGapWidget extends EventEmitter {
deviceId: this.client.getDeviceId() ?? undefined, deviceId: this.client.getDeviceId() ?? undefined,
baseUrl: this.client.baseUrl, baseUrl: this.client.baseUrl,
}; };
const templated = this.mockWidget.getCompleteUrl(Object.assign(defaults, fromCustomisation), opts?.asPopout); const templated = this.widget.getCompleteUrl(Object.assign(defaults, fromCustomisation), opts?.asPopout);
const parsed = new URL(templated); const parsed = new URL(templated);
@@ -228,7 +256,7 @@ export class StopGapWidget extends EventEmitter {
// TODO: Replace these with proper widget params // TODO: Replace these with proper widget params
// See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833 // See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833
if (!opts?.asPopout) { if (!opts?.asPopout) {
parsed.searchParams.set("widgetId", this.mockWidget.id); parsed.searchParams.set("widgetId", this.widget.id);
parsed.searchParams.set("parentUrl", window.location.href.split("#", 2)[0]); parsed.searchParams.set("parentUrl", window.location.href.split("#", 2)[0]);
// Give the widget a scalar token if we're supposed to (more legacy) // Give the widget a scalar token if we're supposed to (more legacy)
@@ -244,16 +272,16 @@ export class StopGapWidget extends EventEmitter {
} }
private onThemeChange = (theme: string): void => { private onThemeChange = (theme: string): void => {
this.messaging?.updateTheme({ name: theme }); this.widgetApi?.updateTheme({ name: theme });
}; };
private onOpenModal = async (ev: CustomEvent<IModalWidgetOpenRequest>): Promise<void> => { private onOpenModal = async (ev: CustomEvent<IModalWidgetOpenRequest>): Promise<void> => {
ev.preventDefault(); ev.preventDefault();
if (ModalWidgetStore.instance.canOpenModalWidget()) { if (ModalWidgetStore.instance.canOpenModalWidget()) {
ModalWidgetStore.instance.openModalWidget(ev.detail.data, this.mockWidget, this.roomId); ModalWidgetStore.instance.openModalWidget(ev.detail.data, this.widget, this.roomId);
this.messaging?.transport.reply(ev.detail, {}); // ack this.widgetApi?.transport.reply(ev.detail, {}); // ack
} else { } else {
this.messaging?.transport.reply(ev.detail, { this.widgetApi?.transport.reply(ev.detail, {
error: { error: {
message: "Unable to open modal at this time", message: "Unable to open modal at this time",
}, },
@@ -266,7 +294,7 @@ export class StopGapWidget extends EventEmitter {
private onRoomViewStoreUpdate = (): void => { private onRoomViewStoreUpdate = (): void => {
const roomId = SdkContextClass.instance.roomViewStore.getRoomId() ?? null; const roomId = SdkContextClass.instance.roomViewStore.getRoomId() ?? null;
if (roomId !== this.viewedRoomId) { if (roomId !== this.viewedRoomId) {
this.messaging!.setViewedRoomId(roomId); this.widgetApi!.setViewedRoomId(roomId);
this.viewedRoomId = roomId; this.viewedRoomId = roomId;
} }
}; };
@@ -275,60 +303,47 @@ export class StopGapWidget extends EventEmitter {
* This starts the messaging for the widget if it is not in the state `started` yet. * This starts the messaging for the widget if it is not in the state `started` yet.
* @param iframe the iframe the widget should use * @param iframe the iframe the widget should use
*/ */
public startMessaging(iframe: HTMLIFrameElement): void { public start(iframe: HTMLIFrameElement): void {
if (this.messaging !== null) return; if (this.widgetApi !== null) return;
this.iframe = iframe; this.iframe = iframe;
const allowedCapabilities = this.appTileProps.whitelistCapabilities || []; const driver = new ElementWidgetDriver(this.widget, this.kind, this.virtual, this.roomId);
const driver = new StopGapWidgetDriver(
allowedCapabilities,
this.mockWidget,
this.kind,
this.virtual,
this.roomId,
);
this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
this.messaging.on("preparing", () => this.emit("preparing"));
this.messaging.on("error:preparing", (err: unknown) => this.emit("error:preparing", err));
this.messaging.once("ready", () => {
WidgetMessagingStore.instance.storeMessaging(this.mockWidget, this.roomId, this.messaging!);
this.emit("ready");
this.widgetApi = new ClientWidgetApi(this.widget, iframe, driver);
this.widgetApi.once("ready", () => {
this.themeWatcher.start(); this.themeWatcher.start();
this.themeWatcher.on(ThemeWatcherEvent.Change, this.onThemeChange); this.themeWatcher.on(ThemeWatcherEvent.Change, this.onThemeChange);
// Theme may have changed while messaging was starting // Theme may have changed while messaging was starting
this.onThemeChange(this.themeWatcher.getEffectiveTheme()); this.onThemeChange(this.themeWatcher.getEffectiveTheme());
}); });
this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified")); this.widgetApi.on(`action:${WidgetApiFromWidgetAction.OpenModalWidget}`, this.onOpenModal);
this.messaging.on(`action:${WidgetApiFromWidgetAction.OpenModalWidget}`, this.onOpenModal);
// When widgets are listening to events, we need to make sure they're only // When widgets are listening to events, we need to make sure they're only
// receiving events for the right room // receiving events for the right room
if (this.roomId === undefined) { if (this.roomId === undefined) {
// Account widgets listen to the currently active room // Account widgets listen to the currently active room
this.messaging.setViewedRoomId(SdkContextClass.instance.roomViewStore.getRoomId() ?? null); this.widgetApi.setViewedRoomId(SdkContextClass.instance.roomViewStore.getRoomId() ?? null);
SdkContextClass.instance.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate); SdkContextClass.instance.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
} else { } else {
// Room widgets get locked to the room they were added in // Room widgets get locked to the room they were added in
this.messaging.setViewedRoomId(this.roomId); this.widgetApi.setViewedRoomId(this.roomId);
} }
// Always attach a handler for ViewRoom, but permission check it internally // Always attach a handler for ViewRoom, but permission check it internally
this.messaging.on(`action:${ElementWidgetActions.ViewRoom}`, (ev: CustomEvent<IViewRoomApiRequest>) => { this.widgetApi.on(`action:${ElementWidgetActions.ViewRoom}`, (ev: CustomEvent<IViewRoomApiRequest>) => {
ev.preventDefault(); // stop the widget API from auto-rejecting this ev.preventDefault(); // stop the widget API from auto-rejecting this
// Check up front if this is even a valid request // Check up front if this is even a valid request
const targetRoomId = (ev.detail.data || {}).room_id; const targetRoomId = (ev.detail.data || {}).room_id;
if (!targetRoomId) { if (!targetRoomId) {
return this.messaging?.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{ return this.widgetApi?.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
error: { message: "Room ID not supplied." }, error: { message: "Room ID not supplied." },
}); });
} }
// Check the widget's permission // Check the widget's permission
if (!this.messaging?.hasCapability(ElementWidgetCapabilities.CanChangeViewedRoom)) { if (!this.widgetApi?.hasCapability(ElementWidgetCapabilities.CanChangeViewedRoom)) {
return this.messaging?.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{ return this.widgetApi?.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
error: { message: "This widget does not have permission for this action (denied)." }, error: { message: "This widget does not have permission for this action (denied)." },
}); });
} }
@@ -341,7 +356,7 @@ export class StopGapWidget extends EventEmitter {
}); });
// acknowledge so the widget doesn't freak out // acknowledge so the widget doesn't freak out
this.messaging.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); this.widgetApi.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
}); });
// Populate the map of "read up to" events for this widget with the current event in every room. // Populate the map of "read up to" events for this widget with the current event in every room.
@@ -361,10 +376,10 @@ export class StopGapWidget extends EventEmitter {
this.client.on(RoomStateEvent.Events, this.onStateUpdate); this.client.on(RoomStateEvent.Events, this.onStateUpdate);
this.client.on(ClientEvent.ReceivedToDeviceMessage, this.onToDeviceMessage); this.client.on(ClientEvent.ReceivedToDeviceMessage, this.onToDeviceMessage);
this.messaging.on( this.widgetApi.on(
`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`, `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`,
async (ev: CustomEvent<IStickyActionRequest>) => { async (ev: CustomEvent<IStickyActionRequest>) => {
if (this.messaging?.hasCapability(MatrixCapabilities.AlwaysOnScreen)) { if (this.widgetApi?.hasCapability(MatrixCapabilities.AlwaysOnScreen)) {
ev.preventDefault(); ev.preventDefault();
if (ev.detail.data.value) { if (ev.detail.data.value) {
// If the widget wants to become sticky we wait for the stickyPromise to resolve // If the widget wants to become sticky we wait for the stickyPromise to resolve
@@ -372,43 +387,43 @@ export class StopGapWidget extends EventEmitter {
} }
// Stop being persistent can be done instantly // Stop being persistent can be done instantly
ActiveWidgetStore.instance.setWidgetPersistence( ActiveWidgetStore.instance.setWidgetPersistence(
this.mockWidget.id, this.widget.id,
this.roomId ?? null, this.roomId ?? null,
ev.detail.data.value, ev.detail.data.value,
); );
// Send the ack after the widget actually has become sticky. // Send the ack after the widget actually has become sticky.
this.messaging.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); this.widgetApi.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
} }
}, },
); );
// TODO: Replace this event listener with appropriate driver functionality once the API // TODO: Replace this event listener with appropriate driver functionality once the API
// establishes a sane way to send events back and forth. // establishes a sane way to send events back and forth.
this.messaging.on( this.widgetApi.on(
`action:${WidgetApiFromWidgetAction.SendSticker}`, `action:${WidgetApiFromWidgetAction.SendSticker}`,
(ev: CustomEvent<IStickerActionRequest>) => { (ev: CustomEvent<IStickerActionRequest>) => {
if (this.messaging?.hasCapability(MatrixCapabilities.StickerSending)) { if (this.widgetApi?.hasCapability(MatrixCapabilities.StickerSending)) {
// Acknowledge first // Acknowledge first
ev.preventDefault(); ev.preventDefault();
this.messaging.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); this.widgetApi.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
// Send the sticker // Send the sticker
defaultDispatcher.dispatch({ defaultDispatcher.dispatch({
action: "m.sticker", action: "m.sticker",
data: ev.detail.data, data: ev.detail.data,
widgetId: this.mockWidget.id, widgetId: this.widget.id,
}); });
} }
}, },
); );
if (WidgetType.STICKERPICKER.matches(this.mockWidget.type)) { if (WidgetType.STICKERPICKER.matches(this.widget.type)) {
this.messaging.on( this.widgetApi.on(
`action:${ElementWidgetActions.OpenIntegrationManager}`, `action:${ElementWidgetActions.OpenIntegrationManager}`,
(ev: CustomEvent<IWidgetApiRequest>) => { (ev: CustomEvent<IWidgetApiRequest>) => {
// Acknowledge first // Acknowledge first
ev.preventDefault(); ev.preventDefault();
this.messaging?.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); this.widgetApi?.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
// First close the stickerpicker // First close the stickerpicker
defaultDispatcher.dispatch({ action: "stickerpicker_close" }); defaultDispatcher.dispatch({ action: "stickerpicker_close" });
@@ -429,8 +444,8 @@ export class StopGapWidget extends EventEmitter {
); );
} }
if (WidgetType.JITSI.matches(this.mockWidget.type)) { if (WidgetType.JITSI.matches(this.widget.type)) {
this.messaging.on(`action:${ElementWidgetActions.HangupCall}`, (ev: CustomEvent<IHangupCallApiRequest>) => { this.widgetApi.on(`action:${ElementWidgetActions.HangupCall}`, (ev: CustomEvent<IHangupCallApiRequest>) => {
ev.preventDefault(); ev.preventDefault();
if (ev.detail.data?.errorMessage) { if (ev.detail.data?.errorMessage) {
Modal.createDialog(ErrorDialog, { Modal.createDialog(ErrorDialog, {
@@ -440,9 +455,11 @@ export class StopGapWidget extends EventEmitter {
}), }),
}); });
} }
this.messaging?.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); this.widgetApi?.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
}); });
} }
this.emit(WidgetMessagingEvent.Start, this.widgetApi);
} }
public async prepare(): Promise<void> { public async prepare(): Promise<void> {
@@ -450,10 +467,8 @@ export class StopGapWidget extends EventEmitter {
await (WidgetVariableCustomisations?.isReady?.() ?? Promise.resolve()); await (WidgetVariableCustomisations?.isReady?.() ?? Promise.resolve());
if (this.scalarToken) return; if (this.scalarToken) return;
const existingMessaging = WidgetMessagingStore.instance.getMessaging(this.mockWidget, this.roomId);
if (existingMessaging) this.messaging = existingMessaging;
try { try {
if (WidgetUtils.isScalarUrl(this.mockWidget.templateUrl)) { if (WidgetUtils.isScalarUrl(this.widget.templateUrl)) {
const managers = IntegrationManagers.sharedInstance(); const managers = IntegrationManagers.sharedInstance();
if (managers.hasManager()) { if (managers.hasManager()) {
// TODO: Pick the right manager for the widget // TODO: Pick the right manager for the widget
@@ -475,8 +490,8 @@ export class StopGapWidget extends EventEmitter {
* widget. * widget.
* @param opts * @param opts
*/ */
public stopMessaging(opts = { forceDestroy: false }): void { public stop(opts = { forceDestroy: false }): void {
if (this.messaging === null || this.iframe === null) return; if (this.widgetApi === null || this.iframe === null) return;
if (opts.forceDestroy) { if (opts.forceDestroy) {
// HACK: This is a really dirty way to ensure that Jitsi cleans up // HACK: This is a really dirty way to ensure that Jitsi cleans up
// its hold on the webcam. Without this, the widget holds a media // its hold on the webcam. Without this, the widget holds a media
@@ -487,15 +502,16 @@ export class StopGapWidget extends EventEmitter {
// at a page that is reasonably safe to use in the event the iframe // at a page that is reasonably safe to use in the event the iframe
// doesn't wink away. // doesn't wink away.
this.iframe!.src = "about:blank"; this.iframe!.src = "about:blank";
} else if (ActiveWidgetStore.instance.getWidgetPersistence(this.mockWidget.id, this.roomId ?? null)) { } else if (ActiveWidgetStore.instance.getWidgetPersistence(this.widget.id, this.roomId ?? null)) {
logger.log("Skipping destroy - persistent widget"); logger.log("Skipping destroy - persistent widget");
return; return;
} }
WidgetMessagingStore.instance.stopMessaging(this.mockWidget, this.roomId); this.emit(WidgetMessagingEvent.Stop, this.widgetApi);
this.messaging?.removeAllListeners(); // Guard against the 'ready' event firing after stopping this.widgetApi?.removeAllListeners(); // Insurance against resource leaks
this.messaging = null; this.widgetApi = null;
this.iframe = null; this.iframe = null;
WidgetMessagingStore.instance.stopMessaging(this.widget, this.roomId);
SdkContextClass.instance.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate); SdkContextClass.instance.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
@@ -515,9 +531,9 @@ export class StopGapWidget extends EventEmitter {
}; };
private onStateUpdate = (ev: MatrixEvent): void => { private onStateUpdate = (ev: MatrixEvent): void => {
if (this.messaging === null) return; if (this.widgetApi === null) return;
const raw = ev.getEffectiveEvent(); const raw = ev.getEffectiveEvent();
this.messaging.feedStateUpdate(raw as IRoomEvent).catch((e) => { this.widgetApi.feedStateUpdate(raw as IRoomEvent).catch((e) => {
logger.error("Error sending state update to widget: ", e); logger.error("Error sending state update to widget: ", e);
}); });
}; };
@@ -525,7 +541,7 @@ export class StopGapWidget extends EventEmitter {
private onToDeviceMessage = async (payload: ReceivedToDeviceMessage): Promise<void> => { private onToDeviceMessage = async (payload: ReceivedToDeviceMessage): Promise<void> => {
const { message, encryptionInfo } = payload; const { message, encryptionInfo } = payload;
// TODO: Update the widget API to use a proper IToDeviceMessage instead of a IRoomEvent // TODO: Update the widget API to use a proper IToDeviceMessage instead of a IRoomEvent
await this.messaging?.feedToDevice(message as IRoomEvent, encryptionInfo != null); await this.widgetApi?.feedToDevice(message as IRoomEvent, encryptionInfo != null);
}; };
/** /**
@@ -592,7 +608,7 @@ export class StopGapWidget extends EventEmitter {
} }
private feedEvent(ev: MatrixEvent): void { private feedEvent(ev: MatrixEvent): void {
if (this.messaging === null) return; if (this.widgetApi === null) return;
if ( if (
// If we had decided earlier to feed this event to the widget, but // If we had decided earlier to feed this event to the widget, but
// it just wasn't ready, give it another try // it just wasn't ready, give it another try
@@ -621,7 +637,7 @@ export class StopGapWidget extends EventEmitter {
this.eventsToFeed.add(ev); this.eventsToFeed.add(ev);
} else { } else {
const raw = ev.getEffectiveEvent(); const raw = ev.getEffectiveEvent();
this.messaging.feedEvent(raw as IRoomEvent).catch((e) => { this.widgetApi.feedEvent(raw as IRoomEvent).catch((e) => {
logger.error("Error sending event to widget: ", e); logger.error("Error sending event to widget: ", e);
}); });
} }

15
src/stores/widgets/WidgetMessagingStore.ts
View File

@@ -6,7 +6,7 @@
* Please see LICENSE files in the repository root for full details. * Please see LICENSE files in the repository root for full details.
*/ */
import { type ClientWidgetApi, type Widget } from "matrix-widget-api"; import { type Widget } from "matrix-widget-api";
import { type EmptyObject } from "matrix-js-sdk/src/matrix"; import { type EmptyObject } from "matrix-js-sdk/src/matrix";
import { AsyncStoreWithClient } from "../AsyncStoreWithClient"; import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
@@ -14,6 +14,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
import { type ActionPayload } from "../../dispatcher/payloads"; import { type ActionPayload } from "../../dispatcher/payloads";
import { EnhancedMap } from "../../utils/maps"; import { EnhancedMap } from "../../utils/maps";
import WidgetUtils from "../../utils/WidgetUtils"; import WidgetUtils from "../../utils/WidgetUtils";
import { type WidgetMessaging } from "./WidgetMessaging";
export enum WidgetMessagingStoreEvent { export enum WidgetMessagingStoreEvent {
StoreMessaging = "store_messaging", StoreMessaging = "store_messaging",
@@ -32,7 +33,7 @@ export class WidgetMessagingStore extends AsyncStoreWithClient<EmptyObject> {
return instance; return instance;
})(); })();
private widgetMap = new EnhancedMap<string, ClientWidgetApi>(); // <widget UID, ClientWidgetAPi> private widgetMap = new EnhancedMap<string, WidgetMessaging>(); // <widget UID, messaging>
public constructor() { public constructor() {
super(defaultDispatcher); super(defaultDispatcher);
@@ -51,19 +52,19 @@ export class WidgetMessagingStore extends AsyncStoreWithClient<EmptyObject> {
this.widgetMap.clear(); this.widgetMap.clear();
} }
public storeMessaging(widget: Widget, roomId: string | undefined, widgetApi: ClientWidgetApi): void { public storeMessaging(widget: Widget, roomId: string | undefined, messaging: WidgetMessaging): void {
this.stopMessaging(widget, roomId); this.stopMessaging(widget, roomId);
const uid = WidgetUtils.calcWidgetUid(widget.id, roomId); const uid = WidgetUtils.calcWidgetUid(widget.id, roomId);
this.widgetMap.set(uid, widgetApi); this.widgetMap.set(uid, messaging);
this.emit(WidgetMessagingStoreEvent.StoreMessaging, uid, widgetApi); this.emit(WidgetMessagingStoreEvent.StoreMessaging, uid, messaging);
} }
public stopMessaging(widget: Widget, roomId: string | undefined): void { public stopMessaging(widget: Widget, roomId: string | undefined): void {
this.stopMessagingByUid(WidgetUtils.calcWidgetUid(widget.id, roomId)); this.stopMessagingByUid(WidgetUtils.calcWidgetUid(widget.id, roomId));
} }
public getMessaging(widget: Widget, roomId: string | undefined): ClientWidgetApi | undefined { public getMessaging(widget: Widget, roomId: string | undefined): WidgetMessaging | undefined {
return this.widgetMap.get(WidgetUtils.calcWidgetUid(widget.id, roomId)); return this.widgetMap.get(WidgetUtils.calcWidgetUid(widget.id, roomId));
} }
@@ -84,7 +85,7 @@ export class WidgetMessagingStore extends AsyncStoreWithClient<EmptyObject> {
* @param {string} widgetUid The widget UID. * @param {string} widgetUid The widget UID.
* @returns {ClientWidgetApi} The widget API, or a falsy value if not found. * @returns {ClientWidgetApi} The widget API, or a falsy value if not found.
*/ */
public getMessagingForUid(widgetUid: string): ClientWidgetApi | undefined { public getMessagingForUid(widgetUid: string): WidgetMessaging | undefined {
return this.widgetMap.get(widgetUid); return this.widgetMap.get(widgetUid);
} }
} }

47
test/unit-tests/components/structures/PipContainer-test.tsx
View File

@@ -49,6 +49,7 @@ import WidgetStore from "../../../../src/stores/WidgetStore";
import { WidgetType } from "../../../../src/widgets/WidgetType"; import { WidgetType } from "../../../../src/widgets/WidgetType";
import { SdkContextClass } from "../../../../src/contexts/SDKContext"; import { SdkContextClass } from "../../../../src/contexts/SDKContext";
import { ElementWidgetActions } from "../../../../src/stores/widgets/ElementWidgetActions"; import { ElementWidgetActions } from "../../../../src/stores/widgets/ElementWidgetActions";
import { type WidgetMessaging } from "../../../../src/stores/widgets/WidgetMessaging";
jest.mock("../../../../src/stores/OwnProfileStore", () => ({ jest.mock("../../../../src/stores/OwnProfileStore", () => ({
OwnProfileStore: { OwnProfileStore: {
@@ -149,30 +150,40 @@ describe("PipContainer", () => {
await act(async () => { await act(async () => {
WidgetStore.instance.addVirtualWidget(call.widget, room.roomId); WidgetStore.instance.addVirtualWidget(call.widget, room.roomId);
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, { WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
on: () => {},
off: () => {},
prepare: async () => {},
stop: () => {}, stop: () => {},
hasCapability: jest.fn(), widgetApi: {
feedStateUpdate: jest.fn().mockResolvedValue(undefined), hasCapability: jest.fn(),
} as unknown as ClientWidgetApi); feedStateUpdate: jest.fn().mockResolvedValue(undefined),
},
} as unknown as WidgetMessaging);
await call.start(); await call.start();
ActiveWidgetStore.instance.setWidgetPersistence(widget.id, room.roomId, true); ActiveWidgetStore.instance.setWidgetPersistence(widget.id, room.roomId, true);
}); });
await fn(call); try {
await fn(call);
cleanup(); } finally {
act(() => { cleanup();
call.destroy(); act(() => {
ActiveWidgetStore.instance.destroyPersistentWidget(widget.id, room.roomId); call.destroy();
WidgetStore.instance.removeVirtualWidget(widget.id, room.roomId); ActiveWidgetStore.instance.destroyPersistentWidget(widget.id, room.roomId);
}); WidgetStore.instance.removeVirtualWidget(widget.id, room.roomId);
});
}
}; };
const withWidget = async (fn: () => Promise<void>): Promise<void> => { const withWidget = async (fn: () => Promise<void>): Promise<void> => {
act(() => ActiveWidgetStore.instance.setWidgetPersistence("1", room.roomId, true)); act(() => ActiveWidgetStore.instance.setWidgetPersistence("1", room.roomId, true));
await fn(); try {
cleanup(); await fn();
ActiveWidgetStore.instance.destroyPersistentWidget("1", room.roomId); } finally {
cleanup();
ActiveWidgetStore.instance.destroyPersistentWidget("1", room.roomId);
}
}; };
const setUpRoomViewStore = () => { const setUpRoomViewStore = () => {
@@ -276,9 +287,13 @@ describe("PipContainer", () => {
>() >()
.mockResolvedValue({}); .mockResolvedValue({});
const mockMessaging = { const mockMessaging = {
transport: { send: sendSpy }, on: () => {},
off: () => {},
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi; widgetApi: {
transport: { send: sendSpy },
},
} as unknown as WidgetMessaging;
WidgetMessagingStore.instance.storeMessaging(new Widget(widget), room.roomId, mockMessaging); WidgetMessagingStore.instance.storeMessaging(new Widget(widget), room.roomId, mockMessaging);
await user.click(screen.getByRole("button", { name: "Leave" })); await user.click(screen.getByRole("button", { name: "Leave" }));
expect(sendSpy).toHaveBeenCalledWith(ElementWidgetActions.HangupCall, {}); expect(sendSpy).toHaveBeenCalledWith(ElementWidgetActions.HangupCall, {});

5
test/unit-tests/components/views/beacon/RoomCallBanner-test.tsx
View File

@@ -14,7 +14,7 @@ import {
type RoomMember, type RoomMember,
RoomStateEvent, RoomStateEvent,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { type ClientWidgetApi, Widget } from "matrix-widget-api"; import { Widget } from "matrix-widget-api";
import { act, cleanup, render, screen } from "jest-matrix-react"; import { act, cleanup, render, screen } from "jest-matrix-react";
import { mocked, type Mocked } from "jest-mock"; import { mocked, type Mocked } from "jest-mock";
@@ -32,6 +32,7 @@ import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import { ConnectionState } from "../../../../../src/models/Call"; import { ConnectionState } from "../../../../../src/models/Call";
import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext"; import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext";
import RoomContext, { type RoomContextType } from "../../../../../src/contexts/RoomContext"; import RoomContext, { type RoomContextType } from "../../../../../src/contexts/RoomContext";
import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
describe("<RoomCallBanner />", () => { describe("<RoomCallBanner />", () => {
let client: Mocked<MatrixClient>; let client: Mocked<MatrixClient>;
@@ -115,7 +116,7 @@ describe("<RoomCallBanner />", () => {
widget = new Widget(call.widget); widget = new Widget(call.widget);
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, { WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi); } as unknown as WidgetMessaging);
}); });
afterEach(() => { afterEach(() => {
cleanup(); // Unmount before we do any cleanup that might update the component cleanup(); // Unmount before we do any cleanup that might update the component

26
test/unit-tests/components/views/elements/AppTile-test.tsx
View File

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react"; import React from "react";
import { Room, type MatrixClient } from "matrix-js-sdk/src/matrix"; import { Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { type ClientWidgetApi, type IWidget, MatrixWidgetType } from "matrix-widget-api"; import { type IWidget, MatrixWidgetType } from "matrix-widget-api";
import { act, render, type RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react"; import { act, render, type RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { import {
@@ -34,7 +34,7 @@ import AppTile from "../../../../../src/components/views/elements/AppTile";
import { Container, WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore"; import { Container, WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer"; import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer";
import { ElementWidgetCapabilities } from "../../../../../src/stores/widgets/ElementWidgetCapabilities"; import { ElementWidgetCapabilities } from "../../../../../src/stores/widgets/ElementWidgetCapabilities";
import { ElementWidget } from "../../../../../src/stores/widgets/StopGapWidget"; import { ElementWidget, type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore"; import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
import { ModuleRunner } from "../../../../../src/modules/ModuleRunner"; import { ModuleRunner } from "../../../../../src/modules/ModuleRunner";
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks"; import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
@@ -116,9 +116,11 @@ describe("AppTile", () => {
await RightPanelStore.instance.onReady(); await RightPanelStore.instance.onReady();
}); });
beforeEach(() => { beforeEach(async () => {
sdkContext = new SdkContextClass(); sdkContext = new SdkContextClass();
jest.spyOn(SettingsStore, "getValue").mockRestore(); jest.spyOn(SettingsStore, "getValue").mockRestore();
// @ts-ignore
await WidgetMessagingStore.instance.onReady();
}); });
it("destroys non-persisted right panel widget on room change", async () => { it("destroys non-persisted right panel widget on room change", async () => {
@@ -424,16 +426,20 @@ describe("AppTile", () => {
describe("with an existing widgetApi with requiresClient = false", () => { describe("with an existing widgetApi with requiresClient = false", () => {
beforeEach(() => { beforeEach(() => {
const api = { const messaging = {
hasCapability: (capability: ElementWidgetCapabilities): boolean => { on: () => {},
return !(capability === ElementWidgetCapabilities.RequiresClient); off: () => {},
}, prepare: async () => {},
once: () => {},
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi; widgetApi: {
hasCapability: (capability: ElementWidgetCapabilities): boolean => {
return !(capability === ElementWidgetCapabilities.RequiresClient);
},
},
} as unknown as WidgetMessaging;
const mockWidget = new ElementWidget(app1); const mockWidget = new ElementWidget(app1);
WidgetMessagingStore.instance.storeMessaging(mockWidget, r1.roomId, api); WidgetMessagingStore.instance.storeMessaging(mockWidget, r1.roomId, messaging);
renderResult = render( renderResult = render(
<MatrixClientContext.Provider value={cli}> <MatrixClientContext.Provider value={cli}>

5
test/unit-tests/components/views/messages/CallEvent-test.tsx
View File

@@ -16,7 +16,7 @@ import {
PendingEventOrdering, PendingEventOrdering,
type RoomMember, type RoomMember,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { type ClientWidgetApi, Widget } from "matrix-widget-api"; import { Widget } from "matrix-widget-api";
import { import {
useMockedCalls, useMockedCalls,
@@ -35,6 +35,7 @@ import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import { CallStore } from "../../../../../src/stores/CallStore"; import { CallStore } from "../../../../../src/stores/CallStore";
import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore"; import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
import { ConnectionState } from "../../../../../src/models/Call"; import { ConnectionState } from "../../../../../src/models/Call";
import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
const CallEvent = wrapInMatrixClientContext(UnwrappedCallEvent); const CallEvent = wrapInMatrixClientContext(UnwrappedCallEvent);
@@ -86,7 +87,7 @@ describe("CallEvent", () => {
widget = new Widget(call.widget); widget = new Widget(call.widget);
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, { WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi); } as unknown as WidgetMessaging);
}); });
afterEach(async () => { afterEach(async () => {

4
test/unit-tests/components/views/rooms/RoomTile-test.tsx
View File

@@ -20,7 +20,6 @@ import {
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { Widget } from "matrix-widget-api"; import { Widget } from "matrix-widget-api";
import type { ClientWidgetApi } from "matrix-widget-api";
import { import {
stubClient, stubClient,
mkRoomMember, mkRoomMember,
@@ -47,6 +46,7 @@ import { MessagePreviewStore } from "../../../../../src/stores/room-list/Message
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import SettingsStore from "../../../../../src/settings/SettingsStore"; import SettingsStore from "../../../../../src/settings/SettingsStore";
import { ConnectionState } from "../../../../../src/models/Call"; import { ConnectionState } from "../../../../../src/models/Call";
import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({ jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
shouldShowComponent: jest.fn(), shouldShowComponent: jest.fn(),
@@ -204,7 +204,7 @@ describe("RoomTile", () => {
widget = new Widget(call.widget); widget = new Widget(call.widget);
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, { WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi); } as unknown as WidgetMessaging);
}); });
afterEach(() => { afterEach(() => {

7
test/unit-tests/components/views/voip/CallView-test.tsx
View File

@@ -18,7 +18,6 @@ import {
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { Widget } from "matrix-widget-api"; import { Widget } from "matrix-widget-api";
import type { ClientWidgetApi } from "matrix-widget-api";
import { import {
stubClient, stubClient,
mkRoomMember, mkRoomMember,
@@ -33,6 +32,7 @@ import { CallView as _CallView } from "../../../../../src/components/views/voip/
import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore"; import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
import { CallStore } from "../../../../../src/stores/CallStore"; import { CallStore } from "../../../../../src/stores/CallStore";
import DMRoomMap from "../../../../../src/utils/DMRoomMap"; import DMRoomMap from "../../../../../src/utils/DMRoomMap";
import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
const CallView = wrapInMatrixClientContext(_CallView); const CallView = wrapInMatrixClientContext(_CallView);
@@ -73,8 +73,11 @@ describe("CallView", () => {
widget = new Widget(call.widget); widget = new Widget(call.widget);
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, { WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
on: () => {},
off: () => {},
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi); embedUrl: "https://example.org",
} as unknown as WidgetMessaging);
}); });
afterEach(() => { afterEach(() => {

188
test/unit-tests/models/Call-test.ts
View File

@@ -48,36 +48,37 @@ import { Anonymity, PosthogAnalytics } from "../../../src/PosthogAnalytics";
import { type SettingKey } from "../../../src/settings/Settings.tsx"; import { type SettingKey } from "../../../src/settings/Settings.tsx";
import SdkConfig from "../../../src/SdkConfig.ts"; import SdkConfig from "../../../src/SdkConfig.ts";
import DMRoomMap from "../../../src/utils/DMRoomMap.ts"; import DMRoomMap from "../../../src/utils/DMRoomMap.ts";
import { WidgetMessagingEvent, type WidgetMessaging } from "../../../src/stores/widgets/WidgetMessaging.ts";
const { enabledSettings } = enableCalls(); const { enabledSettings } = enableCalls();
const setUpWidget = (call: Call): { widget: Widget; messaging: Mocked<ClientWidgetApi> } => { const setUpWidget = (
call: Call,
): { widget: Widget; messaging: Mocked<WidgetMessaging>; widgetApi: Mocked<ClientWidgetApi> } => {
call.widget.data = { ...call.widget, skipLobby: true }; call.widget.data = { ...call.widget, skipLobby: true };
const widget = new Widget(call.widget); const widget = new Widget(call.widget);
const eventEmitter = new EventEmitter(); const widgetApi = new (class extends EventEmitter {
const messaging = { transport = {
on: eventEmitter.on.bind(eventEmitter),
off: eventEmitter.off.bind(eventEmitter),
once: eventEmitter.once.bind(eventEmitter),
emit: eventEmitter.emit.bind(eventEmitter),
stop: jest.fn(),
transport: {
send: jest.fn(), send: jest.fn(),
reply: jest.fn(), reply: jest.fn(),
}, };
} as unknown as Mocked<ClientWidgetApi>; })() as unknown as Mocked<ClientWidgetApi>;
const messaging = new (class extends EventEmitter {
stop = jest.fn();
widgetApi = widgetApi;
})() as unknown as Mocked<WidgetMessaging>;
WidgetMessagingStore.instance.storeMessaging(widget, call.roomId, messaging); WidgetMessagingStore.instance.storeMessaging(widget, call.roomId, messaging);
return { widget, messaging }; return { widget, messaging, widgetApi };
}; };
async function connect(call: Call, messaging: Mocked<ClientWidgetApi>, startWidget = true): Promise<void> { async function connect(call: Call, widgetApi: Mocked<ClientWidgetApi>, startWidget = true): Promise<void> {
async function sessionConnect() { async function sessionConnect() {
await new Promise<void>((r) => { await new Promise<void>((r) => {
setTimeout(() => r(), 400); setTimeout(() => r(), 400);
}); });
messaging.emit(`action:${ElementWidgetActions.JoinCall}`, new CustomEvent("widgetapirequest", {})); widgetApi.emit(`action:${ElementWidgetActions.JoinCall}`, new CustomEvent("widgetapirequest", {}));
} }
async function runTimers() { async function runTimers() {
jest.advanceTimersByTime(500); jest.advanceTimersByTime(500);
@@ -87,12 +88,12 @@ async function connect(call: Call, messaging: Mocked<ClientWidgetApi>, startWidg
await Promise.all([...(startWidget ? [call.start()] : []), runTimers()]); await Promise.all([...(startWidget ? [call.start()] : []), runTimers()]);
} }
async function disconnect(call: Call, messaging: Mocked<ClientWidgetApi>): Promise<void> { async function disconnect(call: Call, widgetApi: Mocked<ClientWidgetApi>): Promise<void> {
async function sessionDisconnect() { async function sessionDisconnect() {
await new Promise<void>((r) => { await new Promise<void>((r) => {
setTimeout(() => r(), 400); setTimeout(() => r(), 400);
}); });
messaging.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {})); widgetApi.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {}));
} }
async function runTimers() { async function runTimers() {
jest.advanceTimersByTime(500); jest.advanceTimersByTime(500);
@@ -150,7 +151,8 @@ describe("JitsiCall", () => {
describe("instance in a video room", () => { describe("instance in a video room", () => {
let call: JitsiCall; let call: JitsiCall;
let widget: Widget; let widget: Widget;
let messaging: Mocked<ClientWidgetApi>; let messaging: Mocked<WidgetMessaging>;
let widgetApi: Mocked<ClientWidgetApi>;
beforeEach(async () => { beforeEach(async () => {
jest.useFakeTimers(); jest.useFakeTimers();
@@ -161,16 +163,16 @@ describe("JitsiCall", () => {
if (maybeCall === null) throw new Error("Failed to create call"); if (maybeCall === null) throw new Error("Failed to create call");
call = maybeCall; call = maybeCall;
({ widget, messaging } = setUpWidget(call)); ({ widget, messaging, widgetApi } = setUpWidget(call));
mocked(messaging.transport).send.mockImplementation(async (action, data): Promise<any> => { mocked(widgetApi.transport).send.mockImplementation(async (action, data): Promise<any> => {
if (action === ElementWidgetActions.JoinCall) { if (action === ElementWidgetActions.JoinCall) {
messaging.emit( widgetApi.emit(
`action:${ElementWidgetActions.JoinCall}`, `action:${ElementWidgetActions.JoinCall}`,
new CustomEvent("widgetapirequest", { detail: { data } }), new CustomEvent("widgetapirequest", { detail: { data } }),
); );
} else if (action === ElementWidgetActions.HangupCall) { } else if (action === ElementWidgetActions.HangupCall) {
messaging.emit( widgetApi.emit(
`action:${ElementWidgetActions.HangupCall}`, `action:${ElementWidgetActions.HangupCall}`,
new CustomEvent("widgetapirequest", { detail: { data } }), new CustomEvent("widgetapirequest", { detail: { data } }),
); );
@@ -183,7 +185,7 @@ describe("JitsiCall", () => {
it("connects", async () => { it("connects", async () => {
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
}); });
@@ -196,27 +198,27 @@ describe("JitsiCall", () => {
const startup = call.start(); const startup = call.start();
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, messaging); WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, messaging);
await startup; await startup;
await connect(call, messaging, false); await connect(call, widgetApi, false);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
}); });
it("fails to disconnect if the widget returns an error", async () => { it("fails to disconnect if the widget returns an error", async () => {
await connect(call, messaging); await connect(call, widgetApi);
mocked(messaging.transport).send.mockRejectedValue(new Error("never!")); mocked(widgetApi.transport).send.mockRejectedValue(new Error("never!"));
await expect(call.disconnect()).rejects.toBeDefined(); await expect(call.disconnect()).rejects.toBeDefined();
}); });
it("handles remote disconnection", async () => { it("handles remote disconnection", async () => {
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
const callback = jest.fn(); const callback = jest.fn();
call.on(CallEvent.ConnectionState, callback); call.on(CallEvent.ConnectionState, callback);
messaging.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {})); widgetApi.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {}));
await waitFor(() => { await waitFor(() => {
expect(callback).toHaveBeenNthCalledWith(1, ConnectionState.Disconnected, ConnectionState.Connected); expect(callback).toHaveBeenNthCalledWith(1, ConnectionState.Disconnected, ConnectionState.Connected);
}); });
@@ -226,14 +228,14 @@ describe("JitsiCall", () => {
it("disconnects", async () => { it("disconnects", async () => {
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
await call.disconnect(); await call.disconnect();
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
}); });
it("disconnects when we leave the room", async () => { it("disconnects when we leave the room", async () => {
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
room.emit(RoomEvent.MyMembership, room, KnownMembership.Leave); room.emit(RoomEvent.MyMembership, room, KnownMembership.Leave);
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
@@ -241,14 +243,14 @@ describe("JitsiCall", () => {
it("reconnects after disconnect in video rooms", async () => { it("reconnects after disconnect in video rooms", async () => {
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
await call.disconnect(); await call.disconnect();
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
}); });
it("remains connected if we stay in the room", async () => { it("remains connected if we stay in the room", async () => {
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
room.emit(RoomEvent.MyMembership, room, KnownMembership.Join); room.emit(RoomEvent.MyMembership, room, KnownMembership.Join);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
@@ -274,7 +276,7 @@ describe("JitsiCall", () => {
// Now, stub out client.sendStateEvent so we can test our local echo // Now, stub out client.sendStateEvent so we can test our local echo
client.sendStateEvent.mockReset(); client.sendStateEvent.mockReset();
await connect(call, messaging); await connect(call, widgetApi);
expect(call.participants).toEqual( expect(call.participants).toEqual(
new Map([ new Map([
[alice, new Set(["alices_device"])], [alice, new Set(["alices_device"])],
@@ -287,7 +289,7 @@ describe("JitsiCall", () => {
}); });
it("updates room state when connecting and disconnecting", async () => { it("updates room state when connecting and disconnecting", async () => {
await connect(call, messaging); await connect(call, widgetApi);
const now1 = Date.now(); const now1 = Date.now();
await waitFor( await waitFor(
() => () =>
@@ -315,7 +317,7 @@ describe("JitsiCall", () => {
}); });
it("repeatedly updates room state while connected", async () => { it("repeatedly updates room state while connected", async () => {
await connect(call, messaging); await connect(call, widgetApi);
await waitFor( await waitFor(
() => () =>
expect(client.sendStateEvent).toHaveBeenLastCalledWith( expect(client.sendStateEvent).toHaveBeenLastCalledWith(
@@ -345,7 +347,7 @@ describe("JitsiCall", () => {
const onConnectionState = jest.fn(); const onConnectionState = jest.fn();
call.on(CallEvent.ConnectionState, onConnectionState); call.on(CallEvent.ConnectionState, onConnectionState);
await connect(call, messaging); await connect(call, widgetApi);
await call.disconnect(); await call.disconnect();
expect(onConnectionState.mock.calls).toEqual([ expect(onConnectionState.mock.calls).toEqual([
[ConnectionState.Connected, ConnectionState.Disconnected], [ConnectionState.Connected, ConnectionState.Disconnected],
@@ -360,7 +362,7 @@ describe("JitsiCall", () => {
const onParticipants = jest.fn(); const onParticipants = jest.fn();
call.on(CallEvent.Participants, onParticipants); call.on(CallEvent.Participants, onParticipants);
await connect(call, messaging); await connect(call, widgetApi);
await call.disconnect(); await call.disconnect();
expect(onParticipants.mock.calls).toEqual([ expect(onParticipants.mock.calls).toEqual([
[new Map([[alice, new Set(["alices_device"])]]), new Map()], [new Map([[alice, new Set(["alices_device"])]]), new Map()],
@@ -373,11 +375,11 @@ describe("JitsiCall", () => {
}); });
it("switches to spotlight layout when the widget becomes a PiP", async () => { it("switches to spotlight layout when the widget becomes a PiP", async () => {
await connect(call, messaging); await connect(call, widgetApi);
ActiveWidgetStore.instance.emit(ActiveWidgetStoreEvent.Undock); ActiveWidgetStore.instance.emit(ActiveWidgetStoreEvent.Undock);
expect(messaging.transport.send).toHaveBeenCalledWith(ElementWidgetActions.SpotlightLayout, {}); expect(widgetApi.transport.send).toHaveBeenCalledWith(ElementWidgetActions.SpotlightLayout, {});
ActiveWidgetStore.instance.emit(ActiveWidgetStoreEvent.Dock); ActiveWidgetStore.instance.emit(ActiveWidgetStoreEvent.Dock);
expect(messaging.transport.send).toHaveBeenCalledWith(ElementWidgetActions.TileLayout, {}); expect(widgetApi.transport.send).toHaveBeenCalledWith(ElementWidgetActions.TileLayout, {});
}); });
describe("clean", () => { describe("clean", () => {
@@ -417,7 +419,7 @@ describe("JitsiCall", () => {
}); });
it("doesn't clean up valid devices", async () => { it("doesn't clean up valid devices", async () => {
await connect(call, messaging); await connect(call, widgetApi);
await client.sendStateEvent( await client.sendStateEvent(
room.roomId, room.roomId,
JitsiCall.MEMBER_EVENT_TYPE, JitsiCall.MEMBER_EVENT_TYPE,
@@ -796,7 +798,8 @@ describe("ElementCall", () => {
describe("instance in a non-video room", () => { describe("instance in a non-video room", () => {
let call: ElementCall; let call: ElementCall;
let widget: Widget; let widget: Widget;
let messaging: Mocked<ClientWidgetApi>; let messaging: Mocked<WidgetMessaging>;
let widgetApi: Mocked<ClientWidgetApi>;
beforeEach(async () => { beforeEach(async () => {
jest.useFakeTimers(); jest.useFakeTimers();
@@ -807,81 +810,128 @@ describe("ElementCall", () => {
if (maybeCall === null) throw new Error("Failed to create call"); if (maybeCall === null) throw new Error("Failed to create call");
call = maybeCall; call = maybeCall;
({ widget, messaging } = setUpWidget(call)); ({ widget, messaging, widgetApi } = setUpWidget(call));
}); });
afterEach(() => cleanUpCallAndWidget(call, widget)); afterEach(() => cleanUpCallAndWidget(call, widget));
// TODO refactor initial device configuration to use the EW settings. // TODO refactor initial device configuration to use the EW settings.
// Add tests for passing EW device configuration to the widget. // Add tests for passing EW device configuration to the widget.
it("waits for messaging when starting", async () => {
it("waits for messaging when starting (widget API available immediately)", async () => {
// Temporarily remove the messaging to simulate connecting while the // Temporarily remove the messaging to simulate connecting while the
// widget is still initializing // widget is still initializing
WidgetMessagingStore.instance.stopMessaging(widget, room.roomId); WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
const startup = call.start({}); const startup = call.start({});
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, messaging); WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, messaging);
await startup; await startup;
await connect(call, messaging, false); await connect(call, widgetApi, false);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
}); });
it("waits for messaging when starting (widget API started asynchronously)", async () => {
// Temporarily remove the messaging to simulate connecting while the
// widget is still initializing
WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
// Also remove the widget API from said messaging until later
let storedWidgetApi: Mocked<ClientWidgetApi> | null = null;
Object.defineProperty(messaging, "widgetApi", {
get() {
return storedWidgetApi;
},
});
expect(call.connectionState).toBe(ConnectionState.Disconnected);
const startup = call.start({});
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, messaging);
// Yield the event loop to the Call.start promise, then simulate the
// widget API being started asynchronously
await Promise.resolve();
storedWidgetApi = widgetApi;
messaging.emit(WidgetMessagingEvent.Start, storedWidgetApi);
await startup;
await connect(call, widgetApi, false);
expect(call.connectionState).toBe(ConnectionState.Connected);
});
it("waits for messaging when starting (even if messaging is replaced during startup)", async () => {
const firstMessaging = messaging;
// Entirely remove the widget API from this first messaging
Object.defineProperty(firstMessaging, "widgetApi", {
get() {
return null;
},
});
expect(call.connectionState).toBe(ConnectionState.Disconnected);
const startup = call.start({});
// Now imagine that the messaging gets abandoned and replaced by an
// entirely new messaging object
({ widget, messaging, widgetApi } = setUpWidget(call));
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, messaging);
await startup;
await connect(call, widgetApi, false);
expect(call.connectionState).toBe(ConnectionState.Connected);
expect(firstMessaging.listenerCount(WidgetMessagingEvent.Start)).toBe(0); // No leaks
});
it("fails to disconnect if the widget returns an error", async () => { it("fails to disconnect if the widget returns an error", async () => {
await connect(call, messaging); await connect(call, widgetApi);
mocked(messaging.transport).send.mockRejectedValue(new Error("never!!1! >:(")); mocked(widgetApi.transport).send.mockRejectedValue(new Error("never!!1! >:("));
await expect(call.disconnect()).rejects.toBeDefined(); await expect(call.disconnect()).rejects.toBeDefined();
}); });
it("handles remote disconnection", async () => { it("handles remote disconnection", async () => {
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
messaging.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {})); widgetApi.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {}));
messaging.emit(`action:${ElementWidgetActions.Close}`, new CustomEvent("widgetapirequest", {})); widgetApi.emit(`action:${ElementWidgetActions.Close}`, new CustomEvent("widgetapirequest", {}));
await waitFor(() => expect(call.connectionState).toBe(ConnectionState.Disconnected), { interval: 5 }); await waitFor(() => expect(call.connectionState).toBe(ConnectionState.Disconnected), { interval: 5 });
}); });
it("disconnects", async () => { it("disconnects", async () => {
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
await disconnect(call, messaging); await disconnect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
}); });
it("disconnects when we leave the room", async () => { it("disconnects when we leave the room", async () => {
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
room.emit(RoomEvent.MyMembership, room, KnownMembership.Leave); room.emit(RoomEvent.MyMembership, room, KnownMembership.Leave);
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
}); });
it("remains connected if we stay in the room", async () => { it("remains connected if we stay in the room", async () => {
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
room.emit(RoomEvent.MyMembership, room, KnownMembership.Join); room.emit(RoomEvent.MyMembership, room, KnownMembership.Join);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
}); });
it("disconnects if the widget dies", async () => { it("disconnects if the widget dies", async () => {
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
WidgetMessagingStore.instance.stopMessaging(widget, room.roomId); WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
}); });
it("acknowledges mute_device widget action", async () => { it("acknowledges mute_device widget action", async () => {
await connect(call, messaging); await connect(call, widgetApi);
const preventDefault = jest.fn(); const preventDefault = jest.fn();
const mockEv = { const mockEv = {
preventDefault, preventDefault,
detail: { video_enabled: false }, detail: { video_enabled: false },
}; };
messaging.emit(`action:${ElementWidgetActions.DeviceMute}`, mockEv); widgetApi.emit(`action:${ElementWidgetActions.DeviceMute}`, mockEv);
expect(messaging.transport.reply).toHaveBeenCalledWith({ video_enabled: false }, {}); expect(widgetApi.transport.reply).toHaveBeenCalledWith({ video_enabled: false }, {});
expect(preventDefault).toHaveBeenCalled(); expect(preventDefault).toHaveBeenCalled();
}); });
@@ -890,8 +940,8 @@ describe("ElementCall", () => {
const onConnectionState = jest.fn(); const onConnectionState = jest.fn();
call.on(CallEvent.ConnectionState, onConnectionState); call.on(CallEvent.ConnectionState, onConnectionState);
await connect(call, messaging); await connect(call, widgetApi);
await disconnect(call, messaging); await disconnect(call, widgetApi);
expect(onConnectionState.mock.calls).toEqual([ expect(onConnectionState.mock.calls).toEqual([
[ConnectionState.Connected, ConnectionState.Disconnected], [ConnectionState.Connected, ConnectionState.Disconnected],
[ConnectionState.Disconnecting, ConnectionState.Connected], [ConnectionState.Disconnecting, ConnectionState.Connected],
@@ -913,10 +963,10 @@ describe("ElementCall", () => {
}); });
it("ends the call immediately if the session ended", async () => { it("ends the call immediately if the session ended", async () => {
await connect(call, messaging); await connect(call, widgetApi);
const onDestroy = jest.fn(); const onDestroy = jest.fn();
call.on(CallEvent.Destroy, onDestroy); call.on(CallEvent.Destroy, onDestroy);
await disconnect(call, messaging); await disconnect(call, widgetApi);
// this will be called automatically // this will be called automatically
// disconnect -> widget sends state event -> session manager notices no-one left // disconnect -> widget sends state event -> session manager notices no-one left
client.matrixRTC.emit( client.matrixRTC.emit(
@@ -957,7 +1007,7 @@ describe("ElementCall", () => {
describe("instance in a video room", () => { describe("instance in a video room", () => {
let call: ElementCall; let call: ElementCall;
let widget: Widget; let widget: Widget;
let messaging: Mocked<ClientWidgetApi>; let widgetApi: Mocked<ClientWidgetApi>;
beforeEach(async () => { beforeEach(async () => {
jest.useFakeTimers(); jest.useFakeTimers();
@@ -970,29 +1020,29 @@ describe("ElementCall", () => {
if (maybeCall === null) throw new Error("Failed to create call"); if (maybeCall === null) throw new Error("Failed to create call");
call = maybeCall; call = maybeCall;
({ widget, messaging } = setUpWidget(call)); ({ widget, widgetApi } = setUpWidget(call));
}); });
afterEach(() => cleanUpCallAndWidget(call, widget)); afterEach(() => cleanUpCallAndWidget(call, widget));
it("doesn't end the call when the last participant leaves", async () => { it("doesn't end the call when the last participant leaves", async () => {
await connect(call, messaging); await connect(call, widgetApi);
const onDestroy = jest.fn(); const onDestroy = jest.fn();
call.on(CallEvent.Destroy, onDestroy); call.on(CallEvent.Destroy, onDestroy);
await disconnect(call, messaging); await disconnect(call, widgetApi);
expect(onDestroy).not.toHaveBeenCalled(); expect(onDestroy).not.toHaveBeenCalled();
call.off(CallEvent.Destroy, onDestroy); call.off(CallEvent.Destroy, onDestroy);
}); });
it("handles remote disconnection and reconnect right after", async () => { it("handles remote disconnection and reconnect right after", async () => {
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging); await connect(call, widgetApi);
expect(call.connectionState).toBe(ConnectionState.Connected); expect(call.connectionState).toBe(ConnectionState.Connected);
messaging.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {})); widgetApi.emit(`action:${ElementWidgetActions.HangupCall}`, new CustomEvent("widgetapirequest", {}));
// We should now be able to reconnect without manually starting the widget // We should now be able to reconnect without manually starting the widget
expect(call.connectionState).toBe(ConnectionState.Disconnected); expect(call.connectionState).toBe(ConnectionState.Disconnected);
await connect(call, messaging, false); await connect(call, widgetApi, false);
await waitFor(() => expect(call.connectionState).toBe(ConnectionState.Connected), { interval: 5 }); await waitFor(() => expect(call.connectionState).toBe(ConnectionState.Connected), { interval: 5 });
}); });
}); });

4
test/unit-tests/stores/room-list/algorithms/Algorithm-test.ts
View File

@@ -12,7 +12,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
import { Widget } from "matrix-widget-api"; import { Widget } from "matrix-widget-api";
import type { MatrixClient } from "matrix-js-sdk/src/matrix"; import type { MatrixClient } from "matrix-js-sdk/src/matrix";
import type { ClientWidgetApi } from "matrix-widget-api";
import { import {
stubClient, stubClient,
setupAsyncStoreWithClient, setupAsyncStoreWithClient,
@@ -29,6 +28,7 @@ import { Algorithm } from "../../../../../src/stores/room-list/algorithms/Algori
import { CallStore } from "../../../../../src/stores/CallStore"; import { CallStore } from "../../../../../src/stores/CallStore";
import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore"; import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
import { ConnectionState } from "../../../../../src/models/Call"; import { ConnectionState } from "../../../../../src/models/Call";
import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
describe("Algorithm", () => { describe("Algorithm", () => {
useMockedCalls(); useMockedCalls();
@@ -89,7 +89,7 @@ describe("Algorithm", () => {
const widget = new Widget(call.widget); const widget = new Widget(call.widget);
WidgetMessagingStore.instance.storeMessaging(widget, roomWithCall.roomId, { WidgetMessagingStore.instance.storeMessaging(widget, roomWithCall.roomId, {
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi); } as unknown as WidgetMessaging);
// End of setup // End of setup

10
test/unit-tests/stores/widgets/StopGapWidgetDriver-test.ts → test/unit-tests/stores/widgets/ElementWidgetDriver-test.ts
View File

@@ -36,7 +36,7 @@ import {
import { SdkContextClass } from "../../../../src/contexts/SDKContext"; import { SdkContextClass } from "../../../../src/contexts/SDKContext";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { StopGapWidgetDriver } from "../../../../src/stores/widgets/StopGapWidgetDriver"; import { ElementWidgetDriver } from "../../../../src/stores/widgets/ElementWidgetDriver";
import { mkEvent, stubClient } from "../../../test-utils"; import { mkEvent, stubClient } from "../../../test-utils";
import { ModuleRunner } from "../../../../src/modules/ModuleRunner"; import { ModuleRunner } from "../../../../src/modules/ModuleRunner";
import dis from "../../../../src/dispatcher/dispatcher"; import dis from "../../../../src/dispatcher/dispatcher";
@@ -44,12 +44,11 @@ import Modal from "../../../../src/Modal";
import SettingsStore from "../../../../src/settings/SettingsStore"; import SettingsStore from "../../../../src/settings/SettingsStore";
import { WidgetType } from "../../../../src/widgets/WidgetType.ts"; import { WidgetType } from "../../../../src/widgets/WidgetType.ts";
describe("StopGapWidgetDriver", () => { describe("ElementWidgetDriver", () => {
let client: MockedObject<MatrixClient>; let client: MockedObject<MatrixClient>;
const mkDefaultDriver = (): WidgetDriver => const mkDefaultDriver = (): WidgetDriver =>
new StopGapWidgetDriver( new ElementWidgetDriver(
[],
new Widget({ new Widget({
id: "test", id: "test",
creatorUserId: "@alice:example.org", creatorUserId: "@alice:example.org",
@@ -73,8 +72,7 @@ describe("StopGapWidgetDriver", () => {
}); });
it("auto-approves capabilities of virtual Element Call widgets", async () => { it("auto-approves capabilities of virtual Element Call widgets", async () => {
const driver = new StopGapWidgetDriver( const driver = new ElementWidgetDriver(
[],
new Widget({ new Widget({
id: "group_call", id: "group_call",
creatorUserId: "@alice:example.org", creatorUserId: "@alice:example.org",

405
test/unit-tests/stores/widgets/StopGapWidget-test.ts
View File

@@ -1,405 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { mocked, type MockedFunction, type MockedObject } from "jest-mock";
import { findLast, last } from "lodash";
import {
MatrixEvent,
type MatrixClient,
ClientEvent,
type EventTimeline,
EventType,
MatrixEventEvent,
RoomStateEvent,
type RoomState,
} from "matrix-js-sdk/src/matrix";
import { ClientWidgetApi, WidgetApiFromWidgetAction } from "matrix-widget-api";
import { waitFor } from "jest-matrix-react";
import { stubClient, mkRoom, mkEvent } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { StopGapWidget } from "../../../../src/stores/widgets/StopGapWidget";
import ActiveWidgetStore from "../../../../src/stores/ActiveWidgetStore";
import SettingsStore from "../../../../src/settings/SettingsStore";
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../src/dispatcher/actions";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
import { UPDATE_EVENT } from "../../../../src/stores/AsyncStore";
jest.mock("matrix-widget-api", () => ({
...jest.requireActual("matrix-widget-api"),
ClientWidgetApi: (jest.createMockFromModule("matrix-widget-api") as any).ClientWidgetApi,
}));
describe("StopGapWidget", () => {
let client: MockedObject<MatrixClient>;
let widget: StopGapWidget;
let messaging: MockedObject<ClientWidgetApi>;
beforeEach(() => {
stubClient();
client = mocked(MatrixClientPeg.safeGet());
widget = new StopGapWidget({
app: {
id: "test",
creatorUserId: "@alice:example.org",
type: "example",
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url&theme=$org.matrix.msc2873.client_theme",
roomId: "!1:example.org",
},
room: mkRoom(client, "!1:example.org"),
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
});
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.startMessaging(null as unknown as HTMLIFrameElement);
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
messaging.feedStateUpdate.mockResolvedValue();
});
afterEach(() => {
widget.stopMessaging();
});
it("should replace parameters in widget url template", () => {
const originGetValue = SettingsStore.getValue;
const spy = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
if (setting === "theme") return "my-theme-for-testing";
return originGetValue(setting);
});
expect(widget.embedUrl).toBe(
"https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&theme=my-theme-for-testing&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
);
spy.mockClear();
});
it("feeds incoming to-device messages to the widget", async () => {
const receivedToDevice = {
message: {
type: "org.example.foo",
sender: "@alice:example.org",
content: {
hello: "world",
},
},
encryptionInfo: null,
};
client.emit(ClientEvent.ReceivedToDeviceMessage, receivedToDevice);
await Promise.resolve(); // flush promises
expect(messaging.feedToDevice).toHaveBeenCalledWith(receivedToDevice.message, false);
});
it("feeds incoming encrypted to-device messages to the widget", async () => {
const receivedToDevice = {
message: {
type: "org.example.foo",
sender: "@alice:example.org",
content: {
hello: "world",
},
},
encryptionInfo: {
senderVerified: false,
sender: "@alice:example.org",
senderCurve25519KeyBase64: "",
senderDevice: "ABCDEFGHI",
},
};
client.emit(ClientEvent.ReceivedToDeviceMessage, receivedToDevice);
await Promise.resolve(); // flush promises
expect(messaging.feedToDevice).toHaveBeenCalledWith(receivedToDevice.message, true);
});
it("feeds incoming state updates to the widget", () => {
const event = mkEvent({
event: true,
type: "org.example.foo",
skey: "",
user: "@alice:example.org",
content: { hello: "world" },
room: "!1:example.org",
});
client.emit(RoomStateEvent.Events, event, {} as unknown as RoomState, null);
expect(messaging.feedStateUpdate).toHaveBeenCalledWith(event.getEffectiveEvent());
});
it("informs widget of theme changes", () => {
let theme = "light";
const settingsSpy = jest
.spyOn(SettingsStore, "getValue")
.mockImplementation((name) => (name === "theme" ? theme : null));
try {
// Indicate that the widget is ready
findLast(messaging.once.mock.calls, ([eventName]) => eventName === "ready")![1]();
// Now change the theme
theme = "dark";
defaultDispatcher.dispatch({ action: Action.RecheckTheme }, true);
expect(messaging.updateTheme).toHaveBeenLastCalledWith({ name: "dark" });
} finally {
settingsSpy.mockRestore();
}
});
describe("feed event", () => {
let event1: MatrixEvent;
let event2: MatrixEvent;
beforeEach(() => {
event1 = mkEvent({
event: true,
id: "$event-id1",
type: "org.example.foo",
user: "@alice:example.org",
content: { hello: "world" },
room: "!1:example.org",
});
event2 = mkEvent({
event: true,
id: "$event-id2",
type: "org.example.foo",
user: "@alice:example.org",
content: { hello: "world" },
room: "!1:example.org",
});
const room = mkRoom(client, "!1:example.org");
client.getRoom.mockImplementation((roomId) => (roomId === "!1:example.org" ? room : null));
room.getLiveTimeline.mockReturnValue({
getEvents: (): MatrixEvent[] => [event1, event2],
} as unknown as EventTimeline);
messaging.feedEvent.mockResolvedValue();
});
it("feeds incoming event to the widget", async () => {
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent());
client.emit(ClientEvent.Event, event2);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent());
});
it("should not feed incoming event to the widget if seen already", async () => {
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent());
client.emit(ClientEvent.Event, event2);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent());
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent());
});
it("feeds decrypted events asynchronously", async () => {
const event1Encrypted = new MatrixEvent({
event_id: event1.getId(),
type: EventType.RoomMessageEncrypted,
sender: event1.sender?.userId,
room_id: event1.getRoomId(),
content: {},
});
const decryptingSpy1 = jest.spyOn(event1Encrypted, "isBeingDecrypted").mockReturnValue(true);
client.emit(ClientEvent.Event, event1Encrypted);
const event2Encrypted = new MatrixEvent({
event_id: event2.getId(),
type: EventType.RoomMessageEncrypted,
sender: event2.sender?.userId,
room_id: event2.getRoomId(),
content: {},
});
const decryptingSpy2 = jest.spyOn(event2Encrypted, "isBeingDecrypted").mockReturnValue(true);
client.emit(ClientEvent.Event, event2Encrypted);
expect(messaging.feedEvent).not.toHaveBeenCalled();
// "Decrypt" the events, but in reverse order; first event 2…
event2Encrypted.event.type = event2.getType();
event2Encrypted.event.content = event2.getContent();
decryptingSpy2.mockReturnValue(false);
client.emit(MatrixEventEvent.Decrypted, event2Encrypted);
expect(messaging.feedEvent).toHaveBeenCalledTimes(1);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2Encrypted.getEffectiveEvent());
// …then event 1
event1Encrypted.event.type = event1.getType();
event1Encrypted.event.content = event1.getContent();
decryptingSpy1.mockReturnValue(false);
client.emit(MatrixEventEvent.Decrypted, event1Encrypted);
// The events should be fed in that same order so that event 2
// doesn't have to be blocked on the decryption of event 1 (or
// worse, dropped)
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event1Encrypted.getEffectiveEvent());
});
it("should not feed incoming event if not in timeline", () => {
const event = mkEvent({
event: true,
id: "$event-id",
type: "org.example.foo",
user: "@alice:example.org",
content: {
hello: "world",
},
room: "!1:example.org",
});
client.emit(ClientEvent.Event, event);
expect(messaging.feedEvent).toHaveBeenCalledWith(event.getEffectiveEvent());
});
it("feeds incoming event that is not in timeline but relates to unknown parent to the widget", async () => {
const event = mkEvent({
event: true,
id: "$event-idRelation",
type: "org.example.foo",
user: "@alice:example.org",
content: {
"hello": "world",
"m.relates_to": {
event_id: "$unknown-parent",
rel_type: "m.reference",
},
},
room: "!1:example.org",
});
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent());
client.emit(ClientEvent.Event, event);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event.getEffectiveEvent());
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event.getEffectiveEvent());
});
});
});
describe("StopGapWidget with stickyPromise", () => {
let client: MockedObject<MatrixClient>;
let widget: StopGapWidget;
let messaging: MockedObject<ClientWidgetApi>;
beforeEach(() => {
stubClient();
client = mocked(MatrixClientPeg.safeGet());
});
afterEach(() => {
widget.stopMessaging();
});
it("should wait for the sticky promise to resolve before starting messaging", async () => {
jest.useFakeTimers();
const getStickyPromise = async () => {
return new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, 1000);
});
};
widget = new StopGapWidget({
app: {
id: "test",
creatorUserId: "@alice:example.org",
type: "example",
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url",
roomId: "!1:example.org",
},
room: mkRoom(client, "!1:example.org"),
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
stickyPromise: getStickyPromise,
});
const setPersistenceSpy = jest.spyOn(ActiveWidgetStore.instance, "setWidgetPersistence");
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.startMessaging(null as unknown as HTMLIFrameElement);
const emitSticky = async () => {
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
messaging?.hasCapability.mockReturnValue(true);
// messaging.transport.reply will be called but transport is undefined in this test environment
// This just makes sure the call doesn't throw
Object.defineProperty(messaging, "transport", { value: { reply: () => {} } });
messaging.on.mock.calls.find(([event, listener]) => {
if (event === `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`) {
listener({ preventDefault: () => {}, detail: { data: { value: true } } });
return true;
}
});
};
await emitSticky();
expect(setPersistenceSpy).not.toHaveBeenCalled();
// Advance the fake timer so that the sticky promise resolves
jest.runAllTimers();
// Use a real timer and wait for the next tick so the sticky promise can resolve
jest.useRealTimers();
waitFor(() => expect(setPersistenceSpy).toHaveBeenCalled(), { interval: 5 });
});
});
describe("StopGapWidget as an account widget", () => {
let widget: StopGapWidget;
let messaging: MockedObject<ClientWidgetApi>;
let getRoomId: MockedFunction<() => string | null>;
beforeEach(() => {
stubClient();
// I give up, getting the return type of spyOn right is hopeless
getRoomId = jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId") as unknown as MockedFunction<
() => string | null
>;
getRoomId.mockReturnValue("!1:example.org");
widget = new StopGapWidget({
app: {
id: "test",
creatorUserId: "@alice:example.org",
type: "example",
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url&theme=$org.matrix.msc2873.client_theme",
roomId: "!1:example.org",
},
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
});
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.startMessaging(null as unknown as HTMLIFrameElement);
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
});
afterEach(() => {
widget.stopMessaging();
getRoomId.mockRestore();
});
it("updates viewed room", () => {
expect(messaging.setViewedRoomId).toHaveBeenCalledTimes(1);
expect(messaging.setViewedRoomId).toHaveBeenLastCalledWith("!1:example.org");
getRoomId.mockReturnValue("!2:example.org");
SdkContextClass.instance.roomViewStore.emit(UPDATE_EVENT);
expect(messaging.setViewedRoomId).toHaveBeenCalledTimes(2);
expect(messaging.setViewedRoomId).toHaveBeenLastCalledWith("!2:example.org");
});
});

689
test/unit-tests/stores/widgets/WidgetMessaging-test.ts Normal file
View File

@@ -0,0 +1,689 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { mocked, type MockedFunction, type MockedObject } from "jest-mock";
import { findLast, last } from "lodash";
import {
MatrixEvent,
type MatrixClient,
ClientEvent,
type EventTimeline,
EventType,
MatrixEventEvent,
RoomStateEvent,
type RoomState,
type Room,
} from "matrix-js-sdk/src/matrix";
import {
ClientWidgetApi,
type IModalWidgetOpenRequest,
type IStickerActionRequest,
type IStickyActionRequest,
type IWidgetApiRequest,
MatrixCapabilities,
WidgetApiDirection,
WidgetApiFromWidgetAction,
} from "matrix-widget-api";
import { waitFor } from "jest-matrix-react";
import { stubClient, mkRoom, mkEvent } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { ElementWidget, WidgetMessaging } from "../../../../src/stores/widgets/WidgetMessaging";
import ActiveWidgetStore from "../../../../src/stores/ActiveWidgetStore";
import SettingsStore from "../../../../src/settings/SettingsStore";
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../src/dispatcher/actions";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
import { UPDATE_EVENT } from "../../../../src/stores/AsyncStore";
import { type IApp } from "../../../../src/utils/WidgetUtils-types";
import { ModalWidgetStore } from "../../../../src/stores/ModalWidgetStore";
import { ElementWidgetActions, type IViewRoomApiRequest } from "../../../../src/stores/widgets/ElementWidgetActions";
import { ElementWidgetCapabilities } from "../../../../src/stores/widgets/ElementWidgetCapabilities";
import { WidgetType } from "../../../../src/widgets/WidgetType";
import { IntegrationManagers } from "../../../../src/integrations/IntegrationManagers";
import { type IntegrationManagerInstance } from "../../../../src/integrations/IntegrationManagerInstance";
jest.mock("matrix-widget-api", () => ({
...jest.requireActual("matrix-widget-api"),
ClientWidgetApi: (jest.createMockFromModule("matrix-widget-api") as any).ClientWidgetApi,
}));
const originGetValue = SettingsStore.getValue;
describe("WidgetMessaging", () => {
let client: MockedObject<MatrixClient>;
let widget: WidgetMessaging;
let messaging: MockedObject<ClientWidgetApi>;
beforeEach(() => {
stubClient();
client = mocked(MatrixClientPeg.safeGet());
const app: IApp = {
id: "test",
creatorUserId: "@alice:example.org",
type: "example",
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url&theme=$org.matrix.msc2873.client_theme",
roomId: "!1:example.org",
};
widget = new WidgetMessaging(new ElementWidget(app), {
app,
room: mkRoom(client, "!1:example.org"),
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
});
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.start(null as unknown as HTMLIFrameElement);
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
messaging.feedStateUpdate.mockResolvedValue();
});
afterEach(() => {
widget.stop();
});
it("should replace parameters in widget url template", () => {
const spy = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
if (setting === "theme") return "my-theme-for-testing";
return originGetValue(setting);
});
expect(widget.embedUrl).toBe(
"https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&theme=my-theme-for-testing&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
);
spy.mockClear();
});
it("should replace parameters in widget url template for popout", () => {
const spy = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
if (setting === "theme") return "my-theme-for-testing";
return originGetValue(setting);
});
expect(widget.popoutUrl).toBe(
"https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&theme=my-theme-for-testing",
);
spy.mockClear();
});
it("feeds incoming to-device messages to the widget", async () => {
const receivedToDevice = {
message: {
type: "org.example.foo",
sender: "@alice:example.org",
content: {
hello: "world",
},
},
encryptionInfo: null,
};
client.emit(ClientEvent.ReceivedToDeviceMessage, receivedToDevice);
await Promise.resolve(); // flush promises
expect(messaging.feedToDevice).toHaveBeenCalledWith(receivedToDevice.message, false);
});
it("feeds incoming encrypted to-device messages to the widget", async () => {
const receivedToDevice = {
message: {
type: "org.example.foo",
sender: "@alice:example.org",
content: {
hello: "world",
},
},
encryptionInfo: {
senderVerified: false,
sender: "@alice:example.org",
senderCurve25519KeyBase64: "",
senderDevice: "ABCDEFGHI",
},
};
client.emit(ClientEvent.ReceivedToDeviceMessage, receivedToDevice);
await Promise.resolve(); // flush promises
expect(messaging.feedToDevice).toHaveBeenCalledWith(receivedToDevice.message, true);
});
it("feeds incoming state updates to the widget", () => {
const event = mkEvent({
event: true,
type: "org.example.foo",
skey: "",
user: "@alice:example.org",
content: { hello: "world" },
room: "!1:example.org",
});
client.emit(RoomStateEvent.Events, event, {} as unknown as RoomState, null);
expect(messaging.feedStateUpdate).toHaveBeenCalledWith(event.getEffectiveEvent());
});
it("informs widget of theme changes", () => {
let theme = "light";
const settingsSpy = jest
.spyOn(SettingsStore, "getValue")
.mockImplementation((name) => (name === "theme" ? theme : null));
try {
// Indicate that the widget is ready
findLast(messaging.once.mock.calls, ([eventName]) => eventName === "ready")![1]();
// Now change the theme
theme = "dark";
defaultDispatcher.dispatch({ action: Action.RecheckTheme }, true);
expect(messaging.updateTheme).toHaveBeenLastCalledWith({ name: "dark" });
} finally {
settingsSpy.mockRestore();
}
});
describe("feed event", () => {
let event1: MatrixEvent;
let event2: MatrixEvent;
beforeEach(() => {
event1 = mkEvent({
event: true,
id: "$event-id1",
type: "org.example.foo",
user: "@alice:example.org",
content: { hello: "world" },
room: "!1:example.org",
});
event2 = mkEvent({
event: true,
id: "$event-id2",
type: "org.example.foo",
user: "@alice:example.org",
content: { hello: "world" },
room: "!1:example.org",
});
const room = mkRoom(client, "!1:example.org");
client.getRoom.mockImplementation((roomId) => (roomId === "!1:example.org" ? room : null));
room.getLiveTimeline.mockReturnValue({
getEvents: (): MatrixEvent[] => [event1, event2],
} as unknown as EventTimeline);
messaging.feedEvent.mockResolvedValue();
});
it("feeds incoming event to the widget", async () => {
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent());
client.emit(ClientEvent.Event, event2);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent());
});
it("should not feed incoming event to the widget if seen already", async () => {
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent());
client.emit(ClientEvent.Event, event2);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent());
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent());
});
it("feeds decrypted events asynchronously", async () => {
const event1Encrypted = new MatrixEvent({
event_id: event1.getId(),
type: EventType.RoomMessageEncrypted,
sender: event1.sender?.userId,
room_id: event1.getRoomId(),
content: {},
});
const decryptingSpy1 = jest.spyOn(event1Encrypted, "isBeingDecrypted").mockReturnValue(true);
client.emit(ClientEvent.Event, event1Encrypted);
const event2Encrypted = new MatrixEvent({
event_id: event2.getId(),
type: EventType.RoomMessageEncrypted,
sender: event2.sender?.userId,
room_id: event2.getRoomId(),
content: {},
});
const decryptingSpy2 = jest.spyOn(event2Encrypted, "isBeingDecrypted").mockReturnValue(true);
client.emit(ClientEvent.Event, event2Encrypted);
expect(messaging.feedEvent).not.toHaveBeenCalled();
// "Decrypt" the events, but in reverse order; first event 2…
event2Encrypted.event.type = event2.getType();
event2Encrypted.event.content = event2.getContent();
decryptingSpy2.mockReturnValue(false);
client.emit(MatrixEventEvent.Decrypted, event2Encrypted);
expect(messaging.feedEvent).toHaveBeenCalledTimes(1);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2Encrypted.getEffectiveEvent());
// …then event 1
event1Encrypted.event.type = event1.getType();
event1Encrypted.event.content = event1.getContent();
decryptingSpy1.mockReturnValue(false);
client.emit(MatrixEventEvent.Decrypted, event1Encrypted);
// The events should be fed in that same order so that event 2
// doesn't have to be blocked on the decryption of event 1 (or
// worse, dropped)
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event1Encrypted.getEffectiveEvent());
});
it("should not feed incoming event if not in timeline", () => {
const event = mkEvent({
event: true,
id: "$event-id",
type: "org.example.foo",
user: "@alice:example.org",
content: {
hello: "world",
},
room: "!1:example.org",
});
client.emit(ClientEvent.Event, event);
expect(messaging.feedEvent).toHaveBeenCalledWith(event.getEffectiveEvent());
});
it("feeds incoming event that is not in timeline but relates to unknown parent to the widget", async () => {
const event = mkEvent({
event: true,
id: "$event-idRelation",
type: "org.example.foo",
user: "@alice:example.org",
content: {
"hello": "world",
"m.relates_to": {
event_id: "$unknown-parent",
rel_type: "m.reference",
},
},
room: "!1:example.org",
});
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent());
client.emit(ClientEvent.Event, event);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event.getEffectiveEvent());
client.emit(ClientEvent.Event, event1);
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event.getEffectiveEvent());
});
});
});
describe("WidgetMessaging with stickyPromise", () => {
let client: MockedObject<MatrixClient>;
let widget: WidgetMessaging;
let messaging: MockedObject<ClientWidgetApi>;
beforeEach(() => {
stubClient();
client = mocked(MatrixClientPeg.safeGet());
});
afterEach(() => {
widget.stop();
});
it("should wait for the sticky promise to resolve before starting messaging", async () => {
jest.useFakeTimers();
const getStickyPromise = async () => {
return new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, 1000);
});
};
const app: IApp = {
id: "test",
creatorUserId: "@alice:example.org",
type: "example",
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url",
roomId: "!1:example.org",
};
widget = new WidgetMessaging(new ElementWidget(app), {
app,
room: mkRoom(client, "!1:example.org"),
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
stickyPromise: getStickyPromise,
});
const setPersistenceSpy = jest.spyOn(ActiveWidgetStore.instance, "setWidgetPersistence");
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.start(null as unknown as HTMLIFrameElement);
const emitSticky = async () => {
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
messaging?.hasCapability.mockReturnValue(true);
// messaging.transport.reply will be called but transport is undefined in this test environment
// This just makes sure the call doesn't throw
Object.defineProperty(messaging, "transport", { value: { reply: () => {} } });
messaging.on.mock.calls.find(([event, listener]) => {
if (event === `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`) {
listener({ preventDefault: () => {}, detail: { data: { value: true } } });
return true;
}
});
};
await emitSticky();
expect(setPersistenceSpy).not.toHaveBeenCalled();
// Advance the fake timer so that the sticky promise resolves
jest.runAllTimers();
// Use a real timer and wait for the next tick so the sticky promise can resolve
jest.useRealTimers();
waitFor(() => expect(setPersistenceSpy).toHaveBeenCalled(), { interval: 5 });
});
});
describe("WidgetMessaging as an account widget", () => {
let widget: WidgetMessaging;
let messaging: MockedObject<ClientWidgetApi>;
let getRoomId: MockedFunction<() => string | null>;
beforeEach(() => {
stubClient();
// I give up, getting the return type of spyOn right is hopeless
getRoomId = jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId") as unknown as MockedFunction<
() => string | null
>;
getRoomId.mockReturnValue("!1:example.org");
const app: IApp = {
id: "test",
creatorUserId: "@alice:example.org",
type: "example",
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url&theme=$org.matrix.msc2873.client_theme",
roomId: "!1:example.org",
};
widget = new WidgetMessaging(new ElementWidget(app), {
app,
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
});
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.start(null as unknown as HTMLIFrameElement);
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
});
afterEach(() => {
widget.stop();
getRoomId.mockRestore();
});
it("updates viewed room", () => {
expect(messaging.setViewedRoomId).toHaveBeenCalledTimes(1);
expect(messaging.setViewedRoomId).toHaveBeenLastCalledWith("!1:example.org");
getRoomId.mockReturnValue("!2:example.org");
SdkContextClass.instance.roomViewStore.emit(UPDATE_EVENT);
expect(messaging.setViewedRoomId).toHaveBeenCalledTimes(2);
expect(messaging.setViewedRoomId).toHaveBeenLastCalledWith("!2:example.org");
});
});
function createTransportEvent<T extends IWidgetApiRequest>(data: T["data"]): CustomEvent<T> {
// Not the complete CustomEvent but good nuff.
return {
preventDefault: () => {},
detail: {
action: WidgetApiFromWidgetAction.OpenModalWidget,
data: data,
api: WidgetApiDirection.FromWidget,
requestId: "12345",
widgetId: "test",
},
} as unknown as CustomEvent;
}
describe("WidgetMessaging action handling", () => {
let widget: WidgetMessaging;
let messaging: MockedObject<ClientWidgetApi>;
let actionFns: Record<string, (ev: any) => void>;
beforeEach(() => {
const client = stubClient();
const app: IApp = {
id: "test",
creatorUserId: "@alice:example.org",
type: "example",
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url&theme=$org.matrix.msc2873.client_theme",
roomId: "!1:example.org",
};
widget = new WidgetMessaging(new ElementWidget(app), {
app,
room: mkRoom(client, "!1:example.org"),
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
});
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.start(null as unknown as HTMLIFrameElement);
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
Object.defineProperty(messaging, "transport", { value: { reply: jest.fn() } });
actionFns = Object.fromEntries(messaging.on.mock.calls as any);
});
afterEach(() => {
widget.stop();
jest.resetAllMocks();
});
describe("open modal widget", () => {
beforeEach(() => {
// Trivial mock of ModalWidgetStore
let hasModal = false;
jest.spyOn(ModalWidgetStore.instance, "openModalWidget").mockImplementation(() => {
if (hasModal) {
throw Error("Modal already in view");
}
hasModal = true;
});
jest.spyOn(ModalWidgetStore.instance, "canOpenModalWidget").mockImplementation(() => !hasModal);
jest.spyOn(ModalWidgetStore.instance, "closeModalWidget").mockImplementation(() => {
if (!hasModal) {
throw Error("No modal in view");
}
hasModal = false;
});
});
it("handles an open modal request", () => {
const ev = createTransportEvent<IModalWidgetOpenRequest>({ type: "foo", url: "bar" });
actionFns[`action:${WidgetApiFromWidgetAction.OpenModalWidget}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {});
});
it("responds with an error if a modal is already open", () => {
const ev = createTransportEvent<IModalWidgetOpenRequest>({ type: "foo", url: "bar" });
actionFns[`action:${WidgetApiFromWidgetAction.OpenModalWidget}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {});
messaging.transport.reply.mockReset();
actionFns[`action:${WidgetApiFromWidgetAction.OpenModalWidget}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {
error: { message: "Unable to open modal at this time" },
});
});
});
describe("view room", () => {
afterEach(() => {
jest.resetAllMocks();
});
it("errors on invalid room", () => {
const ev = createTransportEvent<IViewRoomApiRequest>({ room_id: null } as any);
actionFns[`action:${ElementWidgetActions.ViewRoom}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {
error: { message: "Room ID not supplied." },
});
});
it("errors on missing permissions", () => {
const ev = createTransportEvent<IViewRoomApiRequest>({ room_id: "!foo:example.org" } as any);
actionFns[`action:${ElementWidgetActions.ViewRoom}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {
error: { message: "This widget does not have permission for this action (denied)." },
});
});
it("handles room change", async () => {
const ev = createTransportEvent<IViewRoomApiRequest>({ room_id: "!foo:example.org" } as any);
messaging.hasCapability.mockImplementation(
(capability) => capability === ElementWidgetCapabilities.CanChangeViewedRoom,
);
const dispatch = (defaultDispatcher.dispatch = jest.fn());
actionFns[`action:${ElementWidgetActions.ViewRoom}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {});
expect(dispatch).toHaveBeenCalledWith({
action: "view_room",
metricsTrigger: "Widget",
room_id: "!foo:example.org",
});
});
});
describe("always on screen", () => {
let setWidgetPersistence: jest.SpyInstance<void, Parameters<ActiveWidgetStore["setWidgetPersistence"]>>;
beforeEach(() => {
setWidgetPersistence = jest.spyOn(ActiveWidgetStore.instance, "setWidgetPersistence");
});
it("does nothing if the widget does not have permission", () => {
const ev = createTransportEvent<IStickyActionRequest>({ value: true });
actionFns[`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`](ev);
// Currently there is no error response for this.
expect(messaging.transport.reply).not.toHaveBeenCalled();
});
it("handles setting a widget as sticky", () => {
messaging.hasCapability.mockImplementation(
(capability) => capability === MatrixCapabilities.AlwaysOnScreen,
);
const ev = createTransportEvent<IStickyActionRequest>({ value: true });
actionFns[`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {});
expect(setWidgetPersistence).toHaveBeenCalledTimes(1);
});
it("handles setting a widget as unsticky", () => {
messaging.hasCapability.mockImplementation(
(capability) => capability === MatrixCapabilities.AlwaysOnScreen,
);
const evOpen = createTransportEvent<IStickyActionRequest>({ value: true });
actionFns[`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`](evOpen);
expect(messaging.transport.reply).toHaveBeenCalledWith(evOpen.detail, {});
expect(setWidgetPersistence).toHaveBeenCalledTimes(1);
messaging.transport.reply.mockReset();
const evClose = createTransportEvent<IStickyActionRequest>({ value: false });
actionFns[`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`](evClose);
expect(messaging.transport.reply).toHaveBeenCalledWith(evClose.detail, {});
expect(setWidgetPersistence).toHaveBeenCalledTimes(2);
});
});
describe("send sticker", () => {
it("does nothing if the widget does not have permission", () => {
const ev = createTransportEvent<IStickerActionRequest>({ name: "foo", content: { url: "bar" } });
actionFns[`action:${WidgetApiFromWidgetAction.SendSticker}`](ev);
// Currently there is no error response for this.
expect(messaging.transport.reply).not.toHaveBeenCalled();
});
it("handles setting a widget as sticky", () => {
messaging.hasCapability.mockImplementation(
(capability) => capability === MatrixCapabilities.StickerSending,
);
const ev = createTransportEvent<IStickerActionRequest>({ name: "foo", content: { url: "bar" } });
const dispatch = (defaultDispatcher.dispatch = jest.fn());
actionFns[`action:${WidgetApiFromWidgetAction.SendSticker}`](ev);
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {});
expect(dispatch).toHaveBeenCalledWith({
action: "m.sticker",
data: { content: { url: "bar" }, name: "foo" },
widgetId: "test",
});
});
});
});
describe("WidgetMessaging action handling for stickerpicker", () => {
let widget: WidgetMessaging;
let messaging: MockedObject<ClientWidgetApi>;
let actionFns: Record<string, (ev: any) => void>;
let room: Room;
beforeEach(() => {
const client = mocked(stubClient());
room = mkRoom(client, "!1:example.org");
client.getRoom.mockImplementation((roomId) => (roomId === room.roomId ? room : null));
const getRoomId = jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId") as unknown as MockedFunction<
() => string | null
>;
getRoomId.mockReturnValue(room.roomId);
const app: IApp = {
id: "test",
creatorUserId: "@alice:example.org",
type: WidgetType.STICKERPICKER.preferred,
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url&theme=$org.matrix.msc2873.client_theme",
roomId: room.roomId,
};
widget = new WidgetMessaging(new ElementWidget(app), {
app,
room,
userId: "@alice:example.org",
creatorUserId: "@alice:example.org",
waitForIframeLoad: true,
userWidget: false,
});
// Start messaging without an iframe, since ClientWidgetApi is mocked
widget.start(null as unknown as HTMLIFrameElement);
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
Object.defineProperty(messaging, "transport", { value: { reply: jest.fn() } });
actionFns = Object.fromEntries(messaging.on.mock.calls as any);
});
afterEach(() => {
widget.stop();
jest.resetAllMocks();
});
describe("open integrations manager", () => {
let openIntegrationManager: jest.SpyInstance<void, Parameters<IntegrationManagerInstance["open"]>>;
beforeEach(() => {
// Trivial mock of ModalWidgetStore
openIntegrationManager = jest.fn();
const inst = IntegrationManagers.sharedInstance();
jest.spyOn(inst, "getPrimaryManager").mockImplementation(
() =>
({
open: openIntegrationManager,
}) as any,
);
});
it("open the integration manager", () => {
const ev = createTransportEvent<IWidgetApiRequest>({ integType: "my_integ_type", integId: "my_integ_id" });
const dispatch = (defaultDispatcher.dispatch = jest.fn());
actionFns[`action:${ElementWidgetActions.OpenIntegrationManager}`](ev);
expect(dispatch).toHaveBeenCalledWith({
action: "stickerpicker_close",
});
expect(messaging.transport.reply).toHaveBeenCalledWith(ev.detail, {});
expect(openIntegrationManager).toHaveBeenCalledWith(room, `type_my_integ_type`, "my_integ_id");
});
});
});

4
test/unit-tests/stores/widgets/WidgetPermissionStore-test.ts
View File

@@ -16,7 +16,7 @@ import { TestSdkContext } from "../../TestSdkContext";
import { type SettingLevel } from "../../../../src/settings/SettingLevel"; import { type SettingLevel } from "../../../../src/settings/SettingLevel";
import { SdkContextClass } from "../../../../src/contexts/SDKContext"; import { SdkContextClass } from "../../../../src/contexts/SDKContext";
import { stubClient } from "../../../test-utils"; import { stubClient } from "../../../test-utils";
import { StopGapWidgetDriver } from "../../../../src/stores/widgets/StopGapWidgetDriver"; import { ElementWidgetDriver } from "../../../../src/stores/widgets/ElementWidgetDriver";
import { WidgetType } from "../../../../src/widgets/WidgetType.ts"; import { WidgetType } from "../../../../src/widgets/WidgetType.ts";
jest.mock("../../../../src/settings/SettingsStore"); jest.mock("../../../../src/settings/SettingsStore");
@@ -93,7 +93,7 @@ describe("WidgetPermissionStore", () => {
expect(store2).toStrictEqual(store); expect(store2).toStrictEqual(store);
}); });
it("auto-approves OIDC requests for element-call", async () => { it("auto-approves OIDC requests for element-call", async () => {
new StopGapWidgetDriver([], elementCallWidget, WidgetKind.Room, true, roomId); new ElementWidgetDriver(elementCallWidget, WidgetKind.Room, true, roomId);
expect(widgetPermissionStore.getOIDCState(elementCallWidget, WidgetKind.Room, roomId)).toEqual( expect(widgetPermissionStore.getOIDCState(elementCallWidget, WidgetKind.Room, roomId)).toEqual(
OIDCState.Allowed, OIDCState.Allowed,
); );

5
test/unit-tests/toasts/IncomingCallToast-test.tsx
View File

@@ -21,7 +21,7 @@ import {
type IRoomTimelineData, type IRoomTimelineData,
type ISendEventResponse, type ISendEventResponse,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { type ClientWidgetApi, Widget } from "matrix-widget-api"; import { Widget } from "matrix-widget-api";
import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc"; import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
import { import {
@@ -47,6 +47,7 @@ import {
} from "../../../src/toasts/IncomingCallToast"; } from "../../../src/toasts/IncomingCallToast";
import LegacyCallHandler, { AudioID } from "../../../src/LegacyCallHandler"; import LegacyCallHandler, { AudioID } from "../../../src/LegacyCallHandler";
import { CallEvent } from "../../../src/models/Call"; import { CallEvent } from "../../../src/models/Call";
import { type WidgetMessaging } from "../../../src/stores/widgets/WidgetMessaging";
describe("IncomingCallToast", () => { describe("IncomingCallToast", () => {
useMockedCalls(); useMockedCalls();
@@ -113,7 +114,7 @@ describe("IncomingCallToast", () => {
widget = new Widget(call.widget); widget = new Widget(call.widget);
WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, { WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
stop: () => {}, stop: () => {},
} as unknown as ClientWidgetApi); } as unknown as WidgetMessaging);
jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap); jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
jest.spyOn(ToastStore, "sharedInstance").mockReturnValue(toastStore); jest.spyOn(ToastStore, "sharedInstance").mockReturnValue(toastStore);