Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-09-10 21:55:19 +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
component/index.tsx
+33 -38
View File
@@ -44,7 +44,6 @@ import {
} from "react";
import { type MatrixClient } from "matrix-js-sdk";
import { logger } from "matrix-js-sdk/lib/logger";
import { MemoryRouter } from "react-router-dom";
import { I18nextProvider } from "react-i18next";
import { TooltipProvider } from "@vector-im/compound-web";
import { ErrorBoundary } from "@sentry/react";
@@ -266,44 +265,40 @@ export const ElementCall: FC<ElementCallProps> = ({
<I18nextProvider i18n={i18n}>
<HostBridgeProvider value={hostBridge}>
<UrlParamsProvider value={params}>
{/* Element Call's own navigation stays in memory, so that the
component cannot disturb the host's URL. */}
<MemoryRouter>
<div ref={setContainer} className={styles.root}>
{container !== null &&
rtcSession !== null &&
mediaDevices !== null && (
<RootElementProvider value={container}>
{/* Whatever goes wrong in here is shown in here. Left to
<div ref={setContainer} className={styles.root}>
{container !== null &&
rtcSession !== null &&
mediaDevices !== null && (
<RootElementProvider value={container}>
{/* Whatever goes wrong in here is shown in here. Left to
propagate, an error would unmount the host's own tree. */}
<ErrorBoundary
fallback={(error) => <ErrorPage error={error} />}
// A broken call should not hold the host on screen
onError={() => void hostBridge.setAlwaysOnScreen(false)}
>
<Decoration>
<TooltipProvider>
<ClientProvider client={client}>
<MediaDevicesContext value={mediaDevices}>
<ProcessorProvider>
<CallView
client={client}
rtcSession={rtcSession}
isPasswordlessUser={false}
confineToRoom={params.confineToRoom}
preload={params.preload}
skipLobby={params.skipLobby}
/>
</ProcessorProvider>
</MediaDevicesContext>
</ClientProvider>
</TooltipProvider>
</Decoration>
</ErrorBoundary>
</RootElementProvider>
)}
</div>
</MemoryRouter>
<ErrorBoundary
fallback={(error) => <ErrorPage error={error} />}
// A broken call should not hold the host on screen
onError={() => void hostBridge.setAlwaysOnScreen(false)}
>
<Decoration>
<TooltipProvider>
<ClientProvider client={client}>
<MediaDevicesContext value={mediaDevices}>
<ProcessorProvider>
<CallView
client={client}
rtcSession={rtcSession}
isPasswordlessUser={false}
confineToRoom={params.confineToRoom}
preload={params.preload}
skipLobby={params.skipLobby}
/>
</ProcessorProvider>
</MediaDevicesContext>
</ClientProvider>
</TooltipProvider>
</Decoration>
</ErrorBoundary>
</RootElementProvider>
)}
</div>
</UrlParamsProvider>
</HostBridgeProvider>
</I18nextProvider>
src/App.tsx
+41 -11
View File
@@ -5,8 +5,21 @@ 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 JSX, Suspense, useEffect, useState } from "react";
import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
import {
type FC,
type JSX,
Suspense,
useCallback,
useEffect,
useState,
} from "react";
import {
BrowserRouter,
Route,
useLocation,
useNavigate,
Routes,
} from "react-router-dom";
import * as Sentry from "@sentry/react";
import { TooltipProvider } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/lib/logger";
@@ -40,6 +53,7 @@ import {
nullHostBridge,
} from "./HostBridge";
import { useInitial } from "./useInitial";
import { LeaveToHomeProvider } from "./LeaveToHomeContext";
const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
@@ -57,6 +71,20 @@ const LocationUrlParamsProvider: FC<SimpleProviderProps> = ({ children }) => {
return <UrlParamsProvider value={urlParams}>{children}</UrlParamsProvider>;
};
/**
* Supplies the way home. Only the app has one — its home page, with the list
* of recent calls — so this, too, lives in the app shell.
*/
const HomeProvider: FC<SimpleProviderProps> = ({ children }) => {
const navigate = useNavigate();
const leaveToHome = useCallback(() => {
navigate("/")?.catch((e) => logger.error("Failed to navigate home", e));
}, [navigate]);
return (
<LeaveToHomeProvider value={leaveToHome}>{children}</LeaveToHomeProvider>
);
};
const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
const { pathname } = useLocation();
const { background } = useUrlParams();
@@ -143,15 +171,17 @@ export const App: FC<Props> = ({ vm, widget }) => {
<HostBridgeProvider value={hostBridge}>
<BrowserRouter>
<LocationUrlParamsProvider>
<BackgroundProvider>
<ThemeProvider>
<TooltipProvider>
<Suspense fallback={null}>
<MaybeAppBar>{content}</MaybeAppBar>
</Suspense>
</TooltipProvider>
</ThemeProvider>
</BackgroundProvider>
<HomeProvider>
<BackgroundProvider>
<ThemeProvider>
<TooltipProvider>
<Suspense fallback={null}>
<MaybeAppBar>{content}</MaybeAppBar>
</Suspense>
</TooltipProvider>
</ThemeProvider>
</BackgroundProvider>
</HomeProvider>
</LocationUrlParamsProvider>
</BrowserRouter>
</HostBridgeProvider>
src/ClientContext.tsx
+4 -4
View File
@@ -16,13 +16,13 @@ import {
useMemo,
type JSX,
} from "react";
import { useNavigate } from "react-router-dom";
import { logger } from "matrix-js-sdk/lib/logger";
import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
import { ErrorPage } from "./FullScreenView";
import { useHostBridge } from "./HostBridge";
import { useLeaveToHome } from "./LeaveToHomeContext";
import {
PosthogAnalytics,
RegistrationType,
@@ -146,7 +146,7 @@ interface Props {
}
export const ClientProvider: FC<Props> = ({ children, client }) => {
const navigate = useNavigate();
const leaveToHome = useLeaveToHome();
const hostBridge = useHostBridge();
// null = signed out, undefined = loading
@@ -249,10 +249,10 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
await client.clearStores();
clearSession();
setInitClientState(null);
await navigate("/");
leaveToHome?.();
PosthogAnalytics.instance.logout();
PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
}, [navigate, initClientState?.client]);
}, [leaveToHome, initClientState?.client]);
// To protect against multiple sessions writing to the same storage
// simultaneously, we send a broadcast message that shuts down all other
src/ErrorView.tsx
+15 -16
View File
@@ -20,7 +20,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
import { RageshakeButton } from "./settings/RageshakeButton";
import styles from "./ErrorView.module.css";
import { useUrlParams } from "./UrlParams";
import { LinkButton } from "./button";
import { useLeaveToHome } from "./LeaveToHomeContext";
import { useHostBridge } from "./HostBridge.ts";
interface Props {
@@ -50,6 +50,7 @@ export const ErrorView: FC<Props> = ({
const { t } = useTranslation();
const { confineToRoom } = useUrlParams();
const hostBridge = useHostBridge();
const leaveToHome = useLeaveToHome();
const onReload = useCallback(() => {
window.location.href = "/";
@@ -73,21 +74,19 @@ export const ErrorView: FC<Props> = ({
};
// Whether the error is considered fatal or pathname is `/` then reload the all app.
// If not then navigate to home page.
const ReturnToHomeButton = (): ReactElement => {
if (fatal || location.pathname === "/") {
return (
<Button kind="tertiary" className={styles.homeLink} onClick={onReload}>
{t("return_home_button")}
</Button>
);
} else {
return (
<LinkButton kind="tertiary" className={styles.homeLink} to="/">
{t("return_home_button")}
</LinkButton>
);
}
// If not then navigate to home page. Neither applies when there is no home
// to go to.
const ReturnToHomeButton = (): ReactElement | null => {
if (leaveToHome === null) return null;
return (
<Button
kind="tertiary"
className={styles.homeLink}
onClick={fatal || location.pathname === "/" ? onReload : leaveToHome}
>
{t("return_home_button")}
</Button>
);
};
return (
src/Header.module.css
+5
View File
@@ -30,6 +30,11 @@ Please see LICENSE in the repository root for full details.
display: none;
align-items: center;
text-decoration: none;
/* A button when it leads home, so undo the browser's button styling */
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.leftNav.hideMobile {
src/Header.tsx
+24 -5
View File
@@ -6,8 +6,13 @@ Please see LICENSE in the repository root for full details.
*/
import classNames from "classnames";
import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
import { Link } from "react-router-dom";
import {
type Ref,
type FC,
type HTMLAttributes,
type ReactNode,
useCallback,
} from "react";
import { useTranslation } from "react-i18next";
import { Heading, Text } from "@vector-im/compound-web";
import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -17,6 +22,7 @@ import Logo from "./icons/Logo.svg?react";
import { Avatar, Size } from "./Avatar";
import { EncryptionLock } from "./room/EncryptionLock";
import { useRootSizeMatches } from "./useRootSize";
import { useLeaveToHome } from "./LeaveToHomeContext";
import { DisconnectedBanner } from "./DisconnectedBanner";
interface HeaderProps extends HTMLAttributes<HTMLElement> {
@@ -112,17 +118,30 @@ interface HeaderLogoProps {
className?: string;
}
/**
* The logo, which is also the way home — when there is a home to go to. As a
* component there is not, and it is just the logo.
*/
export const HeaderLogo: FC<HeaderLogoProps> = ({ className }) => {
const { t } = useTranslation();
const leaveToHome = useLeaveToHome();
const onClick = useCallback(() => leaveToHome?.(), [leaveToHome]);
if (leaveToHome === null)
return (
<div className={classNames(styles.headerLogo, className)}>
<Logo />
</div>
);
return (
<Link
<button
type="button"
className={classNames(styles.headerLogo, className)}
to="/"
onClick={onClick}
aria-label={t("header_label")}
>
<Logo />
</Link>
</button>
);
};
src/LeaveToHomeContext.ts
+29
View File
@@ -0,0 +1,29 @@
/*
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 { createContext, use } from "react";
/**
* How the user leaves the call for wherever they came from: the standalone
* app's home page, with its list of recent calls.
*
* The call itself has no idea where that is, or whether there is such a place
* at all. Standalone there is, and the shell navigates to it; as a component
* there is not — the host decides what happens after a call — so nothing is
* supplied, and the call offers no way out of its own. This is what lets the
* call be rendered without a router.
*/
const LeaveToHomeContext = createContext<(() => void) | null>(null);
export const LeaveToHomeProvider = LeaveToHomeContext.Provider;
/**
* The way out of the call, or null when there is nowhere to go and the call
* should not offer one.
*/
export const useLeaveToHome = (): (() => void) | null =>
use(LeaveToHomeContext);
src/button/LeaveToHomeLink.tsx
+40
View File
@@ -0,0 +1,40 @@
/*
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 MouseEvent, type ReactNode, useCallback } from "react";
import { Link } from "@vector-im/compound-web";
import { useLeaveToHome } from "../LeaveToHomeContext";
interface Props {
className?: string;
children: ReactNode;
}
/**
* A link out of the call, to wherever the user came from. Renders nothing when
* there is nowhere to go (see {@link useLeaveToHome}).
*/
export const LeaveToHomeLink: FC<Props> = ({ className, children }) => {
const leaveToHome = useLeaveToHome();
const onClick = useCallback(
(e: MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
leaveToHome?.();
},
[leaveToHome],
);
if (leaveToHome === null) return null;
// Where this leads is the shell's business, so the link has no address of
// its own to offer
return (
<Link className={className} href="#" onClick={onClick}>
{children}
</Link>
);
};
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