LotusGuild/element-call
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3856 from element-hq/toger5/move-settings-out-of-bottom-bar

Browse Source 
Move settings button out of the button bar (space for loud-speaker button)
This commit is contained in:
Timo
2026-04-15 21:14:19 +08:00
committed by GitHub
parent d19191a2d3 71e389cdef
commit c922936777
11 changed files with 305 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playwright/mobile/create-call-mobile.spec.ts
+3 -1
View File
@@ -98,7 +98,9 @@ mobileTest(
// Open settings to select earpiece
await guestPage.getByRole("button", { name: "Settings" }).click();
await guestPage.getByText("Handset", { exact: true }).click();
await guestPage
.getByRole("radio", { name: "Handset", exact: true })
.click();
// dismiss settings
await guestPage.locator("#root").getByLabel("Settings").press("Escape");
src/AppBar.tsx
+2 -2
View File
@@ -68,8 +68,8 @@ export const AppBar: FC<Props> = ({ children }) => {
>
<LeftNav>
<Tooltip label={t("common.back")}>
<IconButton onClick={onBackClick}>
<CollapseIcon />
<IconButton size="24px" onClick={onBackClick}>
<CollapseIcon aria-hidden />
</IconButton>
</Tooltip>
</LeftNav>
src/__snapshots__/AppBar.test.tsx.snap
+2 -1
View File
@@ -17,7 +17,7 @@ exports[`AppBar > renders 1`] = `
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
>
<div
@@ -25,6 +25,7 @@ exports[`AppBar > renders 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
src/button/Button.tsx
+30 -12
View File
@@ -8,7 +8,11 @@ Please see LICENSE in the repository root for full details.
import { type ComponentPropsWithoutRef, type FC } from "react";
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
import {
Button as CpdButton,
IconButton,
Tooltip,
} from "@vector-im/compound-web";
import {
MicOnSolidIcon,
MicOffSolidIcon,
@@ -16,10 +20,12 @@ import {
VideoCallOffSolidIcon,
EndCallIcon,
ShareScreenSolidIcon,
SettingsSolidIcon,
OverflowHorizontalIcon,
OverflowVerticalIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import styles from "./Button.module.css";
import { platform } from "../Platform";
interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
enabled: boolean;
@@ -124,20 +130,32 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
);
};
interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
size?: "sm" | "lg";
interface SettingsIconButtonProps extends ComponentPropsWithoutRef<"button"> {
kind?: "secondary" | "primary";
}
export const SettingsButton: FC<SettingsButtonProps> = (props) => {
export const SettingsIconButton: FC<SettingsIconButtonProps> = (props) => {
const { t } = useTranslation();
const Icon =
platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
return (
<Tooltip label={t("common.settings")}>
<CpdButton
iconOnly
Icon={SettingsSolidIcon}
kind="secondary"
{...props}
/>
<IconButton {...props}>
<Icon aria-hidden />
</IconButton>
</Tooltip>
);
};
// interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
// size?: "sm" | "lg";
// }
// const SettingsButton: FC<SettingsButtonProps> = (props) => {
// const { t } = useTranslation();
// const Icon =
// platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
// return (
// <Tooltip label={t("common.settings")}>
// <CpdButton iconOnly Icon={Icon} kind="secondary" {...props} />
// </Tooltip>
// );
// };
src/room/CallEventAudioRenderer.test.tsx
+1
View File
@@ -123,6 +123,7 @@ test("does not play a sound before the call is successful", () => {
const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
[local, alice],
[localRtcMember],
undefined,
{ waitForCallPickup: true },
);
render(<CallEventAudioRenderer vm={vm} />);
src/room/InCallView.module.css
+26 -11
View File
@@ -36,13 +36,11 @@ Please see LICENSE in the repository root for full details.
inset-block-end: 0;
z-index: var(--call-view-header-footer-layer);
display: grid;
grid-template-columns:
minmax(0, var(--inline-content-inset))
1fr auto 1fr minmax(0, var(--inline-content-inset));
grid-template-areas: ". logo buttons layout .";
grid-template-columns: 1fr auto 1fr;
grid-template-areas: ". buttons layout";
align-items: center;
gap: var(--cpd-space-3x);
padding-block: var(--cpd-space-10x);
padding: var(--cpd-space-10x) var(--cpd-space-6x);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
@@ -77,8 +75,14 @@ Please see LICENSE in the repository root for full details.
pointer-events: initial;
}
.settingsLogoContainer {
display: flex;
gap: var(--cpd-space-4x);
flex-direction: row;
flex-wrap: nowrap;
}
.logo {
grid-area: logo;
justify-self: start;
display: flex;
align-items: center;
@@ -98,14 +102,25 @@ Please see LICENSE in the repository root for full details.
justify-self: end;
}
@media (max-width: 660px) {
.footer {
grid-template-areas: ". buttons buttons buttons .";
}
/*First hide the logo*/
@media (max-width: 750px) {
.logo {
display: none;
}
}
/*
With the logo hidden >500px is enough space to show overflow, buttons, layout.
Once we exceed 500 we hide everything except the buttons.
*/
@media (max-width: 500px) {
.footer {
grid-template-areas: "buttons buttons buttons";
}
/*.settingsLogoContainer {
display: none;
}*/
.layout {
display: none !important;
src/room/InCallView.test.tsx
+55 -38
View File
@@ -15,20 +15,17 @@ import {
vi,
} from "vitest";
import { render, type RenderResult } from "@testing-library/react";
import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
import { type LocalParticipant } from "livekit-client";
import { of } from "rxjs";
import { BehaviorSubject, of } from "rxjs";
import { BrowserRouter } from "react-router-dom";
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 {
mockLivekitRoom,
mockLocalParticipant,
mockMatrixRoom,
mockMatrixRoomMember,
mockMediaDevices,
mockMuteStates,
mockRemoteParticipant,
@@ -43,7 +40,9 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
import { MediaDevicesContext } from "../MediaDevicesContext";
import { HeaderStyle } from "../UrlParams";
import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
import { initializeWidget } from "../widget";
initializeWidget();
vi.hoisted(
() =>
@@ -71,10 +70,7 @@ const localParticipant = mockLocalParticipant({
const remoteParticipant = mockRemoteParticipant({
identity: "@alice:example.org:AAAAAA",
});
const carol = mockMatrixRoomMember(localRtcMember);
const roomMembers = new Map([carol].map((p) => [p.userId, p]));
const roomId = "!foo:bar";
let useRoomEncryptionSystemMock: MockedFunction<typeof useRoomEncryptionSystem>;
beforeEach(() => {
@@ -99,36 +95,13 @@ beforeEach(() => {
useRoomEncryptionSystem as typeof useRoomEncryptionSystemMock;
useRoomEncryptionSystemMock.mockReturnValue({ kind: E2eeType.NONE });
});
function createInCallView(): RenderResult & {
interface CreateInCallViewArgs {
mediaDevices?: ECMediaDevices;
}
function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
rtcSession: MockRTCSession;
} {
const client = {
getUser: () => null,
getUserId: () => localRtcMember.userId,
getDeviceId: () => localRtcMember.deviceId,
getRoom: (rId) => (rId === roomId ? room : null),
getDomain: () => "example.com",
} as Partial<MatrixClient> as MatrixClient;
const room = mockMatrixRoom({
relations: {
getChildEventsForEvent: () =>
vi.mocked({
getRelations: () => [],
}),
} as unknown as RelationsContainer,
client,
roomId,
// getMember: (userId) => roomMembers.get(userId) ?? null,
getMembers: () => Array.from(roomMembers.values()),
getMxcAvatarUrl: () => null,
hasEncryptionStateEvent: vi.fn().mockReturnValue(true),
getCanonicalAlias: () => null,
currentState: {
getJoinRule: () => JoinRule.Invite,
} as Partial<RoomState> as RoomState,
});
const mediaDevices = args.mediaDevices ?? mockMediaDevices({});
const muteState = mockMuteStates();
const livekitRoom = mockLivekitRoom(
{
@@ -138,12 +111,19 @@ function createInCallView(): RenderResult & {
remoteParticipants$: of([remoteParticipant]),
},
);
const { vm, rtcSession } = getBasicCallViewModelEnvironment([local, alice]);
const { vm, rtcSession } = getBasicCallViewModelEnvironment(
[local, alice],
undefined,
mediaDevices,
{},
);
rtcSession.joined = true;
const room = rtcSession.room;
const client = room.client;
const renderResult = render(
<BrowserRouter>
<MediaDevicesContext value={mockMediaDevices({})}>
<MediaDevicesContext value={mediaDevices}>
<ReactionsSenderProvider
vm={vm}
rtcSession={rtcSession.asMockedSession()}
@@ -190,4 +170,41 @@ describe("InCallView", () => {
expect(container).toMatchSnapshot();
});
});
describe("audioOutputSwitcher", () => {
it("is visible and can be clicked", async () => {
const user = userEvent.setup();
const switchFn = vi.fn();
// Create mediaDevices with a speaker and an earpiece available,
// with the speaker currently selected.
// This is needed so that the audio switcher button is visible
const available$ = new BehaviorSubject(
new Map<string, { type: "speaker" } | { type: "earpiece" }>([
["speaker-id", { type: "speaker" }],
["earpiece-id", { type: "earpiece" }],
]),
);
const selected$ = new BehaviorSubject<
{ id: string; virtualEarpiece: boolean } | undefined
>({ id: "speaker-id", virtualEarpiece: false });
const mediaDevices = mockMediaDevices({
audioOutput: {
available$,
selected$,
select: switchFn,
},
});
const { getByRole } = createInCallView({ mediaDevices });
// The button should be visible. When current output is "speaker",
// the switcher targets "earpiece", so the tooltip label is "Handset".
const audioOutputBtn = getByRole("button", { name: "Handset" });
expect(audioOutputBtn).toBeVisible();
await user.click(audioOutputBtn);
// Clicking the button should call select -> switchFn with the earpiece device id
expect(switchFn).toHaveBeenCalledWith("earpiece-id");
});
});
});
src/room/InCallView.tsx
+56 -45
View File
@@ -38,11 +38,11 @@ import {
MicButton,
VideoButton,
ShareScreenButton,
SettingsButton,
ReactionToggleButton,
SettingsIconButton,
} from "../button";
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
import { type HeaderStyle, useUrlParams } from "../UrlParams";
import { HeaderStyle, useUrlParams } from "../UrlParams";
import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
import { widget } from "../widget";
import styles from "./InCallView.module.css";
@@ -373,30 +373,6 @@ export const InCallView: FC<InCallViewProps> = ({
[vm],
);
useAppBarSecondaryButton(
useMemo(() => {
if (audioOutputSwitcher === null) return null;
const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
const label = isEarpieceTarget
? t("settings.devices.handset")
: t("settings.devices.loudspeaker");
return (
<Tooltip label={label}>
<IconButton
onClick={(e) => {
e.preventDefault();
audioOutputSwitcher.switch();
}}
>
<Icon />
</IconButton>
</Tooltip>
);
}, [t, audioOutputSwitcher]),
);
useAppBarHidden(!showHeader);
let header: ReactNode = null;
@@ -643,13 +619,33 @@ export const InCallView: FC<InCallViewProps> = ({
/>,
);
}
if (layout.type !== "pip")
buttons.push(
<SettingsButton
size={buttonSize}
key="settings"
onClick={openSettings}
/>,
// In this PR we just move the button ot the bottom bar. We do not yet update its apperance
const audioOutputButton = useMemo(() => {
if (audioOutputSwitcher === null) return null;
const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
const label = isEarpieceTarget
? t("settings.devices.handset")
: t("settings.devices.loudspeaker");
return (
<Tooltip label={label}>
<IconButton
key="audio_output_switcher"
onClick={(e) => {
audioOutputSwitcher.switch();
}}
>
<Icon />
</IconButton>
</Tooltip>
);
}, [t, audioOutputSwitcher]);
if (audioOutputButton) buttons.push(audioOutputButton);
useAppBarSecondaryButton(
<SettingsIconButton key="settings" onClick={openSettings} />,
);
buttons.push(
@@ -662,6 +658,20 @@ export const InCallView: FC<InCallViewProps> = ({
data-testid="incall_leave"
/>,
);
const logo = (
<div className={styles.logo}>
<LogoMark width={24} height={24} aria-hidden />
<LogoType
width={80}
height={11}
aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
/>
{/* Don't mind this odd placement, it's just a little debug label */}
{debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
</div>
);
const footer = (
<div
ref={footerRef}
@@ -671,20 +681,21 @@ export const InCallView: FC<InCallViewProps> = ({
!showFooter || (!showControls && headerStyle === "none"),
})}
>
{headerStyle !== "none" && (
<div className={styles.logo}>
<LogoMark width={24} height={24} aria-hidden />
<LogoType
width={80}
height={11}
aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
<div className={styles.settingsLogoContainer}>
{showControls &&
// Settings button is also shown in the app bar if present
headerStyle !== HeaderStyle.AppBar &&
layout.type !== "pip" && (
<SettingsIconButton
kind="secondary"
key="settings"
onClick={openSettings}
/>
{/* Don't mind this odd placement, it's just a little debug label */}
{debugTileLayout
? `Tiles generation: ${tileStoreGeneration}`
: undefined}
</div>
)}
{headerStyle !== "none" && logo}
</div>
{showControls && <div className={styles.buttons}>{buttons}</div>}
{showControls && (
<LayoutToggle
src/room/LobbyView.tsx
+2 -2
View File
@@ -36,7 +36,7 @@ import { InviteButton } from "../button/InviteButton";
import {
EndCallButton,
MicButton,
SettingsButton,
SettingsIconButton,
VideoButton,
} from "../button/Button";
import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -228,6 +228,7 @@ export const LobbyView: FC<Props> = ({
</div>
<div className={inCallStyles.footer}>
{recentsButtonInFooter && recentsButton}
<SettingsIconButton kind="secondary" onClick={openSettings} />
<div className={inCallStyles.buttons}>
<MicButton
enabled={audioEnabled}
@@ -239,7 +240,6 @@ export const LobbyView: FC<Props> = ({
onClick={toggleVideo ?? undefined}
disabled={toggleVideo === null}
/>
<SettingsButton onClick={openSettings} />
{!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
</div>
</div>
src/room/__snapshots__/InCallView.test.tsx.snap
+32 -23
View File
@@ -165,6 +165,35 @@ exports[`InCallView > rendering > renders 1`] = `
<div
class="footer"
>
<div
class="settingsLogoContainer"
>
<button
aria-labelledby="_r_8_"
class="_icon-button_1215g_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<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"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
<div
class="logo"
>
@@ -269,13 +298,14 @@ exports[`InCallView > rendering > renders 1`] = `
</g>
</svg>
</div>
</div>
<div
class="buttons"
>
<button
aria-checked="false"
aria-disabled="true"
aria-labelledby="_r_8_"
aria-labelledby="_r_d_"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="lg"
@@ -299,7 +329,7 @@ exports[`InCallView > rendering > renders 1`] = `
<button
aria-checked="false"
aria-disabled="true"
aria-labelledby="_r_d_"
aria-labelledby="_r_i_"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="lg"
@@ -320,27 +350,6 @@ exports[`InCallView > rendering > renders 1`] = `
/>
</svg>
</button>
<button
aria-labelledby="_r_i_"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
/>
</svg>
</button>
<button
aria-labelledby="_r_n_"
class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"
src/utils/test-viewmodel.ts
+4 -3
View File
@@ -34,6 +34,7 @@ import {
MockRTCSession,
testScope,
} from "./test";
import { type MediaDevices } from "../state/MediaDevices";
import { aliceRtcMember, localRtcMember } from "./test-fixtures";
import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
import { constant } from "../state/Behavior";
@@ -63,6 +64,7 @@ export function getBasicRTCSession(
getDeviceId: () => localRtcMember.deviceId,
getSyncState: () => SyncState.Syncing,
getDomain: () => null,
getAccessToken: () => "fake-token",
sendEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
redactEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
decryptEventIfNeeded: vitest.fn().mockResolvedValue(undefined),
@@ -130,6 +132,7 @@ export function getBasicRTCSession(
export function getBasicCallViewModelEnvironment(
members: RoomMember[],
initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
mediaDevicesOverride?: MediaDevices,
callViewModelOptions: Partial<CallViewModelOptions> = {},
): {
vm: CallViewModel;
@@ -145,13 +148,11 @@ export function getBasicCallViewModelEnvironment(
const handRaisedSubject$ = new BehaviorSubject({});
const reactionsSubject$ = new BehaviorSubject({});
// const remoteParticipants$ = of([aliceParticipant]);
const vm = createCallViewModel$(
testScope(),
rtcSession.asMockedSession(),
matrixRoom,
mockMediaDevices({}),
mediaDevicesOverride ?? mockMediaDevices({}),
mockMuteStates(),
{
encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },