Backport: Update earpiece overlay button text for clarity (#3370)

* Update earpiece overlay button text for clarity

* update test snapshots

.eslintrc.cjs

@@ -28,6 +28,8 @@ module.exports = {
   rules: {
     "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",
@@ -42,17 +44,8 @@ module.exports = {
     ],
     // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
-    "rxjs/finnish": ["error", { names: { "^this$": false } }],
+    "rxjs/finnish": "error",
   },
-  overrides: [
-    {
-      files: ["src/*/**"],
-      rules: {
-        // In application code we should use the js-sdk logger, never console directly.
-        "no-console": ["error"],
-      },
-    },
-  ],
   settings: {
     react: {
       version: "detect",

.github/workflows/blocked.yaml

@@ -10,7 +10,7 @@ jobs:
       pull-requests: read
     steps:
       - name: Add notice
-        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # 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@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # 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@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
+        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.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@c1e51972afc2121e065aed6d45c65596fe445f3f # v5.8.0
+        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.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@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
+        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
+        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6.16.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@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # 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,PR-Breaking-Change"
+          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies"
           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@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache

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

@@ -44,8 +44,6 @@ 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
@@ -85,7 +83,7 @@ jobs:
         run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
       - name: Upload
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -103,7 +101,7 @@ jobs:
       id-token: write # required for the provenance flag on npm publish
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -144,7 +142,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -165,8 +163,6 @@ 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
@@ -199,7 +195,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
         with:
           path: element-call
 
@@ -212,7 +208,7 @@ jobs:
           path: element-call/embedded/ios/Sources/dist
 
       - name: Checkout element-call-swift
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
         with:
           repository: element-hq/element-call-swift
           path: element-call-swift
@@ -264,7 +260,7 @@ jobs:
           echo "iOS: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}"
       - name: Add release notes
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           append_body: true
           body: |

.github/workflows/publish.yaml

@@ -42,7 +42,7 @@ jobs:
       - name: Create Checksum
         run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
       - name: Upload
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # 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@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           append_body: true
           body: |

.github/workflows/test.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # 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@5a1091511ad55cbe89839c7260b706298ca349f7 # v5
+        uses: codecov/codecov-action@18283e04ce6e62d37312384ff67231eb8fd56d24 # 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: 60
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Enable Corepack
         run: corepack enable
       - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4

.github/workflows/translations-download.yaml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: Enable Corepack
         run: corepack enable

.github/workflows/translations-upload.yaml

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

.gitignore

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

README.md

@@ -143,8 +143,7 @@ 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 [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
-via `livekit_service_url`.
+points them to a Matrix LiveKit JWT Auth Service via `livekit_service_url`.
 
 ### Backend Selection
 
@@ -155,9 +154,9 @@ 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 **[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.
+- 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.
 
 The example below illustrates how backend selection works across **Matrix
 federation**, using the setup from sites A, B, and C. It demonstrates backend
@@ -206,22 +205,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
-including federation:
+whole stack of components which is required for a local development environment:
 
-- 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 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 `localhost` Certificate Authority (CA) for Transport Layer Security (TLS)
-  - Hostnames: `m.localhost`, `*.m.localhost`, `*.othersite.m.localhost`
+  - Hostnames: `m.localhost`, `*.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` and `synapse.othersite.m.localhost`
-  - MatrixRTC backend: `matrix-rtc.m.localhost` and `matrix-rtc.othersite.m.localhost`
+  - Synapse homeserver: `synapse.m.localhost`
+  - MatrixRTC backend: `matrix-rtc.m.localhost`
   - Local Element Call development `call.m.localhost` via `yarn dev --host `
-  - Element Web `app.m.localhost` and `app.othersite.m.localhost`
-  - Note certificates will expire on Thr, 20 September 2035 14:27:35 CEST
+  - Element Web `app.m.localhost`
+  - Note certificates will expire on Thu, 03 May 2035 10:32:02 GMT
 
 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

@@ -1,64 +0,0 @@
-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,18 +19,8 @@ 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: "synapse.othersite.m.localhost"
-    accept_keys_insecurely: true
+  - server_name: "matrix.org"
 
 experimental_features:
   # MSC3266: Room summary API. Used for knocking over federation
@@ -38,21 +28,12 @@ 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:
@@ -64,3 +45,10 @@ 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

@@ -1,20 +0,0 @@
-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,6 +6,11 @@ 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
@@ -16,5 +21,3 @@ turn:
   external_tls: true
 keys:
   devkey: secret
-room:
-  auto_create: false

backend/dev_nginx.conf

@@ -1,5 +1,4 @@
 # Synapse reverse proxy including .well-known/matrix/client
-# domain synapse.m.localhost
 server {
     listen                  80;
     listen                  [::]:80;
@@ -27,53 +26,14 @@ 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 ~ ^(/_matrix|/_synapse/client)  {
-        proxy_pass "http://homeserver:8008";       
+    location / {
+        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;
@@ -81,7 +41,6 @@ server {
 }
 
 # MatrixRTC reverse proxy
-# domain matrix-rtc.m.localhost
 # - MatrixRTC Authorization Service
 # - LiveKit SFU websocket signaling connection
 upstream jwt-auth-services {
@@ -90,14 +49,16 @@ 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/ {
 
@@ -133,54 +94,6 @@ 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;
@@ -246,36 +159,3 @@ 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-----
-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
+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
 -----END CERTIFICATE-----

backend/dev_tls_local-ca.key

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-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==
+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=
 -----END PRIVATE KEY-----

backend/dev_tls_m.localhost.crt

@@ -1,21 +1,21 @@
 -----BEGIN CERTIFICATE-----
-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
+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=
 -----END CERTIFICATE-----

backend/dev_tls_m.localhost.key

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-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=
+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=
 -----END PRIVATE KEY-----

backend/dev_tls_setup

@@ -34,6 +34,5 @@ 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

@@ -1,53 +0,0 @@
-{
-  "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

@@ -1,81 +0,0 @@
-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,18 +19,8 @@ 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: "synapse.othersite.m.localhost"
-    accept_keys_insecurely: true
+  - server_name: "matrix.org"
 
 experimental_features:
   # MSC3266: Room summary API. Used for knocking over federation
@@ -44,13 +34,6 @@ 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:
@@ -61,10 +44,6 @@ rc_message:
   per_second: 10000
   burst_count: 10000
 
-rc_delayed_event_mgmt:
-  per_second: 10000
-  burst_count: 10000
-
 rc_login:
   address:
     per_second: 10000
@@ -79,3 +58,10 @@ 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

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

config/config.devenv.json

@@ -14,6 +14,6 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 100
+    "network_error_retry_ms": 4000
   }
 }

config/config.sample.json

@@ -17,6 +17,6 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 100
+    "network_error_retry_ms": 4000
   }
 }

config/config_netlify_preview.json

@@ -11,7 +11,7 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 100
+    "network_error_retry_ms": 4000
   },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",

dev-backend-docker-compose.yml

@@ -14,7 +14,6 @@ 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
@@ -24,31 +23,8 @@ 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
-    pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
     restart: unless-stopped
@@ -66,30 +42,20 @@ services:
     networks:
       - ecbackend
 
-  livekit-1:
-    image: livekit/livekit-server:latest
-    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…)
+  redis:
+    image: redis:6-alpine
+    command: redis-server /etc/redis.conf
     ports:
       # HOST_PORT:CONTAINER_PORT
-      - 17880:17880/tcp
-      - 17881:17881/tcp
-      - 17882:17882/tcp
-      - 50300-50400:50300-50400/udp
+      - 6379:6379
     volumes:
-      - ./backend/dev_livekit-othersite.yaml:/etc/livekit.yaml:Z
+      - ./backend/redis.conf:/etc/redis.conf: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
@@ -104,24 +70,6 @@ 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
@@ -134,24 +82,10 @@ 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
@@ -167,9 +101,4 @@ services:
     depends_on:
       - synapse
     networks:
-      ecbackend:
-        aliases:
-          - synapse.m.localhost
-          - synapse.othersite.m.localhost
-          - matrix-rtc.m.localhost
-          - matrix-rtc.othersite.m.localhost
+      - ecbackend

docs/self-hosting.md

@@ -64,7 +64,7 @@ rc_delayed_event_mgmt:
 ```
 
 As a prerequisite for the
-[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+[Matrix LiveKit JWT auth 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
-[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+[Matrix Livekit JWT auth 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` |
-| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
+| [Matrix Livekit JWT auth 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;
 
-      # MatrixRTC Authorization Service running at port 8080
+      # JWT Service running at port 8080
       proxy_pass http://localhost:8080/;
     }
 
@@ -126,32 +126,6 @@ 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_addr}
-    header_up X-Forwarded-For {remote_addr}
-  }
-}
-
-# 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_addr}
-    header_up X-Forwarded-For {remote_addr}
-  }
-}
-```
-
 #### MatrixRTC backend announcement
 
 > [!IMPORTANT]
@@ -171,6 +145,10 @@ handle {
     {
         "type": "livekit",
         "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
+    },
+    {
+        "type": "nextgen_new_foci_type",
+        "props_for_nextgen_foci": "val"
     }
 ]
 ```
@@ -240,7 +218,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
@@ -283,7 +261,6 @@ 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,7 +48,6 @@ 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.                                                                                                                                                                                                                                                           |
@@ -60,6 +59,7 @@ 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.                                                                                                                                                                                                                                                                                                         |
@@ -69,9 +69,6 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `skipLobby` (deprecated: use `intent` instead)          | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
 | `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
 

embedded/android/gradle/libs.versions.toml

@@ -2,11 +2,11 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format
 
 [versions]
-android_gradle_plugin = "8.11.1"
+android_gradle_plugin = "8.10.1"
 
 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.34.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.32.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.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

embedded/android/lib/build.gradle.kts

@@ -5,6 +5,8 @@
  * 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)
@@ -25,7 +27,7 @@ android {
 }
 
 mavenPublishing {
-    publishToMavenCentral(automaticRelease = true)
+    publishToMavenCentral(SonatypeHost.CENTRAL_PORTAL, automaticRelease = true)
 
     signAllPublications()
 

i18next-parser.config.ts

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

knip.ts

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

locales/cs/app.json

@@ -82,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 hovoru. Zkontrolujte, zda máte správný odkaz, nebo<2> vytvořte nový</2>.</0>",
+    "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>",
     "connection_lost": "Spojení ztraceno",
     "connection_lost_description": "Hovor byl přerušen.",
     "e2ee_unsupported": "Nekompatibilní prohlížeč",
@@ -105,11 +105,6 @@
     "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",
@@ -182,8 +177,7 @@
       "change_device_button": "Změnit zvukové zařízení",
       "default": "Výchozí",
       "default_named": "Výchozí <2> ({{name}}) </2>",
-      "handset": "Sluchátko",
-      "loudspeaker": "Reproduktor",
+      "earpiece": "Sluchátka",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Reproduktor",

locales/da/app.json

@@ -82,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 <2> opret et nyt</2>.</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<1> opret et nyt</1>.</0>",
     "connection_lost": "Forbindelsen gik tabt",
     "connection_lost_description": "Du blev afbrudt fra opkaldet.",
     "e2ee_unsupported": "Inkompatibel browser",
@@ -94,8 +94,6 @@
     "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": {
@@ -107,11 +105,6 @@
     "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",
@@ -183,8 +176,7 @@
       "change_device_button": "Skift lydenhed",
       "default": "Standard",
       "default_named": "Standard <2>({{name}})</2>",
-      "handset": "Telefon",
-      "loudspeaker": "Højttaler",
+      "earpiece": "Høretelefon",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Højttaler",

locales/de/app.json

@@ -55,7 +55,6 @@
     "profile": "Profil",
     "reaction": "Reaktion",
     "reactions": "Reaktionen",
-    "reconnecting": "Verbindung wird wiederhergestellt...",
     "settings": "Einstellungen",
     "unencrypted": "Nicht verschlüsselt",
     "username": "Benutzername",
@@ -80,10 +79,15 @@
     "use_to_device_key_transport": "To-Device media E2EE Schlüssel-Transport verwenden. Falls ein anderer Teilnehmer bereits den Raumschlüssel-Transport verwendet, wird automatisch auf Raumschlüssel-Transport zurückgegriffen."
   },
   "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
+  "earpiece": {
+    "overlay_back_button": "Zurück zum Lautsprechermodus",
+    "overlay_description": "Nur bei App im Vordergrund nutzbar",
+    "overlay_title": "Ohrhörer Modus"
+  },
   "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. Es sollte geprüft werden, ob der Link korrekt ist, oder <2>ein neuer erstellt werden</2>.</0>",
+    "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 <2> erstellen Sie einen neuen</2>. </0>",
     "connection_lost": "Verbindung verloren",
     "connection_lost_description": "Ihre Verbindung zum Anruf wurde unterbrochen.",
     "e2ee_unsupported": "Inkompatibler Browser",
@@ -95,8 +99,6 @@
     "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": {
@@ -108,11 +110,6 @@
     "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",
@@ -184,7 +181,7 @@
       "change_device_button": "Audiogerät wechseln",
       "default": "Standard",
       "default_named": "Standard<2> ({{name}} )</2>",
-      "handset": "Ohrhörer",
+      "earpiece": "Ohrhörer",
       "loudspeaker": "Lautsprecher",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon{{n}}",

locales/en/app.json

@@ -55,7 +55,6 @@
     "profile": "Profile",
     "reaction": "Reaction",
     "reactions": "Reactions",
-    "reconnecting": "Reconnecting…",
     "settings": "Settings",
     "unencrypted": "Not encrypted",
     "username": "Username",
@@ -72,26 +71,19 @@
     "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",
-    "url_params": "URL parameters"
+    "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"
   },
   "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",
@@ -104,11 +96,9 @@
     "generic_description": "Submitting debug logs will help us track down the problem.",
     "insufficient_capacity": "Insufficient capacity",
     "insufficient_capacity_description": "The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.",
-    "matrix_rtc_transport_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
+    "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
     "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": {
@@ -120,11 +110,6 @@
     "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",
@@ -196,7 +181,7 @@
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
-      "handset": "Handset",
+      "earpiece": "Earpiece",
       "loudspeaker": "Loudspeaker",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",

locales/et/app.json

@@ -79,6 +79,11 @@
     "use_to_device_key_transport": "Kasuta seadmepõhist krüptovõtmete vahetust. Kui jututoa liige peaks saatma jututoakohase krüptovõtme, siis kasuta jututoakohast võtmevahetust"
   },
   "disconnected_banner": "Võrguühendus serveriga on katkenud.",
+  "earpiece": {
+    "overlay_back_button": "Tagasi videovaatesse",
+    "overlay_description": "Toimib vaid rakenduse kasutamise ajal",
+    "overlay_title": "Toimib vaid kuularitega"
+  },
   "error": {
     "call_is_not_supported": "Kõne pole toetatud",
     "call_not_found": "Kõnet ei leidu",
@@ -94,8 +99,6 @@
     "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": {
@@ -107,10 +110,6 @@
     "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",
@@ -182,6 +181,7 @@
       "change_device_button": "Muuda heliseadet",
       "default": "Vaikimisi",
       "default_named": "Vaikimisi <2>({{name}})</2>",
+      "earpiece": "Kuular",
       "loudspeaker": "Valjuhääldi",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",

locales/ru/app.json

@@ -177,6 +177,7 @@
       "change_device_button": "Изменить аудиоустройство",
       "default": "По умолчанию",
       "default_named": "По умолчанию <2>({{name}})</2>",
+      "earpiece": "Наушник",
       "microphone": "Микрофон",
       "microphone_numbered": "Микрофон {{n}}",
       "speaker": "Динамик",

locales/sk/app.json

@@ -79,6 +79,11 @@
     "use_to_device_key_transport": "Používa sa na prenos kľúča zariadenia. Toto sa vráti k prenosu kľúča miestnosti, keď iný účastník hovoru poslal kľúč od miestnosti"
   },
   "disconnected_banner": "Spojenie so serverom sa stratilo.",
+  "earpiece": {
+    "overlay_back_button": "Späť na video",
+    "overlay_description": "Funguje iba pri používaní aplikácie",
+    "overlay_title": "Režim iba so slúchadlami"
+  },
   "error": {
     "call_is_not_supported": "Hovor nie je podporovaný",
     "call_not_found": "Hovor nebol nájdený",
@@ -177,6 +182,7 @@
       "change_device_button": "Zmeniť zvukové zariadenie",
       "default": "Predvolené",
       "default_named": "Predvolené <2>({{name}})</2>",
+      "earpiece": "Slúchadlo",
       "loudspeaker": "Reproduktor",
       "microphone": "Mikrofón",
       "microphone_numbered": "Mikrofón {{n}}",

locales/sv/app.json

@@ -82,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 <2>skapa en ny</2>.</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 <1>skapa en ny</1>.</0>",
     "connection_lost": "Anslutning förlorad",
     "connection_lost_description": "Du kopplades bort från samtalet.",
     "e2ee_unsupported": "Inkompatibel webbläsare",
@@ -94,8 +94,6 @@
     "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": {
@@ -107,11 +105,6 @@
     "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",
@@ -183,8 +176,7 @@
       "change_device_button": "Byt ljudenhet",
       "default": "Förval",
       "default_named": "Förval <2>({{name}})</2>",
-      "handset": "Telefonlur",
-      "loudspeaker": "Högtalare",
+      "earpiece": "Hörsnäcka",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Högtalare",

package.json

@@ -44,17 +44,17 @@
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
-    "@livekit/protocol": "^1.42.2",
+    "@livekit/protocol": "^1.38.0",
     "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/core": "^2.0.0",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.203.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.201.0",
     "@opentelemetry/resources": "^2.0.0",
     "@opentelemetry/sdk-trace-base": "^2.0.0",
     "@opentelemetry/sdk-trace-web": "^2.0.0",
     "@opentelemetry/semantic-conventions": "^1.25.1",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.52.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
@@ -81,7 +81,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": "^6.0.0",
+    "@vector-im/compound-design-tokens": "^4.0.0",
     "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",
@@ -99,7 +99,6 @@
     "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",
@@ -109,7 +108,7 @@
     "livekit-client": "^2.13.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=toger5/sticky-events&commit=e7f5bec51b6f70501a025b79fe5021c933385b21",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=develop",
     "matrix-widget-api": "^1.13.0",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
@@ -130,7 +129,7 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^7.0.0",
+    "vite": "^6.0.0",
     "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",

playwright-backend-docker-compose.override.yml

@@ -2,6 +2,3 @@ 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/create-call.spec.ts

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

@@ -72,56 +72,3 @@ 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,
-}) => {
-  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: "FAKE",
-        }),
-      }),
-  );
-
-  // 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/widget-user.ts

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

playwright/reconnect.spec.ts

@@ -1,60 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, 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

@@ -1,75 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, 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

@@ -100,5 +100,5 @@ test("When creator left, avoid reconnect to the same SFU", async ({
   // https://github.com/element-hq/element-call/issues/3344
   // The app used to request a new jwt token then to reconnect to the SFU
   expect(wsConnectionCount).toBe(1);
-  expect(sfuGetCallCount).toBe(2 /* the first one is for the warmup */);
+  expect(sfuGetCallCount).toBe(1);
 });

playwright/widget/simple-create.spec.ts

@@ -49,10 +49,7 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
 
   // Check the join indicator on the room list
   await expect(
-    brooks.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame()
-      .getByRole("button", { name: "End call" }),
+    brooks.page.locator("div").filter({ hasText: /^Joined • 1$/ }),
   ).toBeVisible();
 
   // Join from the other side
@@ -62,28 +59,26 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
   ).toBeVisible();
   await whistler.page.getByRole("button", { name: "Join" }).click();
 
-  // 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 expect(
+    whistler.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame()
+      .getByTestId("lobby_joinCall"),
+  ).toBeVisible();
 
-  // 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 whistler.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame()
+    .getByTestId("lobby_joinCall")
+    .click();
 
-  // await expect(
-  //   brooks.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();
 
   // Whistler leaves
   await whistler.page.waitForTimeout(1000);

src/App.tsx

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

src/ErrorView.module.css

@@ -12,7 +12,6 @@
 
 .error > h1 {
   margin: 0;
-  text-align: center;
 }
 
 .error > p {

src/ErrorView.tsx

@@ -99,7 +99,7 @@ export const ErrorView: FC<Props> = ({
   return (
     <div className={styles.error}>
       <BigIcon className={styles.icon}>
-        <Icon aria-hidden />
+        <Icon />
       </BigIcon>
       <Heading as="h1" weight="semibold" size="md">
         {title}

src/Header.tsx

@@ -17,38 +17,27 @@ 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>
-      {disconnectedBanner && <DisconnectedBanner />}
-    </>
+    <header
+      ref={ref}
+      className={classNames(styles.header, className)}
+      {...rest}
+    >
+      {children}
+    </header>
   );
 };
 

src/MediaDevicesContext.ts

@@ -23,6 +23,14 @@ 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,8 +35,6 @@ 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,26 +19,10 @@ 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,
-  focusUrl,
-  ...rest
-}) => {
+export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
   const [showModal, setShowModal] = useState(false);
   const [modalContents, setModalContents] = useState<
     "video" | "audio" | "none"
@@ -71,13 +55,6 @@ export const RTCConnectionStats: FC<Props> = ({
           </pre>
         </div>
       </Modal>
-      {focusUrl && (
-        <div>
-          <Text as="span" size="xs" title="focusURL">
-            &nbsp;{extractDomain(focusUrl)}
-          </Text>
-        </div>
-      )}
       {audio && (
         <div>
           <Button

src/Toast.tsx

@@ -45,12 +45,6 @@ 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;
 }
 
 /**
@@ -62,7 +56,6 @@ export const Toast: FC<Props> = ({
   autoDismiss,
   children,
   Icon,
-  modal = true,
 }) => {
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -78,33 +71,29 @@ 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} modal={modal}>
-      {modal ? <DialogPortal>{content}</DialogPortal> : content}
+    <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>
   );
 };

src/UrlParams.test.ts

@@ -5,15 +5,12 @@ 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, onTestFinished, vi } from "vitest";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { describe, expect, it } from "vitest";
 
-import * as PlatformMod from "../src/Platform";
 import {
   getRoomIdentifierFromUrl,
-  computeUrlParams,
-  HeaderStyle,
   getUrlParams,
+  UserIntent,
 } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
@@ -85,16 +82,6 @@ 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", () => {
@@ -106,16 +93,16 @@ describe("UrlParams", () => {
 
   describe("preload", () => {
     it("defaults to false", () => {
-      expect(computeUrlParams().preload).toBe(false);
+      expect(getUrlParams().preload).toBe(false);
     });
 
     it("ignored in SPA mode", () => {
-      expect(computeUrlParams("?preload=true").preload).toBe(false);
+      expect(getUrlParams("?preload=true").preload).toBe(false);
     });
 
     it("respected in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?preload=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).preload,
       ).toBe(true);
@@ -124,20 +111,19 @@ describe("UrlParams", () => {
 
   describe("returnToLobby", () => {
     it("is false in SPA mode", () => {
-      expect(computeUrlParams("?returnToLobby=true").returnToLobby).toBe(false);
+      expect(getUrlParams("?returnToLobby=true").returnToLobby).toBe(false);
     });
 
     it("defaults to false in widget mode", () => {
       expect(
-        computeUrlParams(
-          "?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
-        ).returnToLobby,
+        getUrlParams("?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo")
+          .returnToLobby,
       ).toBe(false);
     });
 
     it("respected in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?returnToLobby=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).returnToLobby,
       ).toBe(true);
@@ -146,12 +132,12 @@ describe("UrlParams", () => {
 
   describe("userId", () => {
     it("is ignored in SPA mode", () => {
-      expect(computeUrlParams("?userId=asd").userId).toBe(null);
+      expect(getUrlParams("?userId=asd").userId).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?userId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).userId,
       ).toBe("asd");
@@ -160,12 +146,12 @@ describe("UrlParams", () => {
 
   describe("deviceId", () => {
     it("is ignored in SPA mode", () => {
-      expect(computeUrlParams("?deviceId=asd").deviceId).toBe(null);
+      expect(getUrlParams("?deviceId=asd").deviceId).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?deviceId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).deviceId,
       ).toBe("asd");
@@ -174,12 +160,12 @@ describe("UrlParams", () => {
 
   describe("baseUrl", () => {
     it("is ignored in SPA mode", () => {
-      expect(computeUrlParams("?baseUrl=asd").baseUrl).toBe(null);
+      expect(getUrlParams("?baseUrl=asd").baseUrl).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?baseUrl=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).baseUrl,
       ).toBe("asd");
@@ -189,179 +175,84 @@ describe("UrlParams", () => {
   describe("viaServers", () => {
     it("is ignored in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?viaServers=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).viaServers,
       ).toBe(null);
     });
 
     it("is parsed in SPA mode", () => {
-      expect(computeUrlParams("?viaServers=asd").viaServers).toBe("asd");
+      expect(getUrlParams("?viaServers=asd").viaServers).toBe("asd");
     });
   });
 
   describe("homeserver", () => {
     it("is ignored in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?homeserver=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).homeserver,
       ).toBe(null);
     });
 
     it("is parsed in SPA mode", () => {
-      expect(computeUrlParams("?homeserver=asd").homeserver).toBe("asd");
+      expect(getUrlParams("?homeserver=asd").homeserver).toBe("asd");
     });
   });
 
   describe("intent", () => {
-    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("defaults to unknown", () => {
+      expect(getUrlParams().intent).toBe(UserIntent.Unknown);
     });
 
     it("ignores intent if it is not a valid value", () => {
-      expect(computeUrlParams("?intent=foo")).toMatchObject(noIntentDefaults);
+      expect(getUrlParams("?intent=foo").intent).toBe(UserIntent.Unknown);
     });
 
     it("accepts start_call", () => {
-      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",
-      });
+      expect(getUrlParams("?intent=start_call").intent).toBe(
+        UserIntent.StartNewCall,
+      );
     });
 
     it("accepts join_existing", () => {
-      expect(
-        computeUrlParams(
-          "?intent=join_existing&widgetId=1234&parentUrl=parent.org",
-        ),
-      ).toMatchObject(joinExistingCallDefaults("desktop"));
+      expect(getUrlParams("?intent=join_existing").intent).toBe(
+        UserIntent.JoinExistingCall,
+      );
     });
   });
 
   describe("skipLobby", () => {
     it("defaults to false", () => {
-      expect(computeUrlParams().skipLobby).toBe(false);
+      expect(getUrlParams().skipLobby).toBe(false);
     });
 
     it("defaults to false if intent is start_call in SPA mode", () => {
-      expect(computeUrlParams("?intent=start_call").skipLobby).toBe(false);
+      expect(getUrlParams("?intent=start_call").skipLobby).toBe(false);
     });
 
-    it("defaults to false if intent is start_call in widget mode", () => {
+    it("defaults to true if intent is start_call in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?intent=start_call&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).skipLobby,
-      ).toBe(false);
+      ).toBe(true);
     });
 
     it("default to false if intent is join_existing", () => {
-      expect(computeUrlParams("?intent=join_existing").skipLobby).toBe(false);
+      expect(getUrlParams("?intent=join_existing").skipLobby).toBe(false);
     });
   });
   describe("header", () => {
     it("uses header if provided", () => {
-      expect(computeUrlParams("?header=app_bar&hideHeader=true").header).toBe(
+      expect(getUrlParams("?header=app_bar&hideHeader=true").header).toBe(
         "app_bar",
       );
-      expect(computeUrlParams("?header=none&hideHeader=false").header).toBe(
-        "none",
-      );
+      expect(getUrlParams("?header=none&hideHeader=false").header).toBe("none");
     });
-  });
-  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:",
-        {},
-      );
+    it("converts hideHeader to the correct header value", () => {
+      expect(getUrlParams("?hideHeader=true").header).toBe("none");
+      expect(getUrlParams("?hideHeader=false").header).toBe("standard");
     });
   });
 });

src/UrlParams.ts

@@ -8,16 +8,10 @@ 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 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;
@@ -28,10 +22,6 @@ 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",
 }
 
@@ -41,12 +31,12 @@ export enum HeaderStyle {
   AppBar = "app_bar",
 }
 
-/**
- * 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 {
+// 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 {
   // Widget api related params
   widgetId: string | null;
   parentUrl: string | null;
@@ -58,11 +48,45 @@ export interface UrlProperties {
    * 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.
    */
@@ -99,97 +123,15 @@ export interface UrlProperties {
    * The Posthog API key. This is only used in the embedded package of Element Call.
    */
   posthogApiKey: string | null;
-  /**
-   * Whether to use end-to-end encryption.
-   */
-  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;
-
+  /**
+   * E2EE password
+   */
+  password: string | null;
   /**
    * Whether the app should use per participant keys for E2EE.
    */
@@ -212,47 +154,46 @@ export interface UrlConfiguration {
    */
   returnToLobby: boolean;
   /**
-   * Whether and what type of notification EC should send, when the user joins the call.
+   * The theme to use for element call.
+   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
    */
-  sendNotificationType?: RTCNotificationType;
+  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;
   /**
-   * 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.
+   * 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.
    */
-  autoLeaveWhenOthersLeft: boolean;
+  homeserver: string | null;
 
   /**
-   * 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.
+   * 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`.
    */
-  waitForCallPickup: boolean;
+  intent: string | null;
 
-  callIntent?: RTCCallIntent;
-}
-interface IntentAndPlatformDerivedConfiguration {
-  defaultAudioEnabled?: boolean;
-  defaultVideoEnabled?: boolean;
-}
-interface IntentAndPlatformDerivedConfiguration {
-  defaultAudioEnabled?: boolean;
-  defaultVideoEnabled?: boolean;
-}
+  /**
+   * The rageshake submit URL. This is only used in the embedded package of Element Call.
+   */
+  rageshakeSubmitUrl: string | null;
 
-// 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 {}
+  /**
+   * 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;
+}
 
 // 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
@@ -294,17 +235,6 @@ 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),
@@ -312,30 +242,14 @@ 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 url params and loads them from a cache if already computed.
+ * 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
@@ -344,145 +258,45 @@ 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 widgetId = parser.getParam("widgetId");
   const parentUrl = parser.getParam("parentUrl");
   const isWidget = !!widgetId && !!parentUrl;
 
-  /**
-   * 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 = {
+  return {
     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,
@@ -490,9 +304,24 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     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:
@@ -500,52 +329,6 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
-    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"),
-  };
-
-  // 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,
   };
 };
 
@@ -604,16 +387,10 @@ export function getRoomIdentifierFromUrl(
 
   // Make sure roomId is valid
   let roomId: string | null = parser.getParam("roomId");
-  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;
-    }
+  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 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"
+                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"
               />
             </svg>
           </div>

src/button/Button.tsx

@@ -16,6 +16,7 @@ import {
   EndCallIcon,
   ShareScreenSolidIcon,
   SettingsSolidIcon,
+  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
@@ -66,6 +67,23 @@ 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,22 +6,21 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { act, render } from "@testing-library/react";
-import { expect, test, vi } from "vitest";
+import { expect, test } 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/CallViewModel";
+import { type CallViewModel } from "../state/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";
 
-vi.mock("livekit-client/e2ee-worker?worker");
-
-const localIdent = `${localRtcMember.userId}:${localRtcMember.deviceId}`;
+const localIdent = `${localRtcMember.sender}:${localRtcMember.deviceId}`;
 
 function TestComponent({
   rtcSession,
@@ -34,7 +33,7 @@ function TestComponent({
     <TooltipProvider>
       <ReactionsSenderProvider
         vm={vm}
-        rtcSession={rtcSession.asMockedSession()}
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
       >
         <ReactionToggleButton vm={vm} identifier={localIdent} />
       </ReactionsSenderProvider>

src/button/ReactionToggleButton.tsx

@@ -24,6 +24,8 @@ import {
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 import classNames from "classnames";
+import { useObservableState } from "observable-hooks";
+import { map } from "rxjs";
 
 import { useReactionsSender } from "../reactions/useReactionsSender";
 import styles from "./ReactionToggleButton.module.css";
@@ -33,8 +35,7 @@ import {
   ReactionsRowSize,
 } from "../reactions";
 import { Modal } from "../Modal";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
-import { useBehavior } from "../useBehavior";
+import { type CallViewModel } from "../state/CallViewModel";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
   raised: boolean;
@@ -179,8 +180,12 @@ export function ReactionToggleButton({
   const [showReactionsMenu, setShowReactionsMenu] = useState(false);
   const [errorText, setErrorText] = useState<string>();
 
-  const isHandRaised = !!useBehavior(vm.handsRaised$)[identifier];
-  const canReact = !useBehavior(vm.reactions$)[identifier];
+  const isHandRaised = useObservableState(
+    vm.handsRaised$.pipe(map((v) => !!v[identifier])),
+  );
+  const canReact = useObservableState(
+    vm.reactions$.pipe(map((v) => !v[identifier])),
+  );
 
   useEffect(() => {
     // Clear whenever the reactions menu state changes.

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

@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="«rbb»"
+    aria-labelledby="«rb5»"
     class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"

src/config/ConfigOptions.ts

@@ -114,29 +114,24 @@ 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;
-
-    /**
-     * The time (in milliseconds) after which a 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;
+    /** @deprecated use delayed_leave_event_delay_ms instead */
+    membership_server_side_expiry_timeout?: 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,7 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { Subject } from "rxjs";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+
+const logger = rootLogger.getChild("[controlled-output]");
 
 export interface Controls {
   canEnterPip(): boolean;

src/grid/Grid.tsx

@@ -24,16 +24,16 @@ import {
   createContext,
   memo,
   use,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  useSyncExternalStore,
 } from "react";
 import useMeasure from "react-use-measure";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { useObservableEagerState } from "observable-hooks";
+import { fromEvent, map, startWith } from "rxjs";
 
 import styles from "./Grid.module.css";
 import { useMergedRefs } from "../useMergedRefs";
@@ -155,6 +155,11 @@ export function useVisibleTiles(callback: VisibleTilesCallback): void {
   );
 }
 
+const windowHeightObservable$ = fromEvent(window, "resize").pipe(
+  startWith(null),
+  map(() => window.innerHeight),
+);
+
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
   ref?: Ref<R>;
   model: LayoutModel;
@@ -256,13 +261,7 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
-  const windowHeight = useSyncExternalStore(
-    useCallback((onChange) => {
-      window.addEventListener("resize", onChange);
-      return (): void => window.removeEventListener("resize", onChange);
-    }, []),
-    useCallback(() => window.innerHeight, []),
-  );
+  const windowHeight = useObservableEagerState(windowHeightObservable$);
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const [visibleTilesCallback, setVisibleTilesCallback] =

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/layout-types.ts";
+import { type GridLayout as GridLayoutModel } from "../state/CallViewModel";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
 import { type CallLayout, arrangeTiles } from "./CallLayout";

src/grid/OneOnOneLayout.tsx

@@ -9,11 +9,10 @@ import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
-import { useBehavior } from "../useBehavior";
 
 /**
  * An implementation of the "one-on-one" layout, in which the remote participant
@@ -33,7 +32,7 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
   scrolling: function OneOnOneLayoutScrolling({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds$);
-    const pipAlignmentValue = useBehavior(pipAlignment$);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],

src/grid/SpotlightExpandedLayout.tsx

@@ -6,12 +6,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, useCallback } from "react";
+import { useObservableEagerState } from "observable-hooks";
 
-import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
+import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
 import { type CallLayout } from "./CallLayout";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
-import { useBehavior } from "../useBehavior";
 
 /**
  * An implementation of the "expanded spotlight" layout, in which the spotlight
@@ -46,7 +46,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const pipAlignmentValue = useBehavior(pipAlignment$);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
 
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>

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/layout-types.ts";
+import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
 

src/grid/SpotlightPortraitLayout.tsx

@@ -10,10 +10,9 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/layout-types.ts";
+import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
-import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--grid-gap": string;
@@ -66,7 +65,8 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media$).length > 1;
 
     return (
       <div

src/grid/TileWrapper.tsx

@@ -61,12 +61,7 @@ const TileWrapper_ = memo(
     useDrag((state) => onDrag?.current!(id, state), {
       target: ref,
       filterTaps: 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
+      preventScroll: true,
     });
 
     return (

src/home/useGroupCallRooms.ts

@@ -113,49 +113,19 @@ 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 => {
-  // 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) {
+  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;
   }
-
-  // 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

@@ -1,6 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-<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 OR LicenseRef-Element-Commercial
+SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 

src/livekit/MatrixAudioRenderer.test.tsx

@@ -6,28 +6,20 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import { render, type RenderResult } from "@testing-library/react";
+import { render } from "@testing-library/react";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 import {
   getTrackReferenceId,
   type TrackReference,
 } from "@livekit/components-core";
-import {
-  type Participant,
-  type RemoteAudioTrack,
-  type Room,
-  Track,
-} from "livekit-client";
+import { type RemoteAudioTrack } 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 { LivekitRoomAudioRenderer } from "./MatrixAudioRenderer";
-import {
-  mockMediaDevices,
-  mockRemoteParticipant,
-  mockTrack,
-} from "../utils/test";
+import { MatrixAudioRenderer } from "./MatrixAudioRenderer";
+import { mockMediaDevices, mockTrack } from "../utils/test";
 
 export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
@@ -56,203 +48,42 @@ vi.mock("@livekit/components-react", async (importOriginal) => {
   };
 });
 
-let tracks: TrackReference[] = [];
-
-/**
- * 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({})}>
-      <LivekitRoomAudioRenderer
-        validIdentities={participants.map((p) => p.identity)}
-        livekitRoom={livekitRoom}
-        url={""}
-      />
-    </MediaDevicesProvider>,
-  );
-}
+const tracks = [mockTrack("test:123")];
+vi.mocked(useTracks).mockReturnValue(tracks);
 
 it("should render for member", () => {
-  const { container, queryAllByTestId } = renderTestComponent(
-    [{ userId: "@alice", deviceId: "DEV0" }],
-    ["@alice:DEV0"],
+  const { container, queryAllByTestId } = render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(1);
 });
 
 it("should not render without member", () => {
-  const { container, queryAllByTestId } = renderTestComponent(
-    [{ userId: "@bob", deviceId: "DEV0" }],
-    ["@alice:DEV0"],
+  const memberships = [
+    { sender: "othermember", deviceId: "123" },
+  ] as CallMembership[];
+  const { container, queryAllByTestId } = render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer members={memberships} />
+    </MediaDevicesProvider>,
   );
   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.", () => {
-  renderTestComponent([{ userId: "@bob", deviceId: "DEV0" }], ["@bob:DEV0"]);
+  render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
+  );
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
 
   expect(audioTrack.setAudioContext).toHaveBeenCalledTimes(1);
@@ -269,8 +100,13 @@ it("should setup audioContext gain and pan", () => {
     pan: 1,
     volume: 0.1,
   });
-
-  renderTestComponent([{ userId: "@bob", deviceId: "DEV0" }], ["@bob:DEV0"]);
+  render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
+  );
 
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
   expect(audioTrack.setAudioContext).toHaveBeenCalled();

src/livekit/MatrixAudioRenderer.tsx

@@ -6,33 +6,28 @@ 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, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
   useTracks,
   AudioTrack,
   type AudioTrackProps,
 } from "@livekit/components-react";
-import { logger } from "matrix-js-sdk/lib/logger";
-import { type ParticipantId } from "matrix-js-sdk/lib/matrixrtc";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import * as controls from "../controls";
 
+const logger = rootLogger.getChild("[MatrixAudioRenderer]");
 export interface MatrixAudioRendererProps {
   /**
-   * The service URL of the LiveKit room.
-   */
-  url: string;
-  livekitRoom: LivekitRoom;
-  /**
-   * The list of participant identities to render audio for.
+   * 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 (local user is excluded).
+   * that are not expected to be in the rtc session.
    */
-  validIdentities: ParticipantId[];
+  members: CallMembership[];
   /**
    * If set to `true`, mutes all audio tracks rendered by the component.
    * @remarks
@@ -41,9 +36,9 @@ export interface MatrixAudioRendererProps {
   muted?: boolean;
 }
 
-const prefixedLogger = logger.getChild("[MatrixAudioRenderer]");
 /**
- * Takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
+ * 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.
  *
  * 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.
@@ -55,12 +50,35 @@ const prefixedLogger = logger.getChild("[MatrixAudioRenderer]");
  * ```
  * @public
  */
-export function LivekitRoomAudioRenderer({
-  url,
-  livekitRoom,
-  validIdentities,
+export function MatrixAudioRenderer({
+  members,
   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,
@@ -70,25 +88,25 @@ export function LivekitRoomAudioRenderer({
     {
       updateOnlyOn: [],
       onlySubscribed: true,
-      room: livekitRoom,
     },
-  )
-    // 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;
-    });
+  ).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]);
 
   // This component is also (in addition to the "only play audio for connected members" logic above)
   // responsible for mimicking earpiece audio on iPhones.
@@ -164,7 +182,7 @@ 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
- * audioContext to normal audio playback.
+ * audiooContext to normal audio playback.
  * As of now the AudioTrack component does not support adding audio nodes while being mounted.
  * @param param0
  * @returns
@@ -184,7 +202,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 two is undefined.
+    // for unsetting the audioContext its enough if one of the the is undefined.
     [audioContext && audioNodes],
   );
 

src/livekit/TrackProcessorContext.tsx

@@ -1,7 +1,7 @@
 /*
-Copyright 2024-2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
@@ -19,22 +19,14 @@ 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";
 
-//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 = {
+type ProcessorState = {
   supported: boolean | undefined;
   processor: undefined | ProcessorWrapper<BackgroundOptions>;
 };
@@ -50,43 +42,6 @@ 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.ts

@@ -7,7 +7,12 @@ 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";
 
@@ -16,17 +21,51 @@ export interface SFUConfig {
   jwt: 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;
+}
+
 // The bits we need from MatrixClient
 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;
+}
+
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
-  serviceUrl: string,
-  matrixRoomId: string,
-): Promise<SFUConfig> {
+  activeFocus: LivekitFocus,
+): Promise<SFUConfig | undefined> {
   let openIdToken: IOpenIDToken;
   try {
     openIdToken = await doNetworkOperationWithRetry(async () =>
@@ -39,16 +78,26 @@ export async function getSFUConfigWithOpenID(
   }
   logger.debug("Got openID token", openIdToken);
 
-  logger.info(`Trying to get JWT for focus ${serviceUrl}...`);
-  const sfuConfig = await getLiveKitJWT(
-    client,
-    serviceUrl,
-    matrixRoomId,
-    openIdToken,
-  );
-  logger.info(`Got JWT from call's active focus URL.`);
+  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.`);
 
-  return sfuConfig;
+    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;
+  }
 }
 
 async function getLiveKitJWT(

src/livekit/useECConnectionState.test.tsx

@@ -0,0 +1,184 @@
+/*
+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 FC, useCallback, useState } from "react";
+import { describe, expect, test, vi, vitest } from "vitest";
+import {
+  ConnectionError,
+  ConnectionErrorReason,
+  type Room,
+} from "livekit-client";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { defer, sleep } from "matrix-js-sdk/lib/utils";
+
+import { useECConnectionState } from "./useECConnectionState";
+import { type SFUConfig } from "./openIDSFU";
+import { GroupCallErrorBoundary } from "../room/GroupCallErrorBoundary.tsx";
+
+test.each<[string, ConnectionError]>([
+  [
+    "LiveKit hits track limit",
+    new ConnectionError("", ConnectionErrorReason.InternalError, 503),
+  ],
+  [
+    "LiveKit hits room participant limit",
+    new ConnectionError("", ConnectionErrorReason.ServerUnreachable, 200),
+  ],
+  [
+    "LiveKit Cloud hits connection limit",
+    new ConnectionError("", ConnectionErrorReason.NotAllowed, 429),
+  ],
+])(
+  "useECConnectionState throws error when %s hits track limit",
+  async (_server, error) => {
+    const mockRoom = {
+      on: () => {},
+      off: () => {},
+      once: () => {},
+      connect: () => {
+        throw error;
+      },
+      localParticipant: {
+        getTrackPublication: () => {},
+        createTracks: () => [],
+      },
+    } as unknown as Room;
+
+    const TestComponent: FC = () => {
+      const [sfuConfig, setSfuConfig] = useState<SFUConfig | undefined>(
+        undefined,
+      );
+      const connect = useCallback(
+        () => setSfuConfig({ url: "URL", jwt: "JWT token" }),
+        [],
+      );
+      useECConnectionState("default", false, mockRoom, sfuConfig);
+      return <button onClick={connect}>Connect</button>;
+    };
+
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <GroupCallErrorBoundary recoveryActionHandler={vi.fn()} widget={null}>
+          <TestComponent />
+        </GroupCallErrorBoundary>
+      </MemoryRouter>,
+    );
+    await user.click(screen.getByRole("button", { name: "Connect" }));
+    screen.getByText("Insufficient capacity");
+  },
+);
+
+describe("Leaking connection prevention", () => {
+  function createTestComponent(mockRoom: Room): FC {
+    const TestComponent: FC = () => {
+      const [sfuConfig, setSfuConfig] = useState<SFUConfig | undefined>(
+        undefined,
+      );
+      const connect = useCallback(
+        () => setSfuConfig({ url: "URL", jwt: "JWT token" }),
+        [],
+      );
+      useECConnectionState("default", false, mockRoom, sfuConfig);
+      return <button onClick={connect}>Connect</button>;
+    };
+    return TestComponent;
+  }
+
+  test("Should cancel pending connections when the component is unmounted", async () => {
+    const connectCall = vi.fn();
+    const pendingConnection = defer<void>();
+    // let pendingDisconnection = defer<void>()
+    const disconnectMock = vi.fn();
+
+    const mockRoom = {
+      on: () => {},
+      off: () => {},
+      once: () => {},
+      connect: async () => {
+        connectCall.call(undefined);
+        return await pendingConnection.promise;
+      },
+      disconnect: disconnectMock,
+      localParticipant: {
+        getTrackPublication: () => {},
+        createTracks: () => [],
+      },
+    } as unknown as Room;
+
+    const TestComponent = createTestComponent(mockRoom);
+
+    const { unmount } = render(<TestComponent />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Connect" }));
+
+    expect(connectCall).toHaveBeenCalled();
+    // unmount while the connection is pending
+    unmount();
+
+    // resolve the pending connection
+    pendingConnection.resolve();
+
+    await vitest.waitUntil(
+      () => {
+        return disconnectMock.mock.calls.length > 0;
+      },
+      {
+        timeout: 1000,
+        interval: 100,
+      },
+    );
+
+    // There should be some cleaning up to avoid leaking an open connection
+    expect(disconnectMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("Should cancel about to open but not yet opened connection", async () => {
+    const createTracksCall = vi.fn();
+    const pendingCreateTrack = defer<void>();
+    // let pendingDisconnection = defer<void>()
+    const disconnectMock = vi.fn();
+    const connectMock = vi.fn();
+
+    const mockRoom = {
+      on: () => {},
+      off: () => {},
+      once: () => {},
+      connect: connectMock,
+      disconnect: disconnectMock,
+      localParticipant: {
+        getTrackPublication: () => {},
+        createTracks: async () => {
+          createTracksCall.call(undefined);
+          await pendingCreateTrack.promise;
+          return [];
+        },
+      },
+    } as unknown as Room;
+
+    const TestComponent = createTestComponent(mockRoom);
+
+    const { unmount } = render(<TestComponent />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Connect" }));
+
+    expect(createTracksCall).toHaveBeenCalled();
+    // unmount while createTracks is pending
+    unmount();
+
+    // resolve createTracks
+    pendingCreateTrack.resolve();
+
+    // Yield to the event loop to let the connection attempt finish
+    await sleep(100);
+
+    // The operation should have been aborted before even calling connect.
+    expect(connectMock).not.toHaveBeenCalled();
+  });
+});

src/livekit/useECConnectionState.ts

@@ -0,0 +1,365 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ConnectionError,
+  ConnectionState,
+  type LocalTrack,
+  type Room,
+  RoomEvent,
+  Track,
+} from "livekit-client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { logger } from "matrix-js-sdk/lib/logger";
+import * as Sentry from "@sentry/react";
+
+import { type SFUConfig, sfuConfigEquals } from "./openIDSFU";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import {
+  ElementCallError,
+  InsufficientCapacityError,
+  UnknownCallError,
+} from "../utils/errors.ts";
+import { AbortHandle } from "../utils/abortHandle.ts";
+
+declare global {
+  interface Window {
+    peerConnectionTimeout?: number;
+    websocketTimeout?: number;
+  }
+}
+
+/*
+ * Additional values for states that a call can be in, beyond what livekit
+ * provides in ConnectionState. Also reconnects the call if the SFU Config
+ * changes.
+ */
+export enum ECAddonConnectionState {
+  // We are switching from one focus to another (or between livekit room aliases on the same focus)
+  ECSwitchingFocus = "ec_switching_focus",
+  // The call has just been initialised and is waiting for credentials to arrive before attempting
+  // to connect. This distinguishes from the 'Disconnected' state which is now just for when livekit
+  // gives up on connectivity and we consider the call to have failed.
+  ECWaiting = "ec_waiting",
+}
+
+export type ECConnectionState = ConnectionState | ECAddonConnectionState;
+
+// This is mostly necessary because an empty useRef is an empty object
+// which is truthy, so we can't just use Boolean(currentSFUConfig.current)
+function sfuConfigValid(sfuConfig?: SFUConfig): boolean {
+  return Boolean(sfuConfig?.url) && Boolean(sfuConfig?.jwt);
+}
+
+async function doConnect(
+  livekitRoom: Room,
+  sfuConfig: SFUConfig,
+  audioEnabled: boolean,
+  initialDeviceId: string | undefined,
+  abortHandle: AbortHandle,
+): Promise<void> {
+  // Always create an audio track manually.
+  // livekit (by default) keeps the mic track open when you mute, but if you start muted,
+  // doesn't publish it until you unmute. We want to publish it from the start so we're
+  // always capturing audio: it helps keep bluetooth headsets in the right mode and
+  // mobile browsers to know we're doing a call.
+  if (
+    livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone)
+  ) {
+    logger.warn(
+      "Pre-creating audio track but participant already appears to have an microphone track: this shouldn't happen!",
+    );
+    Sentry.captureMessage(
+      "Pre-creating audio track but participant already appears to have an microphone track!",
+    );
+    return;
+  }
+
+  logger.info("Pre-creating microphone track");
+  let preCreatedAudioTrack: LocalTrack | undefined;
+  try {
+    const audioTracks = await livekitRoom!.localParticipant.createTracks({
+      audio: { deviceId: initialDeviceId },
+    });
+
+    if (audioTracks.length < 1) {
+      logger.info("Tried to pre-create local audio track but got no tracks");
+    } else {
+      preCreatedAudioTrack = audioTracks[0];
+    }
+    // There was a yield point previously (awaiting for the track to be created) so we need to check
+    // if the operation was cancelled and stop connecting if needed.
+    if (abortHandle.isAborted()) {
+      logger.info(
+        "[Lifecycle] Signal Aborted: Pre-created audio track but connection aborted",
+      );
+      preCreatedAudioTrack?.stop();
+      return;
+    }
+
+    logger.info("Pre-created microphone track");
+  } catch (e) {
+    logger.error("Failed to pre-create microphone track", e);
+  }
+
+  if (!audioEnabled) {
+    await preCreatedAudioTrack?.mute();
+    // There was a yield point. Check if the operation was cancelled and stop connecting.
+    if (abortHandle.isAborted()) {
+      logger.info(
+        "[Lifecycle] Signal Aborted: Pre-created audio track but connection aborted",
+      );
+      preCreatedAudioTrack?.stop();
+      return;
+    }
+  }
+
+  // check again having awaited for the track to create
+  if (
+    livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone)
+  ) {
+    logger.warn(
+      "Pre-created audio track but participant already appears to have an microphone track: this shouldn't happen!",
+    );
+    preCreatedAudioTrack?.stop();
+    return;
+  }
+
+  logger.info("[Lifecycle] Connecting & publishing");
+  try {
+    await connectAndPublish(livekitRoom, sfuConfig, preCreatedAudioTrack, []);
+    if (abortHandle.isAborted()) {
+      logger.info(
+        "[Lifecycle] Signal Aborted: Connected but operation was cancelled. Force disconnect",
+      );
+      livekitRoom?.disconnect().catch((err) => {
+        logger.error("Failed to disconnect from SFU", err);
+      });
+      return;
+    }
+  } catch (e) {
+    preCreatedAudioTrack?.stop();
+    logger.debug("Stopped precreated audio tracks.");
+    throw e;
+  }
+}
+
+/**
+ * Connect to the SFU and publish specific tracks, if provided.
+ * This is very specific to what we need to do: for instance, we don't
+ * currently have a need to prepublish video tracks. We just prepublish
+ * a mic track at the start of a call and copy any srceenshare tracks over
+ * when switching focus (because we can't re-acquire them without the user
+ * going through the dialog to choose them again).
+ */
+async function connectAndPublish(
+  livekitRoom: Room,
+  sfuConfig: SFUConfig,
+  micTrack: LocalTrack | undefined,
+  screenshareTracks: MediaStreamTrack[],
+): Promise<void> {
+  const tracker = PosthogAnalytics.instance.eventCallConnectDuration;
+  // Track call connect duration
+  tracker.cacheConnectStart();
+  livekitRoom.once(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+
+  try {
+    logger.info(`[Lifecycle] Connecting to livekit room ${sfuConfig!.url} ...`);
+    await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt, {
+      // Due to stability issues on Firefox we are testing the effect of different
+      // timeouts, and allow these values to be set through the console
+      peerConnectionTimeout: window.peerConnectionTimeout ?? 45000,
+      websocketTimeout: window.websocketTimeout ?? 45000,
+    });
+    logger.info(`[Lifecycle] ... connected to livekit room`);
+  } catch (e) {
+    logger.error("[Lifecycle] Failed to connect", e);
+    // LiveKit uses 503 to indicate that the server has hit its track limits.
+    // https://github.com/livekit/livekit/blob/fcb05e97c5a31812ecf0ca6f7efa57c485cea9fb/pkg/service/rtcservice.go#L171
+    // It also errors with a status code of 200 (yes, really) for room
+    // participant limits.
+    // LiveKit Cloud uses 429 for connection limits.
+    // Either way, all these errors can be explained as "insufficient capacity".
+    if (
+      e instanceof ConnectionError &&
+      (e.status === 503 || e.status === 200 || e.status === 429)
+    )
+      throw new InsufficientCapacityError();
+    throw e;
+  }
+
+  // remove listener in case the connect promise rejects before `SignalConnected` is emitted.
+  livekitRoom.off(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+  tracker.track({ log: true });
+
+  if (micTrack) {
+    logger.info(`Publishing precreated mic track`);
+    await livekitRoom.localParticipant.publishTrack(micTrack, {
+      source: Track.Source.Microphone,
+    });
+  }
+
+  logger.info(
+    `Publishing ${screenshareTracks.length} precreated screenshare tracks`,
+  );
+  for (const st of screenshareTracks) {
+    livekitRoom.localParticipant
+      .publishTrack(st, {
+        source: Track.Source.ScreenShare,
+      })
+      .catch((e) => {
+        logger.error("Failed to publish screenshare track", e);
+      });
+  }
+}
+
+export function useECConnectionState(
+  initialDeviceId: string | undefined,
+  initialAudioEnabled: boolean,
+  livekitRoom?: Room,
+  sfuConfig?: SFUConfig,
+): ECConnectionState {
+  const [connState, setConnState] = useState(
+    sfuConfig && livekitRoom
+      ? livekitRoom.state
+      : ECAddonConnectionState.ECWaiting,
+  );
+
+  const [isSwitchingFocus, setSwitchingFocus] = useState(false);
+  const [isInDoConnect, setIsInDoConnect] = useState(false);
+  const [error, setError] = useState<ElementCallError | null>(null);
+  if (error !== null) throw error;
+
+  const onConnStateChanged = useCallback((state: ConnectionState) => {
+    if (state == ConnectionState.Connected) setSwitchingFocus(false);
+    setConnState(state);
+  }, []);
+
+  useEffect(() => {
+    const oldRoom = livekitRoom;
+
+    if (livekitRoom) {
+      livekitRoom.on(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+    }
+
+    return (): void => {
+      if (oldRoom)
+        oldRoom.off(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+    };
+  }, [livekitRoom, onConnStateChanged]);
+
+  const doFocusSwitch = useCallback(async (): Promise<void> => {
+    const screenshareTracks: MediaStreamTrack[] = [];
+    for (const t of livekitRoom!.localParticipant.videoTrackPublications.values()) {
+      if (t.track && t.source == Track.Source.ScreenShare) {
+        const newTrack = t.track.mediaStreamTrack.clone();
+        newTrack.enabled = true;
+        screenshareTracks.push(newTrack);
+      }
+    }
+
+    // Flag that we're currently switching focus. This will get reset when the
+    // connection state changes back to connected in onConnStateChanged above.
+    setSwitchingFocus(true);
+    await livekitRoom?.disconnect();
+    setIsInDoConnect(true);
+    try {
+      await connectAndPublish(
+        livekitRoom!,
+        sfuConfig!,
+        undefined,
+        screenshareTracks,
+      );
+    } finally {
+      setIsInDoConnect(false);
+    }
+  }, [livekitRoom, sfuConfig]);
+
+  const currentSFUConfig = useRef(Object.assign({}, sfuConfig));
+
+  // Protection against potential leaks, where the component to be unmounted and there is
+  // still a pending doConnect promise. This would lead the user to still be in the call even
+  // if the component is unmounted.
+  const abortHandlesBag = useRef(new Set<AbortHandle>());
+
+  // This is a cleanup function that will be called when the component is about to be unmounted.
+  // It will cancel all abortHandles in the bag
+  useEffect(() => {
+    const bag = abortHandlesBag.current;
+    return (): void => {
+      bag.forEach((handle) => {
+        handle.abort();
+      });
+    };
+  }, []);
+
+  // Id we are transitioning from a valid config to another valid one, we need
+  // to explicitly switch focus
+  useEffect(() => {
+    if (
+      sfuConfigValid(sfuConfig) &&
+      sfuConfigValid(currentSFUConfig.current) &&
+      !sfuConfigEquals(currentSFUConfig.current, sfuConfig)
+    ) {
+      logger.info(
+        `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`,
+      );
+
+      doFocusSwitch().catch((e) => {
+        logger.error("Failed to switch focus", e);
+      });
+    } else if (
+      !sfuConfigValid(currentSFUConfig.current) &&
+      sfuConfigValid(sfuConfig)
+    ) {
+      // if we're transitioning from an invalid config to a valid one (ie. connecting)
+      // then do an initial connection, including publishing the microphone track:
+      // livekit (by default) keeps the mic track open when you mute, but if you start muted,
+      // doesn't publish it until you unmute. We want to publish it from the start so we're
+      // always capturing audio: it helps keep bluetooth headsets in the right mode and
+      // mobile browsers to know we're doing a call.
+      setIsInDoConnect(true);
+      const abortHandle = new AbortHandle();
+      abortHandlesBag.current.add(abortHandle);
+      doConnect(
+        livekitRoom!,
+        sfuConfig!,
+        initialAudioEnabled,
+        initialDeviceId,
+        abortHandle,
+      )
+        .catch((e) => {
+          if (e instanceof ElementCallError) {
+            setError(e); // Bubble up any error screens to React
+          } else if (e instanceof Error) {
+            setError(new UnknownCallError(e));
+          } else logger.error("Failed to connect to SFU", e);
+        })
+        .finally(() => {
+          abortHandlesBag.current.delete(abortHandle);
+          setIsInDoConnect(false);
+        });
+    }
+
+    currentSFUConfig.current = Object.assign({}, sfuConfig);
+  }, [
+    sfuConfig,
+    livekitRoom,
+    initialDeviceId,
+    initialAudioEnabled,
+    doFocusSwitch,
+  ]);
+
+  // Because we create audio tracks by hand, there's more to connecting than
+  // just what LiveKit does in room.connect, and we should continue to return
+  // ConnectionState.Connecting for the entire duration of the doConnect promise
+  return isSwitchingFocus
+    ? ECAddonConnectionState.ECSwitchingFocus
+    : isInDoConnect
+      ? ConnectionState.Connecting
+      : connState;
+}

src/livekit/useLivekit.ts

@@ -0,0 +1,396 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ConnectionState,
+  type E2EEManagerOptions,
+  ExternalE2EEKeyProvider,
+  LocalVideoTrack,
+  Room,
+  type RoomOptions,
+  Track,
+} from "livekit-client";
+import { useEffect, useRef } from "react";
+import E2EEWorker from "livekit-client/e2ee-worker?worker";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import { useObservable, useObservableEagerState } from "observable-hooks";
+import {
+  map,
+  NEVER,
+  type Observable,
+  type Subscription,
+  switchMap,
+} from "rxjs";
+
+import { defaultLiveKitOptions } from "./options";
+import { type SFUConfig } from "./openIDSFU";
+import { type MuteStates } from "../room/MuteStates";
+import { useMediaDevices } from "../MediaDevicesContext";
+import {
+  type ECConnectionState,
+  useECConnectionState,
+} from "./useECConnectionState";
+import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
+import { E2eeType } from "../e2ee/e2eeType";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import {
+  useTrackProcessor,
+  useTrackProcessorSync,
+} from "./TrackProcessorContext";
+import { observeTrackReference$ } from "../state/MediaViewModel";
+import { useUrlParams } from "../UrlParams";
+import { useInitial } from "../useInitial";
+import { getValue } from "../utils/observable";
+import { type SelectedDevice } from "../state/MediaDevices";
+
+interface UseLivekitResult {
+  livekitRoom?: Room;
+  connState: ECConnectionState;
+}
+
+export function useLivekit(
+  rtcSession: MatrixRTCSession,
+  muteStates: MuteStates,
+  sfuConfig: SFUConfig | undefined,
+  e2eeSystem: EncryptionSystem,
+): UseLivekitResult {
+  const { controlledAudioDevices } = useUrlParams();
+
+  const initialMuteStates = useInitial(() => muteStates);
+
+  const devices = useMediaDevices();
+  const initialAudioInputId = useInitial(
+    () => getValue(devices.audioInput.selected$)?.id,
+  );
+
+  // Store if audio/video are currently updating. If to prohibit unnecessary calls
+  // to setMicrophoneEnabled/setCameraEnabled
+  const audioMuteUpdating = useRef(false);
+  const videoMuteUpdating = useRef(false);
+  // Store the current button mute state that gets passed to this hook via props.
+  // We need to store it for awaited code that relies on the current value.
+  const buttonEnabled = useRef({
+    audio: initialMuteStates.audio.enabled,
+    video: initialMuteStates.video.enabled,
+  });
+
+  const { processor } = useTrackProcessor();
+
+  // Only ever create the room once via useInitial.
+  const room = useInitial(() => {
+    logger.info("[LivekitRoom] Create LiveKit room");
+
+    let e2ee: E2EEManagerOptions | undefined;
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
+      logger.info("Created MatrixKeyProvider (per participant)");
+      e2ee = {
+        keyProvider: new MatrixKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
+      logger.info("Created ExternalE2EEKeyProvider (shared key)");
+      e2ee = {
+        keyProvider: new ExternalE2EEKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    }
+
+    const roomOptions: RoomOptions = {
+      ...defaultLiveKitOptions,
+      videoCaptureDefaults: {
+        ...defaultLiveKitOptions.videoCaptureDefaults,
+        deviceId: getValue(devices.videoInput.selected$)?.id,
+        processor,
+      },
+      audioCaptureDefaults: {
+        ...defaultLiveKitOptions.audioCaptureDefaults,
+        deviceId: initialAudioInputId,
+      },
+      audioOutput: {
+        // When using controlled audio devices, we don't want to set the
+        // deviceId here, because it will be set by the native app.
+        // (also the id does not need to match a browser device id)
+        deviceId: controlledAudioDevices
+          ? undefined
+          : getValue(devices.audioOutput.selected$)?.id,
+      },
+      e2ee,
+    };
+    // We have to create the room manually here due to a bug inside
+    // @livekit/components-react. JSON.stringify() is used in deps of a
+    // useEffect() with an argument that references itself, if E2EE is enabled
+    const room = new Room(roomOptions);
+    room.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
+      logger.error("Failed to set E2EE enabled on room", e);
+    });
+
+    return room;
+  });
+
+  // Setup and update the keyProvider which was create by `createRoom`
+  useEffect(() => {
+    const e2eeOptions = room.options.e2ee;
+    if (
+      e2eeSystem.kind === E2eeType.NONE ||
+      !(e2eeOptions && "keyProvider" in e2eeOptions)
+    )
+      return;
+
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
+      (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
+      (e2eeOptions.keyProvider as ExternalE2EEKeyProvider)
+        .setKey(e2eeSystem.secret)
+        .catch((e) => {
+          logger.error("Failed to set shared key for E2EE", e);
+        });
+    }
+  }, [room.options.e2ee, e2eeSystem, rtcSession]);
+
+  // Sync the requested track processors with LiveKit
+  useTrackProcessorSync(
+    useObservableEagerState(
+      useObservable(
+        (room$) =>
+          observeTrackReference$(
+            room$.pipe(map(([room]) => room.localParticipant)),
+            Track.Source.Camera,
+          ).pipe(
+            map((trackRef) => {
+              const track = trackRef?.publication?.track;
+              return track instanceof LocalVideoTrack ? track : null;
+            }),
+          ),
+        [room],
+      ),
+    ),
+  );
+
+  const connectionState = useECConnectionState(
+    initialAudioInputId,
+    initialMuteStates.audio.enabled,
+    room,
+    sfuConfig,
+  );
+
+  useEffect(() => {
+    // Sync the requested mute states with LiveKit's mute states. We do it this
+    // way around rather than using LiveKit as the source of truth, so that the
+    // states can be consistent throughout the lobby and loading screens.
+    // It's important that we only do this in the connected state, because
+    // LiveKit's internal mute states aren't consistent during connection setup,
+    // and setting tracks to be enabled during this time causes errors.
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
+      const participant = room.localParticipant;
+      // Always update the muteButtonState Ref so that we can read the current
+      // state in awaited blocks.
+      buttonEnabled.current = {
+        audio: muteStates.audio.enabled,
+        video: muteStates.video.enabled,
+      };
+
+      enum MuteDevice {
+        Microphone,
+        Camera,
+      }
+
+      const syncMuteState = async (
+        iterCount: number,
+        type: MuteDevice,
+      ): Promise<void> => {
+        // The approach for muting is to always bring the actual livekit state in sync with the button
+        // This allows for a very predictable and reactive behavior for the user.
+        // (the new state is the old state when pressing the button n times (where n is even))
+        // (the new state is different to the old state when pressing the button n times (where n is uneven))
+        // In case there are issues with the device there might be situations where setMicrophoneEnabled/setCameraEnabled
+        // return immediately. This should be caught with the Error("track with new mute state could not be published").
+        // For now we are still using an iterCount to limit the recursion loop to 10.
+        // This could happen if the device just really does not want to turn on (hardware based issue)
+        // but the mute button is in unmute state.
+        // For now our fail mode is to just stay in this state.
+        // TODO: decide for a UX on how that fail mode should be treated (disable button, hide button, sync button back to muted without user input)
+
+        if (iterCount > 10) {
+          logger.error(
+            "Stop trying to sync the input device with current mute state after 10 failed tries",
+          );
+          return;
+        }
+        let devEnabled;
+        let btnEnabled;
+        let updating;
+        switch (type) {
+          case MuteDevice.Microphone:
+            devEnabled = participant.isMicrophoneEnabled;
+            btnEnabled = buttonEnabled.current.audio;
+            updating = audioMuteUpdating.current;
+            break;
+          case MuteDevice.Camera:
+            devEnabled = participant.isCameraEnabled;
+            btnEnabled = buttonEnabled.current.video;
+            updating = videoMuteUpdating.current;
+            break;
+        }
+        if (devEnabled !== btnEnabled && !updating) {
+          try {
+            let trackPublication;
+            switch (type) {
+              case MuteDevice.Microphone:
+                audioMuteUpdating.current = true;
+                trackPublication = await participant.setMicrophoneEnabled(
+                  buttonEnabled.current.audio,
+                  room.options.audioCaptureDefaults,
+                );
+                audioMuteUpdating.current = false;
+                break;
+              case MuteDevice.Camera:
+                videoMuteUpdating.current = true;
+                trackPublication = await participant.setCameraEnabled(
+                  buttonEnabled.current.video,
+                  room.options.videoCaptureDefaults,
+                );
+                videoMuteUpdating.current = false;
+                break;
+            }
+
+            if (trackPublication) {
+              // await participant.setMicrophoneEnabled can return immediately in some instances,
+              // so that participant.isMicrophoneEnabled !== buttonEnabled.current.audio still holds true.
+              // This happens if the device is still in a pending state
+              // "sleeping" here makes sure we let react do its thing so that participant.isMicrophoneEnabled is updated,
+              // so we do not end up in a recursion loop.
+              await new Promise((r) => setTimeout(r, 100));
+
+              // track got successfully changed to mute/unmute
+              // Run the check again after the change is done. Because the user
+              // can update the state (presses mute button) while the device is enabling
+              // itself we need might need to update the mute state right away.
+              // This async recursion makes sure that setCamera/MicrophoneEnabled is
+              // called as little times as possible.
+              await syncMuteState(iterCount + 1, type);
+            } else {
+              throw new Error(
+                "track with new mute state could not be published",
+              );
+            }
+          } catch (e) {
+            if ((e as DOMException).name === "NotAllowedError") {
+              logger.error(
+                "Fatal error while syncing mute state: resetting",
+                e,
+              );
+              if (type === MuteDevice.Microphone) {
+                audioMuteUpdating.current = false;
+                muteStates.audio.setEnabled?.(false);
+              } else {
+                videoMuteUpdating.current = false;
+                muteStates.video.setEnabled?.(false);
+              }
+            } else {
+              logger.error(
+                "Failed to sync audio mute state with LiveKit (will retry to sync in 1s):",
+                e,
+              );
+              setTimeout(() => {
+                syncMuteState(iterCount + 1, type).catch((e) => {
+                  logger.error(
+                    `Failed to sync ${MuteDevice[type]} mute state with LiveKit iterCount=${iterCount + 1}`,
+                    e,
+                  );
+                });
+              }, 1000);
+            }
+          }
+        }
+      };
+
+      syncMuteState(0, MuteDevice.Microphone).catch((e) => {
+        logger.error("Failed to sync audio mute state with LiveKit", e);
+      });
+      syncMuteState(0, MuteDevice.Camera).catch((e) => {
+        logger.error("Failed to sync video mute state with LiveKit", e);
+      });
+    }
+  }, [room, muteStates, connectionState]);
+
+  useEffect(() => {
+    // Sync the requested devices with LiveKit's devices
+    if (
+      room !== undefined &&
+      connectionState === ConnectionState.Connected &&
+      !controlledAudioDevices
+    ) {
+      const syncDevice = (
+        kind: MediaDeviceKind,
+        selected$: Observable<SelectedDevice | undefined>,
+      ): Subscription =>
+        selected$.subscribe((device) => {
+          if (
+            device !== undefined &&
+            room.getActiveDevice(kind) !== device.id
+          ) {
+            room
+              .switchActiveDevice(kind, device.id)
+              .catch((e) =>
+                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
+              );
+          }
+        });
+
+      const subscriptions = [
+        syncDevice("audioinput", devices.audioInput.selected$),
+        syncDevice("audiooutput", devices.audioOutput.selected$),
+        syncDevice("videoinput", devices.videoInput.selected$),
+        // Restart the audio input track whenever we detect that the active media
+        // device has changed to refer to a different hardware device. We do this
+        // for the sake of Chrome, which provides a "default" device that is meant
+        // to match the system's default audio input, whatever that may be.
+        // This is special-cased for only audio inputs because we need to dig around
+        // in the LocalParticipant object for the track object and there's not a nice
+        // way to do that generically. There is usually no OS-level default video capture
+        // device anyway, and audio outputs work differently.
+        devices.audioInput.selected$
+          .pipe(switchMap((device) => device?.hardwareDeviceChange$ ?? NEVER))
+          .subscribe(() => {
+            const activeMicTrack = Array.from(
+              room.localParticipant.audioTrackPublications.values(),
+            ).find((d) => d.source === Track.Source.Microphone)?.track;
+
+            if (
+              activeMicTrack &&
+              // only restart if the stream is still running: LiveKit will detect
+              // when a track stops & restart appropriately, so this is not our job.
+              // Plus, we need to avoid restarting again if the track is already in
+              // the process of being restarted.
+              activeMicTrack.mediaStreamTrack.readyState !== "ended"
+            ) {
+              // Restart the track, which will cause Livekit to do another
+              // getUserMedia() call with deviceId: default to get the *new* default device.
+              // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
+              // the deviceId hasn't changed (was & still is default).
+              room.localParticipant
+                .getTrackPublication(Track.Source.Microphone)
+                ?.audioTrack?.restartTrack()
+                .catch((e) => {
+                  logger.error(`Failed to restart audio device track`, e);
+                });
+            }
+          }),
+      ];
+
+      return (): void => {
+        for (const s of subscriptions) s.unsubscribe();
+      };
+    }
+  }, [room, devices, connectionState, controlledAudioDevices]);
+
+  return {
+    connState: connectionState,
+    livekitRoom: room,
+  };
+}

src/main.tsx

@@ -24,7 +24,6 @@ import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
 import { Initializer } from "./initializer";
 import { AppViewModel } from "./state/AppViewModel";
-import { globalScope } from "./state/ObservableScope";
 
 window.setLKLogLevel = setLKLogLevel;
 
@@ -62,7 +61,7 @@ Initializer.initBeforeReact()
   .then(() => {
     root.render(
       <StrictMode>
-        <App vm={new AppViewModel(globalScope)} />
+        <App vm={new AppViewModel()} />
       </StrictMode>,
     );
   })

src/reactions/RaisedHandIndicator.tsx

@@ -22,13 +22,11 @@ export function RaisedHandIndicator({
   miniature,
   showTimer,
   onClick,
-  tabIndex,
 }: {
   raisedHandTime?: Date;
   miniature?: boolean;
   showTimer?: boolean;
   onClick?: () => void;
-  tabIndex?: number;
 }): ReactNode {
   const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
@@ -96,7 +94,6 @@ export function RaisedHandIndicator({
           background: "none",
         }}
         onClick={clickCallback}
-        tabIndex={tabIndex}
       >
         {content}
       </button>

src/reactions/ReactionsReader.test.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { renderHook } from "@testing-library/react";
 import { afterEach, test, vitest } from "vitest";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import {
   RoomEvent as MatrixRoomEvent,
   MatrixEvent,
@@ -23,7 +24,7 @@ import {
   localRtcMember,
 } from "../utils/test-fixtures";
 import { getBasicRTCSession } from "../utils/test-viewmodel";
-import { testScope, withTestScheduler } from "../utils/test";
+import { withTestScheduler } from "../utils/test";
 import { ElementCallReactionEventType, ReactionSet } from ".";
 
 afterEach(() => {
@@ -37,8 +38,7 @@ test("handles a hand raised reaction", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -48,7 +48,7 @@ test("handles a hand raised reaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -68,7 +68,7 @@ test("handles a hand raised reaction", () => {
       expectObservable(raisedHands$).toBe("ab", {
         a: {},
         b: {
-          [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+          [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
             reactionEventId,
             membershipEventId: localRtcMember.eventId,
             time: localTimestamp,
@@ -86,8 +86,7 @@ test("handles a redaction", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abc", {
         a: () => {},
@@ -97,7 +96,7 @@ test("handles a redaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -119,7 +118,7 @@ test("handles a redaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.RoomRedaction,
               redacts: reactionEventId,
             }),
@@ -131,7 +130,7 @@ test("handles a redaction", () => {
       expectObservable(raisedHands$).toBe("abc", {
         a: {},
         b: {
-          [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+          [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
             reactionEventId,
             membershipEventId: localRtcMember.eventId,
             time: localTimestamp,
@@ -150,8 +149,7 @@ test("handles waiting for event decryption", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abc", {
         a: () => {},
@@ -159,7 +157,7 @@ test("handles waiting for event decryption", () => {
           const encryptedEvent = new MatrixEvent({
             room_id: rtcSession.room.roomId,
             event_id: reactionEventId,
-            sender: localRtcMember.userId,
+            sender: localRtcMember.sender,
             type: EventType.Reaction,
             origin_server_ts: localTimestamp.getTime(),
             content: {
@@ -186,7 +184,7 @@ test("handles waiting for event decryption", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -202,7 +200,7 @@ test("handles waiting for event decryption", () => {
       expectObservable(raisedHands$).toBe("a-c", {
         a: {},
         c: {
-          [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+          [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
             reactionEventId,
             membershipEventId: localRtcMember.eventId,
             time: localTimestamp,
@@ -220,8 +218,7 @@ test("hands rejecting events without a proper membership", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -231,7 +228,7 @@ test("hands rejecting events without a proper membership", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -266,8 +263,7 @@ test("handles a reaction", () => {
   withTestScheduler(({ schedule, time, expectObservable }) => {
     renderHook(() => {
       const { reactions$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule(`abc`, {
         a: () => {},
@@ -277,7 +273,7 @@ test("handles a reaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reaction.emoji,
@@ -302,7 +298,7 @@ test("handles a reaction", () => {
         {
           a: {},
           b: {
-            [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+            [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
               reactionOption: reaction,
               expireAfter: new Date(REACTION_ACTIVE_TIME_MS),
             },
@@ -325,8 +321,7 @@ test("ignores bad reaction events", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { reactions$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -337,7 +332,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {},
             }),
@@ -352,7 +347,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reaction.emoji,
@@ -373,7 +368,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: aliceRtcMember.userId,
+              sender: aliceRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reaction.emoji,
@@ -394,7 +389,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 name: reaction.name,
@@ -414,7 +409,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: " ",
@@ -450,8 +445,7 @@ test("that reactions cannot be spammed", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { reactions$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abcd", {
         a: () => {},
@@ -461,7 +455,7 @@ test("that reactions cannot be spammed", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reactionA.emoji,
@@ -483,7 +477,7 @@ test("that reactions cannot be spammed", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reactionB.emoji,
@@ -508,7 +502,7 @@ test("that reactions cannot be spammed", () => {
         {
           a: {},
           b: {
-            [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+            [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
               reactionOption: reactionA,
               expireAfter: new Date(REACTION_ACTIVE_TIME_MS),
             },

src/reactions/ReactionsReader.ts

@@ -18,7 +18,7 @@ import {
   EventType,
   RoomEvent as MatrixRoomEvent,
 } from "matrix-js-sdk";
-import { BehaviorSubject, delay } from "rxjs";
+import { BehaviorSubject, delay, type Subscription } from "rxjs";
 
 import {
   ElementCallReactionEventType,
@@ -28,7 +28,6 @@ import {
   type RaisedHandInfo,
   type ReactionInfo,
 } from ".";
-import { type ObservableScope } from "../state/ObservableScope";
 
 export const REACTION_ACTIVE_TIME_MS = 3000;
 
@@ -55,13 +54,12 @@ export class ReactionsReader {
    */
   public readonly reactions$ = this.reactionsSubject$.asObservable();
 
-  public constructor(
-    private readonly scope: ObservableScope,
-    private readonly rtcSession: MatrixRTCSession,
-  ) {
+  private readonly reactionsSub: Subscription;
+
+  public constructor(private readonly rtcSession: MatrixRTCSession) {
     // Hide reactions after a given time.
-    this.reactionsSubject$
-      .pipe(delay(REACTION_ACTIVE_TIME_MS), this.scope.bind())
+    this.reactionsSub = this.reactionsSubject$
+      .pipe(delay(REACTION_ACTIVE_TIME_MS))
       .subscribe((reactions) => {
         const date = new Date();
         const nextEntries = Object.fromEntries(
@@ -73,38 +71,15 @@ export class ReactionsReader {
         this.reactionsSubject$.next(nextEntries);
       });
 
-    // TODO: Convert this class to the functional reactive style and get rid of
-    // all this manual setup and teardown for event listeners
-
     this.rtcSession.room.on(MatrixRoomEvent.Timeline, this.handleReactionEvent);
-    this.scope.onEnd(() =>
-      this.rtcSession.room.off(
-        MatrixRoomEvent.Timeline,
-        this.handleReactionEvent,
-      ),
-    );
-
     this.rtcSession.room.on(
       MatrixRoomEvent.Redaction,
       this.handleReactionEvent,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.room.off(
-        MatrixRoomEvent.Redaction,
-        this.handleReactionEvent,
-      ),
-    );
-
     this.rtcSession.room.client.on(
       MatrixEventEvent.Decrypted,
       this.handleReactionEvent,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.room.client.off(
-        MatrixEventEvent.Decrypted,
-        this.handleReactionEvent,
-      ),
-    );
 
     // We listen for a local echo to get the real event ID, as timeline events
     // may still be sending.
@@ -112,23 +87,11 @@ export class ReactionsReader {
       MatrixRoomEvent.LocalEchoUpdated,
       this.handleReactionEvent,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.room.off(
-        MatrixRoomEvent.LocalEchoUpdated,
-        this.handleReactionEvent,
-      ),
-    );
 
-    this.rtcSession.on(
+    rtcSession.on(
       MatrixRTCSessionEvent.MembershipsChanged,
       this.onMembershipsChanged,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.off(
-        MatrixRTCSessionEvent.MembershipsChanged,
-        this.onMembershipsChanged,
-      ),
-    );
 
     // Run this once to ensure we have fetched the state from the call.
     this.onMembershipsChanged([]);
@@ -167,7 +130,7 @@ export class ReactionsReader {
   private onMembershipsChanged = (oldMemberships: CallMembership[]): void => {
     // Remove any raised hands for users no longer joined to the call.
     for (const identifier of Object.keys(this.raisedHandsSubject$.value).filter(
-      (rhId) => oldMemberships.find((u) => u.userId == rhId),
+      (rhId) => oldMemberships.find((u) => u.sender == rhId),
     )) {
       this.removeRaisedHand(identifier);
     }
@@ -175,10 +138,10 @@ export class ReactionsReader {
     // For each member in the call, check to see if a reaction has
     // been raised and adjust.
     for (const m of this.rtcSession.memberships) {
-      if (!m.userId || !m.eventId) {
+      if (!m.sender || !m.eventId) {
         continue;
       }
-      const identifier = `${m.userId}:${m.deviceId}`;
+      const identifier = `${m.sender}:${m.deviceId}`;
       if (
         this.raisedHandsSubject$.value[identifier] &&
         this.raisedHandsSubject$.value[identifier].membershipEventId !==
@@ -188,13 +151,13 @@ export class ReactionsReader {
         // was raised, reset.
         this.removeRaisedHand(identifier);
       }
-      const reaction = this.getLastReactionEvent(m.eventId, m.userId);
+      const reaction = this.getLastReactionEvent(m.eventId, m.sender);
       if (reaction) {
         const eventId = reaction?.getId();
         if (!eventId) {
           continue;
         }
-        this.addRaisedHand(`${m.userId}:${m.deviceId}`, {
+        this.addRaisedHand(`${m.sender}:${m.deviceId}`, {
           membershipEventId: m.eventId,
           reactionEventId: eventId,
           time: new Date(reaction.localTimestamp),
@@ -256,7 +219,7 @@ export class ReactionsReader {
 
       const membershipEventId = content?.["m.relates_to"]?.event_id;
       const membershipEvent = this.rtcSession.memberships.find(
-        (e) => e.eventId === membershipEventId && e.userId === sender,
+        (e) => e.eventId === membershipEventId && e.sender === sender,
       );
       // Check to see if this reaction was made to a membership event (and the
       // sender of the reaction matches the membership)
@@ -266,8 +229,7 @@ export class ReactionsReader {
         );
         return;
       }
-      // TODO refactor to use memer id `membershipEvent.membershipID` (needs to happen in combination with other memberId refactors)
-      const identifier = `${membershipEvent.userId}:${membershipEvent.deviceId}`;
+      const identifier = `${membershipEvent.sender}:${membershipEvent.deviceId}`;
 
       if (!content.emoji) {
         logger.warn(`Reaction had no emoji from ${reactionEventId}`);
@@ -316,7 +278,7 @@ export class ReactionsReader {
       // Check to see if this reaction was made to a membership event (and the
       // sender of the reaction matches the membership)
       const membershipEvent = this.rtcSession.memberships.find(
-        (e) => e.eventId === membershipEventId && e.userId === sender,
+        (e) => e.eventId === membershipEventId && e.sender === sender,
       );
       if (!membershipEvent) {
         logger.warn(
@@ -327,7 +289,7 @@ export class ReactionsReader {
 
       if (content?.["m.relates_to"].key === "🖐️") {
         this.addRaisedHand(
-          `${membershipEvent.userId}:${membershipEvent.deviceId}`,
+          `${membershipEvent.sender}:${membershipEvent.deviceId}`,
           {
             reactionEventId,
             membershipEventId,
@@ -347,4 +309,31 @@ export class ReactionsReader {
       this.removeRaisedHand(targetUser);
     }
   };
+
+  /**
+   * Stop listening for events.
+   */
+  public destroy(): void {
+    this.rtcSession.off(
+      MatrixRTCSessionEvent.MembershipsChanged,
+      this.onMembershipsChanged,
+    );
+    this.rtcSession.room.off(
+      MatrixRoomEvent.Timeline,
+      this.handleReactionEvent,
+    );
+    this.rtcSession.room.off(
+      MatrixRoomEvent.Redaction,
+      this.handleReactionEvent,
+    );
+    this.rtcSession.room.client.off(
+      MatrixEventEvent.Decrypted,
+      this.handleReactionEvent,
+    );
+    this.rtcSession.room.off(
+      MatrixRoomEvent.LocalEchoUpdated,
+      this.handleReactionEvent,
+    );
+    this.reactionsSub.unsubscribe();
+  }
 }

src/reactions/index.ts

@@ -27,8 +27,6 @@ import rockSoundOgg from "../sound/reactions/rock.ogg?url";
 import rockSoundMp3 from "../sound/reactions/rock.mp3?url";
 import waveSoundOgg from "../sound/reactions/wave.ogg?url";
 import waveSoundMp3 from "../sound/reactions/wave.mp3?url";
-import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url";
-import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url";
 
 export const ElementCallReactionEventType = "io.element.call.reaction";
 
@@ -193,15 +191,6 @@ export const ReactionSet: ReactionOption[] = [
       mp3: waveSoundMp3,
     },
   },
-  {
-    emoji: "🥁",
-    name: "drum",
-    alias: ["joke"],
-    sound: {
-      ogg: baduntssSoundOgg,
-      mp3: baduntssSoundMp3,
-    },
-  },
 ];
 
 export interface RaisedHandInfo {