From 8db1c4c37016092b17e0ed281d63234cb9253751 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 4 Mar 2026 16:47:15 +0100 Subject: [PATCH 01/10] Implement new Pip Layout (with control buttons) --- src/button/Button.tsx | 9 ++++- src/room/InCallView.module.css | 43 +++++++++++++----------- src/room/InCallView.tsx | 14 +++++++- src/state/CallViewModel/CallViewModel.ts | 2 +- src/state/PipLayout.ts | 3 +- 5 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 3136e2da..4bb0058d 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -23,6 +23,7 @@ import styles from "./Button.module.css"; interface MicButtonProps extends ComponentPropsWithoutRef<"button"> { muted: boolean; + size: "sm" | "lg"; } export const MicButton: FC = ({ muted, ...props }) => { @@ -47,6 +48,7 @@ export const MicButton: FC = ({ muted, ...props }) => { interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> { muted: boolean; + size: "sm" | "lg"; } export const VideoButton: FC = ({ muted, ...props }) => { @@ -71,6 +73,7 @@ export const VideoButton: FC = ({ muted, ...props }) => { interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> { enabled: boolean; + size: "sm" | "lg"; } export const ShareScreenButton: FC = ({ @@ -94,7 +97,11 @@ export const ShareScreenButton: FC = ({ ); }; -export const EndCallButton: FC> = ({ +interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> { + size: "sm" | "lg"; +} + +export const EndCallButton: FC = ({ className, ...props }) => { diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css index 55724932..70f7c73a 100644 --- a/src/room/InCallView.module.css +++ b/src/room/InCallView.module.css @@ -108,22 +108,9 @@ Please see LICENSE in the repository root for full details. } } -@media (max-width: 370px) { - .shareScreen { - display: none; - } - - @media (max-height: 400px) { - .footer { - display: none; - } - } -} - -@media (max-width: 320px) { - .invite, - .raiseHand { - display: none; +@media (max-height: 800px) { + .footer { + padding-block: var(--cpd-space-8x); } } @@ -133,9 +120,27 @@ Please see LICENSE in the repository root for full details. } } -@media (max-height: 800px) { - .footer { - padding-block: var(--cpd-space-8x); +@media (max-width: 370px) { + .shareScreen { + display: none; + } + + /* PIP custom css */ + @media (max-height: 400px) { + .shareScreen { + display: flex; + } + .footer { + padding-block-start: var(--cpd-space-3x); + padding-block-end: var(--cpd-space-2x); + } + } +} + +@media (max-width: 320px) { + .invite, + .raiseHand { + display: none; } } diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index d8803b22..f1a872a0 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -640,8 +640,10 @@ export const InCallView: FC = ({ const buttons: JSX.Element[] = []; + const buttonSize = layout.type === "pip" ? "sm" : "lg"; buttons.push( = ({ data-testid="incall_mute" />, = ({ if (vm.toggleScreenSharing !== null) { buttons.push( = ({ if (supportsReactions) { buttons.push( = ({ ); } if (layout.type !== "pip") - buttons.push(); + buttons.push( + , + ); buttons.push( { switch (mode) { case "pip": - return of(false); + return of(true); case "normal": case "narrow": return of(true); diff --git a/src/state/PipLayout.ts b/src/state/PipLayout.ts index 56e9aeb2..25a84e94 100644 --- a/src/state/PipLayout.ts +++ b/src/state/PipLayout.ts @@ -16,7 +16,8 @@ export function pipLayout( prevTiles: TileStore, ): [PipLayout, TileStore] { const update = prevTiles.from(0); - update.registerSpotlight(media.spotlight, true); + // Dont maximise in pip since we want the rounded corners and the footer + update.registerSpotlight(media.spotlight, false); const tiles = update.build(); return [ { From 38382539ad22e6e920a001c8b284e0548f876df2 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 9 Mar 2026 13:42:28 +0100 Subject: [PATCH 02/10] fix lints --- src/button/Button.tsx | 7 ++++--- src/button/ReactionToggleButton.tsx | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 4bb0058d..51fc0a1f 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -121,9 +121,10 @@ export const EndCallButton: FC = ({ ); }; -export const SettingsButton: FC> = ( - props, -) => { +interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> { + size: "sm" | "lg"; +} +export const SettingsButton: FC = (props) => { const { t } = useTranslation(); return ( diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx index 0c722baf..3e8f647f 100644 --- a/src/button/ReactionToggleButton.tsx +++ b/src/button/ReactionToggleButton.tsx @@ -166,6 +166,7 @@ export function ReactionPopupMenu({ interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> { identifier: string; vm: CallViewModel; + size: "sm" | "lg"; } export function ReactionToggleButton({ From 273eedd256816599bd6b03063aaa4311941a20e6 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 9 Mar 2026 13:42:47 +0100 Subject: [PATCH 03/10] keep pip as it was before on mobile --- src/state/CallViewModel/CallViewModel.ts | 4 ++-- src/state/PipLayout.ts | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts index 9a9ac11c..18e49d0a 100644 --- a/src/state/CallViewModel/CallViewModel.ts +++ b/src/state/CallViewModel/CallViewModel.ts @@ -63,7 +63,7 @@ import { playReactionsSound, showReactions, } from "../../settings/settings"; -import { isFirefox } from "../../Platform"; +import { isFirefox, platform } from "../../Platform"; import { setPipEnabled$ } from "../../controls"; import { TileStore } from "../TileStore"; import { gridLikeLayout } from "../GridLikeLayout"; @@ -1271,7 +1271,7 @@ export function createCallViewModel$( switchMap((mode) => { switch (mode) { case "pip": - return of(true); + return of(platform === "desktop" ? true : false); case "normal": case "narrow": return of(true); diff --git a/src/state/PipLayout.ts b/src/state/PipLayout.ts index 25a84e94..6ac1e4f0 100644 --- a/src/state/PipLayout.ts +++ b/src/state/PipLayout.ts @@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ +import { platform } from "../Platform.ts"; import { type PipLayout, type PipLayoutMedia } from "./layout-types.ts"; import { type TileStore } from "./TileStore"; @@ -16,8 +17,11 @@ export function pipLayout( prevTiles: TileStore, ): [PipLayout, TileStore] { const update = prevTiles.from(0); - // Dont maximise in pip since we want the rounded corners and the footer - update.registerSpotlight(media.spotlight, false); + // Dont maximise in pip on EW since we want the rounded corners and the footer + update.registerSpotlight( + media.spotlight, + platform === "desktop" ? false : true, + ); const tiles = update.build(); return [ { From 54bef07b3b895ee391928460d5a9cf98eed5a40b Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 9 Mar 2026 14:40:13 +0100 Subject: [PATCH 04/10] linter --- src/button/Button.tsx | 8 ++++---- src/button/ReactionToggleButton.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 51fc0a1f..00d803f1 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -23,7 +23,7 @@ import styles from "./Button.module.css"; interface MicButtonProps extends ComponentPropsWithoutRef<"button"> { muted: boolean; - size: "sm" | "lg"; + size?: "sm" | "lg"; } export const MicButton: FC = ({ muted, ...props }) => { @@ -48,7 +48,7 @@ export const MicButton: FC = ({ muted, ...props }) => { interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> { muted: boolean; - size: "sm" | "lg"; + size?: "sm" | "lg"; } export const VideoButton: FC = ({ muted, ...props }) => { @@ -98,7 +98,7 @@ export const ShareScreenButton: FC = ({ }; interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> { - size: "sm" | "lg"; + size?: "sm" | "lg"; } export const EndCallButton: FC = ({ @@ -122,7 +122,7 @@ export const EndCallButton: FC = ({ }; interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> { - size: "sm" | "lg"; + size?: "sm" | "lg"; } export const SettingsButton: FC = (props) => { const { t } = useTranslation(); diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx index 3e8f647f..28163321 100644 --- a/src/button/ReactionToggleButton.tsx +++ b/src/button/ReactionToggleButton.tsx @@ -166,7 +166,7 @@ export function ReactionPopupMenu({ interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> { identifier: string; vm: CallViewModel; - size: "sm" | "lg"; + size?: "sm" | "lg"; } export function ReactionToggleButton({ From 6485da8fff9fbd5c2957f327b251c914d91b2deb Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 10 Mar 2026 15:17:41 +0100 Subject: [PATCH 05/10] add playwright tests for new pip layout --- .../pip-call-button-interaction.test.ts | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 playwright/widget/pip-call-button-interaction.test.ts diff --git a/playwright/widget/pip-call-button-interaction.test.ts b/playwright/widget/pip-call-button-interaction.test.ts new file mode 100644 index 00000000..77659672 --- /dev/null +++ b/playwright/widget/pip-call-button-interaction.test.ts @@ -0,0 +1,71 @@ +/* +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, test } from "@playwright/test"; + +import { widgetTest } from "../fixtures/widget-user.ts"; +import { HOST1, TestHelpers } from "./test-helpers.ts"; + +widgetTest( + "Footer interaction in PiP", + async ({ addUser, browserName, page }) => { + test.skip( + browserName === "firefox", + "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled", + ); + + test.slow(); + + const valere = await addUser("Valere", HOST1); + + const callRoom = "CallRoom"; + await TestHelpers.createRoom("CallRoom", valere.page); + + await TestHelpers.createRoom("OtherRoom", valere.page); + + await TestHelpers.switchToRoomNamed(valere.page, callRoom); + + // Start the call as Valere + await TestHelpers.startCallInCurrentRoom(valere.page, false); + await expect( + valere.page.locator('iframe[title="Element Call"]'), + ).toBeVisible(); + + await TestHelpers.joinCallFromLobby(valere.page); + // wait a bit so that the PIP has rendered + await valere.page.waitForTimeout(600); + + // Switch to the other room, the call should go to PIP + await TestHelpers.switchToRoomNamed(valere.page, "OtherRoom"); + + // We should see the PIP overlay + const iFrame = valere.page + .locator('iframe[title="Element Call"]') + .contentFrame(); + + { + // Check for a bug where the video had the wrong fit in PIP + const hangupButton = iFrame.getByRole("button", { name: "End call" }); + const videoMuteButton = iFrame.getByRole("button", { + name: "Stop video", + }); + const audioMuteButton = iFrame.getByRole("button", { + name: "Mute microphone", + }); + await expect(hangupButton).toBeVisible(); + await expect(videoMuteButton).toBeVisible(); + await expect(audioMuteButton).toBeVisible(); + + // TODO once we have the EW version that supports the interactive pip element we can activate those checks + // await videoMuteButton.click(); + // await audioMuteButton.click(); + + // await expect(videoMuteButton).toHaveCSS("disabled", "true"); + // await expect(audioMuteButton).toHaveCSS("disabled", "true"); + } + }, +); From 1e400bc5502bee7f46e6a658fe55cb39cc34c369 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 10 Mar 2026 18:26:12 +0100 Subject: [PATCH 06/10] remove unsused import --- .../pip-call-button-interaction.test.ts | 93 +++++++++---------- 1 file changed, 45 insertions(+), 48 deletions(-) diff --git a/playwright/widget/pip-call-button-interaction.test.ts b/playwright/widget/pip-call-button-interaction.test.ts index 77659672..84cee3fa 100644 --- a/playwright/widget/pip-call-button-interaction.test.ts +++ b/playwright/widget/pip-call-button-interaction.test.ts @@ -10,62 +10,59 @@ import { expect, test } from "@playwright/test"; import { widgetTest } from "../fixtures/widget-user.ts"; import { HOST1, TestHelpers } from "./test-helpers.ts"; -widgetTest( - "Footer interaction in PiP", - async ({ addUser, browserName, page }) => { - test.skip( - browserName === "firefox", - "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled", - ); +widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => { + test.skip( + browserName === "firefox", + "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled", + ); - test.slow(); + test.slow(); - const valere = await addUser("Valere", HOST1); + const valere = await addUser("Valere", HOST1); + await valere.page.pause(); + const callRoom = "CallRoom"; + await TestHelpers.createRoom("CallRoom", valere.page); - const callRoom = "CallRoom"; - await TestHelpers.createRoom("CallRoom", valere.page); + await TestHelpers.createRoom("OtherRoom", valere.page); - await TestHelpers.createRoom("OtherRoom", valere.page); + await TestHelpers.switchToRoomNamed(valere.page, callRoom); - await TestHelpers.switchToRoomNamed(valere.page, callRoom); + // Start the call as Valere + await TestHelpers.startCallInCurrentRoom(valere.page, false); + await expect( + valere.page.locator('iframe[title="Element Call"]'), + ).toBeVisible(); - // Start the call as Valere - await TestHelpers.startCallInCurrentRoom(valere.page, false); - await expect( - valere.page.locator('iframe[title="Element Call"]'), - ).toBeVisible(); + await TestHelpers.joinCallFromLobby(valere.page); + // wait a bit so that the PIP has rendered + await valere.page.waitForTimeout(600); - await TestHelpers.joinCallFromLobby(valere.page); - // wait a bit so that the PIP has rendered - await valere.page.waitForTimeout(600); + // Switch to the other room, the call should go to PIP + await TestHelpers.switchToRoomNamed(valere.page, "OtherRoom"); - // Switch to the other room, the call should go to PIP - await TestHelpers.switchToRoomNamed(valere.page, "OtherRoom"); + // We should see the PIP overlay + const iFrame = valere.page + .locator('iframe[title="Element Call"]') + .contentFrame(); - // We should see the PIP overlay - const iFrame = valere.page - .locator('iframe[title="Element Call"]') - .contentFrame(); + { + // Check for a bug where the video had the wrong fit in PIP + const hangupButton = iFrame.getByRole("button", { name: "End call" }); + const videoMuteButton = iFrame.getByRole("button", { + name: "Stop video", + }); + const audioMuteButton = iFrame.getByRole("button", { + name: "Mute microphone", + }); + await expect(hangupButton).toBeVisible(); + await expect(videoMuteButton).toBeVisible(); + await expect(audioMuteButton).toBeVisible(); - { - // Check for a bug where the video had the wrong fit in PIP - const hangupButton = iFrame.getByRole("button", { name: "End call" }); - const videoMuteButton = iFrame.getByRole("button", { - name: "Stop video", - }); - const audioMuteButton = iFrame.getByRole("button", { - name: "Mute microphone", - }); - await expect(hangupButton).toBeVisible(); - await expect(videoMuteButton).toBeVisible(); - await expect(audioMuteButton).toBeVisible(); + // TODO once we have the EW version that supports the interactive pip element we can activate those checks + // await videoMuteButton.click(); + // await audioMuteButton.click(); - // TODO once we have the EW version that supports the interactive pip element we can activate those checks - // await videoMuteButton.click(); - // await audioMuteButton.click(); - - // await expect(videoMuteButton).toHaveCSS("disabled", "true"); - // await expect(audioMuteButton).toHaveCSS("disabled", "true"); - } - }, -); + // await expect(videoMuteButton).toHaveCSS("disabled", "true"); + // await expect(audioMuteButton).toHaveCSS("disabled", "true"); + } +}); From 3a9d3945293f8baea4f698353cec42c602c765fd Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 11 Mar 2026 14:05:09 +0100 Subject: [PATCH 07/10] activate click tests --- playwright/widget/pip-call-button-interaction.test.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/playwright/widget/pip-call-button-interaction.test.ts b/playwright/widget/pip-call-button-interaction.test.ts index 84cee3fa..a646db2f 100644 --- a/playwright/widget/pip-call-button-interaction.test.ts +++ b/playwright/widget/pip-call-button-interaction.test.ts @@ -58,11 +58,10 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => { await expect(videoMuteButton).toBeVisible(); await expect(audioMuteButton).toBeVisible(); - // TODO once we have the EW version that supports the interactive pip element we can activate those checks - // await videoMuteButton.click(); - // await audioMuteButton.click(); + await videoMuteButton.click(); + await audioMuteButton.click(); - // await expect(videoMuteButton).toHaveCSS("disabled", "true"); - // await expect(audioMuteButton).toHaveCSS("disabled", "true"); + await expect(videoMuteButton).toHaveCSS("disabled", "true"); + await expect(audioMuteButton).toHaveCSS("disabled", "true"); } }); From d00ff78d65ee7583578147e268bbf52c12106b5e Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 11 Mar 2026 15:21:36 +0100 Subject: [PATCH 08/10] fix pip interaction test (button presses) --- .../pip-call-button-interaction.test.ts | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/playwright/widget/pip-call-button-interaction.test.ts b/playwright/widget/pip-call-button-interaction.test.ts index a646db2f..f798545d 100644 --- a/playwright/widget/pip-call-button-interaction.test.ts +++ b/playwright/widget/pip-call-button-interaction.test.ts @@ -19,7 +19,7 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => { test.slow(); const valere = await addUser("Valere", HOST1); - await valere.page.pause(); + const callRoom = "CallRoom"; await TestHelpers.createRoom("CallRoom", valere.page); @@ -48,20 +48,33 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => { { // Check for a bug where the video had the wrong fit in PIP const hangupButton = iFrame.getByRole("button", { name: "End call" }); - const videoMuteButton = iFrame.getByRole("button", { - name: "Stop video", - }); - const audioMuteButton = iFrame.getByRole("button", { - name: "Mute microphone", - }); + const audioMuteButton = iFrame.getByTestId("incall_mute"); + const videoMuteButton = iFrame.getByTestId("incall_videomute"); await expect(hangupButton).toBeVisible(); - await expect(videoMuteButton).toBeVisible(); await expect(audioMuteButton).toBeVisible(); - + await expect(videoMuteButton).toBeVisible(); + await expect(audioMuteButton).toHaveCSS( + "background-color", + "rgb(255, 255, 255)", + ); + await expect(videoMuteButton).toHaveCSS( + "background-color", + "rgb(255, 255, 255)", + ); await videoMuteButton.click(); await audioMuteButton.click(); + // stop hovering on any of the buttons + await iFrame.getByTestId("videoTile").hover(); + await valere.page.pause(); - await expect(videoMuteButton).toHaveCSS("disabled", "true"); - await expect(audioMuteButton).toHaveCSS("disabled", "true"); + await expect(audioMuteButton).toHaveCSS( + "background-color", + "rgb(27, 29, 34)", + ); + + await expect(videoMuteButton).toHaveCSS( + "background-color", + "rgb(27, 29, 34)", + ); } }); From a20edca9a12a711777e2cc952b7cd90681b9a973 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 11 Mar 2026 15:36:37 +0100 Subject: [PATCH 09/10] fix pip container query --- playwright/widget/pip-call.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playwright/widget/pip-call.test.ts b/playwright/widget/pip-call.test.ts index 49ebec52..d57befc1 100644 --- a/playwright/widget/pip-call.test.ts +++ b/playwright/widget/pip-call.test.ts @@ -55,7 +55,7 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => { await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask"); // We should see the PIP overlay - await expect(valere.page.locator(".mx_WidgetPip_overlay")).toBeVisible(); + await expect(valere.page.getByTestId("widget-pip-container")).toBeVisible(); { // wait a bit so that the PIP has rendered the video From c7f25feb662c82182c494d79cba09fb184edd31d Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 11 Mar 2026 15:44:47 +0100 Subject: [PATCH 10/10] use better test condition for mute buttons --- .../pip-call-button-interaction.test.ts | 40 +++++++------------ 1 file changed, 14 insertions(+), 26 deletions(-) diff --git a/playwright/widget/pip-call-button-interaction.test.ts b/playwright/widget/pip-call-button-interaction.test.ts index f798545d..1dda652d 100644 --- a/playwright/widget/pip-call-button-interaction.test.ts +++ b/playwright/widget/pip-call-button-interaction.test.ts @@ -47,34 +47,22 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => { { // Check for a bug where the video had the wrong fit in PIP - const hangupButton = iFrame.getByRole("button", { name: "End call" }); - const audioMuteButton = iFrame.getByTestId("incall_mute"); - const videoMuteButton = iFrame.getByTestId("incall_videomute"); - await expect(hangupButton).toBeVisible(); - await expect(audioMuteButton).toBeVisible(); - await expect(videoMuteButton).toBeVisible(); - await expect(audioMuteButton).toHaveCSS( - "background-color", - "rgb(255, 255, 255)", - ); - await expect(videoMuteButton).toHaveCSS( - "background-color", - "rgb(255, 255, 255)", - ); - await videoMuteButton.click(); - await audioMuteButton.click(); + const hangupBtn = iFrame.getByRole("button", { name: "End call" }); + const audioBtn = iFrame.getByTestId("incall_mute"); + const videoBtn = iFrame.getByTestId("incall_videomute"); + await expect(hangupBtn).toBeVisible(); + await expect(audioBtn).toBeVisible(); + await expect(videoBtn).toBeVisible(); + await expect(audioBtn).toHaveAttribute("aria-label", /^Mute microphone$/); + await expect(videoBtn).toHaveAttribute("aria-label", /^Stop video$/); + + await videoBtn.click(); + await audioBtn.click(); + // stop hovering on any of the buttons await iFrame.getByTestId("videoTile").hover(); - await valere.page.pause(); - await expect(audioMuteButton).toHaveCSS( - "background-color", - "rgb(27, 29, 34)", - ); - - await expect(videoMuteButton).toHaveCSS( - "background-color", - "rgb(27, 29, 34)", - ); + await expect(audioBtn).toHaveAttribute("aria-label", /^Unmute microphone$/); + await expect(videoBtn).toHaveAttribute("aria-label", /^Start video$/); } });