Update embedded delayed event configuration.

* Update livekit-client to disable ScriptTransform for Chromium based browsers

See: https://github.com/livekit/client-sdk-js/pull/1703
Signed-off-by: Timo K <toger5@hotmail.de>

* bump playwright

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>

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

@@ -85,7 +85,7 @@ jobs:
         run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
       - name: Upload
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -103,7 +103,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 +144,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
@@ -199,7 +199,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
         with:
           path: element-call
 
@@ -212,7 +212,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 +264,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:
@@ -33,7 +33,7 @@ jobs:
     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,7 +8,6 @@ dist-ssr
 .idea/
 public/config.json
 backend/synapse_tmp/*
-backend/synapse_tmp_othersite/*
 /coverage
 config.json
 
@@ -29,4 +28,4 @@ yarn-error.log
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/.cache/

README.md

@@ -206,22 +206,22 @@ See also:
 ### Backend
 
 A docker compose file `dev-backend-docker-compose.yml` is provided to start the
-whole stack of components which is required for a local development environment
-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`)
+- Minimum Synapse Setup (servername: `synapse.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 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
@@ -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:
@@ -62,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

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,8 +49,12 @@ 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;
@@ -133,54 +96,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 +161,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:
@@ -79,3 +62,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

dev-backend-docker-compose.yml

@@ -24,28 +24,6 @@ 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
@@ -66,23 +44,15 @@ services:
     networks:
       - ecbackend
 
-  livekit-1:
-    image: livekit/livekit-server:latest
+  redis:
+    image: redis:6-alpine
     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…)
+    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
 
@@ -104,24 +74,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,19 +86,6 @@ 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
@@ -169,7 +108,4 @@ services:
     networks:
       ecbackend:
         aliases:
-          - synapse.m.localhost
-          - synapse.othersite.m.localhost
           - matrix-rtc.m.localhost
-          - matrix-rtc.othersite.m.localhost

locales/en/app.json

@@ -72,9 +72,9 @@
     "livekit_server_info": "LiveKit Server Info",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
-    "multi_sfu": "Multi-SFU media transport",
     "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
     "show_connection_stats": "Show connection statistics",
+    "show_non_member_tiles": "Show tiles for non-member media",
     "url_params": "URL parameters",
     "use_new_membership_manager": "Use the new implementation of the call MembershipManager",
     "use_to_device_key_transport": "Use to device key transport. This will fallback to room key transport when another call member sent a room key"
@@ -92,7 +92,7 @@
     "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",

package.json

@@ -44,7 +44,7 @@
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
-    "@livekit/protocol": "^1.38.0",
+    "@livekit/protocol": "^1.42.2",
     "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
@@ -54,7 +54,7 @@
     "@opentelemetry/sdk-trace-base": "^2.0.0",
     "@opentelemetry/sdk-trace-web": "^2.0.0",
     "@opentelemetry/semantic-conventions": "^1.25.1",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.56.1",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
@@ -99,14 +99,13 @@
     "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",
     "i18next-parser": "^9.1.0",
     "jsdom": "^26.0.0",
     "knip": "^5.27.2",
-    "livekit-client": "^2.13.0",
+    "livekit-client": "^2.15.13",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=develop",

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

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

@@ -10,6 +10,7 @@ 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";
@@ -19,7 +20,7 @@ import { alice, local, localRtcMember } from "../utils/test-fixtures";
 import { type MockRTCSession } from "../utils/test";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 
-const localIdent = `${localRtcMember.userId}:${localRtcMember.deviceId}`;
+const localIdent = `${localRtcMember.sender}:${localRtcMember.deviceId}`;
 
 function TestComponent({
   rtcSession,
@@ -32,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/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,7 +9,7 @@ import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/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";

src/grid/SpotlightExpandedLayout.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type ReactNode, useCallback } from "react";
 
-import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/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";

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,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/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";

src/home/useGroupCallRooms.ts

@@ -20,7 +20,6 @@ import {
   MatrixRTCSessionManagerEvents,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { logger } from "matrix-js-sdk/lib/logger";
 
 import { getKeyForRoom } from "../e2ee/sharedKeyManagement";
 
@@ -140,24 +139,22 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
         .filter(roomHasCallMembershipEvents)
         .filter(roomIsJoinable);
       const sortedRooms = sortRooms(client, rooms);
-      Promise.all(
-        sortedRooms.map((room) => {
-          const session = client.matrixRTC.getRoomSession(room);
-          return {
-            roomAlias: room.getCanonicalAlias() ?? undefined,
-            roomName: room.name,
-            avatarUrl: room.getMxcAvatarUrl()!,
-            room,
-            session,
-            participants: session.memberships
-              .filter((m) => m.userId)
-              .map((m) => room.getMember(m.userId!))
-              .filter((m) => m) as RoomMember[],
-          };
-        }),
-      )
-        .then((items) => setRooms(items))
-        .catch(logger.error);
+      const items = sortedRooms.map((room) => {
+        const session = client.matrixRTC.getRoomSession(room);
+        return {
+          roomAlias: room.getCanonicalAlias() ?? undefined,
+          roomName: room.name,
+          avatarUrl: room.getMxcAvatarUrl()!,
+          room,
+          session,
+          participants: session.memberships
+            .filter((m) => m.sender)
+            .map((m) => room.getMember(m.sender!))
+            .filter((m) => m) as RoomMember[],
+        };
+      });
+
+      setRooms(items);
     }
 
     updateRooms();

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,16 +6,15 @@ 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 { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { type ParticipantId } from "matrix-js-sdk/lib/matrixrtc";
 
 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
@@ -23,16 +22,11 @@ import * as controls from "../controls";
 
 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 +35,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 +49,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(
+      `[MatrixAudioRenderer] 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 +87,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(
+        `[MatrixAudioRenderer] 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.

src/livekit/TrackProcessorContext.tsx

@@ -19,21 +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";
 
-//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>;
 };
@@ -49,40 +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$;
-}
-
-export const trackProcessorSync = (
-  videoTrack$: Behavior<LocalVideoTrack | null>,
-  processor$: Behavior<ProcessorState>,
-): void => {
-  // TODO-MULTI-SFU: Bind to an ObservableScope to avoid leaking resources.
-  combineLatest([videoTrack$, processor$]).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";
 
@@ -29,11 +34,38 @@ export type OpenIDClientParts = Pick<
   "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,
-  livekitAlias: string,
-): Promise<SFUConfig> {
+  activeFocus: LivekitFocus,
+): Promise<SFUConfig | undefined> {
   let openIdToken: IOpenIDToken;
   try {
     openIdToken = await doNetworkOperationWithRetry(async () =>
@@ -46,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,
-    livekitAlias,
-    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.ts

@@ -1,4 +1,3 @@
-// TODO not used anymore - remove
 /*
 Copyright 2023, 2024 New Vector Ltd.
 

src/livekit/useLivekit.ts

@@ -0,0 +1,431 @@
+/*
+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,
+  type LocalTrackPublication,
+  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$) =>
+          room$.pipe(
+            switchMap(([room]) =>
+              observeTrackReference$(
+                room.localParticipant,
+                Track.Source.Camera,
+              ),
+            ),
+            map((trackRef) => {
+              const track = trackRef?.publication?.track;
+              return track instanceof LocalVideoTrack ? track : null;
+            }),
+          ),
+        [room],
+      ),
+    ),
+  );
+
+  const connectionState = useECConnectionState(
+    initialAudioInputId,
+    initialMuteStates.audio.enabled,
+    room,
+    sfuConfig,
+  );
+
+  // Log errors when local participant has issues publishing a track.
+  useEffect(() => {
+    const localTrackUnpublishedFn = (
+      publication: LocalTrackPublication,
+    ): void => {
+      logger.info(
+        "Local track unpublished",
+        publication.trackName,
+        publication.trackInfo,
+      );
+    };
+    const mediaDevicesErrorFn = (error: Error): void => {
+      logger.warn("Media devices error when publishing a track", error);
+    };
+
+    room.localParticipant.on("localTrackUnpublished", localTrackUnpublishedFn);
+    room.localParticipant.on("mediaDevicesError", mediaDevicesErrorFn);
+
+    return (): void => {
+      room.localParticipant.off(
+        "localTrackUnpublished",
+        localTrackUnpublishedFn,
+      );
+      room.localParticipant.off("mediaDevicesError", mediaDevicesErrorFn);
+    };
+  }, [room.localParticipant]);
+
+  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) {
+      const syncDevice = (
+        kind: MediaDeviceKind,
+        selected$: Observable<SelectedDevice | undefined>,
+      ): Subscription =>
+        selected$.subscribe((device) => {
+          logger.info(
+            "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :",
+            room.getActiveDevice(kind),
+            " !== ",
+            device?.id,
+          );
+          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$),
+        !controlledAudioDevices
+          ? syncDevice("audiooutput", devices.audioOutput.selected$)
+          : undefined,
+        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

@@ -61,7 +61,7 @@ Initializer.initBeforeReact()
   .then(() => {
     root.render(
       <StrictMode>
-        <App vm={new AppViewModel()} />,
+        <App vm={new AppViewModel()} />
       </StrictMode>,
     );
   })

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,
@@ -37,7 +38,7 @@ test("handles a hand raised reaction", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -47,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: {
@@ -67,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,
@@ -85,7 +86,7 @@ test("handles a redaction", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abc", {
         a: () => {},
@@ -95,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: {
@@ -117,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,
             }),
@@ -129,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,
@@ -148,7 +149,7 @@ test("handles waiting for event decryption", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abc", {
         a: () => {},
@@ -156,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: {
@@ -183,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: {
@@ -199,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,
@@ -217,7 +218,7 @@ test("hands rejecting events without a proper membership", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -227,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: {
@@ -261,7 +262,9 @@ test("handles a reaction", () => {
 
   withTestScheduler(({ schedule, time, expectObservable }) => {
     renderHook(() => {
-      const { reactions$ } = new ReactionsReader(rtcSession.asMockedSession());
+      const { reactions$ } = new ReactionsReader(
+        rtcSession as unknown as MatrixRTCSession,
+      );
       schedule(`abc`, {
         a: () => {},
         b: () => {
@@ -270,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,
@@ -295,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),
             },
@@ -317,7 +320,9 @@ test("ignores bad reaction events", () => {
 
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
-      const { reactions$ } = new ReactionsReader(rtcSession.asMockedSession());
+      const { reactions$ } = new ReactionsReader(
+        rtcSession as unknown as MatrixRTCSession,
+      );
       schedule("ab", {
         a: () => {},
         b: () => {
@@ -327,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: {},
             }),
@@ -342,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,
@@ -363,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,
@@ -384,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,
@@ -404,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: " ",
@@ -439,7 +444,9 @@ test("that reactions cannot be spammed", () => {
 
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
-      const { reactions$ } = new ReactionsReader(rtcSession.asMockedSession());
+      const { reactions$ } = new ReactionsReader(
+        rtcSession as unknown as MatrixRTCSession,
+      );
       schedule("abcd", {
         a: () => {},
         b: () => {
@@ -448,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,
@@ -470,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,
@@ -495,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

@@ -130,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);
     }
@@ -138,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 !==
@@ -151,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),
@@ -219,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)
@@ -229,7 +229,7 @@ export class ReactionsReader {
         );
         return;
       }
-      const identifier = `${membershipEvent.userId}:${membershipEvent.deviceId}`;
+      const identifier = `${membershipEvent.sender}:${membershipEvent.deviceId}`;
 
       if (!content.emoji) {
         logger.warn(`Reaction had no emoji from ${reactionEventId}`);
@@ -278,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(
@@ -289,7 +289,7 @@ export class ReactionsReader {
 
       if (content?.["m.relates_to"].key === "🖐️") {
         this.addRaisedHand(
-          `${membershipEvent.userId}:${membershipEvent.deviceId}`,
+          `${membershipEvent.sender}:${membershipEvent.deviceId}`,
           {
             reactionEventId,
             membershipEventId,

src/reactions/useReactionsSender.tsx

@@ -65,7 +65,7 @@ export const ReactionsSenderProvider = ({
   const myMembershipEvent = useMemo(
     () =>
       memberships.find(
-        (m) => m.userId === myUserId && m.deviceId === myDeviceId,
+        (m) => m.sender === myUserId && m.deviceId === myDeviceId,
       )?.eventId,
     [memberships, myUserId, myDeviceId],
   );

src/room/CallEventAudioRenderer.test.tsx

@@ -155,8 +155,7 @@ test("plays one sound when a hand is raised", () => {
 
   act(() => {
     handRaisedSubject$.next({
-      // TODO: What is this string supposed to be?
-      [`${bobRtcMember.userId}:${bobRtcMember.deviceId}`]: {
+      [bobRtcMember.callId]: {
         time: new Date(),
         membershipEventId: "",
         reactionEventId: "",

src/room/GroupCallErrorBoundary.test.tsx

@@ -26,7 +26,7 @@ import {
   E2EENotSupportedError,
   type ElementCallError,
   InsufficientCapacityError,
-  MatrixRTCTransportMissingError,
+  MatrixRTCFocusMissingError,
   UnknownCallError,
 } from "../utils/errors.ts";
 import { mockConfig } from "../utils/test.ts";
@@ -34,7 +34,7 @@ import { ElementWidgetActions, type WidgetHelpers } from "../widget.ts";
 
 test.each([
   {
-    error: new MatrixRTCTransportMissingError("example.com"),
+    error: new MatrixRTCFocusMissingError("example.com"),
     expectedTitle: "Call is not supported",
   },
   {
@@ -85,7 +85,7 @@ test.each([
 );
 
 test("should render the error page with link back to home", async () => {
-  const error = new MatrixRTCTransportMissingError("example.com");
+  const error = new MatrixRTCFocusMissingError("example.com");
   const TestComponent = (): ReactNode => {
     throw error;
   };
@@ -106,7 +106,7 @@ test("should render the error page with link back to home", async () => {
   await screen.findByText("Call is not supported");
   expect(screen.getByText(/Domain: example\.com/i)).toBeInTheDocument();
   expect(
-    screen.getByText(/Error Code: MISSING_MATRIX_RTC_TRANSPORT/i),
+    screen.getByText(/Error Code: MISSING_MATRIX_RTC_FOCUS/i),
   ).toBeInTheDocument();
 
   await screen.findByRole("button", { name: "Return to home screen" });
@@ -213,7 +213,7 @@ describe("Rageshake button", () => {
 });
 
 test("should have a close button in widget mode", async () => {
-  const error = new MatrixRTCTransportMissingError("example.com");
+  const error = new MatrixRTCFocusMissingError("example.com");
   const TestComponent = (): ReactNode => {
     throw error;
   };

src/room/GroupCallView.test.tsx

@@ -26,6 +26,7 @@ import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-cont
 import { useState } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
+import { type MuteStates } from "./MuteStates";
 import { prefetchSounds } from "../soundUtils";
 import { useAudioContext } from "../useAudioContext";
 import { ActiveCall } from "./InCallView";
@@ -41,12 +42,11 @@ import {
 import { GroupCallView } from "./GroupCallView";
 import { type WidgetHelpers } from "../widget";
 import { LazyEventEmitter } from "../LazyEventEmitter";
-import { MatrixRTCTransportMissingError } from "../utils/errors";
+import { MatrixRTCFocusMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
 import { constant } from "../state/Behavior";
-import { type MuteStates } from "../state/MuteStates.ts";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -103,7 +103,7 @@ beforeEach(() => {
   });
   // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here.
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(
-    ({ onLeft: onLeave }) => {
+    ({ onLeave }) => {
       return (
         <div>
           <button onClick={() => onLeave("user")}>Leave</button>
@@ -117,12 +117,12 @@ function createGroupCallView(
   widget: WidgetHelpers | null,
   joined = true,
 ): {
-  rtcSession: MatrixRTCSession;
+  rtcSession: MockRTCSession;
   getByText: ReturnType<typeof render>["getByText"];
 } {
   const client = {
     getUser: () => null,
-    getUserId: () => localRtcMember.userId,
+    getUserId: () => localRtcMember.sender,
     getDeviceId: () => localRtcMember.deviceId,
     getRoom: (rId) => (rId === roomId ? room : null),
   } as Partial<MatrixClient> as MatrixClient;
@@ -150,8 +150,7 @@ function createGroupCallView(
   const muteState = {
     audio: { enabled: false },
     video: { enabled: false },
-    // TODO-MULTI-SFU: This cast isn't valid, it's likely the cause of some current test failures
-  } as unknown as MuteStates;
+  } as MuteStates;
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
@@ -164,12 +163,10 @@ function createGroupCallView(
               preload={false}
               skipLobby={false}
               header={HeaderStyle.Standard}
-              rtcSession={rtcSession.asMockedSession()}
+              rtcSession={rtcSession as unknown as MatrixRTCSession}
+              isJoined={joined}
               muteStates={muteState}
               widget={widget}
-              // TODO-MULTI-SFU: Make joined and setJoined work
-              joined={true}
-              setJoined={function (value: boolean): void {}}
             />
           </ProcessorProvider>
         </MediaDevicesContext>
@@ -178,7 +175,7 @@ function createGroupCallView(
   );
   return {
     getByText,
-    rtcSession: rtcSession.asMockedSession(),
+    rtcSession,
   };
 }
 
@@ -261,7 +258,7 @@ test("GroupCallView leaves the session when an error occurs", async () => {
 
 test("GroupCallView shows errors that occur during joining", async () => {
   const user = userEvent.setup();
-  enterRTCSession.mockRejectedValue(new MatrixRTCTransportMissingError(""));
+  enterRTCSession.mockRejectedValue(new MatrixRTCFocusMissingError(""));
   onTestFinished(() => {
     enterRTCSession.mockReset();
   });

src/room/GroupCallView.tsx

@@ -38,9 +38,10 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
-import { type MuteStates } from "../state/MuteStates";
+import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
+import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import {
   saveKeyForRoom,
   useRoomEncryptionSystem,
@@ -49,12 +50,7 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import {
-  getUrlParams,
-  HeaderStyle,
-  type UrlParams,
-  useUrlParams,
-} from "../UrlParams";
+import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
 import {
@@ -72,6 +68,7 @@ import {
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
 import {
   useNewMembershipManager as useNewMembershipManagerSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
   useSetting,
 } from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
@@ -79,12 +76,6 @@ import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useAppBarTitle } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 
-/**
- * If there already are this many participants in the call, we automatically mute
- * the user.
- */
-export const MUTE_PARTICIPANT_COUNT = 8;
-
 declare global {
   interface Window {
     rtcSession?: MatrixRTCSession;
@@ -99,8 +90,7 @@ interface Props {
   skipLobby: UrlParams["skipLobby"];
   header: HeaderStyle;
   rtcSession: MatrixRTCSession;
-  joined: boolean;
-  setJoined: (value: boolean) => void;
+  isJoined: boolean;
   muteStates: MuteStates;
   widget: WidgetHelpers | null;
 }
@@ -113,8 +103,7 @@ export const GroupCallView: FC<Props> = ({
   skipLobby,
   header,
   rtcSession,
-  joined,
-  setJoined,
+  isJoined,
   muteStates,
   widget,
 }) => {
@@ -135,10 +124,20 @@ export const GroupCallView: FC<Props> = ({
   // This should use `useEffectEvent` (only available in experimental versions)
   useEffect(() => {
     if (memberships.length >= MUTE_PARTICIPANT_COUNT)
-      muteStates.audio.setEnabled$.value?.(false);
+      muteStates.audio.setEnabled?.(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Update our member event when our mute state changes.
+  useEffect(() => {
+    if (!isJoined) {
+      return;
+    }
+    void rtcSession.updateCallIntent(
+      muteStates.video.enabled ? "video" : "audio",
+    );
+  }, [rtcSession, isJoined, muteStates.video.enabled]);
+
   useEffect(() => {
     logger.info("[Lifecycle] GroupCallView Component mounted");
     return (): void => {
@@ -187,6 +186,9 @@ export const GroupCallView: FC<Props> = ({
   } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(room.roomId);
   const [useNewMembershipManager] = useSetting(useNewMembershipManagerSetting);
+  const [useExperimentalToDeviceTransport] = useSetting(
+    useExperimentalToDeviceTransportSetting,
+  );
 
   // Save the password once we start the groupCallView
   useEffect(() => {
@@ -211,7 +213,7 @@ export const GroupCallView: FC<Props> = ({
 
   // Count each member only once, regardless of how many devices they use
   const participantCount = useMemo(
-    () => new Set<string>(memberships.map((m) => m.userId!)).size,
+    () => new Set<string>(memberships.map((m) => m.sender!)).size,
     [memberships],
   );
 
@@ -221,9 +223,12 @@ export const GroupCallView: FC<Props> = ({
   const enterRTCSessionOrError = useCallback(
     async (rtcSession: MatrixRTCSession): Promise<void> => {
       try {
-        setJoined(true);
-        // TODO-MULTI-SFU what to do with error handling now that we don't use this function?
-        // @BillCarsonFr
+        await enterRTCSession(
+          rtcSession,
+          perParticipantE2EE,
+          useNewMembershipManager,
+          useExperimentalToDeviceTransport,
+        );
       } catch (e) {
         if (e instanceof ElementCallError) {
           setExternalError(e);
@@ -235,9 +240,12 @@ export const GroupCallView: FC<Props> = ({
           setExternalError(error);
         }
       }
-      return Promise.resolve();
     },
-    [setJoined],
+    [
+      perParticipantE2EE,
+      useExperimentalToDeviceTransport,
+      useNewMembershipManager,
+    ],
   );
 
   useEffect(() => {
@@ -256,7 +264,7 @@ export const GroupCallView: FC<Props> = ({
         if (!deviceId) {
           logger.warn("Unknown audio input: " + audioInput);
           // override the default mute state
-          latestMuteStates.current!.audio.setEnabled$.value?.(false);
+          latestMuteStates.current!.audio.setEnabled?.(false);
         } else {
           logger.debug(
             `Found audio input ID ${deviceId} for name ${audioInput}`,
@@ -270,7 +278,7 @@ export const GroupCallView: FC<Props> = ({
         if (!deviceId) {
           logger.warn("Unknown video input: " + videoInput);
           // override the default mute state
-          latestMuteStates.current!.video.setEnabled$.value?.(false);
+          latestMuteStates.current!.video.setEnabled?.(false);
         } else {
           logger.debug(
             `Found video input ID ${deviceId} for name ${videoInput}`,
@@ -286,7 +294,7 @@ export const GroupCallView: FC<Props> = ({
         const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
           (async (): Promise<void> => {
             await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
-            setJoined(true);
+            await enterRTCSessionOrError(rtcSession);
             widget.api.transport.reply(ev.detail, {});
           })().catch((e) => {
             logger.error("Error joining RTC session on preload", e);
@@ -298,7 +306,11 @@ export const GroupCallView: FC<Props> = ({
         };
       } else {
         // No lobby and no preload: we enter the rtc session right away
-        setJoined(true);
+        (async (): Promise<void> => {
+          await enterRTCSessionOrError(rtcSession);
+        })().catch((e) => {
+          logger.error("Error joining RTC session immediately", e);
+        });
       }
     }
   }, [
@@ -309,86 +321,61 @@ export const GroupCallView: FC<Props> = ({
     perParticipantE2EE,
     mediaDevices,
     latestMuteStates,
-    setJoined,
+    enterRTCSessionOrError,
     useNewMembershipManager,
   ]);
 
-  // TODO refactor this + "joined" to just one callState
   const [left, setLeft] = useState(false);
 
   const navigate = useNavigate();
 
-  const onLeft = useCallback(
-    (reason: "timeout" | "user" | "allOthersLeft" | "decline"): void => {
-      let playSound: CallEventSounds = "left";
-      if (reason === "timeout" || reason === "decline") playSound = reason;
-
-      setJoined(false);
-      setLeft(true);
+  const onLeave = useCallback(
+    (
+      cause: "user" | "error" = "user",
+      playSound: CallEventSounds = "left",
+    ): void => {
       const audioPromise = leaveSoundContext.current?.playSound(playSound);
-      // We need to wait until the callEnded event is tracked on PostHog,
-      // otherwise the iframe may get killed first.
+      // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
+      // therefore we want the event to be sent instantly without getting queued/batched.
+      const sendInstantly = !!widget;
+      setLeft(true);
+      // we need to wait until the callEnded event is tracked on posthog.
+      // Otherwise the iFrame gets killed before the callEnded event got tracked.
       const posthogRequest = new Promise((resolve) => {
-        // To increase the likelihood of the PostHog event being sent out in
-        // widget mode before the iframe is killed, we ask it to skip the
-        // usual queuing/batching of requests.
-        const sendInstantly = widget !== null;
         PosthogAnalytics.instance.eventCallEnded.track(
           room.roomId,
           rtcSession.memberships.length,
           sendInstantly,
           rtcSession,
         );
-        // Unfortunately the PostHog library provides no way to await the
-        // tracking of an event, but we don't really want it to hold up the
-        // closing of the widget that long anyway, so giving it 10 ms will do.
         window.setTimeout(resolve, 10);
       });
 
-      void Promise.all([audioPromise, posthogRequest])
-        .catch((e) =>
-          logger.error(
-            "Failed to play leave audio and/or send PostHog leave event",
-            e,
-          ),
-        )
+      leaveRTCSession(
+        rtcSession,
+        cause,
+        // Wait for the sound in widget mode (it's not long)
+        Promise.all([audioPromise, posthogRequest]),
+      )
+        // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
         .then(async () => {
           if (
             !isPasswordlessUser &&
             !confineToRoom &&
             !PosthogAnalytics.instance.isEnabled()
-          )
-            void navigate("/");
-
-          if (widget) {
-            // After this point the iframe could die at any moment!
-            try {
-              await widget.api.setAlwaysOnScreen(false);
-            } catch (e) {
-              logger.error(
-                "Failed to set call widget `alwaysOnScreen` to false",
-                e,
-              );
-            }
-            // On a normal user hangup we can shut down and close the widget. But if an
-            // error occurs we should keep the widget open until the user reads it.
-            if (reason === "user" && !getUrlParams().returnToLobby) {
-              try {
-                await widget.api.transport.send(ElementWidgetActions.Close, {});
-              } catch (e) {
-                logger.error("Failed to send close action", e);
-              }
-              widget.api.transport.stop();
-            }
+          ) {
+            await navigate("/");
           }
+        })
+        .catch((e) => {
+          logger.error("Error leaving RTC session", e);
         });
     },
     [
-      setJoined,
       leaveSoundContext,
       widget,
-      room.roomId,
       rtcSession,
+      room.roomId,
       isPasswordlessUser,
       confineToRoom,
       navigate,
@@ -396,12 +383,25 @@ export const GroupCallView: FC<Props> = ({
   );
 
   useEffect(() => {
-    if (widget && joined)
+    if (widget && isJoined) {
       // set widget to sticky once joined.
       widget.api.setAlwaysOnScreen(true).catch((e) => {
         logger.error("Error calling setAlwaysOnScreen(true)", e);
       });
-  }, [widget, joined, rtcSession]);
+
+      const onHangup = (ev: CustomEvent<IWidgetApiRequest>): void => {
+        widget.api.transport.reply(ev.detail, {});
+        // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
+        leaveRTCSession(rtcSession, "user").catch((e) => {
+          logger.error("Failed to leave RTC session", e);
+        });
+      };
+      widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
+      return (): void => {
+        widget.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
+      };
+    }
+  }, [widget, isJoined, rtcSession]);
 
   const joinRule = useJoinRule(room);
 
@@ -436,7 +436,7 @@ export const GroupCallView: FC<Props> = ({
         client={client}
         matrixInfo={matrixInfo}
         muteStates={muteStates}
-        onEnter={() => setJoined(true)}
+        onEnter={() => void enterRTCSessionOrError(rtcSession)}
         confineToRoom={confineToRoom}
         hideHeader={header === HeaderStyle.None}
         participantCount={participantCount}
@@ -454,7 +454,7 @@ export const GroupCallView: FC<Props> = ({
       throw externalError;
     };
     body = <ErrorComponent />;
-  } else if (joined) {
+  } else if (isJoined) {
     body = (
       <>
         {shareModal}
@@ -463,7 +463,7 @@ export const GroupCallView: FC<Props> = ({
           matrixInfo={matrixInfo}
           rtcSession={rtcSession as MatrixRTCSession}
           matrixRoom={room}
-          onLeft={onLeft}
+          onLeave={onLeave}
           header={header}
           muteStates={muteStates}
           e2eeSystem={e2eeSystem}
@@ -524,8 +524,7 @@ export const GroupCallView: FC<Props> = ({
       }}
       onError={
         (/**error*/) => {
-          // TODO this should not be "user". It needs a new case
-          if (rtcSession.isJoined()) onLeft("user");
+          if (rtcSession.isJoined()) onLeave("error");
         }
       }
     >

src/room/InCallView.test.tsx

@@ -15,6 +15,7 @@ import {
 } from "vitest";
 import { act, render, type RenderResult } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { type LocalParticipant } from "livekit-client";
 import { of } from "rxjs";
@@ -23,6 +24,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 
+import { type MuteStates } from "./MuteStates";
 import { InCallView } from "./InCallView";
 import {
   mockLivekitRoom,
@@ -30,7 +32,6 @@ import {
   mockMatrixRoom,
   mockMatrixRoomMember,
   mockMediaDevices,
-  mockMuteStates,
   mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
@@ -44,7 +45,7 @@ import {
 } from "../settings/settings";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
-import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
+import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
 
@@ -87,7 +88,7 @@ beforeEach(() => {
 
   // MatrixAudioRenderer is tested separately.
   (
-    LivekitRoomAudioRenderer as MockedFunction<typeof LivekitRoomAudioRenderer>
+    MatrixAudioRenderer as MockedFunction<typeof MatrixAudioRenderer>
   ).mockImplementation((_props) => {
     return <div>mocked: MatrixAudioRenderer</div>;
   });
@@ -110,7 +111,7 @@ function createInCallView(): RenderResult & {
 } {
   const client = {
     getUser: () => null,
-    getUserId: () => localRtcMember.userId,
+    getUserId: () => localRtcMember.sender,
     getDeviceId: () => localRtcMember.deviceId,
     getRoom: (rId) => (rId === roomId ? room : null),
   } as Partial<MatrixClient> as MatrixClient;
@@ -132,7 +133,10 @@ function createInCallView(): RenderResult & {
     } as Partial<RoomState> as RoomState,
   });
 
-  const muteState = mockMuteStates();
+  const muteState = {
+    audio: { enabled: false },
+    video: { enabled: false },
+  } as MuteStates;
   const livekitRoom = mockLivekitRoom(
     {
       localParticipant,
@@ -149,14 +153,14 @@ function createInCallView(): RenderResult & {
       <MediaDevicesContext value={mockMediaDevices({})}>
         <ReactionsSenderProvider
           vm={vm}
-          rtcSession={rtcSession.asMockedSession()}
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
         >
           <TooltipProvider>
             <RoomContext value={livekitRoom}>
               <InCallView
                 client={client}
                 header={HeaderStyle.Standard}
-                rtcSession={rtcSession.asMockedSession()}
+                rtcSession={rtcSession as unknown as MatrixRTCSession}
                 muteStates={muteState}
                 vm={vm}
                 matrixInfo={{
@@ -172,6 +176,10 @@ function createInCallView(): RenderResult & {
                   },
                 }}
                 matrixRoom={room}
+                livekitRoom={livekitRoom}
+                onLeave={function (): void {
+                  throw new Error("Function not implemented.");
+                }}
                 onShareClick={null}
               />
             </RoomContext>

src/room/InCallView.tsx

@@ -5,7 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
+import { ConnectionState, type Room as LivekitRoom } from "livekit-client";
 import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   type FC,
@@ -23,7 +25,11 @@ import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import { useObservable } from "observable-hooks";
+import {
+  useObservable,
+  useObservableEagerState,
+  useSubscription,
+} from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import {
@@ -53,13 +59,19 @@ import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
+import { useLivekit } from "../livekit/useLivekit.ts";
 import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
-import { type MuteStates } from "../state/MuteStates";
+import { type MuteStates } from "./MuteStates";
 import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
-import { CallViewModel, type GridMode } from "../state/CallViewModel";
+import { useOpenIDSFU } from "../livekit/openIDSFU";
+import {
+  CallViewModel,
+  type GridMode,
+  type Layout,
+} from "../state/CallViewModel";
 import { Grid, type TileProps } from "../grid/Grid";
 import { useInitial } from "../useInitial";
 import { SpotlightTile } from "../tile/SpotlightTile";
@@ -85,7 +97,10 @@ import {
 } from "../reactions/useReactionsSender";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { ReactionsOverlay } from "./ReactionsOverlay";
-import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
+import {
+  CallEventAudioRenderer,
+  type CallEventSounds,
+} from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
@@ -93,9 +108,11 @@ import {
   useSetting,
 } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
+import { ConnectionLostError } from "../utils/errors.ts";
 import { useTypedEventEmitter } from "../useEvents.ts";
-import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
+import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
+import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships.ts";
 import { useMediaDevices } from "../MediaDevicesContext.ts";
 import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
 import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
@@ -108,69 +125,99 @@ import { prefetchSounds } from "../soundUtils";
 import { useAudioContext } from "../useAudioContext";
 import ringtoneMp3 from "../sound/ringtone.mp3?url";
 import ringtoneOgg from "../sound/ringtone.ogg?url";
-import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
-import { type Layout } from "../state/layout-types.ts";
+
+const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
 const maxTapDurationMs = 400;
 
 export interface ActiveCallProps
   extends Omit<InCallViewProps, "vm" | "livekitRoom" | "connState"> {
   e2eeSystem: EncryptionSystem;
-  // TODO refactor those reasons into an enum
-  onLeft: (reason: "user" | "timeout" | "decline" | "allOthersLeft") => void;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const mediaDevices = useMediaDevices();
+  const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
+  const { livekitRoom, connState } = useLivekit(
+    props.rtcSession,
+    props.muteStates,
+    sfuConfig,
+    props.e2eeSystem,
+  );
+  const connStateObservable$ = useObservable(
+    (inputs$) => inputs$.pipe(map(([connState]) => connState)),
+    [connState],
+  );
   const [vm, setVm] = useState<CallViewModel | null>(null);
 
-  const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
+  useEffect(() => {
+    logger.info(
+      `[Lifecycle] InCallView Component mounted, livekit room state ${livekitRoom?.state}`,
+    );
+    return (): void => {
+      logger.info(
+        `[Lifecycle] InCallView Component unmounted, livekit room state ${livekitRoom?.state}`,
+      );
+      livekitRoom
+        ?.disconnect()
+        .then(() => {
+          logger.info(
+            `[Lifecycle] Disconnected from livekit room, state:${livekitRoom?.state}`,
+          );
+        })
+        .catch((e) => {
+          logger.error("[Lifecycle] Failed to disconnect from livekit room", e);
+        });
+    };
+  }, [livekitRoom]);
+
+  const { autoLeaveWhenOthersLeft, sendNotificationType, waitForCallPickup } =
     useUrlParams();
 
-  const trackProcessorState$ = useTrackProcessorObservable$();
   useEffect(() => {
-    const reactionsReader = new ReactionsReader(props.rtcSession);
-    const vm = new CallViewModel(
-      props.rtcSession,
-      props.matrixRoom,
-      mediaDevices,
-      props.muteStates,
-      {
-        encryptionSystem: props.e2eeSystem,
-        autoLeaveWhenOthersLeft,
-        waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
-      },
-      reactionsReader.raisedHands$,
-      reactionsReader.reactions$,
-      trackProcessorState$,
-    );
-    setVm(vm);
-
-    const sub = vm.leave$.subscribe(props.onLeft);
-    return (): void => {
-      vm.destroy();
-      sub.unsubscribe();
-      reactionsReader.destroy();
-    };
+    if (livekitRoom !== undefined) {
+      const reactionsReader = new ReactionsReader(props.rtcSession);
+      const vm = new CallViewModel(
+        props.rtcSession,
+        props.matrixRoom,
+        livekitRoom,
+        mediaDevices,
+        {
+          encryptionSystem: props.e2eeSystem,
+          autoLeaveWhenOthersLeft,
+          waitForCallPickup:
+            waitForCallPickup && sendNotificationType === "ring",
+        },
+        connStateObservable$,
+        reactionsReader.raisedHands$,
+        reactionsReader.reactions$,
+      );
+      setVm(vm);
+      return (): void => {
+        vm.destroy();
+        reactionsReader.destroy();
+      };
+    }
   }, [
     props.rtcSession,
     props.matrixRoom,
+    livekitRoom,
     mediaDevices,
-    props.muteStates,
     props.e2eeSystem,
+    connStateObservable$,
     autoLeaveWhenOthersLeft,
     sendNotificationType,
     waitForCallPickup,
-    props.onLeft,
-    trackProcessorState$,
   ]);
 
-  if (vm === null) return null;
+  if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-      <InCallView {...props} vm={vm} />
-    </ReactionsSenderProvider>
+    <RoomContext value={livekitRoom}>
+      <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
+        <InCallView {...props} vm={vm} livekitRoom={livekitRoom} />
+      </ReactionsSenderProvider>
+    </RoomContext>
   );
 };
 
@@ -180,7 +227,10 @@ export interface InCallViewProps {
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
   matrixRoom: MatrixRoom;
+  livekitRoom: LivekitRoom;
   muteStates: MuteStates;
+  /** Function to call when the user explicitly ends the call */
+  onLeave: (cause: "user", soundFile?: CallEventSounds) => void;
   header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
   onShareClick: (() => void) | null;
@@ -192,8 +242,9 @@ export const InCallView: FC<InCallViewProps> = ({
   matrixInfo,
   rtcSession,
   matrixRoom,
+  livekitRoom,
   muteStates,
-
+  onLeave,
   header: headerStyle,
   onShareClick,
 }) => {
@@ -202,23 +253,23 @@ export const InCallView: FC<InCallViewProps> = ({
     useReactionsSender();
 
   useWakeLock();
-  // TODO-MULTI-SFU This is unused now??
-  // const connectionState = useObservableEagerState(vm.livekitConnectionState$);
+  const connectionState = useObservableEagerState(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
-  // This needs to be done differential. with the vm connection state we start with Disconnected.
-  // TODO-MULTI-SFU decide how to handle this properly
-  // @BillCarsonFr
-  // if (connectionState === ConnectionState.Disconnected)
-  //   throw new ConnectionLostError();
+  if (connectionState === ConnectionState.Disconnected)
+    throw new ConnectionLostError();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure();
   // Merge the refs so they can attach to the same element
   const containerRef = useMergedRefs(containerRef1, containerRef2);
 
-  const { showControls } = useUrlParams();
+  const { hideScreensharing, showControls } = useUrlParams();
+
+  const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
+    room: livekitRoom,
+  });
 
   const muteAllAudio = useBehavior(muteAllAudio$);
   // Call pickup state and display names are needed for waiting overlay/sounds
@@ -250,6 +301,7 @@ export const InCallView: FC<InCallViewProps> = ({
     useExperimentalToDeviceTransportSetting,
   );
   const encryptionSystem = useRoomEncryptionSystem(matrixRoom.roomId);
+  const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
   const showToDeviceEncryption = useMemo(
     () =>
@@ -265,25 +317,26 @@ export const InCallView: FC<InCallViewProps> = ({
     ],
   );
 
-  const audioEnabled = useBehavior(muteStates.audio.enabled$);
-  const videoEnabled = useBehavior(muteStates.video.enabled$);
-  const toggleAudio = useBehavior(muteStates.audio.toggle$);
-  const toggleVideo = useBehavior(muteStates.video.toggle$);
-  const setAudioEnabled = useBehavior(muteStates.audio.setEnabled$);
+  const toggleMicrophone = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates],
+  );
+  const toggleCamera = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates],
+  );
 
   // This function incorrectly assumes that there is a camera and microphone, which is not always the case.
   // TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
   useCallViewKeyboardShortcuts(
     containerRef1,
-    toggleAudio,
-    toggleVideo,
-    setAudioEnabled,
+    toggleMicrophone,
+    toggleCamera,
+    (muted) => muteStates.audio.setEnabled?.(!muted),
     (reaction) => void sendReaction(reaction),
     () => void toggleRaisedHand(),
   );
 
-  const allLivekitRooms = useBehavior(vm.allLivekitRooms$);
-  const audioParticipants = useBehavior(vm.audioParticipants$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
   const windowMode = useBehavior(vm.windowMode$);
@@ -295,11 +348,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const showFooter = useBehavior(vm.showFooter$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
-  const sharingScreen = useBehavior(vm.sharingScreen$);
-
-  const fatalCallError = useBehavior(vm.configError$);
-  // Stop the rendering and throw for the error boundary
-  if (fatalCallError) throw fatalCallError;
+  useSubscription(vm.autoLeave$, () => onLeave("user"));
 
   // We need to set the proper timings on the animation based upon the sound length.
   const ringDuration = pickupPhaseAudio?.soundDuration["waiting"] ?? 1;
@@ -320,6 +369,16 @@ export const InCallView: FC<InCallViewProps> = ({
     };
   }, [pickupPhaseAudio?.soundDuration, ringDuration]);
 
+  // When we enter timeout or decline we will leave the call.
+  useEffect((): void | (() => void) => {
+    if (callPickupState === "timeout") {
+      onLeave("user", "timeout");
+    }
+    if (callPickupState === "decline") {
+      onLeave("user", "decline");
+    }
+  }, [callPickupState, onLeave, pickupPhaseAudio]);
+
   // When waiting for pickup, loop a waiting sound
   useEffect((): void | (() => void) => {
     if (callPickupState !== "ringing" || !pickupPhaseAudio) return;
@@ -337,7 +396,6 @@ export const InCallView: FC<InCallViewProps> = ({
     if (callPickupState !== "ringing") return null;
 
     // Use room state for other participants data (the one that we likely want to reach)
-    // TODO: this screams it wants to be a behavior in the vm.
     const roomOthers = [
       ...matrixRoom.getMembersWithMembership("join"),
       ...matrixRoom.getMembersWithMembership("invite"),
@@ -741,33 +799,44 @@ export const InCallView: FC<InCallViewProps> = ({
     matrixRoom.roomId,
   );
 
+  const toggleScreensharing = useCallback(() => {
+    localParticipant
+      .setScreenShareEnabled(!isScreenShareEnabled, {
+        audio: true,
+        selfBrowserSurface: "include",
+        surfaceSwitching: "include",
+        systemAudio: "include",
+      })
+      .catch(logger.error);
+  }, [localParticipant, isScreenShareEnabled]);
+
   const buttons: JSX.Element[] = [];
 
   buttons.push(
     <MicButton
       key="audio"
-      muted={!audioEnabled}
-      onClick={toggleAudio ?? undefined}
+      muted={!muteStates.audio.enabled}
+      onClick={toggleMicrophone}
       onTouchEnd={onControlsTouchEnd}
-      disabled={toggleAudio === null}
+      disabled={muteStates.audio.setEnabled === null}
       data-testid="incall_mute"
     />,
     <VideoButton
       key="video"
-      muted={!videoEnabled}
-      onClick={toggleVideo ?? undefined}
+      muted={!muteStates.video.enabled}
+      onClick={toggleCamera}
       onTouchEnd={onControlsTouchEnd}
-      disabled={toggleVideo === null}
+      disabled={muteStates.video.setEnabled === null}
       data-testid="incall_videomute"
     />,
   );
-  if (vm.toggleScreenSharing !== null) {
+  if (canScreenshare && !hideScreensharing) {
     buttons.push(
       <ShareScreenButton
         key="share_screen"
         className={styles.shareScreen}
-        enabled={sharingScreen}
-        onClick={vm.toggleScreenSharing}
+        enabled={isScreenShareEnabled}
+        onClick={toggleScreensharing}
         onTouchEnd={onControlsTouchEnd}
         data-testid="incall_screenshare"
       />,
@@ -797,7 +866,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <EndCallButton
       key="end_call"
       onClick={function (): void {
-        vm.hangup();
+        onLeave("user");
       }}
       onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
@@ -861,15 +930,7 @@ export const InCallView: FC<InCallViewProps> = ({
           </Text>
         )
       }
-      {audioParticipants.map(({ livekitRoom, url, participants }) => (
-        <LivekitRoomAudioRenderer
-          key={url}
-          url={url}
-          livekitRoom={livekitRoom}
-          validIdentities={participants.map((p) => p.identity)}
-          muted={muteAllAudio}
-        />
-      ))}
+      <MatrixAudioRenderer members={memberships} muted={muteAllAudio} />
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
@@ -888,7 +949,7 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={closeSettings}
             tab={settingsTab}
             onTabChange={setSettingsTab}
-            livekitRooms={allLivekitRooms}
+            livekitRoom={livekitRoom}
           />
         </>
       )}

src/room/LobbyView.tsx

@@ -31,7 +31,7 @@ import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { type MatrixInfo, VideoPreview } from "./VideoPreview";
-import { type MuteStates } from "../state/MuteStates";
+import { type MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,
@@ -50,8 +50,8 @@ import {
   useTrackProcessorSync,
 } from "../livekit/TrackProcessorContext";
 import { usePageTitle } from "../usePageTitle";
+import { useLatest } from "../useLatest";
 import { getValue } from "../utils/observable";
-import { useBehavior } from "../useBehavior";
 
 interface Props {
   client: MatrixClient;
@@ -88,10 +88,14 @@ export const LobbyView: FC<Props> = ({
   const { t } = useTranslation();
   usePageTitle(matrixInfo.roomName);
 
-  const audioEnabled = useBehavior(muteStates.audio.enabled$);
-  const videoEnabled = useBehavior(muteStates.video.enabled$);
-  const toggleAudio = useBehavior(muteStates.audio.toggle$);
-  const toggleVideo = useBehavior(muteStates.video.toggle$);
+  const onAudioPress = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates],
+  );
+  const onVideoPress = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates],
+  );
 
   const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
@@ -129,7 +133,7 @@ export const LobbyView: FC<Props> = ({
   // re-open the devices when they change (see below).
   const initialAudioOptions = useInitial(
     () =>
-      audioEnabled && {
+      muteStates.audio.enabled && {
         deviceId: getValue(devices.audioInput.selected$)?.id,
       },
   );
@@ -146,21 +150,27 @@ export const LobbyView: FC<Props> = ({
       // We also pass in a clone because livekit mutates the object passed in,
       // which would cause the devices to be re-opened on the next render.
       audio: Object.assign({}, initialAudioOptions),
-      video: videoEnabled && {
+      video: muteStates.video.enabled && {
         deviceId: videoInputId,
         processor: initialProcessor,
       },
     }),
-    [initialAudioOptions, videoEnabled, videoInputId, initialProcessor],
+    [
+      initialAudioOptions,
+      muteStates.video.enabled,
+      videoInputId,
+      initialProcessor,
+    ],
   );
 
+  const latestMuteStates = useLatest(muteStates);
   const onError = useCallback(
     (error: Error) => {
       logger.error("Error while creating preview Tracks:", error);
-      muteStates.audio.setEnabled$.value?.(false);
-      muteStates.video.setEnabled$.value?.(false);
+      latestMuteStates.current.audio.setEnabled?.(false);
+      latestMuteStates.current.video.setEnabled?.(false);
     },
-    [muteStates],
+    [latestMuteStates],
   );
 
   const tracks = usePreviewTracks(localTrackOptions, onError);
@@ -207,7 +217,7 @@ export const LobbyView: FC<Props> = ({
         <div className={styles.content}>
           <VideoPreview
             matrixInfo={matrixInfo}
-            videoEnabled={videoEnabled}
+            muteStates={muteStates}
             videoTrack={videoTrack}
           >
             <Button
@@ -215,7 +225,6 @@ export const LobbyView: FC<Props> = ({
                 [styles.wait]: waitingForInvite,
               })}
               size={waitingForInvite ? "sm" : "lg"}
-              disabled={waitingForInvite}
               onClick={() => {
                 if (!waitingForInvite) onEnter();
               }}
@@ -230,14 +239,14 @@ export const LobbyView: FC<Props> = ({
           {recentsButtonInFooter && recentsButton}
           <div className={inCallStyles.buttons}>
             <MicButton
-              muted={!audioEnabled}
-              onClick={toggleAudio ?? undefined}
-              disabled={toggleAudio === null}
+              muted={!muteStates.audio.enabled}
+              onClick={onAudioPress}
+              disabled={muteStates.audio.setEnabled === null}
             />
             <VideoButton
-              muted={!videoEnabled}
-              onClick={toggleVideo ?? undefined}
-              disabled={toggleVideo === null}
+              muted={!muteStates.video.enabled}
+              onClick={onVideoPress}
+              disabled={muteStates.video.setEnabled === null}
             />
             <SettingsButton onClick={openSettings} />
             {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}

src/room/MuteStates.test.tsx

@@ -5,9 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-// TODO-MULTI-SFU: These tests need to be ported to the new MuteStates class.
-/*
-
 import {
   afterAll,
   afterEach,
@@ -324,4 +321,3 @@ describe("useMuteStates in VITE_PACKAGE='embedded' (widget) mode", () => {
     expect(screen.getByTestId("video-enabled").textContent).toBe("true");
   });
 });
-*/

src/room/MuteStates.ts

@@ -0,0 +1,178 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type Dispatch,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+import { type IWidgetApiRequest } from "matrix-widget-api";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { useObservableEagerState } from "observable-hooks";
+
+import {
+  type DeviceLabel,
+  type SelectedDevice,
+  type MediaDevice,
+} from "../state/MediaDevices";
+import { useIsEarpiece, useMediaDevices } from "../MediaDevicesContext";
+import { useReactiveState } from "../useReactiveState";
+import { ElementWidgetActions, widget } from "../widget";
+import { Config } from "../config/Config";
+import { useUrlParams } from "../UrlParams";
+
+/**
+ * If there already are this many participants in the call, we automatically mute
+ * the user.
+ */
+export const MUTE_PARTICIPANT_COUNT = 8;
+
+interface DeviceAvailable {
+  enabled: boolean;
+  setEnabled: Dispatch<SetStateAction<boolean>>;
+}
+
+interface DeviceUnavailable {
+  enabled: false;
+  setEnabled: null;
+}
+
+const deviceUnavailable: DeviceUnavailable = {
+  enabled: false,
+  setEnabled: null,
+};
+
+type MuteState = DeviceAvailable | DeviceUnavailable;
+
+export interface MuteStates {
+  audio: MuteState;
+  video: MuteState;
+}
+
+function useMuteState(
+  device: MediaDevice<DeviceLabel, SelectedDevice>,
+  enabledByDefault: () => boolean,
+  forceUnavailable: boolean = false,
+): MuteState {
+  const available = useObservableEagerState(device.available$);
+  const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
+    // Determine the default value once devices are actually connected
+    (prev) => prev ?? (available.size > 0 ? enabledByDefault() : undefined),
+    [available.size],
+  );
+  return useMemo(
+    () =>
+      available.size === 0 || forceUnavailable
+        ? deviceUnavailable
+        : {
+            enabled: enabled ?? false,
+            setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
+          },
+    [available.size, enabled, forceUnavailable, setEnabled],
+  );
+}
+
+export function useMuteStates(isJoined: boolean): MuteStates {
+  const devices = useMediaDevices();
+
+  const { skipLobby, defaultAudioEnabled, defaultVideoEnabled } =
+    useUrlParams();
+
+  const audio = useMuteState(
+    devices.audioInput,
+    () =>
+      (defaultAudioEnabled ?? Config.get().media_devices.enable_audio) &&
+      allowJoinUnmuted(skipLobby, isJoined),
+  );
+  useEffect(() => {
+    // If audio is enabled, we need to request the device names again,
+    // because iOS will not be able to switch to the correct device after un-muting.
+    // This is one of the main changes that makes iOS work with bluetooth audio devices.
+    if (audio.enabled) {
+      devices.requestDeviceNames();
+    }
+  }, [audio.enabled, devices]);
+  const isEarpiece = useIsEarpiece();
+  const video = useMuteState(
+    devices.videoInput,
+    () =>
+      (defaultVideoEnabled ?? Config.get().media_devices.enable_video) &&
+      allowJoinUnmuted(skipLobby, isJoined),
+    isEarpiece, // Force video to be unavailable if using earpiece
+  );
+
+  useEffect(() => {
+    widget?.api.transport
+      .send(ElementWidgetActions.DeviceMute, {
+        audio_enabled: audio.enabled,
+        video_enabled: video.enabled,
+      })
+      .catch((e) =>
+        logger.warn("Could not send DeviceMute action to widget", e),
+      );
+  }, [audio, video]);
+
+  const onMuteStateChangeRequest = useCallback(
+    (ev: CustomEvent<IWidgetApiRequest>) => {
+      // First copy the current state into our new state.
+      const newState = {
+        audio_enabled: audio.enabled,
+        video_enabled: video.enabled,
+      };
+      // Update new state if there are any requested changes from the widget action
+      // in `ev.detail.data`.
+      if (
+        ev.detail.data.audio_enabled != null &&
+        typeof ev.detail.data.audio_enabled === "boolean"
+      ) {
+        audio.setEnabled?.(ev.detail.data.audio_enabled);
+        newState.audio_enabled = ev.detail.data.audio_enabled;
+      }
+      if (
+        ev.detail.data.video_enabled != null &&
+        typeof ev.detail.data.video_enabled === "boolean"
+      ) {
+        video.setEnabled?.(ev.detail.data.video_enabled);
+        newState.video_enabled = ev.detail.data.video_enabled;
+      }
+      // Always reply with the new (now "current") state.
+      // This allows to also use this action to just get the unaltered current state
+      // by using a fromWidget request with: `ev.detail.data = {}`
+      widget!.api.transport.reply(ev.detail, newState);
+    },
+    [audio, video],
+  );
+  useEffect(() => {
+    // We setup a event listener for the widget action ElementWidgetActions.DeviceMute.
+    if (widget) {
+      // only setup the listener in widget mode
+
+      widget.lazyActions.on(
+        ElementWidgetActions.DeviceMute,
+        onMuteStateChangeRequest,
+      );
+
+      return (): void => {
+        // return a call to `off` so that we always clean up our listener.
+        widget?.lazyActions.off(
+          ElementWidgetActions.DeviceMute,
+          onMuteStateChangeRequest,
+        );
+      };
+    }
+  }, [onMuteStateChangeRequest]);
+
+  return useMemo(() => ({ audio, video }), [audio, video]);
+}
+
+function allowJoinUnmuted(skipLobby: boolean, isJoined: boolean): boolean {
+  return (
+    (!skipLobby && !isJoined) || import.meta.env.VITE_PACKAGE === "embedded"
+  );
+}

src/room/RoomPage.tsx

@@ -20,8 +20,6 @@ import {
   CheckIcon,
   UnknownSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { useObservable } from "observable-hooks";
-import { map } from "rxjs";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
@@ -37,13 +35,12 @@ import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useProfile } from "../profile/useProfile";
+import { useMuteStates } from "./MuteStates";
 import { useOptInAnalytics } from "../settings/settings";
 import { Config } from "../config/Config";
 import { Link } from "../button/Link";
 import { ErrorView } from "../ErrorView";
-import { useMediaDevices } from "../MediaDevicesContext";
-import { MuteStates } from "../state/MuteStates";
-import { ObservableScope } from "../state/ObservableScope";
+import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
 
 export const RoomPage: FC = () => {
   const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
@@ -64,19 +61,10 @@ export const RoomPage: FC = () => {
   const { avatarUrl, displayName: userDisplayName } = useProfile(client);
 
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
-  const [joined, setJoined] = useState(false);
-
-  const devices = useMediaDevices();
-  const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
-  const joined$ = useObservable(
-    (inputs$) => inputs$.pipe(map(([joined]) => joined)),
-    [joined],
+  const isJoined = useMatrixRTCSessionJoinState(
+    groupCallState.kind === "loaded" ? groupCallState.rtcSession : undefined,
   );
-  useEffect(() => {
-    const scope = new ObservableScope();
-    setMuteStates(new MuteStates(scope, devices, joined$));
-    return (): void => scope.end();
-  }, [devices, joined$]);
+  const muteStates = useMuteStates(isJoined);
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
@@ -113,25 +101,22 @@ export const RoomPage: FC = () => {
     }
   }, [groupCallState.kind]);
 
-  const groupCallView = (): ReactNode => {
+  const groupCallView = (): JSX.Element => {
     switch (groupCallState.kind) {
       case "loaded":
         return (
-          muteStates && (
-            <GroupCallView
-              widget={widget}
-              client={client!}
-              rtcSession={groupCallState.rtcSession}
-              joined={joined}
-              setJoined={setJoined}
-              isPasswordlessUser={passwordlessUser}
-              confineToRoom={confineToRoom}
-              preload={preload}
-              skipLobby={skipLobby || wasInWaitForInviteState.current}
-              header={header}
-              muteStates={muteStates}
-            />
-          )
+          <GroupCallView
+            widget={widget}
+            client={client!}
+            rtcSession={groupCallState.rtcSession}
+            isJoined={isJoined}
+            isPasswordlessUser={passwordlessUser}
+            confineToRoom={confineToRoom}
+            preload={preload}
+            skipLobby={skipLobby || wasInWaitForInviteState.current}
+            header={header}
+            muteStates={muteStates}
+          />
         );
       case "waitForInvite":
       case "canKnock": {
@@ -150,35 +135,31 @@ export const RoomPage: FC = () => {
             </>
           );
         return (
-          muteStates && (
-            <LobbyView
-              client={client!}
-              matrixInfo={{
-                userId: client!.getUserId() ?? "",
-                displayName: userDisplayName ?? "",
-                avatarUrl: avatarUrl ?? "",
-                roomAlias: null,
-                roomId: groupCallState.roomSummary.room_id,
-                roomName: groupCallState.roomSummary.name ?? "",
-                roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
-                e2eeSystem: {
-                  kind: groupCallState.roomSummary[
-                    "im.nheko.summary.encryption"
-                  ]
-                    ? E2eeType.PER_PARTICIPANT
-                    : E2eeType.NONE,
-                },
-              }}
-              onEnter={(): void => knock?.()}
-              enterLabel={label}
-              waitingForInvite={groupCallState.kind === "waitForInvite"}
-              confineToRoom={confineToRoom}
-              hideHeader={header !== "standard"}
-              participantCount={null}
-              muteStates={muteStates}
-              onShareClick={null}
-            />
-          )
+          <LobbyView
+            client={client!}
+            matrixInfo={{
+              userId: client!.getUserId() ?? "",
+              displayName: userDisplayName ?? "",
+              avatarUrl: avatarUrl ?? "",
+              roomAlias: null,
+              roomId: groupCallState.roomSummary.room_id,
+              roomName: groupCallState.roomSummary.name ?? "",
+              roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
+              e2eeSystem: {
+                kind: groupCallState.roomSummary["im.nheko.summary.encryption"]
+                  ? E2eeType.PER_PARTICIPANT
+                  : E2eeType.NONE,
+              },
+            }}
+            onEnter={(): void => knock?.()}
+            enterLabel={label}
+            waitingForInvite={groupCallState.kind === "waitForInvite"}
+            confineToRoom={confineToRoom}
+            hideHeader={header !== "standard"}
+            participantCount={null}
+            muteStates={muteStates}
+            onShareClick={null}
+          />
         );
       }
       case "loading":

src/room/VideoPreview.test.tsx

@@ -5,12 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { expect, describe, it, beforeAll } from "vitest";
+import { expect, describe, it, vi, beforeAll } from "vitest";
 import { render } from "@testing-library/react";
 
 import { type MatrixInfo, VideoPreview } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
 import { E2eeType } from "../e2ee/e2eeType";
 
+function mockMuteStates({ audio = true, video = true } = {}): MuteStates {
+  return {
+    audio: { enabled: audio, setEnabled: vi.fn() },
+    video: { enabled: video, setEnabled: vi.fn() },
+  };
+}
+
 describe("VideoPreview", () => {
   const matrixInfo: MatrixInfo = {
     userId: "@a:example.org",
@@ -41,7 +49,7 @@ describe("VideoPreview", () => {
     const { queryByRole } = render(
       <VideoPreview
         matrixInfo={matrixInfo}
-        videoEnabled={false}
+        muteStates={mockMuteStates({ video: false })}
         videoTrack={null}
         children={<></>}
       />,
@@ -53,7 +61,7 @@ describe("VideoPreview", () => {
     const { queryByRole } = render(
       <VideoPreview
         matrixInfo={matrixInfo}
-        videoEnabled
+        muteStates={mockMuteStates({ video: true })}
         videoTrack={null}
         children={<></>}
       />,

src/room/VideoPreview.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next";
 
 import { TileAvatar } from "../tile/TileAvatar";
 import styles from "./VideoPreview.module.css";
+import { type MuteStates } from "./MuteStates";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 export type MatrixInfo = {
@@ -28,14 +29,14 @@ export type MatrixInfo = {
 
 interface Props {
   matrixInfo: MatrixInfo;
-  videoEnabled: boolean;
+  muteStates: MuteStates;
   videoTrack: LocalVideoTrack | null;
   children: ReactNode;
 }
 
 export const VideoPreview: FC<Props> = ({
   matrixInfo,
-  videoEnabled,
+  muteStates,
   videoTrack,
   children,
 }) => {
@@ -55,8 +56,8 @@ export const VideoPreview: FC<Props> = ({
   }, [videoTrack]);
 
   const cameraIsStarting = useMemo(
-    () => videoEnabled && !videoTrack,
-    [videoEnabled, videoTrack],
+    () => muteStates.video.enabled && !videoTrack,
+    [muteStates.video.enabled, videoTrack],
   );
 
   return (
@@ -75,7 +76,7 @@ export const VideoPreview: FC<Props> = ({
         tabIndex={-1}
         disablePictureInPicture
       />
-      {(!videoEnabled || cameraIsStarting) && (
+      {(!muteStates.video.enabled || cameraIsStarting) && (
         <>
           <div className={styles.avatarContainer}>
             {cameraIsStarting && (

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

@@ -292,7 +292,7 @@ exports[`should have a close button in widget mode 1`] = `
             Call is not supported
           </h1>
           <p>
-            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
+            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
             class="_button_vczzf_8"
@@ -445,7 +445,7 @@ exports[`should render the error page with link back to home 1`] = `
             Call is not supported
           </h1>
           <p>
-            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
+            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
             class="_button_vczzf_8 homeLink"
@@ -598,7 +598,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             Call is not supported
           </h1>
           <p>
-            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
+            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
             class="_button_vczzf_8 homeLink"

src/room/useActiveFocus.ts

@@ -0,0 +1,45 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/lib/matrixrtc";
+import { useCallback, useRef } from "react";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { type LivekitFocus, isLivekitFocus } from "matrix-js-sdk/lib/matrixrtc";
+
+import { useTypedEventEmitterState } from "../useEvents";
+
+/**
+ * Gets the currently active (livekit) focus for a MatrixRTC session
+ * This logic is specific to livekit foci where the whole call must use one
+ * and the same focus.
+ */
+export function useActiveLivekitFocus(
+  rtcSession: MatrixRTCSession,
+): LivekitFocus | undefined {
+  const prevActiveFocus = useRef<LivekitFocus | undefined>(undefined);
+  return useTypedEventEmitterState(
+    rtcSession,
+    MatrixRTCSessionEvent.MembershipsChanged,
+    useCallback(() => {
+      const f = rtcSession.getActiveFocus();
+      // Only handle foci with type="livekit" for now.
+      if (f && isLivekitFocus(f) && !deepCompare(f, prevActiveFocus.current)) {
+        const oldestMembership = rtcSession.getOldestMembership();
+        logger.info(
+          `Got new active focus from membership: ${oldestMembership?.sender}/${oldestMembership?.deviceId}.
+          Updated focus (focus switch) from ${JSON.stringify(prevActiveFocus.current)} to ${JSON.stringify(f)}`,
+        );
+        prevActiveFocus.current = f;
+      }
+      return prevActiveFocus.current;
+    }, [rtcSession]),
+  );
+}

src/rtcSessionHelpers.test.ts

@@ -13,8 +13,8 @@ import EventEmitter from "events";
 import { enterRTCSession, leaveRTCSession } from "../src/rtcSessionHelpers";
 import { mockConfig } from "./utils/test";
 import { ElementWidgetActions, widget } from "./widget";
+import { ErrorCode } from "./utils/errors.ts";
 
-const USE_MUTI_SFU = false;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("./UrlParams", () => ({ getUrlParams }));
 
@@ -85,35 +85,41 @@ test("It joins the correct Session", async () => {
     }),
     joinRoomSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
-
-  await enterRTCSession(
-    mockedSession,
-    {
-      livekit_alias: "roomId",
-      livekit_service_url: "http://my-well-known-service-url.com",
-      type: "livekit",
-    },
-    {
-      encryptMedia: true,
-      useMultiSfu: USE_MUTI_SFU,
-    },
-  );
+  await enterRTCSession(mockedSession, false);
 
   expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
     [
+      {
+        livekit_alias: "my-oldest-member-service-alias",
+        livekit_service_url: "http://my-oldest-member-service-url.com",
+        type: "livekit",
+      },
       {
         livekit_alias: "roomId",
         livekit_service_url: "http://my-well-known-service-url.com",
         type: "livekit",
       },
+      {
+        livekit_alias: "roomId",
+        livekit_service_url: "http://my-well-known-service-url2.com",
+        type: "livekit",
+      },
+      {
+        livekit_alias: "roomId",
+        livekit_service_url: "http://my-default-service-url.com",
+        type: "livekit",
+      },
     ],
-    undefined,
-    expect.objectContaining({
-      manageMediaKeys: true,
+    {
+      focus_selection: "oldest_membership",
+      type: "livekit",
+    },
+    {
+      manageMediaKeys: false,
       useLegacyMemberEvents: false,
       useNewMembershipManager: true,
       useExperimentalToDeviceTransport: false,
-    }),
+    },
   );
 });
 
@@ -158,6 +164,27 @@ test("leaveRTCSession doesn't close the widget when returning to lobby", async (
   await testLeaveRTCSession("user", false);
 });
 
+test("It fails with configuration error if no live kit url config is set in fallback", async () => {
+  mockConfig({});
+  vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({});
+
+  const mockedSession = vi.mocked({
+    room: {
+      roomId: "roomId",
+      client: {
+        getDomain: vi.fn().mockReturnValue("example.org"),
+      },
+    },
+    memberships: [],
+    getFocusInUse: vi.fn(),
+    joinRoomSession: vi.fn(),
+  }) as unknown as MatrixRTCSession;
+
+  await expect(enterRTCSession(mockedSession, false)).rejects.toThrowError(
+    expect.objectContaining({ code: ErrorCode.MISSING_MATRIX_RTC_FOCUS }),
+  );
+});
+
 test("It should not fail with configuration error if homeserver config has livekit url but not fallback", async () => {
   mockConfig({});
   vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({
@@ -187,16 +214,5 @@ test("It should not fail with configuration error if homeserver config has livek
     joinRoomSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
-  await enterRTCSession(
-    mockedSession,
-    {
-      livekit_alias: "roomId",
-      livekit_service_url: "http://my-well-known-service-url.com",
-      type: "livekit",
-    },
-    {
-      encryptMedia: true,
-      useMultiSfu: USE_MUTI_SFU,
-    },
-  );
+  await enterRTCSession(mockedSession, false);
 });

src/rtcSessionHelpers.ts

@@ -6,10 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
+  isLivekitFocus,
+  isLivekitFocusConfig,
+  type LivekitFocus,
+  type LivekitFocusActive,
   type MatrixRTCSession,
-  isLivekitTransportConfig,
-  type LivekitTransportConfig,
-  type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
@@ -17,40 +18,38 @@ import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
 import { Config } from "./config/Config";
 import { ElementWidgetActions, widget, type WidgetHelpers } from "./widget";
-import { MatrixRTCTransportMissingError } from "./utils/errors";
+import { MatrixRTCFocusMissingError } from "./utils/errors";
 import { getUrlParams } from "./UrlParams";
 import { getSFUConfigWithOpenID } from "./livekit/openIDSFU.ts";
 
 const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
 
-export function getLivekitAlias(rtcSession: MatrixRTCSession): string {
-  // For now we assume everything is a room-scoped call
-  return rtcSession.room.roomId;
+export function makeActiveFocus(): LivekitFocusActive {
+  return {
+    type: "livekit",
+    focus_selection: "oldest_membership",
+  };
 }
 
-async function makeTransportInternal(
+async function makePreferredLivekitFoci(
   rtcSession: MatrixRTCSession,
-): Promise<LivekitTransport> {
-  logger.log("Searching for a preferred transport");
-  const livekitAlias = getLivekitAlias(rtcSession);
+  livekitAlias: string,
+): Promise<LivekitFocus[]> {
+  logger.log("Start building foci_preferred list: ", rtcSession.room.roomId);
 
-  // TODO-MULTI-SFU: Either remove this dev tool or make it more official
-  const urlFromStorage =
-    localStorage.getItem("robin-matrixrtc-auth") ??
-    localStorage.getItem("timo-focus-url");
-  if (urlFromStorage !== null) {
-    const transportFromStorage: LivekitTransport = {
-      type: "livekit",
-      livekit_service_url: urlFromStorage,
-      livekit_alias: livekitAlias,
-    };
-    logger.log(
-      "Using LiveKit transport from local storage: ",
-      transportFromStorage,
-    );
-    return transportFromStorage;
+  const preferredFoci: LivekitFocus[] = [];
+
+  // Make the Focus from the running rtc session the highest priority one
+  // This minimizes how often we need to switch foci during a call.
+  const focusInUse = rtcSession.getFocusInUse();
+  if (focusInUse && isLivekitFocus(focusInUse)) {
+    logger.log("Adding livekit focus from oldest member: ", focusInUse);
+    preferredFoci.push(focusInUse);
   }
 
+  // Warm up the first focus we owned, to ensure livekit room is created before any state event sent.
+  let toWarmUp: LivekitFocus | undefined;
+
   // Prioritize the .well-known/matrix/client, if available, over the configured SFU
   const domain = rtcSession.room.client.getDomain();
   if (domain) {
@@ -60,76 +59,55 @@ async function makeTransportInternal(
       FOCI_WK_KEY
     ];
     if (Array.isArray(wellKnownFoci)) {
-      const transport: LivekitTransportConfig | undefined = wellKnownFoci.find(
-        (f) => f && isLivekitTransportConfig(f),
-      );
-      if (transport !== undefined) {
-        logger.log("Using LiveKit transport from .well-known: ", transport);
-        return { ...transport, livekit_alias: livekitAlias };
+      const validWellKnownFoci = wellKnownFoci
+        .filter((f) => !!f)
+        .filter(isLivekitFocusConfig)
+        .map((wellKnownFocus) => {
+          logger.log("Adding livekit focus from well known: ", wellKnownFocus);
+          return { ...wellKnownFocus, livekit_alias: livekitAlias };
+        });
+      if (validWellKnownFoci.length > 0) {
+        toWarmUp = validWellKnownFoci[0];
       }
+      preferredFoci.push(...validWellKnownFoci);
     }
   }
 
   const urlFromConf = Config.get().livekit?.livekit_service_url;
   if (urlFromConf) {
-    const transportFromConf: LivekitTransport = {
+    const focusFormConf: LivekitFocus = {
       type: "livekit",
       livekit_service_url: urlFromConf,
       livekit_alias: livekitAlias,
     };
-    logger.log("Using LiveKit transport from config: ", transportFromConf);
-    return transportFromConf;
+    toWarmUp = toWarmUp ?? focusFormConf;
+    logger.log("Adding livekit focus from config: ", focusFormConf);
+    preferredFoci.push(focusFormConf);
   }
 
-  throw new MatrixRTCTransportMissingError(domain ?? "");
+  if (toWarmUp) {
+    // this will call the jwt/sfu/get endpoint to pre create the livekit room.
+    await getSFUConfigWithOpenID(rtcSession.room.client, toWarmUp);
+  }
+  if (preferredFoci.length === 0)
+    throw new MatrixRTCFocusMissingError(domain ?? "");
+  return Promise.resolve(preferredFoci);
+
+  // TODO: we want to do something like this:
+  //
+  // const focusOtherMembers = await focusFromOtherMembers(
+  //   rtcSession,
+  //   livekitAlias,
+  // );
+  // if (focusOtherMembers) preferredFoci.push(focusOtherMembers);
 }
 
-export async function makeTransport(
-  rtcSession: MatrixRTCSession,
-): Promise<LivekitTransport> {
-  const transport = await makeTransportInternal(rtcSession);
-  // this will call the jwt/sfu/get endpoint to pre create the livekit room.
-  await getSFUConfigWithOpenID(
-    rtcSession.room.client,
-    transport.livekit_service_url,
-    transport.livekit_alias,
-  );
-  return transport;
-}
-
-export interface EnterRTCSessionOptions {
-  encryptMedia: boolean;
-  // TODO: remove this flag, the new membership manager is stable enough
-  useNewMembershipManager?: boolean;
-  // TODO: remove this flag, to-device transport is stable enough now
-  useExperimentalToDeviceTransport?: boolean;
-  /** EXPERIMENTAL: If true, will use the multi-sfu codepath where each member connects to its SFU instead of everyone connecting to an elected on. */
-  useMultiSfu?: boolean;
-}
-
-/**
- * TODO! document this function properly
- * @param rtcSession
- * @param transport
- * @param options
- */
 export async function enterRTCSession(
   rtcSession: MatrixRTCSession,
-  transport: LivekitTransport,
-  options: EnterRTCSessionOptions = {
-    encryptMedia: true,
-    useNewMembershipManager: true,
-    useExperimentalToDeviceTransport: false,
-    useMultiSfu: true,
-  },
+  encryptMedia: boolean,
+  useNewMembershipManager = true,
+  useExperimentalToDeviceTransport = false,
 ): Promise<void> {
-  const {
-    encryptMedia,
-    useNewMembershipManager = true,
-    useExperimentalToDeviceTransport = false,
-    useMultiSfu = true,
-  } = options;
-
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -137,14 +115,15 @@ export async function enterRTCSession(
   // have started tracking by the time calls start getting created.
   // groupCallOTelMembership?.onJoinCall();
 
+  // right now we assume everything is a room-scoped call
+  const livekitAlias = rtcSession.room.roomId;
   const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
   const useDeviceSessionMemberEvents =
     features?.feature_use_device_session_member_events;
   const { sendNotificationType: notificationType, callIntent } = getUrlParams();
-  // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   rtcSession.joinRoomSession(
-    useMultiSfu ? [] : [transport],
-    useMultiSfu ? transport : undefined,
+    await makePreferredLivekitFoci(rtcSession, livekitAlias),
+    makeActiveFocus(),
     {
       notificationType,
       callIntent,

src/settings/DeveloperSettingsTab.tsx

@@ -13,10 +13,10 @@ import {
   useSetting,
   duplicateTiles as duplicateTilesSetting,
   debugTileLayout as debugTileLayoutSetting,
+  showNonMemberTiles as showNonMemberTilesSetting,
   showConnectionStats as showConnectionStatsSetting,
   useNewMembershipManager as useNewMembershipManagerSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
-  multiSfu as multiSfuSetting,
   muteAllAudio as muteAllAudioSetting,
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
 } from "./settings";
@@ -26,15 +26,18 @@ import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
 interface Props {
   client: MatrixClient;
-  livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
+  livekitRoom?: LivekitRoom;
 }
 
-export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
+export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
   const { t } = useTranslation();
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
   const [debugTileLayout, setDebugTileLayout] = useSetting(
     debugTileLayoutSetting,
   );
+  const [showNonMemberTiles, setShowNonMemberTiles] = useSetting(
+    showNonMemberTilesSetting,
+  );
 
   const [showConnectionStats, setShowConnectionStats] = useSetting(
     showConnectionStatsSetting,
@@ -51,22 +54,20 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
     useExperimentalToDeviceTransport,
     setUseExperimentalToDeviceTransport,
   ] = useSetting(useExperimentalToDeviceTransportSetting);
-  const [multiSfu, setMultiSfu] = useSetting(multiSfuSetting);
 
   const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
 
   const urlParams = useUrlParams();
 
-  const localSfuUrl = useMemo((): URL | null => {
-    const localRoom = livekitRooms?.find((r) => r.isLocal)?.room;
-    if (localRoom?.engine.client.ws?.url) {
+  const sfuUrl = useMemo((): URL | null => {
+    if (livekitRoom?.engine.client.ws?.url) {
       // strip the URL params
-      const url = new URL(localRoom.engine.client.ws.url);
+      const url = new URL(livekitRoom.engine.client.ws.url);
       url.search = "";
       return url;
     }
     return null;
-  }, [livekitRooms]);
+  }, [livekitRoom]);
 
   return (
     <>
@@ -126,6 +127,20 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           }
         />
       </FieldRow>
+      <FieldRow>
+        <InputField
+          id="showNonMemberTiles"
+          type="checkbox"
+          label={t("developer_mode.show_non_member_tiles")}
+          checked={!!showNonMemberTiles}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              setShowNonMemberTiles(event.target.checked);
+            },
+            [setShowNonMemberTiles],
+          )}
+        />
+      </FieldRow>
       <FieldRow>
         <InputField
           id="showConnectionStats"
@@ -168,20 +183,6 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           )}
         />
       </FieldRow>
-      <FieldRow>
-        <InputField
-          id="multiSfu"
-          type="checkbox"
-          label={t("developer_mode.multi_sfu")}
-          checked={multiSfu}
-          onChange={useCallback(
-            (event: ChangeEvent<HTMLInputElement>): void => {
-              setMultiSfu(event.target.checked);
-            },
-            [setMultiSfu],
-          )}
-        />
-      </FieldRow>
       <FieldRow>
         <InputField
           id="muteAllAudio"
@@ -210,26 +211,22 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           )}
         />{" "}
       </FieldRow>
-      {livekitRooms?.map((livekitRoom) => (
+      {livekitRoom ? (
         <>
-          <h3>
-            {t("developer_mode.livekit_sfu", {
-              url: livekitRoom.url || "unknown",
-            })}
-          </h3>
-          {livekitRoom.isLocal && <p>ws-url: {localSfuUrl?.href}</p>}
           <p>
-            {t("developer_mode.livekit_server_info")}(
-            {livekitRoom.isLocal ? "local" : "remote"})
+            {t("developer_mode.livekit_sfu", {
+              url: sfuUrl?.href || "unknown",
+            })}
           </p>
+          <p>{t("developer_mode.livekit_server_info")}</p>
           <pre className={styles.pre}>
-            {livekitRoom.room.serverInfo
-              ? JSON.stringify(livekitRoom.room.serverInfo, null, 2)
+            {livekitRoom.serverInfo
+              ? JSON.stringify(livekitRoom.serverInfo, null, 2)
               : "undefined"}
-            {livekitRoom.room.metadata}
+            {livekitRoom.metadata}
           </pre>
         </>
-      ))}
+      ) : null}
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(import.meta.env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>

src/settings/SettingsModal.tsx

@@ -51,11 +51,7 @@ interface Props {
   onTabChange: (tab: SettingsTab) => void;
   client: MatrixClient;
   roomId?: string;
-  livekitRooms?: {
-    room: LivekitRoom;
-    url: string;
-    isLocal?: boolean;
-  }[];
+  livekitRoom?: LivekitRoom;
 }
 
 export const defaultSettingsTab: SettingsTab = "audio";
@@ -67,7 +63,7 @@ export const SettingsModal: FC<Props> = ({
   onTabChange,
   client,
   roomId,
-  livekitRooms,
+  livekitRoom,
 }) => {
   const { t } = useTranslation();
 
@@ -208,9 +204,7 @@ export const SettingsModal: FC<Props> = ({
   const developerTab: Tab<SettingsTab> = {
     key: "developer",
     name: t("settings.developer_tab_title"),
-    content: (
-      <DeveloperSettingsTab client={client} livekitRooms={livekitRooms} />
-    ),
+    content: <DeveloperSettingsTab client={client} livekitRoom={livekitRoom} />,
   };
 
   const tabs = [audioTab, videoTab];

src/settings/settings.ts

@@ -76,6 +76,10 @@ export const developerMode = new Setting("developer-settings-tab", false);
 
 export const duplicateTiles = new Setting("duplicate-tiles", 0);
 
+export const showNonMemberTiles = new Setting<boolean>(
+  "show-non-member-tiles",
+  false,
+);
 export const debugTileLayout = new Setting("debug-tile-layout", false);
 
 export const showConnectionStats = new Setting<boolean>(
@@ -125,8 +129,6 @@ export const useExperimentalToDeviceTransport = new Setting<boolean>(
   true,
 );
 
-export const multiSfu = new Setting<boolean>("multi-sfu", false);
-
 export const muteAllAudio = new Setting<boolean>("mute-all-audio", false);
 
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);

src/state/Async.ts

@@ -1,53 +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 { catchError, from, map, type Observable, of, startWith } from "rxjs";
-
-/**
- * Data that may need to be loaded asynchronously.
- *
- * This type is for when you need to represent the current state of an operation
- * involving Promises as **immutable data**. See the async$ function below.
- */
-export type Async<A> =
-  | { state: "loading" }
-  | { state: "error"; value: Error }
-  | { state: "ready"; value: A };
-
-export const loading: Async<never> = { state: "loading" };
-export function error(value: Error): Async<never> {
-  return { state: "error", value };
-}
-
-export function ready<A>(value: A): Async<A> {
-  return { state: "ready", value };
-}
-
-/**
- * Turn a Promise into an Observable async value. The Observable will have the
- * value "loading" while the Promise is pending, "ready" when the Promise
- * resolves, and "error" when the Promise rejects.
- */
-export function async$<A>(promise: Promise<A>): Observable<Async<A>> {
-  return from(promise).pipe(
-    map(ready),
-    startWith(loading),
-    catchError((e: unknown) =>
-      of(error((e as Error) ?? new Error("Unknown error"))),
-    ),
-  );
-}
-
-/**
- * If the async value is ready, apply the given function to the inner value.
- */
-export function mapAsync<A, B>(
-  async: Async<A>,
-  project: (value: A) => B,
-): Async<B> {
-  return async.state === "ready" ? ready(project(async.value)) : async;
-}

src/state/CallViewModel.test.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { test, vi, onTestFinished, it, describe, expect } from "vitest";
+import { test, vi, onTestFinished, it, describe } from "vitest";
 import EventEmitter from "events";
 import {
   BehaviorSubject,
@@ -40,16 +40,20 @@ import * as ComponentsCore from "@livekit/components-core";
 import {
   Status,
   type CallMembership,
+  type MatrixRTCSession,
   type IRTCNotificationContent,
   type ICallNotifyContent,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
-import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 
-import { CallViewModel, type CallViewModelOptions } from "./CallViewModel";
-import { type Layout } from "./layout-types";
 import {
+  CallViewModel,
+  type CallViewModelOptions,
+  type Layout,
+} from "./CallViewModel";
+import {
+  mockLivekitRoom,
   mockLocalParticipant,
   mockMatrixRoom,
   mockMatrixRoomMember,
@@ -58,15 +62,14 @@ import {
   mockRtcMembership,
   MockRTCSession,
   mockMediaDevices,
-  mockMuteStates,
-  mockConfig,
 } from "../utils/test";
 import {
   ECAddonConnectionState,
   type ECConnectionState,
 } from "../livekit/useECConnectionState";
 import { E2eeType } from "../e2ee/e2eeType";
-import type { RaisedHandInfo, ReactionInfo } from "../reactions";
+import type { RaisedHandInfo } from "../reactions";
+import { showNonMemberTiles } from "../settings/settings";
 import {
   alice,
   aliceDoppelganger,
@@ -93,11 +96,6 @@ import { ObservableScope } from "./ObservableScope";
 import { MediaDevices } from "./MediaDevices";
 import { getValue } from "../utils/observable";
 import { type Behavior, constant } from "./Behavior";
-import type { ProcessorState } from "../livekit/TrackProcessorContext.tsx";
-import {
-  type ElementCallError,
-  MatrixRTCTransportMissingError,
-} from "../utils/errors.ts";
 
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../UrlParams", () => ({ getUrlParams }));
@@ -268,7 +266,7 @@ const mockLegacyRingEvent = {} as { event_id: string } & ICallNotifyContent;
 interface CallViewModelInputs {
   remoteParticipants$: Behavior<RemoteParticipant[]>;
   rtcMembers$: Behavior<Partial<CallMembership>[]>;
-  livekitConnectionState$: Behavior<ECConnectionState>;
+  livekitConnectionState$: Observable<ECConnectionState>;
   speaking: Map<Participant, Observable<boolean>>;
   mediaDevices: MediaDevices;
   initialSyncState: SyncState;
@@ -278,9 +276,7 @@ function withCallViewModel(
   {
     remoteParticipants$ = constant([]),
     rtcMembers$ = constant([localRtcMember]),
-    livekitConnectionState$: connectionState$ = constant(
-      ConnectionState.Connected,
-    ),
+    livekitConnectionState$: connectionState$ = of(ConnectionState.Connected),
     speaking = new Map(),
     mediaDevices = mockMediaDevices({}),
     initialSyncState = SyncState.Syncing,
@@ -305,7 +301,7 @@ function withCallViewModel(
   const room = mockMatrixRoom({
     client: new (class extends EventEmitter {
       public getUserId(): string | undefined {
-        return localRtcMember.userId;
+        return localRtcMember.sender;
       }
       public getDeviceId(): string {
         return localRtcMember.deviceId;
@@ -342,22 +338,23 @@ function withCallViewModel(
   const roomEventSelectorSpy = vi
     .spyOn(ComponentsCore, "roomEventSelector")
     .mockImplementation((_room, _eventType) => of());
-  const muteStates = mockMuteStates();
+
+  const livekitRoom = mockLivekitRoom(
+    { localParticipant },
+    { remoteParticipants$ },
+  );
+
   const raisedHands$ = new BehaviorSubject<Record<string, RaisedHandInfo>>({});
-  const reactions$ = new BehaviorSubject<Record<string, ReactionInfo>>({});
 
   const vm = new CallViewModel(
-    rtcSession.asMockedSession(),
+    rtcSession as unknown as MatrixRTCSession,
     room,
+    livekitRoom,
     mediaDevices,
-    muteStates,
     options,
+    connectionState$,
     raisedHands$,
-    reactions$,
-    new BehaviorSubject<ProcessorState>({
-      processor: undefined,
-      supported: undefined,
-    }),
+    new BehaviorSubject({}),
   );
 
   onTestFinished(() => {
@@ -371,61 +368,6 @@ function withCallViewModel(
   continuation(vm, rtcSession, { raisedHands$: raisedHands$ }, setSyncState);
 }
 
-test("test missing RTC config error", async () => {
-  const rtcMemberships$ = new BehaviorSubject<CallMembership[]>([]);
-  const emitter = new EventEmitter();
-  const client = vi.mocked<MatrixClient>({
-    on: emitter.on.bind(emitter),
-    off: emitter.off.bind(emitter),
-    getSyncState: vi.fn().mockReturnValue(SyncState.Syncing),
-    getUserId: vi.fn().mockReturnValue("@user:localhost"),
-    getUser: vi.fn().mockReturnValue(null),
-    getDeviceId: vi.fn().mockReturnValue("DEVICE"),
-    credentials: {
-      userId: "@user:localhost",
-    },
-    getCrypto: vi.fn().mockReturnValue(undefined),
-    getDomain: vi.fn().mockReturnValue("example.org"),
-  } as unknown as MatrixClient);
-
-  const matrixRoom = mockMatrixRoom({
-    roomId: "!myRoomId:example.com",
-    client,
-    getMember: vi.fn().mockReturnValue(undefined),
-  });
-
-  const fakeRtcSession = new MockRTCSession(matrixRoom).withMemberships(
-    rtcMemberships$,
-  );
-
-  mockConfig({});
-  vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({});
-
-  const callVM = new CallViewModel(
-    fakeRtcSession.asMockedSession(),
-    matrixRoom,
-    mockMediaDevices({}),
-    mockMuteStates(),
-    {
-      encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-      autoLeaveWhenOthersLeft: false,
-    },
-    new BehaviorSubject({} as Record<string, RaisedHandInfo>),
-    new BehaviorSubject({} as Record<string, ReactionInfo>),
-    of({ processor: undefined, supported: false }),
-  );
-
-  const failPromise = Promise.withResolvers<ElementCallError>();
-  callVM.configError$.subscribe((error) => {
-    if (error) {
-      failPromise.resolve(error);
-    }
-  });
-
-  const error = await failPromise.promise;
-  expect(error).toBeInstanceOf(MatrixRTCTransportMissingError);
-});
-
 test("participants are retained during a focus switch", () => {
   withTestScheduler(({ behavior, expectObservable }) => {
     // Participants disappear on frame 2 and come back on frame 3
@@ -886,6 +828,53 @@ test("participants must have a MatrixRTCSession to be visible", () => {
   });
 });
 
+test("shows participants without MatrixRTCSession when enabled in settings", () => {
+  try {
+    // enable the setting:
+    showNonMemberTiles.setValue(true);
+    withTestScheduler(({ behavior, expectObservable }) => {
+      const scenarioInputMarbles = " abc";
+      const expectedLayoutMarbles = "abc";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: behavior(scenarioInputMarbles, {
+            a: [],
+            b: [aliceParticipant],
+            c: [aliceParticipant, bobParticipant],
+          }),
+          rtcMembers$: constant([localRtcMember]), // No one else joins the MatrixRTC session
+        },
+        (vm) => {
+          vm.setGridMode("grid");
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                type: "grid",
+                spotlight: undefined,
+                grid: ["local:0"],
+              },
+              b: {
+                type: "one-on-one",
+                local: "local:0",
+                remote: `${aliceId}:0`,
+              },
+              c: {
+                type: "grid",
+                spotlight: undefined,
+                grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+              },
+            },
+          );
+        },
+      );
+    });
+  } finally {
+    showNonMemberTiles.setValue(showNonMemberTiles.defaultValue);
+  }
+});
+
 it("should show at least one tile per MatrixRTCSession", () => {
   withTestScheduler(({ behavior, expectObservable }) => {
     // iterate through some combinations of MatrixRTC memberships
@@ -1070,7 +1059,7 @@ it("should rank raised hands above video feeds and below speakers and presenters
           },
           b: () => {
             raisedHands$.next({
-              [`${bobRtcMember.userId}:${bobRtcMember.deviceId}`]: {
+              [`${bobRtcMember.sender}:${bobRtcMember.deviceId}`]: {
                 time: new Date(),
                 reactionEventId: "",
                 membershipEventId: "",
@@ -1283,7 +1272,7 @@ describe("waitForCallPickup$", () => {
             },
           });
 
-          expectObservable(vm.callPickupState$).toBe("a 9ms b 19ms c", {
+          expectObservable(vm.callPickupState$).toBe("a 9ms b 29ms c", {
             a: "unknown",
             b: "ringing",
             c: "timeout",

src/state/Connection.test.ts

@@ -1,756 +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 {
-  afterEach,
-  describe,
-  expect,
-  it,
-  type Mock,
-  type MockedObject,
-  onTestFinished,
-  vi,
-} from "vitest";
-import { BehaviorSubject, of } from "rxjs";
-import {
-  ConnectionState,
-  type LocalParticipant,
-  type RemoteParticipant,
-  type Room as LivekitRoom,
-  RoomEvent,
-  type RoomOptions,
-} from "livekit-client";
-import fetchMock from "fetch-mock";
-import EventEmitter from "events";
-import { type IOpenIDToken } from "matrix-js-sdk";
-
-import type {
-  CallMembership,
-  LivekitTransport,
-} from "matrix-js-sdk/lib/matrixrtc";
-import {
-  type ConnectionOpts,
-  type TransportState,
-  type PublishingParticipant,
-  RemoteConnection,
-} from "./Connection.ts";
-import { ObservableScope } from "./ObservableScope.ts";
-import { type OpenIDClientParts } from "../livekit/openIDSFU.ts";
-import { FailToGetOpenIdToken } from "../utils/errors.ts";
-import { PublishConnection } from "./PublishConnection.ts";
-import { mockMediaDevices, mockMuteStates } from "../utils/test.ts";
-import type { ProcessorState } from "../livekit/TrackProcessorContext.tsx";
-import { type MuteStates } from "./MuteStates.ts";
-
-let testScope: ObservableScope;
-
-let client: MockedObject<OpenIDClientParts>;
-
-let fakeLivekitRoom: MockedObject<LivekitRoom>;
-
-let localParticipantEventEmiter: EventEmitter;
-let fakeLocalParticipant: MockedObject<LocalParticipant>;
-
-let fakeRoomEventEmiter: EventEmitter;
-let fakeMembershipsFocusMap$: BehaviorSubject<
-  { membership: CallMembership; transport: LivekitTransport }[]
->;
-
-const livekitFocus: LivekitTransport = {
-  livekit_alias: "!roomID:example.org",
-  livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
-  type: "livekit",
-};
-
-function setupTest(): void {
-  testScope = new ObservableScope();
-  client = vi.mocked<OpenIDClientParts>({
-    getOpenIdToken: vi.fn().mockResolvedValue({
-      access_token: "rYsmGUEwNjKgJYyeNUkZseJN",
-      token_type: "Bearer",
-      matrix_server_name: "example.org",
-      expires_in: 3600,
-    }),
-    getDeviceId: vi.fn().mockReturnValue("ABCDEF"),
-  } as unknown as OpenIDClientParts);
-  fakeMembershipsFocusMap$ = new BehaviorSubject<
-    { membership: CallMembership; transport: LivekitTransport }[]
-  >([]);
-
-  localParticipantEventEmiter = new EventEmitter();
-
-  fakeLocalParticipant = vi.mocked<LocalParticipant>({
-    identity: "@me:example.org",
-    isMicrophoneEnabled: vi.fn().mockReturnValue(true),
-    getTrackPublication: vi.fn().mockReturnValue(undefined),
-    on: localParticipantEventEmiter.on.bind(localParticipantEventEmiter),
-    off: localParticipantEventEmiter.off.bind(localParticipantEventEmiter),
-    addListener: localParticipantEventEmiter.addListener.bind(
-      localParticipantEventEmiter,
-    ),
-    removeListener: localParticipantEventEmiter.removeListener.bind(
-      localParticipantEventEmiter,
-    ),
-    removeAllListeners: localParticipantEventEmiter.removeAllListeners.bind(
-      localParticipantEventEmiter,
-    ),
-  } as unknown as LocalParticipant);
-  fakeRoomEventEmiter = new EventEmitter();
-
-  fakeLivekitRoom = vi.mocked<LivekitRoom>({
-    connect: vi.fn(),
-    disconnect: vi.fn(),
-    remoteParticipants: new Map(),
-    localParticipant: fakeLocalParticipant,
-    state: ConnectionState.Disconnected,
-    on: fakeRoomEventEmiter.on.bind(fakeRoomEventEmiter),
-    off: fakeRoomEventEmiter.off.bind(fakeRoomEventEmiter),
-    addListener: fakeRoomEventEmiter.addListener.bind(fakeRoomEventEmiter),
-    removeListener:
-      fakeRoomEventEmiter.removeListener.bind(fakeRoomEventEmiter),
-    removeAllListeners:
-      fakeRoomEventEmiter.removeAllListeners.bind(fakeRoomEventEmiter),
-    setE2EEEnabled: vi.fn().mockResolvedValue(undefined),
-  } as unknown as LivekitRoom);
-}
-
-function setupRemoteConnection(): RemoteConnection {
-  const opts: ConnectionOpts = {
-    client: client,
-    transport: livekitFocus,
-    remoteTransports$: fakeMembershipsFocusMap$,
-    scope: testScope,
-    livekitRoomFactory: () => fakeLivekitRoom,
-  };
-
-  fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, () => {
-    return {
-      status: 200,
-      body: {
-        url: "wss://matrix-rtc.m.localhost/livekit/sfu",
-        jwt: "ATOKEN",
-      },
-    };
-  });
-
-  fakeLivekitRoom.connect.mockResolvedValue(undefined);
-
-  return new RemoteConnection(opts, undefined);
-}
-
-afterEach(() => {
-  vi.useRealTimers();
-  vi.clearAllMocks();
-  fetchMock.reset();
-});
-
-describe("Start connection states", () => {
-  it("start in initialized state", () => {
-    setupTest();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      remoteTransports$: fakeMembershipsFocusMap$,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-    const connection = new RemoteConnection(opts, undefined);
-
-    expect(connection.transportState$.getValue().state).toEqual("Initialized");
-  });
-
-  it("fail to getOpenId token then error state", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      remoteTransports$: fakeMembershipsFocusMap$,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-
-    const connection = new RemoteConnection(opts, undefined);
-
-    const capturedStates: TransportState[] = [];
-    const s = connection.transportState$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    const deferred = Promise.withResolvers<IOpenIDToken>();
-
-    client.getOpenIdToken.mockImplementation(
-      async (): Promise<IOpenIDToken> => {
-        return await deferred.promise;
-      },
-    );
-
-    connection.start().catch(() => {
-      // expected to throw
-    });
-
-    let capturedState = capturedStates.pop();
-    expect(capturedState).toBeDefined();
-    expect(capturedState!.state).toEqual("FetchingConfig");
-
-    deferred.reject(new FailToGetOpenIdToken(new Error("Failed to get token")));
-
-    await vi.runAllTimersAsync();
-
-    capturedState = capturedStates.pop();
-    if (capturedState!.state === "FailedToStart") {
-      expect(capturedState!.error.message).toEqual("Something went wrong");
-      expect(capturedState!.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
-    } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + capturedState?.state,
-      );
-    }
-  });
-
-  it("fail to get JWT token and error state", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      remoteTransports$: fakeMembershipsFocusMap$,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-
-    const connection = new RemoteConnection(opts, undefined);
-
-    const capturedStates: TransportState[] = [];
-    const s = connection.transportState$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    const deferredSFU = Promise.withResolvers<void>();
-    // mock the /sfu/get call
-    fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, async () => {
-      await deferredSFU.promise;
-      return {
-        status: 500,
-        body: "Internal Server Error",
-      };
-    });
-
-    connection.start().catch(() => {
-      // expected to throw
-    });
-
-    let capturedState = capturedStates.pop();
-    expect(capturedState).toBeDefined();
-    expect(capturedState?.state).toEqual("FetchingConfig");
-
-    deferredSFU.resolve();
-    await vi.runAllTimersAsync();
-
-    capturedState = capturedStates.pop();
-
-    if (capturedState?.state === "FailedToStart") {
-      expect(capturedState?.error.message).toContain(
-        "SFU Config fetch failed with exception Error",
-      );
-      expect(capturedState?.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
-    } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + capturedState?.state,
-      );
-    }
-  });
-
-  it("fail to connect to livekit error state", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      remoteTransports$: fakeMembershipsFocusMap$,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-
-    const connection = new RemoteConnection(opts, undefined);
-
-    const capturedStates: TransportState[] = [];
-    const s = connection.transportState$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    const deferredSFU = Promise.withResolvers<void>();
-    // mock the /sfu/get call
-    fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, () => {
-      return {
-        status: 200,
-        body: {
-          url: "wss://matrix-rtc.m.localhost/livekit/sfu",
-          jwt: "ATOKEN",
-        },
-      };
-    });
-
-    fakeLivekitRoom.connect.mockImplementation(async () => {
-      await deferredSFU.promise;
-      throw new Error("Failed to connect to livekit");
-    });
-
-    connection.start().catch(() => {
-      // expected to throw
-    });
-
-    let capturedState = capturedStates.pop();
-    expect(capturedState).toBeDefined();
-
-    expect(capturedState?.state).toEqual("FetchingConfig");
-
-    deferredSFU.resolve();
-    await vi.runAllTimersAsync();
-
-    capturedState = capturedStates.pop();
-
-    if (capturedState && capturedState?.state === "FailedToStart") {
-      expect(capturedState.error.message).toContain(
-        "Failed to connect to livekit",
-      );
-      expect(capturedState.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
-    } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + JSON.stringify(capturedState),
-      );
-    }
-  });
-
-  it("connection states happy path", async () => {
-    vi.useFakeTimers();
-    setupTest();
-
-    const connection = setupRemoteConnection();
-
-    const capturedStates: TransportState[] = [];
-    const s = connection.transportState$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    await connection.start();
-    await vi.runAllTimersAsync();
-
-    const initialState = capturedStates.shift();
-    expect(initialState?.state).toEqual("Initialized");
-    const fetchingState = capturedStates.shift();
-    expect(fetchingState?.state).toEqual("FetchingConfig");
-    const connectingState = capturedStates.shift();
-    expect(connectingState?.state).toEqual("ConnectingToLkRoom");
-    const connectedState = capturedStates.shift();
-    expect(connectedState?.state).toEqual("ConnectedToLkRoom");
-  });
-
-  it("should relay livekit events once connected", async () => {
-    setupTest();
-
-    const connection = setupRemoteConnection();
-
-    await connection.start();
-
-    let capturedStates: TransportState[] = [];
-    const s = connection.transportState$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    const states = [
-      ConnectionState.Disconnected,
-      ConnectionState.Connecting,
-      ConnectionState.Connected,
-      ConnectionState.SignalReconnecting,
-      ConnectionState.Connecting,
-      ConnectionState.Connected,
-      ConnectionState.Reconnecting,
-    ];
-    for (const state of states) {
-      fakeRoomEventEmiter.emit(RoomEvent.ConnectionStateChanged, state);
-    }
-
-    for (const state of states) {
-      const s = capturedStates.shift();
-      expect(s?.state).toEqual("ConnectedToLkRoom");
-      const transportState = s as TransportState & {
-        state: "ConnectedToLkRoom";
-      };
-      expect(transportState.livekitState).toEqual(state);
-
-      // should always have the focus info
-      expect(transportState.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
-      expect(transportState.transport.livekit_service_url).toEqual(
-        livekitFocus.livekit_service_url,
-      );
-    }
-
-    // If the state is not ConnectedToLkRoom, no events should be relayed anymore
-    await connection.stop();
-    capturedStates = [];
-    for (const state of states) {
-      fakeRoomEventEmiter.emit(RoomEvent.ConnectionStateChanged, state);
-    }
-
-    expect(capturedStates.length).toEqual(0);
-  });
-
-  it("shutting down the scope should stop the connection", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const connection = setupRemoteConnection();
-    await connection.start();
-
-    const stopSpy = vi.spyOn(connection, "stop");
-    testScope.end();
-
-    expect(stopSpy).toHaveBeenCalled();
-    expect(fakeLivekitRoom.disconnect).toHaveBeenCalled();
-  });
-});
-
-function fakeRemoteLivekitParticipant(id: string): RemoteParticipant {
-  return {
-    identity: id,
-  } as unknown as RemoteParticipant;
-}
-
-function fakeRtcMemberShip(userId: string, deviceId: string): CallMembership {
-  return {
-    userId,
-    deviceId,
-  } as unknown as CallMembership;
-}
-
-describe("Publishing participants observations", () => {
-  it("should emit the list of publishing participants", async () => {
-    setupTest();
-
-    const connection = setupRemoteConnection();
-
-    const bobIsAPublisher = Promise.withResolvers<void>();
-    const danIsAPublisher = Promise.withResolvers<void>();
-    const observedPublishers: PublishingParticipant[][] = [];
-    const s = connection.publishingParticipants$.subscribe((publishers) => {
-      observedPublishers.push(publishers);
-      if (
-        publishers.some(
-          (p) => p.participant?.identity === "@bob:example.org:DEV111",
-        )
-      ) {
-        bobIsAPublisher.resolve();
-      }
-      if (
-        publishers.some(
-          (p) => p.participant?.identity === "@dan:example.org:DEV333",
-        )
-      ) {
-        danIsAPublisher.resolve();
-      }
-    });
-    onTestFinished(() => s.unsubscribe());
-    // The publishingParticipants$ observable is derived from the current members of the
-    // livekitRoom and the rtc membership in order to publish the members that are publishing
-    // on this connection.
-
-    let participants: RemoteParticipant[] = [
-      fakeRemoteLivekitParticipant("@alice:example.org:DEV000"),
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111"),
-      fakeRemoteLivekitParticipant("@carol:example.org:DEV222"),
-      fakeRemoteLivekitParticipant("@dan:example.org:DEV333"),
-    ];
-
-    // Let's simulate 3 members on the livekitRoom
-    vi.spyOn(fakeLivekitRoom, "remoteParticipants", "get").mockReturnValue(
-      new Map(participants.map((p) => [p.identity, p])),
-    );
-
-    for (const participant of participants) {
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, participant);
-    }
-
-    // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(0);
-
-    const otherFocus: LivekitTransport = {
-      livekit_alias: "!roomID:example.org",
-      livekit_service_url: "https://other-matrix-rtc.example.org/livekit/jwt",
-      type: "livekit",
-    };
-
-    const rtcMemberships = [
-      // Say bob is on the same focus
-      {
-        membership: fakeRtcMemberShip("@bob:example.org", "DEV111"),
-        transport: livekitFocus,
-      },
-      // Alice and carol is on a different focus
-      {
-        membership: fakeRtcMemberShip("@alice:example.org", "DEV000"),
-        transport: otherFocus,
-      },
-      {
-        membership: fakeRtcMemberShip("@carol:example.org", "DEV222"),
-        transport: otherFocus,
-      },
-      // NO DAVE YET
-    ];
-    // signal this change in rtc memberships
-    fakeMembershipsFocusMap$.next(rtcMemberships);
-
-    // We should have bob has a publisher now
-    await bobIsAPublisher.promise;
-    const publishers = observedPublishers.pop();
-    expect(publishers?.length).toEqual(1);
-    expect(publishers?.[0].participant?.identity).toEqual(
-      "@bob:example.org:DEV111",
-    );
-
-    // Now let's make dan join the rtc memberships
-    rtcMemberships.push({
-      membership: fakeRtcMemberShip("@dan:example.org", "DEV333"),
-      transport: livekitFocus,
-    });
-    fakeMembershipsFocusMap$.next(rtcMemberships);
-
-    // We should have bob and dan has publishers now
-    await danIsAPublisher.promise;
-    const twoPublishers = observedPublishers.pop();
-    expect(twoPublishers?.length).toEqual(2);
-    expect(
-      twoPublishers?.some(
-        (p) => p.participant?.identity === "@bob:example.org:DEV111",
-      ),
-    ).toBeTruthy();
-    expect(
-      twoPublishers?.some(
-        (p) => p.participant?.identity === "@dan:example.org:DEV333",
-      ),
-    ).toBeTruthy();
-
-    // Now let's make bob leave the livekit room
-    participants = participants.filter(
-      (p) => p.identity !== "@bob:example.org:DEV111",
-    );
-    vi.spyOn(fakeLivekitRoom, "remoteParticipants", "get").mockReturnValue(
-      new Map(participants.map((p) => [p.identity, p])),
-    );
-    fakeRoomEventEmiter.emit(
-      RoomEvent.ParticipantDisconnected,
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111"),
-    );
-
-    const updatedPublishers = observedPublishers.pop();
-    // Bob is not connected to the room but he is still in the rtc memberships declaring that
-    // he is using that focus to publish, so he should still appear as a publisher
-    expect(updatedPublishers?.length).toEqual(2);
-    const pp = updatedPublishers?.find(
-      (p) => p.membership.userId == "@bob:example.org",
-    );
-    expect(pp).toBeDefined();
-    expect(pp!.participant).not.toBeDefined();
-    expect(
-      updatedPublishers?.some(
-        (p) => p.participant?.identity === "@dan:example.org:DEV333",
-      ),
-    ).toBeTruthy();
-    // Now if bob is not in the rtc memberships, he should disappear
-    const noBob = rtcMemberships.filter(
-      ({ membership }) => membership.userId !== "@bob:example.org",
-    );
-    fakeMembershipsFocusMap$.next(noBob);
-    expect(observedPublishers.pop()?.length).toEqual(1);
-  });
-
-  it("should be scoped to parent scope", (): void => {
-    setupTest();
-
-    const connection = setupRemoteConnection();
-
-    let observedPublishers: PublishingParticipant[][] = [];
-    const s = connection.publishingParticipants$.subscribe((publishers) => {
-      observedPublishers.push(publishers);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    let participants: RemoteParticipant[] = [
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111"),
-    ];
-
-    // Let's simulate 3 members on the livekitRoom
-    vi.spyOn(fakeLivekitRoom, "remoteParticipants", "get").mockReturnValue(
-      new Map(participants.map((p) => [p.identity, p])),
-    );
-
-    for (const participant of participants) {
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, participant);
-    }
-
-    // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(0);
-
-    const rtcMemberships = [
-      // Say bob is on the same focus
-      {
-        membership: fakeRtcMemberShip("@bob:example.org", "DEV111"),
-        transport: livekitFocus,
-      },
-    ];
-    // signal this change in rtc memberships
-    fakeMembershipsFocusMap$.next(rtcMemberships);
-
-    // We should have bob has a publisher now
-    const publishers = observedPublishers.pop();
-    expect(publishers?.length).toEqual(1);
-    expect(publishers?.[0].participant?.identity).toEqual(
-      "@bob:example.org:DEV111",
-    );
-
-    // end the parent scope
-    testScope.end();
-    observedPublishers = [];
-
-    // SHOULD NOT emit any more publishers as the scope is ended
-    participants = participants.filter(
-      (p) => p.identity !== "@bob:example.org:DEV111",
-    );
-    vi.spyOn(fakeLivekitRoom, "remoteParticipants", "get").mockReturnValue(
-      new Map(participants.map((p) => [p.identity, p])),
-    );
-    fakeRoomEventEmiter.emit(
-      RoomEvent.ParticipantDisconnected,
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111"),
-    );
-
-    expect(observedPublishers.length).toEqual(0);
-  });
-});
-
-describe("PublishConnection", () => {
-  // let fakeBlurProcessor: ProcessorWrapper<BackgroundOptions>;
-  let roomFactoryMock: Mock<() => LivekitRoom>;
-  let muteStates: MockedObject<MuteStates>;
-
-  function setUpPublishConnection(): void {
-    setupTest();
-
-    roomFactoryMock = vi.fn().mockReturnValue(fakeLivekitRoom);
-
-    muteStates = mockMuteStates();
-
-    // fakeBlurProcessor = vi.mocked<ProcessorWrapper<BackgroundOptions>>({
-    //   name: "BackgroundBlur",
-    //   restart: vi.fn().mockResolvedValue(undefined),
-    //   setOptions: vi.fn().mockResolvedValue(undefined),
-    //   getOptions: vi.fn().mockReturnValue({ strength: 0.5 }),
-    //   isRunning: vi.fn().mockReturnValue(false)
-    // });
-  }
-
-  describe("Livekit room creation", () => {
-    function createSetup(): void {
-      setUpPublishConnection();
-
-      const fakeTrackProcessorSubject$ = new BehaviorSubject<ProcessorState>({
-        supported: true,
-        processor: undefined,
-      });
-
-      const opts: ConnectionOpts = {
-        client: client,
-        transport: livekitFocus,
-        remoteTransports$: fakeMembershipsFocusMap$,
-        scope: testScope,
-        livekitRoomFactory: roomFactoryMock,
-      };
-
-      const audioInput = {
-        available$: of(new Map([["mic1", { id: "mic1" }]])),
-        selected$: new BehaviorSubject({ id: "mic1" }),
-        select(): void {},
-      };
-
-      const videoInput = {
-        available$: of(new Map([["cam1", { id: "cam1" }]])),
-        selected$: new BehaviorSubject({ id: "cam1" }),
-        select(): void {},
-      };
-
-      const audioOutput = {
-        available$: of(new Map([["speaker", { id: "speaker" }]])),
-        selected$: new BehaviorSubject({ id: "speaker" }),
-        select(): void {},
-      };
-
-      // TODO understand what is wrong with our mocking that requires ts-expect-error
-      const fakeDevices = mockMediaDevices({
-        // @ts-expect-error Mocking only
-        audioInput,
-        // @ts-expect-error Mocking only
-        videoInput,
-        // @ts-expect-error Mocking only
-        audioOutput,
-      });
-
-      new PublishConnection(
-        opts,
-        fakeDevices,
-        muteStates,
-        undefined,
-        fakeTrackProcessorSubject$,
-      );
-    }
-
-    it("should create room with proper initial audio and video settings", () => {
-      createSetup();
-
-      expect(roomFactoryMock).toHaveBeenCalled();
-
-      const lastCallArgs =
-        roomFactoryMock.mock.calls[roomFactoryMock.mock.calls.length - 1];
-
-      const roomOptions = lastCallArgs.pop() as unknown as RoomOptions;
-      expect(roomOptions).toBeDefined();
-
-      expect(roomOptions!.videoCaptureDefaults?.deviceId).toEqual("cam1");
-      expect(roomOptions!.audioCaptureDefaults?.deviceId).toEqual("mic1");
-      expect(roomOptions!.audioOutput?.deviceId).toEqual("speaker");
-    });
-
-    it("respect controlledAudioDevices", () => {
-      // TODO: Refactor the code to make it testable.
-      // The UrlParams module is a singleton has a cache and is very hard to test.
-      // This breaks other tests as well if not handled properly.
-      // vi.mock(import("./../UrlParams"), () => {
-      //   return {
-      //     getUrlParams: vi.fn().mockReturnValue({
-      //       controlledAudioDevices: true
-      //     })
-      //   };
-      // });
-    });
-  });
-});

src/state/Connection.ts

@@ -1,296 +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 {
-  connectedParticipantsObserver,
-  connectionStateObserver,
-} from "@livekit/components-core";
-import {
-  ConnectionError,
-  type ConnectionState,
-  type E2EEOptions,
-  type RemoteParticipant,
-  Room as LivekitRoom,
-  type RoomOptions,
-} from "livekit-client";
-import {
-  type CallMembership,
-  type LivekitTransport,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, combineLatest } from "rxjs";
-
-import {
-  getSFUConfigWithOpenID,
-  type OpenIDClientParts,
-  type SFUConfig,
-} from "../livekit/openIDSFU";
-import { type Behavior } from "./Behavior";
-import { type ObservableScope } from "./ObservableScope";
-import { defaultLiveKitOptions } from "../livekit/options";
-import {
-  InsufficientCapacityError,
-  SFURoomCreationRestrictedError,
-} from "../utils/errors.ts";
-
-export interface ConnectionOpts {
-  /** The media transport to connect to. */
-  transport: LivekitTransport;
-  /** The Matrix client to use for OpenID and SFU config requests. */
-  client: OpenIDClientParts;
-  /** The observable scope to use for this connection. */
-  scope: ObservableScope;
-  /** An observable of the current RTC call memberships and their associated transports. */
-  remoteTransports$: Behavior<
-    { membership: CallMembership; transport: LivekitTransport }[]
-  >;
-
-  /** Optional factory to create the Livekit room, mainly for testing purposes. */
-  livekitRoomFactory?: (options?: RoomOptions) => LivekitRoom;
-}
-
-export type TransportState =
-  | { state: "Initialized" }
-  | { state: "FetchingConfig"; transport: LivekitTransport }
-  | { state: "ConnectingToLkRoom"; transport: LivekitTransport }
-  | { state: "PublishingTracks"; transport: LivekitTransport }
-  | { state: "FailedToStart"; error: Error; transport: LivekitTransport }
-  | {
-      state: "ConnectedToLkRoom";
-      livekitState: ConnectionState;
-      transport: LivekitTransport;
-    }
-  | { state: "Stopped"; transport: LivekitTransport };
-
-/**
- * Represents participant publishing or expected to publish on the connection.
- * It is paired with its associated rtc membership.
- */
-export type PublishingParticipant = {
-  /**
-   * The LiveKit participant publishing on this connection, or undefined if the participant is not currently (yet) connected to the livekit room.
-   */
-  participant: RemoteParticipant | undefined;
-  /**
-   * The rtc call membership associated with this participant.
-   */
-  membership: CallMembership;
-};
-
-/**
- * A connection to a Matrix RTC LiveKit backend.
- *
- * Expose observables for participants and connection state.
- */
-export class Connection {
-  // Private Behavior
-  private readonly _transportState$ = new BehaviorSubject<TransportState>({
-    state: "Initialized",
-  });
-
-  /**
-   * The current state of the connection to the media transport.
-   */
-  public readonly transportState$: Behavior<TransportState> =
-    this._transportState$;
-
-  /**
-   * Whether the connection has been stopped.
-   * @see Connection.stop
-   * */
-  protected stopped = false;
-
-  /**
-   * Starts the connection.
-   *
-   * This will:
-   * 1. Request an OpenId token `request_token` (allows matrix users to verify their identity with a third-party service.)
-   * 2. Use this token to request the SFU config to the MatrixRtc authentication service.
-   * 3. Connect to the configured LiveKit room.
-   *
-   * @throws {InsufficientCapacityError} if the LiveKit server indicates that it has insufficient capacity to accept the connection.
-   * @throws {SFURoomCreationRestrictedError} if the LiveKit server indicates that the room does not exist and cannot be created.
-   */
-  public async start(): Promise<void> {
-    this.stopped = false;
-    try {
-      this._transportState$.next({
-        state: "FetchingConfig",
-        transport: this.transport,
-      });
-      const { url, jwt } = await this.getSFUConfigWithOpenID();
-      // If we were stopped while fetching the config, don't proceed to connect
-      if (this.stopped) return;
-
-      this._transportState$.next({
-        state: "ConnectingToLkRoom",
-        transport: this.transport,
-      });
-      try {
-        await this.livekitRoom.connect(url, jwt);
-      } catch (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) {
-          if (e.status === 503 || e.status === 200 || e.status === 429) {
-            throw new InsufficientCapacityError();
-          }
-          if (e.status === 404) {
-            // error msg is "Could not establish signal connection: requested room does not exist"
-            // The room does not exist. There are two different modes of operation for the SFU:
-            // - the room is created on the fly when connecting (livekit `auto_create` option)
-            // - Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service)
-            // In the first case there will not be a 404, so we are in the second case.
-            throw new SFURoomCreationRestrictedError();
-          }
-        }
-        throw e;
-      }
-      // If we were stopped while connecting, don't proceed to update state.
-      if (this.stopped) return;
-
-      this._transportState$.next({
-        state: "ConnectedToLkRoom",
-        transport: this.transport,
-        livekitState: this.livekitRoom.state,
-      });
-    } catch (error) {
-      this._transportState$.next({
-        state: "FailedToStart",
-        error: error instanceof Error ? error : new Error(`${error}`),
-        transport: this.transport,
-      });
-      throw error;
-    }
-  }
-
-  protected async getSFUConfigWithOpenID(): Promise<SFUConfig> {
-    return await getSFUConfigWithOpenID(
-      this.client,
-      this.transport.livekit_service_url,
-      this.transport.livekit_alias,
-    );
-  }
-  /**
-   * Stops the connection.
-   *
-   * This will disconnect from the LiveKit room.
-   * If the connection is already stopped, this is a no-op.
-   */
-  public async stop(): Promise<void> {
-    if (this.stopped) return;
-    await this.livekitRoom.disconnect();
-    this._transportState$.next({
-      state: "Stopped",
-      transport: this.transport,
-    });
-    this.stopped = true;
-  }
-
-  /**
-   * An observable of the participants that are publishing on this connection.
-   * This is derived from `participantsIncludingSubscribers$` and `remoteTransports$`.
-   * It filters the participants to only those that are associated with a membership that claims to publish on this connection.
-   */
-  public readonly publishingParticipants$: Behavior<PublishingParticipant[]>;
-
-  /**
-   * The media transport to connect to.
-   */
-  public readonly transport: LivekitTransport;
-
-  private readonly client: OpenIDClientParts;
-  /**
-   * Creates a new connection to a matrix RTC LiveKit backend.
-   *
-   * @param livekitRoom - LiveKit room instance to use.
-   * @param opts - Connection options {@link ConnectionOpts}.
-   *
-   */
-  protected constructor(
-    public readonly livekitRoom: LivekitRoom,
-    opts: ConnectionOpts,
-  ) {
-    const { transport, client, scope, remoteTransports$ } = opts;
-
-    this.transport = transport;
-    this.client = client;
-
-    const participantsIncludingSubscribers$ = scope.behavior(
-      connectedParticipantsObserver(this.livekitRoom),
-      [],
-    );
-
-    this.publishingParticipants$ = scope.behavior(
-      combineLatest(
-        [participantsIncludingSubscribers$, remoteTransports$],
-        (participants, remoteTransports) =>
-          remoteTransports
-            // Find all members that claim to publish on this connection
-            .flatMap(({ membership, transport }) =>
-              transport.livekit_service_url ===
-              this.transport.livekit_service_url
-                ? [membership]
-                : [],
-            )
-            // Pair with their associated LiveKit participant (if any)
-            .map((membership) => {
-              const id = `${membership.userId}:${membership.deviceId}`;
-              const participant = participants.find((p) => p.identity === id);
-              return { participant, membership };
-            }),
-      ),
-      [],
-    );
-
-    scope
-      .behavior<ConnectionState>(connectionStateObserver(livekitRoom))
-      .subscribe((livekitState) => {
-        const current = this._transportState$.value;
-        // Only update the state if we are already connected to the LiveKit room.
-        if (current.state === "ConnectedToLkRoom") {
-          this._transportState$.next({
-            state: "ConnectedToLkRoom",
-            livekitState,
-            transport: current.transport,
-          });
-        }
-      });
-
-    scope.onEnd(() => void this.stop());
-  }
-}
-
-/**
- * A remote connection to the Matrix RTC LiveKit backend.
- *
- * This connection is used for subscribing to remote participants.
- * It does not publish any local tracks.
- */
-export class RemoteConnection extends Connection {
-  /**
-   * Creates a new remote connection to a matrix RTC LiveKit backend.
-   * @param opts
-   * @param sharedE2eeOption - The shared E2EE options to use for the connection.
-   */
-  public constructor(
-    opts: ConnectionOpts,
-    sharedE2eeOption: E2EEOptions | undefined,
-  ) {
-    const factory =
-      opts.livekitRoomFactory ??
-      ((options: RoomOptions): LivekitRoom => new LivekitRoom(options));
-    const livekitRoom = factory({
-      ...defaultLiveKitOptions,
-      e2ee: sharedE2eeOption,
-    });
-    super(livekitRoom, opts);
-  }
-}

src/state/GridLikeLayout.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Layout, type LayoutMedia } from "./layout-types.ts";
+import { type Layout, type LayoutMedia } from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 export type GridLikeLayoutType =

src/state/MediaViewModel.ts

@@ -255,7 +255,7 @@ abstract class BaseMediaViewModel extends ViewModel {
      */
     // TODO: Fully separate the data layer from the UI layer by keeping the
     // member object internal
-    public readonly member: RoomMember,
+    public readonly member: RoomMember | undefined,
     // We don't necessarily have a participant if a user connects via MatrixRTC but not (yet) through
     // livekit.
     protected readonly participant$: Observable<
@@ -266,7 +266,6 @@ abstract class BaseMediaViewModel extends ViewModel {
     audioSource: AudioSource,
     videoSource: VideoSource,
     livekitRoom: LivekitRoom,
-    public readonly focusURL: string,
     public readonly displayName$: Behavior<string>,
   ) {
     super();
@@ -404,11 +403,10 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
 
   public constructor(
     id: string,
-    member: RoomMember,
+    member: RoomMember | undefined,
     participant$: Observable<LocalParticipant | RemoteParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    focusUrl: string,
     displayName$: Behavior<string>,
     public readonly handRaised$: Behavior<Date | null>,
     public readonly reaction$: Behavior<ReactionOption | null>,
@@ -421,7 +419,6 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       Track.Source.Microphone,
       Track.Source.Camera,
       livekitRoom,
-      focusUrl,
       displayName$,
     );
 
@@ -538,11 +535,10 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
 
   public constructor(
     id: string,
-    member: RoomMember,
+    member: RoomMember | undefined,
     participant$: Behavior<LocalParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    focusURL: string,
     private readonly mediaDevices: MediaDevices,
     displayName$: Behavior<string>,
     handRaised$: Behavior<Date | null>,
@@ -554,7 +550,6 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
       participant$,
       encryptionSystem,
       livekitRoom,
-      focusURL,
       displayName$,
       handRaised$,
       reaction$,
@@ -646,11 +641,10 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
 
   public constructor(
     id: string,
-    member: RoomMember,
+    member: RoomMember | undefined,
     participant$: Observable<RemoteParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    focusUrl: string,
     private readonly pretendToBeDisconnected$: Behavior<boolean>,
     displayname$: Behavior<string>,
     handRaised$: Behavior<Date | null>,
@@ -662,7 +656,6 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
       participant$,
       encryptionSystem,
       livekitRoom,
-      focusUrl,
       displayname$,
       handRaised$,
       reaction$,
@@ -743,11 +736,10 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
 
   public constructor(
     id: string,
-    member: RoomMember,
+    member: RoomMember | undefined,
     participant$: Observable<LocalParticipant | RemoteParticipant>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    focusUrl: string,
     private readonly pretendToBeDisconnected$: Behavior<boolean>,
     displayname$: Behavior<string>,
     public readonly local: boolean,
@@ -760,7 +752,6 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
       Track.Source.ScreenShareAudio,
       Track.Source.ScreenShare,
       livekitRoom,
-      focusUrl,
       displayname$,
     );
   }

src/state/MuteStates.ts

@@ -1,213 +0,0 @@
-/*
-Copyright 2023-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 IWidgetApiRequest } from "matrix-widget-api";
-import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  BehaviorSubject,
-  combineLatest,
-  distinctUntilChanged,
-  firstValueFrom,
-  fromEvent,
-  map,
-  merge,
-  Observable,
-  of,
-  Subject,
-  switchMap,
-  withLatestFrom,
-} from "rxjs";
-
-import { type MediaDevices, type MediaDevice } from "../state/MediaDevices";
-import { ElementWidgetActions, widget } from "../widget";
-import { Config } from "../config/Config";
-import { getUrlParams } from "../UrlParams";
-import { type ObservableScope } from "./ObservableScope";
-import { type Behavior } from "./Behavior";
-
-interface MuteStateData {
-  enabled$: Observable<boolean>;
-  set: ((enabled: boolean) => void) | null;
-  toggle: (() => void) | null;
-}
-
-export type Handler = (desired: boolean) => Promise<boolean>;
-const defaultHandler: Handler = async (desired) => Promise.resolve(desired);
-
-class MuteState<Label, Selected> {
-  private readonly enabledByDefault$ =
-    this.enabledByConfig && !getUrlParams().skipLobby
-      ? this.joined$.pipe(map((isJoined) => !isJoined))
-      : of(false);
-
-  private readonly handler$ = new BehaviorSubject(defaultHandler);
-  public setHandler(handler: Handler): void {
-    if (this.handler$.value !== defaultHandler)
-      throw new Error("Multiple mute state handlers are not supported");
-    this.handler$.next(handler);
-  }
-  public unsetHandler(): void {
-    this.handler$.next(defaultHandler);
-  }
-
-  private readonly data$ = this.scope.behavior<MuteStateData>(
-    this.device.available$.pipe(
-      map((available) => available.size > 0),
-      distinctUntilChanged(),
-      withLatestFrom(
-        this.enabledByDefault$,
-        (devicesConnected, enabledByDefault) => {
-          if (!devicesConnected)
-            return { enabled$: of(false), set: null, toggle: null };
-
-          // Assume the default value only once devices are actually connected
-          let enabled = enabledByDefault;
-          const set$ = new Subject<boolean>();
-          const toggle$ = new Subject<void>();
-          const desired$ = merge(set$, toggle$.pipe(map(() => !enabled)));
-          const enabled$ = new Observable<boolean>((subscriber) => {
-            subscriber.next(enabled);
-            let latestDesired = enabledByDefault;
-            let syncing = false;
-
-            const sync = async (): Promise<void> => {
-              if (enabled === latestDesired) syncing = false;
-              else {
-                const previouslyEnabled = enabled;
-                enabled = await firstValueFrom(
-                  this.handler$.pipe(
-                    switchMap(async (handler) => handler(latestDesired)),
-                  ),
-                );
-                if (enabled === previouslyEnabled) {
-                  syncing = false;
-                } else {
-                  subscriber.next(enabled);
-                  syncing = true;
-                  sync().catch((err) => {
-                    // TODO: better error handling
-                    logger.error("MuteState: handler error", err);
-                  });
-                }
-              }
-            };
-
-            const s = desired$.subscribe((desired) => {
-              latestDesired = desired;
-              if (syncing === false) {
-                syncing = true;
-                sync().catch((err) => {
-                  // TODO: better error handling
-                  logger.error("MuteState: handler error", err);
-                });
-              }
-            });
-            return (): void => s.unsubscribe();
-          });
-
-          return {
-            set: (enabled: boolean): void => set$.next(enabled),
-            toggle: (): void => toggle$.next(),
-            enabled$,
-          };
-        },
-      ),
-    ),
-  );
-
-  public readonly enabled$: Behavior<boolean> = this.scope.behavior(
-    this.data$.pipe(switchMap(({ enabled$ }) => enabled$)),
-  );
-
-  public readonly setEnabled$: Behavior<((enabled: boolean) => void) | null> =
-    this.scope.behavior(this.data$.pipe(map(({ set }) => set)));
-
-  public readonly toggle$: Behavior<(() => void) | null> = this.scope.behavior(
-    this.data$.pipe(map(({ toggle }) => toggle)),
-  );
-
-  public constructor(
-    private readonly scope: ObservableScope,
-    private readonly device: MediaDevice<Label, Selected>,
-    private readonly joined$: Observable<boolean>,
-    private readonly enabledByConfig: boolean,
-  ) {}
-}
-
-export class MuteStates {
-  public readonly audio = new MuteState(
-    this.scope,
-    this.mediaDevices.audioInput,
-    this.joined$,
-    Config.get().media_devices.enable_audio,
-  );
-  public readonly video = new MuteState(
-    this.scope,
-    this.mediaDevices.videoInput,
-    this.joined$,
-    Config.get().media_devices.enable_video,
-  );
-
-  public constructor(
-    private readonly scope: ObservableScope,
-    private readonly mediaDevices: MediaDevices,
-    private readonly joined$: Observable<boolean>,
-  ) {
-    if (widget !== null) {
-      // Sync our mute states with the hosting client
-      const widgetApiState$ = combineLatest(
-        [this.audio.enabled$, this.video.enabled$],
-        (audio, video) => ({ audio_enabled: audio, video_enabled: video }),
-      );
-      widgetApiState$.pipe(this.scope.bind()).subscribe((state) => {
-        widget!.api.transport
-          .send(ElementWidgetActions.DeviceMute, state)
-          .catch((e) =>
-            logger.warn("Could not send DeviceMute action to widget", e),
-          );
-      });
-
-      // Also sync the hosting client's mute states back with ours
-      const muteActions$ = fromEvent(
-        widget.lazyActions,
-        ElementWidgetActions.DeviceMute,
-      ) as Observable<CustomEvent<IWidgetApiRequest>>;
-      muteActions$
-        .pipe(
-          withLatestFrom(
-            widgetApiState$,
-            this.audio.setEnabled$,
-            this.video.setEnabled$,
-          ),
-          this.scope.bind(),
-        )
-        .subscribe(([ev, state, setAudioEnabled, setVideoEnabled]) => {
-          // First copy the current state into our new state
-          const newState = { ...state };
-          // Update new state if there are any requested changes from the widget
-          // action in `ev.detail.data`.
-          if (
-            ev.detail.data.audio_enabled != null &&
-            typeof ev.detail.data.audio_enabled === "boolean" &&
-            setAudioEnabled !== null
-          ) {
-            newState.audio_enabled = ev.detail.data.audio_enabled;
-            setAudioEnabled(newState.audio_enabled);
-          }
-          if (
-            ev.detail.data.video_enabled != null &&
-            typeof ev.detail.data.video_enabled === "boolean" &&
-            setVideoEnabled !== null
-          ) {
-            newState.video_enabled = ev.detail.data.video_enabled;
-            setVideoEnabled(newState.video_enabled);
-          }
-          widget!.api.transport.reply(ev.detail, newState);
-        });
-    }
-  }
-}

src/state/ObservableScope.ts

@@ -7,14 +7,9 @@ Please see LICENSE in the repository root for full details.
 
 import {
   BehaviorSubject,
-  catchError,
   distinctUntilChanged,
-  EMPTY,
-  endWith,
-  filter,
   type Observable,
-  share,
-  take,
+  Subject,
   takeUntil,
 } from "rxjs";
 
@@ -28,11 +23,9 @@ const nothing = Symbol("nothing");
  * A scope which limits the execution lifetime of its bound Observables.
  */
 export class ObservableScope {
-  private readonly ended$ = new BehaviorSubject(false);
+  private readonly ended$ = new Subject<void>();
 
-  private readonly bindImpl: MonoTypeOperator = takeUntil(
-    this.ended$.pipe(filter((ended) => ended)),
-  );
+  private readonly bindImpl: MonoTypeOperator = takeUntil(this.ended$);
 
   /**
    * Binds an Observable to this scope, so that it completes when the scope
@@ -42,17 +35,6 @@ export class ObservableScope {
     return this.bindImpl;
   }
 
-  private readonly shareImpl: MonoTypeOperator = share({
-    resetOnError: false,
-    resetOnComplete: false,
-    resetOnRefCountZero: false,
-  });
-  /**
-   * Shares (multicasts) the Observable as a hot Observable.
-   */
-  public readonly share: MonoTypeOperator = (input$) =>
-    input$.pipe(this.bindImpl, this.shareImpl);
-
   /**
    * Converts an Observable to a Behavior. If no initial value is specified, the
    * Observable must synchronously emit an initial value.
@@ -84,66 +66,8 @@ export class ObservableScope {
    * Ends the scope, causing any bound Observables to complete.
    */
   public end(): void {
-    this.ended$.next(true);
-  }
-
-  /**
-   * Register a callback to be executed when the scope is ended.
-   */
-  public onEnd(callback: () => void): void {
-    this.ended$
-      .pipe(
-        filter((ended) => ended),
-        take(1),
-      )
-      .subscribe(callback);
-  }
-
-  /**
-   * For the duration of the scope, sync some external state with the value of
-   * the provided Behavior by way of an async function which attempts to update
-   * (reconcile) the external state. The reconciliation function may return a
-   * clean-up callback which will be called and awaited before the next change
-   * in value (or the end of the scope).
-   *
-   * All calls to the function and its clean-up callbacks are serialized. If the
-   * value changes faster than the handlers can keep up with, intermediate
-   * values may be skipped.
-   *
-   * Basically, this is like React's useEffect but async and for Behaviors.
-   */
-  public reconcile<T>(
-    value$: Behavior<T>,
-    callback: (value: T) => Promise<(() => Promise<void>) | void>,
-  ): void {
-    let latestValue: T | typeof nothing = nothing;
-    let reconciledValue: T | typeof nothing = nothing;
-    let cleanUp: (() => Promise<void>) | void = undefined;
-    value$
-      .pipe(
-        catchError(() => EMPTY), // Ignore errors
-        this.bind(), // Limit to the duration of the scope
-        endWith(nothing), // Clean up when the scope ends
-      )
-      .subscribe((value) => {
-        void (async (): Promise<void> => {
-          if (latestValue === nothing) {
-            latestValue = value;
-            while (latestValue !== reconciledValue) {
-              await cleanUp?.(); // Call the previous value's clean-up handler
-              reconciledValue = latestValue;
-              if (latestValue !== nothing)
-                cleanUp = await callback(latestValue); // Sync current value
-            }
-            // Reset to signal that reconciliation is done for now
-            latestValue = nothing;
-          } else {
-            // There's already an instance of the above 'while' loop running
-            // concurrently. Just update the latest value and let it be handled.
-            latestValue = value;
-          }
-        })();
-      });
+    this.ended$.next();
+    this.ended$.complete();
   }
 }
 

src/state/OneOnOneLayout.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type OneOnOneLayout, type OneOnOneLayoutMedia } from "./layout-types";
+import { type OneOnOneLayout, type OneOnOneLayoutMedia } from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 /**

src/state/PipLayout.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type PipLayout, type PipLayoutMedia } from "./layout-types.ts";
+import { type PipLayout, type PipLayoutMedia } from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 /**

src/state/PublishConnection.ts

@@ -1,298 +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 {
-  ConnectionState,
-  type E2EEOptions,
-  LocalVideoTrack,
-  Room as LivekitRoom,
-  type RoomOptions,
-  Track,
-} from "livekit-client";
-import {
-  map,
-  NEVER,
-  type Observable,
-  type Subscription,
-  switchMap,
-} from "rxjs";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import type { Behavior } from "./Behavior.ts";
-import type { MediaDevices, SelectedDevice } from "./MediaDevices.ts";
-import type { MuteStates } from "./MuteStates.ts";
-import {
-  type ProcessorState,
-  trackProcessorSync,
-} from "../livekit/TrackProcessorContext.tsx";
-import { getUrlParams } from "../UrlParams.ts";
-import { defaultLiveKitOptions } from "../livekit/options.ts";
-import { getValue } from "../utils/observable.ts";
-import { observeTrackReference$ } from "./MediaViewModel.ts";
-import { Connection, type ConnectionOpts } from "./Connection.ts";
-import { type ObservableScope } from "./ObservableScope.ts";
-
-/**
- * A connection to the local LiveKit room, the one the user is publishing to.
- * This connection will publish the local user's audio and video tracks.
- */
-export class PublishConnection extends Connection {
-  private readonly scope: ObservableScope;
-
-  /**
-   * Creates a new PublishConnection.
-   * @param args - The connection options. {@link ConnectionOpts}
-   * @param devices - The media devices to use for audio and video input.
-   * @param muteStates - The mute states for audio and video.
-   * @param e2eeLivekitOptions - The E2EE options to use for the LiveKit room. Use to share the same key provider across connections!.
-   * @param trackerProcessorState$ - The processor state for the video track processor (e.g. background blur).
-   */
-  public constructor(
-    args: ConnectionOpts,
-    devices: MediaDevices,
-    private readonly muteStates: MuteStates,
-    e2eeLivekitOptions: E2EEOptions | undefined,
-    trackerProcessorState$: Behavior<ProcessorState>,
-  ) {
-    const { scope } = args;
-    logger.info("[LivekitRoom] Create LiveKit room");
-    const { controlledAudioDevices } = getUrlParams();
-
-    const factory =
-      args.livekitRoomFactory ??
-      ((options: RoomOptions): LivekitRoom => new LivekitRoom(options));
-    const room = factory(
-      generateRoomOption(
-        devices,
-        trackerProcessorState$.value,
-        controlledAudioDevices,
-        e2eeLivekitOptions,
-      ),
-    );
-    room.setE2EEEnabled(e2eeLivekitOptions !== undefined).catch((e) => {
-      logger.error("Failed to set E2EE enabled on room", e);
-    });
-
-    super(room, args);
-    this.scope = scope;
-
-    // Setup track processor syncing (blur)
-    this.observeTrackProcessors(scope, room, trackerProcessorState$);
-    // Observe media device changes and update LiveKit active devices accordingly
-    this.observeMediaDevices(scope, devices, controlledAudioDevices);
-
-    this.workaroundRestartAudioInputTrackChrome(devices, scope);
-  }
-
-  /**
-   * Start the connection to LiveKit and publish local tracks.
-   *
-   * This will:
-   * 1. Request an OpenId token `request_token` (allows matrix users to verify their identity with a third-party service.)
-   * 2. Use this token to request the SFU config to the MatrixRtc authentication service.
-   * 3. Connect to the configured LiveKit room.
-   * 4. Create local audio and video tracks based on the current mute states and publish them to the room.
-   *
-   * @throws {InsufficientCapacityError} if the LiveKit server indicates that it has insufficient capacity to accept the connection.
-   * @throws {SFURoomCreationRestrictedError} if the LiveKit server indicates that the room does not exist and cannot be created.
-   */
-  public async start(): Promise<void> {
-    this.stopped = false;
-
-    // Observe mute state changes and update LiveKit microphone/camera states accordingly
-    this.observeMuteStates(this.scope);
-
-    // TODO: This will fetch the JWT token. Perhaps we could keep it preloaded
-    // instead? This optimization would only be safe for a publish connection,
-    // because we don't want to leak the user's intent to perhaps join a call to
-    // remote servers before they actually commit to it.
-    await super.start();
-
-    if (this.stopped) return;
-
-    // TODO-MULTI-SFU: Prepublish a microphone track
-    const audio = this.muteStates.audio.enabled$.value;
-    const video = this.muteStates.video.enabled$.value;
-    // createTracks throws if called with audio=false and video=false
-    if (audio || video) {
-      // TODO this can still throw errors? It will also prompt for permissions if not already granted
-      const tracks = await this.livekitRoom.localParticipant.createTracks({
-        audio,
-        video,
-      });
-      if (this.stopped) return;
-      for (const track of tracks) {
-        // TODO: handle errors? Needs the signaling connection to be up, but it has some retries internally
-        // with a timeout.
-        await this.livekitRoom.localParticipant.publishTrack(track);
-        if (this.stopped) return;
-        // TODO: check if the connection is still active? and break the loop if not?
-      }
-    }
-  }
-
-  public async stop(): Promise<void> {
-    // TODO-MULTI-SFU: Move these calls back to ObservableScope.onEnd once scope
-    // actually has the right lifetime
-    this.muteStates.audio.unsetHandler();
-    this.muteStates.video.unsetHandler();
-    await super.stop();
-  }
-
-  /// Private methods
-
-  // 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.
-  private workaroundRestartAudioInputTrackChrome(
-    devices: MediaDevices,
-    scope: ObservableScope,
-  ): void {
-    devices.audioInput.selected$
-      .pipe(
-        switchMap((device) => device?.hardwareDeviceChange$ ?? NEVER),
-        scope.bind(),
-      )
-      .subscribe(() => {
-        if (this.livekitRoom.state != ConnectionState.Connected) return;
-        const activeMicTrack = Array.from(
-          this.livekitRoom.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).
-          this.livekitRoom.localParticipant
-            .getTrackPublication(Track.Source.Microphone)
-            ?.audioTrack?.restartTrack()
-            .catch((e) => {
-              logger.error(`Failed to restart audio device track`, e);
-            });
-        }
-      });
-  }
-
-  // Observe changes in the selected media devices and update the LiveKit room accordingly.
-  private observeMediaDevices(
-    scope: ObservableScope,
-    devices: MediaDevices,
-    controlledAudioDevices: boolean,
-  ): void {
-    const syncDevice = (
-      kind: MediaDeviceKind,
-      selected$: Observable<SelectedDevice | undefined>,
-    ): Subscription =>
-      selected$.pipe(scope.bind()).subscribe((device) => {
-        if (this.livekitRoom.state != ConnectionState.Connected) return;
-        // if (this.connectionState$.value !== ConnectionState.Connected) return;
-        logger.info(
-          "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :",
-          this.livekitRoom.getActiveDevice(kind),
-          " !== ",
-          device?.id,
-        );
-        if (
-          device !== undefined &&
-          this.livekitRoom.getActiveDevice(kind) !== device.id
-        ) {
-          this.livekitRoom
-            .switchActiveDevice(kind, device.id)
-            .catch((e) =>
-              logger.error(`Failed to sync ${kind} device with LiveKit`, e),
-            );
-        }
-      });
-
-    syncDevice("audioinput", devices.audioInput.selected$);
-    if (!controlledAudioDevices)
-      syncDevice("audiooutput", devices.audioOutput.selected$);
-    syncDevice("videoinput", devices.videoInput.selected$);
-  }
-
-  /**
-   * Observe changes in the mute states and update the LiveKit room accordingly.
-   * @param scope
-   * @private
-   */
-  private observeMuteStates(scope: ObservableScope): void {
-    this.muteStates.audio.setHandler(async (desired) => {
-      try {
-        await this.livekitRoom.localParticipant.setMicrophoneEnabled(desired);
-      } catch (e) {
-        logger.error("Failed to update LiveKit audio input mute state", e);
-      }
-      return this.livekitRoom.localParticipant.isMicrophoneEnabled;
-    });
-    this.muteStates.video.setHandler(async (desired) => {
-      try {
-        await this.livekitRoom.localParticipant.setCameraEnabled(desired);
-      } catch (e) {
-        logger.error("Failed to update LiveKit video input mute state", e);
-      }
-      return this.livekitRoom.localParticipant.isCameraEnabled;
-    });
-  }
-
-  private observeTrackProcessors(
-    scope: ObservableScope,
-    room: LivekitRoom,
-    trackerProcessorState$: Behavior<ProcessorState>,
-  ): void {
-    const track$ = scope.behavior(
-      observeTrackReference$(room.localParticipant, Track.Source.Camera).pipe(
-        map((trackRef) => {
-          const track = trackRef?.publication?.track;
-          return track instanceof LocalVideoTrack ? track : null;
-        }),
-      ),
-    );
-    trackProcessorSync(track$, trackerProcessorState$);
-  }
-}
-
-// Generate the initial LiveKit RoomOptions based on the current media devices and processor state.
-function generateRoomOption(
-  devices: MediaDevices,
-  processorState: ProcessorState,
-  controlledAudioDevices: boolean,
-  e2eeLivekitOptions: E2EEOptions | undefined,
-): RoomOptions {
-  return {
-    ...defaultLiveKitOptions,
-    videoCaptureDefaults: {
-      ...defaultLiveKitOptions.videoCaptureDefaults,
-      deviceId: devices.videoInput.selected$.value?.id,
-      processor: processorState.processor,
-    },
-    audioCaptureDefaults: {
-      ...defaultLiveKitOptions.audioCaptureDefaults,
-      deviceId: devices.audioInput.selected$.value?.id,
-    },
-    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: e2eeLivekitOptions,
-  };
-}

src/state/ScreenShare.ts

@@ -1,56 +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 { of, type Observable } from "rxjs";
-import {
-  type LocalParticipant,
-  type RemoteParticipant,
-  type Room as LivekitRoom,
-} from "livekit-client";
-
-import { ObservableScope } from "./ObservableScope.ts";
-import { ScreenShareViewModel } from "./MediaViewModel.ts";
-import type { RoomMember } from "matrix-js-sdk";
-import type { EncryptionSystem } from "../e2ee/sharedKeyManagement.ts";
-import type { Behavior } from "./Behavior.ts";
-
-/**
- * A screen share media item to be presented in a tile. This is a thin wrapper
- * around ScreenShareViewModel which essentially just establishes an
- * ObservableScope for behaviors that the view model depends on.
- */
-export class ScreenShare {
-  private readonly scope = new ObservableScope();
-  public readonly vm: ScreenShareViewModel;
-
-  public constructor(
-    id: string,
-    member: RoomMember,
-    participant: LocalParticipant | RemoteParticipant,
-    encryptionSystem: EncryptionSystem,
-    livekitRoom: LivekitRoom,
-    focusUrl: string,
-    pretendToBeDisconnected$: Behavior<boolean>,
-    displayName$: Observable<string>,
-  ) {
-    this.vm = new ScreenShareViewModel(
-      id,
-      member,
-      of(participant),
-      encryptionSystem,
-      livekitRoom,
-      focusUrl,
-      pretendToBeDisconnected$,
-      this.scope.behavior(displayName$),
-      participant.isLocal,
-    );
-  }
-
-  public destroy(): void {
-    this.scope.end();
-    this.vm.destroy();
-  }
-}

src/state/SpotlightExpandedLayout.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import {
   type SpotlightExpandedLayout,
   type SpotlightExpandedLayoutMedia,
-} from "./layout-types";
+} from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 /**

src/state/UserMedia.ts

@@ -1,186 +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 {
-  BehaviorSubject,
-  combineLatest,
-  map,
-  type Observable,
-  of,
-  switchMap,
-} from "rxjs";
-import {
-  type LocalParticipant,
-  type Participant,
-  ParticipantEvent,
-  type RemoteParticipant,
-  type Room as LivekitRoom,
-} from "livekit-client";
-import { observeParticipantEvents } from "@livekit/components-core";
-
-import { ObservableScope } from "./ObservableScope.ts";
-import {
-  LocalUserMediaViewModel,
-  RemoteUserMediaViewModel,
-  type UserMediaViewModel,
-} from "./MediaViewModel.ts";
-import type { Behavior } from "./Behavior.ts";
-import type { RoomMember } from "matrix-js-sdk";
-import type { EncryptionSystem } from "../e2ee/sharedKeyManagement.ts";
-import type { MediaDevices } from "./MediaDevices.ts";
-import type { ReactionOption } from "../reactions";
-import { observeSpeaker$ } from "./observeSpeaker.ts";
-
-/**
- * Sorting bins defining the order in which media tiles appear in the layout.
- */
-enum SortingBin {
-  /**
-   * Yourself, when the "always show self" option is on.
-   */
-  SelfAlwaysShown,
-  /**
-   * Participants that are sharing their screen.
-   */
-  Presenters,
-  /**
-   * Participants that have been speaking recently.
-   */
-  Speakers,
-  /**
-   * Participants that have their hand raised.
-   */
-  HandRaised,
-  /**
-   * Participants with video.
-   */
-  Video,
-  /**
-   * Participants not sharing any video.
-   */
-  NoVideo,
-  /**
-   * Yourself, when the "always show self" option is off.
-   */
-  SelfNotAlwaysShown,
-}
-
-/**
- * A user media item to be presented in a tile. This is a thin wrapper around
- * UserMediaViewModel which additionally determines the media item's sorting bin
- * for inclusion in the call layout.
- */
-export class UserMedia {
-  private readonly scope = new ObservableScope();
-  private readonly participant$ = new BehaviorSubject(this.initialParticipant);
-
-  public readonly vm: UserMediaViewModel = this.participant$.value?.isLocal
-    ? new LocalUserMediaViewModel(
-        this.id,
-        this.member,
-        this.participant$ as Behavior<LocalParticipant>,
-        this.encryptionSystem,
-        this.livekitRoom,
-        this.focusURL,
-        this.mediaDevices,
-        this.scope.behavior(this.displayname$),
-        this.scope.behavior(this.handRaised$),
-        this.scope.behavior(this.reaction$),
-      )
-    : new RemoteUserMediaViewModel(
-        this.id,
-        this.member,
-        this.participant$ as Observable<RemoteParticipant | undefined>,
-        this.encryptionSystem,
-        this.livekitRoom,
-        this.focusURL,
-        this.pretendToBeDisconnected$,
-        this.scope.behavior(this.displayname$),
-        this.scope.behavior(this.handRaised$),
-        this.scope.behavior(this.reaction$),
-      );
-
-  private readonly speaker$ = this.scope.behavior(
-    observeSpeaker$(this.vm.speaking$),
-  );
-
-  private readonly presenter$ = this.scope.behavior(
-    this.participant$.pipe(
-      switchMap((p) => (p === undefined ? of(false) : sharingScreen$(p))),
-    ),
-  );
-
-  /**
-   * Which sorting bin the media item should be placed in.
-   */
-  // This is exposed here rather than by UserMediaViewModel because it's only
-  // relevant to the layout algorithms; the MediaView component should be
-  // ignorant of this value.
-  public readonly bin$ = combineLatest(
-    [
-      this.speaker$,
-      this.presenter$,
-      this.vm.videoEnabled$,
-      this.vm.handRaised$,
-      this.vm instanceof LocalUserMediaViewModel
-        ? this.vm.alwaysShow$
-        : of(false),
-    ],
-    (speaker, presenter, video, handRaised, alwaysShow) => {
-      if (this.vm.local)
-        return alwaysShow
-          ? SortingBin.SelfAlwaysShown
-          : SortingBin.SelfNotAlwaysShown;
-      else if (presenter) return SortingBin.Presenters;
-      else if (speaker) return SortingBin.Speakers;
-      else if (handRaised) return SortingBin.HandRaised;
-      else if (video) return SortingBin.Video;
-      else return SortingBin.NoVideo;
-    },
-  );
-
-  public constructor(
-    public readonly id: string,
-    private readonly member: RoomMember,
-    private readonly initialParticipant:
-      | LocalParticipant
-      | RemoteParticipant
-      | undefined,
-    private readonly encryptionSystem: EncryptionSystem,
-    private readonly livekitRoom: LivekitRoom,
-    private readonly focusURL: string,
-    private readonly mediaDevices: MediaDevices,
-    private readonly pretendToBeDisconnected$: Behavior<boolean>,
-    private readonly displayname$: Observable<string>,
-    private readonly handRaised$: Observable<Date | null>,
-    private readonly reaction$: Observable<ReactionOption | null>,
-  ) {}
-
-  public updateParticipant(
-    newParticipant: LocalParticipant | RemoteParticipant | undefined,
-  ): void {
-    if (this.participant$.value !== newParticipant) {
-      // Update the BehaviourSubject in the UserMedia.
-      this.participant$.next(newParticipant);
-    }
-  }
-
-  public destroy(): void {
-    this.scope.end();
-    this.vm.destroy();
-  }
-}
-
-export function sharingScreen$(p: Participant): Observable<boolean> {
-  return observeParticipantEvents(
-    p,
-    ParticipantEvent.TrackPublished,
-    ParticipantEvent.TrackUnpublished,
-    ParticipantEvent.LocalTrackPublished,
-    ParticipantEvent.LocalTrackUnpublished,
-  ).pipe(map((p) => p.isScreenShareEnabled));
-}

src/state/layout-types.ts

@@ -1,108 +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 {
-  type GridTileViewModel,
-  type SpotlightTileViewModel,
-} from "./TileViewModel.ts";
-import {
-  type MediaViewModel,
-  type UserMediaViewModel,
-} from "./MediaViewModel.ts";
-
-export interface GridLayoutMedia {
-  type: "grid";
-  spotlight?: MediaViewModel[];
-  grid: UserMediaViewModel[];
-}
-
-export interface SpotlightLandscapeLayoutMedia {
-  type: "spotlight-landscape";
-  spotlight: MediaViewModel[];
-  grid: UserMediaViewModel[];
-}
-
-export interface SpotlightPortraitLayoutMedia {
-  type: "spotlight-portrait";
-  spotlight: MediaViewModel[];
-  grid: UserMediaViewModel[];
-}
-
-export interface SpotlightExpandedLayoutMedia {
-  type: "spotlight-expanded";
-  spotlight: MediaViewModel[];
-  pip?: UserMediaViewModel;
-}
-
-export interface OneOnOneLayoutMedia {
-  type: "one-on-one";
-  local: UserMediaViewModel;
-  remote: UserMediaViewModel;
-}
-
-export interface PipLayoutMedia {
-  type: "pip";
-  spotlight: MediaViewModel[];
-}
-
-export type LayoutMedia =
-  | GridLayoutMedia
-  | SpotlightLandscapeLayoutMedia
-  | SpotlightPortraitLayoutMedia
-  | SpotlightExpandedLayoutMedia
-  | OneOnOneLayoutMedia
-  | PipLayoutMedia;
-
-export interface GridLayout {
-  type: "grid";
-  spotlight?: SpotlightTileViewModel;
-  grid: GridTileViewModel[];
-  setVisibleTiles: (value: number) => void;
-}
-
-export interface SpotlightLandscapeLayout {
-  type: "spotlight-landscape";
-  spotlight: SpotlightTileViewModel;
-  grid: GridTileViewModel[];
-  setVisibleTiles: (value: number) => void;
-}
-
-export interface SpotlightPortraitLayout {
-  type: "spotlight-portrait";
-  spotlight: SpotlightTileViewModel;
-  grid: GridTileViewModel[];
-  setVisibleTiles: (value: number) => void;
-}
-
-export interface SpotlightExpandedLayout {
-  type: "spotlight-expanded";
-  spotlight: SpotlightTileViewModel;
-  pip?: GridTileViewModel;
-}
-
-export interface OneOnOneLayout {
-  type: "one-on-one";
-  local: GridTileViewModel;
-  remote: GridTileViewModel;
-}
-
-export interface PipLayout {
-  type: "pip";
-  spotlight: SpotlightTileViewModel;
-}
-
-/**
- * A layout defining the media tiles present on screen and their visual
- * arrangement.
- */
-export type Layout =
-  | GridLayout
-  | SpotlightLandscapeLayout
-  | SpotlightPortraitLayout
-  | SpotlightExpandedLayout
-  | OneOnOneLayout
-  | PipLayout;

src/tile/GridTile.tsx

@@ -190,7 +190,6 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       currentReaction={reaction ?? undefined}
       raisedHandOnClick={raisedHandOnClick}
       localParticipant={vm.local}
-      focusUrl={vm.focusURL}
       audioStreamStats={audioStreamStats}
       videoStreamStats={videoStreamStats}
       {...props}

src/tile/MediaView.test.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, it, test, vi } from "vitest";
+import { describe, expect, it, test } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -16,7 +16,6 @@ import {
 import { LocalTrackPublication, Track } from "livekit-client";
 import { TrackInfo } from "@livekit/protocol";
 import { type ComponentProps } from "react";
-import { type RoomMember } from "matrix-js-sdk";
 
 import { MediaView } from "./MediaView";
 import { EncryptionStatus } from "../state/MediaViewModel";
@@ -46,10 +45,7 @@ describe("MediaView", () => {
     mirror: false,
     unencryptedWarning: false,
     video: trackReference,
-    member: vi.mocked<RoomMember>({
-      userId: "@alice:example.com",
-      getMxcAvatarUrl: vi.fn().mockReturnValue(undefined),
-    } as unknown as RoomMember),
+    member: undefined,
     localParticipant: false,
     focusable: true,
   };
@@ -63,9 +59,9 @@ describe("MediaView", () => {
     test("neither video nor avatar are shown", () => {
       render(<MediaView {...baseProps} video={trackReferencePlaceholder} />);
       expect(screen.queryByTestId("video")).toBeNull();
-      expect(
-        screen.queryAllByRole("img", { name: "@alice:example.com" }).length,
-      ).toBe(0);
+      expect(screen.queryAllByRole("img", { name: "some name" }).length).toBe(
+        0,
+      );
     });
   });
 
@@ -74,18 +70,14 @@ describe("MediaView", () => {
       render(
         <MediaView {...baseProps} video={undefined} localParticipant={true} />,
       );
-      expect(
-        screen.getByRole("img", { name: "@alice:example.com" }),
-      ).toBeVisible();
+      expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
       expect(screen.queryAllByText("Waiting for media...").length).toBe(0);
     });
     it("shows avatar and label for remote user", () => {
       render(
         <MediaView {...baseProps} video={undefined} localParticipant={false} />,
       );
-      expect(
-        screen.getByRole("img", { name: "@alice:example.com" }),
-      ).toBeVisible();
+      expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
       expect(screen.getByText("Waiting for media...")).toBeVisible();
     });
   });
@@ -139,9 +131,7 @@ describe("MediaView", () => {
           <MediaView {...baseProps} videoEnabled={false} />
         </TooltipProvider>,
       );
-      expect(
-        screen.getByRole("img", { name: "@alice:example.com" }),
-      ).toBeVisible();
+      expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
       expect(screen.getByTestId("video")).not.toBeVisible();
     });
   });

src/tile/MediaView.tsx

@@ -32,7 +32,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   video: TrackReferenceOrPlaceholder | undefined;
   videoFit: "cover" | "contain";
   mirror: boolean;
-  member: RoomMember;
+  member: RoomMember | undefined;
   videoEnabled: boolean;
   unencryptedWarning: boolean;
   encryptionStatus: EncryptionStatus;
@@ -46,8 +46,6 @@ interface Props extends ComponentProps<typeof animated.div> {
   localParticipant: boolean;
   audioStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   videoStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
-  // The focus url, mainly for debugging purposes
-  focusUrl?: string;
 }
 
 export const MediaView: FC<Props> = ({
@@ -73,7 +71,6 @@ export const MediaView: FC<Props> = ({
   localParticipant,
   audioStreamStats,
   videoStreamStats,
-  focusUrl,
   ...props
 }) => {
   const { t } = useTranslation();
@@ -137,7 +134,6 @@ export const MediaView: FC<Props> = ({
           <RTCConnectionStats
             audio={audioStreamStats}
             video={videoStreamStats}
-            focusUrl={focusUrl}
           />
         )}
         {/* TODO: Bring this back once encryption status is less broken */}

src/tile/SpotlightTile.tsx

@@ -55,7 +55,7 @@ interface SpotlightItemBaseProps {
   targetHeight: number;
   video: TrackReferenceOrPlaceholder | undefined;
   videoEnabled: boolean;
-  member: RoomMember;
+  member: RoomMember | undefined;
   unencryptedWarning: boolean;
   encryptionStatus: EncryptionStatus;
   displayName: string;
@@ -78,7 +78,7 @@ const SpotlightLocalUserMediaItem: FC<SpotlightLocalUserMediaItemProps> = ({
   ...props
 }) => {
   const mirror = useBehavior(vm.mirror$);
-  return <MediaView mirror={mirror} focusUrl={vm.focusURL} {...props} />;
+  return <MediaView mirror={mirror} {...props} />;
 };
 
 SpotlightLocalUserMediaItem.displayName = "SpotlightLocalUserMediaItem";

src/useCallViewKeyboardShortcuts.test.tsx

@@ -23,14 +23,14 @@ import {
 //   The TestComponent just wraps a button around that hook.
 
 interface TestComponentProps {
-  setAudioEnabled?: (enabled: boolean) => void;
+  setMicrophoneMuted?: (muted: boolean) => void;
   onButtonClick?: () => void;
   sendReaction?: () => void;
   toggleHandRaised?: () => void;
 }
 
 const TestComponent: FC<TestComponentProps> = ({
-  setAudioEnabled = (): void => {},
+  setMicrophoneMuted = (): void => {},
   onButtonClick = (): void => {},
   sendReaction = (reaction: ReactionOption): void => {},
   toggleHandRaised = (): void => {},
@@ -40,7 +40,7 @@ const TestComponent: FC<TestComponentProps> = ({
     ref,
     () => {},
     () => {},
-    setAudioEnabled,
+    setMicrophoneMuted,
     sendReaction,
     toggleHandRaised,
   );
@@ -57,13 +57,12 @@ test("spacebar unmutes", async () => {
   render(
     <TestComponent
       onButtonClick={() => (muted = false)}
-      setAudioEnabled={(m) => {
-        muted = !m;
+      setMicrophoneMuted={(m) => {
+        muted = m;
       }}
     />,
   );
 
-  expect(muted).toBe(true);
   await user.keyboard("[Space>]");
   expect(muted).toBe(false);
   await user.keyboard("[/Space]");
@@ -74,15 +73,15 @@ test("spacebar unmutes", async () => {
 test("spacebar prioritizes pressing a button", async () => {
   const user = userEvent.setup();
 
-  const setAudioEnabled = vi.fn();
+  const setMuted = vi.fn();
   const onClick = vi.fn();
   render(
-    <TestComponent setAudioEnabled={setAudioEnabled} onButtonClick={onClick} />,
+    <TestComponent setMicrophoneMuted={setMuted} onButtonClick={onClick} />,
   );
 
   await user.tab(); // Focus the button
   await user.keyboard("[Space]");
-  expect(setAudioEnabled).not.toBeCalled();
+  expect(setMuted).not.toBeCalled();
   expect(onClick).toBeCalled();
 });
 
@@ -130,7 +129,7 @@ test("unmuting happens in place of the default action", async () => {
       tabIndex={0}
       onKeyDown={(e) => defaultPrevented(e.isDefaultPrevented())}
     >
-      <TestComponent setAudioEnabled={() => {}} />
+      <TestComponent setMicrophoneMuted={() => {}} />
     </video>,
   );
 

src/useCallViewKeyboardShortcuts.ts

@@ -29,9 +29,9 @@ const KeyToReactionMap: Record<string, ReactionOption> = Object.fromEntries(
 
 export function useCallViewKeyboardShortcuts(
   focusElement: RefObject<HTMLElement | null>,
-  toggleAudio: (() => void) | null,
-  toggleVideo: (() => void) | null,
-  setAudioEnabled: ((enabled: boolean) => void) | null,
+  toggleMicrophoneMuted: () => void,
+  toggleLocalVideoMuted: () => void,
+  setMicrophoneMuted: (muted: boolean) => void,
   sendReaction: (reaction: ReactionOption) => void,
   toggleHandRaised: () => void,
 ): void {
@@ -52,15 +52,15 @@ export function useCallViewKeyboardShortcuts(
 
         if (event.key === "m") {
           event.preventDefault();
-          toggleAudio?.();
-        } else if (event.key === "v") {
+          toggleMicrophoneMuted();
+        } else if (event.key == "v") {
           event.preventDefault();
-          toggleVideo?.();
+          toggleLocalVideoMuted();
         } else if (event.key === " ") {
           event.preventDefault();
           if (!spacebarHeld.current) {
             spacebarHeld.current = true;
-            setAudioEnabled?.(true);
+            setMicrophoneMuted(false);
           }
         } else if (event.key === "h") {
           event.preventDefault();
@@ -72,9 +72,9 @@ export function useCallViewKeyboardShortcuts(
       },
       [
         focusElement,
-        toggleVideo,
-        toggleAudio,
-        setAudioEnabled,
+        toggleLocalVideoMuted,
+        toggleMicrophoneMuted,
+        setMicrophoneMuted,
         sendReaction,
         toggleHandRaised,
       ],
@@ -95,10 +95,10 @@ export function useCallViewKeyboardShortcuts(
 
         if (event.key === " ") {
           spacebarHeld.current = false;
-          setAudioEnabled?.(false);
+          setMicrophoneMuted(true);
         }
       },
-      [focusElement, setAudioEnabled],
+      [focusElement, setMicrophoneMuted],
     ),
   );
 
@@ -108,8 +108,8 @@ export function useCallViewKeyboardShortcuts(
     useCallback(() => {
       if (spacebarHeld.current) {
         spacebarHeld.current = false;
-        setAudioEnabled?.(true);
+        setMicrophoneMuted(true);
       }
-    }, [setAudioEnabled, spacebarHeld]),
+    }, [setMicrophoneMuted, spacebarHeld]),
   );
 }

src/useMatrixRTCSessionJoinState.ts

@@ -0,0 +1,40 @@
+/*
+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 { logger } from "matrix-js-sdk/lib/logger";
+import {
+  type MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/lib/matrixrtc";
+import { TypedEventEmitter } from "matrix-js-sdk";
+import { useCallback, useEffect } from "react";
+
+import { useTypedEventEmitterState } from "./useEvents";
+
+const dummySession = new TypedEventEmitter();
+
+export function useMatrixRTCSessionJoinState(
+  rtcSession: MatrixRTCSession | undefined,
+): boolean {
+  // React doesn't allow you to run a hook conditionally, so we have to plug in
+  // a dummy event emitter in case there is no rtcSession yet
+  const isJoined = useTypedEventEmitterState(
+    rtcSession ?? dummySession,
+    MatrixRTCSessionEvent.JoinStateChanged,
+    useCallback(() => rtcSession?.isJoined() ?? false, [rtcSession]),
+  );
+
+  useEffect(() => {
+    logger.info(
+      `Session in room ${rtcSession?.room.roomId} changed to ${
+        isJoined ? "joined" : "left"
+      }`,
+    );
+  }, [rtcSession, isJoined]);
+
+  return isJoined;
+}

src/utils/displayname.ts

@@ -65,7 +65,7 @@ export function shouldDisambiguate(
   // displayname, after hidden character removal.
   return (
     memberships
-      .map((m) => m.userId && room.getMember(m.userId))
+      .map((m) => m.sender && room.getMember(m.sender))
       // NOTE: We *should* have a room member for everyone.
       .filter((m) => !!m)
       .filter((m) => m.userId !== userId)

src/utils/errors.ts

@@ -11,7 +11,7 @@ export enum ErrorCode {
   /**
    * Configuration problem due to no MatrixRTC backend/SFU is exposed via .well-known and no fallback configured.
    */
-  MISSING_MATRIX_RTC_TRANSPORT = "MISSING_MATRIX_RTC_TRANSPORT",
+  MISSING_MATRIX_RTC_FOCUS = "MISSING_MATRIX_RTC_FOCUS",
   CONNECTION_LOST_ERROR = "CONNECTION_LOST_ERROR",
   /** LiveKit indicates that the server has hit its track limits */
   INSUFFICIENT_CAPACITY_ERROR = "INSUFFICIENT_CAPACITY_ERROR",
@@ -54,18 +54,18 @@ export class ElementCallError extends Error {
   }
 }
 
-export class MatrixRTCTransportMissingError extends ElementCallError {
+export class MatrixRTCFocusMissingError extends ElementCallError {
   public domain: string;
 
   public constructor(domain: string) {
     super(
       t("error.call_is_not_supported"),
-      ErrorCode.MISSING_MATRIX_RTC_TRANSPORT,
+      ErrorCode.MISSING_MATRIX_RTC_FOCUS,
       ErrorCategory.CONFIGURATION_ISSUE,
-      t("error.matrix_rtc_transport_missing", {
+      t("error.matrix_rtc_focus_missing", {
         domain,
         brand: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
-        errorCode: ErrorCode.MISSING_MATRIX_RTC_TRANSPORT,
+        errorCode: ErrorCode.MISSING_MATRIX_RTC_FOCUS,
       }),
     );
     this.domain = domain;

src/utils/test-fixtures.ts

@@ -9,6 +9,7 @@ import {
   mockRtcMembership,
   mockMatrixRoomMember,
   mockRemoteParticipant,
+  mockLocalParticipant,
 } from "./test";
 
 export const localRtcMember = mockRtcMembership("@carol:example.org", "1111");
@@ -17,7 +18,7 @@ export const localRtcMemberDevice2 = mockRtcMembership(
   "2222",
 );
 export const local = mockMatrixRoomMember(localRtcMember);
-// export const localParticipant = mockLocalParticipant({ identity: "" });
+export const localParticipant = mockLocalParticipant({ identity: "" });
 export const localId = `${local.userId}:${localRtcMember.deviceId}`;
 
 export const aliceRtcMember = mockRtcMembership("@alice:example.org", "AAAA");

src/utils/test-viewmodel.ts

@@ -5,7 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { ConnectionState } from "livekit-client";
+import {
+  type CallMembership,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, of } from "rxjs";
 import { vitest } from "vitest";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
@@ -23,12 +27,17 @@ import {
   type CallViewModelOptions,
 } from "../state/CallViewModel";
 import {
+  mockLivekitRoom,
   mockMatrixRoom,
   mockMediaDevices,
-  mockMuteStates,
   MockRTCSession,
 } from "./test";
-import { aliceRtcMember, localRtcMember } from "./test-fixtures";
+import {
+  aliceRtcMember,
+  aliceParticipant,
+  localParticipant,
+  localRtcMember,
+} from "./test-fixtures";
 import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 
 export function getBasicRTCSession(
@@ -49,7 +58,7 @@ export function getBasicRTCSession(
       getChildEventsForEvent: vitest.fn(),
     } as Partial<RelationsContainer> as RelationsContainer,
     client: {
-      getUserId: () => localRtcMember.userId,
+      getUserId: () => localRtcMember.sender,
       getDeviceId: () => localRtcMember.deviceId,
       getSyncState: () => SyncState.Syncing,
       sendEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
@@ -96,12 +105,12 @@ export function getBasicRTCSession(
     initialRtcMemberships,
   );
 
-  const fakeRtcSession = new MockRTCSession(matrixRoom).withMemberships(
+  const rtcSession = new MockRTCSession(matrixRoom).withMemberships(
     rtcMemberships$,
   );
 
   return {
-    rtcSession: fakeRtcSession,
+    rtcSession,
     matrixRoom,
     rtcMemberships$,
   };
@@ -131,20 +140,23 @@ export function getBasicCallViewModelEnvironment(
   const handRaisedSubject$ = new BehaviorSubject({});
   const reactionsSubject$ = new BehaviorSubject({});
 
-  // const remoteParticipants$ = of([aliceParticipant]);
-
+  const remoteParticipants$ = of([aliceParticipant]);
+  const livekitRoom = mockLivekitRoom(
+    { localParticipant },
+    { remoteParticipants$ },
+  );
   const vm = new CallViewModel(
-    rtcSession.asMockedSession(),
+    rtcSession as unknown as MatrixRTCSession,
     matrixRoom,
+    livekitRoom,
     mockMediaDevices({}),
-    mockMuteStates(),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
       ...callViewModelOptions,
     },
+    of(ConnectionState.Connected),
     handRaisedSubject$,
     reactionsSubject$,
-    of({ processor: undefined, supported: false }),
   );
   return {
     vm,

src/utils/test.ts

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 import { map, type Observable, of, type SchedulerLike } from "rxjs";
 import { type RunHelpers, TestScheduler } from "rxjs/testing";
-import { expect, type MockedObject, vi, vitest } from "vitest";
+import { expect, vi, vitest } from "vitest";
 import {
   type RoomMember,
   type Room as MatrixRoom,
@@ -16,20 +16,17 @@ import {
 } from "matrix-js-sdk";
 import {
   CallMembership,
-  type Transport,
+  type Focus,
   MatrixRTCSessionEvent,
   type MatrixRTCSessionEventHandlerMap,
   MembershipManagerEvent,
   type SessionMembershipData,
   Status,
-  type LivekitFocusSelection,
-  type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MembershipManagerEventHandlerMap } from "matrix-js-sdk/lib/matrixrtc/IMembershipManager";
 import {
   type LocalParticipant,
   type LocalTrackPublication,
-  type Participant,
   type RemoteParticipant,
   type RemoteTrackPublication,
   type Room as LivekitRoom,
@@ -56,7 +53,6 @@ import { Config } from "../config/Config";
 import { type MediaDevices } from "../state/MediaDevices";
 import { type Behavior, constant } from "../state/Behavior";
 import { ObservableScope } from "../state/ObservableScope";
-import { MuteStates } from "../state/MuteStates";
 
 export function withFakeTimers(continuation: () => void): void {
   vi.useFakeTimers();
@@ -175,11 +171,8 @@ export function mockRtcMembership(
   user: string | RoomMember,
   deviceId: string,
   callId = "",
-  fociPreferred: Transport[] = [],
-  focusActive: LivekitFocusSelection = {
-    type: "livekit",
-    focus_selection: "oldest_membership",
-  },
+  fociPreferred: Focus[] = [],
+  focusActive: Focus = { type: "oldest_membership" },
   membership: Partial<SessionMembershipData> = {},
 ): CallMembership {
   const data: SessionMembershipData = {
@@ -193,12 +186,8 @@ export function mockRtcMembership(
   const event = new MatrixEvent({
     sender: typeof user === "string" ? user : user.userId,
     event_id: `$-ev-${randomUUID()}:example.org`,
-    content: data,
   });
-
-  const cms = new CallMembership(event, data);
-  vi.mocked(cms).getTransport = vi.fn().mockReturnValue(fociPreferred[0]);
-  return cms;
+  return new CallMembership(event, data);
 }
 
 // Maybe it'd be good to move this to matrix-js-sdk? Our testing needs are
@@ -210,11 +199,7 @@ export function mockMatrixRoomMember(
 ): RoomMember {
   return {
     ...mockEmitter(),
-    userId: rtcMembership.userId,
-    getMxcAvatarUrl(): string | undefined {
-      return undefined;
-    },
-    rawDisplayName: rtcMembership.userId,
+    userId: rtcMembership.sender,
     ...member,
   } as RoomMember;
 }
@@ -274,7 +259,6 @@ export async function withLocalMedia(
       kind: E2eeType.PER_PARTICIPANT,
     },
     mockLivekitRoom({ localParticipant }),
-    "https://rtc-example.org",
     mediaDevices,
     constant(roomMember.rawDisplayName ?? "nodisplayname"),
     constant(null),
@@ -315,7 +299,6 @@ export async function withRemoteMedia(
       kind: E2eeType.PER_PARTICIPANT,
     },
     mockLivekitRoom({}, { remoteParticipants$: of([remoteParticipant]) }),
-    "https://rtc-example.org",
     constant(false),
     constant(roomMember.rawDisplayName ?? "nodisplayname"),
     constant(null),
@@ -343,19 +326,6 @@ export class MockRTCSession extends TypedEventEmitter<
     RoomAndToDeviceEventsHandlerMap &
     MembershipManagerEventHandlerMap
 > {
-  public asMockedSession(): MockedObject<MatrixRTCSession> {
-    const session = this as unknown as MockedObject<MatrixRTCSession>;
-
-    vi.mocked(session).reemitEncryptionKeys = vi
-      .fn<() => void>()
-      .mockReturnValue(undefined);
-    vi.mocked(session).getOldestMembership = vi
-      .fn<() => CallMembership | undefined>()
-      .mockReturnValue(this.memberships[0]);
-
-    return session;
-  }
-
   public readonly statistics = {
     counters: {},
   };
@@ -414,17 +384,15 @@ export class MockRTCSession extends TypedEventEmitter<
   }
 }
 
-export const mockTrack = (
-  participant: Participant,
-  kind?: Track.Kind,
-  source?: Track.Source,
-): TrackReference =>
+export const mockTrack = (identity: string): TrackReference =>
   ({
-    participant,
+    participant: {
+      identity,
+    },
     publication: {
-      kind: kind ?? Track.Kind.Audio,
-      source: source ?? Track.Source.Microphone,
-      trackSid: `123##${participant.identity}`,
+      kind: Track.Kind.Audio,
+      source: "mic",
+      trackSid: "123",
       track: {
         attach: vi.fn(),
         detach: vi.fn(),
@@ -451,10 +419,3 @@ export function mockMediaDevices(data: Partial<MediaDevices>): MediaDevices {
     ...data,
   } as MediaDevices;
 }
-
-export function mockMuteStates(
-  joined$: Observable<boolean> = of(true),
-): MuteStates {
-  const observableScope = new ObservableScope();
-  return new MuteStates(observableScope, mockMediaDevices({}), joined$);
-}

vite-embedded.config.ts

@@ -26,9 +26,12 @@ export default defineConfig((env) =>
             output: "./config.json",
             data: {
               matrix_rtc_session: {
-                wait_for_key_rotation_ms: 5000,
+                delayed_leave_event_delay_ms: 90000,
+                delayed_leave_event_restart_local_timeout_ms: 10000,
                 delayed_leave_event_restart_ms: 4000,
-                delayed_leave_event_delay_ms: 18000,
+                membership_event_expiry_ms: 7200000,
+                network_error_retry_ms: 100,
+                wait_for_key_rotation_ms: 5000,
               },
             },
           },

vite.config.ts

@@ -97,9 +97,6 @@ export default ({
         cert: fs.readFileSync("./backend/dev_tls_m.localhost.crt"),
       },
     },
-    worker: {
-      format: "es",
-    },
     build: {
       minify: mode === "production" ? true : false,
       sourcemap: true,

yarn.lock

@@ -2772,12 +2772,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@livekit/protocol@npm:1.39.3, @livekit/protocol@npm:^1.38.0":
-  version: 1.39.3
-  resolution: "@livekit/protocol@npm:1.39.3"
+"@livekit/protocol@npm:1.42.2, @livekit/protocol@npm:^1.42.2":
+  version: 1.42.2
+  resolution: "@livekit/protocol@npm:1.42.2"
   dependencies:
     "@bufbuild/protobuf": "npm:^1.10.0"
-  checksum: 10c0/192ce7283db4505232aa487e71d08670783a1045a8935926f95ff4b9d3d310db706c2ad4af2ebdb0bd735c2e9042c1ee3b1f62e44a9d01bd41fd58cf8dc272b9
+  checksum: 10c0/73e77e0975d4d8ca0baa23ad03cb9ac3a844e8d89e9cefbd17343131a774c7aeb4d190fd0397152fcf5a396d921af3eb83e83e660a4aa12215d9ac4e52bf037a
   languageName: node
   linkType: hard
 
@@ -3371,14 +3371,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.52.0":
-  version: 1.54.1
-  resolution: "@playwright/test@npm:1.54.1"
+"@playwright/test@npm:^1.56.1":
+  version: 1.56.1
+  resolution: "@playwright/test@npm:1.56.1"
   dependencies:
-    playwright: "npm:1.54.1"
+    playwright: "npm:1.56.1"
   bin:
     playwright: cli.js
-  checksum: 10c0/1b414356bc1049927d7b9efc14d5b3bf000ef6483313926bb795b4f27fe3707e8e0acf0db59063a452bb4f7e34559758d17640401b6f3e2f5290f299a8d8d02f
+  checksum: 10c0/2b5b0e1f2e6a18f6e5ce6897c7440ca78f64e0b004834e9808e93ad2b78b96366b562ae4366602669cf8ad793a43d85481b58541e74be71e905e732d833dd691
   languageName: node
   linkType: hard
 
@@ -5176,13 +5176,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/glob-to-regexp@npm:^0.4.4":
-  version: 0.4.4
-  resolution: "@types/glob-to-regexp@npm:0.4.4"
-  checksum: 10c0/7288ff853850d8302a8770a3698b187fc3970ad12ee6427f0b3758a3e7a0ebb0bd993abc6ebaaa979d09695b4194157d2bfaa7601b0fb9ed72c688b4c1298b88
-  languageName: node
-  linkType: hard
-
 "@types/grecaptcha@npm:^3.0.9":
   version: 3.0.9
   resolution: "@types/grecaptcha@npm:3.0.9"
@@ -7480,7 +7473,7 @@ __metadata:
     "@formatjs/intl-segmenter": "npm:^11.7.3"
     "@livekit/components-core": "npm:^0.12.0"
     "@livekit/components-react": "npm:^2.0.0"
-    "@livekit/protocol": "npm:^1.38.0"
+    "@livekit/protocol": "npm:^1.42.2"
     "@livekit/track-processors": "npm:^0.5.5"
     "@mediapipe/tasks-vision": "npm:^0.10.18"
     "@opentelemetry/api": "npm:^1.4.0"
@@ -7490,7 +7483,7 @@ __metadata:
     "@opentelemetry/sdk-trace-base": "npm:^2.0.0"
     "@opentelemetry/sdk-trace-web": "npm:^2.0.0"
     "@opentelemetry/semantic-conventions": "npm:^1.25.1"
-    "@playwright/test": "npm:^1.52.0"
+    "@playwright/test": "npm:^1.56.1"
     "@radix-ui/react-dialog": "npm:^1.0.4"
     "@radix-ui/react-slider": "npm:^1.1.2"
     "@radix-ui/react-visually-hidden": "npm:^1.0.3"
@@ -7535,14 +7528,13 @@ __metadata:
     eslint-plugin-react-hooks: "npm:^5.0.0"
     eslint-plugin-rxjs: "npm:^5.0.3"
     eslint-plugin-unicorn: "npm:^56.0.0"
-    fetch-mock: "npm:11.1.5"
     global-jsdom: "npm:^26.0.0"
     i18next: "npm:^24.0.0"
     i18next-browser-languagedetector: "npm:^8.0.0"
     i18next-parser: "npm:^9.1.0"
     jsdom: "npm:^26.0.0"
     knip: "npm:^5.27.2"
-    livekit-client: "npm:^2.13.0"
+    livekit-client: "npm:^2.15.13"
     lodash-es: "npm:^4.17.21"
     loglevel: "npm:^1.9.1"
     matrix-js-sdk: "github:matrix-org/matrix-js-sdk#head=develop"
@@ -8503,22 +8495,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fetch-mock@npm:11.1.5":
-  version: 11.1.5
-  resolution: "fetch-mock@npm:11.1.5"
-  dependencies:
-    "@types/glob-to-regexp": "npm:^0.4.4"
-    dequal: "npm:^2.0.3"
-    glob-to-regexp: "npm:^0.4.1"
-    is-subset: "npm:^0.1.1"
-    regexparam: "npm:^3.0.0"
-  peerDependenciesMeta:
-    node-fetch:
-      optional: true
-  checksum: 10c0/f32f1d7879b654a3fab7c3576901193ddd4c63cb9aeae2ed66ff42062400c0937d4696b1a5171e739d5f62470e6554e190f14816789f5e3b2bf1ad90208222e6
-  languageName: node
-  linkType: hard
-
 "fflate@npm:^0.4.8":
   version: 0.4.8
   resolution: "fflate@npm:0.4.8"
@@ -8900,13 +8876,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-to-regexp@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "glob-to-regexp@npm:0.4.1"
-  checksum: 10c0/0486925072d7a916f052842772b61c3e86247f0a80cc0deb9b5a3e8a1a9faad5b04fb6f58986a09f34d3e96cd2a22a24b7e9882fb1cf904c31e9a310de96c429
-  languageName: node
-  linkType: hard
-
 "glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7, glob@npm:^10.4.1":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
@@ -9642,13 +9611,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-subset@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "is-subset@npm:0.1.1"
-  checksum: 10c0/d8125598ab9077a76684e18726fb915f5cea7a7358ed0c6ff723f4484d71a0a9981ee5aae06c44de99cfdef0fefce37438c6257ab129e53c82045ea0c2acdebf
-  languageName: node
-  linkType: hard
-
 "is-symbol@npm:^1.0.4, is-symbol@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-symbol@npm:1.1.1"
@@ -9828,6 +9790,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jose@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "jose@npm:6.1.0"
+  checksum: 10c0/f4518579e907317e144facd15c7627acd06097bbea17735097437217498aa419564c039dd4020f6af5f2d024a7cee6b7be4648ccbbdc238aedb80a47c061217d
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -10102,13 +10071,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"livekit-client@npm:^2.13.0":
-  version: 2.15.7
-  resolution: "livekit-client@npm:2.15.7"
+"livekit-client@npm:^2.15.13":
+  version: 2.15.13
+  resolution: "livekit-client@npm:2.15.13"
   dependencies:
     "@livekit/mutex": "npm:1.1.1"
-    "@livekit/protocol": "npm:1.39.3"
+    "@livekit/protocol": "npm:1.42.2"
     events: "npm:^3.3.0"
+    jose: "npm:^6.1.0"
     loglevel: "npm:^1.9.2"
     sdp-transform: "npm:^2.15.0"
     ts-debounce: "npm:^4.0.0"
@@ -10117,7 +10087,7 @@ __metadata:
     webrtc-adapter: "npm:^9.0.1"
   peerDependencies:
     "@types/dom-mediacapture-record": ^1
-  checksum: 10c0/17ea084565a4fef31038af4ce1aa6951125dc80b78d6d320789d67bfc544d95b6b661032848221758c9ece6dab6ab0e867da683759f11b0bc65a1d94ab27d185
+  checksum: 10c0/5a061df9000461a6d40ef8aa1e72e8aedc640181cc57fe6f2c48c5c7f90ce96a735b125aede377fc43f4692a685e098f17eeae0f42c5b2fed473305867bf2789
   languageName: node
   linkType: hard
 
@@ -10336,8 +10306,8 @@ __metadata:
   linkType: hard
 
 "matrix-js-sdk@github:matrix-org/matrix-js-sdk#head=develop":
-  version: 38.4.0
-  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=fd949fe486038099ee111a72b57ce711e85bc352"
+  version: 38.3.0
+  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=41d70d0b5d3f0eba92686f8089cb329d875b26b5"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm": "npm:^15.3.0"
@@ -10353,7 +10323,7 @@ __metadata:
     sdp-transform: "npm:^2.14.1"
     unhomoglyph: "npm:^1.0.6"
     uuid: "npm:13"
-  checksum: 10c0/d334811074726482b58089fef6c9e98a462fbc1d91c63798307648bdc1349d2e154aa31f391690e2c9cd90eee61a3be9fe8872873e7f828b529d9268d2a25b78
+  checksum: 10c0/b48528fec573f3e14d1297f360a56d52d7f313da0d4cf82ab51e4c29798b86995b8a6bd72409779746e7bcf02949bc2788bffa9aba276bfb1a76dbcbe89900a0
   languageName: node
   linkType: hard
 
@@ -11160,27 +11130,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.54.1":
-  version: 1.54.1
-  resolution: "playwright-core@npm:1.54.1"
+"playwright-core@npm:1.56.1":
+  version: 1.56.1
+  resolution: "playwright-core@npm:1.56.1"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/b821262b024d7753b1bfa71eb2bc99f2dda12a869d175b2e1bc6ac2764bd661baf36d9d42f45caf622854ad7e4a6077b9b57014c74bb5a78fe339c9edf1c9019
+  checksum: 10c0/ffd40142b99c68678b387445d5b42f1fee4ab0b65d983058c37f342e5629f9cdbdac0506ea80a0dfd41a8f9f13345bad54e9a8c35826ef66dc765f4eb3db8da7
   languageName: node
   linkType: hard
 
-"playwright@npm:1.54.1":
-  version: 1.54.1
-  resolution: "playwright@npm:1.54.1"
+"playwright@npm:1.56.1":
+  version: 1.56.1
+  resolution: "playwright@npm:1.56.1"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.54.1"
+    playwright-core: "npm:1.56.1"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/c5fedae31a03a1f4c4846569aef3ffb98da23000a4d255abfc8c2ede15b43cc7cd87b80f6fa078666c030373de8103787cf77ef7653ae9458aabbbd4320c2599
+  checksum: 10c0/8e9965aede86df0f4722063385748498977b219630a40a10d1b82b8bd8d4d4e9b6b65ecbfa024331a30800163161aca292fb6dd7446c531a1ad25f4155625ab4
   languageName: node
   linkType: hard
 
@@ -12081,13 +12051,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexparam@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "regexparam@npm:3.0.0"
-  checksum: 10c0/a6430d7b97d5a7d5518f37a850b6b73aab479029d02f46af4fa0e8e4a1d7aad05b7a0d2d10c86ded21a14d5f0fa4c68525f873a5fca2efeefcccd93c36627459
-  languageName: node
-  linkType: hard
-
 "regexpu-core@npm:^6.2.0":
   version: 6.2.0
   resolution: "regexpu-core@npm:6.2.0"