Redesign widget pip and move into shared component (#32654)

* redesign widget pip and move into shared component

* fix onBackClick handler

* fix ci

* Update README.md prepare -> prepack

* add vm tests

* Update WidgetPipView.stories.tsx

* fix tests

* playwright tests

* fix test id

* remove unused files (reappeared after rebase)

* update storybook screenshot tests

* update playwright tests

* adjust padding

* review

* comment and docstring corrections

* fix imports and `this.props`

* fix double `complementary` item

* add WidgetPipView tests and revmoe `setViewingRoom` from
WidgetPipViewModelInterface.

* add doc sting to `setViewingRoom`

* Update RoomStatusBarView.test.tsx

* fix copyright

* Update RoomView-test.tsx.snap

* revert accidental Copyright year changes

* update snapshot RoomView-test
This commit is contained in:
Timo
2026-03-10 16:59:51 +00:00
committed by GitHub
parent 652b9f5b5b
commit 6d99678ade
26 changed files with 810 additions and 290 deletions
@@ -508,15 +508,16 @@ test.describe("Element Call", () => {
await openAndJoinCall(page);
await app.viewRoomByName("OtherRoom");
const pipContainer = page.locator(".mx_WidgetPip");
const pipContainer = page.getByTestId("widget-pip-container");
// We should have a PiP container here.
await expect(pipContainer).toBeVisible();
// Leave the call.
const overlay = page.locator(".mx_WidgetPip_overlay");
await overlay.hover({ timeout: 2000 }); // Show the call footer.
await overlay.getByRole("button", { name: "Leave", exact: true }).click();
const fakeWidget = page.locator('iframe[title="Element Call"]').contentFrame();
// await overlay.hover({ timeout: 2000 }); // Show the call footer.
await fakeWidget.getByRole("button", { name: "Close", exact: true }).click();
// PiP container goes.
await expect(pipContainer).not.toBeVisible();
@@ -541,15 +542,14 @@ test.describe("Element Call", () => {
await openAndJoinCall(page);
await app.viewRoomByName("OtherRoom");
const pipContainer = page.locator(".mx_WidgetPip");
const pipContainer = page.getByTestId("widget-pip-container");
// We should have a PiP container here.
await expect(pipContainer).toBeVisible();
// Leave the call.
const overlay = page.locator(".mx_WidgetPip_overlay");
await overlay.hover({ timeout: 2000 }); // Show the call footer.
await overlay.getByRole("button", { name: "Leave", exact: true }).click();
const fakeWidget = page.locator('iframe[title="Element Call"]').contentFrame();
await fakeWidget.getByRole("button", { name: "Close", exact: true }).click();
// PiP container goes.
await expect(pipContainer).not.toBeVisible();
@@ -578,15 +578,16 @@ test.describe("Element Call", () => {
await openAndJoinCall(page, true);
await app.viewRoomByName("OtherRoom");
const pipContainer = page.locator(".mx_WidgetPip");
const pipContainer = page.getByTestId("widget-pip-container");
// We should have a PiP container here.
await expect(pipContainer).toBeVisible();
// Leave the call.
const overlay = page.locator(".mx_WidgetPip_overlay");
await overlay.hover({ timeout: 2000 }); // Show the call footer.
await overlay.getByRole("button", { name: "Leave", exact: true }).click();
const fakeWidget = page.locator('iframe[title="Element Call"]').contentFrame();
// await overlay.hover({ timeout: 2000 }); // Show the call footer.
await fakeWidget.getByRole("button", { name: "Close", exact: true }).click();
// PiP container goes.
await expect(pipContainer).not.toBeVisible();
@@ -139,7 +139,7 @@ test.describe("Widget PIP", () => {
);
// checks that pip window is opened
await expect(page.locator(".mx_WidgetPip")).toBeVisible();
await expect(page.getByTestId("widget-pip-container")).toBeVisible();
// checks that widget is opened in pip
const iframe = page.frameLocator(`iframe[title="${DEMO_WIDGET_NAME}"]`);
@@ -155,7 +155,7 @@ test.describe("Widget PIP", () => {
}
// checks that pip window is closed
await expect(iframe.locator(".mx_WidgetPip")).not.toBeVisible();
await expect(iframe.getByTestId("widget-pip-container")).not.toBeVisible();
});
}
});