Merge remote-tracking branch 'origin/livekit' into dbkr/remove_e2ee_setting

Remove E2EEBanner

.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,27 +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}"],
-      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",
-      },
-    },
-  ],
   settings: {
     react: {
       version: "detect",

.github/workflows/build.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Yarn cache
         uses: actions/setup-node@v3
         with:
@@ -26,7 +26,7 @@ jobs:
           VITE_APP_VERSION: ${{ github.sha }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: build
           path: dist

.github/workflows/e2e.yml

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

.github/workflows/lint.yaml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Yarn cache
         uses: actions/setup-node@v3
         with:

.github/workflows/netlify-fullmesh.yaml

@@ -28,10 +28,10 @@ jobs:
           ref: ${{ github.event.workflow_run.head_sha }}
 
       - name: "Download artifact"
-        uses: actions/github-script@v3.2.0
+        uses: actions/github-script@v6.4.1
         with:
           script: |
-            const artifacts = await github.actions.listWorkflowRunArtifacts({
+            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 run_id: ${{ github.event.workflow_run.id }},
@@ -39,7 +39,7 @@ jobs:
             const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
                 return artifact.name == "build"
             })[0];
-            const download = await github.actions.downloadArtifact({
+            const download = await github.rest.actions.downloadArtifact({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 artifact_id: matchArtifact.id,
@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.4
+        uses: nwtgck/actions-netlify@v2.1.0
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-livekit.yaml

@@ -28,10 +28,10 @@ jobs:
           ref: ${{ github.event.workflow_run.head_sha }}
 
       - name: "Download artifact"
-        uses: actions/github-script@v3.2.0
+        uses: actions/github-script@v6.4.1
         with:
           script: |
-            const artifacts = await github.actions.listWorkflowRunArtifacts({
+            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 run_id: ${{ github.event.workflow_run.id }},
@@ -39,7 +39,7 @@ jobs:
             const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
                 return artifact.name == "build"
             })[0];
-            const download = await github.actions.downloadArtifact({
+            const download = await github.rest.actions.downloadArtifact({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 artifact_id: matchArtifact.id,
@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.4
+        uses: nwtgck/actions-netlify@v2.1.0
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-pr.yaml

@@ -28,7 +28,7 @@ jobs:
             Exercise caution. Use test accounts.
 
       - id: prdetails
-        uses: matrix-org/pr-details-action@v1.2
+        uses: matrix-org/pr-details-action@v1.3
         with:
           owner: ${{ github.event.workflow_run.head_repository.owner.login }}
           branch: ${{ github.event.workflow_run.head_branch }}
@@ -53,7 +53,7 @@ jobs:
 
       - name: ☁️ Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2
+        uses: nwtgck/actions-netlify@v2.1
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/publish.yaml

@@ -23,7 +23,7 @@ jobs:
         run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
 
       - name: Check it out
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Log in to container registry
         uses: docker/login-action@b4bedf8053341df3b5a9f9e0f2cf4e79e27360c6
@@ -75,7 +75,7 @@ jobs:
         uses: docker/setup-buildx-action@dedd61cf5d839122591f5027c89bf3ad27691d18
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@4c1b68d83ad20cc1a09620ca477d5bbbb5fa14d0
+        uses: docker/build-push-action@8d2cf95286e3dd3d016d478187b93b57af29fd2d
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/test.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Yarn cache
         uses: actions/setup-node@v3
         with:

.github/workflows/triage-incoming.yaml

@@ -1,27 +0,0 @@
-name: Move new issues into triage board
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  add-to-project:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: octokit/graphql-action@v2.x
-        id: add_to_project
-        with:
-          headers: '{"GraphQL-Features": "projects_next_graphql"}'
-          query: |
-            mutation add_to_project($projectid:ID!,$contentid:ID!) {
-              addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
-                item {
-                  id
-                }
-              }
-            }
-          projectid: ${{ env.PROJECT_ID }}
-          contentid: ${{ github.event.issue.node_id }}
-        env:
-          PROJECT_ID: "PVT_kwDOAM0swc4AH1sa"
-          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.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 || {};

i18next-parser.config.js

@@ -18,5 +18,6 @@ export default {
   output: "public/locales/$LOCALE/$NAMESPACE.json",
   input: ["src/**/*.{ts,tsx}"],
   sort: true,
-  useKeysAsDefaultValue: true,
+  // The key becomes the English version of the string
+  defaultValue: (_l, _ns, key) => key,
 };

package.json

@@ -5,8 +5,6 @@
     "dev": "vite",
     "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
     "serve": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
     "lint": "yarn lint:types && yarn lint:eslint",
@@ -44,32 +42,31 @@
     "@react-stately/select": "^3.1.3",
     "@react-stately/tooltip": "^3.0.5",
     "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^6.13.3",
-    "@sentry/tracing": "^6.13.3",
+    "@sentry/react": "^7.0.0",
+    "@sentry/tracing": "^7.0.0",
+    "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^0.0.5",
-    "@vector-im/compound-web": "^0.4.0",
+    "@vector-im/compound-design-tokens": "^0.0.6",
+    "@vector-im/compound-web": "^0.5.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "events": "^3.3.0",
-    "i18next": "^21.10.0",
-    "i18next-browser-languagedetector": "^6.1.8",
-    "i18next-http-backend": "^1.4.4",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^7.0.0",
+    "i18next-http-backend": "^2.0.0",
     "livekit-client": "^1.12.3",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6836720e1e1c2cb01d49d6e5fcfc01afc14834ca",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#c8f8fb587d29dce22d314bfc16bf25a76b04e8bb",
     "matrix-widget-api": "^1.3.1",
-    "mermaid": "^9.0.0",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
-    "postcss-preset-env": "^7",
+    "postcss-preset-env": "^9.0.0",
     "posthog-js": "^1.29.0",
-    "re-resizable": "^6.9.0",
     "react": "18",
     "react-dom": "18",
-    "react-i18next": "^11.18.6",
-    "react-json-view": "^1.21.3",
+    "react-i18next": "^13.0.0",
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
@@ -77,21 +74,25 @@
     "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",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
     "@react-spring/rafz": "^9.7.3",
     "@react-types/dialog": "^3.5.5",
-    "@sentry/vite-plugin": "^0.3.0",
-    "@storybook/react": "^6.5.0-alpha.5",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@sentry/vite-plugin": "^2.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@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/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
@@ -99,28 +100,30 @@
     "@types/uuid": "9",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^8.5.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",
-    "i18next-parser": "^6.6.0",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "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",
-    "storybook-builder-vite": "^0.1.12",
     "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": "^3.2.0"
+    "vite-plugin-svgr": "^4.0.0"
   },
   "jest": {
     "testEnvironment": "./test/environment.ts",
@@ -133,7 +136,7 @@
     ],
     "moduleNameMapper": {
       "\\.css$": "identity-obj-proxy",
-      "\\.svg$": "<rootDir>/test/mocks/svgr.ts",
+      "\\.svg\\?react$": "<rootDir>/test/mocks/svgr.ts",
       "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
       "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
     },

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

@@ -0,0 +1,26 @@
+{
+  "applinks": {
+    "details": [
+      {
+        "appIDs": [
+          "7J4U792NQT.io.element.elementx",
+          "7J4U792NQT.io.element.elementx.nightly",
+          "7J4U792NQT.io.element.elementx.pr"
+        ],
+        "components": [
+          {
+            "?": {
+              "no_universal_links": "?*"
+            },
+            "exclude": true,
+            "comment": "Opt out of universal links"
+          },
+          {
+            "/": "/*",
+            "comment": "Matches any URL"
+          }
+        ]
+      }
+    ]
+  }
+}

public/.well-known/assetlinks.json

@@ -8,5 +8,25 @@
         "B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
       ]
     }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.element.android.x.nightly",
+      "sha256_cert_fingerprints": [
+        "CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
+      ]
+    }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.element.android.x",
+      "sha256_cert_fingerprints": [
+        "C6:DB:9B:9C:8C:BD:D6:5D:16:E8:EC:8C:8B:91:C8:31:B9:EF:C9:5C:BF:98:AE:41:F6:A9:D8:35:15:1A:7E:16"
+      ]
+    }
   }
 ]

public/apple-app-site-association

@@ -1,15 +0,0 @@
-{
-  "applinks": {
-    "apps": [],
-    "details": [
-      {
-        "appIDs": [
-          "7J4U792NQT.io.element.elementx",
-          "7J4U792NQT.io.element.elementx.nightly",
-          "7J4U792NQT.io.element.elementx.pr"
-        ],
-        "paths": ["*"]
-      }
-    ]
-  }
-}

public/index.html

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

public/locales/bg/app.json

@@ -5,25 +5,19 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Друг потребител в този разговор има проблем. За да диагностицираме този проблем по-добре ни се иска да съберем debug логове.",
   "Audio": "Звук",
   "Avatar": "Аватар",
-  "Call link copied": "Връзка към разговора бе копирана",
-  "Call type menu": "Меню \"тип на разговора\"",
   "Camera": "Камера",
   "Close": "Затвори",
   "Confirm password": "Потвърди паролата",
   "Copied!": "Копирано!",
-  "Copy and share this call link": "Копирай и сподели връзка към разговора",
   "Create account": "Създай акаунт",
-  "Debug log": "Debug логове",
   "Debug log request": "Заявка за debug логове",
   "Developer": "Разработчик",
   "Display name": "Име/псевдоним",
-  "Download debug logs": "Изтеглете debug логове",
   "Exit full screen": "Излез от цял екран",
   "Full screen": "Цял екран",
   "Go": "Напред",
   "Home": "Начало",
   "Include debug logs": "Включи debug логове",
-  "Inspector": "Инспектор",
   "Join call": "Влез в разговора",
   "Join call now": "Влез в разговора сега",
   "Join existing call?": "Присъединяване към съществуващ разговор?",
@@ -51,23 +45,16 @@
   "Sending…": "Изпращане…",
   "Settings": "Настройки",
   "Share screen": "Сподели екрана",
-  "Show call inspector": "Покажи инспектора на разговора",
   "Sign in": "Влез",
   "Sign out": "Излез",
   "Speaker": "Говорител",
   "Spotlight": "Прожектор",
   "Submit feedback": "Изпрати обратна връзка",
-  "Take me Home": "Отиди в Начало",
   "This call already exists, would you like to join?": "Този разговор вече съществува, искате ли да се присъедините?",
   "User menu": "Потребителско меню",
   "Username": "Потребителско име",
   "Version: {{version}}": "Версия: {{version}}",
   "Video": "Видео",
-  "Video call": "Видео разговор",
-  "Video call name": "Име на видео разговора",
   "Waiting for other participants…": "Изчакване на други участници…",
-  "Walkie-talkie call": "Уоки-токи разговор",
-  "Walkie-talkie call name": "Име на уоки-токи разговора",
-  "Yes, join call": "Да, присъедини се",
-  "Your recent calls": "Скорошните ви разговори"
+  "Yes, join call": "Да, присъедини се"
 }

public/locales/cs/app.json

@@ -1,29 +1,22 @@
 {
-  "Copy and share this call link": "Zkopírujte a sdílejte odkaz na hovor",
   "Copied!": "Zkopírováno!",
   "Confirm password": "Potvrdit heslo",
   "Close": "Zavřít",
   "Camera": "Kamera",
-  "Call link copied": "Odkaz na hovor zkopírován",
   "Avatar": "Avatar",
   "Audio": "Audio",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Vytvořit účet</0> Or <2>Jako host</2>",
-  "Your recent calls": "Vaše nedávné hovory",
   "Yes, join call": "Ano, připojit se",
   "Waiting for other participants…": "Čekání na další účastníky…",
-  "Video call name": "Jméno videohovoru",
-  "Video call": "Videohovor",
   "Video": "Video",
   "Version: {{version}}": "Verze: {{version}}",
   "Username": "Uživatelské jméno",
   "User menu": "Uživatelské menu",
   "This call already exists, would you like to join?": "Tento hovor již existuje, chcete se připojit?",
-  "Take me Home": "Domovská obrazovka",
   "Submit feedback": "Dát feedback",
   "Speaker": "Reproduktor",
   "Sign out": "Odhlásit se",
   "Sign in": "Přihlásit se",
-  "Show call inspector": "Zobrazit inspektor hovoru",
   "Share screen": "Sdílet obrazovku",
   "Settings": "Nastavení",
   "Sending…": "Posílání…",
@@ -48,9 +41,6 @@
   "Loading…": "Načítání…",
   "Join call now": "Připojit se k hovoru",
   "Join call": "Připojit se k hovoru",
-  "Inspector": "Insepktor",
-  "Walkie-talkie call name": "Jméno vysílačkového hovoru",
-  "Walkie-talkie call": "Vysílačkový hovor",
   "Spotlight": "Soustředěný mód",
   "Recaptcha not loaded": "Recaptcha se nenačetla",
   "Recaptcha dismissed": "Recaptcha byla zamítnuta",
@@ -62,17 +52,13 @@
   "Full screen": "Zvětšit na celou obrazovku",
   "Exit full screen": "Ukončit režim celé obrazovky",
   "Element Call Home": "Domov Element Call",
-  "Download debug logs": "Stáhnout ladící záznamy",
   "Display name": "Zobrazované jméno",
   "Developer": "Vývojář",
   "Debug log request": "Žádost o protokoly ladění",
-  "Debug log": "Protokoly ladění",
   "Create account": "Vytvořit účet",
   "Copy": "Kopírovat",
-  "Call type menu": "Menu typu hovoru",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Jiný uživatel v tomto hovoru má problémy. Abychom mohli diagnostikovat problém, rádi bychom shromáždili protokoly ladění.",
   "<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>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Připojit se</0><1>Or</1><2>Zkopírovat odkaz a připojit se později</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odeslání ladících záznamů nám pomůže diagnostikovat problém.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Oops, něco se pokazilo.</0>",

public/locales/de/app.json

@@ -5,25 +5,19 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "Call link copied": "Anruflink kopiert",
-  "Call type menu": "Anruftyp Menü",
   "Camera": "Kamera",
   "Close": "Schließen",
   "Confirm password": "Passwort bestätigen",
   "Copied!": "Kopiert!",
-  "Copy and share this call link": "Kopiere und teile diesen Anruflink",
   "Create account": "Konto erstellen",
-  "Debug log": "Debug-Protokoll",
   "Debug log request": "Debug-Log Anfrage",
   "Developer": "Entwickler",
   "Display name": "Anzeigename",
-  "Download debug logs": "Debug-Protokolle herunterladen",
   "Exit full screen": "Vollbildmodus verlassen",
   "Full screen": "Vollbild",
   "Go": "Los geht’s",
   "Home": "Startseite",
   "Include debug logs": "Debug-Protokolle einschließen",
-  "Inspector": "Inspektor",
   "Join call": "Anruf beitreten",
   "Join call now": "Anruf beitreten",
   "Join existing call?": "An bestehendem Anruf teilnehmen?",
@@ -51,27 +45,19 @@
   "Sending…": "Senden …",
   "Settings": "Einstellungen",
   "Share screen": "Bildschirm teilen",
-  "Show call inspector": "Anrufinspektor anzeigen",
   "Sign in": "Anmelden",
   "Sign out": "Abmelden",
   "Speaker": "Wiedergabegerät",
   "Spotlight": "Rampenlicht",
   "Submit feedback": "Rückmeldung geben",
-  "Take me Home": "Zurück zur Startseite",
   "This call already exists, would you like to join?": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
   "User menu": "Benutzermenü",
   "Username": "Benutzername",
   "Version: {{version}}": "Version: {{version}}",
   "Video": "Video",
-  "Video call": "Videoanruf",
-  "Video call name": "Name des Videoanrufs",
   "Waiting for other participants…": "Warte auf weitere Teilnehmer …",
-  "Walkie-talkie call": "Walkie-Talkie-Anruf",
   "Yes, join call": "Ja, Anruf beitreten",
-  "Your recent calls": "Deine letzten Anrufe",
-  "Walkie-talkie call name": "Name des Walkie-Talkie-Anrufs",
   "Sending debug logs…": "Sende Debug-Protokolle …",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Anruf beitreten</0><1>Oder</1><2>Link kopieren und später beitreten</2>",
   "Copy": "Kopieren",
   "Element Call Home": "Element Call-Startseite",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
@@ -113,11 +99,25 @@
   "Microphone on": "Mikrofon an",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
-  "Share": "Teilen",
-  "Share this call": "Diesen Anruf teilen",
-  "Video off": "Video aus",
-  "Video on": "Video an",
   "Sharing screen": "Bildschirm wird geteilt",
-  "You": "Du"
+  "You": "Du",
+  "Continue in browser": "Weiter im Browser",
+  "Name of call": "Name des Anrufs",
+  "Open in the app": "In der App öffnen",
+  "Ready to join?": "Bereit, beizutreten?",
+  "Unmute microphone": "Mikrofon aktivieren",
+  "Start video": "Video aktivieren",
+  "Stop video": "Video deaktivieren",
+  "Back to recents": "Zurück zu kürzlichen Anrufen",
+  "Select app": "App auswählen",
+  "Mute microphone": "Mikrofon deaktivieren",
+  "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",
+  "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/el/app.json

@@ -3,7 +3,6 @@
   "User menu": "Μενού χρήστη",
   "Submit feedback": "Υποβάλετε σχόλια",
   "Sign in": "Σύνδεση",
-  "Show call inspector": "Εμφάνιση του επιθεωρητή κλήσης",
   "Share screen": "Κοινή χρήση οθόνης",
   "Sending…": "Αποστολή…",
   "Select an option": "Επιλέξτε μια επιλογή",
@@ -12,22 +11,15 @@
   "Not registered yet? <2>Create an account</2>": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
   "Login to your account": "Συνδεθείτε στον λογαριασμό σας",
   "Logging in…": "Σύνδεση…",
-  "Inspector": "Επιθεωρητής",
   "Display name": "Εμφανιζόμενο όνομα",
   "Developer Settings": "Ρυθμίσεις προγραμματιστή",
   "Debug log request": "Αίτημα αρχείου καταγραφής",
-  "Call link copied": "Ο σύνδεσμος κλήσης αντιγράφηκε",
   "Avatar": "Avatar",
   "<0>Oops, something's gone wrong.</0>": "<0>Ωχ, κάτι πήγε στραβά.</0>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Δημιουργήστε λογαριασμό</0> Ή <2>Συμμετέχετε ως επισκέπτης</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Έχετε ήδη λογαριασμό;</0><1><0>Συνδεθείτε</0> Ή <2>Συμμετέχετε ως επισκέπτης</2></1>",
-  "Your recent calls": "Οι πρόσφατες κλήσεις σας",
   "Yes, join call": "Ναι, συμμετοχή στην κλήση",
-  "Walkie-talkie call name": "Όνομα κλήσης walkie-talkie",
-  "Walkie-talkie call": "Κλήση walkie-talkie",
   "Waiting for other participants…": "Αναμονή για άλλους συμμετέχοντες…",
-  "Video call name": "Όνομα βίντεο κλήσης",
-  "Video call": "Βίντεο κλήση",
   "Video": "Βίντεο",
   "Username": "Όνομα χρήστη",
   "This call already exists, would you like to join?": "Αυτή η κλήση υπάρχει ήδη, θα θέλατε να συμμετάσχετε;",
@@ -52,7 +44,6 @@
   "Full screen": "Πλήρη οθόνη",
   "Exit full screen": "Έξοδος από πλήρη οθόνη",
   "Create account": "Δημιουργία λογαριασμού",
-  "Copy and share this call link": "Αντιγράψτε και μοιραστείτε αυτόν τον σύνδεσμο κλήσης",
   "Copy": "Αντιγραφή",
   "Copied!": "Αντιγράφηκε!",
   "Confirm password": "Επιβεβαίωση κωδικού",
@@ -62,14 +53,11 @@
   "Send debug logs": "Αποστολή αρχείων καταγραφής",
   "Recaptcha dismissed": "Το recaptcha απορρίφθηκε",
   "<0>Thanks for your feedback!</0>": "<0>Ευχαριστώ για τα σχόλιά σας!</0>",
-  "Call type menu": "Μενού είδους κλήσης",
   "Local volume": "Τοπική ένταση",
   "Home": "Αρχική",
   "Show connection stats": "Εμφάνιση στατιστικών σύνδεσης",
-  "Take me Home": "Μετάβαση στην Αρχική",
   "{{displayName}} is presenting": "{{displayName}} παρουσιάζει",
   "<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>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Συμμετοχή στην κλήση τώρα</0><1>Or</1><2>Αντιγραφή συνδέσμου κλήσης και συμμετοχή αργότερα</2>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Θα θέλαμε να ακούσουμε τα σχόλιά σας ώστε να βελτιώσουμε την εμπειρία σας.</0>",
   "<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>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ένας άλλος χρήστης σε αυτή την κλήση έχει ένα πρόβλημα. Για την καλύτερη διάγνωση αυτών των προβλημάτων θα θέλαμε να συλλέξουμε ένα αρχείο καταγραφής σφαλμάτων.",
@@ -86,9 +74,7 @@
   "How did it go?": "Πώς σας φάνηκε;",
   "Include debug logs": "Να συμπεριληφθούν αρχεία καταγραφής",
   "Recaptcha not loaded": "Το Recaptcha δεν φορτώθηκε",
-  "Debug log": "Αρχείο καταγραφής",
   "Developer": "Προγραμματιστής",
-  "Download debug logs": "Λήψη αρχείων καταγραφής",
   "Sending debug logs…": "Αποστολή αρχείων καταγραφής…",
   "Submit": "Υποβολή",
   "Your feedback": "Τα σχόλιά σας",

public/locales/en-GB/app.json

@@ -5,11 +5,9 @@
   "{{count}} stars|other": "{{count}} stars",
   "{{displayName}} is presenting": "{{displayName}} is presenting",
   "{{displayName}}, your call has ended.": "{{displayName}}, your call has ended.",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "<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>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>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Create an account</0> Or <2>Access as a guest</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>Oops, something's gone wrong.</0>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Submitting debug logs will help us track down the problem.</0>",
   "<0>Thanks for your feedback!</0>": "<0>Thanks for your feedback!</0>",
@@ -18,10 +16,12 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
   "Audio": "Audio",
   "Avatar": "Avatar",
+  "Back to recents": "Back to recents",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (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>.": "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>.",
-  "Call link copied": "Call link copied",
+  "Call not found": "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.": "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.",
   "Camera": "Camera",
   "Close": "Close",
   "Confirm password": "Confirm password",
@@ -29,20 +29,15 @@
   "Continue in browser": "Continue in browser",
   "Copied!": "Copied!",
   "Copy": "Copy",
-  "Copy and share this call link": "Copy and share this call link",
+  "Copy link": "Copy link",
   "Create account": "Create account",
-  "Debug log": "Debug log",
   "Debug log request": "Debug log request",
   "Developer": "Developer",
   "Developer Settings": "Developer Settings",
   "Display name": "Display name",
-  "Download debug logs": "Download debug logs",
   "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",
@@ -53,10 +48,12 @@
   "How did it go?": "How did it go?",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
   "Include debug logs": "Include debug logs",
-  "Inspector": "Inspector",
+  "Invite": "Invite",
+  "Invite to this call": "Invite to this call",
   "Join call": "Join call",
   "Join call now": "Join call now",
   "Join existing call?": "Join existing call?",
+  "Link copied to clipboard": "Link copied to clipboard",
   "Loading…": "Loading…",
   "Local volume": "Local volume",
   "Logging in…": "Logging in…",
@@ -73,6 +70,7 @@
   "Not now, return to home screen": "Not now, return to home screen",
   "Not registered yet? <2>Create an account</2>": "Not registered yet? <2>Create an account</2>",
   "Open in the app": "Open in the app",
+  "Participants": "Participants",
   "Password": "Password",
   "Passwords must match": "Passwords must match",
   "Profile": "Profile",
@@ -91,11 +89,8 @@
   "Sending debug logs…": "Sending debug logs…",
   "Sending…": "Sending…",
   "Settings": "Settings",
-  "Share": "Share",
   "Share screen": "Share screen",
-  "Share this call": "Share this call",
   "Sharing screen": "Sharing screen",
-  "Show call inspector": "Show call inspector",
   "Show connection stats": "Show connection stats",
   "Sign in": "Sign in",
   "Sign out": "Sign out",
@@ -107,7 +102,6 @@
   "Submit": "Submit",
   "Submit feedback": "Submit feedback",
   "Submitting…": "Submitting…",
-  "Take me Home": "Take me Home",
   "Thanks, we received your feedback!": "Thanks, we received your feedback!",
   "Thanks!": "Thanks!",
   "This call already exists, would you like to join?": "This call already exists, would you like to join?",
@@ -121,5 +115,6 @@
   "Yes, join call": "Yes, join call",
   "You": "You",
   "You were disconnected from the call": "You were disconnected from the call",
-  "Your feedback": "Your feedback"
+  "Your feedback": "Your feedback",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117"
 }

public/locales/es/app.json

@@ -1,27 +1,20 @@
 {
   "<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>¿Por qué no mantienes tu cuenta estableciendo una contraseña?</0><1>Podrás mantener tu nombre y establecer un avatar para usarlo en futuras llamadas</1>",
-  "Your recent calls": "Tus llamadas recientes",
   "This call already exists, would you like to join?": "Esta llamada ya existe, ¿te gustaría unirte?",
   "Register": "Registrarse",
   "Not registered yet? <2>Create an account</2>": "¿No estás registrado todavía? <2>Crear una cuenta</2>",
   "Login to your account": "Iniciar sesión en tu cuenta",
   "Yes, join call": "Si, unirse a la llamada",
-  "Walkie-talkie call name": "Nombre de la llamada Walkie-talkie",
-  "Walkie-talkie call": "Llamada Walkie-talkie",
   "Waiting for other participants…": "Esperando a los otros participantes…",
-  "Video call name": "Nombre de la videollamada",
-  "Video call": "Videollamada",
   "Video": "Video",
   "Version: {{version}}": "Versión: {{version}}",
   "Username": "Nombre de usuario",
   "User menu": "Menú de usuario",
-  "Take me Home": "Volver al inicio",
   "Submit feedback": "Enviar comentarios",
   "Spotlight": "Foco",
   "Speaker": "Altavoz",
   "Sign out": "Cerrar sesión",
   "Sign in": "Iniciar sesión",
-  "Show call inspector": "Mostrar inspector de llamada",
   "Share screen": "Compartir pantalla",
   "Settings": "Ajustes",
   "Sending…": "Enviando…",
@@ -47,30 +40,23 @@
   "Join existing call?": "¿Unirse a llamada existente?",
   "Join call now": "Unirse a la llamada ahora",
   "Join call": "Unirse a la llamada",
-  "Inspector": "Inspector",
   "Include debug logs": "Incluir registros de depuración",
   "Home": "Inicio",
   "Go": "Comenzar",
   "Full screen": "Pantalla completa",
   "Exit full screen": "Salir de pantalla completa",
-  "Download debug logs": "Descargar registros de depuración",
   "Display name": "Nombre a mostrar",
   "Developer": "Desarrollador",
   "Debug log request": "Petición de registros de depuración",
-  "Debug log": "Registro de depuración",
   "Create account": "Crear cuenta",
-  "Copy and share this call link": "Copiar y compartir el enlace de la llamada",
   "Copied!": "¡Copiado!",
   "Confirm password": "Confirmar contraseña",
   "Close": "Cerrar",
   "Camera": "Cámara",
-  "Call type menu": "Menú de tipo de llamada",
-  "Call link copied": "Enlace de la llamada copiado",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Otro usuario en esta llamada está teniendo problemas. Para diagnosticar estos problemas nos gustaría recopilar un registro de depuración.",
   "Audio": "Audio",
   "Avatar": "Avatar",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Crear una cuenta</0> o <2>Acceder como invitado</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Unirse ahora</0><1>Or</1><2>Copiar el enlace y unirse más tarde</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>¿Ya tienes una cuenta?</0><1><0>Iniciar sesión</0> o <2>Acceder como invitado</2></1>",
   "Element Call Home": "Inicio de Element Call",
   "Copy": "Copiar",

public/locales/et/app.json

@@ -1,27 +1,20 @@
 {
   "<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>Kas soovid salasõna seadistada ja sellega oma kasutajakonto alles jätta?</0><1>Nii saad säilitada oma nime ja määrata profiilipildi, mida saad kasutada tulevastes kõnedes</1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Liitu kõnega kohe</0><1> Või</1><2>Kopeeri kõne link ja liitu hiljem</2>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Loo konto</0> Või <2>Sisene külalisena</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>On sul juba konto?</0><1><0>Logi sisse</0> Või <2>Logi sisse külalisena</2></1>",
-  "Inspector": "Inspektor",
   "Include debug logs": "Lisa veatuvastuslogid",
   "Home": "Avavaatesse",
   "Go": "Jätka",
   "Full screen": "Täisekraan",
   "Exit full screen": "Välju täisekraanivaatest",
-  "Download debug logs": "Lae alla veatuvastuslogid",
   "Display name": "Kuvatav nimi",
   "Developer": "Arendaja",
   "Debug log request": "Veaotsingulogi päring",
-  "Debug log": "Veaotsingulogi",
   "Create account": "Loo konto",
-  "Copy and share this call link": "Kopeeri ja jaga selle kõne linki",
   "Copied!": "Kopeeritud!",
   "Confirm password": "Kinnita salasõna",
   "Close": "Sulge",
   "Camera": "Kaamera",
-  "Call type menu": "Kõnetüübi valik",
-  "Call link copied": "Kõne link on kopeeritud",
   "Avatar": "Tunnuspilt",
   "Audio": "Heli",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ühel teisel selles kõnes osalejal on lahenduse kasutamisel tekkinud probleem ning selle põhjuse leidmiseks me sooviksime koguda silumislogisid.",
@@ -30,7 +23,6 @@
   "Not registered yet? <2>Create an account</2>": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
   "Not now, return to home screen": "Mitte praegu, mine tagasi avalehele",
   "No": "Ei",
-  "Your recent calls": "Hiljutised kõned",
   "More": "Rohkem",
   "Microphone": "Mikrofon",
   "Login to your account": "Logi oma kontosse sisse",
@@ -41,13 +33,11 @@
   "Join existing call?": "Liitu juba käimasoleva kõnega?",
   "Join call now": "Liitu kõnega kohe",
   "Join call": "Kõnega liitumine",
-  "Take me Home": "Mine avalehele",
   "Submit feedback": "Jaga tagasisidet",
   "Spotlight": "Rambivalgus",
   "Speaker": "Kõlar",
   "Sign out": "Logi välja",
   "Sign in": "Logi sisse",
-  "Show call inspector": "Näita kõneteavet",
   "Share screen": "Jaga ekraani",
   "Settings": "Seadistused",
   "Sending…": "Saatmine…",
@@ -62,16 +52,12 @@
   "Recaptcha dismissed": "Robotilõks on vahele jäetud",
   "Profile": "Profiil",
   "Waiting for other participants…": "Ootame teiste osalejate lisandumist…",
-  "Video call name": "Videokõne nimi",
-  "Video call": "Videokõne",
   "Video": "Video",
   "Version: {{version}}": "Versioon: {{version}}",
   "Username": "Kasutajanimi",
   "This call already exists, would you like to join?": "See kõne on juba olemas, kas soovid liituda?",
   "User menu": "Kasutajamenüü",
   "Yes, join call": "Jah, liitu kõnega",
-  "Walkie-talkie call": "Walkie-talkie stiilis kõne",
-  "Walkie-talkie call name": "Walkie-talkie stiilis kõne nimi",
   "Element Call Home": "Element Call Home",
   "Copy": "Kopeeri",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Kui saadad meile vealogid, siis on lihtsam vea põhjust otsida.</0>",
@@ -86,7 +72,7 @@
   "Submit": "Saada",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Kui selle rakenduse kasutamisel tekib sul probleeme või lihtsalt soovid oma arvamust avaldada, siis palun täida alljärgnev lühike kirjeldus.",
   "Feedback": "Tagasiside",
-  "{{count}} stars|one": "{{count}} tärn",
+  "{{count}} stars|one": "{{count}} tärni",
   "{{count}} stars|other": "{{count}} tärni",
   "How did it go?": "Kuidas sujus?",
   "{{displayName}}, your call has ended.": "{{displayName}}, sinu kõne on lõppenud.",
@@ -111,12 +97,27 @@
   "Microphone off": "Mikrofon ei tööta",
   "Microphone on": "Mikrofon töötab",
   "Not encrypted": "Krüptimata",
-  "Share": "Jaga",
-  "Share this call": "Jaga seda kõnet",
   "Sharing screen": "Ekraanivaade on jagamisel",
-  "Video on": "Video on kasutusel",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
-  "Video off": "Video ei ole kasutusel"
+  "You": "Sina",
+  "Continue in browser": "Jätka veebibrauseris",
+  "Mute microphone": "Summuta mikrofon",
+  "Name of call": "Kõne nimi",
+  "Open in the app": "Ava rakenduses",
+  "Ready to join?": "Oled valmis liituma?",
+  "Select app": "Vali rakendus",
+  "Start new call": "Algata uus kõne",
+  "Back to recents": "Tagasi hiljutiste kõnede juurde",
+  "Stop video": "Peata videovoog",
+  "Start video": "Lülita videovoog sisse",
+  "Unmute microphone": "Lülita mikrofon sisse",
+  "Call not found": "Kõnet ei leidu",
+  "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.": "Kõned on nüüd läbivalt krüptitud ning need pead looma kodulehelt. Sellega tagad, et kõik kasutavad samu krüptovõtmeid.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Sinu veebibrauser ei toeta meedia läbivat krüptimist. Toetatud brauserid on Chrome, Chromium, Safari ja Firefox >=117",
+  "Invite": "Kutsu",
+  "Link copied to clipboard": "Link on kopeeritud lõikelauale",
+  "Participants": "Osalejad",
+  "Copy link": "Kopeeri link",
+  "Invite to this call": "Kutsu liituma selle kõnaga"
 }

public/locales/fa/app.json

@@ -1,9 +1,6 @@
 {
-  "Your recent calls": "تماس‌های اخیر شما",
-  "Video call": "تماس تصویری",
   "Video": "ویدیو",
   "Username": "نام کاربری",
-  "Take me Home": "مرا به خانه ببر",
   "Speaker": "بلندگو",
   "Sign out": "خروج",
   "Sign in": "ورود",
@@ -23,19 +20,14 @@
   "Go": "رفتن",
   "Full screen": "تمام صحفه",
   "Exit full screen": "خروج از حالت تمام صفحه",
-  "Download debug logs": "دانلود لاگ عیب‌یابی",
   "Display name": "نام نمایشی",
   "Developer": "توسعه دهنده",
   "Debug log request": "درخواست لاگ عیب‌یابی",
-  "Debug log": "لاگ عیب‌یابی",
   "Create account": "ساخت حساب کاربری",
-  "Copy and share this call link": "لینک تماس را کپی کنید و به اشتراک بگذارید",
   "Copied!": "کپی شد!",
   "Confirm password": "تایید رمزعبور",
   "Close": "بستن",
   "Camera": "دوربین",
-  "Call type menu": "منوی نوع تماس",
-  "Call link copied": "لینک تماس کپی شد",
   "Avatar": "آواتار",
   "Audio": "صدا",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "کاربر دیگری در این تماس مشکلی دارد. برای تشخیص بهتر مشکل، بهتر است ما لاگ عیب‌یابی را جمع‌آوری کنیم.",
@@ -43,9 +35,7 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>ساخت حساب کاربری</0> Or <2>دسترسی به عنوان میهمان</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>از قبل حساب کاربری دارید؟</0><1><0>ورود</0> Or <2>به عنوان یک میهمان وارد شوید</2></1>",
   "Local volume": "حجم داخلی",
-  "Inspector": "بازرس",
   "Spotlight": "نور افکن",
-  "Show call inspector": "نمایش بازرس تماس",
   "Share screen": "اشتراک گذاری صفحه نمایش",
   "Sending…": "در حال ارسال…",
   "Sending debug logs…": "در حال ارسال باگ‌های عیب‌یابی…",
@@ -63,15 +53,11 @@
   "Logging in…": "ورود…",
   "Include debug logs": "شامل لاگ‌های عیب‌یابی",
   "Yes, join call": "بله، به تماس بپیوندید",
-  "Walkie-talkie call name": "نامِ تماسِ واکی-تاکی",
-  "Walkie-talkie call": "تماسِ واکی-تاکی",
   "Waiting for other participants…": "در انتظار برای دیگر شرکت‌کنندگان…",
-  "Video call name": "نامِ تماسِ تصویری",
   "Version: {{version}}": "نسخه: {{نسخه}}",
   "User menu": "فهرست کاربر",
   "This call already exists, would you like to join?": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
   "Submit feedback": "بازخورد ارائه دهید",
   "Element Call Home": "خانهٔ تماس المنت",
-  "Copy": "رونوشت",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>اکنون به تماس پیوسته</0><1>یا</1><2>پیوند تماس را رونوشت کرده و بعداً بپیوندید</2>"
+  "Copy": "رونوشت"
 }

public/locales/fr/app.json

@@ -4,25 +4,19 @@
   "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 autre utilisateur dans cet appel a un problème. Pour nous permettre de résoudre le problème, nous aimerions récupérer un journal de débogage.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "Call link copied": "Lien de l’appel copié",
-  "Call type menu": "Menu de type d’appel",
   "Camera": "Caméra",
   "Close": "Fermer",
   "Confirm password": "Confirmer le mot de passe",
   "Copied!": "Copié !",
-  "Copy and share this call link": "Copier et partager le lien de cet appel",
   "Create account": "Créer un compte",
-  "Debug log": "Journal de débogage",
   "Debug log request": "Demande d’un journal de débogage",
   "Developer": "Développeur",
   "Display name": "Nom d’affichage",
-  "Download debug logs": "Télécharger les journaux de débogage",
   "Exit full screen": "Quitter le plein écran",
   "Full screen": "Plein écran",
   "Go": "Commencer",
   "Home": "Accueil",
   "Include debug logs": "Inclure les journaux de débogage",
-  "Inspector": "Inspecteur",
   "Join call": "Rejoindre l’appel",
   "Join call now": "Rejoindre l’appel maintenant",
   "Join existing call?": "Rejoindre un appel existant ?",
@@ -50,20 +44,13 @@
   "Sending…": "Envoi…",
   "Settings": "Paramètres",
   "Share screen": "Partage d’écran",
-  "Show call inspector": "Afficher l’inspecteur d’appel",
   "Sign in": "Connexion",
   "Sign out": "Déconnexion",
   "Spotlight": "Premier plan",
-  "Submit feedback": "Envoyer des retours",
-  "Take me Home": "Retouner à l’accueil",
+  "Submit feedback": "Envoyer un commentaire",
   "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
-  "Your recent calls": "Appels récents",
   "Yes, join call": "Oui, rejoindre l’appel",
-  "Walkie-talkie call name": "Nom de l’appel talkie-walkie",
-  "Walkie-talkie call": "Appel talkie-walkie",
   "Waiting for other participants…": "En attente d’autres participants…",
-  "Video call name": "Nom de l’appel vidéo",
-  "Video call": "Appel vidéo",
   "Video": "Vidéo",
   "Version: {{version}}": "Version : {{version}}",
   "Username": "Nom d’utilisateur",
@@ -71,7 +58,6 @@
   "Speaker": "Intervenant",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Vous avez déjà un compte ?</0><1><0>Se connecter</0> Ou <2>Accès invité</2></1>",
   "Sending debug logs…": "Envoi des journaux de débogage…",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Rejoindre l’appel maintenant</0><1>Ou</1><2>Copier le lien de l’appel et rejoindre plus tard</2>",
   "Element Call Home": "Accueil Element Call",
   "Copy": "Copier",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Soumettre les journaux de débogage nous aidera à déterminer le problème.</0>",
@@ -84,7 +70,7 @@
   "Thanks, we received your feedback!": "Merci, nous avons reçu vos commentaires !",
   "Submitting…": "Envoi…",
   "Submit": "Envoyer",
-  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, veuillez nous envoyer une courte description ci-dessous.",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, faites-en une courte description ci-dessous.",
   "Feedback": "Commentaires",
   "{{count}} stars|other": "{{count}} favoris",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Nous aimerions avoir vos commentaires afin que nous puissions améliorer votre expérience.</0>",
@@ -106,18 +92,32 @@
   "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}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "Encrypted": "Chiffré",
   "End call": "Terminer l’appel",
   "Grid": "Grille",
   "Microphone off": "Microphone éteint",
   "Microphone on": "Microphone allumé",
-  "Share": "Partager",
-  "Share this call": "Partager cet appel",
   "Sharing screen": "L’écran est partagé",
-  "Video off": "Vidéo éteinte",
-  "Video on": "Vidéo allumée",
   "{{count, number}}|one": "{{count, number}}",
   "Not encrypted": "Non chiffré",
-  "You": "Vous"
+  "You": "Vous",
+  "Continue in browser": "Continuer dans le navigateur",
+  "Mute microphone": "Couper le microphone",
+  "Name of call": "Nom de l’appel",
+  "Open in the app": "Ouvrir dans l’application",
+  "Ready to join?": "Prêt à rejoindre ?",
+  "Select app": "Choisissez l’application",
+  "Start new call": "Démarrer un nouvel appel",
+  "Back to recents": "Revenir à l’historique des appels",
+  "Start video": "Démarrer la vidéo",
+  "Stop video": "Arrêter la vidéo",
+  "Unmute microphone": "Allumer le microphone",
+  "Call not found": "Appel non trouvé",
+  "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.": "Les appels sont maintenant chiffrés de bout-en-bout et doivent être créés depuis la page d’accueil. Cela permet d’être sûr que tout le monde utilise la même clé de chiffrement.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Votre navigateur web ne prend pas en charge le chiffrement de bout-en-bout des médias. Les navigateurs pris en charge sont Chrome, Safari, Firefox >= 117",
+  "Copy link": "Copier le lien",
+  "Invite": "Inviter",
+  "Invite to this call": "Inviter dans cet appel",
+  "Link copied to clipboard": "Lien copié dans le presse-papier",
+  "Participants": "Participants"
 }

public/locales/id/app.json

@@ -5,25 +5,19 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Pengguna yang lain di panggilan ini sedang mengalami masalah. Supaya dapat mendiagnosa masalah ini, kami ingin mengumpulkan sebuah catatan pengawakutuan.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "Call link copied": "Tautan panggilan disalin",
-  "Call type menu": "Menu jenis panggilan",
   "Camera": "Kamera",
   "Close": "Tutup",
   "Confirm password": "Konfirmasi kata sandi",
   "Copied!": "Disalin!",
-  "Copy and share this call link": "Salin dan bagikan tautan panggilan ini",
   "Create account": "Buat akun",
-  "Debug log": "Catatan pengawakutuan",
   "Debug log request": "Permintaan catatan pengawakutuan",
   "Developer": "Pengembang",
   "Display name": "Nama tampilan",
-  "Download debug logs": "Unduh catatan pengawakutuan",
   "Exit full screen": "Keluar dari layar penuh",
   "Full screen": "Layar penuh",
   "Go": "Bergabung",
   "Home": "Beranda",
   "Include debug logs": "Termasuk catatan pengawakutuan",
-  "Inspector": "Inspektur",
   "Join call": "Bergabung ke panggilan",
   "Join call now": "Bergabung ke panggilan sekarang",
   "Join existing call?": "Bergabung ke panggilan yang sudah ada?",
@@ -51,27 +45,19 @@
   "Sending…": "Mengirimkan…",
   "Settings": "Pengaturan",
   "Share screen": "Bagikan layar",
-  "Show call inspector": "Tampilkan inspektur panggilan",
   "Sign in": "Masuk",
   "Sign out": "Keluar",
   "Speaker": "Pembicara",
   "Spotlight": "Sorotan",
   "Submit feedback": "Kirim masukan",
-  "Take me Home": "Bawa saya ke Beranda",
   "This call already exists, would you like to join?": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
   "User menu": "Menu pengguna",
   "Username": "Nama pengguna",
   "Version: {{version}}": "Versi: {{version}}",
   "Video": "Video",
-  "Video call": "Panggilan video",
-  "Video call name": "Nama panggilan video",
   "Waiting for other participants…": "Menunggu peserta lain…",
-  "Walkie-talkie call": "Panggilan protofon",
-  "Walkie-talkie call name": "Nama panggilan protofon",
   "Yes, join call": "Ya, bergabung ke panggilan",
-  "Your recent calls": "Panggilan Anda terkini",
   "Sending debug logs…": "Mengirimkan catatan pengawakutuan…",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung ke panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
   "Element Call Home": "Beranda Element Call",
   "Copy": "Salin",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
@@ -112,11 +98,26 @@
   "Microphone off": "Mikrofon dimatikan",
   "Microphone on": "Mikrofon dinyalakan",
   "Not encrypted": "Tidak terenkripsi",
-  "Share": "Bagikan",
-  "Share this call": "Bagikan panggilan ini",
   "Sharing screen": "Berbagi layar",
-  "Video off": "Video dinonaktifkan",
-  "Video on": "Video diaktifkan",
   "{{count, number}}|one": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}"
+  "You": "Anda",
+  "Continue in browser": "Lanjutkan dalam peramban",
+  "Mute microphone": "Matikan mikrofon",
+  "Name of call": "Nama panggilan",
+  "Open in the app": "Buka dalam aplikasi",
+  "Ready to join?": "Siap untuk bergabung?",
+  "Select app": "Pilih plikasi",
+  "Start new call": "Mulai panggilan baru",
+  "Start video": "Nyalakan video",
+  "Stop video": "Matikan video",
+  "Unmute microphone": "Nyalakan mikrofon",
+  "Back to recents": "Kembali ke terkini",
+  "Call not found": "Panggilan tidak ditemukan",
+  "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.": "Panggilan sekarang terenkripsi secara ujung ke ujung dan harus dibuat dari laman beranda. Ini memastikan bahwa semuanya menggunakan kunci enkripsi yang sama.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Peramban web Anda tidak mendukung enkripsi media ujung ke ujung. Peramban yang didukung adalah Chrome, Safari, dan Firefox >=117",
+  "Invite": "Undang",
+  "Invite to this call": "Undang ke panggilan ini",
+  "Participants": "Peserta",
+  "Copy link": "Salin tautan",
+  "Link copied to clipboard": "Tautan disalin ke papan klip"
 }

public/locales/it/app.json

@@ -4,10 +4,8 @@
   "{{count}} stars|one": "{{count}} stelle",
   "{{count}} stars|other": "{{count}} stelle",
   "{{displayName}} is presenting": "{{displayName}} sta presentando",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Hai già un profilo?</0><1><0>Accedi</0> o <2>Accedi come ospite</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Crea un profilo</0> o <2>Accedi come ospite</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Entra nella chiamata</0><1>o</1><2>Copia il collegamento ed entra dopo</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ops, qualcosa è andato storto.</0>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>L'invio di registri di debug ci aiuterà ad individuare il problema.</0>",
   "<0>Thanks for your feedback!</0>": "<0>Grazie per la tua opinione!</0>",
@@ -15,22 +13,17 @@
   "Audio": "Audio",
   "Avatar": "Avatar",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Cliccando \"Vai\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
-  "Call link copied": "Collegamento alla chiamata copiato",
-  "Call type menu": "Menu del tipo di chiamata",
   "Camera": "Fotocamera",
   "Close": "Chiudi",
   "Confirm password": "Conferma password",
   "Connectivity to the server has been lost.": "La connessione al server è stata persa.",
   "Copied!": "Copiato!",
   "Copy": "Copia",
-  "Copy and share this call link": "Copia e condividi questo collegamento alla chiamata",
   "Create account": "Crea profilo",
-  "Debug log": "Registro di debug",
   "Debug log request": "Richiesta registro di debug",
   "Developer": "Sviluppatore",
   "Developer Settings": "Impostazioni per sviluppatori",
-  "Display name": "Nome da mostrare",
-  "Download debug logs": "Scarica registri di debug",
+  "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",
@@ -57,7 +50,6 @@
   "More": "Altro",
   "No": "No",
   "Not encrypted": "Non cifrata",
-  "Inspector": "Ispettore",
   "Join existing call?": "Entrare in una chiamata esistente?",
   "Not registered yet? <2>Create an account</2>": "Non hai ancora un profilo? <2>Creane uno</2>",
   "Password": "Password",
@@ -76,9 +68,7 @@
   "Sending debug logs…": "Invio dei registri di debug…",
   "Sending…": "Invio…",
   "Settings": "Impostazioni",
-  "Share": "Condividi",
   "Share screen": "Condividi schermo",
-  "Share this call": "Condividi questa chiamata",
   "Sharing screen": "Condivisione schermo",
   "Show connection stats": "Mostra statistiche connessione",
   "Sign in": "Accedi",
@@ -86,8 +76,6 @@
   "Speaker": "Altoparlante",
   "Submit": "Invia",
   "Submit feedback": "Invia commento",
-  "Take me Home": "Portami all'inizio",
-  "Show call inspector": "Mostra ispettore della chiamata",
   "Spotlight": "In primo piano",
   "Thanks, we received your feedback!": "Grazie, abbiamo ricevuto il tuo commento!",
   "Thanks!": "Grazie!",
@@ -97,17 +85,10 @@
   "Username": "Nome utente",
   "Version: {{version}}": "Versione: {{version}}",
   "Video": "Video",
-  "Video call": "Videochiamata",
-  "Video call name": "Nome della videochiamata",
-  "Video off": "Video spento",
-  "Video on": "Video acceso",
   "Waiting for other participants…": "In attesa di altri partecipanti…",
-  "Walkie-talkie call": "Chiamata walkie-talkie",
-  "Walkie-talkie call name": "Nome della chiamata walkie-talkie",
   "Yes, join call": "Sì, entra in chiamata",
   "You were disconnected from the call": "Sei stato disconnesso dalla chiamata",
   "Your feedback": "Il tuo commento",
-  "Your recent calls": "Le tue chiamate recenti",
   "{{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>",
@@ -119,5 +100,24 @@
   "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"
+  "You": "Tu",
+  "Continue in browser": "Continua nel browser",
+  "Mute microphone": "Spegni il microfono",
+  "Select app": "Seleziona app",
+  "Name of call": "Nome della chiamata",
+  "Open in the app": "Apri nell'app",
+  "Ready to join?": "Tutto pronto per entrare?",
+  "Start video": "Avvia video",
+  "Stop video": "Ferma video",
+  "Unmute microphone": "Riaccendi il microfono",
+  "Back to recents": "Torna ai recenti",
+  "Start new call": "Inizia una nuova chiamata",
+  "Call not found": "Chiamata non trovata",
+  "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.": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Il tuo browser non supporta la crittografia end-to-end dei media. I browser supportati sono Chrome, Safari, Firefox >=117",
+  "Copy link": "Copia collegamento",
+  "Invite": "Invita",
+  "Invite to this call": "Invita a questa chiamata",
+  "Participants": "Partecipanti",
+  "Link copied to clipboard": "Collegamento copiato negli appunti"
 }

public/locales/ja/app.json

@@ -1,22 +1,17 @@
 {
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>既にアカウントをお持ちですか？</0><1><0>ログイン</0>または<2>ゲストとしてアクセス</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>アカウントを作成</0>または<2>ゲストとしてアクセス</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>今すぐ通話に参加</0><1>または</1><2>通話リンクをコピーし、後で参加</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>何かがうまく行きませんでした。</0>",
   "Camera": "カメラ",
-  "Call link copied": "通話リンクをコピーしました",
   "Avatar": "アバター",
   "Audio": "音声",
   "Confirm password": "パスワードを確認",
   "Close": "閉じる",
   "Copied!": "コピーしました！",
-  "Copy and share this call link": "通話リンクをコピーし共有",
   "Copy": "コピー",
-  "Debug log": "デバッグログ",
   "Create account": "アカウントを作成",
   "Go": "続行",
   "Element Call Home": "Element Call ホーム",
-  "Download debug logs": "デバッグログをダウンロード",
   "Display name": "表示名",
   "Developer": "開発者",
   "Full screen": "全画面表示",
@@ -50,19 +45,13 @@
   "Passwords must match": "パスワードが一致する必要があります",
   "Password": "パスワード",
   "Speaker": "スピーカー",
-  "Video call name": "ビデオ通話の名称",
-  "Video call": "ビデオ通話",
   "Video": "ビデオ",
   "Waiting for other participants…": "他の参加者を待機しています…",
-  "Walkie-talkie call name": "トランシーバー通話の名称",
-  "Walkie-talkie call": "トランシーバー通話",
   "Yes, join call": "はい、通話に参加",
   "Select an option": "オプションを選択",
   "Debug log request": "デバッグログを要求",
-  "Your recent calls": "最近の通話",
   "Login to your account": "アカウントにログイン",
   "Remove": "削除",
   "No": "いいえ",
-  "This call already exists, would you like to join?": "この通話は既に存在します。参加しますか？",
-  "Take me Home": "ホームに戻る"
+  "This call already exists, would you like to join?": "この通話は既に存在します。参加しますか？"
 }

public/locales/lv/app.json

@@ -3,7 +3,6 @@
   "{{count}} stars|other": "{{count}} zvaigznes",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Jau ir konts?</0><1><0>Pieteikties</0> vai <2>Piekļūt kā viesim</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Izveidot kontu</0> vai <2>Piekļūt kā viesim</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pievienoties zvanam tagad</0><1>vai</1><2>ievietot zvana saiti starpliktuvē un pievienoties vēlāk</2>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ak vai, kaut kas nogāja greizi!</0>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Atkļūdošanas žurnāla ierakstu iesūtīšana palīdzēs mums atklāt nepilnību.</0>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Mums patiktu saņemt Tavu atsauksmi, lai mēs varētu uzlabot Tavu pieredzi.</0>",
@@ -11,22 +10,17 @@
   "Audio": "Skaņa",
   "Avatar": "Attēls",
   "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
-  "Call link copied": "Zvana saite ievietota starpliktuvē",
-  "Call type menu": "Zvana veida izvēlne",
   "Camera": "Kamera",
   "Close": "Aizvērt",
   "Confirm password": "Apstiprināt paroli",
   "Connectivity to the server has been lost.": "Ir zaudēts savienojums ar serveri.",
   "Copied!": "Ievietots starpliktuvē.",
   "Copy": "Ievietot starpliktuvē",
-  "Copy and share this call link": "Ievietot starpliktuvē un kopīgot šo zvana saiti",
   "Create account": "Izveidot kontu",
-  "Debug log": "Atkļūdošanas žurnāls",
   "Debug log request": "Atkļūdošanas žurnāla pieprasījums",
   "Developer": "Izstrādātājs",
   "Developer Settings": "Izstrādātāja iestatījumi",
   "Display name": "Attēlojamais vārds",
-  "Download debug logs": "Lejupielādēt atkļūdošanas žurnāla ierakstus",
   "Element Call Home": "Element Call sākums",
   "Exit full screen": "Iziet no pilnekrāna",
   "Expose developer settings in the settings window.": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
@@ -45,13 +39,10 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Citam lietotājam šajā zvanā ir sarežģījumi. Lai labāk atklātu šīs nepilnības, mēs gribētu iegūt atkļūdošanas žurnālu.",
   "Home": "Sākums",
   "Waiting for other participants…": "Gaida citus dalībniekus…",
-  "Walkie-talkie call": "Rācijas zvans",
   "Yes, join call": "Jā, pievienoties zvanam",
   "Your feedback": "Tava atsauksme",
-  "Your recent calls": "Nesenie zvani",
   "How did it go?": "Kā Tev veicās?",
   "Include debug logs": "Iekļaut atkļūdošanas žurnāla ierakstus",
-  "Inspector": "Inspektors",
   "Join call": "Pievienoties zvanam",
   "Join call now": "Pievienoties zvanam tagad",
   "Join existing call?": "Pievienoties esošam zvanam?",
@@ -81,7 +72,6 @@
   "Sending…": "Nosūta…",
   "Settings": "Iestatījumi",
   "Share screen": "Kopīgot ekrānu",
-  "Show call inspector": "Rādīt zvanu inspektoru",
   "Show connection stats": "Rādīt savienojuma apkopojumu",
   "Sign in": "Pieteikties",
   "Sign out": "Atteikties",
@@ -90,7 +80,6 @@
   "Submit": "Iesniegt",
   "Submit feedback": "Iesniegt atsauksmi",
   "Submitting…": "Iesniedz…",
-  "Take me Home": "Aizvest uz sākumu",
   "Thanks, we received your feedback!": "Paldies, mēs saņēmām atsauksmi!",
   "Thanks!": "Paldies!",
   "This call already exists, would you like to join?": "Šis zvans jau pastāv. Vai vēlies pievienoties?",
@@ -98,11 +87,8 @@
   "User menu": "Lietotāja izvēlne",
   "Username": "Lietotājvārds",
   "Video": "Video",
-  "Video call": "Video zvans",
-  "Video call name": "Video zvana nosaukums",
   "You were disconnected from the call": "Tu tiki atvienots no zvana",
   "Version: {{version}}": "Versija: {{version}}",
-  "Walkie-talkie call name": "Rācijas zvana nosaukums",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Ja tiek piedzīvoti sarežģījumi vai vienkārši ir vēlme sniegt kādu atsauksmi, lūgums zemāk nosūtīt mums īsu aprakstu.",
   "Not registered yet? <2>Create an account</2>": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>"
 }

public/locales/pl/app.json

@@ -1,25 +1,18 @@
 {
   "Login": "Zaloguj się",
   "Go": "Przejdź",
-  "Your recent calls": "Twoje ostatnie połączenia",
   "Yes, join call": "Tak, dołącz do połączenia",
-  "Walkie-talkie call name": "Nazwa połączenia walkie-talkie",
-  "Walkie-talkie call": "Połączenie walkie-talkie",
   "Waiting for other participants…": "Oczekiwanie na pozostałych uczestników…",
-  "Video call name": "Nazwa połączenia wideo",
-  "Video call": "Połączenie wideo",
   "Video": "Wideo",
   "Version: {{version}}": "Wersja: {{version}}",
   "Username": "Nazwa użytkownika",
   "User menu": "Menu użytkownika",
   "This call already exists, would you like to join?": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
-  "Take me Home": "Zabierz mnie do strony głównej",
   "Submit feedback": "Prześlij opinię",
   "Spotlight": "Centrum uwagi",
   "Speaker": "Głośnik",
   "Sign out": "Wyloguj się",
   "Sign in": "Zaloguj się",
-  "Show call inspector": "Pokaż inspektora połączenia",
   "Share screen": "Udostępnij ekran",
   "Settings": "Ustawienia",
   "Sending…": "Wysyłanie…",
@@ -47,24 +40,18 @@
   "Join existing call?": "Dołączyć do istniejącego połączenia?",
   "Join call now": "Dołącz do połączenia teraz",
   "Join call": "Dołącz do połączenia",
-  "Inspector": "Inspektor",
   "Include debug logs": "Dołącz dzienniki debugowania",
   "Home": "Strona domowa",
   "Full screen": "Pełny ekran",
   "Exit full screen": "Opuść pełny ekran",
-  "Download debug logs": "Pobierz dzienniki debugowania",
   "Display name": "Nazwa wyświetlana",
   "Developer": "Programista",
   "Debug log request": "Prośba o dzienniki debugowania",
-  "Debug log": "Dzienniki debugowania",
   "Create account": "Utwórz konto",
-  "Copy and share this call link": "Skopiuj i udostępnij link do rozmowy",
   "Copied!": "Skopiowano!",
   "Confirm password": "Potwierdź hasło",
   "Close": "Zamknij",
   "Camera": "Kamera",
-  "Call type menu": "Menu typu połączenia",
-  "Call link copied": "Skopiowano link do połączenia",
   "Avatar": "Awatar",
   "Audio": "Dźwięk",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Inny użytkownik w tym połączeniu napotkał problem. Aby lepiej zdiagnozować tę usterkę, chcielibyśmy zebrać dzienniki debugowania.",
@@ -74,7 +61,6 @@
   "Copy": "Kopiuj",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Wysłanie dzienników debuggowania pomoże nam ustalić przyczynę problemu.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ojej, coś poszło nie tak.</0>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Dołącz do rozmowy już teraz</0><1>lub</1><2>Skopiuj link do rozmowy i dołącz później</2>",
   "Expose developer settings in the settings window.": "Wyświetl opcje programisty w oknie ustawień.",
   "Element Call Home": "Strona główna Element Call",
   "Developer Settings": "Opcje programisty",
@@ -112,11 +98,26 @@
   "Microphone off": "Mikrofon wyłączony",
   "Microphone on": "Mikrofon włączony",
   "Not encrypted": "Nie szyfrowane",
-  "Share": "Udostępnij",
-  "Share this call": "Udostępnij to połączenie",
   "Sharing screen": "Udostępnianie ekranu",
-  "Video off": "Wideo wyłączone",
   "{{count, number}}|one": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
-  "Video on": "Wideo włączone"
+  "Continue in browser": "Kontynuuj w przeglądarce",
+  "Mute microphone": "Wycisz mikrofon",
+  "Name of call": "Nazwa połączenia",
+  "Open in the app": "Otwórz w aplikacji",
+  "Ready to join?": "Gotowy, by dołączyć?",
+  "Select app": "Wybierz aplikację",
+  "Start new call": "Rozpocznij nowe połączenie",
+  "Start video": "Rozpocznij wideo",
+  "Back to recents": "Wróć do ostatnie",
+  "Stop video": "Zakończ wideo",
+  "Unmute microphone": "Odcisz mikrofon",
+  "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",
+  "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/ru/app.json

@@ -10,31 +10,21 @@
   "<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>Почему бы не задать пароль, тем самым сохранив аккаунт?</0><1>Так вы можете оставить своё имя и задать аватар для будущих звонков.</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Создать аккаунт</0> или <2>Зайти как гость</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже есть аккаунт?</0><1><0>Войти с ним</0> или <2>Зайти как гость</2></1>",
-  "Your recent calls": "Ваши недавние звонки",
   "Yes, join call": "Да, присоединиться",
-  "Walkie-talkie call name": "Название звонка-рации",
-  "Walkie-talkie call": "Звонок-рация",
-  "Video call name": "Название видео-звонка",
-  "Video call": "Видео-звонок",
   "Video": "Видео",
   "Version: {{version}}": "Версия: {{version}}",
   "Username": "Имя пользователя",
   "User menu": "Меню пользователя",
-  "Take me Home": "Перейти в Начало",
   "Spotlight": "Внимание",
   "Speaker": "Динамик",
   "Sign out": "Выйти",
   "Sign in": "Войти",
-  "Show call inspector": "Показать инспектор",
   "Share screen": "Поделиться экраном",
   "Settings": "Настройки",
   "Sending…": "Отправка…",
   "Local volume": "Местная громкость",
-  "Call type menu": "Меню \"Тип звонка\"",
   "Include debug logs": "Приложить журнал отладки",
-  "Download debug logs": "Скачать журнал отладки",
   "Debug log request": "Запрос журнала отладки",
-  "Debug log": "Журнал отладки",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "У одного из участников звонка есть неполадки. Чтобы лучше диагностировать похожие проблемы, нам нужен журнал отладки.",
   "Send debug logs": "Отправить журнал отладки",
   "Return to home screen": "Вернуться в Начало",
@@ -55,7 +45,6 @@
   "Join existing call?": "Присоединиться к существующему звонку?",
   "Join call now": "Присоединиться сейчас",
   "Join call": "Присоединиться",
-  "Inspector": "Инспектор",
   "Home": "Начало",
   "Go": "Далее",
   "Full screen": "Полноэкранный режим",
@@ -63,17 +52,14 @@
   "Display name": "Видимое имя",
   "Developer": "Разработчику",
   "Create account": "Создать аккаунт",
-  "Copy and share this call link": "Скопируйте и поделитесь этой ссылкой на звонок",
   "Copied!": "Скопировано!",
   "Confirm password": "Подтвердите пароль",
   "Close": "Закрыть",
   "Camera": "Камера",
-  "Call link copied": "Ссылка на звонок скопирована",
   "Avatar": "Аватар",
   "Audio": "Аудио",
   "Element Call Home": "Главная Element Call",
   "Copy": "Копировать",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Присоединиться сейчас</0><1>или<1><2>Скопировать ссылку и присоединиться позже</2>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Отправка журналов поможет нам найти и устранить проблему.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Упс, что-то пошло не так.</0>",
   "Expose developer settings in the settings window.": "Раскрыть настройки разработчика в окне настроек.",

public/locales/sk/app.json

@@ -4,9 +4,7 @@
   "Include debug logs": "Zahrnúť záznamy o ladení",
   "Element Call Home": "Domov Element Call",
   "Waiting for other participants…": "Čaká sa na ďalších účastníkov…",
-  "Take me Home": "Zober ma domov",
   "Submit feedback": "Odoslať spätnú väzbu",
-  "Show call inspector": "Zobraziť inšpektora hovorov",
   "Share screen": "Zdieľať obrazovku",
   "Sending…": "Odosielanie…",
   "Sending debug logs…": "Odosielanie záznamov o ladení…",
@@ -33,18 +31,11 @@
   "Join existing call?": "Pripojiť sa k existujúcemu hovoru?",
   "Join call now": "Pripojiť sa k hovoru teraz",
   "Join call": "Pripojiť sa k hovoru",
-  "Inspector": "Inšpektor",
   "Home": "Domov",
   "Go": "Prejsť",
   "Full screen": "Zobrazenie na celú obrazovku",
   "Exit full screen": "Ukončiť zobrazenie na celú obrazovku",
-  "Download debug logs": "Stiahnuť záznamy ladenia",
-  "Your recent calls": "Vaše nedávne hovory",
   "Yes, join call": "Áno, pripojiť sa k hovoru",
-  "Walkie-talkie call name": "Názov vysielačkového hovoru",
-  "Walkie-talkie call": "Vysielačkový hovor",
-  "Video call name": "Názov video hovoru",
-  "Video call": "Video hovor",
   "Video": "Video",
   "Version: {{version}}": "Verzia: {{version}}",
   "Username": "Meno používateľa",
@@ -57,21 +48,16 @@
   "Display name": "Zobrazované meno",
   "Developer": "Vývojár",
   "Debug log request": "Žiadosť o záznam ladenia",
-  "Debug log": "Záznam o ladení",
   "Create account": "Vytvoriť účet",
-  "Copy and share this call link": "Skopírovať a zdieľať tento odkaz na hovor",
   "Copy": "Kopírovať",
   "Copied!": "Skopírované!",
   "Confirm password": "Potvrdiť heslo",
   "Close": "Zatvoriť",
   "Camera": "Kamera",
-  "Call type menu": "Ponuka typu hovoru",
-  "Call link copied": "Odkaz na hovor skopírovaný",
   "Avatar": "Obrázok",
   "Audio": "Audio",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ďalší používateľ v tomto hovore má problém. Aby sme mohli lepšie diagnostikovať tieto problémy, chceli by sme získať záznam o ladení.",
   "<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>Prečo neskončiť nastavením hesla, aby ste si zachovali svoj účet? </0><1>Budete si môcť ponechať svoje meno a nastaviť obrázok, ktorý sa bude používať pri budúcich hovoroch</1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pripojiť sa k hovoru teraz</0><1>alebo</1><2>Kopírovať odkaz na hovor a pripojiť sa neskôr</2>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Vytvoriť konto</0> Alebo <2>Prihlásiť sa ako hosť</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte konto?</0><1><0>Prihláste sa</0> Alebo <2>Prihlásiť sa ako hosť</2></1>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odoslanie záznamov ladenia nám pomôže nájsť problém.</0>",
@@ -112,12 +98,26 @@
   "Microphone on": "Mikrofón zapnutý",
   "Grid": "Sieť",
   "Not encrypted": "Nie je zašifrované",
-  "Share": "Zdieľať",
   "Sharing screen": "Zdieľanie obrazovky",
-  "Video off": "Video vypnuté",
-  "Video on": "Video zapnuté",
   "{{count, number}}|one": "{{count, number}}",
-  "Share this call": "Zdieľať tento hovor",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
-  "You": "Vy"
+  "You": "Vy",
+  "Continue in browser": "Pokračovať v prehliadači",
+  "Mute microphone": "Stlmiť mikrofón",
+  "Name of call": "Názov hovoru",
+  "Open in the app": "Otvoriť v aplikácii",
+  "Ready to join?": "Ste pripravení sa pridať?",
+  "Select app": "Vybrať aplikáciu",
+  "Start new call": "Spustiť nový hovor",
+  "Start video": "Spustiť video",
+  "Stop video": "Zastaviť video",
+  "Back to recents": "Späť k nedávnym",
+  "Unmute microphone": "Zrušiť stlmenie mikrofónu",
+  "Call not found": "Hovor nebol nájdený",
+  "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.": "Hovory sú teraz end-to-end šifrované a je potrebné ich vytvoriť z domovskej stránky. To pomáha zabezpečiť, aby všetci používali rovnaký šifrovací kľúč.",
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Váš webový prehliadač nepodporuje end-to-end šifrovanie médií. Podporované prehliadače sú Chrome, Safari, Firefox >=117",
+  "Invite": "Pozvať",
+  "Link copied to clipboard": "Odkaz skopírovaný do schránky",
+  "Participants": "Účastníci",
+  "Copy link": "Kopírovať odkaz",
+  "Invite to this call": "Pozvať na tento hovor"
 }

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/tr/app.json

@@ -3,25 +3,19 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Bu aramadaki başka bir kullanıcı sorun yaşıyor. Sorunu daha iyi çözebilmemiz için hata ayıklama kütüğünü almak isteriz.",
   "Audio": "Ses",
   "Avatar": "Avatar",
-  "Call link copied": "Arama bağlantısı kopyalandı",
-  "Call type menu": "Arama tipi menüsü",
   "Camera": "Kamera",
   "Close": "Kapat",
   "Confirm password": "Parolayı tekrar edin",
   "Copied!": "Kopyalandı",
-  "Copy and share this call link": "Arama bağlantısını kopyala ve paylaş",
   "Create account": "Hesap aç",
-  "Debug log": "Hata ayıklama kütüğü",
   "Debug log request": "Hata ayıklama kütük istemi",
   "Developer": "Geliştirici",
   "Display name": "Ekran adı",
-  "Download debug logs": "Hata ayıklama kütüğünü indir",
   "Exit full screen": "Tam ekranı terk et",
   "Full screen": "Tam ekran",
   "Go": "Git",
   "Home": "Ev",
   "Include debug logs": "Hata ayıklama kütüğünü dahil et",
-  "Inspector": "Denetçi",
   "Join call": "Aramaya katıl",
   "Join call now": "Aramaya katıl",
   "Join existing call?": "Mevcut aramaya katıl?",
@@ -48,11 +42,9 @@
   "Sending…": "Gönderiliyor…",
   "Settings": "Ayarlar",
   "Share screen": "Ekran paylaş",
-  "Show call inspector": "Arama denetçisini göster",
   "Sign in": "Gir",
   "Sign out": "Çık",
   "Submit feedback": "Geri bildirim ver",
-  "Take me Home": "Ev ekranına gir",
   "This call already exists, would you like to join?": "Bu arama zaten var, katılmak ister misiniz?",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Hesap oluştur</0> yahut <2>Konuk olarak gir</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Mevcut hesabınız mı var?</0><1><0>Gir</0> yahut <2>Konuk girişi</2></1>"

public/locales/uk/app.json

@@ -1,24 +1,17 @@
 {
   "Loading…": "Завантаження…",
-  "Your recent calls": "Ваші недавні виклики",
   "Yes, join call": "Так, приєднатися до виклику",
-  "Walkie-talkie call name": "Назва виклику-рації",
-  "Walkie-talkie call": "Виклик-рація",
   "Waiting for other participants…": "Очікування на інших учасників…",
-  "Video call name": "Назва відеовиклику",
-  "Video call": "Відеовиклик",
   "Video": "Відео",
   "Version: {{version}}": "Версія: {{version}}",
   "Username": "Ім'я користувача",
   "User menu": "Меню користувача",
   "This call already exists, would you like to join?": "Цей виклик уже існує, бажаєте приєднатися?",
-  "Take me Home": "Перейти до Домівки",
   "Submit feedback": "Надіслати відгук",
   "Spotlight": "У центрі уваги",
   "Speaker": "Динамік",
   "Sign out": "Вийти",
   "Sign in": "Увійти",
-  "Show call inspector": "Показати інспектора виклику",
   "Share screen": "Поділитися екраном",
   "Settings": "Налаштування",
   "Sending…": "Надсилання…",
@@ -46,32 +39,25 @@
   "Join existing call?": "Приєднатися до наявного виклику?",
   "Join call now": "Приєднатися до виклику зараз",
   "Join call": "Приєднатися до виклику",
-  "Inspector": "Інспектор",
   "Include debug logs": "Долучити журнали налагодження",
   "Home": "Домівка",
   "Go": "Далі",
   "Full screen": "Повноекранний режим",
   "Exit full screen": "Вийти з повноекранного режиму",
-  "Download debug logs": "Завантажити журнали налагодження",
   "Display name": "Псевдонім",
   "Developer": "Розробнику",
   "Debug log request": "Запит журналу налагодження",
-  "Debug log": "Журнал налагодження",
   "Create account": "Створити обліковий запис",
-  "Copy and share this call link": "Скопіювати та поділитися цим посиланням на виклик",
   "Copied!": "Скопійовано!",
   "Confirm password": "Підтвердити пароль",
   "Close": "Закрити",
   "Camera": "Камера",
-  "Call type menu": "Меню типу виклику",
-  "Call link copied": "Посилання на виклик скопійовано",
   "Avatar": "Аватар",
   "Audio": "Звук",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Інший користувач у цьому виклику має проблему. Щоб краще визначити ці проблеми, ми хотіли б зібрати журнал налагодження.",
   "<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>Чому б не завершити, налаштувавши пароль для збереження свого облікового запису?</0><1>Ви зможете зберегти своє ім'я та встановити аватарку для подальшого користування під час майбутніх викликів</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Створити обліковий запис</0> або <2>Отримати доступ як гість</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже маєте обліковий запис?</0><1><0>Увійти</0> Or <2>Отримати доступ як гість</2></1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Приєднатися до виклику зараз</0><1>Or</1><2>Скопіювати посилання на виклик і приєднатися пізніше</2>",
   "Element Call Home": "Домівка Element Call",
   "Copy": "Копіювати",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Надсилання журналів налагодження допоможе нам виявити проблему.</0>",
@@ -106,18 +92,32 @@
   "Enable end-to-end encryption (password protected calls)": "Увімкнути наскрізне шифрування (захищені паролем виклики)",
   "End-to-end encryption isn't supported on your browser.": "Наскрізне шифрування не підтримується вашим переглядачем.",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "Encrypted": "Зашифровано",
   "Microphone on": "Мікрофон увімкнено",
   "Not encrypted": "Не зашифровано",
-  "Share": "Поділитися",
   "Sharing screen": "Презентація екрана",
-  "Video off": "Відео вимкнено",
-  "Video on": "Відео ввімкнено",
   "{{count, number}}|one": "{{count, number}}",
   "End call": "Завершити виклик",
   "Grid": "Сітка",
   "Microphone off": "Мікрофон вимкнено",
-  "Share this call": "Поділитися цим викликом",
-  "You": "Ви"
+  "You": "Ви",
+  "Mute microphone": "Вимкнути мікрофон",
+  "Open in the app": "Відкрити у застосунку",
+  "Ready to join?": "Готові приєднатися?",
+  "Select app": "Вибрати застосунок",
+  "Start video": "Розпочати відео",
+  "Stop video": "Зупинити відео",
+  "Unmute microphone": "Увімкнути мікрофон",
+  "Continue in browser": "Продовжити у браузері",
+  "Name of call": "Назва виклику",
+  "Start new call": "Розпочати новий виклик",
+  "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",
+  "Invite": "Запросити",
+  "Link copied to clipboard": "Посилання скопійовано до буфера обміну",
+  "Participants": "Учасники",
+  "Copy link": "Скопіювати посилання",
+  "Invite to this call": "Запросити до цього виклику"
 }

public/locales/vi/app.json

@@ -6,13 +6,10 @@
   "Sending…": "Đang gửi…",
   "Sign in": "Đăng nhập",
   "Submit": "Gửi",
-  "Video call name": "Tên cuộc gọi truyền hình",
-  "Video call": "Gọi truyền hình",
   "Video": "Truyền hình",
   "Username": "Tên người dùng",
   "Yes, join call": "Vâng, tham gia cuộc gọi",
   "Your feedback": "Phản hồi của bạn",
-  "Your recent calls": "Cuộc gọi gần đây",
   "Waiting for other participants…": "Đang đợi những người khác…",
   "Version: {{version}}": "Phiên bản: {{version}}",
   "Submit feedback": "Gửi phản hồi",
@@ -23,22 +20,17 @@
   "Join call now": "Tham gia cuộc gọi",
   "Create account": "Tạo tài khoản",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Tạo tài khoản</0> Hay <2>Tham gia dưới tên khác</2>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Tham gia cuộc gọi</0><1>hay</1><2>Sao chép liên kết cuộc gọi và tham gia sau</2>",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Gửi nhật ký gỡ lỗi sẽ giúp chúng tôi theo dõi vấn đề.</0>",
   "Avatar": "Ảnh đại diện",
   "Audio": "Âm thanh",
   "Camera": "Máy quay",
-  "Call link copied": "Đã sao chép liên kết cuộc gọi",
   "Copied!": "Đã sao chép!",
   "Confirm password": "Xác nhận mật khẩu",
   "Close": "Đóng",
-  "Debug log": "Nhật ký gỡ lỗi",
   "Copy": "Sao chép",
-  "Copy and share this call link": "Sao chép và chia sẻ liên kết cuộc gọi này",
   "Display name": "Tên hiển thị",
   "Developer Settings": "Cài đặt phát triển",
   "Developer": "Nhà phát triển",
-  "Download debug logs": "Tải xuống nhật ký gỡ lỗi",
   "Feedback": "Phản hồi",
   "Full screen": "Toàn màn hình",
   "Include debug logs": "Kèm theo nhật ký gỡ lỗi",
@@ -53,8 +45,6 @@
   "Spotlight": "Tiêu điểm",
   "Submitting…": "Đang gửi…",
   "Thanks, we received your feedback!": "Cảm ơn, chúng tôi đã nhận được phản hồi!",
-  "Walkie-talkie call": "Cuộc gọi thoại",
-  "Walkie-talkie call name": "Tên cuộc gọi thoại",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Đã có tài khoản?</0><1><0>Đăng nhập</0> Hay <2>Tham gia dưới tên Khách</2></1>",
   "Exit full screen": "Rời chế độ toàn màn hình",
   "Profile": "Hồ sơ",

public/locales/zh-Hans/app.json

@@ -1,30 +1,21 @@
 {
-  "Your recent calls": "最近通话",
   "Yes, join call": "是，加入通话",
-  "Walkie-talkie call name": "对讲机通话名称",
-  "Walkie-talkie call": "对讲机通话",
   "Waiting for other participants…": "等待其他参与者……",
-  "Video call name": "视频通话名称",
-  "Video call": "视频通话",
   "Video": "视频",
   "Version: {{version}}": "版本：{{version}}",
   "Username": "用户名",
   "User menu": "用户菜单",
   "This call already exists, would you like to join?": "该通话已存在，你想加入吗？",
-  "Take me Home": "返回主页",
   "Submit feedback": "提交反馈",
   "Spotlight": "聚焦模式",
   "Speaker": "发言人",
-  "Sign out": "注销登录",
+  "Sign out": "登出",
   "Sign in": "登录",
   "Audio": "音频",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "这个通话中的另一个用户出现了问题。为了更好地诊断这些问题，我们想收集调试日志。",
-  "<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>为什么不设置一个密码来保留你的账户？</0><1>你将可以保留你的名字并设置一个头像，以便在未来的通话中使用。</1>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>现在加入通话</0><1>或</1><2>复制通话链接并稍后加入</2>",
+  "<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>为何不设置密码来保留你的账户？</0><1>保留昵称并设置头像，以便在未来的通话中使用。</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>创建账户</0> Or <2>以访客身份继续</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已有账户？</0><1><0>登录</0> Or <2>以访客身份继续</2></1>",
-  "Inspector": "检查器",
-  "Show call inspector": "显示通话检查器",
   "Share screen": "屏幕共享",
   "Settings": "设置",
   "Sending…": "正在发送……",
@@ -35,13 +26,13 @@
   "Remove": "移除",
   "Registering…": "正在注册……",
   "Register": "注册",
-  "Recaptcha not loaded": "reCaptcha未加载",
-  "Recaptcha dismissed": "reCaptcha验证失败",
+  "Recaptcha not loaded": "验证器未载入",
+  "Recaptcha dismissed": "人机验证失败",
   "Profile": "个人信息",
   "Passwords must match": "密码必须匹配",
   "Password": "密码",
   "Not registered yet? <2>Create an account</2>": "还没有注册？ <2>创建账户<2>",
-  "Not now, return to home screen": "暂不，先返回主页",
+  "Not now, return to home screen": "暂不，返回主页",
   "No": "否",
   "More": "更多",
   "Microphone": "麦克风",
@@ -50,7 +41,7 @@
   "Logging in…": "登录中……",
   "Local volume": "本地音量",
   "Loading…": "加载中……",
-  "Join existing call?": "加入现有的通话？",
+  "Join existing call?": "是否加入现有的通话？",
   "Join call now": "现在加入通话",
   "Join call": "加入通话",
   "Include debug logs": "包含调试日志",
@@ -58,22 +49,70 @@
   "Go": "开始",
   "Full screen": "全屏",
   "Exit full screen": "退出全屏",
-  "Element Call Home": "Element Call 主页",
-  "Download debug logs": "下载调试日志",
+  "Element Call Home": "Element 呼叫 主页",
   "Display name": "显示名称",
   "Developer": "开发者",
-  "Debug log request": "调试日志请求",
-  "Debug log": "调试日志",
+  "Debug log request": "请求调试日志",
   "Create account": "创建账户",
-  "Copy and share this call link": "复制并分享该链接",
   "Copy": "复制",
   "Copied!": "已复制！",
   "Confirm password": "确认密码",
   "Close": "关闭",
   "Camera": "摄像头",
-  "Call type menu": "通话类型菜单",
-  "Call link copied": "链接已复制",
   "Avatar": "头像",
   "<0>Oops, something's gone wrong.</0>": "<0>哎哟，出问题了。</0>",
-  "<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>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>您可以取消选中复选框来撤回同意。如果正在通话中，此设置将在通话结束时生效。",
+  "Encrypted": "已加密",
+  "End call": "通话结束",
+  "Grid": "网格",
+  "Microphone off": "关闭麦克风",
+  "Microphone on": "开启麦克风",
+  "Not encrypted": "未加密",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "Sharing screen": "屏幕共享",
+  "You": "你",
+  "Continue in browser": "在浏览器中继续",
+  "Mute microphone": "麦克风静音",
+  "Name of call": "通话名称",
+  "Open in the app": "在应用中打开",
+  "Ready to join?": "准备好加入了吗？",
+  "Back to recents": "返回最近通话",
+  "Select app": "选择应用程序",
+  "Start new call": "开始新通话",
+  "Start video": "开始视频",
+  "Stop video": "停止视频",
+  "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",
+  "{{count}} stars|other": "{{count}} 个星",
+  "{{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>",
+  "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>.": "参与测试即表示您同意我们收集匿名数据，用于改进产品。您可以在我们的<2>隐私政策</2>和<5>Cookie政策</5>中找到有关我们跟踪哪些数据以及更多信息。",
+  "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}} 个星",
+  "<0>Thanks for your feedback!</0>": "<0>感谢反馈！</0>",
+  "Your feedback": "您的反馈",
+  "Connectivity to the server has been lost.": "与服务器的连接中断。",
+  "Developer Settings": "开发者设置",
+  "Feedback": "反馈",
+  "Submit": "提交",
+  "Reconnect": "断线重连",
+  "Enable end-to-end encryption (password protected calls)": "启用端对端加密（有密码保护的通话）",
+  "End-to-end encryption isn't supported on your browser.": "您的浏览器不支持端对端加密。",
+  "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": "重传日志",
+  "Submitting…": "提交中…",
+  "Thanks!": "谢谢！",
+  "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>",
+  "You were disconnected from the call": "通话已中断"
 }

public/locales/zh-Hant/app.json

@@ -1,30 +1,22 @@
 {
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>現在加入通話</0><1>或</1><2>複製通話連結，稍後再加入</2>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>建立帳號</0> 或<2>以訪客身份登入</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已經有帳號?</0><1><0>登入</0> 或<2>以訪客身份登入</2></1>",
   "Expose developer settings in the settings window.": "在設定視窗中顯示開發者設定。",
   "Developer Settings": "開發者設定",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>送出除錯紀錄，可幫助我們修正問題。</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>喔喔，有些地方怪怪的。</0>",
-  "Your recent calls": "您最近的通話",
   "Yes, join call": "是，加入對話",
-  "Walkie-talkie call name": "對講機式通話名稱",
-  "Walkie-talkie call": "即時通話",
   "Waiting for other participants…": "等待其他參加者…",
-  "Video call name": "視訊通話姓名",
-  "Video call": "視訊通話",
   "Video": "視訊",
   "Version: {{version}}": "版本： {{version}}",
   "Username": "使用者名稱",
   "User menu": "使用者選單",
   "This call already exists, would you like to join?": "通話已經開始，請問您要加入嗎？",
-  "Take me Home": "帶我回主畫面",
   "Submit feedback": "遞交回覆",
   "Spotlight": "聚焦",
   "Speaker": "發言者",
   "Sign out": "登出",
   "Sign in": "登入",
-  "Show call inspector": "顯示通話稽查員",
   "Share screen": "分享畫面",
   "Settings": "設定",
   "Sending…": "傳送中…",
@@ -53,27 +45,21 @@
   "Join existing call?": "加入已開始的通話嗎？",
   "Join call now": "現在加入通話",
   "Join call": "加入通話",
-  "Inspector": "稽查員",
   "Include debug logs": "包含除錯紀錄",
   "Home": "首頁",
   "Go": "前往",
   "Full screen": "全螢幕",
   "Exit full screen": "退出全螢幕",
   "Element Call Home": "Element Call 首頁",
-  "Download debug logs": "下載偵錯報告",
   "Display name": "顯示名稱",
   "Developer": "開發者",
   "Debug log request": "請求偵錯報告",
-  "Debug log": "除錯紀錄",
   "Create account": "建立帳號",
-  "Copy and share this call link": "複製並分享通話連結",
   "Copy": "複製",
   "Copied!": "已複製！",
   "Confirm password": "確認密碼",
   "Close": "關閉",
   "Camera": "相機",
-  "Call type menu": "通話類型選單",
-  "Call link copied": "已複製通話連結",
   "Avatar": "大頭照",
   "Audio": "語音",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "這通對話中的另一位使用者遇到了某些問題。為了診斷問題，我們將會建立除錯紀錄。",
@@ -107,17 +93,31 @@
   "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
-  "{{names, list(style: short;)}}": "{{names, list(style: short;)}}",
   "Encrypted": "已加密",
   "End call": "結束通話",
   "Grid": "網格",
   "Microphone off": "麥克風關閉",
   "Microphone on": "麥克風開啟",
   "Not encrypted": "未加密",
-  "Share": "分享",
-  "Share this call": "分享此通話",
   "Sharing screen": "分享畫面",
-  "Video off": "視訊關閉",
-  "Video on": "視訊開啟",
-  "You": "您"
+  "You": "您",
+  "Continue in browser": "在瀏覽器中繼續",
+  "Mute microphone": "將麥克風靜音",
+  "Name of call": "通話名稱",
+  "Open in the app": "在應用程式中開啟",
+  "Ready to join?": "準備好加入了？",
+  "Select app": "選取應用程式",
+  "Start new call": "開始新通話",
+  "Start video": "開始影片",
+  "Back to recents": "回到最近的通話",
+  "Stop video": "停止影片",
+  "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",
+  "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,
@@ -30,8 +30,6 @@ import { LoginPage } from "./auth/LoginPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
-import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
-import { InspectorContextProvider } from "./room/GroupCallInspector";
 import { CrashView, LoadingView } from "./FullScreenView";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
@@ -43,7 +41,7 @@ interface BackgroundProviderProps {
   children: JSX.Element;
 }
 
-const BackgroundProvider = ({ children }: BackgroundProviderProps) => {
+const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
 
   useEffect(() => {
@@ -63,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(() => {
@@ -83,30 +81,25 @@ export default function App({ history }: AppProps) {
           <Suspense fallback={null}>
             <ClientProvider>
               <MediaDevicesProvider>
-                <InspectorContextProvider>
-                  <Sentry.ErrorBoundary fallback={errorPage}>
-                    <OverlayProvider>
-                      <DisconnectedBanner />
-                      <Switch>
-                        <SentryRoute exact path="/">
-                          <HomePage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/login">
-                          <LoginPage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/register">
-                          <RegisterPage />
-                        </SentryRoute>
-                        <SentryRoute path="/inspector">
-                          <SequenceDiagramViewerPage />
-                        </SentryRoute>
-                        <SentryRoute path="*">
-                          <RoomPage />
-                        </SentryRoute>
-                      </Switch>
-                    </OverlayProvider>
-                  </Sentry.ErrorBoundary>
-                </InspectorContextProvider>
+                <Sentry.ErrorBoundary fallback={errorPage}>
+                  <OverlayProvider>
+                    <DisconnectedBanner />
+                    <Switch>
+                      <SentryRoute exact path="/">
+                        <HomePage />
+                      </SentryRoute>
+                      <SentryRoute exact path="/login">
+                        <LoginPage />
+                      </SentryRoute>
+                      <SentryRoute exact path="/register">
+                        <RegisterPage />
+                      </SentryRoute>
+                      <SentryRoute path="*">
+                        <RoomPage />
+                      </SentryRoute>
+                    </Switch>
+                  </OverlayProvider>
+                </Sentry.ErrorBoundary>
               </MediaDevicesProvider>
             </ClientProvider>
           </Suspense>
@@ -116,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 { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
-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/Facepile.tsx

@@ -1,66 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { HTMLAttributes } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { useTranslation } from "react-i18next";
-import { AvatarStack } from "@vector-im/compound-web";
-
-import { Avatar, Size } from "./Avatar";
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  client: MatrixClient;
-  members: RoomMember[];
-  max?: number;
-  size?: Size | number;
-}
-
-export function Facepile({
-  className,
-  client,
-  members,
-  max = 3,
-  size = Size.XS,
-  ...rest
-}: Props) {
-  const { t } = useTranslation();
-
-  const displayedMembers = members.slice(0, max);
-
-  return (
-    <AvatarStack
-      title={t("{{names, list(style: short;)}}", {
-        list: displayedMembers.map((m) => m.name),
-      })}
-      {...rest}
-    >
-      {displayedMembers.map((member, i) => {
-        const avatarUrl = member.getMxcAvatarUrl();
-        return (
-          <Avatar
-            key={i}
-            id={member.userId}
-            name={member.name}
-            size={size}
-            src={avatarUrl ?? undefined}
-          />
-        );
-      })}
-    </AvatarStack>
-  );
-}

src/FullScreenView.tsx

@@ -14,11 +14,12 @@ 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";
 import * as Sentry from "@sentry/react";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import { LinkButton, Button } from "./button";
@@ -32,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>
@@ -46,18 +50,18 @@ 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();
 
   useEffect(() => {
-    console.error(error);
+    logger.error(error);
     Sentry.captureException(error);
   }, [error]);
 
@@ -95,9 +99,9 @@ export function ErrorView({ error }: ErrorViewProps) {
       )}
     </FullScreenView>
   );
-}
+};
 
-export function CrashView() {
+export const CrashView: FC = () => {
   const { t } = useTranslation();
 
   const onReload = useCallback(() => {
@@ -126,9 +130,9 @@ export function CrashView() {
       </Button>
     </FullScreenView>
   );
-}
+};
 
-export function LoadingView() {
+export const LoadingView: FC = () => {
   const { t } = useTranslation();
 
   return (
@@ -136,4 +140,4 @@ export function LoadingView() {
       <h1>{t("Loading…")}</h1>
     </FullScreenView>
   );
-}
+};

src/Glass.tsx

@@ -48,5 +48,5 @@ export const Glass = forwardRef<HTMLDivElement, Props>(
     >
       {Children.only(children)}
     </div>
-  )
+  ),
 );

src/Header.module.css

@@ -21,6 +21,7 @@ limitations under the License.
   align-items: center;
   user-select: none;
   flex-shrink: 0;
+  padding-inline: var(--inline-content-inset);
 }
 
 .nav {
@@ -28,7 +29,6 @@ limitations under the License.
   flex: 1;
   align-items: center;
   white-space: nowrap;
-  padding-inline: var(--inline-content-inset);
   height: 80px;
 }
 
@@ -111,7 +111,6 @@ limitations under the License.
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1-5x);
-  font: var(--cpd-font-body-sm-medium);
 }
 
 @media (min-width: 800px) {

src/Header.tsx

@@ -18,13 +18,12 @@ import classNames from "classnames";
 import { FC, HTMLAttributes, ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
-import { Heading } from "@vector-im/compound-web";
+import { Heading, Text } from "@vector-im/compound-web";
+import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
 
 import styles from "./Header.module.css";
-import { ReactComponent as Logo } from "./icons/Logo.svg";
+import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
-import { Facepile } from "./Facepile";
 import { EncryptionLock } from "./room/EncryptionLock";
 import { useMediaQuery } from "./useMediaQuery";
 
@@ -33,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;
@@ -47,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;
@@ -74,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 (
@@ -111,15 +110,14 @@ export function HeaderLogo({ className }: HeaderLogoProps) {
       <Logo />
     </Link>
   );
-}
+};
 
 interface RoomHeaderInfoProps {
   id: string;
   name: string;
   avatarUrl: string | null;
   encrypted: boolean;
-  participants: RoomMember[];
-  client: MatrixClient;
+  participantCount: number;
 }
 
 export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
@@ -127,8 +125,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
   name,
   avatarUrl,
   encrypted,
-  participants,
-  client,
+  participantCount,
 }) => {
   const { t } = useTranslation();
   const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg";
@@ -153,10 +150,16 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
         </Heading>
         <EncryptionLock encrypted={encrypted} />
       </div>
-      {participants.length > 0 && (
+      {participantCount > 0 && (
         <div className={styles.participantsLine}>
-          <Facepile client={client} members={participants} size={20} />
-          {t("{{count, number}}", { count: participants.length })}
+          <UserProfileIcon
+            width={20}
+            height={20}
+            aria-label={t("Participants")}
+          />
+          <Text as="span" size="sm" weight="medium">
+            {t("{{count, number}}", { count: participantCount })}
+          </Text>
         </div>
       )}
     </div>

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.module.css

@@ -14,104 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.overlay {
-  position: fixed;
-  z-index: 100;
-  inset: 0;
-  background: rgba(3, 12, 27, 0.528);
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.dialogOverlay[data-state="open"] {
-  animation: fade-in 200ms;
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.dialogOverlay[data-state="closed"] {
-  animation: fade-out 130ms;
-}
-
 .modal {
-  position: fixed;
-  z-index: 101;
   display: flex;
   flex-direction: column;
 }
 
 .dialog {
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   box-sizing: border-box;
   inline-size: 520px;
   max-inline-size: 90%;
   max-block-size: 600px;
 }
 
-@keyframes zoom-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(80%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(100%);
-  }
-}
-
-@keyframes zoom-out {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(100%);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(80%);
-  }
-}
-
-.dialog[data-state="open"] {
-  animation: zoom-in 200ms;
-}
-
-.dialog[data-state="closed"] {
-  animation: zoom-out 130ms;
-}
-
-@media (prefers-reduced-motion) {
-  .dialog[data-state="open"] {
-    animation-name: fade-in;
-  }
-
-  .dialog[data-state="closed"] {
-    animation-name: fade-out;
-  }
-}
-
 .content {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  flex-grow: 1;
 }
 
 .dialog .content {
-  flex-grow: 1;
   background: var(--cpd-color-bg-canvas-default);
 }
 
@@ -124,9 +46,10 @@ limitations under the License.
   inset-block-end: 0;
   inset-inline: max(0px, calc((100% - 520px) / 2));
   max-block-size: 90%;
-  border-start-start-radius: 20px;
-  border-start-end-radius: 20px;
-  /* Drawer handle comes in the Android style by default */
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+  /* Drawer comes in the Android style by default */
+  --border-radius: 28px;
   --handle-block-size: 4px;
   --handle-inline-size: 32px;
   --handle-inset-block-start: var(--cpd-space-4x);
@@ -134,6 +57,7 @@ limitations under the License.
 }
 
 body[data-platform="ios"] .drawer {
+  --border-radius: 10px;
   --handle-block-size: 5px;
   --handle-inline-size: 36px;
   --handle-inset-block-start: var(--cpd-space-1-5x);
@@ -195,6 +119,10 @@ body[data-platform="ios"] .drawer {
   grid-area: close;
 }
 
+.body {
+  flex-grow: 1;
+}
+
 .dialog .body {
   padding-inline: var(--cpd-space-10x);
   padding-block: var(--cpd-space-10x) var(--cpd-space-12x);

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 {
@@ -27,16 +27,17 @@ import {
 } from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react";
 import classNames from "classnames";
 import { Heading } 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;
@@ -58,21 +59,23 @@ 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();
-  const touchscreen = useMediaQuery("(hover: none)");
+  // Empirically, Chrome on Android can end up not matching (hover: none), but
+  // still matching (pointer: coarse) :/
+  const touchscreen = useMediaQuery("(hover: none) or (pointer: coarse)");
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) onDismiss?.();
     },
-    [onDismiss]
+    [onDismiss],
   );
 
   if (touchscreen) {
@@ -83,9 +86,14 @@ export function Modal({
         dismissible={onDismiss !== undefined}
       >
         <Drawer.Portal>
-          <Drawer.Overlay className={styles.overlay} />
+          <Drawer.Overlay className={classNames(overlayStyles.bg)} />
           <Drawer.Content
-            className={classNames(className, styles.modal, styles.drawer)}
+            className={classNames(
+              className,
+              overlayStyles.overlay,
+              styles.modal,
+              styles.drawer,
+            )}
             {...rest}
           >
             <div className={styles.content}>
@@ -106,12 +114,18 @@ export function Modal({
       <DialogRoot open={open} onOpenChange={onOpenChange}>
         <DialogPortal>
           <DialogOverlay
-            className={classNames(styles.overlay, styles.dialogOverlay)}
+            className={classNames(overlayStyles.bg, overlayStyles.animate)}
           />
           <DialogContent asChild {...rest}>
             <Glass
               frosted
-              className={classNames(className, styles.modal, styles.dialog)}
+              className={classNames(
+                className,
+                overlayStyles.overlay,
+                overlayStyles.animate,
+                styles.modal,
+                styles.dialog,
+              )}
             >
               <div className={styles.content}>
                 <div className={styles.header}>
@@ -138,4 +152,4 @@ export function Modal({
       </DialogRoot>
     );
   }
-}
+};

src/Overlay.module.css

@@ -0,0 +1,99 @@
+/*
+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.
+*/
+
+.bg {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  background: rgba(3, 12, 27, 0.528);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.bg.animate[data-state="open"] {
+  animation: fade-in 200ms;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.bg.animate[data-state="closed"] {
+  animation: fade-out 130ms;
+}
+
+.overlay {
+  position: fixed;
+  z-index: 101;
+}
+
+.overlay.animate {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(80%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(100%);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(100%);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(80%);
+  }
+}
+
+.overlay.animate[data-state="open"] {
+  animation: zoom-in 200ms;
+}
+
+.overlay.animate[data-state="closed"] {
+  animation: zoom-out 130ms;
+}
+
+@media (prefers-reduced-motion) {
+  .overlay.animate[data-state="open"] {
+    animation-name: fade-in;
+  }
+
+  .overlay.animate[data-state="closed"] {
+    animation-name: fade-out;
+  }
+}

src/SequenceDiagramViewerPage.tsx

@@ -1,72 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import {
-  SequenceDiagramViewer,
-  SequenceDiagramMatrixEvent,
-} from "./room/GroupCallInspector";
-import { FieldRow, InputField } from "./input/Input";
-import { usePageTitle } from "./usePageTitle";
-
-interface DebugLog {
-  localUserId: string;
-  eventsByUserId: { [userId: string]: SequenceDiagramMatrixEvent[] };
-  remoteUserIds: string[];
-}
-
-export function SequenceDiagramViewerPage() {
-  const { t } = useTranslation();
-  usePageTitle(t("Inspector"));
-
-  const [debugLog, setDebugLog] = useState<DebugLog>();
-  const [selectedUserId, setSelectedUserId] = useState<string>();
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const onChangeDebugLog = useCallback((e) => {
-    if (e.target.files && e.target.files.length > 0) {
-      e.target.files[0].text().then((text: string) => {
-        setDebugLog(JSON.parse(text));
-      });
-    }
-  }, []);
-
-  return (
-    <div style={{ marginTop: 20 }}>
-      <FieldRow>
-        <InputField
-          type="file"
-          id="debugLog"
-          name="debugLog"
-          label={t("Debug log")}
-          onChange={onChangeDebugLog}
-        />
-      </FieldRow>
-      {debugLog && selectedUserId && (
-        <SequenceDiagramViewer
-          localUserId={debugLog.localUserId}
-          selectedUserId={selectedUserId}
-          onSelectUserId={setSelectedUserId}
-          remoteUserIds={debugLog.remoteUserIds}
-          events={debugLog.eventsByUserId[selectedUserId]}
-        />
-      )}
-    </div>
-  );
-}

src/Toast.module.css

@@ -0,0 +1,38 @@
+/*
+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.
+*/
+
+.toast {
+  color: var(--cpd-color-text-on-solid-primary);
+  background: var(--cpd-color-alpha-gray-1200);
+  padding-inline: var(--cpd-space-3x);
+  padding-block: var(--cpd-space-1x);
+  border: none;
+  border-radius: var(--cpd-radius-pill-effect);
+  box-shadow: var(--small-drop-shadow);
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-1x);
+}
+
+.toast > h3 {
+  margin: 0;
+}
+
+.toast > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+  flex-shrink: 0;
+  margin-inline-end: calc(-1 * var(--cpd-space-1x));
+}

src/Toast.tsx

@@ -0,0 +1,108 @@
+/*
+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 {
+  ComponentType,
+  FC,
+  SVGAttributes,
+  useCallback,
+  useEffect,
+} from "react";
+import {
+  Root as DialogRoot,
+  Portal as DialogPortal,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Close as DialogClose,
+  Title as DialogTitle,
+} from "@radix-ui/react-dialog";
+import classNames from "classnames";
+import { Text } from "@vector-im/compound-web";
+
+import styles from "./Toast.module.css";
+import overlayStyles from "./Overlay.module.css";
+
+interface Props {
+  /**
+   * The controlled open state of the toast.
+   */
+  open: boolean;
+  /**
+   * Callback for when the user dismisses the toast.
+   */
+  onDismiss: () => void;
+  /**
+   * A number of milliseconds after which the toast should be automatically
+   * dismissed.
+   */
+  autoDismiss?: number;
+  children: string;
+  /**
+   * A supporting icon to display within the toast.
+   */
+  Icon?: ComponentType<SVGAttributes<SVGElement>>;
+}
+
+/**
+ * A temporary message shown in an overlay in the center of the screen.
+ */
+export const Toast: FC<Props> = ({
+  open,
+  onDismiss,
+  autoDismiss,
+  children,
+  Icon,
+}) => {
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onDismiss();
+    },
+    [onDismiss],
+  );
+
+  useEffect(() => {
+    if (open && autoDismiss !== undefined) {
+      const timeout = setTimeout(onDismiss, autoDismiss);
+      return () => clearTimeout(timeout);
+    }
+  }, [open, autoDismiss, onDismiss]);
+
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay
+          className={classNames(overlayStyles.bg, overlayStyles.animate)}
+        />
+        <DialogContent asChild>
+          <DialogClose
+            className={classNames(
+              overlayStyles.overlay,
+              overlayStyles.animate,
+              styles.toast,
+            )}
+          >
+            <DialogTitle asChild>
+              <Text as="h3" size="sm" weight="semibold">
+                {children}
+              </Text>
+            </DialogTitle>
+            {Icon && <Icon width={20} height={20} aria-hidden />}
+          </DialogClose>
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+};

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

@@ -27,7 +27,15 @@ interface RoomIdentifier {
   viaServers: string[];
 }
 
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// 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
@@ -37,10 +45,14 @@ interface UrlParams {
    */
   roomId: string | null;
   /**
-   * Whether the app is running in embedded mode, and should keep the user
-   * confined to the current room.
+   * Whether the app should keep the user confined to the current call/room.
    */
-  isEmbedded: boolean;
+  confineToRoom: boolean;
+  /**
+   * Whether upon entering a room, the user should be prompted to launch the
+   * native mobile app. (Affects only Android and iOS.)
+   */
+  appPrompt: boolean;
   /**
    * Whether the app should pause before joining the call until it sees an
    * io.element.join widget action, allowing it to be preloaded.
@@ -101,19 +113,23 @@ interface UrlParams {
   password: string | null;
 }
 
+// This is here as a stopgap, but what would be far nicer is a function that
+// takes a UrlParams and returns a query string. That would enable us to
+// consolidate all the data about URL parameters and their meanings to this one
+// 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()}`;
 }
 
@@ -121,32 +137,33 @@ 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.
-  hasParam(name: string): boolean {
-    return this.fragmentParams.has(name) || this.queryParams.has(name);
-  }
-
-  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),
     ];
   }
+
+  public getFlagParam(name: string, defaultValue = false): boolean {
+    const param = this.getParam(name);
+    return param === null ? defaultValue : param !== "false";
+  }
 }
 
 /**
@@ -157,23 +174,29 @@ 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.
     roomId: parser.getParam("roomId"),
     password: parser.getParam("password"),
-    isEmbedded: parser.hasParam("embed"),
-    preload: parser.hasParam("preload"),
-    hideHeader: parser.hasParam("hideHeader"),
-    hideScreensharing: parser.hasParam("hideScreensharing"),
-    e2eEnabled: parser.getParam("enableE2e") !== "false", // Defaults to true
+    // This flag has 'embed' as an alias for historical reasons
+    confineToRoom:
+      parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
+    appPrompt: parser.getFlagParam("appPrompt", true),
+    preload: parser.getFlagParam("preload"),
+    hideHeader: parser.getFlagParam("hideHeader"),
+    hideScreensharing: parser.getFlagParam("hideScreensharing"),
+    e2eEnabled: parser.getFlagParam("enableE2e", true),
     userId: parser.getParam("userId"),
     displayName: parser.getParam("displayName"),
     deviceId: parser.getParam("deviceId"),
@@ -182,7 +205,7 @@ export const getUrlParams = (
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     analyticsID: parser.getParam("analyticsID"),
-    allowIceFallback: parser.hasParam("allowIceFallback"),
+    allowIceFallback: parser.getFlagParam("allowIceFallback"),
   };
 };
 
@@ -198,36 +221,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()}`;
+      }
     }
   }
 
@@ -252,6 +281,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";
@@ -24,14 +24,14 @@ import { PopoverMenuTrigger } from "./popover/PopoverMenu";
 import { Menu } from "./Menu";
 import { TooltipTrigger } from "./Tooltip";
 import { Avatar, Size } from "./Avatar";
-import { ReactComponent as UserIcon } from "./icons/User.svg";
-import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
-import { ReactComponent as LoginIcon } from "./icons/Login.svg";
-import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
+import UserIcon from "./icons/User.svg?react";
+import SettingsIcon from "./icons/Settings.svg?react";
+import LoginIcon from "./icons/Login.svg?react";
+import LogoutIcon from "./icons/Logout.svg?react";
 import { Body } from "./typography/Typography";
 import styles from "./UserMenu.module.css";
 
-interface 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

@@ -18,7 +18,7 @@ import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 
-import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
+import Logo from "../icons/LogoLarge.svg?react";
 import { useClient } from "../ClientContext";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
@@ -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

@@ -27,13 +27,14 @@ import { useHistory, useLocation } from "react-router-dom";
 import { captureException } from "@sentry/react";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { Trans, useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { useClientLegacy } from "../ClientContext";
 import { useInteractiveRegistration } from "./useInteractiveRegistration";
 import styles from "./LoginPage.module.css";
-import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
+import Logo from "../icons/LogoLarge.svg?react";
 import { LoadingView } from "../FullScreenView";
 import { useRecaptcha } from "./useRecaptcha";
 import { Caption, Link } from "../typography/Typography";
@@ -68,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();
@@ -77,7 +78,7 @@ export const RegisterPage: FC = () => {
           password,
           userName,
           recaptchaResponse,
-          passwordlessUser
+          passwordlessUser,
         );
 
         if (client && client?.groupCallEventHandler && passwordlessUser) {
@@ -97,7 +98,7 @@ export const RegisterPage: FC = () => {
                 await newClient.joinRoom(roomId);
               } else {
                 captureException(error);
-                console.error(`Couldn't join room ${roomId}`, error);
+                logger.error(`Couldn't join room ${roomId}`, error);
               }
             }
           }
@@ -134,7 +135,7 @@ export const RegisterPage: FC = () => {
       execute,
       client,
       setClient,
-    ]
+    ],
   );
 
   useEffect(() => {
@@ -183,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}
@@ -197,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

@@ -17,6 +17,7 @@ limitations under the License.
 import { useEffect, useCallback, useRef, useState } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { translatedError } from "../TranslatedError";
 
@@ -34,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>();
@@ -42,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, {
@@ -74,7 +79,7 @@ export const useRecaptcha = (sitekey?: string) => {
     }
 
     if (!window.grecaptcha) {
-      console.log("Recaptcha not loaded");
+      logger.log("Recaptcha not loaded");
       return Promise.reject(translatedError("Recaptcha not loaded", t));
     }
 
@@ -90,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();
         },
@@ -103,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) {
@@ -119,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,25 +13,25 @@ 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";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
-import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
-import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
-import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
-import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg";
-import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg";
-import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
-import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
-import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
+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 EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
+import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
+import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
+import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
 
 import styles from "./Button.module.css";
-import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
-import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
+import Fullscreen from "../icons/Fullscreen.svg?react";
+import FullscreenExit from "../icons/FullscreenExit.svg?react";
 import { VolumeIcon } from "./VolumeIcon";
 
 export type ButtonVariant =
@@ -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,16 +151,13 @@ 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 label = muted ? t("Start video") : t("Stop video");
@@ -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,9 +16,10 @@ limitations under the License.
 
 import { useTranslation } from "react-i18next";
 import useClipboard from "react-use-clipboard";
+import { FC } from "react";
 
-import { ReactComponent as CheckIcon } from "../icons/Check.svg";
-import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
+import CheckIcon from "../icons/Check.svg?react";
+import CopyIcon from "../icons/Copy.svg?react";
 import { Button, ButtonVariant } from "./Button";
 
 interface Props {
@@ -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,15 +17,15 @@ limitations under the License.
 import { ComponentPropsWithoutRef, FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
+import UserAddSolidIcon from "@vector-im/compound-design-tokens/icons/user-add-solid.svg?react";
 
-export const ShareButton: FC<
+export const InviteButton: FC<
   Omit<ComponentPropsWithoutRef<"button">, "children">
 > = (props) => {
   const { t } = useTranslation();
   return (
     <Button kind="secondary" size="sm" Icon={UserAddSolidIcon} {...props}>
-      {t("Share")}
+      {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/button/VolumeIcon.tsx

@@ -17,9 +17,9 @@ limitations under the License.
 
 import { ComponentPropsWithoutRef, FC } from "react";
 
-import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
-import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
-import { ReactComponent as Audio } from "../icons/Audio.svg";
+import AudioMuted from "../icons/AudioMuted.svg?react";
+import AudioLow from "../icons/AudioLow.svg?react";
+import Audio from "../icons/Audio.svg?react";
 
 interface Props extends ComponentPropsWithoutRef<"svg"> {
   /**

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/sharedKeyManagement.ts

@@ -16,70 +16,70 @@ 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}`;
 
-export 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;
 };
 
-export const useRoomSharedKey = (roomId: string): string | null => {
-  return useInternalRoomSharedKey(roomId)[0];
+/**
+ * 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();
+
+  useEffect(() => {
+    if (!urlParams.password || !urlParams.roomId) return;
+    if (!urlParams.roomId) return;
+
+    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.roomId && urlParams.password
+    ? [urlParams.roomId, urlParams.password]
+    : [undefined, undefined];
 };
 
-export const useManageRoomSharedKey = (roomId: string): string | null => {
-  const { password } = useUrlParams();
-  const [e2eeSharedKey, setE2EESharedKey] = useInternalRoomSharedKey(roomId);
+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 [urlRoomId, passwordFormUrl] = useKeyFromUrl();
 
-  useEffect(() => {
-    if (!password) return;
-    if (password === "") return;
-    if (password === e2eeSharedKey) return;
+  const storedPassword = useInternalRoomSharedKey(roomId);
 
-    setE2EESharedKey(password);
-  }, [password, e2eeSharedKey, setE2EESharedKey]);
-
-  useEffect(() => {
-    const hash = location.hash;
-
-    if (!hash.includes("?")) return;
-    if (!hash.includes(PASSWORD_STRING)) return;
-    if (password !== e2eeSharedKey) return;
-
-    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
-    const hashEnd = passwordStart.split("&")[1];
-
-    location.replace((hashStart ?? "") + (hashEnd ?? ""));
-  }, [password, e2eeSharedKey]);
-
-  return e2eeSharedKey;
+  if (storedPassword) return storedPassword;
+  if (urlRoomId === roomId) return passwordFormUrl;
+  return undefined;
 };
 
 export const useIsRoomE2EE = (roomId: string): boolean | null => {
-  const { isEmbedded } = useUrlParams();
-  const client = useClient();
-  const room = useMemo(
-    () => client.client?.getRoom(roomId) ?? null,
-    [roomId, client.client]
+  const { client } = useClient();
+  const room = useMemo(() => client?.getRoom(roomId) ?? null, [roomId, client]);
+  // For now, rooms in widget mode are never considered encrypted.
+  // In the future, when widget mode gains encryption support, then perhaps we
+  // should inspect the e2eEnabled URL parameter here?
+  return useMemo(
+    () => widget === null && (room === null || !room.getCanonicalAlias()),
+    [room],
   );
-  const isE2EE = useMemo(() => {
-    if (isEmbedded) {
-      return false;
-    } else {
-      return room ? !room?.getCanonicalAlias() : null;
-    }
-  }, [isEmbedded, room]);
-
-  return isE2EE;
 };

src/form/Form.tsx

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

src/home/CallList.tsx

@@ -17,11 +17,13 @@ limitations under the License.
 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";
 import styles from "./CallList.module.css";
-import { getRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
@@ -30,17 +32,18 @@ interface CallListProps {
   rooms: GroupCallRoom[];
   client: MatrixClient;
 }
-export function CallList({ rooms, client }: CallListProps) {
+
+export const CallList: FC<CallListProps> = ({ rooms, client }) => {
   return (
     <>
       <div className={styles.callList}>
-        {rooms.map(({ room, roomAlias, roomName, avatarUrl, participants }) => (
+        {rooms.map(({ room, roomName, avatarUrl, participants }) => (
           <CallTile
-            key={roomAlias}
+            key={room.roomId}
             client={client}
             name={roomName}
             avatarUrl={avatarUrl}
-            roomId={room.roomId}
+            room={room}
             participants={participants}
           />
         ))}
@@ -53,21 +56,29 @@ export function CallList({ rooms, client }: CallListProps) {
       </div>
     </>
   );
-}
+};
 interface CallTileProps {
   name: string;
   avatarUrl: string;
-  roomId: string;
+  room: Room;
   participants: RoomMember[];
   client: MatrixClient;
 }
-function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
-  const roomSharedKey = useRoomSharedKey(roomId);
+
+const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
+  const roomSharedKey = useRoomSharedKey(room.roomId);
 
   return (
     <div className={styles.callTile}>
-      <Link to={`/room/#?roomId=${roomId}`} className={styles.callTileLink}>
-        <Avatar id={roomId} name={name} size={Size.LG} src={avatarUrl} />
+      <Link
+        to={getRelativeRoomUrl(
+          room.roomId,
+          room.name,
+          roomSharedKey ?? undefined,
+        )}
+        className={styles.callTileLink}
+      >
+        <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
         <div className={styles.callInfo}>
           <Body overflowEllipsis fontWeight="semiBold">
             {name}
@@ -78,8 +89,12 @@ function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
+        value={getAbsoluteRoomUrl(
+          room.roomId,
+          room.name,
+          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,15 +14,16 @@ 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";
 
 import {
   createRoom,
+  getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
 } from "../matrix-utils";
@@ -37,17 +38,14 @@ 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";
 
 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();
@@ -57,9 +55,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) => {
@@ -71,22 +68,19 @@ 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, true);
 
-        if (e2eeEnabled) {
-          setLocalStorageItem(
-            getRoomSharedKeyLocalStorageKey(roomId),
-            randomString(32)
-          );
-        }
-
-        history.push(`/room/#?roomId=${roomId}`);
+        history.push(
+          getRelativeRoomUrl(
+            createRoomResult.roomId,
+            roomName,
+            createRoomResult.password,
+          ),
+        );
       }
 
       submit().catch((error) => {
@@ -96,13 +90,13 @@ export function RegisteredView({ client }: Props) {
           setError(undefined);
           setJoinExistingCallModalOpen(true);
         } else {
-          console.error(error);
+          logger.error(error);
           setLoading(false);
           setError(error);
         }
       });
     },
-    [client, history, setJoinExistingCallModalOpen, e2eeEnabled]
+    [client, history, setJoinExistingCallModalOpen],
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -114,15 +108,15 @@ export function RegisteredView({ client }: Props) {
 
   return (
     <>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav>
-          <UserMenuContainer />
-        </RightNav>
-      </Header>
       <div className={commonStyles.container}>
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">
@@ -156,7 +150,6 @@ export function RegisteredView({ client }: Props) {
                 <AnalyticsNotice />
               </Caption>
             )}
-            <E2EEBanner />
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage error={error} />
@@ -175,4 +168,4 @@ export function RegisteredView({ client }: Props) {
       />
     </>
   );
-}
+};

src/home/UnauthenticatedView.tsx

@@ -19,6 +19,7 @@ import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -27,6 +28,7 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import {
   createRoom,
+  getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
 } from "../matrix-utils";
@@ -39,11 +41,8 @@ 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";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -57,14 +56,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();
@@ -72,7 +69,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();
@@ -82,21 +79,12 @@ 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, true);
         } catch (error) {
           if (!setClient) {
             throw error;
@@ -125,11 +113,17 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(`/room/#?roomId=${roomId}`);
+        history.push(
+          getRelativeRoomUrl(
+            createRoomResult.roomId,
+            roomName,
+            createRoomResult.password,
+          ),
+        );
       }
 
       submit().catch((error) => {
-        console.error(error);
+        logger.error(error);
         setLoading(false);
         setError(error);
         reset();
@@ -142,21 +136,20 @@ export const UnauthenticatedView: FC = () => {
       history,
       setJoinExistingCallModalOpen,
       setClient,
-      e2eeEnabled,
-    ]
+    ],
   );
 
   return (
     <>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav hideMobile>
-          <UserMenuContainer />
-        </RightNav>
-      </Header>
       <div className={commonStyles.container}>
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav hideMobile>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">
@@ -200,7 +193,6 @@ export const UnauthenticatedView: FC = () => {
                 </Link>
               </Trans>
             </Caption>
-            <E2EEBanner />
             {error && (
               <FieldRow>
                 <ErrorMessage error={error} />

src/home/common.module.css

@@ -16,7 +16,7 @@ limitations under the License.
 
 .container {
   display: flex;
-  min-height: calc(100% - 64px);
+  min-height: 100%;
   flex-direction: column;
   justify-content: space-between;
 }
@@ -42,8 +42,4 @@ limitations under the License.
   .logo {
     display: none;
   }
-
-  .container {
-    min-height: calc(100% - 76px);
-  }
 }

src/home/useGroupCallRooms.ts

@@ -22,7 +22,7 @@ import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEv
 import { useState, useEffect } from "react";
 
 export interface GroupCallRoom {
-  roomAlias: string;
+  roomAlias?: string;
   roomName: string;
   avatarUrl: string;
   room: Room;
@@ -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;
       }
@@ -94,7 +94,7 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
         const groupCall = client.getGroupCallForRoom(room.roomId)!;
 
         return {
-          roomAlias: room.getCanonicalAlias(),
+          roomAlias: room.getCanonicalAlias() ?? undefined,
           roomName: room.name,
           avatarUrl: room.getMxcAvatarUrl()!,
           room,
@@ -103,7 +103,7 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
         };
       });
 
-      setRooms(items as GroupCallRoom[]);
+      setRooms(items);
     }
 
     updateRooms();
@@ -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

@@ -41,8 +41,12 @@ limitations under the License.
 
   --cpd-color-border-accent: var(--cpd-color-green-800);
   /* The distance to inset non-full-width content from the edge of the window
-  along the inline axis */
-  --inline-content-inset: max(var(--cpd-space-4x), calc((100vw - 1180px) / 2));
+  along the inline axis. This ramps up from 16px for typical mobile windows, to
+  96px for typical desktop windows. */
+  --inline-content-inset: min(
+    var(--cpd-space-24x),
+    max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+  );
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   --background-gradient: url("graphics/backgroundGradient.svg");
@@ -64,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");
 }
 
@@ -74,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");
 }
 
@@ -84,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");
 }
 
@@ -94,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");
 }
 
@@ -104,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");
 }
 
@@ -114,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");
 }
 
@@ -124,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");
 }
 
@@ -134,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

@@ -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) {

src/input/AvatarInputField.tsx

@@ -28,7 +28,7 @@ import { useTranslation } from "react-i18next";
 
 import { Avatar, Size } from "../Avatar";
 import { Button } from "../button";
-import { ReactComponent as EditIcon } from "../icons/Edit.svg";
+import EditIcon from "../icons/Edit.svg?react";
 import styles from "./AvatarInputField.module.css";
 
 interface Props extends AllHTMLAttributes<HTMLInputElement> {
@@ -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

@@ -25,7 +25,7 @@ import {
 import classNames from "classnames";
 
 import styles from "./Input.module.css";
-import { ReactComponent as CheckIcon } from "../icons/Check.svg";
+import CheckIcon from "../icons/Check.svg?react";
 import { TranslatedError } from "../TranslatedError";
 
 interface FieldRowProps {
@@ -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

@@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next";
 import { Popover } from "../popover/Popover";
 import { ListBox } from "../ListBox";
 import styles from "./SelectInput.module.css";
-import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
+import ArrowDownIcon from "../icons/ArrowDown.svg?react";
 
 interface Props extends AriaSelectOptions<object> {
   className?: string;
@@ -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

@@ -17,8 +17,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./StarRatingInput.module.css";
-import { ReactComponent as StarSelected } from "../icons/StarSelected.svg";
-import { ReactComponent as StarUnselected } from "../icons/StarUnselected.svg";
+import StarSelected from "../icons/StarSelected.svg?react";
+import StarUnselected from "../icons/StarUnselected.svg?react";
 
 interface Props {
   starCount: number;
@@ -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

@@ -28,6 +28,7 @@ import { createMediaDeviceObserver } from "@livekit/components-core";
 import { Observable } from "rxjs";
 
 import {
+  isFirefox,
   useAudioInput,
   useAudioOutput,
   useVideoInput,
@@ -50,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
@@ -65,7 +66,8 @@ function useObservableState<T>(
 function useMediaDevice(
   kind: MediaDeviceKind,
   fallbackDevice: string | undefined,
-  usingNames: boolean
+  usingNames: boolean,
+  alwaysDefault: boolean = false,
 ): MediaDevice {
   // Make sure we don't needlessly reset to a device observer without names,
   // once permissions are already given
@@ -81,23 +83,24 @@ 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);
 
-  return useMemo(
-    () => ({
+  return useMemo(() => {
+    const devId = available.some((d) => d.deviceId === selectedId)
+      ? selectedId
+      : available.some((d) => d.deviceId === fallbackDevice)
+      ? fallbackDevice
+      : available.at(0)?.deviceId;
+
+    return {
       available,
-      selectedId: available.some((d) => d.deviceId === selectedId)
-        ? selectedId
-        : available.some((d) => d.deviceId === fallbackDevice)
-        ? fallbackDevice
-        : available.at(0)?.deviceId,
+      selectedId: alwaysDefault ? undefined : devId,
       select,
-    }),
-    [available, selectedId, fallbackDevice, select]
-  );
+    };
+  }, [available, selectedId, fallbackDevice, select, alwaysDefault]);
 }
 
 const deviceStub: MediaDevice = {
@@ -120,10 +123,19 @@ interface Props {
 }
 
 export const MediaDevicesProvider: FC<Props> = ({ children }) => {
-  // Counts the number of callers currently using device names
+  // Counts the number of callers currently using device names.
   const [numCallersUsingNames, setNumCallersUsingNames] = useState(0);
   const usingNames = numCallersUsingNames > 0;
 
+  // Setting the audio device to something other than 'undefined' breaks echo-cancellation
+  // and even can introduce multiple different output devices for one call.
+  const alwaysUseDefaultAudio = isFirefox();
+
+  // On FF we dont need to query the names
+  // (call enumerateDevices + create meadia stream to trigger permissions)
+  // for ouput devices because the selector wont be shown on FF.
+  const useOutputNames = usingNames && !isFirefox();
+
   const [audioInputSetting, setAudioInputSetting] = useAudioInput();
   const [audioOutputSetting, setAudioOutputSetting] = useAudioOutput();
   const [videoInputSetting, setVideoInputSetting] = useVideoInput();
@@ -131,17 +143,18 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   const audioInput = useMediaDevice(
     "audioinput",
     audioInputSetting,
-    usingNames
+    usingNames,
   );
   const audioOutput = useMediaDevice(
     "audiooutput",
     audioOutputSetting,
-    usingNames
+    useOutputNames,
+    alwaysUseDefaultAudio,
   );
   const videoInput = useMediaDevice(
     "videoinput",
     videoInputSetting,
-    usingNames
+    usingNames,
   );
 
   useEffect(() => {
@@ -150,7 +163,9 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   }, [setAudioInputSetting, audioInput.selectedId]);
 
   useEffect(() => {
-    if (audioOutput.selectedId !== undefined)
+    // Skip setting state for ff output. Redundent since it is set to always return 'undefined'
+    // but makes it clear while debugging that this is not happening on FF. + perf ;)
+    if (audioOutput.selectedId !== undefined && !isFirefox())
       setAudioOutputSetting(audioOutput.selectedId);
   }, [setAudioOutputSetting, audioOutput.selectedId]);
 
@@ -161,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(
@@ -182,7 +197,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
       videoInput,
       startUsingDeviceNames,
       stopUsingDeviceNames,
-    ]
+    ],
   );
 
   return (
@@ -192,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
@@ -200,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();