Merge pull request #2602 from Johennes/johannes/qr

Display QR code when sharing invite link

.eslintrc.cjs

@@ -38,15 +38,6 @@ module.exports = {
     "jsx-a11y/media-has-caption": "off",
     // We should use the js-sdk logger, never console directly.
     "no-console": ["error"],
-    "no-restricted-imports": [
-      "error",
-      {
-        name: "@react-rxjs/core",
-        importNames: ["Subscribe", "RemoveSubscribe"],
-        message:
-          "These components are easy to misuse, please use the 'subscribe' component wrapper instead",
-      },
-    ],
     "react/display-name": "error",
   },
   settings: {

.github/workflows/docker.yaml

@@ -5,6 +5,10 @@ on:
       docker_tags:
         required: true
         type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
 
 env:
   REGISTRY: ghcr.io
@@ -19,18 +23,18 @@ jobs:
       packages: write
     steps:
       - name: Check it out
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
 
       - name: 📥 Download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id || github.run_id }}
+          run-id: ${{ inputs.artifact_run_id }}
           name: build-output
           path: dist
 
       - name: Log in to container registry
-        uses: docker/login-action@5f4866a30a54f16a52d2ecb4a3898e9e424939cf
+        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3.3.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -38,16 +42,16 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@1294d94f8ee362ab42b6da04c35f4cd03a0e6af7
+        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@a530e948adbeb357dbca95a7f8845d385edf4438
+        uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3.6.1
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@7e6f77677b7892794c8852c6e3773c3e9bc3129a
+        uses: docker/build-push-action@5cd11c3a4ced054e52742c5fd54dca954e0edd85 # v6.7.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/e2e.yml

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

.github/workflows/element-call.yaml

@@ -21,11 +21,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: Build
@@ -38,7 +39,7 @@ jobs:
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4
         with:
           name: build-output
           path: dist

.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

@@ -14,6 +14,10 @@ on:
       deployment_ref:
         required: true
         type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
     secrets:
       ELEMENT_BOT_TOKEN:
         required: true
@@ -30,7 +34,7 @@ jobs:
     environment: Netlify
     steps:
       - name: 📝 Create Deployment
-        uses: bobheadxi/deployments@v1
+        uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
         id: deployment
         with:
           step: start
@@ -42,10 +46,10 @@ jobs:
             Exercise caution. Use test accounts.
 
       - name: 📥 Download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
         with:
           github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
+          run-id: ${{ inputs.artifact_run_id }}
           name: build-output
           path: webapp
 
@@ -54,11 +58,11 @@ jobs:
         run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects
 
       - name: Add config file
-        run: curl -s "https://raw.githubusercontent.com/${{ inputs.pr_head_full_name }}/${{ inputs.pr_head_ref }}/config/element_io_preview.json" > webapp/config.json
+        run: curl -s "https://raw.githubusercontent.com/${{ inputs.pr_head_full_name }}/${{ inputs.pr_head_ref }}/config/config_netlify_preview.json" > webapp/config.json
 
       - name: ☁️ Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v3.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"
@@ -69,7 +73,7 @@ jobs:
         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

@@ -14,7 +14,7 @@ jobs:
       pr_data_json: ${{ steps.prdetails.outputs.data }}
     steps:
       - id: prdetails
-        uses: matrix-org/pr-details-action@v1.3
+        uses: matrix-org/pr-details-action@15bde5285d7850ba276cc3bd8a03733e3f24622a # v1.3
         continue-on-error: true
         with:
           owner: ${{ github.event.workflow_run.head_repository.owner.login }}
@@ -26,6 +26,7 @@ jobs:
       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 }}
@@ -43,6 +44,7 @@ jobs:
       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

@@ -39,7 +39,7 @@ jobs:
         id: current-time
         run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
       - name: 📥 Download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id || github.run_id }}
@@ -51,18 +51,20 @@ jobs:
         run: |
           tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
       - name: Upload
-        uses: actions/upload-artifact@b06cde36fc32a3ee94080e87258567f73f921537
+        uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
           path: "./element-call-*.tar.gz"
   publish_docker:
     needs: publish_tarball
+    if: always()
     permissions:
       contents: write
       packages: write
     uses: ./.github/workflows/docker.yaml
     with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       docker_tags: |
         type=sha,format=short,event=branch
         type=semver,pattern=v{{version}}

.github/workflows/test.yaml

@@ -9,16 +9,20 @@ 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: Vitest
-        run: "yarn run test"
+        run: "yarn run test:coverage"
       - name: Upload to codecov
-        uses: codecov/codecov-action@v4
+        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@v4
+      - 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@v6.0.3
+        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

@@ -14,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

@@ -22,7 +22,7 @@ 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.
@@ -93,11 +125,13 @@ service for development. These use a test 'secret' published in this
 repository, so this must be used only for local development and
 **_never be exposed to the public Internet._**
 
-To use it, add SFU parameter in your local config `./public/config.json`:
+To use it, add a SFU parameter in your local config `./public/config.json`:
+(Be aware, that this is only the fallback Livekit SFU. If the homeserver
+advertises one in the client well-known, this will not be used.)
 
 ```json
 "livekit": {
-  "livekit_service_url": "http://localhost:8881"
+  "livekit_service_url": "http://localhost:7881"
 },
 ```
 
@@ -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/livekit.yaml

@@ -1,5 +1,4 @@
 port: 7880
-environment: dev
 bind_addresses:
   - "0.0.0.0"
 rtc:

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"
-  }
-}

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.

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,103 +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:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+    "i18n": "i18next",
+    "i18n:check": "i18next --fail-on-warnings --fail-on-update",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f backend-docker-compose.yml up"
   },
-  "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-core": "^0.10.0",
-    "@livekit/components-react": "^2.0.0",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
-    "@opentelemetry/api": "^1.4.0",
-    "@opentelemetry/context-zone": "^1.9.1",
-    "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.48.0",
-    "@opentelemetry/instrumentation-document-load": "^0.36.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.36.0",
-    "@opentelemetry/sdk-trace-web": "^1.9.1",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@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-rxjs/core": "^0.10.7",
-    "@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": "^1.0.0",
-    "@vector-im/compound-web": "^3.0.0",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^4.0.1",
-    "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
-    "events": "^3.3.0",
-    "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^7.0.0",
-    "i18next-http-backend": "^2.0.0",
-    "livekit-client": "^2.0.2",
-    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#d55c6a36df539f6adacc335efe5b9be27c9cee4a",
-    "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": "^14.0.0",
-    "react-router-dom": "^5.2.0",
-    "react-use-clipboard": "^1.0.7",
-    "react-use-measure": "^2.1.1",
-    "rxjs": "^7.8.1",
-    "sdp-transform": "^2.14.1",
-    "tinyqueue": "^2.0.3",
-    "unique-names-generator": "^4.6.0",
-    "uuid": "9",
-    "vaul": "^0.9.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",
-    "@react-types/dialog": "^3.5.5",
+    "@juggle/resize-observer": "^3.3.1",
+    "@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/react": "^14.0.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
-    "@types/dom-screen-wake-lock": "^1.0.1",
-    "@types/dompurify": "^3.0.2",
-    "@types/grecaptcha": "^3.0.4",
+    "@types/grecaptcha": "^3.0.9",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash": "^4.14.199",
     "@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": "^7.0.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",
@@ -113,16 +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": "^51.0.0",
-    "i18next-parser": "^8.0.0",
-    "jsdom": "^24.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "global-jsdom": "^24.0.0",
+    "history": "^4.0.0",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^8.0.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",
+    "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",
-    "vitest": "^1.2.2"
+    "vitest": "^2.0.0"
   }
 }

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,15 @@
     "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",
@@ -57,11 +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.",
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
-  "group_call_loader_failed_heading": "Call not found",
-  "group_call_loader_failed_text": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
+  "group_call_loader": {
+    "banned_body": "You have been banned from the room.",
+    "banned_heading": "Banned",
+    "call_ended_body": "You have been removed from the call.",
+    "call_ended_heading": "Call ended",
+    "failed_heading": "Failed to join",
+    "failed_text": "Call not found or is not accessible.",
+    "knock_reject_body": "The room members declined your request to join.",
+    "knock_reject_heading": "Not allowed to join",
+    "reason": "Reason"
+  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -77,8 +90,10 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
+    "ask_to_join": "Ask to join call",
     "join_button": "Join call",
-    "leave_button": "Back to recents"
+    "leave_button": "Back to recents",
+    "waiting_for_invite": "Request sent"
   },
   "log_in": "Log In",
   "logging_in": "Logging in…",
@@ -86,11 +101,13 @@
   "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.",
@@ -114,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",
@@ -127,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",
@@ -141,14 +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": {
+    "always_show": "Always show",
     "change_fit_contain": "Fit to frame",
     "exit_full_screen": "Exit full screen",
     "full_screen": "Full screen",
     "mute_for_me": "Mute for me",
-    "sfu_participant_local": "You",
     "volume": "Volume"
-  },
-  "waiting_for_participants": "Waiting for other participants…"
+  }
 }

renovate.json

@@ -3,25 +3,46 @@
   "extends": ["config:base"],
   "packageRules": [
     {
-      "description": "Disable renoavte for packages we want to monitor ourselves",
-      "matchPackagePatterns": ["matrix-js-sdk"],
+      "groupName": "all non-major dependencies",
+      "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",
-  "ignoreDeps": [
-    "@react-aria/button",
-    "@react-aria/focus",
-    "@react-aria/menu",
-    "@react-aria/overlays",
-    "@react-aria/select",
-    "@react-aria/tabs",
-    "@react-aria/tooltip",
-    "@react-aria/utils",
-    "@react-stately/collections",
-    "@react-stately/select",
-    "@react-stately/tooltip",
-    "@react-stately/tree",
-    "@react-types/dialog"
-  ]
+  "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
-    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;
+    controls: Controls;
   }
 
   interface HTMLElement {

src/App.tsx

@@ -22,7 +22,6 @@ 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";
 
@@ -92,23 +91,21 @@ export const App: FC<AppProps> = ({ history }) => {
                 <ClientProvider>
                   <MediaDevicesProvider>
                     <Sentry.ErrorBoundary fallback={errorPage}>
-                      <OverlayProvider>
-                        <DisconnectedBanner />
-                        <Switch>
-                          <SentryRoute exact path="/">
-                            <HomePage />
-                          </SentryRoute>
-                          <SentryRoute exact path="/login">
-                            <LoginPage />
-                          </SentryRoute>
-                          <SentryRoute exact path="/register">
-                            <RegisterPage />
-                          </SentryRoute>
-                          <SentryRoute path="*">
-                            <RoomPage />
-                          </SentryRoute>
-                        </Switch>
-                      </OverlayProvider>
+                      <DisconnectedBanner />
+                      <Switch>
+                        <SentryRoute exact path="/">
+                          <HomePage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/login">
+                          <LoginPage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/register">
+                          <RegisterPage />
+                        </SentryRoute>
+                        <SentryRoute path="*">
+                          <RoomPage />
+                        </SentryRoute>
+                      </Switch>
                     </Sentry.ErrorBoundary>
                   </MediaDevicesProvider>
                 </ClientProvider>

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

@@ -1,27 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC, ReactNode } from "react";
-
-import styles from "./Banner.module.css";
-
-interface Props {
-  children: ReactNode;
-}
-
-export const Banner: FC<Props> = ({ children }) => {
-  return <div className={styles.banner}>{children}</div>;
-};

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 {
-  CryptoStoreIntegrityError,
-  fallbackICEServerAllowed,
-  initClient,
-} from "./matrix-utils";
+import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 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 {
-            const client = await initClient(initClientParams, false); // Don't need the crypto store just to log out)
-            await client.logout(true);
-          } catch (err) {
-            logger.warn(
-              "The previous session was lost, and we couldn't log it out, " +
-                err +
-                "either",
-            );
-          }
+          logger.log(
+            "The session from local store is invalid; continuing without a client",
+          );
+          clearSession();
+          // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
+          return null;
         }
         throw err;
       }
-      /* eslint-enable camelcase */
     } catch (err) {
       clearSession();
       throw err;

src/FullScreenView.tsx

@@ -20,9 +20,10 @@ 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";
@@ -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 === "/" ? (
-        <Button
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          onPress={onReload}
-        >
-          {t("return_home_button")}
-        </Button>
-      ) : (
-        <LinkButton
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          to="/"
-        >
-          {t("return_home_button")}
-        </LinkButton>
-      )}
+      {!confineToRoom &&
+        (location.pathname === "/" ? (
+          <Button className={styles.homeLink} onClick={onReload}>
+            {t("return_home_button")}
+          </Button>
+        ) : (
+          <LinkButton className={styles.homeLink} to="/">
+            {t("return_home_button")}
+          </LinkButton>
+        ))}
     </FullScreenView>
   );
 };
@@ -120,12 +113,7 @@ export const CrashView: FC = () => {
       )}
 
       <RageshakeButton description="***Soft Crash***" />
-      <Button
-        size="lg"
-        variant="default"
-        className={styles.wideButton}
-        onPress={onReload}
-      >
+      <Button className={styles.wideButton} onClick={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.
@@ -90,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);
@@ -97,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;
 }
@@ -109,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 }) => {
-  return (
-    <header className={classNames(styles.header, className)} {...rest}>
-      {children}
-    </header>
-  );
-};
+export const Header = forwardRef<HTMLElement, HeaderProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <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 extends AriaDialogProps {
+export interface Props {
   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/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 {
-  flex: 1;
-  border-radius: 8px;
-  padding: 16px;
-  background-color: var(--cpd-color-bg-subtle-primary);
+.qrCode img {
+  max-width: 100%;
+  image-rendering: pixelated;
+  border-radius: var(--cpd-space-4x);
 }

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 olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+import { describe, expect, test } from "vitest";
+import { render, configure } from "@testing-library/react";
 
-// https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-window.OLM_OPTIONS = {};
+import { QrCode } from "./QrCode";
 
-let olmLoaded: Promise<void> | null = null;
+configure({
+  defaultHidden: true,
+});
 
-/**
- * Loads Olm, if not already loaded.
- */
-export const loadOlm = (): Promise<void> =>
-  (olmLoaded ??= Olm.init({ locateFile: () => olmWasmPath }));
+describe("QrCode", () => {
+  test("renders", async () => {
+    const { container, findByRole } = render(
+      <QrCode data="foo" className="bar" />,
+    );
+    (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/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,118 +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>
-    );
-  },
-);
-
-Tooltip.displayName = "Tooltip";
-
-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>
-    );
-  },
-);
-
-TooltipTrigger.displayName = "TooltipTrigger";

src/UrlParams.test.ts

@@ -14,23 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { vi } from "vitest";
+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";
-
-vi.mock("../src/config/Config");
+const HOMESERVER = "localhost";
 
 describe("UrlParams", () => {
-  beforeAll(() => {
-    vi.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";
-
-export const PASSWORD_STRING = "password=";
+import { EncryptionSystem } from "./e2ee/sharedKeyManagement";
+import { E2eeType } from "./e2ee/e2eeType";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -328,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 { Item } from "@react-stately/collections";
+import { FC, useMemo, useState } from "react";
 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 { PopoverMenuTrigger } from "./popover/PopoverMenu";
-import { Menu } from "./Menu";
-import { TooltipTrigger } from "./Tooltip";
+import { LinkButton } from "./button";
 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 {
@@ -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">
-      <TooltipTrigger tooltip={tooltip} placement="bottom left">
-        <Button
-          variant="icon"
+    <Menu
+      title={t("a11y.user_menu")}
+      showTitle={false}
+      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>
-      </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>
-        )
+        </button>
       }
-    </PopoverMenuTrigger>
+    >
+      {items.map(({ key, icon: Icon, label, dataTestid }) => (
+        <MenuItem
+          key={key}
+          Icon={Icon}
+          label={label}
+          data-test-id={dataTestid}
+          onSelect={() => onAction(key)}
+        />
+      ))}
+    </Menu>
   );
 };

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

@@ -2,7 +2,6 @@
 
 exports[`Toast renders 1`] = `
 <button
-  aria-describedby="radix-:r5:"
   aria-labelledby="radix-:r4:"
   class="overlay animate toast"
   data-state="open"

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,
@@ -35,7 +34,7 @@ import {
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
-import { localStorageBus } from "../useLocalStorage";
+import { optInAnalytics } from "../settings/settings";
 
 /* Posthog analytics tracking.
  *
@@ -131,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, {
@@ -145,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();
-    const optInAnalytics = getSetting("opt-in-analytics", false);
-    this.updateAnonymityAndIdentifyUser(optInAnalytics);
+    this.startListeningToSettingsChanges(); // Triggers maybeIdentifyUser
   }
 
   private sanitizeProperties = (
@@ -336,8 +333,7 @@ export class PosthogAnalytics {
   }
 
   public onLoginStatusChanged(): void {
-    const optInAnalytics = getSetting("opt-in-analytics", false);
-    this.updateAnonymityAndIdentifyUser(optInAnalytics);
+    this.maybeIdentifyUser();
   }
 
   private updateSuperProperties(): void {
@@ -360,20 +356,12 @@ export class PosthogAnalytics {
     return this.eventSignup.getSignupEndTime() > new Date(0);
   }
 
-  private async updateAnonymityAndIdentifyUser(
-    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);
-
+  private async maybeIdentifyUser(): Promise<void> {
     // 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
@@ -389,7 +377,7 @@ export class PosthogAnalytics {
       }
     }
 
-    if (anonymity !== Anonymity.Disabled) {
+    if (this.anonymity !== Anonymity.Disabled) {
       this.updateSuperProperties();
     }
   }
@@ -419,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) => {
-      this.updateAnonymityAndIdentifyUser(optInAnalytics);
+    optInAnalytics.value.subscribe((optIn) => {
+      this.setAnonymity(optIn ? Anonymity.Pseudonymous : Anonymity.Disabled);
+      this.maybeIdentifyUser();
     });
   }
 

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 login = useInteractiveLogin();
+  const { client, setClient } = useClient();
+  const login = useInteractiveLogin(client);
   const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
   const usernameRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);

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({
-      matrixClient: authClient,
-      doRequest: () =>
-        authClient.login("m.login.password", {
-          identifier: {
-            type: "m.id.user",
-            user: username,
-          },
-          password,
-        }),
-      stateUpdated: (): void => {},
-      requestEmailToken: (): Promise<{ sid: string }> => {
-        return Promise.resolve({ sid: "" });
-      },
-    });
+      const interactiveAuth = new InteractiveAuth({
+        matrixClient: authClient,
+        doRequest: (): Promise<LoginResponse> =>
+          authClient.login("m.login.password", {
+            identifier: {
+              type: "m.id.user",
+              user: username,
+            },
+            password,
+          }),
+        stateUpdated: (): void => {},
+        requestEmailToken: (): Promise<{ sid: string }> => {
+          return Promise.resolve({ sid: "" });
+        },
+      });
 
-    // XXX: This claims to return an IAuthData which contains none of these
-    // things - the js-sdk types may be wrong?
-    /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
-    const { user_id, access_token, device_id } =
-      (await interactiveAuth.attemptAuth()) as any;
-    const session = {
-      user_id,
-      access_token,
-      device_id,
-      passwordlessUser: false,
-    };
+      // XXX: This claims to return an IAuthData which contains none of these
+      // things - the js-sdk types may be wrong?
+      /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
+      const { user_id, access_token, device_id } =
+        (await interactiveAuth.attemptAuth()) as any;
+      const session = {
+        user_id,
+        access_token,
+        device_id,
+        passwordlessUser: false,
+      };
 
-    const client = await initClient(
-      {
-        baseUrl: homeserver,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      },
-      false,
-    );
-    /* eslint-enable camelcase */
-    return [client, session];
-  }, []);
+      // To not confuse the rust crypto sessions we need to logout the old client before initializing the new one.
+      await oldClient?.logout(true);
+      const client = await initClient(
+        {
+          baseUrl: homeserver,
+          accessToken: access_token,
+          userId: user_id,
+          deviceId: device_id,
+        },
+        false,
+      );
+      /* eslint-enable camelcase */
+      return [client, session];
+    },
+    [oldClient],
+  );
 }

src/auth/useInteractiveRegistration.ts

@@ -16,9 +16,13 @@ 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";
@@ -69,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/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,
-.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);
+.endCall > svg {
   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 { PressEvent } from "@react-types/shared";
+import { ComponentPropsWithoutRef, FC } from "react";
 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 MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
-import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
-import VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg?react";
-import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.svg?react";
-import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
-import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
-import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
-import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
+import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
+import {
+  MicOnSolidIcon,
+  MicOffSolidIcon,
+  VideoCallSolidIcon,
+  VideoCallOffSolidIcon,
+  EndCallIcon,
+  ShareScreenSolidIcon,
+  SettingsSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
 
-export type ButtonVariant =
-  | "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;
+interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
+  muted: boolean;
 }
 
-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>
-    );
-  },
-);
-
-Button.displayName = "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}>
-        <Icon aria-label={label} />
-      </Button>
+      <CpdButton
+        iconOnly
+        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}>
-        <Icon aria-label={label} />
-      </Button>
+      <CpdButton
+        iconOnly
+        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;
-}> = ({ enabled, className, ...rest }) => {
+}
+
+export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
+  enabled,
+  ...props
+}) => {
   const { t } = useTranslation();
   const label = enabled
     ? t("stop_screenshare_button_label")
@@ -188,45 +90,48 @@ export const ScreenshareButton: FC<{
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={enabled}>
-        <ShareScreenSolidIcon aria-label={label} />
-      </Button>
+      <CpdButton
+        iconOnly
+        Icon={ShareScreenSolidIcon}
+        kind={enabled ? "primary" : "secondary"}
+        {...props}
+      />
     </Tooltip>
   );
 };
 
-export const HangupButton: FC<{
-  className?: string;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}> = ({ className, ...rest }) => {
+export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
+  className,
+  ...props
+}) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t("hangup_button_label")}>
-      <Button
-        variant="toolbar"
-        className={classNames(styles.hangupButton, className)}
-        {...rest}
-      >
-        <EndCallIcon aria-label={t("hangup_button_label")} />
-      </Button>
+      <CpdButton
+        className={classNames(className, styles.endCall)}
+        iconOnly
+        Icon={EndCallIcon}
+        destructive
+        {...props}
+      />
     </Tooltip>
   );
 };
 
-export const SettingsButton: FC<{
-  className?: string;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}> = ({ className, ...rest }) => {
+export const SettingsButton: FC<ComponentPropsWithoutRef<"button">> = (
+  props,
+) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t("common.settings")}>
-      <Button variant="toolbar" {...rest}>
-        <SettingsSolidIcon aria-label={t("common.settings")} />
-      </Button>
+      <CpdButton
+        iconOnly
+        Icon={SettingsSolidIcon}
+        kind="secondary"
+        {...props}
+      />
     </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 { Link } from "react-router-dom";
-import classNames from "classnames";
-import * as H from "history";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { Button } from "@vector-im/compound-web";
+import { LocationDescriptor } from "history";
 
-import {
-  variantToClassName,
-  sizeToClassName,
-  ButtonVariant,
-  ButtonSize,
-} from "./Button";
+import { useLink } from "./Link";
 
-interface Props extends HTMLAttributes<HTMLAnchorElement> {
-  children: JSX.Element | string;
-  to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
-  size?: ButtonSize;
-  variant?: ButtonVariant;
-  className?: string;
-}
+type Props = Omit<
+  ComponentPropsWithoutRef<typeof Button<"a">>,
+  "as" | "href"
+> & { to: LocationDescriptor };
 
-export const LinkButton: FC<Props> = ({
-  children,
-  to,
-  size,
-  variant,
-  className,
-  ...rest
-}) => {
-  return (
-    <Link
-      className={classNames(
-        variantToClassName[variant || "secondary"],
-        size ? sizeToClassName[size] : [],
-        className,
-      )}
-      to={to}
-      {...rest}
-    >
-      {children}
-    </Link>
-  );
-};
+/**
+ * A version of Compound's button component that acts as a link and integrates
+ * with our router setup.
+ */
+export const LinkButton = forwardRef<HTMLAnchorElement, Props>(
+  function LinkButton({ to, ...props }, ref) {
+    const [path, onClick] = useLink(to);
+    return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
+  },
+);

src/button/index.ts

@@ -15,5 +15,4 @@ limitations under the License.
 */
 
 export * from "./Button";
-export * from "./CopyButton";
 export * from "./LinkButton";

src/config/Config.ts

@@ -44,6 +44,18 @@ export class Config {
     return Config.internalInstance.initPromise;
   }
 
+  /**
+   * This is a alternative initializer that does not load anything
+   * from a hosted config file but instead just initializes the conifg using the
+   * default config.
+   *
+   * It is supposed to only be used in tests. (It is executed in `vite.setup.js`)
+   */
+  public static initDefault(): void {
+    Config.internalInstance = new Config();
+    Config.internalInstance.config = { ...DEFAULT_CONFIG };
+  }
+
   // Convenience accessors
   public static defaultHomeserverUrl(): string | undefined {
     return (

src/config/ConfigOptions.ts

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

src/controls.ts

@@ -0,0 +1,39 @@
+/*
+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 { Subject } from "rxjs";
+
+export interface Controls {
+  canEnterPip: () => boolean;
+  enablePip: () => void;
+  disablePip: () => void;
+}
+
+export const setPipEnabled = new Subject<boolean>();
+
+window.controls = {
+  canEnterPip(): boolean {
+    return setPipEnabled.observed;
+  },
+  enablePip(): void {
+    if (!setPipEnabled.observed) throw new Error("No call is running");
+    setPipEnabled.next(true);
+  },
+  disablePip(): void {
+    if (!setPipEnabled.observed) throw new Error("No call is running");
+    setPipEnabled.next(false);
+  },
+};

src/e2ee/sharedKeyManagement.ts

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

src/grid/CallLayout.ts

@@ -0,0 +1,150 @@
+/*
+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 { BehaviorSubject, Observable } from "rxjs";
+import { ComponentType } from "react";
+
+import { MediaViewModel, UserMediaViewModel } from "../state/MediaViewModel";
+import { LayoutProps } from "./Grid";
+
+export interface Bounds {
+  width: number;
+  height: number;
+}
+
+export interface Alignment {
+  inline: "start" | "end";
+  block: "start" | "end";
+}
+
+export const defaultSpotlightAlignment: Alignment = {
+  inline: "end",
+  block: "end",
+};
+export const defaultPipAlignment: Alignment = { inline: "end", block: "start" };
+
+export interface CallLayoutInputs {
+  /**
+   * The minimum bounds of the layout area.
+   */
+  minBounds: Observable<Bounds>;
+  /**
+   * The alignment of the floating spotlight tile, if present.
+   */
+  spotlightAlignment: BehaviorSubject<Alignment>;
+  /**
+   * The alignment of the small picture-in-picture tile, if present.
+   */
+  pipAlignment: BehaviorSubject<Alignment>;
+}
+
+export interface GridTileModel {
+  type: "grid";
+  vm: UserMediaViewModel;
+}
+
+export interface SpotlightTileModel {
+  type: "spotlight";
+  vms: MediaViewModel[];
+  maximised: boolean;
+}
+
+export type TileModel = GridTileModel | SpotlightTileModel;
+
+export interface CallLayoutOutputs<Model> {
+  /**
+   * Whether the scrolling layer of the layout should appear on top.
+   */
+  scrollingOnTop: boolean;
+  /**
+   * The visually fixed (non-scrolling) layer of the layout.
+   */
+  fixed: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  /**
+   * The layer of the layout that can overflow and be scrolled.
+   */
+  scrolling: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+}
+
+/**
+ * A layout system for media tiles.
+ */
+export type CallLayout<Model> = (
+  inputs: CallLayoutInputs,
+) => CallLayoutOutputs<Model>;
+
+export interface GridArrangement {
+  tileWidth: number;
+  tileHeight: number;
+  gap: number;
+  columns: number;
+}
+
+const tileMaxAspectRatio = 17 / 9;
+const tileMinAspectRatio = 4 / 3;
+
+/**
+ * Determine the ideal arrangement of tiles into a grid of a particular size.
+ */
+export function arrangeTiles(
+  width: number,
+  minHeight: number,
+  tileCount: number,
+): GridArrangement {
+  // The goal here is to determine the grid size and padding that maximizes
+  // use of screen space for n tiles without making those tiles too small or
+  // too cropped (having an extreme aspect ratio)
+  const gap = width < 800 ? 16 : 20;
+  const area = width * minHeight;
+  // Magic numbers that make tiles scale up nicely as the window gets larger
+  const tileArea = Math.pow(Math.sqrt(area) / 8 + 125, 2);
+  const tilesPerPage = Math.min(tileCount, area / tileArea);
+
+  let columns = Math.min(
+    // Don't create more columns than we have items for
+    tilesPerPage,
+    // The ideal number of columns is given by a packing of equally-sized
+    // squares into a grid.
+    // width / column = height / row.
+    // columns * rows = number of squares.
+    // ∴ columns = sqrt(width / height * number of squares).
+    // Except we actually want 16:9-ish tiles rather than squares, so we
+    // divide the width-to-height ratio by the target aspect ratio.
+    Math.round(
+      Math.sqrt((width / minHeight / tileMinAspectRatio) * tilesPerPage),
+    ),
+  );
+  let rows = tilesPerPage / columns;
+  // If all the tiles could fit on one page, we want to ensure that they do by
+  // not leaving fractional rows hanging off the bottom
+  if (tilesPerPage === tileCount) {
+    rows = Math.ceil(rows);
+    // We may now be able to fit the tiles into fewer columns
+    columns = Math.ceil(tileCount / rows);
+  }
+
+  let tileWidth = (width - (columns + 1) * gap) / columns;
+  let tileHeight = (minHeight - (rows - 1) * gap) / rows;
+
+  // Impose a minimum and maximum aspect ratio on the tiles
+  const tileAspectRatio = tileWidth / tileHeight;
+  if (tileAspectRatio > tileMaxAspectRatio)
+    tileWidth = tileHeight * tileMaxAspectRatio;
+  else if (tileAspectRatio < tileMinAspectRatio)
+    tileHeight = tileWidth / tileMinAspectRatio;
+
+  return { tileWidth, tileHeight, gap, columns };
+}

src/grid/Grid.module.css

@@ -1,11 +1,11 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
-http://www.apache.org/licenses/LICENSE-2.0
+    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,
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.popoverMenuTrigger {
-  position: relative;
-  display: inline-block;
+.grid {
+  contain: layout style;
+}
+
+.slot {
+  contain: strict;
 }

src/grid/Grid.tsx

@@ -0,0 +1,514 @@
+/*
+Copyright 2023-2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 {
+  SpringRef,
+  TransitionFn,
+  animated,
+  useTransition,
+} from "@react-spring/web";
+import { EventTypes, Handler, useScroll } from "@use-gesture/react";
+import {
+  CSSProperties,
+  ComponentProps,
+  ComponentType,
+  Dispatch,
+  FC,
+  LegacyRef,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  forwardRef,
+  memo,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useMeasure from "react-use-measure";
+import classNames from "classnames";
+
+import styles from "./Grid.module.css";
+import { useMergedRefs } from "../useMergedRefs";
+import { TileWrapper } from "./TileWrapper";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
+import { useInitial } from "../useInitial";
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface Tile<Model> {
+  id: string;
+  model: Model;
+  onDrag: DragCallback | undefined;
+}
+
+type PlacedTile<Model> = Tile<Model> & Rect;
+
+interface TileSpring {
+  opacity: number;
+  scale: number;
+  zIndex: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface TileSpringUpdate extends Partial<TileSpring> {
+  from?: Partial<TileSpring>;
+  reset?: boolean;
+  immediate?: boolean | ((key: string) => boolean);
+  delay?: (key: string) => number;
+}
+
+interface DragState {
+  tileId: string;
+  tileX: number;
+  tileY: number;
+  cursorX: number;
+  cursorY: number;
+}
+
+interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
+  id: string;
+  model: Model;
+  onDrag?: DragCallback;
+  style?: CSSProperties;
+  className?: string;
+}
+
+interface Offset {
+  x: number;
+  y: number;
+}
+
+/**
+ * Gets the offset of one element relative to an ancestor.
+ */
+function offset(element: HTMLElement, relativeTo: Element): Offset {
+  if (
+    !(element.offsetParent instanceof HTMLElement) ||
+    element.offsetParent === relativeTo
+  ) {
+    return { x: element.offsetLeft, y: element.offsetTop };
+  } else {
+    const o = offset(element.offsetParent, relativeTo);
+    o.x += element.offsetLeft;
+    o.y += element.offsetTop;
+    return o;
+  }
+}
+
+interface LayoutContext {
+  setGeneration: Dispatch<SetStateAction<number | null>>;
+}
+
+const LayoutContext = createContext<LayoutContext | null>(null);
+
+/**
+ * Enables Grid to react to layout changes. You must call this in your Layout
+ * component or else Grid will not be reactive.
+ */
+export function useUpdateLayout(): void {
+  const context = useContext(LayoutContext);
+  if (context === null)
+    throw new Error("useUpdateLayout called outside a Grid layout context");
+
+  // On every render, tell Grid that the layout may have changed
+  useEffect(() =>
+    context.setGeneration((prev) => (prev === null ? 0 : prev + 1)),
+  );
+}
+
+export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
+  ref: LegacyRef<R>;
+  model: LayoutModel;
+  /**
+   * Component creating an invisible "slot" for a tile to go in.
+   */
+  Slot: ComponentType<SlotProps<TileModel>>;
+}
+
+export interface TileProps<Model, R extends HTMLElement> {
+  ref: LegacyRef<R>;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  /**
+   * The width this tile will have once its animations have settled.
+   */
+  targetWidth: number;
+  /**
+   * The height this tile will have once its animations have settled.
+   */
+  targetHeight: number;
+  model: Model;
+}
+
+interface Drag {
+  /**
+   * The X coordinate of the dragged tile in grid space.
+   */
+  x: number;
+  /**
+   * The Y coordinate of the dragged tile in grid space.
+   */
+  y: number;
+  /**
+   * The X coordinate of the dragged tile, as a scalar of the grid width.
+   */
+  xRatio: number;
+  /**
+   * The Y coordinate of the dragged tile, as a scalar of the grid height.
+   */
+  yRatio: number;
+}
+
+export type DragCallback = (drag: Drag) => void;
+
+interface LayoutMemoProps<LayoutModel, TileModel, R extends HTMLElement>
+  extends LayoutProps<LayoutModel, TileModel, R> {
+  Layout: ComponentType<LayoutProps<LayoutModel, TileModel, R>>;
+}
+
+interface Props<
+  LayoutModel,
+  TileModel,
+  LayoutRef extends HTMLElement,
+  TileRef extends HTMLElement,
+> {
+  /**
+   * Data with which to populate the layout.
+   */
+  model: LayoutModel;
+  /**
+   * A component which creates an invisible layout grid of "slots" for tiles to
+   * go in. The root element must have a data-generation attribute which
+   * increments whenever the layout may have changed.
+   */
+  Layout: ComponentType<LayoutProps<LayoutModel, TileModel, LayoutRef>>;
+  /**
+   * The component used to render each tile in the layout.
+   */
+  Tile: ComponentType<TileProps<TileModel, TileRef>>;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A grid of animated tiles.
+ */
+export function Grid<
+  LayoutModel,
+  TileModel,
+  LayoutRef extends HTMLElement,
+  TileRef extends HTMLElement,
+>({
+  model,
+  Layout,
+  Tile,
+  className,
+  style,
+}: Props<LayoutModel, TileModel, LayoutRef, TileRef>): ReactNode {
+  // Overview: This component places tiles by rendering an invisible layout grid
+  // of "slots" for tiles to go in. Once rendered, it uses the DOM API to get
+  // the dimensions of each slot, feeding these numbers back into react-spring
+  // to let the actual tiles move freely atop the layout.
+
+  // To tell us when the layout has changed, the layout system increments its
+  // data-generation attribute, which we watch with a MutationObserver.
+
+  const [gridRef1, gridBounds] = useMeasure();
+  const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
+  const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
+
+  const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
+  const [generation, setGeneration] = useState<number | null>(null);
+  const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const Slot: FC<SlotProps<TileModel>> = useMemo(
+    () =>
+      function Slot({ id, model, onDrag, style, className, ...props }) {
+        const ref = useRef<HTMLDivElement | null>(null);
+        useEffect(() => {
+          tiles.set(id, { id, model, onDrag });
+          return (): void => void tiles.delete(id);
+        }, [id, model, onDrag]);
+
+        return (
+          <div
+            ref={ref}
+            className={classNames(className, styles.slot)}
+            data-id={id}
+            style={style}
+            {...props}
+          />
+        );
+      },
+    [tiles],
+  );
+
+  // We must memoize the Layout component to break the update loop where a
+  // render of Grid causes a re-render of Layout, which in turn re-renders Grid
+  const LayoutMemo = useMemo(
+    () =>
+      memo(
+        forwardRef<
+          LayoutRef,
+          LayoutMemoProps<LayoutModel, TileModel, LayoutRef>
+        >(function LayoutMemo({ Layout, ...props }, ref): ReactNode {
+          return <Layout {...props} ref={ref} />;
+        }),
+      ),
+    [],
+  );
+
+  const context: LayoutContext = useMemo(() => ({ setGeneration }), []);
+
+  // Combine the tile definitions and slots together to create placed tiles
+  const placedTiles = useMemo(() => {
+    const result: PlacedTile<TileModel>[] = [];
+
+    if (gridRoot !== null && layoutRoot !== null) {
+      const slots = layoutRoot.getElementsByClassName(
+        styles.slot,
+      ) as HTMLCollectionOf<HTMLElement>;
+      for (const slot of slots) {
+        const id = slot.getAttribute("data-id")!;
+        if (slot.offsetWidth > 0 && slot.offsetHeight > 0)
+          result.push({
+            ...tiles.get(id)!,
+            ...offset(slot, gridRoot),
+            width: slot.offsetWidth,
+            height: slot.offsetHeight,
+          });
+      }
+    }
+
+    return result;
+    // The rects may change due to the grid resizing or updating to a new
+    // generation, but eslint can't statically verify this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gridRoot, layoutRoot, tiles, gridBounds, generation]);
+
+  // Drag state is stored in a ref rather than component state, because we use
+  // react-spring's imperative API during gestures to improve responsiveness
+  const dragState = useRef<DragState | null>(null);
+
+  const [tileTransitions, springRef] = useTransition(
+    placedTiles,
+    () => ({
+      key: ({ id }: Tile<TileModel>): string => id,
+      from: ({
+        x,
+        y,
+        width,
+        height,
+      }: PlacedTile<TileModel>): TileSpringUpdate => ({
+        opacity: 0,
+        scale: 0,
+        zIndex: 1,
+        x,
+        y,
+        width,
+        height,
+        immediate: prefersReducedMotion,
+      }),
+      enter: { opacity: 1, scale: 1, immediate: prefersReducedMotion },
+      update: ({
+        id,
+        x,
+        y,
+        width,
+        height,
+      }: PlacedTile<TileModel>): TileSpringUpdate | null =>
+        id === dragState.current?.tileId
+          ? null
+          : {
+              x,
+              y,
+              width,
+              height,
+              immediate: prefersReducedMotion,
+            },
+      leave: { opacity: 0, scale: 0, immediate: prefersReducedMotion },
+      config: { mass: 0.7, tension: 252, friction: 25 },
+    }),
+    // react-spring's types are bugged and can't infer the spring type
+  ) as unknown as [
+    TransitionFn<PlacedTile<TileModel>, TileSpring>,
+    SpringRef<TileSpring>,
+  ];
+
+  // Because we're using react-spring in imperative mode, we're responsible for
+  // firing animations manually whenever the tiles array updates
+  useEffect(() => {
+    springRef.start();
+  }, [placedTiles, springRef]);
+
+  const animateDraggedTile = (
+    endOfGesture: boolean,
+    callback: DragCallback,
+  ): void => {
+    const { tileId, tileX, tileY } = dragState.current!;
+    const tile = placedTiles.find((t) => t.id === tileId)!;
+
+    springRef.current
+      .find((c) => (c.item as Tile<TileModel>).id === tileId)
+      ?.start(
+        endOfGesture
+          ? {
+              scale: 1,
+              zIndex: 1,
+              x: tile.x,
+              y: tile.y,
+              width: tile.width,
+              height: tile.height,
+              immediate:
+                prefersReducedMotion || ((key): boolean => key === "zIndex"),
+              // Allow the tile's position to settle before pushing its
+              // z-index back down
+              delay: (key): number => (key === "zIndex" ? 500 : 0),
+            }
+          : {
+              scale: 1.1,
+              zIndex: 2,
+              x: tileX,
+              y: tileY,
+              immediate:
+                prefersReducedMotion ||
+                ((key): boolean =>
+                  key === "zIndex" || key === "x" || key === "y"),
+            },
+      );
+
+    if (endOfGesture)
+      callback({
+        x: tileX,
+        y: tileY,
+        xRatio: tileX / (gridBounds.width - tile.width),
+        yRatio: tileY / (gridBounds.height - tile.height),
+      });
+  };
+
+  // Callback for useDrag. We could call useDrag here, but the default
+  // pattern of spreading {...bind()} across the children to bind the gesture
+  // ends up breaking memoization and ruining this component's performance.
+  // Instead, we pass this callback to each tile via a ref, to let them bind the
+  // gesture using the much more sensible ref-based method.
+  const onTileDrag = (
+    tileId: string,
+
+    {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      tap,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      initial: [initialX, initialY],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      delta: [dx, dy],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      last,
+    }: Parameters<Handler<"drag", EventTypes["drag"]>>[0],
+  ): void => {
+    if (!tap) {
+      const tileController = springRef.current.find(
+        (c) => (c.item as Tile<TileModel>).id === tileId,
+      )!;
+      const callback = tiles.get(tileController.item.id)!.onDrag;
+
+      if (callback != null) {
+        if (dragState.current === null) {
+          const tileSpring = tileController.get();
+          dragState.current = {
+            tileId,
+            tileX: tileSpring.x,
+            tileY: tileSpring.y,
+            cursorX: initialX - gridBounds.x,
+            cursorY: initialY - gridBounds.y + scrollOffset.current,
+          };
+        }
+
+        dragState.current.tileX += dx;
+        dragState.current.tileY += dy;
+        dragState.current.cursorX += dx;
+        dragState.current.cursorY += dy;
+
+        animateDraggedTile(last, callback);
+
+        if (last) dragState.current = null;
+      }
+    }
+  };
+
+  const onTileDragRef = useRef(onTileDrag);
+  onTileDragRef.current = onTileDrag;
+
+  const scrollOffset = useRef(0);
+
+  useScroll(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ({ xy: [, y], delta: [, dy] }) => {
+      scrollOffset.current = y;
+
+      if (dragState.current !== null) {
+        dragState.current.tileY += dy;
+        dragState.current.cursorY += dy;
+        animateDraggedTile(false, tiles.get(dragState.current.tileId)!.onDrag!);
+      }
+    },
+    { target: gridRoot ?? undefined },
+  );
+
+  return (
+    <div
+      ref={gridRef}
+      className={classNames(className, styles.grid)}
+      style={style}
+    >
+      <LayoutContext.Provider value={context}>
+        <LayoutMemo
+          ref={setLayoutRoot}
+          Layout={Layout}
+          model={model}
+          Slot={Slot}
+        />
+      </LayoutContext.Provider>
+      {tileTransitions((spring, { id, model, onDrag, width, height }) => (
+        <TileWrapper
+          key={id}
+          id={id}
+          onDrag={onDrag ? onTileDragRef : null}
+          targetWidth={width}
+          targetHeight={height}
+          model={model}
+          Tile={Tile}
+          {...spring}
+        />
+      ))}
+    </div>
+  );
+}

src/grid/GridLayout.module.css

@@ -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.
+*/
+
+.fixed,
+.scrolling {
+  block-size: 100%;
+}
+
+.scrolling {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  gap: var(--gap);
+}
+
+.scrolling > .slot {
+  width: var(--width);
+  height: var(--height);
+}
+
+.fixed {
+  position: relative;
+}
+
+.fixed > .slot {
+  position: absolute;
+  inline-size: 404px;
+  block-size: 233px;
+  inset-block: 0;
+  inset-inline: var(--cpd-space-3x);
+}
+
+.fixed > .slot[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.fixed > .slot[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.fixed > .slot[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.fixed > .slot[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/GridLayout.tsx

@@ -0,0 +1,129 @@
+/*
+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 { CSSProperties, forwardRef, useCallback, useMemo } from "react";
+import { distinctUntilChanged } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
+
+import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
+import styles from "./GridLayout.module.css";
+import { useInitial } from "../useInitial";
+import {
+  CallLayout,
+  GridTileModel,
+  TileModel,
+  arrangeTiles,
+} from "./CallLayout";
+import { DragCallback, useUpdateLayout } from "./Grid";
+
+interface GridCSSProperties extends CSSProperties {
+  "--gap": string;
+  "--width": string;
+  "--height": string;
+}
+
+/**
+ * An implementation of the "grid" layout, in which all participants are shown
+ * together in a scrolling grid.
+ */
+export const makeGridLayout: CallLayout<GridLayoutModel> = ({
+  minBounds,
+  spotlightAlignment,
+}) => ({
+  scrollingOnTop: false,
+
+  // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
+  // lives
+  fixed: forwardRef(function GridLayoutFixed({ model, Slot }, ref) {
+    useUpdateLayout();
+    const alignment = useObservableEagerState(
+      useInitial(() =>
+        spotlightAlignment.pipe(
+          distinctUntilChanged(
+            (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
+          ),
+        ),
+      ),
+    );
+    const tileModel: TileModel | undefined = useMemo(
+      () =>
+        model.spotlight && {
+          type: "spotlight",
+          vms: model.spotlight,
+          maximised: false,
+        },
+      [model.spotlight],
+    );
+
+    const onDragSpotlight: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        spotlightAlignment.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [],
+    );
+
+    return (
+      <div ref={ref} className={styles.fixed}>
+        {tileModel && (
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={tileModel}
+            onDrag={onDragSpotlight}
+            data-block-alignment={alignment.block}
+            data-inline-alignment={alignment.inline}
+          />
+        )}
+      </div>
+    );
+  }),
+
+  // The scrolling part of the layout is where all the grid tiles live
+  scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
+    useUpdateLayout();
+    const { width, height: minHeight } = useObservableEagerState(minBounds);
+    const { gap, tileWidth, tileHeight } = useMemo(
+      () => arrangeTiles(width, minHeight, model.grid.length),
+      [width, minHeight, model.grid.length],
+    );
+
+    const tileModels: GridTileModel[] = useMemo(
+      () => model.grid.map((vm) => ({ type: "grid", vm })),
+      [model.grid],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={styles.scrolling}
+        style={
+          {
+            width,
+            "--gap": `${gap}px`,
+            "--width": `${Math.floor(tileWidth)}px`,
+            "--height": `${Math.floor(tileHeight)}px`,
+          } as GridCSSProperties
+        }
+      >
+        {tileModels.map((m) => (
+          <Slot key={m.vm.id} className={styles.slot} id={m.vm.id} model={m} />
+        ))}
+      </div>
+    );
+  }),
+});

src/grid/OneOnOneLayout.module.css

@@ -0,0 +1,54 @@
+/*
+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.
+*/
+
+.layer {
+  block-size: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.container {
+  position: relative;
+}
+
+.local {
+  position: absolute;
+  inline-size: 180px;
+  block-size: 135px;
+  inset: var(--cpd-space-4x);
+}
+
+.spotlight {
+  position: absolute;
+  inline-size: 404px;
+  block-size: 233px;
+}
+
+.slot[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.slot[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.slot[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.slot[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/OneOnOneLayout.tsx

@@ -0,0 +1,88 @@
+/*
+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 { forwardRef, useCallback, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+import classNames from "classnames";
+
+import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
+import { CallLayout, GridTileModel, arrangeTiles } from "./CallLayout";
+import styles from "./OneOnOneLayout.module.css";
+import { DragCallback, useUpdateLayout } from "./Grid";
+
+/**
+ * An implementation of the "one-on-one" layout, in which the remote participant
+ * is shown at maximum size, overlaid by a small view of the local participant.
+ */
+export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
+  minBounds,
+  pipAlignment,
+}) => ({
+  scrollingOnTop: false,
+
+  fixed: forwardRef(function OneOnOneLayoutFixed(_props, ref) {
+    useUpdateLayout();
+    return <div ref={ref} />;
+  }),
+
+  scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
+    useUpdateLayout();
+    const { width, height } = useObservableEagerState(minBounds);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment);
+    const { tileWidth, tileHeight } = useMemo(
+      () => arrangeTiles(width, height, 1),
+      [width, height],
+    );
+
+    const remoteTileModel: GridTileModel = useMemo(
+      () => ({ type: "grid", vm: model.remote }),
+      [model.remote],
+    );
+    const localTileModel: GridTileModel = useMemo(
+      () => ({ type: "grid", vm: model.local }),
+      [model.local],
+    );
+
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        pipAlignment.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <Slot
+          id={remoteTileModel.vm.id}
+          model={remoteTileModel}
+          className={styles.container}
+          style={{ width: tileWidth, height: tileHeight }}
+        >
+          <Slot
+            className={classNames(styles.slot, styles.local)}
+            id={localTileModel.vm.id}
+            model={localTileModel}
+            onDrag={onDragLocalTile}
+            data-block-alignment={pipAlignmentValue.block}
+            data-inline-alignment={pipAlignmentValue.inline}
+          />
+        </Slot>
+      </div>
+    );
+  }),
+});

src/grid/SpotlightExpandedLayout.module.css

@@ -0,0 +1,54 @@
+/*
+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.
+*/
+
+.layer {
+  block-size: 100%;
+}
+
+.spotlight {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+.pip {
+  position: absolute;
+  inline-size: 135px;
+  block-size: 160px;
+  inset: var(--cpd-space-4x);
+}
+
+@media (min-width: 600px) {
+  .pip {
+    inline-size: 180px;
+    block-size: 135px;
+  }
+}
+
+.pip[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.pip[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.pip[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.pip[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/SpotlightExpandedLayout.tsx

@@ -0,0 +1,91 @@
+/*
+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 { forwardRef, useCallback, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+
+import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
+import { CallLayout, GridTileModel, SpotlightTileModel } from "./CallLayout";
+import { DragCallback, useUpdateLayout } from "./Grid";
+import styles from "./SpotlightExpandedLayout.module.css";
+
+/**
+ * An implementation of the "expanded spotlight" layout, in which the spotlight
+ * tile stretches edge-to-edge and is overlaid by a picture-in-picture tile.
+ */
+export const makeSpotlightExpandedLayout: CallLayout<
+  SpotlightExpandedLayoutModel
+> = ({ pipAlignment }) => ({
+  scrollingOnTop: true,
+
+  fixed: forwardRef(function SpotlightExpandedLayoutFixed(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const spotlightTileModel: SpotlightTileModel = useMemo(
+      () => ({ type: "spotlight", vms: model.spotlight, maximised: true }),
+      [model.spotlight],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <Slot
+          className={styles.spotlight}
+          id="spotlight"
+          model={spotlightTileModel}
+        />
+      </div>
+    );
+  }),
+
+  scrolling: forwardRef(function SpotlightExpandedLayoutScrolling(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const pipAlignmentValue = useObservableEagerState(pipAlignment);
+
+    const pipTileModel: GridTileModel | undefined = useMemo(
+      () => model.pip && { type: "grid", vm: model.pip },
+      [model.pip],
+    );
+
+    const onDragPip: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        pipAlignment.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        {pipTileModel && (
+          <Slot
+            className={styles.pip}
+            id="pip"
+            model={pipTileModel}
+            onDrag={onDragPip}
+            data-block-alignment={pipAlignmentValue.block}
+            data-inline-alignment={pipAlignmentValue.inline}
+          />
+        )}
+      </div>
+    );
+  }),
+});

src/grid/SpotlightLandscapeLayout.module.css

@@ -0,0 +1,54 @@
+/*
+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.
+*/
+
+.layer {
+  block-size: 100%;
+  display: grid;
+  --gap: 20px;
+  gap: var(--gap);
+  --grid-slot-width: 180px;
+  grid-template-columns: 1fr var(--grid-slot-width);
+  grid-template-rows: minmax(1fr, auto);
+  padding-inline: var(--gap);
+}
+
+.spotlight {
+  container: spotlight / size;
+  display: grid;
+  place-items: center;
+}
+
+/* CSS makes us put a condition here, even though all we want to do is
+unconditionally select the container so we can use cq units */
+@container spotlight (width > 0) {
+  .spotlight > .slot {
+    inline-size: min(100cqi, 100cqb * (17 / 9));
+    block-size: min(100cqb, 100cqi / (4 / 3));
+  }
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  justify-content: center;
+  align-content: center;
+}
+
+.grid > .slot {
+  inline-size: 180px;
+  block-size: 135px;
+}

src/grid/SpotlightLandscapeLayout.tsx

@@ -0,0 +1,92 @@
+/*
+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 { forwardRef, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+import classNames from "classnames";
+
+import { CallLayout, GridTileModel, TileModel } from "./CallLayout";
+import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
+import styles from "./SpotlightLandscapeLayout.module.css";
+import { useUpdateLayout } from "./Grid";
+
+/**
+ * An implementation of the "spotlight landscape" layout, in which the spotlight
+ * tile takes up most of the space on the left, and the grid of participants is
+ * shown as a scrolling rail on the right.
+ */
+export const makeSpotlightLandscapeLayout: CallLayout<
+  SpotlightLandscapeLayoutModel
+> = ({ minBounds }) => ({
+  scrollingOnTop: false,
+
+  fixed: forwardRef(function SpotlightLandscapeLayoutFixed(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    useObservableEagerState(minBounds);
+    const tileModel: TileModel = useMemo(
+      () => ({
+        type: "spotlight",
+        vms: model.spotlight,
+        maximised: false,
+      }),
+      [model.spotlight],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <div className={styles.spotlight}>
+          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+        </div>
+        <div className={styles.grid} />
+      </div>
+    );
+  }),
+
+  scrolling: forwardRef(function SpotlightLandscapeLayoutScrolling(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    useObservableEagerState(minBounds);
+    const tileModels: GridTileModel[] = useMemo(
+      () => model.grid.map((vm) => ({ type: "grid", vm })),
+      [model.grid],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <div
+          className={classNames(styles.spotlight, {
+            [styles.withIndicators]: model.spotlight.length > 1,
+          })}
+        />
+        <div className={styles.grid}>
+          {tileModels.map((m) => (
+            <Slot
+              key={m.vm.id}
+              className={styles.slot}
+              id={m.vm.id}
+              model={m}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }),
+});

src/grid/SpotlightPortraitLayout.module.css

@@ -0,0 +1,56 @@
+/*
+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.
+*/
+
+.layer {
+  block-size: 100%;
+  display: grid;
+  --gap: 20px;
+  gap: var(--gap);
+  margin-inline: 0;
+  display: block;
+}
+
+.spotlight {
+  container: spotlight / size;
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  margin-block-end: var(--cpd-space-4x);
+}
+
+.spotlight.withIndicators {
+  margin-block-end: calc(2 * var(--cpd-space-4x) + 2px);
+}
+
+.spotlight > .slot {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--grid-gap);
+  justify-content: center;
+  align-content: start;
+  padding-inline: var(--grid-gap);
+}
+
+.grid > .slot {
+  inline-size: var(--grid-tile-width);
+  block-size: var(--grid-tile-height);
+}

src/grid/SpotlightPortraitLayout.tsx

@@ -0,0 +1,118 @@
+/*
+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 { CSSProperties, forwardRef, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+import classNames from "classnames";
+
+import {
+  CallLayout,
+  GridTileModel,
+  TileModel,
+  arrangeTiles,
+} from "./CallLayout";
+import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
+import styles from "./SpotlightPortraitLayout.module.css";
+import { useUpdateLayout } from "./Grid";
+
+interface GridCSSProperties extends CSSProperties {
+  "--grid-gap": string;
+  "--grid-tile-width": string;
+  "--grid-tile-height": string;
+}
+
+/**
+ * An implementation of the "spotlight portrait" layout, in which the spotlight
+ * tile is shown across the top of the screen, and the grid of participants
+ * scrolls behind it.
+ */
+export const makeSpotlightPortraitLayout: CallLayout<
+  SpotlightPortraitLayoutModel
+> = ({ minBounds }) => ({
+  scrollingOnTop: false,
+
+  fixed: forwardRef(function SpotlightPortraitLayoutFixed(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const tileModel: TileModel = useMemo(
+      () => ({
+        type: "spotlight",
+        vms: model.spotlight,
+        maximised: true,
+      }),
+      [model.spotlight],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <div className={styles.spotlight}>
+          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+        </div>
+      </div>
+    );
+  }),
+
+  scrolling: forwardRef(function SpotlightPortraitLayoutScrolling(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const { width } = useObservableEagerState(minBounds);
+    const { gap, tileWidth, tileHeight } = arrangeTiles(
+      width,
+      // TODO: We pretend that the minimum height is the width, because the
+      // actual minimum height is difficult to calculate
+      width,
+      model.grid.length,
+    );
+    const tileModels: GridTileModel[] = useMemo(
+      () => model.grid.map((vm) => ({ type: "grid", vm })),
+      [model.grid],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={styles.layer}
+        style={
+          {
+            "--grid-gap": `${gap}px`,
+            "--grid-tile-width": `${Math.floor(tileWidth)}px`,
+            "--grid-tile-height": `${Math.floor(tileHeight)}px`,
+          } as GridCSSProperties
+        }
+      >
+        <div
+          className={classNames(styles.spotlight, {
+            [styles.withIndicators]: model.spotlight.length > 1,
+          })}
+        />
+        <div className={styles.grid}>
+          {tileModels.map((m) => (
+            <Slot
+              key={m.vm.id}
+              className={styles.slot}
+              id={m.vm.id}
+              model={m}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }),
+});

src/grid/TileWrapper.module.css

@@ -1,11 +1,11 @@
 /*
-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.
 You may obtain a copy of the License at
 
-http://www.apache.org/licenses/LICENSE-2.0
+    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,
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.videoGrid {
-  position: relative;
-  overflow: hidden;
-  flex: 1;
-  touch-action: none;
+.tile.draggable {
+  cursor: grab;
+}
+
+.tile.draggable:active {
+  cursor: grabbing;
 }

src/grid/TileWrapper.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,83 +14,76 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { memo, ReactNode, RefObject, useRef } from "react";
+import { ComponentType, memo, RefObject, useRef } from "react";
 import { EventTypes, Handler, useDrag } from "@use-gesture/react";
-import { SpringValue, to } from "@react-spring/web";
+import { SpringValue } from "@react-spring/web";
+import classNames from "classnames";
 
-import { ChildrenProperties } from "./VideoGrid";
+import { TileProps } from "./Grid";
+import styles from "./TileWrapper.module.css";
 
-interface Props<T> {
+interface Props<M, R extends HTMLElement> {
   id: string;
-  onDragRef: RefObject<
+  onDrag: RefObject<
     (
       tileId: string,
       state: Parameters<Handler<"drag", EventTypes["drag"]>>[0],
     ) => void
-  >;
+  > | null;
   targetWidth: number;
   targetHeight: number;
-  data: T;
+  model: M;
+  Tile: ComponentType<TileProps<M, R>>;
   opacity: SpringValue<number>;
   scale: SpringValue<number>;
-  shadow: SpringValue<number>;
-  shadowSpread: SpringValue<number>;
   zIndex: SpringValue<number>;
   x: SpringValue<number>;
   y: SpringValue<number>;
   width: SpringValue<number>;
   height: SpringValue<number>;
-  children: (props: ChildrenProperties<T>) => ReactNode;
 }
 
 const TileWrapper_ = memo(
-  <T,>({
+  <M, R extends HTMLElement>({
     id,
-    onDragRef,
+    onDrag,
     targetWidth,
     targetHeight,
-    data,
+    model,
+    Tile,
     opacity,
     scale,
-    shadow,
-    shadowSpread,
     zIndex,
     x,
     y,
     width,
     height,
-    children,
-  }: Props<T>) => {
-    const ref = useRef<HTMLElement | null>(null);
+  }: Props<M, R>) => {
+    const ref = useRef<R | null>(null);
 
-    useDrag((state) => onDragRef?.current!(id, state), {
+    useDrag((state) => onDrag?.current!(id, state), {
       target: ref,
       filterTaps: true,
       preventScroll: true,
     });
 
     return (
-      <>
-        {children({
-          ref,
-          style: {
-            opacity,
-            scale,
-            zIndex,
-            x,
-            y,
-            width,
-            height,
-            boxShadow: to(
-              [shadow, shadowSpread],
-              (s, ss) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px ${ss}px`,
-            ),
-          },
-          targetWidth,
-          targetHeight,
-          data,
-        })}
-      </>
+      <Tile
+        ref={ref}
+        className={classNames(styles.tile, { [styles.draggable]: onDrag })}
+        style={{
+          opacity,
+          scale,
+          zIndex,
+          x,
+          y,
+          width,
+          height,
+        }}
+        targetWidth={targetWidth}
+        targetHeight={targetHeight}
+        model={model}
+      />
     );
   },
 );
@@ -104,4 +97,6 @@ TileWrapper_.displayName = "TileWrapper";
 // We pretend this component is a simple function rather than a
 // NamedExoticComponent, because that's the only way we can fit in a type
 // parameter
-export const TileWrapper = TileWrapper_ as <T>(props: Props<T>) => JSX.Element;
+export const TileWrapper = TileWrapper_ as <M, R extends HTMLElement>(
+  props: Props<M, R>,
+) => JSX.Element;

src/home/CallList.module.css

@@ -42,8 +42,7 @@ limitations under the License.
   align-items: center;
 }
 
-.avatar,
-.copyButtonSpacer {
+.avatar {
   flex-shrink: 0;
 }
 
@@ -64,18 +63,6 @@ limitations under the License.
   margin-top: 8px;
 }
 
-.copyButtonSpacer,
-.copyButton {
-  width: 16px;
-  height: 16px;
-}
-
-.copyButton {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
 .callList {
   display: flex;
   flex-wrap: wrap;

src/home/CallList.test.tsx

@@ -15,20 +15,19 @@ limitations under the License.
 */
 
 import { render, RenderResult } from "@testing-library/react";
-import { CallList } from "../../src/home/CallList";
-import { MatrixClient } from "matrix-js-sdk";
-import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { MemoryRouter } from "react-router-dom";
-import { ClientProvider } from "../../src/ClientContext";
+import { describe, expect, it } from "vitest";
+
+import { CallList } from "../../src/home/CallList";
+import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
 
 describe("CallList", () => {
   const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {
     return render(
-      <ClientProvider>
-        <MemoryRouter>
-          <CallList client={{} as MatrixClient} rooms={rooms} />
-        </MemoryRouter>
-      </ClientProvider>,
+      <MemoryRouter>
+        <CallList client={{} as MatrixClient} rooms={rooms} />
+      </MemoryRouter>,
     );
   };
 

src/home/CallList.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.
@@ -20,13 +20,12 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { FC } from "react";
 
-import { CopyButton } from "../button";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
-import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
+import { getRelativeRoomUrl } from "../utils/matrix";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface CallListProps {
   rooms: GroupCallRoom[];
@@ -66,16 +65,11 @@ interface CallTileProps {
 }
 
 const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
-  const roomSharedKey = useRoomSharedKey(room.roomId);
-
+  const roomEncryptionSystem = useRoomEncryptionSystem(room.roomId);
   return (
     <div className={styles.callTile}>
       <Link
-        to={getRelativeRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined,
-        )}
+        to={getRelativeRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
@@ -86,15 +80,6 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
         </div>
         <div className={styles.copyButtonSpacer} />
       </Link>
-      <CopyButton
-        className={styles.copyButton}
-        variant="icon"
-        value={getAbsoluteRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined,
-        )}
-      />
     </div>
   );
 };

src/home/JoinExistingCallModal.tsx

@@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";
-import { FC } from "react";
+import { FC, MouseEvent } from "react";
+import { Button } from "@vector-im/compound-web";
 
 import { Modal } from "../Modal";
-import { Button } from "../button";
 import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";
 
 interface Props {
   open: boolean;
   onDismiss: () => void;
-  onJoin: (e: PressEvent) => void;
+  onJoin: (e: MouseEvent) => void;
 }
 
 export const JoinExistingCallModal: FC<Props> = ({
@@ -44,8 +43,8 @@ export const JoinExistingCallModal: FC<Props> = ({
     >
       <p>{t("join_existing_call_modal.text")}</p>
       <FieldRow rightAlign className={styles.buttons}>
-        <Button onPress={onDismiss}>{t("action.no")}</Button>
-        <Button onPress={onJoin} data-testid="home_joinExistingRoom">
+        <Button onClick={onDismiss}>{t("action.no")}</Button>
+        <Button onClick={onJoin} data-testid="home_joinExistingRoom">
           {t("join_existing_call_modal.join_button")}
         </Button>
       </FieldRow>

src/home/RegisteredView.tsx

@@ -20,27 +20,27 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";
 
 import {
   createRoom,
   getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
 import styles from "./RegisteredView.module.css";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
-import { useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
+import { useOptInAnalytics } from "../settings/settings";
 
 interface Props {
   client: MatrixClient;
@@ -78,12 +78,14 @@ export const RegisteredView: FC<Props> = ({ client }) => {
           roomName,
           E2eeType.SHARED_KEY,
         );
+        if (!createRoomResult.password)
+          throw new Error("Failed to create room with shared secret");
 
         history.push(
           getRelativeRoomUrl(
             createRoomResult.roomId,
+            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
             roomName,
-            createRoomResult.password,
           ),
         );
       }

src/home/UnauthenticatedView.tsx

@@ -18,20 +18,19 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
-import { Heading } from "@vector-im/compound-web";
+import { Button, Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import {
   createRoom,
   getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
@@ -41,9 +40,9 @@ import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
+import { useOptInAnalytics } from "../settings/settings";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -116,13 +115,15 @@ export const UnauthenticatedView: FC = () => {
         if (!setClient) {
           throw new Error("setClient is undefined");
         }
+        if (!createRoomResult.password)
+          throw new Error("Failed to create room with shared secret");
 
         setClient({ client, session });
         history.push(
           getRelativeRoomUrl(
             createRoomResult.roomId,
+            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
             roomName,
-            createRoomResult.password,
           ),
         );
       }

src/home/useGroupCallRooms.ts

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

src/icons/ArrowDown.svg

@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_965_9448)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.70711 5.36321C2.09763 4.97268 2.73182 4.97166 3.1236 5.36091L8.08934 10.2946L13.0391 5.34488C13.4296 4.95435 14.0638 4.95333 14.4556 5.34258C14.8474 5.73184 14.8484 6.36398 14.4579 6.75451L8.80101 12.4114C8.41049 12.8019 7.7763 12.8029 7.38452 12.4137L1.70939 6.77513C1.3176 6.38587 1.31658 5.75373 1.70711 5.36321Z" fill="#8E99A4"/>
-</g>
-<defs>
-<clipPath id="clip0_965_9448">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/icons/Audio.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
-<path d="M21.1888 4.1866C20.8497 3.75065 20.2214 3.67212 19.7855 4.01119C19.35 4.34988 19.2712 4.97715 19.6089 5.41304L19.6097 5.41402L19.6107 5.41531L19.6243 5.43347C19.6376 5.45126 19.6589 5.48033 19.6872 5.52017C19.7438 5.59988 19.828 5.72244 19.9308 5.88385C20.1365 6.20718 20.4145 6.68332 20.6932 7.28057C21.2535 8.48111 21.7994 10.134 21.7994 12.0005C21.7994 13.8671 21.2535 15.52 20.6932 16.7205C20.4145 17.3178 20.1365 17.7939 19.9308 18.1172C19.828 18.2786 19.7438 18.4012 19.6872 18.4809C19.6589 18.5208 19.6376 18.5498 19.6243 18.5676L19.6107 18.5858L19.6097 18.5871L19.6088 18.5882C19.2712 19.0241 19.3501 19.6512 19.7855 19.9899C20.2214 20.329 20.8497 20.2504 21.1888 19.8145L20.4435 19.2348C21.1888 19.8145 21.1888 19.8145 21.1888 19.8145L21.1908 19.8119L21.1936 19.8082L21.2019 19.7974L21.2284 19.7621C21.2503 19.7327 21.2805 19.6915 21.3179 19.6389C21.3925 19.5338 21.4958 19.3832 21.6181 19.191C21.8623 18.8072 22.1843 18.2547 22.5056 17.5663C23.1453 16.1954 23.7994 14.2482 23.7994 12.0005C23.7994 9.75284 23.1453 7.80569 22.5056 6.4348C22.1843 5.74634 21.8623 5.1939 21.6181 4.81009C21.4958 4.61793 21.3925 4.46727 21.3179 4.36217C21.2805 4.30959 21.2503 4.26835 21.2284 4.23893L21.2019 4.20373L21.1936 4.19288L21.1908 4.18917L21.1897 4.18774C21.1897 4.18774 21.1888 4.1866 20.3994 4.80054L21.1888 4.1866Z" fill="white"/>
-<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
-</svg>

src/icons/Copy.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.89543 2 2 2.89543 2 4V8.66667C2 9.77124 2.89543 10.6667 4 10.6667H5.33333V12C5.33333 13.1046 6.22877 14 7.33333 14H12C13.1046 14 14 13.1046 14 12V7.33333C14 6.22876 13.1046 5.33333 12 5.33333H10.6667V4C10.6667 2.89543 9.77123 2 8.66667 2H4ZM9.33333 5.33333V4C9.33333 3.63181 9.03486 3.33333 8.66667 3.33333H4C3.63181 3.33333 3.33333 3.63181 3.33333 4V8.66667C3.33333 9.03486 3.63181 9.33333 4 9.33333H5.33333V7.33333C5.33333 6.22877 6.22876 5.33333 7.33333 5.33333H9.33333ZM6.66667 7.33333C6.66667 6.96514 6.96514 6.66667 7.33333 6.66667H12C12.3682 6.66667 12.6667 6.96514 12.6667 7.33333V12C12.6667 12.3682 12.3682 12.6667 12 12.6667H7.33333C6.96514 12.6667 6.66667 12.3682 6.66667 12V7.33333Z" fill="#8E99A4"/>
-</svg>

src/icons/Developer.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C2.23858 3 0 5.23858 0 8C0 10.7614 2.23858 13 5 13H11C13.7614 13 16 10.7614 16 8C16 5.23858 13.7614 3 11 3H5ZM8 8C8 9.65685 6.65685 11 5 11C3.34315 11 2 9.65685 2 8C2 6.34315 3.34315 5 5 5C6.65685 5 8 6.34315 8 8Z" fill="#A9B2BC"/>
-</svg>

src/icons/Edit.svg

@@ -1,4 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.64856 7.35501C2.65473 7.31601 2.67231 7.27972 2.69908 7.25069L8.40377 1.06442C8.47865 0.983217 8.60518 0.978093 8.68638 1.05297L9.8626 2.13763C9.9438 2.21251 9.94893 2.33904 9.87405 2.42024L4.16936 8.60651C4.1426 8.63554 4.10783 8.656 4.06946 8.6653L2.66781 9.00511C2.52911 9.03873 2.40084 8.92044 2.42315 8.77948L2.64856 7.35501Z" fill="white"/>
-<path d="M1.75 9.44346C1.33579 9.44346 1 9.77925 1 10.1935C1 10.6077 1.33579 10.9435 1.75 10.9435L10.75 10.9435C11.1642 10.9435 11.5 10.6077 11.5 10.1935C11.5 9.77925 11.1642 9.44346 10.75 9.44346L1.75 9.44346Z" fill="white"/>
-</svg>