Set latest tag when publishing a docker release.

Fixes https://github.com/element-hq/element-call/issues/3647

.eslintrc.cjs

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 `;
 
 module.exports = {
-  plugins: ["matrix-org", "rxjs", "jsdoc"],
+  plugins: ["matrix-org", "rxjs"],
   extends: [
     "plugin:matrix-org/react",
     "plugin:matrix-org/a11y",
@@ -26,13 +26,6 @@ module.exports = {
     node: true,
   },
   rules: {
-    "jsdoc/no-types": "error",
-    "jsdoc/empty-tags": "error",
-    "jsdoc/check-property-names": "error",
-    "jsdoc/check-values": "error",
-    "jsdoc/check-param-names": "warn",
-    // "jsdoc/require-param": "warn",
-    "jsdoc/require-param-description": "warn",
     "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
     "jsx-a11y/media-has-caption": "off",
     "react/display-name": "error",
@@ -82,30 +75,6 @@ module.exports = {
         "no-console": ["error"],
       },
     },
-    {
-      files: [
-        "**/*.test.ts",
-        "**/*.test.tsx",
-        "**/test.ts",
-        "**/test.tsx",
-        "**/test-**",
-      ],
-      rules: {
-        "jsdoc/no-types": "off",
-        "jsdoc/empty-tags": "off",
-        "jsdoc/check-property-names": "off",
-        "jsdoc/check-values": "off",
-        "jsdoc/check-param-names": "off",
-        "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,7 +3,6 @@
 [![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,8 +38,6 @@ 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,10 +181,7 @@ server {
 
 }
 
-# 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)
+# Convenience reverse proxy for the call.m.localhost domain to yarn dev --host
 server {
     listen                  80;
     listen                  [::]:80;
@@ -200,7 +197,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;
@@ -211,23 +208,8 @@ 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,8 +38,6 @@ 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,8 +38,6 @@ 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

config/otel_dev/README.md

@@ -1,12 +1,5 @@
 # OpenTelemetry Collector for development
 
-## Edit:
-
-Open telemetry has been removed in: https://github.com/element-hq/element-call/pull/3586
-Check this PR to get back the implementation or to use it as reference to add it back.
-
----
-
 This directory contains a docker compose file that starts a jaeger all-in-one instance
 with an in-memory database, along with a standalone OpenTelemetry collector that forwards
 traces into the jaeger. Jaeger has a built-in OpenTelemetry collector, but it can't be

dev-backend-docker-compose.yml

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

docs/self-hosting.md

@@ -152,40 +152,6 @@ 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]

knip.ts

@@ -34,6 +34,10 @@ export default {
     // then Knip will flag it as a false positive
     // https://github.com/webpro-nl/knip/issues/766
     "@vector-im/compound-web",
+    // We need this so that TypeScript is happy with @livekit/track-processors.
+    // This might be a bug in the LiveKit repo but for now we fix it on the
+    // Element Call side.
+    "@types/dom-mediacapture-transform",
     "matrix-widget-api",
   ],
   ignoreExportsUsedInFile: true,

locales/en/app.json

@@ -116,7 +116,6 @@
     "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": "Your authorization service for you media server (SFU) is not on the newest version",
     "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

@@ -42,13 +42,20 @@
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
-    "@formatjs/intl-durationformat": "^0.9.0",
+    "@formatjs/intl-durationformat": "^0.7.0",
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
     "@livekit/protocol": "^1.42.2",
-    "@livekit/track-processors": "^0.6.0 || ^0.7.1",
+    "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
+    "@opentelemetry/api": "^1.4.0",
+    "@opentelemetry/core": "^2.0.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.203.0",
+    "@opentelemetry/resources": "^2.0.0",
+    "@opentelemetry/sdk-trace-base": "^2.0.0",
+    "@opentelemetry/sdk-trace-web": "^2.0.0",
+    "@opentelemetry/semantic-conventions": "^1.25.1",
     "@playwright/test": "^1.57.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
@@ -62,6 +69,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
+    "@types/dom-mediacapture-transform": "^0.1.11",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
@@ -87,7 +95,6 @@
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-deprecate": "^0.8.2",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsdoc": "^61.5.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-matrix-org": "2.1.0",
     "eslint-plugin-react": "^7.29.4",
@@ -96,7 +103,7 @@
     "eslint-plugin-unicorn": "^56.0.0",
     "fetch-mock": "11.1.5",
     "global-jsdom": "^26.0.0",
-    "i18next": "^25.0.0",
+    "i18next": "^24.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^9.1.0",
     "jsdom": "^26.0.0",
@@ -104,7 +111,7 @@
     "livekit-client": "^2.13.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#2218ec4e3102e841ba3e794e1c492c0a5aa6c1c3",
     "matrix-widget-api": "^1.14.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
@@ -117,7 +124,7 @@
     "qrcode": "^1.5.4",
     "react": "19",
     "react-dom": "19",
-    "react-i18next": "^16.0.0 <16.1.0",
+    "react-i18next": "^15.0.0",
     "react-router-dom": "^7.0.0",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
@@ -125,7 +132,6 @@
     "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,6 +1,5 @@
 /*
 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/fixtures/widget-user.ts

@@ -1,19 +1,22 @@
 /*
 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 Page, test, expect, type JSHandle } from "@playwright/test";
+import {
+  type Browser,
+  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>;
 };
@@ -25,10 +28,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: {
@@ -62,91 +65,144 @@ const CONFIG_JSON = {
   },
 };
 
+/**
+ * Set the Element Call URL in the dev tool settings using `window.mxSettingsStore` via `page.evaluate`.
+ * @param page
+ */
+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>({
-  // allow per-test override: `widgetTest.use({ callType: "dm" })`
-  callType: ["room", { option: true }],
-  asWidget: async ({ browser, context, callType }, pUse) => {
+  asWidget: async ({ browser, context }, pUse) => {
     await context.route(`http://localhost:8081/config.json*`, async (route) => {
       await route.fulfill({ json: CONFIG_JSON });
     });
 
-    const brooksDisplayName = `brooks_${Date.now()}`;
-    const whistlerDisplayName = `whistler_${Date.now()}`;
+    const userA = `brooks_${Date.now()}`;
+    const userB = `whistler_${Date.now()}`;
 
     // Register users
     const {
       page: ewPage1,
       clientHandle: brooksClientHandle,
       mxId: brooksMxId,
-    } = await TestHelpers.registerUser(browser, brooksDisplayName);
+    } = await registerUser(browser, userA);
     const {
       page: ewPage2,
       clientHandle: whistlerClientHandle,
       mxId: whistlerMxId,
-    } = await TestHelpers.registerUser(browser, whistlerDisplayName);
+    } = await registerUser(browser, userB);
 
     // Invite the second user
-    if (callType === "room") {
-      await TestHelpers.createRoom("Welcome Room", ewPage1);
+    await ewPage1
+      .getByRole("navigation", { name: "Room list" })
+      .getByRole("button", { name: "New conversation" })
+      .click();
 
-      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("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();
 
-      // 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();
+    await ewPage1
+      .getByRole("button", { name: "Invite to this room", exact: true })
+      .click();
+    await expect(
+      ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
+    ).toBeVisible();
 
-      // 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();
+    // 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();
 
-      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();
-    }
+    // 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();
 
     // Renamed use to pUse, as a workaround for eslint error that was thinking this use was a react use.
     await pUse({
@@ -154,40 +210,12 @@ 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/widget/federated-call.test.ts

@@ -1,86 +0,0 @@
-/*
-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

@@ -1,104 +0,0 @@
-/*
-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

@@ -1,136 +0,0 @@
-/*
-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

@@ -1,279 +0,0 @@
-/*
-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

@@ -1,240 +0,0 @@
-/*
-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,40 +6,16 @@ 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 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 81234 --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
-```
+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.
 
 ## Widgets
 
-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:
+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:
 `/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>MatrixRTC Widget</title>
+    <title>Godot 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.rtc-application-type", // rtc application type
+          "com.github.toger5.godot-game",
         );
         console.info("createMatrixRTCSdk was created!");
       } catch (e) {
@@ -17,6 +17,16 @@
       }
       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");
@@ -28,13 +38,15 @@
         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) {
@@ -50,15 +62,22 @@
         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>
-      <button onclick="window.matrixRTCSdk.leave()">Leave</button>
-      <button onclick="window.matrixRTCSdk.sendData({ prop: 'Hello, world!' })">
+      <button onclick="window.matrixRTCSdk.leave();">Leave</button>
+      <button onclick="window.matrixRTCSdk.sendData({prop: 'Hello, world!'});">
         Send Text
       </button>
       <div id="members"></div>

sdk/main.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2025-2026 Element Creations Ltd.
+Copyright 2025 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -99,12 +99,14 @@ 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, {
-    audioEnabled: true,
-    videoEnabled: true,
-  });
+  const muteStates = new MuteStates(scope, mediaDevices, constant(true));
   const slot = { application, id };
-  const rtcSession = new MatrixRTCSession(client, room, slot);
+  const rtcSession = new MatrixRTCSession(
+    client,
+    room,
+    MatrixRTCSession.sessionMembershipsForSlot(room, slot),
+    slot,
+  );
   const callViewModel = createCallViewModel$(
     scope,
     rtcSession,

src/@types/dom-mediacapture-transform.d.ts

@@ -1,147 +0,0 @@
-/* eslint-disable */
-// The contents of this file below the line are copied from
-// @types/dom-mediacapture-transform, which is inlined here into Element Call so
-// that we can avoid the package's dependency on @types/dom-webcodecs, which is
-// broken in TypeScript 5.9.
-// (https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/74294)
-// If that issue is resolved, we can remove this file and return to depending on
-// @types/dom-mediacapture-transform.
-// -----------------------------------------------------------------------------
-
-// This project is licensed under the MIT license.
-// Copyrights are respective of each contributor listed at the beginning of each definition file.
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-// In general, these types are only available behind a command line flag or an origin trial in
-// Chrome 90+.
-
-// This API depends on WebCodecs.
-
-// Versioning:
-// Until the above-mentioned spec is finalized, the major version number is 0. Although not
-// necessary for version 0, consider incrementing the minor version number for breaking changes.
-
-// The following modify existing DOM types to allow defining type-safe APIs on audio and video tracks.
-
-/** Specialize MediaStreamTrack so that we can refer specifically to an audio track. */
-interface MediaStreamAudioTrack extends MediaStreamTrack {
-  readonly kind: "audio";
-  clone(): MediaStreamAudioTrack;
-}
-
-/** Specialize MediaStreamTrack so that we can refer specifically to a video track. */
-interface MediaStreamVideoTrack extends MediaStreamTrack {
-  readonly kind: "video";
-  clone(): MediaStreamVideoTrack;
-}
-
-/** Assert that getAudioTracks and getVideoTracks return the tracks with the appropriate kind. */
-interface MediaStream {
-  getAudioTracks(): MediaStreamAudioTrack[];
-  getVideoTracks(): MediaStreamVideoTrack[];
-}
-
-// The following were originally generated from the spec using
-// https://github.com/microsoft/TypeScript-DOM-lib-generator, then heavily modified.
-
-/**
- * A track sink that is capable of exposing the unencoded frames from the track to a
- * ReadableStream, and exposes a control channel for signals going in the oppposite direction.
- */
-interface MediaStreamTrackProcessor<T extends AudioData | VideoFrame> {
-  /**
-   * Allows reading the frames flowing through the MediaStreamTrack provided to the constructor.
-   */
-  readonly readable: ReadableStream<T>;
-  /** Allows sending control signals to the MediaStreamTrack provided to the constructor. */
-  readonly writableControl: WritableStream<MediaStreamTrackSignal>;
-}
-
-declare var MediaStreamTrackProcessor: {
-  prototype: MediaStreamTrackProcessor<any>;
-
-  /** Constructor overrides based on the type of track. */
-  new (
-    init: MediaStreamTrackProcessorInit & { track: MediaStreamAudioTrack },
-  ): MediaStreamTrackProcessor<AudioData>;
-  new (
-    init: MediaStreamTrackProcessorInit & { track: MediaStreamVideoTrack },
-  ): MediaStreamTrackProcessor<VideoFrame>;
-};
-
-interface MediaStreamTrackProcessorInit {
-  track: MediaStreamTrack;
-  /**
-   * If media frames are not read from MediaStreamTrackProcessor.readable quickly enough, the
-   * MediaStreamTrackProcessor will internally buffer up to maxBufferSize of the frames produced
-   * by the track. If the internal buffer is full, each time the track produces a new frame, the
-   * oldest frame in the buffer will be dropped and the new frame will be added to the buffer.
-   */
-  maxBufferSize?: number | undefined;
-}
-
-/**
- * Takes video frames as input, and emits control signals that result from subsequent processing.
- */
-interface MediaStreamTrackGenerator<
-  T extends AudioData | VideoFrame,
-> extends MediaStreamTrack {
-  /**
-   * Allows writing media frames to the MediaStreamTrackGenerator, which is itself a
-   * MediaStreamTrack. When a frame is written to writable, the frame’s close() method is
-   * automatically invoked, so that its internal resources are no longer accessible from
-   * JavaScript.
-   */
-  readonly writable: WritableStream<T>;
-  /**
-   * Allows reading control signals sent from any sinks connected to the
-   * MediaStreamTrackGenerator.
-   */
-  readonly readableControl: ReadableStream<MediaStreamTrackSignal>;
-}
-
-type MediaStreamAudioTrackGenerator = MediaStreamTrackGenerator<AudioData> &
-  MediaStreamAudioTrack;
-type MediaStreamVideoTrackGenerator = MediaStreamTrackGenerator<VideoFrame> &
-  MediaStreamVideoTrack;
-
-declare var MediaStreamTrackGenerator: {
-  prototype: MediaStreamTrackGenerator<any>;
-
-  /** Constructor overrides based on the type of track. */
-  new (
-    init: MediaStreamTrackGeneratorInit & {
-      kind: "audio";
-      signalTarget?: MediaStreamAudioTrack | undefined;
-    },
-  ): MediaStreamAudioTrackGenerator;
-  new (
-    init: MediaStreamTrackGeneratorInit & {
-      kind: "video";
-      signalTarget?: MediaStreamVideoTrack | undefined;
-    },
-  ): MediaStreamVideoTrackGenerator;
-};
-
-interface MediaStreamTrackGeneratorInit {
-  kind: MediaStreamTrackGeneratorKind;
-  /**
-   * (Optional) track to which the MediaStreamTrackGenerator will automatically forward control
-   * signals. If signalTarget is provided and signalTarget.kind and kind do not match, the
-   * MediaStreamTrackGenerator’s constructor will raise an exception.
-   */
-  signalTarget?: MediaStreamTrack | undefined;
-}
-
-type MediaStreamTrackGeneratorKind = "audio" | "video";
-
-type MediaStreamTrackSignalType = "request-frame";
-
-interface MediaStreamTrackSignal {
-  signalType: MediaStreamTrackSignalType;
-}

src/RTCConnectionStats.tsx

@@ -20,7 +20,6 @@ interface Props {
   audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   focusUrl?: string;
-  rtcBackendIdentity?: string;
 }
 
 const extractDomain = (url: string): string => {
@@ -38,7 +37,6 @@ export const RTCConnectionStats: FC<Props> = ({
   audio,
   video,
   focusUrl,
-  rtcBackendIdentity,
   ...rest
 }) => {
   const [showModal, setShowModal] = useState(false);
@@ -73,9 +71,6 @@ 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,6 +1,5 @@
 /*
 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.
@@ -257,6 +256,8 @@ describe("UrlParams", () => {
       skipLobby: false,
       returnToLobby: false,
       sendNotificationType: "notification",
+      defaultAudioEnabled: true,
+      defaultVideoEnabled: true,
     });
     it("use no-intent-defaults with unknown intent", () => {
       expect(computeUrlParams()).toMatchObject(noIntentDefaults);
@@ -394,6 +395,8 @@ describe("UrlParams", () => {
         expect.any(Object),
         "configuration:",
         expect.any(Object),
+        "intentAndPlatformDerivedConfiguration:",
+        {},
       );
     });
   });

src/UrlParams.ts

@@ -1,6 +1,5 @@
 /*
 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.
@@ -247,13 +246,24 @@ 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 {}
+export interface UrlParams
+  extends UrlProperties,
+    UrlConfiguration,
+    IntentAndPlatformDerivedConfiguration {}
 
 // 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
@@ -453,6 +463,29 @@ 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,
@@ -517,12 +550,15 @@ 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

@@ -13,7 +13,7 @@ exports[`AppBar > renders 1`] = `
         class="nav leftNav"
       >
         <button
-          aria-labelledby="_r_0_"
+          aria-labelledby="«r0»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           role="button"
@@ -21,7 +21,7 @@ exports[`AppBar > renders 1`] = `
           tabindex="0"
         >
           <div
-            class="_indicator-icon_147l5_17"
+            class="_indicator-icon_zr2a0_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg

src/__snapshots__/Modal.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`the content is rendered when the modal is open 1`] = `
 <div
-  aria-labelledby="radix-_r_4_"
+  aria-labelledby="radix-«r4»"
   class="overlay animate modal dialog _glass_sepwu_8"
   data-state="open"
-  id="radix-_r_3_"
+  id="radix-«r3»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -18,7 +18,7 @@ exports[`the content is rendered when the modal is open 1`] = `
     >
       <h2
         class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
-        id="radix-_r_4_"
+        id="radix-«r4»"
       >
         My modal
       </h2>
@@ -36,7 +36,7 @@ exports[`the content is rendered when the modal is open 1`] = `
 
 exports[`the modal renders as a drawer in mobile viewports 1`] = `
 <div
-  aria-labelledby="radix-_r_a_"
+  aria-labelledby="radix-«ra»"
   class="overlay modal drawer"
   data-state="open"
   data-vaul-animate="true"
@@ -45,7 +45,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   data-vaul-drawer=""
   data-vaul-drawer-direction="bottom"
   data-vaul-snap-points="false"
-  id="radix-_r_9_"
+  id="radix-«r9»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -60,7 +60,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
         class="handle"
       />
       <h2
-        id="radix-_r_a_"
+        id="radix-«ra»"
         style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
       >
         My modal

src/__snapshots__/Toast.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`Toast > renders 1`] = `
 <button
-  aria-labelledby="radix-_r_4_"
+  aria-labelledby="radix-«r4»"
   class="overlay animate toast"
   data-state="open"
-  id="radix-_r_3_"
+  id="radix-«r3»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -13,7 +13,7 @@ exports[`Toast > renders 1`] = `
 >
   <h3
     class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36"
-    id="radix-_r_4_"
+    id="radix-«r4»"
   >
     Hello world!
   </h3>

src/analytics/PosthogSpanProcessor.ts

@@ -0,0 +1,157 @@
+/*
+Copyright 2023, 2024 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 {
+  type SpanProcessor,
+  type ReadableSpan,
+  type Span,
+} from "@opentelemetry/sdk-trace-base";
+import { hrTimeToMilliseconds } from "@opentelemetry/core";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { PosthogAnalytics } from "./PosthogAnalytics";
+
+interface PrevCall {
+  callId: string;
+  hangupTs: number;
+}
+
+/**
+ * The maximum time between hanging up and joining the same call that we would
+ * consider a 'rejoin' on the user's part.
+ */
+const maxRejoinMs = 2 * 60 * 1000; // 2 minutes
+
+/**
+ * Span processor that extracts certain metrics from spans to send to PostHog
+ */
+export class PosthogSpanProcessor implements SpanProcessor {
+  public async forceFlush(): Promise<void> {}
+
+  public onStart(span: Span): void {
+    // Hack: Yield to allow attributes to be set before processing
+    try {
+      switch (span.name) {
+        case "matrix.groupCallMembership":
+          this.onGroupCallMembershipStart(span);
+          return;
+        case "matrix.groupCallMembership.summaryReport":
+          this.onSummaryReportStart(span);
+          return;
+      }
+    } catch (e) {
+      // log to avoid tripping @typescript-eslint/no-unused-vars
+      logger.debug(e);
+    }
+  }
+
+  public onEnd(span: ReadableSpan): void {
+    switch (span.name) {
+      case "matrix.groupCallMembership":
+        this.onGroupCallMembershipEnd(span);
+        return;
+    }
+  }
+
+  private get prevCall(): PrevCall | null {
+    // This is stored in localStorage so we can remember the previous call
+    // across app restarts
+    const data = localStorage.getItem("matrix-prev-call");
+    if (data === null) return null;
+
+    try {
+      return JSON.parse(data);
+    } catch (e) {
+      logger.warn("Invalid prev call data", data, "error:", e);
+      return null;
+    }
+  }
+
+  private set prevCall(data: PrevCall | null) {
+    localStorage.setItem("matrix-prev-call", JSON.stringify(data));
+  }
+
+  private onGroupCallMembershipStart(span: ReadableSpan): void {
+    const prevCall = this.prevCall;
+    const newCallId = span.attributes["matrix.confId"] as string;
+
+    // If the user joined the same call within a short time frame, log this as a
+    // rejoin. This is interesting as a call quality metric, since rejoins may
+    // indicate that users had to intervene to make the product work.
+    if (prevCall !== null && newCallId === prevCall.callId) {
+      const duration = hrTimeToMilliseconds(span.startTime) - prevCall.hangupTs;
+      if (duration <= maxRejoinMs) {
+        PosthogAnalytics.instance.trackEvent({
+          eventName: "Rejoin",
+          callId: prevCall.callId,
+          rejoinDuration: duration,
+        });
+      }
+    }
+  }
+
+  private onGroupCallMembershipEnd(span: ReadableSpan): void {
+    this.prevCall = {
+      callId: span.attributes["matrix.confId"] as string,
+      hangupTs: hrTimeToMilliseconds(span.endTime),
+    };
+  }
+
+  private onSummaryReportStart(span: ReadableSpan): void {
+    // Searching for an event like this:
+    //    matrix.stats.summary
+    //    matrix.stats.summary.percentageReceivedAudioMedia: 0.75
+    //    matrix.stats.summary.percentageReceivedMedia: 1
+    //    matrix.stats.summary.percentageReceivedVideoMedia: 0.75
+    //    matrix.stats.summary.maxJitter: 100
+    //    matrix.stats.summary.maxPacketLoss: 20
+    const event = span.events.find((e) => e.name === "matrix.stats.summary");
+    if (event !== undefined) {
+      const attributes = event.attributes;
+      if (attributes) {
+        const mediaReceived = `${attributes["matrix.stats.summary.percentageReceivedMedia"]}`;
+        const videoReceived = `${attributes["matrix.stats.summary.percentageReceivedVideoMedia"]}`;
+        const audioReceived = `${attributes["matrix.stats.summary.percentageReceivedAudioMedia"]}`;
+        const maxJitter = `${attributes["matrix.stats.summary.maxJitter"]}`;
+        const maxPacketLoss = `${attributes["matrix.stats.summary.maxPacketLoss"]}`;
+        const peerConnections = `${attributes["matrix.stats.summary.peerConnections"]}`;
+        const percentageConcealedAudio = `${attributes["matrix.stats.summary.percentageConcealedAudio"]}`;
+        const opponentUsersInCall = `${attributes["matrix.stats.summary.opponentUsersInCall"]}`;
+        const opponentDevicesInCall = `${attributes["matrix.stats.summary.opponentDevicesInCall"]}`;
+        const diffDevicesToPeerConnections = `${attributes["matrix.stats.summary.diffDevicesToPeerConnections"]}`;
+        const ratioPeerConnectionToDevices = `${attributes["matrix.stats.summary.ratioPeerConnectionToDevices"]}`;
+
+        PosthogAnalytics.instance.trackEvent(
+          {
+            eventName: "MediaReceived",
+            callId: span.attributes["matrix.confId"] as string,
+            mediaReceived: mediaReceived,
+            audioReceived: audioReceived,
+            videoReceived: videoReceived,
+            maxJitter: maxJitter,
+            maxPacketLoss: maxPacketLoss,
+            peerConnections: peerConnections,
+            percentageConcealedAudio: percentageConcealedAudio,
+            opponentUsersInCall: opponentUsersInCall,
+            opponentDevicesInCall: opponentDevicesInCall,
+            diffDevicesToPeerConnections: diffDevicesToPeerConnections,
+            ratioPeerConnectionToDevices: ratioPeerConnectionToDevices,
+          },
+          // Send instantly because the window might be closing
+          { send_instantly: true },
+        );
+      }
+    }
+  }
+
+  /**
+   * Shutdown the processor.
+   */
+  public async shutdown(): Promise<void> {
+    return Promise.resolve();
+  }
+}

src/analytics/RageshakeSpanProcessor.ts

@@ -0,0 +1,135 @@
+/*
+Copyright 2023, 2024 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 { type AttributeValue, type Attributes } from "@opentelemetry/api";
+import { hrTimeToMicroseconds } from "@opentelemetry/core";
+import {
+  type SpanProcessor,
+  type ReadableSpan,
+  type Span,
+} from "@opentelemetry/sdk-trace-base";
+
+const dumpAttributes = (
+  attr: Attributes,
+): {
+  key: string;
+  type:
+    | "string"
+    | "number"
+    | "bigint"
+    | "boolean"
+    | "symbol"
+    | "undefined"
+    | "object"
+    | "function";
+  value: AttributeValue | undefined;
+}[] =>
+  Object.entries(attr).map(([key, value]) => ({
+    key,
+    type: typeof value,
+    value,
+  }));
+
+/**
+ * Exports spans on demand to the Jaeger JSON format, which can be attached to
+ * rageshakes and loaded into analysis tools like Jaeger and Stalk.
+ */
+export class RageshakeSpanProcessor implements SpanProcessor {
+  private readonly spans: ReadableSpan[] = [];
+
+  public async forceFlush(): Promise<void> {}
+
+  public onStart(span: Span): void {
+    this.spans.push(span);
+  }
+
+  public onEnd(): void {}
+
+  /**
+   * Dumps the spans collected so far as Jaeger-compatible JSON.
+   */
+  public dump(): string {
+    const now = Date.now() * 1000; // Jaeger works in microseconds
+    const traces = new Map<string, ReadableSpan[]>();
+
+    // Organize spans by their trace IDs
+    for (const span of this.spans) {
+      const traceId = span.spanContext().traceId;
+      let trace = traces.get(traceId);
+
+      if (trace === undefined) {
+        trace = [];
+        traces.set(traceId, trace);
+      }
+
+      trace.push(span);
+    }
+
+    const processId = "p1";
+    const processes = {
+      [processId]: {
+        serviceName: "element-call",
+        tags: [],
+      },
+      warnings: null,
+    };
+
+    return JSON.stringify({
+      // Honestly not sure what some of these fields mean, I just know that
+      // they're present in Jaeger JSON exports
+      total: 0,
+      limit: 0,
+      offset: 0,
+      errors: null,
+      data: [...traces.entries()].map(([traceId, spans]) => ({
+        traceID: traceId,
+        warnings: null,
+        processes,
+        spans: spans.map((span) => {
+          const ctx = span.spanContext();
+          const startTime = hrTimeToMicroseconds(span.startTime);
+          // If the span has not yet ended, pretend that it ends now
+          const duration =
+            span.duration[0] === -1
+              ? now - startTime
+              : hrTimeToMicroseconds(span.duration);
+
+          return {
+            traceID: traceId,
+            spanID: ctx.spanId,
+            operationName: span.name,
+            processID: processId,
+            warnings: null,
+            startTime,
+            duration,
+            references:
+              span.parentSpanContext?.spanId === undefined
+                ? []
+                : [
+                    {
+                      refType: "CHILD_OF",
+                      traceID: traceId,
+                      spanID: span.parentSpanContext?.spanId,
+                    },
+                  ],
+            tags: dumpAttributes(span.attributes),
+            logs: span.events.map((event) => ({
+              timestamp: hrTimeToMicroseconds(event.time),
+              // The name of the event is in the "event" field, aparently.
+              fields: [
+                ...dumpAttributes(event.attributes ?? {}),
+                { key: "event", type: "string", value: event.name },
+              ],
+            })),
+          };
+        }),
+      })),
+    });
+  }
+
+  public async shutdown(): Promise<void> {}
+}

src/button/Button.tsx

@@ -1,6 +1,5 @@
 /*
 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.
@@ -36,7 +35,6 @@ export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        aria-label={label}
         Icon={Icon}
         kind={muted ? "primary" : "secondary"}
         {...props}
@@ -60,7 +58,6 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        aria-label={label}
         Icon={Icon}
         kind={muted ? "primary" : "secondary"}
         {...props}
@@ -105,7 +102,6 @@ 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/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -9,8 +9,8 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_bb_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    aria-labelledby="«rbb»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -43,8 +43,8 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_7m_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    aria-labelledby="«r7m»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -74,8 +74,8 @@ exports[`Can lower hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby="_r_36_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    aria-labelledby="«r36»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="secondary"
     data-size="lg"
     role="button"
@@ -108,8 +108,8 @@ exports[`Can open menu 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_0_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    aria-labelledby="«r0»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -139,8 +139,8 @@ exports[`Can raise hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby="_r_1j_"
-    class="_button_13vu4_8 raisedButton _has-icon_13vu4_60 _icon-only_13vu4_53"
+    aria-labelledby="«r1j»"
+    class="_button_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"

src/config/ConfigOptions.ts

@@ -1,6 +1,5 @@
 /*
 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.
@@ -164,6 +163,10 @@ export interface ResolvedConfigOptions extends ConfigOptions {
     };
   };
   ssla: string;
+  media_devices: {
+    enable_audio: boolean;
+    enable_video: boolean;
+  };
   app_prompt: boolean;
 }
 
@@ -178,5 +181,9 @@ 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,13 +6,11 @@ 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,10 +40,9 @@ export class MatrixKeyProvider extends BaseKeyProvider {
   }
 
   private onEncryptionKeyChanged = (
-    encryptionKey: Uint8Array<ArrayBuffer>,
+    encryptionKey: Uint8Array,
     encryptionKeyIndex: number,
-    membershipParts: CallMembershipIdentityParts,
-    rtcBackendIdentity: string,
+    participantId: string,
   ): void => {
     crypto.subtle
       .importKey("raw", encryptionKey, "HKDF", false, [
@@ -56,17 +53,17 @@ export class MatrixKeyProvider extends BaseKeyProvider {
         (keyMaterial) => {
           this.onSetEncryptionKey(
             keyMaterial,
-            rtcBackendIdentity,
+            participantId,
             encryptionKeyIndex,
           );
 
           logger.debug(
-            `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${rtcBackendIdentity} (before hash: ${membershipParts.userId}:${membershipParts.deviceId}) encryptionKeyIndex=${encryptionKeyIndex}`,
+            `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
           );
         },
         (e) => {
           logger.error(
-            `Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId before hash=${membershipParts.userId}:${membershipParts.deviceId} encryptionKeyIndex=${encryptionKeyIndex}`,
+            `Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
             e,
           );
         },

src/e2ee/sharedKeyManagement.ts

@@ -34,8 +34,8 @@ const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
 /**
- * An up-to-date shared key for the room. Either from local storage or the value from `setInitialValue`.
- * @param roomId The room ID we want the shared key for.
+ * An upto-date shared key for the room. Either from local storage or the value from `setInitialValue`.
+ * @param roomId
  * @param setInitialValue The value we get from the URL. The hook will overwrite the local storage value with this.
  * @returns [roomSharedKey, setRoomSharedKey] like a react useState hook.
  */

src/grid/Grid.tsx

@@ -200,11 +200,8 @@ interface Drag {
 
 export type DragCallback = (drag: Drag) => void;
 
-interface LayoutMemoProps<
-  LayoutModel,
-  TileModel,
-  R extends HTMLElement,
-> extends LayoutProps<LayoutModel, TileModel, R> {
+interface LayoutMemoProps<LayoutModel, TileModel, R extends HTMLElement>
+  extends LayoutProps<LayoutModel, TileModel, R> {
   Layout: ComponentType<LayoutProps<LayoutModel, TileModel, R>>;
 }
 

src/initializer.tsx

@@ -16,7 +16,7 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
-import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
+import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill";
 import {
   useLocation,
   useNavigationType,
@@ -26,6 +26,7 @@ import {
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
+import { ElementCallOpenTelemetry } from "./otel/otel";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 
@@ -100,6 +101,7 @@ enum LoadState {
 class DependencyLoadStates {
   public config: LoadState = LoadState.None;
   public sentry: LoadState = LoadState.None;
+  public openTelemetry: LoadState = LoadState.None;
 
   public allDepsAreLoaded(): boolean {
     return !Object.values(this).some((s) => s !== LoadState.Loaded);
@@ -121,7 +123,7 @@ export class Initializer {
     }
 
     if (shouldPolyfillDurationFormat()) {
-      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force.js"));
+      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force"));
     }
 
     await Promise.all(polyfills);
@@ -264,6 +266,15 @@ export class Initializer {
       this.loadStates.sentry = LoadState.Loaded;
     }
 
+    // OpenTelemetry (also only after config loaded)
+    if (
+      this.loadStates.openTelemetry === LoadState.None &&
+      this.loadStates.config === LoadState.Loaded
+    ) {
+      ElementCallOpenTelemetry.globalInit();
+      this.loadStates.openTelemetry = LoadState.Loaded;
+    }
+
     if (this.loadStates.allDepsAreLoaded()) {
       // resolve if there is no dependency that is not loaded
       resolve();

src/livekit/MatrixAudioRenderer.tsx

@@ -15,6 +15,7 @@ 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";
@@ -31,7 +32,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: string[];
+  validIdentities: ParticipantId[];
   /**
    * If set to `true`, mutes all audio tracks rendered by the component.
    * @remarks
@@ -78,7 +79,6 @@ 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`,
@@ -166,11 +166,7 @@ interface StereoPanAudioTrackProps {
  * It main purpose is to remount the AudioTrack component when switching from
  * audioContext to normal audio playback.
  * As of now the AudioTrack component does not support adding audio nodes while being mounted.
- * @param props The component props
- * @param props.trackRef The track reference
- * @param props.muted If the track should be muted
- * @param props.audioContext The audio context to use
- * @param props.audioNodes The audio nodes to use
+ * @param param0
  * @returns
  */
 function AudioTrackWithAudioNodes({

src/livekit/openIDSFU.test.ts

@@ -18,7 +18,6 @@ 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";
 
@@ -34,7 +33,6 @@ describe("getSFUConfigWithOpenID", () => {
     vitest.clearAllMocks();
     fetchMock.reset();
   });
-
   it("should handle fetching a token", async () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
@@ -44,7 +42,6 @@ describe("getSFUConfigWithOpenID", () => {
     });
     const config = await getSFUConfigWithOpenID(
       matrixClient,
-      ownMemberMock,
       "https://sfu.example.org",
       "!example_room_id",
     );
@@ -56,7 +53,6 @@ describe("getSFUConfigWithOpenID", () => {
     });
     void (await fetchMock.flush());
   });
-
   it("should fail if the SFU errors", async () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
@@ -67,12 +63,11 @@ describe("getSFUConfigWithOpenID", () => {
     try {
       await getSFUConfigWithOpenID(
         matrixClient,
-        ownMemberMock,
         "https://sfu.example.org",
         "!example_room_id",
       );
     } catch (ex) {
-      expect((ex as Error).message).toEqual(
+      expect(((ex as Error).cause as Error).message).toEqual(
         "SFU Config fetch failed with status code 500",
       );
       void (await fetchMock.flush());
@@ -81,104 +76,6 @@ 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 () => {
@@ -201,7 +98,6 @@ describe("getSFUConfigWithOpenID", () => {
     });
     const config = await getSFUConfigWithOpenID(
       matrixClient,
-      ownMemberMock,
       "https://sfu.example.org",
       "!example_room_id",
     );

src/livekit/openIDSFU.ts

@@ -5,21 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-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 { type IOpenIDToken, type MatrixClient } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
 
-import {
-  FailToGetOpenIdToken,
-  NoMatrix2AuthorizationService,
-} from "../utils/errors";
+import { FailToGetOpenIdToken } 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.
@@ -28,7 +18,6 @@ export interface SFUConfig {
   url: string;
   jwt: string;
   livekitAlias: string;
-  // NOTE: Currently unused.
   livekitIdentity: string;
 }
 
@@ -74,33 +63,16 @@ export type OpenIDClientParts = Pick<
  * Gets a bearer token from the homeserver and then use it to authenticate
  * 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 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 aquire the jwt token.
- * @param opts.forceJwtEndpoint This will use the old jwt endpoint which will create the rtc backend identity based on string concatination
- * 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.
+ * @param client
+ * @param serviceUrl
+ * @param matrixRoomId
  * @returns Object containing the token information
  * @throws FailToGetOpenIdToken
  */
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
-  membership: CallMembershipIdentityParts,
   serviceUrl: string,
-  roomId: string,
-  opts?: {
-    forceJwtEndpoint?: JwtEndpointVersion;
-    delayEndpointBaseUrl?: string;
-    delayId?: string;
-  },
-  logger?: Logger,
+  matrixRoomId: string,
 ): Promise<SFUConfig> {
   let openIdToken: IOpenIDToken;
   try {
@@ -112,67 +84,16 @@ 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}...`);
-
-  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: forceOldJwtEndpoint is set to false, 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");
-  }
+  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.`);
 
   // Pull the details from the JWT
   const [, payloadStr] = sfuConfig.jwt.split(".");
@@ -183,108 +104,33 @@ 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(
-  deviceId: string,
+  client: OpenIDClientParts,
   livekitServiceURL: string,
-  matrixRoomId: string,
+  roomName: string,
   openIDToken: IOpenIDToken,
 ): Promise<{ url: string; jwt: string }> {
-  let res: Response | undefined;
-  await retryNetworkOperation(RETRIES, async () => {
-    res = await fetch(livekitServiceURL + "/sfu/get", {
+  try {
+    const res = await fetch(livekitServiceURL + "/sfu/get", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        // This is the actual livekit room alias. For the legacy jwt endpoint simply the room id was used.
-        room: matrixRoomId,
+        room: roomName,
         openid_token: openIDToken,
-        device_id: deviceId,
+        device_id: client.getDeviceId(),
       }),
     });
-  });
-  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);
+    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 });
   }
-  return await res.json();
 }

src/otel/OTelCall.ts

@@ -0,0 +1,188 @@
+/*
+Copyright 2023, 2024 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 { type Span } from "@opentelemetry/api";
+import { type MatrixCall } from "matrix-js-sdk";
+import { CallEvent } from "matrix-js-sdk/lib/webrtc/call";
+import {
+  type TransceiverStats,
+  type CallFeedStats,
+} from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+
+import { ObjectFlattener } from "./ObjectFlattener";
+import { ElementCallOpenTelemetry } from "./otel";
+import { type OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+import { OTelCallTransceiverMediaStreamSpan } from "./OTelCallTransceiverMediaStreamSpan";
+import { OTelCallFeedMediaStreamSpan } from "./OTelCallFeedMediaStreamSpan";
+
+type StreamId = string;
+type MID = string;
+
+/**
+ * Tracks an individual call within a group call, either to a full-mesh peer or a focus
+ */
+export class OTelCall {
+  private readonly trackFeedSpan = new Map<
+    StreamId,
+    OTelCallAbstractMediaStreamSpan
+  >();
+  private readonly trackTransceiverSpan = new Map<
+    MID,
+    OTelCallAbstractMediaStreamSpan
+  >();
+
+  public constructor(
+    public userId: string,
+    public deviceId: string,
+    public call: MatrixCall,
+    public span: Span,
+  ) {
+    if (call.peerConn) {
+      this.addCallPeerConnListeners();
+    } else {
+      this.call.once(
+        CallEvent.PeerConnectionCreated,
+        this.addCallPeerConnListeners,
+      );
+    }
+  }
+
+  public dispose(): void {
+    this.call.peerConn?.removeEventListener(
+      "connectionstatechange",
+      this.onCallConnectionStateChanged,
+    );
+    this.call.peerConn?.removeEventListener(
+      "signalingstatechange",
+      this.onCallSignalingStateChanged,
+    );
+    this.call.peerConn?.removeEventListener(
+      "iceconnectionstatechange",
+      this.onIceConnectionStateChanged,
+    );
+    this.call.peerConn?.removeEventListener(
+      "icegatheringstatechange",
+      this.onIceGatheringStateChanged,
+    );
+    this.call.peerConn?.removeEventListener(
+      "icecandidateerror",
+      this.onIceCandidateError,
+    );
+  }
+
+  private addCallPeerConnListeners = (): void => {
+    this.call.peerConn?.addEventListener(
+      "connectionstatechange",
+      this.onCallConnectionStateChanged,
+    );
+    this.call.peerConn?.addEventListener(
+      "signalingstatechange",
+      this.onCallSignalingStateChanged,
+    );
+    this.call.peerConn?.addEventListener(
+      "iceconnectionstatechange",
+      this.onIceConnectionStateChanged,
+    );
+    this.call.peerConn?.addEventListener(
+      "icegatheringstatechange",
+      this.onIceGatheringStateChanged,
+    );
+    this.call.peerConn?.addEventListener(
+      "icecandidateerror",
+      this.onIceCandidateError,
+    );
+  };
+
+  public onCallConnectionStateChanged = (): void => {
+    this.span.addEvent("matrix.call.callConnectionStateChange", {
+      callConnectionState: this.call.peerConn?.connectionState,
+    });
+  };
+
+  public onCallSignalingStateChanged = (): void => {
+    this.span.addEvent("matrix.call.callSignalingStateChange", {
+      callSignalingState: this.call.peerConn?.signalingState,
+    });
+  };
+
+  public onIceConnectionStateChanged = (): void => {
+    this.span.addEvent("matrix.call.iceConnectionStateChange", {
+      iceConnectionState: this.call.peerConn?.iceConnectionState,
+    });
+  };
+
+  public onIceGatheringStateChanged = (): void => {
+    this.span.addEvent("matrix.call.iceGatheringStateChange", {
+      iceGatheringState: this.call.peerConn?.iceGatheringState,
+    });
+  };
+
+  public onIceCandidateError = (ev: Event): void => {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(ev, flatObject, "error.", 0);
+
+    this.span.addEvent("matrix.call.iceCandidateError", flatObject);
+  };
+
+  public onCallFeedStats(callFeeds: CallFeedStats[]): void {
+    let prvFeeds: StreamId[] = [...this.trackFeedSpan.keys()];
+
+    callFeeds.forEach((feed) => {
+      if (!this.trackFeedSpan.has(feed.stream)) {
+        this.trackFeedSpan.set(
+          feed.stream,
+          new OTelCallFeedMediaStreamSpan(
+            ElementCallOpenTelemetry.instance,
+            this.span,
+            feed,
+          ),
+        );
+      }
+      this.trackFeedSpan.get(feed.stream)?.update(feed);
+      prvFeeds = prvFeeds.filter((prvStreamId) => prvStreamId !== feed.stream);
+    });
+
+    prvFeeds.forEach((prvStreamId) => {
+      this.trackFeedSpan.get(prvStreamId)?.end();
+      this.trackFeedSpan.delete(prvStreamId);
+    });
+  }
+
+  public onTransceiverStats(transceiverStats: TransceiverStats[]): void {
+    let prvTransSpan: MID[] = [...this.trackTransceiverSpan.keys()];
+
+    transceiverStats.forEach((transStats) => {
+      if (!this.trackTransceiverSpan.has(transStats.mid)) {
+        this.trackTransceiverSpan.set(
+          transStats.mid,
+          new OTelCallTransceiverMediaStreamSpan(
+            ElementCallOpenTelemetry.instance,
+            this.span,
+            transStats,
+          ),
+        );
+      }
+      this.trackTransceiverSpan.get(transStats.mid)?.update(transStats);
+      prvTransSpan = prvTransSpan.filter(
+        (prvStreamId) => prvStreamId !== transStats.mid,
+      );
+    });
+
+    prvTransSpan.forEach((prvMID) => {
+      this.trackTransceiverSpan.get(prvMID)?.end();
+      this.trackTransceiverSpan.delete(prvMID);
+    });
+  }
+
+  public end(): void {
+    this.trackFeedSpan.forEach((feedSpan) => feedSpan.end());
+    this.trackTransceiverSpan.forEach((transceiverSpan) =>
+      transceiverSpan.end(),
+    );
+    this.span.end();
+  }
+}

src/otel/OTelCallAbstractMediaStreamSpan.ts

@@ -0,0 +1,69 @@
+/*
+Copyright 2023, 2024 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 opentelemetry, { type Span } from "@opentelemetry/api";
+import { type TrackStats } from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+
+import { type ElementCallOpenTelemetry } from "./otel";
+import { OTelCallMediaStreamTrackSpan } from "./OTelCallMediaStreamTrackSpan";
+
+type TrackId = string;
+
+export abstract class OTelCallAbstractMediaStreamSpan {
+  protected readonly trackSpans = new Map<
+    TrackId,
+    OTelCallMediaStreamTrackSpan
+  >();
+  public readonly span;
+
+  public constructor(
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly callSpan: Span,
+    protected readonly type: string,
+  ) {
+    const ctx = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      callSpan,
+    );
+    const options = {
+      links: [
+        {
+          context: callSpan.spanContext(),
+        },
+      ],
+    };
+    this.span = oTel.tracer.startSpan(this.type, options, ctx);
+  }
+
+  protected upsertTrackSpans(tracks: TrackStats[]): void {
+    let prvTracks: TrackId[] = [...this.trackSpans.keys()];
+    tracks.forEach((t) => {
+      if (!this.trackSpans.has(t.id)) {
+        this.trackSpans.set(
+          t.id,
+          new OTelCallMediaStreamTrackSpan(this.oTel, this.span, t),
+        );
+      }
+      this.trackSpans.get(t.id)?.update(t);
+      prvTracks = prvTracks.filter((prvTrackId) => prvTrackId !== t.id);
+    });
+
+    prvTracks.forEach((prvTrackId) => {
+      this.trackSpans.get(prvTrackId)?.end();
+      this.trackSpans.delete(prvTrackId);
+    });
+  }
+
+  public abstract update(data: object): void;
+
+  public end(): void {
+    this.trackSpans.forEach((tSpan) => {
+      tSpan.end();
+    });
+    this.span.end();
+  }
+}

src/otel/OTelCallFeedMediaStreamSpan.ts

@@ -0,0 +1,64 @@
+/*
+Copyright 2023, 2024 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 { type Span } from "@opentelemetry/api";
+import {
+  type CallFeedStats,
+  type TrackStats,
+} from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+
+import { type ElementCallOpenTelemetry } from "./otel";
+import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+
+export class OTelCallFeedMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {
+  private readonly prev: { isAudioMuted: boolean; isVideoMuted: boolean };
+
+  public constructor(
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly callSpan: Span,
+    callFeed: CallFeedStats,
+  ) {
+    const postFix =
+      callFeed.type === "local" && callFeed.prefix === "from-call-feed"
+        ? "(clone)"
+        : "";
+    super(oTel, callSpan, `matrix.call.feed.${callFeed.type}${postFix}`);
+    this.span.setAttribute("feed.streamId", callFeed.stream);
+    this.span.setAttribute("feed.type", callFeed.type);
+    this.span.setAttribute("feed.readFrom", callFeed.prefix);
+    this.span.setAttribute("feed.purpose", callFeed.purpose);
+    this.prev = {
+      isAudioMuted: callFeed.isAudioMuted,
+      isVideoMuted: callFeed.isVideoMuted,
+    };
+    this.span.addEvent("matrix.call.feed.initState", this.prev);
+  }
+
+  public update(callFeed: CallFeedStats): void {
+    if (this.prev.isAudioMuted !== callFeed.isAudioMuted) {
+      this.span.addEvent("matrix.call.feed.audioMuted", {
+        isAudioMuted: callFeed.isAudioMuted,
+      });
+      this.prev.isAudioMuted = callFeed.isAudioMuted;
+    }
+    if (this.prev.isVideoMuted !== callFeed.isVideoMuted) {
+      this.span.addEvent("matrix.call.feed.isVideoMuted", {
+        isVideoMuted: callFeed.isVideoMuted,
+      });
+      this.prev.isVideoMuted = callFeed.isVideoMuted;
+    }
+
+    const trackStats: TrackStats[] = [];
+    if (callFeed.video) {
+      trackStats.push(callFeed.video);
+    }
+    if (callFeed.audio) {
+      trackStats.push(callFeed.audio);
+    }
+    this.upsertTrackSpans(trackStats);
+  }
+}

src/otel/OTelCallMediaStreamTrackSpan.ts

@@ -0,0 +1,69 @@
+/*
+Copyright 2023, 2024 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 { type TrackStats } from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+import opentelemetry, { type Span } from "@opentelemetry/api";
+
+import { type ElementCallOpenTelemetry } from "./otel";
+
+export class OTelCallMediaStreamTrackSpan {
+  private readonly span: Span;
+  private prev: TrackStats;
+
+  public constructor(
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly streamSpan: Span,
+    data: TrackStats,
+  ) {
+    const ctx = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      streamSpan,
+    );
+    const options = {
+      links: [
+        {
+          context: streamSpan.spanContext(),
+        },
+      ],
+    };
+    const type = `matrix.call.track.${data.label}.${data.kind}`;
+    this.span = oTel.tracer.startSpan(type, options, ctx);
+    this.span.setAttribute("track.trackId", data.id);
+    this.span.setAttribute("track.kind", data.kind);
+    this.span.setAttribute("track.constrainDeviceId", data.constrainDeviceId);
+    this.span.setAttribute("track.settingDeviceId", data.settingDeviceId);
+    this.span.setAttribute("track.label", data.label);
+
+    this.span.addEvent("matrix.call.track.initState", {
+      readyState: data.readyState,
+      muted: data.muted,
+      enabled: data.enabled,
+    });
+    this.prev = data;
+  }
+
+  public update(data: TrackStats): void {
+    if (this.prev.muted !== data.muted) {
+      this.span.addEvent("matrix.call.track.muted", { muted: data.muted });
+    }
+    if (this.prev.enabled !== data.enabled) {
+      this.span.addEvent("matrix.call.track.enabled", {
+        enabled: data.enabled,
+      });
+    }
+    if (this.prev.readyState !== data.readyState) {
+      this.span.addEvent("matrix.call.track.readyState", {
+        readyState: data.readyState,
+      });
+    }
+    this.prev = data;
+  }
+
+  public end(): void {
+    this.span.end();
+  }
+}

src/otel/OTelCallTransceiverMediaStreamSpan.ts

@@ -0,0 +1,61 @@
+/*
+Copyright 2023, 2024 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 { type Span } from "@opentelemetry/api";
+import {
+  type TrackStats,
+  type TransceiverStats,
+} from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+
+import { type ElementCallOpenTelemetry } from "./otel";
+import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+
+export class OTelCallTransceiverMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {
+  private readonly prev: {
+    direction: string;
+    currentDirection: string;
+  };
+
+  public constructor(
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly callSpan: Span,
+    stats: TransceiverStats,
+  ) {
+    super(oTel, callSpan, `matrix.call.transceiver.${stats.mid}`);
+    this.span.setAttribute("transceiver.mid", stats.mid);
+
+    this.prev = {
+      direction: stats.direction,
+      currentDirection: stats.currentDirection,
+    };
+    this.span.addEvent("matrix.call.transceiver.initState", this.prev);
+  }
+
+  public update(stats: TransceiverStats): void {
+    if (this.prev.currentDirection !== stats.currentDirection) {
+      this.span.addEvent("matrix.call.transceiver.currentDirection", {
+        currentDirection: stats.currentDirection,
+      });
+      this.prev.currentDirection = stats.currentDirection;
+    }
+    if (this.prev.direction !== stats.direction) {
+      this.span.addEvent("matrix.call.transceiver.direction", {
+        direction: stats.direction,
+      });
+      this.prev.direction = stats.direction;
+    }
+
+    const trackStats: TrackStats[] = [];
+    if (stats.sender) {
+      trackStats.push(stats.sender);
+    }
+    if (stats.receiver) {
+      trackStats.push(stats.receiver);
+    }
+    this.upsertTrackSpans(trackStats);
+  }
+}

src/otel/OTelGroupCallMembership.ts

@@ -0,0 +1,477 @@
+/*
+Copyright 2023, 2024 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 opentelemetry, {
+  type Span,
+  type Attributes,
+  type Context,
+} from "@opentelemetry/api";
+import {
+  type GroupCall,
+  type MatrixClient,
+  type MatrixEvent,
+  type RoomMember,
+} from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
+import {
+  type CallError,
+  type CallState,
+  type MatrixCall,
+  type VoipEvent,
+} from "matrix-js-sdk/lib/webrtc/call";
+import {
+  type CallsByUserAndDevice,
+  type GroupCallError,
+  GroupCallEvent,
+  type GroupCallStatsReport,
+} from "matrix-js-sdk/lib/webrtc/groupCall";
+import {
+  type ConnectionStatsReport,
+  type ByteSentStatsReport,
+  type SummaryStatsReport,
+  type CallFeedReport,
+} from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+
+import { ElementCallOpenTelemetry } from "./otel";
+import { ObjectFlattener } from "./ObjectFlattener";
+import { OTelCall } from "./OTelCall";
+
+/**
+ * Represent the span of time which we intend to be joined to a group call
+ */
+export class OTelGroupCallMembership {
+  private callMembershipSpan?: Span;
+  private groupCallContext?: Context;
+  private myUserId = "unknown";
+  private myDeviceId: string;
+  private myMember?: RoomMember;
+  private callsByCallId = new Map<string, OTelCall>();
+  private statsReportSpan: {
+    span: Span | undefined;
+    stats: OTelStatsReportEvent[];
+  };
+  private readonly speakingSpans = new Map<RoomMember, Map<string, Span>>();
+
+  public constructor(
+    private groupCall: GroupCall,
+    client: MatrixClient,
+  ) {
+    const clientId = client.getUserId();
+    if (clientId) {
+      this.myUserId = clientId;
+      const myMember = groupCall.room.getMember(clientId);
+      if (myMember) {
+        this.myMember = myMember;
+      }
+    }
+    this.myDeviceId = client.getDeviceId() || "unknown";
+    this.statsReportSpan = { span: undefined, stats: [] };
+    this.groupCall.on(GroupCallEvent.CallsChanged, this.onCallsChanged);
+  }
+
+  public dispose(): void {
+    this.groupCall.removeListener(
+      GroupCallEvent.CallsChanged,
+      this.onCallsChanged,
+    );
+  }
+
+  public onJoinCall(): void {
+    if (!ElementCallOpenTelemetry.instance) return;
+    if (this.callMembershipSpan !== undefined) {
+      logger.warn("Call membership span is already started");
+      return;
+    }
+
+    // Create the main span that tracks the time we intend to be in the call
+    this.callMembershipSpan =
+      ElementCallOpenTelemetry.instance.tracer.startSpan(
+        "matrix.groupCallMembership",
+      );
+    this.callMembershipSpan.setAttribute(
+      "matrix.confId",
+      this.groupCall.groupCallId,
+    );
+    this.callMembershipSpan.setAttribute("matrix.userId", this.myUserId);
+    this.callMembershipSpan.setAttribute("matrix.deviceId", this.myDeviceId);
+    this.callMembershipSpan.setAttribute(
+      "matrix.displayName",
+      this.myMember ? this.myMember.name : "unknown-name",
+    );
+
+    this.groupCallContext = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      this.callMembershipSpan,
+    );
+
+    this.callMembershipSpan?.addEvent("matrix.joinCall");
+  }
+
+  public onLeaveCall(): void {
+    if (this.callMembershipSpan === undefined) {
+      logger.warn("Call membership span is already ended");
+      return;
+    }
+
+    this.callMembershipSpan.addEvent("matrix.leaveCall");
+    // and end the span to indicate we've left
+    this.callMembershipSpan.end();
+    this.callMembershipSpan = undefined;
+    this.groupCallContext = undefined;
+  }
+
+  public onUpdateRoomState(event: MatrixEvent): void {
+    if (
+      !event ||
+      (!event.getType().startsWith("m.call") &&
+        !event.getType().startsWith("org.matrix.msc3401.call"))
+    ) {
+      return;
+    }
+
+    this.callMembershipSpan?.addEvent(
+      `matrix.roomStateEvent_${event.getType()}`,
+      ObjectFlattener.flattenVoipEvent(event.getContent()),
+    );
+  }
+
+  public onCallsChanged(calls: CallsByUserAndDevice): void {
+    for (const [userId, userCalls] of calls.entries()) {
+      for (const [deviceId, call] of userCalls.entries()) {
+        if (!this.callsByCallId.has(call.callId)) {
+          if (ElementCallOpenTelemetry.instance) {
+            const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
+              `matrix.call`,
+              undefined,
+              this.groupCallContext,
+            );
+            // XXX: anonymity
+            span.setAttribute("matrix.call.target.userId", userId);
+            span.setAttribute("matrix.call.target.deviceId", deviceId);
+            const displayName =
+              this.groupCall.room.getMember(userId)?.name ?? "unknown";
+            span.setAttribute("matrix.call.target.displayName", displayName);
+            this.callsByCallId.set(
+              call.callId,
+              new OTelCall(userId, deviceId, call, span),
+            );
+          }
+        }
+      }
+    }
+
+    for (const callTrackingInfo of this.callsByCallId.values()) {
+      const userCalls = calls.get(callTrackingInfo.userId);
+      if (
+        !userCalls ||
+        !userCalls.has(callTrackingInfo.deviceId) ||
+        userCalls.get(callTrackingInfo.deviceId)?.callId !==
+          callTrackingInfo.call.callId
+      ) {
+        callTrackingInfo.end();
+        this.callsByCallId.delete(callTrackingInfo.call.callId);
+      }
+    }
+  }
+
+  public onCallStateChange(call: MatrixCall, newState: CallState): void {
+    const callTrackingInfo = this.callsByCallId.get(call.callId);
+    if (!callTrackingInfo) {
+      logger.error(`Got call state change for unknown call ID ${call.callId}`);
+      return;
+    }
+
+    callTrackingInfo.span.addEvent("matrix.call.stateChange", {
+      state: newState,
+    });
+  }
+
+  public onSendEvent(call: MatrixCall, event: VoipEvent): void {
+    const eventType = event.eventType as string;
+    if (
+      !eventType.startsWith("m.call") &&
+      !eventType.startsWith("org.matrix.call")
+    )
+      return;
+
+    const callTrackingInfo = this.callsByCallId.get(call.callId);
+    if (!callTrackingInfo) {
+      logger.error(`Got call send event for unknown call ID ${call.callId}`);
+      return;
+    }
+
+    if (event.type === "toDevice") {
+      callTrackingInfo.span.addEvent(
+        `matrix.sendToDeviceEvent_${event.eventType}`,
+        ObjectFlattener.flattenVoipEvent(event),
+      );
+    } else if (event.type === "sendEvent") {
+      callTrackingInfo.span.addEvent(
+        `matrix.sendToRoomEvent_${event.eventType}`,
+        ObjectFlattener.flattenVoipEvent(event),
+      );
+    }
+  }
+
+  public onReceivedVoipEvent(event: MatrixEvent): void {
+    // These come straight from CallEventHandler so don't have
+    // a call already associated (in principle we could receive
+    // events for calls we don't know about).
+    const callId = event.getContent().call_id;
+    if (!callId) {
+      this.callMembershipSpan?.addEvent("matrix.receive_voip_event_no_callid", {
+        "sender.userId": event.getSender(),
+      });
+      logger.error("Received call event with no call ID!");
+      return;
+    }
+
+    const call = this.callsByCallId.get(callId);
+    if (!call) {
+      this.callMembershipSpan?.addEvent(
+        "matrix.receive_voip_event_unknown_callid",
+        {
+          "sender.userId": event.getSender(),
+        },
+      );
+      logger.error("Received call event for unknown call ID " + callId);
+      return;
+    }
+
+    call.span.addEvent("matrix.receive_voip_event", {
+      "sender.userId": event.getSender(),
+      ...ObjectFlattener.flattenVoipEvent(event.getContent()),
+    });
+  }
+
+  public onToggleMicrophoneMuted(newValue: boolean): void {
+    this.callMembershipSpan?.addEvent("matrix.toggleMicMuted", {
+      "matrix.microphone.muted": newValue,
+    });
+  }
+
+  public onSetMicrophoneMuted(setMuted: boolean): void {
+    this.callMembershipSpan?.addEvent("matrix.setMicMuted", {
+      "matrix.microphone.muted": setMuted,
+    });
+  }
+
+  public onToggleLocalVideoMuted(newValue: boolean): void {
+    this.callMembershipSpan?.addEvent("matrix.toggleVidMuted", {
+      "matrix.video.muted": newValue,
+    });
+  }
+
+  public onSetLocalVideoMuted(setMuted: boolean): void {
+    this.callMembershipSpan?.addEvent("matrix.setVidMuted", {
+      "matrix.video.muted": setMuted,
+    });
+  }
+
+  public onToggleScreensharing(newValue: boolean): void {
+    this.callMembershipSpan?.addEvent("matrix.setVidMuted", {
+      "matrix.screensharing.enabled": newValue,
+    });
+  }
+
+  public onSpeaking(
+    member: RoomMember,
+    deviceId: string,
+    speaking: boolean,
+  ): void {
+    if (speaking) {
+      // Ensure that there's an audio activity span for this speaker
+      let deviceMap = this.speakingSpans.get(member);
+      if (deviceMap === undefined) {
+        deviceMap = new Map();
+        this.speakingSpans.set(member, deviceMap);
+      }
+
+      if (!deviceMap.has(deviceId)) {
+        const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
+          "matrix.audioActivity",
+          undefined,
+          this.groupCallContext,
+        );
+        span.setAttribute("matrix.userId", member.userId);
+        span.setAttribute("matrix.displayName", member.rawDisplayName);
+
+        deviceMap.set(deviceId, span);
+      }
+    } else {
+      // End the audio activity span for this speaker, if any
+      const deviceMap = this.speakingSpans.get(member);
+      deviceMap?.get(deviceId)?.end();
+      deviceMap?.delete(deviceId);
+
+      if (deviceMap?.size === 0) this.speakingSpans.delete(member);
+    }
+  }
+
+  public onCallError(error: CallError, call: MatrixCall): void {
+    const callTrackingInfo = this.callsByCallId.get(call.callId);
+    if (!callTrackingInfo) {
+      logger.error(`Got error for unknown call ID ${call.callId}`);
+      return;
+    }
+
+    callTrackingInfo.span.recordException(error);
+  }
+
+  public onGroupCallError(error: GroupCallError): void {
+    this.callMembershipSpan?.recordException(error);
+  }
+
+  public onUndecryptableToDevice(event: MatrixEvent): void {
+    this.callMembershipSpan?.addEvent("matrix.toDevice.undecryptable", {
+      "sender.userId": event.getSender(),
+    });
+  }
+
+  public onCallFeedStatsReport(
+    report: GroupCallStatsReport<CallFeedReport>,
+  ): void {
+    if (!ElementCallOpenTelemetry.instance) return;
+    let call: OTelCall | undefined;
+    const callId = report.report?.callId;
+
+    if (callId) {
+      call = this.callsByCallId.get(callId);
+    }
+
+    if (!call) {
+      this.callMembershipSpan?.addEvent(
+        OTelStatsReportType.CallFeedReport + "_unknown_callId",
+        {
+          "call.callId": callId,
+          "call.opponentMemberId": report.report?.opponentMemberId
+            ? report.report?.opponentMemberId
+            : "unknown",
+        },
+      );
+      logger.error(
+        `Received ${OTelStatsReportType.CallFeedReport} with unknown call ID: ${callId}`,
+      );
+      return;
+    } else {
+      call.onCallFeedStats(report.report.callFeeds);
+      call.onTransceiverStats(report.report.transceiver);
+    }
+  }
+
+  public onConnectionStatsReport(
+    statsReport: GroupCallStatsReport<ConnectionStatsReport>,
+  ): void {
+    this.buildCallStatsSpan(
+      OTelStatsReportType.ConnectionReport,
+      statsReport.report,
+    );
+  }
+
+  public onByteSentStatsReport(
+    statsReport: GroupCallStatsReport<ByteSentStatsReport>,
+  ): void {
+    this.buildCallStatsSpan(
+      OTelStatsReportType.ByteSentReport,
+      statsReport.report,
+    );
+  }
+
+  public buildCallStatsSpan(
+    type: OTelStatsReportType,
+    report: ByteSentStatsReport | ConnectionStatsReport,
+  ): void {
+    if (!ElementCallOpenTelemetry.instance) return;
+    let call: OTelCall | undefined;
+    const callId = report?.callId;
+
+    if (callId) {
+      call = this.callsByCallId.get(callId);
+    }
+
+    if (!call) {
+      this.callMembershipSpan?.addEvent(type + "_unknown_callid", {
+        "call.callId": callId,
+        "call.opponentMemberId": report.opponentMemberId
+          ? report.opponentMemberId
+          : "unknown",
+      });
+      logger.error(`Received ${type} with unknown call ID: ${callId}`);
+      return;
+    }
+    const data = ObjectFlattener.flattenReportObject(type, report);
+    const ctx = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      call.span,
+    );
+
+    const options = {
+      links: [
+        {
+          context: call.span.spanContext(),
+        },
+      ],
+    };
+
+    const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
+      type,
+      options,
+      ctx,
+    );
+
+    span.setAttribute("matrix.callId", callId ?? "unknown");
+    span.setAttribute(
+      "matrix.opponentMemberId",
+      report.opponentMemberId ? report.opponentMemberId : "unknown",
+    );
+    span.addEvent("matrix.call.connection_stats_event", data);
+    span.end();
+  }
+
+  public onSummaryStatsReport(
+    statsReport: GroupCallStatsReport<SummaryStatsReport>,
+  ): void {
+    if (!ElementCallOpenTelemetry.instance) return;
+
+    const type = OTelStatsReportType.SummaryReport;
+    const data = ObjectFlattener.flattenSummaryStatsReportObject(statsReport);
+    if (this.statsReportSpan.span === undefined && this.callMembershipSpan) {
+      const ctx = opentelemetry.trace.setSpan(
+        opentelemetry.context.active(),
+        this.callMembershipSpan,
+      );
+      const span = ElementCallOpenTelemetry.instance?.tracer.startSpan(
+        "matrix.groupCallMembership.summaryReport",
+        undefined,
+        ctx,
+      );
+      if (span === undefined) {
+        return;
+      }
+      span.setAttribute("matrix.confId", this.groupCall.groupCallId);
+      span.setAttribute("matrix.userId", this.myUserId);
+      span.setAttribute(
+        "matrix.displayName",
+        this.myMember ? this.myMember.name : "unknown-name",
+      );
+      span.addEvent(type, data);
+      span.end();
+    }
+  }
+}
+
+interface OTelStatsReportEvent {
+  type: OTelStatsReportType;
+  data: Attributes;
+}
+
+enum OTelStatsReportType {
+  ConnectionReport = "matrix.call.stats.connection",
+  ByteSentReport = "matrix.call.stats.byteSent",
+  SummaryReport = "matrix.stats.summary",
+  CallFeedReport = "matrix.stats.call_feed",
+}

src/otel/ObjectFlattener.test.ts

@@ -0,0 +1,266 @@
+/*
+Copyright 2023, 2024 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 { type GroupCallStatsReport } from "matrix-js-sdk/lib/webrtc/groupCall";
+import {
+  type AudioConcealment,
+  type ByteSentStatsReport,
+  type ConnectionStatsReport,
+} from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+import { describe, expect, it } from "vitest";
+
+import { ObjectFlattener } from "../../src/otel/ObjectFlattener";
+
+describe("ObjectFlattener", () => {
+  const noConcealment: AudioConcealment = {
+    concealedAudio: 0,
+    totalAudioDuration: 0,
+  };
+
+  const statsReport: GroupCallStatsReport<ConnectionStatsReport> = {
+    report: {
+      callId: "callId",
+      opponentMemberId: "opponentMemberId",
+      bandwidth: { upload: 426, download: 0 },
+      bitrate: {
+        upload: 426,
+        download: 0,
+        audio: {
+          upload: 124,
+          download: 0,
+        },
+        video: {
+          upload: 302,
+          download: 0,
+        },
+      },
+      packetLoss: {
+        total: 0,
+        download: 0,
+        upload: 0,
+      },
+      framerate: {
+        local: new Map([
+          ["LOCAL_AUDIO_TRACK_ID", 0],
+          ["LOCAL_VIDEO_TRACK_ID", 30],
+        ]),
+        remote: new Map([
+          ["REMOTE_AUDIO_TRACK_ID", 0],
+          ["REMOTE_VIDEO_TRACK_ID", 60],
+        ]),
+      },
+      resolution: {
+        local: new Map([
+          ["LOCAL_AUDIO_TRACK_ID", { height: -1, width: -1 }],
+          ["LOCAL_VIDEO_TRACK_ID", { height: 460, width: 780 }],
+        ]),
+        remote: new Map([
+          ["REMOTE_AUDIO_TRACK_ID", { height: -1, width: -1 }],
+          ["REMOTE_VIDEO_TRACK_ID", { height: 960, width: 1080 }],
+        ]),
+      },
+      jitter: new Map([
+        ["REMOTE_AUDIO_TRACK_ID", 2],
+        ["REMOTE_VIDEO_TRACK_ID", 50],
+      ]),
+      codec: {
+        local: new Map([
+          ["LOCAL_AUDIO_TRACK_ID", "opus"],
+          ["LOCAL_VIDEO_TRACK_ID", "v8"],
+        ]),
+        remote: new Map([
+          ["REMOTE_AUDIO_TRACK_ID", "opus"],
+          ["REMOTE_VIDEO_TRACK_ID", "v9"],
+        ]),
+      },
+      transport: [
+        {
+          ip: "ff11::5fa:abcd:999c:c5c5:50000",
+          type: "udp",
+          localIp: "2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
+          isFocus: true,
+          localCandidateType: "host",
+          remoteCandidateType: "host",
+          networkType: "ethernet",
+          rtt: NaN,
+        },
+        {
+          ip: "10.10.10.2:22222",
+          type: "tcp",
+          localIp: "10.10.10.100:33333",
+          isFocus: true,
+          localCandidateType: "srfx",
+          remoteCandidateType: "srfx",
+          networkType: "ethernet",
+          rtt: 0,
+        },
+      ],
+      audioConcealment: new Map([
+        ["REMOTE_AUDIO_TRACK_ID", noConcealment],
+        ["REMOTE_VIDEO_TRACK_ID", noConcealment],
+      ]),
+      totalAudioConcealment: noConcealment,
+    },
+  };
+
+  describe("on flattenObjectRecursive", () => {
+    it("should flatter an Map object", () => {
+      const flatObject = {};
+      ObjectFlattener.flattenObjectRecursive(
+        statsReport.report.resolution,
+        flatObject,
+        "matrix.call.stats.connection.resolution.",
+        0,
+      );
+      expect(flatObject).toEqual({
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.width":
+          -1,
+
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.height": 460,
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.width": 780,
+
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.width":
+          -1,
+
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.height": 960,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.width": 1080,
+      });
+    });
+    it("should flatter an Array object", () => {
+      const flatObject = {};
+      ObjectFlattener.flattenObjectRecursive(
+        statsReport.report.transport,
+        flatObject,
+        "matrix.call.stats.connection.transport.",
+        0,
+      );
+      expect(flatObject).toEqual({
+        "matrix.call.stats.connection.transport.0.ip":
+          "ff11::5fa:abcd:999c:c5c5:50000",
+        "matrix.call.stats.connection.transport.0.type": "udp",
+        "matrix.call.stats.connection.transport.0.localIp":
+          "2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
+        "matrix.call.stats.connection.transport.0.isFocus": true,
+        "matrix.call.stats.connection.transport.0.localCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.remoteCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.0.rtt": "NaN",
+        "matrix.call.stats.connection.transport.1.ip": "10.10.10.2:22222",
+        "matrix.call.stats.connection.transport.1.type": "tcp",
+        "matrix.call.stats.connection.transport.1.localIp":
+          "10.10.10.100:33333",
+        "matrix.call.stats.connection.transport.1.isFocus": true,
+        "matrix.call.stats.connection.transport.1.localCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.remoteCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.1.rtt": 0,
+      });
+    });
+  });
+
+  describe("on flattenReportObject Connection Stats", () => {
+    it("should flatten a Report to otel Attributes Object", () => {
+      expect(
+        ObjectFlattener.flattenReportObject(
+          "matrix.call.stats.connection",
+          statsReport.report,
+        ),
+      ).toEqual({
+        "matrix.call.stats.connection.callId": "callId",
+        "matrix.call.stats.connection.opponentMemberId": "opponentMemberId",
+        "matrix.call.stats.connection.bandwidth.download": 0,
+        "matrix.call.stats.connection.bandwidth.upload": 426,
+        "matrix.call.stats.connection.bitrate.audio.download": 0,
+        "matrix.call.stats.connection.bitrate.audio.upload": 124,
+        "matrix.call.stats.connection.bitrate.download": 0,
+        "matrix.call.stats.connection.bitrate.upload": 426,
+        "matrix.call.stats.connection.bitrate.video.download": 0,
+        "matrix.call.stats.connection.bitrate.video.upload": 302,
+        "matrix.call.stats.connection.codec.local.LOCAL_AUDIO_TRACK_ID": "opus",
+        "matrix.call.stats.connection.codec.local.LOCAL_VIDEO_TRACK_ID": "v8",
+        "matrix.call.stats.connection.codec.remote.REMOTE_AUDIO_TRACK_ID":
+          "opus",
+        "matrix.call.stats.connection.codec.remote.REMOTE_VIDEO_TRACK_ID": "v9",
+        "matrix.call.stats.connection.framerate.local.LOCAL_AUDIO_TRACK_ID": 0,
+        "matrix.call.stats.connection.framerate.local.LOCAL_VIDEO_TRACK_ID": 30,
+        "matrix.call.stats.connection.framerate.remote.REMOTE_AUDIO_TRACK_ID": 0,
+        "matrix.call.stats.connection.framerate.remote.REMOTE_VIDEO_TRACK_ID": 60,
+        "matrix.call.stats.connection.jitter.REMOTE_AUDIO_TRACK_ID": 2,
+        "matrix.call.stats.connection.jitter.REMOTE_VIDEO_TRACK_ID": 50,
+        "matrix.call.stats.connection.packetLoss.download": 0,
+        "matrix.call.stats.connection.packetLoss.total": 0,
+        "matrix.call.stats.connection.packetLoss.upload": 0,
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.width":
+          -1,
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.height": 460,
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.width": 780,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.width":
+          -1,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.height": 960,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.width": 1080,
+        "matrix.call.stats.connection.transport.0.ip":
+          "ff11::5fa:abcd:999c:c5c5:50000",
+        "matrix.call.stats.connection.transport.0.type": "udp",
+        "matrix.call.stats.connection.transport.0.localIp":
+          "2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
+        "matrix.call.stats.connection.transport.0.isFocus": true,
+        "matrix.call.stats.connection.transport.0.localCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.remoteCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.0.rtt": "NaN",
+        "matrix.call.stats.connection.transport.1.ip": "10.10.10.2:22222",
+        "matrix.call.stats.connection.transport.1.type": "tcp",
+        "matrix.call.stats.connection.transport.1.localIp":
+          "10.10.10.100:33333",
+        "matrix.call.stats.connection.transport.1.isFocus": true,
+        "matrix.call.stats.connection.transport.1.localCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.remoteCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.1.rtt": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_AUDIO_TRACK_ID.concealedAudio": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_AUDIO_TRACK_ID.totalAudioDuration": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_VIDEO_TRACK_ID.concealedAudio": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_VIDEO_TRACK_ID.totalAudioDuration": 0,
+        "matrix.call.stats.connection.totalAudioConcealment.concealedAudio": 0,
+        "matrix.call.stats.connection.totalAudioConcealment.totalAudioDuration": 0,
+      });
+    });
+  });
+
+  describe("on flattenByteSendStatsReportObject", () => {
+    const byteSentStatsReport = new Map<
+      string,
+      number
+    >() as ByteSentStatsReport;
+    byteSentStatsReport.callId = "callId";
+    byteSentStatsReport.opponentMemberId = "opponentMemberId";
+    byteSentStatsReport.set("4aa92608-04c6-428e-8312-93e17602a959", 132093);
+    byteSentStatsReport.set("a08e4237-ee30-4015-a932-b676aec894b1", 913448);
+
+    it("should flatten a Report to otel Attributes Object", () => {
+      expect(
+        ObjectFlattener.flattenReportObject(
+          "matrix.call.stats.bytesSend",
+          byteSentStatsReport,
+        ),
+      ).toEqual({
+        "matrix.call.stats.bytesSend.4aa92608-04c6-428e-8312-93e17602a959": 132093,
+        "matrix.call.stats.bytesSend.a08e4237-ee30-4015-a932-b676aec894b1": 913448,
+      });
+      expect(byteSentStatsReport.callId).toEqual("callId");
+      expect(byteSentStatsReport.opponentMemberId).toEqual("opponentMemberId");
+    });
+  });
+});

src/otel/ObjectFlattener.ts

@@ -0,0 +1,100 @@
+/*
+Copyright 2023, 2024 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 { type Attributes } from "@opentelemetry/api";
+import { type VoipEvent } from "matrix-js-sdk/lib/webrtc/call";
+import { type GroupCallStatsReport } from "matrix-js-sdk/lib/webrtc/groupCall";
+import {
+  type ByteSentStatsReport,
+  type ConnectionStatsReport,
+  type SummaryStatsReport,
+} from "matrix-js-sdk/lib/webrtc/stats/statsReport";
+
+export class ObjectFlattener {
+  public static flattenReportObject(
+    prefix: string,
+    report: ConnectionStatsReport | ByteSentStatsReport,
+  ): Attributes {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(report, flatObject, `${prefix}.`, 0);
+    return flatObject;
+  }
+
+  public static flattenByteSentStatsReportObject(
+    statsReport: GroupCallStatsReport<ByteSentStatsReport>,
+  ): Attributes {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(
+      statsReport.report,
+      flatObject,
+      "matrix.stats.bytesSent.",
+      0,
+    );
+    return flatObject;
+  }
+
+  public static flattenSummaryStatsReportObject(
+    statsReport: GroupCallStatsReport<SummaryStatsReport>,
+  ): Attributes {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(
+      statsReport.report,
+      flatObject,
+      "matrix.stats.summary.",
+      0,
+    );
+    return flatObject;
+  }
+
+  /* Flattens out an object into a single layer with components
+   * of the key separated by dots
+   */
+  public static flattenVoipEvent(event: VoipEvent): Attributes {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(
+      event as unknown as Record<string, unknown>, // XXX Types
+      flatObject,
+      "matrix.event.",
+      0,
+    );
+
+    return flatObject;
+  }
+
+  public static flattenObjectRecursive(
+    obj: object,
+    flatObject: Attributes,
+    prefix: string,
+    depth: number,
+  ): void {
+    if (depth > 10)
+      throw new Error(
+        "Depth limit exceeded: aborting VoipEvent recursion. Prefix is " +
+          prefix,
+      );
+    let entries;
+    if (obj instanceof Map) {
+      entries = obj.entries();
+    } else {
+      entries = Object.entries(obj);
+    }
+    for (const [k, v] of entries) {
+      if (["string", "number", "boolean"].includes(typeof v) || v === null) {
+        let value;
+        value = v === null ? "null" : v;
+        value = typeof v === "number" && Number.isNaN(v) ? "NaN" : value;
+        flatObject[prefix + k] = value;
+      } else if (typeof v === "object") {
+        ObjectFlattener.flattenObjectRecursive(
+          v,
+          flatObject,
+          prefix + k + ".",
+          depth + 1,
+        );
+      }
+    }
+  }
+}

src/otel/otel.test.ts

@@ -0,0 +1,79 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  expect,
+  describe,
+  it,
+  vi,
+  beforeEach,
+  beforeAll,
+  afterAll,
+} from "vitest";
+
+import { ElementCallOpenTelemetry } from "./otel";
+import { mockConfig } from "../utils/test";
+
+describe("ElementCallOpenTelemetry", () => {
+  describe("embedded package", () => {
+    beforeAll(() => {
+      vi.stubEnv("VITE_PACKAGE", "embedded");
+    });
+
+    beforeEach(() => {
+      mockConfig({});
+    });
+
+    afterAll(() => {
+      vi.unstubAllEnvs();
+    });
+
+    it("does not create instance without config value", () => {
+      ElementCallOpenTelemetry.globalInit();
+      expect(ElementCallOpenTelemetry.instance?.isOtlpEnabled).toBe(false);
+    });
+
+    it("ignores config value and does not create instance", () => {
+      mockConfig({
+        opentelemetry: {
+          collector_url: "https://collector.example.com.localhost",
+        },
+      });
+      ElementCallOpenTelemetry.globalInit();
+      expect(ElementCallOpenTelemetry.instance?.isOtlpEnabled).toBe(false);
+    });
+  });
+
+  describe("full package", () => {
+    beforeAll(() => {
+      vi.stubEnv("VITE_PACKAGE", "full");
+    });
+
+    beforeEach(() => {
+      mockConfig({});
+    });
+
+    afterAll(() => {
+      vi.unstubAllEnvs();
+    });
+
+    it("does not create instance without config value", () => {
+      ElementCallOpenTelemetry.globalInit();
+      expect(ElementCallOpenTelemetry.instance?.isOtlpEnabled).toBe(false);
+    });
+
+    it("creates instance with config value", () => {
+      mockConfig({
+        opentelemetry: {
+          collector_url: "https://collector.example.com.localhost",
+        },
+      });
+      ElementCallOpenTelemetry.globalInit();
+      expect(ElementCallOpenTelemetry.instance?.isOtlpEnabled).toBe(true);
+    });
+  });
+});

src/otel/otel.ts

@@ -0,0 +1,117 @@
+/*
+Copyright 2023, 2024 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 {
+  SimpleSpanProcessor,
+  type SpanProcessor,
+} from "@opentelemetry/sdk-trace-base";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
+import opentelemetry, { type Tracer } from "@opentelemetry/api";
+import { resourceFromAttributes } from "@opentelemetry/resources";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { PosthogSpanProcessor } from "../analytics/PosthogSpanProcessor";
+import { Config } from "../config/Config";
+import { RageshakeSpanProcessor } from "../analytics/RageshakeSpanProcessor";
+import { getRageshakeSubmitUrl } from "../settings/submit-rageshake";
+
+const SERVICE_NAME = "element-call";
+
+let sharedInstance: ElementCallOpenTelemetry;
+
+export class ElementCallOpenTelemetry {
+  private _provider: WebTracerProvider;
+  private _tracer: Tracer;
+  private otlpExporter?: OTLPTraceExporter;
+  public readonly rageshakeProcessor?: RageshakeSpanProcessor;
+
+  public static globalInit(): void {
+    // this is only supported in the full package as the is currently no support for passing in the collector URL from the widget host
+    const collectorUrl =
+      import.meta.env.VITE_PACKAGE === "full"
+        ? Config.get().opentelemetry?.collector_url
+        : undefined;
+    // we always enable opentelemetry in general. We only enable the OTLP
+    // collector if a URL is defined (and in future if another setting is defined)
+    // Posthog reporting is enabled or disabled
+    // within the posthog code.
+    const shouldEnableOtlp = Boolean(collectorUrl);
+
+    if (!sharedInstance || sharedInstance.isOtlpEnabled !== shouldEnableOtlp) {
+      logger.info("(Re)starting OpenTelemetry debug reporting");
+      sharedInstance?.dispose();
+
+      sharedInstance = new ElementCallOpenTelemetry(
+        collectorUrl,
+        getRageshakeSubmitUrl(),
+      );
+    }
+  }
+
+  public static get instance(): ElementCallOpenTelemetry {
+    return sharedInstance;
+  }
+
+  private constructor(
+    collectorUrl: string | undefined,
+    rageshakeUrl: string | undefined,
+  ) {
+    const spanProcessors: SpanProcessor[] = [];
+
+    if (collectorUrl) {
+      logger.info("Enabling OTLP collector with URL " + collectorUrl);
+      this.otlpExporter = new OTLPTraceExporter({
+        url: collectorUrl,
+      });
+      spanProcessors.push(new SimpleSpanProcessor(this.otlpExporter));
+    } else {
+      logger.info("OTLP collector disabled");
+    }
+
+    if (rageshakeUrl) {
+      this.rageshakeProcessor = new RageshakeSpanProcessor();
+      spanProcessors.push(this.rageshakeProcessor);
+    }
+
+    spanProcessors.push(new PosthogSpanProcessor());
+
+    this._provider = new WebTracerProvider({
+      resource: resourceFromAttributes({
+        // This is how we can make Jaeger show a reasonable service in the dropdown on the left.
+        [ATTR_SERVICE_NAME]: SERVICE_NAME,
+      }),
+      spanProcessors,
+    });
+
+    opentelemetry.trace.setGlobalTracerProvider(this._provider);
+    this._tracer = opentelemetry.trace.getTracer(
+      // This is not the serviceName shown in jaeger
+      "my-element-call-otl-tracer",
+    );
+  }
+
+  public dispose(): void {
+    opentelemetry.trace.disable();
+    this._provider?.shutdown().catch((e) => {
+      logger.error("Failed to shutdown OpenTelemetry", e);
+    });
+  }
+
+  public get isOtlpEnabled(): boolean {
+    return Boolean(this.otlpExporter);
+  }
+
+  public get tracer(): Tracer {
+    return this._tracer;
+  }
+
+  public get provider(): WebTracerProvider {
+    return this._provider;
+  }
+}

src/reactions/ReactionsReader.ts

@@ -135,10 +135,10 @@ export class ReactionsReader {
   }
 
   /**
-   * Fetches any hand wave reactions by the given sender on the given
+   * Fetchest any hand wave reactions by the given sender on the given
    * membership event.
-   * @param membershipEventId - The user membership event id.
-   * @param expectedSender - The expected sender of the reaction.
+   * @param membershipEventId
+   * @param expectedSender
    * @returns A MatrixEvent if one was found.
    */
   private getLastReactionEvent(

src/room/InCallView.test.tsx

@@ -1,6 +1,5 @@
 /*
 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.

src/room/InCallView.tsx

@@ -48,6 +48,7 @@ import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
+import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
@@ -113,10 +114,8 @@ const logger = rootLogger.getChild("[InCallView]");
 
 const maxTapDurationMs = 400;
 
-export interface ActiveCallProps extends Omit<
-  InCallViewProps,
-  "vm" | "livekitRoom" | "connState"
-> {
+export interface ActiveCallProps
+  extends Omit<InCallViewProps, "vm" | "livekitRoom" | "connState"> {
   e2eeSystem: EncryptionSystem;
   // TODO refactor those reasons into an enum
   onLeft: (
@@ -190,6 +189,7 @@ export interface InCallViewProps {
   matrixRoom: MatrixRoom;
   muteStates: MuteStates;
   header: HeaderStyle;
+  otelGroupCallMembership?: OTelGroupCallMembership;
   onShareClick: (() => void) | null;
 }
 
@@ -798,8 +798,6 @@ export const InCallView: FC<InCallViewProps> = ({
     </div>
   );
 
-  const allConnections = useBehavior(vm.allConnections$);
-
   return (
     <div
       className={styles.inRoom}
@@ -838,15 +836,8 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={closeSettings}
             tab={settingsTab}
             onTabChange={setSettingsTab}
-            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,
-              }))}
+            // TODO expose correct data to setttings modal
+            livekitRooms={[]}
           />
         </>
       )}

src/room/RoomPage.tsx

@@ -1,6 +1,5 @@
 /*
 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.
@@ -21,6 +20,8 @@ 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";
@@ -43,12 +44,10 @@ 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 } =
-    urlParams;
+    useUrlParams();
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -69,22 +68,15 @@ 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,
-        calculateInitialMuteState(
-          urlParams.skipLobby,
-          urlParams.callIntent,
-          widget !== null,
-        ),
-      ),
-    );
+    setMuteStates(new MuteStates(scope, devices, joined$));
     return (): void => scope.end();
-  }, [devices, urlParams]);
+  }, [devices, joined$]);
 
   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_1r8kr_8 icon"
+            class="_content_o77nw_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_13vu4_8"
+            class="_button_vczzf_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_13vu4_8 homeLink"
+            class="_button_vczzf_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_1r8kr_8 icon"
+            class="_content_o77nw_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_13vu4_8"
+            class="_button_vczzf_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_1r8kr_8 icon"
+            class="_content_o77nw_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_13vu4_8 homeLink"
+            class="_button_vczzf_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_1r8kr_8 icon"
+            class="_content_o77nw_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_13vu4_8 homeLink"
+            class="_button_vczzf_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_1r8kr_8 icon"
+            class="_content_o77nw_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_13vu4_8"
+            class="_button_vczzf_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_13vu4_8 homeLink"
+            class="_button_vczzf_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_1r8kr_8 icon"
+            class="_content_o77nw_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_13vu4_8 homeLink"
+            class="_button_vczzf_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_1r8kr_8 icon"
+            class="_content_o77nw_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_13vu4_8 homeLink"
+            class="_button_vczzf_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_zysgz_8 roomAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_1qbcf_8 roomAvatar _avatar-imageless_1qbcf_52"
             data-color="1"
             data-type="round"
             role="img"
@@ -34,7 +34,7 @@ exports[`InCallView > rendering > renders 1`] = `
               tabindex="0"
             >
               <svg
-                aria-labelledby="_r_0_"
+                aria-labelledby="«r0»"
                 class="lock"
                 data-encrypted="false"
                 fill="currentColor"
@@ -117,7 +117,7 @@ exports[`InCallView > rendering > renders 1`] = `
       data-show="false"
     >
       <div
-        class="_content_1r8kr_8 icon"
+        class="_content_o77nw_8 icon"
         data-size="large"
       >
         <svg
@@ -159,7 +159,7 @@ exports[`InCallView > rendering > renders 1`] = `
         Only works while using app
       </p>
       <button
-        class="_button_13vu4_8"
+        class="_button_vczzf_8"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -286,9 +286,8 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <button
           aria-disabled="true"
-          aria-label="Unmute microphone"
-          aria-labelledby="_r_8_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+          aria-labelledby="«r8»"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_mute"
@@ -310,9 +309,8 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-disabled="true"
-          aria-label="Start video"
-          aria-labelledby="_r_d_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+          aria-labelledby="«rd»"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_videomute"
@@ -333,8 +331,8 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="_r_i_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+          aria-labelledby="«ri»"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
           role="button"
@@ -354,9 +352,8 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-label="End call"
-          aria-labelledby="_r_n_"
-          class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"
+          aria-labelledby="«rn»"
+          class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -381,7 +378,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="toggle layout"
       >
         <input
-          aria-labelledby="_r_s_"
+          aria-labelledby="«rs»"
           name="layout"
           type="radio"
           value="spotlight"
@@ -399,7 +396,7 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="_r_11_"
+          aria-labelledby="«r11»"
           checked=""
           name="layout"
           type="radio"

src/room/useLoadGroupCall.ts

@@ -106,18 +106,22 @@ async function joinRoomAfterInvite(
 
 export class CallTerminatedMessage extends Error {
   /**
-   * Creates a new CallTerminatedMessage.
-   *
-   * @param icon The icon to display with the message
    * @param messageTitle The title of the call ended screen message (translated)
-   * @param messageBody The message explaining the kind of termination
-   * (kick, ban, knock reject, etc.) (translated)
-   * @param reason  The user-provided reason for the termination (kick/ban)
    */
   public constructor(
+    /**
+     * The icon to display with the message.
+     */
     public readonly icon: ComponentType<SVGAttributes<SVGElement>>,
     messageTitle: string,
+    /**
+     * The message explaining the kind of termination (kick, ban, knock reject,
+     * etc.) (translated)
+     */
     public readonly messageBody: string,
+    /**
+     * The user-provided reason for the termination (kick/ban)
+     */
     public readonly reason?: string,
   ) {
     super(messageTitle);

src/settings/DeveloperSettingsTab.module.css

@@ -8,14 +8,3 @@ 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,20 +25,17 @@ function createMockLivekitRoom(
   wsUrl: string,
   serverInfo: object,
   metadata: string,
-): { isLocal: boolean; url: string; room: LivekitRoom; livekitAlias: string } {
+): { isLocal: boolean; url: string; room: LivekitRoom } {
   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",
   };
 }
 
@@ -62,7 +59,6 @@ describe("DeveloperSettingsTab", () => {
       room: LivekitRoom;
       url: string;
       isLocal?: boolean;
-      livekitAlias: string;
     }[] = [
       createMockLivekitRoom(
         "wss://local-sfu.example.org",
@@ -71,11 +67,8 @@ 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,7 +29,6 @@ import {
   Label,
   RadioControl,
 } from "@vector-im/compound-web";
-import { type Room as LivekitRoom } from "livekit-client";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
@@ -43,17 +42,13 @@ 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;
-    livekitAlias?: string;
-  }[];
+  livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
   env: ImportMetaEnv;
 }
 
@@ -280,8 +275,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
           name={matrixRTCModeRadioGroup}
           control={
             <RadioControl
-              checked={matrixRTCMode === MatrixRTCMode.Compatibility}
-              value={MatrixRTCMode.Compatibility}
+              checked={matrixRTCMode === MatrixRTCMode.Compatibil}
+              value={MatrixRTCMode.Compatibil}
               onChange={onMatrixRTCModeChange}
             />
           }
@@ -309,14 +304,12 @@ export const DeveloperSettingsTab: FC<Props> = ({
         </InlineField>
       </Form>
       {livekitRooms?.map((livekitRoom) => (
-        <div className={styles.livekit_room_box}>
-          <h4>
+        <>
+          <h3>
             {t("developer_mode.livekit_sfu", {
               url: livekitRoom.url || "unknown",
             })}
-          </h4>
-          <p>LivekitAlias: {livekitRoom.livekitAlias}</p>
-          <p>connectionState (wont hot reload): {livekitRoom.room.state}</p>
+          </h3>
           {livekitRoom.isLocal && <p>ws-url: {localSfuUrl?.href}</p>}
           <p>
             {t("developer_mode.livekit_server_info")}(
@@ -328,19 +321,7 @@ 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

@@ -24,7 +24,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       class="field inputField"
     >
       <input
-        aria-describedby="_r_1_"
+        aria-describedby="«r1»"
         id="duplicateTiles"
         min="0"
         type="number"
@@ -44,7 +44,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       class="field checkboxField"
     >
       <input
-        aria-describedby="_r_2_"
+        aria-describedby="«r2»"
         id="debugTileLayout"
         type="checkbox"
       />
@@ -81,7 +81,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       class="field checkboxField"
     >
       <input
-        aria-describedby="_r_3_"
+        aria-describedby="«r3»"
         id="showConnectionStats"
         type="checkbox"
       />
@@ -118,7 +118,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       class="field checkboxField"
     >
       <input
-        aria-describedby="_r_4_"
+        aria-describedby="«r4»"
         id="muteAllAudio"
         type="checkbox"
       />
@@ -156,7 +156,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       class="field checkboxField"
     >
       <input
-        aria-describedby="_r_5_"
+        aria-describedby="«r5»"
         id="alwaysShowIphoneEarpiece"
         type="checkbox"
       />
@@ -195,7 +195,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     >
       <label
         class="_label_19upo_59"
-        for="radix-_r_6_"
+        for="radix-«r6»"
       >
         Custom Livekit-url
       </label>
@@ -203,9 +203,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_controls_17lij_8"
       >
         <input
-          aria-describedby="radix-_r_7_"
+          aria-describedby="radix-«r7»"
           class="_control_sqdq4_10"
-          id="radix-_r_6_"
+          id="radix-«r6»"
           name="input"
           title=""
           value=""
@@ -213,7 +213,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       </div>
       <span
         class="_message_19upo_85 _help-message_19upo_91"
-        id="radix-_r_7_"
+        id="radix-«r7»"
       >
         Currently, no overwrite is set. Url from well-known or config is used.
       </span>
@@ -234,20 +234,20 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1qhtc_10"
+          class="_container_1e0uz_10"
         >
           <input
-            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
+            aria-describedby="radix-«r9» radix-«rb» radix-«rd»"
             checked=""
-            class="_input_1qhtc_18"
-            id="radix-_r_8_"
-            name="_r_0_"
+            class="_input_1e0uz_18"
+            id="radix-«r8»"
+            name="«r0»"
             title=""
             type="radio"
             value="legacy"
           />
           <div
-            class="_ui_1qhtc_19"
+            class="_ui_1e0uz_19"
           />
         </div>
       </div>
@@ -256,13 +256,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_19upo_59"
-          for="radix-_r_8_"
+          for="radix-«r8»"
         >
           Legacy: state events & oldest membership SFU
         </label>
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_9_"
+          id="radix-«r9»"
         >
           Compatible with old versions of EC that do not support multi SFU
         </span>
@@ -275,19 +275,19 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1qhtc_10"
+          class="_container_1e0uz_10"
         >
           <input
-            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
-            class="_input_1qhtc_18"
-            id="radix-_r_a_"
-            name="_r_0_"
+            aria-describedby="radix-«r9» radix-«rb» radix-«rd»"
+            class="_input_1e0uz_18"
+            id="radix-«ra»"
+            name="«r0»"
             title=""
             type="radio"
-            value="compatibility"
+            value="compatibil"
           />
           <div
-            class="_ui_1qhtc_19"
+            class="_ui_1e0uz_19"
           />
         </div>
       </div>
@@ -296,13 +296,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_19upo_59"
-          for="radix-_r_a_"
+          for="radix-«ra»"
         >
           Compatibility: state events & multi SFU
         </label>
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_b_"
+          id="radix-«rb»"
         >
           Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
         </span>
@@ -315,19 +315,19 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1qhtc_10"
+          class="_container_1e0uz_10"
         >
           <input
-            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
-            class="_input_1qhtc_18"
-            id="radix-_r_c_"
-            name="_r_0_"
+            aria-describedby="radix-«r9» radix-«rb» radix-«rd»"
+            class="_input_1e0uz_18"
+            id="radix-«rc»"
+            name="«r0»"
             title=""
             type="radio"
             value="matrix_2_0"
           />
           <div
-            class="_ui_1qhtc_19"
+            class="_ui_1e0uz_19"
           />
         </div>
       </div>
@@ -336,105 +336,59 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_19upo_59"
-          for="radix-_r_c_"
+          for="radix-«rc»"
         >
           Matrix 2.0: sticky events & multi SFU
         </label>
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_d_"
+          id="radix-«rd»"
         >
           Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
         </span>
       </div>
     </div>
   </form>
-  <div
-    class="livekit_room_box"
+  <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"
   >
-    <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>
-    <p>
-      Local Participant
-    </p>
-    <pre
-      class="pre"
-    >
-      localParticipantIdentity
-    </pre>
-    <p>
-      Remote Participants
-    </p>
-    <ul />
-  </div>
-  <div
-    class="livekit_room_box"
+    local-metadata
+  </pre>
+  <h3>
+    LiveKit SFU: wss://remote-sfu.example.org
+  </h3>
+  <p>
+    LiveKit Server Info
+    (
+    remote
+    )
+  </p>
+  <pre
+    class="pre"
   >
-    <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>
-    <p>
-      Local Participant
-    </p>
-    <pre
-      class="pre"
-    >
-      localParticipantIdentity
-    </pre>
-    <p>
-      Remote Participants
-    </p>
-    <ul />
-  </div>
+    remote-metadata
+  </pre>
   <p>
     Environment variables
   </p>

src/settings/rageshake.ts

@@ -99,7 +99,7 @@ class ConsoleLogger extends EventEmitter {
 
   /**
    * Returns the log lines to flush to disk and empties the internal log buffer
-   * @return \n delimited log lines
+   * @return {string} \n delimited log lines
    */
   public popLogs(): string {
     const logsToFlush = this.logs;
@@ -109,7 +109,7 @@ class ConsoleLogger extends EventEmitter {
 
   /**
    * Returns lines currently in the log buffer without removing them
-   * @return \n delimited log lines
+   * @return {string} \n delimited log lines
    */
   public peekLogs(): string {
     return this.logs;
@@ -139,7 +139,7 @@ class IndexedDBLogStore {
   }
 
   /**
-   * @return Resolves when the store is ready.
+   * @return {Promise} Resolves when the store is ready.
    */
   public async connect(): Promise<void> {
     const req = this.indexedDB.open("logs");
@@ -219,7 +219,7 @@ class IndexedDBLogStore {
    * This guarantees that we will always eventually do a flush when flush() is
    * called.
    *
-   * @return Resolved when the logs have been flushed.
+   * @return {Promise} Resolved when the logs have been flushed.
    */
   public flush = async (): Promise<void> => {
     // check if a flush() operation is ongoing
@@ -270,7 +270,7 @@ class IndexedDBLogStore {
    * returned are deleted at the same time, so this can be called at startup
    * to do house-keeping to keep the logs from growing too large.
    *
-   * @return Resolves to an array of objects. The array is
+   * @return {Promise<Object[]>} Resolves to an array of objects. The array is
    * sorted in time (oldest first) based on when the log file was created (the
    * log ID). The objects have said log ID in an "id" field and "lines" which
    * is a big string with all the new-line delimited logs.
@@ -421,12 +421,12 @@ class IndexedDBLogStore {
 
 /**
  * Helper method to collect results from a Cursor and promiseify it.
- * @param store - The store to perform openCursor on.
- * @param keyRange - Optional key range to apply on the cursor.
- * @param resultMapper - A function which is repeatedly called with a
+ * @param {ObjectStore|Index} store The store to perform openCursor on.
+ * @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor.
+ * @param {Function} resultMapper A function which is repeatedly called with a
  * Cursor.
  * Return the data you want to keep.
- * @return Resolves to an array of whatever you returned from
+ * @return {Promise<T[]>} Resolves to an array of whatever you returned from
  * resultMapper.
  */
 async function selectQuery<T>(
@@ -464,7 +464,9 @@ declare global {
 /**
  * Configure rage shaking support for sending bug reports.
  * Modifies globals.
- * @return Resolves when set up.
+ * @param {boolean} setUpPersistence When true (default), the persistence will
+ * be set up immediately for the logs.
+ * @return {Promise} Resolves when set up.
  */
 export async function init(): Promise<void> {
   global.mx_rage_logger = new ConsoleLogger();
@@ -501,7 +503,7 @@ export async function init(): Promise<void> {
 /**
  * Try to start up the rageshake storage for logs. If not possible (client unsupported)
  * then this no-ops.
- * @return Resolves when complete.
+ * @return {Promise} Resolves when complete.
  */
 async function tryInitStorage(): Promise<void> {
   if (global.mx_rage_initStoragePromise) {
@@ -534,7 +536,7 @@ async function tryInitStorage(): Promise<void> {
 /**
  * Get a recent snapshot of the logs, ready for attaching to a bug report
  *
- * @return list of log data
+ * @return {LogEntry[]}  list of log data
  */
 export async function getLogsForReport(): Promise<LogEntry[]> {
   if (!global.mx_rage_logger) {

src/settings/settings.ts

@@ -126,13 +126,7 @@ export const alwaysShowIphoneEarpiece = new Setting<boolean>(
 
 export enum MatrixRTCMode {
   Legacy = "legacy",
-  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
-   */
+  Compatibil = "compatibil",
   Matrix_2_0 = "matrix_2_0",
 }
 

src/settings/submit-rageshake.ts

@@ -17,6 +17,7 @@ import { type CryptoApi } from "matrix-js-sdk/lib/crypto-api";
 import { getLogsForReport } from "./rageshake";
 import { useClient } from "../ClientContext";
 import { Config } from "../config/Config";
+import { ElementCallOpenTelemetry } from "../otel/otel";
 import { type RageshakeRequestModal } from "../room/RageshakeRequestModal";
 import { getUrlParams } from "../UrlParams";
 
@@ -273,6 +274,14 @@ export function useSubmitRageshake(
           for (const entry of logs) {
             body.append("compressed-log", await gzip(entry.lines), entry.id);
           }
+
+          body.append(
+            "file",
+            await gzip(
+              ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump(),
+            ),
+            "traces.json.gz",
+          );
         }
 
         if (opts.rageshakeRequestId) {

src/state/CallViewModel/CallNotificationLifecycle.ts

@@ -81,7 +81,7 @@ export interface Props {
   localUser: { deviceId: string; userId: string };
 }
 /**
- * @returns two observables:
+ * @returns {callPickupState$, autoLeave$}
  * `callPickupState$` The current call pickup state of the call.
  *  - "unknown": The client has not yet sent the notification event. We don't know if it will because it first needs to send its own membership.
  *     Then we can conclude if we were the first one to join or not.

src/state/CallViewModel/CallViewModel.test.ts

@@ -78,14 +78,11 @@ vi.mock("../e2ee/matrixKeyProvider");
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../UrlParams", () => ({ getUrlParams }));
 
-vi.mock(
-  "../state/CallViewModel/localMember/localTransport",
-  async (importOriginal) => ({
-    ...(await importOriginal()),
-    makeTransport: async (): Promise<LivekitTransport> =>
-      Promise.resolve(exampleTransport),
-  }),
-);
+vi.mock("../rtcSessionHelpers", async (importOriginal) => ({
+  ...(await importOriginal()),
+  makeTransport: async (): Promise<LivekitTransport> =>
+    Promise.resolve(exampleTransport),
+}));
 
 const yesNo = {
   y: true,
@@ -235,7 +232,7 @@ const mockLegacyRingEvent = {} as { event_id: string } & ICallNotifyContent;
 
 describe.each([
   [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
+  [MatrixRTCMode.Compatibil],
   [MatrixRTCMode.Matrix_2_0],
 ])("CallViewModel (%s mode)", (mode) => {
   const withCallViewModel = withCallViewModelInMode(mode);
@@ -1258,6 +1255,11 @@ 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,13 +41,10 @@ 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 {
   LocalUserMediaViewModel,
@@ -101,7 +98,7 @@ import {
   type SpotlightLandscapeLayoutMedia,
   type SpotlightPortraitLayoutMedia,
 } from "../layout-types.ts";
-import { ElementCallError, UnknownCallError } from "../../utils/errors.ts";
+import { ElementCallError } from "../../utils/errors.ts";
 import { type ObservableScope } from "../ObservableScope.ts";
 import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts";
 import {
@@ -109,24 +106,18 @@ import {
   enterRTCSession,
   TransportState,
 } from "./localMember/LocalMember.ts";
-import {
-  createLocalTransport$,
-  JwtEndpointVersion,
-} from "./localMember/LocalTransport.ts";
+import { createLocalTransport$ } from "./localMember/LocalTransport.ts";
 import {
   createMemberships$,
   membershipsAndTransports$,
 } from "../SessionBehaviors.ts";
 import { ECConnectionFactory } from "./remoteMembers/ConnectionFactory.ts";
-import {
-  type ConnectionManagerData,
-  createConnectionManager$,
-} from "./remoteMembers/ConnectionManager.ts";
+import { createConnectionManager$ } from "./remoteMembers/ConnectionManager.ts";
 import {
   createMatrixLivekitMembers$,
+  type TaggedParticipant,
   type LocalMatrixLivekitMember,
   type RemoteMatrixLivekitMember,
-  type MatrixLivekitMember,
 } from "./remoteMembers/MatrixLivekitMembers.ts";
 import {
   type AutoLeaveReason,
@@ -270,7 +261,6 @@ 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[]>;
@@ -391,11 +381,8 @@ export function createCallViewModel$(
   trackProcessorState$: Behavior<ProcessorState>,
 ): CallViewModel {
   const client = matrixRoom.client;
-  const userId = client.getUserId();
-  const deviceId = client.getDeviceId();
-  if (!(userId && deviceId))
-    throw new UnknownCallError(new Error("userId and deviceId are required"));
-
+  const userId = client.getUserId()!;
+  const deviceId = client.getDeviceId()!;
   const livekitKeyProvider = getE2eeKeyProvider(
     options.encryptionSystem,
     matrixRTCSession,
@@ -428,37 +415,11 @@ 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,
-        ) as Observable<string | undefined>
-      ).pipe(map((v) => v ?? 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)),
     ),
@@ -478,20 +439,30 @@ export function createCallViewModel$(
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
-    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);
-        }),
+    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,
+          ]);
+        },
       ),
     ),
-    remoteTransports$: membershipsAndTransports.transports$,
-    logger: logger,
-    ownMembershipIdentity,
+    logger,
   });
 
   const matrixLivekitMembers$ = createMatrixLivekitMembers$({
@@ -522,13 +493,13 @@ export function createCallViewModel$(
     joinMatrixRTC: (transport: LivekitTransport) => {
       return enterRTCSession(
         matrixRTCSession,
-        ownMembershipIdentity,
         transport,
         connectOptions$.value,
       );
     },
     createPublisherFactory: (connection: Connection) => {
       return new Publisher(
+        scope,
         connection,
         mediaDevices,
         muteStates,
@@ -633,14 +604,15 @@ export function createCallViewModel$(
     ),
   );
 
-  const allConnections$ = scope.behavior(
-    connectionManager.connectionManagerData$.pipe(map((d) => d.value)),
-  );
   const livekitRoomItems$ = scope.behavior(
     matrixLivekitMembers$.pipe(
-      switchMap((members) => {
+      tap((val) => {
+        logger.debug("matrixLivekitMembers$ updated", val.value);
+      }),
+      switchMap((membersWithEpoch) => {
+        const members = membersWithEpoch.value;
         const a$ = combineLatest(
-          members.value.map((member) =>
+          members.map((member) =>
             combineLatest([member.connection$, member.participant.value$]).pipe(
               map(([connection, participant]) => {
                 // do not render audio for local participant
@@ -713,41 +685,58 @@ export function createCallViewModel$(
       generateItems(
         function* ([
           localMatrixLivekitMember,
-          matrixLivekitMembers,
+          { value: matrixLivekitMembers },
           duplicateTiles,
         ]) {
-          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) {
+          let localParticipantId: string | undefined = undefined;
+          // add local member if available
+          if (localMatrixLivekitMember) {
             const { userId, participant, connection$, membership$ } =
-              matrixLivekitMember;
-            const rtcId = membership$.value.rtcBackendIdentity; // rtcBackendIdentity
-            const mediaId = computeMediaId(matrixLivekitMember);
+              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;
             for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
               yield {
-                keys: [dup, mediaId, userId, participant, connection$, rtcId],
+                keys: [dup, participantId, userId, participant, connection$],
                 data: undefined,
               };
             }
           }
         },
-        (scope, _, dup, mediaId, userId, participant, connection$, rtcId) => {
+        (
+          scope,
+          _data$,
+          dup,
+          participantId,
+          userId,
+          participant,
+          connection$,
+        ) => {
           const livekitRoom$ = scope.behavior(
             connection$.pipe(map((c) => c?.livekitRoom)),
           );
@@ -762,9 +751,8 @@ export function createCallViewModel$(
 
           return new UserMedia(
             scope,
-            `${mediaId}:${dup}`,
+            `${participantId}:${dup}`,
             userId,
-            rtcId,
             participant,
             options.encryptionSystem,
             livekitRoom$,
@@ -773,8 +761,8 @@ export function createCallViewModel$(
             localMembership.reconnecting$,
             displayName$,
             matrixMemberMetadataStore.createAvatarUrlBehavior$(userId),
-            handsRaised$.pipe(map((v) => v[mediaId]?.time ?? null)),
-            reactions$.pipe(map((v) => v[mediaId] ?? undefined)),
+            handsRaised$.pipe(map((v) => v[participantId]?.time ?? null)),
+            reactions$.pipe(map((v) => v[participantId] ?? undefined)),
           );
         },
       ),
@@ -1515,7 +1503,6 @@ export function createCallViewModel$(
       ),
       null,
     ),
-    allConnections$,
     participantCount$: participantCount$,
     handsRaised$: handsRaised$,
     reactions$: reactions$,

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

@@ -24,7 +24,6 @@ import {
   mockLivekitRoom,
   mockMuteStates,
   withTestScheduler,
-  ownMemberMock,
 } from "../../../utils/test";
 import {
   TransportState,
@@ -39,7 +38,6 @@ 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";
 
 const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
@@ -105,12 +103,11 @@ describe("LocalMembership", () => {
         getOldestMembership: vi.fn().mockReturnValue({
           getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
         }),
-        joinRTCSession: vi.fn(),
+        joinRoomSession: vi.fn(),
       }) as unknown as MatrixRTCSession;
 
       enterRTCSession(
         mockedSession,
-        ownMemberMock,
         {
           livekit_alias: "roomId",
           livekit_service_url: "http://my-well-known-service-url.com",
@@ -122,12 +119,7 @@ describe("LocalMembership", () => {
         },
       );
 
-      expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-        {
-          deviceId: "DEVICE",
-          memberId: "@alice:example.org:DEVICE",
-          userId: "@alice:example.org",
-        },
+      expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
         [
           {
             livekit_alias: "roomId",
@@ -169,12 +161,11 @@ describe("LocalMembership", () => {
         },
         memberships: [],
         getFocusInUse: vi.fn(),
-        joinRTCSession: vi.fn(),
+        joinRoomSession: vi.fn(),
       }) as unknown as MatrixRTCSession;
 
       enterRTCSession(
         mockedSession,
-        ownMemberMock,
         {
           livekit_alias: "roomId",
           livekit_service_url: "http://my-well-known-service-url.com",
@@ -213,11 +204,10 @@ describe("LocalMembership", () => {
 
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ =
-        scope.behavior<null | LocalTransportWithSFUConfig>(
-          hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
-          null,
-        );
+      const localTransport$ = scope.behavior<null | LivekitTransport>(
+        hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
+        null,
+      );
 
       // we do not need any connection data since we want to fail before reaching that.
       const mockConnectionManager = {
@@ -245,23 +235,11 @@ describe("LocalMembership", () => {
   });
 
   const aTransport = {
-    transport: {
-      livekit_service_url: "a",
-    } as LivekitTransport,
-    sfuConfig: {
-      url: "sfu-url",
-      jwt: "sfu-token",
-    },
-  } as LocalTransportWithSFUConfig;
+    livekit_service_url: "a",
+  } as LivekitTransport;
   const bTransport = {
-    transport: {
-      livekit_service_url: "b",
-    } as LivekitTransport,
-    sfuConfig: {
-      url: "sfu-url",
-      jwt: "sfu-token",
-    },
-  } as LocalTransportWithSFUConfig;
+    livekit_service_url: "b",
+  } as LivekitTransport;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -271,7 +249,7 @@ describe("LocalMembership", () => {
       } as unknown as LocalParticipant,
     }),
     state$: constant(ConnectionState.LivekitConnected),
-    transport: aTransport.transport,
+    transport: aTransport,
   } as unknown as Connection;
   const connectionTransportAConnecting = {
     ...connectionTransportAConnected,
@@ -280,11 +258,11 @@ describe("LocalMembership", () => {
   } as unknown as Connection;
   const connectionTransportBConnected = {
     state$: constant(ConnectionState.LivekitConnected),
-    transport: bTransport.transport,
+    transport: bTransport,
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
 
-  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
+  it("recreates publisher if new connection is used and ENDS always unpublish and end tracks", async () => {
     const scope = new ObservableScope();
 
     const localTransport$ = new BehaviorSubject(aTransport);
@@ -297,9 +275,6 @@ 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}]`);
           }),
@@ -328,22 +303,19 @@ 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].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,
-    );
+    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);
     scope.end();
     await flushPromises();
     // stop all tracks after ending scopes
-    expect(publishers[1].destroy).toHaveBeenCalled();
+    expect(publishers[1].stopPublishing).toHaveBeenCalled();
     // expect(publishers[1].stopTracks).toHaveBeenCalled();
 
     defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
@@ -361,9 +333,8 @@ describe("LocalMembership", () => {
     defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
       () => {
         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(),
+          stopTracks: vi.fn(),
           createAndSetupTracks: vi.fn().mockImplementation(async () => {
             tracks$.next([{}, {}] as LocalTrack[]);
             return Promise.resolve();
@@ -398,11 +369,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].destroy).toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
     // expect(publishers[0].stopTracks).toHaveBeenCalled();
     publisherFactory.mockClear();
   });
@@ -412,29 +383,33 @@ describe("LocalMembership", () => {
     const scope = new ObservableScope();
 
     const connectionManagerData = new ConnectionManagerData();
-    const localTransport$ =
-      new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
+    const localTransport$ = new BehaviorSubject<null | LivekitTransport>(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 = {
-          // 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(),
+          stopTracks: vi.fn().mockImplementation(() => {
+            logger.info("stopTracks");
+            tracks$.next([]);
+          }),
           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);
@@ -485,7 +460,7 @@ describe("LocalMembership", () => {
     });
 
     (
-      connectionManagerData2.getConnectionForTransport(aTransport.transport)!
+      connectionManagerData2.getConnectionForTransport(aTransport)!
         .state$ as BehaviorSubject<ConnectionState>
     ).next(ConnectionState.LivekitConnected);
     expect(localMembership.localMemberState$.value).toStrictEqual({
@@ -534,7 +509,7 @@ describe("LocalMembership", () => {
       (localMembership.localMemberState$.value as any).media,
     ).toStrictEqual(PublishState.Publishing);
 
-    expect(publishers[0].destroy).not.toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).not.toHaveBeenCalled();
 
     expect(localMembership.localMemberState$.isStopped).toBe(false);
     scope.end();
@@ -545,7 +520,7 @@ describe("LocalMembership", () => {
       (localMembership.localMemberState$.value as any).media,
     ).toStrictEqual(PublishState.Publishing);
     // stop all tracks after ending scopes
-    expect(publishers[0].destroy).toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
     // expect(publishers[0].stopTracks).toHaveBeenCalled();
   });
   // TODO add tests for matrix local matrix participation.

src/state/CallViewModel/localMember/LocalMember.ts

@@ -36,7 +36,6 @@ 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";
@@ -61,7 +60,6 @@ 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 */
@@ -127,7 +125,7 @@ interface Props {
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (transport: LivekitTransport) => void;
   homeserverConnected: HomeserverConnected;
-  localTransport$: Behavior<LocalTransportWithSFUConfig | null>;
+  localTransport$: Behavior<LivekitTransport | null>;
   matrixRTCSession: Pick<
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
@@ -140,16 +138,7 @@ interface Props {
  * We want
  *  - a publisher
  *  -
- * @param props The properties required to create the local membership.
- * @param props.scope The observable scope to use.
- * @param props.connectionManager The connection manager to get connections from.
- * @param props.createPublisherFactory Factory to create a publisher once we have a connection.
- * @param props.joinMatrixRTC Callback to join the matrix RTC session once we have a transport.
- * @param props.homeserverConnected The homeserver connected state.
- * @param props.localTransport$ The local transport to use for publishing.
- * @param props.logger The logger to use.
- * @param props.muteStates The mute states for video and audio.
- * @param props.matrixRTCSession The matrix RTC session to join.
+ * @param param0
  * @returns
  *  - publisher: The handle to create tracks and publish them to the room.
  *  - connected$: the current connection state. Including matrix server and livekit server connection. (only considering the livekit server we are using for our own media publication)
@@ -235,9 +224,7 @@ export const createLocalMembership$ = ({
           return null;
         }
 
-        return connectionData.getConnectionForTransport(
-          localTransport.transport,
-        );
+        return connectionData.getConnectionForTransport(localTransport);
       }),
       tap((connection) => {
         logger.info(
@@ -310,17 +297,13 @@ 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.destroy();
+        await publisher.stopPublishing();
+        await publisher.stopTracks();
       });
     }
   });
@@ -540,7 +523,7 @@ export const createLocalMembership$ = ({
       if (!shouldConnect) return;
 
       try {
-        joinMatrixRTC(transport.transport);
+        joinMatrixRTC(transport);
       } catch (error) {
         logger.error("Error entering RTC session", error);
         if (error instanceof Error)
@@ -559,12 +542,7 @@ export const createLocalMembership$ = ({
   );
 
   const participant$ = scope.behavior(
-    localConnection$.pipe(
-      map((c) => c?.livekitRoom?.localParticipant ?? null),
-      tap((p) => {
-        logger.debug("participant$ updated:", p?.identity);
-      }),
-    ),
+    localConnection$.pipe(map((c) => c?.livekitRoom?.localParticipant ?? null)),
   );
 
   // Pause upstream of all local media tracks when we're disconnected from
@@ -698,20 +676,17 @@ interface EnterRTCSessionOptions {
  *      - Delay events management
  *      - 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 - `encryptMedia`: Whether to encrypt media `matrixRTCMode`: The Matrix RTC mode to use.
+ * @param rtcSession
+ * @param transport
+ * @param options
  * @throws If the widget could not send ElementWidgetActions.JoinCall action.
  */
 // Exported for unit testing
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
-  ownMembershipIdentity: CallMembershipIdentityParts,
   transport: LivekitTransport,
-  options: EnterRTCSessionOptions,
+  { encryptMedia, matrixRTCMode }: EnterRTCSessionOptions,
 ): void {
-  const { encryptMedia, matrixRTCMode } = options;
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -723,13 +698,10 @@ export function enterRTCSession(
   const useDeviceSessionMemberEvents =
     features?.feature_use_device_session_member_events;
   const { sendNotificationType: notificationType, callIntent } = getUrlParams();
-  const multiSFU =
-    matrixRTCMode === MatrixRTCMode.Compatibility ||
-    matrixRTCMode === MatrixRTCMode.Matrix_2_0;
+  const multiSFU = matrixRTCMode !== MatrixRTCMode.Legacy;
   // 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.joinRTCSession(
-    ownMembershipIdentity,
+  rtcSession.joinRoomSession(
     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, ownMemberMock } from "../../../utils/test";
-import { createLocalTransport$, JwtEndpointVersion } from "./LocalTransport";
+import { mockConfig, flushPromises } from "../../../utils/test";
+import { createLocalTransport$ } from "./LocalTransport";
 import { constant } from "../../Behavior";
 import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
@@ -39,34 +39,10 @@ describe("LocalTransport", () => {
   };
 
   let scope: 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(""),
-    );
+  beforeEach(() => {
+    scope = new ObservableScope();
   });
+  afterEach(() => scope.end());
 
   it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
     // Provide a valid config so makeTransportInternal resolves a transport
@@ -89,7 +65,6 @@ 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
@@ -97,9 +72,6 @@ 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),
@@ -114,60 +86,6 @@ 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({
@@ -191,11 +109,7 @@ 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);
@@ -203,17 +117,9 @@ describe("LocalTransport", () => {
     await flushPromises();
     // final
     expect(localTransport$.value).toStrictEqual({
-      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",
-      },
+      livekit_alias: "!example_room_id",
+      livekit_service_url: "https://lk.example.org",
+      type: "livekit",
     });
   });
 
@@ -228,15 +134,11 @@ 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([]),
@@ -263,17 +165,9 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        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",
-        },
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
       });
     });
     it("supports getting transport via user settings", async () => {
@@ -283,17 +177,9 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        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",
-        },
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
       });
     });
     it("supports getting transport via backend", async () => {
@@ -305,17 +191,9 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        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",
-        },
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
       });
     });
     it("fails fast if the openID request fails for backend config", async () => {
@@ -344,17 +222,9 @@ describe("LocalTransport", () => {
       expect(localTransport$.value).toBe(null);
       await flushPromises();
       expect(localTransport$.value).toStrictEqual({
-        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",
-        },
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
       });
       expect(fetchMock.done()).toEqual(true);
     });
@@ -378,15 +248,11 @@ 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,14 +16,13 @@ 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";
@@ -31,11 +30,9 @@ 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";
@@ -50,53 +47,11 @@ const logger = rootLogger.getChild("[LocalTransport]");
  */
 interface Props {
   scope: ObservableScope;
-  ownMembershipIdentity: CallMembershipIdentityParts;
   memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
+  client: Pick<MatrixClient, "getDomain" | "_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;
 }
 
 /**
@@ -106,61 +61,29 @@ export function isLocalTransportWithSFUConfig(
  * @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$,
-  forceJwtEndpoint$,
-  delayId$,
-}: Props): Behavior<LocalTransportWithSFUConfig | null> => {
+}: Props): Behavior<LivekitTransport | null> => {
   /**
    * The transport over which we should be actively publishing our media.
    * undefined when not joined.
    */
-  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);
-        }),
+  const oldestMemberTransport$ = scope.behavior(
+    memberships$.pipe(
+      map(
+        (memberships) =>
+          memberships.value[0]?.getTransport(memberships.value[0]) ?? null,
       ),
-      null,
-    );
+      first((t) => t != null && isLivekitTransport(t)),
+    ),
+    null,
+  );
 
   /**
    * The transport that we would personally prefer to publish on (if not for the
@@ -168,30 +91,9 @@ export const createLocalTransport$ = ({
    *
    * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
    */
-  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,
-          delayId,
-          forceEndpoint,
-        );
-        return from(
-          makeTransport(
-            client,
-            ownMembershipIdentity,
-            roomId,
-            customUrl,
-            forceEndpoint,
-            delayId ?? undefined,
-          ),
-        );
-      }),
+  const preferredTransport$: Behavior<LivekitTransport | null> = scope.behavior(
+    customLivekitUrl.value$.pipe(
+      switchMap((customUrl) => from(makeTransport(client, roomId, customUrl))),
     ),
     null,
   );
@@ -205,23 +107,12 @@ export const createLocalTransport$ = ({
       oldestMemberTransport$,
       preferredTransport$,
     ]).pipe(
-      map(([useOldestMember, oldestMemberTransport, preferredTransport]) => {
-        return useOldestMember
+      map(([useOldestMember, oldestMemberTransport, preferredTransport]) =>
+        useOldestMember
           ? (oldestMemberTransport ?? preferredTransport)
-          : 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,
-        );
-      }),
+          : preferredTransport,
+      ),
+      distinctUntilChanged(areLivekitTransportsEqual),
     ),
   );
 };
@@ -233,74 +124,25 @@ 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" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts,
-  membership: CallMembershipIdentityParts,
   roomId: string,
   urlFromDevSettings: string | null,
-  forceJwtEndpoint: JwtEndpointVersion,
-  delayId?: string,
-): Promise<LocalTransportWithSFUConfig> {
+): Promise<LivekitTransport> {
   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
@@ -311,29 +153,39 @@ 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.
-    // 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);
+    const config = await getSFUConfigWithOpenID(
+      client,
+      urlFromDevSettings,
+      roomId,
+    );
+    return {
+      type: "livekit",
+      livekit_service_url: urlFromDevSettings,
+      livekit_alias: config.livekitAlias,
+    };
   }
 
   async function getFirstUsableTransport(
     transports: Transport[],
-  ): Promise<LocalTransportWithSFUConfig | null> {
+  ): Promise<LivekitTransport | null> {
     for (const potentialTransport of transports) {
       if (isLivekitTransportConfig(potentialTransport)) {
         try {
-          // This will call the jwt/sfu/get endpoint to pre create the livekit room.
-          return await doOpenIdAndJWTFromUrl(
+          const { livekitAlias } = await getSFUConfigWithOpenID(
+            client,
             potentialTransport.livekit_service_url,
+            roomId,
           );
+          return {
+            ...potentialTransport,
+            livekit_alias: livekitAlias,
+          };
         } catch (ex) {
-          // Explictly throw these
           if (ex instanceof FailToGetOpenIdToken) {
-            throw ex;
-          }
-          if (ex instanceof NoMatrix2AuthorizationService) {
+            // Explictly throw these
             throw ex;
           }
           logger.debug(
@@ -393,9 +245,18 @@ async function makeTransport(
   const urlFromConf = Config.get().livekit?.livekit_service_url;
   if (urlFromConf) {
     try {
-      // This will call the jwt/sfu/get endpoint to pre create the livekit room.
-      logger.info("Using config SFU", urlFromConf);
-      return await doOpenIdAndJWTFromUrl(urlFromConf);
+      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;
     } catch (ex) {
       if (ex instanceof FailToGetOpenIdToken) {
         throw ex;
@@ -404,6 +265,5 @@ 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,6 +183,7 @@ describe("Publisher", () => {
 
   beforeEach(() => {
     publisher = new Publisher(
+      scope,
       connection,
       mockMediaDevices({}),
       muteStates,
@@ -191,9 +192,7 @@ describe("Publisher", () => {
     );
   });
 
-  afterEach(async () => {
-    await publisher.destroy();
-  });
+  afterEach(() => {});
 
   it("Should not create tracks if started muted to avoid unneeded permission requests", async () => {
     const createTracksSpy = vi.spyOn(
@@ -208,38 +207,6 @@ 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,
@@ -300,6 +267,7 @@ describe("Publisher", () => {
     let publisher: Publisher;
     beforeEach(() => {
       publisher = new Publisher(
+        scope,
         connection,
         mockMediaDevices({}),
         muteStates,
@@ -307,9 +275,6 @@ describe("Publisher", () => {
         logger,
       );
     });
-    afterEach(async () => {
-      await publisher.destroy();
-    });
 
     test.each([
       { mutes: { audioEnabled: true, videoEnabled: false } },
@@ -355,6 +320,7 @@ describe("Bug fix", () => {
   it("wrongly publish tracks while muted", async () => {
     // setLogLevel(`debug`);
     const publisher = new Publisher(
+      scope,
       connection,
       mockMediaDevices({}),
       muteStates,
@@ -390,6 +356,5 @@ 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 { ObservableScope } from "../../ObservableScope.ts";
+import { type ObservableScope } from "../../ObservableScope.ts";
 
 /**
  * A wrapper for a Connection object.
@@ -47,10 +47,9 @@ 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.
@@ -58,6 +57,7 @@ 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,6 +65,7 @@ export class Publisher {
     private logger: Logger,
   ) {
     const { controlledAudioDevices } = getUrlParams();
+
     const room = connection.livekitRoom;
 
     room.setE2EEEnabled(room.options.e2ee !== undefined)?.catch((e: Error) => {
@@ -72,11 +73,17 @@ export class Publisher {
     });
 
     // Setup track processor syncing (blur)
-    this.observeTrackProcessors(this.scope, room, trackerProcessorState$);
+    this.observeTrackProcessors(scope, room, trackerProcessorState$);
     // Observe media device changes and update LiveKit active devices accordingly
-    this.observeMediaDevices(this.scope, devices, controlledAudioDevices);
+    this.observeMediaDevices(scope, devices, controlledAudioDevices);
 
-    this.workaroundRestartAudioInputTrackChrome(devices, this.scope);
+    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.connection.livekitRoom.localParticipant.on(
       ParticipantEvent.LocalTrackPublished,
@@ -84,21 +91,6 @@ 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,
@@ -151,7 +143,7 @@ export class Publisher {
     this.logger.debug("createAndSetupTracks called");
     const lkRoom = this.connection.livekitRoom;
     // Observe mute state changes and update LiveKit microphone/camera states accordingly
-    this.observeMuteStates();
+    this.observeMuteStates(this.scope);
 
     // Check if audio and/or video is enabled. We only create tracks if enabled,
     // because it could prompt for permission, and we don't want to do that unnecessarily.
@@ -364,9 +356,10 @@ export class Publisher {
 
   /**
    * Observe changes in the mute states and update the LiveKit room accordingly.
+   * @param scope
    * @private
    */
-  private observeMuteStates(): void {
+  private observeMuteStates(scope: ObservableScope): void {
     const lkRoom = this.connection.livekitRoom;
     this.muteStates.audio.setHandler(async (enable) => {
       try {

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, ownMemberMock } from "../../../utils/test.ts";
+import { mockRemoteParticipant } from "../../../utils/test.ts";
 
 let testScope: ObservableScope;
 
@@ -114,7 +114,6 @@ function setupRemoteConnection(): Connection {
     client: client,
     transport: livekitFocus,
     scope: testScope,
-    ownMembershipIdentity: ownMemberMock,
     livekitRoomFactory: () => fakeLivekitRoom,
   };
 
@@ -156,7 +155,6 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
     const connection = new Connection(opts, logger);
@@ -172,7 +170,6 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 
@@ -223,7 +220,6 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 
@@ -263,7 +259,7 @@ describe("Start connection states", () => {
       capturedState.cause instanceof Error
     ) {
       expect(capturedState.cause.message).toContain(
-        "SFU Config fetch failed with status code 500",
+        "SFU Config fetch failed with exception",
       );
       expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,
@@ -281,7 +277,6 @@ describe("Start connection states", () => {
       client: client,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -18,7 +18,6 @@ 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,
@@ -33,21 +32,8 @@ 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. */
@@ -117,14 +103,6 @@ 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
@@ -151,21 +129,8 @@ export class Connection {
     try {
       this._state$.next(ConnectionState.FetchingConfig);
       // We should already have this information after creating the localTransport.
-      // 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;
+      // It would probably be better to forward this here.
+      const { url, jwt } = await this.getSFUConfigWithOpenID();
       // If we were stopped while fetching the config, don't proceed to connect
       if (this.stopped) return;
 
@@ -181,11 +146,8 @@ 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
@@ -224,17 +186,11 @@ export class Connection {
     }
   }
 
-  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
+  protected async getSFUConfigWithOpenID(): Promise<SFUConfig> {
     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,
     );
   }
 
@@ -246,36 +202,28 @@ export class Connection {
    */
   public async stop(): Promise<void> {
     this.logger.debug(
-      `stop: disconnecing from lk room ${this.transport.livekit_service_url}`,
+      `Stopping connection to ${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.
    *
    * @param opts - Connection options {@link ConnectionOpts}.
    *
-   * @param logger - The logger to use.
+   * @param logger
    */
   public constructor(opts: ConnectionOpts, logger: Logger) {
-    this.ownMembershipIdentity = opts.ownMembershipIdentity;
-    this.existingSFUConfig = opts.existingSFUConfig;
-    this.logger = logger.getChild(
-      "[Connection " + opts.transport.livekit_service_url + "]",
-    );
+    this.logger = logger.getChild("[Connection]");
     this.logger.info(
-      `constructor: ${opts.transport.livekit_service_url} alias: ${opts.transport.livekit_alias} withSfuConfig?: ${opts.existingSFUConfig ? JSON.stringify(opts.existingSFUConfig) : "undefined"}`,
+      `Creating new connection to ${opts.transport.livekit_service_url} ${opts.transport.livekit_alias}`,
     );
     const { transport, client, scope } = opts;
 

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
   Room as LivekitRoom,
   type RoomOptions,
@@ -15,15 +16,10 @@ 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,
-  SFUConfig,
-} from "../../../livekit/openIDSFU.ts";
+import type { OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
 import type { MediaDevices } from "../../MediaDevices.ts";
 import type { Behavior } from "../../Behavior.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
@@ -32,11 +28,9 @@ import { defaultLiveKitOptions } from "../../../livekit/options.ts";
 // TODO evaluate if this should be done like the Publisher Factory
 export interface ConnectionFactory {
   createConnection(
-    scope: ObservableScope,
     transport: LivekitTransport,
-    ownMembershipIdentity: CallMembershipIdentityParts,
+    scope: ObservableScope,
     logger: Logger,
-    sfuConfig?: SFUConfig,
   ): Connection;
 }
 
@@ -49,11 +43,11 @@ export class ECConnectionFactory implements ConnectionFactory {
    * @param client - The OpenID client parts for authentication, needed to get openID and JWT tokens.
    * @param devices - Used for video/audio out/in capture options.
    * @param processorState$ - Effects like background blur (only for publishing connection?)
-   * @param livekitKeyProvider - Optional key provider for end-to-end encryption.
+   * @param livekitKeyProvider
    * @param controlledAudioDevices - Option to indicate whether audio output device is controlled externally (native mobile app).
-   * @param livekitRoomFactory - Optional factory function (for testing) to create LivekitRoom instances. If not provided, a default factory is used.
    * @param echoCancellation - Whether to enable echo cancellation for audio capture.
    * @param noiseSuppression - Whether to enable noise suppression for audio capture.
+   * @param livekitRoomFactory - Optional factory function (for testing) to create LivekitRoom instances. If not provided, a default factory is used.
    */
   public constructor(
     private client: OpenIDClientParts,
@@ -84,30 +78,17 @@ 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(
-    scope: ObservableScope,
     transport: LivekitTransport,
-    ownMembershipIdentity: CallMembershipIdentityParts,
+    scope: ObservableScope,
     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 { ownMemberMock, withTestScheduler } from "../../../utils/test.ts";
+import { withTestScheduler } from "../../../utils/test.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { constant, type Behavior } from "../../Behavior.ts";
+import { type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
@@ -49,7 +49,7 @@ beforeEach(() => {
   vi.mocked(fakeConnectionFactory).createConnection = vi
     .fn()
     .mockImplementation(
-      (scope: ObservableScope, transport: LivekitTransport) => {
+      (transport: LivekitTransport, scope: ObservableScope) => {
         const mockConnection = {
           transport,
           remoteParticipants$: new BehaviorSubject([]),
@@ -76,12 +76,10 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("a", {
+        inputTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
         logger: logger,
-        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -117,8 +115,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("abcdef", {
+        inputTransports$: behavior("abcdef", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1], 1),
           c: new Epoch([TRANSPORT_1], 2),
@@ -127,7 +124,6 @@ describe("connections$ stream", () => {
           f: new Epoch([TRANSPORT_1, TRANSPORT_2], 5),
         }),
         logger: logger,
-        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -164,14 +160,12 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("abc", {
+        inputTransports$: 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(
@@ -229,7 +223,7 @@ describe("connectionManagerData$ stream", () => {
     vi.mocked(fakeConnectionFactory).createConnection = vi
       .fn()
       .mockImplementation(
-        (scope: ObservableScope, transport: LivekitTransport) => {
+        (transport: LivekitTransport, scope: ObservableScope) => {
           const fakeRemoteParticipants$ = new BehaviorSubject<
             RemoteParticipant[]
           >([]);
@@ -281,12 +275,10 @@ describe("connectionManagerData$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("a", {
+        inputTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
         logger,
-        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(connectionManagerData$).toBe("abcd", {

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -7,10 +7,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { combineLatest, map, of, switchMap } from "rxjs";
+import { combineLatest, map, of, switchMap, tap } 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";
@@ -18,11 +17,6 @@ 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<
@@ -71,11 +65,8 @@ export class ConnectionManagerData {
 interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
-  localTransport$: Behavior<LocalTransportWithSFUConfig | null>;
-  remoteTransports$: Behavior<Epoch<LivekitTransport[]>>;
-
+  inputTransports$: Behavior<Epoch<LivekitTransport[]>>;
   logger: Logger;
-  ownMembershipIdentity: CallMembershipIdentityParts;
 }
 
 // TODO - write test for scopes (do we really need to bind scope)
@@ -85,15 +76,9 @@ export interface IConnectionManager {
 
 /**
  * Crete a `ConnectionManager`
- * @param props - Configuration object
- * @param props.scope - The observable scope used by this object
- * @param props.connectionFactory - Used to create new connections
- * @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.
-
- *
+ * @param scope the observable scope used by this object.
+ * @param connectionFactory used to create new connections.
+ * @param _transportsSubscriptions$ A list of Behaviors each containing a LIST of LivekitTransport.
  *   Each of these behaviors can be interpreted as subscribed list of transports.
  *
  *   Using `registerTransports` independent external modules can control what connections
@@ -106,10 +91,8 @@ export interface IConnectionManager {
 export function createConnectionManager$({
   scope,
   connectionFactory,
-  localTransport$,
-  remoteTransports$,
+  inputTransports$,
   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
@@ -122,33 +105,12 @@ export function createConnectionManager$({
    * It is build based on the list of subscribed transports (`transportsSubscriptions$`).
    * externally this is modified via `registerTransports()`.
    */
-  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,
+  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(", ")}`,
         );
       }),
     ),
@@ -158,47 +120,25 @@ export function createConnectionManager$({
    * Connections for each transport in use by one or more session members.
    */
   const connections$ = scope.behavior(
-    localAndRemoteTransports$.pipe(
+    transports$.pipe(
       generateItemsWithEpoch(
         function* (transports) {
-          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,
-              };
-            }
-          }
+          for (const transport of transports)
+            yield {
+              keys: [transport.livekit_service_url, transport.livekit_alias],
+              data: undefined,
+            };
         },
-        (scope, _data$, serviceUrl, alias, sfuConfig) => {
+        (scope, _data$, serviceUrl, alias) => {
+          logger.debug(`Creating connection to ${serviceUrl} (${alias})`);
           const connection = connectionFactory.createConnection(
-            scope,
             {
               type: "livekit",
               livekit_service_url: serviceUrl,
               livekit_alias: alias,
             },
-            ownMembershipIdentity,
+            scope,
             logger,
-            sfuConfig,
           );
           // Start the connection immediately
           // Use connection state to track connection progress
@@ -248,18 +188,18 @@ export function createConnectionManager$({
         );
       }),
     ),
-    new Epoch(new ConnectionManagerData(), -1),
+    new Epoch(new ConnectionManagerData()),
   );
 
   return { connectionManagerData$ };
 }
 
-function removeDuplicateTransports<T extends LivekitTransport>(
-  transports: T[],
-): T[] {
+function removeDuplicateTransports(
+  transports: LivekitTransport[],
+): LivekitTransport[] {
   return transports.reduce((acc, transport) => {
     if (!acc.some((t) => areLivekitTransportsEqual(t, transport)))
       acc.push(transport);
     return acc;
-  }, [] as T[]);
+  }, [] as LivekitTransport[]);
 }

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

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

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

@@ -10,7 +10,8 @@ import {
   type CallMembership,
   type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, combineLatest, map, type Observable } from "rxjs";
+import { getParticipantId } from "matrix-js-sdk/lib/matrixrtc/utils";
+import { combineLatest, map, type Observable } from "rxjs";
 
 import { type IConnectionManager } from "./ConnectionManager.ts";
 import {
@@ -25,18 +26,14 @@ import {
 } from "../../ObservableScope.ts";
 import { ConnectionManagerData } from "./ConnectionManager.ts";
 import {
-  flushPromises,
-  mockRtcMembership,
+  mockCallMembership,
   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",
@@ -49,12 +46,16 @@ const transportB: LivekitTransport = {
   livekit_alias: "!alias:sample.com",
 };
 
-const bobMembership = mockRtcMembership("@bob:example.org", "DEV000", {
-  fociPreferred: [transportA],
-});
-const carlMembership = mockRtcMembership("@carl:sample.com", "DEV111", {
-  fociPreferred: [transportB],
-});
+const bobMembership = mockCallMembership(
+  "@bob:example.org",
+  "DEV000",
+  transportA,
+);
+const carlMembership = mockCallMembership(
+  "@carl:sample.com",
+  "DEV111",
+  transportB,
+);
 
 beforeEach(() => {
   testScope = new ObservableScope();
@@ -75,41 +76,52 @@ function epochMeWith$<T, U>(
   );
 }
 
-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$);
+test("should signal participant not yet connected to livekit", () => {
+  withTestScheduler(({ behavior, expectObservable }) => {
+    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
+      behavior("a", {
+        a: [bobMembership],
+      }),
+    );
 
-  const connectionManagerData$ = epochMeWith$(
-    memberships$,
-    mockConnectionManagerData$,
-  );
+    const connectionManagerData$ = epochMeWith$(
+      memberships$,
+      behavior("a", {
+        a: new ConnectionManagerData(),
+      }),
+    );
 
-  const matrixLivekitMember$ = createMatrixLivekitMembers$({
-    scope: testScope,
-    membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
-    connectionManager: {
-      connectionManagerData$: connectionManagerData$,
-    } as unknown as IConnectionManager,
+    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;
+        }),
+      },
+    );
   });
-
-  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 createEpochedMemberships$(m$: Observable<CallMembership[]>): {
+function fromMemberships$(m$: Observable<CallMembership[]>): {
   memberships$: Observable<Epoch<CallMembership[]>>;
   membershipsWithTransport$: Observable<
     Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
@@ -134,115 +146,32 @@ function createEpochedMemberships$(m$: Observable<CallMembership[]>): {
   };
 }
 
-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(
+test("should signal participant on a connection that is publishing", () => {
+  withTestScheduler(({ behavior, expectObservable }) => {
+    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, [
+    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
+      behavior("a", {
+        a: [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(connectionWithPublisher),
+      behavior("a", {
+        a: dataWithPublisher,
+      }),
     );
 
     const matrixLivekitMembers$ = createMatrixLivekitMembers$({
@@ -252,73 +181,213 @@ describe("Publication edge case", () => {
         connectionManagerData$: connectionManagerData$,
       } as unknown as IConnectionManager,
     });
-    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;
+    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,
+          });
+          return true;
+        }),
       },
     );
   });
 });
 
-test("bob is publishing in the wrong connection", async () => {
-  const mockedMemberships$ = new BehaviorSubject([
-    bobMembership,
-    carlMembership,
-  ]);
+test("should signal participant on a connection that is not publishing", () => {
+  withTestScheduler(({ behavior, expectObservable }) => {
+    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
+      behavior("a", {
+        a: [bobMembership],
+      }),
+    );
 
-  const { memberships$, membershipsWithTransport$ } =
-    createEpochedMemberships$(mockedMemberships$);
+    const connection = {
+      transport: bobMembership.getTransport(bobMembership),
+    } as unknown as Connection;
+    const dataWithPublisher = new ConnectionManagerData();
+    dataWithPublisher.add(connection, []);
 
-  const connectionWithPublisher = new ConnectionManagerData();
+    const connectionManagerData$ = epochMeWith$(
+      memberships$,
+      behavior("a", {
+        a: dataWithPublisher,
+      }),
+    );
 
-  const bobParticipantId = fallbackMemberId(
-    bobMembership.userId,
-    bobMembership.deviceId,
-  );
-  const connectionA = { transport: transportA } as unknown as Connection;
-  const connectionB = { transport: transportB } as unknown as Connection;
+    const matrixLivekitMembers$ = createMatrixLivekitMembers$({
+      scope: testScope,
+      membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
+      connectionManager: {
+        connectionManagerData$: connectionManagerData$,
+      } as unknown as IConnectionManager,
+    });
 
-  // 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 }),
-  ]);
+    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;
+        }),
+      },
+    );
+  });
+});
 
-  const connectionsWithPublisher$ = new BehaviorSubject(
-    connectionWithPublisher,
-  );
-  const connectionManagerData$ = epochMeWith$(
-    memberships$,
-    connectionsWithPublisher$,
-  );
+describe("Publication edge case", () => {
+  test("bob is publishing in several connections", () => {
+    withTestScheduler(({ behavior, expectObservable }) => {
+      const { memberships$, membershipsWithTransport$ } = fromMemberships$(
+        behavior("a", {
+          a: [bobMembership, carlMembership],
+        }),
+      );
 
-  const matrixLivekitMember$ = createMatrixLivekitMembers$({
-    scope: testScope,
-    membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
-    connectionManager: {
-      connectionManagerData$: connectionManagerData$,
-    } as unknown as IConnectionManager,
+      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;
+          }),
+        },
+      );
+    });
   });
 
-  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;
-    },
-  );
+  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;
+          }),
+        },
+      );
+    });
+  });
 });

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -33,7 +33,7 @@ export type TaggedParticipant =
   | LocalTaggedParticipant
   | RemoteTaggedParticipant;
 
-export interface MatrixLivekitMember {
+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,6 +84,7 @@ export function createMatrixLivekitMembers$({
   /**
    * Stream of all the call members and their associated livekit data (if available).
    */
+
   return scope.behavior(
     combineLatest([
       membershipsWithTransport$,
@@ -92,39 +93,47 @@ export function createMatrixLivekitMembers$({
       filter((values) =>
         values.every((value) => value.epoch === values[0].epoch),
       ),
-      map(([ms, data]) => new Epoch([ms.value, data.value] as const, ms.epoch)),
+      map(
+        ([
+          { value: membershipsWithTransports, epoch },
+          { value: managerData },
+        ]) =>
+          new Epoch([membershipsWithTransports, managerData] as const, 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* ([membershipsWithTransport, managerData]) {
-          for (const { membership, transport } of membershipsWithTransport) {
+        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}`;
+
             const participants = transport
               ? managerData.getParticipantsForTransport(transport)
               : [];
             const participant =
-              participants.find(
-                (p) => p.identity == membership.rtcBackendIdentity,
-              ) ?? null;
+              participants.find((p) => p.identity == participantId) ?? null;
             const connection = transport
               ? managerData.getConnectionForTransport(transport)
               : null;
 
             yield {
-              keys: [membership.userId, membership.deviceId],
+              keys: [participantId, membership.userId],
               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$, userId, deviceId) => {
+        (scope, data$, participantId, userId) => {
           logger.debug(
-            `Generating member for livekitIdentity: ${data$.value.membership.rtcBackendIdentity}, userId:deviceId: ${userId}${deviceId}`,
+            `Generating member for participantId: ${participantId}, userId: ${userId}`,
           );
           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,
@@ -132,25 +141,19 @@ 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<T extends LivekitTransport>(
-  t1: T | null,
-  t2: T | null,
+export function areLivekitTransportsEqual(
+  t1: LivekitTransport | null,
+  t2: LivekitTransport | 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)
-      // Also LivekitTransport is planned to become a `ConnectionIdentifier` which moves this equal somewhere else.
-      t1.livekit_alias === t2.livekit_alias
-    );
+  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 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 {
-  mockRtcMembership,
+  mockCallMembership,
   mockMatrixRoomMember,
   withTestScheduler,
 } from "../../../utils/test.ts";
@@ -111,7 +111,7 @@ describe("MatrixMemberMetadata", () => {
           rawDisplayName: "it's a me",
         });
         const memberships$ = behavior("a", {
-          a: [mockRtcMembership("@local:example.com", "DEVICE1")],
+          a: [mockCallMembership("@local:example.com", "DEVICE1")],
         });
         const metadataStore = createMatrixMemberMetadata$(
           testScope,
@@ -149,8 +149,8 @@ describe("MatrixMemberMetadata", () => {
       withTestScheduler(({ behavior, expectObservable }) => {
         const memberships$ = behavior("a", {
           a: [
-            mockRtcMembership("@alice:example.com", "DEVICE1"),
-            mockRtcMembership("@bob:example.com", "DEVICE1"),
+            mockCallMembership("@alice:example.com", "DEVICE1"),
+            mockCallMembership("@bob:example.com", "DEVICE1"),
           ],
         });
         const metadataStore = createMatrixMemberMetadata$(
@@ -179,7 +179,7 @@ describe("MatrixMemberMetadata", () => {
         setUpBasicRoom();
 
         const memberships$ = behavior("a", {
-          a: [mockRtcMembership("@no-name:foo.bar", "D000")],
+          a: [mockCallMembership("@no-name:foo.bar", "D000")],
         });
         const metadataStore = createMatrixMemberMetadata$(
           testScope,
@@ -201,11 +201,11 @@ describe("MatrixMemberMetadata", () => {
 
         const memberships$ = behavior("a", {
           a: [
-            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"),
+            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"),
           ],
         });
 
@@ -233,10 +233,10 @@ describe("MatrixMemberMetadata", () => {
         setUpBasicRoom();
 
         const memberships$ = behavior("ab", {
-          a: [mockRtcMembership("@bob:example.com", "DEVICE1")],
+          a: [mockCallMembership("@bob:example.com", "DEVICE1")],
           b: [
-            mockRtcMembership("@bob:example.com", "DEVICE1"),
-            mockRtcMembership("@bob:foo.bar", "BOB000"),
+            mockCallMembership("@bob:example.com", "DEVICE1"),
+            mockCallMembership("@bob:foo.bar", "BOB000"),
           ],
         });
 
@@ -262,10 +262,10 @@ describe("MatrixMemberMetadata", () => {
 
         const memberships$ = behavior("ab", {
           a: [
-            mockRtcMembership("@bob:example.com", "DEVICE1"),
-            mockRtcMembership("@bob:foo.bar", "BOB000"),
+            mockCallMembership("@bob:example.com", "DEVICE1"),
+            mockCallMembership("@bob:foo.bar", "BOB000"),
           ],
-          b: [mockRtcMembership("@bob:example.com", "DEVICE1")],
+          b: [mockCallMembership("@bob:example.com", "DEVICE1")],
         });
 
         const metadataStore = createMatrixMemberMetadata$(
@@ -292,8 +292,8 @@ describe("MatrixMemberMetadata", () => {
 
         const memberships$ = behavior("a", {
           a: [
-            mockRtcMembership("@bob:example.com", "B000"),
-            mockRtcMembership("@carl:example.com", "C000"),
+            mockCallMembership("@bob:example.com", "B000"),
+            mockCallMembership("@carl:example.com", "C000"),
           ],
         });
         const metadataStore = createMatrixMemberMetadata$(
@@ -331,16 +331,16 @@ describe("MatrixMemberMetadata", () => {
         // - room join/leave
         // - disambiguate
         const memberships$ = behavior("ab-d", {
-          a: [mockRtcMembership(CARL, "C000")],
+          a: [mockCallMembership(CARL, "C000")],
           b: [
-            mockRtcMembership(CARL, "C000"),
+            mockCallMembership(CARL, "C000"),
             // bob joins
-            mockRtcMembership(BOB, "B000"),
+            mockCallMembership(BOB, "B000"),
           ],
           // c carl gets renamed to BOB
           d: [
             // carl leaves
-            mockRtcMembership(BOB, "B000"),
+            mockCallMembership(BOB, "B000"),
           ],
         });
         schedule("--a-", {
@@ -379,8 +379,8 @@ describe("MatrixMemberMetadata", () => {
 
     it("should disambiguate users with invisible characters", () => {
       withTestScheduler(({ behavior, expectObservable }) => {
-        const bobRtcMember = mockRtcMembership("@bob:example.org", "BBBB");
-        const bobZeroWidthSpaceRtcMember = mockRtcMembership(
+        const bobRtcMember = mockCallMembership("@bob:example.org", "BBBB");
+        const bobZeroWidthSpaceRtcMember = mockCallMembership(
           "@bob2:example.org",
           "BBBB",
         );
@@ -397,9 +397,9 @@ describe("MatrixMemberMetadata", () => {
         fakeMemberWith(bobZeroWidthSpace);
         fakeMemberWith({ userId: "@carol:example.org" });
         const memberships$ = behavior("ab", {
-          a: [mockRtcMembership("@carol:example.org", "1111"), bobRtcMember],
+          a: [mockCallMembership("@carol:example.org", "1111"), bobRtcMember],
           b: [
-            mockRtcMembership("@carol:example.org", "1111"),
+            mockCallMembership("@carol:example.org", "1111"),
             bobRtcMember,
             bobZeroWidthSpaceRtcMember,
           ],
@@ -450,8 +450,8 @@ describe("MatrixMemberMetadata", () => {
 
     it("should strip RTL characters from displayname", () => {
       withTestScheduler(({ behavior, expectObservable }) => {
-        const daveRtcMember = mockRtcMembership("@dave:example.org", "DDDD");
-        const daveRTLRtcMember = mockRtcMembership(
+        const daveRtcMember = mockCallMembership("@dave:example.org", "DDDD");
+        const daveRTLRtcMember = mockCallMembership(
           "@dave2:example.org",
           "DDDD",
         );
@@ -466,9 +466,9 @@ describe("MatrixMemberMetadata", () => {
         fakeMemberWith(daveRTL);
         fakeMemberWith(dave);
         const memberships$ = behavior("ab", {
-          a: [mockRtcMembership("@carol:example.org", "DDDD")],
+          a: [mockCallMembership("@carol:example.org", "DDDD")],
           b: [
-            mockRtcMembership("@carol:example.org", "DDDD"),
+            mockCallMembership("@carol:example.org", "DDDD"),
             daveRtcMember,
             daveRTLRtcMember,
           ],
@@ -527,8 +527,8 @@ describe("MatrixMemberMetadata", () => {
         });
         const memberships$ = behavior("a", {
           a: [
-            mockRtcMembership("@local:example.com", "DEVICE1"),
-            mockRtcMembership("@alice:example.com", "DEVICE1"),
+            mockCallMembership("@local:example.com", "DEVICE1"),
+            mockCallMembership("@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: [mockRtcMembership("@bob:example.com", "B000")],
+          a: [mockCallMembership("@bob:example.com", "B000")],
           b: [
-            mockRtcMembership("@bob:example.com", "B000"),
-            mockRtcMembership("@carl:example.com", "C000"),
+            mockCallMembership("@bob:example.com", "B000"),
+            mockCallMembership("@carl:example.com", "C000"),
           ],
-          d: [mockRtcMembership("@carl:example.com", "C000")],
+          d: [mockCallMembership("@carl:example.com", "C000")],
         });
 
         const metadataStore = createMatrixMemberMetadata$(

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

@@ -21,9 +21,8 @@ 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";
@@ -34,7 +33,6 @@ 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
@@ -101,9 +99,9 @@ afterEach(() => {
 
 test("bob, carl, then bob joining no tracks yet", () => {
   withTestScheduler(({ expectObservable, behavior, scope }) => {
-    const bobMembership = mockRtcMembership("@bob:example.com", "BDEV000");
-    const carlMembership = mockRtcMembership("@carl:example.com", "CDEV000");
-    const daveMembership = mockRtcMembership("@dave:foo.bar", "DDEV000");
+    const bobMembership = mockCallMembership("@bob:example.com", "BDEV000");
+    const carlMembership = mockCallMembership("@carl:example.com", "CDEV000");
+    const daveMembership = mockCallMembership("@dave:foo.bar", "DDEV000");
 
     const eMarble = "abc";
     const vMarble = "abc";
@@ -123,10 +121,8 @@ test("bob, carl, then bob joining no tracks yet", () => {
     const connectionManager = createConnectionManager$({
       scope: testScope,
       connectionFactory: ecConnectionFactory,
-      localTransport$: constant(null),
-      remoteTransports$: membershipsAndTransports.transports$,
+      inputTransports$: 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.Compatibility],
+  [MatrixRTCMode.Compatibil],
   [MatrixRTCMode.Matrix_2_0],
 ])(
   "expect leave when ElementWidgetActions.HangupCall is called (%s mode)",

src/state/MediaDevices.ts

@@ -212,10 +212,9 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   }
 }
 
-class AudioOutput implements MediaDevice<
-  AudioOutputDeviceLabel,
-  SelectedAudioOutputDevice
-> {
+class AudioOutput
+  implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
+{
   private logger = rootLogger.getChild("[MediaDevices AudioOutput]");
   public readonly available$ = this.scope.behavior(
     availableRawDevices$(
@@ -275,10 +274,9 @@ class AudioOutput implements MediaDevice<
   }
 }
 
-class ControlledAudioOutput implements MediaDevice<
-  AudioOutputDeviceLabel,
-  SelectedAudioOutputDevice
-> {
+class ControlledAudioOutput
+  implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
+{
   private logger = rootLogger.getChild("[MediaDevices ControlledAudioOutput]");
   // We need to subscribe to the raw devices so that the OS does update the input
   // back to what it was before. otherwise we will switch back to the default

src/state/MediaViewModel.ts

@@ -257,7 +257,6 @@ 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<
@@ -407,7 +406,6 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcBackendIdentity: string,
     participant$: Observable<LocalParticipant | RemoteParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -421,7 +419,6 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       scope,
       id,
       userId,
-      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       Track.Source.Microphone,
@@ -547,7 +544,6 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcBackendIdentity: string,
     participant$: Behavior<LocalParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -562,7 +558,6 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
       scope,
       id,
       userId,
-      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       livekitRoom$,
@@ -676,7 +671,6 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcBackendIdentity: string,
     participant$: Observable<RemoteParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -691,7 +685,6 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
       scope,
       id,
       userId,
-      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       livekitRoom$,
@@ -779,7 +772,6 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcBackendIdentity: string,
     participant$: Observable<LocalParticipant | RemoteParticipant>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -793,7 +785,6 @@ 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-2026 Element Creations Ltd.
+Copyright 2025 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -48,7 +48,13 @@ describe("MuteState", () => {
       select(): void {},
     } as unknown as MediaDevice<DeviceLabel, SelectedDevice>;
 
-    const muteState = new MuteState(testScope, deviceStub, true, forceMute$);
+    const muteState = new MuteState(
+      testScope,
+      deviceStub,
+      constant(true),
+      true,
+      forceMute$,
+    );
     let lastEnabled: boolean = false;
     muteState.enabled$.subscribe((enabled) => {
       lastEnabled = enabled;
@@ -157,10 +163,12 @@ describe("MuteStates", () => {
       videoInput: aVideoInput(),
       // other devices are not relevant for this test
     });
-    const muteStates = new MuteStates(testScope, mediaDevices, {
-      audioEnabled: false,
-      videoEnabled: false,
-    });
+    const muteStates = new MuteStates(
+      testScope,
+      mediaDevices,
+      // consider joined
+      constant(true),
+    );
 
     let latestSyncedState: boolean | null = null;
     muteStates.video.setHandler(async (enabled: boolean): Promise<boolean> => {

src/state/MuteStates.ts

@@ -1,6 +1,5 @@
 /*
 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.
@@ -25,6 +24,8 @@ 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";
 
@@ -42,6 +43,12 @@ 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 {
@@ -66,73 +73,76 @@ export class MuteState<Label, Selected> {
   private readonly data$ = this.scope.behavior<MuteStateData>(
     this.canControlDevices$.pipe(
       distinctUntilChanged(),
-      map((canControlDevices) => {
-        logger.info(
-          `MuteState: canControlDevices: ${canControlDevices}, enabled by default: ${this.enabledByDefault}`,
-        );
-        if (!canControlDevices) {
+      withLatestFrom(
+        this.enabledByDefault$,
+        (canControlDevices, enabledByDefault) => {
           logger.info(
-            `MuteState: devices connected: ${canControlDevices}, disabling`,
+            `MuteState: canControlDevices: ${canControlDevices}, enabled by default: ${enabledByDefault}`,
           );
-          // 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 };
-        }
+          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 };
+          }
 
-        // 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;
+          // 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;
 
-          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);
+            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) {
                 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) {
-              syncing = true;
-              sync().catch((err) => {
-                // TODO: better error handling
-                logger.error("MuteState: handler error", err);
-              });
-            }
+            });
+            return (): void => s.unsubscribe();
           });
-          return (): void => s.unsubscribe();
-        });
 
-        return {
-          set: (enabled: boolean): void => set$.next(enabled),
-          toggle: (): void => toggle$.next(),
-          enabled$,
-        };
-      }),
+          return {
+            set: (enabled: boolean): void => set$.next(enabled),
+            toggle: (): void => toggle$.next(),
+            enabled$,
+          };
+        },
+      ),
     ),
   );
 
@@ -150,7 +160,8 @@ export class MuteState<Label, Selected> {
   public constructor(
     private readonly scope: ObservableScope,
     private readonly device: MediaDevice<Label, Selected>,
-    private readonly enabledByDefault: boolean,
+    private readonly joined$: Observable<boolean>,
+    private readonly enabledByConfig: boolean,
     /**
      * An optional observable which, when it emits `true`, will force the mute.
      * Used for video to stop camera when earpiece mode is on.
@@ -165,10 +176,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);
@@ -180,23 +191,22 @@ export class MuteStates {
   public readonly audio = new MuteState(
     this.scope,
     this.mediaDevices.audioInput,
-    this.initialMuteState.audioEnabled,
+    this.joined$,
+    Config.get().media_devices.enable_audio,
     constant(false),
   );
   public readonly video = new MuteState(
     this.scope,
     this.mediaDevices.videoInput,
-    this.initialMuteState.videoEnabled,
+    this.joined$,
+    Config.get().media_devices.enable_video,
     this.isEarpiece$,
   );
 
   public constructor(
     private readonly scope: ObservableScope,
     private readonly mediaDevices: MediaDevices,
-    private readonly initialMuteState: {
-      audioEnabled: boolean;
-      videoEnabled: boolean;
-    },
+    private readonly joined$: Observable<boolean>,
   ) {
     if (widget !== null) {
       // Sync our mute states with the hosting client

src/state/ScreenShare.ts

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

src/state/UserMedia.ts

@@ -75,7 +75,6 @@ export class UserMedia {
           this.scope,
           this.id,
           this.userId,
-          this.rtcBackendIdentity,
           this.participant.value$,
           this.encryptionSystem,
           this.livekitRoom$,
@@ -90,7 +89,6 @@ export class UserMedia {
           this.scope,
           this.id,
           this.userId,
-          this.rtcBackendIdentity,
           this.participant.value$,
           this.encryptionSystem,
           this.livekitRoom$,
@@ -142,7 +140,6 @@ export class UserMedia {
                     scope,
                     `${this.id}:${key}`,
                     this.userId,
-                    this.rtcBackendIdentity,
                     p,
                     this.encryptionSystem,
                     this.livekitRoom$,
@@ -194,7 +191,6 @@ 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

@@ -1,72 +0,0 @@
-/*
-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

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

src/tile/MediaView.tsx

@@ -18,11 +18,7 @@ import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
 import { type EncryptionStatus } from "../state/MediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
-import {
-  showConnectionStats,
-  showHandRaisedTimer,
-  useSetting,
-} from "../settings/settings";
+import { showHandRaisedTimer, useSetting } from "../settings/settings";
 import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
@@ -50,7 +46,6 @@ 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;
 }
@@ -79,13 +74,11 @@ 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);
 
@@ -139,18 +132,14 @@ 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}
-              rtcBackendIdentity={rtcBackendIdentity}
-            />
-          </>
+          <RTCConnectionStats
+            audio={audioStreamStats}
+            video={videoStreamStats}
+            focusUrl={focusUrl}
+          />
         )}
         {/* TODO: Bring this back once encryption status is less broken */}
         {/*encryptionStatus !== EncryptionStatus.Okay && (

src/tile/SpotlightTile.tsx

@@ -70,7 +70,8 @@ interface SpotlightUserMediaItemBaseProps extends SpotlightItemBaseProps {
   videoFit: "contain" | "cover";
 }
 
-interface SpotlightLocalUserMediaItemProps extends SpotlightUserMediaItemBaseProps {
+interface SpotlightLocalUserMediaItemProps
+  extends SpotlightUserMediaItemBaseProps {
   vm: LocalUserMediaViewModel;
 }
 
@@ -84,7 +85,8 @@ const SpotlightLocalUserMediaItem: FC<SpotlightLocalUserMediaItemProps> = ({
 
 SpotlightLocalUserMediaItem.displayName = "SpotlightLocalUserMediaItem";
 
-interface SpotlightRemoteUserMediaItemProps extends SpotlightUserMediaItemBaseProps {
+interface SpotlightRemoteUserMediaItemProps
+  extends SpotlightUserMediaItemBaseProps {
   vm: RemoteUserMediaViewModel;
 }
 

src/useAudioContext.tsx

@@ -22,12 +22,9 @@ import * as controls from "./controls";
  * Play a sound though a given AudioContext. Will take
  * care of connecting the correct buffer and gating
  * through gain.
+ * @param volume The volume to play at.
  * @param ctx The context to play through.
  * @param buffer The buffer to play.
- * @param volume The volume to play at.
- * @param stereoPan The stereo pan to apply.
- * @param delayS Delay in seconds before starting playing.
- * @param abort Optional AbortController that can be used to stop playback.
  * @returns A promise that resolves when the sound has finished playing.
  */
 async function playSound(
@@ -58,11 +55,9 @@ async function playSound(
  * Play a sound though a given AudioContext, looping until stopped. Will take
  * care of connecting the correct buffer and gating
  * through gain.
+ * @param volume The volume to play at.
  * @param ctx The context to play through.
  * @param buffer The buffer to play.
- * @param volume The volume to play at.
- * @param stereoPan The stereo pan to apply.
- * @param delayS Delay in seconds between each loop.
  * @returns A function used to end the sound. This function will return a promise when the sound has stopped.
  */
 function playSoundLooping(
@@ -125,7 +120,7 @@ interface UseAudioContext<S extends string> {
 /**
  * Add an audio context which can be used to play
  * a set of preloaded sounds.
- * @param props The properties for the audio context.
+ * @param props
  * @returns Either an instance that can be used to play sounds, or null if not ready.
  */
 export function useAudioContext<S extends string>(

src/utils/displayname.ts

@@ -77,13 +77,6 @@ export function shouldDisambiguate(
   );
 }
 
-/**
- * Calculates a display name for a member, optionally disambiguating it.
- * @param member - The member to calculate the display name for.
- * @param member.rawDisplayName - The raw display name of the member
- * @param member.userId - The user ID of the member
- * @param disambiguate - Whether to disambiguate the display name.
- */
 export function calculateDisplayName(
   member: { rawDisplayName?: string; userId: string },
   disambiguate: boolean,

src/utils/errors.ts

@@ -19,7 +19,6 @@ 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",
 }
@@ -58,16 +57,9 @@ export class ElementCallError extends Error {
   }
 }
 
-/**
- * Configuration problem due to no MatrixRTC backend/SFU is exposed via .well-known and no fallback configured.
- */
 export class MatrixRTCTransportMissingError extends ElementCallError {
   public domain: string;
 
-  /**
-   * Creates an instance of MatrixRTCTransportMissingError.
-   * @param domain - The domain where the MatrixRTC transport is missing.
-   */
   public constructor(domain: string) {
     super(
       t("error.call_is_not_supported"),
@@ -83,9 +75,6 @@ export class MatrixRTCTransportMissingError extends ElementCallError {
   }
 }
 
-/**
- * Error indicating that the connection to the call was lost and could not be re-established.
- */
 export class ConnectionLostError extends ElementCallError {
   public constructor() {
     super(
@@ -97,16 +86,7 @@ export class ConnectionLostError extends ElementCallError {
   }
 }
 
-/**
- * Error indicating a failure in the membership manager causing the join call
- * operation to fail.
- */
 export class MembershipManagerError extends ElementCallError {
-  /**
-   * Creates an instance of MembershipManagerError.
-   *
-   * @param error - The underlying error that caused the membership manager failure.
-   */
   public constructor(error: Error) {
     super(
       t("error.membership_manager"),
@@ -118,9 +98,6 @@ export class MembershipManagerError extends ElementCallError {
   }
 }
 
-/**
- * Error indicating that end-to-end encryption is not supported in the current environment.
- */
 export class E2EENotSupportedError extends ElementCallError {
   public constructor() {
     super(
@@ -132,14 +109,7 @@ export class E2EENotSupportedError extends ElementCallError {
   }
 }
 
-/**
- * Error indicating an unknown issue occurred during a call operation.
- */
 export class UnknownCallError extends ElementCallError {
-  /**
-   * Creates an instance of UnknownCallError.
-   * @param error - The underlying error that caused the unknown issue.
-   */
   public constructor(error: Error) {
     super(
       t("error.generic"),
@@ -152,14 +122,7 @@ export class UnknownCallError extends ElementCallError {
   }
 }
 
-/**
- * Error indicating a failure to obtain an OpenID token.
- */
 export class FailToGetOpenIdToken extends ElementCallError {
-  /**
-   * Creates an instance of FailToGetOpenIdToken.
-   * @param error - The underlying error that caused the failure.
-   */
   public constructor(error: Error) {
     super(
       t("error.generic"),
@@ -172,31 +135,7 @@ 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.
- */
 export class FailToStartLivekitConnection extends ElementCallError {
-  /**
-   * Creates an instance of FailToStartLivekitConnection.
-   * @param e - An optional error message providing additional context.
-   */
   public constructor(e?: string) {
     super(
       t("error.failed_to_start_livekit"),
@@ -207,9 +146,6 @@ export class FailToStartLivekitConnection extends ElementCallError {
   }
 }
 
-/**
- * Error indicating that a LiveKit's server has hit its track limits.
- */
 export class InsufficientCapacityError extends ElementCallError {
   public constructor() {
     super(
@@ -221,10 +157,6 @@ export class InsufficientCapacityError extends ElementCallError {
   }
 }
 
-/**
- * Error indicating that room creation is restricted by the SFU.
- * Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service)
- */
 export class SFURoomCreationRestrictedError extends ElementCallError {
   public constructor() {
     super(