Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-06-30 18:02:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move ringing status indicator to header on mobile

Browse Source 
On mobile, the ringing status indicator is supposed to display in the header rather than on a tile. The exact layout differs between Android and iOS. To get it right I had to refactor AppBar to use CSS grid templates.

(Also, I changed my mind about the exact ringing data I needed out of CallViewModel - sorry. A little move of the ringtone audio renderer into its own component was necessary to accommodate that.)
This commit is contained in:
Robin
2026-06-18 16:45:28 +02:00
parent 9b070052a0
commit e11c04ac87
18 changed files with 415 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/AppBar.module.css
View File

@@ -1,6 +1,12 @@
.bar {
flex-shrink: 0;
position: relative;
z-index: var(--call-view-header-footer-layer);
padding-left: var(--content-inset-left);
padding-right: var(--content-inset-right);
padding-top: env(safe-area-inset-top);
opacity: 1;
transition: opacity 0.15s;
}
/* Pseudo-element for the gradient background */
@@ -9,8 +15,7 @@
position: absolute;
inset-inline: 0;
/* Extend the gradient beyond the bottom of the header for readability */
inset-block: -24px;
z-index: var(--call-view-header-footer-layer);
inset-block: 0 -16px;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
@@ -18,21 +23,122 @@
);
}
.bar.hidden {
opacity: 0;
pointer-events: none;
/* Switch to position: absolute so the bar takes up no space in the layout
when hidden. */
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}
.bar:has(:focus-visible) {
opacity: 1;
pointer-events: initial;
}
.bar > header {
flex-shrink: 0;
position: sticky;
inset-inline: 0;
inset-block-start: 0;
block-size: 64px;
z-index: var(--call-view-header-footer-layer);
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows:
var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto)
var(--cpd-space-3x);
grid-template-areas:
". . ."
"primaryButton title secondaryButton"
". . .";
place-items: center;
column-gap: var(--cpd-space-2x);
}
.bar svg path {
fill: var(--cpd-color-icon-primary);
.bar:has(.subtitle) > header {
grid-template-rows:
var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto) var(--cpd-space-5x)
minmax(var(--cpd-space-8x), auto);
grid-template-areas:
". . ."
"primaryButton title secondaryButton"
". . ."
"subtitle subtitle subtitle";
}
.bar > header > h1 {
.primaryButton {
grid-area: primaryButton;
justify-self: start;
}
.title {
grid-area: title;
}
.subtitle {
grid-area: subtitle;
svg {
color: var(--cpd-color-icon-tertiary);
margin-inline-end: var(--cpd-space-2x);
block-size: 1.2em;
inline-size: 1.2em;
vertical-align: center;
}
}
.title,
.subtitle {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.secondaryButton {
grid-area: secondaryButton;
justify-self: end;
}
.primaryButton,
.secondaryButton {
svg * {
color: var(--cpd-color-icon-primary);
}
}
body[data-platform="ios"] {
.bar > header {
grid-template-rows: minmax(var(--cpd-space-11x), auto) var(--cpd-space-4x);
grid-template-areas: "primaryButton title secondaryButton";
}
.bar:has(.subtitle) > header {
grid-template-rows:
minmax(var(--cpd-space-6x), auto) minmax(var(--cpd-space-5x), auto)
var(--cpd-space-4x);
grid-template-areas:
"primaryButton title secondaryButton"
"primaryButton subtitle secondaryButton";
.title {
align-self: end;
/* Nudge the title and subtitle even closer together to replicate native
iOS styles */
transform: translateY(2px);
}
.subtitle {
align-self: start;
}
}
.subtitle {
color: var(--cpd-color-text-secondary);
svg {
display: none;
}
}
}

91
src/AppBar.tsx
View File

@@ -16,7 +16,8 @@ import {
type MouseEvent,
type ReactNode,
} from "react";
import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
import classNames from "classnames";
import { Heading, IconButton, Text, Tooltip } from "@vector-im/compound-web";
import {
ArrowLeftIcon,
ChevronLeftIcon,
@@ -25,12 +26,12 @@ import {
import { useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/lib/logger";
import { Header, LeftNav, RightNav } from "./Header";
import { platform } from "./Platform";
import styles from "./AppBar.module.css";
interface AppBarContext {
setTitle: (value: string) => void;
setSubtitle: (value: ReactNode) => void;
setSecondaryButton: (value: ReactNode) => void;
setPrimaryButtonIconKind: (value: "back" | "minimise") => void;
setHidden: (value: boolean) => void;
@@ -54,6 +55,7 @@ export const AppBar: FC<Props> = ({ children }) => {
}, []);
const [title, setTitle] = useState<string>("");
const [subtitle, setSubtitle] = useState<ReactNode>(undefined);
const [hidden, setHidden] = useState<boolean>(false);
const [secondaryButton, setSecondaryButton] = useState<ReactNode | null>(
null,
@@ -65,53 +67,64 @@ export const AppBar: FC<Props> = ({ children }) => {
const context = useMemo(
() => ({
setTitle,
setSubtitle,
setSecondaryButton,
setHidden,
setPrimaryButtonIconKind,
}),
[setTitle, setHidden, setSecondaryButton, setPrimaryButtonIconKind],
[
setTitle,
setSubtitle,
setHidden,
setSecondaryButton,
setPrimaryButtonIconKind,
],
);
const BackIcon = platform === "android" ? ArrowLeftIcon : ChevronLeftIcon;
return (
<>
<div
style={{ display: hidden ? "none" : "block" }}
className={styles.bar}
>
<Header
// App bar is mainly seen in the call view, which has its own
// 'reconnecting' toast
disconnectedBanner={false}
>
<LeftNav>
<Tooltip label={t("common.back")}>
<IconButton
// We render the back button (PrimaryButtonIcon) the same size as the native os.
// We render the minimise icon (default) smaller as per designs.
size={primaryButtonIcon === "back" ? "32px" : "24px"}
onClick={onBackClick}
>
{primaryButtonIcon === "back" ? (
<BackIcon aria-hidden />
) : (
<CollapseIcon aria-hidden />
)}
</IconButton>
</Tooltip>
</LeftNav>
{/* Wrap the header in a div due to annoying z-index issues with the
gradient background */}
<div className={classNames(styles.bar, { [styles.hidden]: hidden })}>
<header>
<Tooltip label={t("common.back")}>
<IconButton
className={styles.primaryButton}
// We render the back button (PrimaryButtonIcon) the same size as the native os.
// We render the minimise icon (default) smaller as per designs.
size={primaryButtonIcon === "back" ? "32px" : "24px"}
onClick={onBackClick}
>
{primaryButtonIcon === "back" ? (
<BackIcon aria-hidden />
) : (
<CollapseIcon aria-hidden />
)}
</IconButton>
</Tooltip>
{title && (
<Heading
className={styles.title}
type="body"
size="lg"
weight={platform === "android" ? "medium" : "semibold"}
size={platform === "ios" ? "md" : "lg"}
weight={platform === "ios" ? "semibold" : "medium"}
>
{title}
</Heading>
)}
<RightNav>{secondaryButton}</RightNav>
</Header>
{subtitle && (
<Text
className={styles.subtitle}
as="span"
size={platform === "ios" ? "sm" : "lg"}
>
{subtitle}
</Text>
)}
<div className={styles.secondaryButton}>{secondaryButton}</div>
</header>
</div>
<AppBarContext value={context}>{children}</AppBarContext>
</>
@@ -132,6 +145,20 @@ export function useAppBarTitle(title: string): void {
}, [title, setTitle]);
}
/**
* React hook which sets the subtitle to be shown in the app bar, if present. It
* is an error to call this hook from multiple sites in the same component tree.
*/
export function useAppBarSubtitle(subtitle: ReactNode): void {
const setSubtitle = use(AppBarContext)?.setSubtitle;
useEffect(() => {
if (setSubtitle !== undefined) {
setSubtitle(subtitle);
return (): void => setSubtitle("");
}
}, [subtitle, setSubtitle]);
}
/**
* React hook which sets the primary button icon kind. Can only be "minimise" or "back"
* It is an error to call this hook from multiple sites in the same component tree.

57
src/__snapshots__/AppBar.test.tsx.snap
View File

@@ -4,43 +4,36 @@ exports[`AppBar > renders 1`] = `
<div>
<div
class="bar"
style="display: block;"
>
<header
class="header"
>
<div
class="nav leftNav"
<header>
<button
aria-labelledby="_r_0_"
class="_icon-button_1215g_8 primaryButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
>
<button
aria-labelledby="_r_0_"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
/>
</svg>
</div>
</button>
</div>
<path
d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
/>
</svg>
</div>
</button>
<div
class="nav rightNav"
class="secondaryButton"
/>
</header>
</div>

4
src/components/CallFooterViewModel.tsx
View File

@@ -173,9 +173,7 @@ export function createCallFooterViewModel(
callModel.setSettingsOpen$,
]).pipe(
map(([isPip, showHeader, setSettingsOpen]) =>
!isPip &&
!(headerStyle === HeaderStyle.AppBar && showHeader) &&
showControls
!isPip && headerStyle !== HeaderStyle.AppBar && showControls
? (): void => setSettingsOpen(true)
: undefined,
),

48
src/room/InCallView.test.tsx
View File

@@ -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";
@@ -50,7 +44,6 @@ 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 { initializeWidget } from "../widget";
@@ -195,45 +188,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();

48
src/room/InCallView.tsx
View File

@@ -44,7 +44,6 @@ 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";
@@ -69,22 +68,23 @@ 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 { 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 { type ViewModel } from "../state/ViewModel.ts";
import { RingingStatus } from "../tile/RingingStatus.tsx";
import { RingingAudioRenderer } from "./RingingAudioRenderer.tsx";
declare module "react" {
interface CSSProperties {
@@ -240,20 +240,6 @@ export const InCallView: FC<InCallViewProps> = ({
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$);
@@ -266,7 +252,7 @@ export const InCallView: FC<InCallViewProps> = ({
() => void toggleRaisedHand(),
);
const ringingIntent = useBehavior(vm.ringingIntent$);
const ringingVm = useBehavior(vm.ringingVm$);
const audioParticipants = useBehavior(vm.livekitRoomItems$);
const participantCount = useBehavior(vm.participantCount$);
const reconnecting = useBehavior(vm.reconnecting$);
@@ -286,22 +272,6 @@ export const InCallView: FC<InCallViewProps> = ({
throw fatalCallError;
}
// While ringing, loop the ringtone
useEffect((): void | (() => void) => {
const audio = latestPickupPhaseAudio.current;
if (ringingIntent !== null && audio) {
const endSound = audio.playSoundLooping(
"waiting",
audio.soundDuration["waiting"] ?? 1,
);
return () => {
void endSound().catch((e) => {
logger.error("Failed to stop ringing sound", e);
});
};
}
}, [ringingIntent, latestPickupPhaseAudio]);
// iOS Safari doesn't reliably fire `click` on plain <div>s, so we listen
// for `pointerup` instead. Scrolls end in `pointercancel`, not `pointerup`,
// so this still only fires for taps.
@@ -363,6 +333,7 @@ export const InCallView: FC<InCallViewProps> = ({
);
useAppBarHidden(!showHeader);
useAppBarSubtitle(ringingVm && <RingingStatus vm={ringingVm} />);
let header: ReactNode = null;
switch (headerStyle) {
@@ -626,6 +597,7 @@ export const InCallView: FC<InCallViewProps> = ({
{renderContent()}
<CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
<ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
<RingingAudioRenderer vm={ringingVm} muted={muteAllAudio} />
{reconnectingToast}
{earpieceOverlay}
<ReactionsOverlay vm={vm} />

16
src/room/LobbyView.test.tsx
View File

@@ -130,16 +130,14 @@ describe("LobbyView", () => {
});
it("renders with AppBar android", async () => {
const { container } = renderLobbyView(
const { container, getByRole } = renderLobbyView(
{
waitingForInvite: true,
},
true,
"android",
);
expect(
container.getElementsByClassName(headerStyles.header).length,
).toBeTruthy();
getByRole("banner");
// Check that the primary button uses ArrowLeftIcon (the back/return icon),
// not the default CollapseIcon
const { container: iconContainer } = render(<ArrowLeftIcon />);
@@ -147,7 +145,7 @@ describe("LobbyView", () => {
.querySelector("path")!
.getAttribute("d");
const primaryButtonSvgPath = container
.querySelector(".leftNav button")
.querySelector(".primaryButton")
?.querySelector("path")
?.getAttribute("d");
expect(primaryButtonSvgPath).toBe(expectedSvgPath);
@@ -156,16 +154,14 @@ describe("LobbyView", () => {
});
it("renders with AppBar ios", async () => {
const { container } = renderLobbyView(
const { container, getByRole } = renderLobbyView(
{
waitingForInvite: true,
},
true,
"ios",
);
expect(
container.getElementsByClassName(headerStyles.header).length,
).toBeTruthy();
getByRole("banner");
// Check that the primary button uses ArrowLeftIcon (the back/return icon),
// not the default CollapseIcon
const { container: iconContainer } = render(<ChevronLeftIcon />);
@@ -173,7 +169,7 @@ describe("LobbyView", () => {
.querySelector("path")!
.getAttribute("d");
const primaryButtonSvgPath = container
.querySelector(".leftNav button")
.querySelector(".primaryButton")
?.querySelector("path")
?.getAttribute("d");
expect(primaryButtonSvgPath).toBe(expectedSvgPath);

72
src/room/RingingAudioRenderer.tsx Normal file
View File

@@ -0,0 +1,72 @@
/*
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 { useEffect, type FC } from "react";
import { logger } from "matrix-js-sdk/lib/logger";
import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
import { useBehavior } from "../useBehavior";
import { useInitial } from "../useInitial";
import { prefetchSounds } from "../soundUtils";
import ringtoneMp3 from "../sound/ringtone.mp3?url";
import ringtoneOgg from "../sound/ringtone.ogg?url";
import { type UseAudioContext, useAudioContext } from "../useAudioContext";
import { useLatest } from "../useLatest";
interface RingingAudioRendererProps {
vm: RingingMediaViewModel | null;
muted: boolean;
}
export const RingingAudioRenderer: FC<RingingAudioRendererProps> = ({
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 && <ActiveRingingAudioRenderer vm={vm} audio={audio} />;
};
interface ActiveRingingAudioRendererProps {
vm: RingingMediaViewModel;
audio: UseAudioContext<"ringtone"> | null;
}
const ActiveRingingAudioRenderer: FC<ActiveRingingAudioRendererProps> = ({
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;
};

114
src/room/__snapshots__/LobbyView.test.tsx.snap
View File

@@ -4,43 +4,36 @@ exports[`LobbyView > renders with AppBar android 1`] = `
<div>
<div
class="bar"
style="display: block;"
>
<header
class="header"
>
<div
class="nav leftNav"
<header>
<button
aria-labelledby="_r_36_"
class="_icon-button_1215g_8 primaryButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<button
aria-labelledby="_r_36_"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
/>
</svg>
</div>
</button>
</div>
<path
d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
/>
</svg>
</div>
</button>
<div
class="nav rightNav"
class="secondaryButton"
/>
</header>
</div>
@@ -242,43 +235,36 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
<div>
<div
class="bar"
style="display: block;"
>
<header
class="header"
>
<div
class="nav leftNav"
<header>
<button
aria-labelledby="_r_4a_"
class="_icon-button_1215g_8 primaryButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<button
aria-labelledby="_r_4a_"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
</div>
</button>
</div>
<path
d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
</div>
</button>
<div
class="nav rightNav"
class="secondaryButton"
/>
</header>
</div>

17
src/state/CallViewModel/CallViewModel.test.ts
View File

@@ -1420,10 +1420,13 @@ describe.each([
},
});
// Should ring for 30ms and then time out
expectObservable(vm.ringingIntent$).toBe("(ab) 26ms a", {
expectObservable(vm.ringingVm$).toBe("(ab)", {
a: null,
b: "audio",
b: expect.objectContaining({
type: "ringing",
userId: alice.userId,
intent: "audio",
}),
});
// Layout should show placeholder media for the participant we're
// ringing the entire time (even once timed out)
@@ -1463,9 +1466,13 @@ describe.each([
});
// Should ring until Alice joins
expectObservable(vm.ringingIntent$).toBe("(ab) 17ms a", {
expectObservable(vm.ringingVm$).toBe("(ab) 17ms a", {
a: null,
b: "audio",
b: expect.objectContaining({
type: "ringing",
userId: alice.userId,
intent: "audio",
}),
});
// Layout should show placeholder media for the participant we're
// ringing the entire time

16
src/state/CallViewModel/CallViewModel.ts
View File

@@ -39,12 +39,10 @@ import {
throttleTime,
timer,
takeUntil,
concat,
} from "rxjs";
import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
import {
MembershipManagerEvent,
type RTCCallIntent,
type LivekitTransportConfig,
type MatrixRTCSession,
} from "matrix-js-sdk/lib/matrixrtc";
@@ -232,9 +230,9 @@ export interface CallViewModel {
// lifecycle
autoLeave$: Observable<AutoLeaveReason>;
/**
* Whether we are ringing a call recipient. Contains the ringing intent if so.
* View model for info relating to ringing, timing out, calling back, etc.
*/
ringingIntent$: Behavior<RTCCallIntent | null>;
ringingVm$: Behavior<RingingMediaViewModel | null>;
/** Observable that emits when the user should leave the call (hangup pressed, widget action, error).
* THIS DOES NOT LEAVE THE CALL YET. The only way to leave the call (send the hangup event) is
* - by ending the scope
@@ -1717,15 +1715,7 @@ export function createCallViewModel$(
return {
autoLeave$: autoLeave$,
ringingIntent$: scope.behavior(
ringAttempts$.pipe(
switchMap(({ intent, outcome$ }) =>
// Hold the intent as the value until the ring attempt completes
concat(of(intent), NEVER.pipe(takeUntil(outcome$)), of(null)),
),
startWith<RTCCallIntent | null>(null),
),
),
ringingVm$: ringingMedia$,
leave$: leave$,
hangup: (): void => userHangup$.next(),
join: localMembership.requestJoinAndPublish,

18
src/tile/GridTile.tsx
View File

@@ -29,15 +29,13 @@ import {
UserProfileIcon,
VolumeOffSolidIcon,
SwitchCameraSolidIcon,
VideoCallSolidIcon,
VoiceCallSolidIcon,
EndCallIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import {
ContextMenu,
MenuItem,
ToggleMenuItem,
Menu,
Text,
} from "@vector-im/compound-web";
import { useObservableEagerState } from "observable-hooks";
@@ -53,6 +51,7 @@ import { type LocalUserMediaViewModel } from "../state/media/LocalUserMediaViewM
import { type RemoteUserMediaViewModel } from "../state/media/RemoteUserMediaViewModel";
import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
import { RingingStatus } from "./RingingStatus";
interface TileProps {
ref?: Ref<HTMLDivElement>;
@@ -75,9 +74,6 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
className,
...props
}) => {
const { t } = useTranslation();
const pickupState = useBehavior(vm.pickupState$);
return (
<MediaView
className={classNames(className, styles.tile)}
@@ -85,13 +81,9 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
userId={vm.userId}
unencryptedWarning={false}
status={
pickupState === "ringing"
? {
text: t("video_tile.calling"),
Icon:
vm.intent === "video" ? VideoCallSolidIcon : VoiceCallSolidIcon,
}
: { text: t("video_tile.call_ended"), Icon: EndCallIcon }
<Text as="span" size="sm" weight="medium">
<RingingStatus vm={vm} />
</Text>
}
videoEnabled={false}
videoFit="cover"

18
src/tile/MediaView.module.css
View File

@@ -121,18 +121,22 @@ unconditionally select the container so we can use cqmin units */
.status {
grid-area: status;
color: var(--cpd-color-text-primary);
display: flex;
flex-wrap: none;
align-items: center;
gap: 3px;
user-select: none;
overflow: hidden;
margin-block-start: calc(var(--cpd-space-3x) - var(--fg-inset));
margin-inline-start: calc(var(--cpd-space-4x) - var(--fg-inset));
}
.status svg {
color: var(--cpd-color-icon-tertiary);
span {
vertical-align: center;
}
svg {
color: var(--cpd-color-icon-tertiary);
vertical-align: center;
margin-inline-end: 3px;
block-size: 1.2em;
inline-size: 1.2em;
}
}
.reactions {

19
src/tile/MediaView.tsx
View File

@@ -7,13 +7,7 @@ Please see LICENSE in the repository root for full details.
import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
import { animated } from "@react-spring/web";
import {
type FC,
type ComponentProps,
type ReactNode,
type ComponentType,
type SVGAttributes,
} from "react";
import { type FC, type ComponentProps, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { VideoTrack } from "@livekit/components-react";
@@ -43,7 +37,7 @@ interface Props extends ComponentProps<typeof animated.div> {
userId: string;
videoEnabled: boolean;
unencryptedWarning: boolean;
status?: { text: string; Icon: ComponentType<SVGAttributes<SVGElement>> };
status?: ReactNode;
showNameTags: boolean;
nameTagLeadingIcon?: ReactNode;
displayName: string;
@@ -180,14 +174,7 @@ export const MediaView: FC<Props> = ({
/>
</>
)}
{status && (
<div className={styles.status}>
<status.Icon width={16} height={16} aria-hidden />
<Text as="span" size="sm" weight="medium">
{status.text}
</Text>
</div>
)}
{status && <div className={styles.status}>{status}</div>}
{/* TODO: Bring this back once encryption status is less broken */}
{/*encryptionStatus !== EncryptionStatus.Okay && (
<div className={styles.status}>

41
src/tile/RingingStatus.tsx Normal file
View File

@@ -0,0 +1,41 @@
/*
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 } from "react";
import {
VideoCallSolidIcon,
VoiceCallSolidIcon,
EndCallIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { useTranslation } from "react-i18next";
import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
import { useBehavior } from "../useBehavior";
interface Props {
vm: RingingMediaViewModel;
}
export const RingingStatus: FC<Props> = ({ vm }) => {
const { t } = useTranslation();
const pickupState = useBehavior(vm.pickupState$);
const Icon =
pickupState === "ringing"
? vm.intent === "video"
? VideoCallSolidIcon
: VoiceCallSolidIcon
: EndCallIcon;
return (
<>
<Icon aria-hidden />
{pickupState === "ringing"
? t("video_tile.calling")
: t("video_tile.call_ended")}
</>
);
};

9
src/tile/SpotlightTile.test.tsx
View File

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
*/
import { test, expect, vi } from "vitest";
import { act, isInaccessible, render, screen } from "@testing-library/react";
import { isInaccessible, render, screen } from "@testing-library/react";
import { axe } from "vitest-axe";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
@@ -177,11 +177,6 @@ test("SpotlightTile displays ringing media", async () => {
);
expect(await axe(container)).toHaveNoViolations();
// Alice should be in the spotlight with the right status
// Alice should be in the spotlight
screen.getByText("Alice");
screen.getByText("Calling…");
// Now we time out ringing to Alice
act(() => pickupState$.next("timeout"));
screen.getByText("Call ended");
});

15
src/tile/SpotlightTile.tsx
View File

@@ -24,9 +24,6 @@ import {
VolumeOnIcon,
VolumeOffSolidIcon,
VolumeOnSolidIcon,
VideoCallSolidIcon,
VoiceCallSolidIcon,
EndCallIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { animated } from "@react-spring/web";
import { type Observable, map } from "rxjs";
@@ -210,22 +207,10 @@ const SpotlightRingingMediaItem: FC<SpotlightRingingMediaItemProps> = ({
vm,
...props
}) => {
const { t } = useTranslation();
const pickupState = useBehavior(vm.pickupState$);
return (
<MediaView
video={undefined}
unencryptedWarning={false}
status={
pickupState === "ringing"
? {
text: t("video_tile.calling"),
Icon:
vm.intent === "video" ? VideoCallSolidIcon : VoiceCallSolidIcon,
}
: { text: t("video_tile.call_ended"), Icon: EndCallIcon }
}
videoEnabled={false}
videoFit="cover"
mirror={false}

2
src/useAudioContext.tsx
View File

@@ -113,7 +113,7 @@ interface Props<S extends string> {
muted?: boolean;
}
interface UseAudioContext<S extends string> {
export interface UseAudioContext<S extends string> {
playSound(soundName: S, volumeOverwrite?: number): Promise<void>;
playSoundLooping(soundName: S, delayS?: number): () => Promise<void>;
/**