Merge pull request #2602 from Johennes/johannes/qr

Display QR code when sharing invite link

.eslintrc.cjs

@@ -38,6 +38,7 @@ module.exports = {
     "jsx-a11y/media-has-caption": "off",
     // We should use the js-sdk logger, never console directly.
     "no-console": ["error"],
+    "react/display-name": "error",
   },
   settings: {
     react: {

.github/CODEOWNERS

@@ -1 +1 @@
-* @vector-im/element-call-reviewers
+* @element-hq/element-call-reviewers

.github/workflows/build.yaml

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

.github/workflows/docker.yaml

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

.github/workflows/e2e.yml

@@ -12,9 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out test private repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
         with:
-          repository: vector-im/static-call-participant
+          repository: element-hq/static-call-participant
           ref: refs/heads/main
           path: static-call-participant
           token: ${{ secrets.GH_E2E_TEST_TOKEN }}

.github/workflows/element-call.yaml

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

.github/workflows/lint.yaml

@@ -7,11 +7,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
       - name: Yarn cache
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
+          node-version: "lts/*"
       - name: Install dependencies
         run: "yarn install"
       - name: Prettier
@@ -22,3 +23,5 @@ jobs:
         run: "yarn run lint:eslint"
       - name: Type check
         run: "yarn run lint:types"
+      - name: Dead code analysis
+        run: "yarn run lint:knip"

.github/workflows/netlify.yaml

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

.github/workflows/pr-deploy.yaml

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

.github/workflows/publish.yaml

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

.github/workflows/test.yaml

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

.github/workflows/translations-download.yaml

@@ -13,11 +13,12 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
+          node-version: "lts/*"
 
       - name: Install Deps
         run: "yarn install --frozen-lockfile"
@@ -26,7 +27,7 @@ jobs:
         run: "rm -R public/locales"
 
       - name: Download translation files
-        uses: localazy/download@v1.1.0
+        uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
         with:
           groups: "-p includeSourceLang:true"
 
@@ -38,7 +39,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@v5.0.2
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

.github/workflows/translations-upload.yaml

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

.storybook/main.js

@@ -1,25 +0,0 @@
-const svgrPlugin = require("vite-plugin-svgr");
-const path = require("path");
-
-module.exports = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  framework: "@storybook/react",
-  core: {
-    builder: "storybook-builder-vite",
-  },
-  async viteFinal(config) {
-    config.plugins = config.plugins.filter(
-      (item) =>
-        !(
-          Array.isArray(item) &&
-          item.length > 0 &&
-          item[0].name === "vite-plugin-mdx"
-        ),
-    );
-    config.plugins.push(svgrPlugin());
-    config.resolve = config.resolve || {};
-    config.resolve.dedupe = config.resolve.dedupe || [];
-    config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
-    return config;
-  },
-};

.storybook/preview.jsx

@@ -1,24 +0,0 @@
-import { addDecorator } from "@storybook/react";
-import { MemoryRouter } from "react-router-dom";
-import { usePageFocusStyle } from "../src/usePageFocusStyle";
-import { OverlayProvider } from "@react-aria/overlays";
-import "../src/index.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-addDecorator((story) => {
-  usePageFocusStyle();
-  return (
-    <MemoryRouter initialEntries={["/"]}>
-      <OverlayProvider>{story()}</OverlayProvider>
-    </MemoryRouter>
-  );
-});

README.md

@@ -5,7 +5,7 @@
 
 Group calls with WebRTC that leverage [Matrix](https://matrix.org) and an open-source WebRTC toolkit from [LiveKit](https://livekit.io/).
 
-For prior version of the Element Call that relied solely on full-mesh logic, check [`full-mesh`](https://github.com/vector-im/element-call/tree/full-mesh) branch.
+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.
 
 ![A demo of Element Call with six people](demo.jpg)
 
@@ -16,13 +16,13 @@ To try it out, visit our hosted version at [call.element.io](https://call.elemen
 Until prebuilt tarballs are available, you'll need to build Element Call from source. First, clone and install the package:
 
 ```
-git clone https://github.com/vector-im/element-call.git
+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 of your choice.
+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 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:
@@ -54,6 +54,38 @@ Therefore, to use a self-hosted homeserver, this is recommended to be a new serv
 
 There are currently two different config files. `.env` holds variables that are used at build time, while `public/config.json` holds variables that are used at runtime. Documentation and default values for `public/config.json` can be found in [ConfigOptions.ts](src/config/ConfigOptions.ts).
 
+If you're using [Synapse](https://github.com/element-hq/synapse/), you'll need to additionally add the following to `homeserver.yaml` or Element Call won't work:
+
+```
+experimental_features:
+    msc3266_enabled: true
+```
+
+MSC3266 allows to request a room summary of rooms you are not joined.
+The summary contains the room join rules. We need that to decide if the user gets prompted with the option to knock ("ask to join"), a cannot join error or the join view.
+
+Element Call requires a Livekit SFU behind a Livekit jwt service to work. The url to the Livekit jwt service can either be configured in the config of Element Call (fallback/legacy configuration) or be configured by your homeserver via the `.well-known`.
+This is the recommended method.
+
+The configuration is a list of Foci configs:
+
+```json
+"org.matrix.msc4143.rtc_foci": [
+    {
+        "type": "livekit",
+        "livekit_service_url": "https://someurl.com"
+    },
+     {
+        "type": "livekit",
+        "livekit_service_url": "https://livekit2.com"
+    },
+    {
+        "type": "another_foci",
+        "props_for_another_foci": "val"
+    },
+]
+```
+
 ## Translation
 
 If you'd like to help translate Element Call, head over to [Localazy](https://localazy.com/p/element-call). You're also encouraged to join the [Element Translators](https://matrix.to/#/#translators:element.io) space to discuss and coordinate translation efforts.
@@ -74,7 +106,7 @@ yarn link
 Next, we can set up this project:
 
 ```
-git clone https://github.com/vector-im/element-call.git
+git clone https://github.com/element-hq/element-call.git
 cd element-call
 yarn
 yarn link matrix-js-sdk
@@ -93,12 +125,14 @@ service for development. These use a test 'secret' published in this
 repository, so this must be used only for local development and
 **_never be exposed to the public Internet._**
 
-To use it, add SFU parameter in your local config `./public/config.yml`:
+To use it, add a SFU parameter in your local config `./public/config.json`:
+(Be aware, that this is only the fallback Livekit SFU. If the homeserver
+advertises one in the client well-known, this will not be used.)
 
-```yaml
+```json
 "livekit": {
-    "jwt_service_url": "http://localhost:8881"
+  "livekit_service_url": "http://localhost:7881"
-  },
+},
 ```
 
 Run backend components:
@@ -107,6 +141,32 @@ Run backend components:
 yarn backend
 ```
 
+### Test Coverage
+
+<img src="https://codecov.io/github/element-hq/element-call/graphs/tree.svg?token=O6CFVKK6I1"></img>
+
+### Add a new translation key
+
+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. Run `yarn i18n` to extract the new key and update the translation files. This will add a skeleton entry to the `public/locales/en-GB/app.json` file:
+   ```jsonc
+   {
+       ...
+       "some_new_key": "",
+       ...
+   }
+   ```
+1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with the English translation:
+   ```jsonc
+   {
+       ...
+       "some_new_key": "Some new key",
+       ...
+   }
+   ```
+
 ## Documentation
 
 Usage and other technical details about the project can be found here:

backend-docker-compose.yml

@@ -5,7 +5,7 @@ networks:
 
 services:
   auth-service:
-    image: ghcr.io/vector-im/lk-jwt-service:latest-ci
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
     hostname: auth-server
     ports:
       - 8881:8080

backend/livekit.yaml

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

codecov.yaml

@@ -0,0 +1,13 @@
+# Don't post comments on PRs; they're noisy and the same information can be
+# gotten through the checks section at the bottom of the PR anyways
+comment: false
+coverage:
+  status:
+    project:
+      default:
+        # Track the impact of changes on overall coverage without blocking PRs
+        informational: true
+    patch:
+      default:
+        # Expect 80% coverage on all lines that a PR touches
+        target: 80%

config/config.sample.json

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

config/config_netlify_preview.json

@@ -8,6 +8,9 @@
   "livekit": {
     "livekit_service_url": "https://livekit-jwt.call.element.dev"
   },
+  "features": {
+    "feature_use_device_session_member_events": true
+  },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
     "api_host": "https://posthog-element-call.element.io"

config/element_io_develop.json

@@ -1,19 +0,0 @@
-{
-  "default_server_config": {
-    "m.homeserver": {
-      "base_url": "https://call.ems.host",
-      "server_name": "call.ems.host"
-    }
-  },
-  "posthog": {
-    "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
-    "api_host": "https://posthog-element-call.element.io"
-  },
-  "sentry": {
-    "environment": "main-branch-cd",
-    "DSN": "https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41"
-  },
-  "rageshake": {
-    "submit_url": "https://element.io/bugreports/submit"
-  }
-}

config/httpd.conf

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

docs/README.md

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

docs/controls.md

@@ -0,0 +1,7 @@
+# Global JS controls
+
+A few aspects of Element Call's interface can be controlled through a global API on the `window`:
+
+- `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
+- `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
+- `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.

docs/url-params.md

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

knip.ts

@@ -0,0 +1,30 @@
+import { KnipConfig } from "knip";
+
+export default {
+  entry: ["src/main.tsx", "i18next-parser.config.ts"],
+  ignoreBinaries: [
+    // This is deprecated, so Knip doesn't actually recognize it as a globally
+    // installed binary. TODO We should switch to Compose v2:
+    // https://docs.docker.com/compose/migrate/
+    "docker-compose",
+  ],
+  ignoreDependencies: [
+    // Used in CSS
+    "normalize.css",
+    // Used for its global type declarations
+    "@types/grecaptcha",
+    // Because we use matrix-js-sdk as a Git dependency rather than consuming
+    // the proper release artifacts, and also import directly from src/, we're
+    // forced to re-install some of the types that it depends on even though
+    // these look unused to Knip
+    "@types/content-type",
+    "@types/sdp-transform",
+    "@types/uuid",
+    // We obviously use this, but if the package has been linked with yarn link,
+    // then Knip will flag it as a false positive
+    // https://github.com/webpro-nl/knip/issues/766
+    "@vector-im/compound-web",
+    "matrix-widget-api",
+  ],
+  ignoreExportsUsedInFile: true,
+} satisfies KnipConfig;

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "element-call",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
@@ -7,100 +8,61 @@
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
-    "lint": "yarn lint:types && yarn lint:eslint",
+    "lint": "yarn lint:types && yarn lint:eslint && yarn lint:knip",
     "lint:eslint": "eslint --max-warnings 0 src",
     "lint:eslint-fix": "eslint --max-warnings 0 src --fix",
+    "lint:knip": "knip",
     "lint:types": "tsc",
-    "i18n": "node_modules/i18next-parser/bin/cli.js",
+    "i18n": "i18next",
-    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+    "i18n:check": "i18next --fail-on-warnings --fail-on-update",
-    "test": "jest",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f backend-docker-compose.yml up"
   },
-  "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-react": "^1.1.0",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
-    "@opentelemetry/api": "^1.4.0",
-    "@opentelemetry/context-zone": "^1.9.1",
-    "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.45.0",
-    "@opentelemetry/instrumentation-document-load": "^0.33.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.33.0",
-    "@opentelemetry/sdk-trace-web": "^1.9.1",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@react-aria/button": "^3.3.4",
-    "@react-aria/focus": "^3.5.0",
-    "@react-aria/menu": "^3.3.0",
-    "@react-aria/overlays": "^3.7.3",
-    "@react-aria/select": "^3.6.0",
-    "@react-aria/tabs": "^3.1.0",
-    "@react-aria/tooltip": "^3.1.3",
-    "@react-aria/utils": "^3.10.0",
-    "@react-spring/web": "^9.4.4",
-    "@react-stately/collections": "^3.3.4",
-    "@react-stately/select": "^3.1.3",
-    "@react-stately/tooltip": "^3.0.5",
-    "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^7.0.0",
-    "@sentry/tracing": "^7.0.0",
-    "@types/lodash": "^4.14.199",
-    "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^0.1.0",
-    "@vector-im/compound-web": "^0.6.0",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^4.0.1",
-    "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
-    "events": "^3.3.0",
-    "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^7.0.0",
-    "i18next-http-backend": "^2.0.0",
-    "livekit-client": "^1.12.3",
-    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#eca651c0c2ff0600bdae0bb6aba43485e48b69d5",
-    "matrix-widget-api": "^1.3.1",
-    "normalize.css": "^8.0.1",
-    "pako": "^2.0.4",
-    "postcss-preset-env": "^9.0.0",
-    "posthog-js": "^1.29.0",
-    "react": "18",
-    "react-dom": "18",
-    "react-i18next": "^13.0.0",
-    "react-router-dom": "^5.2.0",
-    "react-use-clipboard": "^1.0.7",
-    "react-use-measure": "^2.1.1",
-    "sdp-transform": "^2.14.1",
-    "tinyqueue": "^2.0.3",
-    "unique-names-generator": "^4.6.0",
-    "uuid": "9",
-    "vaul": "^0.7.0"
-  },
   "devDependencies": {
     "@babel/core": "^7.16.5",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
-    "@react-spring/rafz": "^9.7.3",
+    "@juggle/resize-observer": "^3.3.1",
-    "@react-types/dialog": "^3.5.5",
+    "@livekit/components-core": "^0.11.0",
+    "@livekit/components-react": "^2.0.0",
+    "@opentelemetry/api": "^1.4.0",
+    "@opentelemetry/core": "^1.25.1",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.53.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",
+    "@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",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/dom": "^10.1.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
-    "@types/dom-screen-wake-lock": "^1.0.1",
+    "@types/grecaptcha": "^3.0.9",
-    "@types/dompurify": "^3.0.2",
+    "@types/jsdom": "^21.1.7",
-    "@types/grecaptcha": "^3.0.4",
+    "@types/lodash": "^4.14.199",
-    "@types/jest": "^29.5.5",
     "@types/node": "^20.0.0",
+    "@types/qrcode": "^1.5.5",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@types/request": "^2.48.8",
     "@types/sdp-transform": "^2.4.5",
-    "@types/uuid": "9",
+    "@types/uuid": "10",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@typescript-eslint/parser": "^7.0.0",
-    "babel-loader": "^9.0.0",
+    "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^1.0.0",
+    "@vector-im/compound-web": "^6.0.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "@vitest/coverage-v8": "^2.0.5",
     "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",
@@ -110,39 +72,43 @@
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unicorn": "^49.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
-    "i18next-parser": "^8.0.0",
+    "global-jsdom": "^24.0.0",
-    "identity-obj-proxy": "^3.0.0",
+    "history": "^4.0.0",
-    "jest": "^29.2.2",
+    "i18next": "^23.0.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "i18next-browser-languagedetector": "^8.0.0",
-    "jest-mock": "^29.5.0",
+    "i18next-http-backend": "^2.0.0",
+    "i18next-parser": "^9.0.0",
+    "jsdom": "^25.0.0",
+    "knip": "^5.27.2",
+    "livekit-client": "^2.0.2",
+    "lodash": "^4.17.21",
+    "loglevel": "^1.9.1",
+    "matrix-js-sdk": "^v34.4.0",
+    "matrix-widget-api": "^1.8.2",
+    "normalize.css": "^8.0.1",
+    "observable-hooks": "^4.2.3",
+    "pako": "^2.0.4",
+    "postcss": "^8.4.41",
+    "postcss-preset-env": "^10.0.0",
+    "posthog-js": "^1.29.0",
     "prettier": "^3.0.0",
+    "qrcode": "^1.5.4",
+    "react": "18",
+    "react-dom": "18",
+    "react-i18next": "^15.0.0",
+    "react-router-dom": "^5.2.0",
+    "react-use-clipboard": "^1.0.7",
+    "react-use-measure": "^2.1.1",
+    "rxjs": "^7.8.1",
     "sass": "^1.42.1",
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
-    "vite": "^4.2.0",
+    "unique-names-generator": "^4.6.0",
+    "vaul": "^0.9.0",
+    "vite": "^5.0.0",
     "vite-plugin-html-template": "^1.1.0",
-    "vite-plugin-svgr": "^4.0.0"
+    "vite-plugin-svgr": "^4.0.0",
-  },
+    "vitest": "^2.0.0"
-  "jest": {
-    "testEnvironment": "./test/environment.ts",
-    "testMatch": [
-      "<rootDir>/test/**/*-test.[jt]s?(x)"
-    ],
-    "transformIgnorePatterns": [
-      "/node_modules/(?!d3)+$",
-      "/node_modules/(?!internmap)+$"
-    ],
-    "moduleNameMapper": {
-      "\\.css$": "identity-obj-proxy",
-      "\\.svg\\?react$": "<rootDir>/test/mocks/svgr.ts",
-      "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
-      "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
-    },
-    "collectCoverage": true,
-    "coverageReporters": [
-      "text",
-      "cobertura"
-    ]
   }
 }

public/index.html

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

public/locales/bg/app.json

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

public/locales/cs/app.json

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

public/locales/de/app.json

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

public/locales/el/app.json

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

public/locales/en-GB/app.json

@@ -4,8 +4,8 @@
   },
   "action": {
     "close": "Close",
-    "copy": "Copy",
     "copy_link": "Copy link",
+    "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
     "no": "No",
@@ -13,7 +13,8 @@
     "remove": "Remove",
     "sign_in": "Sign in",
     "sign_out": "Sign out",
-    "submit": "Submit"
+    "submit": "Submit",
+    "upload_file": "Upload file"
   },
   "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
   "app_selection_modal": {
@@ -41,14 +42,16 @@
     "analytics": "Analytics",
     "audio": "Audio",
     "avatar": "Avatar",
+    "back": "Back",
     "camera": "Camera",
-    "copied": "Copied!",
     "display_name": "Display name",
     "encrypted": "Encrypted",
     "error": "Error",
     "home": "Home",
     "loading": "Loading…",
     "microphone": "Microphone",
+    "next": "Next",
+    "options": "Options",
     "password": "Password",
     "profile": "Profile",
     "settings": "Settings",
@@ -56,13 +59,22 @@
     "username": "Username",
     "video": "Video"
   },
+  "crypto_version": "Crypto version: {{version}}",
+  "device_id": "Device ID: {{id}}",
   "disconnected_banner": "Connectivity to the server has been lost.",
-  "exit_fullscreen_button_label": "Exit full screen",
   "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>",
-  "fullscreen_button_label": "Full screen",
+  "group_call_loader": {
-  "group_call_loader_failed_heading": "Call not found",
+    "banned_body": "You have been banned from the room.",
-  "group_call_loader_failed_text": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
+    "banned_heading": "Banned",
+    "call_ended_body": "You have been removed from the call.",
+    "call_ended_heading": "Call ended",
+    "failed_heading": "Failed to join",
+    "failed_text": "Call not found or is not accessible.",
+    "knock_reject_body": "The room members declined your request to join.",
+    "knock_reject_heading": "Not allowed to join",
+    "reason": "Reason"
+  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -78,21 +90,24 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
+    "ask_to_join": "Ask to join call",
     "join_button": "Join call",
-    "leave_button": "Back to recents"
+    "leave_button": "Back to recents",
+    "waiting_for_invite": "Request sent"
   },
-  "local_volume_label": "Local volume",
   "log_in": "Log In",
   "logging_in": "Logging in…",
   "login_auth_links": "<0>Create an account</0> Or <2>Access as a guest</2>",
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
+  "matrix_id": "Matrix ID: {{id}}",
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
   "participant_count_one": "{{count, number}}",
   "participant_count_other": "{{count, number}}",
+  "qr_code": "QR Code",
   "rageshake_button_error_caption": "Retry sending logs",
   "rageshake_request_modal": {
     "body": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
@@ -116,11 +131,11 @@
   "room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "room_auth_view_join_button": "Join call now",
   "screenshare_button_label": "Share screen",
-  "select_input_unset_button": "Select an option",
   "settings": {
     "developer_settings_label": "Developer Settings",
     "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
+    "duplicate_tiles_label": "Number of additional tile copies per participant",
     "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",
@@ -129,7 +144,6 @@
     "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.",
-    "show_connection_stats_label": "Show connection stats",
     "speaker_device_selection_label": "Speaker"
   },
   "star_rating_input_label_one": "{{count}} stars",
@@ -143,10 +157,13 @@
   "unauthenticated_view_eula_caption": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "unauthenticated_view_login_button": "Login to your account",
   "unmute_microphone_button_label": "Unmute microphone",
-  "version": "Version: {{version}}",
+  "version": "{{productName}} version: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} is presenting",
+    "always_show": "Always show",
-    "sfu_participant_local": "You"
+    "change_fit_contain": "Fit to frame",
-  },
+    "exit_full_screen": "Exit full screen",
-  "waiting_for_participants": "Waiting for other participants…"
+    "full_screen": "Full screen",
+    "mute_for_me": "Mute for me",
+    "volume": "Volume"
+  }
 }

public/locales/es/app.json

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

public/locales/et/app.json

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

public/locales/fa/app.json

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

public/locales/fr/app.json

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

public/locales/id/app.json

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

public/locales/it/app.json

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

public/locales/ja/app.json

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

public/locales/lv/app.json

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

public/locales/pl/app.json

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

public/locales/ru/app.json

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

public/locales/sk/app.json

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

public/locales/sv/app.json

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

public/locales/tr/app.json

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

public/locales/uk/app.json

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

public/locales/vi/app.json

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

public/locales/zh-Hans/app.json

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

public/locales/zh-Hant/app.json

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

renovate.json

@@ -3,9 +3,46 @@
   "extends": ["config:base"],
   "packageRules": [
     {
-      "description": "Disable renoavte for packages we want to monitor ourselves",
+      "groupName": "all non-major dependencies",
-      "matchPackagePatterns": ["matrix-js-sdk"],
+      "groupSlug": "all-minor-patch",
+      "matchUpdateTypes": ["minor", "patch"],
+      "extends": ["schedule:weekly"]
+    },
+    {
+      "groupName": "GitHub Actions",
+      "matchDepTypes": ["action"],
+      "pinDigests": true,
+      "extends": ["schedule:monthly"]
+    },
+    {
+      "description": "Disable Renovate for packages we want to monitor ourselves",
+      "groupName": "manually updated packages",
+      "matchDepNames": ["matrix-js-sdk"],
       "enabled": false
+    },
+    {
+      "groupName": "matrix-widget-api",
+      "matchDepNames": ["matrix-widget-api"]
+    },
+    {
+      "groupName": "Compound",
+      "matchPackagePrefixes": ["@vector-im/compound-"],
+      "schedule": "before 5am on Tuesday and Friday"
+    },
+    {
+      "groupName": "LiveKit client",
+      "matchDepNames": ["livekit-client"]
+    },
+    {
+      "groupName": "LiveKit components",
+      "matchPackagePrefixes": ["@livekit/components-"]
+    },
+    {
+      "groupName": "Vaul",
+      "matchDepNames": ["vaul"],
+      "extends": ["schedule:monthly"],
+      "prHeader": "Please review modals on mobile for visual regressions."
     }
-  ]
+  ],
+  "semanticCommits": "disabled"
 }

src/@types/global.d.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import "matrix-js-sdk/src/@types/global";
+import { Controls } from "../controls";
 
 declare global {
   interface Document {
@@ -24,14 +25,7 @@ declare global {
   }
 
   interface Window {
-    // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
+    controls: Controls;
-    OLM_OPTIONS: Record<string, string>;
-  }
-
-  // TypeScript doesn't know about the experimental setSinkId method, so we
-  // declare it ourselves
-  interface MediaElement extends HTMLVideoElement {
-    setSinkId: (id: string) => void;
   }
 
   interface HTMLElement {

src/App.tsx

@@ -22,8 +22,8 @@ import {
   useLocation,
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
-import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
@@ -34,19 +34,21 @@ import { CrashView, LoadingView } from "./FullScreenView";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
 import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
+import { widget } from "./widget";
+import { useTheme } from "./useTheme";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
-interface BackgroundProviderProps {
+interface SimpleProviderProps {
   children: JSX.Element;
 }
 
-const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
+const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
 
   useEffect(() => {
     let backgroundImage = "";
-    if (!["/login", "/register"].includes(pathname)) {
+    if (!["/login", "/register"].includes(pathname) && !widget) {
       backgroundImage = "var(--background-gradient)";
     }
 
@@ -56,6 +58,10 @@ const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
 
   return <>{children}</>;
 };
+const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
+  useTheme();
+  return children;
+};
 
 interface AppProps {
   history: History;
@@ -63,10 +69,11 @@ interface AppProps {
 
 export const App: FC<AppProps> = ({ history }) => {
   const [loaded, setLoaded] = useState(false);
-
   useEffect(() => {
     Initializer.init()?.then(() => {
+      if (loaded) return;
       setLoaded(true);
+      widget?.api.sendContentLoaded();
     });
   });
 
@@ -77,35 +84,37 @@ export const App: FC<AppProps> = ({ history }) => {
     // @ts-ignore
     <Router history={history}>
       <BackgroundProvider>
-        {loaded ? (
+        <ThemeProvider>
-          <Suspense fallback={null}>
+          <TooltipProvider>
-            <ClientProvider>
+            {loaded ? (
-              <MediaDevicesProvider>
+              <Suspense fallback={null}>
-                <Sentry.ErrorBoundary fallback={errorPage}>
+                <ClientProvider>
-                  <OverlayProvider>
+                  <MediaDevicesProvider>
-                    <DisconnectedBanner />
+                    <Sentry.ErrorBoundary fallback={errorPage}>
-                    <Switch>
+                      <DisconnectedBanner />
-                      <SentryRoute exact path="/">
+                      <Switch>
-                        <HomePage />
+                        <SentryRoute exact path="/">
-                      </SentryRoute>
+                          <HomePage />
-                      <SentryRoute exact path="/login">
+                        </SentryRoute>
-                        <LoginPage />
+                        <SentryRoute exact path="/login">
-                      </SentryRoute>
+                          <LoginPage />
-                      <SentryRoute exact path="/register">
+                        </SentryRoute>
-                        <RegisterPage />
+                        <SentryRoute exact path="/register">
-                      </SentryRoute>
+                          <RegisterPage />
-                      <SentryRoute path="*">
+                        </SentryRoute>
-                        <RoomPage />
+                        <SentryRoute path="*">
-                      </SentryRoute>
+                          <RoomPage />
-                    </Switch>
+                        </SentryRoute>
-                  </OverlayProvider>
+                      </Switch>
-                </Sentry.ErrorBoundary>
+                    </Sentry.ErrorBoundary>
-              </MediaDevicesProvider>
+                  </MediaDevicesProvider>
-            </ClientProvider>
+                </ClientProvider>
-          </Suspense>
+              </Suspense>
-        ) : (
+            ) : (
-          <LoadingView />
+              <LoadingView />
-        )}
+            )}
+          </TooltipProvider>
+        </ThemeProvider>
       </BackgroundProvider>
     </Router>
   );

src/Avatar.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { useMemo, FC } from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
 
-import { getAvatarUrl } from "./matrix-utils";
+import { getAvatarUrl } from "./utils/matrix";
 import { useClient } from "./ClientContext";
 
 export enum Size {

src/ClientContext.tsx

@@ -25,17 +25,18 @@ import {
   useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import {
+  ClientEvent,
+  ICreateClientOpts,
+  MatrixClient,
+} from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { MatrixError } from "matrix-js-sdk/src/matrix";
 
 import { ErrorView } from "./FullScreenView";
-import {
+import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
-  CryptoStoreIntegrityError,
-  fallbackICEServerAllowed,
-  initClient,
-} from "./matrix-utils";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,
@@ -317,7 +318,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       initClientState.client.on(ClientEvent.Sync, onSync);
     }
 
-    return () => {
+    return (): void => {
       if (initClientState.client) {
         initClientState.client.removeListener(ClientEvent.Sync, onSync);
       }
@@ -360,13 +361,13 @@ async function loadClient(): Promise<InitResult | null> {
 
       /* eslint-disable camelcase */
       const { user_id, device_id, access_token, passwordlessUser } = session;
-      const initClientParams = {
+      const initClientParams: ICreateClientOpts = {
         baseUrl: Config.defaultHomeserverUrl()!,
         accessToken: access_token,
         userId: user_id,
         deviceId: device_id,
         fallbackICEServerAllowed: fallbackICEServerAllowed,
-        livekitServiceURL: Config.get().livekit!.livekit_service_url,
+        livekitServiceURL: Config.get().livekit?.livekit_service_url,
       };
 
       try {
@@ -376,22 +377,17 @@ async function loadClient(): Promise<InitResult | null> {
           passwordlessUser,
         };
       } catch (err) {
-        if (err instanceof CryptoStoreIntegrityError) {
+        if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
           // We can't use this session anymore, so let's log it out
-          try {
+          logger.log(
-            const client = await initClient(initClientParams, false); // Don't need the crypto store just to log out)
+            "The session from local store is invalid; continuing without a client",
-            await client.logout(true);
+          );
-          } catch (err) {
+          clearSession();
-            logger.warn(
+          // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
-              "The previous session was lost, and we couldn't log it out, " +
+          return null;
-                err +
-                "either",
-            );
-          }
         }
         throw err;
       }
-      /* eslint-enable camelcase */
     } catch (err) {
       clearSession();
       throw err;

src/FullScreenView.tsx

@@ -20,13 +20,15 @@ import classNames from "classnames";
 import { Trans, 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 { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
-import { LinkButton, Button } from "./button";
+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";
 
 interface FullScreenViewProps {
   className?: string;
@@ -37,12 +39,11 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
   className,
   children,
 }) => {
+  const { hideHeader } = useUrlParams();
   return (
     <div className={classNames(styles.page, className)}>
       <Header>
-        <LeftNav>
+        <LeftNav>{!hideHeader && <HeaderLogo />}</LeftNav>
-          <HeaderLogo />
-        </LeftNav>
         <RightNav />
       </Header>
       <div className={styles.container}>
@@ -58,6 +59,7 @@ interface ErrorViewProps {
 
 export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
   const location = useLocation();
+  const { confineToRoom } = useUrlParams();
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -78,25 +80,16 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
           : error.message}
       </p>
       <RageshakeButton description={`***Error View***: ${error.message}`} />
-      {location.pathname === "/" ? (
+      {!confineToRoom &&
-        <Button
+        (location.pathname === "/" ? (
-          size="lg"
+          <Button className={styles.homeLink} onClick={onReload}>
-          variant="default"
+            {t("return_home_button")}
-          className={styles.homeLink}
+          </Button>
-          onPress={onReload}
+        ) : (
-        >
+          <LinkButton className={styles.homeLink} to="/">
-          {t("return_home_button")}
+            {t("return_home_button")}
-        </Button>
+          </LinkButton>
-      ) : (
+        ))}
-        <LinkButton
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          to="/"
-        >
-          {t("return_home_button")}
-        </LinkButton>
-      )}
     </FullScreenView>
   );
 };
@@ -120,12 +113,7 @@ export const CrashView: FC = () => {
       )}
 
       <RageshakeButton description="***Soft Crash***" />
-      <Button
+      <Button className={styles.wideButton} onClick={onReload}>
-        size="lg"
-        variant="default"
-        className={styles.wideButton}
-        onPress={onReload}
-      >
         {t("return_home_button")}
       </Button>
     </FullScreenView>

src/Header.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -33,6 +33,7 @@ limitations under the License.
 }
 
 .headerLogo {
+  color: var(--cpd-color-text-primary);
   display: none;
   align-items: center;
   text-decoration: none;
@@ -89,6 +90,7 @@ limitations under the License.
 .nameLine {
   grid-area: name;
   flex-grow: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1x);
@@ -96,8 +98,6 @@ limitations under the License.
 
 .nameLine > h1 {
   margin: 0;
-  /* XXX I can't actually get this ellipsis overflow to trigger, because
-  constraint propagation in a nested flexbox layout is a massive pain */
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -108,6 +108,7 @@ limitations under the License.
 
 .participantsLine {
   grid-area: participants;
+  color: var(--cpd-color-text-secondary);
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1-5x);

src/Header.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode } from "react";
+import { FC, HTMLAttributes, ReactNode, forwardRef } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
-import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
+import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Header.module.css";
 import Logo from "./icons/Logo.svg?react";
@@ -32,13 +32,21 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
   className?: string;
 }
 
-export const Header: FC<HeaderProps> = ({ children, className, ...rest }) => {
+export const Header = forwardRef<HTMLElement, HeaderProps>(
-  return (
+  ({ children, className, ...rest }, ref) => {
-    <header className={classNames(styles.header, className)} {...rest}>
+    return (
-      {children}
+      <header
-    </header>
+        ref={ref}
-  );
+        className={classNames(styles.header, className)}
-};
+        {...rest}
+      >
+        {children}
+      </header>
+    );
+  },
+);
+
+Header.displayName = "Header";
 
 interface LeftNavProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
@@ -117,7 +125,7 @@ interface RoomHeaderInfoProps {
   name: string;
   avatarUrl: string | null;
   encrypted: boolean;
-  participantCount: number;
+  participantCount: number | null;
 }
 
 export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
@@ -150,7 +158,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
         </Heading>
         <EncryptionLock encrypted={encrypted} />
       </div>
-      {participantCount > 0 && (
+      {(participantCount ?? 0) > 0 && (
         <div className={styles.participantsLine}>
           <UserProfileIcon
             width={20}
@@ -158,7 +166,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
             aria-label={t("header_participants_label")}
           />
           <Text as="span" size="sm" weight="medium">
-            {t("participant_count", { count: participantCount })}
+            {t("participant_count", { count: participantCount ?? 0 })}
           </Text>
         </div>
       )}

src/ListBox.module.css

@@ -1,49 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.listBox {
-  margin: 0;
-  padding: 0;
-  max-height: 150px;
-  overflow-y: auto;
-  list-style: none;
-  background-color: transparent;
-  border: 1px solid var(--cpd-color-border-interactive-secondary);
-  background-color: var(--cpd-color-bg-canvas-default);
-  border-radius: 8px;
-}
-
-.option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: transparent;
-  color: var(--cpd-color-text-primary);
-  padding: 8px 16px;
-  outline: none;
-  cursor: pointer;
-  font-size: var(--font-size-body);
-  min-height: 32px;
-}
-
-.option.focused {
-  background-color: rgba(111, 120, 130, 0.2);
-}
-
-.option.disabled {
-  color: var(--cpd-color-text-disabled);
-  background-color: var(--stopgap-bgColor3);
-}

src/ListBox.tsx

@@ -1,116 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  MutableRefObject,
-  PointerEvent,
-  ReactNode,
-  useCallback,
-  useRef,
-} from "react";
-import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
-import { ListState } from "@react-stately/list";
-import { Node } from "@react-types/shared";
-import classNames from "classnames";
-
-import styles from "./ListBox.module.css";
-
-interface ListBoxProps<T> extends AriaListBoxOptions<T> {
-  optionClassName: string;
-  state: ListState<T>;
-  className?: string;
-  listBoxRef?: MutableRefObject<HTMLUListElement>;
-}
-
-export function ListBox<T>({
-  state,
-  optionClassName,
-  className,
-  listBoxRef,
-  ...rest
-}: ListBoxProps<T>): ReactNode {
-  const ref = useRef<HTMLUListElement>(null);
-
-  const listRef = listBoxRef ?? ref;
-
-  const { listBoxProps } = useListBox(rest, state, listRef);
-
-  return (
-    <ul
-      {...listBoxProps}
-      ref={listRef}
-      className={classNames(styles.listBox, className)}
-    >
-      {[...state.collection].map((item) => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state}
-          className={optionClassName}
-        />
-      ))}
-    </ul>
-  );
-}
-
-interface OptionProps<T> {
-  className: string;
-  state: ListState<T>;
-  item: Node<T>;
-}
-
-function Option<T>({ item, state, className }: OptionProps<T>): ReactNode {
-  const ref = useRef(null);
-  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
-    { key: item.key },
-    state,
-    ref,
-  );
-
-  // Hack: remove the onPointerUp event handler and re-wire it to
-  // onClick. Chrome Android triggers a click event after the onpointerup
-  // event which leaks through to elements underneath the z-indexed select
-  // popover. preventDefault / stopPropagation don't have any effect, even
-  // adding just a dummy onClick handler still doesn't work, but it's fine
-  // if we handle just onClick.
-  // https://github.com/vector-im/element-call/issues/762
-  const origPointerUp = optionProps.onPointerUp;
-  delete optionProps.onPointerUp;
-  optionProps.onClick = useCallback(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    (e) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      origPointerUp(e as unknown as PointerEvent<HTMLElement>);
-    },
-    [origPointerUp],
-  );
-
-  return (
-    <li
-      {...optionProps}
-      ref={ref}
-      className={classNames(styles.option, className, {
-        [styles.selected]: isSelected,
-        [styles.focused]: isFocused,
-        [styles.disables]: isDisabled,
-      })}
-    >
-      {item.rendered}
-    </li>
-  );
-}

src/Menu.module.css

@@ -1,73 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.menu {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.menuItem {
-  cursor: pointer;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  color: var(--cpd-color-text-primary);
-  font-size: var(--font-size-body);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.menuItem > * {
-  margin: 0 10px 0 0;
-}
-
-.menuItem > :last-child {
-  margin-right: 0;
-}
-
-.menuItem.focused,
-.menuItem:hover {
-  background-color: var(--cpd-color-bg-action-secondary-hovered);
-}
-
-.menuItem:active {
-  background-color: var(--cpd-color-bg-action-secondary-pressed);
-}
-
-.menuItem.focused:first-child,
-.menuItem:hover:first-child {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.menuItem.focused:last-child,
-.menuItem:hover:last-child {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-
-.checkIcon {
-  position: absolute;
-  right: 16px;
-}
-
-.checkIcon * {
-  stroke: var(--cpd-color-text-primary);
-}

src/Menu.tsx

@@ -1,102 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Key, ReactNode, useRef, useState } from "react";
-import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
-import { TreeState, useTreeState } from "@react-stately/tree";
-import { mergeProps } from "@react-aria/utils";
-import { useFocus } from "@react-aria/interactions";
-import classNames from "classnames";
-import { Node } from "@react-types/shared";
-
-import styles from "./Menu.module.css";
-
-interface MenuProps<T> extends AriaMenuOptions<T> {
-  className?: string;
-  onClose: () => void;
-  onAction: (value: Key) => void;
-  label?: string;
-}
-
-export function Menu<T extends object>({
-  className,
-  onAction,
-  onClose,
-  label,
-  ...rest
-}: MenuProps<T>): ReactNode {
-  const state = useTreeState<T>({ ...rest, selectionMode: "none" });
-  const menuRef = useRef(null);
-  const { menuProps } = useMenu<T>(rest, state, menuRef);
-
-  return (
-    <ul
-      {...mergeProps(menuProps, rest)}
-      ref={menuRef}
-      className={classNames(styles.menu, className)}
-    >
-      {[...state.collection].map((item) => (
-        <MenuItem
-          key={item.key}
-          item={item}
-          state={state}
-          onAction={onAction}
-          onClose={onClose}
-        />
-      ))}
-    </ul>
-  );
-}
-
-interface MenuItemProps<T> {
-  item: Node<T>;
-  state: TreeState<T>;
-  onAction: (value: Key) => void;
-  onClose: () => void;
-}
-
-function MenuItem<T>({
-  item,
-  state,
-  onAction,
-  onClose,
-}: MenuItemProps<T>): ReactNode {
-  const ref = useRef(null);
-  const { menuItemProps } = useMenuItem(
-    {
-      key: item.key,
-      onAction,
-      onClose,
-    },
-    state,
-    ref,
-  );
-
-  const [isFocused, setFocused] = useState(false);
-  const { focusProps } = useFocus({ onFocusChange: setFocused });
-
-  return (
-    <li
-      {...mergeProps(menuItemProps, focusProps)}
-      ref={ref}
-      className={classNames(styles.menuItem, {
-        [styles.focused]: isFocused,
-      })}
-    >
-      {item.rendered}
-    </li>
-  );
-}

src/Modal.module.css

@@ -134,6 +134,10 @@ body[data-platform="ios"] .drawer {
   padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
 }
 
+.modal.tabbed .body {
+  padding-block-start: 0;
+}
+
 .handle {
   content: "";
   position: absolute;

src/Modal.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { FC, ReactNode, useCallback } from "react";
-import { AriaDialogProps } from "@react-types/dialog";
 import { useTranslation } from "react-i18next";
 import {
   Root as DialogRoot,
@@ -27,7 +26,7 @@ import {
 } from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { Heading, Glass } from "@vector-im/compound-web";
 
@@ -35,8 +34,7 @@ import styles from "./Modal.module.css";
 import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";
 
-// TODO: Support tabs
+export interface Props {
-export interface Props extends AriaDialogProps {
   title: string;
   children: ReactNode;
   className?: string;
@@ -52,6 +50,11 @@ export interface Props extends AriaDialogProps {
    * will be non-dismissable.
    */
   onDismiss?: () => void;
+  /**
+   * Whether the modal content has tabs.
+   */
+  // TODO: Better tabs support
+  tabbed?: boolean;
 }
 
 /**
@@ -64,6 +67,7 @@ export const Modal: FC<Props> = ({
   className,
   open,
   onDismiss,
+  tabbed,
   ...rest
 }) => {
   const { t } = useTranslation();
@@ -92,6 +96,7 @@ export const Modal: FC<Props> = ({
               overlayStyles.overlay,
               styles.modal,
               styles.drawer,
+              { [styles.tabbed]: tabbed },
             )}
             {...rest}
           >
@@ -123,6 +128,7 @@ export const Modal: FC<Props> = ({
                 overlayStyles.animate,
                 styles.modal,
                 styles.dialog,
+                { [styles.tabbed]: tabbed },
               )}
             >
               <div className={styles.content}>

src/Overlay.module.css

@@ -16,7 +16,6 @@ limitations under the License.
 
 .bg {
   position: fixed;
-  z-index: 100;
   inset: 0;
   background: rgba(3, 12, 27, 0.528);
 }
@@ -49,7 +48,6 @@ limitations under the License.
 
 .overlay {
   position: fixed;
-  z-index: 101;
 }
 
 .overlay.animate {

src/Platform.ts

@@ -36,3 +36,8 @@ if (/android/i.test(navigator.userAgent)) {
 } else {
   platform = "desktop";
 }
+
+export const isFirefox = (): boolean => {
+  const { userAgent } = navigator;
+  return userAgent.includes("Firefox");
+};

src/QrCode.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.banner {
+.qrCode img {
-  flex: 1;
+  max-width: 100%;
-  border-radius: 8px;
+  image-rendering: pixelated;
-  padding: 16px;
+  border-radius: var(--cpd-space-4x);
-  background-color: var(--cpd-color-bg-subtle-primary);
 }

src/QrCode.test.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,16 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Olm from "@matrix-org/olm";
+import { describe, expect, test } from "vitest";
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+import { render, configure } from "@testing-library/react";
 
-// https://gitlab.matrix.org/matrix-org/olm/-/issues/10
+import { QrCode } from "./QrCode";
-window.OLM_OPTIONS = {};
 
-let olmLoaded: Promise<void> | null = null;
+configure({
+  defaultHidden: true,
+});
 
-/**
+describe("QrCode", () => {
- * Loads Olm, if not already loaded.
+  test("renders", async () => {
- */
+    const { container, findByRole } = render(
-export const loadOlm = (): Promise<void> =>
+      <QrCode data="foo" className="bar" />,
-  (olmLoaded ??= Olm.init({ locateFile: () => olmWasmPath }));
+    );
+    (await findByRole("img")) as HTMLImageElement;
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/QrCode.tsx

@@ -0,0 +1,57 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, useEffect, useState } from "react";
+import { toDataURL } from "qrcode";
+import classNames from "classnames";
+import { t } from "i18next";
+
+import styles from "./QrCode.module.css";
+
+interface Props {
+  data: string;
+  className?: string;
+}
+
+export const QrCode: FC<Props> = ({ data, className }) => {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    toDataURL(data, { errorCorrectionLevel: "L" })
+      .then((url) => {
+        if (!isCancelled) {
+          setUrl(url);
+        }
+      })
+      .catch((reason) => {
+        if (!isCancelled) {
+          setUrl(null);
+        }
+      });
+
+    return (): void => {
+      isCancelled = true;
+    };
+  }, [data]);
+
+  return (
+    <div className={classNames(styles.qrCode, className)}>
+      {url && <img src={url} alt={t("qr_code")} />}
+    </div>
+  );
+};

src/Slider.module.css

@@ -0,0 +1,66 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.slider {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.track {
+  flex-grow: 1;
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-subtle-primary);
+  height: var(--cpd-space-2x);
+  outline: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-primary);
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
+  cursor: pointer;
+  transition: outline-color ease 0.15s;
+}
+
+.track[data-disabled] {
+  cursor: initial;
+  outline-color: var(--cpd-color-border-disabled);
+}
+
+.highlight {
+  background: var(--cpd-color-bg-action-primary-rest);
+  position: absolute;
+  block-size: 100%;
+  border-radius: var(--cpd-radius-pill-effect);
+  transition: background-color ease 0.15s;
+}
+
+.highlight[data-disabled] {
+  background: var(--cpd-color-bg-action-primary-disabled);
+}
+
+.handle {
+  display: block;
+  block-size: var(--cpd-space-4x);
+  inline-size: var(--cpd-space-4x);
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-action-primary-rest);
+  box-shadow: 0 0 0 2px var(--cpd-color-bg-canvas-default);
+  cursor: pointer;
+  transition: background-color ease 0.15s;
+}
+
+.handle[data-disabled] {
+  cursor: initial;
+  background: var(--cpd-color-bg-action-primary-disabled);
+}

src/Slider.tsx

@@ -0,0 +1,68 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, useCallback } from "react";
+import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
+import classNames from "classnames";
+
+import styles from "./Slider.module.css";
+
+interface Props {
+  className?: string;
+  label: string;
+  value: number;
+  onValueChange: (value: number) => void;
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+}
+
+/**
+ * A slider control allowing a value to be selected from a range.
+ */
+export const Slider: FC<Props> = ({
+  className,
+  label,
+  value,
+  onValueChange: onValueChangeProp,
+  min,
+  max,
+  step,
+  disabled,
+}) => {
+  const onValueChange = useCallback(
+    ([v]: number[]) => onValueChangeProp(v),
+    [onValueChangeProp],
+  );
+
+  return (
+    <Root
+      className={classNames(className, styles.slider)}
+      value={[value]}
+      onValueChange={onValueChange}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+    >
+      <Track className={styles.track}>
+        <Range className={styles.highlight} />
+      </Track>
+      <Thumb className={styles.handle} aria-label={label} />
+    </Root>
+  );
+};

src/Toast.test.tsx

@@ -0,0 +1,86 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import { render, configure } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Toast } from "../src/Toast";
+import { withFakeTimers } from "./utils/test";
+
+configure({
+  defaultHidden: true,
+});
+
+// Test Explanation:
+// This test the toast. We need to use { document: window.document } because the toast listens
+// for user input on `window`.
+describe("Toast", () => {
+  test("renders", () => {
+    const { queryByRole } = render(
+      <Toast open={false} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(queryByRole("dialog")).toBe(null);
+    const { getByRole } = render(
+      <Toast open={true} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(getByRole("dialog")).toMatchSnapshot();
+  });
+
+  test("dismisses when Esc is pressed", async () => {
+    const user = userEvent.setup({ document: window.document });
+    const onDismiss = vi.fn();
+    const { debug } = render(
+      <Toast open={true} onDismiss={onDismiss}>
+        Hello world!
+      </Toast>,
+    );
+    debug();
+    await user.keyboard("[Escape]");
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  test("dismisses when background is clicked", async () => {
+    const user = userEvent.setup();
+    const onDismiss = vi.fn();
+    const { getByRole, unmount } = render(
+      <Toast open={true} onDismiss={onDismiss}>
+        Hello world!
+      </Toast>,
+    );
+    const background = getByRole("dialog").previousSibling! as Element;
+    await user.click(background);
+    expect(onDismiss).toHaveBeenCalled();
+    unmount();
+  });
+
+  test("dismisses itself after the specified timeout", () => {
+    withFakeTimers(() => {
+      const onDismiss = vi.fn();
+      render(
+        <Toast open={true} onDismiss={onDismiss} autoDismiss={2000}>
+          Hello world!
+        </Toast>,
+      );
+      vi.advanceTimersByTime(2000);
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+});

src/Toast.tsx

@@ -76,7 +76,7 @@ export const Toast: FC<Props> = ({
   useEffect(() => {
     if (open && autoDismiss !== undefined) {
       const timeout = setTimeout(onDismiss, autoDismiss);
-      return () => clearTimeout(timeout);
+      return (): void => clearTimeout(timeout);
     }
   }, [open, autoDismiss, onDismiss]);
 
@@ -86,7 +86,7 @@ export const Toast: FC<Props> = ({
         <DialogOverlay
           className={classNames(overlayStyles.bg, overlayStyles.animate)}
         />
-        <DialogContent asChild>
+        <DialogContent aria-describedby={undefined} asChild>
           <DialogClose
             className={classNames(
               overlayStyles.overlay,

src/Tooltip.module.css

@@ -1,30 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.tooltip {
-  background-color: var(--cpd-color-bg-subtle-secondary);
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  color: var(--cpd-color-text-primary);
-  border-radius: 8px;
-  max-width: 135px;
-  width: max-content;
-  font-size: var(--font-size-caption);
-  font-weight: 500;
-  text-align: center;
-}

src/Tooltip.tsx

@@ -1,114 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  ReactNode,
-  useRef,
-} from "react";
-import {
-  TooltipTriggerState,
-  useTooltipTriggerState,
-} from "@react-stately/tooltip";
-import { FocusableProvider } from "@react-aria/focus";
-import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
-import classNames from "classnames";
-import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
-import { Placement } from "@react-types/overlays";
-
-import styles from "./Tooltip.module.css";
-
-interface TooltipProps {
-  className?: string;
-  state: TooltipTriggerState;
-  children: ReactNode;
-}
-
-const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  (
-    { state, className, children, ...rest }: TooltipProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const { tooltipProps } = useTooltip(rest, state);
-
-    return (
-      <div
-        className={classNames(styles.tooltip, className)}
-        {...mergeProps(rest, tooltipProps)}
-        ref={ref}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-interface TooltipTriggerProps {
-  children: ReactElement;
-  placement?: Placement;
-  delay?: number;
-  tooltip: () => string;
-}
-
-export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
-  (
-    { children, placement, tooltip, ...rest }: TooltipTriggerProps,
-    ref: ForwardedRef<HTMLElement>,
-  ) => {
-    const tooltipTriggerProps = { delay: 250, ...rest };
-    const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
-    const triggerRef = useObjectRef<HTMLElement>(ref);
-    const overlayRef = useRef<HTMLDivElement>(null);
-    const { triggerProps, tooltipProps } = useTooltipTrigger(
-      tooltipTriggerProps,
-      tooltipState,
-      triggerRef,
-    );
-
-    const { overlayProps } = useOverlayPosition({
-      placement: placement || "top",
-      targetRef: triggerRef,
-      overlayRef,
-      isOpen: tooltipState.isOpen,
-      offset: 12,
-    });
-
-    return (
-      <FocusableProvider ref={triggerRef} {...triggerProps}>
-        <children.type
-          {...mergeProps<typeof children.props | typeof rest>(
-            children.props,
-            rest,
-          )}
-        />
-        {tooltipState.isOpen && (
-          <OverlayContainer>
-            <Tooltip
-              state={tooltipState}
-              ref={overlayRef}
-              {...mergeProps(tooltipProps, overlayProps)}
-            >
-              {tooltip()}
-            </Tooltip>
-          </OverlayContainer>
-        )}
-      </FocusableProvider>
-    );
-  },
-);

src/TranslatedError.ts

@@ -14,10 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import i18n from "i18next";
+import type { DefaultNamespace, ParseKeys, TFunction, TOptions } from "i18next";
-
-import type { ParseKeys, TFunction } from "i18next/typescript/t";
-import type { DefaultNamespace, TOptions } from "i18next/typescript/options";
 
 /**
  * An error with messages in both English and the user's preferred language.
@@ -45,5 +42,5 @@ class TranslatedErrorImpl extends TranslatedError {}
 // function instead
 export const translatedError = (
   messageKey: ParseKeys<DefaultNamespace, TOptions>,
-  t: typeof i18n.t,
+  t: TFunction<"app", undefined>,
 ): TranslatedError => new TranslatedErrorImpl(messageKey, t);

src/UrlParams.test.ts

@@ -14,23 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { mocked } from "jest-mock";
+import { describe, expect, it } from "vitest";
 
 import { getRoomIdentifierFromUrl } from "../src/UrlParams";
-import { Config } from "../src/config/Config";
 
 const ROOM_NAME = "roomNameHere";
 const ROOM_ID = "!d45f138fsd";
 const ORIGIN = "https://call.element.io";
-const HOMESERVER = "call.ems.host";
+const HOMESERVER = "localhost";
-
-jest.mock("../src/config/Config");
 
 describe("UrlParams", () => {
-  beforeAll(() => {
-    mocked(Config.defaultServerName).mockReturnValue("call.ems.host");
-  });
-
   describe("handles URL with /room/", () => {
     it("and nothing else", () => {
       expect(

src/UrlParams.ts

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

src/UserMenu.module.css

@@ -21,6 +21,14 @@ limitations under the License.
   flex-shrink: 0;
 }
 
+.userButton {
+  appearance: none;
+  background: none;
+  border: none;
+  margin: 0;
+  cursor: pointer;
+}
+
 .userButton svg * {
   fill: var(--cpd-color-icon-primary);
 }

src/UserMenu.tsx

@@ -14,21 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { FC, ReactNode, useCallback, useMemo } from "react";
+import { FC, useMemo, useState } from "react";
-import { Item } from "@react-stately/collections";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Menu, MenuItem } from "@vector-im/compound-web";
 
-import { Button, LinkButton } from "./button";
+import { LinkButton } from "./button";
-import { PopoverMenuTrigger } from "./popover/PopoverMenu";
-import { Menu } from "./Menu";
-import { TooltipTrigger } from "./Tooltip";
 import { Avatar, Size } from "./Avatar";
 import UserIcon from "./icons/User.svg?react";
 import SettingsIcon from "./icons/Settings.svg?react";
 import LoginIcon from "./icons/Login.svg?react";
 import LogoutIcon from "./icons/Logout.svg?react";
-import { Body } from "./typography/Typography";
 import styles from "./UserMenu.module.css";
 
 interface Props {
@@ -66,7 +62,7 @@ export const UserMenu: FC<Props> = ({
       arr.push({
         key: "settings",
         icon: SettingsIcon,
-        label: "common.settings",
+        label: t("common.settings"),
       });
 
       if (isPasswordlessUser && !preventNavigation) {
@@ -91,7 +87,7 @@ export const UserMenu: FC<Props> = ({
     return arr;
   }, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);
 
-  const tooltip = useCallback(() => t("common.profile"), [t]);
+  const [open, setOpen] = useState(false);
 
   if (!isAuthenticated) {
     return (
@@ -102,10 +98,15 @@ export const UserMenu: FC<Props> = ({
   }
 
   return (
-    <PopoverMenuTrigger placement="bottom right">
+    <Menu
-      <TooltipTrigger tooltip={tooltip} placement="bottom left">
+      title={t("a11y.user_menu")}
-        <Button
+      showTitle={false}
-          variant="icon"
+      align="end"
+      open={open}
+      onOpenChange={setOpen}
+      trigger={
+        <button
+          aria-label={t("common.profile")}
           className={styles.userButton}
           data-testid="usermenu_open"
         >
@@ -119,26 +120,18 @@ export const UserMenu: FC<Props> = ({
           ) : (
             <UserIcon />
           )}
-        </Button>
+        </button>
-      </TooltipTrigger>
-      {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (props: any): ReactNode => (
-          <Menu {...props} label={t("a11y.user_menu")} onAction={onAction}>
-            {items.map(({ key, icon: Icon, label, dataTestid }) => (
-              <Item key={key} textValue={label}>
-                <Icon
-                  width={24}
-                  height={24}
-                  className={styles.menuIcon}
-                  data-testid={dataTestid}
-                />
-                <Body overflowEllipsis>{label}</Body>
-              </Item>
-            ))}
-          </Menu>
-        )
       }
-    </PopoverMenuTrigger>
+    >
+      {items.map(({ key, icon: Icon, label, dataTestid }) => (
+        <MenuItem
+          key={key}
+          Icon={Icon}
+          label={label}
+          data-test-id={dataTestid}
+          onSelect={() => onAction(key)}
+        />
+      ))}
+    </Menu>
   );
 };

src/UserMenuContainer.tsx

@@ -19,7 +19,7 @@ import { useHistory, useLocation } from "react-router-dom";
 
 import { useClientLegacy } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
-import { SettingsModal } from "./settings/SettingsModal";
+import { defaultSettingsTab, SettingsModal } from "./settings/SettingsModal";
 import { UserMenu } from "./UserMenu";
 
 interface Props {
@@ -37,17 +37,17 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
     [setSettingsModalOpen],
   );
 
-  const [defaultSettingsTab, setDefaultSettingsTab] = useState<string>();
+  const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
 
   const onAction = useCallback(
     async (value: string) => {
       switch (value) {
         case "user":
-          setDefaultSettingsTab("profile");
+          setSettingsTab("profile");
           setSettingsModalOpen(true);
           break;
         case "settings":
-          setDefaultSettingsTab("audio");
+          setSettingsTab("audio");
           setSettingsModalOpen(true);
           break;
         case "logout":
@@ -76,9 +76,10 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
       {client && (
         <SettingsModal
           client={client}
-          defaultTab={defaultSettingsTab}
           open={settingsModalOpen}
           onDismiss={onDismissSettingsModal}
+          tab={settingsTab}
+          onTabChange={setSettingsTab}
         />
       )}
     </>

src/__snapshots__/QrCode.test.tsx.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`QrCode > renders 1`] = `
+<div
+  class="qrCode bar"
+>
+  <img
+    alt="qr_code"
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAALBSURBVO3BQW7kQAwEwSxC//9yro88NSBI4/UQjIg/WGMUa5RijVKsUYo1SrFGKdYoxRqlWKMUa5RijVKsUYo1SrFGKdYoxRrl4qEk/CaVkyR0Kl0STlS6JPwmlSeKNUqxRinWKBcvU3lTEk6S8ITKHSpvSsKbijVKsUYp1igXH5aEO1Q+SaVLQqdyRxLuUPmkYo1SrFGKNcrFl1PpknCShE5lkmKNUqxRijXKxZdLQqdyotIloVP5ZsUapVijFGuUiw9T+UuS8CaVv6RYoxRrlGKNcvGyJPwlSehUuiTckYS/rFijFGuUYo0Sf/DFkvAmlW9WrFGKNUqxRrl4KAknKl0SOpWTJJyodEk4UbkjCXeodEk4UXlTsUYp1ijFGuXiIZUuCXck4USlS0KXhE7lk1TelIRO5YlijVKsUYo1ysXLVLok3KHSJaFT6ZLQJaFTOUnCicodSehUTpLwpmKNUqxRijXKxUNJ6FSeSEKn0iXhROUkCZ3Kb0pCp/KmYo1SrFGKNcrFh6mcJKFT6ZJwotIloVPpVLokdCpdEjqVLgmdyh1J6FSeKNYoxRqlWKPEH3yxJHQqJ0noVO5IwolKl4ROpUtCp/JEsUYp1ijFGuXioST8JpU7ktCpnCShUzlROVHpktCpvKlYoxRrlGKNcvEylTcl4USlS8JJEt6UhBOVTqVLQqfyRLFGKdYoxRrl4sOScIfKEyonSehUTpJwh0qXhN9UrFGKNUqxRrn4ckn4JJU7kvA/FWuUYo1SrFEuvpxKl4QTlS4JncodSehU7kjCm4o1SrFGKdYoFx+m8klJOFE5UemScKJyRxI6lU7lTcUapVijFGuUi5cl4X9SOUnCicoTSThJQqfypmKNUqxRijVK/MEao1ijFGuUYo1SrFGKNUqxRinWKMUapVijFGuUYo1SrFGKNUqxRinWKP8AKoQP/lIBoMIAAAAASUVORK5CYII="
+  />
+</div>
+`;

src/__snapshots__/Toast-test.tsx.snap

@@ -1,8 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Toast renders 1`] = `
 <button
-  aria-describedby="radix-:r5:"
   aria-labelledby="radix-:r4:"
   class="overlay animate toast"
   data-state="open"
@@ -13,7 +12,7 @@ exports[`Toast renders 1`] = `
   type="button"
 >
   <h3
-    class="_font-body-sm-semibold_1jx6b_45"
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
     id="radix-:r4:"
   >
     Hello world!

src/__snapshots__/Toast.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toast > renders 1`] = `
+<button
+  aria-labelledby="radix-:r4:"
+  class="overlay animate toast"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+  type="button"
+>
+  <h3
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    id="radix-:r4:"
+  >
+    Hello world!
+  </h3>
+</button>
+`;

src/analytics/PosthogAnalytics.ts

@@ -16,11 +16,10 @@ limitations under the License.
 
 import posthog, { CaptureOptions, PostHog, Properties } from "posthog-js";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from "matrix-js-sdk";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Buffer } from "buffer";
 
 import { widget } from "../widget";
-import { getSetting, setSetting, getSettingKey } from "../settings/useSetting";
 import {
   CallEndedTracker,
   CallStartedTracker,
@@ -31,10 +30,11 @@ import {
   UndecryptableToDeviceEventTracker,
   QualitySurveyEventTracker,
   CallDisconnectedEventTracker,
+  CallConnectDurationTracker,
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
-import { localStorageBus } from "../useLocalStorage";
+import { optInAnalytics } from "../settings/settings";
 
 /* Posthog analytics tracking.
  *
@@ -130,7 +130,7 @@ export class PosthogAnalytics {
         const { analyticsID } = getUrlParams();
         // if the embedding platform (element web) already got approval to communicating with posthog
         // element call can also send events to posthog
-        setSetting("opt-in-analytics", Boolean(analyticsID));
+        optInAnalytics.setValue(Boolean(analyticsID));
       }
 
       this.posthog.init(posthogConfig.project_api_key, {
@@ -144,15 +144,13 @@ export class PosthogAnalytics {
         advanced_disable_decide: true,
       });
       this.enabled = true;
-    } else {
+    } else if (import.meta.env.MODE !== "test") {
       logger.info(
         "Posthog is not enabled because there is no api key or no host given in the config",
       );
       this.enabled = false;
     }
-    this.startListeningToSettingsChanges();
+    this.startListeningToSettingsChanges(); // Triggers maybeIdentifyUser
-    const optInAnalytics = getSetting("opt-in-analytics", false);
-    this.updateAnonymityAndIdentifyUser(optInAnalytics);
   }
 
   private sanitizeProperties = (
@@ -335,8 +333,7 @@ export class PosthogAnalytics {
   }
 
   public onLoginStatusChanged(): void {
-    const optInAnalytics = getSetting("opt-in-analytics", false);
+    this.maybeIdentifyUser();
-    this.updateAnonymityAndIdentifyUser(optInAnalytics);
   }
 
   private updateSuperProperties(): void {
@@ -359,20 +356,12 @@ export class PosthogAnalytics {
     return this.eventSignup.getSignupEndTime() > new Date(0);
   }
 
-  private async updateAnonymityAndIdentifyUser(
+  private async maybeIdentifyUser(): Promise<void> {
-    pseudonymousOptIn: boolean,
-  ): Promise<void> {
-    // Update this.anonymity based on the user's analytics opt-in settings
-    const anonymity = pseudonymousOptIn
-      ? Anonymity.Pseudonymous
-      : Anonymity.Disabled;
-    this.setAnonymity(anonymity);
-
     // We may not yet have a Matrix client at this point, if not, bail. This should get
     // triggered again by onLoginStatusChanged once we do have a client.
     if (!window.matrixclient) return;
 
-    if (anonymity === Anonymity.Pseudonymous) {
+    if (this.anonymity === Anonymity.Pseudonymous) {
       this.setRegistrationType(
         window.matrixclient.isGuest() || window.passwordlessUser
           ? RegistrationType.Guest
@@ -388,7 +377,7 @@ export class PosthogAnalytics {
       }
     }
 
-    if (anonymity !== Anonymity.Disabled) {
+    if (this.anonymity !== Anonymity.Disabled) {
       this.updateSuperProperties();
     }
   }
@@ -418,8 +407,9 @@ export class PosthogAnalytics {
     //  * When the user changes their preferences on this device
     // Note that for new accounts, pseudonymousAnalyticsOptIn won't be set, so updateAnonymityFromSettings
     // won't be called (i.e. this.anonymity will be left as the default, until the setting changes)
-    localStorageBus.on(getSettingKey("opt-in-analytics"), (optInAnalytics) => {
+    optInAnalytics.value.subscribe((optIn) => {
-      this.updateAnonymityAndIdentifyUser(optInAnalytics);
+      this.setAnonymity(optIn ? Anonymity.Pseudonymous : Anonymity.Disabled);
+      this.maybeIdentifyUser();
     });
   }
 
@@ -444,4 +434,5 @@ export class PosthogAnalytics {
   public eventUndecryptableToDevice = new UndecryptableToDeviceEventTracker();
   public eventQualitySurvey = new QualitySurveyEventTracker();
   public eventCallDisconnected = new CallDisconnectedEventTracker();
+  public eventCallConnectDuration = new CallConnectDurationTracker();
 }

src/analytics/PosthogEvents.ts

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

src/array-utils.ts

@@ -1,44 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/**
- * Gets the index of the last element in the array to satsify the given
- * predicate.
- */
-// TODO: remove this once TypeScript recognizes the existence of
-// Array.prototype.findLastIndex
-export function findLastIndex<T>(
-  array: T[],
-  predicate: (item: T, index: number) => boolean,
-): number | null {
-  for (let i = array.length - 1; i >= 0; i--) {
-    if (predicate(array[i], i)) return i;
-  }
-
-  return null;
-}
-
-/**
- * Counts the number of elements in an array that satsify the given predicate.
- */
-export const count = <T>(
-  array: T[],
-  predicate: (item: T, index: number) => boolean,
-): number =>
-  array.reduce(
-    (acc, item, index) => (predicate(item, index) ? acc + 1 : acc),
-    0,
-  );

src/auth/LoginPage.tsx

@@ -17,11 +17,11 @@ limitations under the License.
 import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
+import { Button } from "@vector-im/compound-web";
 
 import Logo from "../icons/LogoLarge.svg?react";
 import { useClient } from "../ClientContext";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import styles from "./LoginPage.module.css";
 import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
@@ -32,8 +32,8 @@ export const LoginPage: FC = () => {
   const { t } = useTranslation();
   usePageTitle(t("login_title"));
 
-  const { setClient } = useClient();
+  const { client, setClient } = useClient();
-  const login = useInteractiveLogin();
+  const login = useInteractiveLogin(client);
   const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
   const usernameRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
@@ -82,7 +82,12 @@ export const LoginPage: FC = () => {
     },
     [login, location, history, homeserver, setClient],
   );
-
+  // we need to limit the length of the homserver name to not cover the whole loginview input with the string.
+  let shortendHomeserverName = Config.defaultServerName()?.slice(0, 25);
+  shortendHomeserverName =
+    shortendHomeserverName?.length !== Config.defaultServerName()?.length
+      ? shortendHomeserverName + "..."
+      : shortendHomeserverName;
   return (
     <>
       <div className={styles.container}>
@@ -102,7 +107,7 @@ export const LoginPage: FC = () => {
                   autoCorrect="off"
                   autoCapitalize="none"
                   prefix="@"
-                  suffix={`:${Config.defaultServerName()}`}
+                  suffix={`:${shortendHomeserverName}`}
                   data-testid="login_username"
                 />
               </FieldRow>

src/auth/RegisterPage.tsx

@@ -28,9 +28,9 @@ import { captureException } from "@sentry/react";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";
 
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import { useClientLegacy } from "../ClientContext";
 import { useInteractiveRegistration } from "./useInteractiveRegistration";
 import styles from "./LoginPage.module.css";

src/auth/useInteractiveLogin.ts

@@ -16,12 +16,23 @@ limitations under the License.
 
 import { useCallback } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
-import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  LoginResponse,
+  MatrixClient,
+} from "matrix-js-sdk/src/matrix";
 
-import { initClient } from "../matrix-utils";
+import { initClient } from "../utils/matrix";
 import { Session } from "../ClientContext";
-
+/**
-export function useInteractiveLogin(): (
+ * This provides the login method to login using user credentials.
+ * @param oldClient If there is an already authenticated client it should be passed to this hook
+ * this allows the interactive login to sign out the client before logging in.
+ * @returns A async method that can be called/awaited to log in with the provided credentials.
+ */
+export function useInteractiveLogin(
+  oldClient?: MatrixClient,
+): (
   homeserver: string,
   username: string,
   password: string,
@@ -32,47 +43,52 @@ export function useInteractiveLogin(): (
       username: string,
       password: string,
     ) => Promise<[MatrixClient, Session]>
-  >(async (homeserver: string, username: string, password: string) => {
+  >(
-    const authClient = createClient({ baseUrl: homeserver });
+    async (homeserver: string, username: string, password: string) => {
+      const authClient = createClient({ baseUrl: homeserver });
 
-    const interactiveAuth = new InteractiveAuth({
+      const interactiveAuth = new InteractiveAuth({
-      matrixClient: authClient,
+        matrixClient: authClient,
-      doRequest: () =>
+        doRequest: (): Promise<LoginResponse> =>
-        authClient.login("m.login.password", {
+          authClient.login("m.login.password", {
-          identifier: {
+            identifier: {
-            type: "m.id.user",
+              type: "m.id.user",
-            user: username,
+              user: username,
-          },
+            },
-          password,
+            password,
-        }),
+          }),
-      stateUpdated: (): void => {},
+        stateUpdated: (): void => {},
-      requestEmailToken: (): Promise<{ sid: string }> => {
+        requestEmailToken: (): Promise<{ sid: string }> => {
-        return Promise.resolve({ sid: "" });
+          return Promise.resolve({ sid: "" });
-      },
+        },
-    });
+      });
 
-    // XXX: This claims to return an IAuthData which contains none of these
+      // XXX: This claims to return an IAuthData which contains none of these
-    // things - the js-sdk types may be wrong?
+      // things - the js-sdk types may be wrong?
-    /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
+      /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
-    const { user_id, access_token, device_id } =
+      const { user_id, access_token, device_id } =
-      (await interactiveAuth.attemptAuth()) as any;
+        (await interactiveAuth.attemptAuth()) as any;
-    const session = {
+      const session = {
-      user_id,
+        user_id,
-      access_token,
+        access_token,
-      device_id,
+        device_id,
-      passwordlessUser: false,
+        passwordlessUser: false,
-    };
+      };
 
-    const client = await initClient(
+      // To not confuse the rust crypto sessions we need to logout the old client before initializing the new one.
-      {
+      await oldClient?.logout(true);
-        baseUrl: homeserver,
+      const client = await initClient(
-        accessToken: access_token,
+        {
-        userId: user_id,
+          baseUrl: homeserver,
-        deviceId: device_id,
+          accessToken: access_token,
-      },
+          userId: user_id,
-      false,
+          deviceId: device_id,
-    );
+        },
-    /* eslint-enable camelcase */
+        false,
-    return [client, session];
+      );
-  }, []);
+      /* eslint-enable camelcase */
+      return [client, session];
+    },
+    [oldClient],
+  );
 }

src/auth/useInteractiveRegistration.ts

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

src/auth/useRecaptcha.ts

@@ -20,7 +20,6 @@ import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { translatedError } from "../TranslatedError";
-
 declare global {
   interface Window {
     mxOnRecaptchaLoaded: () => void;

src/auth/useRegisterPasswordlessUser.ts

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

src/button/Button.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 New Vector Ltd
+Copyright 2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,240 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.button,
+.endCall > svg {
-.toolbarButton,
-.toolbarButtonSecondary,
-.iconButton,
-.iconCopyButton,
-.secondary,
-.secondaryHangup,
-.copyButton,
-.dropdownButton {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  padding: 0;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-  box-sizing: border-box;
-}
-
-.secondary,
-.secondaryHangup,
-.button,
-.copyButton {
-  padding: 8px 20px;
-  border-radius: 8px;
-  font-size: var(--font-size-body);
-  font-weight: 600;
-}
-
-.button {
-  color: var(--stopgap-color-on-solid-accent);
-  background-color: var(--cpd-color-text-action-accent);
-}
-
-.button:focus-visible,
-.toolbarButton:focus-visible,
-.toolbarButtonSecondary:focus-visible,
-.iconButton:focus-visible,
-.iconCopyButton:focus-visible,
-.secondary:focus-visible,
-.secondaryHangup:focus-visible,
-.copyButton:focus-visible {
-  outline: auto;
-}
-
-.toolbarButton:disabled {
-  background-color: var(--cpd-color-bg-action-primary-disabled);
-  box-shadow: none;
-}
-
-.toolbarButton,
-.toolbarButtonSecondary {
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  background-color: var(--cpd-color-bg-canvas-default);
-  color: var(--cpd-color-icon-primary);
-  border: 1px solid var(--cpd-color-gray-400);
-  box-shadow: var(--subtle-drop-shadow);
-}
-
-.toolbarButton.on,
-.toolbarButton.off {
-  background-color: var(--cpd-color-bg-action-primary-rest);
-  color: var(--cpd-color-icon-on-solid-primary);
-}
-
-.toolbarButtonSecondary.on {
-  background-color: var(--cpd-color-text-success-primary);
-}
-
-.toolbarButton:active,
-.toolbarButtonSecondary:active {
-  background-color: var(--cpd-color-bg-subtle-primary);
-  border: none;
-  box-shadow: none;
-}
-
-.toolbarButton.on:active,
-.toolbarButton.off:active {
-  background-color: var(--cpd-color-bg-action-primary-pressed);
-}
-
-.iconButton:not(.stroke) svg * {
-  fill: var(--cpd-color-bg-action-primary-rest);
-}
-
-.iconButton:not(.stroke):tertiary svg * {
-  fill: var(--cpd-color-icon-accent-tertiary);
-}
-
-.iconButton.on:not(.stroke) svg * {
-  fill: var(--cpd-color-icon-accent-tertiary);
-}
-
-.iconButton.on.stroke svg * {
-  stroke: var(--cpd-color-icon-accent-tertiary);
-}
-
-.hangupButton {
-  background-color: var(--cpd-color-bg-critical-primary);
-  border-color: var(--cpd-color-border-critical-subtle);
   color: var(--stopgap-color-on-solid-accent);
 }
-
-.hangupButton:active {
-  background-color: var(--cpd-color-bg-critical-pressed);
-}
-
-.secondary,
-.copyButton {
-  color: var(--cpd-color-text-action-accent);
-  border: 2px solid var(--cpd-color-text-action-accent);
-  background-color: transparent;
-}
-
-.secondaryHangup {
-  color: var(--cpd-color-text-critical-primary);
-  border: 2px solid var(--cpd-color-border-critical-primary);
-  background-color: transparent;
-}
-
-.copyButton.secondaryCopy {
-  color: var(--cpd-color-text-primary);
-  border-color: var(--cpd-color-border-interactive-primary);
-}
-
-.copyButton {
-  width: 100%;
-  height: 40px;
-  transition:
-    border-color 250ms,
-    background-color 250ms;
-}
-
-.copyButton span {
-  font-weight: 600;
-  font-size: var(--font-size-body);
-  margin-right: 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.copyButton svg {
-  flex-shrink: 0;
-}
-
-.copyButton:not(.on) svg * {
-  fill: var(--cpd-color-icon-accent-tertiary);
-}
-
-.copyButton.on {
-  border-color: transparent;
-  background-color: var(--cpd-color-text-action-accent);
-  color: white;
-}
-
-.copyButton.on svg * {
-  stroke: white;
-}
-
-.copyButton.secondaryCopy:not(.on) svg * {
-  fill: var(--cpd-color-bg-action-primary-rest);
-}
-
-.iconCopyButton svg * {
-  fill: var(--cpd-color-icon-secondary);
-}
-
-.iconCopyButton.on svg *,
-.iconCopyButton.on:hover svg * {
-  fill: transparent;
-  stroke: var(--cpd-color-text-action-accent);
-}
-
-.dropdownButton {
-  color: var(--cpd-color-text-primary);
-  padding: 2px 8px;
-  border-radius: 8px;
-}
-
-.dropdownButton:active,
-.dropdownButton.on {
-  background-color: var(--cpd-color-bg-action-secondary-pressed);
-}
-
-.dropdownButton svg {
-  margin-left: 8px;
-}
-
-.dropdownButton svg * {
-  fill: var(--cpd-color-icon-primary);
-}
-
-.lg {
-  height: 40px;
-}
-
-.linkButton {
-  background-color: transparent;
-  border: none;
-  color: var(--cpd-color-text-action-accent);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .toolbarButton:hover,
-  .toolbarButtonSecondary:hover {
-    background-color: var(--cpd-color-bg-subtle-primary);
-    border: none;
-    box-shadow: none;
-  }
-
-  .toolbarButton.on:hover,
-  .toolbarButton.off:hover {
-    background-color: var(--cpd-color-bg-action-primary-hovered);
-  }
-
-  .iconButton:not(.stroke):hover svg * {
-    fill: var(--cpd-color-icon-accent-tertiary);
-  }
-
-  .hangupButton:hover {
-    background-color: var(--cpd-color-bg-critical-hovered);
-  }
-
-  .iconCopyButton:hover svg * {
-    fill: var(--cpd-color-icon-accent-tertiary);
-  }
-
-  .dropdownButton:hover {
-    background-color: var(--cpd-color-bg-action-secondary-hovered);
-  }
-}

src/button/Button.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 - 2023 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,133 +13,27 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { FC, forwardRef } from "react";
+import { ComponentPropsWithoutRef, FC } from "react";
-import { PressEvent } from "@react-types/shared";
 import classNames from "classnames";
-import { useButton } from "@react-aria/button";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
-import { Tooltip } from "@vector-im/compound-web";
+import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
-import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
+import {
-import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
+  MicOnSolidIcon,
-import VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg?react";
+  MicOffSolidIcon,
-import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.svg?react";
+  VideoCallSolidIcon,
-import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
+  VideoCallOffSolidIcon,
-import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
+  EndCallIcon,
-import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
+  ShareScreenSolidIcon,
-import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
+  SettingsSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
-import Fullscreen from "../icons/Fullscreen.svg?react";
-import FullscreenExit from "../icons/FullscreenExit.svg?react";
-import { VolumeIcon } from "./VolumeIcon";
 
-export type ButtonVariant =
+interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
-  | "default"
-  | "toolbar"
-  | "toolbarSecondary"
-  | "icon"
-  | "secondary"
-  | "copy"
-  | "secondaryCopy"
-  | "iconCopy"
-  | "secondaryHangup"
-  | "dropdown"
-  | "link";
-
-export const variantToClassName = {
-  default: [styles.button],
-  toolbar: [styles.toolbarButton],
-  toolbarSecondary: [styles.toolbarButtonSecondary],
-  icon: [styles.iconButton],
-  secondary: [styles.secondary],
-  copy: [styles.copyButton],
-  secondaryCopy: [styles.secondaryCopy, styles.copyButton],
-  iconCopy: [styles.iconCopyButton],
-  secondaryHangup: [styles.secondaryHangup],
-  dropdown: [styles.dropdownButton],
-  link: [styles.linkButton],
-};
-
-export type ButtonSize = "lg";
-
-export const sizeToClassName: { lg: string[] } = {
-  lg: [styles.lg],
-};
-interface Props {
-  variant: ButtonVariant;
-  size: ButtonSize;
-  on: () => void;
-  off: () => void;
-  iconStyle: string;
-  className: string;
-  children: Element[];
-  onPress: (e: PressEvent) => void;
-  onPressStart: (e: PressEvent) => void;
-  disabled: boolean;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}
-export const Button = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      variant = "default",
-      size,
-      on,
-      off,
-      iconStyle,
-      className,
-      children,
-      onPress,
-      onPressStart,
-      ...rest
-    },
-    ref,
-  ) => {
-    const buttonRef = useObjectRef<HTMLButtonElement>(ref);
-    const { buttonProps } = useButton(
-      { onPress, onPressStart, ...rest },
-      buttonRef,
-    );
-
-    // TODO: react-aria's useButton hook prevents form submission via keyboard
-    // Remove the hack below after this is merged https://github.com/adobe/react-spectrum/pull/904
-    let filteredButtonProps = buttonProps;
-
-    if (rest.type === "submit" && !rest.onPress) {
-      const { ...filtered } = buttonProps;
-      filteredButtonProps = filtered;
-    }
-
-    return (
-      <button
-        className={classNames(
-          variantToClassName[variant],
-          sizeToClassName[size],
-          styles[iconStyle],
-          className,
-          {
-            [styles.on]: on,
-            [styles.off]: off,
-          },
-        )}
-        {...mergeProps(rest, filteredButtonProps)}
-        ref={buttonRef}
-      >
-        <>
-          {children}
-          {variant === "dropdown" && <ChevronDownIcon />}
-        </>
-      </button>
-    );
-  },
-);
-
-export const MicButton: FC<{
   muted: boolean;
-  // TODO: add all props for <Button>
+}
-  [index: string]: unknown;
+
-}> = ({ muted, ...rest }) => {
+export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
   const { t } = useTranslation();
   const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
   const label = muted
@@ -148,18 +42,21 @@ export const MicButton: FC<{
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={muted}>
+      <CpdButton
-        <Icon aria-label={label} />
+        iconOnly
-      </Button>
+        Icon={Icon}
+        kind={muted ? "primary" : "secondary"}
+        {...props}
+      />
     </Tooltip>
   );
 };
 
-export const VideoButton: FC<{
+interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
   muted: boolean;
-  // TODO: add all props for <Button>
+}
-  [index: string]: unknown;
+
-}> = ({ muted, ...rest }) => {
+export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
   const { t } = useTranslation();
   const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
   const label = muted
@@ -168,19 +65,24 @@ export const VideoButton: FC<{
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={muted}>
+      <CpdButton
-        <Icon aria-label={label} />
+        iconOnly
-      </Button>
+        Icon={Icon}
+        kind={muted ? "primary" : "secondary"}
+        {...props}
+      />
     </Tooltip>
   );
 };
 
-export const ScreenshareButton: FC<{
+interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
-  className?: string;
+}
-  // TODO: add all props for <Button>
+
-  [index: string]: unknown;
+export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
-}> = ({ enabled, className, ...rest }) => {
+  enabled,
+  ...props
+}) => {
   const { t } = useTranslation();
   const label = enabled
     ? t("stop_screenshare_button_label")
@@ -188,87 +90,48 @@ export const ScreenshareButton: FC<{
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={enabled}>
+      <CpdButton
-        <ShareScreenSolidIcon aria-label={label} />
+        iconOnly
-      </Button>
+        Icon={ShareScreenSolidIcon}
+        kind={enabled ? "primary" : "secondary"}
+        {...props}
+      />
     </Tooltip>
   );
 };
 
-export const HangupButton: FC<{
+export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
-  className?: string;
+  className,
-  // TODO: add all props for <Button>
+  ...props
-  [index: string]: unknown;
+}) => {
-}> = ({ className, ...rest }) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t("hangup_button_label")}>
-      <Button
+      <CpdButton
-        variant="toolbar"
+        className={classNames(className, styles.endCall)}
-        className={classNames(styles.hangupButton, className)}
+        iconOnly
-        {...rest}
+        Icon={EndCallIcon}
-      >
+        destructive
-        <EndCallIcon aria-label={t("hangup_button_label")} />
+        {...props}
-      </Button>
+      />
     </Tooltip>
   );
 };
 
-export const SettingsButton: FC<{
+export const SettingsButton: FC<ComponentPropsWithoutRef<"button">> = (
-  className?: string;
+  props,
-  // TODO: add all props for <Button>
+) => {
-  [index: string]: unknown;
-}> = ({ className, ...rest }) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t("common.settings")}>
-      <Button variant="toolbar" {...rest}>
+      <CpdButton
-        <SettingsSolidIcon aria-label={t("common.settings")} />
+        iconOnly
-      </Button>
+        Icon={SettingsSolidIcon}
-    </Tooltip>
+        kind="secondary"
-  );
+        {...props}
-};
+      />
-
-interface AudioButtonProps extends Omit<Props, "variant"> {
-  /**
-   * A number between 0 and 1
-   */
-  volume: number;
-}
-
-export const AudioButton: FC<AudioButtonProps> = ({ volume, ...rest }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip label={t("local_volume_label")}>
-      <Button variant="icon" {...rest}>
-        <VolumeIcon volume={volume} aria-label={t("local_volume_label")} />
-      </Button>
-    </Tooltip>
-  );
-};
-
-interface FullscreenButtonProps extends Omit<Props, "variant"> {
-  fullscreen?: boolean;
-}
-
-export const FullscreenButton: FC<FullscreenButtonProps> = ({
-  fullscreen,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-  const Icon = fullscreen ? FullscreenExit : Fullscreen;
-  const label = fullscreen
-    ? t("exit_fullscreen_button_label")
-    : t("fullscreen_button_label");
-
-  return (
-    <Tooltip label={label}>
-      <Button variant="icon" {...rest}>
-        <Icon aria-label={label} />
-      </Button>
     </Tooltip>
   );
 };

src/button/CopyButton.tsx

@@ -1,69 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useTranslation } from "react-i18next";
-import useClipboard from "react-use-clipboard";
-import { FC } from "react";
-
-import CheckIcon from "../icons/Check.svg?react";
-import CopyIcon from "../icons/Copy.svg?react";
-import { Button, ButtonVariant } from "./Button";
-
-interface Props {
-  value: string;
-  children?: JSX.Element | string;
-  className?: string;
-  variant?: ButtonVariant;
-  copiedMessage?: string;
-}
-
-export const CopyButton: FC<Props> = ({
-  value,
-  children,
-  className,
-  variant,
-  copiedMessage,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-  const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
-
-  return (
-    <Button
-      {...rest}
-      variant={variant === "icon" ? "iconCopy" : variant || "copy"}
-      on={isCopied}
-      className={className}
-      onPress={setCopied}
-      iconStyle={isCopied ? "stroke" : "fill"}
-      aria-label={t("action.copy")}
-    >
-      {isCopied ? (
-        <>
-          {variant !== "icon" && (
-            <span>{copiedMessage || t("common.copied")}</span>
-          )}
-          <CheckIcon />
-        </>
-      ) : (
-        <>
-          {variant !== "icon" && <span>{children || value}</span>}
-          <CopyIcon />
-        </>
-      )}
-    </Button>
-  );
-};

src/button/InviteButton.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { ComponentPropsWithoutRef, FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import UserAddIcon from "@vector-im/compound-design-tokens/icons/user-add.svg?react";
+import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 export const InviteButton: FC<
   Omit<ComponentPropsWithoutRef<"button">, "children">

src/button/Link.tsx

@@ -0,0 +1,61 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  MouseEvent,
+  useCallback,
+  useMemo,
+} from "react";
+import { Link as CpdLink } from "@vector-im/compound-web";
+import { useHistory } from "react-router-dom";
+import { createPath, LocationDescriptor, Path } from "history";
+
+export function useLink(
+  to: LocationDescriptor,
+): [Path, (e: MouseEvent) => void] {
+  const history = useHistory();
+  const path = useMemo(
+    () => (typeof to === "string" ? to : createPath(to)),
+    [to],
+  );
+  const onClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      history.push(to);
+    },
+    [history, to],
+  );
+
+  return [path, onClick];
+}
+
+type Props = Omit<
+  ComponentPropsWithoutRef<typeof CpdLink>,
+  "href" | "onClick"
+> & { to: LocationDescriptor };
+
+/**
+ * A version of Compound's link component that integrates with our router setup.
+ */
+export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
+  { to, ...props },
+  ref,
+) {
+  const [path, onClick] = useLink(to);
+  return <CpdLink ref={ref} {...props} href={path} onClick={onClick} />;
+});

src/button/LinkButton.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,45 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { FC, HTMLAttributes } from "react";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
-import { Link } from "react-router-dom";
+import { Button } from "@vector-im/compound-web";
-import classNames from "classnames";
+import { LocationDescriptor } from "history";
-import * as H from "history";
 
-import {
+import { useLink } from "./Link";
-  variantToClassName,
-  sizeToClassName,
-  ButtonVariant,
-  ButtonSize,
-} from "./Button";
 
-interface Props extends HTMLAttributes<HTMLAnchorElement> {
+type Props = Omit<
-  children: JSX.Element | string;
+  ComponentPropsWithoutRef<typeof Button<"a">>,
-  to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
+  "as" | "href"
-  size?: ButtonSize;
+> & { to: LocationDescriptor };
-  variant?: ButtonVariant;
-  className?: string;
-}
 
-export const LinkButton: FC<Props> = ({
+/**
-  children,
+ * A version of Compound's button component that acts as a link and integrates
-  to,
+ * with our router setup.
-  size,
+ */
-  variant,
+export const LinkButton = forwardRef<HTMLAnchorElement, Props>(
-  className,
+  function LinkButton({ to, ...props }, ref) {
-  ...rest
+    const [path, onClick] = useLink(to);
-}) => {
+    return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
-  return (
+  },
-    <Link
+);
-      className={classNames(
-        variantToClassName[variant || "secondary"],
-        size ? sizeToClassName[size] : [],
-        className,
-      )}
-      to={to}
-      {...rest}
-    >
-      {children}
-    </Link>
-  );
-};