Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-10-13 23:35:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Let the shell say where home is, and drop the router from the call

Browse Source 
The call reached for react-router in five places to send the user
"home": on leaving without a lobby, from the lobby's recents link, from
the post-call screen, from the error page's return button and from the
header logo. Home is the standalone app's home page; the call has no
idea where that is, and a component has no such place at all — its host
decides what follows a call. Yet the component had to mount a
MemoryRouter just so those hooks would not throw.

`useLeaveToHome` is the way home as the shell supplies it: the app
provides `navigate("/")` from inside its router, the component provides
nothing, and everything that used to link to "/" now either calls it or,
when there is none, offers no way out. The logo becomes a plain logo,
the recents and "not now" links disappear, the error page's button does
too. `ClientProvider`'s logout goes the same way. The component no
longer renders a router.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Timo K.
2026-09-08 15:39:00 +02:00
co-authored by Claude Fable 5.1
parent f5a94ce702
commit b7285064fd
15 changed files with 299 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/room/CallEndedView.tsx
+11 -9
View File
@@ -9,8 +9,6 @@ import { type FC, type FormEventHandler, useCallback, useState } from "react";
import { type MatrixClient } from "matrix-js-sdk";
import { Trans, useTranslation } from "react-i18next";
import { Button, Heading, Text } from "@vector-im/compound-web";
import { useNavigate } from "react-router-dom";
import { logger } from "matrix-js-sdk/lib/logger";
import styles from "./CallEndedView.module.css";
import feedbackStyle from "../input/FeedbackInput.module.css";
@@ -19,8 +17,9 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
import { FieldRow, InputField } from "../input/Input";
import { StarRatingInput } from "../input/StarRatingInput";
import { Link } from "../button/Link";
import { LinkButton } from "../button";
import { LeaveToHomeLink } from "../button/LeaveToHomeLink";
import { useLeaveToHome } from "../LeaveToHomeContext";
interface Props {
client: MatrixClient;
@@ -38,7 +37,7 @@ export const CallEndedView: FC<Props> = ({
endedCallId,
}) => {
const { t } = useTranslation();
const navigate = useNavigate();
const leaveToHome = useLeaveToHome();
const { displayName } = useProfile(client);
const [surveySubmitted, setSurveySubmitted] = useState(false);
@@ -68,14 +67,12 @@ export const CallEndedView: FC<Props> = ({
setSurveySubmitted(true);
} else if (!confineToRoom) {
// if the user already has an account immediately go back to the home screen
navigate("/")?.catch((error) => {
logger.error("Failed to navigate to /", error);
});
leaveToHome?.();
}
}, 1000);
}, 1000);
},
[endedCallId, navigate, isPasswordlessUser, confineToRoom, starRating],
[endedCallId, leaveToHome, isPasswordlessUser, confineToRoom, starRating],
);
const createAccountDialog = isPasswordlessUser && (
@@ -87,6 +84,8 @@ export const CallEndedView: FC<Props> = ({
calls
</p>
</Trans>
{/* Only guests of the standalone app are ever passwordless, so this
route is always the standalone app's own. */}
<LinkButton className={styles.callEndedButton} to="/register">
{t("call_ended_view.create_account_button")}
</LinkButton>
@@ -157,7 +156,10 @@ export const CallEndedView: FC<Props> = ({
</main>
{!confineToRoom && (
<Text className={styles.footer}>
<Link to="/"> {t("call_ended_view.not_now_button")} </Link>
<LeaveToHomeLink>
{" "}
{t("call_ended_view.not_now_button")}{" "}
</LeaveToHomeLink>
</Text>
)}
</div>
src/room/CallView.tsx
+4 -4
View File
@@ -28,7 +28,6 @@ import {
MatrixRTCSessionEvent,
type MatrixRTCSession,
} from "matrix-js-sdk/lib/matrixrtc";
import { useNavigate } from "react-router-dom";
import { type JoinCallData } from "../widget";
import { LobbyView } from "./LobbyView";
@@ -72,6 +71,7 @@ import { useBehavior } from "../useBehavior.ts";
import { useRootElement } from "../RootElementContext.ts";
import { useHostBridge } from "../HostBridge.ts";
import { useMuteStates } from "../state/useMuteStates.ts";
import { useLeaveToHome } from "../LeaveToHomeContext.ts";
/**
* If there already are this many participants in the call, we automatically mute
@@ -374,7 +374,7 @@ const LoadedCallView: FC<LoadedProps> = ({
// TODO refactor this + "joined" to just one callState
const [left, setLeft] = useState(false);
const navigate = useNavigate();
const leaveToHome = useLeaveToHome();
// TODO split this into leave and onDisconnect
const onLeft = useCallback(
@@ -433,7 +433,7 @@ const LoadedCallView: FC<LoadedProps> = ({
!confineToRoom &&
!PosthogAnalytics.instance.isEnabled()
)
void navigate("/");
leaveToHome?.();
// After this point the host could dispose of us at any moment!
try {
@@ -462,7 +462,7 @@ const LoadedCallView: FC<LoadedProps> = ({
isPasswordlessUser,
confineToRoom,
returnToLobby,
navigate,
leaveToHome,
],
);
src/room/GroupCallErrorBoundary.test.tsx
+32 -21
View File
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import { describe, expect, test, vi } from "vitest";
import { describe, expect, onTestFinished, test, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import {
type FC,
@@ -14,7 +14,7 @@ import {
useCallback,
useState,
} from "react";
import { BrowserRouter } from "react-router-dom";
import { LeaveToHomeProvider } from "../LeaveToHomeContext";
import userEvent from "@testing-library/user-event";
import { ConnectionError } from "livekit-client";
import { MatrixError } from "matrix-js-sdk";
@@ -42,6 +42,9 @@ import {
nullHostBridge,
} from "../HostBridge.ts";
// Somewhere to go home to, so that the error pages offer the way
const leaveToHome = vi.fn();
test.each([
{
error: new MatrixRTCTransportMissingError("example.com"),
@@ -79,14 +82,14 @@ test.each([
const onErrorMock = vi.fn();
const { asFragment } = render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary
onError={onErrorMock}
recoveryActionHandler={vi.fn()}
>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
await screen.findByText(expectedTitle);
@@ -106,15 +109,19 @@ test("should render the error page with link back to home", async () => {
};
const onErrorMock = vi.fn();
// From the home page itself the home button reloads instead of navigating,
// so be somewhere else for this test
window.history.pushState({}, "", "/room/somewhere");
onTestFinished(() => window.history.pushState({}, "", "/"));
const { asFragment } = render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary
onError={onErrorMock}
recoveryActionHandler={vi.fn()}
>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
await screen.findByText("Call is not supported");
@@ -123,7 +130,11 @@ test("should render the error page with link back to home", async () => {
screen.getByText(/Error Code: MISSING_MATRIX_RTC_TRANSPORT/i),
).toBeInTheDocument();
await screen.findByRole("button", { name: "Return to home screen" });
// The way home is whatever the shell supplied, not a route of the call's own
await userEvent
.setup()
.click(screen.getByRole("button", { name: "Return to home screen" }));
expect(leaveToHome).toHaveBeenCalledOnce();
expect(onErrorMock).toHaveBeenCalledOnce();
expect(onErrorMock).toHaveBeenCalledWith(error);
@@ -155,11 +166,11 @@ test("ConnectionLostError: Action handling should reset error state", async () =
);
return (
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary recoveryActionHandler={reconnectCallback}>
<TestComponent fail={failState} />
</GroupCallErrorBoundary>
</BrowserRouter>
</LeaveToHomeProvider>
);
};
@@ -194,14 +205,14 @@ describe("Rageshake button", () => {
};
render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary
onError={vi.fn()}
recoveryActionHandler={vi.fn()}
>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
}
@@ -234,7 +245,7 @@ test("should have a close button when the host can dismiss us", async () => {
const user = userEvent.setup();
const onErrorMock = vi.fn();
const { asFragment } = render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<HostBridgeProvider value={hostBridge}>
<GroupCallErrorBoundary
onError={onErrorMock}
@@ -243,7 +254,7 @@ test("should have a close button when the host can dismiss us", async () => {
<TestComponent />
</GroupCallErrorBoundary>
</HostBridgeProvider>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
await screen.findByText("Call is not supported");
@@ -273,11 +284,11 @@ test("should show technical details when error has a matrixError cause", async (
};
render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
await screen.findByText("Something went wrong");
@@ -302,11 +313,11 @@ test("should not show technical details when error has no matrix error cause", a
};
render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
await screen.findByText("Connection lost");
@@ -356,14 +367,14 @@ describe("LiveKit ConnectionError variants", () => {
};
const { asFragment } = render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary
onError={vi.fn()}
recoveryActionHandler={vi.fn()}
>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
// Check title
@@ -385,14 +396,14 @@ describe("LiveKit ConnectionError variants", () => {
};
const { asFragment } = render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<GroupCallErrorBoundary
onError={vi.fn()}
recoveryActionHandler={vi.fn()}
>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
await screen.findByText("Connection timeout");
src/room/LobbyView.test.tsx
+6 -3
View File
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
import { describe, expect, it, vi } from "vitest";
import { render } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import { LeaveToHomeProvider } from "../LeaveToHomeContext";
import { TooltipProvider } from "@vector-im/compound-web";
import { type MatrixClient } from "matrix-js-sdk";
import { axe } from "vitest-axe";
@@ -26,6 +26,9 @@ import lobbyStyles from "./LobbyView.module.css";
import headerStyles from "../Header.module.css";
import { AppBar } from "../AppBar";
// Somewhere to go home to, so that the lobby offers the way back
const leaveToHome = vi.fn();
vi.mock("@livekit/components-react", () => ({
usePreviewTracks: (): unknown[] => [],
}));
@@ -93,14 +96,14 @@ function renderLobbyView(
/>
);
return render(
<BrowserRouter>
<LeaveToHomeProvider value={leaveToHome}>
<MediaDevicesContext value={mediaDevices}>
<TooltipProvider>
{withAppBar && <AppBar>{lobbyView}</AppBar>}
{!withAppBar && lobbyView}
</TooltipProvider>
</MediaDevicesContext>
</BrowserRouter>,
</LeaveToHomeProvider>,
);
}
src/room/LobbyView.tsx
+10 -12
View File
@@ -25,7 +25,6 @@ import {
Track,
} from "livekit-client";
import { useObservableEagerState } from "observable-hooks";
import { useNavigate } from "react-router-dom";
import inCallStyles from "./InCallView.module.css";
import styles from "./LobbyView.module.css";
@@ -36,7 +35,8 @@ import { InviteButton } from "../button/InviteButton";
import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
import { useRootSizeMatches } from "../useRootSize";
import { E2eeType } from "../e2ee/e2eeType";
import { Link } from "../button/Link";
import { LeaveToHomeLink } from "../button/LeaveToHomeLink";
import { useLeaveToHome } from "../LeaveToHomeContext";
import { useMediaDevices } from "../MediaDevicesContext";
import { ObservableScope } from "../state/ObservableScope";
import { useInitial } from "../useInitial";
@@ -109,21 +109,19 @@ export const LobbyView: FC<Props> = ({
[setSettingsModalOpen],
);
const navigate = useNavigate();
const onLeaveClick = useCallback(() => {
navigate("/")?.catch((error) => {
logger.error("Failed to navigate to /", error);
});
}, [navigate]);
const hangup = confineToRoom ? undefined : onLeaveClick;
// Leaving the lobby means going back to wherever the user came from, if
// there is such a place
const leaveToHome = useLeaveToHome();
const hangup =
confineToRoom || leaveToHome === null ? undefined : leaveToHome;
const recentsButtonInFooter = useRootSizeMatches(
({ height }) => height <= 500,
);
const recentsButton = !confineToRoom && (
<Link className={styles.recents} to="/">
<LeaveToHomeLink className={styles.recents}>
{t("lobby.leave_button")}
</Link>
</LeaveToHomeLink>
);
const devices = useMediaDevices();
@@ -209,7 +207,7 @@ export const LobbyView: FC<Props> = ({
return (): void => {
footerScope.end();
};
}, [devices, hangup, hideHeader, muteStates, onLeaveClick, openSettings]);
}, [devices, hangup, hideHeader, muteStates, openSettings]);
// TODO: Unify this component with InCallView, so we can get slick joining
// animations and don't have to feel bad about reusing its CSS
src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
+42 -56
View File
@@ -11,11 +11,10 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -92,7 +91,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -169,11 +168,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -250,7 +248,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -326,11 +324,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -407,7 +404,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -483,11 +480,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -564,7 +560,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -640,11 +636,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -721,7 +716,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -797,11 +792,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -878,7 +872,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -954,11 +948,10 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -1035,7 +1028,7 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -1111,11 +1104,10 @@ exports[`should have a close button when the host can dismiss us 1`] = `
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -1192,7 +1184,7 @@ exports[`should have a close button when the host can dismiss us 1`] = `
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -1265,11 +1257,10 @@ exports[`should render the error page with link back to home 1`] = `
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -1346,7 +1337,7 @@ exports[`should render the error page with link back to home 1`] = `
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -1419,11 +1410,10 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -1500,7 +1490,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -1573,11 +1563,10 @@ exports[`should report correct error for 'Connection lost' 1`] = `
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -1654,7 +1643,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -1731,11 +1720,10 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -1812,7 +1800,7 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -1885,11 +1873,10 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -1966,7 +1953,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
@@ -2034,11 +2021,10 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
<div
class="_nav_e4b327 _leftNav_e4b327"
>
<a
<button
aria-label="Element Call Home"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
type="button"
>
<svg
fill="none"
@@ -2115,7 +2101,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
fill="white"
/>
</svg>
</a>
</button>
</div>
<div
class="_nav_e4b327 _rightNav_e4b327"
src/room/__snapshots__/LobbyView.test.tsx.snap
+3 -3
View File
@@ -88,7 +88,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
class="_link_13esb_8"
data-kind="primary"
data-size="md"
href="/"
href="#"
rel="noreferrer noopener"
>
Back to recents
@@ -320,7 +320,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
class="_link_13esb_8"
data-kind="primary"
data-size="md"
href="/"
href="#"
rel="noreferrer noopener"
>
Back to recents
@@ -598,7 +598,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
class="_link_13esb_8"
data-kind="primary"
data-size="md"
href="/"
href="#"
rel="noreferrer noopener"
>
Back to recents