Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-29 21:15:19 +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

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);