small code comment fixups

Update dependency lodash-es to v4.17.23 [SECURITY]

.eslintrc.cjs

@@ -99,6 +99,13 @@ module.exports = {
         "jsdoc/require-param-description": "off",
       },
     },
+    {
+      files: ["playwright/**"],
+      rules: {
+        // Playwright as a `use` function that has nothing to do with React hooks.
+        "react-hooks/rules-of-hooks": "off",
+      },
+    },
   ],
   settings: {
     react: {

README.md

@@ -3,6 +3,7 @@
 [![Chat](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
 [![Localazy](https://img.shields.io/endpoint?url=https%3A%2F%2Fconnect.localazy.com%2Fstatus%2Felement-call%2Fdata%3Fcontent%3Dall%26title%3Dlocalazy%26logo%3Dtrue)](https://localazy.com/p/element-call)
 [![License](https://img.shields.io/github/license/element-hq/element-call)](LICENSE-AGPL-3.0)
+[![Codecov](https://img.shields.io/codecov/c/github/element-hq/element-call)](https://app.codecov.io/gh/element-hq/element-call)
 
 [🎬 Live Demo 🎬](https://call.element.io)
 

backend/dev_homeserver-othersite.yaml

@@ -38,6 +38,8 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
+  # sticky events for MatrixRTC user state
+  msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

backend/dev_homeserver.yaml

@@ -38,7 +38,7 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
-  # sticky events for matrixRTC user state
+  # sticky events for MatrixRTC user state
   msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as

backend/dev_nginx.conf

@@ -181,7 +181,10 @@ server {
 
 }
 
-# Convenience reverse proxy for the call.m.localhost domain to yarn dev --host
+# Convenience reverse proxy for the call.m.localhost domain to element call
+# running on the host either via
+# - yarn dev --host or
+# - falling back to http (the element call docker container)
 server {
     listen                  80;
     listen                  [::]:80;
@@ -197,7 +200,7 @@ server {
     ssl_certificate         /root/ssl/cert.pem;
     ssl_certificate_key     /root/ssl/key.pem;
 
-
+    # 1. Attempt HTTPS first
     location ^~ / {
 
       proxy_set_header Host $host;
@@ -208,8 +211,23 @@ server {
       proxy_pass https://host.docker.internal:3000;
       proxy_ssl_verify              off;
 
+      # 2. Redirect specific errors (e.g., 502 Bad Gateway  or 504 Timeout)
+      # to the named fallback location
+      error_page 502 503 504 = @http_fallback;
+
+    }
+
+    # 3. Fallback location using HTTP
+    location @http_fallback {
+
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      proxy_pass http://host.docker.internal:8080;
+
     }
-    
     error_page   500 502 503 504  /50x.html;
 
 }

backend/playwright_homeserver-othersite.yaml

@@ -38,6 +38,8 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
+  # sticky events for MatrixRTC user state
+  msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

backend/playwright_homeserver.yaml

@@ -38,6 +38,8 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
+  # sticky events for MatrixRTC user state
+  msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

dev-backend-docker-compose.yml

@@ -3,7 +3,7 @@ networks:
 
 services:
   auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    image: ghcr.io/element-hq/lk-jwt-service:sha-f8ddd00
     pull_policy: always
     hostname: auth-server
     environment:
@@ -25,7 +25,7 @@ services:
       - ecbackend
 
   auth-service-1:
-    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    image: ghcr.io/element-hq/lk-jwt-service:sha-f8ddd00
     pull_policy: always
     hostname: auth-server-1
     environment:
@@ -88,7 +88,7 @@ services:
 
   synapse:
     hostname: homeserver
-    image: docker.io/matrixdotorg/synapse:latest
+    image: ghcr.io/element-hq/synapse:pr-18968-dcb7678281bc02d4551043a6338fe5b7e6aa47ce
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
@@ -106,7 +106,7 @@ services:
 
   synapse-1:
     hostname: homeserver-1
-    image: docker.io/matrixdotorg/synapse:latest
+    image: ghcr.io/element-hq/synapse:pr-18968-dcb7678281bc02d4551043a6338fe5b7e6aa47ce
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml

docs/self-hosting.md

@@ -152,6 +152,40 @@ handle {
 }
 ```
 
+Using Haproxy, you can achieve this by:
+
+```
+# Frontend
+    # Match /livekit/sfu/ path
+    acl is_sfu path_beg -i /livekit/sfu/
+    use_backend sfu_backend if is_sfu matrixrtc_domain
+
+    acl is_mxrtc_auth path_beg -i /sfu/get
+    use_backend mxrtc_auth_backend if is_mxrtc_auth matrixrtc_domain
+
+# Backend
+## MatrixRTC backend
+backend sfu_backend
+    server livekit 127.0.0.1:7880
+    http-request set-path %[path,regsub(^/livekit/sfu/,/)]
+    http-request set-header Host %[req.hdr(host)]
+    timeout server 120s
+    # WebSocket support
+    option forwardfor
+    option http-server-close
+    option http-buffer-request
+
+backend mxrtc_auth_backend
+    server sfu 127.0.0.1:8070
+    http-request set-header Host %[req.hdr(host)]
+    timeout server 120s
+    # WebSocket support
+    option forwardfor
+    option http-server-close
+    option http-buffer-request
+
+```
+
 #### MatrixRTC backend announcement
 
 > [!IMPORTANT]

locales/en/app.json

@@ -116,6 +116,7 @@
     "matrix_rtc_transport_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
     "membership_manager": "Membership Manager Error",
     "membership_manager_description": "The Membership Manager had to shut down. This is caused by many consequtive failed network requests.",
+    "no_matrix_2_authorization_service": "The authorization service for your media server (SFU) is out of date.",
     "open_elsewhere": "Opened in another tab",
     "open_elsewhere_description": "{{brand}} has been opened in another tab. If that doesn't sound right, try reloading the page.",
     "room_creation_restricted": "Failed to create call",

package.json

@@ -105,7 +105,7 @@
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^1.14.0",
+    "matrix-widget-api": "^1.16.1",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
@@ -125,6 +125,7 @@
     "typescript": "^5.8.3",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
+    "uuid": "^13.0.0",
     "vaul": "^1.0.0",
     "vite": "^7.0.0",
     "vite-plugin-generate-file": "^0.3.0",

playwright.config.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2025 New Vector Ltd.
+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.

playwright/access.spec.ts

@@ -7,6 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "@playwright/test";
 
+import { SpaHelpers } from "./spa-helpers.ts";
+
 test("Sign up a new account, then login, then logout", async ({ browser }) => {
   const userId = `test_user-id_${Date.now()}`;
 
@@ -69,12 +71,7 @@ test("As a guest, create a call, share link and other join", async ({
   // ========
   // ARRANGE: The first user creates a call as guest, join it, then click the invite button to copy the invite link
   // ========
-  await creatorPage.getByTestId("home_callName").click();
-  await creatorPage.getByTestId("home_callName").fill("Welcome");
-  await creatorPage.getByTestId("home_displayName").click();
-  await creatorPage.getByTestId("home_displayName").fill("Inviter");
-  await creatorPage.getByTestId("home_go").click();
-  await expect(creatorPage.locator("video")).toBeVisible();
+  await SpaHelpers.createCall(creatorPage, "Inviter", "Welcome");
 
   // join
   await creatorPage.getByTestId("lobby_joinCall").click();
@@ -82,19 +79,7 @@ test("As a guest, create a call, share link and other join", async ({
   await creatorPage.getByRole("radio", { name: "Spotlight" }).check();
 
   // Get the invite link
-  await creatorPage.getByRole("button", { name: "Invite" }).click();
-  await expect(
-    creatorPage.getByRole("heading", { name: "Invite to this call" }),
-  ).toBeVisible();
-  await expect(creatorPage.getByRole("img", { name: "QR Code" })).toBeVisible();
-  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
-  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
-  await creatorPage.getByTestId("modal_inviteLink").click();
-
-  const inviteLink = (await creatorPage.evaluate(
-    "navigator.clipboard.readText()",
-  )) as string;
-  expect(inviteLink).toContain("room/#/");
+  const inviteLink = await SpaHelpers.getCallInviteLink(creatorPage);
 
   // ========
   // ACT: The other user use the invite link to join the call as a guest
@@ -103,13 +88,7 @@ test("As a guest, create a call, share link and other join", async ({
     reducedMotion: "reduce",
   });
   const guestPage = await guestInviteeContext.newPage();
-
-  await guestPage.goto(inviteLink);
-  await guestPage.getByTestId("joincall_displayName").fill("Invitee");
-  await expect(guestPage.getByTestId("joincall_joincall")).toBeVisible();
-  await guestPage.getByTestId("joincall_joincall").click();
-  await guestPage.getByTestId("lobby_joinCall").click();
-  await guestPage.getByRole("radio", { name: "Spotlight" }).check();
+  await SpaHelpers.joinCallFromInviteLink(guestPage, inviteLink);
 
   // ========
   // ASSERT: check that there are two members in the call

playwright/fixtures/widget-user.ts

@@ -1,22 +1,19 @@
 /*
 Copyright 2025 New Vector Ltd.
+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,
-  type Page,
-  test,
-  expect,
-  type JSHandle,
-} from "@playwright/test";
+import { type Page, test, expect, type JSHandle } from "@playwright/test";
 
 import type { MatrixClient } from "matrix-js-sdk";
+import { HOST1, TestHelpers } from "../widget/test-helpers.ts";
 
 export type UserBaseFixture = {
   mxId: string;
+  displayName: string;
   page: Page;
   clientHandle: JSHandle<MatrixClient>;
 };
@@ -28,10 +25,10 @@ export type BaseWidgetSetup = {
 
 export interface MyFixtures {
   asWidget: BaseWidgetSetup;
+  callType: "room" | "dm";
+  addUser: (username: string, host: string) => Promise<UserBaseFixture>;
 }
 
-const PASSWORD = "foobarbaz1!";
-
 // Minimal config.json for the local element-web instance
 const CONFIG_JSON = {
   default_server_config: {
@@ -65,143 +62,91 @@ const CONFIG_JSON = {
   },
 };
 
-/**
- * Set the Element Call URL in the dev tool settings using `window.mxSettingsStore` via `page.evaluate`.
- */
-const setDevToolElementCallDevUrl = process.env.USE_DOCKER
-  ? async (page: Page): Promise<void> => {
-      await page.evaluate(() => {
-        window.mxSettingsStore.setValue(
-          "Developer.elementCallUrl",
-          null,
-          "device",
-          "http://localhost:8080/room",
-        );
-      });
-    }
-  : async (page: Page): Promise<void> => {
-      await page.evaluate(() => {
-        window.mxSettingsStore.setValue(
-          "Developer.elementCallUrl",
-          null,
-          "device",
-          "https://localhost:3000/room",
-        );
-      });
-    };
-
-/**
- * Registers a new user and returns page, clientHandle and mxId.
- */
-async function registerUser(
-  browser: Browser,
-  username: string,
-): Promise<{ page: Page; clientHandle: JSHandle<MatrixClient>; mxId: string }> {
-  const userContext = await browser.newContext({
-    reducedMotion: "reduce",
-  });
-  const page = await userContext.newPage();
-  await page.goto("http://localhost:8081/#/welcome");
-  await page.getByRole("link", { name: "Create Account" }).click();
-  await page.getByRole("textbox", { name: "Username" }).fill(username);
-  await page
-    .getByRole("textbox", { name: "Password", exact: true })
-    .fill(PASSWORD);
-  await page.getByRole("textbox", { name: "Confirm password" }).click();
-  await page.getByRole("textbox", { name: "Confirm password" }).fill(PASSWORD);
-  await page.getByRole("button", { name: "Register" }).click();
-
-  await expect(
-    page.getByRole("heading", { name: `Welcome ${username}` }),
-  ).toBeVisible();
-
-  const browserUnsupportedToast = page
-    .getByText("Element does not support this browser")
-    .locator("..")
-    .locator("..");
-
-  // Dismiss incompatible browser toast
-  const dismissButton = browserUnsupportedToast.getByRole("button", {
-    name: "Dismiss",
-  });
-  try {
-    await expect(dismissButton).toBeVisible({ timeout: 700 });
-    await dismissButton.click();
-  } catch {
-    // dismissButton not visible, continue as normal
-  }
-
-  await setDevToolElementCallDevUrl(page);
-
-  const clientHandle = await page.evaluateHandle(() =>
-    window.mxMatrixClientPeg.get(),
-  );
-  const mxId = (await clientHandle.evaluate(
-    (cli: MatrixClient) => cli.getUserId(),
-    clientHandle,
-  ))!;
-
-  return { page, clientHandle, mxId };
-}
-
 export const widgetTest = test.extend<MyFixtures>({
-  asWidget: async ({ browser, context }, pUse) => {
+  // allow per-test override: `widgetTest.use({ callType: "dm" })`
+  callType: ["room", { option: true }],
+  asWidget: async ({ browser, context, callType }, pUse) => {
     await context.route(`http://localhost:8081/config.json*`, async (route) => {
       await route.fulfill({ json: CONFIG_JSON });
     });
 
-    const userA = `brooks_${Date.now()}`;
-    const userB = `whistler_${Date.now()}`;
+    const brooksDisplayName = `brooks_${Date.now()}`;
+    const whistlerDisplayName = `whistler_${Date.now()}`;
 
     // Register users
     const {
       page: ewPage1,
       clientHandle: brooksClientHandle,
       mxId: brooksMxId,
-    } = await registerUser(browser, userA);
+    } = await TestHelpers.registerUser(browser, brooksDisplayName);
     const {
       page: ewPage2,
       clientHandle: whistlerClientHandle,
       mxId: whistlerMxId,
-    } = await registerUser(browser, userB);
+    } = await TestHelpers.registerUser(browser, whistlerDisplayName);
 
     // Invite the second user
-    await ewPage1
-      .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New conversation" })
-      .click();
+    if (callType === "room") {
+      await TestHelpers.createRoom("Welcome Room", ewPage1);
 
-    await ewPage1.getByRole("menuitem", { name: "New Room" }).click();
-    await ewPage1.getByRole("textbox", { name: "Name" }).fill("Welcome Room");
-    await ewPage1.getByRole("button", { name: "Create room" }).click();
-    await expect(ewPage1.getByText("You created this room.")).toBeVisible();
-    await expect(ewPage1.getByText("Encryption enabled")).toBeVisible();
+      await ewPage1
+        .getByRole("button", { name: "Invite to this room", exact: true })
+        .click();
+      await expect(
+        ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
+      ).toBeVisible();
 
-    await ewPage1
-      .getByRole("button", { name: "Invite to this room", exact: true })
-      .click();
-    await expect(
-      ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
-    ).toBeVisible();
+      // To get the invite textbox we need to specifically select within the
+      // dialog, since there is another textbox in the background (the message
+      // composer). In theory the composer shouldn't be visible to Playwright at
+      // all because the invite dialog has trapped focus, but the focus trap
+      // doesn't quite work right on Firefox.
+      await ewPage1.getByRole("dialog").getByRole("textbox").fill(whistlerMxId);
+      await ewPage1.getByRole("dialog").getByRole("textbox").click();
+      await ewPage1.getByRole("button", { name: "Invite" }).click();
 
-    // To get the invite textbox we need to specifically select within the
-    // dialog, since there is another textbox in the background (the message
-    // composer). In theory the composer shouldn't be visible to Playwright at
-    // all because the invite dialog has trapped focus, but the focus trap
-    // doesn't quite work right on Firefox.
-    await ewPage1.getByRole("dialog").getByRole("textbox").fill(whistlerMxId);
-    await ewPage1.getByRole("dialog").getByRole("textbox").click();
-    await ewPage1.getByRole("button", { name: "Invite" }).click();
+      // Accept the invite
+      await expect(
+        ewPage2.getByRole("option", { name: "Welcome Room" }),
+      ).toBeVisible();
+      await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
+      await ewPage2.getByRole("button", { name: "Accept" }).click();
+      await expect(
+        ewPage2
+          .getByRole("main")
+          .getByRole("heading", { name: "Welcome Room" }),
+      ).toBeVisible();
+    } else if (callType === "dm") {
+      await ewPage1
+        .getByRole("navigation", { name: "Room list" })
+        .getByRole("button", { name: "New conversation" })
+        .click();
 
-    // Accept the invite
-    await expect(
-      ewPage2.getByRole("option", { name: "Welcome Room" }),
-    ).toBeVisible();
-    await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
-    await ewPage2.getByRole("button", { name: "Accept" }).click();
-    await expect(
-      ewPage2.getByRole("main").getByRole("heading", { name: "Welcome Room" }),
-    ).toBeVisible();
+      await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();
+      await ewPage1.getByRole("textbox", { name: "Search" }).click();
+      await ewPage1.getByRole("textbox", { name: "Search" }).fill(whistlerMxId);
+      await ewPage1.getByRole("button", { name: "Go" }).click();
+
+      // Wait and send the first message to create the DM
+      await expect(
+        ewPage1.getByText(/Send your first message to invite/),
+      ).toBeVisible();
+
+      await ewPage1.locator(".mx_BasicMessageComposer_input > div").click();
+      await ewPage1
+        .getByRole("textbox", { name: "Send a message…" })
+        .fill("Hello!");
+      await ewPage1.getByRole("button", { name: "Send message" }).click();
+
+      await expect(
+        ewPage1.getByText("This is the beginning of your"),
+      ).toBeVisible();
+
+      // Accept the DM invite from brooks
+      // This how playwright record selects the DM invite in the room list
+      await ewPage2.getByRole("option", { name: "Open room" }).click();
+      await ewPage2.getByRole("button", { name: "Start chatting" }).click();
+    }
 
     // Renamed use to pUse, as a workaround for eslint error that was thinking this use was a react use.
     await pUse({
@@ -209,12 +154,40 @@ export const widgetTest = test.extend<MyFixtures>({
         mxId: brooksMxId,
         page: ewPage1,
         clientHandle: brooksClientHandle,
+        displayName: brooksDisplayName,
       },
       whistler: {
         mxId: whistlerMxId,
         page: ewPage2,
         clientHandle: whistlerClientHandle,
+        displayName: whistlerDisplayName,
       },
     });
   },
+
+  /**
+   * Provide a way to add additional users within a test.
+   * The returned user will be registered on the default homeserver, the name will be made unique by appending a timestamp.
+   */
+  addUser: async ({ browser }, use) => {
+    await use(
+      async (
+        username: string,
+        host: string = HOST1,
+      ): Promise<UserBaseFixture> => {
+        const uniqueSuffix = Date.now();
+        const { page, clientHandle, mxId } = await TestHelpers.registerUser(
+          browser,
+          `${username.toLowerCase()}_${uniqueSuffix}`,
+          host,
+        );
+        return {
+          mxId,
+          displayName: username,
+          page,
+          clientHandle,
+        };
+      },
+    );
+  },
 });

playwright/spa-call-sticky.spec.ts

@@ -0,0 +1,135 @@
+/*
+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,
+  type Page,
+  test,
+  type Request,
+  type Browser,
+} from "@playwright/test";
+
+import { SpaHelpers } from "./spa-helpers";
+
+async function setupTwoUserSpaCall(
+  browser: Browser,
+  page: Page,
+  browserName: string,
+): Promise<{ guestPage: 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",
+  );
+
+  await page.goto("/");
+
+  let androlHasSentStickyEvent = false;
+
+  await interceptEventSend(
+    page,
+    // This room is not encrypted, so the event is sent in clear
+    "org.matrix.msc4143.rtc.member",
+    (req) => {
+      androlHasSentStickyEvent =
+        androlHasSentStickyEvent || isStickySend(req.url());
+    },
+  );
+
+  await SpaHelpers.createCall(page, "Androl", "HelloCall", true, "2_0");
+
+  const inviteLink = await SpaHelpers.getCallInviteLink(page);
+
+  // Other
+  const guestInviteeContext = await browser.newContext({
+    reducedMotion: "reduce",
+  });
+  const guestPage = await guestInviteeContext.newPage();
+
+  await guestPage.goto("/");
+
+  let pevaraHasSentStickyEvent = false;
+
+  await interceptEventSend(
+    guestPage,
+    // This room is not encrypted, so the event is sent in clear
+    "org.matrix.msc4143.rtc.member",
+    (req) => {
+      pevaraHasSentStickyEvent =
+        pevaraHasSentStickyEvent || isStickySend(req.url());
+    },
+  );
+
+  await SpaHelpers.joinCallFromInviteLink(
+    guestPage,
+    inviteLink,
+    "Pevara",
+    "2_0",
+  );
+  // Assert both sides have sent sticky membership events
+  expect(androlHasSentStickyEvent).toEqual(true);
+  expect(pevaraHasSentStickyEvent).toEqual(true);
+
+  return { guestPage };
+}
+
+test("One to One call using matrix rtc 2.0 aka sticky events", async ({
+  browser,
+  page,
+  browserName,
+}) => {
+  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName);
+
+  await SpaHelpers.expectVideoTilesCount(page, 2);
+  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
+});
+
+// This issue occurs when a member leave but does not clean up their sticky event.
+// If they rejoin they will use a new stickye key (stickyKey = member.id = UUID())
+// We end up with two memberships with the same user and device id. This previously
+// was a impossible case since that would be the same state event. Now its possible.
+// We need to ALWAYS key by userId, deviceId and member.id. This test checks that.
+test("One to One rejoin after improper leave does not crash EC", async ({
+  browser,
+  page,
+  browserName,
+}) => {
+  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName);
+
+  await SpaHelpers.expectVideoTilesCount(page, 2);
+  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
+
+  await guestPage.reload();
+  await expect(guestPage.getByTestId("lobby_joinCall")).toBeVisible();
+
+  // Check if rejoining with the same browser context (device) breaks EC.
+  // This has happened on versions that do not consider the member.id as part of the key for a media tile.
+  await guestPage.getByTestId("lobby_joinCall").click();
+
+  // We cannot use the `expectVideoTilesCount` helper here since one of them is expected to show waiting for media
+  await expect(page.getByTestId("videoTile")).toHaveCount(3);
+  await expect(guestPage.getByTestId("videoTile")).toHaveCount(2);
+});
+
+function isStickySend(url: string): boolean {
+  return !!new URL(url).searchParams.get(
+    "org.matrix.msc4354.sticky_duration_ms",
+  );
+}
+
+async function interceptEventSend(
+  page: Page,
+  eventType: string,
+  callback: (request: Request) => void,
+): Promise<void> {
+  await page.route(
+    `**/_matrix/client/v3/rooms/**/send/${eventType}/**`,
+    async (route, req) => {
+      callback(req);
+      return route.continue();
+    },
+  );
+}

playwright/spa-helpers.ts

@@ -0,0 +1,148 @@
+/*
+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, type Page } from "@playwright/test";
+
+import { type RtcMode } from "./widget/test-helpers.ts";
+
+/**
+ * Create and join a call from the SPA home page.
+ *
+ * @param page - The Playwright page object
+ * @param userName - The display name to use for the call
+ * @param callName - The name of the call to create
+ * @param autoJoin - Whether to automatically join the call after creating it
+ * @param mode - The RTC mode to use for the call
+ */
+async function createCall(
+  page: Page,
+  userName: string,
+  callName: string,
+  autoJoin: boolean = false,
+  mode: RtcMode | undefined = undefined,
+): Promise<void> {
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill(callName);
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill(userName);
+  await page.getByTestId("home_go").click();
+
+  await expect(page.locator("video")).toBeVisible();
+  await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
+
+  if (mode) {
+    await setRtcModeFromSettings(page, mode);
+  }
+
+  if (autoJoin) {
+    // Join the call
+    await page.getByTestId("lobby_joinCall").click();
+  }
+}
+
+/**
+ * Get the invite link for the current call.
+ */
+async function getCallInviteLink(page: Page): Promise<string> {
+  await page.getByRole("button", { name: "Invite" }).click();
+  await expect(
+    page.getByRole("heading", { name: "Invite to this call" }),
+  ).toBeVisible();
+  await expect(page.getByRole("img", { name: "QR Code" })).toBeVisible();
+  await expect(page.getByTestId("modal_inviteLink")).toBeVisible();
+  await expect(page.getByTestId("modal_inviteLink")).toBeVisible();
+  await page.getByTestId("modal_inviteLink").click();
+
+  const inviteLink = (await page.evaluate(
+    "navigator.clipboard.readText()",
+  )) as string;
+  expect(inviteLink).toContain("room/#/");
+
+  return inviteLink;
+}
+
+/**
+ * Join a call from an invitation link.
+ * @param page - The Playwright page object
+ * @param inviteLink - The invite link to join
+ * @param displayName - The display name to use when joining the call
+ * @param mode - The RTC mode to use for the call
+ */
+async function joinCallFromInviteLink(
+  page: Page,
+  inviteLink: string,
+  displayName: string = "Invitee",
+  mode: RtcMode | undefined = undefined,
+): Promise<void> {
+  await page.goto(inviteLink);
+  await page.getByTestId("joincall_displayName").fill(displayName);
+  await expect(page.getByTestId("joincall_joincall")).toBeVisible();
+  await page.getByTestId("joincall_joincall").click();
+
+  if (mode) {
+    await setRtcModeFromSettings(page, mode);
+  }
+
+  await page.getByTestId("lobby_joinCall").click();
+  await page.getByRole("radio", { name: "Spotlight" }).check();
+}
+
+async function setRtcModeFromSettings(
+  page: Page,
+  mode: RtcMode,
+): Promise<void> {
+  await page.getByRole("button", { name: "Settings" }).click();
+  await page.getByRole("tab", { name: "Preferences" }).click();
+  await page.getByText("Developer mode", { exact: true }).check(); // Idempotent:  won't uncheck if already checked
+
+  // Move to Developer tab now
+  await page.getByRole("tab", { name: "Developer" }).click();
+  if (mode == "legacy") {
+    await page.getByText("Legacy: state events").click();
+  } else if (mode == "2_0") {
+    await page.getByText("Matrix 2.0").click();
+  } else {
+    // compat
+    await page.getByText("Compatibility: state events").click();
+  }
+
+  await page.getByTestId("modal_close").click();
+}
+
+/**
+ * Expect a certain number of video tiles to be present and visible.
+ */
+async function expectVideoTilesCount(page: Page, count: number): Promise<void> {
+  await expect(page.getByTestId("videoTile")).toHaveCount(2);
+
+  // There are no other options than to wait for all media to be ready?
+  // Or it is too flaky :/
+  await page.waitForTimeout(3000);
+  // No one should be waiting for media
+  await expect(page.getByText("Waiting for media...")).not.toBeVisible();
+
+  // There should be 5 video elements, visible and autoplaying
+  const videoElements = await page.locator("video").all();
+  expect(videoElements.length).toBe(count);
+
+  const blockDisplayCount = await page
+    .locator("video")
+    .evaluateAll(
+      (videos: Element[]) =>
+        videos.filter(
+          (v: Element) => window.getComputedStyle(v).display === "block",
+        ).length,
+    );
+  expect(blockDisplayCount).toBe(count);
+}
+
+export const SpaHelpers = {
+  createCall,
+  getCallInviteLink,
+  joinCallFromInviteLink,
+  expectVideoTilesCount,
+};

playwright/widget/federated-call.test.ts

@@ -0,0 +1,86 @@
+/*
+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",
+      );
+
+      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,
+        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);
+
+        // There are no other options than to wait for all media to be ready?
+        // Or it is too flaky :/
+        await user.page.waitForTimeout(3000);
+        // 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
+        const videoElements = await frame.locator("video").all();
+        expect(videoElements.length).toBe(2);
+
+        const blockDisplayCount = await frame
+          .locator("video")
+          .evaluateAll(
+            (videos: Element[]) =>
+              videos.filter(
+                (v: Element) => window.getComputedStyle(v).display === "block",
+              ).length,
+          );
+        expect(blockDisplayCount).toBe(2);
+      }
+
+      // await florian.page.pause();
+    },
+  );
+});

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

@@ -0,0 +1,104 @@
+/*
+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.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);
+
+      // There are no other options than to wait for all media to be ready?
+      // Or it is too flaky :/
+      await user.page.waitForTimeout(3000);
+      // 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
+      const videoElements = await frame.locator("video").all();
+      expect(videoElements.length).toBe(2);
+
+      const blockDisplayCount = await frame
+        .locator("video")
+        .evaluateAll(
+          (videos: Element[]) =>
+            videos.filter(
+              (v: Element) => window.getComputedStyle(v).display === "block",
+            ).length,
+        );
+      expect(blockDisplayCount).toBe(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);
+    const blockDisplayCount = await timo.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame()
+      .locator("video")
+      .evaluateAll(
+        (videos: Element[]) =>
+          videos.filter(
+            (v: Element) => window.getComputedStyle(v).display === "block",
+          ).length,
+      );
+    expect(blockDisplayCount).toBe(2);
+  },
+);

playwright/widget/huddle-call.test.ts

@@ -0,0 +1,136 @@
+/*
+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 }) => {
+  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 valere = await addUser("Valere", HOST1);
+  const timo = await addUser("Timo", HOST1);
+  const robin = await addUser("Robin", HOST1);
+  const halfshot = await addUser("Halfshot", HOST1);
+  const florian = await 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);
+
+  for (const user of [timo, robin, halfshot, florian]) {
+    await TestHelpers.joinCallInCurrentRoom(user.page);
+  }
+
+  for (const user of [timo, robin, halfshot, florian]) {
+    const frame = user.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    // No lobby, should start with video on
+    // The only way to know if it is muted or not is to look at the data-kind attribute..
+    const videoButton = frame.getByTestId("incall_videomute");
+    await expect(videoButton).toBeVisible();
+    // video should be off by default in a voice call
+    await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+  }
+
+  // We should see 5 video tiles everywhere now
+  for (const user of [valere, timo, robin, halfshot, florian]) {
+    const frame = user.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+    await expect(frame.getByTestId("videoTile")).toHaveCount(5);
+    for (const participant of [valere, timo, robin, halfshot, florian]) {
+      // Check the names are correct
+      await expect(frame.getByText(participant.displayName)).toBeVisible();
+    }
+
+    // There is no other options than to wait for all media to be ready?
+    // Or it is too flaky :/
+    await user.page.waitForTimeout(5000);
+    // No one should be waiting for media
+    await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
+
+    // There should be 5 video elements, visible and autoplaying
+    const videoElements = await frame.locator("video").all();
+    expect(videoElements.length).toBe(5);
+    await expect(frame.locator("video[autoplay]")).toHaveCount(5);
+
+    const blockDisplayCount = await frame
+      .locator("video")
+      .evaluateAll(
+        (videos: Element[]) =>
+          videos.filter(
+            (v: Element) => window.getComputedStyle(v).display === "block",
+          ).length,
+      );
+    expect(blockDisplayCount).toBe(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 florianMuteButton = florianFrame.getByTestId("incall_videomute");
+  await florianMuteButton.click();
+  // Now the button should indicate we can start video
+  await expect(florianMuteButton).toHaveAttribute(
+    "aria-label",
+    /^Start video$/,
+  );
+
+  // wait a bit for the state to propagate
+  await valere.page.waitForTimeout(3000);
+  {
+    const frame = valere.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    const videoElements = await frame.locator("video").all();
+    expect(videoElements.length).toBe(5);
+
+    const blockDisplayCount = await frame
+      .locator("video")
+      .evaluateAll(
+        (videos: Element[]) =>
+          videos.filter(
+            (v: Element) => window.getComputedStyle(v).display === "block",
+          ).length,
+      );
+
+    // out of 5 ONLY 4 are visible (display:block) !!
+    // 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.
+    expect(blockDisplayCount).toBe(4);
+  }
+});

playwright/widget/test-helpers.ts

@@ -0,0 +1,279 @@
+/*
+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,
+} from "@playwright/test";
+import { type MatrixClient } from "matrix-js-sdk";
+
+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 expect(page.getByRole("button", { name: buttonName })).toBeVisible();
+    await page.getByRole("button", { name: buttonName }).click();
+
+    await expect(
+      page.getByRole("menuitem", { name: "Element Call" }),
+    ).toBeVisible();
+
+    await page.getByRole("menuitem", { name: "Element Call" }).click();
+  }
+
+  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 joinCallInCurrentRoom(
+    page: Page,
+    audioOnly: boolean = false,
+  ): Promise<void> {
+    // This is the header button that notifies about an ongoing call
+    const label = audioOnly ? "Voice call started" : "Video call started";
+    await expect(page.getByText(label)).toBeVisible();
+    await expect(page.getByRole("button", { name: "Join" })).toBeVisible();
+    await page.getByRole("button", { name: "Join" }).click();
+  }
+
+  /**
+   * 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;
+  }> {
+    const userContext = await browser.newContext({
+      reducedMotion: "reduce",
+    });
+    const page = await userContext.newPage();
+    await page.goto(host);
+    await page.getByRole("link", { name: "Create Account" }).click();
+    await page.getByRole("textbox", { name: "Username" }).fill(username);
+    await page.getByRole("textbox", { name: "Password", exact: true }).click();
+    await page
+      .getByRole("textbox", { name: "Password", exact: true })
+      .fill(PASSWORD);
+    await page.getByRole("textbox", { name: "Confirm password" }).click();
+    await page
+      .getByRole("textbox", { name: "Confirm password" })
+      .fill(PASSWORD);
+    await page.getByRole("button", { name: "Register" }).click();
+
+    await expect(
+      page.getByRole("heading", { name: `Welcome ${username}` }),
+    ).toBeVisible({
+      // Increase timeout as registration can be slow :/
+      timeout: 15_000,
+    });
+
+    await this.maybeDismissBrowserNotSupportedToast(page);
+    await this.maybeDismissServiceWorkerWarningToast(page);
+
+    await TestHelpers.setDevToolElementCallDevUrl(page);
+
+    const clientHandle = await page.evaluateHandle(() =>
+      window.mxMatrixClientPeg.get(),
+    );
+    const mxId = (await clientHandle.evaluate(
+      (cli: MatrixClient) => cli.getUserId(),
+      clientHandle,
+    ))!;
+
+    return { page, clientHandle, mxId };
+  }
+
+  private static async maybeDismissBrowserNotSupportedToast(
+    page: Page,
+  ): Promise<void> {
+    const browserUnsupportedToast = page
+      .getByText("Element does not support this browser")
+      .locator("..")
+      .locator("..");
+
+    // Dismiss incompatible browser toast
+    const dismissButton = browserUnsupportedToast.getByRole("button", {
+      name: "Dismiss",
+    });
+    try {
+      await expect(dismissButton).toBeVisible({ timeout: 700 });
+      await dismissButton.click();
+    } catch {
+      // dismissButton not visible, continue as normal
+    }
+  }
+
+  private static async maybeDismissServiceWorkerWarningToast(
+    page: Page,
+  ): Promise<void> {
+    const toast = page
+      .locator(".mx_Toast_toast")
+      .getByText("Failed to load service worker");
+
+    try {
+      await expect(toast).toBeVisible({ timeout: 700 });
+      await page
+        .locator(".mx_Toast_toast")
+        .getByRole("button", { name: "OK" })
+        .click();
+    } catch {
+      // toast not visible, continue as normal
+    }
+  }
+
+  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();
+    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();
+    await expect(page.getByText("Encryption enabled")).toBeVisible();
+
+    // 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();
+    }
+  }
+
+  /**
+   * 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 expect(page.getByRole("option", { name: roomName })).toBeVisible();
+    await page.getByRole("option", { name: roomName }).click();
+    await page.getByRole("button", { name: "Accept" }).click();
+
+    await expect(
+      page.getByRole("main").getByRole("heading", { name: roomName }),
+    ).toBeVisible();
+  }
+
+  /**
+   * 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();
+    await page.getByRole("menuitem", { name: "Element Call" }).click();
+    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",
+        );
+      });
+    }
+  }
+}

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

@@ -0,0 +1,240 @@
+/*
+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",
+    );
+
+    test.slow(); // Triples the timeout
+
+    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 overlay, let's check for that
+    await expect(
+      brooksFrame.getByText(`Waiting for ${whistler.displayName} to join…`),
+    ).toBeVisible();
+
+    await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
+    await whistler.page.getByRole("button", { name: "Accept" }).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)
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = whistlerFrame.getByTestId("incall_videomute");
+      // video should be off by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
+
+      const audioButton = whistlerFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
+
+    // ASSERT the button states for brools (the caller)
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = brooksFrame.getByTestId("incall_videomute");
+      // video should be off by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
+
+      const audioButton = brooksFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
+
+    // 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
+    {
+      const hangupButton = brooksFrame.getByTestId("incall_leave");
+      await hangupButton.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",
+    );
+
+    test.slow(); // Triples the timeout
+
+    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 overlay, let's check for that
+    await expect(
+      brooksFrame.getByText(`Waiting for ${whistler.displayName} to join…`),
+    ).toBeVisible();
+
+    await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
+    await whistler.page.getByRole("button", { name: "Accept" }).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)
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = whistlerFrame.getByTestId("incall_videomute");
+      // video should be on by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+
+      const audioButton = whistlerFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
+
+    // ASSERT the button states for brools (the caller)
+    {
+      // The only way to know if it is muted or not is to look at the data-kind attribute..
+      const videoButton = brooksFrame.getByTestId("incall_videomute");
+      // video should be on by default in a voice call
+      await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+
+      const audioButton = brooksFrame.getByTestId("incall_mute");
+      // audio should be on for the voice call
+      await expect(audioButton).toHaveAttribute(
+        "aria-label",
+        /^Mute microphone$/,
+      );
+    }
+
+    // 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
+    {
+      const hangupButton = brooksFrame.getByTestId("incall_leave");
+      await hangupButton.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",
+    );
+
+    test.slow(); // Triples the timeout
+
+    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 overlay, let's check for that
+    await expect(
+      brooksFrame.getByText(`Waiting for ${whistler.displayName} to join…`),
+    ).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();
+  },
+);

sdk/README.md

@@ -6,16 +6,40 @@ It allows to use matrixRTC in combination with livekit without relying on elemen
 
 This is done by instantiating the call view model and exposing some useful behaviors (observables) and methods.
 
-This folder contains an example index.html file that showcases the sdk in use (hosted on localhost:8123 with a webserver ellowing cors (for example `npx serve -l 81234 --cors`)) as a godot engine HTML export template.
+This folder contains an example index.html file that showcases the sdk in use (hosted on localhost:8123 with a webserver allowing cors (for example `npx serve -l 81234 --cors`)) as a godot engine HTML export template.
+
+## Getting started
+
+To get started run
+
+```
+yarn
+yarn build:sdk
+```
+
+in the repository root.
+
+It will create a `dist` folder containing the compiled js file.
+
+This file needs to be hosted. Locally (via `npx serve -l 1234 --cors`) or on a remote server.
+
+Now you just need to add the widget to element web via:
+
+```
+/addwidget http://localhost:3000?widgetId=$matrix_widget_id&perParticipantE2EE=true&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
+```
 
 ## Widgets
 
-The sdk mode is particularly interesting to be used in widgets where you do not need to pay attention to matrix login/cs api ...
-To create a widget see the example index.html file in this folder. And add it to EW via:
+The sdk mode is particularly interesting to be used in widgets. In widgets you do not need to pay attention to matrix login/cs api ...
+To create a widget see the example `index.html` file in this folder. And add it to EW via:
 `/addwidget <widgetUrl>` (see **url parameters** for more details on `<widgetUrl>`)
 
 ### url parameters
 
+The url parameters are needed to pass initial data to the widget. They will automatically be used
+by the matrixRTCSdk to start the postmessage widget api (communication between the client (e.g. Element Web) and the widget)
+
 ```
 widgetId = $matrix_widget_id
 perParticipantE2EE = true

sdk/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title>Godot MatrixRTC Widget</title>
+    <title>MatrixRTC Widget</title>
     <meta charset="utf-8" />
     <script type="module">
       // TODO use the url where the matrixrtc-sdk.js file from dist is hosted
@@ -9,7 +9,7 @@
 
       try {
         window.matrixRTCSdk = await createMatrixRTCSdk(
-          "com.github.toger5.godot-game",
+          "com.github.toger5.rtc-application-type", // rtc application type
         );
         console.info("createMatrixRTCSdk was created!");
       } catch (e) {
@@ -17,16 +17,6 @@
       }
       const sdk = window.matrixRTCSdk;
 
-      // This is the main bridging interface to godot
-      window.matrixRTCSdkGodot = {
-        dataObs: sdk.data$,
-        memberObs: sdk.members$,
-        // join: sdk.join, // lets stick with autojoin for now
-        sendData: sdk.sendData,
-        leave: sdk.leave,
-        connectedObs: sdk.connected$,
-      };
-
       console.info("matrixRTCSdk join ", sdk);
       const connectionState = sdk.join();
       console.info("matrixRTCSdk joined");
@@ -38,15 +28,13 @@
         const child = document.createElement("p");
         child.innerHTML = JSON.stringify(data);
         div.appendChild(child);
-        // TODO forward to godot
       });
 
       sdk.members$.subscribe((memberObjects) => {
-        // reset div
         const div = document.getElementById("members");
         div.innerHTML = "<h3>Members:</h3>";
 
-        // create member list
+        // Create member list
         const members = memberObjects.map((member) => member.membership.sender);
         console.info("members changed", members);
         for (const m of members) {
@@ -62,17 +50,10 @@
         const div = document.getElementById("connect_status");
         div.innerHTML = connected ? "Connected" : "Disconnected";
       });
-
-      let engine = new Engine($GODOT_CONFIG);
-      engine.startGame();
     </script>
-    <!--// TODO use it as godot HTML template-->
-    <script src="$GODOT_URL"></script>
   </head>
   <body>
-    <canvas id="canvas"></canvas>
     <div
-      id="overlay"
       style="position: absolute; top: 0; right: 0; background-color: #ffffff10"
     >
       <div id="connect_status"></div>

sdk/main.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2025 Element Creations Ltd.
+Copyright 2025-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.
@@ -57,7 +57,7 @@ import {
   tryMakeSticky,
   widget,
 } from "./helper";
-import { ElementWidgetActions } from "../src/widget";
+import { ElementWidgetActions, initializeWidget } from "../src/widget";
 import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";
 
 interface MatrixRTCSdk {
@@ -88,7 +88,7 @@ export async function createMatrixRTCSdk(
   application: string = "m.call",
   id: string = "",
 ): Promise<MatrixRTCSdk> {
-  logger.info("Hello");
+  initializeWidget();
   const client = await widget.client;
   logger.info("client created");
   const scope = new ObservableScope();
@@ -99,14 +99,12 @@ export async function createMatrixRTCSdk(
   if (room === null) throw Error("could not get room from client");
 
   const mediaDevices = new MediaDevices(scope);
-  const muteStates = new MuteStates(scope, mediaDevices, constant(true));
+  const muteStates = new MuteStates(scope, mediaDevices, {
+    audioEnabled: true,
+    videoEnabled: true,
+  });
   const slot = { application, id };
-  const rtcSession = new MatrixRTCSession(
-    client,
-    room,
-    MatrixRTCSession.sessionMembershipsForSlot(room, slot),
-    slot,
-  );
+  const rtcSession = new MatrixRTCSession(client, room, slot);
   const callViewModel = createCallViewModel$(
     scope,
     rtcSession,

src/RTCConnectionStats.tsx

@@ -20,6 +20,7 @@ interface Props {
   audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   focusUrl?: string;
+  rtcBackendIdentity?: string;
 }
 
 const extractDomain = (url: string): string => {
@@ -37,6 +38,7 @@ export const RTCConnectionStats: FC<Props> = ({
   audio,
   video,
   focusUrl,
+  rtcBackendIdentity,
   ...rest
 }) => {
   const [showModal, setShowModal] = useState(false);
@@ -71,6 +73,9 @@ export const RTCConnectionStats: FC<Props> = ({
           </pre>
         </div>
       </Modal>
+      <Text as="span" size="xs" title="rtcBackendIdentity">
+        rtcBackendIdentity:{rtcBackendIdentity}
+      </Text>
       {focusUrl && (
         <div>
           <Text as="span" size="xs" title="focusURL">

src/UrlParams.test.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2023, 2024 New Vector Ltd.
+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.
@@ -256,8 +257,6 @@ describe("UrlParams", () => {
       skipLobby: false,
       returnToLobby: false,
       sendNotificationType: "notification",
-      defaultAudioEnabled: true,
-      defaultVideoEnabled: true,
     });
     it("use no-intent-defaults with unknown intent", () => {
       expect(computeUrlParams()).toMatchObject(noIntentDefaults);
@@ -395,8 +394,6 @@ describe("UrlParams", () => {
         expect.any(Object),
         "configuration:",
         expect.any(Object),
-        "intentAndPlatformDerivedConfiguration:",
-        {},
       );
     });
   });

src/UrlParams.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
+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.
@@ -246,25 +247,13 @@ export interface UrlConfiguration {
 
   callIntent?: RTCCallIntent;
 }
-interface IntentAndPlatformDerivedConfiguration {
-  defaultAudioEnabled?: boolean;
-  defaultVideoEnabled?: boolean;
-}
-interface IntentAndPlatformDerivedConfiguration {
-  defaultAudioEnabled?: boolean;
-  defaultVideoEnabled?: boolean;
-}
 
 // If you need to add a new flag to this interface, prefer a name that describes
 // a specific behavior (such as 'confineToRoom'), rather than one that describes
 // the situations that call for this behavior ('isEmbedded'). This makes it
 // clearer what each flag means, and helps us avoid coupling Element Call's
 // behavior to the needs of specific consumers.
-export interface UrlParams
-  extends
-    UrlProperties,
-    UrlConfiguration,
-    IntentAndPlatformDerivedConfiguration {}
+export interface UrlParams extends UrlProperties, UrlConfiguration {}
 
 // This is here as a stopgap, but what would be far nicer is a function that
 // takes a UrlParams and returns a query string. That would enable us to
@@ -464,29 +453,6 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
       };
   }
 
-  const intentAndPlatformDerivedConfiguration: IntentAndPlatformDerivedConfiguration =
-    {};
-  // Desktop also includes web. Its anything that is not mobile.
-  const desktopMobile = platform === "desktop" ? "desktop" : "mobile";
-  switch (desktopMobile) {
-    case "desktop":
-    case "mobile":
-      switch (intent) {
-        case UserIntent.StartNewCall:
-        case UserIntent.JoinExistingCall:
-        case UserIntent.StartNewCallDM:
-        case UserIntent.JoinExistingCallDM:
-          intentAndPlatformDerivedConfiguration.defaultAudioEnabled = true;
-          intentAndPlatformDerivedConfiguration.defaultVideoEnabled = true;
-          break;
-        case UserIntent.StartNewCallDMVoice:
-        case UserIntent.JoinExistingCallDMVoice:
-          intentAndPlatformDerivedConfiguration.defaultAudioEnabled = true;
-          intentAndPlatformDerivedConfiguration.defaultVideoEnabled = false;
-          break;
-      }
-  }
-
   const properties: UrlProperties = {
     widgetId,
     parentUrl,
@@ -551,15 +517,12 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     properties,
     "configuration:",
     configuration,
-    "intentAndPlatformDerivedConfiguration:",
-    intentAndPlatformDerivedConfiguration,
   );
 
   return {
     ...properties,
     ...intentPreset,
     ...pickBy(configuration, (v?: unknown) => v !== undefined),
-    ...intentAndPlatformDerivedConfiguration,
   };
 };
 

src/__snapshots__/AppBar.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`AppBar > renders 1`] = `
           tabindex="0"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg

src/button/Button.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
+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.
@@ -35,6 +36,7 @@ export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
     <Tooltip label={label}>
       <CpdButton
         iconOnly
+        aria-label={label}
         Icon={Icon}
         kind={muted ? "primary" : "secondary"}
         {...props}
@@ -58,6 +60,7 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
     <Tooltip label={label}>
       <CpdButton
         iconOnly
+        aria-label={label}
         Icon={Icon}
         kind={muted ? "primary" : "secondary"}
         {...props}
@@ -102,6 +105,7 @@ export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
       <CpdButton
         className={classNames(className, styles.endCall)}
         iconOnly
+        aria-label={t("hangup_button_label")}
         Icon={EndCallIcon}
         destructive
         {...props}

src/button/ReactionToggleButton.test.tsx

@@ -18,7 +18,8 @@ import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 import { alice, local, localRtcMember } from "../utils/test-fixtures";
 import { type MockRTCSession } from "../utils/test";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
-
+import { initializeWidget } from "../widget";
+initializeWidget();
 vi.mock("livekit-client/e2ee-worker?worker");
 
 const localIdent = `${localRtcMember.userId}:${localRtcMember.deviceId}`;

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_bb_"
-    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -44,7 +44,7 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_7m_"
-    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -75,7 +75,7 @@ exports[`Can lower hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_36_"
-    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
     data-kind="secondary"
     data-size="lg"
     role="button"
@@ -109,7 +109,7 @@ exports[`Can open menu 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_0_"
-    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_1j_"
-    class="_button_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
+    class="_button_13vu4_8 raisedButton _has-icon_13vu4_60 _icon-only_13vu4_53"
     data-kind="primary"
     data-size="lg"
     role="button"

src/config/ConfigOptions.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
+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.
@@ -163,10 +164,6 @@ export interface ResolvedConfigOptions extends ConfigOptions {
     };
   };
   ssla: string;
-  media_devices: {
-    enable_audio: boolean;
-    enable_video: boolean;
-  };
   app_prompt: boolean;
 }
 
@@ -181,9 +178,5 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
     feature_use_device_session_member_events: true,
   },
   ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
-  media_devices: {
-    enable_audio: true,
-    enable_video: true,
-  },
   app_prompt: true,
 };

src/e2ee/matrixKeyProvider.ts

@@ -6,11 +6,13 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { BaseKeyProvider } from "livekit-client";
-import { logger } from "matrix-js-sdk/lib/logger";
 import {
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+const logger = rootLogger.getChild("[MatrixKeyProvider]");
 
 export class MatrixKeyProvider extends BaseKeyProvider {
   private rtcSession?: MatrixRTCSession;
@@ -42,7 +44,8 @@ export class MatrixKeyProvider extends BaseKeyProvider {
   private onEncryptionKeyChanged = (
     encryptionKey: Uint8Array<ArrayBuffer>,
     encryptionKeyIndex: number,
-    participantId: string,
+    membershipParts: CallMembershipIdentityParts,
+    rtcBackendIdentity: string,
   ): void => {
     crypto.subtle
       .importKey("raw", encryptionKey, "HKDF", false, [
@@ -53,17 +56,17 @@ export class MatrixKeyProvider extends BaseKeyProvider {
         (keyMaterial) => {
           this.onSetEncryptionKey(
             keyMaterial,
-            participantId,
+            rtcBackendIdentity,
             encryptionKeyIndex,
           );
 
           logger.debug(
-            `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
+            `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${rtcBackendIdentity} (before hash: ${membershipParts.userId}:${membershipParts.deviceId}) encryptionKeyIndex=${encryptionKeyIndex}`,
           );
         },
         (e) => {
           logger.error(
-            `Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
+            `Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId before hash=${membershipParts.userId}:${membershipParts.deviceId} encryptionKeyIndex=${encryptionKeyIndex}`,
             e,
           );
         },

src/initializer.tsx

@@ -28,6 +28,7 @@ import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
+import { initializeWidget } from "./widget";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
 // {
@@ -115,6 +116,8 @@ export class Initializer {
   }
 
   public static async initBeforeReact(): Promise<void> {
+    initializeWidget();
+
     const polyfills: Promise<unknown>[] = [];
     if (shouldPolyfillSegmenter()) {
       polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));

src/livekit/MatrixAudioRenderer.test.tsx

@@ -28,7 +28,8 @@ import {
   mockRemoteParticipant,
   mockTrack,
 } from "../utils/test";
-
+import { initializeWidget } from "../widget";
+initializeWidget();
 export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
 const MediaDevicesProvider = MediaDevicesContext.MediaDevicesContext.Provider;

src/livekit/MatrixAudioRenderer.tsx

@@ -15,7 +15,6 @@ import {
   type AudioTrackProps,
 } from "@livekit/components-react";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { type ParticipantId } from "matrix-js-sdk/lib/matrixrtc";
 
 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
@@ -32,7 +31,7 @@ export interface MatrixAudioRendererProps {
    * This list needs to be composed based on the matrixRTC members so that we do not play audio from users
    * that are not expected to be in the rtc session (local user is excluded).
    */
-  validIdentities: ParticipantId[];
+  validIdentities: string[];
   /**
    * If set to `true`, mutes all audio tracks rendered by the component.
    * @remarks
@@ -79,6 +78,7 @@ export function LivekitRoomAudioRenderer({
     .filter((ref) => {
       const isValid = validIdentities.includes(ref.participant.identity);
       if (!isValid) {
+        // TODO make sure to also skip the warn logging for the local identity
         // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
         prefixedLogger.warn(
           `Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`,

src/livekit/openIDSFU.test.ts

@@ -18,6 +18,7 @@ import fetchMock from "fetch-mock";
 
 import { getSFUConfigWithOpenID, type OpenIDClientParts } from "./openIDSFU";
 import { testJWTToken } from "../utils/test-fixtures";
+import { ownMemberMock } from "../utils/test";
 
 const sfuUrl = "https://sfu.example.org";
 
@@ -33,6 +34,7 @@ describe("getSFUConfigWithOpenID", () => {
     vitest.clearAllMocks();
     fetchMock.reset();
   });
+
   it("should handle fetching a token", async () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
@@ -42,6 +44,7 @@ describe("getSFUConfigWithOpenID", () => {
     });
     const config = await getSFUConfigWithOpenID(
       matrixClient,
+      ownMemberMock,
       "https://sfu.example.org",
       "!example_room_id",
     );
@@ -53,6 +56,7 @@ describe("getSFUConfigWithOpenID", () => {
     });
     void (await fetchMock.flush());
   });
+
   it("should fail if the SFU errors", async () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
@@ -63,11 +67,12 @@ describe("getSFUConfigWithOpenID", () => {
     try {
       await getSFUConfigWithOpenID(
         matrixClient,
+        ownMemberMock,
         "https://sfu.example.org",
         "!example_room_id",
       );
     } catch (ex) {
-      expect(((ex as Error).cause as Error).message).toEqual(
+      expect((ex as Error).message).toEqual(
         "SFU Config fetch failed with status code 500",
       );
       void (await fetchMock.flush());
@@ -76,6 +81,104 @@ describe("getSFUConfigWithOpenID", () => {
     expect.fail("Expected test to throw;");
   });
 
+  it("should try legacy and then new endpoint with delay delegation", async () => {
+    fetchMock.post("https://sfu.example.org/get_token", () => {
+      return {
+        status: 500,
+        body: { error: "Test failure" },
+      };
+    });
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 500,
+        body: { error: "Test failure" },
+      };
+    });
+    try {
+      await getSFUConfigWithOpenID(
+        matrixClient,
+        ownMemberMock,
+        "https://sfu.example.org",
+        "!example_room_id",
+        {
+          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+          delayId: "mock_delay_id",
+        },
+      );
+    } catch (ex) {
+      expect((ex as Error).message).toEqual(
+        "SFU Config fetch failed with status code 500",
+      );
+      void (await fetchMock.flush());
+    }
+    const calls = fetchMock.calls();
+    expect(calls.length).toBe(2);
+
+    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
+    expect(calls[0][1]).toStrictEqual({
+      // check if it uses correct delayID!
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get");
+
+    expect(calls[1][1]).toStrictEqual({
+      body: '{"room":"!example_room_id","device_id":"DEVICE"}',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+  });
+
+  it("dont try legacy if endpoint with delay delegation is sucessful", async () => {
+    fetchMock.post("https://sfu.example.org/get_token", () => {
+      return {
+        status: 200,
+        body: { url: sfuUrl, jwt: testJWTToken },
+      };
+    });
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 500,
+        body: { error: "Test failure" },
+      };
+    });
+    try {
+      await getSFUConfigWithOpenID(
+        matrixClient,
+        ownMemberMock,
+        "https://sfu.example.org",
+        "!example_room_id",
+        {
+          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+          delayId: "mock_delay_id",
+        },
+      );
+    } catch (ex) {
+      expect((ex as Error).message).toEqual(
+        "SFU Config fetch failed with status code 500",
+      );
+      void (await fetchMock.flush());
+    }
+    const calls = fetchMock.calls();
+    expect(calls.length).toBe(1);
+
+    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
+    expect(calls[0][1]).toStrictEqual({
+      // check if it uses correct delayID!
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  });
+
   it("should retry fetching the openid token", async () => {
     let count = 0;
     matrixClient.getOpenIdToken.mockImplementation(async () => {
@@ -98,6 +201,7 @@ describe("getSFUConfigWithOpenID", () => {
     });
     const config = await getSFUConfigWithOpenID(
       matrixClient,
+      ownMemberMock,
       "https://sfu.example.org",
       "!example_room_id",
     );

src/livekit/openIDSFU.ts

@@ -5,11 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type IOpenIDToken, type MatrixClient } from "matrix-js-sdk";
-import { logger } from "matrix-js-sdk/lib/logger";
+import {
+  retryNetworkOperation,
+  type IOpenIDToken,
+  type MatrixClient,
+} from "matrix-js-sdk";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+import { type Logger } from "matrix-js-sdk/lib/logger";
 
-import { FailToGetOpenIdToken } from "../utils/errors";
+import {
+  FailToGetOpenIdToken,
+  NoMatrix2AuthorizationService,
+} from "../utils/errors";
 import { doNetworkOperationWithRetry } from "../utils/matrix";
+import { Config } from "../config/Config";
+import { JwtEndpointVersion } from "../state/CallViewModel/localMember/LocalTransport";
 
 /**
  * Configuration and access tokens provided by the SFU on successful authentication.
@@ -18,6 +28,7 @@ export interface SFUConfig {
   url: string;
   jwt: string;
   livekitAlias: string;
+  // NOTE: Currently unused.
   livekitIdentity: string;
 }
 
@@ -64,15 +75,32 @@ export type OpenIDClientParts = Pick<
  * to the matrix RTC backend in order to get acces to the SFU.
  * It has built-in retry for calls to the homeserver with a backoff policy.
  * @param client The Matrix client
+ * @param membership Our own membership identity parts used to send to jwt service.
  * @param serviceUrl The URL of the livekit SFU service
- * @param matrixRoomId The Matrix room ID for which to get the SFU config
+ * @param roomId The room id used in the jwt request. This is NOT the livekit_alias. The jwt service will provide the alias. It maps matrix room ids <-> Livekit aliases.
+ * @param opts Additional options to modify which endpoint with which data will be used to acquire the jwt token.
+ * @param opts.forceJwtEndpoint This will use the old jwt endpoint which will create the rtc backend identity based on string concatenation
+ * instead of a hash.
+ * This function by default uses whatever is possible with the current jwt service installed next to the SFU.
+ * For remote connections this does not matter, since we will not publish there we can rely on the newest option.
+ * For our own connection we can only use the hashed version if we also send the new matrix2.0 sticky events.
+ * @param opts.delayEndpointBaseUrl The URL of the matrix homeserver.
+ * @param opts.delayId The delay id used for the jwt service to manage.
+ * @param logger optional logger.
  * @returns Object containing the token information
  * @throws FailToGetOpenIdToken
  */
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
+  membership: CallMembershipIdentityParts,
   serviceUrl: string,
-  matrixRoomId: string,
+  roomId: string,
+  opts?: {
+    forceJwtEndpoint?: JwtEndpointVersion;
+    delayEndpointBaseUrl?: string;
+    delayId?: string;
+  },
+  logger?: Logger,
 ): Promise<SFUConfig> {
   let openIdToken: IOpenIDToken;
   try {
@@ -84,16 +112,67 @@ export async function getSFUConfigWithOpenID(
       error instanceof Error ? error : new Error("Unknown error"),
     );
   }
-  logger.debug("Got openID token", openIdToken);
+  logger?.debug("Got openID token", openIdToken);
 
-  logger.info(`Trying to get JWT for focus ${serviceUrl}...`);
-  const sfuConfig = await getLiveKitJWT(
-    client,
-    serviceUrl,
-    matrixRoomId,
-    openIdToken,
-  );
-  logger.info(`Got JWT from call's active focus URL.`);
+  logger?.info(`Trying to get JWT for focus ${serviceUrl}...`);
+
+  let sfuConfig: { url: string; jwt: string } | undefined;
+
+  const tryBothJwtEndpoints = opts?.forceJwtEndpoint === undefined; // This is for SFUs where we do not publish.
+
+  const forceMatrix2Jwt =
+    opts?.forceJwtEndpoint === JwtEndpointVersion.Matrix_2_0;
+
+  // We want to start using the new endpoint (with optional delay delegation)
+  // if we can use both or if we are forced to use the new one.
+  if (tryBothJwtEndpoints || forceMatrix2Jwt) {
+    try {
+      sfuConfig = await getLiveKitJWTWithDelayDelegation(
+        membership,
+        serviceUrl,
+        roomId,
+        openIdToken,
+        opts?.delayEndpointBaseUrl,
+        opts?.delayId,
+      );
+      logger?.info(`Got JWT from call's active focus URL.`);
+    } catch (e) {
+      if (e instanceof NotSupportedError) {
+        logger?.warn(
+          `Failed fetching jwt with matrix 2.0 endpoint (retry with legacy) Not supported`,
+          e,
+        );
+        sfuConfig = undefined;
+      } else {
+        logger?.warn(
+          `Failed fetching jwt with matrix 2.0 endpoint other issues ->`,
+          `(not going to try with legacy endpoint if forceMatrix2Jwt is set to false (it is ${forceMatrix2Jwt}), we did not get a not supported error from the sfu)`,
+          e,
+        );
+        // Make this throw a hard error in case we force the matrix2.0 endpoint.
+        if (forceMatrix2Jwt)
+          throw new NoMatrix2AuthorizationService(e as Error);
+        // NEVER get bejond this point if we forceMatrix2 and it failed!
+      }
+    }
+  }
+
+  // DEPRECATED
+  // here we either have a sfuConfig or we alredy exited because of `if (forceMatrix2) throw ...`
+  // The only case we can get into this condition is, if `forceMatrix2` is `false`
+  if (sfuConfig === undefined) {
+    sfuConfig = await getLiveKitJWT(
+      membership.deviceId,
+      serviceUrl,
+      roomId,
+      openIdToken,
+    );
+    logger?.info(`Got JWT from call's active focus URL.`);
+  }
+
+  if (!sfuConfig) {
+    throw new Error("No `sfuConfig` after trying with old and new endpoints");
+  }
 
   // Pull the details from the JWT
   const [, payloadStr] = sfuConfig.jwt.split(".");
@@ -104,33 +183,108 @@ export async function getSFUConfigWithOpenID(
     url: sfuConfig.url,
     livekitAlias: payload.video.room,
     // NOTE: Currently unused.
+    // Probably also not helpful since we now compute the backendIdentity on joining the call so we can use it for the encryption manager.
+    // The only reason for us to know it locally is to connect the right users with the lk world. (and to set our own keys)
     livekitIdentity: payload.sub,
   };
 }
-
+const RETRIES = 4;
 async function getLiveKitJWT(
-  client: OpenIDClientParts,
+  deviceId: string,
   livekitServiceURL: string,
-  roomName: string,
+  matrixRoomId: string,
   openIDToken: IOpenIDToken,
 ): Promise<{ url: string; jwt: string }> {
-  try {
-    const res = await fetch(livekitServiceURL + "/sfu/get", {
+  let res: Response | undefined;
+  await retryNetworkOperation(RETRIES, async () => {
+    res = await fetch(livekitServiceURL + "/sfu/get", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        room: roomName,
+        // This is the actual livekit room alias. For the legacy jwt endpoint simply the room id was used.
+        room: matrixRoomId,
         openid_token: openIDToken,
-        device_id: client.getDeviceId(),
+        device_id: deviceId,
       }),
     });
-    if (!res.ok) {
-      throw new Error("SFU Config fetch failed with status code " + res.status);
-    }
-    return await res.json();
-  } catch (e) {
-    throw new Error("SFU Config fetch failed with exception", { cause: e });
+  });
+  if (!res) {
+    throw new Error(
+      `Network error while connecting to jwt service after ${RETRIES} retries`,
+    );
+  }
+  if (!res.ok) {
+    throw new Error("SFU Config fetch failed with status code " + res.status);
+  }
+  return await res.json();
+}
+
+class NotSupportedError extends Error {
+  public constructor(message: string) {
+    super(message);
+    this.name = "NotSupported";
   }
 }
+
+export async function getLiveKitJWTWithDelayDelegation(
+  membership: CallMembershipIdentityParts,
+  livekitServiceURL: string,
+  matrixRoomId: string,
+  openIDToken: IOpenIDToken,
+  delayEndpointBaseUrl?: string,
+  delayId?: string,
+): Promise<{ url: string; jwt: string }> {
+  const { userId, deviceId, memberId } = membership;
+
+  const body = {
+    room_id: matrixRoomId,
+    slot_id: "m.call#ROOM",
+    openid_token: openIDToken,
+    member: {
+      id: memberId,
+      claimed_user_id: userId,
+      claimed_device_id: deviceId,
+    },
+  };
+
+  let bodyDalayParts = {};
+  // Also check for empty string
+  if (delayId && delayEndpointBaseUrl) {
+    const delayTimeoutMs =
+      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms ?? 1000;
+    bodyDalayParts = {
+      delay_id: delayId,
+      delay_timeout: delayTimeoutMs,
+      delay_cs_api_url: delayEndpointBaseUrl,
+    };
+  }
+
+  let res: Response | undefined;
+
+  await retryNetworkOperation(RETRIES, async () => {
+    res = await fetch(livekitServiceURL + "/get_token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ ...body, ...bodyDalayParts }),
+    });
+  });
+
+  if (!res) {
+    throw new Error(
+      `Network error while connecting to jwt service after ${RETRIES} retries`,
+    );
+  }
+  if (!res.ok) {
+    const msg = "SFU Config fetch failed with status code " + res.status;
+    if (res.status === 404) {
+      throw new NotSupportedError(msg);
+    } else {
+      throw new Error(msg);
+    }
+  }
+  return await res.json();
+}

src/room/CallEventAudioRenderer.test.tsx

@@ -39,7 +39,8 @@ import {
   localRtcMember,
 } from "../utils/test-fixtures";
 import { MAX_PARTICIPANT_COUNT_FOR_SOUND } from "../state/CallViewModel/CallViewModel";
-
+import { initializeWidget } from "../widget";
+initializeWidget();
 vitest.mock("livekit-client/e2ee-worker?worker");
 vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");

src/room/InCallView.test.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2025 New Vector Ltd.
+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.
@@ -42,7 +43,8 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
-
+import { initializeWidget } from "../widget";
+initializeWidget();
 vi.hoisted(
   () =>
     (global.ImageData = class MockImageData {

src/room/InCallView.tsx

@@ -33,7 +33,6 @@ import { useTranslation } from "react-i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
-import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
   EndCallButton,
   MicButton,
@@ -45,7 +44,7 @@ import {
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
-import { ElementWidgetActions, widget } from "../widget";
+import { widget } from "../widget";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -435,46 +434,6 @@ export const InCallView: FC<InCallViewProps> = ({
     [vm],
   );
 
-  useEffect(() => {
-    widget?.api.transport
-      .send(
-        gridMode === "grid"
-          ? ElementWidgetActions.TileLayout
-          : ElementWidgetActions.SpotlightLayout,
-        {},
-      )
-      .catch((e) => {
-        logger.error("Failed to send layout change to widget API", e);
-      });
-  }, [gridMode]);
-
-  useEffect(() => {
-    if (widget) {
-      const onTileLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
-        setGridMode("grid");
-        widget!.api.transport.reply(ev.detail, {});
-      };
-      const onSpotlightLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
-        setGridMode("spotlight");
-        widget!.api.transport.reply(ev.detail, {});
-      };
-
-      widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
-      widget.lazyActions.on(
-        ElementWidgetActions.SpotlightLayout,
-        onSpotlightLayout,
-      );
-
-      return (): void => {
-        widget!.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
-        widget!.lazyActions.off(
-          ElementWidgetActions.SpotlightLayout,
-          onSpotlightLayout,
-        );
-      };
-    }
-  }, [setGridMode]);
-
   useAppBarSecondaryButton(
     useMemo(() => {
       if (audioOutputSwitcher === null) return null;
@@ -798,6 +757,8 @@ export const InCallView: FC<InCallViewProps> = ({
     </div>
   );
 
+  const allConnections = useBehavior(vm.allConnections$);
+
   return (
     <div
       className={styles.inRoom}
@@ -836,8 +797,15 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={closeSettings}
             tab={settingsTab}
             onTabChange={setSettingsTab}
-            // TODO expose correct data to setttings modal
-            livekitRooms={[]}
+            livekitRooms={allConnections
+              .getConnections()
+              .map((connectionItem) => ({
+                room: connectionItem.livekitRoom,
+                livekitAlias: connectionItem.livekitAlias,
+                // TODO compute is local or tag it in the livekit room items already
+                isLocal: undefined,
+                url: connectionItem.transport.livekit_service_url,
+              }))}
           />
         </>
       )}

src/room/ReactionAudioRenderer.test.tsx

@@ -37,6 +37,8 @@ import {
   local,
   localRtcMember,
 } from "../utils/test-fixtures";
+import { initializeWidget } from "../widget";
+initializeWidget();
 
 function TestComponent({ vm }: { vm: CallViewModel }): ReactNode {
   return (

src/room/ReactionsOverlay.test.tsx

@@ -19,6 +19,8 @@ import {
   bobRtcMember,
 } from "../utils/test-fixtures";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
+import { initializeWidget } from "../widget";
+initializeWidget();
 
 vi.mock("livekit-client/e2ee-worker?worker");
 

src/room/RoomPage.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2021-2024 New Vector Ltd.
+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.
@@ -20,8 +21,6 @@ import {
   CheckIcon,
   UnknownSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { useObservable } from "observable-hooks";
-import { map } from "rxjs";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
@@ -44,10 +43,12 @@ import { ErrorView } from "../ErrorView";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { MuteStates } from "../state/MuteStates";
 import { ObservableScope } from "../state/ObservableScope";
+import { calculateInitialMuteState } from "../state/initialMuteState.ts";
 
 export const RoomPage: FC = () => {
+  const urlParams = useUrlParams();
   const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
-    useUrlParams();
+    urlParams;
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -68,15 +69,22 @@ export const RoomPage: FC = () => {
 
   const devices = useMediaDevices();
   const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
-  const joined$ = useObservable(
-    (inputs$) => inputs$.pipe(map(([joined]) => joined)),
-    [joined],
-  );
+
   useEffect(() => {
     const scope = new ObservableScope();
-    setMuteStates(new MuteStates(scope, devices, joined$));
+    setMuteStates(
+      new MuteStates(
+        scope,
+        devices,
+        calculateInitialMuteState(
+          urlParams.skipLobby,
+          urlParams.callIntent,
+          widget !== null,
+        ),
+      ),
+    );
     return (): void => scope.end();
-  }, [devices, joined$]);
+  }, [devices, urlParams]);
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as

src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap

@@ -108,7 +108,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
           class="error"
         >
           <div
-            class="_content_o77nw_8 icon"
+            class="_content_1r8kr_8 icon"
             data-size="large"
           >
             <svg
@@ -133,7 +133,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             You were disconnected from the call.
           </p>
           <button
-            class="_button_vczzf_8"
+            class="_button_13vu4_8"
             data-kind="secondary"
             data-size="lg"
             role="button"
@@ -142,7 +142,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_13vu4_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -265,7 +265,7 @@ exports[`should have a close button in widget mode 1`] = `
           class="error"
         >
           <div
-            class="_content_o77nw_8 icon"
+            class="_content_1r8kr_8 icon"
             data-size="large"
           >
             <svg
@@ -295,7 +295,7 @@ exports[`should have a close button in widget mode 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
           </p>
           <button
-            class="_button_vczzf_8"
+            class="_button_13vu4_8"
             data-kind="primary"
             data-size="lg"
             role="button"
@@ -418,7 +418,7 @@ exports[`should render the error page with link back to home 1`] = `
           class="error"
         >
           <div
-            class="_content_o77nw_8 icon"
+            class="_content_1r8kr_8 icon"
             data-size="large"
           >
             <svg
@@ -448,7 +448,7 @@ exports[`should render the error page with link back to home 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
           </p>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_13vu4_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -571,7 +571,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
           class="error"
         >
           <div
-            class="_content_o77nw_8 icon"
+            class="_content_1r8kr_8 icon"
             data-size="large"
           >
             <svg
@@ -601,7 +601,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
           </p>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_13vu4_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -724,7 +724,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
           class="error"
         >
           <div
-            class="_content_o77nw_8 icon"
+            class="_content_1r8kr_8 icon"
             data-size="large"
           >
             <svg
@@ -749,7 +749,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             You were disconnected from the call.
           </p>
           <button
-            class="_button_vczzf_8"
+            class="_button_13vu4_8"
             data-kind="secondary"
             data-size="lg"
             role="button"
@@ -758,7 +758,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_13vu4_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -881,7 +881,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
           class="error"
         >
           <div
-            class="_content_o77nw_8 icon"
+            class="_content_1r8kr_8 icon"
             data-size="large"
           >
             <svg
@@ -906,7 +906,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
             Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.
           </p>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_13vu4_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -1029,7 +1029,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
           class="error"
         >
           <div
-            class="_content_o77nw_8 icon"
+            class="_content_1r8kr_8 icon"
             data-size="large"
           >
             <svg
@@ -1054,7 +1054,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
             The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.
           </p>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_13vu4_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`InCallView > rendering > renders 1`] = `
         >
           <span
             aria-label=""
-            class="_avatar_1qbcf_8 roomAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 roomAvatar _avatar-imageless_zysgz_55"
             data-color="1"
             data-type="round"
             role="img"
@@ -117,7 +117,7 @@ exports[`InCallView > rendering > renders 1`] = `
       data-show="false"
     >
       <div
-        class="_content_o77nw_8 icon"
+        class="_content_1r8kr_8 icon"
         data-size="large"
       >
         <svg
@@ -159,7 +159,7 @@ exports[`InCallView > rendering > renders 1`] = `
         Only works while using app
       </p>
       <button
-        class="_button_vczzf_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -286,8 +286,9 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <button
           aria-disabled="true"
+          aria-label="Unmute microphone"
           aria-labelledby="_r_8_"
-          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_mute"
@@ -309,8 +310,9 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-disabled="true"
+          aria-label="Start video"
           aria-labelledby="_r_d_"
-          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_videomute"
@@ -332,7 +334,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-labelledby="_r_i_"
-          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="secondary"
           data-size="lg"
           role="button"
@@ -352,8 +354,9 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
+          aria-label="End call"
           aria-labelledby="_r_n_"
-          class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
+          class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"

src/settings/DeveloperSettingsTab.module.css

@@ -8,3 +8,14 @@ Please see LICENSE in the repository root for full details.
 pre {
   font-size: var(--font-size-micro);
 }
+
+.livekit_room_box {
+  border: 3px solid var(--cpd-color-bg-subtle-secondary);
+  border-radius: var(--cpd-space-8x);
+  padding: var(--cpd-space-4x);
+  margin-bottom: var(--cpd-space-4x);
+  margin-top: var(--cpd-space-4x);
+  li {
+    font-size: var(--font-size-micro);
+  }
+}

src/settings/DeveloperSettingsTab.test.tsx

@@ -7,9 +7,9 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, it, vi } from "vitest";
 import { render, waitFor } from "@testing-library/react";
+import { type Room as LivekitRoom } from "livekit-client";
 
 import type { MatrixClient } from "matrix-js-sdk";
-import type { Room as LivekitRoom } from "livekit-client";
 import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
 
 // Mock url params hook to avoid environment-dependent snapshot churn.
@@ -25,17 +25,20 @@ function createMockLivekitRoom(
   wsUrl: string,
   serverInfo: object,
   metadata: string,
-): { isLocal: boolean; url: string; room: LivekitRoom } {
+): { isLocal: boolean; url: string; room: LivekitRoom; livekitAlias: string } {
   const mockRoom = {
     serverInfo,
     metadata,
     engine: { client: { ws: { url: wsUrl } } },
+    localParticipant: { identity: "localParticipantIdentity" },
+    remoteParticipants: new Map(),
   } as unknown as LivekitRoom;
 
   return {
     isLocal: true,
     url: wsUrl,
     room: mockRoom,
+    livekitAlias: "TestAlias",
   };
 }
 
@@ -59,6 +62,7 @@ describe("DeveloperSettingsTab", () => {
       room: LivekitRoom;
       url: string;
       isLocal?: boolean;
+      livekitAlias: string;
     }[] = [
       createMockLivekitRoom(
         "wss://local-sfu.example.org",
@@ -67,8 +71,11 @@ describe("DeveloperSettingsTab", () => {
       ),
       {
         isLocal: false,
+        livekitAlias: "TestAlias2",
         url: "wss://remote-sfu.example.org",
         room: {
+          localParticipant: { identity: "localParticipantIdentity" },
+          remoteParticipants: new Map(),
           serverInfo: { region: "remote", version: "4.5.6" },
           metadata: "remote-metadata",
           engine: { client: { ws: { url: "wss://remote-sfu.example.org" } } },

src/settings/DeveloperSettingsTab.tsx

@@ -29,6 +29,7 @@ import {
   Label,
   RadioControl,
 } from "@vector-im/compound-web";
+import { type Room as LivekitRoom } from "livekit-client";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
@@ -42,13 +43,17 @@ import {
   customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
 } from "./settings";
-import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
 
 interface Props {
   client: MatrixClient;
-  livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
+  livekitRooms?: {
+    room: LivekitRoom;
+    url: string;
+    isLocal?: boolean;
+    livekitAlias?: string;
+  }[];
   env: ImportMetaEnv;
 }
 
@@ -275,8 +280,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
           name={matrixRTCModeRadioGroup}
           control={
             <RadioControl
-              checked={matrixRTCMode === MatrixRTCMode.Compatibil}
-              value={MatrixRTCMode.Compatibil}
+              checked={matrixRTCMode === MatrixRTCMode.Compatibility}
+              value={MatrixRTCMode.Compatibility}
               onChange={onMatrixRTCModeChange}
             />
           }
@@ -304,12 +309,14 @@ export const DeveloperSettingsTab: FC<Props> = ({
         </InlineField>
       </Form>
       {livekitRooms?.map((livekitRoom) => (
-        <>
-          <h3>
+        <div className={styles.livekit_room_box}>
+          <h4>
             {t("developer_mode.livekit_sfu", {
               url: livekitRoom.url || "unknown",
             })}
-          </h3>
+          </h4>
+          <p>LivekitAlias: {livekitRoom.livekitAlias}</p>
+          <p>connectionState (wont hot reload): {livekitRoom.room.state}</p>
           {livekitRoom.isLocal && <p>ws-url: {localSfuUrl?.href}</p>}
           <p>
             {t("developer_mode.livekit_server_info")}(
@@ -321,7 +328,19 @@ export const DeveloperSettingsTab: FC<Props> = ({
               : "undefined"}
             {livekitRoom.room.metadata}
           </pre>
-        </>
+          <p>Local Participant</p>
+          <pre className={styles.pre}>
+            {livekitRoom.room.localParticipant.identity}
+          </pre>
+          <p>Remote Participants</p>
+          <ul>
+            {Array.from(livekitRoom.room.remoteParticipants.keys()).map(
+              (id) => (
+                <li key={id}>{id}</li>
+              ),
+            )}
+          </ul>
+        </div>
       ))}
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(env, null, 2)}</pre>

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -234,12 +234,12 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1e0uz_10"
+          class="_container_1qhtc_10"
         >
           <input
             aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
             checked=""
-            class="_input_1e0uz_18"
+            class="_input_1qhtc_18"
             id="radix-_r_8_"
             name="_r_0_"
             title=""
@@ -247,7 +247,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
             value="legacy"
           />
           <div
-            class="_ui_1e0uz_19"
+            class="_ui_1qhtc_19"
           />
         </div>
       </div>
@@ -275,19 +275,19 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1e0uz_10"
+          class="_container_1qhtc_10"
         >
           <input
             aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
-            class="_input_1e0uz_18"
+            class="_input_1qhtc_18"
             id="radix-_r_a_"
             name="_r_0_"
             title=""
             type="radio"
-            value="compatibil"
+            value="compatibility"
           />
           <div
-            class="_ui_1e0uz_19"
+            class="_ui_1qhtc_19"
           />
         </div>
       </div>
@@ -315,11 +315,11 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1e0uz_10"
+          class="_container_1qhtc_10"
         >
           <input
             aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
-            class="_input_1e0uz_18"
+            class="_input_1qhtc_18"
             id="radix-_r_c_"
             name="_r_0_"
             title=""
@@ -327,7 +327,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
             value="matrix_2_0"
           />
           <div
-            class="_ui_1e0uz_19"
+            class="_ui_1qhtc_19"
           />
         </div>
       </div>
@@ -349,46 +349,92 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       </div>
     </div>
   </form>
-  <h3>
-    LiveKit SFU: wss://local-sfu.example.org
-  </h3>
-  <p>
-    ws-url: 
-    wss://local-sfu.example.org/
-  </p>
-  <p>
-    LiveKit Server Info
-    (
-    local
-    )
-  </p>
-  <pre
-    class="pre"
+  <div
+    class="livekit_room_box"
   >
-    {
+    <h4>
+      LiveKit SFU: wss://local-sfu.example.org
+    </h4>
+    <p>
+      LivekitAlias: 
+      TestAlias
+    </p>
+    <p>
+      connectionState (wont hot reload): 
+    </p>
+    <p>
+      ws-url: 
+      wss://local-sfu.example.org/
+    </p>
+    <p>
+      LiveKit Server Info
+      (
+      local
+      )
+    </p>
+    <pre
+      class="pre"
+    >
+      {
   "region": "local",
   "version": "1.2.3"
 }
-    local-metadata
-  </pre>
-  <h3>
-    LiveKit SFU: wss://remote-sfu.example.org
-  </h3>
-  <p>
-    LiveKit Server Info
-    (
-    remote
-    )
-  </p>
-  <pre
-    class="pre"
+      local-metadata
+    </pre>
+    <p>
+      Local Participant
+    </p>
+    <pre
+      class="pre"
+    >
+      localParticipantIdentity
+    </pre>
+    <p>
+      Remote Participants
+    </p>
+    <ul />
+  </div>
+  <div
+    class="livekit_room_box"
   >
-    {
+    <h4>
+      LiveKit SFU: wss://remote-sfu.example.org
+    </h4>
+    <p>
+      LivekitAlias: 
+      TestAlias2
+    </p>
+    <p>
+      connectionState (wont hot reload): 
+    </p>
+    <p>
+      LiveKit Server Info
+      (
+      remote
+      )
+    </p>
+    <pre
+      class="pre"
+    >
+      {
   "region": "remote",
   "version": "4.5.6"
 }
-    remote-metadata
-  </pre>
+      remote-metadata
+    </pre>
+    <p>
+      Local Participant
+    </p>
+    <pre
+      class="pre"
+    >
+      localParticipantIdentity
+    </pre>
+    <p>
+      Remote Participants
+    </p>
+    <ul />
+  </div>
   <p>
     Environment variables
   </p>

src/settings/settings.ts

@@ -126,7 +126,13 @@ export const alwaysShowIphoneEarpiece = new Setting<boolean>(
 
 export enum MatrixRTCMode {
   Legacy = "legacy",
-  Compatibil = "compatibil",
+  Compatibility = "compatibility",
+  /** This implies using
+   *  - sticky events
+   *  - hashed RTC backend identity
+   *  - the new endpoint for the jwt token on the local membership (remote memberships will always try the new jwt endpoint first -> then the legacy one)
+   *  - use the hashed identity for the local membership
+   */
   Matrix_2_0 = "matrix_2_0",
 }
 

src/state/CallViewModel/CallViewModel.test.ts

@@ -62,6 +62,9 @@ import { getValue } from "../../utils/observable.ts";
 import { type Behavior, constant } from "../Behavior.ts";
 import { withCallViewModel as withCallViewModelInMode } from "./CallViewModelTestUtils.ts";
 import { MatrixRTCMode } from "../../settings/settings.ts";
+import { initializeWidget } from "../../widget.ts";
+
+initializeWidget();
 
 vi.mock("rxjs", async (importOriginal) => ({
   ...(await importOriginal()),
@@ -78,11 +81,14 @@ vi.mock("../e2ee/matrixKeyProvider");
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../UrlParams", () => ({ getUrlParams }));
 
-vi.mock("../rtcSessionHelpers", async (importOriginal) => ({
-  ...(await importOriginal()),
-  makeTransport: async (): Promise<LivekitTransport> =>
-    Promise.resolve(exampleTransport),
-}));
+vi.mock(
+  "../state/CallViewModel/localMember/localTransport",
+  async (importOriginal) => ({
+    ...(await importOriginal()),
+    makeTransport: async (): Promise<LivekitTransport> =>
+      Promise.resolve(exampleTransport),
+  }),
+);
 
 const yesNo = {
   y: true,
@@ -232,7 +238,7 @@ const mockLegacyRingEvent = {} as { event_id: string } & ICallNotifyContent;
 
 describe.each([
   [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibil],
+  [MatrixRTCMode.Compatibility],
   [MatrixRTCMode.Matrix_2_0],
 ])("CallViewModel (%s mode)", (mode) => {
   const withCallViewModel = withCallViewModelInMode(mode);
@@ -1255,11 +1261,6 @@ describe.each([
             y: () => {
               rtcSession.membershipStatus = Status.Connected;
             },
-            n: () => {
-              // NOTE: This was removed in https://github.com/matrix-org/matrix-js-sdk/pull/5103 accidentally.
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              rtcSession.membershipStatus = "Reconnecting" as any;
-            },
           });
           schedule(probablyLeftMarbles, {
             y: () => {

src/state/CallViewModel/CallViewModel.ts

@@ -41,10 +41,14 @@ import {
 } from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
+  MembershipManagerEvent,
   type LivekitTransport,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type IWidgetApiRequest } from "matrix-widget-api";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+import { v4 as uuidv4 } from "uuid";
+import { type IMembershipManager } from "matrix-js-sdk/lib/matrixrtc/IMembershipManager";
 
 import {
   LocalUserMediaViewModel,
@@ -98,7 +102,7 @@ import {
   type SpotlightLandscapeLayoutMedia,
   type SpotlightPortraitLayoutMedia,
 } from "../layout-types.ts";
-import { ElementCallError } from "../../utils/errors.ts";
+import { ElementCallError, UnknownCallError } from "../../utils/errors.ts";
 import { type ObservableScope } from "../ObservableScope.ts";
 import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts";
 import {
@@ -106,18 +110,24 @@ import {
   enterRTCSession,
   TransportState,
 } from "./localMember/LocalMember.ts";
-import { createLocalTransport$ } from "./localMember/LocalTransport.ts";
+import {
+  createLocalTransport$,
+  JwtEndpointVersion,
+} from "./localMember/LocalTransport.ts";
 import {
   createMemberships$,
   membershipsAndTransports$,
 } from "../SessionBehaviors.ts";
 import { ECConnectionFactory } from "./remoteMembers/ConnectionFactory.ts";
-import { createConnectionManager$ } from "./remoteMembers/ConnectionManager.ts";
+import {
+  type ConnectionManagerData,
+  createConnectionManager$,
+} from "./remoteMembers/ConnectionManager.ts";
 import {
   createMatrixLivekitMembers$,
-  type TaggedParticipant,
   type LocalMatrixLivekitMember,
   type RemoteMatrixLivekitMember,
+  type MatrixLivekitMember,
 } from "./remoteMembers/MatrixLivekitMembers.ts";
 import {
   type AutoLeaveReason,
@@ -261,6 +271,7 @@ export interface CallViewModel {
    *    multiple devices.
    */
   participantCount$: Behavior<number>;
+  allConnections$: Behavior<ConnectionManagerData>;
   /** Participants sorted by livekit room so they can be used in the audio rendering */
   livekitRoomItems$: Behavior<LivekitRoomItem[]>;
   userMedia$: Behavior<UserMedia[]>;
@@ -381,8 +392,11 @@ export function createCallViewModel$(
   trackProcessorState$: Behavior<ProcessorState>,
 ): CallViewModel {
   const client = matrixRoom.client;
-  const userId = client.getUserId()!;
-  const deviceId = client.getDeviceId()!;
+  const userId = client.getUserId();
+  const deviceId = client.getDeviceId();
+  if (!(userId && deviceId))
+    throw new UnknownCallError(new Error("userId and deviceId are required"));
+
   const livekitKeyProvider = getE2eeKeyProvider(
     options.encryptionSystem,
     matrixRTCSession,
@@ -415,11 +429,38 @@ export function createCallViewModel$(
     memberships$,
   );
 
+  const ownMembershipIdentity: CallMembershipIdentityParts = {
+    userId,
+    deviceId,
+    // This will only be consumed by the sticky membership manager. So it has no impact on legacy calls.
+    memberId: uuidv4(),
+  };
+
   const localTransport$ = createLocalTransport$({
     scope: scope,
     memberships$: memberships$,
+    ownMembershipIdentity,
     client,
+    delayId$: scope.behavior(
+      (
+        fromEvent(
+          matrixRTCSession,
+          MembershipManagerEvent.DelayIdChanged,
+          // The type of reemitted event includes the original emitted as the second arg.
+        ) as Observable<[string | undefined, IMembershipManager]>
+      ).pipe(map(([delayId]) => delayId ?? null)),
+      matrixRTCSession.delayId ?? null,
+    ),
     roomId: matrixRoom.roomId,
+    forceJwtEndpoint$: scope.behavior(
+      matrixRTCMode$.pipe(
+        map((v) =>
+          v === MatrixRTCMode.Matrix_2_0
+            ? JwtEndpointVersion.Matrix_2_0
+            : JwtEndpointVersion.Legacy,
+        ),
+      ),
+    ),
     useOldestMember$: scope.behavior(
       matrixRTCMode$.pipe(map((v) => v === MatrixRTCMode.Legacy)),
     ),
@@ -439,30 +480,20 @@ export function createCallViewModel$(
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
-    inputTransports$: scope.behavior(
-      combineLatest(
-        [
-          localTransport$.pipe(
-            catchError((e: unknown) => {
-              logger.info(
-                "dont pass local transport to createConnectionManager$. localTransport$ threw an error",
-                e,
-              );
-              return of(null);
-            }),
-          ),
-          membershipsAndTransports.transports$,
-        ],
-        (localTransport, transports) => {
-          const localTransportAsArray = localTransport ? [localTransport] : [];
-          return transports.mapInner((transports) => [
-            ...localTransportAsArray,
-            ...transports,
-          ]);
-        },
+    localTransport$: scope.behavior(
+      localTransport$.pipe(
+        catchError((e: unknown) => {
+          logger.info(
+            "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
+            e,
+          );
+          return of(null);
+        }),
       ),
     ),
-    logger,
+    remoteTransports$: membershipsAndTransports.transports$,
+    logger: logger,
+    ownMembershipIdentity,
   });
 
   const matrixLivekitMembers$ = createMatrixLivekitMembers$({
@@ -493,13 +524,13 @@ export function createCallViewModel$(
     joinMatrixRTC: (transport: LivekitTransport) => {
       return enterRTCSession(
         matrixRTCSession,
+        ownMembershipIdentity,
         transport,
         connectOptions$.value,
       );
     },
     createPublisherFactory: (connection: Connection) => {
       return new Publisher(
-        scope,
         connection,
         mediaDevices,
         muteStates,
@@ -604,15 +635,14 @@ export function createCallViewModel$(
     ),
   );
 
+  const allConnections$ = scope.behavior(
+    connectionManager.connectionManagerData$.pipe(map((d) => d.value)),
+  );
   const livekitRoomItems$ = scope.behavior(
     matrixLivekitMembers$.pipe(
-      tap((val) => {
-        logger.debug("matrixLivekitMembers$ updated", val.value);
-      }),
-      switchMap((membersWithEpoch) => {
-        const members = membersWithEpoch.value;
+      switchMap((members) => {
         const a$ = combineLatest(
-          members.map((member) =>
+          members.value.map((member) =>
             combineLatest([member.connection$, member.participant.value$]).pipe(
               map(([connection, participant]) => {
                 // do not render audio for local participant
@@ -685,58 +715,41 @@ export function createCallViewModel$(
       generateItems(
         function* ([
           localMatrixLivekitMember,
-          { value: matrixLivekitMembers },
+          matrixLivekitMembers,
           duplicateTiles,
         ]) {
-          let localParticipantId: string | undefined = undefined;
-          // add local member if available
-          if (localMatrixLivekitMember) {
+          const computeMediaId = (m: MatrixLivekitMember): string =>
+            `${m.userId}:${m.membership$.value.deviceId}`;
+
+          const localUserMediaId = localMatrixLivekitMember
+            ? computeMediaId(localMatrixLivekitMember)
+            : undefined;
+
+          const localAsArray = localMatrixLivekitMember
+            ? [localMatrixLivekitMember]
+            : [];
+          const remoteWithoutLocal = matrixLivekitMembers.value.filter(
+            (m) => computeMediaId(m) !== localUserMediaId,
+          );
+          const allMatrixLivekitMembers = [
+            ...localAsArray,
+            ...remoteWithoutLocal,
+          ];
+
+          for (const matrixLivekitMember of allMatrixLivekitMembers) {
             const { userId, participant, connection$, membership$ } =
-              localMatrixLivekitMember;
-            localParticipantId = `${userId}:${membership$.value.deviceId}`; // should be membership$.value.membershipID which is not optional
-            // const participantId = membership$.value.membershipID;
-            if (localParticipantId) {
-              for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
-                yield {
-                  keys: [
-                    dup,
-                    localParticipantId,
-                    userId,
-                    participant satisfies TaggedParticipant as TaggedParticipant, // Widen the type safely
-                    connection$,
-                  ],
-                  data: undefined,
-                };
-              }
-            }
-          }
-          // add remote members that are available
-          for (const {
-            userId,
-            participant,
-            connection$,
-            membership$,
-          } of matrixLivekitMembers) {
-            const participantId = `${userId}:${membership$.value.deviceId}`;
-            if (participantId === localParticipantId) continue;
-            // const participantId = membership$.value?.identity;
+              matrixLivekitMember;
+            const rtcId = membership$.value.rtcBackendIdentity; // rtcBackendIdentity
+            const mediaId = computeMediaId(matrixLivekitMember);
             for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
               yield {
-                keys: [dup, participantId, userId, participant, connection$],
+                keys: [dup, mediaId, userId, participant, connection$, rtcId],
                 data: undefined,
               };
             }
           }
         },
-        (
-          scope,
-          _data$,
-          dup,
-          participantId,
-          userId,
-          participant,
-          connection$,
-        ) => {
+        (scope, _, dup, mediaId, userId, participant, connection$, rtcId) => {
           const livekitRoom$ = scope.behavior(
             connection$.pipe(map((c) => c?.livekitRoom)),
           );
@@ -751,8 +764,9 @@ export function createCallViewModel$(
 
           return new UserMedia(
             scope,
-            `${participantId}:${dup}`,
+            `${mediaId}:${dup}`,
             userId,
+            rtcId,
             participant,
             options.encryptionSystem,
             livekitRoom$,
@@ -761,8 +775,8 @@ export function createCallViewModel$(
             localMembership.reconnecting$,
             displayName$,
             matrixMemberMetadataStore.createAvatarUrlBehavior$(userId),
-            handsRaised$.pipe(map((v) => v[participantId]?.time ?? null)),
-            reactions$.pipe(map((v) => v[participantId] ?? undefined)),
+            handsRaised$.pipe(map((v) => v[mediaId]?.time ?? null)),
+            reactions$.pipe(map((v) => v[mediaId] ?? undefined)),
           );
         },
       ),
@@ -1503,6 +1517,7 @@ export function createCallViewModel$(
       ),
       null,
     ),
+    allConnections$,
     participantCount$: participantCount$,
     handsRaised$: handsRaised$,
     reactions$: reactions$,

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -24,6 +24,7 @@ import {
   mockLivekitRoom,
   mockMuteStates,
   withTestScheduler,
+  ownMemberMock,
 } from "../../../utils/test";
 import {
   TransportState,
@@ -38,6 +39,10 @@ import { constant } from "../../Behavior";
 import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
 import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
+import { type LocalTransportWithSFUConfig } from "./LocalTransport";
+import { initializeWidget } from "../../../widget";
+
+initializeWidget();
 
 const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
@@ -103,11 +108,12 @@ describe("LocalMembership", () => {
         getOldestMembership: vi.fn().mockReturnValue({
           getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
         }),
-        joinRoomSession: vi.fn(),
+        joinRTCSession: vi.fn(),
       }) as unknown as MatrixRTCSession;
 
       enterRTCSession(
         mockedSession,
+        ownMemberMock,
         {
           livekit_alias: "roomId",
           livekit_service_url: "http://my-well-known-service-url.com",
@@ -119,7 +125,12 @@ describe("LocalMembership", () => {
         },
       );
 
-      expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
+      expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+        {
+          deviceId: "DEVICE",
+          memberId: "@alice:example.org:DEVICE",
+          userId: "@alice:example.org",
+        },
         [
           {
             livekit_alias: "roomId",
@@ -161,11 +172,12 @@ describe("LocalMembership", () => {
         },
         memberships: [],
         getFocusInUse: vi.fn(),
-        joinRoomSession: vi.fn(),
+        joinRTCSession: vi.fn(),
       }) as unknown as MatrixRTCSession;
 
       enterRTCSession(
         mockedSession,
+        ownMemberMock,
         {
           livekit_alias: "roomId",
           livekit_service_url: "http://my-well-known-service-url.com",
@@ -185,8 +197,8 @@ describe("LocalMembership", () => {
       matrixRTCMode: MatrixRTCMode.Matrix_2_0,
     }),
     matrixRTCSession: {
-      updateCallIntent: () => {},
-      leaveRoomSession: () => {},
+      updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
+      leaveRoomSession: vi.fn(),
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
     trackProcessorState$: constant({
@@ -204,10 +216,11 @@ describe("LocalMembership", () => {
 
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransport>(
-        hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
-        null,
-      );
+      const localTransport$ =
+        scope.behavior<null | LocalTransportWithSFUConfig>(
+          hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
+          null,
+        );
 
       // we do not need any connection data since we want to fail before reaching that.
       const mockConnectionManager = {
@@ -234,12 +247,55 @@ describe("LocalMembership", () => {
     });
   });
 
+  it("logs if callIntent cannot be updated", async () => {
+    const scope = new ObservableScope();
+
+    const localTransport$ = new BehaviorSubject(aTransport);
+    const mockConnectionManager = {
+      transports$: constant(new Epoch([])),
+      connectionManagerData$: constant(new Epoch(new ConnectionManagerData())),
+    };
+    async function reject(): Promise<void> {
+      return Promise.reject(new Error("Not connected yet"));
+    }
+    const localMembership = createLocalMembership$({
+      scope,
+      ...defaultCreateLocalMemberValues,
+      matrixRTCSession: {
+        updateCallIntent: vi.fn().mockImplementation(reject),
+        leaveRoomSession: vi.fn(),
+      },
+      connectionManager: mockConnectionManager,
+      localTransport$,
+    });
+    const expextedLog =
+      "'not connected yet' while updating the call intent (this is expected on startup)";
+    const internalLogger = vi.spyOn(localMembership.internalLoggerRef, "debug");
+
+    await flushPromises();
+    defaultCreateLocalMemberValues.muteStates.video.setEnabled$.value?.(true);
+    expect(internalLogger).toHaveBeenCalledWith(expextedLog);
+    scope.end();
+  });
+
   const aTransport = {
-    livekit_service_url: "a",
-  } as LivekitTransport;
+    transport: {
+      livekit_service_url: "a",
+    } as LivekitTransport,
+    sfuConfig: {
+      url: "sfu-url",
+      jwt: "sfu-token",
+    },
+  } as LocalTransportWithSFUConfig;
   const bTransport = {
-    livekit_service_url: "b",
-  } as LivekitTransport;
+    transport: {
+      livekit_service_url: "b",
+    } as LivekitTransport,
+    sfuConfig: {
+      url: "sfu-url",
+      jwt: "sfu-token",
+    },
+  } as LocalTransportWithSFUConfig;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -249,7 +305,7 @@ describe("LocalMembership", () => {
       } as unknown as LocalParticipant,
     }),
     state$: constant(ConnectionState.LivekitConnected),
-    transport: aTransport,
+    transport: aTransport.transport,
   } as unknown as Connection;
   const connectionTransportAConnecting = {
     ...connectionTransportAConnected,
@@ -258,11 +314,11 @@ describe("LocalMembership", () => {
   } as unknown as Connection;
   const connectionTransportBConnected = {
     state$: constant(ConnectionState.LivekitConnected),
-    transport: bTransport,
+    transport: bTransport.transport,
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
 
-  it("recreates publisher if new connection is used and ENDS always unpublish and end tracks", async () => {
+  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
     const scope = new ObservableScope();
 
     const localTransport$ = new BehaviorSubject(aTransport);
@@ -275,6 +331,9 @@ describe("LocalMembership", () => {
         seed += 1;
         logger.info(`creating [${a}]`);
         const p = {
+          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
+          // all the cleanup we need.
+          destroy: vi.fn(),
           stopPublishing: vi.fn().mockImplementation(() => {
             logger.info(`stopPublishing [${a}]`);
           }),
@@ -303,19 +362,22 @@ describe("LocalMembership", () => {
     await flushPromises();
     localTransport$.next(bTransport);
     await flushPromises();
+
     expect(publisherFactory).toHaveBeenCalledTimes(2);
     expect(publishers.length).toBe(2);
     // stop the first Publisher and let the second one life.
-    expect(publishers[0].stopTracks).toHaveBeenCalled();
-    expect(publishers[1].stopTracks).not.toHaveBeenCalled();
-    expect(publishers[0].stopPublishing).toHaveBeenCalled();
-    expect(publishers[1].stopPublishing).not.toHaveBeenCalled();
-    expect(publisherFactory.mock.calls[0][0].transport).toBe(aTransport);
-    expect(publisherFactory.mock.calls[1][0].transport).toBe(bTransport);
+    expect(publishers[0].destroy).toHaveBeenCalled();
+    expect(publishers[1].destroy).not.toHaveBeenCalled();
+    expect(publisherFactory.mock.calls[0][0].transport).toBe(
+      aTransport.transport,
+    );
+    expect(publisherFactory.mock.calls[1][0].transport).toBe(
+      bTransport.transport,
+    );
     scope.end();
     await flushPromises();
     // stop all tracks after ending scopes
-    expect(publishers[1].stopPublishing).toHaveBeenCalled();
+    expect(publishers[1].destroy).toHaveBeenCalled();
     // expect(publishers[1].stopTracks).toHaveBeenCalled();
 
     defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
@@ -333,8 +395,9 @@ describe("LocalMembership", () => {
     defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
       () => {
         const p = {
-          stopPublishing: vi.fn(),
-          stopTracks: vi.fn(),
+          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
+          // all the cleanup we need.
+          destroy: vi.fn(),
           createAndSetupTracks: vi.fn().mockImplementation(async () => {
             tracks$.next([{}, {}] as LocalTrack[]);
             return Promise.resolve();
@@ -369,11 +432,11 @@ describe("LocalMembership", () => {
     localMembership.startTracks();
     await flushPromises();
     expect(publishers[0].createAndSetupTracks).toHaveBeenCalled();
-    // expect(localMembership.tracks$.value.length).toBe(2);
+
     scope.end();
     await flushPromises();
     // stop all tracks after ending scopes
-    expect(publishers[0].stopPublishing).toHaveBeenCalled();
+    expect(publishers[0].destroy).toHaveBeenCalled();
     // expect(publishers[0].stopTracks).toHaveBeenCalled();
     publisherFactory.mockClear();
   });
@@ -383,33 +446,29 @@ describe("LocalMembership", () => {
     const scope = new ObservableScope();
 
     const connectionManagerData = new ConnectionManagerData();
-    const localTransport$ = new BehaviorSubject<null | LivekitTransport>(null);
+    const localTransport$ =
+      new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
     const connectionManagerData$ = new BehaviorSubject(
       new Epoch(connectionManagerData),
     );
     const publishers: Publisher[] = [];
 
-    const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
     const publishing$ = new BehaviorSubject<boolean>(false);
     const createTrackResolver = Promise.withResolvers<void>();
     const publishResolver = Promise.withResolvers<void>();
     defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
       () => {
         const p = {
-          stopPublishing: vi.fn(),
-          stopTracks: vi.fn().mockImplementation(() => {
-            logger.info("stopTracks");
-            tracks$.next([]);
-          }),
+          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
+          // all the cleanup we need.
+          destroy: vi.fn(),
           createAndSetupTracks: vi.fn().mockImplementation(async () => {
             await createTrackResolver.promise;
-            tracks$.next([{}, {}] as LocalTrack[]);
           }),
           startPublishing: vi.fn().mockImplementation(async () => {
             await publishResolver.promise;
             publishing$.next(true);
           }),
-          tracks$,
           publishing$,
         };
         publishers.push(p as unknown as Publisher);
@@ -460,7 +519,7 @@ describe("LocalMembership", () => {
     });
 
     (
-      connectionManagerData2.getConnectionForTransport(aTransport)!
+      connectionManagerData2.getConnectionForTransport(aTransport.transport)!
         .state$ as BehaviorSubject<ConnectionState>
     ).next(ConnectionState.LivekitConnected);
     expect(localMembership.localMemberState$.value).toStrictEqual({
@@ -509,7 +568,7 @@ describe("LocalMembership", () => {
       (localMembership.localMemberState$.value as any).media,
     ).toStrictEqual(PublishState.Publishing);
 
-    expect(publishers[0].stopPublishing).not.toHaveBeenCalled();
+    expect(publishers[0].destroy).not.toHaveBeenCalled();
 
     expect(localMembership.localMemberState$.isStopped).toBe(false);
     scope.end();
@@ -520,7 +579,7 @@ describe("LocalMembership", () => {
       (localMembership.localMemberState$.value as any).media,
     ).toStrictEqual(PublishState.Publishing);
     // stop all tracks after ending scopes
-    expect(publishers[0].stopPublishing).toHaveBeenCalled();
+    expect(publishers[0].destroy).toHaveBeenCalled();
     // expect(publishers[0].stopTracks).toHaveBeenCalled();
   });
   // TODO add tests for matrix local matrix participation.

src/state/CallViewModel/localMember/LocalMember.ts

@@ -36,6 +36,7 @@ import {
 } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type IConnectionManager } from "../remoteMembers/ConnectionManager.ts";
@@ -60,6 +61,7 @@ import {
 } from "../remoteMembers/Connection.ts";
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { and$ } from "../../../utils/observable.ts";
+import { type LocalTransportWithSFUConfig } from "./LocalTransport.ts";
 
 export enum TransportState {
   /** Not even a transport is available to the LocalMembership */
@@ -125,7 +127,7 @@ interface Props {
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (transport: LivekitTransport) => void;
   homeserverConnected: HomeserverConnected;
-  localTransport$: Behavior<LivekitTransport | null>;
+  localTransport$: Behavior<LocalTransportWithSFUConfig | null>;
   matrixRTCSession: Pick<
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
@@ -198,6 +200,7 @@ export const createLocalMembership$ = ({
    * Fully connected
    */
   connected$: Behavior<boolean>;
+  internalLoggerRef: Logger;
 } => {
   const logger = parentLogger.getChild("[LocalMembership]");
   logger.debug(`Creating local membership..`);
@@ -233,7 +236,9 @@ export const createLocalMembership$ = ({
           return null;
         }
 
-        return connectionData.getConnectionForTransport(localTransport);
+        return connectionData.getConnectionForTransport(
+          localTransport.transport,
+        );
       }),
       tap((connection) => {
         logger.info(
@@ -262,11 +267,11 @@ export const createLocalMembership$ = ({
 
   mediaErrors$.pipe(scope.bind()).subscribe((error) => {
     if (error) {
+      // This is a MediaDevice error, can be PermissionDenied, NotFound, DeviceInUse, Other.
+      // Will also occurs if you cancel screen sharing browser prompt.
+      // This is not necessarily fatal, since the user might be able to join without media.
+      // XXX We might want to give some user feedback here to let them know their media is not working.
       logger.error(`Failed to create local tracks:`, error);
-      setMatrixError(
-        // TODO is it fatal? Do we need to create a new Specialized Error?
-        new UnknownCallError(new Error(`Media device error: ${error}`)),
-      );
     }
   });
   // MATRIX RELATED
@@ -306,13 +311,17 @@ export const createLocalMembership$ = ({
   //  - destruct all current streams
   //  - overwrite current publisher
   scope.reconcile(localConnection$, async (connection) => {
+    logger.info(
+      "reconcile based on new localConnection:",
+      connection?.transport.livekit_service_url,
+    );
     if (connection !== null) {
       const publisher = createPublisherFactory(connection);
       publisher$.next(publisher);
+
       // Clean-up callback
       return Promise.resolve(async (): Promise<void> => {
-        await publisher.stopPublishing();
-        await publisher.stopTracks();
+        await publisher.destroy();
       });
     }
   });
@@ -516,12 +525,19 @@ export const createLocalMembership$ = ({
       }
     });
 
-  combineLatest([muteStates.video.enabled$, homeserverConnected.combined$])
-    .pipe(scope.bind())
-    .subscribe(([videoEnabled, connected]) => {
-      if (!connected) return;
-      void matrixRTCSession.updateCallIntent(videoEnabled ? "video" : "audio");
-    });
+  muteStates.video.enabled$.pipe(scope.bind()).subscribe((videoEnabled) => {
+    void matrixRTCSession
+      .updateCallIntent(videoEnabled ? "video" : "audio")
+      .catch((e) => {
+        if (e instanceof Error && e.message === "Not connected yet") {
+          logger.debug(
+            "'not connected yet' while updating the call intent (this is expected on startup)",
+          );
+        } else {
+          throw e;
+        }
+      });
+  });
 
   // Keep matrix rtc session in sync with localTransport$, connectRequested$
   scope.reconcile(
@@ -532,7 +548,7 @@ export const createLocalMembership$ = ({
       if (!shouldConnect) return;
 
       try {
-        joinMatrixRTC(transport);
+        joinMatrixRTC(transport.transport);
       } catch (error) {
         logger.error("Error entering RTC session", error);
         if (error instanceof Error)
@@ -551,7 +567,12 @@ export const createLocalMembership$ = ({
   );
 
   const participant$ = scope.behavior(
-    localConnection$.pipe(map((c) => c?.livekitRoom?.localParticipant ?? null)),
+    localConnection$.pipe(
+      map((c) => c?.livekitRoom?.localParticipant ?? null),
+      tap((p) => {
+        logger.debug("participant$ updated:", p?.identity);
+      }),
+    ),
   );
 
   // Pause upstream of all local media tracks when we're disconnected from
@@ -660,6 +681,7 @@ export const createLocalMembership$ = ({
     sharingScreen$,
     toggleScreenSharing,
     connection$: localConnection$,
+    internalLoggerRef: logger,
   };
 };
 
@@ -686,18 +708,19 @@ interface EnterRTCSessionOptions {
  *      - Handles retries (fails only after several attempts)
  *
  * @param rtcSession - The MatrixRTCSession to join.
+ * @param ownMembershipIdentity - Options for entering the RTC session.
  * @param transport - The LivekitTransport to use for this session.
- * @param options - Options for entering the RTC session.
- * @param options.encryptMedia - Whether to encrypt media.
- * @param options.matrixRTCMode - The Matrix RTC mode to use.
+ * @param options - `encryptMedia`: Whether to encrypt media `matrixRTCMode`: The Matrix RTC mode to use.
  * @throws If the widget could not send ElementWidgetActions.JoinCall action.
  */
 // Exported for unit testing
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
+  ownMembershipIdentity: CallMembershipIdentityParts,
   transport: LivekitTransport,
-  { encryptMedia, matrixRTCMode }: EnterRTCSessionOptions,
+  options: EnterRTCSessionOptions,
 ): void {
+  const { encryptMedia, matrixRTCMode } = options;
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -709,10 +732,13 @@ export function enterRTCSession(
   const useDeviceSessionMemberEvents =
     features?.feature_use_device_session_member_events;
   const { sendNotificationType: notificationType, callIntent } = getUrlParams();
-  const multiSFU = matrixRTCMode !== MatrixRTCMode.Legacy;
+  const multiSFU =
+    matrixRTCMode === MatrixRTCMode.Compatibility ||
+    matrixRTCMode === MatrixRTCMode.Matrix_2_0;
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
-  rtcSession.joinRoomSession(
+  rtcSession.joinRTCSession(
+    ownMembershipIdentity,
     multiSFU ? [] : [transport],
     multiSFU ? transport : undefined,
     {

src/state/CallViewModel/localMember/LocalTransport.test.ts

@@ -18,8 +18,8 @@ import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";
 
-import { mockConfig, flushPromises } from "../../../utils/test";
-import { createLocalTransport$ } from "./LocalTransport";
+import { mockConfig, flushPromises, ownMemberMock } from "../../../utils/test";
+import { createLocalTransport$, JwtEndpointVersion } from "./LocalTransport";
 import { constant } from "../../Behavior";
 import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
@@ -39,11 +39,35 @@ describe("LocalTransport", () => {
   };
 
   let scope: ObservableScope;
-  beforeEach(() => {
-    scope = new ObservableScope();
-  });
+  beforeEach(() => (scope = new ObservableScope()));
   afterEach(() => scope.end());
 
+  it("throws if config is missing", async () => {
+    const localTransport$ = createLocalTransport$({
+      scope,
+      roomId: "!room:example.org",
+      useOldestMember$: constant(false),
+      memberships$: constant(new Epoch<CallMembership[]>([])),
+      client: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        getDomain: () => "",
+        baseUrl: "example.org",
+        // These won't be called in this error path but satisfy the type
+        getOpenIdToken: vi.fn(),
+        getDeviceId: vi.fn(),
+      },
+      ownMembershipIdentity: ownMemberMock,
+      forceJwtEndpoint$: constant(JwtEndpointVersion.Legacy),
+      delayId$: constant("delay_id_mock"),
+    });
+    await flushPromises();
+
+    expect(() => localTransport$.value).toThrow(
+      new MatrixRTCTransportMissingError(""),
+    );
+  });
+
   it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
     // Provide a valid config so makeTransportInternal resolves a transport
     const scope = new ObservableScope();
@@ -65,6 +89,7 @@ describe("LocalTransport", () => {
       useOldestMember$: constant(false),
       memberships$: constant(new Epoch<CallMembership[]>([])),
       client: {
+        baseUrl: "https://lk.example.org",
         // Use empty domain to skip .well-known and use config directly
         getDomain: () => "",
         // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -72,6 +97,9 @@ describe("LocalTransport", () => {
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
       },
+      ownMembershipIdentity: ownMemberMock,
+      forceJwtEndpoint$: constant(JwtEndpointVersion.Legacy),
+      delayId$: constant("delay_id_mock"),
     });
     localTransport$.subscribe(
       (o) => observations.push(o),
@@ -86,6 +114,60 @@ describe("LocalTransport", () => {
     expect(() => localTransport$.value).toThrow(expectedError);
   });
 
+  it("emits preferred transport after OpenID resolves", async () => {
+    // Use config so transport discovery succeeds, but delay OpenID JWT fetch
+    mockConfig({
+      livekit: { livekit_service_url: "https://lk.example.org" },
+    });
+
+    const openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
+
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
+      openIdResolver.promise,
+    );
+
+    const localTransport$ = createLocalTransport$({
+      scope,
+      roomId: "!room:example.org",
+      useOldestMember$: constant(false),
+      memberships$: constant(new Epoch<CallMembership[]>([])),
+      client: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        getDomain: () => "",
+        getOpenIdToken: vi.fn(),
+        getDeviceId: vi.fn(),
+        baseUrl: "https://lk.example.org",
+      },
+      ownMembershipIdentity: ownMemberMock,
+      forceJwtEndpoint$: constant(JwtEndpointVersion.Legacy),
+      delayId$: constant("delay_id_mock"),
+    });
+
+    openIdResolver.resolve?.({
+      url: "https://lk.example.org",
+      jwt: "jwt",
+      livekitAlias: "!room:example.org",
+      livekitIdentity: ownMemberMock.userId + ":" + ownMemberMock.deviceId,
+    });
+    expect(localTransport$.value).toBe(null);
+    await flushPromises();
+    // final
+    expect(localTransport$.value).toStrictEqual({
+      transport: {
+        livekit_alias: "!room:example.org",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      },
+      sfuConfig: {
+        jwt: "jwt",
+        livekitAlias: "!room:example.org",
+        livekitIdentity: "@alice:example.org:DEVICE",
+        url: "https://lk.example.org",
+      },
+    });
+  });
+
   it("updates local transport when oldest member changes", async () => {
     // Use config so transport discovery succeeds, but delay OpenID JWT fetch
     mockConfig({
@@ -109,7 +191,11 @@ describe("LocalTransport", () => {
         _unstable_getRTCTransports: async () => Promise.resolve([]),
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
+        baseUrl: "https://lk.example.org",
       },
+      ownMembershipIdentity: ownMemberMock,
+      forceJwtEndpoint$: constant(JwtEndpointVersion.Legacy),
+      delayId$: constant("delay_id_mock"),
     });
 
     openIdResolver.resolve?.(openIdResponse);
@@ -117,9 +203,17 @@ describe("LocalTransport", () => {
     await flushPromises();
     // final
     expect(localTransport$.value).toStrictEqual({
-      livekit_alias: "!example_room_id",
-      livekit_service_url: "https://lk.example.org",
-      type: "livekit",
+      transport: {
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      },
+      sfuConfig: {
+        jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
+        livekitAlias: "!example_room_id",
+        livekitIdentity: "@lk_user:ABCDEF",
+        url: "https://lk.example.org",
+      },
     });
   });
 
@@ -134,11 +228,15 @@ describe("LocalTransport", () => {
       mockConfig({});
       customLivekitUrl.setValue(customLivekitUrl.defaultValue);
       localTransportOpts = {
+        ownMembershipIdentity: ownMemberMock,
         scope,
         roomId: "!example_room_id",
         useOldestMember$: constant(false),
+        forceJwtEndpoint$: constant(JwtEndpointVersion.Legacy),
+        delayId$: constant(null),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
+          baseUrl: "https://example.org",
           getDomain: vi.fn().mockReturnValue(""),
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
@@ -165,9 +263,17 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        livekit_alias: "!example_room_id",
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
+        transport: {
+          livekit_alias: "!example_room_id",
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
+        sfuConfig: {
+          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
+          livekitAlias: "!example_room_id",
+          livekitIdentity: "@lk_user:ABCDEF",
+          url: "https://lk.example.org",
+        },
       });
     });
     it("supports getting transport via user settings", async () => {
@@ -177,9 +283,17 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        livekit_alias: "!example_room_id",
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
+        transport: {
+          livekit_alias: "!example_room_id",
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
+        sfuConfig: {
+          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
+          livekitAlias: "!example_room_id",
+          livekitIdentity: "@lk_user:ABCDEF",
+          url: "https://lk.example.org",
+        },
       });
     });
     it("supports getting transport via backend", async () => {
@@ -191,9 +305,17 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        livekit_alias: "!example_room_id",
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
+        transport: {
+          livekit_alias: "!example_room_id",
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
+        sfuConfig: {
+          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
+          livekitAlias: "!example_room_id",
+          livekitIdentity: "@lk_user:ABCDEF",
+          url: "https://lk.example.org",
+        },
       });
     });
     it("fails fast if the openID request fails for backend config", async () => {
@@ -222,9 +344,17 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        livekit_alias: "!example_room_id",
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
+        transport: {
+          livekit_alias: "!example_room_id",
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
+        sfuConfig: {
+          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
+          livekitAlias: "!example_room_id",
+          livekitIdentity: "@lk_user:ABCDEF",
+          url: "https://lk.example.org",
+        },
       });
       expect(fetchMock.done()).toEqual(true);
     });
@@ -248,11 +378,15 @@ describe("LocalTransport", () => {
     it("throws if no options are available", async () => {
       const localTransport$ = createLocalTransport$({
         scope,
+        ownMembershipIdentity: ownMemberMock,
         roomId: "!example_room_id",
         useOldestMember$: constant(false),
+        forceJwtEndpoint$: constant(JwtEndpointVersion.Legacy),
+        delayId$: constant(null),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
           getDomain: () => "",
+          baseUrl: "https://example.org",
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: async () => Promise.resolve([]),
           // These won't be called in this error path but satisfy the type

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -16,13 +16,14 @@ import { MatrixError, type MatrixClient } from "matrix-js-sdk";
 import {
   combineLatest,
   distinctUntilChanged,
-  first,
   from,
   map,
+  of,
   switchMap,
 } from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type Epoch, type ObservableScope } from "../../ObservableScope.ts";
@@ -30,9 +31,11 @@ import { Config } from "../../../config/Config.ts";
 import {
   FailToGetOpenIdToken,
   MatrixRTCTransportMissingError,
+  NoMatrix2AuthorizationService,
 } from "../../../utils/errors.ts";
 import {
   getSFUConfigWithOpenID,
+  type SFUConfig,
   type OpenIDClientParts,
 } from "../../../livekit/openIDSFU.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
@@ -47,11 +50,53 @@ const logger = rootLogger.getChild("[LocalTransport]");
  */
 interface Props {
   scope: ObservableScope;
+  ownMembershipIdentity: CallMembershipIdentityParts;
   memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
+  client: Pick<
+    MatrixClient,
+    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
+  > &
     OpenIDClientParts;
   roomId: string;
   useOldestMember$: Behavior<boolean>;
+  forceJwtEndpoint$: Behavior<JwtEndpointVersion>;
+  delayId$: Behavior<string | null>;
+}
+
+export enum JwtEndpointVersion {
+  Legacy = "legacy",
+  Matrix_2_0 = "matrix_2_0",
+}
+
+// TODO livekit_alias-cleanup
+// 1. We need to move away from transports map to connections!!!
+//
+// 2. We need to stop sending livekit_alias all together
+//
+//
+// 1.
+// Transports are just the jwt service adress but do not contain the information which room on this transport to use.
+// That requires slot and roomId.
+//
+// We need one connection per room on the transport.
+//
+// We need an object that contains:
+// transport
+// roomId
+// slotId
+//
+// To map to the connections. Prosposal: `ConnectionIdentifier`
+//
+// 2.
+// We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
+export interface LocalTransportWithSFUConfig {
+  transport: LivekitTransport;
+  sfuConfig: SFUConfig;
+}
+export function isLocalTransportWithSFUConfig(
+  obj: LivekitTransport | LocalTransportWithSFUConfig,
+): obj is LocalTransportWithSFUConfig {
+  return "transport" in obj && "sfuConfig" in obj;
 }
 
 /**
@@ -61,29 +106,61 @@ interface Props {
  * @prop useOldestMember Whether to use the same transport as the oldest member.
  * This will only update once the first oldest member appears. Will not recompute if the oldest member leaves.
  *
+ * @prop useOldJwtEndpoint$ Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
+ * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
+ * (which is expected for non sticky event based rtc member events)
+ * @returns The local transport. It will be created using the correct sfu endpoint based on the useOldJwtEndpoint$ value.
  * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
 export const createLocalTransport$ = ({
   scope,
   memberships$,
+  ownMembershipIdentity,
   client,
   roomId,
   useOldestMember$,
-}: Props): Behavior<LivekitTransport | null> => {
+  forceJwtEndpoint$,
+  delayId$,
+}: Props): Behavior<LocalTransportWithSFUConfig | null> => {
   /**
    * The transport over which we should be actively publishing our media.
    * undefined when not joined.
    */
-  const oldestMemberTransport$ = scope.behavior(
-    memberships$.pipe(
-      map(
-        (memberships) =>
-          memberships.value[0]?.getTransport(memberships.value[0]) ?? null,
+  const oldestMemberTransport$ =
+    scope.behavior<LocalTransportWithSFUConfig | null>(
+      combineLatest([memberships$, useOldestMember$]).pipe(
+        map(([memberships, useOldestMember]) => {
+          if (!useOldestMember) return null; // No need to do any prefetching if not using oldest member
+          const oldestMember = memberships.value[0];
+          const transport = oldestMember?.getTransport(oldestMember);
+          if (!transport) return null;
+          return transport;
+        }),
+        switchMap((transport) => {
+          if (transport !== null && isLivekitTransport(transport)) {
+            // Get the open jwt token to connect to the sfu
+            const computeLocalTransportWithSFUConfig =
+              async (): Promise<LocalTransportWithSFUConfig> => {
+                // await sleep(1000);
+                return {
+                  transport,
+                  sfuConfig: await getSFUConfigWithOpenID(
+                    client,
+                    ownMembershipIdentity,
+                    transport.livekit_service_url,
+                    roomId,
+                    { forceJwtEndpoint: JwtEndpointVersion.Legacy },
+                    logger,
+                  ),
+                };
+              };
+            return from(computeLocalTransportWithSFUConfig());
+          }
+          return of(null);
+        }),
       ),
-      first((t) => t != null && isLivekitTransport(t)),
-    ),
-    null,
-  );
+      null,
+    );
 
   /**
    * The transport that we would personally prefer to publish on (if not for the
@@ -91,9 +168,33 @@ export const createLocalTransport$ = ({
    *
    * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
    */
-  const preferredTransport$: Behavior<LivekitTransport | null> = scope.behavior(
-    customLivekitUrl.value$.pipe(
-      switchMap((customUrl) => from(makeTransport(client, roomId, customUrl))),
+  const preferredTransport$ = scope.behavior(
+    // preferredTransport$ (used for multi sfu) needs to know if we are using the old or new
+    // jwt endpoint (`get_token` vs `sfu/get`) based on that the jwt endpoint will compute the rtcBackendIdentity
+    // differently. (sha(`${userId}|${deviceId}|${memberId}`) vs `${userId}|${deviceId}|${memberId}`)
+    // When using sticky events (we need to use the new endpoint).
+    combineLatest([customLivekitUrl.value$, delayId$, forceJwtEndpoint$]).pipe(
+      switchMap(([customUrl, delayId, forceEndpoint]) => {
+        logger.info(
+          "Creating preferred transport based on: ",
+          "customUrl: ",
+          customUrl,
+          "delayId: ",
+          delayId,
+          "forceEndpoint: ",
+          forceEndpoint,
+        );
+        return from(
+          makeTransport(
+            client,
+            ownMembershipIdentity,
+            roomId,
+            customUrl,
+            forceEndpoint,
+            delayId ?? undefined,
+          ),
+        );
+      }),
     ),
     null,
   );
@@ -107,12 +208,23 @@ export const createLocalTransport$ = ({
       oldestMemberTransport$,
       preferredTransport$,
     ]).pipe(
-      map(([useOldestMember, oldestMemberTransport, preferredTransport]) =>
-        useOldestMember
+      map(([useOldestMember, oldestMemberTransport, preferredTransport]) => {
+        return useOldestMember
           ? (oldestMemberTransport ?? preferredTransport)
-          : preferredTransport,
-      ),
-      distinctUntilChanged(areLivekitTransportsEqual),
+          : preferredTransport;
+      }),
+      distinctUntilChanged((t1, t2) => {
+        logger.info(
+          "Local Transport Update from:",
+          t1?.transport.livekit_service_url,
+          " to ",
+          t2?.transport.livekit_service_url,
+        );
+        return areLivekitTransportsEqual(
+          t1?.transport ?? null,
+          t2?.transport ?? null,
+        );
+      }),
     ),
   );
 };
@@ -124,25 +236,74 @@ const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
  * validating auth against the service to ensure it's correct.
  * Prefers in order:
  *
+
  * 1. The `urlFromDevSettings` value. If this cannot be validated, the function will throw.
  * 2. The transports returned via the homeserver.
  * 3. The transports returned via .well-known.
  * 4. The transport configured in Element Call's config.
  *
  * @param client The authenticated Matrix client for the current user
+ * @param membership The membership identity of the user.
  * @param roomId The ID of the room to be connected to.
  * @param urlFromDevSettings Override URL provided by the user's local config.
+ * @param forceJwtEndpoint Whether to force a specific JWT endpoint
+ *  - `Legacy` / `Matrix_2_0`
+ *  - `get_token` / `sfu/get`
+ *  -  not hashing / hashing the backendIdentity
+ * @param delayId the delay id passed to the jwt service.
+ *
  * @returns A fully validated transport config.
  * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
 async function makeTransport(
-  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
+  client: Pick<
+    MatrixClient,
+    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
+  > &
     OpenIDClientParts,
+  membership: CallMembershipIdentityParts,
   roomId: string,
   urlFromDevSettings: string | null,
-): Promise<LivekitTransport> {
+  forceJwtEndpoint: JwtEndpointVersion,
+  delayId?: string,
+): Promise<LocalTransportWithSFUConfig> {
   logger.trace("Searching for a preferred transport");
 
+  async function doOpenIdAndJWTFromUrl(
+    url: string,
+  ): Promise<LocalTransportWithSFUConfig> {
+    const sfuConfig = await getSFUConfigWithOpenID(
+      client,
+      membership,
+      url,
+      roomId,
+      {
+        forceJwtEndpoint: forceJwtEndpoint,
+        delayEndpointBaseUrl: client.baseUrl,
+        delayId,
+      },
+      logger,
+    );
+    return {
+      transport: {
+        type: "livekit",
+        livekit_service_url: url,
+        // WARNING PLS READ ME!!!
+        // This looks unintuitive especially considering that `sfuConfig.livekitAlias` exists.
+        // Why do we not use: `livekit_alias: sfuConfig.livekitAlias`
+        //
+        //  - This is going to be used for sending our state event transport (focus_preferred)
+        //  - In sticky events it is expected to NOT send this field at all. The transport is only the `type`, `livekit_service_url`
+        //  - If we set it to the hased alias we get from the jwt, we will end up using the hashed alias as the body.roomId field
+        //    in v0.16.0. (It will use oldest member transport. It is using the transport.livekit_alias as the body.roomId)
+        //
+        // TLDR this is a temporal field that allow for comaptibilty but the spec expects it to not exists. (but its existance also does not break anything)
+        // It is just named poorly: It was intetended to be the actual alias. But now we do pseudonymys ids so we use a hashed alias.
+        livekit_alias: roomId,
+      },
+      sfuConfig,
+    };
+  }
   // We will call `getSFUConfigWithOpenID` once per transport here as it's our
   // only mechanism of valiation. This means we will also ask the
   // homeserver for a OpenID token a few times. Since OpenID tokens are single
@@ -153,39 +314,29 @@ async function makeTransport(
 
   // DEVTOOL: Highest priority: Load from devtool setting
   if (urlFromDevSettings !== null) {
-    logger.info("Using LiveKit transport from dev tools: ", urlFromDevSettings);
     // Validate that the SFU is up. Otherwise, we want to fail on this
     // as we don't permit other SFUs.
-    const config = await getSFUConfigWithOpenID(
-      client,
-      urlFromDevSettings,
-      roomId,
-    );
-    return {
-      type: "livekit",
-      livekit_service_url: urlFromDevSettings,
-      livekit_alias: config.livekitAlias,
-    };
+    // This will call the jwt/sfu/get endpoint to pre create the livekit room.
+    logger.info("Using LiveKit transport from dev tools: ", urlFromDevSettings);
+    return await doOpenIdAndJWTFromUrl(urlFromDevSettings);
   }
 
   async function getFirstUsableTransport(
     transports: Transport[],
-  ): Promise<LivekitTransport | null> {
+  ): Promise<LocalTransportWithSFUConfig | null> {
     for (const potentialTransport of transports) {
       if (isLivekitTransportConfig(potentialTransport)) {
         try {
-          const { livekitAlias } = await getSFUConfigWithOpenID(
-            client,
+          // This will call the jwt/sfu/get endpoint to pre create the livekit room.
+          return await doOpenIdAndJWTFromUrl(
             potentialTransport.livekit_service_url,
-            roomId,
           );
-          return {
-            ...potentialTransport,
-            livekit_alias: livekitAlias,
-          };
         } catch (ex) {
+          // Explictly throw these
           if (ex instanceof FailToGetOpenIdToken) {
-            // Explictly throw these
+            throw ex;
+          }
+          if (ex instanceof NoMatrix2AuthorizationService) {
             throw ex;
           }
           logger.debug(
@@ -201,17 +352,22 @@ async function makeTransport(
   // MSC4143: Attempt to fetch transports from backend.
   if ("_unstable_getRTCTransports" in client) {
     try {
-      const selectedTransport = await getFirstUsableTransport(
-        await client._unstable_getRTCTransports(),
-      );
+      const transportList = await client._unstable_getRTCTransports();
+      const selectedTransport = await getFirstUsableTransport(transportList);
       if (selectedTransport) {
-        logger.info("Using backend-configured SFU", selectedTransport);
+        logger.info(
+          "Using backend-configured (client.getRTCTransports) SFU",
+          selectedTransport,
+        );
         return selectedTransport;
       }
     } catch (ex) {
       if (ex instanceof MatrixError && ex.httpStatus === 404) {
         // Expected, this is an unstable endpoint and it's not required.
-        logger.debug("Backend does not provide any RTC transports", ex);
+        // There will be expected 404 errors in the console. When we check if synapse supports the endpoint.
+        logger.debug(
+          "Matrix homeserver does not provide any RTC transports via `/rtc/transports` (will retry with well-known.)",
+        );
       } else if (ex instanceof FailToGetOpenIdToken) {
         throw ex;
       } else {
@@ -245,18 +401,9 @@ async function makeTransport(
   const urlFromConf = Config.get().livekit?.livekit_service_url;
   if (urlFromConf) {
     try {
-      const { livekitAlias } = await getSFUConfigWithOpenID(
-        client,
-        urlFromConf,
-        roomId,
-      );
-      const selectedTransport: LivekitTransport = {
-        type: "livekit",
-        livekit_service_url: urlFromConf,
-        livekit_alias: livekitAlias,
-      };
-      logger.info("Using config SFU", selectedTransport);
-      return selectedTransport;
+      // This will call the jwt/sfu/get endpoint to pre create the livekit room.
+      logger.info("Using config SFU", urlFromConf);
+      return await doOpenIdAndJWTFromUrl(urlFromConf);
     } catch (ex) {
       if (ex instanceof FailToGetOpenIdToken) {
         throw ex;
@@ -265,5 +412,6 @@ async function makeTransport(
     }
   }
 
+  // If we do not have returned a transport by now we throw an error
   throw new MatrixRTCTransportMissingError(domain ?? "");
 }

src/state/CallViewModel/localMember/Publisher.test.ts

@@ -183,7 +183,6 @@ describe("Publisher", () => {
 
   beforeEach(() => {
     publisher = new Publisher(
-      scope,
       connection,
       mockMediaDevices({}),
       muteStates,
@@ -192,7 +191,9 @@ describe("Publisher", () => {
     );
   });
 
-  afterEach(() => {});
+  afterEach(async () => {
+    await publisher.destroy();
+  });
 
   it("Should not create tracks if started muted to avoid unneeded permission requests", async () => {
     const createTracksSpy = vi.spyOn(
@@ -207,6 +208,38 @@ describe("Publisher", () => {
     expect(createTracksSpy).not.toHaveBeenCalled();
   });
 
+  it("should unsetHandler and stop tracks on destroy", async () => {
+    // setup all spies
+    const unsetVideoSpy = vi.spyOn(
+      (
+        publisher as unknown as {
+          muteStates: { video: { unsetHandler: () => void } };
+        }
+      ).muteStates.video,
+      "unsetHandler",
+    );
+    const unsetAudioSpy = vi.spyOn(
+      (
+        publisher as unknown as {
+          muteStates: { audio: { unsetHandler: () => void } };
+        }
+      ).muteStates.audio,
+      "unsetHandler",
+    );
+    const scopeEndSpy = vi.spyOn(
+      (publisher as unknown as { scope: { end: () => void } }).scope,
+      "end",
+    );
+    const stopTracksSpy = vi.spyOn(publisher, "stopTracks");
+    // destroy publisher
+    await publisher.destroy();
+
+    expect(stopTracksSpy).toHaveBeenCalledOnce();
+    expect(unsetVideoSpy).toHaveBeenCalledOnce();
+    expect(unsetAudioSpy).toHaveBeenCalledOnce();
+    expect(scopeEndSpy).toHaveBeenCalled();
+  });
+
   it("Should minimize permission request by querying create at once", async () => {
     const enableCameraAndMicrophoneSpy = vi.spyOn(
       localParticipant,
@@ -267,7 +300,6 @@ describe("Publisher", () => {
     let publisher: Publisher;
     beforeEach(() => {
       publisher = new Publisher(
-        scope,
         connection,
         mockMediaDevices({}),
         muteStates,
@@ -275,6 +307,9 @@ describe("Publisher", () => {
         logger,
       );
     });
+    afterEach(async () => {
+      await publisher.destroy();
+    });
 
     test.each([
       { mutes: { audioEnabled: true, videoEnabled: false } },
@@ -320,7 +355,6 @@ describe("Bug fix", () => {
   it("wrongly publish tracks while muted", async () => {
     // setLogLevel(`debug`);
     const publisher = new Publisher(
-      scope,
       connection,
       mockMediaDevices({}),
       muteStates,
@@ -356,5 +390,6 @@ describe("Bug fix", () => {
       expect(track!.mute).toHaveBeenCalled();
       expect(track!.isMuted).toBe(true);
     }
+    await publisher.destroy();
   });
 });

src/state/CallViewModel/localMember/Publisher.ts

@@ -32,7 +32,7 @@ import {
 import { getUrlParams } from "../../../UrlParams.ts";
 import { observeTrackReference$ } from "../../MediaViewModel.ts";
 import { type Connection } from "../remoteMembers/Connection.ts";
-import { type ObservableScope } from "../../ObservableScope.ts";
+import { ObservableScope } from "../../ObservableScope.ts";
 
 /**
  * A wrapper for a Connection object.
@@ -47,9 +47,10 @@ export class Publisher {
    */
   public shouldPublish = false;
 
+  private readonly scope = new ObservableScope();
+
   /**
    * Creates a new Publisher.
-   * @param scope - The observable scope to use for managing the publisher.
    * @param connection - The connection to use for publishing.
    * @param devices - The media devices to use for audio and video input.
    * @param muteStates - The mute states for audio and video.
@@ -57,7 +58,6 @@ export class Publisher {
    * @param logger - The logger to use for logging :D.
    */
   public constructor(
-    private scope: ObservableScope,
     private connection: Pick<Connection, "livekitRoom" | "state$">, //setE2EEEnabled,
     devices: MediaDevices,
     private readonly muteStates: MuteStates,
@@ -65,7 +65,6 @@ export class Publisher {
     private logger: Logger,
   ) {
     const { controlledAudioDevices } = getUrlParams();
-
     const room = connection.livekitRoom;
 
     room.setE2EEEnabled(room.options.e2ee !== undefined)?.catch((e: Error) => {
@@ -73,17 +72,11 @@ export class Publisher {
     });
 
     // Setup track processor syncing (blur)
-    this.observeTrackProcessors(scope, room, trackerProcessorState$);
+    this.observeTrackProcessors(this.scope, room, trackerProcessorState$);
     // Observe media device changes and update LiveKit active devices accordingly
-    this.observeMediaDevices(scope, devices, controlledAudioDevices);
+    this.observeMediaDevices(this.scope, devices, controlledAudioDevices);
 
-    this.workaroundRestartAudioInputTrackChrome(devices, scope);
-    this.scope.onEnd(() => {
-      this.logger.info("Scope ended -> stop publishing all tracks");
-      void this.stopPublishing();
-      muteStates.audio.unsetHandler();
-      muteStates.video.unsetHandler();
-    });
+    this.workaroundRestartAudioInputTrackChrome(devices, this.scope);
 
     this.connection.livekitRoom.localParticipant.on(
       ParticipantEvent.LocalTrackPublished,
@@ -91,6 +84,21 @@ export class Publisher {
     );
   }
 
+  public async destroy(): Promise<void> {
+    this.scope.end();
+    this.logger.info("Scope ended -> unset handler");
+    this.muteStates.audio.unsetHandler();
+    this.muteStates.video.unsetHandler();
+
+    this.logger.info(`Start to stop tracks`);
+    try {
+      await this.stopTracks();
+      this.logger.info(`Done to stop tracks`);
+    } catch (e) {
+      this.logger.error(`Failed to stop tracks: ${e}`);
+    }
+  }
+
   // LiveKit will publish the tracks as soon as they are created
   // but we want to control when tracks are published.
   // We cannot just mute the tracks, even if this will effectively stop the publishing,

src/state/CallViewModel/remoteMembers/Connection.test.ts

@@ -26,8 +26,8 @@ import fetchMock from "fetch-mock";
 import EventEmitter from "events";
 import { type IOpenIDToken } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc/LivekitTransport";
 
-import type { LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
   Connection,
   ConnectionState,
@@ -40,7 +40,7 @@ import {
   FailToGetOpenIdToken,
 } from "../../../utils/errors.ts";
 import { testJWTToken } from "../../../utils/test-fixtures.ts";
-import { mockRemoteParticipant } from "../../../utils/test.ts";
+import { mockRemoteParticipant, ownMemberMock } from "../../../utils/test.ts";
 
 let testScope: ObservableScope;
 
@@ -114,6 +114,7 @@ function setupRemoteConnection(): Connection {
     client: client,
     transport: livekitFocus,
     scope: testScope,
+    ownMembershipIdentity: ownMemberMock,
     livekitRoomFactory: () => fakeLivekitRoom,
   };
 
@@ -155,6 +156,7 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
+      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
     const connection = new Connection(opts, logger);
@@ -170,6 +172,7 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
+      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 
@@ -220,6 +223,7 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
+      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 
@@ -259,7 +263,7 @@ describe("Start connection states", () => {
       capturedState.cause instanceof Error
     ) {
       expect(capturedState.cause.message).toContain(
-        "SFU Config fetch failed with exception",
+        "SFU Config fetch failed with status code 500",
       );
       expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,
@@ -277,6 +281,7 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
+      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -18,6 +18,7 @@ import {
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import {
   getSFUConfigWithOpenID,
@@ -32,8 +33,21 @@ import {
   SFURoomCreationRestrictedError,
   UnknownCallError,
 } from "../../../utils/errors.ts";
+import { type JwtEndpointVersion } from "../localMember/LocalTransport.ts";
 
 export interface ConnectionOpts {
+  /**
+   * For the local transport we already do know the jwt token and url. We can reuse it.
+   * On top the local transport will send additional data to the jwt server to use delayed event delegation.
+   */
+  existingSFUConfig?: SFUConfig;
+  /**
+   * For local connections that use the oldest member pattern. here we have not prefetched the sfuConfig
+   * and hence we need to let the connection do the jwt token fetching.
+   */
+  forceJwtEndpoint?: JwtEndpointVersion;
+  /** The identity parts to use on this connection */
+  ownMembershipIdentity: CallMembershipIdentityParts;
   /** The media transport to connect to. */
   transport: LivekitTransport;
   /** The Matrix client to use for OpenID and SFU config requests. */
@@ -103,6 +117,14 @@ export class Connection {
    */
   public readonly remoteParticipants$: Behavior<RemoteParticipant[]>;
 
+  /**
+   * The alias of the LiveKit room.
+   */
+  public get livekitAlias(): string | undefined {
+    return this._livekitAlias;
+  }
+  private _livekitAlias?: string;
+
   /**
    * Whether the connection has been stopped.
    * @see Connection.stop
@@ -129,8 +151,21 @@ export class Connection {
     try {
       this._state$.next(ConnectionState.FetchingConfig);
       // We should already have this information after creating the localTransport.
-      // It would probably be better to forward this here.
-      const { url, jwt } = await this.getSFUConfigWithOpenID();
+      // only call getSFUConfigWithOpenID for connections where we do not have a token yet. (existingJwtTokenData === undefined)
+      const { url, jwt, livekitAlias } =
+        this.existingSFUConfig ??
+        (await this.getSFUConfigForRemoteConnection());
+      this.logger.debug(
+        "Starting Connection to: ",
+        this.transport.livekit_service_url,
+        "jwt: ",
+        jwt,
+        "wss: ",
+        url,
+        "livekitAlias: ",
+        livekitAlias,
+      );
+      this._livekitAlias = livekitAlias;
       // If we were stopped while fetching the config, don't proceed to connect
       if (this.stopped) return;
 
@@ -146,8 +181,11 @@ export class Connection {
         });
 
       try {
+        this.logger.info(`livekitRoom.connect ${url}`);
         await this.livekitRoom.connect(url, jwt);
+        this.logger.info(`livekitRoom.connect SUCCESS ${url}`);
       } catch (e) {
+        this.logger.info(`livekitRoom.connect FAILED ${url}`, e);
         // LiveKit uses 503 to indicate that the server has hit its track limits.
         // https://github.com/livekit/livekit/blob/fcb05e97c5a31812ecf0ca6f7efa57c485cea9fb/pkg/service/rtcservice.go#L171
         // It also errors with a status code of 200 (yes, really) for room
@@ -186,11 +224,17 @@ export class Connection {
     }
   }
 
-  protected async getSFUConfigWithOpenID(): Promise<SFUConfig> {
+  protected async getSFUConfigForRemoteConnection(): Promise<SFUConfig> {
+    // This will only be called for sfu's where we do not publish ourselves.
+    // For the local connection we will use the existingJwtTokenData
     return await getSFUConfigWithOpenID(
       this.client,
+      this.ownMembershipIdentity,
       this.transport.livekit_service_url,
       this.transport.livekit_alias,
+      // dont pass any custom opts for the subscribe only connections
+      {},
+      this.logger,
     );
   }
 
@@ -202,17 +246,21 @@ export class Connection {
    */
   public async stop(): Promise<void> {
     this.logger.debug(
-      `Stopping connection to ${this.transport.livekit_service_url}`,
+      `stop: disconnecing from lk room ${this.transport.livekit_service_url}`,
     );
     if (this.stopped) return;
     await this.livekitRoom.disconnect();
     this._state$.next(ConnectionState.Stopped);
     this.stopped = true;
+    this.logger.debug(
+      `stop: DONE disconnecing from lk room ${this.transport.livekit_service_url}`,
+    );
   }
 
   private readonly client: OpenIDClientParts;
   private readonly logger: Logger;
-
+  private readonly ownMembershipIdentity: CallMembershipIdentityParts;
+  private readonly existingSFUConfig?: SFUConfig;
   /**
    * Creates a new connection to a matrix RTC LiveKit backend.
    *
@@ -221,9 +269,13 @@ export class Connection {
    * @param logger - The logger to use.
    */
   public constructor(opts: ConnectionOpts, logger: Logger) {
-    this.logger = logger.getChild("[Connection]");
+    this.ownMembershipIdentity = opts.ownMembershipIdentity;
+    this.existingSFUConfig = opts.existingSFUConfig;
+    this.logger = logger.getChild(
+      "[Connection " + opts.transport.livekit_service_url + "]",
+    );
     this.logger.info(
-      `Creating new connection to ${opts.transport.livekit_service_url} ${opts.transport.livekit_alias}`,
+      `constructor: ${opts.transport.livekit_service_url} alias: ${opts.transport.livekit_alias} withSfuConfig?: ${opts.existingSFUConfig ? JSON.stringify(opts.existingSFUConfig) : "undefined"}`,
     );
     const { transport, client, scope } = opts;
 

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -5,7 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
   Room as LivekitRoom,
   type RoomOptions,
@@ -16,10 +15,15 @@ import {
 import { type Logger } from "matrix-js-sdk/lib/logger";
 // imported as inline to support worker when loaded from a cdn (cross domain)
 import E2EEWorker from "livekit-client/e2ee-worker?worker&inline";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc/LivekitTransport";
 
 import { type ObservableScope } from "../../ObservableScope.ts";
 import { Connection } from "./Connection.ts";
-import type { OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
+import type {
+  OpenIDClientParts,
+  SFUConfig,
+} from "../../../livekit/openIDSFU.ts";
 import type { MediaDevices } from "../../MediaDevices.ts";
 import type { Behavior } from "../../Behavior.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
@@ -28,9 +32,11 @@ import { defaultLiveKitOptions } from "../../../livekit/options.ts";
 // TODO evaluate if this should be done like the Publisher Factory
 export interface ConnectionFactory {
   createConnection(
-    transport: LivekitTransport,
     scope: ObservableScope,
+    transport: LivekitTransport,
+    ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
+    sfuConfig?: SFUConfig,
   ): Connection;
 }
 
@@ -78,17 +84,30 @@ export class ECConnectionFactory implements ConnectionFactory {
     this.livekitRoomFactory = livekitRoomFactory ?? defaultFactory;
   }
 
+  /**
+   *
+   * @param scope The observable scope (used for clean-up)
+   * @param transport The transport to use for this connection.
+   * @param ownMembershipIdentity required to connect (using the jwt service) with the SFU.
+   * @param logger The logger instance to use for this connection.
+   * @param sfuConfig optional config in case we already have a token for this connection.
+   * @returns
+   */
   public createConnection(
-    transport: LivekitTransport,
     scope: ObservableScope,
+    transport: LivekitTransport,
+    ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
+    sfuConfig?: SFUConfig,
   ): Connection {
     return new Connection(
       {
+        existingSFUConfig: sfuConfig,
         transport,
         client: this.client,
         scope: scope,
         livekitRoomFactory: this.livekitRoomFactory,
+        ownMembershipIdentity,
       },
       logger,
     );

src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts

@@ -18,9 +18,9 @@ import {
 } from "./ConnectionManager.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
-import { withTestScheduler } from "../../../utils/test.ts";
+import { ownMemberMock, withTestScheduler } from "../../../utils/test.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { type Behavior } from "../../Behavior.ts";
+import { constant, type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
@@ -49,7 +49,7 @@ beforeEach(() => {
   vi.mocked(fakeConnectionFactory).createConnection = vi
     .fn()
     .mockImplementation(
-      (transport: LivekitTransport, scope: ObservableScope) => {
+      (scope: ObservableScope, transport: LivekitTransport) => {
         const mockConnection = {
           transport,
           remoteParticipants$: new BehaviorSubject([]),
@@ -76,10 +76,12 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        inputTransports$: behavior("a", {
+        localTransport$: constant(null),
+        remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
         logger: logger,
+        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -115,7 +117,8 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        inputTransports$: behavior("abcdef", {
+        localTransport$: constant(null),
+        remoteTransports$: behavior("abcdef", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1], 1),
           c: new Epoch([TRANSPORT_1], 2),
@@ -124,6 +127,7 @@ describe("connections$ stream", () => {
           f: new Epoch([TRANSPORT_1, TRANSPORT_2], 5),
         }),
         logger: logger,
+        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -160,12 +164,14 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        inputTransports$: behavior("abc", {
+        localTransport$: constant(null),
+        remoteTransports$: behavior("abc", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1, TRANSPORT_2], 1),
           c: new Epoch([TRANSPORT_1], 2),
         }),
         logger: logger,
+        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -223,7 +229,7 @@ describe("connectionManagerData$ stream", () => {
     vi.mocked(fakeConnectionFactory).createConnection = vi
       .fn()
       .mockImplementation(
-        (transport: LivekitTransport, scope: ObservableScope) => {
+        (scope: ObservableScope, transport: LivekitTransport) => {
           const fakeRemoteParticipants$ = new BehaviorSubject<
             RemoteParticipant[]
           >([]);
@@ -275,10 +281,12 @@ describe("connectionManagerData$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        inputTransports$: behavior("a", {
+        localTransport$: constant(null),
+        remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
         logger,
+        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(connectionManagerData$).toBe("abcd", {

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -7,9 +7,10 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { combineLatest, map, of, switchMap, tap } from "rxjs";
+import { combineLatest, map, of, switchMap } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type RemoteParticipant } from "livekit-client";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type Connection } from "./Connection.ts";
@@ -17,6 +18,11 @@ import { Epoch, type ObservableScope } from "../../ObservableScope.ts";
 import { generateItemsWithEpoch } from "../../../utils/observable.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
+import {
+  isLocalTransportWithSFUConfig,
+  type LocalTransportWithSFUConfig,
+} from "../localMember/LocalTransport.ts";
+import { type SFUConfig } from "../../../livekit/openIDSFU.ts";
 
 export class ConnectionManagerData {
   private readonly store: Map<
@@ -65,8 +71,11 @@ export class ConnectionManagerData {
 interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
-  inputTransports$: Behavior<Epoch<LivekitTransport[]>>;
+  localTransport$: Behavior<LocalTransportWithSFUConfig | null>;
+  remoteTransports$: Behavior<Epoch<LivekitTransport[]>>;
+
   logger: Logger;
+  ownMembershipIdentity: CallMembershipIdentityParts;
 }
 
 // TODO - write test for scopes (do we really need to bind scope)
@@ -79,8 +88,12 @@ export interface IConnectionManager {
  * @param props - Configuration object
  * @param props.scope - The observable scope used by this object
  * @param props.connectionFactory - Used to create new connections
- * @param props.inputTransports$ - A list of Behaviors each containing a LIST of LivekitTransport.
- * @param props.logger - The logger to use
+ * @param props.localTransport$ - The local transport to use. (deduplicated with remoteTransports$)
+ * @param props.remoteTransports$ - All other transports. The connection manager will create connections for each transport. (deduplicated with localTransport$)
+ * @param props.ownMembershipIdentity - The own membership identity to use.
+ * @param props.logger - The logger to use.
+
+ *
  *   Each of these behaviors can be interpreted as subscribed list of transports.
  *
  *   Using `registerTransports` independent external modules can control what connections
@@ -93,8 +106,10 @@ export interface IConnectionManager {
 export function createConnectionManager$({
   scope,
   connectionFactory,
-  inputTransports$,
+  localTransport$,
+  remoteTransports$,
   logger: parentLogger,
+  ownMembershipIdentity,
 }: Props): IConnectionManager {
   const logger = parentLogger.getChild("[ConnectionManager]");
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
@@ -107,12 +122,33 @@ export function createConnectionManager$({
    * It is build based on the list of subscribed transports (`transportsSubscriptions$`).
    * externally this is modified via `registerTransports()`.
    */
-  const transports$ = scope.behavior(
-    inputTransports$.pipe(
-      map((transports) => transports.mapInner(removeDuplicateTransports)),
-      tap(({ value: transports }) => {
-        logger.trace(
-          `Managing transports: ${transports.map((t) => t.livekit_service_url).join(", ")}`,
+  const localAndRemoteTransports$: Behavior<
+    Epoch<(LivekitTransport | LocalTransportWithSFUConfig)[]>
+  > = scope.behavior(
+    combineLatest([remoteTransports$, localTransport$]).pipe(
+      // Combine local and remote transports into one transport array
+      // and set the forceOldJwtEndpoint property on the local transport
+      map(([remoteTransports, localTransport]) => {
+        let localTransportAsArray: LocalTransportWithSFUConfig[] = [];
+        if (localTransport) {
+          localTransportAsArray = [localTransport];
+        }
+        const dedupedRemote = removeDuplicateTransports(remoteTransports.value);
+        const remoteWithoutLocal = dedupedRemote.filter(
+          (transport) =>
+            !localTransportAsArray.find((l) =>
+              areLivekitTransportsEqual(l.transport, transport),
+            ),
+        );
+        logger.debug(
+          "remoteWithoutLocal",
+          remoteWithoutLocal,
+          "localTransportAsArray",
+          localTransportAsArray,
+        );
+        return new Epoch(
+          [...localTransportAsArray, ...remoteWithoutLocal],
+          remoteTransports.epoch,
         );
       }),
     ),
@@ -122,25 +158,47 @@ export function createConnectionManager$({
    * Connections for each transport in use by one or more session members.
    */
   const connections$ = scope.behavior(
-    transports$.pipe(
+    localAndRemoteTransports$.pipe(
       generateItemsWithEpoch(
         function* (transports) {
-          for (const transport of transports)
-            yield {
-              keys: [transport.livekit_service_url, transport.livekit_alias],
-              data: undefined,
-            };
+          for (const transportWithOrWithoutSfuConfig of transports) {
+            if (
+              isLocalTransportWithSFUConfig(transportWithOrWithoutSfuConfig)
+            ) {
+              // This is the local transport only the `LocalTransportWithSFUConfig` has a `sfuConfig` field
+              const { transport, sfuConfig } = transportWithOrWithoutSfuConfig;
+              yield {
+                keys: [
+                  transport.livekit_service_url,
+                  transport.livekit_alias,
+                  sfuConfig,
+                ],
+                data: undefined,
+              };
+            } else {
+              const transport = transportWithOrWithoutSfuConfig;
+              yield {
+                keys: [
+                  transport.livekit_service_url,
+                  transport.livekit_alias,
+                  undefined as undefined | SFUConfig,
+                ],
+                data: undefined,
+              };
+            }
+          }
         },
-        (scope, _data$, serviceUrl, alias) => {
-          logger.debug(`Creating connection to ${serviceUrl} (${alias})`);
+        (scope, _data$, serviceUrl, alias, sfuConfig) => {
           const connection = connectionFactory.createConnection(
+            scope,
             {
               type: "livekit",
               livekit_service_url: serviceUrl,
               livekit_alias: alias,
             },
-            scope,
+            ownMembershipIdentity,
             logger,
+            sfuConfig,
           );
           // Start the connection immediately
           // Use connection state to track connection progress
@@ -190,18 +248,18 @@ export function createConnectionManager$({
         );
       }),
     ),
-    new Epoch(new ConnectionManagerData()),
+    new Epoch(new ConnectionManagerData(), -1),
   );
 
   return { connectionManagerData$ };
 }
 
-function removeDuplicateTransports(
-  transports: LivekitTransport[],
-): LivekitTransport[] {
+function removeDuplicateTransports<T extends LivekitTransport>(
+  transports: T[],
+): T[] {
   return transports.reduce((acc, transport) => {
     if (!acc.some((t) => areLivekitTransportsEqual(t, transport)))
       acc.push(transport);
     return acc;
-  }, [] as LivekitTransport[]);
+  }, [] as T[]);
 }

src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts

@@ -15,7 +15,11 @@ import EventEmitter from "events";
 import { ObservableScope } from "../../ObservableScope.ts";
 import { ECConnectionFactory } from "./ConnectionFactory.ts";
 import type { OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
-import { exampleTransport, mockMediaDevices } from "../../../utils/test.ts";
+import {
+  exampleTransport,
+  mockMediaDevices,
+  ownMemberMock,
+} from "../../../utils/test.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
 import { constant } from "../../Behavior";
 
@@ -72,7 +76,12 @@ describe("ECConnectionFactory - Audio inputs options", () => {
         echo,
         noise,
       );
-      ecConnectionFactory.createConnection(exampleTransport, testScope, logger);
+      ecConnectionFactory.createConnection(
+        testScope,
+        exampleTransport,
+        ownMemberMock,
+        logger,
+      );
 
       // Check if Room was constructed with expected options
       expect(RoomConstructor).toHaveBeenCalledWith(
@@ -113,7 +122,12 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
         false,
         false,
       );
-      ecConnectionFactory.createConnection(exampleTransport, testScope, logger);
+      ecConnectionFactory.createConnection(
+        testScope,
+        exampleTransport,
+        ownMemberMock,
+        logger,
+      );
 
       // Check if Room was constructed with expected options
       expect(RoomConstructor).toHaveBeenCalledWith(

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts

@@ -10,8 +10,7 @@ import {
   type CallMembership,
   type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { getParticipantId } from "matrix-js-sdk/lib/matrixrtc/utils";
-import { combineLatest, map, type Observable } from "rxjs";
+import { BehaviorSubject, combineLatest, map, type Observable } from "rxjs";
 
 import { type IConnectionManager } from "./ConnectionManager.ts";
 import {
@@ -26,14 +25,18 @@ import {
 } from "../../ObservableScope.ts";
 import { ConnectionManagerData } from "./ConnectionManager.ts";
 import {
-  mockCallMembership,
+  flushPromises,
+  mockRtcMembership,
   mockRemoteParticipant,
-  withTestScheduler,
 } from "../../../utils/test.ts";
 import { type Connection } from "./Connection.ts";
+import { constant } from "../../Behavior.ts";
 
 let testScope: ObservableScope;
 
+const fallbackMemberId = (userId: string, deviceId: string): string =>
+  `${userId}:${deviceId}`;
+
 const transportA: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
@@ -46,16 +49,12 @@ const transportB: LivekitTransport = {
   livekit_alias: "!alias:sample.com",
 };
 
-const bobMembership = mockCallMembership(
-  "@bob:example.org",
-  "DEV000",
-  transportA,
-);
-const carlMembership = mockCallMembership(
-  "@carl:sample.com",
-  "DEV111",
-  transportB,
-);
+const bobMembership = mockRtcMembership("@bob:example.org", "DEV000", {
+  fociPreferred: [transportA],
+});
+const carlMembership = mockRtcMembership("@carl:sample.com", "DEV111", {
+  fociPreferred: [transportB],
+});
 
 beforeEach(() => {
   testScope = new ObservableScope();
@@ -76,52 +75,41 @@ function epochMeWith$<T, U>(
   );
 }
 
-test("should signal participant not yet connected to livekit", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
-    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-      behavior("a", {
-        a: [bobMembership],
-      }),
-    );
+test("should signal participant not yet connected to livekit", async () => {
+  const mockedMemberships$ = new BehaviorSubject([bobMembership]);
+  const mockConnectionManagerData$ = new BehaviorSubject(
+    new ConnectionManagerData(),
+  );
+  const { memberships$, membershipsWithTransport$ } =
+    createEpochedMemberships$(mockedMemberships$);
 
-    const connectionManagerData$ = epochMeWith$(
-      memberships$,
-      behavior("a", {
-        a: new ConnectionManagerData(),
-      }),
-    );
+  const connectionManagerData$ = epochMeWith$(
+    memberships$,
+    mockConnectionManagerData$,
+  );
 
-    const matrixLivekitMembers$ = createMatrixLivekitMembers$({
-      scope: testScope,
-      membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
-      connectionManager: {
-        connectionManagerData$: connectionManagerData$,
-      } as unknown as IConnectionManager,
-    });
-
-    expectObservable(matrixLivekitMembers$.pipe(map((e) => e.value))).toBe(
-      "a",
-      {
-        a: expect.toSatisfy((data: RemoteMatrixLivekitMember[]) => {
-          expect(data.length).toEqual(1);
-          expectObservable(data[0].membership$).toBe("a", {
-            a: bobMembership,
-          });
-          expectObservable(data[0].participant.value$).toBe("a", {
-            a: null,
-          });
-          expectObservable(data[0].connection$).toBe("a", {
-            a: null,
-          });
-          return true;
-        }),
-      },
-    );
+  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+    scope: testScope,
+    membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
+    connectionManager: {
+      connectionManagerData$: connectionManagerData$,
+    } as unknown as IConnectionManager,
   });
+
+  await flushPromises();
+  expect(matrixLivekitMember$.value.value).toSatisfy(
+    (data: RemoteMatrixLivekitMember[]) => {
+      expect(data.length).toEqual(1);
+      expect(data[0].membership$.value).toBe(bobMembership);
+      expect(data[0].participant.value$.value).toBe(null);
+      expect(data[0].connection$.value).toBe(null);
+      return true;
+    },
+  );
 });
 
 // Helper to create epoch'ed memberships$ and membershipsWithTransport$ from memberships observable.
-function fromMemberships$(m$: Observable<CallMembership[]>): {
+function createEpochedMemberships$(m$: Observable<CallMembership[]>): {
   memberships$: Observable<Epoch<CallMembership[]>>;
   membershipsWithTransport$: Observable<
     Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
@@ -146,32 +134,115 @@ function fromMemberships$(m$: Observable<CallMembership[]>): {
   };
 }
 
-test("should signal participant on a connection that is publishing", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
-    const bobParticipantId = getParticipantId(
+test("should signal participant on a connection that is publishing", async () => {
+  const bobParticipantId = fallbackMemberId(
+    bobMembership.userId,
+    bobMembership.deviceId,
+  );
+
+  const { memberships$, membershipsWithTransport$ } = createEpochedMemberships$(
+    constant([bobMembership]),
+  );
+
+  const connection = {
+    transport: bobMembership.getTransport(bobMembership),
+  } as unknown as Connection;
+  const dataWithPublisher = new ConnectionManagerData();
+  dataWithPublisher.add(connection, [
+    mockRemoteParticipant({ identity: bobParticipantId }),
+  ]);
+
+  const connectionManagerData$ = epochMeWith$(
+    memberships$,
+    constant(dataWithPublisher),
+  );
+
+  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+    scope: testScope,
+    membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
+    connectionManager: {
+      connectionManagerData$: connectionManagerData$,
+    } as unknown as IConnectionManager,
+  });
+
+  await flushPromises();
+  expect(matrixLivekitMember$.value.value).toSatisfy(
+    (data: RemoteMatrixLivekitMember[]) => {
+      expect(data.length).toEqual(1);
+      expect(data[0].membership$.value).toBe(bobMembership);
+      expect(data[0].participant.value$.value).toSatisfy((participant) => {
+        expect(participant).toBeDefined();
+        expect(participant!.identity).toEqual(bobParticipantId);
+        return true;
+      });
+      expect(data[0].connection$.value).toBe(connection);
+      return true;
+    },
+  );
+});
+
+test("should signal participant on a connection that is not publishing", async () => {
+  const { memberships$, membershipsWithTransport$ } = createEpochedMemberships$(
+    constant([bobMembership]),
+  );
+
+  const connection = {
+    transport: bobMembership.getTransport(bobMembership),
+  } as unknown as Connection;
+  const dataWithPublisher = new ConnectionManagerData();
+  dataWithPublisher.add(connection, []);
+
+  const connectionManagerData$ = epochMeWith$(
+    memberships$,
+    constant(dataWithPublisher),
+  );
+
+  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+    scope: testScope,
+    membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
+    connectionManager: {
+      connectionManagerData$: connectionManagerData$,
+    } as unknown as IConnectionManager,
+  });
+  await flushPromises();
+  expect(matrixLivekitMember$.value.value).toSatisfy(
+    (data: RemoteMatrixLivekitMember[]) => {
+      expect(data.length).toEqual(1);
+      expect(data[0].membership$.value).toBe(bobMembership);
+      expect(data[0].participant.value$.value).toBe(null);
+      expect(data[0].connection$.value).toBe(connection);
+      return true;
+    },
+  );
+});
+
+describe("Publication edge case", () => {
+  test("bob is publishing in several connections", async () => {
+    const { memberships$, membershipsWithTransport$ } =
+      createEpochedMemberships$(constant([bobMembership, carlMembership]));
+
+    const connectionWithPublisher = new ConnectionManagerData();
+    const bobParticipantId = fallbackMemberId(
       bobMembership.userId,
       bobMembership.deviceId,
     );
-
-    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-      behavior("a", {
-        a: [bobMembership],
-      }),
-    );
-
-    const connection = {
-      transport: bobMembership.getTransport(bobMembership),
+    const connectionA = {
+      transport: transportA,
     } as unknown as Connection;
-    const dataWithPublisher = new ConnectionManagerData();
-    dataWithPublisher.add(connection, [
+    const connectionB = {
+      transport: transportB,
+    } as unknown as Connection;
+
+    connectionWithPublisher.add(connectionA, [
+      mockRemoteParticipant({ identity: bobParticipantId }),
+    ]);
+    connectionWithPublisher.add(connectionB, [
       mockRemoteParticipant({ identity: bobParticipantId }),
     ]);
 
     const connectionManagerData$ = epochMeWith$(
       memberships$,
-      behavior("a", {
-        a: dataWithPublisher,
-      }),
+      constant(connectionWithPublisher),
     );
 
     const matrixLivekitMembers$ = createMatrixLivekitMembers$({
@@ -181,213 +252,73 @@ test("should signal participant on a connection that is publishing", () => {
         connectionManagerData$: connectionManagerData$,
       } as unknown as IConnectionManager,
     });
-
-    expectObservable(matrixLivekitMembers$.pipe(map((e) => e.value))).toBe(
-      "a",
-      {
-        a: expect.toSatisfy((data: RemoteMatrixLivekitMember[]) => {
-          expect(data.length).toEqual(1);
-          expectObservable(data[0].membership$).toBe("a", {
-            a: bobMembership,
-          });
-          expectObservable(data[0].participant.value$).toBe("a", {
-            a: expect.toSatisfy((participant) => {
-              expect(participant).toBeDefined();
-              expect(participant!.identity).toEqual(bobParticipantId);
-              return true;
-            }),
-          });
-          expectObservable(data[0].connection$).toBe("a", {
-            a: connection,
-          });
+    await flushPromises();
+    expect(matrixLivekitMembers$.value.value).toSatisfy(
+      (data: RemoteMatrixLivekitMember[]) => {
+        expect(data.length).toEqual(2);
+        expect(data[0].membership$.value).toBe(bobMembership);
+        expect(data[0].connection$.value).toBe(connectionA);
+        expect(data[0].participant.value$.value).toSatisfy((participant) => {
+          expect(participant).toBeDefined();
+          expect(participant!.identity).toEqual(bobParticipantId);
           return true;
-        }),
+        });
+
+        return true;
       },
     );
   });
 });
 
-test("should signal participant on a connection that is not publishing", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
-    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-      behavior("a", {
-        a: [bobMembership],
-      }),
-    );
+test("bob is publishing in the wrong connection", async () => {
+  const mockedMemberships$ = new BehaviorSubject([
+    bobMembership,
+    carlMembership,
+  ]);
 
-    const connection = {
-      transport: bobMembership.getTransport(bobMembership),
-    } as unknown as Connection;
-    const dataWithPublisher = new ConnectionManagerData();
-    dataWithPublisher.add(connection, []);
+  const { memberships$, membershipsWithTransport$ } =
+    createEpochedMemberships$(mockedMemberships$);
 
-    const connectionManagerData$ = epochMeWith$(
-      memberships$,
-      behavior("a", {
-        a: dataWithPublisher,
-      }),
-    );
+  const connectionWithPublisher = new ConnectionManagerData();
 
-    const matrixLivekitMembers$ = createMatrixLivekitMembers$({
-      scope: testScope,
-      membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
-      connectionManager: {
-        connectionManagerData$: connectionManagerData$,
-      } as unknown as IConnectionManager,
-    });
+  const bobParticipantId = fallbackMemberId(
+    bobMembership.userId,
+    bobMembership.deviceId,
+  );
+  const connectionA = { transport: transportA } as unknown as Connection;
+  const connectionB = { transport: transportB } as unknown as Connection;
 
-    expectObservable(matrixLivekitMembers$.pipe(map((e) => e.value))).toBe(
-      "a",
-      {
-        a: expect.toSatisfy((data: RemoteMatrixLivekitMember[]) => {
-          expect(data.length).toEqual(1);
-          expectObservable(data[0].membership$).toBe("a", {
-            a: bobMembership,
-          });
-          expectObservable(data[0].participant.value$).toBe("a", {
-            a: null,
-          });
-          expectObservable(data[0].connection$).toBe("a", {
-            a: connection,
-          });
-          return true;
-        }),
-      },
-    );
-  });
-});
-
-describe("Publication edge case", () => {
-  test("bob is publishing in several connections", () => {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-        behavior("a", {
-          a: [bobMembership, carlMembership],
-        }),
-      );
-
-      const connectionWithPublisher = new ConnectionManagerData();
-      const bobParticipantId = getParticipantId(
-        bobMembership.userId,
-        bobMembership.deviceId,
-      );
-      const connectionA = {
-        transport: transportA,
-      } as unknown as Connection;
-      const connectionB = {
-        transport: transportB,
-      } as unknown as Connection;
-
-      connectionWithPublisher.add(connectionA, [
-        mockRemoteParticipant({ identity: bobParticipantId }),
-      ]);
-      connectionWithPublisher.add(connectionB, [
-        mockRemoteParticipant({ identity: bobParticipantId }),
-      ]);
-
-      const connectionManagerData$ = epochMeWith$(
-        memberships$,
-        behavior("a", {
-          a: connectionWithPublisher,
-        }),
-      );
-
-      const matrixLivekitMembers$ = createMatrixLivekitMembers$({
-        scope: testScope,
-        membershipsWithTransport$: testScope.behavior(
-          membershipsWithTransport$,
-        ),
-        connectionManager: {
-          connectionManagerData$: connectionManagerData$,
-        } as unknown as IConnectionManager,
-      });
-
-      expectObservable(matrixLivekitMembers$.pipe(map((e) => e.value))).toBe(
-        "a",
-        {
-          a: expect.toSatisfy((data: RemoteMatrixLivekitMember[]) => {
-            expect(data.length).toEqual(2);
-            expectObservable(data[0].membership$).toBe("a", {
-              a: bobMembership,
-            });
-            expectObservable(data[0].connection$).toBe("a", {
-              // The real connection should be from transportA as per the membership
-              a: connectionA,
-            });
-            expectObservable(data[0].participant.value$).toBe("a", {
-              a: expect.toSatisfy((participant) => {
-                expect(participant).toBeDefined();
-                expect(participant!.identity).toEqual(bobParticipantId);
-                return true;
-              }),
-            });
-            return true;
-          }),
-        },
-      );
-    });
-  });
-
-  test("bob is publishing in the wrong connection", () => {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-        behavior("a", {
-          a: [bobMembership, carlMembership],
-        }),
-      );
-
-      const connectionWithPublisher = new ConnectionManagerData();
-      const bobParticipantId = getParticipantId(
-        bobMembership.userId,
-        bobMembership.deviceId,
-      );
-      const connectionA = { transport: transportA } as unknown as Connection;
-      const connectionB = { transport: transportB } as unknown as Connection;
-
-      // Bob is not publishing on A
-      connectionWithPublisher.add(connectionA, []);
-      // Bob is publishing on B but his membership says A
-      connectionWithPublisher.add(connectionB, [
-        mockRemoteParticipant({ identity: bobParticipantId }),
-      ]);
-
-      const connectionManagerData$ = epochMeWith$(
-        memberships$,
-        behavior("a", {
-          a: connectionWithPublisher,
-        }),
-      );
-
-      const matrixLivekitMembers$ = createMatrixLivekitMembers$({
-        scope: testScope,
-        membershipsWithTransport$: testScope.behavior(
-          membershipsWithTransport$,
-        ),
-        connectionManager: {
-          connectionManagerData$: connectionManagerData$,
-        } as unknown as IConnectionManager,
-      });
-
-      expectObservable(matrixLivekitMembers$.pipe(map((e) => e.value))).toBe(
-        "a",
-        {
-          a: expect.toSatisfy((data: RemoteMatrixLivekitMember[]) => {
-            expect(data.length).toEqual(2);
-            expectObservable(data[0].membership$).toBe("a", {
-              a: bobMembership,
-            });
-            expectObservable(data[0].connection$).toBe("a", {
-              // The real connection should be from transportA as per the membership
-              a: connectionA,
-            });
-            expectObservable(data[0].participant.value$).toBe("a", {
-              // No participant as Bob is not publishing on his membership transport
-              a: null,
-            });
-            return true;
-          }),
-        },
-      );
-    });
+  // Bob is not publishing on A
+  connectionWithPublisher.add(connectionA, []);
+  // Bob is publishing on B but his membership says A
+  connectionWithPublisher.add(connectionB, [
+    mockRemoteParticipant({ identity: bobParticipantId }),
+  ]);
+
+  const connectionsWithPublisher$ = new BehaviorSubject(
+    connectionWithPublisher,
+  );
+  const connectionManagerData$ = epochMeWith$(
+    memberships$,
+    connectionsWithPublisher$,
+  );
+
+  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+    scope: testScope,
+    membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
+    connectionManager: {
+      connectionManagerData$: connectionManagerData$,
+    } as unknown as IConnectionManager,
   });
+
+  await flushPromises();
+  expect(matrixLivekitMember$.value.value).toSatisfy(
+    (data: RemoteMatrixLivekitMember[]) => {
+      expect(data.length).toEqual(2);
+      expect(data[0].membership$.value).toBe(bobMembership);
+      expect(data[0].connection$.value).toBe(connectionA);
+      expect(data[0].participant.value$.value).toBe(null);
+      return true;
+    },
+  );
 });

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -33,7 +33,7 @@ export type TaggedParticipant =
   | LocalTaggedParticipant
   | RemoteTaggedParticipant;
 
-interface MatrixLivekitMember {
+export interface MatrixLivekitMember {
   membership$: Behavior<CallMembership>;
   connection$: Behavior<Connection | null>;
   // participantId: string; We do not want a participantId here since it will be generated by the jwt
@@ -84,7 +84,6 @@ export function createMatrixLivekitMembers$({
   /**
    * Stream of all the call members and their associated livekit data (if available).
    */
-
   return scope.behavior(
     combineLatest([
       membershipsWithTransport$,
@@ -93,47 +92,47 @@ export function createMatrixLivekitMembers$({
       filter((values) =>
         values.every((value) => value.epoch === values[0].epoch),
       ),
-      map(
-        ([
-          { value: membershipsWithTransports, epoch },
-          { value: managerData },
-        ]) =>
-          new Epoch([membershipsWithTransports, managerData] as const, epoch),
-      ),
+      map(([ms, data]) => new Epoch([ms.value, data.value] as const, ms.epoch)),
       generateItemsWithEpoch(
         // Generator function.
         // creates an array of `{key, data}[]`
         // Each change in the keys (new key, missing key) will result in a call to the factory function.
-        function* ([membershipsWithTransports, managerData]) {
-          for (const { membership, transport } of membershipsWithTransports) {
-            // TODO! cannot use membership.membershipID yet, Currently its hardcoded by the jwt service to
-            const participantId = /*membership.membershipID*/ `${membership.userId}:${membership.deviceId}`;
-
+        function* ([membershipsWithTransport, managerData]) {
+          for (const { membership, transport } of membershipsWithTransport) {
             const participants = transport
               ? managerData.getParticipantsForTransport(transport)
               : [];
             const participant =
-              participants.find((p) => p.identity == participantId) ?? null;
+              participants.find(
+                (p) => p.identity == membership.rtcBackendIdentity,
+              ) ?? null;
             const connection = transport
               ? managerData.getConnectionForTransport(transport)
               : null;
 
             yield {
-              keys: [participantId, membership.userId],
+              // This could also just be the memberId without the other fields.
+              // In theory we should never have the same memberId for different userIds (they are UUIDs)
+              // This still makes us resilient agains someone who intentionally tries to use the same memberId.
+              // If they want to do this they would now need to also use the same sender which is impossible.
+              keys: [
+                membership.userId,
+                membership.deviceId,
+                membership.memberId,
+              ],
               data: { membership, participant, connection },
             };
           }
         },
         // Each update where the key of the generator array do not change will result in updates to the `data$` observable in the factory.
-        (scope, data$, participantId, userId) => {
+        (scope, data$, userId, deviceId, memberId) => {
           logger.debug(
-            `Generating member for participantId: ${participantId}, userId: ${userId}`,
+            `Generating member for livekitIdentity: ${data$.value.membership.rtcBackendIdentity},keys userId:deviceId:memberId ${userId}:${deviceId}:${memberId}`,
           );
           const { participant$, ...rest } = scope.splitBehavior(data$);
           // will only get called once per `participantId, userId` pair.
           // updates to data$ and as a result to displayName$ and mxcAvatarUrl$ are more frequent.
           return {
-            participantId,
             userId,
             participant: { type: "remote" as const, value$: participant$ },
             ...rest,
@@ -141,19 +140,25 @@ export function createMatrixLivekitMembers$({
         },
       ),
     ),
+    new Epoch([], -1),
   );
 }
 
 // TODO add back in the callviewmodel pauseWhen(this.pretendToBeDisconnected$)
 
 // TODO add this to the JS-SDK
-export function areLivekitTransportsEqual(
-  t1: LivekitTransport | null,
-  t2: LivekitTransport | null,
+export function areLivekitTransportsEqual<T extends LivekitTransport>(
+  t1: T | null,
+  t2: T | null,
 ): boolean {
-  if (t1 && t2) return t1.livekit_service_url === t2.livekit_service_url;
-  // In case we have different lk rooms in the same SFU (depends on the livekit authorization service)
-  // It is only needed in case the livekit authorization service is not behaving as expected (or custom implementation)
+  if (t1 && t2)
+    return (
+      t1.livekit_service_url === t2.livekit_service_url &&
+      // In case we have different lk rooms in the same SFU (depends on the livekit authorization service)
+      // It is only needed in case the livekit authorization service is not behaving as expected (or custom implementation)
+      // Also LivekitTransport is planned to become a `ConnectionIdentifier` which moves this equal somewhere else.
+      t1.livekit_alias === t2.livekit_alias
+    );
   if (!t1 && !t2) return true;
   return false;
 }

src/state/CallViewModel/remoteMembers/MatrixMemberMetadata.test.ts

@@ -18,7 +18,7 @@ import { it } from "vitest";
 import { ObservableScope } from "../../ObservableScope.ts";
 import type { Room as MatrixRoom } from "matrix-js-sdk/lib/models/room";
 import {
-  mockCallMembership,
+  mockRtcMembership,
   mockMatrixRoomMember,
   withTestScheduler,
 } from "../../../utils/test.ts";
@@ -111,7 +111,7 @@ describe("MatrixMemberMetadata", () => {
           rawDisplayName: "it's a me",
         });
         const memberships$ = behavior("a", {
-          a: [mockCallMembership("@local:example.com", "DEVICE1")],
+          a: [mockRtcMembership("@local:example.com", "DEVICE1")],
         });
         const metadataStore = createMatrixMemberMetadata$(
           testScope,
@@ -149,8 +149,8 @@ describe("MatrixMemberMetadata", () => {
       withTestScheduler(({ behavior, expectObservable }) => {
         const memberships$ = behavior("a", {
           a: [
-            mockCallMembership("@alice:example.com", "DEVICE1"),
-            mockCallMembership("@bob:example.com", "DEVICE1"),
+            mockRtcMembership("@alice:example.com", "DEVICE1"),
+            mockRtcMembership("@bob:example.com", "DEVICE1"),
           ],
         });
         const metadataStore = createMatrixMemberMetadata$(
@@ -179,7 +179,7 @@ describe("MatrixMemberMetadata", () => {
         setUpBasicRoom();
 
         const memberships$ = behavior("a", {
-          a: [mockCallMembership("@no-name:foo.bar", "D000")],
+          a: [mockRtcMembership("@no-name:foo.bar", "D000")],
         });
         const metadataStore = createMatrixMemberMetadata$(
           testScope,
@@ -201,11 +201,11 @@ describe("MatrixMemberMetadata", () => {
 
         const memberships$ = behavior("a", {
           a: [
-            mockCallMembership("@bob:example.com", "DEVICE1"),
-            mockCallMembership("@bob:example.com", "DEVICE2"),
-            mockCallMembership("@bob:foo.bar", "BOB000"),
-            mockCallMembership("@carl:example.com", "C000"),
-            mockCallMembership("@evil:example.com", "E000"),
+            mockRtcMembership("@bob:example.com", "DEVICE1"),
+            mockRtcMembership("@bob:example.com", "DEVICE2"),
+            mockRtcMembership("@bob:foo.bar", "BOB000"),
+            mockRtcMembership("@carl:example.com", "C000"),
+            mockRtcMembership("@evil:example.com", "E000"),
           ],
         });
 
@@ -233,10 +233,10 @@ describe("MatrixMemberMetadata", () => {
         setUpBasicRoom();
 
         const memberships$ = behavior("ab", {
-          a: [mockCallMembership("@bob:example.com", "DEVICE1")],
+          a: [mockRtcMembership("@bob:example.com", "DEVICE1")],
           b: [
-            mockCallMembership("@bob:example.com", "DEVICE1"),
-            mockCallMembership("@bob:foo.bar", "BOB000"),
+            mockRtcMembership("@bob:example.com", "DEVICE1"),
+            mockRtcMembership("@bob:foo.bar", "BOB000"),
           ],
         });
 
@@ -262,10 +262,10 @@ describe("MatrixMemberMetadata", () => {
 
         const memberships$ = behavior("ab", {
           a: [
-            mockCallMembership("@bob:example.com", "DEVICE1"),
-            mockCallMembership("@bob:foo.bar", "BOB000"),
+            mockRtcMembership("@bob:example.com", "DEVICE1"),
+            mockRtcMembership("@bob:foo.bar", "BOB000"),
           ],
-          b: [mockCallMembership("@bob:example.com", "DEVICE1")],
+          b: [mockRtcMembership("@bob:example.com", "DEVICE1")],
         });
 
         const metadataStore = createMatrixMemberMetadata$(
@@ -292,8 +292,8 @@ describe("MatrixMemberMetadata", () => {
 
         const memberships$ = behavior("a", {
           a: [
-            mockCallMembership("@bob:example.com", "B000"),
-            mockCallMembership("@carl:example.com", "C000"),
+            mockRtcMembership("@bob:example.com", "B000"),
+            mockRtcMembership("@carl:example.com", "C000"),
           ],
         });
         const metadataStore = createMatrixMemberMetadata$(
@@ -331,16 +331,16 @@ describe("MatrixMemberMetadata", () => {
         // - room join/leave
         // - disambiguate
         const memberships$ = behavior("ab-d", {
-          a: [mockCallMembership(CARL, "C000")],
+          a: [mockRtcMembership(CARL, "C000")],
           b: [
-            mockCallMembership(CARL, "C000"),
+            mockRtcMembership(CARL, "C000"),
             // bob joins
-            mockCallMembership(BOB, "B000"),
+            mockRtcMembership(BOB, "B000"),
           ],
           // c carl gets renamed to BOB
           d: [
             // carl leaves
-            mockCallMembership(BOB, "B000"),
+            mockRtcMembership(BOB, "B000"),
           ],
         });
         schedule("--a-", {
@@ -379,8 +379,8 @@ describe("MatrixMemberMetadata", () => {
 
     it("should disambiguate users with invisible characters", () => {
       withTestScheduler(({ behavior, expectObservable }) => {
-        const bobRtcMember = mockCallMembership("@bob:example.org", "BBBB");
-        const bobZeroWidthSpaceRtcMember = mockCallMembership(
+        const bobRtcMember = mockRtcMembership("@bob:example.org", "BBBB");
+        const bobZeroWidthSpaceRtcMember = mockRtcMembership(
           "@bob2:example.org",
           "BBBB",
         );
@@ -397,9 +397,9 @@ describe("MatrixMemberMetadata", () => {
         fakeMemberWith(bobZeroWidthSpace);
         fakeMemberWith({ userId: "@carol:example.org" });
         const memberships$ = behavior("ab", {
-          a: [mockCallMembership("@carol:example.org", "1111"), bobRtcMember],
+          a: [mockRtcMembership("@carol:example.org", "1111"), bobRtcMember],
           b: [
-            mockCallMembership("@carol:example.org", "1111"),
+            mockRtcMembership("@carol:example.org", "1111"),
             bobRtcMember,
             bobZeroWidthSpaceRtcMember,
           ],
@@ -450,8 +450,8 @@ describe("MatrixMemberMetadata", () => {
 
     it("should strip RTL characters from displayname", () => {
       withTestScheduler(({ behavior, expectObservable }) => {
-        const daveRtcMember = mockCallMembership("@dave:example.org", "DDDD");
-        const daveRTLRtcMember = mockCallMembership(
+        const daveRtcMember = mockRtcMembership("@dave:example.org", "DDDD");
+        const daveRTLRtcMember = mockRtcMembership(
           "@dave2:example.org",
           "DDDD",
         );
@@ -466,9 +466,9 @@ describe("MatrixMemberMetadata", () => {
         fakeMemberWith(daveRTL);
         fakeMemberWith(dave);
         const memberships$ = behavior("ab", {
-          a: [mockCallMembership("@carol:example.org", "DDDD")],
+          a: [mockRtcMembership("@carol:example.org", "DDDD")],
           b: [
-            mockCallMembership("@carol:example.org", "DDDD"),
+            mockRtcMembership("@carol:example.org", "DDDD"),
             daveRtcMember,
             daveRTLRtcMember,
           ],
@@ -527,8 +527,8 @@ describe("MatrixMemberMetadata", () => {
         });
         const memberships$ = behavior("a", {
           a: [
-            mockCallMembership("@local:example.com", "DEVICE1"),
-            mockCallMembership("@alice:example.com", "DEVICE1"),
+            mockRtcMembership("@local:example.com", "DEVICE1"),
+            mockRtcMembership("@alice:example.com", "DEVICE1"),
           ],
         });
         const metadataStore = createMatrixMemberMetadata$(
@@ -562,12 +562,12 @@ describe("MatrixMemberMetadata", () => {
         fakeMemberWith({ userId: "@carl:example.com" });
         fakeMemberWith({ userId: "@bob:example.com" });
         const memberships$ = behavior("ab-d", {
-          a: [mockCallMembership("@bob:example.com", "B000")],
+          a: [mockRtcMembership("@bob:example.com", "B000")],
           b: [
-            mockCallMembership("@bob:example.com", "B000"),
-            mockCallMembership("@carl:example.com", "C000"),
+            mockRtcMembership("@bob:example.com", "B000"),
+            mockRtcMembership("@carl:example.com", "C000"),
           ],
-          d: [mockCallMembership("@carl:example.com", "C000")],
+          d: [mockRtcMembership("@carl:example.com", "C000")],
         });
 
         const metadataStore = createMatrixMemberMetadata$(

src/state/CallViewModel/remoteMembers/integration.test.ts

@@ -21,8 +21,9 @@ import {
 import { ECConnectionFactory } from "./ConnectionFactory.ts";
 import { type OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
 import {
-  mockCallMembership,
   mockMediaDevices,
+  mockRtcMembership,
+  ownMemberMock,
   withTestScheduler,
 } from "../../../utils/test.ts";
 import { type ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
@@ -33,6 +34,7 @@ import {
 } from "./MatrixLivekitMembers.ts";
 import { createConnectionManager$ } from "./ConnectionManager.ts";
 import { membershipsAndTransports$ } from "../../SessionBehaviors.ts";
+import { constant } from "../../Behavior.ts";
 import { testJWTToken } from "../../../utils/test-fixtures.ts";
 
 // Test the integration of ConnectionManager and MatrixLivekitMerger
@@ -99,9 +101,9 @@ afterEach(() => {
 
 test("bob, carl, then bob joining no tracks yet", () => {
   withTestScheduler(({ expectObservable, behavior, scope }) => {
-    const bobMembership = mockCallMembership("@bob:example.com", "BDEV000");
-    const carlMembership = mockCallMembership("@carl:example.com", "CDEV000");
-    const daveMembership = mockCallMembership("@dave:foo.bar", "DDEV000");
+    const bobMembership = mockRtcMembership("@bob:example.com", "BDEV000");
+    const carlMembership = mockRtcMembership("@carl:example.com", "CDEV000");
+    const daveMembership = mockRtcMembership("@dave:foo.bar", "DDEV000");
 
     const eMarble = "abc";
     const vMarble = "abc";
@@ -121,8 +123,10 @@ test("bob, carl, then bob joining no tracks yet", () => {
     const connectionManager = createConnectionManager$({
       scope: testScope,
       connectionFactory: ecConnectionFactory,
-      inputTransports$: membershipsAndTransports.transports$,
+      localTransport$: constant(null),
+      remoteTransports$: membershipsAndTransports.transports$,
       logger: logger,
+      ownMembershipIdentity: ownMemberMock,
     });
 
     const matrixLivekitMembers$ = createMatrixLivekitMembers$({

src/state/CallViewModelWidget.test.ts

@@ -37,7 +37,7 @@ vi.mock("../widget", () => ({
 
 it.each([
   [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibil],
+  [MatrixRTCMode.Compatibility],
   [MatrixRTCMode.Matrix_2_0],
 ])(
   "expect leave when ElementWidgetActions.HangupCall is called (%s mode)",

src/state/MediaViewModel.ts

@@ -257,6 +257,7 @@ abstract class BaseMediaViewModel {
      * The Matrix user to which this media belongs.
      */
     public readonly userId: string,
+    public readonly rtcBackendIdentity: string,
     // We don't necessarily have a participant if a user connects via MatrixRTC but not (yet) through
     // livekit.
     protected readonly participant$: Observable<
@@ -406,6 +407,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
+    rtcBackendIdentity: string,
     participant$: Observable<LocalParticipant | RemoteParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -419,6 +421,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       scope,
       id,
       userId,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       Track.Source.Microphone,
@@ -544,6 +547,7 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
+    rtcBackendIdentity: string,
     participant$: Behavior<LocalParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -558,6 +562,7 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
       scope,
       id,
       userId,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       livekitRoom$,
@@ -671,6 +676,7 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
+    rtcBackendIdentity: string,
     participant$: Observable<RemoteParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -685,6 +691,7 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
       scope,
       id,
       userId,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       livekitRoom$,
@@ -772,6 +779,7 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
+    rtcBackendIdentity: string,
     participant$: Observable<LocalParticipant | RemoteParticipant>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -785,6 +793,7 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
       scope,
       id,
       userId,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       Track.Source.ScreenShareAudio,

src/state/MuteStates.test.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2025 Element Creations Ltd.
+Copyright 2025-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.
@@ -20,6 +20,8 @@ import {
 import { constant } from "./Behavior";
 import { ObservableScope } from "./ObservableScope";
 import { flushPromises, mockMediaDevices } from "../utils/test";
+import { initializeWidget } from "../widget";
+initializeWidget();
 
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../UrlParams", () => ({ getUrlParams }));
@@ -48,13 +50,7 @@ describe("MuteState", () => {
       select(): void {},
     } as unknown as MediaDevice<DeviceLabel, SelectedDevice>;
 
-    const muteState = new MuteState(
-      testScope,
-      deviceStub,
-      constant(true),
-      true,
-      forceMute$,
-    );
+    const muteState = new MuteState(testScope, deviceStub, true, forceMute$);
     let lastEnabled: boolean = false;
     muteState.enabled$.subscribe((enabled) => {
       lastEnabled = enabled;
@@ -163,12 +159,10 @@ describe("MuteStates", () => {
       videoInput: aVideoInput(),
       // other devices are not relevant for this test
     });
-    const muteStates = new MuteStates(
-      testScope,
-      mediaDevices,
-      // consider joined
-      constant(true),
-    );
+    const muteStates = new MuteStates(testScope, mediaDevices, {
+      audioEnabled: false,
+      videoEnabled: false,
+    });
 
     let latestSyncedState: boolean | null = null;
     muteStates.video.setHandler(async (enabled: boolean): Promise<boolean> => {

src/state/MuteStates.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2023-2025 New Vector Ltd.
+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.
@@ -24,8 +25,6 @@ import {
 
 import { type MediaDevices, type MediaDevice } from "../state/MediaDevices";
 import { ElementWidgetActions, widget } from "../widget";
-import { Config } from "../config/Config";
-import { getUrlParams } from "../UrlParams";
 import { type ObservableScope } from "./ObservableScope";
 import { type Behavior, constant } from "./Behavior";
 
@@ -43,12 +42,6 @@ const defaultHandler: Handler = async (desired) => Promise.resolve(desired);
  * Do not use directly outside of tests.
  */
 export class MuteState<Label, Selected> {
-  // TODO: rewrite this to explain behavior, it is not understandable, and cannot add logging
-  private readonly enabledByDefault$ =
-    this.enabledByConfig && !getUrlParams().skipLobby
-      ? this.joined$.pipe(map((isJoined) => !isJoined))
-      : of(false);
-
   private readonly handler$ = new BehaviorSubject(defaultHandler);
 
   public setHandler(handler: Handler): void {
@@ -73,76 +66,73 @@ export class MuteState<Label, Selected> {
   private readonly data$ = this.scope.behavior<MuteStateData>(
     this.canControlDevices$.pipe(
       distinctUntilChanged(),
-      withLatestFrom(
-        this.enabledByDefault$,
-        (canControlDevices, enabledByDefault) => {
+      map((canControlDevices) => {
+        logger.info(
+          `MuteState: canControlDevices: ${canControlDevices}, enabled by default: ${this.enabledByDefault}`,
+        );
+        if (!canControlDevices) {
           logger.info(
-            `MuteState: canControlDevices: ${canControlDevices}, enabled by default: ${enabledByDefault}`,
+            `MuteState: devices connected: ${canControlDevices}, disabling`,
           );
-          if (!canControlDevices) {
-            logger.info(
-              `MuteState: devices connected: ${canControlDevices}, disabling`,
-            );
-            // We need to sync the mute state with the handler
-            // to ensure nothing is beeing published.
-            this.handler$.value(false).catch((err) => {
-              logger.error("MuteState-disable: handler error", err);
-            });
-            return { enabled$: of(false), set: null, toggle: null };
-          }
+          // We need to sync the mute state with the handler
+          // to ensure nothing is beeing published.
+          this.handler$.value(false).catch((err) => {
+            logger.error("MuteState-disable: handler error", err);
+          });
+          return { enabled$: of(false), set: null, toggle: null };
+        }
 
-          // Assume the default value only once devices are actually connected
-          let enabled = enabledByDefault;
-          const set$ = new Subject<boolean>();
-          const toggle$ = new Subject<void>();
-          const desired$ = merge(set$, toggle$.pipe(map(() => !enabled)));
-          const enabled$ = new Observable<boolean>((subscriber) => {
-            subscriber.next(enabled);
-            let latestDesired = enabledByDefault;
-            let syncing = false;
+        // Assume the default value only once devices are actually connected
+        let enabled = this.enabledByDefault;
+        const set$ = new Subject<boolean>();
+        const toggle$ = new Subject<void>();
+        const desired$ = merge(set$, toggle$.pipe(map(() => !enabled)));
+        const enabled$ = new Observable<boolean>((subscriber) => {
+          subscriber.next(enabled);
+          let latestDesired = this.enabledByDefault;
+          let syncing = false;
 
-            const sync = async (): Promise<void> => {
-              if (enabled === latestDesired) syncing = false;
-              else {
-                const previouslyEnabled = enabled;
-                enabled = await firstValueFrom(
-                  this.handler$.pipe(
-                    switchMap(async (handler) => handler(latestDesired)),
-                  ),
-                );
-                if (enabled === previouslyEnabled) {
-                  syncing = false;
-                } else {
-                  subscriber.next(enabled);
-                  syncing = true;
-                  sync().catch((err) => {
-                    // TODO: better error handling
-                    logger.error("MuteState: handler error", err);
-                  });
-                }
-              }
-            };
-
-            const s = desired$.subscribe((desired) => {
-              latestDesired = desired;
-              if (syncing === false) {
+          const sync = async (): Promise<void> => {
+            if (enabled === latestDesired) syncing = false;
+            else {
+              const previouslyEnabled = enabled;
+              enabled = await firstValueFrom(
+                this.handler$.pipe(
+                  switchMap(async (handler) => handler(latestDesired)),
+                ),
+              );
+              if (enabled === previouslyEnabled) {
+                syncing = false;
+              } else {
+                subscriber.next(enabled);
                 syncing = true;
                 sync().catch((err) => {
                   // TODO: better error handling
                   logger.error("MuteState: handler error", err);
                 });
               }
-            });
-            return (): void => s.unsubscribe();
-          });
-
-          return {
-            set: (enabled: boolean): void => set$.next(enabled),
-            toggle: (): void => toggle$.next(),
-            enabled$,
+            }
           };
-        },
-      ),
+
+          const s = desired$.subscribe((desired) => {
+            latestDesired = desired;
+            if (syncing === false) {
+              syncing = true;
+              sync().catch((err) => {
+                // TODO: better error handling
+                logger.error("MuteState: handler error", err);
+              });
+            }
+          });
+          return (): void => s.unsubscribe();
+        });
+
+        return {
+          set: (enabled: boolean): void => set$.next(enabled),
+          toggle: (): void => toggle$.next(),
+          enabled$,
+        };
+      }),
     ),
   );
 
@@ -160,8 +150,7 @@ export class MuteState<Label, Selected> {
   public constructor(
     private readonly scope: ObservableScope,
     private readonly device: MediaDevice<Label, Selected>,
-    private readonly joined$: Observable<boolean>,
-    private readonly enabledByConfig: boolean,
+    private readonly enabledByDefault: boolean,
     /**
      * An optional observable which, when it emits `true`, will force the mute.
      * Used for video to stop camera when earpiece mode is on.
@@ -176,10 +165,10 @@ export class MuteStates {
    *  True if the selected audio output device is an earpiece.
    *  Used to force-disable video when on earpiece.
    */
-  private readonly isEarpiece$ = combineLatest(
+  private readonly isEarpiece$ = combineLatest([
     this.mediaDevices.audioOutput.available$,
     this.mediaDevices.audioOutput.selected$,
-  ).pipe(
+  ]).pipe(
     map(([available, selected]) => {
       if (!selected?.id) return false;
       const device = available.get(selected.id);
@@ -191,22 +180,23 @@ export class MuteStates {
   public readonly audio = new MuteState(
     this.scope,
     this.mediaDevices.audioInput,
-    this.joined$,
-    Config.get().media_devices.enable_audio,
+    this.initialMuteState.audioEnabled,
     constant(false),
   );
   public readonly video = new MuteState(
     this.scope,
     this.mediaDevices.videoInput,
-    this.joined$,
-    Config.get().media_devices.enable_video,
+    this.initialMuteState.videoEnabled,
     this.isEarpiece$,
   );
 
   public constructor(
     private readonly scope: ObservableScope,
     private readonly mediaDevices: MediaDevices,
-    private readonly joined$: Observable<boolean>,
+    private readonly initialMuteState: {
+      audioEnabled: boolean;
+      videoEnabled: boolean;
+    },
   ) {
     if (widget !== null) {
       // Sync our mute states with the hosting client

src/state/ScreenShare.ts

@@ -28,6 +28,7 @@ export class ScreenShare {
     private readonly scope: ObservableScope,
     id: string,
     userId: string,
+    rtcBackendIdentity: string,
     participant: LocalParticipant | RemoteParticipant,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -40,6 +41,7 @@ export class ScreenShare {
       this.scope,
       id,
       userId,
+      rtcBackendIdentity,
       of(participant),
       encryptionSystem,
       livekitRoom$,

src/state/UserMedia.ts

@@ -75,6 +75,7 @@ export class UserMedia {
           this.scope,
           this.id,
           this.userId,
+          this.rtcBackendIdentity,
           this.participant.value$,
           this.encryptionSystem,
           this.livekitRoom$,
@@ -89,6 +90,7 @@ export class UserMedia {
           this.scope,
           this.id,
           this.userId,
+          this.rtcBackendIdentity,
           this.participant.value$,
           this.encryptionSystem,
           this.livekitRoom$,
@@ -140,6 +142,7 @@ export class UserMedia {
                     scope,
                     `${this.id}:${key}`,
                     this.userId,
+                    this.rtcBackendIdentity,
                     p,
                     this.encryptionSystem,
                     this.livekitRoom$,
@@ -191,6 +194,7 @@ export class UserMedia {
     private readonly scope: ObservableScope,
     public readonly id: string,
     private readonly userId: string,
+    private readonly rtcBackendIdentity: string,
     private readonly participant: TaggedParticipant,
     private readonly encryptionSystem: EncryptionSystem,
     private readonly livekitRoom$: Behavior<LivekitRoom | undefined>,

src/state/initialMuteState.test.ts

@@ -0,0 +1,72 @@
+/*
+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 { test, expect } from "vitest";
+import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+
+import { calculateInitialMuteState } from "./initialMuteState";
+
+test.each<{
+  callIntent: RTCCallIntent;
+  isWidgetMode: boolean;
+}>([
+  { callIntent: "audio", isWidgetMode: false },
+  { callIntent: "audio", isWidgetMode: true },
+  { callIntent: "video", isWidgetMode: false },
+  { callIntent: "video", isWidgetMode: true },
+  { callIntent: "unknown", isWidgetMode: false },
+  { callIntent: "unknown", isWidgetMode: true },
+])(
+  "Should allow to unmute on start if not skipping lobby (callIntent: $callIntent, packageType: $packageType)",
+  ({ callIntent, isWidgetMode }) => {
+    const { audioEnabled, videoEnabled } = calculateInitialMuteState(
+      false,
+      callIntent,
+      isWidgetMode,
+    );
+    expect(audioEnabled).toBe(true);
+    expect(videoEnabled).toBe(callIntent !== "audio");
+  },
+);
+
+test.each<{
+  callIntent: RTCCallIntent;
+}>([
+  { callIntent: "audio" },
+  { callIntent: "video" },
+  { callIntent: "unknown" },
+])(
+  "Should always mute on start if skipping lobby on non widget mode (callIntent: $callIntent)",
+  ({ callIntent }) => {
+    const { audioEnabled, videoEnabled } = calculateInitialMuteState(
+      true,
+      callIntent,
+      false,
+    );
+    expect(audioEnabled).toBe(false);
+    expect(videoEnabled).toBe(false);
+  },
+);
+
+test.each<{
+  callIntent: RTCCallIntent;
+}>([
+  { callIntent: "audio" },
+  { callIntent: "video" },
+  { callIntent: "unknown" },
+])(
+  "Can start unmuted if skipping lobby on widget mode (callIntent: $callIntent)",
+  ({ callIntent }) => {
+    const { audioEnabled, videoEnabled } = calculateInitialMuteState(
+      true,
+      callIntent,
+      true,
+    );
+    expect(audioEnabled).toBe(true);
+    expect(videoEnabled).toBe(callIntent !== "audio");
+  },
+);

src/state/initialMuteState.ts

@@ -0,0 +1,42 @@
+/*
+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 { logger } from "matrix-js-sdk/lib/logger";
+import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+
+/**
+ * Calculates the initial mute state for media devices based on configuration.
+ *
+ * It is not always possible to start the widget with audio/video unmuted due to privacy concerns.
+ * This function encapsulates the logic to determine the appropriate initial state.
+ */
+export function calculateInitialMuteState(
+  skipLobby: boolean,
+  callIntent: RTCCallIntent | undefined,
+  isWidgetMode: boolean,
+): { audioEnabled: boolean; videoEnabled: boolean } {
+  logger.debug(
+    `calculateInitialMuteState: skipLobby=${skipLobby}, callIntent=${callIntent} isWidgetMode=${isWidgetMode}`,
+  );
+
+  if (skipLobby && !isWidgetMode) {
+    // If not in widget mode and lobby is skipped, default to muted to protect user privacy.
+    // In the SPA context we don't want to unmute users without giving them a chance to adjust their settings first.
+    return {
+      audioEnabled: false,
+      videoEnabled: false,
+    };
+  }
+
+  // Embedded contexts are trusted environments, so they allow unmuted by default.
+  // Same for when showing a lobby, as users can adjust their settings there.
+  // Additionally, if the call intent is "audio", we disable video by default.
+  return {
+    audioEnabled: true,
+    videoEnabled: callIntent != "audio",
+  };
+}

src/tile/GridTile.tsx

@@ -113,6 +113,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
     },
     [vm],
   );
+  const rtcBackendIdentity = vm.rtcBackendIdentity;
   const handRaised = useBehavior(vm.handRaised$);
   const reaction = useBehavior(vm.reaction$);
 
@@ -200,6 +201,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       focusUrl={focusUrl}
       audioStreamStats={audioStreamStats}
       videoStreamStats={videoStreamStats}
+      rtcBackendIdentity={rtcBackendIdentity}
       {...props}
     />
   );

src/tile/MediaView.tsx

@@ -18,7 +18,11 @@ import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
 import { type EncryptionStatus } from "../state/MediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
-import { showHandRaisedTimer, useSetting } from "../settings/settings";
+import {
+  showConnectionStats,
+  showHandRaisedTimer,
+  useSetting,
+} from "../settings/settings";
 import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
@@ -46,6 +50,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   waitingForMedia?: boolean;
   audioStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   videoStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
+  rtcBackendIdentity?: string;
   // The focus url, mainly for debugging purposes
   focusUrl?: string;
 }
@@ -74,11 +79,13 @@ export const MediaView: FC<Props> = ({
   waitingForMedia,
   audioStreamStats,
   videoStreamStats,
+  rtcBackendIdentity,
   focusUrl,
   ...props
 }) => {
   const { t } = useTranslation();
   const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
+  const [showConnectioStats] = useSetting(showConnectionStats);
 
   const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
@@ -132,14 +139,18 @@ export const MediaView: FC<Props> = ({
         {waitingForMedia && (
           <div className={styles.status}>
             {t("video_tile.waiting_for_media")}
+            {showConnectioStats ? " " + rtcBackendIdentity : ""}
           </div>
         )}
         {(audioStreamStats || videoStreamStats) && (
-          <RTCConnectionStats
-            audio={audioStreamStats}
-            video={videoStreamStats}
-            focusUrl={focusUrl}
-          />
+          <>
+            <RTCConnectionStats
+              audio={audioStreamStats}
+              video={videoStreamStats}
+              focusUrl={focusUrl}
+              rtcBackendIdentity={rtcBackendIdentity}
+            />
+          </>
         )}
         {/* TODO: Bring this back once encryption status is less broken */}
         {/*encryptionStatus !== EncryptionStatus.Okay && (

src/tile/SpotlightTile.tsx

@@ -63,7 +63,6 @@ interface SpotlightItemBaseProps {
   mxcAvatarUrl: string | undefined;
   focusable: boolean;
   "aria-hidden"?: boolean;
-  localParticipant: boolean;
 }
 
 interface SpotlightUserMediaItemBaseProps extends SpotlightItemBaseProps {
@@ -188,7 +187,6 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     focusable,
     encryptionStatus,
     "aria-hidden": ariaHidden,
-    localParticipant: vm.local,
   };
 
   return vm instanceof ScreenShareViewModel ? (

src/utils/errors.ts

@@ -19,6 +19,7 @@ export enum ErrorCode {
   INSUFFICIENT_CAPACITY_ERROR = "INSUFFICIENT_CAPACITY_ERROR",
   E2EE_NOT_SUPPORTED = "E2EE_NOT_SUPPORTED",
   OPEN_ID_ERROR = "OPEN_ID_ERROR",
+  NO_MATRIX_2_AUTHORIZATION_SERVICE = "NO_MATRIX_2_0_AUTHORIZATION_SERVICE",
   SFU_ERROR = "SFU_ERROR",
   UNKNOWN_ERROR = "UNKNOWN_ERROR",
 }
@@ -171,6 +172,23 @@ export class FailToGetOpenIdToken extends ElementCallError {
   }
 }
 
+export class NoMatrix2AuthorizationService extends ElementCallError {
+  /**
+   * Creates an instance of NoMatrix2_0AuthorizationService.
+   * @param error - The underlying error that caused the failure.
+   */
+  public constructor(error: Error) {
+    super(
+      t("error.generic"),
+      ErrorCode.NO_MATRIX_2_AUTHORIZATION_SERVICE,
+      ErrorCategory.CONFIGURATION_ISSUE,
+      t("error.no_matrix_2_authorization_service"),
+      // Properly set it as a cause for a better reporting on sentry
+      error,
+    );
+  }
+}
+
 /**
  * Error indicating a failure to start publishing on a LiveKit connection.
  */

src/utils/test-fixtures.ts

@@ -17,14 +17,16 @@ export const localRtcMemberDevice2 = mockRtcMembership(
   "2222",
 );
 export const local = mockMatrixRoomMember(localRtcMember);
-// export const localParticipant = mockLocalParticipant({ identity: "" });
+
 export const localId = `${local.userId}:${localRtcMember.deviceId}`;
 
-export const aliceRtcMember = mockRtcMembership("@alice:example.org", "AAAA");
+export const aliceDeviceId = "AAAA";
+export const aliceUserId = "@alice:example.org";
+export const aliceId = `${aliceUserId}:${aliceDeviceId}`;
+export const aliceRtcMember = mockRtcMembership(aliceUserId, aliceDeviceId);
 export const alice = mockMatrixRoomMember(aliceRtcMember, {
   rawDisplayName: "Alice",
 });
-export const aliceId = `${alice.userId}:${aliceRtcMember.deviceId}`;
 export const aliceParticipant = mockRemoteParticipant({ identity: aliceId });
 
 export const aliceDoppelgangerRtcMember = mockRtcMembership(
@@ -38,11 +40,13 @@ export const aliceDoppelganger = mockMatrixRoomMember(
   },
 );
 
-export const bobRtcMember = mockRtcMembership("@bob:example.org", "BBBB");
+export const bobDeviceId = "BBBB";
+export const bobUserId = "@bob:example.org";
+export const bobId = `${bobUserId}:${bobDeviceId}`;
+export const bobRtcMember = mockRtcMembership(bobUserId, bobDeviceId);
 export const bob = mockMatrixRoomMember(bobRtcMember, {
   rawDisplayName: "Bob",
 });
-export const bobId = `${bob.userId}:${bobRtcMember.deviceId}`;
 
 export const bobZeroWidthSpaceRtcMember = mockRtcMembership(
   "@bob2:example.org",

src/utils/test.ts

@@ -50,6 +50,7 @@ import {
   type KeyTransportEvents,
   type KeyTransportEventsHandlerMap,
 } from "matrix-js-sdk/lib/matrixrtc/IKeyTransport";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import {
   LocalUserMediaViewModel,
@@ -201,40 +202,30 @@ export const exampleTransport: LivekitTransport = {
   livekit_alias: "!alias:example.org",
 };
 
-export function mockCallMembership(
-  userId: string,
-  deviceId: string,
-  transport?: Transport,
-): CallMembership {
-  const t = transport ?? transportForUser(userId);
-  return {
-    userId: userId,
-    deviceId: deviceId,
-    getTransport: vi.fn().mockReturnValue(t),
-    transports: [t],
-  } as unknown as CallMembership;
-}
-
-function transportForUser(userId: string): Transport {
-  const domain = userId.split(":")[1];
-  return {
-    type: "livekit",
-    livekit_service_url: `https://lk.${domain}`,
-    livekit_alias: `!alias:${domain}`,
-  };
-}
-
 export function mockRtcMembership(
   user: string | RoomMember,
   deviceId: string,
-  callId = "",
-  fociPreferred: Transport[] = [exampleTransport],
-  focusActive: LivekitFocusSelection = {
-    type: "livekit",
-    focus_selection: "oldest_membership",
+  customOverwrites?: {
+    rtcBackendIdentity?: string;
+    callId?: string;
+    fociPreferred?: Transport[];
+    focusActive?: LivekitFocusSelection;
+    membership?: Partial<SessionMembershipData>;
   },
-  membership: Partial<SessionMembershipData> = {},
 ): CallMembership {
+  // setup defaults based on overwrites and fallback values.
+  const { rtcBackendIdentity, callId, fociPreferred, focusActive, membership } =
+    {
+      fociPreferred: [exampleTransport],
+      focusActive: {
+        type: "livekit" as const,
+        focus_selection: "oldest_membership" as const,
+      },
+      callId: "",
+      membership: {},
+      ...customOverwrites,
+    };
+
   const data: SessionMembershipData = {
     application: "m.call",
     call_id: callId,
@@ -243,17 +234,29 @@ export function mockRtcMembership(
     focus_active: focusActive,
     ...membership,
   };
+  const userId = typeof user === "string" ? user : user.userId;
   const event = new MatrixEvent({
-    sender: typeof user === "string" ? user : user.userId,
+    sender: userId,
     event_id: `$-ev-${randomUUID()}:example.org`,
     content: data,
   });
 
-  const cms = new CallMembership(event, data);
+  const membershipData = CallMembership.membershipDataFromMatrixEvent(event);
+  const cms = new CallMembership(
+    event,
+    membershipData,
+    rtcBackendIdentity ?? `${userId}:${deviceId}`,
+  );
   vi.mocked(cms).getTransport = vi.fn().mockReturnValue(fociPreferred[0]);
+
   return cms;
 }
 
+export const ownMemberMock: CallMembershipIdentityParts = {
+  userId: "@alice:example.org",
+  deviceId: "DEVICE",
+  memberId: "@alice:example.org:DEVICE",
+};
 // Maybe it'd be good to move this to matrix-js-sdk? Our testing needs are
 // rather simple, but if one util to mock a member is good enough for us, maybe
 // it's useful for matrix-js-sdk consumers in general.
@@ -331,6 +334,7 @@ export function createLocalMedia(
     testScope(),
     "local",
     member.userId,
+    rtcMember.rtcBackendIdentity,
     constant(localParticipant),
     {
       kind: E2eeType.PER_PARTICIPANT,
@@ -376,6 +380,7 @@ export function createRemoteMedia(
     testScope(),
     "remote",
     member.userId,
+    rtcMember.rtcBackendIdentity,
     constant(participant),
     {
       kind: E2eeType.PER_PARTICIPANT,
@@ -455,7 +460,9 @@ export class MockRTCSession extends TypedEventEmitter<
     return this;
   }
 
-  public updateCallIntent = vitest.fn();
+  public updateCallIntent = vitest
+    .fn()
+    .mockImplementation(async () => Promise.resolve());
 
   private _membershipStatus = Status.Connected;
   public get membershipStatus(): Status {
@@ -478,7 +485,7 @@ export class MockRTCSession extends TypedEventEmitter<
     if (value !== prev) this.emit(MembershipManagerEvent.ProbablyLeft, value);
   }
 
-  public async joinRoomSession(): Promise<void> {
+  public async joinRTCSession(): Promise<void> {
     return Promise.resolve();
   }
 }
@@ -525,5 +532,8 @@ export function mockMuteStates(
   joined$: Observable<boolean> = of(true),
 ): MuteStates {
   const observableScope = new ObservableScope();
-  return new MuteStates(observableScope, mockMediaDevices({}), joined$);
+  return new MuteStates(observableScope, mockMediaDevices({}), {
+    audioEnabled: false,
+    videoEnabled: false,
+  });
 }

src/widget.test.ts

@@ -0,0 +1,127 @@
+/*
+Copyright 2026 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 { beforeAll, describe, expect, vi, it } from "vitest";
+import { createRoomWidgetClient, EventType } from "matrix-js-sdk";
+
+import { getUrlParams } from "./UrlParams";
+import { initializeWidget, widget } from "./widget";
+import { Config } from "./config/Config";
+import { ElementCallReactionEventType } from "./reactions";
+
+vi.mock("matrix-js-sdk", { spy: true });
+const createRoomWidgetClientSpy = vi.mocked(createRoomWidgetClient);
+
+vi.mock("./config/Config", () => ({
+  Config: {
+    init: vi.fn().mockImplementation(async () => Promise.resolve()),
+  },
+}));
+const configInitSpy = vi.mocked(Config.init);
+
+vi.mock("./UrlParams", () => ({
+  getUrlParams: vi.fn(() => ({
+    widgetId: "id",
+    parentUrl: "http://parentUrl",
+    roomId: "room",
+    userId: "myYser",
+    deviceId: "AAAAA",
+    baseUrl: "http://baseUrl",
+    e2eEnabled: true,
+  })),
+}));
+
+initializeWidget();
+describe("widget", () => {
+  beforeAll(() => {});
+
+  it("should create an embedded client with the correct params", () => {
+    expect(getUrlParams()).toStrictEqual({
+      widgetId: "id",
+      parentUrl: "http://parentUrl",
+      roomId: "room",
+      userId: "myYser",
+      deviceId: "AAAAA",
+      baseUrl: "http://baseUrl",
+      e2eEnabled: true,
+    });
+    expect(widget).toBeDefined();
+    expect(configInitSpy).toHaveBeenCalled();
+    const sendEvent = [
+      EventType.CallNotify, // Sent as a deprecated fallback
+      EventType.RTCNotification,
+    ];
+    const sendRecvEvent = [
+      "org.matrix.rageshake_request",
+      EventType.CallEncryptionKeysPrefix,
+      EventType.Reaction,
+      EventType.RoomRedaction,
+      ElementCallReactionEventType,
+      EventType.RTCDecline,
+      EventType.RTCMembership,
+    ];
+
+    const sendState = [
+      "myYser", // Legacy call membership events
+      `_myYser_AAAAA_m.call`, // Session membership events
+      `myYser_AAAAA_m.call`, // The above with no leading underscore, for room versions whose auth rules allow it
+    ].map((stateKey) => ({
+      eventType: EventType.GroupCallMemberPrefix,
+      stateKey,
+    }));
+    const receiveState = [
+      { eventType: EventType.RoomCreate },
+      { eventType: EventType.RoomName },
+      { eventType: EventType.RoomMember },
+      { eventType: EventType.RoomEncryption },
+      { eventType: EventType.GroupCallMemberPrefix },
+    ];
+
+    const sendRecvToDevice = [
+      EventType.CallInvite,
+      EventType.CallCandidates,
+      EventType.CallAnswer,
+      EventType.CallHangup,
+      EventType.CallReject,
+      EventType.CallSelectAnswer,
+      EventType.CallNegotiate,
+      EventType.CallSDPStreamMetadataChanged,
+      EventType.CallSDPStreamMetadataChangedPrefix,
+      EventType.CallReplaces,
+      EventType.CallEncryptionKeysPrefix,
+    ];
+
+    expect(createRoomWidgetClientSpy.mock.calls[0][1]).toStrictEqual({
+      sendEvent: [...sendEvent, ...sendRecvEvent],
+      receiveEvent: sendRecvEvent,
+      sendState,
+      receiveState,
+      sendToDevice: sendRecvToDevice,
+      receiveToDevice: sendRecvToDevice,
+      turnServers: false,
+      sendDelayedEvents: true,
+      updateDelayedEvents: true,
+      sendSticky: true,
+      receiveSticky: true,
+    });
+
+    expect(createRoomWidgetClientSpy.mock.calls[0][2]).toStrictEqual("room");
+    expect(createRoomWidgetClientSpy.mock.calls[0][3]).toStrictEqual({
+      baseUrl: "http://baseUrl",
+      userId: "myYser",
+      deviceId: "AAAAA",
+      timelineSupport: true,
+      useE2eForGroupCall: true,
+      fallbackICEServerAllowed: undefined,
+      store: expect.any(Object),
+      cryptoStore: expect.any(Object),
+      idBaseUrl: undefined,
+      scheduler: expect.any(Object),
+    });
+    expect(createRoomWidgetClientSpy.mock.calls[0][4]).toStrictEqual(false);
+  });
+});

src/widget.ts

@@ -6,14 +6,17 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/lib/logger";
-import { EventType, createRoomWidgetClient } from "matrix-js-sdk";
+import {
+  EventType,
+  createRoomWidgetClient,
+  type MatrixClient,
+} from "matrix-js-sdk";
 import {
   WidgetApi,
   MatrixCapabilities,
   WidgetApiToWidgetAction,
 } from "matrix-widget-api";
 
-import type { MatrixClient } from "matrix-js-sdk";
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import { LazyEventEmitter } from "./LazyEventEmitter";
 import { getUrlParams } from "./UrlParams";
@@ -25,8 +28,6 @@ export enum ElementWidgetActions {
   JoinCall = "io.element.join",
   HangupCall = "im.vector.hangup",
   Close = "io.element.close",
-  TileLayout = "io.element.tile_layout",
-  SpotlightLayout = "io.element.spotlight_layout",
   // This can be sent as from or to widget
   // fromWidget: updates the client about the current device mute state
   // toWidget: the client requests a specific device mute configuration
@@ -57,15 +58,29 @@ export interface WidgetHelpers {
 
 /**
  * A point of access to the widget API, if the app is running as a widget. This
- * is declared and initialized on the top level because the widget messaging
+ * is initialized with `initializeWidget`. This should happen at the top level because the widget messaging
  * needs to be set up ASAP on load to ensure it doesn't miss any requests.
  */
-export const widget = ((): WidgetHelpers | null => {
-  try {
-    const { widgetId, parentUrl } = getUrlParams();
+export let widget: WidgetHelpers | null;
+
+/**
+ * Should be called as soon as possible on app start. (In the initilizer before react)
+ */
+// this needs to be a seperate call and cannot be done on import to allow us to spy on methods in here before
+// execution.
+export const initializeWidget = (): void => {
+  try {
+    const {
+      widgetId,
+      parentUrl,
+      roomId,
+      userId,
+      deviceId,
+      baseUrl,
+      e2eEnabled,
+      allowIceFallback,
+    } = getUrlParams();
 
-    const { roomId, userId, deviceId, baseUrl, e2eEnabled, allowIceFallback } =
-      getUrlParams();
     if (!roomId) throw new Error("Room ID must be supplied");
     if (!userId) throw new Error("User ID must be supplied");
     if (!deviceId) throw new Error("Device ID must be supplied");
@@ -83,8 +98,6 @@ export const widget = ((): WidgetHelpers | null => {
         WidgetApiToWidgetAction.ThemeChange,
         ElementWidgetActions.JoinCall,
         ElementWidgetActions.HangupCall,
-        ElementWidgetActions.TileLayout,
-        ElementWidgetActions.SpotlightLayout,
         ElementWidgetActions.DeviceMute,
       ].forEach((action) => {
         api.on(`action:${action}`, (ev: CustomEvent<IWidgetApiRequest>) => {
@@ -110,6 +123,7 @@ export const widget = ((): WidgetHelpers | null => {
         EventType.RoomRedaction,
         ElementCallReactionEventType,
         EventType.RTCDecline,
+        EventType.RTCMembership,
       ];
 
       const sendState = [
@@ -154,6 +168,8 @@ export const widget = ((): WidgetHelpers | null => {
           turnServers: false,
           sendDelayedEvents: true,
           updateDelayedEvents: true,
+          sendSticky: true,
+          receiveSticky: true,
         },
         roomId,
         {
@@ -176,14 +192,14 @@ export const widget = ((): WidgetHelpers | null => {
         return client;
       };
 
-      return { api, lazyActions, client: clientPromise() };
+      widget = { api, lazyActions, client: clientPromise() };
     } else {
       if (import.meta.env.MODE !== "test")
         logger.info("No widget API available");
-      return null;
+      widget = null;
     }
   } catch (e) {
     logger.warn("Continuing without the widget API", e);
-    return null;
+    widget = null;
   }
-})();
+};

yarn.lock

@@ -2903,16 +2903,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:1.6.13, @floating-ui/dom@npm:^1.0.0":
-  version: 1.6.13
-  resolution: "@floating-ui/dom@npm:1.6.13"
-  dependencies:
-    "@floating-ui/core": "npm:^1.6.0"
-    "@floating-ui/utils": "npm:^0.2.9"
-  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
-  languageName: node
-  linkType: hard
-
 "@floating-ui/dom@npm:1.7.4":
   version: 1.7.4
   resolution: "@floating-ui/dom@npm:1.7.4"
@@ -2923,6 +2913,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/dom@npm:^1.0.0":
+  version: 1.6.13
+  resolution: "@floating-ui/dom@npm:1.6.13"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
+  languageName: node
+  linkType: hard
+
 "@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.1.2":
   version: 2.1.2
   resolution: "@floating-ui/react-dom@npm:2.1.2"
@@ -3213,21 +3213,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@livekit/components-core@npm:0.12.11":
-  version: 0.12.11
-  resolution: "@livekit/components-core@npm:0.12.11"
-  dependencies:
-    "@floating-ui/dom": "npm:1.6.13"
-    loglevel: "npm:1.9.1"
-    rxjs: "npm:7.8.2"
-  peerDependencies:
-    livekit-client: ^2.15.14
-    tslib: ^2.6.2
-  checksum: 10c0/9c2ac3d30bb8cc9067ae0b2049784f81e90e57df9eabf7edbaf3c8ceb65a63f644a4e6abeb6cc38d3ebe52663d8dbb88535e01a965011f365d5ae1f3daf86052
-  languageName: node
-  linkType: hard
-
-"@livekit/components-core@npm:^0.12.0":
+"@livekit/components-core@npm:0.12.12, @livekit/components-core@npm:^0.12.0":
   version: 0.12.12
   resolution: "@livekit/components-core@npm:0.12.12"
   dependencies:
@@ -3242,10 +3228,10 @@ __metadata:
   linkType: hard
 
 "@livekit/components-react@npm:^2.0.0":
-  version: 2.9.16
-  resolution: "@livekit/components-react@npm:2.9.16"
+  version: 2.9.17
+  resolution: "@livekit/components-react@npm:2.9.17"
   dependencies:
-    "@livekit/components-core": "npm:0.12.11"
+    "@livekit/components-core": "npm:0.12.12"
     clsx: "npm:2.1.1"
     events: "npm:^3.3.0"
     jose: "npm:^6.0.12"
@@ -3259,7 +3245,7 @@ __metadata:
   peerDependenciesMeta:
     "@livekit/krisp-noise-filter":
       optional: true
-  checksum: 10c0/4ba4ff473c5a29d3107412733a6676a3b708d70684ed463e9b34cda26abb3d2f317c2828a52e730837b756de9df3fc248260d6f390aedebfb6ec96ef63c7b151
+  checksum: 10c0/ba64ada37d4b3ce4d5ee7c5b2a6bddbffc17c2e641e95881aac9f02b4ff7428105e0a372d364e50ff124e988b7426d322d94caabdb55b634aebf0144d7e37f99
   languageName: node
   linkType: hard
 
@@ -3300,10 +3286,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@matrix-org/matrix-sdk-crypto-wasm@npm:^16.0.0":
-  version: 16.0.0
-  resolution: "@matrix-org/matrix-sdk-crypto-wasm@npm:16.0.0"
-  checksum: 10c0/13b4ede3e618da819957abff778afefcf3baf9a2faac04a36bb5a07a44fae2ea05fbfa072eb3408d48b2b7b9aaf27242ce52c594c8ce9bf1fb8b3aade2832be1
+"@matrix-org/matrix-sdk-crypto-wasm@npm:^17.0.0":
+  version: 17.0.0
+  resolution: "@matrix-org/matrix-sdk-crypto-wasm@npm:17.0.0"
+  checksum: 10c0/fa97e3111099057e0953e7550d6556b6e7553f3badd5b25a6988d2fcc94d22288a27e63cb204771b74ff24388d770c83f2cf5aec583f05c6ecf46509b8020570
   languageName: node
   linkType: hard
 
@@ -3838,6 +3824,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-arrow@npm:1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-arrow@npm:1.1.7"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.1.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/c3b46766238b3ee2a394d8806a5141432361bf1425110c9f0dcf480bda4ebd304453a53f294b5399c6ee3ccfcae6fd544921fd01ddc379cf5942acdd7168664b
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-collection@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-collection@npm:1.1.1"
@@ -3908,16 +3913,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-context-menu@npm:^2.2.1":
-  version: 2.2.4
-  resolution: "@radix-ui/react-context-menu@npm:2.2.4"
+"@radix-ui/react-context-menu@npm:^2.2.16":
+  version: 2.2.16
+  resolution: "@radix-ui/react-context-menu@npm:2.2.16"
   dependencies:
-    "@radix-ui/primitive": "npm:1.1.1"
-    "@radix-ui/react-context": "npm:1.1.1"
-    "@radix-ui/react-menu": "npm:2.1.4"
-    "@radix-ui/react-primitive": "npm:2.0.1"
-    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
-    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/primitive": "npm:1.1.3"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-menu": "npm:2.1.16"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
@@ -3928,7 +3933,7 @@ __metadata:
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 10c0/f500590b1300dfcd8a2d0fb51fcada0e7d9a1a354ac239328ffdd32f3736bde888ebf0cd64d9039f7d894e3d13eb549a872359669de8c7ff128ee1afb9cf21a8
+  checksum: 10c0/950f7559e65474a19145238cf44d744cb1e49be2221ff18436ba49b496b05ccf93bd3906aaa2c7ab76bc77daf694911a78442801e0053f57d2e57ebbfd281c49
   languageName: node
   linkType: hard
 
@@ -4228,6 +4233,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-menu@npm:2.1.16":
+  version: 2.1.16
+  resolution: "@radix-ui/react-menu@npm:2.1.16"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.3"
+    "@radix-ui/react-collection": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.11"
+    "@radix-ui/react-focus-guards": "npm:1.1.3"
+    "@radix-ui/react-focus-scope": "npm:1.1.7"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-popper": "npm:1.2.8"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-presence": "npm:1.1.5"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-roving-focus": "npm:1.1.11"
+    "@radix-ui/react-slot": "npm:1.2.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    aria-hidden: "npm:^1.2.4"
+    react-remove-scroll: "npm:^2.6.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/27516b2b987fa9181c4da8645000af8f60691866a349d7a46b9505fa7d2e9d92b9e364db4f7305d08e9e57d0e1afc8df8354f8ee3c12aa05c0100c16b0e76c27
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-menu@npm:2.1.4":
   version: 2.1.4
   resolution: "@radix-ui/react-menu@npm:2.1.4"
@@ -4292,6 +4333,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-popper@npm:1.2.8":
+  version: 1.2.8
+  resolution: "@radix-ui/react-popper@npm:1.2.8"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.0.0"
+    "@radix-ui/react-arrow": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+    "@radix-ui/react-use-rect": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
+    "@radix-ui/rect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/48e3f13eac3b8c13aca8ded37d74db17e1bb294da8d69f142ab6b8719a06c3f90051668bed64520bf9f3abdd77b382ce7ce209d056bb56137cecc949b69b421c
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-portal@npm:1.1.3":
   version: 1.1.3
   resolution: "@radix-ui/react-portal@npm:1.1.3"
@@ -4476,6 +4545,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-roving-focus@npm:1.1.11":
+  version: 1.1.11
+  resolution: "@radix-ui/react-roving-focus@npm:1.1.11"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.3"
+    "@radix-ui/react-collection": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/2cd43339c36e89a3bf1db8aab34b939113dfbde56bf3a33df2d74757c78c9489b847b1962f1e2441c67e41817d120cb6177943e0f655f47bc1ff8e44fd55b1a2
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-separator@npm:^1.1.0":
   version: 1.1.1
   resolution: "@radix-ui/react-separator@npm:1.1.1"
@@ -4725,6 +4821,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-rect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-rect@npm:1.1.1"
+  dependencies:
+    "@radix-ui/rect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/271711404c05c589c8dbdaa748749e7daf44bcc6bffc9ecd910821c3ebca0ee245616cf5b39653ce690f53f875c3836fd3f36f51ab1c628273b6db599eee4864
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-size@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-size@npm:1.1.0"
@@ -4781,6 +4892,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/rect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/rect@npm:1.1.1"
+  checksum: 10c0/0dac4f0f15691199abe6a0e067821ddd9d0349c0c05f39834e4eafc8403caf724106884035ae91bbc826e10367e6a5672e7bec4d4243860fa7649de246b1f60b
+  languageName: node
+  linkType: hard
+
 "@react-spring/animated@npm:~10.0.3":
   version: 10.0.3
   resolution: "@react-spring/animated@npm:10.0.3"
@@ -6026,8 +6144,8 @@ __metadata:
   linkType: hard
 
 "@vector-im/compound-design-tokens@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "@vector-im/compound-design-tokens@npm:6.0.0"
+  version: 6.6.0
+  resolution: "@vector-im/compound-design-tokens@npm:6.6.0"
   peerDependencies:
     "@types/react": "*"
     react: ^17 || ^18 || ^19.0.0
@@ -6036,16 +6154,16 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 10c0/1af5b2b73a3a55149047cd0716f071b83a4df8a210c9ad432db4cc2f9b9e72e958f93ff850dbaddb88e37a01870c5eb810b03dfb0acc89cc147eaaf6cf1dada1
+  checksum: 10c0/93b152dd1de96371f9b6b1f7dbcc381d7ab598031dbc900f52d610f015766c0d4426ae6e47d417e723bfb62d1a53099155b4d788848b78232916ba132c03c2fe
   languageName: node
   linkType: hard
 
 "@vector-im/compound-web@npm:^8.0.0":
-  version: 8.2.0
-  resolution: "@vector-im/compound-web@npm:8.2.0"
+  version: 8.3.4
+  resolution: "@vector-im/compound-web@npm:8.3.4"
   dependencies:
     "@floating-ui/react": "npm:^0.27.0"
-    "@radix-ui/react-context-menu": "npm:^2.2.1"
+    "@radix-ui/react-context-menu": "npm:^2.2.16"
     "@radix-ui/react-dropdown-menu": "npm:^2.1.1"
     "@radix-ui/react-form": "npm:^0.1.0"
     "@radix-ui/react-progress": "npm:^1.1.0"
@@ -6057,12 +6175,12 @@ __metadata:
     "@fontsource/inconsolata": ^5
     "@fontsource/inter": ^5
     "@types/react": "*"
-    "@vector-im/compound-design-tokens": ">=1.6.1 <6.0.0"
+    "@vector-im/compound-design-tokens": ">=1.6.1 <7.0.0"
     react: ^18 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/4ac4074dcf9611bdff7de4bf66763397c926d6312f31758bcabe3e7bf704cb76bc2ce1023fe5f2cf0d05e97c9c540fef8b63edea7a521a2f7b4b7fbcb883fb17
+  checksum: 10c0/44764fa64b5fce2e7181e25b50ee970eda4d921cf650b92bd5e88df0eb60872f3086b8702d18f55c3e39b3751ac19f10bafda8c4306df65c3605bd44b297d95c
   languageName: node
   linkType: hard
 
@@ -8247,7 +8365,7 @@ __metadata:
     lodash-es: "npm:^4.17.21"
     loglevel: "npm:^1.9.1"
     matrix-js-sdk: "matrix-org/matrix-js-sdk#develop"
-    matrix-widget-api: "npm:^1.14.0"
+    matrix-widget-api: "npm:^1.16.1"
     node-stdlib-browser: "npm:^1.3.1"
     normalize.css: "npm:^8.0.1"
     observable-hooks: "npm:^4.2.3"
@@ -8267,6 +8385,7 @@ __metadata:
     typescript: "npm:^5.8.3"
     typescript-eslint-language-service: "npm:^5.0.5"
     unique-names-generator: "npm:^4.6.0"
+    uuid: "npm:^13.0.0"
     vaul: "npm:^1.0.0"
     vite: "npm:^7.0.0"
     vite-plugin-generate-file: "npm:^0.3.0"
@@ -11143,9 +11262,9 @@ __metadata:
   linkType: hard
 
 "lodash-es@npm:^4.17.21":
-  version: 4.17.22
-  resolution: "lodash-es@npm:4.17.22"
-  checksum: 10c0/5f28a262183cca43e08c580622557f393cb889386df2d8adf7c852bfdff7a84c5e629df5aa6c5c6274e83b38172f239d3e4e72e1ad27352d9ae9766627338089
+  version: 4.17.23
+  resolution: "lodash-es@npm:4.17.23"
+  checksum: 10c0/3150fb6660c14c7a6b5f23bd11597d884b140c0e862a17fdb415aaa5ef7741523182904a6b7929f04e5f60a11edb5a79499eb448734381c99ffb3c4734beeddd
   languageName: node
   linkType: hard
 
@@ -11334,34 +11453,34 @@ __metadata:
   linkType: hard
 
 "matrix-js-sdk@matrix-org/matrix-js-sdk#develop":
-  version: 39.4.0
-  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=174439c2f0c09cf9926c28435ba4db1345df4aee"
+  version: 40.0.0
+  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=dbb2ae5c0752c28639502e93f26cb3003d0d0595"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
-    "@matrix-org/matrix-sdk-crypto-wasm": "npm:^16.0.0"
+    "@matrix-org/matrix-sdk-crypto-wasm": "npm:^17.0.0"
     another-json: "npm:^0.2.0"
     bs58: "npm:^6.0.0"
     content-type: "npm:^1.0.4"
     jwt-decode: "npm:^4.0.0"
     loglevel: "npm:^1.9.2"
     matrix-events-sdk: "npm:0.0.1"
-    matrix-widget-api: "npm:^1.14.0"
+    matrix-widget-api: "npm:^1.16.1"
     oidc-client-ts: "npm:^3.0.1"
     p-retry: "npm:7"
     sdp-transform: "npm:^3.0.0"
     unhomoglyph: "npm:^1.0.6"
     uuid: "npm:13"
-  checksum: 10c0/5178de27bb618aed6f80632a72c5582542ceedb51ef15534493360a624b072e0c276693ad9e37d83f2ddb06716f9eb6d02960e158e029f7a005676873778c745
+  checksum: 10c0/9f97cec346e0dcce8599bc3afa1608f5166408260937f8311fa9af95b8fd2ff6d86422124fcb721fc830a3ec269389067334c344b4f512b64299561484135326
   languageName: node
   linkType: hard
 
-"matrix-widget-api@npm:^1.14.0":
-  version: 1.15.0
-  resolution: "matrix-widget-api@npm:1.15.0"
+"matrix-widget-api@npm:^1.16.1":
+  version: 1.16.1
+  resolution: "matrix-widget-api@npm:1.16.1"
   dependencies:
     "@types/events": "npm:^3.0.0"
     events: "npm:^3.2.0"
-  checksum: 10c0/1c08b5284cd98aed312d95594335e1391d937dfad70ef862a1f90fdbaaa27709e1c44dcda37f8045e4814779d8d5816d240aee396d52cfd9b37fbf243a6baf6a
+  checksum: 10c0/d88180f514104b84d3018055fc955138d65195465480a51e9afe5dbf2f3175b54e3483b4c4f1feab2dd27440f403051d9c8b293bd0532c09b136c6b23606e1ee
   languageName: node
   linkType: hard
 
@@ -15214,7 +15333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:13":
+"uuid@npm:13, uuid@npm:^13.0.0":
   version: 13.0.0
   resolution: "uuid@npm:13.0.0"
   bin: