Update dependency @vector-im/compound-design-tokens to v1.6.1 (#2487)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/build.yaml

@@ -1,34 +1,25 @@
 name: Build
 on:
-  pull_request: {}
+  pull_request:
+    types:
+      - synchronize
+      - opened
+      - labeled
+    paths-ignore:
+      - ".github/**"
+      - "docs/**"
   push:
     branches: [livekit, full-mesh]
+    paths-ignore:
+      - ".github/**"
+      - "docs/**"
 jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-      - name: Yarn cache
-        uses: actions/setup-node@v4
-        with:
-          cache: "yarn"
-      - name: Install dependencies
-        run: "yarn install"
-      - name: Build
-        run: "yarn run build"
-        env:
-          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-          SENTRY_URL: ${{ secrets.SENTRY_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          VITE_APP_VERSION: ${{ github.sha }}
-          NODE_OPTIONS: "--max-old-space-size=4096"
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: build
-          path: dist
-          # We'll only use this in a triggered job, then we're done with it
-          retention-days: 1
+  build_element_call:
+    uses: ./.github/workflows/element-call.yaml
+    with:
+      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+    secrets:
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_URL: ${{ secrets.SENTRY_URL }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/docker.yaml

@@ -0,0 +1,60 @@
+name: Docker - Deploy
+on:
+  workflow_call:
+    inputs:
+      docker_tags:
+        required: true
+        type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build_and_deploy:
+    name: Build & publish docker
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # required to upload release asset
+      packages: write
+    steps:
+      - name: Check it out
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+
+      - name: 📥 Download artifact
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ inputs.artifact_run_id }}
+          name: build-output
+          path: dist
+
+      - name: Log in to container registry
+        uses: docker/login-action@0d4c9c5ea7693da7b068278f7b52bda2a190a446 # v3.2.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@8e5442c4ef9f78752691e2d8f8d19755c6f78e81 # v5.5.1
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: ${{ inputs.docker_tags}}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@1a162644f9a7e87d8f4b053101d1d9a712edc18c # v6.3.0
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/e2e.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out test private repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
         with:
           repository: element-hq/static-call-participant
           ref: refs/heads/main

.github/workflows/element-call.yaml

@@ -0,0 +1,46 @@
+name: Element Call - Build
+on:
+  workflow_call:
+    inputs:
+      vite_app_version:
+        required: true
+        type: string
+    secrets:
+      SENTRY_ORG:
+        required: true
+      SENTRY_PROJECT:
+        required: true
+      SENTRY_URL:
+        required: true
+      SENTRY_AUTH_TOKEN:
+        required: true
+
+jobs:
+  build:
+    name: Build Element Call
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - name: Yarn cache
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
+        with:
+          cache: "yarn"
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Build
+        run: "yarn run build"
+        env:
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          SENTRY_URL: ${{ secrets.SENTRY_URL }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
+          NODE_OPTIONS: "--max-old-space-size=4096"
+      - name: Upload Artifact
+        uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4
+        with:
+          name: build-output
+          path: dist
+          # We'll only use this in a triggered job, then we're done with it
+          retention-days: 1

.github/workflows/lint.yaml

@@ -7,9 +7,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
       - name: Yarn cache
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
         with:
           cache: "yarn"
       - name: Install dependencies

.github/workflows/netlify.yaml

@@ -1,45 +1,56 @@
-name: Netlify PR Preview
+name: Netlify - Deploy
 on:
-  workflow_run:
-    workflows: ["Build"]
-    types:
-      - completed
-    branches-ignore:
-      - "main"
-      - "livekit"
+  workflow_call:
+    inputs:
+      pr_number:
+        required: true
+        type: string
+      pr_head_full_name:
+        required: true
+        type: string
+      pr_head_ref:
+        required: true
+        type: string
+      deployment_ref:
+        required: true
+        type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
+    secrets:
+      ELEMENT_BOT_TOKEN:
+        required: true
+      NETLIFY_AUTH_TOKEN:
+        required: true
+      NETLIFY_SITE_ID:
+        required: true
+
 jobs:
   deploy:
-    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request'
     runs-on: ubuntu-latest
     permissions:
       deployments: write
     environment: Netlify
     steps:
       - name: 📝 Create Deployment
-        uses: bobheadxi/deployments@v1
+        uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
         id: deployment
         with:
           step: start
           token: ${{ secrets.GITHUB_TOKEN }}
           env: Netlify
-          ref: ${{ github.event.workflow_run.head_sha }}
+          ref: ${{ inputs.deployment_ref }}
           desc: |
             Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
             Exercise caution. Use test accounts.
 
-      - id: prdetails
-        uses: matrix-org/pr-details-action@v1.3
-        with:
-          owner: ${{ github.event.workflow_run.head_repository.owner.login }}
-          branch: ${{ github.event.workflow_run.head_branch }}
-
-      # There's a 'download artifact' action, but it hasn't been updated for the workflow_run action
-      # (https://github.com/actions/download-artifact/issues/60) so instead we get this mess:
       - name: 📥 Download artifact
-        uses: dawidd6/action-download-artifact@v3
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4
         with:
-          run_id: ${{ github.event.workflow_run.id }}
-          name: build
+          github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+          run-id: ${{ inputs.artifact_run_id }}
+          name: build-output
           path: webapp
 
       - name: Add redirects file
@@ -47,27 +58,22 @@ jobs:
         run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects
 
       - name: Add config file
-        env:
-          HEADBRACH: ${{ github.event.workflow_run.head_branch }}
-        run: curl -s "https://raw.githubusercontent.com/element-hq/element-call/${HEADBRACH}/config/element_io_preview.json" > webapp/config.json
+        run: curl -s "https://raw.githubusercontent.com/${{ inputs.pr_head_full_name }}/${{ inputs.pr_head_ref }}/config/element_io_preview.json" > webapp/config.json
 
       - name: ☁️ Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v2.1
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"
-          # These don't work because we're in workflow_run
-          enable-pull-request-comment: false
-          enable-commit-comment: false
-          alias: pr${{ steps.prdetails.outputs.pr_id }}
+          alias: pr${{ inputs.pr_number }}
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
         timeout-minutes: 1
 
       - name: 🚦 Update deployment status
-        uses: bobheadxi/deployments@v1
+        uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
         if: always()
         with:
           step: finish

.github/workflows/pr-deploy.yaml

@@ -0,0 +1,50 @@
+name: PR Preview Deployments
+on:
+  workflow_run:
+    workflows: ["Build"]
+    types:
+      - completed
+
+jobs:
+  prdetails:
+    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
+    runs-on: ubuntu-latest
+    outputs:
+      pr_number: ${{ steps.prdetails.outputs.pr_id }}
+      pr_data_json: ${{ steps.prdetails.outputs.data }}
+    steps:
+      - id: prdetails
+        uses: matrix-org/pr-details-action@15bde5285d7850ba276cc3bd8a03733e3f24622a # v1.3
+        continue-on-error: true
+        with:
+          owner: ${{ github.event.workflow_run.head_repository.owner.login }}
+          branch: ${{ github.event.workflow_run.head_branch }}
+
+  netlify:
+    needs: prdetails
+    permissions:
+      deployments: write
+    uses: ./.github/workflows/netlify.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      pr_number: ${{ needs.prdetails.outputs.pr_number }}
+      pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
+      pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
+      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+
+  docker:
+    if: ${{ needs.prdetails.outputs.pr_data_json && contains(fromJSON(needs.prdetails.outputs.pr_data_json).labels.*.name, 'docker build') }}
+    needs: prdetails
+    permissions:
+      contents: write
+      packages: write
+    uses: ./.github/workflows/docker.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      docker_tags: |
+        type=sha,format=short,event=branch
+        type=raw,value=pr_${{ needs.prdetails.outputs.pr_number }}

.github/workflows/publish.yaml

@@ -3,17 +3,34 @@ name: Build & publish images to the package registry for tags
 on:
   release:
     types: [published]
-  push:
+  workflow_run:
+    workflows: ["Build"]
     branches: [livekit]
+    types:
+      - completed
 
 env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}
 
 jobs:
-  build:
-    name: Build & publish
+  build_element_call:
+    if: ${{ github.event_name == 'release' }}
+    uses: ./.github/workflows/element-call.yaml
+    with:
+      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+    secrets:
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_URL: ${{ secrets.SENTRY_URL }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+  publish_tarball:
+    needs: build_element_call
+    if: always()
+    name: Publish tarball
     runs-on: ubuntu-latest
+    outputs:
+      unix_time: ${{steps.current-time.outputs.unix_time}}
     permissions:
       contents: write # required to upload release asset
       packages: write
@@ -21,64 +38,35 @@ jobs:
       - name: Get current time
         id: current-time
         run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
-
-      - name: Check it out
-        uses: actions/checkout@v4
-
-      - name: Log in to container registry
-        uses: docker/login-action@3d58c274f17dffee475a5520cbe67f0a882c4dbb
+      - name: 📥 Download artifact
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4
         with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Yarn cache
-        uses: actions/setup-node@v4
-        with:
-          cache: "yarn"
-      - name: Install dependencies
-        run: "yarn install"
-      - name: Build
-        run: "yarn run build"
-        env:
-          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-          SENTRY_URL: ${{ secrets.SENTRY_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          VITE_APP_VERSION: ${{ github.event.release.tag_name || github.sha }}
-
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id || github.run_id }}
+          name: build-output
+          path: dist
       - name: Create Tarball
         env:
           TARBALL_VERSION: ${{ github.event.release.tag_name || github.sha }}
         run: |
           tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
-
       - name: Upload
-        uses: actions/upload-artifact@1eb3cb2b3e0f29609092a73eb033bb759a334595
+        uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
           path: "./element-call-*.tar.gz"
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@dbef88086f6cef02e264edb7dbf63250c17cef6c
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=sha,format=short,event=branch
-            type=semver,pattern=v{{version}}
-            type=raw,value=latest-ci,enable={{is_default_branch}}
-            type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@edfb0fe6204400c56fbfd3feba3fe9ad1adfa345
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@9f6f8c940b91232557f8699b21341a08624a8dce
-        with:
-          context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+  publish_docker:
+    needs: publish_tarball
+    if: always()
+    permissions:
+      contents: write
+      packages: write
+    uses: ./.github/workflows/docker.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      docker_tags: |
+        type=sha,format=short,event=branch
+        type=semver,pattern=v{{version}}
+        type=raw,value=latest-ci,enable={{is_default_branch}}
+        type=raw,value=latest-ci_${{needs.publish_tarball.outputs.unix_time}},enable={{is_default_branch}}

.github/workflows/test.yaml

@@ -1,24 +1,24 @@
-name: Run jest tests
+name: Run unit tests
 on:
   pull_request: {}
   push:
     branches: [livekit, full-mesh]
 jobs:
-  jest:
-    name: Run jest tests
+  vitest:
+    name: Run vitest tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
       - name: Yarn cache
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
         with:
           cache: "yarn"
       - name: Install dependencies
         run: "yarn install"
-      - name: Jest
+      - name: Vitest
         run: "yarn run test"
       - name: Upload to codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4
         with:
           flags: unittests

.github/workflows/translations-download.yaml

@@ -13,9 +13,9 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
         with:
           cache: "yarn"
 
@@ -26,7 +26,7 @@ jobs:
         run: "rm -R public/locales"
 
       - name: Download translation files
-        uses: localazy/download@v1.1.0
+        uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
         with:
           groups: "-p includeSourceLang:true"
 
@@ -38,7 +38,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@v5.0.2
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

.github/workflows/translations-upload.yaml

@@ -3,6 +3,8 @@ on:
   push:
     branches:
       - livekit
+    paths-ignore:
+      - ".github/**"
 
 jobs:
   upload:
@@ -12,9 +14,9 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
 
       - name: Upload
-        uses: localazy/upload@v1
+        uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1
         with:
           write_key: ${{ secrets.LOCALAZY_WRITE_KEY }}

README.md

@@ -54,6 +54,38 @@ Therefore, to use a self-hosted homeserver, this is recommended to be a new serv
 
 There are currently two different config files. `.env` holds variables that are used at build time, while `public/config.json` holds variables that are used at runtime. Documentation and default values for `public/config.json` can be found in [ConfigOptions.ts](src/config/ConfigOptions.ts).
 
+If you're using [Synapse](https://github.com/element-hq/synapse/), you'll need to additionally add the following to `homeserver.yaml` or Element Call won't work:
+
+```
+experimental_features:
+    msc3266_enabled: true
+```
+
+MSC3266 allows to request a room summary of rooms you are not joined.
+The summary contains the room join rules. We need that to decide if the user gets prompted with the option to knock ("ask to join"), a cannot join error or the join view.
+
+Element Call requires a Livekit SFU behind a Livekit jwt service to work. The url to the Livekit jwt service can either be configured in the config of Element Call (fallback/legacy configuration) or be configured by your homeserver via the `.well-known`.
+This is the recommended method.
+
+The configuration is a list of Foci configs:
+
+```json
+"org.matrix.msc4143.rtc_foci": [
+    {
+        "type": "livekit",
+        "livekit_service_url": "https://someurl.com"
+    },
+     {
+        "type": "livekit",
+        "livekit_service_url": "https://livekit2.com"
+    },
+    {
+        "type": "another_foci",
+        "props_for_another_foci": "val"
+    },
+]
+```
+
 ## Translation
 
 If you'd like to help translate Element Call, head over to [Localazy](https://localazy.com/p/element-call). You're also encouraged to join the [Element Translators](https://matrix.to/#/#translators:element.io) space to discuss and coordinate translation efforts.
@@ -93,11 +125,13 @@ service for development. 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._**
 
-To use it, add SFU parameter in your local config `./public/config.json`:
+To use it, add a SFU parameter in your local config `./public/config.json`:
+(Be aware, that this is only the fallback Livekit SFU. If the homeserver
+advertises one in the client well-known, this will not be used.)
 
 ```json
 "livekit": {
-  "livekit_service_url": "http://localhost:8881"
+  "livekit_service_url": "http://localhost:7881"
 },
 ```
 

backend/livekit.yaml

@@ -1,5 +1,4 @@
 port: 7880
-environment: dev
 bind_addresses:
   - "0.0.0.0"
 rtc:
@@ -22,5 +21,3 @@ turn:
   external_tls: true
 keys:
   devkey: secret
-signal_relay:
-  enabled: true

config/config.sample.json

@@ -5,5 +5,8 @@
       "server_name": "call.ems.host"
     }
   },
+  "livekit": {
+    "livekit_service_url": "http://localhost:7881"
+  },
   "eula": "https://static.element.io/legal/online-EULA.pdf"
 }

config/httpd.conf

@@ -0,0 +1,30 @@
+<VirtualHost *:8080>
+    ServerName localhost
+
+    DocumentRoot "/app"
+
+    <Location "/">
+        # disable cache entriely by default (apart from Etag which is accurate enough)
+        Header add Cache-Control "private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"
+        CacheDisable on
+        ExpiresActive off
+
+        # also turn off last-modified since they are just the timestamps of the file in the docker image
+        # and may or may not bear any resemblance to when the resource changed
+        Header add Last-Modified ""
+
+        DirectoryIndex index.html
+    </Location>
+
+    # assets can be cached because they have hashed filenames
+    <Location "/assets">
+        ExpiresActive on
+        ExpiresDefault "access plus 1 week"
+        Header add Cache-Control "public, no-transform"
+    </Location>
+
+    <Location "/apple-app-site-association">
+        ForceType application/json
+    </Location>
+</VirtualHost>
+

docs/url-params.md

@@ -1,57 +1,76 @@
-## Url Format and parameters
+# Url Format and parameters
 
 There are two formats for Element Call urls.
 
 - **Current Format**
-  ```
+
+  ```text
   https://element_call.domain/room/#
   /<room_name_alias>?roomId=!id:domain&password=1234&<other params see below>
   ```
-  The url is split into two sections. The `https://element_call.domain/room/#` contains the app and the intend that the link brings you into a specific room (`https://call.element.io/#` would be the homepage). The fragment is used for query parameters to make sure they never get sent to the element_call.domain server. Here we have the actual matrix roomId and the password which are used to connect all participants with e2ee. This allows that `<room_name_alias>` does not need to be unique. Multiple meetings with the label weekly-sync can be created without collisions.
+
+  The url is split into two sections. The `https://element_call.domain/room/#`
+  contains the app and the intend that the link brings you into a specific room
+  (`https://call.element.io/#` would be the homepage). The fragment is used for
+  query parameters to make sure they never get sent to the element_call.domain
+  server. Here we have the actual matrix roomId and the password which are used
+  to connect all participants with e2ee. This allows that `<room_name_alias>` does
+  not need to be unique. Multiple meetings with the label weekly-sync can be created
+  without collisions.
+
 - **deprecated**
-  ```
+
+  ```text
   https://element_call.domain/<room_name>
   ```
-  With this format the livekit alias that will be used is the `<room_name>`. All ppl connecting to this url will end up in the same unencrypted room. This does not scale, is super unsecure (ppl could end up in the same room by accident) and it also is not really possible to support encryption.
+
+  With this format the livekit alias that will be used is the `<room_name>`.
+  All ppl connecting to this url will end up in the same unencrypted room.
+  This does not scale, is super unsecure
+  (ppl could end up in the same room by accident) and it also is not really
+  possible to support encryption.
   The url parameters are spit into two categories: **general** and **widget related**.
 
-### Widget related params
+## Widget related params
 
 **widgetId**
-The id used by the widget. The presence of this parameter inplis that elemetn call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`
+The id used by the widget. The presence of this parameter implies that element
+call will not connect to a homeserver directly and instead tries to establish
+postMessage communication via the `parentUrl`.
 
-```
+```ts
 widgetId: string | null;
 ```
 
 **parentUrl**
-The url used to send widget action postMessages. This should be the domain of the client
-or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a
-dedicated webview we send the postMessages same webview the widget lives in. Filtering is
-done in the widget so it ignores the messages it receives from itself)
+The url used to send widget action postMessages. This should be the domain of
+the client or the webview the widget is hosted in. (in case the widget is not
+in an Iframe but in a dedicated webview we send the postMessages same webview
+the widget lives in. Filtering is done in the widget so it ignores the messages
+it receives from itself)
 
-```
+```ts
 parentUrl: string | null;
 ```
 
 **userId**
 The user's ID (only used in matryoshka mode).
 
-```
+```ts
 userId: string | null;
 ```
 
 **deviceId**
 The device's ID (only used in matryoshka mode).
 
-```
+```ts
 deviceId: string | null;
 ```
 
 **baseUrl**
 The base URL of the homeserver to use for media lookups in matryoshka mode.
 
-```
+```ts
 baseUrl: string | null;
 ```
 
@@ -64,14 +83,14 @@ roomId is an exception as we need the room ID in embedded (matroyska) mode, and
 the room alias (or even the via params because we are not trying to join it). This
 is also not validated, where it is in useRoomIdentifier().
 
-```
+```ts
 roomId: string | null;
 ```
 
 **confineToRoom**
 Whether the app should keep the user confined to the current call/room.
 
-```
+```ts
 confineToRoom: boolean; (default: false)
 ```
 
@@ -79,7 +98,7 @@ confineToRoom: boolean; (default: false)
 Whether upon entering a room, the user should be prompted to launch the
 native mobile app. (Affects only Android and iOS.)
 
-```
+```ts
 appPrompt: boolean; (default: true)
 ```
 
@@ -87,28 +106,29 @@ appPrompt: boolean; (default: true)
 Whether the app should pause before joining the call until it sees an
 io.element.join widget action, allowing it to be preloaded.
 
-```
+```ts
 preload: boolean; (default: false)
 ```
 
 **hideHeader**
 Whether to hide the room header when in a call.
 
-```
+```ts
 hideHeader: boolean; (default: false)
 ```
 
 **showControls**
-Whether to show the buttons to mute, screen-share, invite, hangup are shown when in a call.
+Whether to show the buttons to mute, screen-share, invite, hangup are shown
+when in a call.
 
-```
+```ts
 showControls: boolean; (default: true)
 ```
 
 **hideScreensharing**
 Whether to hide the screen-sharing button.
 
-```
+```ts
 hideScreensharing: boolean; (default: false)
 ```
 
@@ -116,7 +136,7 @@ hideScreensharing: boolean; (default: false)
 Whether to use end-to-end encryption. This is a legacy flag for the full mesh branch.
 It is not used on the livekit branch and has no impact there!
 
-```
+```ts
 enableE2EE: boolean; (default: true)
 ```
 
@@ -124,28 +144,29 @@ enableE2EE: boolean; (default: true)
 Whether to use per participant encryption.
 Keys will be exchanged over encrypted matrix room messages.
 
-```
+```ts
 perParticipantE2EE: boolean; (default: false)
 ```
 
 **password**
-E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)
+E2EE password when using a shared secret.
+(For individual sender keys in embedded mode this is not required.)
 
-```
+```ts
 password: string | null;
 ```
 
 **displayName**
 The display name to use for auto-registration.
 
-```
+```ts
 displayName: string | null;
 ```
 
 **lang**
 The BCP 47 code of the language the app should use.
 
-```
+```ts
 lang: string | null;
 ```
 
@@ -153,7 +174,7 @@ lang: string | null;
 The font/fonts which the interface should use.
 There can be multiple font url parameters: `?font=font-one&font=font-two...`
 
-```
+```ts
 font: string;
 font: string;
 ...
@@ -162,14 +183,15 @@ font: string;
 **fontScale**
 The factor by which to scale the interface's font size.
 
-```
+```ts
 fontScale: number | null;
 ```
 
 **analyticsID**
-The Posthog analytics ID. It is only available if the user has given consent for sharing telemetry in element web.
+The Posthog analytics ID. It is only available if the user has given consent for
+sharing telemetry in element web.
 
-```
+```ts
 analyticsID: string | null;
 ```
 
@@ -177,7 +199,7 @@ analyticsID: string | null;
 Whether the app is allowed to use fallback STUN servers for ICE in case the
 user's homeserver doesn't provide any.
 
-```
+```ts
 allowIceFallback: boolean; (default: false)
 ```
 
@@ -186,6 +208,45 @@ Setting this flag skips the lobby and brings you in the call directly.
 In the widget this can be combined with preload to pass the device settings
 with the join widget action.
 
-```
+```ts
 skipLobby: boolean; (default: false)
 ```
+
+**returnToLobby**
+Setting this flag makes element call show the lobby in widget mode after leaving
+a call.
+This is useful for video rooms.
+If set to false, the widget will show a blank page after leaving the call.
+
+```ts
+returnToLobby: boolean; (default: false)
+```
+
+**theme**
+The theme to use for element call.
+can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+If not set element call will use the dark theme.
+
+```ts
+theme: string | null;
+```
+
+**viaServers**
+This defines the homeserver that is going to be used when joining a room.
+It has to be set to a non default value for links to rooms
+that are not on the default homeserver,
+that is in use for the current user.
+
+```ts
+viaServers: string; (default: undefined)
+```
+
+**homeserver**
+This defines the homeserver that is going to be used when registering
+a new (guest) user.
+This can be user to configure a non default guest user server when
+creating a spa link.
+
+```ts
+homeserver: string; (default: undefined)
+```

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "element-call",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
@@ -13,20 +14,21 @@
     "lint:types": "tsc",
     "i18n": "node_modules/i18next-parser/bin/cli.js",
     "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
-    "test": "jest",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "backend": "docker-compose -f backend-docker-compose.yml up"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-core": "^0.8.0",
-    "@livekit/components-react": "^1.1.0",
+    "@livekit/components-core": "^0.10.0",
+    "@livekit/components-react": "^2.0.0",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/context-zone": "^1.9.1",
     "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.47.0",
-    "@opentelemetry/instrumentation-document-load": "^0.34.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.34.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
+    "@opentelemetry/instrumentation-document-load": "^0.39.0",
+    "@opentelemetry/instrumentation-user-interaction": "^0.39.0",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
@@ -45,23 +47,23 @@
     "@react-stately/select": "^3.1.3",
     "@react-stately/tooltip": "^3.0.5",
     "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^7.0.0",
+    "@sentry/react": "^8.0.0",
     "@sentry/tracing": "^7.0.0",
     "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^0.1.0",
-    "@vector-im/compound-web": "^2.0.0",
+    "@vector-im/compound-design-tokens": "^1.0.0",
+    "@vector-im/compound-web": "^3.0.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "events": "^3.3.0",
     "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^7.0.0",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.0.0",
-    "livekit-client": "^1.12.3",
+    "livekit-client": "^2.0.2",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#2cd63ca4b90eb2e4d22b45ae281a81c4514e757a",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#238eea0ef5c82d0a11b8d5cc5c04104d6c94c4c1",
     "matrix-widget-api": "^1.3.1",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
@@ -69,16 +71,16 @@
     "posthog-js": "^1.29.0",
     "react": "18",
     "react-dom": "18",
-    "react-i18next": "^14.0.0",
+    "react-i18next": "^15.0.0",
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
     "sdp-transform": "^2.14.1",
-    "tinyqueue": "^2.0.3",
+    "tinyqueue": "^3.0.0",
     "unique-names-generator": "^4.6.0",
-    "uuid": "9",
-    "vaul": "^0.8.0"
+    "uuid": "10",
+    "vaul": "^0.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -88,21 +90,21 @@
     "@react-spring/rafz": "^9.7.3",
     "@react-types/dialog": "^3.5.5",
     "@sentry/vite-plugin": "^2.0.0",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/dompurify": "^3.0.2",
     "@types/grecaptcha": "^3.0.4",
-    "@types/jest": "^29.5.5",
     "@types/node": "^20.0.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
     "@types/sdp-transform": "^2.4.5",
-    "@types/uuid": "9",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@types/uuid": "10",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "eslint": "^8.14.0",
@@ -114,39 +116,16 @@
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unicorn": "^50.0.0",
-    "i18next-parser": "^8.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.2.2",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-mock": "^29.5.0",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "i18next-parser": "^9.0.0",
+    "jsdom": "^24.0.0",
     "prettier": "^3.0.0",
     "sass": "^1.42.1",
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
     "vite": "^5.0.0",
     "vite-plugin-html-template": "^1.1.0",
-    "vite-plugin-svgr": "^4.0.0"
-  },
-  "jest": {
-    "testEnvironment": "./test/environment.ts",
-    "testMatch": [
-      "<rootDir>/test/**/*-test.[jt]s?(x)"
-    ],
-    "transformIgnorePatterns": [
-      "/node_modules/(?!d3)+$",
-      "/node_modules/(?!internmap)+$"
-    ],
-    "moduleNameMapper": {
-      "\\.css$": "identity-obj-proxy",
-      "\\.svg\\?react$": "<rootDir>/test/mocks/svgr.ts",
-      "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
-      "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
-    },
-    "collectCoverage": true,
-    "coverageReporters": [
-      "text",
-      "cobertura"
-    ]
+    "vite-plugin-svgr": "^4.0.0",
+    "vitest": "^2.0.0"
   }
 }

public/index.html

@@ -13,7 +13,8 @@
     </script>
   </head>
 
-  <body class="cpd-theme-dark">
+  <!-- The default class is: .no-theme {display: none}. It will be overwritten once the app is loaded. -->
+  <body class="no-theme">
     <div id="root"></div>
   </body>
 </html>

public/locales/bg/app.json

@@ -31,8 +31,6 @@
     "username": "Потребителско име",
     "video": "Видео"
   },
-  "exit_fullscreen_button_label": "Излез от цял екран",
-  "fullscreen_button_label": "Цял екран",
   "join_existing_call_modal": {
     "join_button": "Да, присъедини се",
     "text": "Този разговор вече съществува, искате ли да се присъедините?",
@@ -42,7 +40,6 @@
   "lobby": {
     "join_button": "Влез в разговора"
   },
-  "local_volume_label": "Локална сила на звука",
   "logging_in": "Влизане…",
   "login_auth_links": "<0>Създайте акаунт</0> или <2>Влезте като гост</2>",
   "login_title": "Влез",

public/locales/cs/app.json

@@ -29,10 +29,8 @@
     "settings": "Nastavení",
     "username": "Uživatelské jméno"
   },
-  "exit_fullscreen_button_label": "Ukončit režim celé obrazovky",
   "full_screen_view_description": "<0>Odeslání ladících záznamů nám pomůže diagnostikovat problém.</0>",
   "full_screen_view_h1": "<0>Oops, něco se pokazilo.</0>",
-  "fullscreen_button_label": "Zvětšit na celou obrazovku",
   "header_label": "Domov Element Call",
   "join_existing_call_modal": {
     "join_button": "Ano, připojit se",
@@ -43,7 +41,6 @@
   "lobby": {
     "join_button": "Připojit se k hovoru"
   },
-  "local_volume_label": "Lokální hlasitost",
   "logging_in": "Přihlašování se…",
   "login_auth_links": "<0>Vytvořit účet</0> Or <2>Jako host</2>",
   "login_title": "Přihlášení",

public/locales/de/app.json

@@ -56,10 +56,8 @@
     "video": "Video"
   },
   "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
-  "exit_fullscreen_button_label": "Vollbildmodus verlassen",
   "full_screen_view_description": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
   "full_screen_view_h1": "<0>Hoppla, etwas ist schiefgelaufen.</0>",
-  "fullscreen_button_label": "Vollbild",
   "group_call_loader_failed_heading": "Anruf nicht gefunden",
   "group_call_loader_failed_text": "Anrufe sind nun Ende-zu-Ende-verschlüsselt und müssen auf der Startseite erstellt werden. Damit stellen wir sicher, dass alle denselben Schlüssel verwenden.",
   "hangup_button_label": "Anruf beenden",
@@ -80,7 +78,6 @@
     "join_button": "Anruf beitreten",
     "leave_button": "Zurück zu kürzlichen Anrufen"
   },
-  "local_volume_label": "Lokale Lautstärke",
   "log_in": "Anmelden",
   "logging_in": "Anmelden …",
   "login_auth_links": "<0>Konto erstellen</0> Oder <2>Als Gast betreten</2>",
@@ -141,7 +138,6 @@
   "unmute_microphone_button_label": "Mikrofon aktivieren",
   "version": "Version: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} präsentiert",
     "sfu_participant_local": "Du"
   },
   "waiting_for_participants": "Warte auf weitere Teilnehmer …"

public/locales/el/app.json

@@ -37,10 +37,8 @@
     "username": "Όνομα χρήστη",
     "video": "Βίντεο"
   },
-  "exit_fullscreen_button_label": "Έξοδος από πλήρη οθόνη",
   "full_screen_view_description": "<0>Η υποβολή αρχείων καταγραφής σφαλμάτων θα μας βοηθήσει να εντοπίσουμε το πρόβλημα.</0>",
   "full_screen_view_h1": "<0>Ωχ, κάτι πήγε στραβά.</0>",
-  "fullscreen_button_label": "Πλήρη οθόνη",
   "header_label": "Element Κεντρική Οθόνη Κλήσεων",
   "join_existing_call_modal": {
     "join_button": "Ναι, συμμετοχή στην κλήση",
@@ -50,7 +48,6 @@
   "lobby": {
     "join_button": "Συμμετοχή στην κλήση"
   },
-  "local_volume_label": "Τοπική ένταση",
   "logging_in": "Σύνδεση…",
   "login_auth_links": "<0>Δημιουργήστε λογαριασμό</0> Ή <2>Συμμετέχετε ως επισκέπτης</2>",
   "login_title": "Σύνδεση",
@@ -94,8 +91,5 @@
   "unauthenticated_view_body": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
   "unauthenticated_view_login_button": "Συνδεθείτε στον λογαριασμό σας",
   "version": "Έκδοση: {{version}}",
-  "video_tile": {
-    "presenter_label": "{{displayName}} παρουσιάζει"
-  },
   "waiting_for_participants": "Αναμονή για άλλους συμμετέχοντες…"
 }

public/locales/en-GB/app.json

@@ -60,8 +60,17 @@
   "disconnected_banner": "Connectivity to the server has been lost.",
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
-  "group_call_loader_failed_heading": "Call not found",
-  "group_call_loader_failed_text": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
+  "group_call_loader": {
+    "banned_body": "You have been banned from the room.",
+    "banned_heading": "Banned",
+    "call_ended_body": "You have been removed from the call.",
+    "call_ended_heading": "Call ended",
+    "failed_heading": "Failed to join",
+    "failed_text": "Call not found or is not accessible.",
+    "knock_reject_body": "The room members declined your request to join.",
+    "knock_reject_heading": "Not allowed to join",
+    "reason": "Reason"
+  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -77,8 +86,10 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
+    "ask_to_join": "Ask to join call",
     "join_button": "Join call",
-    "leave_button": "Back to recents"
+    "leave_button": "Back to recents",
+    "waiting_for_invite": "Request sent"
   },
   "log_in": "Log In",
   "logging_in": "Logging in…",
@@ -143,6 +154,7 @@
   "unmute_microphone_button_label": "Unmute microphone",
   "version": "Version: {{version}}",
   "video_tile": {
+    "change_fit_contain": "Fit to frame",
     "exit_full_screen": "Exit full screen",
     "full_screen": "Full screen",
     "mute_for_me": "Mute for me",

public/locales/es/app.json

@@ -34,10 +34,8 @@
     "settings": "Ajustes",
     "username": "Nombre de usuario"
   },
-  "exit_fullscreen_button_label": "Salir de pantalla completa",
   "full_screen_view_description": "<0>Subir los registros de depuración nos ayudará a encontrar el problema.</0>",
   "full_screen_view_h1": "<0>Ups, algo ha salido mal.</0>",
-  "fullscreen_button_label": "Pantalla completa",
   "header_label": "Inicio de Element Call",
   "join_existing_call_modal": {
     "join_button": "Si, unirse a la llamada",
@@ -48,7 +46,6 @@
   "lobby": {
     "join_button": "Unirse a la llamada"
   },
-  "local_volume_label": "Volumen local",
   "logging_in": "Iniciando sesión…",
   "login_auth_links": "<0>Crear una cuenta</0> o <2>Acceder como invitado</2>",
   "login_title": "Iniciar sesión",
@@ -95,8 +92,5 @@
   "unauthenticated_view_eula_caption": "Al hacer clic en \"Comenzar\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
   "unauthenticated_view_login_button": "Iniciar sesión en tu cuenta",
   "version": "Versión: {{version}}",
-  "video_tile": {
-    "presenter_label": "{{displayName}} está presentando"
-  },
   "waiting_for_participants": "Esperando a los otros participantes…"
 }

public/locales/et/app.json

@@ -52,10 +52,8 @@
     "username": "Kasutajanimi"
   },
   "disconnected_banner": "Võrguühendus serveriga on katkenud.",
-  "exit_fullscreen_button_label": "Välju täisekraanivaatest",
   "full_screen_view_description": "<0>Kui saadad meile vealogid, siis on lihtsam vea põhjust otsida.</0>",
   "full_screen_view_h1": "<0>Ohoo, midagi on nüüd katki.</0>",
-  "fullscreen_button_label": "Täisekraan",
   "group_call_loader_failed_heading": "Kõnet ei leidu",
   "group_call_loader_failed_text": "Kõned on nüüd läbivalt krüptitud ning need pead looma kodulehelt. Sellega tagad, et kõik kasutavad samu krüptovõtmeid.",
   "hangup_button_label": "Lõpeta kõne",
@@ -75,7 +73,6 @@
     "join_button": "Kõnega liitumine",
     "leave_button": "Tagasi hiljutiste kõnede juurde"
   },
-  "local_volume_label": "Kohalik helitugevus",
   "logging_in": "Sisselogimine …",
   "login_auth_links": "<0>Loo konto</0> Või <2>Sisene külalisena</2>",
   "login_title": "Sisselogimine",
@@ -133,7 +130,6 @@
   "unmute_microphone_button_label": "Lülita mikrofon sisse",
   "version": "Versioon: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} on esitlemas",
     "sfu_participant_local": "Sina"
   },
   "waiting_for_participants": "Ootame teiste osalejate lisandumist…"

public/locales/fa/app.json

@@ -32,8 +32,6 @@
     "username": "نام کاربری",
     "video": "ویدیو"
   },
-  "exit_fullscreen_button_label": "خروج از حالت تمام صفحه",
-  "fullscreen_button_label": "تمام صحفه",
   "header_label": "خانهٔ تماس المنت",
   "join_existing_call_modal": {
     "join_button": "بله، به تماس بپیوندید",
@@ -44,7 +42,6 @@
   "lobby": {
     "join_button": "پیوستن به تماس"
   },
-  "local_volume_label": "حجم داخلی",
   "logging_in": "ورود…",
   "login_auth_links": "<0>ساخت حساب کاربری</0> Or <2>دسترسی به عنوان میهمان</2>",
   "login_title": "ورود",

public/locales/fr/app.json

@@ -50,10 +50,8 @@
     "video": "Vidéo"
   },
   "disconnected_banner": "La connexion avec le serveur a été perdue.",
-  "exit_fullscreen_button_label": "Quitter le plein écran",
   "full_screen_view_description": "<0>Soumettre les journaux de débogage nous aidera à déterminer le problème.</0>",
   "full_screen_view_h1": "<0>Oups, quelque chose s’est mal passé.</0>",
-  "fullscreen_button_label": "Plein écran",
   "group_call_loader_failed_heading": "Appel non trouvé",
   "group_call_loader_failed_text": "Les appels sont maintenant chiffrés de bout-en-bout et doivent être créés depuis la page d’accueil. Cela permet d’être sûr que tout le monde utilise la même clé de chiffrement.",
   "hangup_button_label": "Terminer l’appel",
@@ -73,7 +71,6 @@
     "join_button": "Rejoindre l’appel",
     "leave_button": "Revenir à l’historique des appels"
   },
-  "local_volume_label": "Volume local",
   "logging_in": "Connexion…",
   "login_auth_links": "<0>Créer un compte</0> Or <2>Accès invité</2>",
   "login_title": "Connexion",
@@ -131,7 +128,6 @@
   "unmute_microphone_button_label": "Allumer le microphone",
   "version": "Version : {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} est à l’écran",
     "sfu_participant_local": "Vous"
   },
   "waiting_for_participants": "En attente d’autres participants…"

public/locales/id/app.json

@@ -50,10 +50,8 @@
     "username": "Nama pengguna"
   },
   "disconnected_banner": "Koneksi ke server telah hilang.",
-  "exit_fullscreen_button_label": "Keluar dari layar penuh",
   "full_screen_view_description": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
   "full_screen_view_h1": "<0>Aduh, ada yang salah.</0>",
-  "fullscreen_button_label": "Layar penuh",
   "group_call_loader_failed_heading": "Panggilan tidak ditemukan",
   "group_call_loader_failed_text": "Panggilan sekarang terenkripsi secara ujung ke ujung dan harus dibuat dari laman beranda. Ini memastikan bahwa semuanya menggunakan kunci enkripsi yang sama.",
   "hangup_button_label": "Akhiri panggilan",
@@ -74,7 +72,6 @@
     "join_button": "Bergabung ke panggilan",
     "leave_button": "Kembali ke terkini"
   },
-  "local_volume_label": "Volume lokal",
   "logging_in": "Memasuki…",
   "login_auth_links": "<0>Buat akun</0> Atau <2>Akses sebagai tamu</2>",
   "login_title": "Masuk",
@@ -132,7 +129,6 @@
   "unmute_microphone_button_label": "Nyalakan mikrofon",
   "version": "Versi: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} sedang menampilkan",
     "sfu_participant_local": "Anda"
   },
   "waiting_for_participants": "Menunggu peserta lain…"

public/locales/it/app.json

@@ -48,10 +48,8 @@
     "username": "Nome utente"
   },
   "disconnected_banner": "La connessione al server è stata persa.",
-  "exit_fullscreen_button_label": "Esci da schermo intero",
   "full_screen_view_description": "<0>L'invio di registri di debug ci aiuterà ad individuare il problema.</0>",
   "full_screen_view_h1": "<0>Ops, qualcosa è andato storto.</0>",
-  "fullscreen_button_label": "Schermo intero",
   "group_call_loader_failed_heading": "Chiamata non trovata",
   "group_call_loader_failed_text": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia.",
   "hangup_button_label": "Termina chiamata",
@@ -72,7 +70,6 @@
     "join_button": "Entra in chiamata",
     "leave_button": "Torna ai recenti"
   },
-  "local_volume_label": "Volume locale",
   "logging_in": "Accesso…",
   "login_auth_links": "<0>Crea un profilo</0> o <2>Accedi come ospite</2>",
   "login_title": "Accedi",
@@ -129,7 +126,6 @@
   "unmute_microphone_button_label": "Riaccendi il microfono",
   "version": "Versione: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} sta presentando",
     "sfu_participant_local": "Tu"
   },
   "waiting_for_participants": "In attesa di altri partecipanti…"

public/locales/ja/app.json

@@ -30,9 +30,7 @@
     "username": "ユーザー名",
     "video": "ビデオ"
   },
-  "exit_fullscreen_button_label": "全画面表示を終了",
   "full_screen_view_h1": "<0>何かがうまく行きませんでした。</0>",
-  "fullscreen_button_label": "全画面表示",
   "header_label": "Element Call ホーム",
   "join_existing_call_modal": {
     "join_button": "はい、通話に参加",

public/locales/lv/app.json

@@ -40,10 +40,8 @@
     "username": "Lietotājvārds"
   },
   "disconnected_banner": "Ir zaudēts savienojums ar serveri.",
-  "exit_fullscreen_button_label": "Iziet no pilnekrāna",
   "full_screen_view_description": "<0>Atkļūdošanas žurnāla ierakstu iesūtīšana palīdzēs mums atklāt nepilnību.</0>",
   "full_screen_view_h1": "<0>Ak vai, kaut kas nogāja greizi!</0>",
-  "fullscreen_button_label": "Pilnekrāns",
   "header_label": "Element Call sākums",
   "join_existing_call_modal": {
     "join_button": "Jā, pievienoties zvanam",
@@ -54,7 +52,6 @@
   "lobby": {
     "join_button": "Pievienoties zvanam"
   },
-  "local_volume_label": "Vietējais skaļums",
   "logging_in": "Piesakās…",
   "login_auth_links": "<0>Izveidot kontu</0> vai <2>Piekļūt kā viesim</2>",
   "login_title": "Pieteikties",
@@ -103,8 +100,5 @@
   "unauthenticated_view_eula_caption": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
   "unauthenticated_view_login_button": "Pieteikties kontā",
   "version": "Versija: {{version}}",
-  "video_tile": {
-    "presenter_label": "{{displayName}} uzstājas"
-  },
   "waiting_for_participants": "Gaida citus dalībniekus…"
 }

public/locales/pl/app.json

@@ -53,10 +53,8 @@
     "video": "Wideo"
   },
   "disconnected_banner": "Utracono połączenie z serwerem.",
-  "exit_fullscreen_button_label": "Opuść pełny ekran",
   "full_screen_view_description": "<0>Wysłanie dzienników debuggowania pomoże nam ustalić przyczynę problemu.</0>",
   "full_screen_view_h1": "<0>Ojej, coś poszło nie tak.</0>",
-  "fullscreen_button_label": "Pełny ekran",
   "group_call_loader_failed_heading": "Nie znaleziono połączenia",
   "group_call_loader_failed_text": "Połączenia są teraz szyfrowane end-to-end i muszą zostać utworzone ze strony głównej. Pomaga to upewnić się, że każdy korzysta z tego samego klucza szyfrującego.",
   "hangup_button_label": "Zakończ połączenie",
@@ -77,7 +75,6 @@
     "join_button": "Dołącz do połączenia",
     "leave_button": "Wróć do ostatnie"
   },
-  "local_volume_label": "Głośność lokalna",
   "logging_in": "Logowanie…",
   "login_auth_links": "<0>Utwórz konto</0> lub <2>Dołącz jako gość</2>",
   "login_title": "Zaloguj się",
@@ -135,7 +132,6 @@
   "unmute_microphone_button_label": "Odcisz mikrofon",
   "version": "Wersja: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} prezentuje",
     "sfu_participant_local": "Ty"
   },
   "waiting_for_participants": "Oczekiwanie na pozostałych uczestników…"

public/locales/ru/app.json

@@ -38,10 +38,8 @@
     "username": "Имя пользователя",
     "video": "Видео"
   },
-  "exit_fullscreen_button_label": "Выйти из полноэкранного режима",
   "full_screen_view_description": "<0>Отправка журналов поможет нам найти и устранить проблему.</0>",
   "full_screen_view_h1": "<0>Упс, что-то пошло не так.</0>",
-  "fullscreen_button_label": "Полноэкранный режим",
   "header_label": "Главная Element Call",
   "join_existing_call_modal": {
     "join_button": "Да, присоединиться",
@@ -52,7 +50,6 @@
   "lobby": {
     "join_button": "Присоединиться"
   },
-  "local_volume_label": "Местная громкость",
   "logging_in": "Вход…",
   "login_auth_links": "<0>Создать аккаунт</0> или <2>Зайти как гость</2>",
   "login_title": "Вход",
@@ -96,8 +93,5 @@
   "unauthenticated_view_body": "Ещё не зарегистрированы? <2>Создайте аккаунт</2>",
   "unauthenticated_view_login_button": "Войдите в свой аккаунт",
   "version": "Версия: {{version}}",
-  "video_tile": {
-    "presenter_label": "{{displayName}} представляет"
-  },
   "waiting_for_participants": "Ожидание других участников…"
 }

public/locales/sk/app.json

@@ -51,10 +51,8 @@
     "username": "Meno používateľa"
   },
   "disconnected_banner": "Spojenie so serverom sa stratilo.",
-  "exit_fullscreen_button_label": "Ukončiť zobrazenie na celú obrazovku",
   "full_screen_view_description": "<0>Odoslanie záznamov ladenia nám pomôže nájsť problém.</0>",
   "full_screen_view_h1": "<0>Hups, niečo sa pokazilo.</0>",
-  "fullscreen_button_label": "Zobrazenie na celú obrazovku",
   "group_call_loader_failed_heading": "Hovor nebol nájdený",
   "group_call_loader_failed_text": "Hovory sú teraz end-to-end šifrované a je potrebné ich vytvoriť z domovskej stránky. To pomáha zabezpečiť, aby všetci používali rovnaký šifrovací kľúč.",
   "hangup_button_label": "Ukončiť hovor",
@@ -75,7 +73,6 @@
     "join_button": "Pripojiť sa k hovoru",
     "leave_button": "Späť k nedávnym"
   },
-  "local_volume_label": "Lokálna hlasitosť",
   "logging_in": "Prihlasovanie…",
   "login_auth_links": "<0>Vytvoriť konto</0> Alebo <2>Prihlásiť sa ako hosť</2>",
   "login_title": "Prihlásiť sa",
@@ -133,7 +130,6 @@
   "unmute_microphone_button_label": "Zrušiť stlmenie mikrofónu",
   "version": "Verzia: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} prezentuje",
     "sfu_participant_local": "Vy"
   },
   "waiting_for_participants": "Čaká sa na ďalších účastníkov…"

public/locales/sv/app.json

@@ -3,8 +3,5 @@
     "headline": "{{displayName}}, ditt samtal har avslutats."
   },
   "star_rating_input_label_one": "{{count}} stjärna",
-  "star_rating_input_label_other": "{{count}} stjärnor",
-  "video_tile": {
-    "presenter_label": "{{displayName}} presenterar"
-  }
+  "star_rating_input_label_other": "{{count}} stjärnor"
 }

public/locales/tr/app.json

@@ -24,8 +24,6 @@
     "password": "Parola",
     "settings": "Ayarlar"
   },
-  "exit_fullscreen_button_label": "Tam ekranı terk et",
-  "fullscreen_button_label": "Tam ekran",
   "join_existing_call_modal": {
     "text": "Bu arama zaten var, katılmak ister misiniz?",
     "title": "Mevcut aramaya katıl?"
@@ -33,7 +31,6 @@
   "lobby": {
     "join_button": "Aramaya katıl"
   },
-  "local_volume_label": "Yerel ses seviyesi",
   "logging_in": "Giriliyor…",
   "login_auth_links": "<0>Hesap oluştur</0> yahut <2>Konuk olarak gir</2>",
   "login_title": "Gir",

public/locales/uk/app.json

@@ -53,10 +53,8 @@
     "video": "Відео"
   },
   "disconnected_banner": "Втрачено зв'язок з сервером.",
-  "exit_fullscreen_button_label": "Вийти з повноекранного режиму",
   "full_screen_view_description": "<0>Надсилання журналів налагодження допоможе нам виявити проблему.</0>",
   "full_screen_view_h1": "<0>Йой, щось пішло не за планом.</0>",
-  "fullscreen_button_label": "Повноекранний режим",
   "group_call_loader_failed_heading": "Виклик не знайдено",
   "group_call_loader_failed_text": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування.",
   "hangup_button_label": "Завершити виклик",
@@ -77,7 +75,6 @@
     "join_button": "Приєднатися до виклику",
     "leave_button": "Повернутися до недавніх"
   },
-  "local_volume_label": "Локальна гучність",
   "logging_in": "Вхід…",
   "login_auth_links": "<0>Створити обліковий запис</0> або <2>Отримати доступ як гість</2>",
   "login_title": "Увійти",
@@ -135,7 +132,6 @@
   "unmute_microphone_button_label": "Увімкнути мікрофон",
   "version": "Версія: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} представляє",
     "sfu_participant_local": "Ви"
   },
   "waiting_for_participants": "Очікування на інших учасників…"

public/locales/vi/app.json

@@ -29,10 +29,8 @@
     "username": "Tên người dùng",
     "video": "Truyền hình"
   },
-  "exit_fullscreen_button_label": "Rời chế độ toàn màn hình",
   "full_screen_view_description": "<0>Gửi nhật ký gỡ lỗi sẽ giúp chúng tôi theo dõi vấn đề.</0>",
   "full_screen_view_h1": "<0>Ối, có cái gì đó sai.</0>",
-  "fullscreen_button_label": "Toàn màn hình",
   "join_existing_call_modal": {
     "join_button": "Vâng, tham gia cuộc gọi",
     "text": "Cuộc gọi đã tồn tại, bạn có muốn tham gia không?",
@@ -73,8 +71,5 @@
   "unauthenticated_view_body": "Chưa đăng ký? <2>Tạo tài khoản</2>",
   "unauthenticated_view_login_button": "Đăng nhập vào tài khoản của bạn",
   "version": "Phiên bản: {{version}}",
-  "video_tile": {
-    "presenter_label": "{{displayName}} đang trình bày"
-  },
   "waiting_for_participants": "Đang đợi những người khác…"
 }

public/locales/zh-Hans/app.json

@@ -51,10 +51,8 @@
     "video": "视频"
   },
   "disconnected_banner": "与服务器的连接中断。",
-  "exit_fullscreen_button_label": "退出全屏",
   "full_screen_view_description": "<0>提交日志以帮助我们修复问题。</0>",
   "full_screen_view_h1": "<0>哎哟，出问题了。</0>",
-  "fullscreen_button_label": "全屏",
   "group_call_loader_failed_heading": "未找到通话",
   "group_call_loader_failed_text": "现在，通话是端对端加密的，需要从主页创建。这有助于确保每个人都使用相同的加密密钥。",
   "hangup_button_label": "通话结束",
@@ -70,7 +68,6 @@
     "join_button": "加入通话",
     "leave_button": "返回最近通话"
   },
-  "local_volume_label": "本地音量",
   "logging_in": "登录中……",
   "login_auth_links": "<0>创建账户</0> Or <2>以访客身份继续</2>",
   "login_title": "登录",
@@ -128,7 +125,6 @@
   "unmute_microphone_button_label": "取消麦克风静音",
   "version": "版本：{{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}}正在展示",
     "sfu_participant_local": "你"
   },
   "waiting_for_participants": "等待其他参与者……"

public/locales/zh-Hant/app.json

@@ -53,10 +53,8 @@
     "video": "視訊"
   },
   "disconnected_banner": "到伺服器的連線已遺失。",
-  "exit_fullscreen_button_label": "退出全螢幕",
   "full_screen_view_description": "<0>送出除錯紀錄，可幫助我們修正問題。</0>",
   "full_screen_view_h1": "<0>喔喔，有些地方怪怪的。</0>",
-  "fullscreen_button_label": "全螢幕",
   "group_call_loader_failed_heading": "找不到通話",
   "group_call_loader_failed_text": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。",
   "hangup_button_label": "結束通話",
@@ -77,7 +75,6 @@
     "join_button": "加入通話",
     "leave_button": "回到最近的通話"
   },
-  "local_volume_label": "您的音量",
   "logging_in": "登入中…",
   "login_auth_links": "<0>建立帳號</0> 或<2>以訪客身份登入</2>",
   "login_title": "登入",
@@ -135,7 +132,6 @@
   "unmute_microphone_button_label": "將麥克風取消靜音",
   "version": "版本： {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} 正在展示",
     "sfu_participant_local": "您"
   },
   "waiting_for_participants": "等待其他參加者…"

renovate.json

@@ -3,11 +3,45 @@
   "extends": ["config:base"],
   "packageRules": [
     {
-      "description": "Disable renoavte for packages we want to monitor ourselves",
-      "matchPackagePatterns": ["matrix-js-sdk"],
+      "extends": ["group:allNonMajor", "schedule:weekly"]
+    },
+    {
+      "groupName": "GitHub Actions",
+      "matchDepTypes": ["action"],
+      "pinDigests": true,
+      "extends": ["schedule:monthly"]
+    },
+    {
+      "description": "Disable Renovate for packages we want to monitor ourselves",
+      "groupName": "manually updated packages",
+      "matchDepNames": ["matrix-js-sdk"],
       "enabled": false
+    },
+    {
+      "groupName": "matrix-widget-api",
+      "matchDepNames": ["matrix-widget-api"]
+    },
+    {
+      "groupName": "Compound",
+      "matchPackagePrefixes": ["@vector-im/compound-"],
+      "schedule": "before 5am on Tuesday and Friday"
+    },
+    {
+      "groupName": "LiveKit client",
+      "matchDepNames": ["livekit-client"]
+    },
+    {
+      "groupName": "LiveKit components",
+      "matchPackagePrefixes": ["@livekit/components-"]
+    },
+    {
+      "groupName": "Vaul",
+      "matchDepNames": ["vaul"],
+      "extends": ["schedule:monthly"],
+      "prHeader": "Please review modals on mobile for visual regressions."
     }
   ],
+  "semanticCommits": "disabled",
   "ignoreDeps": [
     "@react-aria/button",
     "@react-aria/focus",
@@ -20,6 +54,7 @@
     "@react-stately/collections",
     "@react-stately/select",
     "@react-stately/tooltip",
-    "@react-stately/tree"
+    "@react-stately/tree",
+    "@react-types/dialog"
   ]
 }

src/@types/global.d.ts

@@ -28,12 +28,6 @@ declare global {
     OLM_OPTIONS: Record<string, string>;
   }
 
-  // TypeScript doesn't know about the experimental setSinkId method, so we
-  // declare it ourselves
-  interface MediaElement extends HTMLVideoElement {
-    setSinkId: (id: string) => void;
-  }
-
   interface HTMLElement {
     // Safari only supports this prefixed, so tell the type system about it
     webkitRequestFullscreen: () => void;

src/App.tsx

@@ -35,19 +35,21 @@ import { CrashView, LoadingView } from "./FullScreenView";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
 import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
+import { widget } from "./widget";
+import { useTheme } from "./useTheme";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
-interface BackgroundProviderProps {
+interface SimpleProviderProps {
   children: JSX.Element;
 }
 
-const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
+const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
 
   useEffect(() => {
     let backgroundImage = "";
-    if (!["/login", "/register"].includes(pathname)) {
+    if (!["/login", "/register"].includes(pathname) && !widget) {
       backgroundImage = "var(--background-gradient)";
     }
 
@@ -57,6 +59,10 @@ const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
 
   return <>{children}</>;
 };
+const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
+  useTheme();
+  return children;
+};
 
 interface AppProps {
   history: History;
@@ -64,10 +70,11 @@ interface AppProps {
 
 export const App: FC<AppProps> = ({ history }) => {
   const [loaded, setLoaded] = useState(false);
-
   useEffect(() => {
     Initializer.init()?.then(() => {
+      if (loaded) return;
       setLoaded(true);
+      widget?.api.sendContentLoaded();
     });
   });
 
@@ -78,37 +85,39 @@ export const App: FC<AppProps> = ({ history }) => {
     // @ts-ignore
     <Router history={history}>
       <BackgroundProvider>
-        <TooltipProvider>
-          {loaded ? (
-            <Suspense fallback={null}>
-              <ClientProvider>
-                <MediaDevicesProvider>
-                  <Sentry.ErrorBoundary fallback={errorPage}>
-                    <OverlayProvider>
-                      <DisconnectedBanner />
-                      <Switch>
-                        <SentryRoute exact path="/">
-                          <HomePage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/login">
-                          <LoginPage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/register">
-                          <RegisterPage />
-                        </SentryRoute>
-                        <SentryRoute path="*">
-                          <RoomPage />
-                        </SentryRoute>
-                      </Switch>
-                    </OverlayProvider>
-                  </Sentry.ErrorBoundary>
-                </MediaDevicesProvider>
-              </ClientProvider>
-            </Suspense>
-          ) : (
-            <LoadingView />
-          )}
-        </TooltipProvider>
+        <ThemeProvider>
+          <TooltipProvider>
+            {loaded ? (
+              <Suspense fallback={null}>
+                <ClientProvider>
+                  <MediaDevicesProvider>
+                    <Sentry.ErrorBoundary fallback={errorPage}>
+                      <OverlayProvider>
+                        <DisconnectedBanner />
+                        <Switch>
+                          <SentryRoute exact path="/">
+                            <HomePage />
+                          </SentryRoute>
+                          <SentryRoute exact path="/login">
+                            <LoginPage />
+                          </SentryRoute>
+                          <SentryRoute exact path="/register">
+                            <RegisterPage />
+                          </SentryRoute>
+                          <SentryRoute path="*">
+                            <RoomPage />
+                          </SentryRoute>
+                        </Switch>
+                      </OverlayProvider>
+                    </Sentry.ErrorBoundary>
+                  </MediaDevicesProvider>
+                </ClientProvider>
+              </Suspense>
+            ) : (
+              <LoadingView />
+            )}
+          </TooltipProvider>
+        </ThemeProvider>
       </BackgroundProvider>
     </Router>
   );

src/ClientContext.tsx

@@ -25,7 +25,11 @@ import {
   useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import {
+  ClientEvent,
+  ICreateClientOpts,
+  MatrixClient,
+} from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
@@ -317,7 +321,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       initClientState.client.on(ClientEvent.Sync, onSync);
     }
 
-    return () => {
+    return (): void => {
       if (initClientState.client) {
         initClientState.client.removeListener(ClientEvent.Sync, onSync);
       }
@@ -360,13 +364,13 @@ async function loadClient(): Promise<InitResult | null> {
 
       /* eslint-disable camelcase */
       const { user_id, device_id, access_token, passwordlessUser } = session;
-      const initClientParams = {
+      const initClientParams: ICreateClientOpts = {
         baseUrl: Config.defaultHomeserverUrl()!,
         accessToken: access_token,
         userId: user_id,
         deviceId: device_id,
         fallbackICEServerAllowed: fallbackICEServerAllowed,
-        livekitServiceURL: Config.get().livekit!.livekit_service_url,
+        livekitServiceURL: Config.get().livekit?.livekit_service_url,
       };
 
       try {

src/FullScreenView.tsx

@@ -27,6 +27,7 @@ import styles from "./FullScreenView.module.css";
 import { TranslatedError } from "./TranslatedError";
 import { Config } from "./config/Config";
 import { RageshakeButton } from "./settings/RageshakeButton";
+import { useUrlParams } from "./UrlParams";
 
 interface FullScreenViewProps {
   className?: string;
@@ -37,12 +38,11 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
   className,
   children,
 }) => {
+  const { hideHeader } = useUrlParams();
   return (
     <div className={classNames(styles.page, className)}>
       <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
+        <LeftNav>{!hideHeader && <HeaderLogo />}</LeftNav>
         <RightNav />
       </Header>
       <div className={styles.container}>
@@ -58,6 +58,7 @@ interface ErrorViewProps {
 
 export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
   const location = useLocation();
+  const { confineToRoom } = useUrlParams();
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -78,25 +79,26 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
           : error.message}
       </p>
       <RageshakeButton description={`***Error View***: ${error.message}`} />
-      {location.pathname === "/" ? (
-        <Button
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          onPress={onReload}
-        >
-          {t("return_home_button")}
-        </Button>
-      ) : (
-        <LinkButton
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          to="/"
-        >
-          {t("return_home_button")}
-        </LinkButton>
-      )}
+      {!confineToRoom &&
+        (location.pathname === "/" ? (
+          <Button
+            size="lg"
+            variant="default"
+            className={styles.homeLink}
+            onPress={onReload}
+          >
+            {t("return_home_button")}
+          </Button>
+        ) : (
+          <LinkButton
+            size="lg"
+            variant="default"
+            className={styles.homeLink}
+            to="/"
+          >
+            {t("return_home_button")}
+          </LinkButton>
+        ))}
     </FullScreenView>
   );
 };

src/Header.module.css

@@ -33,6 +33,7 @@ limitations under the License.
 }
 
 .headerLogo {
+  color: var(--cpd-color-text-primary);
   display: none;
   align-items: center;
   text-decoration: none;
@@ -108,6 +109,7 @@ limitations under the License.
 
 .participantsLine {
   grid-area: participants;
+  color: var(--cpd-color-text-secondary);
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1-5x);

src/Header.tsx

@@ -117,7 +117,7 @@ interface RoomHeaderInfoProps {
   name: string;
   avatarUrl: string | null;
   encrypted: boolean;
-  participantCount: number;
+  participantCount: number | null;
 }
 
 export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
@@ -150,7 +150,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
         </Heading>
         <EncryptionLock encrypted={encrypted} />
       </div>
-      {participantCount > 0 && (
+      {(participantCount ?? 0) > 0 && (
         <div className={styles.participantsLine}>
           <UserProfileIcon
             width={20}
@@ -158,7 +158,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
             aria-label={t("header_participants_label")}
           />
           <Text as="span" size="sm" weight="medium">
-            {t("participant_count", { count: participantCount })}
+            {t("participant_count", { count: participantCount ?? 0 })}
           </Text>
         </div>
       )}

src/Toast.tsx

@@ -76,7 +76,7 @@ export const Toast: FC<Props> = ({
   useEffect(() => {
     if (open && autoDismiss !== undefined) {
       const timeout = setTimeout(onDismiss, autoDismiss);
-      return () => clearTimeout(timeout);
+      return (): void => clearTimeout(timeout);
     }
   }, [open, autoDismiss, onDismiss]);
 

src/UrlParams.ts

@@ -16,10 +16,11 @@ limitations under the License.
 
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { Config } from "./config/Config";
-
-export const PASSWORD_STRING = "password=";
+import { EncryptionSystem } from "./e2ee/sharedKeyManagement";
+import { E2eeType } from "./e2ee/e2eeType";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -125,6 +126,29 @@ export interface UrlParams {
    * with the join widget action.
    */
   skipLobby: boolean;
+  /**
+   * Setting this flag makes element call show the lobby after leaving a call.
+   * This is useful for video rooms.
+   */
+  returnToLobby: boolean;
+  /**
+   * The theme to use for element call.
+   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+   */
+  theme: string | null;
+  /** This defines the homeserver that is going to be used when joining a room.
+   * It has to be set to a non default value for links to rooms
+   * that are not on the default homeserver,
+   * that is in use for the current user.
+   */
+  viaServers: string | null;
+  /**
+   * This defines the homeserver that is going to be used when registering
+   * a new (guest) user.
+   * This can be user to configure a non default guest user server when
+   * creating a spa link.
+   */
+  homeserver: string | null;
 }
 
 // This is here as a stopgap, but what would be far nicer is a function that
@@ -223,6 +247,10 @@ export const getUrlParams = (
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
     perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
     skipLobby: parser.getFlagParam("skipLobby"),
+    returnToLobby: parser.getFlagParam("returnToLobby"),
+    theme: parser.getParam("theme"),
+    viaServers: parser.getParam("viaServers"),
+    homeserver: parser.getParam("homeserver"),
   };
 };
 
@@ -301,3 +329,32 @@ export const useRoomIdentifier = (): RoomIdentifier => {
     [pathname, search, hash],
   );
 };
+
+export function generateUrlSearchParams(
+  roomId: string,
+  encryptionSystem: EncryptionSystem,
+  viaServers?: string[],
+): URLSearchParams {
+  const params = new URLSearchParams();
+  // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
+  // it in case it came from another client that generated a non url-safe one
+  switch (encryptionSystem?.kind) {
+    case E2eeType.SHARED_KEY: {
+      const encodedPassword = encodeURIComponent(encryptionSystem.secret);
+      if (encodedPassword !== encryptionSystem.secret) {
+        logger.info(
+          "Encoded call password used non URL-safe chars: buggy client?",
+        );
+      }
+      params.set("password", encodedPassword);
+      break;
+    }
+    case E2eeType.PER_PARTICIPANT:
+      params.set("perParticipantE2EE", "true");
+      break;
+  }
+  params.set("roomId", roomId);
+  viaServers?.forEach((s) => params.set("viaServers", s));
+
+  return params;
+}

src/analytics/PosthogAnalytics.ts

@@ -31,6 +31,7 @@ import {
   UndecryptableToDeviceEventTracker,
   QualitySurveyEventTracker,
   CallDisconnectedEventTracker,
+  CallConnectDurationTracker,
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
@@ -444,4 +445,5 @@ export class PosthogAnalytics {
   public eventUndecryptableToDevice = new UndecryptableToDeviceEventTracker();
   public eventQualitySurvey = new QualitySurveyEventTracker();
   public eventCallDisconnected = new CallDisconnectedEventTracker();
+  public eventCallConnectDuration = new CallConnectDurationTracker();
 }

src/analytics/PosthogEvents.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { DisconnectReason } from "livekit-client";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import {
   IPosthogEvent,
@@ -201,3 +202,38 @@ export class CallDisconnectedEventTracker {
     });
   }
 }
+
+interface CallConnectDuration extends IPosthogEvent {
+  eventName: "CallConnectDuration";
+  totalDuration: number;
+  websocketDuration: number;
+  peerConnectionDuration: number;
+}
+
+export class CallConnectDurationTracker {
+  private connectStart = 0;
+  private websocketConnected = 0;
+  public cacheConnectStart(): void {
+    this.connectStart = Date.now();
+  }
+  public cacheWsConnect(): void {
+    this.websocketConnected = Date.now();
+  }
+
+  public track(options = { log: false }): void {
+    const now = Date.now();
+    const totalDuration = now - this.connectStart;
+    const websocketDuration = this.websocketConnected - this.connectStart;
+    const peerConnectionDuration = now - this.websocketConnected;
+    PosthogAnalytics.instance.trackEvent<CallConnectDuration>({
+      eventName: "CallConnectDuration",
+      totalDuration,
+      websocketDuration,
+      peerConnectionDuration,
+    });
+    if (options.log)
+      logger.log(
+        `Time to connect:\ntotal: ${totalDuration}ms\npeerConnection: ${websocketDuration}ms\nwebsocket: ${peerConnectionDuration}ms`,
+      );
+  }
+}

src/auth/LoginPage.tsx

@@ -82,7 +82,12 @@ export const LoginPage: FC = () => {
     },
     [login, location, history, homeserver, setClient],
   );
-
+  // we need to limit the length of the homserver name to not cover the whole loginview input with the string.
+  let shortendHomeserverName = Config.defaultServerName()?.slice(0, 25);
+  shortendHomeserverName =
+    shortendHomeserverName?.length !== Config.defaultServerName()?.length
+      ? shortendHomeserverName + "..."
+      : shortendHomeserverName;
   return (
     <>
       <div className={styles.container}>
@@ -102,7 +107,7 @@ export const LoginPage: FC = () => {
                   autoCorrect="off"
                   autoCapitalize="none"
                   prefix="@"
-                  suffix={`:${Config.defaultServerName()}`}
+                  suffix={`:${shortendHomeserverName}`}
                   data-testid="login_username"
                 />
               </FieldRow>

src/auth/useInteractiveLogin.ts

@@ -16,7 +16,11 @@ limitations under the License.
 
 import { useCallback } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
-import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  LoginResponse,
+  MatrixClient,
+} from "matrix-js-sdk/src/matrix";
 
 import { initClient } from "../matrix-utils";
 import { Session } from "../ClientContext";
@@ -37,7 +41,7 @@ export function useInteractiveLogin(): (
 
     const interactiveAuth = new InteractiveAuth({
       matrixClient: authClient,
-      doRequest: () =>
+      doRequest: (): Promise<LoginResponse> =>
         authClient.login("m.login.password", {
           identifier: {
             type: "m.id.user",

src/auth/useInteractiveRegistration.ts

@@ -16,11 +16,16 @@ limitations under the License.
 
 import { useState, useEffect, useCallback, useRef } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
-import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  MatrixClient,
+  RegisterResponse,
+} from "matrix-js-sdk/src/matrix";
 
 import { initClient } from "../matrix-utils";
 import { Session } from "../ClientContext";
 import { Config } from "../config/Config";
+import { widget } from "../widget";
 
 export const useInteractiveRegistration = (): {
   privacyPolicyUrl?: string;
@@ -48,6 +53,8 @@ export const useInteractiveRegistration = (): {
   }
 
   useEffect(() => {
+    if (widget) return;
+    // An empty registerRequest is used to get the privacy policy and recaptcha key.
     authClient.current!.registerRequest({}).catch((error) => {
       setPrivacyPolicyUrl(
         error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url,
@@ -66,7 +73,7 @@ export const useInteractiveRegistration = (): {
     ): Promise<[MatrixClient, Session]> => {
       const interactiveAuth = new InteractiveAuth({
         matrixClient: authClient.current!,
-        doRequest: (auth) =>
+        doRequest: (auth): Promise<RegisterResponse> =>
           authClient.current!.registerRequest({
             username,
             password,

src/auth/useRegisterPasswordlessUser.ts

@@ -21,6 +21,7 @@ import { useClient } from "../ClientContext";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { generateRandomName } from "../auth/generateRandomName";
 import { useRecaptcha } from "../auth/useRecaptcha";
+import { widget } from "../widget";
 
 interface UseRegisterPasswordlessUserType {
   privacyPolicyUrl?: string;
@@ -39,6 +40,11 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
       if (!setClient) {
         throw new Error("No client context");
       }
+      if (widget) {
+        throw new Error(
+          "Registration was skipped: We should never try to register password-less user in embedded mode.",
+        );
+      }
 
       try {
         const recaptchaResponse = await execute();

src/config/Config.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { getUrlParams } from "../UrlParams";
 import {
   DEFAULT_CONFIG,
   ConfigOptions,
@@ -45,10 +46,18 @@ export class Config {
 
   // Convenience accessors
   public static defaultHomeserverUrl(): string | undefined {
-    return Config.get().default_server_config?.["m.homeserver"].base_url;
+    return (
+      getUrlParams().homeserver ??
+      Config.get().default_server_config?.["m.homeserver"].base_url
+    );
   }
 
   public static defaultServerName(): string | undefined {
+    const homeserver = getUrlParams().homeserver;
+    if (homeserver) {
+      const url = new URL(homeserver);
+      return url.hostname;
+    }
     return Config.get().default_server_config?.["m.homeserver"].server_name;
   }
 

src/config/ConfigOptions.ts

@@ -55,16 +55,31 @@ export interface ConfigOptions {
 
   // Describes the LiveKit configuration to be used.
   livekit?: {
-    // The link to the service that returns a livekit url and token to use it
+    // The link to the service that returns a livekit url and token to use it.
+    // This is a fallback link in case the homeserver in use does not advertise
+    // a livekit service url in the client well-known.
+    // The well known needs to be formatted like so:
+    // {"type":"livekit", "livekit_service_url":"https://livekit.example.com"}
+    // and stored under the key: "livekit_focus"
     livekit_service_url: string;
   };
 
   /**
-   * Allow to join a group calls without audio and video.
-   * TEMPORARY: Is a feature that's not proved and experimental
+   * TEMPORARY experimental features.
    */
   features?: {
-    feature_group_calls_without_video_and_audio: boolean;
+    /**
+     * Allow to join group calls without audio and video.
+     */
+    feature_group_calls_without_video_and_audio?: boolean;
+    /**
+     * Send device-specific call session membership state events instead of
+     * legacy user-specific call membership state events.
+     * This setting has no effect when the user joins an active call with
+     * legacy state events. For compatibility, Element Call will always join
+     * active legacy calls with legacy state events.
+     */
+    feature_use_device_session_member_events?: boolean;
   };
 
   /**

src/e2ee/sharedKeyManagement.ts

@@ -15,12 +15,11 @@ limitations under the License.
 */
 
 import { useEffect, useMemo } from "react";
-import { Room } from "matrix-js-sdk";
 
 import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
-import { useClient } from "../ClientContext";
 import { UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
-import { widget } from "../widget";
+import { E2eeType } from "./e2eeType";
+import { useClient } from "../ClientContext";
 
 export function saveKeyForRoom(roomId: string, password: string): void {
   setLocalStorageItem(getRoomSharedKeyLocalStorageKey(roomId), password);
@@ -68,30 +67,37 @@ const useKeyFromUrl = (): [string, string] | [undefined, undefined] => {
     : [undefined, undefined];
 };
 
-export const useRoomSharedKey = (roomId: string): string | undefined => {
+export type Unencrypted = { kind: E2eeType.NONE };
+export type SharedSecret = { kind: E2eeType.SHARED_KEY; secret: string };
+export type PerParticipantE2EE = { kind: E2eeType.PER_PARTICIPANT };
+export type EncryptionSystem = Unencrypted | SharedSecret | PerParticipantE2EE;
+
+export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
+  const { client } = useClient();
+
   // make sure we've extracted the key from the URL first
   // (and we still need to take the value it returns because
   // the effect won't run in time for it to save to localstorage in
   // time for us to read it out again).
-  const [urlRoomId, passwordFormUrl] = useKeyFromUrl();
-
+  const [urlRoomId, passwordFromUrl] = useKeyFromUrl();
   const storedPassword = useInternalRoomSharedKey(roomId);
-
-  if (storedPassword) return storedPassword;
-  if (urlRoomId === roomId) return passwordFormUrl;
-  return undefined;
-};
-
-export const useIsRoomE2EE = (roomId: string): boolean | null => {
-  const { client } = useClient();
-  const room = useMemo(() => client?.getRoom(roomId), [roomId, client]);
-
-  return useMemo(() => !room || isRoomE2EE(room), [room]);
-};
-
-export function isRoomE2EE(room: Room): boolean {
-  // For now, rooms in widget mode are never considered encrypted.
-  // In the future, when widget mode gains encryption support, then perhaps we
-  // should inspect the e2eEnabled URL parameter here?
-  return widget === null && !room.getCanonicalAlias();
+  const room = client?.getRoom(roomId);
+  const e2eeSystem = <EncryptionSystem>useMemo(() => {
+    if (!room) return { kind: E2eeType.NONE };
+    if (storedPassword)
+      return {
+        kind: E2eeType.SHARED_KEY,
+        secret: storedPassword,
+      };
+    if (urlRoomId === roomId)
+      return {
+        kind: E2eeType.SHARED_KEY,
+        secret: passwordFromUrl,
+      };
+    if (room.hasEncryptionStateEvent()) {
+      return { kind: E2eeType.PER_PARTICIPANT };
+    }
+    return { kind: E2eeType.NONE };
+  }, [passwordFromUrl, room, roomId, storedPassword, urlRoomId]);
+  return e2eeSystem;
 }

src/home/CallList.tsx

@@ -26,7 +26,7 @@ import styles from "./CallList.module.css";
 import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface CallListProps {
   rooms: GroupCallRoom[];
@@ -66,16 +66,11 @@ interface CallTileProps {
 }
 
 const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
-  const roomSharedKey = useRoomSharedKey(room.roomId);
-
+  const roomEncryptionSystem = useRoomEncryptionSystem(room.roomId);
   return (
     <div className={styles.callTile}>
       <Link
-        to={getRelativeRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined,
-        )}
+        to={getRelativeRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
@@ -89,11 +84,8 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getAbsoluteRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined,
-        )}
+        // Todo add the viaServers to the created link
+        value={getAbsoluteRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
       />
     </div>
   );

src/home/RegisteredView.tsx

@@ -78,12 +78,14 @@ export const RegisteredView: FC<Props> = ({ client }) => {
           roomName,
           E2eeType.SHARED_KEY,
         );
+        if (!createRoomResult.password)
+          throw new Error("Failed to create room with shared secret");
 
         history.push(
           getRelativeRoomUrl(
             createRoomResult.roomId,
+            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
             roomName,
-            createRoomResult.password,
           ),
         );
       }

src/home/UnauthenticatedView.tsx

@@ -116,13 +116,15 @@ export const UnauthenticatedView: FC = () => {
         if (!setClient) {
           throw new Error("setClient is undefined");
         }
+        if (!createRoomResult.password)
+          throw new Error("Failed to create room with shared secret");
 
         setClient({ client, session });
         history.push(
           getRelativeRoomUrl(
             createRoomResult.roomId,
+            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
             roomName,
-            createRoomResult.password,
           ),
         );
       }

src/home/useGroupCallRooms.ts

@@ -15,20 +15,22 @@ limitations under the License.
 */
 
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEventHandler";
 import { useState, useEffect } from "react";
+import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
+import { KnownMembership } from "matrix-js-sdk/src/types";
 
-import { getKeyForRoom, isRoomE2EE } from "../e2ee/sharedKeyManagement";
+import { getKeyForRoom } from "../e2ee/sharedKeyManagement";
 
 export interface GroupCallRoom {
   roomAlias?: string;
   roomName: string;
   avatarUrl: string;
   room: Room;
-  groupCall: GroupCall;
+  session: MatrixRTCSession;
   participants: RoomMember[];
 }
 const tsCache: { [index: string]: number } = {};
@@ -46,7 +48,7 @@ function getLastTs(client: MatrixClient, r: Room): number {
 
   const myUserId = client.getUserId()!;
 
-  if (r.getMyMembership() !== "join") {
+  if (r.getMyMembership() !== KnownMembership.Join) {
     const membershipEvent = r.currentState.getStateEvents(
       "m.room.member",
       myUserId,
@@ -80,38 +82,77 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
   });
 }
 
-function roomIsJoinable(room: Room): boolean {
-  if (isRoomE2EE(room)) {
-    return Boolean(getKeyForRoom(room.roomId));
-  } else {
-    return true;
+const roomIsJoinable = (room: Room): boolean => {
+  if (!room.hasEncryptionStateEvent() && !getKeyForRoom(room.roomId)) {
+    // if we have an non encrypted room (no encryption state event) we need a locally stored shared key.
+    // in case this key also does not exists we cannot join the room.
+    return false;
   }
-}
+  // otherwise we can always join rooms because we will automatically decide if we want to use perParticipant or password
+  switch (room.getJoinRule()) {
+    case JoinRule.Public:
+      return true;
+    case JoinRule.Knock:
+      switch (room.getMyMembership()) {
+        case KnownMembership.Join:
+        case KnownMembership.Knock:
+          return true;
+        case KnownMembership.Invite:
+          return (
+            room
+              .getLiveTimeline()
+              .getState(EventTimeline.FORWARDS)
+              ?.getStateEvents(EventType.RoomMember, room.myUserId)
+              ?.getPrevContent().membership === JoinRule.Knock
+          );
+        default:
+          return false;
+      }
+    // TODO: check JoinRule.Restricted and return true if join condition is satisfied
+    default:
+      return room.getMyMembership() === KnownMembership.Join;
+  }
+};
+
+const roomHasCallMembershipEvents = (room: Room): boolean => {
+  switch (room.getMyMembership()) {
+    case KnownMembership.Join:
+      return !!room
+        .getLiveTimeline()
+        .getState(EventTimeline.FORWARDS)
+        ?.events?.get(EventType.GroupCallMemberPrefix);
+    case KnownMembership.Knock:
+      // Assume that a room you've knocked on is able to hold calls
+      return true;
+    default:
+      return false;
+  }
+};
 
 export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
   const [rooms, setRooms] = useState<GroupCallRoom[]>([]);
 
   useEffect(() => {
     function updateRooms(): void {
-      if (!client.groupCallEventHandler) {
-        return;
-      }
-
-      const groupCalls = client.groupCallEventHandler.groupCalls.values();
-      const rooms = Array.from(groupCalls)
-        .map((groupCall) => groupCall.room)
+      // We want to show all rooms that historically had a call and which we are (can become) part of.
+      const rooms = client
+        .getRooms()
+        .filter(roomHasCallMembershipEvents)
         .filter(roomIsJoinable);
       const sortedRooms = sortRooms(client, rooms);
       const items = sortedRooms.map((room) => {
-        const groupCall = client.getGroupCallForRoom(room.roomId)!;
-
+        const session = client.matrixRTC.getRoomSession(room);
+        session.memberships;
         return {
           roomAlias: room.getCanonicalAlias() ?? undefined,
           roomName: room.name,
           avatarUrl: room.getMxcAvatarUrl()!,
           room,
-          groupCall,
-          participants: [...groupCall!.participants.keys()],
+          session,
+          participants: session.memberships
+            .filter((m) => m.sender)
+            .map((m) => room.getMember(m.sender!))
+            .filter((m) => m) as RoomMember[],
         };
       });
 
@@ -120,15 +161,17 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
 
     updateRooms();
 
-    client.on(GroupCallEventHandlerEvent.Incoming, updateRooms);
-    client.on(GroupCallEventHandlerEvent.Participants, updateRooms);
-
-    return () => {
-      client.removeListener(GroupCallEventHandlerEvent.Incoming, updateRooms);
-      client.removeListener(
-        GroupCallEventHandlerEvent.Participants,
+    client.matrixRTC.on(
+      MatrixRTCSessionManagerEvents.SessionStarted,
+      updateRooms,
+    );
+    client.on(RoomEvent.MyMembership, updateRooms);
+    return (): void => {
+      client.matrixRTC.off(
+        MatrixRTCSessionManagerEvents.SessionStarted,
         updateRooms,
       );
+      client.off(RoomEvent.MyMembership, updateRooms);
     };
   }, [client]);
 

src/icons/Logo.svg

@@ -2,17 +2,17 @@
 <desc>Element Call (Beta)</desc>
 <circle cx="15" cy="15" r="13" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30ZM12.2579 6.98923C12.2579 6.38376 12.7497 5.89292 13.3565 5.89292C17.4687 5.89292 20.8024 9.21967 20.8024 13.3234C20.8024 13.9289 20.3106 14.4197 19.7038 14.4197C19.0971 14.4197 18.6052 13.9289 18.6052 13.3234C18.6052 10.4306 16.2553 8.08554 13.3565 8.08554C12.7497 8.08554 12.2579 7.59471 12.2579 6.98923ZM24.1066 13.3235C24.1066 12.7181 23.6148 12.2272 23.008 12.2272C22.4013 12.2272 21.9094 12.7181 21.9094 13.3235C21.9094 16.2163 19.5595 18.5614 16.6607 18.5614C16.0539 18.5614 15.5621 19.0523 15.5621 19.6577C15.5621 20.2632 16.0539 20.754 16.6607 20.754C20.7729 20.754 24.1066 17.4273 24.1066 13.3235ZM17.7601 23.011C17.7601 23.6164 17.2682 24.1073 16.6615 24.1073C12.5492 24.1073 9.21553 20.7805 9.21553 16.6768C9.21553 16.0713 9.70739 15.5805 10.3141 15.5805C10.9209 15.5805 11.4127 16.0713 11.4127 16.6768C11.4127 19.5696 13.7627 21.9146 16.6615 21.9146C17.2682 21.9146 17.7601 22.4055 17.7601 23.011ZM5.89281 16.6769C5.89281 17.2824 6.38466 17.7732 6.9914 17.7732C7.59813 17.7732 8.08999 17.2824 8.08999 16.6769C8.08999 13.7841 10.4399 11.439 13.3388 11.439C13.9455 11.439 14.4373 10.9482 14.4373 10.3427C14.4373 9.73722 13.9455 9.24639 13.3388 9.24639C9.22647 9.24639 5.89281 12.5731 5.89281 16.6769Z" fill="#0DBD8B"/>
-<path d="M53.5406 17.258H42.8052C42.932 18.3814 43.3397 19.2782 44.0282 19.9486C44.7167 20.6009 45.6227 20.927 46.746 20.927C47.4889 20.927 48.1593 20.7459 48.7572 20.3835C49.3551 20.0211 49.7809 19.5319 50.0346 18.9159H53.296C52.8611 20.3472 52.0458 21.5068 50.8499 22.3947C49.6722 23.2644 48.2771 23.6992 46.6645 23.6992C44.5627 23.6992 42.8596 23.0016 41.555 21.6065C40.2686 20.2114 39.6254 18.4448 39.6254 16.3068C39.6254 14.2231 40.2776 12.4747 41.5822 11.0614C42.8867 9.64814 44.5718 8.94151 46.6373 8.94151C48.7029 8.94151 50.3698 9.63908 51.6381 11.0342C52.9245 12.4112 53.5677 14.1506 53.5677 16.2524L53.5406 17.258ZM46.6373 11.5778C45.6227 11.5778 44.7801 11.8767 44.1098 12.4747C43.4394 13.0726 43.0226 13.8698 42.8596 14.8663H50.3607C50.2158 13.8698 49.8172 13.0726 49.1649 12.4747C48.5126 11.8767 47.6701 11.5778 46.6373 11.5778Z" fill="white"/>
-<path d="M55.7934 19.1605V2.9895H59.0276V19.2148C59.0276 19.9396 59.4262 20.302 60.2234 20.302L60.7941 20.2748V23.3459C60.4861 23.4003 60.16 23.4274 59.8157 23.4274C58.4206 23.4274 57.3969 23.0741 56.7446 22.3675C56.1104 21.6609 55.7934 20.5919 55.7934 19.1605Z" fill="white"/>
-<path d="M75.8563 17.258H65.121C65.2478 18.3814 65.6555 19.2782 66.344 19.9486C67.0325 20.6009 67.9384 20.927 69.0618 20.927C69.8047 20.927 70.4751 20.7459 71.073 20.3835C71.6709 20.0211 72.0967 19.5319 72.3503 18.9159H75.6117C75.1769 20.3472 74.3615 21.5068 73.1657 22.3947C71.988 23.2644 70.5928 23.6992 68.9803 23.6992C66.8785 23.6992 65.1753 23.0016 63.8708 21.6065C62.5843 20.2114 61.9411 18.4448 61.9411 16.3068C61.9411 14.2231 62.5934 12.4747 63.898 11.0614C65.2025 9.64814 66.8875 8.94151 68.9531 8.94151C71.0186 8.94151 72.6855 9.63908 73.9539 11.0342C75.2403 12.4112 75.8835 14.1506 75.8835 16.2524L75.8563 17.258ZM68.9531 11.5778C67.9384 11.5778 67.0959 11.8767 66.4255 12.4747C65.7551 13.0726 65.3384 13.8698 65.1753 14.8663H72.6765C72.5315 13.8698 72.1329 13.0726 71.4806 12.4747C70.8284 11.8767 69.9859 11.5778 68.9531 11.5778Z" fill="white"/>
-<path d="M90.448 15.274V23.3731H87.2138V14.9207C87.2138 12.7827 86.326 11.7137 84.5503 11.7137C83.59 11.7137 82.82 12.0217 82.2402 12.6377C81.6785 13.2538 81.3977 14.0963 81.3977 15.1653V23.3731H78.1635V9.26764H81.1531V11.1429C81.4973 10.5088 82.0228 9.98333 82.7294 9.5666C83.436 9.14987 84.3148 8.94151 85.3657 8.94151C87.3225 8.94151 88.7358 9.68438 89.6055 11.1701C90.8013 9.68438 92.3958 8.94151 94.3888 8.94151C96.0376 8.94151 97.3059 9.45789 98.1937 10.4907C99.0816 11.5053 99.5255 12.8461 99.5255 14.513V23.3731H96.2913V14.9207C96.2913 12.7827 95.4035 11.7137 93.6278 11.7137C92.6494 11.7137 91.8703 12.0308 91.2905 12.6649C90.7288 13.2809 90.448 14.1506 90.448 15.274Z" fill="white"/>
-<path d="M115.61 17.258H104.874C105.001 18.3814 105.409 19.2782 106.097 19.9486C106.786 20.6009 107.692 20.927 108.815 20.927C109.558 20.927 110.228 20.7459 110.826 20.3835C111.424 20.0211 111.85 19.5319 112.104 18.9159H115.365C114.93 20.3472 114.115 21.5068 112.919 22.3947C111.741 23.2644 110.346 23.6992 108.734 23.6992C106.632 23.6992 104.929 23.0016 103.624 21.6065C102.338 20.2114 101.694 18.4448 101.694 16.3068C101.694 14.2231 102.347 12.4747 103.651 11.0614C104.956 9.64814 106.641 8.94151 108.706 8.94151C110.772 8.94151 112.439 9.63908 113.707 11.0342C114.994 12.4112 115.637 14.1506 115.637 16.2524L115.61 17.258ZM108.706 11.5778C107.692 11.5778 106.849 11.8767 106.179 12.4747C105.508 13.0726 105.092 13.8698 104.929 14.8663H112.43C112.285 13.8698 111.886 13.0726 111.234 12.4747C110.582 11.8767 109.739 11.5778 108.706 11.5778Z" fill="white"/>
-<path d="M120.906 9.26764V11.1429C121.232 10.5269 121.767 10.0105 122.51 9.59378C123.271 9.15893 124.186 8.94151 125.255 8.94151C126.922 8.94151 128.208 9.44883 129.114 10.4635C130.038 11.4781 130.5 12.828 130.5 14.513V23.3731H127.266V14.9207C127.266 13.9242 127.03 13.1451 126.559 12.5834C126.106 12.0036 125.409 11.7137 124.467 11.7137C123.434 11.7137 122.619 12.0217 122.021 12.6377C121.441 13.2538 121.151 14.1053 121.151 15.1925V23.3731H117.917V9.26764H120.906Z" fill="white"/>
-<path d="M139.946 20.4922V23.2915C139.547 23.4003 138.985 23.4546 138.261 23.4546C135.507 23.4546 134.13 22.0685 134.13 19.2964V11.8496H131.982V9.26764H134.13V5.5986H137.364V9.26764H140V11.8496H137.364V18.9702C137.364 20.0755 137.889 20.6281 138.94 20.6281L139.946 20.4922Z" fill="white"/>
-<path d="M148.304 20.864C146.768 19.184 146 17.056 146 14.48C146 11.904 146.768 9.784 148.304 8.12C149.856 6.44 151.896 5.6 154.424 5.6C156.504 5.6 158.264 6.176 159.704 7.328C161.144 8.48 162.064 10.024 162.464 11.96H160.616C160.28 10.52 159.552 9.376 158.432 8.528C157.312 7.68 155.976 7.256 154.424 7.256C152.44 7.256 150.84 7.92 149.624 9.248C148.424 10.576 147.824 12.32 147.824 14.48C147.824 16.64 148.424 18.384 149.624 19.712C150.84 21.04 152.44 21.704 154.424 21.704C155.976 21.704 157.312 21.28 158.432 20.432C159.552 19.584 160.28 18.44 160.616 17H162.464C162.064 18.936 161.144 20.48 159.704 21.632C158.264 22.784 156.504 23.36 154.424 23.36C151.896 23.36 149.856 22.528 148.304 20.864Z" fill="white"/>
-<path d="M173.63 17.192C171.438 17.192 169.942 17.24 169.142 17.336C168.358 17.416 167.782 17.552 167.414 17.744C166.758 18.112 166.43 18.704 166.43 19.52C166.43 21.088 167.358 21.872 169.214 21.872C170.638 21.872 171.726 21.552 172.478 20.912C173.246 20.272 173.63 19.416 173.63 18.344V17.192ZM169.022 23.288C167.63 23.288 166.566 22.952 165.83 22.28C165.11 21.592 164.75 20.688 164.75 19.568C164.75 18.832 164.942 18.176 165.326 17.6C165.726 17.024 166.27 16.6 166.958 16.328C167.534 16.104 168.278 15.96 169.19 15.896C170.102 15.816 171.582 15.776 173.63 15.776V14.984C173.63 12.968 172.478 11.96 170.174 11.96C168.19 11.96 167.038 12.768 166.718 14.384H165.062C165.238 13.2 165.742 12.256 166.574 11.552C167.422 10.848 168.646 10.496 170.246 10.496C171.958 10.496 173.23 10.896 174.062 11.696C174.91 12.496 175.334 13.6 175.334 15.008V23H173.702V21.224C172.854 22.6 171.294 23.288 169.022 23.288Z" fill="white"/>
-<path d="M179.418 20.312V5H181.122V20.12C181.122 20.616 181.202 20.96 181.362 21.152C181.538 21.344 181.85 21.44 182.298 21.44L182.778 21.392V22.952C182.506 23 182.21 23.024 181.89 23.024C180.242 23.024 179.418 22.12 179.418 20.312Z" fill="white"/>
-<path d="M185.582 20.312V5H187.286V20.12C187.286 20.616 187.366 20.96 187.526 21.152C187.702 21.344 188.014 21.44 188.462 21.44L188.942 21.392V22.952C188.67 23 188.374 23.024 188.054 23.024C186.406 23.024 185.582 22.12 185.582 20.312Z" fill="white"/>
+<path d="M53.5406 17.258H42.8052C42.932 18.3814 43.3397 19.2782 44.0282 19.9486C44.7167 20.6009 45.6227 20.927 46.746 20.927C47.4889 20.927 48.1593 20.7459 48.7572 20.3835C49.3551 20.0211 49.7809 19.5319 50.0346 18.9159H53.296C52.8611 20.3472 52.0458 21.5068 50.8499 22.3947C49.6722 23.2644 48.2771 23.6992 46.6645 23.6992C44.5627 23.6992 42.8596 23.0016 41.555 21.6065C40.2686 20.2114 39.6254 18.4448 39.6254 16.3068C39.6254 14.2231 40.2776 12.4747 41.5822 11.0614C42.8867 9.64814 44.5718 8.94151 46.6373 8.94151C48.7029 8.94151 50.3698 9.63908 51.6381 11.0342C52.9245 12.4112 53.5677 14.1506 53.5677 16.2524L53.5406 17.258ZM46.6373 11.5778C45.6227 11.5778 44.7801 11.8767 44.1098 12.4747C43.4394 13.0726 43.0226 13.8698 42.8596 14.8663H50.3607C50.2158 13.8698 49.8172 13.0726 49.1649 12.4747C48.5126 11.8767 47.6701 11.5778 46.6373 11.5778Z" fill="currentColor"/>
+<path d="M55.7934 19.1605V2.9895H59.0276V19.2148C59.0276 19.9396 59.4262 20.302 60.2234 20.302L60.7941 20.2748V23.3459C60.4861 23.4003 60.16 23.4274 59.8157 23.4274C58.4206 23.4274 57.3969 23.0741 56.7446 22.3675C56.1104 21.6609 55.7934 20.5919 55.7934 19.1605Z" fill="currentColor"/>
+<path d="M75.8563 17.258H65.121C65.2478 18.3814 65.6555 19.2782 66.344 19.9486C67.0325 20.6009 67.9384 20.927 69.0618 20.927C69.8047 20.927 70.4751 20.7459 71.073 20.3835C71.6709 20.0211 72.0967 19.5319 72.3503 18.9159H75.6117C75.1769 20.3472 74.3615 21.5068 73.1657 22.3947C71.988 23.2644 70.5928 23.6992 68.9803 23.6992C66.8785 23.6992 65.1753 23.0016 63.8708 21.6065C62.5843 20.2114 61.9411 18.4448 61.9411 16.3068C61.9411 14.2231 62.5934 12.4747 63.898 11.0614C65.2025 9.64814 66.8875 8.94151 68.9531 8.94151C71.0186 8.94151 72.6855 9.63908 73.9539 11.0342C75.2403 12.4112 75.8835 14.1506 75.8835 16.2524L75.8563 17.258ZM68.9531 11.5778C67.9384 11.5778 67.0959 11.8767 66.4255 12.4747C65.7551 13.0726 65.3384 13.8698 65.1753 14.8663H72.6765C72.5315 13.8698 72.1329 13.0726 71.4806 12.4747C70.8284 11.8767 69.9859 11.5778 68.9531 11.5778Z" fill="currentColor"/>
+<path d="M90.448 15.274V23.3731H87.2138V14.9207C87.2138 12.7827 86.326 11.7137 84.5503 11.7137C83.59 11.7137 82.82 12.0217 82.2402 12.6377C81.6785 13.2538 81.3977 14.0963 81.3977 15.1653V23.3731H78.1635V9.26764H81.1531V11.1429C81.4973 10.5088 82.0228 9.98333 82.7294 9.5666C83.436 9.14987 84.3148 8.94151 85.3657 8.94151C87.3225 8.94151 88.7358 9.68438 89.6055 11.1701C90.8013 9.68438 92.3958 8.94151 94.3888 8.94151C96.0376 8.94151 97.3059 9.45789 98.1937 10.4907C99.0816 11.5053 99.5255 12.8461 99.5255 14.513V23.3731H96.2913V14.9207C96.2913 12.7827 95.4035 11.7137 93.6278 11.7137C92.6494 11.7137 91.8703 12.0308 91.2905 12.6649C90.7288 13.2809 90.448 14.1506 90.448 15.274Z" fill="currentColor"/>
+<path d="M115.61 17.258H104.874C105.001 18.3814 105.409 19.2782 106.097 19.9486C106.786 20.6009 107.692 20.927 108.815 20.927C109.558 20.927 110.228 20.7459 110.826 20.3835C111.424 20.0211 111.85 19.5319 112.104 18.9159H115.365C114.93 20.3472 114.115 21.5068 112.919 22.3947C111.741 23.2644 110.346 23.6992 108.734 23.6992C106.632 23.6992 104.929 23.0016 103.624 21.6065C102.338 20.2114 101.694 18.4448 101.694 16.3068C101.694 14.2231 102.347 12.4747 103.651 11.0614C104.956 9.64814 106.641 8.94151 108.706 8.94151C110.772 8.94151 112.439 9.63908 113.707 11.0342C114.994 12.4112 115.637 14.1506 115.637 16.2524L115.61 17.258ZM108.706 11.5778C107.692 11.5778 106.849 11.8767 106.179 12.4747C105.508 13.0726 105.092 13.8698 104.929 14.8663H112.43C112.285 13.8698 111.886 13.0726 111.234 12.4747C110.582 11.8767 109.739 11.5778 108.706 11.5778Z" fill="currentColor"/>
+<path d="M120.906 9.26764V11.1429C121.232 10.5269 121.767 10.0105 122.51 9.59378C123.271 9.15893 124.186 8.94151 125.255 8.94151C126.922 8.94151 128.208 9.44883 129.114 10.4635C130.038 11.4781 130.5 12.828 130.5 14.513V23.3731H127.266V14.9207C127.266 13.9242 127.03 13.1451 126.559 12.5834C126.106 12.0036 125.409 11.7137 124.467 11.7137C123.434 11.7137 122.619 12.0217 122.021 12.6377C121.441 13.2538 121.151 14.1053 121.151 15.1925V23.3731H117.917V9.26764H120.906Z" fill="currentColor"/>
+<path d="M139.946 20.4922V23.2915C139.547 23.4003 138.985 23.4546 138.261 23.4546C135.507 23.4546 134.13 22.0685 134.13 19.2964V11.8496H131.982V9.26764H134.13V5.5986H137.364V9.26764H140V11.8496H137.364V18.9702C137.364 20.0755 137.889 20.6281 138.94 20.6281L139.946 20.4922Z" fill="currentColor"/>
+<path d="M148.304 20.864C146.768 19.184 146 17.056 146 14.48C146 11.904 146.768 9.784 148.304 8.12C149.856 6.44 151.896 5.6 154.424 5.6C156.504 5.6 158.264 6.176 159.704 7.328C161.144 8.48 162.064 10.024 162.464 11.96H160.616C160.28 10.52 159.552 9.376 158.432 8.528C157.312 7.68 155.976 7.256 154.424 7.256C152.44 7.256 150.84 7.92 149.624 9.248C148.424 10.576 147.824 12.32 147.824 14.48C147.824 16.64 148.424 18.384 149.624 19.712C150.84 21.04 152.44 21.704 154.424 21.704C155.976 21.704 157.312 21.28 158.432 20.432C159.552 19.584 160.28 18.44 160.616 17H162.464C162.064 18.936 161.144 20.48 159.704 21.632C158.264 22.784 156.504 23.36 154.424 23.36C151.896 23.36 149.856 22.528 148.304 20.864Z" fill="currentColor"/>
+<path d="M173.63 17.192C171.438 17.192 169.942 17.24 169.142 17.336C168.358 17.416 167.782 17.552 167.414 17.744C166.758 18.112 166.43 18.704 166.43 19.52C166.43 21.088 167.358 21.872 169.214 21.872C170.638 21.872 171.726 21.552 172.478 20.912C173.246 20.272 173.63 19.416 173.63 18.344V17.192ZM169.022 23.288C167.63 23.288 166.566 22.952 165.83 22.28C165.11 21.592 164.75 20.688 164.75 19.568C164.75 18.832 164.942 18.176 165.326 17.6C165.726 17.024 166.27 16.6 166.958 16.328C167.534 16.104 168.278 15.96 169.19 15.896C170.102 15.816 171.582 15.776 173.63 15.776V14.984C173.63 12.968 172.478 11.96 170.174 11.96C168.19 11.96 167.038 12.768 166.718 14.384H165.062C165.238 13.2 165.742 12.256 166.574 11.552C167.422 10.848 168.646 10.496 170.246 10.496C171.958 10.496 173.23 10.896 174.062 11.696C174.91 12.496 175.334 13.6 175.334 15.008V23H173.702V21.224C172.854 22.6 171.294 23.288 169.022 23.288Z" fill="currentColor"/>
+<path d="M179.418 20.312V5H181.122V20.12C181.122 20.616 181.202 20.96 181.362 21.152C181.538 21.344 181.85 21.44 182.298 21.44L182.778 21.392V22.952C182.506 23 182.21 23.024 181.89 23.024C180.242 23.024 179.418 22.12 179.418 20.312Z" fill="currentColor"/>
+<path d="M185.582 20.312V5H187.286V20.12C187.286 20.616 187.366 20.96 187.526 21.152C187.702 21.344 188.014 21.44 188.462 21.44L188.942 21.392V22.952C188.67 23 188.374 23.024 188.054 23.024C186.406 23.024 185.582 22.12 185.582 20.312Z" fill="currentColor"/>
 <path d="M201 10C201 5.58172 204.582 2 209 2H252C256.418 2 260 5.58172 260 10V20C260 24.4183 256.418 28 252 28H209C204.582 28 201 24.4183 201 20V10Z" fill="#368BD6"/>
 <path d="M212.076 20H216.492C218.99 20 220.215 18.7269 220.215 17.0277C220.215 15.3764 219.043 14.407 217.882 14.3484V14.2418C218.947 13.9915 219.789 13.2457 219.789 11.9194C219.789 10.2947 218.617 9.09091 216.252 9.09091H212.076V20ZM214.052 18.3487V15.1527H216.231C217.451 15.1527 218.207 15.8984 218.207 16.8732C218.207 17.7415 217.61 18.3487 216.178 18.3487H214.052ZM214.052 13.7305V10.7209H216.05C217.211 10.7209 217.813 11.3335 217.813 12.1751C217.813 13.1339 217.035 13.7305 216.007 13.7305H214.052ZM221.934 20H229.072V18.3434H223.911V15.3658H228.662V13.7092H223.911V10.7475H229.03V9.09091H221.934V20ZM230.566 10.7475H233.938V20H235.898V10.7475H239.27V9.09091H230.566V10.7475ZM241.031 20L241.931 17.31H246.032L246.938 20H249.047L245.201 9.09091H242.762L238.921 20H241.031ZM242.464 15.7227L243.939 11.3281H244.024L245.5 15.7227H242.464Z" fill="white"/>
 </svg>

src/index.css

@@ -56,10 +56,6 @@ limitations under the License.
   --cpd-color-border-accent: var(--cpd-color-green-1100);
   --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
   --stopgap-background-85: rgba(16, 19, 23, 0.85);
-
-  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
-  background-repeat: no-repeat;
-  background-position: center;
 }
 
 @font-face {
@@ -152,11 +148,20 @@ limitations under the License.
 
 body {
   background-color: var(--cpd-color-bg-canvas-default);
+  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
+  background-repeat: no-repeat;
+  background-position: center;
   color: var(--cpd-color-text-primary);
   color-scheme: dark;
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* We use this to not render the page at all until we know the theme.*/
+.no-theme {
+  opacity: 0;
 }
 
 html,

src/initializer.tsx

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { BrowserTracing } from "@sentry/browser";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
@@ -160,10 +159,7 @@ export class Initializer {
           dsn: Config.get().sentry?.DSN,
           environment: Config.get().sentry?.environment,
           integrations: [
-            new BrowserTracing({
-              routingInstrumentation:
-                Sentry.reactRouterV5Instrumentation(history),
-            }),
+            Sentry.reactRouterV5BrowserTracingIntegration({ history }),
           ],
           tracesSampleRate: 1.0,
         });

src/livekit/LivekitFocus.ts

@@ -1,23 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Focus } from "matrix-js-sdk/src/matrixrtc/focus";
-
-export interface LivekitFocus extends Focus {
-  type: "livekit";
-  livekit_service_url: string;
-  livekit_alias: string;
-}

src/livekit/MediaDevicesContext.tsx

@@ -59,7 +59,7 @@ function useObservableState<T>(
     // observable state doesn't run in SSR
     if (typeof window === "undefined" || !observable) return;
     const subscription = observable.subscribe(setState);
-    return () => subscription.unsubscribe();
+    return (): void => subscription.unsubscribe();
   }, [observable]);
   return state;
 }

src/livekit/openIDSFU.ts

@@ -18,9 +18,9 @@ import { IOpenIDToken, MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { useEffect, useState } from "react";
+import { LivekitFocus } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
-import { LivekitFocus } from "./LivekitFocus";
-import { useActiveFocus } from "../room/useActiveFocus";
+import { useActiveLivekitFocus } from "../room/useActiveFocus";
 
 export interface SFUConfig {
   url: string;
@@ -46,7 +46,7 @@ export function useOpenIDSFU(
 ): SFUConfig | undefined {
   const [sfuConfig, setSFUConfig] = useState<SFUConfig | undefined>(undefined);
 
-  const activeFocus = useActiveFocus(rtcSession);
+  const activeFocus = useActiveLivekitFocus(rtcSession);
 
   useEffect(() => {
     (async (): Promise<void> => {

src/livekit/options.ts

@@ -59,5 +59,5 @@ export const defaultLiveKitOptions: RoomOptions = {
   stopLocalTrackOnUnpublish: true,
   reconnectPolicy: new DefaultReconnectPolicy(),
   disconnectOnPageLeave: true,
-  expWebAudioMix: false,
+  webAudioMix: false,
 };

src/livekit/useECConnectionState.ts

@@ -27,6 +27,14 @@ import { logger } from "matrix-js-sdk/src/logger";
 import * as Sentry from "@sentry/react";
 
 import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+
+declare global {
+  interface Window {
+    peerConnectionTimeout?: number;
+    websocketTimeout?: number;
+  }
+}
 
 /*
  * Additional values for states that a call can be in, beyond what livekit
@@ -61,7 +69,9 @@ async function doConnect(
   // doesn't publish it until you unmute. We want to publish it from the start so we're
   // always capturing audio: it helps keep bluetooth headsets in the right mode and
   // mobile browsers to know we're doing a call.
-  if (livekitRoom!.localParticipant.getTrack(Track.Source.Microphone)) {
+  if (
+    livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone)
+  ) {
     logger.warn(
       "Pre-creating audio track but participant already appears to have an microphone track: this shouldn't happen!",
     );
@@ -90,7 +100,9 @@ async function doConnect(
   if (!audioEnabled) await preCreatedAudioTrack?.mute();
 
   // check again having awaited for the track to create
-  if (livekitRoom!.localParticipant.getTrack(Track.Source.Microphone)) {
+  if (
+    livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone)
+  ) {
     logger.warn(
       "Pre-created audio track but participant already appears to have an microphone track: this shouldn't happen!",
     );
@@ -120,7 +132,21 @@ async function connectAndPublish(
   micTrack: LocalTrack | undefined,
   screenshareTracks: MediaStreamTrack[],
 ): Promise<void> {
-  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
+  const tracker = PosthogAnalytics.instance.eventCallConnectDuration;
+  // Track call connect duration
+  tracker.cacheConnectStart();
+  livekitRoom.once(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+
+  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt, {
+    // Due to stability issues on Firefox we are testing the effect of different
+    // timeouts, and allow these values to be set through the console
+    peerConnectionTimeout: window.peerConnectionTimeout ?? 45000,
+    websocketTimeout: window.websocketTimeout ?? 45000,
+  });
+
+  // remove listener in case the connect promise rejects before `SignalConnected` is emitted.
+  livekitRoom.off(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+  tracker.track({ log: true });
 
   if (micTrack) {
     logger.info(`Publishing precreated mic track`);
@@ -166,7 +192,7 @@ export function useECConnectionState(
       livekitRoom.on(RoomEvent.ConnectionStateChanged, onConnStateChanged);
     }
 
-    return () => {
+    return (): void => {
       if (oldRoom)
         oldRoom.off(RoomEvent.ConnectionStateChanged, onConnStateChanged);
     };
@@ -174,7 +200,7 @@ export function useECConnectionState(
 
   const doFocusSwitch = useCallback(async (): Promise<void> => {
     const screenshareTracks: MediaStreamTrack[] = [];
-    for (const t of livekitRoom!.localParticipant.videoTracks.values()) {
+    for (const t of livekitRoom!.localParticipant.videoTrackPublications.values()) {
       if (t.track && t.source == Track.Source.ScreenShare) {
         const newTrack = t.track.mediaStreamTrack.clone();
         newTrack.enabled = true;

src/livekit/useLiveKit.ts

@@ -41,11 +41,7 @@ import {
 } from "./useECConnectionState";
 import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
 import { E2eeType } from "../e2ee/e2eeType";
-
-export type E2EEConfig = {
-  mode: E2eeType;
-  sharedKey?: string;
-};
+import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface UseLivekitResult {
   livekitRoom?: Room;
@@ -56,41 +52,35 @@ export function useLiveKit(
   rtcSession: MatrixRTCSession,
   muteStates: MuteStates,
   sfuConfig: SFUConfig | undefined,
-  e2eeConfig: E2EEConfig,
+  e2eeSystem: EncryptionSystem,
 ): UseLivekitResult {
   const e2eeOptions = useMemo((): E2EEOptions | undefined => {
-    if (e2eeConfig.mode === E2eeType.NONE) return undefined;
+    if (e2eeSystem.kind === E2eeType.NONE) return undefined;
 
-    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       return {
         keyProvider: new MatrixKeyProvider(),
         worker: new E2EEWorker(),
       };
-    } else if (
-      e2eeConfig.mode === E2eeType.SHARED_KEY &&
-      e2eeConfig.sharedKey
-    ) {
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
       return {
         keyProvider: new ExternalE2EEKeyProvider(),
         worker: new E2EEWorker(),
       };
     }
-  }, [e2eeConfig]);
+  }, [e2eeSystem]);
 
   useEffect(() => {
-    if (e2eeConfig.mode === E2eeType.NONE || !e2eeOptions) return;
+    if (e2eeSystem.kind === E2eeType.NONE || !e2eeOptions) return;
 
-    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
-    } else if (
-      e2eeConfig.mode === E2eeType.SHARED_KEY &&
-      e2eeConfig.sharedKey
-    ) {
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
       (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
-        e2eeConfig.sharedKey,
+        e2eeSystem.secret,
       );
     }
-  }, [e2eeOptions, e2eeConfig, rtcSession]);
+  }, [e2eeOptions, e2eeSystem, rtcSession]);
 
   const initialMuteStates = useRef<MuteStates>(muteStates);
   const devices = useMediaDevices();
@@ -131,9 +121,9 @@ export function useLiveKit(
   // useEffect() with an argument that references itself, if E2EE is enabled
   const room = useMemo(() => {
     const r = new Room(roomOptions);
-    r.setE2EEEnabled(e2eeConfig.mode !== E2eeType.NONE);
+    r.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE);
     return r;
-  }, [roomOptions, e2eeConfig]);
+  }, [roomOptions, e2eeSystem]);
 
   const connectionState = useECConnectionState(
     {
@@ -291,7 +281,7 @@ export function useLiveKit(
           room.options.audioCaptureDefaults?.deviceId === "default"
         ) {
           const activeMicTrack = Array.from(
-            room.localParticipant.audioTracks.values(),
+            room.localParticipant.audioTrackPublications.values(),
           ).find((d) => d.source === Track.Source.Microphone)?.track;
 
           const defaultDevice = device.available.find(
@@ -313,7 +303,7 @@ export function useLiveKit(
             // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
             // the deviceId hasn't changed (was & still is default).
             room.localParticipant
-              .getTrack(Track.Source.Microphone)
+              .getTrackPublication(Track.Source.Microphone)
               ?.audioTrack?.restartTrack();
           }
         } else {

src/matrix-utils.ts

@@ -19,25 +19,25 @@ import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store";
 import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store";
-import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  ICreateClientOpts,
+  Preset,
+  Visibility,
+} from "matrix-js-sdk/src/matrix";
 import { ClientEvent } from "matrix-js-sdk/src/client";
-import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 import { logger } from "matrix-js-sdk/src/logger";
-import {
-  GroupCallIntent,
-  GroupCallType,
-} from "matrix-js-sdk/src/webrtc/groupCall";
 import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
-import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
+import { generateUrlSearchParams, getUrlParams } from "./UrlParams";
 import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
 import { E2eeType } from "./e2ee/e2eeType";
-import { saveKeyForRoom } from "./e2ee/sharedKeyManagement";
+import { EncryptionSystem, saveKeyForRoom } from "./e2ee/sharedKeyManagement";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
@@ -55,7 +55,13 @@ const SYNC_STORE_NAME = "element-call-sync";
 // (It's a good opportunity to make the database names consistent.)
 const CRYPTO_STORE_NAME = "element-call-crypto";
 
-function waitForSync(client: MatrixClient): Promise<void> {
+async function waitForSync(client: MatrixClient): Promise<void> {
+  // If there is a saved sync, the client will fire an additional sync event
+  // for restoring it before it runs the first network sync.
+  // However, the sync we want to wait for is the network sync,
+  // as the saved sync may be missing some state.
+  // Thus, don't resolve on the first sync when we know it's for the saved sync.
+  let waitForSavedSync = !!(await client.store.getSavedSyncToken());
   return new Promise<void>((resolve, reject) => {
     const onSync = (
       state: SyncState,
@@ -63,8 +69,12 @@ function waitForSync(client: MatrixClient): Promise<void> {
       data?: ISyncStateData,
     ): void => {
       if (state === "PREPARED") {
-        client.removeListener(ClientEvent.Sync, onSync);
-        resolve();
+        if (waitForSavedSync) {
+          waitForSavedSync = false;
+        } else {
+          client.removeListener(ClientEvent.Sync, onSync);
+          resolve();
+        }
       } else if (state === "ERROR") {
         client.removeListener(ClientEvent.Sync, onSync);
         reject(data?.error);
@@ -188,17 +198,16 @@ export async function initClient(
     await client.store.startup();
   }
 
-  if (client.initCrypto) {
-    await client.initCrypto();
-  }
-
-  await client.startClient({
-    // dirty hack to reduce chance of gappy syncs
-    // should be fixed by spotting gaps and backpaginating
-    initialSyncLimit: 50,
-  });
-
-  await waitForSync(client);
+  await client.initCrypto();
+  client.setGlobalErrorOnUnknownDevices(false);
+  // Once startClient is called, syncs are run asynchronously.
+  // Also, sync completion is communicated only via events.
+  // So, apply the event listener *before* starting the client.
+  // Otherwise, a sync may complete before the listener gets applied,
+  // and we will miss it.
+  const syncPromise = waitForSync(client);
+  await client.startClient({ clientWellKnownPollPeriod: 60 * 10 });
+  await syncPromise;
 
   return client;
 }
@@ -345,16 +354,6 @@ export async function createRoom(
 
   const result = await createPromise;
 
-  logger.log(`Creating group call in ${result.room_id}`);
-
-  await client.createGroupCall(
-    result.room_id,
-    GroupCallType.Video,
-    false,
-    GroupCallIntent.Room,
-    true,
-  );
-
   let password;
   if (e2ee == E2eeType.SHARED_KEY) {
     password = secureRandomBase64Url(16);
@@ -372,39 +371,35 @@ export async function createRoom(
  * Returns an absolute URL to that will load Element Call with the given room
  * @param roomId ID of the room
  * @param roomName Name of the room
- * @param password e2e key for the room
+ * @param encryptionSystem what encryption (or EncryptionSystem.Unencrypted) the room uses
  */
 export function getAbsoluteRoomUrl(
   roomId: string,
+  encryptionSystem: EncryptionSystem,
   roomName?: string,
-  password?: string,
+  viaServers?: string[],
 ): string {
   return `${window.location.protocol}//${
     window.location.host
-  }${getRelativeRoomUrl(roomId, roomName, password)}`;
+  }${getRelativeRoomUrl(roomId, encryptionSystem, roomName, viaServers)}`;
 }
 
 /**
  * Returns a relative URL to that will load Element Call with the given room
  * @param roomId ID of the room
  * @param roomName Name of the room
- * @param password e2e key for the room
+ * @param encryptionSystem what encryption (or EncryptionSystem.Unencrypted) the room uses
  */
 export function getRelativeRoomUrl(
   roomId: string,
+  encryptionSystem: EncryptionSystem,
   roomName?: string,
-  password?: string,
+  viaServers?: string[],
 ): string {
-  // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
-  // it in case it came from another client that generated a non url-safe one
-  const encodedPassword = password ? encodeURIComponent(password) : undefined;
-  if (password && encodedPassword !== password) {
-    logger.info("Encoded call password used non URL-safe chars: buggy client?");
-  }
-
-  return `/room/#${
-    roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
-  }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + encodedPassword : ""}`;
+  const roomPart = roomName
+    ? "/" + roomAliasLocalpartFromRoomName(roomName)
+    : "";
+  return `/room/#${roomPart}?${generateUrlSearchParams(roomId, encryptionSystem, viaServers).toString()}`;
 }
 
 export function getAvatarUrl(

src/otel/OTelGroupCallMembership.ts

@@ -40,7 +40,6 @@ import {
   SummaryStatsReport,
   CallFeedReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
-import { setSpan } from "@opentelemetry/api/build/esm/trace/context-utils";
 
 import { ElementCallOpenTelemetry } from "./otel";
 import { ObjectFlattener } from "./ObjectFlattener";
@@ -446,7 +445,7 @@ export class OTelGroupCallMembership {
     const type = OTelStatsReportType.SummaryReport;
     const data = ObjectFlattener.flattenSummaryStatsReportObject(statsReport);
     if (this.statsReportSpan.span === undefined && this.callMembershipSpan) {
-      const ctx = setSpan(
+      const ctx = opentelemetry.trace.setSpan(
         opentelemetry.context.active(),
         this.callMembershipSpan,
       );

src/profile/useProfile.ts

@@ -82,7 +82,7 @@ export function useProfile(client: MatrixClient | undefined): UseProfile {
       user?.on(UserEvent.AvatarUrl, onChangeUser);
     }
 
-    return () => {
+    return (): void => {
       if (user) {
         user.removeListener(UserEvent.DisplayName, onChangeUser);
         user.removeListener(UserEvent.AvatarUrl, onChangeUser);
@@ -118,7 +118,7 @@ export function useProfile(client: MatrixClient | undefined): UseProfile {
             displayName,
             avatarUrl: removeAvatar
               ? undefined
-              : mxcAvatarUrl ?? prev.avatarUrl,
+              : (mxcAvatarUrl ?? prev.avatarUrl),
             loading: false,
             success: true,
           }));

src/room/AppSelectionModal.tsx

@@ -21,13 +21,14 @@ import PopOutIcon from "@vector-im/compound-design-tokens/icons/pop-out.svg?reac
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { Modal } from "../Modal";
-import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./AppSelectionModal.module.css";
 import { editFragmentQuery } from "../UrlParams";
+import { E2eeType } from "../e2ee/e2eeType";
 
 interface Props {
-  roomId: string | null;
+  roomId: string;
 }
 
 export const AppSelectionModal: FC<Props> = ({ roomId }) => {
@@ -42,10 +43,9 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     },
     [setOpen],
   );
+  const e2eeSystem = useRoomEncryptionSystem(roomId);
 
-  const roomSharedKey = useRoomSharedKey(roomId ?? "");
-  const roomIsEncrypted = useIsRoomE2EE(roomId ?? "");
-  if (roomIsEncrypted && roomSharedKey === undefined) {
+  if (e2eeSystem.kind === E2eeType.NONE) {
     logger.error(
       "Generating app redirect URL for encrypted room but don't have key available!",
     );
@@ -60,7 +60,7 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     const url = new URL(
       roomId === null
         ? window.location.href
-        : getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined),
+        : getAbsoluteRoomUrl(roomId, e2eeSystem),
     );
     // Edit the URL to prevent the app selection prompt from appearing a second
     // time within the app, and to keep the user confined to the current room
@@ -73,7 +73,7 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     const result = new URL("io.element.call:/");
     result.searchParams.set("url", url.toString());
     return result.toString();
-  }, [roomId, roomSharedKey]);
+  }, [e2eeSystem, roomId]);
 
   return (
     <Modal

src/room/EncryptionLock.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { FC } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import LockIcon from "@vector-im/compound-design-tokens/icons/lock.svg?react";
+import LockSolidIcon from "@vector-im/compound-design-tokens/icons/lock-solid.svg?react";
 import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react";
 
 import styles from "./EncryptionLock.module.css";
@@ -28,7 +28,7 @@ interface Props {
 
 export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const { t } = useTranslation();
-  const Icon = encrypted ? LockIcon : LockOffIcon;
+  const Icon = encrypted ? LockSolidIcon : LockOffIcon;
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (

src/room/GroupCallLoader.tsx

@@ -14,22 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ReactNode, useCallback } from "react";
+import { useCallback } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { MatrixError } from "matrix-js-sdk";
 import { useHistory } from "react-router-dom";
 import { Heading, Link, Text } from "@vector-im/compound-web";
 
-import { useLoadGroupCall } from "./useLoadGroupCall";
+import {
+  useLoadGroupCall,
+  GroupCallStatus,
+  CallTerminatedMessage,
+} from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 
 interface Props {
   client: MatrixClient;
   roomIdOrAlias: string;
   viaServers: string[];
-  children: (rtcSession: MatrixRTCSession) => ReactNode;
+  children: (groupCallState: GroupCallStatus) => JSX.Element;
 }
 
 export function GroupCallLoader({
@@ -51,20 +54,22 @@ export function GroupCallLoader({
   );
 
   switch (groupCallState.kind) {
+    case "loaded":
+    case "waitForInvite":
+    case "canKnock":
+      return children(groupCallState);
     case "loading":
       return (
         <FullScreenView>
           <h1>{t("common.loading")}</h1>
         </FullScreenView>
       );
-    case "loaded":
-      return <>{children(groupCallState.rtcSession)}</>;
     case "failed":
       if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
         return (
           <FullScreenView>
-            <Heading>{t("group_call_loader_failed_heading")}</Heading>
-            <Text>{t("group_call_loader_failed_text")}</Text>
+            <Heading>{t("group_call_loader.failed_heading")}</Heading>
+            <Text>{t("group_call_loader.failed_text")}</Text>
             {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
             dupes of this flow, let's make a common component and put it here. */}
             <Link href="/" onClick={onHomeClick}>
@@ -72,6 +77,22 @@ export function GroupCallLoader({
             </Link>
           </FullScreenView>
         );
+      } else if (groupCallState.error instanceof CallTerminatedMessage) {
+        return (
+          <FullScreenView>
+            <Heading>{groupCallState.error.message}</Heading>
+            <Text>{groupCallState.error.messageBody}</Text>
+            {groupCallState.error.reason && (
+              <>
+                {t("group_call_loader.reason")}:
+                <Text size="sm">"{groupCallState.error.reason}"</Text>
+              </>
+            )}
+            <Link href="/" onClick={onHomeClick}>
+              {t("common.home")}
+            </Link>
+          </FullScreenView>
+        );
       } else {
         return <ErrorView error={groupCallState.error} />;
       }

src/room/GroupCallView.tsx

@@ -17,7 +17,10 @@ limitations under the License.
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { Room, isE2EESupported } from "livekit-client";
+import {
+  Room,
+  isE2EESupported as isE2EESupportedBrowser,
+} from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { JoinRule } from "matrix-js-sdk/src/matrix";
@@ -26,7 +29,7 @@ import { useTranslation } from "react-i18next";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import { widget, ElementWidgetActions, JoinCallData } from "../widget";
-import { ErrorView, FullScreenView } from "../FullScreenView";
+import { FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
 import { MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
@@ -34,17 +37,16 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../media-utils";
 import { ActiveCall } from "./InCallView";
-import { MuteStates, useMuteStates } from "./MuteStates";
+import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
-import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { E2EEConfig } from "../livekit/useLiveKit";
 import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 
@@ -62,6 +64,7 @@ interface Props {
   skipLobby: boolean;
   hideHeader: boolean;
   rtcSession: MatrixRTCSession;
+  muteStates: MuteStates;
 }
 
 export const GroupCallView: FC<Props> = ({
@@ -72,13 +75,21 @@ export const GroupCallView: FC<Props> = ({
   skipLobby,
   hideHeader,
   rtcSession,
+  muteStates,
 }) => {
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
 
+  // This should use `useEffectEvent` (only available in experimental versions)
+  useEffect(() => {
+    if (memberships.length >= MUTE_PARTICIPANT_COUNT)
+      muteStates.audio.setEnabled?.(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     window.rtcSession = rtcSession;
-    return () => {
+    return (): void => {
       delete window.rtcSession;
     };
   }, [rtcSession]);
@@ -86,10 +97,8 @@ export const GroupCallView: FC<Props> = ({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(rtcSession.room);
   const roomAvatar = useRoomAvatar(rtcSession.room);
-  const e2eeSharedKey = useRoomSharedKey(rtcSession.room.roomId);
-  const { perParticipantE2EE } = useUrlParams();
-  const roomEncrypted =
-    useIsRoomE2EE(rtcSession.room.roomId) || perParticipantE2EE;
+  const { perParticipantE2EE, returnToLobby } = useUrlParams();
+  const e2eeSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
@@ -100,16 +109,16 @@ export const GroupCallView: FC<Props> = ({
       roomName,
       roomAlias: rtcSession.room.getCanonicalAlias(),
       roomAvatar,
-      roomEncrypted,
+      e2eeSystem,
     };
   }, [
+    client,
     displayName,
     avatarUrl,
-    rtcSession,
+    rtcSession.room,
     roomName,
     roomAvatar,
-    roomEncrypted,
-    client,
+    e2eeSystem,
   ]);
 
   // Count each member only once, regardless of how many devices they use
@@ -122,24 +131,10 @@ export const GroupCallView: FC<Props> = ({
   const latestDevices = useRef<MediaDevices>();
   latestDevices.current = deviceContext;
 
-  const muteStates = useMuteStates(memberships.length);
   const latestMuteStates = useRef<MuteStates>();
   latestMuteStates.current = muteStates;
 
-  const e2eeConfig = useMemo((): E2EEConfig => {
-    if (perParticipantE2EE) {
-      return { mode: E2eeType.PER_PARTICIPANT };
-    } else if (e2eeSharedKey) {
-      return { mode: E2eeType.SHARED_KEY, sharedKey: e2eeSharedKey };
-    } else {
-      return { mode: E2eeType.NONE };
-    }
-  }, [perParticipantE2EE, e2eeSharedKey]);
-
   useEffect(() => {
-    // this effect is only if we don't want to show the lobby (skipLobby = true)
-    if (!skipLobby) return;
-
     const defaultDeviceSetup = async (
       requestedDeviceData: JoinCallData,
     ): Promise<void> => {
@@ -189,24 +184,22 @@ export const GroupCallView: FC<Props> = ({
         }
       }
     };
-    if (widget && preload) {
-      // In preload mode, wait for a join action before entering
+
+    if (widget && preload && skipLobby) {
+      // In preload mode without lobby we wait for a join action before entering
       const onJoin = async (
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
         defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
-        enterRTCSession(rtcSession, perParticipantE2EE);
-        await Promise.all([
-          widget!.api.setAlwaysOnScreen(true),
-          widget!.api.transport.reply(ev.detail, {}),
-        ]);
+        await enterRTCSession(rtcSession, perParticipantE2EE);
+        await widget!.api.transport.reply(ev.detail, {});
       };
       widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
-      return () => {
+      return (): void => {
         widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
       };
-    } else {
-      // if we don't use preload and only skipLobby we enter the rtc session right away
+    } else if (widget && !preload && skipLobby) {
+      // No lobby and no preload: we enter the rtc session right away
       defaultDeviceSetup({ audioInput: null, videoInput: null });
       enterRTCSession(rtcSession, perParticipantE2EE);
     }
@@ -246,6 +239,9 @@ export const GroupCallView: FC<Props> = ({
 
   useEffect(() => {
     if (widget && isJoined) {
+      // set widget to sticky once joined.
+      widget!.api.setAlwaysOnScreen(true);
+
       const onHangup = async (
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
@@ -254,7 +250,7 @@ export const GroupCallView: FC<Props> = ({
         await leaveRTCSession(rtcSession);
       };
       widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
-      return () => {
+      return (): void => {
         widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
       };
     }
@@ -290,17 +286,8 @@ export const GroupCallView: FC<Props> = ({
 
   const { t } = useTranslation();
 
-  if (roomEncrypted && !perParticipantE2EE && !e2eeSharedKey) {
-    return (
-      <ErrorView
-        error={
-          new Error(
-            "No E2EE key provided: please make sure the URL you're using to join this call has been retrieved using the in-app button.",
-          )
-        }
-      />
-    );
-  } else if (!isE2EESupported() && roomEncrypted) {
+  if (!isE2EESupportedBrowser() && e2eeSystem.kind !== E2eeType.NONE) {
+    // If we have a encryption system but the browser does not support it.
     return (
       <FullScreenView>
         <Heading>{t("browser_media_e2ee_unsupported_heading")}</Heading>
@@ -319,6 +306,21 @@ export const GroupCallView: FC<Props> = ({
       onDismiss={onDismissInviteModal}
     />
   );
+  const lobbyView = (
+    <>
+      {shareModal}
+      <LobbyView
+        client={client}
+        matrixInfo={matrixInfo}
+        muteStates={muteStates}
+        onEnter={() => void enterRTCSession(rtcSession, perParticipantE2EE)}
+        confineToRoom={confineToRoom}
+        hideHeader={hideHeader}
+        participantCount={participantCount}
+        onShareClick={onShareClick}
+      />
+    </>
+  );
 
   if (isJoined) {
     return (
@@ -332,13 +334,15 @@ export const GroupCallView: FC<Props> = ({
           onLeave={onLeave}
           hideHeader={hideHeader}
           muteStates={muteStates}
-          e2eeConfig={e2eeConfig}
+          e2eeSystem={e2eeSystem}
           //otelGroupCallMembership={otelGroupCallMembership}
           onShareClick={onShareClick}
         />
       </>
     );
-  } else if (left) {
+  } else if (left && widget === null) {
+    // Left in SPA mode:
+
     // The call ended view is shown for two reasons: prompting guests to create
     // an account, and prompting users that have opted into analytics to provide
     // feedback. We don't show a feedback prompt to widget users however (at
@@ -366,23 +370,14 @@ export const GroupCallView: FC<Props> = ({
       // LobbyView again which would open capture devices again.
       return null;
     }
-  } else if (preload) {
+  } else if (left && widget !== null) {
+    // Left in widget mode:
+    if (!returnToLobby) {
+      return null;
+    }
+  } else if (preload || skipLobby) {
     return null;
-  } else {
-    return (
-      <>
-        {shareModal}
-        <LobbyView
-          client={client}
-          matrixInfo={matrixInfo}
-          muteStates={muteStates}
-          onEnter={(): void => enterRTCSession(rtcSession, perParticipantE2EE)}
-          confineToRoom={confineToRoom}
-          hideHeader={hideHeader}
-          participantCount={participantCount}
-          onShareClick={onShareClick}
-        />
-      </>
-    );
   }
+
+  return lobbyView;
 };

src/room/InCallView.module.css

@@ -85,13 +85,13 @@ limitations under the License.
 
 @media (min-height: 400px) {
   .footer {
-    padding-block: var(--cpd-space-10x);
+    padding-block: var(--cpd-space-8x);
   }
 }
 
 @media (min-height: 800px) {
   .footer {
-    padding-block: var(--cpd-space-15x);
+    padding-block: var(--cpd-space-10x);
   }
 }
 

src/room/InCallView.tsx

@@ -63,7 +63,7 @@ import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
+import { useLiveKit } from "../livekit/useLiveKit";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
 import { useWakeLock } from "../useWakeLock";
@@ -76,13 +76,15 @@ import { ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
 import { useCallViewModel } from "../state/CallViewModel";
 import { subscribe } from "../state/subscribe";
+import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { E2eeType } from "../e2ee/e2eeType";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 export interface ActiveCallProps
   extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
-  e2eeConfig: E2EEConfig;
+  e2eeSystem: EncryptionSystem;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
@@ -91,11 +93,11 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     props.rtcSession,
     props.muteStates,
     sfuConfig,
-    props.e2eeConfig,
+    props.e2eeSystem,
   );
 
   useEffect(() => {
-    return () => {
+    return (): void => {
       livekitRoom?.disconnect();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -218,7 +220,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
           onSpotlightLayout,
         );
 
-        return () => {
+        return (): void => {
           widget!.lazyActions.off(
             ElementWidgetActions.TileLayout,
             onTileLayout,
@@ -238,7 +240,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
     const vm = useCallViewModel(
       rtcSession.room,
       livekitRoom,
-      matrixInfo.roomEncrypted,
+      matrixInfo.e2eeSystem.kind !== E2eeType.NONE,
       connState,
     );
     const items = useStateObservable(vm.tiles);
@@ -252,7 +254,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
       () =>
         fullscreenItem ??
         (noControls
-          ? items.find((item) => item.isSpeaker) ?? items.at(0) ?? null
+          ? (items.find((item) => item.isSpeaker) ?? items.at(0) ?? null)
           : null),
       [fullscreenItem, noControls, items],
     );
@@ -432,7 +434,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
                 id={matrixInfo.roomId}
                 name={matrixInfo.roomName}
                 avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.roomEncrypted}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
                 participantCount={participantCount}
               />
             </LeftNav>

src/room/InviteModal.tsx

@@ -25,8 +25,8 @@ import useClipboard from "react-use-clipboard";
 import { Modal } from "../Modal";
 import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./InviteModal.module.css";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 import { Toast } from "../Toast";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface Props {
   room: Room;
@@ -36,11 +36,11 @@ interface Props {
 
 export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
   const { t } = useTranslation();
-  const roomSharedKey = useRoomSharedKey(room.roomId);
+  const e2eeSystem = useRoomEncryptionSystem(room.roomId);
+
   const url = useMemo(
-    () =>
-      getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined),
-    [room, roomSharedKey],
+    () => getAbsoluteRoomUrl(room.roomId, e2eeSystem, room.name),
+    [e2eeSystem, room.name, room.roomId],
   );
   const [, setCopied] = useClipboard(url);
   const [toastOpen, setToastOpen] = useState(false);

src/room/LobbyView.module.css

@@ -25,6 +25,18 @@ limitations under the License.
   height: 100%;
 }
 
+.wait {
+  color: var(--cpd-color-text-primary) !important;
+  background-color: var(--cpd-color-bg-canvas-default) !important;
+  /* relative colors are only supported on chromium based browsers */
+  background-color: rgb(
+    from var(--cpd-color-bg-canvas-default) r g b / 0.5
+  ) !important;
+}
+.wait > svg {
+  color: var(--cpd-color-theme-primary) !important;
+}
+
 @media (max-width: 500px) {
   .join {
     width: 100%;

src/room/LobbyView.tsx

@@ -21,8 +21,8 @@ import { Button, Link } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";
 
-import styles from "./LobbyView.module.css";
 import inCallStyles from "./InCallView.module.css";
+import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
@@ -36,16 +36,19 @@ import {
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
+import { E2eeType } from "../e2ee/e2eeType";
 
 interface Props {
   client: MatrixClient;
   matrixInfo: MatrixInfo;
   muteStates: MuteStates;
   onEnter: () => void;
+  enterLabel?: JSX.Element | string;
   confineToRoom: boolean;
   hideHeader: boolean;
-  participantCount: number;
+  participantCount: number | null;
   onShareClick: (() => void) | null;
+  waitingForInvite?: boolean;
 }
 
 export const LobbyView: FC<Props> = ({
@@ -53,10 +56,12 @@ export const LobbyView: FC<Props> = ({
   matrixInfo,
   muteStates,
   onEnter,
+  enterLabel,
   confineToRoom,
   hideHeader,
   participantCount,
   onShareClick,
+  waitingForInvite,
 }) => {
   const { t } = useTranslation();
   useLocationNavigation();
@@ -104,7 +109,7 @@ export const LobbyView: FC<Props> = ({
                 id={matrixInfo.roomId}
                 name={matrixInfo.roomName}
                 avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.roomEncrypted}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
                 participantCount={participantCount}
               />
             </LeftNav>
@@ -116,12 +121,16 @@ export const LobbyView: FC<Props> = ({
         <div className={styles.content}>
           <VideoPreview matrixInfo={matrixInfo} muteStates={muteStates}>
             <Button
-              className={styles.join}
-              size="lg"
-              onClick={onEnter}
+              className={classNames(styles.join, {
+                [styles.wait]: waitingForInvite,
+              })}
+              size={waitingForInvite ? "sm" : "lg"}
+              onClick={() => {
+                if (!waitingForInvite) onEnter();
+              }}
               data-testid="lobby_joinCall"
             >
-              {t("lobby.join_button")}
+              {enterLabel ?? t("lobby.join_button")}
             </Button>
           </VideoPreview>
           {!recentsButtonInFooter && recentsButton}

src/room/MuteStates.ts

@@ -20,10 +20,10 @@ import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 
 /**
- * If there already is this many participants in the call, we automatically mute
- * the user
+ * If there already are this many participants in the call, we automatically mute
+ * the user.
  */
-const MUTE_PARTICIPANT_COUNT = 8;
+export const MUTE_PARTICIPANT_COUNT = 8;
 
 interface DeviceAvailable {
   enabled: boolean;
@@ -51,26 +51,27 @@ function useMuteState(
   device: MediaDevice,
   enabledByDefault: () => boolean,
 ): MuteState {
-  const [enabled, setEnabled] = useReactiveState<boolean>(
-    (prev) => device.available.length > 0 && (prev ?? enabledByDefault()),
+  const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
+    (prev) =>
+      device.available.length > 0 ? (prev ?? enabledByDefault()) : undefined,
     [device],
   );
   return useMemo(
     () =>
       device.available.length === 0
         ? deviceUnavailable
-        : { enabled, setEnabled },
+        : {
+            enabled: enabled ?? false,
+            setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
+          },
     [device, enabled, setEnabled],
   );
 }
 
-export function useMuteStates(participantCount: number): MuteStates {
+export function useMuteStates(): MuteStates {
   const devices = useMediaDevices();
 
-  const audio = useMuteState(
-    devices.audioInput,
-    () => participantCount <= MUTE_PARTICIPANT_COUNT,
-  );
+  const audio = useMuteState(devices.audioInput, () => true);
   const video = useMuteState(devices.videoInput, () => true);
 
   return useMemo(() => ({ audio, video }), [audio, video]);

src/room/RoomAuthView.tsx

@@ -41,6 +41,8 @@ export const RoomAuthView: FC = () => {
     // @ts-ignore
     (e) => {
       e.preventDefault();
+      setLoading(true);
+
       const data = new FormData(e.target);
       const dataForDisplayName = data.get("displayName");
       const displayName =

src/room/RoomPage.tsx

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import { FC, useEffect, useState, useCallback, ReactNode } from "react";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { logger } from "matrix-js-sdk/src/logger";
+import { useTranslation } from "react-i18next";
+import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
@@ -29,6 +30,12 @@ import { useOptInAnalytics } from "../settings/useSetting";
 import { HomePage } from "../home/HomePage";
 import { platform } from "../Platform";
 import { AppSelectionModal } from "./AppSelectionModal";
+import { widget } from "../widget";
+import { GroupCallStatus } from "./useLoadGroupCall";
+import { LobbyView } from "./LobbyView";
+import { E2eeType } from "../e2ee/e2eeType";
+import { useProfile } from "../profile/useProfile";
+import { useMuteStates } from "./MuteStates";
 
 export const RoomPage: FC = () => {
   const {
@@ -39,7 +46,7 @@ export const RoomPage: FC = () => {
     displayName,
     skipLobby,
   } = useUrlParams();
-
+  const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
   const roomIdOrAlias = roomId ?? roomAlias;
@@ -47,22 +54,19 @@ export const RoomPage: FC = () => {
     logger.error("No room specified");
   }
 
-  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const { registerPasswordlessUser } = useRegisterPasswordlessUser();
   const [isRegistering, setIsRegistering] = useState(false);
 
-  useEffect(() => {
-    // During the beta, opt into analytics by default
-    if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
-  }, [optInAnalytics, setOptInAnalytics]);
-
   const { loading, authenticated, client, error, passwordlessUser } =
     useClientLegacy();
+  const { avatarUrl, displayName: userDisplayName } = useProfile(client);
+
+  const muteStates = useMuteStates();
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
     // a URL param, automatically register a passwordless user
-    if (!loading && !authenticated && displayName) {
+    if (!loading && !authenticated && displayName && !widget) {
       setIsRegistering(true);
       registerPasswordlessUser(displayName).finally(() => {
         setIsRegistering(false);
@@ -76,19 +80,87 @@ export const RoomPage: FC = () => {
     registerPasswordlessUser,
   ]);
 
+  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
+  useEffect(() => {
+    // During the beta, opt into analytics by default
+    if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
+  }, [optInAnalytics, setOptInAnalytics]);
+
   const groupCallView = useCallback(
-    (rtcSession: MatrixRTCSession) => (
-      <GroupCallView
-        client={client!}
-        rtcSession={rtcSession}
-        isPasswordlessUser={passwordlessUser}
-        confineToRoom={confineToRoom}
-        preload={preload}
-        skipLobby={skipLobby}
-        hideHeader={hideHeader}
-      />
-    ),
-    [client, passwordlessUser, confineToRoom, preload, hideHeader, skipLobby],
+    (groupCallState: GroupCallStatus): JSX.Element => {
+      switch (groupCallState.kind) {
+        case "loaded":
+          return (
+            <GroupCallView
+              client={client!}
+              rtcSession={groupCallState.rtcSession}
+              isPasswordlessUser={passwordlessUser}
+              confineToRoom={confineToRoom}
+              preload={preload}
+              skipLobby={skipLobby}
+              hideHeader={hideHeader}
+              muteStates={muteStates}
+            />
+          );
+        case "waitForInvite":
+        case "canKnock": {
+          const knock =
+            groupCallState.kind === "canKnock" ? groupCallState.knock : null;
+          const label: string | JSX.Element =
+            groupCallState.kind === "canKnock" ? (
+              t("lobby.ask_to_join")
+            ) : (
+              <>
+                {t("lobby.waiting_for_invite")}
+                <CheckIcon />
+              </>
+            );
+          return (
+            <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={hideHeader}
+              participantCount={null}
+              muteStates={muteStates}
+              onShareClick={null}
+            />
+          );
+        }
+        default:
+          return <> </>;
+      }
+    },
+    [
+      client,
+      passwordlessUser,
+      confineToRoom,
+      preload,
+      skipLobby,
+      hideHeader,
+      muteStates,
+      t,
+      userDisplayName,
+      avatarUrl,
+    ],
   );
 
   let content: ReactNode;
@@ -117,9 +189,9 @@ export const RoomPage: FC = () => {
     <>
       {content}
       {/* On Android and iOS, show a prompt to launch the mobile app. */}
-      {appPrompt && (platform === "android" || platform === "ios") && (
-        <AppSelectionModal roomId={roomId} />
-      )}
+      {appPrompt &&
+        (platform === "android" || platform === "ios") &&
+        roomId && <AppSelectionModal roomId={roomId} />}
     </>
   );
 };

src/room/VideoPreview.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useEffect, useMemo, useRef, FC, ReactNode } from "react";
+import { useEffect, useMemo, useRef, FC, ReactNode, useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { usePreviewTracks } from "@livekit/components-react";
@@ -32,6 +32,7 @@ import styles from "./VideoPreview.module.css";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { MuteStates } from "./MuteStates";
 import { useMediaQuery } from "../useMediaQuery";
+import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 export type MatrixInfo = {
   userId: string;
@@ -41,7 +42,7 @@ export type MatrixInfo = {
   roomName: string;
   roomAlias: string | null;
   roomAvatar: string | null;
-  roomEncrypted: boolean;
+  e2eeSystem: EncryptionSystem;
 };
 
 interface Props {
@@ -67,8 +68,8 @@ export const VideoPreview: FC<Props> = ({
     deviceId: devices.audioInput.selectedId,
   };
 
-  const tracks = usePreviewTracks(
-    {
+  const localTrackOptions = useMemo(
+    () => ({
       // The only reason we request audio here is to get the audio permission
       // request over with at the same time. But changing the audio settings
       // shouldn't cause this hook to recreate the track, which is why we
@@ -79,13 +80,21 @@ export const VideoPreview: FC<Props> = ({
       video: muteStates.video.enabled && {
         deviceId: devices.videoInput.selectedId,
       },
-    },
-    (error) => {
+    }),
+    [devices.videoInput.selectedId, muteStates.video.enabled],
+  );
+
+  const onError = useCallback(
+    (error: Error) => {
       logger.error("Error while creating preview Tracks:", error);
       muteStates.audio.setEnabled?.(false);
       muteStates.video.setEnabled?.(false);
     },
+    [muteStates.audio, muteStates.video],
   );
+
+  const tracks = usePreviewTracks(localTrackOptions, onError);
+
   const videoTrack = useMemo(
     () =>
       tracks?.find((t) => t.kind === Track.Kind.Video) as
@@ -101,7 +110,7 @@ export const VideoPreview: FC<Props> = ({
     if (videoEl.current) {
       videoTrack?.attach(videoEl.current);
     }
-    return () => {
+    return (): void => {
       videoTrack?.detach();
     };
   }, [videoTrack]);
@@ -114,14 +123,7 @@ export const VideoPreview: FC<Props> = ({
         playsInline
         // There's no reason for this to be focusable
         tabIndex={-1}
-        // React supports the disablePictureInPicture attribute, but Firefox
-        // only recognizes a value of "true", whereas React sets it to the empty
-        // string. So we need to bypass React and set it specifically to "true".
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1865748
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        // eslint-disable-next-line react/no-unknown-property
-        disablepictureinpicture="true"
+        disablePictureInPicture
       />
       {!muteStates.video.enabled && (
         <div className={styles.avatarContainer}>

src/room/useActiveFocus.ts

@@ -21,41 +21,34 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { deepCompare } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
-
-import { LivekitFocus } from "../livekit/LivekitFocus";
-
-function getActiveFocus(
-  rtcSession: MatrixRTCSession,
-): LivekitFocus | undefined {
-  const oldestMembership = rtcSession.getOldestMembership();
-  const focus = oldestMembership?.getActiveFoci()[0] as LivekitFocus;
-
-  if (focus) {
-    logger.info(
-      `Got active focus for call from ${oldestMembership?.sender}/${oldestMembership?.deviceId}`,
-      focus,
-    );
-  }
-
-  return focus;
-}
+import {
+  LivekitFocus,
+  isLivekitFocus,
+} from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
 /**
  * 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 useActiveFocus(
+export function useActiveLivekitFocus(
   rtcSession: MatrixRTCSession,
 ): LivekitFocus | undefined {
-  const [activeFocus, setActiveFocus] = useState(() =>
-    getActiveFocus(rtcSession),
-  );
+  const [activeFocus, setActiveFocus] = useState(() => {
+    const f = rtcSession.getActiveFocus();
+    // Only handle foci with type="livekit" for now.
+    return !!f && isLivekitFocus(f) ? f : undefined;
+  });
 
   const onMembershipsChanged = useCallback(() => {
-    const newActiveFocus = getActiveFocus(rtcSession);
-
+    const newActiveFocus = rtcSession.getActiveFocus();
+    if (!!newActiveFocus && !isLivekitFocus(newActiveFocus)) return;
     if (!deepCompare(activeFocus, newActiveFocus)) {
+      const oldestMembership = rtcSession.getOldestMembership();
+      logger.warn(
+        `Got new active focus from membership: ${oldestMembership?.sender}/${oldestMembership?.deviceId}.
+        Updating focus (focus switch) from ${activeFocus} to ${newActiveFocus}`,
+      );
       setActiveFocus(newActiveFocus);
     }
   }, [activeFocus, rtcSession]);
@@ -66,7 +59,7 @@ export function useActiveFocus(
       onMembershipsChanged,
     );
 
-    return () => {
+    return (): void => {
       rtcSession.off(
         MatrixRTCSessionEvent.MembershipsChanged,
         onMembershipsChanged,

src/room/useFullscreen.ts

@@ -65,7 +65,7 @@ export function useFullscreen<T>(items: TileDescriptor<T>[]): {
       (prevItem) =>
         prevItem == null
           ? null
-          : items.find((i) => i.id === prevItem.id) ?? null,
+          : (items.find((i) => i.id === prevItem.id) ?? null),
       [items],
     );
 
@@ -79,7 +79,7 @@ export function useFullscreen<T>(items: TileDescriptor<T>[]): {
     (itemId: string) => {
       setFullscreenItem(
         latestFullscreenItem.current === null
-          ? latestItems.current.find((i) => i.id === itemId) ?? null
+          ? (latestItems.current.find((i) => i.id === itemId) ?? null)
           : null,
       );
     },

src/room/useLoadGroupCall.ts

@@ -14,15 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import {
+  ClientEvent,
+  MatrixClient,
+  RoomSummary,
+} from "matrix-js-sdk/src/client";
 import { SyncState } from "matrix-js-sdk/src/sync";
-import { useTranslation } from "react-i18next";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { RoomEvent, Room } from "matrix-js-sdk/src/models/room";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+import { JoinRule } from "matrix-js-sdk";
+import { useTranslation } from "react-i18next";
 
-import type { Room } from "matrix-js-sdk/src/models/room";
-import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { widget } from "../widget";
 
 export type GroupCallLoaded = {
   kind: "loaded";
@@ -38,14 +45,48 @@ export type GroupCallLoading = {
   kind: "loading";
 };
 
+export type GroupCallWaitForInvite = {
+  kind: "waitForInvite";
+  roomSummary: RoomSummary;
+};
+
+export type GroupCallCanKnock = {
+  kind: "canKnock";
+  roomSummary: RoomSummary;
+  knock: () => void;
+};
+
 export type GroupCallStatus =
   | GroupCallLoaded
   | GroupCallLoadFailed
-  | GroupCallLoading;
+  | GroupCallLoading
+  | GroupCallWaitForInvite
+  | GroupCallCanKnock;
 
-export interface GroupCallLoadState {
-  error?: Error;
-  groupCall?: GroupCall;
+export class CallTerminatedMessage extends Error {
+  /**
+   * @param messageBody The message explaining the kind of termination (kick, ban, knock reject, etc.) (translated)
+   */
+  public messageBody: string;
+  /**
+   * @param reason The user provided reason for the termination (kick/ban)
+   */
+  public reason?: string;
+  /**
+   *
+   * @param messageTitle The title of the call ended screen message (translated)
+   * @param messageBody The message explaining the kind of termination (kick, ban, knock reject, etc.) (translated)
+   * @param reason The user provided reason for the termination (kick/ban)
+   */
+  public constructor(
+    messageTitle: string,
+    messageBody: string,
+    reason?: string,
+  ) {
+    super(messageTitle);
+    this.messageBody = messageBody;
+    this.reason = reason;
+  }
 }
 
 export const useLoadGroupCall = (
@@ -53,39 +94,190 @@ export const useLoadGroupCall = (
   roomIdOrAlias: string,
   viaServers: string[],
 ): GroupCallStatus => {
-  const { t } = useTranslation();
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
+  const activeRoom = useRef<Room>();
+  const { t } = useTranslation();
+
+  const bannedError = useCallback(
+    (): CallTerminatedMessage =>
+      new CallTerminatedMessage(
+        t("group_call_loader.banned_heading"),
+        t("group_call_loader.banned_body"),
+        leaveReason(),
+      ),
+    [t],
+  );
+  const knockRejectError = useCallback(
+    (): CallTerminatedMessage =>
+      new CallTerminatedMessage(
+        t("group_call_loader.knock_reject_heading"),
+        t("group_call_loader.knock_reject_body"),
+        leaveReason(),
+      ),
+    [t],
+  );
+  const removeNoticeError = useCallback(
+    (): CallTerminatedMessage =>
+      new CallTerminatedMessage(
+        t("group_call_loader.call_ended_heading"),
+        t("group_call_loader.call_ended_body"),
+        leaveReason(),
+      ),
+    [t],
+  );
+
+  const leaveReason = (): string =>
+    activeRoom.current?.currentState
+      .getStateEvents(EventType.RoomMember, activeRoom.current?.myUserId)
+      ?.getContent().reason;
 
   useEffect(() => {
+    const getRoomByAlias = async (alias: string): Promise<Room> => {
+      // We lowercase the localpart when we create the room, so we must lowercase
+      // it here too (we just do the whole alias). We can't do the same to room IDs
+      // though.
+      // Also, we explicitly look up the room alias here. We previously just tried to
+      // join anyway but the js-sdk recreates the room if you pass the alias for a
+      // room you're already joined to (which it probably ought not to).
+      let room: Room | null = null;
+      const lookupResult = await client.getRoomIdForAlias(alias.toLowerCase());
+      logger.info(`${alias} resolved to ${lookupResult.room_id}`);
+      room = client.getRoom(lookupResult.room_id);
+      if (!room) {
+        logger.info(`Room ${lookupResult.room_id} not found, joining.`);
+        room = await client.joinRoom(lookupResult.room_id, {
+          viaServers: lookupResult.servers,
+        });
+      } else {
+        logger.info(`Already in room ${lookupResult.room_id}, not rejoining.`);
+      }
+      return room;
+    };
+
+    const getRoomByKnocking = async (
+      roomId: string,
+      viaServers: string[],
+      onKnockSent: () => void,
+    ): Promise<Room> => {
+      let joinedRoom: Room | null = null;
+      await client.knockRoom(roomId, { viaServers });
+      onKnockSent();
+      const invitePromise = new Promise<void>((resolve, reject) => {
+        client.on(
+          RoomEvent.MyMembership,
+          async (room, membership, prevMembership) => {
+            if (roomId !== room.roomId) return;
+            activeRoom.current = room;
+            if (
+              membership === KnownMembership.Invite &&
+              prevMembership === KnownMembership.Knock
+            ) {
+              await client.joinRoom(room.roomId, { viaServers });
+              joinedRoom = room;
+              logger.log("Auto-joined %s", room.roomId);
+              resolve();
+            }
+            if (membership === KnownMembership.Ban) reject(bannedError());
+            if (membership === KnownMembership.Leave)
+              reject(knockRejectError());
+          },
+        );
+      });
+      await invitePromise;
+      if (!joinedRoom) {
+        throw new Error("Failed to join room after knocking.");
+      }
+      return joinedRoom;
+    };
+
     const fetchOrCreateRoom = async (): Promise<Room> => {
       let room: Room | null = null;
       if (roomIdOrAlias[0] === "#") {
-        // We lowercase the localpart when we create the room, so we must lowercase
-        // it here too (we just do the whole alias). We can't do the same to room IDs
-        // though.
-        // Also, we explicitly look up the room alias here. We previously just tried to
-        // join anyway but the js-sdk recreates the room if you pass the alias for a
-        // room you're already joined to (which it probably ought not to).
-        const lookupResult = await client.getRoomIdForAlias(
-          roomIdOrAlias.toLowerCase(),
-        );
-        logger.info(`${roomIdOrAlias} resolved to ${lookupResult.room_id}`);
-        room = client.getRoom(lookupResult.room_id);
-        if (!room) {
-          logger.info(`Room ${lookupResult.room_id} not found, joining.`);
-          room = await client.joinRoom(lookupResult.room_id, {
-            viaServers: lookupResult.servers,
+        const alias = roomIdOrAlias;
+        // The call uses a room alias
+        room = await getRoomByAlias(alias);
+        activeRoom.current = room;
+      } else {
+        // The call uses a room_id
+        const roomId = roomIdOrAlias;
+
+        // first try if the room already exists
+        //  - in widget mode
+        //  - in SPA mode if the user already joined the room
+        room = client.getRoom(roomId);
+        activeRoom.current = room ?? undefined;
+        const membership = room?.getMyMembership();
+        if (membership === KnownMembership.Join) {
+          // room already joined so we are done here already.
+          return room!;
+        }
+        if (widget)
+          // in widget mode we never should reach this point. (getRoom should return the room.)
+          throw new Error(
+            "Room not found. The widget-api did not pass over the relevant room events/information.",
+          );
+
+        if (membership === KnownMembership.Ban) {
+          throw bannedError();
+        } else if (membership === KnownMembership.Invite) {
+          room = await client.joinRoom(roomId, {
+            viaServers,
           });
         } else {
-          logger.info(
-            `Already in room ${lookupResult.room_id}, not rejoining.`,
-          );
+          // If the room does not exist we first search for it with viaServers
+          let roomSummary: RoomSummary | undefined = undefined;
+          try {
+            roomSummary = await client.getRoomSummary(roomId, viaServers);
+          } catch (error) {
+            // If the room summary endpoint is not supported we let it be undefined and treat this case like
+            // `JoinRule.Public`.
+            // This is how the logic was done before: "we expect any room id passed to EC
+            // to be for a public call" Which is definitely not ideal but worth a try if fetching
+            // the summary crashes.
+            logger.warn(
+              `Could not load room summary to decide whether we want to join or knock.
+              EC will fallback to join as if this would be a public room.
+              Reach out to your homeserver admin to ask them about supporting the \`/summary\` endpoint (im.nheko.summary):`,
+              error,
+            );
+          }
+          if (
+            roomSummary === undefined ||
+            roomSummary.join_rule === JoinRule.Public
+          ) {
+            room = await client.joinRoom(roomId, {
+              viaServers,
+            });
+          } else if (roomSummary.join_rule === JoinRule.Knock) {
+            // bind room summary in this scope so we have it stored in a binding of type `RoomSummary`
+            // instead of `RoomSummary | undefined`. Because we use it in a promise the linter does not accept
+            // the type check from the if condition above.
+            const _roomSummary = roomSummary;
+            let knock: () => void = () => {};
+            const userPressedAskToJoinPromise: Promise<void> = new Promise(
+              (resolve) => {
+                if (_roomSummary.membership !== KnownMembership.Knock) {
+                  knock = resolve;
+                } else {
+                  // resolve immediately if the user already knocked
+                  resolve();
+                }
+              },
+            );
+            setState({ kind: "canKnock", roomSummary: _roomSummary, knock });
+            await userPressedAskToJoinPromise;
+            room = await getRoomByKnocking(
+              roomSummary.room_id,
+              viaServers,
+              () =>
+                setState({ kind: "waitForInvite", roomSummary: _roomSummary }),
+            );
+          } else {
+            throw new Error(
+              `Room ${roomSummary.room_id} is not joinable. This likely means, that the conference owner has changed the room settings to private.`,
+            );
+          }
         }
-      } else {
-        // room IDs we just try to join by their ID, which will not work in the
-        // general case without providing some servers to join via. We could provide
-        // our own server, but in practice that is implicit.
-        room = await client.joinRoom(roomIdOrAlias);
       }
 
       logger.info(
@@ -98,6 +290,7 @@ export const useLoadGroupCall = (
 
     const fetchOrCreateGroupCall = async (): Promise<MatrixRTCSession> => {
       const room = await fetchOrCreateRoom();
+      activeRoom.current = room;
       logger.debug(`Fetched / joined room ${roomIdOrAlias}`);
 
       const rtcSession = client.matrixRTC.getRoomSession(room);
@@ -122,11 +315,33 @@ export const useLoadGroupCall = (
       }
     };
 
-    waitForClientSyncing()
-      .then(fetchOrCreateGroupCall)
-      .then((rtcSession) => setState({ kind: "loaded", rtcSession }))
-      .catch((error) => setState({ kind: "failed", error }));
-  }, [client, roomIdOrAlias, viaServers, t]);
+    const observeMyMembership = async (): Promise<void> => {
+      await new Promise((_, reject) => {
+        client.on(RoomEvent.MyMembership, async (_, membership) => {
+          if (membership === KnownMembership.Leave) reject(removeNoticeError());
+          if (membership === KnownMembership.Ban) reject(bannedError());
+        });
+      });
+    };
+
+    if (state.kind === "loading") {
+      logger.log("Start loading group call");
+      waitForClientSyncing()
+        .then(fetchOrCreateGroupCall)
+        .then((rtcSession) => setState({ kind: "loaded", rtcSession }))
+        .then(observeMyMembership)
+        .catch((error) => setState({ kind: "failed", error }));
+    }
+  }, [
+    bannedError,
+    client,
+    knockRejectError,
+    removeNoticeError,
+    roomIdOrAlias,
+    state,
+    t,
+    viaServers,
+  ]);
 
   return state;
 };

src/room/usePageUnload.ts

@@ -50,7 +50,7 @@ export function usePageUnload(callback: () => void): void {
     // @ts-ignore
     window.addEventListener("beforeunload", onBeforeUnload);
 
-    return () => {
+    return (): void => {
       window.removeEventListener("pagehide", onBeforeUnload);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore

src/rtcSessionHelpers.ts

@@ -15,29 +15,90 @@ limitations under the License.
 */
 
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+  LivekitFocus,
+  LivekitFocusActive,
+  isLivekitFocus,
+  isLivekitFocusConfig,
+} from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
-import { LivekitFocus } from "./livekit/LivekitFocus";
 import { Config } from "./config/Config";
 import { ElementWidgetActions, WidgetHelpers, widget } from "./widget";
 
-function makeFocus(livekitAlias: string): LivekitFocus {
-  const urlFromConf = Config.get().livekit!.livekit_service_url;
-  if (!urlFromConf) {
-    throw new Error("No livekit_service_url is configured!");
-  }
+const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
 
+export function makeActiveFocus(): LivekitFocusActive {
   return {
     type: "livekit",
-    livekit_service_url: urlFromConf,
-    livekit_alias: livekitAlias,
+    focus_selection: "oldest_membership",
   };
 }
 
-export function enterRTCSession(
+async function makePreferredLivekitFoci(
+  rtcSession: MatrixRTCSession,
+  livekitAlias: string,
+): Promise<LivekitFocus[]> {
+  logger.log("Start building foci_preferred list: ", rtcSession.room.roomId);
+
+  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);
+  }
+
+  // Prioritize the client well known over the configured sfu.
+  const wellKnownFoci =
+    rtcSession.room.client.getClientWellKnown()?.[FOCI_WK_KEY];
+  if (Array.isArray(wellKnownFoci)) {
+    preferredFoci.push(
+      ...wellKnownFoci
+        .filter((f) => !!f)
+        .filter(isLivekitFocusConfig)
+        .map((wellKnownFocus) => {
+          logger.log("Adding livekit focus from well known: ", wellKnownFocus);
+          return { ...wellKnownFocus, livekit_alias: livekitAlias };
+        }),
+    );
+  }
+
+  const urlFromConf = Config.get().livekit?.livekit_service_url;
+  if (urlFromConf) {
+    const focusFormConf: LivekitFocus = {
+      type: "livekit",
+      livekit_service_url: urlFromConf,
+      livekit_alias: livekitAlias,
+    };
+    logger.log("Adding livekit focus from config: ", focusFormConf);
+    preferredFoci.push(focusFormConf);
+  }
+
+  if (preferredFoci.length === 0)
+    throw new Error(
+      `No livekit_service_url is configured so we could not create a focus.
+    Currently we skip computing a focus based on other users in the room.`,
+    );
+
+  return preferredFoci;
+
+  // TODO: we want to do something like this:
+  //
+  // const focusOtherMembers = await focusFromOtherMembers(
+  //   rtcSession,
+  //   livekitAlias,
+  // );
+  // if (focusOtherMembers) preferredFoci.push(focusOtherMembers);
+}
+
+export async function enterRTCSession(
   rtcSession: MatrixRTCSession,
   encryptMedia: boolean,
-): void {
+): Promise<void> {
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -47,8 +108,18 @@ export function enterRTCSession(
 
   // right now we assume everything is a room-scoped call
   const livekitAlias = rtcSession.room.roomId;
-
-  rtcSession.joinRoomSession([makeFocus(livekitAlias)], encryptMedia);
+  const useDeviceSessionMemberEvents =
+    Config.get().features?.feature_use_device_session_member_events;
+  rtcSession.joinRoomSession(
+    await makePreferredLivekitFoci(rtcSession, livekitAlias),
+    makeActiveFocus(),
+    {
+      manageMediaKeys: encryptMedia,
+      ...(useDeviceSessionMemberEvents !== undefined && {
+        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
+      }),
+    },
+  );
 }
 
 const widgetPostHangupProcedure = async (

src/settings/ProfileSettingsTab.tsx

@@ -47,18 +47,18 @@ export const ProfileSettingsTab: FC<Props> = ({ client }) => {
   useEffect(() => {
     const form = formRef.current!;
     // Auto-save when the user dismisses this component
-    return () => {
+    return (): void => {
       if (formChanged.current) {
         const data = new FormData(form);
         const displayNameDataEntry = data.get("displayName");
         const avatar = data.get("avatar");
 
         const avatarSize =
-          typeof avatar == "string" ? avatar.length : avatar?.size ?? 0;
+          typeof avatar == "string" ? avatar.length : (avatar?.size ?? 0);
         const displayName =
           typeof displayNameDataEntry == "string"
             ? displayNameDataEntry
-            : displayNameDataEntry?.name ?? null;
+            : (displayNameDataEntry?.name ?? null);
 
         if (!displayName) {
           return;

src/settings/submit-rageshake.ts

@@ -298,13 +298,13 @@ export function useRageshakeRequest(): (
 
   const sendRageshakeRequest = useCallback(
     (roomId: string, rageshakeRequestId: string) => {
+      // @ts-expect-error - org.matrix.rageshake_request is not part of `keyof TimelineEvents` but it is okay to sent a custom event.
       client!.sendEvent(roomId, "org.matrix.rageshake_request", {
         request_id: rageshakeRequestId,
       });
     },
     [client],
   );
-
   return sendRageshakeRequest;
 }
 
@@ -334,7 +334,7 @@ export function useRageshakeRequestModal(
 
     client.on(ClientEvent.Event, onEvent);
 
-    return () => {
+    return (): void => {
       client.removeListener(ClientEvent.Event, onEvent);
     };
   }, [setOpen, roomId, client]);

src/state/CallViewModel.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,25 +16,41 @@ limitations under the License.
 
 import {
   connectedParticipantsObserver,
+  observeParticipantEvents,
   observeParticipantMedia,
 } from "@livekit/components-core";
-import { Room as LivekitRoom, RemoteParticipant } from "livekit-client";
+import {
+  Room as LivekitRoom,
+  LocalParticipant,
+  ParticipantEvent,
+  RemoteParticipant,
+} from "livekit-client";
 import { Room as MatrixRoom, RoomMember } from "matrix-js-sdk/src/matrix";
 import { useEffect, useRef } from "react";
 import {
+  BehaviorSubject,
   EMPTY,
   Observable,
+  audit,
   combineLatest,
   concat,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
   mergeAll,
   of,
   sample,
   scan,
+  shareReplay,
   startWith,
-  takeUntil,
+  switchAll,
+  switchMap,
+  throttleTime,
+  timer,
   zip,
 } from "rxjs";
-import { state } from "@react-rxjs/core";
+import { StateObservable, state } from "@react-rxjs/core";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { ViewModel } from "./ViewModel";
@@ -45,14 +61,21 @@ import {
 } from "../livekit/useECConnectionState";
 import { usePrevious } from "../usePrevious";
 import {
-  TileViewModel,
-  UserMediaTileViewModel,
-  ScreenShareTileViewModel,
-} from "./TileViewModel";
+  MediaViewModel,
+  UserMediaViewModel,
+  ScreenShareViewModel,
+} from "./MediaViewModel";
 import { finalizeValue } from "../observable-utils";
+import { ObservableScope } from "./ObservableScope";
+
+// How long we wait after a focus switch before showing the real participant
+// list again
+const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 
 // Represents something that should get a tile on the layout,
 // ie. a user's video feed or a screen share feed.
+// TODO: This exposes too much information to the view layer, let's keep this
+// information internal to the view model and switch to using Tile<T> instead
 export interface TileDescriptor<T> {
   id: string;
   focused: boolean;
@@ -65,9 +88,123 @@ export interface TileDescriptor<T> {
   data: T;
 }
 
-// How long we wait after a focus switch before showing the real participant
-// list again
-const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
+export interface GridLayout {
+  type: "grid";
+  spotlight?: MediaViewModel[];
+  grid: UserMediaViewModel[];
+}
+
+export interface SpotlightLayout {
+  type: "spotlight";
+  spotlight: MediaViewModel[];
+  grid: UserMediaViewModel[];
+}
+
+export interface FullScreenLayout {
+  type: "full screen";
+  spotlight: MediaViewModel[];
+  pip?: UserMediaViewModel;
+}
+
+export interface PipLayout {
+  type: "pip";
+  spotlight: MediaViewModel[];
+}
+
+/**
+ * A layout defining the media tiles present on screen and their visual
+ * arrangement.
+ */
+export type Layout =
+  | GridLayout
+  | SpotlightLayout
+  | FullScreenLayout
+  | PipLayout;
+
+export type GridMode = "grid" | "spotlight";
+
+export type WindowMode = "normal" | "full screen" | "pip";
+
+/**
+ * Sorting bins defining the order in which media tiles appear in the layout.
+ */
+enum SortingBin {
+  SelfStart,
+  Presenters,
+  Speakers,
+  VideoAndAudio,
+  Video,
+  Audio,
+  NoMedia,
+  SelfEnd,
+}
+
+class UserMedia {
+  private readonly scope = new ObservableScope();
+  public readonly vm: UserMediaViewModel;
+  public readonly speaker: Observable<boolean>;
+  public readonly presenter: Observable<boolean>;
+
+  public constructor(
+    public readonly id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    this.vm = new UserMediaViewModel(id, member, participant, callEncrypted);
+
+    this.speaker = this.vm.speaking.pipeState(
+      // Require 1 s of continuous speaking to become a speaker, and 10 s of
+      // continuous silence to stop being considered a speaker
+      audit((s) =>
+        merge(
+          timer(s ? 1000 : 10000),
+          // If the speaking flag resets to its original value during this time,
+          // end the silencing window to stick with that original value
+          this.vm.speaking.pipe(filter((s1) => s1 !== s)),
+        ),
+      ),
+      startWith(false),
+      distinctUntilChanged(),
+      this.scope.bind(),
+      // Make this Observable hot so that the timers don't reset when you
+      // resubscribe
+      shareReplay(1),
+    );
+
+    this.presenter = observeParticipantEvents(
+      participant,
+      ParticipantEvent.TrackPublished,
+      ParticipantEvent.TrackUnpublished,
+      ParticipantEvent.LocalTrackPublished,
+      ParticipantEvent.LocalTrackUnpublished,
+    ).pipe(map((p) => p.isScreenShareEnabled));
+  }
+
+  public destroy(): void {
+    this.scope.end();
+    this.vm.destroy();
+  }
+}
+
+class ScreenShare {
+  public readonly vm: ScreenShareViewModel;
+
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    this.vm = new ScreenShareViewModel(id, member, participant, callEncrypted);
+  }
+
+  public destroy(): void {
+    this.vm.destroy();
+  }
+}
+
+type MediaItem = UserMedia | ScreenShare;
 
 function findMatrixMember(
   room: MatrixRoom,
@@ -98,160 +235,346 @@ export class CallViewModel extends ViewModel {
 
   // Lists of participants to "hold" on display, even if LiveKit claims that
   // they've left
-  private readonly remoteParticipantHolds = zip(
-    this.connectionState,
-    this.rawRemoteParticipants.pipe(sample(this.connectionState)),
-    (s, ps) => {
-      // Whenever we switch focuses, we should retain all the previous
-      // participants for at least POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS ms to
-      // give their clients time to switch over and avoid jarring layout shifts
-      if (s === ECAddonConnectionState.ECSwitchingFocus) {
-        return concat(
-          // Hold these participants
-          of({ hold: ps }),
-          // Wait for time to pass and the connection state to have changed
-          Promise.all([
-            new Promise<void>((resolve) =>
-              setTimeout(resolve, POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
-            ),
-            new Promise<void>((resolve) => {
-              const subscription = this.connectionState
-                .pipe(takeUntil(this.destroyed))
-                .subscribe((s) => {
-                  if (s !== ECAddonConnectionState.ECSwitchingFocus) {
-                    resolve();
-                    subscription.unsubscribe();
-                  }
-                });
-            }),
-            // Then unhold them
-          ]).then(() => Promise.resolve({ unhold: ps })),
-        );
-      } else {
-        return EMPTY;
-      }
-    },
-  ).pipe(
-    mergeAll(),
-    // Aggregate the hold instructions into a single list showing which
-    // participants are being held
-    scan(
-      (holds, instruction) =>
-        "hold" in instruction
-          ? [instruction.hold, ...holds]
-          : holds.filter((h) => h !== instruction.unhold),
-      [] as RemoteParticipant[][],
+  private readonly remoteParticipantHolds: Observable<RemoteParticipant[][]> =
+    zip(
+      this.connectionState,
+      this.rawRemoteParticipants.pipe(sample(this.connectionState)),
+      (s, ps) => {
+        // Whenever we switch focuses, we should retain all the previous
+        // participants for at least POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS ms to
+        // give their clients time to switch over and avoid jarring layout shifts
+        if (s === ECAddonConnectionState.ECSwitchingFocus) {
+          return concat(
+            // Hold these participants
+            of({ hold: ps }),
+            // Wait for time to pass and the connection state to have changed
+            Promise.all([
+              new Promise<void>((resolve) =>
+                setTimeout(resolve, POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
+              ),
+              new Promise<void>((resolve) => {
+                const subscription = this.connectionState
+                  .pipe(this.scope.bind())
+                  .subscribe((s) => {
+                    if (s !== ECAddonConnectionState.ECSwitchingFocus) {
+                      resolve();
+                      subscription.unsubscribe();
+                    }
+                  });
+              }),
+              // Then unhold them
+            ]).then(() => Promise.resolve({ unhold: ps })),
+          );
+        } else {
+          return EMPTY;
+        }
+      },
+    ).pipe(
+      mergeAll(),
+      // Aggregate the hold instructions into a single list showing which
+      // participants are being held
+      scan(
+        (holds, instruction) =>
+          "hold" in instruction
+            ? [instruction.hold, ...holds]
+            : holds.filter((h) => h !== instruction.unhold),
+        [] as RemoteParticipant[][],
+      ),
+      startWith([]),
+    );
+
+  private readonly remoteParticipants: Observable<RemoteParticipant[]> =
+    combineLatest(
+      [this.rawRemoteParticipants, this.remoteParticipantHolds],
+      (raw, holds) => {
+        const result = [...raw];
+        const resultIds = new Set(result.map((p) => p.identity));
+
+        // Incorporate the held participants into the list
+        for (const hold of holds) {
+          for (const p of hold) {
+            if (!resultIds.has(p.identity)) {
+              result.push(p);
+              resultIds.add(p.identity);
+            }
+          }
+        }
+
+        return result;
+      },
+    );
+
+  private readonly mediaItems: StateObservable<MediaItem[]> = state(
+    combineLatest([
+      this.remoteParticipants,
+      observeParticipantMedia(this.livekitRoom.localParticipant),
+    ]).pipe(
+      scan(
+        (
+          prevItems,
+          [remoteParticipants, { participant: localParticipant }],
+        ) => {
+          let allGhosts = true;
+
+          const newItems = new Map(
+            function* (this: CallViewModel): Iterable<[string, MediaItem]> {
+              for (const p of [localParticipant, ...remoteParticipants]) {
+                const member = findMatrixMember(this.matrixRoom, p.identity);
+                allGhosts &&= member === undefined;
+                // We always start with a local participant with the empty string as
+                // their ID before we're connected, this is fine and we'll be in
+                // "all ghosts" mode.
+                if (p.identity !== "" && member === undefined) {
+                  logger.warn(
+                    `Ruh, roh! No matrix member found for SFU participant '${p.identity}': creating g-g-g-ghost!`,
+                  );
+                }
+
+                const userMediaId = p.identity;
+                yield [
+                  userMediaId,
+                  prevItems.get(userMediaId) ??
+                    new UserMedia(userMediaId, member, p, this.encrypted),
+                ];
+
+                if (p.isScreenShareEnabled) {
+                  const screenShareId = `${userMediaId}:screen-share`;
+                  yield [
+                    screenShareId,
+                    prevItems.get(screenShareId) ??
+                      new ScreenShare(screenShareId, member, p, this.encrypted),
+                  ];
+                }
+              }
+            }.bind(this)(),
+          );
+
+          for (const [id, t] of prevItems) if (!newItems.has(id)) t.destroy();
+
+          // If every item is a ghost, that probably means we're still connecting
+          // and shouldn't bother showing anything yet
+          return allGhosts ? new Map() : newItems;
+        },
+        new Map<string, MediaItem>(),
+      ),
+      map((ms) => [...ms.values()]),
+      finalizeValue((ts) => {
+        for (const t of ts) t.destroy();
+      }),
     ),
-    startWith([]),
   );
 
-  private readonly remoteParticipants = combineLatest(
-    [this.rawRemoteParticipants, this.remoteParticipantHolds],
-    (raw, holds) => {
-      const result = [...raw];
-      const resultIds = new Set(result.map((p) => p.identity));
+  private readonly userMedia: Observable<UserMedia[]> = this.mediaItems.pipe(
+    map((ms) => ms.filter((m): m is UserMedia => m instanceof UserMedia)),
+  );
 
-      // Incorporate the held participants into the list
-      for (const hold of holds) {
-        for (const p of hold) {
-          if (!resultIds.has(p.identity)) {
-            result.push(p);
-            resultIds.add(p.identity);
+  private readonly screenShares: Observable<ScreenShare[]> =
+    this.mediaItems.pipe(
+      map((ms) => ms.filter((m): m is ScreenShare => m instanceof ScreenShare)),
+    );
+
+  private readonly spotlightSpeaker: Observable<UserMedia | null> =
+    this.userMedia.pipe(
+      switchMap((ms) =>
+        ms.length === 0
+          ? of([])
+          : combineLatest(
+              ms.map((m) => m.vm.speaking.pipe(map((s) => [m, s] as const))),
+            ),
+      ),
+      scan<(readonly [UserMedia, boolean])[], UserMedia | null, null>(
+        (prev, ms) =>
+          // Decide who to spotlight:
+          // If the previous speaker is still speaking, stick with them rather
+          // than switching eagerly to someone else
+          ms.find(([m, s]) => m === prev && s)?.[0] ??
+          // Otherwise, select anyone who is speaking
+          ms.find(([, s]) => s)?.[0] ??
+          // Otherwise, stick with the person who was last speaking
+          prev ??
+          // Otherwise, spotlight the local user
+          ms.find(([m]) => m.vm.local)?.[0] ??
+          null,
+        null,
+      ),
+      distinctUntilChanged(),
+      throttleTime(800, undefined, { leading: true, trailing: true }),
+    );
+
+  private readonly grid: Observable<UserMediaViewModel[]> = this.userMedia.pipe(
+    switchMap((ms) => {
+      const bins = ms.map((m) =>
+        combineLatest(
+          [m.speaker, m.presenter, m.vm.audioEnabled, m.vm.videoEnabled],
+          (speaker, presenter, audio, video) => {
+            let bin: SortingBin;
+            if (m.vm.local) bin = SortingBin.SelfStart;
+            else if (presenter) bin = SortingBin.Presenters;
+            else if (speaker) bin = SortingBin.Speakers;
+            else if (video)
+              bin = audio ? SortingBin.VideoAndAudio : SortingBin.Video;
+            else bin = audio ? SortingBin.Audio : SortingBin.NoMedia;
+
+            return [m, bin] as const;
+          },
+        ),
+      );
+      // Sort the media by bin order and generate a tile for each one
+      return bins.length === 0
+        ? of([])
+        : combineLatest(bins, (...bins) =>
+            bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m.vm),
+          );
+    }),
+  );
+
+  private readonly spotlight: Observable<MediaViewModel[]> = combineLatest(
+    [this.screenShares, this.spotlightSpeaker],
+    (screenShares, spotlightSpeaker): MediaViewModel[] =>
+      screenShares.length > 0
+        ? screenShares.map((m) => m.vm)
+        : spotlightSpeaker === null
+          ? []
+          : [spotlightSpeaker.vm],
+  );
+
+  // TODO: Make this react to changes in window dimensions and screen
+  // orientation
+  private readonly windowMode = of<WindowMode>("normal");
+
+  private readonly _gridMode = new BehaviorSubject<GridMode>("grid");
+  /**
+   * The layout mode of the media tile grid.
+   */
+  public readonly gridMode = state(this._gridMode);
+
+  public setGridMode(value: GridMode): void {
+    this._gridMode.next(value);
+  }
+
+  public readonly layout: StateObservable<Layout> = state(
+    combineLatest([this._gridMode, this.windowMode], (gridMode, windowMode) => {
+      switch (windowMode) {
+        case "full screen":
+          throw new Error("unimplemented");
+        case "pip":
+          throw new Error("unimplemented");
+        case "normal": {
+          switch (gridMode) {
+            case "grid":
+              return combineLatest(
+                [this.grid, this.spotlight, this.screenShares],
+                (grid, spotlight, screenShares): Layout => ({
+                  type: "grid",
+                  spotlight: screenShares.length > 0 ? spotlight : undefined,
+                  grid,
+                }),
+              );
+            case "spotlight":
+              return combineLatest(
+                [this.grid, this.spotlight],
+                (grid, spotlight): Layout => ({
+                  type: "spotlight",
+                  spotlight,
+                  grid,
+                }),
+              );
           }
         }
       }
-
-      return result;
-    },
+    }).pipe(switchAll()),
   );
 
   /**
    * The media tiles to be displayed in the call view.
    */
-  public readonly tiles = state(
-    combineLatest([
-      this.remoteParticipants,
-      observeParticipantMedia(this.livekitRoom.localParticipant),
-    ]).pipe(
-      scan((ts, [remoteParticipants, { participant: localParticipant }]) => {
-        const ps = [localParticipant, ...remoteParticipants];
-        const tilesById = new Map(ts.map((t) => [t.id, t]));
-        const now = Date.now();
-        let allGhosts = true;
+  // TODO: Get rid of this field, replacing it with the 'layout' field above
+  // which keeps more details of the layout order internal to the view model
+  public readonly tiles: StateObservable<TileDescriptor<MediaViewModel>[]> =
+    state(
+      combineLatest([
+        this.remoteParticipants,
+        observeParticipantMedia(this.livekitRoom.localParticipant),
+      ]).pipe(
+        scan((ts, [remoteParticipants, { participant: localParticipant }]) => {
+          const ps = [localParticipant, ...remoteParticipants];
+          const tilesById = new Map(ts.map((t) => [t.id, t]));
+          const now = Date.now();
+          let allGhosts = true;
 
-        const newTiles = ps.flatMap((p) => {
-          const userMediaId = p.identity;
-          const member = findMatrixMember(this.matrixRoom, userMediaId);
-          allGhosts &&= member === undefined;
-          const spokeRecently =
-            p.lastSpokeAt !== undefined && now - +p.lastSpokeAt <= 10000;
+          const newTiles = ps.flatMap((p) => {
+            const userMediaId = p.identity;
+            const member = findMatrixMember(this.matrixRoom, userMediaId);
+            allGhosts &&= member === undefined;
+            const spokeRecently =
+              p.lastSpokeAt !== undefined && now - +p.lastSpokeAt <= 10000;
 
-          // We always start with a local participant with the empty string as
-          // their ID before we're connected, this is fine and we'll be in
-          // "all ghosts" mode.
-          if (userMediaId !== "" && member === undefined) {
-            logger.warn(
-              `Ruh, roh! No matrix member found for SFU participant '${userMediaId}': creating g-g-g-ghost!`,
-            );
-          }
-
-          const userMediaVm =
-            tilesById.get(userMediaId)?.data ??
-            new UserMediaTileViewModel(userMediaId, member, p, this.encrypted);
-          tilesById.delete(userMediaId);
-
-          const userMediaTile: TileDescriptor<TileViewModel> = {
-            id: userMediaId,
-            focused: false,
-            isPresenter: p.isScreenShareEnabled,
-            isSpeaker: (p.isSpeaking || spokeRecently) && !p.isLocal,
-            hasVideo: p.isCameraEnabled,
-            local: p.isLocal,
-            largeBaseSize: false,
-            data: userMediaVm,
-          };
-
-          if (p.isScreenShareEnabled) {
-            const screenShareId = `${userMediaId}:screen-share`;
-            const screenShareVm =
-              tilesById.get(screenShareId)?.data ??
-              new ScreenShareTileViewModel(
-                screenShareId,
-                member,
-                p,
-                this.encrypted,
+            // We always start with a local participant with the empty string as
+            // their ID before we're connected, this is fine and we'll be in
+            // "all ghosts" mode.
+            if (userMediaId !== "" && member === undefined) {
+              logger.warn(
+                `Ruh, roh! No matrix member found for SFU participant '${userMediaId}': creating g-g-g-ghost!`,
               );
-            tilesById.delete(screenShareId);
+            }
 
-            const screenShareTile: TileDescriptor<TileViewModel> = {
-              id: screenShareId,
-              focused: true,
-              isPresenter: false,
-              isSpeaker: false,
-              hasVideo: true,
+            const userMediaVm =
+              tilesById.get(userMediaId)?.data ??
+              new UserMediaViewModel(userMediaId, member, p, this.encrypted);
+            tilesById.delete(userMediaId);
+
+            const userMediaTile: TileDescriptor<MediaViewModel> = {
+              id: userMediaId,
+              focused: false,
+              isPresenter: p.isScreenShareEnabled,
+              isSpeaker: (p.isSpeaking || spokeRecently) && !p.isLocal,
+              hasVideo: p.isCameraEnabled,
               local: p.isLocal,
-              largeBaseSize: true,
-              placeNear: userMediaId,
-              data: screenShareVm,
+              largeBaseSize: false,
+              data: userMediaVm,
             };
-            return [userMediaTile, screenShareTile];
-          } else {
-            return [userMediaTile];
-          }
-        });
 
-        // Any tiles left in the map are unused and should be destroyed
-        for (const t of tilesById.values()) t.data.destroy();
+            if (p.isScreenShareEnabled) {
+              const screenShareId = `${userMediaId}:screen-share`;
+              const screenShareVm =
+                tilesById.get(screenShareId)?.data ??
+                new ScreenShareViewModel(
+                  screenShareId,
+                  member,
+                  p,
+                  this.encrypted,
+                );
+              tilesById.delete(screenShareId);
 
-        // If every item is a ghost, that probably means we're still connecting
-        // and shouldn't bother showing anything yet
-        return allGhosts ? [] : newTiles;
-      }, [] as TileDescriptor<TileViewModel>[]),
-      finalizeValue((ts) => {
-        for (const t of ts) t.data.destroy();
-      }),
-    ),
-  );
+              const screenShareTile: TileDescriptor<MediaViewModel> = {
+                id: screenShareId,
+                focused: true,
+                isPresenter: false,
+                isSpeaker: false,
+                hasVideo: true,
+                local: p.isLocal,
+                largeBaseSize: true,
+                placeNear: userMediaId,
+                data: screenShareVm,
+              };
+              return [userMediaTile, screenShareTile];
+            } else {
+              return [userMediaTile];
+            }
+          });
+
+          // Any tiles left in the map are unused and should be destroyed
+          for (const t of tilesById.values()) t.data.destroy();
+
+          // If every item is a ghost, that probably means we're still connecting
+          // and shouldn't bother showing anything yet
+          return allGhosts ? [] : newTiles;
+        }, [] as TileDescriptor<MediaViewModel>[]),
+        finalizeValue((ts) => {
+          for (const t of ts) t.data.destroy();
+        }),
+      ),
+    );
 
   public constructor(
     // A call is permanently tied to a single Matrix room and LiveKit room

src/state/MediaViewModel.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -43,7 +43,6 @@ import {
   of,
   startWith,
   switchMap,
-  takeUntil,
 } from "rxjs";
 
 import { ViewModel } from "./ViewModel";
@@ -56,7 +55,7 @@ function observeTrackReference(
     observeParticipantMedia(participant).pipe(
       map(() => ({
         participant,
-        publication: participant.getTrack(source),
+        publication: participant.getTrackPublication(source),
         source,
       })),
       distinctUntilKeyChanged("publication"),
@@ -64,13 +63,13 @@ function observeTrackReference(
   );
 }
 
-abstract class BaseTileViewModel extends ViewModel {
+abstract class BaseMediaViewModel extends ViewModel {
   /**
-   * Whether the tile belongs to the local user.
+   * Whether the media belongs to the local user.
    */
   public readonly local = this.participant.isLocal;
   /**
-   * The LiveKit video track to be shown on this tile.
+   * The LiveKit video track for this media.
    */
   public readonly video: StateObservable<TrackReferenceOrPlaceholder>;
   /**
@@ -83,7 +82,7 @@ abstract class BaseTileViewModel extends ViewModel {
     // soon as that code is moved into the view models
     public readonly id: string,
     /**
-     * The Matrix room member to which this tile belongs.
+     * The Matrix room member to which this media belongs.
      */
     // TODO: Fully separate the data layer from the UI layer by keeping the
     // member object internal
@@ -109,14 +108,14 @@ abstract class BaseTileViewModel extends ViewModel {
 }
 
 /**
- * A tile displaying some media.
+ * Some participant's media.
  */
-export type TileViewModel = UserMediaTileViewModel | ScreenShareTileViewModel;
+export type MediaViewModel = UserMediaViewModel | ScreenShareViewModel;
 
 /**
- * A tile displaying some participant's user media.
+ * Some participant's user media.
  */
-export class UserMediaTileViewModel extends BaseTileViewModel {
+export class UserMediaViewModel extends BaseMediaViewModel {
   /**
    * Whether the video should be mirrored.
    */
@@ -167,6 +166,12 @@ export class UserMediaTileViewModel extends BaseTileViewModel {
    */
   public readonly videoEnabled: StateObservable<boolean>;
 
+  private readonly _cropVideo = new BehaviorSubject(true);
+  /**
+   * Whether the tile video should be contained inside the tile or be cropped to fit.
+   */
+  public readonly cropVideo = state(this._cropVideo);
+
   public constructor(
     id: string,
     member: RoomMember | undefined,
@@ -195,7 +200,7 @@ export class UserMediaTileViewModel extends BaseTileViewModel {
       combineLatest([this._locallyMuted, this._localVolume], (muted, volume) =>
         muted ? 0 : volume,
       )
-        .pipe(takeUntil(this.destroyed))
+        .pipe(this.scope.bind())
         .subscribe((volume) => {
           (this.participant as RemoteParticipant).setVolume(volume);
         });
@@ -205,15 +210,19 @@ export class UserMediaTileViewModel extends BaseTileViewModel {
     this._locallyMuted.next(!this._locallyMuted.value);
   }
 
+  public toggleFitContain(): void {
+    this._cropVideo.next(!this._cropVideo.value);
+  }
+
   public setLocalVolume(value: number): void {
     this._localVolume.next(value);
   }
 }
 
 /**
- * A tile displaying some participant's screen share.
+ * Some participant's screen share media.
  */
-export class ScreenShareTileViewModel extends BaseTileViewModel {
+export class ScreenShareViewModel extends BaseMediaViewModel {
   public constructor(
     id: string,
     member: RoomMember | undefined,

src/state/ObservableScope.ts

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MonoTypeOperatorFunction, Subject, takeUntil } from "rxjs";
+
+/**
+ * A scope which limits the execution lifetime of its bound Observables.
+ */
+export class ObservableScope {
+  private readonly ended = new Subject<void>();
+
+  /**
+   * Binds an Observable to this scope, so that it completes when the scope
+   * ends.
+   */
+  public bind<T>(): MonoTypeOperatorFunction<T> {
+    return takeUntil(this.ended);
+  }
+
+  /**
+   * Ends the scope, causing any bound Observables to complete.
+   */
+  public end(): void {
+    this.ended.next();
+    this.ended.complete();
+  }
+}

src/state/ViewModel.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,20 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Subject } from "rxjs";
+import { ObservableScope } from "./ObservableScope";
 
 /**
  * An MVVM view model.
  */
 export abstract class ViewModel {
-  protected readonly destroyed = new Subject<void>();
+  protected readonly scope = new ObservableScope();
 
   /**
    * Instructs the ViewModel to clean up its resources. If you forget to call
    * this, there may be memory leaks!
    */
   public destroy(): void {
-    this.destroyed.next();
-    this.destroyed.complete();
+    this.scope.end();
   }
 }

src/state/useObservable.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,18 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { BehaviorSubject, Observable } from "rxjs";
 
 /**
  * React hook that creates an Observable from a changing value. The Observable
- * replays its current value upon subscription, emits whenever the value
- * changes, and completes when the component is unmounted.
+ * replays its current value upon subscription and emits whenever the value
+ * changes.
  */
 export function useObservable<T>(value: T): Observable<T> {
   const subject = useRef<BehaviorSubject<T>>();
   subject.current ??= new BehaviorSubject(value);
   if (value !== subject.current.value) subject.current.next(value);
-  useEffect(() => subject.current!.complete(), []);
   return subject.current;
 }

src/useEvents.ts

@@ -33,7 +33,7 @@ export function useEventTarget<T extends Event>(
   useEffect(() => {
     if (target) {
       target.addEventListener(eventType, listener as EventListener, options);
-      return () =>
+      return (): void =>
         target.removeEventListener(
           eventType,
           listener as EventListener,
@@ -55,7 +55,7 @@ export function useTypedEventEmitter<
 ): void {
   useEffect(() => {
     emitter.on(eventType, listener);
-    return () => {
+    return (): void => {
       emitter.off(eventType, listener);
     };
   }, [emitter, eventType, listener]);
@@ -72,7 +72,7 @@ export function useEventEmitterThree<
 ): void {
   useEffect(() => {
     emitter.on(eventType, listener);
-    return () => {
+    return (): void => {
       emitter.off(eventType, listener);
     };
   }, [emitter, eventType, listener]);