test livekit-client 2.9.1

Update readme with new Element Call screenshot

.eslintrc.cjs

@@ -1,7 +1,7 @@
 const COPYRIGHT_HEADER = `/*
 Copyright %%CURRENT_YEAR%% New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
@@ -37,7 +37,14 @@ module.exports = {
     "@typescript-eslint/promise-function-async": "error",
     "@typescript-eslint/require-await": "error",
     "@typescript-eslint/await-thenable": "error",
+    // To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk):
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { fixStyle: "inline-type-imports" },
+    ],
+    // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
+    "rxjs/finnish": "error",
   },
   settings: {
     react: {

.github/workflows/blocked.yaml

@@ -0,0 +1,17 @@
+name: Prevent blocked
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled]
+jobs:
+  prevent-blocked:
+    name: Prevent blocked
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    steps:
+      - name: Add notice
+        uses: actions/github-script@v7
+        if: contains(github.event.pull_request.labels.*.name, 'X-Blocked')
+        with:
+          script: |
+            core.setFailed("PR has been labeled with X-Blocked; it cannot be merged.");

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

@@ -1,4 +1,4 @@
-name: Docker - Deploy
+name: Build and publish docker image
 on:
   workflow_call:
     inputs:
@@ -26,11 +26,11 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: 📥 Download artifact
-        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
+        uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ inputs.artifact_run_id }}
-          name: build-output
+          name: build-output-full
           path: dist
 
       - name: Log in to container registry
@@ -42,16 +42,16 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96 # v5.6.1
+        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: ${{ inputs.docker_tags}}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@c47758b77c9736f4b2ef4073d4d51994fabfe349 # v3.7.1
+        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@48aba3b46d1b1fec4febb7c5d0c644b249a11355 # v6.10.0
+        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6.15.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

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

@@ -1,10 +1,14 @@
-name: Element Call - Build
+name: Build Element Call
 on:
   workflow_call:
     inputs:
       vite_app_version:
         required: true
         type: string
+      package:
+        type: string # This would ideally be a `choice` type, but that isn't supported yet
+        description: The package type to be built. Must be one of 'full' or 'embedded'
+        required: true
     secrets:
       SENTRY_ORG:
         required: true
@@ -25,14 +29,26 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Yarn cache
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
-          node-version: "lts/*"
+          node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install"
-      - name: Build
-        run: "yarn run build"
+        run: "yarn install --frozen-lockfile"
+      - name: Build full version
+        if: ${{ inputs.package == 'full' }}
+        run: "yarn run build:full"
+        env:
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          SENTRY_URL: ${{ secrets.SENTRY_URL }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
+          NODE_OPTIONS: "--max-old-space-size=4096"
+      - name: Build embedded
+        if: ${{ inputs.package == 'embedded' }}
+        run: "yarn run build:embedded"
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -42,9 +58,9 @@ jobs:
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
-        uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4
         with:
-          name: build-output
+          name: build-output-${{ inputs.package }}
           path: dist
           # We'll only use this in a triggered job, then we're done with it
           retention-days: 1

.github/workflows/build.yaml

@@ -6,17 +6,68 @@ on:
       - opened
       - labeled
     paths-ignore:
-      - ".github/**"
+      - ".github/ISSUE_TEMPLATE/**"
+      - ".github/CODEOWNERS"
       - "docs/**"
   push:
     branches: [livekit, full-mesh]
     paths-ignore:
-      - ".github/**"
+      - ".github/ISSUE_TEMPLATE/**"
+      - ".github/CODEOWNERS"
       - "docs/**"
 jobs:
-  build_element_call:
-    uses: ./.github/workflows/element-call.yaml
+  build_full_element_call:
+    # Use the full package vite build
+    uses: ./.github/workflows/build-element-call.yaml
     with:
+      package: full
+      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 }}
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+  deploy_develop:
+    # Deploy livekit branch to call.element.dev after build completes
+    if: github.ref == 'refs/heads/livekit'
+    needs: build_full_element_call
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to call.element.dev
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6
+        with:
+          github-token: ${{ secrets.DEVELOP_DEPLOYMENT_TOKEN }}
+          script: |
+            await github.rest.actions.createWorkflowDispatch({
+                owner: 'element-hq',
+                repo: 'element-call-webapp-deployments',
+                workflow_id: 'deploy.yml',
+                ref: 'main',
+                inputs: {
+                  target: 'call.element.dev',
+                  version: '${{ github.sha }}'
+                }
+            })
+  docker_for_develop:
+    # Build docker and publish docker for livekit branch after build completes
+    if: github.ref == 'refs/heads/livekit'
+    needs: build_full_element_call
+    permissions:
+      contents: write
+      packages: write
+    uses: ./.github/workflows/build-and-publish-docker.yaml
+    with:
+      artifact_run_id: ${{ github.run_id }}
+      docker_tags: |
+        type=sha,format=short,event=branch
+        type=raw,value=latest-ci
+        type=raw,value=latest-ci_{{date 'X' }}
+  build_embedded_element_call:
+    # Use the embedded package vite build
+    uses: ./.github/workflows/build-element-call.yaml
+    with:
+      package: embedded
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}

.github/workflows/deploy-to-netlify.yaml

@@ -1,4 +1,4 @@
-name: Netlify - Deploy
+name: Deploy to Netlify
 on:
   workflow_call:
     inputs:
@@ -46,11 +46,11 @@ jobs:
             Exercise caution. Use test accounts.
 
       - name: 📥 Download artifact
-        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
+        uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4
         with:
           github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           run-id: ${{ inputs.artifact_run_id }}
-          name: build-output
+          name: build-output-full
           path: webapp
 
       - name: Add redirects file

.github/workflows/e2e.yml

@@ -1,24 +0,0 @@
-name: Run E2E tests
-on:
-  workflow_run:
-    workflows: ["deploy"]
-    types:
-      - completed
-    branches-ignore:
-      - "livekit"
-jobs:
-  e2e:
-    name: E2E tests runs on Element Call
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out test private repo
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
-        with:
-          repository: element-hq/static-call-participant
-          ref: refs/heads/main
-          path: static-call-participant
-          token: ${{ secrets.GH_E2E_TEST_TOKEN }}
-      - name: Build E2E Image
-        run: "cd static-call-participant && docker build --no-cache --tag matrixdotorg/chrome-node-static-call-participant:latest ."
-      - name: Run E2E tests in container
-        run: "docker run --rm -v '${{ github.workspace }}/static-call-participant/callemshost-users.txt:/opt/app/callemshost-users.txt' matrixdotorg/chrome-node-static-call-participant:latest ./e2e.sh"

.github/workflows/lint.yaml

@@ -9,12 +9,12 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Yarn cache
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
-          node-version: "lts/*"
+          node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install"
+        run: "yarn install --frozen-lockfile"
       - name: Prettier
         run: "yarn run prettier:check"
       - name: i18n

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests
+on:
+  pull_request: {}
+  push:
+    branches: [livekit, full-mesh]
+jobs:
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          cache: "yarn"
+          node-version-file: ".node-version"
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run backend components
+        run: |
+          docker compose -f playwright-backend-docker-compose.yml up -d
+          docker ps
+      - name: Copy config file
+        run: cp config/config.devenv.json public/config.json
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 3

.github/workflows/pr-deploy.yaml

@@ -1,4 +1,4 @@
-name: PR Preview Deployments
+name: Deploy previews for PRs
 on:
   workflow_run:
     workflows: ["Build"]
@@ -24,7 +24,7 @@ jobs:
     needs: prdetails
     permissions:
       deployments: write
-    uses: ./.github/workflows/netlify.yaml
+    uses: ./.github/workflows/deploy-to-netlify.yaml
     with:
       artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       pr_number: ${{ needs.prdetails.outputs.pr_number }}
@@ -42,7 +42,7 @@ jobs:
     permissions:
       contents: write
       packages: write
-    uses: ./.github/workflows/docker.yaml
+    uses: ./.github/workflows/build-and-publish-docker.yaml
     with:
       artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       docker_tags: |

.github/workflows/publish.yaml

@@ -1,13 +1,8 @@
-name: Build & publish images to the package registry for tags
+name: Build & publish images to the package registry for releases
 
 on:
   release:
     types: [published]
-  workflow_run:
-    workflows: ["Build"]
-    branches: [livekit]
-    types:
-      - completed
 
 env:
   REGISTRY: ghcr.io
@@ -16,8 +11,9 @@ env:
 jobs:
   build_element_call:
     if: ${{ github.event_name == 'release' }}
-    uses: ./.github/workflows/element-call.yaml
+    uses: ./.github/workflows/build-element-call.yaml
     with:
+      package: full
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
@@ -39,11 +35,11 @@ jobs:
         id: current-time
         run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
       - name: 📥 Download artifact
-        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
+        uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id || github.run_id }}
-          name: build-output
+          name: build-output-full
           path: dist
       - name: Create Tarball
         env:
@@ -51,7 +47,7 @@ jobs:
         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@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4.4.3
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
@@ -62,11 +58,9 @@ jobs:
     permissions:
       contents: write
       packages: write
-    uses: ./.github/workflows/docker.yaml
+    uses: ./.github/workflows/build-and-publish-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

@@ -11,16 +11,16 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Yarn cache
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
-          node-version: "lts/*"
+          node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install"
+        run: "yarn install --frozen-lockfile"
       - name: Vitest
         run: "yarn run test:coverage"
       - name: Upload to codecov
-        uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4
+        uses: codecov/codecov-action@0565863a31f2c772f9f0395002a31e3f06189574 # v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         with:

.github/workflows/translations-download.yaml

@@ -15,10 +15,10 @@ jobs:
       - name: Checkout the code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
-          node-version: "lts/*"
+          node-version-file: ".node-version"
 
       - name: Install Deps
         run: "yarn install --frozen-lockfile"
@@ -39,7 +39,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7.0.5
+        uses: peter-evans/create-pull-request@dd2324fc52d5d43c699a5636bcf19fceaa70c284 # v7.0.7
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

.gitignore

@@ -4,8 +4,15 @@ node_modules
 dist
 dist-ssr
 *.local
+*.bkp
 .idea/
 public/config.json
 backend/synapse_tmp/*
 /coverage
 yarn-error.log
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.node-version

@@ -0,0 +1 @@
+22

Dockerfile

@@ -1,4 +1,13 @@
+FROM alpine AS builder
+
+COPY ./dist /dist
+
+# Compress assets to work with nginx-gzip-static-module
+WORKDIR /dist/assets
+RUN gzip -k ../index.html *.js *.map *.css *.wasm *-app-*.json 
+
 FROM nginxinc/nginx-unprivileged:alpine
 
-COPY ./dist /app
+COPY --from=builder ./dist /app
+
 COPY config/nginx.conf /etc/nginx/conf.d/default.conf

LICENSE-COMMERCIAL

@@ -0,0 +1,6 @@
+Licensees holding a valid commercial license with Element may use this
+software in accordance with the terms contained in a written agreement
+between you and Element.
+
+To purchase a commercial license please contact our sales team at
+licensing@element.io

README.md

@@ -2,127 +2,101 @@
 
 [![Chat](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
 [![Localazy](https://img.shields.io/endpoint?url=https%3A%2F%2Fconnect.localazy.com%2Fstatus%2Felement-call%2Fdata%3Fcontent%3Dall%26title%3Dlocalazy%26logo%3Dtrue)](https://localazy.com/p/element-call)
+[![License](https://img.shields.io/github/license/element-hq/element-call)](LICENSE-AGPL-3.0)
 
-Group calls with WebRTC that leverage [Matrix](https://matrix.org) and an
-open-source WebRTC toolkit from [LiveKit](https://livekit.io/).
+[🎬 Live Demo 🎬](https://call.element.io)
 
-For prior version of the Element Call that relied solely on full-mesh logic,
-check [`full-mesh`](https://github.com/element-hq/element-call/tree/full-mesh)
-branch.
+The world's first 🌐 decentralized and 🤝 federated video conferencing solution
+powered by **the Matrix protocol**.
 
-![A demo of Element Call with six people](demo.jpg)
+## 📌 Overview
 
-To try it out, visit our hosted version at
-[call.element.io](https://call.element.io). You can also find the latest
-development version continuously deployed to
+**Element Call** is a native Matrix video conferencing application developed by
+[Element](https://element.io/), designed for **secure**, **scalable**,
+**privacy-respecting**, and **decentralized** video and voice calls over the
+Matrix protocol. Built on **MatrixRTC**
+([MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)), it
+utilizes
+**[MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)**
+with **[LiveKit](https://livekit.io/)** as its backend.
+
+![A demo of Element Call with six people](demo.gif)
+
+You can find the latest development version continuously deployed to
 [call.element.dev](https://call.element.dev/).
 
-## Host it yourself
+> [!NOTE]
+> For prior version of the Element Call that relied solely on full-mesh logic,
+> check [`full-mesh`](https://github.com/element-hq/element-call/tree/full-mesh)
+> branch.
 
-Until prebuilt tarballs are available, you'll need to build Element Call from
-source. First, clone and install the package:
+## ✨ Key Features
 
-```
-git clone https://github.com/element-hq/element-call.git
-cd element-call
-yarn
-yarn build
-```
+✅ **Decentralized & Federated** – No central authority; works across Matrix
+homeservers.  
+✅ **End-to-End Encrypted** – Secure and private calls.  
+✅ **Standalone & Widget Mode** – Use as an independent app or embed in Matrix
+clients.  
+✅ **WebRTC-based** – No additional software required.  
+✅ **Scalable with LiveKit** – Supports large meetings via SFU
+([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
+✅ **Raise Hand** – Participants can signal when they want to speak, helping to
+organize the flow of the meeting.  
+✅ **Emoji Reactions** – Users can react with emojis 👍️ 🎉 👏 🤘, adding
+engagement and interactivity to the conversation.
 
-If all went well, you can now find the build output under `dist` as a series of
-static files. These can be hosted using any web server that can be configured
-with custom routes (see below).
+## 🚀 Deployment Options
 
-You may also wish to add a configuration file (Element Call uses the domain it's
-hosted on as a Homeserver URL by default, but you can change this in the config
-file). This goes in `public/config.json` - you can use the sample as a starting
-point:
+Element Call can be packaged in two ways:
 
-```
-cp config/config.sample.json public/config.json
-# edit public/config.json
-```
+**Full Package** – Supports both **Standalone** and **Widget** mode. Hosted as
+a static web page and accessed via a URL when used as a widget.
 
-Because Element Call uses client-side routing, your server must be able to route
-any requests to non-existing paths back to `/index.html`. For example, in Nginx
-you can achieve this with the `try_files` directive:
+**Embedded Package** – 🚧 **Coming [Soon](https://github.com/element-hq/element-call/issues/2994):** Designed for **Widget mode** only. Bundled with a
+messenger app for seamless integration. This is the recommended method for
+embedding Element Call into a messenger app.
 
-```
-server {
-    ...
-    location / {
-        ...
-        try_files $uri /$uri /index.html;
-    }
-}
-```
+### Standalone mode
 
-By default, the app expects you to have a Matrix homeserver (such as
-[Synapse](https://element-hq.github.io/synapse/latest/setup/installation.html))
-installed locally and running on port 8008. If you wish to use a homeserver on a
-different URL or one that is hosted on a different server, you can add a config
-file as above, and include the homeserver URL that you'd like to use.
+![Element Call in Standalone Mode](./docs/element_call_standalone.drawio.png)
 
-Element Call requires a homeserver with registration enabled without any 3pid or
-token requirements, if you want it to be used by unregistered users.
-Furthermore, it is not recommended to use it with an existing homeserver where
-user accounts have joined normal rooms, as it may not be able to handle those
-yet and it may behave unreliably.
+In Standalone mode Element Call operates as an independent, full-featured video
+conferencing web application, allowing users to join or host calls without
+requiring a separate Matrix client.
 
-Therefore, to use a self-hosted homeserver, this is recommended to be a new
-server where any user account created has not joined any normal rooms anywhere
-in the Matrix federated network. The homeserver used can be setup to disable
-federation, so as to prevent spam registrations (if you keep registrations open)
-and to ensure Element Call continues to work in case any user decides to log in
-to their Element Call account using the standard Element app and joins normal
-rooms that Element Call cannot handle.
+### Widget mode embedded in Messenger Apps
 
-## Configuration
+![Element Call in Widget Mode](./docs/element_call_widget.drawio.png)
 
-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).
+Element Call can be embedded as a widget inside apps like
+[**Element Web**](https://github.com/element-hq/element-web) or **Element X
+([iOS](https://github.com/element-hq/element-x-ios),
+[Android](https://github.com/element-hq/element-x-android))**, bringing
+**MatrixRTC** capabilities to messenger apps for seamless decentralized video
+and voice calls within Matrix rooms.
 
-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:
+> [!IMPORTANT]
+> Embedded packaging is recommended for Element Call in widget mode!
 
-```
-experimental_features:
-    # MSC3266: Room summary API. Used for knocking over federation
-    msc3266_enabled: true
-    # MSC4222 needed for syncv2 state_after. This allow clients to
-    # correctly track the state of the room.
-    msc4222_enabled: true
+## 🛠️ Self-Hosting
 
-# The maximum allowed duration by which sent events can be delayed, as
-# per MSC4140.
-max_event_delay_duration: 24h
+For operating and deploying Element Call on your own server, refer to the
+[**Self-Hosting Guide**](./docs/self-hosting.md).
 
-rc_message:
-  # This needs to match at least the heart-beat frequency plus a bit of headroom
-  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
-  per_second: 0.5
-  burst_count: 30
-```
+## 🧭 MatrixRTC Backend Discovery and Selection
 
-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 ("Request to join call"), a cannot join error or the
-join view.
+For proper Element Call operation each site deployment needs a MatrixRTC backend
+setup as outlined in the [Self-Hosting](#self-hosting). A typical federated site
+deployment for three different sites A, B and C is depicted below.
 
-MSC4222 allow clients to opt-in to a change of the sync v2 API that allows them
-to correctly track the state of the room. This is required by Element Call to
-track room state reliably.
+![Element Call federated setup](./docs/Federated_Setup.drawio.png)
 
-Element Call requires a Livekit SFU alongside a [Livekit JWT
-service](https://github.com/element-hq/lk-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/matrix/client`. This is the recommended method.
+### Backend Discovery
 
-The configuration is a list of Foci configs:
+MatrixRTC backend (according to
+[MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143))
+is announced by the homeserver's `.well-known/matrix/client` file and discovered
+via the `org.matrix.msc4143.rtc_foci` key, e.g.:
 
 ```json
 "org.matrix.msc4143.rtc_foci": [
@@ -130,60 +104,65 @@ The configuration is a list of Foci configs:
         "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
+where the format for MatrixRTC using LiveKit backend is defined in
+[MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md).
+In the example above Matrix clients do discover a focus of type `livekit` which
+points them to a Matrix LiveKit JWT Auth Service via `livekit_service_url`.
+
+### Backend Selection
+
+- Each call participant proposes their discovered MatrixRTC backend from
+  `org.matrix.msc4143.rtc_foci` in their `org.matrix.msc3401.call.member` state event.
+- For **LiveKit** MatrixRTC backend
+  ([MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)),
+  the **first participant who joined the call** defines via the `foci_preferred`
+  key in their `org.matrix.msc3401.call.member` which actual MatrixRTC backend
+  will be used for this call.
+- During the actual call join flow, the **LiveKit JWT Auth Service** provides
+  the client with the **LiveKit SFU WebSocket URL** and an **access JWT token**
+  in order to exchange media via WebRTC.
+
+The example below illustrates how backend selection works across **Matrix
+federation**, using the setup from sites A, B, and C. It demonstrates backend
+selection for **Matrix rooms 123 and 456**, which include users from different
+homeservers.  
+![Element Call SFU selection over Matrix federation](./docs/SFU_selection.drawio.png)
+
+## 🌍 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.
 
-## Development
+## 🛠️ Development
 
 ### Frontend
 
-Element Call is built against
-[matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get
-started, clone, install, and link the package:
+To get started clone and set up this project:
 
-```
-git clone https://github.com/matrix-org/matrix-js-sdk.git
-cd matrix-js-sdk
-yarn
-yarn link
-```
-
-Next, we can set up this project:
-
-```
+```sh
 git clone https://github.com/element-hq/element-call.git
 cd element-call
 yarn
-yarn link matrix-js-sdk
 ```
 
-To use it, create a local config by, e.g., `cp ./config/config.devenv.json
-./public/config.json` and adapt it if necessary. The `config.devenv.json` config
-should work with the backend development environment as outlined in the next
-section out of box.
+To use it, create a local config by, e.g.,
+`cp ./config/config.devenv.json ./public/config.json` and adapt it if necessary.
+The `config.devenv.json` config should work with the backend development
+environment as outlined in the next section out of box.
 
-(Be aware, that this `config.devenv.json` is exposing a deprecated fallback
-LiveKit config key. If the homeserver advertises SFU backend via
-`.well-known/matrix/client` this has precedence.)
+> [!NOTE]
+> Be aware, that this `config.devenv.json` is exposing a deprecated fallback
+> LiveKit config key. If the homeserver advertises SFU backend via
+> `.well-known/matrix/client` this has precedence.
 
 You're now ready to launch the development server:
 
-```
+```sh
 yarn dev
 ```
 
@@ -192,24 +171,82 @@ yarn dev
 A docker compose file `dev-backend-docker-compose.yml` is provided to start the
 whole stack of components which is required for a local development environment:
 
-- Minimum Synapse Setup (servername: synapse.localhost)
+- Minimum Synapse Setup (servername: `synapse.localhost`)
 - LiveKit JWT Service (Note requires Federation API and hence a TLS reverse proxy)
-- Minimum TLS reverse proxy (servername: synapse.localhost) Note certificates
+- Minimum TLS reverse proxy (servername: `synapse.localhost`) Note certificates
   are valid for at least 10 years from now
 - Minimum LiveKit SFU Setup using dev defaults for config
-- Redis db for completness
+- Redis db for completeness
 
 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._**
 
 Run backend components:
 
-```
+```sh
 yarn backend
 # or  for podman-compose
 # podman-compose -f dev-backend-docker-compose.yml up
 ```
 
+### Playwright tests
+
+Our Playwright tests run automatically as part of our CI along with our other tests,
+on every pull request.
+
+You may need to follow instructions to set up your development environment for running
+Playwright by following <https://playwright.dev/docs/browsers#install-browsers> and
+<https://playwright.dev/docs/browsers#install-system-dependencies>.
+
+However the Playwright tests are run, an element-call instance must be running on
+https://localhost:3000 (this is configured in `playwright.config.ts`) - this is what will
+be tested.
+
+The local backend environment should be running for the test to work:
+`yarn backend`
+
+There are a few different ways to run the tests yourself. The simplest is to run:
+
+```shell
+yarn run test:playwright
+```
+
+This will run the Playwright tests once, non-interactively.
+
+There is a more user-friendly way to run the tests in interactive mode:
+
+```shell
+yarn run test:playwright:open
+```
+
+The easiest way to develop new test is to use the codegen feature of Playwright:
+
+```shell
+npx playwright codegen
+```
+
+This will record your action and write the test code for you. Use the tool bar to test visibility, text content,
+clicking.
+
+##### Investigate a failed test from the CI
+
+In the failed action page, click on the failed job, then scroll down to the `upload-artifact` step.
+You will find a link to download the zip report, as per:
+
+```
+Artifact playwright-report has been successfully uploaded! Final size is 1360358 bytes. Artifact ID is 2746265841
+Artifact download URL: https://github.com/element-hq/element-call/actions/runs/13837660687/artifacts/2746265841
+```
+
+Unzip the report then use this command to open the report in your browser:
+
+```shell
+npx playwright show-report ~/Downloads/playwright-report/
+```
+
+Under the failed test there is a small icon looking like "3 columns" (next to test name file name),
+click on it to see the live screenshots/console output.
+
 ### Test Coverage
 
 <img src="https://codecov.io/github/element-hq/element-call/graphs/tree.svg?token=O6CFVKK6I1"></img>
@@ -218,9 +255,11 @@ yarn backend
 
 To add a new translation key you can do these steps:
 
-1. Add the new key entry to the code where the new key is used: `t("some_new_key")`
+1. Add the new key entry to the code where the new key is used:
+   `t("some_new_key")`
 1. Run `yarn i18n` to extract the new key and update the translation files. This
    will add a skeleton entry to the `locales/en/app.json` file:
+
    ```jsonc
    {
        ...
@@ -228,19 +267,39 @@ To add a new translation key you can do these steps:
        ...
    }
    ```
-1. Update the skeleton entry in the `locales/en/app.json` file with
-   the English translation:
 
-```jsonc
+1. Update the skeleton entry in the `locales/en/app.json` file with the English
+   translation:
+
+   ```jsonc
    {
        ...
        "some_new_key": "Some new key",
        ...
    }
-```
+   ```
 
-## Documentation
+## 📖 Documentation
 
 Usage and other technical details about the project can be found here:
 
 [**Docs**](./docs/README.md)
+
+## 📝 Copyright & License
+
+Copyright 2021-2025 New Vector Ltd
+
+This software is dual-licensed by New Vector Ltd (Element). It can be used
+either:
+
+(1) for free under the terms of the GNU Affero General Public License (as
+published by the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version); OR
+
+(2) under the terms of a paid-for Element Commercial License agreement between
+you and Element (the terms of which may vary depending on what you and Element
+have agreed to). Unless required by applicable law or agreed to in writing,
+software distributed under the Licenses is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+Licenses for the specific language governing permissions and limitations under
+the Licenses.

backend/playwright_homeserver.yaml

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

config/config.sample.json

@@ -1,10 +1,13 @@
 {
   "default_server_config": {
     "m.homeserver": {
-      "base_url": "http://synapse.localhost:8008",
-      "server_name": "synapse.localhost"
+      "base_url": "https://mydomain.com",
+      "server_name": "mydomain.com"
     }
   },
+  "livekit": {
+    "livekit_service_url": "https://livekit-jwt.mydomain.com"
+  },
   "features": {
     "feature_use_device_session_member_events": true
   },

config/config_netlify_preview.json

@@ -17,5 +17,9 @@
   },
   "rageshake": {
     "submit_url": "https://element.io/bugreports/submit"
+  },
+  "sentry": {
+    "environment": "netlify-pr-preview",
+    "DSN": "https://b1e328d49be3402ba96101338989fb35@sentry.tools.element.io/41"
   }
 }

docs/README.md

@@ -5,3 +5,4 @@ This folder contains documentation for Element Call setup and usage.
 - [Embedded vs standalone mode](./embedded-standalone.md)
 - [Url format and parameters](./url-params.md)
 - [Global JS controls](./controls.md)
+- [Self-Hosting](./self-hosting.md)

docs/embedded-standalone.md

@@ -2,7 +2,7 @@
 
 Element call is developed using the js-sdk with matroska mode. This means the app can run either as a standalone app directly connected to a homeserver providing login interfaces or it can be used as a widget.
 
-As a widget the app only uses the core calling (matrixRTC) parts. The rest (authentication, sending events, getting room state updates about calls) is done by the hosting client.
+As a widget the app only uses the core calling (MatrixRTC) parts. The rest (authentication, sending events, getting room state updates about calls) is done by the hosting client.
 Element Call and the hosting client are connected via the widget api.
 
 Element call detects that it is run as a widget if a widgetId is defined in the url parameters. If `widgetId` is present element call will try to connect to the client via the widget postMessage api using the parameters provided in [Url Format and parameters

docs/self-hosting.md

@@ -0,0 +1,166 @@
+# Self-Hosting Element Call
+
+## Prerequisites
+
+> [!IMPORTANT]  
+> This section covers the requirements for deploying a **Matrix site**
+> compatible with MatrixRTC, the foundation of Element Call. These requirements
+> apply to both Standalone as well as Widget mode operation of Element Call.
+
+### A Matrix Homeserver
+
+The following [MSCs](https://github.com/matrix-org/matrix-spec-proposals) are
+required for Element Call to work properly:
+
+- **[MSC3266](https://github.com/deepbluev7/matrix-doc/blob/room-summaries/proposals/3266-room-summary.md):
+  Room Summary API**: In Standalone mode Element Call is able to join rooms
+  over federation using knocking. In this context MSC3266 is required as it
+  allows to request a room summary of rooms you are not joined. The summary
+  contains the room join rules. We need that information to decide if the user
+  gets prompted with the option to knock ("Request to join call"), a "cannot
+  join error" or "the join view".
+
+- **[MSC4140](https://github.com/matrix-org/matrix-spec-proposals/blob/toger5/expiring-events-keep-alive/proposals/4140-delayed-events-futures.md)
+  Delayed Events**: Delayed events are required for proper call participation
+  signalling. If disabled it is very likely that you end up with stuck calls in
+  Matrix rooms.
+
+- **[MSC4222](https://github.com/matrix-org/matrix-spec-proposals/blob/erikj/sync_v2_state_after/proposals/4222-sync-v2-state-after.md)
+  Adding `state_after` to sync v2**: Allow clients to opt-in to a change of the
+  sync v2 API that allows them to correctly track the state of the room. This is
+  required by Element Call to track room state reliably.
+
+If you're using [Synapse](https://github.com/element-hq/synapse/) as your homeserver, you'll need
+to additionally add the following config items to `homeserver.yaml` to comply with Element Call:
+
+```yaml
+experimental_features:
+  # MSC3266: Room summary API. Used for knocking over federation
+  msc3266_enabled: true
+  # MSC4222 needed for syncv2 state_after. This allow clients to
+  # correctly track the state of the room.
+  msc4222_enabled: true
+
+# The maximum allowed duration by which sent events can be delayed, as
+# per MSC4140.
+max_event_delay_duration: 24h
+
+rc_message:
+  # This needs to match at least e2ee key sharing frequency plus a bit of headroom
+  # Note key sharing events are bursty
+  per_second: 0.5
+  burst_count: 30
+  # This needs to match at least the heart-beat frequency plus a bit of headroom
+  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
+rc_delayed_event_mgmt:
+  per_second: 1
+  burst_count: 20
+```
+
+### MatrixRTC Backend
+
+In order to **guarantee smooth operation** of Element Call MatrixRTC backend is
+required for each site deployment.
+
+![MSC4195 compatible setup](MSC4195_setup.drawio.png)
+
+As depicted above, Element Call requires a
+[Livekit SFU](https://github.com/livekit/livekit) alongside a
+[Matrix Livekit JWT auth service](https://github.com/element-hq/lk-jwt-service)
+to implement
+[MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md).
+
+> [!IMPORTANT]
+> As defined in
+> [MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)
+> MatrixRTC backend must be announced to the client via your **homeserver's
+> `.well-known/matrix/client`**. 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"
+    }
+]
+```
+
+## Building Element Call
+
+> [!NOTE]  
+> This step is only required if you want to deploy Element Call in Standalone
+> mode.
+
+Until prebuilt tarballs are available, you'll need to build Element Call from
+source. First, clone and install the package:
+
+```sh
+git clone https://github.com/element-hq/element-call.git
+cd element-call
+yarn
+yarn build
+```
+
+If all went well, you can now find the build output under `dist` as a series of
+static files. These can be hosted using any web server that can be configured
+with custom routes (see below).
+
+You also need to add a configuration file which goes in `public/config.json` -
+you can use the sample as a starting point:
+
+```sh
+cp config/config.sample.json public/config.json
+# edit public/config.json
+```
+
+The sample needs editing to contain the homeserver that you are using.
+
+Because Element Call uses client-side routing, your server must be able to route
+any requests to non-existing paths back to `/index.html`. For example, in Nginx
+you can achieve this with the `try_files` directive:
+
+```jsonc
+server {
+    ...
+    location / {
+        ...
+        try_files $uri /$uri /index.html;
+    }
+}
+```
+
+## Configuration
+
+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).
+
+> [!CAUTION]
+> Please note configuring MatrixRTC backend via `config.json` of
+> Element Call is only available for developing and debug purposes. Relying on
+> it might break Element Call going forward!
+
+## A Note on Standalone Mode of Element Call
+
+Element Call in Standalone mode requires a homeserver with registration enabled
+without any 3pid or token requirements, if you want it to be used by
+unregistered users. Furthermore, it is not recommended to use it with an
+existing homeserver where user accounts have joined normal rooms, as it may not
+be able to handle those yet and it may behave unreliably.
+
+Therefore, to use a self-hosted homeserver, this is recommended to be a new
+server where any user account created has not joined any normal rooms anywhere
+in the Matrix federated network. The homeserver used can be setup to disable
+federation, so as to prevent spam registrations (if you keep registrations open)
+and to ensure Element Call continues to work in case any user decides to log in
+to their Element Call account using the standard Element app and joins normal
+rooms that Element Call cannot handle.

docs/url-params.md

@@ -32,31 +32,43 @@ There are two formats for Element Call urls.
 
 ## Parameters
 
-| Name                      | Values                                                                                               | Required for widget     | Required for SPA        | Description                                                                                                                                                                                                                                                                                                                                                                                         |
-| ------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `allowIceFallback`        | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
-| `analyticsID`             | Posthog analytics ID                                                                                 | No                      | No                      | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
-| `appPrompt`               | `true` or `false`                                                                                    | No, defaults to `true`  | No, defaults to `true`  | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
-| `baseUrl`                 |                                                                                                      | Yes                     | Not applicable          | The base URL of the homeserver to use for media lookups.                                                                                                                                                                                                                                                                                                                                            |
-| `confineToRoom`           | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Keeps the user confined to the current call/room.                                                                                                                                                                                                                                                                                                                                                   |
-| `deviceId`                | Matrix device ID                                                                                     | Yes                     | Not applicable          | The Matrix device ID for the widget host.                                                                                                                                                                                                                                                                                                                                                           |
-| `displayName`             |                                                                                                      | No                      | No                      | Display name used for auto-registration.                                                                                                                                                                                                                                                                                                                                                            |
-| `enableE2EE` (deprecated) | `true` or `false`                                                                                    | No, defaults to `true`  | No, defaults to `true`  | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
-| `fontScale`               | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`   | No, defaults to `1.0`   | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
-| `fonts`                   |                                                                                                      | No                      | No                      | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
-| `hideHeader`              | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Hides the room header when in a call.                                                                                                                                                                                                                                                                                                                                                               |
-| `hideScreensharing`       | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
-| `homeserver`              |                                                                                                      | Not applicable          | No                      | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
-| `lang`                    | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                      | No                      | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
-| `parentUrl`               |                                                                                                      | Yes                     | Not applicable          | 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)                                                  |
-| `password`                |                                                                                                      | No                      | No                      | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
-| `perParticipantE2EE`      | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
-| `preload`                 | `true` or `false`                                                                                    | No, defaults to `false` | Not applicable          | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading.                                                                                                                                                                                                                                                                                             |
-| `returnToLobby`           | `true` or `false`                                                                                    | No, defaults to `false` | Not applicable          | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms.                                                                                                                                                                                                                                                                               |
-| `roomId`                  | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                 | Yes                     | No                      | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not 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()`. |
-| `showControls`            | `true` or `false`                                                                                    | No, defaults to `true`  | No, defaults to `true`  | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
-| `skipLobby`               | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
-| `theme`                   | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`  | No, defaults to `dark`  | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
-| `userId`                  | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers)                 | Yes                     | Not applicable          | The Matrix user ID.                                                                                                                                                                                                                                                                                                                                                                                 |
-| `viaServers`              | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable          | No                      | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
-| `widgetId`                | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID            | Yes                     | Not applicable          | 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`.                                                                                                                                                                                         |
+### Common Parameters
+
+These parameters are relevant to both widget and standalone modes:
+
+| Name                                           | Values                                                                                               | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
+| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `allowIceFallback`                             | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
+| `analyticsID`                                  | Posthog analytics ID                                                                                 | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
+| `appPrompt`                                    | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
+| `confineToRoom`                                | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Keeps the user confined to the current call/room.                                                                                                                                                                                                                                                                                                                                                   |
+| `displayName`                                  |                                                                                                      | No                                                                                                | No                           | Display name used for auto-registration.                                                                                                                                                                                                                                                                                                                                                            |
+| `enableE2EE` (deprecated)                      | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
+| `fontScale`                                    | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
+| `fonts`                                        |                                                                                                      | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
+| `hideHeader`                                   | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the room header when in a call.                                                                                                                                                                                                                                                                                                                                                               |
+| `hideScreensharing`                            | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
+| `homeserver`                                   |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
+| `intent`                                       | `start_call` or `join_existing`                                                                      | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent of the user with respect to the call. e.g. if they clicked a Start Call button, this would be `start_call`. If it was a Join Call button, it would be `join_existing`.                                                                                                                                                                                                                   |
+| `lang`                                         | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
+| `password`                                     |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
+| `perParticipantE2EE`                           | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
+| `roomId`                                       | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                 | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not 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()`. |
+| `showControls`                                 | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
+| `skipLobby` (deprecated: use `intent` instead) | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
+| `theme`                                        | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
+| `viaServers`                                   | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
+
+### Widget-only parameters
+
+These parameters are only available in widget mode.
+
+| Name            | Values                                                                                    | Required                | Description                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | ----------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `baseUrl`       |                                                                                           | Yes                     | The base URL of the homeserver to use for media lookups.                                                                                                                                                                                                                                                                                           |
+| `deviceId`      | Matrix device ID                                                                          | Yes                     | The Matrix device ID for the widget host.                                                                                                                                                                                                                                                                                                          |
+| `parentUrl`     |                                                                                           | Yes                     | 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) |
+| `preload`       | `true` or `false`                                                                         | No, defaults to `false` | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading.                                                                                                                                                                                                                                            |
+| `returnToLobby` | `true` or `false`                                                                         | No, defaults to `false` | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms.                                                                                                                                                                                                                              |
+| `userId`        | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers)      | Yes                     | The Matrix user ID.                                                                                                                                                                                                                                                                                                                                |
+| `widgetId`      | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes                     | 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`.                                                                                                                                        |

index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <% if (packageType === "full") { %>
+    <link rel="icon" type="image/svg+xml" href="favicon.png" />
+    <link rel="preload" href="/config.json" as="fetch" />
+    <% } %>
+
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <title><%- brand %></title>
+    <script>
+      window.global = window;
+    </script>
+
+    <% if (packageType === "full") { %>
+    <!-- Open graph meta tags -->
+
+    <meta property="og:title" content="<%- brand %>" />
+    <meta
+      property="og:description"
+      content="You're invited to join a call on <%- brand %>"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="favicon.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="<%- brand %>" />
+    <meta
+      name="twitter:description"
+      content="You're invited to join a call on <%- brand %>"
+    />
+    <meta name="twitter:image" content="favicon.png" />
+    <% } %>
+  </head>
+
+  <!-- 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>

knip.ts

@@ -1,6 +1,9 @@
 import { KnipConfig } from "knip";
 
 export default {
+  vite: {
+    config: ["vite.config.js", "vite-embedded.config.js"],
+  },
   entry: ["src/main.tsx", "i18next-parser.config.ts"],
   ignoreBinaries: [
     // This is deprecated, so Knip doesn't actually recognize it as a globally

locales/bg/app.json

@@ -19,11 +19,9 @@
   "common": {
     "audio": "Звук",
     "avatar": "Аватар",
-    "camera": "Камера",
     "display_name": "Име/псевдоним",
     "home": "Начало",
     "loading": "Зареждане…",
-    "microphone": "Микрофон",
     "password": "Парола",
     "profile": "Профил",
     "settings": "Настройки",
@@ -61,9 +59,7 @@
   "settings": {
     "developer_tab_title": "Разработчик",
     "feedback_tab_h4": "Изпрати обратна връзка",
-    "feedback_tab_send_logs_label": "Включи debug логове",
-    "more_tab_title": "Още",
-    "speaker_device_selection_label": "Говорител"
+    "feedback_tab_send_logs_label": "Включи debug логове"
   },
   "unauthenticated_view_body": "Все още не сте регистрирани? <2>Създайте акаунт</2>",
   "unauthenticated_view_login_button": "Влезте в акаунта си",

locales/cs/app.json

@@ -17,18 +17,14 @@
     "not_now_button": "Teď ne, vrátit se na domovskou obrazovku"
   },
   "common": {
-    "camera": "Kamera",
     "display_name": "Zobrazované jméno",
     "home": "Domov",
     "loading": "Načítání…",
-    "microphone": "Mikrofon",
     "password": "Heslo",
     "profile": "Profil",
     "settings": "Nastavení",
     "username": "Uživatelské jméno"
   },
-  "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>",
   "header_label": "Domov Element Call",
   "join_existing_call_modal": {
     "join_button": "Ano, připojit se",
@@ -60,13 +56,9 @@
   "return_home_button": "Vrátit se na domácí obrazovku",
   "screenshare_button_label": "Sdílet obrazovku",
   "settings": {
-    "developer_settings_label": "Vývojářské nastavení",
-    "developer_settings_label_description": "Zobrazit vývojářské nastavení.",
     "developer_tab_title": "Vývojář",
     "feedback_tab_h4": "Dát feedback",
-    "feedback_tab_send_logs_label": "Zahrnout ladící záznamy",
-    "more_tab_title": "Více",
-    "speaker_device_selection_label": "Reproduktor"
+    "feedback_tab_send_logs_label": "Zahrnout ladící záznamy"
   },
   "unauthenticated_view_body": "Nejste registrovaní? <2>Vytvořit účet</2>",
   "unauthenticated_view_login_button": "Přihlásit se ke svému účtu",

locales/de/app.json

@@ -28,11 +28,7 @@
     "text": "Bereit, beizutreten?",
     "title": "App auswählen"
   },
-  "application_opened_another_tab": "Diese Anwendung wurde in einem anderen Tab geöffnet.",
-  "browser_media_e2ee_unsupported": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117",
-  "browser_media_e2ee_unsupported_heading": "Inkompatibler Browser",
   "call_ended_view": {
-    "body": "Deine Verbindung wurde getrennt",
     "create_account_button": "Konto erstellen",
     "create_account_prompt": "<0>Warum vergibst du nicht abschließend ein Passwort, um dein Konto zu erhalten?</0><1>Du kannst deinen Namen behalten und ein Profilbild für zukünftige Anrufe festlegen.</1>",
     "feedback_done": "<0>Danke für deine Rückmeldung!</0>",
@@ -48,13 +44,10 @@
     "audio": "Audio",
     "avatar": "Profilbild",
     "back": "Zurück",
-    "camera": "Kamera",
     "display_name": "Anzeigename",
     "encrypted": "Verschlüsselt",
-    "error": "Fehler",
     "home": "Startseite",
     "loading": "Lade …",
-    "microphone": "Mikrofon",
     "next": "Weiter",
     "options": "Optionen",
     "password": "Passwort",
@@ -63,30 +56,49 @@
     "reaction": "Reaktion",
     "reactions": "Reaktionen",
     "settings": "Einstellungen",
-    "something_went_wrong": "Etwas ist schief gelaufen",
     "unencrypted": "Nicht verschlüsselt",
     "username": "Benutzername",
     "video": "Video"
   },
   "developer_mode": {
-    "crypto_version": "Krypto-Version:{{version}}",
+    "crypto_version": "Krypto-Version: {{version}}",
+    "debug_tile_layout_label": "Kachel-Layout debuggen",
     "device_id": "Geräte-ID: {{id}}",
     "duplicate_tiles_label": "Anzahl zusätzlicher Kachelkopien pro Teilnehmer",
-    "matrix_id": "Matrix-ID: {{id}}"
+    "hostname": "Hostname: {{hostname}}",
+    "livekit_server_info": "LiveKit-Server Informationen",
+    "livekit_sfu": "LiveKit SFU: {{url}}",
+    "matrix_id": "Matrix-ID: {{id}}",
+    "show_connection_stats": "Verbindungsstatistiken anzeigen",
+    "show_non_member_tiles": "Kacheln für Nicht-Mitgliedermedien anzeigen",
+    "use_new_membership_manager": "Neuen MembershipManager verwenden"
   },
   "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
-  "full_screen_view_description": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
-  "full_screen_view_h1": "<0>Hoppla, etwas ist schiefgelaufen.</0>",
+  "error": {
+    "call_is_not_supported": "Anrufe werden nicht unterstützt",
+    "call_not_found": "Anruf nicht gefunden",
+    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <1> erstellen Sie einen neuen</1>. </0>",
+    "connection_lost": "Verbindung verloren",
+    "connection_lost_description": "Ihre Verbindung zum Anruf wurde unterbrochen.",
+    "e2ee_unsupported": "Inkompatibler Browser",
+    "e2ee_unsupported_description": "Ihr Webbrowser unterstützt keine verschlüsselten Anrufe. Zu den unterstützten Browsern gehören Chrome, Safari und Firefox 117+.",
+    "generic": "Etwas ist schief gelaufen",
+    "generic_description": "Durch das Senden von Debugprotokollen können wir das Problem leichter eingrenzen.",
+    "insufficient_capacity": "Unzureichende Kapazität",
+    "insufficient_capacity_description": "Der Server hat seine maximale Kapazität erreicht, daher ist ein Beitritt zum Anruf derzeit nicht möglich. Bitte später erneut versuchen oder den Serveradministrator kontaktieren, falls das Problem weiterhin besteht.",
+    "matrix_rtc_focus_missing": "Der Server ist nicht für die Verwendung mit {{brand}} konfiguriert. Bitte den Serveradministrator kontaktieren (Domain: {{domain}}, Fehlercode: {{ errorCode }}).",
+    "open_elsewhere": "In einem anderen Tab geöffnet",
+    "open_elsewhere_description": "{{brand}} wurde in einem anderen Tab geöffnet. Wenn das nicht richtig klingt, versuchen Sie, die Seite neu zu laden.",
+    "unexpected_ec_error": "Ein unerwarteter Fehler ist aufgetreten (<0>Fehlercode: </0> <1>{{ errorCode }}</1>). Bitte den Serveradministrator kontaktieren."
+  },
   "group_call_loader": {
     "banned_body": "Du wurdest aus dem Raum verbannt.",
     "banned_heading": "Verbannt",
     "call_ended_body": "Du wurdest aus dem Anruf entfernt.",
     "call_ended_heading": "Anruf beendet",
-    "failed_heading": "Beitreten fehlgeschlagen",
-    "failed_text": "Anruf nicht gefunden oder Beitritt nicht erlaubt",
     "knock_reject_body": "Die Teilnahmeanfrage wurde abgelehnt.",
     "knock_reject_heading": "Zugriff verweigert",
-    "reason": "Grund"
+    "reason": "Grund: {{reason}}"
   },
   "hangup_button_label": "Anruf beenden",
   "header_label": "Element Call-Startseite",
@@ -146,32 +158,38 @@
   "screenshare_button_label": "Bildschirm teilen",
   "settings": {
     "audio_tab": {
-      "effect_volume_description": "Lautstärke anpassen, mit der Reaktionen und Handmeldungen abgespielt werden",
+      "effect_volume_description": "Lautstärke anpassen, mit der Reaktionen und Handmeldungen abgespielt werden.",
       "effect_volume_label": "Lautstärke der Soundeffekte"
     },
-    "developer_settings_label": "Entwicklereinstellungen",
-    "developer_settings_label_description": "Zeige die Entwicklereinstellungen im Einstellungsfenster.",
     "developer_tab_title": "Entwickler",
+    "devices": {
+      "camera": "Kamera",
+      "camera_numbered": "Kamera {{n}}",
+      "default": "Standard",
+      "default_named": "Standard<2> ({{name}} )</2>",
+      "microphone": "Mikrofon",
+      "microphone_numbered": "Mikrofon{{n}}",
+      "speaker": "Lautsprecher",
+      "speaker_numbered": "Lautsprecher{{n}}"
+    },
     "feedback_tab_body": "Falls du auf Probleme stößt oder einfach nur eine Rückmeldung geben möchtest, sende uns bitte eine kurze Beschreibung.",
     "feedback_tab_description_label": "Deine Rückmeldung",
     "feedback_tab_h4": "Rückmeldung geben",
     "feedback_tab_send_logs_label": "Debug-Protokolle anhängen",
     "feedback_tab_thank_you": "Danke, wir haben deine Rückmeldung erhalten!",
     "feedback_tab_title": "Rückmeldung",
-    "more_tab_title": "Mehr",
     "opt_in_description": "<0></0><1></1>Du kannst deine Zustimmung durch Abwählen dieses Kästchens zurückziehen. Falls du dich aktuell in einem Anruf befindest, wird diese Einstellung nach dem Ende des Anrufs wirksam.",
     "preferences_tab": {
-      "reactions_play_sound_description": "Einen Soundeffekt abspielen, wenn jemand eine Reaktion sendet",
+      "developer_mode_label": "Entwickler-Modus",
+      "developer_mode_label_description": "Aktivieren Sie den Entwicklermodus und zeigen Sie die Registerkarte mit den Entwicklereinstellungen an.",
+      "introduction": "Hier können zusätzliche Optionen für individuelle Anforderungen eingestellt werden.",
+      "reactions_play_sound_description": "Spielen Sie einen Soundeffekt ab, wenn jemand eine Reaktion auf einen Anruf sendet.",
       "reactions_play_sound_label": "Reaktionstöne abspielen",
       "reactions_show_description": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
       "reactions_show_label": "Reaktionen anzeigen",
-      "reactions_title": "Reaktionen"
-    },
-    "preferences_tab_body": "Hier können zusätzliche Optionen für individuelle Anforderungen eingestellt werden",
-    "preferences_tab_h4": "Einstellungen",
-    "preferences_tab_show_hand_raised_timer_description": "Einen Timer zur Handmeldung anzeigen",
-    "preferences_tab_show_hand_raised_timer_label": "Dauer der Handmeldung anzeigen",
-    "speaker_device_selection_label": "Lautsprecher"
+      "show_hand_raised_timer_description": "Einen Timer zur Handmeldung anzeigen",
+      "show_hand_raised_timer_label": "Dauer der Handmeldung anzeigen"
+    }
   },
   "star_rating_input_label_one": "{{count}} Stern",
   "star_rating_input_label_other": "{{count}} Sterne",
@@ -188,11 +206,13 @@
   "version": "{{productName}} Version: {{version}}",
   "video_tile": {
     "always_show": "Immer anzeigen",
+    "camera_starting": "Video wird geladen...",
     "change_fit_contain": "An Fenster anpassen",
     "collapse": "Minimieren",
     "expand": "Erweitern",
     "mute_for_me": "Für mich stumm schalten",
     "muted_for_me": "Für mich stumm geschaltet",
-    "volume": "Lautstärke"
+    "volume": "Lautstärke",
+    "waiting_for_media": "Warten auf Medien..."
   }
 }

locales/el/app.json

@@ -24,19 +24,15 @@
   },
   "common": {
     "audio": "Ήχος",
-    "camera": "Κάμερα",
     "display_name": "Εμφανιζόμενο όνομα",
     "home": "Αρχική",
     "loading": "Φόρτωση…",
-    "microphone": "Μικρόφωνο",
     "password": "Κωδικός",
     "profile": "Προφίλ",
     "settings": "Ρυθμίσεις",
     "username": "Όνομα χρήστη",
     "video": "Βίντεο"
   },
-  "full_screen_view_description": "<0>Η υποβολή αρχείων καταγραφής σφαλμάτων θα μας βοηθήσει να εντοπίσουμε το πρόβλημα.</0>",
-  "full_screen_view_h1": "<0>Ωχ, κάτι πήγε στραβά.</0>",
   "header_label": "Element Κεντρική Οθόνη Κλήσεων",
   "join_existing_call_modal": {
     "join_button": "Ναι, συμμετοχή στην κλήση",
@@ -67,8 +63,6 @@
   "return_home_button": "Επιστροφή στην αρχική οθόνη",
   "screenshare_button_label": "Κοινή χρήση οθόνης",
   "settings": {
-    "developer_settings_label": "Ρυθμίσεις προγραμματιστή",
-    "developer_settings_label_description": "Εμφάνιση ρυθμίσεων προγραμματιστή στο παράθυρο ρυθμίσεων.",
     "developer_tab_title": "Προγραμματιστής",
     "feedback_tab_body": "Εάν αντιμετωπίζετε προβλήματα ή απλά θέλετε να μας δώσετε κάποια σχόλια, παρακαλούμε στείλτε μας μια σύντομη περιγραφή παρακάτω.",
     "feedback_tab_description_label": "Τα σχόλιά σας",
@@ -76,9 +70,7 @@
     "feedback_tab_send_logs_label": "Να συμπεριληφθούν αρχεία καταγραφής",
     "feedback_tab_thank_you": "Ευχαριστούμε, λάβαμε τα σχόλιά σας!",
     "feedback_tab_title": "Ανατροφοδότηση",
-    "more_tab_title": "Περισσότερα",
-    "opt_in_description": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
-    "speaker_device_selection_label": "Ηχείο"
+    "opt_in_description": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της."
   },
   "star_rating_input_label_one": "{{count}} αστέρι",
   "star_rating_input_label_other": "{{count}} αστέρια",

locales/en/app.json

@@ -28,11 +28,7 @@
     "text": "Ready to join?",
     "title": "Select app"
   },
-  "application_opened_another_tab": "This application has been opened in another tab.",
-  "browser_media_e2ee_unsupported": "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117",
-  "browser_media_e2ee_unsupported_heading": "Incompatible Browser",
   "call_ended_view": {
-    "body": "You were disconnected from the call",
     "create_account_button": "Create account",
     "create_account_prompt": "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>",
     "feedback_done": "<0>Thanks for your feedback!</0>",
@@ -48,13 +44,10 @@
     "audio": "Audio",
     "avatar": "Avatar",
     "back": "Back",
-    "camera": "Camera",
     "display_name": "Display name",
     "encrypted": "Encrypted",
-    "error": "Error",
     "home": "Home",
     "loading": "Loading…",
-    "microphone": "Microphone",
     "next": "Next",
     "options": "Options",
     "password": "Password",
@@ -63,31 +56,49 @@
     "reaction": "Reaction",
     "reactions": "Reactions",
     "settings": "Settings",
-    "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",
     "username": "Username",
     "video": "Video"
   },
   "developer_mode": {
     "crypto_version": "Crypto version: {{version}}",
+    "debug_tile_layout_label": "Debug tile layout",
     "device_id": "Device ID: {{id}}",
     "duplicate_tiles_label": "Number of additional tile copies per participant",
     "hostname": "Hostname: {{hostname}}",
-    "matrix_id": "Matrix ID: {{id}}"
+    "livekit_server_info": "LiveKit Server Info",
+    "livekit_sfu": "LiveKit SFU: {{url}}",
+    "matrix_id": "Matrix ID: {{id}}",
+    "show_connection_stats": "Show connection statistics",
+    "show_non_member_tiles": "Show tiles for non-member media",
+    "use_new_membership_manager": "Use the new implementation of the call MembershipManager"
   },
   "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>",
+  "error": {
+    "call_is_not_supported": "Call is not supported",
+    "call_not_found": "Call not found",
+    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <1>create a new one</1>.</0>",
+    "connection_lost": "Connection lost",
+    "connection_lost_description": "You were disconnected from the call.",
+    "e2ee_unsupported": "Incompatible browser",
+    "e2ee_unsupported_description": "Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.",
+    "generic": "Something went wrong",
+    "generic_description": "Submitting debug logs will help us track down the problem.",
+    "insufficient_capacity": "Insufficient capacity",
+    "insufficient_capacity_description": "The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.",
+    "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
+    "open_elsewhere": "Opened in another tab",
+    "open_elsewhere_description": "{{brand}} has been opened in another tab. If that doesn't sound right, try reloading the page.",
+    "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
+  },
   "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": "Your request to join was declined.",
     "knock_reject_heading": "Access denied",
-    "reason": "Reason"
+    "reason": "Reason: {{reason}}"
   },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
@@ -147,32 +158,38 @@
   "screenshare_button_label": "Share screen",
   "settings": {
     "audio_tab": {
-      "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play",
+      "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play.",
       "effect_volume_label": "Sound effect volume"
     },
-    "developer_settings_label": "Developer Settings",
-    "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
+    "devices": {
+      "camera": "Camera",
+      "camera_numbered": "Camera {{n}}",
+      "default": "Default",
+      "default_named": "Default <2>({{name}})</2>",
+      "microphone": "Microphone",
+      "microphone_numbered": "Microphone {{n}}",
+      "speaker": "Speaker",
+      "speaker_numbered": "Speaker {{n}}"
+    },
     "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
     "feedback_tab_description_label": "Your feedback",
     "feedback_tab_h4": "Submit feedback",
     "feedback_tab_send_logs_label": "Include debug logs",
     "feedback_tab_thank_you": "Thanks, we received your feedback!",
     "feedback_tab_title": "Feedback",
-    "more_tab_title": "More",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
     "preferences_tab": {
+      "developer_mode_label": "Developer mode",
+      "developer_mode_label_description": "Enable developer mode and show developer settings tab.",
+      "introduction": "Here you can configure extra options for an improved experience.",
       "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
       "reactions_play_sound_label": "Play reaction sounds",
       "reactions_show_description": "Show an animation when anyone sends a reaction.",
       "reactions_show_label": "Show reactions",
-      "reactions_title": "Reactions"
-    },
-    "preferences_tab_body": "Here you can configure extra options for an improved experience",
-    "preferences_tab_h4": "Preferences",
-    "preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
-    "preferences_tab_show_hand_raised_timer_label": "Show hand raise duration",
-    "speaker_device_selection_label": "Speaker"
+      "show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
+      "show_hand_raised_timer_label": "Show hand raise duration"
+    }
   },
   "star_rating_input_label_one": "{{count}} star",
   "star_rating_input_label_other": "{{count}} stars",
@@ -189,6 +206,7 @@
   "version": "{{productName}} version: {{version}}",
   "video_tile": {
     "always_show": "Always show",
+    "camera_starting": "Video loading...",
     "change_fit_contain": "Fit to frame",
     "collapse": "Collapse",
     "expand": "Expand",

locales/es/app.json

@@ -22,18 +22,14 @@
     "survey_prompt": "¿Cómo ha ido?"
   },
   "common": {
-    "camera": "Cámara",
     "display_name": "Nombre a mostrar",
     "home": "Inicio",
     "loading": "Cargando…",
-    "microphone": "Micrófono",
     "password": "Contraseña",
     "profile": "Perfil",
     "settings": "Ajustes",
     "username": "Nombre de usuario"
   },
-  "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>",
   "header_label": "Inicio de Element Call",
   "join_existing_call_modal": {
     "join_button": "Si, unirse a la llamada",
@@ -67,8 +63,6 @@
   "room_auth_view_eula_caption": "Al hacer clic en \"Unirse a la llamada ahora\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
   "screenshare_button_label": "Compartir pantalla",
   "settings": {
-    "developer_settings_label": "Ajustes de desarrollador",
-    "developer_settings_label_description": "Muestra los ajustes de desarrollador en la ventana de ajustes.",
     "developer_tab_title": "Desarrollador",
     "feedback_tab_body": "Si tienes algún problema o simplemente quieres darnos tu opinión, por favor envíanos una breve descripción.",
     "feedback_tab_description_label": "Tus comentarios",
@@ -76,9 +70,7 @@
     "feedback_tab_send_logs_label": "Incluir registros de depuración",
     "feedback_tab_thank_you": "¡Gracias, hemos recibido tus comentarios!",
     "feedback_tab_title": "Danos tu opinión",
-    "more_tab_title": "Más",
-    "opt_in_description": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta.",
-    "speaker_device_selection_label": "Altavoz"
+    "opt_in_description": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta."
   },
   "star_rating_input_label_one": "{{count}} estrella",
   "star_rating_input_label_other": "{{count}} estrellas",

locales/et/app.json

@@ -21,9 +21,7 @@
     "text": "Oled valmis liituma?",
     "title": "Vali rakendus"
   },
-  "browser_media_e2ee_unsupported": "Sinu veebibrauser ei toeta meedia läbivat krüptimist. Toetatud brauserid on Chrome, Chromium, Safari ja Firefox >=117",
   "call_ended_view": {
-    "body": "Sinu ühendus kõnega katkes",
     "create_account_button": "Loo konto",
     "create_account_prompt": "<0>Kas soovid salasõna seadistada ja sellega oma kasutajakonto alles jätta?</0><1>Nii saad säilitada oma nime ja määrata profiilipildi, mida saad kasutada tulevastes kõnedes</1>",
     "feedback_done": "<0>Täname Sind tagasiside eest!</0>",
@@ -37,12 +35,10 @@
   "common": {
     "audio": "Heli",
     "avatar": "Tunnuspilt",
-    "camera": "Kaamera",
     "display_name": "Kuvatav nimi",
     "encrypted": "Krüptitud",
     "home": "Avavaatesse",
     "loading": "Laadimine …",
-    "microphone": "Mikrofon",
     "password": "Salasõna",
     "profile": "Profiil",
     "settings": "Seadistused",
@@ -50,8 +46,6 @@
     "username": "Kasutajanimi"
   },
   "disconnected_banner": "Võrguühendus serveriga on katkenud.",
-  "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>",
   "hangup_button_label": "Lõpeta kõne",
   "header_participants_label": "Osalejad",
   "invite_modal": {
@@ -97,8 +91,6 @@
   "room_auth_view_eula_caption": "Klõpsides „Liitu kõnega kohe“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
   "screenshare_button_label": "Jaga ekraani",
   "settings": {
-    "developer_settings_label": "Arendaja seadistused",
-    "developer_settings_label_description": "Näita seadistuste aknas arendajale vajalikke seadeid.",
     "developer_tab_title": "Arendaja",
     "feedback_tab_body": "Kui selle rakenduse kasutamisel tekib sul probleeme või lihtsalt soovid oma arvamust avaldada, siis palun täida alljärgnev lühike kirjeldus.",
     "feedback_tab_description_label": "Sinu tagasiside",
@@ -106,9 +98,7 @@
     "feedback_tab_send_logs_label": "Lisa veatuvastuslogid",
     "feedback_tab_thank_you": "Tänud, me oleme sinu tagasiside kätte saanud!",
     "feedback_tab_title": "Tagasiside",
-    "more_tab_title": "Rohkem",
-    "opt_in_description": "<0></0><1></1>Sa võid selle valiku eelmaldamisega alati oma nõusoleku tagasi võtta. Kui sul parasjagu on kõne pooleli, siis seadistuste muudatus jõustub pärast kõne lõppu.",
-    "speaker_device_selection_label": "Kõlar"
+    "opt_in_description": "<0></0><1></1>Sa võid selle valiku eelmaldamisega alati oma nõusoleku tagasi võtta. Kui sul parasjagu on kõne pooleli, siis seadistuste muudatus jõustub pärast kõne lõppu."
   },
   "star_rating_input_label_one": "{{count}} tärni",
   "star_rating_input_label_other": "{{count}} tärni",

locales/fa/app.json

@@ -19,11 +19,9 @@
   "common": {
     "audio": "صدا",
     "avatar": "آواتار",
-    "camera": "دوربین",
     "display_name": "نام نمایشی",
     "home": "خانه",
     "loading": "بارگزاری…",
-    "microphone": "میکروفون",
     "password": "رمز عبور",
     "profile": "پروفایل",
     "settings": "تنظیمات",
@@ -63,9 +61,7 @@
   "settings": {
     "developer_tab_title": "توسعه دهنده",
     "feedback_tab_h4": "بازخورد ارائه دهید",
-    "feedback_tab_send_logs_label": "شامل لاگ‌های عیب‌یابی",
-    "more_tab_title": "بیشتر",
-    "speaker_device_selection_label": "بلندگو"
+    "feedback_tab_send_logs_label": "شامل لاگ‌های عیب‌یابی"
   },
   "unauthenticated_view_body": "هنوز ثبت‌نام نکرده‌اید؟ <2>ساخت حساب کاربری</2>",
   "unauthenticated_view_login_button": "به حساب کاربری خود وارد شوید",

locales/fr/app.json

@@ -21,9 +21,7 @@
     "text": "Prêt à rejoindre ?",
     "title": "Choisissez l’application"
   },
-  "browser_media_e2ee_unsupported": "Votre navigateur web ne prend pas en charge le chiffrement de bout-en-bout des médias. Les navigateurs pris en charge sont Chrome, Safari, Firefox >= 117",
   "call_ended_view": {
-    "body": "Vous avez été déconnecté de l’appel",
     "create_account_button": "Créer un compte",
     "create_account_prompt": "<0>Pourquoi ne pas créer un mot de passe pour conserver votre compte ?</0><1>Vous pourrez garder votre nom et définir un avatar pour vos futurs appels</1>",
     "feedback_done": "<0>Merci pour votre commentaire !</0>",
@@ -35,7 +33,6 @@
   },
   "call_name": "Nom de l’appel",
   "common": {
-    "camera": "Caméra",
     "display_name": "Nom d’affichage",
     "encrypted": "Chiffré",
     "home": "Accueil",
@@ -48,8 +45,6 @@
     "video": "Vidéo"
   },
   "disconnected_banner": "La connexion avec le serveur a été perdue.",
-  "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>",
   "hangup_button_label": "Terminer l’appel",
   "header_label": "Accueil Element Call",
   "invite_modal": {
@@ -95,8 +90,6 @@
   "room_auth_view_eula_caption": "En cliquant sur « Rejoindre l’appel maintenant », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
   "screenshare_button_label": "Partage d’écran",
   "settings": {
-    "developer_settings_label": "Paramètres développeurs",
-    "developer_settings_label_description": "Affiche les paramètres développeurs dans la fenêtre des paramètres.",
     "developer_tab_title": "Développeur",
     "feedback_tab_body": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, faites-en une courte description ci-dessous.",
     "feedback_tab_description_label": "Votre commentaire",
@@ -104,9 +97,7 @@
     "feedback_tab_send_logs_label": "Inclure les journaux de débogage",
     "feedback_tab_thank_you": "Merci, nous avons reçu vos commentaires !",
     "feedback_tab_title": "Commentaires",
-    "more_tab_title": "Plus",
-    "opt_in_description": "<0></0><1></1>Vous pouvez retirer votre consentement en décochant cette case. Si vous êtes actuellement en communication, ce paramètre prendra effet à la fin de l’appel.",
-    "speaker_device_selection_label": "Intervenant"
+    "opt_in_description": "<0></0><1></1>Vous pouvez retirer votre consentement en décochant cette case. Si vous êtes actuellement en communication, ce paramètre prendra effet à la fin de l’appel."
   },
   "star_rating_input_label_one": "{{count}} favori",
   "star_rating_input_label_other": "{{count}} favoris",

locales/id/app.json

@@ -21,9 +21,7 @@
     "text": "Siap untuk bergabung?",
     "title": "Pilih plikasi"
   },
-  "browser_media_e2ee_unsupported": "Peramban web Anda tidak mendukung enkripsi media ujung ke ujung. Peramban yang didukung adalah Chrome, Safari, dan Firefox >=117",
   "call_ended_view": {
-    "body": "Anda terputus dari panggilan",
     "create_account_button": "Buat akun",
     "create_account_prompt": "<0>Kenapa tidak selesaikan dengan mengatur sebuah kata sandi untuk menjaga akun Anda?</0><1>Anda akan dapat tetap menggunakan nama Anda dan atur sebuah avatar untuk digunakan dalam panggilan di masa mendatang</1>",
     "feedback_done": "<0>Terima kasih atas masukan Anda!</0>",
@@ -35,12 +33,10 @@
   },
   "call_name": "Nama panggilan",
   "common": {
-    "camera": "Kamera",
     "display_name": "Nama tampilan",
     "encrypted": "Terenkripsi",
     "home": "Beranda",
     "loading": "Memuat…",
-    "microphone": "Mikrofon",
     "password": "Kata sandi",
     "profile": "Profil",
     "settings": "Pengaturan",
@@ -48,8 +44,6 @@
     "username": "Nama pengguna"
   },
   "disconnected_banner": "Koneksi ke server telah hilang.",
-  "full_screen_view_description": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
-  "full_screen_view_h1": "<0>Aduh, ada yang salah.</0>",
   "hangup_button_label": "Akhiri panggilan",
   "header_label": "Beranda Element Call",
   "header_participants_label": "Peserta",
@@ -96,8 +90,6 @@
   "room_auth_view_eula_caption": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2> kami",
   "screenshare_button_label": "Bagikan layar",
   "settings": {
-    "developer_settings_label": "Pengaturan Pengembang",
-    "developer_settings_label_description": "Ekspos pengaturan pengembang dalam jendela pengaturan.",
     "developer_tab_title": "Pengembang",
     "feedback_tab_body": "Jika Anda mengalami masalah atau hanya ingin memberikan masukan, silakan kirimkan kami deskripsi pendek di bawah.",
     "feedback_tab_description_label": "Masukan Anda",
@@ -105,9 +97,7 @@
     "feedback_tab_send_logs_label": "Termasuk catatan pengawakutuan",
     "feedback_tab_thank_you": "Terima kasih, kami telah menerima masukan Anda!",
     "feedback_tab_title": "Masukan",
-    "more_tab_title": "Lainnya",
-    "opt_in_description": "<0></0><1></1>Anda dapat mengurungkan kembali izin dengan mencentang kotak ini. Jika Anda saat ini dalam panggilan, pengaturan ini akan diterapkan di akhir panggilan.",
-    "speaker_device_selection_label": "Pembicara"
+    "opt_in_description": "<0></0><1></1>Anda dapat mengurungkan kembali izin dengan mencentang kotak ini. Jika Anda saat ini dalam panggilan, pengaturan ini akan diterapkan di akhir panggilan."
   },
   "star_rating_input_label_one": "{{count}} bintang",
   "star_rating_input_label_other": "{{count}} bintang",

locales/it/app.json

@@ -20,9 +20,7 @@
     "text": "Tutto pronto per entrare?",
     "title": "Seleziona app"
   },
-  "browser_media_e2ee_unsupported": "Il tuo browser non supporta la crittografia end-to-end dei media. I browser supportati sono Chrome, Safari, Firefox >=117",
   "call_ended_view": {
-    "body": "Sei stato disconnesso dalla chiamata",
     "create_account_button": "Crea profilo",
     "create_account_prompt": "<0>Ti va di terminare impostando una password per mantenere il profilo?</0><1>Potrai mantenere il tuo nome e impostare un avatar da usare in chiamate future</1>",
     "feedback_done": "<0>Grazie per la tua opinione!</0>",
@@ -34,20 +32,16 @@
   },
   "call_name": "Nome della chiamata",
   "common": {
-    "camera": "Fotocamera",
     "display_name": "Il tuo nome",
     "encrypted": "Cifrata",
     "home": "Pagina iniziale",
     "loading": "Caricamento…",
-    "microphone": "Microfono",
     "profile": "Profilo",
     "settings": "Impostazioni",
     "unencrypted": "Non cifrata",
     "username": "Nome utente"
   },
   "disconnected_banner": "La connessione al server è stata persa.",
-  "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>",
   "hangup_button_label": "Termina chiamata",
   "header_label": "Inizio di Element Call",
   "header_participants_label": "Partecipanti",
@@ -94,17 +88,13 @@
   "room_auth_view_eula_caption": "Cliccando \"Entra in chiamata ora\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
   "screenshare_button_label": "Condividi schermo",
   "settings": {
-    "developer_settings_label": "Impostazioni per sviluppatori",
-    "developer_settings_label_description": "Mostra le impostazioni per sviluppatori nella finestra delle impostazioni.",
     "developer_tab_title": "Sviluppatore",
     "feedback_tab_body": "Se stai riscontrando problemi o semplicemente vuoi dare un'opinione, inviaci una breve descrizione qua sotto.",
     "feedback_tab_description_label": "Il tuo commento",
     "feedback_tab_h4": "Invia commento",
     "feedback_tab_send_logs_label": "Includi registri di debug",
     "feedback_tab_thank_you": "Grazie, abbiamo ricevuto il tuo commento!",
-    "more_tab_title": "Altro",
-    "opt_in_description": "<0></0><1></1>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa.",
-    "speaker_device_selection_label": "Altoparlante"
+    "opt_in_description": "<0></0><1></1>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa."
   },
   "star_rating_input_label_one": "{{count}} stelle",
   "star_rating_input_label_other": "{{count}} stelle",

locales/ja/app.json

@@ -17,18 +17,15 @@
   "common": {
     "audio": "音声",
     "avatar": "アバター",
-    "camera": "カメラ",
     "display_name": "表示名",
     "home": "ホーム",
     "loading": "読み込んでいます…",
-    "microphone": "マイク",
     "password": "パスワード",
     "profile": "プロフィール",
     "settings": "設定",
     "username": "ユーザー名",
     "video": "ビデオ"
   },
-  "full_screen_view_h1": "<0>何かがうまく行きませんでした。</0>",
   "header_label": "Element Call ホーム",
   "join_existing_call_modal": {
     "join_button": "はい、通話に参加",
@@ -59,8 +56,7 @@
   "settings": {
     "developer_tab_title": "開発者",
     "feedback_tab_h4": "フィードバックを送信",
-    "feedback_tab_send_logs_label": "デバッグログを含める",
-    "speaker_device_selection_label": "スピーカー"
+    "feedback_tab_send_logs_label": "デバッグログを含める"
   },
   "unauthenticated_view_body": "アカウントがありませんか？ <2>アカウントを作成</2>",
   "unauthenticated_view_login_button": "アカウントにログイン",

locales/lv/app.json

@@ -14,7 +14,6 @@
   },
   "analytics_notice": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
   "call_ended_view": {
-    "body": "Tu tiki atvienots no zvana",
     "create_account_button": "Izveidot kontu",
     "create_account_prompt": "<0>Kādēļ nepabeigt ar paroles iestatīšanu, lai paturētu savu kontu?</0><1>Būs iespējams paturēt savu vārdu un iestatīt attēlu izmantošanai turpmākajos zvanos</1>",
     "feedback_done": "<0>Paldies par atsauksmi!</0>",
@@ -27,19 +26,15 @@
   "common": {
     "audio": "Skaņa",
     "avatar": "Attēls",
-    "camera": "Kamera",
     "display_name": "Attēlojamais vārds",
     "home": "Sākums",
     "loading": "Lādējas…",
-    "microphone": "Mikrofons",
     "password": "Parole",
     "profile": "Profils",
     "settings": "Iestatījumi",
     "username": "Lietotājvārds"
   },
   "disconnected_banner": "Ir zaudēts savienojums ar serveri.",
-  "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>",
   "header_label": "Element Call sākums",
   "join_existing_call_modal": {
     "join_button": "Jā, pievienoties zvanam",
@@ -75,8 +70,6 @@
   "room_auth_view_eula_caption": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
   "screenshare_button_label": "Kopīgot ekrānu",
   "settings": {
-    "developer_settings_label": "Izstrādātāja iestatījumi",
-    "developer_settings_label_description": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
     "developer_tab_title": "Izstrādātājs",
     "feedback_tab_body": "Ja tiek piedzīvoti sarežģījumi vai vienkārši ir vēlme sniegt kādu atsauksmi, lūgums zemāk nosūtīt mums īsu aprakstu.",
     "feedback_tab_description_label": "Tava atsauksme",
@@ -84,9 +77,7 @@
     "feedback_tab_send_logs_label": "Iekļaut atkļūdošanas žurnāla ierakstus",
     "feedback_tab_thank_you": "Paldies, mēs saņēmām atsauksmi!",
     "feedback_tab_title": "Atsauksmes",
-    "more_tab_title": "Vairāk",
-    "opt_in_description": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās.",
-    "speaker_device_selection_label": "Runātājs"
+    "opt_in_description": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās."
   },
   "star_rating_input_label_one": "{{count}} zvaigzne",
   "star_rating_input_label_other": "{{count}} zvaigznes",

locales/pl/app.json

@@ -21,9 +21,7 @@
     "text": "Gotowy, by dołączyć?",
     "title": "Wybierz aplikację"
   },
-  "browser_media_e2ee_unsupported": "Twoja przeglądarka nie wspiera szyfrowania end-to-end. Wspierane przeglądarki to Chrome, Safari, Firefox >=117",
   "call_ended_view": {
-    "body": "Rozłączono Cię z połączenia",
     "create_account_button": "Utwórz konto",
     "create_account_prompt": "<0>Może zechcesz ustawić hasło, aby zachować swoje konto?</0><1>Będziesz w stanie utrzymać swoją nazwę i ustawić awatar do wyświetlania podczas połączeń w przyszłości</1>",
     "feedback_done": "<0>Dziękujemy za Twoją opinię!</0>",
@@ -37,12 +35,10 @@
   "common": {
     "audio": "Dźwięk",
     "avatar": "Awatar",
-    "camera": "Kamera",
     "display_name": "Nazwa wyświetlana",
     "encrypted": "Szyfrowane",
     "home": "Strona domowa",
     "loading": "Ładowanie…",
-    "microphone": "Mikrofon",
     "password": "Hasło",
     "profile": "Profil",
     "settings": "Ustawienia",
@@ -51,8 +47,6 @@
     "video": "Wideo"
   },
   "disconnected_banner": "Utracono połączenie z serwerem.",
-  "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>",
   "hangup_button_label": "Zakończ połączenie",
   "header_label": "Strona główna Element Call",
   "header_participants_label": "Uczestnicy",
@@ -99,8 +93,6 @@
   "room_auth_view_eula_caption": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
   "screenshare_button_label": "Udostępnij ekran",
   "settings": {
-    "developer_settings_label": "Opcje programisty",
-    "developer_settings_label_description": "Wyświetl opcje programisty w oknie ustawień.",
     "developer_tab_title": "Programista",
     "feedback_tab_body": "Jeśli posiadasz problemy lub chciałbyś zgłosić swoją opinię, wyślij nam krótki opis.",
     "feedback_tab_description_label": "Twoje opinie",
@@ -108,9 +100,7 @@
     "feedback_tab_send_logs_label": "Dołącz dzienniki debugowania",
     "feedback_tab_thank_you": "Dziękujemy, otrzymaliśmy Twoją opinię!",
     "feedback_tab_title": "Opinia użytkownika",
-    "more_tab_title": "Więcej",
-    "opt_in_description": "<0></0><1></1>Możesz wycofać swoją zgodę poprzez odznaczenie tego pola. Jeśli już jesteś w trakcie rozmowy, opcja zostanie zastosowana po jej zakończeniu.",
-    "speaker_device_selection_label": "Głośnik"
+    "opt_in_description": "<0></0><1></1>Możesz wycofać swoją zgodę poprzez odznaczenie tego pola. Jeśli już jesteś w trakcie rozmowy, opcja zostanie zastosowana po jej zakończeniu."
   },
   "star_rating_input_label_one": "{{count}} gwiazdki",
   "star_rating_input_label_other": "{{count}} gwiazdki",

locales/ro/app.json

@@ -0,0 +1,174 @@
+{
+  "a11y": {
+    "user_menu": "Meniul utilizatorului"
+  },
+  "action": {
+    "close": "Închide",
+    "copy_link": "Copiază linkul",
+    "edit": "Editare",
+    "go": "Du-te",
+    "invite": "Invită",
+    "lower_hand": "Mâna inferioară",
+    "no": "No",
+    "pick_reaction": "Alegeți reacția",
+    "raise_hand": "Ridicați mâna",
+    "register": "Inregistrare",
+    "remove": "elimina",
+    "show_less": "Arată mai puțin",
+    "show_more": "Arată mai mult",
+    "sign_in": "Autentificare",
+    "sign_out": "Sign out",
+    "submit": "Trimiteți",
+    "upload_file": "Încărcați fișierul"
+  },
+  "analytics_notice": "Prin participarea la această versiune beta, sunteți de acord cu colectarea de date anonime, pe care le folosim pentru a îmbunătăți produsul. Puteți găsi mai multe informații despre datele pe care le urmărim în Politica noastră de <2> confidențialitate </2> și Politica noastră <6> privind cookie-urile</6>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Continuați în browser",
+    "open_in_app": "Deschideți în aplicație",
+    "text": "Sunteți gata să vă alăturați?",
+    "title": "Selectați aplicația"
+  },
+  "call_ended_view": {
+    "create_account_button": "Creează cont",
+    "create_account_prompt": "<0>De ce să nu terminați prin configurarea unei parole pentru a vă păstra contul? </0><1>Veți putea să vă păstrați numele și să setați un avatar pentru a fi utilizat la apelurile viitoare </1>",
+    "feedback_done": "<0>Vă mulțumim pentru feedback! </0>",
+    "feedback_prompt": "<0>Ne-ar plăcea să auzim feedback-ul dvs., astfel încât să vă putem îmbunătăți experiența. </0>",
+    "headline": "{{displayName}}, apelul tău s-a încheiat.",
+    "not_now_button": "Nu acum, reveniți la ecranul de pornire",
+    "reconnect_button": "Reconecta",
+    "survey_prompt": "Cum a mers?"
+  },
+  "call_name": "Numele apelului",
+  "common": {
+    "analytics": "Analiză",
+    "audio": "Audio",
+    "avatar": "avatar",
+    "back": "Înapoi",
+    "display_name": "Nume afișat",
+    "encrypted": "Criptat",
+    "home": "Acasa",
+    "loading": "Se încarcă...",
+    "next": "Urmator\n",
+    "options": "Opțiuni",
+    "password": "Parolă",
+    "preferences": "preferinte",
+    "profile": "Profil",
+    "reaction": "Reacție",
+    "reactions": "Reacții",
+    "settings": "Settings",
+    "unencrypted": "Nu este criptat",
+    "username": "Nume utilizator",
+    "video": "Videoclip"
+  },
+  "developer_mode": {
+    "crypto_version": "Versiunea Crypto: {{version}}",
+    "device_id": "ID-ul dispozitivului: {{id}}",
+    "duplicate_tiles_label": "Numărul de exemplare suplimentare de cartonașe per participant",
+    "hostname": "Numele gazdei: {{hostname}}",
+    "matrix_id": "ID-ul matricei: {{id}}"
+  },
+  "disconnected_banner": "Conectivitatea la server a fost pierdută.",
+  "group_call_loader": {
+    "banned_body": "Ai fost interzis să ieși din cameră.",
+    "banned_heading": "Interzis",
+    "call_ended_body": "Ați fost eliminat din apel.",
+    "call_ended_heading": "Apel încheiat",
+    "knock_reject_body": "Cererea dvs. de a vă alătura a fost respinsă.",
+    "knock_reject_heading": "Acces refuzat",
+    "reason": "Motivul"
+  },
+  "hangup_button_label": "Încheiați apelul",
+  "header_label": "Element Call Home",
+  "header_participants_label": "Participanți",
+  "invite_modal": {
+    "link_copied_toast": "Link copiat în clipboard",
+    "title": "Invitați la acest apel"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Da, alăturați-vă apelului",
+    "text": "Acest apel există deja, doriți să vă alăturați?",
+    "title": "Alăturați-vă apelului existent?"
+  },
+  "layout_grid_label": "GRILĂ",
+  "layout_spotlight_label": "Spotlight",
+  "lobby": {
+    "ask_to_join": "Solicitare de participare la apel",
+    "join_as_guest": "Alăturați-vă ca invitat",
+    "join_button": "Alăturați-vă apelului",
+    "leave_button": "Înapoi la cele mai recente",
+    "waiting_for_invite": "Solicitare trimisă! În așteptarea permisiunii de a participa..."
+  },
+  "log_in": "Autentificare",
+  "logging_in": "Autentificare...",
+  "login_auth_links": "<0>Creați un cont </0> sau <2> accesați ca invitat </2>",
+  "login_auth_links_prompt": "Nu sunteți încă înregistrat?",
+  "login_subheading": "Pentru a continua la Element",
+  "login_title": "Logare",
+  "microphone_off": "Microfon oprit",
+  "microphone_on": "Microfon pornit",
+  "mute_microphone_button_label": "Dezactivați microfonul",
+  "qr_code": "COD QR",
+  "rageshake_button_error_caption": "Încearcă din nou trimiterea jurnalelor",
+  "rageshake_request_modal": {
+    "body": "Un alt utilizator al acestui apel are o problemă. Pentru a diagnostica mai bine aceste probleme, am dori să colectăm un jurnal de depanare.",
+    "title": "Solicitare jurnal de depanare"
+  },
+  "rageshake_send_logs": "Trimiteți jurnale de depanare",
+  "rageshake_sending": "Trimiterea...",
+  "rageshake_sending_logs": "Trimiterea jurnalelor de depanare...",
+  "rageshake_sent": "Multumesc!",
+  "recaptcha_caption": "Acest site este protejat de reCAPTCHA și se aplică Politica de <2> confidențialitate Google </2> și <6> Termenii și condițiile. </6> <9></9>Făcând clic pe „Înregistrare”, sunteți de acord cu Acordul nostru de licențiere pentru utilizatorul <12> final (EULA) </12>",
+  "recaptcha_dismissed": "Recaptcha a fost respins",
+  "recaptcha_not_loaded": "Recaptcha nu a fost încărcat",
+  "register": {
+    "passwords_must_match": "Parolele trebuie să se potrivească",
+    "registering": "Înregistrare..."
+  },
+  "register_auth_links": "<0>Ai deja un cont? </0><1><0>Conectați-vă </0> sau <2> accesați ca invitat </2> </1>",
+  "register_confirm_password_label": "Confirmă Parola",
+  "register_heading": "Creează-ți contul",
+  "return_home_button": "Reveniți la ecranul de pornire",
+  "room_auth_view_continue_button": "Continuă",
+  "room_auth_view_eula_caption": "Făcând clic pe „Continuați”, sunteți de acord cu Acordul nostru de licențiere pentru utilizatorul <2> final (EULA) </2>",
+  "screenshare_button_label": "Partajare ecran",
+  "settings": {
+    "audio_tab": {
+      "effect_volume_description": "Reglați volumul la care reacționează reacțiile și efectele ridicate de mână",
+      "effect_volume_label": "Volumul efectului sonor"
+    },
+    "developer_tab_title": "dezvoltator",
+    "feedback_tab_body": "Dacă întâmpinați probleme sau pur și simplu doriți să oferiți feedback, vă rugăm să ne trimiteți o scurtă descriere mai jos.",
+    "feedback_tab_description_label": "Feedback-ul tău",
+    "feedback_tab_h4": "Trimiteți Feedback",
+    "feedback_tab_send_logs_label": "Includeți jurnale de depanare",
+    "feedback_tab_thank_you": "Vă mulțumim, am primit feedback-ul dvs.!",
+    "feedback_tab_title": "Feedback",
+    "opt_in_description": "<0></0><1></1>Puteți retrage consimțământul debifând această casetă. Dacă sunteți în prezent la un apel, această setare va intra în vigoare la sfârșitul apelului.",
+    "preferences_tab": {
+      "reactions_play_sound_description": "Redați un efect sonor atunci când cineva trimite o reacție la un apel.",
+      "reactions_play_sound_label": "Redați sunete de reacție",
+      "reactions_show_description": "Afișați o animație atunci când cineva trimite o reacție.",
+      "reactions_show_label": "Afișați reacțiile"
+    }
+  },
+  "start_new_call": "Începe un nou apel",
+  "start_video_button_label": "Începeți videoclipul",
+  "stop_screenshare_button_label": "Partajarea ecranului",
+  "stop_video_button_label": "Opriți videoclipul",
+  "submitting": "Trimiterea...",
+  "switch_camera": "Comutați camera",
+  "unauthenticated_view_body": "Nu sunteți încă înregistrat? <2>Creați un cont </2>",
+  "unauthenticated_view_eula_caption": "Făcând clic pe „Go”, sunteți de acord cu Acordul nostru de licențiere pentru utilizatorul <2> final (EULA) </2>",
+  "unauthenticated_view_login_button": "Conectați-vă la contul dvs.",
+  "unmute_microphone_button_label": "Anulează microfonul",
+  "version": "{{productName}}Versiune: {{version}}",
+  "video_tile": {
+    "always_show": "Arată întotdeauna",
+    "change_fit_contain": "Se potrivește cadrului",
+    "collapse": "colaps",
+    "expand": "Extindeți",
+    "mute_for_me": "Mute pentru mine",
+    "muted_for_me": "Dezactivat pentru mine",
+    "volume": "VOLUM"
+  }
+}

locales/ru/app.json

@@ -25,19 +25,15 @@
   "common": {
     "audio": "Аудио",
     "avatar": "Аватар",
-    "camera": "Камера",
     "display_name": "Видимое имя",
     "home": "Начало",
     "loading": "Загрузка…",
-    "microphone": "Микрофон",
     "password": "Пароль",
     "profile": "Профиль",
     "settings": "Настройки",
     "username": "Имя пользователя",
     "video": "Видео"
   },
-  "full_screen_view_description": "<0>Отправка журналов поможет нам найти и устранить проблему.</0>",
-  "full_screen_view_h1": "<0>Упс, что-то пошло не так.</0>",
   "header_label": "Главная Element Call",
   "join_existing_call_modal": {
     "join_button": "Да, присоединиться",
@@ -69,8 +65,6 @@
   "return_home_button": "Вернуться в Начало",
   "screenshare_button_label": "Поделиться экраном",
   "settings": {
-    "developer_settings_label": "Настройки Разработчика",
-    "developer_settings_label_description": "Раскрыть настройки разработчика в окне настроек.",
     "developer_tab_title": "Разработчику",
     "feedback_tab_body": "Если у вас возникли проблемы или вы просто хотите оставить отзыв, отправьте нам краткое описание ниже.",
     "feedback_tab_description_label": "Ваш отзыв",
@@ -78,9 +72,7 @@
     "feedback_tab_send_logs_label": "Приложить журнал отладки",
     "feedback_tab_thank_you": "Спасибо. Мы получили ваш отзыв!",
     "feedback_tab_title": "Отзыв",
-    "more_tab_title": "Больше",
-    "opt_in_description": "<0></0><1></1>Вы можете отозвать согласие, сняв этот флажок. Если вы в данный момент находитесь в разговоре, эта настройка вступит в силу по окончании разговора.",
-    "speaker_device_selection_label": "Динамик"
+    "opt_in_description": "<0></0><1></1>Вы можете отозвать согласие, сняв этот флажок. Если вы в данный момент находитесь в разговоре, эта настройка вступит в силу по окончании разговора."
   },
   "star_rating_input_label_one": "{{count}} отмечен",
   "star_rating_input_label_other": "{{count}} отмеченных",

locales/sk/app.json

@@ -21,9 +21,7 @@
     "text": "Ste pripravení sa pridať?",
     "title": "Vybrať aplikáciu"
   },
-  "browser_media_e2ee_unsupported": "Váš webový prehliadač nepodporuje end-to-end šifrovanie médií. Podporované prehliadače sú Chrome, Safari, Firefox >=117",
   "call_ended_view": {
-    "body": "Boli ste odpojení z hovoru",
     "create_account_button": "Vytvoriť účet",
     "create_account_prompt": "<0>Prečo neskončiť nastavením hesla, aby ste si zachovali svoj účet? </0><1>Budete si môcť ponechať svoje meno a nastaviť obrázok, ktorý sa bude používať pri budúcich hovoroch</1>",
     "feedback_done": "<0> Ďakujeme za vašu spätnú väzbu!</0>",
@@ -36,12 +34,10 @@
   "call_name": "Názov hovoru",
   "common": {
     "avatar": "Obrázok",
-    "camera": "Kamera",
     "display_name": "Zobrazované meno",
     "encrypted": "Šifrované",
     "home": "Domov",
     "loading": "Načítanie…",
-    "microphone": "Mikrofón",
     "password": "Heslo",
     "profile": "Profil",
     "settings": "Nastavenia",
@@ -49,8 +45,6 @@
     "username": "Meno používateľa"
   },
   "disconnected_banner": "Spojenie so serverom sa stratilo.",
-  "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>",
   "hangup_button_label": "Ukončiť hovor",
   "header_label": "Domov Element Call",
   "header_participants_label": "Účastníci",
@@ -97,8 +91,6 @@
   "room_auth_view_eula_caption": "Kliknutím na \"Pripojiť sa k hovoru teraz\" súhlasíte s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
   "screenshare_button_label": "Zdieľať obrazovku",
   "settings": {
-    "developer_settings_label": "Nastavenia pre vývojárov",
-    "developer_settings_label_description": "Zobraziť nastavenia pre vývojárov v okne nastavení.",
     "developer_tab_title": "Vývojár",
     "feedback_tab_body": "Ak máte problémy alebo jednoducho chcete poskytnúť spätnú väzbu, pošlite nám krátky popis nižšie.",
     "feedback_tab_description_label": "Vaša spätná väzba",
@@ -106,9 +98,7 @@
     "feedback_tab_send_logs_label": "Zahrnúť záznamy o ladení",
     "feedback_tab_thank_you": "Ďakujeme, dostali sme vašu spätnú väzbu!",
     "feedback_tab_title": "Spätná väzba",
-    "more_tab_title": "Viac",
-    "opt_in_description": "<0></0><1></1>Súhlas môžete odvolať zrušením označenia tohto políčka. Ak práve prebieha hovor, toto nastavenie nadobudne platnosť po skončení hovoru.",
-    "speaker_device_selection_label": "Reproduktor"
+    "opt_in_description": "<0></0><1></1>Súhlas môžete odvolať zrušením označenia tohto políčka. Ak práve prebieha hovor, toto nastavenie nadobudne platnosť po skončení hovoru."
   },
   "star_rating_input_label_one": "{{count}} hviezdička",
   "star_rating_input_label_other": "{{count}} hviezdičiek",

locales/tr/app.json

@@ -15,11 +15,9 @@
   },
   "common": {
     "audio": "Ses",
-    "camera": "Kamera",
     "display_name": "Ekran adı",
     "home": "Ev",
     "loading": "Yükleniyor…",
-    "microphone": "Mikrofon",
     "password": "Parola",
     "settings": "Ayarlar"
   },
@@ -52,8 +50,7 @@
   "settings": {
     "developer_tab_title": "Geliştirici",
     "feedback_tab_h4": "Geri bildirim ver",
-    "feedback_tab_send_logs_label": "Hata ayıklama kütüğünü dahil et",
-    "more_tab_title": "Daha"
+    "feedback_tab_send_logs_label": "Hata ayıklama kütüğünü dahil et"
   },
   "unauthenticated_view_body": "Kaydolmadınız mı? <2>Hesap açın</2>",
   "unauthenticated_view_login_button": "Hesabınıza girin"

locales/uk/app.json

@@ -21,9 +21,7 @@
     "text": "Готові приєднатися?",
     "title": "Вибрати застосунок"
   },
-  "browser_media_e2ee_unsupported": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117",
   "call_ended_view": {
-    "body": "Вас від'єднано від виклику",
     "create_account_button": "Створити обліковий запис",
     "create_account_prompt": "<0>Чому б не завершити, налаштувавши пароль для збереження свого облікового запису?</0><1>Ви зможете зберегти своє ім'я та встановити аватарку для подальшого користування під час майбутніх викликів</1>",
     "feedback_done": "<0>Дякуємо за ваш відгук!</0>",
@@ -37,12 +35,10 @@
   "common": {
     "audio": "Звук",
     "avatar": "Аватар",
-    "camera": "Камера",
     "display_name": "Псевдонім",
     "encrypted": "Зашифровано",
     "home": "Домівка",
     "loading": "Завантаження…",
-    "microphone": "Мікрофон",
     "password": "Пароль",
     "profile": "Профіль",
     "settings": "Налаштування",
@@ -51,8 +47,6 @@
     "video": "Відео"
   },
   "disconnected_banner": "Втрачено зв'язок з сервером.",
-  "full_screen_view_description": "<0>Надсилання журналів налагодження допоможе нам виявити проблему.</0>",
-  "full_screen_view_h1": "<0>Йой, щось пішло не за планом.</0>",
   "hangup_button_label": "Завершити виклик",
   "header_label": "Домівка Element Call",
   "header_participants_label": "Учасники",
@@ -99,8 +93,6 @@
   "room_auth_view_eula_caption": "Натискаючи \"Приєднатися до виклику зараз\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
   "screenshare_button_label": "Поділитися екраном",
   "settings": {
-    "developer_settings_label": "Налаштування розробника",
-    "developer_settings_label_description": "Відкрийте налаштування розробника у вікні налаштувань.",
     "developer_tab_title": "Розробнику",
     "feedback_tab_body": "Якщо у вас виникли проблеми або ви просто хочете залишити відгук, надішліть нам короткий опис нижче.",
     "feedback_tab_description_label": "Ваш відгук",
@@ -108,9 +100,7 @@
     "feedback_tab_send_logs_label": "Долучити журнали налагодження",
     "feedback_tab_thank_you": "Дякуємо, ми отримали ваш відгук!",
     "feedback_tab_title": "Відгук",
-    "more_tab_title": "Докладніше",
-    "opt_in_description": "<0></0><1></1>Ви можете відкликати згоду, прибравши цей прапорець. Якщо ви зараз розмовляєте, це налаштування застосується після завершення виклику.",
-    "speaker_device_selection_label": "Динамік"
+    "opt_in_description": "<0></0><1></1>Ви можете відкликати згоду, прибравши цей прапорець. Якщо ви зараз розмовляєте, це налаштування застосується після завершення виклику."
   },
   "star_rating_input_label_one": "{{count}} зірок",
   "star_rating_input_label_other": "{{count}} зірок",

locales/vi/app.json

@@ -17,18 +17,14 @@
   "common": {
     "audio": "Âm thanh",
     "avatar": "Ảnh đại diện",
-    "camera": "Máy quay",
     "display_name": "Tên hiển thị",
     "loading": "Đang tải…",
-    "microphone": "Micrô",
     "password": "Mật khẩu",
     "profile": "Hồ sơ",
     "settings": "Cài đặt",
     "username": "Tên người dùng",
     "video": "Truyề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>",
   "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?",
@@ -55,14 +51,12 @@
   "register_confirm_password_label": "Xác nhận mật khẩu",
   "screenshare_button_label": "Chia sẻ màn hình",
   "settings": {
-    "developer_settings_label": "Cài đặt phát triển",
     "developer_tab_title": "Nhà phát triển",
     "feedback_tab_description_label": "Phản hồi của bạn",
     "feedback_tab_h4": "Gửi phản hồi",
     "feedback_tab_send_logs_label": "Kèm theo nhật ký gỡ lỗi",
     "feedback_tab_thank_you": "Cảm ơn, chúng tôi đã nhận được phản hồi!",
-    "feedback_tab_title": "Phản hồi",
-    "speaker_device_selection_label": "Loa"
+    "feedback_tab_title": "Phản hồi"
   },
   "submitting": "Đang gửi…",
   "unauthenticated_view_body": "Chưa đăng ký? <2>Tạo tài khoản</2>",

locales/zh-Hans/app.json

@@ -19,9 +19,7 @@
     "text": "准备好加入了吗？",
     "title": "选择应用程序"
   },
-  "browser_media_e2ee_unsupported": "您的浏览器不支持媒体端对端加密。支持的浏览器有 Chrome、Safari、Firefox >=117",
   "call_ended_view": {
-    "body": "通话已中断",
     "create_account_button": "创建账户",
     "create_account_prompt": "<0>为何不设置密码来保留你的账户？</0><1>保留昵称并设置头像，以便在未来的通话中使用。</1>",
     "feedback_done": "<0>感谢反馈！</0>",
@@ -35,12 +33,10 @@
   "common": {
     "audio": "音频",
     "avatar": "头像",
-    "camera": "摄像头",
     "display_name": "显示名称",
     "encrypted": "已加密",
     "home": "主页",
     "loading": "加载中……",
-    "microphone": "麦克风",
     "password": "密码",
     "profile": "个人信息",
     "settings": "设置",
@@ -49,8 +45,6 @@
     "video": "视频"
   },
   "disconnected_banner": "与服务器的连接中断。",
-  "full_screen_view_description": "<0>提交日志以帮助我们修复问题。</0>",
-  "full_screen_view_h1": "<0>哎哟，出问题了。</0>",
   "hangup_button_label": "通话结束",
   "header_label": "Element Call主页",
   "join_existing_call_modal": {
@@ -92,8 +86,6 @@
   "room_auth_view_eula_caption": "点击 \"加入通话\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
   "screenshare_button_label": "屏幕共享",
   "settings": {
-    "developer_settings_label": "开发者设置",
-    "developer_settings_label_description": "在设置中显示开发者设置。",
     "developer_tab_title": "开发者",
     "feedback_tab_body": "如果遇到问题或想提供一些反馈意见，请在下面向我们发送简短描述。",
     "feedback_tab_description_label": "您的反馈",
@@ -101,9 +93,7 @@
     "feedback_tab_send_logs_label": "包含调试日志",
     "feedback_tab_thank_you": "谢谢，我们收到了反馈！",
     "feedback_tab_title": "反馈",
-    "more_tab_title": "更多",
-    "opt_in_description": "<0></0><1></1>您可以取消选中复选框来撤回同意。如果正在通话中，此设置将在通话结束时生效。",
-    "speaker_device_selection_label": "发言人"
+    "opt_in_description": "<0></0><1></1>您可以取消选中复选框来撤回同意。如果正在通话中，此设置将在通话结束时生效。"
   },
   "star_rating_input_label_one": "{{count}} 个星",
   "star_rating_input_label_other": "{{count}} 个星",

locales/zh-Hant/app.json

@@ -21,9 +21,7 @@
     "text": "準備好加入了？",
     "title": "選取應用程式"
   },
-  "browser_media_e2ee_unsupported": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117",
   "call_ended_view": {
-    "body": "您已從通話斷線",
     "create_account_button": "建立帳號",
     "create_account_prompt": "<0>何不設定密碼以保留此帳號？</0><1>您可以保留暱稱並設定頭像，以便未來通話時使用</1>",
     "feedback_done": "<0>感謝您的回饋！</0>",
@@ -37,12 +35,10 @@
   "common": {
     "audio": "語音",
     "avatar": "大頭照",
-    "camera": "相機",
     "display_name": "顯示名稱",
     "encrypted": "已加密",
     "home": "首頁",
     "loading": "載入中…",
-    "microphone": "麥克風",
     "password": "密碼",
     "profile": "個人檔案",
     "settings": "設定",
@@ -51,8 +47,6 @@
     "video": "視訊"
   },
   "disconnected_banner": "到伺服器的連線已遺失。",
-  "full_screen_view_description": "<0>送出除錯紀錄，可幫助我們修正問題。</0>",
-  "full_screen_view_h1": "<0>喔喔，有些地方怪怪的。</0>",
   "hangup_button_label": "結束通話",
   "header_label": "Element Call 首頁",
   "header_participants_label": "參與者",
@@ -99,8 +93,6 @@
   "room_auth_view_eula_caption": "點擊「立刻加入通話」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
   "screenshare_button_label": "分享畫面",
   "settings": {
-    "developer_settings_label": "開發者設定",
-    "developer_settings_label_description": "在設定視窗中顯示開發者設定。",
     "developer_tab_title": "開發者",
     "feedback_tab_body": "若您遇到問題或只是想提供一些回饋，請在下方傳送簡短說明給我們。",
     "feedback_tab_description_label": "您的回饋",
@@ -108,9 +100,7 @@
     "feedback_tab_send_logs_label": "包含除錯紀錄",
     "feedback_tab_thank_you": "感謝，我們已經收到您的回饋了！",
     "feedback_tab_title": "回饋",
-    "more_tab_title": "更多",
-    "opt_in_description": "<0></0><1></1>您可以透過取消核取此方塊來撤回同意。若您目前正在通話中，此設定將在通話結束時生效。",
-    "speaker_device_selection_label": "發言者"
+    "opt_in_description": "<0></0><1></1>您可以透過取消核取此方塊來撤回同意。若您目前正在通話中，此設定將在通話結束時生效。"
   },
   "star_rating_input_label_one": "{{count}} 個星星",
   "star_rating_input_label_other": "{{count}} 個星星",

package.json

@@ -3,8 +3,12 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "dev": "yarn dev:full",
+    "dev:full": "vite",
+    "dev:embedded": "vite --config vite-embedded.config.js",
+    "build": "yarn build:full",
+    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:embedded": "yarn build:full --config vite-embedded.config.js",
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
@@ -17,7 +21,9 @@
     "i18n:check": "i18next --fail-on-warnings --fail-on-update",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
-    "backend": "docker-compose -f dev-backend-docker-compose.yml up"
+    "backend": "docker-compose -f dev-backend-docker-compose.yml up",
+    "test:playwright": "playwright test",
+    "test:playwright:open": "yarn test:playwright --ui"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -27,27 +33,29 @@
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
-    "@formatjs/intl-durationformat": "^0.6.1",
+    "@formatjs/intl-durationformat": "^0.7.0",
     "@formatjs/intl-segmenter": "^11.7.3",
-    "@livekit/components-core": "^0.11.0",
+    "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
+    "@livekit/protocol": "^1.33.0",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/core": "^1.25.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.55.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
     "@opentelemetry/resources": "^1.25.1",
     "@opentelemetry/sdk-trace-base": "^1.25.1",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
     "@opentelemetry/semantic-conventions": "^1.25.1",
+    "@playwright/test": "^1.51.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@react-spring/web": "^9.4.4",
     "@sentry/react": "^8.0.0",
-    "@sentry/vite-plugin": "^2.0.0",
+    "@sentry/vite-plugin": "^3.0.0",
+    "@stylistic/eslint-plugin": "^3.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",
@@ -56,43 +64,42 @@
     "@types/node": "^22.0.0",
     "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
     "@types/sdp-transform": "^2.4.5",
     "@types/uuid": "10",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^2.0.0",
+    "@vector-im/compound-design-tokens": "^3.0.0",
     "@vector-im/compound-web": "^7.2.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-deprecate": "^0.8.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-matrix-org": "^1.2.1",
+    "eslint-plugin-matrix-org": "^2.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-unicorn": "^56.0.0",
-    "global-jsdom": "^25.0.0",
-    "history": "^4.0.0",
-    "i18next": "^23.0.0",
+    "global-jsdom": "^26.0.0",
+    "i18next": "^24.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-parser": "^9.0.0",
-    "jsdom": "^25.0.0",
+    "i18next-parser": "^9.1.0",
+    "jsdom": "^26.0.0",
     "knip": "^5.27.2",
-    "livekit-client": "^2.5.7",
+    "livekit-client": "2.9.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^1.10.0",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8395919f0fd1af7cab1e793d736f2cdf18ef7686",
+    "matrix-widget-api": "1.11.0",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
@@ -104,7 +111,7 @@
     "react": "18",
     "react-dom": "18",
     "react-i18next": "^15.0.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^7.0.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
@@ -113,14 +120,15 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^5.0.0",
-    "vite-plugin-compression2": "^1.3.1",
-    "vite-plugin-html-template": "^1.1.0",
+    "vite": "^6.0.0",
+    "vite-plugin-generate-file": "^0.2.0",
+    "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",
-    "vitest": "^2.0.0",
+    "vitest": "^3.0.0",
     "vitest-axe": "^1.0.0-pre.3"
   },
   "resolutions": {
-    "strip-ansi": "6.0.1"
+    "@livekit/components-core/rxjs": "^7.8.1",
+    "matrix-widget-api": "1.11.0"
   }
 }

playwright-backend-docker-compose.yml

@@ -0,0 +1,86 @@
+networks:
+  ecbackend:
+
+services:
+  auth-service:
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    hostname: auth-server
+    environment:
+      - LK_JWT_PORT=8080
+      - LIVEKIT_URL=ws://localhost:7880
+      - LIVEKIT_KEY=devkey
+      - LIVEKIT_SECRET=secret
+      # If the configured homeserver runs on localhost, it'll probably be using
+      # a self-signed certificate
+      - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+    deploy:
+      restart_policy:
+        condition: on-failure
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 8009:8080
+    networks:
+      - ecbackend
+
+  livekit:
+    image: livekit/livekit-server:latest
+    command: --dev --config /etc/livekit.yaml
+    restart: unless-stopped
+    # The SFU seems to work far more reliably when we let it share the host
+    # network rather than opening specific ports (but why?? we're not missing
+    # any…)
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 7880:7880/tcp
+      - 7881:7881/tcp
+      - 7882:7882/tcp
+      - 50100-50200:50100-50200/udp
+    volumes:
+      - ./backend/dev_livekit.yaml:/etc/livekit.yaml:Z
+    networks:
+      - ecbackend
+
+  redis:
+    image: redis:6-alpine
+    command: redis-server /etc/redis.conf
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 6379:6379
+    volumes:
+      - ./backend/redis.conf:/etc/redis.conf:Z
+    networks:
+      - ecbackend
+
+  synapse:
+    hostname: homeserver
+    image: docker.io/matrixdotorg/synapse:latest
+    environment:
+      - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
+      # Needed for rootless podman-compose such that the uid/gid mapping does
+      # fit local user uid. If the container runs as root (uid 0) it is fine as
+      # it actually maps to your non-root user on the host (e.g. 1000).
+      # Otherwise uid mapping will not match your non-root user.
+      - UID=0
+      - GID=0
+    volumes:
+      - ./backend/synapse_tmp:/data:Z
+      - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+    networks:
+      - ecbackend
+
+  nginx:
+    #  openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout tls_localhost_key.pem -out tls_localhost_cert.pem -subj "/C=GB/ST=London/L=London/O=Alros/OU=IT Department/CN=localhost"
+    hostname: synapse.localhost
+    image: nginx:latest
+    volumes:
+      - ./backend/tls_localhost_nginx.conf:/etc/nginx/conf.d/default.conf:Z
+      - ./backend/tls_localhost_key.pem:/root/ssl/key.pem:Z
+      - ./backend/tls_localhost_cert.pem:/root/ssl/cert.pem:Z
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - "8008:80"
+      - "4443:443"
+    depends_on:
+      - synapse
+    networks:
+      - ecbackend

playwright.config.ts

@@ -0,0 +1,81 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./playwright",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "https://localhost:3000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        permissions: [
+          "clipboard-write",
+          "clipboard-read",
+          "microphone",
+          "camera",
+        ],
+        ignoreHTTPSErrors: true,
+        launchOptions: {
+          args: [
+            "--use-fake-ui-for-media-stream",
+            "--use-fake-device-for-media-stream",
+            "--mute-audio",
+          ],
+        },
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+        ignoreHTTPSErrors: true,
+        launchOptions: {
+          firefoxUserPrefs: {
+            "permissions.default.microphone": 1,
+            "permissions.default.camera": 1,
+          },
+        },
+      },
+    },
+
+    // No safari for now, until I find a solution to fix `Not allowed to request resource` due to calling
+    // clear http to the homeserver
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "yarn dev",
+    url: "https://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    ignoreHTTPSErrors: true,
+  },
+});

playwright/access.spec.ts

@@ -0,0 +1,131 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+
+test("Sign up a new account, then login, then logout", async ({ browser }) => {
+  const userId = `test_user-id_${Date.now()}`;
+
+  const newUserContext = await browser.newContext();
+  const newUserPage = await newUserContext.newPage();
+  await newUserPage.goto("/");
+
+  await expect(newUserPage.getByTestId("home_register")).toBeVisible();
+  await newUserPage.getByTestId("home_register").click();
+
+  await newUserPage.getByTestId("register_username").click();
+  await newUserPage.getByTestId("register_username").fill(userId);
+
+  await newUserPage.getByTestId("register_password").click();
+  await newUserPage.getByTestId("register_password").fill("password1!");
+  await newUserPage.getByTestId("register_confirm_password").click();
+  await newUserPage.getByTestId("register_confirm_password").fill("password1!");
+  await newUserPage.getByTestId("register_register").click();
+
+  await expect(
+    newUserPage.getByRole("heading", { name: "Start new call" }),
+  ).toBeVisible();
+
+  // Now use a new page to login this account
+  const returningUserContext = await browser.newContext();
+  const returningUserPage = await returningUserContext.newPage();
+  await returningUserPage.goto("/");
+
+  await expect(returningUserPage.getByTestId("home_login")).toBeVisible();
+  await returningUserPage.getByTestId("home_login").click();
+  await returningUserPage.getByTestId("login_username").click();
+  await returningUserPage.getByTestId("login_username").fill(userId);
+  await returningUserPage.getByTestId("login_password").click();
+  await returningUserPage.getByTestId("login_password").fill("password1!");
+  await returningUserPage.getByTestId("login_login").click();
+
+  await expect(
+    returningUserPage.getByRole("heading", { name: "Start new call" }),
+  ).toBeVisible();
+
+  // logout
+  await returningUserPage.getByTestId("usermenu_open").click();
+  await returningUserPage.locator('[data-test-id="usermenu_logout"]').click();
+
+  await expect(
+    returningUserPage.getByRole("link", { name: "Log In" }),
+  ).toBeVisible();
+  await expect(returningUserPage.getByTestId("home_login")).toBeVisible();
+});
+
+test("As a guest, create a call, share link and other join", async ({
+  browser,
+}) => {
+  // Use reduce motion to disable animations that are making the tests a bit flaky
+  const creatorContext = await browser.newContext({ reducedMotion: "reduce" });
+  const creatorPage = await creatorContext.newPage();
+
+  await creatorPage.goto("/");
+
+  // ========
+  // ARRANGE: The first user creates a call as guest, join it, then click the invite button to copy the invite link
+  // ========
+  await creatorPage.getByTestId("home_callName").click();
+  await creatorPage.getByTestId("home_callName").fill("Welcome");
+  await creatorPage.getByTestId("home_displayName").click();
+  await creatorPage.getByTestId("home_displayName").fill("Inviter");
+  await creatorPage.getByTestId("home_go").click();
+  await expect(creatorPage.locator("video")).toBeVisible();
+
+  // join
+  await creatorPage.getByTestId("lobby_joinCall").click();
+  // Spotlight mode to make checking the test visually clearer
+  await creatorPage.getByRole("radio", { name: "Spotlight" }).check();
+
+  // Get the invite link
+  await creatorPage.getByRole("button", { name: "Invite" }).click();
+  await expect(
+    creatorPage.getByRole("heading", { name: "Invite to this call" }),
+  ).toBeVisible();
+  await expect(creatorPage.getByRole("img", { name: "QR Code" })).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await creatorPage.getByTestId("modal_inviteLink").click();
+
+  let inviteLink = (await creatorPage.evaluate(
+    "navigator.clipboard.readText()",
+  )) as string;
+  expect(inviteLink).toContain("room/#/");
+
+  // ========
+  // ACT: The other user use the invite link to join the call as a guest
+  // ========
+  const guestInviteeContext = await browser.newContext({
+    reducedMotion: "reduce",
+  });
+  const guestPage = await guestInviteeContext.newPage();
+
+  await guestPage.goto(inviteLink);
+  await guestPage.getByTestId("joincall_displayName").fill("Invitee");
+  await expect(guestPage.getByTestId("joincall_joincall")).toBeVisible();
+  await guestPage.getByTestId("joincall_joincall").click();
+  await guestPage.getByTestId("lobby_joinCall").click();
+  await guestPage.getByRole("radio", { name: "Spotlight" }).check();
+
+  // ========
+  // ASSERT: check that there are two members in the call
+  // ========
+
+  // There should be two participants now
+  await expect(
+    guestPage.getByTestId("roomHeader_participants_count"),
+  ).toContainText("2");
+  expect(await guestPage.getByTestId("videoTile").count()).toBe(2);
+
+  // Same in creator page
+  await expect(
+    creatorPage.getByTestId("roomHeader_participants_count"),
+  ).toContainText("2");
+  expect(await creatorPage.getByTestId("videoTile").count()).toBe(2);
+
+  // XXX check the display names on the video tiles
+});

playwright/create-call.spec.ts

@@ -0,0 +1,55 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+
+test("Start a new call then leave and show the feedback screen", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill("HelloCall");
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill("John Doe");
+  await page.getByTestId("home_go").click();
+
+  await expect(page.locator("video")).toBeVisible();
+  await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
+
+  // Check the button toolbar
+  // await expect(page.getByRole('button', { name: 'Mute microphone' })).toBeVisible();
+  // await expect(page.getByRole('button', { name: 'Stop video' })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Settings" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "End call" })).toBeVisible();
+
+  // Join the call
+  await page.getByTestId("lobby_joinCall").click();
+
+  // Ensure that the call is connected
+  await page
+    .locator("div")
+    .filter({ hasText: /^HelloCall$/ })
+    .click();
+  // Check the number of participants
+  await expect(page.locator("div").filter({ hasText: /^1$/ })).toBeVisible();
+  // The tooltip with the name should be visible
+  await expect(page.getByTestId("name_tag")).toContainText("John Doe");
+
+  // leave the call
+  await page.getByTestId("incall_leave").click();
+  await expect(page.getByRole("heading")).toContainText(
+    "John Doe, your call has ended. How did it go?",
+  );
+  await expect(page.getByRole("main")).toContainText(
+    "Why not finish by setting up a password to keep your account?",
+  );
+
+  await expect(
+    page.getByRole("link", { name: "Not now, return to home screen" }),
+  ).toBeVisible();
+});

playwright/landing.spec.ts

@@ -0,0 +1,30 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "@playwright/test";
+
+test("has title", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page).toHaveTitle(/Element Call/);
+});
+
+test("Landing page", async ({ page }) => {
+  await page.goto("/");
+
+  // There should be a login button in the header
+  await expect(page.getByRole("link", { name: "Log In" })).toBeVisible();
+
+  await expect(
+    page.getByRole("heading", { name: "Start new call" }),
+  ).toBeVisible();
+
+  await expect(page.getByTestId("home_callName")).toBeVisible();
+  await expect(page.getByTestId("home_displayName")).toBeVisible();
+
+  await expect(page.getByTestId("home_go")).toBeVisible();
+});

public/index.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="favicon.png" />
-    <link rel="preload" href="/config.json" as="fetch" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
-    />
-    <title><%- title %></title>
-    <script>
-      window.global = window;
-    </script>
-  </head>
-
-  <!-- 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>

renovate.json

@@ -1,18 +1,22 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended"],
+  "extends": [
+    "config:recommended",
+    "schedule:monthly",
+    ":enableVulnerabilityAlertsWithLabel(security)"
+  ],
+  "addLabels": ["dependencies"],
+  "minimumReleaseAge": "5 days",
   "packageRules": [
     {
       "groupName": "all non-major dependencies",
       "groupSlug": "all-minor-patch",
-      "matchUpdateTypes": ["minor", "patch"],
-      "extends": ["schedule:weekly"]
+      "matchUpdateTypes": ["minor", "patch"]
     },
     {
       "groupName": "GitHub Actions",
       "matchDepTypes": ["action"],
-      "pinDigests": true,
-      "extends": ["schedule:monthly"]
+      "pinDigests": true
     },
     {
       "description": "Disable Renovate for packages we want to monitor ourselves",
@@ -22,28 +26,35 @@
     },
     {
       "groupName": "matrix-widget-api",
-      "matchDepNames": ["matrix-widget-api"]
+      "matchDepNames": ["matrix-widget-api"],
+      "extends": ["schedule:weekly"]
     },
     {
       "groupName": "Compound",
-      "schedule": "before 5am on Tuesday and Friday",
-      "matchPackageNames": ["@vector-im/compound-{/,}**"]
+      "matchPackageNames": ["@vector-im/compound-{/,}**"],
+      "extends": ["schedule:weekly"]
     },
     {
       "groupName": "LiveKit client",
-      "matchDepNames": ["livekit-client"]
+      "matchDepNames": ["livekit-client"],
+      "extends": ["schedule:weekly"]
     },
     {
       "groupName": "LiveKit components",
-      "matchPackageNames": ["@livekit/components-{/,}**"]
+      "matchPackageNames": ["@livekit/components-{/,}**"],
+      "extends": ["schedule:weekly"]
     },
     {
       "groupName": "Vaul",
       "matchDepNames": ["vaul"],
-      "extends": ["schedule:monthly"],
       "prHeader": "Please review modals on mobile for visual regressions."
     }
   ],
   "semanticCommits": "disabled",
-  "ignoreDeps": ["posthog-js"]
+  "ignoreDeps": ["posthog-js"],
+  "vulnerabilityAlerts": {
+    "schedule": ["at any time"],
+    "prHourlyLimit": 0,
+    "minimumReleaseAge": null
+  }
 }

src/@types/global.d.ts

@@ -1,13 +1,15 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import "matrix-js-sdk/src/@types/global";
+import { type setLogLevel as setLKLogLevel } from "livekit-client";
+
 import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
-import { Controls } from "../controls";
+import { type Controls } from "../controls";
 
 declare global {
   interface Document {
@@ -18,6 +20,7 @@ declare global {
 
   interface Window {
     controls: Controls;
+    setLKLogLevel: typeof setLKLogLevel;
   }
 
   interface HTMLElement {

src/@types/i18next.d.ts

@@ -1,13 +1,13 @@
 /*
 Copyright 2023, 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import "i18next";
 // import all namespaces (for the default language, only)
-import app from "../../locales/en/app.json";
+import type app from "../../locales/en/app.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

src/@types/matrix-js-sdk.d.ts

@@ -1,13 +1,13 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ElementCallReactionEventType,
-  ECallReactionEventContent,
+  type ElementCallReactionEventType,
+  type ECallReactionEventContent,
 } from "../reactions";
 
 // Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
@@ -15,4 +15,12 @@ declare module "matrix-js-sdk/src/types" {
   export interface TimelineEvents {
     [ElementCallReactionEventType]: ECallReactionEventContent;
   }
+
+  export interface AccountDataEvents {
+    // Analytics account data event
+    "im.vector.analytics": {
+      id: string;
+      pseudonymousAnalyticsOptIn?: boolean;
+    };
+  }
 }

src/@types/modules.d.ts

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

src/App.tsx

@@ -1,19 +1,13 @@
 /*
 Copyright 2021-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, Suspense, useEffect, useState } from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  useLocation,
-} from "react-router-dom";
+import { type FC, type JSX, Suspense, useEffect, useState } from "react";
+import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
-import { History } from "history";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -22,14 +16,14 @@ import { LoginPage } from "./auth/LoginPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
-import { CrashView, LoadingView } from "./FullScreenView";
+import { ErrorPage, LoadingPage } 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);
+const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
 interface SimpleProviderProps {
   children: JSX.Element;
@@ -55,11 +49,7 @@ const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
   return children;
 };
 
-interface AppProps {
-  history: History;
-}
-
-export const App: FC<AppProps> = ({ history }) => {
+export const App: FC = () => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     Initializer.init()
@@ -71,12 +61,10 @@ export const App: FC<AppProps> = ({ history }) => {
       .catch(logger.error);
   });
 
-  const errorPage = <CrashView />;
-
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    <Router history={history}>
+    <BrowserRouter>
       <BackgroundProvider>
         <ThemeProvider>
           <TooltipProvider>
@@ -84,32 +72,31 @@ export const App: FC<AppProps> = ({ history }) => {
               <Suspense fallback={null}>
                 <ClientProvider>
                   <MediaDevicesProvider>
-                    <Sentry.ErrorBoundary fallback={errorPage}>
+                    <Sentry.ErrorBoundary
+                      fallback={(error) => (
+                        <ErrorPage error={error} widget={widget} />
+                      )}
+                    >
                       <DisconnectedBanner />
-                      <Switch>
-                        <SentryRoute exact path="/">
-                          <HomePage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/login">
-                          <LoginPage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/register">
-                          <RegisterPage />
-                        </SentryRoute>
-                        <SentryRoute path="*">
-                          <RoomPage />
-                        </SentryRoute>
-                      </Switch>
+                      <Routes>
+                        <SentryRoute path="/" element={<HomePage />} />
+                        <SentryRoute path="/login" element={<LoginPage />} />
+                        <SentryRoute
+                          path="/register"
+                          element={<RegisterPage />}
+                        />
+                        <SentryRoute path="*" element={<RoomPage />} />
+                      </Routes>
                     </Sentry.ErrorBoundary>
                   </MediaDevicesProvider>
                 </ClientProvider>
               </Suspense>
             ) : (
-              <LoadingView />
+              <LoadingPage />
             )}
           </TooltipProvider>
         </ThemeProvider>
       </BackgroundProvider>
-    </Router>
+    </BrowserRouter>
   );
 };

src/Avatar.test.tsx

@@ -0,0 +1,156 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, expect, test, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type FC, type PropsWithChildren } from "react";
+
+import { ClientContextProvider } from "./ClientContext";
+import { Avatar } from "./Avatar";
+import { mockMatrixRoomMember, mockRtcMembership } from "./utils/test";
+
+const TestComponent: FC<
+  PropsWithChildren<{ client: MatrixClient; supportsThumbnails?: boolean }>
+> = ({ client, children, supportsThumbnails }) => {
+  return (
+    <ClientContextProvider
+      value={{
+        state: "valid",
+        disconnected: false,
+        supportedFeatures: {
+          reactions: true,
+          thumbnails: supportsThumbnails ?? true,
+        },
+        setClient: vi.fn(),
+        authenticated: {
+          client,
+          isPasswordlessUser: true,
+          changePassword: vi.fn(),
+          logout: vi.fn(),
+        },
+      }}
+    >
+      {children}
+    </ClientContextProvider>
+  );
+};
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+test("should just render a placeholder when the user has no avatar", () => {
+  const client = vi.mocked<MatrixClient>({
+    getAccessToken: () => "my-access-token",
+    mxcUrlToHttp: () => vi.fn(),
+  } as unknown as MatrixClient);
+
+  vi.spyOn(client, "mxcUrlToHttp");
+  const member = mockMatrixRoomMember(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {
+      getMxcAvatarUrl: () => undefined,
+    },
+  );
+  const displayName = "Alice";
+  render(
+    <TestComponent client={client}>
+      <Avatar
+        id={member.userId}
+        name={displayName}
+        size={96}
+        src={member.getMxcAvatarUrl()}
+      />
+    </TestComponent>,
+  );
+  const element = screen.getByRole("img", { name: "@alice:example.org" });
+  expect(element.tagName).toEqual("SPAN");
+  expect(client.mxcUrlToHttp).toBeCalledTimes(0);
+});
+
+test("should just render a placeholder when thumbnails are not supported", () => {
+  const client = vi.mocked<MatrixClient>({
+    getAccessToken: () => "my-access-token",
+    mxcUrlToHttp: () => vi.fn(),
+  } as unknown as MatrixClient);
+
+  vi.spyOn(client, "mxcUrlToHttp");
+  const member = mockMatrixRoomMember(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {
+      getMxcAvatarUrl: () => "mxc://example.org/alice-avatar",
+    },
+  );
+  const displayName = "Alice";
+  render(
+    <TestComponent client={client} supportsThumbnails={false}>
+      <Avatar
+        id={member.userId}
+        name={displayName}
+        size={96}
+        src={member.getMxcAvatarUrl()}
+      />
+    </TestComponent>,
+  );
+  const element = screen.getByRole("img", { name: "@alice:example.org" });
+  expect(element.tagName).toEqual("SPAN");
+  expect(client.mxcUrlToHttp).toBeCalledTimes(0);
+});
+
+test("should attempt to fetch authenticated media", async () => {
+  const expectedAuthUrl = "http://example.org/media/alice-avatar";
+  const expectedObjectURL = "my-object-url";
+  const accessToken = "my-access-token";
+  const theBlob = new Blob([]);
+
+  // vitest doesn't have a implementation of create/revokeObjectURL, so we need
+  // to delete the property. It's a bit odd, but it works.
+  Reflect.deleteProperty(global.window.URL, "createObjectURL");
+  globalThis.URL.createObjectURL = vi.fn().mockReturnValue(expectedObjectURL);
+  Reflect.deleteProperty(global.window.URL, "revokeObjectURL");
+  globalThis.URL.revokeObjectURL = vi.fn();
+
+  const fetchFn = vi.fn().mockResolvedValue({
+    blob: async () => Promise.resolve(theBlob),
+  });
+  vi.stubGlobal("fetch", fetchFn);
+
+  const client = vi.mocked<MatrixClient>({
+    getAccessToken: () => accessToken,
+    mxcUrlToHttp: () => vi.fn(),
+  } as unknown as MatrixClient);
+
+  vi.spyOn(client, "mxcUrlToHttp").mockReturnValue(expectedAuthUrl);
+  const member = mockMatrixRoomMember(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {
+      getMxcAvatarUrl: () => "mxc://example.org/alice-avatar",
+    },
+  );
+  const displayName = "Alice";
+  render(
+    <TestComponent client={client}>
+      <Avatar
+        id={member.userId}
+        name={displayName}
+        size={96}
+        src={member.getMxcAvatarUrl()}
+      />
+    </TestComponent>,
+  );
+
+  // Fetch is asynchronous, so wait for this to resolve.
+  await vi.waitUntil(() =>
+    document.querySelector(`img[src='${expectedObjectURL}']`),
+  );
+
+  expect(client.mxcUrlToHttp).toBeCalledTimes(1);
+  expect(globalThis.fetch).toBeCalledWith(expectedAuthUrl, {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+});

src/Avatar.tsx

@@ -1,15 +1,21 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { useMemo, FC, CSSProperties } from "react";
+import {
+  useMemo,
+  type FC,
+  type CSSProperties,
+  useState,
+  useEffect,
+} from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 
-import { getAvatarUrl } from "./utils/matrix";
-import { useClient } from "./ClientContext";
+import { useClientState } from "./ClientContext";
 
 export enum Size {
   XS = "xs",
@@ -27,7 +33,7 @@ export const sizes = new Map([
   [Size.XL, 90],
 ]);
 
-interface Props {
+export interface Props {
   id: string;
   name: string;
   className?: string;
@@ -36,6 +42,28 @@ interface Props {
   style?: CSSProperties;
 }
 
+export function getAvatarUrl(
+  client: MatrixClient,
+  mxcUrl: string | null,
+  avatarSize = 96,
+): string | null {
+  const width = Math.floor(avatarSize * window.devicePixelRatio);
+  const height = Math.floor(avatarSize * window.devicePixelRatio);
+  // scale is more suitable for larger sizes
+  const resizeMethod = avatarSize <= 96 ? "crop" : "scale";
+  return mxcUrl
+    ? client.mxcUrlToHttp(
+        mxcUrl,
+        width,
+        height,
+        resizeMethod,
+        false,
+        true,
+        true,
+      )
+    : null;
+}
+
 export const Avatar: FC<Props> = ({
   className,
   id,
@@ -45,7 +73,7 @@ export const Avatar: FC<Props> = ({
   style,
   ...props
 }) => {
-  const { client } = useClient();
+  const clientState = useClientState();
 
   const sizePx = useMemo(
     () =>
@@ -55,10 +83,50 @@ export const Avatar: FC<Props> = ({
     [size],
   );
 
-  const resolvedSrc = useMemo(() => {
-    if (!client || !src || !sizePx) return undefined;
-    return src.startsWith("mxc://") ? getAvatarUrl(client, src, sizePx) : src;
-  }, [client, src, sizePx]);
+  const [avatarUrl, setAvatarUrl] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (clientState?.state !== "valid") {
+      return;
+    }
+    const { authenticated, supportedFeatures } = clientState;
+    const client = authenticated?.client;
+
+    if (!client || !src || !sizePx || !supportedFeatures.thumbnails) {
+      return;
+    }
+
+    const token = client.getAccessToken();
+    if (!token) {
+      return;
+    }
+    const resolveSrc = getAvatarUrl(client, src, sizePx);
+    if (!resolveSrc) {
+      setAvatarUrl(undefined);
+      return;
+    }
+
+    let objectUrl: string | undefined;
+    fetch(resolveSrc, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then(async (req) => req.blob())
+      .then((blob) => {
+        objectUrl = URL.createObjectURL(blob);
+        setAvatarUrl(objectUrl);
+      })
+      .catch((ex) => {
+        setAvatarUrl(undefined);
+      });
+
+    return (): void => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [clientState, src, sizePx]);
 
   return (
     <CompoundAvatar
@@ -66,7 +134,7 @@ export const Avatar: FC<Props> = ({
       id={id}
       name={name}
       size={`${sizePx}px`}
-      src={resolvedSrc}
+      src={avatarUrl}
       style={style}
       {...props}
     />

src/ClientContext.tsx

@@ -1,12 +1,12 @@
 /*
 Copyright 2021-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import {
-  FC,
+  type FC,
   useCallback,
   useEffect,
   useState,
@@ -14,22 +14,22 @@ import {
   useContext,
   useRef,
   useMemo,
+  type JSX,
 } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
-import { useTranslation } from "react-i18next";
-import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { type ISyncStateData, type SyncState } from "matrix-js-sdk/src/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
 
 import type { WidgetApi } from "matrix-widget-api";
-import { ErrorView } from "./FullScreenView";
+import { ErrorPage } from "./FullScreenView";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,
   RegistrationType,
 } from "./analytics/PosthogAnalytics";
-import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
+import { OpenElsewhereError } from "./RichError";
 
 declare global {
   interface Window {
@@ -48,6 +48,7 @@ export type ValidClientState = {
   disconnected: boolean;
   supportedFeatures: {
     reactions: boolean;
+    thumbnails: boolean;
   };
   setClient: (params?: SetClientParams) => void;
 };
@@ -71,6 +72,8 @@ export type SetClientParams = {
 
 const ClientContext = createContext<ClientState | undefined>(undefined);
 
+export const ClientContextProvider = ClientContext.Provider;
+
 export const useClientState = (): ClientState | undefined =>
   useContext(ClientContext);
 
@@ -141,7 +144,7 @@ interface Props {
 }
 
 export const ClientProvider: FC<Props> = ({ children }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   // null = signed out, undefined = loading
   const [initClientState, setInitClientState] = useState<
@@ -225,11 +228,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     await client.clearStores();
     clearSession();
     setInitClientState(null);
-    history.push("/");
+    await navigate("/");
     PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
-  }, [history, initClientState?.client]);
-
-  const { t } = useTranslation();
+  }, [navigate, initClientState?.client]);
 
   // To protect against multiple sessions writing to the same storage
   // simultaneously, we send a broadcast message that shuts down all other
@@ -247,12 +248,13 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     "message",
     useCallback(() => {
       initClientState?.client.stopClient();
-      setAlreadyOpenedErr(translatedError("application_opened_another_tab", t));
-    }, [initClientState?.client, setAlreadyOpenedErr, t]),
+      setAlreadyOpenedErr(new OpenElsewhereError());
+    }, [initClientState?.client, setAlreadyOpenedErr]),
   );
 
   const [isDisconnected, setIsDisconnected] = useState(false);
   const [supportsReactions, setSupportsReactions] = useState(false);
+  const [supportsThumbnails, setSupportsThumbnails] = useState(false);
 
   const state: ClientState | undefined = useMemo(() => {
     if (alreadyOpenedErr) {
@@ -278,6 +280,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       disconnected: isDisconnected,
       supportedFeatures: {
         reactions: supportsReactions,
+        thumbnails: supportsThumbnails,
       },
     };
   }, [
@@ -288,6 +291,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     setClient,
     isDisconnected,
     supportsReactions,
+    supportsThumbnails,
   ]);
 
   const onSync = useCallback(
@@ -313,6 +317,8 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     }
 
     if (initClientState.widgetApi) {
+      // There is currently no widget API for authenticated media thumbnails.
+      setSupportsThumbnails(false);
       const reactSend = initClientState.widgetApi.hasCapability(
         "org.matrix.msc2762.send.event:m.reaction",
       );
@@ -334,6 +340,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       }
     } else {
       setSupportsReactions(true);
+      setSupportsThumbnails(true);
     }
 
     return (): void => {
@@ -344,7 +351,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   }, [initClientState, onSync]);
 
   if (alreadyOpenedErr) {
-    return <ErrorView error={alreadyOpenedErr} />;
+    return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
   }
 
   return (

src/DisconnectedBanner.module.css

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

src/DisconnectedBanner.tsx

@@ -1,16 +1,16 @@
 /*
 Copyright 2023, 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode } from "react";
+import { type FC, type HTMLAttributes, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./DisconnectedBanner.module.css";
-import { ValidClientState, useClientState } from "./ClientContext";
+import { type ValidClientState, useClientState } from "./ClientContext";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;

src/ErrorView.module.css

@@ -0,0 +1,21 @@
+.error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cpd-space-2x);
+  max-inline-size: 480px;
+}
+
+.icon {
+  margin-block-end: var(--cpd-space-4x);
+}
+
+.error > h1 {
+  margin: 0;
+}
+
+.error > p {
+  font: var(--cpd-font-body-lg-regular);
+  color: var(--cpd-color-text-secondary);
+  text-align: center;
+}

src/ErrorView.tsx

@@ -0,0 +1,118 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { BigIcon, Button, Heading } from "@vector-im/compound-web";
+import {
+  useCallback,
+  type ComponentType,
+  type FC,
+  type ReactNode,
+  type SVGAttributes,
+  type ReactElement,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { RageshakeButton } from "./settings/RageshakeButton";
+import styles from "./ErrorView.module.css";
+import { useUrlParams } from "./UrlParams";
+import { LinkButton } from "./button";
+import { ElementWidgetActions, type WidgetHelpers } from "./widget.ts";
+
+interface Props {
+  Icon: ComponentType<SVGAttributes<SVGElement>>;
+  title: string;
+  /**
+   * Show an option to submit a rageshake.
+   * @default false
+   */
+  rageshake?: boolean;
+  /**
+   * Whether the error is considered fatal, i.e. non-recoverable. Causes the app
+   * to fully reload when clicking 'return to home'.
+   * @default false
+   */
+  fatal?: boolean;
+  children: ReactNode;
+  widget: WidgetHelpers | null;
+}
+
+export const ErrorView: FC<Props> = ({
+  Icon,
+  title,
+  rageshake,
+  fatal,
+  children,
+  widget,
+}) => {
+  const { t } = useTranslation();
+  const { confineToRoom } = useUrlParams();
+
+  const onReload = useCallback(() => {
+    window.location.href = "/";
+  }, []);
+
+  const CloseWidgetButton: FC<{ widget: WidgetHelpers }> = ({
+    widget,
+  }): ReactElement => {
+    // in widget mode we don't want to show the return home button but a close button
+    const closeWidget = (): void => {
+      widget.api.transport
+        .send(ElementWidgetActions.Close, {})
+        .catch((e) => {
+          // What to do here?
+          logger.error("Failed to send close action", e);
+        })
+        .finally(() => {
+          widget.api.transport.stop();
+        });
+    };
+    return (
+      <Button kind="primary" onClick={closeWidget}>
+        {t("action.close")}
+      </Button>
+    );
+  };
+
+  // Whether the error is considered fatal or pathname is `/` then reload the all app.
+  // If not then navigate to home page.
+  const ReturnToHomeButton = (): ReactElement => {
+    if (fatal || location.pathname === "/") {
+      return (
+        <Button kind="tertiary" className={styles.homeLink} onClick={onReload}>
+          {t("return_home_button")}
+        </Button>
+      );
+    } else {
+      return (
+        <LinkButton kind="tertiary" className={styles.homeLink} to="/">
+          {t("return_home_button")}
+        </LinkButton>
+      );
+    }
+  };
+
+  return (
+    <div className={styles.error}>
+      <BigIcon className={styles.icon}>
+        <Icon />
+      </BigIcon>
+      <Heading as="h1" weight="semibold" size="md">
+        {title}
+      </Heading>
+      {children}
+      {rageshake && (
+        <RageshakeButton description={`***Error View***: ${title}`} />
+      )}
+      {widget ? (
+        <CloseWidgetButton widget={widget} />
+      ) : (
+        !confineToRoom && <ReturnToHomeButton />
+      )}
+    </div>
+  );
+};

src/FullScreenView.module.css

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

src/FullScreenView.tsx

@@ -1,25 +1,23 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { type FC, type ReactElement, type ReactNode, useEffect } from "react";
 import classNames from "classnames";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Button } from "@vector-im/compound-web";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
-import { LinkButton } from "./button";
 import styles from "./FullScreenView.module.css";
-import { TranslatedError } from "./TranslatedError";
-import { Config } from "./config/Config";
-import { RageshakeButton } from "./settings/RageshakeButton";
 import { useUrlParams } from "./UrlParams";
+import { RichError } from "./RichError";
+import { ErrorView } from "./ErrorView";
+import { type WidgetHelpers } from "./widget.ts";
 
 interface FullScreenViewProps {
   className?: string;
@@ -33,10 +31,14 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
   const { hideHeader } = useUrlParams();
   return (
     <div className={classNames(styles.page, className)}>
-      <Header>
-        <LeftNav>{!hideHeader && <HeaderLogo />}</LeftNav>
-        <RightNav />
-      </Header>
+      {!hideHeader && (
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav />
+        </Header>
+      )}
       <div className={styles.container}>
         <div className={styles.content}>{children}</div>
       </div>
@@ -44,74 +46,40 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
   );
 };
 
-interface ErrorViewProps {
-  error: Error;
+interface ErrorPageProps {
+  error: Error | unknown;
+  widget: WidgetHelpers | null;
 }
 
-export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
-  const location = useLocation();
-  const { confineToRoom } = useUrlParams();
+// Due to this component being used as the crash fallback for Sentry, which has
+// weird type requirements, we can't just give this a type of FC<ErrorPageProps>
+export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
   const { t } = useTranslation();
-
   useEffect(() => {
     logger.error(error);
     Sentry.captureException(error);
   }, [error]);
 
-  const onReload = useCallback(() => {
-    window.location.href = "/";
-  }, []);
-
   return (
     <FullScreenView>
-      <h1>{t("common.error")}</h1>
-      <p>
-        {error instanceof TranslatedError
-          ? error.translatedMessage
-          : error.message}
-      </p>
-      <RageshakeButton description={`***Error View***: ${error.message}`} />
-      {!confineToRoom &&
-        (location.pathname === "/" ? (
-          <Button className={styles.homeLink} onClick={onReload}>
-            {t("return_home_button")}
-          </Button>
-        ) : (
-          <LinkButton className={styles.homeLink} to="/">
-            {t("return_home_button")}
-          </LinkButton>
-        ))}
-    </FullScreenView>
-  );
-};
-
-export const CrashView: FC = () => {
-  const { t } = useTranslation();
-
-  const onReload = useCallback(() => {
-    window.location.href = "/";
-  }, []);
-
-  return (
-    <FullScreenView>
-      <Trans i18nKey="full_screen_view_h1">
-        <h1>Oops, something's gone wrong.</h1>
-      </Trans>
-      {Config.get().rageshake?.submit_url && (
-        <Trans i18nKey="full_screen_view_description">
-          <p>Submitting debug logs will help us track down the problem.</p>
-        </Trans>
+      {error instanceof RichError ? (
+        error.richMessage
+      ) : (
+        <ErrorView
+          widget={widget}
+          Icon={ErrorIcon}
+          title={t("error.generic")}
+          rageshake
+          fatal
+        >
+          <p>{t("error.generic_description")}</p>
+        </ErrorView>
       )}
-
-      <RageshakeButton description="***Soft Crash***" />
-      <Button className={styles.wideButton} onClick={onReload}>
-        {t("return_home_button")}
-      </Button>
     </FullScreenView>
   );
 };
 
-export const LoadingView: FC = () => {
+export const LoadingPage: FC = () => {
   const { t } = useTranslation();
 
   return (

src/Header.module.css

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

src/Header.test.tsx

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

src/Header.tsx

@@ -1,12 +1,17 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode, forwardRef } from "react";
+import {
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
@@ -156,7 +161,12 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
             height={20}
             aria-label={t("header_participants_label")}
           />
-          <Text as="span" size="sm" weight="medium">
+          <Text
+            as="span"
+            size="sm"
+            weight="medium"
+            data-testid="roomHeader_participants_count"
+          >
             {t("participant_count", { count: participantCount ?? 0 })}
           </Text>
         </div>

src/IndexedDBWorker.ts

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

src/LazyEventEmitter.ts

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

src/Modal.module.css

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

src/Modal.test.tsx

@@ -1,14 +1,13 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { expect, test } from "vitest";
+import { expect, test, afterEach } from "vitest";
 import { render } from "@testing-library/react";
-import { ReactNode, useState } from "react";
-import { afterEach } from "node:test";
+import { type ReactNode, useState } from "react";
 import userEvent from "@testing-library/user-event";
 
 import { Modal } from "./Modal";
@@ -47,7 +46,7 @@ test("the modal can be closed by clicking the close button", async () => {
   }
   const user = userEvent.setup();
   const { queryByRole, getByRole } = render(<ModalFn />);
-  await user.click(getByRole("button", { name: "action.close" }));
+  await user.click(getByRole("button", { name: "Close" }));
   expect(queryByRole("dialog")).toBeNull();
 });
 

src/Modal.tsx

@@ -1,11 +1,11 @@
 /*
 Copyright 2023, 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback } from "react";
+import { type FC, type ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Root as DialogRoot,

src/Overlay.module.css

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

src/Platform.ts

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

src/QrCode.module.css

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

src/QrCode.test.tsx

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

src/QrCode.tsx

@@ -1,11 +1,11 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState } from "react";
+import { type FC, useEffect, useState } from "react";
 import { toDataURL } from "qrcode";
 import classNames from "classnames";
 import { t } from "i18next";

src/RTCConnectionStats.module.css

@@ -0,0 +1,20 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+.modal pre {
+  font-size: var(--font-size-micro);
+}
+
+.statsPill {
+  border-radius: var(--media-view-border-radius);
+  grid-area: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  flex-direction: column;
+  align-items: flex-start;
+}

src/RTCConnectionStats.tsx

@@ -0,0 +1,112 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useState, type FC } from "react";
+import { Button, Text } from "@vector-im/compound-web";
+import {
+  MicOnSolidIcon,
+  VideoCallSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import classNames from "classnames";
+
+import { Modal } from "./Modal";
+import styles from "./RTCConnectionStats.module.css";
+import mediaViewStyles from "../src/tile/MediaView.module.css";
+interface Props {
+  audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
+  video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
+}
+
+// This is only used in developer mode for debugging purposes, so we don't need full localization
+export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [modalContents, setModalContents] = useState<
+    "video" | "audio" | "none"
+  >("none");
+
+  const showFullModal = (contents: "video" | "audio"): void => {
+    setShowModal(true);
+    setModalContents(contents);
+  };
+
+  const onDismissModal = (): void => {
+    setShowModal(false);
+    setModalContents("none");
+  };
+  return (
+    <div className={classNames(mediaViewStyles.nameTag, styles.statsPill)}>
+      <Modal
+        title="RTC Connection Stats"
+        open={showModal}
+        onDismiss={onDismissModal}
+      >
+        <div className={styles.modal}>
+          <pre>
+            {modalContents !== "none" &&
+              JSON.stringify(
+                modalContents === "video" ? video : audio,
+                null,
+                2,
+              )}
+          </pre>
+        </div>
+      </Modal>
+      {audio && (
+        <div>
+          <Button
+            onClick={() => showFullModal("audio")}
+            size="sm"
+            kind="tertiary"
+            Icon={MicOnSolidIcon}
+          >
+            {"jitter" in audio && typeof audio.jitter === "number" && (
+              <Text as="span" size="xs" title="jitter">
+                &nbsp;{(audio.jitter * 1000).toFixed(0)}ms
+              </Text>
+            )}
+          </Button>
+        </div>
+      )}
+      {video && (
+        <div>
+          <Button
+            onClick={() => showFullModal("video")}
+            size="sm"
+            kind="tertiary"
+            Icon={VideoCallSolidIcon}
+          >
+            {!!video?.framesPerSecond && (
+              <Text as="span" size="xs" title="frame rate">
+                &nbsp;{video.framesPerSecond.toFixed(0)}fps
+              </Text>
+            )}
+            {"jitter" in video && typeof video.jitter === "number" && (
+              <Text as="span" size="xs" title="jitter">
+                &nbsp;{(video.jitter * 1000).toFixed(0)}ms
+              </Text>
+            )}
+            {"frameHeight" in video &&
+              typeof video.frameHeight === "number" &&
+              "frameWidth" in video &&
+              typeof video.frameWidth === "number" && (
+                <Text as="span" size="xs" title="frame size">
+                  &nbsp;{video.frameWidth}x{video.frameHeight}
+                </Text>
+              )}
+            {"qualityLimitationReason" in video &&
+              typeof video.qualityLimitationReason === "string" &&
+              video.qualityLimitationReason !== "none" && (
+                <Text as="span" size="xs" title="quality limitation reason">
+                  &nbsp;{video.qualityLimitationReason}
+                </Text>
+              )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

src/RichError.tsx

@@ -0,0 +1,53 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useTranslation } from "react-i18next";
+import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import type { FC, ReactNode } from "react";
+import { ErrorView } from "./ErrorView";
+import { widget } from "./widget.ts";
+
+/**
+ * An error consisting of a terse message to be logged to the console and a
+ * richer message to be shown to the user, as a full-screen page.
+ */
+export class RichError extends Error {
+  public constructor(
+    message: string,
+    /**
+     * The pretty, more helpful message to be shown on the error screen.
+     */
+    public readonly richMessage: ReactNode,
+  ) {
+    super(message);
+  }
+}
+
+const OpenElsewhere: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ErrorView
+      widget={widget}
+      Icon={PopOutIcon}
+      title={t("error.open_elsewhere")}
+    >
+      <p>
+        {t("error.open_elsewhere_description", {
+          brand: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
+        })}
+      </p>
+    </ErrorView>
+  );
+};
+
+export class OpenElsewhereError extends RichError {
+  public constructor() {
+    super("App opened in another tab", <OpenElsewhere />);
+  }
+}

src/Slider.module.css

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

src/Slider.tsx

@@ -1,11 +1,11 @@
 /*
 Copyright 2023, 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback } from "react";
+import { type FC, useCallback } from "react";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
@@ -16,6 +16,9 @@ interface Props {
   className?: string;
   label: string;
   value: number;
+  /**
+   * Event handler called when the value changes during an interaction.
+   */
   onValueChange: (value: number) => void;
   /**
    * Event handler called when the value changes at the end of an interaction.

src/Toast.module.css

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

src/Toast.test.tsx

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

src/Toast.tsx

@@ -1,14 +1,14 @@
 /*
 Copyright 2023, 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ComponentType,
-  FC,
-  SVGAttributes,
+  type ComponentType,
+  type FC,
+  type SVGAttributes,
   useCallback,
   useEffect,
 } from "react";

src/TranslatedError.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
@@ -9,6 +9,9 @@ import type { DefaultNamespace, ParseKeys, TFunction, TOptions } from "i18next";
 
 /**
  * An error with messages in both English and the user's preferred language.
+ * Use this for errors that need to be displayed inline within another
+ * component. For errors that could be given their own screen, prefer
+ * {@link RichError}.
  */
 // Abstract to force consumers to use the function below rather than calling the
 // constructor directly