Update sdk/README.md

Co-authored-by: Robin <robin@robin.town>

.eslintrc.cjs

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 `;
 
 module.exports = {
-  plugins: ["matrix-org", "rxjs"],
+  plugins: ["matrix-org", "rxjs", "jsdoc"],
   extends: [
     "plugin:matrix-org/react",
     "plugin:matrix-org/a11y",
@@ -26,6 +26,13 @@ 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",
@@ -43,6 +50,29 @@ module.exports = {
     // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
     "rxjs/finnish": ["error", { names: { "^this$": false } }],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: ["matrix-widget-api", "matrix-js-sdk"].flatMap((lib) =>
+          ["src", "src/", "src/index", "lib", "lib/", "lib/index"]
+            .map((path) => `${lib}/${path}`)
+            .map((name) => ({ name, message: `Please use ${lib} instead` })),
+        ),
+        patterns: [
+          ...["matrix-widget-api"].map((lib) => ({
+            group: ["src", "src/", "src/**", "lib", "lib/", "lib/**"].map(
+              (path) => `${lib}/${path}`,
+            ),
+            message: `Please use ${lib} instead`,
+          })),
+          // XXX: We use /lib in lots of places, so allow for now.
+          ...["matrix-js-sdk"].map((lib) => ({
+            group: ["src", "src/", "src/**"].map((path) => `${lib}/${path}`),
+            message: `Please use ${lib} instead`,
+          })),
+        ],
+      },
+    ],
   },
   overrides: [
     {
@@ -52,6 +82,23 @@ 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",
+      },
+    },
   ],
   settings: {
     react: {

.github/workflows/build-and-publish-docker.yaml

@@ -23,7 +23,7 @@ jobs:
       packages: write
     steps:
       - name: Check it out
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: 📥 Download artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -42,7 +42,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5.8.0
+        uses: docker/metadata-action@318604b99e75e41977312d83839a89be02ca4893 # v5.9.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: ${{ inputs.docker_tags}}

.github/workflows/build-element-call.yaml

@@ -32,7 +32,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache

.github/workflows/lint.yaml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache

.github/workflows/publish-embedded-packages.yaml

@@ -85,7 +85,7 @@ jobs:
         run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
       - name: Upload
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -100,10 +100,10 @@ jobs:
       ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }}
     permissions:
       contents: read
-      id-token: write # required for the provenance flag on npm publish
+      id-token: write # Allow npm to authenticate as a trusted publisher
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -126,8 +126,6 @@ jobs:
           npm version ${{ needs.versioning.outputs.PREFIXED_VERSION }} --no-git-tag-version
           echo "ARTIFACT_VERSION=$(jq '.version' --raw-output package.json)" >> "$GITHUB_ENV"
           npm publish --provenance --access public --tag ${{ needs.versioning.outputs.TAG }} ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_RELEASE_TOKEN }}
 
       - id: artifact_version
         name: Output artifact version
@@ -144,7 +142,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -199,7 +197,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           path: element-call
 
@@ -212,7 +210,7 @@ jobs:
           path: element-call/embedded/ios/Sources/dist
 
       - name: Checkout element-call-swift
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           repository: element-hq/element-call-swift
           path: element-call-swift
@@ -264,7 +262,7 @@ jobs:
           echo "iOS: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}"
       - name: Add release notes
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
         with:
           append_body: true
           body: |

.github/workflows/publish.yaml

@@ -42,7 +42,7 @@ jobs:
       - name: Create Checksum
         run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
       - name: Upload
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -61,6 +61,7 @@ jobs:
       docker_tags: |
         type=sha,format=short,event=branch
         type=raw,value=${{ github.event.release.tag_name }}
+        type=raw,value=latest
       # Like before, using ${{ env.VERSION }} above doesn't work
   add_docker_release_note:
     needs: publish_docker
@@ -68,7 +69,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Add release note
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
         with:
           append_body: true
           body: |

.github/workflows/test.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache
@@ -33,7 +33,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Enable Corepack
         run: corepack enable
       - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4

.github/workflows/translations-download.yaml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: Enable Corepack
         run: corepack enable
@@ -42,7 +42,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
+        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

.github/workflows/translations-upload.yaml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: Upload
         uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1

.node-version

@@ -1 +1 @@
-22
+24

codecov.yaml

@@ -13,7 +13,6 @@ coverage:
         informational: true
     patch:
       default:
-        # Encourage (but don't enforce) 80% coverage on all lines that a PR
+        # Enforce 80% coverage on all lines that a PR
         # touches
         target: 80%
-        informational: true

config/config_netlify_preview.json

@@ -18,7 +18,7 @@
     "api_host": "https://posthog-element-call.element.io"
   },
   "rageshake": {
-    "submit_url": "https://element.io/bugreports/submit"
+    "submit_url": "https://rageshakes.element.io/api/submit"
   },
   "sentry": {
     "environment": "netlify-pr-preview",

config/otel_dev/README.md

@@ -1,5 +1,12 @@
 # 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

@@ -47,7 +47,7 @@ services:
       - ecbackend
 
   livekit:
-    image: livekit/livekit-server:latest
+    image: livekit/livekit-server:v1.9.4
     pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
@@ -67,7 +67,7 @@ services:
       - ecbackend
 
   livekit-1:
-    image: livekit/livekit-server:latest
+    image: livekit/livekit-server:v1.9.4
     pull_policy: always
     hostname: livekit-sfu-1
     command: --dev --config /etc/livekit.yaml

docs/self-hosting.md

@@ -136,8 +136,8 @@ handle @jwt_service {
   reverse_proxy http://[::1]:8080 {
     header_up Host {host}
     header_up X-Forwarded-Server {host}
-    header_up X-Real-IP {remote_addr}
-    header_up X-Forwarded-For {remote_addr}
+    header_up X-Real-IP {remote_host}
+    header_up X-Forwarded-For {remote_host}
   }
 }
 
@@ -146,8 +146,8 @@ handle {
   reverse_proxy http://localhost:7880 {
     header_up Host {host}
     header_up X-Forwarded-Server {host}
-    header_up X-Real-IP {remote_addr}
-    header_up X-Forwarded-For {remote_addr}
+    header_up X-Real-IP {remote_host}
+    header_up X-Forwarded-For {remote_host}
   }
 }
 ```

docs/url-params.md

@@ -96,6 +96,6 @@ These parameters are only supported in the [embedded](./embedded-standalone.md)
 | -------------------- | -------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `posthogApiHost`     | Posthog server URL                                                         | No       | e.g. `https://posthog-element-call.element.io`. Only supported in embedded package. In full package the value from config is used. |
 | `posthogApiKey`      | Posthog project API key                                                    | No       | Only supported in embedded package. In full package the value from config is used.                                                 |
-| `rageshakeSubmitUrl` | Rageshake server URL endpoint                                              | No       | e.g. `https://element.io/bugreports/submit`. In full package the value from config is used.                                        |
+| `rageshakeSubmitUrl` | Rageshake server URL endpoint                                              | No       | e.g. `https://rageshakes.element.io/api/submit`. In full package the value from config is used.                                    |
 | `sentryDsn`          | Sentry [DSN](https://docs.sentry.io/concepts/key-terms/dsn-explainer/)     | No       | In full package the value from config is used.                                                                                     |
 | `sentryEnvironment`  | Sentry [environment](https://docs.sentry.io/concepts/key-terms/key-terms/) | No       | In full package the value from config is used.                                                                                     |

embedded/android/gradle/libs.versions.toml

@@ -2,11 +2,11 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format
 
 [versions]
-android_gradle_plugin = "8.11.1"
+android_gradle_plugin = "8.13.1"
 
 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.34.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.35.0" }

knip.ts

@@ -9,7 +9,7 @@ import { type KnipConfig } from "knip";
 
 export default {
   vite: {
-    config: ["vite.config.ts", "vite-embedded.config.ts"],
+    config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
   },
   entry: ["src/main.tsx", "i18next-parser.config.ts"],
   ignoreBinaries: [
@@ -34,10 +34,6 @@ 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

@@ -64,6 +64,14 @@
   "developer_mode": {
     "always_show_iphone_earpiece": "Show iPhone earpiece option on all platforms",
     "crypto_version": "Crypto version: {{version}}",
+    "custom_livekit_url": {
+      "current_url": "Currently set to: ",
+      "from_config": "Currently, no overwrite is set. Url from well-known or config is used.",
+      "label": "Custom Livekit-url",
+      "reset": "Reset overwrite",
+      "save": "Save",
+      "saving": "Saving..."
+    },
     "debug_tile_layout_label": "Debug tile layout",
     "device_id": "Device ID: {{id}}",
     "duplicate_tiles_label": "Number of additional tile copies per participant",
@@ -100,11 +108,14 @@
     "connection_lost_description": "You were disconnected from the call.",
     "e2ee_unsupported": "Incompatible browser",
     "e2ee_unsupported_description": "Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.",
+    "failed_to_start_livekit": "Failed to start Livekit connection",
     "generic": "Something went wrong",
     "generic_description": "Submitting debug logs will help us track down the problem.",
     "insufficient_capacity": "Insufficient capacity",
     "insufficient_capacity_description": "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.",
     "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.",
     "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

@@ -13,6 +13,8 @@
     "build:embedded": "yarn build:full --config vite-embedded.config.js",
     "build:embedded:production": "yarn build:embedded",
     "build:embedded:development": "yarn build:embedded --mode development",
+    "build:sdk": "yarn build:full --config vite-sdk.config.js",
+    "build:sdk:development": "yarn build:sdk --mode development",
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
@@ -40,21 +42,14 @@
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
-    "@formatjs/intl-durationformat": "^0.7.0",
+    "@formatjs/intl-durationformat": "^0.9.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.5.5",
+    "@livekit/track-processors": "^0.6.0 || ^0.7.1",
     "@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.56.1",
+    "@playwright/test": "^1.57.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
@@ -67,11 +62,10 @@
     "@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",
-    "@types/node": "^22.0.0",
+    "@types/node": "^24.0.0",
     "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^19.0.0",
@@ -93,6 +87,7 @@
     "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",
@@ -101,7 +96,7 @@
     "eslint-plugin-unicorn": "^56.0.0",
     "fetch-mock": "11.1.5",
     "global-jsdom": "^26.0.0",
-    "i18next": "^24.0.0",
+    "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^9.1.0",
     "jsdom": "^26.0.0",
@@ -109,8 +104,9 @@
     "livekit-client": "^2.13.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=toger5/sticky-events&commit=e7f5bec51b6f70501a025b79fe5021c933385b21",
-    "matrix-widget-api": "^1.13.0",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-widget-api": "^1.14.0",
+    "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
@@ -121,7 +117,7 @@
     "qrcode": "^1.5.4",
     "react": "19",
     "react-dom": "19",
-    "react-i18next": "^15.0.0",
+    "react-i18next": "^16.0.0 <16.1.0",
     "react-router-dom": "^7.0.0",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
@@ -133,6 +129,7 @@
     "vite": "^7.0.0",
     "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
+    "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^3.0.0",
     "vitest-axe": "^1.0.0-pre.3"

playwright.config.ts

@@ -38,6 +38,7 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
+      testIgnore: "**/mobile/**",
       use: {
         ...devices["Desktop Chrome"],
         permissions: [
@@ -56,9 +57,9 @@ export default defineConfig({
         },
       },
     },
-
     {
       name: "firefox",
+      testIgnore: "**/mobile/**",
       use: {
         ...devices["Desktop Firefox"],
         ignoreHTTPSErrors: true,
@@ -70,6 +71,27 @@ export default defineConfig({
         },
       },
     },
+    {
+      name: "mobile",
+      testMatch: "**/mobile/**",
+      use: {
+        ...devices["Pixel 7"],
+        ignoreHTTPSErrors: true,
+        permissions: [
+          "clipboard-write",
+          "clipboard-read",
+          "microphone",
+          "camera",
+        ],
+        launchOptions: {
+          args: [
+            "--use-fake-ui-for-media-stream",
+            "--use-fake-device-for-media-stream",
+            "--mute-audio",
+          ],
+        },
+      },
+    },
 
     // No safari for now, until I find a solution to fix `Not allowed to request resource` due to calling
     // clear http to the homeserver

playwright/errors.spec.ts

@@ -7,6 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "@playwright/test";
 
+import { createJTWToken } from "./fixtures/jwt-token";
+
 test("Should show error screen if fails to get JWT token", async ({ page }) => {
   await page.goto("/");
 
@@ -75,7 +77,12 @@ test("Should automatically retry non fatal JWT errors", async ({
 
 test("Should show error screen if call creation is restricted", async ({
   page,
+  browserName,
 }) => {
+  test.skip(
+    browserName === "firefox",
+    "The is test is not working on firefox CI environment.",
+  );
   await page.goto("/");
 
   // We need the socket connection to fail, but this cannot be done by using the websocket route.
@@ -88,7 +95,7 @@ test("Should show error screen if call creation is restricted", async ({
         contentType: "application/json",
         body: JSON.stringify({
           url: "wss://badurltotricktest/livekit/sfu",
-          jwt: "FAKE",
+          jwt: createJTWToken("@fake:user", "!fake:room"),
         }),
       }),
   );

playwright/fixtures/fixture-mobile-create.ts

@@ -0,0 +1,73 @@
+/*
+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 { type Browser, type Page, test, expect } from "@playwright/test";
+
+export interface MobileCreateFixtures {
+  asMobile: {
+    creatorPage: Page;
+    inviteLink: string;
+  };
+}
+
+export const mobileTest = test.extend<MobileCreateFixtures>({
+  asMobile: async ({ browser }, pUse) => {
+    const fixtures = await createCallAndInvite(browser);
+    await pUse({
+      creatorPage: fixtures.page,
+      inviteLink: fixtures.inviteLink,
+    });
+  },
+});
+
+/**
+ * Create a call and generate an invite link
+ */
+async function createCallAndInvite(
+  browser: Browser,
+): Promise<{ page: Page; inviteLink: string }> {
+  const creatorContext = await browser.newContext({ reducedMotion: "reduce" });
+  const creatorPage = await creatorContext.newPage();
+
+  await creatorPage.goto("/");
+
+  // ========
+  // ARRANGE: The first user creates a call as guest, join it, then click the invite button to copy the invite link
+  // ========
+  await creatorPage.getByTestId("home_callName").click();
+  await creatorPage.getByTestId("home_callName").fill("Welcome");
+  await creatorPage.getByTestId("home_displayName").click();
+  await creatorPage.getByTestId("home_displayName").fill("Inviter");
+  await creatorPage.getByTestId("home_go").click();
+  await expect(creatorPage.locator("video")).toBeVisible();
+
+  await creatorPage
+    .getByRole("button", { name: "Continue in browser" })
+    .click();
+  // join
+  await creatorPage.getByTestId("lobby_joinCall").click();
+
+  // Get the invite link
+  await creatorPage.getByRole("button", { name: "Invite" }).click();
+  await expect(
+    creatorPage.getByRole("heading", { name: "Invite to this call" }),
+  ).toBeVisible();
+  await expect(creatorPage.getByRole("img", { name: "QR Code" })).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await creatorPage.getByTestId("modal_inviteLink").click();
+
+  const inviteLink = (await creatorPage.evaluate(
+    "navigator.clipboard.readText()",
+  )) as string;
+  expect(inviteLink).toContain("room/#/");
+
+  return {
+    page: creatorPage,
+    inviteLink,
+  };
+}

playwright/fixtures/jwt-token.ts

@@ -0,0 +1,22 @@
+/*
+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.
+*/
+
+export function createJTWToken(sub: string, room: string): string {
+  return [
+    {}, // header
+    {
+      // payload
+      sub,
+      video: {
+        room,
+      },
+    },
+    {}, // signature
+  ]
+    .map((d) => global.btoa(JSON.stringify(d)))
+    .join(".");
+}

playwright/fixtures/widget-user.ts

@@ -67,7 +67,6 @@ 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> => {
@@ -111,19 +110,27 @@ async function registerUser(
   await page.getByRole("textbox", { name: "Confirm password" }).click();
   await page.getByRole("textbox", { name: "Confirm password" }).fill(PASSWORD);
   await page.getByRole("button", { name: "Register" }).click();
-  const continueButton = page.getByRole("button", { name: "Continue" });
-  try {
-    await expect(continueButton).toBeVisible({ timeout: 5000 });
-    await page
-      .getByRole("textbox", { name: "Password", exact: true })
-      .fill(PASSWORD);
-    await continueButton.click();
-  } catch {
-    // continueButton not visible, continue as normal
-  }
+
   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(() =>
@@ -159,7 +166,11 @@ export const widgetTest = test.extend<MyFixtures>({
     } = await registerUser(browser, userB);
 
     // Invite the second user
-    await ewPage1.getByRole("button", { name: "Add", exact: true }).click();
+    await ewPage1
+      .getByRole("navigation", { name: "Room list" })
+      .getByRole("button", { name: "New conversation" })
+      .click();
+
     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();

playwright/mobile/create-call-mobile.spec.ts

@@ -0,0 +1,115 @@
+/*
+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.
+*/
+
+import { expect, test } from "@playwright/test";
+
+import { mobileTest } from "../fixtures/fixture-mobile-create.ts";
+
+test("@mobile Start a new call then leave and show the feedback screen", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill("HelloCall");
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill("John Doe");
+  await page.getByTestId("home_go").click();
+
+  // await page.pause();
+  await expect(page.locator("video")).toBeVisible();
+  await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
+
+  await page.getByRole("button", { name: "Continue in browser" }).click();
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+
+  // Ensure that the call is connected
+  await page
+    .locator("div")
+    .filter({ hasText: /^HelloCall$/ })
+    .click();
+  // Check the number of participants
+  await expect(page.locator("div").filter({ hasText: /^1$/ })).toBeVisible();
+  // The tooltip with the name should be visible
+  await expect(page.getByTestId("name_tag")).toContainText("John Doe");
+
+  // leave the call
+  await page.getByTestId("incall_leave").click();
+  await expect(page.getByRole("heading")).toContainText(
+    "John Doe, your call has ended. How did it go?",
+  );
+  await expect(page.getByRole("main")).toContainText(
+    "Why not finish by setting up a password to keep your account?",
+  );
+
+  await expect(
+    page.getByRole("link", { name: "Not now, return to home screen" }),
+  ).toBeVisible();
+});
+
+mobileTest(
+  "Test earpiece overlay in controlledAudioDevices mode",
+  async ({ asMobile, browser }) => {
+    test.slow(); // Triples the timeout
+    const { creatorPage, inviteLink } = asMobile;
+
+    // ========
+    // ACT: The other user use the invite link to join the call as a guest
+    // ========
+    const guestInviteeContext = await browser.newContext({
+      reducedMotion: "reduce",
+    });
+    const guestPage = await guestInviteeContext.newPage();
+    await guestPage.goto(inviteLink + "&controlledAudioDevices=true");
+
+    await guestPage
+      .getByRole("button", { name: "Continue in browser" })
+      .click();
+
+    await guestPage.getByTestId("joincall_displayName").fill("Invitee");
+    await expect(guestPage.getByTestId("joincall_joincall")).toBeVisible();
+    await guestPage.getByTestId("joincall_joincall").click();
+    await guestPage.getByTestId("lobby_joinCall").click();
+
+    // ========
+    // ASSERT: check that there are two members in the call
+    // ========
+
+    // There should be two participants now
+    await expect(
+      guestPage.getByTestId("roomHeader_participants_count"),
+    ).toContainText("2");
+    expect(await guestPage.getByTestId("videoTile").count()).toBe(2);
+
+    // Same in creator page
+    await expect(
+      creatorPage.getByTestId("roomHeader_participants_count"),
+    ).toContainText("2");
+    expect(await creatorPage.getByTestId("videoTile").count()).toBe(2);
+
+    // TEST: control audio devices from the invitee page
+
+    await guestPage.evaluate(() => {
+      window.controls.setAvailableAudioDevices([
+        { id: "speaker", name: "Speaker", isSpeaker: true },
+        { id: "earpiece", name: "Handset", isEarpiece: true },
+        { id: "headphones", name: "Headphones" },
+      ]);
+      window.controls.setAudioDevice("earpiece");
+    });
+    await expect(
+      guestPage.getByRole("heading", { name: "Handset Mode" }),
+    ).toBeVisible();
+    await expect(
+      guestPage.getByRole("button", { name: "Back to Speaker Mode" }),
+    ).toBeVisible();
+
+    // Should auto-mute the video when earpiece is selected
+    await expect(guestPage.getByTestId("incall_videomute")).toBeDisabled();
+  },
+);

playwright/sfu-reconnect-bug.spec.ts

@@ -68,11 +68,6 @@ test("When creator left, avoid reconnect to the same SFU", async ({
     reducedMotion: "reduce",
   });
   const guestCPage = await guestC.newPage();
-  let sfuGetCallCount = 0;
-  await guestCPage.route("**/livekit/jwt/sfu/get", async (route) => {
-    sfuGetCallCount++;
-    await route.continue();
-  });
   // Track WebSocket connections
   let wsConnectionCount = 0;
   await guestCPage.routeWebSocket("**", (ws) => {
@@ -100,5 +95,4 @@ test("When creator left, avoid reconnect to the same SFU", async ({
   // https://github.com/element-hq/element-call/issues/3344
   // The app used to request a new jwt token then to reconnect to the SFU
   expect(wsConnectionCount).toBe(1);
-  expect(sfuGetCallCount).toBe(2 /* the first one is for the warmup */);
 });

sdk/README.md

@@ -0,0 +1,59 @@
+# SDK mode
+
+EC can be build in sdk mode. This will result in a compiled js file that can be imported in very simple webapps.
+
+It allows to use matrixRTC in combination with livekit without relying on element call.
+
+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
+```
+
+## 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:
+`/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
+userId = $matrix_user_id
+deviceId = $org.matrix.msc3819.matrix_device_id
+baseUrl = $org.matrix.msc4039.matrix_base_url
+```
+
+`parentUrl = // will be inserted automatically`
+
+Full template use as `<widgetUrl>`:
+
+```
+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
+```
+
+the `$` prefixed variables will be replaced by EW on widget instantiation. (e.g. `$matrix_user_id` -> `@user:example.com` (url encoding will also be applied automatically by EW) -> `%40user%3Aexample.com`)

sdk/helper.ts

@@ -0,0 +1,55 @@
+/*
+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.
+*/
+
+/**
+ * This file contains helper functions and types for the MatrixRTC SDK.
+ */
+
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { scan } from "rxjs";
+
+import { widget as _widget } from "../src/widget";
+import { type LivekitRoomItem } from "../src/state/CallViewModel/CallViewModel";
+
+export const logger = rootLogger.getChild("[MatrixRTCSdk]");
+
+if (!_widget) throw Error("No widget. This webapp can only start as a widget");
+export const widget = _widget;
+
+export const tryMakeSticky = (): void => {
+  logger.info("try making sticky MatrixRTCSdk");
+  void widget.api
+    .setAlwaysOnScreen(true)
+    .then(() => {
+      logger.info("sticky MatrixRTCSdk");
+    })
+    .catch((error) => {
+      logger.error("failed to make sticky MatrixRTCSdk", error);
+    });
+};
+export const TEXT_LK_TOPIC = "matrixRTC";
+/**
+ * simple helper operator to combine the last emitted and the current emitted value of a rxjs observable
+ *
+ * I think there should be a builtin for this but i did not find it...
+ */
+export const currentAndPrev = scan<
+  LivekitRoomItem[],
+  {
+    prev: LivekitRoomItem[];
+    current: LivekitRoomItem[];
+  }
+>(
+  ({ current: lastCurrentVal }, items) => ({
+    prev: lastCurrentVal,
+    current: items,
+  }),
+  {
+    prev: [],
+    current: [],
+  },
+);

sdk/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+  <head>
+    <title>MatrixRTC Widget</title>
+    <meta charset="utf-8" />
+    <script type="module">
+      // TODO use the url where the matrixrtc-sdk.js file from dist is hosted
+      import { createMatrixRTCSdk } from "http://localhost:8123/matrixrtc-sdk.js";
+
+      try {
+        window.matrixRTCSdk = await createMatrixRTCSdk(
+          "com.github.toger5.rtc-application-type", // rtc application type
+        );
+        console.info("createMatrixRTCSdk was created!");
+      } catch (e) {
+        console.error("createMatrixRTCSdk", e);
+      }
+      const sdk = window.matrixRTCSdk;
+
+      console.info("matrixRTCSdk join ", sdk);
+      const connectionState = sdk.join();
+      console.info("matrixRTCSdk joined");
+
+      const div = document.getElementById("data");
+      div.innerHTML = "<h3>Data:</h3>";
+
+      sdk.data$.subscribe((data) => {
+        const child = document.createElement("p");
+        child.innerHTML = JSON.stringify(data);
+        div.appendChild(child);
+      });
+
+      sdk.members$.subscribe((memberObjects) => {
+        const div = document.getElementById("members");
+        div.innerHTML = "<h3>Members:</h3>";
+
+        // Create member list
+        const members = memberObjects.map((member) => member.membership.sender);
+        console.info("members changed", members);
+        for (const m of members) {
+          console.info("member", m);
+          const child = document.createElement("p");
+          child.innerHTML = m;
+          div.appendChild(child);
+        }
+      });
+
+      sdk.connected$.subscribe((connected) => {
+        console.info("connected changed", connected);
+        const div = document.getElementById("connect_status");
+        div.innerHTML = connected ? "Connected" : "Disconnected";
+      });
+    </script>
+  </head>
+  <body>
+    <div
+      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!' })">
+        Send Text
+      </button>
+      <div id="members"></div>
+      <div id="data"></div>
+    </div>
+  </body>
+</html>

sdk/main.ts

@@ -0,0 +1,308 @@
+/*
+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.
+*/
+
+/**
+ * This file is the entrypoint for the sdk build of element call: `yarn build:sdk`
+ * use in widgets.
+ * It exposes the `createMatrixRTCSdk` which creates the `MatrixRTCSdk` interface (see below) that
+ * can be used to join a rtc session and exchange realtime data.
+ * It takes care of all the tricky bits:
+ *  - sending delayed events
+ *  - finding the right sfu
+ *  - handling the media stream
+ *  - sending join/leave state or sticky events
+ *  - setting up encryption and scharing keys
+ */
+
+import {
+  combineLatest,
+  map,
+  type Observable,
+  of,
+  shareReplay,
+  Subject,
+  switchMap,
+  tap,
+} from "rxjs";
+import {
+  type CallMembership,
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/lib/matrixrtc";
+import {
+  type Room as LivekitRoom,
+  type TextStreamReader,
+  type LocalParticipant,
+  type RemoteParticipant,
+} from "livekit-client";
+
+// TODO how can this get fixed? to just be part of `livekit-client`
+// Can this be done in the tsconfig.json
+import { type TextStreamInfo } from "../node_modules/livekit-client/dist/src/room/types";
+import { type Behavior, constant } from "../src/state/Behavior";
+import { createCallViewModel$ } from "../src/state/CallViewModel/CallViewModel";
+import { ObservableScope } from "../src/state/ObservableScope";
+import { getUrlParams } from "../src/UrlParams";
+import { MuteStates } from "../src/state/MuteStates";
+import { MediaDevices } from "../src/state/MediaDevices";
+import { E2eeType } from "../src/e2ee/e2eeType";
+import {
+  currentAndPrev,
+  logger,
+  TEXT_LK_TOPIC,
+  tryMakeSticky,
+  widget,
+} from "./helper";
+import { ElementWidgetActions } from "../src/widget";
+import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";
+
+interface MatrixRTCSdk {
+  /**
+   * observe connected$ to track the state.
+   * @returns
+   */
+  join: () => void;
+  /** @throws on leave errors */
+  leave: () => void;
+  data$: Observable<{ sender: string; data: string }>;
+  /**
+   * flattened list of members
+   */
+  members$: Behavior<
+    {
+      connection: Connection | null;
+      membership: CallMembership;
+      participant: LocalParticipant | RemoteParticipant | null;
+    }[]
+  >;
+  /** Use the LocalMemberConnectionState returned from `join` for a more detailed connection state  */
+  connected$: Behavior<boolean>;
+  sendData?: (data: unknown) => Promise<void>;
+}
+
+export async function createMatrixRTCSdk(
+  application: string = "m.call",
+  id: string = "",
+): Promise<MatrixRTCSdk> {
+  logger.info("Hello");
+  const client = await widget.client;
+  logger.info("client created");
+  const scope = new ObservableScope();
+  const { roomId } = getUrlParams();
+  if (roomId === null) throw Error("could not get roomId from url params");
+
+  const room = client.getRoom(roomId);
+  if (room === null) throw Error("could not get room from client");
+
+  const mediaDevices = new MediaDevices(scope);
+  const muteStates = new MuteStates(scope, mediaDevices, constant(true));
+  const slot = { application, id };
+  const rtcSession = new MatrixRTCSession(
+    client,
+    room,
+    MatrixRTCSession.sessionMembershipsForSlot(room, slot),
+    slot,
+  );
+  const callViewModel = createCallViewModel$(
+    scope,
+    rtcSession,
+    room,
+    mediaDevices,
+    muteStates,
+    { encryptionSystem: { kind: E2eeType.PER_PARTICIPANT } },
+    of({}),
+    of({}),
+    constant({ supported: false, processor: undefined }),
+  );
+  logger.info("CallViewModelCreated");
+  // create data listener
+  const data$ = new Subject<{ sender: string; data: string }>();
+
+  const lkTextStreamHandlerFunction = async (
+    reader: TextStreamReader,
+    participantInfo: { identity: string },
+    livekitRoom: LivekitRoom,
+  ): Promise<void> => {
+    const info = reader.info;
+    logger.info(
+      `Received text stream from ${participantInfo.identity}\n` +
+        `  Topic: ${info.topic}\n` +
+        `  Timestamp: ${info.timestamp}\n` +
+        `  ID: ${info.id}\n` +
+        `  Size: ${info.size}`, // Optional, only available if the stream was sent with `sendText`
+    );
+
+    const participants = callViewModel.livekitRoomItems$.value.find(
+      (i) => i.livekitRoom === livekitRoom,
+    )?.participants;
+    if (participants && participants.includes(participantInfo.identity)) {
+      const text = await reader.readAll();
+      logger.info(`Received text: ${text}`);
+      data$.next({ sender: participantInfo.identity, data: text });
+    } else {
+      logger.warn(
+        "Received text from unknown participant",
+        participantInfo.identity,
+      );
+    }
+  };
+
+  const livekitRoomItemsSub = callViewModel.livekitRoomItems$
+    .pipe(
+      tap((beforecurrentAndPrev) => {
+        logger.info(
+          `LiveKit room items updated: ${beforecurrentAndPrev.length}`,
+          beforecurrentAndPrev,
+        );
+      }),
+      currentAndPrev,
+      tap((aftercurrentAndPrev) => {
+        logger.info(
+          `LiveKit room items updated: ${aftercurrentAndPrev.current.length}, ${aftercurrentAndPrev.prev.length}`,
+          aftercurrentAndPrev,
+        );
+      }),
+    )
+    .subscribe({
+      next: ({ prev, current }) => {
+        const prevRooms = prev.map((i) => i.livekitRoom);
+        const currentRooms = current.map((i) => i.livekitRoom);
+        const addedRooms = currentRooms.filter((r) => !prevRooms.includes(r));
+        const removedRooms = prevRooms.filter((r) => !currentRooms.includes(r));
+        addedRooms.forEach((r) => {
+          logger.info(`Registering text stream handler for room `);
+          r.registerTextStreamHandler(
+            TEXT_LK_TOPIC,
+            (reader, participantInfo) =>
+              void lkTextStreamHandlerFunction(reader, participantInfo, r),
+          );
+        });
+        removedRooms.forEach((r) => {
+          logger.info(`Unregistering text stream handler for room `);
+          r.unregisterTextStreamHandler(TEXT_LK_TOPIC);
+        });
+      },
+      complete: () => {
+        logger.info("Livekit room items subscription completed");
+        for (const item of callViewModel.livekitRoomItems$.value) {
+          logger.info("unregistering room item from room", item.url);
+          item.livekitRoom.unregisterTextStreamHandler(TEXT_LK_TOPIC);
+        }
+      },
+    });
+
+  // create sendData function
+  const sendFn: Behavior<(data: string) => Promise<TextStreamInfo>> =
+    scope.behavior(
+      callViewModel.localMatrixLivekitMember$.pipe(
+        switchMap((m) => {
+          if (!m)
+            return of((data: string): never => {
+              throw Error("local membership not yet ready.");
+            });
+          return m.participant.value$.pipe(
+            map((p) => {
+              if (p === null) {
+                return (data: string): never => {
+                  throw Error("local participant not yet ready to send data.");
+                };
+              } else {
+                return async (data: string): Promise<TextStreamInfo> =>
+                  p.sendText(data, { topic: TEXT_LK_TOPIC });
+              }
+            }),
+          );
+        }),
+      ),
+    );
+
+  const sendData = async (data: unknown): Promise<void> => {
+    const dataString = JSON.stringify(data);
+    logger.info("try sending: ", dataString);
+    try {
+      await Promise.resolve();
+      const info = await sendFn.value(dataString);
+      logger.info(`Sent text with stream ID: ${info.id}`);
+    } catch (e) {
+      logger.error("failed sending: ", dataString, e);
+    }
+  };
+
+  // after hangup gets called
+  const leaveSubs = callViewModel.leave$.subscribe(() => {
+    const scheduleWidgetCloseOnLeave = async (): Promise<void> => {
+      const leaveResolver = Promise.withResolvers<void>();
+      logger.info("waiting for RTC leave");
+      rtcSession.on(MatrixRTCSessionEvent.JoinStateChanged, (isJoined) => {
+        logger.info("received RTC join update: ", isJoined);
+        if (!isJoined) leaveResolver.resolve();
+      });
+      await leaveResolver.promise;
+      logger.info("send Unstick");
+      await widget.api
+        .setAlwaysOnScreen(false)
+        .catch((e) =>
+          logger.error(
+            "Failed to set call widget `alwaysOnScreen` to false",
+            e,
+          ),
+        );
+      logger.info("send Close");
+      await widget.api.transport
+        .send(ElementWidgetActions.Close, {})
+        .catch((e) => logger.error("Failed to send close action", e));
+    };
+
+    // schedule close first and then leave (scope.end)
+    void scheduleWidgetCloseOnLeave();
+
+    // actual hangup (ending scope will send the leave event.. its kinda odd. since you might end up closing the widget too fast)
+    scope.end();
+  });
+
+  logger.info("createMatrixRTCSdk done");
+
+  return {
+    join: (): void => {
+      // first lets try making the widget sticky
+      tryMakeSticky();
+      callViewModel.join();
+    },
+    leave: (): void => {
+      callViewModel.hangup();
+      leaveSubs.unsubscribe();
+      livekitRoomItemsSub.unsubscribe();
+    },
+    data$,
+    connected$: callViewModel.connected$,
+    members$: scope.behavior(
+      callViewModel.matrixLivekitMembers$.pipe(
+        switchMap((members) => {
+          const listOfMemberObservables = members.map((member) =>
+            combineLatest([
+              member.connection$,
+              member.membership$,
+              member.participant.value$,
+            ]).pipe(
+              map(([connection, membership, participant]) => ({
+                connection,
+                membership,
+                participant,
+              })),
+              // using shareReplay instead of a Behavior here because the behavior would need
+              // a tricky scope.end() setup.
+              shareReplay({ bufferSize: 1, refCount: true }),
+            ),
+          );
+          return combineLatest(listOfMemberObservables);
+        }),
+      ),
+      [],
+    ),
+    sendData,
+  };
+}

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

@@ -0,0 +1,147 @@
+/* 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/UrlParams.test.ts

@@ -332,6 +332,42 @@ describe("UrlParams", () => {
       expect(computeUrlParams("?intent=join_existing").skipLobby).toBe(false);
     });
   });
+
+  describe("noiseSuppression", () => {
+    it("defaults to true", () => {
+      expect(computeUrlParams().noiseSuppression).toBe(true);
+    });
+
+    it("is parsed", () => {
+      expect(
+        computeUrlParams("?intent=start_call&noiseSuppression=true")
+          .noiseSuppression,
+      ).toBe(true);
+      expect(
+        computeUrlParams("?intent=start_call&noiseSuppression&bar=foo")
+          .noiseSuppression,
+      ).toBe(true);
+      expect(computeUrlParams("?noiseSuppression=false").noiseSuppression).toBe(
+        false,
+      );
+    });
+  });
+
+  describe("echoCancellation", () => {
+    it("defaults to true", () => {
+      expect(computeUrlParams().echoCancellation).toBe(true);
+    });
+
+    it("is parsed", () => {
+      expect(computeUrlParams("?echoCancellation=true").echoCancellation).toBe(
+        true,
+      );
+      expect(computeUrlParams("?echoCancellation=false").echoCancellation).toBe(
+        false,
+      );
+    });
+  });
+
   describe("header", () => {
     it("uses header if provided", () => {
       expect(computeUrlParams("?header=app_bar&hideHeader=true").header).toBe(

src/UrlParams.ts

@@ -233,6 +233,17 @@ export interface UrlConfiguration {
    */
   waitForCallPickup: boolean;
 
+  /**
+   * Whether to enable echo cancellation for audio capture.
+   * Defaults to true.
+   */
+  echoCancellation?: boolean;
+  /**
+   * Whether to enable noise suppression for audio capture.
+   * Defaults to true.
+   */
+  noiseSuppression?: boolean;
+
   callIntent?: RTCCallIntent;
 }
 interface IntentAndPlatformDerivedConfiguration {
@@ -250,7 +261,8 @@ interface IntentAndPlatformDerivedConfiguration {
 // 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,
+  extends
+    UrlProperties,
     UrlConfiguration,
     IntentAndPlatformDerivedConfiguration {}
 
@@ -525,6 +537,8 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     ]),
     waitForCallPickup: parser.getFlag("waitForCallPickup"),
     autoLeaveWhenOthersLeft: parser.getFlag("autoLeave"),
+    noiseSuppression: parser.getFlagParam("noiseSuppression", true),
+    echoCancellation: parser.getFlagParam("echoCancellation", true),
   };
 
   // Log the final configuration for debugging purposes.

src/__snapshots__/AppBar.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`AppBar > renders 1`] = `
         class="nav leftNav"
       >
         <button
-          aria-labelledby="«r0»"
+          aria-labelledby="_r_0_"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           role="button"

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-«r4»"
+  aria-labelledby="radix-_r_4_"
   class="overlay animate modal dialog _glass_sepwu_8"
   data-state="open"
-  id="radix-«r3»"
+  id="radix-_r_3_"
   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-«r4»"
+        id="radix-_r_4_"
       >
         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-«ra»"
+  aria-labelledby="radix-_r_a_"
   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-«r9»"
+  id="radix-_r_9_"
   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-«ra»"
+        id="radix-_r_a_"
         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-«r4»"
+  aria-labelledby="radix-_r_4_"
   class="overlay animate toast"
   data-state="open"
-  id="radix-«r3»"
+  id="radix-_r_3_"
   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-«r4»"
+    id="radix-_r_4_"
   >
     Hello world!
   </h3>

src/analytics/PosthogAnalytics.ts

@@ -247,9 +247,8 @@ export class PosthogAnalytics {
           // wins, and the first writer will send tracking with an ID that doesn't match the one on the server
           // until the next time account data is refreshed and this function is called (most likely on next
           // page load). This will happen pretty infrequently, so we can tolerate the possibility.
-          const accountDataAnalyticsId = analyticsIdGenerator();
-          await this.setAccountAnalyticsId(accountDataAnalyticsId);
-          analyticsID = await this.hashedEcAnalyticsId(accountDataAnalyticsId);
+          analyticsID = analyticsIdGenerator();
+          await this.setAccountAnalyticsId(analyticsID);
         }
       } catch (e) {
         // The above could fail due to network requests, but not essential to starting the application,
@@ -270,37 +269,14 @@ export class PosthogAnalytics {
 
   private async getAnalyticsId(): Promise<string | null> {
     const client: MatrixClient = window.matrixclient;
-    let accountAnalyticsId: string | null;
     if (widget) {
-      accountAnalyticsId = getUrlParams().posthogUserId;
+      return getUrlParams().posthogUserId;
     } else {
       const accountData = await client.getAccountDataFromServer(
         PosthogAnalytics.ANALYTICS_EVENT_TYPE,
       );
-      accountAnalyticsId = accountData?.id ?? null;
+      return accountData?.id ?? null;
     }
-    if (accountAnalyticsId) {
-      // we dont just use the element web analytics ID because that would allow to associate
-      // users between the two posthog instances. By using a hash from the username and the element web analytics id
-      // it is not possible to conclude the element web posthog user id from the element call user id and vice versa.
-      return await this.hashedEcAnalyticsId(accountAnalyticsId);
-    }
-    return null;
-  }
-
-  private async hashedEcAnalyticsId(
-    accountAnalyticsId: string,
-  ): Promise<string> {
-    const client: MatrixClient = window.matrixclient;
-    const posthogIdMaterial = "ec" + accountAnalyticsId + client.getUserId();
-    const bufferForPosthogId = await crypto.subtle.digest(
-      "sha-256",
-      new TextEncoder().encode(posthogIdMaterial),
-    );
-    const view = new Int32Array(bufferForPosthogId);
-    return Array.from(view)
-      .map((b) => Math.abs(b).toString(16).padStart(2, "0"))
-      .join("");
   }
 
   private async setAccountAnalyticsId(analyticsID: string): Promise<void> {

src/analytics/PosthogSpanProcessor.ts

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

@@ -1,135 +0,0 @@
-/*
-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/__snapshots__/ReactionToggleButton.test.tsx.snap

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

src/config/ConfigOptions.ts

@@ -122,7 +122,7 @@ export interface ConfigOptions {
     delayed_leave_event_delay_ms?: number;
 
     /**
-     * The time (in milliseconds) after which a we consider a delayed event restart http request to have failed.
+     * The time (in milliseconds) after which we consider a delayed event restart http request to have failed.
      * Setting this to a lower value will result in more frequent retries but also a higher chance of failiour.
      *
      * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs

src/e2ee/matrixKeyProvider.ts

@@ -40,7 +40,7 @@ export class MatrixKeyProvider extends BaseKeyProvider {
   }
 
   private onEncryptionKeyChanged = (
-    encryptionKey: Uint8Array,
+    encryptionKey: Uint8Array<ArrayBuffer>,
     encryptionKeyIndex: number,
     participantId: string,
   ): void => {

src/e2ee/sharedKeyManagement.ts

@@ -34,8 +34,8 @@ const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
 /**
- * An upto-date shared key for the room. Either from local storage or the value from `setInitialValue`.
- * @param 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.
  * @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,8 +200,11 @@ 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";
+import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
 import {
   useLocation,
   useNavigationType,
@@ -26,7 +26,6 @@ import {
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
-import { ElementCallOpenTelemetry } from "./otel/otel";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 
@@ -101,7 +100,6 @@ 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);
@@ -123,7 +121,7 @@ export class Initializer {
     }
 
     if (shouldPolyfillDurationFormat()) {
-      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force"));
+      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force.js"));
     }
 
     await Promise.all(polyfills);
@@ -266,15 +264,6 @@ 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

@@ -166,7 +166,11 @@ 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 param0
+ * @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
  * @returns
  */
 function AudioTrackWithAudioNodes({

src/livekit/openIDSFU.test.ts

@@ -0,0 +1,112 @@
+/*
+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.
+*/
+
+import {
+  beforeEach,
+  afterEach,
+  describe,
+  expect,
+  it,
+  type MockedObject,
+  vitest,
+} from "vitest";
+import fetchMock from "fetch-mock";
+
+import { getSFUConfigWithOpenID, type OpenIDClientParts } from "./openIDSFU";
+import { testJWTToken } from "../utils/test-fixtures";
+
+const sfuUrl = "https://sfu.example.org";
+
+describe("getSFUConfigWithOpenID", () => {
+  let matrixClient: MockedObject<OpenIDClientParts>;
+  beforeEach(() => {
+    matrixClient = {
+      getOpenIdToken: vitest.fn(),
+      getDeviceId: vitest.fn(),
+    };
+  });
+  afterEach(() => {
+    vitest.clearAllMocks();
+    fetchMock.reset();
+  });
+  it("should handle fetching a token", async () => {
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 200,
+        body: { url: sfuUrl, jwt: testJWTToken },
+      };
+    });
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      "https://sfu.example.org",
+      "!example_room_id",
+    );
+    expect(config).toEqual({
+      jwt: testJWTToken,
+      url: sfuUrl,
+      livekitIdentity: "@me:example.org:ABCDEF",
+      livekitAlias: "!example_room_id",
+    });
+    void (await fetchMock.flush());
+  });
+  it("should fail if the SFU errors", async () => {
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 500,
+        body: { error: "Test failure" },
+      };
+    });
+    try {
+      await getSFUConfigWithOpenID(
+        matrixClient,
+        "https://sfu.example.org",
+        "!example_room_id",
+      );
+    } catch (ex) {
+      expect(((ex as Error).cause as Error).message).toEqual(
+        "SFU Config fetch failed with status code 500",
+      );
+      void (await fetchMock.flush());
+      return;
+    }
+    expect.fail("Expected test to throw;");
+  });
+
+  it("should retry fetching the openid token", async () => {
+    let count = 0;
+    matrixClient.getOpenIdToken.mockImplementation(async () => {
+      count++;
+      if (count < 2) {
+        throw Error("Test failure");
+      }
+      return Promise.resolve({
+        token_type: "Bearer",
+        access_token: "foobar",
+        matrix_server_name: "example.org",
+        expires_in: 30,
+      });
+    });
+    fetchMock.post("https://sfu.example.org/sfu/get", () => {
+      return {
+        status: 200,
+        body: { url: sfuUrl, jwt: testJWTToken },
+      };
+    });
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      "https://sfu.example.org",
+      "!example_room_id",
+    );
+    expect(config).toEqual({
+      jwt: testJWTToken,
+      url: sfuUrl,
+      livekitIdentity: "@me:example.org:ABCDEF",
+      livekitAlias: "!example_room_id",
+    });
+    void (await fetchMock.flush());
+  });
+});

src/livekit/openIDSFU.ts

@@ -11,9 +11,47 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { FailToGetOpenIdToken } from "../utils/errors";
 import { doNetworkOperationWithRetry } from "../utils/matrix";
 
+/**
+ * Configuration and access tokens provided by the SFU on successful authentication.
+ */
 export interface SFUConfig {
   url: string;
   jwt: string;
+  livekitAlias: string;
+  livekitIdentity: string;
+}
+
+/**
+ * Decoded details from the JWT.
+ */
+interface SFUJWTPayload {
+  /**
+   * Expiration time for the JWT.
+   * Note: This value is in seconds since Unix epoch.
+   */
+  exp: number;
+  /**
+   * Name of the instance which authored the JWT
+   */
+  iss: string;
+  /**
+   * Time at which the JWT can start to be used.
+   * Note: This value is in seconds since Unix epoch.
+   */
+  nbf: number;
+  /**
+   * Subject. The Livekit alias in this context.
+   */
+  sub: string;
+  /**
+   * The set of permissions for the user.
+   */
+  video: {
+    canPublish: boolean;
+    canSubscribe: boolean;
+    room: string;
+    roomJoin: boolean;
+  };
 }
 
 // The bits we need from MatrixClient
@@ -21,7 +59,16 @@ export type OpenIDClientParts = Pick<
   MatrixClient,
   "getOpenIdToken" | "getDeviceId"
 >;
-
+/**
+ * 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 serviceUrl The URL of the livekit SFU service
+ * @param matrixRoomId The Matrix room ID for which to get the SFU config
+ * @returns Object containing the token information
+ * @throws FailToGetOpenIdToken
+ */
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
   serviceUrl: string,
@@ -48,7 +95,17 @@ export async function getSFUConfigWithOpenID(
   );
   logger.info(`Got JWT from call's active focus URL.`);
 
-  return sfuConfig;
+  // Pull the details from the JWT
+  const [, payloadStr] = sfuConfig.jwt.split(".");
+  // TODO: Prefer Uint8Array.fromBase64 when widely available
+  const payload = JSON.parse(global.atob(payloadStr)) as SFUJWTPayload;
+  return {
+    jwt: sfuConfig.jwt,
+    url: sfuConfig.url,
+    livekitAlias: payload.video.room,
+    // NOTE: Currently unused.
+    livekitIdentity: payload.sub,
+  };
 }
 
 async function getLiveKitJWT(
@@ -56,7 +113,7 @@ async function getLiveKitJWT(
   livekitServiceURL: string,
   roomName: string,
   openIDToken: IOpenIDToken,
-): Promise<SFUConfig> {
+): Promise<{ url: string; jwt: string }> {
   try {
     const res = await fetch(livekitServiceURL + "/sfu/get", {
       method: "POST",
@@ -74,6 +131,6 @@ async function getLiveKitJWT(
     }
     return await res.json();
   } catch (e) {
-    throw new Error("SFU Config fetch failed with exception " + e);
+    throw new Error("SFU Config fetch failed with exception", { cause: e });
   }
 }

src/otel/OTelCall.ts

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

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

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

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

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

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

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

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

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

@@ -1,117 +0,0 @@
-/*
-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/RaisedHandIndicator.test.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 import { render, configure } from "@testing-library/react";
 
 import { RaisedHandIndicator } from "./RaisedHandIndicator";
@@ -15,6 +15,13 @@ configure({
 });
 
 describe("RaisedHandIndicator", () => {
+  const fixedTime = new Date("2025-01-01T12:00:00.000Z");
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(fixedTime);
+  });
+
   test("renders nothing when no hand has been raised", () => {
     const { container } = render(<RaisedHandIndicator />);
     expect(container.firstChild).toBeNull();

src/reactions/ReactionsReader.ts

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

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
     </span>
   </div>
   <p>
-    00:01
+    00:00
   </p>
 </div>
 `;
@@ -35,7 +35,7 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
     </span>
   </div>
   <p>
-    00:01
+    00:00
   </p>
 </div>
 `;
@@ -55,7 +55,7 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
     </span>
   </div>
   <p>
-    01:01
+    01:00
   </p>
 </div>
 `;

src/room/EarpieceOverlay.module.css

@@ -7,34 +7,17 @@
   align-items: center;
   justify-content: center;
   gap: var(--cpd-space-2x);
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  transition: opacity 200ms;
 }
 
 .overlay[data-show="true"] {
-  animation: fade-in 200ms;
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    display: none;
-  }
+  opacity: 1;
 }
 
 .overlay[data-show="false"] {
-  animation: fade-out 130ms forwards;
+  opacity: 0;
   pointer-events: none;
+  transition-duration: 130ms;
 }
 
 .overlay::before {

src/room/GroupCallErrorBoundary.tsx

@@ -22,6 +22,7 @@ import {
   WebBrowserIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { Button } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 import {
   ConnectionLostError,
@@ -53,7 +54,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
   widget,
 }: ErrorPageProps): ReactElement => {
   const { t } = useTranslation();
-
+  logger.error("Error boundary caught:", error);
   let icon: ComponentType<SVGAttributes<SVGElement>>;
   switch (error.category) {
     case ErrorCategory.CONFIGURATION_ISSUE:

src/room/GroupCallView.test.tsx

@@ -29,6 +29,7 @@ import userEvent from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { useState } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { type ITransport } from "matrix-widget-api";
 
 import { prefetchSounds } from "../soundUtils";
 import { useAudioContext } from "../useAudioContext";
@@ -43,7 +44,7 @@ import {
   MockRTCSession,
 } from "../utils/test";
 import { GroupCallView } from "./GroupCallView";
-import { type WidgetHelpers } from "../widget";
+import { ElementWidgetActions, type WidgetHelpers } from "../widget";
 import { LazyEventEmitter } from "../LazyEventEmitter";
 import { MatrixRTCTransportMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
@@ -112,6 +113,10 @@ beforeEach(() => {
       return (
         <div>
           <button onClick={() => onLeave("user")}>Leave</button>
+          <button onClick={() => onLeave("allOthersLeft")}>
+            SimulateOtherLeft
+          </button>
+          <button onClick={() => onLeave("error")}>SimulateErrorLeft</button>
         </div>
       );
     },
@@ -243,6 +248,112 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
   expect(leaveRTCSession).toHaveBeenCalledOnce();
 });
 
+test.skip("Should close widget when all other left and have time to play a sound", async () => {
+  const user = userEvent.setup();
+  const widgetClosedCalled = Promise.withResolvers<void>();
+  const widgetSendMock = vi.fn().mockImplementation((action: string) => {
+    if (action === ElementWidgetActions.Close) {
+      widgetClosedCalled.resolve();
+    }
+  });
+  const widgetStopMock = vi.fn().mockResolvedValue(undefined);
+  const widget = {
+    api: {
+      setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
+      transport: {
+        send: widgetSendMock,
+        reply: vi.fn().mockResolvedValue(undefined),
+        stop: widgetStopMock,
+      } as unknown as ITransport,
+    } as Partial<WidgetHelpers["api"]>,
+    lazyActions: new LazyEventEmitter(),
+  };
+  const resolvePlaySound = Promise.withResolvers<void>();
+  playSound = vi.fn().mockReturnValue(resolvePlaySound);
+  (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
+    playSound,
+    playSoundLooping: vitest.fn(),
+    soundDuration: {},
+  });
+
+  const { getByText } = createGroupCallView(widget as WidgetHelpers);
+  const leaveButton = getByText("SimulateOtherLeft");
+  await user.click(leaveButton);
+  await flushPromises();
+  expect(widgetSendMock).not.toHaveBeenCalled();
+  resolvePlaySound.resolve();
+  await flushPromises();
+
+  expect(playSound).toHaveBeenCalledWith("left");
+
+  await widgetClosedCalled.promise;
+  await flushPromises();
+  expect(widgetStopMock).toHaveBeenCalledOnce();
+});
+
+test("Should close widget when all other left", async () => {
+  const user = userEvent.setup();
+  const widgetClosedCalled = Promise.withResolvers<void>();
+  const widgetSendMock = vi.fn().mockImplementation((action: string) => {
+    if (action === ElementWidgetActions.Close) {
+      widgetClosedCalled.resolve();
+    }
+  });
+  const widgetStopMock = vi.fn().mockResolvedValue(undefined);
+  const widget = {
+    api: {
+      setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
+      transport: {
+        send: widgetSendMock,
+        reply: vi.fn().mockResolvedValue(undefined),
+        stop: widgetStopMock,
+      } as unknown as ITransport,
+    } as Partial<WidgetHelpers["api"]>,
+    lazyActions: new LazyEventEmitter(),
+  };
+
+  const { getByText } = createGroupCallView(widget as WidgetHelpers);
+  const leaveButton = getByText("SimulateOtherLeft");
+  await user.click(leaveButton);
+  await flushPromises();
+
+  await widgetClosedCalled.promise;
+  await flushPromises();
+  expect(widgetStopMock).toHaveBeenCalledOnce();
+});
+
+test("Should not close widget when auto leave due to error", async () => {
+  const user = userEvent.setup();
+
+  const widgetStopMock = vi.fn().mockResolvedValue(undefined);
+  const widgetSendMock = vi.fn().mockResolvedValue(undefined);
+  const widget = {
+    api: {
+      setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
+      transport: {
+        send: widgetSendMock,
+        reply: vi.fn().mockResolvedValue(undefined),
+        stop: widgetStopMock,
+      } as unknown as ITransport,
+    } as Partial<WidgetHelpers["api"]>,
+    lazyActions: new LazyEventEmitter(),
+  };
+
+  const alwaysOnScreenSpy = vi.spyOn(widget.api, "setAlwaysOnScreen");
+
+  const { getByText } = createGroupCallView(widget as WidgetHelpers);
+  const leaveButton = getByText("SimulateErrorLeft");
+  await user.click(leaveButton);
+  await flushPromises();
+
+  // When onLeft is called, we first set always on screen to false
+  await waitFor(() => expect(alwaysOnScreenSpy).toHaveBeenCalledWith(false));
+  await flushPromises();
+  // But then we do not close the widget automatically
+  expect(widgetStopMock).not.toHaveBeenCalledOnce();
+  expect(widgetSendMock).not.toHaveBeenCalledOnce();
+});
+
 test.skip("GroupCallView leaves the session when an error occurs", async () => {
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(() => {
     const [error, setError] = useState<Error | null>(null);

src/room/GroupCallView.tsx

@@ -159,6 +159,8 @@ export const GroupCallView: FC<Props> = ({
     };
   }, [rtcSession]);
 
+  // TODO move this into the callViewModel LocalMembership.ts
+  // We might actually not need this at all. Since we get into fatalError on those errors already?
   useTypedEventEmitter(
     rtcSession,
     MatrixRTCSessionEvent.MembershipManagerError,
@@ -312,8 +314,11 @@ export const GroupCallView: FC<Props> = ({
 
   const navigate = useNavigate();
 
+  // TODO split this into leave and onDisconnect
   const onLeft = useCallback(
-    (reason: "timeout" | "user" | "allOthersLeft" | "decline"): void => {
+    (
+      reason: "timeout" | "user" | "allOthersLeft" | "decline" | "error",
+    ): void => {
       let playSound: CallEventSounds = "left";
       if (reason === "timeout" || reason === "decline") playSound = reason;
 
@@ -366,7 +371,7 @@ export const GroupCallView: FC<Props> = ({
             }
             // On a normal user hangup we can shut down and close the widget. But if an
             // error occurs we should keep the widget open until the user reads it.
-            if (reason === "user" && !getUrlParams().returnToLobby) {
+            if (reason != "error" && !getUrlParams().returnToLobby) {
               try {
                 await widget.api.transport.send(ElementWidgetActions.Close, {});
               } catch (e) {
@@ -518,8 +523,7 @@ export const GroupCallView: FC<Props> = ({
       }}
       onError={
         (/**error*/) => {
-          // TODO this should not be "user". It needs a new case
-          if (rtcSession.isJoined()) onLeft("user");
+          if (rtcSession.isJoined()) onLeft("error");
         }
       }
     >

src/room/InCallView.tsx

@@ -24,7 +24,7 @@ import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
 import { useObservable } from "observable-hooks";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   VoiceCallSolidIcon,
   VolumeOnSolidIcon,
@@ -48,7 +48,6 @@ 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";
@@ -88,6 +87,7 @@ import { ReactionsOverlay } from "./ReactionsOverlay";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
+  matrixRTCMode as matrixRTCModeSetting,
   useSetting,
 } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
@@ -109,13 +109,19 @@ import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.t
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 
+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: (reason: "user" | "timeout" | "decline" | "allOthersLeft") => void;
+  onLeft: (
+    reason: "user" | "timeout" | "decline" | "allOthersLeft" | "error",
+  ) => void;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
@@ -125,6 +131,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
   useEffect(() => {
+    logger.info("START CALL VIEW SCOPE");
     const scope = new ObservableScope();
     const reactionsReader = new ReactionsReader(scope, props.rtcSession);
     const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
@@ -139,15 +146,20 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         encryptionSystem: props.e2eeSystem,
         autoLeaveWhenOthersLeft,
         waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
+        matrixRTCMode$: matrixRTCModeSetting.value$,
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
       scope.behavior(trackProcessorState$),
     );
+    // TODO move this somewhere else once we use the callViewModel in the lobby as well!
+    vm.join();
     setVm(vm);
 
     vm.leave$.pipe(scope.bind()).subscribe(props.onLeft);
+
     return (): void => {
+      logger.info("END CALL VIEW SCOPE");
       scope.end();
     };
   }, [
@@ -178,7 +190,6 @@ export interface InCallViewProps {
   matrixRoom: MatrixRoom;
   muteStates: MuteStates;
   header: HeaderStyle;
-  otelGroupCallMembership?: OTelGroupCallMembership;
   onShareClick: (() => void) | null;
 }
 
@@ -249,7 +260,7 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const audioParticipants = useBehavior(vm.audioParticipants$);
+  const audioParticipants = useBehavior(vm.livekitRoomItems$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
   const windowMode = useBehavior(vm.windowMode$);
@@ -264,9 +275,12 @@ export const InCallView: FC<InCallViewProps> = ({
   const sharingScreen = useBehavior(vm.sharingScreen$);
 
   const ringOverlay = useBehavior(vm.ringOverlay$);
-  const fatalCallError = useBehavior(vm.configError$);
+  const fatalCallError = useBehavior(vm.fatalError$);
   // Stop the rendering and throw for the error boundary
-  if (fatalCallError) throw fatalCallError;
+  if (fatalCallError) {
+    logger.debug("fatalCallError stop rendering", fatalCallError);
+    throw fatalCallError;
+  }
 
   // We need to set the proper timings on the animation based upon the sound length.
   const ringDuration = pickupPhaseAudio?.soundDuration["waiting"] ?? 1;

src/room/LobbyView.tsx

@@ -79,9 +79,9 @@ export const LobbyView: FC<Props> = ({
   waitingForInvite,
 }) => {
   useEffect(() => {
-    logger.info("[Lifecycle] GroupCallView Component mounted");
+    logger.info("[Lifecycle] LobbyView Component mounted");
     return (): void => {
-      logger.info("[Lifecycle] GroupCallView Component unmounted");
+      logger.info("[Lifecycle] LobbyView Component unmounted");
     };
   }, []);
 

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

@@ -34,7 +34,7 @@ exports[`InCallView > rendering > renders 1`] = `
               tabindex="0"
             >
               <svg
-                aria-labelledby="«r0»"
+                aria-labelledby="_r_0_"
                 class="lock"
                 data-encrypted="false"
                 fill="currentColor"
@@ -286,7 +286,7 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <button
           aria-disabled="true"
-          aria-labelledby="«r8»"
+          aria-labelledby="_r_8_"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -309,7 +309,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-disabled="true"
-          aria-labelledby="«rd»"
+          aria-labelledby="_r_d_"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -331,7 +331,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="«ri»"
+          aria-labelledby="_r_i_"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
@@ -352,7 +352,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="«rn»"
+          aria-labelledby="_r_n_"
           class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
@@ -378,7 +378,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="toggle layout"
       >
         <input
-          aria-labelledby="«rs»"
+          aria-labelledby="_r_s_"
           name="layout"
           type="radio"
           value="spotlight"
@@ -396,7 +396,7 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="«r11»"
+          aria-labelledby="_r_11_"
           checked=""
           name="layout"
           type="radio"

src/room/useLoadGroupCall.ts

@@ -106,22 +106,18 @@ 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.test.tsx

@@ -0,0 +1,95 @@
+/*
+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 { describe, expect, it, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+
+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.
+vi.mock("../UrlParams", () => ({
+  useUrlParams: (): { mocked: boolean; answer: number } => ({
+    mocked: true,
+    answer: 42,
+  }),
+}));
+
+// Provide a minimal mock of a Livekit Room structure used by the component.
+function createMockLivekitRoom(
+  wsUrl: string,
+  serverInfo: object,
+  metadata: string,
+): { isLocal: boolean; url: string; room: LivekitRoom } {
+  const mockRoom = {
+    serverInfo,
+    metadata,
+    engine: { client: { ws: { url: wsUrl } } },
+  } as unknown as LivekitRoom;
+
+  return {
+    isLocal: true,
+    url: wsUrl,
+    room: mockRoom,
+  };
+}
+
+// Minimal MatrixClient mock with only the methods used by the component.
+function createMockMatrixClient(): MatrixClient {
+  return {
+    doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(true), // ensure stickyEventsSupported eventually becomes true
+    getCrypto: (): { getVersion: () => string } | undefined => ({
+      getVersion: () => "crypto-1.0.0",
+    }),
+    getUserId: () => "@alice:example.org",
+    getDeviceId: () => "DEVICE123",
+  } as unknown as MatrixClient;
+}
+
+describe("DeveloperSettingsTab", () => {
+  it("renders and matches snapshot", async () => {
+    const client = createMockMatrixClient();
+
+    const livekitRooms: {
+      room: LivekitRoom;
+      url: string;
+      isLocal?: boolean;
+    }[] = [
+      createMockLivekitRoom(
+        "wss://local-sfu.example.org",
+        { region: "local", version: "1.2.3" },
+        "local-metadata",
+      ),
+      {
+        isLocal: false,
+        url: "wss://remote-sfu.example.org",
+        room: {
+          serverInfo: { region: "remote", version: "4.5.6" },
+          metadata: "remote-metadata",
+          engine: { client: { ws: { url: "wss://remote-sfu.example.org" } } },
+        } as unknown as LivekitRoom,
+      },
+    ];
+
+    const { container } = render(
+      <DeveloperSettingsTab
+        client={client}
+        livekitRooms={livekitRooms}
+        env={{ MY_MOCK_ENV: 10, ENV: "test" } as unknown as ImportMetaEnv}
+      />,
+    );
+
+    // Wait for the async sticky events feature check to resolve so the final UI
+    // (e.g. enabled Matrix_2_0 radio button) appears deterministically.
+    await waitFor(() =>
+      expect(client.doesServerSupportUnstableFeature).toHaveBeenCalled(),
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/settings/DeveloperSettingsTab.tsx

@@ -11,8 +11,8 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  useState,
   useId,
+  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -21,6 +21,7 @@ import {
 } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
+  EditInPlace,
   Root as Form,
   Heading,
   HelpMessage,
@@ -38,6 +39,7 @@ import {
   muteAllAudio as muteAllAudioSetting,
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
   matrixRTCMode as matrixRTCModeSetting,
+  customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
 } from "./settings";
 import type { Room as LivekitRoom } from "livekit-client";
@@ -47,9 +49,14 @@ import { useUrlParams } from "../UrlParams";
 interface Props {
   client: MatrixClient;
   livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
+  env: ImportMetaEnv;
 }
 
-export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
+export const DeveloperSettingsTab: FC<Props> = ({
+  client,
+  livekitRooms,
+  env,
+}) => {
   const { t } = useTranslation();
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
   const [debugTileLayout, setDebugTileLayout] = useSetting(
@@ -85,6 +92,15 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
     alwaysShowIphoneEarpieceSetting,
   );
 
+  const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
+    customLivekitUrlSetting,
+  );
+  const [customLivekitUrlTextBuffer, setCustomLivekitUrlTextBuffer] =
+    useState(customLivekitUrl);
+  useEffect(() => {
+    setCustomLivekitUrlTextBuffer(customLivekitUrl);
+  }, [customLivekitUrl]);
+
   const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
 
   const urlParams = useUrlParams();
@@ -101,7 +117,7 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
   }, [livekitRooms]);
 
   return (
-    <Form>
+    <>
       <p>
         {t("developer_mode.hostname", {
           hostname: window.location.hostname || "unknown",
@@ -200,55 +216,93 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           )}
         />{" "}
       </FieldRow>
+      <EditInPlace
+        onSubmit={(e) => e.preventDefault()}
+        helpLabel={
+          customLivekitUrl === null
+            ? t("developer_mode.custom_livekit_url.from_config")
+            : t("developer_mode.custom_livekit_url.current_url") +
+              customLivekitUrl
+        }
+        label={t("developer_mode.custom_livekit_url.label")}
+        saveButtonLabel={t("developer_mode.custom_livekit_url.save")}
+        savingLabel={t("developer_mode.custom_livekit_url.saving")}
+        cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")}
+        onSave={useCallback(
+          (e: React.FormEvent<HTMLFormElement>) => {
+            setCustomLivekitUrl(
+              customLivekitUrlTextBuffer === ""
+                ? null
+                : customLivekitUrlTextBuffer,
+            );
+          },
+          [setCustomLivekitUrl, customLivekitUrlTextBuffer],
+        )}
+        value={customLivekitUrlTextBuffer ?? ""}
+        onChange={useCallback(
+          (event: ChangeEvent<HTMLInputElement>): void => {
+            setCustomLivekitUrlTextBuffer(event.target.value);
+          },
+          [setCustomLivekitUrlTextBuffer],
+        )}
+        onCancel={useCallback(
+          (e: React.FormEvent<HTMLFormElement>) => {
+            setCustomLivekitUrl(null);
+          },
+          [setCustomLivekitUrl],
+        )}
+      />
       <Heading as="h3" type="body" weight="semibold" size="lg">
         {t("developer_mode.matrixRTCMode.title")}
       </Heading>
-      <InlineField
-        name={matrixRTCModeRadioGroup}
-        control={
-          <RadioControl
-            checked={matrixRTCMode === MatrixRTCMode.Legacy}
-            value={MatrixRTCMode.Legacy}
-            onChange={onMatrixRTCModeChange}
-          />
-        }
-      >
-        <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
-        <HelpMessage>
-          {t("developer_mode.matrixRTCMode.Legacy.description")}
-        </HelpMessage>
-      </InlineField>
-      <InlineField
-        name={matrixRTCModeRadioGroup}
-        control={
-          <RadioControl
-            checked={matrixRTCMode === MatrixRTCMode.Compatibil}
-            value={MatrixRTCMode.Compatibil}
-            onChange={onMatrixRTCModeChange}
-          />
-        }
-      >
-        <Label>{t("developer_mode.matrixRTCMode.Comptibility.label")}</Label>
-        <HelpMessage>
-          {t("developer_mode.matrixRTCMode.Comptibility.description")}
-        </HelpMessage>
-      </InlineField>
-      <InlineField
-        name={matrixRTCModeRadioGroup}
-        control={
-          <RadioControl
-            checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0}
-            value={MatrixRTCMode.Matrix_2_0}
-            disabled={!stickyEventsSupported}
-            onChange={onMatrixRTCModeChange}
-          />
-        }
-      >
-        <Label>{t("developer_mode.matrixRTCMode.Matrix_2_0.label")}</Label>
-        <HelpMessage>
-          {t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
-        </HelpMessage>
-      </InlineField>
+      <Form>
+        <InlineField
+          name={matrixRTCModeRadioGroup}
+          control={
+            <RadioControl
+              checked={matrixRTCMode === MatrixRTCMode.Legacy}
+              value={MatrixRTCMode.Legacy}
+              onChange={onMatrixRTCModeChange}
+            />
+          }
+        >
+          <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
+          <HelpMessage>
+            {t("developer_mode.matrixRTCMode.Legacy.description")}
+          </HelpMessage>
+        </InlineField>
+        <InlineField
+          name={matrixRTCModeRadioGroup}
+          control={
+            <RadioControl
+              checked={matrixRTCMode === MatrixRTCMode.Compatibil}
+              value={MatrixRTCMode.Compatibil}
+              onChange={onMatrixRTCModeChange}
+            />
+          }
+        >
+          <Label>{t("developer_mode.matrixRTCMode.Comptibility.label")}</Label>
+          <HelpMessage>
+            {t("developer_mode.matrixRTCMode.Comptibility.description")}
+          </HelpMessage>
+        </InlineField>
+        <InlineField
+          name={matrixRTCModeRadioGroup}
+          control={
+            <RadioControl
+              checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0}
+              value={MatrixRTCMode.Matrix_2_0}
+              disabled={!stickyEventsSupported}
+              onChange={onMatrixRTCModeChange}
+            />
+          }
+        >
+          <Label>{t("developer_mode.matrixRTCMode.Matrix_2_0.label")}</Label>
+          <HelpMessage>
+            {t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
+          </HelpMessage>
+        </InlineField>
+      </Form>
       {livekitRooms?.map((livekitRoom) => (
         <>
           <h3>
@@ -270,9 +324,9 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
         </>
       ))}
       <p>{t("developer_mode.environment_variables")}</p>
-      <pre>{JSON.stringify(import.meta.env, null, 2)}</pre>
+      <pre>{JSON.stringify(env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>
       <pre>{JSON.stringify(urlParams, null, 2)}</pre>
-    </Form>
+    </>
   );
 };

src/settings/SettingsModal.tsx

@@ -209,7 +209,11 @@ export const SettingsModal: FC<Props> = ({
     key: "developer",
     name: t("settings.developer_tab_title"),
     content: (
-      <DeveloperSettingsTab client={client} livekitRooms={livekitRooms} />
+      <DeveloperSettingsTab
+        env={import.meta.env}
+        client={client}
+        livekitRooms={livekitRooms}
+      />
     ),
   };
 

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

@@ -0,0 +1,411 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
+<div>
+  <p>
+    Hostname: localhost
+  </p>
+  <p>
+    Element Call version: dev
+  </p>
+  <p>
+    Crypto version: crypto-1.0.0
+  </p>
+  <p>
+    Matrix ID: @alice:example.org
+  </p>
+  <p>
+    Device ID: DEVICE123
+  </p>
+  <div
+    class="fieldRow"
+  >
+    <div
+      class="field inputField"
+    >
+      <input
+        aria-describedby="_r_1_"
+        id="duplicateTiles"
+        min="0"
+        type="number"
+        value="0"
+      />
+      <label
+        for="duplicateTiles"
+      >
+        Number of additional tile copies per participant
+      </label>
+    </div>
+  </div>
+  <div
+    class="fieldRow"
+  >
+    <div
+      class="field checkboxField"
+    >
+      <input
+        aria-describedby="_r_2_"
+        id="debugTileLayout"
+        type="checkbox"
+      />
+      <label
+        for="debugTileLayout"
+      >
+        <div
+          class="checkbox"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Debug tile layout
+      </label>
+    </div>
+  </div>
+  <div
+    class="fieldRow"
+  >
+    <div
+      class="field checkboxField"
+    >
+      <input
+        aria-describedby="_r_3_"
+        id="showConnectionStats"
+        type="checkbox"
+      />
+      <label
+        for="showConnectionStats"
+      >
+        <div
+          class="checkbox"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Show connection statistics
+      </label>
+    </div>
+  </div>
+  <div
+    class="fieldRow"
+  >
+    <div
+      class="field checkboxField"
+    >
+      <input
+        aria-describedby="_r_4_"
+        id="muteAllAudio"
+        type="checkbox"
+      />
+      <label
+        for="muteAllAudio"
+      >
+        <div
+          class="checkbox"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Mute all audio (participants, reactions, join sounds)
+      </label>
+    </div>
+  </div>
+   
+  <div
+    class="fieldRow"
+  >
+    <div
+      class="field checkboxField"
+    >
+      <input
+        aria-describedby="_r_5_"
+        id="alwaysShowIphoneEarpiece"
+        type="checkbox"
+      />
+      <label
+        for="alwaysShowIphoneEarpiece"
+      >
+        <div
+          class="checkbox"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Show iPhone earpiece option on all platforms
+      </label>
+    </div>
+     
+  </div>
+  <form
+    class="_root_19upo_16"
+  >
+    <div
+      class="_field_19upo_26"
+    >
+      <label
+        class="_label_19upo_59"
+        for="radix-_r_6_"
+      >
+        Custom Livekit-url
+      </label>
+      <div
+        class="_controls_17lij_8"
+      >
+        <input
+          aria-describedby="radix-_r_7_"
+          class="_control_sqdq4_10"
+          id="radix-_r_6_"
+          name="input"
+          title=""
+          value=""
+        />
+      </div>
+      <span
+        class="_message_19upo_85 _help-message_19upo_91"
+        id="radix-_r_7_"
+      >
+        Currently, no overwrite is set. Url from well-known or config is used.
+      </span>
+    </div>
+  </form>
+  <h3
+    class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
+  >
+    MatrixRTC mode
+  </h3>
+  <form
+    class="_root_19upo_16"
+  >
+    <div
+      class="_inline-field_19upo_32"
+    >
+      <div
+        class="_inline-field-control_19upo_44"
+      >
+        <div
+          class="_container_1e0uz_10"
+        >
+          <input
+            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
+            checked=""
+            class="_input_1e0uz_18"
+            id="radix-_r_8_"
+            name="_r_0_"
+            title=""
+            type="radio"
+            value="legacy"
+          />
+          <div
+            class="_ui_1e0uz_19"
+          />
+        </div>
+      </div>
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="radix-_r_8_"
+        >
+          Legacy: state events & oldest membership SFU
+        </label>
+        <span
+          class="_message_19upo_85 _help-message_19upo_91"
+          id="radix-_r_9_"
+        >
+          Compatible with old versions of EC that do not support multi SFU
+        </span>
+      </div>
+    </div>
+    <div
+      class="_inline-field_19upo_32"
+    >
+      <div
+        class="_inline-field-control_19upo_44"
+      >
+        <div
+          class="_container_1e0uz_10"
+        >
+          <input
+            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
+            class="_input_1e0uz_18"
+            id="radix-_r_a_"
+            name="_r_0_"
+            title=""
+            type="radio"
+            value="compatibil"
+          />
+          <div
+            class="_ui_1e0uz_19"
+          />
+        </div>
+      </div>
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="radix-_r_a_"
+        >
+          Compatibility: state events & multi SFU
+        </label>
+        <span
+          class="_message_19upo_85 _help-message_19upo_91"
+          id="radix-_r_b_"
+        >
+          Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
+        </span>
+      </div>
+    </div>
+    <div
+      class="_inline-field_19upo_32"
+    >
+      <div
+        class="_inline-field-control_19upo_44"
+      >
+        <div
+          class="_container_1e0uz_10"
+        >
+          <input
+            aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
+            class="_input_1e0uz_18"
+            id="radix-_r_c_"
+            name="_r_0_"
+            title=""
+            type="radio"
+            value="matrix_2_0"
+          />
+          <div
+            class="_ui_1e0uz_19"
+          />
+        </div>
+      </div>
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="radix-_r_c_"
+        >
+          Matrix 2.0: sticky events & multi SFU
+        </label>
+        <span
+          class="_message_19upo_85 _help-message_19upo_91"
+          id="radix-_r_d_"
+        >
+          Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
+        </span>
+      </div>
+    </div>
+  </form>
+  <h3>
+    LiveKit SFU: wss://local-sfu.example.org
+  </h3>
+  <p>
+    ws-url: 
+    wss://local-sfu.example.org/
+  </p>
+  <p>
+    LiveKit Server Info
+    (
+    local
+    )
+  </p>
+  <pre
+    class="pre"
+  >
+    {
+  "region": "local",
+  "version": "1.2.3"
+}
+    local-metadata
+  </pre>
+  <h3>
+    LiveKit SFU: wss://remote-sfu.example.org
+  </h3>
+  <p>
+    LiveKit Server Info
+    (
+    remote
+    )
+  </p>
+  <pre
+    class="pre"
+  >
+    {
+  "region": "remote",
+  "version": "4.5.6"
+}
+    remote-metadata
+  </pre>
+  <p>
+    Environment variables
+  </p>
+  <pre>
+    {
+  "MY_MOCK_ENV": 10,
+  "ENV": "test"
+}
+  </pre>
+  <p>
+    URL parameters
+  </p>
+  <pre>
+    {
+  "mocked": true,
+  "answer": 42
+}
+  </pre>
+</div>
+`;

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 {string} \n delimited log lines
+   * @return \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 {string} \n delimited log lines
+   * @return \n delimited log lines
    */
   public peekLogs(): string {
     return this.logs;
@@ -139,7 +139,7 @@ class IndexedDBLogStore {
   }
 
   /**
-   * @return {Promise} Resolves when the store is ready.
+   * @return 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 {Promise} Resolved when the logs have been flushed.
+   * @return 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 {Promise<Object[]>} Resolves to an array of objects. The array is
+   * @return 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 {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
+ * @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
  * Cursor.
  * Return the data you want to keep.
- * @return {Promise<T[]>} Resolves to an array of whatever you returned from
+ * @return Resolves to an array of whatever you returned from
  * resultMapper.
  */
 async function selectQuery<T>(
@@ -464,9 +464,7 @@ declare global {
 /**
  * Configure rage shaking support for sending bug reports.
  * Modifies globals.
- * @param {boolean} setUpPersistence When true (default), the persistence will
- * be set up immediately for the logs.
- * @return {Promise} Resolves when set up.
+ * @return Resolves when set up.
  */
 export async function init(): Promise<void> {
   global.mx_rage_logger = new ConsoleLogger();
@@ -503,7 +501,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 {Promise} Resolves when complete.
+ * @return Resolves when complete.
  */
 async function tryInitStorage(): Promise<void> {
   if (global.mx_rage_initStoragePromise) {
@@ -536,7 +534,7 @@ async function tryInitStorage(): Promise<void> {
 /**
  * Get a recent snapshot of the logs, ready for attaching to a bug report
  *
- * @return {LogEntry[]}  list of log data
+ * @return list of log data
  */
 export async function getLogsForReport(): Promise<LogEntry[]> {
   if (!global.mx_rage_logger) {

src/settings/settings.ts

@@ -134,3 +134,8 @@ export const matrixRTCMode = new Setting<MatrixRTCMode>(
   "matrix-rtc-mode",
   MatrixRTCMode.Legacy,
 );
+
+export const customLivekitUrl = new Setting<string | null>(
+  "custom-livekit-url",
+  null,
+);

src/settings/submit-rageshake.ts

@@ -17,7 +17,6 @@ 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";
 
@@ -274,14 +273,6 @@ 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/Behavior.ts

@@ -16,7 +16,10 @@ import { BehaviorSubject } from "rxjs";
  * distinction between Behaviors and Observables, see
  * https://monoid.dk/post/behaviors-and-streams-why-both/.
  */
-export type Behavior<T> = Omit<BehaviorSubject<T>, "next" | "observers">;
+export type Behavior<T> = Omit<
+  BehaviorSubject<T>,
+  "next" | "observers" | "error"
+>;
 
 /**
  * Creates a Behavior which never changes in value.

src/state/CallViewModel/CallNotificationLifecycle.test.ts

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

src/state/CallViewModel/CallNotificationLifecycle.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2025 New Vector 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.
@@ -81,7 +81,7 @@ export interface Props {
   localUser: { deviceId: string; userId: string };
 }
 /**
- * @returns {callPickupState$, autoLeave$}
+ * @returns two observables:
  * `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

@@ -1,12 +1,12 @@
 /*
+Copyright 2025 Element Creations Ltd.
 Copyright 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 { test, vi, onTestFinished, it, describe, expect } from "vitest";
-import EventEmitter from "events";
+import { test, vi, onTestFinished, it, describe } from "vitest";
 import {
   BehaviorSubject,
   combineLatest,
@@ -18,12 +18,11 @@ import {
   of,
   switchMap,
 } from "rxjs";
-import { SyncState, type MatrixClient } from "matrix-js-sdk";
+import { SyncState } from "matrix-js-sdk";
 import {
   ConnectionState,
   type LocalTrackPublication,
   type RemoteParticipant,
-  type Room as LivekitRoom,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
 import {
@@ -35,27 +34,18 @@ import {
   type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
-import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 
-import { createCallViewModel$ } from "./CallViewModel";
 import { type Layout } from "../layout-types.ts";
 import {
   mockLocalParticipant,
-  mockMatrixRoom,
   mockMatrixRoomMember,
   mockRemoteParticipant,
   withTestScheduler,
   mockRtcMembership,
-  MockRTCSession,
-  mockMediaDevices,
-  mockMuteStates,
-  mockConfig,
   testScope,
-  mockLivekitRoom,
   exampleTransport,
 } from "../../utils/test.ts";
 import { E2eeType } from "../../e2ee/e2eeType.ts";
-import type { RaisedHandInfo, ReactionInfo } from "../../reactions/index.ts";
 import {
   aliceId,
   aliceParticipant,
@@ -70,11 +60,8 @@ import {
 import { MediaDevices } from "../MediaDevices.ts";
 import { getValue } from "../../utils/observable.ts";
 import { type Behavior, constant } from "../Behavior.ts";
-import {
-  type ElementCallError,
-  MatrixRTCTransportMissingError,
-} from "../../utils/errors.ts";
-import { withCallViewModel } from "./CallViewModelTestUtils.ts";
+import { withCallViewModel as withCallViewModelInMode } from "./CallViewModelTestUtils.ts";
+import { MatrixRTCMode } from "../../settings/settings.ts";
 
 vi.mock("rxjs", async (importOriginal) => ({
   ...(await importOriginal()),
@@ -243,71 +230,12 @@ function mockRingEvent(
 // need a value to fill in for them when emitting notifications
 const mockLegacyRingEvent = {} as { event_id: string } & ICallNotifyContent;
 
-describe("CallViewModel", () => {
-  // TODO: Restore this test. It requires makeTransport to not be mocked, unlike
-  // the rest of the tests in this file… what do we do?
-  it.skip("test missing RTC config error", async () => {
-    const rtcMemberships$ = new BehaviorSubject<CallMembership[]>([]);
-    const emitter = new EventEmitter();
-    const client = vi.mocked<MatrixClient>({
-      on: emitter.on.bind(emitter),
-      off: emitter.off.bind(emitter),
-      getSyncState: vi.fn().mockReturnValue(SyncState.Syncing),
-      getUserId: vi.fn().mockReturnValue("@user:localhost"),
-      getUser: vi.fn().mockReturnValue(null),
-      getDeviceId: vi.fn().mockReturnValue("DEVICE"),
-      credentials: {
-        userId: "@user:localhost",
-      },
-      getCrypto: vi.fn().mockReturnValue(undefined),
-      getDomain: vi.fn().mockReturnValue("example.org"),
-    } as unknown as MatrixClient);
-
-    const matrixRoom = mockMatrixRoom({
-      roomId: "!myRoomId:example.com",
-      client,
-      getMember: vi.fn().mockReturnValue(undefined),
-    });
-
-    const fakeRtcSession = new MockRTCSession(matrixRoom).withMemberships(
-      rtcMemberships$,
-    );
-
-    mockConfig({});
-
-    vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({});
-
-    const callVM = createCallViewModel$(
-      testScope(),
-      fakeRtcSession.asMockedSession(),
-      matrixRoom,
-      mockMediaDevices({}),
-      mockMuteStates(),
-      {
-        encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        autoLeaveWhenOthersLeft: false,
-        livekitRoomFactory: (): LivekitRoom =>
-          mockLivekitRoom({
-            localParticipant,
-            disconnect: async () => Promise.resolve(),
-            setE2EEEnabled: async () => Promise.resolve(),
-          }),
-      },
-      new BehaviorSubject({} as Record<string, RaisedHandInfo>),
-      new BehaviorSubject({} as Record<string, ReactionInfo>),
-      constant({ processor: undefined, supported: false }),
-    );
-
-    const failPromise = Promise.withResolvers<ElementCallError>();
-    callVM.configError$.subscribe((error) => {
-      if (error) {
-        failPromise.resolve(error);
-      }
-    });
-
-    const error = await failPromise.promise;
-    expect(error).toBeInstanceOf(MatrixRTCTransportMissingError);
-  });
+describe.each([
+  [MatrixRTCMode.Legacy],
+  [MatrixRTCMode.Compatibil],
+  [MatrixRTCMode.Matrix_2_0],
+])("CallViewModel (%s mode)", (mode) => {
+  const withCallViewModel = withCallViewModelInMode(mode);
 
   test("participants are retained during a focus switch", () => {
     withTestScheduler(({ behavior, expectObservable }) => {
@@ -346,7 +274,7 @@ describe("CallViewModel", () => {
     });
   });
 
-  it.skip("screen sharing activates spotlight layout", () => {
+  test("screen sharing activates spotlight layout", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       // Start with no screen shares, then have Alice and Bob share their screens,
       // then return to no screen shares, then have just Alice share for a bit
@@ -581,6 +509,48 @@ describe("CallViewModel", () => {
     });
   });
 
+  test("layout reacts to window size", () => {
+    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+      const windowSizeInputMarbles = "abc";
+      const expectedLayoutMarbles = " abc";
+      withCallViewModel(
+        {
+          remoteParticipants$: constant([aliceParticipant]),
+          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+          windowSize$: behavior(windowSizeInputMarbles, {
+            a: { width: 300, height: 600 }, // Start very narrow, like a phone
+            b: { width: 1000, height: 800 }, // Go to normal desktop window size
+            c: { width: 200, height: 180 }, // Go to PiP size
+          }),
+        },
+        (vm) => {
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                // This is the expected one-on-one layout for a narrow window
+                type: "spotlight-expanded",
+                spotlight: [`${aliceId}:0`],
+                pip: `${localId}:0`,
+              },
+              b: {
+                // In a larger window, expect the normal one-on-one layout
+                type: "one-on-one",
+                local: `${localId}:0`,
+                remote: `${aliceId}:0`,
+              },
+              c: {
+                // In a PiP-sized window, we of course expect a PiP layout
+                type: "pip",
+                spotlight: [`${aliceId}:0`],
+              },
+            },
+          );
+        },
+      );
+    });
+  });
+
   test("spotlight speakers swap places", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       // Go immediately into spotlight mode for the test
@@ -1286,7 +1256,9 @@ describe("CallViewModel", () => {
               rtcSession.membershipStatus = Status.Connected;
             },
             n: () => {
-              rtcSession.membershipStatus = Status.Reconnecting;
+              // 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, {

src/state/CallViewModel/CallViewModel.ts

@@ -1,4 +1,5 @@
 /*
+Copyright 2025 Element Creations Ltd.
 Copyright 2023, 2024, 2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
@@ -14,9 +15,9 @@ import {
 } from "livekit-client";
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
+  catchError,
   combineLatest,
   distinctUntilChanged,
-  EMPTY,
   filter,
   fromEvent,
   map,
@@ -27,7 +28,6 @@ import {
   pairwise,
   race,
   scan,
-  skip,
   skipWhile,
   startWith,
   Subject,
@@ -40,7 +40,10 @@ import {
   timer,
 } from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  type LivekitTransport,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { type IWidgetApiRequest } from "matrix-widget-api";
 
 import {
@@ -50,11 +53,15 @@ import {
   ScreenShareViewModel,
   type UserMediaViewModel,
 } from "../MediaViewModel";
-import { accumulate, generateItems, pauseWhen } from "../../utils/observable";
+import {
+  accumulate,
+  filterBehavior,
+  generateItems,
+  pauseWhen,
+} from "../../utils/observable";
 import {
   duplicateTiles,
   MatrixRTCMode,
-  matrixRTCMode,
   playReactionsSound,
   showReactions,
 } from "../../settings/settings";
@@ -73,7 +80,7 @@ import {
 } from "../../reactions";
 import { shallowEquals } from "../../utils/array";
 import { type MediaDevices } from "../MediaDevices";
-import { type Behavior } from "../Behavior";
+import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
 import { MatrixKeyProvider } from "../../e2ee/matrixKeyProvider";
 import { type MuteStates } from "../MuteStates";
@@ -91,12 +98,14 @@ import {
   type SpotlightLandscapeLayoutMedia,
   type SpotlightPortraitLayoutMedia,
 } from "../layout-types.ts";
-import { type ElementCallError } from "../../utils/errors.ts";
+import { ElementCallError } from "../../utils/errors.ts";
 import { type ObservableScope } from "../ObservableScope.ts";
+import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts";
 import {
   createLocalMembership$,
-  type LocalMemberConnectionState,
-} from "./localMember/LocalMembership.ts";
+  enterRTCSession,
+  TransportState,
+} from "./localMember/LocalMember.ts";
 import { createLocalTransport$ } from "./localMember/LocalTransport.ts";
 import {
   createMemberships$,
@@ -106,7 +115,9 @@ import { ECConnectionFactory } from "./remoteMembers/ConnectionFactory.ts";
 import { createConnectionManager$ } from "./remoteMembers/ConnectionManager.ts";
 import {
   createMatrixLivekitMembers$,
-  type MatrixLivekitMember,
+  type TaggedParticipant,
+  type LocalMatrixLivekitMember,
+  type RemoteMatrixLivekitMember,
 } from "./remoteMembers/MatrixLivekitMembers.ts";
 import {
   type AutoLeaveReason,
@@ -119,6 +130,9 @@ import {
   createMatrixMemberMetadata$,
   createRoomMembers$,
 } from "./remoteMembers/MatrixMemberMetadata.ts";
+import { Publisher } from "./localMember/Publisher.ts";
+import { type Connection } from "./remoteMembers/Connection.ts";
+import { createLayoutModeSwitch } from "./LayoutSwitch.ts";
 
 const logger = rootLogger.getChild("[CallViewModel]");
 //TODO
@@ -140,6 +154,10 @@ export interface CallViewModelOptions {
   livekitRoomFactory?: (options?: RoomOptions) => LivekitRoom;
   /** Optional behavior overriding the local connection state, mainly for testing purposes. */
   connectionState$?: Behavior<ConnectionState>;
+  /** Optional behavior overriding the computed window size, mainly for testing purposes. */
+  windowSize$?: Behavior<{ width: number; height: number }>;
+  /** The version & compatibility mode of MatrixRTC that we should use. */
+  matrixRTCMode$?: Behavior<MatrixRTCMode>;
 }
 
 // Do not play any sounds if the participant count has exceeded this
@@ -165,7 +183,7 @@ interface LayoutScanState {
 }
 
 type MediaItem = UserMedia | ScreenShare;
-type AudioLivekitItem = {
+export type LivekitRoomItem = {
   livekitRoom: LivekitRoom;
   participants: string[];
   url: string;
@@ -188,12 +206,15 @@ export interface CallViewModel {
   callPickupState$: Behavior<
     "unknown" | "ringing" | "timeout" | "decline" | "success" | null
   >;
+  /** Observable that emits when the user should leave the call (hangup pressed, widget action, error).
+   * THIS DOES NOT LEAVE THE CALL YET. The only way to leave the call (send the hangup event) is by ending the scope.
+   */
   leave$: Observable<"user" | AutoLeaveReason>;
-  /** Call to initiate hangup. Use in conbination with connectino state track the async hangup process. */
+  /** Call to initiate hangup. Use in conbination with reconnectino state track the async hangup process. */
   hangup: () => void;
 
   // joining
-  join: () => LocalMemberConnectionState;
+  join: () => void;
 
   // screen sharing
   /**
@@ -229,7 +250,7 @@ export interface CallViewModel {
    * This is a fatal error that prevents the call from being created/joined.
    * Should render a blocking error screen.
    */
-  configError$: Behavior<ElementCallError | null>;
+  fatalError$: Behavior<ElementCallError | null>;
 
   // participants and counts
   /**
@@ -241,7 +262,11 @@ export interface CallViewModel {
    */
   participantCount$: Behavior<number>;
   /** Participants sorted by livekit room so they can be used in the audio rendering */
-  audioParticipants$: Behavior<AudioLivekitItem[]>;
+  livekitRoomItems$: Behavior<LivekitRoomItem[]>;
+  userMedia$: Behavior<UserMedia[]>;
+  /** use the layout instead, this is just for the sdk export. */
+  matrixLivekitMembers$: Behavior<RemoteMatrixLivekitMember[]>;
+  localMatrixLivekitMember$: Behavior<LocalMatrixLivekitMember | null>;
   /** List of participants raising their hand */
   handsRaised$: Behavior<Record<string, RaisedHandInfo>>;
   /** List of reactions. Keys are: membership.membershipId (currently predefined as: `${membershipEvent.userId}:${membershipEvent.deviceId}`)*/
@@ -324,18 +349,17 @@ export interface CallViewModel {
     switch: () => void;
   } | null>;
 
-  // connection state
   /**
-   * Whether various media/event sources should pretend to be disconnected from
-   * all network input, even if their connection still technically works.
+   * Whether the app is currently reconnecting to the LiveKit server and/or setting the matrix rtc room state.
    */
-  // We do this when the app is in the 'reconnecting' state, because it might be
-  // that the LiveKit connection is still functional while the homeserver is
-  // down, for example, and we want to avoid making people worry that the app is
-  // in a split-brained state.
-  // DISCUSSION own membership manager ALSO this probably can be simplifis
   reconnecting$: Behavior<boolean>;
+
+  /**
+   * Shortcut for not requireing to parse and combine connectionState.matrix and connectionState.livekit
+   */
+  connected$: Behavior<boolean>;
 }
+
 /**
  * A view model providing all the application logic needed to show the in-call
  * UI (may eventually be expanded to cover the lobby and feedback screens in the
@@ -356,13 +380,15 @@ export function createCallViewModel$(
   reactionsSubject$: Observable<Record<string, ReactionInfo>>,
   trackProcessorState$: Behavior<ProcessorState>,
 ): CallViewModel {
-  const userId = matrixRoom.client.getUserId()!;
-  const deviceId = matrixRoom.client.getDeviceId()!;
-
+  const client = matrixRoom.client;
+  const userId = client.getUserId()!;
+  const deviceId = client.getDeviceId()!;
   const livekitKeyProvider = getE2eeKeyProvider(
     options.encryptionSystem,
     matrixRTCSession,
   );
+  const matrixRTCMode$ =
+    options.matrixRTCMode$ ?? constant(MatrixRTCMode.Legacy);
 
   // Each hbar seperates a block of input variables required for the CallViewModel to function.
   // The outputs of this block is written under the hbar.
@@ -370,8 +396,8 @@ export function createCallViewModel$(
   // For mocking purposes it is recommended to only mock the functions creating those outputs.
   // All other fields are just temp computations for the mentioned output.
   // The class does not need anything except the values underneath the bar.
-  // The creation of the values under the bar are all tested independently and testing the callViewModel Should
-  // not test their cretation. Call view model only needs:
+  // The creations of the values under the bar are all tested independently and testing the callViewModel Should
+  // not test their creation. Call view model only needs:
   //  - memberships$ via createMemberships$
   //  - localMembership via createLocalMembership$
   //  - callLifecycle via createCallNotificationLifecycle$
@@ -392,20 +418,22 @@ export function createCallViewModel$(
   const localTransport$ = createLocalTransport$({
     scope: scope,
     memberships$: memberships$,
-    client: matrixRoom.client,
+    client,
     roomId: matrixRoom.roomId,
     useOldestMember$: scope.behavior(
-      matrixRTCMode.value$.pipe(map((v) => v === MatrixRTCMode.Legacy)),
+      matrixRTCMode$.pipe(map((v) => v === MatrixRTCMode.Legacy)),
     ),
   });
 
   const connectionFactory = new ECConnectionFactory(
-    matrixRoom.client,
+    client,
     mediaDevices,
     trackProcessorState$,
     livekitKeyProvider,
     getUrlParams().controlledAudioDevices,
     options.livekitRoomFactory,
+    getUrlParams().echoCancellation,
+    getUrlParams().noiseSuppression,
   );
 
   const connectionManager = createConnectionManager$({
@@ -413,7 +441,18 @@ export function createCallViewModel$(
     connectionFactory: connectionFactory,
     inputTransports$: scope.behavior(
       combineLatest(
-        [localTransport$, membershipsAndTransports.transports$],
+        [
+          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) => [
@@ -423,7 +462,7 @@ export function createCallViewModel$(
         },
       ),
     ),
-    logger: logger,
+    logger,
   });
 
   const matrixLivekitMembers$ = createMatrixLivekitMembers$({
@@ -434,10 +473,10 @@ export function createCallViewModel$(
   });
 
   const connectOptions$ = scope.behavior(
-    matrixRTCMode.value$.pipe(
+    matrixRTCMode$.pipe(
       map((mode) => ({
         encryptMedia: livekitKeyProvider !== undefined,
-        // TODO. This might need to get called again on each cahnge of matrixRTCMode...
+        // TODO. This might need to get called again on each change of matrixRTCMode...
         matrixRTCMode: mode,
       })),
     ),
@@ -445,15 +484,34 @@ export function createCallViewModel$(
 
   const localMembership = createLocalMembership$({
     scope: scope,
+    homeserverConnected: createHomeserverConnected$(
+      scope,
+      client,
+      matrixRTCSession,
+    ),
     muteStates: muteStates,
-    mediaDevices: mediaDevices,
+    joinMatrixRTC: (transport: LivekitTransport) => {
+      return enterRTCSession(
+        matrixRTCSession,
+        transport,
+        connectOptions$.value,
+      );
+    },
+    createPublisherFactory: (connection: Connection) => {
+      return new Publisher(
+        scope,
+        connection,
+        mediaDevices,
+        muteStates,
+        trackProcessorState$,
+        logger.getChild(
+          "[Publisher " + connection.transport.livekit_service_url + "]",
+        ),
+      );
+    },
     connectionManager: connectionManager,
     matrixRTCSession: matrixRTCSession,
-    matrixRoom: matrixRoom,
     localTransport$: localTransport$,
-    trackProcessorState$: trackProcessorState$,
-    widget,
-    options: connectOptions$,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
@@ -469,22 +527,21 @@ export function createCallViewModel$(
     ),
   );
 
-  const localMatrixLivekitMemberUninitialized = {
-    membership$: localRtcMembership$,
-    participant$: localMembership.participant$,
-    connection$: localMembership.connection$,
-    userId: userId,
-  };
-
-  const localMatrixLivekitMember$: Behavior<MatrixLivekitMember | null> =
+  const localMatrixLivekitMember$: Behavior<LocalMatrixLivekitMember | null> =
     scope.behavior(
       localRtcMembership$.pipe(
-        switchMap((membership) => {
-          if (!membership) return of(null);
-          return of(
-            // casting is save here since we know that localRtcMembership$ is !== null since we reached this case.
-            localMatrixLivekitMemberUninitialized as MatrixLivekitMember,
-          );
+        filterBehavior((membership) => membership !== null),
+        map((membership$) => {
+          if (membership$ === null) return null;
+          return {
+            membership$,
+            participant: {
+              type: "local" as const,
+              value$: localMembership.participant$,
+            },
+            connection$: localMembership.connection$,
+            userId,
+          };
         }),
       ),
     );
@@ -547,34 +604,16 @@ export function createCallViewModel$(
     ),
   );
 
-  // CODESMELL?
-  // This is functionally the same Observable as leave$, except here it's
-  // hoisted to the top of the class. This enables the cyclic dependency between
-  // leave$ -> autoLeave$ -> callPickupState$ -> livekitConnectionState$ ->
-  // localConnection$ -> transports$ -> joined$ -> leave$.
-  const leaveHoisted$ = new Subject<
-    "user" | "timeout" | "decline" | "allOthersLeft"
-  >();
-
-  /**
-   * Whether various media/event sources should pretend to be disconnected from
-   * all network input, even if their connection still technically works.
-   */
-  // We do this when the app is in the 'reconnecting' state, because it might be
-  // that the LiveKit connection is still functional while the homeserver is
-  // down, for example, and we want to avoid making people worry that the app is
-  // in a split-brained state.
-  // DISCUSSION own membership manager ALSO this probably can be simplifis
-  const reconnecting$ = localMembership.reconnecting$;
-  const pretendToBeDisconnected$ = reconnecting$;
-
-  const audioParticipants$ = scope.behavior(
+  const livekitRoomItems$ = scope.behavior(
     matrixLivekitMembers$.pipe(
+      tap((val) => {
+        logger.debug("matrixLivekitMembers$ updated", val.value);
+      }),
       switchMap((membersWithEpoch) => {
         const members = membersWithEpoch.value;
         const a$ = combineLatest(
           members.map((member) =>
-            combineLatest([member.connection$, member.participant$]).pipe(
+            combineLatest([member.connection$, member.participant.value$]).pipe(
               map(([connection, participant]) => {
                 // do not render audio for local participant
                 if (!connection || !participant || participant.isLocal)
@@ -594,7 +633,7 @@ export function createCallViewModel$(
         return a$;
       }),
       map((members) =>
-        members.reduce<AudioLivekitItem[]>((acc, curr) => {
+        members.reduce<LivekitRoomItem[]>((acc, curr) => {
           if (!curr) return acc;
 
           const existing = acc.find((item) => item.url === curr.url);
@@ -615,7 +654,7 @@ export function createCallViewModel$(
   );
 
   const handsRaised$ = scope.behavior(
-    handsRaisedSubject$.pipe(pauseWhen(pretendToBeDisconnected$)),
+    handsRaisedSubject$.pipe(pauseWhen(localMembership.reconnecting$)),
   );
 
   const reactions$ = scope.behavior(
@@ -628,14 +667,13 @@ export function createCallViewModel$(
           ]),
         ),
       ),
-      pauseWhen(pretendToBeDisconnected$),
+      pauseWhen(localMembership.reconnecting$),
     ),
   );
 
   /**
    * List of user media (camera feeds) that we want tiles for.
    */
-  // TODO this also needs the local participant to be added.
   const userMedia$ = scope.behavior<UserMedia[]>(
     combineLatest([
       localMatrixLivekitMember$,
@@ -650,10 +688,10 @@ export function createCallViewModel$(
           { value: matrixLivekitMembers },
           duplicateTiles,
         ]) {
-          let localParticipantId = undefined;
+          let localParticipantId: string | undefined = undefined;
           // add local member if available
           if (localMatrixLivekitMember) {
-            const { userId, participant$, connection$, membership$ } =
+            const { userId, participant, connection$, membership$ } =
               localMatrixLivekitMember;
             localParticipantId = `${userId}:${membership$.value.deviceId}`; // should be membership$.value.membershipID which is not optional
             // const participantId = membership$.value.membershipID;
@@ -664,7 +702,7 @@ export function createCallViewModel$(
                     dup,
                     localParticipantId,
                     userId,
-                    participant$,
+                    participant satisfies TaggedParticipant as TaggedParticipant, // Widen the type safely
                     connection$,
                   ],
                   data: undefined,
@@ -675,7 +713,7 @@ export function createCallViewModel$(
           // add remote members that are available
           for (const {
             userId,
-            participant$,
+            participant,
             connection$,
             membership$,
           } of matrixLivekitMembers) {
@@ -684,7 +722,7 @@ export function createCallViewModel$(
             // const participantId = membership$.value?.identity;
             for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
               yield {
-                keys: [dup, participantId, userId, participant$, connection$],
+                keys: [dup, participantId, userId, participant, connection$],
                 data: undefined,
               };
             }
@@ -696,7 +734,7 @@ export function createCallViewModel$(
           dup,
           participantId,
           userId,
-          participant$,
+          participant,
           connection$,
         ) => {
           const livekitRoom$ = scope.behavior(
@@ -715,12 +753,12 @@ export function createCallViewModel$(
             scope,
             `${participantId}:${dup}`,
             userId,
-            participant$,
+            participant,
             options.encryptionSystem,
             livekitRoom$,
             focusUrl$,
             mediaDevices,
-            pretendToBeDisconnected$,
+            localMembership.reconnecting$,
             displayName$,
             matrixMemberMetadataStore.createAvatarUrlBehavior$(userId),
             handsRaised$.pipe(map((v) => v[participantId]?.time ?? null)),
@@ -816,10 +854,7 @@ export function createCallViewModel$(
     merge(
       autoLeave$,
       merge(userHangup$, widgetHangup$).pipe(map(() => "user" as const)),
-    ).pipe(
-      scope.share,
-      tap((reason) => leaveHoisted$.next(reason)),
-    );
+    ).pipe(scope.share);
 
   const spotlightSpeaker$ = scope.behavior<UserMediaViewModel | null>(
     userMedia$.pipe(
@@ -928,20 +963,29 @@ export function createCallViewModel$(
     ),
   );
 
-  const hasRemoteScreenShares$: Observable<boolean> = spotlight$.pipe(
-    map((spotlight) =>
-      spotlight.some((vm) => !vm.local && vm instanceof ScreenShareViewModel),
+  const hasRemoteScreenShares$ = scope.behavior<boolean>(
+    spotlight$.pipe(
+      map((spotlight) =>
+        spotlight.some((vm) => !vm.local && vm instanceof ScreenShareViewModel),
+      ),
     ),
-    distinctUntilChanged(),
   );
 
   const pipEnabled$ = scope.behavior(setPipEnabled$, false);
 
+  const windowSize$ =
+    options.windowSize$ ??
+    scope.behavior<{ width: number; height: number }>(
+      fromEvent(window, "resize").pipe(
+        startWith(null),
+        map(() => ({ width: window.innerWidth, height: window.innerHeight })),
+      ),
+    );
+
+  // A guess at what the window's mode should be based on its size and shape.
   const naturalWindowMode$ = scope.behavior<WindowMode>(
-    fromEvent(window, "resize").pipe(
-      map(() => {
-        const height = window.innerHeight;
-        const width = window.innerWidth;
+    windowSize$.pipe(
+      map(({ width, height }) => {
         if (height <= 400 && width <= 340) return "pip";
         // Our layouts for flat windows are better at adapting to a small width
         // than our layouts for narrow windows are at adapting to a small height,
@@ -951,7 +995,6 @@ export function createCallViewModel$(
         return "normal";
       }),
     ),
-    "normal",
   );
 
   /**
@@ -968,36 +1011,11 @@ export function createCallViewModel$(
     spotlightExpandedToggle$.pipe(accumulate(false, (expanded) => !expanded)),
   );
 
-  const gridModeUserSelection$ = new Subject<GridMode>();
-  /**
-   * The layout mode of the media tile grid.
-   */
-  const gridMode$ =
-    // If the user hasn't selected spotlight and somebody starts screen sharing,
-    // automatically switch to spotlight mode and reset when screen sharing ends
-    scope.behavior<GridMode>(
-      gridModeUserSelection$.pipe(
-        switchMap((userSelection) =>
-          (userSelection === "spotlight"
-            ? EMPTY
-            : combineLatest([hasRemoteScreenShares$, windowMode$]).pipe(
-                skip(userSelection === null ? 0 : 1),
-                map(
-                  ([hasScreenShares, windowMode]): GridMode =>
-                    hasScreenShares || windowMode === "flat"
-                      ? "spotlight"
-                      : "grid",
-                ),
-              )
-          ).pipe(startWith(userSelection ?? "grid")),
-        ),
-      ),
-      "grid",
-    );
-
-  const setGridMode = (value: GridMode): void => {
-    gridModeUserSelection$.next(value);
-  };
+  const { setGridMode, gridMode$ } = createLayoutModeSwitch(
+    scope,
+    windowMode$,
+    hasRemoteScreenShares$,
+  );
 
   const gridLayoutMedia$: Observable<GridLayoutMedia> = combineLatest(
     [grid$, spotlight$],
@@ -1424,16 +1442,44 @@ export function createCallViewModel$(
   // reassigned here to make it publicly accessible
   const toggleScreenSharing = localMembership.toggleScreenSharing;
 
-  const join = localMembership.requestConnect;
-  // TODO-MULTI-SFU: Use this view model for the lobby as well, and only call this once 'join' is clicked?
-  join();
+  const errors$ = scope.behavior<{
+    transportError?: ElementCallError;
+    matrixError?: ElementCallError;
+    connectionError?: ElementCallError;
+    publishError?: ElementCallError;
+  } | null>(
+    localMembership.localMemberState$.pipe(
+      map((value) => {
+        const returnObject: {
+          transportError?: ElementCallError;
+          matrixError?: ElementCallError;
+          connectionError?: ElementCallError;
+          publishError?: ElementCallError;
+        } = {};
+        if (value instanceof ElementCallError) return { transportError: value };
+        if (value === TransportState.Waiting) return null;
+        if (value.matrix instanceof ElementCallError)
+          returnObject.matrixError = value.matrix;
+        if (value.media instanceof ElementCallError)
+          returnObject.publishError = value.media;
+        else if (
+          typeof value.media === "object" &&
+          value.media.connection instanceof ElementCallError
+        )
+          returnObject.connectionError = value.media.connection;
+        return returnObject;
+      }),
+    ),
+    null,
+  );
+
   return {
     autoLeave$: autoLeave$,
     callPickupState$: callPickupState$,
     ringOverlay$: ringOverlay$,
     leave$: leave$,
     hangup: (): void => userHangup$.next(),
-    join: join,
+    join: localMembership.requestJoinAndPublish,
     toggleScreenSharing: toggleScreenSharing,
     sharingScreen$: sharingScreen$,
 
@@ -1442,10 +1488,22 @@ export function createCallViewModel$(
     hoverScreen: (): void => screenHover$.next(),
     unhoverScreen: (): void => screenUnhover$.next(),
 
-    configError$: localMembership.configError$,
+    fatalError$: scope.behavior(
+      errors$.pipe(
+        map((errors) => {
+          logger.debug("errors$ to compute any fatal errors:", errors);
+          return (
+            errors?.transportError ??
+            errors?.matrixError ??
+            errors?.connectionError ??
+            null
+          );
+        }),
+        filter((error) => error !== null),
+      ),
+      null,
+    ),
     participantCount$: participantCount$,
-    audioParticipants$: audioParticipants$,
-
     handsRaised$: handsRaised$,
     reactions$: reactions$,
     joinSoundEffect$: joinSoundEffect$,
@@ -1464,6 +1522,16 @@ export function createCallViewModel$(
     spotlight$: spotlight$,
     pip$: pip$,
     layout$: layout$,
+    userMedia$,
+    localMatrixLivekitMember$,
+    matrixLivekitMembers$: scope.behavior(
+      matrixLivekitMembers$.pipe(
+        map((members) => members.value),
+        tap((v) => {
+          logger.debug("matrixLivekitMembers$ updated (exported)", v);
+        }),
+      ),
+    ),
     tileStoreGeneration$: tileStoreGeneration$,
     showSpotlightIndicators$: showSpotlightIndicators$,
     showSpeakingIndicators$: showSpeakingIndicators$,
@@ -1471,11 +1539,11 @@ export function createCallViewModel$(
     showFooter$: showFooter$,
     earpieceMode$: earpieceMode$,
     audioOutputSwitcher$: audioOutputSwitcher$,
-    reconnecting$: reconnecting$,
+    reconnecting$: localMembership.reconnecting$,
+    livekitRoomItems$,
+    connected$: localMembership.connected$,
   };
 }
-// TODO-MULTI-SFU   // Setup and update the keyProvider which was create by `createRoom` was a thing before. Now we never update if the E2EEsystem changes
-// do we need this?
 
 function getE2eeKeyProvider(
   e2eeSystem: EncryptionSystem,

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -53,6 +53,7 @@ import {
 import { type Behavior, constant } from "../Behavior";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { type MediaDevices } from "../MediaDevices";
+import { type MatrixRTCMode } from "../../settings/settings";
 
 mockConfig({
   livekit: { livekit_service_url: "http://my-default-service-url.com" },
@@ -75,119 +76,130 @@ export interface CallViewModelInputs {
   speaking: Map<Participant, Observable<boolean>>;
   mediaDevices: MediaDevices;
   initialSyncState: SyncState;
+  windowSize$: Behavior<{ width: number; height: number }>;
 }
 
 const localParticipant = mockLocalParticipant({ identity: "" });
 
-export function withCallViewModel(
-  {
-    remoteParticipants$ = constant([]),
-    rtcMembers$ = constant([localRtcMember]),
-    livekitConnectionState$: connectionState$ = constant(
-      ConnectionState.Connected,
-    ),
-    speaking = new Map(),
-    mediaDevices = mockMediaDevices({}),
-    initialSyncState = SyncState.Syncing,
-  }: Partial<CallViewModelInputs> = {},
-  continuation: (
-    vm: CallViewModel,
-    rtcSession: MockRTCSession,
-    subjects: { raisedHands$: BehaviorSubject<Record<string, RaisedHandInfo>> },
-    setSyncState: (value: SyncState) => void,
-  ) => void,
-  options: CallViewModelOptions = {
-    encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-    autoLeaveWhenOthersLeft: false,
-  },
-): void {
-  let syncState = initialSyncState;
-  const setSyncState = (value: SyncState): void => {
-    const prev = syncState;
-    syncState = value;
-    room.client.emit(ClientEvent.Sync, value, prev);
-  };
-  const room = mockMatrixRoom({
-    client: new (class extends EventEmitter {
-      public getUserId(): string | undefined {
-        return localRtcMember.userId;
-      }
+export function withCallViewModel(mode: MatrixRTCMode) {
+  return (
+    {
+      remoteParticipants$ = constant([]),
+      rtcMembers$ = constant([localRtcMember]),
+      livekitConnectionState$: connectionState$ = constant(
+        ConnectionState.Connected,
+      ),
+      speaking = new Map(),
+      mediaDevices = mockMediaDevices({}),
+      initialSyncState = SyncState.Syncing,
+      windowSize$ = constant({ width: 1000, height: 800 }),
+    }: Partial<CallViewModelInputs> = {},
+    continuation: (
+      vm: CallViewModel,
+      rtcSession: MockRTCSession,
+      subjects: {
+        raisedHands$: BehaviorSubject<Record<string, RaisedHandInfo>>;
+      },
+      setSyncState: (value: SyncState) => void,
+    ) => void,
+    options: Partial<CallViewModelOptions> = {},
+  ): void => {
+    let syncState = initialSyncState;
+    const setSyncState = (value: SyncState): void => {
+      const prev = syncState;
+      syncState = value;
+      room.client.emit(ClientEvent.Sync, value, prev);
+    };
+    const room = mockMatrixRoom({
+      client: new (class extends EventEmitter {
+        public getUserId(): string | undefined {
+          return localRtcMember.userId;
+        }
 
-      public getDeviceId(): string {
-        return localRtcMember.deviceId;
-      }
+        public getDeviceId(): string {
+          return localRtcMember.deviceId;
+        }
 
-      public getDomain(): string {
-        return "example.com";
-      }
+        public getDomain(): string {
+          return "example.com";
+        }
 
-      public getSyncState(): SyncState {
-        return syncState;
-      }
-    })() as Partial<MatrixClient> as MatrixClient,
-    getMembers: () => Array.from(roomMembers.values()),
-    getMembersWithMembership: () => Array.from(roomMembers.values()),
-  });
-  const rtcSession = new MockRTCSession(room, []).withMemberships(rtcMembers$);
-  const participantsSpy = vi
-    .spyOn(ComponentsCore, "connectedParticipantsObserver")
-    .mockReturnValue(remoteParticipants$);
-  const mediaSpy = vi
-    .spyOn(ComponentsCore, "observeParticipantMedia")
-    .mockImplementation((p) =>
-      of({ participant: p } as Partial<
-        ComponentsCore.ParticipantMedia<LocalParticipant>
-      > as ComponentsCore.ParticipantMedia<LocalParticipant>),
+        public getSyncState(): SyncState {
+          return syncState;
+        }
+      })() as Partial<MatrixClient> as MatrixClient,
+      getMembers: () => Array.from(roomMembers.values()),
+      getMembersWithMembership: () => Array.from(roomMembers.values()),
+    });
+    const rtcSession = new MockRTCSession(room, []).withMemberships(
+      rtcMembers$,
     );
-  const eventsSpy = vi
-    .spyOn(ComponentsCore, "observeParticipantEvents")
-    .mockImplementation((p, ...eventTypes) => {
-      if (eventTypes.includes(ParticipantEvent.IsSpeakingChanged)) {
-        return (speaking.get(p) ?? of(false)).pipe(
-          map((s): Participant => ({ ...p, isSpeaking: s }) as Participant),
-        );
-      } else {
-        return of(p);
-      }
+    const participantsSpy = vi
+      .spyOn(ComponentsCore, "connectedParticipantsObserver")
+      .mockReturnValue(remoteParticipants$);
+    const mediaSpy = vi
+      .spyOn(ComponentsCore, "observeParticipantMedia")
+      .mockImplementation((p) =>
+        of({ participant: p } as Partial<
+          ComponentsCore.ParticipantMedia<LocalParticipant>
+        > as ComponentsCore.ParticipantMedia<LocalParticipant>),
+      );
+    const eventsSpy = vi
+      .spyOn(ComponentsCore, "observeParticipantEvents")
+      .mockImplementation((p, ...eventTypes) => {
+        if (eventTypes.includes(ParticipantEvent.IsSpeakingChanged)) {
+          return (speaking.get(p) ?? of(false)).pipe(
+            map((s): Participant => ({ ...p, isSpeaking: s }) as Participant),
+          );
+        } else {
+          return of(p);
+        }
+      });
+
+    const roomEventSelectorSpy = vi
+      .spyOn(ComponentsCore, "roomEventSelector")
+      .mockImplementation((_room, _eventType) => of());
+    const muteStates = mockMuteStates();
+    const raisedHands$ = new BehaviorSubject<Record<string, RaisedHandInfo>>(
+      {},
+    );
+    const reactions$ = new BehaviorSubject<Record<string, ReactionInfo>>({});
+
+    const vm = createCallViewModel$(
+      testScope(),
+      rtcSession.asMockedSession(),
+      room,
+      mediaDevices,
+      muteStates,
+      {
+        encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
+        autoLeaveWhenOthersLeft: false,
+        livekitRoomFactory: (): LivekitRoom =>
+          mockLivekitRoom({
+            localParticipant,
+            disconnect: async () => Promise.resolve(),
+            setE2EEEnabled: async () => Promise.resolve(),
+          }),
+        connectionState$,
+        windowSize$,
+        matrixRTCMode$: constant(mode),
+        ...options,
+      },
+      raisedHands$,
+      reactions$,
+      new BehaviorSubject<ProcessorState>({
+        processor: undefined,
+        supported: undefined,
+      }),
+    );
+
+    onTestFinished(() => {
+      participantsSpy.mockRestore();
+      mediaSpy.mockRestore();
+      eventsSpy.mockRestore();
+      roomEventSelectorSpy.mockRestore();
     });
 
-  const roomEventSelectorSpy = vi
-    .spyOn(ComponentsCore, "roomEventSelector")
-    .mockImplementation((_room, _eventType) => of());
-  const muteStates = mockMuteStates();
-  const raisedHands$ = new BehaviorSubject<Record<string, RaisedHandInfo>>({});
-  const reactions$ = new BehaviorSubject<Record<string, ReactionInfo>>({});
-
-  const vm = createCallViewModel$(
-    testScope(),
-    rtcSession.asMockedSession(),
-    room,
-    mediaDevices,
-    muteStates,
-    {
-      ...options,
-      livekitRoomFactory: (): LivekitRoom =>
-        mockLivekitRoom({
-          localParticipant,
-          disconnect: async () => Promise.resolve(),
-          setE2EEEnabled: async () => Promise.resolve(),
-        }),
-      connectionState$,
-    },
-    raisedHands$,
-    reactions$,
-    new BehaviorSubject<ProcessorState>({
-      processor: undefined,
-      supported: undefined,
-    }),
-  );
-
-  onTestFinished(() => {
-    participantsSpy.mockRestore();
-    mediaSpy.mockRestore();
-    eventsSpy.mockRestore();
-    roomEventSelectorSpy.mockRestore();
-  });
-
-  continuation(vm, rtcSession, { raisedHands$: raisedHands$ }, setSyncState);
+    continuation(vm, rtcSession, { raisedHands$: raisedHands$ }, setSyncState);
+  };
 }

src/state/CallViewModel/LayoutSwitch.test.ts

@@ -0,0 +1,132 @@
+/*
+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.
+*/
+
+import { describe, test } from "vitest";
+
+import { createLayoutModeSwitch } from "./LayoutSwitch";
+import { testScope, withTestScheduler } from "../../utils/test";
+
+function testLayoutSwitch({
+  windowMode = "n",
+  hasScreenShares = "n",
+  userSelection = "",
+  expectedGridMode,
+}: {
+  windowMode?: string;
+  hasScreenShares?: string;
+  userSelection?: string;
+  expectedGridMode: string;
+}): void {
+  withTestScheduler(({ behavior, schedule, expectObservable }) => {
+    const { gridMode$, setGridMode } = createLayoutModeSwitch(
+      testScope(),
+      behavior(windowMode, { n: "normal", N: "narrow", f: "flat" }),
+      behavior(hasScreenShares, { y: true, n: false }),
+    );
+    schedule(userSelection, {
+      g: () => setGridMode("grid"),
+      s: () => setGridMode("spotlight"),
+    });
+    expectObservable(gridMode$).toBe(expectedGridMode, {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+}
+
+describe("default mode", () => {
+  test("uses grid layout by default", () =>
+    testLayoutSwitch({
+      expectedGridMode: "g",
+    }));
+
+  test("uses spotlight mode when window mode is flat", () =>
+    testLayoutSwitch({
+      windowMode: "      f",
+      expectedGridMode: "s",
+    }));
+});
+
+test("allows switching modes manually", () =>
+  testLayoutSwitch({
+    userSelection: "   --sgs",
+    expectedGridMode: "g-sgs",
+  }));
+
+test("switches to spotlight mode when there is a remote screen share", () =>
+  testLayoutSwitch({
+    hasScreenShares: " n--y",
+    expectedGridMode: "g--s",
+  }));
+
+test("can manually switch to grid when there is a screenshare", () =>
+  testLayoutSwitch({
+    hasScreenShares: " n-y",
+    userSelection: "   ---g",
+    expectedGridMode: "g-sg",
+  }));
+
+test("auto-switches after manually selecting grid", () =>
+  testLayoutSwitch({
+    // Two screenshares will happen in sequence. There is a screen share that
+    // forces spotlight, then the user manually switches back to grid.
+    hasScreenShares: " n-y-ny",
+    userSelection: "   ---g",
+    expectedGridMode: "g-sg-s",
+    // If we did want to respect manual selection, the expectation would be: g-sg
+  }));
+
+test("switches back to grid mode when the remote screen share ends", () =>
+  testLayoutSwitch({
+    hasScreenShares: " n--y--n",
+    expectedGridMode: "g--s--g",
+  }));
+
+test("auto-switches to spotlight again after first screen share ends", () =>
+  testLayoutSwitch({
+    hasScreenShares: " nyny",
+    expectedGridMode: "gsgs",
+  }));
+
+test("switches manually to grid after screen share while manually in spotlight", () =>
+  testLayoutSwitch({
+    // Initially, no one is sharing. Then the user manually switches to spotlight.
+    // After a screen share starts, the user manually switches to grid.
+    hasScreenShares: " n-y",
+    userSelection: "   -s-g",
+    expectedGridMode: "gs-g",
+  }));
+
+test("auto-switches to spotlight when in flat window mode", () =>
+  testLayoutSwitch({
+    // First normal, then narrow, then flat.
+    windowMode: "      nNf",
+    expectedGridMode: "g-s",
+  }));
+
+test("allows switching modes manually when in flat window mode", () =>
+  testLayoutSwitch({
+    // Window becomes flat, then user switches to grid and back.
+    // Finally the window returns to a normal shape.
+    windowMode: "      nf--n",
+    userSelection: "   --gs",
+    expectedGridMode: "gsgsg",
+  }));
+
+test("stays in spotlight while there are screen shares even when window mode changes", () =>
+  testLayoutSwitch({
+    windowMode: "      nfn",
+    hasScreenShares: " y",
+    expectedGridMode: "s",
+  }));
+
+test("ignores end of screen share until window mode returns to normal", () =>
+  testLayoutSwitch({
+    windowMode: "      nf-n",
+    hasScreenShares: " y-n",
+    expectedGridMode: "s--g",
+  }));

src/state/CallViewModel/LayoutSwitch.ts

@@ -0,0 +1,93 @@
+/*
+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.
+*/
+
+import {
+  combineLatest,
+  map,
+  Subject,
+  startWith,
+  skipWhile,
+  switchMap,
+} from "rxjs";
+
+import { type GridMode, type WindowMode } from "./CallViewModel.ts";
+import { constant, type Behavior } from "../Behavior.ts";
+import { type ObservableScope } from "../ObservableScope.ts";
+
+/**
+ * Creates a layout mode switch that allows switching between grid and spotlight modes.
+ * The actual layout mode might switch automatically to spotlight if there is a
+ * remote screen share active or if the window mode is flat.
+ *
+ * @param scope - The observable scope to manage subscriptions.
+ * @param windowMode$ - The current window mode.
+ * @param hasRemoteScreenShares$ - A behavior indicating if there are remote screen shares active.
+ */
+export function createLayoutModeSwitch(
+  scope: ObservableScope,
+  windowMode$: Behavior<WindowMode>,
+  hasRemoteScreenShares$: Behavior<boolean>,
+): {
+  gridMode$: Behavior<GridMode>;
+  setGridMode: (value: GridMode) => void;
+} {
+  const userSelection$ = new Subject<GridMode>();
+  // Callback to set the grid mode desired by the user.
+  // Notice that this is only a preference, the actual grid mode can be overridden
+  // if there is a remote screen share active.
+  const setGridMode = (value: GridMode): void => userSelection$.next(value);
+
+  /**
+   * The natural grid mode - the mode that the grid would prefer to be in,
+   * not accounting for the user's manual selections.
+   */
+  const naturalGridMode$ = scope.behavior<GridMode>(
+    combineLatest(
+      [hasRemoteScreenShares$, windowMode$],
+      (hasRemoteScreenShares, windowMode) =>
+        // When there are screen shares or the window is flat (as with a phone
+        // in landscape orientation), spotlight is a better experience.
+        // We want screen shares to be big and readable, and we want flipping
+        // your phone into landscape to be a quick way of maximising the
+        // spotlight tile.
+        hasRemoteScreenShares || windowMode === "flat" ? "spotlight" : "grid",
+    ),
+  );
+
+  /**
+   * The layout mode of the media tile grid.
+   */
+  const gridMode$ = scope.behavior<GridMode>(
+    // Whenever the user makes a selection, we enter a new mode of behavior:
+    userSelection$.pipe(
+      map((selection) => {
+        if (selection === "grid")
+          // The user has selected grid mode. Start by respecting their choice,
+          // but then follow the natural mode again as soon as it matches.
+          return naturalGridMode$.pipe(
+            skipWhile((naturalMode) => naturalMode !== selection),
+            startWith(selection),
+          );
+
+        // The user has selected spotlight mode. If this matches the natural
+        // mode, then follow the natural mode going forward.
+        return selection === naturalGridMode$.value
+          ? naturalGridMode$
+          : constant(selection);
+      }),
+      // Initially the mode of behavior is to just follow the natural grid mode.
+      startWith(naturalGridMode$),
+      // Switch between each mode of behavior.
+      switchMap((mode$) => mode$),
+    ),
+  );
+
+  return {
+    gridMode$,
+    setGridMode,
+  };
+}

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

@@ -0,0 +1,202 @@
+/*
+Copyright 2025 Element Creations Ltd.
+Copyright 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 { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { EventEmitter } from "events";
+import { ClientEvent, SyncState } from "matrix-js-sdk";
+import { MembershipManagerEvent, Status } from "matrix-js-sdk/lib/matrixrtc";
+
+import { ObservableScope } from "../../ObservableScope";
+import { createHomeserverConnected$ } from "./HomeserverConnected";
+
+/**
+ * Minimal stub of a Matrix client sufficient for our tests:
+ ```
+  createHomeserverConnected$(
+     scope: ObservableScope,
+     client: NodeStyleEventEmitter & Pick<MatrixClient, "getSyncState">,
+     matrixRTCSession: NodeStyleEventEmitter &
+       Pick<MatrixRTCSession, "membershipStatus" | "probablyLeft">,
+ )
+ ```
+ */
+class MockMatrixClient extends EventEmitter {
+  private syncState: SyncState;
+  public constructor(initial: SyncState) {
+    super();
+    this.syncState = initial;
+  }
+  public setSyncState(state: SyncState): void {
+    this.syncState = state;
+    // Matrix's Sync event in createHomeserverConnected$ expects [SyncState]
+    this.emit(ClientEvent.Sync, [state]);
+  }
+  public getSyncState(): SyncState {
+    return this.syncState;
+  }
+}
+
+/**
+ * Minimal stub of MatrixRTCSession (membership manager):
+ ```
+  createHomeserverConnected$(
+     scope: ObservableScope,
+     client: NodeStyleEventEmitter & Pick<MatrixClient, "getSyncState">,
+     matrixRTCSession: NodeStyleEventEmitter &
+       Pick<MatrixRTCSession, "membershipStatus" | "probablyLeft">,
+ )
+ ```
+ */
+class MockMatrixRTCSession extends EventEmitter {
+  public membershipStatus: Status;
+  public probablyLeft: boolean;
+
+  public constructor(props: {
+    membershipStatus: Status;
+    probablyLeft: boolean;
+  }) {
+    super();
+    this.membershipStatus = props.membershipStatus;
+    this.probablyLeft = props.probablyLeft;
+  }
+
+  public setMembershipStatus(status: Status): void {
+    this.membershipStatus = status;
+    this.emit(MembershipManagerEvent.StatusChanged);
+  }
+
+  public setProbablyLeft(flag: boolean): void {
+    this.probablyLeft = flag;
+    this.emit(MembershipManagerEvent.ProbablyLeft);
+  }
+}
+
+describe("createHomeserverConnected$", () => {
+  let scope: ObservableScope;
+  let client: MockMatrixClient;
+  let session: MockMatrixRTCSession;
+
+  beforeEach(() => {
+    scope = new ObservableScope();
+    client = new MockMatrixClient(SyncState.Error); // start disconnected
+    session = new MockMatrixRTCSession({
+      membershipStatus: Status.Disconnected,
+      probablyLeft: false,
+    });
+  });
+
+  afterEach(() => {
+    scope.end();
+  });
+
+  // LLM generated test cases. They are a bit overkill but I improved the mocking so it is
+  // easy enough to read them so I think they can stay.
+  it("is false when sync state is not Syncing", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    expect(hsConnected.combined$.value).toBe(false);
+  });
+
+  it("remains false while membership status is not Connected even if sync is Syncing", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    client.setSyncState(SyncState.Syncing);
+    expect(hsConnected.combined$.value).toBe(false); // membership still disconnected
+  });
+
+  it("is false when membership status transitions to Connected but ProbablyLeft is true", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    // Make sync loop OK
+    client.setSyncState(SyncState.Syncing);
+    // Indicate probable leave before connection
+    session.setProbablyLeft(true);
+    session.setMembershipStatus(Status.Connected);
+    expect(hsConnected.combined$.value).toBe(false);
+  });
+
+  it("becomes true only when all three conditions are satisfied", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    // 1. Sync loop connected
+    client.setSyncState(SyncState.Syncing);
+    expect(hsConnected.combined$.value).toBe(false); // not yet membership connected
+    // 2. Membership connected
+    session.setMembershipStatus(Status.Connected);
+    expect(hsConnected.combined$.value).toBe(true); // probablyLeft is false
+  });
+
+  it("drops back to false when sync loop leaves Syncing", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    // Reach connected state
+    client.setSyncState(SyncState.Syncing);
+    session.setMembershipStatus(Status.Connected);
+    expect(hsConnected.combined$.value).toBe(true);
+
+    // Sync loop error => should flip false
+    client.setSyncState(SyncState.Error);
+    expect(hsConnected.combined$.value).toBe(false);
+  });
+
+  it("drops back to false when membership status becomes disconnected", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    client.setSyncState(SyncState.Syncing);
+    session.setMembershipStatus(Status.Connected);
+    expect(hsConnected.combined$.value).toBe(true);
+
+    session.setMembershipStatus(Status.Disconnected);
+    expect(hsConnected.combined$.value).toBe(false);
+  });
+
+  it("drops to false when ProbablyLeft is emitted after being true", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    client.setSyncState(SyncState.Syncing);
+    session.setMembershipStatus(Status.Connected);
+    expect(hsConnected.combined$.value).toBe(true);
+
+    session.setProbablyLeft(true);
+    expect(hsConnected.combined$.value).toBe(false);
+  });
+
+  it("recovers to true if ProbablyLeft becomes false again while other conditions remain true", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+    client.setSyncState(SyncState.Syncing);
+    session.setMembershipStatus(Status.Connected);
+    expect(hsConnected.combined$.value).toBe(true);
+
+    session.setProbablyLeft(true);
+    expect(hsConnected.combined$.value).toBe(false);
+
+    // Simulate clearing the flag (in realistic scenario membership manager would update)
+    session.setProbablyLeft(false);
+    expect(hsConnected.combined$.value).toBe(true);
+  });
+
+  it("composite sequence reflects each individual failure reason", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session);
+
+    // Initially false (sync error + disconnected + not probably left)
+    expect(hsConnected.combined$.value).toBe(false);
+
+    // Fix sync only
+    client.setSyncState(SyncState.Syncing);
+    expect(hsConnected.combined$.value).toBe(false);
+
+    // Fix membership
+    session.setMembershipStatus(Status.Connected);
+    expect(hsConnected.combined$.value).toBe(true);
+
+    // Introduce probablyLeft -> false
+    session.setProbablyLeft(true);
+    expect(hsConnected.combined$.value).toBe(false);
+
+    // Restore notProbablyLeft -> true again
+    session.setProbablyLeft(false);
+    expect(hsConnected.combined$.value).toBe(true);
+
+    // Drop sync -> false
+    client.setSyncState(SyncState.Error);
+    expect(hsConnected.combined$.value).toBe(false);
+  });
+});

src/state/CallViewModel/localMember/HomeserverConnected.ts

@@ -0,0 +1,91 @@
+/*
+Copyright 2025 Element Creations Ltd.
+Copyright 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 {
+  MembershipManagerEvent,
+  Status,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/lib/matrixrtc";
+import { ClientEvent, type MatrixClient, SyncState } from "matrix-js-sdk";
+import { fromEvent, startWith, map, tap, type Observable } from "rxjs";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+
+import { type ObservableScope } from "../../ObservableScope";
+import { type Behavior } from "../../Behavior";
+import { and$ } from "../../../utils/observable";
+import { type NodeStyleEventEmitter } from "../../../utils/test";
+
+/**
+ * Logger instance (scoped child) for homeserver connection updates.
+ */
+const logger = rootLogger.getChild("[HomeserverConnected]");
+
+export interface HomeserverConnected {
+  combined$: Behavior<boolean>;
+  rtsSession$: Behavior<Status>;
+}
+
+/**
+ * Behavior representing whether we consider ourselves connected to the Matrix homeserver
+ * for the purposes of a MatrixRTC session.
+ *
+ * Becomes FALSE if ANY sub-condition is fulfilled:
+ * 1. Sync loop is not in SyncState.Syncing
+ * 2. membershipStatus !== Status.Connected
+ * 3. probablyLeft === true
+ */
+export function createHomeserverConnected$(
+  scope: ObservableScope,
+  client: NodeStyleEventEmitter & Pick<MatrixClient, "getSyncState">,
+  matrixRTCSession: NodeStyleEventEmitter &
+    Pick<MatrixRTCSession, "membershipStatus" | "probablyLeft">,
+): HomeserverConnected {
+  const syncing$ = (
+    fromEvent(client, ClientEvent.Sync) as Observable<[SyncState]>
+  ).pipe(
+    startWith([client.getSyncState()]),
+    map(([state]) => state === SyncState.Syncing),
+  );
+
+  const rtsSession$ = scope.behavior<Status>(
+    fromEvent(matrixRTCSession, MembershipManagerEvent.StatusChanged).pipe(
+      map(() => matrixRTCSession.membershipStatus ?? Status.Unknown),
+    ),
+    Status.Unknown,
+  );
+
+  const membershipConnected$ = rtsSession$.pipe(
+    map((status) => status === Status.Connected),
+  );
+
+  // This is basically notProbablyLeft$
+  //
+  // probablyLeft is computed by a local timer that mimics the server delayed event.
+  // If we locally predict our server event timed out. We consider ourselves as probablyLeft
+  // even though we might not yet have received the delayed event leave.
+  //
+  // If that is not the case we certainly still have a valid membership on the matrix network
+  // independet if the sync currently works.
+  const certainlyConnected$ = fromEvent(
+    matrixRTCSession,
+    MembershipManagerEvent.ProbablyLeft,
+  ).pipe(
+    startWith(null),
+    map(() => matrixRTCSession.probablyLeft !== true),
+  );
+
+  const combined$ = scope.behavior(
+    and$(syncing$, membershipConnected$, certainlyConnected$).pipe(
+      tap((connected) => {
+        logger.info(`Homeserver connected update: ${connected}`);
+      }),
+    ),
+  );
+
+  return { combined$, rtsSession$ };
+}

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

@@ -0,0 +1,527 @@
+/*
+Copyright 2025 Element Creations Ltd.
+Copyright 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 {
+  Status as RTCMemberStatus,
+  type LivekitTransport,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/lib/matrixrtc";
+import { describe, expect, it, vi } from "vitest";
+import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
+import { BehaviorSubject, map, of } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { type LocalParticipant, type LocalTrack } from "livekit-client";
+
+import { MatrixRTCMode } from "../../../settings/settings";
+import {
+  flushPromises,
+  mockConfig,
+  mockLivekitRoom,
+  mockMuteStates,
+  withTestScheduler,
+} from "../../../utils/test";
+import {
+  TransportState,
+  createLocalMembership$,
+  enterRTCSession,
+  PublishState,
+  TrackState,
+} from "./LocalMember";
+import { MatrixRTCTransportMissingError } from "../../../utils/errors";
+import { Epoch, ObservableScope } from "../../ObservableScope";
+import { constant } from "../../Behavior";
+import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
+import { ConnectionState, type Connection } from "../remoteMembers/Connection";
+import { type Publisher } from "./Publisher";
+
+const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
+const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
+vi.mock("../../../UrlParams", () => ({ getUrlParams }));
+vi.mock("@livekit/components-core", () => ({
+  observeParticipantEvents: vi
+    .fn()
+    .mockReturnValue(of({ isScreenShareEnabled: false })),
+}));
+
+describe("LocalMembership", () => {
+  describe("enterRTCSession", () => {
+    it("It joins the correct Session", () => {
+      const focusFromOlderMembership = {
+        type: "livekit",
+        livekit_service_url: "http://my-oldest-member-service-url.com",
+        livekit_alias: "my-oldest-member-service-alias",
+      };
+
+      const focusConfigFromWellKnown = {
+        type: "livekit",
+        livekit_service_url: "http://my-well-known-service-url.com",
+      };
+      const focusConfigFromWellKnown2 = {
+        type: "livekit",
+        livekit_service_url: "http://my-well-known-service-url2.com",
+      };
+      const clientWellKnown = {
+        "org.matrix.msc4143.rtc_foci": [
+          focusConfigFromWellKnown,
+          focusConfigFromWellKnown2,
+        ],
+      };
+
+      mockConfig({
+        livekit: { livekit_service_url: "http://my-default-service-url.com" },
+      });
+
+      vi.spyOn(AutoDiscovery, "getRawClientConfig").mockImplementation(
+        async (domain) => {
+          if (domain === "example.org") {
+            return Promise.resolve(clientWellKnown);
+          }
+          return Promise.resolve({});
+        },
+      );
+
+      const mockedSession = vi.mocked({
+        room: {
+          roomId: "roomId",
+          client: {
+            getDomain: vi.fn().mockReturnValue("example.org"),
+            getOpenIdToken: vi.fn().mockResolvedValue({
+              access_token: "ACCCESS_TOKEN",
+              token_type: "Bearer",
+              matrix_server_name: "localhost",
+              expires_in: 10000,
+            }),
+          },
+        },
+        memberships: [],
+        getFocusInUse: vi.fn().mockReturnValue(focusFromOlderMembership),
+        getOldestMembership: vi.fn().mockReturnValue({
+          getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
+        }),
+        joinRoomSession: vi.fn(),
+      }) as unknown as MatrixRTCSession;
+
+      enterRTCSession(
+        mockedSession,
+        {
+          livekit_alias: "roomId",
+          livekit_service_url: "http://my-well-known-service-url.com",
+          type: "livekit",
+        },
+        {
+          encryptMedia: true,
+          matrixRTCMode: MATRIX_RTC_MODE,
+        },
+      );
+
+      expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
+        [
+          {
+            livekit_alias: "roomId",
+            livekit_service_url: "http://my-well-known-service-url.com",
+            type: "livekit",
+          },
+        ],
+        undefined,
+        expect.objectContaining({
+          manageMediaKeys: true,
+          useLegacyMemberEvents: false,
+        }),
+      );
+    });
+
+    it("It should not fail with configuration error if homeserver config has livekit url but not fallback", () => {
+      mockConfig({});
+      vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({
+        "org.matrix.msc4143.rtc_foci": [
+          {
+            type: "livekit",
+            livekit_service_url: "http://my-well-known-service-url.com",
+          },
+        ],
+      });
+
+      const mockedSession = vi.mocked({
+        room: {
+          roomId: "roomId",
+          client: {
+            getDomain: vi.fn().mockReturnValue("example.org"),
+            getOpenIdToken: vi.fn().mockResolvedValue({
+              access_token: "ACCCESS_TOKEN",
+              token_type: "Bearer",
+              matrix_server_name: "localhost",
+              expires_in: 10000,
+            }),
+          },
+        },
+        memberships: [],
+        getFocusInUse: vi.fn(),
+        joinRoomSession: vi.fn(),
+      }) as unknown as MatrixRTCSession;
+
+      enterRTCSession(
+        mockedSession,
+        {
+          livekit_alias: "roomId",
+          livekit_service_url: "http://my-well-known-service-url.com",
+          type: "livekit",
+        },
+        {
+          encryptMedia: true,
+          matrixRTCMode: MATRIX_RTC_MODE,
+        },
+      );
+    });
+  });
+
+  const defaultCreateLocalMemberValues = {
+    options: constant({
+      encryptMedia: false,
+      matrixRTCMode: MatrixRTCMode.Matrix_2_0,
+    }),
+    matrixRTCSession: {
+      updateCallIntent: () => {},
+      leaveRoomSession: () => {},
+    } as unknown as MatrixRTCSession,
+    muteStates: mockMuteStates(),
+    trackProcessorState$: constant({
+      supported: false,
+      processor: undefined,
+    }),
+    logger: logger,
+    createPublisherFactory: vi.fn(),
+    joinMatrixRTC: async (): Promise<void> => {},
+    homeserverConnected: {
+      combined$: constant(true),
+      rtsSession$: constant(RTCMemberStatus.Connected),
+    },
+  };
+
+  it("throws error on missing RTC config error", () => {
+    withTestScheduler(({ scope, hot, expectObservable }) => {
+      const localTransport$ = scope.behavior<null | LivekitTransport>(
+        hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
+        null,
+      );
+
+      // we do not need any connection data since we want to fail before reaching that.
+      const mockConnectionManager = {
+        transports$: scope.behavior(
+          localTransport$.pipe(map((t) => new Epoch([t]))),
+        ),
+        connectionManagerData$: constant(
+          new Epoch(new ConnectionManagerData()),
+        ),
+      };
+
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: mockConnectionManager,
+        localTransport$,
+      });
+      localMembership.requestJoinAndPublish();
+
+      expectObservable(localMembership.localMemberState$).toBe("ne", {
+        n: TransportState.Waiting,
+        e: expect.toSatisfy((e) => e instanceof MatrixRTCTransportMissingError),
+      });
+    });
+  });
+
+  const aTransport = {
+    livekit_service_url: "a",
+  } as LivekitTransport;
+  const bTransport = {
+    livekit_service_url: "b",
+  } as LivekitTransport;
+
+  const connectionTransportAConnected = {
+    livekitRoom: mockLivekitRoom({
+      localParticipant: {
+        isScreenShareEnabled: false,
+        trackPublications: [],
+      } as unknown as LocalParticipant,
+    }),
+    state$: constant(ConnectionState.LivekitConnected),
+    transport: aTransport,
+  } as unknown as Connection;
+  const connectionTransportAConnecting = {
+    ...connectionTransportAConnected,
+    state$: constant(ConnectionState.LivekitConnecting),
+    livekitRoom: mockLivekitRoom({}),
+  } as unknown as Connection;
+  const connectionTransportBConnected = {
+    state$: constant(ConnectionState.LivekitConnected),
+    transport: bTransport,
+    livekitRoom: mockLivekitRoom({}),
+  } as unknown as Connection;
+
+  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);
+
+    const publishers: Publisher[] = [];
+    let seed = 0;
+    defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
+      () => {
+        const a = seed;
+        seed += 1;
+        logger.info(`creating [${a}]`);
+        const p = {
+          stopPublishing: vi.fn().mockImplementation(() => {
+            logger.info(`stopPublishing [${a}]`);
+          }),
+          stopTracks: vi.fn(),
+        };
+        publishers.push(p as unknown as Publisher);
+        return p;
+      },
+    );
+    const publisherFactory =
+      defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
+        typeof vi.fn
+      >;
+
+    const connectionManagerData = new ConnectionManagerData();
+    connectionManagerData.add(connectionTransportAConnected, []);
+    connectionManagerData.add(connectionTransportBConnected, []);
+    createLocalMembership$({
+      scope,
+      ...defaultCreateLocalMemberValues,
+      connectionManager: {
+        connectionManagerData$: constant(new Epoch(connectionManagerData)),
+      },
+      localTransport$,
+    });
+    await flushPromises();
+    localTransport$.next(bTransport);
+    await flushPromises();
+    expect(publisherFactory).toHaveBeenCalledTimes(2);
+    expect(publishers.length).toBe(2);
+    // stop the first Publisher and let the second one life.
+    expect(publishers[0].stopTracks).toHaveBeenCalled();
+    expect(publishers[1].stopTracks).not.toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
+    expect(publishers[1].stopPublishing).not.toHaveBeenCalled();
+    expect(publisherFactory.mock.calls[0][0].transport).toBe(aTransport);
+    expect(publisherFactory.mock.calls[1][0].transport).toBe(bTransport);
+    scope.end();
+    await flushPromises();
+    // stop all tracks after ending scopes
+    expect(publishers[1].stopPublishing).toHaveBeenCalled();
+    // expect(publishers[1].stopTracks).toHaveBeenCalled();
+
+    defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
+  });
+
+  it("only start tracks if requested", async () => {
+    const scope = new ObservableScope();
+
+    const localTransport$ = new BehaviorSubject(aTransport);
+
+    const publishers: Publisher[] = [];
+
+    const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
+    const publishing$ = new BehaviorSubject<boolean>(false);
+    defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
+      () => {
+        const p = {
+          stopPublishing: vi.fn(),
+          stopTracks: vi.fn(),
+          createAndSetupTracks: vi.fn().mockImplementation(async () => {
+            tracks$.next([{}, {}] as LocalTrack[]);
+            return Promise.resolve();
+          }),
+          tracks$,
+          publishing$,
+        };
+        publishers.push(p as unknown as Publisher);
+        return p;
+      },
+    );
+    const publisherFactory =
+      defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
+        typeof vi.fn
+      >;
+
+    const connectionManagerData = new ConnectionManagerData();
+    connectionManagerData.add(connectionTransportAConnected, []);
+    // connectionManagerData.add(connectionTransportB, []);
+    const localMembership = createLocalMembership$({
+      scope,
+      ...defaultCreateLocalMemberValues,
+      connectionManager: {
+        connectionManagerData$: constant(new Epoch(connectionManagerData)),
+      },
+      localTransport$,
+    });
+    await flushPromises();
+    expect(publisherFactory).toHaveBeenCalledOnce();
+    // expect(localMembership.tracks$.value.length).toBe(0);
+    expect(publishers[0].createAndSetupTracks).not.toHaveBeenCalled();
+    localMembership.startTracks();
+    await flushPromises();
+    expect(publishers[0].createAndSetupTracks).toHaveBeenCalled();
+    // expect(localMembership.tracks$.value.length).toBe(2);
+    scope.end();
+    await flushPromises();
+    // stop all tracks after ending scopes
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
+    // expect(publishers[0].stopTracks).toHaveBeenCalled();
+    publisherFactory.mockClear();
+  });
+  // TODO add an integration test combining publisher and localMembership
+  //
+  it("tracks livekit state correctly", async () => {
+    const scope = new ObservableScope();
+
+    const connectionManagerData = new ConnectionManagerData();
+    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 = {
+          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);
+        return p;
+      },
+    );
+
+    const publisherFactory =
+      defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
+        typeof vi.fn
+      >;
+
+    const localMembership = createLocalMembership$({
+      scope,
+      ...defaultCreateLocalMemberValues,
+      connectionManager: {
+        connectionManagerData$,
+      },
+      localTransport$,
+    });
+
+    await flushPromises();
+    expect(localMembership.localMemberState$.value).toStrictEqual(
+      TransportState.Waiting,
+    );
+    localTransport$.next(aTransport);
+    await flushPromises();
+    expect(localMembership.localMemberState$.value).toStrictEqual({
+      matrix: RTCMemberStatus.Connected,
+      media: { connection: null, tracks: TrackState.WaitingForUser },
+    });
+
+    const connectionManagerData2 = new ConnectionManagerData();
+    connectionManagerData2.add(
+      // clone because we will mutate this later.
+      { ...connectionTransportAConnecting } as unknown as Connection,
+      [],
+    );
+
+    connectionManagerData$.next(new Epoch(connectionManagerData2));
+    await flushPromises();
+    expect(localMembership.localMemberState$.value).toStrictEqual({
+      matrix: RTCMemberStatus.Connected,
+      media: {
+        connection: ConnectionState.LivekitConnecting,
+        tracks: TrackState.WaitingForUser,
+      },
+    });
+
+    (
+      connectionManagerData2.getConnectionForTransport(aTransport)!
+        .state$ as BehaviorSubject<ConnectionState>
+    ).next(ConnectionState.LivekitConnected);
+    expect(localMembership.localMemberState$.value).toStrictEqual({
+      matrix: RTCMemberStatus.Connected,
+      media: {
+        connection: ConnectionState.LivekitConnected,
+        tracks: TrackState.WaitingForUser,
+      },
+    });
+
+    expect(publisherFactory).toHaveBeenCalledOnce();
+    // expect(localMembership.tracks$.value.length).toBe(0);
+
+    // -------
+    localMembership.startTracks();
+    // -------
+
+    await flushPromises();
+    // expect(localMembership.localMemberState$.value).toStrictEqual({
+    //   matrix: RTCMemberStatus.Connected,
+    //   media: {
+    //     tracks: TrackState.Creating,
+    //     connection: ConnectionState.LivekitConnected,
+    //   },
+    // });
+    createTrackResolver.resolve();
+    await flushPromises();
+    expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (localMembership.localMemberState$.value as any).media,
+    ).toStrictEqual(PublishState.WaitingForUser);
+
+    // -------
+    localMembership.requestJoinAndPublish();
+    // -------
+
+    expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (localMembership.localMemberState$.value as any).media,
+    ).toStrictEqual(PublishState.Publishing);
+
+    publishResolver.resolve();
+    await flushPromises();
+    expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (localMembership.localMemberState$.value as any).media,
+    ).toStrictEqual(PublishState.Publishing);
+
+    expect(publishers[0].stopPublishing).not.toHaveBeenCalled();
+
+    expect(localMembership.localMemberState$.isStopped).toBe(false);
+    scope.end();
+    await flushPromises();
+    // stays in connected state because it is stopped before the update to tracks update the state.
+    expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (localMembership.localMemberState$.value as any).media,
+    ).toStrictEqual(PublishState.Publishing);
+    // stop all tracks after ending scopes
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
+    // expect(publishers[0].stopTracks).toHaveBeenCalled();
+  });
+  // TODO add tests for matrix local matrix participation.
+});

src/state/CallViewModel/localMember/LocalMember.ts

@@ -0,0 +1,739 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type Participant,
+  ParticipantEvent,
+  type LocalParticipant,
+  type ScreenShareCaptureOptions,
+  RoomEvent,
+  MediaDeviceFailure,
+} from "livekit-client";
+import { observeParticipantEvents } from "@livekit/components-core";
+import {
+  Status as RTCSessionStatus,
+  type LivekitTransport,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/lib/matrixrtc";
+import {
+  BehaviorSubject,
+  catchError,
+  combineLatest,
+  distinctUntilChanged,
+  from,
+  fromEvent,
+  map,
+  type Observable,
+  of,
+  pairwise,
+  startWith,
+  switchMap,
+  tap,
+} from "rxjs";
+import { type Logger } from "matrix-js-sdk/lib/logger";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
+
+import { type Behavior } from "../../Behavior.ts";
+import { type IConnectionManager } from "../remoteMembers/ConnectionManager.ts";
+import { type ObservableScope } from "../../ObservableScope.ts";
+import { type Publisher } from "./Publisher.ts";
+import { type MuteStates } from "../../MuteStates.ts";
+import {
+  ElementCallError,
+  FailToStartLivekitConnection,
+  MembershipManagerError,
+  UnknownCallError,
+} from "../../../utils/errors.ts";
+import { ElementWidgetActions, widget } from "../../../widget.ts";
+import { getUrlParams } from "../../../UrlParams.ts";
+import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
+import { MatrixRTCMode } from "../../../settings/settings.ts";
+import { Config } from "../../../config/Config.ts";
+import {
+  ConnectionState,
+  type Connection,
+  type FailedToStartError,
+} from "../remoteMembers/Connection.ts";
+import { type HomeserverConnected } from "./HomeserverConnected.ts";
+import { and$ } from "../../../utils/observable.ts";
+
+export enum TransportState {
+  /** Not even a transport is available to the LocalMembership */
+  Waiting = "transport_waiting",
+}
+
+export enum PublishState {
+  WaitingForUser = "publish_waiting_for_user",
+  // XXX: This state is removed for now since we do not have full control over
+  // track publication anymore with the publisher abstraction, might come back in the future?
+  // /** Implies lk connection is connected */
+  // Starting = "publish_start_publishing",
+  /** Implies lk connection is connected */
+  Publishing = "publish_publishing",
+}
+
+// TODO not sure how to map that correctly with the
+// new publisher that does not manage tracks itself anymore
+export enum TrackState {
+  /** The track is waiting for user input to create tracks (waiting to call `startTracks()`) */
+  WaitingForUser = "tracks_waiting_for_user",
+  // XXX: This state is removed for now since we do not have full control over
+  // track creation anymore with the publisher abstraction, might come back in the future?
+  // /** Implies lk connection is connected */
+  // Creating = "tracks_creating",
+  /** Implies lk connection is connected */
+  Ready = "tracks_ready",
+}
+
+export type LocalMemberMediaState =
+  | {
+      tracks: TrackState;
+      connection: ConnectionState | FailedToStartError;
+    }
+  | PublishState
+  | ElementCallError;
+export type LocalMemberState =
+  | ElementCallError
+  | TransportState.Waiting
+  | {
+      media: LocalMemberMediaState;
+      matrix: ElementCallError | RTCSessionStatus;
+    };
+
+/*
+ * - get well known
+ * - get oldest membership
+ * - get transport to use
+ * - get openId + jwt token
+ * - wait for createTrack() call
+ *    - create tracks
+ * - wait for join() call
+ *   - Publisher.publishTracks()
+ *   - send join state/sticky event
+ */
+
+interface Props {
+  // TODO add a comment into some code style readme or file header callviewmodel
+  // that the inputs for those createSomething$() functions should NOT contain any js-sdk objectes
+  scope: ObservableScope;
+  muteStates: MuteStates;
+  connectionManager: IConnectionManager;
+  createPublisherFactory: (connection: Connection) => Publisher;
+  joinMatrixRTC: (transport: LivekitTransport) => void;
+  homeserverConnected: HomeserverConnected;
+  localTransport$: Behavior<LivekitTransport | null>;
+  matrixRTCSession: Pick<
+    MatrixRTCSession,
+    "updateCallIntent" | "leaveRoomSession"
+  >;
+  logger: Logger;
+}
+
+/**
+ * This class is responsible for managing the own membership in a room.
+ * 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.
+ * @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)
+ *  - transport$: the transport object the ownMembership$ ended up using.
+ *  - connectionState: the current connection state. Including matrix server and livekit server connection.
+ *  - sharingScreen$: Whether we are sharing our screen. `undefined` if we cannot share the screen.
+ */
+export const createLocalMembership$ = ({
+  scope,
+  connectionManager,
+  localTransport$: localTransportCanThrow$,
+  homeserverConnected,
+  createPublisherFactory,
+  joinMatrixRTC,
+  logger: parentLogger,
+  muteStates,
+  matrixRTCSession,
+}: Props): {
+  /**
+   * This request to start audio and video tracks.
+   * Can be called early to pre-emptively get media permissions and start devices.
+   */
+  startTracks: () => void;
+  /**
+   * This sets a inner state (shouldPublish) to true and instructs the js-sdk and livekit to keep the user
+   * connected to matrix and livekit.
+   */
+  requestJoinAndPublish: () => void;
+  requestDisconnect: () => void;
+  localMemberState$: Behavior<LocalMemberState>;
+  sharingScreen$: Behavior<boolean>;
+  /**
+   * Callback to toggle screen sharing. If null, screen sharing is not possible.
+   */
+  toggleScreenSharing: (() => void) | null;
+  // tracks$: Behavior<LocalTrack[]>;
+  participant$: Behavior<LocalParticipant | null>;
+  connection$: Behavior<Connection | null>;
+  /**
+   * Tracks the homserver and livekit connected state and based on that computes reconnecting.
+   */
+  reconnecting$: Behavior<boolean>;
+  /** Shorthand for homeserverConnected.rtcSession === Status.Disconnected
+   * Direct translation to the js-sdk membership manager connection `Status`.
+   */
+  disconnected$: Behavior<boolean>;
+  /**
+   * Fully connected
+   */
+  connected$: Behavior<boolean>;
+} => {
+  const logger = parentLogger.getChild("[LocalMembership]");
+  logger.debug(`Creating local membership..`);
+
+  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
+  const localTransport$ = scope.behavior(
+    localTransportCanThrow$.pipe(
+      catchError((e: unknown) => {
+        let error: ElementCallError;
+        if (e instanceof ElementCallError) {
+          error = e;
+        } else {
+          error = new UnknownCallError(
+            e instanceof Error
+              ? e
+              : new Error("Unknown error from localTransport"),
+          );
+        }
+        setTransportError(error);
+        return of(null);
+      }),
+    ),
+  );
+
+  // Drop Epoch data here since we will not combine this anymore
+  const localConnection$ = scope.behavior(
+    combineLatest([
+      connectionManager.connectionManagerData$,
+      localTransport$,
+    ]).pipe(
+      map(([{ value: connectionData }, localTransport]) => {
+        if (localTransport === null) {
+          return null;
+        }
+
+        return connectionData.getConnectionForTransport(localTransport);
+      }),
+      tap((connection) => {
+        logger.info(
+          `Local connection updated: ${connection?.transport?.livekit_service_url}`,
+        );
+      }),
+    ),
+  );
+
+  // Tracks error that happen when creating the local tracks.
+  const mediaErrors$ = localConnection$.pipe(
+    switchMap((connection) => {
+      if (!connection) {
+        return of(null);
+      } else {
+        return fromEvent(
+          connection.livekitRoom,
+          RoomEvent.MediaDevicesError,
+          (error: Error) => {
+            return MediaDeviceFailure.getFailure(error) ?? null;
+          },
+        );
+      }
+    }),
+  );
+
+  mediaErrors$.pipe(scope.bind()).subscribe((error) => {
+    if (error) {
+      logger.error(`Failed to create local tracks:`, error);
+      setMatrixError(
+        // TODO is it fatal? Do we need to create a new Specialized Error?
+        new UnknownCallError(new Error(`Media device error: ${error}`)),
+      );
+    }
+  });
+  // MATRIX RELATED
+
+  // This should be used in a combineLatest with publisher$ to connect.
+  // to make it possible to call startTracks before the preferredTransport$ has resolved.
+  const trackStartRequested = Promise.withResolvers<void>();
+
+  // This should be used in a combineLatest with publisher$ to connect.
+  // to make it possible to call startTracks before the preferredTransport$ has resolved.
+  const joinAndPublishRequested$ = new BehaviorSubject(false);
+
+  /**
+   * The publisher is stored in here an abstracts creating and publishing tracks.
+   */
+  const publisher$ = new BehaviorSubject<Publisher | null>(null);
+
+  const startTracks = (): void => {
+    trackStartRequested.resolve();
+    // This used to return the tracks, but now they are only accessible via the publisher.
+  };
+
+  const requestJoinAndPublish = (): void => {
+    trackStartRequested.resolve();
+    joinAndPublishRequested$.next(true);
+  };
+
+  const requestDisconnect = (): void => {
+    joinAndPublishRequested$.next(false);
+  };
+
+  // Take care of the publisher$
+  // create a new one as soon as a local Connection is available
+  //
+  // Recreate a new one once the local connection changes
+  //  - stop publishing
+  //  - destruct all current streams
+  //  - overwrite current publisher
+  scope.reconcile(localConnection$, async (connection) => {
+    if (connection !== null) {
+      const publisher = createPublisherFactory(connection);
+      publisher$.next(publisher);
+      // Clean-up callback
+      return Promise.resolve(async (): Promise<void> => {
+        await publisher.stopPublishing();
+        await publisher.stopTracks();
+      });
+    }
+  });
+
+  // Use reconcile here to not run concurrent createAndSetupTracks calls
+  // `tracks$` will update once they are ready.
+  scope.reconcile(
+    scope.behavior(
+      combineLatest([
+        publisher$ /*, tracks$*/,
+        from(trackStartRequested.promise),
+      ]),
+      null,
+    ),
+    async (valueIfReady) => {
+      if (!valueIfReady) return;
+      const [publisher] = valueIfReady;
+      if (publisher) {
+        await publisher.createAndSetupTracks().catch((e) => logger.error(e));
+      }
+    },
+  );
+
+  // Based on `connectRequested$` we start publishing tracks. (once they are there!)
+  scope.reconcile(
+    scope.behavior(combineLatest([publisher$, joinAndPublishRequested$])),
+    async ([publisher, shouldJoinAndPublish]) => {
+      // Get the current publishing state to avoid redundant calls.
+      const isPublishing = publisher?.shouldPublish === true;
+      if (shouldJoinAndPublish && !isPublishing) {
+        try {
+          await publisher?.startPublishing();
+        } catch (error) {
+          const message =
+            error instanceof Error ? error.message : String(error);
+          setPublishError(new FailToStartLivekitConnection(message));
+        }
+      } else if (isPublishing) {
+        try {
+          await publisher?.stopPublishing();
+        } catch (error) {
+          setPublishError(new UnknownCallError(error as Error));
+        }
+      }
+    },
+  );
+
+  // STATE COMPUTATION
+
+  // These are non fatal since we can join a room and concume media even though publishing failed.
+  const publishError$ = new BehaviorSubject<ElementCallError | null>(null);
+  const setPublishError = (e: ElementCallError): void => {
+    if (publishError$.value !== null) {
+      logger.error("Multiple Media Errors:", e);
+    } else {
+      publishError$.next(e);
+    }
+  };
+
+  const fatalTransportError$ = new BehaviorSubject<ElementCallError | null>(
+    null,
+  );
+
+  const setTransportError = (e: ElementCallError): void => {
+    if (fatalTransportError$.value !== null) {
+      logger.error("Multiple Transport Errors:", e);
+    } else {
+      fatalTransportError$.next(e);
+    }
+  };
+
+  const localConnectionState$ = localConnection$.pipe(
+    switchMap((connection) => (connection ? connection.state$ : of(null))),
+  );
+
+  const mediaState$: Behavior<LocalMemberMediaState> = scope.behavior(
+    combineLatest([
+      localConnectionState$,
+      localTransport$,
+      joinAndPublishRequested$,
+      from(trackStartRequested.promise).pipe(
+        map(() => true),
+        startWith(false),
+      ),
+    ]).pipe(
+      map(
+        ([
+          localConnectionState,
+          localTransport,
+          shouldPublish,
+          shouldStartTracks,
+        ]) => {
+          if (!localTransport) return null;
+          const trackState: TrackState = shouldStartTracks
+            ? TrackState.Ready
+            : TrackState.WaitingForUser;
+
+          if (
+            localConnectionState !== ConnectionState.LivekitConnected ||
+            trackState !== TrackState.Ready
+          )
+            return {
+              connection: localConnectionState,
+              tracks: trackState,
+            };
+          if (!shouldPublish) return PublishState.WaitingForUser;
+          // if (!publishing) return PublishState.Starting;
+          return PublishState.Publishing;
+        },
+      ),
+      distinctUntilChanged(deepCompare),
+    ),
+  );
+  const fatalMatrixError$ = new BehaviorSubject<ElementCallError | null>(null);
+  const setMatrixError = (e: ElementCallError): void => {
+    if (fatalMatrixError$.value !== null) {
+      logger.error("Multiple Matrix Errors:", e);
+    } else {
+      fatalMatrixError$.next(e);
+    }
+  };
+
+  const localMemberState$ = scope.behavior<LocalMemberState>(
+    combineLatest([
+      mediaState$,
+      homeserverConnected.rtsSession$,
+      fatalMatrixError$,
+      fatalTransportError$,
+      publishError$,
+    ]).pipe(
+      map(
+        ([
+          mediaState,
+          rtcSessionStatus,
+          fatalMatrixError,
+          fatalTransportError,
+          publishError,
+        ]) => {
+          if (fatalTransportError !== null) return fatalTransportError;
+          // `mediaState` will be 'null' until the transport/connection appears.
+          if (mediaState && rtcSessionStatus)
+            return {
+              matrix: fatalMatrixError ?? rtcSessionStatus,
+              media: publishError ?? mediaState,
+            };
+          return TransportState.Waiting;
+        },
+      ),
+    ),
+  );
+
+  /**
+   * Whether we are "fully" connected to the call. Accounts for both the
+   * connection to the MatrixRTC session and the LiveKit publish connection.
+   */
+  const matrixAndLivekitConnected$ = scope.behavior(
+    and$(
+      homeserverConnected.combined$,
+      localConnectionState$.pipe(
+        map((state) => state === ConnectionState.LivekitConnected),
+      ),
+    ).pipe(
+      tap((v) => logger.debug("livekit+matrix: Connected state changed", v)),
+    ),
+  );
+
+  /**
+   * Whether we should tell the user that we're reconnecting to the call.
+   */
+  const reconnecting$ = scope.behavior(
+    matrixAndLivekitConnected$.pipe(
+      pairwise(),
+      map(([prev, current]) => prev === true && current === false),
+    ),
+    false,
+  );
+
+  // inform the widget about the connect and disconnect intent from the user.
+  scope
+    .behavior(joinAndPublishRequested$.pipe(pairwise(), scope.bind()), [
+      undefined,
+      joinAndPublishRequested$.value,
+    ])
+    .subscribe(([prev, current]) => {
+      if (!widget) return;
+      // JOIN prev=false (was left) => current-true (now joiend)
+      if (!prev && current) {
+        widget.api.transport
+          .send(ElementWidgetActions.JoinCall, {})
+          .catch((e) => {
+            logger.error("Failed to send join action", e);
+          });
+      }
+      // LEAVE prev=false (was joined) => current-true (now left)
+      if (prev && !current) {
+        widget.api.transport
+          .send(ElementWidgetActions.HangupCall, {})
+          .catch((e) => {
+            logger.error("Failed to send hangup action", e);
+          });
+      }
+    });
+
+  combineLatest([muteStates.video.enabled$, homeserverConnected.combined$])
+    .pipe(scope.bind())
+    .subscribe(([videoEnabled, connected]) => {
+      if (!connected) return;
+      void matrixRTCSession.updateCallIntent(videoEnabled ? "video" : "audio");
+    });
+
+  // Keep matrix rtc session in sync with localTransport$, connectRequested$
+  scope.reconcile(
+    scope.behavior(combineLatest([localTransport$, joinAndPublishRequested$])),
+    async ([transport, shouldConnect]) => {
+      if (!transport) return;
+      // if shouldConnect=false we will do the disconnect as the cleanup from the previous reconcile iteration.
+      if (!shouldConnect) return;
+
+      try {
+        joinMatrixRTC(transport);
+      } catch (error) {
+        logger.error("Error entering RTC session", error);
+        if (error instanceof Error)
+          setMatrixError(new MembershipManagerError(error));
+      }
+
+      return Promise.resolve(async (): Promise<void> => {
+        try {
+          // TODO Update matrixRTCSession to allow udpating the transport without leaving the session!
+          await matrixRTCSession.leaveRoomSession(1000);
+        } catch (e) {
+          logger.error("Error leaving RTC session", e);
+        }
+      });
+    },
+  );
+
+  const participant$ = scope.behavior(
+    localConnection$.pipe(map((c) => c?.livekitRoom?.localParticipant ?? null)),
+  );
+
+  // Pause upstream of all local media tracks when we're disconnected from
+  // MatrixRTC, because it can be an unpleasant surprise for the app to say
+  // 'reconnecting' and yet still be transmitting your media to others.
+  // We use matrixConnected$ rather than reconnecting$ because we want to
+  // pause tracks during the initial joining sequence too until we're sure
+  // that our own media is displayed on screen.
+  // TODO refactor this based no livekitState$
+  combineLatest([participant$, homeserverConnected.combined$])
+    .pipe(scope.bind())
+    .subscribe(([participant, connected]) => {
+      if (!participant) return;
+      const publications = participant.trackPublications.values();
+      if (connected) {
+        for (const p of publications) {
+          if (p.track?.isUpstreamPaused === true) {
+            const kind = p.track.kind;
+            logger.info(
+              `Resuming ${kind} track (MatrixRTC connection present)`,
+            );
+            p.track
+              .resumeUpstream()
+              .catch((e) =>
+                logger.error(
+                  `Failed to resume ${kind} track after MatrixRTC reconnection`,
+                  e,
+                ),
+              );
+          }
+        }
+      } else {
+        for (const p of publications) {
+          if (p.track?.isUpstreamPaused === false) {
+            const kind = p.track.kind;
+            logger.info(
+              `Pausing ${kind} track (uncertain MatrixRTC connection)`,
+            );
+            p.track
+              .pauseUpstream()
+              .catch((e) =>
+                logger.error(
+                  `Failed to pause ${kind} track after entering uncertain MatrixRTC connection`,
+                  e,
+                ),
+              );
+          }
+        }
+      }
+    });
+
+  /**
+   * Whether the user is currently sharing their screen.
+   */
+  const sharingScreen$ = scope.behavior(
+    participant$.pipe(
+      switchMap((p) => (p !== null ? observeSharingScreen$(p) : of(false))),
+    ),
+  );
+
+  let toggleScreenSharing: (() => void) | null = null;
+  if (
+    "getDisplayMedia" in (navigator.mediaDevices ?? {}) &&
+    !getUrlParams().hideScreensharing
+  ) {
+    toggleScreenSharing = (): void => {
+      const screenshareSettings: ScreenShareCaptureOptions = {
+        audio: true,
+        selfBrowserSurface: "include",
+        surfaceSwitching: "include",
+        systemAudio: "include",
+      };
+      const targetScreenshareState = !sharingScreen$.value;
+      logger.info(
+        `toggleScreenSharing called. Switching ${
+          targetScreenshareState ? "On" : "Off"
+        }`,
+      );
+      // If a connection is ready, toggle screen sharing.
+      // We deliberately do nothing in the case of a null connection because
+      // it looks nice for the call control buttons to all become available
+      // at once upon joining the call, rather than introducing a disabled
+      // state. The user can just click again.
+      // We also allow screen sharing to be toggled even if the connection
+      // is still initializing or publishing tracks, because there's no
+      // technical reason to disallow this. LiveKit will publish if it can.
+      participant$.value
+        ?.setScreenShareEnabled(targetScreenshareState, screenshareSettings)
+        .catch(logger.error);
+    };
+  }
+
+  return {
+    startTracks,
+    requestJoinAndPublish,
+    requestDisconnect,
+    localMemberState$,
+    participant$,
+    reconnecting$,
+    connected$: matrixAndLivekitConnected$,
+    disconnected$: scope.behavior(
+      homeserverConnected.rtsSession$.pipe(
+        map((state) => state === RTCSessionStatus.Disconnected),
+      ),
+    ),
+    sharingScreen$,
+    toggleScreenSharing,
+    connection$: localConnection$,
+  };
+};
+
+export function observeSharingScreen$(p: Participant): Observable<boolean> {
+  return observeParticipantEvents(
+    p,
+    ParticipantEvent.TrackPublished,
+    ParticipantEvent.TrackUnpublished,
+    ParticipantEvent.LocalTrackPublished,
+    ParticipantEvent.LocalTrackUnpublished,
+  ).pipe(map((p) => p.isScreenShareEnabled));
+}
+
+interface EnterRTCSessionOptions {
+  encryptMedia: boolean;
+  matrixRTCMode: MatrixRTCMode;
+}
+
+/**
+ * Does the necessary steps to enter the RTC session on the matrix side:
+ *  - Preparing the membership info (FOCUS to use, options)
+ *  - Sends the matrix event to join the call, and starts the membership manager:
+ *      - Delay events management
+ *      - Handles retries (fails only after several attempts)
+ *
+ * @param rtcSession - The MatrixRTCSession to join.
+ * @param transport - The LivekitTransport to use for this session.
+ * @param options - Options for entering the RTC session.
+ * @param options.encryptMedia - Whether to encrypt media.
+ * @param options.matrixRTCMode - The Matrix RTC mode to use.
+ * @throws If the widget could not send ElementWidgetActions.JoinCall action.
+ */
+// Exported for unit testing
+export function enterRTCSession(
+  rtcSession: MatrixRTCSession,
+  transport: LivekitTransport,
+  { encryptMedia, matrixRTCMode }: EnterRTCSessionOptions,
+): void {
+  PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
+  PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
+
+  // This must be called before we start trying to join the call, as we need to
+  // have started tracking by the time calls start getting created.
+  // groupCallOTelMembership?.onJoinCall();
+
+  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
+  const useDeviceSessionMemberEvents =
+    features?.feature_use_device_session_member_events;
+  const { sendNotificationType: notificationType, callIntent } = getUrlParams();
+  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.joinRoomSession(
+    multiSFU ? [] : [transport],
+    multiSFU ? transport : undefined,
+    {
+      notificationType,
+      callIntent,
+      manageMediaKeys: encryptMedia,
+      ...(useDeviceSessionMemberEvents !== undefined && {
+        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
+      }),
+      delayedLeaveEventRestartMs:
+        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
+      delayedLeaveEventDelayMs:
+        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
+      delayedLeaveEventRestartLocalTimeoutMs:
+        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
+      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
+      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
+      membershipEventExpiryMs:
+        matrixRtcSessionConfig?.membership_event_expiry_ms,
+      useExperimentalToDeviceTransport: true,
+      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
+    },
+  );
+}

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

@@ -1,158 +0,0 @@
-/*
-Copyright 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 MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
-import { expect, test, vi } from "vitest";
-import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
-import EventEmitter from "events";
-
-import { MatrixRTCMode } from "../../../settings/settings";
-import { mockConfig } from "../../../utils/test";
-import { enterRTCSession } from "./LocalMembership";
-
-const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
-const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
-vi.mock("../../../UrlParams", () => ({ getUrlParams }));
-
-vi.mock("../../../widget", async (importOriginal) => ({
-  ...(await importOriginal()),
-  widget: {
-    api: {
-      setAlwaysOnScreen: (): void => {},
-      transport: { send: vi.fn(), reply: vi.fn(), stop: vi.fn() },
-    },
-    lazyActions: new EventEmitter(),
-  },
-}));
-
-test("It joins the correct Session", async () => {
-  const focusFromOlderMembership = {
-    type: "livekit",
-    livekit_service_url: "http://my-oldest-member-service-url.com",
-    livekit_alias: "my-oldest-member-service-alias",
-  };
-
-  const focusConfigFromWellKnown = {
-    type: "livekit",
-    livekit_service_url: "http://my-well-known-service-url.com",
-  };
-  const focusConfigFromWellKnown2 = {
-    type: "livekit",
-    livekit_service_url: "http://my-well-known-service-url2.com",
-  };
-  const clientWellKnown = {
-    "org.matrix.msc4143.rtc_foci": [
-      focusConfigFromWellKnown,
-      focusConfigFromWellKnown2,
-    ],
-  };
-
-  mockConfig({
-    livekit: { livekit_service_url: "http://my-default-service-url.com" },
-  });
-
-  vi.spyOn(AutoDiscovery, "getRawClientConfig").mockImplementation(
-    async (domain) => {
-      if (domain === "example.org") {
-        return Promise.resolve(clientWellKnown);
-      }
-      return Promise.resolve({});
-    },
-  );
-
-  const mockedSession = vi.mocked({
-    room: {
-      roomId: "roomId",
-      client: {
-        getDomain: vi.fn().mockReturnValue("example.org"),
-        getOpenIdToken: vi.fn().mockResolvedValue({
-          access_token: "ACCCESS_TOKEN",
-          token_type: "Bearer",
-          matrix_server_name: "localhost",
-          expires_in: 10000,
-        }),
-      },
-    },
-    memberships: [],
-    getFocusInUse: vi.fn().mockReturnValue(focusFromOlderMembership),
-    getOldestMembership: vi.fn().mockReturnValue({
-      getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
-    }),
-    joinRoomSession: vi.fn(),
-  }) as unknown as MatrixRTCSession;
-
-  await enterRTCSession(
-    mockedSession,
-    {
-      livekit_alias: "roomId",
-      livekit_service_url: "http://my-well-known-service-url.com",
-      type: "livekit",
-    },
-    {
-      encryptMedia: true,
-      matrixRTCMode: MATRIX_RTC_MODE,
-    },
-  );
-
-  expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
-    [
-      {
-        livekit_alias: "roomId",
-        livekit_service_url: "http://my-well-known-service-url.com",
-        type: "livekit",
-      },
-    ],
-    undefined,
-    expect.objectContaining({
-      manageMediaKeys: true,
-      useLegacyMemberEvents: false,
-    }),
-  );
-});
-
-test("It should not fail with configuration error if homeserver config has livekit url but not fallback", async () => {
-  mockConfig({});
-  vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({
-    "org.matrix.msc4143.rtc_foci": [
-      {
-        type: "livekit",
-        livekit_service_url: "http://my-well-known-service-url.com",
-      },
-    ],
-  });
-
-  const mockedSession = vi.mocked({
-    room: {
-      roomId: "roomId",
-      client: {
-        getDomain: vi.fn().mockReturnValue("example.org"),
-        getOpenIdToken: vi.fn().mockResolvedValue({
-          access_token: "ACCCESS_TOKEN",
-          token_type: "Bearer",
-          matrix_server_name: "localhost",
-          expires_in: 10000,
-        }),
-      },
-    },
-    memberships: [],
-    getFocusInUse: vi.fn(),
-    joinRoomSession: vi.fn(),
-  }) as unknown as MatrixRTCSession;
-
-  await enterRTCSession(
-    mockedSession,
-    {
-      livekit_alias: "roomId",
-      livekit_service_url: "http://my-well-known-service-url.com",
-      type: "livekit",
-    },
-    {
-      encryptMedia: true,
-      matrixRTCMode: MATRIX_RTC_MODE,
-    },
-  );
-});

src/state/CallViewModel/localMember/LocalMembership.ts

@@ -1,628 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type LocalTrack,
-  type Participant,
-  ParticipantEvent,
-  type LocalParticipant,
-} from "livekit-client";
-import { observeParticipantEvents } from "@livekit/components-core";
-import {
-  type LivekitTransport,
-  type MatrixRTCSession,
-  MembershipManagerEvent,
-  Status,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { ClientEvent, SyncState, type Room as MatrixRoom } from "matrix-js-sdk";
-import {
-  BehaviorSubject,
-  combineLatest,
-  distinctUntilChanged,
-  fromEvent,
-  map,
-  type Observable,
-  of,
-  scan,
-  startWith,
-  switchMap,
-  tap,
-} from "rxjs";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-
-import { type Behavior } from "../../Behavior";
-import { type IConnectionManager } from "../remoteMembers/ConnectionManager";
-import { ObservableScope } from "../../ObservableScope";
-import { Publisher } from "./Publisher";
-import { type MuteStates } from "../../MuteStates";
-import { type ProcessorState } from "../../../livekit/TrackProcessorContext";
-import { type MediaDevices } from "../../MediaDevices";
-import { and$ } from "../../../utils/observable";
-import { ElementCallError, UnknownCallError } from "../../../utils/errors";
-import {
-  ElementWidgetActions,
-  widget,
-  type WidgetHelpers,
-} from "../../../widget";
-import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers";
-import { getUrlParams } from "../../../UrlParams.ts";
-import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
-import { MatrixRTCMode } from "../../../settings/settings.ts";
-import { Config } from "../../../config/Config.ts";
-import {
-  type Connection,
-  type ConnectionState,
-} from "../remoteMembers/Connection.ts";
-
-export enum LivekitState {
-  Uninitialized = "uninitialized",
-  Connecting = "connecting",
-  Connected = "connected",
-  Error = "error",
-  Disconnected = "disconnected",
-  Disconnecting = "disconnecting",
-}
-
-type LocalMemberLivekitState =
-  | { state: LivekitState.Error; error: string }
-  | { state: LivekitState.Connected }
-  | { state: LivekitState.Connecting }
-  | { state: LivekitState.Uninitialized }
-  | { state: LivekitState.Disconnected }
-  | { state: LivekitState.Disconnecting };
-
-export enum MatrixState {
-  Connected = "connected",
-  Disconnected = "disconnected",
-  Connecting = "connecting",
-}
-
-type LocalMemberMatrixState =
-  | { state: MatrixState.Connected }
-  | { state: MatrixState.Connecting }
-  | { state: MatrixState.Disconnected };
-
-export interface LocalMemberConnectionState {
-  livekit$: Behavior<LocalMemberLivekitState>;
-  matrix$: Behavior<LocalMemberMatrixState>;
-}
-
-/*
- * - get well known
- * - get oldest membership
- * - get transport to use
- * - get openId + jwt token
- * - wait for createTrack() call
- *    - create tracks
- * - wait for join() call
- *   - Publisher.publishTracks()
- *   - send join state/sticky event
- */
-interface Props {
-  options: Behavior<EnterRTCSessionOptions>;
-  scope: ObservableScope;
-  mediaDevices: MediaDevices;
-  muteStates: MuteStates;
-  connectionManager: IConnectionManager;
-  matrixRTCSession: MatrixRTCSession;
-  matrixRoom: MatrixRoom;
-  localTransport$: Behavior<LivekitTransport | null>;
-  trackProcessorState$: Behavior<ProcessorState>;
-  widget: WidgetHelpers | null;
-  logger: Logger;
-}
-
-/**
- * This class is responsible for managing the own membership in a room.
- * We want
- *  - a publisher
- *  -
- * @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)
- *  - transport$: the transport object the ownMembership$ ended up using.
- *  - connectionState: the current connection state. Including matrix server and livekit server connection.
- *  - sharingScreen$: Whether we are sharing our screen. `undefined` if we cannot share the screen.
- */
-export const createLocalMembership$ = ({
-  scope,
-  options,
-  muteStates,
-  mediaDevices,
-  connectionManager,
-  matrixRTCSession,
-  localTransport$,
-  matrixRoom,
-  trackProcessorState$,
-  widget,
-  logger: parentLogger,
-}: Props): {
-  // publisher: Publisher
-  requestConnect: () => LocalMemberConnectionState;
-  startTracks: () => Behavior<LocalTrack[]>;
-  requestDisconnect: () => Observable<LocalMemberLivekitState> | null;
-  connectionState: LocalMemberConnectionState;
-  sharingScreen$: Behavior<boolean>;
-  /**
-   * Callback to toggle screen sharing. If null, screen sharing is not possible.
-   */
-  toggleScreenSharing: (() => void) | null;
-  participant$: Behavior<LocalParticipant | null>;
-  connection$: Behavior<Connection | null>;
-  // deprecated fields
-  /** @deprecated use state instead*/
-  homeserverConnected$: Behavior<boolean>;
-  /** @deprecated use state instead*/
-  connected$: Behavior<boolean>;
-  // this needs to be discussed
-  /** @deprecated use state instead*/
-  reconnecting$: Behavior<boolean>;
-  // also needs to be disccues
-  /** @deprecated use state instead*/
-  configError$: Behavior<ElementCallError | null>;
-} => {
-  const logger = parentLogger.getChild("[LocalMembership]");
-  logger.debug(`Creating local membership..`);
-  const state = {
-    livekit$: new BehaviorSubject<LocalMemberLivekitState>({
-      state: LivekitState.Uninitialized,
-    }),
-    matrix$: new BehaviorSubject<LocalMemberMatrixState>({
-      state: MatrixState.Disconnected,
-    }),
-  };
-
-  // This should be used in a combineLatest with publisher$ to connect.
-  // to make it possible to call startTracks before the preferredTransport$ has resolved.
-  const trackStartRequested$ = new BehaviorSubject(false);
-
-  // This should be used in a combineLatest with publisher$ to connect.
-  // to make it possible to call startTracks before the preferredTransport$ has resolved.
-  const connectRequested$ = new BehaviorSubject(false);
-
-  // This should be used in a combineLatest with publisher$ to connect.
-  const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
-
-  // Drop Epoch data here since we will not combine this anymore
-  const localConnection$ = scope.behavior(
-    combineLatest([connectionManager.connections$, localTransport$]).pipe(
-      map(([connections, localTransport]) => {
-        if (localTransport === null) {
-          return null;
-        }
-        return (
-          connections.value.find((connection) =>
-            areLivekitTransportsEqual(connection.transport, localTransport),
-          ) ?? null
-        );
-      }),
-      tap((connection) => {
-        logger.info(
-          `Local connection updated: ${connection?.transport?.livekit_service_url}`,
-        );
-      }),
-    ),
-  );
-  /**
-   * Whether we are connected to the MatrixRTC session.
-   */
-  const homeserverConnected$ = scope.behavior(
-    // To consider ourselves connected to MatrixRTC, we check the following:
-    and$(
-      // The client is connected to the sync loop
-      (
-        fromEvent(matrixRoom.client, ClientEvent.Sync) as Observable<
-          [SyncState]
-        >
-      ).pipe(
-        startWith([matrixRoom.client.getSyncState()]),
-        map(([state]) => state === SyncState.Syncing),
-      ),
-      // Room state observed by session says we're connected
-      fromEvent(matrixRTCSession, MembershipManagerEvent.StatusChanged).pipe(
-        startWith(null),
-        map(() => matrixRTCSession.membershipStatus === Status.Connected),
-      ),
-      // Also watch out for warnings that we've likely hit a timeout and our
-      // delayed leave event is being sent (this condition is here because it
-      // provides an earlier warning than the sync loop timeout, and we wouldn't
-      // see the actual leave event until we reconnect to the sync loop)
-      fromEvent(matrixRTCSession, MembershipManagerEvent.ProbablyLeft).pipe(
-        startWith(null),
-        map(() => matrixRTCSession.probablyLeft !== true),
-      ),
-    ).pipe(
-      tap((connected) => {
-        logger.info(`Homeserver connected update: ${connected}`);
-      }),
-    ),
-  );
-
-  // /**
-  //  * Whether we are "fully" connected to the call. Accounts for both the
-  //  * connection to the MatrixRTC session and the LiveKit publish connection.
-  //  */
-  // // TODO use this in combination with the MemberState.
-  const connected$ = scope.behavior(
-    and$(
-      homeserverConnected$,
-      localConnection$.pipe(
-        switchMap((c) =>
-          c
-            ? c.state$.pipe(map((state) => state.state === "ConnectedToLkRoom"))
-            : of(false),
-        ),
-      ),
-    ),
-  );
-
-  const publisher$ = new BehaviorSubject<Publisher | null>(null);
-  localConnection$.subscribe((connection) => {
-    if (connection !== null && publisher$.value === null) {
-      // TODO looks strange to not change publisher if connection changes.
-      publisher$.next(
-        new Publisher(
-          scope,
-          connection,
-          mediaDevices,
-          muteStates,
-          trackProcessorState$,
-        ),
-      );
-    }
-  });
-
-  combineLatest([publisher$, trackStartRequested$]).subscribe(
-    ([publisher, shouldStartTracks]) => {
-      if (publisher && shouldStartTracks) {
-        publisher
-          .createAndSetupTracks()
-          .then((tracks) => {
-            tracks$.next(tracks);
-          })
-          .catch((error) => {
-            logger.error("Error creating tracks:", error);
-          });
-      }
-    },
-  );
-
-  // MATRIX RELATED
-
-  // /**
-  //  * Whether we should tell the user that we're reconnecting to the call.
-  //  */
-  // DISCUSSION is there a better way to do this?
-  // sth that is more deriectly implied from the membership manager of the js sdk. (fromEvent(matrixRTCSession, Reconnecting)) ??? or similar
-  const reconnecting$ = scope.behavior(
-    connected$.pipe(
-      // We are reconnecting if we previously had some successful initial
-      // connection but are now disconnected
-      scan(
-        ({ connectedPreviously }, connectedNow) => ({
-          connectedPreviously: connectedPreviously || connectedNow,
-          reconnecting: connectedPreviously && !connectedNow,
-        }),
-        { connectedPreviously: false, reconnecting: false },
-      ),
-      map(({ reconnecting }) => reconnecting),
-    ),
-  );
-
-  const startTracks = (): Behavior<LocalTrack[]> => {
-    trackStartRequested$.next(true);
-    return tracks$;
-  };
-
-  combineLatest([publisher$, tracks$]).subscribe(([publisher, tracks]) => {
-    if (
-      tracks.length === 0 ||
-      // change this to !== Publishing
-      state.livekit$.value.state !== LivekitState.Uninitialized
-    ) {
-      return;
-    }
-    state.livekit$.next({ state: LivekitState.Connecting });
-    publisher
-      ?.startPublishing()
-      .then(() => {
-        state.livekit$.next({ state: LivekitState.Connected });
-      })
-      .catch((error) => {
-        state.livekit$.next({ state: LivekitState.Error, error });
-      });
-  });
-
-  combineLatest([localTransport$, connectRequested$]).subscribe(
-    // TODO reconnect on options change.
-    ([transport, connectRequested]) => {
-      if (
-        transport === null ||
-        !connectRequested ||
-        state.matrix$.value.state !== MatrixState.Disconnected
-      ) {
-        logger.info(
-          "Not yet connecting because: ",
-          "transport === null:",
-          transport === null,
-          "!connectRequested:",
-          !connectRequested,
-          "state.matrix$.value.state !== MatrixState.Disconnected:",
-          state.matrix$.value.state !== MatrixState.Disconnected,
-        );
-        return;
-      }
-      state.matrix$.next({ state: MatrixState.Connecting });
-      logger.info("Matrix State connecting");
-      enterRTCSession(matrixRTCSession, transport, options.value).catch(
-        (error) => {
-          logger.error(error);
-        },
-      );
-    },
-  );
-
-  const requestConnect = (): LocalMemberConnectionState => {
-    trackStartRequested$.next(true);
-    connectRequested$.next(true);
-
-    return state;
-  };
-
-  const requestDisconnect = (): Behavior<LocalMemberLivekitState> | null => {
-    if (state.livekit$.value.state !== LivekitState.Connected) return null;
-    state.livekit$.next({ state: LivekitState.Disconnecting });
-    combineLatest([publisher$, tracks$], (publisher, tracks) => {
-      publisher
-        ?.stopPublishing()
-        .then(() => {
-          tracks.forEach((track) => track.stop());
-          state.livekit$.next({ state: LivekitState.Disconnected });
-        })
-        .catch((error) => {
-          state.livekit$.next({ state: LivekitState.Error, error });
-        });
-    });
-
-    return state.livekit$;
-  };
-
-  // Pause upstream of all local media tracks when we're disconnected from
-  // MatrixRTC, because it can be an unpleasant surprise for the app to say
-  // 'reconnecting' and yet still be transmitting your media to others.
-  // We use matrixConnected$ rather than reconnecting$ because we want to
-  // pause tracks during the initial joining sequence too until we're sure
-  // that our own media is displayed on screen.
-  combineLatest([localConnection$, homeserverConnected$])
-    .pipe(scope.bind())
-    .subscribe(([connection, connected]) => {
-      if (connection?.state$.value.state !== "ConnectedToLkRoom") return;
-      const publications =
-        connection.livekitRoom.localParticipant.trackPublications.values();
-      if (connected) {
-        for (const p of publications) {
-          if (p.track?.isUpstreamPaused === true) {
-            const kind = p.track.kind;
-            logger.info(
-              `Resuming ${kind} track (MatrixRTC connection present)`,
-            );
-            p.track
-              .resumeUpstream()
-              .catch((e) =>
-                logger.error(
-                  `Failed to resume ${kind} track after MatrixRTC reconnection`,
-                  e,
-                ),
-              );
-          }
-        }
-      } else {
-        for (const p of publications) {
-          if (p.track?.isUpstreamPaused === false) {
-            const kind = p.track.kind;
-            logger.info(
-              `Pausing ${kind} track (uncertain MatrixRTC connection)`,
-            );
-            p.track
-              .pauseUpstream()
-              .catch((e) =>
-                logger.error(
-                  `Failed to pause ${kind} track after entering uncertain MatrixRTC connection`,
-                  e,
-                ),
-              );
-          }
-        }
-      }
-    });
-
-  const configError$ = new BehaviorSubject<ElementCallError | null>(null);
-  // TODO I do not fully understand what this does.
-  // Is it needed?
-  // Is this at the right place?
-  // Can this be simplified?
-  // Start and stop session membership as needed
-  scope.reconcile(localTransport$, async (advertised) => {
-    if (advertised !== null && advertised !== undefined) {
-      try {
-        await enterRTCSession(matrixRTCSession, advertised, options.value);
-        configError$.next(null);
-      } catch (e) {
-        logger.error("Error entering RTC session", e);
-      }
-
-      // Update our member event when our mute state changes.
-      const intentScope = new ObservableScope();
-      intentScope.reconcile(muteStates.video.enabled$, async (videoEnabled) =>
-        matrixRTCSession.updateCallIntent(videoEnabled ? "video" : "audio"),
-      );
-
-      return async (): Promise<void> => {
-        intentScope.end();
-        // Only sends Matrix leave event. The LiveKit session will disconnect
-        // as soon as either the stopConnection$ handler above gets to it or
-        // the view model is destroyed.
-        try {
-          await matrixRTCSession.leaveRoomSession();
-        } catch (e) {
-          logger.error("Error leaving RTC session", e);
-        }
-        try {
-          await widget?.api.transport.send(ElementWidgetActions.HangupCall, {});
-        } catch (e) {
-          logger.error("Failed to send hangup action", e);
-        }
-      };
-    }
-  });
-
-  localConnection$
-    .pipe(
-      distinctUntilChanged(),
-      switchMap((c) =>
-        c === null ? of({ state: "Initialized" } as ConnectionState) : c.state$,
-      ),
-      map((s) => {
-        logger.trace(`Local connection state update: ${s.state}`);
-        if (s.state == "FailedToStart") {
-          return s.error instanceof ElementCallError
-            ? s.error
-            : new UnknownCallError(s.error);
-        } else {
-          return null;
-        }
-      }),
-      scope.bind(),
-    )
-    .subscribe((fatalError) => {
-      configError$.next(fatalError);
-    });
-
-  /**
-   * Whether the user is currently sharing their screen.
-   */
-  const sharingScreen$ = scope.behavior(
-    localConnection$.pipe(
-      switchMap((c) =>
-        c === null
-          ? of(false)
-          : observeSharingScreen$(c.livekitRoom.localParticipant),
-      ),
-    ),
-  );
-
-  const toggleScreenSharing =
-    "getDisplayMedia" in (navigator.mediaDevices ?? {}) &&
-    !getUrlParams().hideScreensharing
-      ? (): void =>
-          // If a connection is ready, toggle screen sharing.
-          // We deliberately do nothing in the case of a null connection because
-          // it looks nice for the call control buttons to all become available
-          // at once upon joining the call, rather than introducing a disabled
-          // state. The user can just click again.
-          // We also allow screen sharing to be toggled even if the connection
-          // is still initializing or publishing tracks, because there's no
-          // technical reason to disallow this. LiveKit will publish if it can.
-          void localConnection$.value?.livekitRoom.localParticipant
-            .setScreenShareEnabled(!sharingScreen$.value, {
-              audio: true,
-              selfBrowserSurface: "include",
-              surfaceSwitching: "include",
-              systemAudio: "include",
-            })
-            .catch(logger.error)
-      : null;
-
-  const participant$ = scope.behavior(
-    localConnection$.pipe(map((c) => c?.livekitRoom.localParticipant ?? null)),
-  );
-  return {
-    startTracks,
-    requestConnect,
-    requestDisconnect,
-    connectionState: state,
-    homeserverConnected$,
-    connected$,
-    reconnecting$,
-    configError$,
-    sharingScreen$,
-    toggleScreenSharing,
-    participant$,
-    connection$: localConnection$,
-  };
-};
-
-export function observeSharingScreen$(p: Participant): Observable<boolean> {
-  return observeParticipantEvents(
-    p,
-    ParticipantEvent.TrackPublished,
-    ParticipantEvent.TrackUnpublished,
-    ParticipantEvent.LocalTrackPublished,
-    ParticipantEvent.LocalTrackUnpublished,
-  ).pipe(map((p) => p.isScreenShareEnabled));
-}
-
-interface EnterRTCSessionOptions {
-  encryptMedia: boolean;
-  matrixRTCMode: MatrixRTCMode;
-}
-
-/**
- * TODO! document this function properly
- * @param rtcSession
- * @param transport
- * @param options
- * @throws If the widget could not send ElementWidgetActions.JoinCall action.
- */
-// Exported for unit testing
-export async function enterRTCSession(
-  rtcSession: MatrixRTCSession,
-  transport: LivekitTransport,
-  { encryptMedia, matrixRTCMode }: EnterRTCSessionOptions,
-): Promise<void> {
-  PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-  PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
-
-  // This must be called before we start trying to join the call, as we need to
-  // have started tracking by the time calls start getting created.
-  // groupCallOTelMembership?.onJoinCall();
-
-  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
-  const useDeviceSessionMemberEvents =
-    features?.feature_use_device_session_member_events;
-  const { sendNotificationType: notificationType, callIntent } = getUrlParams();
-  const multiSFU = matrixRTCMode !== MatrixRTCMode.Legacy;
-  // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
-  rtcSession.joinRoomSession(
-    multiSFU ? [] : [transport],
-    multiSFU ? transport : undefined,
-    {
-      notificationType,
-      callIntent,
-      manageMediaKeys: encryptMedia,
-      ...(useDeviceSessionMemberEvents !== undefined && {
-        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
-      }),
-      delayedLeaveEventRestartMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
-      delayedLeaveEventDelayMs:
-        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
-      delayedLeaveEventRestartLocalTimeoutMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
-      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
-      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
-      membershipEventExpiryMs:
-        matrixRtcSessionConfig?.membership_event_expiry_ms,
-      useExperimentalToDeviceTransport: true,
-      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-    },
-  );
-  if (widget) {
-    await widget.api.transport.send(ElementWidgetActions.JoinCall, {});
-  }
-}

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

@@ -0,0 +1,270 @@
+/*
+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.
+*/
+
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type MockedObject,
+  vi,
+} from "vitest";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { BehaviorSubject, lastValueFrom } from "rxjs";
+import fetchMock from "fetch-mock";
+
+import { mockConfig, flushPromises } from "../../../utils/test";
+import { createLocalTransport$ } from "./LocalTransport";
+import { constant } from "../../Behavior";
+import { Epoch, ObservableScope } from "../../ObservableScope";
+import {
+  MatrixRTCTransportMissingError,
+  FailToGetOpenIdToken,
+} from "../../../utils/errors";
+import * as openIDSFU from "../../../livekit/openIDSFU";
+import { customLivekitUrl } from "../../../settings/settings";
+import { testJWTToken } from "../../../utils/test-fixtures";
+
+describe("LocalTransport", () => {
+  const openIdResponse: openIDSFU.SFUConfig = {
+    url: "https://lk.example.org",
+    jwt: testJWTToken,
+    livekitAlias: "!example_room_id",
+    livekitIdentity: "@lk_user:ABCDEF",
+  };
+
+  let scope: ObservableScope;
+  beforeEach(() => {
+    scope = new ObservableScope();
+  });
+  afterEach(() => scope.end());
+
+  it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
+    // Provide a valid config so makeTransportInternal resolves a transport
+    const scope = new ObservableScope();
+    mockConfig({
+      livekit: { livekit_service_url: "https://lk.example.org" },
+    });
+    const resolver = Promise.withResolvers<void>();
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockImplementation(
+      async () => {
+        await resolver.promise;
+        throw new FailToGetOpenIdToken(new Error("no openid"));
+      },
+    );
+    const observations: unknown[] = [];
+    const errors: Error[] = [];
+    const localTransport$ = createLocalTransport$({
+      scope,
+      roomId: "!example_room_id",
+      useOldestMember$: constant(false),
+      memberships$: constant(new Epoch<CallMembership[]>([])),
+      client: {
+        // Use empty domain to skip .well-known and use config directly
+        getDomain: () => "",
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        getOpenIdToken: vi.fn(),
+        getDeviceId: vi.fn(),
+      },
+    });
+    localTransport$.subscribe(
+      (o) => observations.push(o),
+      (e) => errors.push(e),
+    );
+    resolver.resolve();
+    await flushPromises();
+
+    const expectedError = new FailToGetOpenIdToken(new Error("no openid"));
+    expect(observations).toStrictEqual([null]);
+    expect(errors).toStrictEqual([expectedError]);
+    expect(() => localTransport$.value).toThrow(expectedError);
+  });
+
+  it("updates local transport when oldest member changes", async () => {
+    // Use config so transport discovery succeeds, but delay OpenID JWT fetch
+    mockConfig({
+      livekit: { livekit_service_url: "https://lk.example.org" },
+    });
+    const memberships$ = new BehaviorSubject(new Epoch([]));
+    const openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
+
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
+      openIdResolver.promise,
+    );
+
+    const localTransport$ = createLocalTransport$({
+      scope,
+      roomId: "!example_room_id",
+      useOldestMember$: constant(true),
+      memberships$,
+      client: {
+        getDomain: () => "",
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        getOpenIdToken: vi.fn(),
+        getDeviceId: vi.fn(),
+      },
+    });
+
+    openIdResolver.resolve?.(openIdResponse);
+    expect(localTransport$.value).toBe(null);
+    await flushPromises();
+    // final
+    expect(localTransport$.value).toStrictEqual({
+      livekit_alias: "!example_room_id",
+      livekit_service_url: "https://lk.example.org",
+      type: "livekit",
+    });
+  });
+
+  type LocalTransportProps = Parameters<typeof createLocalTransport$>[0];
+
+  describe("transport configuration mechanisms", () => {
+    let localTransportOpts: LocalTransportProps & {
+      client: MockedObject<LocalTransportProps["client"]>;
+    };
+    let openIdResolver: PromiseWithResolvers<openIDSFU.SFUConfig>;
+    beforeEach(() => {
+      mockConfig({});
+      customLivekitUrl.setValue(customLivekitUrl.defaultValue);
+      localTransportOpts = {
+        scope,
+        roomId: "!example_room_id",
+        useOldestMember$: constant(false),
+        memberships$: constant(new Epoch<CallMembership[]>([])),
+        client: {
+          getDomain: vi.fn().mockReturnValue(""),
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+      };
+      openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
+        openIdResolver.promise,
+      );
+    });
+
+    afterEach(() => {
+      fetchMock.reset();
+    });
+
+    it("supports getting transport via application config", async () => {
+      mockConfig({
+        livekit: { livekit_service_url: "https://lk.example.org" },
+      });
+      const localTransport$ = createLocalTransport$(localTransportOpts);
+      openIdResolver.resolve?.(openIdResponse);
+      expect(localTransport$.value).toBe(null);
+      await flushPromises();
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      });
+    });
+    it("supports getting transport via user settings", async () => {
+      customLivekitUrl.setValue("https://lk.example.org");
+      const localTransport$ = createLocalTransport$(localTransportOpts);
+      openIdResolver.resolve?.(openIdResponse);
+      expect(localTransport$.value).toBe(null);
+      await flushPromises();
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      });
+    });
+    it("supports getting transport via backend", async () => {
+      localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
+        { type: "livekit", livekit_service_url: "https://lk.example.org" },
+      ]);
+      const localTransport$ = createLocalTransport$(localTransportOpts);
+      openIdResolver.resolve?.(openIdResponse);
+      expect(localTransport$.value).toBe(null);
+      await flushPromises();
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      });
+    });
+    it("fails fast if the openID request fails for backend config", async () => {
+      localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
+        { type: "livekit", livekit_service_url: "https://lk.example.org" },
+      ]);
+      openIdResolver.reject(
+        new FailToGetOpenIdToken(new Error("Test driven error")),
+      );
+      try {
+        await lastValueFrom(createLocalTransport$(localTransportOpts));
+        throw Error("Expected test to throw");
+      } catch (ex) {
+        expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
+      }
+    });
+    it("supports getting transport via well-known", async () => {
+      localTransportOpts.client.getDomain.mockReturnValue("example.org");
+      fetchMock.getOnce("https://example.org/.well-known/matrix/client", {
+        "org.matrix.msc4143.rtc_foci": [
+          { type: "livekit", livekit_service_url: "https://lk.example.org" },
+        ],
+      });
+      const localTransport$ = createLocalTransport$(localTransportOpts);
+      openIdResolver.resolve?.(openIdResponse);
+      expect(localTransport$.value).toBe(null);
+      await flushPromises();
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      });
+      expect(fetchMock.done()).toEqual(true);
+    });
+    it("fails fast if the openId request fails for the well-known config", async () => {
+      localTransportOpts.client.getDomain.mockReturnValue("example.org");
+      fetchMock.getOnce("https://example.org/.well-known/matrix/client", {
+        "org.matrix.msc4143.rtc_foci": [
+          { type: "livekit", livekit_service_url: "https://lk.example.org" },
+        ],
+      });
+      openIdResolver.reject(
+        new FailToGetOpenIdToken(new Error("Test driven error")),
+      );
+      try {
+        await lastValueFrom(createLocalTransport$(localTransportOpts));
+        throw Error("Expected test to throw");
+      } catch (ex) {
+        expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
+      }
+    });
+    it("throws if no options are available", async () => {
+      const localTransport$ = createLocalTransport$({
+        scope,
+        roomId: "!example_room_id",
+        useOldestMember$: constant(false),
+        memberships$: constant(new Epoch<CallMembership[]>([])),
+        client: {
+          getDomain: () => "",
+          // 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
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+      });
+      await flushPromises();
+
+      expect(() => localTransport$.value).toThrow(
+        new MatrixRTCTransportMissingError(""),
+      );
+    });
+  });
+});

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2025 New Vector Ltd.
+Copyright 2025 Element Creations Ltd.
 
 SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -8,37 +8,48 @@ Please see LICENSE in the repository root for full details.
 import {
   type CallMembership,
   isLivekitTransport,
-  type LivekitTransportConfig,
   type LivekitTransport,
   isLivekitTransportConfig,
+  type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { type MatrixClient } from "matrix-js-sdk";
-import { combineLatest, distinctUntilChanged, first, from, map } from "rxjs";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { MatrixError, type MatrixClient } from "matrix-js-sdk";
+import {
+  combineLatest,
+  distinctUntilChanged,
+  first,
+  from,
+  map,
+  switchMap,
+} from "rxjs";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type Epoch, type ObservableScope } from "../../ObservableScope.ts";
 import { Config } from "../../../config/Config.ts";
-import { MatrixRTCTransportMissingError } from "../../../utils/errors.ts";
-import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
+import {
+  FailToGetOpenIdToken,
+  MatrixRTCTransportMissingError,
+} from "../../../utils/errors.ts";
+import {
+  getSFUConfigWithOpenID,
+  type OpenIDClientParts,
+} from "../../../livekit/openIDSFU.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
+import { customLivekitUrl } from "../../../settings/settings.ts";
+
+const logger = rootLogger.getChild("[LocalTransport]");
 
 /*
- * - get well known
- * - get oldest membership
- * - get transport to use
- * - get openId + jwt token
- * - wait for createTrack() call
- *    - create tracks
- * - wait for join() call
- *   - Publisher.publishTracks()
- *   - send join state/sticky event
+ * It figures out “which LiveKit focus URL/alias the local user should use,”
+ * optionally aligning with the oldest member, and ensures the SFU path is primed
+ * before advertising that choice.
  */
 interface Props {
   scope: ObservableScope;
   memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: MatrixClient;
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
+    OpenIDClientParts;
   roomId: string;
   useOldestMember$: Behavior<boolean>;
 }
@@ -49,6 +60,8 @@ interface Props {
  *
  * @prop useOldestMember Whether to use the same transport as the oldest member.
  * This will only update once the first oldest member appears. Will not recompute if the oldest member leaves.
+ *
+ * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
 export const createLocalTransport$ = ({
   scope,
@@ -75,16 +88,20 @@ export const createLocalTransport$ = ({
   /**
    * The transport that we would personally prefer to publish on (if not for the
    * transport preferences of others, perhaps).
+   *
+   * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
    */
   const preferredTransport$: Behavior<LivekitTransport | null> = scope.behavior(
-    from(makeTransport(client, roomId)),
+    customLivekitUrl.value$.pipe(
+      switchMap((customUrl) => from(makeTransport(client, roomId, customUrl))),
+    ),
     null,
   );
 
   /**
-   * The transport we should advertise in our MatrixRTC membership.
+   * The chosen transport we should advertise in our MatrixRTC membership.
    */
-  const advertisedTransport$ = scope.behavior(
+  return scope.behavior(
     combineLatest([
       useOldestMember$,
       oldestMemberTransport$,
@@ -98,36 +115,116 @@ export const createLocalTransport$ = ({
       distinctUntilChanged(areLivekitTransportsEqual),
     ),
   );
-  return advertisedTransport$;
 };
 
 const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
 
-async function makeTransportInternal(
-  client: MatrixClient,
+/**
+ * Determine the correct Transport for the current session, including
+ * 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 roomId The ID of the room to be connected to.
+ * @param urlFromDevSettings Override URL provided by the user's local config.
+ * @returns A fully validated transport config.
+ * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
+ */
+async function makeTransport(
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
+    OpenIDClientParts,
   roomId: string,
+  urlFromDevSettings: string | null,
 ): Promise<LivekitTransport> {
-  logger.log("Searching for a preferred transport");
-  //TODO refactor this to use the jwt service returned alias.
-  const livekitAlias = roomId;
-  // TODO-MULTI-SFU: Either remove this dev tool or make it more official
-  const urlFromStorage =
-    localStorage.getItem("robin-matrixrtc-auth") ??
-    localStorage.getItem("timo-focus-url");
-  if (urlFromStorage !== null) {
-    const transportFromStorage: LivekitTransport = {
-      type: "livekit",
-      livekit_service_url: urlFromStorage,
-      livekit_alias: livekitAlias,
-    };
-    logger.log(
-      "Using LiveKit transport from local storage: ",
-      transportFromStorage,
+  logger.trace("Searching for a preferred transport");
+
+  // 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
+  // use we don't want to risk any issues by re-using a token.
+  //
+  // If the OpenID request were to fail then it's acceptable for us to fail
+  // this function early, as we assume the homeserver has got some problems.
+
+  // DEVTOOL: Highest priority: Load from devtool setting
+  if (urlFromDevSettings !== null) {
+    logger.info("Using LiveKit transport from dev tools: ", urlFromDevSettings);
+    // Validate that the SFU is up. Otherwise, we want to fail on this
+    // as we don't permit other SFUs.
+    const config = await getSFUConfigWithOpenID(
+      client,
+      urlFromDevSettings,
+      roomId,
     );
-    return transportFromStorage;
+    return {
+      type: "livekit",
+      livekit_service_url: urlFromDevSettings,
+      livekit_alias: config.livekitAlias,
+    };
   }
 
-  // Prioritize the .well-known/matrix/client, if available, over the configured SFU
+  async function getFirstUsableTransport(
+    transports: Transport[],
+  ): Promise<LivekitTransport | null> {
+    for (const potentialTransport of transports) {
+      if (isLivekitTransportConfig(potentialTransport)) {
+        try {
+          const { livekitAlias } = await getSFUConfigWithOpenID(
+            client,
+            potentialTransport.livekit_service_url,
+            roomId,
+          );
+          return {
+            ...potentialTransport,
+            livekit_alias: livekitAlias,
+          };
+        } catch (ex) {
+          if (ex instanceof FailToGetOpenIdToken) {
+            // Explictly throw these
+            throw ex;
+          }
+          logger.debug(
+            `Could not use SFU service "${potentialTransport.livekit_service_url}" as SFU`,
+            ex,
+          );
+        }
+      }
+    }
+    return null;
+  }
+
+  // MSC4143: Attempt to fetch transports from backend.
+  if ("_unstable_getRTCTransports" in client) {
+    try {
+      const selectedTransport = await getFirstUsableTransport(
+        await client._unstable_getRTCTransports(),
+      );
+      if (selectedTransport) {
+        logger.info("Using backend-configured SFU", selectedTransport);
+        return selectedTransport;
+      }
+    } catch (ex) {
+      if (ex instanceof MatrixError && ex.httpStatus === 404) {
+        // Expected, this is an unstable endpoint and it's not required.
+        logger.debug("Backend does not provide any RTC transports", ex);
+      } else if (ex instanceof FailToGetOpenIdToken) {
+        throw ex;
+      } else {
+        // We got an error that wasn't just missing support for the feature, so log it loudly.
+        logger.error(
+          "Unexpected error fetching RTC transports from backend",
+          ex,
+        );
+      }
+    }
+  }
+
+  // Legacy MSC4143 (to be removed) WELL_KNOWN: Prioritize the .well-known/matrix/client, if available.
   const domain = client.getDomain();
   if (domain) {
     // we use AutoDiscovery instead of relying on the MatrixClient having already
@@ -135,45 +232,38 @@ async function makeTransportInternal(
     const wellKnownFoci = (await AutoDiscovery.getRawClientConfig(domain))?.[
       FOCI_WK_KEY
     ];
-    if (Array.isArray(wellKnownFoci)) {
-      const transport: LivekitTransportConfig | undefined = wellKnownFoci.find(
-        (f) => f && isLivekitTransportConfig(f),
-      );
-      if (transport !== undefined) {
-        logger.log("Using LiveKit transport from .well-known: ", transport);
-        return { ...transport, livekit_alias: livekitAlias };
-      }
+    const selectedTransport = Array.isArray(wellKnownFoci)
+      ? await getFirstUsableTransport(wellKnownFoci)
+      : null;
+    if (selectedTransport) {
+      logger.info("Using .well-known SFU", selectedTransport);
+      return selectedTransport;
     }
   }
 
+  // CONFIG: Least prioritized; Load from config file
   const urlFromConf = Config.get().livekit?.livekit_service_url;
   if (urlFromConf) {
-    const transportFromConf: LivekitTransport = {
-      type: "livekit",
-      livekit_service_url: urlFromConf,
-      livekit_alias: livekitAlias,
-    };
-    logger.log("Using LiveKit transport from config: ", transportFromConf);
-    return transportFromConf;
+    try {
+      const { livekitAlias } = await getSFUConfigWithOpenID(
+        client,
+        urlFromConf,
+        roomId,
+      );
+      const selectedTransport: LivekitTransport = {
+        type: "livekit",
+        livekit_service_url: urlFromConf,
+        livekit_alias: livekitAlias,
+      };
+      logger.info("Using config SFU", selectedTransport);
+      return selectedTransport;
+    } catch (ex) {
+      if (ex instanceof FailToGetOpenIdToken) {
+        throw ex;
+      }
+      logger.error("Failed to validate config SFU", ex);
+    }
   }
 
   throw new MatrixRTCTransportMissingError(domain ?? "");
 }
-
-async function makeTransport(
-  client: MatrixClient,
-  roomId: string,
-): Promise<LivekitTransport> {
-  const transport = await makeTransportInternal(client, roomId);
-  // this will call the jwt/sfu/get endpoint to pre create the livekit room.
-  try {
-    await getSFUConfigWithOpenID(
-      client,
-      transport.livekit_service_url,
-      transport.livekit_alias,
-    );
-  } catch (e) {
-    logger.warn(`Failed to get SFU config for transport: ${e}`);
-  }
-  return transport;
-}

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

@@ -0,0 +1,360 @@
+/*
+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.
+*/
+
+import { afterEach, beforeEach, describe, expect, it, test, vi } from "vitest";
+import {
+  ConnectionState as LivekitConnectionState,
+  LocalParticipant,
+  type LocalTrack,
+  type LocalTrackPublication,
+  ParticipantEvent,
+  Track,
+} from "livekit-client";
+import { BehaviorSubject } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { ObservableScope } from "../../ObservableScope";
+import { constant } from "../../Behavior";
+import {
+  flushPromises,
+  mockLivekitRoom,
+  mockMediaDevices,
+} from "../../../utils/test";
+import { Publisher } from "./Publisher";
+import { type Connection } from "../remoteMembers/Connection";
+import { type MuteStates } from "../../MuteStates";
+
+let scope: ObservableScope;
+
+beforeEach(() => {
+  scope = new ObservableScope();
+});
+
+afterEach(() => scope.end());
+
+function createMockLocalTrack(source: Track.Source): LocalTrack {
+  const track = {
+    source,
+    isMuted: false,
+    isUpstreamPaused: false,
+  } as Partial<LocalTrack> as LocalTrack;
+
+  vi.mocked(track).mute = vi.fn().mockImplementation(() => {
+    track.isMuted = true;
+  });
+  vi.mocked(track).unmute = vi.fn().mockImplementation(() => {
+    track.isMuted = false;
+  });
+  vi.mocked(track).pauseUpstream = vi.fn().mockImplementation(() => {
+    // @ts-expect-error - for that test we want to set isUpstreamPaused directly
+    track.isUpstreamPaused = true;
+  });
+  vi.mocked(track).resumeUpstream = vi.fn().mockImplementation(() => {
+    // @ts-expect-error - for that test we want to set isUpstreamPaused directly
+    track.isUpstreamPaused = false;
+  });
+
+  return track;
+}
+
+function createMockMuteState(enabled$: BehaviorSubject<boolean>): {
+  enabled$: BehaviorSubject<boolean>;
+  setHandler: (h: (enabled: boolean) => void) => void;
+  unsetHandler: () => void;
+} {
+  let currentHandler = (enabled: boolean): void => {};
+
+  const ms = {
+    enabled$,
+    setHandler: vi.fn().mockImplementation((h: (enabled: boolean) => void) => {
+      currentHandler = h;
+    }),
+    unsetHandler: vi.fn().mockImplementation(() => {
+      currentHandler = (enabled: boolean): void => {};
+    }),
+  };
+  // forward enabled$ emissions to the current handler
+  enabled$.subscribe((enabled) => {
+    logger.info(`MockMuteState: enabled changed to ${enabled}`);
+    currentHandler(enabled);
+  });
+
+  return ms;
+}
+
+let connection: Connection;
+let muteStates: MuteStates;
+let localParticipant: LocalParticipant;
+let audioEnabled$: BehaviorSubject<boolean>;
+let videoEnabled$: BehaviorSubject<boolean>;
+let trackPublications: LocalTrackPublication[];
+// use it to control when track creation resolves, default to resolved
+let createTrackLock: Promise<void>;
+
+beforeEach(() => {
+  trackPublications = [];
+  audioEnabled$ = new BehaviorSubject(false);
+  videoEnabled$ = new BehaviorSubject(false);
+  createTrackLock = Promise.resolve();
+
+  muteStates = {
+    audio: createMockMuteState(audioEnabled$),
+    video: createMockMuteState(videoEnabled$),
+  } as unknown as MuteStates;
+
+  const mockSendDataPacket = vi.fn();
+  const mockEngine = {
+    client: {
+      sendUpdateLocalMetadata: vi.fn(),
+    },
+    on: vi.fn().mockReturnThis(),
+    sendDataPacket: mockSendDataPacket,
+  };
+
+  localParticipant = new LocalParticipant(
+    "local-sid",
+    "local-identity",
+    // @ts-expect-error - for that test we want a real LocalParticipant to have the pending publications logic
+    mockEngine,
+    {
+      adaptiveStream: true,
+      dynacase: false,
+      audioCaptureDefaults: {},
+      videoCaptureDefaults: {},
+      stopLocalTrackOnUnpublish: true,
+      reconnectPolicy: "always",
+      disconnectOnPageLeave: true,
+    },
+    new Map(),
+    {},
+  );
+
+  vi.mocked(localParticipant).createTracks = vi
+    .fn()
+    .mockImplementation(async (opts) => {
+      const tracks: LocalTrack[] = [];
+      if (opts.audio) {
+        tracks.push(createMockLocalTrack(Track.Source.Microphone));
+      }
+      if (opts.video) {
+        tracks.push(createMockLocalTrack(Track.Source.Camera));
+      }
+      await createTrackLock;
+      return tracks;
+    });
+
+  vi.mocked(localParticipant).publishTrack = vi
+    .fn()
+    .mockImplementation(async (track: LocalTrack) => {
+      const pub = {
+        track,
+        source: track.source,
+        mute: track.mute,
+        unmute: track.unmute,
+      } as Partial<LocalTrackPublication> as LocalTrackPublication;
+      trackPublications.push(pub);
+      localParticipant.emit(ParticipantEvent.LocalTrackPublished, pub);
+      return Promise.resolve(pub);
+    });
+
+  vi.mocked(localParticipant).getTrackPublication = vi
+    .fn()
+    .mockImplementation((source: Track.Source) => {
+      return trackPublications.find((pub) => pub.track?.source === source);
+    });
+
+  connection = {
+    state$: constant({
+      state: "ConnectedToLkRoom",
+      livekitConnectionState$: constant(LivekitConnectionState.Connected),
+    }),
+    livekitRoom: mockLivekitRoom({
+      localParticipant: localParticipant,
+    }),
+  } as unknown as Connection;
+});
+
+describe("Publisher", () => {
+  let publisher: Publisher;
+
+  beforeEach(() => {
+    publisher = new Publisher(
+      scope,
+      connection,
+      mockMediaDevices({}),
+      muteStates,
+      constant({ supported: false, processor: undefined }),
+      logger,
+    );
+  });
+
+  afterEach(() => {});
+
+  it("Should not create tracks if started muted to avoid unneeded permission requests", async () => {
+    const createTracksSpy = vi.spyOn(
+      connection.livekitRoom.localParticipant,
+      "createTracks",
+    );
+
+    audioEnabled$.next(false);
+    videoEnabled$.next(false);
+    await publisher.createAndSetupTracks();
+
+    expect(createTracksSpy).not.toHaveBeenCalled();
+  });
+
+  it("Should minimize permission request by querying create at once", async () => {
+    const enableCameraAndMicrophoneSpy = vi.spyOn(
+      localParticipant,
+      "enableCameraAndMicrophone",
+    );
+    const createTracksSpy = vi.spyOn(localParticipant, "createTracks");
+
+    audioEnabled$.next(true);
+    videoEnabled$.next(true);
+    await publisher.createAndSetupTracks();
+    await flushPromises();
+
+    expect(enableCameraAndMicrophoneSpy).toHaveBeenCalled();
+
+    // It should create both at once
+    expect(createTracksSpy).toHaveBeenCalledWith({
+      audio: true,
+      video: true,
+    });
+  });
+
+  it("Ensure no data is streamed until publish has been called", async () => {
+    audioEnabled$.next(true);
+    await publisher.createAndSetupTracks();
+
+    // The track should be created and paused
+    expect(localParticipant.createTracks).toHaveBeenCalledWith({
+      audio: true,
+      video: undefined,
+    });
+    await flushPromises();
+    expect(localParticipant.publishTrack).toHaveBeenCalled();
+
+    await flushPromises();
+    const track = localParticipant.getTrackPublication(
+      Track.Source.Microphone,
+    )?.track;
+    expect(track).toBeDefined();
+    expect(track!.pauseUpstream).toHaveBeenCalled();
+    expect(track!.isUpstreamPaused).toBe(true);
+  });
+
+  it("Ensure resume upstream when published is called", async () => {
+    videoEnabled$.next(true);
+    await publisher.createAndSetupTracks();
+    // await flushPromises();
+    await publisher.startPublishing();
+
+    const track = localParticipant.getTrackPublication(
+      Track.Source.Camera,
+    )?.track;
+    expect(track).toBeDefined();
+    // expect(track.pauseUpstream).toHaveBeenCalled();
+    expect(track!.isUpstreamPaused).toBe(false);
+  });
+
+  describe("Mute states", () => {
+    let publisher: Publisher;
+    beforeEach(() => {
+      publisher = new Publisher(
+        scope,
+        connection,
+        mockMediaDevices({}),
+        muteStates,
+        constant({ supported: false, processor: undefined }),
+        logger,
+      );
+    });
+
+    test.each([
+      { mutes: { audioEnabled: true, videoEnabled: false } },
+      { mutes: { audioEnabled: true, videoEnabled: false } },
+    ])("only create the tracks that are unmuted $mutes", async ({ mutes }) => {
+      // Ensure all muted
+      audioEnabled$.next(mutes.audioEnabled);
+      videoEnabled$.next(mutes.videoEnabled);
+
+      vi.mocked(connection.livekitRoom.localParticipant).createTracks = vi
+        .fn()
+        .mockResolvedValue([]);
+
+      await publisher.createAndSetupTracks();
+
+      expect(
+        connection.livekitRoom.localParticipant.createTracks,
+      ).toHaveBeenCalledOnce();
+
+      expect(
+        connection.livekitRoom.localParticipant.createTracks,
+      ).toHaveBeenCalledWith({
+        audio: mutes.audioEnabled ? true : undefined,
+        video: mutes.videoEnabled ? true : undefined,
+      });
+    });
+  });
+
+  it("does mute unmute audio", async () => {});
+});
+
+describe("Bug fix", () => {
+  // There is a race condition when creating and publishing tracks while the mute state changes.
+  // This race condition could cause tracks to be published even though they are muted at the
+  // beginning of a call coming from lobby.
+  // This is caused by our stack using manually the low level API to create and publish tracks,
+  // but also using the higher level setMicrophoneEnabled and setCameraEnabled functions that also create
+  // and publish tracks, and managing pending publications.
+  // Race is as follow, on creation of the Publisher we create the tracks then publish them.
+  // If in the middle of that process the mute state changes:
+  //  - the `setMicrophoneEnabled` will be no-op because it is not aware of our created track and can't see any pending publication
+  //  - If start publication is requested it will publish the track even though there was a mute request.
+  it("wrongly publish tracks while muted", async () => {
+    // setLogLevel(`debug`);
+    const publisher = new Publisher(
+      scope,
+      connection,
+      mockMediaDevices({}),
+      muteStates,
+      constant({ supported: false, processor: undefined }),
+      logger,
+    );
+    audioEnabled$.next(true);
+
+    const resolvers = Promise.withResolvers<void>();
+    createTrackLock = resolvers.promise;
+
+    // Initially the audio is unmuted, so creating tracks should publish the audio track
+    const createTracks = publisher.createAndSetupTracks();
+    void publisher.startPublishing();
+    void createTracks.then(() => {
+      void publisher.startPublishing();
+    });
+    // now mute the audio before allowing track creation to complete
+    audioEnabled$.next(false);
+    resolvers.resolve(undefined);
+    await createTracks;
+
+    await flushPromises();
+
+    const track = localParticipant.getTrackPublication(
+      Track.Source.Microphone,
+    )?.track;
+    expect(track).toBeDefined();
+
+    try {
+      expect(localParticipant.publishTrack).not.toHaveBeenCalled();
+    } catch {
+      expect(track!.mute).toHaveBeenCalled();
+      expect(track!.isMuted).toBe(true);
+    }
+  });
+});

src/state/CallViewModel/localMember/Publisher.ts

@@ -1,16 +1,17 @@
 /*
+Copyright 2025 Element Creations Ltd.
 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 {
+  ConnectionState as LivekitConnectionState,
+  type LocalTrackPublication,
   LocalVideoTrack,
+  ParticipantEvent,
   type Room as LivekitRoom,
   Track,
-  type LocalTrack,
-  type LocalTrackPublication,
-  ConnectionState as LivekitConnectionState,
 } from "livekit-client";
 import {
   map,
@@ -39,31 +40,36 @@ import { type ObservableScope } from "../../ObservableScope.ts";
  * The Publisher is also responsible for creating the media tracks.
  */
 export class Publisher {
-  public tracks: LocalTrack<Track.Kind>[] = [];
+  /**
+   * By default, livekit will start publishing tracks as soon as they are created.
+   * In the matrix RTC world, we want to control when tracks are published based
+   * on whether the user is part of the RTC session or not.
+   */
+  public shouldPublish = false;
+
   /**
    * 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.
-   * @param e2eeLivekitOptions - The E2EE options to use for the LiveKit room. Use to share the same key provider across connections!.
    * @param trackerProcessorState$ - The processor state for the video track processor (e.g. background blur).
+   * @param logger - The logger to use for logging :D.
    */
   public constructor(
     private scope: ObservableScope,
-    private connection: Connection,
+    private connection: Pick<Connection, "livekitRoom" | "state$">, //setE2EEEnabled,
     devices: MediaDevices,
     private readonly muteStates: MuteStates,
     trackerProcessorState$: Behavior<ProcessorState>,
-    private logger?: Logger,
+    private logger: Logger,
   ) {
-    this.logger?.info("[PublishConnection] Create LiveKit room");
     const { controlledAudioDevices } = getUrlParams();
 
     const room = connection.livekitRoom;
 
     room.setE2EEEnabled(room.options.e2ee !== undefined)?.catch((e: Error) => {
-      this.logger?.error("Failed to set E2EE enabled on room", e);
+      this.logger.error("Failed to set E2EE enabled on room", e);
     });
 
     // Setup track processor syncing (blur)
@@ -73,117 +79,187 @@ export class Publisher {
 
     this.workaroundRestartAudioInputTrackChrome(devices, scope);
     this.scope.onEnd(() => {
-      this.logger?.info(
-        "[PublishConnection] Scope ended -> stop publishing all tracks",
-      );
+      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,
+      this.onLocalTrackPublished.bind(this),
+    );
+  }
+
+  // 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,
+  // it would also prevent the user from seeing their own video/audio preview.
+  // So for that we use pauseUpStream():  Stops sending media to the server by replacing
+  // the sender track with null, but keeps the local MediaStreamTrack active.
+  // The user can still see/hear themselves locally, but remote participants see nothing.
+  private onLocalTrackPublished(
+    localTrackPublication: LocalTrackPublication,
+  ): void {
+    this.logger.info("Local track published", localTrackPublication);
+    const lkRoom = this.connection.livekitRoom;
+    if (!this.shouldPublish) {
+      this.pauseUpstreams(lkRoom, [localTrackPublication.source]).catch((e) => {
+        this.logger.error(`Failed to pause upstreams`, e);
+      });
+    }
+    // also check the mute state and apply it
+    if (localTrackPublication.source === Track.Source.Microphone) {
+      const enabled = this.muteStates.audio.enabled$.value;
+      lkRoom.localParticipant.setMicrophoneEnabled(enabled).catch((e) => {
+        this.logger.error(
+          `Failed to enable microphone track, enabled:${enabled}`,
+          e,
+        );
+      });
+    } else if (localTrackPublication.source === Track.Source.Camera) {
+      const enabled = this.muteStates.video.enabled$.value;
+      lkRoom.localParticipant.setCameraEnabled(enabled).catch((e) => {
+        this.logger.error(
+          `Failed to enable camera track, enabled:${enabled}`,
+          e,
+        );
+      });
+    }
+  }
+  /**
+   * Create and setup local audio and video tracks based on the current mute states.
+   * It creates the tracks only if audio and/or video is enabled, to avoid unnecessary
+   * permission prompts.
+   *
+   * It also observes mute state changes to update LiveKit microphone/camera states accordingly.
+   * If a track is not created initially because disabled, it will be created when unmuting.
+   *
+   * This call is not blocking anymore, instead callers can listen to the
+   * `RoomEvent.MediaDevicesError` event in the LiveKit room to be notified of any errors.
+   *
+   */
+  public async createAndSetupTracks(): Promise<void> {
+    this.logger.debug("createAndSetupTracks called");
+    const lkRoom = this.connection.livekitRoom;
+    // Observe mute state changes and update LiveKit microphone/camera states accordingly
+    this.observeMuteStates();
+
+    // 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.
+    const audio = this.muteStates.audio.enabled$.value;
+    const video = this.muteStates.video.enabled$.value;
+
+    // We don't await the creation, because livekit could block until the tracks
+    // are fully published, and not only that they are created.
+    // We don't have control on that, localParticipant creates and publishes the tracks
+    // asap.
+    // We are using the `ParticipantEvent.LocalTrackPublished` to be notified
+    // when tracks are actually published, and at that point
+    // we can pause upstream if needed (depending on if startPublishing has been called).
+    if (audio && video) {
+      // Enable both at once in order to have a single permission prompt!
+      void lkRoom.localParticipant.enableCameraAndMicrophone();
+    } else if (audio) {
+      void lkRoom.localParticipant.setMicrophoneEnabled(true);
+    } else if (video) {
+      void lkRoom.localParticipant.setCameraEnabled(true);
+    }
+
+    return Promise.resolve();
+  }
+
+  private async pauseUpstreams(
+    lkRoom: LivekitRoom,
+    sources: Track.Source[],
+  ): Promise<void> {
+    for (const source of sources) {
+      const track = lkRoom.localParticipant.getTrackPublication(source)?.track;
+      if (track) {
+        await track.pauseUpstream();
+      } else {
+        this.logger.warn(
+          `No track found for source ${source} to pause upstream`,
+        );
+      }
+    }
+  }
+
+  private async resumeUpstreams(
+    lkRoom: LivekitRoom,
+    sources: Track.Source[],
+  ): Promise<void> {
+    for (const source of sources) {
+      const track = lkRoom.localParticipant.getTrackPublication(source)?.track;
+      if (track) {
+        await track.resumeUpstream();
+      } else {
+        this.logger.warn(
+          `No track found for source ${source} to resume upstream`,
+        );
+      }
+    }
   }
 
   /**
-   * Start the connection to LiveKit and publish local tracks.
    *
-   * This will:
-   * wait for the connection to be ready.
-   // * 1. Request an OpenId token `request_token` (allows matrix users to verify their identity with a third-party service.)
-   // * 2. Use this token to request the SFU config to the MatrixRtc authentication service.
-   // * 3. Connect to the configured LiveKit room.
-   // * 4. Create local audio and video tracks based on the current mute states and publish them to the room.
+   * Request to publish local tracks to the LiveKit room.
+   * This will wait for the connection to be ready before publishing.
+   * Livekit also have some local retry logic for publishing tracks.
+   * Can be called multiple times, localparticipant manages the state of published tracks (or pending publications).
    *
-   * @throws {InsufficientCapacityError} if the LiveKit server indicates that it has insufficient capacity to accept the connection.
-   * @throws {SFURoomCreationRestrictedError} if the LiveKit server indicates that the room does not exist and cannot be created.
+   * @returns
    */
-  public async createAndSetupTracks(): Promise<LocalTrack[]> {
-    const lkRoom = this.connection.livekitRoom;
-    // Observe mute state changes and update LiveKit microphone/camera states accordingly
-    this.observeMuteStates(this.scope);
-
-    // TODO: This should be an autostarted connection no need to start here. just check the connection state.
-    // TODO: This will fetch the JWT token. Perhaps we could keep it preloaded
-    // instead? This optimization would only be safe for a publish connection,
-    // because we don't want to leak the user's intent to perhaps join a call to
-    // remote servers before they actually commit to it.
-    // const { promise, resolve, reject } = Promise.withResolvers<void>();
-    // const sub = this.connection.state$.subscribe((s) => {
-    //   if (s.state === "FailedToStart") {
-    //     reject(new Error("Disconnected from LiveKit server"));
-    //   } else if (s.state === "ConnectedToLkRoom") {
-    //     resolve();
-    //   }
-    // });
-    // try {
-    //   await promise;
-    // } catch (e) {
-    //   throw e;
-    // } finally {
-    //   sub.unsubscribe();
-    // }
-    // TODO-MULTI-SFU: Prepublish a microphone track
-    const audio = this.muteStates.audio.enabled$.value;
-    const video = this.muteStates.video.enabled$.value;
-    // createTracks throws if called with audio=false and video=false
-    if (audio || video) {
-      // TODO this can still throw errors? It will also prompt for permissions if not already granted
-      this.tracks =
-        (await lkRoom.localParticipant
-          .createTracks({
-            audio,
-            video,
-          })
-          .catch((error) => {
-            this.logger?.error("Failed to create tracks", error);
-          })) ?? [];
+  public async startPublishing(): Promise<void> {
+    if (this.shouldPublish) {
+      this.logger.debug(`Already publishing, ignoring startPublishing call`);
+      return;
     }
-    return this.tracks;
-  }
+    this.shouldPublish = true;
+    this.logger.debug("startPublishing called");
 
-  public async startPublishing(): Promise<LocalTrack[]> {
     const lkRoom = this.connection.livekitRoom;
-    const { promise, resolve, reject } = Promise.withResolvers<void>();
-    const sub = this.connection.state$.subscribe((s) => {
-      switch (s.state) {
-        case "ConnectedToLkRoom":
-          resolve();
-          break;
-        case "FailedToStart":
-          reject(new Error("Failed to connect to LiveKit server"));
-          break;
-        default:
-          this.logger?.info("waiting for connection: ", s.state);
-      }
-    });
+
+    // Resume upstream for both audio and video tracks
+    // We need to call it explicitly because call setTrackEnabled does not always
+    // resume upstream. It will only if you switch the track from disabled to enabled,
+    // but if the track is already enabled but upstream is paused, it won't resume it.
+    // TODO what about screen share?
     try {
-      await promise;
+      await this.resumeUpstreams(lkRoom, [
+        Track.Source.Microphone,
+        Track.Source.Camera,
+      ]);
     } catch (e) {
-      throw e;
-    } finally {
-      sub.unsubscribe();
+      this.logger.error(`Failed to resume upstreams`, e);
     }
-    for (const track of this.tracks) {
-      // TODO: handle errors? Needs the signaling connection to be up, but it has some retries internally
-      // with a timeout.
-      await lkRoom.localParticipant.publishTrack(track).catch((error) => {
-        this.logger?.error("Failed to publish track", error);
-      });
-
-      // TODO: check if the connection is still active? and break the loop if not?
-    }
-    return this.tracks;
   }
 
   public async stopPublishing(): Promise<void> {
-    // TODO-MULTI-SFU: Move these calls back to ObservableScope.onEnd once scope
-    // actually has the right lifetime
-    this.muteStates.audio.unsetHandler();
-    this.muteStates.video.unsetHandler();
+    this.logger.debug("stopPublishing called");
+    this.shouldPublish = false;
+    // Pause upstream will stop sending media to the server, while keeping
+    // the local MediaStreamTrack active, so the user can still see themselves.
+    await this.pauseUpstreams(this.connection.livekitRoom, [
+      Track.Source.Microphone,
+      Track.Source.Camera,
+      Track.Source.ScreenShare,
+    ]);
+  }
 
-    const localParticipant = this.connection.livekitRoom.localParticipant;
-    const tracks: LocalTrack[] = [];
-    const addToTracksIfDefined = (p: LocalTrackPublication): void => {
-      if (p.track !== undefined) tracks.push(p.track);
-    };
-    localParticipant.trackPublications.forEach(addToTracksIfDefined);
-    await localParticipant.unpublishTracks(tracks);
+  public async stopTracks(): Promise<void> {
+    const lkRoom = this.connection.livekitRoom;
+    for (const source of [
+      Track.Source.Microphone,
+      Track.Source.Camera,
+      Track.Source.ScreenShare,
+    ]) {
+      const localPub = lkRoom.localParticipant.getTrackPublication(source);
+      if (localPub?.track) {
+        // stops and unpublishes the track
+        await lkRoom.localParticipant.unpublishTrack(localPub!.track, true);
+      }
+    }
   }
 
   /// Private methods
@@ -220,6 +296,9 @@ export class Publisher {
           // the process of being restarted.
           activeMicTrack.mediaStreamTrack.readyState !== "ended"
         ) {
+          this.logger?.info(
+            "Restarting audio device track due to active media device changed (workaroundRestartAudioInputTrackChrome)",
+          );
           // Restart the track, which will cause Livekit to do another
           // getUserMedia() call with deviceId: default to get the *new* default device.
           // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
@@ -228,7 +307,7 @@ export class Publisher {
             .getTrackPublication(Track.Source.Microphone)
             ?.audioTrack?.restartTrack()
             .catch((e) => {
-              this.logger?.error(`Failed to restart audio device track`, e);
+              this.logger.error(`Failed to restart audio device track`, e);
             });
         }
       });
@@ -248,7 +327,7 @@ export class Publisher {
       selected$.pipe(scope.bind()).subscribe((device) => {
         if (lkRoom.state != LivekitConnectionState.Connected) return;
         // if (this.connectionState$.value !== ConnectionState.Connected) return;
-        this.logger?.info(
+        this.logger.info(
           "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :",
           lkRoom.getActiveDevice(kind),
           " !== ",
@@ -261,7 +340,7 @@ export class Publisher {
           lkRoom
             .switchActiveDevice(kind, device.id)
             .catch((e: Error) =>
-              this.logger?.error(
+              this.logger.error(
                 `Failed to sync ${kind} device with LiveKit`,
                 e,
               ),
@@ -277,30 +356,37 @@ export class Publisher {
 
   /**
    * Observe changes in the mute states and update the LiveKit room accordingly.
-   * @param scope
    * @private
    */
-  private observeMuteStates(scope: ObservableScope): void {
+  private observeMuteStates(): void {
     const lkRoom = this.connection.livekitRoom;
-    this.muteStates.audio.setHandler(async (desired) => {
+    this.muteStates.audio.setHandler(async (enable) => {
       try {
-        await lkRoom.localParticipant.setMicrophoneEnabled(desired);
-      } catch (e) {
-        this.logger?.error(
-          "Failed to update LiveKit audio input mute state",
-          e,
+        this.logger.debug(
+          `handler: Setting LiveKit microphone enabled: ${enable}`,
         );
+        await lkRoom.localParticipant.setMicrophoneEnabled(enable);
+        // Unmute will restart the track if it was paused upstream,
+        // but until explicitly requested, we want to keep it paused.
+        if (!this.shouldPublish && enable) {
+          await this.pauseUpstreams(lkRoom, [Track.Source.Microphone]);
+        }
+      } catch (e) {
+        this.logger.error("Failed to update LiveKit audio input mute state", e);
       }
       return lkRoom.localParticipant.isMicrophoneEnabled;
     });
-    this.muteStates.video.setHandler(async (desired) => {
+    this.muteStates.video.setHandler(async (enable) => {
       try {
-        await lkRoom.localParticipant.setCameraEnabled(desired);
+        this.logger.debug(`handler: Setting LiveKit camera enabled: ${enable}`);
+        await lkRoom.localParticipant.setCameraEnabled(enable);
+        // Unmute will restart the track if it was paused upstream,
+        // but until explicitly requested, we want to keep it paused.
+        if (!this.shouldPublish && enable) {
+          await this.pauseUpstreams(lkRoom, [Track.Source.Camera]);
+        }
       } catch (e) {
-        this.logger?.error(
-          "Failed to update LiveKit video input mute state",
-          e,
-        );
+        this.logger.error("Failed to update LiveKit video input mute state", e);
       }
       return lkRoom.localParticipant.isCameraEnabled;
     });
@@ -314,7 +400,7 @@ export class Publisher {
     const track$ = scope.behavior(
       observeTrackReference$(room.localParticipant, Track.Source.Camera).pipe(
         map((trackRef) => {
-          const track = trackRef?.publication?.track;
+          const track = trackRef?.publication.track;
           return track instanceof LocalVideoTrack ? track : null;
         }),
       ),

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

@@ -1,4 +1,5 @@
 /*
+Copyright 2025 Element Creations Ltd.
 Copyright 2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
@@ -29,13 +30,17 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import type { LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
   Connection,
+  ConnectionState,
   type ConnectionOpts,
-  type ConnectionState,
-  type PublishingParticipant,
 } from "./Connection.ts";
 import { ObservableScope } from "../../ObservableScope.ts";
 import { type OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
-import { FailToGetOpenIdToken } from "../../../utils/errors.ts";
+import {
+  ElementCallError,
+  FailToGetOpenIdToken,
+} from "../../../utils/errors.ts";
+import { testJWTToken } from "../../../utils/test-fixtures.ts";
+import { mockRemoteParticipant } from "../../../utils/test.ts";
 
 let testScope: ObservableScope;
 
@@ -46,11 +51,6 @@ let fakeLivekitRoom: MockedObject<LivekitRoom>;
 let localParticipantEventEmiter: EventEmitter;
 let fakeLocalParticipant: MockedObject<LocalParticipant>;
 
-let fakeRoomEventEmiter: EventEmitter;
-// let fakeMembershipsFocusMap$: BehaviorSubject<
-//   { membership: CallMembership; transport: LivekitTransport }[]
-// >;
-
 const livekitFocus: LivekitTransport = {
   livekit_alias: "!roomID:example.org",
   livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
@@ -87,22 +87,25 @@ function setupTest(): void {
       localParticipantEventEmiter,
     ),
   } as unknown as LocalParticipant);
-  fakeRoomEventEmiter = new EventEmitter();
 
+  const fakeRoomEventEmitter = new EventEmitter();
   fakeLivekitRoom = vi.mocked<LivekitRoom>({
     connect: vi.fn(),
     disconnect: vi.fn(),
     remoteParticipants: new Map(),
     localParticipant: fakeLocalParticipant,
     state: LivekitConnectionState.Disconnected,
-    on: fakeRoomEventEmiter.on.bind(fakeRoomEventEmiter),
-    off: fakeRoomEventEmiter.off.bind(fakeRoomEventEmiter),
-    addListener: fakeRoomEventEmiter.addListener.bind(fakeRoomEventEmiter),
+    on: fakeRoomEventEmitter.on.bind(fakeRoomEventEmitter),
+    off: fakeRoomEventEmitter.off.bind(fakeRoomEventEmitter),
+    addListener: fakeRoomEventEmitter.addListener.bind(fakeRoomEventEmitter),
     removeListener:
-      fakeRoomEventEmiter.removeListener.bind(fakeRoomEventEmiter),
+      fakeRoomEventEmitter.removeListener.bind(fakeRoomEventEmitter),
     removeAllListeners:
-      fakeRoomEventEmiter.removeAllListeners.bind(fakeRoomEventEmiter),
+      fakeRoomEventEmitter.removeAllListeners.bind(fakeRoomEventEmitter),
     setE2EEEnabled: vi.fn().mockResolvedValue(undefined),
+    emit: (eventName: string | symbol, ...args: unknown[]) => {
+      fakeRoomEventEmitter.emit(eventName, ...args);
+    },
   } as unknown as LivekitRoom);
 }
 
@@ -119,12 +122,21 @@ function setupRemoteConnection(): Connection {
       status: 200,
       body: {
         url: "wss://matrix-rtc.m.localhost/livekit/sfu",
-        jwt: "ATOKEN",
+        jwt: testJWTToken,
       },
     };
   });
 
-  fakeLivekitRoom.connect.mockResolvedValue(undefined);
+  fakeLivekitRoom.connect.mockImplementation(async (): Promise<void> => {
+    const changeEv = RoomEvent.ConnectionStateChanged;
+
+    fakeLivekitRoom.state = LivekitConnectionState.Connecting;
+    fakeLivekitRoom.emit(changeEv, fakeLivekitRoom.state);
+    fakeLivekitRoom.state = LivekitConnectionState.Connected;
+    fakeLivekitRoom.emit(changeEv, fakeLivekitRoom.state);
+
+    return Promise.resolve();
+  });
 
   return new Connection(opts, logger);
 }
@@ -147,7 +159,7 @@ describe("Start connection states", () => {
     };
     const connection = new Connection(opts, logger);
 
-    expect(connection.state$.getValue().state).toEqual("Initialized");
+    expect(connection.state$.getValue()).toEqual("Initialized");
   });
 
   it("fail to getOpenId token then error state", async () => {
@@ -163,7 +175,7 @@ describe("Start connection states", () => {
 
     const connection = new Connection(opts, logger);
 
-    const capturedStates: ConnectionState[] = [];
+    const capturedStates: (ConnectionState | Error)[] = [];
     const s = connection.state$.subscribe((value) => {
       capturedStates.push(value);
     });
@@ -183,22 +195,20 @@ describe("Start connection states", () => {
 
     let capturedState = capturedStates.pop();
     expect(capturedState).toBeDefined();
-    expect(capturedState!.state).toEqual("FetchingConfig");
+    expect(capturedState!).toEqual("FetchingConfig");
 
     deferred.reject(new FailToGetOpenIdToken(new Error("Failed to get token")));
 
     await vi.runAllTimersAsync();
 
     capturedState = capturedStates.pop();
-    if (capturedState!.state === "FailedToStart") {
-      expect(capturedState!.error.message).toEqual("Something went wrong");
-      expect(capturedState!.transport.livekit_alias).toEqual(
+    if (capturedState instanceof Error) {
+      expect(capturedState.message).toEqual("Something went wrong");
+      expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,
       );
     } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + capturedState?.state,
-      );
+      expect.fail("Expected FailedToStart state but got " + capturedState);
     }
   });
 
@@ -215,7 +225,7 @@ describe("Start connection states", () => {
 
     const connection = new Connection(opts, logger);
 
-    const capturedStates: ConnectionState[] = [];
+    const capturedStates: (ConnectionState | Error)[] = [];
     const s = connection.state$.subscribe((value) => {
       capturedStates.push(value);
     });
@@ -237,24 +247,25 @@ describe("Start connection states", () => {
 
     let capturedState = capturedStates.pop();
     expect(capturedState).toBeDefined();
-    expect(capturedState?.state).toEqual("FetchingConfig");
+    expect(capturedState).toEqual(ConnectionState.FetchingConfig);
 
     deferredSFU.resolve();
     await vi.runAllTimersAsync();
 
     capturedState = capturedStates.pop();
 
-    if (capturedState?.state === "FailedToStart") {
-      expect(capturedState?.error.message).toContain(
-        "SFU Config fetch failed with exception Error",
+    if (
+      capturedState instanceof ElementCallError &&
+      capturedState.cause instanceof Error
+    ) {
+      expect(capturedState.cause.message).toContain(
+        "SFU Config fetch failed with exception",
       );
-      expect(capturedState?.transport.livekit_alias).toEqual(
+      expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,
       );
     } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + capturedState?.state,
-      );
+      expect.fail("Expected FailedToStart state but got " + capturedState);
     }
   });
 
@@ -271,7 +282,7 @@ describe("Start connection states", () => {
 
     const connection = new Connection(opts, logger);
 
-    const capturedStates: ConnectionState[] = [];
+    const capturedStates: (ConnectionState | Error)[] = [];
     const s = connection.state$.subscribe((value) => {
       capturedStates.push(value);
     });
@@ -284,7 +295,7 @@ describe("Start connection states", () => {
         status: 200,
         body: {
           url: "wss://matrix-rtc.m.localhost/livekit/sfu",
-          jwt: "ATOKEN",
+          jwt: testJWTToken,
         },
       };
     });
@@ -301,18 +312,21 @@ describe("Start connection states", () => {
     let capturedState = capturedStates.pop();
     expect(capturedState).toBeDefined();
 
-    expect(capturedState?.state).toEqual("FetchingConfig");
+    expect(capturedState).toEqual(ConnectionState.FetchingConfig);
 
     deferredSFU.resolve();
     await vi.runAllTimersAsync();
 
     capturedState = capturedStates.pop();
 
-    if (capturedState && capturedState?.state === "FailedToStart") {
-      expect(capturedState.error.message).toContain(
+    if (
+      capturedState instanceof ElementCallError &&
+      capturedState.cause instanceof Error
+    ) {
+      expect(capturedState.cause.message).toContain(
         "Failed to connect to livekit",
       );
-      expect(capturedState.transport.livekit_alias).toEqual(
+      expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,
       );
     } else {
@@ -328,7 +342,7 @@ describe("Start connection states", () => {
 
     const connection = setupRemoteConnection();
 
-    const capturedStates: ConnectionState[] = [];
+    const capturedStates: (ConnectionState | Error)[] = [];
     const s = connection.state$.subscribe((value) => {
       capturedStates.push(value);
     });
@@ -338,13 +352,15 @@ describe("Start connection states", () => {
     await vi.runAllTimersAsync();
 
     const initialState = capturedStates.shift();
-    expect(initialState?.state).toEqual("Initialized");
+    expect(initialState).toEqual(ConnectionState.Initialized);
     const fetchingState = capturedStates.shift();
-    expect(fetchingState?.state).toEqual("FetchingConfig");
+    expect(fetchingState).toEqual(ConnectionState.FetchingConfig);
+    const disconnectedState = capturedStates.shift();
+    expect(disconnectedState).toEqual(ConnectionState.LivekitDisconnected);
     const connectingState = capturedStates.shift();
-    expect(connectingState?.state).toEqual("ConnectingToLkRoom");
+    expect(connectingState).toEqual(ConnectionState.LivekitConnecting);
     const connectedState = capturedStates.shift();
-    expect(connectedState?.state).toEqual("ConnectedToLkRoom");
+    expect(connectedState).toEqual(ConnectionState.LivekitConnected);
   });
 
   it("shutting down the scope should stop the connection", async () => {
@@ -362,46 +378,32 @@ describe("Start connection states", () => {
   });
 });
 
-function fakeRemoteLivekitParticipant(
-  id: string,
-  publications: number = 1,
-): RemoteParticipant {
-  return {
-    identity: id,
-    getTrackPublications: () => Array(publications),
-  } as unknown as RemoteParticipant;
-}
-
-describe("Publishing participants observations", () => {
-  it("should emit the list of publishing participants", () => {
+describe("remote participants", () => {
+  it("emits the list of remote participants", () => {
     setupTest();
 
     const connection = setupRemoteConnection();
 
-    const bobIsAPublisher = Promise.withResolvers<void>();
-    const danIsAPublisher = Promise.withResolvers<void>();
-    const observedPublishers: PublishingParticipant[][] = [];
-    const s = connection.remoteParticipantsWithTracks$.subscribe(
-      (publishers) => {
-        observedPublishers.push(publishers);
-        if (publishers.some((p) => p.identity === "@bob:example.org:DEV111")) {
-          bobIsAPublisher.resolve();
-        }
-        if (publishers.some((p) => p.identity === "@dan:example.org:DEV333")) {
-          danIsAPublisher.resolve();
-        }
-      },
-    );
+    const observedParticipants: RemoteParticipant[][] = [];
+    const s = connection.remoteParticipants$.subscribe((participants) => {
+      observedParticipants.push(participants);
+    });
     onTestFinished(() => s.unsubscribe());
-    // The publishingParticipants$ observable is derived from the current members of the
+    // The remoteParticipants$ observable is derived from the current members of the
     // livekitRoom and the rtc membership in order to publish the members that are publishing
     // on this connection.
 
     let participants: RemoteParticipant[] = [
-      fakeRemoteLivekitParticipant("@alice:example.org:DEV000", 0),
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 0),
-      fakeRemoteLivekitParticipant("@carol:example.org:DEV222", 0),
-      fakeRemoteLivekitParticipant("@dan:example.org:DEV333", 0),
+      mockRemoteParticipant({ identity: "@alice:example.org:DEV000" }),
+      mockRemoteParticipant({ identity: "@bob:example.org:DEV111" }),
+      mockRemoteParticipant({ identity: "@carol:example.org:DEV222" }),
+      // Mock Dan to have no published tracks. We want him to still show show up
+      // in the participants list.
+      mockRemoteParticipant({
+        identity: "@dan:example.org:DEV333",
+        getTrackPublication: () => undefined,
+        getTrackPublications: () => [],
+      }),
     ];
 
     // Let's simulate 3 members on the livekitRoom
@@ -410,24 +412,26 @@ describe("Publishing participants observations", () => {
     );
 
     participants.forEach((p) =>
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, p),
+      fakeLivekitRoom.emit(RoomEvent.ParticipantConnected, p),
     );
 
-    // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(0);
+    // At this point there should be ~~no~~ publishers
+    // We do have publisher now, since we do not filter for publishers anymore (to also have participants with only data tracks)
+    // The filtering we do is just based on the matrixRTC member events.
+    expect(observedParticipants.pop()!.length).toEqual(4);
 
     participants = [
-      fakeRemoteLivekitParticipant("@alice:example.org:DEV000", 1),
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 1),
-      fakeRemoteLivekitParticipant("@carol:example.org:DEV222", 1),
-      fakeRemoteLivekitParticipant("@dan:example.org:DEV333", 2),
+      mockRemoteParticipant({ identity: "@alice:example.org:DEV000" }),
+      mockRemoteParticipant({ identity: "@bob:example.org:DEV111" }),
+      mockRemoteParticipant({ identity: "@carol:example.org:DEV222" }),
+      mockRemoteParticipant({ identity: "@dan:example.org:DEV333" }),
     ];
     participants.forEach((p) =>
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, p),
+      fakeLivekitRoom.emit(RoomEvent.ParticipantConnected, p),
     );
 
     // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(4);
+    expect(observedParticipants.pop()!.length).toEqual(4);
   });
 
   it("should be scoped to parent scope", (): void => {
@@ -435,16 +439,14 @@ describe("Publishing participants observations", () => {
 
     const connection = setupRemoteConnection();
 
-    let observedPublishers: PublishingParticipant[][] = [];
-    const s = connection.remoteParticipantsWithTracks$.subscribe(
-      (publishers) => {
-        observedPublishers.push(publishers);
-      },
-    );
+    let observedParticipants: RemoteParticipant[][] = [];
+    const s = connection.remoteParticipants$.subscribe((participants) => {
+      observedParticipants.push(participants);
+    });
     onTestFinished(() => s.unsubscribe());
 
     let participants: RemoteParticipant[] = [
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 0),
+      mockRemoteParticipant({ identity: "@bob:example.org:DEV111" }),
     ];
 
     // Let's simulate 3 members on the livekitRoom
@@ -453,38 +455,29 @@ describe("Publishing participants observations", () => {
     );
 
     for (const participant of participants) {
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, participant);
+      fakeLivekitRoom.emit(RoomEvent.ParticipantConnected, participant);
     }
 
-    // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(0);
-
-    participants = [fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 1)];
-
-    for (const participant of participants) {
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, participant);
-    }
-
-    // We should have bob has a publisher now
-    const publishers = observedPublishers.pop();
-    expect(publishers?.length).toEqual(1);
-    expect(publishers?.[0]?.identity).toEqual("@bob:example.org:DEV111");
+    // We should have bob as a participant now
+    const ps = observedParticipants.pop();
+    expect(ps?.length).toEqual(1);
+    expect(ps?.[0]?.identity).toEqual("@bob:example.org:DEV111");
 
     // end the parent scope
     testScope.end();
-    observedPublishers = [];
+    observedParticipants = [];
 
-    // SHOULD NOT emit any more publishers as the scope is ended
+    // SHOULD NOT emit any more participants as the scope is ended
     participants = participants.filter(
       (p) => p.identity !== "@bob:example.org:DEV111",
     );
 
-    fakeRoomEventEmiter.emit(
+    fakeLivekitRoom.emit(
       RoomEvent.ParticipantDisconnected,
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111"),
+      mockRemoteParticipant({ identity: "@bob:example.org:DEV111" }),
     );
 
-    expect(observedPublishers.length).toEqual(0);
+    expect(observedParticipants.length).toEqual(0);
   });
 });
 

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -1,4 +1,5 @@
 /*
+Copyright 2025 Element Creations Ltd.
 Copyright 2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
@@ -11,14 +12,11 @@ import {
 } from "@livekit/components-core";
 import {
   ConnectionError,
-  type ConnectionState as LivekitConenctionState,
   type Room as LivekitRoom,
-  type LocalParticipant,
   type RemoteParticipant,
-  RoomEvent,
 } from "livekit-client";
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, map, type Observable } from "rxjs";
+import { BehaviorSubject, map } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 
 import {
@@ -29,12 +27,12 @@ import {
 import { type Behavior } from "../../Behavior.ts";
 import { type ObservableScope } from "../../ObservableScope.ts";
 import {
+  ElementCallError,
   InsufficientCapacityError,
   SFURoomCreationRestrictedError,
+  UnknownCallError,
 } from "../../../utils/errors.ts";
 
-export type PublishingParticipant = LocalParticipant | RemoteParticipant;
-
 export interface ConnectionOpts {
   /** The media transport to connect to. */
   transport: LivekitTransport;
@@ -46,19 +44,30 @@ export interface ConnectionOpts {
   /** Optional factory to create the LiveKit room, mainly for testing purposes. */
   livekitRoomFactory: () => LivekitRoom;
 }
+export class FailedToStartError extends Error {
+  public constructor(message: string) {
+    super(message);
+    this.name = "FailedToStartError";
+  }
+}
 
-export type ConnectionState =
-  | { state: "Initialized" }
-  | { state: "FetchingConfig"; transport: LivekitTransport }
-  | { state: "ConnectingToLkRoom"; transport: LivekitTransport }
-  | { state: "PublishingTracks"; transport: LivekitTransport }
-  | { state: "FailedToStart"; error: Error; transport: LivekitTransport }
-  | {
-      state: "ConnectedToLkRoom";
-      livekitConnectionState$: Observable<LivekitConenctionState>;
-      transport: LivekitTransport;
-    }
-  | { state: "Stopped"; transport: LivekitTransport };
+export enum ConnectionState {
+  /** The start state of a connection. It has been created but nothing has loaded yet. */
+  Initialized = "Initialized",
+  /** `start` has been called on the connection. It aquires the jwt info to conenct to the LK Room  */
+  FetchingConfig = "FetchingConfig",
+  Stopped = "Stopped",
+  /** The same as ConnectionState.Disconnected from `livekit-client` */
+  LivekitDisconnected = "disconnected",
+  /** The same as ConnectionState.Connecting from `livekit-client` */
+  LivekitConnecting = "connecting",
+  /** The same as ConnectionState.Connected from `livekit-client` */
+  LivekitConnected = "connected",
+  /** The same as ConnectionState.Reconnecting from `livekit-client` */
+  LivekitReconnecting = "reconnecting",
+  /** The same as ConnectionState.SignalReconnecting from `livekit-client` */
+  LivekitSignalReconnecting = "signalReconnecting",
+}
 
 /**
  * A connection to a Matrix RTC LiveKit backend.
@@ -67,14 +76,32 @@ export type ConnectionState =
  */
 export class Connection {
   // Private Behavior
-  private readonly _state$ = new BehaviorSubject<ConnectionState>({
-    state: "Initialized",
-  });
+  private readonly _state$ = new BehaviorSubject<
+    ConnectionState | ElementCallError
+  >(ConnectionState.Initialized);
 
   /**
    * The current state of the connection to the media transport.
    */
-  public readonly state$: Behavior<ConnectionState> = this._state$;
+  public readonly state$: Behavior<ConnectionState | Error> = this._state$;
+
+  /**
+   * The media transport to connect to.
+   */
+  public readonly transport: LivekitTransport;
+
+  public readonly livekitRoom: LivekitRoom;
+
+  private scope: ObservableScope;
+
+  /**
+   * The remote LiveKit participants that are visible on this connection.
+   *
+   * Note that this may include participants that are connected only to
+   * subscribe, or publishers that are otherwise unattested in MatrixRTC state.
+   * It is therefore more low-level than what should be presented to the user.
+   */
+  public readonly remoteParticipants$: Behavior<RemoteParticipant[]>;
 
   /**
    * Whether the connection has been stopped.
@@ -95,24 +122,29 @@ export class Connection {
    * @throws {InsufficientCapacityError} if the LiveKit server indicates that it has insufficient capacity to accept the connection.
    * @throws {SFURoomCreationRestrictedError} if the LiveKit server indicates that the room does not exist and cannot be created.
    */
-  // TODO dont make this throw and instead store a connection error state in this class?
   // TODO consider an autostart pattern...
   public async start(): Promise<void> {
     this.logger.debug("Starting Connection");
     this.stopped = false;
     try {
-      this._state$.next({
-        state: "FetchingConfig",
-        transport: this.transport,
-      });
+      this._state$.next(ConnectionState.FetchingConfig);
+      // We should already have this information after creating the localTransport.
+      // It would probably be better to forward this here.
       const { url, jwt } = await this.getSFUConfigWithOpenID();
       // If we were stopped while fetching the config, don't proceed to connect
       if (this.stopped) return;
 
-      this._state$.next({
-        state: "ConnectingToLkRoom",
-        transport: this.transport,
-      });
+      // Setup observer once we are done with getSFUConfigWithOpenID
+      connectionStateObserver(this.livekitRoom)
+        .pipe(
+          this.scope.bind(),
+          map((s) => s as unknown as ConnectionState),
+        )
+        .subscribe((lkState) => {
+          // It is save to cast lkState to ConnectionState as they are fully overlapping.
+          this._state$.next(lkState);
+        });
+
       try {
         await this.livekitRoom.connect(url, jwt);
       } catch (e) {
@@ -127,7 +159,8 @@ export class Connection {
             throw new InsufficientCapacityError();
           }
           if (e.status === 404) {
-            // error msg is "Could not establish signal connection: requested room does not exist"
+            // error msg is "Failed to create call"
+            // error description is "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists."
             // The room does not exist. There are two different modes of operation for the SFU:
             // - the room is created on the fly when connecting (livekit `auto_create` option)
             // - Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service)
@@ -139,19 +172,16 @@ export class Connection {
       }
       // If we were stopped while connecting, don't proceed to update state.
       if (this.stopped) return;
-
-      this._state$.next({
-        state: "ConnectedToLkRoom",
-        transport: this.transport,
-        livekitConnectionState$: connectionStateObserver(this.livekitRoom),
-      });
     } catch (error) {
       this.logger.debug(`Failed to connect to LiveKit room: ${error}`);
-      this._state$.next({
-        state: "FailedToStart",
-        error: error instanceof Error ? error : new Error(`${error}`),
-        transport: this.transport,
-      });
+      this._state$.next(
+        error instanceof ElementCallError
+          ? error
+          : error instanceof Error
+            ? new UnknownCallError(error)
+            : new UnknownCallError(new Error(`${error}`)),
+      );
+      // Its okay to ignore the throw. The error is part of the state.
       throw error;
     }
   }
@@ -176,30 +206,11 @@ export class Connection {
     );
     if (this.stopped) return;
     await this.livekitRoom.disconnect();
-    this._state$.next({
-      state: "Stopped",
-      transport: this.transport,
-    });
+    this._state$.next(ConnectionState.Stopped);
     this.stopped = true;
   }
 
-  /**
-   * An observable of the participants that are publishing on this connection. (Excluding our local participant)
-   * This is derived from `participantsIncludingSubscribers$` and `remoteTransports$`.
-   * It filters the participants to only those that are associated with a membership that claims to publish on this connection.
-   */
-  public readonly remoteParticipantsWithTracks$: Behavior<
-    PublishingParticipant[]
-  >;
-
-  /**
-   * The media transport to connect to.
-   */
-  public readonly transport: LivekitTransport;
-
   private readonly client: OpenIDClientParts;
-  public readonly livekitRoom: LivekitRoom;
-
   private readonly logger: Logger;
 
   /**
@@ -207,36 +218,23 @@ export class Connection {
    *
    * @param opts - Connection options {@link ConnectionOpts}.
    *
-   * @param logger
+   * @param logger - The logger to use.
    */
   public constructor(opts: ConnectionOpts, logger: Logger) {
     this.logger = logger.getChild("[Connection]");
     this.logger.info(
-      `[Connection] Creating new connection to ${opts.transport.livekit_service_url} ${opts.transport.livekit_alias}`,
+      `Creating new connection to ${opts.transport.livekit_service_url} ${opts.transport.livekit_alias}`,
     );
     const { transport, client, scope } = opts;
 
+    this.scope = scope;
     this.livekitRoom = opts.livekitRoomFactory();
     this.transport = transport;
     this.client = client;
 
-    // REMOTE participants with track!!!
-    // this.remoteParticipantsWithTracks$
-    this.remoteParticipantsWithTracks$ = scope.behavior(
-      // only tracks remote participants
-      connectedParticipantsObserver(this.livekitRoom, {
-        additionalRoomEvents: [
-          RoomEvent.TrackPublished,
-          RoomEvent.TrackUnpublished,
-        ],
-      }).pipe(
-        map((participants) => {
-          return participants.filter(
-            (participant) => participant.getTrackPublications().length > 0,
-          );
-        }),
-      ),
-      [],
+    this.remoteParticipants$ = scope.behavior(
+      // Only tracks remote participants
+      connectedParticipantsObserver(this.livekitRoom),
     );
 
     scope.onEnd(() => {

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -7,13 +7,15 @@ Please see LICENSE in the repository root for full details.
 
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
-  type E2EEOptions,
   Room as LivekitRoom,
   type RoomOptions,
   type BaseKeyProvider,
+  type E2EEManagerOptions,
+  type BaseE2EEManager,
 } from "livekit-client";
 import { type Logger } from "matrix-js-sdk/lib/logger";
-import E2EEWorker from "livekit-client/e2ee-worker?worker";
+// imported as inline to support worker when loaded from a cdn (cross domain)
+import E2EEWorker from "livekit-client/e2ee-worker?worker&inline";
 
 import { type ObservableScope } from "../../ObservableScope.ts";
 import { Connection } from "./Connection.ts";
@@ -23,6 +25,7 @@ import type { Behavior } from "../../Behavior.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
 import { defaultLiveKitOptions } from "../../../livekit/options.ts";
 
+// TODO evaluate if this should be done like the Publisher Factory
 export interface ConnectionFactory {
   createConnection(
     transport: LivekitTransport,
@@ -40,9 +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 e2eeLivekitOptions - The E2EE options to use for the LiveKit Room.
+   * @param livekitKeyProvider - Optional key provider for end-to-end encryption.
    * @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.
    */
   public constructor(
     private client: OpenIDClientParts,
@@ -51,20 +56,24 @@ export class ECConnectionFactory implements ConnectionFactory {
     livekitKeyProvider: BaseKeyProvider | undefined,
     private controlledAudioDevices: boolean,
     livekitRoomFactory?: () => LivekitRoom,
+    echoCancellation: boolean = true,
+    noiseSuppression: boolean = true,
   ) {
     const defaultFactory = (): LivekitRoom =>
       new LivekitRoom(
-        generateRoomOption(
-          this.devices,
-          this.processorState$.value,
-          livekitKeyProvider && {
+        generateRoomOption({
+          devices: this.devices,
+          processorState: this.processorState$.value,
+          e2eeLivekitOptions: livekitKeyProvider && {
             keyProvider: livekitKeyProvider,
             // It's important that every room use a separate E2EE worker.
             // They get confused if given streams from multiple rooms.
             worker: new E2EEWorker(),
           },
-          this.controlledAudioDevices,
-        ),
+          controlledAudioDevices: this.controlledAudioDevices,
+          echoCancellation,
+          noiseSuppression,
+        }),
       );
     this.livekitRoomFactory = livekitRoomFactory ?? defaultFactory;
   }
@@ -89,12 +98,24 @@ export class ECConnectionFactory implements ConnectionFactory {
 /**
  *  Generate the initial LiveKit RoomOptions based on the current media devices and processor state.
  */
-function generateRoomOption(
-  devices: MediaDevices,
-  processorState: ProcessorState,
-  e2eeLivekitOptions: E2EEOptions | undefined,
-  controlledAudioDevices: boolean,
-): RoomOptions {
+function generateRoomOption({
+  devices,
+  processorState,
+  e2eeLivekitOptions,
+  controlledAudioDevices,
+  echoCancellation,
+  noiseSuppression,
+}: {
+  devices: MediaDevices;
+  processorState: ProcessorState;
+  e2eeLivekitOptions:
+    | E2EEManagerOptions
+    | { e2eeManager: BaseE2EEManager }
+    | undefined;
+  controlledAudioDevices: boolean;
+  echoCancellation: boolean;
+  noiseSuppression: boolean;
+}): RoomOptions {
   return {
     ...defaultLiveKitOptions,
     videoCaptureDefaults: {
@@ -105,6 +126,8 @@ function generateRoomOption(
     audioCaptureDefaults: {
       ...defaultLiveKitOptions.audioCaptureDefaults,
       deviceId: devices.audioInput.selected$.value?.id,
+      echoCancellation,
+      noiseSuppression,
     },
     audioOutput: {
       // When using controlled audio devices, we don't want to set the

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

@@ -8,10 +8,10 @@ Please see LICENSE in the repository root for full details.
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { BehaviorSubject } from "rxjs";
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { type Participant as LivekitParticipant } from "livekit-client";
+import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { Epoch, ObservableScope } from "../../ObservableScope.ts";
+import { Epoch, mapEpoch, ObservableScope } from "../../ObservableScope.ts";
 import {
   createConnectionManager$,
   type ConnectionManagerData,
@@ -52,7 +52,7 @@ beforeEach(() => {
       (transport: LivekitTransport, scope: ObservableScope) => {
         const mockConnection = {
           transport,
-          remoteParticipantsWithTracks$: new BehaviorSubject([]),
+          remoteParticipants$: new BehaviorSubject([]),
         } as unknown as Connection;
         vi.mocked(mockConnection).start = vi.fn();
         vi.mocked(mockConnection).stop = vi.fn();
@@ -73,7 +73,7 @@ afterEach(() => {
 describe("connections$ stream", () => {
   test("Should create and start new connections for each transports", () => {
     withTestScheduler(({ behavior, expectObservable }) => {
-      const { connections$ } = createConnectionManager$({
+      const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
         inputTransports$: behavior("a", {
@@ -82,7 +82,9 @@ describe("connections$ stream", () => {
         logger: logger,
       });
 
-      expectObservable(connections$).toBe("a", {
+      expectObservable(
+        connectionManagerData$.pipe(mapEpoch((d) => d.getConnections())),
+      ).toBe("a", {
         a: expect.toSatisfy((e: Epoch<Connection[]>) => {
           const connections = e.value;
           expect(connections.length).toBe(2);
@@ -110,7 +112,7 @@ describe("connections$ stream", () => {
 
   test("Should start connection only once", () => {
     withTestScheduler(({ behavior, expectObservable }) => {
-      const { connections$ } = createConnectionManager$({
+      const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
         inputTransports$: behavior("abcdef", {
@@ -124,7 +126,9 @@ describe("connections$ stream", () => {
         logger: logger,
       });
 
-      expectObservable(connections$).toBe("xxxxxa", {
+      expectObservable(
+        connectionManagerData$.pipe(mapEpoch((d) => d.getConnections())),
+      ).toBe("xxxxxa", {
         x: expect.anything(),
         a: expect.toSatisfy((e: Epoch<Connection[]>) => {
           const connections = e.value;
@@ -153,7 +157,7 @@ describe("connections$ stream", () => {
 
   test("Should cleanup connections when not needed anymore", () => {
     withTestScheduler(({ behavior, expectObservable }) => {
-      const { connections$ } = createConnectionManager$({
+      const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
         inputTransports$: behavior("abc", {
@@ -164,7 +168,9 @@ describe("connections$ stream", () => {
         logger: logger,
       });
 
-      expectObservable(connections$).toBe("xab", {
+      expectObservable(
+        connectionManagerData$.pipe(mapEpoch((d) => d.getConnections())),
+      ).toBe("xab", {
         x: expect.anything(),
         a: expect.toSatisfy((e: Epoch<Connection[]>) => {
           const connections = e.value;
@@ -194,24 +200,21 @@ describe("connections$ stream", () => {
 });
 
 describe("connectionManagerData$ stream", () => {
-  // Used in test to control fake connections' remoteParticipantsWithTracks$ streams
-  let fakePublishingParticipantsStreams: Map<
-    string,
-    Behavior<LivekitParticipant[]>
-  >;
+  // Used in test to control fake connections' remoteParticipants$ streams
+  let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
 
   function keyForTransport(transport: LivekitTransport): string {
     return `${transport.livekit_service_url}|${transport.livekit_alias}`;
   }
 
   beforeEach(() => {
-    fakePublishingParticipantsStreams = new Map();
+    fakeRemoteParticipantsStreams = new Map();
 
-    function getPublishingParticipantsFor(
+    function getRemoteParticipantsFor(
       transport: LivekitTransport,
-    ): Behavior<LivekitParticipant[]> {
+    ): Behavior<RemoteParticipant[]> {
       return (
-        fakePublishingParticipantsStreams.get(keyForTransport(transport)) ??
+        fakeRemoteParticipantsStreams.get(keyForTransport(transport)) ??
         new BehaviorSubject([])
       );
     }
@@ -221,13 +224,12 @@ describe("connectionManagerData$ stream", () => {
       .fn()
       .mockImplementation(
         (transport: LivekitTransport, scope: ObservableScope) => {
-          const fakePublishingParticipants$ = new BehaviorSubject<
-            LivekitParticipant[]
+          const fakeRemoteParticipants$ = new BehaviorSubject<
+            RemoteParticipant[]
           >([]);
           const mockConnection = {
             transport,
-            remoteParticipantsWithTracks$:
-              getPublishingParticipantsFor(transport),
+            remoteParticipants$: getRemoteParticipantsFor(transport),
           } as unknown as Connection;
           vi.mocked(mockConnection).start = vi.fn();
           vi.mocked(mockConnection).stop = vi.fn();
@@ -236,36 +238,36 @@ describe("connectionManagerData$ stream", () => {
             void mockConnection.stop();
           });
 
-          fakePublishingParticipantsStreams.set(
+          fakeRemoteParticipantsStreams.set(
             keyForTransport(transport),
-            fakePublishingParticipants$,
+            fakeRemoteParticipants$,
           );
           return mockConnection;
         },
       );
   });
 
-  test("Should report connections with the publishing participants", () => {
+  test("Should report connections with the remote participants", () => {
     withTestScheduler(({ expectObservable, schedule, behavior }) => {
       // Setup the fake participants streams behavior
       // ==============================
-      fakePublishingParticipantsStreams.set(
+      fakeRemoteParticipantsStreams.set(
         keyForTransport(TRANSPORT_1),
         behavior("oa-b", {
           o: [],
-          a: [{ identity: "user1A" } as LivekitParticipant],
+          a: [{ identity: "user1A" } as RemoteParticipant],
           b: [
-            { identity: "user1A" } as LivekitParticipant,
-            { identity: "user1B" } as LivekitParticipant,
+            { identity: "user1A" } as RemoteParticipant,
+            { identity: "user1B" } as RemoteParticipant,
           ],
         }),
       );
 
-      fakePublishingParticipantsStreams.set(
+      fakeRemoteParticipantsStreams.set(
         keyForTransport(TRANSPORT_2),
         behavior("o-a", {
           o: [],
-          a: [{ identity: "user2A" } as LivekitParticipant],
+          a: [{ identity: "user2A" } as RemoteParticipant],
         }),
       );
       // ==============================
@@ -283,47 +285,47 @@ describe("connectionManagerData$ stream", () => {
         a: expect.toSatisfy((e) => {
           const data: ConnectionManagerData = e.value;
           expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(0);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(0);
+          expect(data.getParticipantsForTransport(TRANSPORT_1).length).toBe(0);
+          expect(data.getParticipantsForTransport(TRANSPORT_2).length).toBe(0);
           return true;
         }),
         b: expect.toSatisfy((e) => {
           const data: ConnectionManagerData = e.value;
           expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(0);
-          expect(data.getParticipantForTransport(TRANSPORT_1)[0].identity).toBe(
-            "user1A",
-          );
+          expect(data.getParticipantsForTransport(TRANSPORT_1).length).toBe(1);
+          expect(data.getParticipantsForTransport(TRANSPORT_2).length).toBe(0);
+          expect(
+            data.getParticipantsForTransport(TRANSPORT_1)[0].identity,
+          ).toBe("user1A");
           return true;
         }),
         c: expect.toSatisfy((e) => {
           const data: ConnectionManagerData = e.value;
           expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_1)[0].identity).toBe(
-            "user1A",
-          );
-          expect(data.getParticipantForTransport(TRANSPORT_2)[0].identity).toBe(
-            "user2A",
-          );
+          expect(data.getParticipantsForTransport(TRANSPORT_1).length).toBe(1);
+          expect(data.getParticipantsForTransport(TRANSPORT_2).length).toBe(1);
+          expect(
+            data.getParticipantsForTransport(TRANSPORT_1)[0].identity,
+          ).toBe("user1A");
+          expect(
+            data.getParticipantsForTransport(TRANSPORT_2)[0].identity,
+          ).toBe("user2A");
           return true;
         }),
         d: expect.toSatisfy((e) => {
           const data: ConnectionManagerData = e.value;
           expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_1)[0].identity).toBe(
-            "user1A",
-          );
-          expect(data.getParticipantForTransport(TRANSPORT_1)[1].identity).toBe(
-            "user1B",
-          );
-          expect(data.getParticipantForTransport(TRANSPORT_2)[0].identity).toBe(
-            "user2A",
-          );
+          expect(data.getParticipantsForTransport(TRANSPORT_1).length).toBe(2);
+          expect(data.getParticipantsForTransport(TRANSPORT_2).length).toBe(1);
+          expect(
+            data.getParticipantsForTransport(TRANSPORT_1)[0].identity,
+          ).toBe("user1A");
+          expect(
+            data.getParticipantsForTransport(TRANSPORT_1)[1].identity,
+          ).toBe("user1B");
+          expect(
+            data.getParticipantsForTransport(TRANSPORT_2)[0].identity,
+          ).toBe("user2A");
           return true;
         }),
       });

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -1,6 +1,3 @@
-// TODOs:
-// - make ConnectionManager its own actual class
-
 /*
 Copyright 2025 Element Creations Ltd.
 Copyright 2025 New Vector Ltd.
@@ -9,13 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type LivekitTransport,
-  type ParticipantId,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, combineLatest, map, of, switchMap, tap } from "rxjs";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { combineLatest, map, of, switchMap, tap } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
-import { type LocalParticipant, type RemoteParticipant } from "livekit-client";
+import { type RemoteParticipant } from "livekit-client";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type Connection } from "./Connection.ts";
@@ -27,21 +21,18 @@ import { type ConnectionFactory } from "./ConnectionFactory.ts";
 export class ConnectionManagerData {
   private readonly store: Map<
     string,
-    [Connection, (LocalParticipant | RemoteParticipant)[]]
+    { connection: Connection; participants: RemoteParticipant[] }
   > = new Map();
 
   public constructor() {}
 
-  public add(
-    connection: Connection,
-    participants: (LocalParticipant | RemoteParticipant)[],
-  ): void {
+  public add(connection: Connection, participants: RemoteParticipant[]): void {
     const key = this.getKey(connection.transport);
     const existing = this.store.get(key);
     if (!existing) {
-      this.store.set(key, [connection, participants]);
+      this.store.set(key, { connection, participants });
     } else {
-      existing[1].push(...participants);
+      existing.participants.push(...participants);
     }
   }
 
@@ -50,60 +41,46 @@ export class ConnectionManagerData {
   }
 
   public getConnections(): Connection[] {
-    return Array.from(this.store.values()).map(([connection]) => connection);
+    return Array.from(this.store.values()).map(({ connection }) => connection);
   }
 
   public getConnectionForTransport(
     transport: LivekitTransport,
   ): Connection | null {
-    return this.store.get(this.getKey(transport))?.[0] ?? null;
+    return this.store.get(this.getKey(transport))?.connection ?? null;
   }
 
-  public getParticipantForTransport(
+  public getParticipantsForTransport(
     transport: LivekitTransport,
-  ): (LocalParticipant | RemoteParticipant)[] {
+  ): RemoteParticipant[] {
     const key = transport.livekit_service_url + "|" + transport.livekit_alias;
     const existing = this.store.get(key);
     if (existing) {
-      return existing[1];
+      return existing.participants;
     }
     return [];
   }
-  /**
-   * Get all connections where the given participant is publishing.
-   * In theory, there could be several connections where the same participant is publishing but with
-   * only well behaving clients a participant should only be publishing on a single connection.
-   * @param participantId
-   */
-  public getConnectionsForParticipant(
-    participantId: ParticipantId,
-  ): Connection[] {
-    const connections: Connection[] = [];
-    for (const [connection, participants] of this.store.values()) {
-      if (participants.some((p) => p.identity === participantId)) {
-        connections.push(connection);
-      }
-    }
-    return connections;
-  }
 }
+
 interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
   inputTransports$: Behavior<Epoch<LivekitTransport[]>>;
   logger: Logger;
 }
+
 // TODO - write test for scopes (do we really need to bind scope)
 export interface IConnectionManager {
-  transports$: Behavior<Epoch<LivekitTransport[]>>;
   connectionManagerData$: Behavior<Epoch<ConnectionManagerData>>;
-  connections$: Behavior<Epoch<Connection[]>>;
 }
+
 /**
  * Crete a `ConnectionManager`
- * @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.
+ * @param props - Configuration object
+ * @param props.scope - The observable scope used by this object
+ * @param props.connectionFactory - Used to create new connections
+ * @param props.inputTransports$ - A list of Behaviors each containing a LIST of LivekitTransport.
+ * @param props.logger - The logger to use
  *   Each of these behaviors can be interpreted as subscribed list of transports.
  *
  *   Using `registerTransports` independent external modules can control what connections
@@ -120,9 +97,6 @@ export function createConnectionManager$({
   logger: parentLogger,
 }: Props): IConnectionManager {
   const logger = parentLogger.getChild("[ConnectionManager]");
-
-  const running$ = new BehaviorSubject(true);
-  scope.onEnd(() => running$.next(false));
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
 
   /**
@@ -134,10 +108,7 @@ export function createConnectionManager$({
    * externally this is modified via `registerTransports()`.
    */
   const transports$ = scope.behavior(
-    combineLatest([running$, inputTransports$]).pipe(
-      map(([running, transports]) =>
-        transports.mapInner((transport) => (running ? transport : [])),
-      ),
+    inputTransports$.pipe(
       map((transports) => transports.mapInner(removeDuplicateTransports)),
       tap(({ value: transports }) => {
         logger.trace(
@@ -187,23 +158,25 @@ export function createConnectionManager$({
         const epoch = connections.epoch;
 
         // Map the connections to list of {connection, participants}[]
-        const listOfConnectionsWithPublishingParticipants =
-          connections.value.map((connection) => {
-            return connection.remoteParticipantsWithTracks$.pipe(
+        const listOfConnectionsWithRemoteParticipants = connections.value.map(
+          (connection) => {
+            return connection.remoteParticipants$.pipe(
               map((participants) => ({
                 connection,
                 participants,
               })),
             );
-          });
+          },
+        );
 
         // probably not required
-        if (listOfConnectionsWithPublishingParticipants.length === 0) {
+
+        if (listOfConnectionsWithRemoteParticipants.length === 0) {
           return of(new Epoch(new ConnectionManagerData(), epoch));
         }
 
         // combineLatest the several streams into a single stream with the ConnectionManagerData
-        return combineLatest(listOfConnectionsWithPublishingParticipants).pipe(
+        return combineLatest(listOfConnectionsWithRemoteParticipants).pipe(
           map(
             (lists) =>
               new Epoch(
@@ -220,7 +193,7 @@ export function createConnectionManager$({
     new Epoch(new ConnectionManagerData()),
   );
 
-  return { transports$, connectionManagerData$, connections$ };
+  return { connectionManagerData$ };
 }
 
 function removeDuplicateTransports(