mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-10 21:55:19 +00:00
Add a harness for Element Call embedded as a component
`pnpm dev:component` serves a page that stands in for a host application: it signs in twice against the development backend and shows two calls side by side, in resizable boxes, with furniture of its own around them. Two devices of one account, so a real call happens between the two components and anything Element Call keeps once per process rather than once per call shows itself. The host bridge is driven by hand and reports both directions in a log along the bottom, which is the first exercise the theme, hang-up and device-mute requests have had outside widget mode. Each pane can be unmounted and remounted to see what Element Call leaves behind, and there is a `position: fixed` dialog belonging to the host to see whether it covers the calls. The page uses none of Element Call's design tokens, so anything that looks styled outside a pane came from Element Call reaching out of its container. It reaches Element Call only through the component's public interface, which is how the exports missing from that interface came to light. Three things about the component build the harness turned up on the way, all too small to be worth their own commits: - It copied `public/` into `dist/`, including the developer's own gitignored config.json, into output we would publish. `publicDir: false`, as the embedded build already does. The sdk build has the same leak; untouched. - `pnpm lint:externals` now exists, which the build config already claimed it did. It reads the external list out of that config and fails if the source imports React, the Matrix SDK or LiveKit by a path the list does not name. Since the bundler silently ignores the pattern form of that option, an unnamed subpath is bundled with no warning at all — which is how a host would end up with a second React. - `lint:oxlint` ran over `src playwright`, so nothing in `component/` had ever been linted. Serving a page also meant the shared plugin list could no longer inject the app's HTML entry point unconditionally, so that is now optional — and off for the library build too, which never had an HTML page to inject it into.
This commit is contained in:
Valere
@@ -0,0 +1,103 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { NEVER, Subject } from "rxjs";
|
||||
|
||||
import {
|
||||
type DeviceMuteRequest,
|
||||
type DeviceMuteState,
|
||||
type HostBridge,
|
||||
type HostRequest,
|
||||
} from "../index";
|
||||
|
||||
/**
|
||||
* A host bridge that reports everything it is told and can be driven by hand,
|
||||
* so that the harness can watch both directions of the conversation between
|
||||
* Element Call and its host.
|
||||
*/
|
||||
export interface DevHostBridge extends HostBridge {
|
||||
/** Tells Element Call the host has changed theme. */
|
||||
requestTheme(name: string): void;
|
||||
/** Tells Element Call to leave the call. */
|
||||
requestHangUp(): void;
|
||||
/** Asks Element Call to change, and report back, its mute state. */
|
||||
requestDeviceMute(request: DeviceMuteRequest): void;
|
||||
}
|
||||
|
||||
export function createDevHostBridge(
|
||||
log: (message: string) => void,
|
||||
/** What the host does when Element Call asks to be closed. */
|
||||
onClose: () => void,
|
||||
): DevHostBridge {
|
||||
const themeChange$ = new Subject<HostRequest<{ name?: string }>>();
|
||||
const hangUp$ = new Subject<HostRequest<Record<string, never>>>();
|
||||
const deviceMute$ = new Subject<
|
||||
HostRequest<DeviceMuteRequest, DeviceMuteState>
|
||||
>();
|
||||
|
||||
const ask = <Data, Reply>(
|
||||
subject: Subject<HostRequest<Data, Reply>>,
|
||||
name: string,
|
||||
data: Data,
|
||||
): void => {
|
||||
// Worth saying out loud: a request nobody is subscribed to is silently
|
||||
// dropped, and that is exactly the sort of thing the harness is for.
|
||||
if (!subject.observed) {
|
||||
log(`← ${name}: nothing is listening`);
|
||||
return;
|
||||
}
|
||||
log(`← ${name}`);
|
||||
subject.next({
|
||||
data,
|
||||
reply: (reply): void =>
|
||||
log(
|
||||
`→ ${name} acknowledged${reply === undefined ? "" : `: ${JSON.stringify(reply)}`}`,
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Records something Element Call told the host. Nothing is sent anywhere, so
|
||||
* this is only asynchronous because a real host's answer would have to be.
|
||||
*/
|
||||
const told = async (message: string): Promise<void> => {
|
||||
log(`→ ${message}`);
|
||||
await Promise.resolve();
|
||||
};
|
||||
|
||||
return {
|
||||
setAlwaysOnScreen: async (alwaysOnScreen): Promise<void> =>
|
||||
await told(`setAlwaysOnScreen(${alwaysOnScreen})`),
|
||||
contentLoaded: async (): Promise<void> => await told("contentLoaded"),
|
||||
notifyJoined: async (): Promise<void> => await told("notifyJoined"),
|
||||
notifyHungUp: async (): Promise<void> => await told("notifyHungUp"),
|
||||
notifyDeviceMute: async (state): Promise<void> =>
|
||||
await told(
|
||||
`notifyDeviceMute(audio: ${state.audio_enabled}, video: ${state.video_enabled})`,
|
||||
),
|
||||
// Present because this host really can dismiss Element Call, which is what
|
||||
// makes it offer a close affordance at all
|
||||
close: async (): Promise<void> => {
|
||||
await told("close");
|
||||
onClose();
|
||||
},
|
||||
|
||||
themeChange$,
|
||||
// The harness does not preload a call, so this is never asked for
|
||||
join$: NEVER,
|
||||
hangUp$,
|
||||
deviceMute$,
|
||||
|
||||
supportsReactions: true,
|
||||
|
||||
requestTheme: (name): void =>
|
||||
ask(themeChange$, `themeChange(${name})`, { name }),
|
||||
requestHangUp: (): void => ask(hangUp$, "hangUp", {}),
|
||||
requestDeviceMute: (request): void =>
|
||||
ask(deviceMute$, `deviceMute(${JSON.stringify(request)})`, request),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
.credentials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-inline-size: 420px;
|
||||
margin: 48px auto;
|
||||
padding: 24px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.harness {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.header,
|
||||
.paneBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
border-block-end: 1px solid #d4d4d8;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.middle {
|
||||
display: flex;
|
||||
min-block-size: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex: 0 0 220px;
|
||||
padding: 12px;
|
||||
border-inline-end: 1px solid #d4d4d8;
|
||||
background-color: #ffffff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* So that a pane is the size it was dragged to, rather than being stretched
|
||||
to fill the row */
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
min-inline-size: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.paneBar {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-block-end: none;
|
||||
}
|
||||
|
||||
/* The space the host gives Element Call. Resizable so that the sizes it has to
|
||||
cope with can be found by dragging rather than by rebuilding, and `overflow:
|
||||
hidden` both to enable the resize handle and to show up anything inside Element
|
||||
Call that does not fit the box it was given. */
|
||||
.paneCall {
|
||||
inline-size: 560px;
|
||||
block-size: 420px;
|
||||
min-inline-size: 180px;
|
||||
min-block-size: 180px;
|
||||
resize: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.log {
|
||||
max-block-size: 180px;
|
||||
overflow-y: auto;
|
||||
padding: 8px 12px;
|
||||
border-block-start: 1px solid #d4d4d8;
|
||||
background-color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.log h2 {
|
||||
font-size: 13px;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.log ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* A host overlay, which Element Call must not be able to draw over */
|
||||
.dialogScrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import {
|
||||
type FC,
|
||||
type FormEvent,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { type MatrixClient } from "matrix-js-sdk";
|
||||
import { logger } from "matrix-js-sdk/lib/logger";
|
||||
|
||||
import { ElementCall } from "../index";
|
||||
import { createDevHostBridge } from "./DevHostBridge";
|
||||
import { createSession, joinRoom } from "./session";
|
||||
import styles from "./Harness.module.css";
|
||||
|
||||
interface Credentials {
|
||||
homeserver: string;
|
||||
username: string;
|
||||
password: string;
|
||||
room: string;
|
||||
}
|
||||
|
||||
const CREDENTIALS_KEY = "element-call-component-harness";
|
||||
|
||||
const DEFAULT_CREDENTIALS: Credentials = {
|
||||
homeserver: "https://synapse.m.localhost",
|
||||
username: "",
|
||||
password: "",
|
||||
room: "",
|
||||
};
|
||||
|
||||
/** The last credentials used, so that a reload does not mean typing them again. */
|
||||
function loadCredentials(): Credentials {
|
||||
try {
|
||||
const stored = localStorage.getItem(CREDENTIALS_KEY);
|
||||
if (stored !== null)
|
||||
return { ...DEFAULT_CREDENTIALS, ...(JSON.parse(stored) as Credentials) };
|
||||
} catch (e) {
|
||||
logger.warn("Could not read the stored harness credentials", e);
|
||||
}
|
||||
return DEFAULT_CREDENTIALS;
|
||||
}
|
||||
|
||||
interface Session {
|
||||
label: string;
|
||||
client: MatrixClient;
|
||||
}
|
||||
|
||||
type State =
|
||||
| { phase: "credentials" }
|
||||
| { phase: "starting"; progress: string }
|
||||
| { phase: "started"; roomId: string; sessions: Session[] }
|
||||
| { phase: "failed"; error: string };
|
||||
|
||||
interface LogEntry {
|
||||
pane: string;
|
||||
message: string;
|
||||
at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* One embedded Element Call, with the controls a host would have over it: the
|
||||
* requests it can make of Element Call, and the ability to take it off screen
|
||||
* altogether.
|
||||
*/
|
||||
const Pane: FC<{
|
||||
session: Session;
|
||||
roomId: string;
|
||||
log: (pane: string, message: string) => void;
|
||||
}> = ({ session, roomId, log }): ReactNode => {
|
||||
const [mounted, setMounted] = useState(true);
|
||||
|
||||
const bridge = useMemo(
|
||||
() =>
|
||||
createDevHostBridge(
|
||||
(message) => log(session.label, message),
|
||||
() => setMounted(false),
|
||||
),
|
||||
[log, session.label],
|
||||
);
|
||||
|
||||
return (
|
||||
<section className={styles.pane}>
|
||||
<div className={styles.paneBar}>
|
||||
<strong>{session.label}</strong>
|
||||
<code>{session.client.getDeviceId()}</code>
|
||||
<button onClick={(): void => setMounted((m) => !m)}>
|
||||
{mounted ? "Unmount" : "Mount"}
|
||||
</button>
|
||||
<button onClick={(): void => bridge.requestTheme("light")}>
|
||||
Light
|
||||
</button>
|
||||
<button onClick={(): void => bridge.requestTheme("dark")}>Dark</button>
|
||||
<button
|
||||
onClick={(): void =>
|
||||
bridge.requestDeviceMute({ audio_enabled: false })
|
||||
}
|
||||
>
|
||||
Mute
|
||||
</button>
|
||||
<button onClick={(): void => bridge.requestHangUp()}>Hang up</button>
|
||||
</div>
|
||||
{/* Resizable, because how Element Call copes with the size it is given is
|
||||
one of the things we cannot find out from the standalone app */}
|
||||
<div className={styles.paneCall}>
|
||||
{mounted && (
|
||||
<ElementCall
|
||||
client={session.client}
|
||||
roomId={roomId}
|
||||
hostBridge={bridge}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
/** Host furniture, to make it visible if Element Call styles anything but itself. */
|
||||
const HostChrome: FC = (): ReactNode => (
|
||||
<nav className={styles.sidebar}>
|
||||
<h2>Host chrome</h2>
|
||||
<p>
|
||||
This column belongs to the host. If Element Call's stylesheet reaches
|
||||
outside its own container, it shows up here.
|
||||
</p>
|
||||
<hr />
|
||||
<ul>
|
||||
<li>Some room</li>
|
||||
<li>Another room</li>
|
||||
</ul>
|
||||
<button>A host button</button>
|
||||
</nav>
|
||||
);
|
||||
|
||||
/**
|
||||
* A dialog of the host's own, over the top of the calls. Element Call embedded
|
||||
* in a host has to sit underneath this — being unable to is one of the reasons
|
||||
* for embedding it rather than putting it in an iframe.
|
||||
*/
|
||||
const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => (
|
||||
<div className={styles.dialogScrim}>
|
||||
<div className={styles.dialog}>
|
||||
<h2>A dialog belonging to the host</h2>
|
||||
<p>This should cover the calls completely.</p>
|
||||
<button onClick={onClose}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
/**
|
||||
* Stands in for a host application embedding Element Call: it owns the Matrix
|
||||
* clients, the page and the space each call is given, and reaches Element Call
|
||||
* only through the component's public interface.
|
||||
*
|
||||
* Two calls at once, from two devices of the same account, so that a real call
|
||||
* happens between them and anything Element Call keeps once per process rather
|
||||
* than once per call shows itself.
|
||||
*/
|
||||
export const Harness: FC = (): ReactNode => {
|
||||
const [credentials, setCredentials] = useState(loadCredentials);
|
||||
const [state, setState] = useState<State>({ phase: "credentials" });
|
||||
const [entries, setEntries] = useState<LogEntry[]>([]);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
const log = useCallback((pane: string, message: string): void => {
|
||||
setEntries((entries) =>
|
||||
[
|
||||
...entries,
|
||||
{ pane, message, at: new Date().toLocaleTimeString() },
|
||||
].slice(-100),
|
||||
);
|
||||
}, []);
|
||||
|
||||
const start = useCallback(
|
||||
(event: FormEvent): void => {
|
||||
event.preventDefault();
|
||||
localStorage.setItem(CREDENTIALS_KEY, JSON.stringify(credentials));
|
||||
const { homeserver, username, password, room } = credentials;
|
||||
|
||||
const progress = (message: string): void =>
|
||||
setState({ phase: "starting", progress: message });
|
||||
progress("Starting");
|
||||
|
||||
void (async (): Promise<void> => {
|
||||
try {
|
||||
// One at a time: two logins at once from the same account is the
|
||||
// shape of request homeservers rate limit
|
||||
const sessions: Session[] = [];
|
||||
for (const label of ["Call A", "Call B"])
|
||||
sessions.push({
|
||||
label,
|
||||
client: await createSession(
|
||||
homeserver,
|
||||
username,
|
||||
password,
|
||||
(message) => progress(`${label}: ${message}`),
|
||||
),
|
||||
});
|
||||
|
||||
progress("Joining the room");
|
||||
let roomId = room;
|
||||
for (const { client } of sessions)
|
||||
roomId = await joinRoom(client, roomId);
|
||||
|
||||
setState({ phase: "started", roomId, sessions });
|
||||
} catch (e) {
|
||||
logger.error("The harness could not start", e);
|
||||
setState({ phase: "failed", error: `${e}` });
|
||||
}
|
||||
})();
|
||||
},
|
||||
[credentials],
|
||||
);
|
||||
|
||||
const field = (
|
||||
name: keyof Credentials,
|
||||
label: string,
|
||||
type = "text",
|
||||
): ReactNode => (
|
||||
<label className={styles.field}>
|
||||
{label}
|
||||
<input
|
||||
type={type}
|
||||
value={credentials[name]}
|
||||
onChange={(e): void =>
|
||||
setCredentials((c) => ({ ...c, [name]: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
|
||||
if (state.phase !== "started")
|
||||
return (
|
||||
<form className={styles.credentials} onSubmit={start}>
|
||||
<h1>Element Call component harness</h1>
|
||||
<p>
|
||||
Signs in twice and shows Element Call embedded twice, in a page that
|
||||
is not Element Call's own.
|
||||
</p>
|
||||
{field("homeserver", "Homeserver")}
|
||||
{field("username", "Username")}
|
||||
{field("password", "Password", "password")}
|
||||
{field("room", "Room ID or alias")}
|
||||
<button type="submit" disabled={state.phase === "starting"}>
|
||||
Start
|
||||
</button>
|
||||
{state.phase === "starting" && <p>{state.progress}</p>}
|
||||
{state.phase === "failed" && (
|
||||
<p className={styles.error}>{state.error}</p>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.harness}>
|
||||
<header className={styles.header}>
|
||||
<h1>Element Call component harness</h1>
|
||||
<code>{state.roomId}</code>
|
||||
<button onClick={(): void => setDialogOpen(true)}>
|
||||
Open a host dialog
|
||||
</button>
|
||||
</header>
|
||||
<div className={styles.middle}>
|
||||
<HostChrome />
|
||||
<main className={styles.panes}>
|
||||
{state.sessions.map((session) => (
|
||||
<Pane
|
||||
key={session.label}
|
||||
session={session}
|
||||
roomId={state.roomId}
|
||||
log={log}
|
||||
/>
|
||||
))}
|
||||
</main>
|
||||
</div>
|
||||
<section className={styles.log}>
|
||||
<h2>Host bridge</h2>
|
||||
<ol>
|
||||
{entries.map((entry, i) => (
|
||||
<li key={i}>
|
||||
<code>{entry.at}</code> <strong>{entry.pane}</strong>{" "}
|
||||
{entry.message}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
{dialogOpen && <HostDialog onClose={(): void => setDialogOpen(false)} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
/* The host page's own styles. Deliberately plain, and deliberately not using
|
||||
Element Call's design tokens: the harness should look like it does because of
|
||||
this file, not because Element Call styled it. */
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, sans-serif;
|
||||
background-color: #f4f4f5;
|
||||
color: #18181b;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Element Call component harness</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Deliberately plain: this page stands in for a host application, so
|
||||
anything it looks like must have come from the host's own styles or from
|
||||
Element Call reaching outside its container. -->
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { logger } from "matrix-js-sdk/lib/logger";
|
||||
|
||||
import { type ConfigOptions, initializeElementCall } from "../index";
|
||||
import { Harness } from "./Harness";
|
||||
// After Element Call's, so that the host has the last word on its own page
|
||||
import "./host.css";
|
||||
|
||||
/**
|
||||
* The development app's own `config.json`, so that the harness runs Element
|
||||
* Call the way `pnpm dev` does. It is not in the repository — developers copy
|
||||
* it from `config/config.devenv.json` — so its absence is expected rather than
|
||||
* an error.
|
||||
*/
|
||||
async function loadConfig(): Promise<ConfigOptions> {
|
||||
try {
|
||||
const response = await fetch("/config.json");
|
||||
if (response.ok) return (await response.json()) as ConfigOptions;
|
||||
logger.warn(
|
||||
`No config.json (${response.status}); running with Element Call's defaults`,
|
||||
);
|
||||
} catch (e) {
|
||||
logger.warn("Could not read config.json", e);
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
await initializeElementCall(await loadConfig());
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<Harness />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,79 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import {
|
||||
ClientEvent,
|
||||
createClient,
|
||||
type MatrixClient,
|
||||
MemoryStore,
|
||||
SyncState,
|
||||
} from "matrix-js-sdk";
|
||||
|
||||
/**
|
||||
* Logs in and brings up a client the way a host application would, so that the
|
||||
* component is handed a real one rather than something Element Call built for
|
||||
* itself.
|
||||
*
|
||||
* Everything is kept in memory and a fresh login happens on every reload. That
|
||||
* costs a device on the development homeserver each time, which is harmless,
|
||||
* and buys the harness two clients that cannot tread on each other's storage.
|
||||
* Persisting the login to make reloads quicker would mean persisting the
|
||||
* crypto store too: reusing a device ID with a fresh crypto store generates new
|
||||
* device keys, and uploading them conflicts with the ones the server already
|
||||
* holds.
|
||||
*/
|
||||
export async function createSession(
|
||||
homeserver: string,
|
||||
username: string,
|
||||
password: string,
|
||||
onProgress: (message: string) => void,
|
||||
): Promise<MatrixClient> {
|
||||
onProgress("Logging in");
|
||||
const login = await createClient({ baseUrl: homeserver }).login(
|
||||
"m.login.password",
|
||||
{ identifier: { type: "m.id.user", user: username }, password },
|
||||
);
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: homeserver,
|
||||
accessToken: login.access_token,
|
||||
userId: login.user_id,
|
||||
deviceId: login.device_id,
|
||||
store: new MemoryStore(),
|
||||
useAuthorizationHeader: true,
|
||||
fallbackICEServerAllowed: true,
|
||||
});
|
||||
|
||||
onProgress(`Setting up crypto for ${login.device_id}`);
|
||||
await client.initRustCrypto({ useIndexedDB: false });
|
||||
|
||||
onProgress(`Syncing ${login.device_id}`);
|
||||
await client.startClient();
|
||||
await new Promise<void>((resolve) => {
|
||||
const onSync = (state: SyncState): void => {
|
||||
if (state !== SyncState.Prepared && state !== SyncState.Syncing) return;
|
||||
client.off(ClientEvent.Sync, onSync);
|
||||
resolve();
|
||||
};
|
||||
client.on(ClientEvent.Sync, onSync);
|
||||
});
|
||||
|
||||
return client;
|
||||
}
|
||||
|
||||
/**
|
||||
* The room to call in, joining it if this session is not in it yet — a host
|
||||
* hands Element Call a room it already knows about, so the harness has to get
|
||||
* itself into that position first.
|
||||
*/
|
||||
export async function joinRoom(
|
||||
client: MatrixClient,
|
||||
roomIdOrAlias: string,
|
||||
): Promise<string> {
|
||||
const room = await client.joinRoom(roomIdOrAlias);
|
||||
return room.roomId;
|
||||
}
|
||||
Reference in New Issue
Block a user