ci: GitLab-Pipeline - build_embedded + manueller npm-Publish nach rohana (threadnet-call#1)

Registry-Entscheidung evidenzbasiert: das Package ist pnpm-Dependency von
ThreadNet-Webs apps/web, der Lockfile pinnt die Tarball-URL auf rohana -
Registry bleibt dort. Publish-Auth ueber CI-Variable GITEA_NPM_TOKEN statt
lokaler Klartext-.npmrc.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

playwright/widget/federated-call.test.ts

@@ -0,0 +1,83 @@
+/*
+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";
+import { HOST1, HOST2, type RtcMode, TestHelpers } from "./test-helpers";
+
+const modePairs: [RtcMode, RtcMode][] = [
+  ["compat", "compat"],
+  ["legacy", "legacy"],
+  ["legacy", "compat"],
+  ["compat", "legacy"],
+];
+
+modePairs.forEach(([rtcMode1, rtcMode2]) => {
+  widgetTest(
+    `Test federated call with rtc modes ${rtcMode1} and ${rtcMode2}`,
+    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();
+
+      const [florian, timo] = await Promise.all([
+        addUser("florian", HOST1),
+        addUser("timo", HOST2),
+      ]);
+
+      const roomName = "Call Room";
+
+      await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
+
+      await TestHelpers.acceptRoomInvite(roomName, timo.page);
+
+      await florian.page.pause();
+
+      await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
+        florian.page,
+        rtcMode1,
+      );
+      await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
+        timo.page,
+        rtcMode2,
+      );
+
+      await TestHelpers.startCallInCurrentRoom(florian.page, false);
+      await TestHelpers.joinCallFromLobby(florian.page);
+
+      // timo joins
+      await TestHelpers.joinCallInCurrentRoom(timo.page);
+
+      // We should see 2 video tiles everywhere now
+      for (const user of [timo, florian]) {
+        const frame = user.page
+          .locator('iframe[title="Element Call"]')
+          .contentFrame();
+        await expect(frame.getByTestId("videoTile")).toHaveCount(2, {
+          timeout: 10000,
+        });
+
+        // No one should be waiting for media
+        await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
+          timeout: 10000,
+        });
+
+        // There should be 2 video elements, visible and autoplaying
+        const videoElements = await frame.locator("video").all();
+        expect(videoElements.length).toBe(2);
+
+        await TestHelpers.expectVisibleVideoCount(frame, 2);
+      }
+
+      // await florian.page.pause();
+    },
+  );
+});

playwright/widget/federation-oldest-membership-bug.spec.ts

@@ -0,0 +1,85 @@
+/*
+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";
+import { HOST1, HOST2, TestHelpers } from "./test-helpers";
+
+widgetTest(
+  "Bug new joiner was not publishing on correct SFU",
+  async ({ addUser, browserName }) => {
+    test.skip(
+      browserName === "firefox",
+      "This is a bug in the old widget, not a browser problem.",
+    );
+
+    test.slow();
+
+    // 2 users in federation
+    const florian = await addUser("floriant", HOST1);
+    const timo = await addUser("timo", HOST2);
+
+    // Florian creates a room and invites Timo to it
+    const roomName = "Call Room";
+    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
+
+    // Timo joins the room
+    await TestHelpers.acceptRoomInvite(roomName, timo.page);
+
+    // Ensure we are in legacy mode (should be the default)
+    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
+      florian.page,
+      "legacy",
+    );
+    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
+      timo.page,
+      "legacy",
+    );
+
+    // Let timo create a call
+    await TestHelpers.startCallInCurrentRoom(timo.page, false);
+    await TestHelpers.joinCallFromLobby(timo.page);
+
+    // We want to simulate that the oldest membership authentication is way slower than
+    // the preffered auth.
+    // In this setup, timo advertised$ transport will be it's own, and the active will be the one from florian
+    await florian.page.route(
+      "**/matrix-rtc.othersite.m.localhost/livekit/jwt/**",
+      async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 2000)); // 5 second delay
+        await route.continue();
+      },
+    );
+
+    // Florian joins the call
+    await expect(florian.page.getByTestId("join-call-button")).toBeVisible();
+    await florian.page.getByTestId("join-call-button").click();
+    await TestHelpers.joinCallFromLobby(florian.page);
+
+    await florian.page.waitForTimeout(3000);
+    await timo.page.waitForTimeout(3000);
+
+    // We should see 2 video tiles everywhere now
+    for (const user of [timo, florian]) {
+      const frame = user.page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame();
+      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
+
+      // No one should be waiting for media
+      await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
+
+      // There should be 2 video elements, visible and autoplaying
+      await expect(frame.locator("video")).toHaveCount(2, {
+        timeout: 10000,
+      });
+
+      await TestHelpers.expectVisibleVideoCount(frame, 2);
+    }
+  },
+);

playwright/widget/hotswap-legacy-compat.test.ts

@@ -0,0 +1,91 @@
+/*
+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";
+import { HOST1, HOST2, TestHelpers } from "./test-helpers";
+
+// ## Issue
+// This test reproduces an issue with the publisher.
+// When switching local focus, we need to recreate the publisher.
+// This failed because of a dead lock in the old publishers destruction.
+//
+// There are numerus ways to enforece this situation:
+//  - oldest member swap (manually set the oldest member focus and leave with the prev oldest member)
+//    This almost never happens in the real worls since clients will set their preferredFoci list to what the oldest member is.
+//  - switch from oldest member to multi sfu as the NOT the first joiner + the first joiner is on a different sfu than your preferred sfu.
+//
+// This test uses the "switch from oldest member to multi sfu" approach.
+//
+// It is a copy of federated-call.test.ts in the `["legacy", "legacy"]` setup,
+// which once connected will make the second user switch to multi sfu.
+widgetTest(
+  `Test swapping publisher from ${HOST1} to ${HOST2}`,
+  async ({ addUser, browserName }) => {
+    test.slow();
+    test.skip(
+      browserName === "firefox",
+      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+    );
+
+    const florian = await addUser("floriant", HOST1);
+    const timo = await addUser("timo", HOST2);
+
+    const roomName = "Call Room";
+
+    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
+
+    await TestHelpers.acceptRoomInvite(roomName, timo.page);
+
+    await florian.page.pause();
+
+    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
+      florian.page,
+      "legacy",
+    );
+    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
+      timo.page,
+      "legacy",
+    );
+
+    await TestHelpers.startCallInCurrentRoom(florian.page, false);
+    await TestHelpers.joinCallFromLobby(florian.page);
+
+    // timo joins
+    await TestHelpers.joinCallInCurrentRoom(timo.page);
+
+    // We should see 2 video tiles everywhere now
+    for (const user of [timo, florian]) {
+      const frame = user.page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame();
+      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
+
+      // Wait for "Waiting for media..." to disappear (with timeout)
+      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
+        timeout: 10000, // Maximum time to wait
+      });
+
+      // There should be 2 video elements, visible and autoplaying
+      await expect(frame.locator("video")).toHaveCount(2, {
+        timeout: 10000,
+      });
+
+      await TestHelpers.expectVisibleVideoCount(frame, 2);
+    }
+
+    // now we switch the mode for timo (second joiner on multi-sfu HOST2 but currently HOST1)
+    await TestHelpers.setEmbeddedElementCallRtcMode(timo.page, "compat");
+    await timo.page.waitForTimeout(3000);
+
+    await TestHelpers.expectVisibleVideoCount(
+      timo.page.locator('iframe[title="Element Call"]').contentFrame(),
+      2,
+    );
+  },
+);

playwright/widget/huddle-call.test.ts

@@ -0,0 +1,129 @@
+/*
+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("Create and join a group call", async ({ addUser, browserName }) => {
+  // increase the timeouts, it is a long test and it is annoying to retry from the beginning for a single timeout.
+  test.slow();
+
+  test.skip(
+    browserName === "firefox",
+    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+  );
+
+  const [valere, timo, robin, halfshot, florian] = await Promise.all([
+    addUser("Valere", HOST1),
+    addUser("Timo", HOST1),
+    addUser("Robin", HOST1),
+    addUser("Halfshot", HOST1),
+    addUser("florian", HOST1),
+  ]);
+
+  const roomName = "Group Call Room";
+  await TestHelpers.createRoom(roomName, valere.page, [
+    timo.mxId,
+    robin.mxId,
+    halfshot.mxId,
+    florian.mxId,
+  ]);
+
+  for (const user of [timo, robin, halfshot, florian]) {
+    // Accept the invite
+    // This isn't super stable to get this as this super generic locator,
+    // but it works for now.
+    await TestHelpers.acceptRoomInvite(roomName, user.page);
+  }
+
+  // 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);
+
+  await Promise.all(
+    [timo, robin, halfshot, florian].map(async (user) => {
+      await TestHelpers.joinCallInCurrentRoom(user.page);
+    }),
+  );
+
+  await Promise.all(
+    [timo, robin, halfshot, florian].map(async (user) => {
+      const frame = user.page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame();
+      await expect(
+        frame.getByRole("switch", { name: "Stop video", checked: true }),
+      ).toBeVisible({
+        timeout: 10000,
+      });
+    }),
+  );
+
+  // We should see 5 video tiles everywhere now
+  await Promise.all(
+    [valere, timo, robin, halfshot, florian].map(async (user) => {
+      const frame = user.page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame();
+      await expect(frame.getByTestId("videoTile")).toHaveCount(5, {
+        timeout: 15000,
+      });
+
+      await Promise.all(
+        [valere, timo, robin, halfshot, florian].map(async (user) => {
+          // Check the names are correct
+          await expect(frame.getByText(user.displayName)).toBeVisible();
+        }),
+      );
+
+      // No one should be waiting for media
+      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
+        // Use a bigger timeout here
+        timeout: 10000,
+      });
+
+      // There should be 5 video elements, visible and autoplaying
+      await expect(frame.locator("video")).toHaveCount(5);
+      await expect(frame.locator("video[autoplay]")).toHaveCount(5);
+
+      await TestHelpers.expectVisibleVideoCount(frame, 5);
+    }),
+  );
+
+  // Quickly test muting one participant to see it reflects and that our asserts works
+  const florianFrame = florian.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame();
+  const florianVideoButton = florianFrame.getByRole("switch", {
+    name: /video/,
+  });
+  await expect(florianVideoButton).toHaveAccessibleName("Stop video");
+  await expect(florianVideoButton).toBeChecked();
+  await florianVideoButton.click();
+  // Now the button should indicate we can start video
+  await expect(florianVideoButton).toHaveAccessibleName("Start video");
+  await expect(florianVideoButton).not.toBeChecked();
+
+  {
+    const frame = valere.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    await expect(frame.locator("video")).toHaveCount(5, {
+      timeout: 10000,
+    });
+
+    // out of 5 ONLY 4 are visible (display:block) !!
+    await TestHelpers.expectVisibleVideoCount(frame, 4);
+  }
+});

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 }) => {
+  test.skip(
+    browserName === "firefox",
+    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+  );
+
+  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 audioBtn = iFrame.getByRole("switch", { name: /microphone/ });
+    const videoBtn = iFrame.getByRole("switch", { name: /video/ });
+    await expect(
+      iFrame.getByRole("button", { name: "End call" }),
+    ).toBeVisible();
+    await expect(audioBtn).toBeVisible();
+    await expect(videoBtn).toBeVisible();
+    await expect(audioBtn).toHaveAccessibleName("Mute microphone");
+    await expect(audioBtn).toBeChecked();
+    await expect(videoBtn).toHaveAccessibleName("Stop video");
+    await expect(videoBtn).toBeChecked();
+
+    await videoBtn.click();
+    await audioBtn.click();
+
+    // stop hovering on any of the buttons
+    await iFrame.getByTestId("videoTile").hover();
+
+    await expect(audioBtn).toHaveAccessibleName("Unmute microphone");
+    await expect(audioBtn).not.toBeChecked();
+    await expect(videoBtn).toHaveAccessibleName("Start video");
+    await expect(videoBtn).not.toBeChecked();
+  }
+});

playwright/widget/pip-call.test.ts

@@ -0,0 +1,77 @@
+/*
+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("Put call 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();
+
+  const valere = await addUser("Valere", HOST1);
+  const timo = await addUser("Timo", HOST1);
+
+  const callRoom = "TeamRoom";
+  await TestHelpers.createRoom(callRoom, valere.page, [timo.mxId]);
+
+  await TestHelpers.createRoom("DoubleTask", valere.page);
+
+  await TestHelpers.acceptRoomInvite(callRoom, timo.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);
+
+  await TestHelpers.joinCallInCurrentRoom(timo.page);
+
+  const frame = timo.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame();
+
+  // check that the video is on
+  await expect(
+    frame.getByRole("switch", { name: "Stop video", checked: true }),
+  ).toBeVisible({
+    // Increase timeout, as this expect was flaky
+    timeout: 15000,
+  });
+
+  // Switch to the other room, the call should go to PIP
+  await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");
+
+  // We should see the PIP overlay
+  await expect(valere.page.getByTestId("widget-pip-container")).toBeVisible();
+
+  {
+    // wait a bit so that the PIP has rendered the video
+    await valere.page.waitForTimeout(600);
+
+    // Check for a bug where the video had the wrong fit in PIP
+    const frame = valere.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    await expect(frame.locator("video")).toHaveCount(1, { timeout: 10000 });
+
+    const videoElements = await frame.locator("video").all();
+
+    const pipVideo = videoElements[0];
+    await expect(pipVideo).toHaveCSS("object-fit", "cover");
+  }
+});

playwright/widget/screen-share.test.ts

@@ -0,0 +1,152 @@
+/*
+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("Sharing screen in group call", 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(); // We are registering multiple users here, give it more time
+
+  const [alice, bob, carol] = await Promise.all([
+    addUser("Alice", HOST1),
+    addUser("Bob", HOST1),
+    addUser("Carol", HOST1),
+  ]);
+
+  const roomName = "Meeting Room";
+  await TestHelpers.createRoom(roomName, alice.page, [bob.mxId, carol.mxId]);
+
+  for (const user of [bob, carol]) {
+    // Accept the invite
+    // This isn't super stable to get this as this super generic locator,
+    // but it works for now.
+    await TestHelpers.acceptRoomInvite(roomName, user.page);
+  }
+
+  await TestHelpers.startCallInCurrentRoom(alice.page, false);
+  await expect(
+    alice.page.locator('iframe[title="Element Call"]'),
+  ).toBeVisible();
+
+  await TestHelpers.joinCallFromLobby(alice.page);
+
+  for (const user of [bob, carol]) {
+    await TestHelpers.joinCallInCurrentRoom(user.page);
+  }
+
+  for (const user of [alice, bob, carol]) {
+    const frame = user.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // Expect 3 video tiles
+    await expect(frame.locator("video")).toHaveCount(3, {
+      timeout: 10000,
+    });
+  }
+
+  // await alice.page.pause();
+
+  await alice.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame()
+    .getByRole("switch", { name: "Share screen" })
+    .click();
+
+  // await alice.page.pause();
+
+  for (const user of [alice, bob, carol]) {
+    const frame = user.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // Expect 4 (3 + screen share) video tiles
+    await expect(frame.locator("video")).toHaveCount(4, {
+      timeout: 5000,
+    });
+
+    await expect(
+      frame.locator('video[data-lk-source="screen_share"]'),
+    ).toHaveCount(1);
+  }
+
+  // Alice should be in grid mode as she is local sharing
+  {
+    const frame = alice.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+    await expect(frame.getByRole("radio", { name: "Grid" })).toBeChecked();
+  }
+
+  // Others should have switched to spotlight
+  for (const user of [bob, carol]) {
+    const frame = user.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    await expect(frame.getByRole("radio", { name: "Spotlight" })).toBeChecked();
+  }
+  // await alice.page.pause();
+  // await bob.page.pause();
+
+  // Let's start another screen share from bob
+  await bob.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame()
+    .getByRole("switch", { name: "Share screen" })
+    .click();
+
+  {
+    const frame = carol.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // Expect 5 (2 + screen share) video tiles
+    await expect(frame.locator("video")).toHaveCount(5, {
+      timeout: 5000,
+    });
+
+    await expect(
+      frame.locator('video[data-lk-source="screen_share"]'),
+    ).toHaveCount(2);
+
+    // Expect 2 indicators at the bottom
+    await expect(frame.getByTestId("screenshare-indicator")).toHaveCount(2);
+
+    // Check the first indicator is visible
+    await expect(
+      frame.getByTestId("screenshare-indicator").first(),
+    ).toHaveAttribute("data-visible", "true");
+
+    await carol.page.pause();
+
+    // now click on next
+    await expect(frame.getByRole("button", { name: "Next" })).toBeVisible();
+    await frame.getByRole("button", { name: "Next" }).click();
+
+    // Check the second indicator is visible
+    await expect(
+      frame.getByTestId("screenshare-indicator").nth(1),
+    ).toHaveAttribute("data-visible", "true");
+    // the first one should be grayed out
+    await expect(
+      frame.getByTestId("screenshare-indicator").first(),
+    ).toHaveAttribute("data-visible", "false");
+
+    // There should be a prev button now
+    await expect(frame.getByRole("button", { name: "Back" })).toBeVisible();
+
+    // await carol.page.pause();
+  }
+});

playwright/widget/simple-create.spec.ts

@@ -0,0 +1,94 @@
+/*
+Copyright 2025 New Vector 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 { TestHelpers } from "./test-helpers.ts";
+
+// Skip test, including Fixtures
+widgetTest.skip(
+  ({ browserName }) => browserName === "firefox",
+  "This test is not working on firefox, after hangup brooks is locked in a strange state with a blank widget",
+);
+
+widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
+  test.slow();
+
+  const { brooks, whistler } = asWidget;
+
+  await TestHelpers.startCallInCurrentRoom(brooks.page, false);
+
+  await expect(
+    brooks.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame()
+      .getByTestId("lobby_joinCall"),
+  ).toBeVisible();
+
+  await brooks.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame()
+    .getByTestId("lobby_joinCall")
+    .click();
+
+  // Check the join indicator on the room list
+  await expect(
+    brooks.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame()
+      .getByRole("button", { name: "End call" }),
+  ).toBeVisible();
+
+  // Join from the other side
+  await TestHelpers.joinCallInCurrentRoom(whistler.page);
+
+  // Currently disabled due to recent Element Web is bypassing Lobby
+  // await expect(
+  //   whistler.page
+  //     .locator('iframe[title="Element Call"]')
+  //     .contentFrame()
+  //     .getByTestId("lobby_joinCall"),
+  // ).toBeVisible();
+  //
+  // await whistler.page
+  //   .locator('iframe[title="Element Call"]')
+  //   .contentFrame()
+  //   .getByTestId("lobby_joinCall")
+  //   .click();
+
+  // Currrenty disabled due to recent Element Web not indicating the number of participants
+  // await expect(
+  //   whistler.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
+  // ).toBeVisible();
+
+  // await expect(
+  //   brooks.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
+  // ).toBeVisible();
+
+  // Whistler leaves
+  await whistler.page.waitForTimeout(1000);
+  await whistler.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame()
+    .getByTestId("incall_leave")
+    .click();
+
+  // Brooks leaves
+  await brooks.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame()
+    .getByTestId("incall_leave")
+    .click({ timeout: 15000 });
+
+  await expect(whistler.page.locator(".mx_BasicMessageComposer")).toBeVisible({
+    timeout: 10000,
+  });
+  await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible({
+    timeout: 10000,
+  });
+});

playwright/widget/test-helpers.ts

@@ -0,0 +1,392 @@
+/*
+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 Browser,
+  expect,
+  type JSHandle,
+  type Page,
+  type FrameLocator,
+} from "@playwright/test";
+import { type MatrixClient } from "matrix-js-sdk";
+
+import { SynapseAdmin } from "../utils/synapse-admin.ts";
+
+const PASSWORD = "foobarbaz1!";
+
+export const HOST1 = "https://app.m.localhost/#/welcome";
+export const HOST2 = "https://app.othersite.m.localhost/#/welcome";
+
+export type RtcMode = "legacy" | "compat" | "2_0";
+
+export class TestHelpers {
+  public static async startCallInCurrentRoom(
+    page: Page,
+    voice: boolean = false,
+  ): Promise<void> {
+    const buttonName = voice ? "Voice call" : "Video call";
+
+    await page.getByRole("button", { name: buttonName }).click({
+      timeout: 5000,
+    });
+
+    await page.getByRole("menuitem", { name: "Element Call" }).click({
+      timeout: 10000,
+    });
+  }
+
+  public static async joinCallFromLobby(page: Page): Promise<void> {
+    await expect(
+      page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame()
+        .getByTestId("lobby_joinCall"),
+    ).toBeVisible();
+
+    await page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame()
+      .getByTestId("lobby_joinCall")
+      .click();
+  }
+
+  public static async joinCallInCurrentDM(
+    page: Page,
+    audioOnly: boolean = false,
+  ): Promise<void> {
+    await this.joinCallInRoom(page, audioOnly, true);
+  }
+
+  public static async joinCallInCurrentRoom(
+    page: Page,
+    audioOnly: boolean = false,
+  ): Promise<void> {
+    await this.joinCallInRoom(page, audioOnly, false);
+  }
+
+  public static async joinCallInRoom(
+    page: Page,
+    audioOnly: boolean = false,
+    isDM: boolean = false,
+  ): Promise<void> {
+    // XXX This using the notification toast to join the room.
+    // Not the button in the header
+
+    await page.waitForTimeout(3000);
+    const label = isDM
+      ? audioOnly
+        ? "Incoming voice call"
+        : "Incoming video call"
+      : "Group call started";
+    await expect(page.getByText(label)).toBeVisible({
+      timeout: 10000,
+    });
+    await page.getByRole("button", { name: "Join" }).click({
+      timeout: 5000,
+    });
+  }
+
+  /**
+   * Registers a new user and returns page, clientHandle and mxId.
+   */
+  public static async registerUser(
+    browser: Browser,
+    username: string,
+    host: string = HOST1,
+  ): Promise<{
+    page: Page;
+    clientHandle: JSHandle<MatrixClient>;
+    mxId: string;
+  }> {
+    // Determine which homeserver to use based on the host
+    const synapseBaseUrl =
+      host === HOST2
+        ? "https://synapse.othersite.m.localhost"
+        : "https://synapse.m.localhost";
+
+    // Register user via Synapse Admin API to speed things up
+    const synapseAdmin = SynapseAdmin.forHomeserver(synapseBaseUrl);
+    const credentials = await synapseAdmin.registerUser(
+      username,
+      PASSWORD,
+      username,
+    );
+
+    // STEP 2: Open browser and login
+    const userContext = await browser.newContext({
+      reducedMotion: "reduce",
+    });
+    const page = await userContext.newPage();
+    await page.goto(host);
+
+    await page.getByRole("link", { name: "Sign in" }).click({
+      timeout: 10000,
+    });
+
+    await page.getByRole("textbox", { name: "Username" }).fill(username, {
+      timeout: 10000,
+    });
+    await page.getByRole("textbox", { name: "Password" }).fill(PASSWORD, {
+      timeout: 10000,
+    });
+    await page.getByRole("button", { name: "Sign in" }).click();
+
+    await expect(
+      page.getByRole("heading", { name: `Welcome ${username}` }),
+    ).toBeVisible({
+      // Increase timeout here :/ flaky
+      timeout: 15000,
+    });
+
+    await this.dismissStartupToasts(page);
+
+    await TestHelpers.setDevToolElementCallDevUrl(page);
+
+    const clientHandle = await page.evaluateHandle(() =>
+      window.mxMatrixClientPeg.get(),
+    );
+    const mxId = credentials.user_id;
+    return { page, clientHandle, mxId };
+  }
+
+  // Dismisses any toasts that appear on startup, such as "Failed to load service worker" or "Back up your chats".
+  // Toast can be stacked, and only the top one can be dismiss, so just look at what is on top and
+  // dismiss (if part of expected toats)
+  public static async dismissStartupToasts(page: Page): Promise<void> {
+    const expectedToasts = [
+      { title: "Failed to load service worker", button: "OK" },
+      { title: "Back up your chats", button: "Dismiss" },
+      { title: "Element does not support this browser", button: "Dismiss" },
+    ];
+
+    const toast = page.locator(".mx_Toast_toast");
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      try {
+        await toast.waitFor({ state: "visible", timeout: 700 });
+        const title = await toast.locator(".mx_Toast_title h2").textContent();
+
+        // Find the matching toast config
+        const toastConfig = expectedToasts.find((t) =>
+          title?.includes(t.title),
+        );
+
+        if (toastConfig) {
+          await toast.getByRole("button", { name: toastConfig.button }).click();
+        } else {
+          // Unknown toast. We don't want to act on unknown toasts
+          break;
+        }
+      } catch {
+        // No toast visible, exit loop
+        break;
+      }
+    }
+  }
+
+  public static async createRoom(
+    name: string,
+    page: Page,
+    andInvite: string[] = [],
+  ): Promise<void> {
+    await page
+      .getByRole("navigation", { name: "Room list" })
+      .getByRole("button", { name: "New conversation" })
+      .click();
+
+    await page.getByRole("menuitem", { name: "New Room" }).click({
+      timeout: 5000,
+    });
+    await page.getByRole("textbox", { name: "Name" }).fill(name);
+    await page.getByRole("button", { name: "Create room" }).click();
+    await expect(page.getByText("You created this room.")).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(page.getByText("Encryption enabled")).toBeVisible();
+    await TestHelpers.dismissStartupToasts(page);
+
+    // Invite users if any
+    if (andInvite.length > 0) {
+      await page
+        .getByRole("button", { name: "Invite to this room", exact: true })
+        .click();
+
+      const inviteInput = page.getByRole("dialog").getByRole("textbox");
+      for (const mxId of andInvite) {
+        await inviteInput.focus();
+        await inviteInput.fill(mxId);
+        await inviteInput.press("Enter");
+      }
+
+      await page.getByRole("button", { name: "Invite" }).click();
+      await TestHelpers.dismissInviteUnknownUserModal(page);
+    }
+  }
+
+  /**
+   * Accepts a room invite using the room name.
+   * Locatest the invite in the room list.
+   *
+   */
+  public static async acceptRoomInvite(
+    roomName: string,
+    page: Page,
+  ): Promise<void> {
+    await page.getByRole("option", { name: roomName }).click({
+      timeout: 10000,
+    });
+    await page.getByRole("button", { name: "Accept" }).click({
+      timeout: 5000,
+    });
+
+    await expect(
+      page.getByRole("main").getByRole("heading", { name: roomName }),
+    ).toBeVisible();
+    await TestHelpers.dismissStartupToasts(page);
+  }
+
+  /**
+   * Opens the widget and then goes to the settings to set the RTC mode.
+   * then closes the widget lobby.
+   *
+   * intended to be used before joining!
+   *
+   * WORKS IF A ROOM IS CURRENTLY OPENED IN THE PAGE
+   */
+  public static async openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
+    page: Page,
+    mode: RtcMode,
+  ): Promise<void> {
+    await page.getByRole("button", { name: "Video call" }).click({
+      timeout: 5000,
+    });
+    await page.getByRole("menuitem", { name: "Element Call" }).click({
+      timeout: 10000,
+    });
+
+    await TestHelpers.setEmbeddedElementCallRtcMode(page, mode);
+    await page.getByRole("button", { name: "Close lobby" }).click();
+  }
+
+  /**
+   * Goes to the settings to set the RTC mode.
+   * then closes the settings modal.
+   *
+   * WORKS IF A ROOM IS CURRENTLY SHOWING THE EC WIDGET
+   */
+  public static async setEmbeddedElementCallRtcMode(
+    page: Page,
+    mode: RtcMode,
+  ): Promise<void> {
+    const iframe = page.locator('iframe[title="Element Call"]').contentFrame();
+
+    await iframe.getByRole("button", { name: "Settings" }).click();
+    await iframe.getByRole("tab", { name: "Preferences" }).click();
+
+    // await iframe.getByText("Developer mode", { exact: true }).click();
+    await iframe.getByText("Developer mode", { exact: true }).check(); // Idempotent:  won't uncheck if already checked
+
+    // Move to Developer tab now
+    await iframe.getByRole("tab", { name: "Developer" }).click();
+    if (mode == "legacy") {
+      await iframe.getByText("Legacy: state events").click();
+    } else if (mode == "2_0") {
+      await iframe.getByText("Matrix 2.0").click();
+    } else {
+      // compat
+      await iframe.getByText("Compatibility: state events").click();
+    }
+    await iframe.getByTestId("modal_close").click();
+  }
+
+  /**
+   * Sets the current Element Web app to use the dev Element Call URL.
+   * @param page - The EW page
+   */
+  public static async setDevToolElementCallDevUrl(page: Page): Promise<void> {
+    if (process.env.USE_DOCKER) {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "https://call.m.localhost/room",
+        );
+      });
+    } else {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "https://localhost:3000/room",
+        );
+      });
+    }
+  }
+
+  /**
+   * Switches to a room in the room list by its name.
+   * @param page - The EW page
+   * @param roomName - The name of the room to switch to
+   */
+  public static async switchToRoomNamed(
+    page: Page,
+    roomName: string,
+  ): Promise<void> {
+    await page.getByRole("option", { name: `Open room ${roomName}` }).click();
+  }
+
+  public static async dismissInviteUnknownUserModal(page: Page): Promise<void> {
+    await expect(
+      page.getByRole("heading", { name: "Invite new contacts to this" }),
+    ).toBeVisible();
+    await page.getByRole("button", { name: "Invite" }).click({
+      timeout: 5000,
+    });
+  }
+
+  public static async dismissInviteUnknownUserModalDM(
+    page: Page,
+  ): Promise<void> {
+    await expect(
+      page.getByRole("heading", {
+        name: "Start a chat with this new contact?",
+      }),
+    ).toBeVisible();
+    await page.getByRole("button", { name: "Continue" }).click({
+      timeout: 5000,
+    });
+  }
+
+  public static async expectVisibleVideoCount(
+    frame: FrameLocator,
+    count: number,
+  ): Promise<void> {
+    // XXX we need to be better at our HTML markup and accessibility, it would make
+    // this kind of stuff way easier to test if we could look out for aria attributes.
+    await expect
+      .poll(
+        async () => {
+          return await frame
+            .locator("video")
+            .evaluateAll(
+              (videos: Element[]) =>
+                videos.filter(
+                  (v: Element) =>
+                    window.getComputedStyle(v).display === "block",
+                ).length,
+            );
+        },
+        {
+          timeout: 10000,
+        },
+      )
+      .toBe(count);
+  }
+}

playwright/widget/voice-call-dm.spec.ts

@@ -0,0 +1,235 @@
+/*
+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 { TestHelpers } from "./test-helpers.ts";
+
+widgetTest.use({ callType: "dm" });
+
+widgetTest(
+  "Start a new voice call in DM as widget",
+  async ({ asWidget, 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",
+    );
+
+    const { brooks, whistler } = asWidget;
+
+    await TestHelpers.startCallInCurrentRoom(brooks.page, true);
+
+    await expect(
+      brooks.page.locator('iframe[title="Element Call"]'),
+    ).toBeVisible();
+
+    const brooksFrame = brooks.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // We should show a ringing tile, let's check for that
+    await expect(
+      brooksFrame
+        .getByTestId("videoTile")
+        .filter({ has: brooksFrame.getByText(whistler.displayName) })
+        .filter({ has: brooksFrame.getByText("Calling…") }),
+    ).toBeVisible();
+
+    await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
+    await whistler.page.getByRole("button", { name: "Join" }).click();
+
+    await expect(
+      whistler.page.locator('iframe[title="Element Call"]'),
+    ).toBeVisible();
+
+    const whistlerFrame = whistler.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // ASSERT the button states for whistler (the callee)
+    // video should be off by default in a voice call
+    await expect(
+      whistlerFrame.getByRole("switch", {
+        name: "Start video",
+        checked: false,
+      }),
+    ).toBeVisible();
+    // audio should be on for the voice call
+    await expect(
+      whistlerFrame.getByRole("switch", {
+        name: "Mute microphone",
+        checked: true,
+      }),
+    ).toBeVisible();
+
+    // ASSERT the button states for brools (the caller)
+    // video should be off by default in a voice call
+    await expect(
+      whistlerFrame.getByRole("switch", {
+        name: "Start video",
+        checked: false,
+      }),
+    ).toBeVisible();
+    // audio should be on for the voice call
+    await expect(
+      whistlerFrame.getByRole("switch", {
+        name: "Mute microphone",
+        checked: true,
+      }),
+    ).toBeVisible();
+
+    // In order to confirm that the call is disconnected we will check that the message composer is shown again.
+    // So first we need to confirm that it is hidden when in the call.
+    await expect(
+      whistler.page.locator(".mx_BasicMessageComposer"),
+    ).not.toBeVisible();
+    await expect(
+      brooks.page.locator(".mx_BasicMessageComposer"),
+    ).not.toBeVisible();
+
+    // ASSERT hanging up on one side ends the call for both
+    await brooksFrame.getByRole("button", { name: "End call" }).click();
+
+    // The widget should be closed on both sides and the timeline should be back on screen
+    await expect(
+      whistler.page.locator(".mx_BasicMessageComposer"),
+    ).toBeVisible();
+    await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
+  },
+);
+
+widgetTest(
+  "Start a new video call in DM as widget",
+  async ({ asWidget, 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",
+    );
+
+    const { brooks, whistler } = asWidget;
+
+    await TestHelpers.startCallInCurrentRoom(brooks.page, false);
+
+    await expect(
+      brooks.page.locator('iframe[title="Element Call"]'),
+    ).toBeVisible();
+
+    const brooksFrame = brooks.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // We should show a ringing tile, let's check for that
+    await expect(
+      brooksFrame
+        .getByTestId("videoTile")
+        .filter({ has: brooksFrame.getByText(whistler.displayName) })
+        .filter({ has: brooksFrame.getByText("Calling…") }),
+    ).toBeVisible();
+
+    await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
+    await whistler.page.getByRole("button", { name: "Join" }).click();
+
+    await expect(
+      whistler.page.locator('iframe[title="Element Call"]'),
+    ).toBeVisible();
+
+    const whistlerFrame = whistler.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // ASSERT the button states for whistler (the callee)
+    // video should be off by default in a video call
+    await expect(
+      whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
+    ).toBeVisible();
+    // audio should be on too
+    await expect(
+      whistlerFrame.getByRole("switch", {
+        name: "Mute microphone",
+        checked: true,
+      }),
+    ).toBeVisible();
+
+    // ASSERT the button states for brools (the caller)
+    // video should be off by default in a video call
+    await expect(
+      whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
+    ).toBeVisible();
+    // audio should be on too
+    await expect(
+      whistlerFrame.getByRole("switch", {
+        name: "Mute microphone",
+        checked: true,
+      }),
+    ).toBeVisible();
+
+    // In order to confirm that the call is disconnected we will check that the message composer is shown again.
+    // So first we need to confirm that it is hidden when in the call.
+    await expect(
+      whistler.page.locator(".mx_BasicMessageComposer"),
+    ).not.toBeVisible();
+    await expect(
+      brooks.page.locator(".mx_BasicMessageComposer"),
+    ).not.toBeVisible();
+
+    // ASSERT hanging up on one side ends the call for both
+    await brooksFrame.getByRole("button", { name: "End call" }).click();
+
+    // The widget should be closed on both sides and the timeline should be back on screen
+    await expect(
+      whistler.page.locator(".mx_BasicMessageComposer"),
+    ).toBeVisible();
+    await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
+  },
+);
+
+widgetTest(
+  "Decline a new video call in DM as widget",
+  async ({ asWidget, 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",
+    );
+
+    const { brooks, whistler } = asWidget;
+
+    await TestHelpers.startCallInCurrentRoom(brooks.page, false);
+
+    await expect(
+      brooks.page.locator('iframe[title="Element Call"]'),
+    ).toBeVisible();
+
+    const brooksFrame = brooks.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // We should show a ringing tile, let's check for that
+    await expect(
+      brooksFrame
+        .getByTestId("videoTile")
+        .filter({ has: brooksFrame.getByText(whistler.displayName) })
+        .filter({ has: brooksFrame.getByText("Calling…") }),
+    ).toBeVisible();
+
+    await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
+    await whistler.page.getByRole("button", { name: "Decline" }).click();
+
+    await expect(
+      whistler.page.locator('iframe[title="Element Call"]'),
+    ).not.toBeVisible();
+
+    // The widget should be closed and the timeline should be back on screen
+    await expect(
+      brooks.page.locator('iframe[title="Element Call"]'),
+    ).not.toBeVisible();
+
+    await expect(
+      brooks.page.getByText("This is the beginning of your"),
+    ).toBeVisible();
+  },
+);