fix: un-needed tsdoc script

* Use rtc-focus branch of js-sdk

* Update makeTransport to fetch backend transports and validate all transports before response.

* Fix test

* Add test

* Loads more tests

* Add tests for openid errors

* improve comment

* update to develop commit

* Add JWT parsing

* Use JWT

* Cleanup

* fixup tests

* fixup tests

* lint

* lint lint

* Fix `Reconnecting`

.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,10 +26,15 @@ 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",
-    // We should use the js-sdk logger, never console directly.
-    "no-console": ["error"],
     "react/display-name": "error",
     // Encourage proper usage of Promises:
     "@typescript-eslint/no-floating-promises": "error",
@@ -45,7 +50,56 @@ 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: [
+    {
+      files: ["src/*/**"],
+      rules: {
+        // In application code we should use the js-sdk logger, never console directly.
+        "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: {
       version: "detect",

.github/workflows/blocked.yaml

@@ -10,7 +10,7 @@ jobs:
       pull-requests: read
     steps:
       - name: Add notice
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7
         if: contains(github.event.pull_request.labels.*.name, 'X-Blocked')
         with:
           script: |

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

@@ -23,7 +23,7 @@ jobs:
       packages: write
     steps:
       - name: Check it out
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: 📥 Download artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -34,7 +34,7 @@ jobs:
           path: dist
 
       - name: Log in to container registry
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
+        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -42,7 +42,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
+        uses: docker/metadata-action@318604b99e75e41977312d83839a89be02ca4893 # v5.9.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: ${{ inputs.docker_tags}}
@@ -50,10 +50,10 @@ jobs:
             org.opencontainers.image.licenses=AGPL-3.0-only OR LicenseRef-Element-Commercial
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
+        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6.16.0
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

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

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

.github/workflows/changelog-label.yml

@@ -9,6 +9,6 @@ jobs:
     steps:
       - uses: yogevbd/enforce-label-action@a3c219da6b8fa73f6ba62b68ff09c469b3a1c024 # 2.2.2
         with:
-          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies"
+          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies,PR-Breaking-Change"
           REQUIRED_LABELS_ANY_DESCRIPTION: "Select at least one 'PR-' label"
           BANNED_LABELS: "banned"

.github/workflows/lint.yaml

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

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

@@ -44,6 +44,8 @@ jobs:
         run: |
           if [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
             echo "TAG=latest" >> "$GITHUB_OUTPUT"
+          elif [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+\-rc\.[0-9]+$ ]]; then
+            echo "TAG=rc" >> "$GITHUB_OUTPUT"
           else
             echo "TAG=other" >> "$GITHUB_OUTPUT"
           fi
@@ -83,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@da05d552573ad5aba039eaac05058a918a7bf631 # v2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -98,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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -124,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
@@ -142,7 +142,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -163,6 +163,8 @@ jobs:
         run: |
           if [[ "${{ needs.versioning.outputs.TAG }}" == "latest" ]]; then
             echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
+          elif [[ "${{ needs.versioning.outputs.TAG }}" == "rc" ]]; then
+            echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
           else
             echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}-SNAPSHOT" >> "$GITHUB_ENV"
           fi
@@ -195,7 +197,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           path: element-call
 
@@ -208,7 +210,7 @@ jobs:
           path: element-call/embedded/ios/Sources/dist
 
       - name: Checkout element-call-swift
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           repository: element-hq/element-call-swift
           path: element-call-swift
@@ -260,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@da05d552573ad5aba039eaac05058a918a7bf631 # 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@da05d552573ad5aba039eaac05058a918a7bf631 # v2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -68,7 +68,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Add release note
-        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # 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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache
@@ -22,7 +22,7 @@ jobs:
       - name: Vitest
         run: "yarn run test:coverage"
       - name: Upload to codecov
-        uses: codecov/codecov-action@18283e04ce6e62d37312384ff67231eb8fd56d24 # v5
+        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         with:
@@ -30,10 +30,10 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
-    timeout-minutes: 30
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # 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@11bd71901bbe5b1630ceea73d27597364c9af683 # 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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: Upload
         uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1

.gitignore

@@ -8,7 +8,9 @@ dist-ssr
 .idea/
 public/config.json
 backend/synapse_tmp/*
+backend/synapse_tmp_othersite/*
 /coverage
+config.json
 
 # Yarn
 yarn-error.log
@@ -27,4 +29,4 @@ yarn-error.log
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/.cache/

.node-version

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

README.md

@@ -143,7 +143,8 @@ via the `org.matrix.msc4143.rtc_foci` key, e.g.:
 where the format for MatrixRTC using LiveKit backend is defined in
 [MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md).
 In the example above Matrix clients do discover a focus of type `livekit` which
-points them to a Matrix LiveKit JWT Auth Service via `livekit_service_url`.
+points them to a [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+via `livekit_service_url`.
 
 ### Backend Selection
 
@@ -154,9 +155,9 @@ points them to a Matrix LiveKit JWT Auth Service via `livekit_service_url`.
   the **first participant who joined the call** defines via the `foci_preferred`
   key in their `org.matrix.msc3401.call.member` which actual MatrixRTC backend
   will be used for this call.
-- During the actual call join flow, the **LiveKit JWT Auth Service** provides
-  the client with the **LiveKit SFU WebSocket URL** and an **access JWT token**
-  in order to exchange media via WebRTC.
+- During the actual call join flow, the **[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)**
+  provides the client with the **LiveKit SFU WebSocket URL** and an
+  **access JWT token** in order to exchange media via WebRTC.
 
 The example below illustrates how backend selection works across **Matrix
 federation**, using the setup from sites A, B, and C. It demonstrates backend
@@ -205,22 +206,22 @@ See also:
 ### Backend
 
 A docker compose file `dev-backend-docker-compose.yml` is provided to start the
-whole stack of components which is required for a local development environment:
+whole stack of components which is required for a local development environment
+including federation:
 
-- Minimum Synapse Setup (servername: `synapse.m.localhost`)
-- LiveKit Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
-- Minimum LiveKit SFU Setup using dev defaults for config
-- Redis db for completeness
+- Minimum Synapse Setup (servernameis: `synapse.m.localhost`, `synapse.othersite.m.localhost`)
+- MatrixRTC Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
+- Minimum LiveKit SFU setup using dev defaults for config
 - Minimum `localhost` Certificate Authority (CA) for Transport Layer Security (TLS)
-  - Hostnames: `m.localhost`, `*.m.localhost`
+  - Hostnames: `m.localhost`, `*.m.localhost`, `*.othersite.m.localhost`
   - Add [./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt) to your web browsers trusted
     certificates
 - Minimum TLS reverse proxy for
-  - Synapse homeserver: `synapse.m.localhost`
-  - MatrixRTC backend: `matrix-rtc.m.localhost`
+  - Synapse homeserver: `synapse.m.localhost` and `synapse.othersite.m.localhost`
+  - MatrixRTC backend: `matrix-rtc.m.localhost` and `matrix-rtc.othersite.m.localhost`
   - Local Element Call development `call.m.localhost` via `yarn dev --host `
-  - Element Web `app.m.localhost`
-  - Note certificates will expire on Thu, 03 May 2035 10:32:02 GMT
+  - Element Web `app.m.localhost` and `app.othersite.m.localhost`
+  - Note certificates will expire on Thr, 20 September 2035 14:27:35 CEST
 
 These use a test 'secret' published in this repository, so this must be used
 only for local development and **_never be exposed to the public Internet._**

backend/dev_homeserver-othersite.yaml

@@ -0,0 +1,64 @@
+server_name: "synapse.othersite.m.localhost"
+public_baseurl: https://synapse.othersite.m.localhost/
+
+pid_file: /data/homeserver.pid
+
+listeners:
+  - port: 18008
+    tls: false
+    type: http
+    x_forwarded: true
+    resources:
+      - names: [client, federation, openid]
+        compress: false
+
+database:
+  name: sqlite3
+  args:
+    database: /data/homeserver.db
+
+media_store_path: /data/media_store
+signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
+trusted_key_servers:
+  - server_name: "synapse.m.localhost"
+    accept_keys_insecurely: true
+
+experimental_features:
+  # MSC3266: Room summary API. Used for knocking over federation
+  msc3266_enabled: true
+  # MSC4222 needed for syncv2 state_after. This allow clients to
+  # correctly track the state of the room.
+  msc4222_enabled: true
+
+# The maximum allowed duration by which sent events can be delayed, as
+# per MSC4140. Must be a positive value if set.  Defaults to no
+# duration (null), which disallows sending delayed events.
+max_event_delay_duration: 24h
+
+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+report_stats: false
+serve_server_wellknown: true
+
+# Ratelimiting settings for client actions (registration, login, messaging).
+#
+# Each ratelimiting configuration is made of two parameters:
+#   - per_second: number of requests a client can send per second.
+#   - burst_count: number of requests a client can send before being throttled.
+
+rc_message:
+  # This needs to match at least the heart-beat frequency plus a bit of headroom
+  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
+  per_second: 0.5
+  burst_count: 30

backend/dev_homeserver.yaml

@@ -19,8 +19,18 @@ database:
 
 media_store_path: /data/media_store
 signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation.
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
 trusted_key_servers:
-  - server_name: "matrix.org"
+  - server_name: "synapse.othersite.m.localhost"
+    accept_keys_insecurely: true
 
 experimental_features:
   # MSC3266: Room summary API. Used for knocking over federation
@@ -28,12 +38,21 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
+  # sticky events for matrixRTC user state
+  msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
 # duration (null), which disallows sending delayed events.
 max_event_delay_duration: 24h
 
+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+report_stats: false
+serve_server_wellknown: true
+
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
 # Each ratelimiting configuration is made of two parameters:
@@ -45,10 +64,3 @@ rc_message:
   # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
   per_second: 0.5
   burst_count: 30
-
-# Required for Element Call in Single Page Mode due to on-the-fly user registration
-enable_registration: true
-enable_registration_without_verification: true
-
-report_stats: false
-serve_server_wellknown: true

backend/dev_livekit-othersite.yaml

@@ -0,0 +1,20 @@
+port: 17880
+bind_addresses:
+  - "0.0.0.0"
+rtc:
+  tcp_port: 17881
+  port_range_start: 50300
+  port_range_end: 50400
+  use_external_ip: false
+turn:
+  enabled: false
+  domain: localhost
+  cert_file: ""
+  key_file: ""
+  tls_port: 5349
+  udp_port: 443
+  external_tls: true
+keys:
+  devkey: secret
+room:
+  auto_create: false

backend/dev_livekit.yaml

@@ -6,11 +6,6 @@ rtc:
   port_range_start: 50100
   port_range_end: 50200
   use_external_ip: false
-#redis:
-#    address: redis:6379
-#    username: ""
-#    password: ""
-#    db: 0
 turn:
   enabled: false
   domain: localhost
@@ -21,3 +16,5 @@ turn:
   external_tls: true
 keys:
   devkey: secret
+room:
+  auto_create: false

backend/dev_nginx.conf

@@ -1,4 +1,5 @@
 # Synapse reverse proxy including .well-known/matrix/client
+# domain synapse.m.localhost
 server {
     listen                  80;
     listen                  [::]:80;
@@ -26,14 +27,53 @@ server {
     # This is also required for development environment.
     # Reason: the lk-jwt-service uses the federation API for the openid token
     #         verification, which requires TLS
-    location / {
-        proxy_pass "http://homeserver:8008";
+    location ~ ^(/_matrix|/_synapse/client)  {
+        proxy_pass "http://homeserver:8008";       
         proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
         proxy_set_header X-Forwarded-For $remote_addr;
         proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;                
+    }
+
+    error_page   500 502 503 504  /50x.html;
+
+}
+
+# Synapse reverse proxy including .well-known/matrix/client
+# domain synapse.othersite.m.localhost
+server {
+    listen                  80;
+    listen                  [::]:80;
+    listen                  443 ssl;
+    listen                  8448 ssl;
+    listen                  [::]:443 ssl;
+    listen                  [::]:8448 ssl;
+    server_name             synapse.othersite.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+    # well-known config adding rtc_foci backend
+    # Note well-known is currently not effective due to:
+    # https://spec.matrix.org/v1.12/client-server-api/#well-known-uri the spec
+    # says it must be at https://$server_name/... (implied port 443) Hence, we
+    # currently rely for local development environment on deprecated config.json
+    # setting for livekit_service_url
+    location /.well-known/matrix/client {
+        add_header Access-Control-Allow-Origin *;
+        return 200 '{"m.homeserver": {"base_url": "https://synapse.othersite.m.localhost"}, "org.matrix.msc4143.rtc_foci": [{"type": "livekit", "livekit_service_url": "https://matrix-rtc.othersite.m.localhost/livekit/jwt"}]}';
+        default_type application/json;
+    }
+
+    # Reverse proxy for Matrix Synapse Homeserver
+    # This is also required for development environment.
+    # Reason: the lk-jwt-service uses the federation API for the openid token
+    #         verification, which requires TLS
+    location ~ ^(/_matrix|/_synapse/client)  {
+        proxy_pass "http://homeserver-1:18008";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;                
     }
 
     error_page   500 502 503 504  /50x.html;
@@ -41,6 +81,7 @@ server {
 }
 
 # MatrixRTC reverse proxy
+# domain matrix-rtc.m.localhost
 # - MatrixRTC Authorization Service
 # - LiveKit SFU websocket signaling connection
 upstream jwt-auth-services {
@@ -49,16 +90,14 @@ upstream jwt-auth-services {
 }
 
 server {
-    listen                  80;
-    listen                  [::]:80;
     listen                  443 ssl;
     listen                  [::]:443 ssl;
-    listen                  8448 ssl;
-    listen                  [::]:8448 ssl;
     server_name             matrix-rtc.m.localhost;
     ssl_certificate         /root/ssl/cert.pem;
     ssl_certificate_key     /root/ssl/key.pem;
 
+    http2 on;
+
 
     location ^~ /livekit/jwt/ {
 
@@ -94,6 +133,54 @@ server {
 
 }
 
+# MatrixRTC reverse proxy
+# domain matrix-rtc.othersite.m.localhost
+# - MatrixRTC Authorization Service
+# - LiveKit SFU websocket signaling connection
+server {
+    listen                  443 ssl;
+    listen                  [::]:443 ssl;
+    server_name             matrix-rtc.othersite.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+    http2 on;
+
+
+    location ^~ /livekit/jwt/ {
+
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      # JWT Service running at port 16080
+      proxy_pass http://auth-service-1:16080/;
+    
+    }
+
+    location ^~ /livekit/sfu/ {
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      proxy_send_timeout 120;
+      proxy_read_timeout 120;
+      proxy_buffering off;
+
+      proxy_set_header Accept-Encoding gzip;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+
+      # LiveKit SFU websocket connection running at port 17880
+      proxy_pass http://livekit-sfu-1:17880/;
+    }
+    
+    error_page   500 502 503 504  /50x.html;
+
+}
+
 # Convenience reverse proxy for the call.m.localhost domain to yarn dev --host
 server {
     listen                  80;
@@ -159,3 +246,36 @@ server {
     error_page   500 502 503 504  /50x.html;
 
 }
+
+# Convenience reverse proxy app.othersite.m.localhost for element web
+server {
+    listen                  80;
+    listen                  [::]:80;
+    server_name             app.othersite.m.localhost;
+
+    return 301 https://$host$request_uri;
+}
+
+server {
+    listen                  443 ssl;
+    listen                  [::]:443 ssl;
+    server_name             app.othersite.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+
+    location ^~ / {
+
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      proxy_pass http://element-web-1:18081;
+      proxy_ssl_verify              off;
+
+    }
+    
+    error_page   500 502 503 504  /50x.html;
+
+}

backend/dev_tls_local-ca.crt

@@ -1,19 +1,19 @@
 -----BEGIN CERTIFICATE-----
-MIIDGjCCAgKgAwIBAgIUGdiFHhH4KL2pqBjMQHQ+PVIkSV8wDQYJKoZIhvcNAQEL
-BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA1MDUxMDMy
-MDJaFw0zNTA1MDMxMDMyMDJaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg
-Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDA2y0hjmNn1vRsVSdy
-8IOfo8N1q9UgkhQWpGKXzPh+D5d1fnuJEmHIVwtDEtS/PwQ43LTmegChPtKH9jdT
-tG0IihW9Ja5YNG+9xAwaoA/sB3CGCBYsz+2/XjVUpXoBJXIPoFBWsn+K0oeFw9fw
-eRO1z9abM4cl+LjKzMNM8CCyu9uI1MaGjYez2YIWvG854VucLxX7HSlMJxZNWnie
-Ui7fMakuJhB2+aiIQjdKxy4E5RHNhzYG/LXhvP+wBYBDPNRsP3rtzEaE9HAveL9K
-FGqd3R4cBia6r1WIXmpAzyu5RGP5Eou0TZlGkal96/bF0I7q/pKlL23Jt1BLPiQU
-KGKrAgMBAAGjUDBOMB0GA1UdDgQWBBQJqBjMu61c1p24txw/y+kv3D+V6DAfBgNV
-HSMEGDAWgBQJqBjMu61c1p24txw/y+kv3D+V6DAMBgNVHRMEBTADAQH/MA0GCSqG
-SIb3DQEBCwUAA4IBAQB8m2YfFGLugNt5vAAOvNxVqDA8c72yCVYr3CBCpmTIEY5Z
-d3qVGhG9//ux6+J8ntkSwd9nV5GJyYXHukCG1VavnAWolWdNF/WAllf0jhLuz7kD
-/cJnuI1By4tBsBmSz851i6HJ4t5k99Be+6GQVzi0e7zzfxTHZE4xP2J6Ox8QbPsP
-n0m76nIp/WbWaJqzvIIjJhmUUPPv+4wN+eOArgjiGLzptM2qTtGZtd0c9nS5gvep
-+mEbSUN9zkhAroZf80wf+hEvy+fJ94VbZ9QjTzTg7odZLrsXGIe8DaG63EYRQ25b
-W5iYBAreln5fGSt7qHsGfqwZibTEk/Lx3dydO1Kg
+MIIDGjCCAgKgAwIBAgIUbSbx+1UGptOTGefqEn7Zh3yoChIwDQYJKoZIhvcNAQEL
+BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA5MjIxMjI3
+MzVaFw0zNTA5MjAxMjI3MzVaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg
+Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDHODfkrFsOkqCnXnTb
+QWz3LkUtNCoVvM7wFouirRnITJYG+lFwF+zNl89Eaq+uUN4bwd8ml1ZuR9p+1azC
+SlklD5adhCR/ErknfUWamQEf6amSs3p0NnqnhXbnDEEbQOwNaPU/aGc6aw0+I9O6
+NQ/H830GlVuKd24Bfv0mx6Imo0Hi9jxKYhqFh80nmltk2uyXefaJxuo1jXBhwLyC
+DW8RVj55QvkZyBUzid8yslxrlo0LHKCCjZflwJJv5f+jaubkH5c0qxVaoR4+Liyt
+X/4viIwt3Mhj04ppudTvt973mTbjRG5haCz9y7OkT1mMWhc0xrdMFX+gjPERYS2H
+Ru/RAgMBAAGjUDBOMB0GA1UdDgQWBBTXNfLAKVayGQda/JZLPszrpz6LVzAfBgNV
+HSMEGDAWgBTXNfLAKVayGQda/JZLPszrpz6LVzAMBgNVHRMEBTADAQH/MA0GCSqG
+SIb3DQEBCwUAA4IBAQCvGfyopHHgZB+horGH6i/Xg41V+r4d0o092F1Lfr4vh86e
+XMakRw92vsyk/iWOnLPNPcpVWzPcvINaCs/bahgnGSOAnrA4jjcXqymyGIy/6xc5
+1EeZAxehiL9E5q4LQ841HDX0gps4ZzUO1BRYQcjG9Rdts83JO2ekkfHkZdNj2eQr
+KOrr92Na1/w+EQdo/T9Rs2ES623xKEOxPqb8d/rx5Z4DdeuGx1u+3AfS76Lpo4ni
+EJ0g1ImqdSUtiOLzeCQh6pqqb+vuFbxAyeyYSAJ49847EtFBvZCmWmPL2JICg9uq
+7rKW/qDfEK9GUs0GWCs3+mJkNvOOxBwtMuQrL7ZF
 -----END CERTIFICATE-----

backend/dev_tls_local-ca.key

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDA2y0hjmNn1vRs
-VSdy8IOfo8N1q9UgkhQWpGKXzPh+D5d1fnuJEmHIVwtDEtS/PwQ43LTmegChPtKH
-9jdTtG0IihW9Ja5YNG+9xAwaoA/sB3CGCBYsz+2/XjVUpXoBJXIPoFBWsn+K0oeF
-w9fweRO1z9abM4cl+LjKzMNM8CCyu9uI1MaGjYez2YIWvG854VucLxX7HSlMJxZN
-WnieUi7fMakuJhB2+aiIQjdKxy4E5RHNhzYG/LXhvP+wBYBDPNRsP3rtzEaE9HAv
-eL9KFGqd3R4cBia6r1WIXmpAzyu5RGP5Eou0TZlGkal96/bF0I7q/pKlL23Jt1BL
-PiQUKGKrAgMBAAECggEAAPX2kxi5AQ7ul82SzT1KgpSXyDHLdYaUyAoYnaX9RO+B
-8ylmpyeqygs4+KQS4EMJm9jpo85Oy37bIKdG3kljU6wQcKlL5Y+ZUOo1nzpV6fid
-hGVs6ts8VXw8KshKQ9AyccZ8L/pirUfgOffgTwfjY7/90zceAL/s98GuZWc62nkX
-55joQv/OikqYfAGP/U6Bp2Zyf23DwJB09Z3B6NnZj/ZyAbDrDEHuA15LhCOcCczp
-IU/mFEywBPHT9Tg4w4Beq78PeAETvku2UalYRLhP3RLlXr2oEbwUtINRVt2QjZ85
-Esps4uCqL/mgQluIebtudD9HL/YMlNPXue1mDXFxJQKBgQDgZZY4yJBcf488T1V6
-HNm06b/LvVGj253pKgw14hpY1xQu3Ymgzv1GEqzhSYdzxhpmj0tMUNHxAp+YdGQu
-SZ0wcPKhw0aYVkIjDRYDC3Wn5GJhyIEYHGYMo/n4l49UzHRBPOTDzp49DkHTKBgh
-XgIIazYT3CkjTIMRrkUv+qfIPQKBgQDcBGu/mqbjxs4sN3zqPS4aB21o6t6W0sXs
-ZP9w6RlTPQi5U2oRbftjZtYc0bbEgkMUImB1HwYPQT5pJ+MyC414xDvSc2exBr5d
-To6yyPIy78Tf5PHM12fpKV92nSvoz/pSjYcGxxDtKfPqu+t8mOJfjCV1lLLA+xuB
-DDaE4p8dBwKBgQCdAne6A5v/HMH8UQZeCxHJpESvKiiVnnU/UEx651nID7XvlNNX
-0X0mKqsMd4ZvW43ddSYan/JF0LAa3FW8jYWO/3jF9vzOWoysOdvNBZetgf/Uq5ao
-aDZ/YbzmVCXWD7jIbPMkjs3pqrAkL0mzDzQc7+dGviWKrV6IYIfIqnn7gQKBgDCz
-vdIk/qpO+JZrFfiX4Fucp0hhLTJ/p5ZDaRPqVVPKn+K+Jy2ChfIj8mNgvK9VEloj
-nexvGJ1J2PHYBX+vdPp1nbRhHWPfVUY8PHQw7QP/dToGaMvqJrNDGEGeWvjnCMc7
-UtdaO1H0Rm0AegkTopB56lTTvJnhO95eALd7nrMDAoGAEPdzJtWoKafp49svhSj0
-hiXQv2SPBwVUN4LZ4SOWiXUcmYYm80aNpYKLkBxYjrfqFWhE7NUHLGp8YorQWKY2
-acD9AReHk/xku0ABy6jeYmSCmCxASxst5liKD+l12sk0gB0rk5MBxB4Uu1MIbQZ2
-aCASX3AVD2/XyC2MKkzc8Eg=
+MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDHODfkrFsOkqCn
+XnTbQWz3LkUtNCoVvM7wFouirRnITJYG+lFwF+zNl89Eaq+uUN4bwd8ml1ZuR9p+
+1azCSlklD5adhCR/ErknfUWamQEf6amSs3p0NnqnhXbnDEEbQOwNaPU/aGc6aw0+
+I9O6NQ/H830GlVuKd24Bfv0mx6Imo0Hi9jxKYhqFh80nmltk2uyXefaJxuo1jXBh
+wLyCDW8RVj55QvkZyBUzid8yslxrlo0LHKCCjZflwJJv5f+jaubkH5c0qxVaoR4+
+LiytX/4viIwt3Mhj04ppudTvt973mTbjRG5haCz9y7OkT1mMWhc0xrdMFX+gjPER
+YS2HRu/RAgMBAAECggEABhB9CxYAE5p9D3s9nWsJcSDUdELRQSYlOoPFLmeMkF9c
+dcvq7LmduMh1Q8TnoivOBxRIwbj7pZHEYfYJM0TmH82wrQzXu5KLVltm4gTkVt9b
+DR8vjBgYdb8HVpM17Cl2xhW62XpJIiseFRUsHc/9sf2Egc3MIpPuIleGR0budbSW
+ybBkqEokTYTSiAztcu3G+VN0U9MsJgLMa8HApya7M48ojdrhzngVHZRUOXul9o7u
+zYJWSxPHIIYp5C4pYQBAx8OttThwKK1A9lwbQ2EJx0KnTbBC6O5Gna/jENpGd1h2
+rzK/9MONtsjln7IejP+4mDlNupS6SF3zzHPBHjqKAQKBgQDtXUIKPiVTFS45yWtK
+XD62s3j8jfIi+22b/C30fCPtppn0cm/0zY+vovgWVUBnQXkExafRthZCuxnE8ry7
+E29S40+4z9yivAC9dz7vHZUbyIFP6VG9WyhUYo+/WqOIePyh+iBISQ9TA1DneIYz
++VZ8iU5GvdybUPl2C5WN8seaoQKBgQDW3EwVN2EEkChLRJbQYN2qpjn+0vYESMJ8
+K0sgMRtgh4+/T2Xb9b8O/dd87Fi/4oaUqWZ2E2sdsXq8P/IEo0cv6SRfHMy7GyxL
+RM7ztwUfMC4LVWi0ZIXMrm4gRDGN2XjGvhkX6fU2lSf6azWL1K3wI3amNV2b7P7d
+ItpvdkH3MQKBgQCXf29YJEQkXB9t6J3fDzND3xb4cwy5wSo7ZeBa7CTuWOhoeeX1
+JIJyAp0/e9goT0SThChRlFtu6gZPivJkoMnr6IOInLrg7we15fc4HPR/kCDgxTVT
+m2wJOAMxigNYZogwRfn2yRLL1BD+PBHD+H936xcX1bSJOUyPSGOC/xLhIQKBgQCb
+kCDd85ygyycBaAWxlZCor3WqFF/fNjbp5Aaepi9mMoBXSUs8eK7+UbelURHozEAY
+fpYaw3B4rTlp9vppdTZjb+/PlXB9v+zQCl+0gTyKGj4cIpiOk4F0co51eipOw7f4
+XUaZ0+CgxlmNq/W26iONjH+pU1YVQQA+Z6+zp/GW4QKBgQCrzYgeugxxqgJzyIRu
+0njJkIg+T5gHvsQrtpzq7LVob+HBiBiT7eDOeGDXTK8F//sk969QVrDMQsTMvGW9
+sG1oTqxciALTMqkJTf8+hT9Uogir0/iTbJUzTt5vPYpQOEQwQHIXMUTjZ9C6NDKT
+QlmeMCxeWyPYqoMfwKmdtDP/Iw==
 -----END PRIVATE KEY-----

backend/dev_tls_m.localhost.crt

@@ -1,21 +1,21 @@
 -----BEGIN CERTIFICATE-----
-MIIDZzCCAk+gAwIBAgIUXizLjwkdqepX0bh0K3abeJxj68IwDQYJKoZIhvcNAQEL
-BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA1MDUxMzU5
-MTFaFw0zNTA1MDMxMzU5MTFaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi
-MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCrzGSScSgaQuZdELGFYiLiYRwr
-LKyUdNr0rsPcOo0bvbeZ3zQMeUMRNlA69zGFdarumiDRXUoAmZI39WmH95aX3d+A
-U7EFnWev7xpWSVhSYj8T0d4rke8HjGk3LpaffJ93tbJuagBIH1ouuN6AOdzWs8hp
-RYIomWleEeeuVnnfaMwaXOdc+ihJJ6wzm2hwQSfdpjZPWBDd/DFft1ZXxIZOCjDs
-rEIiI7uU8iZPLB3QEM/tgxSSAOxrcKvQvxZokk+FD7aMJFP71IfieLCEzMTP1VXa
-tP7UTAKAqB2NyDJ8m3IHbOINiqcdFvFR3R1D9bXOYE4oRynNvYZrQUGnL2RtAgMB
-AAGjgaIwgZ8wHwYDVR0jBBgwFoAUCagYzLutXNaduLccP8vpL9w/legwCQYDVR0T
-BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwMAYDVR0RBCkw
-J4IJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdDAdBgNVHQ4E
-FgQUfdh1p52ZgWyZcBgBXGwKi4EnUE0wDQYJKoZIhvcNAQELBQADggEBAKrHEuB6
-33j8+EwSHw3zrvt/DRXK2BDHI1Ir9JcztSunaKAjZXVvf/dvZp0Xs1dEdJIdnv6G
-iZYhBbOqDqpQZbf2h/h0kuu5yZSBUdnQXnYNxlhp2UaC/UEgw5iZT/p1rm7RjVie
-y4Dp2WytV5iZOLmLj6xDvd3DXazgJPWIRX8p8qJZbKTkwCjTr7nDIj8jjG1sVFf7
-1RJBO5/6WSnImrpDmlLUrvjiKvbxcdseDJyBOhTwdRdSk4S2M+s5tR5j2I1gXLOq
-J5ioN76+SCrTY0K0WKRy9oOXWO1/X3+VYcekp+0F3SGkd5w17jylCv1XIGHAdEsQ
-v2z2/aMI/7sAD2Q=
+MIIDgDCCAmigAwIBAgIUT9NYpZbrAKokSPSTE3zzsAMowvEwDQYJKoZIhvcNAQEL
+BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA5MjIxMjI3
+MzVaFw0zNTA5MjAxMjI3MzVaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi
+MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDK1DNwTQWmyK71Ar56NvmSMQ8s
+qUY3jGqqPVORjfDUtDCrPPdCxT+ZlnsAgdonElWoWqczMrSyBRgfJlZMd4lEvt6V
+EEiZGUvA/lG1XIVgrx1kMSHKBoJj7lCBN6r3IWmYe6CxgfZurgp+7Z22i6cGMOnQ
+0XduX5Asup6zk5V7AE6i9eKrJsUjYmRBXtk099IitkER4TMqh6WxJmFF+eV9P/ax
+fxkon+bQWITwP1PLC1UOTK7lR0EcVan5aY6WMs/6RfO4Gw/dvuiVG1jCrVcaKNGT
+PYqmQqs+MOvyIqJ9kYELRZu+6bhPWSXk2ESpSIUIPH9twfnmWrncneIJR24/AgMB
+AAGjgbswgbgwHwYDVR0jBBgwFoAU1zXywClWshkHWvyWSz7M66c+i1cwCQYDVR0T
+BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwSQYDVR0RBEIw
+QIIJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdIIXKi5vdGhl
+cnNpdGUubS5sb2NhbGhvc3QwHQYDVR0OBBYEFIkGX+cEJ1ISKIwuT1zzp7uHJ90e
+MA0GCSqGSIb3DQEBCwUAA4IBAQBnnnfB7KmyYo16ZYUCmoqGhbM4p8npeYTh5ySb
+K01YwGCnMU1qGfJnKHaRwQ2+KtVGZnpBdjmsHcOUetA3V2BirPaYowMCMtaI36LD
+LnxvboSZLX0mgEYuN7HmxW4a7fSelDecTYa7xti1sNhE/w8xW7Lky046/DousyUy
+d9x3wJ183GGj1W2p6bR1E4sqTr/VbmoULQxnqA3GUNOxW3lRL5e8lQ6jJVRmMF4k
+92BtMPrI/m7jwHj0f/WBLI8mdJ/O/W/NxQOG475FZePDfrg+MkeXPChPggf42/ou
+AMm56FNB7e1l0b1Fots730RfpCPuXpiAxL4pisS0X1dMVeeM
 -----END CERTIFICATE-----

backend/dev_tls_m.localhost.key

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCrzGSScSgaQuZd
-ELGFYiLiYRwrLKyUdNr0rsPcOo0bvbeZ3zQMeUMRNlA69zGFdarumiDRXUoAmZI3
-9WmH95aX3d+AU7EFnWev7xpWSVhSYj8T0d4rke8HjGk3LpaffJ93tbJuagBIH1ou
-uN6AOdzWs8hpRYIomWleEeeuVnnfaMwaXOdc+ihJJ6wzm2hwQSfdpjZPWBDd/DFf
-t1ZXxIZOCjDsrEIiI7uU8iZPLB3QEM/tgxSSAOxrcKvQvxZokk+FD7aMJFP71Ifi
-eLCEzMTP1VXatP7UTAKAqB2NyDJ8m3IHbOINiqcdFvFR3R1D9bXOYE4oRynNvYZr
-QUGnL2RtAgMBAAECggEAJaFQii8U/KOYt9vXNoMnZvSkaeSQLLhn2V6Kciu1CtWE
-aMTWLsFE6nk+G5xXkYcTmM3T0GghtH3u5CjyI6EcsEkeEorCZJt0wbmayDmqiekR
-LfMzOdHuTHX5+edPgMGYYG1BFyRKyYFsjH1b5zRFZhXdGQnrl5760GsVlz9D1KZQ
-iHcT+q1S2tmZeoUukQnADENKXUMCyTGM5FCddgNtsWnGDsTDayh7hUdvDkB+mW4G
-lSp+BZuc3PCwpbD6qkXvfugWs6CUAAtXoV3ceWgxQ+TEnNlwxaG1AyugfgNUBolk
-8xgeZt4r5QId03jsHDf7hpBAofcaCd5EMIIQYFvWoQKBgQDlbAvAzEFPTZZn2nRV
-Xagw4xjqVc1LLEKLCWq0N5rEkwn0h90Dz5N7/3NuonP/sIDsDHCbyiOYBI1Ck6Xi
-0WuB+OyKDh+xeF2mekN9G9ywPahdK5lT/TVsxXFyZlwtVv1x/6KBO4yv5URizxqU
-gyAPDDxfD/KcNjkOBaodWEwQGQKBgQC/s2gPDBtQkjLwkHXchBomLww5eLlVrac1
-WK4UX6uSdOgrjJ375OOgMTxe8NVZdOuAKytGXRWDwgH3nVWvuZhe7dGlX3JMuSer
-e9VwDpBESrvqcR4ruL6wm8wej6BXyjH0wD3FHb0S5HfuBDxTn+4bDwrbRzOUMNgy
-lSppuflxdQKBgQDiZcIfazFT8evn5nMAvuC4BZNTxIJHmZC9JfjPiUPIkpWzYtOe
-7BvNtKOT3Op9uw8uYYRKqKqBXJSNy6ha8XCXHS9HeXKbLn20SFkLQBCDNwVLlDfF
-40zyXtF6JDr4XyzSb4NM5pgKCER5AYloXxGm59s3sEQpFXUuOjbKqJS/GQKBgAoI
-c7vF4HAZFr1sch62cz/oWnVvkhOf4Q5zs7ixQSOLJtOQqnwSgK9TpFs7s47ZBbJR
-kBRAru2Ua9Hv1Bo8VnMxczV6h1roneDlvEf/GyHX33nnrbKQGrrXjJlU3wl5NaAf
-p5v3cHvapUQ5yIZ/6lBUOzc6xMJOxCHxmKSr7Rg5AoGAbEE4lt6Xh2dnBPJ81eNI
-IDrw/3ITY53qAY4Bx88CByIFuu8CEUdUZprh98jSl6ic1tMinZfUhRMwABLrUD51
-DGst8iGLPD9u83iMcUHI/L+p7AbxrKLvWXZrF5UZm440c9mSWqfhPaTBosPtNDsG
-LfETwH1flKXMTXd2xA9RTE4=
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDK1DNwTQWmyK71
+Ar56NvmSMQ8sqUY3jGqqPVORjfDUtDCrPPdCxT+ZlnsAgdonElWoWqczMrSyBRgf
+JlZMd4lEvt6VEEiZGUvA/lG1XIVgrx1kMSHKBoJj7lCBN6r3IWmYe6CxgfZurgp+
+7Z22i6cGMOnQ0XduX5Asup6zk5V7AE6i9eKrJsUjYmRBXtk099IitkER4TMqh6Wx
+JmFF+eV9P/axfxkon+bQWITwP1PLC1UOTK7lR0EcVan5aY6WMs/6RfO4Gw/dvuiV
+G1jCrVcaKNGTPYqmQqs+MOvyIqJ9kYELRZu+6bhPWSXk2ESpSIUIPH9twfnmWrnc
+neIJR24/AgMBAAECggEANRp6vzfDN4gKWoaV5TyYegCTNv+4rRl74cd9pjmx6Jam
+uWaUXCx1etpNqPPWcG1Z9OKLLRnk+kjgKGOqq4mObGvGreNeBot7bHOJZADtwMMI
+YG+Gp7StlclS1YoEHoDmezA/AcqDgTXa9KF0rdMBb1sGFJCLAuBNSJCxtVV6CQIz
+X26uT0m+Wx8MQyQWA7Sqy6DQNJo++IZkvr7a3cidqBOUPs+QvnIV5JsUb2gp5tGn
+zk+ObeRjoFFWYAN/NK7bneRenkP40m3MSL8ZfaEuuonui7CrxM1SiQyq2N1u/Aoy
+OE1JtNaVPbLBo6kG5al7Sj4Z0zhRt+iv93S2lZMkBQKBgQD2+FpLTqyLO1NDOFkE
+kxU+LdLOx0OV9wASC0ApPOu1dHMG6ksByr7TWeiu6GJDgajusPB7NVPOt2cm4iWU
+xPxXPO5l87uiSvu80h5uG4Qdj8KEijHkdap2wbVkU/mm8lBKC36jyBQIlJKySyXY
+zSEMfLK9jQPKz5cKKT3dVj/fAwKBgQDSPq9oks6K96MAB66o6cm214otQlnTQkPM
+xgjtjddX+Lp9tgihGvtSfPbyy89oUDHCfKvW/AHG52e5dec5YUi6mVdHEWbk33Kt
+BoQuxeK3XseIDlD/JD9Dd7KfUyO5w2jtYLfNdqez41O4qj2N52m1KwJYTwMsc8Kq
+izVgkC5hFQKBgBFAc/5CtqbbNAvECePZ6mf3h3xOSxhUsrqP8qFu0gBQ7CAVibvM
+T9wvsaNWNFcG3age0A2rQfl0sk3zCjEEOaRWa0jP59GEb2VXQCzs2yO9gRcFGEsf
+NRMqoOMrQos47gbeGrCSL2QSDNVLjo9AdQiMRWgcS6GFMsXQ77NgbQHFAoGBAI4a
+YGTGFWRITJvQlXUFz5kNxg8hMaVgvILDt3UY0dxb+XDOgLajjgsK+77Pkrhmu7tA
+mMUOQAU4kxr/XfGil43H5v3Z/Tnk7ZWVOfKDPeHC5gpH4ucQkNIBLXISt6rvMRSA
+srrk4CTuGcBPEJvBNemF0Gfvv61j8MdkoAdMbIyhAoGAfGR6yZLBmRMsW5PKmcpT
+nq2oSeUpmtGZra6pWz/3XU7AgrCLcx1DmqEjm4w7y5NQJmxyMZqqdTJILCjr3Srt
++2F0NqQL6Li+xQGibAvDj0Jxyol38RvFC0J/w2vQmuF0hTuH95yknSd7FPXK+DPG
+qYgXLjun9dht6kx9vGJ69wI=
 -----END PRIVATE KEY-----

backend/dev_tls_setup

@@ -34,5 +34,6 @@ subjectAltName = @alt_names
 DNS.1 = localhost
 DNS.2 = m.localhost
 DNS.3 = *.m.localhost
+DNS.4 = *.othersite.m.localhost
 EOF
 )

backend/ew.test.othersite.config.json

@@ -0,0 +1,53 @@
+{
+  "default_server_config": {
+    "m.homeserver": {
+      "base_url": "https://synapse.othersite.m.localhost",
+      "server_name": "synapse.othersite.m.localhost"
+    }
+  },
+  "disable_custom_urls": false,
+  "disable_guests": false,
+  "disable_login_language_selector": false,
+  "disable_3pid_login": false,
+  "force_verification": false,
+  "brand": "Element",
+  "integrations_ui_url": "https://scalar.vector.im/",
+  "integrations_rest_url": "https://scalar.vector.im/api",
+  "integrations_widgets_urls": [
+    "https://scalar.vector.im/_matrix/integrations/v1",
+    "https://scalar.vector.im/api",
+    "https://scalar-staging.vector.im/_matrix/integrations/v1",
+    "https://scalar-staging.vector.im/api",
+    "https://scalar-staging.riot.im/scalar/api"
+  ],
+  "default_widget_container_height": 280,
+  "default_country_code": "GB",
+  "show_labs_settings": false,
+  "features": {
+    "feature_element_call_video_rooms": true,
+    "feature_video_rooms": true,
+    "feature_group_calls": true,
+    "feature_release_announcement": false
+  },
+  "default_federate": true,
+  "default_theme": "light",
+  "room_directory": {
+    "servers": ["matrix.org"]
+  },
+  "enable_presence_by_hs_url": {
+    "https://matrix.org": false,
+    "https://matrix-client.matrix.org": false
+  },
+  "setting_defaults": {
+    "breadcrumbs": true,
+    "feature_group_calls": true
+  },
+  "jitsi": {
+    "preferred_domain": "meet.element.io"
+  },
+  "element_call": {
+    "participant_limit": 8,
+    "brand": "Element Call"
+  },
+  "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
+}

backend/playwright_homeserver-othersite.yaml

@@ -0,0 +1,81 @@
+server_name: "synapse.othersite.m.localhost"
+public_baseurl: https://synapse.othersite.m.localhost/
+
+pid_file: /data/homeserver.pid
+
+listeners:
+  - port: 18008
+    tls: false
+    type: http
+    x_forwarded: true
+    resources:
+      - names: [client, federation, openid]
+        compress: false
+
+database:
+  name: sqlite3
+  args:
+    database: /data/homeserver.db
+
+media_store_path: /data/media_store
+signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation.
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
+trusted_key_servers:
+  - server_name: "synapse.m.localhost"
+    accept_keys_insecurely: true
+
+experimental_features:
+  # MSC3266: Room summary API. Used for knocking over federation
+  msc3266_enabled: true
+  # MSC4222 needed for syncv2 state_after. This allow clients to
+  # correctly track the state of the room.
+  msc4222_enabled: true
+
+# The maximum allowed duration by which sent events can be delayed, as
+# per MSC4140. Must be a positive value if set.  Defaults to no
+# duration (null), which disallows sending delayed events.
+max_event_delay_duration: 24h
+
+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+report_stats: false
+serve_server_wellknown: true
+
+# Ratelimiting settings for client actions (registration, login, messaging).
+#
+# Each ratelimiting configuration is made of two parameters:
+#   - per_second: number of requests a client can send per second.
+#   - burst_count: number of requests a client can send before being throttled.
+
+rc_message:
+  per_second: 10000
+  burst_count: 10000
+
+rc_delayed_event_mgmt:
+  per_second: 10000
+  burst_count: 10000
+
+rc_login:
+  address:
+    per_second: 10000
+    burst_count: 10000
+  account:
+    per_second: 10000
+    burst_count: 10000
+  failed_attempts:
+    per_second: 10000
+    burst_count: 10000
+
+rc_registration:
+  per_second: 10000
+  burst_count: 10000

backend/playwright_homeserver.yaml

@@ -19,8 +19,18 @@ database:
 
 media_store_path: /data/media_store
 signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation.
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
 trusted_key_servers:
-  - server_name: "matrix.org"
+  - server_name: "synapse.othersite.m.localhost"
+    accept_keys_insecurely: true
 
 experimental_features:
   # MSC3266: Room summary API. Used for knocking over federation
@@ -34,6 +44,13 @@ experimental_features:
 # duration (null), which disallows sending delayed events.
 max_event_delay_duration: 24h
 
+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+report_stats: false
+serve_server_wellknown: true
+
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
 # Each ratelimiting configuration is made of two parameters:
@@ -44,6 +61,10 @@ rc_message:
   per_second: 10000
   burst_count: 10000
 
+rc_delayed_event_mgmt:
+  per_second: 10000
+  burst_count: 10000
+
 rc_login:
   address:
     per_second: 10000
@@ -58,10 +79,3 @@ rc_login:
 rc_registration:
   per_second: 10000
   burst_count: 10000
-
-# Required for Element Call in Single Page Mode due to on-the-fly user registration
-enable_registration: true
-enable_registration_without_verification: true
-
-report_stats: false
-serve_server_wellknown: true

backend/redis.conf

@@ -1,5 +0,0 @@
-bind 0.0.0.0
-protected-mode yes
-port 6379
-timeout 0
-tcp-keepalive 300

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",

dev-backend-docker-compose.yml

@@ -14,6 +14,7 @@ services:
       # If the configured homeserver runs on localhost, it'll probably be using
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
     deploy:
       restart_policy:
         condition: on-failure
@@ -23,8 +24,31 @@ services:
     networks:
       - ecbackend
 
+  auth-service-1:
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    pull_policy: always
+    hostname: auth-server-1
+    environment:
+      - LIVEKIT_JWT_PORT=16080
+      - LIVEKIT_URL=wss://matrix-rtc.othersite.m.localhost/livekit/sfu
+      - LIVEKIT_KEY=devkey
+      - LIVEKIT_SECRET=secret
+      # If the configured homeserver runs on localhost, it'll probably be using
+      # a self-signed certificate
+      - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
+    deploy:
+      restart_policy:
+        condition: on-failure
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 16080:16080
+    networks:
+      - 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
     restart: unless-stopped
@@ -42,20 +66,30 @@ services:
     networks:
       - ecbackend
 
-  redis:
-    image: redis:6-alpine
-    command: redis-server /etc/redis.conf
+  livekit-1:
+    image: livekit/livekit-server:v1.9.4
+    pull_policy: always
+    hostname: livekit-sfu-1
+    command: --dev --config /etc/livekit.yaml
+    restart: unless-stopped
+    # The SFU seems to work far more reliably when we let it share the host
+    # network rather than opening specific ports (but why?? we're not missing
+    # any…)
     ports:
       # HOST_PORT:CONTAINER_PORT
-      - 6379:6379
+      - 17880:17880/tcp
+      - 17881:17881/tcp
+      - 17882:17882/tcp
+      - 50300-50400:50300-50400/udp
     volumes:
-      - ./backend/redis.conf:/etc/redis.conf:Z
+      - ./backend/dev_livekit-othersite.yaml:/etc/livekit.yaml:Z
     networks:
       - ecbackend
 
   synapse:
     hostname: homeserver
     image: docker.io/matrixdotorg/synapse:latest
+    pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
       # Needed for rootless podman-compose such that the uid/gid mapping does
@@ -70,6 +104,24 @@ services:
     networks:
       - ecbackend
 
+  synapse-1:
+    hostname: homeserver-1
+    image: docker.io/matrixdotorg/synapse:latest
+    pull_policy: always
+    environment:
+      - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
+      # Needed for rootless podman-compose such that the uid/gid mapping does
+      # fit local user uid. If the container runs as root (uid 0) it is fine as
+      # it actually maps to your non-root user on the host (e.g. 1000).
+      # Otherwise uid mapping will not match your non-root user.
+      - UID=0
+      - GID=0
+    volumes:
+      - ./backend/synapse_tmp_othersite:/data:Z
+      - ./backend/dev_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
+    networks:
+      - ecbackend
+
   element-web:
     image: ghcr.io/element-hq/element-web:develop
     pull_policy: always
@@ -82,10 +134,24 @@ services:
     networks:
       - ecbackend
 
+  element-web-1:
+    image: ghcr.io/element-hq/element-web:develop
+    pull_policy: always
+    volumes:
+      - ./backend/ew.test.othersite.config.json:/app/config.json:Z
+    environment:
+      ELEMENT_WEB_PORT: 18081
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - "18081:18081"
+    networks:
+      - ecbackend
+
   nginx:
     #  see backend/dev_tls_setup for how to generate the tls certs
     hostname: synapse.m.localhost
     image: nginx:latest
+    pull_policy: always
     volumes:
       - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z
       - ./backend/dev_tls_m.localhost.key:/root/ssl/key.pem:Z
@@ -101,4 +167,9 @@ services:
     depends_on:
       - synapse
     networks:
-      - ecbackend
+      ecbackend:
+        aliases:
+          - synapse.m.localhost
+          - synapse.othersite.m.localhost
+          - matrix-rtc.m.localhost
+          - matrix-rtc.othersite.m.localhost

docs/self-hosting.md

@@ -64,7 +64,7 @@ rc_delayed_event_mgmt:
 ```
 
 As a prerequisite for the
-[Matrix LiveKit JWT auth service](https://github.com/element-hq/lk-jwt-service)
+[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
 make sure that your Synapse server has either a `federation` or `openid`
 [listener configured](https://element-hq.github.io/synapse/latest/usage/configuration/config_documentation.html#listeners).
 
@@ -77,7 +77,7 @@ required for each site deployment.
 
 As depicted above in the `example.com` site deployment, Element Call requires a
 [Livekit SFU](https://github.com/livekit/livekit) alongside a
-[Matrix Livekit JWT auth service](https://github.com/element-hq/lk-jwt-service)
+[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
 to implement
 [MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md).
 
@@ -89,7 +89,7 @@ the example above, this results in:
 | Service | Endpoint | Example |
 | -------- | ------- | ------- |
 | [Livekit SFU](https://github.com/livekit/livekit) WebSocket signalling connection | `/livekit/sfu` | `matrix-rtc.example.com/livekit/sfu` |
-| [Matrix Livekit JWT auth service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
+| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
 
 Using Nginx, you can achieve this by:
 
@@ -102,7 +102,7 @@ server {
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
 
-      # JWT Service running at port 8080
+      # MatrixRTC Authorization Service running at port 8080
       proxy_pass http://localhost:8080/;
     }
 
@@ -126,6 +126,32 @@ server {
 }
 ```
 
+Or Using Caddy, you can achieve this by:
+
+```caddy configuration file
+# Route for lk-jwt-service with livekit/jwt prefix
+@jwt_service path /livekit/jwt/sfu/get /livekit/jwt/healthz
+handle @jwt_service {
+  uri strip_prefix /livekit/jwt
+  reverse_proxy http://[::1]:8080 {
+    header_up Host {host}
+    header_up X-Forwarded-Server {host}
+    header_up X-Real-IP {remote_host}
+    header_up X-Forwarded-For {remote_host}
+  }
+}
+
+# Default route for livekit
+handle {
+  reverse_proxy http://localhost:7880 {
+    header_up Host {host}
+    header_up X-Forwarded-Server {host}
+    header_up X-Real-IP {remote_host}
+    header_up X-Forwarded-For {remote_host}
+  }
+}
+```
+
 #### MatrixRTC backend announcement
 
 > [!IMPORTANT]
@@ -145,10 +171,6 @@ server {
     {
         "type": "livekit",
         "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
-    },
-    {
-        "type": "nextgen_new_foci_type",
-        "props_for_nextgen_foci": "val"
     }
 ]
 ```
@@ -218,7 +240,7 @@ server {
 There are currently two different config files. `.env` holds variables that are
 used at build time, while `public/config.json` holds variables that are used at
 runtime. Documentation and default values for `public/config.json` can be found
-in [ConfigOptions.ts](src/config/ConfigOptions.ts).
+in [ConfigOptions.ts](../src/config/ConfigOptions.ts).
 
 > [!CAUTION]
 > Please note configuring MatrixRTC backend via `config.json` of
@@ -261,6 +283,7 @@ self-hosters and developers working with Element Call.
 - [MatrixRTC with Synology Container Manager (Docker)](https://ztfr.de/matrixrtc-with-synology-container-manager-docker/)
 - [Encrypted & Scalable Video Calls: How to deploy an Element Call backend with Synapse Using Docker-Compose](https://willlewis.co.uk/blog/posts/deploy-element-call-backend-with-synapse-and-docker-compose/)
 - [Element Call einrichten: Verschlüsselte Videoanrufe mit Element X und Matrix Synapse](https://www.cleveradmin.de/blog/2025/04/matrixrtc-element-call-backend-einrichten/)
+- [MatrixRTC Back-End for Synapse with Docker Compose and Traefik](https://forge.avontech.net/kstro1/matrixrtc-docker-traefik/)
 
 ## 🛠️ Tools
 

docs/url-params.md

@@ -48,6 +48,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 
 | Name                                                    | Values                                                                                               | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
 | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intent`                                                | `start_call`, `join_existing`, `start_call_dm`, `join_existing_dm.                                   | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent is a special url parameter that defines the defaults for all the other parameters. In most cases it should be enough to only set the intent to setup element-call.                                                                                                                                                                                                                       |
 | `allowIceFallback`                                      | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
 | `analyticsID` (deprecated: use `posthogUserId` instead) | Posthog analytics ID                                                                                 | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
 | `appPrompt`                                             | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
@@ -59,7 +60,6 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `header`                                                | `none`, `standard` or `app_bar`                                                                      | No, defaults to `standard`                                                                        | No, defaults to `standard`   | The style of headers to show. `standard` is the default arrangement, `none` hides the header entirely, and `app_bar` produces a header with a back button like you might see in mobile apps. The callback for the back button is `window.controls.onBackButtonPressed`.                                                                                                                             |
 | `hideScreensharing`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
 | `homeserver`                                            |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
-| `intent`                                                | `start_call` or `join_existing`                                                                      | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent of the user with respect to the call. e.g. if they clicked a Start Call button, this would be `start_call`. If it was a Join Call button, it would be `join_existing`.                                                                                                                                                                                                                   |
 | `lang`                                                  | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
 | `password`                                              |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
 | `perParticipantE2EE`                                    | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
@@ -70,6 +70,8 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `theme`                                                 | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
 | `viaServers`                                            | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
 | `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
+| `autoLeaveWhenOthersLeft`                               | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
+| `waitForCallPickup`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
 
 ### Widget-only parameters
 
@@ -94,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.0"
+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.33.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.35.0" }

embedded/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

embedded/android/lib/build.gradle.kts

@@ -5,8 +5,6 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import com.vanniktech.maven.publish.SonatypeHost
-
 plugins {
     alias(libs.plugins.android.library)
     alias(libs.plugins.maven.publish)
@@ -27,7 +25,7 @@ android {
 }
 
 mavenPublishing {
-    publishToMavenCentral(SonatypeHost.CENTRAL_PORTAL, automaticRelease = true)
+    publishToMavenCentral(automaticRelease = true)
 
     signAllPublications()
 

i18next-parser.config.ts

@@ -1,4 +1,6 @@
-export default {
+import type { UserConfig } from "i18next-parser";
+
+const config: UserConfig = {
   keySeparator: ".",
   namespaceSeparator: false,
   contextSeparator: "|",
@@ -26,3 +28,5 @@ export default {
   input: ["src/**/*.{ts,tsx}"],
   sort: true,
 };
+
+export default config;

knip.ts

@@ -1,8 +1,15 @@
-import { KnipConfig } from "knip";
+/*
+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 KnipConfig } from "knip";
 
 export default {
   vite: {
-    config: ["vite.config.js", "vite-embedded.config.js"],
+    config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
   },
   entry: ["src/main.tsx", "i18next-parser.config.ts"],
   ignoreBinaries: [

locales/cs/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Zobrazit možnost sluchátek pro iPhone na všech platformách",
     "crypto_version": "Kryptografická verze: {{version}}",
     "debug_tile_layout_label": "Ladění rozložení dlaždic",
     "device_id": "ID zařízení: {{id}}",
@@ -81,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Volání není podporováno",
     "call_not_found": "Volání nebylo nalezeno",
-    "call_not_found_description": "<0>Zdá se, že tento odkaz nepatří k žádnému existujícímu volání. Zkontrolujte, zda máte správný odkaz, nebo <1>vytvořte nový</1>.</0>",
+    "call_not_found_description": "<0>Zdá se, že tento odkaz nepatří k žádnému existujícímu hovoru. Zkontrolujte, zda máte správný odkaz, nebo<2> vytvořte nový</2>.</0>",
     "connection_lost": "Spojení ztraceno",
     "connection_lost_description": "Hovor byl přerušen.",
     "e2ee_unsupported": "Nekompatibilní prohlížeč",
@@ -104,6 +105,11 @@
     "knock_reject_heading": "Přístup odepřen",
     "reason": "Důvod"
   },
+  "handset": {
+    "overlay_back_button": "Zpět do režimu reproduktoru",
+    "overlay_description": "Funguje pouze při používání aplikace",
+    "overlay_title": "Režim sluchátka"
+  },
   "hangup_button_label": "Ukončit hovor",
   "header_label": "Domov Element Call",
   "header_participants_label": "Účastníci",
@@ -173,8 +179,11 @@
     "devices": {
       "camera": "Fotoaparát",
       "camera_numbered": "Fotoaparát {{n}}",
+      "change_device_button": "Změnit zvukové zařízení",
       "default": "Výchozí",
       "default_named": "Výchozí <2> ({{name}}) </2>",
+      "handset": "Sluchátko",
+      "loudspeaker": "Reproduktor",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Reproduktor",

locales/da/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Vis mulighed for iPhone-høretelefon på alle platforme",
     "crypto_version": "Krypto-version: {{version}}",
     "debug_tile_layout_label": "Fejlfinding af fliselayout",
     "device_id": "Enheds-id: {{id}}",
@@ -70,6 +71,7 @@
     "livekit_server_info": "LiveKit Serverinfo",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
+    "mute_all_audio": "Slå al lyd fra (deltagere, reaktioner, deltagelseslyde)",
     "show_connection_stats": "Vis forbindelsesstatistik",
     "show_non_member_tiles": "Vis fliser for medier fra ikke-medlemmer",
     "url_params": "URL-parametre",
@@ -80,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Opkald er ikke understøttet",
     "call_not_found": "Opkald ikke fundet",
-    "call_not_found_description": "<0>Det link ser ikke ud til at høre til et eksisterende opkald. Tjek at du har det rigtige link, eller<1> opret et nyt</1>.</0>",
+    "call_not_found_description": "<0>Det link ser ikke ud til at høre til et eksisterende opkald. Tjek at du har det rigtige link, eller <2> opret et nyt</2>.</0>",
     "connection_lost": "Forbindelsen gik tabt",
     "connection_lost_description": "Du blev afbrudt fra opkaldet.",
     "e2ee_unsupported": "Inkompatibel browser",
@@ -92,6 +94,8 @@
     "matrix_rtc_focus_missing": "Serveren er ikke konfigureret til at arbejde med {{brand}}{{domain}}. Kontakt venligst din serveradministrator (domæne:{{domain}}, fejlkode: {{ errorCode }}).",
     "open_elsewhere": "Åbnet i en anden fane",
     "open_elsewhere_description": "{{brand}} er blevet åbnet i en anden fane. Hvis det ikke lyder rigtigt, kan du prøve at genindlæse siden.",
+    "room_creation_restricted": "Kunne ikke oprette opkald",
+    "room_creation_restricted_description": "Oprettelse af opkald er muligvis begrænset til autoriserede brugere. Prøv igen senere, eller kontakt din serveradministrator, hvis problemet fortsætter.",
     "unexpected_ec_error": "Der opstod en uventet fejl (<0>Fejlkode:</0> <1> {{ errorCode }}</1>). Kontakt venligst din serveradministrator."
   },
   "group_call_loader": {
@@ -103,6 +107,11 @@
     "knock_reject_heading": "Adgang nægtet",
     "reason": "Årsag: {{reason}}"
   },
+  "handset": {
+    "overlay_back_button": "Tilbage til højttalertilstand",
+    "overlay_description": "Virker kun, når du bruger appen",
+    "overlay_title": "Telefon-højtaler"
+  },
   "hangup_button_label": "Afslut opkald",
   "header_label": "Element Ring hjem",
   "header_participants_label": "Deltagere",
@@ -164,12 +173,18 @@
       "effect_volume_description": "Juster den lydstyrke som reaktioner og håndsoprækninger afspilles med.",
       "effect_volume_label": "Lydstyrke for lydeffekter"
     },
+    "background_blur_header": "Baggrund",
+    "background_blur_label": "Gør videoens baggrund sløret",
+    "blur_not_supported_by_browser": "(Baggrundssløring understøttes ikke af denne enhed.)",
     "developer_tab_title": "Udvikler",
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Skift lydenhed",
       "default": "Standard",
       "default_named": "Standard <2>({{name}})</2>",
+      "handset": "Telefon",
+      "loudspeaker": "Højttaler",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Højttaler",

locales/de/app.json

@@ -55,6 +55,7 @@
     "profile": "Profil",
     "reaction": "Reaktion",
     "reactions": "Reaktionen",
+    "reconnecting": "Verbindung wird wiederhergestellt...",
     "settings": "Einstellungen",
     "unencrypted": "Nicht verschlüsselt",
     "username": "Benutzername",
@@ -82,7 +83,7 @@
   "error": {
     "call_is_not_supported": "Anrufe werden nicht unterstützt",
     "call_not_found": "Anruf nicht gefunden",
-    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <1> erstellen Sie einen neuen</1>. </0>",
+    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Es sollte geprüft werden, ob der Link korrekt ist, oder <2>ein neuer erstellt werden</2>.</0>",
     "connection_lost": "Verbindung verloren",
     "connection_lost_description": "Ihre Verbindung zum Anruf wurde unterbrochen.",
     "e2ee_unsupported": "Inkompatibler Browser",
@@ -94,6 +95,8 @@
     "matrix_rtc_focus_missing": "Der Server ist nicht für die Verwendung mit {{brand}} konfiguriert. Bitte den Serveradministrator kontaktieren (Domain: {{domain}}, Fehlercode: {{ errorCode }}).",
     "open_elsewhere": "In einem anderen Tab geöffnet",
     "open_elsewhere_description": "{{brand}} wurde in einem anderen Tab geöffnet. Wenn das nicht richtig klingt, versuchen Sie, die Seite neu zu laden.",
+    "room_creation_restricted": "Anruf konnte nicht erstellt werden",
+    "room_creation_restricted_description": "Das Erstellen von Anrufen ist nur für autorisierte Nutzer möglich. Versuche es später erneut oder kontaktiere deinen Serveradministrator, falls das Problem weiterhin besteht.",
     "unexpected_ec_error": "Ein unerwarteter Fehler ist aufgetreten (<0>Fehlercode: </0> <1>{{ errorCode }}</1>). Bitte den Serveradministrator kontaktieren."
   },
   "group_call_loader": {
@@ -105,6 +108,11 @@
     "knock_reject_heading": "Zugriff verweigert",
     "reason": "Grund: {{reason}}"
   },
+  "handset": {
+    "overlay_back_button": "Zurück zum Lautsprechermodus",
+    "overlay_description": "Nur wenn App im Vordergrund nutzbar",
+    "overlay_title": "Ohrhörer Modus"
+  },
   "hangup_button_label": "Anruf beenden",
   "header_label": "Element Call-Startseite",
   "header_participants_label": "Teilnehmende",
@@ -173,9 +181,11 @@
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Audiogerät wechseln",
       "default": "Standard",
       "default_named": "Standard<2> ({{name}} )</2>",
-      "earpiece": "Ohrhörer",
+      "handset": "Ohrhörer",
+      "loudspeaker": "Lautsprecher",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon{{n}}",
       "speaker": "Lautsprecher",

locales/en/app.json

@@ -55,6 +55,7 @@
     "profile": "Profile",
     "reaction": "Reaction",
     "reactions": "Reactions",
+    "reconnecting": "Reconnecting…",
     "settings": "Settings",
     "unencrypted": "Not encrypted",
     "username": "Username",
@@ -63,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",
@@ -71,19 +80,26 @@
     "livekit_server_info": "LiveKit Server Info",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
+    "matrixRTCMode": {
+      "Comptibility": {
+        "description": "Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)",
+        "label": "Compatibility: state events & multi SFU"
+      },
+      "Legacy": {
+        "description": "Compatible with old versions of EC that do not support multi SFU",
+        "label": "Legacy: state events & oldest membership SFU"
+      },
+      "Matrix_2_0": {
+        "description": "Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later",
+        "label": "Matrix 2.0: sticky events & multi SFU"
+      },
+      "title": "MatrixRTC mode"
+    },
     "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
     "show_connection_stats": "Show connection statistics",
-    "show_non_member_tiles": "Show tiles for non-member media",
-    "url_params": "URL parameters",
-    "use_new_membership_manager": "Use the new implementation of the call MembershipManager",
-    "use_to_device_key_transport": "Use to device key transport. This will fallback to room key transport when another call member sent a room key"
+    "url_params": "URL parameters"
   },
   "disconnected_banner": "Connectivity to the server has been lost.",
-  "earpiece": {
-    "overlay_back_button": "Back to Speaker Mode",
-    "overlay_description": "Only works while using app",
-    "overlay_title": "Earpiece Mode"
-  },
   "error": {
     "call_is_not_supported": "Call is not supported",
     "call_not_found": "Call not found",
@@ -92,13 +108,18 @@
     "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_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
+    "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",
+    "room_creation_restricted_description": "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists.",
     "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
   },
   "group_call_loader": {
@@ -110,6 +131,11 @@
     "knock_reject_heading": "Access denied",
     "reason": "Reason: {{reason}}"
   },
+  "handset": {
+    "overlay_back_button": "Back to Speaker Mode",
+    "overlay_description": "Only works while using app",
+    "overlay_title": "Handset Mode"
+  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -181,7 +207,7 @@
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
-      "earpiece": "Earpiece",
+      "handset": "Handset",
       "loudspeaker": "Loudspeaker",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",

locales/et/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Näita iPhone'i kuulari valikut kõikidel platvormidel",
     "crypto_version": "Krüptoteekide versioon: {{version}}",
     "debug_tile_layout_label": "Meediapaanide paigutus",
     "device_id": "Seadme tunnus: {{id}}",
@@ -81,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Kõne pole toetatud",
     "call_not_found": "Kõnet ei leidu",
-    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <1>loo uus</1>.</0>",
+    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <2>loo uus</2>.</0>",
     "connection_lost": "Ühendus on katkenud",
     "connection_lost_description": "Sinu ühendus selle kõnega on katkenud.",
     "e2ee_unsupported": "Mitteühilduv brauser",
@@ -93,6 +94,8 @@
     "matrix_rtc_focus_missing": "See server pole seadistatud töötama rakendusega {{brand}}. Palun võta ühendust serveri halduriga (domeen: {{domain}}, veakood: {{ errorCode }}).",
     "open_elsewhere": "Avatud teisel vahekaardil",
     "open_elsewhere_description": "{{brand}} on avatud teisel vahekaardil. Kui see ei tundu olema õige, proovi selle lehe uuesti laadimist.",
+    "room_creation_restricted": "Kõne loomine ei õnnestunud",
+    "room_creation_restricted_description": "Kõne loomine võib olla lubatud ainult volitatud kasutajatele. Proovi hiljem uuesti või probleemi püsimisel võta ühendust oma serveri haldajaga.",
     "unexpected_ec_error": "Tekkis ootamatu viga (<0>Veakood:</0> <1>{{ errorCode }}</1>). Palun võta ühendust serveri haldajaga."
   },
   "group_call_loader": {
@@ -104,6 +107,10 @@
     "knock_reject_heading": "Liitumine pole lubatud",
     "reason": "Põhjus"
   },
+  "handset": {
+    "overlay_back_button": "Tagasi esineja vaatesse",
+    "overlay_description": "See toimib vaid rakenduse kasutamise ajal"
+  },
   "hangup_button_label": "Lõpeta kõne",
   "header_label": "Avaleht: Element Call",
   "header_participants_label": "Osalejad",
@@ -172,8 +179,10 @@
     "devices": {
       "camera": "Kaamera",
       "camera_numbered": "Kaamera {{n}}",
+      "change_device_button": "Muuda heliseadet",
       "default": "Vaikimisi",
       "default_named": "Vaikimisi <2>({{name}})</2>",
+      "loudspeaker": "Valjuhääldi",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Kõlar",

locales/ru/app.json

@@ -61,6 +61,7 @@
     "video": "Видео"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Показать опцию наушников для iPhone на всех платформах",
     "crypto_version": "Версия криптографии: {{version}}",
     "debug_tile_layout_label": "Отладка расположения плиток",
     "device_id": "Идентификатор устройства: {{id}}",
@@ -70,6 +71,7 @@
     "livekit_server_info": "Информация о сервере LiveKit",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
+    "mute_all_audio": "Отключить все звуки (участников, реакции, звуки присоединения)",
     "show_connection_stats": "Показать статистику подключений",
     "show_non_member_tiles": "Показать плитки для медиафайлов, не являющихся участниками",
     "url_params": "Параметры URL-адреса",
@@ -172,6 +174,7 @@
     "devices": {
       "camera": "Камера",
       "camera_numbered": "Камера {{n}}",
+      "change_device_button": "Изменить аудиоустройство",
       "default": "По умолчанию",
       "default_named": "По умолчанию <2>({{name}})</2>",
       "microphone": "Микрофон",

locales/sk/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Zobraziť možnosť slúchadla iPhone na všetkých platformách",
     "crypto_version": "Krypto verzia: {{version}}",
     "debug_tile_layout_label": "Ladenie rozloženia dlaždíc",
     "device_id": "ID zariadenia: {{id}}",
@@ -81,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Hovor nie je podporovaný",
     "call_not_found": "Hovor nebol nájdený",
-    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <1> vytvorte nový</1>. </0>",
+    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <2>vytvorte nový</2>.</0>",
     "connection_lost": "Strata spojenia",
     "connection_lost_description": "Boli ste odpojení od hovoru.",
     "e2ee_unsupported": "Nekompatibilný prehliadač",
@@ -173,8 +174,10 @@
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Zmeniť zvukové zariadenie",
       "default": "Predvolené",
       "default_named": "Predvolené <2>({{name}})</2>",
+      "loudspeaker": "Reproduktor",
       "microphone": "Mikrofón",
       "microphone_numbered": "Mikrofón {{n}}",
       "speaker": "Reproduktor",

locales/sv/app.json

@@ -61,6 +61,7 @@
     "video": "Video"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Visa iPhone-hörsnäckealternativ på alla plattformar",
     "crypto_version": "Kryptoversion: {{version}}",
     "debug_tile_layout_label": "Felsök panelarrangemang",
     "device_id": "Enhets-ID: {{id}}",
@@ -70,6 +71,7 @@
     "livekit_server_info": "LiveKit-serverinfo",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix-ID: {{id}}",
+    "mute_all_audio": "Tysta allt ljud (deltagare, reaktioner, anslutningsljud)",
     "show_connection_stats": "Visa anslutningsstatistik",
     "show_non_member_tiles": "Visa paneler för media som inte är medlemmar",
     "url_params": "URL-parametrar",
@@ -80,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Call stöds inte",
     "call_not_found": "Samtal hittades inte",
-    "call_not_found_description": "<0>Den länken verkar inte tillhöra något befintligt samtal. Kontrollera att du har rätt länk, eller <1>skapa en ny</1>.</0>",
+    "call_not_found_description": "<0>Den länken verkar inte tillhöra något befintligt samtal. Kontrollera att du har rätt länk, eller <2>skapa en ny</2>.</0>",
     "connection_lost": "Anslutning förlorad",
     "connection_lost_description": "Du kopplades bort från samtalet.",
     "e2ee_unsupported": "Inkompatibel webbläsare",
@@ -92,6 +94,8 @@
     "matrix_rtc_focus_missing": "Servern är inte konfigurerad för att fungera med {{brand}}. Vänligen kontakta serveradministratören (Domän: {{domain}}, Felkod: {{ errorCode }}).",
     "open_elsewhere": "Öppnades i en annan flik",
     "open_elsewhere_description": "{{brand}} har öppnats i en annan flik. Om det inte låter rätt, pröva att ladda om sidan.",
+    "room_creation_restricted": "Misslyckades att skapa samtal",
+    "room_creation_restricted_description": "Samtalsskapande kan vara begränsat till endast behöriga användare. Försök igen senare eller kontakta serveradministratören om problemet kvarstår.",
     "unexpected_ec_error": "Ett oväntat fel inträffade (<0>Felkod:</0> <1>{{ errorCode }}</1>). Kontakta din serveradministratör."
   },
   "group_call_loader": {
@@ -103,6 +107,11 @@
     "knock_reject_heading": "Inte tillåten att gå med",
     "reason": "Anledning"
   },
+  "handset": {
+    "overlay_back_button": "Tillbaka till högtalarläge",
+    "overlay_description": "Fungerar bara när appen används",
+    "overlay_title": "Telefonläge"
+  },
   "hangup_button_label": "Avsluta samtal",
   "header_label": "Element Call Hem",
   "header_participants_label": "Deltagare",
@@ -164,12 +173,18 @@
       "effect_volume_description": "Justera volymen vid vilken reaktioner och handuppräckningseffekter spelas",
       "effect_volume_label": "Ljudeffektsvolym"
     },
+    "background_blur_header": "Bakgrund",
+    "background_blur_label": "Gör bakgrunden i videon suddig",
+    "blur_not_supported_by_browser": "(Bakgrundssuddighet stöds inte av den här enheten.)",
     "developer_tab_title": "Utvecklare",
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Byt ljudenhet",
       "default": "Förval",
       "default_named": "Förval <2>({{name}})</2>",
+      "handset": "Telefonlur",
+      "loudspeaker": "Högtalare",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Högtalare",

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 .",
@@ -44,17 +46,17 @@
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
-    "@livekit/protocol": "^1.38.0",
+    "@livekit/protocol": "^1.42.2",
     "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/core": "^2.0.0",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.202.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.52.0",
+    "@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",
@@ -71,7 +73,7 @@
     "@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",
@@ -81,7 +83,7 @@
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^4.0.0",
+    "@vector-im/compound-design-tokens": "^6.0.0",
     "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",
@@ -93,12 +95,14 @@
     "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",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-unicorn": "^56.0.0",
+    "fetch-mock": "11.1.5",
     "global-jsdom": "^26.0.0",
     "i18next": "^24.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
@@ -108,8 +112,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=develop",
-    "matrix-widget-api": "^1.13.0",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#2218ec4e3102e841ba3e794e1c492c0a5aa6c1c3",
+    "matrix-widget-api": "^1.14.0",
+    "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
@@ -129,9 +134,10 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^6.0.0",
+    "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-backend-docker-compose.override.yml

@@ -2,3 +2,6 @@ services:
   synapse:
     volumes:
       - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+  synapse-1:
+    volumes:
+      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z

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/create-call.spec.ts

@@ -40,6 +40,11 @@ test("Start a new call then leave and show the feedback screen", async ({
   // The tooltip with the name should be visible
   await expect(page.getByTestId("name_tag")).toContainText("John Doe");
 
+  // Resize the window to resemble a small mobile phone
+  await page.setViewportSize({ width: 350, height: 660 });
+  // We should still be able to send reactions at this screen size
+  await expect(page.getByRole("button", { name: "Reactions" })).toBeVisible();
+
   // leave the call
   await page.getByTestId("incall_leave").click();
   await expect(page.getByRole("heading")).toContainText(

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("/");
 
@@ -72,3 +74,61 @@ test("Should automatically retry non fatal JWT errors", async ({
   await hasRetriedPromise;
   await expect(page.getByTestId("video").first()).toBeVisible();
 });
+
+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.
+  // Instead, we will trick the app by returning a bad URL for the SFU that will not be reachable an error out.
+  await page.route(
+    "**/matrix-rtc.m.localhost/livekit/jwt/sfu/get",
+    async (route) =>
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          url: "wss://badurltotricktest/livekit/sfu",
+          jwt: createJTWToken("@fake:user", "!fake:room"),
+        }),
+      }),
+  );
+
+  // Then if the socket connection fails, livekit will try to validate the token!
+  // Livekit will not auto_create anymore and will return a 404 error.
+  await page.route(
+    "**/badurltotricktest/livekit/sfu/rtc/validate?**",
+    async (route) =>
+      await route.fulfill({
+        status: 404,
+        contentType: "text/plain",
+        body: "requested room does not exist",
+      }),
+  );
+
+  await page.pause();
+
+  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();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+
+  await page.pause();
+  // Should fail
+  await expect(page.getByText("Failed to create call")).toBeVisible();
+  await expect(
+    page.getByText(
+      /Call creation might be restricted to authorized users only/,
+    ),
+  ).toBeVisible();
+});

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,8 +166,12 @@ export const widgetTest = test.extend<MyFixtures>({
     } = await registerUser(browser, userB);
 
     // Invite the second user
-    await ewPage1.getByRole("button", { name: "Add room" }).click();
-    await ewPage1.getByText("New room").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();
     await expect(ewPage1.getByText("You created this room.")).toBeVisible();
@@ -184,9 +195,9 @@ export const widgetTest = test.extend<MyFixtures>({
 
     // Accept the invite
     await expect(
-      ewPage2.getByRole("treeitem", { name: "Welcome Room" }),
+      ewPage2.getByRole("option", { name: "Welcome Room" }),
     ).toBeVisible();
-    await ewPage2.getByRole("treeitem", { name: "Welcome Room" }).click();
+    await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
     await ewPage2.getByRole("button", { name: "Accept" }).click();
     await expect(
       ewPage2.getByRole("main").getByRole("heading", { name: "Welcome Room" }),

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/reconnect.spec.ts

@@ -0,0 +1,60 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+
+// Skip test for Firefox, due to page.keyboard.press("Tab") not reliable on headless mode
+test.skip(
+  ({ browserName }) => browserName === "firefox",
+  'This test is not working on firefox, page.keyboard.press("Tab") not reliable in headless mode',
+);
+
+test("can only interact with header and footer while reconnecting", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill("Test call");
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill("Test user");
+  // If we do not call fastForward here, we end up with Date.now() returning an actual timestamp
+  // but once we call `await page.clock.fastForward(20000);` later this will reset Date.now() to 0
+  // and we will never get into probablyDisconnected state?
+  await page.clock.fastForward(10);
+  await page.getByTestId("home_go").click();
+
+  await expect(page.locator("video")).toBeVisible();
+  await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+
+  // The media tile for the local user should become visible
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  await expect(page.getByTestId("name_tag")).toContainText("Test user");
+
+  // Now disconnect from the internet
+  await page.route("https://synapse.m.localhost/**/*", async (route) => {
+    await new Promise((resolve) => setTimeout(resolve, 10000));
+    await route.continue();
+  });
+  await page.clock.fastForward(20000);
+
+  await expect(
+    page.getByRole("dialog", { name: "Reconnecting…" }),
+  ).toBeVisible();
+
+  // Tab order should jump directly from header to footer, skipping media tiles
+  await page.getByRole("button", { name: "Mute microphone" }).focus();
+  await expect(
+    page.getByRole("button", { name: "Mute microphone" }),
+  ).toBeFocused();
+  await page.keyboard.press("Tab");
+  await expect(page.getByRole("button", { name: "Stop video" })).toBeFocused();
+  // Most critically, we should be able to press the hangup button
+  await page.getByRole("button", { name: "End call" }).click();
+});

playwright/restricted-sfu.spec.ts

@@ -0,0 +1,75 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+import { sleep } from "matrix-js-sdk/lib/utils.js";
+
+test("Should request JWT token before starting the call", async ({ page }) => {
+  await page.goto("/");
+
+  let sfGetTimestamp = 0;
+  let sendStateEventTimestamp = 0;
+  await page.route(
+    "**/matrix-rtc.m.localhost/livekit/jwt/sfu/get",
+    async (route) => {
+      await sleep(2000); // Simulate very slow request
+      await route.continue();
+      sfGetTimestamp = Date.now();
+    },
+  );
+
+  await page.route(
+    "**/state/org.matrix.msc3401.call.member/**",
+    async (route) => {
+      await route.continue();
+      sendStateEventTimestamp = Date.now();
+    },
+  );
+
+  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();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+  await page.waitForTimeout(4000);
+  // Ensure that the call is connected
+  await page
+    .locator("div")
+    .filter({ hasText: /^HelloCall$/ })
+    .click();
+
+  expect(sfGetTimestamp).toBeGreaterThan(0);
+  expect(sendStateEventTimestamp).toBeGreaterThan(0);
+  expect(sfGetTimestamp).toBeLessThan(sendStateEventTimestamp);
+});
+
+test("Error when pre-warming the focus are caught by the ErrorBoundary", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await page.route("**/openid/request_token", async (route) => {
+    await route.fulfill({
+      status: 418, // Simulate an error not retryable
+    });
+  });
+
+  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();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+
+  // Should fail
+  await expect(page.getByText("Something went wrong")).toBeVisible();
+});

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(1);
 });

playwright/widget/simple-create.spec.ts

@@ -49,7 +49,10 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
 
   // Check the join indicator on the room list
   await expect(
-    brooks.page.locator("div").filter({ hasText: /^Joined • 1$/ }),
+    brooks.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame()
+      .getByRole("button", { name: "End call" }),
   ).toBeVisible();
 
   // Join from the other side
@@ -59,26 +62,28 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
   ).toBeVisible();
   await whistler.page.getByRole("button", { name: "Join" }).click();
 
-  await expect(
-    whistler.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame()
-      .getByTestId("lobby_joinCall"),
-  ).toBeVisible();
+  // Currently disabled due to recent Element Web is bypassing Lobby
+  // await expect(
+  //   whistler.page
+  //     .locator('iframe[title="Element Call"]')
+  //     .contentFrame()
+  //     .getByTestId("lobby_joinCall"),
+  // ).toBeVisible();
+  //
+  // await whistler.page
+  //   .locator('iframe[title="Element Call"]')
+  //   .contentFrame()
+  //   .getByTestId("lobby_joinCall")
+  //   .click();
 
-  await whistler.page
-    .locator('iframe[title="Element Call"]')
-    .contentFrame()
-    .getByTestId("lobby_joinCall")
-    .click();
+  // Currrenty disabled due to recent Element Web not indicating the number of participants
+  // await expect(
+  //   whistler.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
+  // ).toBeVisible();
 
-  await expect(
-    whistler.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
-  ).toBeVisible();
-
-  await expect(
-    brooks.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
-  ).toBeVisible();
+  // await expect(
+  //   brooks.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
+  // ).toBeVisible();
 
   // Whistler leaves
   await whistler.page.waitForTimeout(1000);

sdk/README.md

@@ -0,0 +1,35 @@
+# 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 ellowing cors (for example `npx serve -l 81234 --cors`)) as a godot engine HTML export template.
+
+## Widgets
+
+The sdk mode is particularly interesting to be used in widgets where you do not need to pay attention to matrix login/cs api ...
+To create a widget see the example index.html file in this folder. And add it to EW via:
+`/addwidget <widgetUrl>` (see **url parameters** for more details on `<widgetUrl>`)
+
+### url parameters
+
+```
+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,87 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Godot MatrixRTC Widget</title>
+    <meta charset="utf-8" />
+    <script type="module">
+      // TODO use the url where the matrixrtc-sdk.js file from dist is hosted
+      import { createMatrixRTCSdk } from "http://localhost:8123/matrixrtc-sdk.js";
+
+      try {
+        window.matrixRTCSdk = await createMatrixRTCSdk(
+          "com.github.toger5.godot-game",
+        );
+        console.info("createMatrixRTCSdk was created!");
+      } catch (e) {
+        console.error("createMatrixRTCSdk", e);
+      }
+      const sdk = window.matrixRTCSdk;
+
+      // This is the main bridging interface to godot
+      window.matrixRTCSdkGodot = {
+        dataObs: sdk.data$,
+        memberObs: sdk.members$,
+        // join: sdk.join, // lets stick with autojoin for now
+        sendData: sdk.sendData,
+        leave: sdk.leave,
+        connectedObs: sdk.connected$,
+      };
+
+      console.info("matrixRTCSdk join ", sdk);
+      const connectionState = sdk.join();
+      console.info("matrixRTCSdk joined");
+
+      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);
+        // TODO forward to godot
+      });
+
+      sdk.members$.subscribe((memberObjects) => {
+        // reset div
+        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";
+      });
+
+      let engine = new Engine($GODOT_CONFIG);
+      engine.startGame();
+    </script>
+    <!--// TODO use it as godot HTML template-->
+    <script src="$GODOT_URL"></script>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <div
+      id="overlay"
+      style="position: absolute; top: 0; right: 0; background-color: #ffffff10"
+    >
+      <div id="connect_status"></div>
+      <button onclick="window.matrixRTCSdk.leave();">Leave</button>
+      <button onclick="window.matrixRTCSdk.sendData({prop: 'Hello, world!'});">
+        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/App.tsx

@@ -24,7 +24,6 @@ import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
 import { ErrorPage, LoadingPage } from "./FullScreenView";
-import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
 import { widget } from "./widget";
 import { useTheme } from "./useTheme";
@@ -86,7 +85,6 @@ export const App: FC<Props> = ({ vm }) => {
           <Sentry.ErrorBoundary
             fallback={(error) => <ErrorPage error={error} widget={widget} />}
           >
-            <DisconnectedBanner />
             <Routes>
               <SentryRoute path="/" element={<HomePage />} />
               <SentryRoute path="/login" element={<LoginPage />} />

src/AppBar.tsx

@@ -17,10 +17,7 @@ import {
   useState,
 } from "react";
 import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
-import {
-  ArrowLeftIcon,
-  CollapseIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 
 import { Header, LeftNav, RightNav } from "./Header";
@@ -45,7 +42,6 @@ interface Props {
  */
 export const AppBar: FC<Props> = ({ children }) => {
   const { t } = useTranslation();
-  const BackIcon = platform === "ios" ? CollapseIcon : ArrowLeftIcon;
   const onBackClick = useCallback((e: MouseEvent) => {
     e.preventDefault();
     window.controls.onBackButtonPressed?.();
@@ -65,11 +61,15 @@ export const AppBar: FC<Props> = ({ children }) => {
         style={{ display: hidden ? "none" : "block" }}
         className={styles.bar}
       >
-        <Header>
+        <Header
+          // App bar is mainly seen in the call view, which has its own
+          // 'reconnecting' toast
+          disconnectedBanner={false}
+        >
           <LeftNav>
             <Tooltip label={t("common.back")}>
               <IconButton onClick={onBackClick}>
-                <BackIcon />
+                <CollapseIcon />
               </IconButton>
             </Tooltip>
           </LeftNav>

src/Header.tsx

@@ -17,27 +17,38 @@ import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
 import { EncryptionLock } from "./room/EncryptionLock";
 import { useMediaQuery } from "./useMediaQuery";
+import { DisconnectedBanner } from "./DisconnectedBanner";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
   ref?: Ref<HTMLElement>;
   children: ReactNode;
   className?: string;
+  /**
+   * Whether the header should display an informational banner whenever the
+   * client is disconnected from the homeserver.
+   * @default true
+   */
+  disconnectedBanner?: boolean;
 }
 
 export const Header: FC<HeaderProps> = ({
   ref,
   children,
   className,
+  disconnectedBanner = true,
   ...rest
 }) => {
   return (
-    <header
-      ref={ref}
-      className={classNames(styles.header, className)}
-      {...rest}
-    >
-      {children}
-    </header>
+    <>
+      <header
+        ref={ref}
+        className={classNames(styles.header, className)}
+        {...rest}
+      >
+        {children}
+      </header>
+      {disconnectedBanner && <DisconnectedBanner />}
+    </>
   );
 };
 

src/MediaDevicesContext.ts

@@ -23,14 +23,6 @@ export function useMediaDevices(): MediaDevices {
   return mediaDevices;
 }
 
-export const useIsEarpiece = (): boolean => {
-  const devices = useMediaDevices();
-  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
-  const available = useObservableEagerState(devices.audioOutput.available$);
-  if (!audioOutput?.id) return false;
-  return available.get(audioOutput.id)?.type === "earpiece";
-};
-
 /**
  * A convenience hook to get the audio node configuration for the earpiece.
  * It will check the `useAsEarpiece` of the `audioOutput` device and return

src/Overlay.module.css

@@ -35,6 +35,8 @@ Please see LICENSE in the repository root for full details.
 
 .bg.animate[data-state="closed"] {
   animation: fade-out 130ms;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .overlay {

src/RTCConnectionStats.tsx

@@ -19,10 +19,26 @@ import mediaViewStyles from "../src/tile/MediaView.module.css";
 interface Props {
   audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
+  focusUrl?: string;
 }
 
+const extractDomain = (url: string): string => {
+  try {
+    const parsedUrl = new URL(url);
+    return parsedUrl.hostname; // Returns "kdk.cpm"
+  } catch (error) {
+    console.error("Invalid URL:", error);
+    return url;
+  }
+};
+
 // This is only used in developer mode for debugging purposes, so we don't need full localization
-export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
+export const RTCConnectionStats: FC<Props> = ({
+  audio,
+  video,
+  focusUrl,
+  ...rest
+}) => {
   const [showModal, setShowModal] = useState(false);
   const [modalContents, setModalContents] = useState<
     "video" | "audio" | "none"
@@ -55,6 +71,13 @@ export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
           </pre>
         </div>
       </Modal>
+      {focusUrl && (
+        <div>
+          <Text as="span" size="xs" title="focusURL">
+            &nbsp;{extractDomain(focusUrl)}
+          </Text>
+        </div>
+      )}
       {audio && (
         <div>
           <Button

src/Toast.tsx

@@ -45,6 +45,12 @@ interface Props {
    * A supporting icon to display within the toast.
    */
   Icon?: ComponentType<SVGAttributes<SVGElement>>;
+  /**
+   * Whether the toast should be modal, making it fill the screen (by portalling
+   * it into the root of the document) and trap focus until dismissed.
+   * @default true
+   */
+  modal?: boolean;
 }
 
 /**
@@ -56,6 +62,7 @@ export const Toast: FC<Props> = ({
   autoDismiss,
   children,
   Icon,
+  modal = true,
 }) => {
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -71,29 +78,33 @@ export const Toast: FC<Props> = ({
     }
   }, [open, autoDismiss, onDismiss]);
 
+  const content = (
+    <>
+      <DialogOverlay
+        className={classNames(overlayStyles.bg, overlayStyles.animate)}
+      />
+      <DialogContent aria-describedby={undefined} asChild>
+        <DialogClose
+          className={classNames(
+            overlayStyles.overlay,
+            overlayStyles.animate,
+            styles.toast,
+          )}
+        >
+          <DialogTitle asChild>
+            <Text as="h3" size="sm" weight="semibold">
+              {children}
+            </Text>
+          </DialogTitle>
+          {Icon && <Icon width={20} height={20} aria-hidden />}
+        </DialogClose>
+      </DialogContent>
+    </>
+  );
+
   return (
-    <DialogRoot open={open} onOpenChange={onOpenChange}>
-      <DialogPortal>
-        <DialogOverlay
-          className={classNames(overlayStyles.bg, overlayStyles.animate)}
-        />
-        <DialogContent aria-describedby={undefined} asChild>
-          <DialogClose
-            className={classNames(
-              overlayStyles.overlay,
-              overlayStyles.animate,
-              styles.toast,
-            )}
-          >
-            <DialogTitle asChild>
-              <Text as="h3" size="sm" weight="semibold">
-                {children}
-              </Text>
-            </DialogTitle>
-            {Icon && <Icon width={20} height={20} aria-hidden />}
-          </DialogClose>
-        </DialogContent>
-      </DialogPortal>
+    <DialogRoot open={open} onOpenChange={onOpenChange} modal={modal}>
+      {modal ? <DialogPortal>{content}</DialogPortal> : content}
     </DialogRoot>
   );
 };

src/UrlParams.test.ts

@@ -5,12 +5,15 @@ 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 } from "vitest";
+import { describe, expect, it, onTestFinished, vi } from "vitest";
+import { logger } from "matrix-js-sdk/lib/logger";
 
+import * as PlatformMod from "../src/Platform";
 import {
   getRoomIdentifierFromUrl,
+  computeUrlParams,
+  HeaderStyle,
   getUrlParams,
-  UserIntent,
 } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
@@ -82,6 +85,16 @@ describe("UrlParams", () => {
         getRoomIdentifierFromUrl("", `?roomId=${ROOM_ID}`, "").roomId,
       ).toBe(ROOM_ID);
     });
+    it("(roomId with unprintable characters)", () => {
+      const invisibleChar = "\u2066";
+      expect(
+        getRoomIdentifierFromUrl(
+          "",
+          `?roomId=${invisibleChar}${ROOM_ID}${invisibleChar}`,
+          "",
+        ).roomId,
+      ).toBe(ROOM_ID);
+    });
   });
 
   it("ignores room alias", () => {
@@ -93,16 +106,16 @@ describe("UrlParams", () => {
 
   describe("preload", () => {
     it("defaults to false", () => {
-      expect(getUrlParams().preload).toBe(false);
+      expect(computeUrlParams().preload).toBe(false);
     });
 
     it("ignored in SPA mode", () => {
-      expect(getUrlParams("?preload=true").preload).toBe(false);
+      expect(computeUrlParams("?preload=true").preload).toBe(false);
     });
 
     it("respected in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?preload=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).preload,
       ).toBe(true);
@@ -111,19 +124,20 @@ describe("UrlParams", () => {
 
   describe("returnToLobby", () => {
     it("is false in SPA mode", () => {
-      expect(getUrlParams("?returnToLobby=true").returnToLobby).toBe(false);
+      expect(computeUrlParams("?returnToLobby=true").returnToLobby).toBe(false);
     });
 
     it("defaults to false in widget mode", () => {
       expect(
-        getUrlParams("?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo")
-          .returnToLobby,
+        computeUrlParams(
+          "?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).returnToLobby,
       ).toBe(false);
     });
 
     it("respected in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?returnToLobby=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).returnToLobby,
       ).toBe(true);
@@ -132,12 +146,12 @@ describe("UrlParams", () => {
 
   describe("userId", () => {
     it("is ignored in SPA mode", () => {
-      expect(getUrlParams("?userId=asd").userId).toBe(null);
+      expect(computeUrlParams("?userId=asd").userId).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?userId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).userId,
       ).toBe("asd");
@@ -146,12 +160,12 @@ describe("UrlParams", () => {
 
   describe("deviceId", () => {
     it("is ignored in SPA mode", () => {
-      expect(getUrlParams("?deviceId=asd").deviceId).toBe(null);
+      expect(computeUrlParams("?deviceId=asd").deviceId).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?deviceId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).deviceId,
       ).toBe("asd");
@@ -160,12 +174,12 @@ describe("UrlParams", () => {
 
   describe("baseUrl", () => {
     it("is ignored in SPA mode", () => {
-      expect(getUrlParams("?baseUrl=asd").baseUrl).toBe(null);
+      expect(computeUrlParams("?baseUrl=asd").baseUrl).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?baseUrl=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).baseUrl,
       ).toBe("asd");
@@ -175,84 +189,215 @@ describe("UrlParams", () => {
   describe("viaServers", () => {
     it("is ignored in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?viaServers=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).viaServers,
       ).toBe(null);
     });
 
     it("is parsed in SPA mode", () => {
-      expect(getUrlParams("?viaServers=asd").viaServers).toBe("asd");
+      expect(computeUrlParams("?viaServers=asd").viaServers).toBe("asd");
     });
   });
 
   describe("homeserver", () => {
     it("is ignored in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?homeserver=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).homeserver,
       ).toBe(null);
     });
 
     it("is parsed in SPA mode", () => {
-      expect(getUrlParams("?homeserver=asd").homeserver).toBe("asd");
+      expect(computeUrlParams("?homeserver=asd").homeserver).toBe("asd");
     });
   });
 
   describe("intent", () => {
-    it("defaults to unknown", () => {
-      expect(getUrlParams().intent).toBe(UserIntent.Unknown);
+    const noIntentDefaults = {
+      confineToRoom: false,
+      appPrompt: true,
+      preload: false,
+      header: HeaderStyle.Standard,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: false,
+      perParticipantE2EE: false,
+      controlledAudioDevices: false,
+      skipLobby: false,
+      returnToLobby: false,
+      sendNotificationType: undefined,
+    };
+    const startNewCallDefaults = (platform: string): object => ({
+      confineToRoom: true,
+      appPrompt: false,
+      preload: false,
+      header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: true,
+      perParticipantE2EE: true,
+      controlledAudioDevices: platform === "desktop" ? false : true,
+      skipLobby: true,
+      returnToLobby: false,
+      sendNotificationType: platform === "desktop" ? "notification" : "ring",
+    });
+    const joinExistingCallDefaults = (platform: string): object => ({
+      confineToRoom: true,
+      appPrompt: false,
+      preload: false,
+      header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: true,
+      perParticipantE2EE: true,
+      controlledAudioDevices: platform === "desktop" ? false : true,
+      skipLobby: false,
+      returnToLobby: false,
+      sendNotificationType: "notification",
+      defaultAudioEnabled: true,
+      defaultVideoEnabled: true,
+    });
+    it("use no-intent-defaults with unknown intent", () => {
+      expect(computeUrlParams()).toMatchObject(noIntentDefaults);
     });
 
     it("ignores intent if it is not a valid value", () => {
-      expect(getUrlParams("?intent=foo").intent).toBe(UserIntent.Unknown);
+      expect(computeUrlParams("?intent=foo")).toMatchObject(noIntentDefaults);
     });
 
     it("accepts start_call", () => {
-      expect(getUrlParams("?intent=start_call").intent).toBe(
-        UserIntent.StartNewCall,
-      );
+      expect(
+        computeUrlParams(
+          "?intent=start_call&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject({ ...startNewCallDefaults("desktop"), skipLobby: false });
+    });
+
+    it("accepts start_call_dm mobile", () => {
+      vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("android");
+      onTestFinished(() => {
+        vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("desktop");
+      });
+      expect(
+        computeUrlParams(
+          "?intent=start_call_dm&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject(startNewCallDefaults("android"));
+    });
+
+    it("accepts start_call_dm mobile and prioritizes overwritten params", () => {
+      vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("android");
+      onTestFinished(() => {
+        vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("desktop");
+      });
+      expect(
+        computeUrlParams(
+          "?intent=start_call_dm&widgetId=1234&parentUrl=parent.org&sendNotificationType=notification",
+        ),
+      ).toMatchObject({
+        ...startNewCallDefaults("android"),
+        sendNotificationType: "notification",
+      });
     });
 
     it("accepts join_existing", () => {
-      expect(getUrlParams("?intent=join_existing").intent).toBe(
-        UserIntent.JoinExistingCall,
-      );
+      expect(
+        computeUrlParams(
+          "?intent=join_existing&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject(joinExistingCallDefaults("desktop"));
     });
   });
 
   describe("skipLobby", () => {
     it("defaults to false", () => {
-      expect(getUrlParams().skipLobby).toBe(false);
+      expect(computeUrlParams().skipLobby).toBe(false);
     });
 
     it("defaults to false if intent is start_call in SPA mode", () => {
-      expect(getUrlParams("?intent=start_call").skipLobby).toBe(false);
+      expect(computeUrlParams("?intent=start_call").skipLobby).toBe(false);
     });
 
-    it("defaults to true if intent is start_call in widget mode", () => {
+    it("defaults to false if intent is start_call in widget mode", () => {
       expect(
-        getUrlParams(
+        computeUrlParams(
           "?intent=start_call&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).skipLobby,
-      ).toBe(true);
+      ).toBe(false);
     });
 
     it("default to false if intent is join_existing", () => {
-      expect(getUrlParams("?intent=join_existing").skipLobby).toBe(false);
+      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(getUrlParams("?header=app_bar&hideHeader=true").header).toBe(
+      expect(computeUrlParams("?header=app_bar&hideHeader=true").header).toBe(
         "app_bar",
       );
-      expect(getUrlParams("?header=none&hideHeader=false").header).toBe("none");
+      expect(computeUrlParams("?header=none&hideHeader=false").header).toBe(
+        "none",
+      );
     });
-    it("converts hideHeader to the correct header value", () => {
-      expect(getUrlParams("?hideHeader=true").header).toBe("none");
-      expect(getUrlParams("?hideHeader=false").header).toBe("standard");
+  });
+  describe("getUrlParams", () => {
+    it("uses cached values", () => {
+      const spy = vi.spyOn(logger, "info");
+      // call get once
+      const params = getUrlParams("?header=app_bar&hideHeader=true", "");
+      // call get twice
+      expect(getUrlParams("?header=app_bar&hideHeader=true", "")).toBe(params);
+      // expect compute to only be called once
+      // it will only log when it is computing the values
+      expect(spy).toHaveBeenCalledExactlyOnceWith(
+        "UrlParams: final set of url params\n",
+        "intent:",
+        "unknown",
+        "\nproperties:",
+        expect.any(Object),
+        "configuration:",
+        expect.any(Object),
+        "intentAndPlatformDerivedConfiguration:",
+        {},
+      );
     });
   });
 });

src/UrlParams.ts

@@ -8,11 +8,16 @@ Please see LICENSE in the repository root for full details.
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { type RTCNotificationType } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  type RTCCallIntent,
+  type RTCNotificationType,
+} from "matrix-js-sdk/lib/matrixrtc";
+import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
+import { platform } from "./Platform";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -23,6 +28,10 @@ interface RoomIdentifier {
 export enum UserIntent {
   StartNewCall = "start_call",
   JoinExistingCall = "join_existing",
+  StartNewCallDM = "start_call_dm",
+  StartNewCallDMVoice = "start_call_dm_voice",
+  JoinExistingCallDM = "join_existing_dm",
+  JoinExistingCallDMVoice = "join_existing_dm_voice",
   Unknown = "unknown",
 }
 
@@ -32,12 +41,12 @@ export enum HeaderStyle {
   AppBar = "app_bar",
 }
 
-// If you need to add a new flag to this interface, prefer a name that describes
-// a specific behavior (such as 'confineToRoom'), rather than one that describes
-// the situations that call for this behavior ('isEmbedded'). This makes it
-// clearer what each flag means, and helps us avoid coupling Element Call's
-// behavior to the needs of specific consumers.
-export interface UrlParams {
+/**
+ * The UrlProperties are used to pass required data to the widget.
+ * Those are different in different rooms, users, devices. They do not configure the behavior of the
+ * widget but provide the required data to the widget.
+ */
+export interface UrlProperties {
   // Widget api related params
   widgetId: string | null;
   parentUrl: string | null;
@@ -49,45 +58,11 @@ export interface UrlParams {
    * is also not validated, where it is in useRoomIdentifier().
    */
   roomId: string | null;
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether upon entering a room, the user should be prompted to launch the
-   * native mobile app. (Affects only Android and iOS.)
-   *
-   * The app prompt must also be enabled in the config for this to take effect.
-   */
-  appPrompt: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-  /**
-   * Whether to use end-to-end encryption.
-   */
-  e2eEnabled: boolean;
   /**
    * The user's ID (only used in matryoshka mode).
    */
   userId: string | null;
+
   /**
    * The display name to use for auto-registration.
    */
@@ -125,14 +100,96 @@ export interface UrlParams {
    */
   posthogApiKey: string | null;
   /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
+   * Whether to use end-to-end encryption.
    */
-  allowIceFallback: boolean;
+  e2eEnabled: boolean;
   /**
    * E2EE password
    */
   password: string | null;
+  /** This defines the homeserver that is going to be used when joining a room.
+   * It has to be set to a non default value for links to rooms
+   * that are not on the default homeserver,
+   * that is in use for the current user.
+   */
+  viaServers: string | null;
+
+  /**
+   * This defines the homeserver that is going to be used when registering
+   * a new (guest) user.
+   * This can be user to configure a non default guest user server when
+   * creating a spa link.
+   */
+  homeserver: string | null;
+
+  /**
+   * The rageshake submit URL. This is only used in the embedded package of Element Call.
+   */
+  rageshakeSubmitUrl: string | null;
+
+  /**
+   * The Sentry DSN. This is only used in the embedded package of Element Call.
+   */
+  sentryDsn: string | null;
+
+  /**
+   * The Sentry environment. This is only used in the embedded package of Element Call.
+   */
+  sentryEnvironment: string | null;
+  /**
+   * The theme to use for element call.
+   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+   */
+  theme: string | null;
+}
+
+/**
+ * The configuration for the app, which can be set via URL parameters.
+ * Those property are different to the UrlProperties, since they are all optional
+ * and configure the behavior of the app. Their value is the same if EC is used in
+ * the same context but with different accounts/users.
+ *
+ * Their defaults can be controlled by the `intent` property.
+ */
+export interface UrlConfiguration {
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether upon entering a room, the user should be prompted to launch the
+   * native mobile app. (Affects only Android and iOS.)
+   *
+   * The app prompt must also be enabled in the config for this to take effect.
+   */
+  appPrompt: boolean;
+  /**
+   * Whether the app should pause before joining the call until it sees an
+   * io.element.join widget action, allowing it to be preloaded.
+   */
+  preload: boolean;
+  /**
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
+   */
+  header: HeaderStyle;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
+
   /**
    * Whether the app should use per participant keys for E2EE.
    */
@@ -154,51 +211,59 @@ export interface UrlParams {
    * This is useful for video rooms.
    */
   returnToLobby: boolean;
-  /**
-   * The theme to use for element call.
-   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
-   */
-  theme: string | null;
-  /** This defines the homeserver that is going to be used when joining a room.
-   * It has to be set to a non default value for links to rooms
-   * that are not on the default homeserver,
-   * that is in use for the current user.
-   */
-  viaServers: string | null;
-  /**
-   * This defines the homeserver that is going to be used when registering
-   * a new (guest) user.
-   * This can be user to configure a non default guest user server when
-   * creating a spa link.
-   */
-  homeserver: string | null;
-
-  /**
-   * The user's intent with respect to the call.
-   * e.g. if they clicked a Start Call button, this would be `start_call`.
-   * If it was a Join Call button, it would be `join_existing`.
-   */
-  intent: string | null;
-
-  /**
-   * The rageshake submit URL. This is only used in the embedded package of Element Call.
-   */
-  rageshakeSubmitUrl: string | null;
-
-  /**
-   * The Sentry DSN. This is only used in the embedded package of Element Call.
-   */
-  sentryDsn: string | null;
-
-  /**
-   * The Sentry environment. This is only used in the embedded package of Element Call.
-   */
-  sentryEnvironment: string | null;
   /**
    * Whether and what type of notification EC should send, when the user joins the call.
    */
   sendNotificationType?: RTCNotificationType;
+  /**
+   * Whether the app should automatically leave the call when there
+   * is no one left in the call.
+   * This is one part to make the call matrixRTC session behave like a telephone call.
+   */
+  autoLeaveWhenOthersLeft: boolean;
+
+  /**
+   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
+   * This is a no-op if not combined with sendNotificationType.
+   *
+   * This entails:
+   *  - show ui that it is awaiting an answer
+   *  - play a sound that indicates that it is awaiting an answer
+   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
+   */
+  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 {
+  defaultAudioEnabled?: boolean;
+  defaultVideoEnabled?: boolean;
+}
+interface IntentAndPlatformDerivedConfiguration {
+  defaultAudioEnabled?: boolean;
+  defaultVideoEnabled?: boolean;
+}
+
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
+export interface UrlParams
+  extends UrlProperties,
+    UrlConfiguration,
+    IntentAndPlatformDerivedConfiguration {}
 
 // This is here as a stopgap, but what would be far nicer is a function that
 // takes a UrlParams and returns a query string. That would enable us to
@@ -240,6 +305,17 @@ class ParamParser {
     return this.fragmentParams.get(name) ?? this.queryParams.get(name);
   }
 
+  public getEnumParam<T extends string>(
+    name: string,
+    type: { [s: string]: T } | ArrayLike<T>,
+  ): T | undefined {
+    const value = this.getParam(name);
+    if (value !== null && Object.values(type).includes(value as T)) {
+      return value as T;
+    }
+    return undefined;
+  }
+
   public getAllParams(name: string): string[] {
     return [
       ...this.fragmentParams.getAll(name),
@@ -247,14 +323,30 @@ class ParamParser {
     ];
   }
 
+  /**
+   * Returns true if the flag exists and is not "false".
+   */
   public getFlagParam(name: string, defaultValue = false): boolean {
     const param = this.getParam(name);
     return param === null ? defaultValue : param !== "false";
   }
+  /**
+   * Returns the value of the flag if it exists, or undefined if it does not.
+   */
+  public getFlag(name: string): boolean | undefined {
+    const param = this.getParam(name);
+    return param !== null ? param !== "false" : undefined;
+  }
 }
 
+let urlParamCache: {
+  search?: string;
+  hash?: string;
+  params?: UrlParams;
+} = {};
+
 /**
- * Gets the app parameters for the current URL.
+ * Gets the url params and loads them from a cache if already computed.
  * @param search The URL search string
  * @param hash The URL hash
  * @returns The app parameters encoded in the URL
@@ -263,50 +355,145 @@ export const getUrlParams = (
   search = window.location.search,
   hash = window.location.hash,
 ): UrlParams => {
+  if (
+    urlParamCache.search === search &&
+    urlParamCache.hash === hash &&
+    urlParamCache.params
+  ) {
+    return urlParamCache.params;
+  }
+  const params = computeUrlParams(search, hash);
+  urlParamCache = { search, hash, params };
+
+  return params;
+};
+
+/**
+ * Gets the app parameters for the current URL.
+ * @param search The URL search string
+ * @param hash The URL hash
+ * @returns The app parameters encoded in the URL
+ */
+export const computeUrlParams = (search = "", hash = ""): UrlParams => {
   const parser = new ParamParser(search, hash);
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
-  let intent = parser.getParam("intent");
-  if (!intent || !Object.values(UserIntent).includes(intent as UserIntent)) {
-    intent = UserIntent.Unknown;
-  }
-
-  // Check hideHeader for backwards compatibility. If header is set, hideHeader
-  // is ignored.
-  const header =
-    parser.getParam("header") ??
-    (parser.getFlagParam("hideHeader")
-      ? HeaderStyle.None
-      : HeaderStyle.Standard);
-
-  const sendNotificationType = ["ring", "notification"].includes(
-    parser.getParam("sendNotificationType") ?? "",
-  )
-    ? (parser.getParam("sendNotificationType") as RTCNotificationType)
-    : undefined;
   const widgetId = parser.getParam("widgetId");
   const parentUrl = parser.getParam("parentUrl");
   const isWidget = !!widgetId && !!parentUrl;
 
-  return {
+  /**
+   * The user's intent with respect to the call.
+   * e.g. if they clicked a Start Call button, this would be `start_call`.
+   * If it was a Join Call button, it would be `join_existing`.
+   * This is a platform specific default set of parameters, that allows to minize the configuration
+   * needed to start a call. And empowers the EC codebase to control the platform/intent behavior in
+   * a central place.
+   *
+   * In short: either provide url query parameters of UrlConfiguration or set the intent
+   * (or the global defaults will be used).
+   */
+  const intent = !isWidget
+    ? UserIntent.Unknown
+    : (parser.getEnumParam("intent", UserIntent) ?? UserIntent.Unknown);
+  // Here we only use constants and `platform` to determine the intent preset.
+  let intentPreset: UrlConfiguration = {
+    confineToRoom: true,
+    appPrompt: false,
+    preload: false,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    perParticipantE2EE: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification",
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      intentPreset.skipLobby = false;
+      intentPreset.callIntent = "video";
+      break;
+    case UserIntent.JoinExistingCall:
+      // On desktop this will be overridden based on which button was used to join the call
+      intentPreset.skipLobby = false;
+      intentPreset.callIntent = "video";
+      break;
+    case UserIntent.StartNewCallDMVoice:
+      intentPreset.callIntent = "audio";
+    // Fall through
+    case UserIntent.StartNewCallDM:
+      intentPreset.skipLobby = true;
+      intentPreset.sendNotificationType = "ring";
+      intentPreset.autoLeaveWhenOthersLeft = true;
+      intentPreset.waitForCallPickup = true;
+      intentPreset.callIntent = intentPreset.callIntent ?? "video";
+      break;
+    case UserIntent.JoinExistingCallDMVoice:
+      intentPreset.callIntent = "audio";
+    // Fall through
+    case UserIntent.JoinExistingCallDM:
+      // On desktop this will be overridden based on which button was used to join the call
+      intentPreset.skipLobby = true;
+      intentPreset.autoLeaveWhenOthersLeft = true;
+      intentPreset.callIntent = intentPreset.callIntent ?? "video";
+      break;
+    // Non widget usecase defaults
+    default:
+      intentPreset = {
+        confineToRoom: false,
+        appPrompt: true,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
+        waitForCallPickup: false,
+      };
+  }
+
+  const intentAndPlatformDerivedConfiguration: IntentAndPlatformDerivedConfiguration =
+    {};
+  // Desktop also includes web. Its anything that is not mobile.
+  const desktopMobile = platform === "desktop" ? "desktop" : "mobile";
+  switch (desktopMobile) {
+    case "desktop":
+    case "mobile":
+      switch (intent) {
+        case UserIntent.StartNewCall:
+        case UserIntent.JoinExistingCall:
+        case UserIntent.StartNewCallDM:
+        case UserIntent.JoinExistingCallDM:
+          intentAndPlatformDerivedConfiguration.defaultAudioEnabled = true;
+          intentAndPlatformDerivedConfiguration.defaultVideoEnabled = true;
+          break;
+        case UserIntent.StartNewCallDMVoice:
+        case UserIntent.JoinExistingCallDMVoice:
+          intentAndPlatformDerivedConfiguration.defaultAudioEnabled = true;
+          intentAndPlatformDerivedConfiguration.defaultVideoEnabled = false;
+          break;
+      }
+  }
+
+  const properties: UrlProperties = {
     widgetId,
     parentUrl,
-
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
     roomId: parser.getParam("roomId"),
     password: parser.getParam("password"),
-    // This flag has 'embed' as an alias for historical reasons
-    confineToRoom:
-      parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
-    appPrompt: parser.getFlagParam("appPrompt", true),
-    preload: isWidget ? parser.getFlagParam("preload") : false,
-    header: header as HeaderStyle,
-    showControls: parser.getFlagParam("showControls", true),
-    hideScreensharing: parser.getFlagParam("hideScreensharing"),
-    e2eEnabled: parser.getFlagParam("enableE2EE", true),
     userId: isWidget ? parser.getParam("userId") : null,
     displayName: parser.getParam("displayName"),
     deviceId: isWidget ? parser.getParam("deviceId") : null,
@@ -314,24 +501,9 @@ export const getUrlParams = (
     lang: parser.getParam("lang"),
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
-    allowIceFallback: parser.getFlagParam("allowIceFallback"),
-    perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
-    controlledAudioDevices: parser.getFlagParam(
-      "controlledAudioDevices",
-      // the deprecated property name
-      parser.getFlagParam("controlledMediaDevices"),
-    ),
-    skipLobby: parser.getFlagParam(
-      "skipLobby",
-      isWidget && intent === UserIntent.StartNewCall,
-    ),
-    // In SPA mode the user should always exit to the home screen when hanging
-    // up, rather than being sent back to the lobby
-    returnToLobby: isWidget ? parser.getFlagParam("returnToLobby") : false,
     theme: parser.getParam("theme"),
     viaServers: !isWidget ? parser.getParam("viaServers") : null,
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
-    intent,
     posthogApiHost: parser.getParam("posthogApiHost"),
     posthogApiKey: parser.getParam("posthogApiKey"),
     posthogUserId:
@@ -339,7 +511,54 @@ export const getUrlParams = (
     rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
-    sendNotificationType,
+    e2eEnabled: parser.getFlagParam("enableE2EE", true),
+  };
+
+  const configuration: Partial<UrlConfiguration> = {
+    confineToRoom: parser.getFlag("confineToRoom"),
+    appPrompt: parser.getFlag("appPrompt"),
+    preload: isWidget ? parser.getFlag("preload") : undefined,
+    // Check hideHeader for backwards compatibility. If header is set, hideHeader
+    // is ignored.
+    header: parser.getEnumParam("header", HeaderStyle),
+    showControls: parser.getFlag("showControls"),
+    hideScreensharing: parser.getFlag("hideScreensharing"),
+    allowIceFallback: parser.getFlag("allowIceFallback"),
+    perParticipantE2EE: parser.getFlag("perParticipantE2EE"),
+    controlledAudioDevices: parser.getFlag("controlledAudioDevices"),
+    skipLobby: isWidget ? parser.getFlag("skipLobby") : false,
+    // In SPA mode the user should always exit to the home screen when hanging
+    // up, rather than being sent back to the lobby
+    returnToLobby: isWidget ? parser.getFlag("returnToLobby") : false,
+    sendNotificationType: parser.getEnumParam("sendNotificationType", [
+      "ring",
+      "notification",
+    ]),
+    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.
+  // This will only log when the cache is not yet set.
+  logger.info(
+    "UrlParams: final set of url params\n",
+    "intent:",
+    intent,
+    "\nproperties:",
+    properties,
+    "configuration:",
+    configuration,
+    "intentAndPlatformDerivedConfiguration:",
+    intentAndPlatformDerivedConfiguration,
+  );
+
+  return {
+    ...properties,
+    ...intentPreset,
+    ...pickBy(configuration, (v?: unknown) => v !== undefined),
+    ...intentAndPlatformDerivedConfiguration,
   };
 };
 
@@ -398,10 +617,16 @@ export function getRoomIdentifierFromUrl(
 
   // Make sure roomId is valid
   let roomId: string | null = parser.getParam("roomId");
-  if (!roomId?.startsWith("!")) {
-    roomId = null;
-  } else if (!roomId.includes("")) {
-    roomId = null;
+  if (roomId !== null) {
+    // Replace any non-printable characters that another client may have inserted.
+    // For instance on iOS, some copied links end up with zero width characters on the end which get encoded into the URL.
+    // This isn't valid for a roomId, so we can freely strip the content.
+    roomId = roomId.replaceAll(/^[^ -~]+|[^ -~]+$/g, "");
+    if (!roomId.startsWith("!")) {
+      roomId = null;
+    } else if (!roomId.includes("")) {
+      roomId = null;
+    }
   }
 
   return {

src/__snapshots__/AppBar.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`AppBar > renders 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
+                d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
               />
             </svg>
           </div>

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/button/Button.tsx

@@ -16,7 +16,6 @@ import {
   EndCallIcon,
   ShareScreenSolidIcon,
   SettingsSolidIcon,
-  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
@@ -67,23 +66,6 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
   );
 };
 
-export const SwitchCameraButton: FC<ComponentPropsWithoutRef<"button">> = (
-  props,
-) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip label={t("switch_camera")}>
-      <CpdButton
-        iconOnly
-        Icon={SwitchCameraSolidIcon}
-        kind="secondary"
-        {...props}
-      />
-    </Tooltip>
-  );
-};
-
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
 }

src/button/ReactionToggleButton.test.tsx

@@ -6,21 +6,22 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { act, render } from "@testing-library/react";
-import { expect, test } from "vitest";
+import { expect, test, vi } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { userEvent } from "@testing-library/user-event";
 import { type ReactNode } from "react";
-import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 
 import { ReactionToggleButton } from "./ReactionToggleButton";
 import { ElementCallReactionEventType } from "../reactions";
-import { type CallViewModel } from "../state/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 import { alice, local, localRtcMember } from "../utils/test-fixtures";
 import { type MockRTCSession } from "../utils/test";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 
-const localIdent = `${localRtcMember.sender}:${localRtcMember.deviceId}`;
+vi.mock("livekit-client/e2ee-worker?worker");
+
+const localIdent = `${localRtcMember.userId}:${localRtcMember.deviceId}`;
 
 function TestComponent({
   rtcSession,
@@ -33,7 +34,7 @@ function TestComponent({
     <TooltipProvider>
       <ReactionsSenderProvider
         vm={vm}
-        rtcSession={rtcSession as unknown as MatrixRTCSession}
+        rtcSession={rtcSession.asMockedSession()}
       >
         <ReactionToggleButton vm={vm} identifier={localIdent} />
       </ReactionsSenderProvider>

src/button/ReactionToggleButton.tsx

@@ -33,7 +33,7 @@ import {
   ReactionsRowSize,
 } from "../reactions";
 import { Modal } from "../Modal";
-import { type CallViewModel } from "../state/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { useBehavior } from "../useBehavior";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {

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="«rb5»"
+    aria-labelledby="«rbb»"
     class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"

src/config/ConfigOptions.ts

@@ -114,24 +114,29 @@ export interface ConfigOptions {
      * when someone leaves a call.
      */
     wait_for_key_rotation_ms?: number;
-    /** @deprecated use wait_for_key_rotation_ms instead */
-    key_rotation_on_leave_delay?: number;
 
     /**
      * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart)
      * that the server waits before sending the leave MatrixRTC membership event.
      */
     delayed_leave_event_delay_ms?: number;
-    /** @deprecated use delayed_leave_event_delay_ms instead */
-    membership_server_side_expiry_timeout?: number;
+
+    /**
+     * 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
+     * helps by keeping more delayed event reset candidates in flight,
+     * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
+     * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
+     */
+    delayed_leave_event_restart_local_timeout_ms?: number;
 
     /**
      * The time interval (in milliseconds) at which the client sends membership keep-alive
      * messages to the server by restarting the timer for the delayed leave event.
      */
     delayed_leave_event_restart_ms?: number;
-    /** @deprecated use delayed_leave_event_restart_ms instead */
-    membership_keep_alive_period?: number;
 
     /**
      * How long we wait before retrying after a network error on any of the requests.

src/controls.ts

@@ -6,9 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { Subject } from "rxjs";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-
-const logger = rootLogger.getChild("[controlled-output]");
+import { logger } from "matrix-js-sdk/lib/logger";
 
 export interface Controls {
   canEnterPip(): boolean;

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/GridLayout.tsx

@@ -14,7 +14,7 @@ import {
 import { distinctUntilChanged } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
-import { type GridLayout as GridLayoutModel } from "../state/CallViewModel";
+import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
 import { type CallLayout, arrangeTiles } from "./CallLayout";

src/grid/OneOnOneLayout.tsx

@@ -9,7 +9,7 @@ import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
+import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";

src/grid/SpotlightExpandedLayout.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type ReactNode, useCallback } from "react";
 
-import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
+import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";

src/grid/SpotlightLandscapeLayout.tsx

@@ -10,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout } from "./CallLayout";
-import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
+import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/layout-types.ts";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
 

src/grid/SpotlightPortraitLayout.tsx

@@ -10,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
+import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/layout-types.ts";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
 import { useBehavior } from "../useBehavior";

src/grid/TileWrapper.tsx

@@ -61,7 +61,12 @@ const TileWrapper_ = memo(
     useDrag((state) => onDrag?.current!(id, state), {
       target: ref,
       filterTaps: true,
-      preventScroll: true,
+      // Previous designs, which allowed tiles to be dragged and dropped around
+      // the scrolling grid, required us to set preventScroll to true here. But
+      // our designs no longer call for this, and meanwhile there's a bug in
+      // use-gesture that causes filterTaps + preventScroll to break buttons
+      // within tiles (like the 'switch camera' button) on mobile.
+      // https://github.com/pmndrs/use-gesture/issues/593
     });
 
     return (

src/home/useGroupCallRooms.ts

@@ -113,19 +113,49 @@ const roomIsJoinable = (room: Room): boolean => {
   }
 };
 
+/**
+ * Determines if a given room has call events in it, and therefore
+ * is likely to be a call room.
+ * @param room The Matrix room instance.
+ * @returns `true` if the room has call events.
+ */
 const roomHasCallMembershipEvents = (room: Room): boolean => {
-  switch (room.getMyMembership()) {
-    case KnownMembership.Join:
-      return !!room
-        .getLiveTimeline()
-        .getState(EventTimeline.FORWARDS)
-        ?.events?.get(EventType.GroupCallMemberPrefix);
-    case KnownMembership.Knock:
-      // Assume that a room you've knocked on is able to hold calls
-      return true;
-    default:
-      return false;
+  // Check our room membership first, to rule out any rooms
+  // we can't have a call in.
+  const myMembership = room.getMyMembership();
+  if (myMembership === KnownMembership.Knock) {
+    // Assume that a room you've knocked on is able to hold calls
+    return true;
+  } else if (myMembership !== KnownMembership.Join) {
+    // Otherwise, non-joined rooms should never show up.
+    return false;
   }
+
+  // Legacy member state checks (cheaper to check.)
+  const timeline = room.getLiveTimeline();
+  if (
+    timeline
+      .getState(EventTimeline.FORWARDS)
+      ?.events?.has(EventType.GroupCallMemberPrefix)
+  ) {
+    return true;
+  }
+
+  // Check for *active* calls using sticky events.
+  for (const sticky of room._unstable_getStickyEvents()) {
+    if (sticky.getType() === EventType.RTCMembership) {
+      return true;
+    }
+  }
+
+  // Otherwise, check recent event history to see if anyone had
+  // sent a call membership in here.
+  return timeline.getEvents().some(
+    (e) =>
+      // Membership events only count if both of these are true
+      e.unstableStickyInfo && e.getType() === EventType.GroupCallMemberPrefix,
+  );
+  // Otherwise, it's *unlikely* this room was ever a call.
 };
 
 export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {

src/icons/FullScreenMaximise.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 14C4.55228 14 5 14.4477 5 15V19H9C9.55228 19 10 19.4477 10 20C10 20.5523 9.55228 21 9 21H3V15C3 14.4477 3.44772 14 4 14Z"/>
+<path d="M20 14C20.5523 14 21 14.4477 21 15V21H15C14.4477 21 14 20.5523 14 20C14 19.4477 14.4477 19 15 19H19V15C19 14.4477 19.4477 14 20 14Z" />
+<path d="M9 3C9.55228 3 10 3.44772 10 4C10 4.55228 9.55228 5 9 5H5V9C5 9.55228 4.55228 10 4 10C3.44772 10 3 9.55228 3 9V3H9Z" />
+<path d="M21 9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V5H15C14.4477 5 14 4.55228 14 4C14 3.44772 14.4477 3 15 3H21V9Z" />
+</svg>

src/icons/FullScreenMinimise.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C10 20.5523 9.55228 21 9 21C8.44772 21 8 20.5523 8 20V16H4C3.44772 16 3 15.5523 3 15C3 14.4477 3.44772 14 4 14H10V20Z" />
+<path d="M20 14C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16H16V20C16 20.5523 15.5523 21 15 21C14.4477 21 14 20.5523 14 20V14H20Z" />
+<path d="M9 3C9.55228 3 10 3.44772 10 4V10H4C3.44772 10 3 9.55228 3 9C3 8.44772 3.44772 8 4 8H8V4C8 3.44772 8.44772 3 9 3Z" />
+<path d="M15 3C15.5523 3 16 3.44772 16 4V8H20C20.5523 8 21 8.44772 21 9C21 9.55228 20.5523 10 20 10H14V4C14 3.44772 14.4477 3 15 3Z" />
+</svg>

src/livekit/BlurBackgroundTransformer.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2024-2025 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 

src/livekit/MatrixAudioRenderer.test.tsx

@@ -6,20 +6,28 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import { render } from "@testing-library/react";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { render, type RenderResult } from "@testing-library/react";
 import {
   getTrackReferenceId,
   type TrackReference,
 } from "@livekit/components-core";
-import { type RemoteAudioTrack } from "livekit-client";
+import {
+  type Participant,
+  type RemoteAudioTrack,
+  type Room,
+  Track,
+} from "livekit-client";
 import { type ReactNode } from "react";
 import { useTracks } from "@livekit/components-react";
 
 import { testAudioContext } from "../useAudioContext.test";
 import * as MediaDevicesContext from "../MediaDevicesContext";
-import { MatrixAudioRenderer } from "./MatrixAudioRenderer";
-import { mockMediaDevices, mockTrack } from "../utils/test";
+import { LivekitRoomAudioRenderer } from "./MatrixAudioRenderer";
+import {
+  mockMediaDevices,
+  mockRemoteParticipant,
+  mockTrack,
+} from "../utils/test";
 
 export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
@@ -48,42 +56,203 @@ vi.mock("@livekit/components-react", async (importOriginal) => {
   };
 });
 
-const tracks = [mockTrack("test:123")];
-vi.mocked(useTracks).mockReturnValue(tracks);
+let tracks: TrackReference[] = [];
 
-it("should render for member", () => {
-  const { container, queryAllByTestId } = render(
+/**
+ * Render the test component with given rtc members and livekit participant identities.
+ *
+ * It is possible to have rtc members that are not in livekit (e.g. not yet joined) and vice versa.
+ *
+ * @param rtcMembers - Array of active rtc members with userId and deviceId.
+ * @param livekitParticipantIdentities - Array of livekit participant (that are publishing).
+ * @param explicitTracks - Array of tracks available in livekit, if not provided, one audio track per livekitParticipantIdentities will be created.
+ * */
+
+function renderTestComponent(
+  rtcMembers: { userId: string; deviceId: string }[],
+  livekitParticipantIdentities: string[],
+  explicitTracks?: {
+    participantId: string;
+    kind: Track.Kind;
+    source: Track.Source;
+  }[],
+): RenderResult {
+  const liveKitParticipants = livekitParticipantIdentities.map((identity) =>
+    mockRemoteParticipant({ identity }),
+  );
+  const participants = rtcMembers.flatMap(({ userId, deviceId }) => {
+    const p = liveKitParticipants.find(
+      (p) => p.identity === `${userId}:${deviceId}`,
+    );
+    return p === undefined ? [] : [p];
+  });
+  const livekitRoom = {
+    remoteParticipants: new Map<string, Participant>(
+      liveKitParticipants.map((p) => [p.identity, p]),
+    ),
+  } as unknown as Room;
+
+  if (explicitTracks?.length ?? 0 > 0) {
+    tracks = explicitTracks!.map(({ participantId, source, kind }) => {
+      const participant =
+        liveKitParticipants.find((p) => p.identity === participantId) ??
+        mockRemoteParticipant({ identity: participantId });
+      return mockTrack(participant, kind, source);
+    });
+  } else {
+    tracks = participants.map((p) => mockTrack(p));
+  }
+
+  vi.mocked(useTracks).mockReturnValue(tracks);
+  return render(
     <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer
-        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      <LivekitRoomAudioRenderer
+        validIdentities={participants.map((p) => p.identity)}
+        livekitRoom={livekitRoom}
+        url={""}
       />
     </MediaDevicesProvider>,
   );
+}
+
+it("should render for member", () => {
+  const { container, queryAllByTestId } = renderTestComponent(
+    [{ userId: "@alice", deviceId: "DEV0" }],
+    ["@alice:DEV0"],
+  );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(1);
 });
 
 it("should not render without member", () => {
-  const memberships = [
-    { sender: "othermember", deviceId: "123" },
-  ] as CallMembership[];
-  const { container, queryAllByTestId } = render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer members={memberships} />
-    </MediaDevicesProvider>,
+  const { container, queryAllByTestId } = renderTestComponent(
+    [{ userId: "@bob", deviceId: "DEV0" }],
+    ["@alice:DEV0"],
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(0);
 });
 
+const TEST_CASES: {
+  name: string;
+  rtcUsers: { userId: string; deviceId: string }[];
+  livekitParticipantIdentities: string[];
+  explicitTracks?: {
+    participantId: string;
+    kind: Track.Kind;
+    source: Track.Source;
+  }[];
+  expectedAudioTracks: number;
+}[] = [
+  {
+    name: "single user single device",
+    rtcUsers: [
+      { userId: "@alice", deviceId: "DEV0" },
+      { userId: "@alice", deviceId: "DEV1" },
+      { userId: "@bob", deviceId: "DEV0" },
+    ],
+    livekitParticipantIdentities: ["@alice:DEV0", "@bob:DEV0", "@alice:DEV1"],
+    expectedAudioTracks: 3,
+  },
+  // Charlie is a rtc member but not in livekit
+  {
+    name: "Charlie is rtc member but not in livekit",
+    rtcUsers: [
+      { userId: "@alice", deviceId: "DEV0" },
+      { userId: "@bob", deviceId: "DEV0" },
+      { userId: "@charlie", deviceId: "DEV0" },
+    ],
+    livekitParticipantIdentities: ["@alice:DEV0", "@bob:DEV0"],
+    expectedAudioTracks: 2,
+  },
+  // Charlie is in livekit but not rtc member
+  {
+    name: "Charlie is in livekit but not rtc member",
+    rtcUsers: [
+      { userId: "@alice", deviceId: "DEV0" },
+      { userId: "@bob", deviceId: "DEV0" },
+    ],
+    livekitParticipantIdentities: ["@alice:DEV0", "@bob:DEV0", "@charlie:DEV0"],
+    expectedAudioTracks: 2,
+  },
+  {
+    name: "no audio track, only video track",
+    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
+    livekitParticipantIdentities: ["@alice:DEV0"],
+    explicitTracks: [
+      {
+        participantId: "@alice:DEV0",
+        kind: Track.Kind.Video,
+        source: Track.Source.Camera,
+      },
+    ],
+    expectedAudioTracks: 0,
+  },
+  {
+    name: "Audio track from unknown source",
+    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
+    livekitParticipantIdentities: ["@alice:DEV0"],
+    explicitTracks: [
+      {
+        participantId: "@alice:DEV0",
+        kind: Track.Kind.Audio,
+        source: Track.Source.Unknown,
+      },
+    ],
+    expectedAudioTracks: 1,
+  },
+  {
+    name: "Audio track from other device",
+    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
+    livekitParticipantIdentities: ["@alice:DEV0"],
+    explicitTracks: [
+      {
+        participantId: "@alice:DEV1",
+        kind: Track.Kind.Audio,
+        source: Track.Source.Microphone,
+      },
+    ],
+    expectedAudioTracks: 0,
+  },
+  {
+    name: "two audio tracks, microphone and screenshare",
+    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
+    livekitParticipantIdentities: ["@alice:DEV0"],
+    explicitTracks: [
+      {
+        participantId: "@alice:DEV0",
+        kind: Track.Kind.Audio,
+        source: Track.Source.Microphone,
+      },
+      {
+        participantId: "@alice:DEV0",
+        kind: Track.Kind.Audio,
+        source: Track.Source.ScreenShareAudio,
+      },
+    ],
+    expectedAudioTracks: 2,
+  },
+];
+
+it.each(TEST_CASES)(
+  `should render sound test cases $name`,
+  ({
+    rtcUsers,
+    livekitParticipantIdentities,
+    explicitTracks,
+    expectedAudioTracks,
+  }) => {
+    const { queryAllByTestId } = renderTestComponent(
+      rtcUsers,
+      livekitParticipantIdentities,
+      explicitTracks,
+    );
+    expect(queryAllByTestId("audio")).toHaveLength(expectedAudioTracks);
+  },
+);
+
 it("should not setup audioContext gain and pan if there is no need to.", () => {
-  render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer
-        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-      />
-    </MediaDevicesProvider>,
-  );
+  renderTestComponent([{ userId: "@bob", deviceId: "DEV0" }], ["@bob:DEV0"]);
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
 
   expect(audioTrack.setAudioContext).toHaveBeenCalledTimes(1);
@@ -100,13 +269,8 @@ it("should setup audioContext gain and pan", () => {
     pan: 1,
     volume: 0.1,
   });
-  render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer
-        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-      />
-    </MediaDevicesProvider>,
-  );
+
+  renderTestComponent([{ userId: "@bob", deviceId: "DEV0" }], ["@bob:DEV0"]);
 
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
   expect(audioTrack.setAudioContext).toHaveBeenCalled();

src/livekit/MatrixAudioRenderer.tsx

@@ -6,28 +6,33 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { getTrackReferenceId } from "@livekit/components-core";
+import { type Room as LivekitRoom } from "livekit-client";
 import { type RemoteAudioTrack, Track } from "livekit-client";
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import {
   useTracks,
   AudioTrack,
   type AudioTrackProps,
 } from "@livekit/components-react";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { type ParticipantId } from "matrix-js-sdk/lib/matrixrtc";
 
 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import * as controls from "../controls";
 
-const logger = rootLogger.getChild("[MatrixAudioRenderer]");
 export interface MatrixAudioRendererProps {
   /**
-   * The list of participants to render audio for.
-   * This list needs to be composed based on the matrixRTC members so that we do not play audio from users
-   * that are not expected to be in the rtc session.
+   * The service URL of the LiveKit room.
    */
-  members: CallMembership[];
+  url: string;
+  livekitRoom: LivekitRoom;
+  /**
+   * The list of participant identities to render audio for.
+   * This list needs to be composed based on the matrixRTC members so that we do not play audio from users
+   * that are not expected to be in the rtc session (local user is excluded).
+   */
+  validIdentities: ParticipantId[];
   /**
    * If set to `true`, mutes all audio tracks rendered by the component.
    * @remarks
@@ -36,9 +41,9 @@ export interface MatrixAudioRendererProps {
   muted?: boolean;
 }
 
+const prefixedLogger = logger.getChild("[MatrixAudioRenderer]");
 /**
- * The `MatrixAudioRenderer` component is a drop-in solution for adding audio to your LiveKit app.
- * It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
+ * Takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
  *
  * It also takes care of the earpiece audio configuration for iOS devices.
  * This is done by using the WebAudio API to create a stereo pan effect that mimics the earpiece audio.
@@ -50,35 +55,12 @@ export interface MatrixAudioRendererProps {
  * ```
  * @public
  */
-export function MatrixAudioRenderer({
-  members,
+export function LivekitRoomAudioRenderer({
+  url,
+  livekitRoom,
+  validIdentities,
   muted,
 }: MatrixAudioRendererProps): ReactNode {
-  const validIdentities = useMemo(
-    () =>
-      new Set(members?.map((member) => `${member.sender}:${member.deviceId}`)),
-    [members],
-  );
-
-  const loggedInvalidIdentities = useRef(new Set<string>());
-
-  /**
-   * Log an invalid livekit track identity.
-   * A invalid identity is one that does not match any of the matrix rtc members.
-   *
-   * @param identity The identity of the track that is invalid
-   * @param validIdentities The list of valid identities
-   */
-  const logInvalid = (identity: string, validIdentities: Set<string>): void => {
-    if (loggedInvalidIdentities.current.has(identity)) return;
-    logger.warn(
-      `Audio track ${identity} has no matching matrix call member`,
-      `current members: ${Array.from(validIdentities.values())}`,
-      `track will not get rendered`,
-    );
-    loggedInvalidIdentities.current.add(identity);
-  };
-
   const tracks = useTracks(
     [
       Track.Source.Microphone,
@@ -88,25 +70,25 @@ export function MatrixAudioRenderer({
     {
       updateOnlyOn: [],
       onlySubscribed: true,
+      room: livekitRoom,
     },
-  ).filter((ref) => {
-    const isValid = validIdentities?.has(ref.participant.identity);
-    if (!isValid && !ref.participant.isLocal)
-      logInvalid(ref.participant.identity, validIdentities);
-    return (
-      !ref.participant.isLocal &&
-      ref.publication.kind === Track.Kind.Audio &&
-      isValid
-    );
-  });
-  useEffect(() => {
-    if (!tracks.some((t) => !validIdentities.has(t.participant.identity))) {
-      logger.debug(
-        `All audio tracks have a matching matrix call member identity.`,
-      );
-      loggedInvalidIdentities.current.clear();
-    }
-  }, [tracks, validIdentities]);
+  )
+    // Only keep audio tracks
+    .filter((ref) => ref.publication.kind === Track.Kind.Audio)
+    // Only keep tracks from participants that are in the validIdentities list
+    .filter((ref) => {
+      const isValid = validIdentities.includes(ref.participant.identity);
+      if (!isValid) {
+        // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
+        prefixedLogger.warn(
+          `Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`,
+          `current members: ${validIdentities.join()}`,
+          `track will not get rendered`,
+        );
+        return false;
+      }
+      return true;
+    });
 
   // This component is also (in addition to the "only play audio for connected members" logic above)
   // responsible for mimicking earpiece audio on iPhones.
@@ -182,9 +164,13 @@ interface StereoPanAudioTrackProps {
 /**
  * This wraps `livekit.AudioTrack` to allow adding audio nodes to a track.
  * It main purpose is to remount the AudioTrack component when switching from
- * audiooContext to normal audio playback.
+ * 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({
@@ -202,7 +188,7 @@ function AudioTrackWithAudioNodes({
   const [trackReady, setTrackReady] = useReactiveState(
     () => false,
     // We only want the track to reset once both (audioNodes and audioContext) are set.
-    // for unsetting the audioContext its enough if one of the the is undefined.
+    // for unsetting the audioContext its enough if one of the two is undefined.
     [audioContext && audioNodes],
   );
 

src/livekit/TrackProcessorContext.tsx

@@ -1,7 +1,7 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024-2025 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
@@ -19,14 +19,22 @@ import {
   useMemo,
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
+import { combineLatest, map, type Observable } from "rxjs";
+import { useObservable } from "observable-hooks";
 
 import {
   backgroundBlur as backgroundBlurSettings,
   useSetting,
 } from "../settings/settings";
 import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
+import { type Behavior } from "../state/Behavior";
+import { type ObservableScope } from "../state/ObservableScope";
 
-type ProcessorState = {
+//TODO-MULTI-SFU: This is not yet fully there.
+// it is a combination of exposing observable and react hooks.
+// preferably we should not make this a context anymore and instead just a vm?
+
+export type ProcessorState = {
   supported: boolean | undefined;
   processor: undefined | ProcessorWrapper<BackgroundOptions>;
 };
@@ -42,6 +50,43 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
+export function useTrackProcessorObservable$(): Observable<ProcessorState> {
+  const state = use(ProcessorContext);
+  if (state === undefined)
+    throw new Error(
+      "useTrackProcessor must be used within a ProcessorProvider",
+    );
+  const state$ = useObservable(
+    (init$) => init$.pipe(map(([init]) => init)),
+    [state],
+  );
+
+  return state$;
+}
+
+/**
+ * Updates your video tracks to always use the given processor.
+ */
+export const trackProcessorSync = (
+  scope: ObservableScope,
+  videoTrack$: Behavior<LocalVideoTrack | null>,
+  processor$: Behavior<ProcessorState>,
+): void => {
+  combineLatest([videoTrack$, processor$])
+    .pipe(scope.bind())
+    .subscribe(([videoTrack, processorState]) => {
+      if (!processorState) return;
+      if (!videoTrack) return;
+      const { processor } = processorState;
+      if (processor && !videoTrack.getProcessor()) {
+        void videoTrack.setProcessor(processor);
+      }
+      if (!processor && videoTrack.getProcessor()) {
+        void videoTrack.stopProcessor();
+      }
+    });
+};
+
 export const useTrackProcessorSync = (
   videoTrack: LocalVideoTrack | null,
 ): void => {

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

@@ -7,25 +7,51 @@ Please see LICENSE in the repository root for full details.
 
 import { type IOpenIDToken, type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
-import { useEffect, useState } from "react";
-import { type LivekitFocus } from "matrix-js-sdk/lib/matrixrtc";
 
-import { useActiveLivekitFocus } from "../room/useActiveFocus";
-import { useErrorBoundary } from "../useErrorBoundary";
 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;
 }
 
-export function sfuConfigEquals(a?: SFUConfig, b?: SFUConfig): boolean {
-  if (a === undefined && b === undefined) return true;
-  if (a === undefined || b === undefined) return false;
-
-  return a.jwt === b.jwt && a.url === b.url;
+/**
+ * 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
@@ -33,39 +59,21 @@ export type OpenIDClientParts = Pick<
   MatrixClient,
   "getOpenIdToken" | "getDeviceId"
 >;
-
-export function useOpenIDSFU(
-  client: OpenIDClientParts,
-  rtcSession: MatrixRTCSession,
-): SFUConfig | undefined {
-  const [sfuConfig, setSFUConfig] = useState<SFUConfig | undefined>(undefined);
-
-  const activeFocus = useActiveLivekitFocus(rtcSession);
-  const { showErrorBoundary } = useErrorBoundary();
-
-  useEffect(() => {
-    if (activeFocus) {
-      getSFUConfigWithOpenID(client, activeFocus).then(
-        (sfuConfig) => {
-          setSFUConfig(sfuConfig);
-        },
-        (e) => {
-          showErrorBoundary(new FailToGetOpenIdToken(e));
-          logger.error("Failed to get SFU config", e);
-        },
-      );
-    } else {
-      setSFUConfig(undefined);
-    }
-  }, [client, activeFocus, showErrorBoundary]);
-
-  return sfuConfig;
-}
-
+/**
+ * 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,
-  activeFocus: LivekitFocus,
-): Promise<SFUConfig | undefined> {
+  serviceUrl: string,
+  matrixRoomId: string,
+): Promise<SFUConfig> {
   let openIdToken: IOpenIDToken;
   try {
     openIdToken = await doNetworkOperationWithRetry(async () =>
@@ -78,26 +86,26 @@ export async function getSFUConfigWithOpenID(
   }
   logger.debug("Got openID token", openIdToken);
 
-  try {
-    logger.info(
-      `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`,
-    );
-    const sfuConfig = await getLiveKitJWT(
-      client,
-      activeFocus.livekit_service_url,
-      activeFocus.livekit_alias,
-      openIdToken,
-    );
-    logger.info(`Got JWT from call's active focus URL.`);
+  logger.info(`Trying to get JWT for focus ${serviceUrl}...`);
+  const sfuConfig = await getLiveKitJWT(
+    client,
+    serviceUrl,
+    matrixRoomId,
+    openIdToken,
+  );
+  logger.info(`Got JWT from call's active focus URL.`);
 
-    return sfuConfig;
-  } catch (e) {
-    logger.warn(
-      `Failed to get JWT from RTC session's active focus URL of ${activeFocus.livekit_service_url}.`,
-      e,
-    );
-    return undefined;
-  }
+  // 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(
@@ -105,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",
@@ -123,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 });
   }
 }