= ({
widget={widget}
>
- {error.localisedMessage ?? (
+ {error.localisedMessageKey ? (
+
+ {/* Content injected by Trans component */}
+ ,
+ ["getByText"];
@@ -166,24 +175,36 @@ function createGroupCallView(
video: { enabled: false },
// TODO-MULTI-SFU: This cast isn't valid, it's likely the cause of some current test failures
} as unknown as MuteStates;
+ const groupCallView = (
+
-
+ {groupCallView}
+
+ ) : (
+ groupCallView
+ )}
@@ -251,7 +272,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
expect(leaveRTCSession).toHaveBeenCalledOnce();
});
-test("Should close widget when all other left and have time to play a sound", async () => {
+test("Should close widget when all other left and play a sound", async () => {
const user = userEvent.setup();
let widgetClosedCalled = false;
const { promise: widgetClosedPromise, resolve: widgetClosedResolver } =
@@ -289,8 +310,6 @@ test("Should close widget when all other left and have time to play a sound", as
expect(widgetClosedCalled).toBeFalsy();
resolvePlaySound.resolve();
- // Expect the leave sound to be played but silent (volumeOverwrite = 0)
- // The allOthersLeft effect should already play a leave sound for the last user in the call.
expect(playSound).toHaveBeenCalledWith("left", 0);
await widgetClosedPromise;
await flushPromises();
@@ -298,37 +317,6 @@ test("Should close widget when all other left and have time to play a sound", as
expect(widgetStopMock).toHaveBeenCalledOnce();
}, 80000);
-test("Should close widget when all other left", async () => {
- const user = userEvent.setup();
- const widgetClosedCalled = Promise.withResolvers();
- const widgetSendMock = vi.fn().mockImplementation((action: string) => {
- if (action === ElementWidgetActions.Close) {
- widgetClosedCalled.resolve();
- }
- });
- const widgetStopMock = vi.fn().mockResolvedValue(undefined);
- const widget = {
- api: {
- setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
- transport: {
- send: widgetSendMock,
- reply: vi.fn().mockResolvedValue(undefined),
- stop: widgetStopMock,
- } as unknown as ITransport,
- } as Partial,
- lazyActions: new LazyEventEmitter(),
- };
-
- const { getByText } = createGroupCallView(widget as WidgetHelpers);
- const leaveButton = getByText("SimulateOtherLeft");
- await user.click(leaveButton);
- await flushPromises();
-
- await widgetClosedCalled.promise;
- await flushPromises();
- expect(widgetStopMock).toHaveBeenCalledOnce();
-});
-
test("Should not close widget when auto leave due to error", async () => {
const user = userEvent.setup();
@@ -394,6 +382,46 @@ test.skip("GroupCallView shows errors that occur during joining", async () => {
screen.getByText("Call is not supported");
});
+test("translates wrapped UnsupportedStickyEventsEndpointError to the StickyEventsRequiredError screen", async () => {
+ // Mirror the shape the SDK emits: the MembershipManager scheduler wraps
+ // the original UnsupportedStickyEventsEndpointError in a generic Error
+ // but preserves the original on `.cause`.
+ const stickyError = new UnsupportedStickyEventsEndpointError(
+ "Server does not support the sticky events",
+ "sendStickyEvent",
+ );
+ const wrappedError = new Error(
+ "The MembershipManager shut down because of the end condition: " +
+ String(stickyError),
+ { cause: stickyError },
+ );
+
+ const { rtcSession } = createGroupCallView(null, true, {
+ withErrorBoundary: true,
+ });
+
+ await act(() =>
+ rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, wrappedError),
+ );
+
+ await screen.findByText("Homeserver does not support Matrix 2.0 calls");
+});
+
+test("falls back to ConnectionLostError for unrecognised membership manager errors", async () => {
+ const { rtcSession } = createGroupCallView(null, true, {
+ withErrorBoundary: true,
+ });
+
+ await act(() =>
+ rtcSession.emit(
+ MatrixRTCSessionEvent.MembershipManagerError,
+ new Error("something else broke"),
+ ),
+ );
+
+ await screen.findByText("Connection lost");
+});
+
test("user can reconnect after a membership manager error", async () => {
const user = userEvent.setup();
const { rtcSession } = createGroupCallView(null, true);
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 7c9009fe..fbd589e7 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -13,7 +13,12 @@ import {
useMemo,
useState,
} from "react";
-import { type MatrixClient, JoinRule, type Room } from "matrix-js-sdk";
+import {
+ type MatrixClient,
+ JoinRule,
+ type Room,
+ UnsupportedStickyEventsEndpointError,
+} from "matrix-js-sdk";
import {
Room as LivekitRoom,
isE2EESupported as isE2EESupportedBrowser,
@@ -67,6 +72,7 @@ import {
ConnectionLostError,
E2EENotSupportedError,
ElementCallError,
+ StickyEventsRequiredError,
UnknownCallError,
} from "../utils/errors.ts";
import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
@@ -162,8 +168,22 @@ export const GroupCallView: FC = ({
useTypedEventEmitter(
rtcSession,
MatrixRTCSessionEvent.MembershipManagerError,
- (error) => setExternalError(new ConnectionLostError()),
+ (error) => {
+ // When matrix_rtc_mode=matrix_2_0 is in effect but the homeserver does
+ // not advertise MSC4354 (sticky events), the SDK throws an
+ // `UnsupportedStickyEventsEndpointError`. The MembershipManager
+ // scheduler wraps it and exposes the original via `.cause`.
+ if (
+ error instanceof Error &&
+ error.cause instanceof UnsupportedStickyEventsEndpointError
+ ) {
+ setExternalError(new StickyEventsRequiredError());
+ } else {
+ setExternalError(new ConnectionLostError());
+ }
+ },
);
+
useEffect(() => {
// Sanity check the room object
if (client.getRoom(rtcSession.room.roomId) !== rtcSession.room)
@@ -533,11 +553,12 @@ export const GroupCallView: FC = ({
});
}
}}
- onError={
- (/**error*/) => {
- if (rtcSession.isJoined()) onLeft("error");
- }
- }
+ onError={(_error) => {
+ if (rtcSession.isJoined()) onLeft("error");
+ // If there is an error we need to be able to close the widget. This is done in `onLeft` as well
+ // We need it here explicitly in case rtcSession.isJoined is false.
+ void widget?.api.setAlwaysOnScreen(false);
+ }}
>
{body}
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index fcf1a492..736a915a 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -14,6 +14,23 @@ Please see LICENSE in the repository root for full details.
overflow-y: auto;
}
+/* Normally the footer uses a transparent background to allow our expressive
+page gradients to shine through. However, we sometimes need to visually separate
+it from the content underneath. If the call layout is overflowing, or if the
+spotlight tile is maximised and displaying video, apply a gradient background. */
+.overflowing > .footer,
+.fixedGrid:has(
+ > .tile[data-maximised="true"]
+ .spotlightItem[data-background="transparent"][data-video-enabled="true"][aria-hidden="false"]
+ )
+ ~ .footer {
+ background: linear-gradient(
+ 180deg,
+ rgba(0, 0, 0, 0) 0%,
+ var(--cpd-color-bg-canvas-default) 100%
+ );
+}
+
.header {
position: sticky;
flex-shrink: 0;
@@ -82,19 +99,18 @@ Please see LICENSE in the repository root for full details.
/* Disable pointer events so the overlay doesn't block interaction with
elements behind it */
pointer-events: none;
-}
-.fixedGrid > :not(:first-child),
-.scrollingGrid > :not(:first-child) {
- pointer-events: initial;
+ > :not(:first-child) {
+ pointer-events: initial;
+ }
+
+ .tile {
+ position: absolute;
+ inset-block-start: 0;
+ }
}
.tile {
- position: absolute;
- inset-block-start: 0;
-}
-
-.tile.maximised {
position: relative;
flex-grow: 1;
}
diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx
index c2d8a729..3113c072 100644
--- a/src/room/InCallView.test.tsx
+++ b/src/room/InCallView.test.tsx
@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
*/
import {
- afterEach,
beforeEach,
describe,
expect,
@@ -15,12 +14,7 @@ import {
type MockedFunction,
vi,
} from "vitest";
-import {
- render,
- type RenderResult,
- getByRole,
- screen,
-} from "@testing-library/react";
+import { render, type RenderResult } from "@testing-library/react";
import { type LocalParticipant } from "livekit-client";
import { BehaviorSubject, of } from "rxjs";
import { BrowserRouter } from "react-router-dom";
@@ -28,7 +22,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
import { RoomContext, useLocalParticipant } from "@livekit/components-react";
import userEvent from "@testing-library/user-event";
-import { InCallView } from "./InCallView";
+import { ActiveCall, InCallView } from "./InCallView";
import {
mockLivekitRoom,
mockLocalParticipant,
@@ -39,7 +33,10 @@ import {
type MockRTCSession,
} from "../utils/test";
import { E2eeType } from "../e2ee/e2eeType";
-import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
+import {
+ getBasicCallViewModelEnvironment,
+ getBasicRTCSession,
+} from "../utils/test-viewmodel";
import {
type CallViewModel,
type CallViewModelOptions,
@@ -50,8 +47,9 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
import { MediaDevicesContext } from "../MediaDevicesContext";
import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
-import { constant } from "../state/Behavior";
import { AppBar } from "../AppBar";
+import { type MatrixInfo } from "./VideoPreview";
+import { ProcessorProvider } from "../livekit/TrackProcessorContext";
import { initializeWidget } from "../widget";
initializeWidget();
@@ -85,6 +83,17 @@ const remoteParticipant = mockRemoteParticipant({
identity: "@alice:example.org:AAAAAA",
});
+const matrixInfo = {
+ userId: "",
+ displayName: "",
+ avatarUrl: "",
+ roomId: "",
+ roomName: "",
+ roomAlias: null,
+ roomAvatar: null,
+ e2eeSystem: { kind: E2eeType.NONE },
+} satisfies MatrixInfo;
+
let useRoomEncryptionSystemMock: MockedFunction;
beforeEach(() => {
@@ -129,12 +138,13 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
remoteParticipants$: of([remoteParticipant]),
},
);
- const { vm, footerVm, rtcSession } = getBasicCallViewModelEnvironment(
- [local, alice],
- undefined,
- mediaDevices,
- args.callViewModelOptions,
- );
+ const { vm, footerVm, developerSettingsVm, rtcSession } =
+ getBasicCallViewModelEnvironment(
+ [local, alice],
+ undefined,
+ mediaDevices,
+ args.callViewModelOptions,
+ );
rtcSession.joined = true;
const room = rtcSession.room;
@@ -147,18 +157,8 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
muteStates={muteState}
vm={vm}
footerVm={footerVm}
- matrixInfo={{
- userId: "",
- displayName: "",
- avatarUrl: "",
- roomId: "",
- roomName: "",
- roomAlias: null,
- roomAvatar: null,
- e2eeSystem: {
- kind: E2eeType.NONE,
- },
- }}
+ developerSettingsVm={developerSettingsVm}
+ matrixInfo={matrixInfo}
matrixRoom={room}
onShareClick={null}
/>
@@ -195,45 +195,6 @@ describe("InCallView", () => {
});
});
- describe("settings button with AppBar header", () => {
- beforeEach(() => {
- // getUrlParams() reads window.location directly rather than from the
- // React Router context, so MemoryRouter alone is not enough to make
- // it see "header=app_bar". Push the real URL so both paths agree.
- window.history.pushState({}, "", "?header=app_bar");
- });
-
- afterEach(() => {
- window.history.pushState({}, "", "/");
- });
-
- it("mobile portrait, is visible in the header", () => {
- createInCallView({
- withAppBar: true,
- callViewModelOptions: {
- // Narrow like a mobile phone in portrait orientation
- windowSize$: constant({ width: 400, height: 700 }),
- },
- });
-
- getByRole(screen.getByRole("banner"), "button", {
- name: "Settings",
- });
- });
-
- it("mobile landscape, is not visible anywhere", () => {
- const { queryByRole } = createInCallView({
- withAppBar: true,
- callViewModelOptions: {
- // Flat like a mobile phone in landscape orientation
- windowSize$: constant({ width: 700, height: 400 }),
- },
- });
-
- expect(queryByRole("button", { name: "Settings" })).not.toBeVisible();
- });
- });
-
describe("audioOutputSwitcher", () => {
it("is visible and can be clicked", async () => {
const user = userEvent.setup();
@@ -272,3 +233,34 @@ describe("InCallView", () => {
});
});
});
+
+describe("ActiveCall", () => {
+ it("creates the view models and renders the call", async () => {
+ const mediaDevices = mockMediaDevices({});
+ const { rtcSession, matrixRoom } = getBasicRTCSession([local, alice]);
+ const { findByTestId } = render(
+
+
+
+
+
+ {}}
+ />
+
+
+
+
+ ,
+ );
+ // Rendering at all proves ActiveCall created all of its view models
+ expect(await findByTestId("incall_leave")).toBeVisible();
+ });
+});
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index f4c0813c..110863e1 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -51,14 +51,13 @@ import {
createCallViewModel$,
} from "../state/CallViewModel/CallViewModel.ts";
import { Grid, type TileProps } from "../grid/Grid";
-import { useInitial } from "../useInitial";
import { SpotlightTile } from "../tile/SpotlightTile";
import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
import { E2eeType } from "../e2ee/e2eeType";
import { makeGridLayout } from "../grid/GridLayout";
import { type CallLayoutOutputs } from "../grid/CallLayout";
-import { makeOneOnOneLandscapeLayout } from "../grid/OneOnOneLandscapeLayout";
-import { makeOneOnOnePortraitLayout } from "../grid/OneOnOnePortraitLayout";
+import { makeOneOnOneDesktopLayout } from "../grid/OneOnOneDesktopLayout";
+import { makeOneOnOneMobileLayout } from "../grid/OneOnOneMobileLayout";
import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
@@ -76,22 +75,26 @@ import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
import { useMediaDevices } from "../MediaDevicesContext.ts";
import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
-import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
+import {
+ useAppBarHidden,
+ useAppBarSecondaryButton,
+ useAppBarSubtitle,
+} from "../AppBar.tsx";
import { useBehavior } from "../useBehavior.ts";
+import { constant } from "../state/Behavior.ts";
import { Toast } from "../Toast.tsx";
import overlayStyles from "../Overlay.module.css";
-import { prefetchSounds } from "../soundUtils";
-import { useAudioContext } from "../useAudioContext";
-import ringtoneMp3 from "../sound/ringtone.mp3?url";
-import ringtoneOgg from "../sound/ringtone.ogg?url";
import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
import { type Layout } from "../state/layout-types.ts";
import { ObservableScope } from "../state/ObservableScope.ts";
-import { useLatest } from "../useLatest.ts";
import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
import { SettingsIconButton } from "../button/Button.tsx";
import { createCallFooterViewModel } from "../components/CallFooterViewModel.tsx";
+import { createDeveloperSettingsTabViewModel } from "../settings/DeveloperSettingsTabViewModel.ts";
+import { type DeveloperSettingsSnapshot } from "../settings/DeveloperSettingsTab.tsx";
import { type ViewModel } from "../state/ViewModel.ts";
+import { RingingStatus } from "../tile/RingingStatus.tsx";
+import { RingingAudioRenderer } from "./RingingAudioRenderer.tsx";
declare module "react" {
interface CSSProperties {
@@ -100,11 +103,9 @@ declare module "react" {
}
}
-const logger = rootLogger.getChild("[InCallView]");
-
export interface ActiveCallProps extends Omit<
InCallViewProps,
- "vm" | "livekitRoom" | "connState" | "footerVm"
+ "vm" | "livekitRoom" | "connState" | "footerVm" | "developerSettingsVm"
> {
e2eeSystem: EncryptionSystem;
// TODO refactor those reasons into an enum
@@ -118,11 +119,14 @@ export const ActiveCall: FC = (props) => {
const [footerVm, setFooterVm] = useState | null>(
null,
);
+ const [developerSettingsVm, setDeveloperSettingsVm] =
+ useState | null>(null);
+
const urlParams = useUrlParams();
const mediaDevices = useMediaDevices();
const trackProcessorState$ = useTrackProcessorObservable$();
useEffect(() => {
- logger.info("START CALL VIEW SCOPE");
+ rootLogger.info("START CALL VIEW SCOPE");
const scope = new ObservableScope();
const reactionsReader = new ReactionsReader(scope, props.rtcSession);
const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
@@ -177,6 +181,7 @@ export const ActiveCall: FC = (props) => {
`${props.client.getUserId()}:${props.client.getDeviceId()}`,
);
setFooterVm(footerVm);
+ setDeveloperSettingsVm(createDeveloperSettingsTabViewModel(scope, vm));
return (): void => {
scope.end();
@@ -196,10 +201,16 @@ export const ActiveCall: FC = (props) => {
if (vm === null) return null;
if (footerVm === null) return null;
+ if (developerSettingsVm === null) return null;
return (
-
);
};
@@ -208,6 +219,7 @@ export interface InCallViewProps {
client: MatrixClient;
vm: CallViewModel;
footerVm: ViewModel;
+ developerSettingsVm: ViewModel;
matrixInfo: MatrixInfo;
rtcSession: MatrixRTCSession;
matrixRoom: MatrixRoom;
@@ -219,11 +231,13 @@ export const InCallView: FC = ({
client,
vm,
footerVm,
+ developerSettingsVm,
matrixInfo,
matrixRoom,
muteStates,
onShareClick,
}) => {
+ const logger = rootLogger.getChild("[InCallView]");
const { t } = useTranslation();
const { sendReaction, toggleRaisedHand } = useReactionsSender();
@@ -247,20 +261,6 @@ export const InCallView: FC = ({
const { showControls, header: headerStyle } = useUrlParams();
const muteAllAudio = useBehavior(muteAllAudio$);
-
- // Preload a waiting and decline sounds
- const pickupPhaseSoundCache = useInitial(async () => {
- return prefetchSounds({
- waiting: { mp3: ringtoneMp3, ogg: ringtoneOgg },
- });
- });
-
- const pickupPhaseAudio = useAudioContext({
- sounds: pickupPhaseSoundCache,
- latencyHint: "interactive",
- muted: muteAllAudio,
- });
- const latestPickupPhaseAudio = useLatest(pickupPhaseAudio);
const toggleAudio = useBehavior(muteStates.audio.toggle$);
const toggleVideo = useBehavior(muteStates.video.toggle$);
const setAudioEnabled = useBehavior(muteStates.audio.setEnabled$);
@@ -273,14 +273,16 @@ export const InCallView: FC = ({
() => void toggleRaisedHand(),
);
- const ringing = useBehavior(vm.ringing$);
+ const ringingVm = useBehavior(vm.ringingVm$);
const audioParticipants = useBehavior(vm.livekitRoomItems$);
const participantCount = useBehavior(vm.participantCount$);
const reconnecting = useBehavior(vm.reconnecting$);
const layout = useBehavior(vm.layout$);
const edgeToEdge = useBehavior(vm.edgeToEdge$);
+ const overflowing = useBehavior(vm.overflowing$);
const showNameTags = useBehavior(vm.showNameTags$);
const showHeader = useBehavior(vm.showHeader$);
+ const showModals = useBehavior(vm.showModals$);
const settingsOpen = useBehavior(vm.settingsOpen$);
const setSettingsOpen = useBehavior(vm.setSettingsOpen$);
const earpieceMode = useBehavior(vm.earpieceMode$);
@@ -316,22 +318,6 @@ export const InCallView: FC = ({
throw fatalCallError;
}
- // While ringing, loop the ringtone
- useEffect((): void | (() => void) => {
- const audio = latestPickupPhaseAudio.current;
- if (ringing && audio) {
- const endSound = audio.playSoundLooping(
- "waiting",
- audio.soundDuration["waiting"] ?? 1,
- );
- return () => {
- void endSound().catch((e) => {
- logger.error("Failed to stop ringing sound", e);
- });
- };
- }
- }, [ringing, latestPickupPhaseAudio]);
-
// iOS Safari doesn't reliably fire `click` on plain s, so we listen
// for `pointerup` instead. Scrolls end in `pointercancel`, not `pointerup`,
// so this still only fires for taps.
@@ -393,6 +379,11 @@ export const InCallView: FC
= ({
);
useAppBarHidden(!showHeader);
+ useAppBarSubtitle(
+ ringingVm && vm.ringingStatusLocation === "app_bar" && (
+ = ({
);
const showSpeakingIndicators = useBehavior(vm.showSpeakingIndicators$);
const showNameTags = useBehavior(vm.showNameTags$);
+ const showRingingStatus = vm.ringingStatusLocation === "tile";
+ const showOutline = useBehavior(
+ model instanceof GridTileViewModel
+ ? model.showOutline$
+ : constant(false),
+ );
return model instanceof GridTileViewModel ? (
= ({
style={style}
showSpeakingIndicators={showSpeakingIndicators}
showNameTags={showNameTags}
+ showRingingStatus={showRingingStatus}
+ showOutline={showOutline}
focusable={!contentObscured}
/>
) : (
@@ -511,8 +510,10 @@ export const InCallView: FC = ({
targetHeight={targetHeight}
showIndicators={showSpotlightIndicators}
showNameTags={showNameTags}
+ showRingingStatus={showRingingStatus}
focusable={!contentObscured}
className={classNames(className, styles.tile)}
+ itemClassName={styles.spotlightItem}
style={style}
/>
);
@@ -527,8 +528,8 @@ export const InCallView: FC = ({
"spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
"spotlight-portrait": makeSpotlightPortraitLayout(inputs),
"spotlight-expanded": makeSpotlightExpandedLayout(inputs),
- "one-on-one-landscape": makeOneOnOneLandscapeLayout(inputs),
- "one-on-one-portrait": makeOneOnOnePortraitLayout(inputs),
+ "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
+ "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
};
}, [gridBoundsObservable$]);
@@ -537,7 +538,9 @@ export const InCallView: FC = ({
if (layout.type === "pip") {
return (
= ({
targetHeight={gridBounds.height}
showIndicators={false}
showNameTags={showNameTags}
+ showRingingStatus={vm.ringingStatusLocation === "tile"}
focusable={!contentObscured}
aria-hidden={contentObscured}
/>
@@ -628,7 +632,7 @@ export const InCallView: FC = ({
// Only hide the settings button if we have an AppBar header and we are showing the header
const footer = footerVm !== null && (
- = ({
// and the footer is also viewable by moving focus into it, so this is fine.
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
= ({
{renderContent()}
+
{reconnectingToast}
{earpieceOverlay}
{footer}
- {layout.type !== "pip" && (
+ {showModals && (
<>
= ({
onDismiss={(): void => setSettingsOpen(false)}
tab={settingsTab}
onTabChange={setSettingsTab}
+ developerSettingsVm={developerSettingsVm}
livekitRooms={allConnections
.getConnections()
.map((connectionItem) => ({
diff --git a/src/room/LayoutSwitch.tsx b/src/room/LayoutSwitch.tsx
new file mode 100644
index 00000000..91ba0654
--- /dev/null
+++ b/src/room/LayoutSwitch.tsx
@@ -0,0 +1,44 @@
+/*
+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 { useId, type FC } from "react";
+import {
+ SpotlightViewIcon,
+ GridIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
+import { useBehavior } from "../useBehavior";
+import { useTranslation } from "react-i18next";
+import { Switch } from "@vector-im/compound-web";
+
+interface Props {
+ vm: LayoutSwitchViewModel;
+ className?: string;
+}
+
+export const LayoutSwitch: FC = ({ vm, className }) => {
+ const { t } = useTranslation();
+ const layout = useBehavior(vm.layout$);
+ const name = useId();
+
+ return (
+
+ name={name}
+ aria-label={t("layout_switch_label")}
+ leftLabel={t("layout_spotlight_label")}
+ leftValue="spotlight"
+ leftIcon={SpotlightViewIcon}
+ rightLabel={t("layout_grid_label")}
+ rightValue="grid"
+ rightIcon={GridIcon}
+ className={className}
+ value={layout}
+ onChange={vm.setLayout}
+ />
+ );
+};
diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx
index 487501af..8cbe6be1 100644
--- a/src/room/LobbyView.test.tsx
+++ b/src/room/LobbyView.test.tsx
@@ -11,6 +11,10 @@ import { BrowserRouter } from "react-router-dom";
import { TooltipProvider } from "@vector-im/compound-web";
import { type MatrixClient } from "matrix-js-sdk";
import { axe } from "vitest-axe";
+import {
+ ArrowLeftIcon,
+ ChevronLeftIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
import { LobbyView } from "./LobbyView";
import { E2eeType } from "../e2ee/e2eeType";
@@ -20,6 +24,7 @@ import { type ProcessorState } from "../livekit/TrackProcessorContext";
import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
import lobbyStyles from "./LobbyView.module.css";
import headerStyles from "../Header.module.css";
+import { AppBar } from "../AppBar";
vi.mock("@livekit/components-react", () => ({
usePreviewTracks: (): unknown[] => [],
@@ -47,6 +52,13 @@ const mockClient = {
getDeviceId: () => "DEVICE",
} as Partial as MatrixClient;
+const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
+vi.mock("../Platform", () => ({
+ get platform(): string {
+ return platformMock();
+ },
+}));
+
const matrixInfo = {
userId: "@user:example.org",
displayName: "Test User",
@@ -60,25 +72,32 @@ const matrixInfo = {
function renderLobbyView(
props: Partial[0]> = {},
+ withAppBar = false,
+ platform = "android",
): ReturnType {
+ platformMock.mockReturnValue(platform);
const mediaDevices = mockMediaDevices({});
const muteStates = mockMuteStates();
-
+ const hideHeader = withAppBar ? true : false;
+ const lobbyView = (
+ {}}
+ confineToRoom={false}
+ hideHeader={hideHeader}
+ participantCount={3}
+ onShareClick={null}
+ {...props}
+ />
+ );
return render(
- {}}
- confineToRoom={false}
- hideHeader={false}
- participantCount={3}
- onShareClick={null}
- {...props}
- />
+ {withAppBar && {lobbyView} }
+ {!withAppBar && lobbyView}
,
@@ -97,9 +116,10 @@ describe("LobbyView", () => {
it("renders without header", () => {
const { container } = renderLobbyView({ hideHeader: true });
- expect(
- container.getElementsByClassName(headerStyles.header).length,
- ).toBeFalsy();
+ const els = container.getElementsByClassName(headerStyles.header);
+ for (const el of els) {
+ expect(el).not.toBeVisible();
+ }
});
it("renders with waiting for invite state", () => {
@@ -108,4 +128,50 @@ describe("LobbyView", () => {
});
expect(getByTestId("lobby_joinCall")).toHaveClass(lobbyStyles.wait);
});
+
+ it("renders with AppBar android", async () => {
+ const { container, getByRole } = renderLobbyView(
+ {
+ waitingForInvite: true,
+ },
+ true,
+ "android",
+ );
+ getByRole("banner");
+ // Check that the primary button uses ArrowLeftIcon (the back/return icon),
+ // not the default CollapseIcon
+ const { container: iconContainer } = render( = ({
}, []);
const { t } = useTranslation();
- usePageTitle(matrixInfo.roomName);
+ usePageTitle(matrixInfo.roomName);
+ useAppBarPrimaryButtonIconKind("back");
const audioEnabled = useBehavior(muteStates.audio.enabled$);
const videoEnabled = useBehavior(muteStates.video.enabled$);
const toggleAudio = useBehavior(muteStates.audio.toggle$);
diff --git a/src/room/RingingAudioRenderer.test.tsx b/src/room/RingingAudioRenderer.test.tsx
new file mode 100644
index 00000000..4d95ffac
--- /dev/null
+++ b/src/room/RingingAudioRenderer.test.tsx
@@ -0,0 +1,59 @@
+/*
+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 { expect, type MockedFunction, test, vi } from "vitest";
+import { act, render } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+
+import { useAudioContext } from "../useAudioContext";
+import { createRingingMedia } from "../state/media/RingingMediaViewModel";
+import { alice, aliceId } from "../utils/test-fixtures";
+import { constant } from "../state/Behavior";
+import { RingingAudioRenderer } from "./RingingAudioRenderer";
+import { prefetchSounds } from "../soundUtils";
+
+vi.mock("../useAudioContext");
+vi.mock("../soundUtils");
+
+test("ringtone plays on loop while ringing", () => {
+ (prefetchSounds as MockedFunction).mockResolvedValue({
+ sound: new ArrayBuffer(0),
+ });
+ const endSoundLooping = vi.fn().mockReturnValue(Promise.resolve());
+ const playSoundLooping = vi.fn().mockReturnValue(endSoundLooping);
+ (useAudioContext as MockedFunction).mockReturnValue({
+ playSound: vi.fn(),
+ playSoundLooping,
+ soundDuration: {},
+ });
+
+ const pickupState$ = new BehaviorSubject<"ringing" | "timeout" | "decline">(
+ "ringing",
+ );
+ const vm = createRingingMedia({
+ id: aliceId,
+ userId: alice.userId,
+ displayName$: constant("Alice"),
+ mxcAvatarUrl$: constant(undefined),
+ intent: "audio",
+ pickupState$,
+ });
+
+ // Begin ringing
+ render( = ({
+ vm,
+ muted,
+}) => {
+ // Preload a waiting and decline sounds
+ const sounds = useInitial(async () => {
+ return prefetchSounds({
+ ringtone: { mp3: ringtoneMp3, ogg: ringtoneOgg },
+ });
+ });
+ const audio = useAudioContext({
+ sounds,
+ latencyHint: "interactive",
+ muted,
+ });
+
+ return vm && = ({
+ vm,
+ audio,
+}) => {
+ const audio_ = useLatest(audio);
+ const pickupState = useBehavior(vm.pickupState$);
+
+ // While ringing, loop the ringtone
+ useEffect((): void | (() => void) => {
+ if (pickupState === "ringing" && audio_.current) {
+ const endSound = audio_.current.playSoundLooping(
+ "ringtone",
+ audio_.current.soundDuration["ringtone"] ?? 1,
+ );
+ return () => {
+ void endSound().catch((e) => {
+ logger.error("Failed to stop ringing sound", e);
+ });
+ };
+ }
+ }, [pickupState, audio_]);
+
+ return null;
+};
diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css
index d89381eb..67eae10b 100644
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -10,6 +10,8 @@ Please see LICENSE in the repository root for full details.
margin-right: var(--content-inset-right);
min-block-size: 0;
block-size: 50vh;
+ aspect-ratio: 16 / 9;
+ max-width: 100%;
border-radius: var(--cpd-space-4x);
position: relative;
overflow: hidden;
@@ -20,6 +22,9 @@ Please see LICENSE in the repository root for full details.
height: 100%;
object-fit: cover;
background-color: var(--video-tile-background);
+ /* In FF if you add a transform: scale/translate/matrix filter on an element,
+ it'll ignore the parents' border-radius, so force back the radius to avoid UI glitch*/
+ border-radius: inherit;
}
video.mirror {
@@ -66,12 +71,6 @@ video.mirror {
);
}
-@media (min-aspect-ratio: 1 / 1) {
- .preview > video {
- aspect-ratio: 16 / 9;
- }
-}
-
@media (max-width: 550px) {
.preview {
margin-inline: 0;
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index 3efcaba1..e6e54370 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
import { TileAvatar } from "../tile/TileAvatar";
import styles from "./VideoPreview.module.css";
import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import videoPlaceholder from "../graphics/video-placeholder.gif";
export type MatrixInfo = {
userId: string;
@@ -74,6 +75,9 @@ export const VideoPreview: FC = ({
// There's no reason for this to be focusable
tabIndex={-1}
disablePictureInPicture
+ // Set the placeholder to a small transparent image. (On Android web
+ // views the default poster image is particularly ugly.)
+ poster={videoPlaceholder}
/>
{(!videoEnabled || cameraIsStarting) && (
<>
diff --git a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
index e7b38078..4239cee1 100644
--- a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
+++ b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
@@ -3,17 +3,17 @@
exports[`ConnectionLostError: Action handling should reset error state 1`] = `
@@ -158,20 +158,20 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
`;
-exports[`should have a close button in widget mode 1`] = `
+exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' error correctly 1`] = `
+
+ Failed to connect to Livekit server
+
+
+ An error occurred while connecting to the Livekit server (
+
+ Reason:
+
+
+
+ InternalError
+
+ ).
+
+
+ Return to home screen
+
+
+
+
+
+
+`;
+
+exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed' error correctly 1`] = `
+
+
+
+
+
+
+
+
+ Failed to connect to Livekit server
+
+
+ An error occurred while connecting to the Livekit server (
+
+ Reason:
+
+
+
+ NotAllowed
+
+ ).
+
+
+ Return to home screen
+
+
+
+
+
+`;
+
+exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreachable' error correctly 1`] = `
+
+
+
+
+
+
+
+
+ Failed to connect to Livekit server
+
+
+ An error occurred while connecting to the Livekit server (
+
+ Reason:
+
+
+
+ ServerUnreachable
+
+ ).
+
+
+ Return to home screen
+
+
+
+
+
+`;
+
+exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFound' error correctly 1`] = `
+
+
+
+
+
+
+
+
+ Failed to connect to Livekit server
+
+
+ An error occurred while connecting to the Livekit server (
+
+ Reason:
+
+
+
+ ServiceNotFound
+
+ ).
+
+
+ Return to home screen
+
+
+
+
+
+`;
+
+exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' error correctly 1`] = `
+
+
+
+
+
+
+
+
+ Failed to connect to Livekit server
+
+
+ An error occurred while connecting to the Livekit server (
+
+ Reason:
+
+
+
+ Timeout
+
+ ).
+
+
+ Return to home screen
+
+
+
+
+
+`;
+
+exports[`LiveKit ConnectionError variants > should link to troubleshoot guide when timeout error 1`] = `
+
+
+
+
+
+
+
+
+ Connection timeout
+
+
+ Connection to the media server timed out. Try switching to a different network or disabling your VPN. If the problem persists, see our
+
+ troubleshooting guide
+
+ or contact your server administrator.
+
+
+ Return to home screen
+
+
+
+
+
+`;
+
+exports[`should have a close button in widget mode 1`] = `
+
+
+
+
+
+
+
@@ -315,17 +1257,17 @@ exports[`should have a close button in widget mode 1`] = `
exports[`should render the error page with link back to home 1`] = `
@@ -469,17 +1411,17 @@ exports[`should render the error page with link back to home 1`] = `
exports[`should report correct error for 'Call is not supported' 1`] = `
@@ -623,17 +1565,17 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
exports[`should report correct error for 'Connection lost' 1`] = `
@@ -778,20 +1720,20 @@ exports[`should report correct error for 'Connection lost' 1`] = `
`;
-exports[`should report correct error for 'Incompatible browser' 1`] = `
+exports[`should report correct error for 'Homeserver does not support Matrix 2.…' 1`] = `
+
+ Homeserver does not support Matrix 2.0 calls
+
+
+ This deployment is configured to use Matrix 2.0 call mode, but the homeserver does not advertise support for sticky events (MSC4354). Ask your server admin to upgrade, or switch the deployment to a compatible mode.
+
+
+ Return to home screen
+
+
+
+
+
+
+`;
+
+exports[`should report correct error for 'Incompatible browser' 1`] = `
+
+
+
+
+
+
+
@@ -930,17 +2026,17 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
exports[`should report correct error for 'Insufficient capacity' 1`] = `
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 0d7e605b..984e2b12 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -3,28 +3,28 @@
exports[`InCallView > rendering > renders 1`] = `
