Merge pull request #1892 from vector-im/dbkr/focus_switch_keep_screenshare

Keep screenshares when switching focus

.eslintrc.cjs

@@ -1,13 +1,31 @@
+const COPYRIGHT_HEADER = `/*
+Copyright %%CURRENT_YEAR%% 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.
+*/
+
+`;
+
 module.exports = {
   plugins: ["matrix-org"],
   extends: [
-    "prettier",
     "plugin:matrix-org/react",
     "plugin:matrix-org/a11y",
     "plugin:matrix-org/typescript",
+    "prettier",
   ],
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: "latest",
     sourceType: "module",
     project: ["./tsconfig.json"],
   },
@@ -15,29 +33,12 @@ module.exports = {
     browser: true,
     node: true,
   },
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
   rules: {
-    "jsx-a11y/media-has-caption": ["off"],
+    "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
+    "jsx-a11y/media-has-caption": "off",
+    // We should use the js-sdk logger, never console directly.
+    "no-console": ["error"],
   },
-  overrides: [
-    {
-      files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
-      extends: [
-        "plugin:matrix-org/typescript",
-        "plugin:matrix-org/react",
-        "prettier",
-      ],
-      rules: {
-        // We're aiming to convert this code to strict mode
-        "@typescript-eslint/no-non-null-assertion": "off",
-        // We should use the js-sdk logger, never console directly.
-        "no-console": ["error"],
-      },
-    },
-  ],
   settings: {
     react: {
       version: "detect",

.github/workflows/build.yaml

@@ -11,7 +11,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies

.github/workflows/lint.yaml

@@ -9,7 +9,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies

.github/workflows/netlify-fullmesh.yaml

@@ -1,88 +0,0 @@
-name: Netlify Main
-on:
-  workflow_run:
-    workflows: ["Build"]
-    types:
-      - completed
-    branches:
-      - "full-mesh"
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      deployments: write
-    # Important: the 'branches' filter above will match the 'main' branch on forks,
-    # so we need to check the head repo too in order to not run on PRs from forks
-    # We check the branch name again too just for completeness
-    # (Is there a nicer way to see if a PR is from a fork?)
-    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.head_repository.full_name == 'vector-im/element-call' && github.event.workflow_run.head_branch == 'full-mesh'
-    steps:
-      - name: Create Deployment
-        uses: bobheadxi/deployments@v1
-        id: deployment
-        with:
-          step: start
-          token: ${{ secrets.GITHUB_TOKEN }}
-          env: main-branch-cd
-          ref: ${{ github.event.workflow_run.head_sha }}
-
-      - name: "Download artifact"
-        uses: actions/github-script@v6.4.1
-        with:
-          script: |
-            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                run_id: ${{ github.event.workflow_run.id }},
-            });
-            const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-                return artifact.name == "build"
-            })[0];
-            const download = await github.rest.actions.downloadArtifact({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                artifact_id: matchArtifact.id,
-                archive_format: 'zip',
-            });
-            const fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/build.zip', Buffer.from(download.data));
-
-      - name: Extract Artifacts
-        run: unzip -d dist build.zip && rm build.zip
-
-      - name: Add redirects file
-        # We fetch from github directly as we don't bother checking out the repo
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/main/config/netlify_redirects > dist/_redirects
-
-      - name: Add config file
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/main/config/element_io_develop.json > dist/config.json
-
-      - name: Deploy to Netlify
-        id: netlify
-        uses: nwtgck/actions-netlify@v2.1.0
-        with:
-          publish-dir: dist
-          deploy-message: "Deploy from GitHub Actions"
-          production-branch: main
-          production-deploy: true
-          # These don't work because we're in workflow_run
-          enable-pull-request-comment: false
-          enable-commit-comment: false
-          github-deployment-environment: main
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-        timeout-minutes: 1
-
-      - name: Update deployment status
-        uses: bobheadxi/deployments@v1
-        if: always()
-        with:
-          step: finish
-          override: false
-          token: ${{ secrets.GITHUB_TOKEN }}
-          status: ${{ job.status }}
-          env: ${{ steps.deployment.outputs.env }}
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-          env_url: ${{ steps.netlify.outputs.deploy-url }}

.github/workflows/netlify-livekit.yaml

@@ -1,87 +0,0 @@
-name: Netlify LiveKit
-on:
-  workflow_run:
-    workflows: ["Build"]
-    types:
-      - completed
-    branches:
-      - "livekit"
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      deployments: write
-    # Important: the 'branches' filter above will match the 'livekit' branch on forks,
-    # so we need to check the head repo too in order to not run on PRs from forks
-    # We check the branch name again too just for completeness
-    # (Is there a nicer way to see if a PR is from a fork?)
-    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.head_repository.full_name == 'vector-im/element-call' && github.event.workflow_run.head_branch == 'livekit'
-    steps:
-      - name: Create Deployment
-        uses: bobheadxi/deployments@v1
-        id: deployment
-        with:
-          step: start
-          token: ${{ secrets.GITHUB_TOKEN }}
-          env: livekit-experiment-branch-cd
-          ref: ${{ github.event.workflow_run.head_sha }}
-
-      - name: "Download artifact"
-        uses: actions/github-script@v6.4.1
-        with:
-          script: |
-            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                run_id: ${{ github.event.workflow_run.id }},
-            });
-            const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-                return artifact.name == "build"
-            })[0];
-            const download = await github.rest.actions.downloadArtifact({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                artifact_id: matchArtifact.id,
-                archive_format: 'zip',
-            });
-            const fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/build.zip', Buffer.from(download.data));
-
-      - name: Extract Artifacts
-        run: unzip -d dist build.zip && rm build.zip
-
-      - name: Add redirects file
-        # We fetch from github directly as we don't bother checking out the repo
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit/config/netlify_redirects > dist/_redirects
-
-      - name: Add config file
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit/config/element_io_preview.json > dist/config.json
-
-      - name: Deploy to Netlify
-        id: netlify
-        uses: nwtgck/actions-netlify@v2.1.0
-        with:
-          publish-dir: dist
-          deploy-message: "Deploy from GitHub Actions"
-          production-branch: livekit
-          production-deploy: true
-          # These don't work because we're in workflow_run
-          enable-pull-request-comment: false
-          enable-commit-comment: false
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: e3b9fa82-c040-4db6-b4bf-42b524d57423
-        timeout-minutes: 1
-
-      - name: Update deployment status
-        uses: bobheadxi/deployments@v1
-        if: always()
-        with:
-          step: finish
-          override: false
-          token: ${{ secrets.GITHUB_TOKEN }}
-          status: ${{ job.status }}
-          env: ${{ steps.deployment.outputs.env }}
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-          env_url: ${{ steps.netlify.outputs.deploy-url }}

.github/workflows/publish.yaml

@@ -26,14 +26,14 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Log in to container registry
-        uses: docker/login-action@b4bedf8053341df3b5a9f9e0f2cf4e79e27360c6
+        uses: docker/login-action@1f401f745bf57e30b3a2800ad308a87d2ebdf14b
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies
@@ -62,7 +62,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@879dcbb708d40f8b8679d4f7941b938a086e23a7
+        uses: docker/metadata-action@62339db73c56dd749060f65a6ebb93a6e056b755
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
@@ -72,10 +72,10 @@ jobs:
             type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@dedd61cf5d839122591f5027c89bf3ad27691d18
+        uses: docker/setup-buildx-action@6d5347c4025fdf2bb05167a2519cac535a14a408
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@4c1b68d83ad20cc1a09620ca477d5bbbb5fa14d0
+        uses: docker/build-push-action@fdf7f43ecf7c1a5c7afe936410233728a8c2d9c2
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/test.yaml

@@ -11,7 +11,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies

.storybook/main.js

@@ -14,7 +14,7 @@ module.exports = {
           Array.isArray(item) &&
           item.length > 0 &&
           item[0].name === "vite-plugin-mdx"
-        )
+        ),
     );
     config.plugins.push(svgrPlugin());
     config.resolve = config.resolve || {};

README.md

@@ -106,3 +106,9 @@ Run backend components:
 ```
 yarn backend
 ```
+
+## Documentation
+
+Usage and other technical details about the project can be found here:
+
+[**Docs**](./docs/README.md)

docs/README.md

@@ -0,0 +1,6 @@
+## Element Call Docs
+
+This folder contains documentation for Element Call setup and usage.
+
+- [Url format and parameters](./url-params.md)
+- [Embedded vs standalone mode](./embedded-standalone.md)

docs/embedded-standalone.md

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

docs/url-params.md

@@ -0,0 +1,190 @@
+## Url Format and parameters
+
+There are two formats for Element Call urls.
+
+- **Current Format**
+  ```
+  https://element_call.domain/room/#
+  /<room_name_alias>?roomId=!id:domain&password=1234&<other params see below>
+  ```
+  The url is split into two sections. The `https://element_call.domain/room/#` contains the app and the intend that the link brings you into a specific room (`https://call.element.io/#` would be the homepage). The fragment is used for query parameters to make sure they never get sent to the element_call.domain server. Here we have the actual matrix roomId and the password which are used to connect all participants with e2ee. This allows that `<room_name_alias>` does not need to be unique. Multiple meetings with the label weekly-sync can be created without collisions.
+- **deprecated**
+  ```
+  https://element_call.domain/<room_name>
+  ```
+  With this format the livekit alias that will be used is the `<room_name>`. All ppl connecting to this url will end up in the same unencrypted room. This does not scale, is super unsecure (ppl could end up in the same room by accident) and it also is not really possible to support encryption.
+  The url parameters are spit into two categories: **general** and **widget related**.
+
+### Widget related params
+
+**widgetId**
+The id used by the widget. The presence of this parameter inplis that elemetn call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`
+
+```
+widgetId: string | null;
+```
+
+**parentUrl**
+The url used to send widget action postMessages. This should be the domain of the client
+or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a
+dedicated webview we send the postMessages same webview the widget lives in. Filtering is
+done in the widget so it ignores the messages it receives from itself)
+
+```
+parentUrl: string | null;
+```
+
+**userId**
+The user's ID (only used in matryoshka mode).
+
+```
+userId: string | null;
+```
+
+**deviceId**
+The device's ID (only used in matryoshka mode).
+
+```
+deviceId: string | null;
+```
+
+**baseUrl**
+The base URL of the homeserver to use for media lookups in matryoshka mode.
+
+```
+baseUrl: string | null;
+```
+
+### General url parameters
+
+**roomId**
+Anything about what room we're pointed to should be from useRoomIdentifier which
+parses the path and resolves alias with respect to the default server name, however
+roomId is an exception as we need the room ID in embedded (matroyska) mode, and not
+the room alias (or even the via params because we are not trying to join it). This
+is also not validated, where it is in useRoomIdentifier().
+
+```
+roomId: string | null;
+```
+
+**confineToRoom**
+Whether the app should keep the user confined to the current call/room.
+
+```
+confineToRoom: boolean; (default: false)
+```
+
+**appPrompt**
+Whether upon entering a room, the user should be prompted to launch the
+native mobile app. (Affects only Android and iOS.)
+
+```
+appPrompt: boolean; (default: true)
+```
+
+**preload**
+Whether the app should pause before joining the call until it sees an
+io.element.join widget action, allowing it to be preloaded.
+
+```
+preload: boolean; (default: false)
+```
+
+**hideHeader**
+Whether to hide the room header when in a call.
+
+```
+hideHeader: boolean; (default: false)
+```
+
+**showControls**
+Whether to show the buttons to mute, screen-share, invite, hangup are shown when in a call.
+
+```
+showControls: boolean; (default: true)
+```
+
+**hideScreensharing**
+Whether to hide the screen-sharing button.
+
+```
+hideScreensharing: boolean; (default: false)
+```
+
+**enableE2EE**
+Whether to use end-to-end encryption.
+
+```
+enableE2EE: boolean; (default: true)
+```
+
+**perParticipantE2EE**
+Whether to use per participant encryption.
+Keys will be exchanged over encrypted matrix room messages.
+
+```
+perParticipantE2EE: boolean; (default: false)
+```
+
+**password**
+E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)
+
+```
+password: string | null;
+```
+
+**displayName**
+The display name to use for auto-registration.
+
+```
+displayName: string | null;
+```
+
+**lang**
+The BCP 47 code of the language the app should use.
+
+```
+lang: string | null;
+```
+
+**fonts**
+The font/fonts which the interface should use.
+There can be multiple font url parameters: `?font=font-one&font=font-two...`
+
+```
+font: string;
+font: string;
+...
+```
+
+**fontScale**
+The factor by which to scale the interface's font size.
+
+```
+fontScale: number | null;
+```
+
+**analyticsID**
+The Posthog analytics ID. It is only available if the user has given consent for sharing telemetry in element web.
+
+```
+analyticsID: string | null;
+```
+
+**allowIceFallback**
+Whether the app is allowed to use fallback STUN servers for ICE in case the
+user's homeserver doesn't provide any.
+
+```
+allowIceFallback: boolean; (default: false)
+```
+
+**skipLobby**
+Setting this flag skips the lobby and brings you in the call directly.
+In the widget this can be combined with preload to pass the device settings
+with the join widget action.
+
+```
+skipLobby: boolean; (default: false)
+```

package.json

@@ -23,7 +23,7 @@
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/context-zone": "^1.9.1",
     "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.41.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.45.0",
     "@opentelemetry/instrumentation-document-load": "^0.33.0",
     "@opentelemetry/instrumentation-user-interaction": "^0.33.0",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
@@ -46,8 +46,8 @@
     "@sentry/tracing": "^7.0.0",
     "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^0.0.6",
-    "@vector-im/compound-web": "^0.4.0",
+    "@vector-im/compound-design-tokens": "^0.1.0",
+    "@vector-im/compound-web": "^0.6.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "buffer": "^6.0.3",
@@ -58,7 +58,7 @@
     "i18next-http-backend": "^2.0.0",
     "livekit-client": "^1.12.3",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6385c9c0dab8fe67bd3a8992a4777f243fdd1b68",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#107e28e1145c8b2667701e1f75b9f09b5d2ac3d6",
     "matrix-widget-api": "^1.3.1",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
@@ -74,7 +74,7 @@
     "tinyqueue": "^2.0.3",
     "unique-names-generator": "^4.6.0",
     "uuid": "9",
-    "vaul": "^0.6.1"
+    "vaul": "^0.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -88,12 +88,11 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
-    "@types/d3": "^7.4.0",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/dompurify": "^3.0.2",
     "@types/grecaptcha": "^3.0.4",
     "@types/jest": "^29.5.5",
-    "@types/node": "^18.13.0",
+    "@types/node": "^20.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
     "@types/sdp-transform": "^2.4.5",
@@ -105,19 +104,22 @@
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-deprecate": "^0.8.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-matrix-org": "^0.4.0",
+    "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-unicorn": "^49.0.0",
     "i18next-parser": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.3.1",
     "jest-mock": "^29.5.0",
-    "prettier": "^2.6.2",
+    "prettier": "^3.0.0",
     "sass": "^1.42.1",
     "typescript": "^5.1.6",
+    "typescript-eslint-language-service": "^5.0.5",
     "vite": "^4.2.0",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0"

public/.well-known/apple-app-site-association

@@ -10,7 +10,7 @@
         "components": [
           {
             "?": {
-              "no_universal_links": "*"
+              "no_universal_links": "?*"
             },
             "exclude": true,
             "comment": "Opt out of universal links"

public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

public/locales/de/app.json

@@ -83,10 +83,7 @@
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Mit einem Klick auf „Anruf beitreten“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call ist temporär nicht Ende-zu-Ende-verschlüsselt, während wir die Skalierbarkeit testen.",
   "Connectivity to the server has been lost.": "Die Verbindung zum Server wurde getrennt.",
-  "Enable end-to-end encryption (password protected calls)": "Ende-zu-Ende-Verschlüsselung aktivieren (Passwortgeschützte Anrufe)",
-  "End-to-end encryption isn't supported on your browser.": "Ende-zu-Ende-Verschlüsselung wird in deinem Browser nicht unterstützt.",
   "Thanks!": "Danke!",
   "You were disconnected from the call": "Deine Verbindung wurde getrennt",
   "Reconnect": "Erneut verbinden",
@@ -114,5 +111,10 @@
   "Start new call": "Neuen Anruf beginnen",
   "Call not found": "Anruf nicht gefunden",
   "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.": "Anrufe sind nun Ende-zu-Ende-verschlüsselt und müssen auf der Startseite erstellt werden. Damit stellen wir sicher, dass alle denselben Schlüssel verwenden.",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117",
+  "Copy link": "Link kopieren",
+  "Invite": "Einladen",
+  "Invite to this call": "Zu diesem Anruf einladen",
+  "Link copied to clipboard": "Link in Zwischenablage kopiert",
+  "Participants": "Teilnehmende"
 }

public/locales/en-GB/app.json

@@ -36,11 +36,8 @@
   "Developer Settings": "Developer Settings",
   "Display name": "Display name",
   "Element Call Home": "Element Call Home",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call is temporarily not end-to-end encrypted while we test scalability.",
-  "Enable end-to-end encryption (password protected calls)": "Enable end-to-end encryption (password protected calls)",
   "Encrypted": "Encrypted",
   "End call": "End call",
-  "End-to-end encryption isn't supported on your browser.": "End-to-end encryption isn't supported on your browser.",
   "Exit full screen": "Exit full screen",
   "Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
   "Feedback": "Feedback",

public/locales/es/app.json

@@ -71,7 +71,6 @@
   "How did it go?": "¿Cómo ha ido?",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Este sitio está protegido por ReCAPTCHA y se aplican la <2>Política de Privacidad</2> y los <6>Términos de Servicio de Google.<9></9>Al hacer clic en \"Registrar\", aceptas nuestro <12>Contrato de Licencia de Usuario Final (CLUF)</12>",
   "Show connection stats": "Mostrar estadísticas de conexión",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call no está encriptado de extremo a extremo de manera temporal mientras probamos la escalabilidad del servicio.",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Al hacer clic en \"Comenzar\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
   "Thanks, we received your feedback!": "¡Gracias, hemos recibido tus comentarios!",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si tienes algún problema o simplemente quieres darnos tu opinión, por favor envíanos una breve descripción.",

public/locales/et/app.json

@@ -83,14 +83,11 @@
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klõpsides „Jätka“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klõpsides „Liitu kõnega kohe“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Selles saidis on kasutusel ReCAPTCHA ja kehtivad Google'i <2>Privaatsuspoliitika</2> ning <6>Teenusetingimused</6>.<9></9>Klõpsides „Registreeru“, sa nõustud meie <12>Lõppkasutaja litsentsilepingu (EULA) tingimustega</12>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Seni kuni me testime skaleeritavust, siis Element Call ajutiselt pole läbivalt krüptitud.",
   "Connectivity to the server has been lost.": "Võrguühendus serveriga on katkenud.",
   "Retry sending logs": "Proovi uuesti logisid saata",
   "You were disconnected from the call": "Sinu ühendus kõnega katkes",
   "Reconnect": "Ühenda uuesti",
   "Thanks!": "Tänud!",
-  "End-to-end encryption isn't supported on your browser.": "Sinu brauser ei toeta läbivat krüptimist.",
-  "Enable end-to-end encryption (password protected calls)": "Võta kasutusele läbiv krüptimine (salasõnaga kaitstud kõned)",
   "Encrypted": "Krüptitud",
   "End call": "Lõpeta kõne",
   "Grid": "Ruudustik",

public/locales/fr/app.json

@@ -83,14 +83,11 @@
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "En cliquant sur « Rejoindre l’appel maintenant », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "En cliquant sur « Commencer », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Ce site est protégé par ReCAPTCHA, la <2>politique de confidentialité</2> et les <6>conditions d’utilisation</6> de Google s’appliquent.<9></9>En cliquant sur « S’enregistrer » vous acceptez également notre <12>Contrat de Licence Utilisateur Final (CLUF)</12>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call n’est temporairement plus chiffré de bout en bout le temps de tester l’extensibilité.",
   "Reconnect": "Se reconnecter",
   "Retry sending logs": "Réessayer d’envoyer les journaux",
   "Thanks!": "Merci !",
   "You were disconnected from the call": "Vous avez été déconnecté de l’appel",
   "Connectivity to the server has been lost.": "La connexion avec le serveur a été perdue.",
-  "End-to-end encryption isn't supported on your browser.": "Le chiffrement de bout-en-bout n’est pas pris en charge par votre navigateur.",
-  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Chiffré",
   "End call": "Terminer l’appel",

public/locales/id/app.json

@@ -83,10 +83,7 @@
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Dengan mengeklik \"Bergabung\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Situs ini dilindungi oleh reCAPTCHA dan <2>Kebijakan Privasi</2> dan <6>Ketentuan Layanan</6> Google berlaku.<9></9>Dengan mengeklik \"Daftar\", Anda menyetujui <12>Perjanjian Lisensi Pengguna Akhir (EULA)</12> kami",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2> kami",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call sementara tidak dienkripsi secara ujung ke ujung selagi kami menguji skalabilitas.",
   "Connectivity to the server has been lost.": "Koneksi ke server telah hilang.",
-  "Enable end-to-end encryption (password protected calls)": "Aktifkan enkripsi ujung ke ujung (panggilan terlindungi oleh kata sandi)",
-  "End-to-end encryption isn't supported on your browser.": "Enkripsi ujung ke ujung tidak didukung di peramban Anda.",
   "Retry sending logs": "Kirim ulang catatan",
   "You were disconnected from the call": "Anda terputus dari panggilan",
   "Reconnect": "Hubungkan ulang",

public/locales/it/app.json

@@ -23,9 +23,8 @@
   "Debug log request": "Richiesta registro di debug",
   "Developer": "Sviluppatore",
   "Developer Settings": "Impostazioni per sviluppatori",
-  "Display name": "Nome da mostrare",
+  "Display name": "Il tuo nome",
   "Element Call Home": "Inizio di Element Call",
-  "Enable end-to-end encryption (password protected calls)": "Attiva crittografia end-to-end (chiamate protette da password)",
   "Encrypted": "Cifrata",
   "End call": "Termina chiamata",
   "Exit full screen": "Esci da schermo intero",
@@ -92,12 +91,10 @@
   "{{displayName}}, your call has ended.": "{{displayName}}, la chiamata è terminata.",
   "<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.": "<0></0><1></1>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa.",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Ti va di terminare impostando una password per mantenere il profilo?</0><1>Potrai mantenere il tuo nome e impostare un avatar da usare in chiamate future</1>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call temporaneamente non è cifrato end-to-end mentre proviamo la scalabilità.",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Se stai riscontrando problemi o semplicemente vuoi dare un'opinione, inviaci una breve descrizione qua sotto.",
   "Not now, return to home screen": "Non ora, torna alla schermata principale",
   "Submitting…": "Invio…",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Un altro utente in questa chiamata sta avendo problemi. Per diagnosticare meglio questi problemi, vorremmo raccogliere un registro di debug.",
-  "End-to-end encryption isn't supported on your browser.": "La crittografia end-to-end non è supportata nel tuo browser.",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Cliccando \"Entra in chiamata ora\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
   "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>.": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<5>informativa sui cookie</5>.",
   "You": "Tu",

public/locales/lv/app.json

@@ -29,9 +29,6 @@
   "Go": "Aiziet",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
   "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>.": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call īslaicīgi nav pilnīgi šifrēts, kamēr mēs pārbaudām mērogojamību.",
-  "Enable end-to-end encryption (password protected calls)": "Iespējot pilnīgu šifrēšanu (ar paroli aizsargāti zvani)",
-  "End-to-end encryption isn't supported on your browser.": "Šajā pārlūkā nav nodrošināta pilnīga šifrēšana.",
   "{{displayName}} is presenting": "{{displayName}} uzstājas",
   "{{displayName}}, your call has ended.": "{{displayName}}, Tavs zvans ir beidzies.",
   "<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.": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās.",

public/locales/pl/app.json

@@ -80,17 +80,14 @@
   "How did it go?": "Jak poszło?",
   "{{displayName}} is presenting": "{{displayName}} prezentuje",
   "Show connection stats": "Pokaż statystyki połączenia",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Usługa Element Call tymczasowo nie jest szyfrowana end-to-end w trakcie, gdy testujemy możliwość jej rozszerzenia.",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikając \"Przejdź\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Ta witryna jest chroniona przez ReCAPTCHA, więc obowiązują <2>Polityka prywatności</2> i <6>Warunki usług</6> Google. Klikając \"Zarejestruj\", zgadzasz się na naszą <12>Umowę licencyjną (EULA)</12>",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
-  "End-to-end encryption isn't supported on your browser.": "Szyfrowanie end-to-end nie jest wspierane przez Twoją przeglądarkę.",
   "Retry sending logs": "Wyślij logi ponownie",
   "Thanks!": "Dziękujemy!",
   "You were disconnected from the call": "Rozłączono Cię z połączenia",
   "Connectivity to the server has been lost.": "Utracono połączenie z serwerem.",
   "Reconnect": "Połącz ponownie",
-  "Enable end-to-end encryption (password protected calls)": "Włącz szyfrowanie end-to-end (połączenia chronione hasłem)",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Szyfrowane",
   "End call": "Zakończ połączenie",
@@ -114,5 +111,10 @@
   "Call not found": "Nie znaleziono połączenia",
   "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.": "Połączenia są teraz szyfrowane end-to-end i muszą zostać utworzone ze strony głównej. Pomaga to upewnić się, że każdy korzysta z tego samego klucza szyfrującego.",
   "You": "Ty",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Twoja przeglądarka nie wspiera szyfrowania end-to-end. Wspierane przeglądarki to Chrome, Safari, Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Twoja przeglądarka nie wspiera szyfrowania end-to-end. Wspierane przeglądarki to Chrome, Safari, Firefox >=117",
+  "Invite": "Zaproś",
+  "Link copied to clipboard": "Skopiowano link do schowka",
+  "Participants": "Uczestnicy",
+  "Copy link": "Kopiuj link",
+  "Invite to this call": "Zaproś do połączenia"
 }

public/locales/sk/app.json

@@ -83,14 +83,11 @@
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Kliknutím na \"Pripojiť sa k hovoru teraz\" súhlasíte s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Kliknutím na tlačidlo \"Prejsť\" vyjadrujete súhlas s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Táto stránka je chránená systémom ReCAPTCHA a platia na ňu <2>Pravidlá ochrany osobných údajov spoločnosti Google</2> a <6>Podmienky poskytovania služieb</6>.<9></9>Kliknutím na tlačidlo \"Registrovať sa\" súhlasíte s našou <12>Licenčnou zmluvou s koncovým používateľom (EULA)</12>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call nie je dočasne šifrovaný, kým testujeme škálovateľnosť.",
   "Connectivity to the server has been lost.": "Spojenie so serverom sa stratilo.",
   "Retry sending logs": "Opakovať odoslanie záznamov",
   "Reconnect": "Znovu pripojiť",
   "Thanks!": "Ďakujeme!",
   "You were disconnected from the call": "Boli ste odpojení z hovoru",
-  "Enable end-to-end encryption (password protected calls)": "Povoliť end-to-end šifrovanie (hovory chránené heslom)",
-  "End-to-end encryption isn't supported on your browser.": "End-to-end šifrovanie nie je vo vašom prehliadači podporované.",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Šifrované",
   "End call": "Ukončiť hovor",

public/locales/sq/app.json

@@ -0,0 +1 @@
+{}

public/locales/sv/app.json

@@ -1 +1,8 @@
-{}
+{
+  "{{count}} stars|one": "{{count}} stjärna",
+  "{{count}} stars|other": "{{count}} stjärnor",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{displayName}} is presenting": "{{displayName}} presenterar",
+  "{{displayName}}, your call has ended.": "{{displayName}}, ditt samtal har avslutats."
+}

public/locales/uk/app.json

@@ -83,14 +83,11 @@
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Натискаючи \"Далі\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Натискаючи \"Приєднатися до виклику зараз\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "Цей сайт захищений ReCAPTCHA і до нього застосовується <2>Політика приватності</2> і <6>Умови надання послуг</6> Google.<9></9>Натискаючи \"Зареєструватися\", ви погоджуєтеся з нашою <12>Ліцензійною угодою з кінцевим користувачем (EULA)</12>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Виклики Element тимчасово не захищаються наскрізним шифруванням, поки ми тестуємо масштабованість.",
   "Connectivity to the server has been lost.": "Втрачено зв'язок з сервером.",
   "Reconnect": "Під'єднати повторно",
   "Retry sending logs": "Повторити надсилання журналів",
   "You were disconnected from the call": "Вас від'єднано від виклику",
   "Thanks!": "Дякуємо!",
-  "Enable end-to-end encryption (password protected calls)": "Увімкнути наскрізне шифрування (захищені паролем виклики)",
-  "End-to-end encryption isn't supported on your browser.": "Наскрізне шифрування не підтримується вашим переглядачем.",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Зашифровано",
   "Microphone on": "Мікрофон увімкнено",
@@ -114,5 +111,10 @@
   "Back to recents": "Повернутися до недавніх",
   "Call not found": "Виклик не знайдено",
   "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.": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування.",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117",
+  "Invite": "Запросити",
+  "Link copied to clipboard": "Посилання скопійовано до буфера обміну",
+  "Participants": "Учасники",
+  "Copy link": "Скопіювати посилання",
+  "Invite to this call": "Запросити до цього виклику"
 }

public/locales/zh-Hans/app.json

@@ -26,7 +26,7 @@
   "Remove": "移除",
   "Registering…": "正在注册……",
   "Register": "注册",
-  "Recaptcha not loaded": "验证器未载入",
+  "Recaptcha not loaded": "recaptcha未加载",
   "Recaptcha dismissed": "人机验证失败",
   "Profile": "个人信息",
   "Passwords must match": "密码必须匹配",
@@ -49,10 +49,10 @@
   "Go": "开始",
   "Full screen": "全屏",
   "Exit full screen": "退出全屏",
-  "Element Call Home": "Element 呼叫 主页",
+  "Element Call Home": "Element Call主页",
   "Display name": "显示名称",
   "Developer": "开发者",
-  "Debug log request": "请求调试日志",
+  "Debug log request": "调试日志请求",
   "Create account": "创建账户",
   "Copy": "复制",
   "Copied!": "已复制！",
@@ -65,15 +65,15 @@
   "Encrypted": "已加密",
   "End call": "通话结束",
   "Grid": "网格",
-  "Microphone off": "关闭麦克风",
-  "Microphone on": "开启麦克风",
+  "Microphone off": "麦克风关闭",
+  "Microphone on": "麦克风开启",
   "Not encrypted": "未加密",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
   "Sharing screen": "屏幕共享",
   "You": "你",
   "Continue in browser": "在浏览器中继续",
-  "Mute microphone": "麦克风静音",
+  "Mute microphone": "静音麦克风",
   "Name of call": "通话名称",
   "Open in the app": "在应用中打开",
   "Ready to join?": "准备好加入了吗？",
@@ -87,7 +87,7 @@
   "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.": "现在，通话是端对端加密的，需要从主页创建。这有助于确保每个人都使用相同的加密密钥。",
   "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的浏览器不支持媒体端对端加密。支持的浏览器有 Chrome、Safari、Firefox >=117",
   "{{count}} stars|other": "{{count}} 个星",
-  "{{displayName}} is presenting": "{{displayName}} 正在显示",
+  "{{displayName}} is presenting": "{{displayName}}正在展示",
   "{{displayName}}, your call has ended.": "{{displayName}}，通话已结束。",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>提交日志以帮助我们修复问题。</0>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>我们需要您的反馈以提升用户体验。</0>",
@@ -95,7 +95,6 @@
   "Expose developer settings in the settings window.": "在设置中显示开发者设置。",
   "Show connection stats": "显示连接统计信息",
   "Thanks, we received your feedback!": "谢谢，我们收到了反馈！",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "在我们测试扩展性时，Element 通话 暂时不进行端对端加密。",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "点击 \"开始\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "点击 \"加入通话\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
   "{{count}} stars|one": "{{count}} 个星",
@@ -105,9 +104,7 @@
   "Developer Settings": "开发者设置",
   "Feedback": "反馈",
   "Submit": "提交",
-  "Reconnect": "断线重连",
-  "Enable end-to-end encryption (password protected calls)": "启用端对端加密（有密码保护的通话）",
-  "End-to-end encryption isn't supported on your browser.": "您的浏览器不支持端对端加密。",
+  "Reconnect": "重新连接",
   "How did it go?": "进展如何？",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "如果遇到问题或想提供一些反馈意见，请在下面向我们发送简短描述。",
   "Retry sending logs": "重传日志",

public/locales/zh-Hant/app.json

@@ -83,14 +83,11 @@
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "點擊「前往」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "點擊「立刻加入通話」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "此網站被 ReCAPTCHA 保護，並適用 Google 的<2>隱私權政策</2>與<6>服務條款</6>。<9></9>點擊「註冊」即表示您同意我們的<12>終端使用者授權協議 (EULA)</12>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "在我們測試可擴展性時，Element Call 暫時未進行端到端加密。",
   "Connectivity to the server has been lost.": "到伺服器的連線已遺失。",
   "Reconnect": "重新連線",
   "Retry sending logs": "重試傳送紀錄檔",
   "Thanks!": "感謝！",
   "You were disconnected from the call": "您已從通話斷線",
-  "Enable end-to-end encryption (password protected calls)": "啟用端到端加密（密碼保護通話）",
-  "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "已加密",
@@ -114,5 +111,10 @@
   "Unmute microphone": "將麥克風取消靜音",
   "Call not found": "找不到通話",
   "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.": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117",
+  "Copy link": "複製連結",
+  "Invite": "邀請",
+  "Invite to this call": "邀請到此通話",
+  "Link copied to clipboard": "連結已複製到剪貼簿",
+  "Participants": "參與者"
 }

src/App.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Suspense, useEffect, useState } from "react";
+import { FC, Suspense, useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
   Switch,
@@ -41,7 +41,7 @@ interface BackgroundProviderProps {
   children: JSX.Element;
 }
 
-const BackgroundProvider = ({ children }: BackgroundProviderProps) => {
+const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
 
   useEffect(() => {
@@ -61,7 +61,7 @@ interface AppProps {
   history: History;
 }
 
-export default function App({ history }: AppProps) {
+export const App: FC<AppProps> = ({ history }) => {
   const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
@@ -109,4 +109,4 @@ export default function App({ history }: AppProps) {
       </BackgroundProvider>
     </Router>
   );
-}
+};

src/Avatar.tsx

@@ -58,7 +58,7 @@ export const Avatar: FC<Props> = ({
       Object.values(Size).includes(size as Size)
         ? sizes.get(size as Size)
         : (size as number),
-    [size]
+    [size],
   );
 
   const resolvedSrc = useMemo(() => {

src/Banner.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 
 import styles from "./Banner.module.css";
 
@@ -22,6 +22,6 @@ interface Props {
   children: ReactNode;
 }
 
-export const Banner = ({ children }: Props) => {
+export const Banner: FC<Props> = ({ children }) => {
   return <div className={styles.banner}>{children}</div>;
 };

src/ClientContext.tsx

@@ -82,7 +82,8 @@ export type SetClientParams = {
 
 const ClientContext = createContext<ClientState | undefined>(undefined);
 
-export const useClientState = () => useContext(ClientContext);
+export const useClientState = (): ClientState | undefined =>
+  useContext(ClientContext);
 
 export function useClient(): {
   client?: MatrixClient;
@@ -189,7 +190,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
           user: session.user_id,
           password: session.tempPassword,
         },
-        password
+        password,
       );
 
       saveSession({ ...session, passwordlessUser: false });
@@ -199,7 +200,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
         passwordlessUser: false,
       });
     },
-    [initClientState?.client]
+    [initClientState?.client],
   );
 
   const setClient = useCallback(
@@ -221,7 +222,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
         setInitClientState(null);
       }
     },
-    [initClientState?.client]
+    [initClientState?.client],
   );
 
   const logout = useCallback(async () => {
@@ -249,7 +250,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   }, []);
 
   const [alreadyOpenedErr, setAlreadyOpenedErr] = useState<Error | undefined>(
-    undefined
+    undefined,
   );
   useEventTarget(
     loadChannel,
@@ -257,9 +258,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     useCallback(() => {
       initClientState?.client.stopClient();
       setAlreadyOpenedErr(
-        translatedError("This application has been opened in another tab.", t)
+        translatedError("This application has been opened in another tab.", t),
       );
-    }, [initClientState?.client, setAlreadyOpenedErr, t])
+    }, [initClientState?.client, setAlreadyOpenedErr, t]),
   );
 
   const [isDisconnected, setIsDisconnected] = useState(false);
@@ -300,7 +301,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     (state: SyncState, _old: SyncState | null, data?: ISyncStateData) => {
       setIsDisconnected(clientIsDisconnected(state, data));
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -386,7 +387,7 @@ async function loadClient(): Promise<InitResult | null> {
             logger.warn(
               "The previous session was lost, and we couldn't log it out, " +
                 err +
-                "either"
+                "either",
             );
           }
         }
@@ -408,8 +409,8 @@ export interface Session {
   tempPassword?: string;
 }
 
-const clearSession = () => localStorage.removeItem("matrix-auth-store");
-const saveSession = (s: Session) =>
+const clearSession = (): void => localStorage.removeItem("matrix-auth-store");
+const saveSession = (s: Session): void =>
   localStorage.setItem("matrix-auth-store", JSON.stringify(s));
 const loadSession = (): Session | undefined => {
   const data = localStorage.getItem("matrix-auth-store");
@@ -422,5 +423,6 @@ const loadSession = (): Session | undefined => {
 
 const clientIsDisconnected = (
   syncState: SyncState,
-  syncData?: ISyncStateData
-) => syncState === "ERROR" && syncData?.error?.name === "ConnectionError";
+  syncData?: ISyncStateData,
+): boolean =>
+  syncState === "ERROR" && syncData?.error?.name === "ConnectionError";

src/DisconnectedBanner.tsx

@@ -15,22 +15,22 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import { HTMLAttributes, ReactNode } from "react";
+import { FC, HTMLAttributes, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./DisconnectedBanner.module.css";
 import { ValidClientState, useClientState } from "./ClientContext";
 
-interface DisconnectedBannerProps extends HTMLAttributes<HTMLElement> {
+interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
   className?: string;
 }
 
-export function DisconnectedBanner({
+export const DisconnectedBanner: FC<Props> = ({
   children,
   className,
   ...rest
-}: DisconnectedBannerProps) {
+}) => {
   const { t } = useTranslation();
   const clientState = useClientState();
   let shouldShowBanner = false;
@@ -50,4 +50,4 @@ export function DisconnectedBanner({
       )}
     </>
   );
-}
+};

src/E2EEBanner.tsx

@@ -1,39 +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 { Trans } from "react-i18next";
-
-import { Banner } from "./Banner";
-import styles from "./E2EEBanner.module.css";
-import LockOffIcon from "./icons/LockOff.svg?react";
-import { useEnableE2EE } from "./settings/useSetting";
-
-export const E2EEBanner = () => {
-  const [e2eeEnabled] = useEnableE2EE();
-  if (e2eeEnabled) return null;
-
-  return (
-    <Banner>
-      <div className={styles.e2eeBanner}>
-        <LockOffIcon width={24} height={24} />
-        <Trans>
-          Element Call is temporarily not end-to-end encrypted while we test
-          scalability.
-        </Trans>
-      </div>
-    </Banner>
-  );
-};

src/FullScreenView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ReactNode, useCallback, useEffect } from "react";
+import { FC, ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
@@ -33,7 +33,10 @@ interface FullScreenViewProps {
   children: ReactNode;
 }
 
-export function FullScreenView({ className, children }: FullScreenViewProps) {
+export const FullScreenView: FC<FullScreenViewProps> = ({
+  className,
+  children,
+}) => {
   return (
     <div className={classNames(styles.page, className)}>
       <Header>
@@ -47,13 +50,13 @@ export function FullScreenView({ className, children }: FullScreenViewProps) {
       </div>
     </div>
   );
-}
+};
 
 interface ErrorViewProps {
   error: Error;
 }
 
-export function ErrorView({ error }: ErrorViewProps) {
+export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
   const location = useLocation();
   const { t } = useTranslation();
 
@@ -96,9 +99,9 @@ export function ErrorView({ error }: ErrorViewProps) {
       )}
     </FullScreenView>
   );
-}
+};
 
-export function CrashView() {
+export const CrashView: FC = () => {
   const { t } = useTranslation();
 
   const onReload = useCallback(() => {
@@ -127,9 +130,9 @@ export function CrashView() {
       </Button>
     </FullScreenView>
   );
-}
+};
 
-export function LoadingView() {
+export const LoadingView: FC = () => {
   const { t } = useTranslation();
 
   return (
@@ -137,4 +140,4 @@ export function LoadingView() {
       <h1>{t("Loading…")}</h1>
     </FullScreenView>
   );
-}
+};

src/Glass.module.css

@@ -1,31 +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.
-*/
-
-.glass {
-  border-radius: 36px;
-  padding: 11px;
-  border: 1px solid var(--cpd-color-alpha-gray-400);
-  background: var(--cpd-color-alpha-gray-400);
-  backdrop-filter: blur(10px);
-}
-
-.glass > * {
-  border-radius: 24px;
-}
-
-.glass.frosted {
-  backdrop-filter: blur(20px);
-}

src/Glass.tsx

@@ -1,52 +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 {
-  ComponentPropsWithoutRef,
-  ReactNode,
-  forwardRef,
-  Children,
-} from "react";
-import classNames from "classnames";
-
-import styles from "./Glass.module.css";
-
-interface Props extends ComponentPropsWithoutRef<"div"> {
-  children: ReactNode;
-  className?: string;
-  /**
-   * Increases the blur effect.
-   * @default false
-   */
-  frosted?: boolean;
-}
-
-/**
- * Adds a border of glass around a child component.
- */
-export const Glass = forwardRef<HTMLDivElement, Props>(
-  ({ frosted = false, children, className, ...rest }, ref) => (
-    <div
-      ref={ref}
-      className={classNames(className, styles.glass, {
-        [styles.frosted]: frosted,
-      })}
-      {...rest}
-    >
-      {Children.only(children)}
-    </div>
-  )
-);

src/Header.tsx

@@ -32,13 +32,13 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
   className?: string;
 }
 
-export function Header({ children, className, ...rest }: HeaderProps) {
+export const Header: FC<HeaderProps> = ({ children, className, ...rest }) => {
   return (
     <header className={classNames(styles.header, className)} {...rest}>
       {children}
     </header>
   );
-}
+};
 
 interface LeftNavProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
@@ -46,26 +46,26 @@ interface LeftNavProps extends HTMLAttributes<HTMLElement> {
   hideMobile?: boolean;
 }
 
-export function LeftNav({
+export const LeftNav: FC<LeftNavProps> = ({
   children,
   className,
   hideMobile,
   ...rest
-}: LeftNavProps) {
+}) => {
   return (
     <div
       className={classNames(
         styles.nav,
         styles.leftNav,
         { [styles.hideMobile]: hideMobile },
-        className
+        className,
       )}
       {...rest}
     >
       {children}
     </div>
   );
-}
+};
 
 interface RightNavProps extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
@@ -73,32 +73,32 @@ interface RightNavProps extends HTMLAttributes<HTMLElement> {
   hideMobile?: boolean;
 }
 
-export function RightNav({
+export const RightNav: FC<RightNavProps> = ({
   children,
   className,
   hideMobile,
   ...rest
-}: RightNavProps) {
+}) => {
   return (
     <div
       className={classNames(
         styles.nav,
         styles.rightNav,
         { [styles.hideMobile]: hideMobile },
-        className
+        className,
       )}
       {...rest}
     >
       {children}
     </div>
   );
-}
+};
 
 interface HeaderLogoProps {
   className?: string;
 }
 
-export function HeaderLogo({ className }: HeaderLogoProps) {
+export const HeaderLogo: FC<HeaderLogoProps> = ({ className }) => {
   const { t } = useTranslation();
 
   return (
@@ -110,7 +110,7 @@ export function HeaderLogo({ className }: HeaderLogoProps) {
       <Logo />
     </Link>
   );
-}
+};
 
 interface RoomHeaderInfoProps {
   id: string;

src/LazyEventEmitter.ts

@@ -63,7 +63,7 @@ export class LazyEventEmitter extends EventEmitter {
   public addListener(
     type: string | symbol,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    listener: (...args: any[]) => void
+    listener: (...args: any[]) => void,
   ): this {
     return this.on(type, listener);
   }

src/ListBox.tsx

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MutableRefObject, PointerEvent, useCallback, useRef } from "react";
+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";
@@ -35,7 +41,7 @@ export function ListBox<T>({
   className,
   listBoxRef,
   ...rest
-}: ListBoxProps<T>) {
+}: ListBoxProps<T>): ReactNode {
   const ref = useRef<HTMLUListElement>(null);
 
   const listRef = listBoxRef ?? ref;
@@ -66,12 +72,12 @@ interface OptionProps<T> {
   item: Node<T>;
 }
 
-function Option<T>({ item, state, className }: OptionProps<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
+    ref,
   );
 
   // Hack: remove the onPointerUp event handler and re-wire it to
@@ -91,7 +97,7 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
       // @ts-ignore
       origPointerUp(e as unknown as PointerEvent<HTMLElement>);
     },
-    [origPointerUp]
+    [origPointerUp],
   );
 
   return (

src/Menu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Key, useRef, useState } from "react";
+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";
@@ -37,7 +37,7 @@ export function Menu<T extends object>({
   onClose,
   label,
   ...rest
-}: MenuProps<T>) {
+}: MenuProps<T>): ReactNode {
   const state = useTreeState<T>({ ...rest, selectionMode: "none" });
   const menuRef = useRef(null);
   const { menuProps } = useMenu<T>(rest, state, menuRef);
@@ -68,7 +68,12 @@ interface MenuItemProps<T> {
   onClose: () => void;
 }
 
-function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
+function MenuItem<T>({
+  item,
+  state,
+  onAction,
+  onClose,
+}: MenuItemProps<T>): ReactNode {
   const ref = useRef(null);
   const { menuItemProps } = useMenuItem(
     {
@@ -77,7 +82,7 @@ function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
       onClose,
     },
     state,
-    ref
+    ref,
   );
 
   const [isFocused, setFocused] = useState(false);

src/Modal.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ReactNode, useCallback } from "react";
+import { FC, ReactNode, useCallback } from "react";
 import { AriaDialogProps } from "@react-types/dialog";
 import { useTranslation } from "react-i18next";
 import {
@@ -29,15 +29,14 @@ 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 classNames from "classnames";
-import { Heading } from "@vector-im/compound-web";
+import { Heading, Glass } from "@vector-im/compound-web";
 
 import styles from "./Modal.module.css";
 import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";
-import { Glass } from "./Glass";
 
 // TODO: Support tabs
-export interface ModalProps extends AriaDialogProps {
+export interface Props extends AriaDialogProps {
   title: string;
   children: ReactNode;
   className?: string;
@@ -59,14 +58,14 @@ export interface ModalProps extends AriaDialogProps {
  * A modal, taking the form of a drawer / bottom sheet on touchscreen devices,
  * and a dialog box on desktop.
  */
-export function Modal({
+export const Modal: FC<Props> = ({
   title,
   children,
   className,
   open,
   onDismiss,
   ...rest
-}: ModalProps) {
+}) => {
   const { t } = useTranslation();
   // Empirically, Chrome on Android can end up not matching (hover: none), but
   // still matching (pointer: coarse) :/
@@ -75,7 +74,7 @@ export function Modal({
     (open: boolean) => {
       if (!open) onDismiss?.();
     },
-    [onDismiss]
+    [onDismiss],
   );
 
   if (touchscreen) {
@@ -92,7 +91,7 @@ export function Modal({
               className,
               overlayStyles.overlay,
               styles.modal,
-              styles.drawer
+              styles.drawer,
             )}
             {...rest}
           >
@@ -118,13 +117,12 @@ export function Modal({
           />
           <DialogContent asChild {...rest}>
             <Glass
-              frosted
               className={classNames(
                 className,
                 overlayStyles.overlay,
                 overlayStyles.animate,
                 styles.modal,
-                styles.dialog
+                styles.dialog,
               )}
             >
               <div className={styles.content}>
@@ -152,4 +150,4 @@ export function Modal({
       </DialogRoot>
     );
   }
-}
+};

src/Toast.tsx

@@ -70,7 +70,7 @@ export const Toast: FC<Props> = ({
     (open: boolean) => {
       if (!open) onDismiss();
     },
-    [onDismiss]
+    [onDismiss],
   );
 
   useEffect(() => {
@@ -91,7 +91,7 @@ export const Toast: FC<Props> = ({
             className={classNames(
               overlayStyles.overlay,
               overlayStyles.animate,
-              styles.toast
+              styles.toast,
             )}
           >
             <DialogTitle asChild>

src/Tooltip.tsx

@@ -43,7 +43,7 @@ interface TooltipProps {
 const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   (
     { state, className, children, ...rest }: TooltipProps,
-    ref: ForwardedRef<HTMLDivElement>
+    ref: ForwardedRef<HTMLDivElement>,
   ) => {
     const { tooltipProps } = useTooltip(rest, state);
 
@@ -56,7 +56,7 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 interface TooltipTriggerProps {
@@ -69,7 +69,7 @@ interface TooltipTriggerProps {
 export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
   (
     { children, placement, tooltip, ...rest }: TooltipTriggerProps,
-    ref: ForwardedRef<HTMLElement>
+    ref: ForwardedRef<HTMLElement>,
   ) => {
     const tooltipTriggerProps = { delay: 250, ...rest };
     const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
@@ -78,7 +78,7 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
     const { triggerProps, tooltipProps } = useTooltipTrigger(
       tooltipTriggerProps,
       tooltipState,
-      triggerRef
+      triggerRef,
     );
 
     const { overlayProps } = useOverlayPosition({
@@ -94,7 +94,7 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
         <children.type
           {...mergeProps<typeof children.props | typeof rest>(
             children.props,
-            rest
+            rest,
           )}
         />
         {tooltipState.isOpen && (
@@ -110,5 +110,5 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
         )}
       </FocusableProvider>
     );
-  }
+  },
 );

src/TranslatedError.ts

@@ -37,5 +37,7 @@ class TranslatedErrorImpl extends TranslatedError {}
 
 // i18next-parser can't detect calls to a constructor, so we expose a bare
 // function instead
-export const translatedError = (messageKey: string, t: typeof i18n.t) =>
-  new TranslatedErrorImpl(messageKey, t);
+export const translatedError = (
+  messageKey: string,
+  t: typeof i18n.t,
+): TranslatedError => new TranslatedErrorImpl(messageKey, t);

src/UrlParams.ts

@@ -33,6 +33,9 @@ interface RoomIdentifier {
 // clearer what each flag means, and helps us avoid coupling Element Call's
 // behavior to the needs of specific consumers.
 interface UrlParams {
+  // Widget api related params
+  widgetId: string | null;
+  parentUrl: string | null;
   /**
    * Anything about what room we're pointed to should be from useRoomIdentifier which
    * parses the path and resolves alias with respect to the default server name, however
@@ -59,6 +62,10 @@ interface UrlParams {
    * Whether to hide the room header when in a call.
    */
   hideHeader: boolean;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
   /**
    * Whether to hide the screen-sharing button.
    */
@@ -108,6 +115,16 @@ interface UrlParams {
    * E2EE password
    */
   password: string | null;
+  /**
+   * Whether we the app should use per participant keys for E2EE.
+   */
+  perParticipantE2EE: boolean;
+  /**
+   * Setting this flag skips the lobby and brings you in the call directly.
+   * In the widget this can be combined with preload to pass the device settings
+   * with the join widget action.
+   */
+  skipLobby: boolean;
 }
 
 // This is here as a stopgap, but what would be far nicer is a function that
@@ -116,17 +133,17 @@ interface UrlParams {
 // file.
 export function editFragmentQuery(
   hash: string,
-  edit: (params: URLSearchParams) => URLSearchParams
+  edit: (params: URLSearchParams) => URLSearchParams,
 ): string {
   const fragmentQueryStart = hash.indexOf("?");
   const fragmentParams = edit(
     new URLSearchParams(
-      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
-    )
+      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart),
+    ),
   );
   return `${hash.substring(
     0,
-    fragmentQueryStart
+    fragmentQueryStart,
   )}?${fragmentParams.toString()}`;
 }
 
@@ -134,30 +151,30 @@ class ParamParser {
   private fragmentParams: URLSearchParams;
   private queryParams: URLSearchParams;
 
-  constructor(search: string, hash: string) {
+  public constructor(search: string, hash: string) {
     this.queryParams = new URLSearchParams(search);
 
     const fragmentQueryStart = hash.indexOf("?");
     this.fragmentParams = new URLSearchParams(
-      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
+      fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart),
     );
   }
 
   // Normally, URL params should be encoded in the fragment so as to avoid
   // leaking them to the server. However, we also check the normal query
   // string for backwards compatibility with versions that only used that.
-  getParam(name: string): string | null {
+  public getParam(name: string): string | null {
     return this.fragmentParams.get(name) ?? this.queryParams.get(name);
   }
 
-  getAllParams(name: string): string[] {
+  public getAllParams(name: string): string[] {
     return [
       ...this.fragmentParams.getAll(name),
       ...this.queryParams.getAll(name),
     ];
   }
 
-  getFlagParam(name: string, defaultValue = false): boolean {
+  public getFlagParam(name: string, defaultValue = false): boolean {
     const param = this.getParam(name);
     return param === null ? defaultValue : param !== "false";
   }
@@ -171,13 +188,16 @@ class ParamParser {
  */
 export const getUrlParams = (
   search = window.location.search,
-  hash = window.location.hash
+  hash = window.location.hash,
 ): UrlParams => {
   const parser = new ParamParser(search, hash);
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
   return {
+    widgetId: parser.getParam("widgetId"),
+    parentUrl: parser.getParam("parentUrl"),
+
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
@@ -189,8 +209,9 @@ export const getUrlParams = (
     appPrompt: parser.getFlagParam("appPrompt", true),
     preload: parser.getFlagParam("preload"),
     hideHeader: parser.getFlagParam("hideHeader"),
+    showControls: parser.getFlagParam("showControls", true),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),
-    e2eEnabled: parser.getFlagParam("enableE2e", true),
+    e2eEnabled: parser.getFlagParam("enableE2EE", true),
     userId: parser.getParam("userId"),
     displayName: parser.getParam("displayName"),
     deviceId: parser.getParam("deviceId"),
@@ -200,6 +221,8 @@ export const getUrlParams = (
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     analyticsID: parser.getParam("analyticsID"),
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
+    perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
+    skipLobby: parser.getFlagParam("skipLobby"),
   };
 };
 
@@ -215,36 +238,42 @@ export const useUrlParams = (): UrlParams => {
 export function getRoomIdentifierFromUrl(
   pathname: string,
   search: string,
-  hash: string
+  hash: string,
 ): RoomIdentifier {
   let roomAlias: string | null = null;
+  pathname = pathname.substring(1); // Strip the "/"
+  const pathComponents = pathname.split("/");
+  const pathHasRoom = pathComponents[0] == "room";
+  const hasRoomAlias = pathComponents.length > 1;
 
-  // Here we handle the beginning of the alias and make sure it starts with a "#"
+  // What type is our url: roomAlias in hash, room alias as the search path, roomAlias after /room/
   if (hash === "" || hash.startsWith("#?")) {
-    roomAlias = pathname.substring(1); // Strip the "/"
-
-    // Delete "/room/", if present
-    if (roomAlias.startsWith("room/")) {
-      roomAlias = roomAlias.substring("room/".length);
+    if (hasRoomAlias && pathHasRoom) {
+      roomAlias = pathComponents[1];
     }
-    // Add "#", if not present
-    if (!roomAlias.startsWith("#")) {
-      roomAlias = `#${roomAlias}`;
+    if (!pathHasRoom) {
+      roomAlias = pathComponents[0];
     }
   } else {
     roomAlias = hash;
   }
 
   // Delete "?" and what comes afterwards
-  roomAlias = roomAlias.split("?")[0];
+  roomAlias = roomAlias?.split("?")[0] ?? null;
 
-  if (roomAlias.length <= 1) {
+  if (roomAlias) {
     // Make roomAlias is null, if it only is a "#"
-    roomAlias = null;
-  } else {
-    // Add server part, if not present
-    if (!roomAlias.includes(":")) {
-      roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+    if (roomAlias.length <= 1) {
+      roomAlias = null;
+    } else {
+      // Add "#", if not present
+      if (!roomAlias.startsWith("#")) {
+        roomAlias = `#${roomAlias}`;
+      }
+      // Add server part, if not present
+      if (!roomAlias.includes(":")) {
+        roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+      }
     }
   }
 
@@ -269,6 +298,6 @@ export const useRoomIdentifier = (): RoomIdentifier => {
   const { pathname, search, hash } = useLocation();
   return useMemo(
     () => getRoomIdentifierFromUrl(pathname, search, hash),
-    [pathname, search, hash]
+    [pathname, search, hash],
   );
 };

src/UserMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useMemo } from "react";
+import { FC, ReactNode, useCallback, useMemo } from "react";
 import { Item } from "@react-stately/collections";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -31,7 +31,7 @@ import LogoutIcon from "./icons/Logout.svg?react";
 import { Body } from "./typography/Typography";
 import styles from "./UserMenu.module.css";
 
-interface UserMenuProps {
+interface Props {
   preventNavigation: boolean;
   isAuthenticated: boolean;
   isPasswordlessUser: boolean;
@@ -41,7 +41,7 @@ interface UserMenuProps {
   onAction: (value: string) => void;
 }
 
-export function UserMenu({
+export const UserMenu: FC<Props> = ({
   preventNavigation,
   isAuthenticated,
   isPasswordlessUser,
@@ -49,7 +49,7 @@ export function UserMenu({
   displayName,
   avatarUrl,
   onAction,
-}: UserMenuProps) {
+}) => {
   const { t } = useTranslation();
   const location = useLocation();
 
@@ -123,7 +123,7 @@ export function UserMenu({
       </TooltipTrigger>
       {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (props: any) => (
+        (props: any): ReactNode => (
           <Menu {...props} label={t("User menu")} onAction={onAction}>
             {items.map(({ key, icon: Icon, label, dataTestid }) => (
               <Item key={key} textValue={label}>
@@ -141,4 +141,4 @@ export function UserMenu({
       }
     </PopoverMenuTrigger>
   );
-}
+};

src/UserMenuContainer.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useState } from "react";
+import { FC, useCallback, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import { useClientLegacy } from "./ClientContext";
@@ -26,7 +26,7 @@ interface Props {
   preventNavigation?: boolean;
 }
 
-export function UserMenuContainer({ preventNavigation = false }: Props) {
+export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
   const location = useLocation();
   const history = useHistory();
   const { client, logout, authenticated, passwordlessUser } = useClientLegacy();
@@ -34,7 +34,7 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
   const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const onDismissSettingsModal = useCallback(
     () => setSettingsModalOpen(false),
-    [setSettingsModalOpen]
+    [setSettingsModalOpen],
   );
 
   const [defaultSettingsTab, setDefaultSettingsTab] = useState<string>();
@@ -58,7 +58,7 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
           break;
       }
     },
-    [history, location, logout, setSettingsModalOpen]
+    [history, location, logout, setSettingsModalOpen],
   );
 
   const userName = client?.getUserIdLocalpart() ?? "";
@@ -83,4 +83,4 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
       )}
     </>
   );
-}
+};

src/analytics/AnalyticsNotice.tsx

@@ -1,3 +1,19 @@
+/*
+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 } from "react";
 import { Trans } from "react-i18next";
 

src/analytics/PosthogAnalytics.ts

@@ -117,7 +117,7 @@ export class PosthogAnalytics {
     return this.internalInstance;
   }
 
-  constructor(private readonly posthog: PostHog) {
+  private constructor(private readonly posthog: PostHog) {
     const posthogConfig: PosthogSettings = {
       project_api_key: Config.get().posthog?.api_key,
       api_host: Config.get().posthog?.api_host,
@@ -146,7 +146,7 @@ export class PosthogAnalytics {
       this.enabled = true;
     } else {
       logger.info(
-        "Posthog is not enabled because there is no api key or no host given in the config"
+        "Posthog is not enabled because there is no api key or no host given in the config",
       );
       this.enabled = false;
     }
@@ -157,7 +157,7 @@ export class PosthogAnalytics {
 
   private sanitizeProperties = (
     properties: Properties,
-    _eventName: string
+    _eventName: string,
   ): Properties => {
     // Callback from posthog to sanitize properties before sending them to the server.
     // Here we sanitize posthog's built in properties which leak PII e.g. url reporting.
@@ -183,7 +183,7 @@ export class PosthogAnalytics {
     return properties;
   };
 
-  private registerSuperProperties(properties: Properties) {
+  private registerSuperProperties(properties: Properties): void {
     if (this.enabled) {
       this.posthog.register(properties);
     }
@@ -201,8 +201,8 @@ export class PosthogAnalytics {
   private capture(
     eventName: string,
     properties: Properties,
-    options?: CaptureOptions
-  ) {
+    options?: CaptureOptions,
+  ): void {
     if (!this.enabled) {
       return;
     }
@@ -213,7 +213,7 @@ export class PosthogAnalytics {
     return this.enabled;
   }
 
-  setAnonymity(anonymity: Anonymity): void {
+  private setAnonymity(anonymity: Anonymity): void {
     // Update this.anonymity.
     // To update the anonymity typically you want to call updateAnonymityFromSettings
     // to ensure this value is in step with the user's settings.
@@ -236,7 +236,9 @@ export class PosthogAnalytics {
       .join("");
   }
 
-  private async identifyUser(analyticsIdGenerator: () => string) {
+  private async identifyUser(
+    analyticsIdGenerator: () => string,
+  ): Promise<void> {
     if (this.anonymity == Anonymity.Pseudonymous && this.enabled) {
       // Check the user's account_data for an analytics ID to use. Storing the ID in account_data allows
       // different devices to send the same ID.
@@ -258,27 +260,27 @@ export class PosthogAnalytics {
         // The above could fail due to network requests, but not essential to starting the application,
         // so swallow it.
         logger.log(
-          "Unable to identify user for tracking" + (e as Error)?.toString()
+          "Unable to identify user for tracking" + (e as Error)?.toString(),
         );
       }
       if (analyticsID) {
         this.posthog.identify(analyticsID);
       } else {
         logger.info(
-          "No analyticsID is availble. Should not try to setup posthog"
+          "No analyticsID is availble. Should not try to setup posthog",
         );
       }
     }
   }
 
-  async getAnalyticsId() {
+  private async getAnalyticsId(): Promise<string | null> {
     const client: MatrixClient = window.matrixclient;
     let accountAnalyticsId;
     if (widget) {
       accountAnalyticsId = getUrlParams().analyticsID;
     } else {
       const accountData = await client.getAccountDataFromServer(
-        PosthogAnalytics.ANALYTICS_EVENT_TYPE
+        PosthogAnalytics.ANALYTICS_EVENT_TYPE,
       );
       accountAnalyticsId = accountData?.id;
     }
@@ -291,12 +293,14 @@ export class PosthogAnalytics {
     return null;
   }
 
-  async hashedEcAnalyticsId(accountAnalyticsId: string): Promise<string> {
+  private async hashedEcAnalyticsId(
+    accountAnalyticsId: string,
+  ): Promise<string> {
     const client: MatrixClient = window.matrixclient;
     const posthogIdMaterial = "ec" + accountAnalyticsId + client.getUserId();
     const bufferForPosthogId = await crypto.subtle.digest(
       "sha-256",
-      Buffer.from(posthogIdMaterial, "utf-8")
+      Buffer.from(posthogIdMaterial, "utf-8"),
     );
     const view = new Int32Array(bufferForPosthogId);
     return Array.from(view)
@@ -304,17 +308,17 @@ export class PosthogAnalytics {
       .join("");
   }
 
-  async setAccountAnalyticsId(analyticsID: string) {
+  private async setAccountAnalyticsId(analyticsID: string): Promise<void> {
     if (!widget) {
       const client = window.matrixclient;
 
       // the analytics ID only needs to be set in the standalone version.
       const accountData = await client.getAccountDataFromServer(
-        PosthogAnalytics.ANALYTICS_EVENT_TYPE
+        PosthogAnalytics.ANALYTICS_EVENT_TYPE,
       );
       await client.setAccountData(
         PosthogAnalytics.ANALYTICS_EVENT_TYPE,
-        Object.assign({ id: analyticsID }, accountData)
+        Object.assign({ id: analyticsID }, accountData),
       );
     }
   }
@@ -335,7 +339,7 @@ export class PosthogAnalytics {
     this.updateAnonymityAndIdentifyUser(optInAnalytics);
   }
 
-  private updateSuperProperties() {
+  private updateSuperProperties(): void {
     // Update super properties in posthog with our platform (app version, platform).
     // These properties will be subsequently passed in every event.
     //
@@ -356,7 +360,7 @@ export class PosthogAnalytics {
   }
 
   private async updateAnonymityAndIdentifyUser(
-    pseudonymousOptIn: boolean
+    pseudonymousOptIn: boolean,
   ): Promise<void> {
     // Update this.anonymity based on the user's analytics opt-in settings
     const anonymity = pseudonymousOptIn
@@ -372,11 +376,11 @@ export class PosthogAnalytics {
       this.setRegistrationType(
         window.matrixclient.isGuest() || window.passwordlessUser
           ? RegistrationType.Guest
-          : RegistrationType.Registered
+          : RegistrationType.Registered,
       );
       // store the promise to await posthog-tracking-events until the identification is done.
       this.identificationPromise = this.identifyUser(
-        PosthogAnalytics.getRandomAnalyticsId
+        PosthogAnalytics.getRandomAnalyticsId,
       );
       await this.identificationPromise;
       if (this.userRegisteredInThisSession()) {
@@ -391,7 +395,7 @@ export class PosthogAnalytics {
 
   public async trackEvent<E extends IPosthogEvent>(
     { eventName, ...properties }: E,
-    options?: CaptureOptions
+    options?: CaptureOptions,
   ): Promise<void> {
     if (this.identificationPromise) {
       // only make calls to posthog after the identificaion is done

src/analytics/PosthogEvents.ts

@@ -36,18 +36,22 @@ export class CallEndedTracker {
     maxParticipantsCount: 0,
   };
 
-  cacheStartCall(time: Date) {
+  public cacheStartCall(time: Date): void {
     this.cache.startTime = time;
   }
 
-  cacheParticipantCountChanged(count: number) {
+  public cacheParticipantCountChanged(count: number): void {
     this.cache.maxParticipantsCount = Math.max(
       count,
-      this.cache.maxParticipantsCount
+      this.cache.maxParticipantsCount,
     );
   }
 
-  track(callId: string, callParticipantsNow: number, sendInstantly: boolean) {
+  public track(
+    callId: string,
+    callParticipantsNow: number,
+    sendInstantly: boolean,
+  ): void {
     PosthogAnalytics.instance.trackEvent<CallEnded>(
       {
         eventName: "CallEnded",
@@ -56,7 +60,7 @@ export class CallEndedTracker {
         callParticipantsOnLeave: callParticipantsNow,
         callDuration: (Date.now() - this.cache.startTime.getTime()) / 1000,
       },
-      { send_instantly: sendInstantly }
+      { send_instantly: sendInstantly },
     );
   }
 }
@@ -67,7 +71,7 @@ interface CallStarted extends IPosthogEvent {
 }
 
 export class CallStartedTracker {
-  track(callId: string) {
+  public track(callId: string): void {
     PosthogAnalytics.instance.trackEvent<CallStarted>({
       eventName: "CallStarted",
       callId: callId,
@@ -86,19 +90,19 @@ export class SignupTracker {
     signupEnd: new Date(0),
   };
 
-  cacheSignupStart(time: Date) {
+  public cacheSignupStart(time: Date): void {
     this.cache.signupStart = time;
   }
 
-  getSignupEndTime() {
+  public getSignupEndTime(): Date {
     return this.cache.signupEnd;
   }
 
-  cacheSignupEnd(time: Date) {
+  public cacheSignupEnd(time: Date): void {
     this.cache.signupEnd = time;
   }
 
-  track() {
+  public track(): void {
     PosthogAnalytics.instance.trackEvent<Signup>({
       eventName: "Signup",
       signupDuration: Date.now() - this.cache.signupStart.getTime(),
@@ -112,7 +116,7 @@ interface Login extends IPosthogEvent {
 }
 
 export class LoginTracker {
-  track() {
+  public track(): void {
     PosthogAnalytics.instance.trackEvent<Login>({
       eventName: "Login",
     });
@@ -127,7 +131,7 @@ interface MuteMicrophone {
 }
 
 export class MuteMicrophoneTracker {
-  track(targetIsMute: boolean, callId: string) {
+  public track(targetIsMute: boolean, callId: string): void {
     PosthogAnalytics.instance.trackEvent<MuteMicrophone>({
       eventName: "MuteMicrophone",
       targetMuteState: targetIsMute ? "mute" : "unmute",
@@ -143,7 +147,7 @@ interface MuteCamera {
 }
 
 export class MuteCameraTracker {
-  track(targetIsMute: boolean, callId: string) {
+  public track(targetIsMute: boolean, callId: string): void {
     PosthogAnalytics.instance.trackEvent<MuteCamera>({
       eventName: "MuteCamera",
       targetMuteState: targetIsMute ? "mute" : "unmute",
@@ -158,7 +162,7 @@ interface UndecryptableToDeviceEvent {
 }
 
 export class UndecryptableToDeviceEventTracker {
-  track(callId: string) {
+  public track(callId: string): void {
     PosthogAnalytics.instance.trackEvent<UndecryptableToDeviceEvent>({
       eventName: "UndecryptableToDeviceEvent",
       callId,
@@ -174,7 +178,7 @@ interface QualitySurveyEvent {
 }
 
 export class QualitySurveyEventTracker {
-  track(callId: string, feedbackText: string, stars: number) {
+  public track(callId: string, feedbackText: string, stars: number): void {
     PosthogAnalytics.instance.trackEvent<QualitySurveyEvent>({
       eventName: "QualitySurvey",
       callId,
@@ -190,7 +194,7 @@ interface CallDisconnectedEvent {
 }
 
 export class CallDisconnectedEventTracker {
-  track(reason?: DisconnectReason) {
+  public track(reason?: DisconnectReason): void {
     PosthogAnalytics.instance.trackEvent<CallDisconnectedEvent>({
       eventName: "CallDisconnected",
       reason,

src/analytics/PosthogSpanProcessor.ts

@@ -39,9 +39,9 @@ const maxRejoinMs = 2 * 60 * 1000; // 2 minutes
  * Span processor that extracts certain metrics from spans to send to PostHog
  */
 export class PosthogSpanProcessor implements SpanProcessor {
-  async forceFlush(): Promise<void> {}
+  public async forceFlush(): Promise<void> {}
 
-  onStart(span: Span): void {
+  public onStart(span: Span): void {
     // Hack: Yield to allow attributes to be set before processing
     Promise.resolve().then(() => {
       switch (span.name) {
@@ -55,7 +55,7 @@ export class PosthogSpanProcessor implements SpanProcessor {
     });
   }
 
-  onEnd(span: ReadableSpan): void {
+  public onEnd(span: ReadableSpan): void {
     switch (span.name) {
       case "matrix.groupCallMembership":
         this.onGroupCallMembershipEnd(span);
@@ -148,7 +148,7 @@ export class PosthogSpanProcessor implements SpanProcessor {
             ratioPeerConnectionToDevices: ratioPeerConnectionToDevices,
           },
           // Send instantly because the window might be closing
-          { send_instantly: true }
+          { send_instantly: true },
         );
       }
     }
@@ -157,7 +157,7 @@ export class PosthogSpanProcessor implements SpanProcessor {
   /**
    * Shutdown the processor.
    */
-  shutdown(): Promise<void> {
+  public shutdown(): Promise<void> {
     return Promise.resolve();
   }
 }

src/analytics/RageshakeSpanProcessor.ts

@@ -1,4 +1,20 @@
-import { Attributes } from "@opentelemetry/api";
+/*
+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 { AttributeValue, Attributes } from "@opentelemetry/api";
 import { hrTimeToMicroseconds } from "@opentelemetry/core";
 import {
   SpanProcessor,
@@ -6,7 +22,21 @@ import {
   Span,
 } from "@opentelemetry/sdk-trace-base";
 
-const dumpAttributes = (attr: Attributes) =>
+const dumpAttributes = (
+  attr: Attributes,
+): {
+  key: string;
+  type:
+    | "string"
+    | "number"
+    | "bigint"
+    | "boolean"
+    | "symbol"
+    | "undefined"
+    | "object"
+    | "function";
+  value: AttributeValue | undefined;
+}[] =>
   Object.entries(attr).map(([key, value]) => ({
     key,
     type: typeof value,
@@ -20,13 +50,13 @@ const dumpAttributes = (attr: Attributes) =>
 export class RageshakeSpanProcessor implements SpanProcessor {
   private readonly spans: ReadableSpan[] = [];
 
-  async forceFlush(): Promise<void> {}
+  public async forceFlush(): Promise<void> {}
 
-  onStart(span: Span): void {
+  public onStart(span: Span): void {
     this.spans.push(span);
   }
 
-  onEnd(): void {}
+  public onEnd(): void {}
 
   /**
    * Dumps the spans collected so far as Jaeger-compatible JSON.
@@ -110,5 +140,5 @@ export class RageshakeSpanProcessor implements SpanProcessor {
     });
   }
 
-  async shutdown(): Promise<void> {}
+  public async shutdown(): Promise<void> {}
 }

src/array-utils.ts

@@ -22,7 +22,7 @@ limitations under the License.
 // Array.prototype.findLastIndex
 export function findLastIndex<T>(
   array: T[],
-  predicate: (item: T, index: number) => boolean
+  predicate: (item: T, index: number) => boolean,
 ): number | null {
   for (let i = array.length - 1; i >= 0; i--) {
     if (predicate(array[i], i)) return i;
@@ -36,9 +36,9 @@ export function findLastIndex<T>(
  */
 export const count = <T>(
   array: T[],
-  predicate: (item: T, index: number) => boolean
+  predicate: (item: T, index: number) => boolean,
 ): number =>
   array.reduce(
     (acc, item, index) => (predicate(item, index) ? acc + 1 : acc),
-    0
+    0,
   );

src/auth/LoginPage.tsx

@@ -80,7 +80,7 @@ export const LoginPage: FC = () => {
           setLoading(false);
         });
     },
-    [login, location, history, homeserver, setClient]
+    [login, location, history, homeserver, setClient],
   );
 
   return (

src/auth/RegisterPage.tsx

@@ -69,7 +69,7 @@ export const RegisterPage: FC = () => {
 
       if (password !== passwordConfirmation) return;
 
-      const submit = async () => {
+      const submit = async (): Promise<void> => {
         setRegistering(true);
 
         const recaptchaResponse = await execute();
@@ -78,7 +78,7 @@ export const RegisterPage: FC = () => {
           password,
           userName,
           recaptchaResponse,
-          passwordlessUser
+          passwordlessUser,
         );
 
         if (client && client?.groupCallEventHandler && passwordlessUser) {
@@ -135,7 +135,7 @@ export const RegisterPage: FC = () => {
       execute,
       client,
       setClient,
-    ]
+    ],
   );
 
   useEffect(() => {
@@ -184,7 +184,7 @@ export const RegisterPage: FC = () => {
                   required
                   name="password"
                   type="password"
-                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  onChange={(e: ChangeEvent<HTMLInputElement>): void =>
                     setPassword(e.target.value)
                   }
                   value={password}
@@ -198,7 +198,7 @@ export const RegisterPage: FC = () => {
                   required
                   type="password"
                   name="passwordConfirmation"
-                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  onChange={(e: ChangeEvent<HTMLInputElement>): void =>
                     setPasswordConfirmation(e.target.value)
                   }
                   value={passwordConfirmation}

src/auth/useInteractiveLogin.ts

@@ -21,12 +21,16 @@ import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { initClient } from "../matrix-utils";
 import { Session } from "../ClientContext";
 
-export const useInteractiveLogin = () =>
-  useCallback<
+export function useInteractiveLogin(): (
+  homeserver: string,
+  username: string,
+  password: string,
+) => Promise<[MatrixClient, Session]> {
+  return useCallback<
     (
       homeserver: string,
       username: string,
-      password: string
+      password: string,
     ) => Promise<[MatrixClient, Session]>
   >(async (homeserver: string, username: string, password: string) => {
     const authClient = createClient({ baseUrl: homeserver });
@@ -41,8 +45,8 @@ export const useInteractiveLogin = () =>
           },
           password,
         }),
-      stateUpdated: (...args) => {},
-      requestEmailToken: (...args): Promise<{ sid: string }> => {
+      stateUpdated: (): void => {},
+      requestEmailToken: (): Promise<{ sid: string }> => {
         return Promise.resolve({ sid: "" });
       },
     });
@@ -66,9 +70,9 @@ export const useInteractiveLogin = () =>
         userId: user_id,
         deviceId: device_id,
       },
-      false
+      false,
     );
     /* eslint-enable camelcase */
-
     return [client, session];
   }, []);
+}

src/auth/useInteractiveRegistration.ts

@@ -30,14 +30,14 @@ export const useInteractiveRegistration = (): {
     password: string,
     displayName: string,
     recaptchaResponse: string,
-    passwordlessUser: boolean
+    passwordlessUser: boolean,
   ) => Promise<[MatrixClient, Session]>;
 } => {
   const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string | undefined>(
-    undefined
+    undefined,
   );
   const [recaptchaKey, setRecaptchaKey] = useState<string | undefined>(
-    undefined
+    undefined,
   );
 
   const authClient = useRef<MatrixClient>();
@@ -50,7 +50,7 @@ export const useInteractiveRegistration = (): {
   useEffect(() => {
     authClient.current!.registerRequest({}).catch((error) => {
       setPrivacyPolicyUrl(
-        error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url
+        error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url,
       );
       setRecaptchaKey(error.data?.params["m.login.recaptcha"]?.public_key);
     });
@@ -62,7 +62,7 @@ export const useInteractiveRegistration = (): {
       password: string,
       displayName: string,
       recaptchaResponse: string,
-      passwordlessUser: boolean
+      passwordlessUser: boolean,
     ): Promise<[MatrixClient, Session]> => {
       const interactiveAuth = new InteractiveAuth({
         matrixClient: authClient.current!,
@@ -72,7 +72,7 @@ export const useInteractiveRegistration = (): {
             password,
             auth: auth || undefined,
           }),
-        stateUpdated: (nextStage, status) => {
+        stateUpdated: (nextStage, status): void => {
           if (status.error) {
             throw new Error(status.error);
           }
@@ -88,7 +88,7 @@ export const useInteractiveRegistration = (): {
             });
           }
         },
-        requestEmailToken: (...args) => {
+        requestEmailToken: (): Promise<{ sid: string }> => {
           return Promise.resolve({ sid: "dummy" });
         },
       });
@@ -106,7 +106,7 @@ export const useInteractiveRegistration = (): {
           userId: user_id,
           deviceId: device_id,
         },
-        false
+        false,
       );
 
       await client.setDisplayName(displayName);
@@ -129,7 +129,7 @@ export const useInteractiveRegistration = (): {
 
       return [client, session];
     },
-    []
+    [],
   );
 
   return { privacyPolicyUrl, recaptchaKey, register };

src/auth/useRecaptcha.ts

@@ -35,7 +35,11 @@ interface RecaptchaPromiseRef {
   reject: (error: Error) => void;
 }
 
-export const useRecaptcha = (sitekey?: string) => {
+export function useRecaptcha(sitekey?: string): {
+  execute: () => Promise<string>;
+  reset: () => void;
+  recaptchaId: string;
+} {
   const { t } = useTranslation();
   const [recaptchaId] = useState(() => randomString(16));
   const promiseRef = useRef<RecaptchaPromiseRef>();
@@ -43,7 +47,7 @@ export const useRecaptcha = (sitekey?: string) => {
   useEffect(() => {
     if (!sitekey) return;
 
-    const onRecaptchaLoaded = () => {
+    const onRecaptchaLoaded = (): void => {
       if (!document.getElementById(recaptchaId)) return;
 
       window.grecaptcha.render(recaptchaId, {
@@ -91,11 +95,11 @@ export const useRecaptcha = (sitekey?: string) => {
       });
 
       promiseRef.current = {
-        resolve: (value) => {
+        resolve: (value): void => {
           resolve(value);
           observer.disconnect();
         },
-        reject: (error) => {
+        reject: (error): void => {
           reject(error);
           observer.disconnect();
         },
@@ -104,7 +108,7 @@ export const useRecaptcha = (sitekey?: string) => {
       window.grecaptcha.execute();
 
       const iframe = document.querySelector<HTMLIFrameElement>(
-        'iframe[src*="recaptcha/api2/bframe"]'
+        'iframe[src*="recaptcha/api2/bframe"]',
       );
 
       if (iframe?.parentNode?.parentNode) {
@@ -120,4 +124,4 @@ export const useRecaptcha = (sitekey?: string) => {
   }, []);
 
   return { execute, reset, recaptchaId };
-};
+}

src/auth/useRegisterPasswordlessUser.ts

@@ -48,7 +48,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
           randomString(16),
           displayName,
           recaptchaResponse,
-          true
+          true,
         );
         setClient({ client, session });
       } catch (e) {
@@ -56,7 +56,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
         throw e;
       }
     },
-    [execute, reset, register, setClient]
+    [execute, reset, register, setClient],
   );
 
   return { privacyPolicyUrl, registerPasswordlessUser, recaptchaId };

src/button/Button.module.css

@@ -146,7 +146,9 @@ limitations under the License.
 .copyButton {
   width: 100%;
   height: 40px;
-  transition: border-color 250ms, background-color 250ms;
+  transition:
+    border-color 250ms,
+    background-color 250ms;
 }
 
 .copyButton span {

src/button/Button.tsx

@@ -13,7 +13,7 @@ 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 } from "react";
+import { FC, forwardRef } from "react";
 import { PressEvent } from "@react-types/shared";
 import classNames from "classnames";
 import { useButton } from "@react-aria/button";
@@ -22,8 +22,8 @@ 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 VideoCallIcon from "@vector-im/compound-design-tokens/icons/video-call.svg?react";
-import VideoCallOffIcon from "@vector-im/compound-design-tokens/icons/video-call-off.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";
@@ -94,12 +94,12 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
       onPressStart,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const buttonRef = useObjectRef<HTMLButtonElement>(ref);
     const { buttonProps } = useButton(
       { onPress, onPressStart, ...rest },
-      buttonRef
+      buttonRef,
     );
 
     // TODO: react-aria's useButton hook prevents form submission via keyboard
@@ -121,7 +121,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
           {
             [styles.on]: on,
             [styles.off]: off,
-          }
+          },
         )}
         {...mergeProps(rest, filteredButtonProps)}
         ref={buttonRef}
@@ -132,17 +132,14 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
         </>
       </button>
     );
-  }
+  },
 );
 
-export function MicButton({
-  muted,
-  ...rest
-}: {
+export const MicButton: FC<{
   muted: boolean;
   // TODO: add all props for <Button>
   [index: string]: unknown;
-}) {
+}> = ({ muted, ...rest }) => {
   const { t } = useTranslation();
   const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
   const label = muted ? t("Unmute microphone") : t("Mute microphone");
@@ -154,18 +151,15 @@ export function MicButton({
       </Button>
     </Tooltip>
   );
-}
+};
 
-export function VideoButton({
-  muted,
-  ...rest
-}: {
+export const VideoButton: FC<{
   muted: boolean;
   // TODO: add all props for <Button>
   [index: string]: unknown;
-}) {
+}> = ({ muted, ...rest }) => {
   const { t } = useTranslation();
-  const Icon = muted ? VideoCallOffIcon : VideoCallIcon;
+  const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
   const label = muted ? t("Start video") : t("Stop video");
 
   return (
@@ -175,18 +169,14 @@ export function VideoButton({
       </Button>
     </Tooltip>
   );
-}
+};
 
-export function ScreenshareButton({
-  enabled,
-  className,
-  ...rest
-}: {
+export const ScreenshareButton: FC<{
   enabled: boolean;
   className?: string;
   // TODO: add all props for <Button>
   [index: string]: unknown;
-}) {
+}> = ({ enabled, className, ...rest }) => {
   const { t } = useTranslation();
   const label = enabled ? t("Sharing screen") : t("Share screen");
 
@@ -197,16 +187,13 @@ export function ScreenshareButton({
       </Button>
     </Tooltip>
   );
-}
+};
 
-export function HangupButton({
-  className,
-  ...rest
-}: {
+export const HangupButton: FC<{
   className?: string;
   // TODO: add all props for <Button>
   [index: string]: unknown;
-}) {
+}> = ({ className, ...rest }) => {
   const { t } = useTranslation();
 
   return (
@@ -220,16 +207,13 @@ export function HangupButton({
       </Button>
     </Tooltip>
   );
-}
+};
 
-export function SettingsButton({
-  className,
-  ...rest
-}: {
+export const SettingsButton: FC<{
   className?: string;
   // TODO: add all props for <Button>
   [index: string]: unknown;
-}) {
+}> = ({ className, ...rest }) => {
   const { t } = useTranslation();
 
   return (
@@ -239,7 +223,7 @@ export function SettingsButton({
       </Button>
     </Tooltip>
   );
-}
+};
 
 interface AudioButtonProps extends Omit<Props, "variant"> {
   /**
@@ -248,7 +232,7 @@ interface AudioButtonProps extends Omit<Props, "variant"> {
   volume: number;
 }
 
-export function AudioButton({ volume, ...rest }: AudioButtonProps) {
+export const AudioButton: FC<AudioButtonProps> = ({ volume, ...rest }) => {
   const { t } = useTranslation();
 
   return (
@@ -258,16 +242,16 @@ export function AudioButton({ volume, ...rest }: AudioButtonProps) {
       </Button>
     </Tooltip>
   );
-}
+};
 
 interface FullscreenButtonProps extends Omit<Props, "variant"> {
   fullscreen?: boolean;
 }
 
-export function FullscreenButton({
+export const FullscreenButton: FC<FullscreenButtonProps> = ({
   fullscreen,
   ...rest
-}: FullscreenButtonProps) {
+}) => {
   const { t } = useTranslation();
   const Icon = fullscreen ? FullscreenExit : Fullscreen;
   const label = fullscreen ? t("Exit full screen") : t("Full screen");
@@ -279,4 +263,4 @@ export function FullscreenButton({
       </Button>
     </Tooltip>
   );
-}
+};

src/button/CopyButton.tsx

@@ -16,6 +16,7 @@ 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";
@@ -28,14 +29,15 @@ interface Props {
   variant?: ButtonVariant;
   copiedMessage?: string;
 }
-export function CopyButton({
+
+export const CopyButton: FC<Props> = ({
   value,
   children,
   className,
   variant,
   copiedMessage,
   ...rest
-}: Props) {
+}) => {
   const { t } = useTranslation();
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
 
@@ -62,4 +64,4 @@ export function CopyButton({
       )}
     </Button>
   );
-}
+};

src/button/InviteButton.tsx

@@ -17,14 +17,14 @@ limitations under the License.
 import { ComponentPropsWithoutRef, FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import UserAddSolidIcon from "@vector-im/compound-design-tokens/icons/user-add-solid.svg?react";
+import UserAddIcon from "@vector-im/compound-design-tokens/icons/user-add.svg?react";
 
 export const InviteButton: FC<
   Omit<ComponentPropsWithoutRef<"button">, "children">
 > = (props) => {
   const { t } = useTranslation();
   return (
-    <Button kind="secondary" size="sm" Icon={UserAddSolidIcon} {...props}>
+    <Button kind="secondary" size="sm" Icon={UserAddIcon} {...props}>
       {t("Invite")}
     </Button>
   );

src/button/LinkButton.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { HTMLAttributes } from "react";
+import { FC, HTMLAttributes } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 import * as H from "history";
@@ -34,20 +34,20 @@ interface Props extends HTMLAttributes<HTMLAnchorElement> {
   className?: string;
 }
 
-export function LinkButton({
+export const LinkButton: FC<Props> = ({
   children,
   to,
   size,
   variant,
   className,
   ...rest
-}: Props) {
+}) => {
   return (
     <Link
       className={classNames(
         variantToClassName[variant || "secondary"],
         size ? sizeToClassName[size] : [],
-        className
+        className,
       )}
       to={to}
       {...rest}
@@ -55,4 +55,4 @@ export function LinkButton({
       {children}
     </Link>
   );
-}
+};

src/config/Config.ts

@@ -57,7 +57,7 @@ export class Config {
 }
 
 async function downloadConfig(
-  configJsonFilename: string
+  configJsonFilename: string,
 ): Promise<ConfigOptions> {
   const url = new URL(configJsonFilename, window.location.href);
   url.searchParams.set("cachebuster", Date.now().toString());

src/e2ee/e2eeType.ts

@@ -5,7 +5,7 @@ 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,10 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.e2eeBanner {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  font-size: var(--font-size-caption);
+export enum E2eeType {
+  NONE = 0,
+  PER_PARTICIPANT = 1,
+  SHARED_KEY = 2,
 }

src/e2ee/matrixKeyProvider.ts

@@ -0,0 +1,73 @@
+/*
+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 { BaseKeyProvider, createKeyMaterialFromBuffer } from "livekit-client";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+
+export class MatrixKeyProvider extends BaseKeyProvider {
+  private rtcSession?: MatrixRTCSession;
+
+  public constructor() {
+    super({ ratchetWindowSize: 0 });
+  }
+
+  public setRTCSession(rtcSession: MatrixRTCSession): void {
+    if (this.rtcSession) {
+      this.rtcSession.off(
+        MatrixRTCSessionEvent.EncryptionKeyChanged,
+        this.onEncryptionKeyChanged,
+      );
+    }
+
+    this.rtcSession = rtcSession;
+
+    this.rtcSession.on(
+      MatrixRTCSessionEvent.EncryptionKeyChanged,
+      this.onEncryptionKeyChanged,
+    );
+
+    // The new session could be aware of keys of which the old session wasn't,
+    // so emit a key changed event.
+    for (const [
+      participant,
+      encryptionKeys,
+    ] of this.rtcSession.getEncryptionKeys()) {
+      for (const [index, encryptionKey] of encryptionKeys.entries()) {
+        this.onEncryptionKeyChanged(encryptionKey, index, participant);
+      }
+    }
+  }
+
+  private onEncryptionKeyChanged = async (
+    encryptionKey: Uint8Array,
+    encryptionKeyIndex: number,
+    participantId: string,
+  ): Promise<void> => {
+    this.onSetEncryptionKey(
+      await createKeyMaterialFromBuffer(encryptionKey),
+      participantId,
+      encryptionKeyIndex,
+    );
+
+    logger.debug(
+      `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
+    );
+  };
+}

src/e2ee/sharedKeyManagement.ts

@@ -16,71 +16,60 @@ limitations under the License.
 
 import { useEffect, useMemo } from "react";
 
-import { useEnableE2EE } from "../settings/useSetting";
-import { useLocalStorage } from "../useLocalStorage";
+import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
 import { useClient } from "../ClientContext";
-import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+import { useUrlParams } from "../UrlParams";
 import { widget } from "../widget";
 
 export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
-const useInternalRoomSharedKey = (
-  roomId: string
-): [string | null, (value: string) => void] => {
-  const key = useMemo(() => getRoomSharedKeyLocalStorageKey(roomId), [roomId]);
-  const [e2eeEnabled] = useEnableE2EE();
-  const [roomSharedKey, setRoomSharedKey] = useLocalStorage(key);
+const useInternalRoomSharedKey = (roomId: string): string | null => {
+  const key = getRoomSharedKeyLocalStorageKey(roomId);
+  const roomSharedKey = useLocalStorage(key)[0];
 
-  return [e2eeEnabled ? roomSharedKey : null, setRoomSharedKey];
+  return roomSharedKey;
 };
 
-const useKeyFromUrl = (roomId: string): string | null => {
+/**
+ * Extracts the room password from the URL if one is present, saving it in localstorage
+ * and returning it in a tuple with the corresponding room ID from the URL.
+ * @returns A tuple of the roomId and password from the URL if the URL has both,
+ *          otherwise [undefined, undefined]
+ */
+const useKeyFromUrl = (): [string, string] | [undefined, undefined] => {
   const urlParams = useUrlParams();
-  const [e2eeSharedKey, setE2EESharedKey] = useInternalRoomSharedKey(roomId);
 
   useEffect(() => {
-    if (!urlParams.password) return;
-    if (urlParams.password === "") return;
-    if (urlParams.password === e2eeSharedKey) return;
+    if (!urlParams.password || !urlParams.roomId) return;
+    if (!urlParams.roomId) return;
 
-    setE2EESharedKey(urlParams.password);
-  }, [urlParams, e2eeSharedKey, setE2EESharedKey]);
+    setLocalStorageItem(
+      // We set the Item by only using data from the url. This way we
+      // make sure, we always have matching pairs in the LocalStorage,
+      // as they occur in the call links.
+      getRoomSharedKeyLocalStorageKey(urlParams.roomId),
+      urlParams.password,
+    );
+  }, [urlParams]);
 
-  return urlParams.password ?? null;
+  return urlParams.roomId && urlParams.password
+    ? [urlParams.roomId, urlParams.password]
+    : [undefined, undefined];
 };
 
-export const useRoomSharedKey = (roomId: string): string | null => {
+export const useRoomSharedKey = (roomId: string): string | undefined => {
   // 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 passwordFormUrl = useKeyFromUrl(roomId);
+  const [urlRoomId, passwordFormUrl] = useKeyFromUrl();
 
-  return useInternalRoomSharedKey(roomId)[0] ?? passwordFormUrl;
-};
+  const storedPassword = useInternalRoomSharedKey(roomId);
 
-export const useManageRoomSharedKey = (roomId: string): string | null => {
-  const urlParams = useUrlParams();
-
-  const urlPassword = useKeyFromUrl(roomId);
-
-  const [e2eeSharedKey] = useInternalRoomSharedKey(roomId);
-
-  useEffect(() => {
-    const hash = location.hash;
-
-    if (!hash.includes("?")) return;
-    if (!hash.includes(PASSWORD_STRING)) return;
-    if (urlParams.password !== e2eeSharedKey) return;
-
-    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
-    const hashEnd = passwordStart.split("&").slice(1).join("&");
-
-    location.replace((hashStart ?? "") + (hashEnd ?? ""));
-  }, [urlParams, e2eeSharedKey]);
-
-  return e2eeSharedKey ?? urlPassword;
+  if (storedPassword) return storedPassword;
+  if (urlRoomId === roomId) return passwordFormUrl;
+  return undefined;
 };
 
 export const useIsRoomE2EE = (roomId: string): boolean | null => {
@@ -91,6 +80,6 @@ export const useIsRoomE2EE = (roomId: string): boolean | null => {
   // should inspect the e2eEnabled URL parameter here?
   return useMemo(
     () => widget === null && (room === null || !room.getCanonicalAlias()),
-    [room]
+    [room],
   );
 };

src/form/Form.tsx

@@ -36,5 +36,5 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
         {children}
       </form>
     );
-  }
+  },
 );

src/home/CallList.tsx

@@ -18,6 +18,7 @@ import { Link } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 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";
@@ -31,7 +32,8 @@ interface CallListProps {
   rooms: GroupCallRoom[];
   client: MatrixClient;
 }
-export function CallList({ rooms, client }: CallListProps) {
+
+export const CallList: FC<CallListProps> = ({ rooms, client }) => {
   return (
     <>
       <div className={styles.callList}>
@@ -54,7 +56,7 @@ export function CallList({ rooms, client }: CallListProps) {
       </div>
     </>
   );
-}
+};
 interface CallTileProps {
   name: string;
   avatarUrl: string;
@@ -62,15 +64,18 @@ interface CallTileProps {
   participants: RoomMember[];
   client: MatrixClient;
 }
-function CallTile({ name, avatarUrl, room }: CallTileProps) {
+
+const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
   const roomSharedKey = useRoomSharedKey(room.roomId);
 
   return (
     <div className={styles.callTile}>
       <Link
-        // note we explicitly omit the password here as we don't want it on this link because
-        // it's just for the user to navigate around and not for sharing
-        to={getRelativeRoomUrl(room.roomId, room.name)}
+        to={getRelativeRoomUrl(
+          room.roomId,
+          room.name,
+          roomSharedKey ?? undefined,
+        )}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
@@ -87,9 +92,9 @@ function CallTile({ name, avatarUrl, room }: CallTileProps) {
         value={getAbsoluteRoomUrl(
           room.roomId,
           room.name,
-          roomSharedKey ?? undefined
+          roomSharedKey ?? undefined,
         )}
       />
     </div>
   );
-}
+};

src/home/HomePage.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { useTranslation } from "react-i18next";
+import { FC } from "react";
 
 import { useClientState } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
@@ -22,7 +23,7 @@ import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";
 import { usePageTitle } from "../usePageTitle";
 
-export function HomePage() {
+export const HomePage: FC = () => {
   const { t } = useTranslation();
   usePageTitle(t("Home"));
 
@@ -39,4 +40,4 @@ export function HomePage() {
       <UnauthenticatedView />
     );
   }
-}
+};

src/home/JoinExistingCallModal.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";
+import { FC } from "react";
 
 import { Modal } from "../Modal";
 import { Button } from "../button";
@@ -28,7 +29,11 @@ interface Props {
   onJoin: (e: PressEvent) => void;
 }
 
-export function JoinExistingCallModal({ onJoin, open, onDismiss }: Props) {
+export const JoinExistingCallModal: FC<Props> = ({
+  onJoin,
+  open,
+  onDismiss,
+}) => {
   const { t } = useTranslation();
 
   return (
@@ -42,4 +47,4 @@ export function JoinExistingCallModal({ onJoin, open, onDismiss }: Props) {
       </FieldRow>
     </Modal>
   );
-}
+};

src/home/RegisteredView.tsx

@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useState, useCallback, FormEvent, FormEventHandler } from "react";
+import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -39,17 +38,15 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
-import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
+import { useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { E2EEBanner } from "../E2EEBanner";
-import { setLocalStorageItem } from "../useLocalStorage";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
+import { E2eeType } from "../e2ee/e2eeType";
 
 interface Props {
   client: MatrixClient;
 }
 
-export function RegisteredView({ client }: Props) {
+export const RegisteredView: FC<Props> = ({ client }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const [optInAnalytics] = useOptInAnalytics();
@@ -59,9 +56,8 @@ export function RegisteredView({ client }: Props) {
     useState(false);
   const onDismissJoinExistingCallModal = useCallback(
     () => setJoinExistingCallModalOpen(false),
-    [setJoinExistingCallModalOpen]
+    [setJoinExistingCallModalOpen],
   );
-  const [e2eeEnabled] = useEnableE2EE();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e: FormEvent) => {
@@ -73,22 +69,23 @@ export function RegisteredView({ client }: Props) {
           ? sanitiseRoomNameInput(roomNameData)
           : "";
 
-      async function submit() {
+      async function submit(): Promise<void> {
         setError(undefined);
         setLoading(true);
 
-        const roomId = (
-          await createRoom(client, roomName, e2eeEnabled ?? false)
-        )[1];
+        const createRoomResult = await createRoom(
+          client,
+          roomName,
+          E2eeType.SHARED_KEY,
+        );
 
-        if (e2eeEnabled) {
-          setLocalStorageItem(
-            getRoomSharedKeyLocalStorageKey(roomId),
-            randomString(32)
-          );
-        }
-
-        history.push(getRelativeRoomUrl(roomId, roomName));
+        history.push(
+          getRelativeRoomUrl(
+            createRoomResult.roomId,
+            roomName,
+            createRoomResult.password,
+          ),
+        );
       }
 
       submit().catch((error) => {
@@ -104,7 +101,7 @@ export function RegisteredView({ client }: Props) {
         }
       });
     },
-    [client, history, setJoinExistingCallModalOpen, e2eeEnabled]
+    [client, history, setJoinExistingCallModalOpen],
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -158,7 +155,6 @@ export function RegisteredView({ client }: Props) {
                 <AnalyticsNotice />
               </Caption>
             )}
-            <E2EEBanner />
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage error={error} />
@@ -177,4 +173,4 @@ export function RegisteredView({ client }: Props) {
       />
     </>
   );
-}
+};

src/home/UnauthenticatedView.tsx

@@ -41,11 +41,9 @@ import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
+import { useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
-import { E2EEBanner } from "../E2EEBanner";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
-import { setLocalStorageItem } from "../useLocalStorage";
+import { E2eeType } from "../e2ee/e2eeType";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -59,14 +57,12 @@ export const UnauthenticatedView: FC = () => {
     useState(false);
   const onDismissJoinExistingCallModal = useCallback(
     () => setJoinExistingCallModalOpen(false),
-    [setJoinExistingCallModalOpen]
+    [setJoinExistingCallModalOpen],
   );
   const [onFinished, setOnFinished] = useState<() => void>();
   const history = useHistory();
   const { t } = useTranslation();
 
-  const [e2eeEnabled] = useEnableE2EE();
-
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {
       e.preventDefault();
@@ -74,7 +70,7 @@ export const UnauthenticatedView: FC = () => {
       const roomName = sanitiseRoomNameInput(data.get("callName") as string);
       const displayName = data.get("displayName") as string;
 
-      async function submit() {
+      async function submit(): Promise<void> {
         setError(undefined);
         setLoading(true);
         const recaptchaResponse = await execute();
@@ -84,21 +80,16 @@ export const UnauthenticatedView: FC = () => {
           randomString(16),
           displayName,
           recaptchaResponse,
-          true
+          true,
         );
 
-        let roomId: string;
+        let createRoomResult;
         try {
-          roomId = (
-            await createRoom(client, roomName, e2eeEnabled ?? false)
-          )[1];
-
-          if (e2eeEnabled) {
-            setLocalStorageItem(
-              getRoomSharedKeyLocalStorageKey(roomId),
-              randomString(32)
-            );
-          }
+          createRoomResult = await createRoom(
+            client,
+            roomName,
+            E2eeType.SHARED_KEY,
+          );
         } catch (error) {
           if (!setClient) {
             throw error;
@@ -127,7 +118,13 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(getRelativeRoomUrl(roomId, roomName));
+        history.push(
+          getRelativeRoomUrl(
+            createRoomResult.roomId,
+            roomName,
+            createRoomResult.password,
+          ),
+        );
       }
 
       submit().catch((error) => {
@@ -144,8 +141,7 @@ export const UnauthenticatedView: FC = () => {
       history,
       setJoinExistingCallModalOpen,
       setClient,
-      e2eeEnabled,
-    ]
+    ],
   );
 
   return (
@@ -202,7 +198,6 @@ export const UnauthenticatedView: FC = () => {
                 </Link>
               </Trans>
             </Caption>
-            <E2EEBanner />
             {error && (
               <FieldRow>
                 <ErrorMessage error={error} />

src/home/useGroupCallRooms.ts

@@ -31,7 +31,7 @@ export interface GroupCallRoom {
 }
 const tsCache: { [index: string]: number } = {};
 
-function getLastTs(client: MatrixClient, r: Room) {
+function getLastTs(client: MatrixClient, r: Room): number {
   if (tsCache[r.roomId]) {
     return tsCache[r.roomId];
   }
@@ -47,7 +47,7 @@ function getLastTs(client: MatrixClient, r: Room) {
   if (r.getMyMembership() !== "join") {
     const membershipEvent = r.currentState.getStateEvents(
       "m.room.member",
-      myUserId
+      myUserId,
     );
 
     if (membershipEvent && !Array.isArray(membershipEvent)) {
@@ -82,7 +82,7 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
   const [rooms, setRooms] = useState<GroupCallRoom[]>([]);
 
   useEffect(() => {
-    function updateRooms() {
+    function updateRooms(): void {
       if (!client.groupCallEventHandler) {
         return;
       }
@@ -115,7 +115,7 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
       client.removeListener(GroupCallEventHandlerEvent.Incoming, updateRooms);
       client.removeListener(
         GroupCallEventHandlerEvent.Participants,
-        updateRooms
+        updateRooms,
       );
     };
   }, [client]);

src/index.css

@@ -68,7 +68,8 @@ limitations under the License.
   font-weight: 400;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-Regular.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-Regular.woff2") format("woff2"),
     url("/fonts/Inter/Inter-Regular.woff") format("woff");
 }
 
@@ -78,7 +79,8 @@ limitations under the License.
   font-weight: 400;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-Italic.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-Italic.woff2") format("woff2"),
     url("/fonts/Inter/Inter-Italic.woff") format("woff");
 }
 
@@ -88,7 +90,8 @@ limitations under the License.
   font-weight: 500;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-Medium.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-Medium.woff2") format("woff2"),
     url("/fonts/Inter/Inter-Medium.woff") format("woff");
 }
 
@@ -98,7 +101,8 @@ limitations under the License.
   font-weight: 500;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"),
     url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
 }
 
@@ -108,7 +112,8 @@ limitations under the License.
   font-weight: 600;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
     url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
 }
 
@@ -118,7 +123,8 @@ limitations under the License.
   font-weight: 600;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
     url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
 }
 
@@ -128,7 +134,8 @@ limitations under the License.
   font-weight: 700;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-Bold.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-Bold.woff2") format("woff2"),
     url("/fonts/Inter/Inter-Bold.woff") format("woff");
 }
 
@@ -138,7 +145,8 @@ limitations under the License.
   font-weight: 700;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
-  src: url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"),
+  src:
+    url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"),
     url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
 }
 

src/initializer.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/browser";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
@@ -35,11 +35,11 @@ enum LoadState {
 class DependencyLoadStates {
   // TODO: decide where olm should be initialized (see TODO comment below)
   // olm: LoadState = LoadState.None;
-  config: LoadState = LoadState.None;
-  sentry: LoadState = LoadState.None;
-  openTelemetry: LoadState = LoadState.None;
+  public config: LoadState = LoadState.None;
+  public sentry: LoadState = LoadState.None;
+  public openTelemetry: LoadState = LoadState.None;
 
-  allDepsAreLoaded() {
+  public allDepsAreLoaded(): boolean {
     return !Object.values(this).some((s) => s !== LoadState.Loaded);
   }
 }
@@ -52,7 +52,7 @@ export class Initializer {
     return Initializer.internalInstance?.isInitialized;
   }
 
-  public static initBeforeReact() {
+  public static initBeforeReact(): void {
     // this maybe also needs to return a promise in the future,
     // if we have to do async inits before showing the loading screen
     // but this should be avioded if possible
@@ -99,13 +99,13 @@ export class Initializer {
     if (fontScale !== null) {
       document.documentElement.style.setProperty(
         "--font-scale",
-        fontScale.toString()
+        fontScale.toString(),
       );
     }
     if (fonts.length > 0) {
       document.documentElement.style.setProperty(
         "--font-family",
-        fonts.map((f) => `"${f}"`).join(", ")
+        fonts.map((f) => `"${f}"`).join(", "),
       );
     }
 
@@ -126,9 +126,9 @@ export class Initializer {
     return Initializer.internalInstance.initPromise;
   }
 
-  loadStates = new DependencyLoadStates();
+  private loadStates = new DependencyLoadStates();
 
-  initStep(resolve: (value: void | PromiseLike<void>) => void) {
+  private initStep(resolve: (value: void | PromiseLike<void>) => void): void {
     // TODO: Olm is initialized with the client currently (see `initClient()` and `olm.ts`)
     // we need to decide if we want to init it here or keep it in initClient
     // if (this.loadStates.olm === LoadState.None) {
@@ -160,7 +160,7 @@ export class Initializer {
           dsn: Config.get().sentry?.DSN,
           environment: Config.get().sentry?.environment,
           integrations: [
-            new Integrations.BrowserTracing({
+            new BrowserTracing({
               routingInstrumentation:
                 Sentry.reactRouterV5Instrumentation(history),
             }),

src/input/AvatarInputField.tsx

@@ -52,7 +52,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
       onRemoveAvatar,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const { t } = useTranslation();
 
@@ -64,7 +64,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
     useEffect(() => {
       const currentInput = fileInputRef.current;
 
-      const onChange = (e: Event) => {
+      const onChange = (e: Event): void => {
         const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
         if (inputEvent.target.files && inputEvent.target.files.length > 0) {
           setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
@@ -76,7 +76,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
 
       currentInput.addEventListener("change", onChange);
 
-      return () => {
+      return (): void => {
         currentInput?.removeEventListener("change", onChange);
       };
     });
@@ -120,5 +120,5 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
         )}
       </div>
     );
-  }
+  },
 );

src/input/Input.module.css

@@ -85,8 +85,11 @@ limitations under the License.
 }
 
 .inputField label {
-  transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
-    top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
+  transition:
+    font-size 0.25s ease-out 0.1s,
+    color 0.25s ease-out 0.1s,
+    top 0.25s ease-out 0.1s,
+    background-color 0.25s ease-out 0.1s;
   color: var(--cpd-color-text-secondary);
   background-color: transparent;
   font-size: var(--font-size-body);
@@ -118,8 +121,11 @@ limitations under the License.
 .inputField textarea:not(:placeholder-shown) + label,
 .inputField.prefix textarea + label {
   background-color: var(--cpd-color-bg-canvas-default);
-  transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
-    top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+  transition:
+    font-size 0.25s ease-out 0s,
+    color 0.25s ease-out 0s,
+    top 0.25s ease-out 0s,
+    background-color 0.25s ease-out 0s;
   font-size: var(--font-size-micro);
   top: -13px;
   padding: 0 2px;

src/input/Input.tsx

@@ -44,7 +44,7 @@ export function FieldRow({
       className={classNames(
         styles.fieldRow,
         { [styles.rightAlign]: rightAlign },
-        className
+        className,
       )}
     >
       {children}
@@ -102,7 +102,7 @@ export const InputField = forwardRef<
       disabled,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const descriptionId = useId();
 
@@ -114,7 +114,7 @@ export const InputField = forwardRef<
             [styles.prefix]: !!prefix,
             [styles.disabled]: disabled,
           },
-          className
+          className,
         )}
       >
         {prefix && <span>{prefix}</span>}
@@ -163,7 +163,7 @@ export const InputField = forwardRef<
         )}
       </Field>
     );
-  }
+  },
 );
 
 interface ErrorMessageProps {

src/input/SelectInput.tsx

@@ -38,7 +38,7 @@ export function SelectInput(props: Props): JSX.Element {
   const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
     props,
     state,
-    ref
+    ref,
   );
 
   const { buttonProps } = useButton(triggerProps, ref);

src/input/StarRatingInput.tsx

@@ -41,8 +41,8 @@ export function StarRatingInput({
         return (
           <div
             className={styles.inputContainer}
-            onMouseEnter={() => setHover(index)}
-            onMouseLeave={() => setHover(rating)}
+            onMouseEnter={(): void => setHover(index)}
+            onMouseLeave={(): void => setHover(rating)}
             key={index}
           >
             <input
@@ -51,7 +51,7 @@ export function StarRatingInput({
               id={"starInput" + String(index)}
               value={String(index) + "Star"}
               name="star rating"
-              onChange={(_ev) => {
+              onChange={(_ev): void => {
                 setRating(index);
                 onChange(index);
               }}

src/livekit/MediaDevicesContext.tsx

@@ -51,8 +51,8 @@ export interface MediaDevices {
 // Cargo-culted from @livekit/components-react
 function useObservableState<T>(
   observable: Observable<T> | undefined,
-  startWith: T
-) {
+  startWith: T,
+): T {
   const [state, setState] = useState<T>(startWith);
   useEffect(() => {
     // observable state doesn't run in SSR
@@ -67,7 +67,7 @@ function useMediaDevice(
   kind: MediaDeviceKind,
   fallbackDevice: string | undefined,
   usingNames: boolean,
-  alwaysDefault: boolean = false
+  alwaysDefault: boolean = false,
 ): MediaDevice {
   // Make sure we don't needlessly reset to a device observer without names,
   // once permissions are already given
@@ -83,7 +83,7 @@ function useMediaDevice(
   // kind, which then results in multiple permissions requests.
   const deviceObserver = useMemo(
     () => createMediaDeviceObserver(kind, requestPermissions),
-    [kind, requestPermissions]
+    [kind, requestPermissions],
   );
   const available = useObservableState(deviceObserver, []);
   const [selectedId, select] = useState(fallbackDevice);
@@ -143,18 +143,18 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   const audioInput = useMediaDevice(
     "audioinput",
     audioInputSetting,
-    usingNames
+    usingNames,
   );
   const audioOutput = useMediaDevice(
     "audiooutput",
     audioOutputSetting,
     useOutputNames,
-    alwaysUseDefaultAudio
+    alwaysUseDefaultAudio,
   );
   const videoInput = useMediaDevice(
     "videoinput",
     videoInputSetting,
-    usingNames
+    usingNames,
   );
 
   useEffect(() => {
@@ -176,11 +176,11 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
 
   const startUsingDeviceNames = useCallback(
     () => setNumCallersUsingNames((n) => n + 1),
-    [setNumCallersUsingNames]
+    [setNumCallersUsingNames],
   );
   const stopUsingDeviceNames = useCallback(
     () => setNumCallersUsingNames((n) => n - 1),
-    [setNumCallersUsingNames]
+    [setNumCallersUsingNames],
   );
 
   const context: MediaDevices = useMemo(
@@ -197,7 +197,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
       videoInput,
       startUsingDeviceNames,
       stopUsingDeviceNames,
-    ]
+    ],
   );
 
   return (
@@ -207,7 +207,8 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   );
 };
 
-export const useMediaDevices = () => useContext(MediaDevicesContext);
+export const useMediaDevices = (): MediaDevices =>
+  useContext(MediaDevicesContext);
 
 /**
  * React hook that requests for the media devices context to be populated with
@@ -215,7 +216,10 @@ export const useMediaDevices = () => useContext(MediaDevicesContext);
  * default because it may involve requesting additional permissions from the
  * user.
  */
-export const useMediaDeviceNames = (context: MediaDevices, enabled = true) =>
+export const useMediaDeviceNames = (
+  context: MediaDevices,
+  enabled = true,
+): void =>
   useEffect(() => {
     if (enabled) {
       context.startUsingDeviceNames();

src/livekit/openIDSFU.ts

@@ -42,14 +42,14 @@ export type OpenIDClientParts = Pick<
 
 export function useOpenIDSFU(
   client: OpenIDClientParts,
-  rtcSession: MatrixRTCSession
-) {
+  rtcSession: MatrixRTCSession,
+): SFUConfig | undefined {
   const [sfuConfig, setSFUConfig] = useState<SFUConfig | undefined>(undefined);
 
   const activeFocus = useActiveFocus(rtcSession);
 
   useEffect(() => {
-    (async () => {
+    (async (): Promise<void> => {
       const sfuConfig = activeFocus
         ? await getSFUConfigWithOpenID(client, activeFocus)
         : undefined;
@@ -62,20 +62,20 @@ export function useOpenIDSFU(
 
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
-  activeFocus: LivekitFocus
+  activeFocus: LivekitFocus,
 ): Promise<SFUConfig | undefined> {
   const openIdToken = await client.getOpenIdToken();
   logger.debug("Got openID token", openIdToken);
 
   try {
     logger.info(
-      `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`
+      `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`,
     );
     const sfuConfig = await getLiveKitJWT(
       client,
       activeFocus.livekit_service_url,
       activeFocus.livekit_alias,
-      openIdToken
+      openIdToken,
     );
     logger.info(`Got JWT from call's active focus URL.`);
 
@@ -83,7 +83,7 @@ export async function getSFUConfigWithOpenID(
   } catch (e) {
     logger.warn(
       `Failed to get JWT from RTC session's active focus URL of ${activeFocus.livekit_service_url}.`,
-      e
+      e,
     );
     return undefined;
   }
@@ -93,7 +93,7 @@ async function getLiveKitJWT(
   client: OpenIDClientParts,
   livekitServiceURL: string,
   roomName: string,
-  openIDToken: IOpenIDToken
+  openIDToken: IOpenIDToken,
 ): Promise<SFUConfig> {
   try {
     const res = await fetch(livekitServiceURL + "/sfu/get", {

src/livekit/options.ts

@@ -1,3 +1,19 @@
+/*
+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 {
   AudioPresets,
   DefaultReconnectPolicy,

src/livekit/useECConnectionState.ts

@@ -17,11 +17,14 @@ limitations under the License.
 import {
   AudioCaptureOptions,
   ConnectionState,
+  LocalTrack,
   Room,
   RoomEvent,
+  Track,
 } from "livekit-client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
+import * as Sentry from "@sentry/react";
 
 import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
 
@@ -51,15 +54,24 @@ async function doConnect(
   livekitRoom: Room,
   sfuConfig: SFUConfig,
   audioEnabled: boolean,
-  audioOptions: AudioCaptureOptions
+  audioOptions: AudioCaptureOptions,
 ): Promise<void> {
-  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
-
   // Always create an audio track manually.
   // livekit (by default) keeps the mic track open when you mute, but if you start muted,
   // doesn't publish it until you unmute. We want to publish it from the start so we're
   // always capturing audio: it helps keep bluetooth headsets in the right mode and
   // mobile browsers to know we're doing a call.
+  if (livekitRoom!.localParticipant.getTrack(Track.Source.Microphone)) {
+    logger.warn(
+      "Pre-creating audio track but participant already appears to have an microphone track: this shouldn't happen!",
+    );
+    Sentry.captureMessage(
+      "Pre-creating audio track but participant already appears to have an microphone track!",
+    );
+    return;
+  }
+
+  logger.info("Pre-creating microphone track");
   const audioTracks = await livekitRoom!.localParticipant.createTracks({
     audio: audioOptions,
   });
@@ -69,19 +81,72 @@ async function doConnect(
   }
   if (!audioEnabled) await audioTracks[0].mute();
 
-  await livekitRoom?.localParticipant.publishTrack(audioTracks[0]);
+  logger.info("Pre-created microphone track");
+
+  // check again having awaited for the track to create
+  if (livekitRoom!.localParticipant.getTrack(Track.Source.Microphone)) {
+    logger.warn(
+      "Publishing pre-created audio track but participant already appears to have an microphone track: this shouldn't happen!",
+    );
+    for (const t of audioTracks) {
+      t.stop();
+    }
+    return;
+  }
+
+  logger.info("Connecting & publishing");
+  try {
+    await connectAndPublish(livekitRoom, sfuConfig, audioTracks[0], []);
+  } catch (e) {
+    for (const t of audioTracks) {
+      t.stop();
+    }
+  }
+}
+
+/**
+ * Connect to the SFU and publish specific tracks, if provided.
+ * This is very specific to what we need to do: for instance, we don't
+ * currently have a need to prepublish video tracks. We just prepublish
+ * a mic track at the start of a call and copy any srceenshare tracks over
+ * when switching focus (because we can't re-acquire them without the user
+ * going through the dialog to choose them again).
+ */
+async function connectAndPublish(
+  livekitRoom: Room,
+  sfuConfig: SFUConfig,
+  micTrack: LocalTrack | undefined,
+  screenshareTracks: MediaStreamTrack[],
+): Promise<void> {
+  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
+
+  if (micTrack) {
+    logger.info(`Publishing precreated mic track`);
+    await livekitRoom.localParticipant.publishTrack(micTrack, {
+      source: Track.Source.Microphone,
+    });
+  }
+
+  logger.info(
+    `Publishing ${screenshareTracks.length} precreated screenshare tracks`,
+  );
+  for (const st of screenshareTracks) {
+    livekitRoom.localParticipant.publishTrack(st, {
+      source: Track.Source.ScreenShare,
+    });
+  }
 }
 
 export function useECConnectionState(
   initialAudioOptions: AudioCaptureOptions,
   initialAudioEnabled: boolean,
   livekitRoom?: Room,
-  sfuConfig?: SFUConfig
+  sfuConfig?: SFUConfig,
 ): ECConnectionState {
   const [connState, setConnState] = useState(
     sfuConfig && livekitRoom
       ? livekitRoom.state
-      : ECAddonConnectionState.ECWaiting
+      : ECAddonConnectionState.ECWaiting,
   );
 
   const [isSwitchingFocus, setSwitchingFocus] = useState(false);
@@ -105,6 +170,33 @@ export function useECConnectionState(
     };
   }, [livekitRoom, onConnStateChanged]);
 
+  const doFocusSwitch = useCallback(async (): Promise<void> => {
+    const screenshareTracks: MediaStreamTrack[] = [];
+    for (const t of livekitRoom!.localParticipant.videoTracks.values()) {
+      if (t.track && t.source == Track.Source.ScreenShare) {
+        const newTrack = t.track.mediaStreamTrack.clone();
+        newTrack.enabled = true;
+        screenshareTracks.push(newTrack);
+      }
+    }
+
+    // Flag that we're currently switching focus. This will get reset when the
+    // connection state changes back to connected in onConnStateChanged above.
+    setSwitchingFocus(true);
+    await livekitRoom?.disconnect();
+    setIsInDoConnect(true);
+    try {
+      await connectAndPublish(
+        livekitRoom!,
+        sfuConfig!,
+        undefined,
+        screenshareTracks,
+      );
+    } finally {
+      setIsInDoConnect(false);
+    }
+  }, [livekitRoom, sfuConfig]);
+
   const currentSFUConfig = useRef(Object.assign({}, sfuConfig));
 
   // Id we are transitioning from a valid config to another valid one, we need
@@ -116,24 +208,10 @@ export function useECConnectionState(
       !sfuConfigEquals(currentSFUConfig.current, sfuConfig)
     ) {
       logger.info(
-        `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`
+        `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`,
       );
 
-      (async () => {
-        setSwitchingFocus(true);
-        await livekitRoom?.disconnect();
-        setIsInDoConnect(true);
-        try {
-          await doConnect(
-            livekitRoom!,
-            sfuConfig!,
-            initialAudioEnabled,
-            initialAudioOptions
-          );
-        } finally {
-          setIsInDoConnect(false);
-        }
-      })();
+      doFocusSwitch();
     } else if (
       !sfuConfigValid(currentSFUConfig.current) &&
       sfuConfigValid(sfuConfig)
@@ -149,12 +227,18 @@ export function useECConnectionState(
         livekitRoom!,
         sfuConfig!,
         initialAudioEnabled,
-        initialAudioOptions
+        initialAudioOptions,
       ).finally(() => setIsInDoConnect(false));
     }
 
     currentSFUConfig.current = Object.assign({}, sfuConfig);
-  }, [sfuConfig, livekitRoom, initialAudioOptions, initialAudioEnabled]);
+  }, [
+    sfuConfig,
+    livekitRoom,
+    initialAudioOptions,
+    initialAudioEnabled,
+    doFocusSwitch,
+  ]);
 
   // Because we create audio tracks by hand, there's more to connecting than
   // just what LiveKit does in room.connect, and we should continue to return

src/livekit/useLiveKit.ts

@@ -20,11 +20,12 @@ import {
   ExternalE2EEKeyProvider,
   Room,
   RoomOptions,
+  Track,
 } from "livekit-client";
-import { useLiveKitRoom } from "@livekit/components-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 import { defaultLiveKitOptions } from "./options";
 import { SFUConfig } from "./openIDSFU";
@@ -38,9 +39,12 @@ import {
   ECConnectionState,
   useECConnectionState,
 } from "./useECConnectionState";
+import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
+import { E2eeType } from "../e2ee/e2eeType";
 
 export type E2EEConfig = {
-  sharedKey: string;
+  mode: E2eeType;
+  sharedKey?: string;
 };
 
 interface UseLivekitResult {
@@ -49,26 +53,44 @@ interface UseLivekitResult {
 }
 
 export function useLiveKit(
+  rtcSession: MatrixRTCSession,
   muteStates: MuteStates,
-  sfuConfig?: SFUConfig,
-  e2eeConfig?: E2EEConfig
+  sfuConfig: SFUConfig | undefined,
+  e2eeConfig: E2EEConfig,
 ): UseLivekitResult {
-  const e2eeOptions = useMemo(() => {
-    if (!e2eeConfig?.sharedKey) return undefined;
+  const e2eeOptions = useMemo((): E2EEOptions | undefined => {
+    if (e2eeConfig.mode === E2eeType.NONE) return undefined;
 
-    return {
-      keyProvider: new ExternalE2EEKeyProvider(),
-      worker: new E2EEWorker(),
-    } as E2EEOptions;
+    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+      return {
+        keyProvider: new MatrixKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    } else if (
+      e2eeConfig.mode === E2eeType.SHARED_KEY &&
+      e2eeConfig.sharedKey
+    ) {
+      return {
+        keyProvider: new ExternalE2EEKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    }
   }, [e2eeConfig]);
 
   useEffect(() => {
-    if (!e2eeConfig?.sharedKey || !e2eeOptions) return;
+    if (e2eeConfig.mode === E2eeType.NONE || !e2eeOptions) return;
 
-    (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
-      e2eeConfig?.sharedKey
-    );
-  }, [e2eeOptions, e2eeConfig?.sharedKey]);
+    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+      (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
+    } else if (
+      e2eeConfig.mode === E2eeType.SHARED_KEY &&
+      e2eeConfig.sharedKey
+    ) {
+      (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
+        e2eeConfig.sharedKey,
+      );
+    }
+  }, [e2eeOptions, e2eeConfig, rtcSession]);
 
   const initialMuteStates = useRef<MuteStates>(muteStates);
   const devices = useMediaDevices();
@@ -92,41 +114,38 @@ export function useLiveKit(
       },
       e2ee: e2eeOptions,
     }),
-    [e2eeOptions]
+    [e2eeOptions],
   );
 
-  // useECConnectionState creates and publishes an audio track by hand. To keep
-  // this from racing with LiveKit's automatic creation of the audio track, we
-  // block audio from being enabled until the connection is finished.
-  const [blockAudio, setBlockAudio] = useState(true);
+  // Store if audio/video are currently updating. If to prohibit unnecessary calls
+  // to setMicrophoneEnabled/setCameraEnabled
+  const audioMuteUpdating = useRef(false);
+  const videoMuteUpdating = useRef(false);
+  // Store the current button mute state that gets passed to this hook via props.
+  // We need to store it for awaited code that relies on the current value.
+  const buttonEnabled = useRef({
+    audio: initialMuteStates.current.audio.enabled,
+    video: initialMuteStates.current.video.enabled,
+  });
 
   // We have to create the room manually here due to a bug inside
   // @livekit/components-react. JSON.stringify() is used in deps of a
   // useEffect() with an argument that references itself, if E2EE is enabled
-  const roomWithoutProps = useMemo(() => new Room(roomOptions), [roomOptions]);
-  const { room } = useLiveKitRoom({
-    token: sfuConfig?.jwt,
-    serverUrl: sfuConfig?.url,
-    audio: initialMuteStates.current.audio.enabled && !blockAudio,
-    video: initialMuteStates.current.video.enabled,
-    room: roomWithoutProps,
-    connect: false,
-  });
+  const room = useMemo(() => {
+    const r = new Room(roomOptions);
+    r.setE2EEEnabled(e2eeConfig.mode !== E2eeType.NONE);
+    return r;
+  }, [roomOptions, e2eeConfig]);
 
   const connectionState = useECConnectionState(
     {
-      deviceId: initialDevices.current.audioOutput.selectedId,
+      deviceId: initialDevices.current.audioInput.selectedId,
     },
     initialMuteStates.current.audio.enabled,
     room,
-    sfuConfig
+    sfuConfig,
   );
 
-  // Unblock audio once the connection is finished
-  useEffect(() => {
-    if (connectionState === ConnectionState.Connected) setBlockAudio(false);
-  }, [connectionState, setBlockAudio]);
-
   useEffect(() => {
     // Sync the requested mute states with LiveKit's mute states. We do it this
     // way around rather than using LiveKit as the source of truth, so that the
@@ -136,34 +155,163 @@ export function useLiveKit(
     // and setting tracks to be enabled during this time causes errors.
     if (room !== undefined && connectionState === ConnectionState.Connected) {
       const participant = room.localParticipant;
-      if (participant.isMicrophoneEnabled !== muteStates.audio.enabled) {
-        participant
-          .setMicrophoneEnabled(muteStates.audio.enabled)
-          .catch((e) =>
-            logger.error("Failed to sync audio mute state with LiveKit", e)
-          );
+      // Always update the muteButtonState Ref so that we can read the current
+      // state in awaited blocks.
+      buttonEnabled.current = {
+        audio: muteStates.audio.enabled,
+        video: muteStates.video.enabled,
+      };
+
+      enum MuteDevice {
+        Microphone,
+        Camera,
       }
-      if (participant.isCameraEnabled !== muteStates.video.enabled) {
-        participant
-          .setCameraEnabled(muteStates.video.enabled)
-          .catch((e) =>
-            logger.error("Failed to sync video mute state with LiveKit", e)
+
+      const syncMuteState = async (
+        iterCount: number,
+        type: MuteDevice,
+      ): Promise<void> => {
+        // The approach for muting is to always bring the actual livekit state in sync with the button
+        // This allows for a very predictable and reactive behavior for the user.
+        // (the new state is the old state when pressing the button n times (where n is even))
+        // (the new state is different to the old state when pressing the button n times (where n is uneven))
+        // In case there are issues with the device there might be situations where setMicrophoneEnabled/setCameraEnabled
+        // return immediately. This should be caught with the Error("track with new mute state could not be published").
+        // For now we are still using an iterCount to limit the recursion loop to 10.
+        // This could happen if the device just really does not want to turn on (hardware based issue)
+        // but the mute button is in unmute state.
+        // For now our fail mode is to just stay in this state.
+        // TODO: decide for a UX on how that fail mode should be treated (disable button, hide button, sync button back to muted without user input)
+
+        if (iterCount > 10) {
+          logger.error(
+            "Stop trying to sync the input device with current mute state after 10 failed tries",
           );
-      }
+          return;
+        }
+        let devEnabled;
+        let btnEnabled;
+        let updating;
+        switch (type) {
+          case MuteDevice.Microphone:
+            devEnabled = participant.isMicrophoneEnabled;
+            btnEnabled = buttonEnabled.current.audio;
+            updating = audioMuteUpdating.current;
+            break;
+          case MuteDevice.Camera:
+            devEnabled = participant.isCameraEnabled;
+            btnEnabled = buttonEnabled.current.video;
+            updating = videoMuteUpdating.current;
+            break;
+        }
+        if (devEnabled !== btnEnabled && !updating) {
+          try {
+            let trackPublication;
+            switch (type) {
+              case MuteDevice.Microphone:
+                audioMuteUpdating.current = true;
+                trackPublication = await participant.setMicrophoneEnabled(
+                  buttonEnabled.current.audio,
+                );
+                audioMuteUpdating.current = false;
+                break;
+              case MuteDevice.Camera:
+                videoMuteUpdating.current = true;
+                trackPublication = await participant.setCameraEnabled(
+                  buttonEnabled.current.video,
+                );
+                videoMuteUpdating.current = false;
+                break;
+            }
+
+            if (trackPublication) {
+              // await participant.setMicrophoneEnabled can return immediately in some instances,
+              // so that participant.isMicrophoneEnabled !== buttonEnabled.current.audio still holds true.
+              // This happens if the device is still in a pending state
+              // "sleeping" here makes sure we let react do its thing so that participant.isMicrophoneEnabled is updated,
+              // so we do not end up in a recursion loop.
+              await new Promise((r) => setTimeout(r, 100));
+
+              // track got successfully changed to mute/unmute
+              // Run the check again after the change is done. Because the user
+              // can update the state (presses mute button) while the device is enabling
+              // itself we need might need to update the mute state right away.
+              // This async recursion makes sure that setCamera/MicrophoneEnabled is
+              // called as little times as possible.
+              syncMuteState(iterCount + 1, type);
+            } else {
+              throw new Error(
+                "track with new mute state could not be published",
+              );
+            }
+          } catch (e) {
+            logger.error(
+              "Failed to sync audio mute state with LiveKit (will retry to sync in 1s):",
+              e,
+            );
+            setTimeout(() => syncMuteState(iterCount + 1, type), 1000);
+          }
+        }
+      };
+
+      syncMuteState(0, MuteDevice.Microphone);
+      syncMuteState(0, MuteDevice.Camera);
     }
   }, [room, muteStates, connectionState]);
 
   useEffect(() => {
     // Sync the requested devices with LiveKit's devices
     if (room !== undefined && connectionState === ConnectionState.Connected) {
-      const syncDevice = (kind: MediaDeviceKind, device: MediaDevice) => {
+      const syncDevice = (kind: MediaDeviceKind, device: MediaDevice): void => {
         const id = device.selectedId;
-        if (id !== undefined && room.getActiveDevice(kind) !== id) {
-          room
-            .switchActiveDevice(kind, id)
-            .catch((e) =>
-              logger.error(`Failed to sync ${kind} device with LiveKit`, e)
-            );
+
+        // Detect if we're trying to use chrome's default device, in which case
+        // we need to to see if the default device has changed to a different device
+        // by comparing the group ID of the device we're using against the group ID
+        // of what the default device is *now*.
+        // This is special-cased for only audio inputs because we need to dig around
+        // in the LocalParticipant object for the track object and there's not a nice
+        // way to do that generically. There is usually no OS-level default video capture
+        // device anyway, and audio outputs work differently.
+        if (
+          id === "default" &&
+          kind === "audioinput" &&
+          room.options.audioCaptureDefaults?.deviceId === "default"
+        ) {
+          const activeMicTrack = Array.from(
+            room.localParticipant.audioTracks.values(),
+          ).find((d) => d.source === Track.Source.Microphone)?.track;
+
+          const defaultDevice = device.available.find(
+            (d) => d.deviceId === "default",
+          );
+          if (
+            defaultDevice &&
+            activeMicTrack &&
+            // only restart if the stream is still running: LiveKit will detect
+            // when a track stops & restart appropriately, so this is not our job.
+            // Plus, we need to avoid restarting again if the track is already in
+            // the process of being restarted.
+            activeMicTrack.mediaStreamTrack.readyState !== "ended" &&
+            defaultDevice.groupId !==
+              activeMicTrack.mediaStreamTrack.getSettings().groupId
+          ) {
+            // It's different, so restart the track, ie. cause Livekit to do another
+            // getUserMedia() call with deviceId: default to get the *new* default device.
+            // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
+            // the deviceId hasn't changed (was & still is default).
+            room.localParticipant
+              .getTrack(Track.Source.Microphone)
+              ?.audioTrack?.restartTrack();
+          }
+        } else {
+          if (id !== undefined && room.getActiveDevice(kind) !== id) {
+            room
+              .switchActiveDevice(kind, id)
+              .catch((e) =>
+                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
+              );
+          }
         }
       };
 

src/main.tsx

@@ -30,7 +30,7 @@ import {
   setLogLevel,
 } from "livekit-client";
 
-import App from "./App";
+import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
 import { Initializer } from "./initializer";
 
@@ -48,7 +48,7 @@ if (!window.isSecureContext) {
   fatalError = new Error(
     "This app cannot run in an insecure context. To fix this, access the app " +
       "via a local loopback address, or serve it over HTTPS.\n" +
-      "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts"
+      "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts",
   );
 } else if (!navigator.mediaDevices) {
   fatalError = new Error("Your browser does not support WebRTC.");
@@ -66,5 +66,5 @@ const history = createBrowserHistory();
 root.render(
   <StrictMode>
     <App history={history} />
-  </StrictMode>
+  </StrictMode>,
 );

src/matrix-utils.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-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.
@@ -28,6 +28,7 @@ import {
   GroupCallIntent,
   GroupCallType,
 } from "matrix-js-sdk/src/webrtc/groupCall";
+import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
@@ -35,12 +36,15 @@ import IndexedDBWorker from "./IndexedDBWorker?worker";
 import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
 import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
+import { setLocalStorageItem } from "./useLocalStorage";
+import { getRoomSharedKeyLocalStorageKey } from "./e2ee/sharedKeyManagement";
+import { E2eeType } from "./e2ee/e2eeType";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
 
 export class CryptoStoreIntegrityError extends Error {
-  constructor() {
+  public constructor() {
     super("Crypto store data was expected, but none was found");
   }
 }
@@ -52,13 +56,13 @@ const SYNC_STORE_NAME = "element-call-sync";
 // (It's a good opportunity to make the database names consistent.)
 const CRYPTO_STORE_NAME = "element-call-crypto";
 
-function waitForSync(client: MatrixClient) {
+function waitForSync(client: MatrixClient): Promise<void> {
   return new Promise<void>((resolve, reject) => {
     const onSync = (
       state: SyncState,
       _old: SyncState | null,
-      data?: ISyncStateData
-    ) => {
+      data?: ISyncStateData,
+    ): void => {
       if (state === "PREPARED") {
         client.removeListener(ClientEvent.Sync, onSync);
         resolve();
@@ -82,7 +86,7 @@ function waitForSync(client: MatrixClient) {
  */
 export async function initClient(
   clientOptions: ICreateClientOpts,
-  restore: boolean
+  restore: boolean,
 ): Promise<MatrixClient> {
   await loadOlm();
 
@@ -108,7 +112,7 @@ export async function initClient(
       // Chrome supports it. (It bundles them fine in production mode.)
       workerFactory: import.meta.env.DEV
         ? undefined
-        : () => new IndexedDBWorker(),
+        : (): Worker => new IndexedDBWorker(),
     });
   } else if (localStorage) {
     baseOpts.store = new MemoryStore({ localStorage });
@@ -129,7 +133,7 @@ export async function initClient(
     if (indexedDB) {
       const cryptoStoreExists = await IndexedDBCryptoStore.exists(
         indexedDB,
-        CRYPTO_STORE_NAME
+        CRYPTO_STORE_NAME,
       );
       if (!cryptoStoreExists) throw new CryptoStoreIntegrityError();
     } else if (localStorage) {
@@ -145,7 +149,7 @@ export async function initClient(
   if (indexedDB) {
     baseOpts.cryptoStore = new IndexedDBCryptoStore(
       indexedDB,
-      CRYPTO_STORE_NAME
+      CRYPTO_STORE_NAME,
     );
   } else if (localStorage) {
     baseOpts.cryptoStore = new LocalStorageCryptoStore(localStorage);
@@ -179,7 +183,7 @@ export async function initClient(
   } catch (error) {
     logger.error(
       "Error starting matrix client store. Falling back to memory store.",
-      error
+      error,
     );
     client.store = new MemoryStore({ localStorage });
     await client.store.startup();
@@ -249,7 +253,7 @@ export function roomNameFromRoomId(roomId: string): string {
     .substring(1)
     .split("-")
     .map((part) =>
-      part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part
+      part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part,
     )
     .join(" ")
     .toLowerCase();
@@ -269,11 +273,27 @@ export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
   return parts[1] === client.getDomain();
 }
 
+interface CreateRoomResult {
+  roomId: string;
+  alias?: string;
+  password?: string;
+}
+
+/**
+ * Create a new room ready for calls
+ *
+ * @param client Matrix client to use
+ * @param name The name of the room
+ * @param e2ee The type of e2ee call to create. Note that we would currently never
+ *             create a room for per-participant e2ee calls: since it's used in
+ *             embedded mode, we use the existing room.
+ * @returns Object holding information about the new room
+ */
 export async function createRoom(
   client: MatrixClient,
   name: string,
-  e2ee: boolean
-): Promise<[string, string]> {
+  e2ee: E2eeType,
+): Promise<CreateRoomResult> {
   logger.log(`Creating room for group call`);
   const createPromise = client.createRoom({
     visibility: Visibility.Private,
@@ -307,7 +327,7 @@ export async function createRoom(
 
   // Wait for the room to arrive
   await new Promise<void>((resolve, reject) => {
-    const onRoom = async (room: Room) => {
+    const onRoom = async (room: Room): Promise<void> => {
       if (room.roomId === (await createPromise).room_id) {
         resolve();
         cleanUp();
@@ -318,7 +338,7 @@ export async function createRoom(
       cleanUp();
     });
 
-    const cleanUp = () => {
+    const cleanUp = (): void => {
       client.off(ClientEvent.Room, onRoom);
     };
     client.on(ClientEvent.Room, onRoom);
@@ -333,10 +353,23 @@ export async function createRoom(
     GroupCallType.Video,
     false,
     GroupCallIntent.Room,
-    true
+    true,
   );
 
-  return [fullAliasFromRoomName(name, client), result.room_id];
+  let password;
+  if (e2ee == E2eeType.SHARED_KEY) {
+    password = secureRandomBase64Url(16);
+    setLocalStorageItem(
+      getRoomSharedKeyLocalStorageKey(result.room_id),
+      password,
+    );
+  }
+
+  return {
+    roomId: result.room_id,
+    alias: e2ee ? undefined : fullAliasFromRoomName(name, client),
+    password,
+  };
 }
 
 /**
@@ -348,7 +381,7 @@ export async function createRoom(
 export function getAbsoluteRoomUrl(
   roomId: string,
   roomName?: string,
-  password?: string
+  password?: string,
 ): string {
   return `${window.location.protocol}//${
     window.location.host
@@ -364,17 +397,24 @@ export function getAbsoluteRoomUrl(
 export function getRelativeRoomUrl(
   roomId: string,
   roomName?: string,
-  password?: string
+  password?: string,
 ): string {
+  // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
+  // it in case it came from another client that generated a non url-safe one
+  const encodedPassword = password ? encodeURIComponent(password) : undefined;
+  if (password && encodedPassword !== password) {
+    logger.info("Encoded call password used non URL-safe chars: buggy client?");
+  }
+
   return `/room/#${
     roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
-  }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
+  }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + encodedPassword : ""}`;
 }
 
 export function getAvatarUrl(
   client: MatrixClient,
   mxcUrl: string,
-  avatarSize = 96
+  avatarSize = 96,
 ): string {
   const width = Math.floor(avatarSize * window.devicePixelRatio);
   const height = Math.floor(avatarSize * window.devicePixelRatio);

src/media-utils.ts

@@ -23,10 +23,10 @@ limitations under the License.
 export async function findDeviceByName(
   deviceName: string,
   kind: MediaDeviceKind,
-  devices: MediaDeviceInfo[]
+  devices: MediaDeviceInfo[],
 ): Promise<string | undefined> {
   const deviceInfo = devices.find(
-    (d) => d.kind === kind && d.label === deviceName
+    (d) => d.kind === kind && d.label === deviceName,
   );
   return deviceInfo?.deviceId;
 }

src/otel/OTelCall.ts

@@ -44,65 +44,65 @@ export class OTelCall {
     OTelCallAbstractMediaStreamSpan
   >();
 
-  constructor(
+  public constructor(
     public userId: string,
     public deviceId: string,
     public call: MatrixCall,
-    public span: Span
+    public span: Span,
   ) {
     if (call.peerConn) {
       this.addCallPeerConnListeners();
     } else {
       this.call.once(
         CallEvent.PeerConnectionCreated,
-        this.addCallPeerConnListeners
+        this.addCallPeerConnListeners,
       );
     }
   }
 
-  public dispose() {
+  public dispose(): void {
     this.call.peerConn?.removeEventListener(
       "connectionstatechange",
-      this.onCallConnectionStateChanged
+      this.onCallConnectionStateChanged,
     );
     this.call.peerConn?.removeEventListener(
       "signalingstatechange",
-      this.onCallSignalingStateChanged
+      this.onCallSignalingStateChanged,
     );
     this.call.peerConn?.removeEventListener(
       "iceconnectionstatechange",
-      this.onIceConnectionStateChanged
+      this.onIceConnectionStateChanged,
     );
     this.call.peerConn?.removeEventListener(
       "icegatheringstatechange",
-      this.onIceGatheringStateChanged
+      this.onIceGatheringStateChanged,
     );
     this.call.peerConn?.removeEventListener(
       "icecandidateerror",
-      this.onIceCandidateError
+      this.onIceCandidateError,
     );
   }
 
   private addCallPeerConnListeners = (): void => {
     this.call.peerConn?.addEventListener(
       "connectionstatechange",
-      this.onCallConnectionStateChanged
+      this.onCallConnectionStateChanged,
     );
     this.call.peerConn?.addEventListener(
       "signalingstatechange",
-      this.onCallSignalingStateChanged
+      this.onCallSignalingStateChanged,
     );
     this.call.peerConn?.addEventListener(
       "iceconnectionstatechange",
-      this.onIceConnectionStateChanged
+      this.onIceConnectionStateChanged,
     );
     this.call.peerConn?.addEventListener(
       "icegatheringstatechange",
-      this.onIceGatheringStateChanged
+      this.onIceGatheringStateChanged,
     );
     this.call.peerConn?.addEventListener(
       "icecandidateerror",
-      this.onIceCandidateError
+      this.onIceCandidateError,
     );
   };
 
@@ -147,8 +147,8 @@ export class OTelCall {
           new OTelCallFeedMediaStreamSpan(
             ElementCallOpenTelemetry.instance,
             this.span,
-            feed
-          )
+            feed,
+          ),
         );
       }
       this.trackFeedSpan.get(feed.stream)?.update(feed);
@@ -171,13 +171,13 @@ export class OTelCall {
           new OTelCallTransceiverMediaStreamSpan(
             ElementCallOpenTelemetry.instance,
             this.span,
-            transStats
-          )
+            transStats,
+          ),
         );
       }
       this.trackTransceiverSpan.get(transStats.mid)?.update(transStats);
       prvTransSpan = prvTransSpan.filter(
-        (prvStreamId) => prvStreamId !== transStats.mid
+        (prvStreamId) => prvStreamId !== transStats.mid,
       );
     });
 
@@ -190,7 +190,7 @@ export class OTelCall {
   public end(): void {
     this.trackFeedSpan.forEach((feedSpan) => feedSpan.end());
     this.trackTransceiverSpan.forEach((transceiverSpan) =>
-      transceiverSpan.end()
+      transceiverSpan.end(),
     );
     this.span.end();
   }

src/otel/OTelCallAbstractMediaStreamSpan.ts

@@ -1,3 +1,19 @@
+/*
+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 opentelemetry, { Span } from "@opentelemetry/api";
 import { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
@@ -14,13 +30,13 @@ export abstract class OTelCallAbstractMediaStreamSpan {
   public readonly span;
 
   public constructor(
-    readonly oTel: ElementCallOpenTelemetry,
-    readonly callSpan: Span,
-    protected readonly type: string
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly callSpan: Span,
+    protected readonly type: string,
   ) {
     const ctx = opentelemetry.trace.setSpan(
       opentelemetry.context.active(),
-      callSpan
+      callSpan,
     );
     const options = {
       links: [
@@ -32,13 +48,13 @@ export abstract class OTelCallAbstractMediaStreamSpan {
     this.span = oTel.tracer.startSpan(this.type, options, ctx);
   }
 
-  protected upsertTrackSpans(tracks: TrackStats[]) {
+  protected upsertTrackSpans(tracks: TrackStats[]): void {
     let prvTracks: TrackId[] = [...this.trackSpans.keys()];
     tracks.forEach((t) => {
       if (!this.trackSpans.has(t.id)) {
         this.trackSpans.set(
           t.id,
-          new OTelCallMediaStreamTrackSpan(this.oTel, this.span, t)
+          new OTelCallMediaStreamTrackSpan(this.oTel, this.span, t),
         );
       }
       this.trackSpans.get(t.id)?.update(t);

src/otel/OTelCallFeedMediaStreamSpan.ts

@@ -1,3 +1,19 @@
+/*
+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 { Span } from "@opentelemetry/api";
 import {
   CallFeedStats,
@@ -10,10 +26,10 @@ import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSp
 export class OTelCallFeedMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {
   private readonly prev: { isAudioMuted: boolean; isVideoMuted: boolean };
 
-  constructor(
-    readonly oTel: ElementCallOpenTelemetry,
-    readonly callSpan: Span,
-    callFeed: CallFeedStats
+  public constructor(
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly callSpan: Span,
+    callFeed: CallFeedStats,
   ) {
     const postFix =
       callFeed.type === "local" && callFeed.prefix === "from-call-feed"

src/otel/OTelCallMediaStreamTrackSpan.ts

@@ -1,3 +1,19 @@
+/*
+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 { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 import opentelemetry, { Span } from "@opentelemetry/api";
 
@@ -8,13 +24,13 @@ export class OTelCallMediaStreamTrackSpan {
   private prev: TrackStats;
 
   public constructor(
-    readonly oTel: ElementCallOpenTelemetry,
-    readonly streamSpan: Span,
-    data: TrackStats
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly streamSpan: Span,
+    data: TrackStats,
   ) {
     const ctx = opentelemetry.trace.setSpan(
       opentelemetry.context.active(),
-      streamSpan
+      streamSpan,
     );
     const options = {
       links: [

src/otel/OTelCallTransceiverMediaStreamSpan.ts

@@ -1,3 +1,19 @@
+/*
+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 { Span } from "@opentelemetry/api";
 import {
   TrackStats,
@@ -13,10 +29,10 @@ export class OTelCallTransceiverMediaStreamSpan extends OTelCallAbstractMediaStr
     currentDirection: string;
   };
 
-  constructor(
-    readonly oTel: ElementCallOpenTelemetry,
-    readonly callSpan: Span,
-    stats: TransceiverStats
+  public constructor(
+    protected readonly oTel: ElementCallOpenTelemetry,
+    protected readonly callSpan: Span,
+    stats: TransceiverStats,
   ) {
     super(oTel, callSpan, `matrix.call.transceiver.${stats.mid}`);
     this.span.setAttribute("transceiver.mid", stats.mid);

src/otel/OTelGroupCallMembership.ts

@@ -62,7 +62,10 @@ export class OTelGroupCallMembership {
   };
   private readonly speakingSpans = new Map<RoomMember, Map<string, Span>>();
 
-  constructor(private groupCall: GroupCall, client: MatrixClient) {
+  public constructor(
+    private groupCall: GroupCall,
+    client: MatrixClient,
+  ) {
     const clientId = client.getUserId();
     if (clientId) {
       this.myUserId = clientId;
@@ -76,14 +79,14 @@ export class OTelGroupCallMembership {
     this.groupCall.on(GroupCallEvent.CallsChanged, this.onCallsChanged);
   }
 
-  dispose() {
+  public dispose(): void {
     this.groupCall.removeListener(
       GroupCallEvent.CallsChanged,
-      this.onCallsChanged
+      this.onCallsChanged,
     );
   }
 
-  public onJoinCall() {
+  public onJoinCall(): void {
     if (!ElementCallOpenTelemetry.instance) return;
     if (this.callMembershipSpan !== undefined) {
       logger.warn("Call membership span is already started");
@@ -93,28 +96,28 @@ export class OTelGroupCallMembership {
     // Create the main span that tracks the time we intend to be in the call
     this.callMembershipSpan =
       ElementCallOpenTelemetry.instance.tracer.startSpan(
-        "matrix.groupCallMembership"
+        "matrix.groupCallMembership",
       );
     this.callMembershipSpan.setAttribute(
       "matrix.confId",
-      this.groupCall.groupCallId
+      this.groupCall.groupCallId,
     );
     this.callMembershipSpan.setAttribute("matrix.userId", this.myUserId);
     this.callMembershipSpan.setAttribute("matrix.deviceId", this.myDeviceId);
     this.callMembershipSpan.setAttribute(
       "matrix.displayName",
-      this.myMember ? this.myMember.name : "unknown-name"
+      this.myMember ? this.myMember.name : "unknown-name",
     );
 
     this.groupCallContext = opentelemetry.trace.setSpan(
       opentelemetry.context.active(),
-      this.callMembershipSpan
+      this.callMembershipSpan,
     );
 
     this.callMembershipSpan?.addEvent("matrix.joinCall");
   }
 
-  public onLeaveCall() {
+  public onLeaveCall(): void {
     if (this.callMembershipSpan === undefined) {
       logger.warn("Call membership span is already ended");
       return;
@@ -127,7 +130,7 @@ export class OTelGroupCallMembership {
     this.groupCallContext = undefined;
   }
 
-  public onUpdateRoomState(event: MatrixEvent) {
+  public onUpdateRoomState(event: MatrixEvent): void {
     if (
       !event ||
       (!event.getType().startsWith("m.call") &&
@@ -138,11 +141,11 @@ export class OTelGroupCallMembership {
 
     this.callMembershipSpan?.addEvent(
       `matrix.roomStateEvent_${event.getType()}`,
-      ObjectFlattener.flattenVoipEvent(event.getContent())
+      ObjectFlattener.flattenVoipEvent(event.getContent()),
     );
   }
 
-  public onCallsChanged = (calls: CallsByUserAndDevice) => {
+  public onCallsChanged(calls: CallsByUserAndDevice): void {
     for (const [userId, userCalls] of calls.entries()) {
       for (const [deviceId, call] of userCalls.entries()) {
         if (!this.callsByCallId.has(call.callId)) {
@@ -150,7 +153,7 @@ export class OTelGroupCallMembership {
             const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
               `matrix.call`,
               undefined,
-              this.groupCallContext
+              this.groupCallContext,
             );
             // XXX: anonymity
             span.setAttribute("matrix.call.target.userId", userId);
@@ -160,7 +163,7 @@ export class OTelGroupCallMembership {
             span.setAttribute("matrix.call.target.displayName", displayName);
             this.callsByCallId.set(
               call.callId,
-              new OTelCall(userId, deviceId, call, span)
+              new OTelCall(userId, deviceId, call, span),
             );
           }
         }
@@ -179,9 +182,9 @@ export class OTelGroupCallMembership {
         this.callsByCallId.delete(callTrackingInfo.call.callId);
       }
     }
-  };
+  }
 
-  public onCallStateChange(call: MatrixCall, newState: CallState) {
+  public onCallStateChange(call: MatrixCall, newState: CallState): void {
     const callTrackingInfo = this.callsByCallId.get(call.callId);
     if (!callTrackingInfo) {
       logger.error(`Got call state change for unknown call ID ${call.callId}`);
@@ -193,7 +196,7 @@ export class OTelGroupCallMembership {
     });
   }
 
-  public onSendEvent(call: MatrixCall, event: VoipEvent) {
+  public onSendEvent(call: MatrixCall, event: VoipEvent): void {
     const eventType = event.eventType as string;
     if (
       !eventType.startsWith("m.call") &&
@@ -210,17 +213,17 @@ export class OTelGroupCallMembership {
     if (event.type === "toDevice") {
       callTrackingInfo.span.addEvent(
         `matrix.sendToDeviceEvent_${event.eventType}`,
-        ObjectFlattener.flattenVoipEvent(event)
+        ObjectFlattener.flattenVoipEvent(event),
       );
     } else if (event.type === "sendEvent") {
       callTrackingInfo.span.addEvent(
         `matrix.sendToRoomEvent_${event.eventType}`,
-        ObjectFlattener.flattenVoipEvent(event)
+        ObjectFlattener.flattenVoipEvent(event),
       );
     }
   }
 
-  public onReceivedVoipEvent(event: MatrixEvent) {
+  public onReceivedVoipEvent(event: MatrixEvent): void {
     // These come straight from CallEventHandler so don't have
     // a call already associated (in principle we could receive
     // events for calls we don't know about).
@@ -239,7 +242,7 @@ export class OTelGroupCallMembership {
         "matrix.receive_voip_event_unknown_callid",
         {
           "sender.userId": event.getSender(),
-        }
+        },
       );
       logger.error("Received call event for unknown call ID " + callId);
       return;
@@ -251,37 +254,41 @@ export class OTelGroupCallMembership {
     });
   }
 
-  public onToggleMicrophoneMuted(newValue: boolean) {
+  public onToggleMicrophoneMuted(newValue: boolean): void {
     this.callMembershipSpan?.addEvent("matrix.toggleMicMuted", {
       "matrix.microphone.muted": newValue,
     });
   }
 
-  public onSetMicrophoneMuted(setMuted: boolean) {
+  public onSetMicrophoneMuted(setMuted: boolean): void {
     this.callMembershipSpan?.addEvent("matrix.setMicMuted", {
       "matrix.microphone.muted": setMuted,
     });
   }
 
-  public onToggleLocalVideoMuted(newValue: boolean) {
+  public onToggleLocalVideoMuted(newValue: boolean): void {
     this.callMembershipSpan?.addEvent("matrix.toggleVidMuted", {
       "matrix.video.muted": newValue,
     });
   }
 
-  public onSetLocalVideoMuted(setMuted: boolean) {
+  public onSetLocalVideoMuted(setMuted: boolean): void {
     this.callMembershipSpan?.addEvent("matrix.setVidMuted", {
       "matrix.video.muted": setMuted,
     });
   }
 
-  public onToggleScreensharing(newValue: boolean) {
+  public onToggleScreensharing(newValue: boolean): void {
     this.callMembershipSpan?.addEvent("matrix.setVidMuted", {
       "matrix.screensharing.enabled": newValue,
     });
   }
 
-  public onSpeaking(member: RoomMember, deviceId: string, speaking: boolean) {
+  public onSpeaking(
+    member: RoomMember,
+    deviceId: string,
+    speaking: boolean,
+  ): void {
     if (speaking) {
       // Ensure that there's an audio activity span for this speaker
       let deviceMap = this.speakingSpans.get(member);
@@ -294,7 +301,7 @@ export class OTelGroupCallMembership {
         const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
           "matrix.audioActivity",
           undefined,
-          this.groupCallContext
+          this.groupCallContext,
         );
         span.setAttribute("matrix.userId", member.userId);
         span.setAttribute("matrix.displayName", member.rawDisplayName);
@@ -311,7 +318,7 @@ export class OTelGroupCallMembership {
     }
   }
 
-  public onCallError(error: CallError, call: MatrixCall) {
+  public onCallError(error: CallError, call: MatrixCall): void {
     const callTrackingInfo = this.callsByCallId.get(call.callId);
     if (!callTrackingInfo) {
       logger.error(`Got error for unknown call ID ${call.callId}`);
@@ -321,17 +328,19 @@ export class OTelGroupCallMembership {
     callTrackingInfo.span.recordException(error);
   }
 
-  public onGroupCallError(error: GroupCallError) {
+  public onGroupCallError(error: GroupCallError): void {
     this.callMembershipSpan?.recordException(error);
   }
 
-  public onUndecryptableToDevice(event: MatrixEvent) {
+  public onUndecryptableToDevice(event: MatrixEvent): void {
     this.callMembershipSpan?.addEvent("matrix.toDevice.undecryptable", {
       "sender.userId": event.getSender(),
     });
   }
 
-  public onCallFeedStatsReport(report: GroupCallStatsReport<CallFeedReport>) {
+  public onCallFeedStatsReport(
+    report: GroupCallStatsReport<CallFeedReport>,
+  ): void {
     if (!ElementCallOpenTelemetry.instance) return;
     let call: OTelCall | undefined;
     const callId = report.report?.callId;
@@ -348,10 +357,10 @@ export class OTelGroupCallMembership {
           "call.opponentMemberId": report.report?.opponentMemberId
             ? report.report?.opponentMemberId
             : "unknown",
-        }
+        },
       );
       logger.error(
-        `Received ${OTelStatsReportType.CallFeedReport} with unknown call ID: ${callId}`
+        `Received ${OTelStatsReportType.CallFeedReport} with unknown call ID: ${callId}`,
       );
       return;
     } else {
@@ -361,26 +370,26 @@ export class OTelGroupCallMembership {
   }
 
   public onConnectionStatsReport(
-    statsReport: GroupCallStatsReport<ConnectionStatsReport>
-  ) {
+    statsReport: GroupCallStatsReport<ConnectionStatsReport>,
+  ): void {
     this.buildCallStatsSpan(
       OTelStatsReportType.ConnectionReport,
-      statsReport.report
+      statsReport.report,
     );
   }
 
   public onByteSentStatsReport(
-    statsReport: GroupCallStatsReport<ByteSentStatsReport>
-  ) {
+    statsReport: GroupCallStatsReport<ByteSentStatsReport>,
+  ): void {
     this.buildCallStatsSpan(
       OTelStatsReportType.ByteSentReport,
-      statsReport.report
+      statsReport.report,
     );
   }
 
   public buildCallStatsSpan(
     type: OTelStatsReportType,
-    report: ByteSentStatsReport | ConnectionStatsReport
+    report: ByteSentStatsReport | ConnectionStatsReport,
   ): void {
     if (!ElementCallOpenTelemetry.instance) return;
     let call: OTelCall | undefined;
@@ -403,7 +412,7 @@ export class OTelGroupCallMembership {
     const data = ObjectFlattener.flattenReportObject(type, report);
     const ctx = opentelemetry.trace.setSpan(
       opentelemetry.context.active(),
-      call.span
+      call.span,
     );
 
     const options = {
@@ -417,21 +426,21 @@ export class OTelGroupCallMembership {
     const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
       type,
       options,
-      ctx
+      ctx,
     );
 
     span.setAttribute("matrix.callId", callId ?? "unknown");
     span.setAttribute(
       "matrix.opponentMemberId",
-      report.opponentMemberId ? report.opponentMemberId : "unknown"
+      report.opponentMemberId ? report.opponentMemberId : "unknown",
     );
     span.addEvent("matrix.call.connection_stats_event", data);
     span.end();
   }
 
   public onSummaryStatsReport(
-    statsReport: GroupCallStatsReport<SummaryStatsReport>
-  ) {
+    statsReport: GroupCallStatsReport<SummaryStatsReport>,
+  ): void {
     if (!ElementCallOpenTelemetry.instance) return;
 
     const type = OTelStatsReportType.SummaryReport;
@@ -439,12 +448,12 @@ export class OTelGroupCallMembership {
     if (this.statsReportSpan.span === undefined && this.callMembershipSpan) {
       const ctx = setSpan(
         opentelemetry.context.active(),
-        this.callMembershipSpan
+        this.callMembershipSpan,
       );
       const span = ElementCallOpenTelemetry.instance?.tracer.startSpan(
         "matrix.groupCallMembership.summaryReport",
         undefined,
-        ctx
+        ctx,
       );
       if (span === undefined) {
         return;
@@ -453,7 +462,7 @@ export class OTelGroupCallMembership {
       span.setAttribute("matrix.userId", this.myUserId);
       span.setAttribute(
         "matrix.displayName",
-        this.myMember ? this.myMember.name : "unknown-name"
+        this.myMember ? this.myMember.name : "unknown-name",
       );
       span.addEvent(type, data);
       span.end();

src/otel/ObjectFlattener.ts

@@ -25,7 +25,7 @@ import {
 export class ObjectFlattener {
   public static flattenReportObject(
     prefix: string,
-    report: ConnectionStatsReport | ByteSentStatsReport
+    report: ConnectionStatsReport | ByteSentStatsReport,
   ): Attributes {
     const flatObject = {};
     ObjectFlattener.flattenObjectRecursive(report, flatObject, `${prefix}.`, 0);
@@ -33,27 +33,27 @@ export class ObjectFlattener {
   }
 
   public static flattenByteSentStatsReportObject(
-    statsReport: GroupCallStatsReport<ByteSentStatsReport>
+    statsReport: GroupCallStatsReport<ByteSentStatsReport>,
   ): Attributes {
     const flatObject = {};
     ObjectFlattener.flattenObjectRecursive(
       statsReport.report,
       flatObject,
       "matrix.stats.bytesSent.",
-      0
+      0,
     );
     return flatObject;
   }
 
-  static flattenSummaryStatsReportObject(
-    statsReport: GroupCallStatsReport<SummaryStatsReport>
-  ) {
+  public static flattenSummaryStatsReportObject(
+    statsReport: GroupCallStatsReport<SummaryStatsReport>,
+  ): Attributes {
     const flatObject = {};
     ObjectFlattener.flattenObjectRecursive(
       statsReport.report,
       flatObject,
       "matrix.stats.summary.",
-      0
+      0,
     );
     return flatObject;
   }
@@ -67,7 +67,7 @@ export class ObjectFlattener {
       event as unknown as Record<string, unknown>, // XXX Types
       flatObject,
       "matrix.event.",
-      0
+      0,
     );
 
     return flatObject;
@@ -77,12 +77,12 @@ export class ObjectFlattener {
     obj: Object,
     flatObject: Attributes,
     prefix: string,
-    depth: number
+    depth: number,
   ): void {
     if (depth > 10)
       throw new Error(
         "Depth limit exceeded: aborting VoipEvent recursion. Prefix is " +
-          prefix
+          prefix,
       );
     let entries;
     if (obj instanceof Map) {
@@ -101,7 +101,7 @@ export class ObjectFlattener {
           v,
           flatObject,
           prefix + k + ".",
-          depth + 1
+          depth + 1,
         );
       }
     }